/* StreamHub — tema Tabler (Tabler v1.7.3, MIT). Camada-ponte: mapeia as variáveis do painel
   para os tokens Tabler na paleta da marca (navy/preto, azul #1ea7ff/#0a84ff, branco/prata). */
:root,[data-theme=dark]{color-scheme:dark;
 --primary:#0a84ff;--primary-h:#1ea7ff;--success:#2fb344;--info:#1ea7ff;--warning:#f59f00;--danger:#d63939;--orange:#f76707;--cyan:#22d3ee;
 --bg:#060b16;--bg2:#0a1222;--card:#0d1729;--card2:#111e35;--line:rgba(30,167,255,.13);--line2:rgba(30,167,255,.24);
 --tx:#c9d6e8;--hd:#f4f8fd;--mu:#8ea2bd;--mu2:#62758f;
 --side:#050a14;--side-tx:#a9bad1;--side-hd:#5d7190;--side-on:#ffffff;--top:rgba(8,14,28,.92);--inp:#0a1426;--inpb:rgba(30,167,255,.22);--th:#0f1c33;
 --ac:#1ea7ff;--ac2:#0a84ff;--grad:linear-gradient(135deg,#0a84ff,#1ea7ff);--ok:#2fb344;--warn:#f59f00;--hi:#f76707;--bad:#ff5c5c;--r:8px;
 --glow:0 0 0 1px rgba(30,167,255,.18),0 0 18px -4px rgba(30,167,255,.45);
 --sh:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(30,167,255,.06);
 --body-bg:#060b16;--bg-surface:#0d1729;--bg-surface-secondary:#111e35;--border-color:rgba(30,167,255,.13);--body-color:#c9d6e8;--link-color:#1ea7ff;
 --font-sans-serif:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
[data-theme=light]{color-scheme:light;
 --primary:#0a84ff;--primary-h:#066fd1;--info:#0a84ff;--cyan:#0891b2;
 --bg:#f3f6fb;--bg2:#e9eff7;--card:#ffffff;--card2:#f6f9fd;--line:#e1e8f2;--line2:#cfd9e7;
 --tx:#3a4a60;--hd:#0b1426;--mu:#64748b;--mu2:#8a98ab;
 --side:#060b16;--side-tx:#a9bad1;--side-hd:#5d7190;--side-on:#ffffff;--top:rgba(255,255,255,.94);--inp:#ffffff;--inpb:#d3dce8;--th:#f1f5fa;
 --ac:#0a84ff;--ac2:#066fd1;--grad:linear-gradient(135deg,#0a84ff,#1ea7ff);--r:8px;
 --glow:0 0 0 1px rgba(10,132,255,.15);--sh:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.04);
 --body-bg:#f3f6fb;--bg-surface:#fff;--border-color:#e1e8f2;--body-color:#3a4a60}
html,body{background:var(--bg)}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;font-size:13.5px;letter-spacing:-.003em}
body::before{background:radial-gradient(1100px 600px at 10% -15%,rgba(10,132,255,.14),transparent 60%),radial-gradient(900px 520px at 105% 0%,rgba(30,167,255,.08),transparent 60%)!important}
[data-theme=light] body::before{background:radial-gradient(1000px 500px at 10% -15%,rgba(10,132,255,.07),transparent 60%)!important}
h1,h2,h3,h4,.card h3,header h1{font-family:inherit!important;color:var(--hd);letter-spacing:-.01em}
.card h3{font-size:14px;font-weight:600}
.card h3 .ic,.kcard .kico .ic{color:var(--ac)}
/* sidebar — Tabler navbar-vertical dark */
aside{background:linear-gradient(180deg,#060d1c 0%,#040811 100%)!important;border-right:1px solid rgba(30,167,255,.12)!important;box-shadow:none!important}
.brand{padding:14px 18px!important;justify-content:center!important;border-bottom:1px solid rgba(30,167,255,.10)}
.blogo{height:56px!important;width:auto;filter:drop-shadow(0 0 10px rgba(30,167,255,.35))}
#nav a{color:var(--side-tx)!important;font-weight:500;padding:9px 20px;margin:1px 10px;border-radius:6px;font-size:13px}
#nav a .ic{color:#6f86a6;opacity:1}
#nav a:hover{background:rgba(30,167,255,.08)!important;color:#fff!important}#nav a:hover .ic{color:#1ea7ff}
#nav a.on{background:linear-gradient(90deg,rgba(10,132,255,.22),rgba(30,167,255,.06))!important;color:#fff!important;box-shadow:inset 3px 0 0 #1ea7ff,0 0 16px -6px rgba(30,167,255,.6)!important}
#nav a.on .ic{color:#1ea7ff!important}
#nav .nsec,.nsec{color:var(--side-hd)!important;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;font-weight:600}
.sidefoot{border-top:1px solid rgba(30,167,255,.10)}
.sidefoot,#clock{color:var(--side-tx)}
/* topbar */
header{background:var(--top)!important;backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
#themebtn .ic{width:18px;height:18px}
/* cards — Tabler card */
.card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important}
.card .card,.card.inner{background:var(--card2)!important;box-shadow:none!important}
.kcard{position:relative;overflow:hidden}
.kcard::after{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,rgba(30,167,255,.65),transparent);pointer-events:none}
[data-theme=light] .kcard::after{opacity:.5}
.kcard .kico{background:rgba(30,167,255,.12)!important;color:#1ea7ff!important;box-shadow:var(--glow)}
.kpi,.kcard b,.kcard .kv{color:var(--hd)}
/* tables — Tabler table */
th{background:var(--th)!important;color:var(--mu)!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.04em!important;border-bottom:1px solid var(--line)!important}
td{border-color:var(--line)!important}
tbody tr:hover{background:rgba(30,167,255,.05)!important}
/* forms */
input,select,textarea{background:var(--inp)!important;border:1px solid var(--inpb)!important;border-radius:6px!important;color:var(--hd)!important}
input:focus,select:focus,textarea:focus{border-color:#1ea7ff!important;box-shadow:0 0 0 .2rem rgba(30,167,255,.25)!important;outline:0}
/* buttons — Tabler btn-primary / ghost */
button{border-radius:6px!important;font-family:inherit!important;font-weight:500}
button:not(.ghost):not(.danger):not(.chip):not([class*=mp]):hover{box-shadow:0 0 14px -2px rgba(30,167,255,.55)}
button.ghost{border:1px solid var(--line2)!important;color:var(--tx)!important}
button.ghost:hover{background:rgba(30,167,255,.10)!important;color:var(--hd)!important;border-color:rgba(30,167,255,.45)!important}
aside button.ghost{color:var(--side-tx)!important}
.tabs{background:var(--card2)!important;border:1px solid var(--line)!important;border-radius:8px!important}
.tabs button.on,.chip.on{background:rgba(10,132,255,.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(30,167,255,.45)}
[data-theme=light] .tabs button.on,[data-theme=light] .chip.on{color:#0a4fa3!important}
.chip{border:1px solid var(--line2)!important;border-radius:999px!important}
.tag,.badge{border-radius:4px;font-weight:600}
a,.lnk{color:#1ea7ff}[data-theme=light] a,[data-theme=light] .lnk{color:#066fd1}
.banner.info{background:rgba(30,167,255,.08)!important;border:1px solid rgba(30,167,255,.25)!important;color:var(--tx)!important}
code,pre.log{background:#071022!important;border:1px solid var(--line)}
[data-theme=light] code,[data-theme=light] pre.log{background:#eef3f9!important}
#bnav{background:rgba(5,10,20,.96)!important;border-top:1px solid rgba(30,167,255,.15)!important}
#bnav a.on,#bnav a.on .ic{color:#1ea7ff!important}
.toast{border:1px solid rgba(30,167,255,.3);box-shadow:var(--glow)}
.modal .card{box-shadow:0 20px 60px rgba(0,0,0,.6),var(--glow)!important}
.leaflet-container,.map{background:#071022}
/* login — Tabler page-center + badge splash */
#login{background:radial-gradient(800px 500px at 50% 0%,rgba(10,132,255,.18),transparent 70%),var(--bg)}
.loginbox{border:1px solid rgba(30,167,255,.22)!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),var(--glow)!important;border-radius:12px!important}
.loginbox::before{content:'Bem-vindo ao StreamHub'!important;background:linear-gradient(135deg,rgba(10,132,255,.25),rgba(30,167,255,.08))!important;color:#e8f4ff!important}
[data-theme=light] .loginbox::before{color:#0a4fa3!important}
.llogo{background:transparent!important}
.llogo img{height:112px!important;width:auto;filter:drop-shadow(0 0 18px rgba(30,167,255,.4))}
.plogo img{height:80px!important}
::selection{background:rgba(30,167,255,.35)}
*{scrollbar-color:rgba(30,167,255,.3) transparent}
@media(max-width:860px){.blogo{height:44px!important}.llogo img{height:88px!important}}
.brand{height:auto!important;min-height:84px;background:transparent!important}
@media(max-width:860px){#view>*,#view .card{min-width:0;max-width:100%}.bmd,.cft,#dbm,#edt{max-width:100%;min-width:0;overflow-x:auto}.bmh{flex-wrap:wrap;min-width:0}.bmh>*{min-width:0}}
@media(max-width:860px){.bchips,.bpills{flex-wrap:wrap}.bchip{max-width:100%;white-space:normal;overflow-wrap:anywhere}}
/* dashboard v4: grade responsiva de largura total (16/24) */
#view>.grid.kp,#hosts,.dtop,.dtop>.card,#dmapa,.g2.dash{width:100%;align-self:stretch}
.grid.kp#kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:stretch}
#kpis>.card{height:100%;margin:0;display:flex;flex-direction:column}
#kpis .kbrk{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.45}
#kpis .kbrk>span{overflow:hidden;text-overflow:ellipsis}
#hosts.srvg{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:24px;align-items:stretch;margin:0}
#hosts>.srvc{height:100%;margin:0}
.srvm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;margin-top:12px}
.srvcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.srvm .row{font-size:14px;padding:2px 0}.srvm .row b{font-size:14px}
.srvm .bar,.srvm .shbar{height:8px;border-radius:4px;margin-top:4px}
.srvoff{grid-column:1/-1;margin:0;padding:10px 16px}
.srvoff>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;cursor:pointer;list-style:none}
.srvoff>summary::-webkit-details-marker{display:none}
.srvoff>summary::after{content:'▸';margin-left:auto;color:var(--mu)}.srvoff[open]>summary::after{content:'▾'}
.srvoffl{display:flex;flex-wrap:wrap;gap:8px}
.srvchip{font-size:12px;border:1px solid var(--bd);border-radius:999px;padding:2px 10px;opacity:.85}
.srvoffb{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.srvoffr{display:grid;grid-template-columns:140px 140px 1fr 140px 140px;gap:12px;font-size:13px;padding:6px 0;border-top:1px solid var(--bd)}
.dtop{display:grid!important;grid-template-columns:minmax(0,1fr);gap:24px;margin:0}
.dtop>.card{margin:0;min-width:0;max-width:none}
#dbm{overflow:visible}
#dbm .btiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
#dbm .btile{padding:14px;font-size:13px}#dbm .bth b{font-size:14px}
@media(max-width:1599px){.grid.kp#kpis{gap:16px}#hosts.srvg{gap:16px}.dtop{gap:16px}}
@media(max-width:1279px){.grid.kp#kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){#hosts.srvg{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.grid.kp#kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.srvoffr{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.srvm{grid-template-columns:minmax(0,1fr)}#dbm .btiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
@media(max-width:480px){.grid.kp#kpis{grid-template-columns:minmax(0,1fr)}}
#hosts>.srvc{container-type:inline-size}
@container (max-width:620px){.srvm{grid-template-columns:minmax(0,1fr);gap:12px}}
#dbm .btiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#kpis .kbrk>span{white-space:nowrap}
@media(max-width:1599px){#kpis .card h3,#kpis .khead{font-size:12px}#kpis .kbrk{font-size:12px}}
#kpis .khead{flex-wrap:nowrap;gap:8px}#kpis .khead h3{min-width:0}
@media(max-width:1599px){#kpis .kico{display:none}#kpis .kbrk>span{white-space:normal}}
@media(max-width:860px){#kpis .kico{display:grid}}
/* ===== Design system v6 — base = Dashboard (cartões, KPIs, tiles). Escala fluida p/ telas grandes/ultrawide ===== */
:root{--gap:clamp(12px,.9vw,22px);--pad:clamp(14px,1vw,22px);--fs-h:clamp(16px,.55vw + 9px,19px);--fs-s:13.5px;--fs-kpi:clamp(24px,1.2vw + 8px,34px)}
#view{gap:var(--gap)}
.card{padding:var(--pad)}
.grid{gap:var(--gap)}
.grid.kp{grid-template-columns:repeat(auto-fit,minmax(clamp(170px,12vw,280px),1fr))}
.sggrid{grid-template-columns:repeat(auto-fill,minmax(clamp(340px,24vw,560px),1fr))!important;gap:var(--gap)!important}
table,.sgt{font-size:14px}
.sgt th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px!important}
.sgt td{padding:9px 12px!important;vertical-align:middle!important}
.sgt td.num,.sgt th.num{text-align:right;font-variant-numeric:tabular-nums}
.sgw{width:100%}
.sgt{width:100%}
.sgnote,.banner{max-width:none}
.sgnote p,.banner p,.card p{max-width:140ch}
.sxlogo{width:40px;height:40px;border-radius:9px;object-fit:contain;background:rgba(255,255,255,.06);padding:3px;flex:0 0 auto}
.sgt .sxlogo{width:34px;height:34px}
/* mapa do dashboard: altura responsiva, ranking com a mesma altura */
.mpmap,.mpfull .mpmap{height:clamp(520px,60vh,900px)!important}
.mpside,.mpfull .mpside{max-height:clamp(520px,60vh,900px)!important}
/* telas largas: escala uniforme (mantém as proporções do Dashboard) */
@media(min-width:1600px){main{padding-left:32px;padding-right:32px}}
@media(min-width:2200px){main{zoom:1.15}main .leaflet-container{zoom:calc(1/1.15)}main .mpmap,main .mpfull .mpmap{height:calc(clamp(520px,60vh,900px)*1.15)!important}}
@media(min-width:2800px){main{zoom:1.3}main .leaflet-container{zoom:calc(1/1.3)}main .mpmap,main .mpfull .mpmap{height:calc(clamp(520px,60vh,900px)*1.3)!important}}
@media(max-width:1100px){.mpmap{height:clamp(360px,55vh,560px)!important}.mpside{max-height:none!important}}
@media(max-width:576px){.sggrid{grid-template-columns:1fr!important}.sgt th,.sgt td{padding:8px!important}.mpmap{height:380px!important}}
/* ===== v7 logomarcas (registro central static/logos.js) ===== */
.lgx{--s:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--s);width:var(--s);height:var(--s);border-radius:calc(var(--s)*.26);background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(255,255,255,.08);overflow:hidden;vertical-align:middle;padding:calc(var(--s)*.1)}
.lgx img{width:100%;height:100%;object-fit:contain;display:block}
.lgx.ch{background:rgba(255,255,255,.06);padding:2px}
.lgx.dv{background:rgba(255,255,255,.06)}
.lgx.ini{background:var(--c,#475569);color:#fff;font-weight:700;font-size:calc(var(--s)*.42);letter-spacing:.3px;line-height:1;padding:0}
.lgn{display:inline-flex;align-items:center;gap:8px;min-width:0;vertical-align:middle}
.sgw .sgt,.sgt{width:100%}
.ispb.img,.ispb{background:none!important;padding:0!important}
.tabs button.lgn{display:inline-flex}
.cfpx{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.cfpx img{width:26px;height:17px;flex:0 0 26px}
.cfpx.on{color:#f6821f}.cfpx.off{color:#9ca3af}
.lgx.svc{background:transparent;box-shadow:none;padding:0}
/* ===== v7 login compacto ===== */
#login .lwrap{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:360px;margin:auto;padding:24px 16px}
#login .llogo2 img{width:min(280px,70vw);height:auto;display:block;filter:drop-shadow(0 0 28px rgba(80,137,222,.35))}
#login .lbx2{width:100%;max-width:340px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;margin:0}
#login .lbx2 button{width:100%;justify-content:center}
#login .lsec{display:inline-flex;align-items:center;gap:6px;color:#22c55e;font-size:12.5px;font-weight:600}
#login .lsec .ic{width:15px;height:15px;color:#22c55e}
#helpb,.helpb{display:none!important}
#login .loginbox::before{content:none!important;display:none!important}
#login .lbx2,#login .lbx2 *{box-sizing:border-box}
#login .lbx2 button{margin:4px 0 0!important}
@media(min-width:2200px){#login .lwrap{max-width:420px}#login .llogo2 img{width:340px}#login .lbx2{max-width:380px}}
#login .lbx2 button{width:100%!important;max-width:100%!important;align-self:stretch}#login .lbx2 .fld{width:100%;margin:0}
#login .lbx2{padding:24px 22px 20px!important;gap:12px!important}#login .lbx2>*{margin-left:0!important;margin-right:0!important}#login .lbx2 .fld{margin-bottom:0!important}#login .lbx2 #lerr:empty{display:none}
.sgw{overflow-x:auto}.sgw>.sgt{display:table!important;width:100%!important}
/* ===== v8 grupo de botões de ação ===== */
.btng{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.btng>button,button.bsm{display:inline-flex!important;align-items:center;gap:6px;height:30px;padding:0 12px!important;margin:0!important;font-size:12.5px;line-height:1;white-space:nowrap;border-radius:7px;vertical-align:middle}
.btng>button .ic,button.bsm .ic{width:14px;height:14px;margin:0!important}
/* ===== v8 Canais: navegação por categoria ===== */
.cnlay{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.cnnav{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto;padding:10px!important;display:flex;flex-direction:column;gap:2px}
.cnnh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:4px 8px 10px}
.cnni{display:grid!important;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;width:100%;text-align:left;background:transparent!important;border:0!important;border-radius:8px;padding:7px 8px!important;color:inherit;font-size:13px;cursor:pointer;margin:0!important;box-shadow:none!important}
.cnni:hover{background:rgba(30,167,255,.08)!important}
.cnni.on{background:rgba(30,167,255,.16)!important;color:#e8f4ff;font-weight:600}
.cnno{font-size:11px;color:var(--muted,#8aa);text-align:right;font-variant-numeric:tabular-nums}
.cnnt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnnc{font-size:11px;background:rgba(255,255,255,.06);border-radius:10px;padding:1px 8px;font-variant-numeric:tabular-nums}
.cnpos{font-size:11px;color:var(--muted,#8aa);font-variant-numeric:tabular-nums}
.noimg.cph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.12);color:#6b7c93;font-size:0}
.noimg.cph .ic{width:45%;height:45%}
#xres .clogo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.04)}
.lgrid .clogo{width:96px;height:96px}
@media(max-width:900px){.cnlay{grid-template-columns:1fr}.cnnav{position:static;max-height:none;flex-direction:row;overflow-x:auto;padding:8px!important}.cnnh{display:none}.cnni{grid-template-columns:auto auto;width:auto;flex:0 0 auto;border:1px solid rgba(255,255,255,.08)!important}.cnno{display:none}}
/* v8 provedor de hospedagem */
.lgprov{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px 2px 3px;border-radius:999px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.18);font-size:11px;font-weight:500;color:var(--muted,#94a3b8);vertical-align:middle;white-space:nowrap}
.lgprov .lgx{background:#fff;border-radius:50%}
.pgic{display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;background:rgba(56,189,248,.12);margin-right:10px;vertical-align:middle}
.pgic img{width:20px;height:20px}
.vodf{margin-top:14px}.vodh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.noimg.pimg.cph{display:flex;align-items:center;justify-content:center;color:var(--muted,#64748b)}.noimg.pimg.cph .ic{width:42px;height:42px;opacity:.5}
.noimg.thumb.cph{display:flex;align-items:center;justify-content:center}
.pgic:has(img){background:#f8fafc}