:root { --blue:#1000e2; --zero:#6670a8; --ink:#111827; --muted:#697386; --line:#e5e7ee; --surface:#f7f8fb; --white:#fff; --danger:#c4334d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(390px,.82fr) 1.18fr; }
.brand-panel { min-height:100vh; padding:clamp(34px,5vw,66px); display:flex; flex-direction:column; justify-content:space-between; color:var(--white); background:var(--ink); position:relative; overflow:hidden; }
.brand-panel::after { content:""; position:absolute; width:460px; height:460px; right:-260px; bottom:-220px; border:86px solid rgba(102,112,168,.17); border-radius:50%; }
.brand { position:relative; z-index:1; display:block; width:fit-content; padding:12px 16px; background:var(--white); border-radius:10px; }
.brand img { display:block; width:135px; }
.brand-message { position:relative; z-index:1; }
.brand-message>span { color:#aeb7d9; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.brand-message h1 { margin:24px 0; font-size:clamp(48px,5.3vw,78px); line-height:.99; letter-spacing:-.055em; }
.brand-message p { margin:0; color:#cbd0e4; font-size:16px; }
.brand-panel small { position:relative; z-index:1; color:#929bb7; }
.auth-panel { min-height:100vh; padding:40px; display:grid; place-items:center; background:var(--surface); }
.mobile-brand { display:none; }
.auth-card { width:min(100%,520px); padding:clamp(30px,4vw,48px); background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 60px rgba(17,24,39,.07); }
.auth-heading p { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.auth-heading h2 { margin:0 0 10px; font-size:32px; letter-spacing:-.035em; }
.auth-heading>span { display:block; color:var(--muted); font-size:14px; }
.mode-switch { margin:30px 0 26px; padding:4px; display:grid; grid-template-columns:1fr 1fr; background:#f0f1f6; border-radius:11px; }
.mode-switch button { min-height:40px; color:#6e7587; background:transparent; border:0; border-radius:8px; font-size:13px; font-weight:800; cursor:pointer; }
.mode-switch button[aria-selected="true"] { color:var(--ink); background:var(--white); box-shadow:0 2px 8px rgba(17,24,39,.08); }
.social-auth { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.social-button { min-width:0; height:44px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:8px; color:#2d3443; background:var(--white); border:1px solid #d9dce6; border-radius:10px; font-size:12px; font-weight:800; cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s; }
.social-button:hover { border-color:#aeb4c5; box-shadow:0 5px 16px rgba(17,24,39,.07); transform:translateY(-1px); }
.social-button svg { width:19px; height:19px; flex:0 0 19px; }
.auth-divider { margin:21px 0; display:flex; align-items:center; gap:12px; color:#9aa1b1; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.auth-divider span { white-space:nowrap; }
#auth-form,.register-fields { display:grid; gap:18px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:grid; gap:8px; }
.field>span:first-child { font-size:12px; font-weight:800; }
.field input { width:100%; height:48px; padding:0 14px; color:var(--ink); background:var(--white); border:1px solid #d9dce6; border-radius:10px; outline:0; transition:border-color .18s,box-shadow .18s; }
.field input::placeholder { color:#9ca3b3; }
.field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(16,0,226,.1); }
.password-wrap { position:relative; display:block; }
.password-wrap input { padding-right:74px; }
.show-password { position:absolute; right:10px; top:50%; transform:translateY(-50%); padding:7px; color:var(--zero); background:none; border:0; font-size:11px; font-weight:800; cursor:pointer; }
.login-options { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; }
.login-options label,.terms { display:flex; align-items:flex-start; gap:8px; }
input[type="checkbox"] { width:15px; height:15px; margin:1px 0 0; accent-color:var(--blue); }
.text-button { padding:0; color:var(--blue); background:none; border:0; font-size:12px; font-weight:800; cursor:pointer; }
.terms { color:var(--muted); font-size:12px; line-height:1.5; }
.form-message { color:var(--danger); font-size:12px; line-height:1.5; }
.form-message:empty { display:none; }
.submit-button { height:50px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; color:var(--white); background:var(--blue); border:0; border-radius:10px; font-size:14px; font-weight:800; cursor:pointer; transition:transform .18s,opacity .18s; }
.submit-button:hover { transform:translateY(-1px); }
.submit-button:disabled { opacity:.65; cursor:wait; }
.submit-button b { font-size:20px; font-weight:500; }
.auth-footer { margin:26px 0 0; color:#9aa1b1; font-size:10px; text-align:center; }
.auth-footer a,.recovery-help a { color:var(--blue); font-weight:700; text-decoration:none; }
.auth-footer a:hover,.recovery-help a:hover { text-decoration:underline; }
.recovery-dialog { width:min(92vw,460px); padding:34px; border:0; border-radius:22px; color:var(--ink); background:#fff; box-shadow:0 28px 90px rgba(17,24,39,.22); }
.recovery-dialog::backdrop { background:rgba(17,24,39,.62); backdrop-filter:blur(5px); }
.recovery-dialog[open] { animation:dialog-in .18s ease-out; }
.dialog-close { position:absolute; top:16px; right:17px; width:34px; height:34px; border:0; border-radius:50%; color:#667085; background:#f2f4f7; font-size:22px; line-height:1; cursor:pointer; }
.dialog-close:hover { color:var(--ink); background:#e8ebf0; }
.recovery-icon { width:46px; height:46px; margin-bottom:20px; display:grid; place-items:center; border-radius:14px; color:var(--blue); background:#eef0ff; font-size:21px; }
.dialog-kicker { margin:0 0 7px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.recovery-dialog h2 { margin:0 0 10px; font-size:28px; letter-spacing:-.035em; }
.dialog-copy { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.55; }
#recovery-form,#reset-form { display:grid; gap:17px; }
.recovery-help { margin:19px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media(max-width:900px){ .auth-shell{grid-template-columns:1fr}.brand-panel{display:none}.auth-panel{padding:28px 18px;align-content:start}.mobile-brand{width:min(100%,520px);margin:8px auto 28px;display:block}.mobile-brand img{width:126px;display:block} }
@media(max-width:520px){ .auth-panel{padding:22px 14px}.auth-card{padding:26px 20px;border-radius:17px}.field-row{grid-template-columns:1fr}.auth-heading h2{font-size:28px}.login-options{align-items:flex-start;gap:12px}.social-auth{grid-template-columns:1fr}.social-button{justify-content:flex-start;padding:0 18px}.auth-divider span{white-space:normal;text-align:center} }
@media(prefers-reduced-motion:reduce){ *{transition:none!important} }