/* ==========================================================================
   Zidos Trail r9 "Светлая мастерская" (VISUAL-SPEC r9). Linked LAST.
   Visual overrides live here; shared slider geometry lives in pages.css.
   ========================================================================== */

/* Onest declared 100-500: any legacy 600/700/800 request is clamped to 500 (weight cap, spec 3.2) */
@font-face{font-family:"Onest";src:url(../fonts/Onest-subset.woff2) format("woff2");font-weight:100 500;font-display:swap}
@font-face{font-family:"JB Mono";src:url(../fonts/JetBrainsMono-subset.woff2) format("woff2");font-weight:100 800;font-display:swap}

/* ---------- 2.1 light tokens ---------- */
:root{
  color-scheme: light;
  /* r23 C-01: ink-3 contrast = 4.74:1 on canvas, 4.91:1 on panel-2 (WCAG sRGB). */
  --canvas:#f2f3f5; --ground:#e9eaee; --panel:#ffffff; --panel-2:#f6f7f9; --band:#e4e5e8; --well:#e2e4ea; --well-deep:#d3d7df;
  --ctl:#ffffff; --ctl-hover:#fbfbfd; --ctl-press:#f4f5f8; --scrim:rgba(20,22,30,.18);
  --key-top:#303037; --key-bot:#222228; --key-hover-top:#3b3b43; --key-hover-bot:#303037; --key-rim:rgba(255,255,255,.22); --key-ink:#ffffff;
  --ink:#111214; --ink-2:#5b5f68; --ink-3:#686c75; --ink-4:#a3a4aa;
  --pos-text:#1f7a48; --neg-text:#b8342f; --warn-text:#8a5d0c; --data-text:#5b3fd6; --focus:#2f5fd0;
  --data-1:#d1bdff; --data-2:#e8deff; --data-3:#b89cfb; --data-hi-top:#8b5cf6; --data-hi-bot:#a78bfa; --data-glow:rgba(139,92,246,.40);
  --data-line:#7c5ce0; --data-fill:rgba(124,92,224,.16); --data-ghost:#84888f; --data-in:#8fd1ae; --data-in-hi:#34a36b;
  /* r23 C-16: ink-2 on steps 1-4 >= 4.5:1; white on step 5 = 5.35:1. */
  --heat-0:#f6f5f9; --heat-1:#f0eef5; --heat-2:#e9e6f0; --heat-3:#e1ddea; --heat-4:#ddd8e7; --heat-5:#7656c7;
  --calendar-peak:#7656c7; --category-within:#c8c7d6; --category-over:rgba(229,72,77,.75);
  --merchant-cafe:#d3a6d6; --merchant-transport:#9fc4d6; --merchant-subscriptions:#cbbcf2; --merchant-utilities:#b8bdd6;
  --panel-edge:rgba(0,0,0,.06); --control-edge:rgba(0,0,0,.10);
  --cat-1:#b39cf0; --cat-2:#8fb3e8; --cat-3:#8ccfb8; --cat-4:#e9b77a; --cat-5:#e89a9a; --cat-6:#a9adb8;
  --over:#ef8a84; --over-glow:rgba(229,78,72,.28); --over-area:rgba(229,78,72,.12); --hold-dot:#d99a1e; --ok-dot:#34a36b;
  --pill-ok-a:#247f5c; --pill-ok-b:#1c7350; --pill-bad-a:#c9433a; --pill-bad-b:#b9382f; --pill-warn-a:#976412; --pill-warn-b:#7f540c; --pill-hold-a:#6e717c; --pill-hold-b:#5b5e68;
  --card-bybit-a:#2a2b30; --card-bybit-b:#141517; --card-bybit-ink:#a7a8af;
  /* r23 C-24: Funding saturation 37.19%; text >= 4.70:1 across its gradient.
     UTA text >= 4.55:1 across its gradient; Bybit's material stays unchanged.
     Captured light-theme top-edge luminance: Funding .653, UTA .355,
     Bybit .126; neighbouring cards differ by .298 and .229. */
  --card-uta-a:#9395aa; --card-uta-b:#7d8198; --card-uta-ink:#171923;
  --card-fund-a:#d9c9ac; --card-fund-b:#c5b59a; --card-fund-ink:#514432;
  --card-shade:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.14));
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(246,247,250,.62) 48%,rgba(255,255,255,.84) 100%);
  --glass-solid:#f8f9fb; --glass-blur:blur(18px) saturate(160%);
  --glass-edge:0 0 0 1px rgba(20,24,40,.10),inset 0 1px 0 rgba(255,255,255,.80),inset 0 -1.5px 0 rgba(255,255,255,.95);
  --glass-lift:0 3px 5px -1px rgba(20,24,40,.22),0 14px 30px -6px rgba(20,24,40,.18);
  --e0:0 0 0 1px rgba(20,22,30,.04);
  --e1:0 1px 1px rgba(16,18,24,.06),0 3px 8px rgba(16,18,24,.07);
  --e1b:0 2px 4px rgba(16,18,24,.04),0 6px 14px rgba(16,18,24,.06);
  --e2:0 1px 2px rgba(16,18,24,.05),0 4px 12px rgba(16,18,24,.07);
  --e3:0 2px 3px rgba(0,0,0,.20),0 10px 24px -4px rgba(0,0,0,.28);
  --e-float:0 24px 64px -12px rgba(20,24,40,.28),0 0 0 1px rgba(20,22,30,.06);
  --inset:inset 0 1px 2px rgba(20,24,40,.10),inset 0 -1px 0 rgba(255,255,255,.70);
  --pocket-drop:drop-shadow(0 1px 1px rgba(16,18,24,.06)) drop-shadow(0 6px 14px rgba(16,18,24,.08));
  --r-shell:36px; --r-sheet:32px; --r-panel:20px; --r-pocket:20px; --r-card:16px; --r-sub:14px; --r-ctl:8px; --r-pill:7px;
  --r-band:5px; --r-cell:4px; --r-bar:6px 6px 2px 2px; --r-row:12px; --r-inner:22px; --r-modal:28px; --r-check:5px; --r-cap:999px;
  --r-tick:1px; --r-dot:50%; --r-none:0;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --page-x:20px; --page-measure:1180px; --gap:20px; --pad:24px; --row:48px; --row-1:40px; --ctl-h:36px;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JB Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease-out:cubic-bezier(.22,.8,.26,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:120ms; --t-mid:200ms; --t-slow:320ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --t-fast:0ms; --t-mid:0ms; --t-slow:120ms; --ease-spring:ease-out; } }

/* ---------- 2.2 dark (material B) ---------- */
:root.dark,:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#17151c; --ground:#121016; --panel:#211e28; --panel-2:#34303e; --band:#34303e;
  --well:#1b1922; --well-deep:#14121a; --ctl:#36313f; --ctl-hover:#40394b; --ctl-press:#302b39; --scrim:rgba(0,0,0,.45);
  --key-top:#303037; --key-bot:#222228; --key-hover-top:#3b3b43; --key-hover-bot:#303037; --key-rim:rgba(255,255,255,.6); --key-ink:#ffffff;
  --ink:#f4f1fa; --ink-2:#b7b0c3; --ink-3:#aaa2b7; --ink-4:#625b70;
  --pos-text:#5fd88a; --neg-text:#ff8a80; --warn-text:#f3c27a; --data-text:#b9a8ff; --focus:#7fb0ff;
  --data-1:#6a58b8; --data-2:#3a3160; --data-3:#8a74e0; --data-hi-top:#b9a8ff; --data-hi-bot:#9b82ff;
  --data-glow:rgba(155,130,255,.45); --data-line:#9b82ff; --data-fill:rgba(155,130,255,.18);
  --data-ghost:#60586f; --data-in:#2f6b4c; --data-in-hi:#34c759;
  --heat-0:#282330; --heat-1:#2c2745; --heat-2:#3e3470; --heat-3:#5a48a0; --heat-4:#7c64d6; --heat-5:#a58ff5;
  --cat-1:#9d86ea; --cat-2:#6f95d6; --cat-3:#5fb596; --cat-4:#d19b58; --cat-5:#d37c7c; --cat-6:#6c707b;
  --over:#e0655d; --over-glow:rgba(255,90,79,.30); --over-area:rgba(255,90,79,.14); --hold-dot:#f0ac48; --ok-dot:#34c759;
  --glass-fill:linear-gradient(180deg,rgba(72,63,88,.62),rgba(48,41,62,.55) 48%,rgba(79,69,96,.66));
  --glass-solid:#36303f;
  --glass-edge:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.06);
  --glass-lift:0 3px 6px -1px rgba(0,0,0,.45),0 16px 34px -8px rgba(0,0,0,.55);
  --e0:0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.04);
  --e1:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.35);
  --e1b:0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.45);
  --e2:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -8px rgba(0,0,0,.55);
  --e3:0 2px 3px rgba(0,0,0,.40),0 10px 24px -4px rgba(0,0,0,.55);
  --e-float:0 30px 70px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  --inset:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --pocket-drop:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
@media (prefers-color-scheme: dark){
  :root:not(.light):not([data-theme="light"]){
  color-scheme:dark;
  --canvas:#17151c; --ground:#121016; --panel:#211e28; --panel-2:#34303e; --band:#34303e;
  --well:#1b1922; --well-deep:#14121a; --ctl:#36313f; --ctl-hover:#40394b; --ctl-press:#302b39; --scrim:rgba(0,0,0,.45);
  --key-top:#303037; --key-bot:#222228; --key-hover-top:#3b3b43; --key-hover-bot:#303037; --key-rim:rgba(255,255,255,.6); --key-ink:#ffffff;
  --ink:#f4f1fa; --ink-2:#b7b0c3; --ink-3:#aaa2b7; --ink-4:#625b70;
  --pos-text:#5fd88a; --neg-text:#ff8a80; --warn-text:#f3c27a; --data-text:#b9a8ff; --focus:#7fb0ff;
  --data-1:#6a58b8; --data-2:#3a3160; --data-3:#8a74e0; --data-hi-top:#b9a8ff; --data-hi-bot:#9b82ff;
  --data-glow:rgba(155,130,255,.45); --data-line:#9b82ff; --data-fill:rgba(155,130,255,.18);
  --data-ghost:#60586f; --data-in:#2f6b4c; --data-in-hi:#34c759;
  --heat-0:#282330; --heat-1:#2c2745; --heat-2:#3e3470; --heat-3:#5a48a0; --heat-4:#7c64d6; --heat-5:#a58ff5;
  --cat-1:#9d86ea; --cat-2:#6f95d6; --cat-3:#5fb596; --cat-4:#d19b58; --cat-5:#d37c7c; --cat-6:#6c707b;
  --over:#e0655d; --over-glow:rgba(255,90,79,.30); --over-area:rgba(255,90,79,.14); --hold-dot:#f0ac48; --ok-dot:#34c759;
  --glass-fill:linear-gradient(180deg,rgba(72,63,88,.62),rgba(48,41,62,.55) 48%,rgba(79,69,96,.66));
  --glass-solid:#36303f;
  --glass-edge:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.06);
  --glass-lift:0 3px 6px -1px rgba(0,0,0,.45),0 16px 34px -8px rgba(0,0,0,.55);
  --e0:0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.04);
  --e1:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.35);
  --e1b:0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.45);
  --e2:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -8px rgba(0,0,0,.55);
  --e3:0 2px 3px rgba(0,0,0,.40),0 10px 24px -4px rgba(0,0,0,.55);
  --e-float:0 30px 70px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  --inset:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);
  --pocket-drop:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  }
}

/* ---------- 2.4 legacy aliases (v8.css / pages.css read these) ---------- */
:root,:root.dark,html.dark{
  --bg-canvas:var(--canvas); --bg-card:var(--panel); --bg-subtle:var(--panel-2); --bg-hover:var(--ctl-hover);
  --border-subtle:transparent; --border-focus:var(--well-deep);
  --text-main:var(--ink); --text-muted:var(--ink-2); --text-light:var(--ink-3); --text-light-2:var(--ink-3);
  --brand-orange:var(--key-bot); --brand-orange-hover:var(--key-top); --brand-orange-subtle:var(--band); --brand-orange-border:transparent;
  --brand-navy:var(--ink); --brand-pill-active:var(--ctl); --brand-pill-active-text:var(--ink);
  --success:var(--pos-text); --success-bg:transparent; --success-border:transparent;
  --warning:var(--warn-text); --warning-bg:transparent; --warning-border:transparent;
  --danger:var(--neg-text); --danger-bg:transparent; --danger-border:transparent;
  --shadow-sm:var(--e1); --shadow-card:var(--e0); --shadow-hover:var(--e2);
  --radius-sm:var(--r-ctl); --radius-md:var(--r-sub); --radius-lg:var(--r-panel); --radius-pill:var(--r-cap);
  /* legacy mono was used for sums: spec forbids it, so the legacy mono token resolves to the grotesk */
  --font-sans:var(--sans); --font-mono:var(--sans);
  --ok:var(--pos-text); --pad-card:24px;
  --h0:var(--heat-0); --h1:var(--heat-1); --h2:var(--heat-2); --h3:var(--heat-3); --h4:var(--heat-4); --h5:var(--heat-5);
  --grid:rgba(20,22,30,.06); --grid-strong:rgba(20,22,30,.10);
  /* limit slider (another process owns the markup; hooks .sl*) */
  --sl-track:var(--well-deep); --sl-track-line:transparent; --sl-spent:var(--data-line); --sl-left:var(--data-2); --sl-over:var(--over);
  --sl-glass:transparent; --sl-hair:rgba(20,24,40,.16); --sl-spec:rgba(255,255,255,.9); --sl-shadow:rgba(20,24,40,.22); --sl-tick:var(--ink-3);
}
html.dark{ --grid:rgba(255,255,255,.06); --grid-strong:rgba(255,255,255,.10); --sl-hair:rgba(255,255,255,.18); --sl-spec:rgba(255,255,255,.3); --sl-shadow:rgba(0,0,0,.55); }
:root.dark{--sl-track:color-mix(in srgb,#fff 8%,var(--panel))}

/* ---------- 4.2 glass: six roles only ---------- */
.glass,
.sl-th .sl-body,
.drill.sheet,
nav.nav-pill-container,
header.app-topbar,
.g-sheet{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-bf,var(--glass-blur));
          backdrop-filter:var(--glass-bf,var(--glass-blur));
  box-shadow:var(--glass-edge),var(--glass-lift);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass,.sl-th .sl-body,.drill.sheet,body header.app-topbar nav.nav-pill-container,.g-sheet{ background:var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce){
  .glass,.sl-th .sl-body,.drill.sheet,body header.app-topbar nav.nav-pill-container,.g-sheet{ background:var(--glass-solid); --glass-bf:none; }
}

/* ---------- motion reset: no ambient animation ---------- */
*,*::before,*::after{ animation:none; }
.tab-content.active,.drill,.drill.out,.drill.sheet.out,.brow2.fresh,.sl-tick.pulse{ animation:none; }
/* r22 C1/C3/C4: interaction feedback has no movement in reduced-motion mode. */
@media (prefers-reduced-motion:reduce){
  #ovAcc .acc__caret,button.stack__card,.pending-legend .pl-btn,#ovPkSplit button.split__seg{transition:none}
  #ovAcc [data-acc-row].is-flash{animation:none;outline:2px solid var(--focus);outline-offset:2px}
}

/* ---------- 5.1 canvas, type ---------- */
html,body{background:var(--canvas);color:var(--ink);font:400 14px/20px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
body{font-variant-numeric:tabular-nums lining-nums}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.t-tag{font:600 11px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.t-over{font:500 12px/16px var(--sans);letter-spacing:.01em;color:var(--ink-2)}
.t-label{font:400 13px/18px var(--sans);color:var(--ink-2)}
.dot{width:6px;height:6px;border-radius:var(--r-dot);display:inline-block;flex:none}
.dot-ok{background:var(--ok-dot)}
.muted{color:var(--ink-2)}
.pos{color:var(--pos-text)} .neg{color:var(--neg-text)}
.cur{font-size:.58em;color:var(--ink-3);font-weight:420;margin-left:.12em}
main.app-viewport{max-width:1440px;padding:8px var(--page-x) 48px}
.page-inner{gap:var(--gap)}
@media (min-width:1600px){
  body{background:var(--ground)}
  main.app-viewport{background:var(--canvas);border-radius:var(--r-shell);margin:0 auto 20px;box-shadow:var(--e0)}
  header.app-topbar{max-width:1440px;margin:0 auto;border-radius:0 0 var(--r-card) var(--r-card)}
}

/* ---------- 5.2 top bar (no glass) ---------- */
/* header is in the glass group only to switch the legacy blur off: --glass-bf:none, opaque canvas, no edge */
header.app-topbar{--glass-bf:none;height:64px;padding:0 var(--page-x);background:var(--canvas);border:0;box-shadow:none;gap:24px}
html.dark header.app-topbar{background:var(--canvas)}
.zt-wordmark{height:24px}
.topbar-controls{gap:8px}
.demo-badge{height:24px;padding:0 8px;border-radius:var(--r-band);background:var(--band);color:var(--ink-2);font:600 11px/24px var(--mono);letter-spacing:.08em}
.pro-link,.btn-ghost,.per-btn{height:var(--ctl-h);padding:0 12px;border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);color:var(--ink);font:500 13px/1 var(--sans);transition:background var(--t-fast),box-shadow var(--t-fast)}
.pro-link:not(:disabled):not([aria-disabled="true"]):hover,.btn-ghost:not(:disabled):not([aria-disabled="true"]):hover{background:var(--ctl-hover)}
.pro-link:not(:disabled):not([aria-disabled="true"]):active,.btn-ghost:not(:disabled):not([aria-disabled="true"]):active{background:var(--ctl-press);box-shadow:0 1px 1px rgba(16,18,24,.06);transform:translateY(.5px)}
.pro-link b{order:2;height:18px;padding:0 5px;border-radius:var(--r-cell);background:var(--band);color:var(--ink-2);font:600 10.5px/18px var(--mono);letter-spacing:.08em}

.sync-time{font:400 13px/1 var(--sans);color:var(--ink-2)}
#syncBtn,#themeToggleBtn{width:36px;padding:0;justify-content:center;border-radius:var(--r-dot);color:var(--ink-2)}
#syncBtn:not(:disabled):not([aria-disabled="true"]):hover,#themeToggleBtn:not(:disabled):not([aria-disabled="true"]):hover{color:var(--ink)}
#accBtn{width:36px;padding:0;justify-content:center;border-radius:var(--r-dot);background:var(--panel-2);box-shadow:none;font:500 13px/36px var(--sans)}
.btn-ghost svg,.pro-link svg{width:16px;height:16px;color:var(--ink-2);stroke-width:1.5}

/* ---------- 5.3 nav: segmented L with one glass thumb ---------- */
/* desktop nav is a well (not glass): blur off */
nav.nav-pill-container{--glass-bf:none;position:relative;height:44px;padding:4px;gap:0;border:0;border-radius:var(--r-cap);background:var(--well);box-shadow:var(--inset)}
nav.nav-pill-container .nav-pill-btn{position:relative;z-index:1;height:36px;padding:0 14px;border-radius:var(--r-cap);font:500 13px/1 var(--sans);color:var(--ink-2);background:transparent;box-shadow:none;transition:color var(--t-fast)}
nav.nav-pill-container .nav-pill-btn:hover{color:var(--ink);background:transparent}
nav.nav-pill-container .nav-pill-btn.active{color:var(--ink);background:transparent;box-shadow:none}
nav.nav-pill-container:not(.has-thumb) .nav-pill-btn.active{background:var(--ctl);box-shadow:var(--glass-edge),var(--glass-lift)}
.nav-thumb{position:absolute;z-index:0;top:4px;left:0;height:36px;width:var(--w,0px);border-radius:var(--r-cap);pointer-events:none;
  transform:translateX(var(--x,0px));opacity:0}
.has-thumb .nav-thumb{opacity:1}
.thumb-live .nav-thumb{transition:transform var(--t-slow) var(--ease-spring),width var(--t-slow) var(--ease-spring)}

/* ---------- 5.4 page head ---------- */
.page-head{min-height:56px;margin:0;gap:12px}
.page-head h1{font:420 28px/34px var(--sans);letter-spacing:-.02em;color:var(--ink)}
.page-head h1 .h-sub,.page-head h1 span{font:inherit;color:var(--ink-3);letter-spacing:inherit}
.page-head h1 .help,.page-head #rcHelp{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-dot);background:var(--band);color:var(--ink-2);font:500 11px/1 var(--sans);vertical-align:middle;margin-left:4px;cursor:help}
.page-actions{gap:8px}

/* ---------- 5.5 panels ---------- */
.card{background:var(--panel);border:0;border-radius:var(--r-panel);box-shadow:var(--e0)}
.card:hover{box-shadow:var(--e0)}
.ch{padding:var(--pad) var(--pad) 12px;min-height:32px}
.ch h2,.ch .ttl h2{font:500 16px/22px var(--sans);letter-spacing:-.005em;color:var(--ink)}
.ch h2 .tail{display:none}
.more{font:500 13px/1 var(--sans);color:var(--ink-2)}
.more:hover{color:var(--ink)}
.cb{padding:4px var(--pad) 20px}
.sub{background:var(--panel-2);border-radius:var(--r-sub);padding:16px}

/* ---------- buttons ---------- */
.btn-brand,.btn-dark{height:36px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-ctl);
  color:var(--key-ink);font:500 13px/1 var(--sans);background:linear-gradient(var(--key-top),var(--key-bot));
  box-shadow:inset 0 1px 0 var(--key-rim),var(--e3);transition:background var(--t-fast)}
.btn-brand:not(:disabled):not([aria-disabled="true"]):hover,.btn-dark:not(:disabled):not([aria-disabled="true"]):hover{background:linear-gradient(var(--key-hover-top),var(--key-hover-bot));opacity:1;color:var(--key-ink)}
.btn-brand:not(:disabled):not([aria-disabled="true"]):active,.btn-dark:not(:disabled):not([aria-disabled="true"]):active{transform:translateY(1px);box-shadow:inset 0 1px 0 var(--key-rim),0 1px 2px rgba(0,0,0,.25)}
.btn-danger{color:#fff;background:var(--neg,#DC2626)}
.btn-ghost .cnt,.chip .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-cell);background:var(--band);font:600 11px/18px var(--mono);color:var(--ink-2);display:inline-block;text-align:center}
.iconbtn{border:0;background:var(--ctl);box-shadow:var(--e1);border-radius:var(--r-dot);color:var(--ink-2)}
.iconbtn:not(:disabled):not([aria-disabled="true"]):hover{color:var(--ink)}

/* ---------- 5.8 chips ---------- */
.chip{height:var(--ctl-h);padding:0 12px;gap:6px;border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);font:500 13px/1 var(--sans);color:var(--ink);transition:background var(--t-fast),box-shadow var(--t-fast)}
.chip:not(:disabled):not([aria-disabled="true"]):hover{background:var(--ctl-hover);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ctl);color:var(--ink);box-shadow:var(--e1),inset 0 0 0 1.5px var(--ink)}
.chip.foc{height:24px;box-shadow:var(--e1)}
.search{height:var(--ctl-h);border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);max-width:320px}
.search:focus-within{box-shadow:var(--e1),0 0 0 2px var(--focus)}
.search input{font:400 14px/1 var(--sans);color:var(--ink)}
.search input:focus,.search input:focus-visible{outline:none !important;box-shadow:none !important}
.search input::placeholder{color:var(--ink-3)}
.search svg{color:var(--ink-3)}

/* ---------- 5.9 pills ---------- */
.pill{height:24px;padding:0 10px;gap:6px;border:0;border-radius:var(--r-pill);font:500 12px/1 var(--sans);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.10)}
.pill.over{background:linear-gradient(90deg,var(--pill-bad-a),var(--pill-bad-b));color:#fff}
.pill.warn{background:linear-gradient(90deg,var(--pill-warn-a),var(--pill-warn-b));color:#fff}
.pill.fine{background:linear-gradient(90deg,var(--pill-ok-a),var(--pill-ok-b));color:#fff}
.pill.info{background:none;box-shadow:none;color:var(--ink-2);padding:0;font-weight:400}
.chip-s{height:auto;padding:0;background:none;border-radius:var(--r-none);font:400 13px/18px var(--sans);color:var(--ink-2)}
.chip-s.ok,.chip-s.warn{background:none;color:var(--ink-2)}
.chip-s.ok::before{content:"";width:6px;height:6px;border-radius:var(--r-dot);background:var(--ok-dot);margin-right:6px}
.chip-s.warn::before{content:"ждёт";display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:6px;border-radius:var(--r-pill);color:#fff;font:500 12px/1 var(--sans);
  background:linear-gradient(90deg,var(--pill-warn-a),var(--pill-warn-b));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* «в обработке»: a 6px dot, not a pill; text kept for screen readers */
.tag-p{display:inline-block;width:6px;height:6px;padding:0;margin:0 0 1px 8px;border:0;border-radius:var(--r-dot);background:var(--hold-dot);
  overflow:hidden;text-indent:12px;white-space:nowrap;vertical-align:middle;font-size:0;box-shadow:none}
.tag-p.tag-x,.tag-p.tag-r{display:inline-block;width:auto;height:20px;padding:0 7px;text-indent:0;font:500 11.5px/20px var(--sans);color:#fff;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.tag-p.tag-x{background:linear-gradient(90deg,var(--pill-bad-a),var(--pill-bad-b))}
.tag-p.tag-r{background:linear-gradient(90deg,var(--pill-ok-a),var(--pill-ok-b))}
.op:has(.tag-p:not(.tag-x):not(.tag-r)) .op-a,tr.r:has(.tag-p:not(.tag-x):not(.tag-r)) td.c3{color:var(--ink-2)}

/* ---------- 5.11 segmented M/S (legacy .seg with aria-pressed) ---------- */
.seg{position:relative;gap:0;height:36px;padding:3px;border:0;border-radius:var(--r-cap);background:var(--well);box-shadow:var(--inset)}
.seg button{height:30px;padding:0 14px;border-radius:var(--r-cap);font:500 13px/1 var(--sans);color:var(--ink-2);background:none;box-shadow:none;transition:color var(--t-fast),background var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--ink);background:var(--glass-fill);box-shadow:var(--glass-edge),var(--glass-lift)}
.seg.sm{height:30px;padding:2px}
.seg.sm button{height:26px;font-size:12px;padding:0 10px}

/* ---------- 5.13 toggle ---------- */
.switch{width:46px;height:28px;border-radius:var(--r-cap);background:var(--well-deep);box-shadow:var(--inset);transition:background var(--t-mid)}
.switch[aria-checked="true"]{background:linear-gradient(90deg,var(--pill-ok-a),var(--pill-ok-b))}
.switch::after{top:3px;left:3px;width:28px;height:22px;border-radius:var(--r-cap);background:var(--glass-fill);background-color:rgba(255,255,255,.55);box-shadow:var(--glass-edge),var(--glass-lift);
  transition:transform var(--t-slow) var(--ease-spring),width var(--t-fast)}
.switch[aria-checked="true"]::after{transform:translateX(12px)}
.switch:active::after{width:32px}

/* ---------- 5.14 checkbox ---------- */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;border:0;border-radius:var(--r-check);background:var(--ctl);box-shadow:var(--e1),inset 0 0 0 1.5px var(--ink-4);cursor:pointer;display:inline-grid;place-items:center;flex:none}
input[type="checkbox"]:checked,input[type="checkbox"]:indeterminate{background:linear-gradient(var(--key-top),var(--key-bot));box-shadow:inset 0 1px 0 var(--key-rim),0 1px 2px rgba(0,0,0,.2)}
input[type="checkbox"]:checked::after{content:"";width:9px;height:5px;border:solid var(--key-ink);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
input[type="checkbox"]:indeterminate::after{content:"";width:8px;height:2px;background:var(--key-ink);border-radius:var(--r-tick)}

/* ---------- 5.15 rows, avatars, day bands ---------- */
.ava{width:32px;height:32px;border-radius:var(--r-dot);background:var(--ctl) !important;color:var(--ink-2) !important;box-shadow:var(--e1);font:500 12px/1 var(--sans)}
.ava svg{width:16px;height:16px;stroke-width:1.5}
.ava.ava-dark,.ava.ava-sky{background:var(--ctl) !important;color:var(--ink) !important}
.catic{width:32px;height:32px;border-radius:var(--r-dot);background:var(--ctl) !important;color:var(--ink-2) !important;box-shadow:var(--e1)}
.catic svg{width:16px;height:16px;stroke-width:1.5}
.tile-ic{display:none}
.logo{width:32px;height:32px;border-radius:var(--r-dot);background:var(--ctl) !important;color:var(--ink) !important;box-shadow:var(--e1);display:inline-grid;place-items:center;font:500 13px/1 var(--sans)}
.op{border-top:0;min-height:var(--row);padding:6px 12px;margin:0 12px;border-radius:var(--r-row);transition:background var(--t-fast),box-shadow var(--t-fast)}
.op:hover{background:rgba(255,255,255,.6)}
html.dark .op:hover{background:var(--ctl)}
.op-m b{font:400 14px/20px var(--sans);color:var(--ink)}
.op-m span{font:400 13px/18px var(--sans);color:var(--ink-2)}
.op-m span svg{display:none}
.op-a{font:460 14px/20px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.op-a .muted,.op-a span{font:400 12px/16px var(--sans);color:var(--ink-3)}
.dayh{display:flex;align-items:center;height:28px;padding:0 12px;margin:12px 24px 4px;border-radius:var(--r-band);background:var(--band);font:500 12px/1 var(--sans);color:var(--ink-2)}
.dayh .num{font:460 13px/1 var(--sans);color:var(--ink)}
.setrow{border-top:0;padding:12px var(--pad)}
.setrow + .setrow{box-shadow:none}
.setrow .d{color:var(--ink-2)}
.state{font:500 13px/1 var(--sans)}
.state.ok{color:var(--pos-text)} .state.miss{color:var(--warn-text)}
.state.ok::before,.state.miss::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--r-dot);margin-right:6px;vertical-align:middle;background:var(--ok-dot)}
.state.miss::before{background:var(--hold-dot)}

/* ---------- r22 C1: Bybit accounts (opaque panel, VISUAL-SPEC 5.5) ---------- */
.ov-page .acc{
  /* The legacy border alias is transparent. Account separators are local to this panel. */
  --border-subtle:var(--well);
  width:100%;min-width:0;margin:0;padding:var(--pad);background:var(--panel);
  border:0;border-radius:var(--r-panel);box-shadow:var(--e0);color:var(--ink)
}
.acc__head{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:20px}
.acc__title{flex:none;margin:0;font:500 16px/22px var(--sans);letter-spacing:-.005em;color:var(--ink)}
.acc__status{display:flex;align-items:center;gap:6px;min-width:0;margin-left:auto;font:400 13px/18px var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc__stxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc__sync{flex:none;cursor:pointer;line-height:18px}
.acc__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:24px}
.acc__grid > *{min-width:0}
.acc__main,.acc__row{cursor:default}
.acc__main .t-over{font:500 12px/16px var(--sans);color:var(--ink-2)}
.acc__name{margin-top:8px;font:500 14px/20px var(--sans);color:var(--ink)}
.acc__bal{margin-top:4px;font:420 26px/32px var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.acc__note{max-width:44ch;margin:12px 0 0;font:400 13px/18px var(--sans);color:var(--ink-2)}
.acc__list,.acc__mvlist{list-style:none;margin:0;padding:0}
/* C1: one-pixel internal separators, without giving the columns container borders. */
.acc__list,.acc__moves{padding-inline-start:24px;box-shadow:inset 1px 0 var(--border-subtle)}
.acc__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;padding:12px 0}
.acc__row:first-child{padding-top:0}
.acc__row + .acc__row{box-shadow:inset 0 1px var(--border-subtle)}
.acc__rname{min-width:0;font:400 14px/20px var(--sans);color:var(--ink);overflow-wrap:anywhere}
.acc__rrole{display:block;margin-top:4px;font:400 13px/18px var(--sans);color:var(--ink-2)}
.acc__rval{min-width:0;flex:none;text-align:right;font:460 14px/20px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.acc__rval--na{flex:0 1 auto;max-width:14ch;font:400 13px/18px var(--sans);color:var(--ink-3);white-space:normal;overflow-wrap:anywhere}
.acc__moves{display:flex;flex-direction:column;align-items:stretch}
.acc__movesum,.acc__mv{appearance:none;display:flex;align-items:center;gap:10px;min-width:0;width:100%;margin:0;padding:8px;border:0;border-radius:var(--r-sub);background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background-color var(--t-fast)}
.acc__movesum{font:500 14px/20px var(--sans)}
.acc__movesum > span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.acc__movesum > .num{margin-left:auto;font-variant-numeric:tabular-nums lining-nums}
.acc__movesum:hover,.acc__mv:hover{background:var(--ctl)}
.acc__caret{display:inline-grid;place-items:center;flex:none;width:12px;height:12px;color:var(--ink-2);transition:transform var(--t-fast)}
.acc__caret::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.acc__movesum[aria-expanded="true"] .acc__caret{transform:rotate(180deg)}
.acc__mvlist{margin-top:4px}
.acc__mv{min-height:44px;font:400 14px/20px var(--sans)}
.acc__mv[aria-expanded="true"]{background:var(--panel-2)}
.acc__mvic{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--well);color:var(--ink-2);font-style:normal}
.acc__mvic svg{width:14px;height:14px}
.acc__mvic--transfer:empty::before{content:"⇄"}
.acc__mvic--topup:empty::before{content:"↓"}
.acc__mvt{flex:1;min-width:0;overflow-wrap:anywhere}
.acc__mvd{display:block;font:400 13px/18px var(--sans);color:var(--ink-2)}
.acc__mva{flex:none;margin-left:auto;font:460 14px/20px var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
.acc__bal .cur,.acc__rval .cur,.acc__mva .cur,.acc__mvx .cur{font:inherit;color:inherit} /* C1: the hero's .58em currency scale is too small in account rows. */
.acc__mvx{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 10px;margin:4px 8px 12px 42px;font:400 13px/18px var(--sans)}
.acc__mvx dt{color:var(--ink-2)}
.acc__mvx dd{min-width:0;margin:0;color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums;white-space:normal;overflow-wrap:anywhere}
.acc__mvx .t-tag{font:400 12px/16px var(--mono);letter-spacing:0;text-transform:none}
.acc__empty{margin:8px;font:400 13px/18px var(--sans);color:var(--ink-2)}
.acc__mvlist[hidden],.acc__mvx[hidden],.acc__empty[hidden]{display:none}
.acc__moves > .panel__link{align-self:flex-end;margin-top:auto;padding-top:12px;font:500 13px/18px var(--sans);color:var(--ink-2);text-decoration:none}
.acc__moves > .panel__link:hover,.acc__moves > .panel__link:focus-visible{color:var(--ink)}
/* C1: feedback runs once, only after an account is selected; no idle animation. */
@keyframes accFlash{from{background-color:var(--panel-2)}to{background-color:transparent}}
@media (prefers-reduced-motion:no-preference){
  #ovAcc [data-acc-row].is-flash{animation-name:accFlash;animation-duration:1.6s;animation-timing-function:ease-out}
}
@media (max-width:760px){
  .acc__head{flex-wrap:wrap;gap:8px 12px;margin-bottom:16px}
  .acc__status{order:1;flex:1 0 100%;width:100%;margin-left:0}
  .acc__sync{min-width:44px;min-height:44px;margin-left:auto}
  .acc__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .acc__list,.acc__moves{box-shadow:inset 0 1px var(--border-subtle);padding-inline-start:0;padding-top:16px}
}
/* r22 C1 fix (tablet 761-1279): three columns squeeze the movement rows to one letter per line at 768;
   Funding and the account rows stay side by side, the movements take the full width below. */
@media (min-width:761px) and (max-width:1279px){
  .acc__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .acc__moves{grid-column:1/-1;box-shadow:inset 0 1px var(--border-subtle);padding-inline-start:0;padding-top:16px}
}

/* ---------- r22 C2-C5/C7: controls keep their existing resting material ---------- */
#ovAcc button:focus-visible,button.stack__card:focus-visible,
.pending-legend .pl-btn:focus-visible,#ovPkSplit button.split__seg:focus-visible,button.pk-key:focus-visible{
  /* v8.css marks its legacy orange outline important. Keep this ring on the focus token. */
  outline:2px solid var(--focus) !important;outline-offset:2px !important
}
.pending-legend:has(.pl-btn){font:400 13px/18px var(--sans);color:var(--ink-2)}
.pending-legend .pl-btn,button.pk-key{appearance:none;position:relative;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pending-legend .pl-btn:hover,.pending-legend .pl-btn:focus-visible,button.pk-key:hover,button.pk-key:focus-visible{color:var(--ink);text-decoration:underline dotted;text-underline-offset:3px}
#ovPkSplit button.split__seg{appearance:none;position:relative;margin:0;padding:0;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:filter var(--t-fast)}
#ovPkSplit button.split__seg:hover{filter:brightness(1.06)}
/* C4: the legacy active scale creates a stacking context between touchend and click.
   Keep these text/track controls still so a neighbouring hit area cannot take that click. */
.pending-legend .pl-btn:active,button.pk-key:active,#ovPkSplit button.split__seg:active{transform:none !important}
@media (max-width:760px){
  .pending-legend .pl-btn::before,button.pk-key::before,#ovPkSplit button.split__seg::before{
    content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)
  }
  /* C4: expanded hit areas must not steal taps on a neighbouring segment or legend label. */
  button.pk-key::after,#ovPkSplit button.split__seg::after{content:"";position:absolute;inset:0;z-index:1}
}
.bul-foc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;margin-left:5px;color:var(--ink-3);vertical-align:middle;opacity:0;pointer-events:none}
.bul-foc:empty::before{content:"";width:16px;height:16px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8z'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.bul-foc svg{width:16px;height:16px}
.bul:hover .bul-foc,.bul:focus-within .bul-foc{opacity:1}
@media (pointer:coarse){.bul-foc{opacity:1}}

/* ---------- Overview: stack of cards with pocket (5.20) ---------- */
.ov-r1{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--gap);align-items:stretch}
.stack-panel{padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px}
.stack{position:relative;height:290px;flex:none}
.stack__card{position:absolute;height:150px;border-radius:var(--r-card);display:flex;justify-content:space-between;align-items:flex-start;
  appearance:none;margin:0;border:0;font:inherit;text-align:left;cursor:pointer; /* r22 C3: retain the div geometry and card palette. */
  padding:9px 16px 0;transition:transform var(--t-slow) var(--ease-spring);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 -2px 6px rgba(0,0,0,.06)}
.stack__card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.stack__card--uta,.stack__card--bybit{box-shadow:0 -2px 6px rgba(0,0,0,.18)}
.stack__card--fund{top:0;left:30px;right:30px;background:linear-gradient(180deg,var(--card-fund-a),var(--card-fund-b));color:var(--card-fund-ink)}
.stack__card--uta{top:30px;left:20px;right:20px;background:linear-gradient(180deg,var(--card-uta-a),var(--card-uta-b));color:var(--card-uta-ink)}
.stack__card--bybit{top:60px;left:10px;right:10px;background:linear-gradient(160deg,var(--card-bybit-a),var(--card-bybit-b));color:var(--card-bybit-ink)}
.stack__card--bybit::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--card-shade)}
.stack__card:hover,.stack__card:focus-visible{transform:translateY(-8px)}
.stack__card .t-tag{position:relative;z-index:1;font:600 11px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.stack__card .t-tag .cur{font:inherit;color:inherit;margin-left:.5em}
.stack__pocket-wrap{position:absolute;left:0;right:0;bottom:0;height:200px;filter:var(--pocket-drop)}
.stack__pocket{height:100%;border-radius:var(--r-pocket);background:var(--ctl);padding:58px 20px 18px;display:flex;flex-direction:column;
  -webkit-mask:radial-gradient(circle 52px at 50% 0,#0000 51.5px,#000 52px);
          mask:radial-gradient(circle 52px at 50% 0,#0000 51.5px,#000 52px)}
.stack__pocket .month-fig{margin:4px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stack__pocket .hero-num{font:420 44px/48px var(--sans);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.stack__pocket .hero-num .cur{font-size:.58em;letter-spacing:-.01em;color:var(--ink-3);font-weight:420;margin-left:.1em}
.stack__pocket .pill{margin-left:auto}
.pk-split{margin-top:auto}
.pk-sub{margin-top:8px}
.stack__foot{display:flex;align-items:center;gap:8px;font:400 13px/18px var(--sans);color:var(--ink-2);cursor:default}
.stack__foot .dot{margin-right:0}

/* ---------- 5.7 split track ---------- */
.split{position:relative;display:flex;gap:4px;height:var(--h,10px)}
.split[hidden]{display:none}
.split__seg{flex:var(--share) 1 0;min-width:var(--h,10px);border-radius:var(--r-cap);background:var(--data-1);box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
.split__seg--rest{background:var(--well);box-shadow:var(--inset)}
.split__seg--over{background:var(--over);box-shadow:inset 0 -1px 0 rgba(255,255,255,.4),0 0 10px var(--over-glow)}
.pk-split{--h:14px;margin-bottom:10px}
/* Spent track = in limits + over + unbudgeted; remaining capacity is legend-only. */
.pk-split .pk-fs{flex:var(--fs) 1 0;background:var(--ink-4)}
.pk-split .split__seg[hidden]{display:none}
.pk-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pk-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--data-1)}
.pk-dot.pk-b{background:var(--well);box-shadow:inset 0 0 0 1px var(--ink-4)}
.pk-dot.pk-c{background:var(--over)}
.pk-dot.pk-fs{background:var(--ink-4)}
.pk-sub{display:flex;flex-wrap:wrap;gap:4px 10px}
.pk-sub > span:last-child{white-space:nowrap}
.day-shown{display:block;font-size:11px;font-weight:400;color:var(--ink-3)}
.pk-split .pk-a{flex:var(--a) 1 0} .pk-split .pk-c{flex:var(--c) 1 0}
.pk-split.no-over .pk-c{display:none}

/* ---------- Overview: month chart panel ---------- */
.card.month{padding:24px 24px 20px;display:flex;flex-direction:column}
.month-top{align-items:center}
.month-top::before{content:"Траты за период";font:500 16px/22px var(--sans);color:var(--ink);letter-spacing:-.005em;margin-right:auto;order:-1;display:none}
.month-lbl{font:500 16px/22px var(--sans);color:var(--ink)}
.month-sub{font:400 13px/18px var(--sans);color:var(--ink-2);margin-top:4px}
.chart .lbl{font:460 11px/14px var(--sans);letter-spacing:.02em;color:var(--ink-3)}
.chart .endlbl{font:400 13px/18px var(--sans);color:var(--ink-2)}
.chart .tag{border-radius:var(--r-ctl);background:var(--ctl);color:var(--ink);box-shadow:var(--e1b);font:500 13px/1 var(--sans);padding:6px 8px}
.chart .xing{font:500 12px/1 var(--sans);color:var(--ink-2);background:var(--ctl);box-shadow:var(--e1);border-radius:var(--r-ctl);padding:5px 8px 5px 18px}
.chart .xing::before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:var(--r-dot);background:var(--over)}
.chart-hint{display:block;font:400 12px/16px var(--sans);color:var(--ink-3);margin-top:8px}
.drilled .chart-hint{display:none}
.legend-row{gap:8px}
.lg{height:28px;padding:0 10px;border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);font:500 12px/1 var(--sans);color:var(--ink-2)}
.lg[aria-pressed="false"]{background:transparent;box-shadow:none;color:var(--ink-3)}
.lg i{border-radius:var(--r-dot);width:8px;height:8px}
.tip-box{border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1b);font:400 12px/16px var(--sans);color:var(--ink-2)}
.tip-box .d{font:500 13px/18px var(--sans);color:var(--ink)}
.tip-box b,.tip-box .v{color:var(--ink)}

/* ---------- 5.16 KPI strip ---------- */
.ov-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-card);background:var(--well);box-shadow:var(--inset)}
.ov-tiles .tile{background:transparent;border:0;box-shadow:none;border-radius:var(--r-sub);padding:16px 18px;gap:6px;align-content:start;transition:background var(--t-fast),box-shadow var(--t-fast)}
.ov-tiles button.tile{appearance:none;font:inherit;color:inherit;text-align:left;width:100%;margin:0;border:0;cursor:pointer} /* r22 C2 */
.ov-tiles .tile:hover,.ov-tiles .tile:focus-visible{background:var(--ctl);box-shadow:var(--e1)}
.tile-lbl{font:500 12px/16px var(--sans);color:var(--ink-2)}
.tile-val{font:420 22px/28px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ov-tiles .chip-s{display:flex;align-items:center;color:var(--ink-2)}
@media (min-width:761px){ .review-strip{display:none} }

@media (prefers-reduced-motion: reduce){ }
.ov-r4{display:grid;grid-template-columns:56px minmax(0,1fr) 360px;gap:20px;align-items:center;padding:20px 24px;border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--e0)}

.strip{background:none;padding:0;border-radius:var(--r-none)}
.ov-news{background:var(--panel-2);border-radius:var(--r-sub);padding:14px 16px}
.ov-news a{display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.ov-news .k{font:500 13px/18px var(--sans);color:var(--ink)}
.ov-news .muted{font:400 13px/18px var(--sans);color:var(--ink-2)}
.ov-news .t{grid-column:1/-1;font:400 14px/20px var(--sans);color:var(--ink);white-space:normal}

/* ---------- Overview rows 3/5 ---------- */
.ov-r3,.ov-r5{gap:var(--gap)}
.ov-r3{grid-template-columns:7fr 5fr;align-items:start}
.ov-r5{grid-template-columns:8fr 4fr}

/* categories vs limits rows (tracks) */
.track{background:var(--well) !important;box-shadow:var(--inset);border-radius:var(--r-cap);border:0}
.track i{border-radius:var(--r-cap)}

/* ---------- Operations ---------- */
.tx-top{gap:8px}
.chips{gap:8px}
.sum-line{font:400 13px/18px var(--sans);color:var(--ink-2)}
.sum-line b{font:420 26px/32px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.txt td{border-top:0;padding:6px 12px;font:400 14px/20px var(--sans)}
.txt tr.day td{padding:0;background:none}
.txt tr.day td{height:28px;background:var(--band);font:500 12px/1 var(--sans);color:var(--ink-2);padding:0 12px}
.txt tr.day td:first-child{border-radius:var(--r-band) 0 0 var(--r-band)}
.txt tr.day td:last-child{border-radius:0 var(--r-band) var(--r-band) 0;color:var(--ink);font-weight:460}
.txt tr.spacer td,.txt tr.day + tr td{border-top:0}
.txt{border-collapse:separate;border-spacing:0 2px}
.txt tr.r td:first-child{border-radius:var(--r-row) 0 0 var(--r-row)}
.txt tr.r td:last-child{border-radius:0 var(--r-row) var(--r-row) 0}
.txt tr.r:hover{background:rgba(255,255,255,.6)}
html.dark .txt tr.r:hover{background:var(--ctl)}
.txt tr.r.open{background:var(--ctl);box-shadow:var(--e2)}
.txt tr.r.sel{background:var(--ctl);box-shadow:none}
.txt tr.r.sel td:first-child{box-shadow:inset 2px 0 var(--ink-3)}
.txt tr.r:focus-visible{outline:2px solid var(--focus)}
.txt td.c3{font:460 14px/20px var(--sans);color:var(--ink)}
.selbar{position:fixed;left:50%;bottom:24px;top:auto;z-index:60;height:52px;padding:6px 6px 6px 8px;display:flex;align-items:center;gap:8px;border:0;
  border-radius:var(--r-cap);transform:translate(-50%,0);transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease-out);width:auto;max-width:calc(100% - 24px)}
.selbar[hidden]{display:none}
.selbar .btn-ghost{height:40px;border-radius:var(--r-cap)}
.selbar .iconbtn{width:40px;height:40px;background:none;box-shadow:none}
.sel-n{font:500 13px/1 var(--sans);color:var(--ink)}
.selall{border:0;background:none;color:var(--ink-2);font:500 13px/1 var(--sans)}
body.selmode .page-inner{padding-bottom:calc(52px + 24px + 16px)}
html:has(body.selmode){scroll-padding-bottom:calc(52px + 24px + 16px)}

/* ---------- drawer (op details, #opPanel.panel) 5.24 ---------- */
.scrim{background:var(--scrim)}
aside.panel{width:440px;background:var(--canvas);border:0;border-radius:var(--r-card) 0 0 var(--r-card);box-shadow:var(--e-float)}
.panel-h{background:var(--canvas)}
.p-hero{padding:8px 24px 16px}
.p-amt{font:420 26px/32px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.p-sec{margin:0 16px 12px;padding:14px 16px;border-radius:var(--r-sub);background:var(--panel);border:0}
.p-sec h3{font:500 12px/16px var(--sans);color:var(--ink-2);letter-spacing:.01em;text-transform:none;margin:0 0 8px}
.row2{border:0}

/* ---------- modals 5.25 ---------- */
.zm-back{z-index:105;background:rgba(233,234,238,.72)}
html.dark .zm-back{background:rgba(0,0,0,.55)}
.zm{background:var(--canvas);border:0;border-radius:var(--r-modal);box-shadow:var(--e-float)}
.zm-head{padding:20px 24px 12px}
.zm-head h2{font:400 20px/28px var(--sans);color:var(--ink)}
.zm-nav button{border-radius:var(--r-ctl);font:400 14px/1 var(--sans);color:var(--ink-2)}
.zm-nav button[aria-current="true"]{background:var(--panel);color:var(--ink);font-weight:500}
.zm-sec{margin:0 16px 12px;padding:16px;border-radius:var(--r-sub);background:var(--panel)}
.zm-sec h3{font:500 12px/16px var(--sans);color:var(--ink-2)}
.zm-foot{padding:12px 24px 20px}
.field label{font:500 12px/16px var(--sans);color:var(--ink-2)}
.zm input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.zm select,.zm textarea,.field input,.field select,#fltSheet .fac-fields input:not([type="checkbox"]){height:44px;border:0;border-radius:var(--r-card);background:var(--ctl);box-shadow:var(--e1b),inset 0 0 0 1px color-mix(in srgb,var(--ink-4) 55%,transparent);padding:0 14px;font:400 14px/1 var(--sans);color:var(--ink)}
.zm textarea{height:auto;padding:12px 14px}

/* ---------- toast 5.26 ---------- */
.toast-box{background:var(--ctl);color:var(--ink);border:0;border-radius:var(--r-card);box-shadow:var(--e2);font:400 14px/20px var(--sans)}
.toast-box button{color:var(--data-text);font-weight:500}

/* ---------- popover (period) 5.19 ---------- */
.per-pop,.popover{background:var(--ctl);border:0;border-radius:var(--r-card);box-shadow:var(--e2),0 16px 32px -12px rgba(20,24,40,.18)}

/* ---------- limit slider (.sl*) : spec 5.12 recipe on the live control ---------- */
.sl{margin-top:0} /* The live value uses the heading space while the figures step aside. */
.sl-track{background:var(--sl-track);box-shadow:inset 0 1px 3px rgba(20,24,40,.18),inset 0 -1px 0 rgba(255,255,255,.6);border-radius:var(--r-cap)}
html.dark .sl-track{box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.sl-spent{background:var(--sl-spent);box-shadow:none}
.sl-left{background:var(--data-2);box-shadow:none}
.sl-over{background:var(--over);box-shadow:none}
.sl-tick{width:2px;background:var(--ink-4);box-shadow:none;border-radius:var(--r-tick);opacity:.8}
.sl-tick.on{background:var(--ink-3);box-shadow:none;opacity:1}
.sl-tick span,.sl-tick.on span{font:460 11px/14px var(--sans);color:var(--ink-3);letter-spacing:0}
.sl-th{border-radius:var(--r-cap)}
.sl-th .sl-body{--glass-bf:none;border-radius:var(--r-cap);
  background:linear-gradient(170deg,rgba(255,255,255,.18),rgba(255,255,255,0) 38% 66%,rgba(255,255,255,.12))}
.sl-th .sl-body,.sl.is-drag .sl-body{box-shadow:0 0 0 .5px var(--sl-hair),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1.5px 0 rgba(255,255,255,.95),inset 1px 0 2px rgba(20,24,40,.12)}
.sl .sl-lens,.sl.is-drag .sl-lens{background:rgba(255,255,255,.04);box-shadow:0 1px 2px rgba(20,24,40,.12),4px 7px 8px -4px var(--sl-shadow),8px 14px 20px -8px var(--sl-shadow)}
.sl .sl-lens-in{--mx:1.10;--my:1.16}
.sl.is-drag .sl-lens-in{--mx:1.14;--my:1.20}
.sl-lens-in .sl-seg{border-radius:var(--r-cap);box-shadow:none}
.sl .sl-rim{inset:2px;opacity:1;box-shadow:inset 3px 2px 3px -2px color-mix(in srgb,var(--rim-a,var(--sl-spent)) 85%,transparent),inset -2px 0 3px -2px color-mix(in srgb,var(--rim-b,var(--sl-left)) 65%,transparent),inset 0 -2px 1px -1px rgba(255,255,255,.95)}
html.dark .sl-th .sl-body{
  background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38% 66%,rgba(255,255,255,.06));
  box-shadow:0 0 0 .5px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1.5px 0 rgba(255,255,255,.90),inset 1px 0 2px rgba(0,0,0,.15)}
html.dark .sl-th .sl-lens,html.dark .sl.is-drag .sl-lens{background:rgba(255,255,255,.03)}
html.dark .sl-th::after{box-shadow:0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.75)}
.sl-halo{border-radius:var(--r-cap)}
.sl-tip{top:-26px;bottom:auto;z-index:6;background:var(--ctl);color:var(--ink);box-shadow:var(--e1b);border-radius:var(--r-ctl);font:500 13px/1.3 var(--sans)}
.sl-tip::after,html.dark .sl-tip::after{border-top-color:var(--ctl)}
html.dark .sl-tip{background:var(--ctl);color:var(--ink)}
.lim-btn,.brow2 .b-fig .lim-btn{height:30px;border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);font:460 14px/1 var(--sans);color:var(--ink)}
.lim-btn:hover,.lim-btn:focus-visible,.brow2 .b-fig .lim-btn:hover,.brow2 .b-fig .lim-btn:focus-visible{background:var(--ctl-hover);box-shadow:var(--e1)}
.brow2 .b-fig .lim-btn svg{display:block;width:13px;height:13px;color:var(--ink-3);opacity:.65}
.brow2 .b-fig .lim-btn:hover svg,.brow2 .b-fig .lim-btn:focus-visible svg{opacity:1}

/* ---------- Budgets ---------- */
.b-split{gap:var(--gap)}
.b-side{position:sticky;top:84px;align-self:start}
.bc-row{padding:8px 0}
.bc-row + .bc-row{border-top:0}
.b-sum{border:0}
.brow2{border-top:0;border-radius:var(--r-row)}
.brow2:not(.free){padding-block:6px}
.brow2 .nm{font:400 14px/20px var(--sans);color:var(--ink)}
.b-fig b{font:460 14px/20px var(--sans)}
.b-fig .dk{display:inline;color:var(--ink-3)}
.b-main:has(.sl.is-drag) .b-fig{opacity:0}
.b-st{flex-wrap:nowrap;align-items:baseline;gap:8px;min-width:0;line-height:20px}
.b-st .st-ov,.b-st .st-ok{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.b-st > :is(.muted,.warn-t,.category-forecast){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-st .category-forecast{display:inline;order:0;margin:0;color:var(--ink-3)}
.b-st .chip[data-cover]{order:1;align-self:center;margin-left:auto;height:28px;min-height:28px;padding:0 8px;font-size:12px;white-space:nowrap}
.b-st .neg,.b-st .warn-t{color:var(--neg-text)}
.b-free-g{border-top:0}
.b-free-g summary{border-radius:var(--r-band);background:var(--band);color:var(--ink-2);font:500 12px/1 var(--sans)}

/* ---------- drill-down panel (dr*) : restyle only ---------- */
.drill{background:var(--canvas);border:0;border-radius:var(--r-panel);box-shadow:var(--e-float)}
.drill:not(.sheet)::before{background:var(--canvas);border:0;box-shadow:-1px -1px 0 rgba(20,22,30,.06)}
.drill.inner{background:var(--canvas);box-shadow:var(--e2);border-radius:var(--r-card)}
.dr-h h2,.dr-hl h2{font:400 20px/28px var(--sans);color:var(--ink)}
.dr-num{font:420 32px/38px var(--sans);letter-spacing:-.02em;color:var(--ink)}
.dr-chip,.dr-go{height:32px;border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1);font:500 12px/1 var(--sans);color:var(--ink)}
.dr-tops,.dr-lists .dr-col{border:0}
.dr-tc,.dr-col{background:var(--panel);border-radius:var(--r-sub);border:0}
.dr-q{border:0;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1)}
.drill.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0;--glass-fill:linear-gradient(180deg,rgba(250,250,252,.90),rgba(246,247,250,.86))}
html.dark .drill.sheet{--glass-fill:linear-gradient(180deg,rgba(42,40,46,.90),rgba(31,29,34,.88))}
.drill.sheet .dr-grab i{width:36px;height:5px;border-radius:var(--r-cap);background:var(--ink-4)}

/* ---------- focus 5.27 ---------- */
/* r22 C1-C4 use an outline so focus preserves their material and selected shadows. */
:focus-visible:not(:where(#ovAcc button,.ov-tiles .tile,.stack__card,.pending-legend .pl-btn,#ovPkSplit button.split__seg,button.pk-key)){outline:none !important;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--focus) !important}
/* SVG marks need a painted stroke: the HTML box-shadow ring is not rendered on them. */
svg [tabindex]:focus-visible{box-shadow:none !important}
svg :is(rect,circle,path)[tabindex]:focus-visible,
#anFees .wkb:focus-visible rect.wb,
.mr-t .dot:focus-visible{stroke:var(--focus);stroke-width:2px;vector-effect:non-scaling-stroke}
#anOut .pt:focus-visible .dot-m{stroke:var(--focus);stroke-width:2.5px;paint-order:stroke;opacity:1;vector-effect:non-scaling-stroke}
.sl .sl-th:focus-visible,.sl .sl-th:focus{box-shadow:none !important;outline:none}
.sl-th.kf .sl-lens{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--focus) !important}
.seg button:focus-visible,nav.nav-pill-container .nav-pill-btn:focus-visible{box-shadow:0 0 0 2px var(--focus) !important}

/* ==========================================================================
   7. Phone 390
   ========================================================================== */
@media (max-width:760px){
  html,body{background:var(--canvas)}
  main.app-viewport{padding:4px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .page-inner{gap:12px}
  body header.app-topbar{height:auto;background:var(--canvas);padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;display:flex}
  .card,.ov-r4{background:var(--panel)}
  .ov-tiles{background:var(--panel)}
  .ov-tiles .tile:hover{background:var(--canvas)}
  :root{--pad-card:16px;--pad:16px}
  .ch{padding:16px 16px 8px} .cb{padding:4px 16px 16px}
  .page-head h1{font:420 24px/30px var(--sans)}
  /* bottom glass tab bar */
  body header.app-topbar nav.nav-pill-container{position:fixed;z-index:50;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));top:auto;height:64px;padding:8px;--glass-bf:initial;
    --glass-fill:linear-gradient(180deg,rgba(255,255,255,.78),rgba(246,247,250,.82) 48%,rgba(255,255,255,.84));--glass-blur:blur(24px) saturate(1.8);
    background:var(--glass-fill);box-shadow:var(--glass-edge),var(--glass-lift);
    border-radius:var(--r-cap);overflow-x:auto;display:flex;align-items:center;scroll-padding:0 24px}
  html.dark body header.app-topbar nav.nav-pill-container{--glass-fill:linear-gradient(180deg,rgba(40,36,50,.86),rgba(30,27,38,.84) 48%,rgba(44,40,54,.88))}
  nav.nav-pill-container .nav-pill-btn{height:48px;padding:0 14px;font:500 12px/1 var(--sans);flex:none}
  .nav-thumb{top:8px;height:48px;background:var(--ctl);box-shadow:var(--e1)}
  .ov-r1,.ov-r3,.ov-r5{grid-template-columns:1fr}
  .stack-panel{padding:16px}
  .stack{height:270px}
  .stack__card{height:140px}
  .stack__card--uta{top:24px} .stack__card--bybit{top:48px}
  .stack__pocket-wrap{height:180px}
  .stack__pocket{padding:54px 16px 16px}
  .stack__pocket .hero-num{font-size:40px;line-height:44px}
  .ov-tiles{grid-template-columns:1fr 1fr}
  .ov-r4{grid-template-columns:44px minmax(0,1fr);padding:16px}
  .ov-news{grid-column:1/-1}
  .op{margin:0 4px;padding:6px 12px}
  .dayh{margin:12px 16px 4px}
  .selbar{bottom:calc(88px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px)}
  aside.panel{width:100%;border-radius:var(--r-sheet) var(--r-sheet) 0 0}
  .zm{border-radius:var(--r-sheet) var(--r-sheet) 0 0}
  #zToast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .review-strip{display:flex;height:48px;border-radius:var(--r-row);background:var(--ctl);box-shadow:var(--e1);padding:0 8px 0 12px}
}

/* ==================== pass 2 ==================== */
header.app-topbar{gap:16px}
nav.nav-pill-container .nav-pill-btn{padding:0 12px}
.topbar-controls{gap:6px}
/* hero + KPI figures: proportional digits read narrower (cean-08) */
.stack__pocket .hero-num,.tile-val,.dr-num,.sum-line b,.b-sum .v{font-variant-numeric:proportional-nums lining-nums}
/* hold status dot (beats legacy .op-m b .tag-p) */
body .op-m b .tag-p:not(.tag-x):not(.tag-r),body .tag-p:not(.tag-x):not(.tag-r){display:inline-block;width:6px;height:6px;padding:0;margin:0 0 2px 8px;border-radius:var(--r-dot);
  background:var(--hold-dot);color:transparent;font-size:0;overflow:hidden;vertical-align:middle}
/* category rows vs limits: split track */
.bul{padding:8px 10px;margin:0 -10px;border-radius:var(--r-row);column-gap:12px;grid-template-columns:32px minmax(0,1fr) auto}
.bul:hover,.bul.on{background:rgba(255,255,255,.6)}
html.dark .bul:hover,html.dark .bul.on{background:var(--ctl)}
.bul .nm{font:400 14px/20px var(--sans);color:var(--ink)}
.bul .v{font:460 14px/20px var(--sans);color:var(--ink)}
.bul .v.neg{color:var(--ink)}
.bul .v small{font:400 13px/18px var(--sans);color:var(--ink-2)}
.bt{height:10px;border-radius:var(--r-cap);background:var(--well);box-shadow:var(--inset)}
.bul:hover .bt,.bul.on .bt{background:var(--well)}
.bt i{border-radius:var(--r-cap)}
.bt .f{background:var(--data-1);box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
.bt .o{background:var(--over);border-radius:var(--r-cap);box-shadow:-4px 0 0 var(--panel),0 0 10px var(--over-glow)}
.bt .lim,.bul-foot .lim{background:var(--ink);box-shadow:0 0 0 1.5px var(--panel)}
.bt .pv,.bul-foot .pv{background:var(--ink-3)}
.bt b,.bul-foot b{border-radius:var(--r-tick)}
.bul-foot{font:400 13px/18px var(--sans);color:var(--ink-2)}
/* delta bars (diverging) */
.dv{padding:8px 10px;margin:0 -10px;border-radius:var(--r-row)}
.dv:hover{background:rgba(255,255,255,.6)}
.dv .nm{font:400 14px/20px var(--sans);color:var(--ink)}
.dv .v{font:460 14px/20px var(--sans);color:var(--ink)}
.dt{height:12px}
.dt::before{background:rgba(20,22,30,.14)}
.dt .up{background:var(--data-3);border-radius:0 var(--r-cell) var(--r-cell) 0}
.dt .dn{background:var(--data-2);border-radius:var(--r-cell) 0 0 var(--r-cell)}
html.dark .dt .dn{background:var(--data-ghost)}
.dv-axis{font:460 11px/14px var(--sans);color:var(--ink-3)}
/* heat grid */
.whc{border-radius:var(--r-cell)}
.whc[data-go]:hover{box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--data-hi-top);position:relative;z-index:1}
.wh .wx{font:460 11px/14px var(--sans);color:var(--ink-3);letter-spacing:.02em}
.heat-key{font:400 13px/18px var(--sans);color:var(--ink-2)}
.heat-key > i{border-radius:var(--r-cell)}
.heat-key .typ{background:var(--ink)}
.heat-key .spk{border:0;box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--data-hi-top)}
/* operations table: fixed readable width, no 1000px gap */
#page-transactions .card{padding:8px 12px 12px}
.txt td.c2{width:220px}
.txt td.c2,.txt td.c2 *{font:400 13px/18px var(--sans);color:var(--ink-2)}
.txt td.c2 svg{width:14px;height:14px;color:var(--ink-3) !important;stroke-width:1.5}
.txt td.c3 .muted{font:400 12px/16px var(--sans);color:var(--ink-3)}
.txt td.c3 .dh-n{font:400 12px/16px var(--sans);color:var(--ink-2)}
.txt tr.r td.c3 .pos{font:inherit;color:var(--pos-text)}
.cnt:empty{display:none}
.txt tr.day td:first-child{padding-left:16px}
.txt tr.day td:last-child{padding-right:16px}

/* ==================== pass 3: analytics, cash flow, receipts, phone ==================== */
/* merchants */
.mr{border-top:0;padding:4px 0}
.mr-n{font:400 14px/20px var(--sans);color:var(--ink)}
.mr-h{font:460 11px/14px var(--sans);color:var(--ink-3)}
.mr-b{background:var(--well) !important;box-shadow:var(--inset);border-radius:var(--r-cap)}
.mr-b i{background:var(--data-1);border-radius:var(--r-cap)}
.mr:hover .mr-b i,.mr.on .mr-b i{background:linear-gradient(90deg,var(--data-hi-bot),var(--data-hi-top))}
.track i{background:var(--data-1);border-radius:var(--r-cap)}
.mr-t::before{background:rgba(20,22,30,.08)}
.mr-t .dot{background:var(--data-3);box-shadow:0 0 0 1.5px var(--panel)}
.mr-t .dot.hold{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--data-3)}
.mr-t .dot:hover{background:var(--data-hi-top)}
.mr-t .dot.ref{background:var(--data-in-hi)}
/* calendar */
.cc{border-radius:var(--r-ctl);font:460 12px/1 var(--sans)}
.cc.spike{box-shadow:inset 0 0 0 1.5px var(--data-hi-top)}
.cc.rng,.cc[data-cday]:hover{box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--data-hi-top);position:relative;z-index:1}
/* Local selection stops keep white date text above 4.5:1 in either theme. */
.cd.edge{--data-hi-top:#7850c5;--data-hi-bot:#6240af;background:linear-gradient(180deg,var(--data-hi-top),var(--data-hi-bot));color:#fff;border-radius:var(--r-ctl);box-shadow:0 0 12px var(--data-glow)}
.cd.in{background:var(--data-2)}
.cd.in.edge{background:linear-gradient(180deg,var(--data-hi-top),var(--data-hi-bot));color:#fff}
.cd[disabled]{color:var(--ink-4)}
.whr b{background:var(--ink);border-radius:var(--r-tick)}
/* scatter + legends */
.keys .key i.ln{background:var(--data-line)}
.keys .key,.legend-row.keys{font:400 13px/18px var(--sans);color:var(--ink-2)}
.brush.sel{background:rgba(124,92,224,.08);border-color:var(--data-hi-top)}
.chart .drx{background:var(--ctl);color:var(--ink);box-shadow:var(--e1b);border-radius:var(--r-ctl);font-weight:500}
rect.wb.dr-sel,.pt.dr-sel circle:last-child{stroke:var(--data-hi-top)}
.dr-limbar .sel,.dr-limk .sel,.dr-wkb[aria-pressed="true"] .b i{background:var(--data-hi-top)}
/* cash flow chart: SVG attrs read vars, so repaint by attribute */
.chart rect[fill="var(--text-main)"]{fill:var(--data-1)}
.chart rect[fill="var(--ok)"]{fill:var(--data-in)}
.cfm.on rect[fill="var(--text-main)"]{fill:var(--data-hi-top);filter:drop-shadow(0 0 10px var(--data-glow))}
.cfm.on rect[fill="var(--ok)"]{fill:var(--data-in-hi);filter:drop-shadow(0 0 8px rgba(52,163,107,.35))}
.cfm .cfbg,.cfm.on .cfbg{fill:transparent;stroke:none}
.cfm[data-cfm]:hover .cfbg{fill:rgba(255,255,255,.5)}
.chart rect[fill="url(#cfHatch)"]{fill:var(--well);stroke:none}
.chart .cfx{font:460 12px/1 var(--sans);color:var(--ink-3)} .chart .cfx.on{color:var(--ink);font-weight:500}
.chart .cfv{font:460 11px/1 var(--sans);color:var(--ink-2)}
.cf-nums{margin:8px var(--pad) 20px;padding:4px;gap:4px;border-radius:var(--r-card);background:var(--well);box-shadow:var(--inset);border-top:0}
.cf-nums > div{padding:14px 16px;border-radius:var(--r-sub)}
.cf-nums .cf-sel{padding:10px 12px 2px;font:500 13px/18px var(--sans);color:var(--ink-2)}
.cf-nums .l{font:500 12px/16px var(--sans);color:var(--ink-2)}
.cf-nums .v{font:420 22px/28px var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:proportional-nums}
.cf-nums .v.pos{color:var(--pos-text)} .cf-nums .v.neg{color:var(--neg-text)}
.bars .b.in{background:var(--data-in)} .bars .b.out{background:var(--data-1)} .bars .b.cur{background-image:none}
.rank-row{padding:8px var(--pad)}
.rank-row .catic{background:var(--ctl) !important;color:var(--ink-2) !important}
#cfIn .rank-row .track i{background:var(--data-in)}
#cfOut .rank-row .track i{background:var(--data-1)}
.card > [id^="cf"] > div,.card .cfrow{border-top:0}
#cfList > *{border-top:0}
@media (min-width:761px) and (max-width:1099px){
  .cf-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* receipts: the receipt itself is a white object on the panel */
.rcrow{border-top:0;border-radius:var(--r-row);margin:0 12px;padding:8px 12px}
@media (hover:hover){.rcrow:not(.open):hover{background:var(--ctl-hover)}}
.rcrow.open{background:var(--ctl);box-shadow:var(--e2)}
#rcPaper{background:var(--ctl);box-shadow:var(--e1),0 18px 40px -18px rgba(20,24,40,.25);border-radius:var(--r-card)}
.paper .ln{border-bottom:1px dotted rgba(20,22,30,.16)}
.paper .ln:last-child{font-weight:500}
/* Keep the active receipt count quiet; Onest's specified maximum weight is 500. */
#page-receipts #rcChips .cnt.act{background:none;color:var(--ink-2);font-weight:500;display:inline-flex;align-items:center;gap:5px;box-shadow:none}
#page-receipts #rcChips .cnt.act::before{content:"";width:6px;height:6px;flex:none;background:var(--hold-dot);border-radius:var(--r-dot)}
/* rules */
.rl-hint{font:400 13px/18px var(--sans);color:var(--ink-2)}
.rl-sug > *,#rlSug > div > div{border:0}
#rlSug .card,#rlList .card{box-shadow:var(--e0)}
/* ovDelta comparison line: keep it, as a label under the title */
#page-overview .ov-delta .ch h2 .tail{display:block;font:400 13px/18px var(--sans);color:var(--ink-2);margin-top:2px}

@media (max-width:760px){
  .ov-page{display:flex;flex-direction:column}
  .ov-r1{display:contents}
  .stack-panel{order:0} .ov-tiles{order:1} .ov-r4{order:2} .card.month{order:3} .ov-r3{order:4} .ov-r5{order:5}
  .ov-page > .review-strip{display:none}
  .stack__bal{display:none}
  .ov-r4{margin:0}
  .zt-wordmark{height:20px}
  .pro-link b,.sync-time{display:none}
  .pro-link{padding:0 10px}
  .topbar-controls{gap:6px;margin-left:auto}
  body header.app-topbar{position:sticky;top:0;z-index:45}
  .cf-nums{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:8px 0 16px}
  .cf-nums > div:last-child{grid-column:1/-1}
  .mr{grid-template-columns:minmax(0,1fr) 110px}
}
@media (max-width:760px){
  .ov-page > .ov-r1,.ov-page > .ov-r3,.ov-page > .ov-r5{display:contents}
  .ov-page > .ov-r4{display:grid}
  .ov-page .acc{order:0} /* r22 C1: accounts precede the existing phone order. */
  .ov-page .stack-panel{order:1} .ov-page .ov-tiles{order:2} .ov-page > .ov-r4{order:3} .ov-page .card.month{order:4}
  .ov-page .ov-cats{order:5} .ov-page .ov-delta{order:6} .ov-page .ov-ops{order:7} .ov-page .ov-week{order:8}
}
.keys .key i{border-radius:var(--r-dot)}
.stack__pocket{position:relative}
.stack__pocket .pill{position:absolute;top:14px;right:14px;margin:0}
@media (max-width:760px){
  .ov-tiles .chip-s{display:block}
  .ov-tiles .chip-s.warn::before{display:inline-flex;margin-bottom:4px}
}
.chart .neg,.chart .cfnet.neg,.cf-nums .neg,.v.neg{color:var(--neg-text)}
.chart .pos,.chart .cfnet.pos{color:var(--pos-text)}
.sl-th::before{inset:-12px -6px}
/* desktop overview order: lead zone, KPI strip, advice, then work zone (spec 6.1) */
@media (min-width:761px){
  .ov-page > .ov-r1{order:0} .ov-page > .ov-tiles{order:2} .ov-page > .ov-r4{order:3} .ov-page > .ov-r3{order:4} .ov-page > .ov-r5{order:5}
}
@media (max-width:760px){ .stack__pocket .pill{top:auto;bottom:14px;right:14px;height:22px;padding:0 8px;font-size:11.5px} }
@media (max-width:760px){ .stack__pocket .pill{top:50px;bottom:auto} }

/* ===================== r9 judge round 2: judged gaps ===================== */
/* Cyrillic from the Google Fonts cyrillic cut: the subset's variation data widens 'т' at 420-500 ('Ит ог', 'Сент ябрь').
   Declared after the subset so it wins for these code points; same weight clamp. */
@font-face{font-family:"Onest";src:url(../fonts/Onest-cyrillic.woff2) format("woff2");font-weight:100 500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
.chart .lbl,.wh .wx,.t-over,.p-sec h3,.cf-nums .l,.tile-lbl,.sl-tick span{letter-spacing:0}

/* 2 stack cutout: a wide notch with rounded shoulders cut into the pocket's top edge (monir-10), not a disc */
.stack__pocket{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='60'%3E%3Cpath fill-rule='evenodd' d='M0 0H184V60H0Z M0 0C14 0 22 5 27 17C35 37 58 50 92 50C126 50 149 37 157 17C162 5 170 0 184 0Z'/%3E%3C/svg%3E") top center/184px 60px no-repeat,
    linear-gradient(90deg,#000 calc(50% - 92px),#0000 0 calc(50% + 92px),#000 0) top/100% 60px no-repeat,
    linear-gradient(#000,#000) bottom/100% calc(100% - 59px) no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='60'%3E%3Cpath fill-rule='evenodd' d='M0 0H184V60H0Z M0 0C14 0 22 5 27 17C35 37 58 50 92 50C126 50 149 37 157 17C162 5 170 0 184 0Z'/%3E%3C/svg%3E") top center/184px 60px no-repeat,
    linear-gradient(90deg,#000 calc(50% - 92px),#0000 0 calc(50% + 92px),#000 0) top/100% 60px no-repeat,
    linear-gradient(#000,#000) bottom/100% calc(100% - 59px) no-repeat}
:root:not(.dark):not([data-theme="dark"]){--card-bybit-a:#4a4b52;--card-bybit-b:#2c2d32}
.stack__bal{display:none}
.stack__pocket .pk-f{margin-left:12px;color:var(--ink-3)}
/* 3 hero minor units: cents recede with the currency */
.stack__pocket .hero-num .minor,.hero-num .minor{font-size:.58em;color:var(--ink-3);letter-spacing:-.01em;font-weight:420}
.stack__pocket .hero-num .minor + .cur{margin-left:.18em}

/* 8 no orange: hold dot neutral lavender-grey; KPI 'ждёт' is a dot + text, not an amber pill */
:root{--hold-dot:#b7b0cf}
:root.dark,:root[data-theme="dark"]{--hold-dot:#7a7390}
@media (prefers-color-scheme: dark){ :root:not(.light):not([data-theme="light"]){--hold-dot:#7a7390} }
.chip-s.warn::before{content:"";width:6px;height:6px;padding:0;margin-right:6px;border-radius:var(--r-dot);background:var(--hold-dot);color:transparent}
.ov-tiles .chip-s.warn::before{display:inline-block;margin-bottom:0}

/* 10 overview line chart: series are labelled at line ends; no chip legend */
#ovMonth #chLegend{display:none}
#ovMonth[data-mode="day"] #chLegend{display:flex}
#ovMonth[data-mode="day"] #chLegend [data-series="plan"]{display:none}
.month-sub span + span{margin-left:14px}
.month-sub span:nth-child(n+3){display:none}

/* 12 date bands carry the operation count */
.dayh .dh-n,.txt tr.day .dh-n{font-weight:400;color:var(--ink-2);margin-right:12px}
.sub-t{font-style:normal}
.sub-t{margin-left:10px}

/* 20 page titles: name in ink, period in ink-3 right beside it; no '?' bubble; one-phrase panel titles */
#page-analytics .page-head{justify-content:flex-start;align-items:baseline}
#page-analytics .page-head h1{flex:none}
#anFoc{margin-left:0;align-items:baseline}
#anFoc > .muted{font:420 28px/34px var(--sans);letter-spacing:-.02em;color:var(--ink-3);text-transform:lowercase}
.page-head h1 .help,.page-head #rcHelp{width:16px;min-width:16px;height:16px;font-size:0;background:none;box-shadow:inset 0 0 0 1.5px var(--ink-4);margin-left:6px;vertical-align:4px}
.page-head h1 .help::before,#rcHelp::before{content:"i";font:500 10px/1 var(--sans);color:var(--ink-3)}
#page-receipts .page-head #rcHelp{position:relative;margin-right:auto;margin-left:-4px;padding:0;border:0;flex:none}
#page-receipts .page-head #rcHelp::after{content:"";position:absolute;inset:-14px}
#opTotals .st-p{display:none}
#opTotals{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;flex:1;min-width:0}
#page-transactions .sum-row{margin-top:12px;justify-content:flex-start}
#selAllZ{flex:none;margin-left:24px;min-height:44px}
#selStart{margin-left:auto;min-height:44px}
.cf-sel .muted{display:none}
.dr-meta span + span{margin-left:14px}
@media (max-width:760px){ #anFoc > .muted{font-size:24px;line-height:30px} }

/* 4 split tracks: thick capsules */
.split{--h:14px}
.bt{height:14px}

/* 9 bar charts (cash flow, cashback): no grid, no Y axis, no per-bar numbers; wide lavender bars; one saturated bar */
#cfChart .ylbl,#anFees .ylbl{display:none}
#cfChart svg line[stroke="var(--grid)"],#anFees svg line[stroke="var(--grid)"]{display:none}
#cfChart svg line[stroke="var(--grid-strong)"],#anFees svg line[stroke="var(--grid-strong)"]{stroke:var(--grid)}
#cfChart .cfv{display:none}
#cfChart .cfx.on + .cfv,#cfChart .cfx.on + .cfv + .cfv{display:block;padding:5px 8px;margin-top:-14px;border-radius:var(--r-ctl);background:var(--ctl);box-shadow:var(--e1b);font:500 13px/1 var(--sans);color:var(--ink);white-space:nowrap}
#cfChart{container-type:inline-size;--cf-months:6}
.card:has(#cfTools [data-cfn="12"][aria-pressed="true"]) #cfChart{--cf-months:12}
/* The income caption ends at its bar; the expense caption keeps its mobile edge clearance. */
#cfChart .cfx.on + .cfv{color:var(--ok);margin-top:0;transform:translate(calc(-100% + min(13px,(100cqi - 64px) / var(--cf-months) * .14)),-130%)}
@media (min-width:761px){#cfChart .cfx.on + .cfv + .cfv{transform:translate(-13px,-130%)}}
#cfChart .cfx.on + .cfv + .cfv::after{content:" $"}
#cfChart .cfm rect[fill="var(--ok)"]{fill:var(--well-deep);rx:8px}
#cfChart .cfm rect[fill="var(--text-main)"]{fill:var(--data-1);rx:8px}
#cfChart .cfm.on rect[fill="var(--text-main)"]{fill:var(--data-hi-top);filter:drop-shadow(0 6px 10px var(--data-glow))}
#cfChart .cfm.none rect{opacity:.35}
@media (min-width:761px){
  #cfChart .cfm rect[fill="var(--ok)"],#cfChart .cfm rect[fill="var(--text-main)"]{width:39px}
  #cfChart .cfm rect[fill="var(--ok)"]{transform:translateX(-13px)}
}
#cfKey{display:none}
.card:has(#cfChart){display:flex;flex-direction:column}
.card:has(#cfChart) > .ch{order:-2}
.card:has(#cfChart) > .cf-nums{order:-1;padding-top:0}
.cf-nums .l::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:var(--r-dot);vertical-align:0}
.cf-nums > div:nth-child(2) .l::before{background:var(--data-in)}
.cf-nums > div:nth-child(3) .l::before{background:var(--data-1)}
.cf-nums > div:nth-child(n+4) .l::before{display:none}
#anFees rect.wb[fill="var(--ok)"]{fill:var(--data-1);rx:6px}
#anFees rect.wb[fill="#a9adb8"]{fill:var(--well-deep);rx:6px}
#anFees path[stroke="var(--text-main)"]{stroke:var(--data-hi-top);stroke-width:2px}
#anFeesKey i[style*="--ok"]{background:var(--data-1) !important}
#anFeesKey i[style*="a9adb8"]{background:var(--well-deep) !important}
#anFeesKey .ln{background:var(--data-hi-top) !important}
.ov-r4{grid-template-columns:92px minmax(0,1fr) 360px}
@media (max-width:760px){ .ov-r4{grid-template-columns:64px minmax(0,1fr)} }

/* 14 bulk capsule shows the rows through it; selected row beats td hover */
.selbar.glass{--glass-fill:linear-gradient(180deg,rgba(255,255,255,.55),rgba(246,247,250,.45) 50%,rgba(255,255,255,.58))}
html.dark .selbar.glass{--glass-fill:linear-gradient(180deg,rgba(72,63,88,.52),rgba(48,41,62,.45) 50%,rgba(79,69,96,.55))}
.txt tr.r.sel td,.txt tr.r.sel:hover td,.txt tr.r.sel:hover{background:var(--ctl)}

/* 16 budgets: the side panel follows the list (sticky needs no overflow clip on the row) */
#page-budgets .b-split{align-items:start}

/* 19 scatter: one point shape; pending/declined as opacity */
#anOut svg circle[fill="var(--bg-card)"]:not([stroke="var(--text-main)"]){r:2.25px;stroke-width:4.5px;fill-opacity:0;stroke-opacity:.4}
#anOut svg path[stroke]{opacity:.45}
#anOutKey .key:has(.hollow),#anOutKey .key:has(.cross){display:none}

/* drill-down: panel material, no hairlines, white chip without outline */
.drill{background:var(--panel);box-shadow:var(--e2)}
.drill:not(.sheet)::before{background:var(--panel)}
.dr-flt,.dr-op,.dr-foot{border-top:0 !important}
.dr-foot{margin-top:12px}
.dr-op + .dr-op{margin-top:2px}
.chip.dr-chip,.chip.dr-chip[aria-pressed="true"]{background:var(--ctl);box-shadow:var(--e1)}
.dr-h .dr-go,.drill.narrow .dr-h .dr-go{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;gap:6px}
.drill.narrow .dr-h,.drill.sheet .dr-h{flex-wrap:wrap}
.drill.narrow .dr-hr,.drill.sheet .dr-hr{margin-left:auto}
/* 'Все' filter and other pressed chips: raised white chip, not a black outline */
.chip[aria-pressed="true"]{box-shadow:var(--e1),inset 0 0 0 1.5px var(--data-3)}

/* chart focus only for keyboard */
#paceChart:focus,#paceChart svg:focus,.chart:focus,.chart svg:focus{outline:none}
#paceChart:focus-visible,.chart:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 22 phone: KPIs in one recessed well, short sublines; tab bar fades at the edge instead of clipping */
@media (max-width:760px){
  .ov-tiles{background:var(--well);box-shadow:var(--inset);border-radius:var(--r-panel);padding:6px;gap:6px}
  .ov-tiles .chip-s.warn,.ov-tiles .chip-s.ok{display:none}
  .ov-tiles .chip-s{white-space:nowrap}
  nav.nav-pill-container{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}
}
/* 4 category tracks: over capsule separated by a real gap; ticks quiet and inside the track */
.bt .o{margin-left:4px;box-shadow:0 0 10px var(--over-glow)}
.bt b,.bul-foot b{top:3px;bottom:3px;width:2px}
.bt .lim,.bul-foot .lim{background:var(--ink-3);box-shadow:none}
.bt .pv,.bul-foot .pv{background:var(--ink-4);opacity:.8}
.bt:has(.o) .lim{display:none}
#cfChart .cfm.on rect[fill="var(--ok)"]{filter:none}
/* Header, filters and table share the table's reading width and left edge. */
@media (min-width:761px){
  #page-transactions table.txt{width:100%}
  #page-transactions .selbar.glass{left:var(--bulk-center,50%)}
}
@media (min-width:1111px){#page-transactions .page-inner table.txt td.c2{width:268px}} /* Higher specificity than the later 761+ block. */

@media (max-width:760px){ .stack__pocket{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='60'%3E%3Cpath fill-rule='evenodd' d='M0 0H184V60H0Z M0 0C14 0 22 5 27 17C35 37 58 50 92 50C126 50 149 37 157 17C162 5 170 0 184 0Z'/%3E%3C/svg%3E") top center/132px 43px no-repeat,linear-gradient(90deg,#000 calc(50% - 66px),#0000 0 calc(50% + 66px),#000 0) top/100% 43px no-repeat,linear-gradient(#000,#000) bottom/100% calc(100% - 42px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='60'%3E%3Cpath fill-rule='evenodd' d='M0 0H184V60H0Z M0 0C14 0 22 5 27 17C35 37 58 50 92 50C126 50 149 37 157 17C162 5 170 0 184 0Z'/%3E%3C/svg%3E") top center/132px 43px no-repeat,linear-gradient(90deg,#000 calc(50% - 66px),#0000 0 calc(50% + 66px),#000 0) top/100% 43px no-repeat,linear-gradient(#000,#000) bottom/100% calc(100% - 42px) no-repeat} }

/* ================= r9 judge round 3 (r9-k) ================= */
/* 20 page titles: one row, one offset, two tones on every page (Обзор and Движение денег gain the grey period) */
.page-inner > .page-head{min-height:56px;margin:8px 0 8px;align-items:center}
#page-analytics .page-head{align-items:center}
#anFoc{align-items:center}
.ov-page > .ov-head{grid-column:1/-1}
.page-head h1 .h-sub + .help{margin-left:10px}
.ch h2{white-space:nowrap;min-width:0}
.ch{flex-wrap:wrap;row-gap:8px}
/* the main key: .btn-key marks the one graphite button per screen (spec 12.12) */
.btn-key{white-space:nowrap}

/* phone header 52: page title in two tones instead of the wordmark */
.app-title{display:none}
@media (max-width:760px){
  body header.app-topbar{min-height:52px;align-items:center;gap:8px}
  .brand-section{flex:1 1 auto;min-width:0}
  .brand-section .zt-wordmark{display:none}
  .app-title{display:block;font:420 24px/30px var(--sans);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .app-title .h-sub,.app-title span{color:var(--ink-3)}
  .app-title .help{display:none}
  .topbar-controls .pro-link,.topbar-controls #syncBtn,.topbar-controls .sync-time,.topbar-controls .demo-badge,.topbar-controls #themeToggleBtn{display:none}
  .per-btn{height:36px;padding:0 10px;font-size:13px}
  .page-inner > .page-head h1{display:none}
  .page-inner > .page-head:not(:has(.page-actions > *)){display:none}
  .page-inner > .page-head{min-height:0;margin:0}
  #page-analytics #anFoc > .muted{display:none}
}

/* 22 phone tab bar: five slots (icon 20 + label 11/500), the rest in the «Ещё» sheet */
.nav-more{display:none}
@media (max-width:760px){
  body header.app-topbar nav.nav-pill-container{overflow:visible;justify-content:space-between;gap:0;-webkit-mask:none;mask:none}
  nav.nav-pill-container .nav-pill-btn:is([data-page="cashflow"],[data-page="receipts"],[data-page="family"],[data-page="integrations"]){display:none}
  nav.nav-pill-container .nav-pill-btn{flex:1 1 0;min-width:0;height:48px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font:500 11px/13px var(--sans);color:var(--ink-2);position:relative;z-index:1;border-radius:var(--r-cap);list-style:none;cursor:pointer}
  nav.nav-pill-container .nav-pill-btn.active{color:var(--ink)}
  nav.nav-pill-container .nav-pill-btn::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--ico) center/20px 20px no-repeat;mask:var(--ico) center/20px 20px no-repeat}
  nav.nav-pill-container .nav-pill-btn span{white-space:nowrap}
  .nav-pill-btn[data-page="overview"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
  .nav-pill-btn[data-page="transactions"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
  .nav-pill-btn[data-page="analytics"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3C/svg%3E")}
  .nav-pill-btn[data-page="budgets"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E")}
  .nav-more-btn{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E")}
  .nav-more{display:flex;flex:1 1 0;min-width:0;position:static}
  .nav-more > summary{width:100%}
  .nav-more > summary::-webkit-details-marker{display:none}
  nav.nav-pill-container:has(.nav-pill-btn.active:is([data-page="cashflow"],[data-page="receipts"],[data-page="family"],[data-page="integrations"])) .nav-thumb{opacity:0}
  nav.nav-pill-container:has(.nav-pill-btn.active:is([data-page="cashflow"],[data-page="receipts"],[data-page="family"],[data-page="integrations"])) .nav-more-btn,
  .nav-more[open] > .nav-more-btn{background:var(--ctl);box-shadow:var(--e1);color:var(--ink)}
  .more-sheet{position:absolute;left:0;right:0;bottom:calc(100% + 10px);display:grid;padding:8px;background:var(--canvas);border-radius:var(--r-sheet);box-shadow:var(--e3)}
  .more-sheet a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-inner);font:400 16px/22px var(--sans);color:var(--ink);text-decoration:none}
  .more-sheet a:hover,.more-sheet a:focus-visible{background:var(--panel)}
  main.app-viewport{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* 23 phone sheet: nothing floats over it, the page shows through, one lavender gamut */
body.dr-sheet .viz-tip{display:none}
.drill.sheet{z-index:90}
.drill.sheet .dr-tc,.drill.sheet .dr-col{background:rgba(255,255,255,.55)}
html.dark .drill.sheet .dr-tc,html.dark .drill.sheet .dr-col{background:rgba(255,255,255,.05)}
.dr-tb{height:6px;border-radius:var(--r-cap);background:var(--well)}
.dr-tb i{background:var(--data-2) !important;border-radius:var(--r-cap)}
html.dark .dr-tb i{background:#8570d6 !important}
.dr-tr[aria-pressed="true"] .dr-tb i{background:var(--data-hi-top) !important}
html.dark .dr-tr[aria-pressed="true"] .dr-tb i{background:var(--data-hi-top) !important}
/* drawer limit: the budget-row split recipe, coral only for the over part, no legend row */
.dr-lim{background:var(--panel);border-radius:var(--r-sub)}
.dr-limbar{height:12px;gap:4px}
.dr-limbar i{border-radius:var(--r-cap)}
.dr-limbar .rest{background:var(--data-2)}
.dr-limbar .left{background:var(--well-deep)}
.dr-limbar .over{background:var(--over)}
.dr-limk{display:none}
.dr-limt b,.dr-limt .pos,.dr-limt .neg{font-weight:500}
.dr-limt .neg{color:var(--ink-2)}
.drill{scroll-margin-top:84px}

/* 9 bar charts: cashback shows two totals, one saturated week with its value, lower chart */
#anFeesKey{display:flex;gap:40px;padding:0 0 4px}
#anFeesKey .fz{display:flex;flex-direction:column;gap:2px}
#anFeesKey .fz .l{font:400 13px/18px var(--sans);color:var(--ink-2)}
#anFeesKey .fz b{font:420 24px/30px var(--sans);letter-spacing:-.01em;color:var(--ink)}
#anFeesKey .fz b.pos{color:var(--ink)}
#anFees.chart{height:170px}
#anFees .wkb rect.wb[fill="var(--ok)"]{fill:var(--data-2)}
#anFees .wkb.hot rect.wb[fill="var(--ok)"]{fill:var(--data-hi-top);filter:drop-shadow(0 6px 10px var(--data-glow))}
#anFees .fz-tag{margin-top:-10px}
/* cash flow: months without data are a 24px well; month results in ink-2 */
#cfChart .cfm.none rect{opacity:1;fill:var(--well-deep);stroke:none}
#cfChart .cfnet,#cfChart .cfnet.neg,#cfChart .cfnet.pos{color:var(--ink-2)}

/* 10 overview line: lavender area under the line, grey line named at its end */
.chart .prevlbl{transform:translate(-100%,-50%);margin:-14px 0 0 -72px;font:400 12px/16px var(--sans);color:var(--ink-3);white-space:nowrap}

/* 15 / 13.15 transactions row: category sits next to the merchant, no 700px void */
@media (min-width:761px){
  #page-transactions table.txt{width:100%;table-layout:fixed}
  #page-transactions table.txt td.c0{width:48px}
  #page-transactions table.txt td.c1{width:auto}
  #page-transactions table.txt td.c2{width:220px;text-align:left}
  #page-transactions table.txt td.c3{width:170px;text-align:right;padding-right:24px;font-variant-numeric:tabular-nums}
  #page-transactions table.txt td.c4{width:44px}
  #cfList{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
}

/* 16 budgets: keep the side column beside the full-height list */
@media (min-width:1100px){
  #page-budgets .b-split{grid-template-columns:minmax(0,1fr) 360px}
}
@media (min-width:761px){
  #page-budgets .b-side{gap:16px}
  #page-budgets .b-side > .card{padding:20px}
  #page-budgets .b-side > .card > .ch{padding:0;min-height:0;margin:0 0 8px;row-gap:4px}
  #page-budgets .b-side > .card > .cb{padding:0}
  #page-budgets .b-side #bWeek .wh{grid-template-rows:14px repeat(7,24px)}
  #page-budgets .b-side #bWeek .whc{height:24px}
  #page-budgets .b-side #bWeek .heat-key{margin-top:8px}
  #page-budgets .b-side #bCmp > .muted{margin-bottom:4px !important}
  #page-budgets .b-side #bCmp .bc-row{padding:5px 0;row-gap:3px}
  #page-budgets .b-side #bCmp .bc-bars{gap:2px}
  #page-budgets .b-side #bCmp .bc-bars i{height:4px}
  #page-budgets .b-side #bCmp .bc-key{margin-top:6px}
}
/* heat map hours: every other label, no «16-2020-24» */
#bWeek .wh > .wx:nth-child(odd){visibility:hidden}

/* AI tell: panels in a row share their height, no hole under the short one */
.ov-r3,.ov-r5,.an-r1,#page-cashflow .g2{align-items:stretch}

/* AI tell: pending is said in words, not a meaningless grey dot */
body .op-m b .tag-p:not(.tag-x):not(.tag-r),body .tag-p:not(.tag-x):not(.tag-r){width:auto;height:auto;margin:0 0 0 8px;border-radius:var(--r-none);background:none;text-indent:0;overflow:visible;font:400 12px/16px var(--sans);color:var(--ink-3);vertical-align:baseline}

/* AI tell: scatter in one lavender gamut, no category chip legend, no instruction tail */
#anOutKey .key:has(i[style]),#anOutKey .key.muted{display:none}
#anOut svg circle[fill^="#"]{fill:var(--data-1)}
#anOut svg circle[fill^="#"][stroke="var(--text-main)"]{fill:var(--data-hi-top)}
.sl-rim::after{display:none}
#anOut svg circle[stroke^="#"]{stroke:var(--data-1)}

/* ================= r10: owner round (Threads references, one overspend number, phone, AI tells, warm dark) ================= */
/* r10.1 mono only for the card number: badges, counters and card labels are small proportional text */
.demo-badge{height:auto;padding:0;background:none;border-radius:var(--r-none);font:400 12px/16px var(--sans);letter-spacing:0;color:var(--ink-3);text-transform:none}
.pro-link b{height:auto;padding:0;background:none;border-radius:var(--r-none);font:500 12px/16px var(--sans);letter-spacing:0;color:var(--data-text)}
.btn-ghost .cnt,.chip .cnt{min-width:0;height:auto;padding:0;background:none;border-radius:var(--r-none);font:400 13px/1 var(--sans);color:var(--ink-3)}
.t-tag,.stack__card .t-tag{font:500 12px/14px var(--sans);letter-spacing:0;text-transform:none}
.stack__card--bybit .t-tag:last-child{font:500 11px/14px var(--mono);letter-spacing:.08em}

/* r10.2 pending = a small dot with a name for screen readers, not a word on every row */
body .op-m b .tag-p.tag-h:not(.tag-x),body .tag-p.tag-h:not(.tag-x):not(.tag-r){display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;padding:0;border-radius:var(--r-dot);background:var(--hold-dot);font-size:0;line-height:0;vertical-align:middle;overflow:hidden}

/* r10.3 calm status lines: ink text, a small coral dot, red only for the number itself */
.b-st .st-ov,.b-st .st-ok{display:inline;color:var(--ink)}
.b-st .st-ov b,.b-st .st-ok b{font-weight:500}
.b-st .st-ov b.neg{color:var(--neg-text)}
.st-dot{display:none} /* r16 r2-css L15: the section title, red amount and red fill already say «over»; the dot only shifted the text 12px */
.b-st .warn-t{color:var(--ink-2)}
.stack__pocket .month-fig{flex-wrap:nowrap;align-items:center;gap:12px}
.stack__pocket .pill,.stack__pocket .pill.over,.stack__pocket .pill.warn,.stack__pocket .pill.fine,.stack__pocket .pill.info{position:static;flex:0 1 auto;height:auto;margin:0 0 0 auto;padding:0;background:none;box-shadow:none;border-radius:var(--r-none);
  display:block;font:400 13px/18px var(--sans);color:var(--ink-2);white-space:normal;text-align:right;max-width:172px}
.stack__pocket .pill::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;vertical-align:middle;border-radius:var(--r-dot);background:var(--ink-4)}
.stack__pocket .pill.over::before{background:var(--over)}
.stack__pocket .pill.warn::before{background:var(--hold-dot)}
.stack__pocket .pill.fine::before{background:var(--ok-dot)}
.stack__pocket .pill b{font-weight:500;color:var(--ink)}
.stack__pocket .pill b.neg{color:var(--neg-text)}
.stack__pocket .pk-f{margin-left:10px}
.pk-sub{white-space:nowrap;overflow:visible}

/* r10.4 soft markers instead of thin black ticks in progress tracks */
.bt b{top:50%;bottom:auto;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--r-dot)}
.bt .lim{background:var(--canvas);box-shadow:0 0 0 1px rgba(20,24,40,.14);opacity:1}
.bt .pv{background:var(--ink-4);box-shadow:none;opacity:.55}
.bul-foot b{width:6px;height:6px;border-radius:var(--r-dot)}
.bul-foot .lim{background:var(--canvas);box-shadow:0 0 0 1px rgba(20,24,40,.2)}
.bul-foot .pv{background:var(--ink-4);opacity:.7}
.sl-tick,.sl-tick.on{top:50%;bottom:auto;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--r-dot);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,24,40,.10);opacity:1}
.sl-tick.on{background:#fff;box-shadow:0 0 0 1px rgba(20,24,40,.22)}
.sl-tick span,.sl-tick.on span{top:auto;bottom:calc(100% + 4px)}
html.dark .bt .lim,html.dark .bul-foot .lim{background:var(--ink-2);box-shadow:none}
html.dark .sl-tick,html.dark .sl-tick.on{background:rgba(255,255,255,.55);box-shadow:none}

/* r10.5 pace chart: fewer annotations (limit line, current value, forecast end) */
#paceChart .lbl.ylbl{color:var(--ink-3)}

/* r10.6 scatter: one marker language */
#anOut .dot-m{fill:var(--data-3);opacity:.75}
#anOut .dot-m.hot{fill:var(--data-hi-top);opacity:1}
#anOut .dot-m.off{opacity:.25}
.pt.dr-sel .dot-m{stroke:var(--ink);stroke-width:2}
#anOutKey .key.k-m{display:inline-flex}
#anOutKey .dm{width:8px;height:8px;border-radius:var(--r-dot);background:var(--data-3);opacity:.75}
#anOutKey .dm.hot{background:var(--data-hi-top);opacity:1}

/* r10.7 operations toolbar: search, segmented «Все / К разбору / В обработке», one «Фильтры» button */
.tx-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#opChips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#opChips .op-seg button{white-space:nowrap}
.flt-btn{display:inline-flex;align-items:center;gap:6px}
.flt-btn svg{width:16px;height:16px}
.flt-btn.on{background:var(--ink);color:var(--canvas);box-shadow:none}
.g-sheet[hidden]{display:none !important}
.g-sheet{--glass-bf:blur(24px) saturate(170%);box-shadow:var(--glass-edge),var(--e-float)} /* r10: sheets join the one glass group (owner: «Ещё» opens a glass sheet) */
.flt-sheet{position:fixed;z-index:120;width:280px;padding:8px;display:grid;gap:2px;border-radius:var(--r-card)}
.fs-grab{display:none}
.fs-h{padding:8px 12px 4px;font:400 12px/16px var(--sans);color:var(--ink-3)}
.fs-act{margin-top:4px}
.fs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:none;
  font:400 14px/20px var(--sans);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.fs-row:hover,.fs-row:focus-visible{background:rgba(255,255,255,.55)}
html.dark .fs-row:hover,html.dark .fs-row:focus-visible{background:rgba(255,255,255,.06)}
.fs-row[aria-pressed="true"]{background:var(--ctl);box-shadow:var(--e1)}
.fs-n{color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (min-width:761px){ .flt-sheet .fs-act,.flt-sheet .fs-act ~ .fs-row{display:none} }

/* r10.8 phone: glass «Ещё» sheet */
@media (max-width:760px){
  #moreSheet{position:fixed;z-index:120;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));display:grid;padding:8px;border-radius:var(--r-inner)}
  #moreSheet a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-sub);font:400 16px/22px var(--sans);color:var(--ink);text-decoration:none}
  #moreSheet a:hover,#moreSheet a:focus-visible{background:rgba(255,255,255,.55)}
  html.dark #moreSheet a:hover,html.dark #moreSheet a:focus-visible{background:rgba(255,255,255,.06)}
  body.ms-on::before,body.fs-on::before{content:"";position:fixed;inset:0;z-index:110;background:var(--scrim)}
  .flt-sheet{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:80vh;overflow:auto;padding:8px 12px 12px;border-radius:var(--r-sheet)}
  .fs-grab{display:block;width:36px;height:5px;margin:2px auto 6px;border-radius:var(--r-cap);background:var(--ink-4)}
  .fs-row{min-height:48px;font-size:16px}

  /* operations: one row of search + «Фильтры», actions live in the sheet */
  #page-transactions .page-inner > .page-head{display:none}
  #page-transactions .tx-top{flex-wrap:wrap;gap:8px}
  #page-transactions .tx-top .search{flex:1 1 0;max-width:none;min-width:0}
  #opChips{display:contents}
  #opChips .op-seg{display:flex;order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* r16 r2-css W13: «К разбору N» one tap away */
  #opChips .chip{order:2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #fltBtn{order:1;flex:none}
  .flt-btn{height:var(--ctl-h)}
  .flt-btn span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* no truncated titles */
  .app-title .h-sub{display:none}
  .op-m b,.bul .nm,.dv .nm,.b-top .nm,.bc-row .nm,.catrow .nm,.dr-tr .nm,.mr-n span:last-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .op-m > span{flex-wrap:wrap;column-gap:10px;row-gap:2px}
  .op-m > span > .sub-t{margin-left:0} /* r16 r2-css M13: gap, not margin, so a wrapped time starts at the left edge */
  #page-transactions table.txt{table-layout:auto;width:100%}
  #page-transactions table.txt td.c1{width:100%;padding-inline:8px}
  #page-transactions table.txt td.c3{width:1%;white-space:nowrap}
  #page-transactions .txt .op-m b{overflow-wrap:break-word;word-break:normal}
  #page-transactions .txt tr.day td.c3{white-space:nowrap;text-align:right}
  #page-transactions .txt tr.day td.c1{white-space:normal}
  #page-transactions .txt tr.day .dh-n{display:none}
  #page-transactions .sum-row{align-items:center}
  #opTotals b{font-size:24px;line-height:30px}

  /* R12 owner direction: the same canvas/panel hierarchy at every width. */
  body{background:var(--canvas)}
  main.app-viewport{background:transparent}
  body header.app-topbar{background:var(--canvas)}
  .page .card:not(.tile){background:var(--panel);box-shadow:var(--surface-shadow,var(--e0));border-radius:var(--r-panel)} /* r23 C-01: flat on phone too */
  .page .card:not(.stack-panel):not(.tile){padding:16px}
  .page .card:not(.tile) > .ch,.page .card:not(.tile) > .cb{padding-left:0;padding-right:0}
  .page .stack-panel{padding:16px}
  .ov-page .ov-tiles{background:var(--panel);box-shadow:none;align-items:stretch}
  .ov-page > .ov-r4{background:var(--panel);box-shadow:none}
  #ovMonth .month-top{align-items:stretch}
  #ovMonth .month-top > .seg{align-self:flex-start}
  .ov-ops .dayh{margin-left:0;margin-right:0}
  .ov-ops .op{margin-left:-12px;margin-right:-12px}
}

/* r10.9 warm dark: the Bybit card and pocket read against the warm panel */
html.dark{--card-bybit-a:#565062;--card-bybit-b:#36303f;--card-bybit-ink:#d6cfe1}
html.dark .stack__pocket{background:var(--panel)}
html.dark .stack__card--bybit{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 -2px 8px rgba(0,0,0,.35)}
html.dark .split__seg--rest,html.dark .bt{background:rgba(255,255,255,.08)}
html.dark .split__seg{box-shadow:none}
/* r10.4b the same soft marker for «обычно за столько же дней» and one merchant dot language */
.whr b{top:50%;bottom:auto;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--r-dot);background:var(--canvas);box-shadow:0 0 0 1px rgba(20,24,40,.28)}
.heat-key b.typ{display:inline-block;width:6px;height:6px;border-radius:var(--r-dot);background:var(--canvas);box-shadow:0 0 0 1px rgba(20,24,40,.28)}
html.dark .whr b,html.dark .heat-key b.typ{background:var(--ink-2);box-shadow:none}
.mr-t .dot.hold{background:var(--data-3);box-shadow:0 0 0 1.5px var(--panel);opacity:.55}
.flt-btn .fb-m{display:none}
@media (max-width:760px){
  .flt-btn .fb-d{display:none} .flt-btn .fb-m{display:inline}
  .flt-btn.on-m{background:var(--ink);color:var(--canvas);box-shadow:none}
}

/* R10-FIX-1: operation detail and its scrim sit above the expanded drill. */
body.dr-sheet #opPanel{z-index:100}
body.dr-sheet #scrim.op-on{z-index:99}
body.dr-sheet #catPop{z-index:101}
#appTitle{margin:0}

/* R10-FIX-2: material hierarchy, content-sized panels and shared data components. */
:root{
  --e0:inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(20,22,30,.025),0 8px 24px rgba(20,22,30,.035);
  --e1:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,22,30,.08),0 4px 10px rgba(20,22,30,.07);
  --e2:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(20,22,30,.06),0 10px 24px rgba(20,22,30,.10);
  --pocket-drop:drop-shadow(0 2px 3px rgba(20,22,30,.06)) drop-shadow(0 10px 16px rgba(20,22,30,.10));
}
html.dark{
  --e0:inset 0 0 0 1px rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.12);
  --e1:inset 0 1px 0 rgba(255,255,255,.10),0 2px 3px rgba(0,0,0,.24),0 5px 12px rgba(0,0,0,.25);
  --e2:inset 0 1px 0 rgba(255,255,255,.10),0 4px 8px rgba(0,0,0,.26),0 12px 24px rgba(0,0,0,.32);
  --pocket-drop:drop-shadow(0 3px 4px rgba(0,0,0,.24)) drop-shadow(0 10px 16px rgba(0,0,0,.3));
}
.ov-tiles{background:var(--well);box-shadow:var(--inset)}
.ov-r3,.ov-r5,.an-r1,#page-cashflow .g2{align-items:start}
@media(min-width:761px){
  .b-side{position:sticky;top:90px;align-self:start}
  .ov-week{position:sticky;top:90px;align-self:start}
  .card.month #paceChart{height:250px}
}
@media(max-width:760px){.b-side{position:static}}
/* One continuous mask avoids fractional joins between the old three mask tiles. */
.stack__pocket{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 440' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300C330 0 347 10 358 37C375 81 426 110 500 110C574 110 625 81 642 37C653 10 670 0 700 0H1000V440H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 440' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300C330 0 347 10 358 37C375 81 426 110 500 110C574 110 625 81 642 37C653 10 670 0 700 0H1000V440H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
.stack__card--bybit{top:30px}
.stack{height:260px}
.stack__card--bybit .t-tag:last-child{font:500 12px/14px var(--sans);letter-spacing:0}
@media(max-width:760px){.stack{height:244px}.stack__card--bybit{top:30px}.stack__card--bybit .t-tag{font-size:10.5px}}
.selbar.glass{background:var(--glass-fill);--glass-fill:rgba(255,255,255,.6);box-shadow:var(--glass-edge),var(--glass-lift)}
html.dark .selbar.glass{--glass-fill:rgba(42,40,46,.6)}
.drill.sheet{background:var(--glass-fill);--glass-fill:rgba(246,247,250,.8)}
html.dark .drill.sheet{--glass-fill:rgba(36,34,40,.8)}
@media(prefers-reduced-transparency:reduce){.selbar.glass,.drill.sheet,html.dark .selbar.glass,html.dark .drill.sheet{background:var(--glass-solid);--glass-bf:none}}
@media(max-width:760px){
  .drill.sheet .dr-h{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:12px;padding-right:14px;background:var(--panel);box-shadow:inset 0 -1px var(--well-deep)}
  .drill.sheet .dr-hl{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
  .drill.sheet .dr-hl h2{white-space:normal;font-size:18px;line-height:24px}
  .drill.sheet .dr-hr{position:static;margin:0}
  .drill.sheet .dr-sum > .dr-go{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0;height:36px}
}
#paceChart{border-radius:var(--r-sub)}
#paceChart:focus{outline:none!important;box-shadow:none!important}
#paceChart:focus-visible:not(.pointer-origin){outline:2px solid var(--focus)!important;outline-offset:-3px!important;box-shadow:none!important}
#paceChart.pointer-origin:focus-visible{outline:none!important;box-shadow:none!important}
#paceChart .prev-end{color:var(--ink-3)}
#paceChart .endlbl{white-space:nowrap}
.b-st{transition:opacity 120ms ease}
.sl-tick.near{visibility:hidden}
@media(prefers-reduced-motion:reduce){.b-st{transition:none}}
#ovCats .bul{grid-template-columns:10px minmax(0,1fr) auto}
.cat-point{width:7px;height:7px;border-radius:50%;align-self:center}
#ovCats .bt{grid-column:2/-1}
.dv .v.pos{color:var(--pos-text)}.dv .v.neg{color:var(--neg-text)}
.dt .dn,html.dark .dt .dn{background:color-mix(in srgb,var(--data-in) 75%,var(--panel))}
.dt .up{background:color-mix(in srgb,var(--over) 75%,var(--panel))}
#bCmp .bc-row.dv{display:grid;grid-template-columns:minmax(110px,1.4fr) minmax(70px,1fr) 65px;gap:10px;padding:8px 0;align-items:center}
#bCmp .bc-row .nm{font:400 12px/16px var(--sans)}
#bCmp .bc-row .v{font-size:12px;text-align:right}
#bCmp .dv .dt{grid-column:auto;height:8px}
#cfIn .rank-row,#cfOut .rank-row{grid-template-columns:minmax(0,1fr) auto;padding-top:9px;padding-bottom:9px;gap:6px 16px}
#cfIn .rank-row .tr,#cfOut .rank-row .tr{grid-column:1/-1}
#cfIn .track,#cfOut .track{height:5px}
#cfChart .cfm rect[fill="var(--ok)"]{fill:var(--data-in)}
#cfChart .cfm.on rect[fill="var(--ok)"]{fill:var(--data-in-hi)}
/* Same narrow bar and usual-level tick in all three heatmaps. */
.wh{grid-template-columns:22px repeat(var(--nc),minmax(0,1fr)) 120px}
.whr{height:5px;margin-left:10px;margin-right:48px;min-width:60px;background:var(--well);border-radius:var(--r-tick)}
.whr i{background:var(--data-1);border-radius:var(--r-tick)}
.whr b,html.dark .whr b{top:-3px;bottom:auto;width:3px;height:11px;margin:0 0 0 -1.5px;border-radius:1px;background:var(--ink-3);box-shadow:none}
.heat-key b.typ,html.dark .heat-key b.typ{width:3px;height:10px;border-radius:1px;background:var(--ink-3);box-shadow:none}
@media(max-width:760px){.wh{grid-template-columns:20px repeat(var(--nc),minmax(0,1fr)) 112px}.whr{margin-left:4px;margin-right:48px}}
#anFees{height:220px;margin-top:8px}
#anFees .wkb .fee-cb{fill:var(--data-1)}
#anFees .wkb.hot .fee-cb{fill:url(#feeHot);filter:drop-shadow(0 4px 10px var(--data-glow))}
#anFees .wkb .fee-fees{fill:var(--data-ghost)}
#anFees .wkb .zero{opacity:.5}
#anFees .fee-zero{position:absolute;transform:translate(-50%,-100%);padding-bottom:5px;font:400 11px/16px var(--sans);color:var(--ink-3);white-space:nowrap}
#anFees .fz-tag{transform:translate(-50%,calc(-100% - 8px));white-space:nowrap}

#bCmp .bc-row .nm{white-space:normal;overflow:visible;text-overflow:clip}

@media(max-width:760px){
  body.selmode header.app-topbar nav.nav-pill-container{transform:translateY(120%);opacity:0;visibility:hidden;pointer-events:none}
  body.selmode .nav-thumb{opacity:0;pointer-events:none}
  html:has(body.selmode){--selbar-h:100px}
  .selbar.glass{height:var(--selbar-h,100px);min-height:100px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:calc(100% - 16px);max-width:none;border-radius:var(--r-modal);display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;padding:4px 8px}
  .selbar .iconbtn{width:44px;height:44px;flex:none}
  .selbar .sel-n{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0;font:400 13px/16px var(--sans)}
  .selbar .sel-hint{display:none}
  .selbar .sel-n > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .selbar .sel-a{grid-column:1/-1;display:flex;flex-wrap:nowrap;justify-content:flex-end;min-width:0;width:100%;margin:0;gap:4px}
  .selbar .sel-a .btn-ghost{height:44px;min-height:44px;min-width:44px;flex:none;padding:0 6px;font-size:12px;white-space:nowrap}
  .selbar .sel-a [data-bulk="csv"]{font-size:0;gap:0}
  .selbar .sel-a [data-bulk="csv"]::before{content:"CSV";font-size:12px}
}
/* The pocket's split track must not collapse when its legend wraps. */
.stack{height:284px}
.stack__pocket-wrap{height:224px}
.pk-split{flex-shrink:0}
#anFees .fz-tag{background:#fff;color:#111214}

.stack__card .card-number{font:500 11px/14px var(--mono);letter-spacing:.04em}

/* R10-FIX-3: one-line recent-day summary, consistent height at 390px. */
.day-meta{display:flex;align-items:center;gap:4px;white-space:nowrap;color:var(--ink-2)}
.day-shown{display:inline;font:inherit;color:inherit}
.day-meta .num{color:var(--ink-2)}
@media(max-width:760px){
  .ov-ops .dayh{gap:8px;font-size:11px}
  .ov-ops .day-meta .num{font-size:11px}
  .ov-ops .day-meta .dh-n{margin-right:5px}
}

/* R10-FIX-4a: the data stays consistent; each screen has a distinct job. */
.category-note{grid-column:2/-1;color:var(--ink-2);font:400 12px/18px var(--sans);padding-top:3px}
#ovDelta .dv{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:5px 10px;padding:12px 0}
#ovDelta .dv .nm{grid-column:2;white-space:normal;overflow:visible}
#ovDelta .dv-values{grid-column:2;grid-row:2;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
#ovDelta .dv .v{grid-column:3;grid-row:1/3;align-self:center;font-size:13px}
#ovDelta .dv .v.muted{color:var(--ink-2)}
.delta-scale{position:relative;grid-column:2/-1;height:12px;margin-top:4px;background:none;border-radius:var(--r-cell)}
.delta-scale i{display:block;height:100%;background:var(--data-3);opacity:1;border-radius:inherit}
/* Each half is its own width reference, so existing percentage values keep their scale. */
.delta-scale--up,.delta-scale--down{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.delta-scale--up::before,.delta-scale--down::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.delta-scale--up i{grid-column:2;background:color-mix(in srgb,var(--neg-text) 35%,var(--panel));border-radius:0 var(--r-cell) var(--r-cell) 0}
.delta-scale--down i{grid-column:1;justify-self:end;background:color-mix(in srgb,var(--ink-3) 45%,var(--well-deep));border-radius:var(--r-cell) 0 0 var(--r-cell)}
.weekday-summary{font:400 13px/22px var(--sans);color:var(--ink-2);padding:16px 4px}
.weekday-summary .more{display:inline;font:inherit;white-space:normal;color:var(--ink)}
.ov-r4[hidden]{display:none}
.ov-r4{display:block}
.b-split{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
#bRows{min-width:0}
.budget-group{background:var(--panel);border-radius:var(--r-card);box-shadow:var(--e1);margin-bottom:24px;overflow:visible}
.budget-group-title{display:flex;justify-content:space-between;gap:12px;margin:0;padding:20px 24px 8px;font:500 15px/22px var(--sans)}
.budget-group-title>span:last-child{font:400 12px/22px var(--sans);color:var(--ink-3)}
.b-side .b-sum{display:grid;grid-template-columns:1fr;gap:20px;padding:24px}
.b-side .b-sum .v{font-size:24px;line-height:30px}
.b-side .b-sum .b-free{display:none}
.b-side .b-sum .s{white-space:normal;line-height:18px}
#bFree:empty{display:none}
#bFree .b-free-g{margin:0;background:transparent}
#bFree .b-free-g summary{background:none;border-radius:var(--r-none);padding:16px 20px;line-height:20px}
#bFree .brow2{display:grid;grid-template-columns:32px minmax(0,1fr) auto;padding:16px 20px;gap:10px}
#bFree .brow2 .b-main{min-width:0}
#bFree .b-top{flex-wrap:nowrap}
#bFree .b-fig{margin-left:0}
#bFree [data-addlim]{grid-column:3;grid-row:1;justify-self:end;margin-left:0;white-space:nowrap}
.stack{height:324px}
.stack__card--fund{top:0;left:30px;right:30px}
.stack__card--uta{top:30px;left:20px;right:20px;background:linear-gradient(125deg,#6363ad,#414574);color:#fff}
.stack__card--bybit{top:76px;left:10px;right:10px;background:linear-gradient(150deg,#65656c,#29292e);color:#fff}
.stack__card--bybit::after{background:none}
.stack__card .card-number{font:500 11px/14px var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.uta-transfer{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stack__card .uta-transfer{font-size:10px;line-height:13px}
.uta-transfer #ovUta{font-size:12px}
html.dark .stack__card--bybit{background:linear-gradient(150deg,#777780,#38383d);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 -2px 8px rgba(0,0,0,.35)}
.topbar-controls .pro-link{background:none;box-shadow:none;padding:0 8px}
.topbar-controls .per-wrap{order:0}.topbar-controls .pro-link{order:1}.topbar-controls #syncBtn{order:2}.topbar-controls #accBtn{order:3}
.account-preferences{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:8px 24px;background:none}
.account-preferences #themeToggleBtn{display:flex;width:auto;padding:0 12px;gap:8px;border-radius:var(--r-ctl)}
.account-preferences .demo-badge{display:inline}
.an-r2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.an-r2>.card{margin:0;min-width:0}
.an-r2 #anFees,.an-r2 #anOut{height:220px}
@media(max-width:760px){
  .b-split{display:flex;flex-direction:column;gap:20px}
  .b-side{position:static;width:100%}
  #bRows{width:100%}
  .b-side .b-sum{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:16px 12px}
  .b-side .b-sum .v{font-size:20px;line-height:27px}
  .budget-group-title{padding:18px 16px 4px;flex-wrap:wrap;gap:0 8px}
  .stack{height:324px}
  .stack__card--uta{top:30px}.stack__card--bybit{top:76px}
  .stack__card .t-tag{font-size:10.5px}
  .stack__card .uta-transfer{font-size:9px;line-height:12px}
  .ov-tiles .tile .chip-s{display:block!important;font:400 10.5px/16px var(--sans);white-space:nowrap}
  .topbar-controls .pro-link,.topbar-controls .pro-link span,.topbar-controls #syncBtn{display:flex}
  .topbar-controls{gap:4px}.topbar-controls .pro-link{font-size:11px;padding:0 3px}
  .topbar-controls #syncBtn{width:28px}.topbar-controls #accBtn{width:30px}
  .topbar-controls .per-btn{font-size:11px;padding:0 6px}
  .brand-section .zt-wordmark{width:78px}
  .an-r2{grid-template-columns:1fr;gap:20px}
}

#ovDelta .dv{padding:8px 0;row-gap:3px}
#ovDelta .dv .nm{font-size:13px;line-height:18px}
#ovDelta .dv-values{line-height:16px}
#ovDelta .delta-scale{margin-top:2px}
/* Keep the endpoint caption readable where a line passes behind its letters. */
#paceChart .prev-end{background:var(--panel)}
@media(max-width:760px){
  .app-title{font-size:16px;line-height:18px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #paceChart .prev-end{background:var(--canvas)}
}

/* R10-FIX-4b: violet-black material, category data, readable selections. */
:root{--lav-500:var(--data-hi-top)}
.ov-tiles,.ov-page .ov-tiles{background:var(--band)}
.cc.dr-sel,.cc.rng,.cc[data-cday]:hover{border:0;box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--lav-500);position:relative;z-index:1}
.nav-thumb.glass{background:var(--glass-fill);box-shadow:var(--glass-edge),var(--e1)}
nav.nav-pill-container .nav-pill-btn.active{color:var(--ink)}
nav.nav-pill-container:not(.has-thumb) .nav-pill-btn.active{background:var(--ctl);color:var(--ink)}
#anMerch .mr-b i,#anMerch .mr:hover .mr-b i,#anMerch .mr.on .mr-b i{background:var(--merchant-color)}
#anMerch .mr-t .dot{background:var(--merchant-color)}
#anOut .dot-m,#anOut .dot-m.hot{fill:var(--merchant-color)}
#anOutKey .dm,#anOutKey .dm.hot{background:var(--ink-3)}
#cfKey{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
#cfKey .key.muted{display:none}
#cfKey .dash{height:8px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 6px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 75%,90% 75%,90% 25%,0 25%)}
#cfChart .cf-proj-label{position:absolute;right:0;top:2px;color:var(--ink-3);font:400 11px/16px var(--sans);white-space:nowrap}
.selbar.glass{left:50%;right:auto;--glass-fill:linear-gradient(180deg,rgba(255,255,255,.36),rgba(246,247,250,.24) 50%,rgba(255,255,255,.38));--glass-blur:blur(8px) saturate(125%)}
html.dark .selbar.glass{--glass-fill:linear-gradient(180deg,rgba(48,41,62,.38),rgba(48,41,62,.26) 50%,rgba(60,54,70,.40))}
@media(min-width:761px){
  .selbar.glass{left:var(--bulk-center,50%)}
  .an-r1,.ov-r3,.ov-r5{align-items:stretch}
  .ov-delta{position:static;align-self:stretch}
  .an-r1>.card{display:flex;flex-direction:column}
  .an-r1>.card:has(#anWeek){align-self:start}
  #anWeek{display:flex;flex-direction:column;justify-content:space-between}
  #anWeek .wh{grid-template-rows:14px repeat(7,28px)}
  #anWeek .whc{height:28px;align-self:start}
  .ov-r5{grid-template-columns:1fr}
  .ov-ops{width:100%}
  .ov-ops .op{grid-template-columns:32px minmax(0,1.4fr) minmax(0,1fr) 140px}
  .ov-ops .op-m{display:contents}
  .ov-ops .op-m > b{grid-column:2;grid-row:1;min-width:0}
  .ov-ops .op-m > span{grid-column:3;grid-row:1;min-width:0}
  .ov-ops .op-a{grid-column:4;grid-row:1}
  .ov-ops .dayh{margin-left:12px;margin-right:12px}
  .ov-r5 .ov-week{position:static;padding:0 4px}
}
@media(max-width:760px){
  .selbar.glass{left:50%}
  .drill.sheet{--glass-fill:linear-gradient(180deg,rgba(246,247,250,.98),rgb(246,247,250) calc(100% - env(safe-area-inset-bottom,0px)))}
  html.dark .drill.sheet{--glass-fill:linear-gradient(180deg,rgba(27,25,34,.98),rgb(27,25,34) calc(100% - env(safe-area-inset-bottom,0px)))}
}
@media(prefers-reduced-transparency:reduce){.selbar.glass,.drill.sheet,html.dark .selbar.glass,html.dark .drill.sheet{background:var(--glass-solid)}}

/* V9: three restrained edits after the reference comparison. */
#ovDelta .dv{padding-top:5px;padding-bottom:5px}
@media(min-width:761px){
  .ov-page .card:not(.stack-panel){border-radius:var(--r-card)}
}
/* V2: the calendar/visualization tooltip is a light raised surface in both themes. */
.viz-tip,html.dark .viz-tip{background:#fff;color:#111214;border:0;box-shadow:0 2px 4px rgba(16,18,24,.12),0 8px 22px rgba(16,18,24,.18);--text-main:#111214;--text-muted:#5b5f68;--text-light:#686c75;--text-light-2:#686c75;--pos-text:#1f7a48;--neg-text:#b8342f}
.viz-tip .muted,.viz-tip .d{color:#5b5f68}

/* R10-FIX-4c: clean card geometry and summaries inside their owning panels. */
.stack__card--bybit{
  background:linear-gradient(150deg,#505057,#29292e);
}
html.dark .stack__card--bybit{
  background:linear-gradient(150deg,#6a6a73,#3a3a41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 -2px 6px rgba(0,0,0,.18);
}
.stack__card .t-tag,.stack__card--bybit .t-tag:last-child{
  font:500 12px/16px var(--sans);letter-spacing:0;white-space:nowrap;
}
.stack__card .uta-transfer{display:block}
.uta-transfer #ovUta{font:inherit}
.ov-cats{display:flex;flex-direction:column}
.ov-cats > .weekday-summary{margin-top:auto}
.ov-season-line{margin:0;padding:0 24px 16px;font-size:12px;line-height:16px;order:99}
@media (max-width:760px){.ov-season-line{padding:0 20px 16px}}
.card > .weekday-summary{position:static;align-self:auto;padding:14px 24px 20px}
#paceChart .prev-end{transform:none;background:none}
.ov-tiles .chip-s::before{content:none;display:none}
@media(max-width:760px){
  .card > .weekday-summary{padding:14px 0 0}
  .b-side .card > .weekday-summary{padding:0 16px 16px}
}

/* R11: phone touch targets and distinct panel surfaces. */
@media(max-width:760px){
  .panel-h .iconbtn,#drill .iconbtn,.zm-head .iconbtn,.per-cal-h button,#accBtn{min-width:44px;min-height:44px}
  .zm-nav button,.per-presets button,#perPop .cd{min-height:44px}
  .lg,.lim-ed.sheet .le-chips button,.account-preferences #themeToggleBtn,#mAcc button:not(.switch){min-height:44px}
  .lg{display:inline-flex;align-items:center}
  .lim-ed.sheet .le-chips{gap:8px}
  .brow2 .b-fig .lim-btn{position:relative;height:30px}
  .brow2 .b-fig .lim-btn::after{content:"";position:absolute;inset:-7px 0}
  .brow2:not(.free){padding-block:10px}
  .brow2:not(.free) .b-fig{margin-bottom:5px}
  .sl-th::before{inset:-7px -6px}
  .per-pop{max-height:calc(100dvh - 80px);overflow:auto}
  #perBtn,#fltBtn,.flt-btn{height:44px;min-width:44px}
  #opPanel .seg{height:auto;min-height:50px}
  #opPanel .seg button,#opPanel .cat-btn,#drill .chip,.dr-chip,.dr-tr{min-height:44px}
  #opPanel .seg button,#opPanel .cat-btn,#drill .chip,.dr-chip{min-width:44px}
  #page-overview .card:is(.month,.ov-cats,.ov-delta,.ov-ops),#page-budgets .card,#page-analytics .card{background:var(--panel);border-radius:var(--r-panel);padding:16px}
  html.dark #page-overview .card:is(.month,.ov-cats,.ov-delta,.ov-ops),html.dark #page-budgets .card,html.dark #page-analytics .card{background:var(--panel)}
  .page-inner,.b-split,.b-side,.an-r1,.an-r2{gap:12px}
  .budget-group{margin-bottom:12px}
}
@media(min-width:761px){
  #page-cashflow .page-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto 1fr;align-items:start}
  #page-cashflow .page-head,#page-cashflow .page-inner > .card:has(#cfChart){grid-column:1 / -1}
  #page-cashflow .g2{display:contents}
  #page-cashflow .g2 > .card:has(#cfIn){grid-column:1;grid-row:3}
  #page-cashflow .g2 > .card:has(#cfOut){grid-column:2;grid-row:3 / span 2}
  #page-cashflow .page-inner > .card:has(#cfList){grid-column:1;grid-row:4}
  #page-cashflow .g2 > .drill,#page-cashflow .page-inner > .drill{grid-column:1 / -1}
  #cfList{grid-template-columns:1fr}
  /* A visible period note adds one row above the existing cash-flow layout. */
  #page-cashflow .page-inner:has(>#cfPeriodNote:not([hidden])){grid-template-rows:auto auto auto auto 1fr}
  #page-cashflow .page-inner > #cfPeriodNote{grid-column:1/-1;margin:0}
  #page-cashflow .page-inner:has(>#cfPeriodNote:not([hidden])) .g2 > .card:has(#cfIn){grid-row:4}
  #page-cashflow .page-inner:has(>#cfPeriodNote:not([hidden])) .g2 > .card:has(#cfOut){grid-row:4 / span 2}
  #page-cashflow .page-inner:has(>#cfPeriodNote:not([hidden])) > .card:has(#cfList){grid-row:5}
}
@media(prefers-reduced-transparency:reduce){
  .sl .sl-th .sl-lens,html.dark .sl .sl-th .sl-lens{background:var(--glass-solid)}
  body header.app-topbar nav.nav-pill-container{background:var(--glass-solid);--glass-bf:none}
}

/* r11 cross-lane (from js lane J66, J73): bottom-anchored «Ещё» sheet, op-panel grabber */
@media (max-width:760px){
  #moreSheet{left:0;right:0;bottom:0;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));border-radius:var(--r-sheet) var(--r-sheet) 0 0}
  #moreSheet .fs-grab{margin:8px auto 0}
  #moreSheet .zm-head{padding:8px 4px 8px 16px}
  #moreSheet .zm-head h2{font:500 17px/22px var(--sans)}
  #moreSheet a{min-height:56px}
  #moreSheet a svg{flex:none;color:var(--ink-2)}
  nav.nav-pill-container:has(.nav-more[open]) .nav-pill-btn.active:not(.nav-more-btn){background:transparent;box-shadow:none;color:var(--ink-2)}
  nav.nav-pill-container:has(.nav-more[open]) .nav-thumb{opacity:0}
  #opPanel .dr-grab{display:flex;justify-content:center;padding:8px 0 0;cursor:grab;touch-action:none}
  #opPanel .dr-grab i{width:36px;height:5px;border-radius:var(--r-cap);background:var(--ink-4)}
}

/* R12: use the existing summary above the limits; no empty desktop sidebar. */
@media (min-width:761px){
  #page-budgets .b-split{grid-template-columns:minmax(0,1fr)}
  #page-budgets .b-side{grid-row:1;position:static;grid-template-columns:minmax(0,1fr);gap:16px}
  #page-budgets .b-side > .card{padding:0}
  #page-budgets #bSum{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px}
}
@media (min-width:1100px){
  #page-budgets .b-side{grid-template-columns:minmax(0,1fr);align-items:start}
  #bRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  #bRows .budget-group{margin-bottom:0}
  #bFree .b-free-g[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  #bFree .b-free-g summary{grid-column:1/-1}
  #bFree .b-free-g[open]::details-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;grid-column:1/-1}
}
/* The separator is a bare text node; keep only its two meaningful children visible. */
#bWeek{font-size:0;line-height:0;padding-top:0}
#bWeek > span,#bWeek > .more{display:block;font:400 13px/20px var(--sans)}
#bWeek > .more{margin-top:4px}

/* The chart title and the optional category chip share one readable heading. */
#ovMonth .month-lbl{font:500 16px/22px var(--sans);color:var(--ink)}
#ovMonth .month-lbl > .foc{font:500 13px/20px var(--sans);margin-left:8px;vertical-align:middle}
#paceChart .ylbl{display:none}
/* r13 css#7: two soft y labels inside the plot, just above their gridline (JS gutter is now 20/24px) */
#paceChart .ylbl.in{display:block;width:auto;text-align:left;transform:translateY(calc(-100% - 2px));font:400 11px/14px var(--sans);color:var(--ink-3);pointer-events:none}
#paceChart > svg > line[stroke^="rgba(128,128,140,"]{opacity:.7}
#paceChart > svg > line[stroke="rgba(128,128,140,.22)"]{opacity:1}

/* Preserve opaque and high-contrast alternatives after the material overrides. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-thumb.glass,.selbar.glass,html.dark .selbar.glass{background:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .nav-thumb.glass,.selbar.glass,html.dark .selbar.glass{background:var(--glass-solid);--glass-bf:none}
}
@media (forced-colors:active){
  .sl .sl-th .sl-lens,html.dark .sl .sl-th .sl-lens{background:Canvas;outline:2px solid ButtonText;outline-offset:-2px}
  .sl-th::after,html.dark .sl-th::after{box-shadow:none;outline:1px solid Highlight}
}

/* R13: fit the desktop header between the phone and full desktop layouts. */
@media (min-width:761px) and (max-width:1110px){
  body header.app-topbar{display:grid;grid-template-columns:auto minmax(0,1fr);height:auto;gap:8px 16px;padding:8px var(--page-x)}
  header.app-topbar > .brand-section{grid-column:1;grid-row:1}
  header.app-topbar > .topbar-controls{grid-column:2;grid-row:1;justify-self:end;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
  header.app-topbar > nav.nav-pill-container{grid-column:1/-1;grid-row:2;justify-self:center;min-width:0;max-width:100%}
  .topbar-controls .per-wrap,.topbar-controls .per-btn{min-width:0;max-width:100%}
  .topbar-controls .per-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #page-transactions table.txt td.c2{width:180px}
  #page-transactions .txt td.c2 .cat-btn{height:auto;min-height:30px}
  #page-transactions .txt td.c2 .cat-btn span{white-space:normal;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}

/* A CSS chevron keeps the existing in-place drill action discoverable. */
#ovDelta .dv{position:relative;padding-right:20px}
#ovDelta .dv::after{content:"";position:absolute;right:3px;top:calc(50% - 4px);width:6px;height:6px;border-top:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3);transform:rotate(45deg);opacity:0;pointer-events:none}
#ovDelta .dv:hover::after,#ovDelta .dv:focus-within::after{opacity:1}
@media (pointer:coarse){#ovDelta .dv::after{opacity:1}}

@media (max-width:760px){
  /* Put the navigation clearance on each page, including its selection state. */
  main.app-viewport{padding-bottom:0}
  .page-inner{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body.selmode .page-inner{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--selbar-h,52px) + 12px)}
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px) + 8px)}
  html:has(body.selmode){scroll-padding-bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--selbar-h,52px) + 12px)}

  #ovTiles{gap:8px;padding:4px}
  #ovTiles .tile{padding:2px 8px;gap:2px}
  #ovTiles .tile-val{font-size:22px;line-height:26px}
  #ovTiles .tile .chip-s{font:400 14px/16px var(--sans);white-space:normal;overflow-wrap:anywhere}
  .stack{height:290px}
  .stack__card--uta{top:24px}
  .stack__card--bybit{top:60px}
  .stack__pocket-wrap{height:200px}
  .stack__pocket{padding:54px 16px 12px}
  .stack__pocket .month-fig{margin-top:0}
  .stack__pocket .pk-split{margin-bottom:0}
  .stack__pocket .pk-sub{margin-top:4px;gap:2px 8px;font-size:12px;line-height:16px}

  .bul-dr{position:relative;margin-left:8px;margin-right:8px}
  .bul-dr::before{content:"";position:absolute;inset:-8px}
  .topbar-controls{gap:6px}
  #syncBtn,#proBtn{position:relative;min-width:38px}
  #syncBtn::after,#proBtn::after{content:"";position:absolute;inset:-4px -3px}
  .seg,.seg.sm{height:auto;min-height:50px}
  .seg button,.seg.sm button{height:auto;min-height:44px;min-width:44px}
  .switch::before{content:"";position:absolute;inset:-8px -2px}
  .pk-split .pk-c{position:relative}
  .pk-split .pk-c::before{content:"";position:absolute;top:0;bottom:-30px;left:0;right:0} /* r16 r2-css M1: grows down only, never over the pill above */
  .more,.weekday-summary .more,.pk2 .more{display:inline-flex;min-height:44px;padding-block:12px;line-height:20px}

  body.dr-sheet .drill.sheet{bottom:0;z-index:90;padding-bottom:env(safe-area-inset-bottom,0px)}
  body.dr-sheet .drill.sheet .dr-grab,body.dr-sheet .drill.sheet .dr-h{flex-shrink:0}
  body.dr-sheet .drill.sheet .dr-body{min-height:0}
  body.dr-sheet .drill.sheet:not(.full){height:55dvh;bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body.dr-sheet .drill.sheet:not(.full) .dr-hl{min-height:44px;justify-content:center;gap:0}
  body.dr-sheet .drill.sheet:not(.full) .dr-hl h2{font-size:16px;line-height:20px}
  body.dr-sheet .drill.sheet:not(.full) .dr-num{font-size:24px;line-height:28px}
  body.dr-sheet .drill.sheet:not(.full) .dr-sum{padding-top:6px}
  body.dr-sheet .drill.sheet:not(.full) .dr-sum > .dr-go{display:inline-flex;min-height:44px;height:auto;width:auto;padding:0 10px;margin:4px 0}
  body.dr-sheet .drill.sheet:not(.full) .dr-meta{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:4px;white-space:normal}
  body.dr-sheet .drill.sheet:not(.full) .dr-meta span + span{margin-left:0}
  /* The 55% preview shows summary, filters and operations; 92% restores the full breakdown. */
  body.dr-sheet .drill.sheet:not(.full) :is(.dr-tops,.dr-lim,.dr-wkw){display:none}
  body.dr-sheet .drill.sheet .dr-flt select{min-height:44px}
  body.dr-sheet:not(.dr-full) #zToast{bottom:calc(55dvh + 100px + env(safe-area-inset-bottom,0px))}

  .zm-nav{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding-inline:16px;-webkit-mask:none;mask:none}
  .zm-nav button{flex:1 0 auto;height:auto;min-height:44px;min-width:44px}
}
/* Explicit hidden state wins over component display rules, including .confirm. */
[hidden]{display:none!important}
/* A one-month exception gets its own line only when it exists. */
.b-main>.b-override{grid-row:4;grid-column:1;display:block;margin:0!important;font:400 12px/16px var(--sans);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;pointer-events:none;transition:opacity 120ms ease-out}
.b-main:has(>.sl)>.b-st{grid-row:3;grid-column:1}
.b-main>.b-override+.sl{grid-row:2;grid-column:1}
.b-main:has(.sl.is-drag,.sl-th.kf) .b-override{opacity:0}
/* r13 fix task 19: the family header total («24 операции · 400 $») was hidden by the global .ch h2 .tail rule */
#page-family .ch h2 #famTotal{display:inline;margin-left:8px;font:400 14px/20px var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* r13 fix (tasks 45/30): overview category meta line spans the text columns and wraps as a whole */
#ovCats .bul-meta{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px;font:400 12px/18px var(--sans);color:var(--ink-3);min-width:0}
#ovCats .bul-meta .category-remaining{color:var(--ink-2)}
#ovCats .bul-meta .category-remaining.neg{color:var(--neg-text,var(--neg,#DC2626))}
#ovCats .bul-meta .category-note{flex-basis:100%;padding-top:0}
#ovCats .bul-meta .sep{white-space:pre}
@media (max-width:760px){
  #ovCats .bul-meta>span:not(.sep){flex-basis:auto}
  #ovCats .bul-meta .sep{display:inline}
  #ovCats .bul-meta>:is(.category-forecast,.category-note){flex-basis:100%}
  #ovCats .bul-meta .sep:has(+.category-forecast){display:none}
}
/* r13 fix (task 6): the programmatic focus on a page h1 after navigation must not draw a ring */
html body h1[tabindex="-1"]:focus,html body h1[tabindex="-1"]:focus-visible{outline:none!important;box-shadow:none!important}
.b-recurring{margin-top:16px}
/* r13 fix (task 41): the empty-state create button sits on its own line under the hint */
#rlList .empty-s button{display:flex;margin-top:12px}

/* R13 r2: row widths, disabled controls and mobile forms. */
button:has(>.proto-note){height:auto;min-height:44px;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding-block:8px;white-space:normal}
button .proto-note{display:block;font:400 11px/14px var(--sans);color:var(--ink-2)}
.kv>:first-child,.setrow .mcell{min-width:0;overflow-wrap:anywhere}
.mcell>div{min-width:0}
:is(.btn-brand,.btn-dark,.btn-ghost,.btn-danger,.pro-link,.iconbtn,.chip):is(:disabled,[aria-disabled="true"]:not([data-demo])):not([aria-busy="true"]),
:is(#syncBtn,#themeToggleBtn,#accBtn,#proBtn):is(:disabled,[aria-disabled="true"]:not([data-demo])):not([aria-busy="true"]){background:transparent;background-image:none;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line,var(--well-deep));cursor:not-allowed;transform:none;opacity:1}
.btn-danger:is(:disabled,[aria-disabled="true"]):not([aria-busy="true"]){background:color-mix(in srgb,var(--neg-text) 14%,transparent);color:var(--neg-text);opacity:.7}
.ov-ops .op + .op{border-top:1px solid var(--line,var(--well))}
.ov-ops .op:hover{background:var(--ctl-hover)}
#ovCats[tabindex="-1"]:focus,#ovCats[tabindex="-1"]:focus-visible,#ovDelta[tabindex="-1"]:focus-visible,.cb[tabindex="-1"]:focus-visible{outline:none!important;box-shadow:none!important}
#famShared > [data-family-more]{display:flex;align-items:center;justify-content:flex-start;min-width:44px;min-height:44px;padding-inline:0;margin:4px 20px 16px}
.re-row:has(#reMo){grid-template-columns:110px 104px minmax(0,1fr)}
#reMo{width:auto;padding-right:28px}
#mRule .re-row #reMv::-webkit-calendar-picker-indicator{display:none!important}
.rl-p .rl-to{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;vertical-align:middle;max-width:100%}
.rl-p .rl-to .pl{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* A single rule has no order controls or empty order columns. */
.single .rl-grip,.single .rl-n,.single [data-rup],.single [data-rdn]{display:none}
.single .rl{grid-template-columns:minmax(0,1fr) auto auto}
.setrow>span:has(>.btn-ghost){display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){
  .kv:has(>.btn-ghost),.setrow:has(>.btn-ghost),.setrow:has(>span>.btn-ghost){grid-template-columns:minmax(0,1fr)}
  .kv:has(>.btn-ghost)>:last-child,.setrow:has(>.btn-ghost)>:last-child,.setrow:has(>span>.btn-ghost)>:last-child{justify-self:start}
  body:has(#page-integrations.active,#page-rules.active) .topbar-controls .per-wrap{display:none}
  #proBtn{justify-content:center;width:38px;padding:0}
  /* The existing text remains the accessible name even without an aria-label. */
  #proBtn>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #proBtn::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6m-5 3h4m-5-6a6 6 0 1 1 6 0v3H9z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6m-5 3h4m-5-6a6 6 0 1 1 6 0v3H9z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
  body.dr-sheet .drill.sheet .dr-flt{flex-wrap:wrap;overflow-x:visible;max-width:100%}
  body.dr-sheet .drill.sheet .dr-q{flex:1 1 0;max-width:none;min-width:0;min-height:44px}
  body.dr-sheet .drill.sheet .dr-flt .seg.sm{flex:none}
  body.dr-sheet .drill.sheet .dr-chips{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%;padding:4px;-webkit-mask:none;mask:none}
  .brow2:not(.free) .sl{margin-left:-42px}
  #page-budgets #bFree .b-free-g{background:none}
  #page-budgets #bFree{padding:0}
  #bFree .brow2{grid-template-columns:28px minmax(0,1fr)}
  #bFree [data-addlim]{grid-column:2;grid-row:2;justify-self:start;min-height:44px}
  #famShared > [data-family-more]{margin-left:16px;margin-right:16px}
  .re-row:has(#reMo){grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width:380px){
  .topbar-controls{gap:4px}
  .topbar-controls .per-wrap{max-width:96px}
  #perBtn{max-width:100%}
  #perBtnLbl{min-width:0}
}

/* r13 css#2/#21 (W10): phones hide the category column, so the category rides in the row subline */
.txt .sub-cat{display:none}
@media (max-width:760px){
  .txt .sub-cat{display:inline}
  .txt .op-m > span{flex-wrap:nowrap;min-width:0}
  .txt .op-m > span > .sub-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
  .txt .op-m > span > .sub-cat{flex:1 1 0}
  .txt .op-m > span > .sub-city{display:none}
  body.selmode #page-transactions table.txt{table-layout:auto}
  body.selmode #page-transactions table.txt td.c3{width:1%;white-space:nowrap}
  body.selmode .txt .mcell > .ava{display:none}
  body.selmode .txt .mcell > .op-m{flex:1;min-width:0;width:0}
  body.selmode .txt .selz{min-height:44px}
}
/* r13 css#26 (ux-tx-filter-summary-sticky): search, filters and the running total stay in view while the list scrolls */
#page-transactions .tx-sticky{display:contents}
@media (min-width:761px){
  #page-transactions .tx-sticky{display:block;position:sticky;top:64px;z-index:6;background:var(--canvas);margin:0 -8px;padding:4px 8px 0}
}

/* R13 r3: scoped receipt rows and phone first-screen layout. */
#helpBody:has(#rcCandidates){display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
#helpBody:has(#rcCandidates) > p,#helpBody:has(#rcCandidates) > .field{margin:0}
#rcCandidates h3{margin:16px 0 8px}
#rcCandidates h3:first-child{margin-top:0}
@media (max-width:760px){
  /* Date and optional note share one subline; only the note gives up space. */
  /* r16 r2-css L2/M1: the source label (bare text node) and the date flow in one wrapping flex line;
     the label wraps by words if it must, the date is never covered, the note takes its own line. */
  #page-cashflow #cfList .ifrow .op-m > span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;white-space:normal;overflow:visible;padding-right:0;position:static}
  #page-cashflow #cfList .ifrow .op-m > span > .sub-t{position:static;margin-left:0;flex:none;white-space:nowrap}
  #page-cashflow #cfList .ifrow .op-m > span > .sub-t + .sub-t{flex:1 0 100%;min-width:0;white-space:normal}
  #page-cashflow #cfList .ifrow .op-m b{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible;overflow-wrap:anywhere}
  #page-receipts .page-head{flex-wrap:nowrap;justify-content:flex-end}
  #page-receipts .page-head .page-actions{order:0}
  body #page-receipts .page-head #rcHelp{order:1;margin:0;width:44px;height:44px;min-width:44px;min-height:44px}
}
@media (max-width:700px){
  .cf-nums > div{padding:4px 12px}
  #cfKey{gap:4px 12px;margin-block:0 8px;font-size:12px;line-height:16px}
}
@media (max-width:600px){
  .stack{height:270px}
  .stack__pocket-wrap{height:180px}
  .stack__pocket{padding-top:44px}
}

/* r13 r3-verify: r3-js#43 added two hero legend lines («свободно в других категориях», «выше суммы лимитов»);
   the fixed-height pocket clipped them (22px at 390, 47px at 768). The pocket now grows with its content;
   the card stack keeps its offsets (100 / 90 px) and the pocket keeps its old height as a minimum. */
.stack{height:auto!important;display:flex;flex-direction:column;--pk-off:100px;--pk-min:224px}
.stack__pocket-wrap{position:relative;left:auto;right:auto;bottom:auto;margin-top:var(--pk-off);height:auto!important;min-height:var(--pk-min)}
.stack__pocket{height:auto;min-height:var(--pk-min)}
@media (max-width:760px){.stack{--pk-off:90px;--pk-min:200px}}
@media (max-width:600px){.stack{--pk-min:180px}}
@media (max-width:480px){
  .stack__pocket .month-fig{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .stack__pocket .month-fig .pill.over{white-space:normal;text-align:left;align-self:flex-start;margin:0;max-width:100%}
  .stack__pocket .pk-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;white-space:normal}
  .stack__pocket .pk-sub > span:not(.pk-key){grid-column:1/-1;white-space:normal;color:var(--ink-3)}
  .zm-foot:has(>button:nth-child(3)){flex-direction:column-reverse;align-items:stretch;gap:8px}
  .zm-foot:has(>button:nth-child(3)) > button{width:100%;min-height:44px}
}
/* r13 r3-verify: between the phone layout and ~1024px the 5fr hero column is 270-370px wide, so the wallet stack
   and the hero pill/legend overflowed (61px at 768). Stack the first row there; the chart gets the full width below. */
@media (min-width:761px) and (max-width:1023px){.ov-r1{grid-template-columns:minmax(0,1fr)}}
/* r13 r3-verify css#15: receipt candidate rows, amount column right-aligned and tabular */
#rcCandidates .rc-candidate{display:flex;align-items:center;justify-content:space-between;gap:12px}
#rcCandidates .rc-c-main{flex:1 1 auto;min-width:0}
#rcCandidates .rc-c-main small{display:block;margin-top:2px;color:var(--ink-3)}
#rcCandidates .rc-c-amt{flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#rcCandidates .rc-c-amt small{display:block;color:var(--ink-3)}

/* r14 r1 Claude fix: phone delta header tail must wrap instead of overflowing 390px. */
@media (max-width:760px){.ov-delta .ch h2,.ov-delta .ch h2 .tail{white-space:normal}}

/* r14 verify (Claude): budgets rows. JS#20 made the category name and the spent figure <button class="b-open">;
   they rendered with UA button chrome (2px outset box). Reset them to text that underlines on hover. */
#page-budgets button.b-open{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--r-ctl);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-budgets button.b-open:hover{text-decoration:underline;text-decoration-color:var(--ink-4);text-underline-offset:3px}
#page-budgets button.b-open:focus-visible{outline:2px solid var(--focus,var(--ink-3));outline-offset:2px}
.b-fig b > button.b-open{font-weight:inherit;font-variant-numeric:tabular-nums}
/* WM3: row = title line, track ~10px under it, one status line, one caption line (history + «главное»). */
@media (min-width:761px){
  #bRows .brow2:not(.free) .sl{--slh:32px}
  #bRows .brow2:not(.free) .b-main{row-gap:2px}
}
#bRows .sl + .b-st{min-height:20px}
#bRows .b-st > *{font-size:13px;line-height:20px}
.sl-history{display:flex;gap:4px 10px;min-width:0;font-size:12px;line-height:16px;color:var(--ink-3);white-space:nowrap}
.sl-history > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sl-history > .sl-hist{flex:none}
.sl-history > .sl-main{flex:0 1 auto}
.sl-history > .sl-main::before{content:"·";margin-right:10px}
.sl-history > .sl-main[hidden]{display:none}
@media (max-width:760px){
  #bRows .b-st{column-gap:8px}
  .sl-history{flex-wrap:wrap;white-space:normal}
  .sl-history > span{overflow:visible;white-space:normal}
  .sl-history > .sl-main{flex-basis:100%}
  .sl-history > .sl-main::before{content:none}
}
/* group header: title left, total next to it, the single «Перераспределить» action right */
.budget-group-title{align-items:center;flex-wrap:wrap}
.budget-group-title > .budget-group-total{margin-right:auto}
.budget-group-title > [data-cover]{height:32px;min-height:32px;padding:0 12px;font-size:13px}
@media (max-width:760px){.budget-group-title > [data-cover]{height:44px;min-height:44px}}
/* JS#38 moved «Регулярные списания» into .b-side; the r12 rule zeroed side-card padding, so it had none. */
#page-budgets .b-side > .card.b-recurring{padding:20px 24px;margin-top:0}
.b-recurring > .ch{padding:0;min-height:0;margin:0 0 4px}
.b-recurring > .ch h2{font:500 15px/22px var(--sans);margin:0}
.b-recurring > .cb{padding:0}
#bRecurring h3{font:500 12px/16px var(--sans);color:var(--ink-3);margin:12px 0 2px}
#bRecurring > p{margin:0;font-size:13px;line-height:20px}
#bRecurring .row2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:14px;line-height:20px}
#bRecurring .row2 > span:last-child{flex:none;font-variant-numeric:tabular-nums}
#bRecurring .row2 small{display:block;font-size:12px;line-height:16px;color:var(--ink-3)}
@media (min-width:1100px){
  #page-budgets .b-side{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:stretch}
  #page-budgets .b-side > .card.b-recurring{align-self:stretch}
}
@media (max-width:760px){#page-budgets .b-side > .card.b-recurring{padding:16px}}
/* r28 f4: gamification ("always plus"). Quiet "Итоги" card in Бюджеты: no borders, no gradients, no glow;
   any motion is transform/opacity only and gated behind prefers-reduced-motion. */
#page-budgets .b-side > .card.b-goals{padding:20px 24px;margin-top:16px}
.b-goals > .ch{padding:0;min-height:0;margin:0 0 4px}
.b-goals > .ch h2{font:500 15px/22px var(--sans);margin:0}
@media (min-width:1100px){#page-budgets .b-side > .card.b-goals{grid-column:1}}
@media (max-width:760px){#page-budgets .b-side > .card.b-goals{padding:16px;order:3;width:100%}}
.goals-row{padding:10px 0}
.goals-row + .goals-row{margin-top:2px}
.goals-row-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:500 13px/18px var(--sans);color:var(--ink)}
.goals-figure{font:400 12px/18px var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.goals-note{margin:6px 0 0;font-size:12px;line-height:16px}
.goals-auto{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;font:500 13px/18px var(--sans)}
.goals-auto .muted{font:400 12px/18px var(--sans)}
.goals-recap-title{margin:8px 0 4px;font:500 14px/20px var(--sans);color:var(--ink)}
.goals-facts{margin:0;padding-left:18px;font-size:13px;line-height:20px;color:var(--ink-2)}
.goals-facts li+li{margin-top:2px}
.szn-weeks{display:flex;gap:3px;margin-top:8px}
.szn-wk{width:6px;height:14px;flex:none;border-radius:var(--r-cell);background:var(--band)}
.szn-wk.plus{background:color-mix(in srgb,var(--pos-text) 70%,var(--band))}
.szn-wk.pause{background:var(--ink-4);opacity:.55}
.szn-wk.now{background:var(--data-3);opacity:.7}
html.dark .szn-wk.pause{opacity:.4}
/* nav dot: quiet unread hint, not a colour-coded alert, no rating, no FOMO */
.nav-goal-dot{position:absolute;top:6px;right:6px;background:var(--ink-3)}
@media (max-width:760px){.nav-goal-dot{top:4px;right:calc(50% - 20px)}}
/* crystallization: a category closed in plus gets a small quiet sparkle at the end of its slider track.
   Entrance is a plain transition (opacity/transform only), toggled once from JS via the .in class,
   never @keyframes: r9 keeps zero running CSS animations (check-r9 #7/R3). --t-mid is 0ms under
   prefers-reduced-motion (see :root), so the same rule is already instant for that case. */
.sl-crystal{position:absolute;right:2px;top:50%;width:8px;height:8px;transform:translateY(-50%) scale(1);pointer-events:none;
  background:color-mix(in srgb,var(--pos-text) 70%,transparent);
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);opacity:.85;
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.sl-crystal.in{opacity:0;transform:translateY(-50%) scale(.4)}
html.dark .sl-crystal{background:color-mix(in srgb,var(--pos-text) 85%,transparent)}
.budget-group-title > .budget-group-total{font:400 12px/22px var(--sans);color:var(--ink-3)}
@media (max-width:760px){
  /* the «Сверх лимита N $» status button keeps a 44px hit area without pushing the caption 24px down */
  #bRows .b-st .more{min-height:0;padding-block:0;line-height:20px;position:relative}
  #bRows .b-st .more::after{content:"";position:absolute;inset:-10px -4px -12px}
}
/* r14 verify: CSS the JS round asked for (js#1, js#4, js#11, js#23) */
@media (min-width:761px){
  #page-transactions .tx-sticky{top:var(--topbar-h,64px)}
  #page-transactions .txt tr.day > td{position:sticky;top:calc(var(--topbar-h,64px) + var(--tx-sticky-h,0px));z-index:3}
}
#cfChart .cfx.on + .cfv + .cfv::after{content:none}
#proBody .finding > b{display:block;margin-bottom:4px}
.pro-row{display:flex;align-items:center;gap:12px;width:calc(100% + 20px);min-height:44px;padding:6px 10px;margin:0 -10px;box-sizing:border-box;max-width:calc(100% + 20px);border:0;background:none;border-radius:var(--r-ctl);font:400 14px/20px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
a.pro-row{text-decoration:none}
.pro-row > span{flex:1 1 auto;min-width:0}
.pro-row > b.num{flex:none;font-weight:500;font-variant-numeric:tabular-nums;color:var(--neg-text)}
#proBody a.pro-row > b.num{color:var(--ink-2)}
.pro-row::after{content:"";flex:none;width:7px;height:7px;border-top:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3);transform:rotate(45deg);margin-right:4px}
@media (hover:hover){.pro-row:hover{background:var(--ctl-hover)}}
.pro-row:focus-visible{outline:2px solid var(--ink-3);outline-offset:1px}
@media (max-width:480px){
  /* css#11 follow-up: «в пределах лимитов 1 526 $» is wider than half the pocket and ran into «сверх 899 $» */
  .stack__pocket .pk-sub > .pk-key{min-width:0;white-space:nowrap}
  .stack__pocket .pk-sub > .pk-key:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  /* The selection label wraps in the space left by the Done button. */
  #page-transactions .sum-row{flex-wrap:wrap;row-gap:8px}
  #page-transactions #selAllZ{flex:1 1 0;min-width:0;margin-left:0;white-space:normal;text-align:left;line-height:18px}
}

/* R15: filter fields share the editor controls. Flatten only their layout so the
   two sticky actions stay in the sheet's scroll container, without moving DOM. */
body #fltSheet{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-content:start;scroll-padding-block:8px 64px}
#fltSheet > *{grid-column:1/-1}
#fltSheet .fac-fields{display:contents}
#fltSheet .fac-fields > *{grid-column:1/-1;min-width:0}
#fltSheet .fac-fields > label{gap:6px;padding:8px 4px;font:400 13px/18px var(--sans);color:var(--ink-2)}
#fltSheet .fac-fields > label:has([data-fac="min"]){grid-column:1}
#fltSheet .fac-fields > label:has([data-fac="max"]){grid-column:2}
#fltSheet .fac-cats{gap:0;padding:0 4px}
#fltSheet .fac-cats legend{padding:12px 8px 4px;font:400 12px/16px var(--sans);color:var(--ink-3)}
#fltSheet .fac-cats label{min-height:44px;gap:0;padding:0 8px;border-radius:var(--r-ctl);font:400 14px/20px var(--sans);color:var(--ink);cursor:pointer}
#fltSheet .fac-cats label:hover{background:var(--ctl-hover)}
#fltSheet .fac-cats input{flex:none;margin:0 12px 0 0}
#fltSheet .fs-h button{min-height:44px}
#fltSheet #facErr{padding:0 4px;color:var(--neg-text);font:400 12px/18px var(--sans)}
#fltSheet .fac-fields > button{position:sticky;bottom:4px;z-index:2;height:44px;min-height:44px;padding:4px 8px;margin-top:8px;white-space:normal;line-height:18px}
#fltSheet [data-fac-reset]{grid-column:1;background:var(--ctl)}
#fltSheet [data-fac-apply]{grid-column:2}
#fltSheet .fac-fields > button::before{content:"";position:absolute;inset:-8px -4px;z-index:-1;border-radius:inherit;background:var(--canvas)}
/* Paint the button on top of its opaque footer backing. */
#fltSheet [data-fac-apply]::before{background:linear-gradient(var(--key-top),var(--key-bot));inset:0}
@media (min-width:761px){
  body #fltSheet{bottom:16px;max-height:calc(100dvh - 32px);height:auto}
  body:not(.dr-sheet) .drill :is(.dr-flt,.dr-lists){max-width:none}
  body:not(.dr-sheet) .dr-op{grid-template-columns:32px minmax(0,1.4fr) minmax(0,1fr) 140px}
  body:not(.dr-sheet) .dr-op .op-m{display:contents}
  body:not(.dr-sheet) .dr-op .op-m > b{grid-column:2;grid-row:1;min-width:0}
  body:not(.dr-sheet) .dr-op .op-m > span{grid-column:3;grid-row:1;min-width:0}
  body:not(.dr-sheet) .dr-op .op-a{grid-column:4;grid-row:1}
}
@media (min-width:1111px){ /* r16 r2-css ux-ops-wide-gap: merchant takes the slack, category sits right next to the amount */
  #page-transactions table.txt td.c1{width:auto}
  #page-transactions .page-inner table.txt td.c2{width:268px;text-align:right;padding-right:24px}
  #page-transactions table.txt td.c3{width:170px}
}
#catPop{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}

/* R15: aligned budget rows. The status yields space before an action or value;
   history remains available to the live slider and its exact-entry editor. */
.b-limits{min-width:0;width:100%}
#bFree{margin-top:12px}
#bRows .b-main{align-content:start;grid-auto-rows:auto;row-gap:2px}
#bRows .b-top{grid-row:1;grid-column:1}
#bRows .sl{grid-row:2;grid-column:1;margin-top:0}
#bRows .b-st{min-width:0;flex-wrap:nowrap;align-items:baseline;white-space:nowrap;gap:0 10px}
#bRows .b-st > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0}
#bRows .b-st :is(.st-ov,.st-ok,[data-cover]),#bRows .lim-btn{flex:none}
#bRows .b-st .category-forecast{flex:1 1 0}
#bRows .b-st .st-ov{overflow:visible}
#bRows .b-st .more{white-space:nowrap}
#bRows .sl-history{font-size:12px;line-height:16px}

/* R15: small secondary surfaces. */
#rlCount{display:inline-block;font:400 14px/20px var(--sans);letter-spacing:0;color:var(--ink-3);vertical-align:middle}
#mRule .re-h ~ .re-h{margin-top:18px;padding-top:16px;box-shadow:0 -1px var(--well-deep)}
#mAcc button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
body button:disabled:where(:not(#syncBtn)){box-shadow:none}
#rcHelpPop{padding:14px;font:400 13px/20px var(--sans);max-height:224px!important;overflow:auto}
#rcPaper .paper .ln{display:grid;grid-template-columns:minmax(0,1fr) max-content 76px;align-items:baseline;gap:12px}
#rcPaper .paper .ln > span:first-child{display:contents}
#rcPaper .paper .ln .muted{grid-column:2;text-align:right;color:var(--ink-3);white-space:nowrap}
#rcPaper .paper .ln .num{grid-column:3;text-align:right;white-space:nowrap}
#rcPaper .paper .ln:last-child > b:first-child{grid-column:1/3}
#rcPaper [data-rc-unlink]{margin-left:10px;color:var(--neg-text);padding:8px 10px;min-height:44px;border-radius:var(--r-ctl)}
#rcPaper [data-rc-unlink]:hover{background:color-mix(in srgb,var(--neg-text) 8%,transparent)}

@media (max-width:760px){
  .search input{min-width:0}
  #fltSheet .fac-fields input:not([type="checkbox"]){font-size:16px;width:100%}
  #fltSheet .fac-cats label{min-height:48px;font-size:16px}
  .topbar-controls .per-btn{max-width:100%;min-width:44px}
  #perBtnLbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #page-budgets .b-side{display:contents}
  #page-budgets .b-side > .card:has(#bSum){order:-1;width:100%;padding:0}
  #page-budgets .b-side > .b-recurring{order:2;width:100%}
  #page-budgets #bWeek{display:none}
  #page-budgets .page-inner{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #bRows .b-st,#bRows .sl-history{margin-left:-42px}
  #bRows .b-st{gap:0 8px}
  #bRows .budget-group-title{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}
  #bRows .budget-group-title > span:first-child{grid-column:1;grid-row:1;white-space:nowrap;font-size:14px}
  #bRows .budget-group-title > .budget-group-total{grid-column:1/-1;grid-row:2;margin:0}
  #bRows .budget-group-title > [data-cover]{grid-column:2;grid-row:1;white-space:nowrap;padding-inline:8px;font-size:12px}
  #bRows .brow2:not(.free) .b-top{gap:2px}
  #bRows .brow2:not(.free) .b-fig{margin-bottom:0}
  body.dr-sheet .drill.sheet .dr-chips > *{flex:none}
  #mAcc .zm-body{grid-template-rows:auto minmax(0,1fr);align-content:start;min-height:0}
  #mAcc .zm-nav{flex-wrap:nowrap;overflow-x:auto;gap:6px;min-width:0;scrollbar-width:thin}
  #mAcc .zm-nav button{flex:none}
  #mRule .zm-body.single{padding-bottom:24px;scroll-padding-bottom:24px}
  #mRule .zm-foot{flex:none}
}
@media (pointer:coarse), (max-width:760px){
  .popover .opt{min-height:44px}
}
@media (pointer:coarse){
  .bul-nm,.bul-dr{position:relative}
  .bul-nm::before,.bul-dr::before{content:"";position:absolute;top:50%;bottom:auto;left:0;right:0;min-width:44px;height:max(100%,44px);transform:translateY(-50%)}
  .bul-dr::before{left:50%;right:auto;width:44px;transform:translate(-50%,-50%)}
}

/* ===================== R16 r1-css (Claude): layout/ui findings round 1 ===================== */
/* L1/M1: the touch hit area of the overspend pill lives on ::after, so it never reuses the pocket's
   6px status dot (::before). The pocket pill is the positioning box, not the whole pocket card. */
@media (pointer:coarse){
  .pill.over{position:relative}
  .stack__pocket .pill.over.over{position:relative;inset:auto}
  .pill.over::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);min-width:44px;transform:translateY(-50%);background:none}
}
/* L2/L8: the «Что изменилось» comparison line wraps at every width, no clip, no negative margin. */
#page-overview .ov-delta .ch h2,#page-overview .ov-delta .ch h2 .tail{white-space:normal;overflow-wrap:anywhere}
#page-overview .ov-delta .ch h2 .tail{margin-left:0;clip-path:none;text-wrap:pretty}
/* L3/ux-02/M3/W11: month summary captions wrap inside their own cell. */
.cf-nums > div{min-width:0}
.cf-nums .s{white-space:normal;text-wrap:pretty}
.cf-nums .v{white-space:nowrap}
/* phone: «Итог месяца» gets a full row (its caption is the longest), «Переводы» and «Пополнения» pair up */
@media (max-width:760px){
  .cf-nums > div:last-child{grid-column:auto}
  .cf-nums > div:nth-child(4){grid-column:1/-1}
  .cf-nums > div:nth-child(n+5) .v{font-size:20px}
}
@media (max-width:380px){
  .cf-nums > div:not(.cf-sel){padding:4px 8px}
  .cf-nums .v,.cf-nums > div:nth-child(n+5) .v{font-size:19px}
}
/* L4/ux-04/M5/W3: the forecast note gets its own full-width second line, never an ellipsis.
   Line 1 keeps the figure, «% лимита» / «в день» and the «Перекрыть» chip. */
#bRows .b-st{flex-wrap:wrap;row-gap:0}
#bRows .b-st .category-forecast{order:2;flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip}
#bRows .b-st :is(.st-ov,.st-ok){overflow:visible;text-overflow:clip}
/* L5/M4/W2: the period stays readable; the page title gives way instead. */
@media (max-width:760px){
  .topbar-controls .per-wrap{flex:none;max-width:none}
  .topbar-controls .per-btn{max-width:none}
  #perBtnLbl{overflow:visible;text-overflow:clip}
  .brand-section{min-width:0}
}
/* L10: KPI strip on phone. The chevron no longer sets the label row height, and the review tile
   uses the strip surface like its neighbours (accent is the chevron), so the 2x2 grid shares one rhythm. */
@media (max-width:760px){
  #ovTiles .tile-top{height:auto;min-height:16px;align-items:flex-start}
  #ovTiles .tile-ic{width:16px;height:16px;overflow:visible}
}
/* L7/W15: «Что изменилось» rows. Row 1: dot, name, value on one line box. Row 2: from→to and the
   diverging bar (fixed width, so the zero axis lines up down the list). Dot starts at the card inset;
   the chevron sits inside the selection ring. */
#ovDelta .dv{grid-template-columns:8px minmax(0,1fr) minmax(120px,44%) 64px;column-gap:10px;row-gap:4px;align-items:center;padding-left:10px;padding-right:26px}
#ovDelta .dv .cat-point{grid-column:1;grid-row:1;align-self:center}
#ovDelta .dv .nm{grid-column:2/4;grid-row:1}
#ovDelta .dv .v{grid-column:4;grid-row:1;align-self:baseline;justify-self:end;text-align:right;white-space:nowrap}
#ovDelta .dv .dv-values{grid-column:2;grid-row:2}
#ovDelta .dv .delta-scale{grid-column:3/5;grid-row:2;margin-top:0;align-self:center}
#ovDelta .dv::after{right:10px}
@media (min-width:761px){ /* Both cards share a heading height; delta rows fill the remaining space. */
  .ov-r3 > :is(.ov-cats,.ov-delta) > .ch{min-height:78px;align-items:flex-start}
  .ov-r3 > .ov-delta{align-self:stretch;display:flex;flex-direction:column}
  .ov-delta > #ovDelta{flex:1 1 auto;display:flex;flex-direction:column}
  #ovDelta > .dv{flex:1 1 auto;align-content:center}
}
/* phone: the from→to text needs the width, so the bar takes its own line under it (still fixed width). */
@media (max-width:760px){
  /* r16 r2-css L12: two lines per row; the bar sits under the value in a fixed column, zero axis aligned */
  #ovDelta .dv{grid-template-columns:8px minmax(0,1fr) 112px}
  #ovDelta .dv .nm{grid-column:2}
  #ovDelta .dv .v{grid-column:3}
  #ovDelta .dv .dv-values{grid-column:2;grid-row:2;white-space:nowrap}
  #ovDelta .dv .delta-scale{grid-column:3;grid-row:2;align-self:center}
}
/* L5/M4/W2 (with r1-js setPerBtn): desktop shows the full period, phone the short one. */
#perBtnLbl .per-s{display:none}
@media (min-width:761px){
  .topbar-controls .per-btn{min-width:max-content;white-space:nowrap}
}
@media (max-width:760px){
  #perBtnLbl:has(.per-s) .per-l{display:none}
  #perBtnLbl .per-s{display:inline}
}
/* L9: both desktop group headers share one height whether or not they carry «Перераспределить». */
@media (min-width:761px){
  #bRows .budget-group-title{min-height:calc(32px + 28px);align-items:center} /* border-box: 32px button line + 20px/8px padding */
}
/* L11/ux-12/W13: phone operations subline. The time is a fixed tabular column (its text node becomes an
   anonymous grid item), the category starts at the same x on every row and wraps by words, never «…». */
@media (max-width:760px){
  .txt .op-m > span{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:4px;align-items:baseline;font-variant-numeric:tabular-nums;white-space:normal;overflow:visible}
  .txt .op-m > span > .sub-cat{grid-column:2;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;text-wrap:pretty}
  .txt .op-m > span:has(> .sub-date){grid-template-columns:46px 40px minmax(0,1fr)}
  .txt .op-m > span > .sub-date{overflow:visible;text-overflow:clip;white-space:nowrap}
  #opBody .op-m > span > .sub-date{margin-right:0}
  .txt .op-m > span:has(> .sub-date) > .sub-cat{grid-column:1 / -1}
  .txt td.c3 small{white-space:nowrap}
}
/* L11/W13/W19 contract with JS: when a category element carries data-short (first word of catLabel),
   phones show that short label on one line; the full name stays in the DOM text for title/aria. Inert until JS sets it. */
@media (max-width:760px){
  :is(.txt .sub-cat,.family-cat)[data-short]{font-size:0;white-space:nowrap}
  :is(.txt .sub-cat,.family-cat)[data-short]::before{content:attr(data-short);font-size:13px}
}
/* W4: the member subtitle wraps inside its own column instead of painting under «Изменить». */
#page-family .setrow .mcell .d{white-space:normal;overflow-wrap:anywhere}
/* L17/W19/L11 (family): one left inset per card, category never collapses to «П..», hold note under the amount. */
@media (max-width:760px){
  #page-family .family-note{padding:0!important}
  #famShared > [data-family-more]{margin-left:0;margin-right:0}
}
@media (min-width:761px){ /* r16 r2-css W5: note, rows and «Ещё» share the card title inset */
  #page-family .family-note{padding:0 24px!important}
  #famShared > [data-family-more]{margin-left:24px;margin-right:24px}
}
#page-family .page-actions button:has(>.proto-note),#page-family .btn-ghost:has(>.proto-note){align-items:flex-start;text-align:left}
@media (max-width:760px){
  #famShared .family-op{grid-template-columns:32px minmax(0,1fr) auto;column-gap:12px;padding-left:0;padding-right:0}
  #famShared .family-op > div{min-width:0}
  #famShared .family-name{overflow:hidden;text-overflow:ellipsis}
  #famShared .family-amt{text-align:right;white-space:nowrap}
  #famShared .family-amt small{display:block;font-size:12px;line-height:16px;color:var(--ink-3)}
  #famShared .family-meta{flex-wrap:wrap;column-gap:0}
  #famShared .family-meta > .family-cat{flex:1 0 100%;min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
  #famShared .family-meta > span[aria-hidden="true"]{display:none}
  #famShared .family-meta:has(>.family-cat[data-short]){flex-wrap:nowrap}
  #famShared .family-meta:has(>.family-cat[data-short]) > .family-cat{flex:none}
  #famShared .family-meta:has(>.family-cat[data-short]) > span[aria-hidden="true"]{display:inline;white-space:pre}
}
@media (max-width:760px){ #page-family .card .setrow{padding-left:0;padding-right:0} }
/* M16: phone filter sheet keeps the glass edge but a near-opaque fill, so row amounts do not ghost through. */
@media (max-width:760px){
  .flt-sheet,body #fltSheet{background:linear-gradient(180deg,color-mix(in srgb,var(--glass-solid) 96%,transparent),color-mix(in srgb,var(--glass-solid) 92%,transparent))}
}
/* M11: 16px text fields on phone so iOS does not zoom the page on focus. */
@media (max-width:760px){
  .search input,input[type=search],input[type=text],input[type=number],input[type=email],input[type=date],textarea{font-size:16px}
}
/* M10: phone touch targets. Buttons grow to 44px; small inline controls get a transparent 44px hit pseudo. */
@media (pointer:coarse),(max-width:760px){
  .btn-ghost,.btn-brand,.btn-dark,.btn-ghost.sm{min-height:44px}
  .search{min-height:44px}
  #opSearch{align-self:stretch}
  #bRows .b-st .more{position:relative;min-width:44px}
  #bRows .b-st .more::before,.mr-n::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
  .mr-n{position:relative}
}
/* W16: stacked phone modal footers centre every button label, «Отмена» included. */
@media (max-width:480px){ .zm-foot:has(>button:nth-child(3)) > button{justify-content:center} }
/* W18 (row part): the «Поднять лимит» action lines up with the first label line.
   Not hiding the tab bar over the drill sheet: r15 r1-css #8 keeps it stacked above the sheet on purpose (test-r8-drill). */
@media (max-width:760px){
  #drill .dr-ovrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline}
  #drill .dr-ovrow > .dr-ovcat{grid-column:1;grid-row:1 / span 2;display:block;min-width:0;margin:0;text-align:left;white-space:normal;text-wrap:pretty;align-self:start}
  #drill .dr-ovrow > .num{grid-column:2;grid-row:1}
  #drill .dr-ovrow > .dr-raise{grid-column:2;grid-row:2;justify-self:end;margin:0;padding:0;min-height:32px}
  #drill .dr-ovrow:has(> .dr-ovdetail) > .dr-ovcat{grid-row:1}
  #drill .dr-ovrow > .dr-ovdetail{grid-column:1 / -1;grid-row:2;min-width:0}
  #drill .dr-ovrow > .dr-ovdetail .dr-raise{display:inline-flex;align-items:center;min-height:32px;white-space:nowrap}
}
/* W15 (op sheet): value and action pairs share one centre line («Не найден» / «Привязать чек»). */
.row2{align-items:center}
#bRecurring .row2{align-items:baseline}
/* W16: account tabs wrap on phone; every section is visible without a hidden scroll. */
@media (max-width:760px){ #mAcc .zm-nav{flex-wrap:wrap;overflow:visible;gap:6px;min-width:0} }
/* L5: account tabs share a fixed modal height; only the tab content scrolls. */
#mAcc > .zm{height:min(620px,86dvh);max-height:86dvh}
#mAcc .zm-head,#mAcc .account-preferences{flex:none}
#mAcc .zm-main{min-height:0}
@media (max-width:760px){#mAcc > .zm{height:min(680px,92dvh);max-height:92dvh}}
#mAcc button:disabled{opacity:1;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--well-deep);background:var(--panel)}
/* W1: desktop selection bar stays one line; it sizes to its content inside the existing max-width guard. */
.selbar{width:max-content}
.selbar .sel-n,.selbar .sel-n > *{white-space:nowrap}
.selbar .sel-a{flex-wrap:nowrap}
.selbar .sel-a .btn-ghost{white-space:nowrap}
/* W6 (receipts): the «Итого» amount spans the qty and amount columns, so it ends on the item amounts' edge. */
#rcPaper .paper .ln:last-child > b:first-child{grid-column:1/2}
#rcPaper .paper .ln:last-child .num{grid-column:2/4;text-align:right}
/* W5: the receipts help popover floats over the page; it no longer pushes the list down. */
@media (min-width:761px){ #rcHelpPop{max-height:min(420px,70vh)!important} }
/* W11: rule editor merchant row gives the value field the width, not the operator. */
.re-row:has(#reMo){grid-template-columns:110px 104px minmax(0,1fr)} /* r16 r2-css W10: same 110px label column as every row */
#reMo{width:104px;padding:0 24px 0 10px}
@media (max-width:760px){ .re-row:has(#reMo){grid-template-columns:104px minmax(0,1fr)} }
/* W12: settings rows with an action group stack on phone; the proto-note sits beside its label. */
@media (max-width:760px){
  .setrow:has(>.page-actions),.kv:has(>.page-actions){grid-template-columns:minmax(0,1fr)}
  .setrow:has(>.page-actions)>:last-child,.kv:has(>.page-actions)>:last-child{justify-self:start}
  .setrow>.page-actions{flex-wrap:wrap}
}
@media (max-width:480px){
  .ch button:has(>.proto-note){flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap;margin-left:auto}
}
/* W14: phone rules page. One 16px inset (the row's), switch on the content edge, counters one per line. */
@media (max-width:760px){
  #page-rules .card:has(>#rlList){padding:0;overflow:hidden}
  #page-rules #rlList .empty-s{padding:16px}
  .single .rl{grid-template-columns:minmax(0,1fr) auto}
  #page-rules .rules-pg .back{margin-bottom:0}
  #page-rules .page-head:not(:has(#rlNew:not([hidden]))){display:none}
  #page-rules .rl-hint{margin-top:0}
}
/* L3: one month keeps the narrow card; longer periods use two calendar columns. */
@media (min-width:1101px){
  .an-r1{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .an-r1:has(#anCal .cal-m:nth-child(2)){grid-template-columns:minmax(480px,5fr) minmax(0,7fr)}
  #anCal .cal-wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  #anCal .cal-wrap:has(>.cal-m:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
  #anCal .cal-m{min-width:0;max-width:none}
  #anCal .cal-g{grid-template-columns:repeat(7,minmax(0,56px));justify-content:start}
}
/* The anonymous category text occupies the flexible grid column; the count keeps its own gutter. */
#fltSheet .fac-cats label{display:grid;grid-template-columns:30px minmax(0,1fr) auto;white-space:normal}
#fltSheet .fac-cats input{margin:0}
#fltSheet .fac-cats label .fs-n{flex:none;padding-left:12px;white-space:nowrap}
@media (min-width:761px){ body #fltSheet{width:min(476px,calc(100vw - 32px))!important} } /* JS openFlt sets 420px inline; its left clamp reads offsetWidth */
/* L12 (CSS part): pace chart subtitle facts wrap as whole units; compact segment control on phone. */
.month-sub span{white-space:nowrap}
/* M10 (budgets): category name and spent figure are 20px text buttons; a padding/negative-margin pair
   makes their tap box 44px tall without moving the row (overflow:hidden would clip a pseudo hit area). */
@media (pointer:coarse),(max-width:760px){
  #page-budgets button.b-open{padding-block:12px;margin-block:-12px}
  .ov-page .more{min-width:44px;justify-content:center}
}
/* L12: phone pace-chart segment control at the compact 30px desktop size; a transparent pseudo keeps the 44px target. */
@media (max-width:520px){
  #ovMonth .month-top > .seg{height:36px;min-height:36px;padding:3px}
  #ovMonth .month-top > .seg > button{position:relative;height:30px;min-height:30px;padding:0 12px}
  #ovMonth .month-top > .seg > button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
/* L13: an income row's memo takes its own line under the meta instead of being cut. */
#page-cashflow .ifrow .op-m > span{flex-wrap:wrap}
#page-cashflow .ifrow .op-m > span > .sub-t + .sub-t{flex:1 0 100%;min-width:0;margin-left:0;white-space:normal;overflow:visible;text-overflow:clip}
#page-cashflow .ifrow .op-m > span > .sub-t + .sub-t::before{content:none}
/* M17: keyboard focus on a slider thumb keeps «потрачено X из [limit]» visible; the live limit button is
   tinted as the value readout (the bubble stays per SLIDER-SPEC 3.6, drawn over the row, not replacing it). */
.b-main:has(.sl-th.kf,.sl.is-drag) .lim-btn{background:var(--ctl-hover);box-shadow:var(--e1)}
/* M5: on phone the «% лимита» / «в среднем … в месяц» fragments wrap too, never «…». */
@media (max-width:760px){
  :is(#bRows,#bFree) .b-st > :is(.muted,.warn-t,.category-forecast){flex:0 1 auto;white-space:normal;overflow:visible;text-overflow:clip}
  #bFree .b-st{flex-wrap:wrap}
}

/* r16 r2: markup hooks the r1-js round did not emit (css NOTES#11, #15; js NOTES#6, #8) */
.rl-s .rl-mv{white-space:nowrap}
.txt td.c3 small.amt-hold > span{white-space:nowrap}
@media (max-width:760px){
  .rl-s > span{display:block}
  .rl-s .rl-mv > span[aria-hidden]{display:none}
  small.amt-hold{display:flex;flex-direction:row;justify-content:flex-end;align-items:baseline;gap:3px;white-space:nowrap}
  small.amt-hold > span{white-space:nowrap}
  #page-transactions .txt tr.day{position:sticky;top:var(--topbar-h,60px);z-index:3}
}
body:not(.dr-sheet) .drill .dr-lists:has(.dr-cols.two,.dr-col + .dr-col){max-width:none} /* r16 r2-css M5: the old selector matched nothing */
/* r16 r2: on phone .b-split is a flex column; align-items:start let a short card (Семья → Общие операции) shrink to its content, 22px narrower than its neighbour */
@media (max-width:760px){ .b-split,#page-budgets .b-split{align-items:stretch} }
/* r16 r2 (css NOTES#9): the «в прототипе недоступно» captions left the buttons (now a title); keep the disabled buttons visibly buttons */
:is(#page-family,#page-integrations) button:disabled{opacity:1;color:var(--ink-3);background:var(--panel);box-shadow:inset 0 0 0 1px var(--well-deep);cursor:not-allowed}

/* ===== r16 r2-css: layout round 2 (CSS-only part; JS/template needs are in r16/r2-css-NOTES.md) ===== */
/* L3: «в обработке» sits above the local amount in the fixed 140px column, as on phone. */
:is(.ov-ops,.dr-op) small.amt-hold{display:flex;flex-direction:column;align-items:flex-end;gap:0;overflow:visible;text-overflow:clip}
:is(.ov-ops,.dr-op) small.amt-hold > span{white-space:nowrap}
:is(.ov-ops,.dr-op) .op-a{min-width:0}
.ov-ops .op-a small:not(.amt-hold){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* L5: family hold note under the amount at every width (same pattern as .op-a small). */
#famShared .family-amt{text-align:right;white-space:nowrap}
#famShared .family-amt small{display:block;font-size:12px;line-height:16px;font-weight:400;color:var(--ink-3)}
/* L4/M9: the notch has a fixed depth; it no longer scales with the pocket height (was 25% of it). */
.stack__pocket{
  --notch-h:44px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300C330 0 347 10 358 37C375 81 426 110 500 110C574 110 625 81 642 37C653 10 670 0 700 0H1000V110H0Z'/%3E%3C/svg%3E") 0 0/100% var(--notch-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--notch-h) - 1px)/100% calc(100% - var(--notch-h) + 1px) no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300C330 0 347 10 358 37C375 81 426 110 500 110C574 110 625 81 642 37C653 10 670 0 700 0H1000V110H0Z'/%3E%3C/svg%3E") 0 0/100% var(--notch-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--notch-h) - 1px)/100% calc(100% - var(--notch-h) + 1px) no-repeat;
}
@media (max-width:480px){.stack__pocket{--notch-h:32px}}
/* L8: the overspend pill follows the pocket's own width, not the viewport. */
.stack__pocket{container-type:inline-size}
@container (max-width:400px){
  .stack__pocket .month-fig{flex-direction:column;align-items:flex-start;gap:8px;flex-wrap:wrap}
  .stack__pocket .month-fig .pill.over{white-space:nowrap;margin:0;text-align:left;align-self:flex-start}
}
/* L8: «a → b» never breaks mid-expression; the text column cannot shrink under it. */
@media (min-width:761px){
  #ovDelta .dv{grid-template-columns:8px minmax(max-content,1fr) minmax(96px,40%) 64px}
  #ovDelta .dv .dv-values{white-space:nowrap}
}
/* L11: the transfers card gets the same bottom inset as its neighbours. */
@media (min-width:761px){#cfList{padding-bottom:20px}}
/* L16: no orphan «сен» / «679 $» in the budgets summary and the cover sheet. */
.cover-hint,#coverNote,#page-budgets .s{text-wrap:pretty}
/* L17: «К разбору» is flat on every screen; linked tiles show a hover / focus state instead of a raised card. */
#ovTiles .tile--act{background:transparent;box-shadow:none}
#ovTiles .tile--act .tile-ic{color:var(--ink-2)}
#ovTiles .tile{border-radius:var(--r-card);transition:background-color var(--t-fast),box-shadow var(--t-fast)}
#ovTiles .tile:hover{background:var(--ctl)}
#ovTiles .tile:focus-visible{background:var(--ctl);outline:2px solid var(--focus) !important;outline-offset:-2px !important}
/* r22 C2/U3: a pressed tile stays inset; the review tile retains its existing resting material. */
#ovTiles .tile[aria-expanded="true"]{background:var(--ctl);box-shadow:var(--inset)}
/* M1/M4: gap between the overspend pill and the split bar; the pill wins where hit areas meet. */
.stack__pocket .pill.over{position:relative;inset:auto;z-index:1}
@media (pointer:coarse){.bul{min-height:44px}}
/* M10: the footer «Открыть в Операциях» is styled like the header chip. */
.dr-foot .dr-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
@media (max-width:760px){.dr-foot .dr-go.more{padding-inline:10px}}
/* W3: on desktop the toast stacks above the selection bar on its axis instead of covering its right end. */
@media (min-width:701px){
  body.selmode #zToast{bottom:calc(24px + var(--selbar-h,52px) + 12px);left:var(--bulk-center,50%);right:auto;transform:translateX(-50%)}
  body.selmode #zToast:not([hidden]){transform:translateX(-50%)}
}
/* W10: headings of the rule editor are sentence case, not a shouted template label. */
#mRule .re-h{text-transform:none;letter-spacing:0;font-size:13px}
/* W13/L13: «Фильтры» is icon-only on phone, so the full search placeholder fits. */
@media (max-width:760px){
  #fltBtn.flt-btn{width:44px;min-width:44px;padding:0;justify-content:center;position:relative}
  #fltBtn.flt-btn > span{display:none}
  #fltBtn.flt-btn.on::after{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:var(--r-dot);background:var(--brand-orange)}
  .search input{text-overflow:ellipsis}
  #opChips .op-seg::-webkit-scrollbar{display:none}
}
/* W14: receipts tabs are one scrolling row on phone. */
@media (max-width:760px){
  #rcChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #rcChips::-webkit-scrollbar{display:none}
  #rcChips > *{flex:none;scroll-snap-align:start}
}
/* ux-ops-wide-gap: category content hugs the amount column; a hover band keeps the eye on one row. */
@media (min-width:1111px){
  #page-transactions .txt td.c2 > *{margin-left:auto}
  #page-transactions .txt tr.r:not(.sel):hover td{background:var(--band)}
}
.stack__pocket .month-fig{margin-bottom:8px} /* r16 r2-css M1/L8: the pill never touches the split bar */
/* r16 r2-claude ux-r2-03: with no recurring rows the summary takes the whole row, no void on the right */
@media (min-width:1100px){
  #page-budgets .b-side:not(:has(> .b-recurring:not([hidden]))){grid-template-columns:minmax(0,1fr)}
}
#page-budgets .b-side > .b-recurring[hidden]{display:none}
#page-budgets .nw{white-space:nowrap} /* r16 r2-claude L16c */
@media (min-width:761px){#page-budgets #bWeek.weekday-summary{padding-left:20px;padding-right:20px}} /* r16 r2-claude: weekday line on the same 40px inset as the tiles */
/* R18: table and controls use the full page width, with a shared amount inset. */
@media (min-width:1025px){
  #page-transactions{--op-amount-inset:80px} /* card padding 12 + trailing control 44 + amount padding 24 */
  #page-transactions :is(.page-head,.tx-sticky,.card:has(> .txt)){width:100%}
  #page-transactions .tx-sticky{margin-inline:0;padding-inline:0}
  #page-transactions .page-head,#page-transactions .sum-row{padding-right:var(--op-amount-inset)}
}
@media (min-width:761px){
  #page-transactions .txt tr.day .dh-n{white-space:normal;line-height:16px;margin-right:8px}
}
/* Leave the two-row tablet header at 761-1110px intact. */
@media (min-width:1111px){
  body header.app-topbar{display:grid;grid-template-columns:1fr auto 1fr}
  header.app-topbar > .brand-section{justify-self:start}
  header.app-topbar > .topbar-controls{justify-self:end}
}
.lim-btn .ovr-tag.ovr-tag{margin-left:4px;font:500 12px/1 var(--sans);color:var(--ink-2)}
@media (max-width:760px){
  /* Fallback for the More sheet; JS still owns toast placement for other overlays. */
  body.ms-on #zToast{top:calc(var(--topbar-h,60px) + 12px)!important;bottom:auto!important}
}
@media (max-width:480px){
  #rcList .rcrow{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"icon title amount" "icon meta meta";gap:4px 8px;margin-inline:4px;padding:10px 8px}
  #rcList .rcrow > .catic{grid-area:icon;align-self:start}
  #rcList .rcrow > .op-m{display:contents}
  #rcList .rcrow .op-m > b{grid-area:title;min-width:0;white-space:normal;overflow-wrap:anywhere}
  #rcList .rcrow .op-m > span{grid-area:meta;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #rcList .rcrow > .op-a{grid-area:amount;min-width:0;white-space:nowrap;align-self:start}
}

/* R18 CSS review: keep empty cards compact and use the existing interactive surfaces. */
@media (min-width:761px){
  .ov-r3 > .ov-delta:has(.empty-s){align-self:start}
}
.family-op{border-radius:var(--r-row);transition:background-color var(--t-fast)}
.family-op:hover,.family-op:focus-visible{background:var(--ctl)}
.family-amt{font-variant-numeric:tabular-nums}
#proBody .finding:has(> b:only-child){border-top:0;box-shadow:none}
#proBody .finding:has(> b:only-child) b{font-weight:400;color:var(--ink-3);font-size:13px}

#rcCandidates .rc-bind,#rcPanel .rc-bind,#rcPaper .rc-bind{width:auto;align-self:flex-start;justify-content:center}
#rcPaper .paper > .page-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#rcPaper .paper > .page-actions > .more{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin:0}

@media (max-width:760px){
  #drill .dr-flt{padding-inline:16px;scroll-padding-inline:16px}
  /* Keep the CSS layout authoritative when the template supplies mobile fallbacks. */
  #page-transactions .page-inner > .card > table.txt{table-layout:auto}
  #page-transactions .page-inner > .card > table.txt td.c1{width:100%}
  #page-transactions .page-inner > .card > table.txt td.c3{width:1%;padding-right:16px}
  .txt .op-m > span > .sub-cat{min-width:0;overflow:hidden;text-overflow:ellipsis}
  body.selmode .txt tr.day:has(.day-content) td.c0{display:none}
  /* Explicit day cells retain the 44px selection track so the amount column stays aligned. */
  body.selmode #page-transactions .txt tr.day > .day-l{padding-left:8px;text-indent:-44px}
  #page-transactions .txt .day-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 8px;white-space:normal}
  #page-transactions .txt #opBody .day-meta .dh-n{white-space:nowrap}
  #page-transactions .txt .day-meta-cell .dh-n{flex-basis:100%;margin-right:0}
  #page-transactions .txt .day-band{padding-right:16px}
  #rcPaper .paper > .page-actions > .more{min-height:44px}
  .stack__pocket .pk-sub{display:flex;flex-wrap:wrap;gap:4px 12px;white-space:normal}
  .stack__pocket .pk-sub > .pk-key{flex:none;white-space:nowrap}
  .stack__pocket .pk-sub > span:not(.pk-key){flex:1 0 100%;white-space:normal;text-wrap:balance}
}

/* R18 r3: drill alignment and quiet secondary controls. */
#drill .dr-periods{margin:0 var(--pad-card) 8px}
@media (min-width:761px){
  #drill .dr-tops .dr-ovrow{max-width:none;grid-template-columns:minmax(0,1fr) auto}
  #drill .dr-tops:has(.dr-ovrow)>.finding{padding-inline:0}
}
.pending-legend a{color:inherit;text-decoration:none;font:inherit}
.pending-legend a:hover{color:var(--ink)}
/* The template defines these states after the stylesheets. */
#cfList .ifrow.fresh,body .ifrow.fresh{outline:none;border-radius:var(--r-row,10px)}
/* r22 C1/U5: share the Analytics freshness cue with the account figures. */
#page-analytics #anFees.fresh,#ovAcc .fresh{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r-sub)}
#opPanel .p-sec:has(>.cat-btn){display:flex;flex-direction:column;gap:12px}
#opPanel .p-sec:has(>.cat-btn)>:is(h3,p,.op-exclude){margin:0}
#opPanel .cat-btn{min-height:44px;height:auto;padding:10px 12px;border:0;background:var(--data-2);color:var(--data-text);box-shadow:var(--e1);justify-content:flex-start}
#opPanel .cat-btn>span:last-of-type{min-width:0;white-space:normal;text-align:left}
#opPanel .cat-btn::after{content:"";flex:none;width:6px;height:6px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
#opPanel [data-reviewed]{align-self:flex-start;min-height:44px;padding:0 10px;background:transparent;color:var(--ink-2);box-shadow:none}
#opPanel [data-reviewed]:hover{background:var(--ctl-hover);color:var(--ink)}
@media (max-width:760px){
  #page-budgets .b-side .s .nw{white-space:normal}
  #page-budgets .b-side .s:has(>.nw){text-wrap:balance}
  body.dr-sheet header.app-topbar nav.nav-pill-container,
  body.dr-sheet.selmode:not(:has(#page-transactions.active)) header.app-topbar nav.nav-pill-container{
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
    transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;
  }
  #drill .dr-periods{margin-inline:16px}
  /* Keep the search on the same inset when JS adds the compact Filters button. */
  #drill .dr-flt>.dr-q{order:-1}
}
@media (max-width:430px){
  /* Three 16px spines and a shallower pocket retain the stack while saving 72px. */
  .stack{--pk-off:48px}
  .stack__card{padding-top:1px}
  .stack__card--uta{top:16px}
  .stack__card--bybit{top:32px}
  .stack__pocket{--notch-h:12px;padding-top:18px;padding-bottom:8px}
}

/* ==================== r23: approved CSS tasks ==================== */
/* C-01: only the light surface ladder changes. The control token stays intact
   because the shared navigation and budget slider materials also read it. */
:root{--surface-border:1px solid var(--panel-edge);--surface-shadow:none;--panel-control:var(--panel-2)}
:root.dark,:root[data-theme="dark"]{--surface-border:0;--surface-shadow:var(--e0);--panel-control:var(--ctl)}
@media (prefers-color-scheme:dark){
  :root:not(.light):not([data-theme="light"]){--surface-border:0;--surface-shadow:var(--e0);--panel-control:var(--ctl)}
}
body .page .card,body .page .card:hover,body #ovAcc.card,body #opPanel.panel{
  border:var(--surface-border);box-shadow:var(--surface-shadow)
}
body .page .card :is(.btn-ghost,.more:not(a),.chip:not([aria-pressed="true"]),input:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
body #ovAcc .acc__sync,body .page .card .lim-btn{background-color:var(--panel-control)}
body #page-budgets :is([data-cover],.lim-btn){background-color:var(--panel-control)}
body .page .card :is(.btn-ghost,.more:not(a),.chip):hover{background-color:var(--ctl-press)}

/* C-02: the within-limit fill and overspend tails have local tokens. Budget
   thumb/track selectors and their inherited colour tokens are not modified. */
.split{--data-1:var(--category-within);--over:var(--category-over)}
.split__seg--over{box-shadow:none}
#ovCats .bt .f{background:var(--category-within);box-shadow:none}
#ovCats .bt .o{background:var(--category-over);box-shadow:none}
#ovCats .cat-point,#ovDelta .cat-point{background:var(--ink-4)!important}
#ovCats .bul-meta .category-remaining.neg{color:var(--ink)}
#ovCats .category-remaining.neg :is(.num,.neg){color:var(--neg-text)}

/* C-03: signed figures carry the delta; the bars are monochrome. */
#ovDelta .delta-scale i,#ovDelta .dt :is(.up,.dn){background:var(--ink-4)}
#ovDelta .dv .v{color:var(--ink)}
#ovDelta .dv .v.muted,#ovDelta .dv .v.pos{color:var(--ink-2)}

/* C-05 / J-05: compact account watchlist; transfer details retain their
   original buttons, focus targets and expandable content. */
#ovAcc.acc{padding:14px 20px}
#ovAcc .acc__head{margin-bottom:10px;gap:10px}
#ovAcc .acc__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
#ovAcc :is(.acc__list,.acc__watchlist){margin:0;padding:0;box-shadow:none;list-style:none;min-width:0}
#ovAcc :is(.acc__row,.acc__account){display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:5px 0}
#ovAcc :is(.acc__icon,.acc__ic){display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-dot);background:var(--panel-2);color:var(--ink-2);flex:none}
#ovAcc :is(.acc__icon,.acc__ic) svg{width:16px;height:16px}
#ovAcc :is(.acc__rname,.acc__name){min-width:0;margin:0;font:400 14px/20px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ovAcc :is(.acc__rrole,.acc__note){display:block;max-width:none;margin:0;font:400 12px/18px var(--sans);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ovAcc :is(.acc__rval,.acc__bal){margin:0;font:460 14px/20px var(--sans);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
#ovAcc .acc__rval--na{font-size:12px;font-weight:400;color:var(--ink-3);max-width:none}
#ovAcc .acc__moves{padding:0;box-shadow:none;min-width:0}
#ovAcc .acc__movesum{padding:4px 8px;font-size:13px;line-height:18px}
#ovAcc .acc__mv{min-height:40px;padding:3px 8px;font-size:13px;line-height:18px}
#ovAcc .acc__mvd{font-size:12px;line-height:16px}
#ovAcc .acc__moves>.panel__link{padding-top:4px}
#ovAcc .acc__status{font-size:12px;color:var(--ink-2)}

/* C-06 / C-07: four equal tiles; only data-backed markup creates badges. */
body #ovTiles.ov-tiles{grid-area:auto;grid-column:1/-1;padding:0;gap:12px;background:none;box-shadow:none;align-items:stretch;grid-auto-rows:1fr}
body #ovTiles .tile{padding:16px 18px;gap:6px;background:var(--panel);border:var(--surface-border);box-shadow:none;align-content:start;min-width:0}
body #ovTiles .tile:is(:hover,[aria-expanded="true"]){background:var(--panel-control);box-shadow:none}
#ovTiles .tile .tile-lbl{font:400 12px/16px var(--sans);color:var(--ink-2)}
#ovTiles .tile .tile-val{font:420 28px/34px var(--sans);font-variant-numeric:tabular-nums lining-nums}
.kpi-delta,.tile-delta{display:inline-flex;align-items:center;justify-self:start;gap:4px;width:fit-content;max-width:100%;padding:3px 7px;border-radius:var(--r-cap);background:var(--panel-2);color:var(--ink-2);font:400 11px/16px var(--sans);font-variant-numeric:tabular-nums lining-nums}
.kpi-delta.pos,.tile-delta.pos{background:color-mix(in srgb,var(--pos-text) 9%,var(--panel));color:var(--pos-text)}
.kpi-delta.neg,.tile-delta.neg{background:color-mix(in srgb,var(--neg-text) 8%,var(--panel));color:var(--neg-text)}
.kpi-delta.down{background:color-mix(in srgb,var(--pos-text) 9%,var(--panel));color:var(--pos-text)}
.kpi-delta.up{background:var(--panel-2);color:var(--ink-2)}
#ovTiles .tile-note{font:400 12px/18px var(--sans);color:var(--ink-2)}
#ovTiles .review-count{padding:0;background:none;color:inherit;font:inherit}
#page-budgets .b-side #bSum{padding:16px 20px 8px;gap:12px 20px}
#page-budgets #bWeek.weekday-summary{padding:8px 20px 16px;color:var(--ink-2);font:400 12px/18px var(--sans)}

/* C-08: details use the existing panel/sheet. The operation stays outlined,
   including keyboard focus, without a glass or raised-row treatment. */
#page-transactions .txt tr.r.open{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--ink-4)}
#page-transactions .txt tr.r:focus-visible{outline:2px solid var(--focus)!important;outline-offset:-2px;box-shadow:none!important}
#opPanel.drawer-panel{background:var(--panel)}
#opPanel .panel-h{background:var(--panel)}

/* C-09: pointer users get a quiet category; touch and uncategorised rows
   always retain an explicit affordance. The separate chevron keeps its space. */
html #page-transactions .txt td.c2 .cat-btn{background:transparent;border-color:transparent;color:var(--ink-2);gap:6px;box-shadow:none}
#page-transactions .cat-btn .cat-chevron{opacity:0;visibility:hidden}
#page-transactions .cat-btn :is(.cat-point,.cat-dot){width:6px;height:6px;border-radius:var(--r-dot);flex:none}
html #page-transactions .txt td.c2 .cat-btn:is(:hover,:focus-visible,.none){background:var(--panel-2)}
html #page-transactions .txt td.c2 .cat-btn.none{border:1px dashed var(--ink-4);}
#page-transactions .cat-btn:is(:hover,:focus-visible,.none) .cat-chevron{opacity:1;visibility:visible}
@media (hover:none){
  html #page-transactions .txt td.c2 .cat-btn{background:var(--panel-2)}
  #page-transactions .cat-btn .cat-chevron{opacity:1;visibility:visible}
}

/* C-10: category-tinted icon disks. Existing short-category metadata also
   supplies the tint in rows; semantic red/green families stay neutral. */
body .ava{background:color-mix(in srgb,var(--merchant-tint,var(--merchant-color,var(--ink-4))) 12%,var(--panel))!important;color:var(--ink-2)!important;box-shadow:none}
body :is(.op,.mcell):has(.sub-cat[data-short="Кафе"])>.ava{--merchant-tint:var(--merchant-cafe)}
body :is(.op,.mcell):has(.sub-cat[data-short="Шопинг"])>.ava{--merchant-tint:var(--cat-2)}
body :is(.op,.mcell):has(.sub-cat[data-short="Поездки"])>.ava{--merchant-tint:var(--cat-1)}
body :is(.op,.mcell):has(.sub-cat[data-short="Транспорт"])>.ava{--merchant-tint:var(--merchant-transport)}
body :is(.op,.mcell):has(.sub-cat[data-short="Подписки"])>.ava{--merchant-tint:var(--merchant-subscriptions)}
body :is(.op,.mcell):has(.sub-cat[data-short="Связь"])>.ava{--merchant-tint:var(--merchant-utilities)}
body .ava:is([data-neutral="true"],[data-category="Здоровье и аптеки"],[data-category="Развлечения и отдых"],[data-category="Продукты и супермаркеты"]),
#anMerch .mr:is([style*="#e89a9a"],[style*="#8ccfb8"],[style*="#a7d3c0"]) .ava{--merchant-tint:var(--ink-4)}

/* C-11: plain sentence-case day headings, with tabular totals at right. */
#ovOps .dayh,.day-head,#page-transactions .txt tr.day td{background:transparent;text-transform:none;font:500 12px/18px var(--sans);color:var(--ink-2)}
#ovOps .dayh,.day-head{height:auto;min-height:24px;margin-top:16px}
/* Transparent headings scroll with their group; sticky cells would overlay
   several dates and totals at the same position after scrolling (C-11). */
#page-transactions #opBody tr.day{position:static}
#page-transactions #opBody tr.day td{position:static;height:auto;padding-top:16px;padding-bottom:6px}
html #page-transactions #opBody tr.day .day-meta{top:auto;transform:none;position:static;margin-left:auto}
#opBody .day-band{flex-wrap:nowrap;gap:8px}
#opBody .day-meta,#ovOps .day-meta{font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}

/* C-13 / J-13: a selected bar has full opacity; siblings dim without moving. */
:is(#paceChart,#cfChart,#anFees) :is(.pace-bar,.cfm,.wb,.wkb,.bar,.is-sel,.is-dim){transition:opacity 150ms}
:is(#paceChart,#cfChart,#anFees) .is-dim{opacity:.35}
:is(#paceChart,#cfChart,#anFees) .is-sel{opacity:1}
.tip-box{background:var(--ctl)}

/* C-15 / J-15: one hero and four secondary figures, without a nested well. */
#page-cashflow #cfNums{background:none;box-shadow:none;border:0;border-radius:var(--r-none);padding:0;gap:16px 20px;grid-template-columns:repeat(4,minmax(0,1fr))}
#cfNums>.cf-sel,#cfNums>.cf-hero,#cfNums>.cf-total,#cfNums>.cf-result{grid-column:1/-1}
#cfNums>.cf-metrics{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px}
#cfNums>.cf-metrics>div{min-width:0}
#cfNums>.cf-metrics .v{font:420 22px/28px var(--sans)}
#cfNums>div{padding:0;background:none;box-shadow:none}
#cfNums .l::before{display:none}
#cfNums :is(.cf-hero,.cf-total,.cf-result) .v,#cfNums .t-hero{font:420 48px/54px var(--sans);color:var(--ink);letter-spacing:-.025em}
#cfNums .v{font-variant-numeric:tabular-nums lining-nums}

/* C-16: cells and the legend share the same peak. The existing .spike flag
   supplies the 3x threshold, so a relative-to-maximum scale cannot promote
   an ordinary day or leave a marked outlier on a light step. */
#page-analytics{--h5:var(--calendar-peak);--heat-ink-0:var(--ink-2);--heat-ink-1:var(--ink-2);--heat-ink-2:var(--ink-2);--heat-ink-3:var(--ink-2);--heat-ink-4:var(--ink-2);--heat-ink-5:var(--key-ink)}
#anCal .cc[data-cday]:not(.spike){--h5:var(--h4);--heat-ink-5:var(--ink-2)}
#anCal .cc.spike{background:var(--calendar-peak)!important;color:var(--key-ink)!important}
:root.dark #page-analytics,:root[data-theme="dark"] #page-analytics{--h1:color-mix(in srgb,var(--data-1) 8%,var(--panel));--h2:color-mix(in srgb,var(--data-1) 16%,var(--panel));--h3:color-mix(in srgb,var(--data-1) 24%,var(--panel));--h4:color-mix(in srgb,var(--data-1) 32%,var(--panel))}
@media (prefers-color-scheme:dark){:root:not(.light):not([data-theme="light"]) #page-analytics{--h1:color-mix(in srgb,var(--data-1) 8%,var(--panel));--h2:color-mix(in srgb,var(--data-1) 16%,var(--panel));--h3:color-mix(in srgb,var(--data-1) 24%,var(--panel));--h4:color-mix(in srgb,var(--data-1) 32%,var(--panel))}}

/* C-18: the JS audit adds .num; use tabular digits for the existing amount
   classes as well. Fractions are subordinate only in the four main figures. */
.num,.hero-num,.tile-val,.sum-line b,.p-amt,.op-a,.dr-num,.b-sum .v{font-variant-numeric:tabular-nums lining-nums}
#ovPkFig .minor,#cfNums .t-hero .minor,#cfNums :is(.cf-hero,.cf-total,.cf-result) .minor,#opTotals .minor,#opPanel .p-amt .minor{font-size:.58em;color:var(--ink-3);font-weight:420}
#page-transactions .txt td.op-a{text-align:right}
#page-transactions #opBody td.op-a{font-variant-numeric:tabular-nums lining-nums}

/* C-21: panel segments share one flat 32px track. The navigation selectors
   are deliberately excluded; touch hit areas extend beyond the 26px pill. */
body .seg:not(.seg--nav),body #ovMonth .month-top>.seg:not(.seg--nav),body #opPanel .seg:not(.seg--nav){height:32px;min-height:32px;padding:3px;gap:0;background:var(--panel-2);box-shadow:none}
body .seg:not(.seg--nav)>button,body #ovMonth .month-top>.seg:not(.seg--nav)>button,body #opPanel .seg:not(.seg--nav)>button{position:relative;height:26px;min-height:26px;padding:0 12px;font:500 13px/1 var(--sans);background:transparent;box-shadow:none}
body .seg:not(.seg--nav)>button:is([aria-pressed="true"],[aria-selected="true"]){background:var(--ctl);box-shadow:var(--e1);color:var(--ink)}
body #ovMonth .month-top>.seg:not(.seg--nav)>button[aria-pressed="true"],body #opPanel .seg:not(.seg--nav)>button[aria-pressed="true"]{background:var(--ctl);box-shadow:var(--e1)}
@media (pointer:coarse){body .seg:not(.seg--nav)>button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}}

/* C-22 / J-22: one entrance, no filter or stagger; period values crossfade. */
#drill:not([hidden]){opacity:1;transition:opacity 180ms ease-out,transform 180ms ease-out}
#drill.is-entering{opacity:0;transform:translateY(6px)}
.period-number,.period-value,[data-period-number]{transition:opacity 120ms ease-out}
.period-number.is-changing,.period-value.is-changing,[data-period-number].is-changing,.is-period-changing .num{opacity:0}
.is-period-changing .num,.is-period-ready .num{transition:opacity 120ms ease-out}
.page :is(.hero-num,.tile-val,#bSum .v,#cfNums .v,#opTotals b){transition:opacity 120ms ease-out}
.page :is(.hero-num,.tile-val,#bSum .v,#cfNums .v,#opTotals b).is-changing{opacity:0}
@media (prefers-reduced-motion:reduce){
  #drill:not([hidden]),#drill.is-entering,.period-number,.period-value,[data-period-number],.is-period-changing .num,.is-period-ready .num,
  :is(#paceChart,#cfChart,#anFees) :is(.pace-bar,.cfm,.wb,.wkb,.bar,.is-sel,.is-dim),.page :is(.hero-num,.tile-val,#bSum .v,#cfNums .v,#opTotals b){transition-duration:0s}
}

/* C-25: a compact count, with the existing mobile placement preserved. */
body #proBtn>.findings-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border:0;border-radius:var(--r-cap);background:var(--panel-2);color:var(--ink-2);font:500 11px/18px var(--sans);font-variant-numeric:tabular-nums lining-nums;clip-path:none;overflow:visible}
body #proBtn>.findings-count[hidden]{display:none}

/* C-24: replace the later legacy UTA gradient too; the Bybit material and
   its shade stay exactly as they were. */
.stack__card--uta{background:linear-gradient(125deg,var(--card-uta-a),var(--card-uta-b));color:var(--card-uta-ink)}

@media (min-width:768px){
  /* J-04 moved KPI tiles out of the hero grid. Remove its obsolete named row. */
  .ov-page>.ov-r1{grid-template-areas:"hero month"}
  .ov-page>.ov-r1:has(>#drill:not([hidden])){grid-template-areas:"hero month" "drill drill"}
}

@media (max-width:767px){
  /* owner: accounts first; keep Funding readable above the figure and chart. */
  #page-overview .ov-head{display:flex;order:-3}
  #page-overview .ov-head h1{display:block}
  .ov-page>.ov-r1{display:flex;flex-direction:column;gap:16px;order:-1}
  .ov-page>#ovAcc{order:-2}
  #ovAcc.acc{padding:12px 16px}
  #ovAcc .acc__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
  #ovAcc .acc__status{grid-column:1;grid-row:2;order:0;margin-left:0}
  #ovAcc .acc__sync{grid-column:2;grid-row:1/3;margin-left:0}
  #ovAcc .acc__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #ovAcc :is(.acc__row,.acc__account){grid-template-columns:32px minmax(0,1fr);gap:0 8px}
  #ovAcc :is(.acc__rval,.acc__bal){grid-column:2;text-align:left;font-size:13px}
  #ovAcc :is(.acc__rname,.acc__rrole){white-space:normal;overflow:visible}
  #ovAcc .acc__moves{grid-column:1}
  #ovAcc .acc__mv,#ovAcc .acc__movesum{min-height:44px}
  body #ovTiles.ov-tiles{gap:10px}
  body #ovTiles .tile{padding:12px;min-height:116px}
  #ovTiles .tile .chip-s{font:400 12px/16px var(--sans);white-space:normal}
  #page-budgets .b-side #bSum{padding:12px 16px 4px;gap:8px 16px}
  #page-cashflow #cfNums{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0}
  #cfNums>.cf-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  #cfNums>.cf-metrics .v{font-size:20px}
  #cfNums>.cf-metric{grid-column:auto}
  #opPanel.panel{bottom:calc(88px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 164px - env(safe-area-inset-bottom,0px));border-radius:var(--r-sheet);left:12px;right:12px;width:auto}
  #opPanel .p-hero{padding-inline:16px}
}

/* r27 #12: предупреждение «комиссии превысили кэшбэк» на плитках видно и на телефоне, где обычные подписи-чипы скрыты */
.ov-tiles .tile .tile-note.chip-s.warn{display:block !important;white-space:normal}

/* r27 #15: объявления Bybit отделены от белых карточек пользователя: подпись «Новости Bybit», пунктирная рамка, крестик «скрыть», уход только по явной ссылке с «›» */
#ovNewsHost.ov-r4{display:block;background:none;box-shadow:none;padding:0;border-radius:var(--r-none)}
.ov-news{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"k d go x" "t t t t";gap:4px 10px;align-items:center;background:var(--band);border-radius:var(--r-sub);padding:12px 16px}
.ov-news .k{grid-area:k;font:500 12px/18px var(--sans);letter-spacing:.04em;color:var(--ink-2)}
.ov-news .muted{grid-area:d;font:400 12px/18px var(--sans);color:var(--ink-4)}
.ov-news .t{grid-area:t;font:400 14px/20px var(--sans);color:var(--ink);white-space:normal}
.ov-news a.ov-news__go{display:inline-flex;grid-area:go;justify-self:end;align-items:center;gap:4px;font:500 13px/18px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.ov-news a.ov-news__go:hover,.ov-news a.ov-news__go:focus-visible{color:var(--ink);text-decoration:underline}
.ov-news .ov-news__go svg{width:14px;height:14px}
.ov-news .ov-news__x{grid-area:x;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -6px -4px 0;border:0;border-radius:var(--r-pill);background:none;appearance:none;font:inherit;color:var(--ink-3);cursor:pointer}
.ov-news .ov-news__x:hover,.ov-news .ov-news__x:focus-visible{background:var(--band);color:var(--ink)}
.ov-news .ov-news__x svg{width:14px;height:14px}

/* r27 review #12: предупреждение «комиссии превысили кэшбэк» выглядит как варн-чип (амбер пилюля),
   не как обычный серый текст под цифрой; переопределяет более раннее .chip-s.warn для этого места. */
#ovTiles .tile .tile-note.chip-s.warn{display:inline-flex !important;align-items:center;width:fit-content;max-width:100%;height:auto;padding:3px 7px;border-radius:var(--r-cap);background:color-mix(in srgb,var(--warn-text) 12%,var(--panel));color:var(--warn-text) !important;font:400 11px/16px var(--sans);font-variant-numeric:tabular-nums lining-nums;white-space:normal} /* r27 review: same soft chip as .kpi-delta, amber tone (edited by Claude) */
#ovTiles .tile .tile-note.chip-s.warn::before{content:none}

/* f1: household and friends use the same quiet surfaces in both themes. */
.account-scope{flex:none;align-self:center;gap:2px}
.account-scope button{min-width:62px;min-height:36px}
#page-transactions .page-head{flex-wrap:wrap}
#page-transactions .page-head>.page-actions{margin-left:auto}
#familyFundingRow[hidden],.scope-caption[hidden],#ovDebts[hidden],#ovDebtList[hidden],#debtHistory[hidden],.debt-detail[hidden],#debtNewField[hidden],#debtAmountField[hidden],#incomeDebtFields[hidden]{display:none!important}
.ov-debts{margin:8px 0 20px;color:var(--ink-2)}
#ovDebtSummary{display:flex;align-items:center;gap:8px;padding:6px 0;min-height:40px;border:0;background:transparent;color:var(--ink-2);font:400 13px/20px var(--sans);text-align:left;cursor:pointer}
#ovDebtSummary svg{width:14px;height:14px;flex:none}
#ovDebtSummary[aria-expanded=true] svg{transform:rotate(90deg)}
#ovDebtList{margin-top:8px;padding:12px 20px;max-width:620px}
.debt-mini{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;font-size:14px}
.debt-mini>div,.debt-balances{display:flex;gap:4px 20px;flex-wrap:wrap;justify-content:flex-end;font-size:13px;color:var(--ink-2)}
.debt-mini b,.debt-balances b{color:var(--ink);font-weight:500;white-space:nowrap}
.debt-card{margin-bottom:24px;overflow:hidden}
.debt-card>.ch{align-items:center;gap:12px}
#debtTotals{margin:6px 0 0;font-size:13px;line-height:20px;font-weight:400}
#debtList{padding:0 8px 8px}
.debt-friend-head{width:100%;display:grid;grid-template-columns:40px minmax(80px,1fr) auto 16px;align-items:center;gap:14px;min-height:76px;padding:12px 16px;border:0;border-radius:var(--r-row);background:transparent;color:var(--ink);text-align:left;font:400 16px/22px var(--sans);cursor:pointer}
.debt-friend-head:hover,.debt-friend-head[aria-expanded=true]{background:var(--panel-2)}
.debt-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-dot);background:var(--band);color:var(--ink-2);font-size:17px}
.debt-name{overflow-wrap:anywhere}
.debt-chevron svg{width:16px;height:16px;display:block;color:var(--ink-3)}
.debt-friend-head[aria-expanded=true] .debt-chevron{transform:rotate(90deg)}
.debt-detail{padding:4px 16px 20px 70px}
.debt-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.debt-timeline{list-style:none;padding:0;margin:0}
.debt-timeline li{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;font-size:14px;line-height:20px}
.debt-timeline time,.debt-timeline small{color:var(--ink-3);font-size:12px;line-height:18px}
.debt-timeline small{display:block;margin-top:3px}
.debt-timeline .num{white-space:nowrap}
.debt-timeline .more{text-align:left;line-height:20px;min-height:0}
#debtHistory{margin:0 24px 20px;min-height:36px}
.debt-empty{padding:4px 16px 12px;color:var(--ink-2);font-size:14px;line-height:22px}
.family-layout{align-items:start}
.family-note{line-height:20px}
.family-owner{display:block;font-size:12px;color:var(--ink-3);margin:2px 0}
.family-account{flex-wrap:wrap;gap:12px}
#familyAccountBalance{white-space:nowrap}
#familySharedCard .family-op{grid-template-columns:36px minmax(0,1fr) auto}
#familySharedCard .family-meta{flex-wrap:wrap;gap:2px 4px}
#familySharedCard:has(.empty){display:none}
.account-note{font-style:normal;color:var(--ink-2)}
#opBody .sub-t.account-note{display:inline}
.share-note{color:var(--ink-3)}
.split-section .btn-ghost{margin-top:10px;margin-right:12px}
.split-section .muted{font-size:13px;line-height:20px}
.debt-context{display:flex;justify-content:space-between;gap:16px;margin:0 0 20px;font-size:14px;line-height:22px;color:var(--ink-2)}
.debt-context .num{white-space:nowrap;color:var(--ink)}
.debt-method{display:flex}
.debt-method button{flex:1;min-height:40px;padding:8px 12px}
.debt-preview{background:var(--panel-2);border-radius:var(--r-ctl);padding:14px 16px;font-size:13px;line-height:21px;color:var(--ink-2);margin-top:16px}
.debt-preview>div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.debt-preview b{font-weight:500;color:var(--ink);white-space:nowrap}
#debtError:empty{display:none}
#debtError{margin:14px 0 0}
#mDebt .zm{width:min(480px,calc(100vw - 24px))}
#mDebt .zm-head h2{font-size:20px}
#mDebt .field{margin-bottom:16px}
#mDebt input,#mDebt select{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
#mDebt .zm-foot{gap:8px}
.family-scope::before{content:'Семейный бюджет: общие категории, две карты';display:block;max-width:var(--page-measure);margin:12px auto 0;padding:0 var(--page-x);font-size:13px;color:var(--ink-2)}
.income-debt-action{padding:0 var(--pad-card) 10px}
.income-debt-action .more{min-height:36px;font-size:13px}
#incomeDebtFields .muted{font-size:13px;line-height:20px}
@media(max-width:760px){
  .ov-head{flex-wrap:wrap;gap:10px!important}
  .ov-head h1{flex:1;min-width:200px}
  #page-transactions .page-head>.account-scope{order:1;margin-left:auto}
  #page-transactions .page-head>.page-actions{order:2;width:100%;margin:0}
  .debt-card>.ch{padding:18px 16px;align-items:flex-start}
  .debt-card>.ch>.btn-brand{font-size:13px;padding:9px 12px;flex:none;min-height:40px}
  .debt-friend-head{grid-template-columns:36px 1fr 14px;gap:4px 12px;padding:12px 8px}
  .debt-avatar{grid-row:1/3;width:36px;height:36px}
  .debt-name{font-size:15px}
  .debt-balances{grid-column:2;justify-content:flex-start;gap:2px;flex-direction:column;font-size:12px;line-height:18px}
  .debt-chevron{grid-column:3;grid-row:1/3}
  .debt-detail{padding:0 8px 12px}
  .debt-actions .btn-ghost{font-size:13px;min-height:40px}
  .debt-timeline li{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;font-size:13px}
  .debt-mini{align-items:flex-start}
  .debt-mini>div{flex-direction:column;align-items:flex-end;gap:2px}
  #ovDebtList{padding:8px 16px}
  .family-account{display:flex;align-items:center;justify-content:space-between}
  #mDebt .zm{max-height:calc(100dvh - 24px);margin:12px auto}
  #mInc .zm-foot:has(#incDebtMark:not([hidden])){flex-wrap:wrap}
}
@media(max-width:760px){
  #page-transactions .page-inner>.page-head,#page-overview .page-inner>.ov-head{display:flex;justify-content:flex-end;min-height:36px;margin:0 0 12px}
  #page-transactions .page-inner>.page-head>.page-actions{display:none}
  #page-transactions .page-head>.account-scope{margin-left:0}
  .account-scope button{min-height:40px;min-width:72px}
}
@media(max-width:760px){
  .debt-card>.ch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
  .debt-card>.ch>div{display:contents}
  .debt-card>.ch h2{grid-column:1;grid-row:1}
  .debt-card>.ch>.btn-brand{grid-column:2;grid-row:1}
  #debtTotals{grid-column:1 / -1;grid-row:2;margin:0}
}
@media(max-width:760px){.ov-page>#ovDebts{order:-1;margin:0}}
/* f2: health and capital share the quiet analytics surfaces. */
.finance-tabs{display:flex;gap:4px;padding:4px;background:var(--band);border-radius:var(--r-card);width:fit-content;margin:0 0 24px}
.finance-tabs button{border:0;background:transparent;color:var(--ink-2);font:400 14px/20px var(--sans);padding:10px 24px;border-radius:var(--r-row);min-height:44px;cursor:pointer}
.finance-tabs button[aria-selected=true]{background:var(--panel);color:var(--ink);box-shadow:var(--e1)}
.finance-tabs button:focus-visible,.finance-lines summary:focus-visible,.capital-chart button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.finance-lines{display:grid;gap:0;margin:-6px 0 18px;color:var(--ink-2);font-size:13px;line-height:20px}
.finance-lines summary{cursor:pointer;width:fit-content;padding:6px 0;list-style:none;min-height:32px}
.finance-lines summary::-webkit-details-marker{display:none}
.finance-lines summary::after{content:'⌄';margin-left:8px;display:inline-block}
.finance-lines details[open]>summary::after{transform:rotate(180deg)}
.finance-lines summary span{white-space:nowrap}
.finance-disclosure{max-width:660px;margin:4px 0 12px;padding:16px 20px;background:var(--panel);border-radius:var(--r-card)}
.finance-disclosure dl{margin:0 0 12px;display:grid;grid-template-columns:1fr auto;gap:10px 20px;color:var(--ink)}
.finance-disclosure dd{margin:0;text-align:right}
.finance-disclosure p{margin:0 0 12px}
.finance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 18px}
.finance-head h2{font-size:21px;line-height:28px;font-weight:500;margin:0}
.finance-head p{margin:6px 0 0;color:var(--ink-2);font-size:13px;line-height:20px}
.finance-tag{display:inline-block;padding:4px 9px;background:var(--band);color:var(--ink-2);border-radius:var(--r-pill);font-size:12px;line-height:18px;white-space:nowrap}
.health-top{display:grid;grid-template-columns:290px 1fr;gap:28px;padding:28px;margin-bottom:20px;align-items:center}
.health-score{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px;font-size:72px;line-height:1.1;letter-spacing:-3px;font-weight:400}
.health-score small{font-size:18px;letter-spacing:0;color:var(--ink-3)}
.health-rating{font-size:18px;margin:0 0 10px}
.health-context{font-size:13px;line-height:20px;color:var(--ink-2);margin:0}
.health-window{padding:20px 24px;background:var(--panel-2);border-radius:var(--r-card)}
.health-window h3{font-size:15px;font-weight:500;margin:0 0 12px}
.health-window dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0;font-size:14px}
.health-window dd{margin:0;text-align:right;white-space:nowrap}
.health-window p{margin:14px 0 0;font-size:12px;line-height:19px;color:var(--ink-2)}
.health-factors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.health-factor{padding:20px}
.health-factor header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;line-height:20px}
.health-factor header span{white-space:nowrap;color:var(--ink-3);font-size:12px}
.health-factor h3{font:500 14px/20px var(--sans);margin:0}
.health-value{font-size:27px;line-height:36px;margin:16px 0 3px;letter-spacing:-.6px}
.health-factor p{color:var(--ink-2);font-size:12px;line-height:19px;margin:10px 0 0}
.health-grade{font-size:13px;line-height:20px;color:var(--ink)}
.health-meter{height:5px;background:var(--band);border-radius:var(--r-band);overflow:hidden;margin:15px 0 0}
.health-meter i{height:100%;display:block;background:var(--ink-3);border-radius:inherit}
.health-advice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.health-tip{padding:20px 24px;display:flex;flex-direction:column;align-items:flex-start}
.health-tip h3{font:500 15px/22px var(--sans);margin:0 0 8px}
.health-tip p{font-size:13px;line-height:21px;color:var(--ink-2);margin:0 0 16px}
.health-tip a{margin-top:auto;font-size:13px;line-height:20px;min-height:28px;display:inline-flex;align-items:center}
.health-method{padding:16px 0;color:var(--ink-2);font-size:12px;line-height:20px}
.health-method summary{cursor:pointer;min-height:32px}
.health-method ol{padding-left:20px;max-width:900px}
.health-method li{margin-bottom:8px}
.health-empty{padding:28px;margin-bottom:20px}
.health-empty h3{font-size:20px;font-weight:500;margin:0 0 12px}
.health-empty p{margin:0 0 20px;color:var(--ink-2);line-height:22px}
.capital-hero{padding:28px;margin-bottom:20px}
.capital-total{font-size:44px;line-height:56px;letter-spacing:-1.4px;margin:6px 0 8px}
.capital-meta{display:flex;gap:12px 28px;flex-wrap:wrap;font-size:13px;line-height:21px;color:var(--ink-2)}
.capital-meta p{margin:0}
.capital-chart{position:relative;height:210px;margin:28px 0 0}
.capital-chart svg{position:absolute;left:4%;top:0;width:92%;height:170px;overflow:visible}
.capital-chart button{position:absolute;top:0;height:210px;width:12%;transform:translateX(-50%);background:transparent;border:0;color:var(--ink-3);font:400 12px var(--sans);cursor:pointer;padding:0}
.capital-chart button span{position:absolute;bottom:6px;left:0;width:100%;text-align:center}
.capital-chart button i{position:absolute;left:50%;width:10px;height:10px;background:var(--panel);box-shadow:0 0 0 2px var(--ink-3);border-radius:50%;transform:translate(-50%,-50%)}
.capital-chart button[aria-pressed=true]{color:var(--ink)}
.capital-chart button[aria-pressed=true] i{background:var(--ink);box-shadow:0 0 0 4px var(--panel),0 0 0 5px var(--ink-3)}
.capital-snapshot{padding:14px 18px;background:var(--panel-2);border-radius:var(--r-card);font-size:13px;line-height:21px}
.capital-snapshot-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.capital-snapshot p{margin:6px 0 0;color:var(--ink-2);font-size:12px}
.capital-sources{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.capital-source{padding:20px 24px;align-self:start}
.capital-source summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.capital-source summary::-webkit-details-marker{display:none}
.capital-source summary strong{font-size:17px;font-weight:500}
.capital-source summary small{display:block;color:var(--ink-2);font-size:12px;line-height:20px;margin-top:4px}
.capital-source summary>span:last-child{white-space:nowrap}
.capital-source summary>span:last-child::after{content:'⌄';margin-left:10px;color:var(--ink-3)}
.capital-source[open] summary>span:last-child::after{content:'⌃'}
.capital-source dl{display:grid;grid-template-columns:1fr auto;gap:14px;margin:20px 0 0;font-size:13px;line-height:21px}
.capital-source dd{margin:0;text-align:right}
.capital-source dt small,.capital-source dd small{display:block;color:var(--ink-2);font-size:12px}
.capital-manual{padding:24px;margin-bottom:16px}
.capital-manual .finance-head{margin-bottom:10px;align-items:center}
.capital-manual h3{font-size:18px;font-weight:500;margin:0}
.asset-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(120px,180px) minmax(210px,1fr) auto;align-items:center;gap:16px;padding:18px 0}
.asset-row+.asset-row{box-shadow:0 -1px 0 var(--band)}
.asset-row h4{font-size:14px;line-height:21px;font-weight:500;margin:0 0 6px;overflow-wrap:anywhere}
.asset-row small{display:block;color:var(--ink-2);font-size:12px;line-height:19px;margin-top:3px}
.asset-value{font-size:16px;white-space:nowrap}
.asset-age{font-size:11px;color:var(--ink-2);background:var(--panel-2);border-radius:var(--r-pill);padding:3px 7px;display:inline-block}
.asset-age.stale{color:var(--warn-text)}
.asset-confirm{justify-self:start;text-align:left;min-height:44px;white-space:normal;font-size:12px}
.asset-actions{display:flex;gap:8px}
.asset-actions .iconbtn{width:40px;height:44px;color:var(--ink-2);flex:none}
.asset-actions .iconbtn svg{width:17px;height:17px}
.asset-amount-field{display:flex;gap:12px}
.asset-amount-field input{min-width:0;flex:1}
.asset-amount-field select{width:90px}
.capital-note{font-size:12px;line-height:20px;color:var(--ink-2);margin:14px 0 0}
.capital-note summary{cursor:pointer;min-height:32px}
@media(max-width:900px){
.health-factors{grid-template-columns:repeat(2,minmax(0,1fr))}
.asset-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
.asset-value{text-align:right}.asset-actions{justify-content:flex-end}
}
@media(max-width:600px){
.finance-tabs{width:100%;margin-bottom:20px}.finance-tabs button{flex:1;padding:10px 12px}
.finance-head h2{font-size:20px}.finance-head{gap:12px}
.finance-lines{font-size:12px;line-height:19px;margin-top:-6px}
.finance-lines summary{min-height:38px;padding:9px 0}
.finance-disclosure{padding:16px}.finance-disclosure dl{gap:12px 10px}
.health-top{grid-template-columns:1fr;gap:18px;padding:20px}.health-score{font-size:64px}
.health-window{padding:18px}.health-window dl{font-size:13px}
.health-factors{gap:12px;margin-bottom:24px}.health-factor{padding:16px}
.health-factor header{flex-wrap:wrap;gap:4px}.health-value{font-size:25px;margin-top:12px}
.health-advice{grid-template-columns:1fr;gap:12px}.health-tip{padding:20px}
.capital-hero{padding:20px}.capital-total{font-size:36px;line-height:48px}
.capital-meta{gap:6px 16px}.capital-chart{margin-top:22px}
.capital-sources{grid-template-columns:1fr;gap:12px;margin-bottom:20px}
.capital-source{padding:16px 20px}.capital-manual{padding:20px}
.capital-manual .finance-head{flex-wrap:wrap}.capital-manual .finance-head .btn-brand{font-size:12px;padding:10px 14px}
.asset-row{padding:18px 0}.asset-confirm{font-size:12px;max-width:100%;padding-left:0;padding-right:0}
.asset-actions{gap:2px}.asset-value{font-size:15px}
}
/* Accounts remain first in the mobile flex layout; finance follows immediately. */
@media(max-width:767px){.ov-page>#ovFinance{order:-2}}
#mAsset form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#mAsset .zm-body{min-height:0;overflow-y:auto}
#mAsset .zm-foot{flex-shrink:0}
/* The spending tab keeps the spacing previously supplied by .page-inner. */
#anSpending:not([hidden]){display:grid;gap:inherit}
/* f5: quick add (expense/income one-line entry) */
.exp-quick{display:flex;gap:8px;align-items:center}
.exp-quick input{flex:1;min-width:0}
.exp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.exp-chips:empty{display:none}
.exp-details{margin-top:14px}
.exp-details>summary{cursor:pointer;color:var(--ink-2);font:500 13px/1 var(--sans)}
.exp-details>summary:hover{color:var(--ink)}
.exp-details[open]>summary{margin-bottom:14px}
.exp-details>.exp-grid:first-of-type{margin-top:0}

/* f5: limit rollover */
.le-roll{display:flex;align-items:center;gap:8px;margin-top:4px;font:400 13px/18px var(--sans);color:var(--ink)}
.le-roll-note{margin:2px 0 0}
.sl-roll{color:var(--pos-text)}
.sl-tick[data-k="roll"]{background:var(--pos-text)}

/* f5: Бюджеты <-> Подписки tab, subscriptions page */
.b-tabs{margin:12px 0}
#bSubsWrap .row2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:14px;line-height:20px}
#bSubsWrap .row2 > span:first-child{min-width:0}
#bSubsWrap .row2 > span:last-child{flex:none;text-align:right;font-variant-numeric:tabular-nums}
#bSubsWrap .row2 small{display:block;font-size:12px;line-height:16px;color:var(--ink-3)}
.sub-total{font:500 14px/20px var(--sans);color:var(--ink);margin:4px 0 12px}
.sub-trial{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-card);background:color-mix(in srgb,var(--warn-text) 10%,var(--panel));color:var(--ink);font:400 13px/18px var(--sans)}
.sub-hike{color:var(--warn-text)}
.sub-expected{margin-top:10px}
.sub-cal{margin-bottom:8px}
.sub-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.sub-cal-dow span{text-align:center;font:500 11px/16px var(--sans);color:var(--ink-3)}
.sub-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.sub-cal-cell{aspect-ratio:1;border-radius:var(--r-sub);background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:400 12px/1 var(--sans);color:var(--ink-3)}
.sub-cal-cell.has{background:var(--well);color:var(--ink)}
.sub-cal-cell.out{color:var(--ink-4)}
.sub-cal-cell.out.has{background:none}
.sub-cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sub-cal-d{font-variant-numeric:tabular-nums lining-nums}
.sub-cal-sum{font:600 10px/1 var(--mono);color:var(--ink);background:var(--panel-2);border-radius:var(--r-cap);padding:1px 5px;font-variant-numeric:tabular-nums lining-nums}
.sub-soon{margin-top:12px}
.sub-soon h3{font:500 12px/16px var(--sans);color:var(--ink-2);margin:0 0 6px;text-transform:none}
.sub-row .sub-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sub-actions{display:flex;gap:10px}
.sub-cancelled{margin-top:10px}
.sub-cancelled>summary{cursor:pointer;color:var(--ink-2);font:500 13px/1 var(--sans)}
.sub-add{margin-top:16px}
/* ================= f6: скан чека, «Спросить», превью виджетов ================= */
@media(max-width:760px){#askBtn{display:none}}
.ask-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#askAnswer{margin-top:4px}
#askAnswer p{margin:0 0 8px}
.scan-review-tag{margin:4px 0 0;color:var(--ink-2);font-size:12px;line-height:20px}
.tag-demo{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-right:6px;border-radius:var(--r-band);background:var(--band);color:var(--ink);font:500 11px/22px var(--sans);letter-spacing:.02em;white-space:nowrap}
/* f6: .exp-grid/.field have no layout or spacing rules anywhere else in the app either
   (the existing "Добавить трату" form has the same gap-less stack); scope the fix to the
   scan modal so this does not touch #mExp's already-covered layout. */
#scanBody .field,#scanBody .exp-grid,#scanBody .scan-review-tag{margin-top:14px}
#scanBody .scan-disclaimer{margin-top:6px}
#scanBody .exp-photo{margin-top:0}
#scanBody .exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#scanBody .scan-item + .scan-item{margin-top:14px}
.more-nav-btn{display:flex;align-items:center;width:100%;background:none;padding:0 16px;border:0;border-radius:var(--r-inner);font:400 16px/22px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.more-nav-btn:hover,.more-nav-btn:focus-visible{background:var(--panel)}
/* f6: the .receipt-photo <img> (mail receipts, manual-expense photo, scan) had no size rule
   anywhere, so an uploaded photo rendered at its full intrinsic size and blew out any modal. */
.receipt-photo{display:block;width:100%;max-width:260px;max-height:200px;object-fit:contain;margin:0 0 10px;border-radius:var(--r-card);background:var(--panel-2)}

/* r28 merge: one ordered, quiet stack for the feature disclosures. */
#page-overview .ov-page>.ov-head{order:-6}
#page-overview .ov-page>#ovAcc{order:-5}
#page-overview .ov-page>#ovDebts{order:-4;margin:0}
#page-overview .ov-page>#ovFinance{order:-3;margin:0}
#page-overview .ov-page>#ovSeasonLine{order:-2;margin:0;padding:0;font-size:13px;line-height:20px}
#page-overview .ov-page>.ov-r1{order:-1}
#page-overview .ov-page>#ovSeasonLine[hidden]{display:none}
#ovDebtSummary{min-height:32px;padding:6px 0}
#ovDebts:has(+ #ovFinance){margin-bottom:-16px}
#ovFinance:has(+ #ovSeasonLine:not([hidden])){margin-bottom:-16px}

/* Names and avatars share a first row; category visibility gets its own width. */
#familyMembers .mcell{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:12px;flex:1}
#familyMembers .mcell>.ava{width:36px;height:36px;display:grid;place-items:center;margin:0}
#familyMembers .member-name{display:block;line-height:36px}
#familyMembers .mcell .d{margin-top:0;font-size:12px;line-height:18px}
#familyMembers .setrow:has(.mcell){align-items:start;gap:12px}
#familyMembers [data-manage=family]{padding:8px 0;min-height:36px;flex:none}
#famShared>[data-family-more]{background:transparent;border:0;box-shadow:none;color:var(--ink-2);width:auto;font:400 13px/20px var(--sans)}

/* A month is five compact rows, independent of the available desktop width. */
.sub-cal-cell{aspect-ratio:auto;height:48px;min-height:0}
.sub-cal-sum{font-size:10px;padding:1px 2px;white-space:nowrap}
.sub-reconcile{font-size:13px;line-height:20px;margin:0 0 16px}
#bSubsWrap:not([hidden]){display:grid;gap:16px}
#bSubsWrap>.sub-total,#bSubsWrap>.sub-reconcile{margin:0}
.sub-add>summary{padding:16px 24px;cursor:pointer;list-style:none;min-height:44px}
.sub-add>summary::-webkit-details-marker{display:none}
.sub-add>summary::after{content:' +'}
.sub-add[open]>summary::after{content:' −'}
#expBody{padding:16px 24px 24px}
/* Wallet platform and queue headings align with their settings rows. */
#accCapture>.cap-queue{margin-top:8px}
/* Keep the summary compact and the limit controls ahead of secondary cards. */
@media(min-width:761px){
  #page-budgets #bLimitsWrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  #page-budgets #bLimitsWrap>.b-side{display:contents}
  #page-budgets #bLimitsWrap>.b-limits{grid-column:1 / -1;grid-row:2}
  #page-budgets #bLimitsWrap>.b-side>.card:has(#bSum){grid-column:1 / -1;grid-row:1}
  #page-budgets #bLimitsWrap>.b-side>.b-recurring{grid-column:1;grid-row:3;align-self:start}
  #page-budgets #bLimitsWrap>.b-side>.b-goals{grid-column:2;grid-row:3;margin-top:0}
}
@media(max-width:760px){
  #familyMembers .setrow:has([data-manage=family]){display:grid;grid-template-columns:minmax(0,1fr) auto}
  #familyMembers .setrow:has([data-manage=family]) .mcell{display:contents}
  #familyMembers .setrow:has([data-manage=family]) .mcell>.ava{grid-column:1;grid-row:1}
  #familyMembers .setrow:has([data-manage=family]) .mcell>div{grid-column:1 / -1;grid-row:1;padding-left:48px}
  #familyMembers [data-manage=family]{grid-column:2;grid-row:1;align-self:start;font-size:12px}
  #familyMembers .member-name{padding-right:76px}
  .sub-cal-cell{height:44px}
  .sub-row{align-items:start!important}
  .sub-row>span:first-child{flex:1}
  .sub-row .sub-amt{max-width:52%;font-size:13px}
  .sub-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
}