:root{
  --theme-fade-duration:260ms;
  --danger:#a33d36;--danger-bg:#a33d36;--danger-ink:#fff;--danger-hover:#862e29;
  --segments-bg:#e8f0f5;--summary-line:#cbdfea;--summary-emphasis:#166b9f;--amount-placeholder:#6b7f8b;
  --selection-bg:#f8e5a1;--scroll-thumb:#b9cdd9;--pill-shadow:0 2px 5px #143c5010;
  --dialog-shadow:0 20px 80px #13394e29;--popover-shadow:0 12px 36px #13394e26;
  --preview-shade:#102e3b;--page-shadow:-10px 0 24px #183b5114;
  --chart-tooltip-bg:var(--ink);--chart-tooltip-ink:var(--surface);
}
/* Keep hover/focus color transitions from competing with the shared theme
   clock, including WebKit's handoff when a WAAPI color animation finishes.
   Transform and opacity interactions stay available throughout the fade. */
:root[data-theme-animating=colors] *,
:root[data-theme-animating=colors] *::before,
:root[data-theme-animating=colors] *::after,
:root[data-theme-measuring] *,
:root[data-theme-measuring] *::before,
:root[data-theme-measuring] *::after{transition-property:transform,opacity,translate!important}
/* A single composited fade keeps cards, text and graphs in the same frame. */
:root[data-theme-animating=view]::view-transition{pointer-events:none}
:root[data-theme-animating=view]::view-transition-group(root){animation:none}
:root[data-theme-animating=view]::view-transition-image-pair(root){isolation:isolate}
:root[data-theme-animating=view]::view-transition-old(root){animation:none;mix-blend-mode:normal}
:root[data-theme-animating=view]::view-transition-new(root){animation:theme-crossfade var(--theme-fade-duration) var(--ease-in-out) both;mix-blend-mode:normal}
@keyframes theme-crossfade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){:root[data-theme-animating=view]::view-transition-new(root){animation:none}}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#10212c;--surface:#172d3a;--apricot:#1c3b4e;--lemon:#82c6ee;
  --ink:#e3eef5;--muted:#a1b9c9;--line:#304a59;--green:#83d3bd;--expense:#f0a5a1;--field-focus:#8cc9ed;
  --primary-ink:#0f2736;--primary-hover:#a7d9f5;--sand:#344238;--citrus:#f6d566;
  --nav:#203b4c;--badge:#203847;--badge-ink:#a3c1d4;--selected:#24475e;
  --hover:#203b4c;--track:#284252;--track-fill:#819fab;
  --chart-expense-start:221,150,144;--chart-expense-end:105,69,74;
  --chart-income-start:107,190,167;--chart-income-end:48,86,84;
  --bar:#d98b87;--bar-income:#60ab99;--leader:#657f91;
  --shadow:0 8px 24px #0004;--overlay:#020c14a8;
  --toast-bg:#274353;--toast-ink:#eef5f8;--toast-line:#496371;--toast-success:#a4d6cb;--toast-shadow:0 6px 18px #0003;
  --danger:#ffaaa2;--danger-bg:#ae4842;--danger-ink:#fff;--danger-hover:#9b3c37;
  --segments-bg:#203b4c;--summary-line:#385768;--summary-emphasis:#9dd7fa;--amount-placeholder:#a1b9c9;
  --selection-bg:#34566c;--scroll-thumb:#4b697c;--pill-shadow:0 2px 5px #0003;
  --dialog-shadow:0 20px 80px #0006;--popover-shadow:0 12px 36px #0005;
  --preview-shade:#06131c;--page-shadow:-10px 0 24px #0003;
  --chart-tooltip-bg:#294858;--chart-tooltip-ink:#eef5f8;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.theme-toggle{flex:none;color:var(--muted);padding:0;min-width:44px;min-height:44px;user-select:none;-webkit-user-select:none}
.theme-icon{display:block;position:relative;flex:none;width:21px;height:21px;overflow:hidden;pointer-events:none}
/* Both retained icons settle below the frame: one sets while the other rises.
   theme.js animates these states on the same clock as the page colors. */
.theme-icon-part{display:block;position:absolute;inset:0;opacity:0;transform:translateY(5px)}
.theme-toggle[data-theme-current=light] .theme-icon-sun,
.theme-toggle[data-theme-current=dark] .theme-icon-moon{opacity:1;transform:translateY(0)}
.theme-toggle:empty{visibility:hidden}
.header-theme-toggle{margin-left:auto}
.feature-theme-toggle{margin-left:auto}
.detail-page-header .feature-theme-toggle{display:inline-flex}
.mobile-theme-toggle{display:none}
/* Match the ledger toolbar's content edge, including the reserved scrollbar
   space. Keep the button in normal flow so long titles cannot overlap it. */
@media(min-width:761px){
  .feature-theme-toggle{display:none}
  .detail-page-header{padding-right:calc(32px + var(--reading-scrollbar,0px))}
  .detail-page-header .feature-theme-toggle{margin-top:-1px}
}
@media(min-width:761px) and (max-width:1050px){.detail-page-header{padding-right:calc(28px + var(--reading-scrollbar,0px))}}
@media(max-width:760px){
  .mobile-theme-toggle{display:inline-flex}
  .mobile-header .theme-toggle>.theme-icon{display:block}
  .mobile-header{padding-right:calc(16px + var(--ledger-content-inset) - 11.5px)}
  .feature-theme-toggle{margin-right:calc(var(--ledger-content-inset) - 11.5px)}
  .detail-page-header{max-width:600px;padding-right:calc(16px + var(--reading-scrollbar,0px))}
}
@media(max-width:360px){:root{--page-title-size:17px}.mobile-header .brand{font-size:var(--page-title-size);gap:6px}.mobile-header .brand img{width:28px;height:28px}}
@media(max-width:340px){
  :root{--page-title-size:15px}
  .mobile-header{padding-right:calc(16px + var(--ledger-content-inset) - 9.5px)}
  .mobile-header .brand{font-size:var(--page-title-size);gap:4px}.mobile-header .brand img{width:24px;height:24px}
  .mobile-header .ledger-function-button{width:40px;min-width:40px;min-height:44px}
}