/* ==========================================================================
   NewTech LLC — Responsive layout
   ========================================================================== */

@media (max-width: 1280px) {
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: inline-flex !important; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .app-main { margin-left: 0; }
  .menu-toggle { display: inline-flex !important; }
  .main-content { padding: 20px 18px 100px; }
  .mobile-nav { display: flex; }
  .topbar { padding: 0 16px; }
  .mobile-nav-item .icon { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .stat-grid, .stat-grid-3, .stat-grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 21px; }
  .stat-card { padding: 16px; gap: 12px; }
  .field-grid { grid-template-columns: 1fr; }
  .view-head h2 { font-size: 21px; }
  .wallet-amount { font-size: 32px; }
  .wallet-hero { padding: 22px; }
  .referral-link-row { flex-direction: column; align-items: stretch; }
  .referral-link-row .btn { justify-content: center; }
  .pricing-grid { grid-template-columns: 1fr; }
  .profile-hero { flex-direction: column; text-align: center; }
  .profile-facts { align-items: center; }
  .profile-fact { flex-direction: column; gap: 2px; }
  .current-package-status { align-items: center; }
  .auth-card { padding: 22px; }
  .notif-menu { width: calc(100vw - 32px); right: -70px; }
  .toast-root { right: 14px; left: 14px; max-width: none; }
  .theme-picker { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .stat-grid, .stat-grid-3, .stat-grid-4 { grid-template-columns: 1fr; }
  .txn-filters .field-inline { width: 100%; }
  .filter-input { max-width: none; width: 100%; }
  .table { min-width: 560px; }
}