.account-form, .account-body { padding: 20px 24px; }
.account-form { display: grid; gap: 14px; border-top: 1px solid var(--hairline); }
.account-form label { display: grid; gap: 7px; font-size: 13px; color: var(--text-dim); }
.account-form input { width: 100%; min-height: 44px; font-size: 16px; }
.account-form .btn { justify-self: start; min-height: 44px; }
.account-form .note, .account-body .note { margin: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--hairline); }
.account-actions .btn { min-height: 44px; }
.account-conflict { padding: 20px 24px; border-top: 1px solid var(--hairline); }
.account-conflict p { font-size: 14px; line-height: 1.6; }
.account-conflict .account-actions { padding: 10px 0 0; border: 0; }
.account-message { padding: 0 24px 20px; font-size: 14px; }
#account-status { text-align: right; max-width: 60%; }
.sync-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); font-size: 13px; }
@media (max-width: 600px) { .account-form, .account-body, .account-conflict { padding: 16px; } .account-actions { padding: 16px; } }

.account-google-section { padding: 4px 24px 0; }
.account-google-section .google-signin { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 12px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 12px; font: 500 14px/20px "Google Sans", Arial, sans-serif; }
.google-signin img { flex: none; object-fit: contain; }
.account-google-section .note { margin: 12px 0 0; }
.account-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; color: var(--text-dim); font-size: 12px; }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
#account-login { border-top: 0; }
@media (max-width: 600px) { .account-google-section { padding: 0 16px; } .account-google-section .google-signin { width: 100%; } }

/* Quiet account surfaces: one identity, grouped preferences and disclosures. */
.settings-view { max-width: 620px; margin-inline: auto; }
.settings-view .page-sub { margin-bottom: 32px; }
.settings-section { margin: 0 0 28px; }
.settings-section .card-heading { margin: 0 0 10px 4px; }
.settings-view .card { margin-bottom: 0; }
.settings-view .card-row { padding: 18px 22px; }
.settings-view .row-hint { max-width: 34ch; }
.settings-view #input-name { max-width: 240px; }
.account-summary { display: flex; align-items: center; gap: 14px; padding: 22px; }
.account-avatar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 20px; font-family: var(--font-display); }
.account-summary-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
#account-identity { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
#account-status { text-align: left; max-width: none; color: var(--text-dim); font-size: 12px; }
.settings-account > .card-row { border-top: 1px solid var(--hairline); }
.account-summary .btn { flex-shrink: 0; }
.settings-disclosure { border-top: 1px solid var(--hairline); }
.settings-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; list-style: none; font-size: 14px; cursor: pointer; min-height: 60px; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary:hover { background: var(--surface-2); }
.settings-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--r-md); }
.disclosure-plus { font-size: 20px; font-weight: 400; color: var(--text-dim); transition: transform .22s var(--ease); }
.settings-disclosure[open] > summary .disclosure-plus { transform: rotate(45deg); }
.settings-disclosure[open] > :not(summary) { animation: settings-reveal .22s var(--ease) both; }
.settings-disclosure small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.settings-data { margin-top: 32px; }
.settings-detail-note, .account-local-note { padding: 0 22px 18px; margin: 0; font-size: 12px; }
.settings-detail-note:empty { display: none; }
.settings-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 22px 4px 0; color: var(--text-dim); font-size: 11px; }
.settings-footer a { color: inherit; text-underline-offset: 3px; }
.account-message { line-height: 1.6; color: var(--text-dim); }

/* Cinematic sign-in. This local palette does not change the learner's app theme. */
body.signing-in { --bg: #000; --surface: #101318; --surface-2: #191e26; --text: #f5f6f8; --text-dim: #9a9fa9; --ink: #f5f6f8; --hairline: #ffffff1c; --hairline-strong: #ffffff36; color-scheme: dark; background: var(--bg); }
body.signing-in .tabs, body.signing-in .mobile-nav-toggle { display: none; }
body.signing-in .topbar { border-color: transparent; background: var(--bg); backdrop-filter: none; }
body.signing-in .topbar-inner { max-width: 1440px; padding-inline: clamp(24px, 5vw, 80px); }
body.signing-in .brand-mark { filter: invert(1); }
body.signing-in .lang-btn { margin-left: auto; color: #bcc1cb; }
body.signing-in .app { max-width: none; padding: 0; overflow: clip; }
body.signing-in .bg-paths { visibility: hidden; }
.signin-view { position: relative; isolation: isolate; min-height: calc(100svh - 56px); padding: clamp(32px, 5vh, 60px) clamp(24px, 6vw, 96px) 64px; text-align: left; }
.signin-view.active { display: flex; align-items: center; }
.signin-copy { position: relative; z-index: 2; width: min(100%, 1280px); margin-inline: auto; pointer-events: none; }
.signin-copy > * { pointer-events: auto; }
.signin-intro { max-width: 490px; }
.signin-eyebrow { font: 500 11px/1.5 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #aeb7c4; margin: 0 0 28px; }
.signin-view .page-title { max-width: 9ch; font-family: var(--font-display); font-size: clamp(64px, 7.8vw, 108px); font-weight: 400; letter-spacing: -.045em; line-height: .99; text-wrap: balance; color: #f5f6f8; }
:root[lang|="zh"] .signin-view .page-title { max-width: 8em; font-family: var(--font); font-size: clamp(42px, 5vw, 68px); font-weight: 450; letter-spacing: -.05em; line-height: 1.3; }
.signin-view .page-sub { margin: 24px 0 34px; max-width: 31ch; line-height: 1.7; font-size: 15px; color: #aeb4bf; }
.signin-card { width: min(100%, 330px); text-align: left; }
.signin-caption { font-size: 11px; line-height: 1.6; color: var(--text-dim); margin: 0 0 14px; }
.signin-card .account-google-section { padding: 0; display: grid; gap: 10px; }
.signin-card .google-signin { width: 100%; min-height: 50px; border-radius: 28px; border-color: #fff; transition: transform .2s, box-shadow .2s; }
.signin-card .google-signin:hover { transform: translateY(-1px); box-shadow: 0 0 32px #b6d5ff20; }
.student-signin { margin-top: 10px; }
.student-signin > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 4px 18px; font-size: 12px; cursor: pointer; list-style: none; color: #bfc5cf; border: 1px solid #ffffff26; border-radius: 26px; }
.student-signin > summary::-webkit-details-marker { display: none; }
.student-signin > summary:hover { border-color: #ffffff50; color: #fff; }
.student-signin > summary:focus-visible { outline: 2px solid #b5ceef; outline-offset: 4px; }
.student-signin[open] .disclosure-plus { transform: rotate(45deg); }
.student-signin[open] .account-form { animation: settings-reveal .24s var(--ease) both; }
.signin-card .account-form { padding: 18px 0 6px; gap: 14px; }
.signin-card .account-form label { color: var(--text); font-size: 12px; gap: 8px; }
.signin-card .select { background: #0e1219; border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 11px 14px; min-height: 46px; color: #f5f6f8; }
.signin-card .account-form .btn.primary { width: 100%; min-height: 48px; margin-top: 2px; border-radius: 26px; background: #f5f6f8; border-color: #f5f6f8; color: #030406; }
.signin-card .account-form .note { font-size: 11px; text-align: center; color: var(--text-dim); }
.signin-card .account-message { margin: 14px 0 0; padding: 12px 14px; background: #151b26; border: 1px solid #ffffff20; border-radius: 12px; font-size: 12px; color: #c2cbd9; }
.signin-guest.btn { font-size: 12px; margin-top: 14px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; box-shadow: none; color: #d2d7df; }
.signin-guest.btn:hover { color: #fff; }
.signin-footnote { color: #858d99; font-size: 10px; margin: -2px 0 0; }
.signin-card button:disabled { cursor: wait; }
.signin-motion { position: absolute; z-index: 3; bottom: 22px; right: clamp(24px, 5vw, 80px); display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; border: 1px solid #ffffff1c; border-radius: 24px; background: #05070b80; color: #aab4c2; font: 11px var(--font); cursor: pointer; }
.signin-motion:focus-visible { outline: 2px solid #b5ceef; outline-offset: 3px; }
.signin-art { position: absolute; z-index: 0; inset: -50px -18% -10px 20%; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 25%, #000 88%, transparent); }
.signin-art canvas, .signin-orbit-fallback { position: absolute; width: 100%; height: 100%; inset: 0; }
.signin-art canvas { opacity: 0; transition: opacity 1s; }
.signin-art[data-renderer="webgl"] canvas { opacity: 1; }
.signin-art[data-renderer="webgl"] .signin-orbit-fallback { visibility: hidden; }
@keyframes settings-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1600px) { .signin-art { left: 30%; right: -5%; } }
@media (max-width: 850px) {
  .signin-view { padding-top: 44px; }
  .signin-intro { max-width: 390px; }
  .signin-art { left: 24%; right: -60%; opacity: .6; }
  .signin-copy { text-shadow: 0 2px 18px #000; }
}
@media (max-width: 600px) {
  .account-summary { padding: 18px 16px; gap: 10px; }
  .account-avatar { flex-basis: 36px; height: 36px; }
  .settings-view .card-row, .settings-disclosure > summary { padding: 16px; }
  .settings-view #input-name { max-width: none; width: 100%; }
  .settings-detail-note, .account-local-note { padding-inline: 16px; }
  .signin-view { padding: 32px 24px 82px; }
  .signin-view.active { display: block; }
  .signin-copy { width: 100%; }
  .signin-eyebrow { font-size: 9px; letter-spacing: .09em; margin-bottom: 24px; }
  .signin-view .page-title { font-size: clamp(58px, 13vw, 78px); max-width: 8ch; }
  :root[lang|="zh"] .signin-view .page-title { font-size: 38px; max-width: 7em; }
  .signin-view .page-sub { margin-top: 22px; margin-bottom: 40px; max-width: 26ch; font-size: 14px; }
  .signin-card { width: 100%; max-width: 350px; }
  .signin-art { inset: 0 -75% auto 10%; height: 400px; opacity: .42; mask-image: linear-gradient(transparent, #000 15%, #000 60%, transparent 96%); }
  .signin-motion { bottom: 18px; right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-disclosure[open] > :not(summary), .student-signin[open] .account-form { animation: none; }
  .disclosure-plus, .signin-art canvas, .signin-card .google-signin { transition: none; }
  .signin-motion { display: none; }
}
#signin-title:focus { outline: none; }

/* Account steps keep the same quiet, silver entry surface. */
.auth-text-button { display: block; appearance: none; background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 12px; line-height: 1.5; min-height: 44px; padding: 10px 0; text-align: left; cursor: pointer; }
.auth-text-button:hover { color: var(--text); }
.auth-text-button:focus-visible { outline: 2px solid #b5ceef; outline-offset: 3px; border-radius: 4px; }
.auth-toggle { margin-top: 12px; color: #d2d7df; }
.signin-card .registration-form { border-top: 0; padding-top: 6px; }
.auth-help, .auth-step p { color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.auth-step { padding-top: 12px; }
.auth-step strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.auth-step .btn { margin-top: 12px; min-height: 44px; }
.signin-card .auth-check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dim); line-height: 1.6; }
.signin-card .auth-check input { width: 18px; min-height: 18px; margin-top: 2px; flex-shrink: 0; }
.signin-view[data-auth-mode]:not([data-auth-mode="signin"]) .page-title { font-size: clamp(42px, 5vw, 68px); max-width: 10ch; }
.signin-view[data-auth-mode]:not([data-auth-mode="signin"]) .page-sub { margin-bottom: 20px; }
@media (max-width: 600px) {
  .signin-view[data-auth-mode]:not([data-auth-mode="signin"]) { align-items: flex-start; }
  .signin-view[data-auth-mode]:not([data-auth-mode="signin"]) .page-title { font-size: 44px; }
}