:root{
  --bg:#0b0e17; --panel:#12182a; --ink:#e6f0ff; --muted:#93a2c7;
  --accent:#7dd3fc; --accent-2:#a78bfa; --cta:#22d3ee; --ok:#34d399; --warn:#f59e0b; --err:#f87171;
  --card:#0f1424; --glass:rgba(255,255,255,0.06); --line:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1200px 700px at 120% 10%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(1000px 600px at 50% 100%, rgba(34,211,238,.15), transparent 60%),
    var(--bg);
  color:var(--ink);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Header */
header{position:sticky; top:0; z-index:50; background:linear-gradient(to bottom, rgba(11,14,23,.9), rgba(11,14,23,.55)); backdrop-filter: blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.3px}
.logo{
  width:36px;height:36px;border-radius:10px;
  background:conic-gradient(from 210deg, #22d3ee, #a78bfa, #22d3ee);
  box-shadow:0 0 24px rgba(125,211,252,.35), inset 0 0 24px rgba(167,139,250,.25);
}
.brand-top{font-size:14px;opacity:.85;letter-spacing:.4px}
.brand-sub{color:var(--muted);font-size:12px}

.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  appearance:none;border:1px solid transparent;border-radius:14px;
  padding:12px 16px;font-weight:700;cursor:pointer;
  background:var(--glass);color:var(--ink);
  transition:.2s ease; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px);border-color:var(--line)}
.btn-cta{background:linear-gradient(90deg, #22d3ee, #a78bfa); color:#0b0e17; border:none}
.btn-cta:disabled{opacity:.55;cursor:not-allowed}
.btn-secondary{border-color:var(--line)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;background:var(--glass)}
h1{font-size:42px;line-height:1.05;margin:12px 0 12px;letter-spacing:.2px}
.gradient{background:linear-gradient(92deg, var(--accent), var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:16px;line-height:1.6;max-width:60ch}

.row{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
@media (max-width:900px){ .row{grid-template-columns:1fr;gap:18px} }

.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:16px; padding:18px}
.panel h3{margin:0 0 12px;font-size:18px}

.hero-card{margin-top:18px;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;padding:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .val{font-size:16px;margin-top:6px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.rowflex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{padding:.2rem .5rem;border-radius:999px;border:1px solid var(--line);background:#0e1526;color:#cfe0ff;font-size:.9rem}
.icon-btn{background:#0e1526;border:1px solid var(--line);border-radius:10px;padding:.35rem .6rem;cursor:pointer}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
table{width:100%;border-collapse:collapse;margin-top:.5rem} th,td{padding:.55rem;border-bottom:1px solid var(--line);text-align:left} th{color:var(--muted)}
.hide{display:none}
.muted{color:var(--muted)}
.main-pad{padding-top:28px}
.mt-0{margin-top:0}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}
.ml-8{margin-left:8px}

footer{border-top:1px solid var(--line);margin-top:36px}
.footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 24px}

/* Toast */
#toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#0b1223;border:1px solid var(--line);padding:10px 14px;border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.25s;z-index:1000
}
#toast.show{opacity:1;pointer-events:auto}
/* ===== Modal (premier pseudo) ===== */
.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(5,8,16,0.6); backdrop-filter: blur(6px);
  z-index:1200;
}
.modal-card{
  width:min(520px,92%); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-row{margin:12px 0}
.modal-row input{
  width:100%; background:#0e1526; color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:16px;
}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
/* Fix: when the modal has "hide", force it to disappear even if .modal sets display:grid */
.modal.hide { 
  display: none !important;
  pointer-events: none;
  opacity: 0;
}
.modal.hide { display: none !important; pointer-events: none; opacity: 0; }
/* Overlay contrôlable par aria-hidden */
.dash-overlay[aria-hidden="true"] { display: none; }
.dash-overlay[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
  z-index: 9999;
}

/* Boutons toujours cliquables */
.dash-actions .btn { pointer-events: auto; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }