/* StreamHub Design System v2 — tokens + componentes. Carregado por último: é a fonte da verdade. */
:root{
 --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;--sp10:40px;
 --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
 --ic-sm:16px;--ic-md:20px;--ic-lg:24px;
 --h-sm:32px;--h-md:40px;--h-lg:48px;
 --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:28px;
 --lh:1.5;--gap:var(--sp4);--pad:var(--sp5);--hd:40px;
}
@media(max-width:600px){:root{--gap:var(--sp3);--pad:var(--sp4)}}
html,body{overflow-x:hidden}
body{font-size:var(--fs-md);line-height:var(--lh)}
*,*::before,*::after{box-sizing:border-box}
/* ícones */
.ic{width:var(--ic-sm);height:var(--ic-sm);stroke-width:2;vertical-align:middle;flex:none;display:inline-block}
/* botões */
button,.btn{height:var(--h-md);min-height:var(--h-md);padding:0 var(--sp4);border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1;gap:var(--sp2);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box}
button.ghost{padding:0 var(--sp3)}
button.sm{height:var(--h-sm);min-height:var(--h-sm);padding:0 var(--sp3);font-size:var(--fs-xs)}
button.lg{height:var(--h-lg);min-height:var(--h-lg);padding:0 var(--sp5);font-size:var(--fs-md)}
button.icon{width:var(--h-md);padding:0}button.icon.sm{width:var(--h-sm)}
button .ic{width:var(--ic-sm);height:var(--ic-sm)}button.lg .ic{width:var(--ic-md);height:var(--ic-md)}
/* inputs */
input:not([type=checkbox]):not([type=radio]),select{height:var(--h-md);padding:0 var(--sp3);border-radius:var(--r-sm);font-size:var(--fs-md);line-height:1;min-width:0}
.fld{position:relative;display:block;margin:0!important}
.fld>.ic{position:absolute;left:var(--sp3);top:50%;transform:translateY(-50%);width:var(--ic-sm);height:var(--ic-sm);pointer-events:none}
.fld input{width:100%;height:var(--h-lg)!important;padding:0 var(--sp3) 0 var(--sp10)!important}
.fld input:has(+ .eye),.fld .eye~input{padding-right:var(--sp10)!important}
.fld .eye{position:absolute;right:var(--sp1);top:50%;transform:translateY(-50%);width:var(--h-md);height:var(--h-md);min-height:0;padding:0;border:0;background:transparent}
.fld .eye .ic{position:static;transform:none}
/* cards */
.card{padding:var(--pad);border-radius:var(--r-lg);margin:0}
.card>h3,.chd{display:flex;align-items:center;gap:var(--sp2);min-height:var(--sp6);margin:0 0 var(--sp4)!important;font-size:var(--fs-xs);line-height:1.2}
.card>h3 .ic{width:var(--ic-sm);height:var(--ic-sm)}
.card p{margin:0 0 var(--sp2)}.card p:last-child{margin-bottom:0}
.grid{gap:var(--gap)!important;margin:0 0 var(--gap)!important;align-items:stretch}
.grid>*{margin:0!important;min-width:0}
.grid.kp{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))!important}
.grid.g1{grid-template-columns:1fr!important}
/* KPI */
.kcard{display:flex;flex-direction:column;gap:var(--sp2);padding:var(--pad)!important}
.kcard .khead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);height:var(--hd);margin:0!important}
.kcard .khead h3{margin:0!important;font-size:var(--fs-xs);line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .kico{width:var(--hd);height:var(--hd);border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.kcard .kico .ic{width:var(--ic-md);height:var(--ic-md)}
.kpi{font-size:var(--fs-2xl);line-height:1.1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .small{font-size:var(--fs-xs);line-height:1.4}
/* empty state */
.shempty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp3);min-height:0!important;height:100%}
.shempty h3{margin:0!important;font-size:var(--fs-lg);text-transform:none;letter-spacing:-.01em;color:var(--tx);line-height:1.3}
.shempty p{margin:0!important;font-size:var(--fs-sm);line-height:var(--lh)}
.shempty .tag{margin-top:auto}
.shei{width:var(--h-md);height:var(--h-md);border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.shei .ic{width:var(--ic-md);height:var(--ic-md)}
.g1 .shempty{align-items:center;text-align:center;padding:var(--sp10) var(--pad)}.g1 .shempty .tag{margin-top:var(--sp1)}
/* tags */
.tag{height:24px;padding:0 var(--sp3);gap:6px;font-size:var(--fs-xs);line-height:1;display:inline-flex;align-items:center;vertical-align:middle}
/* header (título) */
header{gap:var(--sp3)!important;min-height:72px}
header>button{width:var(--h-md);height:var(--h-md);padding:0}
header>button.wide{width:auto;padding:0 var(--sp3)}
header h1{display:flex;align-items:center;gap:var(--sp3);font-size:var(--fs-xl);line-height:1.2}
header h1 .pgic{width:var(--h-md);height:var(--h-md);border-radius:var(--r-md);display:grid;place-items:center;flex:none}
header h1 .pgic .ic{width:var(--ic-md);height:var(--ic-md)}
header h1 .ttx{display:flex;flex-direction:column;min-width:0}
header h1 .ttx>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
header h1 .sub{display:block;font-size:var(--fs-xs)!important;line-height:1.3;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--line2);font-size:11px;color:var(--mu);font-family:inherit;line-height:1}
@media(max-width:600px){header .wide .lbl,header .wide .kbd{display:none}header .wide{width:var(--h-md)!important;padding:0!important}}
/* sidebar */
#nav a{min-height:var(--h-md);padding:0 var(--sp3)!important;gap:var(--sp3)!important;align-items:center;border-radius:var(--r-sm)}
#nav a .ic{width:var(--ic-md);height:var(--ic-md)}
.sidefoot button{height:var(--h-md)}
/* formulários */
.frm{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--sp2)!important;margin:var(--sp3) 0!important;align-items:end}
.frm input{width:100%}.frm button{width:100%}
.fcol{display:flex;flex-direction:column;gap:var(--sp2);margin:var(--sp3) 0}.fcol button{align-self:flex-start}
/* tabelas */
.tbl{overflow-x:auto;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
table th,table td{height:var(--h-md);padding:0 var(--sp3);vertical-align:middle;line-height:1.3}
table th:first-child,table td:first-child{padding-left:0}table th:last-child,table td:last-child{padding-right:0}
/* login/setup */
#login .lbx2,#setup .lbx2{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--sp4)!important;padding:var(--sp6)!important}
#login .lbx2>*,#setup .lbx2>*{margin:0!important}
#lstep1,#lstep2{display:flex;flex-direction:column;gap:var(--sp3)}#lstep1.hidden,#lstep2.hidden{display:none}
#login .lbx2 button[type=submit],#setup .lbx2 button[type=submit]{width:100%;max-width:none!important;height:var(--h-lg);font-size:var(--fs-md)}
#login,#setup{padding:var(--sp6) var(--sp4)!important;min-height:100vh;min-height:100dvh}
.lsec{height:24px}
.pwr{gap:var(--sp1) var(--sp3)!important}.pwr li{min-height:20px;gap:6px}
.pwm{height:20px}
.ftitle{font-size:var(--fs-xl)!important;line-height:1.2}
@media(max-width:420px){#login .lbx2,#setup .lbx2{padding:var(--sp5)!important}}
/* bottom nav */
@media(max-width:860px){
 main{padding:0 var(--sp4) calc(80px + env(safe-area-inset-bottom))!important}
 #bnav{height:calc(64px + env(safe-area-inset-bottom))!important;padding:0 var(--sp2) env(safe-area-inset-bottom)!important;display:grid!important;grid-template-columns:repeat(5,1fr);align-items:center}
 #bnav a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp1);height:56px;min-width:0;padding:0!important;font-size:11px;line-height:1.1}
 #bnav a .ic{width:var(--ic-md);height:var(--ic-md)}
 #bnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* modal */
.mdl{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:12vh var(--sp4) var(--sp4);background:rgba(3,6,14,.6);backdrop-filter:blur(4px)}
.mdl.hidden{display:none}
.mdlb{width:100%;max-width:440px;background:var(--card2,var(--card));border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:0 24px 64px -16px rgba(0,0,0,.6);padding:var(--sp6);display:flex;flex-direction:column;gap:var(--sp4)}
[data-theme=light] .mdlb{background:#fff}
.mdlb h3{margin:0;font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--sp2)}.mdlb p{margin:0;color:var(--mu)}
.mdlf{display:flex;justify-content:flex-end;gap:var(--sp2)}
@media(max-width:420px){.mdlf{flex-direction:column-reverse}.mdlf button{width:100%}}
/* busca global */
.srch .mdlb{max-width:600px;padding:0;gap:0;overflow:hidden}
.srch .fld input{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;height:56px!important;background:transparent!important;box-shadow:none!important;font-size:var(--fs-lg)}
.srl{max-height:min(420px,60vh);overflow:auto;padding:var(--sp2)}
.srl a{display:flex;align-items:center;gap:var(--sp3);height:48px;padding:0 var(--sp3);border-radius:var(--r-sm);color:var(--tx);text-decoration:none}
.srl a .ic{width:var(--ic-md);height:var(--ic-md);color:var(--mu)}
.srl a .d{margin-left:auto;font-size:var(--fs-xs);color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.srl a b{white-space:nowrap;font-weight:600}
.srl a.on,.srl a:hover{background:rgba(80,137,222,.16)}
.srl .none{padding:var(--sp6);text-align:center;color:var(--mu)}
@media(max-width:600px){.srl a .d{display:none}.mdl.srch{padding-top:var(--sp4)}}
/* toasts */
#toasts{position:fixed;right:var(--sp4);bottom:var(--sp4);z-index:1100;display:flex;flex-direction:column;gap:var(--sp2);max-width:min(380px,calc(100vw - 32px))}
@media(max-width:860px){#toasts{left:var(--sp4);right:var(--sp4);bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}}
.toast{display:flex;align-items:center;gap:var(--sp3);min-height:48px;padding:var(--sp3) var(--sp4);border-radius:var(--r-md);background:var(--card);border:1px solid var(--line2);box-shadow:0 12px 32px -12px rgba(0,0,0,.5);font-size:var(--fs-sm);animation:fade .2s ease both}
[data-theme=light] .toast{background:#fff}
.toast .ic{width:var(--ic-md);height:var(--ic-md)}.toast.ok .ic{color:#22c55e}.toast.err .ic{color:#ef4444}
/* 2FA */
.qrw{display:grid!important;grid-template-columns:auto 1fr;gap:var(--sp5)!important;align-items:start;margin-top:var(--sp4)!important}
.qrw ol{margin:0;padding-left:var(--sp5);display:flex;flex-direction:column;gap:var(--sp1)}
@media(max-width:600px){.qrw{grid-template-columns:1fr}.qr{justify-self:center}}
.rec{gap:var(--sp2)!important;margin:var(--sp4) 0!important}.rec code{height:var(--h-md);display:grid;place-items:center;padding:0!important;border-radius:var(--r-sm)}
.banner{padding:var(--sp3) var(--sp4);border-radius:var(--r-md);margin-top:var(--sp4)}
.err:empty{display:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--sp2) var(--sp4);margin:0;font-size:var(--fs-sm)}.kv dt{color:var(--mu)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* tap targets mobile */
@media(max-width:860px){#side #nav a{min-height:44px}}
header{height:auto!important;min-height:72px!important;padding-top:var(--sp4)!important;padding-bottom:var(--sp4)!important;align-items:center!important}
header h1{display:flex!important;align-items:center!important;grid-template-columns:none!important;margin:0!important}
.fld>.ic{top:calc(var(--h-lg)/2)!important}
.fld .eye{top:calc((var(--h-lg) - var(--h-md))/2)!important;transform:none!important}
.kcard .khead h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.kpi.txt{font-size:var(--fs-lg)!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.3;min-height:calc(var(--fs-2xl)*1.1);display:flex;align-items:center}
#sbpin{top:50%!important;transform:translateY(-50%)!important;width:var(--h-sm)!important;height:var(--h-sm)!important;min-height:0!important;padding:0!important}
.fld>.ic{top:50%!important;transform:translateY(-50%)!important}
.fld .eye{top:50%!important;transform:translateY(-50%)!important;margin:0!important}
header h1 .ttx>b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;line-height:1.2}
@media(max-width:600px){header h1{font-size:var(--fs-lg)!important}header h1 .sub{display:none!important}}
.g2.dash>.card{height:auto!important;max-height:none!important}
main>header>button,main>header #themebtn,main>header #menu,main>header #srchbtn{width:var(--h-md)!important;height:var(--h-md)!important;padding:0!important;margin:0!important}
main>header #srchbtn.wide{width:auto!important;padding:0 var(--sp3)!important}
#themebtn .ic,header>button .ic{width:var(--ic-md)!important;height:var(--ic-md)!important}
@media(max-width:860px){main>header>button,main>header #themebtn,main>header #menu,main>header #srchbtn,main>header #srchbtn.wide{width:44px!important;height:44px!important;padding:0!important}main>header #srchbtn .lbl,main>header #srchbtn .kbd{display:none}}
@media(max-width:600px){
 .grid.kp{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .kcard{padding:var(--sp4)!important;gap:var(--sp1)}
 .kcard .khead{height:auto;min-height:var(--h-md)}
 .kcard .kico{width:32px;height:32px;border-radius:var(--r-sm)}.kcard .kico .ic{width:var(--ic-sm);height:var(--ic-sm)}
 .kpi{font-size:var(--fs-xl)}
}
.g2.dash{align-items:stretch!important}
.kcard .khead{flex-wrap:nowrap!important;flex-direction:row!important}.kcard .khead h3{flex:1 1 auto}
#pa,#pn,#pc{grid-column:1/-1}
.card .frm:has(#pa){grid-template-columns:1fr}.card .frm:has(#pa) button{justify-self:start;width:auto}
.tbl td.muted.small{max-width:240px;overflow:hidden;text-overflow:ellipsis}