:root { --bg: #0e1218; --panel: #161c25; --line: #2a3442; --text: #e8edf4; --muted: #8d9bb0; --crit: #ff5d5d; --accent: #4da3ff; --on-accent: #0b1220; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.box { width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; display: grid; gap: 10px; }
.logo { max-height: 48px; max-width: 200px; object-fit: contain; }
h1 { margin: 0; font-size: 22px; }
.muted { margin: 0; color: var(--muted); }
form { display: grid; gap: 10px; margin-top: 6px; }
input { font: inherit; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
button { font: inherit; font-weight: 600; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.msg { margin: 0; color: var(--crit); }
[hidden] { display: none !important; }