/* Needt Budget demo screens for the landing phone — generated from docs/design-system-v2 (tokens.json + bundle.css). Dark theme only, scoped by [data-theme="dark"]. */
[data-theme="dark"]{--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);--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);--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;color-scheme:dark}
/* 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 */
.nd-iconbtn{position:relative;width:var(--control-sm);height:var(--control-sm);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: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}
.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)}


.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{width:46px;height:28px;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)}
.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)}

/* ───────── 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}
.nd-odo .strip{display:block;line-height:var(--lh);text-align:center;transition:transform 1100ms cubic-bezier(.16,1,.3,1)}
.nd-odo .sym{display:inline-block;white-space:pre}
.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)}
.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:10px}
.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)}