/* ============================================================
   德会量体数据管理系统 — 组件样式层 (style.css)
   ============================================================
   依赖：design-system.css（提供 CSS Variables 设计令牌）
   职责：桥接现有 class 名到设计令牌，确保 JS 生成的 HTML 正常渲染
   层级：Normal CSS（无 @layer），优先级高于 Tailwind CDN 工具类
   ============================================================ */

/* ── 全局输入框边框强制保障（防止 Tailwind border-0 误伤）── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
  border-style: solid;
  border-width: 1px;
  border-color: #D1D5DB;
}
.form-input,
.form-select,
.size-input {
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: #D1D5DB !important;
}

/* ==========================================================
   【卡片组件】
   ========================================================== */
  .input-card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    transition: box-shadow var(--transition-slow), transform var(--transition-slow);
  }
  .input-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-0.125rem);
  }
  @media (min-width: 768px) {
    .input-card { padding: var(--space-5); }
  }

  .workflow-card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: box-shadow var(--transition-slow);
  }
  .workflow-card:hover {
    box-shadow: var(--shadow-md);
  }

  /* ==========================================================
     【统计卡片】
     ========================================================== */
  .stat-card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    transition: box-shadow var(--transition-slow);
  }
  .stat-card:hover {
    box-shadow: var(--shadow-md);
  }
  .stat-card .stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
  }
  .stat-card .stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }
  @media (min-width: 768px) {
    .stat-card { padding: var(--space-4); border-radius: var(--radius-xl); }
    .stat-card .stat-value { font-size: var(--font-size-2xl); }
    .stat-card .stat-label { font-size: var(--font-size-sm); }
  }
  @media (min-width: 1024px) {
    .stat-card { padding: var(--space-5); }
    .stat-card .stat-value { font-size: var(--font-size-3xl); }
  }

  /* ==========================================================
     【按钮组件 — 兼容现有 class 名】
     ========================================================== */
  .btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-family-sans) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast) !important;
    cursor: pointer !important;
    min-width: 80px !important;
    min-height: var(--touch-target-min) !important;
    white-space: nowrap !important;
    user-select: none !important;
  }
  .btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn-primary:active { transform: scale(0.97) !important; }

  .btn-success {
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid var(--color-success) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-family-sans) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast) !important;
    cursor: pointer !important;
    min-width: 80px !important;
    min-height: var(--touch-target-min) !important;
    white-space: nowrap !important;
    user-select: none !important;
  }
  .btn-success:hover {
    background-color: var(--color-success-hover) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn-success:active { transform: scale(0.97) !important; }

  .btn-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid var(--color-danger) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-family-sans) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast) !important;
    cursor: pointer !important;
    min-width: 60px !important;
    min-height: var(--touch-target-min) !important;
    white-space: normal !important;
    user-select: none !important;
  }
  .btn-danger:hover {
    background-color: var(--color-danger-hover) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn-danger:active { transform: scale(0.97) !important; }

  .btn-secondary {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-family-sans) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast) !important;
    cursor: pointer !important;
    min-width: 60px !important;
    min-height: var(--touch-target-min) !important;
    white-space: normal !important;
    user-select: none !important;
  }
  .btn-secondary:hover {
    background-color: var(--color-bg-secondary) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn-secondary:active { transform: scale(0.97) !important; }

  .btn-excel {
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
    border: 2px solid var(--color-success) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-family: var(--font-family-sans) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-xs) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast) !important;
    cursor: pointer !important;
    min-width: 60px !important;
    min-height: var(--touch-target-min) !important;
    white-space: normal !important;
    user-select: none !important;
  }
  .btn-excel:hover {
    background-color: var(--color-success-hover) !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn-excel:active { transform: scale(0.97) !important; }

  .btn-sm {
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--font-size-xs) !important;
    height: 2.25rem !important;
    border-radius: var(--radius-md) !important;
  }

  /* ==========================================================
     【表单组件】
     ========================================================== */
  .form-group {
    margin-bottom: var(--space-4);
  }

  .form-input {
    width: 100%;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background-color: #F9FAFB;
    border: 1.5px solid #D1D5DB;
    border-radius: var(--radius-lg);
    padding: 0 var(--space-4);
    height: 2.75rem;
    outline: none;
    appearance: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-width var(--transition-fast);
  }
  .form-input::placeholder { color: var(--color-text-tertiary); font-style: normal; }
  .form-input:hover { border-color: #9CA3AF; }
  .form-input:focus {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-focus);
    border-width: 2px;
    box-shadow: 0 0 0 4px var(--color-primary-bg);
  }

  .form-input:-webkit-autofill,
  .form-input:-webkit-autofill:hover,
  .form-input:-webkit-autofill:focus,
  .form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  textarea.form-input {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    height: auto;
    min-height: 5rem;
    resize: vertical;
  }
  textarea.form-input::placeholder { line-height: var(--line-height-normal); }

  .form-select {
    width: 100%;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background-color: #F9FAFB;
    border: 1.5px solid #D1D5DB;
    border-radius: var(--radius-lg);
    padding: 0 var(--space-4);
    height: 2.75rem;
    outline: none;
    appearance: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-width var(--transition-fast);
  }
  .form-select::placeholder { color: var(--color-text-tertiary); }
  .form-select:hover { border-color: #9CA3AF; }
  .form-select:focus {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-focus);
    border-width: 2px;
    box-shadow: 0 0 0 4px var(--color-primary-bg);
  }

  /* ★ [彻底统一] size-input 高度 44px 锁定，不受任何 @media/父容器/双class 干扰 */
  .size-input {
    width: 100%;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);           /* 14px */
    color: var(--color-text-primary);
    background-color: #F9FAFB;
    border: 1.5px solid #D1D5DB;
    border-radius: var(--radius-lg);
    padding: 0 var(--space-4);
    height: 2.75rem !important;               /* ★ 44px 强制锁定 */
    min-height: 2.75rem !important;           /* ★ 防止 flex/grid 父容器拉伸 */
    max-height: 2.75rem !important;           /* ★ 防止被其他规则撑开 */
    line-height: 1;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), border-width var(--transition-fast);
  }
  .size-input:hover { border-color: #9CA3AF; }
  .size-input:focus {
    border-color: var(--color-border-focus);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--color-primary-bg);
  }

  /* ★ [高度统一] 桌面端: form-input/form-select → 48px, size-input → 44px 锁定 */
  @media (min-width: 768px) {
    .form-input, .form-select {
      height: 3rem;
      font-size: var(--font-size-base);
    }
    .size-input {
      height: 2.75rem !important;     /* ★ 桌面端锁定44px，不随form-input增大 */
      min-height: 2.75rem !important;
      max-height: 2.75rem !important;
      font-size: var(--font-size-base);
    }
  }

  input[type="date"].form-input { height: 2.75rem; }
  @media (min-width: 768px) {
    input[type="date"].form-input { height: 3rem; }
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
  }

  /* ==========================================================
     【导航栏 — .bottom-nav-item 样式由 index.html 统一管理】
     ========================================================== */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
    z-index: var(--z-bottom-nav);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* ⚠️ .bottom-nav-item 已移至 index.html — 此处避免冲突 */

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    min-height: var(--touch-target-min);
  }
  .nav-item:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }
  .nav-item.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  /* ==========================================================
     【筛选器 / 标签】
     ========================================================== */
  .filter-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), color var(--transition-base);
    cursor: pointer;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
  }
  .filter-btn.active {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
  }

  .body-tag {
    padding: var(--space-2) var(--space-3);
    border: 2px solid #D1D5DB;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
  }
  .body-tag:hover { opacity: 0.9; }
  /* body-tag 内 checkbox/radio 可见 */
  .body-tag input[type="checkbox"],
  .body-tag input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    margin: 0;
    cursor: pointer;
  }
  /* body-tag 选中状态 */
  .body-tag:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  /* ==========================================================
     身形特征扁平网格 (v3.1 — 4列均匀排列，保持旧布局)
     ========================================================== */
  .body-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;                    /* ★ 修复: 确保在flex父容器中撑满宽度 */
  }
  /* ★ iPhone / 小屏手机: 12项 → 3列4行 */
  @media (max-width: 480px) {
    .body-features-grid {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 5px;
    }
  }
  /* ★ 超小屏: 2列6行 */
  @media (max-width: 360px) {
    .body-features-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media (min-width: 1024px) {
    .body-features-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
  }

  .body-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 8px;
    background: white;
    border: 1.5px solid #E5E7EB;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    color: #6B7280;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    /* ★ [修复] label 添加相对定位，使子元素 position:absolute 相对于此元素定位 */
    position: relative;
  }
  .body-feature-tag:hover {
    border-color: var(--color-primary);
    background: #F5F3FF;
    color: var(--color-primary);
  }
  .body-feature-tag:active {
    transform: scale(0.97);
  }
  .body-feature-tag--active {
    border-color: var(--color-primary);
    background: #EEF2FF;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }
  /* ★ [修复] 原生 checkbox 视觉隐藏但保持可交互
     - pointer-events 移除：iOS Safari 需要 routing label-click → input
     - clip: rect(0 0 0 0): 可靠的非可视化隐藏（替代 opacity+width=0）
     - 保留 position:absolute: 从正常流中移除，不影响 label 布局 */
  .body-feature-tag input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    margin: -1px;
    padding: 0;
  }
  .body-feature-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid #D1D5DB;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: white;
  }
  .body-feature-tag--active .body-feature-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
  }
  .body-feature-tag--active .body-feature-check::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
  }
  .body-feature-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
  }

  /* ==========================================================
     【徽章】
     ========================================================== */
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
    min-width: var(--touch-target-min);
  }
  .badge-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
  }
  .badge-success {
    background-color: var(--color-success-light);
    color: var(--palette-emerald-700);
  }
  .badge-warning {
    background-color: var(--color-warning-light);
    color: var(--palette-amber-700);
  }

  /* ==========================================================
     【模态框】
     ========================================================== */
  .modal {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
  }
  .modal-content {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    max-width: 28rem;
    width: 100%;
    margin: 0 var(--space-4);
  }

  /* ==========================================================
     【流程控制】
     ========================================================== */
  .workflow-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    transition: all var(--transition-base);
  }

  /* ==========================================================
     【标题】
     ========================================================== */
  .section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  @media (min-width: 768px) {
    .section-title {
      font-size: var(--font-size-lg);
      margin-bottom: var(--space-4);
    }
  }

  /* ==========================================================
     【表单区域标题体系 — 统一单人/多人量体排版】
     ========================================================== */

  /* ── 一级区块标题：量体表单的每个大区块（基础信息/身形判定/定制品类/尺寸录入/穿着偏好/订单价格）── */
  .form-section-title {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-4) !important;
    padding-bottom: var(--space-2) !important;
    border-bottom: 2px solid var(--color-border-light) !important;
    letter-spacing: -0.01em !important;
    line-height: var(--line-height-tight) !important;
  }

  /* ── 二级标题：子区块标题（品类内尺寸分组 / 面料信息 / 备注等）── */
  .form-subtitle {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-secondary) !important;
    margin-bottom: var(--space-2) !important;
    letter-spacing: 0 !important;
    line-height: var(--line-height-normal) !important;
  }

  /* ── 三级：字段标签 — 统一所有表单字段标题（姓名、性别、身高、体重、电话…）── */
  .form-label {
    display: block;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--palette-gray-700);
    margin-bottom: var(--space-2) !important;
    line-height: var(--line-height-normal) !important;
  }

  /* 表单区块 — 统一尺寸输入框行高与间距 */
  #personFormContent .form-group,
  #multiPersonContent .form-group {
    margin-bottom: var(--space-3);      /* 12px 紧凑间距 */
  }
  /* 尺寸输入框行：确保label+input高度对齐 */
  #personFormContent .form-group .form-label,
  #multiPersonContent .form-group .form-label {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
  }
  /* 量体数据区容器增强 */
  #personFormContent [id$="Container"],
  #multiPersonContent [id$="Container"] {
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
  }

  /* 身形判定标签 (body-tag) 增强 — 更清晰的交互反馈 */
  #personFormContent .body-tag,
  #multiPersonContent .body-tag {
    border: 1.5px solid #D1D5DB;
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    flex: none;
    /* ★ 身形标签不需要强制44px，content-based高度更自然 */
    min-height: auto;
    min-width: auto;
  }
  #personFormContent .body-tag:hover,
  #multiPersonContent .body-tag:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  /* ★ 选中状态：当内部 checkbox 被勾选时高亮 */
  #personFormContent .body-tag:has(input:checked),
  #multiPersonContent .body-tag:has(input:checked) {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-bg);
    font-weight: var(--font-weight-semibold);
  }
  /* checkbox/radio 在 body-tag 内的原生外观保持 — 清晰间距 */
  #personFormContent .body-tag input[type="checkbox"],
  #multiPersonContent .body-tag input[type="checkbox"],
  #personFormContent .body-tag input[type="radio"],
  #multiPersonContent .body-tag input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    accent-color: var(--color-primary);
    margin: 0;
    flex-shrink: 0;
    align-self: center;
  }
  /* checkbox 后的文字与边框保持呼吸距离 */
  #personFormContent .body-tag span:last-child,
  #multiPersonContent .body-tag span:last-child {
    padding-right: 2px;
  }

  /* 表单区块容器 — 统一间距与边距 */
  #personFormContent > form > div,
  #multiPersonContent form > div {
    margin-bottom: var(--space-6);
  }
  /* 表单区块内部卡片（如编码信息/品类区） */
  #personFormContent .rounded-xl,
  #multiPersonContent .rounded-xl {
    border-radius: var(--radius-lg) !important;
  }

  /* 定制品类 checkbox label — hover 效果 */
  #personFormContent label.cursor-pointer,
  #multiPersonContent label.cursor-pointer {
    transition: all var(--transition-fast);
  }

  /* ==========================================================
     【表格】
     ========================================================== */
  .data-table { width: 100%; font-size: var(--font-size-sm); border-collapse: collapse; }
  .data-table th {
    padding: var(--space-2) var(--space-2);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    background-color: var(--color-bg-secondary);
  }
  .data-table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
  }
  @media (min-width: 768px) {
    .data-table th { padding: var(--space-2) var(--space-4); }
    .data-table td { padding: var(--space-3) var(--space-4); }
  }

  /* ==========================================================
     【面料照片 — 兼容旧 class 名】
     ========================================================== */
  .fabric-photo-upload { width: 100%; }
  .fabric-photo-preview {
    width: 100%;
    height: 150px;
    border: 2px dashed var(--palette-gray-300);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
    transition: all var(--transition-slow);
  }
  .fabric-photo-preview:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
  }
  .fabric-photo-preview.has-photo {
    border-style: solid;
    border-color: var(--color-primary);
  }
  .fabric-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .fabric-photo-placeholder i { font-size: 32px; margin-bottom: 8px; }
  .fabric-photo-placeholder span { font-size: 14px; }
  .fabric-photo-img { width: 100%; height: 100%; object-fit: cover; }
  .fabric-photo-remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--palette-rose-500);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .fabric-photo-remove:hover {
    background-color: var(--palette-rose-600);
    transform: scale(1.1);
  }
  .order-fabric-photo {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 1px solid var(--color-border);
  }

  /* ==========================================================
     【加载 / 空状态 / 动画】
     ========================================================== */
  .loading {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg-tertiary);
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
  }
  .empty-state-icon {
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
  }
  .empty-state-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
  }
  .empty-state-action {
    margin-top: var(--space-4);
  }

  .animate-fade-in {
    animation: fadeInUp 0.3s ease-out;
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ==========================================================
     【安全区域】
     ========================================================== */
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }

  /* ==========================================================
     【导入人员 — Excel 导入对话框 & 搜索框】
     ========================================================== */

  /* 导入对话框容器 */
  #multiImportDialog {
    --import-primary: #16a34a;
    --import-primary-light: #f0fdf4;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  #multiImportDialog:not(.hidden) {
    animation: importSlideIn 0.25s ease-out;
  }
  @keyframes importSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 列映射下拉选择器 */
  .import-mapping-select {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
    padding-right: 0.5rem !important;
    font-size: 13px;
    min-height: 34px;
  }

  /* 预览表格 */
  .import-preview-wrapper {
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
  }
  .import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
  }
  .import-preview-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .import-preview-table th {
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #d1d5db;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .import-preview-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .import-preview-table tbody tr {
    cursor: pointer;
    transition: background-color 0.12s;
  }
  .import-preview-table tbody tr:hover { background-color: #f0fdf4; }
  .import-preview-table tbody tr.import-row-selected {
    background-color: #dcfce7;
    border-left: 3px solid #16a34a;
  }
  .import-preview-table tbody tr.import-row-deselected {
    background-color: #f9fafb;
    color: #9ca3af;
    opacity: 0.65;
    border-left: 3px solid transparent;
  }
  .import-preview-table tbody tr.import-row-deselected:hover {
    background-color: #f3f4f6;
    opacity: 0.8;
  }
  /* 预览表格选中行内的 checkbox */
  .import-preview-table td.import-check-col {
    width: 40px;
    text-align: center;
  }
  .import-preview-table input[type="checkbox"].import-row-cb {
    width: 16px;
    height: 16px;
    accent-color: #16a34a;
    cursor: pointer;
    margin: 0;
  }

  /* 导入后搜索框 */
  #multiSearchSection {
    animation: importSlideIn 0.25s ease-out;
  }
  #multiSearchSection .search-input-wrapper {
    position: relative;
  }
  #multiSearchSection .search-input-wrapper input {
    padding-left: 2.5rem;
    border: 2px solid #d1d5db;
    border-radius: var(--radius-lg);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  #multiSearchSection .search-input-wrapper input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
  }
  #multiSearchSection .search-input-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 16px;
    pointer-events: none;
  }
  #multiSearchSection .search-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-md);
  }
  #multiSearchSection .search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.12s;
    border-bottom: 1px solid #f9fafb;
  }
  #multiSearchSection .search-result-item:last-child { border-bottom: none; }
  #multiSearchSection .search-result-item:hover {
    background-color: var(--color-primary-light);
  }
  #multiSearchSection .search-result-item .result-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
  }
  .result-badge.completed {
    background: #dcfce7;
    color: #16a34a;
  }
  .result-badge.pending {
    background: #fef3c7;
    color: #d97706;
  }
  #multiSearchSection .search-result-item .result-name {
    font-weight: 500;
    color: #1f2937;
  }
  #multiSearchSection .search-result-item .result-code {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
  }
  #multiSearchSection .search-result-item.highlight-scroll {
    background-color: #dbeafe !important;
    animation: searchPulse 0.6s ease-out;
  }
  @keyframes searchPulse {
    0%   { background-color: #bfdbfe; }
    100% { background-color: #dbeafe; }
  }

  /* 导入成功/失败 toast 提示 */
  .import-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: importToastIn 0.3s ease-out;
    max-width: calc(100vw - 2rem);
    text-align: center;
  }
  .import-toast.success { background: #16a34a; color: #fff; }
  .import-toast.error   { background: #ef4444; color: #fff; }
  @keyframes importToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* ── 进度徽章增强（当有总数时）── */
  #multiProgressText.has-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #multiProgressText.has-total .progress-fraction {
    font-variant-numeric: tabular-nums;
  }

  /* ==========================================================
     【人员名单 — 可展开列表（已录入/未录入）】
     ========================================================== */

  /* 人员列表容器动画 */
  #multiPersonList {
    animation: personListSlideIn 0.2s ease-out;
    overflow: hidden;
  }
  @keyframes personListSlideIn {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
  }

  /* 单条人员项 — 可点击行 */
  .person-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.12s, transform 0.12s;
    user-select: none;
  }
  .person-list-item:hover {
    background-color: #eff6ff;
    transform: translateX(2px);
  }
  .person-list-item:active {
    background-color: #dbeafe;
    transform: scale(0.985);
  }
  .person-list-item .person-index {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .person-list-item.recorded .person-index {
    background: #dcfce7;
    color: #16a34a;
  }
  .person-list-item.pending .person-index {
    background: #fef3c7;
    color: #d97706;
  }
  .person-list-item.active .person-index {
    background: #2563eb;
    color: #fff;
  }
  .person-list-item .person-info {
    flex: 1;
    min-width: 0;
  }
  .person-list-item .person-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
  }
  .person-list-item .person-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .person-list-item .person-gender {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 4px;
    line-height: 1.5;
    white-space: nowrap;
    color: #6b7280;
    background: #f3f4f6;
  }
  .person-list-item .person-gender.gender-male {
    color: #3b82f6;
    background: #eff6ff;
  }
  .person-list-item .person-gender.gender-female {
    color: #ec4899;
    background: #fdf2f8;
  }

  /* 人员列表操作标签：编辑(已录入) / 录入(未录入) */
  .person-action-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    transition: all 0.12s;
  }
  .person-action-tag.edit-tag {
    color: #16a34a;
    background: #dcfce7;
  }
  .person-action-tag.edit-tag:hover {
    background: #bbf7d0;
  }
  .person-action-tag.pending-tag {
    color: #6366f1;
    background: #eef2ff;
  }
  .person-action-tag.pending-tag:hover {
    background: #e0e7ff;
  }
  .person-action-tag i {
    margin-right: 2px;
    font-size: 9px;
  }
  .person-list-item .person-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .person-list-item.recorded .person-status-dot {
    background: #16a34a;
  }
  .person-list-item.pending .person-status-dot {
    background: #d97706;
  }
  .person-list-item.active .person-status-dot {
    background: #2563eb;
  }
  /* 当前编辑人员高亮 */
  .person-list-item.active {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
  }

  /* 列表为空时 */
  .person-list-empty {
    text-align: center;
    padding: 16px;
    color: #9ca3af;
    font-size: 12px;
  }

  /* 搜索过滤无结果隐藏 */
  .person-list-item.filtered-out {
    display: none !important;
  }
  .pt-safe { padding-top: env(safe-area-inset-top); }
  .px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* ==========================================================
     【响应式】
     ========================================================== */
  @media (max-width: 1023px) {
    .form-label { font-size: 15px !important; }
    .form-input, .form-select, .size-input { font-size: 16px; }  /* 移动端16px防缩放 */
  }
  /* main 的 padding-bottom 已由 index.html 内联样式统一管理，避免冲突 */

/* ==========================================================
   【待办事项页面 — 文字放大】
   作用域：#todo-page（仅影响待办页面，不影响其他模块）
   原则：提升可读性，不破坏原有 grid/flex 排版结构
   ========================================================== */

/* 1. 快捷分类按钮（紧急/今日/跟进/备货）→ 11px → 13px */
#todo-page .grid.grid-cols-4.gap-2 button {
  font-size: 13px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2. 统计概览标签（全部/进行中/已完成/今日新增）→ 11px → 13px */
#todo-page .grid.grid-cols-4.gap-3 .text-\[11px\] {
  font-size: 13px !important;
}

/* 3. 待办列表头部标题 "待办列表" → 14px → 16px */
#todo-page .px-5.py-3.border-b h2 {
  font-size: 16px !important;
}

/* 4. 筛选按钮（全部▼）→ 11px → 13px */
#todo-page #todo-filter button:first-child {
  font-size: 13px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 5. 筛选下拉选项文字 → 11px → 13px */
#todo-page #todo-filter-dropdown button {
  font-size: 13px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 6. 筛选下拉对勾图标 → 10px → 12px */
#todo-page #todo-filter-dropdown .fa-check {
  font-size: 12px !important;
}

/* 7. 筛选箭头图标 → 9px → 11px */
#todo-page #todo-filter .fa-chevron-down {
  font-size: 11px !important;
}

/* 8. 待办列表项区域 — 扩大基础字号，覆盖 JS 生成的文字 */
#todo-page #todo-list {
  font-size: 14px;
}

/* 8a. 待办项主文字 → text-sm(14px) → 15px */
#todo-page #todo-list .text-sm {
  font-size: 15px !important;
}

/* 8b. 待办项辅助文字（类别标签/日期/照片数/备注等）→ 10-11px → 12-13px */
#todo-page #todo-list .text-\[10px\] {
  font-size: 12px !important;
}
#todo-page #todo-list .text-\[11px\] {
  font-size: 13px !important;
}

/* 8c. 待办项备注编辑区 textarea / 按钮 → text-xs(12px) → 13px */
#todo-page #todo-list textarea,
#todo-page #todo-list .text-xs {
  font-size: 13px !important;
}

/* 8d. 照片预览区临时删除按钮 → 10px → 12px */
#todo-page #todo-photo-preview .text-\[10px\] {
  font-size: 12px !important;
}

/* ==========================================================
   【订单流程列表 — 图标放大】
   作用域：#workflow-page（仅影响订单流程页面）
   原则：放大 .fa 图标字号，不修改容器 w-7/h-7/w-8/h-8/w-10/h-10 尺寸
   ========================================================== */

/* 1. 项目级步骤图标按钮 → text-xs(12px)→14px, sm:text-[13px]→15px, md:text-sm(14px)→16px */
#workflow-page #workflow-list button .fa {
  font-size: 14px !important;
}
@media (min-width: 640px) {
  #workflow-page #workflow-list button .fa {
    font-size: 15px !important;
  }
}
@media (min-width: 768px) {
  #workflow-page #workflow-list button .fa {
    font-size: 16px !important;
  }
}

/* 2. 展开后人员步骤图标 .w-8.h-8 内的 .fa → 14px */
#workflow-page [id^="workflow-person-card"] .fa {
  font-size: 14px !important;
}

/* 3. 性别图标头像 .w-10.h-10 内的 fa-male/fa-female → 16px */
#workflow-page #workflow-list .w-10.h-10 .fa {
  font-size: 16px !important;
}

/* 4. 列表头部图标 fa-tasks → 18px */
#workflow-page .section-title .fa.fa-tasks {
  font-size: 18px !important;
}

/* ============================================================
   【窄屏响应式优化 v4.0】 — 兼容 320px+ 全系列移动设备
   ============================================================ */

/* ── 超窄屏 (<360px) 按钮文字缩短 ── */
@media (max-width: 360px) {
  .action-btn-text { display: none !important; }
  .action-btn-short { display: inline !important; }
}

/* ── 超窄屏 (<340px) 统计卡片进一步缩小 ── */
@media (max-width: 340px) {
  .stat-card { padding: 0.625rem !important; }  /* 10px */
  .stat-card .stat-value { font-size: 0.9375rem !important; } /* 15px */
  .stat-card .stat-label { font-size: 0.625rem !important; }  /* 10px */
}

/* ── 超窄屏底部导航进一步缩小 ── */
@media (max-width: 360px) {
  .bottom-nav-item {
    min-width: 30px !important;
    padding: 4px 2px !important;
  }
  .bottom-nav-item i { font-size: 18px !important; }
  .bottom-nav-item span { font-size: 9px !important; }
}

/* ── 全局文本溢出保护 ── */
input, textarea, select,
[class*="card"], [class*="panel"], [class*="container"],
h1, h2, h3, h4, p, span, td, th, label {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* 排除不需要自动换行的元素 */
pre, code, .whitespace-nowrap, button, .btn, .nav-item, .bottom-nav-item {
  word-break: normal;
  overflow-wrap: normal;
}

/* ── 移动端标题自适应字号 ── */
@media (max-width: 480px) {
  h1 { font-size: 1.375rem !important; }  /* 22px */
  h2 { font-size: 1.125rem !important; }  /* 18px */
}
@media (max-width: 360px) {
  h1 { font-size: 1.25rem !important; }   /* 20px */
  h2 { font-size: 1.0625rem !important; }  /* 17px */
}

/* ── 触屏设备滚动性能优化 ── */
@media (pointer: coarse) {
  /* 防止iOS双击缩放 */
  button, a, [onclick], [role="button"], .cursor-pointer {
    touch-action: manipulation;
  }
  /* 优化固定元素渲染 */
  nav.fixed, header.sticky, [class*="fixed"], [class*="sticky"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ── 确保所有图片不溢出容器 ── */
img {
  max-width: 100%;
  height: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   [v16] 小屏/折叠屏/窄边框 响应式布局增强
   仅调整 layout/grid/spacing，不修改 color/font-family/shadow/视觉效果
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 小屏 340-380px: 表单 + 统计卡片间距压缩 ── */
@media (min-width: 340px) and (max-width: 380px) {
  .stat-card {
    padding: 0.5rem !important;
  }
  .stat-card .stat-value {
    font-size: inherit;
    line-height: 1.1;
  }
  .stat-card .stat-label {
    font-size: inherit;
    white-space: normal;
    line-height: 1.2;
    margin-bottom: 0.25rem !important;
  }

  /* 表单: 紧凑间距 */
  .form-input,
  .form-select {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  /* 快速日期标签: 减小内边距 */
  .quick-date-btn {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ── 超窄屏 ≤300px: 极限压缩 ── */
@media (max-width: 300px) {
  /* 隐藏搜索框占位文字 */
  #global-search {
    font-size: 12px !important;
    padding-left: 1.75rem !important;
  }
  #global-search::placeholder {
    font-size: 11px;
  }

  /* Header 仅显示 Logo + 设置按钮 */
  header #sync-status-indicator span {
    display: none;
  }

  /* 品类标签: 超紧凑 */
  .inline-block.text-\[11px\] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* ── 折叠屏展开 (≥680px): 放大部分固定宽度组件 ── */
@media (min-width: 680px) {
  /* 项目成员列表容器: 增大高度 */
  .max-h-\[450px\].overflow-y-auto {
    max-height: 600px !important;
  }

  /* 工作流人员详情: 增大高度 */
  .workflow-person-details-container.max-h-\[30rem\] {
    max-height: 40rem !important;
  }
}

/* ── 安全区: body 级别全局保障 ── */
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
  scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
}