:root { --ink:#171717; --muted:#616161; --line:#dedede; --surface:#f5f5f5; --paper:#ffffff; --accent:#111111; --on-accent:#ffffff; --control:#787878; --hover:#f0f0f0; --focus:#636363; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--surface); font:16px/1.55 "Segoe UI",Arial,sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:21px; font-weight:700; text-decoration:none; }
.brand svg { width:25px; height:25px; }
main { display:grid; place-items:start center; padding:clamp(32px,9vh,96px) 20px 32px; }
.login-panel { width:100%; max-width:440px; padding:32px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
h1 { margin:0 0 8px; font-size:28px; line-height:1.3; }
.subtitle { margin:0; color:var(--muted); }
form { margin-top:28px; }
label { display:block; margin:20px 0 7px; font-size:14px; font-weight:600; }
input,select { display:block; width:100%; border:1px solid var(--control); border-radius:6px; padding:12px; font:inherit; color:var(--ink); background:var(--surface); }
.button { display:inline-flex; justify-content:center; align-items:center; padding:11px 16px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--on-accent); font:inherit; cursor:pointer; }
.button:hover { filter:brightness(.94); }
.button.secondary { color:var(--ink); background:transparent; border-color:var(--control); font-size:14px; }
.button.secondary:hover { background:var(--hover); }
#login-submit { width:100%; margin-top:24px; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
#login-message { margin:14px 0 0; }
#login-message:empty { display:none; }
.access-note { color:var(--muted); font-size:13px; margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); }
::selection { background:#e4e4e4; }
@media(max-width:480px) { header { padding:14px 16px; } .login-panel { padding:24px; } main { padding:28px 12px; } h1 { font-size:25px; } }