/* ===== Persistly MONO/SILVER theme preview ===== */
:root {
  --bg: #0a0a0c;
  --bg-elevated: #101014;
  --panel: #16161b;
  --panel-border: #26262e;
  --text: #f4f4f5;
  --text-dim: #a1a1aa;
  --text-faint: #71717a;
  --primary: #9ca3af;
  --primary-light: #d1d5db;
  --accent: #c7c9d1;
  --accent-light: #ececf0;
}
/* spark + inline teal fills -> silver */
svg path[fill="#2dd4bf"] { fill: #e5e7eb; }
.hl-serif .hl-w {
  background: linear-gradient(100deg, #f8fafc, #c7c9d1 55%, #8b8d98);
  -webkit-background-clip: text; background-clip: text;
}
.btn-primary { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; box-shadow: 0 6px 20px rgba(255,255,255,0.12); }
.btn-primary:hover { box-shadow: 0 8px 26px rgba(255,255,255,0.2); }
.btn-liquid { box-shadow:
    0 0 8px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.08),
    inset 3px 3px 0.5px -3.5px rgba(255,255,255,0.09),
    inset -3px -3px 0.5px -3.5px rgba(255,255,255,0.85),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.6),
    inset -1px -1px 1px -0.5px rgba(255,255,255,0.6),
    inset 0 0 6px 6px rgba(255,255,255,0.12),
    inset 0 0 2px 2px rgba(255,255,255,0.06),
    0 0 14px rgba(255,255,255,0.28); }
.eyebrow { color: #d4d4d8; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
.live-dot-ping, .live-dot-core { background: #e5e7eb; }
.live-label { color: #d4d4d8; }
.feature-card .icon, .form-section-icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: #e5e7eb; }
.card::before { background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.09), transparent 65%); }
.card:hover { border-color: rgba(255,255,255,0.35); }
.kinetic-track span { -webkit-text-stroke-color: rgba(244,244,245,0.30); }
.kinetic-track i { color: #d4d4d8; }
.marquee-dot { color: rgba(255,255,255,0.4); }
.phone-bubble.from-client { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; }
.roi-val { color: #e5e7eb; }
.roi-control input[type="range"]::-webkit-slider-thumb { background: linear-gradient(135deg, #f4f4f5, #9ca3af); box-shadow: 0 0 12px rgba(255,255,255,0.4); }
.roi-results { border-color: rgba(255,255,255,0.2); }
.roi-result.accent .roi-result-num { color: #e5e7eb; }
.roi-verdict strong { color: #f4f4f5; }
.pricing-badge { background: linear-gradient(135deg, #d1d5db, #8b8d98); color: #0a0a0c; }
.cursor-dot { background: #f4f4f5; }
.cursor-ring { border-color: rgba(255,255,255,0.5); }
.cursor-ring.cursor-hot { border-color: rgba(255,255,255,0.95); }
.mobile-cta { border-color: rgba(255,255,255,0.25); }
.hero-wgl::after { background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(10,10,12,0.6) 100%); }
.hl-sans { color: #fff; }

/* -- stragglers: kill every remaining color hint -- */
.hero-phone-avatar { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.hero-phone-avatar svg path { fill: #e5e7eb; }
.wizard-step.active .wizard-step-bar, .wizard-step.completed .wizard-step-bar { background: linear-gradient(90deg, #e5e7eb, #9ca3af); box-shadow: 0 0 16px rgba(255,255,255,0.25); }
.policy-card { border-color: rgba(255,255,255,0.2); background: radial-gradient(circle at 90% -10%, rgba(255,255,255,0.08), transparent 55%), linear-gradient(160deg, #131318, #0c0c10); }
.policy-card-number { color: #e5e7eb; }
.policy-card-status.ready { background: rgba(255,255,255,0.1); color: #e5e7eb; border-color: rgba(255,255,255,0.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #d4d4d8; box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
.form-section::before { background: linear-gradient(90deg, #e5e7eb, #6b7280, transparent); }
.hero-wgl .stat-row, .stat-row { border-color: #26262e; }
.roi-result.accent .roi-result-num, .live-label, .section-tag { color: #e5e7eb; }
.btn-accent { background: #d4d4d8; color: #0a0a0c; }
a { color: inherit; }
.auth-card .logo-mark svg path, .footer-inner svg path { fill: #e5e7eb; }
.badge-ok { background: rgba(255,255,255,0.1); color: #e5e7eb; }
.sidebar-nav a.active { background: rgba(255,255,255,0.09); color: #fff; }
.auth-shell { background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(255,255,255,0.06), transparent 40%),
    var(--bg); }
.sidebar-settings-link.active { background: rgba(255,255,255,0.09); color: #fff; }
.cta-band { background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.1), transparent 55%), linear-gradient(160deg, #16161b, #0c0c10); border-color: rgba(255,255,255,0.18); }

/* -- calculator: two equal boxes (desktop/tablet only — stacks on phones) -- */
@media (min-width: 901px) { .roi-grid { grid-template-columns: 1fr 1fr; } }
.roi-grid { align-items: stretch; }
.roi-controls, .roi-results { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.roi-controls .roi-fineprint { margin-top: auto; }
.roi-results .btn { margin-top: auto; }
.roi-verdict { margin-bottom: 16px; }

/* -- kill custom cursor remnants -- */
.has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
.cursor-dot, .cursor-ring { display: none !important; }

/* -- animated border buttons (21st.dev port) -- */
.btn-orbit { position: relative; }
.border-runner {
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
  mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.border-runner i {
  position: absolute;
  width: 22px; aspect-ratio: 1;
  background: linear-gradient(90deg, transparent, #e5e7eb, #ffffff);
  offset-path: rect(0 auto auto 0 round 12px);
  animation: borderOrbit 5s linear infinite;
}
@keyframes borderOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .border-runner { display: none; } }

/* ===== Client detail modal ===== */
.client-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 6, 10, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.client-modal {
  width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  animation: modalIn .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.client-modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 26px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
}
.client-modal-name { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.client-modal-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-modal-body { padding: 8px 26px 26px; }
.cm-section { padding: 18px 0; border-bottom: 1px dashed var(--panel-border); }
.cm-section:last-child { border-bottom: none; }
.cm-section-title { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.cm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.cm-span2 { grid-column: span 2; }
@media (max-width: 640px) { .cm-grid { grid-template-columns: 1fr 1fr; } .cm-span2 { grid-column: span 2; } }
.cm-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.cm-value { font-size: 14.5px; font-weight: 600; color: var(--text); }
.client-row { cursor: pointer; transition: background .15s ease; }
.client-row:hover { background: rgba(255,255,255,0.04); }
.client-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ===== Appearance toggle ===== */
.theme-toggle-row { display: flex; gap: 12px; }
.theme-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--bg-elevated);
  color: var(--text); font-weight: 700; font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.theme-option.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-swatch { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(128,128,140,0.5); }
.theme-swatch-dark { background: linear-gradient(135deg, #0a0a0c, #26262e); }
.theme-swatch-light { background: linear-gradient(135deg, #ffffff, #d7d9df); }

/* ===== LIGHT MODE (internal pages) ===== */
html.light body {
  --bg: #f4f5f8;
  --bg-elevated: #eceef2;
  --panel: #ffffff;
  --panel-border: #dcdfe6;
  --text: #16181d;
  --text-dim: #4b5260;
  --text-faint: #878e9c;
  --primary: #52525b;
  --primary-light: #71717a;
  --accent: #52525b;
  --accent-light: #3f3f46;
  background: var(--bg);
  color: var(--text);
}
html.light .btn-primary { background: linear-gradient(135deg, #3f3f46, #18181b); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
html.light .btn-ghost { border-color: #d3d6dd; color: #16181d; }
html.light .sidebar { background: #ffffff; border-right: 1px solid var(--panel-border); }
html.light .sidebar-nav a { color: #4b5260; }
html.light .sidebar-nav a.active { background: #eceef2; color: #16181d; }
html.light .sidebar-settings-link:hover { background: #eceef2; color: #16181d; }
html.light .sidebar-settings-link.active { background: #eceef2; color: #16181d; }
html.light .panel, html.light .stat-card, html.light .carrier-box, html.light .hero-stat-card { background: #ffffff; border-color: var(--panel-border); }
html.light .hero-stat-card { color: #16181d; }
html.light input, html.light select, html.light textarea {
  background: #ffffff; color: #16181d; border-color: #cfd3db;
}
html.light .field input:focus, html.light .field select:focus, html.light .field textarea:focus {
  border-color: #3f3f46; box-shadow: 0 0 0 3px rgba(63,63,70,0.12);
}
html.light .form-section { background: #ffffff; }
html.light .form-section::before { background: linear-gradient(90deg, #a1a1aa, #52525b, transparent); }
html.light .form-section-icon { background: #f0f1f4; border-color: #d3d6dd; color: #3f3f46; }
html.light .wizard-step-bar { background: #e3e5ea; }
html.light .wizard-step.active .wizard-step-bar,
html.light .wizard-step.completed .wizard-step-bar { background: linear-gradient(90deg, #52525b, #18181b); box-shadow: none; }
html.light .wizard-step .wizard-step-label { color: #9ba0ab; }
html.light .wizard-step.active .wizard-step-label,
html.light .wizard-step.completed .wizard-step-label { color: #16181d; }
html.light .wizard-step.active .wizard-step-num,
html.light .wizard-step.completed .wizard-step-num { color: #3f3f46; }
html.light .policy-card {
  background: linear-gradient(160deg, #ffffff, #f0f1f4);
  border-color: #d3d6dd;
  box-shadow: 0 18px 50px rgba(20,22,30,0.12);
}
html.light .policy-card-name { color: #16181d; }
html.light .policy-card-number { color: #3f3f46; }
html.light .client-row:hover { background: rgba(0,0,0,0.035); }
html.light table th { color: #6b7280; }
html.light table td { border-color: #e6e8ee; }
html.light .badge-neutral { background: #eef0f3; color: #4b5260; }
html.light .badge-ok { background: rgba(22,101,52,0.1); color: #166534; }
html.light .badge-warn { background: rgba(180,83,9,0.12); color: #b45309; }
html.light .badge-danger { background: rgba(185,28,28,0.1); color: #b91c1c; }
html.light .client-modal { box-shadow: 0 30px 90px rgba(30,33,44,0.25); }
html.light .client-modal-overlay { background: rgba(240,241,245,0.6); }
html.light .settings-subtab { color: #4b5260; }
html.light .settings-subtab.active { color: #16181d; }
html.light .logo-text, html.light .sidebar-user strong { color: #16181d; }
html.light svg path[fill="#2dd4bf"], html.light svg path[fill="#e5e7eb"] { fill: #3f3f46; }

/* ============ Mobile lockdown ============ */
/* No sideways drift ever — the page scrolls vertically only. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
body { overscroll-behavior-x: none; }

@media (max-width: 720px) {
  /* iOS Safari auto-zooms into any input under 16px — keep every form
     control at 16px on phones so tapping a field never zooms/shifts the page. */
  .field input, .field select, .field textarea,
  input, select, textarea { font-size: 16px !important; }
}

/* ===== Mobile dashboard nav (top bar + slide-in sidebar) ===== */
.mobile-topbar { display: none; }
.sidebar-scrim { display: none; }
@media (max-width: 900px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 80;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: rgba(10,10,12,0.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-border);
  }
  html.light .mobile-topbar { background: rgba(247,248,250,0.9); border-bottom-color: #e2e4ea; }
  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: transparent; border: 1px solid var(--panel-border);
    color: var(--text); cursor: pointer;
  }
  .mobile-menu-btn svg { width: 20px; height: 20px; }
  html.light .mobile-menu-btn { border-color: #d3d6dd; color: #16181d; }

  .sidebar { width: 268px; }
  .sidebar.collapsed { width: 268px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .logo-text,
  .sidebar.collapsed .sidebar-user { display: block; }
  .sidebar .fold-toggle { display: none; }

  .sidebar-scrim.show {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(5,6,10,0.55);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .sidebar { z-index: 90; }
}

/* ===== Industry toggle (signup) ===== */
/* Stacked rows rather than three columns: the auth card is narrow, and three
   side-by-side cards wrapped "Life Insurance" onto two lines. Icon left, name
   and description right — all three options identical in shape. */
.industry-toggle { display: grid; grid-template-columns: 1fr; gap: 8px; }
.industry-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px;
  align-items: center;
  padding: 12px 15px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text-dim);
  font-family: inherit;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.industry-option:hover { border-color: rgba(255,255,255,0.35); }
.industry-option.active {
  background: rgba(255,255,255,0.08);
  border-color: #e5e7eb;
  box-shadow: 0 0 0 1px #e5e7eb;
  color: var(--text);
}
.industry-icon { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-self: center; justify-content: center; }
.industry-icon svg { width: 21px; height: 21px; }
.industry-option.active .industry-icon { color: #f4f4f5; }
.industry-name { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; }
.industry-sub { grid-column: 2; grid-row: 2; font-size: 12px; opacity: 0.75; line-height: 1.35; }
.industry-note { font-size: 12.5px; color: var(--text-faint); margin: 8px 0 0; }

/* light mode */
html.light .industry-option { background: #ffffff; border-color: #d3d6dd; color: #4b5260; }
html.light .industry-option:hover { border-color: #9ba0ab; }
html.light .industry-option.active { background: #f0f1f4; border-color: #16181d; box-shadow: 0 0 0 1px #16181d; color: #16181d; }

/* ===== CSV import wizard ===== */
.import-intro { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 14px 0 16px; }
.import-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 38px 20px;
  border: 2px dashed var(--panel-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  transition: border-color .18s ease, background .18s ease;
}
.import-dropzone:hover, .import-dropzone.dragging { border-color: #e5e7eb; background: rgba(255,255,255,0.04); }
.import-dropzone-icon { font-size: 26px; }
.import-dropzone-hint { font-size: 12.5px; color: var(--text-faint); }
.import-map-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--panel-border); border-radius: 10px; }
.import-map-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.import-map-table th {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-faint); border-bottom: 1px solid var(--panel-border);
}
.import-map-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.import-example { color: var(--text-faint); font-size: 12.5px; }
.import-map-select {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--panel-border); font-size: 13px; font-family: inherit;
}
.import-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.import-progress { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.import-progress-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.import-progress-bar > div { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #e5e7eb, #9ca3af); transition: width .3s ease; }
#importProgressText { font-size: 13px; color: var(--text-dim); }

html.light .import-dropzone { border-color: #d3d6dd; }
html.light .import-dropzone:hover, html.light .import-dropzone.dragging { border-color: #16181d; background: #f0f1f4; }
html.light .import-map-wrap { border-color: #e2e4ea; }
html.light .import-map-table th { background: #ffffff; color: #6b7280; border-color: #e6e8ee; }
html.light .import-map-table td { border-color: #eef0f3; }
html.light .import-map-select { background: #ffffff; color: #16181d; border-color: #d3d6dd; }
html.light .import-progress-bar { background: #e3e5ea; }
html.light .import-progress-bar > div { background: linear-gradient(90deg, #52525b, #18181b); }

/* ===== Onboarding checklist ===== */
.onboarding-card { margin-bottom: 22px; }
.onboarding-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.onboarding-head h2 { margin: 0 0 3px; font-size: 18px; }
.onboarding-sub { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.onboarding-items { display: flex; flex-direction: column; gap: 8px; }
.onboarding-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 13px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.onboarding-item:hover:not(.done) { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); }
.onboarding-item.done { opacity: 0.55; cursor: default; }
.onboarding-check {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--panel-border);
  font-size: 14px; font-weight: 800; color: #0a0a0c;
}
.onboarding-item.done .onboarding-check { background: linear-gradient(135deg, #e5e7eb, #9ca3af); border-color: transparent; }
.onboarding-text { display: flex; flex-direction: column; gap: 2px; }
.onboarding-text strong { font-size: 14.5px; }
.onboarding-text span { font-size: 13px; color: var(--text-dim); }
.onboarding-item.done .onboarding-text strong { text-decoration: line-through; }
.onboarding-extra { text-decoration: underline; font-weight: 600; }
.onboarding-go { margin-left: auto; color: var(--text-faint); font-size: 16px; }

html.light .onboarding-item { background: #ffffff; border-color: #e2e4ea; color: #16181d; }
html.light .onboarding-item:hover:not(.done) { border-color: #9ba0ab; background: #f7f8fa; }
html.light .onboarding-check { border-color: #d3d6dd; }
html.light .onboarding-item.done .onboarding-check { background: linear-gradient(135deg, #52525b, #18181b); color: #ffffff; }

/* ===== Save List ===== */
.savelist-card { margin-bottom: 22px; border-color: rgba(255,255,255,0.22); }
.savelist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.savelist-head h2 { margin: 0 0 3px; font-size: 18px; }
.savelist-sub { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.savelist-items { display: flex; flex-direction: column; gap: 8px; }
.savelist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}
.savelist-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.savelist-reason { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.savelist-reason strong { color: #fca5a5; }
.savelist-actions { display: flex; gap: 8px; flex-shrink: 0; }
.savelist-empty { padding: 14px 16px; font-size: 13.5px; color: var(--text-dim); }
@media (max-width: 720px) {
  .savelist-item { flex-direction: column; align-items: stretch; }
  .savelist-actions .btn { flex: 1; }
}
html.light .savelist-item { background: #ffffff; border-color: #e2e4ea; }
html.light .savelist-reason strong { color: #b91c1c; }

/* ===== Per-carrier commission economics (Settings > Carriers) ===== */
.commission-defaults {
  margin-bottom: 20px; padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border); border-radius: 12px;
}
.commission-defaults-head strong { font-size: 14px; display: block; margin-bottom: 4px; }
.commission-defaults-head span { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; display: block; margin-bottom: 12px; }
.commission-defaults-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.commission-defaults-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.commission-defaults-row input {
  width: 120px; padding: 8px 10px; border-radius: 8px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--panel-border); font-size: 14px; font-family: inherit;
}
.carrier-econ { display: flex; gap: 10px; margin: 8px 0 4px; }
.carrier-econ label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; }
.carrier-econ input {
  width: 86px; padding: 6px 8px; border-radius: 7px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--panel-border); font-size: 13px; font-family: inherit;
}
.carrier-econ input:focus { border-color: #d4d4d8; outline: none; }
.carrier-econ input.field-invalid { border-color: #ef4444; }
html.light .commission-defaults { background: #ffffff; border-color: #e2e4ea; }
html.light .commission-defaults-row input, html.light .carrier-econ input { background: #ffffff; color: #16181d; border-color: #d3d6dd; }

/* Contracted carrier boxes go GREEN when checked (Jacob's call — clear
   yes/no state beats theme purity here). */
.carrier-box.checked { border-color: #22c55e; background: rgba(34,197,94,0.10); }
.carrier-box .carrier-checkbox { accent-color: #22c55e; }
html.light .carrier-box.checked { border-color: #16a34a; background: rgba(22,163,74,0.08); }

/* Inner tabs inside Settings > Carriers */
.carrier-inner-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.carrier-inner-tab {
  padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s ease;
}
.carrier-inner-tab:hover { border-color: rgba(255,255,255,0.35); }
.carrier-inner-tab.active { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; border-color: transparent; }
html.light .carrier-inner-tab { border-color: #d3d6dd; color: #4b5260; }
html.light .carrier-inner-tab.active { background: linear-gradient(135deg, #52525b, #18181b); color: #fff; }
.carrier-row2:not(.checked) { opacity: 0.45; }

/* ===== Carrier list rows (name left · 6/9/12 advance + comm % right) ===== */
#carrierEconList { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.carrier-row2 {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px;
  background: transparent;
  border-bottom: 1px solid var(--panel-border);
}
.carrier-row2:last-child { border-bottom: none; }
.carrier-row2:not(.checked) { opacity: 0.5; }
.carrier-row2-left { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.carrier-row2-left .name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrier-row2-left .carrier-checkbox { width: 16px; height: 16px; accent-color: #e5e7eb; flex-shrink: 0; }
.carrier-row2-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.adv-pills { display: flex; gap: 4px; }
.adv-pill {
  padding: 6px 11px; border-radius: 8px;
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-dim); font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s ease;
}
.adv-pill:hover { border-color: rgba(255,255,255,0.35); }
.adv-pill.active { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; border-color: transparent; }
.comm-inline { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; }
.comm-inline input {
  width: 78px; padding: 7px 9px; border-radius: 8px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--panel-border); font-size: 13.5px; font-family: inherit;
}
.comm-inline input:focus { border-color: #d4d4d8; outline: none; }
.comm-inline input.field-invalid { border-color: #ef4444; }
.carrier-row2 .carrier-remove { position: static; background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; }
.carrier-row2 .carrier-remove:hover { color: #fca5a5; }
@media (max-width: 720px) {
  .carrier-row2 { flex-direction: column; align-items: stretch; gap: 10px; }
  .carrier-row2-right { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
}
html.light .carrier-row2 { border-color: #e6e8ee; }
html.light #carrierEconList { border-color: #e2e4ea; }
html.light .adv-pill { border-color: #d3d6dd; color: #4b5260; }
html.light .adv-pill.active { background: linear-gradient(135deg, #52525b, #18181b); color: #fff; }
html.light .comm-inline input { background: #ffffff; color: #16181d; border-color: #d3d6dd; }

.carrier-save-row { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 18px; }
.carrier-save-row .form-success { display: none; }

/* ===== Medicare Radar + cross-licensed checkbox ===== */
.radar-card { margin-bottom: 22px; }
.cross-licensed-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 10px; padding: 11px 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border); border-radius: 10px;
  cursor: pointer; font-size: 13px; color: var(--text-dim); line-height: 1.45;
}
.cross-licensed-row input { margin-top: 2px; accent-color: #e5e7eb; flex-shrink: 0; }
.cross-licensed-row strong { color: var(--text); }
html.light .cross-licensed-row { background: #ffffff; border-color: #d3d6dd; color: #4b5260; }
html.light .cross-licensed-row strong { color: #16181d; }

/* ===== Save Plays ===== */
.sp-why { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }
.sp-script { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-script li { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.sp-options { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sp-options li { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.sp-options strong { color: var(--text); }
.sp-text-box {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--panel-border);
}
.sp-text-box p { margin: 0; font-size: 14px; line-height: 1.55; font-style: italic; color: var(--text); }
html.light .sp-text-box { background: #f7f8fa; border-color: #d3d6dd; }

/* ===== Scoreboard ===== */
.sb-periods { display: flex; gap: 6px; }
.sb-period {
  padding: 7px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--panel-border);
  color: var(--text-dim); font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s ease;
}
.sb-period:hover { border-color: rgba(255,255,255,0.35); }
.sb-period.active { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; border-color: transparent; }
.sb-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.sb-total { padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(255,255,255,0.03); }
.sb-total .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 5px; }
.sb-total .value { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.sb-list { display: flex; flex-direction: column; gap: 8px; }
.sb-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--panel-border); border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.sb-row.me { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.sb-rank { width: 34px; text-align: center; font-size: 20px; flex-shrink: 0; }
.sb-rank-num { font-size: 14px; font-weight: 800; color: var(--text-faint); }
.sb-agent { flex: 1; min-width: 0; }
.sb-name { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.sb-you { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; margin-left: 4px; }
.sb-owner-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-left: 4px; }
.sb-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.sb-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e5e7eb, #9ca3af); transition: width .4s ease; }
.sb-figures { text-align: right; flex-shrink: 0; }
.sb-ap { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.sb-ap span { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.sb-policies { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 720px) {
  .sb-totals { grid-template-columns: 1fr; }
  .sb-periods { flex-wrap: wrap; }
  .panel-head { flex-wrap: wrap; gap: 10px; }
}
html.light .sb-total, html.light .sb-row { background: #ffffff; border-color: #e2e4ea; }
html.light .sb-row.me { border-color: #16181d; background: #f0f1f4; }
html.light .sb-bar { background: #e3e5ea; }
html.light .sb-bar > div { background: linear-gradient(90deg, #52525b, #18181b); }
html.light .sb-period { border-color: #d3d6dd; color: #4b5260; }
html.light .sb-period.active { background: linear-gradient(135deg, #52525b, #18181b); color: #fff; }

/* Sidebar nav group dividers */
.nav-group-divider { height: 1px; background: var(--panel-border); margin: 10px 12px; }
.sidebar.collapsed .nav-group-divider { margin: 10px 8px; }
html.light .nav-group-divider { background: #e2e4ea; }

/* ===== Carrier Mix donut + Book Averages ===== */
.carrier-mix { display: flex; align-items: center; gap: 26px; }
.carrier-mix svg { width: 190px; height: 190px; flex-shrink: 0; }
.donut-num { font-size: 30px; font-weight: 800; fill: var(--text); font-family: inherit; letter-spacing: -1px; }
.donut-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; fill: var(--text-faint); font-family: inherit; }
.carrier-mix-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mix-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mix-chip { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.mix-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-val { margin-left: auto; color: var(--text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.avg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.avg-tile { padding: 14px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(255,255,255,0.03); }
.avg-tile .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 5px; }
.avg-tile .value { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; }
.avg-tile .sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
@media (max-width: 720px) {
  .carrier-mix { flex-direction: column; }
  .avg-grid { grid-template-columns: 1fr; }
}
html.light .avg-tile { background: #ffffff; border-color: #e2e4ea; }

/* Dashboard secondary row fits 5 tiles */
.dash-secondary-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ===== YTD hero — living chrome ===== */
.hero-stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #b9bdc6, #eef0f4 22%, #8b8f9a 45%, #f2f3f6 68%, #a3a7b1 88%, #d9dbe1);
  background-size: 260% 260%;
  animation: chromeFlow 9s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  color: #0c0d10;
}
.hero-stat-card .label { color: #3a3d45; opacity: 1; }
.hero-stat-card .value { color: #0c0d10; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.hero-stat-card .sub { color: #4a4d56; opacity: 1; }
.hero-stat-card .hero-icon svg { stroke: #1c1e24; }
@keyframes chromeFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* shine sweep */
.hero-stat-card::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; width: 34%;
  left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.65) 50%, transparent);
  transform: rotate(8deg);
  animation: chromeShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chromeShine {
  0%, 55% { left: -50%; }
  85%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stat-card { animation: none; }
  .hero-stat-card::after { display: none; }
}
html.light .hero-stat-card { border-color: #c8ccd4; box-shadow: 0 14px 40px rgba(30,33,44,0.15), inset 0 1px 0 rgba(255,255,255,0.8); }

/* ===== My Team org graph ===== */
.org-tree { display: flex; justify-content: center; padding: 10px 0 20px; min-width: fit-content; }
.org-tree ul { display: flex; padding-top: 26px; position: relative; list-style: none; margin: 0; justify-content: center; }
.org-tree > ul { padding-top: 0; }
.org-tree li { position: relative; padding: 26px 14px 0; display: flex; flex-direction: column; align-items: center; }
.org-tree > ul > li { padding-top: 0; }
/* connectors (classic org-chart lines) */
.org-tree li::before, .org-tree li::after {
  content: ""; position: absolute; top: 0; right: 50%;
  border-top: 1.5px solid var(--panel-border);
  width: 50%; height: 26px;
}
.org-tree li::after {
  right: auto; left: 50%;
  border-left: 1.5px solid var(--panel-border);
}
.org-tree li:only-child::after, .org-tree li:only-child::before { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 1.5px solid var(--panel-border); border-radius: 0 8px 0 0; }
.org-tree li:first-child::after { border-radius: 8px 0 0 0; }
.org-tree ul ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  border-left: 1.5px solid var(--panel-border); width: 0; height: 26px;
}
.org-tree > ul > li::before, .org-tree > ul > li::after { display: none; }
.org-tree > ul > li { padding-top: 0; }

.org-node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 18px; min-width: 150px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border); border-radius: 14px;
  text-align: center;
}
.org-node.org-owner {
  background: linear-gradient(135deg, rgba(229,231,235,0.14), rgba(156,163,175,0.08));
  border-color: rgba(255,255,255,0.35);
}
.org-node.org-pending { opacity: 0.55; border-style: dashed; }
.org-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c;
  font-weight: 800; font-size: 14px; margin-bottom: 3px;
}
.org-name { font-weight: 700; font-size: 14px; }
.org-meta { font-size: 11.5px; color: var(--text-faint); }
html.light .org-node { background: #ffffff; border-color: #d3d6dd; }
html.light .org-node.org-owner { background: #f0f1f4; border-color: #3f3f46; }
html.light .org-tree li::before, html.light .org-tree li::after, html.light .org-tree ul ul::before { border-color: #d3d6dd; }

/* ---- Commissions: level chips, hero, tables, promotion tracker ---- */
.comp-level-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 7px; border-radius: 7px;
  background: linear-gradient(135deg, rgba(229,231,235,0.22), rgba(156,163,175,0.10));
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px;
  vertical-align: middle;
}
.comp-level-chip-lg { min-width: 48px; padding: 8px 14px; font-size: 20px; border-radius: 12px; }
html.light .comp-level-chip { background: #f0f1f4; border-color: #c9ccd4; color: #26262b; }

.comm-level-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(229,231,235,0.16) 0%, rgba(120,124,135,0.10) 30%, rgba(229,231,235,0.20) 50%, rgba(120,124,135,0.10) 70%, rgba(229,231,235,0.16) 100%);
  background-size: 220% 220%;
  animation: chromeFlow 9s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.30);
}
html.light .comm-level-hero { background: linear-gradient(120deg, #f2f3f6, #e6e8ee, #f2f3f6); border-color: #c9ccd4; }
@media (prefers-reduced-motion: reduce) { .comm-level-hero { animation: none; } }
.comm-level-left { display: flex; align-items: center; gap: 16px; }
.comm-level-code {
  font-size: 34px; font-weight: 900; letter-spacing: 1px;
  padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c;
}
.comm-level-name { font-size: 19px; font-weight: 800; }
.comm-level-track { font-size: 13px; color: var(--text-dim); }
.comm-level-progress { flex: 1; min-width: 260px; }

.promo-next-line { font-size: 13.5px; color: var(--text-dim); margin-bottom: 8px; }
.promo-bar {
  height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.08); border: 1px solid var(--panel-border);
}
html.light .promo-bar { background: #e8eaee; }
.promo-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #9ca3af, #e5e7eb);
  transition: width 0.6s ease;
}
.promo-bar-fill.promo-bar-hit { background: linear-gradient(90deg, #16a34a, #22c55e); }
.promo-bar-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-top: 7px; }
.promo-eligible-flag { margin-top: 9px; font-size: 13.5px; font-weight: 700; color: #22c55e; }
html.light .promo-eligible-flag { color: #15803d; }

.promo-row { padding: 14px 2px; border-bottom: 1px solid var(--panel-border); }
.promo-row:last-child { border-bottom: none; }
.promo-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }

.comm-totals { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.comm-total { font-size: 15px; }
.comm-total-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-right: 4px; }
.comm-table-wrap { overflow-x: auto; }
.comm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.comm-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-faint); padding: 8px 10px; border-bottom: 1px solid var(--panel-border);
}
.comm-table td { padding: 10px; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.comm-table tr:last-child td { border-bottom: none; }
.comm-product { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.comm-footnote { font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.panel-sub { font-size: 13px; color: var(--text-dim); }

.comp-viewer-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px; }
@media (max-width: 720px) { .comp-viewer-grid { grid-template-columns: 1fr; } }
.comp-viewer-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin: 0 0 10px; }
.comp-ladder-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; }
.comp-track-block { margin-bottom: 16px; }
.comp-track-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.my-comp-level-row { display: flex; align-items: center; gap: 16px; }

/* ============================================================
   RANK GEMS — photoreal SVG stones. The gem itself is inline SVG
   (facets, inclusions, glints, sparkles baked in). CSS provides
   the badge layout and the breathing glow aura per tier.
   ============================================================ */

.gem-badge {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  line-height: 0;
}
.gem-badge svg, .comm-level-code.gem-mode svg { display: block; }

.tier-obsidian { --glow: rgba(147,51,234,0.65); }
.tier-diamond  { --glow: rgba(147,197,253,0.85); }
.tier-ruby     { --glow: rgba(244,63,94,0.65); }
.tier-emerald  { --glow: rgba(16,185,129,0.65); }
.tier-gold     { --glow: rgba(251,191,36,0.65); }
.tier-silver   { --glow: rgba(203,213,225,0.55); }
.tier-bronze   { --glow: rgba(217,119,6,0.5); }
.tier-slate    { --glow: rgba(0,0,0,0); }

.gem-badge[class*="tier-"] svg,
.comm-level-code.gem-mode svg {
  animation: gemGlow 3s ease-in-out infinite;
}
.gem-badge.tier-slate svg, .comm-level-code.tier-slate svg { animation: none; filter: none; }

@keyframes gemGlow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
  50% { filter: drop-shadow(0 0 7px var(--glow)) drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
}

/* the hero stone: strip the old chrome box, let the gem breathe */
.comm-level-code.gem-mode {
  background: none; padding: 0; border-radius: 0; overflow: visible;
}

/* pick the gem up on hover */
.gem-badge { transition: transform 0.18s ease; }
.gem-badge:hover { transform: scale(1.22); }

/* stagger the glow so pages of gems breathe organically */
.promo-row:nth-child(2n) .gem-badge svg, .comm-table tr:nth-child(2n) .gem-badge svg { animation-delay: 0.8s; }
.promo-row:nth-child(3n) .gem-badge svg, .comm-table tr:nth-child(3n) .gem-badge svg { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .gem-badge svg, .comm-level-code.gem-mode svg { animation: none; filter: drop-shadow(0 0 3px var(--glow)); }
}

/* four more stones for the full 12-step ladder */
.tier-sapphire { --glow: rgba(59,130,246,0.7); }
.tier-amethyst { --glow: rgba(167,102,252,0.7); }
.tier-topaz    { --glow: rgba(255,146,20,0.6); }
.tier-jade     { --glow: rgba(52,211,153,0.5); }

/* money-in-your-pocket green for advance amounts */
.comm-plus { color: #22c55e; }
html.light .comm-plus { color: #15803d; }

/* formal level codes in the Settings comp-structure viewer (no gems here) */
.comp-code {
  display: inline-block; min-width: 30px; text-align: center;
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--panel-border); background: var(--bg-elevated);
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-dim);
}

/* Book of Business search row: mode pills + search box */
.book-search-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.book-search-row input {
  flex: 1; min-width: 220px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border); background: var(--bg-elevated);
  color: var(--text); font-size: 14px; font-family: var(--font);
}
.book-search-row input:focus { outline: none; border-color: var(--accent); }

/* "auto from comp booklet" tag in the Commission Levels tab */
.econ-auto-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  color: #22c55e; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.25);
}
html.light .econ-auto-tag { color: #15803d; background: rgba(21,128,61,0.08); border-color: rgba(21,128,61,0.25); }

/* red trash-can button in My Team */
.team-trash {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.35);
  color: #ef4444; transition: background 0.15s ease, transform 0.15s ease;
}
.team-trash:hover { background: rgba(239,68,68,0.22); transform: scale(1.08); }
.team-trash svg { width: 16px; height: 16px; }
html.light .team-trash { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.35); color: #dc2626; }

/* ---- Persistly Voice: coming-soon hero ---- */
.nav-soon {
  margin-left: auto; padding: 2px 7px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px;
  color: #2dd4bf; background: rgba(45,212,191,0.10); border: 1px solid rgba(45,212,191,0.35);
  animation: soonPulse 2.4s ease-in-out infinite;
}
@keyframes soonPulse { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }
.sidebar.collapsed .nav-soon { display: none; }

.voice-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 46px 20px 60px;
}
.voice-orb-wrap { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 34px; }
.voice-ring {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(45,212,191,0.35);
  inset: 0; animation: voiceRing 3.2s ease-out infinite;
}
.voice-ring-2 { animation-delay: 1.05s; }
.voice-ring-3 { animation-delay: 2.1s; }
@keyframes voiceRing {
  0% { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 0; }
}
.voice-orb {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.25), transparent 42%),
    linear-gradient(135deg, #134e4a 0%, #0f766e 45%, #2dd4bf 130%);
  border: 1px solid rgba(45,212,191,0.55);
  box-shadow: 0 0 34px rgba(45,212,191,0.35), inset 0 -8px 22px rgba(0,0,0,0.35);
  animation: orbBreathe 3.2s ease-in-out infinite;
}
@keyframes orbBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.voice-wave { display: flex; align-items: center; gap: 5px; height: 44px; }
.voice-wave span {
  width: 5px; border-radius: 3px; background: #ccfbf1;
  animation: voiceEq 1.1s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { height: 12px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 26px; animation-delay: 0.15s; }
.voice-wave span:nth-child(3) { height: 40px; animation-delay: 0.3s; }
.voice-wave span:nth-child(4) { height: 20px; animation-delay: 0.45s; }
.voice-wave span:nth-child(5) { height: 34px; animation-delay: 0.6s; }
.voice-wave span:nth-child(6) { height: 16px; animation-delay: 0.75s; }
.voice-wave span:nth-child(7) { height: 28px; animation-delay: 0.9s; }
@keyframes voiceEq { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

.voice-title { font-size: 34px; font-weight: 900; letter-spacing: 4px; }
.voice-title-accent { color: #2dd4bf; }
.voice-coming {
  margin-top: 10px; font-size: 15px; font-weight: 800; letter-spacing: 7px;
  background: linear-gradient(90deg, var(--text-faint) 0%, var(--text-faint) 38%, #ffffff 50%, var(--text-faint) 62%, var(--text-faint) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: comingShimmer 2.6s linear infinite;
}
@keyframes comingShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.voice-sub { margin: 16px 0 34px; color: var(--text-dim); font-size: 15px; max-width: 460px; }

.voice-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; width: 100%; }
@media (max-width: 720px) { .voice-features { grid-template-columns: 1fr; } }
.voice-feature {
  display: flex; gap: 13px; align-items: flex-start; text-align: left;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--panel-border);
}
.voice-feature-ic { font-size: 21px; line-height: 1; margin-top: 2px; }
.voice-feature strong { display: block; font-size: 14px; margin-bottom: 3px; }
.voice-feature span { font-size: 12.5px; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .voice-ring, .voice-orb, .voice-wave span, .voice-coming, .nav-soon { animation: none; }
}

/* view-only activation banner for unpaid agent seats */
.activate-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 18px; font-size: 13.5px;
  background: linear-gradient(90deg, rgba(45,212,191,0.14), rgba(45,212,191,0.06));
  border-bottom: 1px solid rgba(45,212,191,0.35);
}

/* ---- Living auth background (login / signup / activate / invite pages) ----
   Color mesh + dot grid + three giant blurred orbs drifting on slow loops,
   plus a cursor glow/streak with a comet tail. Desktop pointers only. */
.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-shell, .plan-page-shell, .activate-shell, .auth-card { position: relative; z-index: 1; }

.auth-bg-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(45,212,191,0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(148,163,184,0.06), transparent 70%);
}
.auth-dot-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(246,247,249,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}
html.light .auth-dot-pattern { background-image: radial-gradient(rgba(20,24,32,0.05) 1px, transparent 1px); }
html.light .auth-bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(13,148,136,0.07), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(100,116,139,0.06), transparent 70%);
}

.auth-orb {
  position: absolute; border-radius: 9999px;
  filter: blur(100px); opacity: 0.18; pointer-events: none;
  animation: authFloat 18s ease-in-out infinite;
}
.auth-orb.orb-a { top: -10%; left: -5%; width: 520px; height: 520px; background: #2dd4bf; }
.auth-orb.orb-b { bottom: -15%; right: -10%; width: 620px; height: 620px; background: #64748b; animation-delay: -6s; animation-duration: 22s; }
.auth-orb.orb-c { top: 30%; left: 55%; width: 360px; height: 360px; background: #f59e0b; opacity: 0.10; animation-delay: -12s; animation-duration: 26s; }
@keyframes authFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -60px) scale(1.08); }
  66% { transform: translate(-30px, 30px) scale(0.94); }
}

.cursor-glow, .cursor-streak {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 9999px; mix-blend-mode: screen; will-change: transform;
  transform: translate3d(calc(var(--mx, -9999px) - 50%), calc(var(--my, -9999px) - 50%), 0);
}
.cursor-glow {
  width: 90px; height: 90px; filter: blur(8px);
  background: radial-gradient(circle, rgba(45,212,191,0.20) 0%, rgba(45,212,191,0.08) 35%, transparent 70%);
}
.cursor-streak {
  width: 140px; height: 140px; filter: blur(4px);
  background: radial-gradient(circle, rgba(45,212,191,0.45) 0%, rgba(45,212,191,0.15) 40%, transparent 70%);
}
.cursor-tail { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.cursor-tail-dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 9999px; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(45,212,191,0.65), transparent 70%);
  animation: streakFade 0.6s ease-out forwards;
}
@keyframes streakFade {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}
html.light .cursor-glow, html.light .cursor-streak, html.light .cursor-tail-dot { mix-blend-mode: multiply; }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .cursor-glow, .cursor-streak, .cursor-tail { display: none !important; }
  .auth-orb { animation: none; }
}

/* ---- Lead Upload + Dialer teaser ---- */
.lead-cell-bad { outline: 1px solid rgba(239,68,68,0.55); background: rgba(239,68,68,0.07); border-radius: 4px; }
.lead-call { color: #22c55e; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lead-call:hover { text-decoration: underline; }
.lead-status-select {
  padding: 5px 8px; border-radius: 7px; font-size: 12.5px;
  border: 1px solid var(--panel-border); background: var(--bg-elevated); color: var(--text);
}
#leadMapRows select {
  padding: 7px 9px; border-radius: 7px; border: 1px solid var(--panel-border);
  background: var(--bg-elevated); color: var(--text); font-size: 13px;
}
#leadReviewTable [contenteditable]:focus { outline: 1.5px solid var(--accent); border-radius: 4px; }
.lead-call-alt { color: var(--text-dim); font-weight: 500; font-size: 12px; }

/* Expandable lead detail — everything the uploaded file carried beyond
   name/phone/email, editable in the review step and readable in the list. */
.lead-detail-toggle {
  border: 1px solid var(--panel-border); background: var(--bg-elevated); color: var(--text-dim);
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.lead-detail-toggle:hover { color: var(--text); border-color: var(--accent); }
.lead-detail-toggle.open { color: var(--accent); border-color: var(--accent); }
.lead-detail-row > td { background: var(--bg-elevated); padding: 12px 14px !important; }
.lead-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px;
}
.lead-detail-field { display: flex; flex-direction: column; gap: 3px; }
.lead-detail-field > span {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-weight: 600;
}
.lead-detail-field > span em { font-style: normal; opacity: 0.6; text-transform: none; letter-spacing: 0; }
.lead-detail-field input {
  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--panel-border);
  background: var(--bg-panel); color: var(--text); font-size: 12.5px; width: 100%;
}
.lead-detail-field input:focus { outline: none; border-color: var(--accent); }
.lead-detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-detail-item > span {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-weight: 600;
}
.lead-detail-item > strong { font-size: 13px; font-weight: 600; word-break: break-word; }
.lead-tosale { margin-top: 14px; }

/* Dialer coming-soon: same stage as Voice, blue steel accent + keypad orb */
.dialer-hero .voice-ring { border-color: rgba(96,165,250,0.35); }
.dialer-orb {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.25), transparent 42%),
    linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 45%, #60a5fa 130%);
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 0 34px rgba(96,165,250,0.35), inset 0 -8px 22px rgba(0,0,0,0.35);
}
.dialer-title-accent { color: #60a5fa; }
.dialer-pad { display: grid; grid-template-columns: repeat(3, 14px); gap: 9px; }
.dialer-pad span {
  width: 14px; height: 14px; border-radius: 50%;
  background: #dbeafe;
  animation: padPulse 1.8s ease-in-out infinite;
}
.dialer-pad span:nth-child(1) { animation-delay: 0s; }
.dialer-pad span:nth-child(2) { animation-delay: 0.15s; }
.dialer-pad span:nth-child(3) { animation-delay: 0.3s; }
.dialer-pad span:nth-child(4) { animation-delay: 0.45s; }
.dialer-pad span:nth-child(5) { animation-delay: 0.6s; }
.dialer-pad span:nth-child(6) { animation-delay: 0.75s; }
.dialer-pad span:nth-child(7) { animation-delay: 0.9s; }
.dialer-pad span:nth-child(8) { animation-delay: 1.05s; }
.dialer-pad span:nth-child(9) { animation-delay: 1.2s; }
@keyframes padPulse { 0%,100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .dialer-pad span { animation: none; } }

/* ===== My Team: plain roster + agent detail ===== */
/* The roster is intentionally quiet — a name, a level code, nothing else.
   Everything about a person lives one click deep on their detail card. */
.team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid var(--panel-border);
}
.team-row:last-child { border-bottom: none; }
.team-row-name {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; margin: 0;
  background: none; border: none; border-radius: 10px;
  color: var(--text); font-family: var(--font); font-size: 15px;
  text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
.team-row-name:hover { background: var(--bg-elevated); }
.team-row-name:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.team-row-label {
  font-weight: 650; letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The chevron only leans in on hover, so a still roster stays flat and calm. */
.team-row-chev {
  margin-left: auto; padding-left: 10px;
  color: var(--text-faint); font-size: 20px; line-height: 1;
  opacity: 0.5; transition: opacity 0.15s ease, transform 0.15s ease;
}
.team-row-name:hover .team-row-chev { opacity: 1; transform: translateX(3px); }
.team-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.comp-code-empty { color: var(--text-faint); opacity: 0.7; font-weight: 600; }

/* Heading row inside a My Team tab body (Promotion Tracker) */
.team-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.team-tab-head h3 { margin: 0; font-size: 17px; }

/* ---- Agent detail card ---- */
.agent-detail { padding: 4px 2px 6px; }
.agent-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px; padding: 7px 13px;
  background: var(--bg-elevated); border: 1px solid var(--panel-border);
  border-radius: 9px; color: var(--text-dim);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.agent-back:hover { color: var(--text); border-color: var(--accent); }
.agent-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.agent-detail-head h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.4px; }
.agent-detail-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-dim); font-size: 13.5px; }

/* Month-to-date: personal always, hierarchy only when they have a downline. */
.agent-mtd { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 26px; }
.agent-mtd-card {
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--panel-border); background: var(--bg-elevated);
}
.agent-mtd-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); }
.agent-mtd-value { margin-top: 7px; font-size: 30px; font-weight: 750; letter-spacing: -1px; color: var(--text); font-variant-numeric: tabular-nums; }
.agent-mtd-note { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }

.agent-detail-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 12px;
}
.agent-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 0; }
.agent-field { padding: 12px 2px; border-bottom: 1px solid var(--panel-border); }
.agent-field-label { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; }
.agent-field-value { font-size: 14.5px; color: var(--text); font-weight: 600; word-break: break-word; }
.agent-field-value a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--panel-border); }
.agent-field-value a:hover { border-bottom-color: var(--accent); }

html.light .team-row-name:hover { background: #f3f4f7; }
html.light .agent-mtd-card { background: #ffffff; }

@media (max-width: 620px) {
  .team-row { flex-wrap: wrap; }
  .team-row-name { flex-basis: 100%; }
  .team-row-actions { margin-left: auto; padding-bottom: 8px; }
}

/* Short explanatory line under a form field — used where Persistly decides
   something for you (promotion track) instead of asking. */
.field-note {
  margin: 8px 0 16px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-faint);
}
.field-note strong { color: var(--text-dim); font-weight: 700; }

/* ===========================================================================
   Support tickets + Founder view
   ---------------------------------------------------------------------------
   Everything below is built from --panel / --panel-border / text tokens rather
   than the primary→accent gradient. In this theme that gradient runs near-white
   in dark mode and near-black in light mode, so anything relying on it needs
   two sets of text colors to stay readable. Surface tints plus text tokens are
   legible in both modes from one rule.
   =========================================================================== */

.founder-stats { margin-bottom: 0; }

/* Live indicator. Color alone never carries the meaning — the dot has a
   title attribute and the row's Last seen column says it in words. */
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--panel-border); border: 1px solid var(--panel-border);
}
.live-dot-on {
  background: #34d399; border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
html.light .live-dot { background: #d8dbe2; border-color: #cfd3db; }
html.light .live-dot-on { background: #059669; border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); }

.founder-row-churned td { opacity: 0.72; }
.founder-row-needs-reply td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Status pills. Border + tinted background, text stays on the ink tokens. */
.ticket-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--panel-border); color: var(--text-dim);
  white-space: nowrap;
}
.ticket-pill-open { border-color: rgba(199, 201, 209, 0.45); color: var(--text); }
.ticket-pill-warn { border-color: rgba(245, 158, 11, 0.55); color: #fbbf24; }
.ticket-pill-ok { border-color: rgba(52, 211, 153, 0.5); color: #34d399; }
html.light .ticket-pill-open { border-color: #c9ccd4; color: #16181d; }
html.light .ticket-pill-warn { border-color: #d9a441; color: #92600e; }
html.light .ticket-pill-ok { border-color: #6ec2a1; color: #07694a; }

/* Thread */
.ticket-thread {
  max-height: 380px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px;
}
.ticket-msg {
  border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 11px 14px; max-width: 88%;
  background: var(--bg-elevated);
}
.ticket-msg-user { align-self: flex-start; }
/* Support replies sit on the opposite side with a slightly stronger border so
   the two voices are distinguishable by position and weight, not just tint. */
.ticket-msg-support {
  align-self: flex-end;
  border-color: var(--accent);
  background: var(--panel);
}
.ticket-msg-meta {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px;
}
.ticket-msg-body { font-size: 13.5px; line-height: 1.55; color: var(--text); word-break: break-word; }

/* Diagnostics snapshot — founder-only. Dense on purpose: it exists to be
   scanned in two seconds before writing a reply. */
.ticket-diag {
  border: 1px dashed var(--panel-border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px; background: var(--bg-elevated);
}
.ticket-diag-head {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
}
.ticket-diag-grid {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: 5px 12px; font-size: 12.5px;
}
@media (max-width: 620px) { .ticket-diag-grid { grid-template-columns: auto 1fr; } }
.ticket-diag-k { color: var(--text-faint); white-space: nowrap; }
.ticket-diag-v { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Dashboard v2 — hero + today, KPI strip, charts row, activity
   These override the flat .stat-card stack that shipped first. styles.css is
   the read-only base; everything below is layered on top of it.
   ========================================================================== */

.dash-hero-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}
@media (max-width: 980px) { .dash-hero-row { grid-template-columns: 1fr; } }

/* The chrome hero is now a block so the delta chip can stack under the
   number instead of fighting the icon for the same flex row. */
.hero-stat-card {
  display: block;
  margin-bottom: 0;
  padding: 28px 30px;
}
.hero-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hero-stat-copy { min-width: 0; }
.hero-stat-card .value { font-size: 50px; }
.hero-stat-card .hero-icon svg { width: 48px; height: 48px; }

.hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.10);
  font-variant-numeric: tabular-nums;
}
.hero-delta.up { color: #0d6b48; }
.hero-delta.down { color: #97202c; }
.hero-delta.flat { color: #4a4d56; }

/* ---- Today card ---- */
.dash-today-card { display: flex; flex-direction: column; padding: 20px 22px; }
.dash-today-date { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); }
.today-list { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.today-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.today-row:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.055); }
.today-row:active { transform: scale(0.99); }
.today-row:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.today-row.is-empty { opacity: 0.55; }
.today-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e5e7eb;
}
.today-ico svg { width: 17px; height: 17px; }
.today-row.warn .today-ico { color: #f0c060; border-color: rgba(240,192,96,0.32); background: rgba(240,192,96,0.10); }
.today-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.today-label { font-size: 14px; font-weight: 700; line-height: 1.25; }
.today-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.3; }
.today-count { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.today-chev { font-size: 20px; color: var(--text-faint); line-height: 1; margin-left: 2px; }

/* ---- KPI strip ---- */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1000px) { .dash-kpi-row { grid-template-columns: 1fr 1fr; } }
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #e5e7eb, #6b7280);
  opacity: 0.75;
}
.kpi-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-faint); }
.kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -0.6px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* ---- Charts row ---- */
.dash-charts-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 980px) { .dash-charts-row { grid-template-columns: 1fr; } }
.chart-panel { display: flex; flex-direction: column; }
.chart-legend-note { font-size: 12px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; flex: 1; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-hit:hover { fill: rgba(255,255,255,0.05); }
.chart-tip {
  position: absolute;
  bottom: 100%;
  transform: translate(-50%, -6px);
  min-width: 168px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 5;
}
.tip-title { font-size: 12px; font-weight: 800; margin-bottom: 5px; letter-spacing: 0.2px; }
.tip-row { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--text-dim); }
.tip-row b { color: var(--text); font-variant-numeric: tabular-nums; }

.health-wrap { display: flex; align-items: center; gap: 20px; flex: 1; }
.health-wrap > svg { width: 168px; height: 168px; flex-shrink: 0; }
.health-legend { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
@media (max-width: 560px) { .health-wrap { flex-direction: column; } }

/* ---- Recently added ---- */
.recent-client-row { gap: 12px; padding: 11px 0; }
.recent-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #0a0a0c;
  font-size: 12px; font-weight: 800; letter-spacing: 0.3px;
}
.recent-copy { flex: 1; min-width: 0; }
.recent-figs { text-align: right; flex-shrink: 0; }
.recent-ap { font-size: 14px; font-weight: 800; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }

/* ---- Dashboard light mode ---- */
html.light .kpi-card { background: #ffffff; border-color: #e2e4ea; }
html.light .kpi-card::before { background: linear-gradient(180deg, #52525b, #18181b); }
html.light .today-row { background: #ffffff; border-color: #e2e4ea; }
html.light .today-row:hover { border-color: #16181d; background: #f6f7f9; }
html.light .today-ico { background: #f1f2f5; border-color: #dfe1e7; color: #3f3f46; }
html.light .today-row.warn .today-ico { color: #8a5b00; border-color: #edd9a8; background: #fdf5e3; }
html.light .chart-tip { background: #ffffff; border-color: #e2e4ea; box-shadow: 0 12px 30px rgba(30,33,44,0.16); }
html.light .trend-hit:hover { fill: rgba(0,0,0,0.04); }
html.light .recent-avatar { background: linear-gradient(135deg, #52525b, #18181b); color: #ffffff; }

/* ==========================================================================
   Scoreboard v2 — header, totals, podium, standings
   ========================================================================== */

.sb-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sb-title h2 { margin: 0 0 2px; font-size: 22px; letter-spacing: -0.4px; }
.sb-periods { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 999px; padding: 4px; gap: 2px; }
.sb-period { border: none; background: transparent; border-radius: 999px; padding: 7px 15px; }
.sb-period:hover { border-color: transparent; background: rgba(255,255,255,0.07); }
.sb-totals { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.sb-total .value { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sb-totals { grid-template-columns: 1fr 1fr; } }

/* ---- Podium ---- */
.sb-podium-card { padding: 22px 22px 0; margin-bottom: 18px; overflow: hidden; }
.sb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.podium-slot { flex: 1; max-width: 210px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.podium-medal { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.podium-avatar {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 16px; font-weight: 800; letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.podium-slot.rank-1 .podium-avatar {
  width: 62px; height: 62px; font-size: 19px;
  background: linear-gradient(135deg, #f2f3f6, #a3a7b1);
  border-color: rgba(255,255,255,0.5);
  color: #0a0a0c;
  box-shadow: 0 8px 22px rgba(255,255,255,0.16);
}
.podium-slot.me .podium-avatar { border-color: rgba(255,255,255,0.6); }
.podium-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-ap { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.podium-policies { font-size: 11.5px; color: var(--text-faint); margin-bottom: 10px; }
.podium-block {
  width: 100%;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03));
  border: 1px solid var(--panel-border);
  border-bottom: none;
  display: flex; align-items: center; justify-content: center;
}
.podium-block span { font-size: 26px; font-weight: 800; color: var(--text-faint); }
.podium-slot.rank-1 .podium-block { background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06)); }
@media (max-width: 640px) {
  .sb-podium { gap: 8px; }
  .podium-policies { display: none; }
}

/* ---- Standings rows ---- */
.sb-row { gap: 12px; padding: 13px 14px; }
.sb-rank { width: 26px; }
.sb-rank-num { font-size: 15px; font-weight: 800; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.sb-row.top3 .sb-rank-num { color: var(--text); }
.sb-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.3px;
}
.sb-row.top3 .sb-avatar { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #0a0a0c; border-color: transparent; }
.sb-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
.sb-ap, .sb-policies { font-variant-numeric: tabular-nums; }

/* ---- Scoreboard light mode ---- */
html.light .sb-periods { background: #f1f2f5; border-color: #e2e4ea; }
html.light .sb-period:hover { background: #e4e6ec; }
html.light .podium-avatar { background: #f1f2f5; border-color: #dfe1e7; }
html.light .podium-slot.rank-1 .podium-avatar { background: linear-gradient(135deg, #52525b, #18181b); color: #ffffff; border-color: transparent; box-shadow: 0 8px 22px rgba(30,33,44,0.2); }
html.light .podium-block { background: linear-gradient(180deg, #eceef2, #f7f8fa); border-color: #e2e4ea; }
html.light .podium-slot.rank-1 .podium-block { background: linear-gradient(180deg, #dcdfe6, #f2f3f6); }
html.light .sb-avatar { background: #f1f2f5; border-color: #dfe1e7; }
html.light .sb-row.top3 .sb-avatar { background: linear-gradient(135deg, #52525b, #18181b); color: #ffffff; border-color: transparent; }

/* Hero footer strip — fills the space the block layout opened up, and gives
   the headline number something to be measured against. */
.hero-foot {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.hero-foot-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-foot .hf-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #4a4d56; }
.hero-foot .hf-value { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; color: #0c0d10; font-variant-numeric: tabular-nums; }

/* Light mode keeps the chrome identity — a plain white hero reads like an
   empty card next to the Today panel. Overrides the blanket white-panel rule
   further up this file, so it has to come after it. */
html.light .hero-stat-card {
  background: linear-gradient(115deg, #dcdfe6, #fbfcfe 22%, #c7cbd4 45%, #fdfdff 68%, #d9dce3 88%, #eef0f4);
  background-size: 260% 260%;
}

/* ==========================================================================
   Commissions → Paid Out + Profit & Loss
   ========================================================================== */

/* ---- Statement upload / expense entry form ---- */
/* One row of labelled fields that wraps instead of squeezing — a carrier
   select and a file picker have very different natural widths. */
.stmt-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.stmt-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; min-width: 0; }
.stmt-field > span {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-faint);
}
.stmt-field > select,
.stmt-field > input {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  width: 100%;
}
.stmt-field > input[type="file"] { padding: 9px 11px; font-size: 12.5px; cursor: pointer; }
.stmt-field > input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--panel-border); background: var(--panel);
  color: var(--text); font-family: var(--font); font-size: 12px;
  font-weight: 700; cursor: pointer;
}
.stmt-field-file { flex: 2 1 300px; }
.stmt-field-narrow { flex: 0 1 140px; }
.stmt-form .btn { flex: 0 0 auto; height: 43px; }

/* Upload result banner — matched/unmatched/chargeback counts. */
.stmt-result {
  margin-top: 16px; padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(25,158,112,0.32);
  background: rgba(25,158,112,0.09);
  font-size: 13.5px; color: var(--text);
}
.stmt-result strong { font-variant-numeric: tabular-nums; }
.stmt-result-line { margin-top: 6px; color: var(--text-dim); font-size: 12.5px; }

.pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px;
  border-radius: 999px;
  background: rgba(201,133,0,0.16);
  border: 1px solid rgba(201,133,0,0.4);
  color: #e8b64d;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Entry-type chips on ledger rows. Advance / as-earned / renewal / bonus are
   informational; chargeback is the one that has to be unmissable. */
.entry-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
}
.entry-chip.entry-chargeback { background: rgba(217,43,60,0.15); border-color: rgba(217,43,60,0.45); color: #f08a94; }
.entry-chip.entry-renewal { background: rgba(25,158,112,0.14); border-color: rgba(25,158,112,0.4); color: #5fd0a6; }
.entry-chip.entry-bonus { background: rgba(123,127,214,0.16); border-color: rgba(123,127,214,0.42); color: #a7aaea; }
.comm-minus { color: #f08a94; }
.rate-unknown { font-size: 11px; color: #e8b64d; display: block; margin-top: 2px; }

/* ---- P&L hero ---- */
/* Same brushed-chrome treatment as the dashboard hero so the P&L reads as a
   headline number, not another table. */
.pnl-hero {
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  padding: 24px 26px;
  background: linear-gradient(115deg, #17181c, #2c2e35 22%, #101115 45%, #33353d 68%, #15161a 88%, #232429);
  background-size: 260% 260%;
}
.pnl-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pnl-hero-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); }
.pnl-hero-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.pnl-stats { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.pnl-stat {
  flex: 1 1 180px; min-width: 0;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.07);
}
.pnl-stat-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); }
.pnl-stat-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--text); }
.pnl-stat-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.pnl-stat-net { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.pnl-net-pos { color: #5fd0a6; }
.pnl-net-neg { color: #f08a94; }

/* ---- Chart ---- */
.chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.chart-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chart-swatch-in { background: #199e70; }
.chart-swatch-out { background: #7b7fd6; }
/* Capped so the 3:1 viewBox can't stretch into a half-screen of empty
   headroom on a wide monitor. */
.pnl-chart-svg { width: 100%; max-width: 880px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.pnl-chart-bar { transition: opacity 0.12s ease; }
.pnl-chart-group:hover .pnl-chart-bar { opacity: 0.55; }
.pnl-chart-group:hover .pnl-chart-bar-hovered { opacity: 1; }
.pnl-chart-month { font-size: 11px; font-weight: 700; fill: var(--text-faint); }
.pnl-chart-value { font-size: 10.5px; font-weight: 800; fill: var(--text-dim); }
.pnl-chart-baseline { stroke: var(--panel-border); stroke-width: 1; }

/* ---- Light mode ---- */
html.light .stmt-field > input[type="file"]::file-selector-button { background: #f1f2f5; border-color: #dfe1e7; }
html.light .stmt-result { border-color: rgba(15,143,99,0.34); background: rgba(15,143,99,0.08); }
html.light .pill-count { background: rgba(180,120,0,0.12); border-color: rgba(180,120,0,0.35); color: #8a6100; }
html.light .entry-chip { background: #f1f2f5; border-color: #e2e4ea; color: #4b5260; }
html.light .entry-chip.entry-chargeback { background: rgba(200,30,45,0.1); border-color: rgba(200,30,45,0.32); color: #b21f2c; }
html.light .entry-chip.entry-renewal { background: rgba(15,143,99,0.1); border-color: rgba(15,143,99,0.32); color: #0c6e4c; }
html.light .entry-chip.entry-bonus { background: rgba(106,111,208,0.12); border-color: rgba(106,111,208,0.34); color: #494ea6; }
html.light .comm-minus { color: #b21f2c; }
html.light .rate-unknown { color: #8a6100; }
html.light .pnl-hero {
  background: linear-gradient(115deg, #dcdfe6, #fbfcfe 22%, #c7cbd4 45%, #fdfdff 68%, #d9dce3 88%, #eef0f4);
  background-size: 260% 260%;
  border-color: #e2e4ea;
}
html.light .pnl-hero-title { color: #0c0d10; }
html.light .pnl-hero-sub { color: #4a4d56; }
html.light .pnl-stat { background: rgba(255,255,255,0.72); border-color: rgba(0,0,0,0.08); }
html.light .pnl-stat-label { color: #4a4d56; }
html.light .pnl-stat-value { color: #0c0d10; }
html.light .pnl-stat-meta { color: #4a4d56; }
html.light .pnl-stat-net { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.14); }
html.light .pnl-net-pos { color: #0c6e4c; }
html.light .pnl-net-neg { color: #b21f2c; }
html.light .chart-swatch-in { background: #0f8f63; }
html.light .chart-swatch-out { background: #6a6fd0; }

/* btn-danger inherits a dark-mode salmon that turns into pink-on-pink once the
   surface goes white. Only the light case needs restating. */
html.light .btn-danger { background: rgba(239, 68, 68, 0.10); color: #a3121f; border-color: rgba(239, 68, 68, 0.35); }
html.light .btn-danger:hover { background: rgba(239, 68, 68, 0.18); color: #8a0f1a; }

/* The sub-tab row and the level hero were stacked flush against each other.
   Tabs first, then a real gap, then the hero they belong to. */
#commSubnav { margin-top: 2px; margin-bottom: 18px; }
#commLevelHero { margin-bottom: 18px; }

/* ---- Contract Agent ---------------------------------------------------- */

/* Carrier picks read as a row of removable chips rather than a multi-select
   list box: a multi-select hides what's chosen the moment it scrolls, and the
   whole point here is seeing the full carrier set at a glance. */
.chip-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip-tray-empty {
  font-size: 13px;
  opacity: 0.55;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e5e7eb;
}
.chip-x {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.6;
  color: inherit;
}
.chip-x:hover { opacity: 1; }

/* Status chips double as the control that advances them, so they need to look
   pressable — hence the cursor and the lift on hover. */
.chip-status {
  cursor: pointer;
  border-color: transparent;
  font-weight: 500;
}
.chip-status:hover { filter: brightness(1.15); }
.chip-status:disabled { opacity: 0.5; cursor: default; }

.contract-row {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.02);
}
/* Every carrier cleared. A left rule marks it done without repainting the
   whole card green, which would shout over the rows still in progress. */
.contract-row-done { border-left: 2px solid rgba(134, 239, 172, 0.55); }
.contract-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.contract-row-name {
  font-size: 15px;
  font-weight: 600;
}
.contract-row-meta {
  font-size: 12.5px;
  opacity: 0.62;
  margin-top: 3px;
}
.contract-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html.light .chip {
  background: #f4f5f7;
  border-color: #e2e4e9;
  color: #3a4150;
}
html.light .contract-row {
  border-color: #e6e8ec;
  background: #fcfcfd;
}
html.light .contract-row-done { border-left-color: #16a34a; }

/* Status chips need their own rules: .chip sets a background, and because
   theme-mono loads after styles.css it was winning over .badge-ok/.badge-warn,
   flattening every status to the same gray. Status is the whole point of this
   board, so state it explicitly here. The label is always spelled out on the
   chip too — nothing here is carried by color alone. */
.chip-status.badge-neutral {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: #b9bfca;
}
.chip-status.badge-warn {
  background: rgba(245, 158, 11, 0.16);
  border-color: transparent;
  color: #fcd34d;
}
.chip-status.badge-ok {
  background: rgba(34, 197, 94, 0.16);
  border-color: transparent;
  color: #86efac;
}
.chip-status.badge-danger {
  background: rgba(239, 68, 68, 0.16);
  border-color: transparent;
  color: #fca5a5;
}

html.light .chip-status.badge-neutral {
  background: transparent;
  border: 1px dashed #c8ccd4;
  color: #5b6472;
}
html.light .chip-status.badge-warn { background: rgba(180, 83, 9, 0.12); color: #92400e; }
html.light .chip-status.badge-ok { background: rgba(22, 101, 52, 0.12); color: #15803d; }
html.light .chip-status.badge-danger { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }

/* ============================================================
   Sidebar — fits any screen height (v64)
   The nav list scrolls on its own; Settings / agency / Log Out
   stay pinned to the bottom and are never clipped.
   ============================================================ */
.sidebar { overflow: hidden; }

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
  overscroll-behavior: contain;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 3px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.26); }
html.light .sidebar-nav { scrollbar-color: rgba(0,0,0,0.16) transparent; }
html.light .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.13); }
html.light .sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.26); }

.sidebar-top { flex-shrink: 0; }
.sidebar-foot { flex-shrink: 0; }

/* Short screens: tighten spacing so scrolling is rarely needed at all */
@media (max-height: 900px) {
  .sidebar { padding-top: 14px; padding-bottom: 14px; }
  .sidebar-top { margin-bottom: 16px; }
  .sidebar-nav { gap: 2px; }
  .sidebar-nav a,
  .sidebar-settings-link { padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
  .nav-group-divider { margin: 6px 12px; }
  .sidebar-user { padding: 2px 12px 8px; font-size: 12.5px; }
  .sidebar-user strong { font-size: 13.5px; }
}
@media (max-height: 760px) {
  .sidebar { padding-top: 12px; padding-bottom: 12px; }
  .sidebar-top { margin-bottom: 10px; }
  .sidebar-nav a,
  .sidebar-settings-link { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; gap: 10px; }
  .nav-icon svg { width: 16px; height: 16px; }
  .nav-group-divider { margin: 4px 12px; }
  .sidebar-user { padding: 2px 12px 6px; font-size: 12px; }
  .sidebar-user strong { font-size: 13px; }
  .sidebar-foot { padding-top: 8px; }
}

/* ============================================================
   Billing lock (v65)
   Locked nav items + the "subscription stopped" modal.
   ============================================================ */

/* A locked tab still reads as a tab — dimmed and padlocked, not hidden.
   Hiding them would make the product look smaller than it is; the point is
   to show what's waiting on the other side of resubscribing. */
.sidebar-nav a.nav-locked { opacity: 0.42; }
.sidebar-nav a.nav-locked:hover { background: transparent; color: var(--text-dim); cursor: not-allowed; }
/* Absolutely positioned rather than a flex sibling: the longest row
   ("Persistly Dialer" + its SOON badge) already fills the 250px sidebar, so a
   padlock in the flex flow got clipped. Reserving padding on the right and
   pinning the glyph into it keeps every lock on the same vertical line no
   matter how long the label is. */
.sidebar-nav a.nav-locked { position: relative; }
.sidebar-nav a.nav-locked:not(:has(.nav-soon)) { padding-right: 28px; }
/* A tab that already says SOON is a teaser, not something a subscription
   unlocks — the padlock says nothing new there, and its label + badge already
   fill the row, so the glyph would collide. Let the badge speak for itself. */
.sidebar-nav a.nav-locked:has(.nav-soon)::after { display: none; }
.sidebar-nav a.nav-locked::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  flex-shrink: 0;
  opacity: 0.9;
  background-color: currentColor;
  -webkit-mask: var(--lock-glyph) center / contain no-repeat;
  mask: var(--lock-glyph) center / contain no-repeat;
}
.sidebar.collapsed .sidebar-nav a.nav-locked::after { display: none; }
:root {
  --lock-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.billing-lock-icon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(185, 28, 28, 0.12);
  border: 1px solid rgba(185, 28, 28, 0.3);
  color: #f87171;
}
.billing-lock-icon svg { width: 24px; height: 24px; }
.billing-lock-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 6px; }
.billing-lock-tab {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.billing-lock-body { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin-bottom: 22px; }
.billing-lock-actions { display: flex; gap: 10px; justify-content: center; }
.billing-lock-note { font-size: 12.5px; color: var(--text-faint); margin-top: 16px; }

html.light .billing-lock-icon { background: rgba(185, 28, 28, 0.08); border-color: rgba(185, 28, 28, 0.22); color: #b91c1c; }

/* ============================================================
   My Team — downline drill-down on the agent detail card (v70)
   ============================================================ */
.agent-team-count {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.agent-team-count:hover { border-color: rgba(255,255,255,0.3); background: var(--bg-elevated); }
/* Nobody underneath: same shape, no affordance — a count of zero is still a
   count, and swapping in a sentence made the field jump around. */
.agent-team-count.is-empty { cursor: default; color: var(--text-faint); }
.agent-team-count.is-empty::after { content: none; }
.agent-team-count::after {
  content: "▾";
  font-size: 10px; color: var(--text-faint);
  transition: transform .18s ease;
}
.agent-team-count.open::after { transform: rotate(180deg); }
.agent-team-direct {
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-faint);
  padding-left: 8px; border-left: 1px solid var(--panel-border);
}

.agent-team-panel { margin-top: 22px; }
.agent-team-list { display: flex; flex-direction: column; gap: 6px; }
.agent-team-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font); font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.agent-team-row:hover { border-color: rgba(255,255,255,0.28); background: var(--bg-elevated); }
.agent-team-name { font-weight: 600; }
/* Pushed right so the "Direct" / "Under X" note lines up down the column no
   matter how long a name is. */
.agent-team-meta { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }

html.light .agent-team-count { background: #ffffff; }
html.light .agent-team-count:hover { border-color: #b9bec9; background: #f6f7f9; }
html.light .agent-team-row { background: #ffffff; }
html.light .agent-team-row:hover { border-color: #b9bec9; background: #f6f7f9; }

/* ============================================================
   Scoreboard — deal streaks (v70)
   ============================================================ */
.streak-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(234, 88, 12, 0.34);
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(234, 88, 12, 0.20), transparent 62%),
    var(--panel);
  position: relative; overflow: hidden;
}
/* No live streak: same layout, heat drained out of it. */
.streak-banner.cold {
  border-color: var(--panel-border);
  background: var(--panel);
}

.streak-flame {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(234, 88, 12, 0.16);
  border: 1px solid rgba(234, 88, 12, 0.4);
  color: #fb923c;
}
.streak-flame svg { width: 26px; height: 26px; fill: currentColor; animation: flameFlicker 2.6s ease-in-out infinite; }
.streak-banner.cold .streak-flame {
  background: var(--bg-elevated); border-color: var(--panel-border); color: var(--text-faint);
}
.streak-banner.cold .streak-flame svg { animation: none; }
@keyframes flameFlicker {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.09); opacity: 1; }
}

.streak-body { min-width: 0; }
.streak-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 5px;
}
.streak-headline { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.streak-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

.streak-count {
  margin-left: auto; flex-shrink: 0; text-align: right;
  font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1.5px;
  color: #fb923c;
}
.streak-count span {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-faint); margin-top: 5px;
}
.streak-banner.cold .streak-count { color: var(--text-dim); }

/* Row + podium chip. Restates its own colours because theme-mono loads after
   styles.css and a generic badge rule would flatten it. */
.streak-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: rgba(234, 88, 12, 0.14);
  border: 1px solid rgba(234, 88, 12, 0.32);
  color: #fb923c;
  vertical-align: middle;
}
.streak-chip svg { width: 11px; height: 11px; fill: currentColor; }
.streak-chip.hot { background: rgba(234, 88, 12, 0.24); border-color: rgba(234, 88, 12, 0.55); }
.streak-chip.cold {
  background: var(--bg-elevated); border-color: var(--panel-border); color: var(--text-faint);
  font-weight: 700; padding: 2px 8px;
}
.podium-streak { margin-top: 6px; min-height: 20px; }
.podium-streak .streak-chip { margin-left: 0; }

html.light .streak-banner {
  border-color: rgba(194, 65, 12, 0.3);
  background: radial-gradient(120% 160% at 0% 50%, rgba(234, 88, 12, 0.12), transparent 62%), #ffffff;
}
html.light .streak-banner.cold { border-color: var(--panel-border); background: #ffffff; }
html.light .streak-flame { background: rgba(234, 88, 12, 0.10); border-color: rgba(194, 65, 12, 0.28); color: #c2410c; }
html.light .streak-count { color: #c2410c; }
html.light .streak-chip { background: rgba(234, 88, 12, 0.10); border-color: rgba(194, 65, 12, 0.28); color: #c2410c; }
html.light .streak-chip.hot { background: rgba(234, 88, 12, 0.18); border-color: rgba(194, 65, 12, 0.45); }
html.light .streak-chip.cold { background: #f0f1f4; border-color: #d3d6dd; color: #6b7280; }

@media (max-width: 720px) {
  .streak-banner { flex-wrap: wrap; gap: 14px; }
  .streak-count { margin-left: 0; text-align: left; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .streak-flame svg { animation: none; }
}

/* ============================================================
   Scoreboard game layer (v71)
   Your-standing card, badges, rank movement, fills, confetti.
   ============================================================ */

/* ---- Your standing ---- */
.sb-you-card {
  display: flex; align-items: stretch; gap: 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background:
    radial-gradient(130% 180% at 100% 0%, rgba(255,255,255,0.07), transparent 60%),
    var(--panel);
  position: relative; overflow: hidden;
}
/* #1 gets the gold treatment — the only place on the board that does. */
.sb-you-card.champion {
  border-color: rgba(250, 204, 21, 0.42);
  background:
    radial-gradient(130% 180% at 100% 0%, rgba(250, 204, 21, 0.16), transparent 62%),
    var(--panel);
}
.sb-you-card.champion::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 62%);
  transform: translateX(-100%);
  animation: sbShine 4.5s ease-in-out 0.6s infinite;
  pointer-events: none;
}
@keyframes sbShine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(120%); } }

.sb-you-rank {
  flex-shrink: 0; width: 108px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-right: 20px; border-right: 1px solid var(--panel-border);
}
.sb-you-rank-num { font-size: 40px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-you-card.champion .sb-you-rank-num { color: #facc15; }
.sb-you-rank-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-faint); margin-top: 6px;
}
.sb-you-delta { margin-top: 8px; }

.sb-you-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sb-you-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.sb-you-name { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.sb-you-chase { font-size: 14px; color: var(--text-dim); margin-bottom: 9px; }
.sb-you-chase strong { color: var(--text); }
.sb-chase-track { height: 7px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; }
.sb-chase-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #a1a1aa, #f4f4f5);
  transition: width 1s cubic-bezier(.2,.7,.2,1);
}
.sb-you-card.champion .sb-chase-fill { background: linear-gradient(90deg, #f59e0b, #facc15); }
.sb-you-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-faint); }
.sb-you-stats strong { color: var(--text); font-size: 14px; font-weight: 800; }

/* ---- Badges ---- */
.sb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  width: 22px; height: 22px; justify-content: center;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--bg-elevated);
  color: var(--text-dim);
  vertical-align: middle;
}
.sb-badge svg { width: 12px; height: 12px; fill: currentColor; }
.sb-badge.big { width: auto; height: auto; padding: 3px 10px 3px 8px; font-size: 11.5px; font-weight: 800; }
/* Club chips climb three finishes rather than seven colours: neutral for the
   first rungs, silver in the middle, gold at the top. Escalation you can feel
   without the board turning into a paint chart. */
.sb-badge-club            { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); color: #d4d4d8; }
.sb-badge-club.club-3,
.sb-badge-club.club-4,
.sb-badge-club.club-5     { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.38); color: #fafafa; }
.sb-badge-club.club-6,
.sb-badge-club.club-7     { background: rgba(250,204,21,0.16); border-color: rgba(250,204,21,0.44); color: #facc15; }

/* ---- Rank movement ---- */
.sb-delta {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.sb-delta.up { color: #4ade80; }
.sb-delta.down { color: #f87171; }
.sb-delta.flat { color: var(--text-faint); }

/* ---- Row entrance + bar fill ---- */
.sb-row { animation: sbRowIn .45s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes sbRowIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.sb-bar > div { transition: width .9s cubic-bezier(.2,.7,.2,1); }

/* ---- Confetti ---- */
.sb-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.sb-confetti i {
  position: absolute; top: -14px;
  width: 7px; height: 12px; border-radius: 1px;
  animation: sbFall 2.2s cubic-bezier(.3,.6,.5,1) forwards;
}
@keyframes sbFall {
  to { transform: translateY(105vh) rotate(560deg); opacity: 0; }
}
#view-scoreboard { position: relative; }

/* ---- Light mode ---- */
html.light .sb-you-card { background: radial-gradient(130% 180% at 100% 0%, rgba(0,0,0,0.04), transparent 60%), #ffffff; }
html.light .sb-you-card.champion {
  border-color: rgba(202,138,4,0.4);
  background: radial-gradient(130% 180% at 100% 0%, rgba(250,204,21,0.20), transparent 62%), #ffffff;
}
html.light .sb-you-card.champion .sb-you-rank-num { color: #b45309; }
html.light .sb-chase-fill { background: linear-gradient(90deg, #71717a, #27272a); }
html.light .sb-you-card.champion .sb-chase-fill { background: linear-gradient(90deg, #d97706, #facc15); }
html.light .sb-badge { background: #f3f4f6; border-color: #d3d6dd; color: #6b7280; }
html.light .sb-badge-club        { background: #eceef2; border-color: #d3d6dd; color: #3f3f46; }
html.light .sb-badge-club.club-3,
html.light .sb-badge-club.club-4,
html.light .sb-badge-club.club-5 { background: #e2e4ea; border-color: #b9bec9; color: #16181d; }
html.light .sb-badge-club.club-6,
html.light .sb-badge-club.club-7 { background: rgba(202,138,4,0.14); border-color: rgba(202,138,4,0.4); color: #a16207; }
html.light .sb-delta.up { color: #15803d; }
html.light .sb-delta.down { color: #b91c1c; }

@media (max-width: 720px) {
  .sb-you-card { flex-direction: column; gap: 14px; }
  .sb-you-rank { width: auto; flex-direction: row; gap: 10px; align-items: baseline; justify-content: flex-start;
    padding-right: 0; padding-bottom: 12px; border-right: none; border-bottom: 1px solid var(--panel-border); }
  .sb-you-rank-num { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-you-card.champion::after,
  .sb-row { animation: none; }
  .sb-chase-fill, .sb-bar > div { transition: none; }
}

/* ============================================================
   THE ARENA — blown-out scoreboard (v72)
   ============================================================ */

/* One accent for the whole board. The tier-coloured version made the page
   change colour depending on who was winning, which read as noise rather than
   information — rank is already communicated by position. */
.sb-arena, .sb-row { --tier: #d4d4d8; }

.sb-arena {
  position: relative;
  margin-bottom: 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  background: #08080b;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Slow-drifting tier-coloured light. Two blobs at different speeds so the
   motion never visibly loops. */
.sb-arena-aurora {
  position: absolute; inset: -40%;
  background:
    radial-gradient(38% 46% at 22% 40%, color-mix(in srgb, var(--tier) 55%, transparent), transparent 65%),
    radial-gradient(32% 40% at 78% 62%, color-mix(in srgb, var(--tier) 32%, transparent), transparent 66%);
  filter: blur(18px);
  opacity: 0.55;
  animation: arenaDrift 18s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes arenaDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  100% { transform: translate3d(5%, 3%, 0) scale(1.12); }
}
/* Faint pitch markings — enough to read as an arena floor, not a spreadsheet. */
.sb-arena-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(90% 120% at 50% 120%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 120% at 50% 120%, #000 20%, transparent 72%);
}

.sb-arena-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 30px;
  padding: 30px 36px;
}

.sb-arena-gem {
  flex-shrink: 0; width: 132px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--tier) 60%, transparent));
  animation: gemFloat 6s ease-in-out infinite;
}
.sb-arena-gem svg { width: 132px; height: auto; }
.sb-arena-crest {
  width: 116px; height: 116px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.sb-arena-crest span {
  font-size: 62px; font-weight: 800; letter-spacing: -3px; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
@keyframes gemFloat { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }

.sb-arena-body { flex: 1; min-width: 0; }
.sb-arena-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: color-mix(in srgb, var(--tier) 75%, #ffffff);
  margin-bottom: 6px;
}
.sb-arena-name {
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 800; letter-spacing: -2.4px; line-height: 0.98;
  color: #fff;
  text-shadow: 0 0 46px color-mix(in srgb, var(--tier) 45%, transparent);
  word-break: break-word;
}
.sb-arena-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }

.sb-arena-figures { flex-shrink: 0; text-align: right; }
.sb-arena-ap {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800; letter-spacing: -1.6px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.sb-arena-ap-label {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.44); margin-top: 7px;
}
.sb-arena-sub { font-size: 13px; color: rgba(255,255,255,0.66); margin-top: 12px; }

/* ---- Gems on the podium and in the rows ---- */
/* Tier rail down the left edge of every standing. */
.sb-row { position: relative; overflow: hidden; }
.sb-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tier); opacity: 0.75;
}
.sb-row.top3::before { width: 4px; opacity: 1; box-shadow: 0 0 16px var(--tier); }

html.light .sb-arena { background: #0c0d11; }
html.light .sb-arena-name, html.light .sb-arena-ap { color: #fff; }

@media (max-width: 860px) {
  .sb-arena-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
  .sb-arena-figures { text-align: left; }
  .sb-arena-gem { width: 92px; }
  .sb-arena-gem svg { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-arena-aurora, .sb-arena-gem { animation: none; }
}

/* ============================================================
   Profile pictures (v73)
   One rule set, so a face and an initials circle are never
   styled differently in two places.
   ============================================================ */
.avatar-editor { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar-preview {
  width: 92px; height: 92px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  font-size: 28px; font-weight: 800; color: var(--text-dim);
  overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.avatar-actions .btn { align-self: flex-start; }

/* Any avatar holding a photo: kill the initials styling and fill the circle. */
.sb-avatar.has-photo,
.podium-avatar.has-photo,
.team-avatar.has-photo,
.agent-team-avatar.has-photo,
.agent-detail-avatar.has-photo,
.sb-you-face.has-photo { padding: 0; overflow: hidden; }
.sb-avatar.has-photo img,
.podium-avatar.has-photo img,
.team-avatar.has-photo img,
.agent-team-avatar.has-photo img,
.agent-detail-avatar.has-photo img,
.sb-you-face.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.team-avatar, .agent-team-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--panel-border);
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  margin-right: 10px; overflow: hidden;
}
.agent-team-avatar { margin-right: 2px; }
.agent-detail-avatar {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--panel-border);
  font-size: 20px; font-weight: 800; color: var(--text-dim); overflow: hidden;
}

.sb-you-face-wrap { display: flex; align-items: center; }
.sb-you-face {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--panel-border);
  font-size: 18px; font-weight: 800; color: var(--text-dim); overflow: hidden;
}

/* The champion's face, at scale. */
.sb-arena-face {
  width: 116px; height: 116px; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.sb-arena-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Podium — gold / silver / bronze (v75)
   The one place colour is doing real work: three positions,
   three metals everybody already reads without a legend.
   ============================================================ */
.podium-slot.rank-1 .podium-block {
  background: linear-gradient(180deg, rgba(250,204,21,0.46), rgba(202,138,4,0.14));
  border-color: rgba(250,204,21,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 -12px 34px rgba(250,204,21,0.16);
}
.podium-slot.rank-2 .podium-block {
  background: linear-gradient(180deg, rgba(226,232,240,0.40), rgba(148,163,184,0.12));
  border-color: rgba(226,232,240,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 -12px 30px rgba(203,213,225,0.12);
}
.podium-slot.rank-3 .podium-block {
  background: linear-gradient(180deg, rgba(217,119,6,0.40), rgba(120,53,15,0.14));
  border-color: rgba(217,119,6,0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 -12px 30px rgba(217,119,6,0.13);
}
/* The numeral is engraved into the metal rather than sitting on it: a light
   catch below, a dark groove above, the face on top. */
.podium-slot .podium-block span {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 0 rgba(255,255,255,0.28), 0 -1px 0 rgba(0,0,0,0.45);
}
.podium-slot.rank-1 .podium-block span { color: #fff8dc; }
.podium-slot.rank-2 .podium-block span { color: #f8fafc; }
.podium-slot.rank-3 .podium-block span { color: #fde8cf; }

/* A thin metal lip along the top edge of each block. */
.podium-block { position: relative; }
.podium-block::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 12px 12px 0 0;
}
.podium-slot.rank-1 .podium-block::before { background: linear-gradient(90deg, transparent, #fde68a, transparent); }
.podium-slot.rank-2 .podium-block::before { background: linear-gradient(90deg, transparent, #f1f5f9, transparent); }
.podium-slot.rank-3 .podium-block::before { background: linear-gradient(90deg, transparent, #fbbf77, transparent); }

html.light .podium-slot.rank-1 .podium-block {
  background: linear-gradient(180deg, #fde68a, #fef9e7); border-color: #f0d071;
}
html.light .podium-slot.rank-2 .podium-block {
  background: linear-gradient(180deg, #dfe3ea, #f7f8fa); border-color: #c6ccd6;
}
html.light .podium-slot.rank-3 .podium-block {
  background: linear-gradient(180deg, #f2c99a, #fdf1e5); border-color: #e0b184;
}
html.light .podium-slot .podium-block span {
  text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 -1px 0 rgba(0,0,0,0.14);
}
html.light .podium-slot.rank-1 .podium-block span { color: #7c5b06; }
html.light .podium-slot.rank-2 .podium-block span { color: #4b5260; }
html.light .podium-slot.rank-3 .podium-block span { color: #8a4d13; }

/* ============================================================
   Profile picture cropper (v76)
   ============================================================ */
.crop-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.crop-sub { font-size: 13px; color: var(--text-dim); margin: 5px 0 18px; }

/* Fixed 300px square — the same number the JS uses as its frame, so the
   preview is literally what gets exported. */
.crop-stage {
  position: relative;
  width: 320px; height: 320px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #14161c;
  cursor: grab;
  touch-action: none;          /* let the pointer handlers own the gesture */
  user-select: none;
  border: 1px solid var(--panel-border);
}
.crop-stage.grabbing { cursor: grabbing; }
.crop-stage img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* The circle is a hole punched through a dark scrim: a huge box-shadow spread
   darkens everything outside it, so the rest of the photo stays visible while
   you aim rather than being cropped away before you've decided. */
.crop-hole {
  position: absolute;
  top: 30px; left: 30px;
  width: 260px; height: 260px;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(8, 9, 12, 0.52), inset 0 0 0 1px rgba(255,255,255,0.65);
  pointer-events: none;
}

.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 18px 4px 22px; color: var(--text-faint); font-size: 15px; }
.crop-zoom input[type="range"] {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--panel-border); border-radius: 999px; outline: none;
}
.crop-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); border: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.crop-zoom input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); border: none; cursor: pointer;
}
.crop-actions { display: flex; gap: 10px; justify-content: flex-end; }

html.light .crop-stage { background: #e9ebef; }
html.light .crop-hole { box-shadow: 0 0 0 9999px rgba(20,22,28,0.55), inset 0 0 0 1px rgba(255,255,255,0.85); }

@media (max-width: 420px) {
  .crop-stage { width: 260px; height: 260px; }
  .crop-hole { top: 24px; left: 24px; width: 212px; height: 212px; }
}