@media (max-width: 768px) {
  body { overflow: auto; }

  .app { flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; max-width: 100vw; }
  html, body { overflow-x: hidden; max-width: 100vw; }

  .sidebar { display: none; }

  .mobile-nav { display: block; }

  /* Extra bottom padding clears the floating pill nav (pill is ~56px + 20px from bottom) */
  .main { overflow: visible; padding-bottom: 96px; overflow-x: hidden; }

  /* Generous, consistent page padding */
  .page { padding: 16px 16px 80px; max-width: 100vw; overflow-x: hidden; }

  /* Page headers — larger and bolder for iOS-style hierarchy */
  .page-title  { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; }
  .page-sub    { font-size: 14px !important; margin-top: 5px !important; }
  .page-header { margin-bottom: 18px !important; }

  /* grids → single column */
  .stats-grid          { grid-template-columns: 1fr 1fr !important; }
  .dashboard-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .analytics-header    { padding: 12px 14px 10px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .tf-tabs             { width: 100%; justify-content: space-between !important; }
  .tf-tab              { flex: 1; text-align: center; padding: 5px 0 !important; font-size: 11.5px !important; }
  .bottom-bar          { grid-template-columns: 1fr 1fr !important; }
  .home-tips-grid      { grid-template-columns: 1fr !important; }
  .hiw-card            { flex-direction: column !important; }
  .hiw-divider         { width: auto !important; height: 1px !important; margin: 0 16px !important; }
  .home-tools-grid     { grid-template-columns: 1fr !important; }
  .analytics-stats     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .analytics-charts-row{ grid-template-columns: 1fr !important; }
  .analytics-bottom-row{ grid-template-columns: 1fr !important; }
  .account-grid        { grid-template-columns: 1fr !important; }
  .listing-grid        { grid-template-columns: 1fr !important; }
  .tips-grid             { grid-template-columns: 1fr !important; }
  .steps-row             { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }
  .step-card             { padding: 10px 8px !important; gap: 6px !important; }
  .step-name             { font-size: 11px !important; }
  .step-desc             { font-size: 10.5px !important; }
  .step-num              { width: 18px !important; height: 18px !important; font-size: 10px !important; }
  .ai-specs-grid         { grid-template-columns: 1fr 1fr !important; }
  .rdb-metrics-row       { grid-template-columns: auto 1fr 1fr !important; flex-wrap: wrap; }
  .rdb-metrics-row .rdb-info-card:last-child { grid-column: span 2; }
  .rdb-price-amount      { font-size: 38px !important; }
  .rdb-hero-img          { width: 90px !important; }
  .export-platforms-grid { grid-template-columns: 1fr 1fr !important; padding: 14px 14px 18px !important; gap: 10px !important; }
  .export-tile           { padding: 16px 14px 14px !important; }
  .export-modal-header   { padding: 16px 16px 12px !important; }
  .detail-specs-grid     { grid-template-columns: 1fr 1fr !important; }
  .detail-actions        { gap: 6px !important; }
  .detail-action-btn     { font-size: 11px !important; padding: 8px 6px !important; }
  .listing-menu-dropdown { right: 0; left: auto; }

  .mobile-settings-btn { display: flex !important; }
  .mob-account-btn { display: flex !important; }

  /* Mobile CTA Banner */
  .mobile-cta-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, #2563c8, #4b8ef0);
    border-radius: 16px; padding: 16px 18px;
    margin-bottom: 16px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(37,99,200,0.35);
    color: #fff; font-size: 28px;
    animation: fadeSlideIn 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-cta-banner:active { transform: scale(0.98); }
  .mobile-cta-banner-title { font-size: 16px; font-weight: 700; }
  .mobile-cta-banner-sub   { font-size: 12px; opacity: 0.85; margin-top: 2px; }
  .mobile-cta-banner-arrow { margin-left: auto; font-size: 20px; opacity: 0.9; }

  /* CTA widget stacks */
  .cta-widget { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .cta-steps  { flex-wrap: wrap; gap: 10px; }
  .cta-widget .btn-primary {
    width: 100%; padding: 15px 20px !important;
    font-size: 16px; font-weight: 700;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37,99,200,0.35);
  }

  /* snap page */
  .snap-btn-row { flex-direction: column; }
  .btn-take { padding: 12px; }

  /* listings controls */
  .listings-controls { flex-direction: column; }
  .ls-filter-tabs { flex-wrap: wrap; }

  /* tabs wrap */
  .tabs-row { flex-wrap: wrap; }

  /* modal full-width on mobile */
  .modal { width: 96%; border-radius: 16px; }
  .listing-modal { max-height: 92vh; }
  .listing-modal-header { padding: 16px 16px 12px; }
  .listing-body { padding: 14px 16px; }
  .listing-actions { padding: 12px 16px; flex-wrap: wrap; }

  /* toast clears floating pill nav */
  .toast { bottom: 90px; right: 14px; left: 14px; }

  /* list now grid */
  .rdb-listnow-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 12px !important; }
  .rdb-lt { padding: 14px 14px 12px !important; }
  .rdb-plat-tab { font-size: 11px !important; padding: 4px 9px !important; }

  /* ── iOS input zoom fix: font-size must be ≥ 16px on all inputs ── */
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="file"],
  textarea,
  select,
  .input,
  .select-input,
  .desc-area,
  .search-input,
  .auth-input,
  .tool-input { font-size: 16px !important; }

  /* ── Body text: minimum readable size on mobile ── */
  body { font-size: 16px; line-height: 1.5; }

  /* Bump small utility text so nothing falls below 12px */
  .page-sub    { font-size: 14px !important; }
  .snap-sub    { font-size: 13px !important; }
  .snap-caption { font-size: 13px !important; }
  .snap-info-item { font-size: 13px !important; }
  .step-desc   { font-size: 13px !important; }
  .tip-cell-body { font-size: 13px !important; }
  .home-tip-text { font-size: 14px !important; line-height: 1.5 !important; }
  .home-tool-desc { font-size: 13px !important; }
  .home-tool-title { font-size: 14px !important; }
  .home-activity-name { font-size: 14px !important; }
  .home-activity-sub  { font-size: 12px !important; }
  .home-empty-sub { font-size: 14px !important; }
  .cta-desc    { font-size: 14px !important; line-height: 1.5 !important; }
  .cta-step    { font-size: 13px !important; }
  .field-label { font-size: 12px !important; }

  /* ── Tap targets: all interactive elements ≥ 44px ── */
  .btn, .btn-primary, .btn-outline, .btn-ghost { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .btn-take    { min-height: 44px !important; }
  .home-tool-card { min-height: 44px; }
  .home-activity-row { min-height: 44px; }
  .tf-tab      { min-height: 36px; }
  .nav-item, .tab, .tool-tab { min-height: 44px; }
  .tool-lnk { min-height: 44px; align-items: center; }
  .calc-chip, .calc-strip-cta { min-height: 44px; }

  /* ── Overflow safety: prevent horizontal scroll from content overflow ── */
  .card, .snap-card, .ai-result-card, .photo-strip-card,
  .home-tips-card, .home-activity-list, .home-empty-state,
  .tips-card-full, .cta-widget,
  .tool-panel, .rdb2-card, .lp-plan, .step {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Long unbroken strings (IDs, URLs) wrap instead of overflow */
  .ai-result-title, .ai-desc-body, .home-activity-name,
  .listing-name, .rdb-title,
  .rdb2-item-name, .rdb2-title-text, .ai-result-title, .home-activity-name {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Listings page ── */
  .listing-row { gap: 10px !important; padding: 12px 12px !important; }
  .listing-thumb { width: 44px !important; height: 44px !important; }
  .listing-name { font-size: 13px !important; }
  .listing-price { font-size: 14px !important; }
  .lv-action-bar { flex-wrap: wrap !important; gap: 8px !important; }
  .lv-action-bar > div { flex-wrap: wrap !important; gap: 6px !important; }

  /* ── Account page: stack columns ── */
  .account-grid { grid-template-columns: 1fr !important; }
  .profile-card { padding: 20px 16px !important; }

  /* ── Price Explorer slider: prevent overflow ── */
  .rdb2-slider-wrap { overflow: hidden; }
  .rdb2-slider { touch-action: none; }
  .rdb2-exstats { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .rdb2-exstat-val { font-size: 14px !important; }
  .rdb2-exstat-lbl { font-size: 9px !important; }
  .rdb2-exstat-sub { font-size: 9px !important; }

  /* ── Results dashboard hero card: stack on mobile ── */
  .rdb2-hero-card { flex-direction: column !important; min-height: unset !important; }
  .rdb2-hero-img-wrap { width: 100% !important; border-right: none !important; border-bottom: 1px solid #e4e4e7 !important; padding: 14px !important; }
  .rdb2-hero-img { max-height: 160px !important; }
  .rdb2-hero-right { padding: 14px !important; }
  .rdb2-hero-name { font-size: 15px !important; }
  .rdb2-hero-price-val { font-size: 22px !important; }

  /* ── Tools tab bar: scroll horizontally, never wrap ── */
  .tools-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .tools-tabs::-webkit-scrollbar { display: none; }
  .tool-tab { flex-shrink: 0 !important; }

  /* ── Page header badges: don't overflow ── */
  .stat-badge { font-size: 11px !important; padding: 4px 8px !important; }
  .page-header > div:last-child { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── Snap card: contain padding ── */
  .snap-card { padding: 16px !important; }
  .tips-card-full { padding: 16px !important; }
  .snap-title { font-size: 17px !important; }

  /* ── Modal overflow safety ── */
  .edit-modal { max-height: 92vh; overflow-y: auto; }
}
