:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: #fff8f3; background: #0e0d0c; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% -10%, #473026 0, #171210 43%, #0e0d0c 75%); }
.login-card { width: min(100%, 510px); padding: 44px; border: 1px solid rgba(242, 211, 190, .15); border-radius: 28px; background: rgba(27, 22, 20, .82); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); }
.login-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff8f3; text-decoration: none; letter-spacing: .12em; }
.login-brand span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #efaa70; box-shadow: 0 0 22px rgba(239, 170, 112, .72); }
.login-brand strong { font-size: 1rem; }
.login-kicker { margin: 48px 0 12px; color: #efaa70; font-size: .66rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.03; letter-spacing: -.055em; }
.login-intro { max-width: 400px; margin: 18px 0 30px; color: #cbbeb6; font-size: .97rem; line-height: 1.6; }
.role-options { display: grid; gap: 11px; }
.role-option { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 13px; width: 100%; min-height: 82px; padding: 15px 17px; border: 1px solid #44362f; border-radius: 17px; color: inherit; text-align: left; cursor: pointer; background: #201916; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.role-option:hover, .role-option:focus-visible { transform: translateY(-2px); border-color: #efaa70; outline: 0; background: #2a1e18; }
.role-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #20120b; font-size: 1.35rem; font-weight: 900; background: #efaa70; }
.role-option span:nth-child(2) { display: grid; gap: 4px; }
.role-option strong { font-size: 1rem; }
.role-option small { color: #aa9c94; font-size: .75rem; line-height: 1.3; }
.role-option b { color: #efaa70; font-size: 1.25rem; }
.login-note { margin: 25px 0 0; color: #91837c; font-size: .72rem; line-height: 1.5; }
.login-note a { color: #d8b79d; }
form label{display:grid;gap:7px;margin:14px 0;color:#aa9c94;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}form input{width:100%;height:50px;padding:0 14px;border:1px solid #44362f;border-radius:12px;background:#171210;color:#fff8f3;font:inherit;outline:0}form input:focus{border-color:#efaa70}.login-primary{width:100%;height:50px;margin-top:8px;border:0;border-radius:12px;background:#efaa70;color:#25170f;font-weight:900;cursor:pointer}.login-primary:disabled{opacity:.55}.login-back{width:100%;margin-top:11px;border:0;background:transparent;color:#aa9c94;cursor:pointer}.form-status{min-height:20px;color:#efaa70;font-size:.78rem;line-height:1.4}.code-input{font-size:1.7rem;letter-spacing:.45em;text-align:center}
@media (max-width: 520px) { .login-shell { align-items: start; padding: 0; } .login-card { min-height: 100vh; padding: 34px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .login-kicker { margin-top: 72px; } }