/* Reset básico */
*{margin:0;padding:0;box-sizing:border-box}

/* Paleta matte e tokens */
:root{
  --bg:#0a0b0e;
  --panel:#0f1116;
  --ink:#e6e8ec;
  --muted:#9aa4b2;
  --line:#1a1f2b;
  --accent:#1f6feb;
  --accent-press:#1a54b8;
  --focus:#2b6de0;
  --field:#0b0e13;
}

@media (prefers-color-scheme: dark){
  :root{ color-scheme: dark; }
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container central em coluna */
.container-form{display:flex;justify-content:center;align-items:flex-start;padding:48px 16px}
.wrapper-form{
  width:100%;
  max-width:440px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
}

/* Logo */
.form-logo{max-width:56%;display:block;margin:0 auto 16px}

/* Título */
.pc{text-align:center;font-weight:600;font-size:1.25rem;margin:0 0 12px}

/* Alerts flat */
#stack-alerts{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.alert{
  border:1px solid var(--line);
  background:#0c111a;
  color:var(--ink);
  padding:10px 12px;border-radius:10px;display:none
}
.alert--error{border-color:#3a2a2a;color:#ffb4b4}
.alert--ok{border-color:#243a2a;color:#b7f0c2}

/* Inputs */
.icon-input{position:relative;margin-bottom:14px}
.icon-input .icon{
  position:absolute;inset:0 auto 0 12px;width:28px;display:grid;place-items:center;color:#2b4b7d
}
.input{
  width:100%;
  padding:12px 12px 12px 44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--field);
  color:var(--ink);
  transition:border-color .2s, background .2s;
  font-size:15px;
}
.input::placeholder{color:#8e99a8}
.input:focus{outline:2px solid transparent;border-color:var(--focus);background:#0b0e13}

/* Toggle olho */
.toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#2b4b7d;cursor:pointer;padding:6px;border-radius:8px
}
.toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Medidor senha (discreto) */
.meter{height:6px;border-radius:6px;background:#0b0e13;border:1px solid var(--line);margin:-6px 0 12px}
.meter[data-level="1"]{background:linear-gradient(90deg,#5b2b2b 35%,transparent 0)}
.meter[data-level="2"]{background:linear-gradient(90deg,#77502e 55%,transparent 0)}
.meter[data-level="3"]{background:linear-gradient(90deg,#2a6a3c 80%,transparent 0)}
.meter[data-level="4"]{background:linear-gradient(90deg,#1f6feb 100%,transparent 0)}

/* OTP linha */
.otp-row{display:flex;gap:10px;align-items:center;margin-top:2px}
.otp-row .otp{flex:1}
.btn{width:100%;padding:12px 16px;background:var(--accent);border:none;border-radius:12px;color:#fff;
     font-weight:600;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-press)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--focus)}

a {
    text-decoration: none;
}

/* Grupo de botões */
.btn-group{display:flex;flex-direction:column;gap:30px;margin-top:10px}

/* Help text */
.help{font-size:.9rem;color:var(--muted);margin:6px 0 14px}

/* A11y + motion */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Util */
.sr-only{position:absolute;left:-9999px}