/* ─────────────────────────────────────────────────────────────────────────
 * usage-bar.css — Styling untuk komponen <div class="risos-usage-bar">.
 * Variants: data-variant="compact" (navbar), data-variant="full" (dashboard).
 * Palet warna selaras dengan halaman /settings/subscription:
 *   - Main gradient : #3B82F6 → #06B6D4 (indigo → violet)
 *   - Warn          : #B7791F → #FFB76A
 *   - Danger        : #B91C1C → #FF6B6B
 *   - Pill accent   : rgba(59, 130, 246, .10/.32) + color var(--c-app-accent)
 * ───────────────────────────────────────────────────────────────────────── */

.risos-usage-bar { display: inline-flex; align-items: center; }

/* ── Compact variant (navbar) ──────────────────────────────────────────── */
.ub-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.10));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246, 0.32));
  color: var(--c-app-accent);
  font-size: 0.82rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ub-compact:hover {
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.18));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246, 0.48));
}
.ub-compact.is-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); color: #fcd34d; }
.ub-compact.is-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.32); color: #fca5a5; }
.ub-compact .ub-bar {
  width: 80px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
  display: inline-block;
}
.ub-compact .ub-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-app-accent, #3B82F6) 0%, var(--c-accent, #06B6D4) 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ub-compact.is-warn .ub-bar-fill { background: linear-gradient(90deg, #B7791F 0%, #FFB76A 100%); }
.ub-compact.is-danger .ub-bar-fill { background: linear-gradient(90deg, #B91C1C 0%, #FF6B6B 100%); }
.ub-compact .ub-pct { font-weight: 700; min-width: 32px; text-align: right; }
.ub-compact .ub-tier {
  color: var(--text-secondary, #cbd5e1);
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: 0.6rem;
  font-weight: 500;
}
.ub-compact .ub-tier .ub-tier-tag {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4b5fd;
}

/* ── Full variant (dashboard) ──────────────────────────────────────────── */
.ub-full {
  width: 100%;
  padding: 1.2rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ub-full.ub-empty { text-align: center; }

.ub-full .ub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.ub-full .ub-header h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f3f4f6);
}
.ub-full .ub-header p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary, #cbd5e1);
}
.ub-full .ub-pill {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.10));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246,0.32));
  color: var(--c-app-accent);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.ub-full .ub-pill.is-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); color: #fcd34d; }
.ub-full .ub-pill.is-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.32); color: #fca5a5; }
.ub-full .ub-pct-big {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary, #f3f4f6);
}
.ub-full.is-warn .ub-pct-big { color: #fcd34d; }
.ub-full.is-danger .ub-pct-big { color: #fca5a5; }

.ub-full .ub-pool-banner {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246, 0.20));
  font-size: 0.78rem;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.4;
}
.ub-full .ub-pool-banner strong { color: var(--c-app-accent); font-weight: 600; }

.ub-full .ub-usage-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-secondary, #cbd5e1);
  margin-bottom: 0.3rem;
}

.ub-full .ub-bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin: 0.4rem 0 0.6rem;
}
.ub-full .ub-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-app-accent, #3B82F6) 0%, var(--c-accent, #06B6D4) 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ub-full.is-warn .ub-bar-fill { background: linear-gradient(90deg, #B7791F 0%, #FFB76A 100%); }
.ub-full.is-danger .ub-bar-fill { background: linear-gradient(90deg, #B91C1C 0%, #FF6B6B 100%); }

.ub-full .ub-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary, #cbd5e1);
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.ub-full .ub-warn {
  margin-top: 0.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #FFB76A;
}
.ub-full .ub-warn-strong {
  background: rgba(239, 68, 68, 0.08);
  border-left-color: #fca5a5;
}
.ub-full .ub-warn a { color: var(--c-app-accent); font-weight: 600; }

.ub-full .ub-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.ub-full .ub-btn {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.9rem;
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--c-app-accent, #3B82F6) 0%, var(--c-accent, #06B6D4) 100%);
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ub-full .ub-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px var(--c-app-accent-soft, rgba(59, 130, 246,0.55)); }
.ub-full .ub-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f3f4f6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background-image: none;
  box-shadow: none;
}
.ub-full .ub-btn-ghost:hover { background: rgba(255,255,255,0.08); box-shadow: none; }

/* ── Empty state CTA ──────────────────────────────────────────────────── */
.ub-cta {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--c-app-accent, #3B82F6) 0%, var(--c-accent, #06B6D4) 100%);
  color: #fff;
}
.ub-cta.primary {
  background: linear-gradient(135deg, var(--c-app-accent, #3B82F6) 0%, var(--c-accent, #06B6D4) 100%);
  color: #fff;
  margin-top: 0.8rem;
}

/* ── Light theme override ─────────────────────────────────────────────── */
[data-theme="light"] .ub-compact,
body.theme-light .ub-compact {
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.08));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246,0.28));
  color: var(--c-app-accent);
}
[data-theme="light"] .ub-compact .ub-bar,
body.theme-light .ub-compact .ub-bar { background: rgba(0,0,0,0.08); }
[data-theme="light"] .ub-compact .ub-tier,
body.theme-light .ub-compact .ub-tier { color: #475569; border-left-color: rgba(0,0,0,0.10); }
[data-theme="light"] .ub-full,
body.theme-light .ub-full { background: var(--surface-2, #fff); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ub-full .ub-bar,
body.theme-light .ub-full .ub-bar { background: rgba(0,0,0,0.06); }
[data-theme="light"] .ub-full .ub-header h4,
[data-theme="light"] .ub-full .ub-pct-big,
body.theme-light .ub-full .ub-header h4,
body.theme-light .ub-full .ub-pct-big { color: #0f172a; }
[data-theme="light"] .ub-full .ub-meta,
[data-theme="light"] .ub-full .ub-header p,
[data-theme="light"] .ub-full .ub-usage-label,
body.theme-light .ub-full .ub-meta,
body.theme-light .ub-full .ub-header p,
body.theme-light .ub-full .ub-usage-label { color: #6b7280; }
[data-theme="light"] .ub-full .ub-btn-ghost,
body.theme-light .ub-full .ub-btn-ghost { background: rgba(0,0,0,0.04); color: #0f172a; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .ub-full .ub-pool-banner,
body.theme-light .ub-full .ub-pool-banner {
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.06));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246,0.22));
  color: #475569;
}
[data-theme="light"] .ub-full .ub-pool-banner strong,
body.theme-light .ub-full .ub-pool-banner strong { color: var(--c-app-accent); }


/* ═══════════════════════════════════════════════════════════════════════
 * Week 2 — Dual-Bar Redesign (Main + Agent quota)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Full variant v2 (sidebar) ──────────────────────────────────────── */
.ub-full--v2 {
  width: 100%;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.ub-full--v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-app-accent, #3B82F6), var(--c-accent, #06B6D4));
  opacity: 0.75;
}

.ub-full--v2 .ub-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 10px;
}
.ub-full--v2 .ub-tier-label {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--txt-faint, #94a3b8);
  margin-bottom: 0;
}
.ub-full--v2 .ub-tier-label strong {
  color: var(--txt, #f3f4f6);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ub-full--v2 .ub-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.10));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246,0.32));
  color: var(--c-app-accent);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ub-full--v2 .ub-pill.is-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); color: #fcd34d; }
.ub-full--v2 .ub-pill.is-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.32); color: #fca5a5; }

.ub-full--v2 .ub-pool-banner {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246, 0.20));
  font-size: 11px;
  line-height: 1.45;
  color: var(--txt-muted, #cbd5e1);
}
.ub-full--v2 .ub-pool-banner strong { color: var(--c-app-accent); font-weight: 600; }

.ub-track {
  margin-bottom: 14px;
}
.ub-track:last-of-type { margin-bottom: 0; }

.ub-track__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.ub-track__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--txt, #f3f4f6);
  letter-spacing: -0.01em;
}
.ub-track__pct {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-muted, #cbd5e1);
}

.ub-track__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}
.ub-track__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.ub-track--main .ub-track__fill {
  background: linear-gradient(90deg, var(--c-app-accent, #3B82F6), var(--c-accent, #06B6D4));
}
.ub-track--agent .ub-track__fill {
  background: linear-gradient(90deg, var(--c-accent, #06B6D4), #ec4899);
}
.ub-track.is-warn .ub-track__fill {
  background: linear-gradient(90deg, #B7791F, #FFB76A);
}
.ub-track.is-danger .ub-track__fill {
  background: linear-gradient(90deg, #B91C1C, #FF6B6B);
}
.ub-track.is-paused .ub-track__fill {
  background: rgba(100, 116, 139, 0.5);
}

.ub-track__meta {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--txt-faint, #94a3b8);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ub-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.ub-state-badge--degraded {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.ub-state-badge--paused {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}
.ub-state-badge--use-main {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.ub-reset-info {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line, rgba(255,255,255,0.08));
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--txt-faint, #94a3b8);
}

/* ── Compact variant v2 (header) ─────────────────────────────────────── */
.ub-compact--v2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.10));
  border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246, 0.32));
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  color: var(--c-app-accent);
}
.ub-compact--v2:hover {
  background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.18));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246, 0.48));
}
.ub-compact--v2.is-warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); color: #fcd34d; }
.ub-compact--v2.is-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.32); color: #fca5a5; }
.ub-compact--v2 .ub-pct {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
}
.ub-compact--v2 .ub-bar {
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
  display: inline-block;
}
.ub-compact--v2 .ub-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-app-accent, #3B82F6), var(--c-accent, #06B6D4));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ub-compact--v2.is-warn .ub-bar__fill { background: linear-gradient(90deg, #B7791F, #FFB76A); }
.ub-compact--v2.is-danger .ub-bar__fill { background: linear-gradient(90deg, #B91C1C, #FF6B6B); }
.ub-compact--v2 .ub-tier-name {
  font-size: 12px;
  color: var(--txt-muted, #cbd5e1);
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: 500;
}
.ub-compact--v2 .ub-tier-tag {
  display: inline-block;
  margin-right: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.ub-compact--v2 .ub-agent-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  color: #c4b5fd;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.ub-compact--v2 .ub-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elev, #1a1a2e);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 260px;
  font-size: 12px;
  color: var(--txt, #f3f4f6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ub-compact--v2:hover .ub-tooltip,
.ub-compact--v2:focus-within .ub-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ub-compact--v2 .ub-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  gap: 12px;
}
.ub-compact--v2 .ub-tooltip-row + .ub-tooltip-row {
  border-top: 1px dashed var(--line, rgba(255, 255, 255, 0.08));
}
.ub-compact--v2 .ub-tooltip-label {
  color: var(--txt-muted, #cbd5e1);
  font-size: 11px;
}
.ub-compact--v2 .ub-tooltip-value {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--txt, #f3f4f6);
}

/* Light theme overrides */
[data-theme="light"] .ub-full--v2,
body.theme-light .ub-full--v2 {
  background: var(--surface-2, #fff);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ub-full--v2 .ub-track__bar,
body.theme-light .ub-full--v2 .ub-track__bar { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .ub-full--v2 .ub-pool-banner,
body.theme-light .ub-full--v2 .ub-pool-banner {
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.06));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246,0.22));
  color: #475569;
}
[data-theme="light"] .ub-compact--v2,
body.theme-light .ub-compact--v2 {
  background: var(--c-app-accent-soft, rgba(59, 130, 246,0.08));
  border-color: var(--c-app-accent-soft, rgba(59, 130, 246,0.28));
  color: var(--c-app-accent);
}
[data-theme="light"] .ub-compact--v2 .ub-bar,
body.theme-light .ub-compact--v2 .ub-bar { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .ub-compact--v2 .ub-tier-name,
body.theme-light .ub-compact--v2 .ub-tier-name { color: #475569; border-left-color: rgba(0,0,0,0.10); }
[data-theme="light"] .ub-compact--v2 .ub-tier-tag,
body.theme-light .ub-compact--v2 .ub-tier-tag { color: var(--c-app-accent, #2563EB); }
[data-theme="light"] .ub-compact--v2 .ub-tooltip,
body.theme-light .ub-compact--v2 .ub-tooltip {
  background: var(--surface-2, #fff);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * KARTU KUOTA KAKI SIDEBAR — `.ub-kuota`   (23 Agu 2026)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * KENAPA BENTUKNYA DIGANTI, bukan sekadar dikecilkan padding-nya.
 *
 * Terukur di 1440×900 (akun trial, /dashboard/): sidebar `#shellNav` tinggi
 * 836px, isinya butuh 1102px, dan `.nav__foot` sendiri 408px — kakinya
 * berakhir di y=1144, yaitu **244px di bawah dasar sidebar**. Ia hanya bisa
 * dilihat kalau seseorang menggulir menu sampai habis; praktis tidak pernah.
 *
 * Sebab tingginya BUKAN padding. Sebabnya `.ub-track__hd` menaruh label dan
 * nilai dalam SATU baris flex: di kolom 176px "Token AI · lifetime" dan
 * "25 tanya-jawab" saling menghimpit sampai keduanya pecah dua baris. Enam
 * dari sepuluh teks kartu lama membungkus. Tiap bungkusan menambah ±14px, dan
 * dua meter × tiga baris teks + peringatan tiga baris = 408px.
 *
 * Karena itu kartunya disusun VERTIKAL: satu hal per baris, tiap baris
 * `nowrap` + elipsis, angka besar di atas satuan kecil. Angka yang tidak muat
 * di muka kartu tidak dihapus — ia turun ke blok Rincian yang bisa dibuka.
 *
 * ⚠️ NOL heks baru di berkas ini (gerbang `hex_semua_css`, pagu 0 kenaikan).
 *    Semua warna WAJIB lewat token; itu juga yang membuat kartu ini ikut tema
 *    terang tanpa satu baris override.
 * ⚠️ `--bg-input` TIDAK dipakai sebagai alas bar: di tema terang nilainya
 *    putih penuh, jadi alasnya lenyap di atas kartu yang juga putih. `--line`
 *    punya kontras di KEDUA tema. (Heks sengaja tidak dikutip di komentar ini:
 *    penghitung `hex_semua_css` membaca komentar juga — terukur naik 9578→9579
 *    hanya karena angkanya disebut.)
 */
.ub-kuota {
  width: 100%;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.ub-kuota::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  opacity: 0.75;
}

.ub-kuota__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  min-width: 0;
}
.ub-kuota__akses {
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--txt-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ub-kuota__akses strong { color: var(--txt); font-weight: 600; }

.ub-kuota__rinci-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-app-accent);
  white-space: nowrap;
}
.ub-kuota__rinci-btn::after { content: ' \25BE'; }
.ub-kuota__rinci-btn[aria-expanded="true"]::after { content: ' \25B4'; }
.ub-kuota__rinci-btn:hover { text-decoration: underline; }

.ub-kuota__meter { margin-bottom: 12px; min-width: 0; }
.ub-kuota__meter:last-of-type { margin-bottom: 0; }

/* Satu hal per baris, dan tiap baris menolak membungkus. Elipsis dipilih
   ketimbang pengecilan huruf: teks yang terpotong masih terbaca sebagai teks,
   sedangkan huruf yang menyusut sendiri diam-diam tak terbaca. */
.ub-kuota__k {
  font-family: var(--ff-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--txt-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ub-kuota__nilai {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 2px 0 7px;
  min-width: 0;
}
.ub-kuota__angka {
  font-family: var(--ff-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt);
  white-space: nowrap;
}
.ub-kuota__satuan {
  font-size: 11px;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ub-kuota__baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.ub-kuota__status {
  flex: 0 1 auto;
  font-size: 11px;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ub-kuota__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.ub-kuota__isi {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-primary);
  transition: width 0.6s var(--ease-out);
}
.ub-kuota__meter.is-warn .ub-kuota__isi { background: var(--c-warning); }
.ub-kuota__meter.is-warn .ub-kuota__status { color: var(--c-warning); }
.ub-kuota__meter.is-danger .ub-kuota__isi { background: var(--c-danger); }
.ub-kuota__meter.is-danger .ub-kuota__status { color: var(--c-danger); }

.ub-kuota__cta {
  display: block;
  margin-top: 12px;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  text-align: center;
  text-decoration: none;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--grad-primary);
  color: var(--c-bg-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform var(--t-fast);
}
.ub-kuota__cta:hover { transform: translateY(-1px); }

/* Rincian — tempat turunnya SEMUA angka yang tidak muat di muka kartu.
   Disembunyikan dengan atribut `hidden`, bukan dengan kelas: MutationObserver
   co-browse Dosen AI hanya mendengar childList + attributeFilter ['hidden']
   (kontrak E-12), jadi panel yang dibuka lewat tukar-kelas tidak pernah
   terlihat olehnya. `max-height` menahan kartu tetap di dalam sidebar
   sekalipun rinciannya panjang. */
.ub-kuota__rinci {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--txt-faint);
  max-height: 34vh;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.ub-kuota__rinci[hidden] { display: none; }
.ub-kuota__rinci a { color: var(--c-app-accent); font-weight: 600; }

/* ── Jaring pengaman untuk varian LAIN yang memakai kaki yang sama ────────
   Kartu berbayar (`.ub-full--v2`) dan kartu kosong (`.ub-full`) dirender ke
   wadah yang sama. Keduanya juga memakai baris label|nilai yang menghimpit.
   Di dalam kaki sidebar baris itu DITUMPUK, dan tiap teksnya dilarang
   membungkus — aturan yang sama, hanya diberlakukan dari luar supaya perilaku
   kedua kartu itu di halaman lain tidak ikut berubah. */
.nav__foot .ub-track__hd {
  display: block;
}
.nav__foot .ub-track__label,
.nav__foot .ub-track__pct,
.nav__foot .ub-track__meta,
.nav__foot .ub-tier-label,
.nav__foot .ub-usage-label > span,
.nav__foot .ub-meta > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nav__foot .ub-full,
.nav__foot .ub-full--v2 { padding: 12px; }
.nav__foot .ub-track { margin-bottom: 10px; }

/* ── Kartu kuota DIRAMPINGKAN ────────────────────────────────────────────────
   Rio, 23 Agustus 2026: "kartu langganannya kok terlalu besar dan memakan
   banyak tempat".

   Terukur sebelum: 201px — SEPEREMPAT tinggi sidebar di 1440×900, dan itu
   sesudah perbaikan tumpahan yang menurunkannya dari 408px. Rinciannya:

       ub-kuota__hd      16px
       ub-kuota__meter   55px   ← angka 24px + satuan + bar, meteran pertama
       ub-kuota__meter   28px   ← meteran kedua, bentuk padat
       ub-kuota__cta     30px
       + jarak & padding 59px

   Yang membuatnya besar bukan isinya melainkan JARAKNYA: dua meteran memakai
   bentuk berbeda (satu megah, satu padat) dan tiap blok membawa marginnya
   sendiri. Kartu kaki sidebar bukan dasbor — ia penanda keadaan yang harus
   terbaca sekilas, dan rinciannya sudah punya rumahnya sendiri di blok
   "Rincian" yang bisa dibuka.

   Nol angka dihapus. Yang berubah cuma ukuran dan jarak. */
.nav__foot .ub-kuota { padding: 10px; }
.nav__foot .ub-kuota__hd { margin-bottom: 7px; }

/* Kedua meteran memakai bentuk yang SAMA — angka sedang, satuan menyusul di
   baris yang sama. Meteran yang "megah" membuat yang kedua terbaca sebagai
   catatan kaki, padahal keduanya kuota yang sama pentingnya. */
.nav__foot .ub-kuota__meter { margin-bottom: 8px; }
.nav__foot .ub-kuota__nilai { margin: 1px 0 4px; gap: 4px; }
.nav__foot .ub-kuota__angka { font-size: 17px; }
.nav__foot .ub-kuota__cta { margin-top: 8px; }

/* Meteran PERTAMA memakai dua baris (label sendiri, lalu nilai), sedangkan yang
   KEDUA sudah memakai satu baris gabungan (`__baris`). Bedanya 16px, dan
   akibatnya bukan cuma tinggi: meteran yang lebih megah terbaca sebagai yang
   lebih penting, padahal keduanya kuota yang sama-sama menentukan.
   Disamakan ke bentuk satu baris — label kiri, nilai kanan, bar di bawahnya. */
.nav__foot .ub-kuota__meter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}
.nav__foot .ub-kuota__k { flex: 1 1 auto; margin: 0; }
.nav__foot .ub-kuota__nilai { flex: 0 0 auto; margin: 0; }
.nav__foot .ub-kuota__baris { flex: 1 1 100%; }
.nav__foot .ub-kuota__bar { flex: 1 1 100%; margin-top: 4px; }

/* ── Kartu BERLANGGANAN diramping juga ───────────────────────────────────────
   Rio, 23 Agustus 2026: "card label paket itu masih terlalu besar di browser
   tertentu, apakah karena cache?"

   Bukan cache — berkasnya ber-versi benar (`static_v()`, mtime cocok dengan
   `?v=`). Dan bukan perambannya. Kartu ini punya EMPAT bentuk render, dan
   perampingan sebelumnya hanya menyentuh SATU:

       renderFreeTrial*  → `.ub-kuota`  164px   ← yang diramping
       renderFull / V2   → `.ub-track`  219px   ← yang dilihat akun berlangganan

   Akun uji sedang free trial, jadi bentuk yang satunya tidak pernah muncul di
   layar mana pun yang saya ukur. Pelajarannya: satu komponen dengan beberapa
   jalur render harus diukur di TIAP jalurnya — mengukur satu lalu menyimpulkan
   "kartu sudah ramping" adalah kesimpulan yang benar tentang hal yang salah.

   Terukur 1440×900 sebelum: kaki 219px (26% sidebar); di dalamnya
   `.ub-track` 137px = kepala 36px (dua baris) + bar 10px + keterangan 80px
   (empat baris). Keterangan panjang itu isi Rincian, bukan isi kartu kaki. */
.nav__foot .ub-track { margin-bottom: 8px; }
.nav__foot .ub-track:last-of-type { margin-bottom: 0; }

/* Kepala satu baris: label kiri, persen kanan. Labelnya yang mengalah kalau
   sempit — persennya cuma tiga huruf dan justru itu yang dicari sekilas. */
.nav__foot .ub-track__hd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
}
.nav__foot .ub-track__label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__foot .ub-track__pct { flex: 0 0 auto; }

/* Keterangan dipangkas ke dua baris. Ia tidak dibuang — teksnya utuh di
   `title`, dan angka lengkapnya memang rumah Rincian. */
.nav__foot .ub-track__meta {
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav__foot .ub-tier-row { margin-bottom: 7px; }

/* Blok keterangan kuota utama dibuat `skBlok()` sebagai <div> BER-GAYA SEBARIS
   TANPA KELAS, jadi `.ub-track__meta` tidak pernah mengenainya — klem baris
   yang dipasang untuk kelas itu diam-diam tidak berlaku, dan tingginya tetap
   80px (empat baris) di kartu kaki yang lebarnya 176px.
   Ia ditarget lewat strukturnya. Gaya sebaris menang untuk properti yang IA
   setel (margin, font-size, opacity) — karena itu yang dipakai di sini justru
   properti yang TIDAK ia setel, sehingga tidak perlu `!important`.
   Catatan untuk yang menyentuh `usage-bar.js` nanti: memberi blok ini sebuah
   kelas akan membuat aturan ini tidak perlu, dan itu perbaikan yang benar. */
.nav__foot .ub-track > div[style] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Di layar pendek, DAFTAR MENU yang menang ────────────────────────────────
   Rio, 23 Agustus 2026: "cardnya masih terlalu besar bahkan sampai setengah
   sidebar itu sehingga list sidebar jadi mengecil tempatnya."

   Angkanya sendiri tidak pernah menyentuh 50% (15–31% tergantung tinggi
   layar), tetapi keluhannya benar dan kolom yang membuktikannya bukan tinggi
   kartu melainkan BERAPA BUTIR MENU YANG MUAT. Terukur 1440px, kartu
   berlangganan:

       1440×900   kartu 18%   butir muat 13/13
       1440×768   kartu 21%   butir muat 10/13   ← laptop paling umum
       1440×700   kartu 24%   butir muat  8/13
       1440×600   kartu 28%   butir muat  7/13

   Jadi memangkas 10px lagi dari kartu bukan jawabannya. Yang salah adalah
   prioritasnya: kartu kuota itu penanda keadaan, sedangkan daftar menu adalah
   cara orang berpindah. Di layar yang tidak cukup untuk keduanya, yang harus
   mengalah jelas.

   Di bawah ambang ini kartu menyusut jadi RINGKASAN SATU BARIS — angka dan bar
   pindah ke blok "Rincian" yang sudah ada dan tetap bisa dibuka, jadi tidak ada
   satu angka pun yang hilang, cuma tidak lagi dipajang saat ruangnya memang
   tidak ada.

   ⚠️ AMBANG 860px → 900px (31 Agu 2026), DAN TABEL DI ATAS SUDAH TIDAK BENAR.
   Angka "1440×900 kartu 18% butir muat 13/13" terukur SEBELUM Free Trial v2
   menambahkan meter kedua ke kartu trial. Terukur ulang hari ini: kartu trial
   **220px** di 1440×900, dan hanya **11 dari 13** butir menu yang muat.

   Ini kelas kegagalan yang sama dengan yang sudah beberapa kali menggigit repo
   ini: komentar membenarkan sebuah ambang, fitur baru menambah tinggi kartu,
   dan ambangnya tetap patuh pada komentar. Yang salah bukan pilihan 860px dulu
   — melainkan tidak ada yang mengukur ulang saat kartunya bertambah isi.

   1440×900 adalah layar laptop paling umum. Prinsip yang sudah ditulis lima
   paragraf di atas menyelesaikannya tanpa perdebatan baru: di layar yang tidak
   cukup untuk keduanya, daftar menu yang menang. */
@media (max-height: 900px) {
  /* Bentuk free trial: barnya yang pergi, ANGKANYA tetap tinggal — angka itu
     yang dicari sekilas, sedangkan bar cuma menggambarkan angka yang sama. */
  .nav__foot .ub-kuota__bar { display: none; }
  .nav__foot .ub-kuota__meter { margin-bottom: 4px; }
  .nav__foot .ub-kuota__angka { font-size: 14px; }
  .nav__foot .ub-kuota__cta { margin-top: 6px; }

  /* Bentuk berlangganan */
  .nav__foot .ub-track__bar,
  .nav__foot .ub-track > div[style] { display: none; }
  .nav__foot .ub-track { margin-bottom: 3px; }
  .nav__foot .ub-track__hd { margin-bottom: 0; }

  .nav__foot .ub-kuota, .nav__foot .ub-full--v2 { padding: 8px; }
  .nav__foot .ub-tier-row { margin-bottom: 5px; }
}

/* ── Kartu v1 (`.ub-full`) diadaptasi ke kaki sidebar ────────────────────────
   Rio: "masih lebar dan panjang cardnya sehingga menunya jadi pendek dan harus
   scroll, padahal di akun lainnya ga harus di-scroll."

   Kalimat terakhir itu yang membuka kasusnya: bukan layarnya yang beda,
   melainkan AKUNNYA. `usage-bar.js` punya EMPAT jalur render dan yang dipakai
   ditentukan muatan API:

       free trial            → `.ub-kuota`   133px
       ada `agent_quota`     → `.ub-track`    78px   ← "akun lainnya"
       TANPA `agent_quota`   → `.ub-full`    315px   ← akun Rio
       institusi             → `.ub-full`    382px = 54% sidebar

   Terukur 1440×768, dan angkanya persis seperti yang dilaporkan: 44–54% tinggi
   sidebar, 5–7 dari 13 butir menu yang muat. Lebarnya pun nyata — isi 341px di
   dalam kaki 203px, meluber 138px — karena kartu ini dirancang untuk bilah
   LEBAR di kepala halaman dan tidak pernah diadaptasi saat ia ikut dipasang di
   kaki sidebar.

   Ini jalur render KETIGA yang cacatnya baru ketahuan setelah dilaporkan. Dua
   yang sebelumnya juga begitu. Pelajaran yang sama, ketiga kalinya: satu
   komponen dengan banyak jalur render harus diukur di TIAP jalurnya, dan
   akun uji hanya pernah memperlihatkan satu. */
.nav__foot .ub-full {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.nav__foot .ub-full * { min-width: 0; }

.nav__foot .ub-header { gap: 6px; margin-bottom: 6px; }
.nav__foot .ub-usage-label {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px;
}
.nav__foot .ub-usage-label > span {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__foot .ub-pct-big { flex: 0 0 auto; font-size: 17px; line-height: 1.1; }
.nav__foot .ub-bar { margin: 4px 0; }

/* Blok keterangan empat baris → dua. Sama seperti di kartu v2, ia dibuat
   sebagai <div> ber-gaya sebaris tanpa kelas, jadi ditarget lewat struktur. */
.nav__foot .ub-full > div[style] {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav__foot .ub-meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 4px;
}
/* Dua tombol berdampingan tidak muat di 203px tanpa dipotong; ditumpuk, dan
   yang sekunder ("Detail") dikecilkan karena ia bukan aksi utamanya. */
.nav__foot .ub-actions { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.nav__foot .ub-actions .ub-btn { width: 100%; padding: 6px 10px; font-size: 12px; }
.nav__foot .ub-pool-banner,
.nav__foot .ub-warn { font-size: 11px; line-height: 1.35; }

@media (max-height: 860px) {
  .nav__foot .ub-bar,
  .nav__foot .ub-full > div[style],
  .nav__foot .ub-meta,
  .nav__foot .ub-actions .ub-btn-ghost { display: none; }
  .nav__foot .ub-full { padding: 8px; }
}

/* Wadah kartu sendiri ikut melebar melampaui kaki: terukur 276px di kaki 203px
   pada akun institusi, karena nama institusi yang panjang (`<h4>` 214px)
   mendorong lebar-intrinsik seluruh rantai. `min-width: 0` saja tidak cukup —
   rantainya harus DIBATASI di wadah teratasnya, dan teks panjangnya harus
   diizinkan patah. */
.nav__foot .risos-usage-bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.nav__foot .ub-header h4 {
  font-size: 12px; line-height: 1.25; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__foot .ub-header p { font-size: 11px; margin: 2px 0 0; }
.nav__foot .ub-pool-banner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-height: 860px) {
  .nav__foot .ub-pool-banner { display: none; }
}

/* Kartu v1 (`.ub-full`) ringkas di TINGGI LAYAR BERAPA PUN, bukan hanya di
   bawah 860px. Alasannya beda dari kartu lain: v2 dan trial memang dirancang
   untuk kolom sempit dan hanya perlu mengalah saat ruangnya benar-benar
   kurang, sedangkan v1 dirancang untuk bilah LEBAR di kepala halaman — di kaki
   sidebar ia besar bukan karena layarnya pendek, melainkan karena ia memang
   bukan bentuk untuk tempat ini. Terukur 1440×900 sebelum aturan ini:
   institusi 330px = 39% sidebar, 8 dari 13 butir menu muat.
   Angka lengkapnya tidak hilang — ia tetap ada di halaman Paket & kuota. */
.nav__foot .ub-full > div[style],
.nav__foot .ub-meta,
.nav__foot .ub-pool-banner,
.nav__foot .ub-actions .ub-btn-ghost { display: none; }
.nav__foot .ub-full .ub-bar { margin: 5px 0 0; }

/* Blok "reset Co-Pilot" di kartu v2 juga: satu baris tanggal yang, di kolom
   203px, memakan dua baris dan 70px. Ia informasi rujukan, bukan penanda
   keadaan — rumahnya halaman langganan. */
.nav__foot .ub-reset-info { display: none; }