/* Mobile-first, sobre et lisible */
:root {
  --bg: #0b1020;
  --card: #121729;
  --text: #e8eefc;
  --muted: #9aa3ba;
  --accent: #6ea8fe;
  --ok: #2ecc71;
  --danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; background: var(--bg); color: var(--text); }

.container { width: min(1100px, 94vw); margin: 24px auto; display: grid; gap: 16px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.card.sub { padding: 12px; }

.hidden { display: none !important; }
.stack { display: grid; gap: 10px; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grid-2 { display: grid; gap: 12px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

h1 { margin: 0 0 6px 0; font-size: clamp(20px, 4.8vw, 28px); }
h2 { margin: 0 0 6px 0; font-size: clamp(18px, 4.2vw, 22px); }
h3 { margin: 0 0 6px 0; font-size: 16px; }
small, .muted { color: var(--muted); }

input, select, textarea { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: #0d1324; color: var(--text); min-height: 44px; }
input[type=number] { text-align: center; }
button { padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: var(--accent); color: #081225; font-weight: 700; cursor: pointer; min-height: 44px; }
button.ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.2); }
button:disabled { opacity: .6; cursor: not-allowed; }

/* Sliders alignés proprement */
.range { display: grid; gap: 6px; }
.range .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.range input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%;
  background: transparent; height: 28px; outline: none; margin: 0; padding: 0;
}
.range input[type=range]::-webkit-slider-runnable-track { height: 6px; background: #24304f; border-radius: 999px; }
.range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #ffffff; border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.range input[type=range]::-moz-range-track { height: 6px; background: #24304f; border-radius: 999px; }
.range input[type=range]::-moz-range-progress { height: 6px; background: var(--accent); border-radius: 999px; }
.range input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.range input[type=range]::-ms-track { height: 6px; background: transparent; border-color: transparent; color: transparent; }
.range input[type=range]::-ms-fill-lower { background: var(--accent); border-radius: 999px; }
.range input[type=range]::-ms-fill-upper { background: #24304f; border-radius: 999px; }
.range input[type=range]::-ms-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); }

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(110,168,254,0.18); color: #cfe0ff; border: 1px solid rgba(110,168,254,0.35); font-size: 12px; }

.toast { margin-top: 8px; padding: 10px; border-radius: 8px; background: rgba(46, 204, 113, 0.15); color: var(--ok); border: 1px solid rgba(46, 204, 113, 0.35); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { background: #0f1830; color: var(--text); border-color: rgba(255,255,255,0.12); }
.tabs button.active { background: var(--accent); color: #081225; }
#filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#filters > * { min-width: 200px; }