/* ============================================================
   德会量体数据管理系统 — 统一设计系统 v3.0
   ============================================================
   架构策略：
   - :root CSS Variables 设计令牌（主题可切换）
   - 原子令牌层 → 语义令牌层 → 组件层 三层解耦
   - 兼容现有 class 名（btn-primary / form-input / input-card …）
   - 新增 BEM 风格 class（btn--sm / card--elevated ...）
   ============================================================ */

/* ============================================================
   LAYER 1: 原子设计令牌 (Primitive Tokens)
   ============================================================ */
:root {
  /* ── 调色板 ── */
  --palette-blue-50:  #EFF6FF;
  --palette-blue-100: #DBEAFE;
  --palette-blue-200: #BFDBFE;
  --palette-blue-500: #3B82F6;
  --palette-blue-600: #2563EB;
  --palette-blue-700: #1D4ED8;
  --palette-blue-800: #1E40AF;

  --palette-emerald-50:  #ECFDF5;
  --palette-emerald-100: #D1FAE5;
  --palette-emerald-500: #10B981;
  --palette-emerald-600: #059669;
  --palette-emerald-700: #047857;

  --palette-amber-50:  #FFFBEB;
  --palette-amber-100: #FEF3C7;
  --palette-amber-500: #F59E0B;
  --palette-amber-700: #B45309;

  --palette-red-50:  #FEF2F2;
  --palette-red-100: #FEE2E2;
  --palette-red-400: #F87171;
  --palette-red-500: #EF4444;
  --palette-red-600: #DC2626;
  --palette-red-700: #B91C1C;

  --palette-violet-50:  #F5F3FF;
  --palette-violet-100: #EDE9FE;
  --palette-violet-500: #8B5CF6;

  --palette-indigo-50:  #EEF2FF;
  --palette-indigo-500: #6366F1;

  --palette-teal-50:  #F0FDFA;
  --palette-teal-500: #14B8A6;

  --palette-rose-50:  #FFF1F2;
  --palette-rose-500: #F43F5E;
  --palette-rose-600: #E11D48;

  --palette-pink-50:  #FDF2F8;
  --palette-pink-100: #FCE7F3;
  --palette-pink-500: #EC4899;

  --palette-purple-50:  #FAF5FF;
  --palette-purple-100: #F3E8FF;
  --palette-purple-500: #A855F7;
  --palette-purple-700: #7E22CE;

  --palette-gray-50:  #F9FAFB;
  --palette-gray-100: #F3F4F6;
  --palette-gray-200: #E5E7EB;
  --palette-gray-300: #D1D5DB;
  --palette-gray-400: #9CA3AF;
  --palette-gray-500: #6B7280;
  --palette-gray-600: #4B5563;
  --palette-gray-700: #374151;
  --palette-gray-800: #1F2937;
  --palette-gray-900: #111827;

  --palette-white:  #FFFFFF;
  --palette-black:  #000000;
  --palette-page:   #F5F5F4;

  /* ── 排版 ── */
  --font-family-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.875rem;    /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg:   1.125rem;    /* 18px */
  --font-size-xl:   1.25rem;     /* 20px */
  --font-size-2xl:  1.5rem;      /* 24px */
  --font-size-3xl:  1.875rem;    /* 30px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.625;

  /* ── 间距 ── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ── 圆角 ── */
  --radius-none: 0;
  --radius-sm:  0.375rem;  /*  6px */
  --radius-md:  0.5rem;    /*  8px */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  1rem;      /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-full:9999px;

  /* ── 阴影 (Elevation) ── */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);

  /* ── 动效 ── */
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 层级 ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-bottom-nav:250;
  --z-modal:    300;
  --z-toast:    400;
  --z-overlay:  500;

  /* ── 触摸 ── */
  --touch-target-min: 44px;
}

/* ============================================================
   LAYER 2: 语义设计令牌 (Semantic Tokens)
   ============================================================ */
:root {
  /* 主色 (Primary - Blue) */
  --color-primary:            var(--palette-blue-600);
  --color-primary-hover:      var(--palette-blue-700);
  --color-primary-active:     var(--palette-blue-800);
  --color-primary-light:      var(--palette-blue-50);
  --color-primary-bg:         rgba(37, 99, 235, 0.10);
  --color-primary-ring:       rgba(37, 99, 235, 0.20);
  --color-primary-gradient:   linear-gradient(135deg, var(--palette-blue-600), var(--palette-blue-500));

  /* 成功 (Success - Green) */
  --color-success:            var(--palette-emerald-500);
  --color-success-hover:      var(--palette-emerald-600);
  --color-success-light:      var(--palette-emerald-100);
  --color-success-bg:         var(--palette-emerald-50);

  /* 警告 (Warning - Amber) */
  --color-warning:            var(--palette-amber-500);
  --color-warning-light:      var(--palette-amber-100);
  --color-warning-bg:         var(--palette-amber-50);

  /* 危险 (Danger - Red) */
  --color-danger:             var(--palette-red-500);
  --color-danger-hover:       var(--palette-red-600);
  --color-danger-light:       var(--palette-red-100);
  --color-danger-bg:          var(--palette-red-50);

  /* 信息 (Info - Light Blue) */
  --color-info:               var(--palette-blue-500);
  --color-info-light:         var(--palette-blue-100);

  /* 文字 */
  --color-text-primary:       var(--palette-gray-800);
  --color-text-secondary:     var(--palette-gray-500);
  --color-text-tertiary:      var(--palette-gray-400);
  --color-text-inverse:       var(--palette-white);
  --color-text-link:          var(--palette-blue-600);

  /* 背景 */
  --color-bg-primary:         var(--palette-white);
  --color-bg-secondary:       var(--palette-gray-50);
  --color-bg-tertiary:        var(--palette-gray-100);
  --color-bg-page:            var(--palette-page);
  --color-bg-overlay:         rgba(0, 0, 0, 0.5);
  --color-bg-input:           rgba(249, 250, 251, 0.5);

  /* 边框 */
  --color-border:             var(--palette-gray-200);
  --color-border-light:       var(--palette-gray-100);
  --color-border-focus:       var(--palette-blue-600);

  /* 步骤色 */
  --step-1: var(--palette-blue-500);
  --step-2: var(--palette-violet-500);
  --step-3: var(--palette-amber-500);
  --step-4: var(--palette-teal-500);
  --step-5: var(--palette-indigo-500);
  --step-6: var(--palette-emerald-500);
}

/* ============================================================
   LAYER 3: 基础重置与全局排版
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

/* ── 全局字体继承：确保所有元素使用统一字体族 ── */
input, textarea, select, button, 
[role="button"], a, span, p, h1, h2, h3, h4, h5, h6,
label, div, td, th, li, option {
  font-family: var(--font-family-sans);
}
input, textarea, select {
  font-family: var(--font-family-sans) !important;
}

/* ── iOS 滚动优化 ── */
[class*="overflow-y-auto"],
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
[class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain auto;
}
main {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── iOS 触摸优化 ── */
* {
  -webkit-tap-highlight-color: transparent;
}
a, button, [role="button"], .cursor-pointer, [onclick] {
  -webkit-tap-highlight-color: transparent;
}
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
/* 文本类 input — 统一外观，保留 checkbox/radio 原生渲染 */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select {
  font-size: 16px;
  -webkit-appearance: none;
  border-radius: 0;
}
.form-input, .form-select, .size-input,
input[type="text"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"] {
  border-radius: var(--radius-lg);
}
button, [role="button"], .nav-item {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* ============================================================
   LAYER 4: BEM 组件体系
   ============================================================ */

/* ────────────────────────────────────────
   4.1 按钮 (Button)
   ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  min-height: var(--touch-target-min);
}
.btn:active {
  transform: scale(0.97);
}

/* 尺寸变体 */
.btn--sm {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  height: 2.25rem;
  border-radius: var(--radius-md);
}
.btn--lg {
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-6);
}

/* 语义变体 */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--color-primary-ring);
  outline-offset: 2px;
}

.btn--success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
  box-shadow: var(--shadow-sm);
}
.btn--success:hover {
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
  box-shadow: var(--shadow-md);
}

.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
  box-shadow: var(--shadow-sm);
}
.btn--danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  background-color: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-primary-light);
}

.btn--excel {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-xs);
}
.btn--excel:hover {
  background-color: var(--color-success-hover);
  box-shadow: var(--shadow-md);
}

/* ────────────────────────────────────────
   4.2 卡片 (Card)
   ──────────────────────────────────────── */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-0.125rem);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}
.card--elevated:hover {
  box-shadow: var(--shadow-lg);
}

.card--flat {
  box-shadow: none;
  border-color: var(--color-border);
}
.card--flat:hover {
  box-shadow: var(--shadow-sm);
}

.card__body {
  padding: var(--space-4);
}

/* ────────────────────────────────────────
   4.3 统计卡片 (Stat Card)
   ──────────────────────────────────────── */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.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__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

/* ────────────────────────────────────────
   4.4 表单 (Form)
   ──────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--palette-gray-700);
}
.form-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.form-control {
  width: 100%;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4);
  height: 2.75rem;
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
}
.form-control::placeholder {
  color: var(--color-text-tertiary);
}
.form-control:focus {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-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;
}

.form-control--text {
  border-width: 2px;
  border-color: var(--palette-gray-300);
}
.form-control--text:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-primary-ring);
}

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

@media (min-width: 768px) {
  .form-control {
    height: 3rem;
    font-size: var(--font-size-base);
  }
  .form-control--text {
    height: 3rem;
    font-size: var(--font-size-base);
  }
}

/* ────────────────────────────────────────
   4.5 徽章 (Badge)
   ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-full);
  white-space: nowrap;
  user-select: none;
}
.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);
}
.badge--danger {
  background-color: var(--color-danger-light);
  color: var(--palette-red-700);
}
.badge--info {
  background-color: var(--color-info-light);
  color: var(--palette-blue-700);
}

/* ────────────────────────────────────────
   4.6 标签 (Tag)
   ──────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  white-space: nowrap;
  line-height: var(--line-height-tight);
}

/* ────────────────────────────────────────
   4.7 导航 (Navigation)
   ──────────────────────────────────────── */
.nav {
  display: flex;
}
.nav--bottom {
  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);
}
.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-4);
  font-size: 0.65rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-base);
}
.nav__item i {
  font-size: 1.2rem;
}
.nav__item--active {
  color: var(--color-primary);
}

/* ────────────────────────────────────────
   4.8 侧边导航项 (Sidebar Nav Item)
   ──────────────────────────────────────── */
.nav-link {
  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);
  user-select: none;
}
.nav-link:hover,
.nav-link--active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.nav-link--active {
  font-weight: var(--font-weight-semibold);
}

/* ────────────────────────────────────────
   4.9 筛选按钮 (Filter Button)
   ──────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
  user-select: none;
}
.pill--active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* ────────────────────────────────────────
   4.10 模态框 (Modal)
   ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(2px);
}
.modal-panel {
  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: calc(100% - 2rem);
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ────────────────────────────────────────
   4.11 进度条 (Progress Bar)
   ──────────────────────────────────────── */
.progress {
  width: 100%;
  height: 0.5rem;
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
  background: var(--color-primary-gradient);
}
.progress__bar--success { background: linear-gradient(90deg, var(--palette-emerald-500), var(--palette-emerald-400)); }
.progress__bar--warning { background: linear-gradient(90deg, var(--palette-amber-500), var(--palette-amber-400)); }
.progress__bar--danger  { background: linear-gradient(90deg, var(--palette-red-500), var(--palette-red-400)); }

/* ────────────────────────────────────────
   4.12 空状态 (Empty State)
   ──────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.empty__icon {
  color: var(--color-text-tertiary);
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}
.empty__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ────────────────────────────────────────
   4.13 步骤图标 (Workflow Step Icon)
   ──────────────────────────────────────── */
.step-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  transition: all var(--transition-base);
}
.step-dot--done {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* ────────────────────────────────────────
   4.14 分割线 (Divider)
   ──────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-3) 0;
}

/* ────────────────────────────────────────
   4.15 加载动画 (Spinner)
   ──────────────────────────────────────── */
.spinner {
  display: inline-block;
  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); }
}

/* ────────────────────────────────────────
   4.16 动画 (Animations)
   ──────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-in   { animation: fadeInUp   0.3s ease-out; }
.animate-scale-in  { animation: fadeInScale 0.2s ease-out; }
.animate-slide-in  { animation: slideInLeft 0.3s ease-out; }

/* ────────────────────────────────────────
   4.17 面料照片组件 (Fabric Photo)
   ──────────────────────────────────────── */
.fabric-upload {
  width: 100%;
}
.fabric-upload__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);
  cursor: pointer;
}
.fabric-upload__preview:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.fabric-upload__preview--has-photo {
  border-style: solid;
  border-color: var(--color-primary);
}
.fabric-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  width: 100%;
  height: 100%;
  gap: var(--space-2);
}
.fabric-upload__placeholder i { font-size: 32px; }
.fabric-upload__placeholder span { font-size: 14px; }
.fabric-upload__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fabric-upload__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;
  border: none;
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}
.fabric-upload__remove:hover {
  background-color: var(--palette-rose-600);
  transform: scale(1.1);
}

/* ────────────────────────────────────────
   4.18 表格 (Data Table)
   ──────────────────────────────────────── */
.table {
  width: 100%;
  font-size: var(--font-size-sm);
  border-collapse: collapse;
}
.table th {
  padding: var(--space-2) var(--space-3);
  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);
}
.table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .table th,
  .table td { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ────────────────────────────────────────
   4.19 安全区域 (Safe Area)
   ──────────────────────────────────────── */
.safe-bottom  { padding-bottom: env(safe-area-inset-bottom); }
.safe-top     { padding-top: env(safe-area-inset-top); }
.safe-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ============================================================
   LAYER 5: 响应式辅助
   ============================================================ */
@media (max-width: 1023px) {
  main {
    /* ★ 蓝色渐变导航栏: 图标22+文字11+间距4+留白 ≈ 78px + safe-area */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .form-field__label { font-size: 15px; }
  .form-control { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* ── 触摸目标保障 (Apple HIG: 所有可交互元素 >= 44x44px) ── */
@media (pointer: coarse) {
  /* 通用：所有可能被点击的元素 */
  /* ★ 排除待办列表内的紧凑按钮（由 index.html #todo-list 规则覆盖） */
  a, button:not(#todo-list button), [role="button"]:not(#todo-list [role="button"]), 
  .cursor-pointer:not(#todo-list .cursor-pointer), [onclick]:not(#todo-list [onclick]),
  select,
  .pill, .nav-link, .nav__item,   /* .bottom-nav-item 由 index.html 管理 */
  .btn, .btn--sm, .btn--lg,
  .quick-date-btn, .tag,
  .fabric-upload__remove {
    min-height: var(--touch-target-min);   /* 44px */
    min-width: var(--touch-target-min);    /* 44px */
  }

  /* ★ checkbox/radio: 不拉伸自身（保留原生尺寸），由外层 label 保证触控区域 */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: auto;
    min-width: auto;
  }
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* 紧凑按钮在触屏上也保持44px，仅用内边距+行高撑起 */
  .btn--sm {
    height: auto;
    min-height: var(--touch-target-min);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  /* 筛选胶囊/标签需要更大内边距补偿触控区域 */
  .pill {
    padding-top: calc(var(--space-2) + 1px);
    padding-bottom: calc(var(--space-2) + 1px);
  }

  /* 表格内操作按钮保持最小区域 */
  .data-table button,
  .table button {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  /* 确保图标按钮也有足够点击区域 */
  [class*="fa-"][onclick],
  i.fa[onclick] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}
/* 桌面端也保证基本44px（iPad + 鼠标场景） */
/* ★ 待办列表内的紧凑按钮由 #todo-list 专用规则覆盖（index.html） */
button, [role="button"], .btn, .pill, .nav-link, .nav__item {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* ============================================================
   LAYER 6: Apple HIG 增强 (v3.1)
   HIG3: 滚动流畅度 / HIG4: iPad多任务 / HIG5: 交互反馈
   不改变任何视觉风格 — 仅优化间距、响应区域、过渡动画
   ============================================================ */

/* ── HIG3: 滚动流畅度 (Smooth Scrolling + 无重叠) ── */
html {
  scroll-behavior: smooth;
}
main, [class*="overflow-y-auto"], [class*="overflow-y: auto"] {
  scroll-behavior: smooth;
  /* 确保iOS惯性滚动稳定 */
  -webkit-overflow-scrolling: touch;
}

/* ── HIG3: 内容与固定元素不重叠 ── */
@media (max-width: 1023px) {
  /* 渐变导航栏: 74px内容 + 4px呼吸 = 78px + safe-area */
  main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── HIG4: iPad 多任务适配（导航栏样式由 index.html 统一管理） ── */
/* Split View 1/3 (~375px) — 同iPhone断点，紧凑布局 */
/* Split View 1/2 (~507px) — 小iPad布局 */  
@media (min-width: 507px) and (max-width: 589px) {
  main { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* Split View 2/3 (~590px) — 中等iPad布局 */
/* iPad竖屏标准布局 (768-1024px) — 已有规则加强 */
@media (min-width: 768px) and (max-width: 1024px) {
  .form-control { height: 3rem; font-size: var(--font-size-base); }
  main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* iPad横屏/全宽 (1024-1180px) — 桌面过渡 */
@media (min-width: 1025px) and (max-width: 1180px) {
  aside { width: 16rem; } /* 侧边栏略窄 */
}
/* 大屏iPad Pro / 桌面 (>1180px) — 完整布局 */
@media (min-width: 1181px) {
  .form-control { height: 3rem; }
}

/* ── HIG4: 窗口resize自适应（保证Split View拖拽时无缝切换） ── */
@media (max-width: 1024px) {
  #main-app {
    /* 排除侧边栏宽度干扰，让main自动填充 */
    transition: none;
  }
}

/* ── HIG5: 交互反馈 — :active 按压反馈 ── */
/* 确保所有可交互元素有 :active 反馈 */
@media (pointer: coarse) {
  button:active, [role="button"]:active,
  .nav-link:active, .nav__item:active, .nav-item:active,
  .pill:active, /* .bottom-nav-item 的 :active 由 index.html 管理 */
  .quick-date-btn:active, .body-tag:active,
  .btn:active, .cursor-pointer:active {
    transform: scale(0.97);
    transition: transform 0.1s ease-out;
  }
  /* 卡片不缩放（避免内容截断），改用背景微变 */
  .card:active, .input-card:active, .stat-card:active {
    background-color: var(--color-bg-secondary);
    transition: background-color 0.1s ease-out;
  }
}

/* ── HIG5: 统一的过渡动画速度 ── */
button, [role="button"], .btn, .pill, .nav-link, .nav__item,
.quick-date-btn, .body-tag, .cursor-pointer {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform 0.1s ease-out,
    box-shadow var(--transition-fast);
}

/* ── HIG5: focus-visible 可访问性（键盘导航可见焦点） ── */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary-ring);
  outline-offset: 2px;
}
/* 触屏时隐藏outline（防止点击后残留蓝色框） */
@media (pointer: coarse) {
  button:focus:not(:focus-visible),
  a:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible) {
    outline: none;
  }
}

/* ── HIG5: 确保按钮文字不因缩放而截断 ── */
button, .btn {
  overflow: visible;
  text-overflow: ellipsis;
}

/* ── [v14] 面料照片删除按钮: 强制触控优化 (兜底 CSS) ── */
.fabric-photo-delete {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fabric-photo-delete span {
  pointer-events: none;          /* 点击事件穿透到 button，确保 44px 触控区生效 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [v16] 多设备响应式增强 — 折叠屏 / 窄边框 / 小屏幕
   仅调整布局与尺寸，不改颜色、字体、阴影等视觉样式
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 折叠屏: 折叠状态 (≤320px 如 Galaxy Z Flip 折叠) ── */
@media (max-width: 320px) {
  /* 统计卡片: 强制单列 */
  #dashboard-page .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* 工作台按钮: 允许换行 */
  #dashboard-page .flex-nowrap {
    flex-wrap: wrap;
  }

  /* 按钮文字: 隐藏完整文案，显示缩写 */
  #dashboard-page .action-btn-text {
    display: none;
  }
  #dashboard-page .action-btn-short {
    display: block !important;
  }

  /* 筛选器: 单列 */
  #measurements-page .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* 底部导航: 超紧凑 */
  .bottom-nav-item {
    min-width: 24px !important;
    padding: 2px 0 !important;
  }
  .bottom-nav-item i {
    font-size: 16px !important;
  }
  .bottom-nav-item span {
    font-size: 8px !important;
  }

  /* 操作按钮网格: 每行 2 个 */
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 工作流步骤: 每行 3 个 */
  #workflow-steps-overview.grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── 折叠屏: 展开状态 + 窄边框 (680-800px 如 Galaxy Z Fold 展开) ── */
@media (min-width: 680px) and (max-width: 800px) {
  /* 统计卡片: 4列平衡 */
  #dashboard-page .grid.grid-cols-2 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* main 底部间距适配 */
  #main-app > main {
    --nav-height: 80px;
  }

  /* 筛选器: 4列 */
  #measurements-page .grid.grid-cols-3 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* 详情模态框: 更大宽度 */
  #viewModal > div.max-w-lg {
    max-width: 48rem !important;
  }

  /* 底部导航: 适中尺寸 */
  .bottom-nav-item i {
    font-size: 22px !important;
  }
  .bottom-nav-item span {
    font-size: 11px !important;
  }
}

/* ── 窄边框设备: 安全区增强 ── */
@media (max-width: 768px) {
  /* 模态框内关闭按钮: 确保不被圆角/边缘裁剪 */
  @supports (padding-right: env(safe-area-inset-right)) {
    .fixed.inset-0.z-50 .bg-white.rounded-t-2xl > div:first-child {
      padding-left: calc(1rem + env(safe-area-inset-left, 0px));
      padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }/* 筛选下拉: 防溢出安全区 */
    .absolute.z-50.animate-scale-in {
      max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 2rem);
    }

    /* 照片全屏预览: 按钮区域安全 */
    #fabric-photo-viewer .flex.justify-end {
      padding-right: calc(0px + env(safe-area-inset-right, 0px));
    }
    #fullscreenImageModal .flex-col.items-end > button {
      margin-right: calc(0px + env(safe-area-inset-right, 0px));
    }
  }
}

/* ── 小屏幕: 元素缩放与排版优化 (360-420px) ── */
@media (min-width: 321px) and (max-width: 420px) {
  /* 工作台按钮: 减小 padding */
  #dashboard-page .action-btn-text {
    font-size: inherit;
  }

  /* 统计卡片内间距 */
  #dashboard-page .grid.grid-cols-2 > div {
    padding: 0.625rem !important;
  }

  /* 品类标签: 限制最大显示数 */
  .flex-wrap.min-h-\[24px\] > .text-\[11px\] {
    max-width: calc(50vw - 2rem);
  }
}

/* ── 极小屏: 桌面端触摸设备模拟 (如 Surface 触摸模式) ── */
@media (min-width: 1024px) and (pointer: coarse) {
  /* 侧边栏导航: 增大触摸区域 */
  .nav-item {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  /* 表格行: 增大行高 */
  .data-table td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}