/* Control Center — Carbon Titanium (black + titanium blue), Helvetica.
   Single source of truth. Old class/var names (gold, parchment) are kept
   so we don't have to rewrite every view — they just resolve to the new
   black + titanium-blue palette. */
:root {
  /* ── LIGHT & AIRY theme (2026-06-28) ──────────────────────────────────────
     Token NAMES are unchanged from the old dark theme so every existing class
     keeps working; only the VALUES flipped. "--white" etc. are text-role
     tokens (always used as `color:`), so they now hold dark ink on light paper.
     Backgrounds go white/light-grey; one calm titanium-blue accent. */

  /* Paper: page is a soft cool grey, cards are pure white → quiet depth. */
  --bg-void:   #f5f7fa;   /* page canvas            */
  --bg-base:   #ffffff;   /* card inner / wells     */
  --bg-raised: #ffffff;   /* raised surfaces        */
  --bg-panel:  #ffffff;   /* cards, KPI tiles       */
  --bg-hover:  #f0f3f7;   /* row / control hover    */
  --bg-active: #e7ecf2;   /* pressed / selected     */

  --border:       #e3e8ee;
  --border-light: #eef1f5;
  --border-blue:  #bcdcec;

  /* Titanium-blue accent, deepened for AA contrast on white. */
  --blue:        #1d7fb8;
  --blue-bright: #15689b;
  --blue-deep:   #cfe6f3;   /* light fill / soft borders */
  --blue-glow:   rgba(29, 127, 184, 0.16);
  --blue-dim:    rgba(29, 127, 184, 0.09);
  --blue-faint:  rgba(29, 127, 184, 0.05);

  /* Aliases so old markup keeps working (gold → blue everywhere) */
  --gold:        var(--blue);
  --gold-bright: var(--blue-bright);
  --gold-dim:    var(--blue-dim);

  /* Ink (text roles), dark → light ramp. */
  --white:     #18222e;   /* primary text   */
  --off-white: #41505f;   /* secondary text */
  --muted:     #69788a;   /* tertiary text  */
  --faint:     #95a1b1;   /* hints / labels */

  --green: #16955a;
  --red:   #d83a48;
  --amber: #b4740f;

  --sidebar-w: 240px;
  --topbar-h:  56px;

  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Spacing scale + soft, light elevation (the "airy" lift). */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

  --elev-1: 0 1px 2px rgba(20,35,55,0.06);
  --elev-2: 0 4px 16px rgba(20,35,55,0.08);
  --elev-3: 0 18px 44px rgba(20,35,55,0.14);

  /* Money carries meaning by color: capital on hand = titanium (potential),
     realized sales = green (booked). Reused by the dashboard hero. */
  --money-on:   var(--blue);
  --money-sold: var(--green);

  --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-void);
  color: var(--white);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-bright); text-decoration: underline; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.dim { color: var(--muted); }
.faint { color: var(--faint); }

/* Force all Helvetica — overrides any inline Cormorant Garamond / DM Sans /
   DM Mono references inherited from the old parchment theme. */
[style*="Cormorant Garamond"],
[style*="DM Sans"] {
  font-family: var(--font-base) !important;
}
[style*="DM Mono"] { font-family: var(--font-mono) !important; }

h1, h2, h3, h4 {
  font-family: var(--font-base);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
}

/* ----------------- AUTH ----------------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 50% -10%, #e8f2f8 0%, var(--bg-void) 55%);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--elev-3);
}
.brand { text-align: center; margin-bottom: 24px; }
.brand-eyebrow {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue); font-weight: 600;
}
.brand-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 8px 0 6px;
  color: var(--white);
}
.brand-sub { color: var(--muted); font-size: 13px; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.lbl, .fld label, label.lbl {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white);
  font-weight: 600;
  margin-bottom: -8px;
}

.ipt, .fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--white);
  transition: border-color 120ms, box-shadow 120ms;
}
.ipt:focus, .fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.ipt-sm { padding: 8px 12px; font-size: 13px; }
.code-input {
  letter-spacing: 8px; text-align: center;
  font-family: var(--font-mono); font-size: 22px;
}

/* ----------------- BUTTONS (everything blue) ----------------- */
.btn, .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue-deep);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.btn:hover, .btn-gold:hover {
  background: var(--blue-bright);
  border-color: var(--blue);
  text-decoration: none;
  color: #fff;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn-outline:hover { background: var(--blue-dim); color: var(--blue-bright); }
.btn-danger { background: var(--red); border-color: #b8323e; }
.btn-danger:hover { background: #ff7682; border-color: var(--red); }
.btn-warn { background: var(--amber); border-color: #c98a2f; color: #1a1814; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--off-white);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-base); font-size: 13px; cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--blue-deep); color: var(--white); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.link-btn { background: none; border: none; color: var(--blue); cursor: pointer; font-family: inherit; padding: 8px; }
.link { color: var(--blue); text-decoration: none; font-weight: 500; }
.link:hover { color: var(--blue-bright); text-decoration: underline; }
.back { color: var(--blue); text-decoration: none; font-size: 12.5px; display: inline-block; margin-bottom: 14px; }
/* No ::before arrow — every view hardcodes "← " in the link text, so the CSS
   arrow rendered a doubled "← ←" on all back links. */
.back:hover { text-decoration: underline; }

.err {
  background: rgba(255,93,107,0.08);
  color: var(--red);
  border: 1px solid rgba(255,93,107,0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}
.footnote, .footnote-form {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: var(--muted);
}

/* ----------------- TOP / SIDEBAR APP SHELL ----------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 20px 14px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 0 10px 18px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-brand .brand-mini-title {
  font-family: var(--font-base);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.sidenav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.sidenav-group-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 12px 12px 6px;
  font-weight: 700;
}
.sidenav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  color: var(--off-white);
  text-decoration: none;
  font-size: 13.5px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sidenav-link .ic {
  color: var(--blue);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sidenav-link .ic svg { width: 16px; height: 16px; }
.sidenav-link:hover {
  background: var(--bg-hover);
  color: var(--white);
  text-decoration: none;
}
.sidenav-link.is-active {
  background: var(--blue-dim);
  color: var(--white);
  border-color: var(--blue-deep);
  font-weight: 600;
}
.sidenav-link.is-active .ic { color: var(--blue-bright); }
.sidebar-foot {
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 10px;
}
.me-block { padding: 0 8px; }
.me-label {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.me-email { font-size: 12px; color: var(--off-white); word-break: break-all; margin-top: 2px; }

.app-main { flex: 1; min-width: 0; background: var(--bg-void); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 24px; }
.brand-mini { display: flex; align-items: baseline; gap: 10px; }
.topnav { display: flex; gap: 6px; }
.topnav-link {
  color: var(--off-white); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius); font-size: 13px;
}
.topnav-link.is-active { background: var(--blue-dim); color: var(--blue-bright); }
.topnav-link:hover { background: var(--bg-hover); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.me { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); }

.page {
  padding: 28px 32px 60px;
  max-width: 100%;
  margin: 0;
}
.page-title {
  font-family: var(--font-base);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--white);
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--white); padding: 8px 10px; border-radius: var(--radius);
  cursor: pointer; font-size: 14px;
}

/* ----------------- KPI ----------------- */
/* Balanced grids: explicit column counts so a row never leaves one orphan card
   stranded (the old auto-fit did: 6 cards → 5 + 1). Cards stay equal width and
   left-aligned; partial rows look intentional. Default 4-up; pages with 5 or 6
   cards opt into .cols-5 / .cols-3. Phones (≤900 / ≤480) are forced to 2 / 1
   columns by the critical CSS in _head.ejs, which wins over everything here. */
.kpi-row, .bigkpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.bigkpi-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bigkpi-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Mid widths (tablet / small laptop): step everything down to 3 so cards keep a
   comfortable size before the phone breakpoint takes over at 900px. */
@media (min-width: 901px) and (max-width: 1200px) {
  .kpi-row, .bigkpi-row,
  .bigkpi-row.cols-3, .bigkpi-row.cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kpi, .bigkpi {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: relative;
  transition: border-color 120ms;
}
.kpi:hover, .bigkpi:hover { border-color: var(--border-blue); }
.kpi-label, .bigkpi .lbl {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kpi-value, .bigkpi .val {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--white);
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.bigkpi .val { font-size: 28px; }
.bigkpi .sub { font-size: 11.5px; color: var(--faint); margin-top: 4px; }

/* ----------------- CARD ----------------- */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  gap: 16px; flex-wrap: wrap;
}
.card-title {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--white);
}
.search-wrap { display: flex; gap: 8px; align-items: center; }

/* ----------------- TABLE ----------------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: sticky; top: 0;
}
.tbl tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--off-white);
}
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.empty { text-align: center; padding: 28px; color: var(--muted); }

/* ----------------- STATUS PILLS ----------------- */
.status {
  display: inline-block;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.status-active, .status-trialing,
.status-paid, .status-success, .status-succeeded {
  background: rgba(61,213,132,0.10); color: var(--green); border-color: rgba(61,213,132,0.25);
}
.status-past_due, .status-incomplete, .status-pending {
  background: rgba(255,181,71,0.10); color: var(--amber); border-color: rgba(255,181,71,0.25);
}
.status-canceled, .status-inactive, .status-unpaid, .status-failed, .status-fail {
  background: rgba(255,93,107,0.10); color: var(--red); border-color: rgba(255,93,107,0.25);
}
/* Affiliate status variants — reuse the existing pill palette. */
.status-approved {
  background: rgba(61,213,132,0.10); color: var(--green); border-color: rgba(61,213,132,0.25);
}
.status-paused {
  background: rgba(255,181,71,0.10); color: var(--amber); border-color: rgba(255,181,71,0.25);
}
.status-void, .status-reversed, .status-disabled, .status-churned {
  background: rgba(255,93,107,0.10); color: var(--red); border-color: rgba(255,93,107,0.25);
}
.badge {
  background: var(--blue-dim); color: var(--blue-bright);
  font-size: 10px; padding: 2px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 4px;
  border: 1px solid var(--blue-deep);
}

/* ----------------- USER DETAIL ----------------- */
.user-head { margin-bottom: 22px; }
.user-title {
  font-family: var(--font-base);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--white);
}
.user-sub { color: var(--muted); font-size: 13px; }
.dl {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 24px;
  padding: 16px 20px; margin: 0;
}
.dl dt {
  color: var(--muted); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.dl dd { color: var(--white); margin: 0; font-size: 14px; word-break: break-word; }

/* ----------------- FORMS / ACTIONS / TOASTS ----------------- */
.btn-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
}
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.toast-tray {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 1000;
}
.toast {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-width: 340px;
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }

/* ----------------- ACTION GRID ON USER DETAIL ----------------- */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 20px;
}
.action-card {
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.action-card .a-title { font-size: 13px; font-weight: 600; color: var(--white); }
.action-card .a-desc { font-size: 12px; color: var(--muted); flex: 1; }

/* ----------------- SECTIONS / GRID ----------------- */
.section-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 18px;
}
@media (max-width: 1100px) { .section-grid { grid-template-columns: 1fr; } }

.col-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .col-grid-2 { grid-template-columns: 1fr; } }

.live-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green);
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(61,213,132,0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,213,132,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(61,213,132,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,213,132,0); }
}

/* ----------------- DELTA / TREND ----------------- */
.delta { font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--muted); }

/* ----------------- SPARKBAR ----------------- */
.sparkbar {
  display: flex; align-items: flex-end; gap: 2px;
  height: 42px; margin-top: 8px;
}
.sparkbar > span {
  flex: 1; background: var(--blue-dim);
  border-radius: 2px 2px 0 0; min-height: 2px;
  transition: background 120ms;
}
.sparkbar > span.hi { background: var(--blue); }
.sparkbar > span:hover { background: var(--blue-bright); }

/* ----------------- HEALTH ----------------- */
.health { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.health-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.health-row .label { font-size: 13px; color: var(--off-white); }
.health-row .val { font-family: var(--font-mono); font-size: 13px; color: var(--white); }
.health-ok { color: var(--green); }
.health-warn { color: var(--amber); }
.health-bad { color: var(--red); }

/* ----------------- BILLING ----------------- */
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .bill-grid { grid-template-columns: 1fr; } }
.bill-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0; overflow: hidden;
}
.bill-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center;
}
.bill-card-head h3 {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px; font-weight: 600;
}
.bill-card-body { padding: 14px 18px; }

.pm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.pm-row:last-child { border-bottom: none; }
.pm-card-line { font-family: var(--font-mono); font-size: 13px; }
.default-tag {
  background: var(--blue-dim); color: var(--blue-bright);
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px;
  border: 1px solid var(--blue-deep);
}

.notice {
  background: var(--bg-void); border: 1px dashed var(--border);
  padding: 12px 14px; border-radius: var(--radius);
  color: var(--off-white); font-size: 13px;
}
.notice.warn { border-color: rgba(255,181,71,0.35); color: var(--amber); }
.notice.err  { border-color: rgba(255,93,107,0.4);  color: var(--red); }

/* ----------------- LIVE TABLE ACTIONS ----------------- */
.tbl tbody td.actions { text-align: right; white-space: nowrap; }
.tbl tbody td.actions form { display: inline-block; margin-left: 4px; }
.tbl tbody td .mini {
  padding: 4px 10px; font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--off-white);
  cursor: pointer;
  font-family: var(--font-base);
}
.tbl tbody td .mini:hover { background: var(--bg-hover); border-color: var(--blue-deep); color: var(--white); }
.tbl tbody td .mini.danger { color: var(--red); border-color: rgba(255,93,107,0.3); }
.tbl tbody td .mini.danger:hover { background: rgba(255,93,107,0.08); }

/* ----------------- OPERATIONS / EVENT FEED ----------------- */
.event-feed { padding: 4px 0; }
.event-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr 130px;
  gap: 14px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--bg-hover); }
.event-kind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-void);
  color: var(--off-white);
  width: fit-content;
}
.event-kind.inventory { color: var(--blue-bright); border-color: var(--blue-deep); background: var(--blue-dim); }
.event-kind.deal      { color: #6b3fd4;          border-color: #c9b6f2; background: rgba(123,86,224,0.08); }
.event-kind.invoice   { color: var(--amber);     border-color: rgba(255,181,71,0.4); background: rgba(255,181,71,0.08); }
.event-kind.payment   { color: var(--green);     border-color: rgba(61,213,132,0.4); background: rgba(61,213,132,0.10); }
.event-kind.listing   { color: #1184ad;          border-color: #9ed3e6; background: rgba(17,132,173,0.08); }
.event-kind.sale      { color: var(--green);     border-color: rgba(61,213,132,0.4); background: rgba(61,213,132,0.10); }
.event-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.event-user { color: var(--off-white); font-size: 13px; }
.event-desc { color: var(--white); font-size: 13px; }
.event-amount { text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--white); }

/* ----------------- RESPONSIVE ----------------- */
@media (max-width: 900px) {
  /* Force the shell into a single column so nothing can push content right */
  .app { display: block !important; width: 100%; max-width: 100vw; }
  .app-main { display: block; width: 100% !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; }

  .sidebar {
    position: fixed !important;
    left: 0; top: 0;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    z-index: 50;
    box-shadow: 12px 0 32px rgba(0,0,0,0.6);
    will-change: transform;
    /* Belt-and-braces: cannot occupy flow width */
    flex: 0 0 0 !important;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu-btn { display: inline-flex; }
  .event-row {
    grid-template-columns: 90px 1fr;
    grid-template-areas:
      "kind   amount"
      "user   when"
      "desc   desc";
    gap: 4px 12px;
  }
  .event-kind   { grid-area: kind; }
  .event-amount { grid-area: amount; }
  .event-user   { grid-area: user; font-size: 12px; }
  .event-when   { grid-area: when; text-align: right; }
  .event-desc   { grid-area: desc; padding-top: 4px; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; }
  .page { padding: 18px 16px 60px; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 8px; }
  .section-grid { grid-template-columns: 1fr; }
  .user-title { font-size: 22px; }
  .page-title { font-size: 20px; }
}

/* ----------------- MOBILE OVERLAY BACKDROP ----------------- */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.show { display: block; opacity: 1; }
body.sidebar-locked { overflow: hidden; }

/* =========================================================
   MOBILE PASS (≤900px) — does not touch desktop styles above.
   Goal: comfortable phone layout, no horizontal page scroll,
   readable type, finger-sized tap targets, gracefully scrolling
   tables, stacked filter rows, fluid KPIs.
   ========================================================= */
@media (max-width: 900px) {
  html, body {
    font-size: 14.5px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
  }
  .app { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .app-main { width: 100%; max-width: 100vw; min-width: 0; }

  /* Sidebar drawer: comfortable phone width, never wider than needed */
  .sidebar {
    width: min(78vw, 300px);
    padding: 16px 12px 12px;
  }
  .sidebar-foot { padding-bottom: env(safe-area-inset-bottom, 0); }

  /* Mobile topbar (already shown via JS) — tighten, safe-area aware */
  #mobile-topbar.topbar {
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0));
    gap: 10px;
  }
  .mobile-menu-btn {
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    padding: 0; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
  }

  /* Page padding tuned for thumb reach + safe areas */
  .page {
    padding: 18px 14px calc(72px + env(safe-area-inset-bottom, 0));
  }
  .page-title { font-size: 21px; }
  .page-sub { font-size: 12.5px; margin-bottom: 16px; }

  /* KPI grids: 2-col on phones, 1-col on tiny */
  .kpi-row, .bigkpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }
  .kpi, .bigkpi { padding: 12px 13px; min-width: 0; }
  .kpi-value, .bigkpi .val { font-size: 20px; }
  .bigkpi .val { font-size: 22px; }
  .kpi-label, .bigkpi .lbl { font-size: 9.5px; letter-spacing: 0.14em; }
  .bigkpi .sub { font-size: 10.5px; }
  /* Dashboard sparkline card spans full width on mobile */
  .bigkpi[style*="grid-column"] { grid-column: 1 / -1 !important; }
  .kpi-arrow { top: 10px; right: 12px; font-size: 12px; }

  /* Cards: zero outside margin slop, lighter inner padding */
  .card { border-radius: 10px; margin-bottom: 16px; }
  .card-header {
    padding: 12px 14px;
    gap: 10px;
    align-items: stretch;
  }
  .card-title { font-size: 14px; }

  /* Search / filter rows: stack vertically, full width, big targets */
  .search-wrap {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .search-wrap input,
  .search-wrap select,
  .search-wrap .ipt,
  .search-wrap .btn-ghost,
  .search-wrap .btn {
    flex: 1 1 140px;
    min-height: 40px;
    font-size: 14px; /* prevents iOS zoom-on-focus */
  }
  .search-wrap input[type="search"] { flex-basis: 100%; }
  .search-wrap .link-btn { flex: 0 0 auto; }

  /* Tables: horizontal scroll with momentum + clear edge */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 0 0 10px 10px;
  }
  .tbl { font-size: 12.5px; min-width: 560px; }
  .tbl thead th { padding: 10px 12px; font-size: 10px; }
  .tbl tbody td { padding: 10px 12px; }
  .tbl tbody td.actions { white-space: nowrap; }
  .tbl tbody td .mini { padding: 6px 10px; font-size: 12px; }

  /* Definition list (user → Account) already stacks at 700px;
     here just keep DD breathing room */
  .dl { padding: 12px 14px; }

  /* Action grid for admin actions — fill phone width */
  .action-grid {
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 10px;
  }
  .action-card { padding: 12px 14px; }
  .action-card .btn,
  .action-card .btn-outline,
  .action-card .btn-danger,
  .action-card .btn-warn { width: 100%; min-height: 42px; }
  .action-card select { min-height: 42px; font-size: 14px; }

  /* Generic button-row inside cards: stack full-width, big tap */
  .btn-row {
    padding: 12px 14px;
    gap: 8px;
  }
  .btn, .btn-gold, .btn-outline, .btn-ghost, .btn-danger, .btn-warn {
    min-height: 40px;
  }
  .btn-sm { padding: 8px 12px; font-size: 12.5px; min-height: 36px; }

  /* Forms inside modals/cards: prevent iOS zoom & full-width */
  .ipt, .fld input, .fld select, .fld textarea {
    font-size: 16px; /* iOS no-zoom floor */
    padding: 12px 14px;
  }
  .ipt-sm { font-size: 14px; padding: 10px 12px; }

  /* Sidebar nav: bigger touch targets in drawer */
  .sidenav-link { padding: 12px 12px; font-size: 14.5px; }
  .me-email { font-size: 11.5px; }

  /* Toasts on phones: pinned bottom, full-bleed-ish */
  .toast-tray {
    top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0));
    left: 12px; right: 12px;
    align-items: stretch;
  }
  .toast { max-width: none; }

  /* User detail head: don't crowd */
  .user-title { font-size: 22px; }
  .user-sub { font-size: 12.5px; }

  /* Auth card on small screens */
  .auth-card { padding: 24px 20px; border-radius: 12px; }
  .brand-title { font-size: 24px; }
  .code-input { font-size: 20px; letter-spacing: 6px; }

  /* Notice/health rows */
  .health, .health-row { padding: 10px 12px; }
  .health-row { flex-wrap: wrap; gap: 4px 12px; }
}

/* Extra-small phones (≤480px) — drop KPIs to single column */
@media (max-width: 480px) {
  .kpi-row, .bigkpi-row {
    grid-template-columns: 1fr;
  }
  .kpi-value, .bigkpi .val { font-size: 22px; }
  .bigkpi .val { font-size: 24px; }
  .page { padding: 14px 12px calc(72px + env(safe-area-inset-bottom, 0)); }
  .page-title { font-size: 19px; }
  .card-header { flex-direction: column; align-items: stretch; }
  .card-header > * { width: 100%; }
  .tbl { min-width: 480px; }
}

/* Tiny phones (≤360px) — last-resort tightening */
@media (max-width: 360px) {
  html, body { font-size: 13.5px; }
  .page-title { font-size: 18px; }
  .kpi, .bigkpi { padding: 11px 12px; }
  .kpi-value, .bigkpi .val { font-size: 20px; }
}

/* Landscape phone: keep sidebar drawer narrow so content stays usable */
@media (max-width: 900px) and (orientation: landscape) {
  .sidebar { width: min(60vw, 300px); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: #c8d0db; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #aab5c4; }

/* ----------------- CLICKABLE KPI CARDS ----------------- */
a.kpi, a.bigkpi {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.kpi:hover, a.bigkpi:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue-dim), 0 0 14px var(--blue-faint);
  text-decoration: none;
}
a.kpi:hover .kpi-value,
a.bigkpi:hover .val { color: var(--blue-bright); }
.kpi .kpi-arrow, .bigkpi .kpi-arrow {
  position: absolute; top: 12px; right: 14px;
  color: var(--faint); font-size: 14px;
  transition: color 120ms, transform 120ms;
}
a.kpi:hover .kpi-arrow, a.bigkpi:hover .kpi-arrow {
  color: var(--blue); transform: translateX(2px);
}

/* ----------------- CLEANUP PASS (2026-06-15) ----------------- */
/* Padded body for non-table card content (forms, prose, field grids). Tables,
   .dl and .btn-row already bring their own padding, so they stay direct card
   children — this fixes content that was sitting flush against the card edge. */
.card-body { padding: 16px 20px; }
.card-body > p { margin: 0 0 12px; color: var(--off-white); font-size: 13.5px; line-height: 1.55; }
.card-body > p:last-child { margin-bottom: 0; }
.card-body > .col-grid-2:last-child { margin-bottom: 0; }
.card-body > .fld:last-child { margin-bottom: 0; }

/* Status pills read as friendly labels (via statusLabel) — natural casing is
   calmer and less "raw enum" than the old forced lowercase. */
.status { text-transform: none; letter-spacing: 0.02em; }

/* Footnotes/hints get a little breathing room instead of touching the edge. */
.footnote, .footnote-form { padding: 0 20px 14px; }
.hint { font-size: 12.5px; color: var(--faint); line-height: 1.55; }

/* Checkbox group for the affiliate form (replaces inline-styled <label>s). */
.check-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--off-white); text-transform: capitalize; }
.check input { accent-color: var(--blue); }

/* Payout "reference + actions" cell — one calm right-aligned row; the inline
   input no longer shoves the row around on focus. */
.pay-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pay-actions .ipt-sm { width: 120px; }

/* ============================================================================
   REDESIGN 2026-06-28 — "the platform as a precision instrument"
   A coherent visual lift over the established Carbon-Titanium identity:
   crisper depth, a real type/number hierarchy, an instrument-grade money hero,
   and live-update affordances. Everything below is additive — it refines the
   shared components (page header, KPI, card, table) so EVERY page benefits,
   and adds the dashboard's signature dual-register hero.
   ========================================================================= */

/* Canvas: a whisper of vertical light so the page has depth, not a flat void. */
.app-main {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(109,180,212,0.05) 0%, transparent 60%),
    var(--bg-void);
}

/* ---- Page header: an eyebrow + title + live status, set as a unit ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.page-eyebrow {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue); font-weight: 700; margin: 0 0 6px;
}
.page-head .page-title { margin: 0; font-size: 26px; }
.page-head .page-sub { margin: 6px 0 0; }

/* Live status chip — a calm dot that goes green when the SSE stream is open. */
.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-panel);
}
.live-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); transition: background 200ms, box-shadow 200ms;
}
.live-status[data-live="on"] { color: var(--off-white); border-color: var(--blue-deep); }
.live-status[data-live="on"] .dot {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(61,213,132,0.55); animation: pulse 1.8s infinite;
}

/* ============ SIGNATURE: dual-register money hero ============
   Two chronometer-style registers — capital ON HAND vs. value SOLD — divided
   by a hairline, each with an eyebrow, an oversized tabular readout, a context
   line and a sparkline. This is the one bold element; everything else is quiet. */
.register-hero {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background:
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-base) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-2);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.register {
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0;
}
.register + .register { border-left: 1px solid var(--border); }
/* colored hairline along the top edge keyed to the register's meaning */
.register::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent, var(--blue));
  opacity: 0.85;
}
/* faint glow bloom behind the number, in the register's accent */
.register::after {
  content: ""; position: absolute; top: -30%; left: 8%; width: 60%; height: 120%;
  background: radial-gradient(circle, var(--glow, var(--blue-faint)) 0%, transparent 70%);
  pointer-events: none;
}
.register.on   { --accent: var(--money-on);   --glow: rgba(109,180,212,0.10); }
.register.sold { --accent: var(--money-sold); --glow: rgba(61,213,132,0.10); }
.register.stock { --accent: #c9a96e; --glow: rgba(201,169,110,0.10); }
.register-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; z-index: 1;
}
.register-eyebrow .tick { color: var(--accent, var(--blue)); font-size: 12px; }
.register-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
  z-index: 1;
}
.register.on   .register-value { color: var(--blue-bright); }
.register.sold .register-value { color: #0f8c52; }
.register-sub { font-size: 12.5px; color: var(--off-white); z-index: 1; }
.register-foot {
  margin-top: auto; padding-top: var(--space-3);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  z-index: 1;
}
.register-foot .micro {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
@media (max-width: 760px) {
  .register-hero { grid-template-columns: 1fr; }
  .register + .register { border-left: none; border-top: 1px solid var(--border); }
}

/* Sparkline (SVG-free, pure fl-ex bars) sized for the register foot. */
.spark {
  display: flex; align-items: flex-end; gap: 2px; height: 30px; width: 120px;
}
.spark > i {
  flex: 1; min-height: 2px; border-radius: 1.5px 1.5px 0 0;
  background: color-mix(in srgb, var(--accent, var(--blue)) 35%, transparent);
}
.spark > i.hi { background: var(--accent, var(--blue)); }

/* ---- KPI cards: a touch more depth + tighter hierarchy (global) ---- */
.kpi, .bigkpi {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 100%);
  box-shadow: var(--elev-1);
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.kpi:hover, .bigkpi:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
.kpi-value, .bigkpi .val { font-feature-settings: "tnum" 1; }

/* ---- Cards: a defined header + soft elevation (global) ---- */
.card {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 140%);
  box-shadow: var(--elev-1);
}
.card-header { background: rgba(20,35,55,0.018); }

/* ---- Tables: zebra + a calmer hover, easier to track across rows ---- */
.tbl tbody tr:nth-child(even) td { background: rgba(20,35,55,0.020); }
.tbl tbody tr:hover td { background: var(--bg-hover); }

/* ---- Live-update flash: a brief titanium wash when a number changes ---- */
@keyframes cc-flash {
  0%   { background: var(--blue-glow); color: var(--blue-bright); }
  100% { background: transparent; }
}
.flash {
  animation: cc-flash 900ms ease-out;
  border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .live-status[data-live="on"] .dot { animation: none; }
}

/* ---- A compact "stat strip": label + value pairs in one tidy row.
   Used to condense the user-detail account facts without losing any field. ---- */
.statline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.statline .cell { background: var(--bg-panel); padding: 10px 14px; min-width: 0; }
.statline .cell .k {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.statline .cell .v {
  font-size: 14px; color: var(--white); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.statline .cell .v.mono { font-family: var(--font-mono); }

/* ============================================================================
   VISUAL RICHNESS PASS (2026-06-28) — "make the whole app feel like the hero".
   Hal loved the dual-register hero, so the same language now flows through
   every KPI tile and card: an accent top-rail, a soft glow bloom, confident
   tabular numbers, and a clear hover lift. Pure CSS over shared classes —
   no per-view markup changes needed.
   ========================================================================= */

/* KPI tiles become mini-registers. */
.kpi, .bigkpi {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
}
/* accent rail along the top edge — always faintly present, lights up on hover */
.kpi::before, .bigkpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), transparent 78%);
  opacity: 0.30; transition: opacity 160ms;
}
/* soft glow bloom in the corner, like the registers */
.kpi::after, .bigkpi::after {
  content: ""; position: absolute; top: -40%; right: -10%; width: 55%; height: 150%;
  background: radial-gradient(circle, var(--blue-faint) 0%, transparent 70%);
  pointer-events: none; opacity: 0.9;
}
a.kpi:hover::before, a.bigkpi:hover::before,
.kpi:hover::before, .bigkpi:hover::before { opacity: 0.95; }

.kpi-label, .bigkpi .lbl {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted);
}
/* a small accent tick leading every KPI label */
.kpi-label::before, .bigkpi .lbl::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); flex: 0 0 auto; box-shadow: 0 0 0 3px var(--blue-faint);
}
/* the live "online now" card already carries its own pulsing dot — hide the
   static tick there so we don't double up. */
.bigkpi .lbl .live-dot ~ *, .bigkpi .lbl:has(.live-dot)::before { display: none; }

.kpi-value, .bigkpi .val {
  font-size: 30px; letter-spacing: -0.02em; margin-top: 8px;
  color: var(--white); position: relative; z-index: 1;
}
.bigkpi .val { font-size: 32px; }
.bigkpi .sub, .kpi .kpi-sub { position: relative; z-index: 1; }

/* Section cards: an accent tick before the title, matching the registers. */
.card-title {
  display: inline-flex; align-items: center; gap: 9px;
}
.card-title::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  flex: 0 0 auto;
}
/* Drill-in cue: KPI cards that link somewhere get a clearer arrow + lift. */
a.kpi:hover, a.bigkpi:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.kpi .kpi-arrow, .bigkpi .kpi-arrow { z-index: 2; }

/* "View details" hint that appears on hover of a clickable KPI. */
a.kpi .kpi-arrow::after, a.bigkpi .kpi-arrow::after { content: ""; }

@media (max-width: 480px) {
  .kpi-value, .bigkpi .val { font-size: 24px; }
}

/* ── Per-user billing: at-a-glance summary + plan/discount pickers ── */
.bill-summary {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--elev-2); overflow: hidden; margin-bottom: 20px;
}
.bsum-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
}
.bsum-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bsum-label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.bsum-plan { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }
.bsum-price { text-align: right; }
.bsum-eff { font-family: var(--font-mono); font-size: 30px; color: var(--white); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.bsum-per { font-size: 14px; color: var(--muted); }
.bsum-was { font-size: 13px; color: var(--faint); text-decoration: line-through; margin-left: 8px; }
.bsum-note { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.bsum-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-light); }
.bsum-fact { background: var(--bg-panel); padding: 12px 16px; min-width: 0; }
.bsum-fact .k { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.bsum-fact .v { font-size: 13.5px; color: var(--white); margin-top: 3px; }

.plan-opts, .disc-opts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.plan-opt, .disc-opt {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.plan-opt:hover:not(:disabled), .disc-opt:hover:not(:disabled) {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-faint); transform: translateY(-1px);
}
.plan-opt.is-selected, .disc-opt.is-selected {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); background: var(--blue-faint);
}
.plan-opt.is-current, .disc-opt.is-current { opacity: 0.65; cursor: default; border-style: dashed; }
.plan-opt:disabled, .disc-opt:disabled { cursor: default; }
.po-name { font-size: 14px; font-weight: 700; color: var(--white); padding-right: 54px; }
.po-cycle { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.po-price { font-family: var(--font-mono); font-size: 20px; color: var(--blue-bright); margin-top: 4px; font-feature-settings: "tnum" 1; }
.po-per { font-size: 12px; color: var(--muted); }
.po-tag {
  position: absolute; top: 10px; right: 10px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  background: var(--blue-dim); color: var(--blue-bright); border: 1px solid var(--blue-deep);
  padding: 2px 7px; border-radius: 999px;
}
.do-off { font-family: var(--font-mono); font-size: 18px; color: var(--blue-bright); font-weight: 600; }
.do-name { font-size: 12.5px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 54px; }
.do-dur { font-size: 11px; color: var(--faint); text-transform: capitalize; }

.verify-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--blue-deep);
  background: var(--blue-faint); border-radius: var(--radius-lg); margin-top: 6px;
}
.vp-text { font-size: 13.5px; color: var(--white); }
.vp-actions { display: flex; gap: 8px; }
.verify-done { margin-top: 10px; font-size: 13.5px; color: var(--green); font-weight: 600; }
/* The class `display:flex/block` above would otherwise defeat the `hidden`
   attribute these panels rely on — keep hidden meaning hidden. */
.verify-panel[hidden], .verify-done[hidden] { display: none; }

/* Quick dollar discounts (free for life / flat price). */
.disc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dq-card { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.dq-title { font-size: 14px; font-weight: 700; color: var(--white); }
.dq-sub { font-size: 12px; color: var(--muted); margin: 2px 0 12px; }
.bill-subhead { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 4px 0 10px; }
.do-name { text-transform: none; }

/* ── Breakdown reports: period filter + per-dealer cards ── */
.seg {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: 999px; margin-bottom: 20px;
}
.seg-btn {
  padding: 7px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.seg-btn:hover { color: var(--white); text-decoration: none; background: var(--bg-hover); }
.seg-btn.is-active { background: var(--blue); color: #fff; }
.seg-btn.is-active:hover { background: var(--blue-bright); color: #fff; }
@media (max-width: 520px) {
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: var(--radius-lg); }
  .seg-btn { text-align: center; padding: 9px 8px; font-size: 12px; }
}

.userbreak-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 12px; padding: 16px 18px;
}
.userbreak {
  position: relative; overflow: hidden; display: block;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-base) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; text-decoration: none; color: inherit;
  box-shadow: var(--elev-1);
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.userbreak::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), transparent 78%); opacity: 0.30;
}
a.userbreak:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--elev-2); border-color: var(--border-blue);
}
a.userbreak:hover::before { opacity: 0.95; }
.userbreak.is-static { opacity: 0.85; }
.userbreak .kpi-arrow {
  position: absolute; top: 12px; right: 14px; color: var(--faint);
  font-size: 14px; transition: color 120ms, transform 120ms;
}
a.userbreak:hover .kpi-arrow { color: var(--blue); transform: translateX(2px); }
.userbreak.is-static .kpi-arrow { display: none; }
.ub-name { font-size: 13.5px; font-weight: 600; color: var(--white); padding-right: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-email { font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-primary {
  font-family: var(--font-mono); font-feature-settings: "tnum" 1;
  font-size: 22px; color: var(--blue-bright); margin-top: 10px; letter-spacing: -0.01em;
}
.ub-secondary { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* Clickable hero registers → drill into the underlying records. */
a.register { text-decoration: none; color: inherit; cursor: pointer; transition: background 160ms; }
a.register:hover { background: var(--blue-faint); }
a.register.sold:hover { background: rgba(22,149,90,0.05); }
.register-eyebrow { width: 100%; }
.reg-cue {
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: var(--blue); letter-spacing: 0.04em; text-transform: none;
  opacity: 0; transform: translateX(-3px); transition: opacity 160ms, transform 160ms;
}
a.register:hover .reg-cue { opacity: 1; transform: translateX(0); }
a.register.sold .reg-cue { color: var(--green); }