/* ============================================================
   Coordin.net — Thème de base partagé (responsive)
   Variables surchargeables par interface via --accent.
   ============================================================ */

:root {
  /* ── Couleurs de base (compatibilité ancienne API) ── */
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-rgb: 37, 99, 235;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --danger: #dc2626;
  --ok: #16a34a;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
  --sidebar-w: 240px;

  /* ── Design System v2 — variables étendues ── */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-border: rgba(148, 163, 184, 0.2);
  --color-border-strong: rgba(148, 163, 184, 0.4);

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #06b6d4;

  --color-sidebar-bg: #0f172a;
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-active: #2563eb;
  --color-sidebar-hover: rgba(255,255,255,0.06);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.03);
  --shadow-modal: 0 25px 50px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.08);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

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

  --transition-fast: 100ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 300ms cubic-bezier(0.4,0,0.2,1);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px;
  --font-size-md: 15px; --font-size-lg: 18px; --font-size-xl: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-size-base);
}

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

/* ---------- Accessibilité (WCAG 2.1 AA) ---------- */
/* 2.4.7 Focus visible : indicateur NET pour la navigation clavier sur tout
   élément interactif (les inputs gardent leur halo dédié). :focus-visible
   n'apparaît qu'au clavier — aucun anneau parasite au clic souris. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=file]:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Texte réservé aux lecteurs d'écran (masqué visuellement, jamais display:none) */
.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;
}

/* 2.3.3 : respecter la préférence système « réduire les animations » */
@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;
  }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px 16px;
  min-height: 44px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(37,99,235,0.2);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
  transform: none;
}
.btn--danger { background: var(--color-danger); box-shadow: 0 1px 2px rgba(239,68,68,0.2); }
.btn--danger:hover { background: #dc2626; }
.btn--success { background: var(--color-success); box-shadow: 0 1px 2px rgba(16,185,129,0.2); }
.btn--success:hover { background: #059669; }
.btn--sm { padding: 5px 12px; min-height: 34px; font-size: var(--font-size-xs); }
.btn--lg { padding: 12px 22px; min-height: 50px; font-size: var(--font-size-md); }

/* ---------- Cartes ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.card h2 { margin-top: 0; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---------- Page de connexion ---------- */
.login-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, .12), transparent),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 2rem;
}
.login-card h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.login-card .subtitle { margin: 0 0 1.5rem; color: var(--text-muted); }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
/* :not(radio/checkbox) : sans quoi width:100% + padding déforme les cases et
   boutons radio natifs placés dans un .field (gros ronds qui chevauchent). */
.field input:not([type=radio]):not([type=checkbox]) {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  transition: all var(--transition-base);
  outline: none;
  min-height: 38px;
}
.field input:not([type=radio]):not([type=checkbox]):focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  background: var(--color-surface);
}
.field input[type=radio], .field input[type=checkbox] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.alert {
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.alert--error { background: #fee2e2; color: #991b1b; }
.alert--ok { background: #dcfce7; color: #166534; }
.hidden { display: none !important; }

/* ---------- Coquille d'application (interfaces) ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  position: sticky;
  /* Décalé sous la bannière de connexion directe quand elle est présente. */
  top: var(--imperso-h, 0px);
  height: calc(100vh - var(--imperso-h, 0px));
  overflow: hidden;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  padding: .5rem .25rem 1rem;
}
.sidebar .brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-info);
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
}
/* La zone de navigation prend l'espace restant et défile seule. */
.nav { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* L'attribut `hidden` doit l'emporter sur `display:flex` (sinon un lien masqué
   par hidden reste visible — ex. « Ordonnances à signer » caché pour un PSAD). */
.nav-link[hidden] { display: none !important; }
.nav-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  min-height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: background var(--transition-base), color var(--transition-base), padding-left var(--transition-base);
  position: relative;
}
.nav-link:hover {
  background: var(--color-sidebar-hover);
  text-decoration: none;
  color: #f1f5f9;
}
.nav-link.active {
  background: rgba(37,99,235,0.2);
  color: #f1f5f9;
  font-weight: 600;
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 3px 3px 0;
}
.sidebar .spacer { flex: 0 0 auto; }
/* Bouton déconnexion : reste visible en bas, ne défile pas avec le menu. */
.sidebar #logout { flex: 0 0 auto; margin-top: .5rem; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 56px;
}
.topbar .title { font-weight: 700; font-size: 1rem; color: var(--color-text); }
.topbar .user { display: flex; align-items: center; gap: .75rem; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.content { padding: 1.5rem; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .6rem;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 40;
    top: var(--imperso-h, 0px); left: 0; bottom: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
  .content { padding: 1rem; }
}

/* ============================================================
   === DESIGN SYSTEM v2 — composants enrichis ===
   ============================================================ */

/* ── Scrollbars custom ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Inputs / selects globaux ── */
input[type=text], input[type=number], input[type=email], input[type=date],
input[type=search], input[type=datetime-local], input[type=tel], input[type=url],
input[type=password], input[type=time], input[type=month], input[type=week],
select, textarea {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  outline: none;
  box-sizing: border-box;
  min-height: 38px;
}
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus,
input[type=date]:focus, input[type=search]:focus, input[type=datetime-local]:focus,
input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus,
input[type=time]:focus, input[type=month]:focus, input[type=week]:focus,
select:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  background: var(--color-surface);
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
select { cursor: pointer; }

/* ── Contraste : fonds CLAIRS forcés en inline ─────────────────────────────
   Un élément qui fixe un fond clair en dur doit fixer aussi un texte sombre,
   sinon il hérite du texte clair des thèmes sombres → illisible. On redéfinit
   AUSSI les variables de texte/bordure pour que les descendants (.muted,
   bordures var(--color-border)…) suivent. Les préfixes hex ci-dessous ne
   couvrent QUE des couleurs claires (les vifs #ef4444/#f59e0b… sont exclus).
   Toutes interfaces — ne pas dupliquer dans les CSS d'interface. */
[style*="background:#fff"],    [style*="background: #fff"],
[style*="background:white"],   [style*="background: white"],
[style*="background:#f8fafc"], [style*="background: #f8fafc"],
[style*="background:#f8d7da"], [style*="background: #f8d7da"],
[style*="background:#f0"],     [style*="background: #f0"],
[style*="background:#f1f5f9"], [style*="background: #f1f5f9"],
[style*="background:#eef"],    [style*="background: #eef"],
[style*="background:#eff"],    [style*="background: #eff"],
[style*="background:#fee"],    [style*="background: #fee"],
[style*="background:#fef"],    [style*="background: #fef"],
[style*="background:#ede"],    [style*="background: #ede"],
[style*="background:#e8f"],    [style*="background: #e8f"],
[style*="background:#ecf"],    [style*="background: #ecf"],
[style*="background:#f5f"],    [style*="background: #f5f"],
[style*="background:#f3f"],    [style*="background: #f3f"],
[style*="background:#dbe"],    [style*="background: #dbe"],
[style*="background:#e0f"],    [style*="background: #e0f"] {
  color: #1e293b;
  --color-text: #1e293b;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --text: #1e293b;
  --text-muted: #64748b;
  --muted: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --border: #e2e8f0;
}

/* ── Tables (stk-table + data-table) ── */
.stk-table, .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}
.stk-table th, .data-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 2px solid var(--color-border-strong);
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
}
.stk-table td, .data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.stk-table tbody tr, .data-table tbody tr { transition: background var(--transition-fast); }
/* Survol/zébrures pilotés par le THÈME (variables posées par theme.js selon
   la clarté du texte) : un fond clair en dur rendait le texte des thèmes
   sombres illisible au survol (blanc sur blanc). */
.stk-table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--row-hover, #f0f7ff); }
.stk-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td { background: var(--row-even, rgba(248,250,252,0.7)); }
.stk-table tbody tr:nth-child(even):hover td, .data-table tbody tr:nth-child(even):hover td { background: var(--row-hover, #f0f7ff); }
/* Lignes cliquables */
.stk-table tbody tr[data-id], .stk-table tbody tr[onclick], .data-table tbody tr[data-id], .data-table tbody tr[onclick] {
  cursor: pointer;
}
.stk-table tbody tr[data-id] td, .stk-table tbody tr[onclick] td { min-height: 44px; }

/* ── Badges / statuts ── */
.badge, .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.6;
}
.badge--primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge--success { background: rgba(16,185,129,0.12); color: #059669; }
.badge--danger  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.badge--warning { background: rgba(245,158,11,0.14); color: #b45309; }
.badge--info    { background: rgba(6,182,212,0.12);  color: #0e7490; }
.badge--muted   { background: rgba(100,116,139,0.1); color: var(--color-text-secondary); }

/* ── Chips (petits labels) ── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Cards et panels ── */
.stk-card, .app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.app-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.15);
}

/* ── KPI Cards ── */
.kpi-card {
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-info));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 2;
}
.kpi-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.kpi-number, .kpi-card__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  margin: 8px 0 4px;
}
.kpi-label, .kpi-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ── Toolbar / barre de filtres ── */
.stk-toolbar, .app-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
}

/* ── Empty states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
  text-align: center;
  gap: 8px;
}
.empty-state p:first-child { font-size: 2.5rem; margin: 0; }
.empty-state p:last-child { font-size: var(--font-size-sm); }
.empty-state h2 { margin-top: 0; color: var(--color-text-secondary); }

/* ── Loading / skeleton shimmer ── */
.loading, .skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  min-height: 32px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Timeline (fiche de vie appareillages) ── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-border));
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 16px; }
.tl-dot {
  position: absolute;
  left: -17px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 2px currentColor, var(--shadow-sm);
}
.tl-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  transition: box-shadow var(--transition-base);
}
.tl-body:hover { box-shadow: var(--shadow-md); }
.tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tl-date { font-size: 11px; color: var(--color-text-muted); margin-left: auto; white-space: nowrap; }

/* ── Alertes enrichies ── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.alert--error  { background: rgba(239,68,68,0.08);  color: #991b1b; border-color: rgba(239,68,68,0.2);  }
.alert--ok     { background: rgba(16,185,129,0.08); color: #065f46; border-color: rgba(16,185,129,0.2); }
.alert--warn   { background: rgba(245,158,11,0.10); color: #92400e; border-color: rgba(245,158,11,0.25); }
.alert--info   { background: rgba(6,182,212,0.08);  color: #164e63; border-color: rgba(6,182,212,0.2);  }

/* ── Glassmorphism backdrop pour modales inline ── */
[style*="position:fixed"][style*="background:#0006"],
[style*="position:fixed"][style*="background: #0006"],
[style*="background:#0008"],
[style*="background: #0008"] {
  backdrop-filter: blur(6px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
}

/* ── Dark mode minimal ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-2: #162032;
    --color-border: rgba(255,255,255,0.07);
    --color-border-strong: rgba(255,255,255,0.13);
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: rgba(255,255,255,0.09);
  }
  .stk-table th, .data-table th { background: #162032; }
  .stk-table tbody tr:hover td, .data-table tbody tr:hover td { background: rgba(37,99,235,0.12); }
  .stk-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
  .tl-body { background: var(--color-surface-2); }
}