:root { color-scheme: dark; --bg:#000; --surface:#16181c; --text:#e7e9ea; --muted:#71767b; --border:#2f3336; --accent:#1d9bf0; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; display:grid; place-items:center; padding:22px; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.login-shell { width:min(100%,520px); }
.login-panel { padding:clamp(24px,7vw,46px); border:1px solid var(--border); border-radius:24px; background:var(--bg); }
.avatar { display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:#eff3f4; color:#0f1419; font-weight:900; }
.identity { margin:14px 0 0 !important; color:var(--text) !important; font-size:14px; }
.identity span { color:var(--muted); }
h1 { margin:28px 0 0; font-size:clamp(38px,10vw,60px); line-height:.98; letter-spacing:-.055em; }
.login-panel > p:not(.identity) { margin:18px 0 28px; color:var(--muted); font-size:16px; line-height:1.55; }
form { display:grid; gap:10px; padding-top:20px; border-top:1px solid var(--border); }
label { color:var(--muted); font-size:12px; font-weight:700; }
input,button { min-height:48px; border:1px solid var(--border); border-radius:999px; font:inherit; }
input { padding:0 17px; background:var(--bg); color:var(--text); }
input:focus { outline:2px solid var(--accent); outline-offset:2px; }
button { margin-top:4px; border-color:var(--accent); background:var(--accent); color:#fff; font-weight:850; cursor:pointer; }
button:hover { background:#1a8cd8; }
button:disabled { opacity:.6; cursor:wait; }
#login-error { margin:6px 5px 0; color:#f4212e; font-size:13px; }