/* Revision: Cooked's existing native hierarchy leads the web proposal. */
:root { --rule:rgba(255,255,255,.12); --gauge:rgba(255,255,255,.72); --track:rgba(255,255,255,.14); }
.toolbar { min-height:70px; padding:12px 24px; gap:18px; border-bottom:0; }
.brand { gap:10px; }
.brand strong { font-size:14px; }
.main-nav { background:rgba(255,255,255,.055); padding:3px; }
.main-nav a { padding:5px 16px; min-height:31px; }
.toolbar-actions { display:flex; align-items:center; justify-self:end; gap:12px; }
.action-capsule { display:flex; align-items:center; padding:3px 7px; background:rgba(255,255,255,.06); border:1px solid var(--rule); border-radius:24px; }
.action-capsule a,.action-capsule button { width:34px; height:30px; border:0; background:none; display:grid; place-items:center; border-radius:50%; color:var(--muted); font-size:23px; line-height:1; }
.action-capsule .selected { color:var(--text); background:var(--track); }
.settings-nav { display:flex; justify-content:center; gap:30px; padding:5px 24px 0; border-bottom:1px solid var(--rule); }
.settings-nav a { display:block; color:var(--muted); padding:12px 0; white-space:nowrap; }
.settings-nav a[aria-current] { color:var(--text); border-bottom:2px solid var(--gauge); }
.traffic-lights { display:none; }
main { padding-top:34px; min-height:640px; }
.page-heading { margin-bottom:18px; }
.page-heading h1 { letter-spacing:-.018em; font-size:22px; }
.page-heading p { max-width:78ch; }
.chart-legend { justify-content:flex-end; gap:20px; margin-bottom:4px; }
.chart-legend strong { color:var(--text); font-weight:500; }
.chart-dates { display:none!important; }
.legend-line.previous { border-top-style:solid; opacity:.7; }
.history-chart { height:340px; }
.history-chart .chart-last { stroke-dasharray:none; stroke-width:1.4; opacity:.8; }
.provider-area { stroke-width:.5; }
.claude-area { fill:var(--sky); stroke:var(--sky); }
.codex-area { fill:var(--codex); stroke:var(--codex); }
.other-area { fill:var(--sea); stroke:var(--sea); }
.chart-average { fill:none; stroke:var(--muted); stroke-width:1; stroke-dasharray:4 3; opacity:.7; }
.history-chart .chart-average-label { font-size:11px; }
.chart-caption { margin:9px 0 18px; }
.insight-row { padding:17px 0; border-bottom:0; border-top:1px solid var(--rule); }
.cache-track { display:flex; background:transparent; height:7px; border-color:var(--rule); }
.cache-track>.cache-claude { background:var(--sky); width:14.77%; }
.cache-track>.cache-codex { background:var(--codex); width:20.36%; }
.cache-track>.cache-other { background:var(--sea); width:3.55%; }
.model-summaries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:start; }
.model-summaries>span { position:static; padding:0!important; }
.model-summaries strong { display:block; font-size:13px; font-weight:500; }
.model-summaries small { margin-top:5px; color:var(--text); }
.model-summaries small span { color:var(--muted); }
.model-meter { display:block; background:var(--codex); height:4px; border-radius:2px; margin-top:8px; width:100%; }
.model-meter.claude { background:var(--sky); width:86%; }
.model-meter.short { width:18%; }
.provider-dot { width:15px; height:15px; background:none!important; border-radius:0; position:relative; display:inline-flex; align-items:center; justify-content:center; font-style:normal; line-height:1; }
.provider-dot::before { color:var(--gauge); content:'◇'; font-size:17px; }
.provider-dot.claude::before { content:'✳'; color:var(--sky); font-size:20px; }
.provider-dot.codex::before { content:'›_'; border:1.3px solid var(--codex); color:var(--codex); border-radius:3px; font-size:10px; font-weight:600; padding:1px 2px 2px; }
.provider-dot.cursor::before { content:'➤'; display:block; transform:rotate(-60deg); color:var(--sea); font-size:15px; }
.provider-dot.router::before { content:'⑂'; color:var(--text); font-size:22px; }
.chart-legend .provider-dot { width:13px; height:13px; }
.weekly-chart { width:100%; height:340px; display:block; margin:14px 0 24px; }
.weekly-chart text { fill:var(--muted); font-family:inherit; font-size:11px; }
.weekly-chart .chart-grid { fill:none; stroke:var(--rule); stroke-width:.7; }
.cost-table-row { display:grid; grid-template-columns:150px repeat(4,1fr); gap:20px; padding:16px 0; border-top:1px solid var(--rule); }
.cost-table-head { color:var(--muted); font-size:12px; }
.cost-table-row>span:not(:first-child),.cost-table-row>strong:not(:first-child) { text-align:right; }
.chart-section-title { font-size:13px; margin:26px 0 18px; }
.share-chart { margin:0 0 12px; }
.share-row { display:grid; grid-template-columns:170px 1fr 190px; align-items:center; gap:24px; min-height:56px; }
.share-row>strong { font-weight:500; }
.share-row>span { font-size:12px; color:var(--muted); }
.share-track { position:relative; height:40px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--rule) calc(25% - 1px),var(--rule) 25%); }
.share-point,.share-range { --mark:var(--codex); position:absolute; top:50%; }
.share-point { left:var(--at); height:9px; width:9px; border:1.5px solid var(--mark); border-radius:50%; background:var(--mark); transform:translate(-50%,-50%); }
.share-point.open { background:var(--surface); }
.share-range { height:1px; background:var(--mark); left:var(--start); width:var(--span); }
.share-point.claude,.share-range.claude { --mark:var(--sky); }
.share-point.cursor,.share-range.cursor { --mark:var(--sea); }
.at-53 { --at:53%; }.at-45 { --at:45%; }.at-29 { --at:29%; }.at-38 { --at:38%; }.at-10 { --at:10%; }.at-8 { --at:8%; }.at-9 { --at:9%; }
.start-45 { --start:45%; }.start-29 { --start:29%; }.start-8 { --start:8%; }.span-8 { --span:8%; }.span-9 { --span:9%; }.span-2 { --span:2%; }.span-1 { --span:1%; }
.share-legend { display:flex; gap:22px; color:var(--muted); margin:0 0 25px 194px; font-size:11px; }
.model-table-head,.model-table-row { display:grid; grid-template-columns:minmax(240px,2fr) repeat(5,1fr); gap:18px; align-items:start; padding:14px 0; border-top:1px solid var(--rule); }
.model-table-head { color:var(--muted); font-size:11px; }
.model-table-row>span,.model-table-row>strong,.model-table-head>span:not(:first-child) { text-align:right; }
.model-table-row small { margin-top:4px; font-size:11px; }
.maker-label { padding:18px 0 10px; color:var(--muted); font-size:12px; }
.widget-stage { background:var(--canvas); border-radius:14px; }
.usage-widget { width:352px; min-height:280px; padding:18px; border-radius:22px; background:var(--surface); border:1px solid var(--rule); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.widget-header { display:block; }
.widget-header>strong { display:flex; align-items:center; gap:7px; font-size:13px; }
.widget-account { margin:5px 0 10px 22px; color:var(--muted); font-size:11px; }
.widget-hero { margin-top:0; margin-bottom:12px; align-items:center; }
.widget-hero>strong { font-size:26px; line-height:1.1; letter-spacing:-.02em; }
.widget-hero>strong>span { font-size:16px; font-weight:400; color:var(--muted); }
#widget-warning { color:var(--danger); font-size:12px; }
.widget-hero.tight #widget-warning { color:var(--warning); }
.hero-gauge { height:4px; margin-bottom:11px; width:100%; }
.hero-gauge.tight>span { background:var(--warning); }
.hero-reset { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px 8px; font-size:11px; color:var(--muted); padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:14px; }
.widget-row { margin-top:12px; }
.widget-row-top { display:grid; grid-template-columns:auto minmax(40px,1fr) auto; gap:9px; align-items:center; }
.widget-row-name { display:flex; gap:6px; align-items:center; white-space:nowrap; font-size:12px; }
.widget-row-bottom { padding-left:21px; margin-top:5px; font-size:11px; gap:6px; }
.widget-footer { border:0; padding:0; margin-top:16px; }
.widget-tick-note { margin-top:16px; }
.native-preview-link { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 22px; }
/* macOS proposals use native chrome only in the explicitly labelled Mac view. */
.mac-preview { background:#242426; }
.mac-preview .app-shell { margin:0 28px 28px; max-width:none; background:#302e2f; }
.mac-preview .toolbar { background:#343233; }
.mac-preview .brand img,.mac-preview .profile-button,.mac-preview .app-footer { display:none; }
.mac-preview .traffic-lights { display:flex; gap:8px; margin-right:8px; }
.traffic-lights i { width:11px; height:11px; border-radius:50%; background:#ff6058; }
.traffic-lights i:nth-child(2) { background:#ffbd2e; }.traffic-lights i:nth-child(3) { background:#28c840; }
.mac-preview .preview-bar { padding-left:30px; padding-right:30px; max-width:none; }
.mac-preview .history-chart { height:360px; }
.mac-preview main { padding-top:34px; }
.menu-preview .app-shell,.desktop-widget-preview .app-shell { background:none; border:0; border-radius:0; box-shadow:none; }
.menu-preview .toolbar,.desktop-widget-preview .toolbar { display:none; }
.menu-preview main { padding:10px 0 20px; min-height:0; }
.menu-stage-label { text-align:center; margin-bottom:20px; }
.menu-stage-label h1 { font-size:20px; }
.menu-stage-label p { margin:6px auto 0; color:var(--muted); font-size:12px; }
.menu-bar-sample { width:352px; max-width:100%; display:flex; align-items:center; gap:16px; justify-content:flex-end; padding:7px 10px; margin:0 auto; background:#333334; border:1px solid var(--rule); border-radius:8px 8px 0 0; font-size:11px; }
.menu-bar-sample img { margin-left:auto; }
.native-menu { width:352px; max-width:100%; margin:8px auto 0; padding:19px 18px 0; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:#323233; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 25px rgba(0,0,0,.15); }
.native-menu header { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--rule); }
.native-menu header h2 { font-size:16px; }.native-menu header>span { font-size:11px; color:var(--muted); }
.native-hero { padding:15px 0; }
.native-hero-label { font-size:13px; display:flex; align-items:center; gap:7px; font-weight:600; }
.native-account { font-size:11px; color:var(--muted); margin:4px 0 0 22px; line-height:1.3; }
.native-hero-value { font-size:28px; font-weight:600; letter-spacing:-.025em; margin:9px 0 12px; line-height:1.1; }
.native-hero-value>span { font-size:17px; font-weight:400; color:var(--muted); }
.native-hero .widget-bar { height:4px; margin-bottom:11px; }
.native-hero-reset { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; font-size:11px; color:var(--muted); }
.native-menu .native-hero { border-bottom:1px solid var(--rule); margin-bottom:3px; }
.native-allowance { padding:12px 0 0; }
.native-allowance-top { display:grid; grid-template-columns:auto minmax(35px,1fr) auto; gap:8px; align-items:center; font-size:12px; }
.native-allowance-top strong { display:flex; align-items:center; gap:6px; }
.native-allowance-top b { font-size:13px; white-space:nowrap; font-weight:600; }
.native-allowance-top em { font-style:normal; font-size:11px; color:var(--muted); font-weight:400; }
.native-allowance-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; padding-left:21px; font-size:11px; color:var(--muted); margin-top:5px; line-height:1.35; }
.pct-70 { width:70%; }.pct-100 { width:100%; }
.native-money-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:13px; }
.native-menu .native-money-row:first-of-type { margin-top:17px; border-top:1px solid var(--rule); padding-top:17px; }
.native-money-row>strong { display:flex; align-items:center; gap:7px; font-size:12px; }
.native-money-row>span { display:flex; gap:8px; align-items:baseline; }
.native-money-row b { font-size:17px; font-weight:600; }.native-money-row small { font-size:11px; }
.cost-mark { display:inline-grid; place-items:center; width:15px; font-size:16px; font-style:normal; color:var(--muted); }
.native-estimate { font-size:11px; color:var(--muted); margin:7px 0 17px; }
.native-menu footer { border-top:1px solid var(--rule); display:flex; align-items:center; gap:9px; padding:14px 0; }
.native-menu footer button,.native-menu footer a { border:0; background:rgba(255,255,255,.1); border-radius:18px; padding:6px 13px; font-size:12px; font-weight:500; }
.native-menu footer>span { margin-left:auto; font-size:12px; color:var(--muted); }
.native-caption { text-align:center; max-width:none; font-size:11px; color:var(--muted); margin:20px auto 0; }
.native-widget-layout { display:grid; grid-template-columns:352px 352px minmax(150px,1fr); gap:26px; align-items:start; margin:32px 0; }
.widget-family-label { font-size:12px; color:var(--muted); font-weight:400; margin:0 0 10px 2px; }
.native-widget { border-radius:22px; background:#302e2c; border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); padding:15px; }
.native-widget .native-hero { padding:0 0 9px; }
.native-large { min-height:352px; display:flex; flex-direction:column; }
.native-large .native-hero-value { font-size:22px; }
.native-large .native-hero-value>span { font-size:14px; }
.native-large .native-hero-reset { line-height:1.4; }
.native-large .native-hero { border-bottom:1px solid var(--rule); padding-bottom:15px; }
.native-large .native-allowance { padding-top:16px; }
.native-widget-footer { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin-top:auto; padding-top:17px; }
.native-large .native-widget-footer { padding-top:25px; }
.tick-key::before { content:'┆'; color:var(--gauge); padding-right:4px; }
.native-widget-column { display:flex; flex-direction:column; gap:25px; }
.small-widget-pair { display:flex; gap:16px; }
.native-small { width:168px; min-height:180px; padding:14px; display:flex; flex-direction:column; }
.native-small .native-hero-label { font-size:12px; white-space:nowrap; gap:5px; }
.native-small .native-hero-value { font-size:22px; white-space:nowrap; margin:15px 0 3px; }
.native-small small { font-size:11px; }
.small-widget-detail { margin-top:14px; font-size:11px; color:var(--muted); }
.native-cost-split { display:flex; height:4px; gap:2px; margin:10px 0 7px; }
.native-cost-split i { display:block; background:var(--sky); width:58%; border-radius:2px; }
.native-cost-split i:nth-child(2) { width:33%; background:var(--codex); }.native-cost-split i:nth-child(3) { width:9%; background:var(--sea); }
.small-source-line { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; margin-top:3px; }
.small-source-line>span { color:var(--muted); }.small-source-line>b { font-weight:500; }
.native-medium { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-height:174px; }
.native-medium>div+div { border-left:1px solid var(--rule); padding-left:14px; }
.native-medium .native-hero-label { font-size:12px; }.native-medium .native-hero-value { font-size:22px; margin-top:10px; }
.native-medium .native-hero-value>span { font-size:13px; }
.native-medium .native-hero-reset { line-height:1.25; }.native-medium .native-account { margin-left:0; }
.native-medium .native-allowance { padding:0; }.native-medium .native-allowance+.native-allowance { padding-top:13px; }
.native-medium .native-allowance-top { display:flex; flex-wrap:wrap; gap:5px; font-size:11px; }
.native-medium .native-allowance-top>strong { flex-basis:100%; font-size:12px; }
.native-medium .widget-bar { flex:1; }.native-medium .native-allowance-bottom { padding-left:0; font-size:11px; }
.native-medium .native-allowance-top b { font-size:12px; }
.native-medium-cost { min-height:180px; font-size:12px; }
.native-medium-cost .native-hero-value { margin-bottom:4px; font-size:22px; white-space:nowrap; }
.native-medium-cost small { font-size:11px; }.native-medium-cost .small-widget-detail>strong { color:var(--text); }
.native-medium-cost .small-widget-detail>span { font-size:11px; }.native-medium-cost .native-cost-split { margin-top:4px; margin-bottom:9px; }
.native-widget-notes { padding:25px 0 0 10px; max-width:240px; }
.native-widget-notes h2 { font-size:13px; margin-bottom:10px; }.native-widget-notes p { font-size:12px; color:var(--muted); line-height:1.8; margin-bottom:23px; }
.native-widget-notes a { font-size:11px; display:block; }
html[data-theme="light"] { --rule:rgba(48,46,44,.16); --gauge:rgba(48,46,44,.65); --track:rgba(48,46,44,.14); }
html[data-theme="light"] .action-capsule,html[data-theme="light"] .main-nav { background:rgba(0,0,0,.04); }
html[data-theme="light"] .mac-preview { background:#d9d7d4; }
html[data-theme="light"] .mac-preview .app-shell,html[data-theme="light"] .native-widget,html[data-theme="light"] .native-menu { background:#efece8; }
html[data-theme="light"] .mac-preview .toolbar,html[data-theme="light"] .menu-bar-sample { background:#e6e3df; }
@media(max-width:1100px) {
  .toolbar { grid-template-columns:1fr auto auto; gap:12px; }
  .main-nav a { padding:5px 12px; }
  .model-table-head,.model-table-row { grid-template-columns:minmax(170px,1.8fr) repeat(5,1fr); gap:10px; font-size:12px; }
  .native-widget-layout { grid-template-columns:352px 352px; justify-content:center; }
  .native-widget-notes { grid-column:1/-1; max-width:none; padding:0; }
  .native-widget-notes p { display:inline-block; vertical-align:top; margin-right:30px; max-width:43ch; }
  .device-costs { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .preview-bar { padding:10px 16px; }
  .preview-bar>div { gap:12px; }.preview-bar>div>a { display:none; }
  .toolbar { padding:14px 20px 0; grid-template-columns:1fr auto; min-height:107px; gap:10px; }
  .toolbar-actions { grid-column:2; grid-row:1; gap:8px; }.action-capsule { padding:1px 3px; }
  .action-capsule a,.action-capsule button { width:30px; height:28px; }
  .main-nav { background:none; padding:0; gap:25px; border:0; border-bottom:1px solid var(--rule); border-radius:0; }
  .main-nav a { padding:9px 0 12px; border-radius:0; min-height:42px; }
  .main-nav a[aria-current] { background:none; border-bottom:2px solid var(--gauge); }
  .settings-nav { justify-content:space-between; gap:20px; overflow-x:auto; padding:0 22px; font-size:12px; }
  main { padding:26px 22px; min-height:600px; }
  .chart-legend { flex-wrap:wrap; justify-content:flex-start; gap:7px 16px; margin-top:22px; font-size:11px; }
  .chart-legend strong { display:none; }.history-chart { height:260px; }
  .insight-row { padding:18px 0; gap:9px; }.chart-caption { margin-top:7px; }
  .model-summaries { grid-template-columns:1fr; gap:17px; }.model-summaries>span { max-width:none; }.model-meter { max-width:100%; }
  .device-costs { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  .cost-table { overflow-x:auto; }.cost-table-row { grid-template-columns:100px repeat(4,98px); gap:12px; width:max-content; font-size:12px; }.cost-table-head { font-size:11px; }
  .weekly-chart { height:250px; }.weekly-chart text { font-size:15px; }
  .models-table { overflow-x:auto; }.model-table-head,.model-table-row { grid-template-columns:180px repeat(5,90px); width:max-content; }
  .share-row { grid-template-columns:1fr 1fr; gap:0 12px; padding:10px 0; border-bottom:1px solid var(--rule); }
  .share-row>strong { font-size:12px; }.share-row>span { font-size:11px; grid-row:2; grid-column:1/-1; }
  .share-track { height:28px; }.share-legend { margin-left:0; }
  .widget-stage { padding:24px 12px; }.usage-widget { max-width:100%; padding:17px 15px; }
  .widget-row-top { grid-template-columns:auto minmax(30px,1fr) auto; gap:6px; }.widget-row-name { font-size:11px; gap:4px; }
  .widget-row-bottom { flex-wrap:wrap; }.hero-reset { font-size:11px; }
  .mac-preview .app-shell { margin:0 10px 20px; }.mac-preview main { padding:26px 18px; }
  .mac-preview .brand { gap:6px; }.mac-preview .traffic-lights { gap:5px; margin-right:4px; }.traffic-lights i { width:9px; height:9px; }
  .mac-preview .history-chart { height:260px; }
  .native-widget-layout { display:flex; flex-direction:column; align-items:center; gap:26px; }.native-widget-layout>div { max-width:100%; }
  .native-widget { max-width:100%; }.native-large { width:352px; }.small-widget-pair { gap:10px; }.native-small { width:calc(50% - 5px); }
  .native-medium { width:352px; }.native-widget-column { max-width:100%; }.native-widget-notes { max-width:none; padding:0; }
  .menu-preview .app-shell { margin:0 16px 20px; }.menu-preview main { padding:8px 0; }
  .native-menu { padding-left:16px; padding-right:16px; }.native-money-row { flex-wrap:wrap; }.native-money-row>span { margin-left:22px; }
  .menu-stage-label h1 { font-size:19px; }.menu-stage-label p { font-size:11px; }
}
@media(prefers-contrast:more) { :root { --rule:#827b73; --gauge:#ece8e3; }.native-widget,.native-menu { border-color:var(--muted); }html[data-theme="light"] { --gauge:#4a4540; --rule:#8c8278; } }
/* Gauge ticks cut through the fill, just as on Cooked's desktop widgets. */
.native-tick { position:absolute; top:-2px; height:8px; width:2px; background:var(--gauge); box-shadow:0 0 0 2px var(--surface); }
.tick-20 { left:20%; }.tick-42 { left:42%; }
.native-hero .widget-bar,.native-allowance .widget-bar { position:relative; overflow:visible; }
.native-medium-cost .small-source-line>span { white-space:nowrap; font-size:11px; }
.native-medium-cost .small-source-line { align-items:baseline; }
.native-medium-cost .small-source-line>b { font-size:11px; }
.native-medium-cost>div:nth-child(2)>.native-cost-split:nth-of-type(4)>i:first-child { background:var(--codex); width:60%; }
.chart-reset { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4; opacity:.5; }
.reset-dot { display:inline-block; height:7px; width:7px; border-radius:50%; background:var(--codex); margin-right:6px; }
.native-menu .native-money-row:has(+.native-money-row) { border-top:1px solid var(--rule); margin-top:16px; padding-top:16px; }
@media(max-width:760px) { .weekly-chart text { font-size:11px; } }

html[data-theme="light"] .menu-preview .app-shell,html[data-theme="light"] .desktop-widget-preview .app-shell { background:none; }