/* ==========================================================================
   Kabero AI Gateway — design system
   Tokens -> primitives -> components -> layout -> pages -> responsive
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Surfaces: near-black ink with layered elevation */
  --ink-900: #07080c;
  --ink-800: #0b0d14;
  --ink-700: #10131d;
  --ink-600: #161a27;
  --ink-500: #1d2233;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f2f4f9;
  --text-sub: #a7afc4;
  --text-muted: #6b7490;

  --violet: #7c5cff;
  --violet-soft: rgba(124, 92, 255, 0.16);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.14);
  --emerald: #34d399;
  --emerald-soft: rgba(52, 211, 153, 0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --rose: #fb7185;
  --rose-soft: rgba(251, 113, 133, 0.14);

  --grad-brand: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
  --glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 40px rgba(124, 92, 255, 0.25);

  --header-h: 68px;
  --container: 1200px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --admin-nav-w: 236px;
  --admin-nav-collapsed-w: 60px;
  --admin-bar-h: 52px;
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* Any `display:` rule outranks the UA sheet's [hidden], and every component
   that set one quietly started rendering its hidden state. One rule, once. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--sans);
  background: var(--ink-900);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient backdrop: two soft brand glows + a faint technical grid.
   Pure CSS, fixed, pointer-transparent — no canvas, no scroll jank. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(760px circle at 12% -8%, rgba(124, 92, 255, 0.20), transparent 60%),
    radial-gradient(680px circle at 92% 4%, rgba(34, 211, 238, 0.13), transparent 62%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: rgba(124, 92, 255, 0.4); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: var(--r-full); border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: #2a3048; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.muted { color: var(--text-muted); }
.sub { color: var(--text-sub); }
.tnum { font-variant-numeric: tabular-nums; }

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.section-head { max-width: 660px; margin-bottom: var(--sp-6); }
.section-head p { color: var(--text-sub); margin-top: var(--sp-3); font-size: 1.02rem; }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

section { padding-block: var(--sp-8); }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.top-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 16px; }
.top-grid > .notice { grid-column: 1 / -1; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 8, 12, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

.site-header .container { display: flex; align-items: center; gap: var(--sp-5); }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.45);
  flex-shrink: 0;
}
.logo-mark svg { width: 18px; height: 18px; }
.logo-text { font-size: 0.98rem; }
.logo-text span { color: var(--text-muted); font-weight: 500; }

.nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.nav-link {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-sub);
  transition: color 0.18s, background 0.18s;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-link.active { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-3); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink-700);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink-600);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s var(--ease), filter 0.18s, background 0.18s, border-color 0.18s, opacity 0.18s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

.btn-primary {
  background: var(--grad-brand);
  border-color: transparent;
  color: #07080c;
  box-shadow: 0 8px 26px rgba(124, 92, 255, 0.35);
}
.btn-primary:hover { box-shadow: 0 10px 34px rgba(124, 92, 255, 0.5); }

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text-sub); }
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

/* A button that reads as a link inside running text: the ghost border drawn
   around two words of body copy looks like a rendering defect, not a control. */
.btn.btn-link {
  background: none;
  border: none;
  padding: 0;
  height: auto;
  color: var(--cyan);
  text-decoration: none;
}
.btn.btn-link:hover { background: none; text-decoration: underline; }

.btn-danger { background: var(--rose-soft); border-color: rgba(251, 113, 133, 0.4); color: var(--rose); }
.btn-success { background: var(--emerald-soft); border-color: rgba(52, 211, 153, 0.4); color: var(--emerald); }

.btn-lg { padding: 14px 26px; font-size: 0.98rem; border-radius: var(--r-lg); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card-flush { padding: 0; overflow: hidden; }

/* Inline notice strip: a warning that belongs inside a page, not a toast. */
.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-800);
}
.notice[hidden] { display: none; }
.notice-warn {
  background: var(--amber-soft);
  border-color: rgba(251, 191, 36, 0.3);
}
.notice-warn b { color: var(--amber); }
.card-hover { transition: border-color 0.2s, transform 0.2s var(--ease); }
.card-hover:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-accent { border-color: rgba(124, 92, 255, 0.35); box-shadow: var(--glow-violet); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: 1rem; }
.card-body { padding: var(--sp-5); }

/* --- Badges & pills ----------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: var(--text-sub);
  white-space: nowrap;
}
.badge-violet { background: var(--violet-soft); border-color: rgba(124, 92, 255, 0.35); color: #b9a8ff; }
.badge-cyan { background: var(--cyan-soft); border-color: rgba(34, 211, 238, 0.3); color: #7ee7f7; }
.badge-emerald { background: var(--emerald-soft); border-color: rgba(52, 211, 153, 0.3); color: var(--emerald); }
.badge-amber { background: var(--amber-soft); border-color: rgba(251, 191, 36, 0.3); color: var(--amber); }
.badge-rose { background: var(--rose-soft); border-color: rgba(251, 113, 133, 0.3); color: var(--rose); }
.badge-slate { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.25); color: var(--muted); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
.dot-live { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: pulse 2.2s infinite; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* --- Chips (segmented selectors) --------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-sub);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.active {
  background: var(--violet-soft);
  border-color: rgba(124, 92, 255, 0.5);
  color: #c9bcff;
}

/* --- Forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 0.82rem; font-weight: 600; color: var(--text-sub); }
.hint { font-size: 0.78rem; color: var(--text-muted); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color 0.18s, background 0.18s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: rgba(124, 92, 255, 0.6);
  background: var(--ink-600);
}
.textarea { resize: vertical; min-height: 88px; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7afc4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

.switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 42px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--ink-500);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-sub);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.switch input:checked + .switch-track { background: var(--violet); border-color: transparent; }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Range slider */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--ink-500);
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--violet);
  box-shadow: 0 2px 12px rgba(124, 92, 255, 0.6);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--violet);
  cursor: grab;
}

/* --- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th {
  text-align: left;
  padding: 11px var(--sp-4);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.015);
}
.table td {
  padding: 12px var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-sub);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.table-dense th { padding: 8px var(--sp-3); font-size: 0.72rem; }
.table-dense td { padding: 8px var(--sp-3); font-size: 0.8rem; }
.table tbody tr.row-flagged { background: rgba(251, 191, 36, 0.05); }
.table tbody tr.row-error { background: rgba(251, 113, 133, 0.05); }

.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.empty-state strong { display: block; color: var(--text-sub); margin-bottom: 4px; font-size: 0.95rem; }

/* --- Code blocks -------------------------------------------------------- */
.code {
  position: relative;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  padding-right: 52px;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.75;
  color: #cfd6e8;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code .c-key { color: #b9a8ff; }
.code .c-str { color: #7ee7f7; }
.code .c-com { color: var(--text-muted); }

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.16s;
}
.copy-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--ink-600); }
.copy-btn.done { color: var(--emerald); border-color: rgba(52, 211, 153, 0.4); }

/* --- Stat tiles --------------------------------------------------------- */
.stat {
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stat-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-meta { font-size: 0.8rem; color: var(--text-sub); }

/* --- Progress ----------------------------------------------------------- */
.meter { height: 8px; border-radius: var(--r-full); background: var(--ink-500); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--r-full); background: var(--grad-brand); transition: width 0.5s var(--ease); }

/* --- Modals ------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(4, 5, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-backdrop.open { display: flex; animation: fade 0.18s var(--ease); }
@keyframes fade { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  animation: pop 0.22s var(--ease);
}
.modal-lg { max-width: 620px; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal-head h3 { font-size: 1.15rem; }
.modal-head p { color: var(--text-sub); font-size: 0.88rem; margin-top: 4px; }
.modal-body { padding: var(--sp-3) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.modal-foot {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.16s;
}
.modal-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* --- Toasts ------------------------------------------------------------- */
.toast-host {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--ink-700);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  pointer-events: auto;
  animation: slide-in 0.24s var(--ease);
}
.toast.out { animation: slide-out 0.2s var(--ease) forwards; }
@keyframes slide-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-out { to { opacity: 0; transform: translateX(28px); } }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-success { border-left: 3px solid var(--emerald); }
.toast-success .toast-icon { color: var(--emerald); }
.toast-error { border-left: 3px solid var(--rose); }
.toast-error .toast-icon { color: var(--rose); }
.toast-info { border-left: 3px solid var(--cyan); }
.toast-info .toast-icon { color: var(--cyan); }

/* --- Skeletons ---------------------------------------------------------- */
.skel {
  background: linear-gradient(90deg, var(--ink-600) 25%, var(--ink-500) 50%, var(--ink-600) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- Tabs --------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 4px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--text-sub);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--ink-500); color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade 0.2s var(--ease); }

/* ==========================================================================
   Storefront
   ========================================================================== */
.hero { padding-block: var(--sp-8) var(--sp-7); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-7);
  align-items: center;
}
.hero h1 { margin-block: var(--sp-4) var(--sp-4); }
.hero-lead { font-size: 1.08rem; color: var(--text-sub); max-width: 52ch; }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.hero-proof {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.proof-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.proof-label { font-size: 0.78rem; color: var(--text-muted); }

/* Terminal mock */
.terminal {
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
}
.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-title {
  margin-left: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.terminal-body {
  padding: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.85;
  min-height: 260px;
}
.terminal-line { white-space: pre-wrap; word-break: break-word; }
.t-prompt { color: var(--emerald); }
.t-cmd { color: var(--text); }
.t-out { color: var(--text-sub); }
.t-key { color: #b9a8ff; }
.t-ok { color: var(--emerald); }
.caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--cyan);
  vertical-align: -2px;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Marquee of providers */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp-4);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--sp-7);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Feature grid */
.feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--violet-soft);
  border: 1px solid rgba(124, 92, 255, 0.3);
  color: #b9a8ff;
}
.feature h3 { font-size: 1.02rem; }
.feature p { color: var(--text-sub); font-size: 0.9rem; }

/* Configurator */
.config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-5);
  align-items: start;
}

.volume-readout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.volume-number { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.volume-unit { color: var(--text-sub); font-size: 0.95rem; }

.models-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.model-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.model-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-2); }
.model-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-700);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  min-width: 0;
}
.model-item:hover { border-color: var(--line-strong); background: var(--ink-600); }
.model-item.selected { border-color: rgba(124, 92, 255, 0.55); background: var(--violet-soft); }
.model-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-item.selected .model-name { color: var(--text); }
.burn {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-sub);
  flex-shrink: 0;
}
.burn.cheap { background: var(--emerald-soft); color: var(--emerald); }
.burn.heavy { background: var(--rose-soft); color: var(--rose); }

/* Order summary */
.summary { position: sticky; top: calc(var(--header-h) + 16px); }
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 9px 0;
  font-size: 0.88rem;
  color: var(--text-sub);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.summary-total .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.035em; }

/* Pricing tier table */
.tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px var(--sp-4);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  transition: background 0.15s;
}
.tier-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.tier-row.active { background: var(--violet-soft); border: 1px solid rgba(124, 92, 255, 0.35); }
.tier-price { font-family: var(--mono); font-weight: 600; color: var(--text); }

/* Per-model price table */
.price-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.price-table th { white-space: nowrap; }
.price-table td { vertical-align: middle; }
.price-table tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.price-table td.ref { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, 0.5); }

.price-model { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.price-model svg { flex-shrink: 0; }
.price-model-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.price-model-text b { font-size: 0.84rem; color: var(--text); }
.price-model-meta { font-size: 0.72rem; color: var(--text-muted); }

/* Discount vs the public reference price. `strong` marks the advertised band;
   models outside it keep the same pill with their real, smaller number. */
.disc-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-sub);
}
.disc-pill.strong { background: var(--emerald-soft); color: var(--emerald); }

@keyframes row-ping {
  0%, 100% { background: transparent; }
  30% { background: var(--violet-soft); }
}
.price-table tr.row-ping { animation: row-ping 1.1s var(--ease) 2; }

/* Top-up packages */
.topup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
}
.topup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-700);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.topup-card:hover { border-color: var(--line-strong); background: var(--ink-600); }
.topup-card.active { border-color: rgba(124, 92, 255, 0.55); background: var(--violet-soft); }
.topup-usd { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.topup-bonus { font-size: 0.72rem; font-weight: 600; color: var(--emerald); }
.topup-bonus.muted { color: var(--text-muted); font-weight: 500; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}
.faq-q svg { flex-shrink: 0; transition: transform 0.25s var(--ease); color: var(--text-muted); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--text-sub); font-size: 0.93rem; padding-bottom: var(--sp-4); }

/* CTA band */
.cta-band {
  background: var(--ink-800);
  background-image: radial-gradient(600px circle at 20% 0%, rgba(124, 92, 255, 0.2), transparent 65%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  text-align: center;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6);
  margin-top: var(--sp-7);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-5); }
.footer-col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: var(--sp-3);
}
.footer-col a { display: block; padding: 4px 0; transition: color 0.16s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   Dashboard / Admin
   ========================================================================== */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-6) var(--sp-5);
}
.page-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.page-head p { color: var(--text-sub); margin-top: 6px; }

.balance-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}
.gauge { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge-track { stroke: var(--ink-500); }
.gauge-fill { stroke: url(#gaugeGrad); stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease); }
.gauge-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.gauge-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; }
.gauge-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Sparkline / bar chart (inline SVG, no libs) */
.chart { width: 100%; height: 120px; }
.chart-bar { fill: var(--violet); opacity: 0.75; transition: opacity 0.15s; }
.chart-bar:hover { opacity: 1; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-label { fill: var(--text-muted); font-size: 9px; font-family: var(--mono); }

.key-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.secret-reveal {
  /* The copy button inside is absolutely positioned for code blocks; without a
     positioned ancestor here it escaped the modal and landed in the page's
     top-right corner, out of reach of the secret it copies. */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ink-900);
  border: 1px solid rgba(124, 92, 255, 0.4);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 0.84rem;
  word-break: break-all;
  color: #c9bcff;
}
.secret-reveal .copy-btn { position: static; flex: none; }

.callout {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--amber-soft);
  border: 1px solid rgba(251, 191, 36, 0.3);
  font-size: 0.87rem;
  color: #f4dfa4;
}
.callout svg { flex-shrink: 0; color: var(--amber); margin-top: 2px; }
.callout-info { background: var(--cyan-soft); border-color: rgba(34, 211, 238, 0.3); color: #b6ecf6; }
.callout-info svg { color: var(--cyan); }

/* Auth gate overlay for protected pages */
.gate {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--sp-4);
}

/* Status page */
.status-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--emerald-soft);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.status-banner.degraded { background: var(--amber-soft); border-color: rgba(251, 191, 36, 0.3); }
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.status-row:last-child { border-bottom: none; }
.latency-bar {
  width: 120px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--ink-500);
  overflow: hidden;
}
.latency-fill { height: 100%; background: var(--grad-brand); border-radius: var(--r-full); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .config-grid { grid-template-columns: 1fr; }
  .price-toolbar { grid-template-columns: 1fr; }
  .summary { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --sp-8: 56px; --sp-7: 36px; }

  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--sp-4);
    background: var(--ink-800);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    margin-left: 0;
    display: none;
  }
  .nav.open { display: flex; }
  .nav-link { padding: 12px; font-size: 0.95rem; }
  .nav-actions { margin-left: 0; margin-top: var(--sp-2); flex-direction: column; align-items: stretch; }
  .nav-actions .btn { width: 100%; }

  .grid-3 { grid-template-columns: 1fr; }
  .top-grid { grid-template-columns: 1fr; }
  .balance-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .toast-host { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: none; }
}

@media (max-width: 560px) {
  .container { padding-inline: var(--sp-4); }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .card { padding: var(--sp-4); }
  .hero-proof { gap: var(--sp-4); }
  .volume-number { font-size: 1.9rem; }
  .model-list { grid-template-columns: 1fr; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}

/* ==========================================================================
   Model carousel (hero) — a true CSS 3D cylinder, no WebGL
   Cards sit tangent to the ring, so the ones at the sides angle away and the
   depth reads honestly. The back half is hidden rather than drawn dim.
   ========================================================================== */
.carousel-wrap {
  --carousel-r: 230px;
  --card-w: 128px;
  --card-h: 92px;

  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  perspective: 1400px;
  perspective-origin: 50% 46%;
  /* Fade the ring into the page instead of cutting it off at a hard edge. */
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.carousel-scene {
  position: relative;
  width: 100%;
  height: 330px;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}

.carousel-ring {
  position: absolute;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  transform-style: preserve-3d;
}

.carousel-ring-top    { top: 34px;  animation: ring-spin 34s linear infinite; }
.carousel-ring-bottom { top: 176px; animation: ring-spin 44s linear infinite reverse; }

@keyframes ring-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Pausing on hover lets a visitor actually read a card they spotted. */
.carousel-wrap:hover .carousel-ring { animation-play-state: paused; }

.model-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(28, 33, 50, 0.96), rgba(13, 16, 25, 0.96));
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Only the front half of the cylinder is drawn — no muddy overlapping text. */
  backface-visibility: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.model-card:hover {
  border-color: rgba(124, 92, 255, 0.65);
  box-shadow: 0 12px 38px rgba(124, 92, 255, 0.35);
}

/* Provider tint bleeds in from the top-left corner of each card. */
.model-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at 0% 0%, var(--card-tint, transparent), transparent 70%);
  opacity: 0.22;
  pointer-events: none;
}

.model-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.model-card-head svg { width: 15px; height: 15px; }

.model-card-id {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}

.model-card-burn {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
  white-space: nowrap;
}
.model-card-burn.cheap { background: var(--emerald-soft); color: var(--emerald); }
.model-card-burn.heavy { background: var(--rose-soft); color: var(--rose); }

/* Glow disc behind the ring, so cards read as lit from the centre */
.carousel-wrap::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.30), rgba(34, 211, 238, 0.10) 45%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

.carousel-caption {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: rgba(11, 13, 20, 0.88);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-sub);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  z-index: 2;
}

/* Brief pulse on the catalog entry a visitor clicked through to */
@keyframes model-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
  30%      { box-shadow: 0 0 0 5px rgba(124, 92, 255, 0.45); }
}
.model-item.pinged { animation: model-ping 1.1s ease-out 2; }

@media (prefers-reduced-motion: reduce) {
  .carousel-ring { animation: none; }
}

@media (max-width: 1024px) {
  .carousel-wrap { --carousel-r: 190px; min-height: 380px; }
  .carousel-scene { height: 300px; }
}

@media (max-width: 560px) {
  .carousel-wrap { --carousel-r: 132px; --card-w: 104px; --card-h: 82px; min-height: 320px; }
  .carousel-scene { height: 258px; }
  .carousel-ring-bottom { top: 150px; }
  .carousel-wrap::before { width: 220px; height: 220px; }
}

/* ==========================================================================
   Tilt + sheen
   ========================================================================== */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease), border-color 0.2s;
  will-change: transform;
}
[data-tilt]:hover { border-color: var(--line-strong); }

/* Sheen follows the pointer via --sheen-x / --sheen-y set in JS */
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    260px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(255, 255, 255, 0.09),
    transparent 62%
  );
}
[data-tilt]:hover::after { opacity: 1; }
.card[data-tilt], .feature[data-tilt] { position: relative; }

/* ==========================================================================
   Provider marks
   ========================================================================== */
.provider-mark { flex-shrink: 0; }

.model-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.model-item .provider-mark { opacity: 0.75; }
.model-item.selected .provider-mark { opacity: 1; }

.model-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
}

@media (max-width: 1024px) {
  .carousel-wrap { --carousel-r: 205px; --card-w: 116px; min-height: 380px; }
}

@media (max-width: 560px) {
  .carousel-wrap { --carousel-r: 165px; --card-w: 92px; --card-h: 78px; min-height: 320px; }
  .carousel-ring-bottom { top: 152px; }
  .model-card { padding: 8px 9px; }
  .model-card-id { font-size: 0.66rem; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal-init {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-init.revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--ease) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; }
}

/* ==========================================================================
   Command palette
   ========================================================================== */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(60px, 14vh, 140px) var(--sp-4) var(--sp-4);
  background: rgba(4, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.palette-backdrop.open { display: flex; animation: fade 0.16s var(--ease); }

.palette {
  width: 100%;
  max-width: 560px;
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop 0.2s var(--ease);
}

.palette-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.palette-icon { color: var(--text-muted); display: grid; place-items: center; }

.palette-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: 0.98rem;
  color: var(--text);
}
.palette-input::placeholder { color: var(--text-muted); }

.palette-kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-muted);
}

.palette-list { max-height: 340px; overflow-y: auto; padding: 6px; }

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-sub);
}
.palette-item.active { background: var(--violet-soft); color: var(--text); }
.palette-item-icon { display: grid; place-items: center; flex-shrink: 0; opacity: 0.85; }
.palette-item-label { display: block; font-size: 0.9rem; font-weight: 500; }
.palette-item-hint {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.palette-empty { padding: var(--sp-5); text-align: center; color: var(--text-muted); font-size: 0.88rem; }

/* Hint chip in the header that advertises the shortcut */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.kbd-hint:hover { color: var(--text-sub); border-color: var(--line-strong); }

@media (max-width: 860px) {
  .kbd-hint { display: none; }
}

/* Skeleton text keeps its box so the layout does not jump when data lands. */
.stat-value.skel, .proof-value.skel { min-height: 1em; border-radius: 6px; }

/* ==========================================================================
   Live platform strip
   ========================================================================== */
.live-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-5) var(--sp-4);
  background: var(--ink-800);
  text-align: center;
}

.live-value {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.live-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  position: relative;
}

/* Hairline running behind the three cards, tying them into one flow */
.steps::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  pointer-events: none;
}

.step {
  position: relative;
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color 0.2s, transform 0.25s var(--ease);
}
.step:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.step-num {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: #07080c;
  background: var(--grad-brand);
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.4);
}

.step h3 { font-size: 1.05rem; }
.step p { color: var(--text-sub); font-size: 0.9rem; }
.step code { font-size: 0.82rem; color: var(--cyan); }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.compare-table th { font-size: 0.74rem; }
.compare-table th:first-child { width: 26%; }
.compare-table td:first-child { color: var(--text); font-weight: 600; }

.compare-table th.compare-us,
.compare-table td.compare-us {
  background: var(--violet-soft);
  color: var(--text);
}
.compare-table th.compare-us { color: #c9bcff; }

.compare-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
}
.compare-cell svg { flex-shrink: 0; margin-top: 2px; }
.compare-yes svg { color: var(--emerald); }
.compare-no svg { color: var(--text-muted); }

@media (max-width: 860px) {
  .live-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
}

@media (max-width: 560px) {
  .live-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Admin panel — Full-width Operations Console
   Dense, full-bleed visual system for wide displays:
   - Persistent collapsible left rail
   - 1-row compact KPI strip
   - Side-by-side charts and data modules
   - Dense sticky-header data tables with internal horizontal scroll
   ========================================================================== */

/* --- Admin Viewport & Isolation ----------------------------------------- */
.admin-page {
  overflow-x: hidden;
  background: var(--ink-900);
}

/* Eliminate consumer marketing header and footer to stop eating vertical space */
.admin-page .site-header,
.admin-page .site-footer {
  display: none !important;
}

.admin-viewport {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.container-wide {
  max-width: 100%;
}

/* --- Utilities the panel leans on --------------------------------------- */
.dim { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-rose { color: var(--rose) !important; }
.text-amber { color: var(--amber) !important; }
.text-emerald { color: var(--emerald) !important; }

.input-sm, .select-sm { padding: 6px 10px; font-size: 0.8rem; border-radius: var(--r-sm); }
.select-sm { padding-right: 28px; background-position: right 8px center; }

.meter-sm { height: 4px; margin: 4px 0 2px; }
.meter-lg { height: 10px; }
.meter-fill-amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.meter-fill-rose { background: linear-gradient(90deg, #e11d48, #fb7185); }

.chip-sm { padding: 2px 7px; font-size: 0.7rem; }
.empty-state-sm { padding: var(--sp-4) var(--sp-3); font-size: 0.82rem; }
.skel-block { height: 60px; margin-bottom: var(--sp-3); border-radius: var(--r-md); }

/* --- Console Shell ------------------------------------------------------ */
.admin-shell {
  display: grid;
  grid-template-columns: var(--admin-nav-w, 236px) minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  background: var(--ink-900);
  transition: grid-template-columns 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-shell.nav-collapsed {
  grid-template-columns: var(--admin-nav-collapsed-w, 60px) minmax(0, 1fr);
}

/* --- Persistent Collapsible Left Rail ----------------------------------- */
.admin-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border-right: 1px solid var(--line);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  z-index: 50;
  user-select: none;
}

.admin-nav-header {
  height: var(--admin-bar-h, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.admin-brand-name {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.admin-brand-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-soft);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}

.admin-nav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.admin-nav-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: var(--line);
}

.admin-nav-collapse-btn svg {
  transition: transform 0.2s var(--ease);
}

.admin-shell.nav-collapsed .admin-nav-collapse-btn svg {
  transform: rotate(180deg);
}

.admin-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-nav-title {
  padding: 10px 8px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.admin-nav-title:first-child { padding-top: 4px; }

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-sub);
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  position: relative;
}

.admin-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.admin-nav-item.active {
  background: var(--violet-soft);
  border-color: rgba(124, 92, 255, 0.35);
  color: #fff;
  font-weight: 600;
}
.admin-nav-item.active .admin-nav-icon {
  color: #b9a8ff;
}

.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.admin-nav-badge {
  display: none;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--ink-600);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-sub);
}
.admin-nav-badge.show { display: inline-block; }

.admin-nav-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Collapsed left rail state */
.admin-shell.nav-collapsed .admin-brand-text,
.admin-shell.nav-collapsed .admin-nav-title,
.admin-shell.nav-collapsed .admin-nav-item .grow,
.admin-shell.nav-collapsed .admin-nav-badge,
.admin-shell.nav-collapsed .admin-nav-foot {
  display: none !important;
}

.admin-shell.nav-collapsed .admin-nav-header {
  padding: 0 8px;
  justify-content: center;
}
.admin-shell.nav-collapsed .admin-nav-brand {
  display: none;
}
.admin-shell.nav-collapsed .admin-nav-body {
  padding: 8px 4px;
}
.admin-shell.nav-collapsed .admin-nav-item {
  justify-content: center;
  padding: 8px 0;
}

/* --- Operations Top Bar ------------------------------------------------- */
.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.admin-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--admin-bar-h, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  background: rgba(11, 13, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  gap: var(--sp-4);
  flex-shrink: 0;
}

.admin-bar-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.admin-bar h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.admin-bar .sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-updated {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.btn.is-loading { opacity: 0.6; pointer-events: none; }

.admin-main .tab-panel {
  display: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  width: 100%;
}
.admin-main .tab-panel.active {
  display: block;
}

/* --- Health Strip ------------------------------------------------------- */
.health { display: flex; flex-direction: column; }
.health-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.health-item:last-child { border-bottom: none; }
.health-item b { display: block; font-size: 0.88rem; color: var(--text); }
.health-item p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.health-item .btn { flex-shrink: 0; }

.health-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.health-critical { background: rgba(251, 113, 133, 0.06); }
.health-critical .health-dot { background: var(--rose); box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.15); }
.health-warn .health-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12); }
.health-info .health-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12); }
.health-ok .health-dot { background: var(--emerald); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12); }

/* --- 1-Row Compact KPI Strip -------------------------------------------- */
.kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 0;
}

.kpi-group {
  display: flex;
  align-items: stretch;
  padding: 4px 6px;
  flex: 1 1 auto;
}

.kpi-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  flex-shrink: 0;
}

.flow-op {
  display: flex;
  align-items: center;
  user-select: none;
}
.flow-money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-label { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.fact-value { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--text); }

.glossary {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 14px;
}
.glossary > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.glossary > summary::-webkit-details-marker { display: none; }
.glossary > summary::before { content: '\25B8'; margin-right: 6px; opacity: 0.6; }
.glossary[open] > summary::before { content: '\25BE'; }
.glossary-body { display: grid; gap: 6px; margin-top: 8px; font-size: 0.82rem; color: var(--text-sub); }
.glossary-body p { margin: 0; }
.glossary-body b { color: var(--text); }

/* --- Toolbars & Cards --------------------------------------------------- */
.card-head-stack { align-items: flex-start; flex-wrap: wrap; gap: var(--sp-3); }
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.toolbar .input { min-width: 200px; }

.stat-actions { justify-content: center; gap: var(--sp-2); }
.stat-actions .btn { width: 100%; }

/* --- Side by Side Grid Layouts ------------------------------------------ */
.admin-charts-grid,
.admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

/* --- Dense Data Tables -------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-800);
  scrollbar-gutter: stable;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
  line-height: 1.35;
  white-space: nowrap;
}

.table th {
  padding: 7px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
  user-select: none;
}

.table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  color: var(--text-sub);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: rgba(124, 92, 255, 0.04);
  color: var(--text);
}

.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table td.mono,
.table th.mono,
.table .mono {
  font-family: var(--mono);
}

.table-tall {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ink-700);
  box-shadow: inset 0 -1px 0 var(--line);
}

.table-compact { font-size: 0.78rem; }
.table-compact th { padding: 6px 8px; }
.table-compact td { padding: 6px 8px; }

.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text-sub); }
.table th.sortable::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border: 4px solid transparent;
  border-top-color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.table th.sortable:hover::after { opacity: 0.4; }
.table th.sorted { color: var(--text); }
.table th.sorted::after { opacity: 1; border-top-color: #b9a8ff; }
.table th.sorted-asc::after { transform: rotate(180deg); }
.table th.sortable:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

.table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: 8px var(--sp-4);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.table-foot b { color: var(--text-sub); }

.row-main { display: block; color: var(--text); }
.row-sub { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.row-clickable { cursor: pointer; }
.model-cell { display: inline-flex; align-items: center; gap: 6px; }
.routes-cell { max-width: 320px; }
.routes-cell .chip { margin: 1px 2px 1px 0; }

/* --- Charts ------------------------------------------------------------- */
.chart-svg { width: 100%; height: 190px; display: block; }
.chart-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-size: 9px; font-family: var(--mono); }
.bar-cost { fill: #6b7490; }
.bar-profit { fill: var(--violet); }
.bar-requests { fill: var(--cyan); opacity: 0.8; }
.chart-line { fill: none; stroke: var(--emerald); stroke-width: 1.8; stroke-linejoin: round; }
.chart-point { fill: var(--emerald); }
.chart-hit { fill: transparent; }
.chart-col:hover .chart-hit { fill: rgba(255, 255, 255, 0.04); }
.chart-col:hover .bar-profit { fill: #9a80ff; }

.chart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 8px var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.chart-foot b { color: var(--text); }

.legend { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend-profit { background: var(--violet); }
.legend-cost { background: #6b7490; }
.legend-line { background: var(--emerald); border-radius: var(--r-full); }

.rank-row { display: flex; flex-direction: column; gap: 4px; }
.rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rank-name { font-size: 0.8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-value { font-size: 0.8rem; color: var(--text); }
.rank-meta { display: flex; gap: var(--sp-3); font-size: 0.72rem; color: var(--text-muted); }

/* --- User Drawer -------------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  justify-content: flex-end;
  background: rgba(3, 4, 8, 0.72);
  backdrop-filter: blur(5px);
}
.drawer-backdrop.open { display: flex; animation: fade 0.18s var(--ease); }

.drawer {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  height: 100%;
  background: var(--ink-800);
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  animation: slide-in 0.22s var(--ease);
}
@keyframes slide-in { from { transform: translateX(28px); opacity: 0.6; } }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { font-size: 1.05rem; word-break: break-all; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer-section h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2); }
.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
}

.drawer-key {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 5px;
  font-size: 0.8rem;
}

.drawer-key-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.user-suspended-banner {
  background: var(--rose-soft);
  border: 1px solid rgba(251, 113, 133, 0.4);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.user-suspended-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.user-suspended-reason {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
}

/* A running promo changes every price on the storefront, so the price tab
   has to say so before the operator reads a single number. */
.catalog-promo-strip {
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}

.catalog-promo-strip b {
  color: var(--text);
}

.catalog-promo-strip .hint {
  flex: 1 1 260px;
}

.price-was {
  text-decoration: line-through;
  opacity: 0.6;
}

.catalog-unservable-strip {
  background: var(--rose-soft);
  border: 1px solid rgba(251, 113, 133, 0.4);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.catalog-unservable-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--rose);
}

.catalog-unservable-models {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* --- Lane price comparison ---------------------------------------------- */

/* A lane whose price feed did not answer during the last sync: its column is
   carried over from the previous snapshot, which is worth saying out loud
   before anyone tops a key up on the strength of it. */
.lane-stale-strip {
  background: var(--amber-soft);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}
.lane-stale-strip b { color: var(--amber); }

/* The summary tiles sit inside a flush card, so they bring their own padding. */
.lane-grid-inset { padding: var(--sp-4) var(--sp-4) 0; }
.lane-cell { white-space: nowrap; }
/* The cheapest quote in the row. Marked on the number itself rather than the
   whole cell, so the eye can still scan the column. */
.lane-cell-best .row-main { color: var(--emerald); font-weight: 650; }
/* A quote the route policy dropped: real price, but not what we buy on. */
.lane-cell-dropped { opacity: 0.45; }
.lane-cell-empty { color: var(--text-muted); }
.lane-role {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty-state-error {
  color: var(--rose);
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fact-list .fact { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); background: var(--ink-800); }
.fact-list .fact dt { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.fact-list .fact dd { font-size: 0.85rem; color: var(--text); }

/* --- Buying Slots & Lanes ----------------------------------------------- */
.slots { display: grid; gap: var(--sp-3); }
.slot-lane {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-800);
}
.slot-lane-dead { border-color: rgba(251, 113, 133, 0.45); }
.slot-lane-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 8px var(--sp-4);
  background: var(--ink-700);
  border-bottom: 1px solid var(--line);
}
.slot-lane-name { font-weight: 650; }
.slot-lane-head .mono { font-size: 1rem; }
/* The lane's purse sits under its head, because the pot is the lane's and not
   the slot's: every key of a lane spends the same supplier balance. */
.slot-lane-money { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 10px; }
.slot-lane-money .slot-sub { line-height: 1.4; }

.slot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.slot:last-child { border-bottom: 0; }
.slot-empty { background: rgba(251, 113, 133, 0.05); }
.slot-main, .slot-key, .slot-money { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-name { font-weight: 600; font-size: 0.85rem; }
.slot-sub { font-size: 0.74rem; }
.slot-left { font-size: 1.05rem; font-weight: 650; }
.slot-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

.hidden { display: none !important; }

.lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.lane {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--ink-600);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lane-dead { border-color: color-mix(in oklab, var(--rose) 45%, var(--line)); }

.lane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lane-name { font-weight: 600; }

.lane-money { font-size: 1.15rem; letter-spacing: -0.01em; }
.lane-money .dim { font-size: 0.8rem; }

.lane-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.lane-groups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* --- Responsive Adaptations (Scales 2560px -> 1280px) ------------------- */
@media (max-width: 1200px) {
  .admin-charts-grid,
  .admin-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .slot { grid-template-columns: minmax(0, 1fr); }
  .slot-actions { justify-content: flex-start; }
}

@media (max-width: 860px) {
  .admin-shell {
    grid-template-columns: var(--admin-nav-collapsed-w, 60px) minmax(0, 1fr);
  }
  .admin-brand-text,
  .admin-nav-title,
  .admin-nav-item .grow,
  .admin-nav-badge,
  .admin-nav-foot {
    display: none !important;
  }
  .admin-nav-header { padding: 0 8px; justify-content: center; }
  .admin-nav-brand { display: none; }
  .admin-nav-body { padding: 8px 4px; }
  .admin-nav-item { justify-content: center; padding: 8px 0; }
  .admin-bar h1 { font-size: 1.05rem; }
  .admin-bar .sub { display: none; }
  .toolbar .input { min-width: 0; flex: 1; }
  .drawer { width: 100%; }
}

@media (max-width: 560px) {
  .admin-bar-actions { width: 100%; justify-content: space-between; }
  .truncate { max-width: 140px; }
  .table-tall { max-height: none; }
}

/* --- Launch promo & struck-through pricing ------------------------------ */
.price-del {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.85em;
  margin-right: 4px;
  font-weight: 400;
}

/* A model with no lane credit stays listed but reads as not buyable. */
.row-muted > td { opacity: 0.55; }

/* --- Legal copy & docs typography --------------------------------------- */

.legal-container,
.docs-container {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}

.legal-card {
  max-width: 860px;
  margin-inline: auto;
  padding: var(--sp-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.legal-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
}

.legal-body h2 {
  font-size: 1.35rem;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.legal-body h3 {
  font-size: 1.1rem;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.legal-body p {
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}

.legal-body ul, .legal-body ol {
  color: var(--text-sub);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-5);
  line-height: 1.7;
}

.legal-body li {
  margin-bottom: var(--sp-2);
}

.docs-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 860px) {
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-toc {
    display: none;
  }
}

.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docs-toc-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.docs-toc-link {
  color: var(--text-sub);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s ease;
}

.docs-toc-link:hover {
  color: var(--cyan);
}

.docs-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.docs-section {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.docs-section h2 {
  font-size: 1.4rem;
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.docs-section h3 {
  font-size: 1.15rem;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.docs-section h4 {
  font-size: 0.98rem;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.docs-section p {
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}

.docs-section ul, .docs-section ol {
  color: var(--text-sub);
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
  line-height: 1.65;
}

.docs-section li {
  margin-bottom: var(--sp-2);
}

.code-wrap {
  position: relative;
  margin-block: var(--sp-3);
}

.code-wrap pre {
  margin: 0;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text);
}

.code-wrap pre code {
  font-family: inherit;
}

.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-sub);
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.code-copy-btn:hover {
  background: var(--ink-600);
  color: var(--text);
}



/* ==========================================================================
   Admin panel: every table fits the page
   ==========================================================================
   The panel is read, not navigated: a number you have to scroll sideways to
   reach is a number nobody looks at. Every admin table is laid out fixed
   against an explicit <colgroup>, so columns line up down the page and the
   widest cell wraps instead of pushing the table past the viewport.
   -------------------------------------------------------------------------- */
.admin-page .table-wrap {
  overflow-x: hidden;
}

.admin-page .table {
  table-layout: fixed;
  white-space: normal;
}

.admin-page .table th,
.admin-page .table td {
  overflow-wrap: break-word;
}

/* Ids, keys and routes are the one thing that must never be re-wrapped
   mid-token: they get an ellipsis instead. `display:block` belongs to the
   span inside the cell — setting it on the <td> itself would take the cell
   out of the table layout and stack the whole row vertically. */
.admin-page .table td > .mono {
  display: block;
  max-width: 100%;
}
.admin-page .table td > .mono,
.admin-page .table td.mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stat tiles flow instead of forcing a fixed column count. */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.admin-page .table td.nowrap,
.admin-page .table th.nowrap {
  white-space: nowrap;
}

/* The value-plus-explanation cells (.row-main / .row-sub) keep the
   explanation on one elided line, so a long route cannot widen a column. */
.admin-page .table td .row-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-page .table td .row-sub.wrap { white-space: normal; }
.admin-page .table td.num .row-sub { font-variant-numeric: tabular-nums; }
.admin-page .truncate { max-width: 100%; }

/* Row action clusters wrap inside their column instead of widening it. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.row-actions .btn { padding: 3px 7px; font-size: 0.72rem; }

/* --- Money board (the «Деньги» tab) ------------------------------------- */
.board {
  display: grid;
  gap: var(--sp-3);
}

.board-card {
  background: var(--ink-800);
  background-image: var(--grad-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.board-head h3 {
  font-size: 0.95rem;
  margin: 0;
}
.board-head .hint { font-size: 0.76rem; }

/* auto-fit: the cells re-flow onto a second line long before they clip. */
.board-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px;
}

.board-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.015);
  min-width: 0;
}
.board-cell-strong {
  background: rgba(124, 92, 255, 0.09);
  border-color: rgba(124, 92, 255, 0.28);
}
.board-cell-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.board-cell-value {
  font-family: var(--mono);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.board-cell-sub {
  font-size: 0.73rem;
  color: var(--text-muted);
  overflow-wrap: break-word;
}

/* The arithmetic cards read as a formula: cells separated by − and =. */
.board-formula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.board-formula .board-op {
  display: none;
}
@media (min-width: 900px) {
  .board-formula {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }
  .board-formula .board-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 1.1rem;
    color: var(--text-muted);
    user-select: none;
  }
}

.board-foot {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.board-foot b { color: var(--text-sub); }

.board-bar {
  margin-top: 12px;
}
.board-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* --- Credit forecast chips (how far the wholesale balance goes) --------- */
.forecast {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.forecast-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.73rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
}
.forecast-chip b {
  font-family: var(--mono);
  color: var(--text-sub);
}
.forecast-estimate {
  border-style: dashed;
}

/* --- One-command setup (dashboard → Подключение) ------------------------- */
.setup-steps {
  margin: var(--sp-4) 0 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-sub);
}
.setup-steps li::marker { color: var(--cyan); font-weight: 700; }
.setup-details {
  margin-top: var(--sp-4);
  font-size: 0.82rem;
  color: var(--text-sub);
}
.setup-details > summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 600;
  list-style: none;
}
.setup-details > summary::-webkit-details-marker { display: none; }
.setup-details > summary::before { content: '\25B8'; margin-right: 6px; opacity: 0.7; }
.setup-details[open] > summary::before { content: '\25BE'; }
.setup-details p { margin: var(--sp-3) 0; }
.setup-details ul { margin: var(--sp-3) 0; padding-left: 20px; display: grid; gap: 4px; }
.setup-details .code { margin: var(--sp-3) 0; white-space: pre-wrap; }

/* --- Support chat (widget, /support, dashboard tab) ---------------------- */
.sup-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  /* Reversed on purpose: the button stays pinned in its corner and the panel
     grows upward from it. Plain `column` put the panel *under* the button, half
     of it below the fold. */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}
.sup-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.45);
  background: var(--ink-800);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(3, 5, 10, 0.55);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.sup-fab:hover { transform: translateY(-1px); border-color: var(--violet); }
.sup-fab svg { color: var(--cyan); }
.sup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.sup-panel {
  width: min(380px, calc(100vw - 32px));
  /* dvh, not vh: on a phone vh counts the space under the browser's own bars,
     so a panel sized by it ends up taller than what is actually on screen and
     its last field is cut off. The fallback keeps old browsers working. */
  max-height: min(620px, calc(100vh - 120px));
  max-height: min(620px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--ink-850, var(--ink-800));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(3, 5, 10, 0.6);
  overflow: hidden;
}
.sup-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-700);
}
.sup-panel-head b { display: block; font-size: 0.95rem; }
.sup-panel-head .hint { display: block; margin-top: 2px; }
/* min-height:0 is what lets this shrink inside the panel's flex column; without
   it the body keeps its content height and the overflow is clipped, not
   scrolled, so a long thread has no way to reach its own reply box. */
.sup-panel-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* In the widget the log takes the room the panel has instead of a fixed 340px
   inside another scroller — two nested scrollbars showed three messages at a
   time — and the reply box below it stays put while the log scrolls. */
.sup-panel .sup-log { max-height: none; flex: 1 1 auto; min-height: 0; }
.sup-panel .sup-reply { flex: none; }
/* The new-ticket form is taller than the widget on any phone, so «Отправить»
   used to sit below the fold with nothing saying it was there. It sticks to
   the bottom of the scroller instead, and the body's own padding is what it
   sticks past. */
.sup-panel .sup-form { padding-bottom: 2px; }
.sup-panel .sup-form #supSendBtn {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  box-shadow: 0 -14px 22px 10px var(--ink-850, var(--ink-800));
}
/* A compact textarea that still shows three lines: the widget has to fit the
   contact field, the topic, the subject and the text on one screen. */
.sup-panel .sup-textarea { min-height: 64px; }

.sup-form { display: grid; gap: 14px; }
.sup-textarea { min-height: 72px; resize: vertical; line-height: 1.6; font-family: inherit; }
.sup-alt { text-align: center; margin: 0; }
.sup-empty { color: var(--text-sub); font-size: 0.86rem; padding: 18px 0; text-align: center; }

.sup-list { display: grid; gap: 8px; margin-bottom: 14px; }
.sup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.16s ease;
}
.sup-row:hover { border-color: var(--violet); }
.sup-row-main { display: grid; gap: 3px; min-width: 0; }
.sup-row-meta { color: var(--text-muted); font-size: 0.76rem; }
.sup-badges { display: flex; align-items: center; gap: 6px; flex: none; }

.sup-state {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-sub);
  white-space: nowrap;
}
.sup-state-open { color: var(--amber, #fbbf24); border-color: rgba(251, 191, 36, 0.35); }
.sup-state-answered { color: var(--emerald); border-color: rgba(52, 211, 153, 0.35); }
.sup-state-closed { color: var(--text-muted); }

.sup-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sup-subject { font-size: 0.92rem; margin-bottom: 12px; display: grid; gap: 2px; }
.sup-log {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 2px 10px;
}
.sup-msg {
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  line-height: 1.6;
  max-width: 92%;
}
.sup-msg-mine {
  justify-self: end;
  background: rgba(124, 92, 255, 0.14);
  border: 1px solid rgba(124, 92, 255, 0.3);
}
.sup-msg-staff {
  justify-self: start;
  background: var(--ink-700);
  border: 1px solid var(--line);
}
.sup-msg-who {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.sup-msg-who span { color: var(--text-muted); font-weight: 400; }
.sup-msg-body { word-break: break-word; }
.sup-sys {
  justify-self: center;
  font-size: 0.74rem;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink-700);
}
.sup-closed { font-size: 0.8rem; color: var(--text-sub); margin: 10px 0 0; }
.sup-reply { margin-top: 12px; display: grid; gap: 8px; }
.sup-reply-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Toasts live in the same corner as the widget, so an open panel and a
   notification sat on top of each other — and the notification is the one that
   covers the reply box. Wide screens move the toasts clear of the panel. */
@media (min-width: 900px) {
  body:has(.sup-widget.open) .toast-host { right: calc(min(380px, 100vw - 32px) + 36px); }
}
/* Narrow screens have no room beside the panel, so the toasts go up top. */
@media (max-width: 899px) {
  body:has(.sup-widget.open) .toast-host { top: calc(var(--header-h) + 12px); bottom: auto; }
}

@media (max-width: 640px) {
  .sup-widget { right: 12px; bottom: 12px; }
  .sup-fab span:not(.sup-dot) { display: none; }
  .sup-fab { padding: 12px; }
  /* A phone-sized panel that reaches the fab leaves nothing to tap to close. */
  .sup-panel {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
  }
}

/* --- /support.html page layout ------------------------------------------- */
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-7);
}
.support-link {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-700);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.support-link:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.support-link b { font-size: 0.9rem; }
.support-link span { font-size: 0.78rem; color: var(--text-sub); }
.support-checklist {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-sub);
}

@media (max-width: 920px) {
  .support-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- Support desk (admin panel) ----------------------------------------- */
.sup-admin {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.sup-queue { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; max-height: calc(100vh - 140px); }
.sup-queue-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.sup-queue-tools .select-sm { width: 100%; }
.sup-queue-list { overflow-y: auto; flex: 1; }
.sup-qrow {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px var(--sp-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: background 0.14s ease;
}
.sup-qrow:hover { background: var(--ink-700); }
.sup-qrow.active { background: var(--ink-600); border-left-color: var(--violet); }
.sup-qrow-top { display: flex; align-items: baseline; gap: 6px; font-size: 0.86rem; }
.sup-qrow-top b { font-family: var(--mono); color: var(--text-sub); }
.sup-qrow-subject {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.sup-qrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}
.sup-qrow-mid { font-size: 0.76rem; color: var(--text-sub); }
.sup-qrow-preview {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sup-qrow-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.72rem; }

.sup-work { display: flex; flex-direction: column; }
.sup-work-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.sup-work-head h3 { font-size: 1rem; margin: 0 0 2px; }
.sup-work-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-cust {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}
.sup-cust-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sup-cust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px var(--sp-4);
  font-size: 0.78rem;
}
.sup-cust-grid span { display: flex; flex-direction: column; gap: 1px; }
.sup-log-admin { max-height: 46vh; padding: var(--sp-4); }
.sup-work-reply { padding: var(--sp-4); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.sup-work-reply-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .sup-admin { grid-template-columns: minmax(0, 1fr); }
  .sup-queue { position: static; max-height: 420px; }
}

/* --- Dashboard shell ----------------------------------------------------- */
.dash-viewport {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.dash-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.dash-nav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-800);
}
.dash-nav-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--line);
}
.dash-nav-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #0b0d14;
  font-weight: 800;
}
.dash-nav-ident { display: grid; min-width: 0; }
.dash-nav-ident b {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-nav-ident .hint { font-size: 0.72rem; }
.dash-nav-body { display: grid; gap: 2px; }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-sub);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.dash-nav-item .grow { flex: 1; }
.dash-nav-item:hover { background: var(--ink-700); color: var(--text); }
.dash-nav-item.active {
  background: var(--violet-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.3);
}
.dash-nav-icon { display: inline-flex; color: currentColor; }
.dash-nav-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--amber);
  color: #1a1403;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
.dash-nav-foot {
  display: grid;
  gap: 6px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.dash-nav-foot .hint { text-align: center; font-size: 0.7rem; }

/* minmax(0, …) everywhere: an auto-sized track takes its min-content width
   from the widest table inside it, which pushed the whole page sideways. */
.dash-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
#dashPanels { min-width: 0; }
#dashPanels > .tab-panel { min-width: 0; }
.dash-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.dash-bar-title h1 { font-size: 1.6rem; margin: 0 0 2px; }
.dash-bar-title .sub { margin: 0; font-size: 0.86rem; }
.dash-bar-right { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dash-bar-balance {
  display: grid;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-800);
}
.dash-bar-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dash-bar-value { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.dash-bar-value.is-low { color: var(--amber); }

.dash-money {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.dash-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.dash-steps {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-sub);
}
.dash-support {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

/* Login gate: the form on the left, what the account gives on the right. */
.gate-split {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 380px);
  gap: var(--sp-5);
  place-items: start center;
  justify-content: center;
  text-align: left;
  padding: var(--sp-6) 0;
}
.gate-form { width: 100%; }
.gate-aside {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-surface), var(--ink-800);
}
.gate-aside h3 { margin: 0; font-size: 1.05rem; }
.gate-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.gate-list li { display: grid; gap: 2px; font-size: 0.84rem; }
.gate-list span { color: var(--text-sub); }
.gate-aside-foot { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .dash-shell { grid-template-columns: minmax(0, 1fr); }
  .dash-money, .dash-support { grid-template-columns: minmax(0, 1fr); }
  .dash-nav { position: static; }
  .dash-nav-body { grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; }
  .dash-nav-item { flex-direction: column; gap: 4px; padding: 8px 6px; text-align: center; font-size: 0.74rem; }
  .dash-nav-item .dash-nav-badge { position: absolute; transform: translate(26px, -6px); }
  .dash-nav-item { position: relative; }
  .dash-nav-foot { grid-auto-flow: column; align-items: center; }
  .dash-nav-foot .hint { display: none; }
  .dash-money { grid-template-columns: minmax(0, 1fr); }
  .dash-support { grid-template-columns: minmax(0, 1fr); }
  .gate-split { grid-template-columns: minmax(0, 440px); }
}
@media (max-width: 600px) {
  .dash-stats { grid-template-columns: minmax(0, 1fr); }
  .dash-bar { align-items: stretch; }
  .dash-bar-right { width: 100%; }
  .dash-bar-balance { flex: 1; }
  .balance-card { flex-direction: column; align-items: flex-start; }
}

/* --- Hero top-up card ---------------------------------------------------- */
.hero-topup { display: grid; gap: var(--sp-3); }
.hero-topup h3 { font-size: 1.05rem; margin: 0; }
.hero-topup .hint { margin: 0; }
.hero-topup-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}
.hero-topup-chip {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-700);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hero-topup-chip:hover { border-color: var(--line-strong); }
.hero-topup-chip.active {
  border-color: rgba(124, 92, 255, 0.55);
  background: var(--violet-soft);
}
.hero-topup-usd { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; }
.hero-topup-bonus { font-size: 0.7rem; color: var(--emerald); }
.hero-topup-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.hero-topup-total .amount { font-size: 1.6rem; font-weight: 700; font-family: var(--mono); }

/* The palette hint sits under the CTA row, not inside it: at button height it
   read as a third, broken-looking button. */
.kbd-hint {
  margin-top: var(--sp-3);
  padding: 4px 2px;
  border: 0;
  background: none;
  gap: 8px;
}
.kbd-hint-keys { display: inline-flex; gap: 4px; }
.kbd-hint kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--ink-600);
  color: var(--text-sub);
}
.kbd-hint:hover { border-color: transparent; }
.kbd-hint:hover kbd { color: var(--text); border-color: var(--violet); }

/* ==========================================================================
   Task calculator
   ========================================================================== */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-6);
  align-items: start;
}
.calc-controls { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.calc-controls .field { margin: 0; }
.calc-out {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px 10px;
}
.calc .range:disabled { opacity: 0.45; cursor: not-allowed; }
.calc #calcTasks { gap: 8px; }

.calc-result {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(124, 92, 255, 0.16), transparent 60%),
    var(--ink-700);
}
.calc-total-box { display: flex; flex-direction: column; gap: 4px; }
.calc-total {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.calc-grid .stat { background: var(--ink-600); }

.calc-runway {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-sub);
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.calc-runway:empty { display: none; }
.calc-runway svg { color: var(--emerald); flex-shrink: 0; margin-top: 1px; }
.calc-runway b { color: var(--text); }

.calc-alts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.calc-alt-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.calc-alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.calc-alt:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.calc-alt-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-sub);
}
.calc-alt-name b {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-alt-sum {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.calc-alt-sum small { margin-left: 6px; font-family: var(--sans); font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.calc-alt-delta { font-size: 0.76rem; font-weight: 600; }
.calc-alt-down { color: var(--emerald); }
.calc-alt-up { color: var(--text-muted); }
.calc-alt-same { color: var(--text-sub); }

@media (max-width: 960px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-alt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .calc-grid, .calc-alt-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Comparison lanes + criterion matrix
   ========================================================================== */
.acc-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.acc-lane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-800);
}
.acc-lane-us {
  border-color: rgba(124, 92, 255, 0.45);
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(124, 92, 255, 0.18), transparent 62%),
    var(--ink-700);
  box-shadow: 0 18px 46px rgba(124, 92, 255, 0.16);
}
.acc-lane-head h3 { font-size: 1.08rem; margin-bottom: 6px; }
.acc-lane-head p { color: var(--text-sub); font-size: 0.88rem; }
.acc-lane-metric {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-sub);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--ink-600);
  border: 1px solid var(--line);
}
.acc-lane-us .acc-lane-metric {
  color: #d6ccff;
  background: var(--violet-soft);
  border-color: rgba(124, 92, 255, 0.35);
}
.acc-lane-pay { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; color: var(--text); }
.acc-lane-pay-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.acc-lane-points { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.acc-lane-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-sub);
}
.acc-lane-points svg { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.acc-lane-us .acc-lane-points svg { color: var(--emerald); }

.compare-matrix {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
}
.cmx-head, .cmx-row {
  display: grid;
  grid-template-columns: 22% repeat(3, minmax(0, 1fr));
}
.cmx-row { border-top: 1px solid var(--line); }
.cmx-head { background: var(--ink-600); }
.cmx-label {
  padding: 14px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}
.cmx-cell { padding: 14px 16px; }
.cmx-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-sub);
}
.cmx-us { background: var(--violet-soft); }
.cmx-title.cmx-us { color: #c9bcff; }
.cmx-lane { display: none; }
.compare-warn svg { color: var(--amber); }

@media (max-width: 900px) {
  .acc-lanes { grid-template-columns: minmax(0, 1fr); }
  .cmx-head { display: none; }
  .cmx-row { grid-template-columns: minmax(0, 1fr); padding-bottom: 6px; }
  .cmx-label { padding-bottom: 4px; font-size: 0.92rem; }
  .cmx-cell { padding: 6px 16px 8px; }
  .cmx-lane {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .cmx-us { background: transparent; }
  .cmx-us .cmx-lane { color: #c9bcff; }
}

/* ==========================================================================
   Partner programme (/partners)
   ========================================================================== */
.part-track { display: flex; flex-direction: column; gap: 10px; }
.part-track h2 { font-size: 1.4rem; }
.part-track .badge { align-self: flex-start; }
.part-track-pro {
  border-color: rgba(124, 92, 255, 0.4);
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(124, 92, 255, 0.16), transparent 62%),
    var(--ink-700);
}
.part-rate { display: flex; align-items: baseline; gap: 10px; }
.part-rate b {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #c9bcff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.part-rate span { font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.part-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.part-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--text-sub);
}
.part-list svg { flex-shrink: 0; margin-top: 3px; color: var(--emerald); }

.part-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-6); }
.part-apply .part-list svg { color: var(--violet); }
.part-form {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-700);
}
.part-form .field { margin: 0; }

@media (max-width: 900px) {
  .part-apply { grid-template-columns: minmax(0, 1fr); }
}