:root{
  --bg:#2f3337;          /* cinza do fundo */
  --card:#15191d;        /* card escuro */
  --text:#e5e7eb;        /* texto claro */
  --muted:#a3a5aa;       /* texto fraco */
  --input:#24292e;       /* input */
  --ring:#3b82f6;        /* foco */
  --btn:#0b0f14;         /* botão */
  --btn-ring:#7dd3fc;
  --radius:20px;
}
*{box-sizing:border-box}
body.bg{margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
.wrap{min-height:100dvh; display:grid; place-items:center; padding:24px}
.card{
  width:min(720px, 96vw);
  background:var(--card);
  border-radius:var(--radius);
  padding:36px 40px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.brand{display:flex; align-items:center; gap:16px; margin-bottom:10px}
.logo{
  height: 56px;       
  width: auto;
  display: block;
  max-width: clamp(180px, 30vw, 280px); 
}
.brand{ gap: 16px; }   /* espaço entre logo e texto */
.brand-text .title{letter-spacing:.25em; font-weight:700}
.brand-text .subtitle{font-size:28px; margin-top:2px; letter-spacing:.15em}
.hint{
  color: var(--muted);
  margin: 12px 0 18px;
  max-width: 565px;   
  margin-left: auto;  
}
.form{display:grid; gap:10px; max-width:560px; margin-left:auto}
.label{font-size:12px; color:var(--muted)}
.input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid transparent;
  background:var(--input); color:var(--text); outline: none;
}
.input:focus{border-color:var(--ring); box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.pwd{position:relative; display:flex; align-items:center}
.eye{
  position:absolute; right:8px; background:transparent; border:0; padding:8px; cursor:pointer;
  border-radius:8px; color:var(--muted);
}
.eye:hover{color:var(--text)}
.icon{width:18px; height:18px; fill:currentColor}
.hidden{display:none}
.actions{display:flex; justify-content:flex-end; margin-top:14px}
.btn{
  background:transparent; color:var(--text); padding:10px 18px; border-radius:999px; border:1px solid #3b3e43;
}
.btn:hover{box-shadow:0 0 0 3px rgba(125,211,252,.2)}
.flash-wrap{position:fixed; inset:16px auto auto 50%; transform:translateX(-50%); z-index:50}
.flash{background:#1f2937; border:1px solid #334155; padding:10px 14px; border-radius:10px}
.flash.error{border-color:#ef4444}
.btn[aria-busy="true"]{
  opacity:.7;
  pointer-events:none;
  cursor:progress;
}
.spinner{
  display:inline-block; width:14px; height:14px; margin-left:8px; 
  border:2px solid rgba(255,255,255,.25); border-top-color:#fff; 
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px;
}
.hidden{ display:none; }
@keyframes spin{ to { transform: rotate(360deg); } }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }