/* CSS / browser / Muse Control: responsive quota dashboard. Round K: status colors are tokens (light + dark),
   chosen for >= 4.5:1 as text on --surface; usage-overview.js reads the same variables for chart strokes. */
:root {
  --usage-available:#0D7A67; --usage-warning:#8A5D00; --usage-critical:#B4501A; --usage-exhausted:#C0304A;
  --usage-cooldown:#8A3F9C; --usage-unknown:#56628A; --usage-stale:#4A55B0; --usage-disabled:#5E6474;
}
:root[data-theme="dark"] {
  --usage-available:#3FD1B4; --usage-warning:#F0B84A; --usage-critical:#FF9A5C; --usage-exhausted:#FF7F93;
  --usage-cooldown:#D48AE6; --usage-unknown:#A3AFD4; --usage-stale:#9AA5F0; --usage-disabled:#A0A6B4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --usage-available:#3FD1B4; --usage-warning:#F0B84A; --usage-critical:#FF9A5C; --usage-exhausted:#FF7F93;
    --usage-cooldown:#D48AE6; --usage-unknown:#A3AFD4; --usage-stale:#9AA5F0; --usage-disabled:#A0A6B4;
  }
}
.usage-page { max-width: 1640px; }
.usage-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.usage-kpis-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.usage-kpi { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 22px; }
.usage-kpi strong { font-size: clamp(1.4rem,2vw,2rem); line-height: 1.25; overflow-wrap: anywhere; color: var(--text); }
.usage-kpi small { color: var(--muted); line-height: 1.5; font-size: 14px; }
.usage-kpi-warn { border-top: 3px solid var(--usage-warning); }
.usage-kpi-danger { border-top: 3px solid var(--usage-exhausted); }
.usage-chart-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 16px; }
.usage-chart-grid > .card { padding: 22px; min-width: 0; }
.usage-chart-grid h2 { font-size: 19px; margin: 0 0 16px; }
.usage-chart-grid svg { width: 100%; display: block; }
.usage-distribution { display: grid; grid-template-columns: minmax(120px,190px) minmax(0,1fr); align-items: center; gap: 14px; }
.usage-donut-number { fill: var(--text); font-size: 29px; font-weight: 700; }
.usage-axis { fill: var(--muted); font: 14px var(--font); }
.usage-legend { display: grid; gap: 9px; }
.usage-legend-item { display: flex; align-items: center; text-align: left; gap: 8px; font: inherit; font-size: 15px; color: inherit; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; }
.usage-legend-item:hover { background: var(--surface-2); }
.usage-legend-item strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.usage-dot { width: 10px; height: 10px; min-width: 10px; background: currentColor; border-radius: 50%; }
.usage-available { color: var(--usage-available); }
.usage-warning { color: var(--usage-warning); }
.usage-critical { color: var(--usage-critical); }
.usage-exhausted { color: var(--usage-exhausted); }
.usage-cooldown { color: var(--usage-cooldown); }
.usage-unknown { color: var(--usage-unknown); }
.usage-stale { color: var(--usage-stale); }
.usage-disabled { color: var(--usage-disabled); }
.usage-stroke-available { stroke: var(--usage-available); } .usage-fill-available { fill: var(--usage-available); }
.usage-stroke-warning { stroke: var(--usage-warning); } .usage-fill-warning { fill: var(--usage-warning); }
.usage-stroke-critical { stroke: var(--usage-critical); } .usage-fill-critical { fill: var(--usage-critical); }
.usage-stroke-exhausted { stroke: var(--usage-exhausted); } .usage-fill-exhausted { fill: var(--usage-exhausted); }
.usage-stroke-cooldown { stroke: var(--usage-cooldown); } .usage-fill-cooldown { fill: var(--usage-cooldown); }
.usage-stroke-unknown { stroke: var(--usage-unknown); } .usage-fill-unknown { fill: var(--usage-unknown); }
.usage-stroke-stale { stroke: var(--usage-stale); } .usage-fill-stale { fill: var(--usage-stale); }
.usage-stroke-disabled { stroke: var(--usage-disabled); } .usage-fill-disabled { fill: var(--usage-disabled); }
.usage-status { font-size: 14px; font-weight: 600; }
.usage-chart-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.usage-note { line-height: 1.6; padding: 16px 0; color: var(--muted); }
.usage-fleet-panel { padding: 22px; margin-top: 20px; }
.usage-target-input { width: 150px; }
.usage-target-progress { width: 100%; height: 12px; accent-color: var(--accent-bg); }
.usage-fleet-alert { margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--usage-warning); background: var(--warn-soft); color: var(--text); line-height: 1.6; }
.usage-filters { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.usage-filters input { max-width: 340px; }
.usage-filters select { max-width: 300px; }
.usage-table-wrap { overflow: auto; }
@media(min-width:900px) { .usage-table-wrap { max-height: calc(100vh - 140px); } }
.usage-table { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.usage-table th,.usage-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.usage-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-3); color: var(--text-2); font-weight: 600; white-space: nowrap; border-bottom-color: var(--border); }
.usage-table tbody tr:nth-child(even) td { background: var(--row-zebra); }
.usage-table tbody tr:hover td { background: var(--row-hover); }
.usage-table td { max-width: 280px; overflow-wrap: anywhere; }
.usage-table small { display: block; color: var(--muted); margin-top: 5px; font-size: 14px; }
.usage-table progress { display: block; width: 100px; height: 6px; margin-top: 8px; accent-color: var(--usage-stale); }
.usage-telegram { margin: 20px 0; padding: 22px; }
.usage-telegram summary { cursor: pointer; font-weight: 650; }
.usage-telegram > .row { margin-top: 14px; }
.usage-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.usage-form label { display: grid; gap: 8px; }
.usage-page button:focus-visible,.usage-page summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media(max-width:1100px) { .usage-chart-grid { grid-template-columns: 1fr; } .usage-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .usage-kpis,.usage-kpis-three,.usage-form { grid-template-columns: 1fr; } .usage-distribution { grid-template-columns: 1fr; } .usage-distribution svg { max-width: 200px; margin: auto; } .usage-filters { flex-direction: column; } .usage-filters input,.usage-filters select { max-width: none; } .usage-chart-grid > .card { padding: 14px; } }
/* Provider tabs + points-tier view (Dola). Tokens only; table text 15px. */
.usage-provider-tabs{margin-top:16px}
.usage-points{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.usage-points-head{padding:22px;display:flex;flex-direction:column;gap:8px}.usage-points-head h2{font-size:19px;margin:0}
.usage-points-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.usage-points-slot{display:flex;flex-direction:column;gap:8px;padding:18px 20px;min-width:0}
.usage-points-slot strong{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.25;color:var(--text);font-variant-numeric:tabular-nums}
.usage-points-warn{border-top:3px solid var(--usage-warning)}
.usage-points > .card:not(.usage-points-head){padding:22px}
.usage-points-table{min-width:880px}
.usage-points-table td{font-variant-numeric:tabular-nums}
@media(max-width:1100px){.usage-points-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.usage-points-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-points > .card:not(.usage-points-head),.usage-points-head{padding:14px}}