/* Theme tokens cover the entire existing UI, not just its background. */
:root{--on-accent:#132332;--sidebar-bg:#13161a;--input-bg:#14181d;--control:#49515d;--good-bg:#26392f;--good-fg:#b4d7be;--good-line:#3c5444;--warn-bg:#3c2e25;--warn-fg:#f1c6a5;--warn-line:#68503c;--error-bg:#3e2921;--error-fg:#ffd0bd;--error-line:#8f5946;--danger:#ffb4a8;--chart-maintenance:#dcaf83;--shadow:0 8px 24px #0002}
:root[data-theme=light]{--bg:#f5f6f3;--surface:#fff;--raised:#eef1f2;--text:#182630;--muted:#52636f;--line:#d4dde1;--accent:#225b7a;--accent-soft:#e6eff4;--on-accent:#fff;--green:#326b48;--sidebar-bg:#fafbf8;--input-bg:#fff;--control:#83949f;--good-bg:#e9f3eb;--good-fg:#28563a;--good-line:#9aba9f;--warn-bg:#fff0e2;--warn-fg:#794316;--warn-line:#cda780;--error-bg:#fff0eb;--error-fg:#86351e;--error-line:#cd9989;--danger:#963923;--chart-maintenance:#8b4c24;--shadow:0 8px 24px #2030400d}
:root[data-accent=forest]{--accent:#9bd8b9;--accent-soft:#203d31;--on-accent:#13271d}:root[data-theme=light][data-accent=forest]{--accent:#23634c;--accent-soft:#e4f0e9;--on-accent:#fff}
:root[data-accent=ember]{--accent:#efc093;--accent-soft:#3c3025;--on-accent:#2c1c0f}:root[data-theme=light][data-accent=ember]{--accent:#874919;--accent-soft:#f5ebdf;--on-accent:#fff}
body,.panel,.vehicle,.sidebar,.topbar,input,select,textarea{transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out}h1,h2{ text-wrap:balance}p{text-wrap:pretty}#content{animation:none}.sidebar{background:var(--sidebar-bg);border-color:var(--line);overflow-y:auto}.topbar{position:sticky;top:0;z-index:4;background:var(--bg);border-color:var(--line);transition:box-shadow 160ms ease-out}.has-scrolled .topbar{box-shadow:var(--shadow)}.topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-right{flex-shrink:0}.top-local{display:none}nav a.active{background:var(--accent-soft);color:var(--text)}nav a:hover{background:var(--raised);color:var(--text)}.btn{border-color:var(--control)}.btn.primary,.btn.dark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn:hover{background:var(--raised);border-color:var(--control)}.btn.primary:hover,.btn.dark:hover{background:color-mix(in srgb,var(--accent),white 10%);border-color:var(--accent)}[data-theme=light] .btn.primary:hover,[data-theme=light] .btn.dark:hover{background:color-mix(in srgb,var(--accent),black 10%)}.btn.text{background:transparent}.btn.text:hover{color:var(--text)}.btn:active:not(:disabled){transform:scale(.96)}.btn.danger,.photo-error,.photo-remove,.over-budget{color:var(--danger)}.profile>span:first-child,.avatar,.profile-avatar,.large-avatar{background:var(--accent-soft);color:var(--accent);border-color:var(--control)}.avatar img,.profile-avatar img,.large-avatar img{outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px}[data-theme=light] .avatar img,[data-theme=light] .large-avatar img{outline-color:oklch(0 0 0 / .1)}
input,select,textarea{background:var(--input-bg);border-color:var(--control);color:var(--text)}input::placeholder,textarea::placeholder{color:var(--muted)}.field{color:var(--muted)}.plate{background:var(--raised);border-color:var(--control);color:var(--text)}.status{color:var(--good-fg);background:var(--good-bg);border-color:var(--good-line)}.status.warn{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-line)}.status.neutral{color:var(--muted);background:var(--raised);border-color:var(--control)}.note{background:var(--accent-soft);border-color:var(--line);color:var(--muted)}.activity-icon{background:var(--raised);border-color:var(--line)}.add-tile{background:var(--surface);border-color:var(--control)}.add-tile:hover{background:var(--raised)}.heading-tag{color:var(--muted);border-color:var(--line)}.fuel-progress{background:var(--line)}.fuel-progress.over>span{background:var(--danger)}.auth-story{background:var(--surface)}.auth-story>p{color:var(--muted)}.auth-lines strong{color:var(--text)}.dialog-head,.dialog-actions{background:var(--surface);border-color:var(--line)}.close{background:var(--raised);color:var(--text);border-color:var(--control)}.photo-field{border-color:var(--control)}.photo-preview{background:var(--raised)}.form-error,.error-banner{background:var(--error-bg);border-color:var(--error-line);color:var(--error-fg)}#toast{background:var(--accent);color:var(--on-accent)}th{background:var(--raised);color:var(--muted)}.chart-data tbody th{background:transparent;color:var(--text)}
.public-tools{display:none;position:absolute;top:24px;right:24px;z-index:5}.signed-out .public-tools{display:flex}.utility-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:10px;white-space:nowrap;transition:background-color 140ms ease-out,transform 140ms ease-out}.utility-button:hover{background:var(--raised)}.utility-button:active{transform:scale(.96)}.utility-button>svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none}.theme-icon .sun,.theme-icon .moon{transform-origin:12px 12px;transition:opacity 180ms cubic-bezier(.2,0,0,1),transform 180ms cubic-bezier(.2,0,0,1),filter 180ms cubic-bezier(.2,0,0,1)}.theme-icon .sun{opacity:0;transform:scale(.25);filter:blur(4px)}.theme-icon .moon{opacity:1;transform:scale(1);filter:blur(0)}[data-theme=light] .theme-icon .sun{opacity:1;transform:scale(1);filter:blur(0)}[data-theme=light] .theme-icon .moon{opacity:0;transform:scale(.25);filter:blur(4px)}.reading-progress{position:fixed;inset:0 0 auto;height:2px;z-index:7;pointer-events:none;background:transparent}.reading-progress:after{content:'';display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--scroll,0));transform-origin:left}.signed-out .reading-progress{display:none}.back-to-top{position:fixed;right:22px;bottom:22px;z-index:5;width:44px;height:44px;border:1px solid var(--control);border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:var(--shadow);font-size:20px}.page-help{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin-top:10px;padding:4px 0;border:0;background:transparent;color:var(--muted);font-size:10px;text-decoration:underline;text-underline-offset:3px}.page-help>span{display:inline-grid;place-items:center;border:1px solid var(--control);border-radius:50%;width:15px;height:15px;text-decoration:none;font-size:10px}.insight-preview,.insight-prompt{margin-top:26px;margin-bottom:26px}.insight-prompt{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.insight-prompt strong{font-size:13px}.insight-prompt p{color:var(--muted);font-size:11px;margin-top:4px}.insight-filters{display:flex;align-items:end;gap:18px;margin:0 0 28px}.insight-filters>.field{width:210px}.insight-filters>p{margin-left:auto;color:var(--muted);font-size:10px}.insight-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.insight-summary .metric-value{font-size:32px}.insight-budgets{margin-top:24px}
.spend-chart,.budget-chart{margin:0}.spend-chart figcaption{display:flex;justify-content:space-between;gap:18px;align-items:center}.spend-chart h2,.budget-chart h2{font-size:19px}.spend-chart figcaption p,.budget-chart figcaption p{font-size:11px;color:var(--muted);margin-top:8px}.chart-total{text-align:right;flex-shrink:0}.chart-total>small{display:block;font-size:10px}.chart-total>strong{font:500 34px/1.2 var(--display);font-variant-numeric:tabular-nums}.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 18px;color:var(--muted);font-size:10px}.chart-legend>span{display:inline-flex;align-items:center;gap:7px}.chart-legend i{display:block;width:10px;height:10px;border-radius:2px}.fuel-key,.fuel-bar,.spent-track{background:var(--accent)}.maintenance-key,.maintenance-bar{background:var(--chart-maintenance);background-image:repeating-linear-gradient(135deg,transparent,transparent 3px,#0002 3px,#0002 5px)}.chart-legend .budget-key{background:transparent;border:2px dashed var(--control);border-radius:0}.chart-layout{display:flex;gap:14px}.chart-axis{width:65px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;padding:0 0 31px;text-align:right;color:var(--muted);font:10px/1.4 var(--font);font-variant-numeric:tabular-nums}.monthly-chart{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 calc(50% - 15px)/100% 1px no-repeat}.month-group{height:220px;display:flex;flex-direction:column;min-width:0;justify-content:end}.month-bars{display:flex;align-items:flex-end;justify-content:center;gap:6px;flex:1;min-height:0;border-bottom:1px solid var(--control)}.chart-bar{display:block;width:min(28px,38%);height:var(--bar-height,0);border-radius:4px 4px 0 0;flex-shrink:0}.month-label{display:block;font-size:11px;text-align:center;line-height:30px;color:var(--muted)}.chart-empty{color:var(--muted);font-size:12px;margin:20px 0;max-width:65ch}.chart-source{font-size:10px;color:var(--muted);line-height:1.8;margin-top:16px}.chart-source a,.help-faq a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}.chart-data{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.chart-data summary{cursor:pointer;color:var(--accent);font-size:11px;min-height:36px;padding:8px 0}.chart-data table{margin:10px 0}.chart-data caption{text-align:left;color:var(--muted);font-size:11px;padding:10px 0}.chart-data td,.chart-data th{font-variant-numeric:tabular-nums}.budget-compare-row{border-top:1px solid var(--line);padding:20px 0}.budget-compare-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.budget-compare-heading>strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}.budget-compare-heading .plate{margin:0;flex-shrink:0}.budget-tracks{display:grid;gap:5px;margin:15px 0 12px}.budget-tracks span{display:block;width:var(--bar-width,0);height:8px;border-radius:3px}.budget-tracks .budget-track{height:8px;background:transparent;border-top:2px dashed var(--control);border-bottom:2px dashed var(--control);border-radius:0}.budget-tracks .budget-track[style*="--bar-width:0%"]{border:0}.budget-compare-values{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:11px;color:var(--muted)}.budget-compare-values strong{color:var(--text);font-weight:500}.budget-compare-values>.over-budget{color:var(--danger)}
.welcome-guide{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:24px;background:var(--surface);margin-bottom:30px}.welcome-copy h2{font:500 29px/1.2 var(--display)}.welcome-copy p{font-size:12px;color:var(--muted);max-width:48ch;margin:12px 0 18px}.welcome-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.getting-started{padding-left:24px;border-left:1px solid var(--line);align-self:center}.getting-started>strong{font-size:9px;letter-spacing:.7px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}.getting-started>strong>span{color:var(--accent);font-variant-numeric:tabular-nums}.check-row{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:12px;color:var(--muted)}.check-row>span:first-child{width:20px;text-align:center}.check-row.complete>span:first-child{color:var(--good-fg)}.check-row small{font-size:9px;margin-left:8px}.appearance-settings{grid-column:1/-1}.appearance-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.preference-badge{font-size:10px;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:20px}.appearance-options{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-top:24px}.appearance-options fieldset{border:0;margin:0;padding:0;min-width:0}.appearance-options legend{font-size:12px;font-weight:500;margin-bottom:14px}.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.theme-option{position:relative;border:1px solid var(--control);border-radius:10px;padding:12px 10px;cursor:pointer;font-size:11px}.theme-option:has(input:checked){border-color:var(--accent);outline:1px solid var(--accent);background:var(--accent-soft)}.theme-option input{width:16px;height:16px;min-height:0;accent-color:var(--accent);margin:0 0 8px}.theme-option>strong,.theme-option>small{display:block}.theme-option>small{font-size:9px;margin-top:3px}.theme-sample{display:flex;align-items:flex-end;gap:5px;height:34px;background:#202b35;padding:6px;border-radius:4px;margin-bottom:10px}.theme-sample>i{width:20%;height:75%;background:#a6cbe4;border-radius:2px}.theme-sample>i+ i{width:58%;height:35%;background:#8798a5}.sample-light{background:#e6edf1}.sample-light>i{background:#225b7a}.sample-system{background:linear-gradient(90deg,#202b35 50%,#e6edf1 50%)}.accent-options{display:flex;gap:8px;flex-wrap:wrap}.accent-option{display:flex;align-items:center;gap:6px;border:1px solid var(--control);border-radius:7px;padding:10px 8px;font-size:10px;cursor:pointer}.accent-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.accent-option input{width:14px;height:14px;min-height:0;margin:0;accent-color:var(--accent)}.accent-swatch{width:11px;height:11px;border-radius:50%;border:1px solid var(--control)}.swatch-glacier{background:#a6cbe4}.swatch-forest{background:#9bd8b9}.swatch-ember{background:#efc093}.motion-option{display:flex;align-items:flex-start;gap:10px;margin-top:24px}.motion-option input{width:18px;height:18px;min-height:0;flex-shrink:0;accent-color:var(--accent)}.motion-option strong{display:block;font-size:12px;font-weight:500}.motion-option small{display:block;font-size:10px;max-width:45ch;margin-top:5px}.appearance-privacy{font-size:10px;color:var(--muted);margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.help-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:26px}.help-intro p{font-size:12px;color:var(--muted);max-width:55ch;margin-top:12px}.help-flow{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);flex-shrink:0}.help-flow>span{border:1px solid var(--line);padding:8px;border-radius:6px}.help-flow>i{font-style:normal;color:var(--accent)}.help-topics{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.help-topic.panel{padding:0}.help-topic>summary{display:flex;gap:14px;align-items:center;padding:20px;cursor:pointer;list-style:none;min-height:90px;font-size:13px}.help-topic>summary::-webkit-details-marker{display:none}.help-number{font:500 24px var(--display);color:var(--accent)}.help-topic summary small{display:block;font-size:8px;letter-spacing:.6px;margin-top:6px;color:var(--muted)}.help-expand{margin-left:auto;color:var(--accent);font-size:18px}.help-topic[open] .help-expand{transform:rotate(45deg)}.help-topic-body{padding:0 20px 20px;border-top:1px solid var(--line)}.help-topic-body>p:first-child{font-size:12px;color:var(--muted);margin-top:18px}.help-topic-body ol{padding-left:20px;font-size:12px;line-height:1.9}.help-topic-body li+li{margin-top:10px}.help-topic-body .actions{margin-top:16px}.help-faq{margin-top:24px}.help-faq details{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.help-faq summary{font-size:12px;cursor:pointer;min-height:36px;padding:8px 0}.help-faq p{font-size:12px;color:var(--muted);margin-top:12px;max-width:85ch}.help-faq .btn{margin-top:12px}.guide-illustration{display:flex;align-items:center;gap:24px;padding:24px;background:var(--accent-soft);border:1px solid var(--line);border-radius:10px}.guide-number{font:500 72px/1 var(--display);color:var(--accent)}.guide-illustration>div>span{font-size:9px;letter-spacing:.8px;color:var(--muted);display:block}.guide-illustration strong{display:block;font:500 28px/1.2 var(--display);margin-top:8px}.guide-path{display:flex;gap:6px;margin-top:16px}.guide-path i{height:4px;width:28px;background:var(--accent);opacity:.6;border-radius:4px}.guide-path i:first-child{opacity:1;width:48px}.guide-intro{font-size:13px;line-height:1.8;margin-top:20px}.guide-steps{padding-left:22px;font-size:12px;line-height:1.9}.guide-steps li+li{margin-top:12px}.guide-dots{display:flex;justify-content:center;margin-top:18px}.guide-dots button{border:0;background:none;padding:10px;width:34px;height:36px}.guide-dots button>span{display:block;background:var(--control);width:7px;height:7px;border-radius:50%}.guide-dots button[aria-current]>span{background:var(--accent);width:14px;border-radius:4px}.guide-go{display:block;margin:10px auto 0;padding:10px 4px;min-height:44px;border:0;background:none;color:var(--accent);font-size:11px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.help-intro{display:block}.help-flow{margin-top:22px}.appearance-options{grid-template-columns:1fr;gap:24px}.appearance-options fieldset+fieldset{border-top:1px solid var(--line);padding-top:20px}.public-tools{top:24px;right:24px}}
@media(max-width:760px){.public-tools{top:20px;right:20px}.top-right{gap:8px}.utility-button{min-height:44px}.topbar{min-height:58px;height:auto}.topbar .utility-button{width:40px;padding:10px}.topbar .utility-label,.topbar .theme-label{display:none}.insight-filters{flex-wrap:wrap;gap:14px}.insight-filters>.field{flex:1;min-width:130px}.insight-filters>p{margin:0;width:100%}.welcome-guide{grid-template-columns:1fr;gap:20px}.getting-started{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.help-topics{grid-template-columns:1fr}.chart-axis{width:56px;font-size:9px}.monthly-chart{gap:8px}.month-bars{gap:4px}.month-group{height:190px}.chart-total>strong{font-size:30px}.insight-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.insight-summary .metric-value{font-size:28px}.appearance-heading{flex-wrap:wrap}.appearance-privacy{line-height:1.8}.theme-option{padding:12px 9px}.theme-options{gap:10px}.public-tools .utility-button{min-height:40px}.insight-prompt{flex-wrap:wrap}.back-to-top{right:16px;bottom:16px}}
@media(max-width:480px){.topbar .mobile-export{display:none}.topbar .avatar{display:grid;width:30px;height:30px}.topbar{padding:0 18px}.top-right{gap:6px}.topbar>span{font-size:10px}.sidebar nav{gap:3px}.sidebar nav a{font-size:10px;padding:9px 8px;min-height:40px}.public-tools{top:18px;right:16px}.public-tools .utility-button{font-size:10px;padding:8px}.insight-summary{grid-template-columns:1fr;gap:18px}.insight-summary .metric,.insight-summary .metric:nth-child(3){padding:0;border:0}.spend-chart figcaption{align-items:flex-start;flex-direction:column;gap:14px}.chart-total{text-align:left}.chart-total>strong{font-size:30px}.spend-chart h2,.budget-chart h2{font-size:18px}.chart-axis{width:49px;font-size:9px}.chart-layout{gap:9px}.monthly-chart{gap:5px}.month-bars{gap:3px}.month-label{font-size:10px}.month-group{height:170px}.chart-bar{border-radius:3px 3px 0 0}.chart-legend{font-size:10px;gap:14px}.chart-source{font-size:10px}.budget-compare-heading{align-items:flex-start}.budget-compare-values{font-size:10px;gap:8px 15px}.welcome-guide{padding:20px}.welcome-copy h2{font-size:28px}.welcome-copy p{font-size:11px}.welcome-actions{gap:14px}.check-row{font-size:11px}.help-flow{gap:6px;font-size:9px;flex-wrap:wrap}.help-flow>span{padding:7px}.help-intro p{font-size:11px}.help-topic>summary{padding:18px;gap:12px;font-size:12px}.help-topic-body{padding:0 18px 18px}.help-topic-body ol,.help-topic-body>p:first-child{font-size:11px}.help-faq summary{font-size:11px}.help-faq p{font-size:11px}.preference-badge{font-size:9px}.theme-option>strong{font-size:11px}.theme-option>small{font-size:8px}.accent-options{gap:6px}.accent-option{font-size:10px;padding:10px 7px}.guide-illustration{padding:20px;gap:18px}.guide-number{font-size:60px}.guide-illustration strong{font-size:26px}.guide-intro{font-size:12px}.guide-dots button{width:30px;padding:10px 8px}.guide-steps{font-size:11px}.guide-steps li+li{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.vehicle:hover .model-photo,.btn:active:not(:disabled),.utility-button:active{transform:none}}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-motion=off] .vehicle:hover .model-photo,[data-motion=off] .btn:active:not(:disabled),[data-motion=off] .utility-button:active{transform:none}