/* Shared sign-in, registration and password-required surface. */
.login-shell { display: grid; place-items: center; min-height: 100dvh; padding: 40px 24px; }
.login-layout { width: min(400px,100%); }
.login-panel { border: 1px solid var(--line); border-radius: 12px; padding: 32px; background: var(--surface); }
.login-brand { margin-bottom: 32px; }
.login-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.login-brand > div:last-child { min-width: 0; }
.login-brand strong { white-space: normal; }
.login-brand span { display: block; font-size: 12px; margin-top: 2px; color: var(--muted); }
.login-panel h2 { font-size: 22px; line-height: 32px; margin-bottom: 24px; }
.login-form { display: grid; gap: 20px; }
.login-form > button[type="submit"] { width: 100%; }
.login-password-field,.onboarding-password-field,.user-password-field { position: relative; display: block; }
.login-password-field input,.onboarding-password-field input,.user-password-field input { padding-right: 46px!important; }
.password-visibility-toggle,
.user-password-field > button {
  position: absolute;
  inset: 0 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  width: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--motion), color var(--motion), border-color var(--motion), box-shadow var(--motion);
}
.password-visibility-toggle:hover:not(:disabled),
.user-password-field > button:hover:not(:disabled) {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: transparent;
}
.password-visibility-toggle:active:not(:disabled),
.user-password-field > button:active:not(:disabled) {
  background: var(--brand-tint);
  color: var(--brand-hover);
  filter: none;
}
.password-visibility-toggle:focus-visible,
.user-password-field > button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--focus-border);
  outline-offset: -2px;
  color: var(--brand);
  background: var(--brand-tint);
}
.password-visibility-toggle[aria-pressed="true"],
.user-password-field > button[aria-pressed="true"] {
  color: var(--brand);
}
.password-visibility-toggle::before { content: ""; width: 18px; height: 18px; background: currentColor; mask: url("icons/eye.svg") center / contain no-repeat; }
.password-visibility-toggle[aria-pressed="true"]::before,.password-visibility-toggle[aria-label^="隐藏"]::before { mask-image: url("icons/eye-off.svg"); }
.login-captcha-field { display: flex; align-items: stretch; gap: 10px; }
.login-captcha-field input { flex: 1; }
button.captcha-image-button { position:relative; flex:0 0 116px; width:116px; min-height:var(--control-height); padding:0; background:var(--surface); color:var(--ink); border:1px solid var(--line); overflow:hidden; }
button.captcha-image-button:hover:not(:disabled) { background:var(--surface); border-color:var(--line-strong); }
.captcha-image-button img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; }
.login-secondary-link { text-align: center; text-decoration: none; }
.login-submit-spinner { display: none; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; animation: ui-spin 1s linear infinite; }
.login-submit-button.is-loading { opacity: 1; cursor: wait; }
.login-submit-button.is-loading .login-submit-spinner { display: inline-block; opacity: 1; }
.login-submit-button.is-loading::after { display: none; }
@media(max-width:480px) { .login-shell { padding: 24px 16px; } .login-panel { padding: 24px; } .login-brand { margin-bottom: 24px; } }

.user-password-row { display: grid; gap: 6px; margin-bottom: 16px; }
.user-password-field > button svg { width: 18px; height: 18px; }
.user-password-field > button:not([aria-pressed="true"]) .password-eye-slash { display: none; }
.password-required-logout { margin-top: 12px; }
.password-required-logout button { width: 100%; }

/* Joker sign-in: brand illustration and a quiet, stationary form. */
.joker-auth-page { display:flex; flex-direction:column; align-items:stretch; min-height:100dvh; padding:0; background:var(--canvas); }
.auth-masthead { width:min(1320px,calc(100% - 80px)); min-height:96px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-brand { gap:12px; min-width:0; }
.auth-brand .brand-mark { width:34px; height:34px; flex:0 0 34px; }
.auth-brand strong { font-size:15px; font-weight:650; letter-spacing:-.02em; white-space:nowrap; }
.auth-brand strong span { display:inline; font-size:inherit; line-height:inherit; font-weight:450; color:var(--muted); }
.auth-theme-options { display:flex; flex:0 0 auto; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.auth-theme-options button { display:inline-grid; place-items:center; width:34px; min-height:34px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted); }
.auth-theme-options button:hover { background:var(--hover); color:var(--ink); }
.auth-theme-options button[aria-checked="true"] { background:var(--brand-tint); color:var(--brand); }
.auth-theme-options svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; }
.joker-auth-layout { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:clamp(40px,5vw,88px); align-items:center; flex:1; width:min(1240px,calc(100% - 112px)); margin-inline:auto; }
.joker-auth-layout::before { content:""; position:absolute; top:14%; bottom:14%; left:58%; width:1px; background:linear-gradient(transparent,var(--line),transparent); pointer-events:none; }
.auth-showcase { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-block:16px 48px; }
.auth-artwork { position:relative; width:min(560px,100%); aspect-ratio:1; margin-block:-24px -32px; isolation:isolate; }
.auth-artwork img { display:block; position:relative; width:100%; height:auto; animation:auth-mask-float 9s ease-in-out infinite; }
.auth-artwork .auth-artwork-dark { display:none; }
[data-theme="dark"] .auth-artwork .auth-artwork-light { display:none; }
[data-theme="dark"] .auth-artwork .auth-artwork-dark { display:block; }
.auth-artwork-glow { position:absolute; inset:20%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--brand) 13%,transparent),transparent 70%); filter:blur(20px); animation:auth-halo-breathe 9s ease-in-out infinite; }
.auth-showcase-copy { position:relative; padding-left:24px; }
.auth-eyebrow { display:block; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.2em; line-height:1.6; }
.auth-showcase-copy h1 { margin:14px 0 12px; font-size:clamp(30px,3.2vw,44px); font-weight:600; line-height:1.3; letter-spacing:-.045em; white-space:nowrap; }
.auth-showcase-copy h1 > span { color:var(--brand); }
.auth-showcase-copy p { margin:0; color:var(--muted); font-size:13px; letter-spacing:.04em; }
.auth-login-panel { justify-self:center; width:100%; max-width:368px; min-width:0; padding:24px 0; background:transparent; border:0; border-radius:0; }
.auth-form-heading { margin-bottom:32px; }
.auth-form-heading .auth-eyebrow { margin-bottom:14px; color:var(--brand); letter-spacing:.14em; }
.auth-login-panel h2 { margin:0 0 10px; font-size:30px; font-weight:600; line-height:1.35; letter-spacing:-.04em; }
.auth-form-heading p { margin:0; color:var(--muted); font-size:13px; }
.auth-login-panel .login-form { gap:22px; }
.auth-login-panel .login-form > label { gap:8px; margin:0; font-size:13px; }
.auth-login-panel label:has(input:required) > span:first-child::after { content:" *"; color:var(--muted); font-weight:600; }
.auth-login-panel .login-form input:not([type="hidden"]) { min-width:0; width:100%; min-height:48px; border-radius:8px; background:var(--surface); font-size:14px; }
.auth-login-panel .login-form input::placeholder { color:color-mix(in srgb,var(--muted) 72%,transparent); }
.auth-login-panel .login-form input:user-invalid { border-color:var(--danger); }
.auth-login-panel .login-form input:user-invalid:focus { box-shadow:0 0 0 3px var(--danger-tint); }
.auth-login-panel .password-visibility-toggle { width:44px; min-height:44px; top:2px; bottom:2px; right:2px; }
.auth-login-panel .login-captcha-field { gap:12px; }
.auth-login-panel .login-captcha-field > input { width:0; flex:1 1 0; }
.auth-login-panel .captcha-image-button { position:relative; flex:0 0 120px; width:120px; min-height:48px; border-radius:8px; }
.auth-login-panel .captcha-image-button[aria-busy="true"] img { opacity:.3; }
.auth-login-panel .captcha-image-button[aria-busy="true"]::after { content:""; position:absolute; width:18px; height:18px; color:var(--brand); background:currentColor; mask:url("icons/loader-circle.svg") center / contain no-repeat; animation:ui-spin 1s linear infinite; }
.auth-login-panel .auth-field-error { font-size:12px; line-height:1.6; color:var(--danger-text); }
.auth-login-panel .login-submit-button { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin-top:2px; border-radius:8px; font-size:14px; font-weight:550; }
.auth-submit-arrow { position:absolute; right:16px; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.75; transition:transform var(--motion); }
.login-submit-button:hover .auth-submit-arrow { transform:translateX(3px); }
.login-submit-button.is-loading .auth-submit-arrow { visibility:hidden; }
.auth-register-link { margin:0; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:8px; color:var(--muted); font-size:13px; white-space:nowrap; }
.auth-register-link a { display:inline-flex; flex:0 0 auto; align-items:center; gap:4px; color:var(--ink); white-space:nowrap; }
.auth-register-link a:hover { color:var(--brand); }
.auth-register-link svg { flex:0 0 14px; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }
.auth-login-panel .form-error { margin:0; padding:10px 12px; font-size:13px; line-height:1.6; border:1px solid color-mix(in srgb,var(--danger) 20%,transparent); border-radius:8px; overflow-wrap:anywhere; }
.auth-footer { width:min(1320px,calc(100% - 80px)); margin-inline:auto; padding-block:20px 28px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; }
@keyframes auth-mask-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes auth-halo-breathe { 0%,100% { opacity:.55; transform:scale(.98); } 50% { opacity:1; transform:scale(1.04); } }
@media (max-width:1023px) and (min-width:761px) {
  .joker-auth-layout { width:calc(100% - 64px); grid-template-columns:minmax(0,1fr) minmax(310px,1fr); gap:40px; }
  .joker-auth-layout::before { left:49%; }
  .auth-showcase-copy { padding-left:0; }
  .auth-showcase-copy h1 { font-size:28px; white-space:normal; }
  .auth-showcase-copy p { max-width:240px; line-height:1.8; }
}
@media (max-width:760px) {
  .auth-masthead { width:calc(100% - 40px); min-height:76px; gap:12px; }
  .auth-brand { gap:8px; }
  .auth-brand .brand-mark { width:28px; height:28px; flex-basis:28px; }
  .auth-brand strong { font-size:13px; }
  .auth-theme-options { gap:0; padding:2px; }
  .auth-theme-options button { width:32px; min-height:36px; }
  .joker-auth-layout { display:flex; flex-direction:column; justify-content:center; gap:0; width:min(400px,calc(100% - 48px)); }
  .joker-auth-layout::before { display:none; }
  .auth-showcase { width:100%; align-items:center; padding:0; }
  .auth-artwork { width:184px; margin:-8px 0 -6px; }
  .auth-showcase-copy { display:none; }
  .auth-login-panel { max-width:none; padding:12px 0 20px; }
  .auth-form-heading { margin-bottom:24px; }
  .auth-form-heading .auth-eyebrow { display:none; }
  .auth-login-panel h2 { font-size:26px; margin-bottom:8px; }
  .auth-login-panel .login-form { gap:18px; }
  .auth-login-panel .login-form input:not([type="hidden"]) { font-size:16px; }
  .auth-footer { justify-content:center; width:calc(100% - 40px); padding-block:16px 24px; }
  .auth-footer > span:first-child { display:none; }
}
@media (max-width:360px) {
  .auth-masthead { width:calc(100% - 32px); gap:8px; }
  .auth-brand strong { font-size:12px; }
  .joker-auth-layout { width:calc(100% - 40px); }
  .auth-artwork { width:140px; margin-top:0; }
  .auth-login-panel .captcha-image-button { flex-basis:104px; width:104px; }
}
/* Short phones keep the form in view; errors use the illustration's space. */
@media (max-width:760px) and (max-height:740px) {
  .auth-masthead { min-height:64px; }
  .auth-artwork { width:96px; margin-block:-8px -4px; }
  .auth-login-panel { padding-block:8px 12px; }
  .auth-login-panel h2 { font-size:24px; margin-bottom:6px; }
  .auth-form-heading { margin-bottom:20px; }
  .auth-form-heading p { display:none; }
  .auth-login-panel .login-form { gap:16px; }
  .auth-login-panel .login-form > label { gap:6px; }
  .auth-footer { padding-block:10px 12px; }
  .joker-auth-layout:has(.form-error,.auth-field-error:not([hidden])) .auth-showcase { display:none; }
}
@media (prefers-reduced-motion:reduce) { .auth-artwork img,.auth-artwork-glow { animation:none; } .auth-submit-arrow { transition:none; } }