/* WantJoin · 共享 Token
 * Slate Clean（vB 定稿）：冷灰壳 + 墨色正文 + 唯一强调青绿 primary
 * Tag / Tab / SKU / 链接字色一律 ink；--gold* 为历史别名，等同 primary 洗色 */
:root {
  --pearl: #f5f6f8;
  --page-bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e5e7eb;
  --primary: #0f766e;          /* 唯一强调：主按钮、焦点环、侧栏激活 */
  --gold: var(--primary);
  --gold-soft: #14b8a6;
  --gold-deep: #115e59;
  --gold-wash: rgba(15, 118, 110, 0.10);
  --gold-wash-strong: rgba(15, 118, 110, 0.18);
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --nav-bg: #ffffff;
  --nav-elev: #f5f6f8;
  --nav-text: #6b7280;
  --nav-hover: #f3f4f6;
  --nav-accent: #0f766e;
  --nav-active-bg: rgba(15, 118, 110, 0.08);
  --success: #059669;
  --success-wash: rgba(5, 150, 105, 0.10);
  --success-wash-strong: rgba(5, 150, 105, 0.18);
  --warning: #d97706;          /* 语义警告，非第二主题色 */
  --danger: #dc2626;
  --danger-wash: rgba(220, 38, 38, 0.10);
  --danger-wash-strong: rgba(220, 38, 38, 0.18);
  /* Toast：实底白卡，不用半透明晕染 */
  --toast-ok-bg: #ffffff;
  --toast-err-bg: #ffffff;
  --scroll-thumb: #c5ccd4;
  --scroll-thumb-hover: #a8b0ba;
  --tag-bg: #eef1f4;
  --btn-disabled-bg: #9ca3af;
  --btn-disabled-border: #9ca3af;
  --btn-disabled-text: #ffffff;
  --mask: rgba(17, 24, 39, 0.32);
  --shadow-md: 0 12px 32px rgba(17, 24, 39, 0.08);
  --grid-line: #eef0f3;
  --stripe: #fafafa;
  --row-hover: #f0fdfa;
  --stats-bg: #fafafa;
  --stats-label-bg: #f0fdfa;
  /* 动效：略长 + 减速缓出，避免 EP 默认曲线偏「甩一下」 */
  --dur: 0.28s;
  --dur-fast: 0.18s;
  --dur-nav: 0.36s;
  --dur-overlay: 0.4s;
  --ease-ep: cubic-bezier(0.22, 1, 0.36, 1);           /* 通用减速 */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);         /* 抽屉滑入更顺 */
  --ease-panel: cubic-bezier(0.16, 1, 0.3, 1);           /* Dialog/Modal 起浮 */
  /* 全站直角，不用圆角 */
  --radius: 0;
  --radius-lg: 0;
  --font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side-w: 228px;
  --switcher-h: 0px; /* 站级顶栏已取消；规范/案例切换走工作台标签 */
  --top-h: 48px;
  --ws-tab-h: 40px;
  --flyout-item-h: 36px;
  --flyout-panel-w: 192px; /* L3/L4 单行约 10 汉字；超出省略 */
  --flyout-side-gap: 0px;
  --btn-h: 28px;                     /* 标准钮：工具栏 / 弹层 footer / 页级主操作 */
  --btn-h-sm: 22px;                  /* 第二高度：表内、页内密控；与页码格同高 */
  --btn-fs: 12px;
  /* 表格行高：表头与表体必须同高（对齐弹层示例嵌入表 / 按钮矩阵） */
  --row-h: 36px;
  --drawer-w: 78vw;
  --dialog-w: 400px; /* 确认卡：只提示语，留白适中 */
  --modal-w-sm: 520px;
  --modal-w-md: 640px;
  --modal-w-lg: 760px;
  /* 产品字号只 4 档；KPI 另用 display，禁止再加中间档 */
  --fs-caption: 11px;   /* 表头 / 元信息 */
  --fs-ctrl: 12px;      /* 按钮 / 标签 / hint / Tab */
  --fs-body: 13px;      /* 正文 / 表单元格 / 弹层说明 / 表单值 */
  --fs-title: 14px;     /* 区块 / Modal / Drawer / Dialog 标题 */
  --fs-display: 22px;   /* 仅 KPI 数值 */
  --lh-tight: 1.35;
  --lh-body: 1.5;

  /* ── 间距阶梯：只允许 4/8/12/16/24/32（2 仅按钮 CJK 光学底） ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* 语义：壳组件引用；业务页禁止再写魔法边距 */
  --page-pad-x: var(--space-4);      /* 内容区左右 */
  --page-pad-y: var(--space-3);      /* 内容区顶 */
  --stack-gap: var(--space-3);       /* 模块与模块 */
  --card-pad-y: var(--space-3);      /* 卡片/模块内上下 */
  --card-pad-x: var(--space-4);      /* 卡片/模块内左右 */
  --toolbar-pad-y: var(--space-3);   /* 列表工具栏上下 */
  --toolbar-pad-x: var(--space-4);   /* 列表工具栏左右 */
  --overlay-pad-y: var(--space-3);   /* Dialog/Modal/Drawer 头尾/体 */
  --overlay-pad-x: var(--space-4);
  --footer-pad-y: var(--space-2);    /* 列表底栏更紧：8 */
  --footer-pad-x: var(--space-4);
  --pager-h: var(--btn-h-sm);        /* 页码格 = 第二控件高 22 */
  --cell-pad-x: var(--space-3);      /* 表格单元格左右 */
  --cell-clip-en: 40;                /* 英文字段最大字符数（截断由 JS） */
  --cell-clip-zh: 20;                /* 中文字段最大字符数（截断由 JS） */
  --btn-pad-x: var(--space-3);
  --btn-gap: var(--space-2);         /* 按钮组 */
  --field-gap: var(--space-2);       /* 筛选字段 */
  --inline-gap: var(--space-2);      /* 行内图标/标签 */
  --section-gap: var(--space-5);     /* 大分段 */
  --form-row-gap: var(--space-3);    /* 表单行距 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-nav: 0.01ms;
    --dur-overlay: 0.01ms;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body, .app, .main, .page-body, .list-shell {
  /* 禁止触控板/触屏左滑被 Chrome/Safari 当成历史后退（宽表横移会丢筛选与标签） */
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--pearl);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
button, input, select { font-family: inherit; }
a { color: var(--ink); }
.link {
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.link:hover { text-decoration: underline; color: var(--ink); }
.link--id { font-weight: 600; } /* SKU 等标识：黑 + 粗，非橙色 */
.link--danger { color: var(--danger); font-weight: 500; }
.link--danger:hover { color: #b91c1c; }

/*
 * 嵌入设计系统工作台标签时：
 * - yj-embed：占满 iframe（无站级顶栏）
 * - yj-embed--main：再藏掉案例内产品侧栏/顶栏/工作台标签，只留主内容
 *   （所有案例在设计系统工作台标签内均用 --main；侧栏/顶栏由外壳统一提供）
 */
html.yj-embed .page-switcher { display: none !important; }
html.yj-embed--main .side,
html.yj-embed--main .topbar,
html.yj-embed--main .ws-tabs {
  display: none !important;
}
html.yj-embed--main .app {
  height: 100vh;
  min-width: 0;
  grid-template-columns: 1fr; /* 无侧栏占位 */
}
html.yj-embed--main .main {
  width: 100%;
  min-width: 0;
}
html.yj-embed--main .page-body {
  height: 100vh;
}
/* 独立打开案例时：回设计系统；嵌入工作台标签时隐藏 */
.case-back {
  font-size: var(--fs-ctrl);
  color: var(--muted);
  text-decoration: none;
  margin-right: var(--space-3);
  white-space: nowrap;
}
.case-back:hover { color: var(--ink); text-decoration: underline; }
html.yj-embed .case-back { display: none !important; }

/*
 * iframe 弹层盖住产品壳时：iframe 全屏透明；.app 钉在原内容区矩形，
 * 列表仍在；导航/顶栏透过透明区可见；遮罩与抽屉盖在最上层。
 */
html.yj-overlay-cover,
html.yj-overlay-cover body {
  background: transparent !important;
}
html.yj-overlay-cover .app {
  position: fixed !important;
  left: var(--yj-embed-app-left, 0) !important;
  top: var(--yj-embed-app-top, 0) !important;
  width: var(--yj-embed-app-width, 100%) !important;
  height: var(--yj-embed-app-height, 100%) !important;
  margin: 0 !important;
  min-width: 0 !important;
  z-index: 0 !important;
  overflow: auto !important;
  visibility: visible !important;
}
html.yj-overlay-cover .yj-drawer-root,
html.yj-overlay-cover .yj-overlay-root {
  z-index: 1100;
}
html.yj-overlay-cover .yj-toast-host {
  z-index: 1400;
}

/* ── Buttons（两档高度 · 类型可叠） ──
 * 高度：默认 --btn-h 28（页级）· .btn-sm → --btn-h-sm 22（表内/密控，= 页码高）
 * 类型：Primary | Default | Ghost | Danger-text
 * 非编辑控件：内容水平 + 垂直居中（对称 padding，禁止偏底光学补丁）
 * 正向/负面结果：用 Tag / Toast / 文案，禁止绿/红实心钮
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  box-sizing: border-box;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius);
  font-size: var(--btn-fs);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  transition: background .12s, border-color .12s, color .12s, filter .12s;
  user-select: none;
  white-space: nowrap;
}
/* 第二高度：与 --pager-h 同值；用于表格内、Drawer/详情密区等页内场景 */
.btn.btn-sm {
  height: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
  padding: 0 var(--space-2);
  font-size: var(--fs-caption);
  gap: var(--space-1);
}
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Default · 可操作次要 */
.btn-default {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-default:hover:not(:disabled) { background: var(--page-bg); }
.btn-default:active:not(:disabled) { background: #ebebe6; }
.btn-default:disabled {
  color: var(--muted-2);
  background: var(--surface);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}

/* Primary · 可操作主操作（每工具栏/footer ≤1） */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) { filter: brightness(0.88); }
.btn-primary:active:not(:disabled) { filter: brightness(0.82); }
.btn-primary:disabled {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  filter: none;
  opacity: 1; /* 灰底白字，不用半透明琥珀 */
}
/* Quiet · 实心次要（Dialog 取消等；色系灰，非第二主题） */
.btn-quiet {
  background: var(--muted-2);
  color: #fff;
  border-color: var(--muted-2);
}
.btn-quiet:hover:not(:disabled) { filter: brightness(0.92); }
.btn-quiet:active:not(:disabled) { filter: brightness(0.86); }
.btn-quiet:disabled {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
  filter: none;
  opacity: 1;
}
/* Loading：三点闪动 =「处理中」
 * 用 margin 居中，只做 opacity 动画（绝不把 translate 和 rotate 叠在 transform 里） */
.btn.is-loading {
  --yj-dot: 4px;
  --yj-dot-step: 7px; /* 点心到点心间距 */
  --yj-dot-color: #fff;
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn.btn-sm.is-loading {
  --yj-dot: 3px;
  --yj-dot-step: 6px;
}
.btn-default.is-loading,
.btn-ghost.is-loading {
  --yj-dot-color: var(--ink);
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--yj-dot);
  height: var(--yj-dot);
  margin-top: calc(var(--yj-dot) / -2);
  margin-left: calc(var(--yj-dot) / -2);
  border-radius: 50%;
  background: var(--yj-dot-color);
  box-shadow:
    calc(var(--yj-dot-step) * -1) 0 0 var(--yj-dot-color),
    var(--yj-dot-step) 0 0 var(--yj-dot-color);
  animation: yj-dots 1s ease-in-out infinite;
}
@keyframes yj-dots {
  0%,
  100% { opacity: 0.28; }
  50% { opacity: 1; }
}

/* Ghost · 轻操作 */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--gold-wash);
  color: var(--ink);
}
.btn-ghost:disabled {
  color: var(--muted-2);
  cursor: not-allowed;
  opacity: 1;
}

/* Danger · 仅文字链（负面操作入口）；确认钮仍用 Primary
 * 仍走 .btn 固定高 + flex 居中，勿 height:auto 破坏对齐 */
.btn-danger-text {
  background: transparent;
  color: var(--danger);
  border-color: transparent;
  box-shadow: none;
}
.btn-danger-text:hover:not(:disabled) { color: #b91c1c; }
.btn-danger-text:disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
  padding: 0 var(--space-2);
  border-radius: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--ink); /* 标签字一律墨色，靠底区分状态 */
  background: var(--tag-bg);
}
.tag--gold { background: var(--tag-bg); color: var(--ink); }
.tag--ok { background: var(--success-wash); color: var(--ink); }
.tag--warn { background: var(--gold-wash); color: var(--ink); }
.tag--muted { background: var(--tag-bg); color: var(--ink); }
.tag--danger { background: var(--danger-wash); color: var(--ink); }

/* ── App shell: L1+L2 侧栏 + main ── */
.app {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  height: calc(100vh - var(--switcher-h));
  min-width: 1100px;
}
.side {
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 40;
  border-right: 1px solid var(--border);
}
.side-brand {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  flex-shrink: 0;
}
.side-brand .mark {
  width: 32px; height: 32px; border-radius: 0; flex-shrink: 0;
  background: var(--primary);
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 15px; font-weight: 700;
}
.side-brand span {
  font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
}
.side-menu {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2) var(--space-5);
}
.nav-l1 {
  margin-bottom: 4px;
}
.nav-l1__hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--nav-text);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  position: relative;
  transition: background-color var(--dur) var(--ease-ep), color var(--dur) var(--ease-ep);
}
.nav-l1__hd:hover { background: var(--nav-hover); color: var(--ink); }
.nav-l1.open > .nav-l1__hd,
.nav-l1.active > .nav-l1__hd {
  color: var(--nav-accent);
  background: var(--nav-active-bg);
  font-weight: 600;
}
.nav-l1.active > .nav-l1__hd::before {
  content: "";
  position: absolute;
  left: 0; top: var(--space-3); bottom: var(--space-3); width: 3px;
  background: var(--primary);
}
.nav-l1__hd .ico {
  width: 22px; text-align: center; font-size: 16px; opacity: 0.9; flex-shrink: 0;
}
.nav-l1__hd .chev {
  margin-left: auto; font-size: 11px; opacity: 0.5;
  transition: transform var(--dur-nav) var(--ease-ep), opacity var(--dur-nav) var(--ease-ep);
}
.nav-l1.open > .nav-l1__hd .chev { transform: rotate(90deg); opacity: 0.8; }
/* L2 高度折叠（grid 0fr→1fr）+ 透明度，禁止 display 硬切 */
.nav-l2-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-nav) var(--ease-ep);
}
.nav-l1.open > .nav-l2-wrap { grid-template-rows: 1fr; }
.nav-l2 {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 var(--space-2);
  opacity: 0;
  transition:
    opacity var(--dur-nav) var(--ease-ep),
    padding var(--dur-nav) var(--ease-ep);
}
.nav-l1.open > .nav-l2-wrap .nav-l2 {
  padding: var(--space-1) 0 var(--space-2) var(--space-2);
  opacity: 1;
}
.nav-l2__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  /* 左 32：对齐 L1 图标列后的文字起点 */
  padding: 0 var(--space-3) 0 var(--space-6);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--nav-text);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  user-select: none;
  transition: background-color var(--dur) var(--ease-ep), color var(--dur) var(--ease-ep);
}
.nav-l2__item:hover,
.nav-l2__item.flyout-open {
  background: var(--nav-hover);
  color: var(--ink);
}
.nav-l2__item.active {
  color: var(--nav-accent);
  background: var(--nav-active-bg);
  font-weight: 600;
}
.nav-l2__item.active:hover,
.nav-l2__item.active.flyout-open {
  background: var(--nav-active-bg);
  color: var(--nav-accent);
}
/* 当前项：左侧小三角 + primary 浅底 */
.nav-l2__item.active::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--primary);
  transform: translateY(-50%);
}
.nav-l2__item .arrow {
  margin-left: auto; font-size: 11px; opacity: 0.45;
}

/* ── Cascade flyout L3+L4（对齐 qn：负 margin 贴紧，禁止露白缝） ── */
.flyout {
  position: fixed;
  z-index: 1000;
  display: none;
}
.flyout.show { display: block; }
.flyout-cascade {
  /* 与 qn 一致：flex gap + 后级负 margin 对消 → 边框叠成一条缝，不会嵌进上一级 */
  --flyout-inner-gap: 4px;
  display: flex;
  align-items: flex-start;
  gap: var(--flyout-inner-gap);
  background: transparent;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.10));
  max-height: min(480px, calc(100vh - 24px));
}
.flyout-panel {
  width: var(--flyout-panel-w);
  flex: 0 0 var(--flyout-panel-w);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0;
  overflow-y: auto;
  border-radius: 0;
  margin: 0;
  max-height: min(480px, calc(100vh - 24px));
  box-sizing: border-box;
}
/* gap 4 + margin-left -4 = 净距 0，双边框重叠成一条竖缝 */
.flyout-panel + .flyout-panel {
  position: relative;
  margin-left: calc(-1 * var(--flyout-inner-gap));
  z-index: 1;
}
.flyout-panel + .flyout-panel::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--flyout-inner-gap));
  top: 0;
  width: var(--flyout-inner-gap);
  height: 100%;
}
.flyout-item {
  height: var(--flyout-item-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-text);
  cursor: pointer;
  position: relative;
}
.flyout-item > span:not(.dot):not(.arrow) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flyout-item:hover,
.flyout-item.active {
  color: var(--nav-accent);
  background: var(--nav-active-bg);
}
.flyout-item.active { font-weight: 600; }
.flyout-item .dot {
  width: 5px; height: 5px; border-radius: 0;
  background: currentColor; opacity: 0.45; flex-shrink: 0;
}
.flyout-item.active .dot { opacity: 1; background: var(--primary); }
.flyout-item .arrow {
  flex-shrink: 0;
  margin-left: auto; font-size: 11px; opacity: 0.45;
}
.flyout-item.has-child.open {
  background: var(--nav-active-bg);
  color: var(--nav-accent);
  font-weight: 600;
}

/* ── Main column ── */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--pearl);
}
.topbar {
  height: var(--top-h);
  background: var(--surface);
  /* 底边交给下方标签栏，避免双线 */
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
}
.crumb { font-size: 12px; color: var(--muted); }
.crumb b { color: var(--ink); font-weight: 600; }
.topbar .spacer { flex: 1; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 0;
  border: none; background: transparent;
  cursor: pointer; color: var(--muted); display: grid; place-items: center;
}
.icon-btn:hover { color: var(--ink); background: var(--tag-bg); }
.avatar {
  width: 28px; height: 28px; border-radius: 0;
  background: var(--primary);
  color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* ── 工作台标签：灰底轨道 + 白卡片选中 + 关闭 ×（与页内切面必须区分） ── */
.ws-tabs {
  height: var(--ws-tab-h);
  background: var(--tag-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px 0;
  flex-shrink: 0;
  overflow-x: auto;
}
.ws-tab {
  height: 32px;
  margin: 0;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  top: 1px; /* 压住轨道底边，避免选中卡与内容区分出双线 */
}
.ws-tab:hover { color: var(--ink); background: rgba(255,255,255,.45); }
.ws-tab.on {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  box-shadow: none;
}
.ws-tab .x {
  width: 16px; height: 16px; border-radius: 0;
  display: grid; place-items: center;
  font-size: 11px; color: var(--muted-2); opacity: 0.7;
  flex-shrink: 0;
}
.ws-tab .x:hover { background: var(--tag-bg); color: var(--ink); opacity: 1; }
.ws-tabs-hint {
  margin-left: var(--space-3);
  align-self: center;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.page-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: var(--page-pad-y) var(--page-pad-x) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

/* 页内切面（In-page · L4）—— 胶囊段控，无关闭，贴内容；禁止做成工作台白卡片 */
.page-segment {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  flex-shrink: 0;
  width: fit-content;
}
.page-segment button {
  height: 24px;
  padding: 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.page-segment button:hover { color: var(--ink); }
.page-segment button.on {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--border);
}

.case-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: var(--fs-ctrl);
  color: var(--ink);
  flex-shrink: 0;
}
.case-note b { color: var(--ink); font-weight: 600; }
.case-note .pair {
  display: inline-flex; align-items: center; gap: var(--inline-gap);
}

/* ── List shell · 左筛选 / 右操作（参考 qn-table-bar） ── */
.list-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  /* 完整描边白底：表头～表体～底栏同一块白，避免左侧「开口」贴页底 */
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.table-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--toolbar-pad-y) var(--toolbar-pad-x);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.table-bar-left {
  flex: 1;
  min-width: 0;
}
.table-bar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  margin-left: auto;
  padding-top: 0;
}
.filter-fields {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--field-gap);
  overflow-x: auto;
  align-items: center;
  max-height: 28px;
  transition: max-height .22s ease;
}
.list-shell.is-expanded .filter-fields {
  flex-wrap: wrap;
  overflow-x: visible;
  max-height: 200px;
  row-gap: var(--field-gap);
}
.field {
  display: flex;
  align-items: center;
  gap: var(--inline-gap);
  font-size: var(--fs-ctrl);
  color: var(--ink);
  flex-shrink: 0;
}
.field input,
.field select {
  box-sizing: border-box;
  width: 108px;
  height: var(--btn-h);
  min-height: var(--btn-h);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 var(--space-2);
  font-size: var(--fs-ctrl);
  line-height: 1;
  background: var(--surface);
  color: var(--ink);
  vertical-align: middle;
}
.field input.wide { width: 148px; }
/* 日期/时间：WebKit 内部编辑区与日历图标须垂直居中，与筛选钮/下拉同高 28 */
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="time"],
.field input[type="month"],
.field input[type="week"] {
  display: inline-flex;
  align-items: center;
  width: 138px;
  padding: 0 var(--space-2);
  line-height: normal;
  color-scheme: light;
}
.field input[type="datetime-local"] {
  width: 188px;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="datetime-local"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit,
.field input[type="month"]::-webkit-datetime-edit,
.field input[type="week"]::-webkit-datetime-edit {
  display: inline-flex;
  align-items: center;
  padding: 0;
  height: 100%;
  line-height: 1;
}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="month"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="week"]::-webkit-datetime-edit-fields-wrapper {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.field input[type="date"]::-webkit-datetime-edit-text,
.field input[type="datetime-local"]::-webkit-datetime-edit-text,
.field input[type="time"]::-webkit-datetime-edit-text {
  padding: 0 1px;
  line-height: 1;
}
.field input[type="date"]::-webkit-datetime-edit-year-field,
.field input[type="date"]::-webkit-datetime-edit-month-field,
.field input[type="date"]::-webkit-datetime-edit-day-field,
.field input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.field input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.field input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.field input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.field input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.field input[type="time"]::-webkit-datetime-edit-hour-field,
.field input[type="time"]::-webkit-datetime-edit-minute-field {
  padding: 0;
  line-height: 1;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="month"]::-webkit-calendar-picker-indicator,
.field input[type="week"]::-webkit-calendar-picker-indicator {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 0 0 auto;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  align-self: center;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-wash);
}
.filter-extra {
  display: none;
}
.list-shell.is-expanded .filter-extra {
  display: flex;
  animation: filterIn .18s ease;
}
@keyframes filterIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-h);
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-ctrl);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.expand-btn:hover { text-decoration: underline; }

.table-scroll {
  flex: 1;
  min-height: 0;
  /*
   * 横向必须是可滚动容器（auto 而非 hidden）：Chrome 对 overflow-x:hidden 的区域
   * 不把触控板左滑交给 JS，直接当成浏览器后退。系统横条高度 0，视觉仍只用 .table-hscroll。
   */
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.table-scroll::-webkit-scrollbar { width: 10px; height: 0; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}
/* 自定义横向滚动条：与竖向同色中性灰 */
.table-hscroll {
  flex-shrink: 0;
  height: 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: none;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.table-hscroll.is-overflow {
  display: block;
}
.table-hscroll-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  min-width: 48px;
  background: var(--scroll-thumb);
  cursor: grab;
}
.table-hscroll-thumb:hover,
.table-hscroll-thumb.is-dragging {
  background: var(--scroll-thumb-hover);
  cursor: grabbing;
}
table.data {
  border-collapse: separate;
  border-spacing: 0;
  /* 宽度标准：占满滚动容器；列多时 max-content 横向溢出，由 .table-scroll 承接 */
  width: max-content;
  min-width: 100%;
  font-size: var(--fs-body);
}
table.data th,
table.data td {
  box-sizing: border-box;
  height: var(--row-h);
  padding: 0 var(--cell-pad-x);
  border-bottom: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  min-width: 96px;
  line-height: var(--lh-tight);
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease-ep);
}
table.data th.fix-l,
table.data td.fix-l { min-width: 120px; }
table.data th.fix-r,
table.data td.fix-r { min-width: 110px; }
table.data th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* 白表头（U7）；靠底边 + 竖线分区 */
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
/* 可排序表头 */
table.data th.sortable {
  cursor: pointer;
  user-select: none;
}
table.data th.sortable:hover {
  color: var(--primary);
  background: var(--row-hover);
}
table.data th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
table.data th .sort {
  display: inline-flex;
  flex-direction: column;
  width: 10px;
  height: 14px;
  justify-content: center;
  gap: 1px;
  opacity: 0.35;
  flex-shrink: 0;
}
table.data th .sort i {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
table.data th .sort .up { border-bottom: 4px solid currentColor; }
table.data th .sort .down { border-top: 4px solid currentColor; }
table.data th.is-asc .sort,
table.data th.is-desc .sort { opacity: 1; color: var(--primary); }
table.data th.is-asc .sort .down { opacity: 0.25; }
table.data th.is-desc .sort .up { opacity: 0.25; }
/* 斑马纹 */
table.data tbody tr:nth-child(even) td { background: var(--stripe); }
table.data tbody tr:nth-child(even) td.fix-l,
table.data tbody tr:nth-child(even) td.fix-r { background: var(--stripe); }
table.data tbody tr:hover td { background: var(--row-hover); }
table.data tbody tr:hover td.fix-l,
table.data tbody tr:hover td.fix-r { background: var(--row-hover); }
table.data tr.selected td { background: var(--gold-wash); }
table.data tr.selected td.fix-l,
table.data tr.selected td.fix-r { background: var(--gold-wash); }
table.data .fix-l {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 4px 0 8px rgba(17, 24, 39, 0.04);
}
table.data th.fix-l {
  z-index: 3;
  background: var(--surface);
}
table.data .fix-r {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface);
  box-shadow: -4px 0 8px rgba(17, 24, 39, 0.04);
  text-align: center;
}
table.data th.fix-r {
  z-index: 3;
  background: var(--surface);
}
/* 统计行：同表 tfoot，竖线与列对齐 */
table.data tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--stats-bg);
  border-top: 1px solid var(--border);
  border-bottom: none;
  border-right: 1px solid var(--grid-line);
  font-size: var(--fs-ctrl);
  font-weight: 500;
  color: var(--ink);
}
table.data tfoot td.stats-label,
table.data tfoot td.col-check.stats-label {
  background: var(--stats-label-bg);
  color: var(--primary);
  font-weight: 600;
  text-align: center;
}
table.data tfoot td.is-muted { color: var(--muted-2); font-weight: 400; }
table.data tfoot td.fix-l {
  z-index: 3;
  background: var(--stats-bg);
}
table.data tfoot td.fix-l.stats-label { background: var(--stats-label-bg); }
table.data tfoot td.fix-r {
  z-index: 3;
  background: var(--stats-bg);
}
table.data tfoot td strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 选择列：窄列标准件（覆盖 fix-l / 单元格 min-width 96） */
table.data th.col-check,
table.data td.col-check {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  text-align: center;
  box-sizing: border-box;
}
table.data .col-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--primary);
  cursor: pointer;
}

.list-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--footer-pad-y) var(--footer-pad-x);
  border-top: 1px solid var(--border);
  /* 页底灰，与白表体区分 */
  background: var(--page-bg);
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: var(--lh-tight);
  flex-shrink: 0;
}
.list-footer .spacer { flex: 1; }
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--pager-h);
  height: var(--pager-h);
  padding: 0 var(--space-1);
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.pager button:hover { border-color: var(--ink); color: var(--ink); }
/* 当前页：墨色描边加粗，不用 primary 引导色 */
.pager button.on {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}

/* ── 列表内「列配置」侧板（非产品级 Drawer） ── */
.col-drawer-mask {
  position: absolute; inset: 0; background: var(--mask);
  z-index: 40; display: none;
}
.col-drawer-mask.show { display: block; }
.col-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 320px;
  background: var(--surface); z-index: 50; box-shadow: var(--shadow-md);
  display: none; flex-direction: column; border-left: 1px solid var(--border);
}
.col-drawer.show { display: flex; }
.col-drawer__head {
  padding: var(--overlay-pad-y) var(--overlay-pad-x); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; font-weight: 600; font-size: 14px;
}
.col-drawer__head .spacer { flex: 1; }
.col-drawer__body { flex: 1; overflow: auto; padding: var(--space-3) var(--space-4); }
.col-drawer__foot {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
  background: var(--page-bg);
  display: flex; justify-content: flex-end; gap: 8px;
}
.col-item {
  display: flex; align-items: center; gap: 8px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--space-2); background: var(--pearl); font-size: 12px; cursor: grab;
}
.col-item .handle { color: var(--muted-2); letter-spacing: -2px; }

/* ═══ 弹层体系：Dialog · Modal · Drawer（对齐 qn；不做 Popover） ═══ */

/* 遮罩根 · visibility（禁 display 硬切，才能拍 opacity / 起浮） */
.yj-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.yj-overlay-root.show {
  visibility: visible;
  pointer-events: auto;
}
.yj-overlay-root--center {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.yj-overlay-root--image {
  padding: 0;
}
.yj-overlay-root--image .yj-mask {
  background: rgba(17, 24, 39, 0.86);
}
.yj-mask {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  padding: 0;
  background: var(--mask);
  cursor: pointer;
}
.yj-overlay-root .yj-mask {
  opacity: 0;
  transition: opacity var(--dur-overlay) var(--ease-ep);
}
.yj-overlay-root.show .yj-mask { opacity: 1; }

/* Dialog · 仅提示语（无标题）+ 居中双钮；留白适中 */
.yj-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--dialog-w);
  max-height: min(80vh, 520px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: var(--space-5) var(--space-5) var(--space-4);
  gap: var(--space-4);
  /* 只用 opacity：禁止 transform，否则会搞坏层内 position:fixed 的 yj-select */
  opacity: 0;
  transition: opacity var(--dur-overlay) var(--ease-panel);
}
.yj-overlay-root.show .yj-dialog {
  opacity: 1;
}
/* 禁止标题栏 / icon：只保留提示语 */
.yj-dialog__head,
.yj-dialog__title,
.yj-dialog__icon {
  display: none !important;
}
.yj-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  text-align: center;
}
.yj-dialog__message {
  margin: 0;
  max-width: 22em;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
}
.yj-dialog__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
.yj-dialog__foot .btn {
  min-width: 96px;
}

/* Modal · 短表单 CRUD · 520 / 640 / 760 */
.yj-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--modal-w-sm);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* 只用 opacity：禁止 transform，否则会搞坏层内 position:fixed 的 yj-select */
  opacity: 0;
  transition: opacity var(--dur-overlay) var(--ease-panel);
}
.yj-overlay-root.show .yj-modal {
  opacity: 1;
}
.yj-modal--md { max-width: var(--modal-w-md); }
.yj-modal--lg { max-width: var(--modal-w-lg); }
/* JSON 只读：760 Modal · 缩进折叠；盖在 Drawer 之上 */
.yj-overlay-root--json {
  z-index: 1300;
}
.yj-modal--json {
  box-sizing: border-box;
  width: var(--modal-w-lg);
  max-width: 100%;
}
.yj-json {
  font-family: var(--mono);
  font-size: var(--fs-ctrl);
  line-height: 1.5;
  color: var(--ink);
}
.yj-json__line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 24px;
  padding-left: calc(var(--d, 0) * 16px);
}
.yj-json__toggle {
  width: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  line-height: 1.5;
  text-align: center;
}
span.yj-json__toggle {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}
.yj-json__pair {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.yj-json__key {
  color: var(--ink-2);
}
.yj-json__idx {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.yj-json__punct,
.yj-json__meta,
.yj-json__bool,
.yj-json__null {
  color: var(--muted);
  flex-shrink: 0;
}
.yj-json__str {
  color: var(--ink);
  word-break: break-all;
}
.yj-json__num {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.yj-json__raw {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
}
/* 表格图片：全屏看图（小于屏幕用原图；大于则缩小适配；100% 为原图像素；退出必须有 ✕） */
.yj-modal--image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.yj-modal--image__stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}
.yj-modal--image__img {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.yj-modal--image.is-zoomed .yj-modal--image__img {
  cursor: grab;
}
.yj-modal--image.is-zoomed .yj-modal--image__img:active {
  cursor: grabbing;
}
.yj-modal--image__tools {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: rgba(17, 24, 39, 0.72);
  pointer-events: auto;
  transform: translateX(-50%);
}
.yj-modal--image__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: var(--fs-ctrl);
  line-height: 1;
}
.yj-modal--image__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.yj-modal--image__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.yj-modal--image__pct {
  min-width: 32px;
  color: #fff;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.yj-modal--image .yj-modal__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  color: #fff;
  pointer-events: auto;
}
.yj-modal--image .yj-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.yj-modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--overlay-pad-y) var(--overlay-pad-x);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.yj-modal__title {
  margin: 0;
  flex: 1;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.yj-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: var(--fs-ctrl);
  line-height: 1;
  text-align: center;
}
.yj-modal__close:hover { color: var(--ink); background: var(--page-bg); }
.yj-modal__body {
  padding: var(--card-pad-y) var(--card-pad-x);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.yj-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: var(--space-2) var(--overlay-pad-x);
  border-top: 1px solid var(--border);
  background: var(--page-bg);
  flex-shrink: 0;
}
.yj-form-row { margin-bottom: var(--form-row-gap); }
.yj-form-row:last-child { margin-bottom: 0; }
.yj-form-row label {
  display: block;
  font-size: var(--fs-ctrl);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: var(--lh-tight);
}
.yj-form-row label .req { color: var(--danger); margin-right: 2px; }
.yj-form-row input,
.yj-form-row select,
.yj-form-row textarea {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  border-radius: 0;
  line-height: var(--lh-tight);
}
.yj-form-row textarea {
  height: 56px;
  padding: var(--space-2);
  resize: vertical;
  line-height: var(--lh-body);
}
/* 长文输入（提示词等）：仍走本行的字号与边框，只放高 */
.yj-form-row textarea.is-lg { height: 320px; }
.yj-form-row input:focus,
.yj-form-row select:focus,
.yj-form-row textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--gold-wash);
}

/* ── 设置类表单页（非列表页；.list-shell 白底描边内的表单体） ──
 * 用法：.list-shell > .form-page > .yj-form-row… + .form-page__foot
 * 满宽不居中（U8）：靠控件自身定宽收窄，不给容器加阅读栏 max-width
 */
.form-page {
  padding: var(--card-pad-y) var(--card-pad-x);
  overflow-y: auto;
}
.form-page .yj-form-row input,
.form-page .yj-form-row select {
  width: 360px;
  max-width: 100%;
}
.form-page__hint {
  margin-top: var(--space-1);
  font-size: var(--fs-ctrl);
  color: var(--ink-2);
}
.form-page__foot {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── 下拉 Select（直角定制，禁止系统圆角菜单） ──
 * 用法：<select class="yj-select">…</select> + wantjoin-select.js
 * 高度两档（与按钮对齐）：默认 --btn-h 28 · .yj-select-sm → --btn-h-sm 22
 * 增强后结构：.yj-select > trigger + menu + native[hidden]
 */
.field .yj-select,
.yj-form-row .yj-select {
  width: 100%;
  max-width: 100%;
}
.field > .yj-select { width: 108px; }
.yj-select {
  /* 触发器与选项共用同一套字号 / 行高 / 左右内边距，保证观感一致 */
  --yj-select-h: var(--btn-h);
  --yj-select-pad-x: 8px;
  --yj-select-chev-slot: 22px; /* 右侧箭头槽 */
  --yj-select-chev-size: 5px;  /* 箭头几何边长（两档都偏小，避免压过文字） */
  --yj-select-chev-stroke: 1.25px;
  position: relative;
  display: inline-block;
  min-width: 108px;
  vertical-align: middle;
  font-family: var(--font);
  font-size: var(--fs-ctrl);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
/* 第二高度：表内、底栏旁、页内密控；与 .btn-sm / 页码同高 */
.yj-select.yj-select-sm {
  --yj-select-h: var(--btn-h-sm);
  --yj-select-chev-slot: 20px;
  --yj-select-chev-size: 4px;
  --yj-select-chev-stroke: 1px;
  font-size: var(--fs-caption);
}
.yj-select.is-block { display: block; width: 100%; }
.yj-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}
.yj-select__trigger {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: var(--yj-select-h);
  min-height: var(--yj-select-h);
  /* 文案左齐（可读）；右侧留箭头槽；上下对称 padding 保证垂直居中 */
  padding: 0 var(--yj-select-chev-slot) 0 var(--yj-select-pad-x);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: inherit;
  font: inherit;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.yj-select__trigger:hover { border-color: #d4d4cc; }
.yj-select.is-open .yj-select__trigger,
.yj-select__trigger:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--gold-wash);
}
.yj-select.is-disabled .yj-select__trigger {
  background: var(--page-bg);
  color: var(--muted-2);
  cursor: not-allowed;
}
.yj-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}
.yj-select__value.is-placeholder { color: var(--muted); }
/* 箭头：槽内 flex 真正居中；用 ::before 画小 V，避免旋转盒视觉重心偏下 */
.yj-select__chev {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--yj-select-chev-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.5;
  color: inherit;
}
.yj-select__chev::before {
  content: "";
  box-sizing: border-box;
  width: var(--yj-select-chev-size);
  height: var(--yj-select-chev-size);
  border-right: var(--yj-select-chev-stroke) solid currentColor;
  border-bottom: var(--yj-select-chev-stroke) solid currentColor;
  /* 几何中心略上移 0.5px，抵消 border-V 视觉偏下 */
  transform: translateY(-0.5px) rotate(45deg);
}
.yj-select.is-open .yj-select__chev::before {
  /* 朝上：同样做光学补偿 */
  transform: translateY(0.5px) rotate(225deg);
}
.yj-select__menu {
  /* fixed：避免筛选栏 overflow 裁切；宽度由 JS 与触发器像素对齐 */
  box-sizing: border-box;
  position: fixed;
  z-index: 1400;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(var(--yj-select-h) * 8);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-md);
  display: none;
  font: inherit;
  color: inherit;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.yj-select.is-open .yj-select__menu { display: block; }
.yj-select__option {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: var(--yj-select-h);
  min-height: var(--yj-select-h);
  /* 左内边距与触发器文案对齐；右侧留出与箭头槽同宽；垂直居中 */
  padding: 0 var(--yj-select-chev-slot) 0 var(--yj-select-pad-x);
  display: flex;
  align-items: center;
  font: inherit;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yj-select__option:hover,
.yj-select__option.is-active {
  background: var(--page-bg);
}
.yj-select__option.is-selected {
  /* 选中只靠底色，不加粗，与触发器展示文字一致 */
  font-weight: 400;
  background: var(--gold-wash);
}
.yj-select__option.is-selected:hover,
.yj-select__option.is-selected.is-active {
  background: var(--gold-wash);
}
.yj-select__option.is-disabled {
  color: var(--muted-2);
  cursor: not-allowed;
}
/* 表格单元格内：强制小档高度（即使忘写 yj-select-sm） */
.yj-embed-table--edit .yj-select {
  --yj-select-h: var(--btn-h-sm);
  --yj-select-chev-slot: 20px;
  --yj-select-chev-size: 4px;
  --yj-select-chev-stroke: 1px;
  width: 100%;
  min-width: 0;
  display: block;
  font-size: var(--fs-caption);
}
.yj-embed-table--edit .yj-select__trigger {
  height: var(--yj-select-h);
  background: var(--surface);
  border-color: var(--border);
}
/* 未增强时的原生兜底（仍直角触发器；展开菜单因系统限制可能仍圆角） */
select.yj-select:not([data-yj-enhanced]) {
  --yj-select-h: var(--btn-h);
  appearance: none;
  -webkit-appearance: none;
  height: var(--yj-select-h);
  padding: 0 var(--space-6) 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  /* 原生兜底箭头：缩小并垂直居中 */
  background-position: calc(100% - 11px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: var(--fs-ctrl);
  cursor: pointer;
}
select.yj-select.yj-select-sm:not([data-yj-enhanced]),
.yj-embed-table--edit select.yj-select:not([data-yj-enhanced]) {
  --yj-select-h: var(--btn-h-sm);
  font-size: var(--fs-caption);
}
select.yj-select:not([data-yj-enhanced]):focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--gold-wash);
}

/* Drawer · 右滑 78vw · translateX + 遮罩 fade（禁止 display 硬切） */
.yj-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}
.yj-drawer-root.show {
  visibility: visible;
  pointer-events: auto;
}
.yj-drawer-root .yj-mask {
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-overlay) var(--ease-ep);
}
.yj-drawer-root.show .yj-mask { opacity: 1; }
.yj-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(17, 24, 39, 0.12);
  z-index: 1;
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-overlay) var(--ease-drawer);
  will-change: transform;
}
.yj-drawer-root.show .yj-drawer { transform: translate3d(0, 0, 0); }
/* 内容略晚于面板淡入；关闭时无 delay，跟着面板一起收 */
.yj-drawer__head,
.yj-drawer__body {
  opacity: 0;
  transition: opacity 0.22s var(--ease-ep);
}
.yj-drawer-root.show .yj-drawer__head,
.yj-drawer-root.show .yj-drawer__body {
  opacity: 1;
  transition-delay: 0.08s;
}
.yj-drawer__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--overlay-pad-y) var(--overlay-pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.yj-drawer__title {
  margin: 0;
  flex: 1;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.yj-drawer__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.yj-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  font-size: var(--fs-ctrl);
  line-height: 1;
  text-align: center;
}
.yj-drawer__close:hover { color: var(--ink); background: var(--page-bg); }
.yj-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: var(--page-bg);
}
.yj-drawer-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-3);
}
.yj-drawer-panel + .yj-drawer-panel { margin-top: 8px; }
.yj-drawer-panel h4 {
  margin: 0 0 8px;
  font-size: var(--fs-ctrl);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.yj-drawer-panel p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* 弹层内折叠区 · 标题栏常驻 · 高度折叠 grid 1fr→0fr（禁止 display 硬切） */
.yj-fold {
  background: var(--surface);
  border: 1px solid var(--border);
}
.yj-fold + .yj-fold { margin-top: 8px; }
.yj-fold__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--row-h);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--grid-line);
  transition: border-color var(--dur-nav) var(--ease-ep);
}
.yj-fold.is-collapsed > .yj-fold__head { border-bottom-color: transparent; }
.yj-fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  cursor: pointer;
}
.yj-fold__chev {
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur-nav) var(--ease-ep);
}
.yj-fold.is-collapsed .yj-fold__chev { transform: rotate(-45deg); }
.yj-fold__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.yj-fold__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.yj-fold__wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-nav) var(--ease-ep);
}
.yj-fold.is-collapsed > .yj-fold__wrap { grid-template-rows: 0fr; }
.yj-fold__body {
  overflow: hidden;
  min-height: 0;
  padding: var(--space-3);
  transition: padding var(--dur-nav) var(--ease-ep);
}
.yj-fold.is-collapsed > .yj-fold__wrap .yj-fold__body { padding-top: 0; padding-bottom: 0; }

/* 报告正文区 · 只用字号四档；表格继承嵌入表视觉但按内容撑高（例外见 UI-GUIDE §5.5） */
.yj-doc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.yj-doc > :first-child { margin-top: 0; }
.yj-doc__note {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-ctrl);
  color: var(--ink-2);
  line-height: var(--lh-body);
}
.yj-doc h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.yj-doc h4 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.yj-doc p { margin: 0 0 var(--space-2); }
.yj-doc ul,
.yj-doc ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
}
.yj-doc li { margin: 0 0 var(--space-1); }
.yj-doc strong { font-weight: 600; }
.yj-doc table {
  width: 100%;
  margin: var(--space-2) 0;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--surface);
}
.yj-doc th,
.yj-doc td {
  box-sizing: border-box;
  height: auto;
  padding: var(--space-2) var(--cell-pad-x);
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  text-align: left;
  vertical-align: top;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  word-break: break-word;
}
.yj-doc thead th {
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  white-space: nowrap;
}
.yj-doc tbody tr:nth-child(even) td { background: var(--stripe); }
.yj-doc tbody tr:hover td { background: var(--row-hover); }
.yj-doc td.cell-int,
.yj-doc td.cell-decimal,
.yj-doc td.cell-money,
.yj-doc td.cell-rate,
.yj-doc th.cell-int,
.yj-doc th.cell-decimal,
.yj-doc th.cell-money,
.yj-doc th.cell-rate {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 行内「更多」· Ghost 触发 + 直角菜单（非 select） */
.yj-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.yj-more__trigger {
  height: auto;
  min-height: 0;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  cursor: pointer;
}
.yj-more__trigger:hover { text-decoration: underline; }
.yj-more__trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.yj-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 120px;
  padding: var(--space-1) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: none;
}
.yj-more.is-open .yj-more__menu { display: block; }
.yj-more.is-drop-up .yj-more__menu {
  top: auto;
  bottom: calc(100% + 4px);
}
table.data tbody tr:has(.yj-more.is-open) td.fix-r {
  z-index: 4;
}
.yj-more__item {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-ctrl);
  text-align: left;
  cursor: pointer;
  line-height: 32px;
}
.yj-more__item:hover { background: var(--page-bg); }
.yj-more__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.yj-more__item--danger { color: var(--danger); }
.yj-more__item--danger:hover { background: var(--danger-wash); }
.yj-more__sep {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border);
}
.op-cell,
.cell-actions {
  white-space: nowrap;
  text-align: right;
  font-size: var(--fs-ctrl);
  font-weight: 500;
}
.op-cell .link,
.cell-actions .link {
  font-size: var(--fs-ctrl);
  font-weight: 500;
}
.op-cell .link + .yj-more::before,
.op-cell .link + .link::before,
.cell-actions .link + .yj-more::before,
.cell-actions .link + .link::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--muted-2);
  font-weight: 400;
  text-decoration: none;
  pointer-events: none;
}
.op-cell .yj-more,
.cell-actions .yj-more { margin-left: 0; }

/*
 * 表格单元格语义类型（list-shell / embed 共用）
 * 字号不另开档：正文 13 · 操作/控件 12 · 状态 Tag 11；数字一律 tabular-nums + 右对齐
 */
.cell-int,
.cell-decimal,
.cell-money,
.cell-rate {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.cell-int,
.cell-decimal,
.cell-rate {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink);
}
.cell-money,
.cell-money--cny,
.cell-money--usd {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}
.cell-money.is-neg,
.cell-money--neg,
.cell-decimal.is-neg,
.cell-int.is-neg {
  color: var(--danger);
}
table.data td.cell-mismatch,
.yj-embed-table td.cell-mismatch {
  color: var(--danger);
}
.cell-text {
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
}
.cell-clip {
  display: inline;
  cursor: default;
  white-space: nowrap;
}
.cell-clip[data-clip-full] {
  cursor: pointer;
}
.cell-muted {
  /* 正常正文仍用墨色；仅略降对比，不作灰字体系 */
  color: var(--ink);
  opacity: 0.72;
}
.cell-status {
  text-align: left;
}
.cell-status .tag {
  vertical-align: middle;
}

/* 日期 / 日期时间：左齐 · tabular · 格式运行时写入 */
.cell-date,
.cell-datetime {
  font-size: var(--fs-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: left;
  color: var(--ink);
}

/* 编码 / 条码：等宽 · 不可点（可点主键用 link--id） */
.cell-code {
  font-family: var(--mono);
  font-size: var(--fs-ctrl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: left;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* 图片列：32×32 直角；完整缩略图（contain，禁止裁切一角） */
.cell-thumb {
  text-align: left;
  width: 52px;
  min-width: 52px !important;
  max-width: 56px;
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}
.cell-thumb__btn {
  display: block;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.cell-thumb__img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  background-color: var(--page-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: 0;
}
.cell-thumb__open {
  font-size: var(--fs-ctrl);
  font-weight: 500;
}
.cell-thumb__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}

/* 人员：头像 20 + 名 */
.cell-user {
  text-align: left;
}
.cell-user__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  vertical-align: middle;
}
.cell-user__avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--page-bg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  line-height: 1;
}
.cell-user__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cell-user__name {
  font-size: var(--fs-body);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多标签：间隙 4；溢出 +N */
.cell-tags {
  text-align: left;
}
.cell-tags__list {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}
.cell-tags__list .tag {
  flex-shrink: 0;
}
.cell-tags__more {
  flex-shrink: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}

/* 布尔：是/否用 Tag，不用裸 ✓ */
.cell-bool {
  text-align: left;
}
.cell-bool .tag {
  vertical-align: middle;
}

/* 表头/表体与列类型对齐（压过 fix-r 的 center） */
table.data th.cell-int,
table.data td.cell-int,
table.data th.cell-decimal,
table.data td.cell-decimal,
table.data th.cell-money,
table.data td.cell-money,
table.data th.cell-money--cny,
table.data td.cell-money--cny,
table.data th.cell-money--usd,
table.data td.cell-money--usd,
table.data th.cell-rate,
table.data td.cell-rate,
table.data th.cell-actions,
table.data td.cell-actions,
.yj-embed-table th.cell-int,
.yj-embed-table td.cell-int,
.yj-embed-table th.cell-decimal,
.yj-embed-table td.cell-decimal,
.yj-embed-table th.cell-money,
.yj-embed-table td.cell-money,
.yj-embed-table th.cell-money--cny,
.yj-embed-table td.cell-money--cny,
.yj-embed-table th.cell-money--usd,
.yj-embed-table td.cell-money--usd,
.yj-embed-table th.cell-rate,
.yj-embed-table td.cell-rate,
.yj-embed-table th.cell-actions,
.yj-embed-table td.cell-actions {
  text-align: right;
}
table.data th.cell-thumb,
table.data td.cell-thumb,
.yj-embed-table th.cell-thumb,
.yj-embed-table td.cell-thumb {
  text-align: left;
  min-width: 52px !important;
}

/* 空态 / 加载 / 页错误 */
.yj-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--ink);
}
.yj-state__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.yj-state__desc {
  margin: 0;
  max-width: 360px;
  font-size: var(--fs-ctrl);
  color: var(--muted);
  line-height: var(--lh-body);
}
.yj-state__actions {
  display: flex;
  gap: var(--btn-gap);
  margin-top: var(--space-2);
}
.yj-state--inline {
  min-height: 120px;
  padding: var(--space-4);
}
.yj-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-ctrl);
  color: var(--muted);
}
.yj-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: yj-spin 0.7s linear infinite;
}
@keyframes yj-spin { to { transform: rotate(360deg); } }
.list-shell.is-loading .table-scroll {
  position: relative;
  min-height: 160px;
}
.list-shell.is-loading .table-scroll::after {
  content: "加载中…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-ctrl);
  color: var(--muted);
  z-index: 2;
}

/* ── 页内嵌入表：整表两种模式（--view | --edit），勿混用 ──
 * 行高与列表主表共用 --row-h；表头与数据必须同高，禁止 th/td 各算一套 padding */
.yj-embed-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  background: var(--surface);
}
.yj-embed-table th,
.yj-embed-table td {
  box-sizing: border-box;
  height: var(--row-h);
  padding: 0 var(--cell-pad-x);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yj-embed-table th {
  background: var(--page-bg);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.yj-embed-table .tag {
  height: 20px;
  padding: 0 var(--space-2);
  font-size: var(--fs-caption);
  vertical-align: middle;
}

/* 整表 · 查看 */
.yj-embed-table--view td {
  color: var(--ink);
  background: var(--surface);
}
.yj-embed-table--view .cell-muted {
  /* 正常正文仍用墨色；仅略降对比，不作灰字体系 */
  color: var(--ink);
  opacity: 0.72;
}
.yj-embed-table--view tbody tr:hover td {
  background: #fafaf7;
}

/* 整表 · 编辑：tbody 格内一律控件（不可改列用 disabled） */
.yj-embed-table--edit td {
  padding: 0 var(--space-2);
  background: #fffefb;
}
.yj-embed-table--edit .cell-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--btn-h-sm);
  margin: 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-caption);
  line-height: calc(var(--btn-h-sm) - 2px);
  color: var(--ink);
  border-radius: 0;
}
.yj-embed-table--edit .cell-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--gold-wash);
}
.yj-embed-table--edit .cell-input:disabled {
  background: var(--page-bg);
  color: var(--muted);
  border-color: transparent;
  cursor: default;
}
.yj-embed-table--edit select.cell-input {
  cursor: pointer;
}
.yj-embed-table__caption {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-ctrl);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.yj-embed-table__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--ink);
  line-height: var(--lh-tight);
  opacity: 0.65;
}

/* Toast · 视口顶中（fixed）· 实底白卡 + 加粗左色条 + 语义图标 */
.yj-toast-host {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - var(--space-8));
}
.yj-toast {
  --toast-bar: 8px;
  box-sizing: border-box;
  position: relative;
  min-width: 200px;
  max-width: 320px;
  min-height: 44px;
  padding: 0 var(--space-4) 0 calc(var(--space-3) + var(--toast-bar));
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(17, 24, 39, 0.04),
    0 12px 32px rgba(17, 24, 39, 0.12);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}
.yj-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--toast-bar);
  background: var(--border);
}
.yj-toast--ok { background: var(--toast-ok-bg); }
.yj-toast--ok::before { background: var(--success); }
.yj-toast--err { background: var(--toast-err-bg); }
.yj-toast--err::before { background: var(--danger); }
/* 勾 / ×：线框小标；图标底也用实色，不用 rgba 晕 */
.yj-toast__icon {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 0;
  border: 1px solid currentColor;
  background: #ffffff;
}
.yj-toast--ok .yj-toast__icon {
  color: var(--success);
  border-color: var(--success);
}
.yj-toast--err .yj-toast__icon {
  color: var(--danger);
  border-color: var(--danger);
}
.yj-toast__text {
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.content-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0 24px;
}
.content-panel h2 {
  margin: 0 0 8px;
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--ink);
}
.content-panel p {
  margin: 0 0 12px;
  font-size: var(--fs-body);
  color: var(--ink);
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.cap {
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--card-pad-y) var(--card-pad-x);
  background: var(--surface);
  font-size: 12px;
}
.cap b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--fs-ctrl);
  font-weight: 600;
}

/* ── 图表 · 曲线 / 柱 / 饼 ── */
.yj-chart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--card-pad-y) var(--card-pad-x) var(--space-2);
}
.yj-chart__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 4px;
  min-height: 24px;
}
.yj-chart__title {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-tight);
  margin-right: auto;
}
.yj-chart__legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-ctrl);
  color: var(--ink);
}
.yj-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-gap);
}
.yj-chart__legend-item i {
  width: 12px;
  height: 2px;
  background: var(--primary);
  flex-shrink: 0;
}
.yj-chart__legend-item i.is-bar {
  width: 8px;
  height: 8px;
}
.yj-chart__legend-item i.is-swatch {
  width: 8px;
  height: 8px;
}
.yj-chart__legend-item em {
  font-style: normal;
  color: var(--muted);
  margin-left: 2px;
}
.yj-chart__body {
  width: 100%;
  position: relative;
}
.yj-chart__body--pie {
  display: flex;
  align-items: center;
  justify-content: center;
}
.yj-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.yj-chart__dot {
  pointer-events: none;
}
.yj-chart__dot.is-active {
  r: 5;
}
.yj-chart__bar {
  transition: opacity 0.12s ease;
}
.yj-chart__slice {
  transition: opacity 0.12s ease;
}
.yj-chart__tip {
  position: absolute;
  z-index: 5;
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  font-size: var(--fs-ctrl);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.yj-chart__tip-title {
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.yj-chart__tip-row {
  display: flex;
  align-items: center;
  gap: var(--inline-gap);
  margin-top: 4px;
}
.yj-chart__tip-row i {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.yj-chart__tip-row span { flex: 1; color: var(--ink); }
.yj-chart__tip-row b { font-weight: 600; }