:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --gold: #d4b365;
  --border: rgba(148,163,184,.25);
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0;background:var(--bg) url("../assets/bg.svg") center/cover no-repeat fixed;
  color:var(--text);font-family:Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
.center{min-height:100%;display:grid;place-items:center;padding:2rem}
.panel{
  width:min(560px, 94vw);
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(17,24,39,.7), rgba(17,24,39,.45));
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  padding:clamp(24px, 4vw, 40px);
}
.brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.brand img{width:42px;height:auto}
.brand h2{margin:0;font-size:1.2rem;letter-spacing:.06em;color:#e2e8f0}
legend{font-weight:800;letter-spacing:.04em;margin-bottom:.5rem}
label{font-size:.9rem;color:var(--muted)}
input{
  width:100%;margin-top:.35rem;margin-bottom:1rem;padding:.8rem 1rem;border-radius:12px;
  border:1px solid var(--border);background:#0b1220;color:var(--text);
}
.button{
  width:100%;padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(212,179,101,.6);
  background:linear-gradient(180deg,#f0e2bf,#caa962);color:#0b1220;font-weight:800;letter-spacing:.02em;
}
.sub{margin-top:.8rem;color:var(--muted);font-size:.9rem}
.notice{
  margin-top:1rem;padding:.85rem;border-radius:12px;border:1px dashed rgba(212,179,101,.5);
  color:#f1e9d6;background:rgba(212,179,101,.06);
}
.small{font-size:.85rem;color:var(--muted);margin-top:1rem;text-align:center}
a{color:#cbd5e1}