/* ==============================================================
 * 设计系统
 *   原则：靠边线和层次区分，而不是靠阴影和渐变；
 *        强调色只出现在「可以点」和「需要注意」的地方。
 * ============================================================== */
:root {
  /* 强制浅色时，原生控件（下拉、滚动条、日期选择器）也要跟着浅 */
  color-scheme: light;

  /* 表面 */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --surface-3: #f3f5f7;

  /* 边线 */
  --line: #e9ebef;
  --line-strong: #dcdfe5;

  /* 文字：四级灰阶，而不是「黑 + 一个灰」 */
  --ink: #15181d;
  --ink-2: #4a515b;
  --ink-3: #6b7280;
  --ink-4: #9aa2ad;

  /* 强调色：比品牌绿压深一档，更适合大面积浅色背景 */
  --accent: #0b7a4b;
  --accent-h: #096840;
  --accent-weak: #eaf5f0;
  --accent-ink: #0a6440;

  /* 语义色 */
  --danger: #c0392b;
  --danger-weak: #fdf3f2;
  --warn: #96631a;
  --warn-weak: #fdf4e3;
  --info: #2b5fa8;
  --info-weak: #eaf1fc;

  /* 圆角：三档，别每处都不一样 */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* 阴影：只用于「浮起来的东西」（弹窗、Toast），平面一律用边线 */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, .05), 0 10px 28px -14px rgba(16, 24, 40, .16);
  --shadow-pop: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 3px 10px rgba(16, 24, 40, .06);

  --ring: 0 0 0 3px rgba(11, 122, 75, .14);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- 语义 token：这些是深色模式要翻转的部分 ---- */
  --chrome-bg: rgba(255, 255, 255, .86);
  --hover-line: #c8cdd6;
  --accent-active: #075537;
  --link: var(--accent);
  --link-h: var(--accent-h);

  --badge-bg: #f1f3f6;
  --badge-ink: #5c646e;
  --chip-bg: #f2f4f7;
  --chip-ink: #4c5563;

  --c-amount-bg: #fdf1e5;  --c-amount-ink: #9c5713;
  --c-date-bg: #ecf2fd;    --c-date-ink: #2b5fa8;
  --c-person-bg: #f1edfd;  --c-person-ink: #5340a0;
  --c-version-bg: #f2effd; --c-version-ink: #57429f;

  --track: #edeff3;
  --track-hover: #cfd7e0;
  --dot: #c4cad3;
  --avatar-bg: #dfe4ea;

  --danger-line: #eed6d3;
  --danger-line-h: #e5c2be;
  --warn-line: #f0dfbb;
  --warn-ink: #7d5413;

  --toast-bg: #1b1f26;
  --toast-err: #8f2d22;
  --toast-ok: #0a6440;

  --mask-bg: rgba(17, 20, 26, .42);
  --scrim: rgba(16, 20, 26, .38);
  --dialog-line: rgba(255, 255, 255, .6);
  --code-bg: rgba(0, 0, 0, .055);
  --brand-wash: rgba(11, 122, 75, .05);
  --accent-tint: rgba(11, 122, 75, .12);
  --accent-bar: rgba(11, 122, 75, .55);
  --overlay: rgba(16, 20, 26, .5);
  --sel: rgba(11, 122, 75, .16);
  --scroll-thumb: #ccd1d9;
  --scroll-thumb-h: #b3b9c2;
  --sk-hi: rgba(255, 255, 255, .6);

  /* ---- 兼容别名：HTML / JS 里有内联引用，别删 ---- */
  --sub: var(--ink-3);
  --red: var(--danger);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  /* Segoe UI 放在最前：Windows 上拉丁字母和数字会明显更利落，
     macOS 没有该字体时自动落到 -apple-system */
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; transition: color .14s var(--ease); }
a:hover { color: var(--link-h); text-decoration: none; }

h1, h2, h3 { letter-spacing: -.02em; }
h1 { text-wrap: balance; }

/* ---------------- 全局细节 ---------------- */
::selection { background: var(--sel); }

* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-h); background-clip: content-box; }

/* 键盘焦点才显示焦点环，鼠标点击不显示 —— 这条是「精致感」的分水岭 */
:where(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:where(input, textarea):focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- 顶栏 ---------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 24px;
  background: var(--chrome-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; letter-spacing: -.02em; }
.nav .brand .logo {
  width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nav .crumb { color: var(--ink-3); font-size: 12.5px; }
.nav .spacer { flex: 1; }
.nav .who { color: var(--ink-3); font-size: 12.5px; }

/* ---------------- 布局 ---------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 24px; }
.page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; margin: 0; font-weight: 600; letter-spacing: -.025em; }
.page-head .sub { color: var(--ink-3); font-size: 12.5px; }
.page-head .spacer { flex: 1; }

.grid { display: grid; gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 18px;
}
.card.tight { padding: 0; overflow: hidden; }
.card h2 { font-size: 14px; margin: 0 0 12px; font-weight: 600; letter-spacing: -.015em; }
.card h2 .hint { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 8px; letter-spacing: 0; }
.doc-insights-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr); gap: 24px; }
.doc-insights-grid b, .doc-insights-modules b { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 7px; }
.doc-insights-grid p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.doc-insights-grid small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 3px; }
.doc-insights-modules { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.doc-insights-foot { margin: 14px 0 0; }
.doc-insights-card, #generateCard { scroll-margin-top: 80px; }
.doc-review-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); }
.doc-review-top strong { display: block; color: var(--ink); font-size: 14px; }
.doc-review-top p { margin: 3px 0 0; color: var(--ink-3); font-size: 12px; }
.doc-review-top .btn { flex: none; min-height: 38px; }
.doc-review-help { margin: 9px 0 20px; color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.doc-review-alert { margin-bottom: 18px; padding: 11px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-weak); color: var(--warn-ink); font-size: 12px; }
.doc-review-alert strong { font-size: 12.5px; }
.doc-review-alert ul, .doc-source-warnings { margin: 6px 0 0; padding-left: 18px; }
.doc-review-alert li + li, .doc-source-warnings li + li { margin-top: 3px; }
.doc-review-alert small { display: block; margin-top: 7px; }
.doc-more-modules { margin-top: 9px; }
.doc-more-modules .chips { margin-top: 8px; }
.doc-insights-events { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.doc-insights-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.doc-insights-section-head b { margin: 0; font-size: 12px; color: var(--ink-2); }
.doc-insights-section-head span { color: var(--ink-3); font-size: 11.5px; }
.doc-event-list { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.doc-event-row { display: grid; grid-template-columns: 95px 94px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.doc-event-row:last-child { border-bottom: 0; }
.doc-event-row time { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.doc-event-row strong { display: block; color: var(--ink); font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.doc-event-row small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.doc-event-row small span::before { content: ' · '; }
.doc-event-status { width: fit-content; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-3); color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.doc-event-status.planned { background: var(--info-weak); color: var(--info); }
.doc-event-status.done, .doc-event-status.observed { background: var(--accent-weak); color: var(--accent-ink); }
.doc-more-events { margin-top: 10px; }
.doc-more-events .doc-event-list { margin-top: 6px; }
.doc-more-events summary, .doc-more-modules summary, .doc-source-details summary { width: fit-content; cursor: pointer; color: var(--accent-ink); font-size: 12px; font-weight: 500; }
.doc-more-events summary:focus-visible, .doc-more-modules summary:focus-visible, .doc-source-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.doc-source-details { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.doc-source-details > div { margin-top: 10px; }
.doc-source-row { display: flex; align-items: baseline; gap: 8px 16px; justify-content: space-between; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--line); }
.doc-source-row:last-child { border-bottom: 0; }
.doc-source-row strong { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.doc-source-row small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11px; overflow-wrap: anywhere; }
.doc-source-row > span { flex: none; color: var(--ink-3); font-size: 11px; }
.doc-source-warnings { flex: 1 1 100%; color: var(--warn); font-size: 11.5px; }
@media (max-width: 700px) {
  .doc-insights-grid { grid-template-columns: 1fr; gap: 14px; }
  .doc-review-top { align-items: stretch; flex-direction: column; }
  .doc-review-top .btn { min-height: 44px; }
  .doc-event-row { grid-template-columns: 1fr auto; gap: 3px 8px; }
  .doc-event-row > div { grid-column: 1 / -1; }
}

/* 零散的真实进展：明确区分手动补充与下方文档上传 */
.progress-card { padding: 22px 24px; }
.progress-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.progress-card-kicker { display: block; margin-bottom: 5px; color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.progress-card .progress-card-head h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.progress-card-optional { flex: none; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); color: var(--ink-3); font-size: 11px; }
.progress-card-explain { max-width: 76ch; margin: 12px 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.progress-card-doc-tip { margin: 0; padding: 11px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; line-height: 1.6; }
.progress-card-doc-tip a { margin: 0 2px; color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.progress-card-doc-tip a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.progress-note-field { margin-top: 20px; }
.progress-note-field label { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; color: var(--ink); font-size: 13px; font-weight: 600; }
.progress-note-field label span { color: var(--ink-3); font-size: 11.5px; font-weight: 400; }
.progress-note-field textarea.input { display: block; width: 100%; min-height: 154px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13.5px; line-height: 1.75; }
.progress-note-field textarea.input:focus { background: var(--surface); }
.progress-note-field textarea.input::placeholder { color: var(--ink-3); }
.progress-note-field p { margin: 7px 0 0; color: var(--ink-3); font-size: 11.5px; }
.progress-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.progress-card-footer span { color: var(--ink-3); font-size: 12px; }
.progress-card-footer span[data-state="dirty"] { color: var(--warn); }
.progress-card-footer span[data-state="saved"] { color: var(--accent-ink); }
.progress-card-footer span[data-state="error"] { color: var(--danger); }
.progress-card-footer .btn { min-width: 104px; height: 36px; }
@media (max-width: 620px) {
  .progress-card { padding: 18px; }
  .progress-card-footer { align-items: stretch; flex-direction: column; }
  .progress-card-footer .btn { width: 100%; min-height: 44px; }
}

/* 项目生成：先呈现两项主要选择，其余参数按需展开 */
.generator-card { margin-bottom: 16px; padding: 22px 24px 18px; }
.generator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.generator-card .generator-head h2 { font-size: 18px; line-height: 1.35; margin: 0 0 5px; }
.generator-head p { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.generator-mark {
  flex: none; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--ink-3); background: var(--surface-2); font-size: 11.5px;
}
.generator-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .42fr); gap: 24px; align-items: stretch; }
.generator-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.generator-controls .field { min-width: 0; margin: 0; }
.generator-controls .select { width: 100%; }
.generator-help { min-height: 35px; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.generator-source {
  min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface-2);
}
.generator-source b { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; }
.generator-source p { margin: 0 0 9px; color: var(--ink-3); font-size: 11.5px; line-height: 1.55; }
.generator-source .btn { height: 27px; padding: 0 8px; font-size: 11.5px; }
.generator-advanced { margin-top: 18px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.generator-advanced summary { width: fit-content; color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; }
.generator-advanced summary:hover { color: var(--accent-ink); }
.generator-advanced summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.generator-advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 16px; }
.generator-advanced-grid .field { margin: 0; min-width: 0; }
.generator-advanced-grid .input, .generator-advanced-grid .select { width: 100%; }
.generator-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 17px; }
.generator-footer span { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.generator-footer .btn { min-width: 184px; height: 38px; }
.generator-footer #genSnapshotsBtn { min-width: 0; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.preview-group { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; min-width: 0; }
.preview-group b { font-size: 13px; }
.preview-group ul { margin: 8px 0 0; padding-left: 18px; max-height: 120px; overflow: auto; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.preview-group small { color: var(--sub); }
.snapshot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 11px 0; }
.snapshot-row span { min-width: 0; }
.snapshot-row small { display: block; color: var(--sub); margin-top: 3px; }
.backup-guide { margin-top: 14px; padding: 12px 14px; background: var(--surface-2, rgba(127,127,127,.07)); border-radius: 8px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.backup-guide code { user-select: all; }
.generator-progress { margin-top: 16px; }
.generator-progress-text { margin-top: 6px; color: var(--ink-3); font-size: 12px; }
.generator-result:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 1040px) {
  .generator-main { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 620px) {
  .preview-grid { grid-template-columns: 1fr; }
  .generator-card { padding: 18px; }
  .generator-head { margin-bottom: 16px; }
  .generator-controls, .generator-advanced-grid { grid-template-columns: 1fr; }
  .generator-help { min-height: 0; }
  .generator-footer { align-items: stretch; flex-direction: column; }
  .generator-footer .btn { width: 100%; min-height: 44px; }
}

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease), box-shadow .14s var(--ease);
}
.btn:hover { border-color: var(--hover-line); background: var(--surface-2); }
.btn:active { background: var(--surface-3); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn.primary:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.btn.primary:active { background: var(--accent-active); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--ink); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn.danger:hover { background: var(--danger-weak); border-color: var(--danger-line-h); color: var(--danger); }
.btn.sm { height: 27px; padding: 0 9px; font-size: 12px; border-radius: var(--r-xs); }
.btn.block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { background: var(--surface); border-color: var(--line-strong); }
.btn.primary[disabled]:hover, .btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; letter-spacing: .01em; }
.input, .select, textarea.input {
  height: 34px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); outline: none;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.input::placeholder, textarea.input::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, textarea.input:hover { border-color: var(--hover-line); }
textarea.input { height: auto; min-height: 76px; padding: 8px 11px; resize: vertical; line-height: 1.65; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent); box-shadow: var(--ring);
}
.input:disabled, .select:disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
body[data-page="settings"] .model-control { display: flex; gap: 8px; min-width: 0; }
body[data-page="settings"] .model-control .input,
body[data-page="settings"] .model-control .select { flex: 1; min-width: 0; }
body[data-page="settings"] #fModel[hidden] { display: none; }
body[data-page="settings"] #modelChoices[hidden] { display: none; }
body[data-page="settings"] #modelMsg:empty { display: none; }
@media (max-width: 700px) {
  body[data-page="settings"] .row { flex-direction: column; gap: 0; }
}

/* ---------------- 徽章 / 标签 ---------------- */
.badge {
  display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  background: var(--badge-bg); color: var(--badge-ink);
}
.b-draft { background: var(--badge-bg); color: var(--badge-ink); }
.b-ready { background: var(--warn-weak); color: var(--warn); }
.b-generating { background: var(--info-weak); color: var(--info); }
.b-generated { background: var(--accent-weak); color: var(--accent-ink); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 8px;
  border-radius: var(--r-xs); background: var(--chip-bg); color: var(--chip-ink); font-size: 11.5px;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.k-amount { background: var(--c-amount-bg); color: var(--c-amount-ink); }
.chip.k-date { background: var(--c-date-bg); color: var(--c-date-ink); }
.chip.k-person { background: var(--c-person-bg); color: var(--c-person-ink); }
.chip.k-feature { background: var(--accent-weak); color: var(--accent-ink); }
.chip.k-version { background: var(--c-version-bg); color: var(--c-version-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------- 统计 ---------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
}
.stat .n {
  font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.stat .l { color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }

/* ---------------- 项目卡 ---------------- */
.project-card { display: flex; flex-direction: column; gap: 12px; }
.project-card .top { display: flex; align-items: flex-start; gap: 10px; }
.project-card .name { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.project-card .client { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.project-card .meta { display: flex; gap: 14px; color: var(--ink-3); font-size: 12px; flex-wrap: wrap; }
.project-card .meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.project-card .actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

/* ---------------- 表格 ---------------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.table th {
  color: var(--ink-3); font-weight: 500; font-size: 11.5px; letter-spacing: .02em;
  background: var(--surface-2); white-space: nowrap;
}
.table tr:last-child td { border-bottom: 0; }
.table td.num { font-variant-numeric: tabular-nums; }
.table.hover tbody tr { transition: background .12s var(--ease); }
.table.hover tbody tr:hover { background: var(--surface-2); }
.table td .cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table td .cell .t { font-weight: 500; }
.table td .cell .m { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.table td .ops { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  border: 0; background: transparent; padding: 9px 12px; font: inherit; font-size: 13.5px;
  color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.tabs button:hover { color: var(--ink-2); }
.tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.panel { display: none; }
.panel.on { display: block; }

/* ---------------- 进度条 ---------------- */
.bar { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  transition: width .4s var(--ease);
}

/* ---------------- 对话框 ---------------- */
.mask {
  position: fixed; inset: 0; background: var(--mask-bg);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  z-index: 100; padding: 20px; animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.dialog {
  background: var(--surface); border-radius: var(--r-xl); width: 100%; max-width: 520px;
  box-shadow: var(--shadow-pop); border: 1px solid var(--dialog-line);
  animation: pop .2s var(--ease); max-height: 86vh; display: flex; flex-direction: column;
}
.dialog.small { max-width: 380px; }
.dialog.wide { max-width: 760px; }
@keyframes pop {
  from { transform: translateY(6px) scale(.99); opacity: 0 }
  to { transform: none; opacity: 1 }
}
.dialog-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 14px; letter-spacing: -.015em;
}
.dialog-body { padding: 18px 20px; overflow: auto; }
.dialog-foot {
  padding: 13px 20px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ---------------- Toast ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 10px);
  background: var(--toast-bg); color: #fff; padding: 9px 15px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 200; box-shadow: var(--shadow-pop);
  max-width: min(560px, calc(100vw - 40px));
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--toast-err); }
#toast.ok { background: var(--toast-ok); }

/* ---------------- 空状态 ---------------- */
.empty { text-align: center; padding: 46px 20px; color: var(--ink-3); font-size: 13px; }
.empty .big { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }

/* ---------------- 登录 ---------------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 480px at 50% -12%, var(--brand-wash), transparent 70%),
    var(--bg);
}
.login-card { width: 352px; padding: 28px; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.login-card .logo {
  width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 18px;
  background: var(--accent); color: #fff; margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.login-card h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.025em; }
.login-card p { color: var(--ink-3); font-size: 12.5px; margin: 0 0 20px; }

/* ---------------- 时间线 ---------------- */
.gantt .phase .shift { display: inline-flex; gap: 4px; margin-left: 8px; flex: none; }
.gantt .phase .shift button {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-3);
  font: inherit; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: var(--r-xs);
  cursor: pointer; transition: .13s var(--ease);
}
.gantt .phase .shift button:hover { border-color: var(--accent); color: var(--accent); }
.gantt .phase .shift button:disabled { opacity: .4; cursor: default; }
.gantt .phase .shift button:disabled:hover { border-color: var(--line-strong); color: var(--ink-3); }

.note {
  margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line); border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.7;
}
.note b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; font-size: 12.5px; }
.note-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.est-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.est-head b { font-size: 15px; letter-spacing: -.02em; }
.est-head span { color: var(--ink-3); font-size: 12px; }
.est-basis { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.est-basis > div {
  display: flex; gap: 10px; padding: 7px 11px; font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.est-basis > div:last-child { border-bottom: 0; }
.est-basis span { color: var(--ink-3); flex: none; width: 86px; }
.est-basis em { font-style: normal; color: var(--ink); }

.gantt { display: flex; flex-direction: column; gap: 7px; }
.gantt .phase { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; font-size: 12px; }
.gantt .phase .name { color: var(--ink-3); }
.gantt .phase .track { position: relative; height: 20px; background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden; }
.gantt .phase .track > i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--accent-bar); }
.gantt .phase .track > span {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: 10.5px; font-variant-numeric: tabular-nums;
}

.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--line-strong); }
.timeline .item { position: relative; padding: 5px 0 13px; }
.timeline .item::before {
  content: ''; position: absolute; left: -17px; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot); border: 2px solid var(--surface);
}
.timeline .item.hi::before { background: var(--accent); }
.timeline .item .t { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.timeline .item .d { font-size: 13px; }

/* ---------------- 文档列表 ---------------- */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row .ico {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--surface-3); flex: none;
}
.ftype {
  font-size: 10px; font-weight: 600; letter-spacing: .2px; padding: 2px 5px; border-radius: 4px;
  border: 1px solid transparent;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.doc-row .info { flex: 1; min-width: 0; }
.doc-row .fname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .fmeta { color: var(--ink-3); font-size: 11.5px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 142px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 22px;
  text-align: center; color: var(--ink-3); font-size: 12.5px; cursor: pointer; margin-bottom: 14px;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.dropzone strong { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.dropzone small { color: var(--ink-3); font-size: 11.5px; }
.dropzone:hover, .dropzone.over, .document-upload-card.over .dropzone {
  border-color: var(--accent); background: var(--accent-weak); color: var(--accent-ink);
}
.dropzone:hover strong, .dropzone.over strong, .document-upload-card.over .dropzone strong { color: var(--accent-ink); }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.document-upload-card { transition: border-color .15s var(--ease); }
.document-upload-card.over { border-color: var(--accent); }

/* ---------------- 成员卡 ---------------- */
.member { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member .av {
  width: 42px; height: 42px; border-radius: var(--r-md); background: var(--avatar-bg) center/cover no-repeat;
  display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; cursor: pointer; position: relative;
}
.member .av:hover::after {
  content: '换'; position: absolute; inset: 0; background: var(--overlay); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; border-radius: var(--r-md);
}
.member .info { flex: 1; min-width: 0; }
.member .n { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.member .r { color: var(--ink-3); font-size: 12px; }
.member .ops { display: flex; gap: 6px; }

/* ---------------- 会话卡 ---------------- */
.conv-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.conv-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.conv-card .ico {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent-weak);
  display: grid; place-items: center; color: var(--accent-ink); flex: none;
}
.conv-card .info { flex: 1; min-width: 0; }
.conv-card .t { font-weight: 500; font-size: 13.5px; }
.conv-card .m {
  color: var(--ink-3); font-size: 11.5px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 760px) {
  .wrap { padding: 16px; }
  .nav { padding: 0 14px; gap: 10px; }
  .nav .who, .nav .crumb { display: none; }
  .page-head h1 { font-size: 17px; }
}

/* ---------------- 账号 / 口令 ---------------- */
#accountSlot { display: flex; align-items: center; gap: 8px; }
#accountSlot .who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pwd-banner {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin: 0 0 16px; padding: 10px 13px; border-radius: var(--r-md);
  background: var(--warn-weak); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 12.5px;
}
.pwd-banner code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.dialog .err {
  display: none; margin: -4px 0 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--danger-weak); border: 1px solid var(--danger-line); color: var(--danger); font-size: 12px;
}
.dialog .hint { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.65; }
.dialog .input[disabled] { background: var(--surface-3); color: var(--ink-3); }

/* 登录 / 初始化页 */
.login-card .err {
  display: none; margin: -4px 0 12px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--danger-weak); border: 1px solid var(--danger-line); color: var(--danger); font-size: 12px;
}
.login-card .hint { font-size: 12px; line-height: 1.65; margin: 14px 0 0; }
.login-card .hint code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 640px) {
  #accountSlot { gap: 6px; }
  #accountSlot .btn { padding: 0 8px; }
  .pwd-banner { flex-wrap: wrap; }
}

/* ==============================================================
 * 管理台外壳：左侧导航 + 顶栏 + 内容区
 * ============================================================== */
body.app { display: flex; min-height: 100vh; background: var(--bg); }

.sidebar {
  width: 228px; flex: 0 0 228px; height: 100vh; position: sticky; top: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  transition: width .18s var(--ease), flex-basis .18s var(--ease);
}
.side-brand {
  height: 56px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--line); overflow: hidden;
}
.side-brand .logo {
  width: 27px; height: 27px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.side-brand .t { font-weight: 600; font-size: 14px; white-space: nowrap; letter-spacing: -.02em; }
.side-brand .t small {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .02em; margin-top: 1px;
}

.side-nav { flex: 1; overflow-y: auto; padding: 8px 10px 14px; }
.side-group {
  font-size: 10.5px; color: var(--ink-3); padding: 14px 10px 6px;
  letter-spacing: .08em; white-space: nowrap; font-weight: 500;
}
.side-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; margin-bottom: 1px;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.side-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.side-item .ico {
  flex: none; min-width: 18px; display: flex; align-items: center; justify-content: center;
  line-height: 1; opacity: .82;
}
.side-item .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-item .tag {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.side-item.on { background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; }
.side-item.on .ico { opacity: 1; }
.side-item.on .tag { background: var(--accent-tint); color: var(--accent-ink); }
/* 左侧 2px 指示条：比整块高亮更克制 */
.side-item.on::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}

.side-foot { flex: none; border-top: 1px solid var(--line); padding: 9px; }
.side-collapse {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 29px; padding: 0 9px; margin-top: 5px;
  border: 0; background: transparent; color: var(--ink-3); font-size: 11.5px; cursor: pointer;
  border-radius: var(--r-sm); font-family: inherit;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.side-collapse:hover { background: var(--surface-3); color: var(--ink-2); }
.side-collapse svg { flex: none; }
body.app.collapsed .side-collapse { justify-content: center; padding: 0; }
body.app.collapsed .side-collapse span { display: none; }
body.app.collapsed .side-collapse svg { transform: rotate(180deg); }

.user-card {
  display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent; overflow: hidden;
  transition: background .13s var(--ease), border-color .13s var(--ease);
}
.user-card:hover { background: var(--surface-3); border-color: var(--line); }
.user-card .uinfo { min-width: 0; flex: 1; }
.user-card .un { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .ur { font-size: 10.5px; color: var(--ink-3); }
.user-card .dots { color: var(--ink-3); font-size: 15px; }

/* 折叠（编辑器等宽场景） */
body.app.collapsed .sidebar { width: 62px; flex-basis: 62px; }
body.app.collapsed .side-brand { padding: 0 17px; }
body.app.collapsed .side-brand .t,
body.app.collapsed .side-group,
body.app.collapsed .side-item .txt,
body.app.collapsed .side-item .tag,
body.app.collapsed .user-card .uinfo,
body.app.collapsed .user-card .dots { display: none; }
body.app.collapsed .side-item { justify-content: center; padding: 0; }
body.app.collapsed .side-item.on::before { display: none; }
body.app.collapsed .user-card { justify-content: center; padding: 6px 0; }
body.app.collapsed .side-brand .logo { margin: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: var(--chrome-bg); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.topbar .crumb { color: var(--ink-3); font-size: 12.5px; }
.topbar .spacer { flex: 1; }
.topbar h1 { font-size: 14.5px; margin: 0; font-weight: 600; letter-spacing: -.02em; }
.content { padding: 22px; width: 100%; max-width: 1320px; margin: 0 auto; flex: 1; }

.hamburger {
  display: none; width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); cursor: pointer; font-size: 15px; line-height: 1;
  align-items: center; justify-content: center; color: var(--ink-2);
}
.scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 40; }

/* ---------------- 头像 ---------------- */
.avatar {
  border-radius: var(--r-sm); flex: none; background: var(--avatar-bg) center/cover no-repeat;
  display: grid; place-items: center; color: #fff; overflow: hidden; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xs { width: 21px; height: 21px; border-radius: var(--r-xs); font-size: 10.5px; }
.avatar.sm { width: 29px; height: 29px; border-radius: var(--r-sm); font-size: 12px; }
.avatar.md { width: 38px; height: 38px; font-size: 14px; }
.avatar.lg { width: 54px; height: 54px; border-radius: var(--r-md); font-size: 19px; }
.avatar.editable { cursor: pointer; }
.avatar.editable::after {
  content: '换'; position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--overlay); color: #fff; font-size: 10.5px;
  opacity: 0; transition: opacity .13s var(--ease);
}
.avatar.editable:hover::after { opacity: 1; }

/* ---------------- 仪表盘 ---------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 17px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.kpi .l { color: var(--ink-3); font-size: 11.5px; display: flex; align-items: center; gap: 6px; letter-spacing: .01em; }
.kpi .n {
  font-size: 25px; font-weight: 600; letter-spacing: -.035em; margin-top: 7px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .d { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 84px; padding-top: 6px; }
.spark .bar {
  flex: 1; background: var(--track); border-radius: 3px 3px 0 0; position: relative; min-height: 3px;
  transition: background .15s var(--ease);
}
.spark .bar.hi { background: var(--accent); }
.spark .bar:hover { background: var(--track-hover); }
.spark .bar.hi:hover { background: var(--accent-h); }
.spark .bar span {
  position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--ink-3); white-space: nowrap;
}
.spark-x { display: flex; gap: 4px; margin-top: 19px; }
.spark-x i { flex: 1; text-align: center; font-size: 10px; color: var(--ink-3); font-style: normal; }

.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .info { flex: 1; min-width: 0; }
.list-row .t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .m { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .r { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------- 列表页工具条 ---------------- */
.tabs .cnt {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 3px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-3);
  font-size: 10.5px; font-weight: 500; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tabs button.on .cnt { background: var(--accent-tint); color: var(--accent-ink); }

.toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .search { position: relative; }
.toolbar .search .input { padding-left: 31px; width: 258px; }
.toolbar .search::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 13px; height: 13px;
  transform: translateY(-50%); opacity: .4; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234d545e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------- 分页 ---------------- */
.pager {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 11px 14px; color: var(--ink-3); font-size: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.pager .pg-total { margin-right: 2px; font-variant-numeric: tabular-nums; }
.pager .pg-size { display: inline-flex; align-items: center; gap: 5px; }
.pager .pg-select {
  font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line-strong);
  border-radius: var(--r-xs); background: var(--surface); color: var(--ink); cursor: pointer;
}
.pager .pg-select:hover { border-color: var(--hover-line); }
.pager .pg-btns { display: inline-flex; align-items: center; gap: 3px; }
.pager .pg-num,
.pager .pg-btn {
  font: inherit; font-size: 12px; min-width: 27px; height: 27px; padding: 0 7px;
  border: 1px solid transparent; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-2); cursor: pointer; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background .13s var(--ease), color .13s var(--ease), border-color .13s var(--ease);
}
.pager .pg-num:hover,
.pager .pg-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.pager .pg-num.on {
  background: var(--accent); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.pager .pg-num.on:hover { background: var(--accent-h); color: #fff; }
.pager .pg-btn:disabled { opacity: .38; cursor: not-allowed; }
.pager .pg-gap { padding: 0 1px; color: var(--ink-3); }

/* ---------------- 分段切换 ---------------- */
.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3);
}
.seg button {
  border: none; background: transparent; padding: 5px 13px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-2); border-radius: 5px;
  transition: background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.seg button:hover:not(.on) { color: var(--ink); }
.seg button.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .09), 0 0 0 1px rgba(16, 24, 40, .04);
}
:root[data-theme="dark"] .seg button.on {
  background: #2c333c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ---------------- 图标按钮 ---------------- */
.icon-btn {
  width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); }

/* ---------------- 骨架屏 ---------------- */
.sk {
  display: inline-block; height: 9px; border-radius: 4px; width: 100%;
  background: var(--surface-3); position: relative; overflow: hidden; vertical-align: middle;
}
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-hi), transparent);
  animation: sk-sweep 1.3s ease-in-out infinite;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }
.sk-av { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; }
.sk-tr td { padding-top: 13px; padding-bottom: 13px; }

/* ---------------- 移动端 ---------------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 50;
    transform: translateX(-100%); transition: transform .2s var(--ease);
    box-shadow: 0 10px 40px rgba(16, 20, 26, .16);
  }
  body.app.nav-open .sidebar { transform: none; }
  body.app.nav-open .scrim { display: block; }
  .hamburger { display: inline-flex; }
  .content { padding: 16px; }
  .topbar { padding: 0 14px; }
  .toolbar .search .input { width: 100%; }
  .toolbar .search { flex: 1; min-width: 160px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .n { font-size: 20px; }
  .table .hide-sm { display: none; }
  .table td .ops { flex-wrap: wrap; }
  .list-row { flex-wrap: wrap; }
  .list-row .r { white-space: normal; }
  .list-row .m { white-space: normal; }
  .list-row .info { flex: 1 1 100%; }
  .pager { justify-content: center; }
}

/* ==============================================================
 * 深色模式
 *
 *   只翻转 token，组件规则一行都不用改 —— 这是前面把硬编码颜色
 *   全抽成语义 token 换来的。
 *
 *   刻意不跟随的：
 *   - 聊天预览画布：它画的是导出的成品，必须永远是浅色微信样式
 *   - 手机外壳：本来就是深色机身
 * ============================================================== */
/* 深色由 theme.js 写在 <html data-theme="dark"> 上。
   不用 @media (prefers-color-scheme) 是因为「跟随 / 浅色 / 深色」三态里，
   强制浅色必须能压过系统深色，媒体查询做不到这件事。 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1014;
  --surface: #16191e;
  --surface-2: #1a1e24;
  --surface-3: #21262d;

  --line: #272d35;
  --line-strong: #353c46;

  --ink: #e8ebf0;
  --ink-2: #b3bac4;
  --ink-3: #8b939f;
  --ink-4: #6b727d;

  /* 深色下按钮仍是实心深绿：白字对比度 5.05:1，hover 变暗而不是变亮，
     否则白字会掉到 3.6:1 */
  --accent: #0d7f4e;
  --accent-h: #0b6f44;
  --accent-active: #095c38;
  --accent-weak: #12281f;
  --accent-ink: #6fd3a6;

  --danger: #e8735f;
  --danger-weak: #2a1714;
  --warn: #e0b062;
  --warn-weak: #2a2114;
  --info: #7aa9e8;
  --info-weak: #16202e;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .34), 0 10px 28px -14px rgba(0, 0, 0, .6);
  --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, .72), 0 3px 10px rgba(0, 0, 0, .36);
  --ring: 0 0 0 3px rgba(18, 161, 99, .3);

  --chrome-bg: rgba(20, 23, 28, .86);
  --hover-line: #3a424c;
  --link: #58c79a;
  --link-h: #6fd3a6;

  --badge-bg: #21262d;
  --badge-ink: #a8b0bb;
  --chip-bg: #21262d;
  --chip-ink: #a8b0bb;

  --c-amount-bg: #2c2114;  --c-amount-ink: #d8a869;
  --c-date-bg: #16202e;    --c-date-ink: #7aa9e8;
  --c-person-bg: #201c33;  --c-person-ink: #a898e8;
  --c-version-bg: #1f1c33; --c-version-ink: #a99ae8;

  --track: #262c34;
  --track-hover: #333b45;
  --dot: #3a424c;
  --avatar-bg: #262c34;

  --danger-line: #4a2a25;
  --danger-line-h: #5c342d;
  --warn-line: #46351f;
  --warn-ink: #e0b062;

  --toast-bg: #2a3038;
  --toast-err: #7d2f24;
  --toast-ok: #0d6b45;

  --mask-bg: rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .55);
  --dialog-line: rgba(255, 255, 255, .09);
  --code-bg: rgba(255, 255, 255, .08);
  --brand-wash: rgba(18, 161, 99, .07);
  --accent-tint: rgba(18, 161, 99, .18);
  --accent-bar: rgba(18, 161, 99, .7);
  --overlay: rgba(0, 0, 0, .55);
  --sel: rgba(18, 161, 99, .28);
  --scroll-thumb: #39414b;
  --scroll-thumb-h: #4a535e;
  --sk-hi: rgba(255, 255, 255, .07);
}

/* 白字按钮的顶部高光在深色下要更弱，否则像贴了层塑料膜 */
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .side-brand .mark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* 预览区永远浅色：这是要导出的成品 */
:root[data-theme="dark"] .phone-inner { background: #ededed; }