:root, [data-theme=dark] {
  --bg-secondary:#151412; --bg-primary:#1d1b18; --bg-tertiary:#262320; --bg-hover:#2e2a26;
  --bg-quinary:#191714; --bg-error-light:#c657462e; --floating-surface:#2a2723;
  --text-primary:#f6f4f1; --text-secondary:#c9c3bb; --text-tertiary:#9c958d; --text-quaternary:#6f6962;
  --text-muted:var(--text-tertiary); --border-color:#3a3530; --border-primary:#4a453f; --border-hover:#5a544d;
  --primary-color:#8b8680; --primary-hover:#9a948e; --primary-active:#a6a099; --primary-contrast:#fff;
  --success-color:#10b981; --quota-medium-color:#ffd862; --warning-color:#c65746; --error-color:#c65746;
  --amber-color:#f59e0b; --amber-text:#fcd34d; --accent:var(--amber-color);
  --viz-success:#0fae78; --viz-failure:#cf4b3a; --radius-md:8px;
  --ease-out-strong:cubic-bezier(.23, 1, .32, 1);
  --font-sans:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  --font-mono:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1300px; margin: 0 auto; padding: 24px; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.titleWrap h1 { font-size: 24px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 12px; }
.titleWrap p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.note { color: var(--text-tertiary); font-size: 12px; margin: 0 0 16px; max-width: 72ch; }
.btn {
  cursor: pointer; background-color: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 8px; justify-content: center; align-items: center;
  gap: 8px; padding: 10px 14px; font-weight: 600; font-family: var(--font-sans); font-size: 13px;
  transition: all .15s; display: inline-flex;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.btn:focus-visible { outline: 2px solid var(--amber-color); outline-offset: 2px; }
.tabNav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.tabBtn {
  background: none; border: none; color: var(--text-secondary); font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer;
  transition: all 0.15s ease; display: flex; align-items: center; gap: 8px;
}
.tabBtn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.tabBtn.active, .tabBtn[aria-selected="true"] { background: var(--bg-tertiary); color: var(--amber-color); font-weight: 600; }
.tabBtn:focus-visible { outline: 2px solid var(--amber-color); outline-offset: 2px; }
.panel { display: none; }
.panel.on { display: block; }
h2 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.card { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); }
.fileName { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.body { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.antigravityQuotaGroup { display: flex; flex-direction: column; gap: 8px; }
.antigravityQuotaGroupHeader { margin-bottom: 2px; }
.antigravityQuotaGroupTitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.quotaRow { display: flex; flex-direction: column; gap: 4px; }
.quotaRowHeader { display: flex; justify-content: space-between; align-items: baseline; }
.quotaModel { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.quotaMeta { display: flex; gap: 8px; font-size: 12px; font-family: var(--font-mono); flex-wrap: wrap; }
.quotaPercent { font-weight: 600; color: var(--text-primary); }
.quotaReset { color: var(--text-tertiary); }
.quotaBar { height: 6px; background-color: var(--bg-hover); border-radius: 3px; overflow: hidden; width: 100%; }
.quotaBarFill { height: 100%; border-radius: 3px; transition: width 0.3s var(--ease-out-strong); }
.quotaSuccess { background-color: var(--viz-success); }
.quotaMedium { background-color: var(--quota-medium-color); }
.quotaFailure { background-color: var(--viz-failure); }
.errorStrip { background-color: rgba(207, 75, 58, 0.1); border-left: 3px solid var(--viz-failure); color: var(--text-primary); padding: 10px 14px; font-size: 12px; border-radius: 0 4px 4px 0; }
.dataTable { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.dataTable th, .dataTable td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.dataTable th { background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.dataTable tr:last-child td { border-bottom: none; }
.dataTable tr:hover td { background: var(--bg-hover); }
.numCol { font-family: var(--font-mono); }
iframe.embed { width: 100%; height: 100%; min-height: inherit; border: 0; display: block; overflow: hidden; background: var(--bg-secondary); }
.detail { color: var(--text-tertiary); font-size: 12px; }
.line { margin: 8px 0 0; color: var(--text-tertiary); font-size: 12px; }
.muted { color: var(--text-tertiary); }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); margin-left: 6px; }
.metricBanners { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.metricCard { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; }
.metricLabel { font-size: 11px; color: var(--text-tertiary); }
.metricValue { font-size: 20px; font-weight: 650; margin-top: 2px; }
.metricValue.accent { color: var(--accent); }
.metricValue.ok { color: var(--viz-success); }
.metricSub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
#cpa-page { min-width: 0; }
.cpa-spacer { flex: 1; }
.cpa-btn { text-decoration: none; }
.cpa-btn.primary { background: var(--amber-color); border-color: var(--amber-color); color: var(--bg-secondary); }
.cpa-btn.primary:hover { background: var(--amber-text); }
.cpa-btn.danger { background: var(--bg-error-light); border-color: var(--error-color); }
.cpa-btn:disabled { opacity: .5; cursor: not-allowed; }
.cpa-btn.small { padding: 5px 9px; font-size: 12px; }
.cpa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.cpa-card { min-width: 0; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.cpa-card h2, .cpa-card h3 { margin: 0 0 12px; }
.cpa-card p, .cpa-modal p { margin-bottom: 12px; }
.cpa-login { max-width: 600px; margin: 48px auto; padding: 24px; }
.cpa-stat { font-size: 25px; font-weight: 700; }
.cpa-muted, .cpa-field small { color: var(--text-secondary); }
.cpa-warn { color: var(--amber-text); }
.cpa-bad { color: var(--error-color); }
.cpa-ok { color: var(--success-color); }
.cpa-error, .cpa-notice { padding: 12px; border-radius: var(--radius-md); margin: 12px 0; border: 1px solid; }
.cpa-error { background: var(--bg-error-light); border-color: var(--error-color); }
.cpa-notice { background: var(--bg-primary); border-color: var(--success-color); }
.cpa-empty { padding: 24px; text-align: center; color: var(--text-secondary); }
.cpa-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cpa-row > * { min-width: 0; }
.cpa-input, .cpa-select { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 9px; min-width: 180px; max-width: 100%; font: inherit; }
.cpa-input.narrow { min-width: 120px; }
.cpa-input:focus-visible, .cpa-select:focus-visible, .cpa-models input:focus-visible { outline: 2px solid var(--amber-color); outline-offset: 2px; }
.cpa-table { width: 100%; border-collapse: collapse; }
.cpa-table th, .cpa-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.cpa-table th { color: var(--text-secondary); background: var(--bg-tertiary); }
.cpa-pill { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--bg-tertiary); font-size: 12px; overflow-wrap: anywhere; }
.cpa-pill.good { color: var(--success-color); }
.cpa-pill.warn { color: var(--amber-text); }
.cpa-pill.bad { color: var(--error-color); }
.cpa-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 6px; max-height: 220px; overflow: auto; padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-md); }
.cpa-models label { overflow-wrap: anywhere; }
.cpa-models input { accent-color: var(--amber-color); }
.cpa-secret { word-break: break-all; background: var(--bg-secondary); border: 1px dashed var(--border-hover); padding: 12px; border-radius: var(--radius-md); font-family: var(--font-mono); }
.cpa-progress { height: 8px; background: var(--bg-tertiary); border-radius: 99px; overflow: hidden; }
.cpa-progress > i { display: block; height: 100%; background: var(--success-color); }
.cpa-progress > i.warn { background: var(--amber-color); }
.cpa-progress > i.bad { background: var(--error-color); }
.cpa-section { margin-top: 20px; }
.cpa-modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 1; }
.cpa-modal > div { width: min(680px, 92vw); max-height: 88vh; overflow: auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; }
.cpa-modal h2 { margin-top: 0; }
.cpa-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
@media (max-width: 700px) {
  #cpa-page { padding: 16px; }
  .cpa-table { display: block; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #cpa-page *, #cpa-page *::before, #cpa-page *::after { transition: none; animation: none; }
}