/* 手机端适配：不改变桌面端结构，只在窄屏重排布局 */

@media (max-width: 860px) {
  .app-header,
  .app-shell { width: min(100% - 24px, 680px); }
  .app-header { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; padding: 20px 0 16px; }
  .header-actions { justify-content: flex-start; }
  .header-actions .ghost-button { flex: 1; }
  .app-shell { display: grid; grid-template-columns: 1fr; gap: 14px; padding-bottom: 24px; }
  .market-dashboard,
  .control-panel,
  .summary-grid,
  .positions-section,
  .plans-grid,
  .rules-section,
  .integration-section { grid-column: 1 / -1; }
  .market-dashboard,
  .control-panel,
  .positions-section,
  .plans-grid,
  .rules-section,
  .integration-section { padding: 16px; border-radius: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plans-grid { grid-template-columns: 1fr; gap: 10px; }
  .rules-section ul { grid-template-columns: 1fr; gap: 8px; }
  .section-heading { align-items: flex-start; gap: 10px; }
  .section-heading > .ghost-button,
  .section-heading > .primary-button { flex-shrink: 0; }
  .upload-box { align-items: stretch; flex-direction: column; }
  .upload-button { width: 100%; text-align: center; }
  .market-cards { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .market-card strong { font-size: 20px; }
  .table-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  table { min-width: 900px; }
  .button-row { display: grid; grid-template-columns: 1fr; }
  .button-row .primary-button,
  .button-row .ghost-button { width: 100%; }
}

@media (max-width: 560px) {
  .app-header,
  .app-shell { width: calc(100% - 16px); }
  h1 { font-size: 30px; }
  .subtitle { font-size: 13px; line-height: 1.6; }
  .header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .market-dashboard,
  .control-panel,
  .positions-section,
  .plans-grid,
  .rules-section,
  .integration-section { padding: 13px; }
  .market-cards,
  .summary-grid { grid-template-columns: 1fr; }
  .market-card,
  .dashboard-panel,
  .metric-card,
  .plan-card { padding: 13px; }
  .section-heading h2 { font-size: 18px; }
  .section-heading > .ghost-button,
  .section-heading > .primary-button { min-height: 38px; padding: 7px 10px; font-size: 13px; }
  .data-stamp,
  .helper-text { line-height: 1.5; }
}

/* H5 工作台最终覆盖：修复浅色头部文字、底部 Tab 遮挡与 iPhone 安全区 */
@media (max-width: 860px) {
  body.mobile-h5 {
    --ink: #111827 !important;
    --muted: #6b7280 !important;
    --line: #d8dee8 !important;
    background: #f5f6f8 !important;
    color: #111827 !important;
    padding-bottom: 96px !important;
  }

  body.mobile-h5 .app-header {
    width: 100% !important;
    padding: 12px 16px 10px !important;
    background: rgba(245,246,248,.98) !important;
    border-bottom: 1px solid #dbe1e8 !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
  }

  body.mobile-h5 .app-header h1,
  body.mobile-h5 .app-header .subtitle { color: #111827 !important; }
  body.mobile-h5 .app-header .eyebrow { color: #22b8d6 !important; }

  body.mobile-h5 .app-shell {
    width: 100% !important;
    padding: 0 8px 20px !important;
    gap: 10px !important;
  }

  body.mobile-h5 .mobile-tab-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important;
    padding: 4px 4px env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #dfe4ec !important;
    box-shadow: 0 8px 30px rgba(15,23,42,.16) !important;
  }

  body.mobile-h5 .mobile-tab-bar button {
    min-width: 0 !important;
    min-height: 54px !important;
    color: #8b93a1 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
  }

  body.mobile-h5 .mobile-tab-bar button.active {
    color: #111827 !important;
    background: #f1f5f9 !important;
    font-weight: 700 !important;
  }

  body.mobile-h5 .mobile-tab-bar .tab-icon {
    display: block !important;
    font-size: 19px !important;
    line-height: 20px !important;
    height: 20px !important;
  }

  body.mobile-h5 .mobile-tab-bar button:active { transform: scale(.97); }
  body.mobile-h5 .mobile-tab-panel { min-width: 0 !important; }
  body.mobile-h5 .market-dashboard { margin-bottom: 0 !important; }
}