/* Stage 3 · direction B, Mosaic Q1. Same objects and semantic palette as the phone.
   Reference: desktop-pick-20261014/product/css/web-r8-desk-b.css.
   Local geometry only; the five accepted stage-1 stylesheets stay immutable. */
@media (min-width: 1024px) {
  html { scroll-behavior: auto; }
  body { height: 100dvh; overflow: hidden; }
  header.app-topbar {
    max-width: 1824px;
    margin: auto;
    min-height: 80px;
    padding: 16px 24px;
  }
  header.app-topbar nav.nav-pill-container { flex: none; }
  nav.nav-pill-container .nav-pill-btn { padding: 0 16px; white-space: nowrap; }
  .nav-more > summary { list-style: none; }
  .nav-more > summary::-webkit-details-marker { display: none; }
  .app-viewport {
    max-width: 1824px;
    min-height: 0;
    height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 24px 24px;
    scrollbar-gutter: stable;
  }
  body:has(#page-overview.active) .shell-expense { display: none; }

  .r29-period { width: auto; margin: 0; }
  .r29-period .per-wrap { min-width: 180px; }
  .r29-period .per-btn { min-height: 44px; font: 500 13px/1 var(--sans); }
  #ovGrid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    grid-auto-flow: row dense;
  }
  #ovGrid > * { min-width: 0; margin: 0; grid-column: span 6; }
  #ovGrid[data-desktop-packed] { grid-auto-rows: 8px; }
  #ovGrid[data-desktop-packed] > * { grid-row: auto / span var(--desktop-rows, 1); }
  #ovGrid > [data-w="spend_split"] { order: 1; }
  #ovGrid > [data-w="upcoming"] { order: 2; }
  #ovGrid > [data-w="accounts"] { order: 3; }
  #ovGrid > #r8Season { order: 4; }
  #ovGrid > #r8Health { order: 5; }
  #ovGrid > [data-w="cashback"] { order: 6; }
  #ovGrid > #r8Limits { order: 7; }
  #ovGrid > [data-w="budgets"] { order: 8; }
  #ovGrid > [data-w="recent"] { order: 9; }
  #ovGrid > [data-w="left_to_spend"] { order: 10; }
  #ovGrid > [data-w="next_step"] { order: 11; }
  #ovGrid > #ovStrip { order: 20; }
  #ovGrid > #restore2Hints { order: 21; }
  #ovGrid .hg-body { min-width: 0; }
  #ovGrid .card { margin: 0; }
  #ovGrid > [data-w="spend_split"] { grid-column: 1 / span 6; }
  #ovGrid > [data-w="upcoming"] { grid-column: 7 / span 6; }
  #ovGrid > [data-w="accounts"] { grid-column: 1 / span 6; }
  #ovGrid > #r8Season { grid-column: 7 / span 3; }
  #ovGrid > #r8Health { grid-column: 10 / span 3; }
  #ovGrid > [data-w="cashback"] { grid-column: 7 / span 6; }
  #ovGrid > #r8Limits { grid-column: 1 / span 6; }
  #ovGrid > [data-w="budgets"] { grid-column: 7 / span 6; }
  #ovGrid > [data-w="recent"] { grid-column: 1 / span 6; }
  #ovGrid > [data-w="left_to_spend"] { grid-column: 7 / span 6; }
  #ovGrid > [data-w="next_step"] { grid-column: 1 / -1; }
  #ovGrid > :is(#ovStrip, #restore2Hints) { grid-column: 1 / -1; }
  #ovHero .r29-quick button { padding: 0 12px; font-size: 13px; }
  #ovHero .ov-hero-daily { gap: 12px; }
  #ovHero .hero-month { font-size: 40px; }
  #ovSoon { min-height: 0; }
  #ovSoon .ch { margin-bottom: 12px; }
  #ovSoon .ztsw-trigger { width: 100%; margin: 0; padding: 12px 16px; background: var(--well); border-radius: 16px; }
  #ovSoon .ztsw-row.row4 { flex-wrap: wrap; justify-content: flex-start; height: auto; gap: 12px; margin-bottom: 12px; }
  #ovSoon .ztsw-w4i { padding: 0 4px; min-height: 80px; flex: 0 0 52px; }
  #ovSoon .ztsw-icon.logo { transform: none; }
  #ovSoon .ztsw-soon-badge { display: none; }
  #ovSoon .ztsw-w4i small { white-space: nowrap; font-size: 11px; color: var(--ink-2); }
  #ovSoon .ztsw-w4i > .ztsw-icon { flex: none; }
  #ovSoon .ztsw-icon .ops-merchant { padding: 14px; }
  #ovSoon .ztsw-icon.logo .ops-merchant img { width: 100%; height: 100%; object-fit: contain; }
  #ovSoon .r8-next { padding: 10px 16px; }
  #r8Limits .r8-rows { gap: 8px; }
  #r8Limits .r8-v { font-size: 32px; }
  #r8HealthMore {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    transition: grid-template-rows var(--snap) var(--crit), margin-top var(--snap) var(--crit);
  }
  #r8HealthMore .gm-more-in { min-height: 0; overflow: hidden; }
  #r8HealthMore.is-open { grid-template-rows: 1fr; margin-top: 16px; }
  #r8HealthMore dl { gap: 12px; }
  #r8HealthMore dl div { flex-wrap: wrap; gap: 4px 12px; }
  #r8HealthMore dd { margin: 0; }
  #r8HealthMore p { overflow-wrap: anywhere; }
  #r8Season .gm-s-fig { margin-top: 0; }
  #r8Season .gm-weeks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); height: auto; gap: 4px; }
  #r8Season .gm-weeks i { aspect-ratio: 1; }
  .acc__head { flex-wrap: wrap; gap: 8px 12px; }
  .acc__title { font-size: 16px; }
  .acc__status { margin-right: auto; }
  #ovAcc .r29-wallet { padding: 12px 16px; }
  #ovAcc .r29-balance { margin: 12px 0; }
  #ovAcc .p2-account-allowance { margin-top: 16px; }
  #ovAcc .hg-h { margin: 0 0 4px; }
  #ovAcc .hg-t { font-size: 12px; font-weight: 400; margin: 0; }
  #ovAcc .hg-fig { font-size: 28px; }
  #ovAcc .hg-sub { font-size: 12px; color: var(--ink-2); margin: 4px 0 0; }
  #ovAcc .hg-add-source { display: flex; min-height: 44px; align-items: center; padding: 0 12px; }
  #ovAcc #accMore { font-size: 13px; }
  #ovAcc #accMore summary { margin-top: 4px; }
  #ovAcc .gm-cb { margin-top: 16px; }
  /* Supporting objects retain their original controls and data; compact their contents. */
  #ovGrid #r29Exchange { width: 100%; }
  #ovStrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #ovStrip > #ovDebtReturn { grid-column: span 1; }
  #ovStrip > #ovDebts { grid-column: span 1; }
  #ovStrip > #ovFinance { grid-column: 1 / -1; }
  #restore2Hints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #ovStrip > *, #restore2Hints > * { min-width: 0; }
  #ovFinance { display: flex; flex-wrap: wrap; gap: 12px; }
  #ovFinance > details { padding: 6px 16px; border-radius: 24px; background: var(--panel); flex: 1 1 220px; } /* same 56px row as .ov-debts > button */
  #ovFinance summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; }
  #ovFinance .finance-disclosure { font-size: 13px; padding-top: 12px; }
  #ovFinance .finance-disclosure dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  #ovFinance .finance-disclosure dd { margin: 0; }
  #ovFinance svg, #restore2Hints svg { width: 20px; height: 20px; flex: none; }
  .ov-debts > button, .r31-debt-return { min-height: 56px; padding: 12px 16px; border-radius: 24px; background: var(--panel); }
  #restore2Hints .card { padding: 16px 20px; }
  #ovGrid .r29-metrics { display: flex; flex-wrap: wrap; gap: 12px; }
  #ovTiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  #ovTiles > .tile { padding: 20px; border-radius: 24px; background: var(--panel); min-width: 0; font-size: 13px; }
  #ovTiles .tile__icon { width: 24px; height: 24px; }
  #ovTiles svg { width: 24px; height: 24px; }
  #ovTiles .tile__num, #ovTiles .tile__v { display: block; font-size: 28px; }
  #ovTiles .tile-top { display: flex; justify-content: space-between; gap: 12px; }
  #ovTiles .tile-ic { width: 24px; height: 24px; flex: none; }
  #ovTiles .tile-val { font: 500 28px/1.2 var(--sans); margin: 12px 0 8px; }
  #ovTiles .tile-note, #ovTiles .r30-cashback-forecast { display: block; font-size: 12px; }
  #ovTiles .tile-lbl { color: var(--ink-2); text-align: left; }
  #ovTiles > .tile { text-align: left; }
  #ovTiles p { margin: 4px 0; }
  #ovGrid .r29-exchange { padding: 20px; background: var(--panel); border-radius: 24px; width: 100%; }
  #ovGrid .r29-exchange > summary { min-height: 44px; cursor: pointer; }
  #ovGrid .ov-cats .bul { padding: 12px 0; font-size: 13px; }
  #ovGrid .ov-cats .nm { font-weight: 500; }
  #ovGrid .ov-cats .v { display: block; }
  #ovGrid .ov-cats .category-remaining { color: var(--ink-2); }
  .ov-r1.r29-trends { margin-top: 16px; }
  #ovTrendChart svg { max-height: 200px; }
  .ov-ops .op-m { overflow-wrap: anywhere; }
  .ov-ops .op-a { font-size: 13px; }
  .ov-ops .more, .r8-open, .r8-all { padding: 0 12px; }
  /* Centred expense window. The phone's real picker inputs and save pipeline stay intact. */
  #mExp { align-items: center; justify-content: center; padding: 24px; }
  #mExp .m-sheet { width: 560px; max-width: 560px; margin: 0; max-height: calc(100dvh - 48px); gap: 12px; }
  #mExp #expBody { gap: 12px; }
  #mExp .r8-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #mExp .r8-grid > .r8-wide { grid-column: auto; }
  #mExp .r8-grid > .r8-wide:has([data-r8-pick="cat"]) { grid-column: 1 / -1; }
  #mExp :is([data-r7-qr-open], [data-receipt-scan], .r8-cam-panel, [data-r7-qr-stage], video) { display: none; }
  #mExp .r8-row2 .r7-qr-open { min-height: 48px; }
  #mExp .r8-cur { min-height: 44px; height: 44px; top: 2px; bottom: 2px; }
  #mExp .r8-f { gap: 8px; }
  /* Subscriptions share the date-row and receipt objects with the phone. */
  .ztsw-layer { padding: 32px max(32px, calc((100vw - 1200px) / 2)) 0; }
  .ztsw-title { padding: 16px 20px; }
  .ztsw-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 120px; }
  .ztsw-scene { position: relative; left: auto; right: auto; top: auto; margin: 8px 24px 120px; }
  .ztsw-list { padding: 0 24px 120px; }
  .ztsw-list-row { padding: 20px; }
  .ztsw-list .desktop-sub-date { margin: 20px 0 12px; font-size: 14px; font-weight: 500; }
  .ztsw-scene .desktop-sub-date { position: absolute; margin: 0; font-size: 14px; font-weight: 500; }
  .ztsw-receipt .ztsw-r-top .ztsw-icon { width: 60px; height: 60px; }
  .ztsw-layer .ztsw-icon { display: inline-grid; place-items: center; border-radius: 16px; }
  .ztsw-layer .ztsw-icon img { width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
  .ztsw-layer .ztsw-icon .ops-merchant { padding: 14px; }
  .ztsw-layer .ztsw-icon .ops-merchant img { width: 100%; height: 100%; }
  .ztsw-list-row .ztsw-icon { width: 60px; height: 60px; flex: none; }
  .ztsw-actions button { min-height: 44px; padding: 0 16px; }
  #bSubsWrap { max-width: 1280px; margin: 0 auto; }
  #bSubsWrap .r8-g3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
  #bSubsWrap .r8-colW { grid-column: 1 / -1; }
  #bSubsWrap .card { margin: 0 0 16px; }
  #bSubsWrap .ztsw-trigger { width: 100%; padding: 12px 16px; margin: 0; background: var(--well); }
  #bSubsWrap .ztsw-grid { height: auto; display: grid; gap: 20px; margin: 0; }
  #bSubsWrap .ztsw-grp { display: block; min-width: 0; }
  #bSubsWrap .ztsw-grp-h { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
  #bSubsWrap .ztsw-grp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 144px)); gap: 12px; }
  #bSubsWrap .ztsw-w4i { padding: 16px; border-radius: 16px; background: var(--panel); gap: 8px; }
  #bSubsWrap .ztsw-icon.logo { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; }
  #bSubsWrap .ztsw-icon .ops-merchant { width: 100%; height: 100%; display: grid; place-items: center; padding: 14px; border-radius: inherit; }
  #bSubsWrap .ztsw-icon img { width: 100%; height: 100%; object-fit: contain; }
  #bSubsWrap .ztsw-w4i :is(b, em, small) { max-width: 100%; font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
  #bSubsWrap .ztsw-soon-badge { display: none; }
}
@media (min-width: 1280px) {
  /* Equal lanes let every neutral card fill space below any other card.
     The existing packer measures intrinsic heights; hero and health stay apart. */
  #ovGrid > [data-w="spend_split"] { grid-column: 1 / span 4; order: 1; }
  #ovGrid > [data-w="upcoming"] { grid-column: 5 / span 4; order: 2; }
  #ovGrid > #r8Health { grid-column: 9 / span 4; order: 3; }
  #ovGrid > :is([data-w="accounts"], [data-w="budgets"], [data-w="recent"], [data-w="cashback"], #r8Season, #r8Limits, [data-w="next_step"], [data-w="left_to_spend"], #ovStrip, #restore2Hints) { grid-column: span 4; }
  #ovGrid > [data-w="accounts"] { order: 4; }
  #ovGrid > #r8Limits { order: 8; }
  #ovGrid > [data-w="budgets"] { order: 6; }
  #ovGrid > [data-w="cashback"] { order: 5; }
  #ovGrid > [data-w="recent"] { order: 7; }
  #ovGrid > [data-w="next_step"] { order: 9; }
  #ovGrid > #r8Season { order: 10; }
  #ovGrid > #ovStrip { order: 11; }
  #ovGrid > #restore2Hints { order: 12; }
  #ovStrip, #restore2Hints { grid-template-columns: minmax(0, 1fr); }
  #ovStrip > :is(#ovDebtReturn, #ovDebts, #ovFinance),
  #restore2Hints > :is(#ovNewsHost, #ovTripHost) { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  #ovTiles { grid-template-columns: minmax(0, 1fr); }
  #ovGrid > :is(#ovStrip, #restore2Hints) { grid-column: 1 / -1; }
  #ovGrid > [data-w="budgets"] { order: 4; }
  #ovGrid > [data-w="accounts"] { order: 5; }
  #ovGrid > [data-w="cashback"] { order: 6; }
  #ovGrid > [data-w="next_step"] { order: 8; }
  #ovGrid > #r8Limits { order: 9; }
  #ovStrip, #restore2Hints { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #ovStrip > :is(#ovDebts, #ovFinance) { grid-column: span 1; }
  #restore2Hints > #ovNewsHost { grid-column: span 2; }
  #ovStrip > #ovDebtReturn,
  #ovStrip:has(> #ovDebtReturn[hidden]) > :is(#ovDebts, #ovFinance) { grid-column: span 2; }
  #restore2Hints > #ovTripHost { grid-column: span 2; }
  #restore2Hints:has(> #ovNewsHost[hidden]) > #ovTripHost { grid-column: 1 / -1; }
}
@media (min-width: 1680px) {
  header.app-topbar { padding-block: 20px; min-height: 88px; }
  .app-viewport { height: calc(100dvh - 88px); }
  #ovGrid { gap: 20px; }
  #ovStrip, #restore2Hints { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #ovStrip > :is(#ovDebtReturn, #ovDebts, #ovFinance) { grid-column: span 2; }
  #restore2Hints > #ovNewsHost { grid-column: span 2; }
  #restore2Hints > #ovTripHost { grid-column: span 4; }
  #ovStrip:has(> #ovDebtReturn[hidden]) > :is(#ovDebts, #ovFinance) { grid-column: span 3; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #r8HealthMore { transition: none; }
}

/* W5 · Overview tail on the computer: the phone link-row / details / pill / row objects (overview.css),
   ported 1:1 onto the mosaic tiles. Same language: card, 44 px capsule, row, 20 px icon. */
@media (min-width: 1024px) {
  .ov-debts > button, .r31-debt-return {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    border-radius: 24px;
    background: var(--panel);
    color: var(--ink);
    font: 400 14px/20px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  .ov-debts > button > span { flex: 1 1 auto; min-width: 0; }
  .r31-debt-return { width: fit-content; max-width: min(720px, 100%); }
  .ov-debts > button > svg, .r31-debt-return > svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--ink-2);
  }
  #ovDebtList { margin: 4px 16px 12px; }
  .debt-mini {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font: 400 13px/18px var(--sans);
  }
  #ovDebtList .panel__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 500 13px var(--sans);
    color: var(--ink-2);
    text-decoration: none;
  }

  #ovFinance > details {
    padding: 20px;
    border-radius: 24px;
    background: var(--panel);
    font: 400 14px/20px var(--sans);
    color: var(--ink);
  }
  #ovFinance summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
  }
  #ovFinance summary::-webkit-details-marker { display: none; }
  #ovFinance svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
  .finance-disclosure { padding: 8px 0 12px; }
  .finance-disclosure dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 0;
  }
  .finance-disclosure dd { margin: 0; font-variant-numeric: tabular-nums; }
  .finance-disclosure p { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }

  /* the phone r8 cards read these legacy rows as text sources; they are never a visible row */
  #ovFinance > details#ovHealth, #ovSeasonLine { display: none; }

  /* announcement pill: the same link-row object as «Вам должны…» */
  .r33-announcement-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: 0;
    border-radius: 20px;
    background: var(--panel);
    color: var(--ink);
    font: 400 14px/20px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  .r33-announcement-pill > span { flex: 1 1 auto; min-width: 0; }
  .r33-announcement-pill > svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }

  /* --- «Категории · против лимитов» rows --- */
  #ovCats .bul {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 6px 0;
    font: 400 13px/18px var(--sans);
  }
  #ovCats .cat-point { width: 10px; height: 10px; border-radius: 50%; }
  #ovCats .bt, #ovCats .bul-meta { grid-column: 2 / -1; }
  #ovCats .nm.bul-nm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 500 13px/18px var(--sans);
    text-align: left;
    cursor: pointer;
  }
  #ovCats .v {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/18px var(--sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
  }
  #ovCats .v small { font-weight: 400; color: var(--ink-2); }
  #ovCats .bul-dr {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
  }
  #ovCats .bul-dr svg { width: 16px; height: 16px; }
  #ovCats .bt {
    position: relative;
    height: 6px;
    margin: 2px 0 4px;
    border-radius: 3px;
    background: var(--well-deep);
    overflow: hidden;
  }
  #ovCats .bt i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
  #ovCats .bt i.f { left: 0; background: var(--ink-3); }
  #ovCats .bt i.o { background: var(--danger); }
  #ovCats .bt b { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 1px; background: var(--ink); }
  #ovCats .bt b.pace { background: var(--c3); }
  #ovCats .bul-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 2px 0 6px;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovCats .bul-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 4px;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovCats .bul-foot .key { display: inline-flex; align-items: center; gap: 6px; }
  #ovCats .bul-foot .key b { width: 10px; height: 3px; border-radius: 2px; background: var(--ink-3); }
  #ovCats .bul-foot .key b.pv { background: var(--ink-2); }
  #ovWeek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 12px 0 -6px;
    font: 400 13px/18px var(--sans);
    color: var(--ink-2);
  }

  #ovMonth .pace-info {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: var(--well);
    color: var(--ink-2);
    font: 500 13px/1 var(--sans);
    cursor: pointer;
  }
  #ovMonth .chip.foc {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    font: 500 12px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .month-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  #ovMonth .seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--well-deep);
    width: fit-content;
  }
  #ovMonth .seg button {
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-2);
    font: 500 13px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); }
  #ovMonth .legend-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  #ovMonth .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/16px var(--sans);
    cursor: pointer;
  }
  #ovMonth .lg i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
  #ovMonth .lg[aria-pressed="false"] { opacity: 0.55; }

  /* --- home-grid widgets below the accounts card --- */
  .hg-anchor {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    overflow: hidden;
  }
  /* raw widgets only (next_step / left_to_spend): the reference cells above keep their own .card */
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) {
    box-sizing: border-box;
    padding: 20px;
    border-radius: 24px;
    background: var(--panel);
    color: var(--ink);
  }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-body { box-sizing: border-box; padding: 0; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-t { margin: 0; font: 500 14px/1.25 var(--sans); color: var(--ink-2); }
  .hg-sub { margin: 0; font: 400 12px/1.3 var(--sans); color: var(--ink-2); }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-step { margin: 12px 0 0; font: 500 15px/20px var(--sans); color: var(--ink); }
  .hg-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
  }
  .hg-deadline svg { width: 18px; height: 18px; }
  .hg-w:is([data-w="next_step"], [data-w="left_to_spend"], [data-w="calendar"]) .hg-actions { margin: 12px 0 0; }
  .hg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/1 var(--sans);
    cursor: pointer;
  }
  .hg-add-source {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 0;
    background: none;
    font: 400 13px/18px var(--sans);
    color: var(--ink-2);
    cursor: pointer;
  }
  .pending-legend { margin: 8px 0 0; }
  .pl-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: none;
    font: 400 13px/16px var(--sans);
    color: var(--ink-2);
    cursor: pointer;
  }

  /* --- «Счета Bybit» tail: account links and the folded list --- */
  #accMore .acc__link, #accMore .panel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font: 400 13px/18px var(--sans);
    color: var(--ink);
    text-decoration: none;
  }
  #accMore summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
  #accMore summary::-webkit-details-marker { display: none; }
  .stack__card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: 400 13px/18px var(--sans);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  #ovRunway > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
  #accMore :is(.acc__movesum, .acc__mv) { min-height: 44px; }

  #ovMonth {
    --data-line: var(--ink);
    --data-ghost: #d9dde3;
    --ink-4: var(--ink-3);
  }
  :root[data-theme="dark"] #ovMonth, html.dark #ovMonth {
    --data-line: var(--ink);
    --data-ghost: #4a525c;
  }
  #ovMonth .month-top { display: flex; flex-direction: column; gap: 12px; }
  #ovMonth .month-title-row { display: flex; align-items: center; gap: 8px; }
  #ovMonth .month-lbl { margin: 0; font: 500 16px/24px var(--sans); color: var(--ink); }
  #ovMonth .chart { position: relative; height: 220px; cursor: crosshair; touch-action: pan-y; }
  #ovMonth .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #ovMonth .lbl {
    position: absolute;
    font: 400 11px/14px var(--sans);
    color: var(--ink-2);
    white-space: nowrap;
    pointer-events: none;
  }
  #ovMonth .xlbl { bottom: -2px; transform: translateX(-50%); }
  #ovMonth .endlbl { font-weight: 500; transform: translateY(-50%); }
  #ovMonth .tag {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--panel);
    font: 500 12px/16px var(--sans);
    white-space: nowrap;
    pointer-events: none;
  }
  #ovMonth .tip-box {
    position: absolute;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fade) var(--ease), visibility 0s linear var(--fade);
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid var(--well-deep);
    border-radius: 8px;
    background: var(--panel);
    font: 400 12px/16px var(--sans);
    color: var(--ink-2);
    pointer-events: none;
  }
  #ovMonth .tip-box.on { opacity: 1; visibility: visible; transition: opacity var(--fade) var(--ease), visibility 0s; }
  #ovMonth .tip-box .d { font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  #ovMonth .tip-box div { display: flex; justify-content: space-between; gap: 12px; }
  #ovMonth .brush {
    position: absolute;
    top: 12px;
    bottom: 22px;
    display: none;
    background: rgba(17, 17, 17, 0.08);
    border-left: 1px solid var(--ink-3);
    border-right: 1px solid var(--ink-3);
    pointer-events: none;
  }
  #ovMonth .brush.on { display: block; }
  :root[data-theme="dark"] #ovMonth .brush, html.dark #ovMonth .brush { background: rgba(255, 255, 255, 0.08); }

}

/* W8 · y1 · Overview on the computer: disclosures with one chevron, tail tiles that fit their column.
   The phone keeps «＋» on the exchange row; here the plus gives way to the chevron. */
@media (min-width: 1024px) {
  #ovFinance { --sans: "Onest Gap", Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  #ovGrid .r29-exchange > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font: 500 14px/20px var(--sans);
    color: var(--ink);
  }
  #ovGrid .r29-exchange > summary::-webkit-details-marker { display: none; }
  #ovGrid .r29-exchange > summary > span { display: none; }
  #ovGrid .r29-exchange > summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    background: var(--ink-2);
    -webkit-mask: var(--chev) center / 20px 20px no-repeat;
    mask: var(--chev) center / 20px 20px no-repeat;
    transition: rotate var(--mid) var(--ease);
  }
  #ovGrid .r29-exchange[open] > summary::after { rotate: 180deg; }

  /* the net-worth tile is as wide as its column and never pushes the strip */
  #ovFinance > details { min-width: 0; }
  #ovFinance summary { flex-wrap: wrap; justify-content: flex-start; min-width: 0; white-space: normal; gap: 0 12px; }
  #ovFinance .finance-disclosure dd { text-align: right; }

  /* tail tiles: same radius and padding, equal heights in a row, the pill fills its tile */
  #ovStrip, #restore2Hints { align-items: stretch; }
  #ovDebts { display: flex; flex-direction: column; gap: 12px; }
  #ovDebtList { flex: 1; margin: 0; padding: 12px 20px; border-radius: 24px; }
  #restore2Hints > :is(#ovNewsHost, #ovTripHost) { display: flex; padding: 0; background: none; }
  #restore2Hints > #ovNewsHost > .strip, #restore2Hints > #ovTripHost > #ovTrip { flex: 1; min-height: 68px; margin: 0; border-radius: 24px; padding: 20px; /* desk card canon (L6) */ }
  #ovMonth .month-sub { gap: 2px 16px; }
}