@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto 1fr; padding-inline: 18px; }
  .user-info { display: none; }
  .login-shell { grid-template-columns: minmax(420px, 0.95fr) minmax(460px, 1.05fr); }
  .login-story-inner { padding: 40px; }
  .login-access { padding: 40px; }
}

@media (max-width: 880px) {
  :root { --header-height: 60px; }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 14px;
  }
  .topbar-context { display: none; }
  .topbar-right { grid-column: 2; }
  .brand-caption { display: none; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-mark svg { width: 21px; height: 21px; }
  .profile-trigger { width: 44px; min-width: 44px; height: 42px; padding: 4px; border: 0; box-shadow: none; }
  .profile-trigger:hover { border-color: transparent; }
  .profile-chevron { display: none; }
  .profile-menu { position: fixed; top: calc(var(--header-height) - 2px); right: 12px; }

  .login-page { overflow: auto; }
  .login-shell { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-access { min-height: 100dvh; padding: 40px 24px; }
  .login-card { width: min(100%, 400px); }
  .login-mobile-brand { display: flex; align-items: center; gap: 11px; margin-bottom: clamp(52px, 10vh, 84px); color: var(--color-text); font-size: 14px; font-weight: 680; }
}

@media (max-width: 720px) {
  .brand { font-size: 14px; }
  .profile-menu { width: min(264px, calc(100vw - 24px)); }

  .btn { min-height: 42px; }
  .btn.sm { min-height: 36px; }

  .modal { padding: 12px; }
  .modal-box { max-height: calc(100dvh - 24px); border-radius: var(--radius-lg); }
  .modal-head { min-height: 56px; padding: 10px 14px 10px 16px; }
  .modal-head h2 { max-width: calc(100% - 48px); overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .modal-close { width: 40px; height: 40px; }
  .modal-body { padding: 16px; }

  .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .topbar { padding-inline: 12px; }
  .brand-lockup { gap: 9px; }

  .login-access { align-items: flex-start; padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); }
  .login-card { margin: auto 0; }
  .login-mobile-brand { margin-bottom: clamp(42px, 8vh, 68px); }
  .login-card .login-heading h2 { font-size: 27px; }
  .login-heading { margin-bottom: 27px; }
  .login-card .input-shell input { font-size: 16px; } /* 避免 iOS 自动放大 */
  .login-submit { min-height: 50px; }

  .modal { padding: 8px; }
  .modal-box { max-height: calc(100dvh - 16px); border-radius: 13px; }
}