/* ============================================================================
   宏森外贸系统 · 主样式表
   ----------------------------------------------------------------------------
   设计规范见 docs/03-UI设计规范.md   ｜  令牌已冻结（A-3，2026-09-22）
   维护：R3 前端与设计

   本表只有一条规矩：**一个颜色角色 = 一个字面量**。
   全文色值只在 :root 出现一次，其余一律 var()。
   配色刻意只保留「一个强调色」：品牌青。上一版同时带青与蓝两套主色，
   这正是界面像两套系统缝在一起的原因；蓝系已整体并入品牌青。

   形态主张：分隔靠 1px 细线，不靠卡片堆叠与阴影。
   阴影只留给真正浮起来的层（弹窗 / 下拉 / 提示条）。
   ========================================================================= */

:root {
  /* —— 面 —— */
  --paper:    #ffffff;   /* 抬起面：卡片、表格、弹窗、浮层 */
  --paper-2:  #f5f7f7;   /* 下沉面：表头、输入框、斑马纹、胶囊底 */
  --canvas:   #eceff0;   /* 页面底 */

  /* —— 线 —— */
  --rule:     #dfe4e4;   /* 细线：本系统的主要分隔手段 */
  --rule-2:   #9aa5a3;   /* 结构线：虚线占位框、滚动条 */
  --rule-3:   #8b9795;   /* 表单控件描边 —— 白底 3.0:1，满足 WCAG 1.4.11 */

  /* —— 字 —— 三级都在三种底色上过 AA 4.5:1（含页面底 --canvas） */
  --ink:      #15211f;   /* 正文（白底 16.6:1） */
  --ink-2:    #4e5c59;   /* 次要文字、表格单元（白底 7.0:1 / 页面底 6.1:1） */
  --ink-3:    #5f6d6a;   /* 三级：说明、时间戳、占位（白底 5.4:1 / 页面底 4.7:1） */

  /* —— 强调：唯一彩色主色。白底 6.0:1，可当文字也可当底 —— */
  --brand:      #0e6f68;
  --brand-deep: #0a5a54; /* 按下 / 悬停 */
  --brand-2:    #e4f0ee; /* 浅底：选中行、胶囊、聚焦环 */
  --brand-3:    #bfdcd7; /* 浅底描边、进度条填充 */

  /* —— 待办：需要人动手（白底 5.8:1） —— */
  --warn:    #8f5a12;
  --warn-2:  #fdf3e2;
  --warn-3:  #e8d3ac;

  /* —— 阻断：逾期 / 失败 / 删除（白底 6.0:1） —— */
  --danger:    #b3362c;
  --danger-2:  #fbeceb;
  --danger-3:  #e9c2be;

  /* —— 侧栏：由 --brand 派生，不是框架灰 —— */
  --nav:       #101d1c;
  --nav-2:     #1a2b29;
  --nav-3:     #22332f;
  --nav-ink:   #c3d1cf;
  --nav-ink-2: #8ba09c;
  --nav-wash:  rgba(255, 255, 255, .07);

  /* —— 浮起：三档，克制使用 —— */
  --sh-1: 0 1px 2px rgba(12, 26, 24, .05);
  --sh-2: 0 6px 16px rgba(12, 26, 24, .08);
  --sh-3: 0 18px 40px rgba(12, 26, 24, .18);
  --scrim: rgba(16, 29, 28, .58);

  /* —— 字体：两个角色。数字一律等宽表格数字，便于上下比对 —— */
  --sans: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  --num:  ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  --fs-1: 11px;   /* 表头、胶囊、脚注 */
  --fs-2: 12px;   /* 次要文字、表格单元 */
  --fs-3: 13px;   /* 正文基准 */
  --fs-4: 15px;   /* 卡片 / 分区标题 */
  --fs-5: 19px;   /* 页面标题 */
  --fs-6: 30px;   /* 仪表盘数字 */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  --r-1: 3px;     /* 按钮、输入框、胶囊 */
  --r-2: 6px;     /* 卡片、面板、缩略图 */
  --r-pill: 999px;

  /* —— 兼容别名：public/app.js 的内联样式直接引用下列名字，不可删 —— */
  --bg:         var(--canvas);
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);
  --line:       var(--rule);
  --text:       var(--ink);
  --muted:      var(--ink-3);
  --nav-hover:  var(--nav-2);
  --teal:       var(--brand);
  --teal-soft:  var(--brand-2);
  --blue:       var(--brand);
  --blue-soft:  var(--brand-2);
  --amber:      var(--warn);
  --amber-soft: var(--warn-2);
  --red:        var(--danger);
  --red-soft:   var(--danger-2);
  --green:      var(--brand);
  --accent:     var(--brand);
  --shadow:     var(--sh-3);

  font-family: var(--sans);
}

* { box-sizing: border-box; }
/* 底色与文字色同时挂在 html 与 body 上：避免任何未被覆盖的元素（含 UA 默认）露出非令牌颜色 */
html { background: var(--canvas); color: var(--ink); }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: var(--fs-3); line-height: 1.5; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
/* <button> 默认不吃继承色（UA 给 buttontext=黑），必须显式继承，否则会漏出非令牌色 */
button { cursor: pointer; color: inherit; }
.hidden { display: none !important; }
.mobile-only, .icon-button.mobile-only { display: none; }

/* 键盘可达：只在键盘聚焦时画环，鼠标点击不画 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ============================ 登录页（A-6） ============================ */
.login-view {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5);
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--brand-2), transparent 68%),
    var(--canvas);
}
.login-panel {
  width: min(420px, 100%); background: var(--paper); border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);          /* 唯一的"用力处" */
  box-shadow: var(--sh-3); padding: 32px 30px 26px; border-radius: var(--r-2);
}
.brand-lockup { display: flex; align-items: center; gap: var(--sp-3); color: var(--paper); min-width: 0; }
.brand-lockup.large { color: var(--ink); margin-bottom: 26px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  background: var(--brand); color: var(--paper);
  font-weight: 700; font-size: var(--fs-4); border-radius: var(--r-1);
}
.brand-lockup strong, .brand-lockup small { display: block; white-space: nowrap; }
.brand-lockup strong { font-size: var(--fs-3); letter-spacing: .01em; }
.brand-lockup.large strong { font-size: var(--fs-5); letter-spacing: -.01em; }
.brand-lockup small { color: var(--nav-ink-2); margin-top: 2px; font-size: var(--fs-1); }
.brand-lockup.large small { color: var(--ink-3); font-size: var(--fs-2); }
.login-form { display: grid; gap: var(--sp-4); }
label { color: var(--ink-2); font-size: var(--fs-2); font-weight: 600; }
input, select, textarea {
  width: 100%; margin-top: 6px; padding: 9px var(--sp-3);
  border: 1px solid var(--rule-3); background: var(--paper); color: var(--ink);
  border-radius: var(--r-1); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-2); }
textarea { min-height: 105px; resize: vertical; line-height: 1.6; }
button.primary {
  border: 1px solid var(--brand); color: var(--paper); background: var(--brand);
  border-radius: var(--r-1); padding: 9px var(--sp-4); font-weight: 600; font-size: var(--fs-3);
}
button.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
button.wide { width: 100%; padding: 11px; }
.form-error { min-height: 18px; color: var(--danger); margin: 0; font-size: var(--fs-2); }
.initial-accounts {
  margin-top: var(--sp-5); border-top: 1px solid var(--rule); padding-top: var(--sp-4);
  color: var(--ink-3); font-size: var(--fs-2); line-height: 1.75;
}
.initial-accounts strong, .initial-accounts span { display: block; }
.initial-accounts strong { color: var(--ink-2); font-size: var(--fs-1); letter-spacing: .04em; margin-bottom: 2px; }

/* ======================= 外壳 / 侧栏 / 顶栏 ======================= */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 224px; padding: var(--sp-4) 10px var(--sp-3);
  background: var(--nav); display: flex; flex-direction: column; z-index: 30;
}
.sidebar .brand-lockup { padding: 2px var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--nav-3); }
.sidebar .brand-lockup small { color: var(--nav-ink-2); }
.sidebar .brand-mark { background: var(--paper); color: var(--nav); }
.nav-list { display: grid; gap: 1px; margin-top: var(--sp-3); }
.nav-group {
  font-size: var(--fs-1); color: var(--nav-ink-2); font-weight: 600;
  letter-spacing: .1em; padding: var(--sp-4) 10px var(--sp-1);
}
.nav-group:first-child { padding-top: 2px; }
.nav-list button, .sidebar-settings {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--nav-ink); background: transparent; border: 0; border-left: 2px solid transparent;
  padding: 9px 10px; border-radius: 0 var(--r-1) var(--r-1) 0; font-size: var(--fs-3);
}
.nav-list button:hover, .sidebar-settings:hover { background: var(--nav-wash); color: var(--paper); }
/* 激活态不靠填色块，靠左侧那道线 + 提亮 —— 登记册的页签手势 */
.nav-list button.active {
  background: var(--nav-2); color: var(--paper); font-weight: 600; border-left-color: var(--brand-3);
}
.nav-list svg, .sidebar-settings svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar-settings { margin-top: auto; }
.sidebar :focus-visible { outline-color: var(--brand-3); }
.main-column { grid-column: 2; min-width: 0; }
.topbar {
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 0 var(--sp-5); position: sticky; top: 0; z-index: 20;
}
.topbar > div:first-child { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.topbar h1 { font-size: var(--fs-5); margin: 0; line-height: 1.2; letter-spacing: -.012em; font-weight: 650; }
.topbar p { font-size: var(--fs-2); color: var(--ink-3); margin: 3px 0 0; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-button {
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: var(--r-1); padding: 0;
}
.icon-button:hover { background: var(--paper-2); color: var(--brand); border-color: var(--rule-2); }
.icon-button svg { width: 16px; height: 16px; }
.server-status { color: var(--ink-3); font-size: var(--fs-2); display: flex; align-items: center; gap: 6px; }
.server-status > span { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 3px var(--brand-2); }
.user-chip { display: flex; align-items: center; gap: var(--sp-2); padding: 0 2px 0 var(--sp-2); border-left: 1px solid var(--rule); margin-left: var(--sp-1); }
.user-chip > span:first-child {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--paper); background: var(--brand); border-radius: var(--r-1); font-weight: 600; font-size: var(--fs-3);
}
.user-chip strong, .user-chip small { display: block; white-space: nowrap; }
.user-chip strong { font-size: var(--fs-2); }
.user-chip small { color: var(--ink-3); font-size: var(--fs-1); margin-top: 1px; }
.page-content { padding: var(--sp-5) var(--sp-5) 48px; max-width: 1600px; margin: 0 auto; }

/* ======================= 工具栏 / 按钮 ======================= */
.page-toolbar {
  min-height: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: var(--sp-2); }
.search-box { position: relative; width: min(300px, 38vw); }
.search-box svg { position: absolute; left: 10px; top: 50%; width: 15px; transform: translateY(-50%); color: var(--ink-3); }
.search-box input { margin: 0; padding-left: 32px; height: 36px; }
.secondary-button, .danger-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-1); padding: 8px var(--sp-3);
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
  font-weight: 600; font-size: var(--fs-3);
}
.secondary-button:hover { border-color: var(--brand-3); background: var(--brand-2); color: var(--brand); }
.danger-button { color: var(--danger); border-color: var(--danger-3); }
.danger-button:hover { background: var(--danger-2); }
.secondary-button svg, .danger-button svg, button.primary svg { width: 15px; height: 15px; }

/* ======================= 仪表盘（A-7） ======================= */
/* 一条细线分开的账目条，不是六张卡片 */
.stat-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--paper); border: 1px solid var(--rule); margin-bottom: var(--sp-4);
  border-radius: var(--r-2); overflow: hidden;
}
.stat-item {
  min-height: 96px; padding: var(--sp-4) var(--sp-3) 14px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-2);
}
.stat-item:last-child { border-right: 0; }
.stat-item span { color: var(--ink-2); font-size: var(--fs-2); }
.stat-item strong {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-6); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-weight: 600;
}
.stat-item small { color: var(--ink-3); font-size: var(--fs-1); line-height: 1.4; }

/* 快捷入口：仪表盘下方那排 —— 用 data-go 复用既有导航 */
.quick-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.quick-entry {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-4); background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-left: 2px solid var(--brand-3);
  border-radius: var(--r-1); font-weight: 600; font-size: var(--fs-3);
}
.quick-entry:hover { border-color: var(--brand-3); border-left-color: var(--brand); background: var(--brand-2); color: var(--brand); }
.quick-entry svg { width: 15px; height: 15px; color: var(--brand); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: var(--sp-4); }
.section-panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); min-width: 0; overflow: hidden; }
.section-panel > header {
  min-height: 46px; padding: 0 var(--sp-4); display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); border-bottom: 1px solid var(--rule); background: var(--paper-2);
}
.section-panel h2 { font-size: var(--fs-4); margin: 0; font-weight: 650; letter-spacing: -.01em; }
.section-panel header span { color: var(--ink-3); font-size: var(--fs-2); }
.activity-list { list-style: none; padding: var(--sp-1) var(--sp-4); margin: 0; }
.activity-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 3px; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list strong { font-size: var(--fs-2); font-weight: 600; }
.activity-list span { color: var(--ink-3); font-size: var(--fs-2); line-height: 1.45; }

/* ======================= 表格 ======================= */
.table-wrap { overflow: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); }
table { width: 100%; border-collapse: collapse; min-width: 850px; font-variant-numeric: tabular-nums; }
th {
  position: sticky; top: 0; z-index: 2; background: var(--paper-2); color: var(--ink-2);
  text-align: left; font-size: var(--fs-1); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 9px var(--sp-3); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: middle; font-size: var(--fs-2); }
tbody tr:hover { background: var(--paper-2); }
tbody tr.clickable { cursor: pointer; }
.title-cell { min-width: 190px; font-weight: 600; color: var(--ink); font-size: var(--fs-3); }
.muted { color: var(--ink-3); }
.empty-state {
  min-height: 220px; display: grid; place-items: center; text-align: center;
  color: var(--ink-3); padding: var(--sp-5); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-2); font-size: var(--fs-3);
}
.empty-state svg { width: 30px; height: 30px; margin-bottom: var(--sp-2); color: var(--rule-2); }

/* ======================= 状态胶囊 ======================= */
/* 用"印章"形态：细描边 + 微字距，不用大色块填充 */
.badge {
  display: inline-flex; align-items: center; min-height: 21px; padding: 1px 7px;
  border: 1px solid var(--rule); border-radius: var(--r-1);
  background: var(--paper-2); color: var(--ink-2);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.badge.teal, .badge.green, .badge.account-appliance { color: var(--brand); background: var(--brand-2); border-color: var(--brand-3); }
.badge.blue, .badge.account-mirror, .badge.purple { color: var(--ink-2); background: var(--paper-2); border-color: var(--rule-2); }
.badge.amber { color: var(--warn); background: var(--warn-2); border-color: var(--warn-3); }
.badge.red { color: var(--danger); background: var(--danger-2); border-color: var(--danger-3); }
.task-badges .badge { border-radius: var(--r-1); }

.row-actions { display: flex; gap: var(--sp-1); }
.row-actions .icon-button { width: 28px; height: 28px; }
.external-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.external-link:hover { text-decoration: underline; }

/* ======================= 询盘照片 ======================= */
.lead-photo-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-1);
  cursor: zoom-in; border: 1px solid var(--rule); vertical-align: middle;
}
.lead-photo-cell { position: relative; display: inline-block; }
.lead-photo-count {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px;
  border-radius: var(--r-pill); background: var(--brand); color: var(--paper);
  font-size: 10px; line-height: 17px; text-align: center; padding: 0 var(--sp-1); box-shadow: var(--sh-1);
}
.lead-photo-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lead-photo-chip { position: relative; }
.lead-photo-chip img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-2);
  border: 1px solid var(--rule); cursor: zoom-in; display: block;
}
.lead-photo-remove {
  position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; padding: 0;
  border-radius: 50%; border: none; background: var(--danger); color: var(--paper);
  font-size: var(--fs-3); line-height: 1; cursor: pointer; box-shadow: var(--sh-1);
}
.lead-photo-remove:hover { background: var(--danger); }
.mini-progress { width: 110px; height: 21px; position: relative; background: var(--paper-2); overflow: hidden; border-radius: var(--r-1); }
.mini-progress span { position: absolute; inset: 0 auto 0 0; background: var(--brand-3); }
.mini-progress b { position: relative; z-index: 1; display: block; padding: 3px 7px; font-size: var(--fs-1); color: var(--brand-deep); font-variant-numeric: tabular-nums; }

/* ======================= 看板 ======================= */
.kanban-wrap { overflow-x: auto; max-width: 100%; padding-bottom: var(--sp-2); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.kanban-wrap::-webkit-scrollbar { display: none; }
.kanban { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 2px; min-width: max-content; }
.kanban-board { display: flex; gap: var(--sp-3); align-items: flex-start; overflow-x: auto; max-width: 100%; padding: 2px 2px var(--sp-2); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.kanban-board::-webkit-scrollbar { display: none; }
.kanban-column {
  flex: 0 0 288px; width: 288px; min-height: 180px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden;
}
.kanban-column > header, .kanban-column header {
  height: 44px; display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3); background: var(--paper); border-bottom: 1px solid var(--rule);
}
.kanban-column h3 { font-size: var(--fs-3); font-weight: 650; margin: 0; color: var(--ink); }
.kanban-column header span {
  min-width: 22px; height: 21px; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1);
  color: var(--ink-2); font-size: var(--fs-1); font-variant-numeric: tabular-nums; margin-left: auto;
}
.kanban-col-bar { width: 3px; height: 22px; border-radius: 2px; flex: none; background: var(--rule-2); }
.kanban-col-note { margin-left: auto; font-size: var(--fs-1); color: var(--warn); font-weight: 600; }
.kanban-cards { display: grid; gap: var(--sp-2); padding: var(--sp-2); }
.kanban-list { display: grid; gap: var(--sp-2); padding: var(--sp-2); }
.kanban-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2);
  padding: var(--sp-3); cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.kanban-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-3); }
.kanban-card strong { display: block; font-size: var(--fs-3); line-height: 1.45; margin-bottom: 6px; font-weight: 600; }
.kanban-card h3 { margin: var(--sp-1) 0; font-size: var(--fs-3); font-weight: 650; }
.kanban-card div { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-1); }
.kanban-card > small { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-top: var(--sp-1); text-align: right; }
.kanban-card .kanban-progress { display: block; height: 4px; background: var(--paper-2); margin-top: var(--sp-2); overflow: hidden; border-radius: 2px; }
.kanban-card .kanban-progress span { display: block; height: 100%; background: var(--brand); }
.kanban-card .kanban-res { display: flex; gap: var(--sp-3); font-size: var(--fs-1); color: var(--ink-3); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--rule); }
.kanban-card .kanban-res b { color: var(--ink-2); }
.kanban-card .task-badges { margin-bottom: var(--sp-2); }
.kanban-script { margin: 0 0 6px; color: var(--ink-3); font-size: var(--fs-2); line-height: 1.5; }
.kanban-meta { display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: var(--fs-2); margin-bottom: 6px; }
.kanban-meta svg { width: 12px; height: 12px; vertical-align: -2px; }
.kanban-meta .overdue { color: var(--danger); font-weight: 600; }
.kanban-link { display: block; font-size: var(--fs-2); color: var(--brand); margin-bottom: 6px; word-break: break-all; }
.kanban-link svg { width: 12px; height: 12px; vertical-align: -2px; }
.kanban-actions { display: flex; gap: 6px; margin-top: var(--sp-2); border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.kanban-actions .secondary-button {
  flex: 1; padding: var(--sp-1) 6px; font-size: var(--fs-2);
  border: 1px solid var(--rule); border-radius: var(--r-1);
  background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
}
.kanban-actions .secondary-button:hover { background: var(--paper-2); }
.kanban-actions .secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.kanban-actions .secondary-button:disabled:hover { background: var(--paper); }
.kanban-actions svg { width: 13px; height: 13px; }
.kanban-actions .primary, .kanban-actions .primary.kanban-move { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.kanban-actions .primary.kanban-move:hover { background: var(--brand-deep); }
.kanban-move { border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); padding: 5px 11px; font-size: var(--fs-2); }
.kanban-move:hover { background: var(--brand-2); color: var(--brand); border-color: var(--brand-3); }
.kanban-pending { flex: 1; text-align: center; font-size: var(--fs-1); color: var(--warn); background: var(--warn-2); border: 1px solid var(--warn-3); border-radius: var(--r-1); padding: var(--sp-1) 0; }
.kanban-review { margin: 0 0 6px; padding: 5px var(--sp-2); border-radius: var(--r-1); background: var(--warn-2); color: var(--warn); border: 1px solid var(--warn-3); font-size: var(--fs-1); line-height: 1.5; }
.kanban-warn { margin-top: 6px; padding: 5px var(--sp-2); border-radius: var(--r-1); background: var(--danger-2); color: var(--danger); border: 1px solid var(--danger-3); font-size: var(--fs-1); line-height: 1.5; display: flex; align-items: center; gap: var(--sp-1); }
.kanban-warn svg { width: 12px; height: 12px; flex: none; }
.kanban-empty { color: var(--ink-3); font-size: var(--fs-2); padding: var(--sp-5) 0; border: 1px dashed var(--rule-2); border-radius: var(--r-2); text-align: center; }

/* 世界时间栏 */
.world-clock { display: flex; align-items: center; gap: var(--sp-5); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.wc-label { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-2); white-space: nowrap; }
.wc-label svg { width: 15px; height: 15px; color: var(--brand); }
.wc-label b { color: var(--ink); font-size: var(--fs-2); font-weight: 650; }
.wc-clocks { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.wc-city { position: relative; padding-right: 14px; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wc-city-name { font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
.wc-city-name em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: var(--fs-1); margin-left: 5px; }
.wc-time { font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; }
.wc-date { font-size: var(--fs-1); color: var(--ink-3); }
/* 世界时间：时区增删与城市联想（原为 app.js 内嵌 <style>，2026-09-22 收敛回本表） */
.wc-offset { display: block; font-size: var(--fs-1); color: var(--ink-3); margin-top: 2px; }
.wc-del {
  position: absolute; top: -4px; right: 0; width: 16px; height: 16px; padding: 0;
  border: none; background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: var(--fs-4); line-height: 1;
}
.wc-del:hover { color: var(--danger); }
#wcSuggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow: auto; z-index: 30; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--sh-3); }
.wc-suggest-item:hover { background: var(--brand-2); }

/* 页签：只有真的是一条分栏序列时才用 */
.tab-bar { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.tab {
  padding: var(--sp-2) var(--sp-4); border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r-1) var(--r-1) 0 0; background: transparent;
  color: var(--ink-3); font-size: var(--fs-3); cursor: pointer; font-weight: 600;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--paper); border-color: var(--rule); color: var(--brand); border-bottom: 2px solid var(--brand); margin-bottom: -1px; }
.tab-badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: var(--r-1); background: var(--danger-2); color: var(--danger); border: 1px solid var(--danger-3); font-size: var(--fs-1); margin-left: var(--sp-1); }
.tab-badge.hidden { display: none; }

/* ======================= 单据统计条 ======================= */
.document-stats { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; margin-bottom: var(--sp-4); }
.document-stats > div { min-height: 82px; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--rule); }
.document-stats > div:last-child { border-right: 0; }
.document-stats span { color: var(--ink-2); font-size: var(--fs-2); }
.document-stats strong { margin-top: 6px; font-size: 22px; font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.toolbar-select { width: 145px; height: 36px; margin: 0; }
.document-path-note {
  display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2);
  background: var(--brand-2); border: 1px solid var(--brand-3);
  padding: 10px var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-2); border-radius: var(--r-1);
}
.document-path-note svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.document-path-note code { color: var(--brand-deep); overflow-wrap: anywhere; font-family: var(--num); font-size: var(--fs-2); }
.document-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 230px; }
.document-name > svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }
.document-name span, .document-name small { display: block; }
.document-name small { margin-top: 3px; color: var(--ink-3); font-weight: 400; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.row-actions a.icon-button { text-decoration: none; }

/* ======================= 知识库 ======================= */
.knowledge-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; margin-bottom: var(--sp-4); }
.knowledge-stats > div { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--rule); }
.knowledge-stats > div:last-child { border-right: 0; }
.knowledge-stats span, .knowledge-stats small { color: var(--ink-3); font-size: var(--fs-1); }
.knowledge-stats strong { margin: 6px 0 var(--sp-1); font-size: 22px; font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.knowledge-section { margin-top: var(--sp-5); }
.knowledge-section > header { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-3); }
.knowledge-section > header > div { display: flex; align-items: baseline; gap: 10px; }
.knowledge-section h2 { margin: 0; font-size: var(--fs-4); font-weight: 650; }
.knowledge-section header span { color: var(--ink-3); font-size: var(--fs-2); }
.knowledge-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.knowledge-card {
  min-height: 168px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3);
  align-items: start; padding: var(--sp-4); text-align: left;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-2);
}
.knowledge-card:hover { border-color: var(--brand-3); box-shadow: var(--sh-2); }
.knowledge-card-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--brand-2); color: var(--brand); border-radius: var(--r-1); }
.knowledge-card-icon svg { width: 18px; height: 18px; }
.knowledge-card-body, .knowledge-card-body strong, .knowledge-card-body small { display: block; min-width: 0; }
.knowledge-card-meta { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-bottom: 6px; letter-spacing: .02em; }
.knowledge-card-body strong { font-size: var(--fs-3); line-height: 1.45; font-weight: 650; }
.knowledge-card-body > small { color: var(--ink-2); line-height: 1.6; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-2); }
.knowledge-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--fs-1); }
.knowledge-toolbar { margin: 0; padding: 0 0 10px; }
.knowledge-source-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 240px; }
.knowledge-source-name > svg { width: 17px; height: 17px; color: var(--brand); flex: 0 0 auto; }
.knowledge-source-name strong, .knowledge-source-name small { display: block; }
.knowledge-source-name small { color: var(--ink-3); font-size: var(--fs-1); font-weight: 400; margin-top: 3px; }
.knowledge-table td:nth-child(7) { max-width: 310px; line-height: 1.45; }
.knowledge-table a.icon-button { text-decoration: none; }
.knowledge-detail { display: block; }
.knowledge-detail-summary { padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.knowledge-detail-summary > div { display: flex; gap: 6px; margin-bottom: 10px; }
.knowledge-detail-summary p { margin: 0; line-height: 1.7; color: var(--ink-2); }
.knowledge-detail-grid { display: grid; grid-template-columns: 1fr 1fr; }
.knowledge-detail-grid > div { padding: var(--sp-5); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 150px; }
.knowledge-detail-grid > div:nth-child(2n) { border-right: 0; }
.knowledge-detail-grid h3 { margin: 0 0 10px; font-size: var(--fs-3); font-weight: 650; }
.knowledge-detail-grid p, .knowledge-detail-grid li { color: var(--ink-2); line-height: 1.7; font-size: var(--fs-3); }
.knowledge-detail-grid p { margin: 0; }
.knowledge-detail-grid ul { margin: 0; padding-left: 18px; }
.knowledge-caution { background: var(--warn-2); }
.knowledge-caution h3 { color: var(--warn); }

/* ======================= 弹窗 ======================= */
.modal-backdrop { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: var(--sp-5); z-index: 100; }
.modal-panel { width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--paper); box-shadow: var(--sh-3); border-radius: var(--r-2); }
.modal-panel.task-modal { width: min(1120px, 100%); }
.modal-panel > header {
  position: sticky; top: 0; z-index: 3; background: var(--paper); min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule);
}
.modal-panel h2 { margin: 0; font-size: var(--fs-5); font-weight: 650; letter-spacing: -.012em; }
.modal-panel header p { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--fs-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); padding: var(--sp-5); }
.form-grid label.full { grid-column: 1 / -1; }
.metrics-platform-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.metrics-platform { border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-3) 14px 14px; background: var(--paper-2); }
.metrics-platform h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); font-weight: 600; }
.metrics-platform .pf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.metrics-platform .pf label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-2); color: var(--ink-3); }
.metrics-platform .pf input { width: 100%; min-width: 0; }
.metric-title { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.metric-thumb { width: 36px; height: 64px; border-radius: var(--r-2); overflow: hidden; flex: none; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; }
.metric-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metric-thumb-empty svg { width: 16px; height: 16px; color: var(--ink-3); }
.metric-title strong { display: block; font-size: var(--fs-3); font-weight: 600; }
.metric-title small { display: block; color: var(--ink-3); font-size: var(--fs-2); margin-top: 2px; }
.metrics-table td { vertical-align: middle; }
.metric-cell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; font-size: var(--fs-2); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric-cell span { line-height: 1.7; }
.metric-cell .metric-inq { color: var(--brand); font-weight: 600; grid-column: 1 / -1; }
.metric-cell.metric-empty { font-style: italic; }
.form-grid .form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--rule); }
.form-grid .form-actions .danger-button { margin-right: auto; }
.field-help { color: var(--ink-3); font-weight: 400; font-size: var(--fs-1); display: block; margin-top: var(--sp-1); }
.ai-parse-ok {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--brand-2); color: var(--brand-deep); border: 1px solid var(--brand-3);
  border-radius: var(--r-1); padding: 9px var(--sp-3); font-size: var(--fs-3); margin-bottom: var(--sp-1);
}
.ai-parse-ok svg { width: 16px; height: 16px; flex: none; }
#aiLeadRaw { min-height: 130px; }

/* ======================= 任务详情 ======================= */
.task-detail-body { display: block; padding: 0; }
.task-summary { position: relative; padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.task-badges { display: flex; gap: 6px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.task-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); padding-right: 130px; }
.task-meta span { color: var(--ink); min-width: 0; font-size: var(--fs-3); }
.task-meta b { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-bottom: var(--sp-1); font-weight: 600; letter-spacing: .04em; }
.task-summary > button { position: absolute; top: var(--sp-4); right: var(--sp-5); }
.task-progress { margin-top: var(--sp-4); max-width: 540px; }
.task-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; border-radius: var(--r-1); }
.progress-track span { display: block; height: 100%; background: var(--brand); }
.task-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.task-book-section { padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 110px; }
.task-book-section:nth-child(even) { border-right: 0; }
.task-book-section h3, .task-checklist-panel h3, .task-updates-panel h3 { font-size: var(--fs-3); margin: 0 0 9px; font-weight: 650; }
.task-book-section > div { color: var(--ink-2); line-height: 1.8; font-size: var(--fs-3); }
.task-workspace-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); }
.task-documents-panel { padding: var(--sp-4) var(--sp-5) 18px; border-bottom: 1px solid var(--rule); }
.task-documents-panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 10px; }
.task-documents-panel h3 { font-size: var(--fs-3); margin: 0; font-weight: 650; }
.task-documents-panel header span { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-top: 3px; }
.task-document-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.task-document-item { display: grid; grid-template-columns: minmax(0, 1fr) 36px; border: 1px solid var(--rule); border-radius: var(--r-1); overflow: hidden; }
.task-document-item > button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 9px 10px; background: var(--paper); color: var(--ink); border: 0; text-align: left; min-width: 0; }
.task-document-item > a { display: grid; place-items: center; border-left: 1px solid var(--rule); color: var(--brand); text-decoration: none; background: var(--paper); }
.task-document-item:hover { border-color: var(--brand-3); }
.task-document-item:hover > button, .task-document-item:hover > a { background: var(--brand-2); }
.task-document-list svg { width: 16px; height: 16px; color: var(--brand); }
.task-document-list strong, .task-document-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-document-list strong { font-size: var(--fs-3); }
.task-document-list small { color: var(--ink-3); margin-top: var(--sp-1); font-size: var(--fs-1); }
.task-document-list .review-note { color: var(--danger); }
.task-checklist-panel, .task-updates-panel { padding: var(--sp-4) var(--sp-5) 22px; min-width: 0; }
.task-checklist-panel { border-right: 1px solid var(--rule); }
.task-checklist-panel > header, .task-updates-panel > header { min-height: 32px; }
.task-checklist-panel > header > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-checklist-panel header span { color: var(--ink-3); font-size: var(--fs-1); }
.checklist-items { border-top: 1px solid var(--rule); }
.checklist-item { min-height: 46px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 500; font-size: var(--fs-3); }
.checklist-item input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.checklist-item small { display: block; color: var(--ink-3); margin-top: var(--sp-1); font-weight: 400; font-size: var(--fs-1); }
.checklist-item.done > span { color: var(--ink-3); text-decoration: line-through; }
.checklist-item .icon-button { width: 26px; height: 26px; }
.add-checklist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: var(--sp-3); }
.add-checklist input { margin: 0; }
.update-composer { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); }
.update-composer select, .update-composer textarea, .update-composer input { margin: 0; }
.update-composer textarea { grid-column: 2; grid-row: 1 / span 2; min-height: 92px; }
.update-composer input { grid-column: 1 / -1; }
.update-composer button { justify-self: end; grid-column: 1 / -1; }
.task-action-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--r-1) var(--r-1) 0 0; overflow: hidden; }
.task-action-tabs button { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px; border: 0; border-right: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-3); font-weight: 650; font-size: var(--fs-3); }
.task-action-tabs button:last-child { border-right: 0; }
.task-action-tabs button.active { background: var(--paper); color: var(--brand); box-shadow: inset 0 2px 0 var(--brand); }
.task-action-tabs svg { width: 15px; height: 15px; }
.task-action-panel { padding: 14px; border: 1px solid var(--rule); background: var(--paper); border-radius: 0 0 var(--r-1) var(--r-1); }
.task-action-panel textarea { min-height: 95px; }
.task-action-panel > button { display: flex; margin: 10px 0 0 auto; }
.progress-input-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.progress-input-head strong { color: var(--brand); font-variant-numeric: tabular-nums; }
.task-action-panel input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--brand); }
.submission-help, .manager-guidance { color: var(--ink-3); line-height: 1.6; margin-top: 0; font-size: var(--fs-2); }
.submission-documents { padding: 10px 0; }
.submission-documents > strong { display: block; margin-bottom: 6px; font-size: var(--fs-2); }
.submission-documents label { min-height: 36px; display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 6px; border-top: 1px solid var(--rule); font-weight: 500; font-size: var(--fs-2); }
.submission-documents input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); }
.comment-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); margin-top: var(--sp-3); }
.comment-composer textarea { min-height: 66px; margin: 0; }
.task-submissions-section, .task-history-section { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--rule); }
.task-submissions-section > header, .task-history-section > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.task-submissions-section h3, .task-history-section h3 { margin: 0; font-size: var(--fs-3); font-weight: 650; }
.task-submissions-section header span { color: var(--ink-3); font-size: var(--fs-1); }
.task-submission-list { display: grid; gap: 10px; }
.task-submission-record { border: 1px solid var(--rule); border-radius: var(--r-1); padding: var(--sp-3); }
.task-submission-record > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-submission-record > header > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-submission-record > header > span { color: var(--ink-3); font-size: var(--fs-1); }
.task-submission-record > p { color: var(--ink-2); line-height: 1.7; font-size: var(--fs-3); }
.submission-files { display: flex; flex-wrap: wrap; gap: 6px; }
.submission-files a { display: flex; align-items: center; gap: 6px; padding: 6px var(--sp-2); border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink); text-decoration: none; font-size: var(--fs-2); }
.submission-files a:hover { border-color: var(--brand-3); background: var(--brand-2); }
.submission-files svg { width: 14px; height: 14px; color: var(--brand); }
.submission-review-comment { padding: 10px var(--sp-3); margin-top: 10px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--paper-2); }
.submission-review-comment.revision { background: var(--danger-2); border-color: var(--danger-3); }
.submission-review-comment.approved { background: var(--brand-2); border-color: var(--brand-3); }
.submission-review-comment p { margin: 5px 0; line-height: 1.65; font-size: var(--fs-2); }
.submission-review-comment span { color: var(--ink-3); font-size: var(--fs-1); }
.submission-review-form { padding-top: var(--sp-3); margin-top: 10px; border-top: 1px solid var(--rule); }
.submission-review-form textarea { min-height: 85px; }
.submission-review-form > div { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.progress-event { color: var(--brand); background: var(--brand-2); border: 1px solid var(--brand-3); border-radius: var(--r-1); padding: 1px 6px; font-size: var(--fs-1); font-weight: 650; }
.task-timeline { margin-top: var(--sp-4); }
.task-timeline article { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-2); padding-bottom: 18px; }
.task-timeline article::before { content: ''; position: absolute; left: 5px; top: 13px; bottom: 0; border-left: 1px solid var(--rule); }
.task-timeline article:last-child::before { display: none; }
.timeline-dot { width: 11px; height: 11px; margin-top: var(--sp-1); background: var(--brand); border: 3px solid var(--brand-2); border-radius: 50%; z-index: 1; }
.task-timeline article header { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.task-timeline article time { margin-left: auto; color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.task-timeline article p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.7; font-size: var(--fs-3); }
.attachment-line { margin-top: 6px; }
.attachment-line code { display: block; padding: 6px var(--sp-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink-2); overflow-wrap: anywhere; font-family: var(--num); font-size: var(--fs-2); }
.document-review-summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.document-file-mark { width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-2); color: var(--brand); border-radius: var(--r-2); }
.document-file-mark svg { width: 24px; height: 24px; }
.document-review-summary h3 { margin: 0; font-size: var(--fs-4); }
.document-review-summary p { margin: 5px 0 0; color: var(--ink-3); font-size: var(--fs-2); }
.document-download { display: inline-flex; align-items: center; gap: 6px; padding: 9px var(--sp-3); color: var(--paper); background: var(--brand); border: 1px solid var(--brand); border-radius: var(--r-1); text-decoration: none; font-weight: 650; font-size: var(--fs-3); }
.document-download:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.document-download svg { width: 15px; height: 15px; }
.current-review { padding: 14px var(--sp-5); border-bottom: 1px solid var(--rule); }
.current-review.revision { background: var(--danger-2); border-color: var(--danger-3); }
.current-review.approved { background: var(--brand-2); border-color: var(--brand-3); }
.current-review h3 { margin: 0 0 6px; font-size: var(--fs-3); font-weight: 650; }
.current-review p { margin: 0; line-height: 1.7; font-size: var(--fs-3); }
.current-review span { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-top: 6px; }
.document-review-grid { display: grid; grid-template-columns: 1fr 1fr; }
.document-review-grid > div:first-child { border-right: 1px solid var(--rule); }
.review-section { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule); }
.review-section h3 { margin: 0 0 10px; font-size: var(--fs-3); font-weight: 650; }
.review-section > p { color: var(--ink-2); line-height: 1.7; font-size: var(--fs-2); }
.review-section dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 9px var(--sp-3); margin: 0; }
.review-section dt { color: var(--ink-3); font-size: var(--fs-2); }
.review-section dd { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-2); }
.review-section code { padding: 2px 5px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); font-family: var(--num); font-size: var(--fs-1); }
.version-list { display: grid; gap: 6px; }
.version-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); padding: 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-1); text-align: left; color: var(--ink); font-size: var(--fs-2); }
.version-list button.active { border-color: var(--brand-3); background: var(--brand-2); }
.version-list button small { grid-column: 1 / -1; color: var(--ink-3); }
.manager-review textarea { min-height: 120px; }
.manager-review > div { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 9px; }
.employee-revision button { margin-top: var(--sp-2); }
.review-history article { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.review-history article:last-child { border-bottom: 0; }
.review-history header { display: flex; align-items: center; gap: var(--sp-2); }
.review-history time { margin-left: auto; color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.review-history p { margin: 6px 0 0; color: var(--ink-2); line-height: 1.65; font-size: var(--fs-2); }
.content-review-workspace { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); border-bottom: 1px solid var(--rule); }
.content-version-submit, .content-version-history { padding: var(--sp-4) var(--sp-5); min-width: 0; }
.content-version-submit { border-right: 1px solid var(--rule); }
.content-version-submit h3, .content-version-history h3, .content-review-log h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); font-weight: 650; }
.content-version-submit > p { color: var(--ink-3); line-height: 1.65; font-size: var(--fs-2); }
.content-version-submit label { display: block; margin-top: 10px; }
.content-version-submit > button { display: flex; margin: var(--sp-3) 0 0 auto; }
.content-version-history > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.content-version-history header span { color: var(--ink-3); font-size: var(--fs-1); }
.content-version-record { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.content-version-record > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.content-version-record > header > div { display: flex; align-items: center; gap: 6px; }
.content-version-record > header > span { color: var(--ink-3); font-size: var(--fs-1); }
.content-version-record > p { color: var(--ink-2); line-height: 1.65; font-size: var(--fs-2); }
.content-version-record details { margin: var(--sp-2) 0; border: 1px solid var(--rule); border-radius: var(--r-1); }
.content-version-record summary { padding: var(--sp-2) 10px; cursor: pointer; color: var(--brand); font-size: var(--fs-2); }
.content-version-record details > div { padding: 10px; border-top: 1px solid var(--rule); line-height: 1.75; font-size: var(--fs-2); }
.content-review-log { padding: var(--sp-4) var(--sp-5); }
.content-review-log article { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.content-review-log article > div { display: flex; align-items: center; gap: var(--sp-2); }
.content-review-log time { margin-left: auto; color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.content-review-log p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-2); }

/* ======================= 提示条 ======================= */
.toast {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 200;
  padding: var(--sp-3) var(--sp-4); max-width: 360px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-left: 3px solid var(--brand);
  border-radius: var(--r-1); box-shadow: var(--sh-3); font-size: var(--fs-3);
}
.toast.error { border-left-color: var(--danger); color: var(--danger); background: var(--danger-2); }

/* ======================= 设置 ======================= */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); }
.settings-block { padding: var(--sp-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); }
.settings-block h2 { font-size: var(--fs-4); margin: 0 0 var(--sp-2); font-weight: 650; }
.settings-block p { color: var(--ink-3); line-height: 1.7; font-size: var(--fs-2); }
.settings-ai-key { display: flex; gap: var(--sp-2); margin: 10px 0 var(--sp-1); }
.settings-ai-key input { margin: 0; flex: 1; }
.user-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.user-row:last-child { border-bottom: 0; }
.user-row strong, .user-row span { display: block; }
.user-row strong { font-size: var(--fs-3); }
.user-row span { color: var(--ink-3); font-size: var(--fs-2); margin-top: 3px; }

/* ======================= 项目工作台 ======================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.card-grid-portrait { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.project-workspace { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.project-workspace h3 { font-size: var(--fs-5); margin: var(--sp-2) 0 var(--sp-1); letter-spacing: -.012em; }
.pw-head { border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-3); }
.pw-head .kanban-meta { margin-top: 6px; }
.pw-actions { display: flex; gap: var(--sp-2); margin-top: 10px; }
.pw-section h4 { font-size: var(--fs-3); font-weight: 650; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pw-section h4 svg { width: 15px; height: 15px; color: var(--brand); }
.pw-section h4 .muted { font-weight: 400; font-size: var(--fs-2); }
.pw-count { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); padding: 1px 9px; font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.pw-script-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pw-script-col .col-label { font-size: var(--fs-1); color: var(--ink-3); font-weight: 600; margin-bottom: 6px; letter-spacing: .05em; }
.pw-script-col pre {
  white-space: pre-wrap; word-break: break-word; background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-2); padding: 14px var(--sp-4);
  font-size: var(--fs-3); line-height: 1.8; font-family: inherit; margin: 0; max-height: 320px; overflow: auto;
}
.pw-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.pw-media { border: 1px solid var(--rule); border-radius: var(--r-2); padding: 10px; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--paper); }
.pw-media-final { max-width: 260px; }
.pw-media .secondary-button { justify-content: center; }
.pw-media-meta strong { font-size: var(--fs-2); display: block; line-height: 1.45; font-weight: 600; }
.pw-media-meta small { font-size: var(--fs-1); color: var(--ink-3); }
.pw-actions-bottom { display: flex; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--rule); padding-top: var(--sp-3); flex-wrap: wrap; }
.pw-actions-bottom .muted { margin-left: auto; }
.media-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, border-color .15s; }
.media-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-3); }
.media-card-icon { width: 42px; height: 42px; border-radius: var(--r-2); background: var(--brand-2); color: var(--brand); display: grid; place-items: center; }
.media-card-icon svg { width: 21px; height: 21px; }
.media-card-body h3 { margin: var(--sp-1) 0 2px; font-size: var(--fs-4); font-weight: 650; }
.media-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; }
.media-thumb.portrait { aspect-ratio: 9 / 16; }
.media-thumb img, .media-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb .cover-download {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2); width: 26px; height: 26px;
  border-radius: var(--r-1); background: var(--scrim); color: var(--paper);
  display: grid; place-items: center; opacity: 0; transition: opacity .15s; z-index: 2;
}
.media-thumb:hover .cover-download { opacity: 1; }
.media-thumb .cover-download:hover { background: var(--brand); }
.media-thumb .cover-download svg { width: 13px; height: 13px; }
.media-thumb.video-thumb::after { content: ''; width: 32px; height: 32px; border-radius: 50%; background: var(--scrim); position: absolute; inset: 0; margin: auto; }
.media-thumb.video-thumb.has-frame::after { display: none; }
.video-thumb-badge { position: absolute; right: var(--sp-2); bottom: var(--sp-2); background: var(--scrim); color: var(--paper); font-size: var(--fs-1); padding: 1px 7px; border-radius: var(--r-1); z-index: 1; font-variant-numeric: tabular-nums; }
.media-filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.media-filter-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); }
.media-filter-bar select, .media-filter-bar input[type="date"] { height: 34px; padding: 0 var(--sp-2); border-radius: var(--r-1); border: 1px solid var(--rule-3); background: var(--paper); color: var(--ink); font-size: var(--fs-3); }
.media-meta-bits { display: flex; flex-wrap: wrap; gap: 5px; }
.media-meta-bits span { font-size: var(--fs-2); padding: 1px var(--sp-2); border-radius: var(--r-1); background: var(--brand-2); border: 1px solid var(--brand-3); color: var(--brand); }
/* 成片发布时间轴 */
.media-timeline { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 14px var(--sp-4); margin-bottom: 14px; }
.media-timeline-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); font-weight: 650; margin-bottom: var(--sp-3); }
.media-timeline-head svg { width: 16px; height: 16px; color: var(--brand); }
.media-timeline-head .muted { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.media-timeline-track { display: flex; gap: var(--sp-5); overflow-x: auto; align-items: flex-start; padding-bottom: 6px; scrollbar-width: thin; }
.timeline-day { flex: none; width: 152px; display: flex; flex-direction: column; align-items: center; position: relative; }
.timeline-day::after { content: ''; position: absolute; top: 28px; bottom: var(--sp-1); left: 50%; width: 1px; background: var(--rule); transform: translateX(-50%); }
.timeline-day-head { display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; background: var(--paper); padding: 0 var(--sp-1); }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-2); border: 2px solid var(--paper-2); flex: none; }
.timeline-day.today .timeline-dot { background: var(--danger); border-color: var(--danger-3); }
.timeline-date { font-size: var(--fs-1); color: var(--ink-3); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline-day.today .timeline-date { color: var(--danger); }
.timeline-day-items { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; position: relative; z-index: 1; }
.timeline-item {
  font-size: var(--fs-1); color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-1); padding: 6px var(--sp-2);
  text-align: left; cursor: pointer; font-family: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.timeline-item:hover { border-color: var(--brand-3); background: var(--brand-2); }
.timeline-item.today { border-color: var(--danger-3); background: var(--danger-2); }
.timeline-flash { outline: 2px solid var(--warn); outline-offset: 2px; border-radius: var(--r-2); animation: tl-flash 1.6s ease; }
@keyframes tl-flash { 0% { outline-color: var(--warn); } 100% { outline-color: transparent; } }
.media-card-body p { margin: 0; color: var(--ink-2); font-size: var(--fs-2); }
.media-card-body small { display: block; margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--fs-2); line-height: 1.55; }
.media-tags { margin-top: 6px; font-size: var(--fs-2); color: var(--brand); }
.media-project-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2); color: var(--brand); cursor: pointer; padding: 2px 9px; border-radius: var(--r-1); background: var(--brand-2); border: 1px solid var(--brand-3); }
.media-project-link:hover { text-decoration: underline; }
.media-card-actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--rule); }
.media-card-actions .secondary-button { padding: 6px var(--sp-3); font-size: var(--fs-3); border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-1); }
.media-card-actions .secondary-button:hover { background: var(--paper-2); }
.media-card-actions .delete-media { color: var(--danger); }
.media-card-actions .delete-media:hover { background: var(--danger-2); }
.cover-preview { display: block; width: 68px; height: 120px; border-radius: var(--r-1); border: 1px solid var(--rule); margin-top: var(--sp-1); object-fit: cover; }

/* ======================= 看板统计条 ======================= */
.board-head-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.board-head-row h2 { font-size: var(--fs-4); font-weight: 650; margin: 0; }
.board-head-row .muted { font-size: var(--fs-2); }
.board-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.board-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 9px var(--sp-4); display: flex; align-items: center; gap: 10px; }
.board-stat .bs-icon { width: 30px; height: 30px; border-radius: var(--r-1); display: grid; place-items: center; }
.board-stat .bs-icon svg { width: 15px; height: 15px; }
.board-stat b { font-size: var(--fs-4); display: block; line-height: 1.15; font-family: var(--num); font-variant-numeric: tabular-nums; }
.board-stat small { font-size: var(--fs-1); color: var(--ink-3); }
.bs-blue, .bs-green { background: var(--brand-2); color: var(--brand); }
.bs-amber { background: var(--warn-2); color: var(--warn); }
.bs-red { background: var(--danger-2); color: var(--danger); }
.bs-gray { background: var(--paper-2); color: var(--ink-2); }
.board-arrows { display: flex; gap: 6px; margin-left: auto; }
.board-arrow { width: 30px; height: 30px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--paper); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.board-arrow:hover { background: var(--brand-2); color: var(--brand); border-color: var(--brand-3); }
.board-arrow svg { width: 15px; height: 15px; }
.board-arrow:disabled { opacity: .35; cursor: not-allowed; }

/* 全系统待办区 */
.board-todos { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); margin-bottom: 14px; }
.board-todos-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); font-weight: 650; margin-bottom: 10px; }
.board-todos-head svg { width: 16px; height: 16px; color: var(--brand); }
.board-todos-cnt { background: var(--brand); color: var(--paper); border-radius: var(--r-1); font-size: var(--fs-1); padding: 0 7px; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.board-todos-hint { margin-left: auto; font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }
.board-todos-list { display: grid; gap: 6px; min-width: 0; }
.board-todo {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper-2);
  padding: 9px var(--sp-3); cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.board-todo:hover { border-color: var(--brand-3); background: var(--brand-2); }
.todo-ic { width: 26px; height: 26px; border-radius: var(--r-1); display: grid; place-items: center; flex: none; }
.todo-ic svg { width: 14px; height: 14px; }
.todo-red .todo-ic { background: var(--danger-2); color: var(--danger); }
.todo-orange .todo-ic { background: var(--warn-2); color: var(--warn); }
.todo-blue .todo-ic { background: var(--brand-2); color: var(--brand); }
.todo-label { font-size: var(--fs-1); font-weight: 650; padding: 1px 8px; border-radius: var(--r-1); flex: none; letter-spacing: .02em; }
.todo-red .todo-label { background: var(--danger-2); color: var(--danger); }
.todo-orange .todo-label { background: var(--warn-2); color: var(--warn); }
.todo-blue .todo-label { background: var(--brand-2); color: var(--brand); }
.todo-text { font-size: var(--fs-2); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-go { margin-left: auto; font-size: var(--fs-2); color: var(--brand); font-weight: 600; flex: none; }
.board-todos-ok { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--brand-deep); background: var(--brand-2); border: 1px dashed var(--brand-3); border-radius: var(--r-1); padding: 10px 14px; }
.board-todos-ok svg { width: 15px; height: 15px; }

/* ======================= 外贸单证 ======================= */
.doc-block-title { font-weight: 650; font-size: var(--fs-3); margin: var(--sp-1) 0 var(--sp-2); color: var(--ink); border-left: 3px solid var(--brand); padding-left: var(--sp-2); }
.doc-item-row input { margin: 0; padding: 7px var(--sp-2); font-size: var(--fs-3); }
.doc-item-row .it_amount { font-size: var(--fs-3); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#docSubtotal { font-size: var(--fs-3); border-top: 1px dashed var(--rule); padding-top: var(--sp-2); font-variant-numeric: tabular-nums; }
#docItems { max-height: 260px; overflow-y: auto; padding: 2px; }
#docItems::-webkit-scrollbar { width: 8px; }
#docItems::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: var(--r-1); }
.doc-count-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--brand-2); color: var(--brand); border: 1px solid var(--brand-3);
  border-radius: var(--r-1); padding: 2px 9px; font-size: var(--fs-2); cursor: pointer; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.doc-count-link:hover { background: var(--brand-3); }
.doc-count-link svg { width: 12px; height: 12px; }

/* ======================= 通知 ======================= */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--danger); color: var(--paper);
  font-size: 10px; line-height: 16px; text-align: center; padding: 0 var(--sp-1); font-variant-numeric: tabular-nums;
}
.notif-panel {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; width: 330px; max-height: 440px;
  overflow-y: auto; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-2); box-shadow: var(--sh-3); z-index: 60;
}
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--sp-3); border-bottom: 1px solid var(--rule); font-weight: 650; font-size: var(--fs-3); position: sticky; top: 0; background: var(--paper); }
.notif-header button { border: none; background: none; color: var(--brand); cursor: pointer; font-size: var(--fs-2); font-weight: 600; }
.notif-item { display: block; width: 100%; text-align: left; padding: 10px var(--sp-3); border-bottom: 1px solid var(--rule); cursor: pointer; font-size: var(--fs-3); color: var(--ink); background: var(--paper); }
.notif-item:hover { background: var(--paper-2); }
.notif-item.unread { background: var(--brand-2); }
.notif-item .notif-time { display: block; color: var(--ink-3); font-size: var(--fs-1); margin-top: 3px; }
.notif-empty { padding: var(--sp-5); text-align: center; color: var(--ink-3); font-size: var(--fs-3); }

/* ======================= 审核卡 ======================= */
.review-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 14px; margin-bottom: var(--sp-3); }
.review-section-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-4); font-weight: 650; margin: 6px 0 var(--sp-3); }
.review-section-title span { background: var(--danger-2); color: var(--danger); border: 1px solid var(--danger-3); border-radius: var(--r-1); padding: 0 8px; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.review-section-title + .review-section-title { margin-top: 22px; }
.review-card h3 { margin: var(--sp-1) 0 6px; font-size: var(--fs-4); }
.review-script { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); padding: 10px; font-size: var(--fs-3); line-height: 1.65; white-space: pre-wrap; margin: var(--sp-2) 0; }
.review-comment { margin-top: var(--sp-2); padding: var(--sp-2) 10px; border-radius: var(--r-1); background: var(--warn-2); color: var(--warn); border: 1px solid var(--warn-3); font-size: var(--fs-3); }
.review-actions { display: flex; gap: 10px; margin-top: 10px; align-items: stretch; }
.review-actions textarea { flex: 1; min-height: 52px; }
.review-buttons { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.review-buttons .primary, .review-buttons .danger-button { padding: var(--sp-2) 14px; white-space: nowrap; }

/* ============================================================================
   响应式：两档断点覆盖 1440 / 1080 / 手机 三态
   ≥1200  大屏 / 投屏      ≤1199  1080 笔记本      ≤759  手机 / 窄窗
   ========================================================================= */

/* —— 中屏：1080 及其以下的笔记本 —— */
@media (max-width: 1199px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .sidebar { width: 200px; }
  .page-content { padding: var(--sp-4) var(--sp-4) 40px; }
  .topbar { padding: 0 var(--sp-4); }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-item { border-bottom: 1px solid var(--rule); }
  .stat-item:nth-child(3n) { border-right: 0; }
  .dashboard-grid, .settings-layout { grid-template-columns: 1fr; }
  .knowledge-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .knowledge-stats > div { border-bottom: 1px solid var(--rule); }
  .knowledge-stats > div:nth-child(3n) { border-right: 0; }
  .knowledge-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-status { display: none; }
}

/* —— 手机 —— */
@media (max-width: 759px) {
  .mobile-only, .icon-button.mobile-only { display: grid; }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sh-3); }
  .sidebar.open { transform: translateX(0); }
  .main-column { grid-column: auto; width: 100%; }
  .topbar { height: 58px; padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar > div:first-child { flex-direction: row; align-items: center; gap: var(--sp-2); }
  .topbar h1 { font-size: var(--fs-4); }
  .topbar p, .user-chip span:last-child, #refreshButton { display: none; }
  .user-chip { border-left: 0; padding-left: 0; }
  .page-content { padding: var(--sp-3) var(--sp-3) 32px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { min-height: 84px; padding: var(--sp-3); }
  .stat-item:nth-child(3n) { border-right: 1px solid var(--rule); }
  .stat-item:nth-child(2n) { border-right: 0; }
  .quick-row { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-entry { justify-content: flex-start; }
  .document-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-stats > div { border-bottom: 1px solid var(--rule); }
  .document-stats > div:nth-child(2) { border-right: 0; }
  .document-stats > div:nth-child(2n) { border-right: 0; }
  .toolbar-left { flex-wrap: wrap; }
  .toolbar-select { width: 100%; }
  .knowledge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-stats > div:nth-child(3n) { border-right: 1px solid var(--rule); }
  .knowledge-stats > div:nth-child(2n) { border-right: 0; }
  .knowledge-card-grid { grid-template-columns: 1fr; }
  .knowledge-card { min-height: 0; }
  .knowledge-toolbar .toolbar-left { width: 100%; }
  .knowledge-detail-grid { grid-template-columns: 1fr; }
  .knowledge-detail-grid > div { border-right: 0; padding: var(--sp-4); }
  .page-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-left, .toolbar-right { justify-content: space-between; }
  .search-box { width: 100%; }
  .form-grid { grid-template-columns: 1fr; padding: var(--sp-4); }
  .form-grid label.full, .form-grid .form-actions { grid-column: auto; }
  .metrics-platform-grid { grid-template-columns: 1fr; }
  .metrics-platform .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-script-cols { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; place-items: end center; }
  .modal-panel { max-height: 92vh; border-radius: var(--r-2) var(--r-2) 0 0; }
  .task-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .task-summary > button { position: static; margin-top: 14px; }
  .task-book-grid, .task-workspace-grid { grid-template-columns: 1fr; }
  .task-document-list { grid-template-columns: 1fr; }
  .task-documents-panel > header { align-items: flex-start; }
  .task-book-section { border-right: 0; }
  .task-checklist-panel { border-right: 0; border-bottom: 1px solid var(--rule); }
  .update-composer { grid-template-columns: 1fr; }
  .update-composer textarea, .update-composer input, .update-composer button { grid-column: 1; grid-row: auto; }
  .comment-composer { grid-template-columns: 1fr; }
  .task-submission-record > header, .content-version-record > header { align-items: flex-start; flex-direction: column; }
  .submission-review-form > div { flex-wrap: wrap; }
  .content-review-workspace { grid-template-columns: 1fr; }
  .content-version-submit { border-right: 0; border-bottom: 1px solid var(--rule); }
  .document-review-summary { grid-template-columns: 42px minmax(0, 1fr); }
  .document-download { grid-column: 1 / -1; justify-content: center; }
  .document-review-grid { grid-template-columns: 1fr; }
  .document-review-grid > div:first-child { border-right: 0; }
  .world-clock { align-items: flex-start; flex-direction: column; gap: 10px; }
  .wc-clocks { gap: var(--sp-3); }
  .toast { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: 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;
  }
}