/* Login, cofre (2FA), moldura do app, molduras próprias, vidro usável, detalhes por tema, modal, gaveta e responsivo. */
/* ======================= LOGIN ======================= */
#login{background:var(--login-bg);display:none;align-items:center;justify-content:center}
#login.on,#mfa.on{display:flex}
.lgwrap{width:384px;max-width:calc(100vw - 32px);position:relative}
.lgcard{padding:30px 28px 26px;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s}
.lgcard .logo{display:block;width:196px;height:auto;margin:0 auto}
.logo-escuro{display:none!important}
[data-mode="dark"] .logo-claro{display:none!important}
[data-mode="dark"] .logo-escuro{display:block!important}
.lgsis{text-align:center;font-family:var(--font-head);font-weight:var(--head-w);letter-spacing:var(--head-track);font-size:15px;color:var(--pri-card,var(--pri));margin-top:8px}
.lgsub{text-align:center;color:var(--text-2);font-size:12.5px;margin:2px 0 20px}
.fld{margin-bottom:12px}
.fld label{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:5px}
.fld label a{color:var(--pri);text-decoration:none;font-weight:500}
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);margin:8px 0}
.chk input{accent-color:var(--pri);width:15px;height:15px}
.lgbtn{width:100%;margin-top:10px;height:38px;position:relative;overflow:hidden}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite;display:none}
.carregando .spin{display:block}.carregando .rot{display:none}
@keyframes gira{to{transform:rotate(360deg)}}
/* efeito de entrada (realista): progresso fino no topo → campos saem em sequência → cartão encolhe
   até "Olá, Andrei" com anel se fechando → o próprio cartão vira a moldura do cofre (view transition) */
.lgcard{transition:height .55s cubic-bezier(.65,0,.35,1)}
.prog{position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--pri),var(--pri-2));opacity:0;z-index:3;border-radius:0 2px 2px 0}
.lgcard.carr .prog{opacity:1;animation:prog 1.3s cubic-bezier(.3,0,.2,1) forwards}
@keyframes prog{0%{width:0}50%{width:62%}100%{width:84%}}
.lgcard.okk .prog{animation:none;width:100%;opacity:0;transition:width .3s ease,opacity .35s .35s}
.lgcard.carr .inp,.lgcard.carr .chk{pointer-events:none}
.lgcard.carr .inp{color:var(--text-2)}
.conteudo>*{transition:opacity .28s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.lgcard.okk .conteudo>*{opacity:0;transform:translateY(-8px)}
.lgcard.okk .conteudo>*:nth-child(1),.lgcard.okk .conteudo>*:nth-child(2){transition-delay:.18s}
.lgcard.okk .conteudo>*:nth-child(3),.lgcard.okk .conteudo>*:nth-child(4){transition-delay:.13s}
.lgcard.okk .conteudo>*:nth-child(5){transition-delay:.09s}
.lgcard.okk .conteudo>*:nth-child(6),.lgcard.okk .conteudo>*:nth-child(7){transition-delay:.05s}
.lgcard.okk .conteudo>*:nth-child(n+8){transition-delay:0s}
.ola{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .35s ease .35s}
.lgcard.okk .ola{opacity:1}
.ola .anel{position:relative;width:64px;height:64px}
.ola .anel svg{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg)}
.ola .anel circle{fill:none;stroke-width:2.5}
.ola .anel .trilho{stroke:var(--border)}
.ola .anel .volta{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5}
.lgcard.okk .ola .volta{transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .45s;stroke-dashoffset:0}
.ola .ini{position:absolute;inset:7px;border-radius:50%;background:var(--pri);color:var(--pri-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .4s,opacity .3s .4s}
.lgcard.okk .ola .ini{transform:none;opacity:1}
.ola b{font-size:16px;font-family:var(--font-head);font-weight:var(--head-w);letter-spacing:var(--head-track)}
.ola small{color:var(--text-2);font-size:12.5px;display:flex;align-items:center;gap:6px}
.ola small i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.3}}
/* transição compartilhada: cartão do login → moldura do cofre */
#login.on .lgcard{view-transition-name:cartao}
#mfa.on .vault .moldura{view-transition-name:cartao}
::view-transition-group(cartao){animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(cartao),::view-transition-new(cartao){height:100%;width:100%;object-fit:none}
::view-transition-old(cartao){animation:vtSai .35s ease forwards}
::view-transition-new(cartao){animation:vtEntra .45s .25s ease both}
@keyframes vtSai{to{opacity:0}}
@keyframes vtEntra{from{opacity:0}}
::view-transition-old(root){animation:vtSai .4s ease forwards}
::view-transition-new(root){animation:vtEntra .5s .2s ease both}
.temabtn-flut{position:fixed;top:16px;right:16px;z-index:5}

/* ======================= 2FA / COFRE ======================= */
#mfa{background:var(--login-bg);align-items:center;justify-content:center;perspective:1200px}
.mfawrap{width:420px;max-width:calc(100vw - 32px);text-align:center;transition:transform .9s cubic-bezier(.6,0,.2,1),opacity .6s}
.mfawrap.entra{animation:sobe .6s cubic-bezier(.2,.8,.2,1)}
@keyframes sobe{from{opacity:0;transform:translateY(14px) scale(.98)}}
.vault{width:230px;height:230px;margin:0 auto 18px;position:relative}
.vault .moldura{position:absolute;inset:0;border-radius:28px;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:var(--sh-card),inset 0 0 0 1px var(--border)}
/* interior do cofre: corredor escuro com anéis que somem ao fundo (profundidade), visto quando a porta abre */
.vault .luz{position:absolute;inset:18px;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .45s;
 background:radial-gradient(circle,#000 0 14%,transparent 15%),
  repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 1.5px,transparent 2px 13px),
  radial-gradient(circle,#05080F 0,#0B1220 45%,#1A2335 75%,#2A3448 100%);
 box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 30px rgba(0,0,0,.8)}
.vault .luz::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.55) 100%)}
.vault .porta{position:absolute;inset:18px;border-radius:50%;transform-origin:8% 50%;transition:transform 1s cubic-bezier(.6,0,.25,1);transform-style:preserve-3d}
.vault svg{width:100%;height:100%;overflow:visible}
.vault .disco{transform-origin:97px 97px;transition:transform 1s cubic-bezier(.5,0,.2,1)}
.vault .trava{transition:transform .35s ease}
.vault.abre .disco{transform:rotate(-300deg)}
.vault.abre .t1{transform:translateY(12px)}.vault.abre .t2{transform:translateX(-12px)}.vault.abre .t3{transform:translateY(-12px)}.vault.abre .t4{transform:translateX(12px)}
.vault.abre2 .porta{transform:rotateY(-108deg)}
.vault.abre2 .luz{opacity:1}
.vault.erro{animation:treme .45s}
@keyframes treme{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.mfat{font-family:var(--font-head);font-weight:var(--head-w);letter-spacing:var(--head-track);font-size:18px}
.mfas{color:var(--text-2);margin:4px 0 16px}
.digitos{display:flex;gap:8px;justify-content:center}
.digitos input{width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;padding:0}
.digitos.okd input{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.digitos.errd input{border-color:var(--err)}
.mfadica{font-size:12px;color:var(--text-3);margin-top:12px}
.flash{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,#fff,color-mix(in srgb,var(--pri-2) 50%,#fff) 40%,var(--bg) 75%);opacity:0;pointer-events:none;z-index:50;transition:opacity .45s}
.flash.on{opacity:1}

/* ======================= APP ======================= */
#app.on{display:flex}
#app{opacity:0}
#app.mostra{animation:aparece .7s cubic-bezier(.2,.8,.2,1) forwards}
#app.aberto{opacity:1}
@keyframes aparece{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.sb{width:240px;flex-shrink:0;display:flex;flex-direction:column;background:var(--frame);border-right:1px solid var(--frame-b);backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);position:relative;z-index:2}
[data-card="neu"] .sb{box-shadow:6px 0 16px var(--sh-lo)}
.sbtop{padding:16px 16px 12px}
.sbtop .logo{width:100%;max-width:190px;height:auto;display:block}
.sbsis{margin-top:7px;font-weight:700;font-size:13px;color:var(--pri-texto,var(--pri));font-family:var(--font-head);letter-spacing:var(--head-track)}
.nav{flex:1;overflow:auto;padding:4px 10px}
.grp{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);padding:14px 10px 6px}
[data-theme="papel"] .grp,[data-theme="apple"] .grp{text-transform:none;letter-spacing:0;font-size:11.5px}
.it{display:flex;align-items:center;gap:10px;height:calc(36px * var(--dens));padding:0 10px;margin:1px 0;border-radius:var(--r-m);color:var(--text-2);font-weight:500;position:relative;width:100%;text-align:left;transition:background .15s,color .15s}
.it:hover{background:var(--surface-2);color:var(--text)}
/* ícones do menu seguem a moldura (não o conteúdo); o item ativo de cada tema continua vencendo */
.it .ic{color:var(--frame-grp,var(--text-2));transition:color .15s}
[data-theme="xp"][data-mode="dark"] .it.on .ic{color:#FFFFFF}

/* ---------- menu recolhido (64 px, só o símbolo do logo) ---------- */
.sb{transition:width .26s cubic-bezier(.2,.8,.2,1)}
.sbtop{position:relative}
html .sb .sbtop .logo-icone{display:none!important;width:34px!important;height:auto;margin:2px auto 0}
.recolher{position:absolute;top:12px;right:8px;width:26px!important;height:26px!important;color:var(--frame-grp,var(--text-3))!important;opacity:0;transition:opacity .15s,transform .26s}
.sb:hover .recolher,.recolher:focus-visible{opacity:1}
.sbtop .logo-cheio{max-width:170px}
[data-menu="recolhido"] .sb{width:64px}
[data-menu="recolhido"] .sbtop{padding:14px 0 8px;display:flex;flex-direction:column;align-items:center;gap:8px}
html[data-menu="recolhido"] .sb .sbtop .logo-cheio{display:none!important}
html[data-menu="recolhido"] .sb .sbtop .logo-icone.logo-claro{display:block!important}
html[data-menu="recolhido"]:is([data-mode="dark"],[data-frame="escuro"]) .sb .sbtop .logo-icone.logo-claro{display:none!important}
html[data-menu="recolhido"]:is([data-mode="dark"],[data-frame="escuro"]) .sb .sbtop .logo-icone.logo-escuro{display:block!important}
/* ícone próprio do sistema (Identidade visual): no menu recolhido substitui o símbolo da E-LINE; sem ícone, vale o símbolo */
html .sb .sbtop .logo-sistema{display:none!important;width:36px!important;height:36px;border-radius:10px;margin:0 auto;box-shadow:0 2px 8px rgba(0,0,0,.15)}
html[data-menu="recolhido"][data-icone-sistema="1"] .sb .sbtop .logo-sistema{display:block!important}
html[data-menu="recolhido"][data-icone-sistema="1"] .sb .sbtop .logo-icone:is(.logo-claro,.logo-escuro){display:none!important}
[data-menu="recolhido"] .sbsis{display:none}
[data-menu="recolhido"] .recolher{position:static;opacity:1;transform:rotate(180deg)}
[data-menu="recolhido"] .nav{padding:4px 8px}
[data-menu="recolhido"] .sb .it{font-size:0;justify-content:center;padding:0;gap:0}
[data-menu="recolhido"] .sb .it .ic{width:18px;height:18px}
[data-menu="recolhido"] .sb .it .ic+.ic{display:none}
[data-menu="recolhido"] .sb .it .cont{position:absolute;top:3px;right:5px;font-size:9.5px;padding:0 5px;min-width:15px;line-height:15px;text-align:center}
[data-menu="recolhido"] .sb .grp{font-size:0;padding:0;margin:10px 8px;height:1px;background:var(--frame-b)}
[data-menu="recolhido"] .sbfix{padding:8px}
[data-menu="recolhido"] .sbusr{padding:10px 8px}
[data-menu="recolhido"] .usrbtn{justify-content:center;padding:6px 0}
[data-menu="recolhido"] .usrbtn>div:not(.av),[data-menu="recolhido"] .usrbtn>.ic{display:none}
[data-menu="recolhido"] .usrpop{left:8px;right:auto;width:240px}
[data-menu="recolhido"] [data-nav="bar"] .it.on::before,[data-menu="recolhido"][data-nav="bar"] .it.on::before{top:10px;bottom:10px}
.it:hover .ic{color:var(--frame-text-2,var(--text-2))}
.it .cont{margin-left:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-2)}
.it.on{font-weight:600}
[data-nav="bar"] .it.on{background:var(--pri-soft);color:var(--pri-soft-ink)}
[data-nav="bar"] .it.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pri)}
[data-nav="bar"] .it.on .ic{color:var(--pri)}
[data-nav="fill"] .it.on{background:var(--pri);color:var(--pri-ink)}
[data-nav="fill"] .it.on .ic{color:var(--pri-ink)}
[data-nav="pill"] .it{border-radius:999px;padding:0 14px}
[data-nav="pill"] .it.on{background:var(--pri-soft);color:var(--pri-soft-ink);font-weight:700}
[data-nav="pill"] .it.on .ic{color:var(--pri)}
[data-nav="tint"] .it.on{background:var(--surface-2);color:var(--text)}
[data-nav="tint"] .it.on .ic{color:var(--pri)}
[data-nav="tint"] .it.on::before{content:"";position:absolute;left:2px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--pri)}
[data-nav="outline"] .it.on{color:var(--pri-soft-ink);box-shadow:inset 0 0 0 1px var(--pri);background:var(--pri-soft)}
[data-nav="outline"] .it.on .ic{color:var(--pri-soft-ink)}
[data-nav="ink"] .it.on{color:var(--text)}
[data-nav="ink"] .it.on::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:1.5px;background:var(--pri)}
[data-nav="ink"] .it.on .ic{color:var(--pri)}
[data-nav="neu"] .it.on{color:var(--pri-soft-ink);box-shadow:inset 3px 3px 7px var(--sh-lo),inset -3px -3px 7px var(--sh-hi)}
[data-nav="neu"] .it.on .ic{color:var(--pri)}
[data-theme="contraste"] .it.on{outline:2px solid var(--text)}
.sbfix{padding:8px 10px;border-top:1px solid var(--frame-b)}
.sbusr{border-top:1px solid var(--frame-b);padding:10px;position:relative}
.usrbtn{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:var(--r-m);text-align:left;transition:background .15s}
.usrbtn:hover{background:var(--surface-2)}
.av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pri);color:var(--pri-ink);font-weight:700;flex-shrink:0}
.usrnome{font-weight:600}.usrgrp{font-size:11.5px;color:var(--text-2)}
.usrpop{position:absolute;left:10px;right:10px;bottom:calc(100% - 4px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-pop);padding:6px;opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:all .18s cubic-bezier(.2,.8,.2,1)}
.usrpop.on{opacity:1;transform:none;pointer-events:auto}
.usrpop .cab{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.usrpop .op{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:var(--r-m)}
.usrpop .op:hover{background:var(--surface-2)}
.usrpop .sair{color:var(--err)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.hd{height:56px;display:flex;align-items:center;gap:8px;padding:0 24px;background:color-mix(in srgb,var(--frame) 88%,transparent);border-bottom:1px solid var(--frame-b);backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(160%);-webkit-backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(160%);position:relative;z-index:3}
.trilha{display:flex;align-items:center;gap:6px;color:var(--text-2)}
.trilha b{color:var(--text);font-weight:600}
.trilha .ic{width:13px;height:13px;color:var(--text-3)}
.busca{display:flex;align-items:center;gap:8px;width:260px;height:calc(34px * var(--dens));padding:0 10px;border-radius:var(--r-m);color:var(--text-3);background:var(--surface);box-shadow:inset 0 0 0 1px var(--campo-b-hd,var(--campo-b));transition:box-shadow .15s}
.busca:hover{box-shadow:inset 0 0 0 1px var(--text-3)}
.kbd{margin-left:auto;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--border-2);color:var(--text-3)}
[data-input="filled"] .busca{background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--campo-b-hd,var(--campo-b))}
[data-input="inset"] .busca{box-shadow:inset 0 0 0 1px var(--campo-b-hd,var(--campo-b)),inset 3px 3px 6px var(--sh-lo),inset -3px -3px 6px var(--sh-hi)}

/* sino */
.sino .ic{width:18px;height:18px;transform-origin:50% 2px}
.sino.toca .ic{animation:balanca 1s cubic-bezier(.36,.07,.19,.97)}
@keyframes balanca{0%{transform:rotate(0)}12%{transform:rotate(16deg)}26%{transform:rotate(-14deg)}40%{transform:rotate(10deg)}54%{transform:rotate(-7deg)}68%{transform:rotate(4deg)}82%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.badge{position:absolute;top:1px;right:0;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--err);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--frame)}
.badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--err);z-index:-1}
.sino.toca .badge::after{animation:onda 1.2s ease-out}
@keyframes onda{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}
.pop{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-pop);padding:6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:all .18s cubic-bezier(.2,.8,.2,1);z-index:10;text-align:left}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop h6{font-size:12px;font-weight:600;padding:8px 10px;color:var(--text-2)}
.nt{display:flex;gap:10px;padding:9px 10px;border-radius:var(--r-m)}
.nt:hover{background:var(--surface-2)}
.nt .pt{width:8px;height:8px;border-radius:50%;background:var(--pri);margin-top:5px;flex-shrink:0}
.nt small{display:block;color:var(--text-3);font-size:11px}

/* sol e lua */
.tema svg{width:19px;height:19px;overflow:visible}
.tema .nucleo{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tema .mascara{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tema .raios{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .3s}
/* claro: mostra a LUA (clique leva ao escuro) */
[data-mode="light"] .tema .nucleo{transform:scale(1.75)}
[data-mode="light"] .tema .mascara{transform:translate(-7px,7px)}
[data-mode="light"] .tema .raios{transform:rotate(-90deg) scale(.4);opacity:0}
/* escuro: mostra o SOL */
[data-mode="dark"] .tema .nucleo{transform:scale(1)}
[data-mode="dark"] .tema .mascara{transform:translate(0,0)}
[data-mode="dark"] .tema .raios{transform:rotate(0) scale(1);opacity:1}
[data-mode="dark"] .tema{color:#FBBF24}
html.vt-tema::view-transition-old(root),html.vt-tema::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-tema::view-transition-new(root){z-index:9999}

.ct{flex:1;overflow:auto;padding:22px 24px 28px}
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px}
.ph h1{font-family:var(--font-head);font-weight:var(--head-w);letter-spacing:var(--head-track);font-size:21px;line-height:1.2}
.ph p{color:var(--text-2);margin-top:3px}
.seg{display:inline-flex;padding:3px;border-radius:calc(var(--r-m) + 2px);background:var(--surface-2);gap:2px}
.seg button{padding:5px 12px;border-radius:var(--r-m);font-weight:500;color:var(--text-2);transition:all .15s}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--border)}
[data-btn="pill"] .seg,[data-btn="pill"] .seg button{border-radius:999px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:14px 16px}
.kpi .l{display:flex;align-items:center;justify-content:space-between;color:var(--text-2);font-size:12px;font-weight:500}
.kpi .l .ic{color:var(--text-3)}
.kpi .v{font-size:24px;font-weight:700;margin-top:6px;letter-spacing:-.02em;font-family:var(--font-head)}
.kpi .d{font-size:11.5px;margin-top:2px;color:var(--text-3)}
.kpi .d b{font-weight:600}
.up{color:var(--ok)}.down{color:var(--err)}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-top:14px}
.cardh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
[data-card="neu"] .cardh,[data-card="shadow"] .cardh{border-bottom-color:color-mix(in srgb,var(--border) 70%,transparent)}
.cardh b{font-size:13.5px;font-weight:600}
.cardh small{color:var(--text-3);font-size:11.5px}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;font-weight:600;color:var(--text-3);text-align:left;padding:9px 16px;border-bottom:1px solid var(--border)}
td{padding:calc(10px * var(--dens)) 16px;border-bottom:1px solid var(--border);color:var(--text)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.t-ok{background:var(--ok-soft);color:var(--ok)}.t-warn{background:var(--warn-soft);color:var(--warn)}.t-pri{background:var(--pri-soft);color:var(--pri-soft-ink)}
.frm{padding:16px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.lbl{font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:5px}
.tg{width:36px;height:20px;border-radius:999px;background:var(--border-2);position:relative;transition:background .2s;flex-shrink:0}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.tg.on{background:var(--pri)}.tg.on::after{transform:translateX(16px)}
[data-theme="apple"] .tg.on{background:#34C759}
.linha{display:flex;align-items:center;gap:10px;margin-top:12px}

/* ---------- moldura com cor/imagem própria (XP, Aero) ---------- */
.sb{background-image:var(--frame-img,none);color:var(--frame-text,var(--text))}
/* :where() deixa estas regras sem peso, para nunca vencerem o item ativo (contraste do ativo vem do tema) */
.sb :where(.it){color:var(--frame-text-2,var(--text-2))}
.sb :where(.it:hover){color:var(--frame-text,var(--text))}
.sb :where(.it) :where(.ic){color:var(--frame-grp,var(--text-3))}
.sb .grp{color:var(--frame-grp,var(--text-3))}
[data-frame="escuro"] .sb .logo-claro{display:none!important}
[data-frame="escuro"] .sb .logo-escuro{display:block!important}
[data-frame="escuro"] .sbsis{color:var(--pri-texto,var(--frame-grp))}
[data-frame="escuro"] .sb :where(.it:hover){background:rgba(255,255,255,.12)}
/* temas gerados com moldura colorida (modo claro): ativo em branco translúcido, avatar branco */
:not([data-mode="dark"])[data-gerado="1"][data-frame="escuro"] .sb .it.on{background:rgba(0,0,0,.24);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
:not([data-mode="dark"])[data-gerado="1"][data-frame="escuro"] .sb .it.on .ic{color:#FFFFFF}
:not([data-mode="dark"])[data-gerado="1"][data-frame="escuro"] .sb .it.on::before{background:#FFFFFF}
:not([data-mode="dark"])[data-gerado="1"][data-frame="escuro"] .sb .av{background:#FFFFFF;color:var(--pri)}
:not([data-mode="dark"])[data-gerado="1"][data-frame="escuro"] .sb .it .cont{background:rgba(0,0,0,.28);color:#FFFFFF!important}
.sb .usrgrp{color:var(--frame-grp,var(--text-2))}
.hd{background-image:var(--hd-img,var(--frame-img,none));color:var(--hd-text,var(--text))}
/* cor sólida por trás do degradê do cabeçalho (lida por quem mede contraste e vista enquanto a imagem carrega) */
.hd{background-color:var(--hd-bg,color-mix(in srgb,var(--frame) 88%,transparent))}
[data-theme="nasa"]{--hd-bg:#0B3D91}[data-theme="nasa"][data-mode="dark"]{--hd-bg:#0D3680}
[data-theme="xp"]{--hd-bg:#0050D8}[data-theme="xp"][data-mode="dark"]{--hd-bg:#2E2E2E}
[data-theme="ironman"]{--hd-bg:#FFFFFF}[data-theme="ironman"][data-mode="dark"]{--hd-bg:#9B1B1B}
[data-theme="ff7"]{--hd-bg:#2A52C8}[data-theme="ff7"][data-mode="dark"]{--hd-bg:#14328A}
[data-theme="cyberpunk"]{--hd-bg:#151515}[data-theme="tars"]{--hd-bg:#33363A}[data-theme="tars"][data-mode="dark"]{--hd-bg:#18191B}
.hd .trilha{color:var(--hd-text-2,var(--text-2))}
.hd .trilha b{color:var(--hd-text,var(--text))}
.hd .trilha .ic{color:var(--hd-text-2,var(--text-3))}
.hd .bi{color:var(--hd-text-2,var(--text-2))}
.hd .bi:hover{color:var(--hd-text,var(--text))}
[data-theme="xp"] .sb .logo-claro,[data-theme="xp"] .hd .logo-claro{display:none!important}
[data-theme="xp"] .sb .logo-escuro{display:block!important}
[data-theme="xp"] .sbsis{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
[data-theme="xp"] .sb .it:hover{background:rgba(255,255,255,.18)}
[data-theme="xp"] .hd .bi:hover{background:rgba(255,255,255,.18)}
[data-theme="xp"] .hd .trilha b{text-shadow:0 1px 1px rgba(0,0,0,.35)}
[data-nav="xp"] .it.on{background:#fff;color:#0B3FA8;box-shadow:0 1px 2px rgba(0,0,0,.25)}
[data-nav="xp"] .it.on .ic{color:#0B3FA8}
[data-theme="xp"][data-mode="dark"] [data-nav] .it.on,[data-theme="xp"][data-mode="dark"] .it.on{background:#444;color:#fff}
[data-theme="aero"] .sb,[data-theme="aero"] .hd{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
[data-theme="aero"] .sb .it:hover{background:rgba(255,255,255,.35)}
[data-theme="aero"] .sbsis,[data-theme="aero"] .sb .usrnome,[data-theme="aero"] .hd .trilha b{text-shadow:0 0 10px rgba(255,255,255,.9)}
[data-theme="aero"][data-mode="dark"] .sbsis,[data-theme="aero"][data-mode="dark"] .sb .usrnome,[data-theme="aero"][data-mode="dark"] .hd .trilha b{text-shadow:none}
[data-theme="aero"] .ct .ph h1,[data-theme="aero"] .ct .ph p{color:#fff;text-shadow:0 1px 3px rgba(0,30,70,.55)}
[data-theme="cristal"] .ct .ph h1{background:linear-gradient(90deg,var(--pri),var(--pri-2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="ios"] .ph h1{font-size:30px;letter-spacing:-.03em}
[data-theme="ios"] th{text-transform:uppercase;font-size:11px;letter-spacing:.02em}
[data-theme="kali"] .hd .trilha::before{content:"andrei@plantao:~$";font-family:var(--font-head);font-size:12px;color:var(--pri);margin-right:6px}
[data-theme="kali"] .ph h1::before{content:"> ";color:var(--pri)}

/* botões brilhantes (XP/7) */
[data-btn="glossy"] .bp{background:linear-gradient(180deg,color-mix(in srgb,var(--pri-2) 55%,#fff) 0%,var(--pri-2) 46%,var(--pri) 54%,color-mix(in srgb,var(--pri) 85%,#000) 100%);border:1px solid color-mix(in srgb,var(--pri) 70%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);text-shadow:0 1px 1px rgba(0,0,0,.3)}
[data-btn="glossy"] .bp:hover{filter:brightness(1.08)}
[data-btn="glossy"] .bs{background:linear-gradient(180deg,#FFFFFF,#F2F1EC 55%,#E2DFD3);border:1px solid #8E8F8F;box-shadow:inset 0 1px 0 #fff;color:#000}
[data-btn="glossy"] .bs:hover{background:linear-gradient(180deg,#FFFFFF,#EAF4FD 55%,#CFE6FA);border-color:#3C7FB1}
[data-mode="dark"][data-btn="glossy"] .bs{background:linear-gradient(180deg,#5A5A5A,#3A3A3A 55%,#2A2A2A);border-color:#111;color:#eee;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}

/* cartão "janela" (XP) */
[data-card="janela"] .card{border:1px solid var(--win-b);border-radius:8px 8px 4px 4px;box-shadow:var(--sh-card);overflow:hidden}
[data-card="janela"] .cardh{background:var(--hd-img);color:var(--hd-text);border-bottom:0;padding:8px 14px}
[data-card="janela"] .cardh small{color:var(--hd-text-2)}
[data-card="janela"] .cardh b{text-shadow:0 1px 1px rgba(0,0,0,.35)}
[data-card="janela"] .card:not(:has(.cardh)){position:relative;padding-top:calc(14px + 12px)}
[data-card="janela"] .card:not(:has(.cardh))::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--hd-img)}
[data-card="janela"] .lgcard{padding-top:44px}
[data-card="janela"] .lgcard::after{height:26px!important}
[data-card="janela"] .card.hov:hover{transform:none;box-shadow:var(--sh-card-h)}
/* cartão "aero" (vidro com reflexo) */
[data-card="aero"] .card{border:1px solid var(--border);box-shadow:var(--sh-card);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);position:relative;overflow:hidden}
[data-card="aero"] .card::after{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.04));pointer-events:none}
[data-mode="dark"][data-card="aero"] .card::after{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0))}

/* ---------- temas de vidro: superfícies de uso quase opacas (a arte aparece só nas áreas livres) ----------
   --opaco = base sólida do tema (branco tingido pelo fundo no claro; escuro tingido no escuro).
   Moldura, cartões, painéis, gaveta e modal misturam a cor translúcida do tema com essa base. */
:is([data-card="glass"],[data-card="aero"]){--opaco:color-mix(in srgb,#FFFFFF 80%,var(--bg))}
:is([data-card="glass"],[data-card="aero"])[data-mode="dark"]{--opaco:color-mix(in srgb,#05070D 50%,var(--bg))}
/* vidro usável: translúcido (~60%) com desfoque forte — a arte aparece borrada por trás, o texto fica firme */
:is([data-card="glass"],[data-card="aero"]) .sb,:is([data-card="glass"],[data-card="aero"]) .hd{background-color:color-mix(in srgb,var(--frame) 60%,var(--opaco));backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)}
:is([data-card="glass"],[data-card="aero"]) .card{background-color:color-mix(in srgb,var(--surface) 60%,var(--opaco));backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
/* "html" na frente: vence as regras dos componentes que vêm depois no arquivo (que devolviam a transparência) */
/* gaveta, modal e painéis: vidro fosco (~85%) com desfoque forte nos temas de vidro; sólidos nos demais */
/* janelas da frente: sólidas nos temas comuns; nos de vidro, a base do tema a 60% com desfoque moderado (transparência visível) */
html .usrpop,html .pop,html .gaveta,html .modal{background-color:var(--surface)}
html:is([data-card="glass"],[data-card="aero"]) :is(.usrpop,.pop,.gaveta,.modal){background-color:color-mix(in srgb,var(--opaco) 60%,transparent);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
html:is([data-card="glass"],[data-card="aero"]) :is(.tm,.gvbusca){background-color:color-mix(in srgb,var(--opaco) 72%,transparent)}
/* cofre (2FA) nos temas de vidro: o título e as frases ficam sobre a arte do fundo; ganham uma base fosca */
html:is([data-card="glass"],[data-card="aero"]) .mfawrap{background-color:color-mix(in srgb,var(--opaco) 80%,transparent);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border-radius:var(--r-l,16px);padding:20px 16px}
/* campos dentro das janelas translúcidas: contorno mais firme (o fundo atrás da janela varia) */
html:is([data-card="glass"],[data-card="aero"]) :is(.modal,.gaveta,.pop) .inp{border-color:color-mix(in srgb,var(--text) 72%,var(--opaco))}
/* o app tem fundo próprio (na miniatura dentro do cofre não aparece o interior por trás) */
#app{background-color:var(--bg);background-image:var(--bg-img);background-size:var(--bg-size,auto);background-position:var(--bg-pos,0 0);background-repeat:var(--bg-rep,repeat)}
:is([data-card="glass"],[data-card="aero"]) .inp{background-color:color-mix(in srgb,var(--surface) 40%,var(--opaco))}

/* cartão com cantos cortados (Cyberpunk) */
[data-card="corte"] .card{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));box-shadow:inset 0 0 0 1px var(--border-2),inset 3px 0 0 var(--pri)}
[data-card="corte"] .card.hov:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 1px #FF00AA,inset 3px 0 0 var(--pri)}
[data-card="corte"] .modal,[data-card="corte"] .gaveta{clip-path:none}
/* HUD com cantoneiras (JARVIS) */
[data-card="hud"] .card{position:relative;box-shadow:var(--sh-card);border:1px solid var(--border)}
[data-card="hud"] .card::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--pri),var(--pri)) top left/16px 2px no-repeat,linear-gradient(var(--pri),var(--pri)) top left/2px 16px no-repeat,linear-gradient(var(--pri),var(--pri)) bottom right/16px 2px no-repeat,linear-gradient(var(--pri),var(--pri)) bottom right/2px 16px no-repeat}
[data-card="hud"][data-mode="dark"] .card{backdrop-filter:blur(8px)}
[data-card="hud"] .card.hov:hover{transform:none}
/* caixas de menu (Final Fantasy 7) */
[data-card="ff"] .card{border:2px solid #3A63D8;border-radius:6px;box-shadow:var(--sh-card)}
[data-mode="dark"][data-card="ff"] .card{background:linear-gradient(180deg,#2347B8 0%,#0E2580 55%,#071552 100%);border:2px solid #E4E9FA;box-shadow:0 0 0 1px #4B5C9A,0 8px 20px rgba(0,0,0,.5);text-shadow:1px 1px 0 rgba(0,0,0,.55)}
[data-mode="dark"][data-card="ff"] .card .inp{background:rgba(4,12,48,.6)}
[data-card="ff"] .card.hov:hover{transform:translateY(-1px)}

/* detalhes por tema */
[data-theme^="cristal"] .ct .ph h1{background:linear-gradient(90deg,var(--pri),var(--pri-2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="nasa"] .it.on::before{background:#FC3D21!important}
[data-theme="starwars"][data-mode="dark"] .ph h1{color:#FFE81F;letter-spacing:.02em}
[data-theme="starwars"]:not([data-mode="dark"]) .it.on::before{background:#E11D2E!important}
[data-theme="paris"] .it.on::after{background:#B08D57!important}
[data-theme="brasil"] .hd{box-shadow:inset 0 -3px 0 #FFDF00}
[data-theme="brasil"] .sbsis{color:#002776}
[data-theme="brasil"][data-mode="dark"] .sbsis{color:#FFDF00}
[data-theme="matrix"][data-mode="dark"] body{text-shadow:0 0 6px rgba(0,255,65,.28)}
[data-theme="cyberpunk"] .ph h1{text-transform:none;letter-spacing:.02em}
[data-theme="cyberpunk"][data-mode="dark"] .ph h1{color:#FCEE0A;text-shadow:2px 0 0 #FF00AA,-2px 0 0 #00F0FF}
[data-theme="jarvis"][data-mode="dark"] .ph h1,[data-theme="jarvis"][data-mode="dark"] .kpi .v{text-shadow:0 0 12px rgba(34,211,238,.55)}
[data-theme="ironman"][data-mode="dark"] .kpi .v{color:#FCD34D}
[data-theme="interestelar"] .ph h1{text-transform:uppercase;letter-spacing:.18em;font-weight:500;font-size:18px}
[data-theme="tars"] .ph h1{text-transform:uppercase;letter-spacing:.12em;font-size:17px}
[data-theme="toystory"] .ph h1{color:#B01E19;text-shadow:2px 2px 0 #FFD23F}
[data-theme="toystory"][data-mode="dark"] .ph h1{color:#FFD23F;text-shadow:2px 2px 0 #7C5CFF}
[data-theme^="grafana"] .grp{text-transform:none;letter-spacing:0;font-size:11.5px}
[data-theme^="grafana"] .cardh{padding:8px 12px}
[data-theme^="grafana"] .cardh b{font-size:13px;font-weight:500}
[data-theme^="grafana"] .it.on::before{background:linear-gradient(180deg,#F55F3E,#FF8833)!important;width:3px}
[data-theme^="grafana"] .sbsis{color:var(--pri-texto,#FF8833)}

/* modal */
.veu{position:fixed;inset:0;background:color-mix(in srgb,#0B1220 45%,transparent);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.veu.on{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:24px;max-width:1380px;margin:0 auto;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-pop);display:flex;flex-direction:column;z-index:41;opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;transition:all .22s cubic-bezier(.2,.8,.2,1)}
[data-card="border"] .modal,[data-theme="contraste"] .modal{border:1px solid var(--border)}
.modal.on{opacity:1;transform:none;pointer-events:auto}
.modal.empurra{animation:empurra .35s}
@keyframes empurra{30%{transform:scale(1.008)}60%{transform:scale(.996)}}
.mh{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border)}
.mh b{font-size:15px;font-family:var(--font-head);font-weight:var(--head-w)}
.mh small{color:var(--text-3)}
.mb{flex:1;padding:16px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;overflow:hidden}
.mb h5{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:8px}
.mb .fld{margin-bottom:10px}
.mf{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 50%,var(--surface));border-radius:0 0 var(--r-l) var(--r-l)}
.dica-fora{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--surface);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:500;opacity:0;transition:all .2s;z-index:60;pointer-events:none}
.dica-fora.on{opacity:1;transform:translateX(-50%)}

/* gaveta de temas */
.gaveta{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--sh-pop);z-index:45;transform:translateX(102%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;display:flex;flex-direction:column}
.gaveta.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.gvh{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.gvh b{font-size:15px}
.gvl{flex:1;overflow:auto;padding:4px 12px 12px}
.gvtools{padding:12px 12px 8px;border-bottom:1px solid var(--border)}
.gvbusca{width:100%}
.gvbusca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);outline:none}
.gcat{border-bottom:1px solid var(--border)}
.gcat[hidden]{display:none}
.gcath{display:flex;align-items:center;gap:8px;width:100%;padding:12px 4px;font-weight:600;font-size:13px;color:var(--text);text-align:left}
.gcath small{font-size:11px;font-weight:600;color:var(--text-3);background:var(--surface-2);border-radius:999px;padding:1px 8px}
.gcath .ic{margin-left:auto;width:14px;height:14px;color:var(--text-3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.gcat.aberta .gcath .ic{transform:rotate(90deg)}
.gcath:hover small{color:var(--text-2)}
.gcorpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.gcat.aberta .gcorpo{grid-template-rows:1fr}
.ggrid{overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}
.gcat.aberta .ggrid{padding-bottom:12px}
.tm[hidden]{display:none}
.gvazio{display:none;text-align:center;color:var(--text-3);padding:24px 0}
.tm{border-radius:10px;border:1px solid var(--border);padding:8px;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s;background:var(--surface)}
.tm:hover{transform:translateY(-1px);border-color:var(--border-2)}
.tm.on{border-color:var(--pri);box-shadow:0 0 0 2px color-mix(in srgb,var(--pri) 30%,transparent)}
.tm .pv{height:64px;border-radius:6px;display:flex;overflow:hidden;margin-bottom:7px}
.tm .pv i{display:block}
.tm b{font-size:12.5px;display:block}
.tm small{font-size:11px;color:var(--text-3);line-height:1.3;display:block}
.gvg{grid-column:1/-1;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);padding:10px 2px 0}
.gvg span{font-weight:500;opacity:.7;margin-left:4px}
.gvg:first-child{padding-top:2px}
.gvf{padding:12px 18px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-3)}
.gaveta.on~.reini,.modal.on~.reini{display:none}

/* ======================= RESPONSIVO =======================
   celular ≤ 767 · tablet 768–1023 · notebook 1024–1919 · monitor ≥ 1920 */
.so-movel{display:none!important}
.veu-menu{display:none}
.ct>*{max-width:2880px;margin-left:auto;margin-right:auto}
@media (min-width:1920px){
 .ct{padding:26px 32px 32px}
 .kpis{gap:18px}.grid2{gap:18px}
}
@media (max-width:1279px){
 .busca{width:200px}
}
@media (max-width:1023px){
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .grid2{grid-template-columns:minmax(0,1fr);gap:12px}
 .ph{flex-wrap:wrap}
 .ph>div:first-child{flex-basis:100%}
 .mb{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
 .so-movel{display:inline-flex!important}
 /* menu vira gaveta pela esquerda */
 .sb{position:fixed;left:0;top:0;bottom:0;width:280px!important;transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:60;box-shadow:var(--sh-pop);background-color:var(--opaco,var(--frame))}
 html[data-gaveta="aberta"] .sb{transform:none}
 .veu-menu{display:block;position:fixed;inset:0;z-index:59;background:color-mix(in srgb,#0B1220 45%,transparent);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
 html[data-gaveta="aberta"] .veu-menu{opacity:1;pointer-events:auto}
 .recolher{display:none!important}
 /* cabeçalho compacto */
 .hd{padding:0 10px;gap:2px;height:52px}
 .trilha{font-size:0;gap:0;min-width:0;flex:1}
 .trilha .ic{display:none}
 .trilha b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hd>span[style*="flex:1"]{display:none}
 .busca{width:34px;padding:0;justify-content:center;font-size:0;box-shadow:none;background:transparent}
 .busca .ic{width:18px;height:18px;color:var(--hd-text-2,var(--text-2))}
 .busca .kbd{display:none}
 /* conteúdo */
 .ct{padding:14px 12px 24px}
 .ph{gap:10px;margin-bottom:12px}
 .ph h1{font-size:19px}
 .seg{flex:1;justify-content:space-between}.seg button{flex:1}
 .ph .bp{flex-basis:100%}
 .kpis{gap:10px}
 .kpi{padding:12px}.kpi .v{font-size:20px}
 .grid2>.card:first-child{overflow-x:auto}
 .grid2 table{min-width:560px}
 .cardh{flex-wrap:wrap}
 /* modal vira folha de tela cheia, corpo rola */
 .modal{inset:0;border-radius:0;max-width:none}
 .mb{grid-template-columns:minmax(0,1fr);overflow:auto;gap:12px;padding:14px}
 .mf{border-radius:0}
 .mf>span:first-child{display:none}
 /* gaveta de temas ocupa a largura */
 .gaveta{width:100vw}
 .reini{right:8px;bottom:8px;font-size:11px}
}
@media (max-width:420px){
 .vault{width:200px;height:200px}
 .digitos{gap:6px}.digitos input{width:42px;height:50px}
 .lgcard{padding:24px 20px 20px}
}
.notrans,.notrans *{transition:none!important}
.reini{position:fixed;right:16px;bottom:16px;z-index:70;font-size:11.5px;height:30px!important;opacity:.85}