* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; background:#F1F5F9; color:#0F172A; font-size:14px; }
a { color:inherit; text-decoration:none; }
.app { display:flex; min-height:100vh; }
/* ---- sidebar ---- */
.side { width:200px; background:#1E293B; color:#CBD5E1; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; }
.brand { display:flex; align-items:center; gap:8px; padding:18px 16px 14px; border-bottom:1px solid #334155; margin-bottom:10px; }
.bmark { width:24px; height:24px; border-radius:6px; background:#DC2626; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; }
.bname { color:#fff; font-weight:700; font-size:15px; letter-spacing:.5px; }
.nav a { display:flex; justify-content:space-between; padding:10px 16px; font-size:13px; border-left:3px solid transparent; }
.nav a.on { background:#334155; border-left-color:#DC2626; color:#fff; font-weight:600; }
.nav a:hover { background:#283548; }
.suser { margin-top:auto; padding:14px 16px; border-top:1px solid #334155; font-size:12px; }
.suser b { color:#fff; display:block; }
.suser .out { color:#94A3B8; font-size:11px; }
/* ---- contenu ---- */
.main { flex:1; margin-left:200px; padding:20px 24px; }
.hrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.htitle { font-size:19px; font-weight:700; }
.hsub { font-size:12px; color:#64748B; margin-top:3px; }
.card { background:#fff; border:1px solid #E2E8F0; border-radius:10px; margin-bottom:14px; }
.ctitle { font-size:13px; font-weight:700; padding:11px 14px 9px; border-bottom:1px solid #EEF2F6; display:flex; justify-content:space-between; align-items:center; }
.cbody { padding:12px 14px; font-size:13px; }
.grid { display:flex; gap:14px; align-items:flex-start; }
.col { min-width:0; }
.badge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:9px; white-space:nowrap; display:inline-block; }
.b-red { background:#FEE2E2; color:#991B1B; } .b-grn { background:#DCFCE7; color:#166534; }
.b-amb { background:#FEF3C7; color:#92400E; } .b-gry { background:#E2E8F0; color:#475569; }
.b-blu { background:#DBEAFE; color:#1E40AF; }
.btn { font-size:12px; font-weight:600; padding:8px 14px; border-radius:7px; border:1px solid #CBD5E1; color:#334155; background:#fff; cursor:pointer; }
.btn:hover { background:#F8FAFC; }
.btn.dark { background:#0F172A; color:#fff; border-color:#0F172A; }
.btn.red { border-color:#DC2626; color:#DC2626; }
.btn.sm { padding:4px 10px; font-size:11px; }
table.t { width:100%; border-collapse:collapse; font-size:12.5px; }
table.t th { text-align:left; color:#94A3B8; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; padding:9px 14px; border-bottom:1px solid #EEF2F6; }
table.t td { padding:9px 14px; border-bottom:1px solid #F1F5F9; vertical-align:middle; }
.mono { font-family:'SF Mono',Menlo,Consolas,monospace; font-size:12px; }
.mut { color:#64748B; } .mut2 { color:#94A3B8; }
.sdot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }
.ok { background:#16A34A; } .ko { background:#DC2626; } .warn { background:#D97706; }
input, select, textarea { font-size:13px; padding:8px 10px; border:1px solid #CBD5E1; border-radius:7px; width:100%; font-family:inherit; background:#fff; }
label { font-size:11.5px; color:#64748B; display:block; margin:9px 0 4px; }
form.inline { display:inline; }
.met { background:#fff; border:1px solid #E2E8F0; border-radius:10px; padding:13px 16px; flex:1; }
.mlab { font-size:12px; color:#64748B; margin-bottom:4px; }
.mval { font-size:24px; font-weight:700; }
.alert-item { background:#fff; border:1px solid #E2E8F0; border-radius:9px; padding:10px 12px; margin-bottom:8px; display:block; }
.alert-item.on { border:2px solid #2563EB; }
.snapshot { width:100%; border-radius:8px; background:#141B26; display:block; }
.ck { display:flex; gap:10px; padding:8px 14px; border-bottom:1px solid #F4F7FA; font-size:12.5px; align-items:flex-start; }
.notice { background:#FEF3C7; color:#92400E; border-radius:8px; padding:9px 12px; font-size:12px; margin-bottom:12px; }
.danger-strip { background:#FEF2F2; color:#991B1B; border-top:1px solid #FECACA; padding:9px 14px; font-size:12px; }
.chip { font-size:12px; padding:5px 12px; border-radius:14px; border:1px solid #CBD5E1; color:#475569; background:#fff; display:inline-block; }
.chip.on { background:#0F172A; color:#fff; border-color:#0F172A; }
.token { background:#0F172A; color:#fff; border-radius:9px; padding:12px 15px; font-family:Menlo,Consolas,monospace; font-size:15px; letter-spacing:1px; display:flex; justify-content:space-between; align-items:center; }
/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0F172A; }
.login-box { background:#fff; border-radius:14px; padding:34px 36px; width:380px; }
@media (max-width:900px){ .side{display:none} .main{margin-left:0} .grid{flex-direction:column} }