.auth{width:min(460px,calc(100% - 40px));margin:8vh auto}.brand{font-size:20px;font-weight:800;letter-spacing:.12em;margin-bottom:48px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#77d9e3;margin-bottom:16px}.auth h1{font-size:clamp(30px,6vw,44px);line-height:1.13;letter-spacing:-.04em;margin-bottom:20px}.muted{color:#a9afb5}.auth form{margin-top:30px}.auth label{display:block;font-size:14px;margin:12px 0}.auth input:not([type=checkbox]),.admin-form input{width:100%;background:#111315;border:1px solid #f4f7f933;border-radius:12px;padding:15px;color:#f4f7f9;font:inherit}.primary{background:#f4f7f9;color:#000;padding:14px 20px;border-radius:12px;font-weight:700}.auth .primary{width:100%;margin-top:18px}.secondary{padding:12px;color:#b9c3cc;font-size:14px}.remember{display:flex!important;gap:10px;align-items:center;font-size:12px!important}.auth [role=status]{margin-top:18px;font-size:14px;color:#b7e5ea;min-height:42px}.auth footer{margin-top:20px}.accountbar{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:18px 0;font-size:13px;color:#a9afb5;flex-wrap:wrap}.accountbar a{color:#f4f7f9}.accountbar button{text-decoration:underline}.admin{max-width:1060px;margin:50px auto;padding:0 22px}.admin h1{font-size:36px}.admin-form{display:flex;gap:12px;margin:30px 0}.admin-form input{max-width:420px}.user-list{display:grid;gap:12px}.user-row{background:#111315;border:1px solid #f4f7f91f;border-radius:16px;padding:20px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.user-row strong{overflow-wrap:anywhere}.user-row small{display:block;color:#a9afb5}.user-actions{display:flex;gap:8px;flex-wrap:wrap}.user-actions button{font-size:12px;border:1px solid #f4f7f933;padding:8px;border-radius:8px}button:disabled{opacity:.5;cursor:wait}.admin [role=status]{margin:15px 0;color:#b7e5ea}a:focus-visible,button:focus-visible{outline:2px solid #f4f7f9;outline-offset:4px}[hidden]{display:none!important}@media(max-width:560px){.auth{margin-top:5vh}.admin-form{flex-direction:column}}

/* logo oficial Shotblack. O wordmark nunca é recriado em fonte: é sempre o PNG oficial. */
.marca-logo{display:block;width:232px;height:auto;margin:0 0 44px;image-rendering:auto}
.marca-logo-barra{width:186px;margin-bottom:22px}
@media(max-width:560px){.marca-logo{width:190px;margin-bottom:34px}.marca-logo-barra{width:158px}}

/* card de login, conforme a referência: logo acima, título, descrição, campo e botão claro */
.auth{display:grid;place-items:center;min-height:100vh;margin:0;padding:24px 16px;width:auto}
.cartao{width:min(460px,100%);background:#131d25;border:1px solid #f4f7f912;border-radius:20px;
  padding:40px 36px 32px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.cartao .marca-logo{width:208px;margin:0 0 34px}
.cartao h1{font-size:23px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 10px}
.cartao .muted{font-size:14px;line-height:1.5;margin:0}
.cartao form{margin-top:26px}
.auth footer{margin-top:24px;font-size:12px;color:#74828d;text-align:center}
@media(max-width:560px){
  .auth{padding:20px 14px}
  .cartao{padding:30px 22px 26px}
  .cartao .marca-logo{width:178px;margin-bottom:26px}
  .cartao h1{font-size:21px}
}
/* o aviso só ocupa altura quando tem texto, para o card não ficar com folga morta */
.cartao [role=status]{min-height:0;margin-top:14px}
.cartao [role=status]:empty{margin-top:0}

/* o card de login fica centrado nos dois eixos da área útil, e em tela baixa
   (ou com o teclado aberto) a página rola para os campos continuarem acessíveis */
.auth{
  display:flex; flex-direction:column;        /* o rodapé é irmão do card: empilhar */
  align-items:center; justify-content:center;
  min-height:100vh; min-height:100dvh;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  box-sizing:border-box; overflow-y:auto;
}
.cartao{margin:0;flex:0 0 auto}
/* o crédito sai do fluxo para o CARD ficar centrado de verdade nos dois eixos;
   em janela baixa ele some, para não disputar espaço com os campos */
.auth>footer{position:fixed;left:0;right:0;bottom:14px;margin:0;text-align:center}
@media (max-height:560px){ .auth>footer{display:none} }
@media (max-height:640px){ .auth{align-items:flex-start} }
.codigo-box{background:#111315;border:1px solid #77d9e3;border-radius:16px;padding:20px;margin:0 0 18px}.codigo-box strong{display:block;font-size:40px;letter-spacing:.2em;margin:6px 0 10px;font-variant-numeric:tabular-nums}.codigo-box small{display:block;color:#a9afb5;max-width:640px}.pagina{max-width:860px;margin:50px auto;padding:0 22px}.pagina h1{font-size:clamp(30px,5vw,40px);line-height:1.15;margin-bottom:12px}.pagina-topo{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:14px;margin-bottom:30px}.pagina-topo a{color:#f4f7f9}.passo{background:#111315;border:1px solid #f4f7f91f;border-radius:16px;padding:22px;margin:14px 0}.passo h2{font-size:20px;margin-bottom:10px}.passo p,.passo li{color:#c9ced3;font-size:16px;line-height:1.55}.passo ol,.passo ul{padding-left:22px;margin:8px 0}.passo code{background:#000;border:1px solid #f4f7f933;border-radius:6px;padding:1px 6px;font-size:14px;color:#f4f7f9}.passo .video-futuro{margin-top:12px;font-size:13px;color:#77d9e3}.passo .botao{display:inline-block;margin-top:12px;background:#f4f7f9;color:#000;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}.conta-dados{display:grid;gap:6px;margin:12px 0 18px}.conta-dados span{color:#a9afb5;font-size:14px}
.auth #message.aviso{color:#f4f7f9;background:#111315;border:1px solid #77d9e3;border-radius:12px;padding:12px 14px}[data-theme="light"] .auth #message.aviso{color:#0b0d0f;background:#fff;border-color:#0b6f79}.tema-escolha{border:0;display:flex;gap:22px;flex-wrap:wrap;margin:8px 0 4px}.tema-escolha legend{font-size:14px;color:#a9afb5;margin-bottom:10px}[data-theme="light"] .tema-escolha legend{color:#46505a}.tema-escolha label{display:flex;align-items:center;gap:8px;font-size:16px;cursor:pointer}.tema-escolha input{width:18px;height:18px;accent-color:#77d9e3}[data-theme="light"] .tema-escolha input{accent-color:#0b6f79}
.passo .primary{margin-top:14px}
.passo .comando{background:#000;border:1px solid #f4f7f933;border-radius:10px;padding:14px 16px;color:#f4f7f9;font-size:15px;line-height:1.55;margin:12px 0 0}[data-theme="light"] .passo .comando{background:#f4f7f9;border-color:rgba(11,13,15,.18);color:#0b0d0f}.passo-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.passo-acoes .botao{border:0;font:inherit;font-weight:700;cursor:pointer}.passo .botao-sec{background:transparent;color:#f4f7f9;border:1px solid #f4f7f966}[data-theme="light"] .passo .botao.botao-sec{background:transparent;color:#0b0d0f;border:1px solid rgba(11,13,15,.3)}