/**
 * components.css — Shared UI components
 * Depends on: tokens.css
 *
 * Covers: buttons, form fields, panels, badges, tables,
 *         alert banners, status strips, AI synthesis cards
 */

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp2);
  padding: var(--sp2) var(--sp5);
  border-radius: var(--rmd);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; border: none;
  transition: all var(--tr);
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btnp { background: var(--pri); color: #fff; }
.btnp:hover { background: var(--priH); box-shadow: var(--shmd); }

.btns { background: var(--sOff); color: var(--txt); border: 1px solid var(--brd); }
.btns:hover { background: var(--sOff2); }

.btnd { background: var(--errHi); color: var(--err); border: 1px solid color-mix(in oklab, var(--err) 20%, transparent); }
.btnd:hover { background: color-mix(in oklab, var(--errHi) 80%, var(--err) 20%); }

.btn-ok { background: var(--okHi); color: var(--ok); border: 1px solid color-mix(in oklab, var(--ok) 20%, transparent); }
.btn-ok:hover { background: color-mix(in oklab, var(--okHi) 80%, var(--ok) 20%); }

.bgrp { display: flex; gap: var(--sp3); flex-wrap: wrap; margin-top: var(--sp4); }

/* Loading spinner (inline, inherits button color) */
.btn-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Form fields ────────────────────────────────────────────────────────── */
.igrp { display: flex; flex-direction: column; gap: var(--sp2); }

.ilb { font-size: var(--text-sm); font-weight: 500; color: var(--txt); }
.ilb .hint { font-size: var(--text-xs); color: var(--txtM); font-weight: 400; }

.ifd {
  width: 100%; padding: var(--sp2) var(--sp3);
  background: var(--bg); border: 1px solid var(--brd);
  border-radius: var(--rmd); font-size: var(--text-sm);
}
.ifd:focus { outline: 2px solid var(--pri); outline-offset: -1px; border-color: var(--pri); }
.ifd.error { border-color: var(--err); outline-color: var(--err); }

.irg { font-size: var(--text-xs); color: var(--txtM); margin-top: 2px; }

/* Password field wrapper */
.pw-wrap { position: relative; }
.pw-wrap .ifd { padding-right: 2.5rem; }
.pw-toggle {
  position: absolute; right: var(--sp2); top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--txtM); cursor: pointer; padding: 2px;
}
.pw-toggle:hover { color: var(--txt); }

/* Checkbox row */
.chk-row {
  display: flex; align-items: center; gap: var(--sp2);
  font-size: var(--text-sm); color: var(--txtM);
  cursor: pointer; user-select: none;
}
.chk-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pri); cursor: pointer; }

/* ─── Panels / cards ─────────────────────────────────────────────────────── */
.panel {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--rxl); padding: var(--sp6);
  box-shadow: var(--shsm);
}

.phd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp4); margin-bottom: var(--sp6);
}

.ptit {
  font-size: var(--text-lg); font-weight: 700;
  display: flex; align-items: center; gap: var(--sp2);
}

.psub { font-size: var(--text-sm); color: var(--txtM); margin-top: var(--sp1); }

/* KPI tiles */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp4); }

.kpi {
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--rxl); padding: var(--sp5);
  box-shadow: var(--shsm);
}
.kico { width: 36px; height: 36px; border-radius: var(--rmd); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp3); }
.klb  { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--txtM); }
.kval { font-size: var(--text-xl); font-weight: 800; font-family: var(--fD); line-height: 1; margin: var(--sp1) 0; font-variant-numeric: tabular-nums; }
.ksub { font-size: var(--text-xs); color: var(--txtM); }

/* KPI icon backgrounds */
.it  { background: var(--priHi); color: var(--pri); }
.ig2 { background: var(--okHi);  color: var(--ok);  }
.ir  { background: var(--errHi); color: var(--err); }
.igo { background: var(--goldHi);color: var(--gold);}
.ib  { background: var(--blueHi);color: var(--blue);}
.iw  { background: var(--warnHi);color: var(--warn);}
.ip  { background: var(--purpHi);color: var(--purp);}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600;
  padding: 3px 10px; border-radius: var(--rfull);
  white-space: nowrap;
}
.badge-ok      { background: var(--okHi);   color: var(--ok);   }
.badge-warn    { background: var(--warnHi); color: var(--warn); }
.badge-err     { background: var(--errHi);  color: var(--err);  }
.badge-blue    { background: var(--blueHi); color: var(--blue); }
.badge-purp    { background: var(--purpHi); color: var(--purp); }
.badge-gold    { background: var(--goldHi); color: var(--gold); }
.badge-neutral { background: var(--sOff2);  color: var(--txtM); }

/* Approval state badges */
.qa-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--rfull); }
.qa-badge-pending  { background: var(--warnHi); color: var(--warn); }
.qa-badge-approved { background: var(--okHi);   color: var(--ok);   }
.qa-badge-rejected { background: var(--errHi);  color: var(--err);  }
.qa-badge-review   { background: var(--blueHi); color: var(--blue); }

/* Language badge */
.lang-badge { background: var(--blueHi); color: var(--blue); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.atbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.atbl th {
  text-align: left; padding: var(--sp2) var(--sp3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txtM);
  border-bottom: 1px solid var(--brd);
}
.atbl td { padding: var(--sp3); border-bottom: 1px solid var(--div); vertical-align: top; }
.atbl tr:last-child td { border-bottom: none; }
.atbl tr:hover td { background: var(--sOff); }

/* Table skeleton loader rows */
.tbl-skeleton td { background: var(--sOff2); border-radius: var(--rmd); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Small view-link button for table rows */
.btn-view {
  display: inline-flex; align-items: center; gap: var(--sp1);
  font-size: var(--text-xs); font-weight: 600; padding: 2px 10px;
  border-radius: var(--rmd); background: var(--sOff);
  border: 1px solid var(--brd); color: var(--pri);
  cursor: pointer; text-decoration: none;
  transition: background var(--tr), border-color var(--tr);
}
.btn-view:hover { background: var(--priHi); border-color: var(--pri); }

/* ─── Alert banners ───────────────────────────────────────────────────────── */
.aal {
  border-radius: var(--rlg); padding: var(--sp4) var(--sp5);
  display: flex; gap: var(--sp3); align-items: flex-start;
  margin-bottom: var(--sp3);
}
.aalic { flex-shrink: 0; margin-top: 2px; }
.aalb  { flex: 1; }
.aalt  { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.aald  { font-size: var(--text-sm); color: var(--txt); }

.aerr  { background: var(--errHi);  color: var(--err);  }
.awarn { background: var(--warnHi); color: var(--warn); }
.ainfo { background: var(--blueHi); color: var(--blue); }
.aok   { background: var(--okHi);   color: var(--ok);   }

/* ─── Inline form error message ──────────────────────────────────────────── */
.form-error {
  display: flex; align-items: flex-start; gap: var(--sp2);
  padding: var(--sp3) var(--sp4);
  background: var(--errHi); color: var(--err);
  border-radius: var(--rmd); font-size: var(--text-sm);
}
.form-error svg { flex-shrink: 0; margin-top: 1px; }

/* ─── AI synthesis components ────────────────────────────────────────────── */

/* Status strip (generating / persisted / not-persisted / error) */
.ai-status-strip {
  padding: var(--sp2) var(--sp4); border-radius: var(--rmd);
  font-size: var(--text-xs); display: flex; align-items: center; gap: var(--sp2);
}
.ai-status-generating   { background: var(--blueHi); color: var(--blue); }
.ai-status-persisted    { background: var(--okHi);   color: var(--ok);   }
.ai-status-not-persisted{ background: var(--warnHi); color: var(--warn); }
.ai-status-error        { background: var(--errHi);  color: var(--err);  }

.ai-spin {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}

/* Safety boundary card — always visible, never hidden */
.safety-boundary-card {
  background: var(--warnHi);
  border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
  border-radius: var(--rlg); padding: var(--sp4) var(--sp5);
  display: flex; gap: var(--sp3); align-items: flex-start;
}
.safety-boundary-card p { font-size: var(--text-sm); color: var(--warn); max-width: none; margin: 0; }

/* Module observation card */
.obs-card {
  border: 1px solid var(--brd); border-radius: var(--rmd);
  padding: var(--sp3) var(--sp4); margin-bottom: var(--sp3);
  background: var(--surf2);
}
.obs-card-header { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); }
.obs-module-name { font-size: var(--text-sm); font-weight: 700; text-transform: capitalize; font-family: var(--fD); }
.obs-row { font-size: var(--text-sm); margin: 0 0 var(--sp1); line-height: 1.5; }
.obs-row strong { color: var(--txtM); font-weight: 600; }

/* Zone pills on obs cards */
.obs-zone-pill { font-size: var(--text-xs); padding: 2px 9px; border-radius: var(--rfull); font-weight: 600; }
.obs-zone-normal { background: var(--okHi);   color: var(--ok);   }
.obs-zone-ringan { background: var(--blueHi); color: var(--blue); }
.obs-zone-sedang { background: var(--goldHi); color: var(--gold); }
.obs-zone-berat  { background: var(--errHi);  color: var(--err);  }

/* TCM interpretation collapsible */
.tcm-section details { border: 1px solid var(--brd); border-radius: var(--rmd); overflow: hidden; }
.tcm-section summary {
  padding: var(--sp3) var(--sp4); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sOff);
}
.tcm-section summary::after { content: '▾'; font-size: var(--text-xs); }
.tcm-section details[open] summary::after { content: '▴'; }
.tcm-section-body { padding: var(--sp4); display: flex; flex-direction: column; gap: var(--sp3); }
.tcm-item { font-size: var(--text-sm); }
.tcm-lens { font-weight: 700; color: var(--txt); }
.tcm-grounding {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--goldHi); color: var(--gold);
  padding: 1px 6px; border-radius: var(--rfull); margin-left: var(--sp2);
  vertical-align: middle;
}

/* Acknowledge checkbox (required before sharing) */
.ack-row {
  display: flex; align-items: flex-start; gap: var(--sp2);
  padding: var(--sp3) var(--sp4);
  background: var(--surf2); border: 1px solid var(--brd);
  border-radius: var(--rmd); font-size: var(--text-sm);
  cursor: pointer;
}
.ack-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--pri); }

/* Scan meta row (scan_id, model, prompt_version, language) */
.synthesis-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp2);
  padding: var(--sp2) 0; border-bottom: 1px solid var(--div);
  margin-bottom: var(--sp3);
}
.meta-pill {
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: var(--rfull);
  background: var(--sOff2); color: var(--txtM);
  font-family: ui-monospace, monospace;
}

/* Error panel (Page 5) */
.ai-error-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp4); padding: var(--sp8) var(--sp5); text-align: center;
}
.ai-error-icon { color: var(--err); }
.ai-error-icon.compliance { color: var(--warn); }
.ai-error-headline { font-size: var(--text-base); font-weight: 700; color: var(--txt); }
.ai-error-body { font-size: var(--text-sm); color: var(--txtM); max-width: 30ch; }
.ai-error-ref { font-size: var(--text-xs); color: var(--txtF); font-family: ui-monospace, monospace; }

/* ─── Scan meta detail grid (Page 7) ─────────────────────────────────────── */
.bo-meta-grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp1) var(--sp6); font-size: var(--text-sm);
}
.bo-meta-grid dt { color: var(--txtM); font-weight: 600; white-space: nowrap; }
.bo-meta-grid dd { color: var(--txt); }

/* ─── Stat row (Page 10 Audit Monitor) ───────────────────────────────────── */
.bo-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp4); margin-bottom: var(--sp6); }
.bo-stat { background: var(--sOff); border: 1px solid var(--brd); border-radius: var(--rlg); padding: var(--sp4); }
.bo-stat-val { font-size: var(--text-xl); font-weight: 800; font-family: var(--fD); font-variant-numeric: tabular-nums; line-height: 1; margin: var(--sp1) 0; }
.bo-stat-lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--txtM); }

/* ─── Progress bar (quota) ───────────────────────────────────────────────── */
.prog-wrap { margin: var(--sp2) 0 var(--sp4); }
.prog-hd { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--txtM); margin-bottom: 4px; }
.prog-track { height: 10px; background: var(--sOff2); border-radius: var(--rfull); overflow: hidden; }
.prog-fill { height: 100%; border-radius: var(--rfull); transition: width .7s cubic-bezier(.16, 1, .3, 1); background: var(--pri); }
.prog-fill.warn { background: var(--warn); }
.prog-fill.err  { background: var(--err);  }

/* ─── Breadcrumb back button ─────────────────────────────────────────────── */
.detail-back {
  display: inline-flex; align-items: center; gap: var(--sp2);
  font-size: var(--text-sm); font-weight: 600; color: var(--pri);
  background: none; border: none; cursor: pointer; padding: 0;
  margin-bottom: var(--sp4); text-decoration: none;
}
.detail-back:hover { color: var(--priH); }

/* ─── Raw JSON code block ────────────────────────────────────────────────── */
.pre-block {
  background: var(--sOff); border: 1px solid var(--brd); border-radius: var(--rmd);
  padding: var(--sp4); font-size: var(--text-xs); font-family: ui-monospace, monospace;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  color: var(--txt); line-height: 1.7; max-height: 440px; overflow-y: auto;
}

/* ─── Empty & loading states ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--sp16) var(--sp8);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp4);
  color: var(--txtM);
}
.empty-state svg { opacity: .35; }
.empty-state h3 { font-size: var(--text-base); font-weight: 600; color: var(--txt); }
.empty-state p  { font-size: var(--text-sm); max-width: 36ch; }

/* Dev-only banner */
.devonly-banner {
  background: var(--goldHi);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-radius: var(--rlg); padding: var(--sp3) var(--sp5);
  display: flex; align-items: center; gap: var(--sp3);
  font-size: var(--text-sm); color: var(--gold); margin-bottom: var(--sp4);
}

/* ─── Patient Timeline (Phase 0) ────────────────────────────────────────── */

/* Visit card — lighter than .panel; used inside the timeline feed */
.visit-card {
  flex: 1;
  margin-bottom: var(--sp3);
  background: var(--surf2);
  border: 1px solid var(--brd);
  border-radius: var(--rlg);
  padding: var(--sp4) var(--sp5);
}
.visit-card:last-child { margin-bottom: 0; }

/* Timeline vertical track */
.tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.tl-connector {
  width: 1.5px;
  flex: 1;
  min-height: var(--sp4);
  background: var(--div);
  margin-top: var(--sp1);
}

/* Module mini-grid (scan zone summary, 4-up) */
.module-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp2);
  margin-top: var(--sp3);
}
.module-mini-cell {
  background: var(--sOff);
  border-radius: var(--rmd);
  padding: var(--sp2) var(--sp3);
}
.module-mini-name  { font-size: var(--text-xs); color: var(--txtM); margin-bottom: 2px; }
.module-mini-delta { font-size: var(--text-xs); margin-top: 2px; }
.delta-up   { color: var(--ok);   }
.delta-down { color: var(--err);  }
.delta-flat { color: var(--txtF); }

/* Sparkline — SVG polyline, rendered inline by _sparkline() */

/* Filter chips (window + type selectors) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--sp1) var(--sp3);
  border-radius: var(--rfull);
  border: 1px solid var(--brd);
  color: var(--txtM);
  background: none;
  cursor: pointer;
  transition: all var(--tr);
}
.filter-chip:hover  { background: var(--sOff); color: var(--txt); }
.filter-chip.active { background: var(--sOff2); color: var(--txt); border-color: var(--pri); font-weight: 600; }

/* AI output quote / snippet */
.ai-quote {
  margin-top: var(--sp3);
  padding-left: var(--sp3);
  border-left: 2px solid var(--purp);
  font-size: var(--text-sm);
  color: var(--txtM);
  line-height: 1.55;
  border-radius: 0;
}

/* Observation vitals row */
.obs-vitals-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp4);
  margin-top: var(--sp3);
}
.obs-vital-item  { display: flex; flex-direction: column; gap: 2px; }
.obs-vital-label { font-size: var(--text-xs); color: var(--txtM); }
.obs-vital-val   { font-size: var(--text-sm); font-weight: 500; }

/* ─── Colour utilities ───────────────────────────────────────────────────── */
.cok   { color: var(--ok);   }
.cwarn { color: var(--warn); }
.cbad  { color: var(--err);  }
.cinfo { color: var(--pri);  }

@media (max-width: 600px) {
  .bo-stat-row { grid-template-columns: 1fr 1fr; }
  .kgrid { grid-template-columns: 1fr; }
}

/* ── Billing ─────────────────────────────────────────────── */

.billing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp6);
  max-width: 900px;
}

.billing-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rlg);
  padding: var(--sp6);
  box-shadow: var(--shsm);
}

.billing-card__title {
  font-family: var(--fD);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp4);
  color: var(--txt);
}

.billing-card__subtitle {
  font-size: var(--text-sm);
  color: var(--txtM);
  margin-bottom: var(--sp4);
}

/* Quota meters */
.quota-meter-wrap    { margin-bottom: var(--sp4); }
.quota-meter-label   {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--txtM);
  margin-bottom: var(--sp1);
}
.quota-meter-track   {
  height: 8px;
  background: var(--sOff2);
  border-radius: var(--rfull);
  overflow: hidden;
}
.quota-meter-fill    {
  height: 100%;
  border-radius: var(--rfull);
  background: var(--ok);
  transition: width var(--tr), background var(--tr);
}
.quota-meter-fill--warn { background: var(--warn); }
.quota-meter-fill--err  { background: var(--err);  }

/* Gateway badges */
.badge-xendit   { background: var(--priHi); color: var(--pri);  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--rfull); font-weight: 500; }
.badge-midtrans { background: var(--blueHi); color: var(--blue); font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--rfull); font-weight: 500; }

/* Billing status badges */
.badge-succeeded { background: var(--okHi);   color: var(--ok);   font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--rfull); font-weight: 500; }
.badge-failed    { background: var(--errHi);  color: var(--err);  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--rfull); font-weight: 500; }
.badge-pending   { background: var(--goldHi); color: var(--gold); font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--rfull); font-weight: 500; }

/* Billing tabs */
.billing-tabs         { display: flex; gap: 0; border-bottom: 1px solid var(--brd); margin-bottom: var(--sp5); }
.billing-tab          { padding: var(--sp2) var(--sp5); font-size: var(--text-sm); font-weight: 500; color: var(--txtM); border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--tr), border-color var(--tr); }
.billing-tab:hover    { color: var(--txt); }
.billing-tab.active   { color: var(--pri); border-bottom-color: var(--pri); }

/* Settings tabs (reusing billing tabs pattern) */
.settings-tabs        { display: flex; gap: var(--sp4); border-bottom: 1px solid var(--brd); margin-bottom: var(--sp6); overflow-x: auto; }
.settings-tab         { padding: var(--sp2) 0; font-size: var(--text-sm); font-weight: 600; color: var(--txtM); border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--tr); background: none; border-top: none; border-left: none; border-right: none; }
.settings-tab:hover   { color: var(--txt); }
.settings-tab.active  { color: var(--pri); border-bottom-color: var(--pri); }

/* Bento Box Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp6);
  align-items: start;
}
.bento-card {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rxl);
  padding: var(--sp6);
  box-shadow: var(--shsm);
}
.billing-tab--active  { color: var(--pri); border-bottom-color: var(--pri); }

/* Plan selector (plan management page) */
.plan-selector-grid   {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp4);
  margin-bottom: var(--sp6);
}
.plan-card            {
  border: 2px solid var(--brd);
  border-radius: var(--rlg);
  padding: var(--sp5);
  cursor: pointer;
  transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.plan-card:hover      { border-color: var(--pri); box-shadow: var(--shmd); }
.plan-card--selected  { border-color: var(--pri); background: var(--priHi); }
.plan-card--current   { border-color: var(--ok);  background: var(--okHi); cursor: default; }
.plan-card__name      { font-weight: 700; font-family: var(--fD); margin-bottom: var(--sp2); }
.plan-card__price     { color: var(--pri); font-weight: 500; margin-bottom: var(--sp3); }
.plan-card__meta      { font-size: var(--text-sm); color: var(--txtM); line-height: 1.5; }


/* --- Billing UI Layout & Visual Polish --- */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--sp6);
  align-items: start;
}

.btn-sm {
  padding: 4px 12px;
  font-size: var(--text-xs);
  border-radius: var(--rsm);
}

.atbl .tbl-empty {
  text-align: center;
  padding: var(--sp8) var(--sp4);
  color: var(--txtM);
  background: var(--sOff);
  border-bottom: none;
  font-size: var(--text-sm);
  border-radius: var(--rmd);
}

.atbl .tbl-empty::before {
  content: "\1F4C5"; /* calendar icon */
  display: block;
  font-size: 24px;
  margin-bottom: var(--sp2);
  opacity: 0.5;
}

/* Quota Meter Polish */
.quota-meter-track {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.quota-meter-fill {
  background: linear-gradient(90deg, color-mix(in oklab, var(--ok) 80%, black 20%), var(--ok));
}
.quota-meter-fill--warn {
  background: linear-gradient(90deg, color-mix(in oklab, var(--warn) 80%, black 20%), var(--warn));
}

/* --- Billing UI Layout & Visual Polish --- */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--sp6);
  align-items: start;
}

.btn-sm {
  padding: 4px 12px;
  font-size: var(--text-xs);
  border-radius: var(--rsm);
}

.atbl .tbl-empty {
  text-align: center;
  padding: var(--sp8) var(--sp4);
  color: var(--txtM);
  background: var(--sOff);
  border-bottom: none;
  font-size: var(--text-sm);
  border-radius: var(--rmd);
}

.atbl .tbl-empty::before {
  content: "\1F4C5"; /* calendar icon */
  display: block;
  font-size: 24px;
  margin-bottom: var(--sp2);
  opacity: 0.5;
}

/* Quota Meter Polish */
.quota-meter-track {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.quota-meter-fill {
  background: linear-gradient(90deg, color-mix(in oklab, var(--ok) 80%, black 20%), var(--ok));
}
.quota-meter-fill--warn {
  background: linear-gradient(90deg, color-mix(in oklab, var(--warn) 80%, black 20%), var(--warn));
}
.quota-meter-fill--err {
  background: linear-gradient(90deg, color-mix(in oklab, var(--err) 80%, black 20%), var(--err));
}

/* Add slight depth to cards */
.billing-card {
  box-shadow: var(--shmd);
}

/* ─── Glass Modals ───────────────────────────────────────────────────────── */
.glass-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: var(--sp4);
  animation: glassFadeIn 0.2s ease-out;
}

.glass-modal {
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rmd);
  box-shadow: var(--shlg);
  display: flex; flex-direction: column;
  width: 100%; max-height: 90dvh;
  overflow: hidden;
  animation: glassModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-modal-header {
  padding: var(--sp4) var(--sp5);
  border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: space-between;
}
.glass-modal-header h2 {
  font-size: var(--text-lg); font-weight: 600; color: var(--txt);
  margin: 0;
}

.glass-modal-body {
  padding: var(--sp5);
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--sp4);
}

.glass-modal-footer {
  padding: var(--sp4) var(--sp5);
  border-top: 1px solid var(--brd);
  display: flex; justify-content: flex-end; gap: var(--sp3);
  background: var(--bgH);
}

@keyframes glassFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes glassModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}