/* ═══════════════════════════════════════════════════════════════
   Apple Design System 02 — 核心组件库
   PART 12-37：按钮 / 表单 / 卡片 / 结果区 / 通知 / 页头 / 返回 / Tabs / Badge / 数值显示 / 表格 / Toast / 回到顶部 / 分段控件 / 模态 / 步骤条 / 骨架屏 / 空态 / 动画 / 分割线 / Tooltip / 焦点环 / 跳转链接 / 响应式 / 打印 / 减弱动效
   ---------------------------------------------------------------
   来源：apple-design-system.css v4.0 按 PART 边界物理切分（P1-4.1）
   原文件行区间：第 454–1528 行

   ⚠ 级联敏感：本仓库的样式由 4 个子文件按文件名序号**顺序加载**，
     加载顺序即优先级顺序，不可调换。若遗漏中间任一文件，后续
     文件里对被遗漏组件的覆盖规则将失去上下文，导致样式错乱。

   加载方式（根目录页面）：
     <link rel="stylesheet" href="css/ads-01-tokens.css">
     <link rel="stylesheet" href="css/ads-02-components.css">
     <link rel="stylesheet" href="css/ads-03-extended.css">
     <link rel="stylesheet" href="css/ads-04-pages.css">

   子目录页面请把 css/ 换成 ../css/。
   全文备份：.workbuddy/dead-css-backup/apple-design-system.full.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PART 12: BUTTONS (Liquid Glass)
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1.4;
  min-height: 48px;
  touch-action: manipulation;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-primary-sm), inset 0 1px 0 rgba(255,255,255,0.20);
  -webkit-tap-highlight-color: transparent;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 50%);
  opacity: 1;
  pointer-events: none;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.12));
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: var(--shadow-primary), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn:hover::after { opacity: 1; }

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-primary-sm), inset 0 2px 4px rgba(0,0,0,0.15);
  transition-duration: 80ms;
}

.btn:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.50);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  opacity: 1;
  background: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0.75rem 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  touch-action: manipulation;
  user-select: none;
  box-shadow: var(--glass-shadow-sm), var(--glass-inner-shadow);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
  border-radius: inherit;
}
.btn-secondary:hover {
  border-color: var(--color-primary-border);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--glass-inner-shadow);
}
.btn-secondary:active { transform: translateY(0) scale(0.98); }
.btn-secondary:focus-visible { outline: 3px solid rgba(0, 122, 255, 0.40); outline-offset: 2px; }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 36px;
}
.btn-ghost:hover {
  background: rgba(0, 122, 255, 0.08);
  color: var(--color-primary);
}

.btn-success { background: var(--color-success); box-shadow: 0 4px 12px rgba(52,199,89,0.25), inset 0 1px 0 rgba(255,255,255,0.20); }
.btn-success:hover { box-shadow: 0 8px 20px rgba(52,199,89,0.30), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-danger { background: var(--color-danger); box-shadow: 0 4px 12px rgba(255,59,48,0.25), inset 0 1px 0 rgba(255,255,255,0.20); }
.btn-danger:hover { box-shadow: 0 8px 20px rgba(255,59,48,0.30), inset 0 1px 0 rgba(255,255,255,0.25); }

.btn-sm { min-height: 36px; padding: 0.5rem 1rem; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-lg { min-height: 56px; padding: 1rem 2rem; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-pill { border-radius: var(--radius-full); }
.btn-icon {
  width: 40px; height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════
   PART 13: FORM CONTROLS (Liquid Glass)
   ═══════════════════════════════════════════════════════════════ */
input, select, textarea {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  transition: all var(--transition-fast);
  outline: none;
  width: 100%;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

@media (prefers-color-scheme: dark) {
  input, select, textarea {
    background: rgba(28, 28, 30, 0.60);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  }
}

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-text-light);
  background: rgba(255, 255, 255, 0.75);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12), inset 0 1px 2px rgba(0,0,0,0.03);
}

input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="radio"], input[type="checkbox"] {
  width: 20px; height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: none;
  background: #fff;
}
input[type="checkbox"] { border-radius: var(--radius-xs); }

label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 6px;
  letter-spacing: 0;
}
label.required::after { content: ' *'; color: var(--color-danger); font-weight: 700; }

select {
  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='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-group { margin-bottom: 20px; }
.form-row {
  display: grid;
  /* min() 兜底：容器宽度不足 200px 时（如 320px 手机 + 窄边距 + 嵌套容器）
     硬下限会把网格撑破视口造成横向滚动条。min(Npx,100%) 让下限退化为容器宽。 */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   PART 14: CARDS (Liquid Glass)
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card.interactive { cursor: pointer; }
.card.interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg), var(--glass-border), var(--glass-inner-shadow);
  border-color: rgba(255, 255, 255, 0.70);
}
.card.interactive:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 100ms;
}

.card-solid {
  background: var(--color-surface-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ═══════════════════════════════════════════════════════════════
   PART 15: RESULT SECTION
   ═══════════════════════════════════════════════════════════════ */
.result-section {
  display: none;
  margin-top: 24px;
  padding: 28px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-radius: var(--radius-xl);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-inner-shadow);
  position: relative;
  overflow: hidden;
}
.result-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
}
.result-section > * { position: relative; z-index: 1; }
.result-section.show {
  display: block;
  animation: fadeUp 0.5s var(--ease-out-expo) both;
}

/* ═══════════════════════════════════════════════════════════════
   PART 16: NOTICES & DISCLAIMERS
   ═══════════════════════════════════════════════════════════════ */
.disclaimer, .notice {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  backdrop-filter: blur(10px);
}
.disclaimer i, .notice i { color: var(--color-warning); margin-right: 8px; }

.notice-info {
  background: var(--color-info-bg);
  border-color: var(--color-primary-border);
  border-left-color: var(--color-primary);
}

.notice-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  border-left-color: var(--color-danger);
}

.notice-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  border-left-color: var(--color-success);
}

/* ═══════════════════════════════════════════════════════════════
   PART 17: PAGE HEADER (Sub-page, Sticky)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin-bottom: 24px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  border: var(--glass-border);
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 12px;
  z-index: 100;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.page-header > * { position: relative; z-index: 1; }

.page-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  /* 部分页面用 <h1> 承担页面主标题以补齐文档大纲，此处归零其默认边距 */
  margin: 0;
}
.page-header-title i {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.page-header-actions .btn,
.page-header-actions .btn-secondary {
  width: auto;
  min-height: 38px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   PART 18: BACK BUTTON
   ═══════════════════════════════════════════════════════════════ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  box-shadow: var(--glass-shadow-sm), var(--glass-inner-shadow);
}
.back-btn:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: var(--color-primary-border);
  transform: translateX(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   PART 19: TABS (Scroll / Pill)
   ═══════════════════════════════════════════════════════════════ */
.tabs-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding: 6px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow-sm), var(--glass-inner-shadow);
  border: var(--glass-border);
  max-width: 1200px;
  width: 100%;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll .tab {
  flex: 0 0 auto;
  min-width: 100px;
  scroll-snap-align: start;
  padding: 10px 18px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tabs-scroll .tab:hover {
  color: var(--color-primary);
  background: rgba(0, 122, 255, 0.08);
}
.tabs-scroll .tab.on {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary-sm), inset 0 1px 0 rgba(255,255,255,0.20);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   PART 20: BADGE / TAG
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.badge-neutral { background: rgba(142,142,147,0.10); color: var(--color-text-secondary); border-color: var(--color-border); }

/* ═══════════════════════════════════════════════════════════════
   PART 21: VALUE DISPLAY
   ═══════════════════════════════════════════════════════════════ */
.value-display {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum", "lnum";
}
.value-display.lg { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; }
.value-display.xl { font-size: clamp(2.5rem, 7vw, 3.75rem); line-height: 1.05; }
.value-display.primary { color: var(--color-primary); }
.value-display.success { color: var(--color-success); }
.value-display.warning { color: var(--color-warning); }
.value-display.danger { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════
   PART 22: TABLE
   ═══════════════════════════════════════════════════════════════ */
.lg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
}
.lg-table th, .lg-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
}
.lg-table th {
  background: rgba(255,255,255,0.30);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lg-table tr:last-child td { border-bottom: none; }
/* 深色下 th 表头底原为 rgba(255,255,255,.30)：白色 30% 压在深底上合成中灰
   (rgb(109,109,110))，而表头文字 --color-text-secondary(#AEAEB2) 对比仅 2.34:1
   （实测）。深色改为淡淡一层白，文字对比回到 6.9:1。 */
body.dark-mode .lg-table th { background: rgba(255, 255, 255, 0.06); }
.lg-table tr:hover td { background: rgba(0, 122, 255, 0.04); }

/* ═══════════════════════════════════════════════════════════════
   PART 23: TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(400px, calc(100vw - 40px));
}
.toast {
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg), var(--glass-border), var(--glass-inner-shadow);
  animation: toastIn 0.4s var(--transition-spring) both;
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--glass-border);
}
.toast.error { border-left: 3px solid var(--color-danger); }
.toast.success { border-left: 3px solid var(--color-success); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info { border-left: 3px solid var(--color-primary); }
.toast i { font-size: 1.125rem; flex-shrink: 0; }
.toast.error i { color: var(--color-danger); }
.toast.success i { color: var(--color-success); }
.toast.warning i { color: var(--color-warning); }
.toast.info i { color: var(--color-primary); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px) scale(0.92); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(30px) scale(0.92); }
}

/* ═══════════════════════════════════════════════════════════════
   PART 24: SCROLL TO TOP
   ═══════════════════════════════════════════════════════════════ */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border);
  box-shadow: var(--shadow-md), var(--glass-inner-shadow);
  color: var(--color-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all var(--transition-spring);
  z-index: 999;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0) scale(1); }
.scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-lg), var(--glass-inner-shadow);
}
.scroll-top-btn:active { transform: translateY(0) scale(0.95); }

/* ═══════════════════════════════════════════════════════════════
   PART 25: SEGMENTED CONTROL (Apple Style)
   ═══════════════════════════════════════════════════════════════ */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: rgba(120,120,128,0.12);
  border-radius: var(--radius-sm);
  gap: 2px;
}
.segmented button {
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.segmented button.on {
  background: var(--color-surface-solid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   PART 26: MODAL / DIALOG
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn var(--dur-base) ease;
}
.modal-content {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), var(--glass-inner-shadow);
  padding: 32px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.4s var(--transition-spring);
  position: relative;
}
.modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.modal-content > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   PART 27: STEP INDICATOR
   ═══════════════════════════════════════════════════════════════ */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}
.step-item {
  display: flex;
  align-items: center;
  flex: 1;
}
.step-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 2px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.step-item.active .step-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary-sm);
}
.step-item.done .step-dot {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 8px;
  border-radius: 2px;
}
.step-item.done .step-line { background: var(--color-success); }
.step-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 6px;
  text-align: center;
}
.step-item.active .step-label { color: var(--color-primary); font-weight: 600; }
.step-item.done .step-label { color: var(--color-success); }

/* ═══════════════════════════════════════════════════════════════
   PART 28: SKELETON LOADING
   ═══════════════════════════════════════════════════════════════ */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--color-border-light) 25%, rgba(142,142,147,0.08) 50%, var(--color-border-light) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  min-height: 1em;
}

/* ═══════════════════════════════════════════════════════════════
   PART 29: EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--color-text-light);
}
.empty-state-icon {
  font-size: 3.5rem;
  color: var(--color-text-light);
  margin-bottom: 16px;
  display: inline-block;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.empty-state-desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   PART 30: ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to { transform: scale(4); opacity: 0; }
}

.animate-fade-up { animation: fadeUp 0.5s var(--ease-out-expo) both; }
.animate-fade-in { animation: fadeIn 0.3s ease both; }
.animate-scale-in { animation: scaleIn 0.4s var(--transition-spring) both; }
.animate-slide-up { animation: slideUp 0.5s var(--ease-out-expo) both; }

.stagger-children > * { animation: fadeUp 0.5s var(--ease-out-expo) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
.stagger-children > *:nth-child(3) { animation-delay: 120ms; }
.stagger-children > *:nth-child(4) { animation-delay: 180ms; }
.stagger-children > *:nth-child(5) { animation-delay: 240ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 360ms; }
.stagger-children > *:nth-child(8) { animation-delay: 420ms; }

/* ═══════════════════════════════════════════════════════════════
   PART 31: DIVIDER
   ═══════════════════════════════════════════════════════════════ */
hr, .divider {
  border: 0;
  border-top: 1px solid var(--color-separator);
  margin: 24px 0;
}

/* ═══════════════════════════════════════════════════════════════
   PART 32: TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  animation: fadeIn 0.15s ease;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   PART 33: FOCUS RING (A11y)
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.45);
  outline-offset: 2px;
  /* 修正（2026-09-10）：原写 border-radius: var(--radius-xs) 会把**所有**被聚焦元素
     强制改成 6px 圆角——聚焦胶囊/圆形按钮时圆角会突变，属视觉缺陷。
     现代浏览器的 outline 本就会跟随元素自身圆角，故移除该声明。 */
}

/* ═══════════════════════════════════════════════════════════════
   PART 34: SKIP LINK (A11y)
   ═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100000;
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
  box-shadow: var(--shadow-lg);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   PART 35: RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body { padding: 24px 16px; }
  .page-header { padding: 12px 16px; }
  .card { padding: 24px; border-radius: var(--radius-lg); }
  .result-section { padding: 24px; border-radius: var(--radius-lg); }
}

/* ── 触摸目标兜底（2026-10-05 真实浏览器实测后新增）─────────────────
 * 用真实 Chromium 在 320 / 390px 手机视口下逐页实测 36 个页面，发现横向溢出 0 处
 * （说明 `min-width:0` + 单列流的既有处理是有效的），但以下控件的实际可点区域
 * 明显不足 44px（iOS HIG / WCAG 2.5.5 建议下限），窄屏上易误触或点不中：
 *   .back-btn实测 70×38 ｜ .skip-link 109×36 ｜ .beian-link 171×36 ｜ .d-back 103×40
 *   .sn-m-brand实测 85×18（由 site-nav.js 注入，见该文件同批修复）
 * 统一在共享层兜底，页面私有样式不必逐页维护；仅补可点高度与居中，
 * **不改配色、字号与排版**，桌面端（pointer:fine）完全不受影响。 */
@media (pointer: coarse), (max-width: 767px) {
  .back-btn, .skip-link, .beian-link, .d-back,
  .lp-btn, .tool-link, .back-link, .go-back, .return-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 窄输入框（stepper 内的数字框）实测仅 12~20px 宽，虽高度达标但过窄难点中 */
  input[type="number"], input[type="text"].num, .stepper input {
    min-width: 44px;
  }
  /* 表格内上下移动按钮实测 26×44，宽度不足 */
  button.up, button.down, .up, .down {
    min-width: 44px;
  }
  /* 主题切换按钮：多数页面实测 246×40（移动端全宽切换条，高度 40 差 4px）。
     圆角按钮提至 44 高；全宽形态（width≫44）保持宽度不变只补高度。
     紧凑形态（36×36，如 document-tools）直接放大到 44×44。 */
  /* 提高特异性以覆盖：
     ① ads-02:454 `.page-header-actions .btn { min-height:38px }`（0,2,0）
     ② ads-03:587 `.theme-toggle { width:40px; height:40px }`（0,1,0，但加载更晚）
     实测 13 个计算器页的移动端主题切换条为 246×40（全宽，高度差 4px）。 */
  .theme-toggle,
  button.theme-toggle,
  .page-header-actions .theme-toggle,
  .page-header-actions button.theme-toggle {
    min-height: 44px;
  }
  /* 紧凑形态（document-tools 的 36×36）直接放大；全宽形态只补高度 */
  button.theme-toggle.btn:not([style*="width:"]) { width: 44px; height: 44px; }
  /* 日期输入框旁的清除按钮实测 32×32
     【2026-10-06 加 !important 并提级】interest-calculator.html:124 与
     distribution-calculator.html:152 的 `.date-input-wrap .date-clear-btn
     { width:22px; height:22px }` 同为 (0,2,0) 但页面样式后加载 → 覆盖本规则。
     该按钮是日期输入的必备纠错控件（填错日期必须能一键清掉），
     22px 在手指操作下几乎点不中，故强制 44×44。 */
  .date-clear-btn,
  .date-input-wrap .date-clear-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }
  /* 清除按钮放大到 44px 后会压住日期末位（原 input 的 padding-right 只有
     36px）。同步把右侧内边距加到 48px，保证日期最后一位不被遮挡。
     用 :has() 做能力探测，不支持的老浏览器自动忽略这条。 */
  .date-input-wrap input[type="date"]:has(~ .date-clear-btn) {
    padding-right: 48px;
  }
  /* 参与分配页的债权人名称/金额输入实测 34~37×50，高度过宽、点击区偏窄 */
  input.ds-name, input.ds-amount { min-width: 100px; }
  /* stepper 内的数字输入框实测仅 12~20px 宽，高度达标但过窄难点中。
     这些是「金额/年限」等核心输入项，触摸下必须够大 finger-friendly。 */
  .stepper input, .input-with-unit input[type="text"] {
    min-width: 56px;
  }
  /* 无类名的窄 button（实测 38×44）——多为表单内的 +/- 步进与行内操作 */
  button { min-width: 44px; }
  /* 原生 checkbox / radio 实测仅 16×16（虽被上条 input[type=radio] 的
     min-height:44px 撑到 16×44，但**宽度仍仅 16px**，点不中）。
     用transform 放大命中区域而不改视觉尺寸：用负 margin 抵消位移，保持版式不变。 */
  input[type="checkbox"], input[type="radio"] {
    position: relative;
    min-width: 44px;
    width: 44px;
    height: 44px;
    margin: -14px 0 -14px -14px;   /* 上下各收14、左侧收14，使视觉位置与命中区一致 */
    cursor: pointer;
  }

  /* icon-only 方块按钮实测 34×39（宽高均不足），直接放大为 44×44
     【2026-10-06 加 !important】document-tools.html 内联 `.toolbar .btn.icon-only
     { width:34px; min-width:34px }`（0,2,1）特异性高于本规则（0,2,0），
     且页面样式在共享 CSS 之后加载 → 实测仍为 39×44（宽差 5px）。
     触摸档是全站最后一道兜底，用 !important 确认真实生效。 */
  .btn.icon-only, .btn.sm.icon-only {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }
  /* interest-calculator 的分段控件（.segmented 内按钮，实测 137×36）
     与日期快捷 chip（实测 73×32）：两者都是计算器的核心输入入口，
     min-height 被页面私有样式锁在 36/32，用 !important 兜到 44。 */
  /* lawyer-nav 的视图模式切换（.mode-btn，实测 133×36）：
     「按地区 / 按业务」类分段切换，属核心导航控件。 */
  .mode-btn {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .segmented button,
  .segmented .seg-btn,
  .date-quick-chip {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 移动顶栏的品牌区（.sn-brand）：site-nav.js:263 定义为 flex:none，
     高度随内容只有 23px。它是顶栏唯一的「回首页」入口，
     手机上必须够 44px 否则难点中。 */
  .sn-brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* document-tools 的模板列表项 .tpl（实测 349×42，差 2px）：
     这是 67 套模板的逐行点击入口，是真实操作目标而非文字流，
     故补到 44（不能按列表项豁免——它整块都是可点的）。 */
  .tpl {
    min-height: 44px !important;
  }
  /* 触摸档的文本输入框实测 40px 高（桌面档 38px + 触摸档 min-height:40），
     统一补到 44 以保证软键盘弹出前的点选精度。 */
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    min-height: 44px !important;
  }
  /* document-tools 页脚的「隐私政策 / 安全保障说明」是 onclick 的 span
     （打开法律文书），属真实可点控件而非装饰文字，尺寸受页脚行高约束
     导致仅 60×19。给足高度并保留 12px 字号以维持页脚视觉密度。 */
  .site-footer .footer-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 紧凑形态的主题切换按钮实测 35×44（宽度由 .btn-sm 的 padding 决定，
     .theme-toggle 的 44px 宽被同为 (0,1,0) 但更晚加载的 .btn-sm 覆盖）。
     此处只补宽度，高度已达标；全宽形态（width≫44）不受影响。 */
  button.theme-toggle.btn-sm, button.theme-toggle.btn-secondary {
    min-width: 44px;
  }
}

/* Tablet portrait 768–1023px —— 此前是全站设计的空隙档：
   max-width:1024px 档只调 padding，而所有结构性重排都写在 max-width:768px 档内，
   导致平板（768~1024px）只拿到 padding 级别的调整，表单仍维持多列而容器变窄。
   .form-row 为 repeat(auto-fit, minmax(200px,1fr))，在 768px 容器内会排出 3 列
   （3×200+2×16=632px），每列仅约 235px，标签与单位后缀必然挤压。
   此处显式锁定为 2 列 + 居中限宽，与 index.html:1100-1102 已验证的平板方案一致。 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* document-tools 的工具栏按钮在平板档实测 96×36（.toolbar-group 内
     .btn.primary / .btn），是「智能转换/保存/下载 Word/打印」等主操作，
     高度不足 44。平板触摸操作同样需要 finger-friendly 尺寸。 */
  .toolbar-group .btn,
  .toolbar .btn,
  .toolbar .btn.sb-toggle-mobile {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html { overscroll-behavior: none; }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .container, .wrap, main { max-width: 820px; margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   平板适配增强（2026-10-05 新增）
   ───────────────────────────────────────────────────────────────
   【为什么加这一档】
   iPad 竖屏 768~820px 已由上一档覆盖；但 **iPad 横屏视口为 1180px**，
   已越过 1023px 上限、直接落进桌面档 —— 意味着律师在 iPad 横屏下
   拿到的是为鼠标设计的密集布局：点击目标偏小、表单行过密、结果区需上下滚动。
   桌面端因 pointer:fine 不适用触摸兜底，故 iPad 横屏的触摸优化此前是缺失的。
   本档覆盖 1024~1366px，命中「iPad Pro 11/12.9 横屏」「iPad Air 横屏」等常见尺寸。

   【三档策略】
   · 手机  ≤768px        单列全屏
   · 平板竖屏 768~1023px  两列限宽
   · 平板横屏 1024~1366px  两栏分栏（表单左 + 结果右粘性）← 本档
   · 桌面  ≥1367px       完整多列
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* document-tools 的工具栏按钮在平板档实测 96×36（.toolbar-group 内
     .btn.primary / .btn），是「智能转换/保存/下载 Word/打印」等主操作，
     高度不足 44。平板触摸操作同样需要 finger-friendly 尺寸。 */
  .toolbar-group .btn,
  .toolbar .btn,
  .toolbar .btn.sb-toggle-mobile {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 触摸设备上放大点击目标：此档跨越了 ads-02 的 ≤767px 触摸兜底，
     iPad 横屏需要同等保障。pointer 条件确保台式机窗口落此档时不受影响。 */
  .btn, .btn-secondary, .btn-ghost, button, select {
    min-height: 44px;
  }
  input, select, textarea {
    /* iOS Safari 字号 <16px 聚焦时会自动放大页面，此处一并处理 */
    font-size: 16px;
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 44px; width: 44px; height: 44px;
    margin: -14px 0 -14px -14px;
  }
  .detail-toggle, .date-clear-btn, .card-fav, .back-btn, .tpl-fav {
    min-width: 44px; min-height: 44px;
  }
  .beian-link { min-height: 44px; }

  /* 顶部导航在此档显示为横向形态（site-nav.js 的移动顶栏档为 ≤1199px，
     1366px 超出该范围故走桌面导航）。但触摸设备上桌面导航的点击目标偏小：
     实测 iPad Pro 12.9 横屏（1366px）下 .sn-brand 仅 151×23、
     .sn-link 79×32，均不足 44px，故一并补足。 */
  .sn-brand, .sn-link, .sn-menu-btn, .sn-cta, .sn-search-btn {
    min-height: 44px;
  }
  /* 【2026-10-06】移动顶栏在 ≤1199px 即显示（site-nav.js:260），
     华为 MatePad 11 横屏（1200×2000 CSS px）实测落在 1024~1366px 档，
     品牌区 .sn-brand 仅 151×23 —— 是顶栏唯一的「回首页」入口，必须够大。
     这里补的是本档而非触摸档，因为该宽度不一定命中 pointer:coarse。 */
  .sn-brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sn-brand { display: inline-flex; align-items: center; }
  .sn-link { display: inline-flex; align-items: center; }

  /* 实测遗漏的通用小尺寸按钮（各页面私有样式，共享层无法预知具体类名，
     故按标签+语义类兜底）：.btn.sm 34~39px、.btn.primary 96×36、
     .sb-toggle-mobile 63×34、.on 102×36 —— 高度均不足 44。 */
  .btn.sm, .btn.primary, .sb-toggle-mobile, .on, .sb-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 表单区放宽：平板屏幕横向充裕，`.form-row` 的 auto-fit 在此宽度下
     会排成 3 列导致每列过窄，故显式锁 2 列并加大列间距。 */
  .form-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .container, .wrap, main { max-width: 1180px; }
}

/* ── 平板分栏模式：表单在左、结果在右粘性显示 ──────────────────
   律师办案时需要「一边输入、一边看金额」。手机屏幕太窄做不到，
   平板横屏（1024~1366px）恰好适合，故对此档启用分栏。
   仅在触摸设备上生效：桌面浏览器即使窗口落此宽度，鼠标操作下
   上下滚动阅读更自然，强行分栏反而割裂内容。 */
@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
  /* 把结果区改为粘性右侧栏。width 用 clamp 保证两栏比例合理：
     窄侧给结果区 min 300px，剩余给表单区。 */
  .res, .result-area {
    position: -webkit-sticky;
    position: sticky;
    top: 76px;                /* 顶栏高度 64 + 12 间距 */
    max-height: calc(100vh - 100px);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
  }
  /* 结果区内部滚动时，标题不随内容滚走 */
  .res-head, .result-section-title {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: var(--card-bg, var(--bg-card, #fff));
    z-index: 1;
  }
  /* 结果区默认隐藏：各页面在 <style> 内定义了 `.res { display:none }` 与
     `.res.on { display:block }`（页面内样式加载更晚、特异性等同），
     故只有加 .on 显形后才可能是 sticky 目标。
     用 `:not(.on)` 显式回退为static，避免隐藏态元素因 sticky 产生意外布局。 */
  .res:not(.on), .result-area:not(.on) { position: static; max-height: none; }
  /* 显形态才启用粘性分栏。特异性 (0,2,0) 高于页面的 (0,1,0)，
     可覆盖页面 .res 的 position: relative。 */
  .res.on, .result-area.on {
    position: -webkit-sticky;
    position: sticky;
    /* 页面内 .res 定义了 `overflow: hidden`（用于毛玻璃伪元素裁剪），
       若不覆盖则粘性面板无法内部滚动，长结果会被裁掉。 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  body { padding: 16px 12px; }
  .card { padding: 20px; border-radius: var(--radius-lg); }
  .result-section { padding: 20px; margin-top: 20px; }
  .page-header {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    position: static;
  }
  .page-header-title { font-size: 1rem; gap: 10px; }
  .page-header-title i { width: 32px; height: 32px; font-size: 0.875rem; border-radius: var(--radius-sm); }
  .page-header-actions .btn,
  .page-header-actions .btn-secondary {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
  .tabs-scroll { gap: 4px; padding: 4px; border-radius: var(--radius-lg); }
  .tabs-scroll .tab { min-width: 88px; padding: 8px 12px; font-size: 0.8125rem; border-radius: var(--radius-sm); }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .toast-container { right: 12px; left: 12px; max-width: none; }
  .modal-content { padding: 24px; border-radius: var(--radius-xl); }
  .scroll-top-btn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  body { padding: 12px 8px; }
  .card { padding: 16px; border-radius: var(--radius-md); }
  .result-section { padding: 16px; border-radius: var(--radius-md); }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .page-header-actions { justify-content: stretch; }
  .page-header-actions .btn,
  .page-header-actions .btn-secondary { flex: 1; }
  .page-header-title i { width: 30px; height: 30px; }
  .tabs-scroll .tab { min-width: 76px; padding: 8px 10px; font-size: 0.75rem; gap: 4px; }
  .tabs-scroll .tab i { font-size: 0.75rem; }
  .btn { min-height: 46px; font-size: 0.875rem; padding: 0.75rem 1.25rem; }
  .btn-lg { min-height: 52px; }
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.25rem; }
  .value-display.lg { font-size: 1.875rem; }
  .value-display.xl { font-size: 2.25rem; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
}

/* ── Touch-friendly ──────────────────────────────────────── */
@media (pointer: coarse) {
  .btn, .btn-secondary, .btn-ghost,
  .tab, .nav-item,
  input[type="radio"], input[type="checkbox"],
  select, button {
    min-height: 44px;
  }
  .nav-item { padding: 14px 20px; }
  /* iOS Safari 在输入框字号 < 16px 时聚焦会自动放大页面，导致输入框被挤出视口、
     用户须手动缩回。此规则对所有触屏设备生效（含平板与 481~767px 手机横屏），
     是移动端体验最关键的一条基线，不可移除。 */
  input, select, textarea, .form-row input, .form-row select {
    font-size: 16px;
    min-height: 44px;
  }
  /* 触摸设备上「结果金额」等大字号保持原样，此处仅确保按钮可点区域足够 */
  .btn, .btn-primary { min-height: 46px; }
}

/* ── Safe Area Insets ────────────────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   PART 36: PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    display: block !important;
  }
  body::before, body::after { display: none !important; }
  .page-header, .toast-container, .no-print,
  .btn, .btn-secondary, .btn-ghost,
  .scroll-top-btn, .skip-link, .back-btn,
  [data-tooltip]::before, [data-tooltip]::after {
    display: none !important;
  }
  .card, .result-section {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
  .value-display { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  @page { margin: 1.5cm; }
}

/* ═══════════════════════════════════════════════════════════════
   PART 37: REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}