@media (max-width: 1200px) {
  .grid-4,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .grid-3,
  .grid-4,
  .quick-grid,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-2,
  .account-main-grid,
  .deposit-layout,
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-layout,
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .admin-sidebar {
    position: relative;
    height: auto;
    top: 0;
  }

  .dashboard-content,
  .admin-content {
    padding: 16px;
  }

  .page-header,
  .admin-topbar {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .container,
  .topbar-inner {
    width: 94%;
  }

  .page-shell,
  .account-shell {
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .page-header-content h1,
  .admin-topbar-title h1 {
    font-size: 1.5rem;
  }

  .page-actions,
  .admin-topbar-actions {
    width: 100%;
  }

  .page-actions > *,
  .admin-topbar-actions > * {
    flex: 1;
  }

  .form-row,
  .admin-form-row {
    flex-direction: column;
  }

  .form-row > *,
  .admin-form-row > * {
    width: 100%;
  }

  .quick-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .kpi-grid,
  .wallet-stats-grid,
  .account-stats-grid,
  .admin-kpis {
    grid-template-columns: 1fr;
  }

  .account-actions-grid {
    grid-template-columns: 1fr;
  }

  .hero-card,
  .form-card,
  .account-profile-card,
  .account-wallet-card,
  .account-panel,
  .wallet-table-card,
  .deposit-info-card,
  .deposit-form-card,
  .admin-panel,
  .admin-kpi-card,
  .auth-card,
  .auth-visual {
    padding: 18px;
    border-radius: 22px;
  }

  .table-wrap,
  .admin-table-wrap {
    border-radius: 18px;
  }

  .modal-panel,
  .admin-modal-panel {
    width: 100%;
    border-radius: 24px;
    padding: 18px;
  }

  .sidebar-panel,
  .admin-sidebar-panel {
    border-radius: 22px;
  }

  .brand-text span,
  .admin-brand-meta span,
  .section-subtitle,
  .page-header-content p,
  .admin-topbar-title p {
    font-size: 0.86rem;
  }

  .stat-value,
  .admin-kpi-value,
  .account-wallet-balance {
    font-size: 1.9rem;
  }

  /* =====================================
     FIX ACCOUNT PAGES TOPBAR ON MOBILE
  ===================================== */
  .account-page .app-topbar,
  .orders-page .app-topbar,
  .wallet-page .app-topbar,
  .notifications-page .app-topbar,
  .deposit-page .app-topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
  }

  .account-page .topbar-inner,
  .orders-page .topbar-inner,
  .wallet-page .topbar-inner,
  .notifications-page .topbar-inner,
  .deposit-page .topbar-inner {
    width: 94%;
    min-height: 60px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .account-page .brand,
  .orders-page .brand,
  .wallet-page .brand,
  .notifications-page .brand,
  .deposit-page .brand {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .account-page .brand-logo,
  .orders-page .brand-logo,
  .wallet-page .brand-logo,
  .notifications-page .brand-logo,
  .deposit-page .brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }

  .account-page .brand-text,
  .orders-page .brand-text,
  .wallet-page .brand-text,
  .notifications-page .brand-text,
  .deposit-page .brand-text {
    min-width: 0;
    overflow: hidden;
  }

  .account-page .brand-text strong,
  .orders-page .brand-text strong,
  .wallet-page .brand-text strong,
  .notifications-page .brand-text strong,
  .deposit-page .brand-text strong {
    display: block;
    font-size: 0.9rem !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-page .brand-text span,
  .orders-page .brand-text span,
  .wallet-page .brand-text span,
  .notifications-page .brand-text span,
  .deposit-page .brand-text span {
    display: block;
    font-size: 0.68rem !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-page .topbar-actions,
  .orders-page .topbar-actions,
  .wallet-page .topbar-actions,
  .notifications-page .topbar-actions,
  .deposit-page .topbar-actions {
    width: auto !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .account-page .topbar-actions > *,
  .orders-page .topbar-actions > *,
  .wallet-page .topbar-actions > *,
  .notifications-page .topbar-actions > *,
  .deposit-page .topbar-actions > * {
    flex: 0 0 auto !important;
  }

  .account-page .topbar-actions .btn,
  .account-page .topbar-actions .icon-btn,
  .account-page .topbar-actions a,
  .account-page .topbar-actions button,
  .orders-page .topbar-actions .btn,
  .orders-page .topbar-actions .icon-btn,
  .orders-page .topbar-actions a,
  .orders-page .topbar-actions button,
  .wallet-page .topbar-actions .btn,
  .wallet-page .topbar-actions .icon-btn,
  .wallet-page .topbar-actions a,
  .wallet-page .topbar-actions button,
  .notifications-page .topbar-actions .btn,
  .notifications-page .topbar-actions .icon-btn,
  .notifications-page .topbar-actions a,
  .notifications-page .topbar-actions button,
  .deposit-page .topbar-actions .btn,
  .deposit-page .topbar-actions .icon-btn,
  .deposit-page .topbar-actions a,
  .deposit-page .topbar-actions button {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .account-page .topbar-actions .btn span,
  .account-page .topbar-actions .icon-btn span:not(#currency-symbol),
  .orders-page .topbar-actions .btn span,
  .orders-page .topbar-actions .icon-btn span:not(#currency-symbol),
  .wallet-page .topbar-actions .btn span,
  .wallet-page .topbar-actions .icon-btn span:not(#currency-symbol),
  .notifications-page .topbar-actions .btn span,
  .notifications-page .topbar-actions .icon-btn span:not(#currency-symbol),
  .deposit-page .topbar-actions .btn span,
  .deposit-page .topbar-actions .icon-btn span:not(#currency-symbol) {
    display: none !important;
  }

  .account-page .topbar-actions .btn i,
  .account-page .topbar-actions .icon-btn i,
  .account-page .topbar-actions #currency-symbol,
  .orders-page .topbar-actions .btn i,
  .orders-page .topbar-actions .icon-btn i,
  .orders-page .topbar-actions #currency-symbol,
  .wallet-page .topbar-actions .btn i,
  .wallet-page .topbar-actions .icon-btn i,
  .wallet-page .topbar-actions #currency-symbol,
  .notifications-page .topbar-actions .btn i,
  .notifications-page .topbar-actions .icon-btn i,
  .notifications-page .topbar-actions #currency-symbol,
  .deposit-page .topbar-actions .btn i,
  .deposit-page .topbar-actions .icon-btn i,
  .deposit-page .topbar-actions #currency-symbol {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .account-page #admin-link-btn,
  .orders-page #admin-link-btn,
  .wallet-page #admin-link-btn,
  .notifications-page #admin-link-btn,
  .deposit-page #admin-link-btn {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  .account-page .account-shell,
  .orders-page .orders-shell,
  .wallet-page .wallet-shell,
  .notifications-page .notifications-shell,
  .deposit-page .deposit-shell {
    padding-top: 12px !important;
  }

  .account-page .account-hero,
  .orders-page .orders-hero,
  .wallet-page .wallet-hero,
  .notifications-page .notifications-hero,
  .deposit-page .deposit-hero {
    margin-top: 8px !important;
  }
}

@media (max-width: 520px) {
  .btn,
  .btn-primary,
  .btn-light,
  .btn-soft,
  .btn-danger,
  .btn-success {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .brand-logo,
  .auth-mini-brand img,
  .admin-brand img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .brand-text strong,
  .auth-mini-brand span {
    font-size: 0.95rem;
  }

  .page-header-content h1,
  .auth-card-head h2,
  .auth-visual-copy h1 {
    font-size: 1.45rem;
  }

  .auth-tabs {
    padding: 5px;
    border-radius: 16px;
  }

  .auth-tab-btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 0.9rem;
  }

  .status-badge,
  .account-badge,
  .admin-chip,
  .status-pill,
  .account-summary-pill {
    font-size: 0.78rem;
    padding: 7px 11px;
  }

  .table,
  .admin-table {
    min-width: 640px;
  }

  .close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}