/* Couleurs et typographie */
:root {
  --bg: #FFFFFF; --bg-soft: #F6F6F8; --panel: #FFFFFF; --ink: #0B0B0F; --ink-2: #44444E; --ink-3: #74747E;
  --line: #E4E4EA; --accent: #5B2BFF; --accent-2: #3D1BB8; --accent-soft: #EEE9FF; --on-accent: #FFFFFF;
  --ok: #16A34A; --ok-soft: #E7F6EC; --warn: #B45309; --warn-soft: #FDF1DC; --bad: #DC2626; --bad-soft: #FDE8E8;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E12; --bg-soft: #16161C; --panel: #141419; --ink: #F3F3F6; --ink-2: #C4C4CE; --ink-3: #8E8E9A;
    --line: #2A2A33; --accent: #8E70FF; --accent-2: #A991FF; --accent-soft: #231C3D; --on-accent: #0B0B0F;
    --ok: #4ADE80; --ok-soft: #12291B; --warn: #FBBF24; --warn-soft: #2B2210; --bad: #F87171; --bad-soft: #2D1515;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E12; --bg-soft: #16161C; --panel: #141419; --ink: #F3F3F6; --ink-2: #C4C4CE; --ink-3: #8E8E9A;
  --line: #2A2A33; --accent: #8E70FF; --accent-2: #A991FF; --accent-soft: #231C3D; --on-accent: #0B0B0F;
  --ok: #4ADE80; --ok-soft: #12291B; --warn: #FBBF24; --warn-soft: #2B2210; --bad: #F87171; --bad-soft: #2D1515;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--bg-soft); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--panel); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 700; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }