:root {
  --abyss: #0c2530;   /* fond */
  --panel: #123341;
  --line:  #22505f;
  --text:  #e3eef0;
  --muted: #8fb0b8;
  --gain:  #62d6a4;
  --loss:  #f2826f;
  --gold:  #e9b949;
}
html { color-scheme: dark; }
body { background: var(--abyss); color: var(--text); font-family: "Manrope", system-ui, sans-serif; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.gold { color: var(--gold); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.vault { background: #2a2a1c; border: 1px solid #5c4d22; border-radius: 10px; }
.vault-muted { color: #c9b77f; }
.banner { background: #3a2327; border: 1px solid #7a3b3b; border-radius: 10px; color: #ffd9d2; }
.field { background: var(--abyss); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.btn-primary { background: var(--gain); color: #06241a; border-radius: 8px; }
.btn-ghost { border: 1px solid var(--line); border-radius: 8px; }
.btn-ghost:hover, .btn-primary:hover { filter: brightness(1.12); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dot { width: 12px; height: 12px; border-radius: 99px; background: var(--muted); }
.dot.on { background: var(--gain); box-shadow: 0 0 0 4px rgba(98, 214, 164, .18); }
.dot.off { background: var(--loss); box-shadow: 0 0 0 4px rgba(242, 130, 111, .18); }

/* Jauge vers le palier de verrouillage */
.gauge { position: relative; height: 10px; border-radius: 99px; background: var(--abyss); border: 1px solid var(--line); }
.gauge-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--gain), var(--gold)); transition: width .6s ease; }
.gauge-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .5; }

/* Barre SL → TP */
.range { position: relative; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(242,130,111,.55), rgba(143,176,184,.25) 50%, rgba(98,214,164,.55)); }
.range-entry { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--muted); }
.range-price { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 99px;
  background: var(--text); border: 3px solid var(--abyss); transition: left .5s ease; }
@media (prefers-reduced-motion: reduce) { .gauge-fill, .range-price { transition: none; } }
tbody tr { border-top: 1px solid var(--line); }