/* Design tokens (Pano UI spec B2). Components read tokens only.
   v0.27.0: two themes. Dark is :root (and data-theme="dark"); Light is [data-theme="light"], and the same set under
   prefers-color-scheme: light for data-theme="system". The server writes data-theme on <html> from the Appearance setting,
   so the first paint is already in the right theme. Keep the two light blocks identical (test_v0270 checks it). */
:root{
  --bg-base:#0B0F14;--surface-1:#121821;--surface-2:#19212C;--surface-3:#2A364A;--row-hover:#1B2432;--border:#263041;
  --text-primary:#E6EAF0;--text-secondary:#9AA6B5;--text-muted:#7C8899;
  --gain:#22C55E;--gain-bg:rgba(34,197,94,0.14);--loss:#EF4444;--loss-text:#F87171;--loss-bg:rgba(239,68,68,0.14);
  --c-total:#CBD5E1;--c-tr:#3B82F6;--c-us:#14B8A6;--c-eurobond:#8B5CF6;--c-crypto:#F59E0B;--c-cash:#64748B;--c-funds:#EC4899;--c-other:#D6D3D1;--c-unset:#3F4A5C;--c-retire:#84CC16;
  --c-gold:var(--c-other);
  /* v0.38.19 (charts redesign C5): debts in their own colours, the same in both themes (checked on #121821 and #FFFFFF) */
  --d-car:#E11D48;--d-card:#D97706;--d-mortgage:#7C3AED;--d-loan:#0284C7;--d-other:#64748B;
  /* label tags (v0.17.4): soft paper colours, apart from the saturated group colours above; dark ink on them */
  --l-coral:#FF9F8C;--l-apricot:#FFC48A;--l-butter:#F2DC8D;--l-mint:#A3E4BC;--l-aqua:#94DCDD;--l-sky:#A8CCF5;--l-periwinkle:#B9BCF7;--l-lilac:#D6B8F2;--l-rose:#F4AFC8;--l-stone:#D3CABD;--l-ink:#15181E;
  --font:Inter,"Segoe UI",system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s12:48px;
  --r-card:12px;--r-ctl:8px;--r-badge:6px;
  --elev:0 8px 32px rgba(0,0,0,0.5);--t:150ms ease-out;
  /* v0.27.0: tokens that were used with fallbacks only, and the colours that were fixed in style.css. v0.49.3: dark --accent
     #3B82F6 → #69A0F8, so blue words read at 4.5:1 or more on every dark surface, a selected chip or tab included */
  --warn:#F59E0B;--shadow-pic:0 12px 40px rgba(0,0,0,.18);--accent:#69A0F8;--r2:8px;--mono:ui-monospace,Consolas,"Cascadia Mono",monospace;--border-strong:#3A475B;
  --overlay:rgba(0,0,0,0.45);--overlay-strong:rgba(0,0,0,0.55);--sh-dock:-8px 0 24px rgba(0,0,0,0.08);--sh-pop:0 4px 16px rgba(0,0,0,0.3);--sh-knob:0 1px 2px rgba(0,0,0,0.35);--sh-menu:0 8px 24px rgba(0,0,0,0.25);--flag-edge:rgba(255,255,255,0.22);
  --tm-ink:#fff;--tm-shade:0 1px 2px rgba(0,0,0,0.45);--tm-held:inset 0 0 0 2px rgba(255,255,255,0.85);          /* v0.35.9: text on the Sectors heat map, the same in both themes */
  --ltag-dot:rgba(0,0,0,0.45);--ltag-off-tint:16%;--ltag-off-ink:100%;      /* switched-off label chip: tint of the label colour, and how much of it the text keeps (the rest is --text-primary) */
  /* v0.49.0: shell tokens, so a light style can colour the main button, the sidebar and the selected page without colours in style.css.
     Dark keeps its look: the main button is ink, nothing rings a selected segment, no bar beside the selected page */
  --pri-bg:var(--text-primary);--pri-ink:var(--bg-base);--aside-bg:var(--surface-1);--nav-on-bg:var(--surface-3);--nav-on-ink:var(--text-primary);
  --nav-on-bar:transparent;--sel-ring:transparent;--logo:normal;
  color-scheme:dark;
}
/* v0.49.0 (Classic Light): small grey text 4.5:1 on a selected chip too, the blue a step darker, a ring round the selected segment
   and a bar beside the selected page, so a choice shows by more than a shade of grey.
   v0.29.4 (Cila 2 L13): gain, loss and the BES step text one step darker for 4.5:1 on white. v0.27.0: Light (UX review "Light theme", 22 Oct 2026; contrast measured on white cards) */
:root[data-theme="light"]{
  --bg-base:#F4F6F9;--surface-1:#FFFFFF;--surface-2:#EDF1F5;--surface-3:#DDE3EB;--row-hover:#F2F5F9;--border:#DCE2EA;--border-strong:#B8C2CF;
  --text-primary:#111827;--text-secondary:#4B5563;--text-muted:#566272;
  --gain:#166534;--gain-bg:rgba(22,163,74,0.12);--loss:#C62828;--c-retire-text:#3F6212;--loss-text:#B91C1C;--loss-bg:rgba(220,38,38,0.10);
  --c-total:#334155;--c-tr:#2563EB;--c-us:#0D9488;--c-eurobond:#7C3AED;--c-crypto:#D97706;--c-cash:#64748B;--c-funds:#DB2777;--c-other:#8A8178;--c-unset:#CBD5E1;--c-retire:#65A30D;
  --warn:#B45309;--accent:#2158D6;
  --sel-ring:var(--text-muted);--nav-on-bar:var(--accent);
  --elev:0 8px 28px rgba(15,23,42,0.14);--overlay:rgba(15,23,42,0.28);--overlay-strong:rgba(15,23,42,0.32);
  --sh-dock:-8px 0 24px rgba(15,23,42,0.06);--sh-pop:0 4px 16px rgba(15,23,42,0.14);--sh-knob:0 1px 2px rgba(15,23,42,0.25);--sh-menu:0 8px 24px rgba(15,23,42,0.12);--flag-edge:rgba(15,23,42,0.2);
  --ltag-dot:rgba(0,0,0,0.45);--ltag-off-tint:35%;--ltag-off-ink:35%;
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root[data-theme="system"]{
  --bg-base:#F4F6F9;--surface-1:#FFFFFF;--surface-2:#EDF1F5;--surface-3:#DDE3EB;--row-hover:#F2F5F9;--border:#DCE2EA;--border-strong:#B8C2CF;
  --text-primary:#111827;--text-secondary:#4B5563;--text-muted:#566272;
  --gain:#166534;--gain-bg:rgba(22,163,74,0.12);--loss:#C62828;--c-retire-text:#3F6212;--loss-text:#B91C1C;--loss-bg:rgba(220,38,38,0.10);
  --c-total:#334155;--c-tr:#2563EB;--c-us:#0D9488;--c-eurobond:#7C3AED;--c-crypto:#D97706;--c-cash:#64748B;--c-funds:#DB2777;--c-other:#8A8178;--c-unset:#CBD5E1;--c-retire:#65A30D;
  --warn:#B45309;--accent:#2158D6;
  --sel-ring:var(--text-muted);--nav-on-bar:var(--accent);
  --elev:0 8px 28px rgba(15,23,42,0.14);--overlay:rgba(15,23,42,0.28);--overlay-strong:rgba(15,23,42,0.32);
  --sh-dock:-8px 0 24px rgba(15,23,42,0.06);--sh-pop:0 4px 16px rgba(15,23,42,0.14);--sh-knob:0 1px 2px rgba(15,23,42,0.25);--sh-menu:0 8px 24px rgba(15,23,42,0.12);--flag-edge:rgba(15,23,42,0.2);
  --ltag-dot:rgba(0,0,0,0.45);--ltag-off-tint:35%;--ltag-off-ink:35%;
  color-scheme:light;
}}
/* v0.49.0: Leaf, a light style (Settings → Appearance → Light style). It changes the light theme only: the page, the cards' grey turns
   a soft green, the main button, the selected page and the logo a deep green, and gains a brighter green so they stay apart from it.
   Losses, group and label colours are Light's. The server writes data-light on <html>. Keep the two Leaf blocks identical. */
:root[data-theme="light"][data-light="leaf"]{
  --bg-base:#F4F8F5;--surface-1:#FFFFFF;--surface-2:#EBF3EE;--surface-3:#D9ECE0;--row-hover:#F0F6F2;--border:#DCE7E0;--border-strong:#B2C7BA;
  --text-primary:#0F2219;--text-secondary:#41574A;--text-muted:#55695D;
  --gain:#14763A;--gain-bg:rgba(34,197,94,0.14);--accent:#1A6B45;--c-total:#1F5E40;--c-unset:#CCDCD2;
  --pri-bg:#185C37;--pri-ink:#FFFFFF;--aside-bg:#F8FBF9;--nav-on-bg:#D9ECE0;--nav-on-ink:#0F3D26;--nav-on-bar:#1A6B45;--logo:url("logo-leaf.svg");
}
@media (prefers-color-scheme:light){:root[data-theme="system"][data-light="leaf"]{
  --bg-base:#F4F8F5;--surface-1:#FFFFFF;--surface-2:#EBF3EE;--surface-3:#D9ECE0;--row-hover:#F0F6F2;--border:#DCE7E0;--border-strong:#B2C7BA;
  --text-primary:#0F2219;--text-secondary:#41574A;--text-muted:#55695D;
  --gain:#14763A;--gain-bg:rgba(34,197,94,0.14);--accent:#1A6B45;--c-total:#1F5E40;--c-unset:#CCDCD2;
  --pri-bg:#185C37;--pri-ink:#FFFFFF;--aside-bg:#F8FBF9;--nav-on-bg:#D9ECE0;--nav-on-ink:#0F3D26;--nav-on-bar:#1A6B45;--logo:url("logo-leaf.svg");
}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}