@media (max-width: 760px) {
  .site-nav { width: min(100% - 32px, 1120px); min-height: 68px; gap: 12px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 10px; font-size: 0.84rem; }
  .page, #app-footer { width: min(100% - 32px, 1120px); }
}
@media (max-width: 480px) {
  .site-nav { width: calc(100% - 24px); min-height: 0; flex-wrap: wrap; row-gap: 6px; padding: 9px 0 7px; }
  .brand { gap: 8px; font-size: 0.9rem; }
  .brand-mark { width: 37px; height: 37px; border-radius: 11px; }
  .brand small { font-size: 0.65rem; }
  .nav-links { width: 100%; justify-content: space-between; gap: 4px; overflow-x: auto; }
  .nav-links a { flex: 0 0 auto; padding: 7px 9px; font-size: 0.78rem; white-space: nowrap; }
  .nav-links a.nav-login { margin-left: 0; }
  .page, #app-footer { width: calc(100% - 28px); }
  .login-card { margin: 30px auto; padding: 25px 20px; }
  #app-footer { margin-top: 46px; }
}