@subvalue/cli 0.1.3 → 0.1.4

package/dist/public/app.css

@@ -1,73 +1,2292 @@
 /* Both the public page and local app use the same receipt renderer and tokens. */
-@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:block;src:url('/fonts/inter-latin.woff2') format('woff2')}
-@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400 700;font-display:block;src:url('/fonts/plex-mono.woff2') format('woff2')}
-.brand-name{display:inline-flex;align-items:center;position:relative;color:#eef2f4;font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.055em}.brand-name-accent{color:#37ec85}
-.brand-name-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
-.brand-wordmark{display:block;width:92px;height:14px;overflow:visible}
-@media(forced-colors:active){.brand-name,.brand-name-accent{color:CanvasText}}
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: block;
+  src: url('/fonts/inter-latin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Plex Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: block;
+  src: url('/fonts/plex-mono.woff2') format('woff2');
+}
+.brand-name {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  color: #eef2f4;
+  font-family: Inter, sans-serif;
+  font-weight: 800;
+  letter-spacing: -0.055em;
+}
+.brand-name-accent {
+  color: #37ec85;
+}
+.brand-name-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.brand-wordmark {
+  display: block;
+  width: 92px;
+  height: 14px;
+  overflow: visible;
+}
+@media (forced-colors: active) {
+  .brand-name,
+  .brand-name-accent {
+    color: CanvasText;
+  }
+}
 
-.chart{position:relative}.chart-tooltip{position:absolute;z-index:3;min-width:180px;max-width:calc(100% - 20px);padding:12px 14px;background:#191d22;border:1px solid #363e46;border-radius:5px;box-shadow:0 8px 22px #0006;pointer-events:none;font-size:11px}.chart-tooltip[hidden]{display:none}.chart-tooltip>strong{display:block;font-weight:550;margin-bottom:8px}.chart-tooltip dl{font-size:11px}.chart-tooltip dd{font-variant-numeric:tabular-nums}.chart-tip-total{border-top:1px solid #30363d;margin-top:5px;padding-top:8px!important}.chart-tip-total dd{color:#37ec85}.chart-svg [data-chart-day]{outline:none;cursor:pointer}.chart-svg [data-chart-day]:focus-visible .chart-hit-target,.chart-svg [data-chart-active] .chart-hit-target{stroke:#37ec85;stroke-opacity:.45;stroke-width:1;rx:2}.receipt-theme-control{display:flex;gap:3px;align-self:center;border:1px solid #2d343c;border-radius:5px;padding:3px;background:#111418}.receipt-theme-control button{background:none;border:0;color:#999fa6;border-radius:3px;min-width:68px;min-height:32px;padding:6px 12px;font-size:11px}.receipt-theme-control button[aria-pressed=true]{background:#262d33;color:#eff0f1}.receipt-theme-control button[data-receipt-theme=light][aria-pressed=true]{background:#eeece6;color:#22272d}
-:root{color-scheme:dark;--bg:#080a0c;--panel:#111418;--border:#25282d;--text:#eff0f1;--muted:#999fa6;--green:#37ec85;--red:#ed9987;--mono:"Plex Mono",Consolas,monospace;--sans:Inter,"Segoe UI",Arial,sans-serif}
-*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}svg{width:19px;height:19px;flex-shrink:0}h1,h2,h3,p{margin:0}h1{font-size:32px;letter-spacing:-1.3px;font-weight:550;line-height:1.3}h2{font-size:15px;font-weight:550;letter-spacing:-.15px}h3{font-size:16px}p{line-height:1.7;color:var(--muted)}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:650;letter-spacing:-.65px;white-space:nowrap}.brand-mark{color:var(--green);font-family:var(--mono);font-size:40px;line-height:.7;font-weight:400}.topbar{max-width:1392px;margin:auto;height:84px;padding:0 40px;display:flex;align-items:center;gap:64px;border-bottom:1px solid var(--border)}.local-tag{font:9px var(--mono);color:var(--muted);border:1px solid var(--border);padding:4px 5px;margin-left:2px;letter-spacing:1px}.topbar nav{display:flex;align-self:stretch;gap:30px}.nav-item{background:none;border:0;color:var(--muted);display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;font-size:13px;padding:0 3px}.nav-item svg{display:none}.nav-item.active{color:var(--text);border-bottom-color:var(--green)}.nav-item:hover{color:var(--text)}.local-status{margin-left:auto;display:flex;gap:8px;align-items:center;font:10px var(--mono);color:var(--muted);white-space:nowrap}.status-dot{width:5px;height:5px;background:var(--green);border-radius:50%}.app-main{max-width:1392px;margin:auto;padding:38px 40px 32px;min-height:calc(100vh - 150px)}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.eyebrow{font:9px var(--mono);letter-spacing:1.7px;color:var(--muted);display:block;margin-bottom:10px}.control-wrap{display:flex;align-items:center;gap:12px}.date-controls{display:flex;background:var(--panel);border:1px solid var(--border);padding:3px;border-radius:5px;gap:3px}.date-controls button{border:0;background:none;color:var(--muted);min-width:49px;min-height:32px;border-radius:3px;font-size:12px}.date-controls .selected{background:#2a342d;color:var(--text)}.custom-range{display:flex;gap:8px;align-items:end}.custom-range label{font-size:10px;color:var(--muted)}.custom-range input{display:block;padding:6px;width:125px;margin-top:4px}.coverage{margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:14px;font-size:11px;max-width:100%}.coverage summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--muted)}.coverage summary svg{width:13px;height:13px}.details-label{font-size:10px;margin-left:auto}.details-label:after{content:' +';font-family:var(--mono)}.coverage[open] .details-label:after{content:' −'}.coverage-content{padding:18px 0 0;max-width:760px}.coverage-content p{font-size:12px;margin:12px 0}.coverage-content code{overflow-wrap:anywhere}.issue-group{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:11px}.issue-group span{display:flex;gap:20px;max-width:470px;color:var(--muted)}.issue-group b{margin-left:auto}dl{margin:0;color:var(--muted);font-size:11px}dl div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}dd{margin:0;color:var(--text);text-align:right}.overview-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}.overview-main{min-width:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}.metrics.single{grid-template-columns:minmax(230px,1fr)}.metric{background:var(--panel);border:1px solid var(--border);border-radius:5px;min-height:133px;padding:18px 17px;display:flex;flex-direction:column;min-width:0}.metric.api-metric{border-top:2px solid #72eb9e;padding-top:17px}.label{font-size:11px;color:var(--muted);font-weight:400}.metric strong{font-size:clamp(22px,2.4vw,35px);font-weight:520;letter-spacing:-1.2px;margin-top:14px;white-space:nowrap;font-variant-numeric:tabular-nums}.metric strong:has(.multiply){letter-spacing:-1px}.metric-detail{font-size:9px;color:var(--muted);margin-top:auto;padding-top:12px;line-height:1.4}.metric.positive strong{color:var(--green)}.metric.negative strong{color:var(--red)}.multiply{font-weight:350;padding-left:3px;color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:5px}.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:22px}.provider-grid:has(>.provider-card:only-child){grid-template-columns:minmax(0,1fr)}.provider-card{padding:20px 23px}.provider-title{display:flex;align-items:center;gap:11px;margin-bottom:21px}.provider-logo{font-size:29px;line-height:1}.provider-logo.claude{color:#d2b49c}.badge{font:9px var(--mono);border:1px solid var(--border);border-radius:3px;padding:4px 6px;color:var(--muted);margin-left:4px}.badge.green{color:var(--green);border-color:#315440;background:#163020}.provider-values{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.provider-values>div{display:flex;flex-direction:column;gap:8px}.provider-values strong{font-size:19px;font-weight:450;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.provider-values small{font-size:10px;color:var(--muted)}.chart{padding:23px 24px 16px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.legend{display:flex;gap:13px;color:var(--muted);font-size:9px;flex-wrap:wrap}.legend span{display:flex;gap:6px;align-items:center}.legend i{height:5px;width:5px;border-radius:50%;background:var(--green)}.legend i.claude-dot{background:#8aadc2}.chart-svg{width:100%;display:block}.chart-dates{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted);padding:8px 0 0 40px}.chart-empty{height:190px;display:flex;align-items:center;justify-content:center;position:relative;font:12px var(--mono);color:var(--muted)}.empty-chart-lines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent,transparent 47px,#222c24 48px,transparent 49px);opacity:.6}.chart-empty>span:last-child{z-index:1;background:var(--panel);padding:8px 16px}.overview-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px;font-size:10px;color:var(--muted)}.overview-bottom>span{display:flex;gap:6px;align-items:center}.overview-bottom svg{width:13px;height:13px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);background:none;border:0;padding:8px 0;font-size:11px;min-height:44px}.text-button:hover{color:var(--text)}.text-button svg{width:13px;height:13px}.button{background:var(--green);color:#0b1b10;border:1px solid var(--green);border-radius:4px;display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:43px;padding:11px 20px;font-size:12px;font-weight:600}.button:hover{background:#91f7b4;border-color:#91f7b4}.button.small{min-height:32px;padding:7px 12px}.receipt-panel{padding:0 8px;display:flex;flex-direction:column;align-items:center;gap:15px;min-width:0}.receipt-kicker{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:3px}.receipt-kicker .label{font:8px var(--mono);letter-spacing:1px}.receipt-kicker svg{width:14px;height:14px;color:var(--muted)}.receipt-canvas{width:100%;max-width:440px;display:block;filter:drop-shadow(0 12px 16px #0005)}.export-button{width:100%;max-width:440px}.export-note{font:8px var(--mono);color:var(--muted)}.receipt-page-layout{display:grid;grid-template-columns:minmax(280px,440px) minmax(250px,440px);gap:88px;justify-content:center;margin-top:36px}.receipt-aside{padding-top:70px;display:flex;flex-direction:column;align-items:start;gap:14px}.receipt-aside .eyebrow{margin:0}.receipt-aside>strong{font-size:40px;letter-spacing:-1.5px;font-weight:500}.receipt-aside>span:not(.eyebrow){color:var(--muted);font-size:12px}.receipt-aside .coverage{width:100%;margin-top:12px}.privacy-note{font-size:11px;color:var(--muted)}.privacy-note summary{cursor:pointer}.privacy-note p{margin-top:10px;font-size:12px}.settings-layout{max-width:820px;margin-top:28px}.settings-section{padding:25px 27px;margin-bottom:15px}.settings-section h2{margin-bottom:23px;font-size:13px}.source-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--border)}.source-row>div{display:flex;flex-direction:column;gap:6px}.source-row strong{font-size:13px;font-weight:500}.source-state{font-size:10px;color:var(--muted)}.include-check{font-size:11px;display:flex;gap:8px;align-items:center;color:var(--muted)}input[type=checkbox]{accent-color:var(--green);width:15px;height:15px}.source-row details{grid-column:1/-1;width:100%;font-size:10px;color:var(--muted)}details summary{cursor:pointer}details summary::-webkit-details-marker{display:none}.source-row details dl{margin:12px 0}.billing-row{display:grid;grid-template-columns:120px 160px minmax(150px,1fr);gap:20px;align-items:center;margin-bottom:18px}.provider-setting-name{font-size:12px}input,select{border:1px solid #354139;background:#0d120f;color:var(--text);border-radius:4px;min-height:36px;padding:8px 10px;width:100%;outline:none}select{font-size:11px}.amount-field{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.amount-field input{min-width:0;width:95px;text-align:right;font-variant-numeric:tabular-nums}.amount-field>span:last-child{white-space:nowrap}.compact-details{font-size:10px;color:var(--muted);margin-top:18px}.compact-details p{margin-top:8px;font-size:11px}.setting-line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.setting-line strong{color:var(--text);font:12px var(--mono)}.privacy-tags{display:flex;flex-wrap:wrap;gap:25px;font-size:10px;color:var(--muted);margin-bottom:22px}.privacy-tags span{display:flex;gap:7px;align-items:center}.privacy-tags svg{color:var(--green);width:12px;height:12px}.settings-section>details{font-size:10px;color:var(--muted)}.settings-section>details p{font-size:11px;margin:10px 0}.settings-section code{font:10px var(--mono);line-height:1.8;overflow-wrap:anywhere}.form-actions{display:flex;justify-content:end;margin-top:22px}.app-footer{max-width:1312px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);color:#7e8f83;border-top:1px solid var(--border);padding-top:20px}.version{color:#647268;margin-left:4px}.demo-banner{background:#203128;color:var(--green);text-align:center;font:10px var(--mono);padding:8px;letter-spacing:.5px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{min-height:90vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.loading p{font-size:12px}.empty-panel{padding:28px;margin-top:20px}.empty-panel h2{font-size:14px}dialog{width:min(540px,calc(100vw - 32px));background:#141b16;border:1px solid #354c3d;border-radius:8px;color:var(--text);padding:34px;box-shadow:0 24px 120px #0009}dialog::backdrop{background:#050906cc;backdrop-filter:blur(3px)}dialog>.brand-mark{display:block;margin:0 0 30px}dialog h2{font-size:26px;letter-spacing:-.8px;margin:16px 0 30px}dialog .button{width:100%;margin-top:24px}.found-sources>div{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid var(--border)}.found-sources strong{font-weight:500;font-size:13px}.found-sources span{display:flex;gap:10px;font:11px var(--mono);color:var(--muted)}.found-sources svg{width:14px;height:14px;color:var(--green)}.onboarding-skip{display:flex;margin:10px auto 0}dialog .billing-row{grid-template-columns:1fr 1fr;gap:12px;margin-top:15px;margin-bottom:30px}dialog .provider-setting-name{display:none}dialog .billing-row select{grid-column:1/-1}dialog .amount-field{grid-column:1/-1;justify-content:end}dialog h3{font-size:14px;font-weight:450;margin-top:20px}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:#263b2d;border:1px solid #3d6248;color:var(--text);padding:12px 20px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;z-index:10;transition:opacity .15s,transform .15s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
-@media(min-width:1400px){.metric strong{font-size:34px}}
-@media(max-width:1100px){.topbar{padding:0 28px;gap:40px}.app-main{padding:30px 28px}.overview-layout{grid-template-columns:minmax(0,1fr) 265px;gap:20px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:116px}.metric strong{font-size:29px}.provider-grid{grid-template-columns:1fr}.app-footer{margin:0 28px 24px}.control-wrap{flex-direction:column;align-items:end}.receipt-page-layout{gap:45px}.receipt-aside>strong{font-size:32px}}
-@media(max-width:760px){.topbar{height:69px;padding:0 20px;gap:24px}.brand{font-size:19px}.local-tag{display:none}.topbar nav{gap:17px}.nav-item{font-size:11px}.local-status{display:none}.app-main{padding:28px 20px}.page-heading{align-items:start;flex-wrap:wrap;gap:17px}.page-heading h1{font-size:28px}.eyebrow{font-size:8px}.overview-layout{grid-template-columns:1fr}.overview-layout .receipt-panel{max-width:390px;width:100%;justify-self:center;margin-top:17px;padding:0 16px}.metrics{gap:10px;margin-bottom:16px}.metric{padding:17px;min-height:126px}.metric strong{font-size:31px}.provider-grid{margin-bottom:16px}.chart{padding:19px 18px}.panel-title{margin-bottom:20px}.panel-title h2{font-size:12px}.legend{gap:9px;font-size:8px}.chart-empty{height:158px}.overview-bottom{font-size:8px}.overview-bottom .text-button{font-size:10px}.receipt-page-layout{grid-template-columns:1fr;gap:24px;margin-top:24px}.receipt-page-layout>.receipt-panel{max-width:390px;justify-self:center;width:100%}.receipt-aside{padding:12px 0 0;max-width:420px;margin:auto;width:100%}.receipt-aside>strong{font-size:28px}.app-footer{margin:0 20px 84px;font-size:8px}.settings-section{padding:22px 19px}.billing-row{grid-template-columns:1fr 155px;gap:12px}.amount-field{grid-column:2}.provider-setting-name{align-self:center}.privacy-tags{gap:15px}.custom-range{flex-wrap:wrap;justify-content:end}.custom-range input{width:117px}.date-controls button{min-width:47px;min-height:36px}.control-wrap{align-items:start}.coverage{font-size:10px;margin-bottom:19px}.topbar nav{position:fixed;bottom:0;left:0;right:0;height:64px;z-index:8;background:#101712;border-top:1px solid var(--border);justify-content:space-around;gap:0}.nav-item{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:1;border-bottom:0;border-top:2px solid transparent;font-size:10px}.nav-item.active{border-top-color:var(--green);color:var(--green)}.nav-item svg{display:block;width:18px;height:18px}.metric-detail{font-size:9px}.include-check{font-size:10px}.source-row details{font-size:10px}dialog{padding:28px}#toast{bottom:78px}.empty-panel{padding:22px}}
-@media(max-width:360px){.app-main{padding:24px 16px}.metric{padding:15px 13px}.metric strong{font-size:27px}.metrics{gap:8px}.date-controls button{min-width:46px}.provider-card{padding:19px}.receipt-panel{padding:0!important}.overview-bottom>span{font-size:7px}}
-@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
+.chart {
+  position: relative;
+}
+.chart-tooltip {
+  position: absolute;
+  z-index: 3;
+  min-width: 180px;
+  max-width: calc(100% - 20px);
+  padding: 12px 14px;
+  background: #191d22;
+  border: 1px solid #363e46;
+  border-radius: 5px;
+  box-shadow: 0 8px 22px #0006;
+  pointer-events: none;
+  font-size: 11px;
+}
+.chart-tooltip[hidden] {
+  display: none;
+}
+.chart-tooltip > strong {
+  display: block;
+  font-weight: 550;
+  margin-bottom: 8px;
+}
+.chart-tooltip dl {
+  font-size: 11px;
+}
+.chart-tooltip dd {
+  font-variant-numeric: tabular-nums;
+}
+.chart-tip-total {
+  border-top: 1px solid #30363d;
+  margin-top: 5px;
+  padding-top: 8px !important;
+}
+.chart-tip-total dd {
+  color: #37ec85;
+}
+.chart-svg [data-chart-day] {
+  outline: none;
+  cursor: pointer;
+}
+.chart-svg [data-chart-day]:focus-visible .chart-hit-target,
+.chart-svg [data-chart-active] .chart-hit-target {
+  stroke: #37ec85;
+  stroke-opacity: 0.45;
+  stroke-width: 1;
+  rx: 2;
+}
+.receipt-theme-control {
+  display: flex;
+  gap: 3px;
+  align-self: center;
+  border: 1px solid #2d343c;
+  border-radius: 5px;
+  padding: 3px;
+  background: #111418;
+}
+.receipt-theme-control button {
+  background: none;
+  border: 0;
+  color: #999fa6;
+  border-radius: 3px;
+  min-width: 68px;
+  min-height: 32px;
+  padding: 6px 12px;
+  font-size: 11px;
+}
+.receipt-theme-control button[aria-pressed='true'] {
+  background: #262d33;
+  color: #eff0f1;
+}
+.receipt-theme-control button[data-receipt-theme='light'][aria-pressed='true'] {
+  background: #eeece6;
+  color: #22272d;
+}
+:root {
+  color-scheme: dark;
+  --bg: #080a0c;
+  --panel: #111418;
+  --border: #25282d;
+  --text: #eff0f1;
+  --muted: #999fa6;
+  --green: #37ec85;
+  --red: #ed9987;
+  --mono: 'Plex Mono', Consolas, monospace;
+  --sans: Inter, 'Segoe UI', Arial, sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+button,
+input,
+select {
+  font: inherit;
+}
+button,
+a,
+input,
+select,
+summary {
+  -webkit-tap-highlight-color: transparent;
+}
+button {
+  cursor: pointer;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--green);
+  outline-offset: 4px;
+}
+svg {
+  width: 19px;
+  height: 19px;
+  flex-shrink: 0;
+}
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 32px;
+  letter-spacing: -1.3px;
+  font-weight: 550;
+  line-height: 1.3;
+}
+h2 {
+  font-size: 15px;
+  font-weight: 550;
+  letter-spacing: -0.15px;
+}
+h3 {
+  font-size: 16px;
+}
+p {
+  line-height: 1.7;
+  color: var(--muted);
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  font-size: 21px;
+  font-weight: 650;
+  letter-spacing: -0.65px;
+  white-space: nowrap;
+}
+.brand-mark {
+  color: var(--green);
+  font-family: var(--mono);
+  font-size: 40px;
+  line-height: 0.7;
+  font-weight: 400;
+}
+.topbar {
+  max-width: 1392px;
+  margin: auto;
+  height: 84px;
+  padding: 0 40px;
+  display: flex;
+  align-items: center;
+  gap: 64px;
+  border-bottom: 1px solid var(--border);
+}
+.local-tag {
+  font: 9px var(--mono);
+  color: var(--muted);
+  border: 1px solid var(--border);
+  padding: 4px 5px;
+  margin-left: 2px;
+  letter-spacing: 1px;
+}
+.topbar nav {
+  display: flex;
+  align-self: stretch;
+  gap: 30px;
+}
+.nav-item {
+  background: none;
+  border: 0;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 2px solid transparent;
+  font-size: 13px;
+  padding: 0 3px;
+}
+.nav-item svg {
+  display: none;
+}
+.nav-item.active {
+  color: var(--text);
+  border-bottom-color: var(--green);
+}
+.nav-item:hover {
+  color: var(--text);
+}
+.local-status {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font: 10px var(--mono);
+  color: var(--muted);
+  white-space: nowrap;
+}
+.status-dot {
+  width: 5px;
+  height: 5px;
+  background: var(--green);
+  border-radius: 50%;
+}
+.app-main {
+  max-width: 1392px;
+  margin: auto;
+  padding: 38px 40px 32px;
+  min-height: calc(100vh - 150px);
+}
+.page-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 22px;
+}
+.eyebrow {
+  font: 9px var(--mono);
+  letter-spacing: 1.7px;
+  color: var(--muted);
+  display: block;
+  margin-bottom: 10px;
+}
+.control-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.date-controls {
+  display: flex;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 3px;
+  border-radius: 5px;
+  gap: 3px;
+}
+.date-controls button {
+  border: 0;
+  background: none;
+  color: var(--muted);
+  min-width: 49px;
+  min-height: 32px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+.date-controls .selected {
+  background: #2a342d;
+  color: var(--text);
+}
+.custom-range {
+  display: flex;
+  gap: 8px;
+  align-items: end;
+}
+.custom-range label {
+  font-size: 10px;
+  color: var(--muted);
+}
+.custom-range input {
+  display: block;
+  padding: 6px;
+  width: 125px;
+  margin-top: 4px;
+}
+.coverage {
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 14px;
+  font-size: 11px;
+  max-width: 100%;
+}
+.coverage summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  list-style: none;
+  color: var(--muted);
+}
+.coverage summary svg {
+  width: 13px;
+  height: 13px;
+}
+.details-label {
+  font-size: 10px;
+  margin-left: auto;
+}
+.details-label:after {
+  content: ' +';
+  font-family: var(--mono);
+}
+.coverage[open] .details-label:after {
+  content: ' −';
+}
+.coverage-content {
+  padding: 18px 0 0;
+  max-width: 760px;
+}
+.coverage-content p {
+  font-size: 12px;
+  margin: 12px 0;
+}
+.coverage-content code {
+  overflow-wrap: anywhere;
+}
+.issue-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 10px 0;
+  font-size: 11px;
+}
+.issue-group span {
+  display: flex;
+  gap: 20px;
+  max-width: 470px;
+  color: var(--muted);
+}
+.issue-group b {
+  margin-left: auto;
+}
+dl {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 5px 0;
+}
+dd {
+  margin: 0;
+  color: var(--text);
+  text-align: right;
+}
+.overview-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 310px;
+  gap: 26px;
+  align-items: start;
+}
+.overview-main {
+  min-width: 0;
+}
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 22px;
+}
+.metrics.single {
+  grid-template-columns: minmax(230px, 1fr);
+}
+.metric {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  min-height: 133px;
+  padding: 18px 17px;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.metric.api-metric {
+  border-top: 2px solid #72eb9e;
+  padding-top: 17px;
+}
+.label {
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 400;
+}
+.metric strong {
+  font-size: clamp(22px, 2.4vw, 35px);
+  font-weight: 520;
+  letter-spacing: -1.2px;
+  margin-top: 14px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.metric strong:has(.multiply) {
+  letter-spacing: -1px;
+}
+.metric-detail {
+  font-size: 9px;
+  color: var(--muted);
+  margin-top: auto;
+  padding-top: 12px;
+  line-height: 1.4;
+}
+.metric.positive strong {
+  color: var(--green);
+}
+.metric.negative strong {
+  color: var(--red);
+}
+.multiply {
+  font-weight: 350;
+  padding-left: 3px;
+  color: var(--muted);
+}
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+}
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 22px;
+}
+.provider-grid:has(> .provider-card:only-child) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.provider-card {
+  padding: 20px 23px;
+}
+.provider-title {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  margin-bottom: 21px;
+}
+.provider-logo {
+  font-size: 29px;
+  line-height: 1;
+}
+.provider-logo.claude {
+  color: #d2b49c;
+}
+.badge {
+  font: 9px var(--mono);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 4px 6px;
+  color: var(--muted);
+  margin-left: 4px;
+}
+.badge.green {
+  color: var(--green);
+  border-color: #315440;
+  background: #163020;
+}
+.provider-values {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 20px;
+}
+.provider-values > div {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.provider-values strong {
+  font-size: 19px;
+  font-weight: 450;
+  letter-spacing: -0.5px;
+  font-variant-numeric: tabular-nums;
+}
+.provider-values small {
+  font-size: 10px;
+  color: var(--muted);
+}
+.chart {
+  padding: 23px 24px 16px;
+}
+.panel-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.legend {
+  display: flex;
+  gap: 13px;
+  color: var(--muted);
+  font-size: 9px;
+  flex-wrap: wrap;
+}
+.legend span {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.legend i {
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  background: var(--green);
+}
+.legend i.claude-dot {
+  background: #8aadc2;
+}
+.chart-svg {
+  width: 100%;
+  display: block;
+}
+.chart-dates {
+  display: flex;
+  justify-content: space-between;
+  font: 9px var(--mono);
+  color: var(--muted);
+  padding: 8px 0 0 40px;
+}
+.chart-empty {
+  height: 190px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font: 12px var(--mono);
+  color: var(--muted);
+}
+.empty-chart-lines {
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent,
+    transparent 47px,
+    #222c24 48px,
+    transparent 49px
+  );
+  opacity: 0.6;
+}
+.chart-empty > span:last-child {
+  z-index: 1;
+  background: var(--panel);
+  padding: 8px 16px;
+}
+.overview-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 18px;
+  gap: 10px;
+  font-size: 10px;
+  color: var(--muted);
+}
+.overview-bottom > span {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.overview-bottom svg {
+  width: 13px;
+  height: 13px;
+}
+.text-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: var(--muted);
+  background: none;
+  border: 0;
+  padding: 8px 0;
+  font-size: 11px;
+  min-height: 44px;
+}
+.text-button:hover {
+  color: var(--text);
+}
+.text-button svg {
+  width: 13px;
+  height: 13px;
+}
+.button {
+  background: var(--green);
+  color: #0b1b10;
+  border: 1px solid var(--green);
+  border-radius: 4px;
+  display: inline-flex;
+  gap: 9px;
+  align-items: center;
+  justify-content: center;
+  min-height: 43px;
+  padding: 11px 20px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.button:hover {
+  background: #91f7b4;
+  border-color: #91f7b4;
+}
+.button.small {
+  min-height: 32px;
+  padding: 7px 12px;
+}
+.receipt-panel {
+  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  min-width: 0;
+}
+.receipt-kicker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 3px;
+}
+.receipt-kicker .label {
+  font: 8px var(--mono);
+  letter-spacing: 1px;
+}
+.receipt-kicker svg {
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+}
+.receipt-canvas {
+  width: 100%;
+  max-width: 440px;
+  display: block;
+  filter: drop-shadow(0 12px 16px #0005);
+}
+.export-button {
+  width: 100%;
+  max-width: 440px;
+}
+.export-note {
+  font: 8px var(--mono);
+  color: var(--muted);
+}
+.receipt-page-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 440px) minmax(250px, 440px);
+  gap: 88px;
+  justify-content: center;
+  margin-top: 36px;
+}
+.receipt-aside {
+  padding-top: 70px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 14px;
+}
+.receipt-aside .eyebrow {
+  margin: 0;
+}
+.receipt-aside > strong {
+  font-size: 40px;
+  letter-spacing: -1.5px;
+  font-weight: 500;
+}
+.receipt-aside > span:not(.eyebrow) {
+  color: var(--muted);
+  font-size: 12px;
+}
+.receipt-aside .coverage {
+  width: 100%;
+  margin-top: 12px;
+}
+.privacy-note {
+  font-size: 11px;
+  color: var(--muted);
+}
+.privacy-note summary {
+  cursor: pointer;
+}
+.privacy-note p {
+  margin-top: 10px;
+  font-size: 12px;
+}
+.settings-layout {
+  max-width: 820px;
+  margin-top: 28px;
+}
+.settings-section {
+  padding: 25px 27px;
+  margin-bottom: 15px;
+}
+.settings-section h2 {
+  margin-bottom: 23px;
+  font-size: 13px;
+}
+.source-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+  border-top: 1px solid var(--border);
+}
+.source-row > div {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.source-row strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+.source-state {
+  font-size: 10px;
+  color: var(--muted);
+}
+.include-check {
+  font-size: 11px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--muted);
+}
+input[type='checkbox'] {
+  accent-color: var(--green);
+  width: 15px;
+  height: 15px;
+}
+.source-row details {
+  grid-column: 1/-1;
+  width: 100%;
+  font-size: 10px;
+  color: var(--muted);
+}
+details summary {
+  cursor: pointer;
+}
+details summary::-webkit-details-marker {
+  display: none;
+}
+.source-row details dl {
+  margin: 12px 0;
+}
+.billing-row {
+  display: grid;
+  grid-template-columns: 120px 160px minmax(150px, 1fr);
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 18px;
+}
+.provider-setting-name {
+  font-size: 12px;
+}
+input,
+select {
+  border: 1px solid #354139;
+  background: #0d120f;
+  color: var(--text);
+  border-radius: 4px;
+  min-height: 36px;
+  padding: 8px 10px;
+  width: 100%;
+  outline: none;
+}
+select {
+  font-size: 11px;
+}
+.amount-field {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 10px;
+}
+.amount-field input {
+  min-width: 0;
+  width: 95px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.amount-field > span:last-child {
+  white-space: nowrap;
+}
+.compact-details {
+  font-size: 10px;
+  color: var(--muted);
+  margin-top: 18px;
+}
+.compact-details p {
+  margin-top: 8px;
+  font-size: 11px;
+}
+.setting-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.setting-line strong {
+  color: var(--text);
+  font: 12px var(--mono);
+}
+.privacy-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+  font-size: 10px;
+  color: var(--muted);
+  margin-bottom: 22px;
+}
+.privacy-tags span {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+}
+.privacy-tags svg {
+  color: var(--green);
+  width: 12px;
+  height: 12px;
+}
+.settings-section > details {
+  font-size: 10px;
+  color: var(--muted);
+}
+.settings-section > details p {
+  font-size: 11px;
+  margin: 10px 0;
+}
+.settings-section code {
+  font: 10px var(--mono);
+  line-height: 1.8;
+  overflow-wrap: anywhere;
+}
+.form-actions {
+  display: flex;
+  justify-content: end;
+  margin-top: 22px;
+}
+.app-footer {
+  max-width: 1312px;
+  margin: 0 auto 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font: 9px var(--mono);
+  color: #7e8f83;
+  border-top: 1px solid var(--border);
+  padding-top: 20px;
+}
+.version {
+  color: #647268;
+  margin-left: 4px;
+}
+.demo-banner {
+  background: #203128;
+  color: var(--green);
+  text-align: center;
+  font: 10px var(--mono);
+  padding: 8px;
+  letter-spacing: 0.5px;
+}
+.hidden {
+  display: none !important;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.loading {
+  min-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+}
+.loading p {
+  font-size: 12px;
+}
+.empty-panel {
+  padding: 28px;
+  margin-top: 20px;
+}
+.empty-panel h2 {
+  font-size: 14px;
+}
+dialog {
+  width: min(540px, calc(100vw - 32px));
+  background: #141b16;
+  border: 1px solid #354c3d;
+  border-radius: 8px;
+  color: var(--text);
+  padding: 34px;
+  box-shadow: 0 24px 120px #0009;
+}
+dialog::backdrop {
+  background: #050906cc;
+  backdrop-filter: blur(3px);
+}
+dialog > .brand-mark {
+  display: block;
+  margin: 0 0 30px;
+}
+dialog h2 {
+  font-size: 26px;
+  letter-spacing: -0.8px;
+  margin: 16px 0 30px;
+}
+dialog .button {
+  width: 100%;
+  margin-top: 24px;
+}
+.found-sources > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 0;
+  border-top: 1px solid var(--border);
+}
+.found-sources strong {
+  font-weight: 500;
+  font-size: 13px;
+}
+.found-sources span {
+  display: flex;
+  gap: 10px;
+  font: 11px var(--mono);
+  color: var(--muted);
+}
+.found-sources svg {
+  width: 14px;
+  height: 14px;
+  color: var(--green);
+}
+.onboarding-skip {
+  display: flex;
+  margin: 10px auto 0;
+}
+dialog .billing-row {
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 15px;
+  margin-bottom: 30px;
+}
+dialog .provider-setting-name {
+  display: none;
+}
+dialog .billing-row select {
+  grid-column: 1/-1;
+}
+dialog .amount-field {
+  grid-column: 1/-1;
+  justify-content: end;
+}
+dialog h3 {
+  font-size: 14px;
+  font-weight: 450;
+  margin-top: 20px;
+}
+#toast {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translate(-50%, 15px);
+  background: #263b2d;
+  border: 1px solid #3d6248;
+  color: var(--text);
+  padding: 12px 20px;
+  border-radius: 5px;
+  font-size: 12px;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10;
+  transition:
+    opacity 0.15s,
+    transform 0.15s;
+  white-space: nowrap;
+}
+#toast.show {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+@media (min-width: 1400px) {
+  .metric strong {
+    font-size: 34px;
+  }
+}
+@media (max-width: 1100px) {
+  .topbar {
+    padding: 0 28px;
+    gap: 40px;
+  }
+  .app-main {
+    padding: 30px 28px;
+  }
+  .overview-layout {
+    grid-template-columns: minmax(0, 1fr) 265px;
+    gap: 20px;
+  }
+  .metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .metric {
+    min-height: 116px;
+  }
+  .metric strong {
+    font-size: 29px;
+  }
+  .provider-grid {
+    grid-template-columns: 1fr;
+  }
+  .app-footer {
+    margin: 0 28px 24px;
+  }
+  .control-wrap {
+    flex-direction: column;
+    align-items: end;
+  }
+  .receipt-page-layout {
+    gap: 45px;
+  }
+  .receipt-aside > strong {
+    font-size: 32px;
+  }
+}
+@media (max-width: 760px) {
+  .topbar {
+    height: 69px;
+    padding: 0 20px;
+    gap: 24px;
+  }
+  .brand {
+    font-size: 19px;
+  }
+  .local-tag {
+    display: none;
+  }
+  .topbar nav {
+    gap: 17px;
+  }
+  .nav-item {
+    font-size: 11px;
+  }
+  .local-status {
+    display: none;
+  }
+  .app-main {
+    padding: 28px 20px;
+  }
+  .page-heading {
+    align-items: start;
+    flex-wrap: wrap;
+    gap: 17px;
+  }
+  .page-heading h1 {
+    font-size: 28px;
+  }
+  .eyebrow {
+    font-size: 8px;
+  }
+  .overview-layout {
+    grid-template-columns: 1fr;
+  }
+  .overview-layout .receipt-panel {
+    max-width: 390px;
+    width: 100%;
+    justify-self: center;
+    margin-top: 17px;
+    padding: 0 16px;
+  }
+  .metrics {
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+  .metric {
+    padding: 17px;
+    min-height: 126px;
+  }
+  .metric strong {
+    font-size: 31px;
+  }
+  .provider-grid {
+    margin-bottom: 16px;
+  }
+  .chart {
+    padding: 19px 18px;
+  }
+  .panel-title {
+    margin-bottom: 20px;
+  }
+  .panel-title h2 {
+    font-size: 12px;
+  }
+  .legend {
+    gap: 9px;
+    font-size: 8px;
+  }
+  .chart-empty {
+    height: 158px;
+  }
+  .overview-bottom {
+    font-size: 8px;
+  }
+  .overview-bottom .text-button {
+    font-size: 10px;
+  }
+  .receipt-page-layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+    margin-top: 24px;
+  }
+  .receipt-page-layout > .receipt-panel {
+    max-width: 390px;
+    justify-self: center;
+    width: 100%;
+  }
+  .receipt-aside {
+    padding: 12px 0 0;
+    max-width: 420px;
+    margin: auto;
+    width: 100%;
+  }
+  .receipt-aside > strong {
+    font-size: 28px;
+  }
+  .app-footer {
+    margin: 0 20px 84px;
+    font-size: 8px;
+  }
+  .settings-section {
+    padding: 22px 19px;
+  }
+  .billing-row {
+    grid-template-columns: 1fr 155px;
+    gap: 12px;
+  }
+  .amount-field {
+    grid-column: 2;
+  }
+  .provider-setting-name {
+    align-self: center;
+  }
+  .privacy-tags {
+    gap: 15px;
+  }
+  .custom-range {
+    flex-wrap: wrap;
+    justify-content: end;
+  }
+  .custom-range input {
+    width: 117px;
+  }
+  .date-controls button {
+    min-width: 47px;
+    min-height: 36px;
+  }
+  .control-wrap {
+    align-items: start;
+  }
+  .coverage {
+    font-size: 10px;
+    margin-bottom: 19px;
+  }
+  .topbar nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    z-index: 8;
+    background: #101712;
+    border-top: 1px solid var(--border);
+    justify-content: space-around;
+    gap: 0;
+  }
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    flex: 1;
+    border-bottom: 0;
+    border-top: 2px solid transparent;
+    font-size: 10px;
+  }
+  .nav-item.active {
+    border-top-color: var(--green);
+    color: var(--green);
+  }
+  .nav-item svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+  }
+  .metric-detail {
+    font-size: 9px;
+  }
+  .include-check {
+    font-size: 10px;
+  }
+  .source-row details {
+    font-size: 10px;
+  }
+  dialog {
+    padding: 28px;
+  }
+  #toast {
+    bottom: 78px;
+  }
+  .empty-panel {
+    padding: 22px;
+  }
+}
+@media (max-width: 360px) {
+  .app-main {
+    padding: 24px 16px;
+  }
+  .metric {
+    padding: 15px 13px;
+  }
+  .metric strong {
+    font-size: 27px;
+  }
+  .metrics {
+    gap: 8px;
+  }
+  .date-controls button {
+    min-width: 46px;
+  }
+  .provider-card {
+    padding: 19px;
+  }
+  .receipt-panel {
+    padding: 0 !important;
+  }
+  .overview-bottom > span {
+    font-size: 7px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
 
-.chart-svg{height:auto}
+.chart-svg {
+  height: auto;
+}
 
 /* A compact graphite workspace, matching the original SubValue reference. */
-body{background:#080b0d;background-image:none}
-.app-shell{max-width:1220px;margin:36px auto;background:#0b0d10;border:1px solid #2b343a;border-radius:12px;box-shadow:0 28px 85px #0008,0 1px 0 #ffffff08 inset;overflow:hidden}
-.topbar{height:70px;padding:0 25px;gap:38px;background:#090b0d;border-bottom-color:#222a2f}
-.brand{font-size:20px;gap:9px;letter-spacing:-.6px}.brand-mark{font-size:34px}.topbar nav{gap:25px}.nav-item{font-size:12px;padding:0 2px}
-.header-period{margin-left:auto;display:flex;align-items:center;gap:12px}.local-status{margin-left:0;color:var(--green)}.local-status svg{width:17px}
-.period-picker{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 32px));padding:20px;background:#14171b;color:var(--text);border:1px solid #32383e;border-radius:6px;box-shadow:0 16px 48px #0008;z-index:9}.period-picker::backdrop{background:transparent}.period-picker form{display:grid;gap:16px}.period-picker [hidden]{display:none}.period-picker label{display:grid;gap:8px;font-size:12px;color:var(--muted)}.period-picker input{min-height:44px;background:#0e1115;border-color:#353c43;color-scheme:dark}.period-picker .button{min-height:44px;width:100%}.period-date-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.period-date-fields input{min-width:0;width:100%}
-.date-controls{background:#101519;border-color:#252e33;padding:2px}.date-controls button{min-height:34px;min-width:45px;font-size:11px}.date-controls .selected{background:#252a2e;color:#eff0f1}
-.period-selection{display:flex;align-items:center;gap:6px;min-width:0}.period-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;min-height:38px;padding:0;border:1px solid #252e33;border-radius:4px;background:#101519;color:var(--muted);flex-shrink:0}.period-arrow:hover:not(:disabled){color:var(--green);border-color:#3c5145}.period-arrow svg{width:16px;height:16px}.period-arrow:disabled{cursor:default}@media(max-width:760px){.period-selection{width:100%;gap:5px}.period-selection .date-controls{flex:1;min-width:0}.period-selection .date-controls button{min-width:0;padding:0 5px}.period-arrow{width:44px;min-height:46px}}
-.app-main{padding:23px 25px 25px;min-height:0}.page-heading{margin-bottom:13px}.page-heading h1{font-size:19px;letter-spacing:-.4px;font-weight:550}
-.coverage{border:0;padding-bottom:0;margin-bottom:20px;font-size:10px}.coverage summary{gap:7px}.coverage-content{border:1px solid var(--border);background:#101619;border-radius:5px;padding:18px;margin-top:12px;max-width:100%}
-.overview-layout{grid-template-columns:minmax(0,1fr) 320px;gap:22px}.metrics{gap:12px;margin-bottom:16px}.metrics.single{grid-template-columns:minmax(0,1fr)}
-.metric{min-height:116px;padding:16px 14px;background:linear-gradient(120deg,#14171b,#101317);border-color:#25282d;box-shadow:0 1px 0 #ffffff03 inset;border-radius:6px}
-.metric.api-metric{border-top:1px solid #353b40;padding-top:16px}.metric .label{display:flex;gap:7px;align-items:center;font-size:10px;white-space:nowrap;color:#b7c0c7}.metric .label svg{width:16px;height:16px;color:#a3afb7}.metric.positive .label svg,.metric:has(.multiply) .label svg{color:var(--green)}
-.metric strong{font-size:28px;font-weight:550;letter-spacing:-.9px;margin-top:17px;line-height:1.1}.metric-detail{padding-top:11px;font-size:9px;line-height:1.5}.metric strong{white-space:normal;overflow-wrap:anywhere}.multiply{color:inherit;padding-left:1px}
-.panel{border-radius:6px;border-color:#25282d;background:#111418;box-shadow:0 1px 0 #ffffff03 inset}.provider-grid{gap:12px;margin-bottom:16px}.provider-card{padding:20px}.provider-title{gap:10px;margin-bottom:18px}.provider-logo{font-size:31px;color:#e7ebed}.provider-title h2{font-size:14px}.badge{font:8px var(--sans);border-radius:20px;padding:4px 8px}.badge.green{background:#153e29;color:#65f3a2;border-color:#224b34}.provider-values{padding-left:41px;gap:15px}.provider-values .label{font-size:10px}.provider-values strong{font-size:19px;font-weight:500}.provider-values small{font-size:9px}
-.chart{padding:20px 20px 16px}.panel-title{margin-bottom:20px}.panel-title h2{font-size:12px}.legend{font-size:9px;gap:13px}.chart-svg{min-height:170px}.legend i{background:var(--green)}.chart-dates{font:9px var(--sans);padding-top:3px}.empty-chart-lines{background:repeating-linear-gradient(to bottom,transparent,transparent 47px,#242c32 48px,transparent 49px)}
-.overview-bottom{margin-top:12px;font-size:9px}.overview-bottom>span{gap:5px}.overview-bottom .text-button{font-size:10px}.receipt-panel{padding:0;gap:14px}.receipt-canvas{filter:drop-shadow(0 10px 14px #0008)}
-.button{background:var(--green);border-color:var(--green);color:#092214;border-radius:5px;min-height:44px;font-size:12px;font-weight:650;box-shadow:0 1px 0 #a1ffc955 inset}.button:hover{background:#5df39d;border-color:#5df39d}.export-button svg{width:16px;height:16px}
-.app-footer{margin:0 25px 18px;border-top:1px solid #20282d;padding-top:14px;font-size:8px;color:#89979f}.app-footer .version{color:#76838b}
-.receipt-page-layout{gap:64px;margin-top:24px;grid-template-columns:minmax(280px,380px) minmax(250px,380px)}.receipt-aside{padding-top:45px}.receipt-aside>strong{font-size:34px}.receipt-aside .coverage{margin-top:12px}
-.settings-layout{max-width:760px;margin-top:20px}.settings-section{background:#11171b;padding:24px}.settings-section h2{font-size:13px;margin-bottom:18px}input,select{background:#0c1115;border-color:#303b43;min-height:40px}.amount-field input{width:110px}.privacy-tags{margin-bottom:18px}
-dialog{background:#131a1e;border-color:#34453c}dialog::backdrop{background:#030607d9;backdrop-filter:blur(4px)}.demo-banner{background:#171d1a;color:#88c5a0;font-size:9px}.model-coverage{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}.model-coverage code{overflow-wrap:anywhere;color:var(--text)}.model-coverage a{grid-column:1/-1;color:var(--green)}
-@media(min-width:1400px){.metric strong{font-size:28px}}
-@media(max-width:1270px){.app-shell{margin:24px}.topbar{gap:28px}.overview-layout{grid-template-columns:minmax(0,1fr) 255px;gap:18px}.metric strong{font-size:25px}}
-@media(min-width:1001px) and (max-width:1100px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:15px 10px}.metric .label{font-size:9px;gap:5px}.metric .label svg{width:13px}.metric strong{font-size:22px}.provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.provider-card{padding:17px}.provider-title{flex-wrap:wrap}.provider-values{padding-left:0}}
-@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{gap:25px}.topbar nav{gap:18px}.overview-layout{grid-template-columns:minmax(0,1fr) 245px}.metric strong{font-size:29px}.provider-grid{grid-template-columns:1fr}.header-period{gap:8px}.local-status{display:none}}
-@media(max-width:760px){body{background:#090d10;background-image:none}.app-shell{margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:none}.topbar{height:auto;min-height:120px;padding:18px 18px 13px;gap:14px;flex-wrap:wrap;background:#090b0d}.brand{font-size:20px}.header-period{flex-basis:100%;margin-left:0;flex-wrap:wrap}.date-controls{width:100%;padding:3px}.date-controls button{flex:1;min-height:39px;font-size:12px}.custom-range{width:100%;justify-content:start}.custom-range label{flex:1}.custom-range input{width:100%}.custom-range .button{min-height:39px}.app-main{padding:22px 18px 28px}.page-heading h1{font-size:19px}.page-heading{margin-bottom:12px}.coverage{margin-bottom:17px;font-size:10px}.overview-layout{grid-template-columns:1fr;gap:20px}.metrics{gap:10px;margin-bottom:14px}.metric{min-height:127px;padding:17px 15px}.metric.api-metric{padding-top:17px}.metric .label{font-size:10px}.metric strong{font-size:30px}.metric-detail{font-size:9px}.provider-grid{margin-bottom:14px}.provider-card{padding:19px}.provider-values{padding-left:42px}.provider-values strong{font-size:19px}.chart{padding:19px 16px 14px}.panel-title{gap:10px;margin-bottom:15px}.panel-title h2{font-size:11px}.legend{font-size:8px;gap:8px}.chart-svg{min-height:145px}.chart-dates{font-size:9px}.overview-bottom{font-size:8px}.overview-layout .receipt-panel{padding:0;max-width:360px;width:100%;margin-top:6px}.receipt-page-layout{grid-template-columns:1fr;gap:25px}.receipt-page-layout>.receipt-panel{max-width:360px}.receipt-aside{padding-top:0}.topbar nav{background:#0d1418;height:calc(65px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top-color:#2a343a}.nav-item{min-height:62px;font-size:10px}.nav-item.active{color:var(--green);border-top-color:var(--green)}.nav-item svg{width:19px;height:19px}.app-footer{margin:0 18px calc(88px + env(safe-area-inset-bottom));padding-top:15px}.settings-section{padding:22px 18px}.billing-row{grid-template-columns:1fr 155px;gap:12px}.amount-field{grid-column:2}.privacy-tags{gap:16px}.model-coverage{grid-template-columns:1fr 1fr}.model-coverage code{grid-column:1/-1}#toast{bottom:calc(80px + env(safe-area-inset-bottom))}.export-button{min-height:46px}}
-@media(max-width:360px){.topbar{padding-left:15px;padding-right:15px}.app-main{padding-left:15px;padding-right:15px}.metric{padding:15px 12px}.metric.api-metric{padding-top:15px}.metric .label{font-size:9px;gap:5px}.metric strong{font-size:27px}.metric .label svg{width:14px}.provider-title h2{font-size:13px}.provider-card{padding:17px}.provider-values{padding-left:0}.billing-row{grid-template-columns:1fr 142px}.privacy-tags{gap:12px}.receipt-panel{padding:0}}
-.provider-logo svg{width:29px;height:29px}.metric:has(.multiply) .label svg{stroke-width:2.3}
-@media(min-width:761px){.provider-grid:has(>.provider-card:only-child) .provider-card{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:center;min-height:98px}.provider-grid:has(>.provider-card:only-child) .provider-title{margin:0;flex-wrap:wrap}.provider-grid:has(>.provider-card:only-child) .provider-values{padding-left:0}.provider-grid:has(>.provider-card:only-child) .provider-values>div{gap:8px}}
-@media(max-width:760px){.date-controls button{min-height:44px}.custom-range input,.custom-range .button{min-height:44px}}
+body {
+  background: #080b0d;
+  background-image: none;
+}
+.app-shell {
+  max-width: 1220px;
+  margin: 36px auto;
+  background: #0b0d10;
+  border: 1px solid #2b343a;
+  border-radius: 12px;
+  box-shadow:
+    0 28px 85px #0008,
+    0 1px 0 #ffffff08 inset;
+  overflow: hidden;
+}
+.topbar {
+  height: 70px;
+  padding: 0 25px;
+  gap: 38px;
+  background: #090b0d;
+  border-bottom-color: #222a2f;
+}
+.brand {
+  font-size: 20px;
+  gap: 9px;
+  letter-spacing: -0.6px;
+}
+.brand-mark {
+  font-size: 34px;
+}
+.topbar nav {
+  gap: 25px;
+}
+.nav-item {
+  font-size: 12px;
+  padding: 0 2px;
+}
+.header-period {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.local-status {
+  margin-left: 0;
+  color: var(--green);
+}
+.local-status svg {
+  width: 17px;
+}
+.period-picker {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  width: min(340px, calc(100vw - 32px));
+  padding: 20px;
+  background: #14171b;
+  color: var(--text);
+  border: 1px solid #32383e;
+  border-radius: 6px;
+  box-shadow: 0 16px 48px #0008;
+  z-index: 9;
+}
+.period-picker::backdrop {
+  background: transparent;
+}
+.period-picker form {
+  display: grid;
+  gap: 16px;
+}
+.period-picker [hidden] {
+  display: none;
+}
+.period-picker label {
+  display: grid;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.period-picker input {
+  min-height: 44px;
+  background: #0e1115;
+  border-color: #353c43;
+  color-scheme: dark;
+}
+.period-picker .button {
+  min-height: 44px;
+  width: 100%;
+}
+.period-date-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+}
+.period-date-fields input {
+  min-width: 0;
+  width: 100%;
+}
+.date-controls {
+  background: #101519;
+  border-color: #252e33;
+  padding: 2px;
+}
+.date-controls button {
+  min-height: 34px;
+  min-width: 45px;
+  font-size: 11px;
+}
+.date-controls .selected {
+  background: #252a2e;
+  color: #eff0f1;
+}
+.period-selection {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.period-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  min-height: 38px;
+  padding: 0;
+  border: 1px solid #252e33;
+  border-radius: 4px;
+  background: #101519;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+.period-arrow:hover:not(:disabled) {
+  color: var(--green);
+  border-color: #3c5145;
+}
+.period-arrow svg {
+  width: 16px;
+  height: 16px;
+}
+.period-arrow:disabled {
+  cursor: default;
+}
+@media (max-width: 760px) {
+  .period-selection {
+    width: 100%;
+    gap: 5px;
+  }
+  .period-selection .date-controls {
+    flex: 1;
+    min-width: 0;
+  }
+  .period-selection .date-controls button {
+    min-width: 0;
+    padding: 0 5px;
+  }
+  .period-arrow {
+    width: 44px;
+    min-height: 46px;
+  }
+}
+.app-main {
+  padding: 23px 25px 25px;
+  min-height: 0;
+}
+.page-heading {
+  margin-bottom: 13px;
+}
+.page-heading h1 {
+  font-size: 19px;
+  letter-spacing: -0.4px;
+  font-weight: 550;
+}
+.coverage {
+  border: 0;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  font-size: 10px;
+}
+.coverage summary {
+  gap: 7px;
+}
+.coverage-content {
+  border: 1px solid var(--border);
+  background: #101619;
+  border-radius: 5px;
+  padding: 18px;
+  margin-top: 12px;
+  max-width: 100%;
+}
+.overview-layout {
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 22px;
+}
+.metrics {
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.metrics.single {
+  grid-template-columns: minmax(0, 1fr);
+}
+.metric {
+  min-height: 116px;
+  padding: 16px 14px;
+  background: linear-gradient(120deg, #14171b, #101317);
+  border-color: #25282d;
+  box-shadow: 0 1px 0 #ffffff03 inset;
+  border-radius: 6px;
+}
+.metric.api-metric {
+  border-top: 1px solid #353b40;
+  padding-top: 16px;
+}
+.metric .label {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 10px;
+  white-space: nowrap;
+  color: #b7c0c7;
+}
+.metric .label svg {
+  width: 16px;
+  height: 16px;
+  color: #a3afb7;
+}
+.metric.positive .label svg,
+.metric:has(.multiply) .label svg {
+  color: var(--green);
+}
+.metric strong {
+  font-size: 28px;
+  font-weight: 550;
+  letter-spacing: -0.9px;
+  margin-top: 17px;
+  line-height: 1.1;
+}
+.metric-detail {
+  padding-top: 11px;
+  font-size: 9px;
+  line-height: 1.5;
+}
+.metric strong {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.multiply {
+  color: inherit;
+  padding-left: 1px;
+}
+.panel {
+  border-radius: 6px;
+  border-color: #25282d;
+  background: #111418;
+  box-shadow: 0 1px 0 #ffffff03 inset;
+}
+.provider-grid {
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.provider-card {
+  padding: 20px;
+}
+.provider-title {
+  gap: 10px;
+  margin-bottom: 18px;
+}
+.provider-logo {
+  font-size: 31px;
+  color: #e7ebed;
+}
+.provider-title h2 {
+  font-size: 14px;
+}
+.badge {
+  font: 8px var(--sans);
+  border-radius: 20px;
+  padding: 4px 8px;
+}
+.badge.green {
+  background: #153e29;
+  color: #65f3a2;
+  border-color: #224b34;
+}
+.provider-values {
+  padding-left: 41px;
+  gap: 15px;
+}
+.provider-values .label {
+  font-size: 10px;
+}
+.provider-values strong {
+  font-size: 19px;
+  font-weight: 500;
+}
+.provider-values small {
+  font-size: 9px;
+}
+.chart {
+  padding: 20px 20px 16px;
+}
+.panel-title {
+  margin-bottom: 20px;
+}
+.panel-title h2 {
+  font-size: 12px;
+}
+.legend {
+  font-size: 9px;
+  gap: 13px;
+}
+.chart-svg {
+  min-height: 170px;
+}
+.legend i {
+  background: var(--green);
+}
+.chart-dates {
+  font: 9px var(--sans);
+  padding-top: 3px;
+}
+.empty-chart-lines {
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent,
+    transparent 47px,
+    #242c32 48px,
+    transparent 49px
+  );
+}
+.overview-bottom {
+  margin-top: 12px;
+  font-size: 9px;
+}
+.overview-bottom > span {
+  gap: 5px;
+}
+.overview-bottom .text-button {
+  font-size: 10px;
+}
+.receipt-panel {
+  padding: 0;
+  gap: 14px;
+}
+.receipt-canvas {
+  filter: drop-shadow(0 10px 14px #0008);
+}
+.button {
+  background: var(--green);
+  border-color: var(--green);
+  color: #092214;
+  border-radius: 5px;
+  min-height: 44px;
+  font-size: 12px;
+  font-weight: 650;
+  box-shadow: 0 1px 0 #a1ffc955 inset;
+}
+.button:hover {
+  background: #5df39d;
+  border-color: #5df39d;
+}
+.export-button svg {
+  width: 16px;
+  height: 16px;
+}
+.app-footer {
+  margin: 0 25px 18px;
+  border-top: 1px solid #20282d;
+  padding-top: 14px;
+  font-size: 8px;
+  color: #89979f;
+}
+.app-footer .version {
+  color: #76838b;
+}
+.receipt-page-layout {
+  gap: 64px;
+  margin-top: 24px;
+  grid-template-columns: minmax(280px, 380px) minmax(250px, 380px);
+}
+.receipt-aside {
+  padding-top: 45px;
+}
+.receipt-aside > strong {
+  font-size: 34px;
+}
+.receipt-aside .coverage {
+  margin-top: 12px;
+}
+.settings-layout {
+  max-width: 760px;
+  margin-top: 20px;
+}
+.settings-section {
+  background: #11171b;
+  padding: 24px;
+}
+.settings-section h2 {
+  font-size: 13px;
+  margin-bottom: 18px;
+}
+input,
+select {
+  background: #0c1115;
+  border-color: #303b43;
+  min-height: 40px;
+}
+.amount-field input {
+  width: 110px;
+}
+.privacy-tags {
+  margin-bottom: 18px;
+}
+dialog {
+  background: #131a1e;
+  border-color: #34453c;
+}
+dialog::backdrop {
+  background: #030607d9;
+  backdrop-filter: blur(4px);
+}
+.demo-banner {
+  background: #171d1a;
+  color: #88c5a0;
+  font-size: 9px;
+}
+.model-coverage {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr 1fr;
+  gap: 8px;
+  padding: 12px 0;
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--muted);
+}
+.model-coverage code {
+  overflow-wrap: anywhere;
+  color: var(--text);
+}
+.model-coverage a {
+  grid-column: 1/-1;
+  color: var(--green);
+}
+@media (min-width: 1400px) {
+  .metric strong {
+    font-size: 28px;
+  }
+}
+@media (max-width: 1270px) {
+  .app-shell {
+    margin: 24px;
+  }
+  .topbar {
+    gap: 28px;
+  }
+  .overview-layout {
+    grid-template-columns: minmax(0, 1fr) 255px;
+    gap: 18px;
+  }
+  .metric strong {
+    font-size: 25px;
+  }
+}
+@media (min-width: 1001px) and (max-width: 1100px) {
+  .metrics {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .metric {
+    padding: 15px 10px;
+  }
+  .metric .label {
+    font-size: 9px;
+    gap: 5px;
+  }
+  .metric .label svg {
+    width: 13px;
+  }
+  .metric strong {
+    font-size: 22px;
+  }
+  .provider-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .provider-card {
+    padding: 17px;
+  }
+  .provider-title {
+    flex-wrap: wrap;
+  }
+  .provider-values {
+    padding-left: 0;
+  }
+}
+@media (max-width: 1000px) {
+  .metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .topbar {
+    gap: 25px;
+  }
+  .topbar nav {
+    gap: 18px;
+  }
+  .overview-layout {
+    grid-template-columns: minmax(0, 1fr) 245px;
+  }
+  .metric strong {
+    font-size: 29px;
+  }
+  .provider-grid {
+    grid-template-columns: 1fr;
+  }
+  .header-period {
+    gap: 8px;
+  }
+  .local-status {
+    display: none;
+  }
+}
+@media (max-width: 760px) {
+  body {
+    background: #090d10;
+    background-image: none;
+  }
+  .app-shell {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
+    background: none;
+  }
+  .topbar {
+    height: auto;
+    min-height: 120px;
+    padding: 18px 18px 13px;
+    gap: 14px;
+    flex-wrap: wrap;
+    background: #090b0d;
+  }
+  .brand {
+    font-size: 20px;
+  }
+  .header-period {
+    flex-basis: 100%;
+    margin-left: 0;
+    flex-wrap: wrap;
+  }
+  .date-controls {
+    width: 100%;
+    padding: 3px;
+  }
+  .date-controls button {
+    flex: 1;
+    min-height: 39px;
+    font-size: 12px;
+  }
+  .custom-range {
+    width: 100%;
+    justify-content: start;
+  }
+  .custom-range label {
+    flex: 1;
+  }
+  .custom-range input {
+    width: 100%;
+  }
+  .custom-range .button {
+    min-height: 39px;
+  }
+  .app-main {
+    padding: 22px 18px 28px;
+  }
+  .page-heading h1 {
+    font-size: 19px;
+  }
+  .page-heading {
+    margin-bottom: 12px;
+  }
+  .coverage {
+    margin-bottom: 17px;
+    font-size: 10px;
+  }
+  .overview-layout {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  .metrics {
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  .metric {
+    min-height: 127px;
+    padding: 17px 15px;
+  }
+  .metric.api-metric {
+    padding-top: 17px;
+  }
+  .metric .label {
+    font-size: 10px;
+  }
+  .metric strong {
+    font-size: 30px;
+  }
+  .metric-detail {
+    font-size: 9px;
+  }
+  .provider-grid {
+    margin-bottom: 14px;
+  }
+  .provider-card {
+    padding: 19px;
+  }
+  .provider-values {
+    padding-left: 42px;
+  }
+  .provider-values strong {
+    font-size: 19px;
+  }
+  .chart {
+    padding: 19px 16px 14px;
+  }
+  .panel-title {
+    gap: 10px;
+    margin-bottom: 15px;
+  }
+  .panel-title h2 {
+    font-size: 11px;
+  }
+  .legend {
+    font-size: 8px;
+    gap: 8px;
+  }
+  .chart-svg {
+    min-height: 145px;
+  }
+  .chart-dates {
+    font-size: 9px;
+  }
+  .overview-bottom {
+    font-size: 8px;
+  }
+  .overview-layout .receipt-panel {
+    padding: 0;
+    max-width: 360px;
+    width: 100%;
+    margin-top: 6px;
+  }
+  .receipt-page-layout {
+    grid-template-columns: 1fr;
+    gap: 25px;
+  }
+  .receipt-page-layout > .receipt-panel {
+    max-width: 360px;
+  }
+  .receipt-aside {
+    padding-top: 0;
+  }
+  .topbar nav {
+    background: #0d1418;
+    height: calc(65px + env(safe-area-inset-bottom));
+    padding-bottom: env(safe-area-inset-bottom);
+    border-top-color: #2a343a;
+  }
+  .nav-item {
+    min-height: 62px;
+    font-size: 10px;
+  }
+  .nav-item.active {
+    color: var(--green);
+    border-top-color: var(--green);
+  }
+  .nav-item svg {
+    width: 19px;
+    height: 19px;
+  }
+  .app-footer {
+    margin: 0 18px calc(88px + env(safe-area-inset-bottom));
+    padding-top: 15px;
+  }
+  .settings-section {
+    padding: 22px 18px;
+  }
+  .billing-row {
+    grid-template-columns: 1fr 155px;
+    gap: 12px;
+  }
+  .amount-field {
+    grid-column: 2;
+  }
+  .privacy-tags {
+    gap: 16px;
+  }
+  .model-coverage {
+    grid-template-columns: 1fr 1fr;
+  }
+  .model-coverage code {
+    grid-column: 1/-1;
+  }
+  #toast {
+    bottom: calc(80px + env(safe-area-inset-bottom));
+  }
+  .export-button {
+    min-height: 46px;
+  }
+}
+@media (max-width: 360px) {
+  .topbar {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .app-main {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .metric {
+    padding: 15px 12px;
+  }
+  .metric.api-metric {
+    padding-top: 15px;
+  }
+  .metric .label {
+    font-size: 9px;
+    gap: 5px;
+  }
+  .metric strong {
+    font-size: 27px;
+  }
+  .metric .label svg {
+    width: 14px;
+  }
+  .provider-title h2 {
+    font-size: 13px;
+  }
+  .provider-card {
+    padding: 17px;
+  }
+  .provider-values {
+    padding-left: 0;
+  }
+  .billing-row {
+    grid-template-columns: 1fr 142px;
+  }
+  .privacy-tags {
+    gap: 12px;
+  }
+  .receipt-panel {
+    padding: 0;
+  }
+}
+.provider-logo svg {
+  width: 29px;
+  height: 29px;
+}
+.metric:has(.multiply) .label svg {
+  stroke-width: 2.3;
+}
+@media (min-width: 761px) {
+  .provider-grid:has(> .provider-card:only-child) .provider-card {
+    display: grid;
+    grid-template-columns: 1fr 1.4fr;
+    gap: 20px;
+    align-items: center;
+    min-height: 98px;
+  }
+  .provider-grid:has(> .provider-card:only-child) .provider-title {
+    margin: 0;
+    flex-wrap: wrap;
+  }
+  .provider-grid:has(> .provider-card:only-child) .provider-values {
+    padding-left: 0;
+  }
+  .provider-grid:has(> .provider-card:only-child) .provider-values > div {
+    gap: 8px;
+  }
+}
+@media (max-width: 760px) {
+  .date-controls button {
+    min-height: 44px;
+  }
+  .custom-range input,
+  .custom-range .button {
+    min-height: 44px;
+  }
+}
 
 /* Neutral mark and original provider artwork stay separate from the UI wordmark. */
-.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;line-height:1;flex-shrink:0}.brand-mark svg{width:100%;height:100%}.loading .brand-mark{width:32px;height:32px}.provider-logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0}.provider-logo img{width:29px;height:29px;object-fit:contain}.chart-svg g:hover rect{filter:brightness(1.15)}.chart-svg line{stroke-opacity:.65}.receipt-canvas{filter:drop-shadow(0 2px 2px #0007) drop-shadow(0 10px 14px #0006)}.export-button{box-shadow:0 1px 0 #b4ffcd55 inset,0 4px 14px #0003}.receipt-page-layout{grid-template-columns:minmax(280px,360px) minmax(250px,380px)}
-@media(max-width:760px){.brand-mark{width:24px;height:24px}.receipt-page-layout{grid-template-columns:1fr}.metric{background:linear-gradient(120deg,#14171b,#101317)}.topbar nav{background:#101317}.overview-layout .receipt-panel,.receipt-page-layout>.receipt-panel{max-width:360px}.provider-values{padding-left:44px}}
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.brand-mark svg {
+  width: 100%;
+  height: 100%;
+}
+.loading .brand-mark {
+  width: 32px;
+  height: 32px;
+}
+.provider-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+}
+.provider-logo img {
+  width: 29px;
+  height: 29px;
+  object-fit: contain;
+}
+.chart-svg g:hover rect {
+  filter: brightness(1.15);
+}
+.chart-svg line {
+  stroke-opacity: 0.65;
+}
+.receipt-canvas {
+  filter: drop-shadow(0 2px 2px #0007) drop-shadow(0 10px 14px #0006);
+}
+.export-button {
+  box-shadow:
+    0 1px 0 #b4ffcd55 inset,
+    0 4px 14px #0003;
+}
+.receipt-page-layout {
+  grid-template-columns: minmax(280px, 360px) minmax(250px, 380px);
+}
+@media (max-width: 760px) {
+  .brand-mark {
+    width: 24px;
+    height: 24px;
+  }
+  .receipt-page-layout {
+    grid-template-columns: 1fr;
+  }
+  .metric {
+    background: linear-gradient(120deg, #14171b, #101317);
+  }
+  .topbar nav {
+    background: #101317;
+  }
+  .overview-layout .receipt-panel,
+  .receipt-page-layout > .receipt-panel {
+    max-width: 360px;
+  }
+  .provider-values {
+    padding-left: 44px;
+  }
+}
 
 /* Product identities: no generic company marks in provider cards. */
-.codex-product-name{font-family:var(--mono);letter-spacing:-.4px!important;font-size:16px!important;font-weight:600!important}.claude-code-product-mark{width:30px;height:26px;object-fit:contain;flex-shrink:0}
+.codex-product-name {
+  font-family: var(--mono);
+  letter-spacing: -0.4px !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+}
+.claude-code-product-mark {
+  width: 30px;
+  height: 26px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
 
-.codex-product-mark{width:29px;height:29px;flex-shrink:0;filter:invert(1);opacity:.93}
+.codex-product-mark {
+  width: 29px;
+  height: 29px;
+  flex-shrink: 0;
+  filter: invert(1);
+  opacity: 0.93;
+}
 
 /* Receipt text has room to read at dashboard scale, not just in the exported PNG. */
-@media(min-width:1001px){.overview-layout{grid-template-columns:minmax(0,1fr) 360px}}
-@media(min-width:761px) and (max-width:1000px){.overview-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}}
-@media(min-width:761px){.receipt-page-layout{grid-template-columns:minmax(280px,420px) minmax(250px,380px)}}
-.billing-row{grid-template-columns:100px 145px minmax(0,1fr);gap:16px;align-items:start}.provider-setting-name{padding-top:12px}
-.subscription-fields{display:grid;gap:10px;min-width:0}.subscription-fields select{width:100%;text-overflow:ellipsis}.amount-field input[readonly]{color:var(--muted)}
-.subscription-fields.hidden{display:none}
-.compact-details a{color:var(--green)}
-@media(max-width:760px){.billing-row{grid-template-columns:1fr 155px}.subscription-fields{grid-column:1/-1}.subscription-fields .amount-field{grid-column:auto;justify-content:end}}
-.refresh-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;background:#151a1e;border:1px solid #343d43;border-radius:4px;color:var(--text);font-size:11px;white-space:nowrap}.refresh-button svg{width:15px;height:15px;color:var(--green)}.refresh-button:hover:enabled{background:#1d2328;border-color:#59656c}
-dialog .subscription-fields{grid-column:1/-1}
-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
+@media (min-width: 1001px) {
+  .overview-layout {
+    grid-template-columns: minmax(0, 1fr) 360px;
+  }
+}
+@media (min-width: 761px) and (max-width: 1000px) {
+  .overview-layout {
+    grid-template-columns: minmax(0, 1fr) 300px;
+    gap: 18px;
+  }
+}
+@media (min-width: 761px) {
+  .receipt-page-layout {
+    grid-template-columns: minmax(280px, 420px) minmax(250px, 380px);
+  }
+}
+.billing-row {
+  grid-template-columns: 100px 145px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.provider-setting-name {
+  padding-top: 12px;
+}
+.subscription-fields {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+.subscription-fields select {
+  width: 100%;
+  text-overflow: ellipsis;
+}
+.amount-field input[readonly] {
+  color: var(--muted);
+}
+.subscription-fields.hidden {
+  display: none;
+}
+.compact-details a {
+  color: var(--green);
+}
+@media (max-width: 760px) {
+  .billing-row {
+    grid-template-columns: 1fr 155px;
+  }
+  .subscription-fields {
+    grid-column: 1/-1;
+  }
+  .subscription-fields .amount-field {
+    grid-column: auto;
+    justify-content: end;
+  }
+}
+.refresh-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 9px 13px;
+  background: #151a1e;
+  border: 1px solid #343d43;
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.refresh-button svg {
+  width: 15px;
+  height: 15px;
+  color: var(--green);
+}
+.refresh-button:hover:enabled {
+  background: #1d2328;
+  border-color: #59656c;
+}
+dialog .subscription-fields {
+  grid-column: 1/-1;
+}
+dialog {
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+}