/* Needt Budget design system — tokens.css + components/bundle.css from
   docs/design-system (Claude Design, 2026-10-01), plus the app layer at the end. */

/* Needt Budget tokens — generated from tokens.json */
html:not([data-theme="light"]), html:not([data-theme="light"]) body {
  --ground: #141517;
  --surface-1: #1d1e21;
  --surface-2: #26272b;
  --hairline: rgba(245,246,247,0.08);
  --ink: #f5f6f7;
  --ink-muted: rgba(245,246,247,0.60);
  --ink-faint: rgba(245,246,247,0.40);
  /* Бледный ТЕКСТ (пустые состояния, плейсхолдеры, дни чужого месяца).
     В тёмной теме совпадает с --ink-faint; в светлой 0.40 давал 2.5:1. */
  --ink-faint-text: rgba(245,246,247,0.40);
  --accent: #7fe0f0;
  --accent-soft: rgba(127,224,240,0.14);
  --on-accent: #0b1f24;
  --card-pink: #f6c3d8;
  --card-pink-2: #fde9f0;
  --card-cyan: #9fe6f3;
  --card-cyan-2: #e2f8fc;
  --card-peach: #efc6aa;
  --card-peach-2: #f9e6d8;
  --card-mint: #a8ecb0;
  --card-mint-2: #e3f9e6;
  --on-card: #16171a;
  --on-card-muted: rgba(22,23,26,0.72);
  --success: #6fd6a0;
  --danger: #ff8a80;
  --shadow-raised: 0 0 0 1px rgba(245,246,247,0.06);
  --shadow-inset: inset 0 0 0 1px rgba(245,246,247,0.06);
}

html[data-theme="light"], html[data-theme="light"] body {
  --ground: #f2f3f5;
  --surface-1: #ffffff;
  --surface-2: #e8eaed;
  --hairline: rgba(18,19,20,0.08);
  --ink: #121314;
  --ink-muted: rgba(18,19,20,0.60);
  --ink-faint: rgba(18,19,20,0.40);
  --ink-faint-text: rgba(18,19,20,0.62); /* ≥ 4.8:1 на ground, surface-1 и surface-2 */
  --accent: #0a6f80;
  --accent-soft: rgba(10,111,128,0.10);
  --on-accent: #ffffff;
  --card-pink: #f6c3d8;
  --card-pink-2: #fde9f0;
  --card-cyan: #9fe6f3;
  --card-cyan-2: #e2f8fc;
  --card-peach: #efc6aa;
  --card-peach-2: #f9e6d8;
  --card-mint: #a8ecb0;
  --card-mint-2: #e3f9e6;
  --on-card: #16171a;
  --on-card-muted: rgba(22,23,26,0.72);
  --success: #1b7f4a;
  --danger: #c4352c;
  --shadow-raised: 0 0 0 1px rgba(18,19,20,0.06), 0 1px 2px rgba(18,19,20,0.06), 0 4px 12px rgba(18,19,20,0.05), 0 12px 32px rgba(18,19,20,0.03);
  --shadow-inset: inset 0 0 0 1px rgba(18,19,20,0.08);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --control-sm: 36px;
  --control-lg: 52px;
  --touch-min: 44px;
  --chip: 28px;
  --row: 56px;
  --card-w: 132px;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-draw: 900ms;
  --dur-roll: 1100ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-roll: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-sheet: 320 30;
  --spring-bounce: 220 16;
  --font-sans: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
}

/* Needt Budget — component styles. Every value is a token. */
.nd{font-family:var(--font-sans);font-optical-sizing:auto;font-feature-settings:"cv01","cv02","cv03","cv04","case";color:var(--ink);-webkit-font-smoothing:antialiased}
.nd *{box-sizing:border-box}
.nd .num{font-variant-numeric:tabular-nums}
:where(.nd) :where(button){font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.nd :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nd-row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.nd-muted{color:var(--ink-muted)}

/* IconButton — recessed, round, 36 */
/* Tap targets (20.10): the button is 40x40 with a 2px transparent border (background-clip: padding-box) and a -2px margin, so it draws 36x36 and takes the room it took before; the toggle is 46x40 the same way (28 drawn). Pills, segments and the rest get their 40px from an ::after hit area, below. */
.nd-iconbtn{--ib:var(--control-sm);position:relative;box-sizing:border-box;width:calc(var(--ib) + 4px);height:calc(var(--ib) + 4px);margin:-2px;border:2px solid transparent;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:var(--shadow-inset);display:inline-grid;place-items:center;color:var(--ink);transition:box-shadow .15s,background-color .15s}
.nd-iconbtn::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
.nd-iconbtn,.nd-toggle{background-clip:padding-box!important}
.nd-iconbtn:hover{background:var(--surface-1)}
.nd-iconbtn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.nd-iconbtn:disabled{color:var(--ink-faint);cursor:default}
.nd-iconbtn svg{width:18px;height:18px}
.nd-iconbtn.ghost{background:none;box-shadow:none}

/* Fab — the one solid accent control */
.nd-fab{width:var(--control-lg);height:var(--control-lg);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);display:inline-grid;place-items:center;box-shadow:0 0 0 4px var(--ground)}
.nd-fab svg{width:22px;height:22px}
.nd-fab:disabled{background:var(--surface-2);color:var(--ink-faint)}

/* AccountCard — pastel gradient card */
.nd-card{width:var(--card-w);height:156px;border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;color:var(--on-card);box-shadow:var(--shadow-raised);flex:none}
.nd-card.pink{background:linear-gradient(160deg,var(--card-pink),var(--card-pink-2))}
.nd-card.cyan{background:linear-gradient(160deg,var(--card-cyan),var(--card-cyan-2))}
.nd-card.peach{background:linear-gradient(160deg,var(--card-peach),var(--card-peach-2))}
.nd-card.mint{background:linear-gradient(160deg,var(--card-mint),var(--card-mint-2))}
.nd-card .brand{font-size:13px;font-weight:700;letter-spacing:.02em;font-style:italic}
.nd-card .label{margin-top:auto;font-size:12px;line-height:16px;font-weight:500;color:var(--on-card-muted)}
.nd-card .amt{white-space:nowrap;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.nd-card .mask{margin-top:var(--space-3);font-size:12px;line-height:16px;color:var(--on-card-muted)}
.nd-rail{display:flex;gap:var(--space-3);overflow-x:auto;scrollbar-width:none;padding-bottom:4px}

/* ActionTile */
.nd-tile{width:88px;height:88px;border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--shadow-raised);padding:var(--space-3);display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:box-shadow .15s,background-color .15s}
.nd-tile:hover{background:var(--surface-2)}
.nd-tile .t{font-size:12px;line-height:16px;font-weight:500}
.nd-chip{width:var(--chip);height:var(--chip);border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--on-card);flex:none}
.nd-chip svg{width:16px;height:16px}
/* Чип без тона: тёмная --on-card рассчитана на пастельные тона, на тёмной
   поверхности иконка пропадала (Wallets → Balance history, Edit wallet).
   :where не добавляет веса — тона, логотипы и свой цвет перекрывают. */
.nd-chip:where(:not(.pink,.cyan,.peach,.mint,.has-color,.nd-logo,.late)){background:var(--surface-2);color:var(--ink)}
.nd-chip.pink{background:var(--card-pink)}.nd-chip.cyan{background:var(--card-cyan)}.nd-chip.peach{background:var(--card-peach)}.nd-chip.mint{background:var(--card-mint)}
.nd-chip.round{border-radius:var(--radius-pill);width:36px;height:36px}

/* ListRow */
.nd-list{background:var(--surface-1);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-raised);padding:var(--space-4) var(--space-5)}
.nd-list .date{font-size:11px;line-height:14px;color:var(--ink-muted);margin-bottom:var(--space-2)}
.nd-li{display:flex;align-items:center;gap:var(--space-3);min-height:var(--row)}
.nd-li .txt{flex:1;min-width:0}
.nd-li .ttl{font-size:15px;line-height:20px;font-weight:500}
.nd-li .sub{font-size:13px;line-height:18px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-li .amt{font-size:15px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.nd-li .amt small{display:block;font-size:12px;line-height:16px;color:var(--ink-muted);font-weight:400}
.nd-li .amt.pos{color:var(--success)}
.nd-eyebrow{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--ink-muted)}

/* LineChart */
.nd-chart{position:relative;height:200px}
.nd-chart svg{display:block;overflow:visible}
.nd-chart .grid{stroke:var(--hairline);stroke-dasharray:3 4}
.nd-chart .guide{stroke:var(--accent);stroke-dasharray:2 3;opacity:.7}
.nd-chart .line{fill:none;stroke:var(--accent);stroke-width:2}
.nd-chart .pt{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--radius-pill);background:var(--ground);box-shadow:inset 0 0 0 3px var(--accent)}
.nd-chart .axis{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--ink-muted);padding:0 var(--space-2)}
.nd-tip{position:absolute;transform:translate(-50%,-100%);background:var(--accent);color:var(--on-accent);border-radius:var(--radius-xs);padding:4px 8px;text-align:center;white-space:nowrap}
.nd-tip b{display:block;font-size:13px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums}
.nd-tip span{display:block;font-size:9px;line-height:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;opacity:.8}

/* TabBar */
.nd-tabs{display:flex;align-items:center;justify-content:space-around;height:72px;background:var(--surface-1);border-radius:var(--radius-xl);box-shadow:var(--shadow-raised);padding:0 var(--space-2)}
.nd-tab{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:var(--touch-min);min-height:var(--touch-min);justify-content:center;color:var(--ink-muted);font-size:11px;line-height:14px;font-weight:500}
.nd-tab svg{width:20px;height:20px}
.nd-tab[aria-current="page"]{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.nd *{transition-duration:.01ms!important}}

/* ───────── Motion ───────── */
.nd{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--dur-fast:140ms;--dur-base:240ms;--dur-slow:420ms;--dur-draw:900ms}
@media (prefers-reduced-motion:reduce){.nd{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-draw:1ms}}
.nd-press{transition:transform var(--dur-fast) var(--ease-out)}
.nd-press:active{transform:scale(.96)}
html{transition:background-color var(--dur-base,240ms)}

.nd .nd-noanim,.nd .nd-noanim *{transition:none}

/* ───────── Buttons ───────── */
.nd-btn{height:var(--control-lg);border-radius:var(--radius-pill);padding:0 var(--space-6);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:15px;font-weight:600;line-height:20px}
.nd-btn.primary{background:var(--accent);color:var(--on-accent)}
.nd-btn.soft{background:var(--accent-soft);color:var(--accent)}
.nd-btn.quiet{background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-inset)}
.nd-btn.danger{background:none;color:var(--danger)}
.nd-btn.block{width:100%}
.nd-btn:disabled{background:var(--surface-2);color:var(--ink-faint);box-shadow:none}
.nd-btn svg{width:18px;height:18px}
.nd-btn.loading{color:transparent;position:relative}
.nd-btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--on-accent);border-right-color:transparent;animation:nd-spin .7s linear infinite}
@keyframes nd-spin{to{transform:rotate(360deg)}}

/* ───────── Segmented ───────── */
.nd-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);box-shadow:var(--shadow-inset);border-radius:var(--radius-pill);padding:3px;height:var(--control-sm)}
.nd-seg button{position:relative;z-index:1;padding:0 var(--space-4);font-size:13px;font-weight:500;color:var(--ink-muted);border-radius:var(--radius-pill);white-space:nowrap}
.nd-seg button[aria-selected="true"]{color:var(--ink)}
.nd-seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;border-radius:var(--radius-pill);background:var(--surface-1);box-shadow:var(--shadow-raised);transition:transform var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out)}
.nd-seg.block{display:grid;width:100%}

/* ───────── Chips ───────── */
.nd-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);font-size:12px;font-weight:500;line-height:16px;background:var(--surface-2);color:var(--ink-muted);white-space:nowrap}
.nd-pill[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.nd-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.nd-pill.s-listed{color:var(--accent);background:var(--accent-soft)}
.nd-pill.s-sold{color:var(--success);background:none;box-shadow:inset 0 0 0 1px var(--hairline)}
.nd-pill.s-shipped{color:var(--ink);background:var(--surface-2)}
.nd-pill.s-draft{color:var(--ink-muted);background:var(--surface-2)}
.nd-pill.s-over{color:var(--danger);background:none;box-shadow:inset 0 0 0 1px var(--hairline)}

/* ───────── Toggle ───────── */
.nd-toggle{box-sizing:border-box;width:46px;height:40px;margin-block:-6px;border-block:6px solid transparent;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:var(--shadow-inset);position:relative;flex:none}
.nd-toggle::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-muted);transition:transform var(--dur-base) var(--ease-spring),background-color var(--dur-fast)}
.nd-toggle[aria-checked="true"]{background:var(--accent)}
.nd-toggle[aria-checked="true"]::before{transform:translateX(18px);background:var(--on-accent)}

/* ───────── Budget bar ───────── */
.nd-bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.nd-bar i{display:block;height:100%;border-radius:inherit;transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--dur-slow) var(--ease-out)}
.nd-bar.pink i{background:var(--card-pink)}.nd-bar.cyan i{background:var(--card-cyan)}.nd-bar.peach i{background:var(--card-peach)}.nd-bar.mint i{background:var(--card-mint)}.nd-bar.muted i{background:var(--ink-muted)}.nd-bar.over i{background:var(--danger)}
.nd-budget{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);row-gap:var(--space-2);align-items:center;padding:var(--space-3) 0}
.nd-budget .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.nd-budget .ttl{font-size:15px;line-height:20px;font-weight:500}
.nd-budget .lim{font-size:13px;line-height:18px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nd-budget .lim b{color:var(--ink);font-weight:500}
.nd-budget .nd-bar{grid-column:2}

/* ───────── Donut ───────── */
.nd-donut{position:relative;width:200px;height:200px;margin:0 auto}
.nd-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.nd-donut circle{fill:none;stroke-width:18;stroke-linecap:round;transition:stroke-dasharray var(--dur-slow) var(--ease-out),stroke-dashoffset var(--dur-slow) var(--ease-out),opacity var(--dur-fast),stroke-width var(--dur-fast)}
.nd-donut circle.dim{opacity:.25}
.nd-donut circle.on{stroke-width:22}
.nd-donut .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.nd-donut .c b{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nd-donut .c span{font-size:12px;line-height:16px;color:var(--ink-muted);text-wrap:balance;overflow-wrap:break-word}
/* The label lives in the inner circle (radius 71 of 100 once the 18-wide ring is taken off), not in the square: at the full width «Ausgegeben diesen Monat» ran into the ring (20.10). 38px a side leaves 124px, so it wraps to two lines instead. */
.nd-donut .c{padding-inline:38px}
.s-pink{stroke:var(--card-pink)}.s-cyan{stroke:var(--card-cyan)}.s-peach{stroke:var(--card-peach)}.s-mint{stroke:var(--card-mint)}.s-muted{stroke:var(--ink-muted)}.s-faint{stroke:var(--ink-faint)}

/* ───────── Toast ───────── */
.nd-toast{position:absolute;left:50%;bottom:108px;transform:translate(-50%,16px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4) 0 var(--space-3);border-radius:var(--radius-pill);background:var(--ink);color:var(--ground);font-size:13px;font-weight:500;z-index:40;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-out);white-space:nowrap}
.nd-toast svg{width:18px;height:18px;color:var(--success)}
.nd-toast.on{transform:translate(-50%,0);opacity:1}

/* ───────── Sheet + keypad ───────── */
.nd-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:30;transition:opacity var(--dur-base) var(--ease-out)}
.nd-sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;background:var(--surface-1);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-raised);padding:var(--space-2) var(--space-5) var(--space-8);transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-out)}
.nd-sheet .grab{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--hairline);margin:0 auto var(--space-4);background:var(--ink-faint)}
.nd-open .nd-scrim{opacity:1;pointer-events:auto}
.nd-open .nd-sheet{transform:none}
.nd-amount{text-align:center;padding:var(--space-4) 0 var(--space-2)}
.nd-amount .v{font-size:44px;line-height:52px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:6px}
.nd-amount .v small{font-size:18px;font-weight:500;color:var(--ink-muted);letter-spacing:0}
.nd-amount .v .d{display:inline-block;animation:nd-pop var(--dur-base) var(--ease-spring)}
@keyframes nd-pop{from{transform:translateY(8px) scale(.8);opacity:0}}
.nd-amount.shake{animation:nd-shake 320ms var(--ease-out)}
@keyframes nd-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.nd-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-4) 0}
.nd-keys button{height:52px;border-radius:var(--radius-md);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;display:grid;place-items:center}
.nd-keys button:active{background:var(--surface-2);transform:scale(.94)}
.nd-keys svg{width:22px;height:22px}
.nd-hscroll{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--space-5));padding:0 var(--space-5)}
/* A row that scrolls sideways also clips vertically: 6px of room above and below, given back as a negative margin, lets the pills' 40px hit area (the ::after at the end of this file) reach full height (20.10) */
.nd-hscroll{margin-block:-6px;padding-block:6px}

/* ───────── Screen scaffolding ───────── */
.nd-screen{position:relative;width:390px;height:844px;overflow:hidden;background:var(--ground);color:var(--ink);isolation:isolate}
.nd-status{height:47px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px 34px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.nd-status svg{height:12px}
.nd-scroll{position:absolute;top:47px;left:0;right:0;bottom:0;overflow-y:auto;scrollbar-width:none;padding-bottom:120px}
.nd-scroll::-webkit-scrollbar{display:none}
.nd-top{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-5);height:52px}
.nd-top .ttl{font-size:17px;line-height:22px;font-weight:600}
.nd-pad{padding:0 var(--space-5)}
.nd-sec{margin-top:var(--space-6)}
.nd-h{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--space-3)}
.nd-hrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.nd-hrow .nd-h{margin:0}
.nd-link{font-size:13px;font-weight:500;color:var(--accent)}
.nd-lbl{font-size:13px;line-height:18px;color:var(--ink-muted)}
.nd-big{font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nd-fig{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nd-delta{font-size:13px;line-height:18px;font-weight:500;color:var(--success);font-variant-numeric:tabular-nums}
.nd-delta.neg{color:var(--danger)}
.nd-group{background:var(--surface-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:var(--space-1) var(--space-4)}
.nd-group .nd-li + .nd-li{box-shadow:0 -1px 0 var(--hairline)}
.nd-rail{scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--space-5));padding:0 var(--space-5) 4px;scroll-padding:0 var(--space-5)}
.nd-rail > *{scroll-snap-align:start}
.nd-card{cursor:pointer;transition:transform var(--dur-fast) var(--ease-out)}
.nd-card:active{transform:scale(.97)}
.nd-li.tap{cursor:pointer;border-radius:var(--radius-md)}
.nd-li.tap:active{transform:scale(.985)}
.nd-tabwrap{position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-6);z-index:20}
.nd-tabs .nd-fab{transform:translateY(-10px)}
.nd-tabs .nd-fab svg{transition:transform var(--dur-base) var(--ease-spring)}
.nd-open .nd-tabs .nd-fab svg{transform:rotate(45deg)}
.nd-tab{position:relative}
.nd-tab::after{content:"";position:absolute;bottom:-2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--dur-base) var(--ease-spring)}
.nd-tab[aria-current="page"]::after{transform:scale(1)}
.nd-kv{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:15px;line-height:20px}
.nd-kv + .nd-kv{box-shadow:0 -1px 0 var(--hairline)}
.nd-kv span:first-child{color:var(--ink-muted)}
.nd-kv .v{font-weight:500;display:flex;align-items:center;gap:var(--space-2)}
.nd-kv svg{width:16px;height:16px;color:var(--ink-faint)}

/* screen enter + stagger (state change the user caused: open/tab switch) */
.nd-enter > *{animation:nd-rise var(--dur-slow) var(--ease-out) both}
.nd-enter > *:nth-child(2){animation-delay:40ms}.nd-enter > *:nth-child(3){animation-delay:80ms}.nd-enter > *:nth-child(4){animation-delay:120ms}.nd-enter > *:nth-child(5){animation-delay:160ms}.nd-enter > *:nth-child(6){animation-delay:200ms}.nd-enter > *:nth-child(n+7){animation-delay:240ms}
@keyframes nd-rise{from{opacity:0;transform:translateY(10px)}}
.nd-push{animation:nd-push var(--dur-slow) var(--ease-out) both}
@keyframes nd-push{from{opacity:0;transform:translateX(24px)}}
.nd-skel{background:var(--surface-2);border-radius:var(--radius-sm);animation:nd-pulse 1.2s ease-in-out infinite}
@keyframes nd-pulse{50%{opacity:.5}}

/* Chart extras */
.nd-chart{touch-action:none;cursor:crosshair;user-select:none}
.nd-chart .line.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:nd-draw var(--dur-draw) var(--ease-out) forwards}
@keyframes nd-draw{to{stroke-dashoffset:0}}
.nd-chart .pt,.nd-chart .nd-tip,.nd-chart .guidev{transition:left 80ms linear,top 80ms linear,opacity var(--dur-fast)}
.nd-chart .guidev{position:absolute;top:0;width:0;border-left:1px dashed var(--accent);opacity:.6}
.nd-chart .axis span.on{color:var(--ink)}

/* Splash */
.nd-splash{position:absolute;inset:0;display:grid;place-items:center;background:var(--ground)}
.nd-splash .mk{width:96px;height:96px;border-radius:28px;background:var(--accent);display:grid;place-items:center;animation:nd-mk 700ms var(--ease-spring) both}
.nd-splash .mk path{stroke:var(--on-accent);stroke-width:7;fill:none;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;animation:nd-dash 700ms 300ms var(--ease-out) forwards}
.nd-splash .mk circle{fill:var(--on-accent);transform-origin:48px 44px;transform:translateY(-30px);opacity:0;animation:nd-drop 520ms 850ms var(--ease-spring) forwards}
@keyframes nd-mk{from{transform:scale(.6);opacity:0}}
@keyframes nd-dash{to{stroke-dashoffset:0}}
@keyframes nd-drop{to{transform:none;opacity:1}}
.nd-splash .wm{margin-top:var(--space-6);opacity:0;animation:nd-in var(--dur-slow) 1100ms var(--ease-out) forwards}
@keyframes nd-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nd-splash .foot{position:absolute;left:var(--space-6);right:var(--space-6);bottom:48px;display:grid;gap:var(--space-3);opacity:0;animation:nd-in var(--dur-slow) 1400ms var(--ease-out) forwards}

/* ───────── Odometer ───────── */
.nd-odo{--lh:1.18em;display:inline-flex;align-items:flex-start;line-height:var(--lh);height:var(--lh);overflow:hidden;font-variant-numeric:tabular-nums;vertical-align:top}
.nd-odo .col{display:inline-block;height:var(--lh);overflow:hidden;vertical-align:top;padding-inline-end:.07em;margin-inline-end:-.07em}
/* A negative letter-spacing (the Quest numerals use -.045em) trims the box of a digit by that much on the right, while the glyph still draws its full width — the box clipped the last stroke of a «0» (20.10: «3'280» read «3'28C»). Every column gets a clip area .07em wider than its box and gives it back as a negative margin, so the layout does not move; the figure does the same, or its own overflow:hidden would cut the last column at the old edge. */
.nd-odo{padding-inline-end:.07em;margin-inline-end:-.07em}
.nd-odo .strip{display:block;line-height:var(--lh);text-align:center;transition:transform 1100ms cubic-bezier(.16,1,.3,1)}
/* A screen rule that makes the figure a block (.nd-mfig b) turns the columns into inline boxes: an overflow:hidden box sits on the baseline by its bottom edge, so the digits rode above «CHF» (06.10). Top-aligned, one line height — the same in a block as in the flex row. */
.nd-odo .sym{display:inline-block;white-space:pre;vertical-align:top;line-height:var(--lh)}
.pos,.nd-fig.pos,.nd-big.pos{color:var(--success)}
@media (prefers-reduced-motion:reduce){.nd-odo .strip{transition-duration:1ms}}

/* ───────── Tone fills ───────── */
.bg-pink{background:var(--card-pink)}.bg-cyan{background:var(--card-cyan)}.bg-peach{background:var(--card-peach)}.bg-mint{background:var(--card-mint)}.bg-muted{background:var(--ink-muted)}.bg-faint{background:var(--ink-faint)}
.t-pink{fill:var(--card-pink)}.t-cyan{fill:var(--card-cyan)}.t-peach{fill:var(--card-peach)}.t-mint{fill:var(--card-mint)}.t-muted{fill:var(--ink-muted)}
.f-pink{fill:var(--card-pink)}.f-cyan{fill:var(--card-cyan)}.f-peach{fill:var(--card-peach)}.f-mint{fill:var(--card-mint)}.f-muted{fill:var(--ink-muted)}

/* ───────── Spark ───────── */
.nd-spark{display:block;overflow:visible}
.nd-spark path{fill:none;stroke-width:1.75;stroke-linecap:round}
.nd-spark.on-card path{stroke:var(--on-card-muted)}
.nd-spark.accent path{stroke:var(--accent)}
.nd-card .nd-spark{margin-top:var(--space-2)}

/* ───────── Ring ───────── */
.nd-ring{position:relative;width:64px;height:64px;flex:none}
.nd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.nd-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.nd-ring .trk{stroke:var(--surface-2)}
.nd-ring .val{stroke:var(--accent)}
.nd-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.nd-left{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4)}
.nd-left > svg{width:18px;height:18px;color:var(--ink-faint)}

/* ───────── Bars ───────── */
.nd-bars .plot{position:relative;display:flex;align-items:flex-end;gap:6px;height:120px}
.nd-bars .b{flex:1;height:100%;display:flex;align-items:flex-end;border-radius:6px}
.nd-bars .b i{display:block;width:100%;height:calc(var(--h) * 100%);min-height:4px;border-radius:6px;background:var(--surface-2);transform-origin:bottom;transition:background-color var(--dur-base),opacity var(--dur-base)}
.nd-bars .b.hi i{background:var(--card-peach)}
.nd-bars .b:hover i{background:var(--ink-faint)}
.nd-bars .b.hi:hover i{background:var(--card-peach)}
.nd-bars.focus .b i{opacity:.35}
.nd-bars.focus .b.on i{opacity:1;background:var(--accent)}
.nd-bars .avg{position:absolute;left:0;right:0;border-top:1px dashed var(--ink-faint);pointer-events:none;z-index:1}
.nd-bars .avg em{position:absolute;right:0;top:-18px;font-style:normal;font-size:11px;line-height:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nd-bars .lab{display:flex;gap:6px;margin-top:8px}
.nd-bars .lab span{flex:1;text-align:center;font-size:11px;line-height:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ───────── Legend ───────── */
.nd-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:var(--space-5)}
.nd-legend button{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border-radius:var(--radius-sm);font-size:13px;line-height:18px;text-align:left}
.nd-legend button:hover{background:var(--surface-1)}
.nd-legend button i{width:10px;height:10px;border-radius:3px;flex:none}
.nd-legend button span{flex:1;color:var(--ink-muted)}
.nd-legend button b{font-weight:500;font-variant-numeric:tabular-nums}
.nd-legend button.dim{opacity:.35}

/* ───────── Heatmap ───────── */
.nd-heat{display:grid;gap:6px}
.nd-heat .days,.nd-heat .cells{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.nd-heat .days span{font-size:11px;line-height:14px;color:var(--ink-muted);text-align:center}
.nd-heat i{display:block;height:30px;border-radius:8px;animation:nd-cell var(--dur-slow) var(--ease-spring) both}
@keyframes nd-cell{from{transform:scale(0);opacity:0}}
.nd-heat .l0{background:var(--surface-2)}
.nd-heat .l1{background:var(--accent-soft)}
.nd-heat .l2{background:var(--accent);opacity:.38}
.nd-heat .l3{background:var(--accent);opacity:.68}
.nd-heat .l4{background:var(--accent)}
.nd-heat .key{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:6px}
.nd-heat .key i{width:12px;height:12px;border-radius:3px;animation:none}
.nd-heat .key span{font-size:11px;color:var(--ink-muted);margin:0 4px}

/* ───────── Flow ───────── */
.nd-flow{position:relative}
.nd-flow svg{display:block;overflow:visible}
.nd-flow .rb{opacity:.42;transform-origin:left;animation:nd-flowin 900ms var(--ease-out) both;transition:opacity var(--dur-base)}
@keyframes nd-flowin{from{opacity:0;transform:scaleX(.05)}}
.nd-flow.focus .rb{opacity:.1}
.nd-flow.focus .rb.on{opacity:.7}
.nd-f-in{fill:var(--ink)}
.nd-flow .li,.nd-flow .lo{position:absolute;transform:translateY(-50%);display:grid;font-size:11px;line-height:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums;pointer-events:auto}
.nd-flow .li{left:0;width:70px}
.nd-flow .lo{right:0;width:84px;white-space:nowrap;text-align:left;cursor:default;padding:4px 0}
.nd-flow b{font-size:12px;font-weight:600;color:var(--ink)}

/* ───────── Stacked share bar ───────── */
.nd-stack{display:flex;gap:3px;height:10px;margin-top:var(--space-4)}
.nd-stack i{display:block;height:100%;border-radius:var(--radius-pill);width:calc(var(--w) * 100%);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.nd-stack.on i{transform:none}
.nd-stack.on i:nth-child(2){transition-delay:60ms}.nd-stack.on i:nth-child(3){transition-delay:120ms}.nd-stack.on i:nth-child(4){transition-delay:180ms}.nd-stack.on i:nth-child(5){transition-delay:240ms}.nd-stack.on i:nth-child(6){transition-delay:300ms}

/* ───────── Margin chart ───────── */
.nd-margin{display:grid;gap:12px}
.nd-margin .mrow{display:grid;grid-template-columns:104px 1fr 44px;align-items:center;gap:10px}
.nd-margin .n{font-size:12px;line-height:16px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-margin .trk{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--surface-2)}
.nd-margin .trk i{position:absolute;top:0;bottom:0;border-radius:var(--radius-pill);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out)}
.nd-margin .cost{left:0;width:calc(var(--w) * 100%);background:var(--ink-faint)}
.nd-margin .gain{left:calc(var(--l) * 100% + 2px);width:calc(var(--w) * 100%);background:var(--card-mint);transition-delay:300ms}
.nd-margin.on .trk i{transform:none}
.nd-margin b{font-size:12px;font-weight:600;color:var(--success);text-align:right}

/* ───────── Hero card, avatar, layers ───────── */
.nd-card.nd-hero{width:100%;height:200px;border-radius:var(--radius-xl);padding:var(--space-5)}
.nd-card.nd-hero .amt{font-size:28px;line-height:34px;letter-spacing:-.02em}
.nd-card.nd-hero .label{margin-top:var(--space-6)}
.nd-avatar{width:76px;height:76px;margin:0 auto;border-radius:50%;background:linear-gradient(140deg,var(--card-pink),var(--card-cyan));color:var(--on-card);display:grid;place-items:center;font-size:30px;font-weight:600;box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--hairline)}
.nd-app{margin:0 auto}
.nd-layer{position:absolute;inset:0;background:var(--ground);will-change:transform}
.nd-ghost{pointer-events:none;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.nd-chart svg{width:auto}
.nd-chart .area{transition:opacity var(--dur-base)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

.nd-tab{text-decoration:none}
.nd-donut .c{justify-items:center}
.nd-hero-chip{width:64px!important;height:64px!important;margin:0 auto}
.nd-hero-chip svg{width:28px;height:28px}
.nd-legend button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-legend button b{white-space:nowrap}
.nd-legend{grid-template-columns:1fr 1fr}
.nd-legend button{min-width:0}
.nd .date{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}


/* ═════════ Second wave ═════════ */
/* To do top tabs */
.nd-toptabs{position:relative;display:flex;gap:4px;padding:0 var(--space-5);margin:0 0 var(--space-4);overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--hairline)}
.nd-toptabs a{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;white-space:nowrap}
.nd-toptabs a[aria-selected="true"]{color:var(--ink)}
.nd-toptabs .ind{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);transition:transform var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out)}
.nd-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:600;font-style:normal;line-height:1}
/* goal + pace */
.nd-goal{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-3)}
.nd-goal .nd-ring{width:72px;height:72px}
.nd-pace{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--surface-2);margin-top:var(--space-4)}
.nd-pace i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 900ms var(--ease-out)}
.nd-pace b{position:absolute;top:-4px;width:2px;height:16px;margin-left:-1px;border-radius:2px;background:var(--ink)}
.nd-unit{font-size:13px;font-weight:500;color:var(--ink-muted);margin-left:6px;letter-spacing:0}
/* quest mini */
.nd-quest-mini .qm{display:grid;grid-template-columns:110px 1fr 32px;align-items:center;gap:10px;min-height:28px;font-size:13px}
.nd-quest-mini .qm span{color:var(--ink-muted)}
.nd-quest-mini .qm b{text-align:right;font-weight:500}
.nd-quest-mini .dots{display:flex;gap:4px}
.nd-quest-mini .dots i{flex:1;height:8px;border-radius:var(--radius-pill)}
.nd-quest-mini .dots i:not(.on){background:var(--surface-2)}
.nd-quest-mini .dots i.on{animation:nd-cell var(--dur-slow) var(--ease-spring) both}
/* runway dots */
.nd-runway{display:flex;gap:3px;margin-top:10px}
.nd-runway i{flex:1;height:6px;border-radius:var(--radius-pill);background:var(--surface-2);animation:nd-cell var(--dur-slow) var(--ease-spring) both;animation-delay:var(--d)}
.nd-runway i.on{background:var(--card-mint)}
/* week strip */
.nd-week{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.nd-week div{display:grid;justify-items:center;gap:4px;padding:8px 0;border-radius:var(--radius-md)}
.nd-week div.today{background:var(--surface-1);box-shadow:var(--shadow-raised)}
.nd-week span{font-size:11px;line-height:14px;color:var(--ink-muted)}
.nd-week b{font-size:15px;font-weight:600}
.nd-week i{width:6px;height:6px;border-radius:50%;animation:nd-cell var(--dur-slow) 300ms var(--ease-spring) both}
.nd-week i.no{background:none}
/* tips */
.nd-tips{display:grid;gap:8px}
.nd-tip-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-raised)}
.nd-tip-card p{margin:0;font-size:13px;line-height:19px;color:var(--ink-muted);text-wrap:pretty}
.nd-tip-card p b{color:var(--ink);font-weight:500}
/* sort */
.nd-sortprog{height:4px;border-radius:var(--radius-pill);background:var(--surface-2);margin:8px 0 0;overflow:hidden}
.nd-sortprog i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out)}
.nd-stackwrap{position:relative;height:232px;margin:16px var(--space-5) 12px}
.nd-opcard{position:absolute;inset:0;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--shadow-raised);padding:var(--space-5);display:flex;flex-direction:column;transform:translateY(calc(var(--i) * 12px)) scale(calc(1 - var(--i) * .05));opacity:calc(1 - var(--i) * .3);transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow);touch-action:pan-y;user-select:none;cursor:grab}
.nd-opcard:not(.front){pointer-events:none}
.nd-opcard .row1{display:flex;justify-content:space-between;align-items:center}
.nd-opcard .nd-pill svg{width:14px;height:14px}
.nd-opcard .m{font-size:20px;line-height:26px;font-weight:600;margin-top:var(--space-4)}
.nd-opcard .raw{font-size:11px;line-height:14px;color:var(--ink-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.nd-opcard .v{font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em;margin-top:auto}
.nd-opcard .guess{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-muted);margin-top:6px}
.nd-opcard .guess svg{width:14px;height:14px;color:var(--accent)}
.nd-opcard .guess b{color:var(--accent);font-weight:600}
.nd-opcard .stamp{position:absolute;top:24px;right:20px;padding:4px 10px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 2px currentColor;color:var(--success);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transform:rotate(8deg);animation:nd-pop var(--dur-base) var(--ease-spring)}
.nd-opcard.skipping{box-shadow:var(--shadow-raised),inset 0 0 0 2px var(--ink-faint)}
.nd-empty-inline{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;text-align:center;gap:6px;animation:nd-in var(--dur-slow) var(--ease-out) both}
.nd-empty-inline .nd-emptyart{width:96px;height:96px}
.nd-empty-inline span{font-size:13px;line-height:18px;color:var(--ink-muted);max-width:260px}
.nd-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nd-catgrid button{display:grid;justify-items:center;gap:6px;padding:10px 4px;border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--shadow-raised);font-size:11px;line-height:14px;font-weight:500}
.nd-catgrid button:hover{background:var(--surface-2)}
.nd-sortacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.nd-sortacts .nd-btn{height:var(--control-sm);font-size:13px;padding:0 8px}
/* held */
.nd-held{overflow:hidden;transition:height var(--dur-slow) var(--ease-out),opacity var(--dur-base)}
.nd-held + .nd-held{box-shadow:0 -1px 0 var(--hairline)}
.nd-held .acts{display:flex;gap:8px;padding:0 0 12px 48px}
.nd-held .acts .nd-btn{height:32px;font-size:12px;padding:0 12px}
.nd-held.got .nd-li{animation:nd-got 450ms var(--ease-out) both}
.nd-held.cancelled .nd-li{opacity:.4;text-decoration:line-through}
.nd-held.gone{height:0!important;opacity:0}
@keyframes nd-got{50%{transform:translateX(6px)}100%{transform:translateX(0)}}
.nd-held.got .nd-chip{background:var(--success)!important;color:var(--ground)}
.nd-chip.late{background:var(--surface-2);color:var(--danger)}
.nd-li .amt small.late{color:var(--danger)}
/* quest */
.nd-questhero{display:flex;justify-content:space-between;align-items:center;gap:16px}
.nd-questhero .nd-ring{width:76px;height:76px}
.nd-qrow{display:flex;align-items:center;gap:12px;padding:14px 0}
.nd-qrow + .nd-qrow{box-shadow:0 -1px 0 var(--hairline)}
.nd-qrow .txt{flex:1;min-width:0;display:grid;gap:6px}
.nd-qrow .top{display:flex;justify-content:space-between;align-items:baseline}
.nd-qrow .ttl{font-size:15px;line-height:20px;font-weight:500}
.nd-qrow .nd-lbl b{color:var(--ink);font-weight:600}
.nd-qrow .segs{display:flex;gap:4px}
.nd-qrow .segs i{flex:1;height:8px;border-radius:var(--radius-pill)}
.nd-qrow .segs i:not(.on){background:var(--surface-2)}
.nd-qrow .segs i.pop{animation:nd-cell var(--dur-slow) var(--ease-spring)}
.nd-qrow.complete .nd-iconbtn{background:var(--success);color:var(--ground);box-shadow:none}
.nd-qhist{display:flex;align-items:flex-end;gap:8px;height:110px}
.nd-qhist > div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.nd-qhist i{display:block;width:100%;height:calc(var(--h) * 82%);border-radius:6px;background:var(--surface-2);transform-origin:bottom;animation:nd-grow 600ms var(--ease-spring) both;animation-delay:var(--d)}
.nd-qhist i.full{background:var(--card-mint)}
.nd-qhist .now i{background:var(--accent)}
.nd-qhist span{font-size:11px;line-height:14px;color:var(--ink-muted)}
.nd-qhist .now span{color:var(--ink);font-weight:600}
@keyframes nd-grow{from{transform:scaleY(0)}}
/* fields */
.nd-field{display:grid;gap:6px}
.nd-field > span{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}
.nd-field input,.nd-pw{height:48px;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:var(--shadow-inset);border:0;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:none;width:100%;box-sizing:border-box}
.nd-field input::placeholder{color:var(--ink-faint-text)}
.nd-field input:focus-visible,.nd-pw:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.nd-pw{display:flex;align-items:center;padding:0 4px 0 0}
.nd-pw input{box-shadow:none!important;background:none;flex:1}
.nd-pw button{width:40px;height:40px;display:grid;place-items:center;color:var(--ink-muted)}
.nd-pw button.on{color:var(--accent)}
.nd-pw svg{width:18px;height:18px}
.nd-stepper{display:flex;align-items:center;justify-content:space-between;height:48px;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:var(--shadow-inset);padding:0 4px}
.nd-stepper button{width:40px;height:40px;border-radius:var(--radius-sm);font-size:20px}
.nd-stepper button:active{background:var(--surface-1)}
.nd-stepper b{font-size:17px}
.bump{animation:nd-bump var(--dur-base) var(--ease-spring)}
@keyframes nd-bump{40%{transform:scale(1.18)}}
.nd-iconpick{width:40px;height:40px;padding:0;justify-content:center}
.nd-iconpick svg{width:18px;height:18px}
.nd-conf{position:absolute;width:8px;height:8px;border-radius:2px;z-index:60;pointer-events:none}
/* review */
.nd-review-h{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em;margin:8px 0 0;text-wrap:balance}
.nd-stat{padding:12px;display:grid;gap:2px}
.nd-stat b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.nd-stat .nd-odo{--lh:1.3em}
.nd-stat .nd-delta{font-size:12px}
.nd-diverge{display:grid;gap:10px}
.nd-diverge .dr{display:grid;grid-template-columns:96px 1fr 44px;gap:10px;align-items:center}
.nd-diverge .n{font-size:12px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-diverge .axis{position:relative;height:10px}
.nd-diverge .axis::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--ink-faint)}
.nd-diverge i{position:absolute;top:0;height:100%;width:calc(var(--w) * 50%);border-radius:var(--radius-pill);transform:scaleX(0);transition:transform 700ms var(--ease-spring)}
.nd-diverge i.less{right:50%;background:var(--card-mint);transform-origin:right}
.nd-diverge i.more{left:50%;background:var(--card-pink);transform-origin:left}
.nd-diverge.on i{transform:none}
.nd-diverge .dr:nth-child(2) i{transition-delay:60ms}.nd-diverge .dr:nth-child(3) i{transition-delay:120ms}.nd-diverge .dr:nth-child(4) i{transition-delay:180ms}.nd-diverge .dr:nth-child(5) i{transition-delay:240ms}
.nd-diverge b{font-size:12px;font-weight:600;text-align:right}
.neg{color:var(--danger)}
.nd-qdone{display:flex;gap:12px;align-items:center;padding:14px 16px}
.nd-qdone b{font-weight:600}
.nd-reco{border-radius:var(--radius-xl);padding:var(--space-5);background:linear-gradient(150deg,var(--card-cyan),var(--card-cyan-2));color:var(--on-card)}
.nd-reco p{margin:8px 0 14px;font-size:15px;line-height:22px;text-wrap:pretty}
/* empty art */
.nd-emptyart{position:relative;display:grid;place-items:center;width:120px;height:120px}
.nd-emptyart svg{position:absolute;inset:0}
.nd-emptyart circle{fill:none;stroke-width:2}
.nd-emptyart .r1{stroke:var(--hairline);stroke-dasharray:4 6;animation:nd-spin 30s linear infinite;transform-origin:center}
.nd-emptyart .r2{fill:var(--surface-1);stroke:var(--hairline)}
.nd-emptyart .i{width:40px;height:40px;color:var(--accent);position:relative;animation:nd-float 3s ease-in-out infinite}
.nd-emptyart.err .i{color:var(--danger)}
@keyframes nd-float{50%{transform:translateY(-4px)}}
.nd-state{display:grid;justify-items:center;text-align:center;padding:72px 32px 0;gap:4px;animation:nd-in var(--dur-slow) var(--ease-out) both}
.nd-state h2{font-size:20px;line-height:26px;font-weight:600;margin:16px 0 4px;text-wrap:balance}
.nd-state p{font-size:15px;line-height:22px;color:var(--ink-muted);margin:0 0 20px;text-wrap:pretty;max-width:300px}
/* undo bar */
.nd-undo{position:absolute;left:var(--space-4);right:var(--space-4);bottom:108px;z-index:45;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 6px 0 16px;border-radius:var(--radius-md);background:var(--ink);color:var(--ground);overflow:hidden;transform:translateY(24px);opacity:0;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base)}
.nd-undo.on{transform:none;opacity:1}
.nd-undo .txt{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-undo button{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--ground)}
.nd-undo button:hover{background:rgba(127,127,127,.2)}
.nd-undo button svg{width:16px;height:16px}
.nd-undo i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform-origin:left;animation:nd-countdown linear forwards}
@keyframes nd-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* chat */
.nd-chat{position:absolute;top:99px;left:0;right:0;bottom:132px;overflow-y:auto;padding:8px var(--space-5) 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.nd-day{align-self:center;font-size:11px;color:var(--ink-muted);margin:4px 0}
.msg{max-width:84%;animation:nd-msg var(--dur-slow) var(--ease-spring) both}
@keyframes nd-msg{from{opacity:0;transform:translateY(10px) scale(.96)}}
.msg p{margin:0;padding:10px 14px;font-size:15px;line-height:21px;border-radius:20px}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;display:grid;gap:8px}
.msg.ai p{background:var(--surface-1);box-shadow:var(--shadow-raised);border-bottom-left-radius:6px}
.msg.ai p b{font-weight:600}
.msg.typing p{display:flex;gap:4px;padding:14px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-muted);animation:nd-typing 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes nd-typing{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.nd-aicard{padding:14px 16px;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-raised);min-width:250px}
.nd-minibars{display:grid;gap:6px;margin:8px 0}
.nd-minibars div{display:grid;grid-template-columns:70px 1fr 36px;gap:8px;align-items:center;font-size:12px}
.nd-minibars span{color:var(--ink-muted)}
.nd-minibars i{height:8px;border-radius:var(--radius-pill);width:calc(var(--w) * 100%);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out)}
.nd-minibars.on i{transform:none}
.nd-minibars b{text-align:right;font-weight:500}
.nd-spark.draw path{stroke-dasharray:600;stroke-dashoffset:600;animation:nd-draw 1s var(--ease-out) forwards;stroke-width:2}
.nd-chatfoot{position:absolute;left:0;right:0;bottom:0;padding:8px var(--space-5) 28px;background:var(--ground);box-shadow:0 -1px 0 var(--hairline)}
.nd-chatfoot .nd-hscroll{margin-bottom:4px}
.nd-input{display:flex;align-items:center;gap:4px;height:48px;padding:0 4px;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:var(--shadow-inset)}
.nd-input input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none}
.nd-input input::placeholder{color:var(--ink-muted)}
.nd-input:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.nd-send{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.nd-send svg{width:18px;height:18px}
.nd-send:active{transform:scale(.9)}
/* investments */
.nd-ticker{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--on-card);font-size:10px;font-weight:700;letter-spacing:.02em;flex:none}
/* auth */
.nd-auth{position:absolute;top:47px;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:24px 24px 40px}
.nd-auth .logo{margin-bottom:24px}
.nd-auth h1,.nd-ob h1,.nd-lock h1{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.nd-strength{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:4px;align-items:center}
.nd-strength i{height:4px;border-radius:2px;background:var(--surface-2);transition:background-color var(--dur-base)}
.nd-strength span{margin-left:8px;font-size:12px}
.nd-strength[data-s="1"] i:nth-child(-n+1){background:var(--danger)}
.nd-strength[data-s="2"] i:nth-child(-n+2){background:var(--card-peach)}
.nd-strength[data-s="3"] i:nth-child(-n+3){background:var(--card-mint)}
.nd-strength[data-s="4"] i:nth-child(-n+4){background:var(--success)}
.nd-check{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--ink-muted);cursor:pointer}
.nd-check input{position:absolute;opacity:0}
.nd-check span{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--ink-faint);display:grid;place-items:center;flex:none}
.nd-check input:checked + span{background:var(--accent);box-shadow:none}
.nd-check input:checked + span::after{content:"";width:10px;height:5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:translateY(-1px) rotate(-45deg)}
.nd-check input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
/* onboarding */
.nd-ob{position:absolute;top:47px;left:0;right:0;bottom:0;display:flex;flex-direction:column}
.nd-ob .head{display:flex;align-items:center;justify-content:space-between;padding:8px 20px}
.nd-ob .dots{display:flex;gap:6px}
.nd-ob .dots i{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--surface-2);transition:width var(--dur-base) var(--ease-out),background-color var(--dur-base)}
.nd-ob .dots i.done{background:var(--accent);opacity:.5}
.nd-ob .dots i.on{width:28px;background:var(--accent)}
.nd-ob .body{flex:1;padding:24px;overflow-y:auto}
.nd-ob .body h1{margin-top:8px}
.nd-ob .foot{padding:0 24px 40px}
.nd-choice{display:grid;gap:10px}
.nd-choice button{position:relative;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:4px 12px;padding:16px;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-raised);text-align:left}
.nd-choice b{font-size:17px;font-weight:600;grid-row:span 2}
.nd-choice span{font-size:15px}
.nd-choice em{grid-column:2;font-style:normal;font-size:13px;color:var(--ink-muted)}
.nd-choice .tick{grid-row:1/3;grid-column:3;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-faint);display:grid;place-items:center;color:transparent}
.nd-choice .tick svg{width:14px;height:14px;transform:scale(0);transition:transform var(--dur-base) var(--ease-spring)}
.nd-choice [aria-pressed="true"]{box-shadow:var(--shadow-raised),inset 0 0 0 2px var(--accent)}
.nd-choice [aria-pressed="true"] .tick{background:var(--accent);color:var(--on-accent);box-shadow:none}
.nd-choice [aria-pressed="true"] .tick svg{transform:none}
.nd-obcard{width:100%;height:150px;margin-top:20px;animation:nd-in var(--dur-slow) 200ms var(--ease-out) both}
.nd-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent) var(--f,50%),var(--surface-2) var(--f,50%));margin-top:24px;outline:none}
.nd-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--ground);cursor:grab}
.nd-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--ink);border:0}
.nd-range:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.nd-bankconnect .pair{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.nd-bankconnect .b{width:48px;height:48px;border-radius:14px;background:var(--card-peach);color:var(--on-card);display:grid;place-items:center;font-weight:700;font-size:15px}
.nd-bankconnect .line{position:relative;width:80px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-faint) 0 4px,transparent 4px 8px);overflow:hidden}
.nd-bankconnect .line i{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:0}
.nd-bankconnect.linking .line i{opacity:1;animation:nd-travel 700ms linear infinite}
.nd-bankconnect.linked .line{background:var(--success)}
.nd-bankconnect.linked .line i{display:none}
@keyframes nd-travel{from{transform:translateX(0)}to{transform:translateX(74px)}}
/* lock */
.nd-lock{position:absolute;top:47px;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:56px 24px 40px;text-align:center}
.nd-lock-top{display:grid;justify-items:center;gap:12px}
.nd-lock-top h1{margin:8px 0 0}
.nd-faceid{position:relative;width:120px;height:120px;margin:auto 0;color:var(--accent);border-radius:24px}
.nd-faceid svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.nd-faceid .c{transition:transform var(--dur-slow) var(--ease-spring);transform-origin:center}
.nd-faceid .face{transition:opacity var(--dur-base)}
.nd-faceid .ok{stroke-dasharray:60;stroke-dashoffset:60;stroke:var(--success);stroke-width:5}
.nd-faceid .scanline{position:absolute;left:16%;right:16%;top:16%;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:0}
.nd-faceid.scanning .scanline{opacity:1;animation:nd-scan 600ms ease-in-out infinite alternate}
.nd-faceid.scanning .c{transform:scale(.9)}
.nd-faceid.ok .face{opacity:0}
.nd-faceid.ok .c{stroke:var(--success);transform:scale(1.04)}
.nd-faceid.ok .ok{animation:nd-dash 400ms var(--ease-out) forwards}
@keyframes nd-scan{from{transform:translateY(0)}to{transform:translateY(78px)}}
.nd-lock-foot{width:100%}
.nd-pinpad{position:absolute;left:24px;right:24px;bottom:40px;opacity:0;pointer-events:none;transform:translateY(24px);transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base)}
.nd-lock.pin .nd-pinpad{opacity:1;pointer-events:auto;transform:none}
.nd-lock.pin .nd-faceid,.nd-lock.pin .nd-lock-foot{opacity:0;pointer-events:none}
.nd-pinpad .dots{display:flex;justify-content:center;gap:14px;margin-bottom:8px}
.nd-pinpad .dots i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-muted);transition:transform var(--dur-fast) var(--ease-spring),background-color var(--dur-fast)}
.nd-pinpad .dots i.on{background:var(--ink);box-shadow:none;transform:scale(1.15)}
.nd-pinpad .dots.bad{animation:nd-shake 320ms var(--ease-out)}
.nd-pinpad .dots.bad i{background:var(--danger)}
.nd-pinpad .dots.good i{background:var(--success)}
.nd-pinpad .nd-keys button{height:60px;border-radius:50%;width:60px;justify-self:center;background:var(--surface-1);box-shadow:var(--shadow-raised)}
/* categories edit */
.nd-catpreview{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.nd-catpreview .nd-chip{width:56px;height:56px;border-radius:16px}
.nd-catpreview .nd-chip svg{width:26px;height:26px}
.nd-catpreview b{font-size:17px}
.nd-icongrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.nd-icongrid button{aspect-ratio:1;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--ink-muted)}
.nd-icongrid button svg{width:18px;height:18px}
.nd-icongrid button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.nd-swatches{display:flex;gap:12px}
.nd-swatches button{width:36px;height:36px;border-radius:50%;transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast)}
.nd-swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface-1),0 0 0 5px var(--ink);transform:scale(1.05)}
.nd-li.flash{animation:nd-flash 900ms var(--ease-out)}
@keyframes nd-flash{0%,40%{background:var(--accent-soft)}}
/* recurring strip */
.nd-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--space-5));padding:2px var(--space-5)}
.nd-strip div{flex:none;width:38px;height:56px;border-radius:var(--radius-md);background:var(--surface-1);display:grid;justify-items:center;align-content:center;gap:6px}
.nd-strip div.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.nd-strip b{font-size:14px;font-weight:600}
.nd-strip i{width:6px;height:6px;border-radius:50%}
/* bank */
.nd-bankcard{padding:16px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--shadow-raised)}
.nd-bankcard .row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.nd-bankcard .logo{width:44px;height:44px;border-radius:12px;background:var(--card-peach);color:var(--on-card);display:grid;place-items:center;font-weight:700}
.nd-bankcard b{font-size:16px}
.nd-btn .sp{display:grid}
.nd-btn.syncing .sp{animation:nd-spin .9s linear infinite}
.nd-timeline{padding:8px 16px}
.nd-timeline .ev{position:relative;display:flex;gap:12px;padding:8px 0}
.nd-timeline .ev > i{position:relative;width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--success)}
.nd-timeline .ev.warn > i{background:var(--card-peach)}
.nd-timeline .ev:not(:last-child) > i::after{content:"";position:absolute;left:4px;top:14px;width:2px;height:34px;background:var(--hairline)}
.nd-timeline .ev b{display:block;font-size:14px;font-weight:500}
.nd-timeline .ev.new{animation:nd-msg var(--dur-slow) var(--ease-spring)}
/* currency */
.nd-fmtprev{display:grid;justify-items:center;gap:4px;padding:20px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--shadow-raised)}
.nd-fmtprev b{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em}
.nd-radio .nd-li{width:100%;text-align:left}
.nd-radio .code{width:44px;font-size:14px;font-weight:700;color:var(--ink-muted)}
.nd-radio .r{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-faint);transition:box-shadow var(--dur-base) var(--ease-spring)}
.nd-radio [aria-pressed="true"] .r{box-shadow:inset 0 0 0 7px var(--accent)}
.nd-radio [aria-pressed="true"] .code{color:var(--accent)}
/* export */
.nd-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nd-formats button{display:grid;justify-items:start;gap:2px;padding:14px;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-raised);text-align:left}
.nd-formats svg{width:20px;height:20px;color:var(--ink-muted);margin-bottom:8px}
.nd-formats b{font-size:15px}
.nd-formats span{font-size:11px;line-height:14px;color:var(--ink-muted)}
.nd-formats [aria-pressed="true"]{box-shadow:var(--shadow-raised),inset 0 0 0 2px var(--accent)}
.nd-formats [aria-pressed="true"] svg{color:var(--accent)}
.nd-progbtn{position:relative;overflow:hidden}
.nd-progbtn i{position:absolute;inset:0;background:rgba(255,255,255,.28);transform-origin:left;transform:scaleX(0)}
.nd-progbtn span{position:relative}
.nd-progbtn:disabled{background:var(--accent);color:var(--on-accent)}
/* connector */
.nd-conn{display:grid;justify-items:center;gap:6px;padding:24px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--shadow-raised);text-align:center}
.nd-conn .pair{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nd-conn .b{width:44px;height:44px;border-radius:14px;background:var(--card-peach);color:var(--on-card);display:grid;place-items:center}
.nd-conn .b svg{width:22px;height:22px}
.nd-conn .link{display:flex;gap:5px}
.nd-conn .link i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:nd-typing 1.2s infinite}
.nd-conn .link i:nth-child(2){animation-delay:.2s}.nd-conn .link i:nth-child(3){animation-delay:.4s}
.nd-conn b{font-size:17px}
/* change log */
.nd-log .ev{display:flex;align-items:center;gap:12px;min-height:60px}
.nd-log .ev + .ev{box-shadow:0 -1px 0 var(--hairline)}
.nd-log .txt{flex:1;min-width:0}
.nd-log .ttl{font-size:14px;line-height:19px;font-weight:500}
.nd-log .sub{font-size:12px;line-height:16px;color:var(--ink-muted)}
.nd-log .ev.undone .ttl{text-decoration:line-through;color:var(--ink-muted)}
.nd-log .ev.undone .nd-chip{opacity:.4}
/* drawer */
.nd-dscrim{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.5);opacity:0;pointer-events:none}
.nd-drawer{position:absolute;top:0;bottom:0;left:0;width:300px;z-index:71;background:var(--surface-1);box-shadow:var(--shadow-raised);padding:56px 12px 24px;overflow-y:auto;transform:translateX(-105%);border-radius:0 var(--radius-xl) var(--radius-xl) 0;scrollbar-width:none;touch-action:pan-y}
.nd-drawer .head{display:flex;align-items:center;gap:12px;padding:0 8px 12px}
.nd-drawer .head > div{flex:1}
.nd-drawer .grp{padding:12px 0 4px;box-shadow:0 -1px 0 var(--hairline)}
.nd-drawer .grp .nd-eyebrow{padding:0 12px 6px}
.nd-drawer a{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--radius-md);color:var(--ink);text-decoration:none;font-size:15px}
.nd-drawer a svg{width:20px;height:20px;color:var(--ink-muted)}
.nd-drawer a span{flex:1}
.nd-drawer a:hover{background:var(--surface-2)}
.nd-drawer a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.nd-drawer a[aria-current="page"] svg{color:var(--accent)}
/* offline, permission */
.nd-offline{position:absolute;top:47px;left:12px;right:12px;z-index:25;height:36px;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:var(--shadow-inset);font-size:13px;color:var(--ink-muted);animation:nd-in var(--dur-slow) var(--ease-out) both}
.nd-offline svg{width:16px;height:16px;color:var(--ink)}
.nd-offline span{flex:1}
.nd-offline button{height:28px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface-1);font-size:12px;font-weight:600;color:var(--ink)}
.nd-offline.retry svg{animation:nd-pulse .5s ease-in-out infinite}
.nd-dim{opacity:.55;filter:saturate(.5)}
.nd-permit{position:absolute;left:12px;right:12px;bottom:24px;z-index:31;padding:24px 20px 20px;border-radius:var(--radius-xl);background:var(--surface-1);box-shadow:var(--shadow-raised);text-align:center;animation:nd-sheetin var(--dur-slow) var(--ease-spring) both;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base)}
.nd-permit.out{transform:translateY(120%);opacity:0}
@keyframes nd-sheetin{from{transform:translateY(110%)}}
.nd-permit .bell{position:relative;width:56px;height:56px;margin:0 auto;border-radius:18px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.nd-permit .bell svg{width:28px;height:28px;transform-origin:top center;animation:nd-ring 1.6s 400ms var(--ease-out) both}
.nd-permit .bell i{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px var(--surface-1);animation:nd-cell var(--dur-slow) 900ms var(--ease-spring) both}
@keyframes nd-ring{10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-14deg)}50%{transform:none}}
.nd-permit h2{font-size:20px;line-height:26px;margin:16px 0 6px}
.nd-permit p{font-size:14px;line-height:20px;color:var(--ink-muted);margin:0 0 16px;text-wrap:pretty}
.nd-notifpreview{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px;border-radius:var(--radius-lg);background:var(--surface-2);margin-bottom:16px;animation:nd-in var(--dur-slow) 600ms var(--ease-out) both}
.nd-notifpreview div{flex:1;display:grid;gap:2px;font-size:13px;line-height:18px}
.nd-notifpreview em{font-style:normal;font-size:11px;color:var(--ink-muted)}

.nd-li .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-log .ttl{white-space:normal}
.nd-tip.below{transform:translate(-50%,0)}


/* ═════════ App layer: the system on real pages ═════════
   Everything above is the design system verbatim (tokens.css + bundle.css).
   Below: what a multi-page app needs that a 390×844 mock does not, and the
   bridge that makes the screens not yet rebuilt take the system's colours —
   the legacy names (--page-bg, --ink-dim, hsl(var(--card))…) are pointed at
   the system tokens, per theme. */

html:not([data-theme="light"]) body.nd,
html:not([data-theme="light"]) {
  --page-bg: var(--ground);
  --card-rgb: 29 30 33;
  --ink-dim: var(--ink-muted);
  --hairline-strong: rgba(245,246,247,0.14);
  --cyan: var(--accent);
  --cyan-ink: var(--on-accent);
  --accent-ink: var(--on-accent);
  --money-in: var(--success);
  --money-out: var(--danger);
  --tile-bg: var(--surface-2);
  --background: 225 7% 8%;
  --foreground: 210 11% 96%;
  --card: 225 6% 12%;
  --card-foreground: 210 11% 96%;
  --popover: 228 6% 16%;
  --popover-foreground: 210 11% 96%;
  --muted: 228 6% 16%;
  --muted-foreground: 220 2% 63%;
  --secondary: 228 6% 16%;
  --secondary-foreground: 210 11% 96%;
  --tw-accent: 228 6% 16%;
  --tw-accent-foreground: 210 11% 96%;
  --border: 220 3% 17%;
  --input: 220 3% 17%;
  --ring: 188 79% 72%;
  --primary: 188 79% 72%;
  --primary-foreground: 191 53% 9%;
  --success-hsl: 149 56% 64%;
  --destructive: 4 100% 75%;
}
html[data-theme="light"] body.nd,
html[data-theme="light"] {
  --page-bg: var(--ground);
  --card-rgb: 255 255 255;
  --ink-dim: var(--ink-muted);
  --hairline-strong: rgba(18,19,20,0.14);
  --cyan: var(--accent);
  --cyan-ink: var(--on-accent);
  --accent-ink: var(--on-accent);
  --money-in: var(--success);
  --money-out: var(--danger);
  --tile-bg: var(--surface-2);
  --background: 220 14% 96%;
  --foreground: 210 5% 7%;
  --card: 0 0% 100%;
  --card-foreground: 210 5% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 5% 7%;
  --muted: 216 12% 92%;
  --muted-foreground: 210 1% 45%;
  --secondary: 216 12% 92%;
  --secondary-foreground: 210 5% 7%;
  --tw-accent: 216 12% 92%;
  --tw-accent-foreground: 210 5% 7%;
  --border: 220 4% 88%;
  --input: 220 4% 88%;
  --ring: 188 86% 27%;
  --primary: 188 86% 27%;
  --primary-foreground: 0 0% 100%;
  --success-hsl: 148 65% 30%;
  --destructive: 4 63% 47%;
}

/* One family: Inter, with the system's stylistic sets. */
body.nd {
  --font-sans: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-feature-settings: "cv01", "cv02", "cv03", "cv04", "case";
  background: var(--ground);
  color: var(--ink);
}

/* ── Shell: one phone-wide column, top bar, tab bar with the Fab ───────── */
body.nd-app { margin: 0; min-height: 100dvh; }
.nd-shell { position: relative; max-width: 520px; min-height: 100dvh; margin: 0 auto; }
.nd-shell.has-tabs { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.nd-main { display: block; padding-top: env(safe-area-inset-top, 0px); }
.nd-main.nd-legacy > :not(.nd-top):not(.nd-toptabs) { margin-left: var(--space-5); margin-right: var(--space-5); }
.nd-top .ttl { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); vertical-align: middle; }
a.nd-iconbtn { text-decoration: none; }
.nd-tabwrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  width: min(520px, 100%);
  padding: 0 var(--space-3);
  transform: translateX(-50%);
  z-index: 60;
}
.nd-tab-ico { position: relative; display: inline-grid; }
.nd-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body.overflow-hidden .nd-tabwrap { display: none; }
/* N.toast on a real page lives on <body>. Absolute, it sat 108px above the
   bottom of the first screen — on a scrolled page, over the controls in the
   middle («Preferences saved» over the date chips). Fixed, it sits just
   above the tab bar wherever the page is scrolled. */
body > .nd-toast { position: fixed; bottom: calc(var(--space-6) + 72px + 12px + env(safe-area-inset-bottom, 0px)); z-index: 70; }

.nd-badge-inline { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── Bare form control. The system's .nd-field is a <label> wrapper with a
   <span> caption and an input inside (second wave); on a bare input,
   select or textarea the class means "draw me as that input". ───── */
input.nd-field, select.nd-field, textarea.nd-field, button.nd-field.nd-datebtn {
  display: block; gap: 0;
  width: 100%; min-width: 0; height: var(--control-lg); padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-inset);
  color: var(--ink); font: inherit; font-size: 15px; outline: none;
}
input.nd-field::placeholder, textarea.nd-field::placeholder { color: var(--ink-faint-text); }
input.nd-field:focus-visible, select.nd-field:focus-visible, textarea.nd-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nd-inline-form { display: flex; gap: var(--space-3); }
.nd-inline-form .nd-btn { flex: none; }
.nd-quest-steps { display: inline-flex; align-items: center; gap: var(--space-2); }
.nd-quest-steps form { display: contents; }
.nd-quest-steps .nd-iconbtn { --ib: 30px; }
.nd-quest-steps .nd-iconbtn svg { width: 16px; height: 16px; }
a.nd-group, a.nd-li, a.nd-tile { color: inherit; text-decoration: none; }
/* Карточка держит свой on-card: inherit перекрашивал её текст в белый ink. */
a.nd-card { color: var(--on-card); text-decoration: none; }
a.nd-pill { text-decoration: none; }

/* To do tabs as a segmented control with links. */

/* ── Sheets on real pages: the system's .nd-sheet inside a fixed layer ──── */
.nd-sheetwrap { position: fixed; inset: 0; z-index: 10080; pointer-events: none; }
.nd-sheetwrap .nd-scrim { position: absolute; }
.nd-sheetwrap .nd-sheet { position: absolute; max-width: 520px; margin: 0 auto; pointer-events: auto; padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.nd-sheetwrap.nd-open { pointer-events: auto; }
.nd-sheet .grab { touch-action: none; cursor: grab; }
.nd-limit-row { width: 100%; text-align: left; color: inherit; }
.nd-group .nd-limit-row + .nd-limit-row { box-shadow: 0 -1px 0 var(--hairline); }
.nd-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.nd-filter-grid label { display: grid; gap: 6px; min-width: 0; }
.nd-filter-grid .nd-field { height: 44px; }
a.nd-pill, a.nd-btn { text-decoration: none; }
.nd-iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
/* Segmented control whose options are links (period on Statistic). */
.nd-seg-links a { position: relative; z-index: 1; display: grid; place-items: center; padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nd-seg-links a[aria-current="page"] { background: var(--surface-1); box-shadow: var(--shadow-raised); color: var(--ink); }
/* Transaction screen: rows that are buttons, links or summaries keep the
   nd-kv / nd-li look; a two-option seg submits a form, so no sliding thumb. */
.nd-kv-btn, .nd-li-btn { width: 100%; text-align: left; color: inherit; background: none; font: inherit; text-decoration: none; cursor: pointer; }
.nd-kv .v { min-width: 0; text-align: right; }
.nd-details > summary { list-style: none; cursor: pointer; }
.nd-details > summary::-webkit-details-marker { display: none; }
.nd-details > summary > svg:last-child, .nd-details > summary .v svg { transition: transform var(--dur-base) var(--ease-out); }
.nd-details[open] > summary > svg:last-child, .nd-details[open] > summary .v svg { transform: rotate(90deg); }
.nd-group > .nd-details + .nd-details, .nd-group > .nd-li + .nd-details, .nd-group > .nd-details + .nd-li { box-shadow: 0 -1px 0 var(--hairline); }
/* Separators in a group are straight hairlines (02.10). Drawn as a
   box-shadow they followed the row's own radius — a tappable row
   (.nd-li.tap) is rounded — and every row after the first got a curved
   line with bent ends. A 1px pseudo-element ignores the radius. */
.nd-group .nd-li + .nd-li,
.nd-group .nd-limit-row + .nd-limit-row,
.nd-group > .nd-details + .nd-details, .nd-group > .nd-li + .nd-details, .nd-group > .nd-details + .nd-li { position: relative; box-shadow: none; }
.nd-group .nd-li + .nd-li::before,
.nd-group .nd-limit-row + .nd-limit-row::before,
.nd-group > .nd-details + .nd-details::before, .nd-group > .nd-li + .nd-details::before, .nd-group > .nd-details + .nd-li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline); pointer-events: none; }
.nd-form { display: grid; gap: 6px; padding: 4px 0 16px; }
.nd-form .nd-btn { margin-top: 10px; }
.nd-note { margin: 8px 4px 0; }
.nd-seg-mini { height: 32px; padding: 2px; }
.nd-seg-mini button { height: 28px; padding: 0 var(--space-3); }
.nd-seg-mini button[aria-selected="true"] { background: var(--surface-1); box-shadow: var(--shadow-raised); }
/* Legacy style.css gives every <button> min-height 2.75rem; DS controls size themselves. */
.nd-toggle, .nd-seg button, .nd-pill, .nd-iconbtn { min-height: 0; }
.nd-kv > span:first-of-type { color: var(--ink-muted); }
.nd-li > svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }

/* ── Add sheet (S.add) ─────────────────────────────────────────────────── */
.nd-addsheet { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.nd-addsheet .nd-seg { margin-bottom: var(--space-2); }
.nd-addsheet .nd-seg button { padding: 0 var(--space-2); }
/* The figure is drawn by JS; the real input lies on top of it, invisible,
   so a desktop keyboard still types into it and the form still sends it. */
.nd-amount .v { position: relative; cursor: text; }
.nd-amount-input { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; background: none; color: transparent; caret-color: transparent; font: inherit; }
.nd-amount.is-empty [data-v] { color: var(--ink-faint-text); }
.nd-amount-sub { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nd-wallet-select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; cursor: pointer; max-width: 60vw; }
.nd-add-cats { margin-top: calc(var(--space-3) - 6px); margin-bottom: -6px; padding-bottom: 8px; }  /* same footprint as before; the row's own 6px of room (.nd-hscroll) carries the pills' hit area (20.10) */
.nd-add-cats .nd-pill { height: 32px; flex: none; }
.nd-pill svg { width: 14px; height: 14px; flex: none; }
.nd-add-details { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.nd-add-details > .nd-btn { margin-top: var(--space-3); }
.nd-add-details > .nd-group { margin-top: var(--space-2); }
.nd-amount-echo { display: grid; justify-items: center; gap: 2px; width: 100%; padding: var(--space-3) 0; background: none; color: var(--ink); }
.nd-amount-echo .nd-fig { font-size: 32px; line-height: 40px; }
.nd-amount-echo .nd-lbl { display: inline-flex; align-items: center; gap: 4px; }
.nd-amount-echo svg { width: 12px; height: 12px; }
.nd-suggest-wrap { position: relative; }
.nd-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; max-height: 240px; overflow-y: auto; padding: 4px 12px; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-raised); }
.nd-suggest.hidden { display: none; }
.nd-suggest .nd-chip { font-size: 11px; font-weight: 600; }
.nd-inline-input, .nd-inline-select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; min-height: 0; font: inherit; font-weight: 500; color: var(--ink); text-align: right; cursor: pointer; color-scheme: inherit; }
html:not([data-theme="light"]) .nd-inline-input { color-scheme: dark; }
.nd-route { position: relative; margin-top: var(--space-4); }
.nd-route-swap { position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); width: 32px; height: 32px; background: var(--surface-1); box-shadow: var(--shadow-raised); z-index: 1; }
.nd-route-swap svg { width: 16px; height: 16px; }
.nd-quote { margin: var(--space-3) 0 0; text-align: center; }
.nd-quote b { color: var(--ink); font-weight: 600; }
.nd-quote-error { color: var(--danger); }
.nd-holdlink { margin-top: var(--space-4); padding: 0 var(--space-4); }
.nd-holdlink-row { display: flex; align-items: center; gap: var(--space-2); }
.nd-holdlink-row > .nd-li { flex: 1; min-width: 0; }
.nd-holdlink-list { padding-bottom: var(--space-3); }
.nd-holdlink-list .nd-field { margin-bottom: var(--space-2); }
.nd-holdlink-list .nd-li .amt { margin-left: auto; font-size: 14px; }
.nd-add-merchants { padding-bottom: var(--space-3); }
.nd-add-merchants button { display: grid; justify-items: center; gap: 4px; flex: none; width: 56px; font-size: 10px; color: var(--ink-muted); background: none; }
.nd-add-merchants button span:last-child { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The category picker opens over the add sheet. */
.cat-sheet { z-index: 10085; }

/* ── Category picker (partials/category_sheet.html) ─────────────────────
   The system's sheet over its own scrim, one z-step above the add sheet:
   opened from it, the add sheet dims and this one stays bright. Tiles are
   category chips (nd_category_look), the chosen one accent-soft. */
.nd-sheetwrap.nd-catwrap { z-index: 10085; }
.nd-catsheet { max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; }
.nd-catsheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.nd-catsheet-head .nd-h { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-catsheet .cat-picker-sections { display: flex; flex-direction: column; gap: var(--space-5); }
.nd-catwrap[data-type="income"] [data-section="income"] { order: -1; }
.nd-catsheet .nd-eyebrow { margin: 0 0 var(--space-2); }
.nd-catpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.nd-catsheet .cat-sheet-tile { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 0; padding: 10px 2px; border: 0; border-radius: var(--radius-md); background: none; box-shadow: none; color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; text-align: center; cursor: pointer; transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.nd-catsheet .cat-sheet-tile:hover { background: var(--surface-2); }
.nd-catsheet .cat-sheet-tile .nd-chip { width: 40px; height: 40px; border-radius: 12px; }
.nd-catsheet .cat-sheet-tile .nd-chip svg { width: 20px; height: 20px; }
.nd-catsheet .cat-sheet-tile > span:last-child { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nd-catsheet .cat-sheet-tile[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.nd-catsheet .cat-sheet-tile[aria-pressed="true"] .nd-chip { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }

/* ── Select sheet (static/js/ui.js .picker) ────────────────────────────
   Лист выбора — nd-sheet дизайн-системы на её токенах (02.10). Раньше
   панель была тёмной константой #17181c: на светлой теме тёмный --ink
   строк стоял на тёмном и не читался. Над листом, из которого открыт
   (добавление 10080, категории 10085), под календарём (10095): его скрим
   ложится между первым листом и вторым. */
.picker { position: fixed; inset: 0; z-index: 10090; }
.picker[hidden] { display: none; }
.nd .picker-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.nd .picker.is-pop .picker-backdrop { background: transparent; }
.nd .picker-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 520px;
    margin: 0 auto;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-1);
    color: var(--ink);
    box-shadow: var(--shadow-raised);
    transform: translateY(105%);
    transition: transform var(--dur-slow) var(--ease-out);
    outline: none;
}
.nd .picker.is-open .picker-backdrop { opacity: 1; }
.nd .picker.is-open .picker-panel { transform: none; }
.nd .picker.is-pop .picker-panel {
    right: auto;
    bottom: auto;
    max-width: none;
    margin: 0;
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised), 0 18px 50px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top center;
    transition: opacity 160ms ease, transform 220ms var(--ease-out);
}
.nd .picker.is-pop.is-open .picker-panel { opacity: 1; transform: none; }
.nd .picker-grip { width: 36px; height: 4px; margin: 0 auto var(--space-4); border-radius: var(--radius-pill); background: var(--ink-faint); }
.nd .picker.is-pop .picker-grip { display: none; }
.nd .picker-title { margin: 0 var(--space-3) var(--space-3); color: var(--ink); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.nd .picker.is-pop .picker-title { display: none; }
.nd .picker-group { margin: var(--space-3) var(--space-3) var(--space-1); color: var(--ink-muted); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.nd .picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--row);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: none;
    color: var(--ink);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: background-color 120ms ease;
}
.nd .picker.is-pop .picker-row { min-height: 40px; font-size: 14px; border-radius: 10px; }
.nd .picker.is-open .picker-row { animation: fivRowIn 280ms var(--ease-out) forwards calc(var(--i, 0) * 22ms); }
@keyframes fivRowInKeep { to { opacity: 1; transform: none; } }
.nd .picker.is-open .picker-row { animation-name: fivRowInKeep; }
.nd .picker-row:hover, .nd .picker-row:focus-visible { background: var(--surface-2); outline: none; }
.nd .picker-row.is-on { background: var(--accent-soft); color: var(--accent); }
.nd .picker-row[disabled] { opacity: .35 !important; }
.nd .picker-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nd .picker-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd .picker-copy small { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.nd .picker-check { display: grid; color: var(--accent); opacity: 0; transform: scale(.4); transition: opacity 160ms ease, transform 260ms var(--ease-spring); }
.nd .picker-row.is-on .picker-check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .nd .picker-panel, .nd .picker-backdrop { transition: none; }
    .nd .picker-row { opacity: 1; transform: none; animation: none !important; }
}

/* ── Wallets (S.wallets) ───────────────────────────────────────────────── */
.nd-wallet-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.nd-wallet-acts .nd-btn { flex-direction: column; height: 72px; border-radius: 16px; gap: 4px; font-size: 12px; }
.nd-wallet-acts .nd-btn svg { width: 20px; height: 20px; }
.nd-wallet-acts .nd-btn[disabled] { opacity: .4; }
.nd-li.is-current .ttl { color: var(--accent); }
a.nd-li { color: inherit; text-decoration: none; }
.nd-li .nd-spark, .nd-li > svg.nd-spark { flex: none; }
.nd-formsheet { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.nd-removal-mode { margin: 12px 0 4px; }
.nd-removal-mode label, .nd-radio-seg label { position: relative; z-index: 1; display: grid; place-items: center; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--ink-muted); cursor: pointer; }
.nd-removal-mode label:has(input:checked), .nd-radio-seg label:has(input:checked) { background: var(--surface-1); box-shadow: var(--shadow-raised); color: var(--ink); }
.nd-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow-y: auto; padding: 8px; border-radius: var(--radius-md); background: var(--surface-2); }
.nd-icon-grid .ew-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-1); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); min-height: 0; }
.nd-icon-grid .ew-icon-btn.is-on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.nd-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-color-btn { width: 32px; height: 32px; border-radius: 50%; min-height: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ew-color-btn.is-on { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }

/* ── Profile (S.profile) ───────────────────────────────────────────────── */
.nd-profile-head { display: block; text-align: center; padding: 12px 20px 0; color: inherit; text-decoration: none; }
.nd-li-value { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nd-li-value svg { width: 16px; height: 16px; color: var(--ink-faint); }
.nd-goal-card { display: block; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }

/* ── Lock (S.lock) on real pages: a fixed layer over everything ───────── */
.nd-lockwrap { display: none; }
html.nd-locked .nd-lockwrap { position: fixed; inset: 0; z-index: 10100; display: block; background: var(--ground); }
html.nd-locked .nd-shell, html.nd-locked .nd-tabwrap { visibility: hidden; }
.nd-lockwrap .nd-lock { position: absolute; inset: 0; max-width: 440px; margin: 0 auto; padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.nd-lockwrap .nd-faceid { background: none; cursor: pointer; }
.nd-lockwrap .nd-pinpad { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.nd-lockwrap .nd-pinpad .nd-keys button { min-height: 0; }

/* ── Second-wave pieces on real pages: body-level, fixed ───────────────── */
body > .nd-undo { position: fixed; left: 16px; right: 16px; max-width: 488px; margin: 0 auto; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); z-index: 10070; }
/* ☰ drawer on real pages: fixed, above the tab bar and below sheets. */
.nd-drawerwrap { position: fixed; inset: 0; z-index: 10075; pointer-events: none; }
.nd-drawerwrap.is-open { pointer-events: auto; }
/* Закрытое меню не рисуется: iOS красит строку статуса по фиксированному
   слою сверху и не смотрит снова, когда его скрим гаснет до opacity 0. */
.nd-drawerwrap:not(.is-open) { visibility: hidden; }
.nd-drawerwrap .nd-dscrim { position: absolute; }
.nd-drawerwrap.is-open .nd-dscrim { pointer-events: auto; }
.nd-drawerwrap .nd-drawer { position: absolute; width: min(300px, 85vw); padding-top: calc(24px + env(safe-area-inset-top, 0px)); pointer-events: auto; }
.nd-drawer a[hidden] { display: none; }
/* Счётчик в строке ящика — на своей строке справа, как в S.drawer. Общий
   .nd-badge выше прибит absolute к значку таб-бара; в ящике он улетал к
   краю панели и висел на разделителе групп. */
.nd-drawer a .nd-badge { position: static; flex: none; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 18px; }

/* Rows built with <span>s (buttons cannot hold <div>s): title and subtitle
   stack like the system's divs, and long ones end in an ellipsis instead of
   running under the amount. */
.nd-li .txt > .ttl, .nd-li .txt > .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-li .amt { flex: none; }
.nd-holdlink-row > .nd-li .txt { min-width: 0; }
/* `hidden` must win over the system's display rules (.nd-iconbtn is grid). */
.nd [hidden] { display: none !important; }

/* ── Date picker (static/js/datepicker.js) ─────────────────────────────── */
.nd-date-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.nd-datebtn { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.nd-datebtn svg { width: 18px; height: 18px; flex: none; color: var(--ink-muted); }
.nd-datebtn.is-empty .nd-date-text { color: var(--ink-faint-text); }
.nd-datebtn.is-invalid { box-shadow: inset 0 0 0 2px var(--danger); }
.nd-datebtn.nd-inline-input { justify-content: flex-end; height: auto; padding: 0; background: none; box-shadow: none; }
.nd-datewrap { z-index: 10095; }
.nd-datesheet { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.nd-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.nd-cal-title { font-size: 17px; line-height: 22px; font-weight: 600; text-transform: capitalize; }
.nd-cal-head .nd-iconbtn[disabled] { opacity: .35; }
.nd-cal-week, .nd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.nd-cal-week span { font-size: 12px; line-height: 24px; font-weight: 500; color: var(--ink-faint-text); text-transform: uppercase; }
.nd-cal-grid { margin-top: 4px; touch-action: pan-y; }
.nd-cal-grid button { height: 44px; min-height: 0; border-radius: 50%; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); background: none; transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.nd-cal-grid button:active { transform: scale(.9); }
.nd-cal-grid button.out { color: var(--ink-faint-text); }
.nd-cal-grid button.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.nd-cal-grid button.on { background: var(--accent); color: var(--on-accent); box-shadow: none; animation: nd-pop var(--dur-base) var(--ease-spring); }
.nd-cal-grid button[disabled] { opacity: .3; cursor: default; }
.nd-cal-grid.from-right { animation: nd-cal-r var(--dur-base) var(--ease-out); }
.nd-cal-grid.from-left { animation: nd-cal-l var(--dur-base) var(--ease-out); }
@keyframes nd-cal-r { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nd-cal-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.nd-cal-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: var(--space-4); }
.nd-cal-foot .nd-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .nd-cal-grid.from-right, .nd-cal-grid.from-left, .nd-cal-grid button.on { animation: none; } }
.nd-toptabs::-webkit-scrollbar { display: none; }
.nd-toptabs .nd-badge { position: static; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
/* the "!" of Reserves: a check is due or a date has passed (templates/partials/todo_tabs.html) */
.nd-toptabs .nd-badge.bang { min-width: 16px; padding: 0; background: #ffa266; color: #3a1a05; font-weight: 800; }
/* Work tabs on a phone: in RU («Сегодня · Разбор 16 · Резервы · Квест ·
   Итоги») the last tab ran off the 390px edge, cut mid-word. Tighter sides
   and padding fit all five; a sixth (Import) still scrolls. */
@media (max-width: 430px) {
  .nd-toptabs { gap: 0; padding: 0 var(--space-3); }
  .nd-toptabs a { padding: 0 7px; font-size: 13.5px; }
}

/* ── Sort (S.sort) on real pages ───────────────────────────────────────── */
.nd-opcard { user-select: none; touch-action: pan-y; }
.nd-opcard-m { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nd-opcard-m span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-opcard .raw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-opcard template { display: none; }
.nd-sortacts form { display: contents; }
.nd-sortacts .nd-btn svg { width: 16px; height: 16px; }
.nd-catgrid button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-opcard button.guess { background: none; padding: 0; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }

/* ── Held (S.held) on real pages ───────────────────────────────────────── */
.nd-radio-seg { margin: 4px 0; }
.nd-held-edit { flex: 1; min-width: 0; text-align: left; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.nd-held .nd-li .amt { display: grid; justify-items: end; gap: 2px; }
.nd-held .nd-li .amt small { font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.nd-held .acts .nd-btn svg { width: 14px; height: 14px; }
.nd-state-inline { padding: 24px 16px 8px; }
.nd-state-inline .nd-emptyart { width: 96px; height: 96px; }
.nd-state-inline h2 { margin-top: 8px; font-size: 17px; line-height: 22px; }
.nd-state-inline p { margin-bottom: 16px; }
.nd-li > .row-actions { display: none; }

/* ── Quest (S.quest) on real pages ─────────────────────────────────────── */
.nd-qrow form { display: contents; }
.nd-qrow .nd-iconbtn[disabled] { opacity: 1; }
.nd-formsheet .nd-field + .nd-field, .nd-formsheet label.nd-field { margin-top: 0; }
#questForm .needt-quest-row { display: grid; gap: 8px; padding: 12px 0; }
#questForm .needt-quest-row + .needt-quest-row { box-shadow: 0 -1px 0 var(--hairline); }
#questForm .needt-quest-count { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#questForm .needt-quest-count select, #questForm .needt-quest-count .fiv-select { grid-column: span 2; }
#questForm .needt-quest-field { display: grid; gap: 4px; }
#questForm .needt-quest-field span { font-size: 12px; color: var(--ink-muted); }
.nd-quest-formacts { display: flex; gap: 8px; margin-top: 12px; }
.nd-quest-formacts .nd-btn { flex: 1; }

/* ── Investments (S.invest) on real pages ──────────────────────────────── */
.nd-legend-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; font-size: 13px; line-height: 18px; }
.nd-legend-item i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nd-legend-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-stack-label { display: grid; gap: 6px; }
[data-trade-sheet] .nd-form, [data-event-sheet].nd-form { display: grid; gap: 10px; }
.nd-li .sub.neg { color: var(--danger); }

/* ── Chat (S.chat) on real pages: the room fills the screen under the bar ─ */
.nd-chatroom { position: fixed; left: 0; right: 0; bottom: 0; top: var(--chat-top, 64px); max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; background: var(--ground); }
.nd-chatroom .nd-chat { position: static; flex: 1; min-height: 0; padding-bottom: 24px; }
.nd-chatroom .nd-chatfoot { position: static; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.nd-chat-problems { padding-top: 4px; padding-bottom: 8px; flex: none; }
.nd-chat-ttl { display: grid; justify-items: center; line-height: 1.1; }
.nd-chat-ttl small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.nd-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.nd-chat-dot.is-waiting { background: var(--accent); animation: nd-pulse 1.2s ease-in-out infinite; }
.nd-chat-log { display: flex; flex-direction: column; gap: 10px; }
.nd-chat-log .msg { display: grid; gap: 6px; }
.msg.me { justify-items: end; }
.nd-chat-author { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.nd-chat-author svg { width: 14px; height: 14px; color: var(--accent); }
.nd-chat-question { font-size: 12px; color: var(--ink-muted); }
.nd-chat-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-faint-text); }
.msg.me .nd-chat-meta { justify-content: flex-end; }
.nd-chat-waiting { display: inline-flex; align-items: center; gap: 6px; }
.nd-chat-dots { display: inline-flex; gap: 3px; }
.nd-chat-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: nd-typing 1s infinite; }
.nd-chat-dots b:nth-child(2) { animation-delay: .15s; } .nd-chat-dots b:nth-child(3) { animation-delay: .3s; }
.msg.is-stale p { opacity: .6; }
.chat-context { min-width: 0; max-width: 100%; }
.chat-context summary { cursor: pointer; list-style: none; }
.chat-context dl { display: grid; gap: 4px; margin: 8px 0 0; font-size: 12px; }
.chat-context dl > div { display: flex; justify-content: space-between; gap: 12px; }
.chat-context dt { color: var(--ink-muted); text-transform: capitalize; }
.chat-context dd { margin: 0; text-align: right; }
.chat-context-list dd { display: grid; }
.nd-chat-hero { padding-top: 24px; }
.nd-chat-templates { display: grid; gap: 10px; margin-bottom: 12px; }
.nd-chat-templates .nd-li .sub { white-space: normal; }
.nd-chatfoot .nd-input textarea { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; resize: none; padding: 12px 0; max-height: 140px; }
.nd-chatfoot .nd-input { height: auto; min-height: 48px; align-items: flex-end; padding: 4px; }
.nd-chatfoot .nd-input .nd-iconbtn, .nd-chatfoot .nd-send { flex: none; margin-bottom: 0; }
.nd-send[disabled] { opacity: .45; }
.nd-chat-jump { position: absolute; right: 16px; bottom: 96px; box-shadow: var(--shadow-raised); }
.chat-chips:not([hidden]) { margin-bottom: 10px; }

/* ── Onboarding (S.onboarding) on real pages ───────────────────────────── */
.nd-ob.nd-ob-page { position: static; min-height: 100dvh; padding-top: env(safe-area-inset-top, 0px); }
.nd-ob-page .nd-ob-form { flex: 1; display: flex; flex-direction: column; }
.nd-ob-page .foot { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.nd-choice button { width: 100%; }

/* ── Login / Register (S.login, S.register) on real pages ──────────────── */
.nd-auth.nd-auth-page { position: static; min-height: 100dvh; max-width: 440px; margin: 0 auto; padding: calc(32px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px)); }
.nd-auth-page .nd-pw { height: 48px; border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-inset); }
.nd-pinpad.nd-pinpad-inline { position: static; opacity: 1; pointer-events: auto; transform: none; }
.nd-pinpad-inline .nd-keys button { height: 56px; width: 56px; border-radius: 50%; justify-self: center; background: var(--surface-2); min-height: 0; }
.nd-li.is-hidden .ttl { color: var(--ink-muted); }
.nd-li.is-hidden .nd-chip { opacity: .45; }

/* === Merchant logo chip ============================================
   template_icons.merchant_logo -> the `chip` macro in nd/ui.html. Same 36px
   circle as .nd-chip.round; the brand colour comes in --logo-bg. `neutral`:
   a nearly black/white brand colour, drawn on --surface-2 in --ink so it
   survives both themes. `ring`: multi-colour art on its white disc gets an
   edge on the light theme. w2/w3: wide wordmarks get a wider, lower box. */
.nd-chip.nd-logo{background:var(--logo-bg,var(--surface-2));color:var(--ink);overflow:hidden}
.nd-chip.nd-logo.neutral{background:var(--surface-2)}
.nd-chip.nd-logo.ring{box-shadow:inset 0 0 0 1px rgba(18,19,20,.12)}
.nd-chip.nd-logo svg{width:20px;height:20px}
.nd-chip.nd-logo.w2 svg{width:25px;height:18px}
.nd-chip.nd-logo.w3 svg{width:28px;height:14px}
.nd-hero-chip.nd-logo svg{width:34px;height:34px}
.nd-hero-chip.nd-logo.w2 svg{width:44px;height:30px}
.nd-hero-chip.nd-logo.w3 svg{width:50px;height:24px}
/* The older merchant tiles (Sort cards, wallet sheet) at the same 36px circle
   as the rows: Tailwind's h-9 is rem-based and comes out at 32.6px here. */
.nd-tile36{width:36px;height:36px;border-radius:var(--radius-pill);flex:none;overflow:hidden}
.nd-tile36>svg{width:20px;height:20px}
/* ── Свой цвет кошелька (Кошельки → Изменить), поверх тона по порядку ──
   Цвет из палитры смешивается с белым: карточка остаётся пастельной, как
   тона системы, и тёмный текст на ней читается. Браузер без color-mix
   отбросит правило и покажет тон. */
.nd-card.has-color{background:linear-gradient(160deg,color-mix(in oklab,var(--wc) 50%,#fff),color-mix(in oklab,var(--wc) 30%,#fff))}
.nd-chip.has-color,.nd-stack i.has-color{background:color-mix(in oklab,var(--wc) 50%,#fff)}

/* === Без масштабирования на телефоне ======================================
   Максим просил запретить приближение. iOS не слушает user-scalable=no в
   meta, поэтому ещё и здесь: pan-x pan-y снимает щипок и двойной тап на всей
   странице (touch-action потомков пересекается с этим), а gesturestart
   гасит щипок в старых iOS — в base.html. */
html { touch-action: pan-x pan-y; }

/* Строка в группе, обёрнутая формой (Wallets → Set default), выпадала из
   «.nd-li + .nd-li», и разделитель над ней и под ней пропадал. */
.nd-group > form + .nd-li, .nd-group > .nd-li + form > .nd-li, .nd-group > form + form > .nd-li { position: relative; box-shadow: none; }
.nd-group > form + .nd-li::before, .nd-group > .nd-li + form > .nd-li::before, .nd-group > form + form > .nd-li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline); pointer-events: none; }

/* === Выбор пары для перевода (partials/transaction_picker_sheet.html) ====
   Лист дизайн-системы: поиск, группы «та же сумма / похожая / то же имя /
   рядом по дате», строки как в любом списке. Длинный список прокручивается
   внутри листа. */
.nd-picker { max-height: 88vh; display: flex; flex-direction: column; }
.nd-picker-list { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 8px; min-height: 120px; }
.nd-picker-group { margin: 16px 4px 8px; }
.nd-picker-group:first-child { margin-top: 4px; }
/* Одна коробка поиска: значок поверх поля, а не отдельная плашка. */
.nd-picker-search { position: relative; display: block; margin-bottom: 4px; }
.nd-picker-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; color: var(--ink-muted); pointer-events: none; }
.nd-picker-search-ic svg { width: 18px; height: 18px; }
.nd-picker-search input { padding-left: 42px; font-size: 16px; }
.nd-picker .nd-li .amt { margin-left: auto; padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.nd-picker .nd-li .sub { white-space: normal; overflow: visible; text-overflow: clip; }
/* Пока ищется новый список, старый виден приглушённым — без прыжков высоты. */
.nd-picker-list { transition: opacity var(--dur-fast, .15s) ease; }
.nd-picker-list.is-loading { opacity: .45; pointer-events: none; }
.nd-picker-list { min-height: 240px; }

/* ───────── Tap targets (20.10) ─────────
   Drawn small, hit at 40px or more: an invisible ::after grows the target without moving a pixel. */
.nd-seg a{position:relative}
.nd-seg button::after,.nd-seg a::after{content:"";position:absolute;inset:-5px -2px}
button.nd-pill,a.nd-pill{position:relative}
button.nd-pill::after,a.nd-pill::after{content:"";position:absolute;inset:-6px -2px}