:root { --navy:#321c3b; --blue:#5b315e; --blue-dark:#321c3b; --ink:#241c29; --muted:#786d7b; --line:#e9e0e7; --surface:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
body.login-container {
    min-height:100vh; display:grid; place-items:center; padding:24px;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink); background:
        radial-gradient(circle at 15% 10%,rgba(217,108,88,.15),transparent 34%),
        radial-gradient(circle at 85% 90%,rgba(91,49,94,.14),transparent 34%),#f8f3f0;
}
.login-card { width:min(100%,440px); padding:34px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.8); border-radius:22px; box-shadow:0 24px 70px rgba(50,28,59,.16); }
.login-brand { display:grid; justify-items:center; gap:8px; margin-bottom:30px; }
.login-brand img { display:block; width:min(100%,300px); height:auto; }
.login-brand small { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.login-heading { margin-bottom:26px; }
.login-heading h1 { margin:0 0 7px; color:var(--navy); text-align:left; font-size:1.75rem; line-height:1.2; letter-spacing:-.03em; }
.login-heading p,.role-intro { color:var(--muted); line-height:1.55; font-size:.94rem; }
form label { display:block; margin:0 0 7px; color:#3d515e; font-size:.86rem; font-weight:700; }
input[type="email"],input[type="text"],input[type="password"] { width:100%; min-height:50px; margin-bottom:16px; padding:0 14px; color:var(--ink); background:#f9fbfc; border:1px solid var(--line); border-radius:11px; font:inherit; transition:.2s; }
input:focus { outline:0; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(117,75,121,.13); }
button { width:100%; min-height:50px; padding:11px 16px; color:#fff; background:var(--blue); border:0; border-radius:11px; font:inherit; font-weight:750; cursor:pointer; box-shadow:0 8px 18px rgba(91,49,94,.18); transition:transform .18s,background .18s,box-shadow .18s; }
button:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 12px 24px rgba(50,28,59,.23); }
button:disabled { opacity:.6; cursor:wait; transform:none; }
.error-message { margin-bottom:18px; padding:12px 14px; color:#8b2828; background:#fff2f1; border:1px solid #f1cecb; border-radius:10px; font-size:.88rem; }
.info-message { margin-top:18px; color:var(--muted); text-align:center; font-size:.88rem; }
.login-contact-help { margin-top:24px; padding:16px; border:1px solid var(--line); border-radius:11px; background:#f8f3f8; }
.login-contact-help h2 { margin:0 0 8px; color:var(--navy); font-size:.94rem; line-height:1.4; }
.login-contact-help p { margin:0 0 10px; color:var(--ink); font-size:.84rem; line-height:1.55; }
.login-contact-help a { color:var(--blue); font-size:.84rem; font-weight:700; text-underline-offset:3px; }
.login-contact-help a span { font-size:.75rem; font-weight:400; }
.login-contact-help a:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.remember-device{display:flex!important;gap:11px;align-items:flex-start;margin:2px 0 18px!important;padding:12px;border:1px solid var(--line);border-radius:11px;background:#f8fbfc;cursor:pointer}.remember-device input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue)}.remember-device span{display:grid;gap:2px}.remember-device strong{font-size:.88rem;color:var(--ink)}.remember-device small{font-size:.78rem;font-weight:400;line-height:1.4;color:var(--muted)}
.role-intro { margin-bottom:16px; }
.role-options { display:grid; gap:10px; }
.role-button { display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:12px; min-height:70px; color:var(--navy); text-align:left; background:#fff; border:1px solid var(--line); box-shadow:none; }
.role-button:hover { color:var(--navy); background:#f7eef5; }
.role-button.admin-choice { color:#fff; background:var(--navy); border-color:var(--navy); }
.role-button.admin-choice:hover { color:#fff; background:#24142b; }
.role-icon { grid-row:1/3; font-size:1.35rem; }
.role-button strong,.role-button small { display:block; }
.role-button small { margin-top:2px; opacity:.72; font-weight:400; }
@media(max-width:520px){body.login-container{min-height:100dvh;place-items:start center;padding:max(22px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom))}.login-card{margin-top:clamp(12px,5vh,42px);padding:24px 20px 22px;border-radius:20px}.login-brand{gap:6px;margin-bottom:22px}.login-brand img{width:min(82%,260px)}.login-brand small{font-size:.66rem}.login-heading{margin-bottom:20px}.login-heading h1{font-size:1.48rem}.login-heading p{font-size:.88rem;line-height:1.45}.passkey-login{margin-bottom:14px}.login-divider-standalone{margin:0 0 14px}input[type="email"],input[type="text"],input[type="password"]{min-height:48px;margin-bottom:13px}button{min-height:48px}}
/* Passkeys */
.passkey-login{margin-bottom:17px}.passkey-button{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:11px;width:100%;min-height:66px;padding:11px 15px;color:#fff;text-align:left;background:var(--navy);border:0;border-radius:12px}.passkey-button>i{font-size:1.4rem;text-align:center}.passkey-button span{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}.passkey-button strong,.passkey-button small{display:block;width:100%;white-space:normal}.passkey-button strong{font-size:.92rem;line-height:1.2}.passkey-button small{font-size:.72rem;font-weight:400;line-height:1.3;opacity:.78}.login-divider{display:flex;align-items:center;gap:10px;margin-top:17px;color:var(--muted);font-size:.72rem}.login-divider span{white-space:nowrap}.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:360px){.login-card{padding-inline:17px}.passkey-button{grid-template-columns:30px 1fr;padding-inline:12px}.passkey-button>i{font-size:1.25rem}.passkey-button strong{font-size:.86rem}.passkey-button small{font-size:.68rem}}
/* Google and Microsoft */
.social-login{display:grid;gap:9px;margin-bottom:17px}.social-button{display:flex;align-items:center;justify-content:center;gap:11px;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#fff;text-decoration:none;font-size:.86rem;font-weight:750;transition:.18s}.social-button:hover{border-color:#aebdc5;background:#f8fafb;transform:translateY(-1px)}.social-button i{width:20px;font-size:1.05rem}.social-button.google i{color:#4285f4}.social-button.microsoft i{color:#00a4ef}.social-button.disabled{opacity:.42;cursor:not-allowed;pointer-events:none}.social-login .login-divider{margin-top:7px}
.login-divider-standalone{margin:0 0 17px}

/* Six-digit email verification */
.login-card.code-step { width:min(100%,520px); padding:40px 36px; }
.code-step > .login-brand,.code-step > .login-heading,.code-step > .passkey-login,.code-step > .social-login,.code-step > .login-divider { display:none; }
.code-heading { text-align:center; margin-bottom:30px; }
.code-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 22px; border-radius:20px; background:#f3eaf3; color:var(--blue); font-size:27px; }
.code-heading h1 { font-size:1.9rem; letter-spacing:-.035em; margin-bottom:12px; }
.code-heading p { color:var(--muted); font-size:.94rem; line-height:1.6; margin-bottom:6px; }
.code-heading strong { display:block; overflow-wrap:anywhere; line-height:1.5; }
.code-fieldset { border:0; min-width:0; margin:0 0 24px; }
.code-fieldset legend { width:100%; text-align:center; font-size:.94rem; font-weight:700; margin-bottom:14px; }
.code-digits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.code-digits .code-digit { width:100%; min-width:0; height:66px; margin:0; padding:0; text-align:center; font-size:1.65rem; font-weight:650; background:#fff; border:1.5px solid #d6cdd8; border-radius:13px; caret-color:var(--blue); }
.code-digits .code-digit:focus { border-color:var(--blue); }
#login-btn:disabled { background:#ccc; color:#fff; opacity:1; box-shadow:none; cursor:default; }
.back-to-login { margin-top:18px; color:var(--blue); background:transparent; box-shadow:none; font-weight:600; }
.back-to-login:hover { background:#f8f3f8; box-shadow:none; }
.back-to-login span { margin-right:7px; }
@media(max-width:520px) {
    .login-card.code-step { padding:30px 20px 22px; }
    .code-heading h1 { font-size:1.65rem; }
    .code-digits { gap:7px; }
    .code-digits .code-digit { height:56px; font-size:1.4rem; border-radius:10px; }
}