:root{
  --bg:#08080a;
  --panel:#111114;
  --border:#1f1f24;
  --text:#e6e6e6;
  --muted:#9a9a9a;
  --gold:#f5c518;
  --gold-hover:#ffd633;
  --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;min-height:100%}

/* Fundo cofre/aço com glow dourado no topo */
body{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(245,197,24,.16) 0%, rgba(245,197,24,.05) 30%, rgba(8,8,10,0) 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(245,197,24,.05) 0%, rgba(8,8,10,0) 55%),
    var(--bg);
}

/* HERO / logo */
.hero{width:100%;max-width:420px;text-align:center;margin:0 auto 20px}
.logo-wrap{position:relative;display:inline-block;line-height:0}
.logo-wrap::before{
  content:"";position:absolute;inset:-16% -6% -6%;z-index:0;
  background:radial-gradient(closest-side, rgba(245,197,24,.32) 0%, rgba(245,197,24,.12) 45%, rgba(245,197,24,0) 72%);
  filter:blur(6px);pointer-events:none;
}
.logo{
  position:relative;z-index:1;
  width:clamp(180px,55vw,260px);height:auto;display:block;
  border-radius:22px;
}

/* Card */
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03)}
h1{font-size:20px;margin:0 0 4px;color:var(--gold);font-weight:700;letter-spacing:.2px}
.subtitle{color:var(--muted);font-size:13.5px;margin:0 0 18px}
label{display:block;font-size:13px;color:#cfcfcf;margin:0 0 6px;font-weight:500}
.input{width:100%;background:#0d0d10;border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px;font-family:inherit;outline:none;transition:border .15s, background .15s, box-shadow .15s}
.input:focus{border-color:var(--gold);background:#0a0a0d;box-shadow:0 0 0 3px rgba(245,197,24,.14)}
.field+.field{margin-top:13px}

/* Campo de senha com olho */
.pass-wrap{position:relative}
.pass-wrap .input{padding-right:46px}
.toggle-pass{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--muted);
  border-radius:8px;transition:color .15s, background .15s;
}
.toggle-pass:hover{color:var(--gold);background:rgba(245,197,24,.08)}
.toggle-pass:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.toggle-pass svg{width:20px;height:20px;display:block}
.toggle-pass .icon-off{display:none}
.toggle-pass[aria-pressed="true"] .icon-on{display:none}
.toggle-pass[aria-pressed="true"] .icon-off{display:block}

.btn{display:block;width:100%;background:var(--gold);color:#08080a;font-weight:800;border:0;border-radius:10px;padding:14px;font-size:15px;cursor:pointer;margin-top:18px;font-family:inherit;letter-spacing:.2px;transition:background .15s, transform .05s;box-shadow:0 8px 22px rgba(245,197,24,.22)}
.btn:hover{background:var(--gold-hover)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#444;color:#888;cursor:not-allowed;box-shadow:none}
.row-links{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:13px}
.row-links a{color:var(--muted);text-decoration:none}
.row-links a:hover{color:var(--gold)}
.msg{margin-top:16px;padding:12px 14px;border-radius:8px;font-size:14px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.msg.ok{background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.35);color:var(--gold)}
.foot{text-align:center;margin-top:22px;font-size:12px;color:#666}

@media (max-width:420px){
  body{padding:16px 16px}
  .hero{margin-bottom:14px}
  .card{padding:22px 20px}
}