/* v14.3 | 2026-06-08 | BimmerStudio web light theme tokens, utilities, and components. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --ink: #0F1419;
  --ink-2: #3D4450;
  --ink-3: #5C6370;
  --ink-4: #8B95A5;
  --line: #E8ECF0;
  --line-2: #D7DDE4;
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --blue: #2563EB;
  --blue-2: #3B82F6;
  --blue-soft: #EFF6FF;
  --blue-border: #BFDBFE;
  --blue-deep: #1D4ED8;
  --red: #B91C1C;
  --red-soft: #FEF2F2;
  --green: #15803D;
  --green-soft: #F0FDF4;
  --amber: #B45309;
  --amber-soft: #FFFBEB;
  --graphite: #1A2230;
  --carbon: #11161F;
  --ease: cubic-bezier(.16,1,.3,1);
  --radius-1: 4px;
  --radius-2: 7px;
  --radius-3: 10px;
  --radius-4: 12px;
  --radius-5: 14px;
  --radius-6: 16px;
  --radius-round: 999px;
  --shadow-sm: 0 6px 18px rgba(17,22,31,.06);
  --shadow-md: 0 16px 40px rgba(17,22,31,.10);
  --shadow-focus: 0 0 0 4px rgba(37,99,235,.14);
  --pattern-ref: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cline%20x1%3D%228%22%20y1%3D%223%22%20x2%3D%228%22%20y2%3D%229%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%223%22%20r%3D%222.6%22%20fill%3D%22%232563EB%22/%3E%3C/svg%3E");
  --pattern-converge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2046%22%3E%3Cg%20stroke%3D%22%230F1419%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2038%20L30%2038%22/%3E%3Cpath%20d%3D%22M10%2030%20L38%2030%22/%3E%3Cpath%20d%3D%22M14%2022%20L44%2022%22/%3E%3Cpath%20d%3D%22M18%2014%20L50%2014%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2226%22%20r%3D%224%22%20fill%3D%22%232563EB%22/%3E%3C/svg%3E");
  --pattern-datum: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2046%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230F1419%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%226%22%20x2%3D%2212%22%20y2%3D%2240%22/%3E%3Cpath%20d%3D%22M12%206%20H24%20a3%203%200%200%201%203%203%20V18%20a3%203%200%200%201%20-3%203%20H12%22/%3E%3Cpath%20d%3D%22M12%2021%20H26%20a3.5%203.5%200%200%201%203.5%203.5%20V36%20a3.5%203.5%200%200%201%20-3.5%203.5%20H12%22/%3E%3C/g%3E%3Cline%20x1%3D%2219.5%22%20y1%3D%2210.5%22%20x2%3D%2219.5%22%20y2%3D%2214.5%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2219.5%22%20cy%3D%2210.5%22%20r%3D%222.3%22%20fill%3D%22%232563EB%22/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

.display-xl, .display-lg, .display-md, .heading-xl, .heading-lg, .heading-md, .heading-sm {
  margin: 0;
  font-family: "Outfit", "Inter", sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
}
.display-xl { font-size: clamp(3rem, 6vw, 4.75rem); line-height: .95; font-weight: 800; }
.display-lg { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; font-weight: 800; }
.display-md { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.05; font-weight: 700; }
.heading-xl { font-size: 2rem; line-height: 1.1; font-weight: 700; }
.heading-lg { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.heading-md { font-size: 1.25rem; line-height: 1.2; font-weight: 650; }
.heading-sm { font-size: 1rem; line-height: 1.25; font-weight: 650; }
.body-lg { font-size: 1.0625rem; line-height: 1.65; }
.body-md { font-size: 1rem; line-height: 1.6; }
.body-sm { font-size: .9375rem; line-height: 1.55; }
.caption, .label, .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.label { font-size: .75rem; font-weight: 700; color: var(--blue); }
.caption { font-size: .6875rem; color: var(--ink-4); }
.mono { font-size: .8125rem; color: var(--ink-2); text-transform: none; letter-spacing: 0; }

.text-ink { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-muted { color: var(--ink-4); }
.text-blue { color: var(--blue); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-amber { color: var(--amber); }
.bg-page { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-blue-soft { background: var(--blue-soft); }
.bg-red-soft { background: var(--red-soft); }
.bg-green-soft { background: var(--green-soft); }
.bg-amber-soft { background: var(--amber-soft); }
.border-line { border: 1px solid var(--line); }
.border-strong { border: 1px solid var(--line-2); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.rounded-sm { border-radius: var(--radius-2); }
.rounded-md { border-radius: var(--radius-4); }
.rounded-lg { border-radius: var(--radius-6); }

.container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.grid-2, .grid-3 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pad-4 { padding: 16px; }
.pad-5 { padding: 20px; }
.pad-6 { padding: 24px; }
.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; }

.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  cursor: pointer;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-2), var(--blue-deep));
  box-shadow: 0 14px 28px rgba(37,99,235,.24);
}
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn-danger {
  background: linear-gradient(180deg, #dc2626, var(--red));
  color: #fff;
  box-shadow: 0 14px 28px rgba(185,28,28,.22);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .btn-ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-ghost:disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.badge {
  padding: 8px 12px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  border: 1px solid var(--blue-border);
}
.chip {
  padding: 6px 10px;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip::before, .badge::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--pattern-ref) center/12px 12px no-repeat;
  flex: none;
}

.pattern-ref {
  background-image: var(--pattern-ref);
  background-repeat: no-repeat;
  background-position: top right;
}
.pattern-converge {
  position: relative;
  overflow: hidden;
}
.pattern-converge::after {
  content: "";
  position: absolute;
  inset: auto 20px 16px auto;
  width: 64px;
  height: 46px;
  background: var(--pattern-converge) center/contain no-repeat;
  opacity: .16;
  pointer-events: none;
}
.datum-b-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.datum-b-badge::before {
  content: "";
  width: 24px;
  height: 28px;
  background: var(--pattern-datum) center/contain no-repeat;
  flex: none;
}

.show-sm { display: none !important; }

@media (max-width: 920px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hide-md { display: none !important; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 24px, 100%); }
  .show-sm { display: initial !important; }
  .hide-sm { display: none !important; }
  .btn-primary, .btn-secondary, .btn-danger, .btn-ghost { width: 100%; }
  .display-xl { font-size: 2.5rem; }
}

/* ─── Token additions (V14.2) ─────────────────────────────── */
:root {
  --blue-bd:    #BFDBFE;  /* alias for --blue-border */
  --green-bd:   #BBF7D0;
  --amber-bd:   #FCD34D;
  --red-bd:     #FECACA;
  --purple:      #7C3AED;
  --purple-soft: #F5F3FF;
  --purple-bd:   #DDD6FE;
  --r:    12px;  /* shorthand radius aliases */
  --r-sm:  8px;
  --r-lg: 16px;
}

/* ─── Navigation — V14.2 light shell ─────────────────────── */
.v14-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  height: 64px; display: flex; align-items: center;
}
.v14-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  width: 100%; display: flex; align-items: center;
}
/*
 * ── Datum B Logo Lockup Spec (V14.2 canonical) ──────────────────
 * Main nav:    <svg width="32" height="36">  name: 22px Outfit 700
 * Login drawer:<svg width="30" height="34">  name: 14px Outfit 700
 * Footer:      <svg width="26" height="30">  name: 15px Outfit 800
 * Rule height always matches SVG height.
 * SVG color: style="color:var(--graphite)"  (dark in light, white in dark)
 * ──────────────────────────────────────────────────────────────── */
.v14-nav-logo { display: flex; align-items: center; gap: 12px; margin-right: 32px; flex-shrink: 0; }
.v14-nav-rule  { width: 1.5px; height: 38px; background: var(--line-2); }
.v14-nav-name  { font: 700 22px/1 'Outfit'; letter-spacing: -.02em; color: var(--ink); }
.v14-nav-tag   { font: 600 9px/1 'JetBrains Mono'; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-top: 5px; }
.v14-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.v14-nav-a     { padding: 7px 12px; border-radius: var(--r-sm); font: 500 13.5px/1 'Inter'; color: var(--ink-3); background: none; transition: all .12s; }
.v14-nav-a:hover  { background: var(--bg); color: var(--ink); }
.v14-nav-a.active { color: var(--blue); font-weight: 700; background: var(--blue-soft); }
.v14-nav-actions  { display: flex; gap: 8px; margin-left: auto; }

/* ─── Form elements ───────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; padding: 9px 14px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); font: 14px/1 'Inter';
  color: var(--ink); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.input-error { border-color: var(--red) !important; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.12) !important; }
.form-label  { font: 600 12px/1 'Inter'; color: var(--ink-2); margin-bottom: 6px; display: block; }
.form-hint   { font-size: 12px; color: var(--ink-4); margin-top: 5px; }
.form-error  { font-size: 12px; color: var(--red); margin-top: 5px; }
.form-group  { display: flex; flex-direction: column; margin-bottom: 16px; }

/* ─── Tabs ────────────────────────────────────────────────── */
.section-tab, .tool-tab, .type-tab {
  padding: 7px 14px; border-radius: var(--r-sm);
  font: 500 13px/1 'Inter'; background: var(--bg);
  color: var(--ink-3); border: 1px solid var(--line);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.section-tab:hover, .tool-tab:hover { background: var(--surface); color: var(--ink); }
.section-tab.active, .tool-tab.active { background: var(--surface); color: var(--blue); border-bottom-color: var(--surface); font-weight: 600; }
.type-tab:hover  { background: var(--bg); color: var(--ink); }
.type-tab.active { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue-bd); font-weight: 600; }
.tab-strip { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0; }

/* ─── Table ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
  background: var(--bg); border-bottom: 2px solid var(--line-2);
  padding: 10px 14px; font: 600 11px/1 'JetBrains Mono';
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left;
}
.table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.table tbody tr:hover td { background: var(--bg); }
.table tbody tr:last-child td { border-bottom: none; }
.esys-header { background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink-2); }

/* ─── Color badge variants ────────────────────────────────── */
.badge-blue   { background: var(--blue-soft);   color: var(--blue);     border: 1px solid var(--blue-bd); }
.badge-green  { background: var(--green-soft);  color: var(--green);    border: 1px solid var(--green-bd); }
.badge-amber  { background: var(--amber-soft);  color: var(--amber);    border: 1px solid var(--amber-bd); }
.badge-red    { background: var(--red-soft);    color: var(--red);      border: 1px solid var(--red-bd); }
.badge-purple { background: var(--purple-soft); color: var(--purple);   border: 1px solid var(--purple-bd); }
.badge-dark   { background: var(--carbon);      color: #fff;            border: 1px solid transparent; }
.badge-gray   { background: var(--bg);          color: var(--ink-3);    border: 1px solid var(--line); }

/* ─── Alerts ──────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid;
  font-size: 13.5px; line-height: 1.5;
}
.alert-info    { background: var(--blue-soft);   border-color: var(--blue-bd);   color: var(--blue-deep); }
.alert-success { background: var(--green-soft);  border-color: var(--green-bd);  color: var(--green); }
.alert-warning { background: var(--amber-soft);  border-color: var(--amber-bd);  color: var(--amber); }
.alert-error   { background: var(--red-soft);    border-color: var(--red-bd);    color: var(--red); }

/* ─── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  background: var(--carbon); color: #fff;
  padding: 12px 20px; border-radius: var(--r-sm);
  font: 500 13px/1.4 'Inter'; box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transform: translateY(8px); opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ─── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(11,16,25,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .2s;
}
.modal-backdrop.show { opacity: 1; }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 24px 64px rgba(0,0,0,.18);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  transform: translateY(12px) scale(.98);
  transition: transform .22s var(--ease);
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-header { padding: 24px 24px 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title  { font: 700 18px/1.2 'Outfit'; color: var(--ink); }
.modal-close  { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.modal-close:hover { background: var(--bg); color: var(--ink); }
.modal-body   { padding: 0 24px; }
.modal-footer { padding: 20px 24px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* ─── Loading states ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--line) 0%, var(--bg) 50%, var(--line) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--line);
  border-top-color: var(--blue); border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── FAQ Accordion ───────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger {
  width: 100%; background: none; border: none; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; font: 600 15px/1.45 'Inter';
  color: var(--ink); transition: color .12s;
}
.faq-trigger:hover { color: var(--blue); }
.faq-chevron {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 100px;
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-4);
  transition: transform .22s var(--ease), border-color .15s, color .15s;
}
.faq-item.open .faq-trigger { color: var(--blue); }
.faq-item.open .faq-chevron { transform: rotate(180deg); border-color: var(--blue-bd); color: var(--blue); }
.faq-body { overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); }
.faq-body-inner { padding: 0 32px 20px 0; font-size: 14px; color: var(--ink-3); line-height: 1.7; }

/* ─── Footer (Supabase-style) ─────────────────────────────── */
.footer-trust {
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 14px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-trust-text { font-size: 13px; color: var(--ink-3); }
.footer-trust-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.footer-trust-badge { font: 500 12.5px/1 'Inter'; color: var(--ink-3); }
.footer-trust-badge strong { color: var(--ink); }
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 32px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 64px; padding-bottom: 48px; }
.footer-logo-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-logo-rule { width: 1.5px; height: 28px; background: var(--line-2); }
.footer-logo-name { font: 800 15px/1 'Outfit'; letter-spacing: -.02em; color: var(--ink); }
.footer-logo-tag  { font: 600 8.5px/1 'JetBrains Mono'; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-top: 4px; }
.footer-social { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; transition: all .12s; }
.footer-social:hover { border-color: var(--blue); color: var(--blue); }
.footer-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.footer-col h4 { font: 700 10.5px/1 'JetBrains Mono'; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 9px; transition: color .1s; }
.footer-col a:hover { color: var(--blue); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font: 400 12px/1 'Inter'; color: var(--ink-4); }

/* ─── Theme switcher ──────────────────────────────────────── */
.theme-switcher { position: relative; }
.theme-toggle-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-2); background: none; display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; font-size: 14px; transition: all .12s; }
.theme-toggle-btn:hover { border-color: var(--blue); color: var(--blue); }
.theme-menu { position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.13); padding: 6px; min-width: 130px; display: none; z-index: 600; }
.theme-menu.open { display: block; }
.theme-opt { padding: 8px 12px; border-radius: 6px; font: 500 13px/1 'Inter'; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.theme-opt:hover { background: var(--bg); }
.theme-opt.active { color: var(--ink); }
.theme-opt.active::before { content: '●'; font-size: 7px; color: var(--blue); }
.theme-opt:not(.active)::before { content: ''; display: inline-block; width: 7px; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ─── Dark theme — V14.2 Carbon/Graphite ─────────────────── */
/* Applied via: html[data-theme="dark"]                        */
/* Set by:      v14-init.js inline script in <head>            */
html[data-theme="dark"] {
  --ink:   #F0F4F8;
  --ink-2: #B8C4D0;
  --ink-3: #8B95A5;
  --ink-4: #5C6370;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.14);
  --bg:      #11161F;
  --surface: #1A2230;
  --blue-soft: rgba(37,99,235,.18);
  --blue-bd:   rgba(37,99,235,.35);
  --blue-border: rgba(37,99,235,.35);
  --green-soft: rgba(21,128,61,.18);
  --green-bd:   rgba(21,128,61,.30);
  --amber-soft: rgba(180,83,9,.20);
  --amber-bd:   rgba(180,83,9,.30);
  --red-soft:   rgba(185,28,28,.18);
  --red-bd:     rgba(185,28,28,.28);
  --purple-soft: rgba(124,58,237,.18);
  --purple-bd:   rgba(124,58,237,.30);
  --graphite: #F0F4F8;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.3);
  --shadow-md: 0 16px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"] .v14-nav    { background: rgba(26,34,48,.95); }
html[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.75); }
html[data-theme="dark"] .skeleton   { background: linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.04) 50%, var(--surface) 100%); }
html[data-theme="dark"] .theme-menu { box-shadow: 0 8px 32px rgba(0,0,0,.5); }

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --ink: #F0F4F8; --ink-2: #B8C4D0; --ink-3: #8B95A5; --ink-4: #5C6370;
    --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
    --bg: #11161F; --surface: #1A2230;
    --blue-soft: rgba(37,99,235,.18); --blue-bd: rgba(37,99,235,.35);
    --green-soft: rgba(21,128,61,.18); --purple-soft: rgba(124,58,237,.18);
  }
}