:root { color-scheme: light; --ink:#173d34; --muted:#63756d; --paper:#f3f4ee; --line:#dce3d8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.login-shell { width:min(100% - 48px, 580px); margin:0 auto; padding:48px 0 max(28px, env(safe-area-inset-bottom)); }
.wordmark { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:26px; font-weight:800; letter-spacing:-1.5px; }
.wordmark span { font-size:11px; font-weight:700; letter-spacing:2px; }
.course-label { margin-top:58px; font-size:10px; letter-spacing:2.5px; font-weight:750; color:#6c806f; }
h1 { margin:14px 0 18px; font-size:clamp(34px,7vw,49px); line-height:1.08; letter-spacing:-1.9px; font-weight:620; }
.intro { max-width:480px; color:var(--muted); line-height:1.7; font-size:16px; margin-bottom:30px; }
.login-card { padding:28px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 14px 44px #26452a08; }
.lock { width:34px; height:34px; background:#edf3dc; border:1px solid #dde8bf; border-radius:10px; display:grid; place-items:center; font-size:24px; margin-bottom:16px; }
h2 { margin:0 0 8px; font-size:23px; font-weight:600; letter-spacing:-.7px; }
.login-card > p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.6; }
label { display:block; font-weight:650; font-size:12px; margin-bottom:9px; }
.input-row { display:flex; border:1px solid #ccd8cc; border-radius:11px; overflow:hidden; background:#fbfcf9; }
.input-row:focus-within { outline:3px solid #d8e6b9; border-color:#6a8d52; }
input { min-width:0; width:100%; border:0; background:transparent; padding:14px; color:var(--ink); font-family:inherit; font-size:16px; line-height:1.5; outline:none; }
button { font:inherit; cursor:pointer; }
.show-key { border:0; background:transparent; color:#587360; padding:0 13px; font-size:11px; min-height:48px; }
.submit { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:15px; min-height:50px; padding:14px 17px; color:#fff; background:#244e3f; border:1px solid #244e3f; border-radius:11px; font-size:14px; font-weight:600; }
.submit:hover { background:#183c2f; }
.submit:disabled { opacity:.65; cursor:wait; }
.submit span { font-size:21px; line-height:1; }
.status { min-height:20px; margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.status.error { color:#a43f30; }
.footnote { color:#7b8b80; font-size:11px; letter-spacing:.2px; text-align:center; margin-top:26px; }
button:focus-visible,a:focus-visible { outline:3px solid #c7df94; outline-offset:4px; }
@media(max-width:420px) { .login-shell { width:calc(100% - 32px); padding-top:28px; } .course-label { margin-top:38px; } .login-card { padding:23px 19px; } h1 { letter-spacing:-1.5px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }