/* ==========================================================================
   NQ Core — design system
   A single stylesheet: tokens, primitives, layout shells, components.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --brand: #6366f1;
  --brand-2: #0ea5e9;
  --accent: #22d3ee;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #fbfbfe;
  --surface-3: #f2f3f9;
  --line: #e6e8f0;
  --line-soft: #eef0f6;
  --text: #131829;
  --text-2: #5a6478;
  --text-3: #8b93a7;
  --inverse: #ffffff;

  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --purple: #a855f7;

  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 56px;

  --shadow-xs: 0 1px 2px rgba(16, 22, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 22, 40, .06);
  --shadow: 0 8px 24px rgba(16, 22, 40, .08);
  --shadow-lg: 0 24px 60px rgba(16, 22, 40, .14);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  --sidebar-w: 268px;
  --topbar-h: 64px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  --bg: #0a0d18;
  --surface: #12162a;
  --surface-2: #161b33;
  --surface-3: #1c2240;
  --line: #242b4a;
  --line-soft: #1c2240;
  --text: #eef1fb;
  --text-2: #a3abc9;
  --text-3: #6d769a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700;
  letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: color-mix(in srgb, var(--brand) 75%, var(--text)); }
a.btn, a.btn:hover { color: var(--btn-fg); }
img, svg, video { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
code, pre, .mono { font-family: var(--mono); font-size: .86em; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
.icon { flex: 0 0 auto; vertical-align: -.15em; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ utilities */
.container { width: min(1240px, 100% - 40px); margin-inline: auto; }
.container-wide { width: min(1480px, 100% - 40px); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row > * { min-width: 0; }
.row-between { display: flex; gap: var(--sp-3); align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.row-between > * { min-width: 0; }
.row-end { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.right { text-align: right; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: .84rem; }
.tiny { font-size: .76rem; }
.bold { font-weight: 650; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide { display: none !important; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.grid { display: grid; gap: var(--sp-4); }
/* min() on the floor so a track never demands more than the screen has, and
   minmax(0, …) on the ceiling so wide content scrolls inside its own box
   instead of stretching the page. */
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.g-side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 900px) { .g-side { grid-template-columns: minmax(0, 1fr); } }
.grid > * { min-width: 0; }
/* Two-column splits that need a breakpoint. These lived as inline styles on the
   elements, where a media query cannot reach them, so they never collapsed. */
.g-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-live { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .g-split, .g-live { grid-template-columns: minmax(0, 1fr); }
}

.gradient-text {
  background: linear-gradient(100deg, var(--brand), var(--accent) 60%, var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------- surfaces */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--sp-5); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}
.card-head > * { min-width: 0; }
.card-head h3, .card-head h4 { margin: 0; }
.card-body { padding: var(--sp-5); }
.card-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft);
  background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.card-hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.panel { background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: var(--sp-4); }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%;
  padding: 9px 16px; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn-primary {
  --btn-bg: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-2) 70%, var(--brand)));
  --btn-fg: #fff; --btn-bd: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 32%, transparent);
}
.btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 42%, transparent); }
.btn-ghost { --btn-bg: transparent; --btn-bd: var(--line); }
.btn-soft { --btn-bg: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --btn-fg: var(--brand); --btn-bd: color-mix(in srgb, var(--brand) 22%, transparent); }
.btn-danger { --btn-bg: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --btn-fg: var(--danger); --btn-bd: color-mix(in srgb, var(--danger) 28%, transparent); }
.btn-success { --btn-bg: color-mix(in srgb, var(--ok) 12%, var(--surface));
  --btn-fg: var(--ok); --btn-bd: color-mix(in srgb, var(--ok) 28%, transparent); }
.btn-dark { --btn-bg: var(--text); --btn-fg: var(--surface); --btn-bd: transparent; }
.btn-sm { padding: 6px 11px; font-size: .8rem; border-radius: var(--r-xs); }
.btn-lg { padding: 13px 26px; font-size: 1rem; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; border-radius: var(--r-xs); }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--sp-4); }
.field-label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600;
  color: var(--text-2); letter-spacing: .01em; }
.field-input, .field-select, textarea.field-input, select.field-select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .92rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field-input:focus, .field-select:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.field-input::placeholder { color: var(--text-3); }
textarea.field-input { resize: vertical; min-height: 84px; line-height: 1.55; }
select.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
}
select[multiple].field-select { background-image: none; padding-right: 12px; }
.field-color { width: 100%; height: 42px; padding: 3px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
/* A file input never got the treatment the other fields did: it rendered as
   the browser default, 21px tall and unstyled, beside 42px fields. */
input[type="file"] {
  width: 100%; padding: 9px 11px; font: inherit; font-size: .86rem;
  color: var(--text-2); background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--r-sm); cursor: pointer;
}
input[type="file"]:focus-visible {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
input[type="file"]::file-selector-button {
  margin-right: 11px; padding: 7px 13px; font: inherit; font-size: .82rem;
  font-weight: 600; color: var(--brand); cursor: pointer;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--r-xs);
}
input[type="file"]:hover::file-selector-button {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
}
.field-help { margin-top: 5px; font-size: .78rem; color: var(--text-3); }
.field-error { margin-top: 5px; font-size: .78rem; color: var(--danger); }
/* When a row collapses to one column, its gap and each field's own bottom
   margin both applied, so spacing alternated 32px / 16px down the form. Inside
   a row the grid gap owns the spacing; the row carries the margin below it. */
.field-row { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field-row > .field { margin-bottom: 0; }
.check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  cursor: pointer; transition: border-color .18s, background .18s; }
.check:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
/* Inline: a checkbox beside its words, with no card drawn around it. Keeps the
   padding, because that padding is what a thumb aims at. */
.check-plain { border-color: transparent; background: none; padding: 9px 2px; }
.check-plain:hover { border-color: transparent; }
.check-plain:has(input:checked) { border-color: transparent; background: none; }
.check input { margin-top: 3px; accent-color: var(--brand); width: 15px; height: 15px;
  cursor: pointer; flex: 0 0 auto; }
.check-title { font-weight: 600; font-size: .88rem; }
.check-desc { display: block; font-size: .76rem; color: var(--text-3); margin-top: 2px; }
.check:has(input:checked) { border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line);
  border-radius: var(--r-full); cursor: pointer; transition: background .2s var(--ease); }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px;
  height: 18px; background: #fff; border-radius: 50%; transition: transform .2s var(--ease);
  box-shadow: var(--shadow-xs); }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.form-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft); margin-top: var(--sp-5); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5);
  margin: 0 0 var(--sp-5); }
legend { padding: 0 8px; font-weight: 650; font-size: .88rem; color: var(--text-2); }

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-size: .74rem; font-weight: 650; letter-spacing: .01em; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-2); white-space: nowrap;
  border: 1px solid transparent;
}
.badge-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.badge-warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.badge-danger { background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.badge-info { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info);
  border-color: color-mix(in srgb, var(--info) 24%, transparent); }
.badge-brand { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent); }
.badge-purple { background: color-mix(in srgb, var(--purple) 13%, transparent);
  color: var(--purple); border-color: color-mix(in srgb, var(--purple) 24%, transparent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3);
  flex: 0 0 auto; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot-live { background: var(--danger); animation: pulse-dot 1.6s infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
}

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: var(--r); }
table.table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.table th {
  text-align: left; padding: 11px 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: var(--r-full); overflow: hidden;
  font-size: .8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: .7rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 92px; height: 92px; font-size: 1.9rem; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person-name { font-weight: 600; }

/* ---------------------------------------------------------------- stats */
.stat {
  position: relative; overflow: hidden;
  padding: var(--sp-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: .85;
}
.stat-label { display: flex; align-items: center; gap: 7px; font-size: .76rem;
  font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.stat-value { margin-top: 8px; font-size: 1.95rem; font-weight: 750; letter-spacing: -.03em;
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-sub { margin-top: 5px; font-size: .8rem; color: var(--text-2); }
.stat-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.stat.ok::after { background: linear-gradient(90deg, var(--ok), #34d399); }
.stat.warn::after { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.stat.danger::after { background: linear-gradient(90deg, var(--danger), #fb7185); }
.stat.purple::after { background: linear-gradient(90deg, var(--purple), #e879f9); }

/* --------------------------------------------------------------- charts */
/* Grid, not flex: a `1fr` row gives the bar a definite height to resolve its
   percentage against, which a flex column with auto height does not. */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; height: 170px; align-items: end; padding-top: 8px; }
.bar-col { display: grid; grid-template-rows: 1fr auto; gap: 6px; justify-items: center;
  height: 100%; min-width: 0; }
.bar {
  align-self: end;
  width: 100%; max-width: 34px; min-height: 3px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 45%, transparent));
  transition: height .6s var(--ease), filter .2s;
  animation: bar-rise .7s var(--ease) both;
}
.bar { transform-origin: bottom; }
.bar:hover { filter: brightness(1.15); }
@keyframes bar-rise { from { transform: scaleY(.05); opacity: .35; } }
.bar-label { font-size: .68rem; color: var(--text-3); white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.spark i { flex: 1; background: color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 2px; min-height: 2px; }

.meter { height: 8px; border-radius: var(--r-full); background: var(--surface-3);
  overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .8s var(--ease); }
.meter.ok > i { background: linear-gradient(90deg, var(--ok), #34d399); }
.meter.warn > i { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.meter.danger > i { background: linear-gradient(90deg, var(--danger), #fb7185); }
.meter-lg { height: 12px; }

.ring { --pct: 0; width: 96px; height: 96px; border-radius: 50%; display: grid;
  place-items: center; position: relative;
  background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--surface-3) 0); }
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--surface); }
.ring > span { position: relative; font-weight: 750; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ app shell */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  transition: transform .28s var(--ease);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; height: var(--topbar-h);
  padding: 0 var(--sp-5); border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: -.02em;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 40%, transparent);
}
.brand-name { font-weight: 750; letter-spacing: -.02em; font-size: 1.02rem; }
.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-3); }
.nav-section + .nav-section { margin-top: var(--sp-5); }
.nav-title { padding: 0 12px 7px; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 2px;
  border-radius: var(--r-sm); color: var(--text-2); font-size: .875rem; font-weight: 550;
  transition: background .16s, color .16s; position: relative;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active {
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
  font-weight: 650;
}
.nav-link.active::before {
  content: ""; position: absolute; left: -11px; top: 50%; translate: 0 -50%;
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-link .icon { opacity: .82; }
.nav-badge { margin-left: auto; font-size: .68rem; font-weight: 700; padding: 1px 7px;
  border-radius: var(--r-full); background: var(--danger); color: #fff; }
.sidebar-foot { flex: 0 0 auto; padding: var(--sp-3); border-top: 1px solid var(--line-soft); }

.main { flex: 1 1 auto; min-width: 0; margin-left: var(--sidebar-w); }
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.page { padding: var(--sp-6); max-width: 1500px;
  /* Clear the floating dock so the last row is never underneath it. */
  padding-bottom: calc(var(--dock-b) + var(--dock-size) + var(--sp-6)); }
.page-head { margin-bottom: var(--sp-6); }
.page-title { margin: 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -.025em; }
.page-sub { margin: 5px 0 0; color: var(--text-2); font-size: .92rem; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: .78rem;
  color: var(--text-3); margin-bottom: 7px; }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--brand); }

.sidebar-toggle { display: none; }
@media (max-width: 1080px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .page { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
}
.scrim { position: fixed; inset: 0; background: rgba(6, 9, 20, .5); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------- dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 80;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 6px; overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dropdown.open .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-xs);
  color: var(--text); font-size: .875rem; width: 100%; background: none; border: 0;
  text-align: left; cursor: pointer; font-family: inherit;
}
.dropdown-item:hover { background: var(--surface-3); color: var(--text); }
.dropdown-sep { height: 1px; background: var(--line-soft); margin: 5px 0; }
.dropdown-head { padding: 9px 11px 6px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* --------------------------------------------------------------- alerts */
.alert { display: flex; gap: 11px; padding: 12px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); font-size: .88rem; }
.alert-success { border-color: color-mix(in srgb, var(--ok) 30%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, var(--surface)); color: var(--ok); }
.alert-error, .alert-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); }
.alert-warning { border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: var(--warn); }
.alert-info { border-color: color-mix(in srgb, var(--info) 30%, transparent);
  background: color-mix(in srgb, var(--info) 8%, var(--surface)); color: var(--info); }
/* Everything that docks bottom-right stacks off one offset, so nothing lands
   on top of anything else. Pages with their own bottom-right control raise it. */
:root { --dock-b: 22px; --dock-size: 56px; }
.toasts { position: fixed; right: 20px; z-index: 200;
  bottom: calc(var(--dock-b) + var(--dock-size) + 14px);
  display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast { padding: 13px 16px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: .88rem;
  animation: toast-in .35s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } }
.toast.out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }

/* ---------------------------------------------------------------- misc */
.empty { padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--text-3); }
.empty-icon { display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--surface-3); color: var(--text-3);
  margin-bottom: var(--sp-4); }
.empty h4 { color: var(--text-2); margin-bottom: 5px; }
.tabs { display: flex; gap: 3px; padding: 4px; background: var(--surface-3);
  border-radius: var(--r-sm); overflow-x: auto; }
.tab { padding: 7px 15px; border-radius: var(--r-xs); font-size: .86rem; font-weight: 600;
  color: var(--text-2); white-space: nowrap; cursor: pointer; border: 0; background: none;
  font-family: inherit; transition: background .16s, color .16s; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.pagination { display: flex; gap: 5px; justify-content: center; align-items: center;
  padding: var(--sp-5) 0; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 12px; border-radius: var(--r-xs);
  font-size: .84rem; border: 1px solid var(--line); color: var(--text-2); }
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff;
  font-weight: 650; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { padding: 5px 12px; border-radius: var(--r-full); font-size: .8rem; font-weight: 550;
  border: 1px solid var(--line); color: var(--text-2); background: var(--surface);
  cursor: pointer; transition: all .16s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end;
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: var(--sp-5); }
.filters .field { margin: 0; min-width: 150px; flex: 1 1 auto; }
.filters .field-input, .filters .field-select { min-width: 130px; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: var(--sp-4); }
.timeline-item::before { content: ""; position: absolute; left: -23px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
  border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }

.modal-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  padding: clamp(10px, 4vw, 20px); background: rgba(6, 9, 20, .62); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { width: min(680px, 100%); min-width: 0; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98); transition: transform .25s var(--ease); }
.modal-backdrop.open .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.modal-body { padding: var(--sp-5); }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line-soft); background: var(--surface-2); }

/* ================================================= face / camera surface */
.face-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #05070f; aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.face-stage video, .face-stage canvas.overlay {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.face-stage video { transform: scaleX(-1); }
.face-stage video.no-mirror { transform: none; }
.face-stage canvas.overlay { pointer-events: none; }
.face-frame {
  position: absolute; inset: 8%; border-radius: var(--r-xl); pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  transition: border-color .3s, box-shadow .3s, inset .3s;
}
.face-stage[data-state="detecting"] .face-frame { border-color: var(--warn);
  border-style: solid; }
.face-stage[data-state="matched"] .face-frame { border-color: var(--ok); border-style: solid;
  box-shadow: 0 0 0 9999px rgba(16, 185, 129, .12), 0 0 40px rgba(16, 185, 129, .5) inset; }
.face-stage[data-state="failed"] .face-frame { border-color: var(--danger);
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(239, 68, 68, .12); }
.scanline {
  position: absolute; left: 8%; right: 8%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent); animation: scan 2.6s linear infinite;
  pointer-events: none;
}
@keyframes scan { 0% { top: 10%; opacity: 0; } 12% { opacity: 1; }
  88% { opacity: 1; } 100% { top: 88%; opacity: 0; } }
.face-status {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 600;
  font-size: .9rem; background: linear-gradient(0deg, rgba(3, 6, 15, .92), transparent);
}
.face-hud { position: absolute; top: 12px; left: 12px; right: 12px; display: flex;
  gap: 8px; justify-content: space-between; pointer-events: none; }
.hud-pill { padding: 4px 10px; border-radius: var(--r-full); font-size: .72rem;
  font-weight: 700; letter-spacing: .04em; background: rgba(6, 10, 22, .68);
  color: #dbe4ff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); }
.hud-pill.ok { color: #6ee7b7; border-color: rgba(110, 231, 183, .35); }
.hud-pill.warn { color: #fcd34d; border-color: rgba(252, 211, 77, .35); }
.hud-pill.bad { color: #fca5a5; border-color: rgba(252, 165, 165, .35); }
.face-pose-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.pose {
  flex: 1 1 90px; padding: 11px; border-radius: var(--r-sm); text-align: center;
  border: 1px solid var(--line); background: var(--surface-2); font-size: .78rem;
  color: var(--text-2); transition: all .2s var(--ease);
}
.pose.done { border-color: var(--ok); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.pose.current { border-color: var(--brand); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.marked-feed { display: flex; flex-direction: column; gap: 8px; max-height: 460px;
  overflow-y: auto; }
.marked-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--surface);
  animation: slide-in .35s var(--ease) both;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }
.marked-row.is-new { border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }

/* -------------------------------------------------------------- landing */
.landing-body { --bg: #05070f; --surface: #0b0f1e; --text: #f2f5ff; --text-2: #a4adcd;
  --text-3: #6e779c; --line: #1c2340; --line-soft: #161c33; --surface-2: #0f142a;
  --surface-3: #151b34; background: var(--bg); color: var(--text); }
.landing-body a:not(.btn):not(.chip):not(.nav-link) { color: var(--accent); }

.site-header {
  position: sticky; top: 0; z-index: 90; padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav-links { display: flex; gap: var(--sp-5); margin-left: auto; align-items: center; }
.site-nav-links a { color: var(--text-2); font-size: .9rem; font-weight: 550; }
.site-nav-links a:hover { color: var(--text); }
@media (max-width: 900px) { .site-nav-links { display: none; } }

.announce-bar { padding: 9px 0; text-align: center; font-size: .84rem; font-weight: 600;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; }
.announce-bar a { color: #fff; text-decoration: underline; }

.hero { position: relative; padding: clamp(70px, 11vw, 140px) 0 clamp(60px, 9vw, 110px);
  overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg canvas { width: 100%; height: 100%; display: block; opacity: .55; }
.hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35;
  pointer-events: none;
}
.hero-glow.a { width: 520px; height: 520px; background: var(--brand); top: -140px; left: -90px;
  animation: float-a 16s ease-in-out infinite; }
.hero-glow.b { width: 430px; height: 430px; background: var(--accent); bottom: -160px;
  right: -60px; animation: float-b 19s ease-in-out infinite; }
@keyframes float-a { 50% { transform: translate(80px, 60px) scale(1.12); } }
@keyframes float-b { 50% { transform: translate(-70px, -50px) scale(1.08); } }
.hero-inner { position: relative; z-index: 1; display: grid; gap: var(--sp-10);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
@media (max-width: 980px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--r-full); font-size: .78rem; font-weight: 650; letter-spacing: .04em;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.035em; margin: 20px 0 18px; }
.hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-2); max-width: 56ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-6); }
.hero-proof { display: flex; gap: var(--sp-8); margin-top: var(--sp-10); flex-wrap: wrap; }
.hero-proof b { display: block; font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; }
.hero-proof b span { font: inherit; color: inherit; }
.hero-proof > div > span { font-size: .8rem; color: var(--text-3); }

.hero-visual { position: relative; }
.face-demo {
  position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3.2;
  background: linear-gradient(160deg, #101736, #070b18 60%);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.face-demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The scan stage is square so the canvas mesh lines up with the face in the
   photograph — an overlay measured against a letterboxed image drifts off it. */
.face-scan {
  position: absolute; inset: 0; display: grid; place-items: center;
  container-type: size;
}
.face-scan > * {
  grid-area: 1 / 1; aspect-ratio: 1 / 1;
  height: 100%; width: auto; max-width: 100%; max-height: 100%;
  border-radius: var(--r-lg); overflow: hidden;
}
.face-scan-photo {
  object-fit: cover; object-position: center 42%;
  filter: saturate(.86) contrast(1.06) brightness(.86);
  /* The portrait is shot on white. Feather it into the dark card instead of
     letting a bright rectangle sit behind the mesh. */
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 47%,
                                      #000 58%, rgba(0,0,0,.55) 82%, transparent 99%);
  mask-image: radial-gradient(closest-side circle at 50% 47%,
                              #000 58%, rgba(0,0,0,.55) 82%, transparent 99%);
}
.face-scan::after {
  content: ""; grid-area: 1 / 1; pointer-events: none; aspect-ratio: 1 / 1;
  height: 100%; border-radius: var(--r-lg);
  background: radial-gradient(closest-side circle at 50% 47%,
              transparent 40%, color-mix(in srgb, #070b18 78%, transparent) 100%);
}
@supports not (container-type: size) { .face-scan { display: block; } }
/* Sign-in: form on the left, face-scan panel on the right. This lived as an
   inline style on the element, which outranks any stylesheet rule — so the
   breakpoint below never applied and the form stayed in a half-width column
   on phones with the empty panel beside it. */
.auth-split { display: grid; min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-form { display: grid; place-items: center; padding: 40px 24px; }
.auth-form > * { width: min(420px, 100%); }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { display: none; }
}

/* Single-column auth pages — reset, expired link, confirmation. */
.auth-single { display: grid; place-items: center; min-height: 100vh; padding: 40px 24px; }

.face-demo-chip {
  position: absolute; padding: 8px 13px; border-radius: var(--r-sm); font-size: .78rem;
  font-weight: 650; background: rgba(8, 12, 26, .82); border: 1px solid var(--line);
  color: var(--text); backdrop-filter: blur(8px); box-shadow: var(--shadow);
  animation: chip-in .6s var(--ease) both;
}
@keyframes chip-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
/* On a phone the plate is barely wider than the head, and four chips sit across
   the face they are meant to be pointing at. Keep the diagonal pair and shrink
   them so the portrait stays readable. */
@media (max-width: 640px) {
  .face-demo-chip { font-size: .7rem; padding: 6px 10px; }
  .face-demo-chip:nth-of-type(3), .face-demo-chip:nth-of-type(4) { display: none; }
}

.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
/* Only hide reveal blocks when JS is actually running, so the page still reads
   correctly with scripting off or blocked. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }

.section { padding: clamp(60px, 8vw, 108px) 0; position: relative; }
.section-head { max-width: 720px; margin: 0 auto var(--sp-10); text-align: center; }
.section-head h2 { margin: 14px 0 12px; letter-spacing: -.03em; }
.section-head p { color: var(--text-2); font-size: 1.03rem; }
.section-light { background: var(--surface); }

.feature-card {
  padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-5px); border-color:
  color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-lg); }
.feature-card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .3s;
}
.feature-card:hover::before { opacity: 1; }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--r-sm); margin-bottom: var(--sp-4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 25%, transparent),
    color-mix(in srgb, var(--accent) 20%, transparent));
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.feature-card h4 { margin-bottom: 8px; }
.feature-card p { color: var(--text-2); font-size: .9rem; margin: 0; }

.step { position: relative; padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); }
.step-num { position: absolute; top: -16px; left: var(--sp-6); width: 34px; height: 34px;
  border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 40%, transparent); }

.price-card {
  position: relative; padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: transform .3s var(--ease),
  border-color .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card.featured { border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 24px 60px color-mix(in srgb, var(--brand) 22%, transparent); }
.price-badge { position: absolute; top: -12px; left: 50%; translate: -50% 0;
  padding: 4px 14px; border-radius: var(--r-full); font-size: .72rem; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; }
.price-amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.price-list { list-style: none; padding: 0; margin: var(--sp-5) 0; display: grid; gap: 10px;
  flex: 1 1 auto; }
.price-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .87rem;
  color: var(--text-2); }
.price-list .icon { color: var(--ok); margin-top: 2px; }

.quote-card { padding: var(--sp-6); border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); }
.stars { display: flex; gap: 2px; color: var(--warn); margin-bottom: 12px; }

.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px; background: none; border: 0; color: var(--text);
  font: inherit; font-weight: 620; text-align: left; cursor: pointer; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  color: var(--text-2); font-size: .9rem; }
.faq-a > div { padding: 0 20px 18px; }
.faq-item.open .faq-a { max-height: 460px; }
.faq-item.open .faq-q .icon { transform: rotate(180deg); }
.faq-q .icon { transition: transform .3s var(--ease); }

.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px); text-align: center;
  background: linear-gradient(125deg, color-mix(in srgb, var(--brand) 90%, #000),
    color-mix(in srgb, var(--brand-2) 85%, #000)); color: #fff; }
.cta-band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 78% 82%, rgba(255,255,255,.16), transparent 45%); }
.cta-band > * { position: relative; }

.site-footer { padding: var(--sp-12) 0 var(--sp-6); border-top: 1px solid var(--line);
  background: var(--surface); }
.footer-grid { display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); }
/* Those two floors plus the gap ask for more than a phone screen has, so below
   this width the link columns pair up and the brand column takes its own row. */
@media (max-width: 760px) {
  .footer-grid { gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
}
.footer-col h5 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px; }
.footer-col a { display: block; padding: 4px 0; color: var(--text-2); font-size: .88rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: .82rem; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--text-2); }
.social a:hover { border-color: var(--accent); color: var(--accent); }

.logo-strip { display: flex; gap: var(--sp-8); flex-wrap: wrap; justify-content: center;
  align-items: center; opacity: .65; }
.logo-strip span { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--text-3); }

/* -------------------------------------------------------------- chatbot */
.bot-launcher {
  position: fixed; right: 22px; bottom: var(--dock-b); z-index: 140;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand) 45%, transparent);
  transition: transform .25s var(--ease);
}
.bot-launcher:hover { transform: scale(1.08) rotate(-6deg); }
.bot-launcher::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  animation: ring-pulse 2.6s ease-out infinite; }
@keyframes ring-pulse { 0% { opacity: .9; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.4); } }
.bot-panel {
  position: fixed; right: 22px; z-index: 141;
  bottom: calc(var(--dock-b) + var(--dock-size) + 12px);
  width: min(392px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 130px));
  display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.bot-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.bot-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff;
  background: linear-gradient(120deg, var(--brand), var(--brand-2)); }
.bot-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 11px; background: var(--surface-2); }
.bot-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: .87rem;
  line-height: 1.5; animation: slide-in .3s var(--ease) both; white-space: pre-wrap; }
.bot-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; }
.bot-msg.user { align-self: flex-end; color: #fff; border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.bot-msg.agent { align-self: flex-start; border-bottom-left-radius: 4px;
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.bot-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px;
  background: var(--surface-2); }
.bot-quick button { padding: 6px 11px; border-radius: var(--r-full); font-size: .77rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  cursor: pointer; font-family: inherit; transition: all .16s; }
.bot-quick button:hover { border-color: var(--brand); color: var(--brand); }
.bot-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line);
  background: var(--surface); }
.bot-input input { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-full); font: inherit; font-size: .88rem; background: var(--surface-2);
  color: var(--text); }
.bot-input input:focus { outline: none; border-color: var(--brand); }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
  animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); } }

/* ----------------------------------------------------------------- chat */
.chat-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-4); height: calc(100vh - var(--topbar-h) - var(--sp-10)); }
@media (max-width: 900px) { .chat-shell { grid-template-columns: minmax(0, 1fr); height: auto; } }
.chat-list { overflow-y: auto; }
.chat-item { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text); }
.chat-item:hover { background: var(--surface-3); }
.chat-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.chat-main { display: flex; flex-direction: column; min-height: 480px; }
.chat-log { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5); display: flex;
  flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: .89rem;
  line-height: 1.5; }
.chat-bubble.mine { align-self: flex-end; color: #fff; border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.chat-bubble.theirs { align-self: flex-start; background: var(--surface-3);
  border-bottom-left-radius: 4px; }
.chat-bubble.system { align-self: center; background: transparent; color: var(--text-3);
  font-size: .78rem; }
.chat-meta { font-size: .68rem; opacity: .75; margin-top: 3px; }
.chat-compose { display: flex; gap: 9px; padding: var(--sp-4);
  border-top: 1px solid var(--line); }
/* The composer's send button sits in the bottom-right corner, exactly where the
   support bot docks. On these pages the bot rides above the composer. */
.chat-page { --dock-b: 96px; }

/* --------------------------------------------------------- print / a11y */
@media print {
  .sidebar, .topbar, .bot-launcher, .bot-panel, .no-print, .site-header, .site-footer
    { display: none !important; }
  .main { margin: 0; }
  .page { padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; padding: 10px 16px;
  background: var(--brand); color: #fff; border-radius: var(--r-sm); }


/* -------------------------------------------------------------- prose */
/* Author-written HTML from the CMS — the privacy, terms and refund pages.
   It arrives as bare tags with no classes to hang styling on, so the rules
   are on the elements themselves. */
.prose { color: var(--text-2); line-height: 1.7; max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin: var(--sp-7) 0 var(--sp-3); font-size: 1.15rem; font-weight: 700;
  color: var(--text); letter-spacing: -.01em; }
.prose h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: 1rem; font-weight: 650;
  color: var(--text); }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 650; }
.prose a { color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; }
.prose blockquote { margin: 0 0 var(--sp-4); padding-left: var(--sp-4);
  border-left: 3px solid var(--line); color: var(--text-3); }
.prose code { font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .88em; padding: 2px 5px; border-radius: var(--r-xs);
  background: var(--surface-3); }
/* A table typed into the editor has no .table-wrap around it to scroll in, so
   it becomes its own scroller rather than pushing the page sideways. */
.prose table { display: block; width: max-content; max-width: 100%;
  overflow-x: auto; margin: 0 0 var(--sp-4); border-collapse: collapse;
  font-size: .88rem; }
.prose th, .prose td { padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); }
.prose th { font-weight: 650; color: var(--text); white-space: nowrap; }

/* On a narrow phone a long call to action — "Register your institution" — is
   squeezed below the width its nowrap text needs, and the last letters are
   cut off. Letting the label wrap costs a second line and keeps the words. */
@media (max-width: 430px) {
  .btn-lg, .btn-block { white-space: normal; text-align: center; }
}

/* ------------------------------------------------------- touch targets */
/* Fingers, not cursors. At desktop density an icon button is 27px tall, a tab
   30px and a footer link 23px — all comfortably clickable with a mouse and all
   smaller than the ~44px a thumb hits reliably. Widened only behind
   pointer: coarse, so the desktop layout keeps its density. */
@media (pointer: coarse) {
  .btn-sm { padding: 10px 14px; min-height: 42px; }
  .btn-icon { padding: 11px; min-height: 44px; min-width: 44px; }
  .tab { padding: 11px 16px; min-height: 42px; }
  .footer-col a { padding: 9px 0; }
  .pagination a, .pagination span { min-height: 42px; padding: 10px 14px; }
  .dropdown-item { min-height: 42px; }
  /* A link that is the whole of its line — the "Send reminders →" under a
     stat, the class name in a list row — is a control, not prose, and at
     15px of line box there is nothing to aim at. */
  .stat-sub a:not(.btn), .row-between > a:not(.btn),
  .table td > a:only-child:not(.btn),
  p.center > a:only-child:not(.btn) {
    display: inline-block; padding: 9px 0; }
  .check input { width: 19px; height: 19px; margin-top: 1px; }
  /* A checkbox alone in a table cell offers 13px of target and nothing else
     to aim at; the padding grows the hit area without moving the box. */
  td > input[type="checkbox"], th > input[type="checkbox"],
  td > input[type="radio"] { width: 24px; height: 24px; margin: 8px 6px; }
  .social a { width: 44px; height: 44px; }
}

/* The camera pages' Capture button: it follows the liveness gate, so its
   colour is the answer to "can I press this now". */
#btn-capture:disabled { opacity: .55; cursor: not-allowed; }