/* mundIA · estilo das áreas logadas (avaliador e equipe).
   Base preto e branco do site; o destaque vem de luz (brilho, vidro, borda que acende) e movimento curto.
   Cor só com significado técnico: verde = concluído/aprovado, âmbar = pendente, vermelho = problema,
   azul = informação. Escuro por padrão, claro opcional. Os efeitos de mouse e de entrada ficam em ../fx.js. */
:root{
  color-scheme:dark;
  --bg:#050506; --bg-2:#0b0b0d; --panel:#0e0e10; --panel-hi:#151518; --panel-2:#141417; --hover:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.17); --edge-hi:rgba(255,255,255,.20); --edge-lo:rgba(255,255,255,.05);
  --ink:#f5f5f3; --ink-2:rgba(245,245,243,.72); --ink-3:rgba(245,245,243,.52);
  --btn-bg:#f5f5f3; --btn-fg:#050506; --sheen:rgba(0,0,0,.10); --btn-glow:rgba(255,255,255,.28);
  --glow-1:rgba(255,255,255,.075); --glow-2:rgba(255,255,255,.04); --grid:rgba(255,255,255,.035); --grain:.05;
  --spot:rgba(255,255,255,.07); --spot-edge:rgba(255,255,255,.42);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 48px -32px rgba(0,0,0,.95);
  --ok:#3ddc97; --ok-bg:rgba(61,220,151,.12); --warn:#f5b942; --warn-bg:rgba(245,185,66,.12);
  --bad:#ff6b5b; --bad-bg:rgba(255,107,91,.13); --info:#6cb6ff; --info-bg:rgba(108,182,255,.12);
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --mola:cubic-bezier(.2,.75,.2,1);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#f4f4f2; --bg-2:#ebebe8; --panel:#ffffff; --panel-hi:#ffffff; --panel-2:#f5f5f3; --hover:rgba(0,0,0,.04);
    --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.18); --edge-hi:rgba(0,0,0,.12); --edge-lo:rgba(0,0,0,.05);
    --ink:#0b0b0b; --ink-2:rgba(11,11,11,.70); --ink-3:rgba(11,11,11,.58);
    --btn-bg:#0b0b0b; --btn-fg:#fff; --sheen:rgba(255,255,255,.22); --btn-glow:rgba(0,0,0,.30);
    --glow-1:rgba(0,0,0,.035); --glow-2:rgba(0,0,0,.025); --grid:rgba(0,0,0,.035); --grain:.035;
    --spot:rgba(0,0,0,.035); --spot-edge:rgba(0,0,0,.30);
    --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -30px rgba(0,0,0,.35);
    --ok:#0f7a4c; --ok-bg:rgba(15,122,76,.10); --warn:#8a5a00; --warn-bg:rgba(138,90,0,.10);
    --bad:#b42318; --bad-bg:rgba(180,35,24,.09); --info:#1d5fa8; --info-bg:rgba(29,95,168,.09);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f4f2; --bg-2:#ebebe8; --panel:#ffffff; --panel-hi:#ffffff; --panel-2:#f5f5f3; --hover:rgba(0,0,0,.04);
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.18); --edge-hi:rgba(0,0,0,.12); --edge-lo:rgba(0,0,0,.05);
  --ink:#0b0b0b; --ink-2:rgba(11,11,11,.70); --ink-3:rgba(11,11,11,.58);
  --btn-bg:#0b0b0b; --btn-fg:#fff; --sheen:rgba(255,255,255,.22); --btn-glow:rgba(0,0,0,.30);
  --glow-1:rgba(0,0,0,.035); --glow-2:rgba(0,0,0,.025); --grid:rgba(0,0,0,.035); --grain:.035;
  --spot:rgba(0,0,0,.035); --spot-edge:rgba(0,0,0,.30);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -30px rgba(0,0,0,.35);
  --ok:#0f7a4c; --ok-bg:rgba(15,122,76,.10); --warn:#8a5a00; --warn-bg:rgba(138,90,0,.10);
  --bad:#b42318; --bad-bg:rgba(180,35,24,.09); --info:#1d5fa8; --info-bg:rgba(29,95,168,.09);
}

*{box-sizing:border-box}
html{background:var(--bg);scrollbar-color:var(--line-2) transparent}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
/* atmosfera: brilho difuso + grade técnica bem fina + grão, atrás de tudo */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 55% at 88% -12%,var(--glow-1),transparent 70%),radial-gradient(55% 45% at -8% 108%,var(--glow-2),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 85%)}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTYwJyBoZWlnaHQ9JzE2MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
::selection{background:var(--ink);color:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
[hidden]{display:none!important}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(1.5rem,5vw,2.05rem);font-weight:750;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--ink) 35%,color-mix(in srgb,var(--ink) 58%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.15rem;font-weight:650}
h3{font-size:1rem;font-weight:650}
@media (forced-colors:active){h1,.kpi .v{background:none;color:CanvasText}}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--ink);box-shadow:0 0 10px var(--btn-glow);flex:none}
.muted{color:var(--ink-2)}
.small{font-size:13.5px;color:var(--ink-3)}

/* topo: vidro com filete de luz embaixo */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--edge-hi) 50%,var(--line-2) 82%,transparent)}
.top .in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{height:17px;width:auto;display:block;filter:drop-shadow(0 0 14px var(--btn-glow));transition:filter .3s}
.brand:hover svg{filter:drop-shadow(0 0 18px var(--btn-glow)) drop-shadow(0 0 2px var(--btn-glow))}
.brand span{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);border-left:1px solid var(--line-2);padding-left:10px;white-space:nowrap}
@media (max-width:400px){.brand span{display:none}}
.top .sp{flex:1}
.iconbtn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--panel) 60%,transparent);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:color .2s,background .2s,border-color .2s,transform .15s}
.iconbtn:hover{color:var(--ink);background:var(--hover);border-color:var(--edge-hi)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* página: as telas entram subindo (o fx.js silencia quando a tela é a mesma) */
.wrap{max-width:980px;margin:0 auto;padding:26px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px));display:grid;gap:18px}
@keyframes sobe{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#app > *{animation:sobe .6s var(--mola) both}
#app > *:nth-child(2){animation-delay:.06s} #app > *:nth-child(3){animation-delay:.12s}
#app > *:nth-child(4){animation-delay:.18s} #app > *:nth-child(5){animation-delay:.22s} #app > *:nth-child(n+6){animation-delay:.26s}
#app.quieto > *{animation:none}
.narrow{max-width:460px;margin:0 auto;width:100%}

/* superfícies: vidro com borda em degradê; a luz e a borda acendem sob o mouse (fx.js passa --mx/--my) */
.card,details.blk,.kpi,.stepc{position:relative;isolation:isolate;border:1px solid transparent;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel)) padding-box,linear-gradient(180deg,var(--edge-hi),var(--edge-lo) 55%,var(--line)) border-box;
  box-shadow:var(--shadow)}
.card{border-radius:18px;padding:22px}
.card::before,details.blk::before,.kpi::before,.stepc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 55%)}
.card::after,details.blk::after,.kpi::after,.stepc::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--spot-edge),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){
  .card:hover::before,details.blk:hover::before,.kpi:hover::before,.stepc:hover::before,
  .card:hover::after,details.blk:hover::after,.kpi:hover::after,.stepc:hover::after{opacity:1}
}
/* cartão de entrada (login, cadastro, senha): um feixe de luz percorre a borda */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes gira{to{--ang:360deg}}
.narrow.card::after{opacity:1;padding:1px;animation:gira 7s linear infinite;
  background:conic-gradient(from var(--ang),transparent 0 62%,color-mix(in srgb,var(--ink) 18%,transparent) 74%,var(--spot-edge) 86%,transparent 96%)}
.stack{display:grid;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}

/* botões: o principal tem halo e um reflexo que passa ao apontar */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;font-weight:650;font-size:15px;cursor:pointer;
  border:1px solid var(--btn-bg);color:var(--btn-fg);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,color-mix(in srgb,var(--btn-bg) 100%,var(--bg) 0%),color-mix(in srgb,var(--btn-bg) 84%,var(--bg)));
  box-shadow:0 1px 0 color-mix(in srgb,var(--btn-fg) 18%,transparent) inset,0 10px 26px -14px var(--btn-glow);
  transition:transform .15s var(--mola),box-shadow .3s,background .3s,border-color .3s,opacity .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);transition:transform .75s var(--mola);
  background:linear-gradient(105deg,transparent 30%,var(--sheen) 48%,transparent 66%)}
.btn:hover{box-shadow:0 1px 0 color-mix(in srgb,var(--btn-fg) 18%,transparent) inset,0 14px 34px -12px var(--btn-glow),0 0 0 1px var(--btn-glow)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.975)}
.btn[disabled]{opacity:.5;cursor:progress;transform:none}
.btn.ghost{background:color-mix(in srgb,var(--panel) 55%,transparent);color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--hover);border-color:var(--edge-hi);box-shadow:0 8px 22px -16px var(--btn-glow)}
.btn.ghost::after,.btn.danger::after{display:none}
.btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent);box-shadow:none}
.btn.danger:hover{background:var(--bad-bg);box-shadow:0 8px 24px -14px var(--bad)}
.btn.sm{padding:7px 12px;font-size:13.5px;border-radius:10px}
.btn.full{width:100%}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500}

/* formulários: o campo em foco ganha um halo */
.field{display:grid;gap:6px;min-width:0}
.field > label,.field > .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.field .req{color:var(--ink)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=number],.field select,.field textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:11px 12px;font-size:16px;
  transition:border-color .2s,box-shadow .25s,background .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--edge-hi)}
.field textarea{resize:vertical;min-height:84px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 11%,transparent)}
.field small{font-size:12.5px;color:var(--ink-3)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-bg)}
.field .err{font-size:12.5px;color:var(--bad);display:none}
.field.bad .err{display:block}
.grid2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.wide{grid-column:1/-1}
.check,.field > label.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--f-ui);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2);cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:11px;padding:8px 11px;cursor:pointer;font-size:14.5px;color:var(--ink-2);background:var(--panel-2);transition:border-color .2s,color .2s,box-shadow .25s,background .2s}
.chips label:hover{border-color:var(--edge-hi);color:var(--ink)}
.chips input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.chips label:has(input:checked){border-color:var(--ink);color:var(--ink);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 9%,transparent)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--panel-2)}
.seg label{padding:8px 14px;cursor:pointer;font-size:14.5px;color:var(--ink-2);border-right:1px solid var(--line-2);display:flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.seg label:last-child{border-right:0}
.seg label:hover{color:var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--btn-bg);color:var(--btn-fg)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}

/* estado: cor técnica com ponto luminoso; "Ativo"/"Liberado" pulsa devagar */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;padding:4px 11px;border-radius:20px;white-space:nowrap;border:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent),0 0 8px currentColor}70%{box-shadow:0 0 0 6px transparent,0 0 8px currentColor}}
.pill.ok::before{animation:pulso 2.6s ease-out infinite}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:var(--hover);color:var(--ink-3)} .pill.mute::before{box-shadow:none}
.alert{border:1px solid var(--line-2);border-radius:13px;padding:12px 14px 12px 16px;font-size:14.5px;color:var(--ink-2);background:var(--panel-2);box-shadow:inset 3px 0 0 var(--line-2)}
.alert b{color:var(--ink)}
.alert.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-bg);color:var(--ink);box-shadow:inset 3px 0 0 var(--bad)}
.alert.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-bg);color:var(--ink);box-shadow:inset 3px 0 0 var(--ok)}
.alert.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-bg);color:var(--ink);box-shadow:inset 3px 0 0 var(--warn)}

/* progresso: barra na cor do estado, com brilho que corre */
.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.bar i{--c:var(--ink);position:relative;overflow:hidden;display:block;height:100%;border-radius:6px;transition:width .9s var(--mola);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent),var(--c));box-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent)}
.bar i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);animation:corre 2.8s ease-in-out infinite;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
@keyframes corre{60%,100%{transform:translateX(100%)}}
.steps{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.stepc{border-radius:14px;padding:13px;display:grid;gap:8px}
.stepc .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;font-weight:650}
.stepc .t .mono{font-size:13px;color:var(--ink-2)}
.stepc.ok .bar i{--c:var(--ok)} .stepc.ok .t .mono{color:var(--ok)}
.stepc.warn .bar i{--c:var(--warn)} .stepc.warn .t .mono{color:var(--warn)}
.stepc.lock{opacity:.6}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* blocos do perfil */
details.blk{border-radius:18px}
details.blk > summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:12px;border-radius:18px}
details.blk > summary::-webkit-details-marker{display:none}
details.blk > summary h2{flex:1;font-size:1.05rem}
details.blk > summary::after{content:"+";font-family:var(--f-mono);color:var(--ink-3);font-size:18px;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;transition:transform .3s var(--mola),color .2s}
details.blk[open] > summary::after{content:"–";transform:rotate(180deg);color:var(--ink)}
details.blk[open] > .body{animation:sobe .45s var(--mola) both}
details.blk .body{padding:0 18px 18px;display:grid;gap:16px}
.missing{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px;color:var(--ink-2)}
.foto-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.foto-box{width:96px;height:96px;flex:none;border-radius:50%;overflow:hidden;border:1px solid var(--line-2);background:var(--panel-2);display:grid;place-items:center;text-align:center;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--panel) 80%,transparent),0 0 0 5px var(--line-2),0 14px 30px -18px var(--btn-glow)}
.foto-box img{width:100%;height:100%;object-fit:cover;display:block}
.foto-box.sm{width:64px;height:64px}
label.btn{cursor:pointer}
.ts{min-height:65px}

/* tabela (equipe) */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel-hi),var(--panel));box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;transition:background .15s}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:var(--hover)}
tr.click:hover td:first-child,tr.click:focus-visible td:first-child{box-shadow:inset 2px 0 0 var(--ink)}
tr.click:focus-visible{outline:none} tr.click:focus-visible td{background:var(--hover)}
td .sub{display:block;font-size:12.5px;color:var(--ink-3)}
td.n{text-align:right;font-family:var(--f-mono);white-space:nowrap}
/* indicadores: número grande em degradê e um filete na cor do que ele mede */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.kpi{--tom:var(--ink-3);border-radius:16px;padding:15px 16px 14px;display:grid;gap:3px;overflow:hidden}
.kpi > .l{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kpi > .l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tom);box-shadow:0 0 8px var(--tom);flex:none}
.kpi .v{font-family:var(--f-mono);font-size:1.85rem;font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 55%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .k-linha{position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--tom),transparent);opacity:.9}
.kpi.t-info{--tom:var(--info)} .kpi.t-warn{--tom:var(--warn)} .kpi.t-ok{--tom:var(--ok)} .kpi.t-bad{--tom:var(--bad)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters select,.filters input{background:var(--panel);border:1px solid var(--line-2);border-radius:11px;padding:8px 10px;font-size:14px;transition:border-color .2s,box-shadow .25s}
.filters select:hover,.filters input:hover{border-color:var(--edge-hi)}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 11%,transparent)}
dl.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px;margin:0;font-size:14.5px}
dl.kv dt{color:var(--ink-3)} dl.kv dd{margin:0;overflow-wrap:anywhere}

/* modal: fundo desfocado e a caixa entra com escala */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal .back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal .box{position:relative;width:min(720px,100%);max-height:100%;overflow:auto;border:1px solid transparent;border-radius:20px;padding:22px;display:grid;gap:16px;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel)) padding-box,linear-gradient(180deg,var(--edge-hi),var(--line)) border-box;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px var(--line)}
@keyframes abre{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes some{from{opacity:0}to{opacity:1}}
.modal.abre .box{animation:abre .4s var(--mola) both}
.modal.abre .back{animation:some .3s ease both}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(14px) scale(.97);background:var(--btn-bg);color:var(--btn-fg);
  border-radius:14px;padding:12px 18px;font-size:14.5px;font-weight:650;z-index:60;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--mola);max-width:min(460px,calc(100vw - 32px));text-align:center;
  box-shadow:0 18px 40px -16px var(--btn-glow),0 0 0 1px var(--line-2)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.foot{position:relative;padding:24px 16px 40px;text-align:center;font-size:13px;color:var(--ink-3)}
.foot::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.foot a{color:var(--ink-2);text-underline-offset:3px}
.foot a:hover{color:var(--ink)}

/* troca de tema: o novo tema se abre em círculo a partir do botão (fx.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:revela .6s var(--mola)}
@keyframes revela{from{clip-path:circle(0 at var(--vx,100%) var(--vy,0))}to{clip-path:circle(150vmax at var(--vx,100%) var(--vy,0))}}

/* campos de entrada (campos.js): olho da senha, Caps Lock, força da senha nova, conferência, sugestão de e-mail, senha errada */
.senha-caixa{position:relative}
.field .senha-caixa input{padding-right:48px}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:color .2s,background .2s}
.olho:hover{color:var(--ink);background:var(--hover)}
.olho[aria-pressed="true"]{color:var(--ink)}
.olho svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.field small.caps{display:flex;align-items:center;gap:7px;color:var(--warn);font-weight:600}
.field small.caps::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.forca{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.forca-barra{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.forca-barra i{display:block;height:100%;width:0;border-radius:4px;background:var(--c,var(--ink-3));box-shadow:0 0 10px color-mix(in srgb,var(--c,transparent) 55%,transparent);transition:width .45s var(--mola),background .3s}
.forca[data-n="1"] .forca-barra i{width:25%} .forca[data-n="2"] .forca-barra i{width:50%}
.forca[data-n="3"] .forca-barra i{width:75%} .forca[data-n="4"] .forca-barra i{width:100%}
.forca[data-t="bad"]{--c:var(--bad)} .forca[data-t="warn"]{--c:var(--warn)} .forca[data-t="ok"]{--c:var(--ok)}
.forca-txt{font-size:12.5px;color:var(--c,var(--ink-3));font-weight:600}
.reqs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-3)}
.reqs li{display:flex;align-items:center;gap:7px;transition:color .2s}
.reqs li::before{content:"";width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;transition:background .2s,border-color .2s}
.reqs li.ok{color:var(--ok)}
.reqs li.ok::before{content:"✓";background:var(--ok);border-color:var(--ok);color:var(--bg)}
.field small.confere{font-weight:600}
.field small.confere[data-t="ok"]{color:var(--ok)} .field small.confere[data-t="bad"]{color:var(--bad)}
.link.sugestao{justify-self:start;font-size:13.5px;font-weight:500;color:var(--info)}
.link.sugestao b{color:var(--ink)}
.erro-login input{border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-bg);animation:treme .42s ease-in-out}
@keyframes treme{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.esqueci-destaque span{display:block}
.esqueci-destaque a,.esqueci-destaque .link{font-weight:650}