@media (max-width: 900px) {
  .app-container { flex-direction: column; }
  .topbar-right .btn { padding: 6px 10px; font-size: 0.75rem; }
  .topbar-ext { display: none; }
  .phone-dialpad { max-width: 100%; }
  .dialpad-key { height: 56px; font-size: 1.25rem; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .toast-container { left: 16px; right: 16px; max-width: none; bottom: 80px; }
  .call-popup { left: 16px; right: 16px; min-width: auto; top: auto; bottom: 80px; }
  .modal { max-width: 100%; margin: 16px; }
  .admin-section .tenant-list { grid-template-columns: 1fr; }
  .blf-list { grid-template-columns: repeat(2, 1fr); }
  .form-input { font-size: 16px; }
}
@media (max-width: 480px) {
  :root { --topbar-height: 48px; --bottom-nav-height: 56px; }
  .main-content { padding: 12px; padding-bottom: calc(var(--bottom-nav-height) + 12px); }
  .dialpad-key { height: 48px; font-size: 1.125rem; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .blf-list { grid-template-columns: 1fr; }
  .stat-card { padding: 16px; }
  .topbar { padding: 0 12px; }
  .topbar-title { font-size: 1rem; }
  .section-header { flex-direction: column; gap: 12px; }
}
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  .main-content { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
}