/* ============================================================
   dozka.css — design system (httpbratz/dozka-panel-kit).
   Flat near-black monochrome · 2px carré partout · Bricolage ·
   UN accent bleu #0a84ff chirurgical · sélection blanc inversé ·
   chiffres mono tabulaires. Zéro dégradé / glow / verre / pilule.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

:root {
  --canvas:#131313; --panel:#090909; --elevated:#0c0c0c; --sunken:#050505;
  --line:#1a1a1a; --line-2:#262626;
  --fg:#fafafa; --muted:#a3a3a3; --faint:#525252; --dim:#737373;
  --accent:#0a84ff; --accent-hi:#2b95ff; --accent-soft:rgba(10,132,255,.14);
  --success:#12b76a; --error:#f04438; --warning:#f79009;
  --font:'Bricolage Grotesque',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code','Cascadia Mono',Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:2px; }
html,body{ height:100%; }
body{ margin:0; background:var(--canvas); color:var(--fg);
  font-family:var(--font); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; }

::selection{ background:var(--fg); color:var(--canvas); }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:#2f2f2f; border:2px solid var(--canvas); }
*::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

a{ color:var(--accent); text-decoration:none; }
b,strong{ font-weight:600; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.sect{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 10px; }
.hint{ font-size:12px; color:var(--muted); line-height:1.5; }

/* ── boutons ─────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:12px; font-weight:600; line-height:1;
  padding:8px 13px; border:1px solid var(--line-2); background:var(--elevated);
  color:var(--muted); cursor:pointer; white-space:nowrap; transition:.12s; }
.btn:hover{ color:var(--fg); background:var(--sunken); border-color:var(--line-2); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn--primary{ background:var(--fg); color:var(--canvas); border-color:var(--fg); font-weight:700; }
.btn--primary:hover{ background:#e6e6e6; color:var(--canvas); }
.btn--accent{ background:var(--accent); color:#fff; border-color:var(--accent);
  font-weight:700; letter-spacing:.03em; }
.btn--accent:hover{ background:var(--accent-hi); color:#fff; }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--faint); }
.btn--ghost:hover{ background:var(--elevated); color:var(--fg); }
.btn--danger:hover{ color:var(--error); border-color:var(--error); background:transparent; }
.btn--sm{ padding:5px 9px; font-size:11px; }
.btn--icon{ padding:7px; }
.btn .ic{ width:14px; height:14px; }

/* ── icônes lucide (stroke) ──────────────────────────────────── */
.ic{ width:15px; height:15px; flex:0 0 auto; display:inline-block; vertical-align:-2px;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ── champs ──────────────────────────────────────────────────── */
label{ display:block; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:0 0 5px; }
input,select,textarea{ width:100%; font-family:inherit; font-size:13px;
  background:var(--sunken); color:var(--fg); border:1px solid var(--line-2);
  padding:8px 10px; }
input::placeholder,textarea::placeholder{ color:var(--dim); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); }
textarea{ resize:vertical; line-height:1.5; }
select{ appearance:none; -webkit-appearance:none; padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; }

/* ── badges / statut ─────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:3px 8px; border:1px solid var(--line-2); background:var(--elevated); color:var(--muted); }
.dot{ width:7px; height:7px; background:var(--faint); flex:0 0 auto; }
.badge--ok .dot{ background:var(--success); } .badge--ok{ color:var(--fg); }
.badge--bad .dot{ background:var(--error); }
.tag{ font-size:10px; font-weight:600; padding:2px 7px; border:1px solid var(--line-2);
  background:var(--elevated); color:var(--muted); }
.tag--ok{ color:var(--success); border-color:rgba(18,183,106,.4); }
.tag--bad{ color:var(--error); border-color:rgba(240,68,56,.4); }

/* ── carte / puits ───────────────────────────────────────────── */
.card{ background:var(--panel); border:1px solid var(--line-2); padding:14px; }
.well{ background:var(--sunken); border:1px solid var(--line-2); }

/* ── modales ─────────────────────────────────────────────────── */
dialog{ background:var(--elevated); color:var(--fg); border:1px solid var(--line-2);
  padding:20px; max-width:540px; width:92%; }
dialog::backdrop{ background:rgba(0,0,0,.66); }
.modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.modal-head h3{ margin:0; flex:1; font-size:15px; font-weight:600; }

/* ── barre de progression ────────────────────────────────────── */
.prog{ height:4px; background:var(--sunken); border:1px solid var(--line); overflow:hidden; }
.prog > i{ display:block; height:100%; background:var(--accent); transition:width .3s; }

/* ── toast ───────────────────────────────────────────────────── */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--elevated); border:1px solid var(--line-2); color:var(--fg);
  padding:9px 16px; font-size:13px; opacity:0; transition:.2s; pointer-events:none; z-index:60; }
.toast.show{ opacity:1; }