/*
 * 账号诊断响应式布局 V1
 * 仅调整宽度、栅格、间距与溢出边界。
 * 不覆盖现有颜色、字体、圆角、阴影、动效或业务状态。
 *
 * 手机：<= 640px，不添加任何覆盖，完全沿用现有手机界面。
 * 平板：641px - 1023px，扩展为平板内容宽度与双列输入区。
 * PC：>= 1024px，扩展为宽屏工作区，但保持原组件视觉。
 */

@media (min-width: 641px) {
  html {
    min-width: 0;
  }

  body {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .topbar-inner,
  .wrap {
    width: calc(100% - 48px);
    margin-right: auto;
    margin-left: auto;
  }

  .topbar-inner {
    max-width: 1120px;
  }

  .wrap {
    max-width: 1040px;
    padding: 32px 24px 56px;
  }

  body.report-screen .wrap {
    max-width: 1120px;
  }

  .stage,
  .stage > * {
    min-width: 0;
  }

  .steps {
    max-width: 520px;
  }

  #stageGate,
  #stagePreflight,
  #stageLoading,
  #stageError {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }

  #stagePreflight .preflight-box {
    max-width: none;
    margin: 40px 0;
  }

  #stageCollect .upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #stageCollect .capture-period .radios,
  #stageCollect #routeCChoice,
  #stageCollect #FA03_timeframe,
  #stageCollect #FA07_weekly_output,
  #stageCollect #FA08_long_term,
  #stageCollect #FA10_recent_status,
  #stageCollect #preflight_note_count_band,
  #stageCollect #FA06_weekly_time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #stageCollect .checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #stageCollect .radio,
  #stageCollect .check,
  #stageCollect .up-item {
    min-width: 0;
  }

  #stageCollect .optional-card-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  #stageCollect .optional-card-content > .q {
    min-width: 0;
  }

  #stageHistory .history-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #stageHistory .hist-item {
    height: 100%;
  }

  #stageReport .report,
  #stageReport .report-table-scroll {
    width: 100%;
    max-width: 100%;
  }

  #stageReport .report-outline-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .module-hub {
    right: 24px;
  }

  .img-lightbox img {
    max-height: 78vh;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .topbar-inner,
  .wrap {
    width: calc(100% - 32px);
  }

  .wrap {
    max-width: 820px;
    padding: 28px 20px 48px;
  }

  body.report-screen .wrap {
    max-width: 900px;
  }

  #stageCollect .optional-card-content {
    column-gap: 18px;
  }

  #stageReport .report {
    padding: 30px 28px;
  }

  #stageReport .report-outline-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .topbar-inner {
    max-width: 1200px;
  }

  .wrap {
    max-width: 1080px;
    padding: 36px 28px 64px;
  }

  body.report-screen .wrap {
    max-width: 1160px;
  }

  #stageCollect .card {
    padding: 22px;
  }

  #stageCollect .upload-grid {
    gap: 18px 20px;
  }

  #stageCollect .route-c-note .uploader {
    min-height: 150px;
  }

  #stageReport .report {
    padding: 42px 48px;
  }

  #stageReport .chart-radar-wrap {
    width: 100%;
    max-width: 520px;
    height: 380px;
  }

  #stageReport .report-actions {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 1440px) {
  .module-hub {
    right: max(28px, calc((100vw - 1200px) / 2 + 28px));
  }
}