/**
 * mobile-compat.css
 * Universal mobile device compatibility layer (2026 edition).
 * Covers all screen sizes from Galaxy Fold (280px) to desktops (1920px+).
 * Loaded AFTER all other CSS files -- additive only, no destructive overrides.
 *
 * ====================================================================
 * TARGET DEVICES (2026)
 * ====================================================================
 *
 * APPLE
 *   iPhone 17e           — 375px  (750x1334  @2x)
 *   iPhone 17            — 393px  (1179x2556 @3x)
 *   iPhone 17 Plus       — 430px  (1290x2796 @3x)
 *   iPhone 17 Pro        — 402px  (1206x2622 @3x)
 *   iPhone 17 Pro Max    — 440px  (1320x2868 @3x)
 *   iPhone Air           — 420px  (1260x2740 @3x)
 *   iPhone 16            — 390px  (1170x2532 @3x)
 *   iPad (11th gen, A16) — 810px  (1620x2160 @2x)
 *   iPad mini (A17 Pro)  — 744px  (1488x2266 @2x)
 *   iPad Air 11" (M4)    — 820px  (1640x2360 @2x)
 *   iPad Air 13" (M4)    — 1024px (2048x2732 @2x)
 *   iPad Pro 11" (M5)    — 834px  (1668x2388 @2x)
 *   iPad Pro 13" (M5)    — 1024px (2048x2732 @2x)
 *   MacBook Air 13" (M5) — 1440px native
 *   MacBook Air 15" (M5) — 1680px native
 *   MacBook Pro 14"      — 1512px native
 *   MacBook Pro 16"      — 1728px native
 *   MacBook Neo          — 1440px native
 *   iMac (M5)            — 2560px (4480x2520 @2x)
 *   Mac mini / Studio / Pro — external displays
 *
 * SAMSUNG
 *   Galaxy S26           — 360px  (1080x2340 @3x)
 *   Galaxy S26+          — 384px  (1440x3120 @3x)
 *   Galaxy S26 Ultra     — 412px  (1440x3200 @3x)
 *   Galaxy Z Fold7       — 280px folded / 910px open (AMOLED @3x)
 *   Galaxy Z Flip7       — 360px main / 306px cover
 *   Galaxy S25 FE        — 393px  (1080x2340 @3x)
 *   Galaxy A36/A56/A57   — 360-384px (1080x2400 @3x)
 *   Galaxy Tab S11       — 800px  (1600x2560 @2x)
 *   Galaxy Tab S11 Ultra — 960px  (1848x2960 @2x)
 *   Galaxy Tab S10 FE/+  — 800px  (1200x2000 @2x)
 *   Galaxy Tab S10 Lite  — 800px  (1200x2000 @2x)
 *   Galaxy Tab A11+      — 800px  (1200x1920 @2x)
 *   Galaxy Tab A9/A9+    — 600-800px
 *   Galaxy Book6         — 1920px (FHD)
 *   Galaxy Book6 Pro     — 1920-2880px (OLED)
 *   Galaxy Book6 Ultra   — 2880px (OLED)
 *
 * GOOGLE (PIXEL)
 *   Pixel 10             — 393px  (1080x2400 @3x)
 *   Pixel 10 Pro         — 412px  (1440x3120 @3x)
 *   Pixel 10 Pro XL      — 430px  (1440x3200 @3x)
 *   Pixel 10a            — 393px  (1080x2400 @3x)
 *   Pixel 10 Pro Fold    — 360px folded / 904px open
 *   Pixel Tablet         — 800px  (1200x2000 @2x)
 *
 * HP
 *   HP Pro x2 612 G2     — 1366px (12" detachable)
 *   OmniBook Ultra Flip  — 1920px (14" OLED)
 *   OmniBook X Flip      — 1920px (14")
 *   OmniBook 7 Flip      — 1920px (16")
 *   EliteBook/ProBook    — 1920px (FHD)
 *   Envy/Pavilion x360   — 1920px (FHD)
 *
 * LENOVO
 *   Yoga 7i 2-in-1       — 1920px (14")
 *   ThinkPad X1 Carbon   — 1920-2880px
 *   Legion               — 2560px (gaming)
 *
 * DELL
 *   XPS 14/16            — 1920-3840px
 *   Latitude             — 1920px (FHD)
 *
 * MICROSOFT
 *   Surface Pro           — 912px (tablet) / 1368px (desktop)
 *   Surface Laptop        — 1536px
 *
 * ASUS
 *   Zenbook / Vivobook    — 1920px (FHD)
 *
 * ====================================================================
 * BREAKPOINT MAP
 * ====================================================================
 *   280px  — Galaxy Z Fold7 folded, Galaxy Z Flip7 cover
 *   306px  — Galaxy Z Flip7 cover display
 *   320px  — iPhone 5/SE (legacy)
 *   360px  — Galaxy S26, Z Flip7, Galaxy A-series, Pixel Fold folded
 *   375px  — iPhone 17e
 *   384px  — Galaxy S26+
 *   390px  — iPhone 16
 *   393px  — iPhone 17, Pixel 10/10a, Galaxy S25 FE
 *   402px  — iPhone 17 Pro
 *   412px  — Galaxy S26 Ultra, Pixel 10 Pro
 *   420px  — iPhone Air
 *   430px  — iPhone 17 Plus, Pixel 10 Pro XL
 *   440px  — iPhone 17 Pro Max
 *   540px  — Surface Duo
 *   600px  — Galaxy Tab A9
 *   744px  — iPad mini (A17 Pro)
 *   768px  — legacy tablets
 *   800px  — Galaxy Tab S11/A11+, Pixel Tablet
 *   810px  — iPad 11th gen
 *   820px  — iPad Air 11"
 *   834px  — iPad Pro 11"
 *   904px  — Pixel 10 Pro Fold open
 *   910px  — Galaxy Z Fold7 open
 *   912px  — Surface Pro (tablet)
 *   960px  — Galaxy Tab S11 Ultra
 *  1024px  — iPad Air 13", iPad Pro 13"
 *  1366px  — HP Pro x2, small laptops
 *  1440px  — MacBook Air 13", MacBook Neo
 *  1512px  — MacBook Pro 14"
 *  1536px  — Surface Laptop
 *  1680px  — MacBook Air 15"
 *  1728px  — MacBook Pro 16"
 *  1920px  — FHD laptops (HP, Lenovo, Dell, Asus, Samsung, etc.)
 *  2560px+ — iMac, gaming monitors, UHD
 */

/* =====================================================================
   0. GLOBAL -- touch targets, text sizing, overflow prevention
   ===================================================================== */

/* Ensure minimum touch targets on all interactive elements (WCAG 2.5.8) */
@media (pointer: coarse) {
  a, button, [role="button"], select, summary,
  input[type="checkbox"], input[type="radio"],
  .sort-btn, .tf-btn, .view-tab, .lt-tab, .pf-tab,
  .mover-item, .coin-card, .funding-card, .heatmap-cell,
  .lt-coin-chip, .bt-select-option, .backtest-coin-multi-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Smaller inline elements: expand tap area via padding, not min-size */
  .sort-btn, .tf-btn, .action-badge, .coin-badge {
    min-width: 36px;
    min-height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Prevent accidental double-tap zoom on buttons */
  button, [role="button"], .btn, .lt-btn, .backtest-submit, .btn-save {
    touch-action: manipulation;
  }
}

/* Prevent horizontal overflow on all pages */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Smooth scrolling for iOS momentum */
.dashboard-content, .mk-dashboard-content,
.backtest-page-main .dashboard-content,
.portfolio-page-main .dashboard-content,
.lt-table-wrap, .pf-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   1. EXTRA SMALL -- Galaxy Fold folded, very narrow (<= 320px)
   Devices: Galaxy Z Fold7 folded (280px), Z Flip7 cover (306px),
            iPhone 5/SE legacy (320px)
   ===================================================================== */
@media (max-width: 320px) {
  /* --- Global layout --- */
  .container { padding: 8px 4px 60px; }
  .dashboard-main { padding: 68px 4px 20px !important; }
  .dashboard-header { padding-left: 48px; }
  .dashboard-title { font-size: 16px !important; }
  .dashboard-welcome { font-size: 10px; }
  h1 { font-size: 15px !important; }
  h2 { font-size: 14px !important; }
  h3 { font-size: 13px !important; }

  /* --- Sidebar overlay --- */
  .dashboard-sidebar {
    width: 200px;
    min-width: 200px;
  }

  /* --- KPI: one row, four columns (shrink, no scroll) --- */
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    gap: 6px !important;
  }
  .dashboard-kpi-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    min-height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    max-height: var(--dash-kpi-mobile-height-fold, 38px) !important;
    overflow: hidden !important;
    padding: 3px 3px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .dashboard-kpi-card .kpi-value { font-size: clamp(10px, 3.2vw, 12px); font-weight: 600; }
  .dashboard-kpi-card .kpi-label { font-size: clamp(7px, 2vw, 9px); letter-spacing: 0.03em; }

  /* --- Navbar --- */
  .navbar { padding: 0 8px; height: 48px; }
  .navbar .brand img { height: 20px; }
  .navbar .brand span { font-size: 16px; }
  .nav-links a { padding: 8px 10px; font-size: 12px; }
  .nav-right { gap: 4px; }
  .nav-user { display: none; }
  .nav-logout { font-size: 10px; padding: 4px 8px; }

  /* --- Strategy bar --- */
  .strategy-bar { font-size: 8px; padding: 4px 6px; gap: 2px; }
  .strategy-bar .badge-on, .strategy-bar .badge-off { padding: 1px 4px; font-size: 8px; }

  /* --- Flash messages --- */
  .flash { font-size: 12px; padding: 8px 10px; }

  /* --- Tables --- */
  table th, table td { padding: 4px; font-size: 10px; }

  /* --- Markets page --- */
  .mk-controls-row { gap: 4px; margin-bottom: 8px; }
  .view-tab { padding: 8px 6px; font-size: 11px; min-height: 38px; }
  .mk-filtering-panel, .mk-market-overall { padding: 8px 10px; }
  .sort-btn { padding: 3px 6px; font-size: 9px; }
  .market-stats { gap: 6px; font-size: 9px; }
  .markets-grid { grid-template-columns: 1fr !important; gap: 6px; }
  .coin-card { padding: 8px 10px; }
  .coin-price { font-size: 14px; }
  .coin-symbol { font-size: 13px; }
  .coin-meta { font-size: 9px; gap: 2px 6px; }
  .coin-sparkline { height: 24px; }
  .movers-row { gap: 8px; }
  .movers-section { padding: 10px 12px; }
  .movers-section h3 { font-size: 14px; }
  .mover-item { padding: 8px 10px; font-size: 11px; }
  .heatmap-container { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .heatmap-cell { min-height: 0; padding: 10px 8px; }
  .heatmap-cell.big { grid-column: span 1; min-height: 0; }
  .heatmap-cell.mid { grid-column: span 1; }
  .hm-change { font-size: 14px; }
  .hm-symbol { font-size: 11px; }
  .funding-grid { grid-template-columns: 1fr; gap: 8px; }
  .funding-card { padding: 10px 12px; }

  /* Chart overlay -- full width on small devices */
  .chart-overlay { left: 0 !important; }
  .chart-header {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 6px;
    gap: 6px;
  }
  .chart-title { font-size: 12px; gap: 6px; }
  .chart-title .price-live { font-size: 14px; }
  .tf-btn { padding: 3px 6px; font-size: 9px; }
  .chart-close { width: 30px; height: 30px; font-size: 14px; }

  /* --- Signals page --- */
  .live-signals-card { padding: 8px 10px; }
  .live-signals-card-title { font-size: 10px; margin-bottom: 8px; }
  .live-signal-card { padding: 8px 10px; gap: 8px; }
  .live-signal-title { font-size: 12px; }
  .live-signal-badge { padding: 3px 8px; font-size: 9px; }
  .live-signal-score-donut { width: 36px; height: 36px; }

  /* --- Portfolio --- */
  .portfolio-page-main .pf-hero-card { padding: 14px 12px; border-radius: 14px; }
  .portfolio-page-main .pf-hero-card .hero-val { font-size: 18px; }
  .portfolio-page-main .pf-hero-card .hero-detail { font-size: 10px; gap: 6px; }
  .portfolio-page-main .pf-stat { padding: 10px 12px; }
  .portfolio-page-main .pf-stat .stat-val { font-size: 16px; }
  .portfolio-page-main .pf-stat .stat-icon { width: 30px; height: 30px; font-size: 12px; }
  .portfolio-page-main .pf-tab { padding: 6px 8px; font-size: 10px; }
  .portfolio-page-main .pf-equity canvas { max-height: 180px; }
  .portfolio-page-main .pf-table { min-width: 560px; font-size: 10px; }

  /* --- Backtest --- */
  .backtest-card { padding: 16px 14px; border-radius: 16px; }
  .backtest-page-main .backtest-center-inner { margin-top: 0; }
  .backtest-intro { font-size: 13px; }
  .backtest-strategy-badge { font-size: 12px; padding: 6px 12px; }
  .backtest-form select, .backtest-form input[type="number"] { font-size: 14px; padding: 10px 12px; }
  .backtest-form .backtest-submit { padding: 12px 16px; font-size: 14px; }
  .backtest-note { padding: 10px 12px; }
  .backtest-note p { font-size: 11px; }
  .bt-select-trigger { padding: 10px 12px; font-size: 14px; }
  .bt-select-option { padding: 10px 12px; font-size: 14px; }

  /* --- Settings pages --- */
  .param-row label { min-width: 0 !important; font-size: 11px; }
  .param-row input, .param-row select { width: 100% !important; max-width: none !important; }
  .card-head { padding: 10px 12px !important; }
  .card-body { padding: 10px 12px !important; }
  .tab-btn { padding: 6px 8px !important; font-size: 10px !important; }
  .toggle-row label:first-of-type { font-size: 12px; }

  /* --- Live Trading --- */
  .lt-ex-grid { grid-template-columns: 1fr !important; gap: 6px; }
  .lt-ex-card { padding: 10px 12px; min-height: 80px; }
  .lt-ex-label { font-size: 12px; }
  .lt-tabs { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .lt-tab { font-size: 11px; padding: 10px 6px; min-height: 42px; }
  .lt-card { padding: 12px; border-radius: 10px; }
  .lt-coin-grid { grid-template-columns: 1fr !important; }
  .lt-fg { grid-template-columns: 1fr !important; }

  /* --- Admin pages --- */
  .dash-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .dash-card { padding: 12px; }
  .dash-card .val { font-size: 20px; }
  .admin-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .admin-card { padding: 14px; }
  .admin-card .val { font-size: 20px; }
  .section { padding: 10px 12px; }
  .param-grid { grid-template-columns: 1fr !important; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-bar input, .filter-bar select { width: 100% !important; }
  .user-table, .audit-table { font-size: 10px; }
  .user-table th, .user-table td,
  .audit-table th, .audit-table td { padding: 4px; }
  .btn-xs { font-size: 10px; padding: 4px 6px; min-height: 28px; }

  /* --- Notifications settings --- */
  .fg { grid-template-columns: 1fr !important; }
  .alerts-grid { grid-template-columns: 1fr !important; }

  /* --- Landing page --- */
  .hero-headline .hero-line { font-size: clamp(22px, 7vw, 30px) !important; }
  .hero-headline .hero-line.hero-line-accent { font-size: clamp(26px, 8vw, 34px) !important; }
  .stats-bar { gap: 8px !important; padding-top: 30px !important; }
  .stat .num { font-size: 18px !important; }
  .stat .label { font-size: 9px !important; }

  /* --- Pricing page --- */
  .billing-pricing-grid { gap: 12px !important; }
  .price-card { padding: 20px 16px !important; }
  .price-card .price-card-title { font-size: 18px !important; }
  .price-card .price-val { font-size: 24px !important; }
  .price-feature-list li { font-size: 12px !important; }
}

/* =====================================================================
   2. Galaxy Fold FOLDED -- extreme narrow (<= 280px)
   Devices: Galaxy Z Fold7 folded (280px)
   ===================================================================== */
@media (max-width: 280px) {
  .container { padding: 6px 2px 50px; }
  .dashboard-main { padding: 6px 2px 16px !important; }
  .dashboard-header { padding-left: 44px; }
  .dashboard-title { font-size: 14px !important; }
  h1 { font-size: 14px !important; }

  /* Mobile menu button -- tighter */
  .mobile-menu-btn {
    width: 38px; height: 38px;
    min-width: 38px; min-height: 38px;
    top: 6px; left: 4px;
    font-size: 16px;
  }

  /* Sidebar */
  .dashboard-sidebar { width: 180px; min-width: 180px; }

  /* Navbar */
  .navbar { height: 44px; padding: 0 6px; }
  .navbar .brand img { height: 18px; }
  .navbar .brand span { font-size: 14px; }

  /* KPI -- keep inside --dash-kpi-mobile-height-fold band */
  .dashboard-kpi-card .kpi-value { font-size: 9px; }
  .dashboard-kpi-card .kpi-label { font-size: 6px; }

  /* Markets */
  .view-tab { padding: 6px 4px; font-size: 10px; min-height: 36px; }
  .coin-card { padding: 6px 8px; }
  .coin-price { font-size: 13px; }
  .coin-meta { font-size: 8px; }
  .heatmap-container { grid-template-columns: 1fr 1fr; gap: 3px; }
  .heatmap-cell { min-height: 0; padding: 8px 6px; }
  .hm-change { font-size: 12px; }
  .sort-btn { padding: 2px 4px; font-size: 8px; }

  /* Signals */
  .live-signal-card { padding: 6px 8px; }
  .live-signal-title { font-size: 11px; }

  /* Backtest */
  .backtest-card { padding: 14px 12px; }
  .backtest-page-main .backtest-center-inner { margin-top: 0; }

  /* Portfolio */
  .portfolio-page-main .pf-hero-card .hero-val { font-size: 16px; }
  .portfolio-page-main .pf-stat .stat-val { font-size: 14px; }

  /* Live Trading */
  .lt-tab { font-size: 10px; padding: 8px 4px; }
  .lt-card { padding: 10px; }
  .lt-ex-card { min-height: 70px; padding: 8px 10px; }

  /* Admin */
  .dash-card .val { font-size: 18px; }
  .admin-card .val { font-size: 18px; }
  .section { padding: 8px 10px; }
  .section h2 { font-size: 14px; }

  /* Landing page */
  .hero-headline .hero-line { font-size: 18px !important; }
  .hero-headline .hero-line.hero-line-accent { font-size: 22px !important; }
  .hero p.hero-subtitle { font-size: 11px !important; }
  .stats-bar { gap: 6px !important; flex-wrap: wrap !important; }
  .stat .num { font-size: 16px !important; }
  .stat .label { font-size: 8px !important; }
  .btn-hero-sail { padding: 8px 20px !important; font-size: 13px !important; }

  /* Pricing */
  .price-card { padding: 16px 12px !important; }
  .price-card .price-card-title { font-size: 16px !important; }
  .price-card .price-val { font-size: 20px !important; }
}

/* =====================================================================
   3. SMALL PHONES -- 321px - 359px
   Devices: iPhone SE/5 (legacy), Galaxy Z Flip7 cover (306px range)
   ===================================================================== */
@media (min-width: 321px) and (max-width: 359px) {
  .markets-grid { grid-template-columns: 1fr !important; }
  .heatmap-container { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: 1fr !important; }
  .lt-coin-grid { grid-template-columns: 1fr !important; }
  .portfolio-page-main .pf-metrics { grid-template-columns: 1fr; }
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    gap: 8px !important;
  }
  .dashboard-kpi-card {
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =====================================================================
   4. STANDARD PHONES -- 360px - 389px
   Devices: Galaxy S26, Galaxy Z Flip7, Galaxy A36/A56/A57,
            Pixel Fold folded (360px)
   ===================================================================== */
@media (min-width: 360px) and (max-width: 389px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .coin-card { padding: 10px 12px; }
  .coin-price { font-size: 14px; }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-coin-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   5. MEDIUM PHONES -- 390px - 440px
   Devices: iPhone 16 (390px), iPhone 17 (393px), Galaxy S25 FE (393px),
            Pixel 10/10a (393px), iPhone 17 Pro (402px),
            Galaxy S26 Ultra (412px), Pixel 10 Pro (412px),
            iPhone Air (420px), iPhone 17 Plus (430px),
            Pixel 10 Pro XL (430px), iPhone 17 Pro Max (440px)
   ===================================================================== */
@media (min-width: 390px) and (max-width: 440px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }

  /* Slightly larger touch targets for Pro Max screens */
  .coin-card { padding: 12px 14px; }
  .live-signal-card { padding: 12px 14px; }
}

/* =====================================================================
   5a. LARGE PHONES -- 441px - 479px
   Devices: iPhone 17 Pro Max (440px) in accessibility zoom,
            large Android phones in display scaling
   ===================================================================== */
@media (min-width: 441px) and (max-width: 479px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }
  .funding-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   6. LANDSCAPE -- phones in landscape mode (short height)
   All phones rotated sideways
   ===================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .dashboard-sidebar {
    width: 56px;
    min-width: 56px;
  }
  .dashboard-sidebar-logo span,
  .dashboard-nav a span:not(.nav-icon),
  .dashboard-sidebar-user span:not(.nav-icon),
  .dashboard-sidebar-footer a span:not(.nav-icon) {
    display: none;
  }
  .dashboard-nav a {
    justify-content: center;
    padding: 8px;
    min-height: 40px;
  }
  .dashboard-main {
    margin-left: 56px;
    padding-top: 8px;
  }
  .dashboard-header {
    margin-bottom: 8px;
  }
  .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: visible;
    gap: 8px;
    align-items: stretch;
  }
  .dashboard-kpi-card {
    min-width: 0 !important;
    max-width: none;
  }
  .navbar { height: 44px; }

  /* Charts: use available height */
  .chart-container { min-height: 150px; }
  .pf-equity canvas { max-height: 160px !important; }

  /* Landing hero: reduce vertical space */
  .hero { min-height: auto !important; height: auto !important; padding-top: 60px !important; padding-bottom: 20px !important; }
  .hero .container { padding-top: 20px !important; }
  .stats-bar { padding-top: 16px !important; }
}

/* =====================================================================
   7. SAFE AREA INSETS -- notched phones (iPhone X+, iPhone 17 series,
      Pixel 10, Galaxy S26, etc.)
   ===================================================================== */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 480px) {
    /* Top: status bar / notch / Dynamic Island */
    .navbar {
      padding-top: env(safe-area-inset-top);
    }

    /* Bottom: home indicator */
    .strategy-bar {
      padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

    /* Sidebar: respect notch */
    .dashboard-sidebar {
      padding-top: env(safe-area-inset-top);
    }

    /* Backtest / Portfolio page bottoms */
    .backtest-card,
    .portfolio-page-main .pf-pagination {
      margin-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* Landing page: respect notch on CTA buttons */
    .dashboard-demo-section .dashboard-cta {
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Pricing: respect bottom safe area */
    .btn-price {
      margin-bottom: calc(8px + env(safe-area-inset-bottom));
    }
  }

  /* Tablets with notch/camera cutout (iPad Pro, Galaxy Tab) */
  @media (min-width: 481px) and (max-width: 1024px) {
    .navbar {
      padding-top: env(safe-area-inset-top);
    }
    .dashboard-sidebar {
      padding-top: env(safe-area-inset-top);
    }
  }
}

/* =====================================================================
   8. TABLETS -- phablets to full-size tablets
   ===================================================================== */

/* Surface Duo / Galaxy Tab A9 (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-tabs { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(2, 1fr); }
  .funding-grid { grid-template-columns: repeat(2, 1fr); }

  /* Landing page */
  .hero-headline .hero-line { font-size: clamp(30px, 5.5vw, 40px); }
}

/* Small tablets (601px - 743px) -- Galaxy Tab A9+  */
@media (min-width: 601px) and (max-width: 743px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(2, 1fr); }
  .funding-grid { grid-template-columns: repeat(2, 1fr); }
  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }
}

/* iPad Mini / Galaxy Tab S11 / Pixel Tablet (744px - 834px) */
@media (min-width: 744px) and (max-width: 834px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(3, 1fr); }
  .heatmap-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .funding-grid { grid-template-columns: repeat(3, 1fr); }
  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large tablets: iPad Air/Pro 11", Galaxy Tab S11 Ultra, Pixel Fold/Z Fold open
   (835px - 960px) */
@media (min-width: 835px) and (max-width: 960px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(3, 1fr); }
  .heatmap-container { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .funding-grid { grid-template-columns: repeat(3, 1fr); }
  .breakdown-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing: 2-column layout */
  .billing-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Full-size tablets / 2-in-1: iPad Air/Pro 13", Surface Pro (961px - 1024px) */
@media (min-width: 961px) and (max-width: 1024px) {
  .markets-grid { grid-template-columns: repeat(4, 1fr); }
  .lt-ex-grid { grid-template-columns: repeat(4, 1fr); }
  .portfolio-page-main .pf-metrics { grid-template-columns: repeat(4, 1fr); }
  .heatmap-container { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .funding-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pricing: full 3-column if space allows */
  .billing-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
}

/* =====================================================================
   8a. SMALL LAPTOPS / 2-IN-1 -- 1025px - 1365px
   Devices: Surface Pro desktop mode (1368px), HP Pro x2 (1366px)
   ===================================================================== */
@media (min-width: 1025px) and (max-width: 1365px) {
  .markets-grid { grid-template-columns: repeat(4, 1fr); }
  .billing-pricing-grid { max-width: 1100px; }
}

/* =====================================================================
   8b. STANDARD LAPTOPS -- 1366px - 1599px
   Devices: HP Pro x2 (1366px), MacBook Air 13" (1440px),
            MacBook Neo (1440px), MacBook Pro 14" (1512px),
            Surface Laptop (1536px)
   ===================================================================== */
@media (min-width: 1366px) and (max-width: 1599px) {
  .markets-grid { grid-template-columns: repeat(4, 1fr); }
  .billing-pricing-grid { max-width: 1140px; }
}

/* =====================================================================
   8c. LARGE LAPTOPS -- 1600px - 1919px
   Devices: MacBook Air 15" (1680px), MacBook Pro 16" (1728px)
   ===================================================================== */
@media (min-width: 1600px) and (max-width: 1919px) {
  .markets-grid { grid-template-columns: repeat(5, 1fr); }
  .billing-pricing-grid { max-width: 1200px; }
}

/* =====================================================================
   8d. FULL HD DESKTOP -- 1920px+
   Devices: HP OmniBook, EliteBook, Envy, Lenovo Yoga/ThinkPad/Legion,
            Dell XPS/Latitude, Samsung Galaxy Book6, Asus Zenbook/Vivobook,
            iMac (M5), external monitors
   ===================================================================== */
@media (min-width: 1920px) {
  .markets-grid { grid-template-columns: repeat(5, 1fr); }
  .billing-pricing-grid { max-width: 1200px; }

  /* Wider container for large screens */
  .landing-content .container { max-width: 1280px; }
}

/* =====================================================================
   8e. ULTRA-WIDE / 4K -- 2560px+
   Devices: iMac (M5) 4.5K, Samsung Galaxy Book6 Ultra OLED,
            Dell XPS 4K, external 4K monitors
   ===================================================================== */
@media (min-width: 2560px) {
  .markets-grid { grid-template-columns: repeat(6, 1fr); }
  .landing-content .container { max-width: 1400px; }
  .billing-pricing-grid { max-width: 1300px; }
}

/* =====================================================================
   9. HIGH-DPI / RETINA -- crisp rendering
   All Apple Retina, Samsung AMOLED, Google OLED displays
   ===================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .coin-vol-bar, .ls-bar {
    height: 2px;
  }
  .heatmap-cell {
    border-radius: 8px;
  }
}

/* =====================================================================
   10. ACCESSIBILITY -- reduced motion, forced colors
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   Markets page -- filter row (Standard, %down, %up, Vol, A-Z)
   ===================================================================== */
@media (max-width: 480px) {
  .markets-page-main .mk-sort-row {
    display: none !important;
  }
}

/* =====================================================================
   11. SIGNAL DETAIL page (/signals/<id>) -- mobile fixes
   ===================================================================== */
@media (max-width: 480px) {
  .signal-detail-back { font-size: 13px; }
  .signal-detail-title { font-size: 18px; flex-wrap: wrap; }
  .signal-detail-meta { flex-direction: column; gap: 6px; }
  .signal-detail-chart { height: 250px; }
  .signal-info { grid-template-columns: 1fr !important; gap: 8px; }
}
@media (max-width: 320px) {
  .signal-detail-title { font-size: 15px; }
  .signal-detail-chart { height: 200px; }
}

/* =====================================================================
   12. ADMIN DASHBOARD -- coin chips, results table, backtest controls
   ===================================================================== */
@media (max-width: 480px) {
  .coin-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .coin-chip {
    flex: 0 0 auto;
    min-width: 0;
  }
  .results-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .results-table table {
    min-width: 500px;
  }
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* =====================================================================
   13. NOTIFICATIONS & ALERTS settings
   ===================================================================== */
@media (max-width: 480px) {
  .alerts-card {
    padding: 14px;
  }
  .alerts-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .alert-item {
    padding: 12px;
  }
  .notification-toggle-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 320px) {
  .alerts-card { padding: 10px; }
  .alert-item { padding: 8px 10px; font-size: 12px; }
}

/* =====================================================================
   14. GRID STATUS (admin) -- table + controls on small screens
   ===================================================================== */
@media (max-width: 480px) {
  .grid-status-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .grid-status-controls {
    flex-direction: column;
    gap: 8px;
  }
  .grid-status-controls input,
  .grid-status-controls select,
  .grid-status-controls button {
    width: 100%;
    min-height: 44px;
  }
}

/* =====================================================================
   15. iOS FORM ZOOM PREVENTION -- all screen sizes
   iOS Safari zooms when font-size < 16px on focus
   ===================================================================== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* =====================================================================
   16. PRINT -- clean output
   ===================================================================== */
@media print {
  .dashboard-sidebar,
  .mobile-menu-btn,
  .sidebar-backdrop,
  .strategy-bar,
  .navbar,
  .nav-toggle { display: none !important; }
  .dashboard-main { margin-left: 0 !important; }
  body { background: white !important; color: black !important; }
}

/* =====================================================================
   17. LANDING PAGE -- responsive for all device categories
   ===================================================================== */

/* Phones: hero section vertical stacking */
@media (max-width: 480px) {
  .landing-content .hero { padding-bottom: 24px; }
  .dashboard-demo-section .dashboard-cta {
    flex-direction: column;
    gap: 12px;
  }
  .dashboard-demo-section .btn-demo-primary,
  .dashboard-demo-section .btn-demo-secondary {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }

  /* Why Traders section */
  .why-traders-grid { grid-template-columns: 1fr !important; }

  /* Pricing cards on landing */
  .pricing-grid { grid-template-columns: 1fr !important; }
}

/* Small tablets (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .why-traders-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets and foldables in open mode (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .landing-content .container { padding: 0 24px; }
  .hero-headline .hero-line { font-size: clamp(36px, 5vw, 48px); }
}

/* =====================================================================
   18. PRICING PAGE -- responsive for all device categories
   ===================================================================== */

/* Phones: single column pricing */
@media (max-width: 640px) {
  .billing-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .billing-toggle-wrap {
    margin-bottom: 24px;
  }
  .price-card {
    max-width: 100%;
  }
  .btn-price {
    font-size: 15px;
    padding: 14px 24px;
  }
}

/* Small tablets: 2-column pricing */
@media (min-width: 641px) and (max-width: 960px) {
  .billing-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* =====================================================================
   19. GALAXY Z FOLD7/FLIP7 -- special foldable handling
   ===================================================================== */

/* Z Fold7 open inner display (~910px) */
@media (min-width: 900px) and (max-width: 920px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
  .billing-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pixel 10 Pro Fold open (~904px) */
@media (min-width: 895px) and (max-width: 915px) {
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   20. SAMSUNG GALAXY S26+ (384px) -- between standard and medium
   ===================================================================== */
@media (min-width: 380px) and (max-width: 389px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .coin-card { padding: 10px 12px; }
  .lt-ex-grid { grid-template-columns: repeat(2, 1fr); }
}