/* ================================================================
   JUSTIÇA 5.0 — style.css (front novo). NÃO editar à mão: gerado do
   _shell.html + _auth.css + módulos de runtime + _delta.css.
   ================================================================ */

/* ===== 1. DESIGN SYSTEM (herdado dos aprovados) ===== */

/* ===================================================================
   JUSTIÇA 5.0 — DESIGN SYSTEM (herdado dos aprovados em /Selecionados)
   Regras: sem glow/neon · sem pill genérico · sem eyebrow MAIÚSCULO
           tipografia Roboto · ilustração flat animada · hairlines
   =================================================================== */
:root{
  --bg:#F3F6FC;--card:#FFFFFF;--panel:#FFFFFF;--line:rgba(14,32,66,.1);--line-2:rgba(14,32,66,.15);
  --txt:#0C1424;--txt-2:#4A5670;--txt-3:#8A93A8;--acc:#2F7EF0;--acc-d:#0e3fa0;--ok:#0FA968;--warn:#E08A0B;--err:#DC3A3A;
  --font:"Roboto",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);color:var(--txt);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
svg{display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.mono{font-family:var(--mono)}::selection{background:rgba(47,126,240,.22)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(14,32,66,.14);border-radius:10px;border:3px solid transparent;background-clip:content-box}
.hide{display:none!important}

/* ==== NAV flutuante com cantos côncavos (aprovado) ==== */
.pageblur{position:fixed;inset:0;z-index:45;background:rgba(20,32,60,.10);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.pageblur.on{opacity:1;pointer-events:auto;backdrop-filter:blur(2.5px) saturate(106%);-webkit-backdrop-filter:blur(2.5px) saturate(106%)}
.navwrap{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100vw - 32px));--nav-bg:#fff;--fill-line:rgba(14,32,66,.14);--nav-shadow:0 26px 60px -30px rgba(14,32,66,.35)}
.fill{position:absolute;top:0;width:20px;height:20px;pointer-events:none;z-index:1}
.fill.l{left:-20px;background:radial-gradient(circle 20px at 0 20px,transparent 19.15px,var(--fill-line) 19.45px 20.05px,var(--nav-bg) 20.35px)}
.fill.r{right:-20px;background:radial-gradient(circle 20px at 20px 20px,transparent 19.15px,var(--fill-line) 19.45px 20.05px,var(--nav-bg) 20.35px)}
.navshell{position:relative;width:100%;background:#fff;border:1px solid rgba(14,32,66,.14);border-top:none;border-radius:0 0 20px 20px;box-shadow:0 22px 60px -26px rgba(14,32,66,.32),inset 0 1px 0 rgba(255,255,255,.7);transition:box-shadow .3s var(--ease)}
.navshell.open{box-shadow:0 42px 100px -30px rgba(14,32,66,.42),0 0 0 1px rgba(47,126,240,.25);--fill-line:rgba(47,126,240,.25)}
.pill{display:flex;align-items:center;gap:5px;padding:11px 12px 11px 15px;height:62px}
.logo{display:flex;align-items:center;gap:10px;flex:none;margin-right:4px;cursor:pointer}
.brandlogo{height:28px;width:auto;display:block}
.topic{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:11px;font-size:13.5px;font-weight:500;color:var(--txt-2);transition:.16s var(--ease);cursor:pointer;white-space:nowrap}
.topic svg.chev{width:12px;height:12px;opacity:.6;transition:transform .24s var(--ease)}
.topic:hover{color:var(--txt);background:rgba(14,32,66,.05)}.topic.on{color:var(--txt)}.topic.on svg.chev{transform:rotate(180deg)}
.topic.adm{color:var(--acc);font-weight:600}
.nspring{flex:1}
.av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(140deg,#2F7EF0,#0e3fa0);border:1px solid rgba(255,255,255,.3);cursor:pointer;flex:none}
.dropzone{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--nav-shadow);padding:14px}
.navshell.open .dropzone{opacity:1;transform:none;pointer-events:auto}
.menu{display:none;grid-template-columns:1.35fr 1fr 1fr;gap:10px}.menu.active{display:grid}
.mcard{position:relative;overflow:hidden;border-radius:15px;border:1px solid var(--line);background:#fff;padding:14px;cursor:pointer;box-shadow:0 1px 2px rgba(14,32,66,.05),0 10px 22px -16px rgba(14,32,66,.25);opacity:0;transform:translateY(10px);transition:opacity .34s var(--ease),transform .34s var(--ease),border-color .18s,box-shadow .28s var(--ease)}
.navshell.open .menu.active .mcard{opacity:1;transform:none}
.mcard:hover{border-color:var(--line-2);box-shadow:0 8px 16px rgba(14,32,66,.06),0 26px 50px -26px rgba(14,32,66,.34)}
.mcard .cap{margin-top:12px}.mcard b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;display:block}.mcard span{font-size:11px;color:var(--txt-3)}
.mcard.big{grid-row:span 2;display:flex;flex-direction:column}.mcard.big .body{flex:1;display:flex;align-items:center}.mcard.big b{font-size:16px}
.mcard .cta{margin-top:8px;color:var(--mc,var(--acc));font-weight:700;font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
.menu.active .mcard:nth-child(1){transition-delay:.03s}.menu.active .mcard:nth-child(2){transition-delay:.07s}.menu.active .mcard:nth-child(3){transition-delay:.11s}.menu.active .mcard:nth-child(4){transition-delay:.15s}.menu.active .mcard:nth-child(5){transition-delay:.19s}.menu.active .mcard:nth-child(6){transition-delay:.23s}

/* menu da conta (avatar) */
.acct{position:absolute;right:12px;top:calc(100% + 8px);z-index:6;width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--nav-shadow);padding:8px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s var(--ease)}
.acct.on{opacity:1;transform:none;pointer-events:auto}
.acct .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct .who b{display:block;font-size:13.5px}.acct .who span{font-size:11.5px;color:var(--txt-3)}
.acct a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13.5px;color:var(--txt-2);cursor:pointer}
.acct a:hover{background:rgba(14,32,66,.04);color:var(--txt)}
.acct a svg{width:17px;height:17px}
.acct a.danger{color:var(--err)}.acct a.danger:hover{background:rgba(220,58,58,.07)}

/* chip de 2FA no topo */
.tfa{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 11px;border-radius:11px;border:1px solid var(--line);background:rgba(14,32,66,.03);color:var(--txt-2);font-size:12.5px;font-weight:600;cursor:pointer;flex:none;transition:.16s var(--ease)}
.tfa:hover{border-color:var(--line-2);color:var(--txt)}
.tfa .ring{width:18px;height:18px;flex:none}
.tfa .ring circle{fill:none;stroke-width:3}
.tfa code{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
.tfapop{position:absolute;right:60px;top:calc(100% + 8px);z-index:6;width:290px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--nav-shadow);padding:14px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s var(--ease)}
.tfapop.on{opacity:1;transform:none;pointer-events:auto}

.statusdot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ok)}
.statusdot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.statusdot.off{color:var(--txt-3)}.statusdot.warn{color:var(--warn)}.statusdot.err{color:var(--err)}

/* ==== LAYOUT das páginas ==== */
.wrap{max-width:1240px;margin:0 auto;padding:104px 24px 90px}
.page{display:none;animation:pgin .34s var(--ease) both}
.page.on{display:block}
@keyframes pgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hi{font-size:14px;color:var(--txt-2);font-weight:500}
h1.name{font-size:42px;font-weight:800;letter-spacing:-.03em;margin:4px 0 8px;line-height:1}

/* ==== PANEL (card branco padrão) ==== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(14,32,66,.05),0 14px 30px -22px rgba(14,32,66,.2);overflow:hidden}
.panel+.panel{margin-top:16px}
.panel-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}

.panel-h .tx{flex:1;min-width:0}
.panel-h b{font-size:15px;font-weight:700;letter-spacing:-.01em;display:block}
.panel-h span{font-size:12px;color:var(--txt-3)}
.panel-b{padding:20px}
.panel-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#FBFCFE}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.split{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.g2,.g3,.g4,.split{grid-template-columns:1fr}}

/* ==== FORMULÁRIOS ==== */
.fld{margin-bottom:14px}
.fld label,.lbl{display:block;font-size:12px;font-weight:600;color:var(--txt-2);margin-bottom:6px}
.ipt,.sel,.txa{width:100%;border:1px solid var(--line-2);border-radius:11px;background:#F8FAFD;color:var(--txt);font:inherit;font-size:14px;padding:0 13px;height:44px;outline:none;transition:.16s var(--ease)}

.ipt:focus,.sel:focus,.txa:focus{border-color:var(--acc);background:#fff;box-shadow:0 0 0 4px rgba(47,126,240,.12)}
.ipt::placeholder,.txa::placeholder{color:var(--txt-3)}

.iptwrap{position:relative;display:flex;align-items:center}
.iptwrap .ipt{padding-right:76px}
.iptacts{position:absolute;right:6px;display:flex;gap:2px}
.ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--txt-3);transition:.14s}
.ib:hover{background:rgba(14,32,66,.06);color:var(--txt)}
.ib svg{width:16px;height:16px}
.hint{font-size:11.5px;color:var(--txt-3);margin-top:6px;line-height:1.5}

.sub-h{display:flex;align-items:center;gap:9px;margin:22px 0 12px}
.sub-h:first-child{margin-top:0}
.sub-h b{font-size:13.5px;font-weight:700}

/* ==== BOTÕES ==== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;background:var(--acc);color:#fff;font-size:13.5px;font-weight:700;transition:.16s var(--ease);box-shadow:0 8px 18px -8px rgba(47,126,240,.65)}
.btn:hover{background:#3F8CF6;transform:translateY(-1px)}.btn:active{transform:scale(.99)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:#fff;color:var(--txt-2);border:1px solid var(--line);box-shadow:none;font-weight:600}
.btn.ghost:hover{color:var(--txt);border-color:var(--line-2);background:#fff}
.btn.danger{background:var(--err);box-shadow:0 8px 18px -8px rgba(220,58,58,.6)}.btn.danger:hover{background:#e14b4b}
.btn.ok{background:var(--ok);box-shadow:0 8px 18px -8px rgba(15,169,104,.6)}.btn.ok:hover{background:#14bd77}
.btn.sm{height:34px;padding:0 13px;font-size:12.5px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ==== ABAS ==== */
.tabs{display:flex;gap:4px;padding:5px;background:#EEF2F9;border:1px solid var(--line);border-radius:13px;overflow-x:auto;margin-bottom:16px}
.tabs button{height:34px;padding:0 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--txt-2);white-space:nowrap;transition:.15s var(--ease)}
.tabs button.on{background:#fff;color:var(--txt);box-shadow:0 2px 6px rgba(14,32,66,.1)}

/* ==== TABELA ==== */
.tblwrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}

/* ==== LISTAS / ITENS ==== */
.list{display:flex;flex-direction:column;gap:9px}
.li{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer;transition:.16s var(--ease)}
.li:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 10px 22px -18px rgba(14,32,66,.5)}
.li.on{border-color:rgba(47,126,240,.45);background:rgba(47,126,240,.04)}

.li .tx{flex:1;min-width:0}
.li .tx b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .tx span{font-size:11.5px;color:var(--txt-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .meta{font-size:10.5px;color:var(--txt-3);font-family:var(--mono);flex:none}

/* ==== KPI ==== */
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 18px}
.kpi .k{font-size:11.5px;color:var(--txt-3);font-weight:600}
.kpi .v{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:5px}
.kpi .d{font-size:11.5px;font-weight:700;margin-top:3px;color:var(--ok)}

/* ==== CHIPS ==== */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 11px;border-radius:9px;background:rgba(47,126,240,.08);border:1px solid rgba(47,126,240,.18);color:var(--acc);font-size:11.5px;font-weight:600}
.chip.g{background:rgba(15,169,104,.09);border-color:rgba(15,169,104,.2);color:var(--ok)}
.chip.n{background:rgba(14,32,66,.05);border-color:var(--line);color:var(--txt-2)}
.chip.mono{font-family:var(--mono)}

/* ==== ALERTA ==== */
.alert{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:13px;font-size:13px;line-height:1.55;margin-bottom:16px}
.alert svg{width:17px;height:17px;flex:none;margin-top:1px}
.alert.info{background:rgba(47,126,240,.07);border:1px solid rgba(47,126,240,.2);color:#1c4f9e}
.alert.ok{background:rgba(15,169,104,.08);border:1px solid rgba(15,169,104,.22);color:#0b7c4d}
.alert.warn{background:rgba(224,138,11,.09);border:1px solid rgba(224,138,11,.24);color:#8a5e10}
.alert.err{background:rgba(220,58,58,.07);border:1px solid rgba(220,58,58,.22);color:#a92c2c}

/* ==== ESTADO VAZIO ==== */
.empty{text-align:center;padding:44px 20px;color:var(--txt-3)}
.empty svg{width:78px;height:78px;margin:0 auto 14px;opacity:.85}
.empty b{display:block;font-size:14.5px;color:var(--txt-2);font-weight:600;margin-bottom:4px}
.empty span{font-size:12.5px}

/* ==== UPLOAD ==== */
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:26px;text-align:center;background:#FAFBFE;cursor:pointer;transition:.18s var(--ease)}
.drop:hover{border-color:var(--acc);background:rgba(47,126,240,.04)}
.drop svg{width:34px;height:34px;margin:0 auto 10px;color:var(--acc)}
.drop b{display:block;font-size:13.5px;font-weight:600}
.drop span{font-size:11.5px;color:var(--txt-3)}

/* ==== CÓDIGO / TOKEN ==== */
.codebox{background:#0C1424;border-radius:13px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;color:#cdd7ea;line-height:1.75;overflow-x:auto}
.codebox .c{color:#7f8aa3}.codebox .g{color:#5ee0a5}.codebox .b{color:#7FB0F6}

/* ==== PROGRESSO ==== */
.prog{height:7px;border-radius:4px;background:rgba(14,32,66,.08);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--ok));border-radius:4px}

/* ==== MODAL ==== */
/* .mask fica display:none quando fechado — senao 49 camadas de backdrop-filter
   de tela cheia ficam vivas ao mesmo tempo e o navegador para de pintar a pagina */

.modal{width:min(560px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:20px;border:1px solid var(--line-2);box-shadow:0 50px 110px -40px rgba(14,32,66,.6)}

/* ==== TOAST ==== */

.toast{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:13px;padding:13px 16px;box-shadow:0 20px 45px -20px rgba(14,32,66,.4);font-size:13px;min-width:280px}
.toast.err{border-left-color:var(--err)}.toast.warn{border-left-color:var(--warn)}

/* ==== BENTO da home (ilustrações aprovadas) ==== */

.mod{position:relative;overflow:hidden;border-radius:20px;background:var(--card);border:1px solid var(--line);padding:22px;cursor:pointer;box-shadow:0 1px 2px rgba(14,32,66,.05),0 14px 30px -22px rgba(14,32,66,.2);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s var(--ease)}
.mod:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 8px 16px rgba(14,32,66,.06),0 28px 54px -26px rgba(14,32,66,.34)}
.mod h3{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.04;color:var(--txt)}
.mod p{color:var(--txt-2);font-size:12.5px;margin-top:5px}
.r2{grid-row:span 2}

.illu{padding:0!important;overflow:hidden}
.illu .scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot-h{position:absolute;left:22px;bottom:19px;z-index:2}.foot-h h3{font-size:20px}.foot-h p{margin-top:2px}

/* animações das ilustrações (aprovadas) */
.wl{transform-box:fill-box;transform-origin:left center;animation:wl 7s var(--ease) infinite}
.wl.d2{animation-delay:.35s}.wl.d3{animation-delay:.7s}
@keyframes wl{0%{transform:scaleX(0)}20%{transform:scaleX(1)}80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}

.spk{transform-box:fill-box;transform-origin:center;animation:spk 7s var(--ease) infinite}
.spk.s2{animation-delay:.5s}
@keyframes spk{0%,68%,100%{transform:scale(0);opacity:0}12%,32%{transform:scale(1);opacity:.95}}

.pop{transform-box:fill-box;transform-origin:center;animation:pop 7s var(--ease) infinite}
@keyframes pop{0%,14%{transform:scale(0)}30%,84%{transform:scale(1)}96%,100%{transform:scale(0)}}

.gbar{transform-box:fill-box;transform-origin:center bottom;animation:gbar 7s var(--ease) infinite}
@keyframes gbar{0%{transform:scaleY(.06)}34%{transform:scaleY(1)}82%{transform:scaleY(1)}100%{transform:scaleY(.06)}}

.floaty{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.wl,.penbob,.spk,.wv,.pop,.tarja,.gbar,.edge,.floaty{animation:none!important}.wl{transform:none}.spk,.pop{opacity:1;transform:scale(1)}.gbar{transform:scaleY(1)}}
@media(max-width:1000px){.r2{grid-row:auto}.topic .t{display:none}.menu{grid-template-columns:1fr}}

/* ===== 2. TELA DE ACESSO (escopo #auth) ===== */

/* ================= TELA DE ACESSO (escopada em #auth) ================= */
#auth{position:fixed;inset:0;z-index:100;background:var(--bg);overflow:auto;--amber:#B67C1E}
#auth.hide{display:none!important}

#net{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .6s ease}
#auth .glyphs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#auth .gl{position:absolute;color:var(--acc);opacity:0;animation:aFloat linear infinite;font-weight:500}
#auth .gl.mono{font-family:var(--mono)}
@keyframes aFloat{0%{opacity:0;transform:translateY(40px) rotate(0)}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{opacity:0;transform:translateY(-70px) rotate(var(--rot))}}
#auth .stage{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 22px}
#auth .stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(14,32,66,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.55;pointer-events:none;mask:radial-gradient(600px 400px at 50% 30%,#000,transparent 75%)}
#auth .glow{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:660px;height:440px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(47,126,240,.18),rgba(47,126,240,.05) 55%,transparent 74%);filter:blur(4px);animation:aBreathe 6.5s ease-in-out infinite;animation-delay:2.6s;opacity:0}
@keyframes aBreathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
#auth .brand{position:relative;text-align:center;margin-bottom:30px}
#auth .logo-wrap{position:relative;display:inline-block;animation:aIntro 2.7s var(--ease) both}
@keyframes aIntro{0%{opacity:0;transform:translateY(28vh) scale(.3);filter:blur(16px)}30%{opacity:1;transform:translateY(28vh) scale(4);filter:blur(0)}55%{opacity:1;transform:translateY(28vh) scale(4);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
#auth .logo-wrap .ring{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:1.5px solid var(--acc);opacity:0;pointer-events:none}
#auth .ring.r1{animation:aPing 2.4s var(--ease) 2.65s 1 forwards}
#auth .ring.r2{animation:aPing 2.4s var(--ease) 3s 1 forwards}
@keyframes aPing{0%{transform:scale(.5);opacity:.4}80%{opacity:0}100%{transform:scale(1.8);opacity:0}}
#auth .brand .logo{position:relative;height:80px;width:auto;margin:0 auto;display:block;filter:drop-shadow(0 14px 34px rgba(47,126,240,.28))}
#auth .brand .tag{margin-top:16px;font-size:14.5px;color:var(--txt-2);font-weight:500;animation:aRise .8s var(--ease) 2.55s both}
#auth .brand .tag b{color:var(--txt)}
@keyframes aRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#auth .card{position:relative;width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 30px 70px -34px rgba(14,32,66,.32),0 2px 6px rgba(14,32,66,.05);animation:aRise .8s var(--ease) 2.75s both}
#auth .tabs{display:flex;background:#EEF2F9;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:22px;overflow:visible}
#auth .tabs button{flex:1;height:38px;padding:0;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--txt-2);transition:.16s var(--ease);white-space:nowrap;background:none;box-shadow:none}
#auth .tabs button.on{background:var(--acc);color:#fff;box-shadow:0 4px 12px -4px rgba(47,126,240,.55)}
#auth .field{margin-bottom:13px;min-width:0}
#auth .field label{font-size:12px;font-weight:600;color:var(--txt-2);display:block;margin-bottom:6px}
#auth .inp{height:46px;min-width:0;border:1px solid var(--line-2);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px;background:#F7F9FD;transition:.16s var(--ease)}
#auth .inp:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px rgba(47,126,240,.12);background:#fff}
#auth .inp svg{width:17px;height:17px;color:var(--txt-3);flex:none}
#auth .inp input{flex:1;border:none;outline:none;font:inherit;font-size:14.5px;color:var(--txt);background:none;min-width:0;width:100%;height:auto;padding:0;border-radius:0;box-shadow:none}
#auth .inp input::placeholder{color:var(--txt-3)}
#auth .inp .eye{cursor:pointer;color:var(--txt-3)}
#auth .rowlink{display:flex;justify-content:flex-end;margin:2px 0 18px}
#auth .rowlink a{font-size:13px;color:var(--acc);font-weight:600;cursor:pointer}
#auth .btn{width:100%;height:48px;border-radius:12px;background:var(--acc);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;padding:0;box-shadow:0 12px 24px -10px rgba(47,126,240,.6)}
#auth .btn:hover{background:#3F8CF6;transform:translateY(-1px)}
#auth .alt{text-align:center;font-size:13.5px;color:var(--txt-3);margin-top:18px}
#auth .alt a{color:var(--acc);font-weight:600;cursor:pointer}
#auth .restrict{display:flex;gap:9px;align-items:flex-start;background:rgba(182,124,30,.08);border:1px solid rgba(182,124,30,.22);color:#9a6a1a;border-radius:11px;padding:10px 12px;font-size:12px;margin-bottom:18px;line-height:1.45}
#auth .restrict svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--amber)}
#auth .grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#auth .foot{position:relative;margin-top:22px;color:var(--txt-3);font-size:12px;text-align:center;animation:aRise .8s var(--ease) 2.95s both}

#auth h2{letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){#auth *{animation:none!important}#auth .gl{opacity:var(--o)}#auth .glow{opacity:.9}}

/* --- audit --- */

/* =====================================================================
   Módulo AUDIT — re-vestimenta no idioma visual novo (Justiça 5.0).
   Classes criadas em runtime pelo app.js. Usa só tokens do _shell.html:
   --bg --card --panel --line --line-2 --txt --txt-2 --txt-3
   --acc --acc-d --ok --warn --err --font --mono --ease
   ===================================================================== */

/* ---------------------------------------------------------------------
   .audit-badge — selo inline (app.js: in_memory on/off, statusBadge 1G/2G,
   _userRoleBadge admin/aprovado/pendente). Estados: .ok .warn .off.
   Pode conter um <svg class="ico"> (check) ou texto curto.
   --------------------------------------------------------------------- */
.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  vertical-align: middle;
  background: rgba(14, 32, 66, .06);   /* neutro por padrão */
  color: var(--txt-3);
}
.audit-badge .ico {                     /* checkmark svg dentro do selo ok */
  width: 12px;
  height: 12px;
}
/* estado sucesso (ok / admin / aprovado / on) */
.audit-badge.ok {
  background: rgba(15, 169, 104, .12);
  color: var(--ok);
}
/* estado atenção (pending / pendente) */
.audit-badge.warn {
  background: rgba(224, 138, 11, .12);
  color: var(--warn);
}
/* estado inativo (off / offline / desconhecido) */
.audit-badge.off {
  background: rgba(14, 32, 66, .06);
  color: var(--txt-3);
}

/* ---------------------------------------------------------------------
   .audit-token-card — cartão da lista de tokens (app.js: renderAuditTokenList).
   data-token. Clicável.
   Estado: .selected. Contém .audit-token-row.
   --------------------------------------------------------------------- */
.audit-token-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 32, 66, .05);
  transition: border-color .16s var(--ease), box-shadow .28s var(--ease), background .16s var(--ease);
}
.audit-token-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 10px 22px -18px rgba(14, 32, 66, .5);
}
.audit-token-card.selected {
  border-color: var(--acc);
  background: rgba(47, 126, 240, .05);
  box-shadow: 0 0 0 3px rgba(47, 126, 240, .12);
}

/* ---------------------------------------------------------------------
   .audit-token-row — linha interna do cartão (flex, dois lados).
   Modificadores: .small (fonte menor), .muted (texto secundário).
   Conteúdo: <strong>, <code>, <span>, .audit-badge.
   --------------------------------------------------------------------- */
.audit-token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 13.5px;
  color: var(--txt);
}
.audit-token-row:last-child {
  margin-bottom: 0;
}
.audit-token-row strong {
  color: var(--txt);
  font-weight: 600;
}
.audit-token-row.small {
  font-size: 11.5px;
}
.audit-token-row.muted {
  color: var(--txt-3);
}
.audit-token-row code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--txt-2);
  letter-spacing: .03em;
}

/* ---------------------------------------------------------------------
   .admin-actions-table — tabela de ações do admin (app.js: renderAdminActions,
   aba Auditoria → Ações Admin). thead/tbody, colunas Data/Ação/Admin/Alvo/IP.
   Célula de IP recebe .muted.
   --------------------------------------------------------------------- */
.admin-actions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--txt-2);
}
.admin-actions-table th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt-3);
  background: #FAFBFE;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-actions-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--txt-2);
  vertical-align: top;
}
.admin-actions-table tbody tr:hover {
  background: rgba(47, 126, 240, .04);
}
.admin-actions-table td.muted {
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* ---------------------------------------------------------------------
   .log-line — linha do stream de log (app.js: renderAuditLogs +
   classifyLogLine). Estados: .err .warn .ok. Contém .log-time.
   Monoespaçada e legível em fundo claro.
   --------------------------------------------------------------------- */
.log-line {
  display: block;
  padding: 1px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--txt-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.log-line.err  { color: var(--err); }
.log-line.warn { color: var(--warn); }
.log-line.ok   { color: var(--ok); }

/* ---------------------------------------------------------------------
   .log-time — carimbo de hora no início da linha de log (dentro de .log-line).
   Discreto, não selecionável; acompanha o tom do estado da linha.
   --------------------------------------------------------------------- */
.log-time {
  margin-right: 8px;
  color: var(--txt-3);
  user-select: none;
}
.log-line.err  .log-time { color: rgba(220, 58, 58, .6); }
.log-line.warn .log-time { color: rgba(224, 138, 11, .6); }
.log-line.ok   .log-time { color: rgba(15, 169, 104, .6); }

/* ---------------------------------------------------------------------
   .skel-row — placeholder animado de carregamento (app.js: SKELETON_HTML).
   Brilho suave varrendo — sem neon, tons frios do sistema.
   --------------------------------------------------------------------- */
.skel-row {
  height: 56px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(14, 32, 66, .04) 25%,
    rgba(47, 126, 240, .07) 50%,
    rgba(14, 32, 66, .04) 75%);
  background-size: 200% 100%;
  animation: auditSkelWave 1.2s ease-in-out infinite;
}
@keyframes auditSkelWave {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   .status-item — tile de status do dashboard e linha de lista genérica
   (app.js: vários renders; usa .label / .value nos tiles). Muitos usos
   sobrescrevem display/margin via style inline — aqui fica a base.
   --------------------------------------------------------------------- */
.status-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(14, 32, 66, .05);
  transition: border-color .16s var(--ease), box-shadow .28s var(--ease), background .16s var(--ease);
}
.status-item:hover {
  border-color: var(--line-2);
  box-shadow: 0 10px 22px -18px rgba(14, 32, 66, .5);
}
.status-item strong {
  color: var(--txt);
  font-weight: 600;
}
/* rótulo do tile — craft, sem eyebrow maiúsculo espaçado */
.status-item .label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt-3);
}
/* valor do tile */
.status-item .value {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
}

/* =====================================================================
   HISTÓRICO DO EDITOR NOVO (mnt) — mntRenderHistory() (app.js ~4076).
   Mesma classe .mh-item, porém empilhada (contém .mh-item-top, sem .mh-dot).
   Diferenciada por :has(.mh-item-top) p/ empilhar em vez de virar linha flex.
   ===================================================================== */
.mh-item:has(.mh-item-top) {
  display: block;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 4px;
}
.mh-item:has(.mh-item-top):hover { background: transparent; }
/* espaço vertical entre topo, meta e botão restaurar */
.mh-item:has(.mh-item-top) > * + * { margin-top: 6px; }

/* --- genericas --- */

/* =====================================================================
   JUSTIÇA 5.0 — CSS do módulo GENÉRICAS (re-vestido no design novo)
   Veste, no idioma do _shell.html, as classes utilitárias/genéricas que
   o app.js injeta em runtime (e as que vivem no HTML estático do shell).
   Tokens usados: --bg --card --panel --line --line-2 --txt --txt-2
   --txt-3 --acc --acc-d --ok --warn --err --mono --ease.
   Sem glow/neon, sem eyebrow MAIÚSCULO, sem pill pastel genérico.
   ===================================================================== */

/* ---- .hidden — app.js liga/desliga em views, modais, overlays, painéis
        (classList.add/remove("hidden")). Precisa vencer qualquer display. */
.hidden { display: none !important; }

/* ---- .ico — <svg class="ico"> espalhado pelo app.js (botões, listas,
        cabeçalhos). Ícone de traço que acompanha a fonte. */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: none;
  stroke-width: 2;
}

/* ---- .muted / .small — texto secundário e miúdo (app.js: "muted",
        "muted small" em metas, contadores, estados vazios). */
.muted { color: var(--txt-2); }
.small { font-size: 0.82rem; }
.muted.small { color: var(--txt-3); font-size: 0.78rem; line-height: 1.5; }
.muted code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(14, 32, 66, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--acc-d);
}

/* ---- .dot — separador inline "·" (app.js linha ~1100:
        join(' <span class="dot">·</span> ')). Só um pingo apagado. */
.dot { color: var(--txt-3); opacity: 0.7; }

/* ---- Utilitários de estado por cor (app.js liga .ok/.warn/.off/.error
        em selos e linhas). Aqui como cor de texto genérica; componentes
        específicos (audit-badge, log-line) têm regra mais específica. */
.ok    { color: var(--ok); }
.warn  { color: var(--warn); }
.off   { color: var(--txt-3); }
.error { color: var(--err); }

/* ---- .open — bandeira de "expandido" que o app.js alterna em blocos
        colapsáveis (classList.toggle("open")). Solta a altura travada. */
.open { max-height: none; }

/* ---- .spinner — anel girando dentro de botões durante ação
        (app.js: '<span class="spinner"></span> Entrando...'). */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.75;
  animation: gen-spin 0.8s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   BOTÕES
   ===================================================================== */

/* ---- .btn — esqueleto compartilhado (app.js: className = "btn " + variante).
        Sozinho é neutro; a cor vem do modificador. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease),
              border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn .ico, .btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.99); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- .btn-primary — ação principal, azul institucional
        (app.js: "btn btn-primary"). Sombra suave, sem glow. */
.btn-primary {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(47, 126, 240, 0.6);
}
.btn-primary:hover:not(:disabled) { background: #3F8CF6; transform: translateY(-1px); }

/* ---- .btn-secondary — ação neutra, contorno em hairline sobre branco. */
.btn-secondary {
  background: #fff;
  color: var(--txt-2);
  border: 1px solid var(--line);
  font-weight: 600;
}
.btn-secondary:hover:not(:disabled) { color: var(--txt); border-color: var(--line-2); background: #fff; }

/* ---- .btn-action-sm — mini-ação de linha de lista (Editar/Excluir/Usar…)
        (app.js: <button class="btn-action-sm">). Ghost discreto, sem CAIXA-ALTA. */
.btn-action-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--txt-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.14s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.btn-action-sm .ico { width: 15px; height: 15px; }
.btn-action-sm:hover:not(:disabled) { color: var(--txt); background: rgba(14, 32, 66, 0.05); border-color: var(--line); }
.btn-action-sm:disabled { opacity: 0.45; cursor: not-allowed; }

/* =====================================================================
   FORMULÁRIO
   ===================================================================== */

/* ---- .input-group — campo (rótulo + controle) do HTML do shell.
        Rótulo em caixa normal (nada de eyebrow MAIÚSCULO). */
.input-group { margin-bottom: 14px; }
.input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 6px;
}
.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #F8FAFD;
  color: var(--txt);
  font: inherit;
  font-size: 14px;
  padding: 0 13px;
  height: 44px;
  outline: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.input-group textarea {
  height: auto;
  min-height: 96px;
  padding: 11px 13px;
  resize: vertical;
  line-height: 1.55;
}
.input-group input::placeholder,
.input-group textarea::placeholder { color: var(--txt-3); }
.input-group input:hover,
.input-group textarea:hover,
.input-group select:hover { border-color: var(--line-2); }
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  border-color: var(--acc);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47, 126, 240, 0.12);
}

/* ---- .pw-wrap / .pw-toggle — campo de senha com o "olho" à direita
        (app.js: querySelectorAll(".pw-toggle")). Botão de ícone discreto. */

.pw-toggle {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--txt-3);
  cursor: pointer;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.pw-toggle:hover { color: var(--txt); background: rgba(14, 32, 66, 0.06); }
.pw-toggle svg, .pw-toggle .ico { display: block; width: 17px; height: 17px; }

/* =====================================================================
   ALERTA
   ===================================================================== */

/* ---- .alert — aviso/erro (app.js: '<div class="alert show error">…').
        Some por padrão; .show revela; barra à esquerda dá o tom. */
.alert {
  display: none;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
  animation: gen-alert-in 0.24s var(--ease) both;
}
.alert .ico, .alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
@keyframes gen-alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* .show — bandeira que torna o alerta visível (app.js sempre com .alert). */
.alert.show { display: flex; }
/* variantes de tom — texto escurecido p/ legibilidade (valores do shell). */
.alert.error,
.alert.err     { background: rgba(220, 58, 58, 0.07);  border-color: rgba(220, 58, 58, 0.22);  border-left-color: var(--err); color: #a92c2c; }
.alert.ok,
.alert.success { background: rgba(15, 169, 104, 0.08);  border-color: rgba(15, 169, 104, 0.22);  border-left-color: var(--ok);  color: #0b7c4d; }
.alert.warn    { background: rgba(224, 138, 11, 0.09);  border-color: rgba(224, 138, 11, 0.24);  border-left-color: var(--warn); color: #8a5e10; }
.alert.info    { background: rgba(47, 126, 240, 0.07);  border-color: rgba(47, 126, 240, 0.20);  border-left-color: var(--acc); color: #1c4f9e; }

/* =====================================================================
   CARD (painel branco padrão)
   ===================================================================== */

/* ---- .card — painel de conteúdo do shell. Cantos arredondados,
        hairline e sombra suave; hover só realça a borda. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(14, 32, 66, 0.05), 0 14px 30px -22px rgba(14, 32, 66, 0.2);
  transition: border-color 0.2s var(--ease), box-shadow 0.28s var(--ease);
}
.card:hover { border-color: var(--line-2); }

/* =====================================================================
   MODAL
   ===================================================================== */

/* ---- .modal-bg — cortina de tela cheia atrás do modal (HTML do shell;
        app.js mostra/esconde via .hidden). Fundo escuro + leve blur. */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  animation: gen-mask-in 0.2s var(--ease) both;
}
@keyframes gen-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- .modal — a caixa de diálogo em si. Branca, canto 20px, sombra funda. */
.modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 50px 110px -40px rgba(14, 32, 66, 0.6);
  animation: gen-modal-in 0.26s var(--ease) both;
}
@keyframes gen-modal-in { from { opacity: 0; transform: scale(0.97) translateY(10px); } to { opacity: 1; transform: none; } }
.modal h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.modal h2 .ico { width: 1.05em; height: 1.05em; color: var(--acc); }

/* ---- .modal-actions — rodapé de botões do modal, alinhados à direita. */
.modal-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* =====================================================================
   VIEW (seção de página trocável)
   ===================================================================== */

/* ---- .view — cada seção/aba do app (app.js troca visibilidade via .hidden).
        Aparece com uma entrada curta e suave. */
.view { display: block; animation: gen-view-in 0.34s var(--ease) both; }
@keyframes gen-view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
  .alert, .modal-bg, .modal, .view { animation: none; }
}

/* ===== 4. DELTA DO SHELL (aliases, .hidden, home, 2FA, modais) ===== */

/* ===================================================================
   DELTA DO SHELL — cola o app.js (sem alterá-lo) no design system novo.
   =================================================================== */

/* ---- aliases dos tokens antigos que o app.js escreve inline (style.xxx=var(--y)) ---- */
:root{
  --primary:var(--acc); --success:var(--ok); --danger:var(--err);
  --muted:var(--txt-3); --border:var(--line); --bg-soft:#EDF1FA;
}

/* ---- .hidden é O mecanismo de show/hide do app.js (toda a navegação depende disso) ---- */
.hidden{display:none!important}

/* ==================== APP SHELL + CAMADA HOME ==================== */
#app-shell{min-height:100vh}
.appwrap{max-width:1240px;margin:0 auto;padding:104px 24px 90px}
/* a HOME é página nova; o app.js não a conhece. home-on esconde as 21 views. */
#pg-home{display:none}
#app-shell.home-on .appwrap{display:none}
#app-shell.home-on #pg-home{display:block;max-width:1240px;margin:0 auto;padding:104px 24px 90px}
/* as views reais são <section class="view"> — bloco normal; .hidden as oculta. */
.view{position:relative}

/* ==================== CHIP 2FA + widgets reais no popover ==================== */
.tfa svg{width:17px;height:17px}
.tfa span{font-weight:600}
.tfapop .totp-widget{padding:11px 0;border-bottom:1px solid var(--line)}
.tfapop .totp-widget:last-of-type{border-bottom:none}
.totp-widget-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.totp-widget-lbl{font-size:11.5px;color:var(--txt-3);font-weight:600}
.totp-widget-acts{margin-left:auto;display:flex;gap:6px;align-items:center}
.totp-eye{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--txt-3);border:1px solid var(--line);background:#fff;transition:.15s var(--ease)}
.totp-eye:hover{color:var(--txt);border-color:var(--line-2)}
.totp-eye svg{width:15px;height:15px}
.totp-widget-code{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:.12em;color:var(--txt)}
.totp-widget-bar{height:4px;border-radius:2px;background:rgba(14,32,66,.08);overflow:hidden;margin-top:6px}
.totp-widget-fill{display:block;height:100%;width:0;background:var(--acc);transition:width 1s linear}
.tfahint{padding-top:11px;font-size:11.5px;color:var(--txt-3);line-height:1.5}
.tfahint a{color:var(--acc);font-weight:600;cursor:pointer}
/* linhas extras do popover: Token de autenticação + URL do MCP (espelham a página Meu Token) */
.tfa-val{font-family:var(--mono);font-size:12.5px;color:var(--txt);word-break:break-all;line-height:1.45;margin-top:2px}
.tfa-val.url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.totp-eye.on{color:#fff;background:var(--acc);border-color:var(--acc)}
.totp-eye.ok{color:#fff;background:var(--ok);border-color:var(--ok)}

/* status do Conector local (túnel): bolinha no botão Credenciais + linha no popover.
   Verde = conectado à sua máquina · vermelho = desconectado · cinza = verificando. */
.tfa{position:relative}
.conector-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-left:3px;background:var(--txt-3);
  box-shadow:0 0 0 2.5px var(--card);transition:background .2s var(--ease)}
.conector-dot[data-state="online"]{background:var(--ok)}
.conector-dot[data-state="offline"]{background:var(--err)}
.conector-dot[data-state="unknown"]{background:var(--txt-3)}
.tfa-conector{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:8px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg-soft,#EDF1FA)}
.tfa-conector-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--txt-3)}
.tfa-conector-tx{min-width:0;line-height:1.25}
.tfa-conector-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--txt)}
.tfa-conector-tx span{display:block;font-size:10.5px;color:var(--txt-3)}
.tfa-conector[data-state="online"]{border-color:color-mix(in srgb,var(--ok) 42%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.tfa-conector[data-state="online"] .tfa-conector-dot{background:var(--ok)}
.tfa-conector[data-state="offline"]{border-color:color-mix(in srgb,var(--err) 42%,var(--line));background:color-mix(in srgb,var(--err) 8%,var(--card))}
.tfa-conector[data-state="offline"] .tfa-conector-dot{background:var(--err)}

/* ==================== menu da conta — extras ==================== */
.acct .who .uc-sub{font-size:11.5px;color:var(--txt-3)}
.acct .acct-out{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:13.5px;color:var(--err);cursor:pointer;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.acct .acct-out:hover{background:rgba(220,58,58,.07)}
.acct .acct-out svg{width:17px;height:17px}

/* ==================== MODAIS — extras (genericas.css já veste .modal-bg/.modal/.modal-actions) ==================== */

.otp-input{text-align:center;letter-spacing:.4em;font-family:var(--mono);font-size:20px}

/* ==================== AUTH OVERLAY ==================== */
.auth-overlay{position:fixed;inset:0;z-index:100}

/* ---- ABAS .audit-tab (#audit-tabs) ---- */
.audit-tab{background:transparent;border:none;color:var(--txt-2);font:inherit;font-size:13px;font-weight:600;padding:8px 18px;border-radius:9px;cursor:pointer;transition:.15s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.audit-tab:hover{color:var(--txt);background:rgba(14,32,66,.04)}
.audit-tab.active{background:var(--acc);color:#fff;box-shadow:0 4px 12px -4px rgba(47,126,240,.5)}
.audit-tab .ico,.audit-tab svg{width:15px;height:15px}

/* ==================== NAV — logo maior + itens centralizados ==================== */
.navshell .brandlogo{height:44px}

/* ==================== HOME — flashcards 100% ilustrados + legenda legível ==================== */
/* TODOS os cards de módulo são .illu (ilustração animada preenchendo o card). A legenda
   (título + descrição) fica numa base que "apaga" a arte por baixo, pra nunca competir
   com o texto. A descrição completa vive no popup de hover (.mpop). */
#pg-home .illu{position:relative}
#pg-home .illu::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    var(--card) 16%,
    color-mix(in srgb,var(--card) 80%,transparent) 50%,
    transparent 100%)}
#pg-home .foot-h{left:22px;right:20px;bottom:16px;z-index:2}
#pg-home .foot-h h3{font-size:20px;line-height:1.05;letter-spacing:-.02em}
#pg-home .foot-h p{font-size:12.5px;line-height:1.42;color:var(--txt-2);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==================== MENU — thumbnails ilustrados (mesma linguagem da home, reduzidos) ==================== */
/* substituem os quadradinhos .mtile: uma cena animada compacta no topo do card, sem atrapalhar o texto. */
.mcard .mscene{position:relative;width:100%;height:66px;border-radius:11px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-soft,#EDF1FA)}
.mcard .mscene .mini{position:absolute;inset:0;width:100%;height:100%;display:block}
.mcard.big .body{display:flex;align-items:stretch;padding:0}
.mcard.big .mscene{flex:1;height:auto;min-height:124px}
/* o hover do card dá um leve zoom na cena, no lugar do antigo giro do tile */
.mcard .mscene .mini{transition:transform .3s var(--ease)}
.mcard:hover .mscene .mini{transform:scale(1.045)}

/* popup estilizado no hover — SÓ nos flashcards da home (injetado pelo shelljs) */
#pg-home .mod{position:relative;overflow:hidden}
.mpop{position:absolute;inset:0;z-index:9;background:rgba(255,255,255,.975);border-radius:inherit;
  padding:18px 20px;display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
#pg-home .mod:hover .mpop{opacity:1;visibility:visible;transform:none}
.mpop b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--txt);margin-bottom:7px}
.mpop span{font-size:12px;line-height:1.55;color:var(--txt-2);overflow:hidden}
.mpop em{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--acc)}

/* ==================== MENU DA CONTA — nome do usuário ==================== */
.acct .who-top{display:flex;align-items:center;gap:8px}
.acct .who-top b{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==================== SHELL — sem barra de rolagem horizontal ==================== */
/* clip horizontal no shell (o 100vw conta a largura da barra vertical). Só corta no
   eixo X; menus/popovers (eixo Y) ficam visíveis. */
#app-shell{overflow-x:clip}

/* fallback seguro p/ ícones inline caso o módulo genérico não cubra */
svg.ico{width:18px;height:18px;flex:none}

/* ==================== CREDENCIAIS — estados recolhidos ====================
   Linha de "já configurado" usada quando o 2FA tem QR cadastrado e quando a
   sessão do PJe está ativa: o bloco de instruções/campos se recolhe e
   fica só a confirmação + a ação de desfazer. */
.creds-done{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.creds-done > svg{width:20px;height:20px;flex:none;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,transparent);border-radius:50%;padding:3px;box-sizing:content-box}
.creds-done > div{flex:1;min-width:180px;line-height:1.35}
.creds-done b{display:block;font-size:13.5px;font-weight:700;color:var(--txt)}
.creds-done span{display:block;font-size:11.5px;color:var(--txt-3);margin-top:2px}
.creds-done .btn{flex:none}

/* ==================== HOME EM TÓPICOS ====================
   A home deixou de ser um mosaico: cada tópico é uma seção que abre e, dentro
   dela, a lista de módulos fica à esquerda e o card do módulo escolhido à
   direita (um por vez, em tamanho grande). */

/* --- faixa "Comece tudo por aqui" --- */
/* Cartão editorial: passos numerados à esquerda, cena ilustrada sangrando à
   direita (mesmo traço das artes dos módulos) e um filete de tinta no topo. */
.start-here{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:18px;margin:20px 0 30px;
  padding:26px 30px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(112deg,#F3F7FE 0%,var(--card) 54%);
  box-shadow:0 1px 2px rgba(14,32,66,.05),0 20px 44px -34px rgba(14,32,66,.34)}
/* filete de tinta no topo — some nas pontas, sem "neon" */
.start-here::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,#2F7EF0 18%,#0B1E44 52%,#0FA968 84%,transparent)}
.start-tx{flex:1;min-width:250px;position:relative;z-index:2;line-height:1.35}
.start-tx b{display:block;font-size:24px;font-weight:900;letter-spacing:-.035em;color:var(--txt);margin-top:2px}
.start-tx > span{display:block;font-size:13.5px;color:var(--txt-2);margin-top:6px;max-width:52ch}

/* passos numerados (tipografia, não "pills") */
.start-steps{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.stp{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.01em;color:var(--txt-3)}
.stp i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;font-style:normal;
  font-size:10.5px;font-weight:800;color:var(--txt-2);border:1.6px solid var(--line-2)}
.stp-line{width:34px;height:1.6px;background:var(--line-2);border-radius:2px}

/* cena ilustrada à direita */
.start-art{position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:min(390px,42%);height:auto;z-index:1;pointer-events:none}
@media(max-width:1000px){.start-art{opacity:.16;right:-40px}}
@media(max-width:620px){.start-art{display:none}}

/* a chave desliza e "encaixa" de tempos em tempos */
.key-in{transform-box:view-box;animation:keyIn 7s var(--ease) infinite}
@keyframes keyIn{0%,10%{transform:translate(70px,128px) rotate(-24deg);opacity:0}
  26%,74%{transform:translate(96px,128px) rotate(-24deg);opacity:1}
  92%,100%{transform:translate(70px,128px) rotate(-24deg);opacity:0}}

/* botão: brilho que atravessa + a chave reage no hover */

@media (prefers-reduced-motion:reduce){
  
  .key-in{animation:none;transform:translate(96px,128px) rotate(-24deg)}
}

/* ==================== MEU TOKEN — URL do MCP e token ====================
   Moram no cartão "Meu Token" da tela Credenciais e Token. */
.tok-fields{display:flex;flex-direction:column;gap:16px}
.tok-fields.hidden{display:none!important}
.tok-field label,.tok-field .lbl{display:flex;align-items:baseline;gap:9px;font-size:12px;font-weight:700;
  color:var(--txt-2);margin-bottom:7px}
.tok-field label em,.tok-field .lbl em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--txt-3);
  font-variant:small-caps;letter-spacing:.05em}
.tok-obs{font-size:12px;color:var(--txt-3);line-height:1.55;margin:0;max-width:82ch}
/* aviso de credencial (mesma linguagem do aviso de spam da tela de acesso) */
.tok-aviso{display:flex;gap:10px;align-items:flex-start;max-width:82ch;background:rgba(224,138,11,.10);
  border:1px solid rgba(224,138,11,.42);border-left:4px solid var(--warn);color:#7a4f06;
  border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.5}
.tok-aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--warn)}
.tok-aviso b{color:#5c3a00;font-weight:700}

/* ==================== CABEÇALHO ILUSTRADO — padrão de TODAS as telas ====================
   Mesmo desenho do "Meu Token": filete de tinta no topo (na cor do módulo),
   título grande à esquerda e a ilustração daquele módulo à direita. */
.vhead{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:22px;margin:0 0 22px;
  padding:26px 30px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(112deg,color-mix(in srgb,var(--mc,#2F7EF0) 7%,var(--card)),var(--card) 58%);
  box-shadow:0 1px 2px rgba(14,32,66,.05),0 20px 44px -34px rgba(14,32,66,.34)}
.vhead::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--mc,#2F7EF0) 20%,#0B1E44 56%,transparent)}
.vhead-tx{flex:1;min-width:0;position:relative;z-index:2}
.vhead-tx h1{font-size:clamp(25px,2.8vw,33px);font-weight:900;letter-spacing:-.035em;line-height:1.08;color:var(--txt)}
.vhead-tx p{font-size:13.5px;color:var(--txt-2);margin-top:8px;max-width:58ch;line-height:1.5}
.vhead-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.vhead-art{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:min(300px,30%);height:auto;max-height:82%;z-index:1;pointer-events:none;
  border-radius:16px;overflow:hidden}
@media(max-width:980px){.vhead-art{opacity:.14;right:-20px}}
@media(max-width:620px){.vhead-art{display:none}.vhead{padding:22px}}

/* --- cabeçalho: o texto (e as linhas divisórias) param antes da ilustração --- */
@media(min-width:981px){
  .vhead-tx{max-width:calc(100% - 330px)}
}
/* a ilustração fica acima do fundo, mas nunca por cima do texto */
.vhead-art{z-index:1}
.vhead-tx{z-index:2}

/* ==================== FUNDO DO SISTEMA ====================
   A cabeça do Justiça 5.0 como marca d'água e a mesma malha de pontos do login,
   os dois quase sumindo — detalhe atrás do conteúdo, nunca competindo com ele. */
.appbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.appbg::before{content:"";position:absolute;right:-4%;bottom:-14%;
  width:min(720px,58vw);height:min(720px,58vw);
  background:url("/static/icons/icon-justica-azul.png") no-repeat center/contain;
  opacity:.06}
.appbg::after{content:"";position:absolute;left:-8%;top:-8%;
  width:min(420px,34vw);height:min(420px,34vw);
  background:url("/static/icons/icon-justica-azul.png") no-repeat center/contain;
  opacity:.02;transform:scaleX(-1)}
/* dentro do sistema a malha fica só insinuada (no login continua como era) */
#net.sutil{opacity:.78}
/* o conteúdo sempre acima do fundo */
#app-shell,.auth-overlay{position:relative;z-index:1}
@media(max-width:760px){.appbg::after{display:none}.appbg::before{opacity:.048}}
@media (prefers-reduced-motion:reduce){#net{display:none}}

/* =====================================================================
   HOME — o cartão de partida + os dois atalhos (Credenciais e Meu Token)
   ===================================================================== */
#pg-home .start-here{margin-bottom:22px}
/* download do Conector no cartão de partida */
.start-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:16px}
.start-acoes .dica{font-size:12px;color:var(--txt-3);line-height:1.45;max-width:46ch}
.start-acoes .dica b{display:inline;font-size:inherit;font-weight:600;letter-spacing:normal;margin:0;color:var(--txt-2)}  /* o .start-tx b (título do cartão) não vale aqui */
.start-acoes .dica a{color:var(--acc);font-weight:600;white-space:nowrap}
.home-atalhos{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 44px}
.home-atalhos .mod{height:264px}
@media(max-width:860px){
  .home-atalhos{grid-template-columns:1fr}
  .home-atalhos .mod{height:210px}
}

/* --- Meu Token: a URL pública aparece INTEIRA ---------------------------
   Antes era um <input> de linha única: o valor estava completo, mas os
   últimos caracteres do token ficavam para fora do campo, sem reticências
   nem sinal de corte — dava a impressão de uma URL diferente da que
   funciona. Agora é um textarea que quebra a linha e cresce até caber. */
.tok-field #dash-url{height:auto;min-height:46px;padding:12px 76px 12px 14px;
  font-size:13.5px;line-height:1.5;resize:none;overflow:hidden;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.iptwrap-url{align-items:flex-start}
.iptwrap-url .iptacts{top:8px}

/* A mensagem do .alert como um único item de flex — sem isto, o texto avulso e
   cada <strong> viram itens separados e a frase quebra em colunas (o gap de
   11px do .alert entra entre os pedaços). O ícone, quando existe, continua
   sendo o outro item, ao lado. */
.alert .alert-tx { flex: 1; min-width: 0; }

/* =====================================================================
   CÓDIGO POR E-MAIL (tela de acesso: cadastro, login e redefinição)
   O aviso de spam é a peça mais importante da tela: o e-mail de código
   costuma cair no Spam/Lixo eletrônico, e quem não o encontra desiste.
   Por isso ele é mais forte que o .restrict (âmbar sólido, barra lateral).
   ===================================================================== */
#auth .spam-aviso{display:flex;gap:10px;align-items:flex-start;background:rgba(224,138,11,.12);border:1px solid rgba(224,138,11,.45);border-left:4px solid var(--warn);color:#7a4f06;border-radius:12px;padding:12px 13px;font-size:12.5px;line-height:1.5;margin-bottom:16px}
#auth .spam-aviso svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--warn)}
#auth .spam-aviso b{color:#5c3a00;font-weight:700}
#auth .inp-codigo input{font-family:var(--mono);font-size:22px;letter-spacing:.42em;text-align:center}
#auth .cod-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 18px;font-size:12.5px}
#auth .cod-meta #cod-timer{color:var(--txt-3);font-weight:500}
#auth .cod-meta #cod-timer.expirado{color:var(--err);font-weight:600}
#auth .cod-meta a{color:var(--acc);font-weight:600;cursor:pointer;white-space:nowrap}
#auth .cod-meta a.off{color:var(--txt-3);cursor:default;pointer-events:none}

/* =====================================================================
   CREDENCIAIS E TOKEN — uma tela só (antes: "Credenciais" e "Meu Token")
   Cabeçalho; a caixa Conexões (Conector, PJe 1º e 2º grau, com a legenda
   no rodapé); e embaixo credenciais do PJe + 2FA à esquerda e o token à
   direita. Abaixo de 1000px vira uma coluna, com as credenciais primeiro.
   ===================================================================== */
/* conexões: cada ligação com o seu status, lado a lado (empilham no celular) */
#acesso-conexoes{margin-bottom:18px}
.acesso-conex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.acesso-conex .li{cursor:default}
.acesso-conex .li:hover{transform:none;box-shadow:none;border-color:var(--line)}
.acesso-conex .li .meta{font-family:var(--font)}
.acesso-conex .statusdot{font-size:12.5px;font-weight:700;white-space:nowrap}
.acesso-conex .statusdot::before{width:8px;height:8px}
.acesso-pend{font-size:12px;color:var(--txt-3);line-height:1.55;margin-top:14px}
.acesso-pend b{color:var(--txt-2);font-weight:600}
@media(max-width:860px){.acesso-conex{grid-template-columns:minmax(0,1fr)}}
/* cabeçalho só com título e texto: a ilustração acompanha a altura dele (inteira, sem corte) */
.acesso-head .vhead-art{height:calc(100% - 28px);width:auto;max-height:none;aspect-ratio:360/210}

/* grade: duas colunas; o token fica parado enquanto a coluna das credenciais
   rola (com o formulário aberto, ela é a mais alta) */
.acesso-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.acesso-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.acesso-col > .alert{margin-bottom:0}
#view-acesso .panel + .panel{margin-top:0}
#acesso-token{position:sticky;top:92px}
/* uma coluna: a coluna da esquerda "se desfaz" e a ordem vira
   aviso → credenciais → 2FA → token */
@media(max-width:999px){
  .acesso-grid{display:flex;flex-direction:column;align-items:stretch}
  .acesso-col{display:contents}
  #alert-creds{order:1}#acesso-pje{order:2}#acesso-2fa{order:3}#acesso-token{order:4;position:static}
}

/* credenciais do PJe */
.acesso-graus .sub-h{margin:0 0 10px}
.acesso-graus .fld:last-child{margin-bottom:0}
.acesso-dica{margin:14px 2px 0}
.acesso-f{justify-content:flex-end}

/* 2FA: instruções e área do QR lado a lado; empilham quando falta largura */
.acesso-2fa-setup{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:stretch}
.acesso-2fa-tx{flex:1 1 250px;min-width:0}
.acesso-2fa-tx p{font-size:12.5px;color:var(--txt-2);line-height:1.55}
.acesso-2fa-tx .hint{margin-top:8px;font-size:11.5px;color:var(--txt-3)}
.acesso-2fa-setup .drop{flex:1 1 190px;max-width:260px;display:flex;flex-direction:column;justify-content:center;padding:18px 16px}
#totp-accounts:not(:empty){margin-top:12px}

/* token */
#acesso-token-f .hint{flex:1;min-width:200px;margin-top:0}
.tok-obs code{font-family:var(--mono);font-size:11.5px;color:var(--txt-2);background:rgba(14,32,66,.05);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
/* sem token (depois de revogar) */
.acesso-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px 8px}
.acesso-vazio > svg{width:54px;height:54px;color:var(--txt-3);margin-bottom:6px}
.acesso-vazio b{font-size:14.5px;font-weight:700;color:var(--txt)}
.acesso-vazio span{font-size:12.5px;color:var(--txt-3);line-height:1.5;max-width:44ch}
.acesso-vazio .btn{margin-top:10px}

/* legenda: rodapé recolhido da caixa Conexões (abre no clique) */
.acesso-legenda{border-top:1px solid var(--line);background:#FBFCFE}
.acesso-legenda > summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 20px;cursor:pointer;
  user-select:none;font-size:12.5px;font-weight:600;color:var(--txt-2)}
.acesso-legenda > summary::-webkit-details-marker{display:none}
.acesso-legenda > summary .tx{flex:1;min-width:0}
.acesso-legenda > summary svg{width:15px;height:15px;flex:none;color:var(--txt-3);transition:transform .2s var(--ease)}
.acesso-legenda > summary:hover{color:var(--txt)}
.acesso-legenda[open] > summary svg{transform:rotate(180deg)}
.acesso-legenda-b{padding:6px 20px 18px}
.acesso-leg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}
.acesso-leg > div{display:flex;align-items:baseline;gap:12px;min-width:0}
.acesso-leg dt{flex:0 0 118px}
.acesso-leg dd{font-size:12.5px;color:var(--txt-2);line-height:1.5;min-width:0}

/* cartões estreitos (duas colunas em tela média): os campos de cada grau,
   o QR e a legenda se empilham */
#acesso-pje,#acesso-2fa,.acesso-legenda{container-type:inline-size}
@container (max-width:520px){
  .acesso-graus{grid-template-columns:minmax(0,1fr)}
  .acesso-2fa-setup .drop{max-width:none}
}
@container (max-width:900px){
  .acesso-leg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:560px){
  .acesso-leg{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:420px){
  .acesso-leg > div{flex-direction:column;gap:2px}
  .acesso-leg dt{flex:none}
}

/* ações destrutivas (remover 2FA, revogar token): contorno, não bloco vermelho —
   a confirmação vem depois, no modal */
.btn.ghost.danger{background:#fff;color:var(--err);border:1px solid color-mix(in srgb,var(--err) 32%,var(--line));box-shadow:none}
.btn.ghost.danger:hover{background:color-mix(in srgb,var(--err) 6%,#fff);border-color:color-mix(in srgb,var(--err) 55%,var(--line));color:#c22f2f}

/* nav do topo no celular: "Credenciais e Token" vira ícone e o botão de
   credenciais fica só com a chave e a bolinha do Conector (senão o avatar,
   com o "Sair", fica para fora da tela) */
.topic .topic-ico{display:none;width:18px;height:18px}
@media(max-width:620px){
  .topic .topic-ico{display:block}
  .topic .tl{display:none}
  .tfa > span:not(.conector-dot){display:none}
  .tfa{padding:0 10px}
}

/* celular */
@media(max-width:620px){
  .acesso-2fa-setup .drop{max-width:none}
  .acesso-f{flex-direction:column-reverse;align-items:stretch}
  .acesso-f .btn,#acesso-token-f .btn,.creds-done .btn{width:100%}
  .acesso-legenda > summary{padding:12px 16px}
  .acesso-legenda-b{padding:6px 16px 16px}
}