:root{--color-canvas: #090d15;--color-surface: #12161f;--color-surface-elevated: #1b2230;--color-glass-fill: rgba(30, 38, 56, .42);--color-glass-tint: rgba(20, 27, 40, .42);--color-glass-border: rgba(255, 255, 255, .12);--color-glass-border-highlight: rgba(255, 255, 255, .24);--color-border: #232b3a;--color-border-highlight: #2f3b50;--color-text-primary: #e6e9ef;--color-text-dim: #8b94a7;--color-text-muted: #5a6478;--color-accent: #2b7fff;--color-success: #3fb950;--color-warning: #d29922;--color-error: #f85149;--color-dot-grid: #33405a;--font-sans: "Noto Sans Thai", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;--radius-cards: 12px;--radius-panels: 12px;--radius-buttons: 7px;--radius-badges: 6px;--radius-pills: 999px;--shadow-glass-card: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .5);--shadow-glass-panel: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 30px rgba(0, 0, 0, .45);--shadow-solid-card: inset 0 1px 0 rgba(255, 255, 255, .03), 0 6px 18px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html{font-size:125%}body{margin:0;padding:0;font-family:var(--font-sans);background-color:var(--color-canvas);color:var(--color-text-primary);line-height:1.5;font-weight:400;font-size:.75rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{margin:0;color:var(--color-text-primary);font-family:var(--font-sans);font-weight:600}:focus-visible{outline:1px solid var(--color-glass-border-highlight);outline-offset:2px}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,var(--color-dot-grid) 1.2px,transparent 1.2px);background-size:22px 22px;background-position:0 0}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(1200px 820px at 16% 10%,rgba(43,127,255,.22),transparent 60%),radial-gradient(1100px 760px at 84% 90%,rgba(155,93,229,.18),transparent 60%),radial-gradient(960px 640px at 62% 26%,rgba(63,185,80,.12),transparent 55%)}.dashboard-container{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:24px}.skip-link{position:absolute;top:-40px;left:8px;z-index:100;padding:8px 12px;background:var(--color-accent);color:#fff;font-size:.75rem;font-weight:600;border-radius:var(--radius-buttons);text-decoration:none;transition:top .15s ease}.skip-link:focus{top:8px;outline:2px solid var(--color-text-primary);outline-offset:2px}.dashboard-main{outline:none}.dashboard-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 18px;margin-bottom:24px;background:var(--color-glass-tint);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--color-glass-border);border-bottom:1px solid var(--color-border-highlight);border-radius:var(--radius-panels);box-shadow:var(--shadow-glass-panel)}.dashboard-header__main{display:flex;flex-direction:column;gap:16px;min-width:0}.dashboard-header__title h1{margin:0;font-size:.8125rem;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--color-text-primary)}.dashboard-header__meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.meta-label{font-family:var(--font-sans);font-size:.625rem;font-weight:600;letter-spacing:.08em;color:var(--color-text-dim);text-transform:uppercase}.meta-value{font-size:.6875rem;font-weight:400;color:var(--color-text-primary)}.filter-bar{margin:0;padding:0;background:none;border:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.filter-field{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.filter-field__spacer{flex:1}.filter-field__label{font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.08em;color:var(--color-text-dim);text-transform:uppercase}.filter-field__select{-moz-appearance:none;appearance:none;-webkit-appearance:none;font-family:var(--font-sans);font-size:.75rem;font-weight:400;color:var(--color-text-primary);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-buttons);padding:6px 10px;line-height:1.4;min-width:200px;box-sizing:border-box}.filter-field__select:focus-visible{outline:1px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}.filter-hint{margin:4px 0 0;font-family:var(--font-sans);font-size:.625rem;color:var(--color-text-dim);line-height:1.3}.filter-apply{font-family:var(--font-sans);font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:var(--color-text-primary);background:#2b7fff2e;border:1px solid rgba(43,127,255,.45);border-radius:var(--radius-buttons);padding:7px 18px;line-height:1.3;cursor:pointer}.filter-apply:hover{background:#2b7fff47;border-color:var(--color-accent)}.filter-apply:focus-visible{outline:1px solid var(--color-accent);outline-offset:2px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.summary-card{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--color-glass-fill);-webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);border:1px solid var(--color-glass-border);border-radius:var(--radius-cards);padding:10px;box-shadow:var(--shadow-glass-card)}.summary-card__label{font-family:var(--font-sans);font-size:.625rem;font-weight:600;letter-spacing:.08em;color:var(--color-text-dim);text-transform:uppercase}.summary-card__value{font-family:var(--font-sans);font-size:.9375rem;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--color-text-primary);font-variant-numeric:tabular-nums}.summary-card__delta{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.02em;line-height:1.3;font-variant-numeric:tabular-nums;padding:1px 5px;border-radius:var(--radius-badges);border:1px solid transparent}.summary-card__delta--up{color:var(--color-success);background:#3fb9501f;border-color:#3fb95059}.summary-card__delta--down{color:var(--color-error);background:#f851491f;border-color:#f8514959}.chart-region,.table-region{background:var(--color-glass-fill);-webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);border:1px solid var(--color-glass-border);border-radius:var(--radius-cards);padding:16px;margin-bottom:24px;box-shadow:var(--shadow-glass-card)}.region-title{margin:0 0 16px;font-size:.8125rem;font-weight:700;line-height:1.3;color:var(--color-text-primary)}.region-placeholder{display:flex;align-items:center;justify-content:center;min-height:160px;color:var(--color-text-muted);font-size:.75rem;background-color:transparent;border:1px dashed var(--color-glass-border);border-radius:var(--radius-cards)}.daily-usage-chart{width:100%}.chart-empty{display:flex;align-items:center;justify-content:center;min-height:160px;color:var(--color-text-muted);font-size:.75rem;border:1px dashed var(--color-glass-border);border-radius:var(--radius-cards)}.chart-tooltip{background:var(--color-glass-tint);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-glass-border);border-radius:var(--radius-cards);padding:8px 10px;font-size:.6875rem;color:var(--color-text-primary)}.chart-tooltip__label{font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.04em;color:var(--color-text-dim);margin-bottom:4px}.chart-tooltip__item{display:flex;align-items:center;gap:6px;line-height:1.4}.chart-tooltip__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.chart-tooltip__name{color:var(--color-text-dim)}.chart-tooltip__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-primary);margin-left:auto}.key-usage-table{width:100%}.key-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.key-usage-table table{width:100%;border-collapse:collapse;font-size:.6875rem;font-variant-numeric:tabular-nums}.key-usage-table th{text-align:left;font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.06em;color:var(--color-text-dim);text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--color-border-highlight);white-space:nowrap}.key-usage-table td{padding:8px 10px;color:var(--color-text-primary);border-bottom:1px solid var(--color-border);white-space:nowrap}.key-usage-table tbody tr:last-child td{border-bottom:none}.key-usage-table td[data-col=alias]{font-family:var(--font-mono);color:var(--color-text-primary);display:flex;align-items:center;gap:8px}.key-usage-table td[data-col=reset]{font-family:var(--font-mono);color:var(--color-text-dim);white-space:nowrap}.key-usage-table td[data-col=spend]{min-width:180px}.key-usage-table th[aria-sort]{position:relative}.key-sort-btn{font:inherit;font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.06em;color:var(--color-text-dim);text-transform:uppercase;background:transparent;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.key-sort-btn:hover{color:var(--color-text-primary)}.key-sort-btn:focus-visible{outline:1px solid var(--color-accent);outline-offset:2px;border-radius:2px}.key-usage-table th[aria-sort=ascending] .key-sort-btn:after{content:" ▲";font-size:.5rem;color:var(--color-accent)}.key-usage-table th[aria-sort=descending] .key-sort-btn:after{content:" ▼";font-size:.5rem;color:var(--color-accent)}.key-spend{display:flex;flex-direction:column;gap:5px}.key-spend__text{font-family:var(--font-mono);font-size:.6875rem;font-variant-numeric:tabular-nums;color:var(--color-text-primary);white-space:nowrap}.key-spend__budget{color:var(--color-text-dim)}.key-spend__budget--none{font-style:italic;color:var(--color-text-muted)}.key-usage-bar{width:100%;height:4px;background:var(--color-surface-elevated);border-radius:2px;overflow:hidden}.key-usage-bar__fill{height:100%;border-radius:2px;transition:width .15s ease}.key-usage-bar--ok .key-usage-bar__fill{background:var(--color-success)}.key-usage-bar--warn .key-usage-bar__fill{background:var(--color-warning)}.key-usage-bar--danger .key-usage-bar__fill{background:var(--color-error)}.key-usage-bar--none .key-usage-bar__fill{background:var(--color-text-muted)}.key-status{display:inline-flex;align-items:center;font-size:.625rem;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-badges);border:1px solid transparent;text-transform:capitalize}.key-status--active{color:var(--color-success);background:#3fb9501f;border-color:#3fb95059}.key-status--expired{color:var(--color-warning);background:#d299221f;border-color:#d2992259}.key-status--blocked{color:var(--color-text-muted);background:#5a64781f;border-color:#5a647859}.key-table-empty{display:flex;align-items:center;justify-content:center;min-height:160px;color:var(--color-text-muted);font-size:.75rem;border:1px dashed var(--color-glass-border);border-radius:var(--radius-cards)}.key-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:8px 4px;flex-wrap:wrap}.key-pagination__info{font-family:var(--font-mono);font-size:.65rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.key-pagination__controls{display:flex;align-items:center;gap:8px}.key-pagination__btn{font-family:var(--font-sans);font-size:.6875rem;font-weight:600;color:var(--color-text-primary);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-buttons);padding:5px 13px;line-height:1.3;cursor:pointer}.key-pagination__btn:hover:not(:disabled){border-color:var(--color-border-highlight)}.key-pagination__btn:focus-visible{outline:1px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}.key-pagination__btn:disabled{opacity:.45;cursor:not-allowed}.key-pagination__page{font-family:var(--font-mono);font-size:.6875rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.scenario-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;background:var(--color-glass-tint);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-glass-border);border-radius:var(--radius-panels)}.scenario-bar__label{font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.08em;color:var(--color-text-dim);text-transform:uppercase}.scenario-bar__select{-moz-appearance:none;appearance:none;-webkit-appearance:none;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text-primary);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-buttons);padding:5px 10px;line-height:1.3}.scenario-bar__select:focus-visible{outline:1px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}.async-loading{display:flex;flex-direction:column;gap:16px;padding:16px;background:var(--color-glass-fill);-webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);border:1px solid var(--color-glass-border);border-radius:var(--radius-cards);box-shadow:var(--shadow-glass-card)}.async-loading__label{font-size:.6875rem;font-weight:600;color:var(--color-text-dim);letter-spacing:.04em}.async-skeleton-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.async-skeleton{border-radius:var(--radius-cards);background:linear-gradient(90deg,#ffffff0a,#ffffff17,#ffffff0a);background-size:200% 100%;animation:async-shimmer 1.4s linear infinite}.async-skeleton--card{height:84px}.async-skeleton--chart{height:220px}.async-skeleton--table{height:180px}@keyframes async-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.async-skeleton{animation:none}}.async-panel{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--color-glass-fill);-webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);border:1px solid var(--color-glass-border);border-radius:var(--radius-cards);box-shadow:var(--shadow-glass-card)}.async-panel--error,.async-panel--denied{border-color:#f8514966}.async-panel__title{font-size:.8125rem;font-weight:700;color:var(--color-text-primary)}.async-panel__body{font-size:.75rem;color:var(--color-text-dim);line-height:1.5}.async-panel__hint{font-size:.6875rem;color:var(--color-text-muted)}.async-retry{align-self:flex-start;font-family:var(--font-sans);font-size:.6875rem;font-weight:600;color:var(--color-text-primary);background:#2b7fff2e;border:1px solid rgba(43,127,255,.45);border-radius:var(--radius-buttons);padding:7px 18px;cursor:pointer}.async-retry:hover{background:#2b7fff47;border-color:var(--color-accent)}.async-retry:focus-visible{outline:1px solid var(--color-accent);outline-offset:2px}.async-stale{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;background:#d299221f;border:1px solid rgba(210,153,34,.35);border-radius:var(--radius-panels)}.async-stale__dot{width:8px;height:8px;border-radius:50%;background:var(--color-warning);box-shadow:0 0 0 3px #d2992233;flex-shrink:0}.async-stale__text{font-size:.6875rem;color:var(--color-text-primary)}@media (max-width: 767px){.dashboard-container{padding:16px}.dashboard-header{padding:12px 14px;gap:10px}.dashboard-header__main{gap:12px}.summary-grid{grid-template-columns:repeat(2,1fr)}.dashboard-header__meta{align-items:flex-start}.async-skeleton-row{grid-template-columns:repeat(2,1fr)}.chart-region,.table-region{padding:12px}.scenario-bar{padding:8px 10px;flex-wrap:wrap}}@media (max-width: 480px){.dashboard-container{padding:12px}.summary-grid{grid-template-columns:1fr}.filter-field{flex-wrap:wrap}.filter-field__select{min-width:0;width:100%}.filter-field__spacer{display:none}}@media (max-width: 767px){.filter-apply,.async-retry,.key-pagination__btn{min-height:36px;padding-top:9px;padding-bottom:9px}.key-sort-btn{min-height:36px;padding:8px 4px}}