:root{--navy:#0a2540;--navy2:#11365d;--gold:#bda06f;--bg:#0c1622;--panel:#0f1d2e;--text:#e6ecf3;--muted:#8aa0b8;}
*{box-sizing:border-box} body{margin:0;font-family:Nunito,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);}
.topbar{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:linear-gradient(90deg,var(--navy),var(--navy2));border-bottom:2px solid var(--gold);}
.topbar .logo{height:30px} .brand{font-size:18px;letter-spacing:.5px} .brand b{color:var(--gold)}
.ver{color:var(--muted);font-size:12px} .summary{margin-left:14px;font-size:13px;color:var(--muted)}
.spacer{flex:1} .user{color:var(--muted);font-size:13px} .logout{color:var(--gold);text-decoration:none;font-size:13px;margin-left:10px}
.b-ok{color:#2ecc71} .b-warn{color:#f1c40f} .b-down{color:#e74c3c;font-weight:700}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%}
.cell-ok{color:var(--text)} .cell-warn{color:#f1c40f} .cell-bad{color:#e74c3c;font-weight:700}
.row-down{background:rgba(231,76,60,.14)!important} .row-warn{background:rgba(241,196,15,.10)!important}
#grid{font-size:13px}
.login-page{display:flex;align-items:center;justify-content:center;height:100vh;background:radial-gradient(1200px 600px at 50% -10%,var(--navy2),var(--bg));}
.login-card{background:var(--panel);border:1px solid rgba(189,160,111,.3);border-radius:14px;padding:34px 30px;width:320px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.login-logo{height:48px;margin:0 auto 4px} .login-card h1{margin:0 0 8px;text-align:center;font-size:20px;font-weight:700}
.login-card h1::after{content:'';display:block;width:40px;height:3px;background:var(--gold);margin:8px auto 0;border-radius:2px}
.login-card input{padding:11px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:#0a1626;color:var(--text);font-size:14px}
.login-card input:focus{outline:none;border-color:var(--gold)}
.login-card button{padding:11px;border:0;border-radius:9px;background:var(--gold);color:#1a1205;font-weight:700;font-size:15px;cursor:pointer}
.login-card button:hover{background:#ccb27e} .err{background:rgba(231,76,60,.15);color:#ff8b7a;padding:8px 10px;border-radius:8px;font-size:13px;text-align:center}
.q{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0a1626;color:var(--text);font-size:13px;width:160px;margin-right:6px}
.q:focus{outline:none;border-color:var(--gold)}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;color:#fff;font-size:11px;font-weight:700}
.muted{color:var(--muted)}
.tabulator-row{cursor:pointer}
.drawer{position:fixed;top:0;right:-440px;width:420px;height:100vh;background:var(--panel);border-left:2px solid var(--gold);transition:right .2s;z-index:50;overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.5)}
.drawer.open{right:0}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.ov.open{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,var(--navy),var(--navy2));font-size:16px;border-bottom:1px solid rgba(189,160,111,.3)}
.close{cursor:pointer;color:var(--muted)} .close:hover{color:#fff}
.drawer-body{padding:14px 16px} .drawer-body h4{margin:16px 0 6px;color:var(--gold);font-size:13px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:4px}
.kv{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05)} .kv b{color:var(--muted);font-weight:600}
.metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.mt{background:#0a1626;border-radius:8px;padding:8px;text-align:center} .mt span{display:block;color:var(--muted);font-size:11px} .mt b{font-size:16px}
.svcs{display:flex;flex-wrap:wrap;gap:5px} .svcb{font-size:11px;padding:2px 7px;border-radius:6px} .svc-ok{background:rgba(46,204,113,.18);color:#7fe6a8} .svc-bad{background:rgba(231,76,60,.22);color:#ff9b8c;font-weight:700}
.note-bad{margin-top:8px;background:rgba(241,196,15,.12);color:#f1c40f;padding:6px 10px;border-radius:8px;font-size:13px}
.hist .hl{font-size:12px;color:var(--muted);margin:4px 0;display:flex;align-items:center;gap:8px} .spark{background:#0a1626;border-radius:6px}
.acts{display:flex;flex-direction:column;gap:8px} .actrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acts select,.acts input{background:#0a1626;color:var(--text);border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:6px 8px;font-size:12px}
.acts button{background:var(--navy2);color:#fff;border:0;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer} .acts button:hover{background:#16447a}
.acts button.danger{background:#7a2233} .acts button.danger:hover{background:#9c2a40}
.actres{margin-top:6px} .actres pre{background:#0a1626;padding:8px;border-radius:7px;font-size:11px;white-space:pre-wrap;max-height:160px;overflow:auto;margin:0}
.actres pre.ok{border-left:3px solid #2ecc71} .actres pre.bad{border-left:3px solid #e74c3c}
.audit{width:100%;border-collapse:collapse;font-size:12px} .audit td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top} .aud-res{color:var(--muted);font-family:monospace;font-size:11px}
.captcha-row{display:flex;align-items:center;gap:10px} .cap-q{background:#0a1626;border:1px dashed rgba(189,160,111,.5);border-radius:8px;padding:10px 12px;font-weight:700;letter-spacing:1px;color:var(--gold);white-space:nowrap;font-size:15px}
.captcha-row input{flex:1}