/* 云枢 MetaBridge · 设计系统 v2（2026-09-17；2026-10-12 品牌定名「云枢 MetaBridge」）
   风格基准：Linear / Notion / Stripe Dashboard —— 干净、克制、卡片化、大留白。
   主色 靛蓝 #4F46E5 只用在「关键操作 + 当前选中」，其余一律中性色；
   卡片 12px 圆角 + 极浅阴影 + 20~24px 内边距；页面底 #F8FAFC、卡片纯白形成层次；
   表格行高 52px、数字右对齐等宽、状态一律 pill；控件 36px（移动端 44px）。
   改视觉只改这个文件，页面 JS 里的 class 名尽量不动。 */

:root{
  /* 主色（靛蓝）：600 主色 / 700 hover / 800 深字 / 50 浅底 */
  --brand:#4F46E5; --brand-h:#4338CA; --brand-a:#3730A3; --brand-bg:#EEF2FF; --brand-bd:#C7D2FE;
  /* 功能色：只表达语义，不做装饰 */
  --ok:#16A34A;   --ok-bg:#F0FDF4;
  --warn:#F59E0B; --warn-bg:#FFFBEB;
  --bad:#DC2626;  --bad-bg:#FEF2F2; --bad-bd:#FECACA; --bad-h:#EF4444;
  --info:#0EA5E9; --info-bg:#F1F5F9;
  /* 语义色的「深字版」：浅底标签上写字用，保证对比度（值和 pill 里一直用的一致）
     ⚠️ 2026-09-20 实测校准：这三个值不能凭手感调 —— 它们是唯一一组要同时满足
        「浅底 -bg 上写字 ≥4.5:1」和「跟原色看得出是同族」的数值。
        --bad-d 原 #B91C1C 在 --bad-bg #FEF2F2 上只有 4.4:1（差 0.1 就掉出 WCAG AA），
        实测 #991B1B 是 6.0:1，留够余量；绿/橙两色实测已在 5:1 以上，保持不动。 */
  --ok-d:#15803D; --warn-d:#B45309; --bad-d:#991B1B; --warn-bd:#FDE68A; --ok-bd:#BBF7D0;

  /* —— 识别色（v3 · 2026-09-17）——
     用来给「分类」上色：导航分组、指标类型、班次、清单类别。
     它和「语义色」是两套东西：语义色（上面那组）只表达状态（迟到 / 未填 / 违规），
     识别色只表达「这属于哪一类」，本身不带好坏。
     每个色 4 档：主色 / -d 深字（浅底上写字）/ -bg 浅底 / -bd 浅描边。 */
  --c-indigo:#4F46E5; --c-indigo-d:#3730A3; --c-indigo-bg:#EEF2FF; --c-indigo-bd:#C7D2FE;
  --c-violet:#7C3AED; --c-violet-d:#5B21B6; --c-violet-bg:#F5F3FF; --c-violet-bd:#DDD6FE;
  --c-cyan:#0891B2;   --c-cyan-d:#155E75;   --c-cyan-bg:#ECFEFF;   --c-cyan-bd:#A5F3FC;
  --c-teal:#0D9488;   --c-teal-d:#115E59;   --c-teal-bg:#F0FDFA;   --c-teal-bd:#99F6E4;
  --c-amber:#D97706;  --c-amber-d:#92400E;  --c-amber-bg:#FFFBEB;  --c-amber-bd:#FDE68A;
  --c-rose:#E11D48;   --c-rose-d:#9F1239;   --c-rose-bg:#FFF1F2;   --c-rose-bd:#FECDD3;
  --c-sky:#0284C7;    --c-sky-d:#075985;    --c-sky-bg:#F0F9FF;    --c-sky-bd:#BAE6FD;

  /* 品牌渐变：Logo、主按钮、选中态、环形图表共用同一支，
     方向固定 135° —— 全站渐变方向不一致是最容易露怯的细节。 */
  --grad:#4F46E5;
  --grad-brand:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  --grad-brand-h:linear-gradient(135deg,#4338CA 0%,#6D28D9 100%);
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%);

  /* —— 尺度 token（v1 · 2026-09-19）——
     字号 / 行高 / 间距 / 圆角 / 阴影全部只从这里取。写 CSS 时不许出现 roster 之外的数值：
     26 种字号、27 种行高、57 种阴影是「看着不专业」的根因 —— 当所有元素的数值来自同一套
     有限集合时，界面自己就会产生秩序感，这就是高级感的真正来源。 */
  /* 字阶 6 档 + 1 档「拉丁微标」（够用一个后台了；再细分人眼分辨不出区别，只会制造噪声）
     ⚠️ 10px 那一档只给「纯拉丁 / 数字」的微标（品牌英文、未读数、序号箭头），
        中文任何情况下不得低于 12px —— 8.5 / 9 / 11 / 11.5px 的中文已全部并入 12px。 */
  --fs-2xs:10px;                                  /* 拉丁微标（旧名保留，值已改） */
  --fs-micro:10px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px;
  /* 行高 3 档：紧凑 UI 元素 / 正文 / 长文 */
  --lh-tight:1.35; --lh:1.6; --lh-loose:1.8;
  /* 间距 6 档（4 的倍数，视觉节奏统一） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* 表面：卡片白允许直接写 #fff（纯白不存在歧义），这只一枚给「卡片内的次级容器」用 */
 --surface:#fff;
  --card:var(--surface);   /* 卡片面别名：train.html 等页面引用的是这个名字（此前未定义，底色一直是空的） */
  --line-strong:#CBD5E1;   /* 强描边：输入框 / 下拉 / 可点容器的常态边框（比 --line 明显一档） */

  /* 文字与线 */
  --ink:#0F172A; --ink2:#475569; --ink3:#64748B; --ink4:#94A3B8; --ink5:#CBD5E1;
  --line:#E2E8F0; --line2:#F1F5F9; --bg:#F8FAFC; --panel:#F8FAFC;

  /* 形状 */
  /* 圆角 3 档（2026-09-23 收紧）：6 = 标签/小件，8 = 控件/按钮/图标块，12 = 卡片与面板。
     原来控件 10、卡片 14，比同代后台普遍偏「圆」；收到 8 / 12 之后
     「小件 → 控件 → 卡片」的梯度更清楚，也与设计规范文档里的半径刻度对齐。
     以前散着 25 种（1/2/3/4/5/7/8/9/12/15px…），看着脏的根因就是它。 */
  --r:12px; --r-sm:8px; --r-tag:6px; --r-lg:12px;
  /* 阴影分四档：现代后台的「高级感」有一半在阴影够柔、够分层，而不是一团糊黑 */
  --sh-xs:0 1px 2px rgba(15,23,42,.04);
  --sh:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md:0 2px 4px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06);
  --sh-lg:0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);

  /* —— 面栈 / 极淡色底 / 高亮（2026-09-23 新增）——
     暗色主题的层次全靠这套「面栈」：向上抬 = 面变亮，而不是堆阴影。
     亮色下的取值就是原来散在各处的那些（#F7F9FE / #FFFDF7 / #EAF2FF…），
     这里只是给它们名字 —— 换主题时只翻这几个名字，组件样式一行不用动。 */
  --surface-2:#F8FAFC;    /* 卡片内的次级容器 / 表头 / 行 hover */
  --surface-3:#F1F5F9;    /* 凹槽：分段控件轨道、禁用底 */
  --side-a:#FFFFFF; --side-b:#F7F9FE;   /* 侧栏渐变两端 */
  --ring:#FFFFFF;         /* 徽标外圈：与卡片同色才像「抠」出来的 */
  --edge-hi:#FFFFFF;      /* 顶边 1px 高光 */
  --tint-brand:#F7F9FF; --tint-cyan:#F5FEFF; --tint-violet:#FBFAFF;
  --tint-amber:#FFFDF7; --tint-rose:#FFFBFC; --tint-green:#F8FDF9; --tint-slate:#F6F8FD;
  --row-on:#F2F7FF; --row-on-h:#EAF2FF; --row-on-me:#DFEAFF;   /* 表格选中列 */
  --hit:#FFF3B8; --hit-fg:#7C4A03;                              /* 搜索命中 */
  --mark-bg:#FEF3C7; --mark-fg:#92400E;                         /* <mark> 高亮 */
  --rank-2:#DDE3FF; --rank-3:#EDF1FF;                           /* 名次条 2 / 3 名 */
  --glow-violet:rgba(124,58,237,.07); --glow-indigo:rgba(79,70,229,.07);  /* 页面底光晕 */
  /* 半透明层：顶栏毛玻璃 / 标签悬停罩 / 移动端底部操作条。
     这三处原来写死 rgba(255,255,255,…)，暗色下会变成三块发光的白斑，必须令牌化。 */
  --topbar-bg:rgba(255,255,255,.84);
  --veil:rgba(255,255,255,.85);
  --bar-bg:rgba(255,255,255,.97);
  /* 「实心深标」：卡密 / 申诉里的「已停售 / 已终止」徽标 —— 深底白字，
     暗色下必须抬亮一档（否则黑底黑字），所以也给它名字。 */
  --solid:#3A3F4B; --solid-bd:#2B2F38;

  --side-w:216px; --top-h:60px;
}

/* 原生控件（下拉 / 日期 / 滚动条）跟随主题 —— 少了这一句，
   暗色下 <select> 展开的面板仍是白底黑字，一眼就露馅。 */
html{color-scheme:light;}

/* ==================================================================
   暗色主题（2026-09-23）
   ------------------------------------------------------------------
   ⚠️ 这里只重写同名令牌的取值：不新增选择器、不改任何组件规则。
      所以整站翻主题 = 换这一块，组件样式零改动、HTML 与 JS 一行不碰。

   设计口径（和亮色不是简单反相）：
     ① 底色抬升靠「面栈变亮」：canvas → surface → panel，越往上越亮；
     ② 主色在深底上要提亮一档（indigo-600 → indigo-500），否则对比度不够；
     ③ 语义色 / 识别色整体上移一档；-bg 从「浅底」翻成「深底」，
        -d 从「深字」翻成「亮字」—— 这两个是成对的，必须一起翻；
     ④ 阴影更黑、描边更亮，否则卡片会糊成一片、层级全丢。
   ================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;

  /* 主色：提亮一档，hover 比 base 更亮（亮色下是更深） */
  --brand:#6366F1; --brand-h:#818CF8; --brand-a:#A5B4FC;
  --brand-bg:#1E2340; --brand-bd:#353C63;

  /* 功能色：base 提亮、-bg 翻成深底、-d 翻成亮字
     ⚠️ base 不能提太亮：--bad / --ok 这类 base 既当「深底上的文字」用（.status.err 等），
        又当「实心填充」用（.btn.danger 上压白字）。取「两者都能活」的中间值：
        #E5484D 在白底上压白字 ≈3.9:1，在深底上当前景色 ≈4.7:1，两头都过 AA。 */
  --ok:#22C55E;   --ok-bg:#0D2A17;   --ok-d:#86EFAC;   --ok-bd:#1B4A28;
  --warn:#F59E0B; --warn-bg:#33270A; --warn-d:#FCD34D; --warn-bd:#57400B;
  --bad:#E5484D;  --bad-bg:#3A1618;  --bad-d:#FCA5A5;  --bad-bd:#5C2226; --bad-h:#F87171;
  --info:#38BDF8; --info-bg:#14283A;

  /* 识别色 7 色 × 4 档（同上成对翻转）
     注意 base 档同样是「实心图标块 + 白色笔画」，不能选太浅的马卡龙色，
     否则白笔画糊在底上 —— 这里取「比亮色档亮一级、但仍有足够饱和度」的值。 */
  --c-indigo:#6366F1; --c-indigo-d:#A5B4FC; --c-indigo-bg:#1E2340; --c-indigo-bd:#353C63;
  --c-violet:#8B5CF6; --c-violet-d:#C4B5FD; --c-violet-bg:#241E42; --c-violet-bd:#3D3363;
  --c-cyan:#06B6D4;   --c-cyan-d:#67E8F9;   --c-cyan-bg:#0C2B36;   --c-cyan-bd:#15424F;
  --c-teal:#14B8A6;   --c-teal-d:#5EEAD4;   --c-teal-bg:#0B2F2B;   --c-teal-bd:#154840;
  --c-amber:#F59E0B;  --c-amber-d:#FCD34D;  --c-amber-bg:#33270A;  --c-amber-bd:#57400B;
  --c-rose:#F43F5E;   --c-rose-d:#FDA4AF;   --c-rose-bg:#3B1622;   --c-rose-bd:#5C2233;
  --c-sky:#0EA5E9;    --c-sky-d:#7DD3FC;    --c-sky-bg:#0A2C3D;    --c-sky-bd:#11445A;

  /* 品牌渐变：同角度、同步幅，只把两个端点提亮
     ⚠️ hover 那支不能也跟着提亮 —— 它是主按钮的悬停态、上面压白字，
        提亮后白字会糊掉。所以暗色的 hover 反而走「加深」（和亮色同一支）。 */
  --grad:#6366F1;
  --grad-brand:linear-gradient(135deg,#6366F1 0%,#8B5CF6 100%);
  --grad-brand-h:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%);

  /* 文字与线 */
  --ink:#E8EDF7; --ink2:#A8B4CC; --ink3:#8593AD; --ink4:#64748B; --ink5:#38455F;
  --line:#22304D; --line2:#1B2740; --line-strong:#33415E;

  /* 面栈：canvas 最暗 → surface → panel 逐级变亮 */
  --bg:#0A1020; --surface:#131E38; --surface-2:#1A2542; --surface-3:#0D1730;
  --panel:#1A2542;
  --side-a:#0E1A33; --side-b:#0A1020;
  --ring:#131E38; --edge-hi:rgba(255,255,255,.07);

  /* 极淡色底：各自保留色相倾向，只是整体压暗 */
  --tint-brand:#15203C; --tint-cyan:#0E2733; --tint-violet:#1C1B3E;
  --tint-amber:#2A2209; --tint-rose:#2A1518; --tint-green:#0F2118; --tint-slate:#16203A;

  /* 表格选中列 / 命中 / 高亮 */
  --row-on:#152140; --row-on-h:#1A2749; --row-on-me:#1F2E55;
  --hit:#4A3A0B; --hit-fg:#FCD34D;
  --mark-bg:#43340A; --mark-fg:#FDE68A;
  --rank-2:#202C52; --rank-3:#18233E;
  /* 光晕在深底上要加重，否则整页死平 */
  --glow-violet:rgba(139,92,246,.16); --glow-indigo:rgba(99,102,241,.14);

  /* 半透明层在深底上不能还是白：顶栏改「深面板 + 毛玻璃」，悬停改极淡白光 */
  --topbar-bg:rgba(16,25,48,.82); --veil:rgba(255,255,255,.06); --bar-bg:rgba(13,23,48,.97);
  /* 实心深标：暗色下抬亮，白字仍然读得清 */
  --solid:#4A5670; --solid-bd:#5F6C8A;

  /* 阴影：暗色下必须更黑，否则完全看不出层级 */
  --sh-xs:0 1px 2px rgba(2,6,20,.55);
  --sh:0 1px 2px rgba(2,6,20,.55), 0 1px 3px rgba(2,6,20,.45);
  --sh-md:0 2px 4px rgba(2,6,20,.5), 0 6px 16px rgba(2,6,20,.55);
  --sh-lg:0 12px 32px rgba(2,6,20,.66), 0 2px 6px rgba(2,6,20,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* 页面底：不再是死板的纯灰 —— 顶部两团极淡的靛蓝 / 紫色光晕，
   只在卡片之间的留白里透出来，白卡片压在上面 → 一眼就有纵深。 */
body{color:var(--ink); min-height:100vh; font-size:var(--fs-md); line-height:var(--lh);
  background-color:var(--bg);
  background-image:
    radial-gradient(1180px 500px at 80% -12%, var(--glow-violet), transparent 62%),
    radial-gradient(960px 440px at 8% -8%, var(--glow-indigo), transparent 60%);
  background-repeat:no-repeat; background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--brand-h);}
h1,h2,h3,h4{margin:0; font-weight:600;}

/* ============ 布局骨架 ============ */
.app{display:flex; min-height:100vh;}
/* 侧栏：白 → 极淡冷调渐变（上白下微蓝），左边缘一条 1px 高光，
   让它和内容区不是「一张白纸上画了条线」，而是有厚度的一块面板。 */
.side{position:fixed; left:0; top:0; bottom:0; width:var(--side-w); z-index:40;
  background:linear-gradient(180deg,var(--side-a) 0%,var(--panel) 58%,var(--side-b) 100%);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow:1px 0 0 rgba(15,23,42,.02), 0 0 24px rgba(79,70,229,.045);}
.app-main{flex:1; min-width:0; margin-left:var(--side-w); display:flex; flex-direction:column;}
.content{flex:1; padding:24px; min-width:0;}
.wrap{max-width:1160px; margin:0 auto;}
.wrap.wide{max-width:1480px;}

/* 侧边栏：品牌 + 菜单 + 身份
   v3（2026-09-17）：每个菜单项前面挂一个 26px 的彩色圆角图标块（.sd-i .ic）。
   颜色按「分组」绑，不按单项绑 —— 同组同色，颜色多了也不会花：
     先看规范 = 玫红 / 每日打卡 = 青 / 看数据 = 靛蓝 / 干活工具 = 紫 / 学习考试 = 琥珀。 */
.sd-brand{height:var(--top-h); display:flex; align-items:center; gap:11px; padding:0 15px;
  border-bottom:1px solid var(--line2); flex:none;}
/* 品牌标志：图形由 nav.js 的 LOGO_SVG 内联（「元中藏枢」渐变方圆标），这里只管尺寸和投影。
   投影用 drop-shadow 而不是 box-shadow —— 圆角方只占 44/48，box-shadow 会露出方角。 */
.sd-logo{width:34px; height:34px; flex:none; display:flex;}
.sd-logo svg{width:100%; height:100%; display:block;
  filter:drop-shadow(0 2px 5px rgba(83,41,217,.30));}
/* 品牌文字区（2026-10-12 云枢定名 v5）：中文名「云枢」/ 英文「MetaBridge」/ 定位语胶囊「TEAM WORKBENCH」。
   🔴🔴 这里的字号是「按 60px 高度倒推」出来的，不是随便挑的 —— 改任何一行的 font-size / line-height /
   上下 margin，都必须重算总高，**总高必须 ≤ 58px**（留 2px 余量）。超了就会上下各溢出一截，
   看起来就是用户报的「左上侧的字被挡住了」（2026-09-20 事故：token 统一把胶囊 9px→12px、
   英文 8.5px→10px，总高涨到 ~69.8px，超 9.8px）。
   当前账：name 16×1.25=20 ＋ name→en 1 ＋ en 10×1.25=12.5 ＋ en→sub 2 ＋ sub(10×1.2+2padding+2border)=16 = 51.5px ✅
   侧栏 216px，去掉 padding 30 + 标志 34 + gap 11 后可用约 141px（宽度靠 ellipsis 兜底，不会挤破）。
   「云枢」两字走 MiSans SemiBold 600（/brand/brand-font.css 窄切片注入），英文走 Outfit。 */
.sd-id{display:flex; flex-direction:column; min-width:0; justify-content:center;}
.sd-name{font-family:"MiSans",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 2026-10-12：拼音与英文并排一行（品牌规范）。拼音同走 Outfit —— MiSans 窄切片
   只切了「云/枢」两字（U+4E91/U+67A2），ú/ū 不在范围内会掉回系统字体、
   音调符号与汉字字形不匹配；Outfit 的 latin-ext 子集完整覆盖 ú/ū，
   且登录门的「yún shū · MetaBridge」本来就是 Outfit，两端视觉一致。
   高度账不变：name 16×1.25=20 ＋ latin(1+10×1.25)=13.5 ＋ latin→sub 2 ＋ sub 16 = 51.5px ✅ */
.sd-latin{display:flex; align-items:center; gap:4px; margin-top:1px; min-width:0;}
.sd-py{font-family:"Outfit",-apple-system,sans-serif; font-size:10px; font-weight:400;
  letter-spacing:.05em; line-height:1.25; color:var(--ink3);
  white-space:nowrap; flex:none;}
.sd-en{font-family:"Outfit",-apple-system,sans-serif; font-size:10px; font-weight:400;
  letter-spacing:.05em; line-height:1.25; color:var(--c-violet-d);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-en::before{content:"·"; margin-right:4px; color:var(--ink4);}
.sd-sub{align-self:flex-start; margin-top:2px; font-size:10px; font-weight:600; line-height:1.2;
  letter-spacing:.3px; padding:1px 5px; border-radius:var(--r-tag);
  color:var(--c-violet-d); background:var(--c-violet-bg); border:1px solid var(--c-violet-bd);}
.sd-menu{flex:1; overflow:auto; padding:8px 10px 6px;}
/* ★ 2026-10-12（用户要求）：分组标题的上间距收窄（15→8px），让侧栏更紧凑 ——
   原来「每日打卡」（组长/组员打卡）与「看数据」（组长看板/绩效看板）两组之间空档偏大。 */
.sd-sec{font-size:var(--fs-xs); color:var(--ink3); font-weight:600; padding:8px 10px 6px; letter-spacing:.6px;
  display:flex; align-items:center; gap:6px;}
.sd-sec::before{content:''; width:5px; height:5px; border-radius:var(--r-tag); background:var(--ink4); flex:none;}
.sd-i{display:flex; align-items:center; gap:10px; height:42px; padding:0 10px; margin-bottom:3px;
  border-radius:var(--r-sm); color:var(--ink2); font-size:var(--fs-md); text-decoration:none; cursor:pointer;
  position:relative; transition:background .15s, color .15s, box-shadow .15s;}
.sd-i:hover{background:var(--line2); color:var(--ink); text-decoration:none;}
.sd-i.on{color:var(--ink); font-weight:600; box-shadow:inset 3px 0 0 var(--ink4);}
.sd-i svg{width:16px; height:16px; flex:none; opacity:.9;}
/* 图标块：默认中性灰底；悬停 / 进组后上该组的识别色 */
.sd-i .ic{width:26px; height:26px; border-radius:var(--r-sm); flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--line2); color:var(--ink2);
  transition:background .15s, color .15s, box-shadow .15s;}
.sd-i .ic svg{width:15px; height:15px; opacity:1;}
/* 标题用固定类（.dot 角标会插到它后面，:last-child 会指错节点 —— 2026-09-23 数字角标上线时改的） */
.sd-i > .sd-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sd-i .dot{margin-left:auto; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-sm);
  background:var(--bad); color:#fff; font-size:var(--fs-micro); line-height:16px; text-align:center; font-weight:600;
  box-shadow:0 0 0 2px var(--ring);}
/* —— 分组绑色 —— */
.sd-i[data-c="rose"]   .ic{background:var(--c-rose-bg);   color:var(--c-rose-d);}
.sd-i[data-c="cyan"]   .ic{background:var(--c-cyan-bg);   color:var(--c-cyan-d);}
.sd-i[data-c="indigo"] .ic{background:var(--c-indigo-bg); color:var(--c-indigo-d);}
.sd-i[data-c="violet"] .ic{background:var(--c-violet-bg); color:var(--c-violet-d);}
.sd-i[data-c="amber"]  .ic{background:var(--c-amber-bg);  color:var(--c-amber-d);}
.sd-i[data-c="rose"]:hover   .ic,.sd-i[data-c="rose"].on   .ic{background:linear-gradient(135deg,var(--c-rose),#BE123C); color:#fff; box-shadow:0 3px 8px rgba(225,29,72,.32);}
.sd-i[data-c="cyan"]:hover   .ic,.sd-i[data-c="cyan"].on   .ic{background:linear-gradient(135deg,#06B6D4,var(--c-cyan)); color:#fff; box-shadow:0 3px 8px rgba(8,145,178,.32);}
.sd-i[data-c="indigo"]:hover .ic,.sd-i[data-c="indigo"].on .ic{background:var(--grad-brand); color:#fff; box-shadow:0 3px 8px rgba(79,70,229,.32);}
.sd-i[data-c="violet"]:hover .ic,.sd-i[data-c="violet"].on .ic{background:linear-gradient(135deg,#8B5CF6,var(--c-violet)); color:#fff; box-shadow:0 3px 8px rgba(124,58,237,.32);}
.sd-i[data-c="amber"]:hover  .ic,.sd-i[data-c="amber"].on  .ic{background:linear-gradient(135deg,var(--warn),var(--c-amber)); color:#fff; box-shadow:0 3px 8px rgba(217,119,6,.32);}
/* 选中项：该组色的浅底 + 左侧竖条 */
.sd-i[data-c="rose"].on   {background:var(--c-rose-bg);   box-shadow:inset 3px 0 0 var(--c-rose);}
.sd-i[data-c="cyan"].on   {background:var(--c-cyan-bg);   box-shadow:inset 3px 0 0 var(--c-cyan);}
.sd-i[data-c="indigo"].on {background:var(--c-indigo-bg); box-shadow:inset 3px 0 0 var(--c-indigo);}
.sd-i[data-c="violet"].on {background:var(--c-violet-bg); box-shadow:inset 3px 0 0 var(--c-violet);}
.sd-i[data-c="amber"].on  {background:var(--c-amber-bg);  box-shadow:inset 3px 0 0 var(--c-amber);}
/* 组标题的小色点跟着组色走 */
.sd-sec[data-c="rose"]::before{background:var(--c-rose);}
.sd-sec[data-c="cyan"]::before{background:var(--c-cyan);}
.sd-sec[data-c="indigo"]::before{background:var(--c-indigo);}
.sd-sec[data-c="violet"]::before{background:var(--c-violet);}
.sd-sec[data-c="amber"]::before{background:var(--c-amber);}
.sd-foot{flex:none; border-top:1px solid var(--line2); padding:12px 14px; display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface) 60%);}
.sd-av{width:30px; height:30px; border-radius:50%; background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600; flex:none;
  box-shadow:0 2px 6px rgba(79,70,229,.28);}
.sd-who{font-size:var(--fs-sm); font-weight:600; line-height:var(--lh-tight);}
.sd-role{font-size:var(--fs-xs); color:var(--ink3);}
.sd-toggle{display:none;}

/* 主管「预览视角」切换器（2026-09-25）：侧栏底部、身份卡上方。
   仅主管可见；选某角色只是把菜单按该角色渲染一遍，不改权限、不写数据。 */
.sd-prev{flex:none; margin:0 10px 8px; padding:10px 11px 11px; border:1px solid var(--line2);
  border-radius:var(--r-sm); background:var(--info-bg);}
.sd-prev-h{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:600; color:var(--ink2); margin-bottom:8px;}
.sd-prev-tip{font-size:var(--fs-micro); font-weight:500; color:var(--brand); background:rgba(79,70,229,.1);
  padding:1px 6px; border-radius:var(--r-tag);}
.sd-prev-seg{display:flex; width:100%; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-sm); padding:2px; gap:2px;}
.sd-prev-seg button{flex:1; font:inherit; font-size:var(--fs-xs); height:28px; padding:0 4px; border:0;
  border-radius:var(--r-tag); background:transparent; color:var(--ink3); cursor:pointer; white-space:nowrap;}
.sd-prev-seg button:hover{color:var(--ink);}
.sd-prev-seg button.on{background:var(--grad-brand); color:#fff; font-weight:600; box-shadow:0 1px 3px rgba(79,70,229,.32);}
.sd-prev-x{display:block; width:100%; margin-top:7px; font:inherit; font-size:var(--fs-xs); height:26px;
  border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink2); cursor:pointer;}
.sd-prev-x:hover{color:var(--bad); border-color:var(--bad);}

/* 顶栏：半透明毛玻璃（页面滚上去时内容从底下透过来），
   底部 1px 线换成「靛蓝 → 紫 → 透明」的渐变，是整页最省力的一处精致感。 */
.topbar{height:var(--top-h); flex:none;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:0 24px;
  box-shadow:0 1px 2px rgba(15,23,42,.02);}
.topbar::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(79,70,229,.34),rgba(124,58,237,.26) 32%,rgba(8,145,178,.14) 58%,transparent 84%);}
.tb-t{font-size:var(--fs-lg); font-weight:600; letter-spacing:.2px; display:flex; align-items:center; gap:9px;}
.tb-t:not(:empty)::before{content:''; width:3px; height:16px; border-radius:var(--r-tag);
  background:var(--grad-brand); flex:none;}
.tb-d{font-size:var(--fs-sm); color:var(--ink3); margin-left:10px;}
.tb-r{margin-left:auto; display:flex; align-items:center; gap:6px;}
.tb-date{font-size:var(--fs-sm); color:var(--ink3); font-variant-numeric:tabular-nums;}
.tb-ico{position:relative; width:32px; height:32px; border-radius:var(--r-sm); border:0; background:transparent;
  color:var(--ink2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.tb-ico:hover{background:var(--panel); color:var(--ink);}
.tb-ico svg{width:17px; height:17px;}
.tb-ico .bd{position:absolute; top:5px; right:5px; min-width:15px; height:15px; padding:0 4px;
  border-radius:var(--r-sm); background:var(--bad); color:#fff; font-size:var(--fs-micro); line-height:15px; text-align:center;
  font-weight:600; border:1.5px solid var(--ring); box-sizing:content-box;}
.tb-div{width:1px; height:18px; background:var(--line); margin:0 4px;}
.tb-user{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--ink2);}
.tb-user .av{width:26px; height:26px; border-radius:50%; background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:600;
  box-shadow:0 1px 4px rgba(79,70,229,.3);}

/* 页头（内容区第一屏） */
.pg-hd{display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.pg-hd .pg-t{font-size:var(--fs-xl); font-weight:600; letter-spacing:.2px;}
.pg-hd .pg-s{font-size:var(--fs-sm); color:var(--ink3); margin-top:4px; line-height:var(--lh);}
.pg-hd .pg-a{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}
/* 页面工具条：页面名留在顶栏时，内容区只留一行操作按钮（别再重复一个大标题） */
.pg-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px;}

/* ============ 卡片 ============ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  margin-bottom:20px; box-shadow:var(--sh);}
.card.pad0{padding:0; overflow:hidden;}
.card-hd{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.card-hd .c-t{font-size:var(--fs-lg); font-weight:600;}
.card-hd .c-s{font-size:var(--fs-sm); color:var(--ink3);}
.card-hd .c-a{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}
.card-hd.line{border-bottom:1px solid var(--line2); padding-bottom:14px;}
.card-bd{margin-top:4px;}

/* 区块小标题 */
.sec{display:flex; align-items:center; gap:10px; margin:22px 0 12px;}
.sec:first-child{margin-top:0;}
.sec b{font-size:var(--fs-md); font-weight:600;}
.sec .n{font-size:var(--fs-xs); color:var(--ink3);}
.sec .a{margin-left:auto; display:flex; gap:8px;}
/* 卡片内的小节标题：卡内不再用 18px 大字（会跟卡片标题打架），降到 15px + 主色短竖线 */
.sec-t{font-size:var(--fs-lg); font-weight:600; margin:20px 0 6px; display:flex; align-items:center; gap:8px;}
.sec-t:first-child{margin-top:4px;}
.sec-t::before{content:''; width:3px; height:13px; border-radius:var(--r-tag); background:var(--brand); flex:none;}
.sec-t .n{font-size:var(--fs-xs); font-weight:400; color:var(--ink3);}

/* ============ 指标卡 ============ */
.metrics{display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:16px;}
.metric{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
  box-shadow:var(--sh); min-width:0; overflow:hidden;}
.metric .m-l{font-size:var(--fs-sm); color:var(--ink3); display:flex; align-items:center; gap:6px;}
.metric .m-v{font-size:var(--fs-2xl); font-weight:600; line-height:var(--lh-tight); margin-top:6px; letter-spacing:.2px;
  font-variant-numeric:tabular-nums;}
.metric .m-u{font-size:var(--fs-sm); font-weight:400; color:var(--ink3); margin-left:3px;}
.metric .m-x{font-size:var(--fs-xs); color:var(--ink3); margin-top:4px;}
/* 2026-09-17 去噪：删掉 metric 的 blue/green/orange 装饰色 —— 数字是数据不是状态，
   一律走主文字色；只有「需要马上管」的异常才用 .red（满意率偏低 / 有差评）。 */
.metric.red .m-v{color:var(--bad);}

/* 卡片内小节标题：比 label.f 明显（品牌色竖条 + 深色加粗） */
label.blk-t{position:relative; padding-left:11px; font-size:var(--fs-lg); font-weight:600; color:var(--ink); letter-spacing:.2px;}
label.blk-t::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:14px; border-radius:var(--r-tag); background:var(--brand);}
label.blk-t.rd{color:var(--c-rose-d);}
label.blk-t.rd::before{background:var(--bad);}
/* 客服页「我的位置」条 */
.mepos{margin-top:12px; padding:9px 14px; border-radius:var(--r-sm); background:var(--brand-bg);
  border:1px solid var(--brand-bd); font-size:var(--fs-sm); color:var(--brand-a); line-height:var(--lh-loose);}
.mepos b{color:var(--brand-a); font-weight:600;}
.mepos .sp{color:var(--c-indigo-bd); margin:0 5px;}
/* 排名条形图：一屏看完 8 个人的相对位置，自己那行用主色 */
.rank-bars{margin-top:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg);}

/* ============ 按钮 ============ */
.btn{font:inherit; font-size:var(--fs-md); font-weight:500; height:36px; padding:0 16px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); display:inline-flex; align-items:center;
  justify-content:center; gap:6px; transition:all .15s; white-space:nowrap; line-height:1;}
.btn:hover{border-color:var(--brand-h); color:var(--brand-h);}
.btn.p,.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand);}
.btn.p:hover{background:var(--brand-h); border-color:var(--brand-h); color:#fff;}
.btn.danger{background:var(--bad); color:#fff; border-color:var(--bad);}
.btn.danger:hover{background:var(--bad-h); border-color:var(--bad-h); color:#fff;}
.btn.sm{height:30px; padding:0 12px; font-size:var(--fs-sm);}
.btn.lg{height:40px; padding:0 22px; font-size:var(--fs-lg);}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink2);}
.btn.ghost:hover{background:var(--panel); border-color:transparent; color:var(--ink);}
.btn.link{border-color:transparent; background:transparent; color:var(--brand); padding:0 4px;}
.btn.link:hover{background:transparent; color:var(--brand-h); text-decoration:underline;}
.btn[disabled],.btn[disabled]:hover{opacity:.5; cursor:not-allowed; background:var(--surface);
  border-color:var(--line); color:var(--ink4);}
.btn[disabled].p,.btn[disabled].p:hover{background:var(--brand); border-color:var(--brand); color:#fff; opacity:.45;}
.btn svg{width:14px; height:14px;}

/* ============ 表单 ============ */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
label.f{font-size:var(--fs-sm); color:var(--ink2); font-weight:500;}
select,input[type=date],input[type=text],input[type=month],input[type=number],input[type=password]{
  font:inherit; font-size:var(--fs-md); height:36px; padding:0 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); outline:none; transition:all .15s;}
select{padding-right:26px;}
select:focus,input:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(79,70,229,.14);}
input::placeholder{color:var(--ink4);}
.tarea{font:inherit; font-size:var(--fs-md); padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); resize:vertical; outline:none; background:var(--surface); color:var(--ink); width:100%;
  transition:all .15s;}
.tarea:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(79,70,229,.14);}
.fld{display:block; margin-bottom:14px;}
.fld > label{display:block; font-size:var(--fs-sm); color:var(--ink2); margin-bottom:6px; font-weight:500;}
.fld .u{color:var(--ink3); font-size:var(--fs-xs); margin-left:3px; font-weight:400;}

/* 分段控件 */
.seg{display:inline-flex; background:var(--info-bg); border-radius:var(--r-sm); padding:2px; gap:2px; flex-wrap:wrap;}
.seg button{font:inherit; font-size:var(--fs-sm); height:30px; padding:0 14px; border:0; border-radius:var(--r-tag);
  background:transparent; color:var(--ink2); cursor:pointer; transition:all .15s; white-space:nowrap;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--surface); color:var(--brand); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06);}
.seg.sm button{height:26px; padding:0 11px; font-size:var(--fs-sm);}
.seg.sm button.nav{padding:0 8px; font-size:var(--fs-lg); color:var(--ink2);}   /* ink3 在浅灰底只有 4.3:1，换 ink2 → 6.9:1 */
.seg.sm button.nav:hover{color:var(--brand);}

/* 导航 pills（旧版顶栏 / sop 页仍在用） */
.nav{display:flex; gap:2px; background:var(--info-bg); border-radius:var(--r-sm); padding:2px;}
.nav a.nav-i{font-size:var(--fs-sm); line-height:var(--lh); padding:5px 11px; border-radius:var(--r-tag);
  color:var(--ink2); text-decoration:none; white-space:nowrap; transition:background .12s, color .12s;}
.nav a.nav-i:hover{background:var(--line); color:var(--ink);}
.nav a.nav-i.on{background:var(--surface); color:var(--brand); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06);}

/* 功能标签栏（主管看板 10 个功能）· v3.1 工具条样式
   ------------------------------------------------------------------
   原来是「白底 + 底部一条线」的朴素 underline tab，10 个标签排开很像后台的默认样子。
   现在改成一条**有质感的工具条**：
     ① 整条是一个浅冷色容器（内嵌高光 + 细描边 + 圆角 14px），标签浮在容器里；
     ② 每个标签的文字前面挂一枚 26px 的**彩色图标块**（颜色按功能绑，见 .c-xxx）；
     ③ 选中的那个变成**白底胶囊**（带投影 + 该功能色的光晕），图标块填该色渐变、图标转白。
   彩色只落在 26px 图标块和选中胶囊上，文字仍是深色，扫一眼就能定位「我现在在哪」。
   拖动换顺序的交互（.dragging / .sorting / .tabrst）保持原样。 */
.tabs{display:flex; align-items:center; gap:3px; padding:5px; margin:0;
  background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--edge-hi), 0 1px 2px rgba(15,23,42,.04);
  flex-wrap:wrap;   /* 11 个标签 + 恢复默认，窄屏让它换行 —— 宁可行变成两排，也不能把标签藏进横向滚动里（滚动条是隐藏的，藏了就真找不着了） */
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 11px 0 6px;
  border:0; background:transparent; color:var(--ink2); font:inherit; font-size:var(--fs-sm); font-weight:500;
  cursor:pointer; white-space:nowrap; border-radius:var(--r); flex:none;
  transition:color .16s, background .16s, box-shadow .16s;}
.tab .ic{width:24px; height:24px; border-radius:var(--r-sm); flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--mc,var(--ink3)); border:1px solid var(--line);
  box-shadow:0 1px 1.5px rgba(15,23,42,.05);
  transition:background .16s, color .16s, border-color .16s, box-shadow .16s;}
.tab .ic svg{width:13px; height:13px;}
.tab:hover{background:var(--veil); color:var(--ink);}
.tab:hover .ic{border-color:var(--mc-bd,var(--ink5)); box-shadow:0 2px 6px -2px var(--mc,var(--ink3));}
.tab.on{color:var(--mc-d,var(--brand-a)); font-weight:600; background:var(--surface);
  box-shadow:0 1px 2px rgba(15,23,42,.07), 0 8px 18px -10px var(--mc,var(--brand));}
.tab.on .ic{background:linear-gradient(135deg,var(--mc,var(--brand)) 0%,var(--mc-d,var(--brand-h)) 100%);
  color:#fff; border-color:transparent;}
/* 10 个标签平铺一行，按住可拖动换顺序（拖完的落位反馈 + 右侧「恢复默认」） */
.tabs .tab{cursor:grab;}
.tabs .tab:active{cursor:grabbing;}
.tabs.sorting{user-select:none; cursor:grabbing;}
.tab.dragging{opacity:.6; background:var(--surface); box-shadow:0 12px 26px -10px rgba(15,23,42,.34);}
.tabs .tabrst{margin-left:auto; flex:none; border:1px solid transparent; background:transparent; color:var(--ink3);
  font:inherit; font-size:var(--fs-sm); cursor:pointer; padding:0 12px; height:36px; white-space:nowrap;
  border-radius:var(--r); transition:color .15s, background .15s, border-color .15s;}
.tabs .tabrst:hover{color:var(--brand); background:var(--surface); border-color:var(--c-indigo-bd);}
/* 拖动排序的说明文字：功能早就有，但只有 title 提示等于没有 —— 明写在条子下面才有人知道能拖。
   独占一整行（flex-basis:100%），永远不去和标签抢宽度；成功拖过一次后就永久收起来。 */
.tabs .tabhint{flex-basis:100%; flex:none; font-size:var(--fs-xs); color:var(--ink3);
  text-align:right; padding:0 6px 1px; user-select:none; margin-top:-2px;}
.tabs .tabhint b{color:var(--ink2); font-weight:600;}
.tabs .tabhint.off{display:none;}
@media (max-width:900px){
  .tabs{flex-wrap:wrap;}
  .tabs .tab{touch-action:none;}   /* 让手指横向拖动=换顺序，而不是滚页面 */
  .tabs .tabrst{height:32px;}
  .tabs .tabhint{display:none;}
}

/* ============ 表格 ============ */
table.dash{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm);}
table.dash th{text-align:left; font-weight:500; color:var(--ink3); font-size:var(--fs-xs); height:44px;
  padding:0 12px; background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap;}
table.dash th:first-child{border-top-left-radius:var(--r-sm);}
table.dash th:last-child{border-top-right-radius:var(--r-sm);}
table.dash th.sortable{cursor:pointer; user-select:none;}
table.dash th.sortable:hover{color:var(--brand);}
table.dash th .ar{font-size:var(--fs-micro); margin-left:3px; opacity:.5;}
table.dash th .ar.on{opacity:1; color:var(--brand);}
/* 团队数据：全部考核点一屏摊开（用户 2026-09-17），列宽够就不换行、窄屏横向滚动 */
.rank-matrix{min-width:900px;}
.rank-matrix th,.rank-matrix td{white-space:nowrap;}
.rank-matrix th .cu{font-weight:400; font-size:var(--fs-xs); color:var(--ink3); margin-left:2px;}
.rank-matrix th.num,table.dash.rank-matrix td.num{text-align:right;}
.rank-matrix .rname{position:sticky; left:0; background:var(--panel); z-index:1;}
.rank-matrix td.rname{background:var(--panel);}
.rank-matrix tbody tr:hover td.rname{background:var(--bg);}
.rank-matrix tr.rank-me td.rname{background:var(--brand-bg);}
table.dash th.col-on{background:var(--brand-bg); color:var(--brand-a);}
table.dash td.col-on{background:var(--row-on);}
.rank-matrix tbody tr:hover td.col-on{background:var(--row-on-h);}
.rank-matrix tr.rank-me td.col-on{background:var(--row-on-me);}
.chips-lb{font-size:var(--fs-sm); color:var(--ink3); margin-top:12px;}
/* ============ 说明收纳（2026-09-17 新增） ============
   公式、口径、权重这类「说明书文字」以前直接铺在界面上，把工具做成了文档。
   现在统一收成一个圆角问号，点开才展开 —— 信息一个字没少，首屏干净了。 */
details.exp{margin-top:10px;}
details.exp > summary{cursor:pointer; font-size:var(--fs-sm); color:var(--ink3); list-style:none;
  display:inline-flex; align-items:center; gap:5px; user-select:none; transition:color .15s;}
details.exp > summary::-webkit-details-marker{display:none;}
details.exp > summary::before{content:'?'; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; border:1px solid var(--line); color:var(--ink3);
  font-size:var(--fs-micro); line-height:1; font-weight:500;}
details.exp > summary:hover{color:var(--ink2);}
details.exp > summary:hover::before{border-color:var(--ink4); color:var(--ink2);}
details.exp[open] > summary{color:var(--ink2);}
details.exp .exp-b{margin-top:8px; padding:10px 12px; background:var(--bg); border-radius:var(--r-sm);
  font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh-loose);}
details.exp .exp-b b{color:var(--ink); font-weight:600;}
table.dash td{height:52px; padding:0 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.dash tbody tr:hover td{background:var(--bg);}
table.dash tbody tr:last-child td{border-bottom:none;}
table.dash td.right,table.dash th.right{text-align:right;}
table.dash td.mid,table.dash th.mid{text-align:center;}
/* 姓名列不换行：列一多时姓名被挤成竖排（用户 2026-09-16 反馈） */
.name{font-weight:600; white-space:nowrap;}
table.dash th:first-child,table.dash td:first-child{white-space:nowrap;}
/* ★ 2026-09-24 用户反馈：宽表里「姓名列过宽、后面的数字挤成一撮」。
   根因：table.dash 是 width:100% + 自动列宽 —— 各列内容都窄时，
   浏览器把富余宽度平摊给每一列，姓名这种短文本列就跟着被摊宽，
   看起来像「名字占了一大块」。修法：首列按内容收缩（width:1% 是
   让该列取「最小必需宽度」的经典写法），省下的宽度全让给数字/文字列；
   数字列本身是 tabular-nums + 右对齐，末位照样严格对齐。 */
table.dash > thead > tr > th:first-child,
table.dash > tbody > tr > td:first-child{width:1%;}
/* ★ 2026-10-12（用户反馈）：「团队数据」逐人明细表里**姓名列（第 2 列）**同样被撑宽 ——
   首列靠上面那条收住了，姓名列没有，于是它把富余宽度全吃掉（实测 302px，而名字才 3 个字），
   看起来就是「客服名字跟数据之间一大片空白」。沿用同一套思路，只对这张表把第 2 列也按内容收缩。 */
table.dash.team-detail > thead > tr > th:nth-child(2),
table.dash.team-detail > tbody > tr > td:nth-child(2){width:1%; white-space:nowrap; padding-right:22px;}
.num{font-variant-numeric:tabular-nums; color:var(--ink2); white-space:nowrap;}
/* 数字列右对齐：表头同向 → 末位严格对齐（2026-09-17 设计升级） */
table.dash th.num,table.dash td.num{text-align:right;}
.mini{height:6px; background:var(--line2); border-radius:999px; overflow:hidden; min-width:80px;}
.mini > i{display:block; height:100%; border-radius:999px;}
.subline{font-size:var(--fs-xs); color:var(--ink2); margin-top:2px;}
.subline b{color:var(--ink); font-weight:600;}
.miss{font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh-loose); margin-top:6px;}
.miss span{display:inline-block; background:var(--line2); color:var(--ink2); border:0;
  border-radius:var(--r-tag); padding:4px 10px; margin:0 8px 6px 0;}
.opline{margin-top:4px;}
.opline button{border:0; background:none; color:var(--ink3); font:inherit; font-size:var(--fs-xs);
  cursor:pointer; padding:0 6px 0 0; text-decoration:none;}
.opline button:hover{color:var(--brand);}

/* 通用表格（排班等） */
table.wk th, table.wk td{text-align:center; padding:6px 4px;}
table.wk th i{display:block; font-style:normal; font-size:var(--fs-xs); font-weight:400; opacity:.65; margin-top:1px;}
table.wk td.wk-today, table.wk th.wk-today,table.mon tr.wk-today td{background:var(--warn-bg);}
table.wk th{background:var(--panel); color:var(--ink2); font-size:var(--fs-sm); font-weight:600;}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r);}
table.mon th, table.mon td{text-align:center; padding:5px 3px;}
table.mon th{background:var(--panel); color:var(--ink2); font-size:var(--fs-sm); font-weight:600;}
table.mon th i{display:block; font-style:normal; font-size:var(--fs-xs); font-weight:400; opacity:.65; margin-top:1px;}
table.mon th.md, table.mon td.md{text-align:left; width:78px; padding-left:10px; white-space:nowrap;}
table.mon td.md{font-size:var(--fs-sm); font-weight:500;}
table.mon td.md i{display:inline; font-style:normal; font-size:var(--fs-xs); font-weight:400; color:var(--ink3); margin-left:5px;}
table.mon td.md-n{width:58px; color:var(--ink2); font-size:var(--fs-sm);}
table.mon tr.wk-we td.md{color:var(--ink4);}
table.mon tr.wk-we{background:var(--bg);}
table.mon.stat td{padding:7px 4px; font-size:var(--fs-sm);}
table.mon.stat th{padding:7px 4px; font-size:var(--fs-xs);}

/* 班次格按钮 */
.wkcell{width:100%; min-width:34px; height:30px; border-radius:var(--r-sm); border:1px solid;
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:.14s;}
.wkcell:hover{filter:brightness(.96); box-shadow:0 0 0 2px rgba(79,70,229,.18);}
table.mon .wkcell{min-width:28px; height:27px; font-size:var(--fs-sm);}
.sbtn{font:inherit; font-size:var(--fs-sm); min-width:34px; height:28px; padding:0 8px; margin-right:6px;
  border-radius:var(--r-sm); cursor:pointer; border:1px solid var(--line); background:var(--surface);
  color:var(--ink2); transition:.12s;}
.sbtn:hover{border-color:var(--ink4); background:var(--panel);}
.sbtn.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.sbtn.w{min-width:auto;}
.mon-cur{font-size:var(--fs-sm); font-weight:600; color:var(--ink2); padding:0 4px; min-width:76px; text-align:center; align-self:center;}

/* ============ 标签 / 徽标 ============ */
.pill{display:inline-block; font-size:var(--fs-xs); line-height:20px; padding:0 9px; border-radius:var(--r-tag);
  font-weight:400; border:1px solid transparent; white-space:nowrap; vertical-align:middle;}
.pill.g{background:var(--ok-bg); color:var(--ok-d); border-color:var(--ok-bd);}
.pill.y{background:var(--warn-bg); color:var(--warn-d); border-color:var(--warn-bd);}
.pill.r{background:var(--bad-bg); color:var(--bad-d); border-color:var(--bad-bd);}
.pill.b{background:var(--brand-bg); color:var(--brand-a); border-color:var(--brand-bd);}
.pill.n{background:var(--info-bg); color:var(--ink2); border-color:var(--line);}
/* 「可点/提示」类标签不再各配一个色相（原来天蓝 #0369A1），统一走中性灰 */
.pill.t{background:var(--bg); color:var(--ink2); border-color:var(--line);}
.pill.on{font-weight:600;}
.shiftTag{display:inline-block; font-size:var(--fs-xs); font-weight:500; line-height:20px; padding:0 8px;
  border-radius:var(--r-tag); border:1px solid transparent; white-space:nowrap; vertical-align:middle;}
/* 小徽标同理：默认中性，不再是琥珀底 */
.tag{font-size:var(--fs-xs); font-weight:500; padding:0 6px; border-radius:var(--r-tag); background:var(--bg);
  color:var(--ink2); border:1px solid var(--line); line-height:18px; display:inline-block;}

/* ============ 提示条（2026-09-17 去噪） ============
   不再整条铺浅彩底 —— 改成「白底 + 左侧 3px 语义色条」。
   一屏里的彩色只出现在这 3px 上，眼睛不被色块牵着走，
   但「这条是红 / 黄 / 绿 / 蓝」照样一眼看出来。 */
.notice,.subtip,.nexttip,.alert{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--r); padding:10px 14px; font-size:var(--fs-sm); line-height:var(--lh);
  margin-bottom:14px; color:var(--ink2);}
.notice b,.subtip b,.nexttip b,.alert b{font-weight:600; color:var(--ink);}
.notice{border-left-color:var(--bad);}
.subtip{border-left-color:var(--brand); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.subtip .sp{flex:1; min-width:160px;}
.nexttip{border-left-color:var(--warn); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.nexttip .sp{flex:1; min-width:180px;}
.alert.r{border-left-color:var(--bad);}
.alert.y{border-left-color:var(--warn);}
.alert.g{border-left-color:var(--ok);}
.alert.b{border-left-color:var(--brand);}
/* 左侧色条工具类：去噪后「需要点颜色」的地方统一用它，不再整块铺浅彩底 */
.acc-b{border-left:3px solid var(--brand);}
.acc-r{border-left:3px solid var(--bad);}
.acc-y{border-left:3px solid var(--warn);}
.acc-g{border-left:3px solid var(--ok);}
.acc-n{border-left:3px solid var(--line);}
/* 应做没做的人：名字直接划红线（考试没交卷 / 上班没填数据） */
s.red-line{color:var(--bad); text-decoration:line-through; text-decoration-thickness:2px; font-weight:600;}
.hint{font-size:var(--fs-sm); color:var(--ink3); line-height:var(--lh-loose); margin-top:10px;}
/* 班次合计这类「标签灰 + 数字深」的写法：数字加粗走主文字色，不再每种班次一个颜色 */
.hint b{color:var(--ink); font-weight:600;}
.empty{text-align:center; color:var(--ink3); padding:40px 10px; font-size:var(--fs-sm); line-height:var(--lh-loose);}
.empty .big{font-size:var(--fs-lg); color:var(--ink2); margin-bottom:6px;}

/* ============ 上下班状态条 ============ */
.shift{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin-bottom:16px; box-shadow:var(--sh);}
.shift .sh-l{flex:1; min-width:180px;}
.shift .sh-t{font-weight:600; font-size:var(--fs-lg); display:flex; align-items:center; gap:8px;}
.shift .sh-s{font-size:var(--fs-sm); color:var(--ink3); margin-top:4px;}
.shift .sh-r{display:flex; gap:8px; align-items:center;}
.shift.idle{background:linear-gradient(180deg,var(--tint-brand),var(--surface)); border-color:var(--brand-bd);}
.shift.working{background:linear-gradient(180deg,var(--tint-green),var(--surface)); border-color:var(--ok-bd);}
.shift.working .sh-t{color:var(--ok-d);}
.shift.done{background:var(--panel);}
.shift.off{background:linear-gradient(180deg,var(--warn-bg),var(--surface)); border-color:var(--warn-bd);}
.shift.off .sh-t{color:var(--c-amber-d);}
.live{width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block;
  box-shadow:0 0 0 0 rgba(0,180,42,.6); animation:pulse 1.8s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(0,180,42,0);}100%{box-shadow:0 0 0 0 rgba(0,180,42,0);}}
.restcard{text-align:center; padding:36px 16px;}
.restcard .big{font-size:var(--fs-lg); font-weight:600; color:var(--c-amber-d); margin-bottom:8px;}
.sh-d{font-size:var(--fs-xs); color:var(--ink3); margin-bottom:4px;}

/* ============ 打卡页首屏：身份条 → 今日打卡 → 其他 ============
   用户 2026-09-16 反馈：①首屏通知/日期/班次/打卡/卡密/异常全堆在一起，不知道先看哪；
   ②「请先在上方选择你的名字」藏在打卡区中间，滚下去就看不见。
   做法：身份条置顶；班次状态 + 进度合并成「今日打卡」主卡当唯一焦点；通知与其他登记折叠。 */

/* 身份条（页面最顶上）：选名字是第一步 */
.mebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; margin-bottom:16px; box-shadow:var(--sh);}
.mebar .mb-l{min-width:220px;}
.mebar .mb-t{font-size:var(--fs-lg); font-weight:600;}
.mebar .mb-s{font-size:var(--fs-sm); color:var(--ink3); margin-top:3px;}
.mebar.need{background:linear-gradient(180deg,var(--tint-amber),var(--surface)); border-color:var(--warn-bd);}
.mebar.need .mb-t{color:var(--c-amber-d);}
.mebar #who{height:38px; font-size:var(--fs-lg); font-weight:600; min-width:190px;}
.mebar.locked{padding:11px 18px;}
.mebar.locked .mb-l{display:none;}

/* 今日打卡主卡：整页唯一的焦点，其他模块都往后退
   2026-09-17 去噪：原来的三段渐变色底（蓝/绿/黄）全部撤掉，
   状态改由「顶部 3px 状态色条」表达 —— 卡片保持纯白，页面不再花。 */
.hero{background:var(--surface); border:1px solid var(--line); border-top-width:3px;
  border-radius:var(--r); padding:20px 22px; margin-bottom:16px; box-shadow:var(--sh);}
.hero.idle{border-top-color:var(--brand);}
.hero.working{border-top-color:var(--ok);}
.hero.off{border-top-color:var(--warn);}
.hero.done{border-top-color:var(--line);}
.hero .hero-hd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.hero .h-t{font-size:var(--fs-xl); font-weight:600; letter-spacing:.3px;}
.hero .h-d{font-size:var(--fs-sm); color:var(--ink3);}
.hero .h-s{font-size:var(--fs-sm); color:var(--ink3);}
.hero .shift{background:transparent; border-color:transparent; box-shadow:none; padding:0; margin:0;}
.hero .shift .sh-t{font-size:var(--fs-xl); line-height:var(--lh-tight);}
.hero .shift .sh-s{font-size:var(--fs-sm);}
.hero .prog{margin-top:18px; padding-top:15px; border-top:1px dashed var(--line);}
.hero .prog .bar{height:10px;}
.hero .prog .pct{font-size:var(--fs-md); font-weight:600; color:var(--ink); min-width:92px;}

/* 「其他登记」折叠区：卡密入库 / 当日对接收进来，首屏不展开也能看到有几条 */
.more{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  margin-bottom:16px; box-shadow:var(--sh); overflow:hidden;}
.more > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:15px 20px; font-size:var(--fs-md);}
.more > summary::-webkit-details-marker{display:none;}
.more > summary b{font-size:var(--fs-lg); font-weight:600;}
.more > summary::after{content:'▾'; color:var(--ink3); font-size:var(--fs-xs);}
.more[open] > summary::after{content:'▴';}
.more > summary:hover{background:var(--bg);}
.more .mm-n{font-size:var(--fs-sm); color:var(--ink3); font-variant-numeric:tabular-nums;}
.more.has .mm-n{color:var(--warn-d); font-weight:600;}
.more .mm-h{font-size:var(--fs-sm); color:var(--ink3);}
.more > .mm-b{padding:0 20px 10px;}
/* 折叠区里的两块不再各自再套一层边框卡（卡里套卡），用一条分隔线分开就够了 */
.more > .mm-b > .card{border:0; box-shadow:none; border-radius:0; margin:0; padding:14px 0 6px;
  border-top:1px solid var(--line2);}
.more > .mm-b > .card:first-child{border-top:0;}

/* 未读通知：折叠成一条摘要（去掉渐变和琥珀描边，只留左侧一条琥珀色） */
.nfold{border:1px solid var(--line); border-left:3px solid var(--warn); background:var(--surface);
  border-radius:var(--r); box-shadow:var(--sh);}
.nfold > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:13px 18px; flex-wrap:wrap;}
.nfold > summary::-webkit-details-marker{display:none;}
.nfold > summary b{font-size:var(--fs-md); color:var(--c-amber-d);}
.nfold .nh-t{font-size:var(--fs-sm); color:var(--ink3);}
.nfold .nf-ar{font-size:var(--fs-xs); color:var(--warn-d); min-width:30px; text-align:right;}
.nfold .nf-ar::after{content:'展开';}
.nfold[open] .nf-ar::after{content:'收起';}
.nfold[open] > summary{border-bottom:1px solid var(--line2);}
.nfold > .nfold-b{padding:12px 18px 4px;}

/* ============ 清单 ============ */
.cat h3{margin:20px 0 10px; font-size:var(--fs-md); display:flex; align-items:center; gap:8px;}
.cat h3 .dot{width:8px; height:8px; border-radius:var(--r-tag); display:inline-block;}
.cat h3 .n{color:var(--ink3); font-weight:400; font-size:var(--fs-xs); margin-left:auto; font-variant-numeric:tabular-nums;}
.item{display:flex; gap:11px; padding:11px 14px; border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--surface); margin-bottom:8px; cursor:pointer; transition:.12s; align-items:flex-start;}
.item:hover{border-color:var(--brand-bg); background:var(--bg);}
.item input{width:16px; height:16px; margin:3px 0 0; accent-color:var(--brand); cursor:pointer; flex:none;}
.item .body{flex:1; min-width:0;}
.item .t{font-weight:500; font-size:var(--fs-sm); display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:var(--lh);}
.item .d{color:var(--ink2); font-size:var(--fs-sm); line-height:var(--lh); margin-top:3px;}
/* 2026-09-17 去噪：正文里的强调改成「深色 + 加粗」，不再一红一绿两个色相。
   原来 11 条标准里有 8 条挂着红字（连「不自己定」这种正向要求也是红的），
   满屏红字反而让真正的红线贬值 —— 现在只有「先看这一条」那种硬性禁止才用红。 */
.item .d b{color:var(--ink); font-weight:600;}
.item .d em{font-style:normal; color:var(--brand-a); font-weight:600;}
.item.ro .d b{color:var(--ink);}
/* 红线与罚则页例外：那一页的定义就是「碰了就是违规」，红字保留 */
#redBox .item .d b{color:var(--bad);}
/* 已勾完的条目：以前整条铺浅绿底，一屏勾完就是一片绿。
   现在只留「灰掉 + 划掉」两个信号，颜色留给真正的异常。 */
.item.done{background:transparent; border-color:var(--line2);}
.item.done .t{color:var(--ink4); text-decoration:line-through; text-decoration-color:var(--ink4);}
.item.done .d{color:var(--ink4);}
.item .mk{width:16px; flex:none; text-align:center; color:var(--ink4); margin-top:3px;}
.item .mk::before{content:'•'; font-size:var(--fs-lg); line-height:16px;}
.item .amt{font-size:var(--fs-xs); font-weight:600; padding:0 6px; border-radius:var(--r-tag); background:var(--bad-bg);
  color:var(--bad-d); border:1px solid var(--bad-bd); line-height:18px; display:inline-block;}
.item .icat{display:inline-block; margin-top:5px; font-size:var(--fs-xs); color:var(--ink3);
  background:var(--info-bg); border-radius:var(--r-tag); padding:0 6px; line-height:18px;}
/* 「只读条目列表」（工作标准 / 红线与罚则）：以前每条是一个带边框灰底的盒子，
   一层大卡里再套 11 个小卡 → 很碎。改成只有一条底部分隔线，整组读起来是一个列表。 */
.item.ro{cursor:default; background:transparent; border:0; border-bottom:1px solid var(--line2);
  border-radius:0; padding:12px 4px; margin-bottom:0;}
.item.ro:last-child{border-bottom:0; padding-bottom:4px;}
.item.ro:hover{border-color:transparent; border-bottom-color:var(--line2); background:transparent;}
.item.ro:hover{border-color:var(--line2); background:var(--bg);}

/* 分层：关键动作（按时段）/ 工作标准 / 红线 */
.keywrap{margin-bottom:6px;}
.kw-h{display:flex; align-items:baseline; gap:8px; margin:4px 0 10px;}
.kw-h b{font-size:var(--fs-md);}
.kw-n{font-size:var(--fs-xs); color:var(--ink3);}
.phase{border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden; background:var(--surface);}
.phase.cur{border-color:var(--brand-bd); background:var(--panel);}
.ph-h{display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; user-select:none;}
.ph-h b{font-size:var(--fs-sm);}
.ph-n{font-size:var(--fs-xs); color:var(--ink3); font-variant-numeric:tabular-nums;}
.ph-hint{font-size:var(--fs-xs); color:var(--ink3); margin-left:auto;}
.phase.cur .ph-hint{color:var(--brand); font-weight:600;}
.ph-ar{font-size:var(--fs-xs); color:var(--brand); min-width:26px; text-align:right;}
.ph-b{padding:0 12px 12px;}
.phase .item{margin-bottom:7px;}
.lyr{border:1px solid var(--line); border-radius:var(--r); margin-top:10px; background:var(--surface);}
.lyr > summary{list-style:none; cursor:pointer; padding:11px 14px; display:flex; align-items:center; gap:8px;}
.lyr > summary::-webkit-details-marker{display:none;}
.lyr > summary b{font-size:var(--fs-sm);}
.lyr > summary::before{content:'▸'; color:var(--ink3); font-size:var(--fs-xs);}
.lyr[open] > summary::before{content:'▾';}
.lyr-n{font-size:var(--fs-xs); color:var(--ink3);}
.lyr-hint{font-size:var(--fs-xs); color:var(--ink3); margin-left:auto;}
.lyr.red{border-color:var(--bad-bd); background:var(--tint-rose);}
.lyr.red > summary b{color:var(--bad-d);}
.lyr-b{padding:0;}

/* ============ 进度 ============ */
.prog{display:flex; align-items:center; gap:12px; margin-top:14px;}
.bar{flex:1; height:8px; background:var(--line2); border-radius:999px; overflow:hidden;}
.bar > i{display:block; height:100%; width:0; background:var(--brand);
  border-radius:999px; transition:width .25s;}
.pct{font-variant-numeric:tabular-nums; font-size:var(--fs-sm); color:var(--ink2); min-width:76px; text-align:right;}

/* ============ 卡密入库 / 对接 / 事件 ============ */
#reportList{margin-top:12px;}
.iform{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; margin-top:12px;}
.icard{border:1px solid var(--line2); border-radius:var(--r); padding:12px 14px; margin-top:9px; background:var(--surface);}
.icard.ok{background:var(--panel);}
.icard.stk{background:var(--tint-cyan); border-color:var(--c-sky-bd);}
.icard .ih{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.icard .ik{font-weight:600; font-size:var(--fs-md);}
.icard .it{font-size:var(--fs-xs); color:var(--ink3); font-variant-numeric:tabular-nums;}
.icard .idetail{margin-top:8px; white-space:pre-wrap; word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--fs-sm);
  line-height:var(--lh-loose); color:var(--ink); background:var(--panel); border:1px solid var(--line2);
  border-radius:var(--r-sm); padding:9px 11px; max-height:190px; overflow:auto;}
.icard .inote{margin-top:7px; font-size:var(--fs-sm); color:var(--ink2);}
.lnk{border:0; background:none; font:inherit; font-size:var(--fs-sm); color:var(--brand);
  cursor:pointer; padding:0 2px; text-decoration:none;}
.lnk:hover{text-decoration:underline;}
.lnk.danger{color:var(--bad);}
.lnk.hi{color:var(--c-sky-d); font-weight:600;}

.rcard{border:1px solid var(--line2); border-left:3px solid var(--brand-bd); border-radius:var(--r-sm);
  padding:11px 14px; margin-top:9px; background:var(--surface);}
.rcard.ok{background:var(--panel); border-left-color:var(--line);}
.rcard .rh{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rcard .rtext{margin-top:6px; font-size:var(--fs-sm); line-height:var(--lh-loose); white-space:pre-wrap; word-break:break-word;}
.rcard.ok .rtext{color:var(--ink3);}
.rreply{margin-top:9px; padding:9px 12px; background:var(--ok-bg); border:1px solid var(--ok-bd);
  border-left:3px solid var(--ok); border-radius:var(--r-sm); font-size:var(--fs-sm); line-height:var(--lh-loose);
  color:var(--ok-d); white-space:pre-wrap; word-break:break-word;}
.rreply b{color:var(--ok-d);}

/* 记一笔 / 预警卡 */
.evpick{display:flex; flex-wrap:wrap; gap:8px;}
.evp{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); font-size:var(--fs-sm); cursor:pointer; align-items:center; transition:.14s;}
.evp:hover{border-color:var(--brand-bd); background:var(--panel);}
.evp .rl{font-size:var(--fs-xs); color:var(--ink3);}
.ecard{border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-sm);
  padding:11px 14px; margin-bottom:8px; background:var(--surface);}
/* 2026-09-17 去噪：预警/表扬卡不再整块铺浅色底，只留左侧 3px 色条 */
.ecard.good{border-left-color:var(--ok);}
.ecard.lv-r{border-left-color:var(--bad);}
.ecard.lv-y{border-left-color:var(--warn);}
.ecard.lv-n{border-left-color:var(--line);}
.ecard .idetail{margin-top:6px; font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh);}
.ecard .ih{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ecard .ik{font-weight:600;}

/* ============ 公告 ============ */
.nwrap{margin-bottom:16px;}
.nwrap.quiet{margin-bottom:10px;}
.nhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:var(--fs-sm);}
.nhead b{font-size:var(--fs-md); color:var(--c-amber-d);}
.ncard{border:1px solid var(--line2); border-left:3px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; margin-top:11px; background:var(--surface);}
.ncard.u{border-color:var(--warn-bd); border-left-color:var(--warn); background:linear-gradient(180deg,var(--tint-amber),var(--surface));}
.ncard.ok{border-left-color:var(--line); background:var(--panel);}
.ncard.gw{opacity:.55;}
.ncard .nh{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ncard .ntitle{font-weight:600; font-size:var(--fs-md); line-height:var(--lh);}
.ncard .nt{font-size:var(--fs-xs); color:var(--ink3); font-variant-numeric:tabular-nums; white-space:nowrap;}
.ncard .nbody{margin-top:7px; font-size:var(--fs-sm); line-height:var(--lh-loose); white-space:pre-wrap; word-break:break-word;}
.ncard.ok .nbody{color:var(--ink2);}
.ncard .nf{margin-top:11px; display:flex; justify-content:flex-end;}
.ncard .nfoot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px dashed var(--line);}
.ncard .nbar{height:6px; background:var(--line2); border-radius:999px; overflow:hidden; margin-top:10px;}
.ncard .nbar > i{display:block; height:100%;}
.ncard .nreceipt{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
/* 长正文折叠：默认裁到约 3 行，点「展开全文」就地展开；避免一条长公告顶高整屏 */
.ncard .nbody.fold{max-height:5.4em; overflow:hidden;}
.ncard .nbody.fold.open{max-height:none;}
.ncard .nmore{margin-top:5px; padding:0; font-size:var(--fs-xs);}
.rc{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); padding:0 8px; line-height:20px;
  border-radius:var(--r-tag); border:1px solid transparent; white-space:nowrap;}
.rc i{font-style:normal; opacity:.72; font-variant-numeric:tabular-nums;}
.rc.r-ok{background:var(--ok-bg); color:var(--ok-d); border-color:var(--ok-bd);}
.rc.r-no{background:var(--bad-bg); color:var(--bad-d); border-color:var(--bad-bd);}

/* ── 公告卡头部 + 条目排版（2026-10-01）───────────────────────────────
   头部：标题 / 说明在左，大号主按钮在右 —— 原来「＋ 发一条」是小号按钮、还排在
   提示文字后面，用户反馈「不够明显」，这里改成一眼就能看到的入口。 */
.ntc-head{display:flex; align-items:flex-start; gap:16px; padding-bottom:13px; margin-bottom:2px;
  border-bottom:1px solid var(--line2);}
.ntc-h-l{flex:1; min-width:0;}
.ntc-h-t{font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:.2px;}
.ntc-h-s{margin-top:5px; font-size:var(--fs-xs); color:var(--ink3); line-height:1.55;}
.ntc-add{flex:none; height:38px; padding:0 18px; gap:7px; font-size:var(--fs-sm); font-weight:600;
  display:inline-flex; align-items:center; white-space:nowrap;
  box-shadow:0 2px 10px rgba(79,70,229,.30);}
.ntc-add svg{width:15px; height:15px; flex:none;}
@media (max-width:560px){
  .ntc-head{flex-direction:column; align-items:stretch; gap:11px;}
  .ntc-add{width:100%; justify-content:center;}
}
/* 公告条目：元信息（发给 / 已读 / 有效期）独立一行；操作独占一行；回执明细默认收起 */
.ncard{padding:15px 17px;}
.ncard .nmeta{display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:10px;
  font-size:var(--fs-xs); color:var(--ink3);}
.ncard .nmeta b{color:var(--ink2); font-weight:600;}
.ncard .nfoot{justify-content:flex-end;}
.ncard .nrcpt{margin-top:9px; border-top:1px dashed var(--line); padding-top:2px;}
.ncard .nrcpt > summary{list-style:none; cursor:pointer; user-select:none; display:flex;
  align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--ink3); padding:7px 0;}
.ncard .nrcpt > summary::-webkit-details-marker{display:none;}
.ncard .nrcpt > summary::before{content:'\25B8'; color:var(--ink4); font-size:10px; line-height:1;
  transition:transform .15s ease;}
.ncard .nrcpt[open] > summary::before{transform:rotate(90deg);}
.ncard .nrcpt > summary b{color:var(--ok-d);}
.ncard .nrcpt > summary .miss{color:var(--warn-d);}
.ncard .nrcpt .nreceipt{margin-top:2px;}
.ndone{margin-top:12px;}
.ndone summary{cursor:pointer; font-size:var(--fs-sm); color:var(--ink2); padding:5px 0; outline:none;}
.ndone summary:hover{color:var(--brand);}

/* 看板「按人分组」 */
.igroup{margin-top:16px;}
.igroup:first-child{margin-top:2px;}
.igroup .igh{display:flex; align-items:center; gap:9px; padding-bottom:7px; border-bottom:1px dashed var(--line);}
.igroup .igh .nm{font-weight:600; font-size:var(--fs-md);}

/* 导入预览 */
.impchips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.pickwrap{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px;}
.pickbtn{padding:7px 15px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface); font:inherit; font-size:var(--fs-sm); cursor:pointer;}
.pickbtn:hover{border-color:var(--ink4);}
.pickbtn.on{outline:2px solid var(--brand); font-weight:600;}
.pick{display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:0 12px; height:28px; font-size:var(--fs-sm); cursor:pointer; user-select:none; transition:.14s;}
.pick:hover{border-color:var(--ink4);}
.pick i{font-style:normal; font-size:var(--fs-xs); color:var(--ink3); background:var(--line2); border-radius:var(--r-tag); padding:0 4px;}
.pick.on{background:var(--brand-bg); border-color:var(--brand); color:var(--brand); font-weight:600;}
.pick.on i{background:var(--brand-bd); color:var(--brand);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--info-bg); border-radius:999px;
  padding:0 6px 0 12px; font-size:var(--fs-sm); height:28px;}
.chip button{border:0; background:var(--line); color:var(--ink2); width:18px; height:18px; border-radius:50%;
  cursor:pointer; line-height:1; font-size:var(--fs-xs); padding:0;}
.chip button:hover{background:var(--bad-bd); color:var(--bad-d);}

/* ============ 数据填报 / 统计 ============ */
.stgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-top:12px;}
.stf{border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; background:var(--surface);}
.stf label{display:block; font-size:var(--fs-sm); color:var(--ink2); margin-bottom:6px;}
.stf .u{color:var(--ink3); font-size:var(--fs-xs); margin-left:3px;}
.stf input{width:100%;}
/* 下班填报表：两个店并排两栏，一次看全，不用再来回切（2026-09-17 用户要求）
   栏内不再给每个数字框套边框 —— 16 个小框会糊成一片，改由外层面板负责分组。 */
.stcols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:12px;}
.stp{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px 15px; background:var(--surface);}
.stp-hd{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line2);}
.stp-t{font-size:var(--fs-md); font-weight:700; color:var(--ink);}
.stp .stgrid{margin-top:12px; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:10px;}
.stp .stf{border:0; padding:0; background:transparent;}
.stp .stf label{font-size:var(--fs-xs); margin-bottom:5px;}
/* 差评原因两店通用 → 只有一块（2026-09-17 用户要求）；保存按钮挪到两栏下面一行，跟各自那栏对齐 */
.stp-wide{margin-top:12px;}
.stacts{gap:12px 20px; margin-top:14px;}
.stacts > .row{justify-content:flex-end;}
/* 「保存提交」（2026-10-01）：两个店合并成一个按钮 —— 一次保存、后端合并成一条推送。
   原来是每店一个「保存 XX 数据」按钮，用户要求改成填完一起提交。 */
.stacts2{display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line2);}
.stacts2-h{margin:0; flex:1; min-width:0;}
.stacts2 .btn{flex:none; height:40px; padding:0 26px; font-size:var(--fs-md); font-weight:600;}
@media (max-width:560px){
  .stacts2{flex-wrap:wrap; gap:10px;}
  .stacts2 .btn{width:100%;}
}
/* 店铺数据：两个店并排各一块，窄屏自动堆成一列 */
.ststore{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; margin-top:12px;}
.stbox{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; background:var(--bg2, var(--bg));}
.stbox .stgrid{margin-top:10px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;}
.stbox-t{font-size:var(--fs-md); font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px;}
/* 店铺数据涨跌（好=绿，差=红；跟股票涨跌无关，别套红涨绿跌） */
.du{font-size:var(--fs-xs); margin-left:5px; font-weight:600;}
.du.g{color:var(--ok);}
.du.r{color:var(--bad);}
.strow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line2); font-size:var(--fs-sm);}
.strow:last-child{border-bottom:0;}
.strow .nm{font-weight:600; min-width:56px;}
.strow .kv{color:var(--ink2);}
.strow .kv b{color:var(--ink); font-weight:600;}
/* 横向柱状图（差评原因分布） */
.bars{display:flex; flex-direction:column; gap:9px;}
.bar-x{display:flex; align-items:center; gap:10px;}
.bar-x .bx-l{width:110px; flex:none; font-size:var(--fs-sm); color:var(--ink2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.bar-x .bx-t{flex:1; background:var(--line2); border-radius:999px; height:14px; overflow:hidden; min-width:60px;}
.bar-x .bx-t > i{display:block; height:100%; background:var(--bad); border-radius:999px; min-width:3px;}
.bar-x .bx-v{width:96px; flex:none; text-align:right; font-size:var(--fs-sm); color:var(--ink2);
  font-variant-numeric:tabular-nums;}
/* 趋势图 */
.trend{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;}
.trend svg{width:100%; height:150px; display:block;}
/* 身份条：当前是谁 + 醒目的「换人」 */
.mechip{display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 6px 0 12px;
  border:1px solid var(--brand-bd); background:var(--brand-bg); border-radius:var(--r-sm); font-size:var(--fs-md);}
.mechip b{font-weight:700; color:var(--brand-a);}
.mechip .mrole{font-size:var(--fs-xs); color:var(--brand-a); background:var(--surface); border:1px solid var(--brand-bd);
  border-radius:var(--r-tag); padding:1px 6px;}
.mechip .mesw{font:inherit; font-size:var(--fs-sm); font-weight:600; height:28px; padding:0 14px; margin-left:2px;
  border-radius:var(--r-sm); border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer;}
.mechip .mesw:hover{background:var(--brand-h); border-color:var(--brand-h); color:#fff;}

/* 今日班次速览 */
.digest{display:flex; flex-direction:column; gap:8px;}
.dg-row{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-sm);}
.dg-k{flex:0 0 62px; text-align:center; font-size:var(--fs-sm); font-weight:600;
  border:1px solid; border-radius:var(--r-sm); padding:2px 0;}
.dg-v{flex:1; display:flex; gap:6px; flex-wrap:wrap;}
.dg-n{display:inline-flex; align-items:center; gap:5px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:0 8px; height:24px; font-size:var(--fs-sm);}
.dg-n i{font-style:normal; font-size:var(--fs-micro); color:var(--ink3); background:var(--info-bg); border-radius:var(--r-tag); padding:0 4px;}
.dg-c{flex:0 0 auto; font-size:var(--fs-sm); color:var(--ink3); padding-top:3px;}

/* ============ 弹窗（统一右侧滑出，不居中） ============
   约定：全站弹层一律从右侧贴边滑出，不做屏幕居中。移动端自动占满宽度。 */
.mask{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none;
  align-items:stretch; justify-content:flex-end; z-index:200;}
.mask.show{display:flex;}
.modal{background:var(--surface); border-radius:var(--r) 0 0 var(--r); width:100%; max-width:440px; height:100%;
  display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); overflow:hidden; animation:pop .18s ease-out;}
@keyframes pop{from{transform:translateX(28px); opacity:.4;} to{transform:none; opacity:1;}}
.modal h4{margin:0; padding:15px 20px; font-size:var(--fs-lg); display:flex; align-items:center; gap:9px;
  border-bottom:1px solid var(--line); background:var(--surface); flex:0 0 auto;}
.modal .m-body{padding:14px 20px 6px; font-size:var(--fs-sm); line-height:var(--lh-loose); color:var(--ink2);
  flex:1 1 auto; overflow:auto; max-height:none;}
.modal .m-body b{color:var(--ink);}
.modal .m-foot{padding:12px 20px 16px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  border-top:1px solid var(--line); background:var(--surface); flex:0 0 auto;}
.modal .m-list{margin:9px 0 0; max-height:190px; overflow:auto;}
.modal .m-list span{display:inline-block; background:var(--bad-bg); color:var(--bad-d); border:1px solid var(--bad-bd);
  border-radius:var(--r-tag); padding:1px 8px; margin:0 6px 6px 0; font-size:var(--fs-sm);}

/* ============ 卡密名称管理（2026-10-03） ============ */
.kin{font:inherit; font-size:var(--fs-sm); padding:8px 11px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); color:var(--ink); outline:none; min-width:0;}
.kin:focus{border-color:var(--brand);}
.kadd{display:flex; gap:8px; margin:0 0 12px;}
.kadd .kin{flex:1;}
.klist{border-top:1px solid var(--line);}
.kmrow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line);}
.kmrow .kin{flex:1;}
.kmrow .kuse{flex:0 0 auto; font-size:var(--fs-xs); color:var(--ink4); min-width:44px; text-align:right;}
.kmrow .btn{flex:0 0 auto;}
@media (max-width:520px){ .kmrow{flex-wrap:wrap;} .kmrow .kin{flex:1 1 100%;} }

/* ============ 卡密入库明细表（2026-10-03） ============ */
.kd-tbl{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.kd-tbl th{text-align:left; font-weight:600; color:var(--ink2); background:var(--bg-soft, #f6f7f9);
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.kd-tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink);}
.kd-tbl .kd-cd{font-family:var(--mono, monospace); word-break:break-all; max-width:260px;}
.kd-tbl .kd-det{color:var(--ink2); line-height:var(--lh-loose); max-height:74px; overflow:auto;
  white-space:pre-wrap; word-break:break-all; min-width:180px;}
.kd-tbl tr:hover td{background:var(--bg-soft, #f6f7f9);}
.kd-pager{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 2px;}
.kd-pager .pg-n{margin-left:auto; color:var(--ink2); font-size:var(--fs-sm);}
.modal select{width:100%; margin-top:9px;}
.modal .goood{background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-d); border-radius:var(--r-sm);
  padding:10px 14px; font-size:var(--fs-sm);}
.modal.wide{max-width:600px;}

/* ============ 通用居中弹窗（2026-10-14 统一） ============
   全站"居中"弹窗统一用 .ovl 系列，不再复用 .mask（.mask 是右侧抽屉）。
   结构：.ovl(遮罩) > .ovl-card > .ovl-h / .ovl-b / .ovl-f；关闭按钮用 .x */
.ovl{position:fixed;inset:0;background:rgba(16,18,22,.42);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;}
.ovl-card{background:var(--surface);border-radius:var(--r);max-width:640px;width:100%;max-height:86vh;overflow:auto;box-shadow:var(--sh-lg);}
.ovl-card.wide{max-width:720px;}
.ovl-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:var(--fs-lg);}
.ovl-h .x{margin-left:auto;appearance:none;border:0;background:transparent;font-size:19px;line-height:1;color:var(--ink3);cursor:pointer;padding:2px 6px;}
.ovl-h .x:hover{color:var(--ink);}
.ovl-b{padding:16px 18px;overflow:auto;}
.ovl-f{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid var(--line);}

/* ============ 保存条 / 提示 / 问候 ============ */
.save{position:sticky; bottom:0; margin-top:8px; z-index:10;
  background:linear-gradient(180deg,rgba(245,247,250,0),var(--bg) 40%); padding:14px 0 0;}
.savein{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 16px; box-shadow:var(--sh);}
.status{font-size:var(--fs-sm); color:var(--ink2);}
.status.ok{color:var(--ok);} .status.err{color:var(--bad);} .status.busy{color:var(--warn);}
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(10px);
  background:rgba(0,0,0,.85); color:#fff; font-size:var(--fs-sm); padding:9px 18px; border-radius:var(--r-sm);
  opacity:0; pointer-events:none; transition:.2s; z-index:400; box-shadow:0 6px 20px rgba(0,0,0,.18);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.greet{position:fixed; left:50%; top:76px; transform:translateX(-50%) translateY(-14px);
  z-index:150; min-width:260px; max-width:min(92vw, 460px);
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--r); padding:14px 20px 15px; box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none; transition:.28s cubic-bezier(.2,.9,.3,1.1);}
.greet.show{opacity:1; transform:translateX(-50%) translateY(0);}
.g-tag{display:inline-block; font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-tag);
  padding:0 8px; line-height:20px; margin-bottom:7px;}
.g-text{font-size:var(--fs-lg); line-height:var(--lh); color:var(--ink); font-weight:600;}

/* ============ 话术速查抽屉 ============ */
.sdr-mask{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:300;}
body.sdr-open .sdr-mask{display:block;}
body.sdr-open{overflow:hidden;}
.sdr{position:fixed; top:0; right:0; bottom:0; width:440px; max-width:92vw; background:var(--surface);
  display:none; flex-direction:column; z-index:301; border-left:1px solid var(--line); box-shadow:var(--sh-lg);}
body.sdr-open .sdr{display:flex; animation:sdrIn .18s ease-out;}
@keyframes sdrIn{from{transform:translateX(26px); opacity:.5;} to{transform:none; opacity:1;}}
.sdr-top{display:flex; align-items:center; gap:10px; padding:14px 16px 11px; border-bottom:1px solid var(--line2);}
.sdr-ttl{font-size:var(--fs-lg); font-weight:600;}
.sdr-full{margin-left:auto; font-size:var(--fs-sm); color:var(--brand); text-decoration:none; white-space:nowrap;}
.sdr-full:hover{text-decoration:underline;}
.sdr-x{border:0; background:transparent; font-size:var(--fs-xl); line-height:1; color:var(--ink3); cursor:pointer; padding:0 2px;}
.sdr-search{position:relative; padding:11px 16px 0;}
.sdr-search input{width:100%; font:inherit; font-size:var(--fs-sm); height:34px; padding:0 30px 0 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);}
.sdr-search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px rgba(79,70,229,.14);}
.sdr-search .clr{position:absolute; right:20px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--ink3); font-size:var(--fs-lg); cursor:pointer; padding:0 6px;}
.sdr-tabs{display:flex; gap:2px; background:var(--info-bg); border-radius:var(--r-sm); padding:2px; margin:10px 16px 4px;}
.sdr-tabs button{flex:1; font:inherit; font-size:var(--fs-sm); border:0; background:transparent; color:var(--ink2);
  height:28px; border-radius:var(--r-tag); cursor:pointer;}
.sdr-tabs button.on{background:var(--surface); color:var(--brand); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06);}
.sdr-main{flex:1; min-height:0; overflow:auto; padding:4px 12px 40px; -webkit-overflow-scrolling:touch;}
.sdr-card{border:1px solid var(--line); border-radius:var(--r-sm); margin:6px 0; background:var(--surface); overflow:hidden;}
.sdr-card.on{border-color:var(--brand-bd);}
.sdr-hd{display:flex; align-items:center; gap:8px; width:100%; text-align:left; font:inherit; font-size:var(--fs-sm);
  color:var(--ink); background:transparent; border:0; padding:10px 12px; cursor:pointer; line-height:var(--lh);}
.sdr-hd:hover{background:var(--panel);}
.sdr-hd .no{flex:0 0 auto; min-width:20px; font-size:var(--fs-xs); color:var(--ink3);}
.sdr-hd .tt{flex:1; min-width:0; font-weight:600;}
.sdr-hd .dot,.sdr-hd .ar2{flex:0 0 auto;}
.sdr-hd .dot{width:6px; height:6px; border-radius:50%; background:var(--ink4);}
.sdr-hd .ar2{font-size:var(--fs-xs); color:var(--ink3);}
.sdr-hd .ar{flex:0 0 auto; font-size:var(--fs-xs); color:var(--ink3);}
.sdr-ct{padding:2px 13px 14px; border-top:1px solid var(--line2); background:var(--bg);}
.sdr-ct .doc-head{margin-top:13px; padding-top:2px;}
.sdr-ct .doc-head h1{font-size:var(--fs-lg);}
.sdr-ct .doc-desc{margin:8px 0 14px;}
.sdr-ct .blk{margin:15px 0;}
.sdr-ct .rich{overflow-x:auto;}
.sdr-hit{background:var(--hit); border-radius:var(--r-tag); padding:0 2px;}
.sdr-sec-t{font-size:var(--fs-xs); color:var(--ink3); padding:12px 6px 2px;}
.sdr-empty{color:var(--ink3); font-size:var(--fs-sm); padding:26px 12px; text-align:center; line-height:var(--lh-loose);}

/* 两栏：左主（表）/ 右辅（预警 · 状态） */
.grid2{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:20px; margin-top:20px; align-items:start;}
/* 工作台下半区两栏（2026-09-25）：右栏是「预警 + 日志」两块的竖向栈 */
.wk-board2 .wk-col-r{display:flex; flex-direction:column; gap:20px;}
.wk-board2 .wk-col-r .sec{margin-top:0;}

/* ============ 权限管理页（perm.html，2026-09-25） ============ */
.pg-t2{font-size:var(--fs-xl); font-weight:600; margin:0; letter-spacing:.2px;}
.pm-card{padding:18px 20px;}
.pm-hd{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.pm-av{width:38px; height:38px; border-radius:50%; background:var(--grad-brand); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600;
  box-shadow:0 2px 6px rgba(79,70,229,.28);}
.pm-id{min-width:0;}
.pm-name{font-size:var(--fs-md); font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pm-meta{font-size:var(--fs-xs); color:var(--ink3); margin-top:3px;}
.pm-ops{display:flex; gap:8px; flex-wrap:wrap;}
.pm-sec-t{margin:16px 0 10px; font-size:var(--fs-sm); font-weight:600; color:var(--ink2); display:flex; align-items:center; flex-wrap:wrap;}
.pm-boards{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:10px;}
.pm-bd{display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer; font-size:var(--fs-sm);}
.pm-bd:hover{border-color:var(--brand-bd);}
.pm-bd input{accent-color:var(--brand);}
.pm-bd.locked{background:var(--info-bg); color:var(--ink3); cursor:default; border-style:dashed;}
.pm-bd.locked input{accent-color:var(--ink3);}
.pm-tag{font-size:var(--fs-micro); color:var(--ink3); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tag); padding:1px 6px;}
.pm-foot{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;}
.pm-audit{max-height:300px; overflow:auto; font-size:var(--fs-sm); line-height:var(--lh-loose);}
.pm-audit-i{border-bottom:1px dashed var(--line2); padding:4px 0;}
.pm-audit-t{color:var(--ink3); margin-right:4px;}
.pm-audit-ip{color:var(--ink3); font-size:var(--fs-xs);}
.pill.boss{background:var(--brand-bg); color:var(--brand-a); border-color:var(--brand-bd);}
.pill.leader{background:var(--c-indigo-bg); color:var(--c-indigo-d); border-color:var(--c-indigo-bd);}
.pill.staff{background:var(--info-bg); color:var(--ink2); border-color:var(--line);}
.pill.finance{background:var(--c-amber-bg); color:var(--c-amber-d); border-color:var(--c-amber-bd);}

/* ============ 退差价计算页 ============ */
.calc-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:0 16px;}
.price-group{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pslot{height:32px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  font-size:var(--fs-md); cursor:pointer; display:inline-flex; align-items:center; gap:6px; user-select:none;
  transition:border-color .15s, color .15s, background .15s;}
.pslot:hover{border-color:var(--brand-h); color:var(--brand-h);}
.pslot.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.pslot .pe{font-size:var(--fs-xs); opacity:.6;}
.pslot.on .pe{opacity:.9;}
.pinput{width:110px; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-md);}
.gen{margin-top:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:14px 16px;}
.gen-h{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.gen-t{font-size:var(--fs-sm); font-weight:600; color:var(--ink2);}
.gen-x{white-space:pre-wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; font-size:var(--fs-sm); line-height:var(--lh-loose); color:var(--ink);}
.sc-card{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:12px; background:var(--bg);}
.sc-card:last-child{margin-bottom:0;}
.sc-h{display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap;}
.sc-l{font-size:var(--fs-sm); font-weight:600;}
.sc-x{font-size:var(--fs-sm); line-height:var(--lh-loose); color:var(--ink2);}
.step{width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:var(--fs-xs);
  display:inline-flex; align-items:center; justify-content:center; flex:none; font-weight:600;}
.tips{margin:0; padding-left:20px; font-size:var(--fs-sm); line-height:var(--lh-loose); color:var(--ink2);}
.tips b{color:var(--ink);}
.tbl-scroll{max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:var(--r);}
.tbl-scroll table.dash{margin:0; border:0;}
.tbl-scroll table.dash th{position:sticky; top:0; z-index:2;}

/* ============ 名次条（排名） ============ */
.rank-no{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 5px; border-radius:var(--r-tag); background:var(--info-bg); color:var(--ink2); font-size:var(--fs-sm); font-weight:600;}
/* 前三名：以前是金/银/铜三套色（跟全站色系打架），改成同一支靛蓝的三档深浅 */
.rank-no.t1{background:var(--brand); color:#fff;}
.rank-no.t2{background:var(--rank-2); color:var(--brand-a);}
.rank-no.t3{background:var(--brand-bg); color:var(--brand-a);}
.rank-me{background:var(--brand-bg) !important;}
/* 指标小标签（点一下换排名依据） */
/* 权重设置 */
.wrow{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line);}
.wrow:first-of-type{border-top:0;}
.wrow-t{width:152px; flex:0 0 152px; font-size:var(--fs-sm); color:var(--ink); white-space:nowrap;}
.wrow-t .hint{font-size:var(--fs-xs); white-space:nowrap;}
.wrow input[type=range]{flex:1; min-width:90px; accent-color:var(--brand);}
.wbox{width:66px; height:30px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r-tag);
  background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-sm); text-align:center;}
.wrow-p{width:44px; text-align:right; font-size:var(--fs-sm); color:var(--ink2); font-variant-numeric:tabular-nums;}
@media (max-width:560px){
  .wrow-t{width:96px; flex:0 0 96px; font-size:var(--fs-sm);}
  .wrow-t .hint{display:none;}
  .wbox{width:56px;}
}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.chip{font:inherit; font-size:var(--fs-sm); height:28px; padding:0 11px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink2); transition:all .15s;}
.chip:hover{border-color:var(--brand-h); color:var(--brand-h);}
.chip.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
/* 趋势小图 */
.trends{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;}
.trend .t-l{font-size:var(--fs-sm); color:var(--ink3); display:flex; align-items:baseline; gap:6px;}
.trend .t-v{font-size:var(--fs-lg); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
/* 填报状态盒 */
.fbox{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--surface);}
.fbox-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fbox-h .c-t{font-size:var(--fs-md); font-weight:600;}
.fbox-h .c-s{font-size:var(--fs-xs); color:var(--ink3);}
.fbox-v{font-size:var(--fs-xl); font-weight:600; margin-top:6px; font-variant-numeric:tabular-nums;}
.m-u{font-size:var(--fs-sm); font-weight:400; color:var(--ink3); margin-left:2px;}

.hidden{display:none !important;}
/* ⚠️ 光有 .hidden 不够：给元素设 el.hidden = true 用的是 hidden 属性，
   而作者样式里的 display:inline-flex（如 .mechip）会盖掉 UA 的 [hidden]{display:none} → 元素还在。 */
[hidden]{display:none !important;}
.spacer{margin-left:auto;}
.board-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ============ 响应式 ============ */
@media (max-width:1100px){
  .content{padding:20px 16px;}
  .topbar{padding:0 16px;}
  .grid2{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:900px){
  .app{display:block;}
  .side{position:static; width:auto; height:auto; border-right:0; border-bottom:1px solid var(--line);
    flex-direction:row; align-items:center; padding:6px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .side::-webkit-scrollbar{height:0;}
  .sd-brand{height:auto; border:0; padding:0 8px 0 4px;}
  .sd-sub{display:none;}
  .sd-latin{display:none;}
  .sd-menu{display:flex; gap:4px; padding:0; overflow:visible;}
  .sd-sec{display:none;}
  .sd-i{height:32px; white-space:nowrap; margin:0; padding:0 9px; font-size:var(--fs-sm); gap:5px;}
  .sd-i svg{display:none;}
  .sd-i .dot{margin-left:4px;}
  .sd-foot{border:0; padding:0 6px 0 10px;}
  .sd-who,.sd-role{display:none;}
  .sd-prev{display:none;}   /* 预览视角是桌面端管理工具，移动端横排导航里不显示 */
  .app-main{margin-left:0;}
  .metrics{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));}
  .metric .m-v{font-size:var(--fs-xl);}
  .pg-hd .pg-t{font-size:var(--fs-xl);}
  .btn{height:44px; padding:0 18px;}
  .btn.sm{height:36px; padding:0 12px;}
  .btn.lg{height:46px; padding:0 24px;}
  select,input[type=date],input[type=text],input[type=month],input[type=number],input[type=password]{height:44px;}
}
@media (max-width:560px){
  .content{padding:16px 12px 28px;}
  .card{padding:16px 14px;}
  .topbar{padding:0 12px;}
  .tb-d,.tb-date{display:none;}
  .pg-hd .pg-a{width:100%; margin-left:0;}
  .bar-x .bx-l{width:82px; font-size:var(--fs-sm);}
  .bar-x .bx-v{width:76px;}
  .shift{gap:10px; padding:14px;}
  .shift .sh-l{min-width:0; flex:1 1 100%;}
  .shift .sh-r{width:100%; justify-content:flex-end;}
  .metrics{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .metric{padding:12px 13px;}
  .metric .m-v{font-size:var(--fs-xl);}
  .grid2{gap:12px; margin-top:12px;}
  table.dash th, table.dash td{padding:0 9px;}
}
/* ⚠️ 2026-09-17 撤销「手机端按 nth-child 藏列」的老写法：
   它按序号盲切，团队数据/排名矩阵这种宽表会被切掉任意一列（比如某个考核点），
   用户看到的是「数据缺了一块」而不是「要横向滑」。现在统一改走横向滚动 + 首列吸顶，
   列一个不少，见文末「标准组件层 · 宽表」。 */
/* ==================== 红线与罚则（/red） ====================
   2026-09-17 去噪：原来「每一条都铺粉底 + 正文满屏红字」，56 条下来整页都在喊，
   反而让真正的红线不值钱。现在颜色只留在「左侧 3px 等级色条 + 等级小标签 + 分组标题」上，
   正文里的强调改成深色加粗 —— 页面安静下来，红线才显眼。
   ⚠️ 等级色仍由 rulesdata.js 的 RED_LV 经 CSS 变量 --lv/--lvb/--lvbd 传进来。 */
.redwarn{display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bad);
  color:var(--ink2); font-size:var(--fs-sm); line-height:var(--lh);}
.redwarn .rw-ico{flex:none; width:18px; height:18px; border-radius:50%; background:var(--bad); color:#fff;
  font-weight:500; font-size:var(--fs-xs); line-height:18px; text-align:center; margin-top:1px;}
.redwarn b{font-weight:600; color:var(--ink);}
.redwarn em{font-style:normal; font-weight:600; color:var(--brand-a);}

.red-filter{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 14px;}
.rchip{font:inherit; font-size:var(--fs-sm); height:30px; padding:0 13px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink2); transition:all .15s;}
.rchip:hover{border-color:var(--brand-bd); color:var(--brand);}
.rchip.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500;}

.redcard{margin-bottom:16px;}
.reddesc{font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh-loose); margin:-4px 0 14px;
  padding:10px 13px; background:var(--panel); border-radius:var(--r-sm); border-left:3px solid var(--bad-bd);}
.rlist{display:flex; flex-direction:column; gap:9px;}
.ritem{padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--lv);
  border-radius:var(--r-sm); background:var(--surface);}
.ritem-hd{display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;}
.ritem-hd .rt{font-weight:600; font-size:var(--fs-sm); line-height:var(--lh); color:var(--ink); flex:1; min-width:0;}
.ritem-hd .rlv{flex:none; font-size:var(--fs-xs); font-weight:500; padding:1px 7px; border-radius:var(--r-tag);
  border:1px solid transparent; white-space:nowrap; margin-top:2px;}
.ritem .rd{font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh); margin-top:4px;}
.ritem .rd b{color:var(--ink); font-weight:600;}
.ritem .rd em{font-style:normal; color:var(--brand-a); font-weight:600;}

@media (max-width:640px){
  .redwarn{font-size:var(--fs-sm); padding:12px 13px;}
  .ritem{padding:10px 11px;}
  .rchip{font-size:var(--fs-xs); height:28px; padding:0 11px;}
}

@media print{.side,.topbar,.save,.tb-r{display:none;} body{background:var(--surface);} .app-main{margin-left:0;}}

/* ==================== 设计系统 v2 补充（2026-09-17） ==================== */
.sd-i{transition:background .15s, color .15s;}
.sd-sec{padding:16px 12px 6px; letter-spacing:.6px;}

/* ---------- 左侧功能菜单：拖拽排序（2026-09-19，只有主管能拖，见 nav.js） ----------
   拖的时候给一点「拿起来了」的手感：被拖的那一项浮起来、微倾斜，落点靠上下的
   位置关系实时换位（真正的换位是 DOM 移动，这里只负责样子）。 */
.sd-menu.drg{user-select:none; -webkit-user-select:none; cursor:grabbing;}
.sd-menu.dg .sd-i,.sd-menu.dg .sd-sec{cursor:grab;}
.sd-menu .sd-i.dragging,.sd-menu .sd-sec.dragging{
  background:var(--c-indigo-bg); border-radius:var(--r-sm); cursor:grabbing;
  box-shadow:0 8px 20px rgba(15,23,42,.16); position:relative; z-index:2;
}
.sd-menu .sd-i.dragging{transform:scale(1.02);}
.sd-menu .sd-sec.dragging{color:var(--c-indigo-d);}
.sd-hint{margin:10px 10px 4px; padding:8px 10px; border:1px dashed var(--line); border-radius:var(--r-sm);
  font-size:var(--fs-xs); line-height:var(--lh); color:var(--ink3);}
@media (max-width:900px){ .sd-hint{display:none;} }   /* 手机端不接拖拽，提示就别露了 */

/* ---------- 主管看板「代操作」面板（2026-09-19） ----------
   主管替下属打卡 / 勾清单 / 休息交接 / 补填数据的一站式弹窗（见 dash.html 的 px* 系列）。
   分四段：打卡 / 休息 / 清单 / 今日数据，每段一条浅分隔线，视觉上别糊成一坨。 */
.px-sec{border-top:1px solid var(--line2); margin-top:14px; padding-top:13px;}
.px-sec:first-child{border-top:0; margin-top:0; padding-top:0;}
.px-t{display:flex; align-items:center; font-size:var(--fs-sm); font-weight:600; color:var(--ink); margin-bottom:8px;}
.px-list{max-height:224px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 11px; background:var(--bg);}
.px-ck{display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-size:var(--fs-sm); color:var(--ink2);
  cursor:pointer; line-height:var(--lh);}
.px-ck input{margin:2px 0 0; flex:none;}
.px-ck:hover{color:var(--ink);}
.px-store{border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; margin-bottom:12px;}
.px-sh{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:var(--fs-md); color:var(--ink);}
.px-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px;}
.px-grid label{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-xs); color:var(--ink3);}
.px-grid label i{font-style:normal; color:var(--ink4); margin-left:2px;}
.px-grid input{height:34px; margin:0;}
.px-note{display:flex; flex-direction:column; gap:4px; margin:11px 0; font-size:var(--fs-xs); color:var(--ink3);}
.px-note input{height:34px; margin:0;}
.px-rsn{display:flex; flex-wrap:wrap; gap:0 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 12px;}
.px-rsn .px-ck{padding:3px 0;}
@media (max-width:900px){ .px-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.btn:active{transform:translateY(.5px);}
.num,.tb-date,.metric .m-v,.mon-cur{font-variant-numeric:tabular-nums;}
.pg-hd .pg-s{font-size:var(--fs-sm);}
@media (max-width:900px){
  .content{padding:20px 16px;} .card{margin-bottom:16px;}
  /* 移动端侧栏变横条，选中态去掉左竖线，只留浅蓝底 + 加粗 */
  .sd-i.on{box-shadow:none;}
  /* 下班填报表两栏在窄屏堆成一列 */
  .stcols{grid-template-columns:1fr; gap:14px;}
}
@media (max-width:560px){ .card{padding:16px; margin-bottom:14px;} .content{padding:16px 12px 28px;} }

/* ==================== 组长/组员列表：固定列宽网格行（2026-09-17） ====================
   为什么不用 table.dash：auto 列宽会随文字长度抖动（8 个人名长短不一 → 每行错位），
   这是「看起来不够高级」最直接的来源。改用同一套 grid 模板 + 表头同模板 → 严格对齐。
   列：组长 / 班次 / 状态 / 完成度 / 项数 / 最后更新；明细单独占一整行（有呼吸感）。 */
.lgrid{margin-top:2px;}
.lgrid-hd,.lrow{display:grid; grid-template-columns:132px 96px 112px minmax(110px,1fr) 78px 92px;
  gap:14px; align-items:center;}
.lgrid-hd{height:42px; padding:0 14px; background:var(--panel); border-bottom:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) 0 0; font-size:var(--fs-xs); color:var(--ink3); font-weight:500;}
.lgrid-hd .n{text-align:right;}
.lrow{padding:15px 14px; border-bottom:1px solid var(--line); row-gap:9px; transition:background .12s;}
.lrow:hover{background:var(--bg);}
.lrow:last-child{border-bottom:0;}
.lrow .c{min-width:0;}
.lr-nm{font-weight:600; font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lgrid .n,.lr-pct{text-align:right; font-variant-numeric:tabular-nums; font-size:var(--fs-sm); color:var(--ink2);}
.lr-pg{display:flex; align-items:center; gap:10px;}
.lr-pg .mini{flex:1; min-width:56px;}
.lr-pct{flex:none; min-width:36px;}
.lr-x{grid-column:1 / -1; display:flex; align-items:flex-start; gap:8px 14px; flex-wrap:wrap; min-width:0;}
.lr-det{flex:1; min-width:0;}
.lr-ops{margin-left:auto; flex:none; display:flex; gap:12px; align-items:center;}
/* 进度条统一走主色：完成度是「进度」不是「状态」，红黄绿三色会让一屏彩色超预算 */
.mini > i{background:var(--brand);}
/* 班次标签：中性灰。早/中/晚只是「哪个班」，休/假也不是错误 —— 都不该占语义色 */
.sh-tag{display:inline-block; font-size:var(--fs-xs); line-height:20px; padding:0 9px; border-radius:var(--r-tag);
  background:var(--line2); color:var(--ink2); white-space:nowrap;}
.sh-tag.off{color:var(--ink3);}
/* 未完成明细折叠：>5 项时只露一行，避免 8 个标签糊满一屏 */
.missf{font-size:var(--fs-sm); min-width:0;}
.missf > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; background:var(--line2); border-radius:var(--r-tag); color:var(--ink2);}
.missf > summary::-webkit-details-marker{display:none;}
.missf > summary b{color:var(--ink); font-weight:600;}
.missf > summary::after{content:'展开'; color:var(--brand); font-weight:600;}
.missf[open] > summary::after{content:'收起';}
.missf .miss{margin-top:8px;}

/* 移动端：列表由网格变卡片（每行一张卡，字段带左侧标签），操作吸底 */
.mbar{display:none;}
@media (max-width:760px){
  .lgrid-hd{display:none;}
  .lgrid{display:block;}
  .lrow{display:block; padding:14px 2px 16px;}
  .lgrid .c{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 0;}
  .lgrid .c::before{content:attr(data-l); flex:none; font-size:var(--fs-sm); color:var(--ink3);}
  .lgrid .c.lr-nm::before{display:none;}
  .lr-nm{font-size:var(--fs-lg); white-space:normal;}
  .lr-pg .mini{flex:1; min-width:80px;}
  .lr-x{display:block; padding-top:2px;}
  .lr-ops{margin:10px 0 0; gap:20px;}
  .app.has-mbar .app-main{padding-bottom:78px;}
  .mbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:35; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--bar-bg); border-top:1px solid var(--line);
    box-shadow:0 -1px 3px rgba(15,23,42,.06);}
  .mbar .btn{flex:1; min-width:0;}
}
@media (max-width:400px){ .mbar .btn{padding:0 12px; font-size:var(--fs-sm);} }

/* ============ 图表（charts.js，2026-09-17 新增） ============
   以前所有数字都靠「细长进度条 + 一列数字」表达，看不出趋势和差距。
   这批是最小的图表组件：趋势折线 / 迷你柱状 / 横向排名条 / 环形达成率。
   颜色全部走 CSS 变量，页面里不写死色值；数据不足时给一句小字，不画假线。 */
.kch{display:block;}
.chart-empty{font-size:var(--fs-sm); color:var(--ink3); padding:14px 0;}
.kch-spark{height:auto;}
.kch-col{overflow:visible;}

.kch-bars{display:flex; flex-direction:column; gap:7px;}
.kb{display:flex; align-items:center; gap:10px; font-size:var(--fs-sm);}
.kb-n{width:96px; flex:none; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kb-t{flex:1; height:9px; background:var(--line2); border-radius:999px; overflow:hidden; min-width:40px;}
.kb-t > i{display:block; height:100%; background:var(--ink4); border-radius:999px;}
.kb.me .kb-n{color:var(--ink); font-weight:600;}
.kb.me .kb-t > i{background:var(--brand);}
.kb-v{width:84px; flex:none; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums;}
.kb-v em{font-style:normal; color:var(--ink3); font-size:var(--fs-xs); margin-left:3px;}

.kch-ring{position:relative; display:inline-block; flex:none;}
.kch-ring svg{display:block;}
.kr-v{position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center;
  justify-content:center; font-size:var(--fs-lg); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;}
.kr-v em{font-style:normal; font-size:var(--fs-micro); color:var(--ink3); margin-left:1px;}

/* 图表卡：左边一个环形 / 右边一条趋势，是「一眼高级」里最省地方的一格 */
.chart-row{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;}
.chart-row .cr-l{display:flex; flex-direction:column; align-items:center; gap:8px;}
.chart-row .cr-l .cr-t{font-size:var(--fs-sm); color:var(--ink3);}
@media (max-width:640px){ .chart-row{grid-template-columns:1fr;} }
/* 指标块「左文字 + 右环形」：环形只占一格宽度，数字与说明仍然贴着读 */
.fr{display:flex; align-items:center; gap:20px;}
.fr > .fr-l{flex:1; min-width:0;}
.fr > .cr-l{display:flex; flex-direction:column; align-items:center; gap:6px; flex:none;}
.fr > .cr-l .cr-t{font-size:var(--fs-xs); color:var(--ink3);}
@media (max-width:560px){ .fr{gap:12px;} }

/* ==================== 标准组件层（2026-09-17 · 阶段2收官） ====================
   前面几十处「去噪 / 统一」是零散改的，这一节把它们收成一套可复用的底：
   焦点环 / 滚动条 / 宽表 / 空状态 / 加载骨架 / 动效收敛。
   规则只加不改 —— 页面里已有的 class 全部照旧可用，不需要动任何一页 JS。 */

/* —— 键盘焦点环 ——
   鼠标点不显示（:focus-visible 只在键盘 Tab 时命中），键盘走查时每个可点元素都有清晰落点。
   这是「专业」最容易被忽略、又最容易被看出差别的一处。 */
.btn:focus-visible,.tab:focus-visible,.seg button:focus-visible,.nav a:focus-visible,
.sbtn:focus-visible,.sd-i:focus-visible,a:focus-visible,summary:focus-visible,
.rchip:focus-visible,input:focus-visible,select:focus-visible,.tarea:focus-visible,
/* ★ 2026-10-10 补上「裸 <button>」：顶栏图标按钮 .tb-ico、天气按钮 .idb-wx、
   行内复制图标 .lnk 之前都不在这条名单里 ⇒ Tab 到它们只能看到浏览器默认的
   1px 细环（实测 outline: 1px auto），而 .lnk 恰恰是退款页每行都要点的复制按钮。
   键盘走查时"每个可点元素都有清晰落点"才算真的做到了。 */
.tb-ico:focus-visible,.idb-wx:focus-visible,.lnk:focus-visible,.tb-theme:focus-visible,
.yh-btn:focus-visible,.rf-foldbtn:focus-visible,.skip-link:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px; border-radius:var(--r-sm);}
.btn:focus-visible,.seg button:focus-visible{outline-offset:2px;}
/* 输入类已经自带 brand 描边，再叠轮廓会显重 —— 只留 outline，不要双环 */
input:focus-visible,select:focus-visible,.tarea:focus-visible{outline:none;}

/* —— 细滚动条 ——
   系统默认滚动条又粗又亮，一出现整块「廉价感」就上来了。
   宽表、侧边菜单、抽屉统一改成 8px 淡灰、悬停加深。 */
.board-scroll,.tbl-scroll,.sd-menu,.tabpane,.drawer-b{scrollbar-width:thin;
  scrollbar-color:var(--ink4) transparent;}
.board-scroll::-webkit-scrollbar,.tbl-scroll::-webkit-scrollbar,.sd-menu::-webkit-scrollbar,
.tabpane::-webkit-scrollbar,.drawer-b::-webkit-scrollbar{width:8px; height:8px;}
.board-scroll::-webkit-scrollbar-track,.tbl-scroll::-webkit-scrollbar-track,
.sd-menu::-webkit-scrollbar-track{background:transparent;}
.board-scroll::-webkit-scrollbar-thumb,.tbl-scroll::-webkit-scrollbar-thumb,
.sd-menu::-webkit-scrollbar-thumb,.tabpane::-webkit-scrollbar-thumb{
  background:var(--ink4); border-radius:999px; border:2px solid transparent; background-clip:content-box;}
.board-scroll::-webkit-scrollbar-thumb:hover,.tbl-scroll::-webkit-scrollbar-thumb:hover,
.sd-menu::-webkit-scrollbar-thumb:hover{background:var(--ink3); background-clip:content-box;}

/* —— 宽表：横向滚动 + 首列吸顶（手机端保住每一列） ——
   数据类宽表（团队数据、排名矩阵、排班整月）在窄屏不再藏列，改为「滑着看」：
   第一列（姓名）钉在左边，滑到哪一列都知道在看谁。 */
.board-scroll,.tbl-scroll{position:relative;}
.board-scroll table.dash,.tbl-scroll table.dash{min-width:100%;}
.board-scroll table.dash th:first-child,.board-scroll table.dash td:first-child,
.tbl-scroll table.dash th:first-child,.tbl-scroll table.dash td:first-child{
  position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line);}
.board-scroll table.dash th:first-child,.tbl-scroll table.dash th:first-child{
  z-index:3; background:var(--panel);}
/* 悬停/选中行里，吸顶那格要跟着变色，否则整列会「浮」在行高亮之外 */
.board-scroll table.dash tbody tr:hover td:first-child,
.tbl-scroll table.dash tbody tr:hover td:first-child{background:var(--bg);}
.board-scroll table.dash tr.rank-me td:first-child,
.tbl-scroll table.dash tr.rank-me td:first-child{background:var(--brand-bg);}
/* 长表滚动时表头钉住，翻到第 40 个人也知道每列是什么 */
.board-scroll{max-height:none;}
.tbl-scroll table.dash th{position:sticky; top:0;}
/* 能横向滑动时，右缘给一条渐隐提示（纯装饰，不占位、不挡点击） */
.scrollx,.board-scroll{-webkit-overflow-scrolling:touch;}

/* —— 空状态 ——
   原来只有一行灰字，占着 40px 上下留白，看着像「页面没加载出来」。
   现在给出「图形 + 一句说明 + 一个下一步」，空页面也像被设计过。
   旧写法 <div class="empty">文字</div> 继续有效，不强制改。 */
.empty{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; color:var(--ink3); padding:44px 20px; font-size:var(--fs-sm); line-height:var(--lh-loose);}
.empty::before{content:''; width:34px; height:34px; flex:none; border-radius:var(--r);
  border:1.5px dashed var(--ink4); background:var(--bg);}
.empty .big{font-size:var(--fs-lg); color:var(--ink2); font-weight:500; margin:0;}
.empty .ea{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:6px;}
/* 表格里的空状态：一行铺满，别再给 34px 图标添乱 */
.empty.in-tbl,.empty.plain{padding:26px 12px;}
.empty.plain::before{display:none;}
td > .empty{padding:30px 12px;}

/* —— 加载骨架 ——
   比转圈更「高级」、也更不闪：内容就位前先占住位置，读到时直接换字，不跳版。 */
.sk{background:linear-gradient(90deg,var(--line2) 25%,var(--surface-3) 37%,var(--line2) 63%);
  background-size:400% 100%; animation:sk 1.3s ease-in-out infinite; border-radius:var(--r-tag); height:12px;}
.sk.lg{height:16px;} .sk.w60{width:60%;} .sk.w40{width:40%;} .sk.row{height:44px; border-radius:var(--r-sm);}
@keyframes sk{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}

/* —— 动效收敛 ——
   全站动效只保留三档时长：.12s（hover 反馈）/ .15s（控件态）/ .25s（宽度、位移）。
   系统开了「减弱动态效果」的用户，一律关掉过渡与骨架闪烁 —— 这是无障碍的硬要求。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* —— 宽表在手机上：字号与行高各收一档，滑起来才不累 —— */
@media (max-width:560px){
  .board-scroll table.dash,.tbl-scroll table.dash{font-size:var(--fs-sm);}
  .board-scroll table.dash th,.tbl-scroll table.dash th{height:40px;}
  .board-scroll table.dash td,.tbl-scroll table.dash td{height:46px;}
  .board-scroll table.dash th:first-child,.board-scroll table.dash td:first-child,
  .tbl-scroll table.dash th:first-child,.tbl-scroll table.dash td:first-child{padding-right:12px;}
}

/* ==================== 打卡页「还没选名字」的三步引导（2026-09-17） ====================
   之前这个状态只有一句「选好名字…」加一大片白 —— 首屏空着最像「页面没做完」。
   这里把当天的三步摊开铺满，纯展示：不碰任何打卡 / 清单逻辑，选完名字这块就被真实内容替换掉。 */
.startg{margin-top:18px; padding:20px 22px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);}
.startg .sg-t{font-size:var(--fs-lg); font-weight:600; display:flex; align-items:center; gap:9px; margin-bottom:16px;}
.startg .sg-t::before{content:''; width:3px; height:14px; border-radius:var(--r-tag); background:var(--brand); flex:none;}
.sg-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(212px, 1fr)); gap:14px;}
.sg-i{display:flex; gap:11px; align-items:flex-start; padding:15px 16px;
  background:var(--bg); border-radius:var(--r-sm);}
.sg-n{flex:none; width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff;
  font-size:var(--fs-xs); font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:1px;
  font-variant-numeric:tabular-nums;}
.sg-i > div{min-width:0;}
.sg-i b{display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:3px; color:var(--ink);}
.sg-d{display:block; font-size:var(--fs-sm); color:var(--ink2); line-height:var(--lh);}

/* ==================== AI 助手页（2026-09-17） ====================
   延续全站语言：白底、1px 描边、靛蓝只用在「AI 这一侧」的语义条上。
   用户消息不用彩色气泡（一屏两个颜色会花），靠左右位置 + 底色区分。 */
.ai-card{display:flex; flex-direction:column; height:min(70vh, 660px);}
.ai-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line2); background:var(--surface);
  border-radius:var(--r) var(--r) 0 0;}
.ai-mdl{display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--ink3);}
.ai-mdl select{font:inherit; font-size:var(--fs-sm); height:30px; padding:0 28px 0 10px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.6L6 7.6l3-3' fill='none' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;}
.ai-mdl select:focus{outline:none; border-color:var(--brand);}
.ai-st{font-size:var(--fs-xs); color:var(--ink4);}
.ai-st.ok{color:var(--ok);}
.ai-st.warn{color:var(--warn);}
.ai-bar-a{margin-left:auto; display:flex; gap:8px;}

.ai-msgs{flex:1; min-height:0; overflow-y:auto; padding:20px 18px; background:var(--bg);
  display:flex; flex-direction:column; gap:16px;}
.ai-msgs .empty{background:transparent;}

.ai-m{max-width:min(760px, 86%); display:flex; flex-direction:column; gap:5px;}
.ai-who{font-size:var(--fs-xs); color:var(--ink4); letter-spacing:.3px;}
.ai-b{font-size:var(--fs-md); line-height:var(--lh-loose); color:var(--ink); white-space:pre-wrap; word-break:break-word;
  padding:12px 15px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);}
/* AI 这一侧：左侧 3px 靛蓝条，和全站「语义色条」一套语言 */
.ai-m.assistant .ai-b{border-left:3px solid var(--brand);}
.ai-m.assistant.typing .ai-b::after{content:''; display:inline-block; width:7px; height:15px;
  margin-left:2px; background:var(--brand); border-radius:var(--r-tag); vertical-align:-2px;
  animation:aicur .9s steps(2, start) infinite;}
@keyframes aicur{0%,50%{opacity:1} 50.01%,100%{opacity:0}}
/* 用户这一侧：右对齐 + 浅底，不给边框 */
.ai-m.user{margin-left:auto; align-items:flex-end;}
.ai-m.user .ai-b{background:var(--panel); border-color:transparent;}
.ai-m.err{align-self:flex-start; font-size:var(--fs-sm); color:var(--bad); line-height:var(--lh-loose);
  padding:2px 2px 2px 6px; border-left:3px solid var(--bad);}

.ai-in{border-top:1px solid var(--line2); padding:12px 16px 14px; background:var(--surface);
  border-radius:0 0 var(--r) var(--r);}
.ai-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px;}
.ai-chip{font:inherit; font-size:var(--fs-sm); height:28px; padding:0 11px; cursor:pointer;
  color:var(--ink2); background:var(--surface); border:1px solid var(--line); border-radius:99px;
  transition:border-color .12s, color .12s;}
.ai-chip:hover{border-color:var(--brand); color:var(--brand);}
.ai-in textarea{width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-md); line-height:var(--lh-loose);
  padding:11px 13px; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-sm); resize:none; outline:none; transition:border-color .15s, background .15s;}
.ai-in textarea:focus{border-color:var(--brand); background:var(--surface);}
.ai-send{display:flex; align-items:center; gap:12px; margin-top:9px;}
.ai-warn{font-size:var(--fs-xs); color:var(--ink4);}
.ai-send .btn{margin-left:auto;}

@media (max-width:560px){
  .ai-card{height:min(76vh, 640px);}
  .ai-m{max-width:100%;}
  .ai-msgs{padding:16px 13px;}
  .ai-warn{display:none;}
}
@media (max-width:560px){
  .startg{padding:16px 14px;}
  .sg-row{grid-template-columns:1fr; gap:10px;}
  .sg-i{padding:13px 14px;}
}

/* ==================================================================
   设计系统 v3 · 有序多彩（2026-09-17）
   ------------------------------------------------------------------
   v2 把颜色全收干净了（不花，但偏冷、偏素）；v3 把「识别色」请回来，
   但只让它干一件事：让**分类**一眼可辨 —— 导航分组 / 指标类型 / 班次 / 类别。
   红 · 黄 · 绿仍然只表达状态（迟到、未填、违规、异常），
   识别色一律不碰红黄绿 → 「颜色变多了」和「一眼看出异常」不会互相打架。
   ================================================================== */

/* —— 识别色工具类 ——
   用法：容器上加 .c-xxx，内部即可用 var(--mc) / var(--mc-d) / var(--mc-bg) / var(--mc-bd)。
   好处是同一个组件（指标卡 / 图标块 / 图表 / 标签）能按类型换色，不用为每个色重写一套 CSS。 */
.c-indigo{--mc:var(--brand); --mc-d:var(--brand-a); --mc-bg:var(--brand-bg); --mc-bd:var(--brand-bd);}
.c-violet{--mc:var(--c-violet); --mc-d:var(--c-violet-d); --mc-bg:var(--c-violet-bg); --mc-bd:var(--c-violet-bd);}
.c-cyan{--mc:var(--c-cyan);   --mc-d:var(--c-cyan-d); --mc-bg:var(--c-cyan-bg); --mc-bd:var(--c-cyan-bd);}
.c-teal{--mc:var(--c-teal);   --mc-d:var(--c-teal-d); --mc-bg:var(--c-teal-bg); --mc-bd:var(--c-teal-bd);}
.c-amber{--mc:var(--c-amber);  --mc-d:var(--c-amber-d); --mc-bg:var(--warn-bg); --mc-bd:var(--warn-bd);}
.c-rose{--mc:var(--c-rose);   --mc-d:var(--c-rose-d); --mc-bg:var(--c-rose-bg); --mc-bd:var(--c-rose-bd);}
.c-sky{--mc:var(--c-sky);    --mc-d:var(--c-sky-d); --mc-bg:var(--c-sky-bg); --mc-bd:var(--c-sky-bd);}
.c-green{--mc:var(--ok);  --mc-d:var(--ok-d); --mc-bg:var(--ok-bg); --mc-bd:var(--ok-bd);}

/* —— 组长看板（主管看板内嵌）的组长切换器 ——
   按钮上「名字 + 班次小字」：分组口径就是按这个班次算的，
   不写出来主管会看不懂为什么这个组是这几个人。 */
.seg .nav .lv-sh{margin-left:6px; font-size:var(--fs-xs); font-weight:500; opacity:.68;}
.seg .nav.on .lv-sh{opacity:.92;}

/* —— 通用彩色图标块 ——
   全站「一处彩色」的最小单位：32px 圆角方块 + 该色浅底 + 该色图标。 */
.m-ic,.b-ic{width:32px; height:32px; border-radius:var(--r); flex:none; display:flex;
  align-items:center; justify-content:center;
  background:var(--mc-bg,var(--brand-bg)); color:var(--mc,var(--brand));}
.m-ic svg,.b-ic svg{width:17px; height:17px;}
.b-ic.sm{width:26px; height:26px; border-radius:var(--r-sm);}
.b-ic.sm svg{width:14px; height:14px;}

/* —— 指标卡 v3 ——
   一眼看过去「五个指标各有各的颜色」，但数字仍然是深色：
   彩色只出现在顶部 3px 渐变条 + 左上角图标块上，读数一点不受影响。 */
.metric{position:relative; padding-top:23px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--panel) 100%);}
.metric::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:1;
  background:linear-gradient(90deg,var(--mc,var(--brand)) 0%,var(--mc,var(--brand)) 46%,transparent 100%);
  opacity:.9;}
.metric .m-l{color:var(--ink2); font-weight:500;}
.metric:hover{box-shadow:var(--sh-md);}
.metric{transition:box-shadow .15s;}

/* —— 主按钮：品牌渐变 + 柔和投影（全站唯一的「实心强调」） —— */
.btn.p,.btn.primary{background-color:transparent; background-image:var(--grad-brand);
  border-color:transparent; color:#fff;
  box-shadow:0 1px 2px rgba(79,70,229,.22), 0 3px 10px rgba(79,70,229,.16);}
.btn.p:hover,.btn.primary:hover{background-image:var(--grad-brand-h); color:#fff;
  box-shadow:0 2px 6px rgba(79,70,229,.28), 0 8px 20px rgba(79,70,229,.2);}
.btn.p:active,.btn.primary:active{transform:translateY(1px);}
.btn.danger{background-image:linear-gradient(135deg,var(--bad-h),var(--bad));}
.btn.danger:hover{background-image:linear-gradient(135deg,#F43F5E,var(--c-rose));}
/* 次级按钮悬停时描边+文字走主色（原来只改 hover 描边，视觉反馈偏弱） */
.btn:hover{border-color:var(--c-indigo-bd); color:var(--brand-h); background:var(--panel);}

/* —— 选中态（chip / sbtn / pslot / pick / 分段控件）统一走品牌渐变 —— */
.chip.on,.sbtn.on,.pslot.on,.pick.on{background-image:var(--grad-brand); border-color:transparent;
  color:#fff; box-shadow:0 2px 6px rgba(79,70,229,.22);}
.seg button.on,.nav a.nav-i.on,.nav a.nav-i:hover{color:var(--brand-a);}

/* —— 标签：在原来的 g / y / r / b / n / t 之外，补一组识别色 ——
   用来区分「这是哪一类」而不是「这好不好」。 */
.pill.i{background:var(--c-indigo-bg); color:var(--c-indigo-d); border-color:var(--c-indigo-bd);}
.pill.v{background:var(--c-violet-bg); color:var(--c-violet-d); border-color:var(--c-violet-bd);}
.pill.c{background:var(--c-cyan-bg);   color:var(--c-cyan-d);   border-color:var(--c-cyan-bd);}
.pill.k{background:var(--c-teal-bg);   color:var(--c-teal-d);   border-color:var(--c-teal-bd);}
.pill.a{background:var(--c-amber-bg);  color:var(--c-amber-d);  border-color:var(--c-amber-bd);}
.pill.s{background:var(--c-sky-bg);    color:var(--c-sky-d);    border-color:var(--c-sky-bd);}
.pill.o{background:var(--c-rose-bg);   color:var(--c-rose-d);   border-color:var(--c-rose-bd);}

/* —— 表格：表头带一层极淡的冷调，数据行悬停走品牌极淡底 ——
   （改这两处要把「吸顶首列」的同色规则一起改，否则滑到中间首列会「浮」出来。） */
table.dash th{background:var(--panel); color:var(--ink2);}
.board-scroll table.dash th:first-child,
.tbl-scroll table.dash th:first-child{background:var(--panel);}
table.dash tbody tr:hover td{background:var(--panel);}
.board-scroll table.dash tbody tr:hover td:first-child,
.tbl-scroll table.dash tbody tr:hover td:first-child{background:var(--panel);}
/* 前三名：靛蓝渐变 → 浅靛蓝依次递减，比金/银/铜更贴这套色系 */
.rank-no.t1{background-image:var(--grad-brand); box-shadow:0 2px 6px rgba(79,70,229,.24);}
.rank-no.t2{background:var(--rank-2);}
.rank-no.t3{background:var(--rank-3);}

/* —— 进度条 / 达成条：全部走品牌渐变 ——
   （进度是「走了多远」，不是「好不好」，所以不给红黄绿。） */
.bar > i,.mini > i,.ncard .nbar > i{background-image:var(--grad-brand);}

/* —— 打卡页主卡 & 清单 —— */
.hero{border-top-width:3px;}
.hero .prog .bar{height:10px; box-shadow:inset 0 1px 2px rgba(15,23,42,.05);}
/* 清单类别的小方块：从 8px 方点放大成 10px 圆角色块，配同一类色的浅描边 */
.cat h3 .dot{width:10px; height:10px; border-radius:var(--r-tag);}
/* 清单条目悬停：描边走品牌浅色（原来是极淡的 brand-bg，几乎看不出） */
.item:hover{border-color:var(--c-indigo-bd); background:var(--panel);}
.item input{box-shadow:0 1px 2px rgba(15,23,42,.06);}

/* —— 空状态图形：虚线框换成品牌浅色圆角块 + 内嵌小点 —— */
.empty::before{border:1.5px dashed var(--c-indigo-bd); background:linear-gradient(180deg,var(--surface),var(--tint-brand));}

/* —— 提示条：左侧色条加粗到 4px，白底不变（一屏彩色仍然只在边上） —— */
.notice,.subtip,.nexttip,.alert,.nfold{border-left-width:4px;}

/* —— 顶部标签栏（主管看板 10 个）——
   v3.1 起是「容器化工具条 + 白胶囊选中 + 彩色图标块」，完整样式见本文件上方的 .tabs/.tab 段，
   这里不再覆盖（旧版那条 .tab.on 的浅靛蓝底会盖掉白胶囊的层级感）。 */

/* —— 弹窗 / 抽屉：顶部一条品牌渐变细线，和顶栏形成呼应 ——
   （必须用 ::before 画，不能用 border-image —— border-image 会把 border-radius 干掉。） */
.modal{position:relative;}
.modal::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--brand),var(--c-violet));}
.modal h4{background:linear-gradient(180deg,var(--panel),var(--surface));}
.sdr-top{border-bottom:1px solid var(--line2);}
.sdr-ttl::before{content:''; display:inline-block; width:3px; height:14px; border-radius:var(--r-tag);
  background:var(--grad-brand); margin-right:8px; vertical-align:-2px;}

/* —— 保存条：白卡 + 品牌描边的按钮，浮起来一层 —— */
.savein{box-shadow:var(--sh-md);}

/* —— 滚动条悬停 / 焦点环仍走主色，不跟着识别色跑（交互反馈要唯一） —— */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink5); border-radius:999px; border:3px solid transparent;
  background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--ink4); background-clip:content-box;}

/* —— 移动端：侧栏横条上每个图标块变小一档，分组色点保留 —— */
@media (max-width:900px){
  .sd-i .ic{width:24px; height:24px; border-radius:var(--r-sm);}
  .sd-i .ic svg{width:14px; height:14px;}
  .sd-i.on{box-shadow:none;}
}

/* —— 图表配色 ——
   差评分布走「玫红 → 红」渐变（横向），排名条自己那行走品牌渐变、别人走冷灰。
   趋势 / 环形的渐变在 charts.js 里生成，这里只兜住剩下两种。 */
.bar-x .bx-t > i{background-image:linear-gradient(90deg,#FB7185,var(--bad));}
.kb-t > i{background:var(--ink5);}
.kb.me .kb-t > i{background-image:var(--grad-brand);}
.trend{background:linear-gradient(180deg,var(--surface) 0%,var(--panel) 100%);}
.trend:hover{box-shadow:var(--sh-md);}
.trend{transition:box-shadow .15s;}

/* —— 填报状态盒：左边一条品牌浅色，和指标卡形成一组 —— */
.fbox{background:linear-gradient(180deg,var(--surface) 0%,var(--panel) 100%);}

/* —— 「我的位置」条：从浅蓝底升级成品牌浅渐变 + 品牌描边 —— */
.mepos{background:linear-gradient(135deg,var(--brand-bg) 0%,var(--c-violet-bg) 100%);
  border-color:var(--c-indigo-bd); color:var(--c-indigo-d);}
.mepos b{color:var(--c-indigo-d);}

/* —— 侧栏身份区 / 组长-组员表格 —— */
.lgrid-hd{background:var(--panel); color:var(--ink2);}
.lrow:hover{background:var(--panel);}
/* 班次标签：跟着 SHIFTS 的识别色走（早青 / 中靛蓝 / 晚紫 / 休·假 灰） */
.sh-tag{background:var(--line2); color:var(--ink2);}

/* —— 公告卡：未读那条用琥珀浅渐变，已读保持平静 —— */
.ncard.u{background:linear-gradient(180deg,var(--tint-amber),var(--surface));}

/* —— 打卡页 hero：顶部状态条保持语义色，卡身给一层极淡品牌冷底 —— */
.hero{background:linear-gradient(180deg,var(--tint-brand) 0%,var(--surface) 58%);}

/* —— 打卡清单的三个阶段：开工 青 / 班中 靛蓝 / 收尾 紫 ——
   左边缘 3px 该阶段色 + 阶段名同色深字；「当前该做的那一段」再多一层极淡底。
   这是打卡页最常看的一块，上色之后「现在该做什么」不用读字也能扫到。 */
.phase[data-p="open"]  .ph-h{box-shadow:inset 3px 0 0 var(--c-cyan);}
.phase[data-p="mid"]   .ph-h{box-shadow:inset 3px 0 0 var(--c-indigo);}
.phase[data-p="close"] .ph-h{box-shadow:inset 3px 0 0 var(--c-violet);}
.phase[data-p="open"]  .ph-h b{color:var(--c-cyan-d);}
.phase[data-p="mid"]   .ph-h b{color:var(--c-indigo-d);}
.phase[data-p="close"] .ph-h b{color:var(--c-violet-d);}
.phase[data-p="open"].cur {border-color:var(--c-cyan-bd);   background:linear-gradient(180deg,var(--tint-cyan),var(--surface) 62%);}
.phase[data-p="mid"].cur  {border-color:var(--c-indigo-bd); background:linear-gradient(180deg,var(--tint-brand),var(--surface) 62%);}
.phase[data-p="close"].cur{border-color:var(--c-violet-bd); background:linear-gradient(180deg,var(--tint-violet),var(--surface) 62%);}
.phase .ph-h{padding-left:14px;}
/* 当前阶段的提示词跟着阶段色走 */
.phase[data-p="open"].cur .ph-hint {color:var(--c-cyan);}
.phase[data-p="mid"].cur .ph-hint  {color:var(--c-indigo);}
.phase[data-p="close"].cur .ph-hint{color:var(--c-violet);}

/* ==================== 数据导入 / 导出面板（2026-09-17） ====================
   主管「先把 9 月缺的数据补齐、后面再让客服严格填」用的过渡工具。
   导入 = 上传 CSV / 从 Excel 粘贴；导出 = 明细 CSV（改完可直接导回）。 */
.imp-note{border-left:4px solid var(--c-indigo-bd); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(135deg,var(--tint-brand) 0%,var(--tint-violet) 100%);
  padding:11px 13px; font-size:var(--fs-sm); line-height:var(--lh); color:var(--ink2);}
.imp-note b{color:var(--ink);}
.imp-sum{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.imp-rows{max-height:330px; overflow:auto; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface);}
.imp-rows table.dash{margin:0;}
.imp-bad{margin-top:10px; border-left:4px solid var(--c-amber-bd); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--tint-amber); padding:10px 12px; font-size:var(--fs-sm); line-height:var(--lh); color:var(--ink2);}
.imp-bad b{color:var(--c-amber-d);}
#impText{display:block; width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-sm); line-height:var(--lh);
  padding:10px 12px; margin-top:8px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); color:var(--ink); resize:vertical;}
#impText:focus{outline:none; border-color:var(--c-indigo-bd); background:var(--surface);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);}
#impFile{font-size:var(--fs-sm); color:var(--ink2); max-width:100%;}
@media (max-width:560px){
  .imp-rows{max-height:240px;}
}

/* —— 排名 / 团队数据：自己那行除了浅底色，左侧再给一条品牌竖线 —— */
tr.rank-me > td:first-child{box-shadow:inset 3px 0 0 var(--brand);}

/* —— 表格：数字列「缩到刚好」，把多余宽度让给第一列 ——
   否则每格左边都是一大片空白，读数要横着找，是最容易看着「空」的地方。 */
table.dash th.num,table.dash td.num{width:1px; white-space:nowrap;}
table.dash th:first-child{width:auto;}

/* ==================== 今日待办聚合条（2026-09-20 · 主管看板） ====================
 * 借鉴原型的「今天最该处理的一件事」：一条横条顶在看板最上面，
 * 左边一个状态图标、中间一句话 + 其余缺口的筹码、右边一个直接去处理的按钮。
 * 颜色只表达紧急度（红 = 有人在岗却没签到 / 没填报；黄 = 待入库、待审批一类；绿 = 今天没事）。
 * 它不是卡片：故意做成「贴着内容区上沿的一条」，扫一眼就走，不抢下面表格的地方。 */
.alertbar{display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:14px 16px; margin-bottom:var(--sp-4);
  background:var(--surface); border:1px solid var(--line); border-left-width:4px; border-radius:var(--r);
  box-shadow:var(--sh);}
.alertbar.lv-r{border-left-color:var(--bad); background:linear-gradient(90deg,var(--bad-bg) 0%,var(--surface) 40%);}
.alertbar.lv-y{border-left-color:var(--warn); background:linear-gradient(90deg,var(--warn-bg) 0%,var(--surface) 40%);}
.alertbar.ok{border-left-color:var(--ok); background:linear-gradient(90deg,var(--ok-bg) 0%,var(--surface) 40%);}
.alertbar .ab-ic{flex:none; width:30px; height:30px; border-radius:var(--r-sm); display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-lg); font-weight:700; color:#fff;}
.alertbar.lv-r .ab-ic{background:var(--bad);}
.alertbar.lv-y .ab-ic{background:var(--warn);}
.alertbar.ok .ab-ic{background:var(--ok);}
.alertbar .ab-tx{flex:1; min-width:0;}
.alertbar .ab-hd{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;}
.alertbar .ab-hd b{font-size:var(--fs-md); color:var(--ink);}
.alertbar .ab-sub{font-size:var(--fs-xs); color:var(--ink3);}
.alertbar .ab-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px;}
.alertbar .ab-c{font-size:var(--fs-2xs); padding:1px 7px; border-radius:var(--r-tag); cursor:default;
  background:var(--panel); color:var(--ink2); border:1px solid var(--line);}
.alertbar .ab-c b{font-variant-numeric:tabular-nums;}
.alertbar .ab-c.r{background:var(--bad-bg); color:var(--bad-d); border-color:var(--bad-bd);}
.alertbar .ab-c.y{background:var(--warn-bg); color:var(--warn-d); border-color:var(--warn-bd);}
.alertbar .ab-a{flex:none; display:flex; gap:var(--sp-2); flex-wrap:wrap;}
@media (max-width:640px){
  .alertbar{flex-wrap:wrap; padding:12px;}
  .alertbar .ab-a{width:100%;}
}

/* ==================== 打卡页「今天走到哪一步」步骤条（2026-09-20） ====================
 * 主卡标题下面一行：签到 → 打勾 → 填数据 → 签退。
 * 已过的打勾（绿实心）、当前那步高亮（品牌渐变 + 光晕）、还没到的灰着。
 * 这是「进度」不是「状态」：只有当前步用品牌色，别拿红黄绿去染它。 */
.h-steps{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin:0 0 14px;}
.h-steps.hidden{display:none;}
.hst{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px;
  border-radius:999px; background:var(--panel); border:1px solid var(--line);}
.hst .hst-i{flex:none; width:19px; height:19px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:var(--fs-2xs); font-weight:700; font-style:normal;
  background:var(--surface); color:var(--ink4); border:1px solid var(--line);}
.hst .hst-t{font-size:var(--fs-xs); font-style:normal; color:var(--ink4);}
.hst.on{background:var(--ok-bg); border-color:var(--ok-bd);}
.hst.on .hst-i{background:var(--ok); border-color:var(--ok); color:#fff;}
.hst.on .hst-t{color:var(--ok-d); font-weight:500;}
.hst.cur{background:var(--brand-bg); border-color:var(--brand-bd); box-shadow:0 0 0 3px rgba(79,70,229,.10);}
.hst.cur .hst-i{background:var(--grad-brand); border-color:transparent; color:#fff;}
.hst.cur .hst-t{color:var(--brand-a); font-weight:600;}
.hst-ar{width:14px; height:1px; background:var(--line); flex:none;}
@media (max-width:560px){
  .h-steps{gap:5px;}
  .hst{padding:2px 8px 2px 3px;}
  .hst-ar{width:8px;}
}

/* ==================== 指标卡内嵌走势（2026-09-20） ====================
 * 数据卡里那张「近 7 天趋势」的小图现在复制一份到每张指标卡里：
 * 看总数的时候顺手知道它是往上走还是往下走，不用来回对着两张图看。 */
.metric .m-sp{margin-top:9px; height:26px; overflow:hidden;}
.metric .m-sp .kch{height:26px;}
.metric .m-sp svg{display:block;}

/* ==================== 两店对比（分组条形图 · 2026-09-20） ====================
 * 两条同基准的横条（两店共用该指标的最大值当尺），长度差一眼看得出；
 * 数字留在左端保精度，合计收在最右边一列灰字。
 * 配色按「店铺」分（九霄靛蓝 / 衣橱紫）—— 这是分类色，不用红黄绿。 */
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.cmp-hd,.cmp-row{display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 92px;
  gap:var(--sp-3); align-items:center; padding:9px 14px;}
.cmp-hd{background:var(--tint-slate); border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:600; color:var(--ink3);}
.cmp-row + .cmp-row{border-top:1px solid var(--line2);}
.cmp-k{font-size:var(--fs-sm); color:var(--ink2); display:flex; align-items:center; gap:6px; min-width:0;}
.cmp-lo{font-size:var(--fs-2xs); font-weight:400; color:var(--ink3); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-tag); padding:0 5px; flex:none;}
/* 店名是这一行的主语，不能靠继承 --ink3 那种辅助灰：实测在浅表底上只有 4.49:1，卡着线过。 */
.cmp-c{display:flex; align-items:center; gap:9px; min-width:0; color:var(--ink2); font-weight:500;}
.cmp-v{font-size:var(--fs-sm); color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; min-width:54px; text-align:right;}
.cmp-tr{flex:1; min-width:24px; height:9px; border-radius:var(--r-tag); background:var(--line2); overflow:hidden;}
.cmp-tr i{display:block; height:100%; border-radius:var(--r-tag);}
.cmp-tr i.a{background:linear-gradient(90deg,#818CF8,#4F46E5);}
.cmp-tr i.b{background:linear-gradient(90deg,#A78BFA,#7C3AED);}
.cmp-tr i.c{background:linear-gradient(90deg,#5EEAD4,#0D9488);}
.cmp-dot{flex:none; width:8px; height:8px; border-radius:50%; display:inline-block;}
.cmp-dot.a{background:var(--c-indigo);}
.cmp-dot.b{background:var(--c-violet);}
.cmp-dot.c{background:var(--c-teal);}
.cmp-s{text-align:right; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
/* ★ 2026-10-26 三店（惠淘接入）：cmp.cmp3 = 指标列 + 3 店 + 合计列 */
.cmp.cmp3 .cmp-hd,.cmp.cmp3 .cmp-row{grid-template-columns:130px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 92px;}
@media (max-width:760px){
  .cmp-hd,.cmp-row{grid-template-columns:88px minmax(0,1fr) minmax(0,1fr) 68px; gap:var(--sp-2); padding:8px 10px;}
  .cmp.cmp3 .cmp-hd,.cmp.cmp3 .cmp-row{grid-template-columns:80px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 64px;}
  .cmp-tr{display:none;}   /* 窄屏先保数字：两条 9px 的小条挤在 100px 里没有信息量 */
  .cmp-lo{display:none;}
}

/* ==================== v4 移动端修正（2026-09-20） ====================
   体检实测（390×844）：触屏交互元素低于 44px 拇指最小目标的有 42 个 ——
     .sd-i 32px（14 个菜单项）、.btn.sm 36px、.tab 38px、.tb-ico 32px、.rchip 30px；
   另有 .mbar 吸底条 65px 压住内容最后一行，最后一屏永远点到底。
   ⚠️ 放在文件最末尾是有意的：要靠「后来居上」压掉上面 @media 里那些偏小的值。
      如果以后在它后面再加规则，这里会被反压 —— 加完要再跑一次体检确认。 */
@media (max-width:900px){
  .sd-i{height:44px; padding:0 12px; gap:8px;}
  .btn.sm,.btn.p{height:44px; padding:0 14px;}
  .tab{height:44px; padding:0 14px;}
  .tb-ico{width:44px; height:44px;}
  .rchip{height:44px;}
  .chip,.ai-chip{height:40px;}
  /* 「标记休息 / 代操作 / 改交接」这类是文字型操作链接（不是按钮），实测只有 19.2px 高 ——
     手指基本点不中。这里不改成按钮外观（那会把次要动作抬成主要动作），
     只把可点区域撑到 40px：加上下内边距 + inline-flex 让文字垂直居中，视觉上仍是灰色字。 */
  .lnk,.stat-lnk,td .lnk,button.lnk{min-height:40px; padding:0 6px; display:inline-flex; align-items:center;}
  /* chip 里那个「移除某人」的小 × 实测只有 18×18（连 WCAG 2.5.8 的 24px 下限都没到）。
     撑到 28px：这里不做成 40px 是因为它长在 chip 内部，再大就把整条 chip 撑变形了，
     28px 是「手指够得着」和「chip 不被撑爆」的交点。 */
  /* ⚠️ 这里必须用 width/height 而不是 min-*：上面 .chip button 定死了 width:18px，
     min-width 压不住一个明确的 width。 */
  .chip button,.chipx{width:28px; height:28px; min-width:28px; min-height:28px; display:inline-flex; align-items:center; justify-content:center; flex:none;}
  /* 弹层关闭的 × 实测只有 18×18，是全局最难点的控件 —— 撑到 40×40 并加大命中区 */
  .pm-x,.modal-x,.x,.close{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;}
  /* 吸底条 65px + 系统安全区：内容区必须让出这段，否则最后一行的按钮永远在那条下面躺着 */
  .content{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
}
@media (max-width:560px){
  .seg.sm button{height:40px;}
  .pinput{height:44px;}
  .pill,.shiftTag,.rc,.sh-tag{line-height:22px;}   /* 这些不是按钮，是标签，放宽到 22px 只是别让行被切 */
}

/* ============================ 我的工作台（2026-09-20 新增） ============================
 * 「主管个人工作台」视图专用：① 今日要处理的行动行 ② 我自己的工作日志。
 * 只用设计系统 token（圆角 3 档 / 间距 8 的倍数 / 不新造颜色）：
 * 状态只走 --bad / --warn / --ok，识别色只走 --brand。 */
.wkrow{display:flex; align-items:center; gap:var(--sp-3); padding:12px 14px; margin-top:10px;
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm); background:var(--surface);}
.wkrow .wkdot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink4);}
.wkrow.lv-r{border-left-color:var(--bad); background:linear-gradient(90deg, var(--bad-bg), var(--surface) 42%);}
.wkrow.lv-r .wkdot{background:var(--bad);}
.wkrow.lv-y{border-left-color:var(--warn); background:linear-gradient(90deg, var(--warn-bg), var(--surface) 42%);}
.wkrow.lv-y .wkdot{background:var(--warn);}
.wkrow.lv-ok{border-left-color:var(--ok); background:linear-gradient(90deg, var(--ok-bg), var(--surface) 42%);}
.wkrow.lv-ok .wkdot{background:var(--ok);}
.wkrow-tx{flex:1; min-width:0;}
.wkrow-hd{font-size:var(--fs-md); color:var(--ink);}
.wkrow-hd b{font-variant-numeric:tabular-nums;}
.wkrow-s{font-size:var(--fs-xs); color:var(--ink3); margin-top:2px; word-break:break-word;}

.wlsec{font-size:var(--fs-xs); color:var(--ink3); margin:16px 0 0;}
.wlrow{display:flex; align-items:center; gap:var(--sp-2); padding:9px 12px; margin-top:8px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);}
.wlrow.done{background:var(--panel);}
.wbx{flex:none; width:24px; height:24px; border-radius:var(--r-tag); border:1.5px solid var(--ink5);
  background:var(--surface); color:transparent; font-size:var(--fs-sm); line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;}
.wbx.on{background:var(--ok); border-color:var(--ok); color:#fff;}
.wl-t{flex:1; min-width:0; font-size:var(--fs-md); color:var(--ink); word-break:break-word;}
.wlrow.done .wl-t{color:var(--ink3); text-decoration:line-through;}
.wl-d{flex:none; font-size:var(--fs-2xs); color:var(--warn-d); background:var(--warn-bg);
  border:1px solid var(--warn-bd); border-radius:var(--r-tag); padding:1px 7px;}
@media (max-width:560px){
  .wkrow{flex-wrap:wrap; padding:11px 12px;}
  .wkrow-tx{flex:1 1 100%;}      /* 手机上按钮独占一行，别把标题挤成一排省略号 */
  .wkrow .btn{width:100%;}
  .wbx{width:32px; height:32px;}  /* 手指点得中 */
}

/* ==================== 工作标准页：口径切换 + 条目排版重做（2026-09-20） ====================
 * 用户反馈（SHUJU.xls 第 2 条）：「组长和组员筛选的地方不够明显，整体文字排版也不好看」。
 * 改前的病灶：
 *   ① 口径切换用的是 .seg.sm —— 26px 高、12px 字，飘在页面右上角、没有任何说明文字，
 *      用户扫一眼根本不知道这块控件是干什么用的；
 *   ② 条目行沿用打卡清单的 13px/紧行距，前面一个孤零零的「•」，一屏看下来没有层次。
 * 现在：
 *   ① 选择器升级为 40px 高实心胶囊按钮（选中态＝品牌底 + 白字 + 投影），带图标和条数徽标，
 *      左侧补「查看口径」标签说明用途；移动端整条铺满、按钮 48px；
 *   ② 顶部加「口径说明带」，讲清当前看的是谁、该口径额外要盯什么；
 *   ③ 分组标题＝左侧 3px 品牌强调条 + 右对齐条数徽标；条目行加内边距、
 *      标题 14px/600、描述 13px/1.7，并把「•」换成品牌色小圆点。
 * ⚠️ 本段追加在文件最末尾，靠「后来居上」压住上面 .seg.sm / .item.ro 的旧值。
 *    如需再改，请继续往后追加，不要插到这段前面（否则压不住旧值）。 */
.std-hd{margin-bottom:16px;}
.std-hd .pg-t{display:flex; align-items:center; gap:9px;}

.std-role{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.std-role .rl{display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink2);}
.std-role .rw{display:inline-flex; gap:6px; padding:4px;
  background:var(--info-bg); border:1px solid var(--line); border-radius:var(--r-sm);}
.std-role button.tg{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--ink2);
  height:40px; padding:0 16px; border:1px solid transparent; border-radius:var(--r-tag);
  background:transparent; cursor:pointer; transition:.15s;}
.std-role button.tg svg{flex:none;}
.std-role button.tg .cnt{min-width:24px; text-align:center; font-size:var(--fs-xs); font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink2); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:0 7px; line-height:19px;}
.std-role button.tg:hover{background:var(--surface); border-color:var(--brand-bd); color:var(--brand-a);}
.std-role button.tg.on{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 2px 8px rgba(79,70,229,.26);}
.std-role button.tg.on svg{opacity:.95;}
.std-role button.tg.on .cnt{background:rgba(255,255,255,.24); border-color:transparent; color:#fff;}
.std-role button.tg.on:hover{background:var(--brand-h); border-color:var(--brand-h); color:#fff;}

.std-tip{display:flex; align-items:flex-start; gap:9px; margin-bottom:14px;
  padding:11px 14px; border:1px solid var(--brand-bd); border-radius:var(--r-sm);
  background:var(--brand-bg); font-size:var(--fs-sm); color:var(--brand-a); line-height:1.65;}
.std-tip svg{flex:none; margin-top:2px; color:var(--brand);}
.std-tip b{font-weight:600;}

.std-g{margin-top:16px;}
.std-g-h{display:flex; align-items:center; gap:9px; margin-bottom:2px;
  padding-bottom:9px; border-bottom:1px solid var(--line);}
.std-g-h .gt{display:flex; align-items:center; gap:8px;
  font-size:var(--fs-md); font-weight:600; color:var(--ink); letter-spacing:.2px;}
.std-g-h .gt::before{content:''; flex:none; width:3px; height:14px;
  border-radius:var(--r-tag); background:var(--brand);}
.std-g-h .gn{margin-left:auto; font-size:var(--fs-xs); font-weight:500; color:var(--ink3);
  font-variant-numeric:tabular-nums; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:1px 9px;}

.std-list .item.ro{padding:13px 6px 13px 2px;}
.std-list .item.ro .mk{width:18px; margin-top:5px;}
/* 把原来那个孤零零的「•」换成一个品牌色小点：悬停时点亮，给整页一个可扫读的锚 */
.std-list .item.ro .mk::before{content:''; display:block; width:6px; height:6px; margin:0 auto;
  border-radius:50%; background:var(--brand-bd); transition:.15s;}
.std-list .item.ro:hover .mk::before{background:var(--brand);}
.std-list .item.ro .t{font-size:var(--fs-md); font-weight:600; line-height:1.5; color:var(--ink);}
.std-list .item.ro .d{margin-top:5px; font-size:var(--fs-sm); line-height:1.7; color:var(--ink2);}
.std-list .item.ro .amt{align-self:center; line-height:19px;}

@media (max-width:760px){
  .std-hd .pg-a{width:100%; margin-left:0;}
  .std-role{width:100%; flex-direction:column; align-items:stretch; gap:7px;}
  .std-role .rl{font-size:var(--fs-xs);}
  .std-role .rw{width:100%;}
  .std-role button.tg{flex:1; height:48px; justify-content:center;}   /* 拇指目标 ≥44px */
  .std-list .item.ro{padding:12px 4px 12px 0;}
}

/* ==================== 主管工作台（2026-09-20 按参考图重做） ====================
 * 用户口径：「主管的工作台做成这样挺好的」（参考图 = 大时钟 + 日期 + 全局搜索 + 数据卡 + 快捷磁贴）。
 * 这块只负责 ⓪ hero 与 ③ 磁贴；数据卡沿用通用 .metric / .metrics（不新造一套）。
 * ⚠️ 同样追加在文件最末尾，靠「后来居上」压住上面的通用值，勿在其后再加冲突规则。 */

/* ---- ⓪ hero：大时钟 + 日期 ---- */
.wkhero{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding:22px 24px; border-radius:var(--r); border:1px solid var(--brand-bd);
  background:linear-gradient(135deg,var(--brand-bg),var(--surface-2) 62%);}
.wkhero-main{min-width:0;}
.wkhero .wkhi{font-size:var(--fs-md); font-weight:600; color:var(--brand-a); letter-spacing:.2px;}
.wkhero .wkclock{display:flex; align-items:baseline; gap:2px; margin-top:5px;
  line-height:1; font-variant-numeric:tabular-nums;}
.wkhero .wkclock #wkClock{font-size:52px; font-weight:600; letter-spacing:-1px; color:var(--ink);}
.wkhero .wkclock-s{font-size:20px; font-weight:600; color:var(--ink3);}
.wkhero .wkdate{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:9px; font-size:var(--fs-sm); color:var(--ink2);}
.wkhero .wksep{width:1px; height:11px; background:var(--line); flex:none;}
.wkhero-a{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}

/* ---- ① 全局搜索 ---- */
.wksearch{display:flex; align-items:center; gap:10px; margin-top:16px;
  padding:4px 6px 4px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh); transition:.15s;}
.wksearch:focus-within{border-color:var(--brand-bd); box-shadow:0 0 0 3px var(--brand-bg);}
.wksearch-ic{display:inline-flex; flex:none; color:var(--ink3);}
.wksearch-ic svg{width:17px; height:17px;}
.wksearch input{flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:var(--fs-md); height:40px; padding:0; color:var(--ink);
  -webkit-appearance:none; appearance:none;}
.wksearch input::-webkit-search-cancel-button{display:none;}
.wkres{margin-top:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh); overflow:hidden;}
.wkres-h{padding:9px 14px; font-size:var(--fs-xs); color:var(--ink3);
  background:var(--bg); border-bottom:1px solid var(--line2);}
.wkres-i{display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit;
  cursor:pointer; padding:11px 14px; border:0; border-bottom:1px solid var(--line2); background:var(--surface);
  transition:.12s;}
.wkres-i:last-child{border-bottom:0;}
.wkres-i:hover{background:var(--bg);}
.wkres-i:focus-visible{outline:2px solid var(--brand); outline-offset:-2px;}
.wkres-g{flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--brand-a);
  background:var(--brand-bg); border:1px solid var(--brand-bd); border-radius:var(--r-tag);
  padding:1px 7px; line-height:18px; min-width:56px; text-align:center;}
.wkres-b{flex:1; min-width:0;}
.wkres-t{display:flex; align-items:center; gap:7px; font-size:var(--fs-md); color:var(--ink);
  font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wkres-d{display:block; font-size:var(--fs-xs); color:var(--ink3); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.wkres-m{flex:none; font-size:var(--fs-xs); font-weight:500; color:var(--ink3); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-tag); padding:0 6px; line-height:17px;}
.wkres-c{flex:none;}
.wkres mark{background:var(--mark-bg); color:var(--mark-fg); border-radius:2px; padding:0 1px;}
.wkres-e{padding:22px 14px; text-align:center; font-size:var(--fs-sm); color:var(--ink3); line-height:1.7;}

/* ---- ③ 快捷磁贴 —— 2026-09-20 已废弃删除。
        用户判定「我的工作台里快捷入口是多余的」（左侧导航已有同样的入口），
        8 个磁贴连同 WK_TILES / workTilesHtml 一起摘掉，这块 CSS 随之清掉。
        要恢复见 dash.html 里那段同名注释。 ---- */

/* ---- ③' 预警与提醒（紧凑一行式，2026-09-20） ----
        原来是「卡片 + 两行文字」，5 个人占掉大半屏；现在一人一行，行高约 38px。
        左边 3px 竖条按级别上色（红/黄），一眼能扫出谁最急。 */
.wkw{margin-top:10px; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface);}
.wkw-i{display:flex; align-items:center; gap:8px; padding:9px 12px;
  font-size:var(--fs-sm); border-top:1px solid var(--line);}
.wkw-i:first-child{border-top:0;}
.wkw-i.lv-r{box-shadow:inset 3px 0 0 var(--bad);}
.wkw-i.lv-y{box-shadow:inset 3px 0 0 var(--warn);}
.wkw-i.lv-ok{box-shadow:inset 3px 0 0 var(--ok);}
.wkw-lv{flex:none; font-size:var(--fs-xs); line-height:17px; padding:0 7px;
  border-radius:var(--r-tag); border:1px solid transparent; white-space:nowrap;}
.wkw-n{flex:none; font-weight:600; color:var(--ink);}
.wkw-x{flex:1; min-width:0; color:var(--ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wkw-a{flex:none; display:flex; gap:9px;}

@media (max-width:560px){
  .wkhero{padding:18px;}
  .wkhero .wkclock #wkClock{font-size:42px;}
  .wkhero-a{width:100%; margin-left:0;}
  .wkhero-a .btn{flex:1;}
  .wksearch{padding:3px 4px 3px 12px;}
  .wksearch input{height:44px;}          /* 输入框 ≥16px 字号 + 44px 高，手机上不触发缩放 */
  .wkres-g{min-width:48px;}
  /* 手机上预警行空间紧：原因那一段让位，保留「级别 + 姓名 + 动作」 */
  .wkw-i{gap:6px; padding:9px 10px;}
  .wkw-x{display:none;}
  .wkw-a{gap:7px;}
}

/* ---- 导入弹窗 · 截图识别区（2026-09-20 新增）----
        虚线框 =「这里可以丢东西」的通用语言，拖上来时变品牌色。 */
.impocr{margin-top:10px; padding:12px 14px; border:1px dashed var(--ink5);
  border-radius:var(--r-sm); background:var(--bg); transition:.15s;}
.impocr.over{border-color:var(--brand); background:var(--brand-bg);}
.impocr-tx{display:flex; flex-direction:column; gap:3px; font-size:var(--fs-sm); color:var(--ink2); line-height:1.6;}
.impocr-tx b{color:var(--ink); font-size:var(--fs-md);}
.impocr-pv{margin-top:10px; max-width:100%; max-height:190px; display:block;
  border:1px solid var(--line); border-radius:var(--r-sm);}
.impocr-pv.hidden{display:none;}

/* ═══ v2 · 参考站「全盘照搬」外壳（2026-09-25）═══

/* ═══ v2 · 参考站「全盘照搬」外壳（2026-09-25）═══ */

/* ------------------------------------------------------------------
   v2 外壳（2026-09-25）· 全盘照搬参考站 kefu-redesign 的侧栏 / 顶栏 / 工作台
   作用域：只在 <body class="v2"> 下生效（dash.html / lead.html 用），
   绝不污染其余 15 个页面 —— 它们不加 .v2，走的还是 v1 那套 .side/.sd-* 样式。
   ⚠️ 这里统一用 --v2-* 前缀的自有变量，避免与 v1 的 --side-w/--top-h 打架。
   ------------------------------------------------------------------ */
body.v2{
  --v2-brand:#4F46E5; --v2-brand-2:#7C3AED; --v2-brand-bg:#EEF2FF; --v2-brand-bd:#C7D2FE;
  --v2-brand-active:#3730A3;
  --v2-ok:#16A34A; --v2-ok-bg:#F0FDF4;
  --v2-warn:#D97706; --v2-warn-bg:#FFFBEB; --v2-warn-text:#B45309;
  --v2-danger:#DC2626; --v2-danger-bg:#FEF2F2; --v2-danger-text:#991B1B;
  --v2-info:#0284C7; --v2-info-bg:#F0F9FF; --v2-info-text:#075985;
  --v2-surface:#fff; --v2-surface-2:#FAFBFC; --v2-surface-3:#F1F3F6;
  --v2-line:#E7E9EF; --v2-line-2:#EFF1F5; --v2-line-strong:#D3D7E0;
  --v2-ink:#0F172A; --v2-ink-2:#475569; --v2-ink-3:#64748B; --v2-ink-4:#94A3B8;
  --v2-side-w:232px; --v2-top-h:56px; --v2-content-max:1360px;
  --v2-r-lg:14px; --v2-r-md:9px; --v2-r-sm:6px;
  --v2-sh-xs:0 1px 2px rgba(15,23,42,.04);
  --v2-sh-sm:0 2px 8px rgba(15,23,42,.06);
  --v2-sh-md:0 8px 28px rgba(15,23,42,.10);
  --v2-t-xs:11px; --v2-t-sm:12px; --v2-t-base:13px; --v2-t-md:14px; --v2-t-lg:16px;
  --v2-t-xl:20px; --v2-t-2xl:24px;
  --v2-dur:200ms; --v2-ease:cubic-bezier(.2,.8,.3,1);
  --v2-num:ui-monospace,SFMono-Regular,"SF Mono",Consolas,monospace;
}
/* 暗色：本项目默认就是暗色（theme.js 未选过 → dark），所以这组必须有，否则暗色下会白底刺眼 */
[data-theme="dark"] body.v2,
body.v2[data-theme="dark"]{
  --v2-brand:#818CF8; --v2-brand-2:#A5B4FC; --v2-brand-bg:#1E2340; --v2-brand-bd:#353C63; --v2-brand-active:#C7D2FE;
  --v2-ok:#4ADE80; --v2-ok-bg:#0D2A17;
  --v2-warn:#FBBF24; --v2-warn-bg:#33270A; --v2-warn-text:#FCD34D;
  --v2-danger:#F87171; --v2-danger-bg:#3A1618; --v2-danger-text:#FCA5A5;
  --v2-info:#38BDF8; --v2-info-bg:#0A2C3D; --v2-info-text:#7DD3FC;
  --v2-surface:#121620; --v2-surface-2:#171B27; --v2-surface-3:#1D2230;
  --v2-line:#232B3D; --v2-line-2:#1B2231; --v2-line-strong:#33405A;
  --v2-ink:#E8EDF7; --v2-ink-2:#A8B4CC; --v2-ink-3:#8593AD; --v2-ink-4:#64748B;
  --v2-sh-xs:0 1px 2px rgba(0,0,0,.30); --v2-sh-sm:0 2px 10px rgba(0,0,0,.34); --v2-sh-md:0 8px 28px rgba(0,0,0,.44);
}

/* ── 骨架：侧栏(固定) + 主区(左移 232px) ───────────────────── */
body.v2 .side{
  position:fixed; left:0; top:0; bottom:0; width:var(--v2-side-w); z-index:40;
  background:var(--v2-surface); border-right:1px solid var(--v2-line);
  display:flex; flex-direction:column;
}
body.v2 .main{margin-left:var(--v2-side-w); min-width:0;}
body.v2 .topbar,body.v2 .top{height:var(--v2-top-h);}
body.v2 .wrap{max-width:var(--v2-content-max); margin:0 auto;}

/* ── 侧栏 · 品牌区 ─────────────────────────────────────────── */
body.v2 .sd-brand{display:flex; align-items:center; gap:10px; padding:14px 16px 13px;
  border-bottom:1px solid var(--v2-line-2); height:auto;}
body.v2 .sd-logo{width:32px; height:32px; flex:none; display:flex; border-radius:10px; overflow:hidden;}
body.v2 .sd-logo svg{width:100%; height:100%; display:block;}
body.v2 .sd-id{display:flex; flex-direction:column; min-width:0; justify-content:center;}
body.v2 .sd-name{font-family:"MiSans",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--v2-t-md); font-weight:600; letter-spacing:-.02em;
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 2026-10-01：英文恢复显示（用户反馈「主管视角看不到英文名」）。
   原来是 display:none + nav.js v2 分支根本没输出 → 两处一起导致英文彻底消失。
   现在按 v1 的观感落成小字，压在「中文名」与「副标题」之间；v2 侧栏品牌区是
   height:auto + align-items:center，多一行只会把这块撑高，不会溢出（不像 v1 卡 60px）。
   2026-10-12 品牌定名后为「yún shū · MetaBridge」并排一行，走 Outfit。 */
body.v2 .sd-latin{display:flex; align-items:center; gap:4px; margin-top:1px; min-width:0;}
body.v2 .sd-py{font-family:"Outfit",-apple-system,sans-serif; font-size:10px;
  font-weight:400; letter-spacing:.05em; line-height:1.25;
  color:var(--v2-ink-4); opacity:.9; white-space:nowrap; flex:none;}
body.v2 .sd-en{display:block; font-family:"Outfit",-apple-system,sans-serif; font-size:10px;
  font-weight:400; letter-spacing:.05em;
  line-height:1.25; color:var(--c-violet-d); opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body.v2 .sd-en::before{content:"·"; margin-right:4px; opacity:.6;}
body.v2 .sd-latin + .sd-sub{margin-top:3px;}
body.v2 .sd-sub{align-self:flex-start; margin-top:0; font-family:"Outfit",sans-serif;
  font-size:var(--v2-t-xs); font-weight:400; letter-spacing:.14em;
  color:var(--v2-ink-4); background:none; border:0; padding:0; line-height:1.4;}

/* ── 侧栏 · 搜索框 ─────────────────────────────────────────── */
body.v2 .sd-search{padding:10px 12px;}
body.v2 .sd-search-b{display:flex; align-items:center; gap:8px; height:34px; padding:0 10px;
  border:1px solid var(--v2-line); border-radius:var(--v2-r-md); background:var(--v2-surface-2);
  cursor:pointer; transition:border-color 120ms,background 120ms;}
body.v2 .sd-search-b:hover{border-color:var(--v2-line-strong); background:var(--v2-surface);}
body.v2 .sd-search-b svg{width:14px; height:14px; color:var(--v2-ink-4); flex:none;}
body.v2 .sd-search-b .t{font-size:var(--v2-t-sm); color:var(--v2-ink-4);}
body.v2 .sd-search-b kbd{margin-left:auto; font-family:var(--v2-num); font-size:10px;
  color:var(--v2-ink-4); border:1px solid var(--v2-line); border-radius:4px; padding:1px 5px;
  background:var(--v2-surface);}

/* ── 侧栏 · 菜单 ───────────────────────────────────────────── */
body.v2 .sd-menu{flex:1; overflow-y:auto; padding:0 12px 12px;}
/* ★ 2026-10-12（用户要求）：分组标题上间距收窄（14→8px），与 v1 保持一致，侧栏更紧凑 */
body.v2 .sd-sec{display:flex; align-items:center; gap:6px; padding:8px 8px 5px;
  font-size:var(--v2-t-xs); font-weight:600; color:var(--v2-ink-4); letter-spacing:.06em;}
body.v2 .sd-sec::before{display:none;}            /* v1 的彩色小圆点收掉 */
body.v2 .sd-sec::after{content:""; flex:1; height:1px; background:var(--v2-line-2);}
body.v2 .sd-i{display:flex; align-items:center; gap:10px; height:auto; padding:8px 10px;
  margin-bottom:0; border-radius:var(--v2-r-md); color:var(--v2-ink-2);
  font-size:var(--v2-t-base); cursor:pointer; position:relative;
  transition:background 120ms,color 120ms; text-decoration:none;}
body.v2 .sd-i:hover{background:var(--v2-surface-3); color:var(--v2-ink);}
body.v2 .sd-i.on{background:var(--v2-brand-bg); color:var(--v2-brand-active); font-weight:600;
  box-shadow:none;}
body.v2 .sd-i.on::before{content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:0 3px 3px 0; background:var(--v2-brand);}
/* v1 的彩色圆角图标块（.ic）在 v2 里换成纯描边小图标 */
body.v2 .sd-i .ic{width:auto; height:auto; background:none !important; border-radius:0; box-shadow:none !important;
  display:flex; align-items:center; color:inherit;}
body.v2 .sd-i .ic svg{width:16px; height:16px; opacity:.85;}
body.v2 .sd-i.on .ic svg{opacity:1;}
body.v2 .sd-i > span:not(.ic):not(.dot){flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 角标 */
body.v2 .sd-i .dot{margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--v2-danger); color:#fff; font-size:10px; font-weight:700; line-height:18px;
  text-align:center; font-family:var(--v2-num);}
body.v2 .sd-i .dot.q{background:var(--v2-surface-3); color:var(--v2-ink-3); font-weight:600;}

/* ── 侧栏 · 底部：预览视角 + 身份 ─────────────────────────── */
body.v2 .sd-prev{border-top:1px solid var(--v2-line); padding:10px 12px 0; margin:0;}
body.v2 .sd-prev-h{display:flex; align-items:center; gap:6px; font-size:var(--v2-t-xs);
  font-weight:600; color:var(--v2-ink-4); margin-bottom:7px;}
body.v2 .sd-prev-tip{font-weight:400; font-size:10px; color:var(--v2-ink-4); opacity:.8;}
body.v2 .sd-prev-seg{display:flex; gap:4px; padding:3px; background:var(--v2-surface-3);
  border-radius:var(--v2-r-md); border:0; height:auto;}
body.v2 .sd-prev-seg button{flex:1; appearance:none; border:0; background:transparent;
  color:var(--v2-ink-3); font-size:var(--v2-t-xs); padding:5px 0; border-radius:var(--v2-r-sm);
  cursor:pointer; transition:all 120ms;}
body.v2 .sd-prev-seg button.on{background:var(--v2-surface); color:var(--v2-ink);
  font-weight:600; box-shadow:var(--v2-sh-xs);}
body.v2 .sd-prev-x{margin-top:7px; width:100%; border:0; background:transparent; cursor:pointer;
  font-size:var(--v2-t-xs); color:var(--v2-brand); padding:4px 0;}
body.v2 .sd-foot{border-top:1px solid var(--v2-line); padding:10px 12px 12px;
  display:flex; align-items:center; gap:9px; margin:0;}
body.v2 .sd-av{width:28px; height:28px; border-radius:50%; background:var(--v2-brand-bg);
  color:var(--v2-brand-active); display:grid; place-items:center; font-size:11px;
  font-weight:600; flex:none;}
body.v2 .sd-who{font-size:var(--v2-t-sm); font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:block; color:var(--v2-ink);}
body.v2 .sd-role{font-size:var(--v2-t-xs); color:var(--v2-ink-4); display:block;}

/* ── 工作台 · 页头 / 提示条 / KPI / 卡片 ───────────────────── */
body.v2 .v2h{display:flex; align-items:flex-start; gap:16px; margin-bottom:16px;}
body.v2 .v2h-t{font-size:var(--v2-t-2xl); font-weight:600; letter-spacing:-.02em; line-height:1.3;}
body.v2 .v2h-d{font-size:var(--v2-t-base); color:var(--v2-ink-4); margin-top:4px;}
/* 组长看板页头副标题尾部的「· 9月25日（今天）」——比主副标题更淡一点 */
.v2 .v2h-day{color:var(--v2-ink-4); opacity:.85;}
/* 主管工作台页头右侧那个走秒的本地时间（原来是 hero 里的大时钟，v2 收成小字） */
.v2 .v2h-d .wkclock{margin-left:10px; font-family:var(--v2-num); color:var(--v2-ink-3); font-variant-numeric:tabular-nums;}
.v2 .v2h-d .wkclock-s{opacity:.7;}
body.v2 .v2h-a{margin-left:auto; display:flex; gap:8px; flex:none;}

body.v2 .v2note{display:flex; align-items:flex-start; gap:9px; padding:11px 14px; border-radius:var(--v2-r-md);
  font-size:var(--v2-t-base); line-height:1.6; margin-bottom:20px;}
body.v2 .v2note.warn{background:var(--v2-warn-bg); color:var(--v2-warn-text); border:1px solid #FDE68A;}
body.v2 .v2note.info{background:var(--v2-info-bg); color:var(--v2-info-text); border:1px solid #BAE6FD;}
[data-theme="dark"] body.v2 .v2note.warn{border-color:#57400B;}
[data-theme="dark"] body.v2 .v2note.info{border-color:#11445A;}
body.v2 .v2note svg{flex:none; margin-top:2px;}
body.v2 .v2note b{font-weight:600;}

body.v2 .v2g{display:grid; gap:12px;}
body.v2 .v2g.g4{grid-template-columns:repeat(4,1fr);}
body.v2 .v2g.g5{grid-template-columns:repeat(5,1fr);}   /* 差评卡出现时的 5 卡一行 */
body.v2 .v2g.g2{grid-template-columns:repeat(2,1fr);}
body.v2 .v2lg2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
body.v2 .v2stack{display:flex; flex-direction:column; gap:12px;}

body.v2 .v2kpi{border:1px solid var(--v2-line); border-radius:var(--v2-r-lg); background:var(--v2-surface);
  padding:14px 16px; box-shadow:var(--v2-sh-xs);}
body.v2 .v2kpi.click{cursor:pointer;}
body.v2 .v2kpi.click:hover{border-color:var(--v2-line-strong); box-shadow:var(--v2-sh-sm);}
body.v2 .v2kpi-l{font-size:var(--v2-t-sm); color:var(--v2-ink-4); display:flex; align-items:center; gap:5px;}
/* KPI 卡标题前的小图标：必须显式定尺寸 —— 这些 svg 来自 dash/lead 的 MICO，只有 viewBox、
   没有 width/height，不约束就会被撑成整块（v1 是靠 .m-ic 那个彩色块给的尺寸，v2 没有那个块）。 */
.v2 .v2kpi-l svg{width:15px; height:15px; flex:none; color:var(--v2-ink-3);}
body.v2 .v2kpi-v{font-size:var(--v2-t-2xl); font-weight:600; letter-spacing:-.02em; line-height:1.35;
  margin-top:4px; font-family:var(--v2-num); color:var(--v2-ink);}
body.v2 .v2kpi-f{font-size:var(--v2-t-xs); color:var(--v2-ink-4); margin-top:2px;}

body.v2 .v2card{border:1px solid var(--v2-line); border-radius:var(--v2-r-lg); background:var(--v2-surface);
  box-shadow:var(--v2-sh-xs); overflow:hidden;}
body.v2 .v2card-h{display:flex; align-items:center; gap:9px; padding:13px 16px;
  border-bottom:1px solid var(--v2-line-2);}
body.v2 .v2card-t{font-size:var(--v2-t-md); font-weight:600; color:var(--v2-ink);}
body.v2 .v2card-s{font-size:var(--v2-t-sm); color:var(--v2-ink-4);}
body.v2 .v2card-a{margin-left:auto;}
body.v2 .v2card-b{padding:6px 16px 10px;}
body.v2 .v2card-b.p0{padding:14px 16px;}
/* 主管工作台的 #todayCard 外壳：里面已经是 .v2card / .v2kpi 一整套卡片了，
   外壳本身不能再画边框，否则会出现「卡中卡」的双层描边。 */
.v2 .v2card-shell{background:transparent; border:0; box-shadow:none; padding:0;}

/* 列表行（今日待办 / 申诉 / 公告通用） */
body.v2 .v2row{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--v2-line-2);}
body.v2 .v2row:last-child{border-bottom:0;}
body.v2 .v2row-m{min-width:0; flex:1;}
body.v2 .v2row-t{font-size:var(--v2-t-md); color:var(--v2-ink); font-weight:500; line-height:1.45;}
body.v2 .v2row-s{font-size:var(--v2-t-sm); color:var(--v2-ink-4); margin-top:2px; line-height:1.45;}
body.v2 .v2dot{width:8px; height:8px; border-radius:50%; flex:none;}
body.v2 .v2dot.danger{background:var(--v2-danger);}
body.v2 .v2dot.warn{background:var(--v2-warn);}
body.v2 .v2dot.grey{background:var(--v2-ink-4);}
body.v2 .v2empty{padding:22px 4px; text-align:center; color:var(--v2-ink-4); font-size:var(--v2-t-base);}

/* 按钮（v2 内统一：28~34px 高、9px 圆角） */
body.v2 .v2btn{display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:32px; padding:0 13px; border:1px solid var(--v2-line-strong); border-radius:var(--v2-r-md);
  background:var(--v2-surface); color:var(--v2-ink-2); font-size:var(--v2-t-base); cursor:pointer;
  font-family:inherit; white-space:nowrap; transition:background 120ms,border-color 120ms,color 120ms;
  text-decoration:none;}
body.v2 .v2btn:hover{background:var(--v2-surface-3); color:var(--v2-ink);}
body.v2 .v2btn.pri{background:var(--v2-brand); border-color:var(--v2-brand); color:#fff;}
body.v2 .v2btn.pri:hover{background:var(--v2-brand-active); border-color:var(--v2-brand-active);}
body.v2 .v2btn.sm{height:28px; padding:0 10px; font-size:var(--v2-t-sm);}
body.v2 .v2btn.gh{border-color:transparent; background:transparent; color:var(--v2-ink-3);}
body.v2 .v2btn.gh:hover{background:var(--v2-surface-3); color:var(--v2-ink);}

/* 常用工具磁贴 */
body.v2 .v2tile{display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  padding:12px 10px; border:1px solid var(--v2-line); border-radius:var(--v2-r-md);
  background:var(--v2-surface); cursor:pointer; text-align:left; font-family:inherit;
  transition:border-color 120ms,box-shadow 120ms; text-decoration:none;}
body.v2 .v2tile:hover{border-color:var(--v2-brand-bd); box-shadow:var(--v2-sh-xs);}
body.v2 .v2tile .i{color:var(--v2-brand); display:flex;}
body.v2 .v2tile .t{font-size:var(--v2-t-base); color:var(--v2-ink); font-weight:500;}
body.v2 .v2tile .d{font-size:var(--v2-t-xs); color:var(--v2-ink-4);}

/* 排班小格 */
body.v2 .v2sch{display:flex; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--v2-line); border-radius:9px;}
body.v2 .v2sch-n{font-size:var(--v2-t-base); color:var(--v2-ink);}
body.v2 .v2sch-c{margin-left:auto; display:flex; gap:3px;}
body.v2 .v2sch-c span{width:16px; height:16px; border-radius:4px; font-size:10px;
  display:grid; place-items:center;}
body.v2 .v2sch-c .off{background:var(--v2-surface-3); color:var(--v2-ink-4);}
body.v2 .v2sch-c .m{background:var(--v2-info-bg); color:var(--v2-info-text);}
body.v2 .v2sch-c .a{background:var(--v2-warn-bg); color:var(--v2-warn-text);}
body.v2 .v2sch-c .n{background:var(--v2-brand-bg); color:var(--v2-brand);}

/* 响应式 */
@media (max-width:1100px){
  body.v2 .v2g.g4,body.v2 .v2g.g5{grid-template-columns:repeat(2,1fr);}
  body.v2 .v2lg2{grid-template-columns:1fr;}
}
@media (max-width:820px){
  body.v2 .side{transform:translateX(-100%); transition:transform var(--v2-dur) var(--v2-ease);}
  body.v2.nav-open .side{transform:none;}
  body.v2 .main{margin-left:0;}
  body.v2 .v2g.g4,body.v2 .v2g.g2,body.v2 .v2g.g5{grid-template-columns:1fr;}
}

/* ═══ v2 补丁（2026-09-25）：页头/提示条/搜索框提到内容区顶部后的间距与观感 ═══
   这些元素原来都窝在 #todayCard 卡片里（卡片自带 padding + 分隔），现在裸露在内容区，
   必须自己带外边距，否则会跟页头/下面的 KPI 贴在一起。 */
body.v2 #wkHero{margin-bottom:0;}
body.v2 #wkSearch .wksearch{margin-top:0; margin-bottom:12px; border-radius:var(--v2-r-md);
  border-color:var(--v2-line-strong); box-shadow:none; background:var(--v2-surface);}
body.v2 #wkSearch .wksearch:focus-within{border-color:var(--v2-brand-bd);}
body.v2 #wkSearch .wkres{border-radius:var(--v2-r-md); border-color:var(--v2-line); box-shadow:var(--v2-sh-sm);}
/* 一键日报那条工具条：v2 只留右侧一颗主按钮，左边 spacer 顶开；收紧上下间距 */
body.v2 .pg-bar{margin-bottom:14px; margin-top:2px;}
body.v2 .pg-bar .btn.p{border-radius:var(--v2-r-md);}
/* 工作台里的空白占位（读取中/读取失败）跟 v2 的空态对齐 */
body.v2 #workBoard .empty.plain,body.v2 #wkTop .empty.plain{color:var(--v2-ink-4);}

/* ── 团队绩效概览（2026-10-01 主管工作台重排）────────────────────────
   右栏顶部这张卡内分两段：客服成交排行 / 近 7 日趋势，用细分隔线隔开。
   段标题与副标题同行、副标题右对齐，与左栏各卡的「标题 + 说明」节奏保持一致。 */
body.v2 .perf-sec + .perf-sec{margin-top:14px; padding-top:14px; border-top:1px solid var(--v2-line-2);}
body.v2 .perf-sec-t{display:flex; align-items:baseline; gap:8px; margin-bottom:9px;
  font-size:var(--v2-t-md); font-weight:600; color:var(--v2-ink);}
body.v2 .perf-sec-s{margin-left:auto; font-size:var(--v2-t-xs); font-weight:400; color:var(--v2-ink-4);}