/* Dark mode – generated from the light stylesheets (gen.py) plus a few hand-tuned rules. Active when <html> has class "dark". */
html.dark { color-scheme: dark; }
html.dark, html.dark :root { --page: #0e131c; --card: #161d2a; --text: #e3e8f0; --muted: #9aa4b5; --line: #252f40; --shadow: 0 1px 3px rgba(0,0,0,0.5);
  --up: #5ccf8f; --down: #ff8577; --up-bg: rgba(92,207,143,0.14); --down-bg: rgba(255,133,119,0.14); }
html.dark body { background: var(--page); color: var(--text); }
html.dark .theme-navy, html.dark body.theme-navy { --tile-bg: #1a2232; --tile-border: #2b3954; --tile-hover: #22304a; --tint: #1d2840; --soft: #9fbbe9; --tile-inr: #8fa8d6; --ink: #b9cdf3; --ink-2: #8fb0e6; }
html.dark .theme-plum, html.dark body.theme-plum { --tile-bg: #261a25; --tile-border: #4a3047; --tile-hover: #33222f; --tint: #2b1d2a; --soft: #e2bfdd; --tile-inr: #c79ac0; --ink: #ecc9e6; --ink-2: #d8a6d0; }
html.dark body { --tile-bg: #1a2232; --tile-border: #2b3954; --tile-hover: #22304a; --tint: #1d2840; --ink: #b9cdf3; --ink-2: #8fb0e6; }
/* ---- from dashboard-v2.css ---- */
html.dark body { background: var(--page); color: var(--text) }
html.dark .menubar { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.5) }
html.dark .menu-brand { color: var(--ink) }
html.dark .menu-btn { border: 1px solid var(--tile-border); background: var(--tint); color: var(--ink) }
html.dark .menu-btn:hover, html.dark .menu-btn[aria-expanded="true"] { background: var(--tile-hover) }
html.dark .menu-label { color: var(--ink) }
html.dark .menu-list { background: var(--card); border: 1px solid var(--tile-border); box-shadow: 0 1px 3px rgba(0,0,0,0.5) }
html.dark .menu-option { background: var(--card); color: var(--text) }
html.dark .menu-option:hover { background: var(--tint) }
html.dark .menu-option.active[data-tab="amit"] { color: var(--ink); background: var(--tint) }
html.dark .menu-option.active[data-tab="parents"] { color: var(--ink); background: var(--tint) }
html.dark .logout-btn { border: 1px solid var(--tile-border); background: var(--card); color: var(--muted) }
html.dark .logout-btn:hover { background: var(--tint) }
html.dark section { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.5) }
html.dark th { color: var(--ink) }
html.dark .loss { color: #ff8577 }
html.dark .sec-nw { box-shadow: 0 1px 3px rgba(0,0,0,0.5) }
html.dark .tile-label { color: var(--ink) }
html.dark .tile-gbp { color: var(--ink) }
html.dark .login-card { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.5) }
html.dark .login-card h1 { color: var(--ink) }
html.dark .login-card label { color: var(--ink) }
html.dark .login-card input { border: 1.5px solid var(--tile-border) }
html.dark .login-error { background: #3a1d1d; color: #ff9a8f }
html.dark .login-info { background: var(--tint); color: var(--ink) }
html.dark .notice-title { color: var(--ink) }
html.dark .notice th { color: var(--ink) }
html.dark .menu-nw { color: var(--ink) }
html.dark .chart-line { stroke: var(--ink-2) }
html.dark .cd-when { color: var(--ink) }
html.dark .tl-date { color: var(--ink) }
html.dark .sample-flag { color: #f0c76a; background: #3a2f12 }
html.dark .notice-title .ico { color: var(--ink-2) }
html.dark .tile-label .ico { color: var(--ink-2) }
html.dark .pn-btn.active { color: var(--ink) }
html.dark .ph-title { color: var(--ink) }
html.dark .link-btn { color: var(--ink-2) }
html.dark .gc-top { color: var(--ink) }
html.dark .gc-val { color: var(--ink) }
html.dark .gc-go { color: var(--ink-2) }
html.dark .sheet-back { color: var(--ink) }
html.dark .sheet-title { color: var(--ink) }
html.dark .pop-body { background: var(--card) }
html.dark .pop-item.current { color: var(--ink) }
html.dark .spark circle { fill: var(--card) }
html.dark .cs-btn[aria-pressed="true"] { background: var(--card); color: var(--ink) }
html.dark .cur-inr .tile-inr { color: var(--ink) }
html.dark .cur-inr .gc-inr { color: var(--ink) }
html.dark .short-toggle[aria-checked="true"] .mo-check { color: var(--ink) }
html.dark .burger-ico { stroke: var(--ink) }
html.dark .drawer-title { color: var(--ink) }
html.dark .drawer-close { color: var(--ink) }
html.dark .drawer-close:hover { background: var(--tint) }
html.dark .drawer-item:hover { background: var(--tint) }
html.dark .drawer-item.active[data-tab="amit"] { color: var(--ink); background: var(--tint) }
html.dark .drawer-item.active[data-tab="parents"] { color: var(--ink); background: var(--tint) }
html.dark .di-switch::after { background: var(--card) }
html.dark .drawer-item.short-toggle:hover { background: var(--tint) }
html.dark .drawer-signout { border: 1px solid var(--tile-border); background: var(--card); color: #ff8577 }
html.dark .drawer-signout:hover { background: #3a1d1d }
html.dark .drawer-item.pn-btn.active { color: var(--ink); background: var(--tint) }
html.dark .tab.theme-plum.active ~ .drawer .pn-btn.active, html.dark .drawer-panes[data-for="parents"] .pn-btn.active { color: var(--ink); background: var(--tint) }
html.dark .drawer .cur-switch { border: 1px solid var(--tile-border) }
html.dark .drawer .cs-btn { color: var(--ink) }
html.dark button.menu-brand { color: var(--ink) }
html.dark button.menu-nw { color: var(--ink) }
html.dark .drawer-item.push-toggle:hover { background: var(--tint) }
html.dark .push-test { border: 1px solid var(--tile-border); background: var(--tint); color: var(--ink) }
html.dark .push-test:hover { background: var(--tile-hover) }
html.dark .ib-go { color: var(--text) }
html.dark .drawer-gear:hover { background: var(--tint) }
html.dark .gear-ico { stroke: var(--ink) }
html.dark .drawer-back { color: var(--ink) }
html.dark .drawer-back:hover { background: var(--tint) }
html.dark .drawer-title { color: var(--ink) }
html.dark .na-amt { color: var(--ink) }
html.dark .na-badge.pending { background: #3a2f12; color: #f0c76a }
html.dark .na-cancel { background: var(--card) }
html.dark .wz-x { color: var(--ink) }
html.dark .wz-title { color: var(--ink) }
html.dark .wz-progress { background: #273247 }
html.dark .wz-page h2 { color: var(--ink) }
html.dark .wz-choice:has(input:checked) { background: var(--tint) }
html.dark .wz-ci { color: var(--ink) }
html.dark .wz-field input { border: 1px solid var(--tile-border); background: var(--card) }
html.dark .wz-seg { border: 1px solid var(--tile-border); background: var(--card) }
html.dark .wz-seg span { color: var(--ink) }
html.dark .wz-back { background: var(--card); color: var(--ink) }
html.dark .ra-btn { background: var(--card); color: var(--ink) }
html.dark tr.row-edit td:not(.row-actions) { background: #2e2812 }
html.dark .ed-bank { color: var(--ink) }
html.dark .wz-field select { border: 1px solid var(--tile-border); background: var(--card) }
html.dark .he-lot-head { color: var(--ink) }
html.dark .he-add-lot { color: var(--ink) }
html.dark .price-alert { background: #3a2f12 }
html.dark .pa-title { color: #f0c76a }
html.dark .price-alert.covered .pa-title { color: var(--ink) }
html.dark .pe-name { color: var(--ink) }
html.dark .ra-mature { color: #f0c76a; border-color: #6b5420; background: #3a2f12 }
html.dark .hist-chip { background: var(--card); color: var(--ink) }
html.dark .hist-line { stroke: var(--ink) }
html.dark .hist-guide { stroke: var(--ink-2) }
html.dark .hist-dot { fill: var(--card); stroke: var(--ink) }
html.dark .hist-tip { color: var(--ink) }
html.dark .al-amt { color: var(--ink) }
html.dark .inc-big { color: var(--ink) }
html.dark .inc-bar:focus-visible .inc-hit { stroke: var(--ink-2) }
html.dark .inc-mh { color: var(--ink) }
html.dark .th-switch { border: 1px solid var(--tile-border) }
html.dark .th-btn { color: var(--ink) }
/* ---- from choose.css ---- */
html.dark .cp-bar-title { color: var(--ink) }
html.dark .cp-out button { border: 1px solid var(--tile-border); background: var(--card); color: #ff8577 }
html.dark .cp-out button:hover { background: #3a1d1d }
html.dark .cp-intro h1 { color: var(--ink) }
html.dark .cp-amt.cp-gbp { color: var(--ink) }
html.dark .cp-amt-s.cp-gbp { color: var(--ink) }
html.dark .cur-inr .cp-amts .cp-inr { color: var(--ink) }
html.dark .cur-inr .cp-c-val .cp-inr { color: var(--ink) }
html.dark .cp-sec { color: var(--ink) }
html.dark .cp-cur { border: 1px solid var(--tile-border) }
html.dark .cp-cs { color: var(--ink) }
html.dark .cp-short:hover { background: var(--tint) }
html.dark .cp-switch::after { background: var(--card) }
html.dark .cp-install { background: var(--card); color: var(--ink) }
html.dark .cp-install:hover { background: var(--tint) }
html.dark .cp-burger { border: 1px solid var(--tile-border); background: var(--tint) }
html.dark .cp-burger:hover, html.dark .cp-burger[aria-expanded="true"] { background: var(--tile-hover) }
html.dark .cp-burger svg { stroke: var(--ink) }
html.dark .drawer-close { color: var(--ink) }
html.dark .drawer-close:hover { background: var(--tint) }
html.dark .drawer-item:hover { background: var(--tint) }
html.dark .drawer-signout { border: 1px solid var(--tile-border); background: var(--card); color: #ff8577 }
html.dark .drawer-signout:hover { background: #3a1d1d }
html.dark .ib-go { color: var(--text) }
html.dark .drawer-gear:hover { background: var(--tint) }
html.dark .gear-ico { stroke: var(--ink) }
html.dark .drawer-back { color: var(--ink) }
html.dark .drawer-back:hover { background: var(--tint) }
html.dark .drawer-title { color: var(--ink) }
html.dark .drawer-item.cp-short:hover { background: var(--tint) }
html.dark .ex-back { color: var(--ink) }
html.dark .ex-date { color: var(--ink) }
html.dark .ex-file { border: 1px solid var(--tile-border); background: var(--tint); color: var(--ink) }
html.dark .ex-file.ex-parents { border-color: var(--tile-border); background: var(--tint); color: var(--ink) }
html.dark .dl-ico { stroke: var(--ink) }
html.dark .ex-head { color: var(--muted) }
html.dark .sec-list { background: var(--card) }
html.dark .sec-item { border-top: 1px solid var(--line) }
html.dark .sec-name { color: var(--ink) }
html.dark .sec-sub { color: var(--muted) }
html.dark .sec-remove { border: 1px solid #6b3530; background: var(--card); color: #ff8577 }
html.dark .sec-ok { background: #15301f; color: #7fd8a4 }
html.dark .sec-err { background: #3a1d1d; color: #ff9a8f }
html.dark .sec-note { color: var(--muted) }
html.dark .th-switch { border: 1px solid var(--tile-border) }
html.dark .th-btn { color: var(--ink) }
/* ---- from login.css ---- */
html.dark .lp-bar-title { color: var(--ink) }
html.dark .lp-body input:focus { background: var(--card) }
html.dark .lp-show { color: var(--ink) }
html.dark .lp-show:hover { background: var(--tile-hover) }
html.dark .lp-error { background: #3a1d1d; color: #ff9a8f }
html.dark .lp-info { background: var(--tint); color: var(--ink) }
html.dark .lp-or { color: var(--muted) }
html.dark .lp-bye-title { color: var(--ink) }
html.dark .lp-bye-text { color: var(--muted) }

/* hand-tuned */
html.dark .login-page input[type="text"], html.dark .login-page input[type="password"], html.dark .lp-show { border-color: #2b3954; }
html.dark .login-page input:focus { border-color: #4f7fc4; }
/* ---- users page, welcome card, password form ---- */
html.dark .us-h, html.dark .us-small { color: var(--muted) }
html.dark .us-item { border-top-color: var(--line) }
html.dark .us-note { color: var(--text) }
html.dark .us-btn { background: var(--card); border-color: #2b3954; color: #b9cdf3 }
html.dark .us-btn.us-go { background: #2E5FA3; border-color: #2E5FA3; color: #fff }
html.dark .us-btn.us-warn { border-color: #6b3a35; color: #ff8577 }
html.dark .us-btn.confirm { background: #c0392b; border-color: #c0392b; color: #fff }
html.dark .us-tag { background: #252f40; color: var(--muted) }
html.dark .us-temp { background: #2a2414; border-left-color: #d99a00; color: var(--text) }
html.dark .cp-welcome { background: var(--card); box-shadow: var(--shadow) }
html.dark .cp-welcome h2 { color: #b9cdf3 }
html.dark .cp-welcome p, html.dark .pw-form label { color: var(--muted) }
html.dark .pw-form input { background: #1d2840; border-color: #2b3954; color: var(--text) }
/* ---- privacy page, account data ---- */
html.dark .pv-h { color: #b9cdf3 }
html.dark .pv-p, html.dark .pv-list { color: var(--text) }
html.dark .pv a, html.dark .sec-note a { color: #9fbbe9 }
html.dark .sec-out { background: var(--card); border-color: #2b3954; color: #b9cdf3 }
html.dark .danger-zone { background: var(--card); border-color: #6b3a35 }
html.dark .danger-zone .pw-form label { color: #ff8577 }