:root{--bg:#040a1c;--bg2:#071230;--panel:#0a1634;--panel2:#0d1d42;--line:#173060;--line2:#1f3d7a;--txt:#eaf1ff;--mut:#8da2cc;--mut2:#5f78a8;--pri:#2f7dff;--pri2:#1659d6;--cy:#16c6ff;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--violet:#8b5cf6;--r:14px;--shadow:0 18px 50px rgba(0,0,0,.45);--grad:linear-gradient(135deg,#2f7dff,#16c6ff)}
svg:not([width]){width:18px;height:18px;flex:none;vertical-align:-3px}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;background:radial-gradient(1100px 600px at 85% -10%,#12327a55 0,transparent 60%),radial-gradient(800px 500px at -10% 110%,#0b2a6a44 0,transparent 60%),var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--cy);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.2px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.3px;color:#fff}.logo img{width:30px;height:30px}.logo b{color:var(--cy);font-weight:800}
button,.btn{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:9px 16px;color:#fff;background:var(--grad);font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:.15s;text-decoration:none!important}
button:hover,.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.sec,button.sec{background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--txt)}.btn.sec:hover,button.sec:hover{background:rgba(47,125,255,.12)}
button.bad,.btn.bad{background:linear-gradient(135deg,#b91c1c,#ef4444)}button.ghost{background:transparent;color:var(--mut);padding:6px 10px}button.sm{padding:5px 10px;font-size:12px;border-radius:8px}
input,select,textarea{font:inherit;color:var(--txt);background:#061029;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;width:100%;outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px #2f7dff33}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--pri)}label{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px;font-weight:600;letter-spacing:.3px}label.chk{display:flex;gap:9px;align-items:center;color:var(--txt);font-size:13.5px;font-weight:500;margin:8px 0;cursor:pointer}
select option{background:#0a1634}table{width:100%;border-collapse:collapse}th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}td{padding:11px 12px;border-bottom:1px solid #112650;vertical-align:middle}tr:hover td{background:#0c1d44}
.shell{display:flex;min-height:100vh}.side{width:244px;flex:none;background:linear-gradient(180deg,#071433,#050d24);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{padding:4px 10px 18px}.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--mut);font-weight:600;margin-bottom:2px;text-decoration:none!important;position:relative}
.nav a svg{width:18px;height:18px;flex:none}.nav a:hover{background:#0f2250;color:#fff}.nav a.on{background:linear-gradient(90deg,#1b4bb866,#1b4bb811);color:#fff;box-shadow:inset 3px 0 0 var(--cy)}.nav .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mut2);padding:16px 12px 6px}
.nav .bdg{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px}.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line);background:#050d24cc;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.search{flex:1;max-width:560px;position:relative}.search input{padding-left:38px;background:#071230}.search svg{position:absolute;left:12px;top:11px;width:17px;color:var(--mut)}.search kbd{position:absolute;right:10px;top:9px;font-size:11px;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;color:var(--mut)}
.user{display:flex;align-items:center;gap:10px;margin-left:auto;cursor:pointer;padding:5px 10px;border-radius:10px;border:1px solid transparent}.user:hover{border-color:var(--line2)}.av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff}
.page{padding:26px;max-width:1500px;width:100%}.ph{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}.ph h1{font-size:25px}.ph p{margin:4px 0 0;color:var(--mut)}.ph .sp{flex:1}
.card{background:linear-gradient(180deg,#0b1a3ccc,#08132ccc);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 8px 30px #0004}.card h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.card h3 .r{margin-left:auto;font-size:12px;font-weight:500}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.kpi .n{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.1}.kpi .l{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:1px}.kpi .s{font-size:12px;margin-top:6px;color:var(--mut)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;border:1px solid var(--line2);color:var(--mut);white-space:nowrap}.pill.ok{color:#7ee2a3;border-color:#14532d;background:#052e1655}.pill.bad{color:#ff9b9b;border-color:#7f1d1d;background:#450a0a55}.pill.warn{color:#fcd34d;border-color:#78350f;background:#451a0355}.pill.info{color:#8ecbff;border-color:#1e3a8a;background:#17255455}.pill.vio{color:#c4b5fd;border-color:#4c1d95;background:#2e106555}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--mut2)}.dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}.dot.off{background:var(--bad)}
.bar{height:7px;border-radius:9px;background:#10244f;overflow:hidden;min-width:60px}.bar i{display:block;height:100%;border-radius:9px;background:var(--grad)}.bar.w i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.bar.c i{background:linear-gradient(90deg,#dc2626,#f87171)}
.hint{color:var(--mut);font-size:13px;line-height:1.55}.mut{color:var(--mut)}.mono{font-family:ui-monospace,Consolas,monospace}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}.right{margin-left:auto}
.empty{text-align:center;color:var(--mut);padding:40px 10px}.empty svg{width:42px;opacity:.5;margin-bottom:8px}
.ring{--p:80;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--c,#22c55e) calc(var(--p)*1%),#10244f 0);display:grid;place-items:center;position:relative;flex:none}.ring::after{content:"";position:absolute;inset:12px;background:#08132c;border-radius:50%}.ring b{position:relative;z-index:1;font-size:30px}.ring small{position:relative;z-index:1;display:block;text-align:center;color:var(--mut);font-size:11px}
.modalbg{position:fixed;inset:0;background:#02061299;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px;overflow:auto}.modal{background:linear-gradient(180deg,#0d1f48,#081330);border:1px solid var(--line2);border-radius:18px;padding:24px;width:100%;max-width:560px;box-shadow:var(--shadow);max-height:92vh;overflow:auto}.modal.lg{max-width:860px}.modal h2{font-size:20px;margin-bottom:6px}
.toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:99}.toast div{background:#0d1f48;border:1px solid var(--line2);border-left:4px solid var(--pri);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);max-width:380px;animation:in .25s}.toast .e{border-left-color:var(--bad)}.toast .s{border-left-color:var(--ok)}@keyframes in{from{transform:translateY(12px);opacity:0}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}.tabs a{padding:9px 14px;color:var(--mut);font-weight:600;border-bottom:2px solid transparent;cursor:pointer;text-decoration:none!important}.tabs a.on{color:#fff;border-color:var(--cy)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 12px;border-radius:99px;border:1px solid var(--line2);color:var(--mut);cursor:pointer;font-size:12.5px;font-weight:600}.chip.on{background:#1a4bb855;color:#fff;border-color:var(--pri)}
.dev{display:flex;gap:14px;align-items:center;padding:14px;border-radius:12px;border:1px solid var(--line);background:#091837;cursor:pointer;transition:.15s}.dev:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:0 10px 26px #0006}.dev .ic{width:44px;height:44px;border-radius:12px;background:#10275a;display:grid;place-items:center;flex:none;color:var(--cy)}.dev .ic svg{width:22px}
.dev b{display:block;font-size:14.5px}.dev small{color:var(--mut)}.devs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.tl{border-left:2px solid var(--line2);margin-left:6px;padding-left:16px}.tl div{position:relative;padding:5px 0}.tl div::before{content:"";position:absolute;left:-22px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 3px #08132c}.tl small{color:var(--mut);margin-right:8px;font-family:ui-monospace,monospace}
.codebox{font-family:ui-monospace,Consolas,monospace;background:#050e26;border:1px dashed var(--line2);border-radius:10px;padding:12px;word-break:break-all;font-size:13px;color:#9fe3ff}
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.login .l{padding:60px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(700px 500px at 20% 10%,#1747a966,transparent 60%),linear-gradient(160deg,#071a46,#030817)}.login .r{display:flex;align-items:center;justify-content:center;padding:30px}.login .box{width:100%;max-width:410px}
.login h1{font-size:34px;line-height:1.15;margin:26px 0 12px}.login .feat{display:grid;gap:12px;margin-top:26px}.login .feat div{display:flex;gap:12px;color:#b9cbf0;align-items:flex-start}.login .feat svg{width:20px;color:var(--cy);flex:none;margin-top:2px}
.err{color:#ff9b9b;font-size:13px;margin-top:10px;min-height:18px}.ok-t{color:#7ee2a3}
/* visualizador */
.vw{position:fixed;inset:0;background:#02050f;z-index:40;display:flex;flex-direction:column}.vbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(180deg,#0b1a3c,#071230);border-bottom:1px solid var(--line2);flex-wrap:wrap}
.vbar .t{font-weight:700}.vbar .stats{color:var(--mut);font-size:12px;margin-left:8px}.vstage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000;min-height:0}
.vstage canvas{max-width:100%;max-height:100%;cursor:crosshair;outline:none;background:#000}.vstate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(600px 400px at 50% 40%,#12327a55,#02050f);text-align:center;padding:20px}
.vstate .spin{width:46px;height:46px;border:4px solid #173060;border-top-color:var(--cy);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.vpanel{position:absolute;right:0;top:0;bottom:0;width:380px;background:#071230f2;border-left:1px solid var(--line2);padding:14px;overflow:auto;backdrop-filter:blur(8px)}
.term{background:#030a1c;border:1px solid var(--line);border-radius:8px;padding:10px;height:260px;overflow:auto;white-space:pre-wrap;font:12.5px/1.45 ui-monospace,Consolas,monospace;color:#b8f5c8}
.fl{max-height:300px;overflow:auto}.fl div{display:flex;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;align-items:center}.fl div:hover{background:#12285a}.fl small{margin-left:auto;color:var(--mut)}
.ibtn{width:34px;height:34px;padding:0;justify-content:center;border-radius:9px}.ibtn svg{width:17px}
.sparkline{display:flex;align-items:flex-end;gap:6px;height:60px}.sparkline i{flex:1;background:var(--grad);border-radius:5px 5px 0 0;min-height:3px;opacity:.9}
.cmdk{position:fixed;inset:0;background:#02061288;backdrop-filter:blur(4px);z-index:70;display:flex;justify-content:center;padding-top:12vh}.cmdk .bx{width:100%;max-width:620px;background:#0a1634;border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);height:fit-content;overflow:hidden}.cmdk input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 18px;font-size:16px;background:transparent}.cmdk .it{padding:11px 18px;cursor:pointer;display:flex;gap:10px;align-items:center}.cmdk .it.on,.cmdk .it:hover{background:#12307a}.cmdk .lbl{padding:8px 18px;font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:1px}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g21,.g12,.g3{grid-template-columns:1fr}.login{grid-template-columns:1fr}.login .l{display:none}}
@media(max-width:820px){.side{position:fixed;left:-260px;z-index:30;transition:.2s}.side.open{left:0}.page{padding:16px}.g4,.g2{grid-template-columns:1fr}.top{padding:12px 14px}.vpanel{width:100%}}
.mnu{display:none}@media(max-width:820px){.mnu{display:inline-flex}}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#1a3a7a;border-radius:9px}