*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.flex-wrap {
  flex-wrap: wrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.border {
  border-width: 1px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 🎨 2026-10-20 · UI P0 设计 token（CSS 变量层）
 * ---------------------------------------------------------------------------
 * 与 src/App.jsx 的 `YJ_THEME`（antd token）配套：
 *   · antd 组件（表格/按钮/卡片/输入框…）→ 吃 YJ_THEME
 *   · 页面自有 DOM（自定义区块、内联布局）→ 吃这里的 CSS 变量
 * 目的：让 P1 逐页清理时，页面只写 `var(--yj-*)`，不再手填 hex 和像素。
 * ⚠️ 新增颜色/字号前先看这里有没有，**没有再来加**，不要就地写死。
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 字号阶梯：只有这 6 档（12 辅助 / 13 正文 / 16 小标题 / 20 标题 / 28 大数字 / 40 超大） */
  --yj-font-xs: 12px;
  --yj-font-base: 13px;
  --yj-font-md: 16px;
  --yj-font-lg: 20px;
  --yj-font-xl: 28px;
  --yj-font-2xl: 40px;

  /* 间距：4 的倍数 */
  --yj-space-1: 4px;
  --yj-space-2: 8px;
  --yj-space-3: 12px;
  --yj-space-4: 16px;
  --yj-space-5: 20px;
  --yj-space-6: 24px;
  --yj-space-8: 32px;

  /* 圆角 */
  --yj-radius-sm: 6px;
  --yj-radius: 8px;
  --yj-radius-lg: 10px;

  /* 文字 */
  --yj-text-1: #1d2939;
  --yj-text-2: #5b6472;
  --yj-text-3: #8b95a5;
  --yj-text-4: #b9c0cb;

  /* 边框 / 底色 */
  --yj-border: #d8dee7;
  --yj-border-light: #eef0f3;
  --yj-bg-page: #f5f7fa;
  --yj-bg-soft: #f8fafc;
  --yj-bg-hover: #f5faff;

  /* 语义色 */
  --yj-primary: #1677ff;
  --yj-success: #16a34a;
  --yj-warning: #f59e0b;
  --yj-danger: #dc2626;

  /* 阴影（统一"贴地"风格，禁止再用 0 2px 12px 这类重投影） */
  --yj-shadow-1: 0 1px 3px rgba(16, 24, 40, 0.06);
  --yj-shadow-2: 0 6px 16px rgba(16, 24, 40, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  /* 2026-10-20 UI P0：页面底色与 antd colorBgLayout 对齐（原来是偏蓝的 #f0f2f5） */
  background-color: var(--yj-bg-page);
  color: var(--yj-text-1);
  font-size: var(--yj-font-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 暗色侧边栏滚动条（G21）：覆盖全局浅色滚动条在暗底上的不协调 */
.ant-layout-sider {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ant-layout-sider ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ant-layout-sider ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.ant-layout-sider ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}
.ant-layout-sider ::-webkit-scrollbar-track {
  background: transparent;
}

/* ⭐ UI 永久规则：所有列表表头强制居中（标题行对齐一致）
   无论某列是否显式设置 align，表头都统一居中，彻底避免"有的居中有的没居中"；
   单元格对齐仍由各列 align 控制（金额 right / 名称 left 等），此处只管表头 */
.ant-table-thead > tr > th {
  text-align: center !important;
}

/* ══════════════ 表格视觉（2026-10-20 · UI P0 重构）
   🔴 重要变更：这里**不再写字号 / 内边距 / 表头背景** ——
     全部交给 src/App.jsx 的 `YJ_THEME.components.Table`（唯一出口）：
       表头 13px / 中性浅灰底 #f8fafc / 内边距 10×12（≈44px 行高）
   历史病根：此处曾用 !important 把表头压到 12px + 灰蓝渐变底 + padding 10px 8px，
     既与 antd 默认打架，又让全站表头看起来"发灰发脏"，是"看着难受"的主因之一。
   现在只保留 antd 无法用 token 表达的少量细节。 */
.ant-table-tbody > tr:nth-child(even) > td {
  background: #fcfdff; /* 斑马纹：宽表横读辅助，比 hover 更淡，不抢注意力 */
}
.ant-table-tbody > tr > td {
  transition: background 0.15s ease;
}
.ant-table-tbody > tr:last-child > td {
  border-bottom: none !important;
}
/* 表格内金额/数字：等宽数字，竖排对得齐（列本身请用 align:'right'） */
.ant-table-tbody .yj-money {
  font-variant-numeric: tabular-nums;
}
/* KPI 卡（仅 PaymentWorkbench 使用）：只做布局微调，**字号交给 token**
   （Statistic.contentFontSize=26 / titleFontSize=13）
   🔴 原来这里用 !important 把数字锁死 24px、标题锁死 12px，与页面里的内联 22px 打架 */
.pm-stat-card .ant-statistic-content {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.pm-stat-card .ant-statistic-title {
  margin-bottom: 2px !important;
}
.pm-btn-gradient {
  background: linear-gradient(135deg, #1677ff, #0958d9) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(22,119,255,0.25) !important;
  transition: all 0.3s ease !important;
}
.pm-btn-gradient:hover {
  box-shadow: 0 4px 16px rgba(22,119,255,0.4) !important;
  transform: translateY(-1px);
}
.pm-btn-success {
  background: linear-gradient(135deg, #52c41a, #389e0d) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(82,196,26,0.25) !important;
}
.pm-btn-success:hover {
  box-shadow: 0 4px 16px rgba(82,196,26,0.4) !important;
  transform: translateY(-1px);
}

/* ══════════════ 主按钮（2026-10-20 · UI P0 重构）
   🔴 原来这里给全站 `.ant-btn-primary` 强制套了「蓝色渐变 + hover 上浮 -1px + 重投影」，导致：
     ① 表格操作列按钮一 hover 就"跳一下"，密集审批时非常刺眼；
     ② 为了修正它的副作用，下面又写了 6 组 ghost / small 的反向 !important 规则（约 40 行），越修越乱。
   ⇒ 现在全部撤掉，恢复 antd 原生纯色主按钮（颜色 / 阴影由 YJ_THEME.components.Button 统一控制）。
      业务语义按钮（审批三色，见下）仍然用 !important 覆盖主色，这部分**保留不动**。 */

/* ══════════════ 2026-10-16 审批决策按钮「三色语义」（方案A · 防误触改版）
     为什么需要它：U-02 把 `.ant-btn-primary` 强制成品牌蓝渐变(!important) ⇒ 只靠内联 style
     无法让「确认通过」显绿（内联会被 !important 覆盖，实测被渲染成蓝色）。
     故改用「同等 !important + 更高特异度」的自定义类；`:not(:disabled)` 守卫确保禁用态不着色，
     保持 antd 原生灰，避免「看着能点、其实点不动」。 ══════════════ */
.ant-btn.yj-decision-approve:not(:disabled) { background: #52c41a !important; border-color: #52c41a !important; color: #fff !important; }
.ant-btn.yj-decision-approve:not(:disabled):hover,
.ant-btn.yj-decision-approve:not(:disabled):active { background: #73d13d !important; border-color: #73d13d !important; color: #fff !important; }
.ant-btn.yj-decision-return:not(:disabled) { background: #fa8c16 !important; border-color: #fa8c16 !important; color: #fff !important; }
.ant-btn.yj-decision-return:not(:disabled):hover,
.ant-btn.yj-decision-return:not(:disabled):active { background: #ffa940 !important; border-color: #ffa940 !important; color: #fff !important; }
.ant-btn.yj-decision-reject:not(:disabled) { background: #ff4d4f !important; border-color: #ff4d4f !important; color: #fff !important; }
.ant-btn.yj-decision-reject:not(:disabled):hover,
.ant-btn.yj-decision-reject:not(:disabled):active { background: #ff7875 !important; border-color: #ff7875 !important; color: #fff !important; }
/* ═══ U-04 表格「操作」列浅灰底（全系统 UI 一致性铺开·批2）
     由 _inject_ui_consistency.js 给每个 title:'操作' 列注入 className:'yunjia-action-col'，
     此规则让表头 th 与单元格 td 同时浅灰底，零逻辑改动、未来新增自动生效 ═══ */
.yunjia-action-col {
  background-color: #fafafa !important;
}
.yunjia-action-col.ant-table-cell-fix-right,
.yunjia-action-col.ant-table-cell-fix-left {
  background-color: #fafafa !important;
}
/* ═══ U-03 弹窗/抽屉头部全局渐变（原 .pm-modal-header 提升为全局，零逻辑改动） ═══ */
/* 弹窗 / 抽屉头部（2026-10-20 UI P0）：取消淡蓝渐变 —— 渐变在满屏弹窗里显灰、且与表头旧渐变重复抢眼 */
.ant-modal-header {
  border-bottom: 1px solid #eef0f3 !important;
  padding: 16px 24px !important;
  background: #fff !important;
  border-radius: 12px 12px 0 0 !important;
}
.ant-drawer-header {
  border-bottom: 1px solid #eef0f3 !important;
  padding: 16px 24px !important;
  background: #fff !important;
}
.pm-section-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.2s ease;
}
.pm-section-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* ═══ U-03 状态标签全局统一形状（原 .pm-tag-status 提升为全局 .ant-tag） ═══ */
/* 状态标签（2026-10-20 UI P0）：11px → 12px。11px 及以下在业务人员显示器上基本是"糊"的，
   12px 为全站辅助字号下限（见 YJ_THEME 注释：不再允许出现 9/10/11px） */
.ant-tag {
  border-radius: 5px !important;
  padding: 1px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  line-height: 20px !important;
}
/* 状态语义色板：页面可直接用 className="tag-success" 等，或继续用 antd color="success" */
.tag-success   { background:#f6ffed !important; color:#389e0d !important; }
.tag-error     { background:#fff1f0 !important; color:#cf1322 !important; }
.tag-warning   { background:#fffbe6 !important; color:#d48806 !important; }
.tag-info      { background:#e6f4ff !important; color:#0958d9 !important; }
.tag-processing { background:#f9f0ff !important; color:#722ed1 !important; }
.tag-default   { background:#fafafa !important; color:#595959 !important; border:1px solid #d9d9d9 !important; }
@keyframes pmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pm-fade-in {
  animation: pmFadeIn 0.3s ease forwards;
}

/* 隐藏 number 输入框的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}

/* ══════════════ P2 打磨（全局提升，零逐页改动）：U-08 卡片 / U-13 颜色 / U-09 数值 / U-10 表单 / U-12 响应式 ══════════════ */

/* ── U-08 卡片收敛：所有 antd 卡片统一圆角+阴影，消除"新页面自造 radius/shadow"漂移 ── */
/* 卡片（2026-10-20 UI P0）：阴影从 0 2px 12px（重投影，卡片像浮起来）收敛为 0 1px 3px（贴地） */
.ant-card {
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
  border-color: #eef0f3 !important;
}
.ant-card-hoverable {
  transition: all 0.25s ease !important;
}
.ant-card-hoverable:hover {
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.10) !important;
}
/* 收敛 .pm-section-card 阴影与卡片 token 一致（.page-card 已废弃：全站 0 处使用，2026-10-20 UI P0 删除） */
.pm-section-card {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
  border-radius: 10px !important;
}

/* ── U-13 语义色文字工具类：供内联文本统一引用，杜绝硬编码 hex 漂移 ── */
.c-primary { color: #1677ff !important; }
.c-success { color: #52c41a !important; }
.c-warning { color: #fa8c16 !important; }
.c-error   { color: #ff4d4f !important; }
.c-info    { color: #1677ff !important; }
.c-text    { color: #333333 !important; }
.c-text-secondary { color: #666666 !important; }
.c-text-tertiary  { color: #8c8c8c !important; }

/* ── U-09 数值/金额工具类：等宽数字+右对齐，供表格金额列 className 复用 ── */
.pm-num    { font-variant-numeric: tabular-nums; }
.pm-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── U-10 表单标签字重统一（控件/校验样式由 antd 主题接管） ── */
.ant-form-item-label > label { font-weight: 500; }

/* ── U-12 小屏响应式安全网：表格横向滚动，避免操作列挤压/溢出 ── */
.ant-table-wrapper { overflow-x: auto; }

/* ══════════════ A) 手机浏览器响应式适配（≤768px 安全网，零业务页面改动） ══════════════ */
@media (max-width: 768px) {
  /* 缩小基础字号，缓解窄屏文字溢出 */
  body { font-size: 13px; }

  /* 内容区留白收紧 */
  .ant-layout-content { margin: 8px !important; }

  /* 顶栏内边距收窄，给面包屑/操作区更多空间 */
  .ant-layout-header { padding: 0 12px !important; }

  /* 页面卡片内边距与区块卡片间距缩小 */
  .pm-section-card { padding: 12px; }

  /* Row/Col 兜底：强制单列换行，避免写死宽度的栅格在窄屏溢出 */
  .ant-row { flex-wrap: wrap !important; }
  .ant-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 统计卡片横向铺满并允许换行 */
  .pm-stat-card { width: 100% !important; }

  /* 表格容器横向滚动（已有全局兜底，此处再次保证窄屏生效） */
  .ant-table-wrapper { overflow-x: auto; }

  /* 表单/描述列表标签与控件在窄屏下纵向堆叠更友好（antd 已默认，这里仅收间距） */
  .ant-form-item { margin-bottom: 12px; }
}

/* ══════════════ 表格固定列底色（2026-10-20 UI P1）
   付款工作台把「序号」固定左、「操作」固定右，横向滚动时必须有不透明底色，
   否则下层单元格会透出来（序号列没有 yunjia-action-col 类，需要单独兜底）。 */
.ant-table-cell-fix-left,
.ant-table-cell-fix-right {
  background: #fff;
}
.ant-table-thead > tr > th.ant-table-cell-fix-left,
.ant-table-thead > tr > th.ant-table-cell-fix-right {
  background: #f8fafc !important;
}
.ant-table-tbody > tr:nth-child(even) > td.ant-table-cell-fix-left,
.ant-table-tbody > tr:nth-child(even) > td.ant-table-cell-fix-right {
  background: #fcfdff;
}
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
  background: #f5faff !important;
}
