/*!
 * 吉蛙猎头 · 设计令牌与共享组件层（H5 + admin 共用）
 * 断网可用：纯本地 CSS，无外网字体/图标依赖。
 * 规范文档：docs/03-视觉规范.md
 */

/* ============================================================
 * 1. 设计令牌（--jw-*）
 * ============================================================ */
:root {
  /* 品牌色：青绿。白字对 primary 5.47:1，primary 字对 primary-soft 4.90:1 */
  --jw-color-primary: #0f766e;
  --jw-color-primary-hover: #0c625c;
  --jw-color-primary-active: #0a5049;
  --jw-color-primary-soft: #e5f6f2;

  /* 功能色：与主色色相拉开，避免与青绿混淆 */
  --jw-color-success: #157f3d;
  --jw-color-success-soft: #e8f8ec;
  --jw-color-warning: #9a5b00;
  --jw-color-warning-soft: #fff4e5;
  --jw-color-warning-border: #f2d2a9;
  --jw-color-danger: #b42318;
  --jw-color-danger-hover: #96170e;
  --jw-color-danger-soft: #fdecea;
  --jw-color-danger-border: #efbfba;
  --jw-color-info: #0f6b8a;
  --jw-color-info-soft: #e8f3ff;
  --jw-color-info-border: #c3ddf0;
  --jw-overlay: rgba(8, 30, 27, 0.45);
  /* 主色底上的白色蒙层（hero 卡、渐变头部） */
  --jw-on-primary-veil: rgba(255, 255, 255, 0.14);
  --jw-on-primary-fill: rgba(255, 255, 255, 0.16);
  --jw-on-primary-border: rgba(255, 255, 255, 0.42);
  /* 焦点环：主色 16% 透明 */
  --jw-focus-ring: rgba(15, 118, 110, 0.16);
  /* 旋转指示与 Toast 底色（深青黑，避免旧蓝灰） */
  --jw-spinner-track: rgba(6, 32, 29, 0.18);
  --jw-spinner-head: rgba(6, 32, 29, 0.6);
  --jw-toast-bg: rgba(9, 32, 29, 0.94);

  /* 数据可视化：青绿 7 档（漏斗每个阶段一档），相邻 HSL 明度差 10% */
  --jw-chart-1: #7fe1d1;
  --jw-chart-2: #56d7c2;
  --jw-chart-3: #2fcab1;
  --jw-chart-4: #26a18d;
  --jw-chart-5: #1c7869;
  --jw-chart-6: #124e44;
  --jw-chart-7: #092520;

  /* 信用档位：四色相 + 字母标签，不依赖明度差区分 */
  --jw-tier-a: var(--jw-color-success);
  --jw-tier-b: var(--jw-color-info);
  --jw-tier-c: var(--jw-color-warning);
  --jw-tier-d: var(--jw-color-danger);

  /* ColorUI 辅助色（兼容旧类名，已按新色板校准） */
  --jw-color-yellow: #c2800e;
  --jw-color-olive: #5e8c2f;
  --jw-color-cyan: #0e8f8a;
  --jw-color-purple: #6d4aa8;
  --jw-color-pink: #b0397b;

  /* 中性色阶 0 → 900（冷中性，无绿色偏色） */
  --jw-neutral-0: #ffffff;
  --jw-neutral-50: #fafbfc;
  --jw-neutral-100: #f5f7f8;
  --jw-neutral-150: #f2f4f6;
  --jw-neutral-200: #e5e9ec;
  --jw-neutral-300: #d2d8dc;
  --jw-neutral-400: #a9b2b8;
  --jw-neutral-500: #5f6b73;
  --jw-neutral-600: #55616a;
  --jw-neutral-700: #46525a;
  --jw-neutral-800: #333e45;
  --jw-neutral-900: #1b2429;

  /* 语义色 */
  --jw-text-1: var(--jw-neutral-900);
  --jw-text-2: var(--jw-neutral-800);
  --jw-text-3: var(--jw-neutral-700);
  --jw-text-muted: var(--jw-neutral-500);
  --jw-text-inverse: #ffffff;
  --jw-bg-page: var(--jw-neutral-150);
  --jw-bg-card: var(--jw-neutral-0);
  --jw-bg-subtle: var(--jw-neutral-100);
  --jw-border: var(--jw-neutral-200);
  /* 控件/可识别边框：对白底 3.54:1（≥3:1） */
  --jw-border-strong: #7e8a91;

  /* 字号阶梯 */
  --jw-font-12: 12px;
  --jw-font-13: 13px;
  --jw-font-14: 14px;
  --jw-font-16: 16px;
  --jw-font-20: 20px;
  --jw-font-24: 24px;
  --jw-font-28: 28px;

  /* 行高与字重 */
  --jw-lh-tight: 1.3;
  --jw-lh-title: 1.4;
  --jw-lh-body: 1.6;
  --jw-lh-relaxed: 1.7;
  --jw-weight-regular: 400;
  --jw-weight-medium: 500;
  --jw-weight-semibold: 600;
  --jw-weight-bold: 700;

  /* 圆角 */
  --jw-radius-6: 6px;
  --jw-radius-10: 10px;
  --jw-radius-14: 14px;
  --jw-radius-pill: 999px;

  /* 阴影 3 档 */
  --jw-shadow-1: 0 1px 2px rgba(9, 32, 29, 0.06);
  --jw-shadow-2: 0 4px 14px rgba(9, 32, 29, 0.08);
  --jw-shadow-3: 0 18px 50px rgba(9, 32, 29, 0.18);

  /* 区块色块与渐变：全部由主色/中性色派生，不新增品牌色。
     只分两级强度：强（hero / 页脚）、弱（区块底、卡片底）。 */
  --jw-grad-hero: linear-gradient(135deg, var(--jw-color-primary) 0%, var(--jw-color-primary-active) 100%);
  --jw-grad-band: linear-gradient(135deg, var(--jw-color-primary-soft) 0%, var(--jw-neutral-50) 100%);
  --jw-grad-band-reverse: linear-gradient(315deg, var(--jw-color-primary-soft) 0%, var(--jw-neutral-0) 100%);
  --jw-grad-footer: linear-gradient(160deg, var(--jw-neutral-900) 0%, var(--jw-color-primary-active) 100%);
  /* 首页双端入驻：同一主色两端，企业自上而下、顾问自下而上 */
  --jw-grad-entry-enterprise: linear-gradient(180deg, var(--jw-color-primary) 0%, var(--jw-color-primary-active) 100%);
  --jw-grad-entry-consultant: linear-gradient(0deg, var(--jw-color-primary) 0%, var(--jw-color-primary-active) 100%);
  --jw-grad-entry-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 62%);
  /* 深底 chip / 图标底：0.22 深色叠加，白字最差 7.10:1 */
  --jw-entry-overlay: rgba(9, 32, 29, 0.22);
  --jw-entry-border-light: rgba(255, 255, 255, 0.22);
  --jw-shadow-card-hover: 0 18px 36px rgba(9, 32, 29, 0.28);
  --jw-text-on-primary-muted: rgba(255, 255, 255, 0.92);
  /* 深色底文字：0.78 白对页脚渐变最亮处 ≥6.4:1 */
  --jw-text-on-dark-muted: rgba(255, 255, 255, 0.78);
  --jw-border-on-dark: rgba(255, 255, 255, 0.18);
  /* 协作流程四档：同一青绿相，HSL L 62/50/38/26，相邻差 12 */
  --jw-flow-bg-1: #83b9b5;
  --jw-flow-bg-2: #5ca39d;
  --jw-flow-bg-3: #467c78;
  --jw-flow-bg-4: #305552;
  --jw-flow-fg-1: var(--jw-text-1);
  --jw-flow-fg-2: var(--jw-text-1);
  --jw-flow-fg-3: var(--jw-text-inverse);
  --jw-flow-fg-4: var(--jw-text-inverse);
  --jw-flow-dot-size: 32px;
  --jw-flow-ring-1: 1px solid var(--jw-text-1);
  --jw-flow-ring-2: 2px solid var(--jw-text-1);
  --jw-flow-dot-solid-bg: var(--jw-neutral-0);
  --jw-flow-dot-solid-fg: var(--jw-text-1);
  --jw-flow-line-1: rgba(27, 36, 41, 0.18);
  --jw-flow-line-2: rgba(27, 36, 41, 0.34);
  --jw-flow-line-3: rgba(27, 36, 41, 0.55);
  --jw-flow-dash-1: repeating-linear-gradient(90deg, var(--jw-flow-line-1) 0 4px, transparent 4px 8px);
  --jw-flow-dash-2: repeating-linear-gradient(90deg, var(--jw-flow-line-2) 0 6px, transparent 6px 8px);
  --jw-flow-dash-3: linear-gradient(90deg, var(--jw-flow-line-3) 0%, var(--jw-flow-line-3) 100%);

  /* 品牌 logo：源图 1024×327（3.131:1），按高度等比缩放，2 倍/3 倍屏均有余量。
     导航 28px / 工作台侧栏 24px / 页脚 32px / H5 头部 22px。
     深色页脚需浅色底衬：logo 深字对白底 10.01:1，对 0.94 白底衬约 8.87:1。 */
  --jw-logo-nav-h: 28px;
  --jw-logo-sidebar-h: 24px;
  --jw-logo-footer-h: 32px;
  --jw-logo-h5-h: 22px;
  --jw-logo-plate-bg: rgba(255, 255, 255, 0.94);
  --jw-logo-plate-pad: var(--jw-space-2) var(--jw-space-3);
  --jw-logo-plate-radius: var(--jw-radius-10);

  /* 间距：4 的倍数 */
  --jw-space-1: 4px;
  --jw-space-2: 8px;
  --jw-space-3: 12px;
  --jw-space-4: 16px;
  --jw-space-5: 20px;
  --jw-space-6: 24px;
  --jw-space-8: 32px;
  --jw-space-10: 40px;
  --jw-space-12: 48px;

  /* 动效 */
  --jw-dur-fast: 120ms;
  --jw-dur-base: 180ms;
  --jw-dur-slow: 240ms;
  --jw-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --jw-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --jw-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ColorUI 变量兼容：保留 --cu-* 旧名，统一指向 --jw-* */
  --cu-primary: var(--jw-color-primary);
  --cu-primary-light: var(--jw-color-primary-soft);
  --cu-red: var(--jw-color-danger);
  --cu-orange: var(--jw-color-warning);
  --cu-green: var(--jw-color-success);
  --cu-grey: var(--jw-neutral-500);
  --cu-black: var(--jw-text-1);
  --cu-dark: var(--jw-text-3);
  --cu-gray: var(--jw-neutral-400);
  --cu-light: var(--jw-bg-page);
  --cu-border: var(--jw-border);
  --cu-radius: var(--jw-radius-14);
}

/* ============================================================
 * 2. 基础排版
 * ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--jw-font-14);
  line-height: var(--jw-lh-body);
  color: var(--jw-text-1);
  background: var(--jw-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; }

/* 标题层级：页面标题 / 区块标题 / 卡片标题 / 正文 / 辅助说明 */
.jw-page-title,
.page-head h1 {
  font-size: var(--jw-font-20);
  font-weight: var(--jw-weight-bold);
  line-height: var(--jw-lh-tight);
  color: var(--jw-text-1);
}
.jw-section-title {
  font-size: var(--jw-font-16);
  font-weight: var(--jw-weight-semibold);
  line-height: var(--jw-lh-title);
  color: var(--jw-text-1);
}
.jw-card-title,
.cu-card-title {
  font-size: var(--jw-font-16);
  font-weight: var(--jw-weight-semibold);
  line-height: var(--jw-lh-title);
  color: var(--jw-text-1);
}
.jw-body {
  font-size: var(--jw-font-14);
  line-height: var(--jw-lh-body);
  color: var(--jw-text-2);
}
.jw-caption,
.muted,
.small,
.tips {
  font-size: var(--jw-font-12);
  line-height: var(--jw-lh-body);
  color: var(--jw-text-muted);
}

/* 数字与金额：等宽数字、金额右对齐、两位小数 */
.jw-num,
.money,
.num,
.bill-amount,
.wallet-balance,
.wb-item b,
.metric .value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.money,
.jw-money {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 长文本规则 */
.jw-ellipsis,
.ent-name,
.ent-row .name,
.wb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.jw-clamp-2,
.job-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}
.jw-nowrap,
.status-badge,
.cu-tag,
.badge {
  white-space: nowrap;
}
.pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 数字与单位之间留窄空格 */
.jw-unit-gap { margin-left: 2px; }

/* ============================================================
 * 3. 动效基元
 * ============================================================ */
@keyframes jw-spin { to { transform: rotate(360deg); } }
@keyframes jw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jw-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes jw-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jw-pop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}
@keyframes jw-shimmer {
  0% { background-position: -220px 0; }
  100% { background-position: 220px 0; }
}

/* 页面切换：轻量淡入 + 位移，避免闪屏 */
#view { animation: jw-fade-in var(--jw-dur-base) var(--jw-ease-standard) both; }
.jw-page-enter { animation: jw-fade-up var(--jw-dur-base) var(--jw-ease-enter) both; }

/* 列表加载：渐显（逐项微延迟） */
.jw-stagger > * { animation: jw-fade-up var(--jw-dur-base) var(--jw-ease-enter) both; }
.jw-stagger > *:nth-child(2) { animation-delay: 40ms; }
.jw-stagger > *:nth-child(3) { animation-delay: 80ms; }
.jw-stagger > *:nth-child(4) { animation-delay: 120ms; }
.jw-stagger > *:nth-child(5) { animation-delay: 160ms; }
.jw-stagger > *:nth-child(n + 6) { animation-delay: 200ms; }

/* 骨架屏 */
.jw-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--jw-radius-6);
  background: linear-gradient(90deg, var(--jw-neutral-200) 25%, var(--jw-neutral-100) 37%, var(--jw-neutral-200) 63%);
  background-size: 400px 100%;
  animation: jw-shimmer 1.2s ease-in-out infinite;
  margin-bottom: var(--jw-space-2);
}
.jw-skeleton-card {
  padding: var(--jw-space-3) var(--jw-space-4);
  background: var(--jw-bg-card);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius-14);
  margin-bottom: var(--jw-space-2);
}
.jw-skeleton-card .jw-skeleton:last-child { margin-bottom: 0; }
.jw-skeleton.w-40 { width: 40%; }
.jw-skeleton.w-60 { width: 60%; }
.jw-skeleton.w-80 { width: 80%; }

/* 统一按压反馈：ColorUI 语义 cu-press / cu-press-lg */
.cu-press,
.cu-press-lg,
.btn,
.cu-btn,
.job-card,
.notify-item,
.wb-item,
.cu-item,
.tabbar a {
  transition: transform var(--jw-dur-fast) var(--jw-ease-standard),
    opacity var(--jw-dur-fast) var(--jw-ease-standard),
    box-shadow var(--jw-dur-fast) var(--jw-ease-standard),
    background-color var(--jw-dur-fast) var(--jw-ease-standard),
    border-color var(--jw-dur-fast) var(--jw-ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.cu-press:active,
.cu-press-lg:active,
.btn:active,
.cu-btn:active,
.job-card:active,
.notify-item:active,
.wb-item:active,
.cu-item:active,
.tabbar a:active {
  transform: scale(0.98);
  opacity: 0.92;
}
.cu-press-lg:active { transform: scale(0.96); }
.btn:disabled,
.btn.is-disabled,
.cu-btn:disabled,
.cu-btn.is-disabled {
  transform: none;
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================================================
 * 4. 按钮：primary / secondary / ghost / danger × sm / md / lg
 * ============================================================ */
.btn,
.cu-btn {
  position: relative;
  /* 盒模型必须固定：.btn-block 的 width:100% 若按 content-box 解析，
     会再叠加左右 padding 与边框，在 PC 页面（无全局 *{box-sizing}）撑破父容器 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jw-space-1);
  min-height: 36px;
  padding: 0 var(--jw-space-4);
  border: 1px solid transparent;
  border-radius: var(--jw-radius-10);
  background: var(--jw-bg-card);
  color: var(--jw-text-2);
  font-size: var(--jw-font-14);
  font-weight: var(--jw-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: var(--jw-shadow-1);
}
.btn:focus-visible,
.cu-btn:focus-visible {
  outline: 2px solid var(--jw-color-primary);
  outline-offset: 2px;
}
.btn-primary,
.cu-btn.bg-blue {
  background: var(--jw-color-primary);
  border-color: var(--jw-color-primary);
  color: var(--jw-text-inverse);
}
@media (hover: hover) {
  .btn-primary:hover,
  .cu-btn.bg-blue:hover { background: var(--jw-color-primary-hover); border-color: var(--jw-color-primary-hover); }
}
.btn-primary:active,
.cu-btn.bg-blue:active { background: var(--jw-color-primary-active); border-color: var(--jw-color-primary-active); }

.btn-secondary,
.cu-btn.bg-light {
  background: var(--jw-neutral-100);
  border-color: var(--jw-border-strong);
  color: var(--jw-text-3);
}
@media (hover: hover) {
  .btn-secondary:hover,
  .cu-btn.bg-light:hover { background: var(--jw-neutral-200); border-color: var(--jw-neutral-400); }
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--jw-color-primary);
  box-shadow: none;
  padding: 0 var(--jw-space-2);
}
@media (hover: hover) { .btn-ghost:hover { background: var(--jw-color-primary-soft); } }
.btn-ghost:active { background: var(--jw-color-primary-soft); }

.btn-danger,
.cu-btn.bg-red {
  background: var(--jw-color-danger);
  border-color: var(--jw-color-danger);
  color: var(--jw-text-inverse);
}
@media (hover: hover) {
  .btn-danger:hover,
  .cu-btn.bg-red:hover { background: var(--jw-color-danger-hover); border-color: var(--jw-color-danger-hover); }
}

/* 兼容历史语义：绿色主操作统一到 primary（避免同页出现两种主色按钮） */
.btn-success,
.cu-btn.bg-green {
  background: var(--jw-color-primary);
  border-color: var(--jw-color-primary);
  color: var(--jw-text-inverse);
}

.btn-sm,
.cu-btn.sm {
  min-height: 36px;
  padding: 0 var(--jw-space-3);
  border-radius: var(--jw-radius-6);
  font-size: var(--jw-font-13);
  font-weight: var(--jw-weight-medium);
}
.btn-lg,
.cu-btn.lg {
  min-height: 48px;
  padding: 0 var(--jw-space-6);
  border-radius: var(--jw-radius-10);
  font-size: var(--jw-font-16);
}
.btn-block,
.cu-btn.block {
  display: flex;
  width: 100%;
}
.btn-round,
.cu-btn.circle { border-radius: var(--jw-radius-pill); }

/* H5：最小点击高度 ≥ 40px */
@media (max-width: 640px) {
  .btn,
  .cu-btn { min-height: 44px; padding: 0 var(--jw-space-5); }
  .btn-sm,
  .cu-btn.sm { min-height: 40px; padding: 0 var(--jw-space-3); }
  .btn-lg,
  .cu-btn.lg { min-height: 48px; }
}

/* loading：旋转指示，文字保留占位确保宽度不变 */
.btn.is-loading,
.cu-btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
  color: transparent !important;
  text-shadow: none;
}
.btn.is-loading::after,
.cu-btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--jw-spinner-track);
  border-top-color: var(--jw-spinner-head);
  border-radius: 50%;
  animation: jw-spin 0.7s linear infinite;
}
.btn-primary.is-loading::after,
.btn-danger.is-loading::after,
.btn-success.is-loading::after,
.cu-btn.bg-blue.is-loading::after,
.cu-btn.bg-green.is-loading::after,
.cu-btn.bg-red.is-loading::after {
  border-color: var(--jw-on-primary-border);
  border-top-color: var(--jw-text-inverse);
}

/* ============================================================
 * 5. 卡片 / 列表 / 表单
 * ============================================================ */
.cu-card,
.card,
.jw-card {
  background: var(--jw-bg-card);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius-14);
  padding: var(--jw-space-4);
  box-shadow: var(--jw-shadow-2);
}
.cu-card-body,
.jw-card-body {
  font-size: var(--jw-font-14);
  line-height: var(--jw-lh-body);
  color: var(--jw-text-3);
}
.cu-list,
.jw-list {
  background: var(--jw-bg-card);
  border: 1px solid var(--jw-border);
  border-radius: var(--jw-radius-14);
  overflow: hidden;
}
.cu-item,
.jw-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jw-space-3);
  padding: var(--jw-space-3) var(--jw-space-4);
  border-bottom: 1px solid var(--jw-border);
  font-size: var(--jw-font-14);
  color: var(--jw-text-1);
}
.cu-item:last-child,
.jw-list-item:last-child { border-bottom: 0; }

/* 表单 */
.input,
.jw-input {
  min-height: 38px;
  padding: var(--jw-space-2) var(--jw-space-3);
  border: 1px solid var(--jw-border-strong);
  border-radius: var(--jw-radius-10);
  background: var(--jw-bg-card);
  color: var(--jw-text-1);
  font-size: var(--jw-font-14);
  line-height: var(--jw-lh-body);
  outline: none;
  transition: border-color var(--jw-dur-fast) var(--jw-ease-standard),
    box-shadow var(--jw-dur-fast) var(--jw-ease-standard);
}
.input { width: 100%; }
/* 后台默认占满容器；带 w-* 工具类时以工具类为准（低特异性，保证可覆盖） */
:where(.jw-input) { width: 100%; }
.input:focus,
.jw-input:focus {
  border-color: var(--jw-color-primary);
  box-shadow: 0 0 0 3px var(--jw-focus-ring);
}
@media (max-width: 640px) {
  .input,
  .jw-input { min-height: 44px; font-size: 16px; } /* ≥16px 防止 iOS 聚焦缩放 */
}
.jw-input-sm { min-height: 34px; padding: 4px var(--jw-space-2); font-size: var(--jw-font-13); border-radius: var(--jw-radius-6); }
:where(.jw-input-sm) { width: auto; min-width: 120px; }
select.jw-input { cursor: pointer; }
textarea.jw-input { line-height: var(--jw-lh-body); }
.field,
.jd-field,
.fld { margin-bottom: var(--jw-space-3); }
.label,
.jd-label,
.fld label {
  display: block;
  margin-bottom: var(--jw-space-1);
  font-size: var(--jw-font-12);
  font-weight: var(--jw-weight-medium);
  color: var(--jw-text-3);
}

/* ============================================================
 * 6. 表格
 * ============================================================ */
table,
.jw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jw-font-13);
  color: var(--jw-text-2);
}
th {
  text-align: left;
  font-weight: var(--jw-weight-semibold);
  color: var(--jw-text-muted);
  padding: var(--jw-space-2) var(--jw-space-2);
  border-bottom: 1px solid var(--jw-border-strong);
  white-space: nowrap;
  background: var(--jw-bg-subtle);
}
td {
  text-align: left;
  padding: var(--jw-space-2) var(--jw-space-2);
  border-bottom: 1px solid var(--jw-border);
  color: var(--jw-text-2);
  vertical-align: top;
}
/* 后台表格多带 text-sm/text-xs，统一下调到 13px 表格字号 */
table.text-sm,
table.text-xs { font-size: var(--jw-font-13); }
th.money,
td.money,
th.num,
td.num,
.jw-table th.is-num,
.jw-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 表格行内操作：统一 ghost 小号 */
td .btn,
td .cu-btn { box-shadow: none; }
td .btn-primary,
td .cu-btn.bg-blue { background: transparent; border-color: transparent; color: var(--jw-color-primary); }
td .btn-primary:hover,
td .cu-btn.bg-blue:hover { background: var(--jw-color-primary-soft); }
td .btn-danger,
td .cu-btn.bg-red { background: transparent; border-color: transparent; color: var(--jw-color-danger); }
td .btn-danger:hover,
td .cu-btn.bg-red:hover { background: var(--jw-color-danger-soft); }

/* 卡片列表行内操作组：与表格 td 行内同一套 ghost 降级；显式居中，避免被父级 stretch 拉高 */
.btn-inline-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: var(--jw-space-2);
}
.btn-inline-group .btn { box-shadow: none; }
.btn-inline-group .btn-primary {
  background: transparent;
  border-color: transparent;
  color: var(--jw-color-primary);
}
@media (hover: hover) {
  .btn-inline-group .btn-primary:hover { background: var(--jw-color-primary-soft); }
}
.btn-inline-group .btn-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--jw-text-3);
}
@media (hover: hover) {
  .btn-inline-group .btn-secondary:hover { background: var(--jw-neutral-100); }
}
.btn-inline-group .btn-danger {
  background: transparent;
  border-color: transparent;
  color: var(--jw-color-danger);
}
@media (hover: hover) {
  .btn-inline-group .btn-danger:hover { background: var(--jw-color-danger-soft); }
}
/* 危险操作与常规操作的分隔线；与删除按钮打包，换行时不产生孤立分隔线 */
.btn-inline-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--jw-space-2);
}
.btn-inline-sep {
  width: 1px;
  height: 18px;
  background: var(--jw-border);
}

/* ============================================================
 * 7. 标签 / 徽标
 * ============================================================ */
.cu-tag,
.status-badge,
.badge,
.jw-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--jw-space-2);
  border: 1px solid transparent;
  border-radius: var(--jw-radius-pill);
  font-size: var(--jw-font-12);
  font-weight: var(--jw-weight-medium);
  line-height: 18px;
  white-space: nowrap;
  background: var(--jw-neutral-100);
  color: var(--jw-text-muted);
}
.cu-tag { background: var(--jw-color-primary-soft); color: var(--jw-color-primary); }
.cu-tag.plain { background: transparent; border-color: currentColor; }
.status-badge.ok,
.badge.ok,
.badge.sent,
.jw-badge.ok { background: var(--jw-color-success-soft); color: var(--jw-color-success); }
.status-badge.info,
.badge.info,
.jw-badge.info { background: var(--jw-color-info-soft); color: var(--jw-color-info); }
.status-badge.wait,
.badge.wait,
.badge.due,
.jw-badge.wait { background: var(--jw-color-warning-soft); color: var(--jw-color-warning); }
.status-badge.bad,
.badge.bad,
.badge.today,
.badge.overdue,
.badge.norec,
.jw-badge.bad { background: var(--jw-color-danger-soft); color: var(--jw-color-danger); }
.status-badge.muted,
.badge.muted,
.badge.stale,
.jw-badge.muted { background: var(--jw-neutral-100); color: var(--jw-text-muted); }

/* ============================================================
 * 8. 空态 / 加载态 / Toast
 * ============================================================ */
.empty,
.jw-empty {
  margin: var(--jw-space-4) 0;
  padding: var(--jw-space-6) var(--jw-space-4);
  text-align: center;
  font-size: var(--jw-font-13);
  color: var(--jw-text-muted);
  background: var(--jw-bg-subtle);
  border: 1px dashed var(--jw-border-strong);
  border-radius: var(--jw-radius-10);
}
.cu-loading,
.jw-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--jw-spinner-track);
  border-top-color: var(--jw-color-primary);
  border-radius: 50%;
  animation: jw-spin 0.7s linear infinite;
}

.jw-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 900;
  max-width: 86vw;
  padding: 10px 14px;
  border-radius: var(--jw-radius-10);
  background: var(--jw-toast-bg);
  color: var(--jw-text-inverse);
  font-size: var(--jw-font-13);
  line-height: var(--jw-lh-body);
  box-shadow: var(--jw-shadow-2);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity var(--jw-dur-base) var(--jw-ease-standard),
    transform var(--jw-dur-base) var(--jw-ease-enter);
}
.jw-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 弹窗动效基元（配合 dialog.js） */
.jd-mask { animation: jw-fade-in var(--jw-dur-base) var(--jw-ease-standard) both; }
.jd-card { animation: jw-pop-in var(--jw-dur-slow) var(--jw-ease-enter) both; }
.jd-mask.is-closing { animation: jw-fade-in var(--jw-dur-base) var(--jw-ease-exit) reverse both; }
.jd-mask.is-closing .jd-card { animation: jw-pop-out var(--jw-dur-base) var(--jw-ease-exit) both; }

/* ============================================================
 * 10. 通用文本/背景工具类（后台替换 Tailwind 灰色阶，统一走令牌）
 * ============================================================ */
.jw-text-1 { color: var(--jw-text-1); }
.jw-text-2 { color: var(--jw-text-2); }
.jw-text-3 { color: var(--jw-text-3); }
.jw-text-muted { color: var(--jw-text-muted); }
.jw-text-primary { color: var(--jw-color-primary); }
.jw-text-success { color: var(--jw-color-success); }
.jw-text-warning { color: var(--jw-color-warning); }
.jw-text-danger { color: var(--jw-color-danger); }
.jw-bg-subtle { background: var(--jw-bg-subtle); }
.jw-bg-warning { background: var(--jw-color-warning-soft); }
.jw-bg-danger { background: var(--jw-color-danger-soft); }
.jw-border { border-color: var(--jw-border); }
/* 缺凭证等需要“描边强调”的卡片 */
.jw-flash { box-shadow: 0 0 0 2px var(--jw-color-warning) inset; }
.jw-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--jw-radius-10);
  color: var(--jw-text-inverse);
  font-weight: var(--jw-weight-bold);
  background: linear-gradient(135deg, var(--jw-color-primary), var(--jw-color-success));
}

/* 后台键值行（历史页面通用） */
.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--jw-space-3);
  padding: 4px 0;
  font-size: var(--jw-font-13);
  color: var(--jw-text-3);
}
.kv span { min-width: 0; overflow-wrap: anywhere; }
.kv b {
  color: var(--jw-text-1);
  font-weight: var(--jw-weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fld input, .fld select, .fld textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--jw-border-strong);
  border-radius: var(--jw-radius-6);
  padding: 6px var(--jw-space-2);
  font-size: var(--jw-font-13);
  color: var(--jw-text-1);
  background: var(--jw-bg-card);
  outline: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--jw-color-primary);
  box-shadow: 0 0 0 3px var(--jw-color-primary-soft);
}

/* ============================================================
 * 9. 可访问性：尊重 prefers-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;
  }
  .btn:active,
  .cu-btn:active,
  .cu-press:active,
  .cu-press-lg:active,
  .job-card:active,
  .tabbar a:active { transform: none; }
}