/* NIDER PAINEL — visual aprovado (mockup v2, §6.19): marca C, nome D, Titânio claro I1. */
/* Layout: Titânio claro (I1). A marca animada em camadas de vidro é o herói; cartões de vidro prateado numa grade de 12 colunas. Estados em mini-hexágono: verde ativo, laranja atenção, vermelho erro. Visual único escuro, de propósito. */
:root{
  color-scheme:dark;
  --ti-0:#07090c;          /* fundo mais fundo */
  --ti-1:#141820;          /* fundo de cima */
  --ti-2:#1b1f25;          /* superfície */
  --ti-3:#8a939c;          /* titânio médio */
  --ti-4:#d9dee4;          /* titânio claro */
  --ink:#eef1f4; --mist:#a7b0b9; --dim:#6c757e;
  --ok:#3dd07e; --warn:#ff8a1f; --err:#ff3b4a;
  --state:var(--ok);
  --glass:rgba(220,228,236,.055); --glass-hi:rgba(235,242,248,.12);
  --edge:rgba(225,232,240,.18); --edge-soft:rgba(225,232,240,.08);
  --f-mark:"Michroma","Segoe UI",system-ui,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
}
:root[data-sim="warn"]{--state:var(--warn)}
:root[data-sim="bad"]{--state:var(--err)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ti-0)}
body{color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(900px 600px at 80% -10%,rgba(217,222,228,.10),transparent 60%),
  radial-gradient(900px 700px at -10% 40%,rgba(138,147,156,.12),transparent 60%),
  linear-gradient(165deg,var(--ti-1),var(--ti-0) 70%)}
.sky::before{content:"";position:absolute;inset:0;opacity:.06;background:repeating-linear-gradient(100deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
.sky::after{content:"";position:absolute;width:55vmax;height:55vmax;border-radius:50%;top:-20vmax;right:-15vmax;filter:blur(90px);background:radial-gradient(circle,color-mix(in srgb,var(--state) 22%,transparent),transparent 65%);animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-10vmax,8vmax) scale(1.1)}}

.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3vw,36px);padding-block:16px 64px;display:flex;flex-direction:column;gap:22px}

.glass{position:relative;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--glass-hi),var(--glass) 40%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  border:1px solid var(--edge-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),0 30px 60px -28px rgba(0,0,0,.8),0 8px 20px -10px rgba(0,0,0,.6)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 30%,transparent 55%,rgba(217,222,228,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* M: luz percorrendo a borda, só no cartão que pede atenção */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.sheen::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 72%,color-mix(in srgb,var(--c,var(--state)) 90%,white) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 3.2s linear infinite}
@keyframes ang{to{--ang:360deg}}

.mh{width:12px;height:12px;flex:none;animation:hexlive 2.4s ease-in-out infinite;fill:currentColor}
.mh.ok{color:var(--ok)}.mh.warn{color:var(--warn);animation-duration:1.4s}.mh.err{color:var(--err);animation-duration:.8s;filter:drop-shadow(0 0 5px var(--err))}.mh.idle{color:var(--ti-3);animation:none;opacity:.7}
@keyframes hexlive{0%,100%{opacity:1}50%{opacity:.35}}

.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;border-radius:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand canvas{width:40px;height:40px;flex:none}
.word{font-family:var(--f-mark);font-size:15px;letter-spacing:.18em;white-space:nowrap}
.word .n{background:linear-gradient(180deg,#fff 0%,#d9dee4 38%,#8a939c 52%,#e9edf1 70%,#9aa3ab 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.word .p{background:linear-gradient(180deg,#fff,#9ff3ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(159,243,255,.45))}
.brand small{display:block;font-family:var(--f-data);font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--state) 45%,transparent);background:color-mix(in srgb,var(--state) 10%,transparent);color:color-mix(in srgb,var(--state) 70%,white)}
.pill .mh,.core .tag .mh{color:var(--state)}
.clock{font-family:var(--f-data);font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums}
.user{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mist)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mark);font-size:10px;background:linear-gradient(140deg,#d9dee4,#6c757e);color:#0b0d10}
.sec{font-family:var(--f-data);font-size:10.5px;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);padding:2px 6px;border-radius:6px}

.nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:-6px}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;color:var(--mist);text-decoration:none;font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-color:var(--edge);outline:none}
.nav a.on{color:#0b0d10;background:var(--ti-4)}

.mockbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--mist);padding:10px 14px;border-radius:14px;border:1px dashed rgba(217,222,228,.3)}
.mockbar strong{color:var(--ink);letter-spacing:.08em;font-family:var(--f-mark);font-size:11px;font-weight:400}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:999px;padding:3px;gap:2px;background:rgba(0,0,0,.3)}
.seg button{font:inherit;font-size:12px;font-weight:600;color:var(--mist);background:none;border:0;padding:5px 12px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{color:#0b0d10;background:var(--state)}
button:focus-visible{outline:2px solid var(--ti-4);outline-offset:2px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.core{position:relative;min-height:440px;overflow:hidden;display:grid;place-items:center;perspective:1000px}
.layers{position:relative;width:min(62%,360px);aspect-ratio:1/1;transform-style:preserve-3d;max-width:100%}
.layers>*{position:absolute;inset:0;width:100%;height:100%}
.layers canvas{width:100%;height:100%;display:block}
.ripple{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ripple svg{position:absolute;width:min(70%,400px);aspect-ratio:1;overflow:visible}
.ripple polygon{fill:none;stroke:var(--state);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:wave 3.2s ease-out infinite;opacity:0}
.ripple polygon:nth-child(2){animation-delay:1.06s}.ripple polygon:nth-child(3){animation-delay:2.13s}
@keyframes wave{0%{transform:scale(.62);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.core .tag{position:absolute;left:20px;top:18px;z-index:2;display:flex;align-items:center;gap:8px;font-family:var(--f-data);font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.core .tag b{color:color-mix(in srgb,var(--state) 70%,white);font-weight:500}
.core .orbit{position:absolute;right:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--f-data);font-size:11px;color:var(--dim)}

.verdict{padding:28px;display:flex;flex-direction:column;gap:20px}
.eyebrow{font-family:var(--f-data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.verdict h1{margin:0;font-family:var(--f-mark);font-weight:400;font-size:clamp(22px,2.8vw,36px);line-height:1.2;letter-spacing:.02em;text-wrap:balance}
.verdict h1 em{font-style:normal;color:color-mix(in srgb,var(--state) 75%,white)}
.lead{margin:0;color:var(--mist);max-width:54ch}
.issues{display:flex;flex-direction:column;gap:8px}
.issue{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent)}
.issue:hover{background:color-mix(in srgb,var(--c) 18%,transparent)}
.gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--edge-soft)}
.gauge svg{width:82px;height:82px;max-width:100%}
.gauge .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.gauge .s{font-family:var(--f-data);font-size:11px;color:var(--mist);text-align:center}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.card{padding:22px 22px 20px;display:flex;flex-direction:column;gap:16px;min-width:0;transition:transform .2s ease-out}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s6{grid-column:span 6}.s12{grid-column:span 12}
.card header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2{margin:0;font-family:var(--f-mark);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.card header .meta{margin-left:auto;font-family:var(--f-data);font-size:11.5px;color:var(--dim)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-data);font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:color-mix(in srgb,var(--c) 80%,white);background:color-mix(in srgb,var(--c) 10%,transparent);white-space:nowrap}
.chip .mh{width:10px;height:10px}
.chip.ok{--c:var(--ok)}.chip.warn{--c:var(--warn)}.chip.err{--c:var(--err)}.chip.idle{--c:var(--ti-3)}

/* K: entrada em cascata */
.rise{animation:rise .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.pre-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--edge-soft)}
.pre-row:first-child{border-top:0}
.pre-row .ic{display:grid;place-items:center}
.pre-row .ic .mh{width:16px;height:16px}
.pre-row .t{font-weight:600;font-size:14px}
.pre-row .d{font-size:12.5px;color:var(--mist)}
.pre-row .lim{font-family:var(--f-data);font-size:11.5px;color:var(--dim);white-space:nowrap}
.timeline{position:relative;height:30px}
.timeline .bar{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:4px;background:rgba(255,255,255,.07)}
.timeline .fill{position:absolute;left:0;top:13px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ti-3),var(--ti-4))}
.timeline .mk{position:absolute;top:0;transform:translateX(-50%);font-family:var(--f-data);font-size:10px;color:var(--dim)}
.timeline .mk::after{content:"";position:absolute;left:50%;top:13px;width:1px;height:10px;background:var(--edge)}

.btn{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--edge);border-radius:10px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.14)}
.btn.ghost{background:none}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{padding:12px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--edge-soft);min-width:0}
.kpi .n{font-family:var(--f-mark);font-size:19px;font-variant-numeric:tabular-nums}
.kpi .n small{font-size:11px;color:var(--mist);font-family:var(--f-data);margin-left:3px}
.kpi .l{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.beads{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px}
.beads i{height:22px;border-radius:3px;background:var(--ok);opacity:.8}
.beads i.w{background:var(--warn)}.beads i.b{background:var(--err)}
.axis{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:10.5px;color:var(--dim)}
.chart{position:relative;width:100%;height:110px}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .end{position:absolute;right:-5px;width:10px;height:10px;margin-top:-5px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-data);font-size:11px;color:var(--mist)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span::before{content:"";width:10px;height:3px;border-radius:2px;background:var(--c)}

.tbl-wrap{overflow-x:auto;margin-inline:-6px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th{font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 6px 8px}
td{padding:9px 6px;border-top:1px solid var(--edge-soft);vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--f-data);font-variant-numeric:tabular-nums}
td .nm{display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:12.5px}
td .sub{display:block;font-family:var(--f-body);font-size:11.5px;color:var(--dim)}
.grp{font-family:var(--f-mark);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ti-4);padding-top:14px}

.cores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.corebar{height:54px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--edge-soft);position:relative;overflow:hidden}
.corebar i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(217,222,228,.55),rgba(217,222,228,.08));transition:height .8s}
.corebar span{position:absolute;left:8px;top:6px;font-family:var(--f-data);font-size:10.5px;color:var(--mist)}
.disk{display:flex;flex-direction:column;gap:10px}
.disk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.disk-row .p{font-family:var(--f-data);font-size:12.5px}
.disk-row .u{font-family:var(--f-data);font-size:12px;color:var(--mist);text-align:right}
.track{grid-column:1/-1;height:8px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ti-3),var(--ti-4))}
.track i.w{background:linear-gradient(90deg,var(--ti-3),var(--warn))}
.note{margin:0;font-size:12.5px;color:var(--mist)}
.note b{color:var(--ink);font-weight:600}

.ver{display:flex;flex-direction:column;gap:10px}
.ver-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--edge-soft)}
.ver-row .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);width:92px;flex:none}
.ver-row .v{font-family:var(--f-data);font-size:13px;min-width:0;overflow-wrap:anywhere}
.ver-row .chip{margin-left:auto}

.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.act{font:inherit;text-align:left;color:var(--ink);cursor:pointer;padding:14px;border-radius:var(--r-md);border:1px solid var(--edge-soft);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015));display:flex;flex-direction:column;gap:6px;min-height:92px;transition:transform .18s,border-color .18s}
.act:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.act .ai{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--edge)}
.act .ai svg{width:15px;height:15px;stroke:var(--ti-4);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act b{font-size:13.5px;font-weight:600}
.act small{font-size:11.5px;color:var(--dim)}
.act.risk .ai{background:color-mix(in srgb,var(--err) 14%,transparent);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.act.risk .ai svg{stroke:var(--err)}

.log-row{display:grid;grid-template-columns:62px 96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--edge-soft);font-size:13px}
.log-row:first-child{border-top:0}
.log-row time{font-family:var(--f-data);font-size:12px;color:var(--mist)}
.log-row .who{font-family:var(--f-data);font-size:11.5px;color:var(--dim)}

.scrim{position:fixed;inset:0;z-index:50;background:rgba(2,3,5,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:16px}
@media (min-width:760px){.scrim{align-items:center}}
.sheet{width:min(520px,100%);padding:24px;display:flex;flex-direction:column;gap:14px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));background:linear-gradient(160deg,rgba(40,46,54,.92),rgba(14,17,21,.94))}
.sheet h3{margin:0;font-family:var(--f-mark);font-weight:400;font-size:16px;letter-spacing:.06em}
.sheet p{margin:0;color:var(--mist);font-size:14px}
.sheet code{font-family:var(--f-data);font-size:12.5px;color:var(--ti-4)}
.sheet label{font-size:12.5px;color:var(--mist)}
.sheet input{font:inherit;font-family:var(--f-data);width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--ink)}
.sheet .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.sheet .btn.go{background:var(--ti-4);color:#0b0d10;border-color:transparent}
.sheet .btn.go:disabled{opacity:.35;cursor:not-allowed}
.sheet .btn.go.red{background:var(--err);color:#fff}
.term{font-family:var(--f-data);font-size:12px;line-height:1.7;background:rgba(0,0,0,.45);border:1px solid var(--edge-soft);border-radius:12px;padding:12px 14px;max-height:220px;overflow:auto;color:#d9dee4}
.term .okl{color:var(--ok)}.term .dim{color:var(--dim)}
footer.foot{font-family:var(--f-data);font-size:11px;color:var(--dim);text-align:center}

/* desktop largo: ocupa a tela e põe três cartões por fileira, em vez de uma faixa de 1320px no meio */
@media (min-width:1500px){
  .wrap{max-width:2200px}
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .core{min-height:360px}
  .layers{width:min(55%,300px)}
  .issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #pre{grid-column:span 4;order:1}#site{grid-column:span 4;order:2}#maquina{grid-column:span 4;order:3}
  #servicos{grid-column:span 5;order:4}#dados{grid-column:span 4;order:5}#deploy{grid-column:span 3;order:6}
  #auditoria{order:7}
}
/* desktop: menu em abas (app.js põe body[data-aba]); fora da Visão geral, só o cartão da aba, na largura toda */
@media (min-width:1061px){
  body[data-aba]:not([data-aba="visao"]) .hero{display:none}
  body[data-aba]:not([data-aba="visao"]) #grid>.card{display:none}
  body[data-aba]:not([data-aba="visao"]) #grid>.card.aba-on{display:flex;grid-column:1/-1}
}
@media (max-width:1060px){.hero{grid-template-columns:1fr}.core{min-height:380px}.s7,.s5,.s6{grid-column:span 12}}
@media (max-width:620px){
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .n{font-size:16px}.verdict{padding:22px 18px}.card{padding:18px 16px}
  .user .nm,.clock,.brand small{display:none}
  .pre-row{grid-template-columns:22px minmax(0,1fr) auto}.pre-row .lim{display:none}
  .log-row{grid-template-columns:52px minmax(0,1fr) auto}.log-row .who{display:none}
  .core{min-height:330px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- painel real (fora do mockup) ---------- */
.demo{font-family:var(--f-mark);font-size:10px;letter-spacing:.14em;color:#0b0d10;background:var(--warn);padding:4px 8px;border-radius:6px}
.btn.sair{font-size:12px;padding:5px 10px}
.vazio{color:var(--dim);font-size:13px;padding:8px 0}
.mh.wait{color:var(--ti-3);animation-duration:3s}
.chip.wait{--c:var(--ti-3)}
.foot a{color:var(--mist)}
.kpi .n.err{color:var(--err)}
/* tela de entrada */
.entrar{min-height:100%;display:grid;place-items:center;padding-block:40px}
.entrar .glass{width:min(420px,100%);padding:30px 26px;display:flex;flex-direction:column;gap:16px}
.entrar .brand{justify-content:center}
.entrar canvas{width:72px;height:72px}
.entrar label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mist)}
.entrar input{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:rgba(0,0,0,.35);color:var(--ink)}
.entrar input:focus{outline:2px solid var(--ti-4);outline-offset:1px}
.entrar #codigo{font-family:var(--f-data);letter-spacing:.3em;text-align:center}
.entrar button[type=submit]{font:inherit;font-weight:700;font-size:15px;padding:13px;border:0;border-radius:12px;background:var(--ti-4);color:#0b0d10;cursor:pointer}
.entrar button[type=submit]:disabled{opacity:.5}
.entrar .erro{min-height:1.2em;color:var(--err);font-size:13px;text-align:center}
.entrar .nota{font-size:12px;color:var(--dim);text-align:center}