@media (max-width: 1120px) { .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .app-layout { display: block; padding-top: 74px; }
  .sidebar { position: fixed; inset: 0 0 auto; width: 100%; height: 74px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); }
  .brand { flex: 0 0 auto; margin: 0; }
  .brand-copy, .sidebar-footer { display: none; }
  .brand-mark { width: 40px; height: 40px; }
  .nav { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
  .nav a.active { box-shadow: inset 0 -3px var(--lime); }
  .main { padding: 24px 16px 42px; }
  .login-shell { display: block; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; border: 0; }
}
@media (max-width: 620px) {
  .grid.metrics, .grid.two, .grid.three, .form-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .user-chip span { display: none; }
  .card { padding: 16px; }
  .form-grid .wide { grid-column: auto; }
  .actions .btn { flex: 1; }
  .metric { min-height: 112px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }