:root{--bg:#0f172a;--card:#1e293b;--fg:#e2e8f0;--mut:#94a3b8;--acc:#2563eb}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;align-items:center;
justify-content:center;background:linear-gradient(135deg,#0f172a,#1e293b);
font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg)}
.card{background:var(--card);padding:40px;border-radius:14px;width:360px;
box-shadow:0 12px 40px rgba(0,0,0,.45)}
.brand{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
h1{margin:6px 0 4px;font-size:22px}.sub{color:var(--mut);font-size:14px;margin:0 0 22px}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:14px}
input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #334155;border-radius:8px;
background:#0f172a;color:var(--fg);font-size:15px}
button{width:100%;padding:12px;border:0;border-radius:8px;background:var(--acc);color:#fff;
font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
button:hover{background:#1d4ed8}.msg{min-height:18px;margin-top:12px;font-size:13px;color:#f87171}
.foot{margin-top:22px;font-size:12px;color:var(--mut);text-align:center}