:root { --bg:#0b0f17; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --ok:#10b981; --err:#ef4444; --accent:#3b82f6; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:100%;max-width:420px;background:var(--card);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{margin:0 0 12px 0;font-size:22px}
form{display:grid;gap:12px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input{width:100%;padding:12px 12px;border:1px solid #1f2937;background:#0f1623;color:var(--text);border-radius:10px;outline:none}
input:focus{border-color:var(--accent)}
button{margin-top:8px;padding:12px 14px;border:0;border-radius:12px;background:var(--accent);color:white;font-weight:600;cursor:pointer}
button:active{transform:translateY(1px)}
#msg{min-height:20px;margin:4px 0 0 0;font-size:14px}
#msg.ok{color:var(--ok)}
#msg.err{color:var(--err)}