/* Shared auth V1.1: artwork is decorative; all copy and controls are real UI. */
sugarcube-auth-modal { display:contents; font-family:var(--sc-font-sans); }
#authModalOverlay { display:none; }
#authModal { display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center; padding:var(--sc-space-6); overflow:auto; background:var(--sc-color-overlay); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#authModal *,#authModal *::before,#authModal *::after { box-sizing:border-box; }
#authModal .auth-modal-box { position:relative; isolation:isolate; width:min(1040px,100%); min-height:640px; max-height:calc(100dvh - 48px); margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; overflow:auto; overscroll-behavior:contain; color:var(--sc-color-ink); background:var(--sc-color-surface); border:1px solid var(--sc-color-border-strong); border-radius:var(--sc-radius-xl); box-shadow:var(--sc-shadow-popover); outline:none; animation:auth-card-in .3s var(--sc-spring); }
#authModal .auth-modal-close { position:absolute; top:var(--sc-space-4); inset-inline-end:var(--sc-space-4); z-index:5; width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--sc-color-border-strong); border-radius:var(--sc-radius-pill); background:var(--sc-color-surface); color:var(--sc-color-muted); cursor:pointer; }
#authModal .auth-modal-close:hover { color:var(--sc-color-ink); background:var(--sc-color-control-hover); }
#authModal .auth-close-icon { position:relative; width:20px; height:20px; display:block; }
#authModal .auth-close-icon::before,#authModal .auth-close-icon::after { content:''; position:absolute; top:9px; left:1px; width:18px; height:2px; border-radius:2px; background:currentColor; transform:rotate(45deg); }
#authModal .auth-close-icon::after { transform:rotate(-45deg); }
#authModal .auth-visual { position:relative; min-width:0; overflow:hidden; padding:var(--sc-space-10) var(--sc-space-10) 440px; border-inline-end:1px solid var(--sc-color-border-strong); background:linear-gradient(var(--sc-color-overlay),transparent),url('/images/auth/desktop-background.webp') center/cover,var(--sc-color-well); }
#authModal .auth-visual-inner { position:relative; z-index:2; }
#authModal .auth-v5b-logo { display:block; width:180px; height:auto; max-width:65%; object-fit:contain; }
#authModal .auth-visual-title { max-width:12ch; margin:var(--sc-space-8) 0 0; font:600 40px/1.2 var(--sc-font-display); letter-spacing:-.035em; overflow-wrap:anywhere; text-wrap:balance; }
/* Artwork is anchored to its own region, independently of the form and drawer width. */
#authModal .auth-character { position:absolute; z-index:1; pointer-events:none; user-select:none; left:50%; bottom:0; width:550px; line-height:0; transform:translateX(-50%); }
#authModal .auth-character::before { content:''; position:absolute; z-index:-1; left:0; bottom:calc(100% - 1px); width:93.9869%; height:calc(var(--sc-space-10) + 1px); background:url('/images/auth/desktop-scene-transition.png') center/100% 100%; mask-image:linear-gradient(transparent,#000); }
#authModal .auth-character img { display:block; width:100%; height:auto; pointer-events:none; }
#authModal .auth-panel { position:relative; z-index:2; min-width:0; display:flex; align-items:center; padding-block:var(--sc-space-16) var(--sc-space-12); padding-inline:var(--sc-space-16) var(--sc-space-10); }
#authModal .auth-panel-inner { width:100%; min-width:0; }
#authModal .auth-modal-heading { margin:0 0 var(--sc-space-8); padding:0; }
#authModal .auth-modal-title { font:600 42px/1.1 var(--sc-font-display); letter-spacing:-.035em; overflow-wrap:anywhere; }
#authModal .auth-modal-subtitle { margin:var(--sc-space-3) 0 0; color:var(--sc-color-muted); font-size:16px; line-height:1.5; }
#authModal .auth-google-alternative { display:flex; flex-direction:column; }
#authModal .auth-helper-mobile,#authModal .auth-passwordless { display:none; }
#authModal[data-auth-view=google] :is(.auth-google-alternative,.auth-passwordless) { display:none; }
#authModal .auth-submit-btn,#authModal .auth-google-btn,#authModal .auth-use-email { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:10px 26px; border:0; border-radius:999px; font:600 15px/1.3 var(--sc-font-sans); cursor:pointer; box-shadow:var(--sc-shadow-hairline),inset 0 1px 0 rgba(255,228,196,.06); transition:background .25s,transform .25s var(--sc-spring); }
#authModal .auth-google-btn { margin-top:0; gap:12px; background:var(--sc-color-ink); color:var(--sc-color-on-brand); }#authModal .auth-google-btn:hover { background:var(--sc-color-ink); }#authModal .auth-google-icon { display:block; flex:none; width:18px; height:18px; }
#authModal .auth-submit-btn { margin-top:14px; background:var(--sc-color-brand-500); color:var(--sc-color-on-brand); box-shadow:0 10px 26px -10px rgba(255,106,43,.6),inset 0 1px 0 rgba(255,220,190,.35); }#authModal .auth-submit-btn:hover:not(:disabled) { background:var(--sc-color-brand-hover); transform:translateY(-1px); }#authModal .auth-submit-btn:active:not(:disabled) { transform:scale(.98); }#authModal .auth-submit-btn:disabled { opacity:1; background:var(--sc-color-control-hover); color:var(--sc-color-subtle); box-shadow:none; cursor:not-allowed; transform:none; }#authModal .auth-submit-btn[aria-busy=true] { opacity:.85; background:var(--sc-color-brand-500); color:var(--sc-color-on-brand); box-shadow:0 10px 26px -10px rgba(255,106,43,.6),inset 0 1px 0 rgba(255,220,190,.35); }
#authModal .auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; font-size:12px; color:var(--sc-color-subtle); }#authModal .auth-divider::before,#authModal .auth-divider::after { content:''; flex:1; height:1px; background:var(--sc-color-border); }
#authModal .auth-field { margin:0; }#authModal .auth-field label { display:block; margin-bottom:10px; color:var(--sc-color-text); font-size:13px; font-weight:600; }
#authModal .auth-field input { width:100%; height:50px; padding:0 16px; border:0; border-radius:14px; background:var(--sc-color-well); box-shadow:inset 0 0 0 1px var(--sc-color-border); outline:0; color:var(--sc-color-ink); font:400 14px/1.5 var(--sc-font-sans); caret-color:var(--sc-color-brand-500); transition:box-shadow .2s; }#authModal .auth-field input::placeholder { color:var(--sc-color-subtle); }
#authModal .auth-field input:focus { box-shadow:inset 0 0 0 1px var(--sc-color-brand-500),0 0 0 4px rgba(255,106,43,.14); }#authModal .auth-field input[aria-invalid=true] { box-shadow:inset 0 0 0 1px var(--sc-color-danger),0 0 0 4px rgba(229,83,58,.12); }
#authModal .auth-field-error,#authModal .auth-error { margin:8px 0 0; color:var(--sc-color-danger-ink); font-size:12.5px; line-height:1.5; }#authModal .auth-field-error:empty,#authModal .auth-error:empty { display:none; }#authModal .auth-error:not(:empty) { margin-bottom:14px; }#authModal .auth-field-error:not(:empty)::before,#authModal .auth-error:not(:empty)::before { content:'!'; display:inline-grid; place-items:center; width:14px; height:14px; margin-inline-end:7px; border:1px solid currentColor; border-radius:50%; font-size:10px; }
#authModal .auth-safe-note,#authModal .auth-code-help { display:flex; align-items:center; gap:6px; margin:22px 0 0; color:var(--sc-color-subtle); font-size:12px; line-height:1.5; }
#authModal .auth-code-help svg { flex:none; }
#authModal .auth-verify-desc { margin:10px 0 0; color:var(--sc-color-muted); font-size:14px; line-height:1.55; }#authModal .auth-verify-desc strong { color:var(--sc-color-text); overflow-wrap:anywhere; }
#authModal .auth-code-input-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:26px; }#authModal .auth-code-digit { width:100%; min-width:0; height:60px; padding:0; border:0; outline:0; border-radius:14px; background:var(--sc-color-well); box-shadow:inset 0 0 0 1px var(--sc-color-border); color:var(--sc-color-ink); font:600 26px/1 var(--sc-font-display); text-align:center; caret-color:var(--sc-color-brand-500); transition:box-shadow .2s,transform .2s; }#authModal .auth-code-digit:focus { box-shadow:inset 0 0 0 1.5px var(--sc-color-brand-500),0 0 0 4px rgba(255,106,43,.14); }#authModal .auth-code-digit.is-filled { background:var(--sc-color-surface-muted); }#authModal .auth-code-digit[aria-invalid=true] { box-shadow:inset 0 0 0 1.5px var(--sc-color-danger); }#authModal .auth-code-input-row:has([aria-invalid=true]) { animation:auth-shake .4s; }
#authVerifyBtn { margin-top:18px; }#authModal .auth-verify-footer { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; color:var(--sc-color-muted); font-size:13px; }#authModal .auth-resend-btn { padding:0; border:0; background:none; color:var(--sc-color-brand-700); font:600 13px/1.5 var(--sc-font-sans); cursor:pointer; }#authModal .auth-resend-btn:disabled { display:none; }#authModal .auth-resend-cooldown { color:var(--sc-color-subtle); font-variant-numeric:tabular-nums; }
#authResendText { display:none!important; }
#authModal .auth-verify-back { display:none; margin:0 0 22px; }#authModal .auth-verify-back a { display:inline-flex; align-items:center; gap:6px; color:var(--sc-color-muted); font:600 13px/1.5 var(--sc-font-sans); text-decoration:none; }#authModal .auth-verify-back a:hover { color:var(--sc-color-ink); }
#authModal[data-auth-view=verify] .auth-verify-back { display:block; }#authModal[data-auth-view=verify] #authFormSubtitle { display:none; }
#authGoogleSection { text-align:center; }#authGoogleSection[hidden] { display:none; }#authModal[data-auth-view=google] .auth-panel-inner { display:flex; flex-direction:column; text-align:center; }#authModal[data-auth-view=google] #authGoogleSection { display:contents; }#authModal .auth-google-wait-icon { order:-1; width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:var(--sc-color-ink); }#authModal .auth-google-wait { display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 0; color:var(--sc-color-text); font-size:13.5px; }#authModal .auth-use-email { width:auto; min-height:42px; align-self:center; margin-top:22px; padding:0 18px; font-size:14px; background:transparent; color:var(--sc-color-ink); box-shadow:inset 0 0 0 1px var(--sc-color-border-strong); }
#authModal .auth-spinner { display:inline-block; flex:none; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:auth-spin .8s linear infinite; }
#authModal :is(button,a):focus-visible { outline:2px solid var(--sc-color-focus); outline-offset:3px; }#authModal input:disabled { cursor:wait; opacity:.55; }
@keyframes auth-spin { to { transform:rotate(360deg); } }@keyframes auth-float { 50% { transform:translateY(-6px); } }@keyframes auth-card-in { from { opacity:0; transform:translateY(14px) scale(.985); } }@keyframes auth-shake { 20%,60% { transform:translateX(-6px); }40%,80% { transform:translateX(6px); } }

@media(max-width:959px) {
 #authModal { align-items:flex-end; padding:0; }
 #authModal .auth-modal-box { width:min(600px,100%); min-height:0; max-height:94dvh; margin:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:start; border-radius:var(--sc-radius-xl) var(--sc-radius-xl) 0 0; }
 #authModal .auth-visual { --auth-character-size:240px; min-height:280px; padding:var(--sc-space-6) var(--sc-space-5); border-inline-end:0; border-bottom:1px solid var(--sc-color-border-strong); background:radial-gradient(ellipse at bottom right,var(--sc-color-selected-border),transparent 70%),var(--sc-color-well); }
 #authModal .auth-v5b-logo { width:168px; max-width:60%; }
 #authModal .auth-visual-title { margin-top:var(--sc-space-8); font-size:32px; max-width:calc(100% - var(--auth-character-size) + var(--sc-space-5)); }
 #authModal .auth-character { width:var(--auth-character-size); height:var(--auth-character-size); left:auto; inset-inline-end:calc(-1 * var(--sc-space-5)); top:auto; bottom:0; transform:none; }
 #authModal .auth-character::before { display:none; }
 #authModal .auth-character img { width:100%; max-width:none; height:auto; mask-image:linear-gradient(#000 82%,transparent); }
 #authModal .auth-panel { padding:var(--sc-space-6) var(--sc-space-5) calc(var(--sc-space-6) + env(safe-area-inset-bottom)); }
 #authModal .auth-panel-inner { display:flex; flex-direction:column; }
 #authModal .auth-modal-title { font-size:28px; }
 #authModal .auth-modal-heading { margin-bottom:var(--sc-space-6); }
 #authModal .auth-modal-subtitle { margin-top:var(--sc-space-2); font-size:14px; }
 #authModal .auth-field label { font-size:14px; }
 #authModal .auth-field input { font-size:16px; height:52px; }
 #authModal .auth-google-alternative { margin-top:0; }
 #authModal .auth-google-alternative .auth-divider { order:-1; margin:var(--sc-space-5) 0; }
 #authModal .auth-google-btn { margin-top:0; }
 #authModal .auth-helper-desktop { display:none; }
 #authModal .auth-helper-mobile { display:inline; }
 #authModal .auth-safe-note { margin-top:var(--sc-space-3); }
 #authModal .auth-passwordless { display:block; text-align:center; color:var(--sc-color-muted); font-size:12px; line-height:1.5; margin:var(--sc-space-4) 0 0; }
 #authModal .auth-code-input-row { gap:var(--sc-space-2); }
 #authModal .auth-code-digit { height:52px; font-size:22px; }
 #authModal:is([data-auth-view=verify],[data-auth-view=google]) .auth-visual,#authModal:is([data-auth-view=verify],[data-auth-view=google]) .auth-character { display:none; }
 #authModal:is([data-auth-view=verify],[data-auth-view=google]) .auth-modal-box { min-height:0; grid-template-rows:1fr; }
 #authModal:is([data-auth-view=verify],[data-auth-view=google]) .auth-panel { padding-top:var(--sc-space-16); }
}
@media(max-width:400px) {
 #authModal .auth-visual-title { font-size:28px; }
 #authModal .auth-visual { --auth-character-size:200px; }
}
@media(max-height:700px) and (max-width:959px) {
 #authModal .auth-modal-box { min-height:0; }
 #authModal .auth-visual { min-height:260px; }
 #authModal .auth-visual-title { margin-top:var(--sc-space-6); }
}
@media(prefers-reduced-motion:reduce) { #authModal *,#authModal *::before,#authModal *::after { animation:none!important; transition:none!important; } }