/* Account page: login, registration, email verification and password recovery. */
*{box-sizing:border-box}
body.auth-body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--sc-font);color:var(--sc-text);-webkit-font-smoothing:antialiased;background:radial-gradient(900px 420px at 85% 0,rgb(108 92 246/.10),transparent 70%),radial-gradient(700px 380px at 0 100%,rgb(232 51 95/.07),transparent 70%),linear-gradient(rgb(13 20 36/.035) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgb(13 20 36/.035) 1px,transparent 1px) 0 0/32px 32px,var(--sc-canvas)}
.auth-body [hidden]{display:none!important}
.auth-shell{flex:1 0 auto;width:min(1120px,calc(100% - 48px));margin:44px auto 72px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;border:1px solid var(--sc-line);border-radius:24px;overflow:hidden;background:var(--sc-surface);box-shadow:0 30px 80px -40px rgb(13 20 36/.35)}

/* Brand panel */
.auth-aside{position:relative;isolation:isolate;overflow:hidden;padding:56px 48px;color:#e7ebf5;background:linear-gradient(160deg,#0c1224 0%,#101a33 55%,#171236 100%)}
.auth-aside::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px) 0 0/28px 28px;mask-image:linear-gradient(180deg,#000 10%,transparent 85%)}
.auth-aside__glow{position:absolute;z-index:-1;width:420px;height:420px;right:-140px;bottom:-160px;border-radius:50%;background:radial-gradient(circle,rgb(232 51 95/.55),rgb(108 92 246/.28) 45%,transparent 70%);filter:blur(10px)}
.auth-kicker{display:flex;align-items:center;gap:10px;margin:0 0 28px;font-family:var(--sc-mono);font-size:11px;letter-spacing:.16em;color:#9aa6c2}
.auth-kicker span{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 4px rgb(34 211 238/.15)}
.auth-aside h1{margin:0 0 20px;font-size:clamp(26px,2.6vw,34px);line-height:1.45;letter-spacing:-.01em;font-weight:750;color:#fff}
.auth-aside h1 em{font-style:normal;background:linear-gradient(90deg,#ff6b8f,#a78bfa 60%,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-aside__lead{margin:0 0 34px;max-width:30em;font-size:14px;line-height:1.95;color:#b7c0d6}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.auth-points li{display:grid;gap:2px;padding:14px 16px 14px 44px;position:relative;border:1px solid rgb(255 255 255/.08);border-radius:12px;background:rgb(255 255 255/.03)}
.auth-points li::before{content:"";position:absolute;left:16px;top:17px;width:16px;height:16px;border-radius:50%;background:rgb(34 197 94/.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%234ade80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.auth-points strong{font-size:14px;color:#fff;font-weight:650}
.auth-points span{font-size:12px;line-height:1.7;color:#9aa6c2}
.auth-extension-note{margin:26px 0 0;padding:12px 14px;border-radius:10px;border:1px solid rgb(103 232 249/.25);background:rgb(34 211 238/.08);font-size:12px;line-height:1.8;color:#a5f3fc}

/* Form panel */
.auth-card{padding:48px 56px 52px;display:flex;flex-direction:column;justify-content:flex-start}
.auth-card>*{width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:34px;border:1px solid var(--sc-line);border-radius:12px;background:var(--sc-canvas)}
.auth-tabs button{min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--sc-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.auth-tabs button:hover{color:var(--sc-ink)}
.auth-tabs button[aria-selected=true]{background:#fff;color:var(--sc-ink);box-shadow:0 1px 3px rgb(13 20 36/.12),0 0 0 1px rgb(13 20 36/.04)}
.auth-card h2{margin:0 0 10px;font-size:26px;line-height:1.4;letter-spacing:-.01em;color:var(--sc-ink);font-weight:750}
.auth-step{margin:0 0 10px;font-family:var(--sc-mono);font-size:11px;letter-spacing:.16em;color:var(--sc-brand)}
.form-message,#join-message{margin:0 0 26px;font-size:14px;line-height:1.85;color:var(--sc-muted)}
.auth-card [data-error=true]{padding:12px 14px;border-radius:10px;background:#fff1f3;border:1px solid #fecdd6;color:#b4193f}
.auth-card [data-success=true]{padding:12px 14px;border-radius:10px;background:#effcf4;border:1px solid #bbf0cf;color:#157a3d}
.auth-card form{display:grid;gap:18px}
.auth-card label{display:grid;gap:8px;font-size:13px;font-weight:600;color:var(--sc-text)}
.auth-card input:not([type=checkbox]){width:100%;min-width:0;min-height:46px;padding:0 14px;border:1px solid #d6dbe6;border-radius:10px;background:#fff;color:var(--sc-ink);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}
.auth-card input::placeholder{color:#a3aaba}
.auth-card input:hover{border-color:#bfc6d4}
.auth-card input:focus{outline:none;border-color:var(--sc-violet);box-shadow:0 0 0 4px rgb(108 92 246/.14)}
.auth-card input.auth-code{font-family:var(--sc-mono);font-size:22px;letter-spacing:.5em;text-align:center;padding-left:.5em}
.auth-password{position:relative;display:block}
.auth-password input{padding-right:64px!important}
.auth-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--sc-muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.auth-reveal:hover{background:var(--sc-soft);color:var(--sc-ink)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-top:-6px}
.auth-card .primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:4px;padding:0 20px;border:0;border-radius:10px;background:var(--sc-brand);color:#fff;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgb(13 20 36/.12),0 8px 20px -8px rgb(232 51 95/.7);transition:background .15s,transform .15s}
.auth-card .primary:hover{background:var(--sc-brand-strong)}
.auth-card .primary:active{transform:translateY(1px)}
.auth-card .primary:disabled{opacity:.55;cursor:wait;box-shadow:none}
.secondary-button{min-height:40px;padding:0 16px;border:1px solid var(--sc-line);border-radius:9px;background:#fff;color:var(--sc-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.secondary-button:hover:not(:disabled){border-color:#c6ccd9;background:var(--sc-canvas)}
.secondary-button:disabled{opacity:.5;cursor:not-allowed}
.text-link{color:var(--sc-violet);font-size:13px;font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.auth-hint{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--sc-line);font-size:14px;color:var(--sc-muted);text-align:center}
.auth-hint a{color:var(--sc-brand);font-weight:650;text-decoration:none}
.auth-hint a:hover{text-decoration:underline;text-underline-offset:4px}
.auth-hint+.auth-hint{margin-top:12px;padding-top:0;border-top:0;font-size:13px}
.auth-consent a{color:var(--sc-violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.join-note{margin:0;font-size:12px;font-weight:400;line-height:1.8;color:var(--sc-muted)}
.join-note:empty{display:none}
.optional{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--sc-soft);font-size:11px;font-weight:600;color:var(--sc-muted)}
.auth-invite{border:1px dashed #d3d8e3;border-radius:12px;padding:0 14px}
.auth-invite summary{cursor:pointer;padding:13px 0;font-size:13px;font-weight:600;color:var(--sc-text)}
.auth-invite[open]{padding-bottom:14px}
.auth-invite[open]>*+*{margin-top:10px}
.auth-invite__row{display:flex;gap:8px}
.auth-invite__row input{flex:1}
#invite-benefit:not(:empty){padding:10px 12px;border-radius:9px;background:#f4f1ff;color:#4c3fb8}
.auth-billing{padding:12px 14px;border-radius:10px;background:var(--sc-canvas);font-size:12px}
.auth-tips{margin:22px 0 0;padding:0 0 0 18px;display:grid;gap:6px;font-size:12px;line-height:1.8;color:var(--sc-muted)}
.auth-help{margin-top:22px;display:grid;gap:8px;justify-items:start}
.auth-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0}
#panel-register:has(#join-success:not([hidden])) .auth-hint--register{display:none}

/* Login progress and completion */
#login-outcome{text-align:center;padding:30px 0;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.login-state-mark{width:72px;height:72px;display:grid;place-items:center;margin-bottom:28px;border-radius:50%;background:#effcf4;color:#16a34a;box-shadow:0 0 0 10px #f6fdf9}
.login-state-mark svg{width:36px;height:36px;display:none}
.login-spinner{width:28px;height:28px;border:3px solid rgb(22 163 74/.2);border-top-color:#16a34a;border-radius:50%;animation:auth-spin .8s linear infinite}
.auth-card[data-login-state=complete] .login-spinner{display:none}
.auth-card[data-login-state=complete] .login-state-mark svg{display:block}
#login-outcome-title{font-size:26px;margin:0 0 14px}
#login-outcome-title:focus{outline:none}
#login-outcome-message{margin:0;max-width:24em;font-size:15px;line-height:1.9;color:var(--sc-muted)}
#login-connection-note{margin:22px 0 0;padding:10px 14px;border-radius:10px;background:var(--sc-canvas);font-size:12px;line-height:1.8;color:var(--sc-muted)}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* Registration outcome */
#join-success{padding:4px 0 0;text-align:center;scroll-margin-top:90px}
.success-mark{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#effcf4;color:#16a34a;box-shadow:0 0 0 10px #f6fdf9}
#join-success[data-state=verification] .success-mark{background:#f1efff;color:var(--sc-violet);box-shadow:0 0 0 10px #f8f7ff}
.success-mark svg{width:32px;height:32px}
.success-eyebrow{margin:0 0 8px;font-family:var(--sc-mono);font-size:11px;letter-spacing:.16em;color:var(--sc-brand)}
#join-success h3{margin:0 0 12px;font-size:24px;line-height:1.45;color:var(--sc-ink)}
#success-title:focus{outline:none}
#success-description{margin:0 auto 22px;max-width:26em;font-size:14px;line-height:1.9;color:var(--sc-muted)}
.success-account{text-align:left;padding:14px 16px;margin-bottom:16px;border:1px solid var(--sc-line);border-radius:12px;background:var(--sc-canvas)}
.success-account>span{font-size:12px;color:var(--sc-muted)}
#success-user{margin:4px 0 0;font-size:15px;font-weight:650;color:var(--sc-ink);overflow-wrap:anywhere}
#success-next{margin:0 0 20px;font-size:13px;line-height:1.8;color:var(--sc-muted);text-align:left}
#verification-form{text-align:left}
#success-feedback{margin:16px 0 0;font-size:13px;line-height:1.8;text-align:left}
#verification-help{margin-top:24px;padding-top:20px;border-top:1px solid var(--sc-line);display:grid;justify-items:center;gap:10px}

@media(max-width:980px){
 .auth-aside{padding:44px 32px}
 .auth-card{padding:40px 36px 44px}
}
@media(max-width:820px){
 .auth-shell{grid-template-columns:1fr;width:calc(100% - 32px);margin:20px auto 48px;border-radius:20px}
 .auth-card{order:1;padding:28px 22px 34px}
 .auth-aside{order:2;padding:32px 24px}
 .auth-aside h1{font-size:24px}
 .auth-aside__lead{margin-bottom:22px}
 .auth-card h2{font-size:22px}
 .auth-tabs{margin-bottom:26px}
}
@media(prefers-reduced-motion:reduce){.login-spinner{animation:none}.auth-card .primary{transition:none}}
.auth-body :is(h1,h2,h3,p,li){word-break:auto-phrase;text-wrap:pretty}

/* Password reset: the confirmation after the mail was sent. */
.form-message[data-state="sent"]{padding:14px 16px;border:1px solid #bfe3d0;border-radius:12px;background:#edf8f1;color:#17603f}
.form-message[data-state="sent"] strong{display:block;margin-bottom:2px}
/* Why the visitor was sent to the login page (the login ran out, signed out elsewhere). */
.form-message[data-state="notice"]{padding:14px 16px;border:1px solid #f2ddaa;border-radius:12px;background:#fff8e6;color:#7a5200}
.form-message,#join-message{scroll-margin-top:90px}
#forgot-form[data-sent="true"] input{background:#f4f6fa;color:var(--sc-muted)}
.auth-link{display:block;margin:14px auto 0;padding:0;border:0;background:none;color:#1f5fd6;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
a.auth-done{display:flex;align-items:center;justify-content:center;text-decoration:none}