/* AI Token Usage Hub — 液態玻璃：光暈（裝飾）→ 玻璃外殼 → 近乎不透明的資料圖版。
   計量條用同一色相的填色與底軌；狀態色（充足／偏低／即將用完）另外保留，一律附圖示與文字。 */
:root{
 color-scheme:light;
 --bg:#e8edf5;--ink:#141a24;--muted:#556070;--faint:#8792a3;--line:#d5dbe6;
 --glass:#ffffffa6;--glass-strong:#ffffffd9;--glass-solid:#f6f8fb;--plate:#fbfcfde8;--rim:#ffffffcc;--rim-low:#ffffff40;
 --accent:#2e63cc;--accent-ink:#fff;--track:#2e63cc26;
 --good:#0c7a0c;--warning:#b27400;--critical:#c02f2f;--cooldown:#2f5fb3;--series-1:#2e63cc;--series-2:#0e8c74;
 --aura-1:#3d74d6;--aura-2:#8a5fc8;--aura-3:#1d9a88;--aura-4:#d08a2a;--aura-a:.42;
 --lift:0 16px 48px #1f2b4026,0 2px 8px #1f2b4014;
 --sans:"Segoe UI Variable Text","Segoe UI","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
 --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
 --heat-0:#e7eaf0;--heat-1:#c5d7f5;--heat-2:#8fb3ec;--heat-3:#5487dc;--heat-4:#2a5fb8;   /* 與 NekOS 儀表板同一組（已驗證） */
 --ai-claude:#eb6834;--ai-codex:#2a78d6;--ai-gemini:#4a3aa7;--ai-other:var(--faint);
 --tk-input:#2a78d6;--tk-output:#008300;--tk-cached:#4a3aa7;--tk-cache_write:#eda100;--tk-reasoning:#e87ba4;   /* 與儀表板五類 token 同色（驗證器 --pairs all 淺深色都通過） */   /* 品牌色：與儀表板同一組驗證過的分類色 */
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
 color-scheme:dark;
 --bg:#070a10;--ink:#e3e8ef;--muted:#9aa4b3;--faint:#6d7787;--line:#262d3a;
 --glass:#18202ea8;--glass-strong:#141b27e0;--glass-solid:#131923;--plate:#0e131be6;--rim:#ffffff26;--rim-low:#ffffff0d;
 --accent:#6b95e6;--accent-ink:#081019;--track:#6b95e62e;
 --good:#3fbf55;--warning:#f0b43c;--critical:#f07a7a;--cooldown:#7fa8ff;--series-1:#5a87db;--series-2:#25a184;
 --aura-a:.46;--lift:0 16px 48px #0000008c,0 2px 8px #00000059;
 --heat-0:#1a1f27;--heat-1:#1c3a63;--heat-2:#24528c;--heat-3:#2f6db8;--heat-4:#5a95e4;
 --ai-claude:#d95926;--ai-codex:#3987e5;--ai-gemini:#8040c8;
 --tk-input:#3987e5;--tk-output:#008300;--tk-cached:#9085e9;--tk-cache_write:#c98500;--tk-reasoning:#d55181;
}}
:root[data-theme=dark]{
 color-scheme:dark;
 --bg:#070a10;--ink:#e3e8ef;--muted:#9aa4b3;--faint:#6d7787;--line:#262d3a;
 --glass:#18202ea8;--glass-strong:#141b27e0;--glass-solid:#131923;--plate:#0e131be6;--rim:#ffffff26;--rim-low:#ffffff0d;
 --accent:#6b95e6;--accent-ink:#081019;--track:#6b95e62e;
 --good:#3fbf55;--warning:#f0b43c;--critical:#f07a7a;--cooldown:#7fa8ff;--series-1:#5a87db;--series-2:#25a184;
 --aura-a:.46;--lift:0 16px 48px #0000008c,0 2px 8px #00000059;
 --heat-0:#1a1f27;--heat-1:#1c3a63;--heat-2:#24528c;--heat-3:#2f6db8;--heat-4:#5a95e4;
 --ai-claude:#d95926;--ai-codex:#3987e5;--ai-gemini:#8040c8;
 --tk-input:#3987e5;--tk-output:#008300;--tk-cached:#9085e9;--tk-cache_write:#c98500;--tk-reasoning:#d55181;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.55 var(--sans);background:transparent;padding-inline:clamp(16px,3vw,40px);padding-block:18px 48px}
button,input{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}

/* ---------- 光暈：緩慢流動 ---------- */
.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aura-a);will-change:transform,opacity;
 animation:drift-a 86s ease-in-out infinite alternate}
.aura i:nth-child(1){width:48vw;height:48vw;left:-10vw;top:-14vw;background:var(--aura-1)}
.aura i:nth-child(2){width:38vw;height:38vw;right:-8vw;top:10vh;background:var(--aura-2);animation-name:drift-b;animation-duration:101s;animation-delay:-37s}
.aura i:nth-child(3){width:44vw;height:44vw;left:20vw;bottom:-20vw;background:var(--aura-3);animation-name:drift-c;animation-duration:113s;animation-delay:-61s}
.aura i:nth-child(4){width:26vw;height:26vw;right:12vw;bottom:-6vw;background:var(--aura-4);animation-name:drift-d;animation-duration:73s;animation-delay:-19s}
@keyframes drift-a{50%{transform:translate(9vw,7vh) scale(1.12);opacity:calc(var(--aura-a)*.8)}100%{transform:translate(4vw,-5vh) scale(.94)}}
@keyframes drift-b{50%{transform:translate(-10vw,9vh) scale(.9)}100%{transform:translate(-4vw,-6vh) scale(1.1);opacity:calc(var(--aura-a)*.75)}}
@keyframes drift-c{50%{transform:translate(-8vw,-10vh) scale(1.15);opacity:calc(var(--aura-a)*.85)}100%{transform:translate(7vw,-3vh) scale(.95)}}
@keyframes drift-d{0%{transform:scale(.95)}50%{transform:translate(-6vw,-8vh) scale(1.18)}100%{transform:translate(5vw,4vh) scale(1);opacity:calc(var(--aura-a)*.7)}}

/* ---------- 玻璃 ---------- */
.glass{position:relative;isolation:isolate;background:var(--glass);border:1px solid var(--rim-low);border-radius:20px;box-shadow:var(--lift);
 -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(140deg,var(--rim),transparent 40%,transparent 70%,var(--rim-low));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-solid)}}

/* ---------- 頂列 ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px 12px 18px;border-radius:999px}   /* 寬度跟著螢幕：不設上限 */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:20px}
.brand h1{font-size:1.05rem;letter-spacing:-.01em}
.fresh{margin:0;color:var(--muted);font:12.5px var(--mono);font-variant-numeric:tabular-nums}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--plate);cursor:pointer;font-size:.86rem;font-weight:600}
.pill:hover{border-color:var(--accent)}
.pill.icon{width:38px;padding:0;justify-content:center}
.pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button:focus-visible,input:focus-visible,.pill:focus-within{outline:2px solid var(--accent);outline-offset:2px}

main{margin:22px 0 0;display:grid;gap:18px}
main>*{min-width:0}   /* grid 子項目預設不縮到內容以下；少了這行，熱力圖的最小寬度會把整頁撐寬 */
.notice{margin:0;padding:12px 16px;border-radius:14px;font-size:.9rem}
.notice.sample{border-left:4px solid var(--warning)}
.summary{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.9rem;padding:0 6px}
.summary b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:18px;align-items:start}
.card{padding:18px 20px 20px;display:grid;gap:14px;min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.who{min-width:0}
.who h2{display:flex;align-items:center;gap:8px;font-size:1.02rem;overflow-wrap:anywhere}.who h2 .ai-logo{width:20px;height:20px}
.who p{margin:2px 0 0;color:var(--muted);font-size:.8rem}
.who .sub{min-height:1.5em;line-height:1.5}
/* 更新時間與方案同一列（方案靠右），下面一條橫線 */
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:1.6em;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted);font:12px var(--mono)}
.meta .plan{font-weight:650;white-space:nowrap}
/* 進度條：充足藍、≤30% 黃、低於 10% 與用完紅 */
.meter span.fill-warning{background:var(--warning)}
.meter span.fill-critical,.meter span.fill-cooldown{background:var(--critical)}
/* 最近一天的流量折線圖 */
.trend-bar{display:flex;justify-content:center;margin:-4px 0 -6px}   /* 同 NekOS 儀表板：只有箭頭、置中、在卡片最底 */
.trend-toggle{display:inline-flex;align-items:center;padding:2px 22px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.trend-toggle:hover{color:var(--ink)}
.trend-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.trend-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.trend{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.76rem;color:var(--muted)}
.legend b{color:var(--ink);font:650 12px var(--mono)}
.key{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.key-short{background:var(--series-1)}.key-weekly{background:var(--series-2)}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{font:10px var(--mono);fill:var(--faint)}
.chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .line-short{stroke:var(--series-1)}.chart .line-weekly{stroke:var(--series-2)}
.chart .dot.line-short{fill:var(--series-1);stroke:none}.chart .dot.line-weekly{fill:var(--series-2);stroke:none}
.chart .dot.mark{stroke:var(--plate);stroke-width:2}
.chart .cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.chart .tip{position:absolute;top:-6px;transform:translate(-50%,-100%);padding:4px 8px;border-radius:8px;background:var(--glass-solid);border:1px solid var(--line);box-shadow:var(--lift);font:12px/1.4 var(--mono);white-space:nowrap;pointer-events:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:.74rem;font-weight:650;background:var(--plate);border:1px solid var(--line);white-space:nowrap}
.chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chip.good{color:var(--good);border-color:currentColor}
.chip.warning{color:var(--warning);border-color:currentColor}
.chip.critical{color:var(--critical);border-color:currentColor}
.chip.cooldown{color:var(--cooldown);border-color:currentColor}
.chip.unknown{color:var(--muted)}
.plate{background:var(--plate);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.window{display:grid;gap:7px}
.window + .window{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.w-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.w-name{color:var(--muted);font-size:.8rem;font-weight:650}
.w-value{font:600 1.55rem/1 var(--mono);font-variant-numeric:tabular-nums}
.w-value small{font-size:.72rem;color:var(--muted);font-weight:500;margin-left:4px}
.meter{position:relative;height:10px;border-radius:999px;background:var(--track);overflow:hidden}
.meter .tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);opacity:.85}   /* 平均進度的刻度 */
.w-pace{color:var(--muted);font:12px/1.5 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 超前與落後同一種樣式、一律一行；太窄就截斷，全文在 title */
.meter span{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:3px;transition:width .6s ease}
/* 已用 % 固定在左欄不換行；重置倒數與時刻固定兩行靠右，位數變化不會擠亂版面 */
.w-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:start;color:var(--muted);font:12px var(--mono);font-variant-numeric:tabular-nums}
.w-used{white-space:nowrap}
.w-reset{text-align:right}
.w-reset>span{display:block}
/* 自動刷新：背景由左往右填滿＝這一輪已經過的時間 */
.pill.auto{position:relative;overflow:hidden;isolation:isolate;min-width:10.5em;justify-content:center;font-variant-numeric:tabular-nums}
.pill.auto>span:last-child{position:relative;z-index:1}
/* 不畫前緣線：縮放中的細線會落在小數像素上，看起來像閃爍 */
.auto-bar{position:absolute;inset:0;background:var(--track);transform-origin:left;transform:scaleX(0)}
@keyframes auto-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pill.auto[aria-pressed="false"]{color:var(--muted)}
.empty{margin:0;color:var(--muted);font-size:.86rem}

/* ---------- 設定面板 ---------- */
.drawer{position:fixed;top:14px;right:14px;bottom:14px;width:min(420px,calc(100vw - 28px));padding:18px 20px;overflow:auto;z-index:10;display:grid;align-content:start;gap:22px;background:var(--glass-strong)}
.drawer[hidden]{display:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer h3{font-size:.92rem;margin-bottom:6px}
.drawer label{display:block;margin:10px 0 4px;font-size:.8rem;color:var(--muted)}
.drawer input[type=text],.drawer input[type=password]{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--plate)}
.hint{margin:0 0 8px;color:var(--muted);font-size:.8rem}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.drawer label.pill{display:inline-flex;margin:0;color:var(--ink);font-size:.86rem}
.file input{position:absolute;width:1px;height:1px;opacity:0}
.tracker-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tracker-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--plate);border:1px solid var(--line)}
.tracker-list label{margin:0;flex:1;display:flex;align-items:center;gap:8px;color:var(--ink);font-size:.86rem;min-width:0}
.tracker-list .move{width:30px;height:30px;padding:0;justify-content:center}

/* 各模型用量（與 NekOS 儀表板同一份 usagebill.js 計算） */
.usage{margin-top:18px;padding:18px 20px}
.usage-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.usage-head h2{margin:0;font-size:1rem}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.period{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.range{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--muted)}.range label{display:flex;align-items:center;gap:6px}
.range input{height:32px;padding:0 8px;border-radius:10px;border:1px solid var(--line);background:var(--plate);color:var(--ink);font:12px var(--mono);color-scheme:light dark}
.seg .pill{height:32px}.seg .pill[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.usage-total{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px}.usage-total b{font-size:1.8rem}.usage-total span{color:var(--muted);font-size:.85rem}
/* 總 token 的組成長條：五類合起來的比例，段與段之間留 2px（與儀表板 tokenBreakdown 同樣的排法） */
.tk-bar{display:flex;gap:2px;height:10px;margin:0 0 8px;border-radius:5px;overflow:hidden}.tk-bar i{min-width:4px}
.tk-input{background:var(--tk-input);fill:var(--tk-input)}.tk-output{background:var(--tk-output);fill:var(--tk-output)}.tk-cached{background:var(--tk-cached);fill:var(--tk-cached)}
.tk-cache_write{background:var(--tk-cache_write);fill:var(--tk-cache_write)}.tk-reasoning{background:var(--tk-reasoning);fill:var(--tk-reasoning)}
/* 卡片展開後的 token 直條圖與模型表（仿儀表板） */
.tokens{display:grid;gap:6px;padding-top:10px}
/* 圖例是固定欄寬的格線：欄數只看卡片寬度，數字變長也不會把項目擠到別行；數字靠右對齊 */
.tokens .legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:2px 14px}
.tokens .legend span{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}.tokens .legend b{margin-left:auto}
.bars .hit{fill:transparent}.bars .hit:hover{fill:var(--track)}
.models{max-height:196px;overflow:auto;scrollbar-gutter:stable;scrollbar-width:thin;background:var(--glass-solid);border:1px solid var(--line);border-radius:10px}   /* 整塊實心底：和固定欄同色，不會一半透明 */
.models table{min-width:100%;border-collapse:separate;border-spacing:0;font:12px/1.5 var(--mono)}
.models th,.models td{white-space:nowrap;padding:3px 0 3px 10px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.models thead th{position:sticky;top:0;z-index:1;background:var(--glass-solid);border-top:0;color:var(--muted);font-weight:600}
.models th:first-child{position:sticky;left:0;z-index:2;background:var(--glass-solid);text-align:left;padding:3px 10px}
.models th:last-child,.models td:last-child{position:sticky;right:0;z-index:2;background:var(--glass-solid);padding-right:6px;font-weight:700}
.models thead th:first-child,.models thead th:last-child{z-index:3}
.usage-kinds{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 16px;margin:0 0 12px;padding:0;color:var(--muted);font-size:.85rem}.usage-kinds b{color:var(--ink)}
.usage-kinds li{display:flex;align-items:center;gap:6px;white-space:nowrap}.usage-kinds li b{margin-left:auto}.tk-key{width:9px;height:9px;border-radius:2px;display:inline-block}
.usage-plan{border-top:1px solid var(--line);padding:8px 0}
.usage-row{display:grid;grid-template-columns:minmax(0,1fr) 3.5em 5em 6em;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums}
.usage-row>span:not(:first-child){text-align:right}.usage-model{padding-left:14px;color:var(--muted);font-size:.86rem}.usage-model>span:first-child{overflow-wrap:anywhere}
.usage-share,.usage-calls{color:var(--muted);font-size:.82rem}
/* 各模型用量的品牌圖示與佔比長條（與儀表板同樣的排法） */
.ai-claude{--ai:var(--ai-claude)}.ai-codex{--ai:var(--ai-codex)}.ai-gemini{--ai:var(--ai-gemini)}.ai-other{--ai:var(--ai-other)}
.ai-logo{width:18px;height:18px;flex:none;fill:var(--ai)}.usage-model .ai-logo{width:12px;height:12px}
.usage-name{display:flex;align-items:center;gap:8px;min-width:0}.usage-name>span{overflow-wrap:anywhere}
.usage-bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--track);overflow:hidden;margin:4px 0 2px}
.usage-bar i{display:block;height:100%;border-radius:2px;background:var(--ai)}
/* 熱力圖與統計（與 NekOS 儀表板同一套分級：usagebill.js 的 level） */
.heat{margin-top:0;padding:18px 20px}
#heat-grid{overflow-x:auto;scrollbar-width:thin}
.heat svg{display:block}   /* 尺寸由 hub.js 依容器寬度算：格子撐滿整列；太窄時格子保底、改左右捲動 */
.heat .cell{cursor:pointer}.heat .cell:hover,.heat .cell:focus{stroke:var(--ink);stroke-width:1.5;outline:none}
.heat .cell.on{stroke:var(--accent);stroke-width:2}
.heat .axis{fill:var(--muted);font:11px var(--mono)}
/* 3D 熱力圖（heat3d.js 投影，同儀表板）：側面調暗，選取的那天描邊 */
.heat .heat3d{width:100%;height:auto;max-height:min(60vh,640px);min-width:640px;cursor:grab;touch-action:none}
.heat3d.dragging{cursor:grabbing}.heat3d.dragging .bar{pointer-events:none}
.heat3d:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.heat3d .bar{cursor:pointer}.heat3d .bar polygon{stroke:var(--glass-solid);stroke-width:.5;stroke-linejoin:round}
.heat3d .bar .side-a{filter:brightness(.8)}.heat3d .bar .side-b{filter:brightness(.64)}
.heat3d .bar:hover polygon{stroke:var(--ink);stroke-width:1}.heat3d .bar.on polygon{stroke:var(--accent);stroke-width:1.5}
.h0{fill:var(--heat-0)}.h1{fill:var(--heat-1)}.h2{fill:var(--heat-2)}.h3{fill:var(--heat-3)}.h4{fill:var(--heat-4)}
.heat-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:8px;color:var(--muted);font:12px var(--mono)}
.heat-key{display:flex;align-items:center;gap:3px}.heat-key i{width:10px;height:10px;border-radius:2px;display:inline-block}
.k0{background:var(--heat-0)}.k1{background:var(--heat-1)}.k2{background:var(--heat-2)}.k3{background:var(--heat-3)}.k4{background:var(--heat-4)}
.stats{padding:18px 20px}.stats h2{margin:0 0 10px;font-size:1rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px}
/* 每格上面小標、下面數字：標籤不折行，數字靠左對齊在同一條線上 */
.stat{display:grid;align-content:start;gap:4px;padding:10px 14px;border-radius:12px;background:var(--plate);border:1px solid var(--line);color:var(--muted);font-size:.8rem;white-space:nowrap}
.stat b{color:var(--ink);font:600 1.15rem/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
.stat small{font:11px var(--mono)}
/* 帳單（內容與 PNG 由共用的 usagereceipt.js 產生；熱感紙外觀同 NekOS 儀表板） */
.bill-panel{width:min(440px,calc(100% - 24px));max-height:calc(100vh - 32px);overflow:auto;padding:16px;color:var(--ink)}
.bill-panel::backdrop{background:#0008}
/* 標頭兩列：標題＋語言、儲存、關閉；期間（含自定義起訖）獨佔第二列 */
.bill-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px}.bill-head h2{margin:0;font-size:1rem}
.bill-head .period{grid-column:1/-1;padding-top:4px}.bill-head h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){#bill-save-text{display:none}}   /* 手機寬度只留下載圖示，標題不折行 */
.lang-toggle{padding:3px;gap:2px}.lang-toggle span{display:grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:999px;font-size:.8rem;color:var(--muted)}
.lang-toggle span.on{background:var(--accent);color:var(--accent-ink)}
.bill-head .pill{height:32px}
.receipt{--paper-ink:#1c1b19;--paper-muted:#6b665d;margin:16px auto 8px;width:min(340px,100%);padding:22px 20px 30px;background:#f6f3ec;color:var(--paper-ink);font:13px/1.55 var(--mono);
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
 mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.receipt hr{border:0;border-top:1px dashed #b9b3a7;margin:12px 0}
.r-head{text-align:center;margin-bottom:12px}.r-head h3{margin:0;font-size:22px;letter-spacing:.08em}.r-head p{margin:6px 0 0;font-size:13px;letter-spacing:.12em;color:var(--paper-muted)}
.r-line{display:flex;align-items:center;gap:8px}.r-line>span:last-child{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.r-cols{color:var(--paper-muted);font-size:12px}.r-plan{margin-top:6px;font-weight:700}.r-plan .ai-logo{fill:var(--paper-ink);width:15px;height:15px}.r-model{padding-left:22px;font-size:12px}
.r-total{display:grid;justify-items:center;gap:2px;text-align:center}.r-total>span:first-child{letter-spacing:.2em;font-size:12px}.r-total b{font-size:36px;line-height:1.15}.r-total>span:last-child{font-size:12px;color:var(--paper-muted)}
.r-empty{margin:8px 0;text-align:center;color:var(--paper-muted)}
/* 登入頁（密碼鎖） */
.login-main{min-height:100vh;display:grid;place-items:center;padding:16px}
.login{display:grid;gap:10px;width:min(340px,100%);padding:28px 24px}
.login h1{margin:0 0 6px;font-size:1.1rem}
.login input{height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--plate);color:var(--ink);font:inherit}
.login .pill{justify-content:center}
@media (max-width:620px){.bar{border-radius:20px}.brand h1{font-size:.98rem}
 .usage-row{grid-template-columns:minmax(0,1fr) 4.5em 4.5em}.usage-share{display:none}   /* 窄螢幕拿掉佔比欄，名稱才有空間 */
 .usage-row>span:nth-child(2):empty{display:none}}
@media (prefers-reduced-motion:reduce){.aura i{animation:none}.meter span{transition:none}}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){.aura,.glass::before{display:none}.meter span{background:Highlight}}