/* ========== Cloudflare 风格主题 · CSS 变量(浅色为主 / 深色)==========
 * Phase 1 改造:浅灰背景 + 更白卡片 + 细微阴影 + Inter 字体 + 字号系统化
 * 设计参考:cloudflare dashboard / stripe / linear */

/* 2026-08-05 Ben:项目健康三色 —— 卡住=红 / 要动手=蓝 / 正常=白。
   「正常」用纯白在浅色主题(白底)上等于隐形 → 按主题给两套值:
   深色主题用真白,浅色主题用中性灰(视觉重量最低,但看得见)。 */
:root {
  --ph-ok: #b6bcc6;
  --ph-ok-soft: rgba(182,188,198,.30);          /* 健康·正常(浅色主题:中性灰,白色在白底不可见) */
  --bg: #f7f7f8;             /* 主背景:cloudflare 浅灰 */
  --surface: #ffffff;        /* 卡片白底 */
  --surface-2: #fafafa;      /* 次级表面(hover / 表头) */
  --surface-3: #f3f4f6;      /* 嵌套区/分割 */
  --text: #1a1a1a;
  --text-2: #4b5563;
  --text-3: #6b7484;   /* 2026-08-13 Ben「字体和背景色反差太小」:原 #9ca3af 对比度不足 4.5:1 */
  --accent: #0875e1;
  --accent-hover: #066ad4;
  --accent-soft: rgba(8, 117, 225, 0.16);
  --border: #e5e7eb;         /* 卡片边框,极浅 */
  --border-strong: #d1d5db;
  /* Cloudflare 风阴影:1px 微立体 + 极淡环 */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.05);
  --green: #16a34a;
  --green-soft: rgba(22, 163, 74, 0.10);
  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, 0.08);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.10);
  --amber-strong: #a16207;   /* 浅底深琥珀文字(2026-07-08 UI统一) */
  --purple: #7c3aed;         /* AI/头部 类 */
  --purple-soft: rgba(124, 58, 237, 0.10);
  /* 候选人状态色 */
  --neutral: #4b5563;
  --neutral-soft: #ffffff;
  --orange: #d97706;
  --orange-soft: rgba(245, 158, 11, 0.14);
  --sky: #0369a1;
  --sky-soft: rgba(125, 211, 252, 0.22);
  --radius: 6px;             /* cloudflare 偏小圆角 */
  --radius-sm: 4px;
  --radius-lg: 10px;
  /* ★ v12:apple 风缓动曲线(动效精修,不改布局 token) */
  --ease: cubic-bezier(.4, 0, .2, 1);            /* 标准平滑 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* 减速渐入(apple 弹入感) */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* 轻回弹 */
  /* 字体栈:Inter 优先(若安装) → 系统中文 → 后备 */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
          'Segoe UI', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei',
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  /* ★ Phase 5 设计 token(2026-05-21):间距 + 字号系统化 */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --fs-xs:   10px;   /* tag / 角标 */
  --fs-sm:   11px;   /* 次级注释 */
  --fs-base: 12px;   /* 紧凑行(meta 行)*/
  --fs-md:   13px;   /* body 默认 */
  --fs-lg:   14px;   /* 按钮 */
  --fs-xl:   16px;   /* 子标题 */
  --fs-2xl:  18px;   /* h2 */
  --fs-3xl:  22px;   /* h1 */
  --fs-4xl:  28px;   /* 指标大数字 */
}

html[data-theme="dark"] {
  --ph-ok: #ffffff;          /* 健康·正常(深色主题:真白) */
  --ph-ok-soft: rgba(255,255,255,.22);
  --bg: #0f1419;             /* cloudflare 暗色背景 */
  --surface: #1a1f26;
  --surface-2: #232830;
  --surface-3: #2d333b;
  --text: #e8eaed;
  --text-2: #9ca3af;
  --text-3: #888e9b;   /* 2026-08-13 Ben「字体和背景色反差太小」:原 #6b7280 对比度不足 4.5:1 */
  --accent: #4a9eff;
  --accent-hover: #6cb0ff;
  --accent-soft: rgba(74, 158, 255, 0.24);
  --border: #2d333b;
  --border-strong: #3d4452;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0,0,0,0.4);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.14);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --amber-strong: #fbbf24;
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.16);
  --neutral: #cbd5e1;
  --neutral-soft: rgba(148, 163, 184, 0.10);
  --orange: #fbbf24;
  --orange-soft: rgba(251, 191, 36, 0.18);
  --sky: #7dd3fc;
  --sky-soft: rgba(56, 189, 248, 0.18);
}

/* ★ v12:Apple 主题(隔离试验田 — B 视觉 token + C 组件细节,完全不影响浅色/深色)
 * 靠 CSS 变量重定义,全站组件自动套用 apple 配色/圆角/阴影/字体;
 * 未定义的变量(候选人状态色等)继承 :root 浅色值。 */
html[data-theme^="apple"] {
  --ph-ok: #c3c7ce;
  --ph-ok-soft: rgba(195,199,206,.34);          /* 健康·正常(浅色) */
  /* 配色:apple.com 标志性偏暖白 + 近黑文字 + apple 蓝 */
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ececf0;
  --text: #1d1d1f;
  --text-2: #515154;
  --text-3: #707075;   /* 2026-08-13 Ben「字体和背景色反差太小」:原 #86868b 对比度不足 4.5:1 */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.08);
  --border: #d2d2d7;
  --border-strong: #c7c7cc;
  /* 柔和分层阴影(apple 风,比 cloudflare 更扩散更轻) */
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 14px 44px rgba(0,0,0,0.13), 0 4px 14px rgba(0,0,0,0.07);
  --green: #1d9a52; --green-soft: rgba(29,154,82,0.10);
  --red: #e0322f;   --red-soft: rgba(224,50,47,0.08);
  --amber: #c77700; --amber-soft: rgba(199,119,0,0.10);
  /* B:大圆角(apple 标志) */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  /* SF Pro 字体栈(macOS/iOS 原生,其它系统优雅降级) */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'PingFang SC', 'HarmonyOS Sans SC', 'Helvetica Neue', Inter, sans-serif;
  /* D:字号层级拉开(apple 强对比;用 var(--fs-*) 的组件自动跟随) */
  --fs-lg:   15px;   /* 14→15 按钮 */
  --fs-xl:   17px;   /* 16→17 子标题 */
  --fs-2xl:  21px;   /* 18→21 h2 */
  --fs-3xl:  28px;   /* 22→28 h1 */
  --fs-4xl:  36px;   /* 28→36 指标大数字 */
}
/* ★ 深色 Apple 主题(apple-dark)—— 仅覆盖配色/阴影,圆角·字体·留白等组件细节
 * 由上面 [data-theme^="apple"] 前缀选择器自动继承(本块源序在后→配色覆盖生效)。
 * 取色:Apple macOS/iOS 官方暗色系统色(systemGray dark + systemBlue dark 0a84ff)。 */
html[data-theme="apple-dark"] {
  --ph-ok: #ffffff;          /* 健康·正常(深色) */
  --ph-ok-soft: rgba(255,255,255,.22);
  --bg: #000000;             /* 纯黑(apple.com 暗色 hero 同款) */
  --surface: #1d1d1f;        /* 卡片:近黑 */
  --surface-2: #2c2c2e;      /* 次级表面(hover/表头)= systemGray6 dark */
  --surface-3: #3a3a3c;      /* 嵌套区 = systemGray5 dark */
  --text: #f5f5f7;           /* apple 暖白 */
  --text-2: #aeaeb2;
  --text-3: #939398;         /* 08-13 提对比度(原 #8e8e93); systemGray dark */
  --accent: #0a84ff;         /* systemBlue(dark) */
  --accent-hover: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.28);
  --border: #38383a;         /* systemGray4 dark */
  --border-strong: #48484a;  /* systemGray3 dark */
  /* 暗色更深更扩散的柔阴影 */
  --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 6px 22px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.62), 0 6px 18px rgba(0,0,0,0.45);
  /* 状态色:apple 暗色鲜艳系统色 */
  --green: #30d158;  --green-soft: rgba(48,209,88,0.16);
  --red: #ff453a;    --red-soft: rgba(255,69,58,0.16);
  --amber: #ff9f0a;  --amber-soft: rgba(255,159,10,0.16);
  --orange: #ff9f0a; --orange-soft: rgba(255,159,10,0.18);
  --neutral: #98989d; --neutral-soft: rgba(152,152,157,0.14);
  --sky: #64d2ff;    --sky-soft: rgba(100,210,255,0.18);
}
/* 深色 Apple:输入/下拉用次级表面,避免纯黑控件糊在一起 */
html[data-theme="apple-dark"] input,
html[data-theme="apple-dark"] textarea,
html[data-theme="apple-dark"] select,
html[data-theme="apple-dark"] .ipt { background: var(--surface-2); color: var(--text); }
/* C:Apple 专属组件细节(仅此主题生效) */
html[data-theme^="apple"] .btn-add,
html[data-theme^="apple"] .btn-ghost,
html[data-theme^="apple"] button.primary { border-radius: 980px; }   /* 药丸按钮 */
html[data-theme^="apple"] input,
html[data-theme^="apple"] textarea,
html[data-theme^="apple"] select,
html[data-theme^="apple"] .ipt { border-radius: 8px; }
html[data-theme^="apple"] .modal-content { border-radius: 18px; }
html[data-theme^="apple"] h1, html[data-theme^="apple"] h2,
html[data-theme^="apple"] h3, html[data-theme^="apple"] .modal-header h2 {
  letter-spacing: -0.022em; font-weight: 600;   /* apple 紧字距 + semibold */
}
/* 卡片 hover 更明显上浮(apple 质感) */
html[data-theme^="apple"] .project-item:hover,
html[data-theme^="apple"] .cand-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* D:字体渲染 + 行高(apple 抗锯齿,更舒展) */
html[data-theme^="apple"] body {
  line-height: 1.47;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html[data-theme^="apple"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
/* D:关键标题显式加大(硬编 font-size 的标题不跟 --fs-*,这里专属覆盖) */
html[data-theme^="apple"] .modal-header h2 { font-size: 19px; }
html[data-theme^="apple"] .weekly-plan-card h3,
html[data-theme^="apple"] .okr-card h3,
html[data-theme^="apple"] .widget-box h3,
html[data-theme^="apple"] .detail-section h4 { font-size: 15px; letter-spacing: -0.01em; }
/* B:关键容器留白加大(apple 大留白,仅此主题) */
html[data-theme^="apple"] .modal-header { padding: 18px 26px; }
html[data-theme^="apple"] .modal-body { padding: 22px 26px; }
html[data-theme^="apple"] .okr-card,
html[data-theme^="apple"] .weekly-plan-card,
html[data-theme^="apple"] .widget-box { padding: 18px 20px; }
html[data-theme^="apple"] .detail-section { margin-bottom: 18px; }
/* 用户管理容器(apple 主题);v177:34%→51%→61%→再 ×1.2 ≈ 73% + 靠左摆放;10 列宽表格内部横滚防破版 */
html[data-theme^="apple"] #userAdminContent {
  max-width: 73%;
  margin: 0 auto 0 0;   /* 上0 右auto 下0 左0 = 靠左对齐,右侧留白 */
}
html[data-theme^="apple"] #userAdminContent table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* ★ 2026-07-12 Ben 选型三主题(B/D/E):Linear 暗黑科技 / Notion 纸感 / Stripe 商务。
 * 全靠 CSS 变量重定义(与 apple 主题同机制),未覆盖的变量继承 :root 浅色值。 */
html[data-theme="linear"] {
  --bg: #0e0f13;             /* Linear 近黑蓝底 */
  --surface: #16171d;
  --surface-2: #1c1d25;
  --surface-3: #24252d;
  --text: #e8e8ea;
  --text-2: #a3a4ad;
  --text-3: #8a8b94;
  --accent: #7c6cf6;         /* Linear 紫 */
  --accent-hover: #8f7ff8;
  --accent-soft: rgba(124, 108, 246, 0.26);
  --border: #24252d;
  --border-strong: #34353f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0,0,0,0.45);
  --green: #4ade80;  --green-soft: rgba(74,222,128,0.14);
  --red: #f87171;    --red-soft: rgba(248,113,113,0.14);
  --amber: #fbbf24;  --amber-soft: rgba(251,191,36,0.14);
  --amber-strong: #fbbf24;
  --purple: #a99ef8; --purple-soft: rgba(169,158,248,0.16);
  --neutral: #cbd5e1; --neutral-soft: rgba(148,163,184,0.10);
  --orange: #fbbf24; --orange-soft: rgba(251,191,36,0.16);
  --sky: #7dd3fc;    --sky-soft: rgba(56,189,248,0.16);
  --radius: 6px; --radius-sm: 4px; --radius-lg: 8px;   /* Linear 小圆角利落感 */
}
html[data-theme="linear"] input,
html[data-theme="linear"] textarea,
html[data-theme="linear"] select,
html[data-theme="linear"] .ipt { background: var(--surface-2); color: var(--text); }
html[data-theme="linear"] .kpi-value,
html[data-theme="linear"] .stat-number { font-family: var(--font-mono); }   /* 数字终端感 */

/* (notion 主题 2026-07-12 Ben 试后不要,已删;localStorage 存过 notion 的用户由白名单自动回落 apple) */
html[data-theme="stripe"] {
  --bg: #f6f8fc;             /* Stripe 淡蓝白底 */
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --text: #0a2540;           /* Stripe 藏蓝文字 */
  --text-2: #425466;
  --text-3: #667289;   /* 2026-08-13 Ben「字体和背景色反差太小」:原 #727f96 对比度不足 4.5:1 */
  --accent: #635bff;         /* Stripe 紫 */
  --accent-hover: #5851e8;
  --accent-soft: rgba(99, 91, 255, 0.16);
  --border: #e3e8ef;
  --border-strong: #cbd5e1;
  --shadow: 0 1px 2px rgba(10, 37, 64, 0.06), 0 0 0 1px rgba(10, 37, 64, 0.03);
  --shadow-md: 0 3px 10px rgba(10, 37, 64, 0.08), 0 0 0 1px rgba(10, 37, 64, 0.03);
  --shadow-lg: 0 10px 32px rgba(10, 37, 64, 0.12), 0 2px 8px rgba(10, 37, 64, 0.06);
  --green: #14804a;  --green-soft: rgba(20,128,74,0.10);
  --red: #cd3d64;    --red-soft: rgba(205,61,100,0.08);
  --amber: #b7791f;  --amber-soft: rgba(183,121,31,0.10);
  --amber-strong: #92610f;
  --purple: #635bff; --purple-soft: rgba(99,91,255,0.10);
  --sky: #00d4ff;    --sky-soft: rgba(0,212,255,0.14);
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
}

/* C:统一空状态样式(全主题通用 — JS 用 .empty-state 容器时生效;apple 下更精致) */
.empty-state {
  text-align: center; padding: 36px 20px; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.empty-state .es-ico { font-size: 32px; line-height: 1; opacity: .42; margin-bottom: 6px; }
.empty-state .es-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.empty-state .es-hint { font-size: 12px; color: var(--text-3); max-width: 320px; }
html[data-theme^="apple"] .empty-state .es-ico { opacity: .5; font-size: 36px; }

/* Inter 字体引入 — 国内 CDN(bootcdn,失败时优雅降级到系统字体)*/
@import url('https://cdn.bootcdn.net/ajax/libs/inter-ui/3.19.3/inter.min.css');

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;             /* cloudflare 略小,提高信息密度 */
  line-height: 1.5;
  display: flex;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  /* 🔴 2026-08-19 Ben「显示器上看不清晰」根因:antialiased 关掉了 subpixel 渲染 ——
     在 Retina(2x)上更精致,但在普通 1080p(1x,约 92PPI)显示器上字会变细发虚。
     → 只在 2x 及以上屏启用(见下方 media query),1x 屏用系统默认 subpixel,笔画更实。
     公司同事多为普通显示器,这条影响所有人,不只 Mac mini。 */
  font-feature-settings: "tnum" 1, "ss01" 1;   /* 等宽数字 + 风格化备选 */
  text-rendering: optimizeLegibility;
}
/* 高分屏(Retina / 2K 缩放 / 4K)才开抗锯齿;普通 1x 屏保持 subpixel = 更清晰 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}
/* 普通 1x 屏:极小字号(10-11px)在低 PPI 下最容易糊 → 抬到可读下限,并加一点字重 */
@media (max-resolution: 191dpi) and (-webkit-max-device-pixel-ratio: 1.99) {
  body { text-rendering: optimizeSpeed; }        /* 关掉连字/字距微调,笔画更锐 */
  [style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 11px !important; }
  [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
}

/* 全局字号阶梯(cloudflare 风) */
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; }

/* 滚动条:cloudflare 极细 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3d4452; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4d5563; }

/* ===== 主题切换按钮 ===== */
#themeToggle {
  position: fixed; top: 14px; right: 14px; z-index: 200;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
#themeToggle:hover { background: var(--surface-2); }

/* ===== 登录 ===== */
/* ===== 登录页(国际范 SaaS 风,Stripe/Linear 调性)===== */
/* ===== 登录页(v168:左右分栏 split-screen + 玻璃拟态,固定深蓝科技风,不随明暗主题) ===== */
#loginPage {
  display: flex;
  width: 100%; min-height: 100vh;
  background:
    url('/static/login_bg.jpg?v=2') center/cover no-repeat,
    #0a1428;   /* 蓝紫曲面壁纸 + 兜底深蓝;换高清图时同名覆盖并把 ?v=1 递增即可 */
  position: relative; overflow: hidden;
  font-feature-settings: "tnum" "ss01";
}

/* ---- 左:品牌英雄区 ---- */
.login-hero {
  position: relative; z-index: 1;
  flex: 1 1 50%; min-width: 0;
  padding: 56px 60px;
  display: flex; flex-direction: column;
  color: #fff;
  background: transparent;   /* 2026-06-18:透明,让全屏背景视频透出来 */
  overflow: hidden;
}
.login-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
}
.login-hero-glow {
  position: absolute; pointer-events: none;
  width: 520px; height: 520px; right: -120px; bottom: -140px;
  background: radial-gradient(circle, rgba(59,130,246,.18), transparent 65%);
}
/* 2026-06-18:全屏登录背景视频(铺满整个 #loginPage,在左右两半之下;#loginPage 自带壁纸作兜底/封面) */
.login-bg-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* 全屏暗化叠层:压暗视频保证左侧白标题 + 右侧登录卡可读(左深、中浅、右略压) */
.login-bg-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(7,11,24,.80) 0%, rgba(8,13,28,.50) 32%, rgba(8,13,28,.20) 58%, rgba(8,13,28,.34) 100%);
}
.login-hero-brand {
  position: relative; z-index: 1;
  margin-top: auto;   /* 配合 .login-hero-main 的 margin-bottom:auto,把 logo+标题作为一组垂直居中 */
  display: flex; align-items: center; gap: 14px; color: #fff;
}
.login-hero-brand .brand-logo-img {
  height: 92px; width: auto; object-fit: contain;   /* 2026-06-18:logo 放大 2 倍(46→92);与下方标题间距由 .login-hero-main margin-top:18px 固定、不受影响 */
  image-rendering: -webkit-optimize-contrast; transform: translateZ(0);
  filter: brightness(0) invert(1);   /* 深灰 logo 转纯白,在深蓝背景上醒目 */
}
.login-hero-brand .brand-logo-fallback {
  width: 92px; height: 92px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 10px; color: #fff;
}
.login-hero-brand .hero-brand-name {
  font-size: 13px; font-weight: 600; letter-spacing: .4px; color: #cbd5e1;
}
.login-hero-main {
  position: relative; z-index: 1;
  margin-top: 18px; margin-bottom: auto;   /* logo 紧贴标题上方(18px 间距),整组垂直居中 */
}
.login-hero-title {
  font-size: clamp(40px, 5vw, 66px); line-height: 1.04;
  font-weight: 700; letter-spacing: -1px; margin: 0 0 22px; color: #fff;
}
.login-hero-sub {
  font-size: 15px; line-height: 1.6; color: #94a3b8;
  max-width: 360px; margin: 0; font-weight: 400;
}
.login-hero-foot {
  position: relative; z-index: 1;
  font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: .3px;
}

/* ---- 右:登录面板(玻璃拟态卡) ---- */
.login-panel {
  flex: 1 1 50%; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 56px 60px; position: relative; z-index: 1;
  background: transparent;   /* 2026-06-18:透明,让全屏背景视频铺到右半(登录卡仍是玻璃浮层) */
}
.login-card {
  position: relative; z-index: 1;
  width: 380px; max-width: 100%;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 40px 38px 28px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.5);
}
.login-card-title {
  font-size: 26px; font-weight: 600; color: #fff;
  letter-spacing: -.3px; margin: 0 0 28px;
}

/* 输入字段 */
.login-field { margin-bottom: 20px; }
.login-field label {
  display: block; font-size: 13px; font-weight: 500;
  color: #cbd5e1; margin-bottom: 8px; letter-spacing: .2px;
}
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-input-ic {
  position: absolute; left: 13px; display: inline-flex;
  color: #64748b; pointer-events: none;
}
.login-input-ic .icon { width: 17px; height: 17px; stroke-width: 1.8; }
#loginPage .login-field input {
  width: 100%; padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #f1f5f9; border-radius: 10px;
  font-size: 14px; font-family: inherit; outline: none;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
#loginPage .login-field input::placeholder { color: #64748b; }
#loginPage .login-field input:hover { border-color: rgba(255,255,255,.22); }
#loginPage .login-field input:focus {
  background: rgba(255,255,255,.07);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.20);
}
/* Chrome 自动填充时保持深色玻璃风(覆盖浏览器默认浅色 UA 样式) */
#loginPage .login-field input:-webkit-autofill,
#loginPage .login-field input:-webkit-autofill:hover,
#loginPage .login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,.88) inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #f1f5f9;
  transition: background-color 9999s ease-out 0s;
}

/* 密码框右侧显隐切换 */
.login-pwd-toggle {
  position: absolute; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent; border: 0; cursor: pointer;
  color: #64748b; border-radius: 6px;
  transition: color .15s, background .15s;
}
.login-pwd-toggle:hover { color: #cbd5e1; background: rgba(255,255,255,.06); }
.login-pwd-toggle .icon { width: 18px; height: 18px; stroke-width: 1.8; }

/* 主按钮(渐变 + 箭头) */
.login-submit {
  width: 100%; padding: 13px 16px; margin-top: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .5px;
  border: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -4px rgba(37,99,235,.5);
  transition: transform .15s, box-shadow .2s, background .2s;
  font-family: inherit;
}
.login-submit:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px -6px rgba(37,99,235,.6);
}
.login-submit:hover .lb-arrow { transform: translateX(3px); }
.login-submit:active { transform: translateY(0); transition: transform .08s; }
.login-submit .lb-arrow {
  display: inline-flex;
  transition: transform .25s cubic-bezier(.34, 1.18, .64, 1);
}
.login-submit .lb-arrow .icon { width: 16px; height: 16px; stroke-width: 2; }

.login-error {
  color: #f87171; margin-top: 14px;
  font-size: 13px; min-height: 18px; text-align: center;
}
.login-card-foot {
  margin-top: 24px; text-align: right;
  font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: .3px;
}
/* 2026-09-25:ICP 备案号,整页底部居中(窄屏 hero 隐藏时也在) */
.login-icp {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .3px;
  text-decoration: none; white-space: nowrap;
}
.login-icp:hover { color: rgba(255,255,255,.85); text-decoration: underline; }

/* ---- 响应式:窄屏隐藏左侧 hero,只留登录卡居中 ---- */
@media (max-width: 860px) {
  .login-hero { display: none; }
  .login-panel { flex: 1 1 100%; }
}

/* 登录页可见时,强制隐藏主应用的顶部浮层(「我的效率」浮条 / 右上工具条),
   彻底防止登出或会话失效后白色空块残留在登录页 —— 不依赖 JS 执行路径,
   只要 #loginPage 未被显式 display:none(即登录页可见)就隐藏 */
body:has(#loginPage:not([style*="none"])) #efficiencyBanner,
body:has(#loginPage:not([style*="none"])) #topRightBar {
  display: none !important;
}

/* ===== 主体布局 ===== */
#mainPage { display: none; width: 100%; }
.sidebar {
  width: 400px; background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: 1px 0 3px rgba(16, 24, 40, 0.03);  /* cloudflare 风极淡侧栏阴影 */
}
.sidebar-header {
  padding: 18px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}

/* ===== 企业级 SVG 图标统一样式 ===== */
.icon {
  display: inline-block; flex-shrink: 0;
  vertical-align: -2px;   /* 跟文字基线对齐 */
}
button .icon, a .icon, .tab-btn .icon { margin-right: 6px; }
button .icon:only-child, a .icon:only-child { margin-right: 0; }

/* 顶部品牌小条:深色商务风(替代彩色 emoji)*/
.sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sidebar-brand .brand-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: var(--text);
  letter-spacing: 0.3px;
}
.sidebar-brand .brand-actions {
  display: flex; align-items: center; gap: 4px;
}
.brand-qbtn {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.brand-qbtn:hover { background: var(--surface-2); border-color: var(--accent); }
.brand-qbtn.primary {
  background: var(--accent); color: white; border-color: var(--accent);
}
.brand-qbtn.primary:hover { background: var(--accent-hover); }
.sidebar-brand .brand-row .icon { color: #2563eb; width: 22px; height: 22px; }
.sidebar-brand .brand-logo-mini {
  width: 26px; height: 26px; object-fit: contain;
  border-radius: 5px;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
/* 🔴 2026-08-09 Ben:「深色主题这个 logo 的灰度减少」→「要再白一点」。
   logo.svg 是单色 #4d4d4d(RGB 77),在深色底上又暗又脏。
   ⚠️ 第一版我用 opacity:.6 —— 方向错了:在深底上降透明度是**更暗**,不是更白。
   改用 brightness 提亮:77 × 2.6 ≈ 200(#c8c8c8),比白色的「MindHub」字样略暗一档,
   主次分明又看得清。只作用于深色三套;stripe 是浅色主题(--bg #f6f8fc),提亮会糊成一片。 */
html[data-theme="dark"] .sidebar-brand .brand-logo-mini,
html[data-theme="apple-dark"] .sidebar-brand .brand-logo-mini,
html[data-theme="linear"] .sidebar-brand .brand-logo-mini { filter: brightness(2.6); }

.sidebar-brand .brand-logo-mini-fallback {
  align-items: center; justify-content: center;
  color: #2563eb;
}
/* ===== 退出按钮(极简,无边框,Notion / Linear 风)=====
   默认:纯图标,中性灰,无边框无背景
   Hover:浅灰圆形底 + 图标染红 + 微微向右滑(暗示"离开")
   Active:scale 0.9
   Focus:红色细环
   隐藏 label(只有 SVG 视觉,title 属性给 tooltip) */
.logout-btn {
  background: transparent;
  border: 0;
  padding: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.logout-btn .lb-icon {
  display: inline-flex;
  transition: transform .25s cubic-bezier(.34, 1.18, .64, 1);
}
.logout-btn .lb-icon .icon { stroke-width: 1.8; width: 18px; height: 18px; }
.logout-btn .lb-label { display: none; }  /* 隐藏文字标签 */

.logout-btn:hover {
  background: rgba(220, 38, 38, .08);
  color: #dc2626;
}
.logout-btn:hover .lb-icon {
  transform: translateX(2px);
}
.logout-btn:active {
  transform: scale(.9);
  transition: transform .1s;
}
.logout-btn:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}
[data-theme="dark"] .logout-btn { color: #64748b; }
[data-theme="dark"] .logout-btn:hover {
  background: rgba(220, 38, 38, .14);
  color: #fca5a5;
}

/* tab 栏:SVG 图标 + 文字 */
.tab-nav .tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
}
.tab-nav .tab-btn .icon { opacity: 0.7; }
.tab-nav .tab-btn.active .icon { opacity: 1; color: var(--accent); }

/* 企业级主按钮(右上角 +)*/
.ent-btn-primary {
  background: var(--accent); color: #fff; border: 0;
  width: 34px; height: 34px; border-radius: 8px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(37,99,235,.25);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ent-btn-primary:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37,99,235,.4);
  transform: translateY(-1px);
}

/* + 下拉菜单项(SVG 图标 + 文字)*/
.add-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.add-menu-item:last-child { border-bottom: 0; }
.add-menu-item:hover {
  background: var(--surface-2);
}
.add-menu-item .icon { color: var(--accent); opacity: 0.9; }

/* 个人卡内月度操作行(SVG 图标 + 数字)*/
.user-card .act-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.user-card .uc-act {
  display: inline-flex; align-items: center; gap: 3px;
  color: #fff;
}
.user-card .uc-act .icon { opacity: 0.85; }

/* 个人卡(淡蓝渐变,商务克制)*/
.user-card {
  margin: 5px 12px;
  background: linear-gradient(160deg, #f5f9ff 0%, #e3edff 100%);
  color: #1e293b;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dbe5f7;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .08);
}

/* v175:头像 + 姓名块 水平排布(头像左,姓名+职级·部门 右)*/
.user-card .uc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 4px;
}
.user-card .uc-header .uc-text-block {
  flex: 1; min-width: 0;
}

/* v175:头像放大到 54px(面积 ~3 倍 of 30px),靠左不再居中 */
.user-card .uc-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center; justify-content: center;
  margin: 0;            /* v175:flex 容器接管定位,不再 auto 居中 */
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .18);
  cursor: pointer; position: relative; overflow: hidden;
  flex-shrink: 0;
}
.user-card .uc-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  transition: filter .2s, transform .2s;
  /* Retina 锐利化 */
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
.user-card .uc-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 20px; font-weight: 600;
  color: #2563eb;
  background: linear-gradient(160deg, #dbeafe, #bfdbfe);
  transition: filter .2s;
}
.user-card .uc-avatar:hover img,
.user-card .uc-avatar:hover .uc-avatar-fallback {
  filter: blur(3px) brightness(.85);
}
.user-card .uc-avatar-edit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  background: rgba(30, 64, 175, .92); color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.user-card .uc-avatar:hover .uc-avatar-edit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.user-card .uc-avatar-edit .icon { width: 16px; height: 16px; }

/* 姓名 + 职级·部门 — v175 改左对齐(配合 .uc-header flex 布局) */
.user-card .uc-name {
  text-align: left; font-size: 15px; font-weight: 600;
  line-height: 1.2; letter-spacing: 0.2px;
  color: #1e293b;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
}
.user-card .uc-leader-badge {
  display: inline-flex; align-items: center;
  font-size: 8px; font-weight: 700; letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  padding: 1px 5px; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(217, 119, 6, .4);
}
.user-card .uc-meta {
  text-align: left; font-size: 11px; color: #64748b;
  margin: 2px 0 0;
  letter-spacing: 0.2px;
}
.user-card .uc-meta .sep { color: #94a3b8; margin: 0 8px; }

/* 快捷入口卡(公司库 + Mapping)— 个人卡片内 2 张并列 */
.user-card .uc-quick-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 14px;
}
.user-card .uc-tile {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  background: rgba(255, 255, 255, .75);
  border: 1px solid #c8d7ee;
  border-radius: 8px;
  transition: all .15s;
}
.user-card .uc-tile:hover {
  background: rgba(255, 255, 255, .95);
  border-color: #5b8def;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(91, 141, 239, .2);
}
.user-card .uc-tile-ic {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #e3edff; color: #2563eb; border-radius: 8px;
}
.user-card .uc-tile-body { min-width: 0; flex: 1; }
.user-card .uc-tile-title {
  font-size: 12px; font-weight: 600; color: #0f172a;
  line-height: 1.2;
}
.user-card .uc-tile-hint {
  font-size: 10px; color: #64748b; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 数据行 */
.user-card .uc-rows {
  border-top: 1px solid #d4e1f7;
  padding: 1px 0;
  background: rgba(255, 255, 255, .55);  /* 微白透叠层提升对比 */
}
.user-card .uc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 14px; font-size: 12px;
  border-bottom: 1px solid #e3edff;
}
.user-card .uc-row:last-child { border-bottom: 0; }
.user-card .uc-row .lbl { color: #64748b; font-weight: 400; }
.user-card .uc-row .val {
  color: #1e293b; font-weight: 600;
  font-feature-settings: "tnum";
}
.user-card .uc-row .val.big { font-size: 14px; color: #1e40af; }
.user-card .uc-row .val.dim { color: #94a3b8; font-weight: 400; }

/* Leader 团队段落分割线 */
.user-card .uc-team-title {
  text-align: center; font-size: 11px;
  color: #64748b;
  margin: 3px 0 2px;
  padding-top: 4px;
  border-top: 1px solid #d4e1f7;
  text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 500;
}

/* 月度三指标行(SVG + 数字)在淡背景下用深色 */
.user-card .uc-act { color: #1e293b; }
.user-card .uc-act .icon { color: #2563eb; opacity: 0.85; }

/* ===== 团队卡(独立卡片,放个人卡下方,浅紫调和个人卡蓝调区分)===== */
.user-card.team-card {
  margin-top: 8px;
  margin-bottom: 6px;
  background: linear-gradient(160deg, #faf5ff 0%, #ede9fe 100%);
  border: 1px solid #e2d6f8;
  box-shadow: 0 2px 8px rgba(139, 92, 246, .08);
}
.user-card.team-card .team-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 14px 3px;
  border-bottom: 1px solid #e2d6f8;
}
.user-card.team-card .team-header .team-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #1e293b;
}
.user-card.team-card .team-header .team-title .icon {
  color: #7c3aed;
}
.user-card.team-card .team-header .team-size {
  font-size: 11px; font-weight: 600; color: #7c3aed;
  background: rgba(124, 58, 237, .12); padding: 2px 8px; border-radius: 10px;
}
.user-card.team-card .uc-row {
  border-bottom-color: #ede9fe;
}
.user-card.team-card .uc-row .val.big { color: #6d28d9; }
.user-card.team-card .uc-act .icon { color: #7c3aed; }
.user-card.team-card .uc-rows { background: rgba(255,255,255, .55); }

/* ===== 深色主题(dark + apple-dark)用户卡/团队卡适配 =====
 * 原 .user-card 整块用浅蓝/浅紫渐变 + 硬编 slate 文字色,深背景下亮色卡片突兀。
 * 这里只在深色主题下把背景/文字/分割线改成主题变量,浅色/Apple浅色不受影响。 */
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card {
  background: var(--surface-3);
  border-color: var(--border);
}
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-rows,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card .uc-rows {
  background: transparent;
  border-top-color: var(--border);
}
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-row,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card .uc-row {
  border-bottom-color: var(--border);
}
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-name,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-row .val,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-act,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card .team-header .team-title { color: var(--text); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-meta,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-meta .sep,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-row .lbl,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-team-title { color: var(--text-2); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-row .val.big,
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-act .icon { color: var(--accent); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card .uc-row .val.big { color: var(--accent); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-row .val.dim { color: var(--text-3); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-avatar { background: var(--surface-3); border-color: var(--surface-3); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-avatar-fallback { background: var(--surface-3); color: var(--accent); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-tile { background: var(--surface-3); border-color: var(--border); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-tile-title { color: var(--text); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-tile-hint { color: var(--text-3); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card .uc-tile-ic { background: var(--accent-soft); color: var(--accent); }
:is(html[data-theme="dark"], html[data-theme="apple-dark"], html[data-theme="linear"]) .user-card.team-card .team-header { border-bottom-color: var(--border); }
.group-btns {
  display: flex; gap: 0;
  padding: 10px 16px 0;          /* 顶部留白克制,给"展开剩余"留出更多空间 */
  margin-top: 0;
  border-bottom: 1px solid var(--border);
}
.group-btn {
  flex: 1; background: transparent; border: none; color: var(--text-2);
  padding: 9px 8px; cursor: pointer; font-weight: 500; font-size: 12px;
  border-bottom: 2px solid transparent; transition: all .12s;
}
.group-btn:hover { color: var(--text); }
.group-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.project-list { flex: 1; overflow-y: auto; padding: 10px 14px; }
.project-item {
  /* 2026-07-22 Ben:行距压到 3/4(padding 12→5px · 间距 6→3px,卡片总占位 72→54px) */
  padding: 5px 14px; margin-bottom: 3px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .12s;
}
.project-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.project-item.active { background: var(--accent-soft); border-color: var(--accent); }
.status-pill { font-size: 10px; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.s-active { background: var(--accent-soft); color: var(--accent); }
.s-paused { background: var(--amber-soft); color: var(--amber); }

.main { flex: 1; overflow-y: auto; padding: 60px 28px 24px; background: var(--bg); }
/* 2026-06-04:主内容区顶部固定遮罩 —— 内容上翻被它挡住,不越过顶栏。盖在内容之上、弹窗(z100)/顶栏按钮(z200)之下 */
#mainTopMask {
  position: fixed; top: 0; left: 400px; right: 0; height: 56px;
  background: var(--bg); z-index: 50; border-bottom: 1px solid var(--border);
}
/* ↑ 顶部 60px:避开右上 fixed 按钮组(只读/语言/主题),全屏 widget 不再重叠 */
.main h1 { font-weight: 600; font-size: 22px; margin: 4px 0 4px; }
.jd-box {
  background: var(--surface);
  outline: 0.5px solid var(--accent);
  outline-offset: -0.5px;
  border-radius: var(--radius);
  padding: 10px 20px;            /* 2026-07-25 Ben:配合行距压缩,上下内边距同步收(16→10)*/
  margin: 14px 0 18px;
  /* 2026-07-25 Ben:字体与左侧项目信息卡(.project-meta-rows .ml-vl)完全一致 —— 12px / var(--text) /
     同一字族(继承 body,不单设 letter-spacing),避免左右两栏观感割裂 */
  font-size: 12px; color: var(--text);
  max-height: 280px; overflow-y: auto;
  /* v41:严格靠左对齐 + 段落留白(行距 1.85,段后空白)*/
  text-align: left !important;
  white-space: pre-wrap;
  line-height: 1.11;             /* 2026-07-25 Ben:正文行距压到 3/5(1.85×0.6≈1.11),同屏看更多内容 */
  word-break: break-word;
  letter-spacing: normal;         /* 2026-07-25 Ben:与左栏一致(原 0.2px 让右侧看着更松) */
  box-shadow: 0 0 0 1px var(--accent-soft);
}
/* v41:JD 段落分隔(连续两个换行视为段落,加额外间距)*/
.jd-box br + br { content: ''; display: block; margin-top: 5px; }   /* 2026-07-25 Ben:段间距同步压 3/5(8→5)*/
[data-theme="dark"] .jd-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.18);
}

/* ===== 按钮(Workday:实心主 / 描边次)===== */
button.primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 600;
  cursor: pointer; font-size: 13px; transition: background .12s;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:disabled { opacity: .5; cursor: default; }
/* ===== 按钮(cloudflare 风) ===== */
.btn-add {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
  font-weight: 500; line-height: 1.4; transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(8,117,225,0.18);
}
.btn-add:hover { background: var(--accent-hover); border-color: var(--accent-hover);
  box-shadow: 0 2px 4px rgba(8,117,225,0.24); transform: translateY(-0.5px); }
.btn-add:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(8,117,225,0.18); }
.btn-add.added { background: var(--green); border-color: var(--green); cursor: default; box-shadow: none; }
.btn-add:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* 🔴 2026-08-13 Ben 报「字体和背景色反差太小」:btn-primary / btn-secondary 在 JS 里被用了,
   但 CSS 从来没定义过 → 浏览器给默认样式(浅底 + 继承的浅色字)= 几乎看不见。
   这里补齐定义:btn-primary = 主操作(与 btn-add 同视觉,承担「派发/保存」这类确认动作);
   btn-secondary = 次级操作(与 btn-ghost 同视觉)。以后再用这两个类名不会再出白底白字。 */
.btn-primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
  font-weight: 500; line-height: 1.4; transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(8,117,225,0.18);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
  font-weight: 500; line-height: 1.4; transition: all .15s ease;
}
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
  font-weight: 500; line-height: 1.4; transition: all .15s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-ghost:active { background: var(--surface-2); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.added-badge {
  background: var(--green-soft); color: var(--green); font-size: 10px;
  padding: 3px 7px; border-radius: 3px; margin-left: 6px; display: inline-block;
}
#logoutBtn {
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border-strong);
  padding: 6px 13px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
  transition: all .12s;
}
#logoutBtn:hover { color: var(--red); border-color: var(--red); }

/* ===== 候选人卡片(cloudflare 风:细微阴影 + hover 上抬)===== */
.cand-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px;
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  transition: all .15s ease;
}
.cand-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.cand-item.target { border-left-color: var(--green); }
.cand-item.indirect { border-left-color: var(--amber); }
.cand-item.sub-indirect { border-left-color: var(--red); }
.cand-name { color: var(--accent); font-weight: 600; cursor: pointer; white-space: nowrap; }
.cand-name:hover { text-decoration: underline; }
/* 2026-06-20:项目保存被拦时,高亮"没填完整"的必填字段(红框+底色),滚动定位到第一个 */
.field-missing { border-color: var(--red) !important; box-shadow: 0 0 0 2px var(--red-soft) !important; background: var(--red-soft) !important; }
.cand-meta { font-size: 13px; color: var(--text-2); display: flex; gap: 16px; flex-wrap: wrap; }
/* 🔴 2026-08-07 Ben「名字要对齐」:原来 .avatar 只是 inline-block、宽度随内容 ——
   真实照片是固定 32px,emoji 默认头像却只有 20px 左右(字符宽度),
   于是有照片的行和没照片的行,名字起点差了十几像素,一列名字参差不齐。
   给容器固定尺寸 + 居中,两种头像占同样的位置,名字自然对齐。 */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  vertical-align: middle; margin-right: 8px;
}
/* 下面两处的头像本来就更大,容器同步放大,保持各自场景内对齐 */
.cand-item .avatar { width: 36px; height: 36px; }
.modal-header .avatar { width: 40px; height: 40px; }
.avatar-emoji { font-size: 20px; }
.avatar-img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; object-position: center 30%;   /* 显示头部偏上,凸显面部 */
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.modal-header .avatar-img { width: 40px; height: 40px; }
.cand-item .avatar-img { width: 36px; height: 36px; }    /* 列表中也大一些 */

/* ===== 弹窗(cloudflare 风:深背景遮罩 + 圆润大卡)===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(4px);
  display: none; justify-content: center; align-items: center; z-index: 100;
}
.modal-content {
  background: var(--bg); width: 800px; max-height: 86vh;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  padding: 16px 22px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.modal-body { padding: 18px 22px; overflow-y: auto; background: var(--bg); }
.close-btn {
  background: none; border: none; color: var(--text-3);
  font-size: 22px; cursor: pointer; line-height: 1;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.close-btn:hover { color: var(--text); background: var(--surface-2); }

/* ===== Tab(Workday:下划线式)===== */
.tab-nav {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-top: 10px;
}
.tab-btn {
  background: transparent; border: none; color: var(--text-2);
  padding: 9px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 2px solid transparent; transition: all .12s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== 小组件 ===== */
.widget-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px; color: var(--text-2);
}

/* ===== 候选人详情(cloudflare 卡片风) ===== */
.detail-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.detail-section:hover { box-shadow: var(--shadow-md); }
.detail-section h4 {
  margin: 0 0 12px; color: var(--text); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  padding-bottom: 8px; border-bottom: 1px solid var(--surface-3);
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 13px; }
.detail-item {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; font-size: 13px;
}
.detail-note {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px;
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}

/* ===== 数据表格(Workday:规整、清晰行线)===== */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: var(--text-3); text-align: left; font-weight: 600; font-size: 12px; }
.data-table { border-collapse: collapse; }   /* 2026-07-08:主定义补齐(原来只有th/td,裸表迁入后依赖它) */
.data-table th { padding: 9px 8px; border-bottom: 2px solid var(--border-strong); }
.data-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: var(--surface-2); }

/* 2026-07-08 UI二期:徽章规范类 —— 新代码一律用 .badge(+颜色内联 background/color),尺寸圆角不再各写各的 */
.badge { display:inline-block; font-size:10px; padding:2px 7px; border-radius:8px; white-space:nowrap; line-height:1.5; }
.badge-pill { border-radius:99px; }

/* 2026-06-15:列表区内部滚动(MPC跳槽榜单 / 公司库 / 商业洞察报告库)—— 区域固定高度+滚轮上下看,表头粘顶 */
.area-scroll { max-height: 60vh; overflow-y: auto; }
/* 🔴 2026-07-26 Ben「表头没锁定」:原来只有 sticky+top,但表格横向滚动时(列多)表头会跟着走。
   加 box-shadow 分隔线 + 提高 z-index,并保证背景不透明(否则滚动时下面的行会透出来)。 */
.area-scroll thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--border);   /* 用 inset 阴影当下边框:sticky 下 border 会跟着滚 */
}
/* 列宽拖拽手柄:hover 时显出竖线,让用户知道这里能拖 */
.area-scroll thead th > .colrz:hover,
thead th > .colrz:hover { border-right: 2px solid var(--accent); }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ========== 🟢 动效精修 ========== */
@keyframes fadeIn   { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); }   to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* 卡片/列表入场:轻盈淡入上滑(apple 减速缓动) */
.project-item, .cand-item, .detail-section, .widget-box {
  animation: fadeInUp .34s var(--ease-out) both;
}

/* Tab 切换:平滑淡入 */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .28s var(--ease-out) both; }

/* 按钮:hover 平滑过渡, 点击轻微回弹(缓动统一 apple 曲线) */
button { transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .14s var(--ease), box-shadow .18s var(--ease); }
button:active:not(:disabled) { transform: scale(.97); }

/* v12:统一 focus-visible 柔光环(apple 风,仅键盘 Tab 聚焦显示,鼠标点击不显示) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, .ipt:focus-visible, [contenteditable]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 项目卡片 hover 轻微上抬 */
.project-item { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease), background .18s var(--ease), border-color .18s var(--ease); }
.project-item:hover { transform: translateY(-2px); }

/* 候选人姓名 hover 轻微强调 */
.cand-name { transition: color .18s var(--ease); }

/* ===== Modal:apple 风缩放渐入 + 背景毛玻璃 ===== */
.modal-overlay {
  display: flex !important; opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease), backdrop-filter .26s var(--ease);
}
.modal-overlay.show {
  opacity: 1; pointer-events: auto;
  backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%);
}
/* 2026-08-04 Ben:商业洞察各板块(客户BD/市场信息/人才分析…)点开后【右侧栏内满屏】——
   不再视口居中弹窗:左侧项目导航保持可见,内容占满右侧 main 区(sidebar 400px 之外全部)。 */
.modal-overlay.rside-full { left: 400px; top: 56px; width: auto; background: transparent;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  display: block; justify-content: initial; align-items: initial; }
  /* 2026-08-04 Ben:顶部让出 56px —— 「我的效率」浮条(top19+高32)/右上角栏那一排保持可见可点,
     面板从其下方开始,不重叠(与 noteModal 抽屉同款让位)。 */
.modal-overlay.rside-full .modal-content {
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; max-height: 100% !important;
  border-radius: 0; margin: 0;
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
}
@media (max-width: 900px) { .modal-overlay.rside-full { left: 0; } }  /* 窄屏无侧栏则全宽 */
/* 2026-09-10 Ben「To do list 今日待办点开后默认全屏」:showMiniDialog(..., 'full') 走这套。
   与上面的 .rside-full 区别:那个只占右侧 main 区(留左侧项目导航),这个连导航一起盖,给清单最大面积。 */
.modal-overlay.mini-full .modal-content {
  width: calc(100vw - 24px) !important; max-width: none !important;
  height: calc(100vh - 24px) !important; max-height: none !important;
}
/* 正文吃满剩余高度并自己滚 → 标题栏(日期切换 / + 添加待办)始终固定可见,不随清单滚走。
   min-height:0 是必须的:flex 子项默认 min-height:auto,内容一长就把容器撑破而不是内部滚动。 */
.modal-overlay.mini-full .modal-body { flex: 1 1 auto; min-height: 0; }
.modal-content {
  transform: translateY(14px) scale(.96); opacity: 0;
  transition: transform .34s var(--ease-out), opacity .26s var(--ease);
}
.modal-overlay.show .modal-content { transform: none; opacity: 1; }

/* 尊重「减少动态效果」无障碍偏好(apple 级细节) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* v175 final v5/v6:备注弹窗改右侧抽屉,完全不覆盖左侧 — 只占右侧 520px,左侧候选人详情清晰可见 */
#noteModal.modal-overlay {
  /* 关键:不全屏覆盖,只 fixed 在右侧,左侧候选人 modal 不被遮挡/模糊 */
  position: fixed;
  /* 2026-06-04:从 56px 开始(顶栏「语言/主题」topRightBar 在 top:14px z-200),避免抽屉顶部按钮被遮挡 */
  inset: 56px 0 0 auto !important;   /* top=56(让开顶栏) right bottom 0,left auto */
  /* 2026-08-03:width 去掉 !important —— 左缘手柄拖宽写的是 overlay 的 inline width,!important 会压死它 */
  width: 520px; max-width: 92vw;
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 2026-08-03:z 基线抬到 ACTION(98700)之上 —— Ben 报「某些页面点备注被挡」。
   打开时 _bringModalFront 还会动态再抬;这里兜底保证从任何下探/看板层唤起都不被盖。 */
#noteModal.modal-overlay.show { z-index: 98750; }
#noteModal .modal-content {
  /* 2026-08-03 重做「拖拽/调大小」(Ben:要能拖能调,不是禁掉):
     - 贴边抽屉态:左缘手柄拖宽(往左长);右下角原生 resize 关闭(static 流里只会往右长出屏幕)
     - 拖标题栏(全局 .modal-header 逻辑)钉成 fixed 浮窗:JS 会同时把宽高写死成 px
       (拆掉「width:100% 参照物从 520px 抽屉变成视口 → 一拖炸全屏」的雷)并加 .floating
     - 浮窗态(.floating):恢复右下角 resize:both,随便缩;双击标题栏复位回抽屉
     - width/height 不再带 !important:钉 fixed 时写的 inline px 必须能赢 */
  width: 100%; max-width: 100%;
  position: relative;              /* 左缘手柄的定位基准 */
  resize: none;
  height: calc(100vh - 56px); max-height: calc(100vh - 56px);   /* 2026-06-04:配合抽屉下移 56px */
  border-radius: 0;
  margin: 0;
  transform: translateX(40px) !important;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
  background: var(--surface);
}
#noteModal .modal-content.floating { resize: both; max-width: none; max-height: none; }
#noteModal .modal-content.floating .note-grip { display: none; }   /* 浮窗态用右下角,左缘手柄收起 */
.note-grip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  cursor: ew-resize; z-index: 5;
  border-left: 3px solid transparent;
}
.note-grip:hover, .note-grip.dragging { border-left-color: var(--accent); }
#noteModal.show .modal-content { transform: none !important; }
#noteModal .modal-body { flex: 1; overflow-y: auto; }
/* 高亮未填必填字段(从通知进入补充流程时用) */
.note-field.missing {
  border: 2px solid var(--red) !important;
  background: rgba(220,38,38,.05) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.12);
}
.note-field-row.missing > label::after {
  content: " · 待补充";
  color: var(--red); font-size: 10px; font-weight: 600;
}

/* ===== Spinner(替代"加载中..."文字)===== */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -3px; margin-right: 8px;
}

/* ===== Toast 通知(cloudflare 风:顶部居中 + 圆润胶囊)===== */
#toast-container {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 99000;   /* 2026-06-18:toast 必须在所有弹窗/抽屉/阻塞框之上(原 300 会被递增的弹窗 z 盖住) */
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  align-items: center;
}
.toast {
  background: var(--surface);   /* fallback:不支持 color-mix 的浏览器 */
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 10px 18px 10px 38px; font-size: 13px; max-width: 480px;
  animation: toastIn .3s var(--ease-out) both;
  pointer-events: auto;
  position: relative; font-weight: 500;
}
.toast::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
}
.toast.toast-error::before   { background: var(--red); }
.toast.toast-success::before { background: var(--green); }
.toast.toast-info::before    { background: var(--accent); }
.toast.fade-out { animation: toastOut .25s ease forwards; }

/* ===== 动态水印(防截图外泄)===== */
#watermark {
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background-repeat: repeat;
}

/* v77:顶部 4 卡 - 同一组基础样式 + 强制 32px 严格一致 */
#topRightBar {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* 4 卡共用基础:32px 高 + border-box + 灰边 + 圆角 + 阴影 */
#efficiencyBanner,
#dbBadge,
#langSwitch,
#themeToggle {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  vertical-align: top !important;
  margin: 0 !important;
  padding: 0 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
}
/* 背景:dbBadge 用 JS 设状态色(橙/红/绿),其他默认 surface */
#efficiencyBanner, #langSwitch, #themeToggle { background: var(--surface) !important; }
/* themeToggle 是 32x32 icon-only */
#themeToggle { width: 32px !important; padding: 0 !important; }
/* select 去原生外观 + 自定义下拉箭头(否则浏览器原生外观让 height 偏离 32) */
#langSwitch {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 24px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%) !important;
  background-position: right 10px center, right 6px center !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
}
/* efficiencyBanner / dbBadge 内容左对齐(有多个 span)、其他 select 居中 */
#efficiencyBanner { justify-content: flex-start !important; gap: 6px !important; padding: 0 12px !important; }
#dbBadge { justify-content: center !important; font-weight: 600 !important; }

/* ===== 我的效率 / KPI 页面 ===== */
.kpi-page { position: relative; padding-top: 0; }
/* v97:控件改为 KPI 列「KPI」标题下方内嵌(取消右上角浮动) */
.kpi-controls-inline {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.kpi-controls-inline select {
  height: 30px; padding: 0 8px; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 6px; outline: none; cursor: pointer;
}
.kpi-controls-inline .seg { height: 30px; display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.kpi-controls-inline .seg button { height: 30px; padding: 0 12px; font-size: 12px; background: var(--surface); color: var(--text-2); border: 0; cursor: pointer; }
.kpi-controls-inline .seg button.active { background: var(--accent); color: #fff; }

/* v75:横向 padding 归 0,让 4 列内容左缘 = main 区左缘 = 428px,与顶部 fixed 按钮对齐 */
.kpi-page { padding: 0 0 22px; }
.kpi-header {
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 22px; flex-wrap: wrap; gap: 18px;
}
.kpi-header h1 { margin: 0; }
.kpi-header h1 { margin: 0; color: var(--text); font-size: 22px; font-weight: 600; }
.kpi-controls { display: flex; gap: 10px; align-items: center; }
.kpi-controls select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 13px; outline: none; cursor: pointer;
}
.kpi-controls .seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.kpi-controls .seg button {
  background: transparent; color: var(--text-2); border: 0; padding: 7px 14px;
  font-size: 13px; cursor: pointer; transition: all .15s;
}
.kpi-controls .seg button.active {
  background: var(--accent); color: #fff;
}

/* 总分卡片 + 进度环 */
.kpi-summary {
  display: flex; align-items: center; gap: 28px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.kpi-ring-wrap { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.kpi-ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.kpi-ring-bg { stroke: var(--border); stroke-width: 16; fill: none; }
.kpi-ring-fg { stroke: var(--accent); stroke-width: 16; fill: none;
  stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.9,.3,1);
  filter: drop-shadow(0 0 6px rgba(8,117,225,.4)); }
.kpi-ring-fg.passed { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(46,160,67,.5)); }
.kpi-ring-fg.warn   { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(196,49,75,.5)); }
.kpi-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text); font-weight: 700;
}
.kpi-ring-center .num { font-size: 40px; line-height: 1; letter-spacing: -1px; }
.kpi-ring-center .label { font-size: 13px; color: var(--text-2); margin-top: 6px; font-weight: 500; }

.kpi-summary-info { flex: 1; }
.kpi-summary-info .pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px;
  margin-right: 8px; background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.kpi-summary-info .pill.pass  { background: rgba(46,160,67,.12); color: var(--green); border-color: rgba(46,160,67,.3); }
.kpi-summary-info .pill.fail  { background: rgba(218,54,51,.12); color: var(--red);   border-color: rgba(218,54,51,.3); }
.kpi-summary-info .row { margin-top: 8px; color: var(--text-2); font-size: 13px; }
.kpi-summary-info .row .b { color: var(--text); font-weight: 600; margin: 0 4px; }

/* v44 网格(用户指令):
 *  每排 3 个,每卡宽度 ≈ 容器的 2/7(2/7=28.57%),3 卡 + 2 gap = 占满
 *  11 项指标 → 3+3+3+2 自动换行
 *  公式:(2/7) = 28.57%;3 列总宽 6/7 ≈ 86%;剩 14% 给 2 个 gap → gap ≈ 7%
 *  改用 fixed grid:grid-template-columns: repeat(3, 1fr); 但每卡 max-width:28.57%
 *  实际更简单:grid 3 列等分 + gap;最后一行自动靠左对齐 2 个
 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* 窄屏退回 2 列 */
@media (max-width: 760px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: all .18s ease; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.kpi-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi-card.zero { opacity: .55; }
.kpi-card.todo { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 7px); }
.kpi-card .name { color: var(--text-2); font-size: 12px; margin-bottom: 6px; }
.kpi-card .count { color: var(--text); font-size: 26px; font-weight: 600; line-height: 1; }
/* v100(#5):可下钻的 KPI 数字 — 提示可点 */
.kpi-card .count.kpi-count-link { cursor: pointer; text-decoration: underline dotted var(--accent); text-underline-offset: 4px; }
.kpi-card .count.kpi-count-link:hover { color: var(--accent); }
.kpi-card .meta { color: var(--text-3); font-size: 11px; margin-top: 8px;
  display: flex; justify-content: space-between; }
.kpi-card .meta .score { color: var(--accent); font-weight: 600; }
.kpi-card .todo-tip { color: var(--text-3); font-size: 11px; margin-top: 6px; }

/* 「明细」按钮(leader 才显示,卡片右下) */
.kpi-detail-btn {
  position: absolute; bottom: 8px; right: 10px;
  padding: 2px 8px; font-size: 10px; line-height: 1.4;
  background: transparent; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: all .15s; opacity: 0;
}
.kpi-card:hover .kpi-detail-btn { opacity: 1; }
.kpi-detail-btn:hover {
  background: var(--accent); color: white; border-color: var(--accent);
}

/* 候选人附件 — OA 风格列表 */
.annex-topbar {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--surface-2); border-radius: 6px;
}
.annex-cat-pick {
  padding: 6px 10px; font-size: 12px; min-width: 130px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 6px; outline: none;
}
.annex-btn-pick { padding: 6px 14px; font-size: 12px; }
.annex-btn-extra { padding: 5px 10px; font-size: 11px; }
.annex-list { display: flex; flex-direction: column; }
.annex-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border); gap: 10px;
  transition: background .12s;
}
.annex-row:hover { background: var(--surface-2); }
.annex-row:last-child { border-bottom: none; }
.annex-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.annex-fname-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.annex-fname {
  color: var(--accent); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px;
}
.annex-fname:hover { text-decoration: underline; }
.annex-cat-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 3px; font-weight: 500;
}
.annex-cat-badge.has { background: var(--green-soft); color: var(--green); }
.annex-cat-badge.none { background: var(--surface-2); color: var(--text-3); }
.annex-meta { font-size: 11px; color: var(--text-3); }
.annex-right { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.annex-size { font-size: 11px; color: var(--text-3); min-width: 60px; text-align: right; }
.annex-cat-edit {
  padding: 3px 6px; font-size: 10px; max-width: 110px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px; outline: none;
}
.annex-btn-del {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); padding: 3px 8px; font-size: 11px;
  border-radius: 4px; cursor: pointer;
}
.annex-btn-del:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.annex-btn-dl {
  background: var(--accent); color: white; border: none;
  padding: 4px 12px; font-size: 11px; border-radius: 4px; cursor: pointer;
}
.annex-btn-dl:hover { background: var(--accent-hover); }

/* sidebar 顶部 4 卡田字快捷 */
.sidebar-quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px 12px 6px; border-bottom: 1px solid var(--border);
}
.sb-quad-tile {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: all .12s; font-size: 12px;
}
.sb-quad-tile:hover { background: var(--surface); border-color: var(--accent); transform: translateY(-1px); }
.sb-quad-ic { width: 18px; display: flex; align-items: center; justify-content: center; }
.sb-quad-lb { font-weight: 600; color: var(--text); }

/* sidebar 公司库行 */
.sidebar-company-bar { padding: 6px 12px 8px; border-bottom: 1px solid var(--border); }
.sb-company-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(37,99,235,.06);
  border: 1px solid #c8d7ee; border-radius: 6px;
  cursor: pointer; font-size: 12px; transition: all .12s;
}
.sb-company-row:hover { background: rgba(37,99,235,.12); border-color: var(--accent); }
.sb-company-ic { color: var(--accent); display: flex; align-items: center; }
.sb-company-lb { font-weight: 600; color: var(--text); }
.sb-company-hint { color: var(--text-3); font-size: 11px; margin-left: auto; }

/* 「我的效率」顶部快捷按钮(铃铛 + 加号)*/
.eff-quick-btn {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; transition: all .12s;
}
.eff-quick-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.eff-quick-btn.primary {
  background: var(--accent); color: white; border-color: var(--accent);
}
.eff-quick-btn.primary:hover { background: var(--accent-hover); }

/* 💡 头部公司空缺预测 — 排行表 */
.ia-row { transition: background .1s; }
.ia-row:hover { background: var(--surface-2); }
.ia-rank { color: var(--text-3); font-weight: 600; text-align: center; }
.ia-rank.top1 { color: gold; font-size: 14px; }
.ia-rank.top2 { color: silver; font-size: 14px; }
.ia-rank.top3 { color: #cd7f32; font-size: 14px; }
.ia-comp {
  color: var(--accent); font-weight: 500; cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.ia-comp:hover { border-bottom-color: var(--accent); }
/* 🤖 AI 解析候选人池 状态徽章 */
.ec-tag {
  display: inline-block; font-size: 10px; padding: 2px 8px;
  border-radius: 10px; font-weight: 600; cursor: default;
}
.ec-tag.matched {
  background: var(--green-soft); color: var(--green); cursor: pointer;
}
.ec-tag.matched:hover { background: var(--green); color: white; }
.ec-tag.new { background: var(--orange-soft); color: var(--orange); }

.ia-alias {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: rgba(245,158,11,.15); color: var(--orange);
  font-size: 10px; border-radius: 8px; cursor: help; font-weight: 600;
}
.ia-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.ia-bar-fill { height: 100%; transition: width .4s; }
.ia-cand-item {
  display: grid; grid-template-columns: 100px 1fr 1fr; gap: 8px;
  padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--border);
}
.ia-cand-item:last-child { border-bottom: none; }
.ia-cand-name { color: var(--accent); cursor: pointer; font-weight: 500; white-space: nowrap; }
.ia-cand-name:hover { text-decoration: underline; }
.ia-cand-meta { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-cand-note { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 商业洞察 田字 4 卡 */
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
}
.insight-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px 22px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: all .18s; min-height: 140px;
}
.insight-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8,117,225,.15);
}
.insight-card-ic {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.insight-card-title { font-size: 16px; font-weight: 700; color: var(--text); }
.insight-card-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* 📚 ZPListInfo 文档库行 */
.li-results { display: flex; flex-direction: column; gap: 4px; }
.li-row { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.li-row-main { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.li-row-main:hover { background: var(--surface-2); }
.li-arrow { color: var(--text-3); width: 12px; font-size: 10px; }
.li-title { flex: 1; color: var(--accent); font-weight: 500; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-meta { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.li-uploader { color: var(--text-3); font-size: 11px; white-space: nowrap; min-width: 100px; text-align: right; }
.li-row-actions { display: inline-flex; gap: 4px; margin-left: 8px; }
.li-act-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 3px 8px; border-radius: 4px;
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: all .12s;
}
.li-act-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.li-mode-btn {
  padding: 6px 14px; font-size: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 6px;
}
.li-mode-btn:hover { background: var(--surface); color: var(--text); }
.li-mode-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.li-row-cand { background: var(--surface-2); padding: 8px 12px; border-top: 1px solid var(--border); }
.li-cand-list { display: flex; flex-direction: column; gap: 4px; }
.li-cand-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.li-cand-name { color: var(--accent); cursor: pointer; font-weight: 500; min-width: 80px; white-space: nowrap; }
.li-cand-name:hover { text-decoration: underline; }
.li-cand-meta { flex: 1; color: var(--text-3); }

/* 发票管理 Tab */
.inv-scope {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  margin-left: 8px; font-weight: 500; vertical-align: middle;
}
.inv-scope.admin { background: var(--red-soft); color: var(--red); }
.inv-scope.bp    { background: var(--orange-soft); color: var(--orange); }
.inv-scope.me    { background: var(--surface-2); color: var(--text-3); }
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-tab {
  padding: 5px 12px; font-size: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 6px;
}
.inv-tab:hover { background: var(--surface); color: var(--text); }
.inv-tab.active {
  background: var(--accent); color: white; border-color: var(--accent);
}
.inv-status-pill {
  display: inline-block; color: white; padding: 2px 8px;
  font-size: 10px; border-radius: 10px; font-weight: 600;
  white-space: nowrap;
}
.inv-act { padding: 3px 8px !important; font-size: 11px !important; }
.inv-view-switch {
  display: inline-flex; gap: 0; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.inv-view-switch button {
  padding: 5px 14px; font-size: 12px; background: transparent;
  color: var(--text-2); border: none; cursor: pointer;
}
.inv-view-switch button:hover { color: var(--text); }
.inv-view-switch button.active {
  background: var(--accent); color: white;
}
.inv-stats-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px; margin: 12px 0 0; padding: 10px;
  background: var(--surface-2); border-radius: 6px;
}
.inv-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 4px 8px;
  border-left: 3px solid var(--border);
}
.inv-stat .lbl { font-size: 10px; color: var(--text-3); }
.inv-stat .val { font-size: 14px; font-weight: 700; color: var(--text); }

/* 通知铃铛闪烁(有 blocking 通知时) */
.notif-blocking {
  animation: notifBlink 1.2s ease-in-out infinite;
  border-color: var(--red) !important;
}
@keyframes notifBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 49, 75, .5); }
  50% { box-shadow: 0 0 0 6px rgba(196, 49, 75, 0); }
}

/* 团队 KPI 横向卡片(名字/职级/总分 左,11 项 cell 右) */
.kpi-team-h-wrap { display: flex; flex-direction: column; gap: 6px; }
.kpi-row-h {
  display: flex; gap: 8px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; align-items: stretch;
  border-left: 3px solid var(--text-3);
}
.kpi-row-h.passed { border-left-color: var(--green); }
.kpi-row-h-left {
  display: flex; gap: 10px; align-items: center;
  min-width: 200px; padding-right: 10px;
  border-right: 1px solid var(--border);
}
.kpi-row-h-user { display: flex; flex-direction: column; min-width: 90px; }
.kpi-row-h-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.kpi-row-h-lv { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.kpi-row-h-total { text-align: center; min-width: 50px; }
.kpi-row-h-total-num { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1; }
.kpi-row-h-total-lbl { font-size: 9px; color: var(--text-3); margin-top: 2px; }
.kpi-row-h.passed .kpi-row-h-total-num { color: var(--green); }
.kpi-row-h.passed .kpi-row-h-total-lbl { color: var(--green); }
.kpi-row-h-right {
  flex: 1; display: flex; gap: 2px;
}
.kpi-row-h-right .kpi-flat-cell { flex: 1 1 0; }

/* 团队 KPI 行展开 — 11 项紧凑横排(旧版,保留以兼容) */
.kpi-team-table { border-collapse: collapse; }
.kpi-team-table th, .kpi-team-table td {
  padding: 6px 10px !important; font-size: 12.5px;
}
.kpi-team-table th { background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.kpi-team-row { cursor: pointer; }
.kpi-team-row:hover { background: var(--surface-2); }
.kpi-team-row td { border-bottom: 1px solid var(--border); }
.kpi-team-expand td {
  border-top: 1px dashed var(--accent);
  border-bottom: 2px solid var(--border) !important;
  padding: 6px 10px !important;
}
.kpi-flat-row {
  display: flex; gap: 2px;
}
.kpi-flat-cell {
  flex: 1 1 0;
  min-width: 56px;
  padding: 4px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background .1s;
  text-align: center;
  position: relative;
}
.kpi-flat-cell:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.kpi-flat-name {
  font-size: 9.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1; margin-bottom: 1px;
}
.kpi-flat-num {
  font-size: 16px; font-weight: 700; color: var(--text);
  line-height: 1.05;
}
.kpi-flat-score {
  font-size: 10px; color: var(--accent); font-weight: 600;
  line-height: 1.1; margin-top: 1px;
}
/* 数字 = 0 时极淡 */
.kpi-flat-cell[style*="opacity"] .kpi-flat-num { color: var(--text-3); }

/* 团队明细弹窗 - 部门分组 + 排名表 */
.kpi-dept-group { margin-bottom: 20px; }
.kpi-dept-group:last-child { margin-bottom: 0; }
.kpi-dept-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--surface-2);
  border-radius: 6px 6px 0 0; font-weight: 600; font-size: 13px;
  border: 1px solid var(--border); border-bottom: none;
}
.kpi-rank-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.kpi-rank-table th {
  padding: 6px 12px; text-align: left; color: var(--text-3);
  font-weight: 500; font-size: 11px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.kpi-rank-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.kpi-rank-table tr:last-child td { border-bottom: none; }
.kpi-rank-table tbody tr:hover { background: var(--surface-2); }
.kpi-bar {
  flex: 1; height: 6px; background: var(--surface-2);
  border-radius: 3px; overflow: hidden;
}
.kpi-bar-fill {
  height: 100%; background: var(--accent);
  border-radius: 3px; transition: width .3s;
}

/* 团队排行表 */
.kpi-team-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.kpi-team-table th, .kpi-team-table td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.kpi-team-table th { color: var(--text-2); font-weight: 500; background: var(--surface-2); }
.kpi-team-table td { color: var(--text); }
.kpi-team-table tr:hover { background: var(--surface-2); }
.kpi-rank { font-weight: 600; color: var(--accent); }
.kpi-rank.top1 { color: gold; }
.kpi-rank.top2 { color: silver; }
.kpi-rank.top3 { color: #cd7f32; }

/* ===== 弹窗提醒(OKR 缺口大)===== */
.okr-alert {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  width: 320px; max-width: 92vw;
  background: var(--surface); border: 2px solid var(--red);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(218, 54, 51, .3);
  animation: alertSlideIn .35s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes alertSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.okr-alert .alert-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.okr-alert .alert-title {
  color: var(--red); font-weight: 600; font-size: 14px;
}
.okr-alert .alert-close {
  background: transparent; border: 0; color: var(--text-3);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.okr-alert .alert-body {
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.okr-alert .alert-action {
  margin-top: 10px; display: flex; gap: 8px;
}
.okr-alert .alert-action button {
  flex: 1; padding: 6px 10px; font-size: 12px;
  border-radius: var(--radius-sm); cursor: pointer; border: 0;
}
.okr-alert .alert-action .go-btn {
  background: var(--red); color: #fff;
}
.okr-alert .alert-action .ack-btn {
  background: var(--surface-2); color: var(--text-2);
}

/* ===== OKR 提示器 ===== */
.kpi-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .kpi-layout { grid-template-columns: 1fr; } }

/* 四列布局(2026-05-20 改造):
   原 3 列 (OKR | KPI | 周计划) 均匀压缩到 3/4 → 让出 1/4 给「公司年度榜单」
   左:OKR | KPI 详情 | 本周计划 | 公司年度榜单 */
.kpi-layout-3col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 2026-06-03:4 大类(OKR/本周计划/KPI/榜单)默认等宽 */
  gap: 14px;
  align-items: start;
}
.kpi-layout-3col > .col { min-width: 0; overflow-wrap: anywhere; }   /* v169:min-width:0 + 长词换行,防内容溢出到邻列 */
/* v156:四列内卡片一律撑满各自列宽,保证列间距(gap 14px)视觉一致(覆盖 localStorage 残留固定宽度) */
.kpi-layout-3col > .col > * { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.kpi-layout-3col > .col.col-leaderboard { padding-top: 0; }
/* v169:断点整体上调 —— 主区左侧有 sidebar(~428px),效率页实际可用宽 = 视口−428;
   原断点按裸视口算,导致笔记本(1280~1600)视口够宽但效率页其实很窄、4 列被挤重叠。
   现按"够宽才多列"重新分布:>1680 才 4 列,否则逐级降列。 */
@media (max-width: 1680px) {
  .kpi-layout-3col { grid-template-columns: 1fr 1fr 1fr; }
  /* 2026-07-05 Ben:榜单移到第1位后不再跨列占满(原榜单在末位、占满底行合理;在首位占满=首屏巨块) */
}
@media (max-width: 1180px) {
  .kpi-layout-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .kpi-layout-3col { grid-template-columns: 1fr; }
  .kpi-layout-3col > .col:nth-child(2) { grid-column: auto; order: 0; }
}
/* v70:列标题放大到 18px 接近主标题(原 12px 灰色 uppercase 过小);所有 4 列(OKR/KPI 详情/本周计划/公司年度榜单)统一 */
.kpi-col-title {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 12px;
  padding: 16px 18px;                /* v159:加内边距,配合外框 */
  letter-spacing: 0;
  line-height: 1.3;
  border: 1px solid var(--border);   /* v159:KPI/榜单标题加小框,框顶与 OKR/本周计划卡片对齐 */
  border-radius: var(--radius);
  background: var(--surface);
  box-sizing: border-box;
}

/* 🔴 2026-08-21 Ben「四个框线顶部对齐」:四个标题小框(公司年度榜/今日OKR/我的周计划/KPI)
   顶边本来就齐(网格 align-items:start),错开的是【底边】—— 周计划框里的「周 Review」按钮
   内联 padding:4px 比标题文字行高高 3.4px,把那一个框撑高了。
   收口成:框内控件一律不撑框,框高只由标题文字决定 → 四框等高、顶底都齐。
   用 !important 是因为按钮的 padding 写在内联 style 里(模板里散着写,收在 CSS 单点更省)。 */
.kpi-col-title .btn-ghost {
  padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.3 !important;
}

.okr-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;   /* 2026-06-03:间距减半,更紧凑 */
  box-shadow: var(--shadow);
  transition: border-color .2s;
}
.okr-card.warn { border-color: var(--red); animation: okrPulse 1.6s ease-in-out infinite; }
.okr-card.yellow { border-color: #f0883e; }
@keyframes okrPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(218, 54, 51, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(218, 54, 51, 0.18); }
}
.okr-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.okr-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-2); margin-bottom: 3px; }
.okr-row .val { color: var(--text); font-weight: 600; font-size: 16px; }
.okr-row .val.big { font-size: 22px; }
/* 2026-06-03:OKR「已完成」的项目来源 chip(点击打开项目)*/
.okr-done-projs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.okr-done-proj {
  font-size: 11px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; max-width: 100%;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.okr-done-proj:hover { filter: brightness(.97); text-decoration: underline; }

.okr-progress {
  position: relative; height: 11px; background: var(--surface-2);   /* 2026-06-03:高度减半 */
  border-radius: 6px; overflow: hidden; margin: 6px 0 5px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.okr-progress .bar {
  position: absolute; left: 0; top: 0; height: 100%;
  /* 2026-06-03:不间断渐变脉冲式动态色条(width=当前进度);改用更醒目的【蓝色】*/
  background: linear-gradient(90deg, #1677ff 0%, #5cb3ff 50%, #1677ff 100%);
  background-size: 200% 100%;
  animation: okrBarFlow 1.4s linear infinite;
  border-radius: 6px;
  transition: width .6s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 0 10px rgba(22,119,255,.6);
}
@keyframes okrBarFlow { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }
/* 落后状态:用醒目【黄/琥珀】(不再用刺眼红)*/
.okr-progress.yellow .bar {
  background: linear-gradient(90deg, #f5a623 0%, #ffd24d 50%, #f5a623 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(245,166,35,.6);
}
.okr-progress.red .bar {
  background: linear-gradient(90deg, #f08a1d 0%, #ffc04d 50%, #f08a1d 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(240,138,29,.6);
}
.okr-progress .expected {
  position: absolute; top: -1px; bottom: -1px; width: 3px;   /* 2026-06-03:进度条变薄,标记上下溢出收窄 */
  background: var(--text-3); opacity: .7; border-radius: 2px;
}
.okr-progress .pct-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: white; font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  pointer-events: none; letter-spacing: .5px;
}
/* T1(2026-06-03):单条整体进度条 + 百分率刻度(替代原 4 段周期格)*/
.okr-progress2 { height: 12px; }   /* 2026-06-03:OKR 卡进度条高度减半 */
.okr-progress .expected { z-index: 2; }
.okr-progress .okr-tick {
  position: absolute; top: 2px; bottom: 2px; width: 1px;
  background: var(--border-strong); opacity: .55; z-index: 1; pointer-events: none;
}
.okr-progress .okr-pct-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--text); z-index: 3; pointer-events: none;
  text-shadow: 0 1px 2px var(--surface), 0 0 4px var(--surface);
}
.okr-scale {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text-3); margin: -2px 1px 6px; letter-spacing: .5px;
}

.okr-cycles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.okr-cycle-cell {
  height: 14px; background: var(--surface-2); border-radius: 7px;
  border: 1px solid var(--border);
}
.okr-cycle-cell.passed { background: var(--accent); }
.okr-cycle-cell.current {
  background: var(--accent); animation: cyclePulse 1.8s ease-in-out infinite;
}
@keyframes cyclePulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.okr-warn-msg {
  background: rgba(218,54,51,.1); border: 1px solid rgba(218,54,51,.3);
  color: var(--red); border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 12px; margin: 10px 0 0;
}

.okr-edit { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }
.okr-edit label { font-size: 11px; color: var(--text-2); display: block; margin-bottom: 4px; }
.okr-edit input[type="number"] {
  width: 100%; padding: 7px 10px; background: var(--surface-2);
  border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--radius-sm); font-size: 14px; outline: none;
}
.okr-edit .row2 { display: flex; gap: 8px; margin-top: 8px; }
.okr-edit .row2 input { flex: 1; }
.okr-edit .row2 button { flex-shrink: 0; }
.okr-set-by { font-size: 11px; color: var(--text-3); margin-top: 6px; }

.okr-breakdown {
  margin-top: 7px; padding: 3px 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.okr-breakdown .bd-title {
  font-size: 11px; color: var(--text-2); margin-bottom: 3px; font-weight: 500;
}
.okr-breakdown .bd-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text); padding: 0; line-height: 1.3; gap: 8px;   /* 2026-06-03:行距减半 */
}
.okr-breakdown .bd-row > :first-child { min-width: 0; overflow-wrap: anywhere; }   /* v169:长备注类型名换行,不撑破窄列 */
.okr-breakdown .bd-num {
  font-weight: 600; color: var(--accent);
  min-width: 24px; text-align: right; flex-shrink: 0;
}
.okr-scope-hint {
  font-size: 10px; color: var(--text-3); text-align: center;
  margin-top: 8px; font-style: italic;
}

/* ===== 周计划卡片 ===== */
.weekly-plan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;   /* 2026-06-03:间距减半,更紧凑 */
  margin-top: 0; box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.weekly-plan-card:hover { box-shadow: var(--shadow-md); }
.kpi-layout-3col .col > * + * { margin-top: 8px; }   /* 12 → 8 */
.weekly-plan-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }   /* 2026-06-03:间距减半 */
.weekly-plan-card .wp-scope {
  font-size: 10px; padding: 2px 6px; border-radius: 6px;
  display: inline-block; margin-bottom: 3px;
}
.weekly-plan-card .wp-scope.weekly { background: rgba(46,160,67,.12); color: var(--green); }
.weekly-plan-card .wp-scope.all    { background: var(--surface-2); color: var(--text-3); }
.weekly-plan-card .wp-project-list {
  display: flex; flex-direction: column; gap: 3px;
  /* 2026-08-21 Ben:「个人周计划需要优先完整显示」—— 原来 max-height:110px 把项目挤成
     一个两行高的小滚动条,本周有几个项目、每个进度如何要滚动才看得全,失去了「一眼掌握」的意义。
     去掉高度限制,让它按内容自然展开。 */
}
.weekly-plan-card .wp-project-item {
  font-size: 11px; padding: 2px 8px; background: var(--surface-2);
  border-radius: var(--radius-sm); display: flex; justify-content: space-between;
}
.weekly-plan-card .wp-project-item .name { color: var(--text); font-weight: 500; }
.weekly-plan-card .wp-project-item .client { color: var(--text-3); font-size: 11px; }
.weekly-plan-card .wp-actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.weekly-plan-card .wp-actions button { padding: 4px 10px; font-size: 11px; }

/* 团队周计划(leader 看下属)— v55 改用 token 适配深色主题 */
.weekly-plan-card.team-week-card {
  background: var(--surface);
  border: 1px solid var(--border);   /* v18x:去掉绿色左边框,与今日OKR/本周计划卡边框线条统一 */
  padding: 10px 12px;   /* v158:团队卡片保持紧凑(不随本周计划卡片放大) */
}
.weekly-plan-card.team-week-card h3 {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text);
}
.weekly-plan-card.team-week-card .tw-stat {
  font-size: 11px; font-weight: 600;
  background: var(--green-soft); color: var(--green);
  padding: 2px 8px; border-radius: 10px;
}
/* v18x:今日OKR / 本周计划【个人卡】默认高度减半(≤50vh)+ 等高,超出滚动;团队卡(team-*)与折叠块不受 */
.kpi-layout-3col .col > .okr-card:not(.team-okr-card),
.kpi-layout-3col .col > .weekly-plan-card:not(.team-week-card) {
  max-height: 50vh;
  overflow-y: auto;
}
.tw-list {
  /* v180:去掉 max-height:380px 内滚 —— 11 人团队只露出约 2 个,被误以为"成员显示不全";
     改为自然展开(整页 .main 已可滚动),要收起用卡片标题的卷帘折叠 */
  display: flex; flex-direction: column; gap: 8px;
}
.tw-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
.tw-row.no-plan { opacity: 0.6; background: var(--surface-3); }
.tw-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.tw-name { font-size: 12px; color: var(--text); }
.tw-name strong { font-weight: 600; }
.tw-name .tw-level {
  font-size: 10px; color: var(--green);
  background: var(--green-soft); padding: 1px 5px; border-radius: 4px;
  margin-left: 6px;
}
.tw-count { font-size: 11px; color: var(--text-2); }
.tw-proj {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 11px; padding: 3px 0;
  border-top: 1px dashed var(--border);
}
.tw-proj:first-of-type { border-top: 0; }
.tw-pname { color: var(--text); font-weight: 500; }
.tw-pclient { color: var(--text-3); font-size: 10px; }
.tw-empty { font-size: 11px; color: var(--text-3); padding: 3px 0; }
.tw-targets {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 10px; color: var(--text-3); letter-spacing: 0.2px;
}

/* 编辑模式:项目多选弹窗 */
.wp-edit-list {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px;
}
.wp-edit-list .wp-cb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; cursor: pointer;
  font-size: 12px; color: var(--text);
}
.wp-edit-list .wp-cb-row:hover { background: var(--surface-2); }
.wp-edit-list .wp-cb-row .client {
  color: var(--text-3); font-size: 11px; margin-left: auto;
}
.wp-edit-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}

/* ===== 我的效率:顶部 4 个超大数字卡(方案 A)===== */
.kpi-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 22px;
}

.kpi-hero-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 22px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  transition: all .18s;
}
.kpi-hero-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }

.kpi-hero-card .label {
  font-size: 12px; color: var(--text-2); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.kpi-hero-card .num {
  font-size: 38px; font-weight: 700; color: var(--text);
  line-height: 1.1; margin: 6px 0 4px;
  font-feature-settings: "tnum"; /* 等宽数字,跳动更顺眼 */
}
.kpi-hero-card .num.passed { color: var(--green); }
.kpi-hero-card .num.warn   { color: var(--red); }
.kpi-hero-card .num.yellow { color: #f0883e; }
.kpi-hero-card .num .suffix {
  font-size: 16px; color: var(--text-3); font-weight: 500; margin-left: 4px;
}
.kpi-hero-card .sub {
  font-size: 11px; color: var(--text-3);
}

/* 2026-06-03:KPI 条与 OKR/周计划进度条一致 —— 11px 高 + 脉冲流动 + 蓝/琥珀配色 */
.kpi-hero-card .mini-bar {
  height: 11px; background: var(--surface-2); border-radius: 6px;
  margin-top: 8px; overflow: hidden; position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.kpi-hero-card .mini-bar .fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #1677ff 0%, #5cb3ff 50%, #1677ff 100%);
  background-size: 200% 100%; animation: okrBarFlow 1.4s linear infinite;
  box-shadow: 0 0 10px rgba(22,119,255,.6);
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.kpi-hero-card .mini-bar .fill.passed {
  background: linear-gradient(90deg, #1d9a52 0%, #46d07e 50%, #1d9a52 100%);
  background-size: 200% 100%; box-shadow: 0 0 10px rgba(29,154,82,.55);
}
.kpi-hero-card .mini-bar .fill.warn {
  background: linear-gradient(90deg, #f08a1d 0%, #ffc04d 50%, #f08a1d 100%);
  background-size: 200% 100%; box-shadow: 0 0 10px rgba(240,138,29,.6);
}
.kpi-hero-card .mini-bar .fill.yellow {
  background: linear-gradient(90deg, #f5a623 0%, #ffd24d 50%, #f5a623 100%);
  background-size: 200% 100%; box-shadow: 0 0 10px rgba(245,166,35,.6);
}

/* 折叠区域:11 项详情 */
.kpi-details-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 13px; cursor: pointer;
  user-select: none; margin: 18px 0 12px;
}
.kpi-details-toggle:hover { color: var(--accent); }

/* ===== 月度 KPI 进度条 ===== */
.kpi-month-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow);
}
.kpi-month-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
}
.kpi-month-head .title { font-size: 14px; color: var(--text); font-weight: 600; }
.kpi-month-head .score { font-size: 20px; font-weight: 700; color: var(--accent); }
.kpi-month-head .score.passed { color: var(--green); }
.kpi-month-head .score.warn { color: var(--red); }
.kpi-month-progress {
  position: relative; height: 12px; background: var(--surface-2);
  border-radius: 6px; overflow: hidden; margin-bottom: 6px;
}
.kpi-month-progress .bar {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px;
  background: var(--accent); transition: width .6s cubic-bezier(.2,.9,.3,1);
}
.kpi-month-progress .bar.passed { background: var(--green); }
.kpi-month-progress .bar.warn   { background: var(--red); }
.kpi-month-progress .passing-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-2);
  opacity: .7;
}
.kpi-month-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-3);
}

/* ===== KPI 卡片:封顶状态 ===== */
.kpi-card.capped { border-color: rgba(240, 136, 62, .4); }
.kpi-card.capped::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 16px 16px 0;
  border-color: transparent #f0883e transparent transparent;
}
.kpi-capped-tag {
  margin-top: 8px; font-size: 11px; color: #f0883e;
  background: rgba(240, 136, 62, .08);
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.kpi-capped-tag .kpi-raw {
  color: var(--text-3); margin-left: 6px; text-decoration: line-through;
}

/* ===== 项目工作区顶部:我的效率 banner =====
 * 2026-05-20 改:sticky 顶部一直显示 + 缩到原 4/5 高 / 原 2/3 宽 */
.efficiency-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 22px;                  /* 高度 4/5:22→14 */
  margin: 0 auto 14px;                 /* 居中 */
  width: 66%;                          /* 宽度 2/3 */
  box-shadow: var(--shadow); cursor: pointer;
  transition: all .18s;
  position: sticky;                    /* ★ 一直显示 */
  top: 56px;                           /* 2026-06-04:贴在顶部遮罩(56px)下方,不越过红线 */
  z-index: 5;                          /* 高于 widget,低于 fixed 顶部按钮组 */
  backdrop-filter: blur(6px);
}
.efficiency-banner.sticky-top {
  /* 兼容旧 class,无额外效果 */
  position: sticky; top: 56px; z-index: 5;
}
.efficiency-banner:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.efficiency-banner .eb-title {
  font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.efficiency-banner .eb-mod {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.efficiency-banner .eb-label {
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.efficiency-banner .eb-bar {
  flex: 1; height: 11px;               /* 4/5 高度:14→11 */
  background: var(--surface-2);
  border-radius: 6px; overflow: hidden; position: relative; min-width: 60px;
}
.efficiency-banner .eb-bar .fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px;
  background: var(--accent); transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.efficiency-banner .eb-bar .fill.passed { background: var(--green); }
.efficiency-banner .eb-bar .fill.warn   { background: var(--red); }
.efficiency-banner .eb-bar .fill.yellow { background: #f0883e; }
.efficiency-banner .eb-num {
  font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap;
  min-width: 68px; text-align: right;
}
.efficiency-banner .eb-arrow {
  color: var(--text-3); font-size: 18px; padding-left: 4px;
}
.efficiency-banner.warn { border-color: var(--red);
  animation: okrPulse 1.6s ease-in-out infinite; }
@media (max-width: 900px) {
  .efficiency-banner { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ===== 项目头部:meta 左 + JD 右(v20 横纵向联动 — 拖手柄两边同步缩放)===== */
.project-header-layout {
  display: grid;
  /* v20:两列都用 fr 单位,1:2 比例,这样拖动右下手柄时左卡也按比例缩放 */
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;        /* 纵向同步:左右同高 */
  /* 2026-07-25 Ben #2:整个功能区高度压到原来的 3/5(40vh × 3/5 = 24vh);
     左卡 .project-meta-rows / 右侧 .jd-box 都是 overflow-y:auto,压矮只滚动、不截断内容 */
  height: 24vh;
  min-height: 170px;           /* 2026-07-25:极矮视口兜底,保证项目名+客户+若干字段仍可读 */
  /* 2026-07-25 实测坑:隐式 auto 行会被左卡内容(字段多时 300px+)撑高、把 height 顶穿 →
     必须 minmax(0,1fr) 锁住行高,超出的字段交给 .project-meta-rows 自己滚动 */
  grid-template-rows: minmax(0, 1fr);
}
@media (max-width: 1000px) {
  /* 2026-07-25 Ben #2:窄屏变单列时【不锁死高度】—— 否则 24vh 被上下两块各分一半,
     左卡的字段行会被挤到 0 高度只剩滚动条(实测 800×523 视口下就这样) */
  .project-header-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .project-meta-rows { max-height: 34vh; }
  .project-jd .jd-box { max-height: 40vh; }
}
/* 2026-05-21 v35:用 outline 代替 border 保证边框永不被裁(无论怎么拖)*/
.project-meta {
  background: var(--surface);
  outline: 0.5px solid var(--accent);
  outline-offset: -0.5px;          /* outline 内嵌,视觉跟 border 一致 */
  border-radius: var(--radius);
  padding: 5px 12px 6px;         /* 2026-07-25 Ben #2:卡内上下内边距同步压缩(8/10 → 5/6),配合高度压到 3/5 */
  box-shadow: 0 0 0 1px var(--accent-soft);
  display: flex; flex-direction: column;
  min-height: 50px;
  position: relative;
  overflow: visible;             /* v35:visible 让 outline 完整渲染,不裁切下边框 */
}
[data-theme="dark"] .project-meta {
  box-shadow: 0 0 0 1px rgba(74,158,255,0.18);
}
.project-meta h1 {
  margin: 0 0 2px; font-size: 16px; color: var(--text);
  font-weight: 600; line-height: 1.15;   /* 2026-07-25 Ben #2:标题行距压缩 */
}
.project-meta .meta-client {
  /* 2026-07-25 Ben #2:客户行行距/下间距压到约 2/3 */
  color: var(--text-2); font-size: 12px; line-height: 1.2; margin-bottom: 3px;
}

/* 元信息行:gap 8→4 / padding 4→2 / 字号 13→12
   2026-07-25 Ben #2:行距再压到原来的 2/3 —— 行节奏 = padding(2+2)+line-height(1.3)+gap(4) ≈ 23.6px
   → 改成 padding(1+1)+line-height(1.12)+gap(2) ≈ 16.4px(≈原 70%,字号不变所以不影响可读) */
.project-meta-rows {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  flex: 1; min-height: 0;
  padding-right: 4px;
}
.project-meta-rows .meta-row {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--text-2); font-size: 12px; line-height: 1.12;
  padding: 1px 0;
  border-bottom: 1px dashed var(--border);
}
.project-meta-rows .meta-row:last-child { border-bottom: none; }
.project-meta-rows .ml-ic {
  font-size: 12px; width: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);                /* v44:SVG 图标用主色,Cloudflare 蓝 */
}
.project-meta-rows .ml-ic svg { display: block; }
.project-meta-rows .ml-lb {
  font-size: 10px; color: var(--text-3); font-weight: 600;
  letter-spacing: 0.3px; min-width: 50px; flex-shrink: 0;
}
.project-meta-rows .ml-vl {
  color: var(--text); flex: 1; word-break: break-word; font-size: 12px;
}

/* v35:编辑按钮:跟项目名同行,小尺寸右对齐 */
.project-meta .meta-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;   /* 2026-08-04:按钮/同质chip 挤不下就换行,别把标题挤没 */
  margin-bottom: 2px;
}
.project-meta .meta-head h1 {
  /* 🔴 2026-08-04 修 Ben 报「有的项目名不显示」:原 flex:1(basis 0)+min-width:0 —— 项目名长 +
     按钮多(编辑/删/查历史/同质chip)时 h1 被压成 width:0,文字在 DOM 里但看不见(实测 8035)。
     改 basis:auto + 保底 130px:标题永远可见,过长省略号,按钮挤不下换行。 */
  flex: 1 1 auto; min-width: 130px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-edit-btn-inline {
  flex-shrink: 0;
  font-size: 11px !important; padding: 3px 9px !important;
  line-height: 1.4;
}
/* 老选择器(p-name 单独)兜底 */
.project-edit-btn {
  margin-top: 7px; flex-shrink: 0; align-self: flex-start;
  position: relative; z-index: 2;
  font-size: 12px; padding: 5px 12px;
}

/* v46:JD 容器加 position:relative,让标题 absolute 定位 */
.project-jd { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* v46:Job Description 标题钉在 jd-box 内部顶部正中,覆盖第一行
   - absolute 定位,跟随容器,无论 jd-box 滚动 都不动
   - 居中 + 大字 + Cloudflare 蓝
   - 跟 jd-box 同 border-radius,无缝贴合 */
.project-jd .jd-pinned-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface);
  padding: 10px 16px 8px;
  z-index: 3;
  letter-spacing: 0.5px;
  font-family: -apple-system, 'Inter', 'Helvetica Neue', sans-serif;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 2px solid var(--accent-soft);
  margin: 2px 2px 0;
}
/* v48:导出 PDF 按钮(右上角,小图标按钮)*/
.jd-export-btn {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  height: 28px; padding: 0 10px; gap: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  transition: all .15s ease;
  pointer-events: auto;
}
.jd-export-btn:hover {
  background: var(--accent);
  color: #fff;
}
/* jd-box 内容顶部留出标题高度(约 46px) — 让正文不被标题盖住 */
.project-jd .jd-box { padding-top: 56px !important; }

/* 老类名兜底 */
.project-jd .jd-title { display: none; }
/* v33:默认 JD 框 max-height 120px(原 1/4 高);拖拽 .project-header-layout 手柄能放大 */
.project-jd .jd-box {
  flex: 1; margin: 0; height: auto;
  max-height: none;            /* v161:撑满右栏 = 与左侧项目卡等高(下框线平齐);内容超出则框内滚动 */
  min-height: 0;
  overflow-y: auto;
}
/* 拖拽放大时,jd-box 跟随容器:.project-header-layout 一旦有 inline style.height,
   就让 jd-box 也跟着伸展(去掉 max-height 限制)*/
.project-header-layout[style*="height"] .project-jd .jd-box {
  max-height: none;
}

/* ============================================================
 * UI Phase 1 增强(cloudflare 风) — 全局表单 / pill / 项目卡 hover
 * ============================================================ */

/* 全局表单控件:统一边框、焦点环、过渡 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover, textarea:hover { border-color: var(--text-3); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}
textarea { resize: vertical; min-height: 60px; }

/* select 自定义箭头 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* checkbox 优化 */
input[type="checkbox"], input[type="radio"] {
  width: 14px; height: 14px;
  accent-color: var(--accent);
  vertical-align: -2px;
}

/* 通用 pill / badge 系统(cloudflare 风扁平胶囊) */
.pill, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 500;
  border-radius: 10px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  line-height: 1.4;
  white-space: nowrap;
}
.pill.accent, .badge.accent { background: var(--accent-soft); color: var(--accent); border-color: rgba(8,117,225,0.18); }
.pill.green, .badge.green   { background: var(--green-soft);  color: var(--green);  border-color: rgba(22,163,74,0.18); }
.pill.amber, .badge.amber   { background: var(--amber-soft);  color: var(--amber);  border-color: rgba(217,119,6,0.18); }
.pill.red, .badge.red       { background: var(--red-soft);    color: var(--red);    border-color: rgba(220,38,38,0.18); }

/* 项目卡 hover 上抬增强 */
.project-item {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.project-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent) !important;
}

/* user-card cloudflare 阴影增强(原有用 box-shadow,这里强化) */
.user-card {
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.user-card:hover { box-shadow: var(--shadow-md); }

/* insight-card(商业洞察卡)同款 */
.insight-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.insight-card:hover { box-shadow: var(--shadow-md); }

/* widget-box 同款 */
.widget-box { box-shadow: var(--shadow); transition: box-shadow .15s ease; }
.widget-box:hover { box-shadow: var(--shadow-md); }

/* ===== 2026-09-05 项目「职位分析」tab · Apple 风格:留白、细线、大圆角、少装饰、数字等宽 ===== */
.ja-wrap { display: flex; flex-direction: column; gap: 14px; }
.ja-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }
.ja-hero h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }   /* 2026-09-05 Ben:标题字号与 tab 栏(13px/600)一致 */
.ja-ess { font-size: 15px; line-height: 1.65; color: var(--text); margin-top: 10px; max-width: 920px; }
.ja-sub { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; }
.ja-meta { font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.ja-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ja-pill.warn { background: var(--amber-soft); color: var(--amber-strong); }
.ja-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.ja-btn { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: all .15s ease; line-height: 1.3; }
.ja-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ja-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ja-btn.primary:hover { background: var(--accent-hover); }
.ja-btn:disabled { opacity: .55; cursor: default; }
.ja-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.ja-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; min-width: 0; box-shadow: var(--shadow); }
.ja-card h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ja-card ul, .ja-card ol { margin: 0; padding-left: 18px; }
.ja-card li { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0 0 6px; }
.ja-card li:last-child { margin-bottom: 0; }
.ja-muted { color: var(--text-2); }
.ja-dim { color: var(--text-3); font-size: 12.5px; }
.ja-danger { color: var(--red); }
.ja-w { display: inline-block; min-width: 44px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ja-kw { display: flex; flex-direction: column; gap: 12px; }
.ja-kw-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; }
.ja-kw-g { font-size: 12.5px; font-weight: 700; color: var(--accent); padding-top: 3px; }
.ja-kw-q { font-size: 13px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.ja-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ja-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: all .15s ease; line-height: 1.4; }
.ja-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ja-chip.act { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.ja-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ja-table th { text-align: right; font-weight: 500; font-size: 11px; color: var(--text-3); padding: 0 0 6px; }
.ja-table th:first-child, .ja-table td:first-child { text-align: left; }
.ja-table td { padding: 7px 0; border-top: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.ja-opener { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ja-opener b { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
.ja-opener p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ja-link { font-size: 12px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.ja-ta { width: 100%; box-sizing: border-box; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; font-size: 13px; line-height: 1.55; resize: vertical; font-family: inherit; }
.ja-empty { text-align: center; padding: 48px 20px; }
.ja-empty .ja-empty-t { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ja-empty .ja-empty-s { font-size: 13px; color: var(--text-2); margin-bottom: 18px; line-height: 1.6; }

/* project-meta 已改为分窗口容器,hover 效果交给内部 .meta-tile */

/* Tab nav 微调:更紧凑 + 更明显的 hover */
.tab-nav .tab-btn {
  padding: 8px 12px;
  position: relative;
}
.tab-nav .tab-btn:hover { background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-nav .tab-btn.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* 通知红点(brand-qbtn 上的徽章) */
.brand-qbtn .notif-dot {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff;
  border-radius: 8px; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  font-weight: 600;
}

/* 表格统一样式(已存在的 .kpi-rank-table 等保留,这里给通用 table 加默认风) */
.table-base, table.table-base {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-base th {
  background: var(--surface-2);
  padding: 8px 12px;
  text-align: left;
  font-weight: 500;
  color: var(--text-2);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.table-base td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text);
}
.table-base tr:last-child td { border-bottom: 0; }
.table-base tr:hover td { background: var(--surface-2); }

/* 链接默认样式 */
a { color: var(--accent); text-decoration: none; transition: color .12s; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* 详情页 emoji 标题对齐修正(emoji 默认基线偏低) */
.detail-section h4 {
  display: flex; align-items: center; gap: 6px;
}
.detail-section h4 > .icon { color: var(--accent); }

/* 选中文本颜色:cloudflare 蓝低饱和 */
::selection { background: var(--accent-soft); color: var(--accent); }

/* 数据指标大数字(用于商业洞察、KPI、跳槽自学习等):cloudflare 风 + Phase 5 token */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.metric-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow);
  transition: all .15s ease;
}
.metric-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.metric-card .metric-label {
  font-size: var(--fs-sm); color: var(--text-3);
  font-weight: 500; letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.metric-card .metric-value {
  font-size: var(--fs-4xl); font-weight: 600; color: var(--text);
  letter-spacing: -0.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metric-card .metric-delta {
  font-size: var(--fs-sm); margin-top: var(--sp-1);
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.metric-card .metric-delta.up   { color: var(--green); }
.metric-card .metric-delta.down { color: var(--red); }

/* #8 POC(v23):AI 全网推荐 sub-tab 按钮 */
.ext-cat-btn {
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-2) !important;
  cursor: pointer;
  transition: all .15s ease;
}
.ext-cat-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.ext-cat-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* Phase 5(v22):间距/字号 utility 类 — 让常用 inline style 改用类 */
.sp-mt-1 { margin-top: var(--sp-1); }
.sp-mt-2 { margin-top: var(--sp-2); }
.sp-mt-3 { margin-top: var(--sp-3); }
.sp-mt-4 { margin-top: var(--sp-4); }
.sp-gap-1 { gap: var(--sp-1); }
.sp-gap-2 { gap: var(--sp-2); }
.sp-gap-3 { gap: var(--sp-3); }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); }

/* 附件按钮:查看模式(灰色,提示无下载权限) */
.annex-btn-view {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}
.annex-btn-view:hover {
  border-color: var(--text-3) !important;
  color: var(--text-2) !important;
}

/* ============================================================
 * 暗色主题修复(2026-05-20 用户反馈):
 * 1. user-card 左侧个人卡片在暗色下不再用浅蓝渐变 → 用 surface 色系融入背景
 * 2. 头像 fallback / leader badge / meta 文字颜色全部走变量
 * ============================================================ */
/* ★ 暗色 user-card 重做(v2,卡片浮起更明显 + 卡内卡层次 + 分隔线提亮)*/
[data-theme="dark"] .user-card {
  /* 比 sidebar(--surface)亮一档,有"卡片浮起"感 */
  background: linear-gradient(165deg, #232830 0%, #2a313a 100%);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .user-card .uc-avatar {
  background: #2d333b;
  border: 2px solid #3d4452;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .user-card .uc-avatar-fallback {
  background: linear-gradient(160deg, #3d4452, #2d333b);
  color: #6cb0ff;
}
[data-theme="dark"] .user-card .uc-name { color: #f4f6f9; }
[data-theme="dark"] .user-card .uc-meta { color: #c8ced6; }
[data-theme="dark"] .user-card .uc-meta .sep { color: #6b7280; }

/* uc-rows 嵌套区:用更深的"卡内卡"色形成层次 */
[data-theme="dark"] .user-card .uc-rows {
  background: rgba(15, 20, 25, 0.5);              /* 略带透明,叠加形成深陷感 */
  border-top: 1px solid #3d4452;
}
[data-theme="dark"] .user-card .uc-row {
  border-bottom: 1px solid #2d333b;                /* 分隔线提亮 */
}
[data-theme="dark"] .user-card .uc-row .lbl { color: #9ca3af; }
[data-theme="dark"] .user-card .uc-row .val { color: #f4f6f9; }
[data-theme="dark"] .user-card .uc-row .val.big { color: #6cb0ff; }
[data-theme="dark"] .user-card .uc-row .val.dim { color: #6b7280; }
[data-theme="dark"] .user-card .uc-act { color: #f4f6f9; }
[data-theme="dark"] .user-card .uc-act .icon { color: #6cb0ff; }

/* 子 tile(Mapping/发票/商业洞察/用户管理)— 更明显的卡内卡 */
[data-theme="dark"] .user-card .uc-tile {
  background: #2d333b;
  border: 1px solid #3d4452;
}
[data-theme="dark"] .user-card .uc-tile:hover {
  background: #353c45;
  border-color: var(--accent);
}
[data-theme="dark"] .user-card .uc-tile-title { color: #f4f6f9; }
[data-theme="dark"] .user-card .uc-tile-hint { color: #9ca3af; }

/* team-card(团队卡)— 紫色调暗化 */
[data-theme="dark"] .user-card.team-card {
  background: linear-gradient(165deg, #2a2438 0%, #2f2940 100%);
  border-color: #4a3d6e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(196, 181, 253, 0.04);
}
[data-theme="dark"] .user-card.team-card .team-header { border-bottom-color: #4a3d6e; }
[data-theme="dark"] .user-card.team-card .team-header .team-title { color: #f4f6f9; }
[data-theme="dark"] .user-card.team-card .team-header .team-title .icon { color: #c4b5fd; }
[data-theme="dark"] .user-card.team-card .team-header .team-size {
  background: rgba(196, 181, 253, 0.16);
  color: #c4b5fd;
}
[data-theme="dark"] .user-card.team-card .uc-rows {
  background: rgba(15, 20, 25, 0.4);
  border-top-color: #4a3d6e;
}
[data-theme="dark"] .user-card.team-card .uc-row { border-bottom-color: #3d335a; }
[data-theme="dark"] .user-card.team-card .uc-row .val.big { color: #c4b5fd; }
[data-theme="dark"] .user-card.team-card .uc-act .icon { color: #c4b5fd; }

/* Leader 徽章(琥珀) */
[data-theme="dark"] .user-card .uc-leader-badge {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1a1f26;
  box-shadow: 0 1px 3px rgba(217, 119, 6, .35);
}
[data-theme="dark"] .user-card .uc-team-title {
  color: #9ca3af;
  border-top-color: #3d4452;
}

/* sidebar-quad 四卡(Mapping 文档/发票/商业洞察/用户管理)— 之前可能在 sidebar 底部 */
[data-theme="dark"] .sb-quad-tile,
[data-theme="dark"] #sidebarQuad > div {
  background: #2d333b;
  border: 1px solid #3d4452;
  color: #f4f6f9;
}
[data-theme="dark"] .sb-quad-tile:hover,
[data-theme="dark"] #sidebarQuad > div:hover {
  background: #353c45;
  border-color: var(--accent);
}

/* ============================================================
 * 右上顶部三件套(只读徽章 / 语言切换 / 主题切换)统一对齐
 * ============================================================ */
#dbBadge {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;   /* 跟其它按钮一致圆角 */
  font-weight: 500 !important;
  cursor: help;
  line-height: 1.5;
  white-space: nowrap;
}
#langSwitch {
  height: 30px;
  line-height: 1;
}
#themeToggle {
  width: 30px !important; height: 30px !important;
  font-size: 14px !important;
}
/* 顶部右上容器:增加 gap + 垂直对齐 */
body > div[style*="position:fixed"][style*="top:14px"][style*="right:14px"] {
  gap: 6px !important;
  align-items: center !important;
}

/* 暗色 sidebar:用更深一档让卡片浮起更明显 */
[data-theme="dark"] .sidebar {
  background: #14181d;            /* 比 user-card 深一档 */
  border-right-color: #2d333b;
}
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-header {
  background: #14181d;
  border-bottom-color: #2d333b;
}
[data-theme="dark"] .sidebar-brand .brand-row { color: #f4f6f9; }
[data-theme="dark"] .brand-qbtn {
  background: #232830;
  border-color: #3d4452;
  color: #f4f6f9;
}
[data-theme="dark"] .brand-qbtn:hover {
  background: #2d333b;
  border-color: var(--accent);
}
[data-theme="dark"] .group-btns { border-bottom-color: #2d333b; }
[data-theme="dark"] .group-btn { color: #9ca3af; }
[data-theme="dark"] .group-btn:hover { color: #f4f6f9; }
[data-theme="dark"] .group-btn.active { color: #6cb0ff; border-bottom-color: #6cb0ff; }

/* ============================================================
 * 顶部右上 fixed 按钮组(dbBadge / langSwitch / themeToggle)
 * 加白底 panel + 阴影,视觉上跟下层 widget-box 分明,不再混淆边界
 * ============================================================ */
body > div[style*="position:fixed"][style*="top:14px"][style*="right:14px"]:has(#themeToggle) {
  background: var(--surface);
  padding: 5px 8px !important;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] body > div[style*="position:fixed"][style*="top:14px"][style*="right:14px"]:has(#themeToggle) {
  background: #1a1f26;
  border-color: #2d333b;
}

/* 发票管理 widget 的标题行,右侧留出 250px 避开顶部 fixed 按钮组 */
.widget-box > div:first-child:has(.inv-view-switch) {
  padding-right: 250px;
}
@media (max-width: 1100px) {
  .widget-box > div:first-child:has(.inv-view-switch) {
    padding-right: 0;
    padding-top: 36px;     /* 窄屏改成 viewSwitch 换行,顶部腾位置 */
  }
}

/* 用户卡修改密码按钮(底部一行,极简) */
.uc-pwd-row {
  display: flex; justify-content: center;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
}
.uc-pwd-btn {
  font-size: 11px !important; padding: 4px 14px !important;
  color: var(--text-3) !important;
}
.uc-pwd-btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="dark"] .uc-pwd-row { border-top-color: #2d333b; }

/* ============================================================
 * 顾问自定义 widget 大小(选项 B 鼠标拖拽 resize)
 * 2026-05-20 扩展:不止 .widget-box,项目工作区主要容器也加 resize
 *   .widget-box                — 商业洞察/发票/用户管理等大区
 *   .detail-section            — 候选人详情各小节
 *   .project-header-layout     — 项目顶部 JD 区
 * 持久化:localStorage `wsize_<title>` = {w, h}
 * 重置:user-card 底部 ↺ 按钮
 * ============================================================ */
/* v65:回退到最早简洁方案 — 只用浏览器原生 ::-webkit-resizer 三道斜线,不加伪元素 */
.widget-box,
.detail-section,
.project-header-layout,
.weekly-plan-card,
.user-card,
.okr-card,
.modal-content {
  resize: both;
  overflow: auto;
  min-width: 280px;
  min-height: 80px;
}
.modal-content { min-height: 200px; }
/* 嵌套去重(2026-06-12 补全):任何【可缩放容器】内部的【可缩放内容元素】关掉 resize,
   只保留最外层窗口/块(.modal-content / .bd-block)一个手柄 → 杜绝同角双手柄/多手柄(图二),全部单手柄(图一)。 */
.modal-content .widget-box,
.modal-content .detail-section,
.modal-content .weekly-plan-card,
.modal-content .okr-card,
.modal-content .user-card,
.modal-content .project-header-layout,
.bd-block .widget-box,
.bd-block .detail-section,
.bd-block .weekly-plan-card,
.bd-block .okr-card,
.bd-block .user-card,
.widget-box .widget-box,
.widget-box .detail-section,
.widget-box .weekly-plan-card,
.widget-box .okr-card,
.widget-box .user-card,
.detail-section .widget-box,
.detail-section .detail-section,
.weekly-plan-card .widget-box,
.weekly-plan-card .detail-section,
.okr-card .widget-box,
.okr-card .detail-section,
.user-card .widget-box,
.user-card .detail-section,
.project-header-layout .widget-box,
.project-header-layout .detail-section {
  resize: none !important;
}
/* 2026-06-12(用户要求):全前端统一拖拽手柄 = 【90°折角 + 双实线】。
   全局 ::-webkit-resizer,所有可缩放元素(textarea/各 widget/弹窗/.bd-block)一模一样。
   2026-07-12 Ben:图标缩小为原来的 3/5(60%)—— 可见图形收进右下角 60% 子区(位置 100% 100% + size 60%),
   拖拽命中区仍是浏览器默认整格(不变、好抓)。⌜直边角必须保留(Ben 要求):用【从右下角量的绝对像素】定位,
   画在 60% 子区的左上角(默认 resizer≈16px,60% 子区≈9.6px,其左上角距右下角 ≈9px)——这样 ⌜ 跟折角一起缩、位置也准,
   不再飘成「+」叉。三层:⌜直边角 + 双实线 grip + 90°折角。(曾试 1/3 太小 Ben 说效果不行;现为 60%。) */
::-webkit-resizer {
  background:
    /* ⓪ ⌜ 直边角 —— 贴 60% 子区左上角(百分比定位,跟随子区自动缩放,不依赖 resizer 具体像素)。
       横线在子区顶边、竖线在子区左边,交于左上角 ≈ (40%,40%);长 52%、细 0.7px。*/
    linear-gradient(var(--text-2), var(--text-2)) 83% 40% / 52% 0.7px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) 40% 83% / 0.7px 52% no-repeat,
    /* ① 双实线 grip —— 缩到右下 60% 子区 */
    linear-gradient(135deg, transparent 0 56.5%, var(--text-2) 56.5% 63.25%, transparent 63.25% 71%, var(--text-2) 71% 77.75%, transparent 77.75%) 100% 100% / 60% 60% no-repeat,
    /* ② 90°折角 —— 右下三角,缩到右下 60% 子区 */
    linear-gradient(135deg, transparent 48%, var(--border-strong) 48% 50%, rgba(0,0,0,.04) 50%) 100% 100% / 60% 60% no-repeat;
}
/* 重置按钮(在 user-card 修改密码按钮旁边) */
.uc-reset-sizes {
  font-size: 11px !important;
  padding: 4px 10px !important;
  color: var(--text-3) !important;
  margin-left: 6px;
}
.uc-reset-sizes:hover {
  color: var(--amber) !important;
  border-color: var(--amber) !important;
}

/* v93:精确寻人 segmented 平铺按钮(常显电话/姓名/职位) */
.direct-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.direct-seg-btn {
  padding: 7px 12px; font-size: 13px; background: var(--surface-2); color: var(--text-2);
  border: none; border-right: 1px solid var(--border); cursor: pointer; transition: all .12s; white-space: nowrap;
}
.direct-seg-btn:last-child { border-right: none; }
.direct-seg-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.direct-seg-btn:not(.active):hover { background: var(--surface-3, var(--surface)); }

/* v99:附件快照分段筛选(复用 direct-seg 外观) */
.snap-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.snap-seg-btn {
  padding: 6px 14px; font-size: 12px; background: var(--surface-2); color: var(--text-2);
  border: none; border-right: 1px solid var(--border); cursor: pointer; transition: all .12s; white-space: nowrap;
}
.snap-seg-btn:last-child { border-right: none; }
.snap-seg-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.snap-seg-btn:not(.active):hover { background: var(--surface-3, var(--surface)); }

/* v100(#1)部门树下钻 */
.dept-tree { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-bottom: 12px; max-height: 260px; overflow-y: auto; }
.dept-tree-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dept-all-btn { margin-left: auto; font-size: 11px; padding: 2px 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: 99px; cursor: pointer; }
.dept-all-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dept-node { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 6px; }
.dept-node:hover { background: var(--surface-3, var(--surface)); }
.dept-node.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dept-tw { width: 14px; display: inline-flex; justify-content: center; color: var(--text-3); cursor: pointer; flex-shrink: 0; }
.dept-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-cnt { font-size: 11px; color: var(--text-3); background: var(--surface); border-radius: 99px; padding: 1px 8px; min-width: 20px; text-align: center; flex-shrink: 0; }

/* ============ Google Material 风格 · 任务提醒中心(三主题统一,需求2) ============ */
/* Google 四色固定不随主题;底色用主题 surface 适配明暗 */
#notifDropdown.gnotif { width: 396px; border: none !important; border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(60,64,67,.26), 0 2px 6px rgba(60,64,67,.12) !important;
  background: var(--surface); animation: gnotifPop .24s cubic-bezier(.2,.85,.25,1.05); }
@keyframes gnotifPop { from { opacity:0; transform: translateY(-12px) scale(.96); } to { opacity:1; transform:none; } }
.gnotif-head { display:flex; justify-content:space-between; align-items:center; padding:14px 17px 10px;
  font-size:14px; font-weight:600; letter-spacing:.2px; color:var(--text); }
.gnotif-mark { font-size:11px; color:#1a73e8; background:none; border:none; cursor:pointer;
  padding:6px 11px; border-radius:16px; transition:background .15s; font-weight:500; }
.gnotif-mark:hover { background:rgba(26,115,232,.10); }
.gnotif-cells { display:flex; gap:8px; padding:2px 14px 11px; }
.gnotif-cell { flex:1; text-align:center; padding:9px 4px; border-radius:12px; cursor:pointer; border:none;
  background:var(--surface-2); transition:transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s; }
.gnotif-cell:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(60,64,67,.16); }
.gnotif-cell .num { font-size:19px; font-weight:700; line-height:1; color:var(--text-3); }
.gnotif-cell .lbl { font-size:9px; margin-top:4px; color:var(--text-2); white-space:nowrap; }
/* 需求2:9 类 pipeline — 换行排布 + 按钮缩到约 3/5 大 */
/* 🔴 2026-07-26 Ben「砍,节省空间」:九宫格砍成 4 个真待办后,不再需要把字压到 6.5px
   才塞得下(那是为 9 格挤出来的)。4 格一排,字号恢复正常、点击区变大。
   .gnotif-cells-9 保留但不再使用 —— 万一以后要恢复统计格,样式还在。 */
/* 2×2 布局:通知面板只有约 330px 宽,4 个横排每格才 78px —— 放不下「待补备注」这种 4 字标签
   (实测四个标签全部溢出)。改两行两列,每格约 160px,字号能给到 12px 且完全不挤。
   总高度仍比原九宫格省一大半。 */
.gnotif-cells-4 { display:grid !important; grid-template-columns:1fr 1fr; gap:7px; }
.gnotif-cells-4 .gnotif-cell {
    padding:9px 6px; border-radius:11px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.gnotif-cells-4 .gnotif-cell .num { font-size:18px; font-weight:700; line-height:1.15; }
.gnotif-cells-4 .gnotif-cell .lbl {
    font-size:12px; margin-top:3px; line-height:1.2;
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.gnotif-cells-9 { flex-wrap:wrap; gap:5px; }
.gnotif-cells-9 .gnotif-cell { flex:1 1 17%; min-width:58px; padding:5px 2px; border-radius:9px; }
.gnotif-cells-9 .gnotif-cell .num { font-size:12px; }
.gnotif-cells-9 .gnotif-cell .lbl { font-size:6.5px; margin-top:2px; }
.gnotif-cell.c-blue.on{background:rgba(26,115,232,.12)} .gnotif-cell.c-blue.on .num{color:#1a73e8}
.gnotif-cell.c-amber.on{background:rgba(249,171,0,.16)} .gnotif-cell.c-amber.on .num{color:#f9ab00}
.gnotif-cell.c-red.on{background:rgba(217,48,37,.12)} .gnotif-cell.c-red.on .num{color:#d93025}
.gnotif-cell.c-green.on{background:rgba(30,142,62,.12)} .gnotif-cell.c-green.on .num{color:#1e8e3e}
.gnotif-tabs { display:flex; border-bottom:1px solid var(--border); }
.gnotif-tab { flex:1; padding:11px 8px; font-size:11px; background:none; border:none; cursor:pointer;
  color:var(--text-3); font-weight:500; position:relative; transition:color .15s; }
.gnotif-tab.active { color:#1a73e8; }
.gnotif-tab.active::after { content:''; position:absolute; left:22%; right:22%; bottom:-1px; height:3px;
  background:#1a73e8; border-radius:3px 3px 0 0; animation:gnotifTabIn .25s cubic-bezier(.2,.8,.2,1); }
@keyframes gnotifTabIn { from{left:50%;right:50%;opacity:0;} to{opacity:1;} }
.gnotif-list { overflow-y:auto; max-height:330px; padding:6px; }
.gnotif-item { position:relative; padding:12px 14px 12px 18px; margin:4px 2px; border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid transparent; transition:box-shadow .18s, transform .14s, background .15s;
  animation:gnotifItemIn .32s backwards cubic-bezier(.2,.8,.2,1); }
.gnotif-item:hover { box-shadow:0 3px 12px rgba(60,64,67,.16); transform:translateY(-1px); background:var(--surface-2); }
.gnotif-item::before { content:''; position:absolute; left:0; top:11px; bottom:11px; width:4px; border-radius:0 3px 3px 0; background:transparent; }
.gnotif-item.s-blue::before{background:#1a73e8} .gnotif-item.s-red::before{background:#d93025} .gnotif-item.s-green::before{background:#1e8e3e}
.gnotif-item.blocking { background:rgba(217,48,37,.05); }
@keyframes gnotifItemIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.gnotif-list .gnotif-item:nth-child(1){animation-delay:.02s} .gnotif-list .gnotif-item:nth-child(2){animation-delay:.05s}
.gnotif-list .gnotif-item:nth-child(3){animation-delay:.08s} .gnotif-list .gnotif-item:nth-child(4){animation-delay:.11s}
.gnotif-list .gnotif-item:nth-child(5){animation-delay:.14s} .gnotif-list .gnotif-item:nth-child(n+6){animation-delay:.16s}
.gnotif-title { font-size:12px; font-weight:500; color:var(--text); display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.gnotif-body { color:var(--text-2); font-size:11px; margin-top:4px; line-height:1.5; white-space:pre-line; }
.gnotif-time { color:var(--text-3); font-size:9.5px; margin-top:5px; }
.gnotif-tag { font-size:9px; padding:2px 7px; border-radius:10px; margin-left:6px; font-weight:600; }
.gnotif-tag.red { background:rgba(217,48,37,.12); color:#d93025; }
.gnotif-tag.green { background:rgba(30,142,62,.12); color:#1e8e3e; }
.gnotif-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#1a73e8; margin-right:7px; flex-shrink:0; }
.gnotif-acts { margin-top:9px; display:flex; gap:8px; flex-wrap:wrap; }
.gnotif-btn { font-size:11px; padding:7px 15px; border-radius:18px; cursor:pointer; font-weight:500; border:none;
  position:relative; overflow:hidden; transition:box-shadow .15s, background .15s; }
.gnotif-btn.text { background:none; color:#1a73e8; }
.gnotif-btn.text:hover { background:rgba(26,115,232,.10); }
.gnotif-btn.filled { background:#1e8e3e; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.gnotif-btn.filled:hover { box-shadow:0 3px 10px rgba(30,142,62,.42); }

/* 2026-06-03:侧栏顶部「提醒任务中心」(待处理任务,默认展开/可收;普通用户+BP 默认展开) */
.ntc-wrap { margin:6px 0 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.ntc-head { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; cursor:pointer;
  font-size:12.5px; color:var(--text); background:var(--surface-2); user-select:none; transition:background .15s; }
.ntc-head:hover { background:var(--surface-3, var(--surface-2)); filter:brightness(.98); }
.ntc-count { background:var(--red); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px;
  border-radius:8px; padding:0 5px; align-items:center; justify-content:center; line-height:1; }
#ntcBody { max-height:340px; overflow-y:auto; padding:6px; }
.ntc-empty { text-align:center; color:var(--text-3); font-size:11px; padding:14px 8px; }
.ntc-item { position:relative; padding:9px 11px; margin:4px 2px; border-radius:10px; background:var(--surface);
  border:1px solid var(--border); transition:box-shadow .15s, background .15s;
  animation:gnotifItemIn .3s backwards cubic-bezier(.2,.8,.2,1); }
.ntc-item:hover { box-shadow:0 2px 8px rgba(60,64,67,.14); background:var(--surface-2); }
.ntc-item.blocking { background:rgba(217,48,37,.05); border-color:rgba(217,48,37,.25); }
.ntc-title { font-size:12px; font-weight:600; color:var(--text); line-height:1.35; display:flex; align-items:center; flex-wrap:wrap; gap:3px; }
.ntc-body-txt { color:var(--text-2); font-size:11px; margin-top:3px; line-height:1.45; }
.ntc-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:7px; flex-wrap:wrap; }
.ntc-time { color:var(--text-3); font-size:9.5px; flex-shrink:0; }
.ntc-acts { display:flex; gap:6px; flex-wrap:wrap; }
.ntc-btn { font-size:10.5px; padding:5px 11px; border-radius:14px; cursor:pointer; font-weight:600; border:none;
  transition:box-shadow .15s, background .15s; background:none; color:#1a73e8; }
.ntc-btn:hover { background:rgba(26,115,232,.10); }
.ntc-btn.filled { background:#1e8e3e; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ntc-btn.filled:hover { box-shadow:0 3px 9px rgba(30,142,62,.40); }
.ntc-tag { font-size:9px; padding:1px 6px; border-radius:9px; font-weight:700; background:rgba(217,48,37,.12); color:#d93025; }
.ntc-must { font-size:10px; color:#d93025; font-weight:600; }

/* 2026-06-03(任务8):普通用户/BP 侧栏内联「完整通知中心」—— 复用 gnotif-* 但适配侧栏窄宽 */
.ntc-full .ntc-head { border-bottom:1px solid var(--border); }
.ntc-full-body .gnotif-head > span { display:none; }   /* 隐藏内层「通知」标题(外层折叠头已写「提醒任务中心」)*/
.ntc-full-body .gnotif-head { justify-content:flex-end; padding:6px 12px 4px; }
.ntc-full-body .gnotif-cells { padding:4px 8px 8px; }
.ntc-full-body .gnotif-cells-9 { gap:4px; }
.ntc-full-body .gnotif-cells-9 .gnotif-cell { flex:1 1 28%; min-width:0; padding:5px 1px; border-radius:8px; }
.ntc-full-body .gnotif-cells-9 .gnotif-cell .num { font-size:13px; }
.ntc-full-body .gnotif-cells-9 .gnotif-cell .lbl { font-size:7.5px; margin-top:2px; }
.ntc-full-body .gnotif-tab { padding:8px 4px; font-size:11px; }
.ntc-full-body .gnotif-list { max-height:46vh; padding:5px; }
.ntc-full-body .gnotif-item { padding:9px 11px 9px 14px; margin:4px 1px; border-radius:10px; }
.ntc-full-body .gnotif-title { font-size:11.5px; }
.ntc-full-body .gnotif-body { font-size:10.5px; }
.ntc-full-body .gnotif-time { font-size:9px; }
.ntc-full-body .gnotif-btn { font-size:10.5px; padding:5px 10px; }
.ntc-full-body .gnotif-empty { padding:18px 8px; font-size:11px; }

/* 2026-06-03(任务2):每日登录欢迎页 */
.welcome-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,28,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .25s; padding:20px; }
.welcome-overlay.show { opacity:1; }
.welcome-card { width:min(440px,94vw); max-height:92vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:22px; padding:26px 26px 22px; box-shadow:0 24px 70px rgba(0,0,0,.32);
  transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.2,.9,.25,1); }
.welcome-overlay.show .welcome-card { transform:none; }
/* 2026-06-05:欢迎页放大 ~3 倍 + 右侧「今日新闻」两列布局 */
.welcome-card.wc-wide { width:min(1060px,96vw); padding:30px 32px 24px; }
.wc-2col { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:start; }
.wc-left { min-width:0; }
.wc-right { min-width:0; border-left:1px solid var(--border); padding-left:20px; max-height:66vh; overflow-y:auto; }
.wc-news-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:12px; }
.wc-news-sect { margin-bottom:15px; }
.wc-news-h { font-size:12px; font-weight:600; color:var(--accent); margin-bottom:5px; }
.wc-news-li { font-size:12.5px; color:var(--text-2); line-height:1.65; padding:2px 0; word-break:break-word; }
@media (max-width:760px){ .wc-2col { grid-template-columns:1fr; } .wc-right { border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:14px; margin-top:6px; } }
.wc-greet { font-size:21px; font-weight:700; color:var(--text); margin-bottom:8px; }
.wc-summary { font-size:13px; color:var(--text-2); line-height:1.6; margin-bottom:12px; }
.wc-projs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
.wc-projs-lb { font-size:11px; color:var(--text-3); }
.wc-proj { font-size:11px; background:var(--surface-2); color:var(--text-2); padding:3px 9px; border-radius:10px; }
.wc-cells { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.wc-cell { text-align:center; background:var(--surface-2); border-radius:13px; padding:11px 4px; }
.wc-num { font-size:21px; font-weight:800; line-height:1; }
.wc-lbl { font-size:9.5px; color:var(--text-3); margin-top:5px; }
.wc-year { margin-bottom:16px; }
.wc-year-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-2); margin-bottom:6px; gap:8px; }
.wc-bar { position:relative; height:9px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
.wc-bar-fill { position:absolute; left:0; top:0; bottom:0; border-radius:5px;
  background:linear-gradient(90deg,#1677ff,#5cb3ff,#1677ff); background-size:200% 100%; animation:okrBarFlow 1.6s linear infinite; }
.wc-bar-mark { position:absolute; top:-2px; width:2px; height:13px; background:var(--text); opacity:.5; border-radius:1px; }
.wc-base { font-size:11.5px; font-weight:600; margin-top:7px; }
.wc-quote { font-size:13px; color:var(--text); font-style:italic; line-height:1.7; text-align:center;
  background:var(--surface-2); border-radius:14px; padding:14px 16px; margin-bottom:18px; }
.wc-quote-a { font-size:11px; color:var(--text-3); font-style:normal; margin-top:6px; }
/* 2026-09-14 Ben:「猎头语录做大,占整个页面的四分之一」—— 只放大宽版欢迎卡,窄版不动 */
.wc-wide .wc-quote { font-size:clamp(22px,2.3vw,30px); font-weight:600; line-height:1.55; text-wrap:balance;
  min-height:clamp(240px,34vh,400px); padding:28px 34px; border-radius:18px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; }
.wc-wide .wc-quote-a { font-size:clamp(13px,1.15vw,17px); font-weight:400; margin-top:18px; }
.wc-enter { width:100%; padding:12px; border:none; border-radius:13px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s, transform .12s; }
.wc-enter:hover { filter:brightness(1.07); }
.wc-enter:active { transform:scale(.98); }

/* 2026-06-04:每日欢迎页年轻化动效 —— 顶部社交渐变条 + 呼吸灯 + 入场弹 + 卡片悬浮 */
.wc-banner { height:6px; margin:-26px -26px 16px; border-radius:22px 22px 0 0;
  background:linear-gradient(120deg,#1877f2,#6a5cff 42%,#ff5e8a 78%,#ffb347);
  background-size:240% 100%; animation:wcBannerFlow 6s ease-in-out infinite; }
@keyframes wcBannerFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
/* 呼吸灯:卡片外发光一呼一吸 */
.wc-breath { animation:wcBreath 3.4s ease-in-out infinite; }
@keyframes wcBreath {
  0%,100% { box-shadow:0 24px 70px rgba(0,0,0,.32), 0 0 0 0 rgba(106,92,255,0); }
  50%     { box-shadow:0 24px 70px rgba(0,0,0,.32), 0 0 24px 3px rgba(106,92,255,.40); }
}
/* 入场:从下方带一点回弹 */
.welcome-overlay.show .welcome-card { animation:wcPop .5s cubic-bezier(.18,.9,.25,1.15) both; }
@keyframes wcPop { 0%{opacity:0;transform:translateY(26px) scale(.94)} 60%{transform:translateY(-4px) scale(1.01)} 100%{opacity:1;transform:none} }
/* 数字格悬浮(社交卡片感)+ 进入按钮渐变流动 */
.wc-cell { transition:transform .15s, box-shadow .15s; }
.wc-cell:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.wc-enter { background:linear-gradient(120deg,#1877f2,#6a5cff); background-size:180% 100%; animation:wcBtnFlow 4.5s ease infinite; }
@keyframes wcBtnFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce) {
  .wc-breath, .wc-banner, .welcome-overlay.show .welcome-card, .wc-enter { animation:none !important; }
}

/* 2026-06-03:备注字段长度上限配置 */
.nfl-cat { margin-bottom:14px; }
.nfl-cat-h { font-size:13px; font-weight:700; color:var(--text); padding:7px 10px; background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; margin-bottom:6px; }
.nfl-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 10px; border-bottom:1px solid var(--border); }
.nfl-row:hover { background:var(--surface-2); }
.nfl-field { font-size:12px; color:var(--text-2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nfl-input { width:90px; flex-shrink:0; padding:5px 8px; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text); border-radius:6px; font-size:12px; text-align:center; }
.nfl-input:focus { outline:none; border-color:var(--accent); }
.note-field-row.too-short textarea { border-color:var(--red) !important; box-shadow:0 0 0 2px rgba(217,48,37,.12); }
.gnotif-btn::after { content:''; position:absolute; left:50%; top:50%; width:0; height:0; border-radius:50%;
  background:currentColor; opacity:.28; transform:translate(-50%,-50%); }
.gnotif-btn:active::after { width:260px; height:260px; opacity:0; transition:width .45s, height .45s, opacity .5s; }
.gnotif-empty { padding:32px 20px; text-align:center; color:var(--text-3); font-size:11px; }
.gnotif-musthint { font-size:9.5px; color:#d93025; margin-top:6px; }

/* ============ apple 主题 · 流行动效试验(需求3,仅 apple 生效) ============ */
/* 无障碍:用户开了「减少动态效果」则全部降级,不强加动画 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme^="apple"] .cand-item, html[data-theme^="apple"] .project-item,
  html[data-theme^="apple"] .weekly-plan-card, html[data-theme^="apple"] .tw-row,
  html[data-theme^="apple"] .modal-overlay.show .modal-content,
  html[data-theme^="apple"] #miniDialogOverlay.show #miniDialogContent { animation: none !important; }
}
/* 1) 列表/卡片进场 stagger — 用 backwards(只前向填充),动画后恢复正常,不压制 :hover */
@keyframes appleIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
html[data-theme^="apple"] .cand-item,
html[data-theme^="apple"] .project-item,
html[data-theme^="apple"] .weekly-plan-card,
html[data-theme^="apple"] .tw-row { animation: appleIn .42s backwards cubic-bezier(.16,1,.3,1); }
html[data-theme^="apple"] .cand-item:nth-child(2),html[data-theme^="apple"] .project-item:nth-child(2){animation-delay:.04s}
html[data-theme^="apple"] .cand-item:nth-child(3),html[data-theme^="apple"] .project-item:nth-child(3){animation-delay:.08s}
html[data-theme^="apple"] .cand-item:nth-child(4),html[data-theme^="apple"] .project-item:nth-child(4){animation-delay:.12s}
html[data-theme^="apple"] .cand-item:nth-child(5),html[data-theme^="apple"] .project-item:nth-child(5){animation-delay:.16s}
html[data-theme^="apple"] .cand-item:nth-child(6),html[data-theme^="apple"] .project-item:nth-child(6){animation-delay:.20s}
html[data-theme^="apple"] .cand-item:nth-child(n+7),html[data-theme^="apple"] .project-item:nth-child(n+7){animation-delay:.23s}
/* 2) 弹窗弹簧 — spring 缩放滑入(回弹曲线) */
@keyframes appleModalPop { 0%{opacity:0;transform:translateY(22px) scale(.93);} 55%{opacity:1;transform:translateY(-5px) scale(1.012);} 100%{transform:none;} }
html[data-theme^="apple"] .modal-overlay.show .modal-content,
html[data-theme^="apple"] #miniDialogOverlay.show #miniDialogContent { animation: appleModalPop .44s cubic-bezier(.34,1.56,.64,1); }
/* 3) 微交互 — 按钮 hover 抬升 + 点击回弹;卡片 hover 加平滑过渡(原本是瞬间) */
html[data-theme^="apple"] .btn-add,
html[data-theme^="apple"] .btn-ghost { transition: transform .16s cubic-bezier(.2,.85,.3,1), box-shadow .16s, background .15s; }
html[data-theme^="apple"] .btn-add:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,113,227,.30); }
html[data-theme^="apple"] .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
html[data-theme^="apple"] .btn-add:active,
html[data-theme^="apple"] .btn-ghost:active { transform: scale(.95); }
html[data-theme^="apple"] .project-item,
html[data-theme^="apple"] .cand-item { transition: transform .18s cubic-bezier(.2,.85,.3,1), box-shadow .18s; }
/* 4) 数字滚动累加 — 见 app.js animateCountUp(仅 apple 生效) */

/* ===== 2026-07-04 Ben「OKR/KPI 进度条要有紧迫感」:状态条 + 落后闪烁 ===== */
.okr-strip { padding: 6px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 700; margin: 6px 0 4px; }
.okr-strip.bad  { background: rgba(248,81,73,.14); color: var(--red); animation: urgFlash 1.1s ease-in-out infinite; }
.okr-strip.warn { background: rgba(245,158,11,.14); color: #a16207; }
.okr-strip.ok   { background: rgba(30,142,62,.14); color: var(--green); }
.okr-strip.ok2  { background: rgba(30,142,62,.08); color: var(--green); font-weight: 600; }
@keyframes urgFlash { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* 进度条加粗 + 应到刻度线更醒目 */
.okr-progress2 { height: 13px !important; }
.okr-progress2 .expected { width: 2.5px !important; background: var(--red) !important; opacity: .75; }

/* 2026-07-04 OKR 巨号数字 + 大缺口丸(目标10只做5,一眼扎心) */
.okr-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 3px; cursor: pointer; flex-wrap: wrap; }
.okr-hero-nums { line-height: 1; }
.okr-hero-nums .ohd { font-size: 48px; font-weight: 800; color: var(--accent); letter-spacing: -1px; }
.okr-hero-nums .ohs { font-size: 26px; color: var(--text-3); margin: 0 3px; font-weight: 400; }
.okr-hero-nums .oht { font-size: 26px; color: var(--text-3); font-weight: 700; }
.okr-hero-nums.bad .ohd  { color: var(--red); }
.okr-hero-nums.warn .ohd { color: #f0883e; }
.okr-hero-nums.ok .ohd   { color: var(--green); }
.okr-hero-gap { font-size: 15px; font-weight: 800; padding: 7px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.okr-hero-gap.bad  { background: rgba(248,81,73,.16); color: var(--red); animation: urgFlash 1.1s ease-in-out infinite; }
.okr-hero-gap.warn { background: rgba(245,158,11,.16); color: #a16207; }
.okr-hero-gap.ok   { background: rgba(30,142,62,.14); color: var(--green); }

/* ============================================================
 * 2026-07-25 Ben #5:非阻塞提醒「缓慢滑出」卡片(仿 Claude 桌面端)
 *   - 右上角从右侧缓慢滑入(360ms ease-out),停留 6s,300ms 淡出
 *   - 多条纵向堆叠;鼠标悬停暂停消失;点击跳转对应业务页
 *   - 阻塞类(MUST_HANDLE 4 类)不走这里,仍用全屏 blockingNotifMask
 * ============================================================ */
#notifSlideStack {
  position: fixed; top: 64px; right: 18px;
  z-index: 99200;                       /* toast(99000)之上、blocking mask(99600)之下 */
  display: flex; flex-direction: column; gap: 10px;
  width: 340px; max-width: calc(100vw - 28px);
  pointer-events: none;                 /* 容器不挡点击,卡片自身开启 */
}
.nslide {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 11px 13px 10px;
  cursor: pointer;
  animation: nslideIn .36s var(--ease-out) both;   /* 缓慢滑入 */
  transition: box-shadow .18s, transform .18s;
}
.nslide:hover { transform: translateX(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.nslide.nslide-out { animation: nslideOut .3s ease forwards; }
.nslide .ns-top { display: flex; align-items: flex-start; gap: 8px; }
.nslide .ns-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.35; word-break: break-word;
}
.nslide .ns-x {
  flex-shrink: 0; background: transparent; border: 0; color: var(--text-3);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.nslide .ns-x:hover { color: var(--text); }
.nslide .ns-body {
  font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-top: 4px;
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nslide .ns-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px;
}
.nslide .ns-time { font-size: 10px; color: var(--text-3); }
.nslide .ns-go { font-size: 11px; color: var(--accent); font-weight: 600; }
@keyframes nslideIn  { from { opacity: 0; transform: translateX(115%); } to { opacity: 1; transform: none; } }
@keyframes nslideOut { to   { opacity: 0; transform: translateX(60%); } }
/* 窄屏:改成顶部全宽滑入(从上往下) */
@media (max-width: 700px) {
  #notifSlideStack { top: 58px; right: 8px; left: 8px; width: auto; }
  .nslide { animation: nslideInTop .36s var(--ease-out) both; }
  .nslide:hover { transform: none; }
  .nslide.nslide-out { animation: nslideOutTop .3s ease forwards; }
  @keyframes nslideInTop  { from { opacity: 0; transform: translateY(-115%); } to { opacity: 1; transform: none; } }
  @keyframes nslideOutTop { to   { opacity: 0; transform: translateY(-40%); } }
}
/* 无障碍:用户开了「减少动效」→ 直接淡入淡出,不滑 */
@media (prefers-reduced-motion: reduce) {
  .nslide { animation: fadeIn .2s ease both; }
  .nslide.nslide-out { animation: toastOut .2s ease forwards; }
}


/* 2026-07-26 Ben:头像悬停浮出 💬 角标 = 给该同事发私信(比右键直观);头像左键原行为不受影响 */
.av-wrap:hover .av-chat { display: inline-flex !important; }
.av-wrap .av-chat:hover { transform: scale(1.15); }
/* 触屏没有 hover,直接常显(不然手机上永远看不到) */
@media (hover: none) { .av-wrap .av-chat { display: inline-flex !important; opacity: .85; } }


/* 2026-07-26 内部对话「＋选同事」搜索框 */
.cm-picksearch { padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-1); z-index: 2; }
.cm-picksearch input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); color: var(--text); font-size: 13px; outline: none; }
.cm-picksearch input:focus { border-color: var(--accent); }


/* ═══ 2026-07-26 Ben:分段按钮组(内容来源等)—— 选中/未选中反差太小 ═══
   原来选中态只改边框和文字颜色(--accent),在 stripe/linear/dark/apple-dark 四个主题下
   都不够显眼(尤其暗色主题,accent 紫/蓝和灰边框亮度接近)。
   改为:选中 = 实心 accent 背景 + 白字 + 加粗 + 轻微阴影;未选中 = 弱化(次级表面 + 次级文字)。 */
.seg-btn {
    padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface-2); color: var(--text-2);
    font-size: 12px; cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.seg-btn:hover { border-color: var(--accent); color: var(--text); }
.seg-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
    font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.seg-btn.active:hover { background: var(--accent-hover, var(--accent)); color: #fff; }


/* ═══ 2026-07-26 Ben:全局选中态反差加强 ═══
   问题:选中态原来只靠 --accent-soft(浅色主题 8% 透明度 → 与卡片底对比仅 1.11,肉眼几乎无差别)
        和 1px 边框换色。实测四主题都偏弱,浅色最严重。
   加强手法(不改布局、不挪位置,纯视觉):
     1) --accent-soft 浓度整体上调(见上方各主题变量)
     2) 选中项左侧加 3px 主色条 —— 这是最强的视觉锚点,浅色深色都醒目
     3) 边框 1px → 1.5px 并用主色,配合轻微阴影托起
   覆盖范围:项目列表、部门树、各类 tab / chip / 分段按钮 —— 全站统一。 */
.project-item.active,
.dept-node.active,
.okr-cycle-cell.current,
.ext-cat-btn.active,
.inv-tab.active {
    box-shadow: inset 3px 0 0 var(--accent), 0 1px 3px rgba(0, 0, 0, .10);
    border-color: var(--accent) !important;
    font-weight: 600;
}
/* 底部指示条型的 tab:条加粗到 3px,选中文字加深 */
.tab-btn.active,
.group-btn.active,
.gnotif-tab.active {
    border-bottom-width: 3px !important;
    border-bottom-color: var(--accent) !important;
    font-weight: 700;
}
/* 实心型选中(已是 accent 底的):补一层描边,暗色主题下更立体 */
.li-mode-btn.active,
.dept-all-btn.active,
.direct-seg-btn.active,
.snap-seg-btn.active,
.seg-btn.active,
.kpi-controls-inline .seg button.active {
    box-shadow: 0 0 0 1px var(--accent), 0 1px 4px rgba(0, 0, 0, .18);
}


/* ═══ 2026-07-26 Ben:可点文字「保留功能,不显横线」═══
   全站有 30 处内联写死 `text-decoration:underline dotted`(候选人名/公司名/项目名/榜单名/
   KPI 数字…),常显的虚线在密集列表里很吵。
   这里用一条全局规则覆盖:平时不显下划线(仍保留 accent 主色 + 手型光标暗示可点),
   鼠标移上去才显。行内 style 优先级高于普通选择器,所以必须用 !important。
   🔴 回退:删掉本段即可恢复原样。 */
[onclick][style*="underline dotted"],
[onclick][style*="underline dotted"] * {
    text-decoration: none !important;
}
[onclick][style*="underline dotted"]:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
/* CSS 类写法的那处(KPI 卡片数字)同样处理 */
.kpi-card .count.kpi-count-link { text-decoration: none; }
.kpi-card .count.kpi-count-link:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ═══ 2026-07-26 Ben「OKR 区界面过于复杂」简化配套样式 ═══ */
/* 备注明细改成折叠:平时只显一行汇总,点开才看六类分解 */
.okr-bd-fold { padding: 7px 9px; }
.okr-bd-fold > summary { display: flex; justify-content: space-between; align-items: center; }
.okr-bd-fold > summary::-webkit-details-marker { display: none; }   /* 去掉浏览器默认小三角 */
.okr-bd-fold .bd-caret { display: inline-block; margin-left: 5px; font-size: 9px; color: var(--text-3); transition: transform .15s; }
.okr-bd-fold[open] .bd-caret { transform: rotate(180deg); }
.okr-bd-fold[open] > summary { border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 5px; }
.okr-bd-fold .bd-title { margin-top: 2px; }
/* 「应完成 · 工作时段 · 周期」合成一行小字 */


/* 2026-07-26 Ben「无法拖动,看全局困难」:弹窗标题栏可拖动(实现见 app.js 全局委托) */
.modal-header { cursor: grab; user-select: none; }
.modal-header:active { cursor: grabbing; }
/* 标题栏里的按钮/输入框恢复正常光标 —— 它们不参与拖动 */
.modal-header button, .modal-header input, .modal-header select,
.modal-header a, .modal-header .close-btn { cursor: pointer; user-select: auto; }

/* ===== 2026-07-27 Ben:「case pool / mapping file / 经营看板 采用同样的右侧面板完整显示的方式」 =====
   参照「商业洞察」tab 的观感:左侧项目栏保持可见【且可交互】,右侧铺满剩余空间。
   与普通居中弹窗的区别:
     · 遮罩不盖左侧栏(left 由 JS 按 .sidebar 实际宽度设,支持栏宽变化/折叠)
     · 遮罩透明 —— 不压暗左侧,视觉上就是「右边换了一页」而不是「弹了个窗」
     · 内容铺满、无圆角、无外边距,高度撑满视口 */
.modal-overlay.as-side-panel {
  background: transparent;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  /* 🔴 2026-08-05 Ben 报「Case Pool 点开和顶部效率栏重叠」:
     #efficiencyBanner 是 fixed(top:19 高32 → 底 51)且 z-index:200,比遮罩(z:100)高;
     侧边面板原来 inset:0 从 top:0 铺 → 面板标题正好落在 19~51 这条带里被压住。
     和 .rside-full 同款让位 56px。三个面板(Case Pool / 经营看板 / Mapping File)一处全修。 */
  top: 56px;
}
.modal-overlay.as-side-panel > .modal-content { height: calc(100vh - 56px) !important; }
.modal-overlay.as-side-panel > .modal-content {
  /* 2026-07-27:普通弹窗有入场缩放动画(.modal-content 默认 transform,.show 时归位)。
     侧边面板是「换了一页」不是「弹个窗」,不要缩放;而且实测那个 scale(.93) 会让面板
     贴不住侧栏、也铺不满高度(渲染 753x620 而 computed 是 810x667)。显式归零。 */
  transform: none !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(100vh - 56px) !important;   /* 2026-08-05:配合上面 top:56px,否则底部会溢出屏幕 */
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 12px rgba(16, 24, 40, .06);
  display: flex;
  flex-direction: column;
}
/* 面板里的滚动区自己撑高,避免整页滚动 */
.modal-overlay.as-side-panel > .modal-content > .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* 窄屏(侧栏会被隐藏/挤掉)→ 退回整屏,别留一条空白 */
@media (max-width: 1100px) {
  .modal-overlay.as-side-panel { left: 0 !important; }
}

/* ══ 个人卡折叠(2026-08-05 Ben:默认只显示头像+姓名+职级,双击/点箭头展开)══
   折叠时保留 .uc-header(图三那部分),其余全收。团队卡是同一容器里的独立卡,一并收。 */
#userCard { position: relative; }
#userCard .uc-fold-btn {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 6px; cursor: pointer; user-select: none;
  color: var(--text-3); font-size: 11px; background: transparent;
  border: 0.5px solid transparent; transition: background .15s, color .15s;
}
#userCard .uc-fold-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
#userCard .uc-header { cursor: pointer; }        /* 双击这里也能收放 */
#userCard.uc-collapsed .uc-rows,
#userCard.uc-collapsed .uc-pwd-row,
#userCard.uc-collapsed .uc-act,
#userCard.uc-collapsed .team-card { display: none !important; }
#userCard.uc-collapsed { padding-bottom: 6px; }
#userCard.uc-collapsed .uc-header { margin-bottom: 0; }

/* 🔴 2026-08-05 Ben 报「Case Pool 表头和数据行重叠」根因:【双层滚动】。
   .area-scroll 自带 max-height:60vh + overflow-y:auto,侧边面板的 .modal-body 也滚
   → sticky 表头认的是【内层】.area-scroll(CSS 里 sticky 找最近的滚动祖先,不管它当下滚不滚),
     而内层整体被【外层】滚走 → 表头看着就陷进数据行中间。
   ⚠️ 单纯设 overflow-y:visible 没用:元素上有 inline 的 overflow-x:auto(表格要横滚),
     CSS 规范下另一轴的 visible 会被强制算成 auto,它照样是滚动容器。
   → 正解:让表格区成为【唯一】滚动容器 —— 外层不滚,内层 flex 撑满并自己滚,sticky 就吸对了。 */
.modal-overlay.as-side-panel .modal-body:has(#jobDemandSection) {
  /* !important:上面 .as-side-panel > .modal-content > .modal-body 用【长写】overflow-y:auto,
     这里的简写 overflow 压不过它(实测 computed 仍是 "hidden auto")→ 显式提权。 */
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
#jobDemandSection { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#jobDemandSection .area-scroll {
  flex: 1; min-height: 0; max-height: none;
  /* 🔴 表头吸不到顶的最后一块:.widget-box 有 padding-top:18px + border-top:1px = 19px,
     sticky 的 top:0 参照的是 content box 顶边 → 表头就停在这 19px 下沿,
     数据行从这条缝里穿过去,看着就是「表头压住半行数据」(Ben 图一)。
     去掉上内边距,表头才能真正贴住容器顶;表格首行自带 padding,视觉上不会挤。 */
  padding-top: 0;
}

/* 2026-08-06 Ben:个人卡/团队卡被拖宽后溢出侧栏、盖住右侧主区 ——
   侧栏内的可拖 widget 一律压在栏宽内(max-width 优先于拖拽写的 inline width)。
   高度不限:纵向由侧栏自己滚动,拖高不遮别人。 */
.sidebar .user-card,
.sidebar .team-card,
.sidebar .widget-box {
  /* 卡片自带左右 margin 12px → 上限要扣掉 24px,否则右缘仍探出 11px(实测) */
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box;
}
.sidebar { overflow-x: hidden; }   /* 双保险:万一还有别的内联宽度溢出,不许伸到主区 */

/* ══ 2026-08-06 Ben 选定 G2:Liquid Glass「重模糊高透」(iOS 控制中心风) ══
   只上【浮在内容之上】的三处 —— 底下有内容滚过,玻璃才成立:
     ① #mainTopMask 顶栏  ② .area-scroll thead th 吸顶表头  ③ .modal-header 弹窗/侧栏面板头
   列表行和卡片【不上】:底下是纯色背景,透出来只剩灰膜;且行数随数据增长,每行一层 GPU 模糊会掉帧。
   回退 = 整段删除,原规则原封不动在上面。 */
#mainTopMask,
.area-scroll thead th,
.modal-header {
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
}
#mainTopMask {
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.area-scroll thead th {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  /* inset 下边线是原规则给的分隔线,保留;再叠一道上缘高光 */
  box-shadow: inset 0 -1px 0 var(--border), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}
.modal-header {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
/* 玻璃层文字要压得住背后滚动的内容:浅色主题下尤其容易糊 */
#mainTopMask, .area-scroll thead th, .modal-header { font-weight: 600; }

/* 不支持 backdrop-filter 的浏览器:回到不透明底,不留半透明糊面 */
@supports not (backdrop-filter: blur(1px)) {
  #mainTopMask { background: var(--bg); }
  .area-scroll thead th, .modal-header { background: var(--surface); }
}

/* ══ 2026-08-07 Ben:「深色主题下黑字/黑框看不见,浅色下白字/白框看不见」根治 ══
   根因:<button> 不设 color 时,浏览器用系统色 `buttontext`(深色主题下常是黑色),
   而 SVG 图标一律 stroke="currentColor" → 继承到黑色 → 黑底黑图标,整个按钮像空框。
   更新中心条目的「编辑/删除」按钮就是这么消失的(Ben 截图 #317)。
   兜底:所有按钮/输入类元素默认继承主题文字色。显式写了 color 的(如蓝底白字)不受影响 ——
   内联 style 和更具体的选择器优先级都高于这里。 */
button, input, select, textarea {
  color: var(--text);
}
/* 透明底按钮里的图标:确保跟随主题,不吃浏览器默认色 */
button[style*="transparent"], .btn-ghost, .btn-icon {
  color: var(--text-2);
}
button svg, .btn-ghost svg, .btn-icon svg {
  stroke: currentColor;
}

/* ===== Case Pool 紧急度徽章(2026-08-26 Ben:P0/P1/P2 底色标注)=====
   色值全走主题语义变量(--red/--amber/--accent + soft 底),四套主题(浅/暗/apple/apple-dark)
   各自已校准,不写死颜色 → 不同主题下对比度自动成立。P1 文字用 --amber-strong:
   浅色主题下琥珀实色偏浅,该变量就是为「浅底上的琥珀文字」准备的(暗色主题下=amber)。 */
.urg-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 7px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.5;
}
.urg-p0 { background: var(--red-soft);    color: var(--red);          border: 1px solid var(--red); }
.urg-p1 { background: var(--amber-soft);  color: var(--amber-strong); border: 1px solid var(--amber); }
.urg-p2 { background: var(--accent-soft); color: var(--accent);       border: 1px solid var(--accent); }
.urg-none { background: transparent; color: var(--text-3); border: 1px dashed var(--border-strong); opacity: .55; }
.urg-none:hover { opacity: 1; }

/* ===== 商业洞察报告库:拖大外框时内部列表跟着长(2026-08-27 Ben「要有拖拽按钮能完整显示」)=====
   .widget-box 本身早有 resize:both(右下角原生手柄)+ wsize_* 持久化,但内部 .area-scroll 写死
   max-height → 拖大外框只是留白变多,列表还是被限死。这里让「拖过的外框」内部撑满:
   [style*="height"] 只在用户真拖过(inline height 落到 style)时命中,默认态不受影响。 */
#insightReportsBox[style*="height"] {
  display: flex;
  flex-direction: column;
}
#insightReportsBox[style*="height"] #insightReportsList {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#insightReportsBox[style*="height"] #insightReportsList > .area-scroll {
  max-height: none !important;
  flex: 1;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════
   2026-08-29 Ben:「话术建议做成浮窗,点开候选人简历直接并排在左边显示」
   —— 顾问打电话时要一边看简历一边看话术,原来话术在详情页最下面,得来回滚。
   🔴 只在够宽的屏幕启用(430 浮窗 + 800 详情 + 间距 ≈ 1320)。窄屏保持原来的堆叠,
      否则两块会叠在一起,比不做还糟。
   🔴 用 body 上的 class 控制,不改 .modal-content 本身的定义 —— 别的弹窗照旧。
   ══════════════════════════════════════════════════════════════ */
#isaScriptDockWrap {
  /* 🔴 2026-08-29 Ben:「不能独立移动话术框」—— 改成话术框自己能自由挪(左右+上下),
     详情弹窗待在原地不跟着走。默认位置仍是贴着详情左边缘,双击手柄复位。 */
  position: fixed; left: calc(14px + var(--dock-x, 0px)); top: calc(64px + var(--dock-y, 0px)); width: 430px;
  max-height: calc(100vh - 84px); overflow-y: auto;
  z-index: 101;                     /* 运行时由 JS 抬到详情弹窗之上(它会被动态提层) */
  background: var(--bg); border: 1px solid var(--border);
  /* 🔴 2026-08-29 Ben:「这两部分需要黏贴在一起」—— 右侧不圆角,和详情严丝合缝 */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  /* 🔴 Ben:「两个窗口默认有点重叠」+「阴影怎么会有这么宽」——
     实测根因:offsetWidth 430 - clientWidth 421 = 9px = 滚动条 7px + 分界线 1px。
     话术内容 1040px > 可视 814px,滚动条一直挂着,和详情贴在一起就成了一条实心深色带。
     不是阴影、也不是重叠。→ 滚动条改成几乎透明、hover 才显形;那条多余的
     border-right 去掉(滚动条本身就是分界)。阴影仍只向左打,不糊到详情上。 */
  box-shadow: -10px 0 28px -8px rgba(0, 0, 0, .28);
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: transparent transparent;
  padding: 10px 14px; display: none;
}
body.script-dock-on #isaScriptDockWrap { display: block; }
/* 详情弹窗贴着浮窗右边缘(14 + 430 = 444),中间不留缝 */
/* 详情弹窗固定在 444(浮窗默认右边缘),不跟着 --dock-x 走 —— 话术框挪开时它待在原地 */
body.script-dock-on .modal-overlay#profileModal {
  justify-content: flex-start; padding-left: 444px;
}
body.script-dock-on .modal-overlay#profileModal .modal-content {
  margin: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-left: none;
  max-height: calc(100vh - 84px); margin-top: 0;
  /* 详情的阴影同样别向左糊 —— 两块贴着,谁的阴影都不该压到对方身上 */
  box-shadow: 10px 0 28px -8px rgba(0, 0, 0, .28);
}
body.script-dock-on .modal-overlay#profileModal { align-items: flex-start; padding-top: 64px; }
#isaScriptDockWrap .detail-section { border-left: none !important; margin: 0 !important; }
#isaScriptDockWrap::-webkit-scrollbar { width: 6px; }
#isaScriptDockWrap::-webkit-scrollbar-track { background: transparent; }
#isaScriptDockWrap::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
/* 鼠标移到浮窗上才显形 —— 平时不显示,就不会在两块之间留一条深带 */
#isaScriptDockWrap:hover { scrollbar-color: rgba(140, 140, 150, .45) transparent; }
#isaScriptDockWrap:hover::-webkit-scrollbar-thumb { background: rgba(140, 140, 150, .45); }
#isaScriptDockWrap:hover::-webkit-scrollbar-thumb:hover { background: rgba(140, 140, 150, .75); }
.script-dock-bar {
  display: flex; align-items: center; gap: 8px;
  /* 🔴 2026-08-29 Ben:「标识处需要锁定」—— 话术内容很长(800px+),这条不钉住的话
     往下滚就看不见了,想收回/拖动还得先滚回顶部。sticky 相对浮窗的滚动容器生效。
     必须给不透明背景 + 负 margin 补回容器 padding,否则内容会从底下透出来。 */
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  margin: -10px -14px 8px; padding: 10px 14px 7px;
  border-bottom: 1px solid var(--border);
}
/* 拖动手柄:话术框独立拖(--dock-x/--dock-y,详情待原地);松手若压住详情 → JS 吸附到左/右侧(2026-09-02) */
.script-dock-grip {
  flex: 1 1 auto; height: 16px; cursor: move; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 6px);
  opacity: .5; transition: opacity .15s;
}
.script-dock-grip:hover { opacity: 1; }
.script-dock-grip.dragging { cursor: grabbing; opacity: 1; }
@media (max-width: 1359px) {                 /* 窄屏一律不浮,回到原来的位置 */
  body.script-dock-on #isaScriptDockWrap { display: none; }
  body.script-dock-on .modal-overlay#profileModal {
    justify-content: center; padding-left: 0; align-items: center; padding-top: 20px; }
  body.script-dock-on .modal-overlay#profileModal .modal-content {
    border-radius: var(--radius-lg); border-left: 1px solid var(--border); }
}

/* 2026-09-03 Ben(任务①):必点提醒常驻卡 —— 橙色左缘一眼区分,不自动消失,点 ✕/点开才关 */
.nslide.nslide-sticky { border-left: 4px solid var(--amber-strong, #f0883e); box-shadow: 0 6px 20px rgba(240,136,62,.25); }
.nslide.nslide-sticky .ns-title::before { content: '📌 '; }

/* 2026-09-15 Ben:顶栏不显示「LIVE」数据库状态徽章(逻辑照旧跑,DB 断链仍走通知) */
#dbBadge { display: none !important; }

/* 2026-09-23 公司画像卡(职位分析页顶部 / 客户详情「查看完整画像」弹窗):三栏 基本面 | 合作史 | 卖点 */
.cp-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 14px; }
@media (max-width: 1100px) { .cp-grid { grid-template-columns: 1fr; } }
.cp-h { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.cp-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.55; margin: 2px 0; }
.cp-k { flex: 0 0 76px; color: var(--text-3); }
.cp-v { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }