*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#07090f;--bg2:#0d1420;--card:#101724;
  --b:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.14);
  --t:#dde6f5;--t2:#6d85a3;--t3:#334155;
  --gr:#22c55e;--bl:#3b82f6;--or:#f59e0b;
  --rd:#ef4444;--cy:#06b6d4;--pu:#a855f7;
}
body{background:var(--bg);color:var(--t);font-family:system-ui,-apple-system,sans-serif;font-size:13px;min-height:100vh}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:4px}
.hdr{background:linear-gradient(180deg,#0d1828,#0a1220);border-bottom:1px solid var(--b);padding:0 24px;position:sticky;top:0;z-index:200;box-shadow:0 4px 24px rgba(0,0,0,.4)}
.hdr-top{display:flex;align-items:center;justify-content:space-between;padding:13px 0 10px}
.hdr-l{display:flex;align-items:center;gap:12px}
.logo-mark-svg{width:32px;height:32px;flex-shrink:0;display:block;border-radius:8px}
.brand h1{font-size:17px;font-weight:700;letter-spacing:-.3px}
.brand h1 span{color:var(--bl)}
.brand p{font-size:10px;color:var(--t2);margin-top:1px}
.hdr-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid;white-space:nowrap}
.chip.alert{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--rd);animation:pulse 2.5s infinite}
.chip.info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2);color:var(--bl)}
.chip.active-filter{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:var(--or)}
.chip.demo{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.3);color:var(--pu)}
.back-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--b);background:transparent;color:var(--t2);cursor:pointer;text-decoration:none;transition:all .18s}
.back-btn:hover{border-color:var(--b2);color:var(--t)}
.home-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--b);background:transparent;color:var(--t2);text-decoration:none;transition:all .18s}
.home-btn:hover{border-color:rgba(59,130,246,.4);color:var(--t)}
.pdf-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.08);color:#22c55e;cursor:pointer;transition:all .18s}
.pdf-btn:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.5)}
.pdf-btn:disabled{opacity:.5;cursor:not-allowed}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-brand-stack{line-height:1.2}
.nav-brand-name{font-size:13px;font-weight:700;color:var(--t)}
.nav-brand-name em{color:var(--bl);font-style:normal}
.nav-brand-tag{font-size:9px;color:var(--t2);letter-spacing:.6px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.fbar{display:flex;align-items:center;gap:8px;padding:9px 0 12px;flex-wrap:wrap;border-top:1px solid var(--b)}
.flabel{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--t3);flex-shrink:0}
.fsep{width:1px;height:22px;background:var(--b);margin:0 2px;flex-shrink:0}
.fbtn{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--b);background:var(--card);color:var(--t2);cursor:pointer;transition:all .18s;white-space:nowrap;user-select:none}
.fbtn:hover{border-color:var(--b2);color:var(--t)}
.fbtn.on.g0{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.5);color:#93c5fd}
.fbtn.on.g1{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:#86efac}
.fbtn.on.g2{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:#fcd34d}
.fbtn.on.g3{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.4);color:#67e8f9}
.fbtn.on.g4{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.4);color:#c4b5fd}
.fbtn.on.gall{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.4);color:#c4b5fd}
.fdate-wrap{display:flex;align-items:center;gap:6px}
.fdate-wrap input[type=date]{background:var(--card);border:1px solid var(--b2);border-radius:7px;color:var(--t);font-size:11px;padding:4px 8px;outline:none;cursor:pointer;color-scheme:dark;height:28px}
.fdate-wrap input[type=date]:hover{border-color:var(--bl)}
.fdate-wrap input[type=date]:focus{border-color:var(--bl);box-shadow:0 0 0 2px rgba(59,130,246,.2)}
.fdate-wrap input[type=date].active-range{border-color:var(--cy);color:var(--cy)}
.fdate-wrap input[type=date]:disabled{opacity:.35;cursor:not-allowed}
.farr{font-size:10px;color:var(--t3)}
.frange span.active-val{color:var(--or)}
.placa-wrap{position:relative;flex-shrink:0}
.placa-trigger{display:flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--b);background:var(--card);color:var(--t2);cursor:pointer;transition:all .18s;user-select:none;white-space:nowrap}
.placa-trigger:hover{border-color:var(--b2);color:var(--t)}
.placa-trigger.has-filter{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.4);color:#67e8f9}
.placa-trigger .arrow{font-size:8px;transition:transform .2s}
.placa-trigger.open .arrow{transform:rotate(180deg)}
.placa-badge{background:var(--cy);color:#07090f;border-radius:10px;font-size:9px;font-weight:800;padding:1px 5px;min-width:16px;text-align:center}
.placa-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:280px;background:#0f1e30;border:1px solid var(--b2);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.7);z-index:500;overflow:hidden;display:none}
.placa-dropdown.open{display:block;animation:dropIn .18s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pd-head{padding:10px 12px 8px;border-bottom:1px solid var(--b);display:flex;gap:8px;align-items:center}
.pd-search{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--b);color:var(--t);border-radius:7px;padding:5px 9px;font-size:11px;outline:none}
.pd-search:focus{border-color:var(--bl)}
.pd-actions{display:flex;gap:6px}
.pd-btn{padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600;border:1px solid;cursor:pointer;transition:all .15s;background:transparent;white-space:nowrap}
.pd-btn.sel-all{border-color:rgba(34,197,94,.4);color:var(--gr)}
.pd-btn.sel-all:hover{background:rgba(34,197,94,.1)}
.pd-btn.sel-none{border-color:var(--b);color:var(--t2)}
.pd-btn.sel-none:hover{border-color:rgba(239,68,68,.4);color:var(--rd)}
.pd-list{max-height:220px;overflow-y:auto;padding:6px 0}
.pd-item{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;transition:background .12s}
.pd-item:hover{background:rgba(255,255,255,.04)}
.pd-cb{width:14px;height:14px;border-radius:4px;border:1px solid var(--b2);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:9px;color:#fff;font-weight:700}
.pd-item.checked .pd-cb{background:var(--bl);border-color:var(--bl)}
.pd-item.anomaly .pd-name{color:var(--rd)}
.pd-name{font-size:11px;font-family:monospace;flex:1}
.pd-gest{font-size:10px;color:var(--t3)}
.pd-footer{padding:8px 12px;border-top:1px solid var(--b);display:flex;justify-content:space-between;align-items:center}
.pd-count{font-size:10px;color:var(--t2)}
.pd-count b{color:var(--cy)}
.fstatus-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.active-tag{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.08);color:var(--or);cursor:pointer;transition:all .15s}
.active-tag:hover{background:rgba(245,158,11,.18)}
.active-tag .xtag{opacity:.7;font-size:9px}
.fcount-info{font-size:10px;color:var(--t3);white-space:nowrap}
.fcount-info b{color:var(--cy)}
.fclear-all{display:none;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:10px;font-weight:600;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.08);color:var(--rd);cursor:pointer;transition:all .18s;white-space:nowrap}
.fclear-all:hover{background:rgba(239,68,68,.2);border-color:var(--rd)}
.fclear-all.visible{display:flex}
.nav{background:var(--bg2);border-bottom:1px solid var(--b);padding:0 24px;display:flex;overflow-x:auto;gap:2px}
.tab{padding:11px 16px;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .18s;user-select:none}
.tab:hover{color:var(--t)}
.tab.on{color:var(--bl);border-bottom-color:var(--bl)}
.page{display:none;padding:20px 24px 48px;animation:fi .25s ease}
.page.on{display:block}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.sec{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--t3);margin:24px 0 10px;display:flex;align-items:center;gap:8px}
.sec:first-child{margin-top:0}
.sec::after{content:'';flex:1;height:1px;background:var(--b)}
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.kc{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;transition:all .2s}
.kc:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.kc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:12px 12px 0 0}
.kc.gr::before{background:linear-gradient(90deg,var(--gr),transparent)}
.kc.bl::before{background:linear-gradient(90deg,var(--bl),transparent)}
.kc.or::before{background:linear-gradient(90deg,var(--or),transparent)}
.kc.rd::before{background:linear-gradient(90deg,var(--rd),transparent)}
.kc.cy::before{background:linear-gradient(90deg,var(--cy),transparent)}
.kc.pu::before{background:linear-gradient(90deg,var(--pu),transparent)}
.kl{font-size:9px;color:var(--t2);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.kv{font-size:20px;font-weight:700;margin:4px 0 2px;letter-spacing:-.4px;transition:all .3s}
.kv.gr{color:var(--gr)}.kv.bl{color:var(--bl)}.kv.or{color:var(--or)}
.kv.rd{color:var(--rd)}.kv.cy{color:var(--cy)}.kv.pu{color:var(--pu)}
.ks{font-size:10px;color:var(--t3)}
.ki{position:absolute;top:12px;right:12px;font-size:17px;opacity:.4}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:8px}
.cg2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:8px}
.cc{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:16px 18px;transition:border .2s}
.cc:hover{border-color:var(--b2)}
.cc.full{grid-column:1/-1}
.ct{font-size:12px;font-weight:600;color:var(--t)}
.ci{font-size:10px;color:var(--t2);margin:3px 0 12px;line-height:1.5}
.hi{color:var(--or);font-weight:600}.good{color:var(--gr);font-weight:600}.bad{color:var(--rd);font-weight:600}
.gg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.gc{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:15px;transition:all .2s}
.gn{font-size:12px;font-weight:600;margin-bottom:8px}
.gs{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--b)}
.gs:last-child{border-bottom:none}
.gsl{font-size:10px;color:var(--t2)}.gsv{font-size:11px;font-weight:600;font-family:monospace}
.ag{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.ac{border:1px solid;border-radius:10px;padding:13px 15px;display:flex;gap:10px}
.ac.rd{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.05)}
.ac.or{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05)}
.ac.bl{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.05)}
.ai{font-size:16px;margin-top:1px;flex-shrink:0}
.at{font-size:12px;font-weight:600;margin-bottom:2px}
.ac.rd .at{color:var(--rd)}.ac.or .at{color:var(--or)}.ac.bl .at{color:var(--bl)}
.ad{font-size:10px;color:var(--t2);line-height:1.5}
.ri{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--b)}
.ri:last-child{border-bottom:none}
.rn{font-size:10px;color:var(--t3);font-weight:700;min-width:15px;text-align:center}
.rp{font-family:monospace;font-size:11px;color:var(--cy);font-weight:600;min-width:60px}
.rg{font-size:10px;color:var(--t2);min-width:54px}
.rb{flex:1;height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.rf{height:100%;border-radius:2px}
.rv{font-size:11px;font-family:monospace;min-width:78px;text-align:right;color:var(--t)}
.ab{background:rgba(239,68,68,.1);color:var(--rd);font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;border:1px solid rgba(239,68,68,.3)}
.tw{overflow-x:auto;max-height:520px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:11px}
th{background:var(--bg2);color:var(--t2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:left;border-bottom:1px solid var(--b);white-space:nowrap;position:sticky;top:0;z-index:5;cursor:pointer;user-select:none}
th:hover{color:var(--t)}
td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--t)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.num{text-align:right;font-family:monospace}
.sw{display:flex;align-items:center;gap:5px}
.sb{flex:1;height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.sf{height:100%;border-radius:2px}
.sn{font-size:10px;font-family:monospace;min-width:24px;text-align:right}
.tb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ti{background:var(--card);border:1px solid var(--b);color:var(--t);border-radius:7px;padding:6px 11px;font-size:11px;width:210px;outline:none;transition:border .15s}
.ti:focus{border-color:var(--bl)}
.ts{background:var(--card);border:1px solid var(--b);color:var(--t);border-radius:7px;padding:6px 11px;font-size:11px;outline:none}
.tc{font-size:10px;color:var(--t2)}
.overlay{position:fixed;inset:0;z-index:100;display:none}
.overlay.on{display:block}
footer{text-align:center;padding:16px;color:var(--t3);font-size:10px;border-top:1px solid var(--b);background:var(--bg2)}