:root {
  --bg: #0b1020;
  --panel: rgba(21, 29, 49, .92);
  --panel-2: rgba(30, 41, 66, .9);
  --line: rgba(255,255,255,.09);
  --text: #f8fafc;
  --muted: #9ca9bd;
  --gold: #f6c85f;
  --gold-2: #dba93d;
  --green: #5bd18b;
  --red: #ff6f78;
  --blue: #73b5ff;
  --radius: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
body {
  background:
    radial-gradient(circle at 10% -10%, rgba(94, 118, 255, .22), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(246, 200, 95, .12), transparent 35%),
    linear-gradient(180deg, #0b1020 0%, #0a0f1a 100%);
  padding: env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom));
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.topbar { position: sticky; top: 0; z-index: 10; display:flex; align-items:center; justify-content:space-between; padding: 18px 18px 12px; background: linear-gradient(180deg, rgba(11,16,32,.96), rgba(11,16,32,.75), transparent); backdrop-filter: blur(18px); }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .14em; margin: 0 0 4px; }
h1 { font-size: 28px; margin: 0; letter-spacing: -.03em; }
h2 { font-size: 19px; margin: 0 0 5px; }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 26px; }
.view { display: none; }
.view.active { display: block; }
.icon-btn { border:1px solid var(--line); background:var(--panel); color:var(--text); width:44px; height:44px; border-radius:14px; font-size:24px; }
.primary-cta { width:100%; border:0; border-radius:24px; padding:18px; margin: 4px 0 16px; display:flex; align-items:center; gap:14px; text-align:left; color:#17130b; background:linear-gradient(135deg, #ffe08a, var(--gold-2)); box-shadow:0 15px 45px rgba(219,169,61,.18); }
.primary-cta:active { transform: scale(.99); }
.cta-icon { font-size:32px; }
.primary-cta strong { display:block; font-size:20px; }
.primary-cta small { display:block; font-size:13px; opacity:.72; margin-top:2px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 12px; min-height:86px; }
.stat-value { font-size:24px; font-weight:800; letter-spacing:-.03em; }
.stat-label { color:var(--muted); font-size:12px; margin-top:4px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:10px; margin: 8px 2px 10px; }
.muted { color:var(--muted); font-size:13px; margin:0; line-height:1.45; }
.filter-row { display:flex; overflow-x:auto; gap:8px; padding:3px 0 12px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.chip { white-space:nowrap; border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:9px 13px; font-size:13px; font-weight:650; }
.chip.active { color:#1a1407; background:var(--gold); border-color:transparent; }
.notice { border-radius:16px; padding:13px 14px; margin:0 0 12px; font-size:13px; line-height:1.4; }
.notice.warning { background:rgba(246,200,95,.12); border:1px solid rgba(246,200,95,.28); color:#ffe9aa; }
.timeline { display:flex; flex-direction:column; gap:10px; }
.upgrade-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:19px; padding:14px 14px 14px 16px; display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; }
.upgrade-card::before { content:""; position:absolute; left:0; top:17px; bottom:17px; width:3px; border-radius:4px; background:var(--gold); }
.timebox { text-align:center; }
.time-main { font-size:18px; font-weight:800; line-height:1.05; }
.time-sub { color:var(--muted); font-size:10px; margin-top:5px; }
.upgrade-name { font-weight:750; font-size:16px; }
.account-name { color:var(--gold); font-size:12px; font-weight:700; margin-bottom:3px; }
.meta { color:var(--muted); font-size:12px; margin-top:5px; }
.level { color:#dce6f4; font-size:12px; background:rgba(255,255,255,.07); padding:5px 8px; border-radius:9px; white-space:nowrap; }
.empty { text-align:center; color:var(--muted); padding:44px 20px; background:rgba(255,255,255,.025); border:1px dashed var(--line); border-radius:20px; }
.account-list { display:flex; flex-direction:column; gap:10px; }
.account-card { background:var(--panel); border:1px solid var(--line); border-radius:19px; padding:15px; }
.account-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.account-title { font-size:17px; font-weight:800; }
.account-tag { color:var(--muted); font-size:11px; margin-top:2px; }
.account-hall-levels { color:#dce6f4; font-size:11px; font-weight:720; margin-top:3px; }
.account-info { display:grid; grid-template-columns:1fr 1fr; gap:8px; color:var(--muted); font-size:12px; margin:12px 0; }
.account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.small-btn, .secondary-btn, .ghost-btn, .danger-btn, .primary-btn { border-radius:12px; min-height:42px; padding:10px 13px; font-weight:700; border:1px solid var(--line); }
.small-btn { min-height:34px; padding:6px 9px; background:rgba(255,255,255,.055); color:var(--text); font-size:12px; }
.primary-btn { background:var(--gold); color:#1a1407; border-color:transparent; }
.secondary-btn { background:rgba(115,181,255,.13); color:#cfe6ff; border-color:rgba(115,181,255,.25); }
.ghost-btn { background:rgba(255,255,255,.045); color:var(--text); }
.danger-btn { background:rgba(255,111,120,.1); color:#ffc3c7; border-color:rgba(255,111,120,.2); }
.settings-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:16px; margin-bottom:12px; }
.button-row { display:flex; gap:9px; margin-top:13px; flex-wrap:wrap; }
.status-line { min-height:18px; color:var(--muted); font-size:12px; margin:10px 0 0; }
.bottom-nav { position:fixed; z-index:20; left:0; right:0; bottom:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:rgba(10,15,26,.92); border-top:1px solid var(--line); backdrop-filter:blur(22px); display:grid; grid-template-columns:repeat(3,1fr); }
.nav-item { border:0; background:transparent; color:var(--muted); display:flex; flex-direction:column; gap:3px; align-items:center; padding:7px; }
.nav-item span { font-size:20px; }
.nav-item small { font-size:11px; font-weight:650; }
.nav-item.active { color:var(--gold); }
.modal { position:fixed; z-index:50; inset:0; padding:20px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.62); backdrop-filter:blur(7px); }
.modal-card { width:min(100%, 520px); background:#151d31; border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
input, textarea { width:100%; margin-top:14px; border:1px solid var(--line); background:#0c1323; color:var(--text); border-radius:14px; padding:13px 14px; outline:none; }
textarea { resize:vertical; min-height:160px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
input:focus, textarea:focus { border-color:rgba(246,200,95,.55); }
.code-line { font:12px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--gold); background:#0c1323; border-radius:10px; padding:9px 10px; overflow-wrap:anywhere; }
.toast { position:fixed; z-index:80; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100% - 32px); background:#f8fafc; color:#111827; padding:11px 14px; border-radius:13px; font-size:13px; font-weight:750; box-shadow:0 12px 35px rgba(0,0,0,.3); }
.hidden { display:none !important; }
.loading { opacity:.58; pointer-events:none; }
.unknown-link { color:var(--gold); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
@media (max-width: 420px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); gap:7px; }
  .stat-card { padding:12px 9px; }
  .stat-value { font-size:21px; }
  .upgrade-card { grid-template-columns:62px 1fr; }
  .upgrade-card .level { grid-column:2; width:max-content; }
}


/* v0.2.1 - quản lý ID */
.id-manager-list { display: grid; gap: 10px; margin-top: 12px; }
.id-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.18); border-radius: 14px; background: rgba(15,23,42,.34); }
.id-row > div { min-width: 0; display: grid; gap: 4px; }
.id-row strong { font-size: 14px; overflow-wrap: anywhere; }
.id-row small { color: var(--muted); line-height: 1.35; }

/* v0.4 - Lịch sử + dashboard từng tài khoản */
.bottom-nav { grid-template-columns: repeat(4, 1fr); }
.filter-row.compact { padding-bottom: 0; }
.history-toolbar { display:grid; gap:10px; margin: 4px 0 14px; }
.select-control { width:100%; min-height:44px; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:14px; padding:10px 12px; outline:none; }
.history-stats { margin-bottom:14px; }
.history-list { display:flex; flex-direction:column; gap:12px; }
.history-day { display:flex; flex-direction:column; gap:8px; }
.history-day-title { position:sticky; top:82px; z-index:4; width:max-content; max-width:100%; color:var(--gold); background:rgba(11,16,32,.92); border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; backdrop-filter:blur(12px); }
.history-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:13px 14px; display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; }
.history-time { font-size:15px; font-weight:800; text-align:center; }
.history-source { color:var(--muted); font-size:10px; margin-top:4px; text-align:center; }
.history-account { color:var(--gold); font-size:12px; font-weight:700; margin-bottom:3px; }
.history-name { font-size:15px; font-weight:780; }
.history-meta { color:var(--muted); font-size:11px; margin-top:4px; }
.modal-card-wide { width:min(100%, 650px); max-height:min(86vh, 820px); overflow:auto; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.small-icon { width:38px; height:38px; border-radius:12px; font-size:22px; flex:0 0 auto; }
.account-detail-stats { margin-bottom:16px; }
.account-detail-list { padding-bottom:4px; }
.account-actions .detail-btn { background:rgba(246,200,95,.13); color:#ffe6a4; border-color:rgba(246,200,95,.28); }
@media (max-width: 420px) {
  .history-card { grid-template-columns:48px 1fr; }
  .history-card .level { grid-column:2; width:max-content; }
  .bottom-nav { padding-left:6px; padding-right:6px; }
  .nav-item { padding:7px 3px; }
}
.account-detail-stats { grid-template-columns: repeat(3, 1fr); }
.account-detail-filters { margin-top:-4px; margin-bottom:4px; }
@media (max-width: 420px) {
  .account-detail-stats { grid-template-columns: repeat(2, 1fr); }
}

/* v0.5 - Hôm nay + Freshness Monitor */
.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.today-section-gap { margin-top: 24px; }
.compact-timeline { gap: 8px; }
.compact-empty { padding: 24px 16px; }
.freshness-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.freshness-row {
  width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 17px; padding: 12px 13px; display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center; text-align: left;
}
.freshness-row:active { transform: scale(.995); }
.freshness-dot { font-size: 17px; line-height: 1; text-align: center; }
.freshness-main { min-width: 0; display: grid; gap: 3px; }
.freshness-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freshness-main small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freshness-age { display: grid; gap: 2px; text-align: right; min-width: 62px; }
.freshness-age strong { font-size: 13px; }
.freshness-age small { font-size: 10px; color: var(--muted); }
.freshness-stale { border-color: rgba(255,111,120,.28); background: rgba(255,111,120,.055); }
.freshness-warning { border-color: rgba(246,200,95,.24); background: rgba(246,200,95,.045); }
.freshness-fresh { border-color: rgba(90,210,140,.17); }
.today-upgrade-card { min-height: 78px; }
@media (max-width: 420px) {
  .bottom-nav { padding-left: 3px; padding-right: 3px; }
  .nav-item { padding: 7px 1px; }
  .nav-item small { font-size: 9.5px; }
  .nav-item span { font-size: 19px; }
  .freshness-row { grid-template-columns: 24px 1fr auto; gap: 8px; padding: 11px 10px; }
  .freshness-age { min-width: 55px; }
}


/* v0.6 - Reliability + Backup */
.settings-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.compact-action { min-width:42px; min-height:38px; padding:7px 10px; flex:0 0 auto; }
.health-overall { margin-top:13px; padding:11px 12px; border-radius:14px; font-size:13px; font-weight:800; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.health-overall.healthy { color:#bdf5d1; border-color:rgba(91,209,139,.28); background:rgba(91,209,139,.075); }
.health-overall.warning { color:#ffe9aa; border-color:rgba(246,200,95,.28); background:rgba(246,200,95,.075); }
.health-overall.problem { color:#ffc3c7; border-color:rgba(255,111,120,.3); background:rgba(255,111,120,.075); }
.health-list { display:grid; gap:8px; margin-top:10px; }
.health-row { display:grid; grid-template-columns:24px 1fr auto; gap:9px; align-items:center; padding:10px 11px; border:1px solid rgba(148,163,184,.14); border-radius:13px; background:rgba(15,23,42,.28); }
.health-icon { text-align:center; font-size:15px; }
.health-main { min-width:0; display:grid; gap:2px; }
.health-main strong { font-size:13px; }
.health-main small { color:var(--muted); font-size:10.5px; line-height:1.35; overflow-wrap:anywhere; }
.health-side { color:var(--muted); font-size:10px; text-align:right; white-space:nowrap; }
.queue-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }
.queue-stat { border:1px solid var(--line); border-radius:13px; padding:10px 9px; background:rgba(15,23,42,.28); }
.queue-stat strong { display:block; font-size:18px; }
.queue-stat small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.queue-list { display:grid; gap:8px; margin-top:11px; }
.queue-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 11px; border:1px solid rgba(148,163,184,.14); border-radius:13px; background:rgba(15,23,42,.24); }
.queue-row strong { display:block; font-size:12.5px; }
.queue-row small { display:block; color:var(--muted); font-size:10px; margin-top:3px; line-height:1.35; }
.queue-badge { border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; border:1px solid var(--line); }
.queue-badge.processed { color:#bdf5d1; border-color:rgba(91,209,139,.25); background:rgba(91,209,139,.08); }
.queue-badge.pending, .queue-badge.processing { color:#ffe9aa; border-color:rgba(246,200,95,.25); background:rgba(246,200,95,.08); }
.queue-badge.failed, .queue-badge.ignored { color:#ffc3c7; border-color:rgba(255,111,120,.25); background:rgba(255,111,120,.08); }
@media (max-width:420px) {
  .health-row { grid-template-columns:22px 1fr; }
  .health-side { grid-column:2; text-align:left; }
  .queue-stats { grid-template-columns:repeat(3,1fr); }
}

/* v0.7 - Daily UX: Favorites + Next + Search/Filter */
.compact-gap { margin-top: 16px; }
.next-global-list { display:grid; gap:8px; }
.next-global-card {
  display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:16px; padding:11px 12px; background:var(--panel);
}
.next-global-card.first { border-color:rgba(246,200,95,.34); background:rgba(246,200,95,.065); }
.next-rank { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.055); font-weight:900; font-size:12px; }
.next-global-main { min-width:0; display:grid; gap:2px; }
.next-global-main strong { font-size:13px; color:var(--gold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.next-global-main span { font-size:13px; font-weight:760; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.next-global-main small { font-size:10px; color:var(--muted); }
.next-global-time { font-size:12px; font-weight:850; text-align:right; white-space:nowrap; }

.favorite-account-list { display:grid; gap:8px; }
.favorite-account-row {
  width:100%; border:1px solid rgba(246,200,95,.23); background:rgba(246,200,95,.045); color:var(--text);
  border-radius:17px; padding:11px 12px; display:grid; grid-template-columns:28px 1fr 18px; gap:9px; align-items:center; text-align:left;
}
.favorite-account-row:active { transform:scale(.995); }
.favorite-account-star { font-size:17px; text-align:center; }
.favorite-account-main { min-width:0; display:grid; gap:3px; }
.favorite-account-main strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.favorite-account-main small { color:var(--muted); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.favorite-account-arrow { color:var(--muted); font-size:22px; line-height:1; }

.timeline-toolbar { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(150px, .65fr); gap:8px; margin:2px 0 10px; }
.timeline-search-wrap { display:grid; grid-template-columns:1fr auto; gap:7px; }
.search-control { margin:0; min-height:44px; }
.search-clear { min-height:44px; padding:9px 12px; }

.account-favorite { border-color:rgba(246,200,95,.26); }
.account-head-actions { display:flex; align-items:center; gap:8px; }
.favorite-btn {
  width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.035);
  color:var(--muted); font-size:21px; line-height:1; display:grid; place-items:center; padding:0;
}
.favorite-btn.active { color:var(--gold); border-color:rgba(246,200,95,.3); background:rgba(246,200,95,.08); }
.favorite-mark { margin-right:5px; font-size:13px; }
.account-health-line { margin-top:10px; font-size:11px; font-weight:720; }
.freshness-text-fresh { color:#bdf5d1; }
.freshness-text-warning { color:#ffe9aa; }
.freshness-text-stale { color:#ffc3c7; }

/* v0.7.5 - Idle Resource Radar */
.account-radar-filters { margin-bottom:2px; }
.account-resource-radar { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.resource-status { max-width:100%; border:1px solid var(--line); border-radius:999px; padding:6px 8px; font-size:10.5px; font-weight:750; line-height:1.2; }
.resource-idle, .resource-possibly-idle { color:#ffe9aa; border-color:rgba(246,200,95,.28); background:rgba(246,200,95,.075); }
.resource-busy { color:#bdf5d1; border-color:rgba(91,209,139,.2); background:rgba(91,209,139,.055); }

@media (max-width:420px) {
  .account-resource-radar { gap:5px; }
  .resource-status { white-space:normal; }
}

@media (max-width: 520px) {
  .timeline-toolbar { grid-template-columns:1fr; }
  .next-global-card { grid-template-columns:30px 1fr auto; padding:10px; gap:8px; }
  .next-global-main span { white-space:normal; line-height:1.25; }
  .next-global-time { font-size:11px; }
}

/* v0.9.0 - Multi-User Security Foundation */
.auth-tabs { display:flex; gap:8px; margin-top:16px; }
.auth-tabs .chip { flex:1; justify-content:center; }
.full-btn { width:100%; margin-top:12px; }
.auth-summary { display:grid; gap:8px; margin-top:12px; }
.auth-summary-main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.auth-summary-main strong { font-size:15px; overflow-wrap:anywhere; }
.auth-summary-meta { color:var(--muted); font-size:11px; line-height:1.45; }
.plan-badge { display:inline-flex; align-items:center; width:max-content; max-width:100%; border-radius:999px; padding:6px 9px; font-size:10px; font-weight:850; border:1px solid rgba(246,200,95,.3); color:#ffe6a4; background:rgba(246,200,95,.07); }
.auth-feature-list { display:flex; flex-wrap:wrap; gap:6px; }
.auth-feature { border:1px solid var(--line); border-radius:999px; padding:5px 8px; font-size:10px; color:var(--muted); }
.auth-feature.enabled { color:#bdf5d1; border-color:rgba(91,209,139,.22); background:rgba(91,209,139,.055); }
.auth-bootstrap { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.auth-bootstrap h3 { margin:0 0 4px; font-size:14px; }
.auth-bootstrap input { margin-top:9px; }
.plan-gate { margin-top:11px; padding:10px 11px; border:1px solid rgba(246,200,95,.24); border-radius:13px; background:rgba(246,200,95,.055); color:#ffe9aa; font-size:11px; line-height:1.45; }

/* v0.9.3 - Admin Usage / Capacity */
.capacity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.capacity-kpi { border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(15,23,42,.28); }
.capacity-kpi strong { display:block; font-size:20px; letter-spacing:-.02em; }
.capacity-kpi span { display:block; color:var(--muted); font-size:10.5px; margin-top:3px; }
.capacity-metric { grid-column:1 / -1; border:1px solid var(--line); border-radius:14px; padding:12px; background:rgba(15,23,42,.28); }
.capacity-metric-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.capacity-metric-head > div { min-width:0; display:grid; gap:2px; }
.capacity-metric-head strong { font-size:13px; }
.capacity-metric-head small { color:var(--muted); font-size:10px; line-height:1.35; }
.capacity-value { margin-top:9px; font-size:17px; font-weight:800; }
.capacity-value small { color:var(--muted); font-size:10px; font-weight:700; }
.capacity-meter { height:8px; border-radius:999px; overflow:hidden; margin-top:9px; background:rgba(255,255,255,.06); }
.capacity-meter span { display:block; height:100%; border-radius:inherit; }
.capacity-meter span.ok { background:var(--green); }
.capacity-meter span.watch { background:var(--blue); }
.capacity-meter span.warning { background:var(--gold); }
.capacity-meter span.critical { background:var(--red); }
.capacity-badge { flex:0 0 auto; border-radius:999px; padding:5px 8px; font-size:9.5px; font-weight:850; border:1px solid var(--line); }
.capacity-badge.ok { color:#bdf5d1; border-color:rgba(91,209,139,.25); background:rgba(91,209,139,.08); }
.capacity-badge.watch { color:#cfe6ff; border-color:rgba(115,181,255,.25); background:rgba(115,181,255,.08); }
.capacity-badge.warning { color:#ffe9aa; border-color:rgba(246,200,95,.25); background:rgba(246,200,95,.08); }
.capacity-badge.critical { color:#ffc3c7; border-color:rgba(255,111,120,.25); background:rgba(255,111,120,.08); }
.capacity-reference { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:11px 12px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); font-size:10px; }
.capacity-reference strong { grid-column:1 / -1; color:var(--text); font-size:11px; }
.capacity-warning-list { display:grid; gap:7px; margin-top:10px; }
.capacity-warning { padding:9px 10px; border-radius:12px; border:1px solid var(--line); font-size:11px; line-height:1.4; }
.capacity-warning.ok { color:#bdf5d1; border-color:rgba(91,209,139,.2); background:rgba(91,209,139,.055); }
.capacity-warning.watch { color:#cfe6ff; border-color:rgba(115,181,255,.22); background:rgba(115,181,255,.06); }
.capacity-warning.warning { color:#ffe9aa; border-color:rgba(246,200,95,.24); background:rgba(246,200,95,.065); }
.capacity-warning.critical { color:#ffc3c7; border-color:rgba(255,111,120,.26); background:rgba(255,111,120,.07); }
@media (max-width:420px) {
  .capacity-grid { grid-template-columns:repeat(2,1fr); }
  .capacity-kpi:nth-child(3) { grid-column:1 / -1; }
  .capacity-reference { grid-template-columns:1fr; }
  .capacity-reference strong { grid-column:1; }
}