/* One calm entry surface, shared by sign-in and registration. */
.account-entry-mark { display:none; }
#accountDialog:not(.is-authenticated) {
  --auth-ink:#273c56; --auth-muted:#60758c; --auth-blue:#2878f0;
  width:min(960px,calc(100% - 48px)); max-width:960px; max-height:calc(100dvh - 48px);
  padding:0; border:1px solid rgba(255,255,255,.9); border-radius:28px;
  background:linear-gradient(125deg,#e6f2ff,#f8fbff 66%); overflow:auto;
  box-shadow:0 28px 100px rgba(43,92,151,.16); color:var(--auth-ink);
}
#accountDialog:not(.is-authenticated)[open] { display:grid; grid-template-columns:1fr 1fr; }
#accountDialog:not(.is-authenticated)::backdrop { background:rgba(223,235,248,.85); backdrop-filter:blur(12px); }
#accountDialog:not(.is-authenticated) .account-auth-intro {
  grid-column:1; grid-row:1; position:relative; isolation:isolate; display:flex;
  min-height:580px; padding:36px 40px; border:0; border-radius:0;
  background:radial-gradient(ellipse at 0 0,#f7fbff,transparent 65%); overflow:hidden;
}
#accountDialog:not(.is-authenticated) .account-auth-intro::before,
#accountDialog:not(.is-authenticated) .account-auth-intro::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:660px; height:260px; left:-150px; bottom:-92px; border-radius:50%; transform:rotate(-24deg);
  background:linear-gradient(180deg,rgba(255,255,255,.85),#b3d6ff 20%,#72aeff 48%,#cbe3ff 72%,#eaf5ff);
  box-shadow:0 -2px 0 rgba(255,255,255,.8),0 -18px 65px rgba(121,180,255,.25);
}
#accountDialog:not(.is-authenticated) .account-auth-intro::after { bottom:-152px; left:-70px; opacity:.65; transform:rotate(-27deg); }
#accountDialog:not(.is-authenticated) .account-brand { display:flex; align-items:center; gap:10px; margin:0; }
#accountDialog .account-brand img { width:32px; height:32px; }
#accountDialog .account-brand span { color:#325474; font-size:13px; font-weight:500; letter-spacing:.04em; }
#accountDialog:not(.is-authenticated) .account-intro-copy { margin:auto 0; padding:42px 0 68px; }
#accountDialog .account-intro-copy > span { font-size:12px; color:#557ca3; font-weight:400; letter-spacing:.08em; }
#accountDialog:not(.is-authenticated) .account-auth-intro h2 { font-size:32px; font-weight:500; line-height:1.6; letter-spacing:-.04em; margin:16px 0 12px; color:#2a476b; }
#accountDialog:not(.is-authenticated) .account-auth-intro p { font-size:13px; line-height:1.8; color:#607992; margin:0; }
#accountDialog:not(.is-authenticated) .account-auth-intro .account-intro-note { font-size:11px; letter-spacing:.08em; color:#375d87; }
#accountDialog:not(.is-authenticated) .account-dialog-panel {
  grid-column:2; grid-row:1; align-self:center; min-height:0; max-height:none; overflow:visible;
  margin:24px 24px 24px 0; padding:36px 32px 32px; background:rgba(255,255,255,.85);
  border:1px solid white; border-radius:22px; box-shadow:0 12px 40px rgba(79,133,189,.05);
}
#accountDialog:not(.is-authenticated) .account-entry-mark { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 18px; border:1px solid white; border-radius:15px; background:linear-gradient(140deg,#f8fcff,#e3f0ff); box-shadow:0 5px 14px rgba(52,107,172,.08); }
#accountDialog .account-entry-mark img { width:28px; height:28px; }
#accountDialog:not(.is-authenticated) .dialog-head { display:block; position:static; padding:0; background:transparent; border:0; border-radius:0; text-align:center; }
#accountDialog:not(.is-authenticated) .dialog-head h2 { font-size:24px; line-height:1.5; font-weight:500; letter-spacing:-.03em; color:var(--auth-ink); margin:0; padding:0; }
#accountDialog:not(.is-authenticated) .dialog-head p { font-size:12px; line-height:1.8; color:var(--auth-muted); margin:8px 0 0; }
#accountDialog:not(.is-authenticated) .account-dialog-close { position:absolute; top:8px; right:8px; width:44px; height:44px; padding:0; border:0; background:transparent; color:#60758c; font-size:24px; font-weight:300; }
#accountDialog:not(.is-authenticated) .account-auth-view { padding:24px 0 0; }
#accountDialog:not(.is-authenticated) .account-tabs { display:flex; justify-content:center; gap:24px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#accountDialog:not(.is-authenticated) .account-tabs button { flex:0 1 112px; position:relative; min-height:44px; font-size:13px; font-weight:400; border:0; border-radius:0; background:transparent; color:var(--auth-muted); box-shadow:none; }
#accountDialog:not(.is-authenticated) .account-tabs button.active { color:#2167c5; background:transparent; box-shadow:none; }
#accountDialog:not(.is-authenticated) .account-tabs button.active::after { content:""; display:block; position:absolute; bottom:0; left:calc(50% - 12px); width:24px; height:2px; border-radius:2px; background:var(--auth-blue); }
#accountDialog:not(.is-authenticated) .account-tabs .selection-slider { display:none; }
#accountDialog:not(.is-authenticated) .account-form { margin-top:22px; gap:16px; }
#accountDialog:not(.is-authenticated) .account-form label { font-size:12px; font-weight:400; color:var(--auth-muted); gap:7px; }
#accountDialog:not(.is-authenticated) .account-form input { width:100%; min-height:48px; padding:10px 18px; background:#f0f5fb; color:var(--auth-ink); border:1px solid transparent; border-radius:var(--radius-input); font-size:16px; font-weight:400; }
#accountDialog:not(.is-authenticated) .account-form input:focus { background:white; border-color:var(--blue); outline:none; box-shadow:none; }
#accountDialog:not(.is-authenticated) .account-form > button.primary { min-height:46px; margin-top:4px; border:0; border-radius:var(--radius-button); background:linear-gradient(110deg,#2792f5,#3776f2); box-shadow:0 6px 16px rgba(47,122,239,.14); font-size:14px; font-weight:400; letter-spacing:.04em; color:white; }
#accountDialog:not(.is-authenticated) .account-form > button.primary:hover { filter:brightness(1.04); }
#accountDialog:not(.is-authenticated) .account-form > button.primary:disabled { opacity:.55; }
#accountDialog:not(.is-authenticated) .account-help { font-size:12px; line-height:1.7; margin:0; color:var(--auth-muted); }
#accountDialog:not(.is-authenticated) .account-error { font-size:12px; line-height:1.7; margin:0; }
#accountDialog:not(.is-authenticated) button:focus-visible { outline:2px solid #397dde; outline-offset:3px; }
@media (max-width:760px) {
  #accountDialog:not(.is-authenticated) { width:calc(100% - 24px); max-width:420px; max-height:85dvh; border-radius:var(--radius-dialog); background:linear-gradient(155deg,#e7f3ff 0%,#fafdff 36%,#fff 72%); }
  #accountDialog:not(.is-authenticated)[open] { display:block; }
  #accountDialog:not(.is-authenticated) .account-auth-intro { display:none; }
  #accountDialog:not(.is-authenticated) .account-dialog-panel { margin:0; padding:32px 24px 28px; max-height:none; min-height:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  #accountDialog:not(.is-authenticated) .account-entry-mark { margin-bottom:16px; }
  #accountDialog:not(.is-authenticated) .dialog-head h2 { font-size:23px; }
  #accountDialog:not(.is-authenticated) .account-auth-view { padding-top:18px; }
  #accountDialog:not(.is-authenticated) .account-form { gap:14px; margin-top:18px; }
  #accountDialog:not(.is-authenticated) .turnstile-box { max-width:100%; overflow:auto; }
}
@media (max-height:600px) and (min-width:761px) {
  #accountDialog:not(.is-authenticated) .account-auth-intro { min-height:480px; }
  #accountDialog:not(.is-authenticated) .account-dialog-panel { padding-block:24px; }
}
/* Registration fits the viewport instead of extending the sign-in layout. */
#accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-entry-mark { display:none; }
#accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-auth-intro { min-height:520px; }
#accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-dialog-panel { padding-block:24px; margin-block:16px; }
#accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-auth-view { padding-top:12px; }
#accountDialog:not(.is-authenticated) #accountRegisterForm { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
#accountRegisterForm > :not(label), #accountRegisterForm > label:first-child { grid-column:1 / -1; }
#accountDialog:not(.is-authenticated) #accountRegisterForm input { min-height:44px; padding:8px 12px; }
#accountDialog:not(.is-authenticated) #accountRegisterTurnstile { width:100%; min-width:300px; max-width:none; justify-self:center; overflow:visible; margin:0; }
@media (max-width:760px) {
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) { width:calc(100% - 12px); max-height:calc(100dvh - 12px); }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-dialog-panel { padding:24px 18px 20px; margin:0; }
}
@media (max-height:700px) {
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-dialog-panel { padding-block:16px; margin-block:0; }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .dialog-head h2 { font-size:22px; }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .dialog-head p { display:none; }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-auth-view { padding-top:6px; }
  #accountDialog:not(.is-authenticated) #accountRegisterForm { gap:8px; margin-top:8px; }
  #accountDialog:not(.is-authenticated) #accountRegisterForm label { gap:4px; }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-auth-intro { min-height:0; }
}
@media (max-height:450px) and (min-width:761px) {
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden))[open] { display:block; width:min(680px,calc(100% - 24px)); max-height:calc(100dvh - 16px); }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-auth-intro { display:none; }
  #accountDialog:not(.is-authenticated):has(#accountRegisterForm:not(.hidden)) .account-dialog-panel { margin:0; padding:12px 24px; }
  #accountDialog:not(.is-authenticated) #accountRegisterForm { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #accountRegisterForm > label:first-child { grid-column:auto; }
}