:root { --bg:#0f172a; --card:#1e293b; --line:#334155; --txt:#e2e8f0; --muted:#94a3b8;
        --ok:#22c55e; --warn:#f59e0b; --accent:#3b82f6; --accent2:#2563eb; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       background:var(--bg); color:var(--txt); }
a { color:var(--accent); }

/* Barre de tête */
header.top { padding:18px 28px; border-bottom:1px solid var(--line); display:flex;
        align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
header.top h1 { font-size:18px; margin:0; font-weight:600; }
header.top .sub { color:var(--muted); font-size:13px; }
.user { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); }
.btn { display:inline-block; background:var(--accent2); color:#fff; text-decoration:none;
       border:0; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; }
.btn:hover { background:var(--accent); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--txt); }

.wrap { max-width:1100px; margin:0 auto; padding:24px 28px 60px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.card h2 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
           margin:0 0 12px; font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
        padding:4px 10px; border-radius:999px; }
.pill.ok  { background:rgba(34,197,94,.15);  color:var(--ok); }
.pill.off { background:rgba(148,163,184,.15); color:var(--muted); }
.pill.err { background:rgba(245,158,11,.15);  color:var(--warn); }
.dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.stat .n { font-size:24px; font-weight:700; }
.stat .l { font-size:12px; color:var(--muted); }
.section { margin-top:30px; }
.section h2 { font-size:15px; margin:0 0 14px; }
.rows { display:flex; flex-direction:column; gap:10px; }
.row { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px;
       display:flex; align-items:center; justify-content:space-between; gap:14px; }
.row .t { font-weight:600; font-size:14px; }
.row .d { color:var(--muted); font-size:13px; margin-top:2px; }
.badge { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:6px;
         padding:3px 8px; white-space:nowrap; }
code { background:#0b1220; padding:2px 6px; border-radius:5px; font-size:12px; color:#cbd5e1; }
footer { color:var(--muted); font-size:12px; text-align:center; padding:24px; border-top:1px solid var(--line); }

/* Page de connexion */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
             border-radius:14px; padding:30px 28px; }
.login-box h1 { font-size:18px; margin:0 0 4px; }
.login-box p.sub { color:var(--muted); font-size:13px; margin:0 0 22px; }
.login-box label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
.login-box input { width:100%; padding:11px 12px; border-radius:8px; border:1px solid var(--line);
                   background:#0b1220; color:var(--txt); font-size:14px; }
.login-box input:focus { outline:2px solid var(--accent); border-color:transparent; }
.login-box .btn { width:100%; margin-top:22px; padding:12px; }
.alert { background:rgba(245,158,11,.12); color:var(--warn); border:1px solid rgba(245,158,11,.3);
         border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:6px; }