:root{
  --violet:#9146ff;--violet2:#772ce8;--violet3:#5c16c5;--voile:rgba(145,70,255,.13);
  --fond:#0e0e10;--pan:#161619;--pan2:#1d1d21;--sur:#232328;--bord:#2b2b31;--bord2:#3a3a42;
  --t1:#f2f2f5;--t2:#9b9ba5;--t3:#6e6e78;
  --live:#eb0400;--ok:#00c88c;--warn:#e0a63c;--bad:#d9765a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fond);color:var(--t1);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit;text-align:left}
button:disabled{opacity:.5;cursor:not-allowed}
a{color:#c4a3ff}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:3px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2f2f36;border-radius:5px;border:2px solid var(--pan)}
.num{font-variant-numeric:tabular-nums}
.sp{flex:1}

/* champs */
label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:5px;font-weight:500}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;background:var(--pan2);border:1px solid var(--bord);border-radius:6px;
  padding:9px 11px;color:var(--t1);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--violet)}
.btn{background:var(--violet);color:#fff;font-weight:600;padding:10px 18px;border-radius:6px;text-align:center;display:inline-block}
.btn:hover:not(:disabled){background:var(--violet2)}
.btn.gh{background:none;border:1px solid var(--bord2);color:var(--t1);font-weight:500}
.btn.gh:hover:not(:disabled){background:var(--pan2);border-color:var(--violet)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.rouge{background:none;border:1px solid rgba(217,118,90,.4);color:var(--bad);font-weight:500}
.btn.rouge:hover{background:rgba(217,118,90,.1)}

/* barre haute */
.bar{display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--pan);border-bottom:1px solid var(--bord)}
.lg{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.lg img{width:22px;height:22px;border-radius:6px;display:block}
.nav{display:flex;gap:2px}
.nav a{padding:6px 13px;border-radius:6px;font-size:13.5px;color:var(--t2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--pan2);color:var(--t1)}
.nav a.on{background:var(--voile);color:var(--t1)}
.pill{font-size:11.5px;font-weight:600;color:var(--t2);background:var(--pan2);border:1px solid var(--bord);padding:4px 10px;border-radius:5px}
.pill.pro{color:#c4a3ff;border-color:var(--violet)}
.pill.abonne{color:var(--ok);border-color:var(--ok)}
.av{width:28px;height:28px;border-radius:50%;background:var(--violet3);display:grid;place-items:center;font-size:11px;font-weight:600;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* blocs */
.carte{background:var(--pan);border:1px solid var(--bord);border-radius:8px}
.sh{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.msg{padding:10px 12px;border-radius:6px;font-size:13px;margin-bottom:14px}
.msg.err{background:rgba(217,118,90,.12);border:1px solid rgba(217,118,90,.35);color:#eda98f}
.msg.ok{background:rgba(0,200,140,.1);border:1px solid rgba(0,200,140,.3);color:#79dcbb}
.vide{padding:26px 16px;text-align:center;color:var(--t3);font-size:13px}

/* tableaux */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--bord);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid rgba(43,43,49,.6);vertical-align:middle}
tr:hover td{background:var(--pan)}
.tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:4px;background:var(--sur);color:var(--t2);white-space:nowrap}
.tag.pro{color:#c4a3ff;background:var(--voile)}
.tag.ok{color:var(--ok);background:rgba(0,200,140,.1)}
.tag.bad{color:var(--bad);background:rgba(217,118,90,.12)}
.tag.adm{color:var(--warn);background:rgba(224,166,60,.12)}