*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f0f0f;--bg2:#161616;--bg3:#1e1e1e;--border:#2a2a2a;--border2:#383838;--text:#f0f0f0;--text2:#999;--text3:#666;--accent:#e8ff47;--accent2:#c8e020;--red:#f87171}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:30px 28px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.mark{width:36px;height:36px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#0f0f0f}
.brand{font-size:16px;font-weight:500;letter-spacing:-.3px}
.sub{font-size:12px;color:var(--text3)}
label{display:block;font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:14px 0 6px}
input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:11px 13px;font-size:16px;color:var(--text);font-family:inherit;outline:none}
input:focus{border-color:var(--accent)}
button{width:100%;margin-top:20px;padding:12px;border-radius:9px;border:none;background:var(--accent);color:#0f0f0f;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
button:hover{background:var(--accent2)}
button:disabled{opacity:.5;cursor:default}
button.ghost{background:transparent;color:var(--text2);border:1px solid var(--border2);margin-top:10px;font-weight:500}
.hint{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:4px}
.err{margin-top:16px;font-size:13px;color:var(--red);background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);border-radius:9px;padding:10px 12px;line-height:1.5}
[hidden]{display:none!important}