*{box-sizing:border-box}body{margin:0;background:#0d0f12;color:#fff;font-family:Arial,Helvetica,sans-serif}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,#252a30 0,#0d0f12 48%)}
.card{width:min(470px,100%);background:#171a1f;border:1px solid #30343a;border-radius:18px;padding:30px;box-shadow:0 24px 70px #0008}
.brand{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:3px solid #ffc61a;padding-bottom:18px}.brand img{max-width:180px;max-height:72px;object-fit:contain}.brand span{font-size:12px;font-weight:700;color:#ffc61a}
h1{font-size:27px;margin:28px 0 8px}h2{font-size:21px}.intro,.next,p{color:#b9bec6;line-height:1.5}
label{display:block;margin:17px 0 7px;font-size:13px;font-weight:700}input{width:100%;padding:14px;border-radius:9px;border:1px solid #424851;background:#0e1013;color:#fff;font-size:16px;outline:none}input:focus{border-color:#ffc61a}
button{width:100%;margin-top:20px;padding:14px;border:0;border-radius:9px;background:#ffc61a;color:#111;font-weight:900;cursor:pointer}.msg{min-height:22px;color:#ffc61a}.next{margin-top:24px;padding:15px;background:#101216;border-radius:10px;font-size:12px}.next b{color:#fff}

.passwordField{position:relative}
.passwordField input{padding-right:48px}
.passwordEye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;margin:0;padding:0;border:0;border-radius:7px;background:transparent;color:#c9cdd3;font-size:18px;line-height:1;display:grid;place-items:center}
.passwordEye:hover,.passwordEye:focus{background:#242930;color:#ffc61a}

/* Beta 03: olho SVG visível e independente de emoji/fonte */
.passwordEye{z-index:2;color:#e5e7eb!important}
.passwordEye svg{width:22px;height:22px;display:block;fill:currentColor}
.passwordEye .eyeClosed{display:none}
.passwordEye.isShowing .eyeOpen{display:none}
.passwordEye.isShowing .eyeClosed{display:block}

/* Beta 04: configuração e validação TOTP */
.twoFactorBox{margin-top:18px}
.qrWrap{display:flex;justify-content:center;margin:18px 0}
.qrWrap img{width:220px;height:220px;background:#fff;padding:10px;border-radius:12px}
.accountName{text-align:center;margin:0 0 18px}
.twoFactorBox input{letter-spacing:.28em;font-size:1.25rem;text-align:center}


/* Beta 07: códigos de recuperação. Sem alterações no QR Code. */
.secondaryBtn{background:#242930;color:#fff;border:1px solid #424851}
.secondaryBtn:hover,.secondaryBtn:focus{border-color:#ffc61a;color:#ffc61a}
.recoveryGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.recoveryGrid code{display:block;padding:10px 8px;border:1px solid #424851;border-radius:8px;background:#0e1013;color:#fff;text-align:center;font-size:13px;letter-spacing:.04em;user-select:all}
.recoveryInput{letter-spacing:.08em!important;font-size:1rem!important;text-align:center}
@media(max-width:430px){.recoveryGrid{grid-template-columns:1fr}}


/* Beta 10: alerta visual após bloqueio. Não altera QR/2FA. */
.securityWarning{margin-top:20px;padding:24px;border:1px solid #3b4048;border-radius:16px;background:linear-gradient(180deg,#101216 0%,#08090b 100%);color:#fff;box-shadow:0 20px 55px #0008}
.securityWarningIcon{font-size:30px;line-height:1;margin-bottom:10px}
.securityWarning h2{margin:0 0 10px;color:#fff;font-size:22px;line-height:1.15;letter-spacing:.015em}
.securityWarning p{color:#fff;margin:0;line-height:1.55}
.securityLead{font-size:15px;margin-bottom:18px!important;color:#e8eaed!important}
.securityData{display:grid;gap:9px;margin:18px 0}
.securityDatum{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #30343a;border-radius:10px;background:#15181d;color:#fff}
.securityDatumIcon{width:24px;flex:0 0 24px;text-align:center}
.securityDatumText{min-width:0;line-height:1.35}
.securityDatumText b{display:block;color:#b9bec6;font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.securityDatumText code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#fff;background:#262a30;border-radius:5px;padding:2px 6px;word-break:break-word}
.securityNotice{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px;border-left:3px solid #ffc61a;background:#121418;border-radius:8px}
.securityNotice p{font-size:14px;color:#e8eaed!important}
.ownerNotice{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border:1px solid #424851;border-radius:9px;background:#0d0f12;color:#fff}
@media(max-width:520px){.securityWarning{padding:19px}.securityWarning h2{font-size:19px}.securityDatum{padding:10px}}