/* ============================================================
   劳助助互助在线 — 劳助助争议助手 H5 移动端优化
   ============================================================ */

/* ===== 768px 以下 ===== */
@media (max-width: 768px) {
  .container { padding: 0 12px; max-width: 100%; }

  /* 头部 */
  #mainApp header { padding: 16px 0 10px; }
  .header-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .logo h1 { font-size: 18px; }
  .logo .icon { font-size: 26px; }
  .subtitle { font-size: 12px; }
  .user-menu { font-size: 12px; gap: 6px; flex-wrap: wrap; }
  .user-menu a, .user-menu button { padding: 5px 10px; font-size: 12px; }

  /* 步骤指示器 */
  .steps { gap: 3px; margin: 12px 0 16px; flex-wrap: wrap; justify-content: center; }
  .step { font-size: 10px; padding: 5px 10px; gap: 3px; border-radius: 20px; }
  .step .num { width: 18px; height: 18px; font-size: 9px; }
  .step span:not(.num) { display: none; }
  .step.active span:not(.num) { display: inline; }

  /* 表单卡片 */
  .form-section { padding: 16px 14px; border-radius: 12px; margin-bottom: 12px; }
  .form-section h2 { font-size: 17px; }
  .form-section > p { font-size: 13px; margin-bottom: 14px; }
  .form-grid { gap: 12px; }

  /* 输入框 */
  .field label { font-size: 12px; margin-bottom: 4px; }
  .field input, .field select, .field textarea {
    padding: 10px 12px; font-size: 16px !important;
    border-radius: 10px;
  }
  .field textarea { min-height: 80px; }

  /* 争议类型 - 2列网格 */
  .radio-group#disputeType {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .radio-card {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
    gap: 8px;
  }
  .radio-card input[type="checkbox"] { width: 16px; height: 16px; }

  /* 补充问题 */
  .question-item { padding: 12px; margin-bottom: 10px; border-radius: 10px; }
  .question-item label { font-size: 13px; margin-bottom: 6px; }
  .question-item select, .question-item input, .question-item textarea {
    padding: 10px; font-size: 15px; border-radius: 8px;
  }

  /* 证据网格 */
  .evidence-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .checkbox-card { padding: 9px 10px; font-size: 12px; gap: 6px; border-radius: 8px; }
  .checkbox-card input[type="checkbox"] { width: 15px; height: 15px; }
  .checkbox-card span { font-size: 12px; }

  /* 日期选择器 */
  .date-picker { gap: 2px; }
  .date-picker select { font-size: 14px; padding: 8px 6px; }
  .date-sep { font-size: 10px; }

  /* 步进器 */
  .stepper input { width: 56px; font-size: 15px !important; padding: 8px 2px !important; }
  .stepper-btn { width: 36px; height: 40px; font-size: 18px; }

  /* 按钮 */
  .btn-group { flex-direction: column; gap: 8px; }
  .btn { width: 100%; padding: 12px 18px; font-size: 14px; border-radius: 10px; }
  .btn-group .btn { justify-content: center; }

  /* 法律预览 */
  .law-preview-box { padding: 10px; font-size: 13px; }
  .law-preview-box details summary { font-size: 13px; }

  /* 分析结果 */
  #analysisResult { padding: 0; }
  #analysisResult h2 { font-size: 18px; margin-bottom: 14px; }
  .analysis-section { padding: 14px; margin-bottom: 10px; border-radius: 10px; }
  .analysis-section h3 { font-size: 14px; margin-bottom: 6px; }
  .analysis-section p, .analysis-section li { font-size: 13px; }

  /* 文书选项 */
  .doc-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .doc-card { padding: 16px 12px; border-radius: 10px; }
  .doc-card .doc-icon { font-size: 28px; margin-bottom: 8px; }
  .doc-card h3 { font-size: 14px; margin-bottom: 4px; }
  .doc-card p { font-size: 11px; }

  /* 文书预览 */
  .doc-preview { padding: 14px; font-size: 13px; max-height: 400px; }

  /* 加载动画 */
  .loading { padding: 32px 16px; }
  .spinner { width: 32px; height: 32px; }
  .loading p { font-size: 13px; }

  /* 进度条 */
  .progress-bar { height: 5px; margin: 12px 0; }

  /* 登录卡片 */
  .icloud-card { padding: 28px 18px 24px; margin: 8px; border-radius: 12px; }
  .icloud-logo { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
  .icloud-title { font-size: 18px; }
  .icloud-subtitle { font-size: 13px; margin-bottom: 20px; }
  .icloud-form { gap: 22px; }
  .icloud-input { padding: 10px 12px; font-size: 15px; border-radius: 10px; }
  .icloud-btn { padding: 11px; font-size: 15px; border-radius: 10px; }

  /* Footer */
  #mainApp > footer { padding: 20px 0; font-size: 12px; }

  /* 模态框适配 */
  div[style*="position:fixed"][style*="z-index:9999"] > div {
    max-width: 100% !important;
    padding: 16px !important;
    max-height: 85vh !important;
  }
}

/* ===== 480px 以下 ===== */
@media (max-width: 480px) {
  .container { padding: 0 10px; }

  /* 争议类型 - 小屏单列 */
  .radio-group#disputeType {
    grid-template-columns: 1fr;
  }
  .radio-card { padding: 12px 14px; font-size: 14px; }

  /* 证据 - 小屏单列 */
  .evidence-grid { grid-template-columns: 1fr; }
  .checkbox-card { padding: 11px 14px; font-size: 13px; }

  /* 文书选项 - 小屏单列 */
  .doc-options { grid-template-columns: 1fr; }

  .form-section { padding: 14px 12px; }
  .step { font-size: 9px; padding: 4px 8px; }
  .step .num { width: 16px; height: 16px; font-size: 8px; }
}

/* ===== 触控优化 ===== */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-primary, .btn-outline {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  .stepper-btn { min-width: 44px; min-height: 44px; }
  .radio-card, .checkbox-card, .doc-card {
    -webkit-tap-highlight-color: transparent;
  }
  .radio-card:active { transform: scale(0.98); border-color: var(--blue); }
  .checkbox-card:active { transform: scale(0.98); }
  .btn:active { transform: scale(0.97); }
  input, select, textarea { font-size: 16px !important; }
}

/* ===== 刘海屏安全区域 ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .btn-group { padding-bottom: env(safe-area-inset-bottom); }
  #mainApp > footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
  #registerForm.icloud-form { gap: 28px; }