body[data-screen="login"] .bottom-nav, body[data-screen="login"] .bag-button { display: none; }
.login-form[hidden],.login-field[hidden],#login-password-fields[hidden]{display:none!important}
.login-tabs{display:flex;gap:8px;margin:0 0 24px}.login-tabs button{flex:1;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:14px;font-size:14px}.login-tabs button[aria-pressed="true"]{background:var(--glow);border-color:var(--accent);color:var(--text)}
#account-setup>input,#account-setup>select{box-sizing:border-box;display:block;width:100%;min-height:50px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:12px;font:16px/1.5 'Microsoft YaHei',sans-serif;margin-bottom:16px}#account-setup .field-label{display:block}#account-setup h2{font-size:24px}#setup-avatar-preview{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 16px}#setup-avatar-preview[hidden]{display:none}#setup-reverify{display:block;margin:18px auto 0;min-height:44px}
body[data-screen="login"] .main-content { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
body[data-screen="login"] .app-shell::before { height: 960px; opacity: .8; mask-image: linear-gradient(#000b, #0006 62%, transparent); }
.login-back { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.login-heading { text-align: center; padding: 10px 0 28px; }
.login-emblem { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 16px; color: var(--accent); border-radius: 50%; background: var(--glow); box-shadow: 0 0 36px var(--glow); }
.login-emblem svg { width: 64px; height: 64px; }
.login-wordmark { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--accent); font: 18px var(--home-serif); margin: 0 0 20px; letter-spacing: .12em; }
.login-wordmark span { padding-left: 12px; border-left: 1px solid var(--line); font: 9px Georgia, serif; letter-spacing: .22em; }
#login-title { max-width: none; margin: 0 0 14px; font: 500 clamp(28px, 8cqw, 36px)/1.45 var(--home-serif); letter-spacing: .08em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.login-form { padding: 24px 20px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--scene-panel); box-shadow: var(--scene-shadow); }
.login-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.login-form-heading h2 { font: 600 23px/1.5 var(--home-serif) !important; }
.login-form-heading > span { color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.login-form .field-label { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.login-field { display: flex; align-items: center; min-width: 0; height: 56px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 54%, var(--surface)); transition: border-color .2s; }
.login-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.login-field:has([aria-invalid="true"]) { border-color: var(--danger); }
.phone-field { margin-bottom: 22px; }
.phone-prefix { flex: none; padding: 0 14px; border-right: 1px solid var(--line); font: 16px Georgia, serif; color: var(--text); }
.login-field input { width: 100%; min-width: 0; border: 0; outline: none; height: 100%; padding: 0 14px; border-radius: inherit; color: var(--text); background: none; font: 16px "Microsoft YaHei", sans-serif; letter-spacing: .04em; }
.login-field input::placeholder { color: var(--subtle); font-size: 14px; letter-spacing: 0; }
.login-field input:focus-visible { outline: none; }
#send-login-code { flex: 0 0 102px; min-height: 44px; border: 0; border-left: 1px solid var(--line); padding: 0 10px; color: var(--accent); background: none; font: 13px "Microsoft YaHei", sans-serif; cursor: pointer; }
#send-login-code:disabled { color: var(--muted); cursor: default; }
.login-feedback { min-height: 42px; margin: 12px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.login-feedback.is-error { color: var(--danger); }
.login-register-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.login-privacy { margin-top: 6px; text-align: center; }
.login-privacy summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-size: 12px; list-style: none; cursor: pointer; }
.login-privacy summary::-webkit-details-marker { display: none; }
.login-privacy summary::after { content: "+"; font-size: 16px; }
.login-privacy[open] summary::after { content: "−"; }
.login-privacy p { text-align: left; font-size: 12px; line-height: 1.9; color: var(--muted); }
.login-footer { margin: 26px 0 0; text-align: center; font: 13px/1.8 var(--home-serif); color: var(--muted); letter-spacing: .08em; }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 24px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--scene-panel); }
.account-bar strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; }
.account-bar .secondary-button { min-height: 44px; padding-inline: 14px; font-size: 13px; }
@media (max-height: 740px) {
  .login-heading { padding-top: 0; padding-bottom: 20px; }
  .login-emblem { width: 54px; height: 54px; margin-bottom: 10px; }
  .login-emblem svg { width: 48px; height: 48px; }
  .login-wordmark { margin-bottom: 12px; }
  #login-title { font-size: 28px; }
  .login-form { padding-top: 20px; }
}
@media (max-width: 350px) { .login-form { padding-inline: 14px; } .phone-prefix { padding-inline: 10px; } #send-login-code { flex-basis: 96px; } }