:root{--bg: #0a0a0f;--surface: #12121a;--surface-hover: #1a1a28;--border: #2a2a3a;--text: #e0e0e8;--text-dim: #8888a0;--accent: #7c5cff;--accent-glow: rgba(124, 92, 255, .3);--success: #4ade80;--warning: #fbbf24;--danger: #ef4444;--radius: 12px;--radius-sm: 8px;--transition: .2s ease;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", Consolas, monospace}.version-tag{display:inline-block;margin-left:.5rem;padding:.1em .5em;font-family:var(--font-mono);font-size:.55em;font-weight:500;letter-spacing:.02em;color:var(--text-dim);-webkit-text-fill-color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:999px;vertical-align:middle;user-select:all}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark}body{font-family:var(--font);background-color:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:600;letter-spacing:-.01em}a{color:var(--accent);text-decoration:none;transition:color var(--transition)}a:hover{color:#9b82ff}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}@media(min-width:640px){.container{padding:0 24px}}@media(min-width:1024px){.container{padding:0 32px}}.dashboard-header{padding:24px 0 16px;border-bottom:1px solid var(--border);margin-bottom:24px}.dashboard-header h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-header .subtitle{font-size:.8rem;color:var(--text-dim);margin-top:4px;font-family:var(--font-mono)}@media(min-width:640px){.dashboard-header{padding:32px 0 20px;margin-bottom:32px}.dashboard-header h1{font-size:1.75rem}.dashboard-header .subtitle{font-size:.85rem}}.usage-overview{margin-bottom:18px;padding:14px;background:color-mix(in srgb,var(--surface) 88%,#000 12%);border:1px solid var(--border);border-radius:var(--radius)}.overview-loading{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim)}.overview-row{display:flex;flex-wrap:wrap;gap:8px}.overview-main{align-items:stretch}.overview-chip{display:flex;flex-direction:column;justify-content:center;min-width:96px;padding:8px 10px;background:#ffffff09;border:1px solid rgba(255,255,255,.055);border-radius:var(--radius-sm)}.overview-chip:first-child{flex:1 1 260px}.overview-label{font-size:.66rem;color:var(--text-dim);font-family:var(--font-mono)}.overview-value{margin-top:2px;font-size:.9rem;font-weight:650;color:var(--text)}.overview-detail{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}.overview-note{flex:1 1 320px;font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);line-height:1.5}.viz-container{width:100%;border-radius:var(--radius);overflow:hidden;margin-bottom:24px;border:1px solid var(--border);background:var(--surface);position:relative}.viz-container canvas{display:block}@media(min-width:640px){.viz-container{margin-bottom:32px}}.cards-grid{display:grid;grid-template-columns:1fr;gap:12px;padding-bottom:32px;align-items:start}@media(min-width:480px){.cards-grid{grid-template-columns:repeat(2,1fr);gap:16px}}@media(min-width:768px){.cards-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr)}}.usage-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:all var(--transition);position:relative;overflow:hidden}.usage-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--model-color, var(--accent));opacity:.6;transition:opacity var(--transition)}.usage-card:hover{background:var(--surface-hover);border-color:color-mix(in srgb,var(--model-color, var(--accent)) 30%,var(--border));box-shadow:0 4px 24px #0000004d,0 0 40px color-mix(in srgb,var(--model-color, var(--accent)) 8%,transparent);transform:translateY(-2px)}.usage-card:hover:before{opacity:1}.card-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}.model-dot{width:10px;height:10px;border-radius:50%;background:var(--model-color, var(--accent));box-shadow:0 0 8px color-mix(in srgb,var(--model-color, var(--accent)) 50%,transparent);flex-shrink:0;animation:pulse-dot 3s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--model-color, var(--accent)) 50%,transparent)}50%{opacity:.7;box-shadow:0 0 12px color-mix(in srgb,var(--model-color, var(--accent)) 70%,transparent)}}.model-name{flex:1 1 auto;min-width:0;font-size:.95rem;font-weight:600;color:var(--model-color, var(--text));letter-spacing:.01em}.usage-data{font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:var(--text);padding:12px;background:#0003;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.04);white-space:pre-wrap;word-break:break-word;margin-bottom:14px}.usage-row{margin-bottom:11px}.usage-row:last-child{margin-bottom:0}.usage-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}.usage-row-label{font-size:.75rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.usage-row-detail{font-family:var(--font-mono);font-size:.78rem;font-weight:600;white-space:nowrap;color:var(--text)}.usage-row-detail.low{color:var(--success)}.usage-row-detail.mid{color:var(--warning)}.usage-row-detail.high{color:var(--danger)}.progress-bar{width:100%;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden;margin-bottom:4px}.progress-fill{height:100%;border-radius:3px;background:var(--model-color, var(--accent));transition:width .6s ease;position:relative}.progress-fill.low{opacity:.7}.progress-fill.mid{opacity:.85}.progress-fill.high{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--model-color, var(--accent)) 50%,transparent)}.usage-row-meta{margin-top:4px;font-size:.68rem;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.01em}.usage-note{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.05);font-size:.68rem;color:var(--text-dim);font-family:var(--font-mono);line-height:1.6;white-space:normal;word-break:break-word}.usage-card.state-stale,.usage-card.state-degraded{border-style:dashed}.usage-card.state-unused{opacity:.86}.usage-card.state-hot{border-color:color-mix(in srgb,var(--danger) 50%,var(--border))}.usage-card.state-stale:before{background:var(--text-dim)}.usage-card.state-degraded:before{background:var(--warning)}.usage-card.state-hot:before{background:var(--danger)}.usage-card.state-degraded .usage-note,.usage-card.state-stale .usage-note{color:var(--warning)}.plan-badge{display:inline-block;font-size:.65rem;font-family:var(--font-mono);padding:2px 8px;border-radius:4px;background:#ffffff0f;color:var(--text-dim);margin-left:auto}.model-tag{font-size:.62rem;font-family:var(--font-mono);color:var(--text-dim);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}.card-state{display:inline-block;font-size:.62rem;font-family:var(--font-mono);padding:2px 7px;border-radius:999px;color:var(--text);background:#ffffff0f;border:1px solid rgba(255,255,255,.08);white-space:nowrap}.card-state.state-active{color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,transparent)}.card-state.state-low,.card-state.state-unused{color:#93c5fd;border-color:color-mix(in srgb,#93c5fd 28%,transparent)}.card-state.state-hot{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}.card-state.state-watch,.card-state.state-stale,.card-state.state-degraded{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}.stats-row{display:flex;gap:12px;font-size:.72rem;font-family:var(--font-mono);color:var(--text-dim);padding-top:8px;border-top:1px solid rgba(255,255,255,.04);margin-top:8px}.stats-row span{display:flex;align-items:center;gap:4px}.card-footer{font-size:.75rem;color:var(--text-dim);display:flex;align-items:center;gap:6px}.card-footer:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);opacity:.7}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px}.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:.85rem;color:var(--text-dim);font-family:var(--font-mono)}.error-container{text-align:center;padding:40px 20px;color:var(--warning);font-family:var(--font-mono);font-size:.85rem}.status-bar{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-dim);font-family:var(--font-mono)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse-dot 2s ease-in-out infinite}.status-dot.error{background:var(--danger);animation:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a3a4a}*{scrollbar-width:thin;scrollbar-color:var(--border) var(--bg)}::selection{background:var(--accent-glow);color:var(--text)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease forwards}.usage-card{animation:fadeIn .4s ease forwards;animation-delay:calc(var(--card-index, 0) * .06s);opacity:0}.history-section{margin:32px 0 48px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.history-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:16px}.history-title{font-size:1.1rem;font-weight:600;color:var(--text);margin-right:auto}.history-subtitle{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--text-dim);margin-left:6px}.history-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.range-buttons,.window-toggle{display:inline-flex;background:#00000040;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px}.range-btn,.window-btn{appearance:none;background:transparent;border:none;color:var(--text-dim);font-family:inherit;font-size:.8rem;font-weight:500;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all var(--transition)}.range-btn:hover,.window-btn:hover{color:var(--text);background:#ffffff0a}.range-btn.active,.window-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}.custom-range{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;margin-top:4px;padding:10px 12px;background:#0003;border-radius:var(--radius-sm);border:1px solid var(--border)}.custom-range[hidden]{display:none}.custom-range label{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-dim)}.custom-range input[type=date]{appearance:none;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-mono);font-size:.8rem;padding:4px 8px;color-scheme:dark}.custom-range button{border:1px solid var(--accent);background:var(--accent);color:#fff}.chart-wrap{position:relative;width:100%;min-height:280px}.chart-loading{display:flex;align-items:center;justify-content:center;height:280px;color:var(--text-dim);font-size:.85rem}.history-chart{display:block;width:100%;height:auto;font-family:var(--font-mono)}.history-chart .grid-line{stroke:#ffffff0d;stroke-width:1}.history-chart .grid-line.bold{stroke:#ffffff1f}.history-chart .grid-line.v{stroke:#ffffff08}.history-chart .axis-label{fill:var(--text-dim);font-size:10px}.history-chart .series-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.85}.history-chart .series-point{stroke:var(--bg);stroke-width:1.2;opacity:.9}.history-chart .hover-line{stroke:#ffffff4d;stroke-width:1;stroke-dasharray:3 3;pointer-events:none}.history-chart .hover-dot{stroke:var(--bg);stroke-width:1.5;pointer-events:none}.chart-tooltip{position:absolute;pointer-events:none;background:#0a0a0ff2;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-size:.75rem;color:var(--text);backdrop-filter:blur(8px);box-shadow:0 4px 16px #00000080;min-width:140px;z-index:10}.chart-tooltip .tt-time{font-family:var(--font-mono);color:var(--text-dim);font-size:.7rem;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--border)}.chart-tooltip .tt-row{display:flex;align-items:center;gap:6px;margin:2px 0}.chart-tooltip .tt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.chart-tooltip .tt-val{margin-left:auto;font-family:var(--font-mono);color:var(--text);font-weight:600}.chart-legend{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.legend-item{appearance:none;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:.75rem;color:var(--text);font-family:inherit;cursor:pointer;transition:all var(--transition)}.legend-item:hover{background:#ffffff0a}.legend-item.off{opacity:.4;text-decoration:line-through}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}@media(max-width:480px){.history-section{padding:14px}.history-controls{width:100%}.range-btn,.window-btn{padding:5px 9px;font-size:.75rem}}