:root { --accent:#4f46e5; --accent-hover:#4338ca; --danger:#dc2626; --muted:#6b7280; --ink:#111827; --line:#e5e7eb; --bg:#f4f7fe; }
* { box-sizing:border-box; }
body { position:relative; display:grid; place-items:center; min-width:320px; min-height:100vh; margin:0; padding:28px; overflow-x:hidden; color:var(--ink); background:var(--bg); font:14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(99,102,241,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.026) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
.auth-glow { position:fixed; width:360px; height:360px; border-radius:50%; pointer-events:none; filter:blur(4px); }
.auth-glow-one { top:-180px; left:-100px; background:radial-gradient(circle,rgba(79,70,229,.17),transparent 68%); }
.auth-glow-two { right:-160px; bottom:-190px; background:radial-gradient(circle,rgba(13,148,136,.14),transparent 68%); }
.auth-card { position:relative; z-index:1; width:min(440px,100%); padding:35px 38px 28px; border:1px solid rgba(229,231,235,.8); border-radius:22px; background:rgba(255,255,255,.96); box-shadow:0 24px 65px rgba(15,23,42,.12); backdrop-filter:blur(14px); }
.auth-brand { display:flex; align-items:center; justify-content:center; margin-bottom:24px; color:var(--ink); text-decoration:none; }
.auth-brand:hover { color:var(--ink); }
.auth-brand img { display:block; width:min(260px,85%); height:auto; object-fit:contain; }
.auth-content > h1 { margin:0 0 8px; font-size:25px; line-height:1.2; letter-spacing:-.035em; text-align:center; }
.auth-content > p { margin:0 0 22px; color:var(--muted); text-align:center; }
form { margin-top:18px; }
label { display:block; margin:14px 0 6px; color:#374151; font-size:12px; font-weight:700; }
input,select { width:100%; min-height:45px; padding:10px 12px; border:1px solid #d1d5db; border-radius:11px; color:var(--ink); background:#fff; font:inherit; transition:border-color .18s ease,box-shadow .18s ease; }
input::placeholder { color:#9ca3af; }
input:hover,select:hover { border-color:#9ca3af; }
input:focus,select:focus { border-color:var(--accent); outline:0; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
button,.button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:46px; margin-top:20px; padding:11px 16px; border:1px solid var(--accent); border-radius:11px; color:#fff; background:var(--accent); box-shadow:0 8px 18px rgba(79,70,229,.2); font:700 14px Inter,system-ui,sans-serif; cursor:pointer; text-decoration:none; transition:all .2s ease; }
button:hover,.button:hover { border-color:var(--accent-hover); background:var(--accent-hover); box-shadow:0 11px 22px rgba(79,70,229,.25); transform:translateY(-1px); }
.secondary { border-color:#d1d5db; color:#4b5563; background:#fff; box-shadow:none; }
.secondary:hover { border-color:#c7c4f3; color:var(--accent); background:#f5f3ff; box-shadow:none; }
.errors,.errorlist { margin:6px 0; padding-left:19px; color:var(--danger); font-size:12px; }
.message { display:flex; gap:9px; margin:0 0 16px; padding:12px 13px; border:1px solid #a7f3d0; border-radius:11px; color:#065f46; background:#ecfdf5; font-size:13px; font-weight:600; }
.message::before { content:"✓"; font-weight:800; }
.message.error { border-color:#fecaca; color:#991b1b; background:#fef2f2; }
.message.error::before { content:"!"; }
.actions { margin-top:18px; text-align:center; }
.actions a { color:var(--accent); font-size:13px; font-weight:650; text-decoration:none; }
.actions a:hover { color:var(--accent-hover); text-decoration:underline; }
.hint { padding:12px 13px; border:1px solid #e0e7ff; border-radius:11px; color:#4b5563!important; background:#f8faff; font-size:12px; text-align:left!important; }
.otp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.otp-grid input { padding:10px 3px; text-align:center; font-size:20px; font-weight:800; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:68px; }
.toggle { position:absolute; top:7px; right:7px; width:auto; min-height:31px; margin:0; padding:4px 9px; border-color:transparent; color:var(--accent); background:transparent; box-shadow:none; font-size:11px; }
.toggle:hover { color:var(--accent-hover); background:#f5f3ff; box-shadow:none; transform:none; }
.auth-footer { margin:26px -8px 0; padding-top:18px; border-top:1px solid var(--line); color:#9ca3af; font-size:10px; font-weight:600; letter-spacing:.04em; text-align:center; }
.login-heading { text-align:center; }
.login-heading p { margin:0 0 22px; color:var(--muted); }
.login-heading h1 { margin:0 0 7px; font-size:25px; letter-spacing:-.035em; }
.login-submit { gap:8px; }
.login-submit svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
.login-options > a { flex:0 0 auto; color:var(--accent); font-size:13px; font-weight:650; text-decoration:none; }
.login-options > a:hover { color:var(--accent-hover); text-decoration:underline; }
.remember-login { display:inline-flex; align-items:center; gap:8px; min-width:0; margin:0; color:#374151; font-size:13px; font-weight:600; cursor:pointer; }
.remember-login input { flex:0 0 17px; width:17px; min-height:17px; margin:0; padding:0; border-radius:5px; accent-color:var(--accent); cursor:pointer; }
.registration-invite { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.registration-invite > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }
.registration-invite > div:first-child strong { font-size:13px; }
.registration-invite > div:first-child span { color:var(--muted); font-size:11px; }
.registration-choice-links { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.registration-choice-links a { display:flex; flex-direction:column; min-width:0; padding:11px 12px; border:1px solid #dfe3f4; border-radius:11px; color:var(--ink); background:#fafbff; text-decoration:none; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.registration-choice-links a:hover { border-color:#a5b4fc; background:#f5f3ff; transform:translateY(-1px); }
.registration-choice-links strong { color:var(--accent-hover); font-size:12px; }
.registration-choice-links span { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.4; }
.register-page { padding-block:20px; }
.register-page .auth-card { width:min(560px,100%); }
.register-page .auth-brand { margin-bottom:18px; }
.registration-form { margin-top:14px; }
.account-type-fieldset { margin:0 0 17px; padding:0; border:0; }
.account-type-fieldset legend { margin-bottom:7px; color:#374151; font-size:12px; font-weight:700; }
.account-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-type-card { position:relative; display:flex; align-items:flex-start; gap:10px; min-height:96px; margin:0; padding:13px; border:1px solid #d1d5db; border-radius:13px; background:#fff; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.account-type-card:hover { border-color:#a5b4fc; background:#fafaff; }
.account-type-card:has(input:checked) { border-color:var(--accent); background:#f5f3ff; box-shadow:0 0 0 3px rgba(79,70,229,.09); }
.account-type-card input { position:absolute; top:11px; right:11px; width:17px; min-height:17px; margin:0; padding:0; accent-color:var(--accent); }
.account-type-card > span:last-child { display:flex; flex-direction:column; padding-right:17px; }
.account-type-card strong { color:#312e81; font-size:13px; }
.account-type-card small { margin-top:3px; color:var(--muted); font-size:10px; font-weight:500; line-height:1.45; }
.account-type-icon { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:9px; color:var(--accent); background:#e0e7ff; font-size:17px; }
.registration-field { margin-top:12px; }
.registration-field > label { margin-top:0; }
.field-help { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.registration-error-summary { display:flex; flex-direction:column; margin-bottom:14px; padding:11px 12px; border:1px solid #fecaca; border-radius:11px; color:#991b1b; background:#fef2f2; }
.registration-error-summary strong { font-size:12px; }
.registration-error-summary span { font-size:10px; }
.registration-login-link { margin:18px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.registration-login-link a { color:var(--accent); font-weight:700; text-decoration:none; }
.registration-login-link a:hover { text-decoration:underline; }
@media (max-width:520px) { body { padding:14px; } .auth-card { padding:28px 22px 23px; border-radius:19px; } .auth-brand { margin-bottom:24px; } }
@media (max-width:520px) { .registration-choice-links,.account-type-grid { grid-template-columns:1fr; } .registration-invite > div:first-child { align-items:flex-start; flex-direction:column; gap:2px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; } }