/* ============================================================
   星盘 · 企业人员沙盘系统
   设计语言：Apple Liquid Glass（液态玻璃）
   白天模式＝中性灰白     夜晚模式＝纯黑玻璃
   ============================================================ */

/* ------------------------------------------------------------
   1. 设计令牌（Design Tokens）
   ------------------------------------------------------------ */
:root{
  color-scheme:light;

  /* ---- 同心圆角系统 Concentric Radius ----
     规则：内层圆角 = 外层圆角 − 该层内边距（环宽）。
     圆心重合，所以任意深度的嵌套都像俄罗斯套娃一样等距贴合。
     改 --r-xl 或任一 --ring-*，整条链自动联动。 */
  --r-xl:30px;                                     /* 容器层：侧栏 / 模态 / 登录卡 */
  --ring-xl:8px;                                   /* 容器 → 面板 的环宽 */
  --r-lg:calc(var(--r-xl) - var(--ring-xl));       /* 22px 面板层：card / panel / aibar */
  --ring-lg:7px;                                   /* 面板 → 内块 的环宽 */
  --r-md:calc(var(--r-lg) - var(--ring-lg));       /* 15px 内块层：列表项 / 卡片内条 */
  --ring-md:4px;                                   /* 内块 → 控件 的环宽 */
  --r-sm:calc(var(--r-md) - var(--ring-md));       /* 11px 控件层：图标容器 / 表单域 */
  --ring-sm:3px;
  --r-xs:calc(var(--r-sm) - var(--ring-sm));       /* 8px  最小元素 */
  --r-pill:999px;                                  /* 胶囊：半径随容器高度自适应 */

  /* ---- 动态字体基准 ----
     全部正文字号由此派生，切换 data-fs 即可整站缩放（支持到 200%） */
  --fs-base:14px;
  --fs-xs:calc(var(--fs-base) * .821);   /* 11.5 辅助说明 */
  --fs-sm:calc(var(--fs-base) * .857);   /* 12   次级信息 */
  --fs-md:var(--fs-base);                /* 14   正文 */
  --fs-lg:calc(var(--fs-base) * 1.143);  /* 16   小标题 */
  --fs-xl:calc(var(--fs-base) * 1.5);    /* 21   页面标题 */

  /* ---- 动效：悬浮放大用带轻微过冲的弹性曲线 ---- */
  --ease:cubic-bezier(.32,.72,.28,1);
  --ease-pop:cubic-bezier(.34,1.26,.42,1);
  --lift-xs:scale(1.008);
  --lift-sm:scale(1.014);
  --lift-md:scale(1.022);
  --lift-lg:scale(1.03);

  /* 画布与环境光晕 */
  --bg:#e9e9ee;
  --orb-a:radial-gradient(circle,#ffffff,transparent);
  --orb-b:radial-gradient(circle,#d1d1d6,transparent);
  --orb-c:radial-gradient(circle,#f2f2f7,transparent);
  --orb-op:.7;

  /* 玻璃材质：提高不透明度，降低内容底噪，保证任意光线下可读 */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --glass-weak:rgba(255,255,255,.5);
  --glass-line:rgba(255,255,255,.9);
  --glass-edge:rgba(255,255,255,1);
  --glass-shadow:0 10px 30px rgba(20,24,40,.10),0 2px 6px rgba(20,24,40,.05);
  --glass-shadow-hi:0 22px 54px rgba(20,24,40,.16),0 4px 12px rgba(20,24,40,.08);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.4);
  --shine:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);

  /* 文字与分隔：三级灰度按 WCAG AA 校准（对比度对玻璃实际呈现色 #f9f9fa 计算），
     保证强光下与视力不佳时仍清晰可辨 */
  --text:#1b1b1f;      /* 16.3:1  正文标题 */
  --text-2:#54545c;    /*  7.1:1  次级信息 */
  --text-3:#6c6c74;    /*  5.0:1  辅助说明（AA 下限 4.5） */
  --hair:rgba(29,29,31,.09);
  --hair-2:rgba(29,29,31,.055);
  --fill:rgba(29,29,31,.055);
  --fill-2:rgba(29,29,31,.1);
  /* 玻璃之上的填充材质：嵌套元素不使用模糊，改用不透明填充 */
  --fill-glass:rgba(29,29,31,.06);
  --fill-glass-2:rgba(29,29,31,.1);

  /* 控件 */
  --input-bg:rgba(255,255,255,.68);
  --input-line:rgba(255,255,255,.9);
  --focus:rgba(0,113,227,.28);
  --nav-active-bg:rgba(255,255,255,.95);
  --nav-active-fg:#000;
  --btn-bg:rgba(255,255,255,.7);
  --btn-fg:#1d1d1f;
  --btn-line:rgba(255,255,255,.9);
  --pill-bg:#1d1d1f; --pill-fg:#fff; --pill-bg-hi:#000;
  --seg-bg:rgba(29,29,31,.06); --seg-thumb:rgba(255,255,255,.95);
  --shadow-sm:0 1px 2px rgba(20,24,40,.08);
  --mask:rgba(30,30,35,.32);
  --toast-bg:rgba(28,28,32,.86); --toast-fg:#fff;

  /* 功能色（白天） */
  --c-blue:#0071e3;      --c-blue-rgb:0,113,227;
  --c-teal:#0d9488;      --c-teal-rgb:13,148,136;
  --c-green:#0f9d58;     --c-green-rgb:15,157,88;
  --c-amber:#c2740a;     --c-amber-rgb:194,116,10;
  --c-red:#e0322f;       --c-red-rgb:224,50,47;
  --c-violet:#7c3aed;    --c-violet-rgb:124,58,237;
  --c-gray:#8e8e93;      --c-gray-rgb:142,142,147;
  --c-slate:#64748b;     --c-slate-rgb:100,116,139;
  --c-blue-soft:#a9c9f5; --c-blue-soft-rgb:169,201,245;

  /* 图表 */
  --chart-grid:rgba(29,29,31,.07);
  --chart-axis:#9a9aa0;
  --chart-dot:#ffffff;
  --chart-strong:#1d1d1f;
  --chart-soft:rgba(29,29,31,.05);

  /* 兼容别名：保持既有内联样式同步换色 */
  --muted:var(--text-2);
  --border:var(--hair);
  --primary:var(--c-blue);
  --primary-weak:rgba(var(--c-blue-rgb),.12);
  --teal:var(--c-teal);     --teal-weak:rgba(var(--c-teal-rgb),.13);
  --amber:var(--c-amber);   --amber-weak:rgba(var(--c-amber-rgb),.14);
  --red:var(--c-red);       --red-weak:rgba(var(--c-red-rgb),.13);
  --green:var(--c-green);   --green-weak:rgba(var(--c-green-rgb),.13);
  --violet:var(--c-violet); --violet-weak:rgba(var(--c-violet-rgb),.13);
  --card:var(--glass);
  /* 表格表头 / 冻结列：必须是实色，否则滚动时下面的行会透出来糊住表头 */
  --grid-solid:#f1f1f5;
  --shadow:var(--glass-shadow);
  --radius:var(--r-lg);
}

html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#000000;
  --orb-a:radial-gradient(circle,#2c2c30,transparent);
  --orb-b:radial-gradient(circle,#1c1c1e,transparent);
  --orb-c:radial-gradient(circle,#3a3a3c,transparent);
  --orb-op:.5;

  --glass:rgba(32,32,38,.74);
  --glass-strong:rgba(42,42,49,.88);
  --glass-weak:rgba(255,255,255,.09);
  --glass-line:rgba(255,255,255,.12);
  --glass-edge:rgba(255,255,255,.2);
  --glass-shadow:0 14px 40px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4);
  --glass-shadow-hi:0 24px 62px rgba(0,0,0,.68),0 4px 14px rgba(0,0,0,.5);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03);
  --shine:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);

  /* 深色同样按 AA 校准（对比度对 #1a1a1f 计算）：三级灰分别为 15.9 / 6.7 / 5.3 : 1 */
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#8e8e95;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.055);
  --fill:rgba(255,255,255,.07);
  --fill-2:rgba(255,255,255,.13);
  --grid-solid:#232327;

  --input-bg:rgba(255,255,255,.06);
  --input-line:rgba(255,255,255,.12);
  --focus:rgba(10,132,255,.4);
  --nav-active-bg:rgba(255,255,255,.13);
  --nav-active-fg:#ffffff;
  --btn-bg:rgba(255,255,255,.09);
  --btn-fg:#f5f5f7;
  --btn-line:rgba(255,255,255,.12);
  --pill-bg:rgba(255,255,255,.92); --pill-fg:#000; --pill-bg-hi:#fff;
  --seg-bg:rgba(255,255,255,.07); --seg-thumb:rgba(255,255,255,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --mask:rgba(0,0,0,.55);
  --toast-bg:rgba(58,58,64,.9); --toast-fg:#fff;

  --c-blue:#0a84ff;      --c-blue-rgb:10,132,255;
  --c-teal:#2ee6c8;      --c-teal-rgb:46,230,200;
  --c-green:#30d158;     --c-green-rgb:48,209,88;
  --c-amber:#ff9f0a;     --c-amber-rgb:255,159,10;
  --c-red:#ff453a;       --c-red-rgb:255,69,58;
  --c-violet:#bf5af2;    --c-violet-rgb:191,90,242;
  --c-gray:#98989d;      --c-gray-rgb:152,152,157;
  --c-slate:#a1a1a6;     --c-slate-rgb:161,161,166;
  --c-blue-soft:#3b6ea8; --c-blue-soft-rgb:59,110,168;

  --chart-grid:rgba(255,255,255,.09);
  --chart-axis:#8e8e93;
  --chart-dot:#2a2a2e;
  --chart-strong:#f5f5f7;
  --chart-soft:rgba(255,255,255,.05);
}

/* ------------------------------------------------------------
   2. 基础
   ------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

/* ---- 动态字体：只改基准字号，全站字号与间距由 calc 联动 ----
   等价对应 iOS 动态字体的三档内容尺寸。若用户在系统里再放大，
   本档缩放会与之叠加，因此三档封顶在 140%，留出余量避免溢出。 */
html[data-fs="large"]{--fs-base:16.8px}    /* 120% */
html[data-fs="xlarge"]{--fs-base:19.6px}   /* 140% */
/* 特大档：关键横向布局改为堆叠，宁可换行也绝不截断文字 */
html[data-fs="xlarge"] .stat .v{font-size:calc(var(--fs-base) * 1.57);letter-spacing:-.6px}
html[data-fs="xlarge"] .page-head .sub,
html[data-fs="xlarge"] .sf-meta span{white-space:normal;overflow:visible;text-overflow:clip}
html[data-fs="xlarge"] .sc-stats{grid-template-columns:repeat(3,1fr)}
html[data-fs="xlarge"] .chip,
html[data-fs="xlarge"] .tag{white-space:normal;text-align:left}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:var(--fs-base);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .45s ease,color .45s ease;
}
/* 无障碍：用户要求减弱动效时，关闭一切位移与缩放 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .ambient .orb{animation:none}
}
a{color:var(--c-blue);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--fill-2);border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}
::selection{background:rgba(var(--c-blue-rgb),.22)}

/* 环境光晕：液态玻璃的折射底色 */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambient .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--orb-op);
  animation:float 14s infinite ease-in-out alternate;transition:background .5s ease,opacity .5s ease}
.ambient .o1{top:-12%;left:-10%;width:52vw;height:52vw;background:var(--orb-a)}
.ambient .o2{bottom:-22%;right:-12%;width:62vw;height:62vw;background:var(--orb-b);animation-delay:-6s}
.ambient .o3{top:34%;left:38%;width:34vw;height:34vw;background:var(--orb-c);animation-delay:-3s}
@keyframes float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(38px,56px) scale(1.12)}}

/* 玻璃面板核心类：这是唯一允许出现模糊的材质层
   注意：侧栏 .sidebar 与顶栏 .aibar 是「透明容器」，不参与玻璃材质，
   它们不画底色，直接坐在环境光晕之上（见各自的规则）。 */
.glass,.card,.sc-panel,.ask-panel,.modal,.login-card{
  background:var(--glass);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--glass-line);
  border-top-color:var(--glass-edge);
  box-shadow:var(--glass-inset),var(--glass-shadow);
  transition:background .45s ease,border-color .45s ease,box-shadow .35s ease,transform .35s var(--ease-pop);
}

/* ------------------------------------------------------------
   3. 布局骨架
   ------------------------------------------------------------ */
.layout{position:relative;z-index:1;display:flex;min-height:100vh}

/* 侧栏 = 透明容器：不画底色、不描边、不投影、不模糊，
   让环境光晕直接透上来。分组靠间距与留白，而非容器底。 */
.sidebar{
  width:228px;position:fixed;top:16px;left:16px;bottom:16px;z-index:30;
  border-radius:var(--r-xl);padding:18px 14px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

.logo{display:flex;align-items:center;gap:11px;padding:4px 8px 6px;position:relative;z-index:1}
.logo .mark{width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  background:linear-gradient(145deg,var(--c-blue),var(--c-teal));
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  box-shadow:0 6px 18px rgba(var(--c-blue-rgb),.35),inset 0 1px 0 rgba(255,255,255,.45)}
.logo .mark svg{display:block}
.logo b{font-size:16.5px;letter-spacing:.4px;font-weight:700;color:var(--text)}
.logo small{display:block;font-size:10.5px;color:var(--text-3);font-weight:400;margin-top:1px;letter-spacing:.3px}

.nav{flex:1;overflow-y:auto;position:relative;z-index:1;padding:2px 2px 6px}
.nav::-webkit-scrollbar{width:6px}
/* 侧栏是容器层，内部块圆角 = 容器圆角 − 侧栏内边距，保持同心 */
.sidebar{--r-md:calc(var(--r-xl) - 14px)}
.nav .sec{font-size:11px;padding:14px 12px 6px;color:var(--text-3);letter-spacing:1.4px;font-weight:600}
.nav a{display:flex;align-items:center;gap:11px;padding:9.5px 12px;border-radius:var(--r-md);
  color:var(--text-2);font-size:13.5px;margin-bottom:3px;cursor:pointer;
  border:1px solid transparent;transform-origin:left center;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),
    transform .26s var(--ease-pop),box-shadow .26s var(--ease)}
/* 图标统一占 20px 槽位，保证多行文字左边缘严格对齐（退出按钮复用同一槽位） */
.nav a .ic,.sf-out .ic{width:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav a:hover{background:var(--fill);color:var(--text);border-color:var(--hair);transform:var(--lift-sm)}
.nav a.active{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;
  border-color:var(--glass-line);box-shadow:var(--glass-inset),0 4px 14px rgba(20,24,40,.10)}
html[data-theme="dark"] .nav a.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 16px rgba(0,0,0,.5)}
.sidebar .nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;
  margin:0 -4px;padding:2px 4px 6px}
.sidebar .nav::-webkit-scrollbar{width:6px}
.sidebar .nav::-webkit-scrollbar-thumb{background:var(--hair);border-radius:var(--r-pill)}

/* 侧栏底部：主题切换 + 角色 + 账号 + 退出 */
.side-foot{position:relative;z-index:1;border-top:1px solid var(--hair);padding-top:12px;
  display:flex;flex-direction:column;gap:10px}
.sf-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sf-role{font-size:11px;font-weight:600;color:var(--c-blue);background:rgba(var(--c-blue-rgb),.12);
  border:1px solid rgba(var(--c-blue-rgb),.16);padding:3.5px 9px;border-radius:var(--r-pill);white-space:nowrap}
.sf-user{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-md);
  background:var(--fill);border:1px solid var(--hair);
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .26s var(--ease-pop)}
.sf-user:hover{background:var(--fill-2);border-color:var(--hair);transform:var(--lift-sm)}
.sf-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sf-meta b{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-meta span{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 退出：与左侧导航同构的普通行（图标 + 文字），无底色无描边。
   悬停才浮起，和 .nav a 的反馈保持一致，避免把退出做成一个突兀的红色胶囊。 */
.sf-out{display:flex;align-items:center;gap:11px;width:100%;
  padding:9.5px 12px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:400;text-align:left;line-height:1.2;
  color:var(--text-2);background:transparent;border:1px solid transparent;
  transform-origin:left center;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),
    transform .26s var(--ease-pop)}
.sf-out:hover{background:var(--fill);color:var(--text);border-color:var(--hair);
  transform:var(--lift-sm)}
.sf-out:active{transform:scale(.985)}
.sf-out svg{display:block;flex-shrink:0}

/* 文字尺寸分段控件（动态字体） */
.fs-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:var(--fill);border:1px solid var(--hair);flex-shrink:0}
.fs-seg button{width:27px;height:24px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-pill);color:var(--text-3);font-weight:600;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:color .22s var(--ease),background .22s var(--ease),transform .26s var(--ease-pop)}
.fs-seg button:hover{color:var(--text);transform:var(--lift-lg)}
.fs-seg button.on{background:var(--seg-thumb);color:var(--text);box-shadow:var(--shadow-sm)}
.fs-seg button[data-fsize="normal"]{font-size:11px}
.fs-seg button[data-fsize="large"]{font-size:13.5px}
.fs-seg button[data-fsize="xlarge"]{font-size:16px}

.main{flex:1;min-width:0;margin-left:256px;padding:16px 24px 42px}
.mobile-topbar,.mobile-nav-close,.mobile-nav-backdrop{display:none}

/* ------------------------------------------------------------
   顶栏：AI 快速询问中心
   ------------------------------------------------------------ */
/* 顶栏 = 透明容器。但它是吸顶元素，页面内容会从下方穿过，
   所以垫一层「渐隐模糊」在内容之后：只做柔化、不画底色，
   视觉上依然是透明的，滚上来的卡片不会和询问框糊在一起。 */
.aibar{
  position:sticky;top:12px;z-index:20;
  margin:0 0 18px;padding:13px 16px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:10px;
  background:transparent;border:0;box-shadow:none;
}
.aibar.collapsed{width:max-content;max-width:100%;padding:2px 0;margin-bottom:8px;gap:0}
.aibar.collapsed::before{display:none}
.aibar.collapsed .ask-form,.aibar.collapsed .ask-chips,.aibar.collapsed .ask-model{display:none}
.aibar.collapsed .ask-head{justify-content:flex-start;gap:0}
.aibar.collapsed .ask-toggle{background:var(--glass-strong);border-color:var(--glass-line);
  box-shadow:var(--glass-inset),var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.aibar::before{
  content:"";position:absolute;left:-24px;right:-24px;top:-18px;bottom:-26px;
  z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 82%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 82%,rgba(0,0,0,0) 100%);
  transition:opacity .3s var(--ease);
}
.aibar.at-top::before{opacity:0}
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask-toggle{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--fill-glass);color:var(--text);cursor:pointer;
  font-family:inherit;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.ask-toggle:hover{background:var(--fill-glass-2);border-color:var(--glass-line);transform:var(--lift-sm)}
.ask-toggle-ic{font-size:13px;color:var(--text-3);line-height:1;transition:transform .22s var(--ease)}
.aibar:not(.collapsed) .ask-toggle-ic{transform:rotate(180deg)}
.ask-title-mini{display:none}
.aibar.collapsed .ask-title-full{display:none}
.aibar.collapsed .ask-title-mini{display:inline}
.ask-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  letter-spacing:-.1px;color:var(--text)}
.ask-badge svg{color:var(--c-blue)}
.ask-model{font-size:11.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
.ask-model.off{color:var(--c-amber)}
/* 未接入模型时可点击：给个明确的「可点」暗示，避免用户找不到配置入口 */
.ask-model.link{cursor:pointer;border-bottom:1px dashed currentColor;padding-bottom:1px;
  transition:opacity .2s var(--ease)}
.ask-model.link:hover{opacity:.72}
/* 询问框：胶囊，左右内边距严格对称（图标与按钮各距边 8px） */
.ask-form{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-pill);
  background:var(--input-bg);border:1px solid var(--input-line);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .3s var(--ease)}
.ask-form:focus-within{border-color:rgba(var(--c-blue-rgb),.55);box-shadow:0 0 0 4px var(--focus)}
.ask-ic{display:inline-flex;color:var(--c-blue);flex-shrink:0}
.ask-form input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:13.5px;color:var(--text);padding:7px 0}
.ask-form input::placeholder{color:var(--text-3)}
.ask-send{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--r-pill);
  border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;flex-shrink:0;
  background:var(--pill-bg);color:var(--pill-fg);
  transition:background .22s var(--ease),transform .26s var(--ease-pop)}
.ask-send:hover{background:var(--pill-bg-hi);transform:var(--lift-md)}
.ask-send:active{transform:scale(.96)}
.ask-chips{display:flex;flex-wrap:wrap;gap:7px}
.ask-chip{padding:5px 12px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit;
  font-size:var(--fs-sm);color:var(--text-2);background:var(--fill);border:1px solid var(--hair);
  transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),
    transform .26s var(--ease-pop)}
.ask-chip:hover{color:var(--c-blue);background:rgba(var(--c-blue-rgb),.09);
  border-color:rgba(var(--c-blue-rgb),.32);transform:var(--lift-lg)}

/* 询问记录面板 */
.ask-panel{margin:0 0 18px;padding:14px 16px;border-radius:var(--r-lg);position:relative;z-index:1}
/* hidden 属性自带 display:none，但优先级拼不过组件自己的 display
   （.btn 是 inline-flex、.chip 是 inline-flex），于是本该藏起来的
   「批量删除」「设置上级」「已选 N 行」会一直杵在工具条上，看着像随时能点。
   这里统一压回去 —— 之前只给 .ask-panel 打了单独补丁，别的组件仍是坏的。 */
[hidden]{display:none !important}
.ap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ap-head b{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.ap-head svg{color:var(--c-blue)}
.ap-close{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:var(--fs-sm);
  color:var(--text-3);padding:5px 12px;border-radius:var(--r-pill);
  transition:color .2s var(--ease),background .2s var(--ease),transform .26s var(--ease-pop)}
.ap-close:hover{color:var(--text);background:var(--fill);transform:var(--lift-lg)}
.ap-body{max-height:58vh;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  font-size:calc(var(--fs-base) * 1.02)}
.ap-q{align-self:flex-end;max-width:78%;padding:9px 14px;font-size:13px;color:#fff;font-weight:500;
  border-radius:var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
  background:linear-gradient(145deg,var(--c-blue),var(--c-teal))}
.ap-a{align-self:flex-start;max-width:86%;padding:11px 15px;font-size:13px;line-height:1.75;
  color:var(--text);background:var(--fill);border:1px solid var(--hair);
  border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-xs);word-break:break-word}
.ap-a.err{font-size:12px;line-height:1.65;color:var(--c-amber);
  background:rgba(var(--c-amber-rgb),.1);border-color:rgba(var(--c-amber-rgb),.24)}
.ap-a.loading{color:var(--text-3)}
.ap-a.loading::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-radius:50%;background:var(--c-blue);animation:apulse 1s infinite}
@keyframes apulse{0%,100%{opacity:.25}50%{opacity:1}}

/* 页面标题：加粗、左对齐，作为内容区的锚点 */
.page-head{margin:0 0 18px;padding:0 4px;text-align:left}
.page-head h1{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.3px;color:var(--text)}
.page-head .sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:3px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);background:rgba(var(--c-blue-rgb),.12);color:var(--c-blue);font-weight:600;
  border:1px solid rgba(var(--c-blue-rgb),.16);white-space:nowrap}
.chip.dark{background:var(--pill-bg);color:var(--pill-fg);cursor:pointer;border-color:transparent;
  transition:background .22s var(--ease),transform .26s var(--ease-pop)}
.chip.dark:hover{background:var(--pill-bg-hi);transform:var(--lift-lg)}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(var(--c-blue-rgb),.32),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .26s var(--ease-pop)}
.sf-user:hover .avatar,.userbox:hover .avatar{transform:var(--lift-md)}

/* 主题切换：分段控件（状态纯 CSS 跟随 html[data-theme]，无时序问题） */
.theme-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:var(--seg-bg);border:1px solid var(--hair);position:relative}
.theme-seg button{position:relative;z-index:1;width:34px;height:26px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-pill);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  opacity:.42;transition:opacity .25s var(--ease),color .25s var(--ease),transform .26s var(--ease-pop);
  color:var(--text)}
.theme-seg button:hover{opacity:.85;transform:var(--lift-lg)}
.theme-seg .thumb{position:absolute;top:3px;left:3px;width:34px;height:26px;border-radius:var(--r-pill);
  background:var(--seg-thumb);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .34s cubic-bezier(.32,.72,.28,1)}
html[data-theme="light"] .theme-seg button[data-th="light"],
html[data-theme="dark"] .theme-seg button[data-th="dark"]{opacity:1}
html[data-theme="dark"] .theme-seg .thumb{transform:translateX(36px)}

/* ------------------------------------------------------------
   4. 通用组件
   ------------------------------------------------------------ */
.grid{display:grid;gap:16px}
.cards6{grid-template-columns:repeat(6,1fr)}
.cards4{grid-template-columns:repeat(4,1fr)}
.cards3{grid-template-columns:repeat(3,1fr)}
.cards2{grid-template-columns:1fr 1fr}
.dash-pair>.card{height:100%;min-height:360px;display:flex;flex-direction:column}
.dash-pair>.card>h3{flex:none}
.dash-pair>.card>:last-child{margin-bottom:0}
.dashboard-compare-grid{grid-auto-rows:minmax(400px,auto)}
.equal-pair{align-items:stretch}
.equal-pair>.card{height:100%;display:flex;flex-direction:column}

/* 数据概览 5 张核心卡：宽屏等宽、平板 2+2+1(末张通栏) */
.dashboard-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}

/* 评价三列：优势 / 短板 / 建议统一成等高浅底卡 */
.eval-grid{align-items:stretch}
.eval-grid>div{height:100%;padding:14px 15px;border-radius:var(--r-md);
  border:1px solid var(--hair);background:var(--fill-2);min-width:0}
.eval-grid .ev-list{margin-top:8px}

/* 人才盘点首屏：九宫格与右侧两张榜单一屏对齐 */
.talent-top{height:500px;align-items:stretch}
.talent-top>.card{height:100%;display:flex;flex-direction:column;min-height:0}
.talent-side{height:100%;min-height:0;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.talent-side>.card{min-height:0;height:100%;display:flex;flex-direction:column;margin-bottom:0!important}
.talent-scroll{flex:1;min-height:0;overflow:auto}
.talent-detail{margin-top:16px}
.talent-detail-scroll{overflow-x:auto}
.talent-detail-scroll>.tbl{min-width:1040px}

.card{border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden;
  transform-origin:center;will-change:transform}
.card::after{content:"";position:absolute;top:0;left:-100%;width:55%;height:100%;pointer-events:none;
  background:var(--shine);transform:skewX(-25deg);transition:left .55s ease}
.card:hover::after{left:160%;transition:left .75s ease}
/* 悬浮放大：卡片是内容载体，幅度克制（1.008），避免整页晃动 */
.card:hover{border-color:var(--glass-edge);box-shadow:var(--glass-inset),var(--glass-shadow-hi);
  transform:var(--lift-xs)}
.card h3{font-size:var(--fs-md);font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;letter-spacing:-.1px}

/* SVG 图标排版（替代 emoji） */
.h-ic .h-t{display:inline-flex;align-items:center;gap:7px;min-width:0}
.h-ic svg{flex-shrink:0;opacity:.9}
.stars{display:inline-flex;align-items:center;gap:1.5px;vertical-align:middle}
.stars svg{display:block}
.keymark{display:inline-flex;align-items:center;vertical-align:-2px;color:var(--c-violet)}
.chip svg{flex-shrink:0}
.btn svg{flex-shrink:0}

/* 指标卡 */
.stat{border-radius:var(--r-lg);padding:18px;overflow:hidden;--stat-rgb:var(--c-blue-rgb);
  transform-origin:center;will-change:transform}
/* 光晕收敛到 .13：装饰不能盖过数字本身 */
.stat::before{content:"";position:absolute;top:-60%;left:-25%;width:120%;height:150%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--stat-rgb),.13),transparent 72%)}
.stat:hover{transform:var(--lift-md);box-shadow:var(--glass-inset),var(--glass-shadow-hi);
  border-color:var(--glass-edge)}
.stat .k{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:9px;display:flex;align-items:center;
  gap:6px;position:relative;font-weight:500}
/* 数值是核心内容：实色 + Semibold，不用渐变裁切（强光下渐变文字会发灰） */
.stat .v{font-size:27px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  position:relative;color:var(--text);line-height:1.15}
.stat .d{font-size:var(--fs-sm);margin-top:7px;color:var(--text-2);position:relative}
.stat .d b.up{color:var(--c-red)}   /* 中国市场惯例：涨=红 */
.stat .d b.down{color:var(--c-green)}
.stat.t-teal{--stat-rgb:var(--c-teal-rgb)} .stat.t-amber{--stat-rgb:var(--c-amber-rgb)}
.stat.t-red{--stat-rgb:var(--c-red-rgb)}   .stat.t-violet{--stat-rgb:var(--c-violet-rgb)}
.stat.t-green{--stat-rgb:var(--c-green-rgb)}

/* 按钮：一律胶囊，圆角随高度自适应 */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--btn-fg);
  font-size:calc(var(--fs-base) * .93);font-weight:500;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),
    box-shadow .26s var(--ease),transform .26s var(--ease-pop)}
.btn:hover{border-color:var(--glass-edge);transform:var(--lift-md);
  box-shadow:0 8px 22px rgba(20,24,40,.14)}
html[data-theme="dark"] .btn:hover{box-shadow:0 8px 24px rgba(0,0,0,.55)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--pill-bg);border-color:transparent;color:var(--pill-fg);font-weight:600;
  box-shadow:0 6px 18px rgba(20,24,40,.18)}
.btn.primary:hover{background:var(--pill-bg-hi);box-shadow:0 12px 30px rgba(20,24,40,.26)}
html[data-theme="dark"] .btn.primary{box-shadow:0 6px 22px rgba(0,0,0,.55)}
.btn.danger{color:var(--c-red);border-color:rgba(var(--c-red-rgb),.32)}
.btn.danger:hover{background:rgba(var(--c-red-rgb),.1);border-color:rgba(var(--c-red-rgb),.5)}
.btn.sm{padding:5px 12px;font-size:var(--fs-sm);border-radius:var(--r-pill)}
.btn.ghost{border-color:transparent;background:rgba(var(--c-blue-rgb),.12);color:var(--c-blue);font-weight:600}
.btn.ghost:hover{background:rgba(var(--c-blue-rgb),.2);border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* 表格 */
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:calc(var(--fs-base) * .95)}
.tbl th{text-align:left;font-size:var(--fs-xs);color:var(--text-2);font-weight:700;letter-spacing:.3px;
  padding:10px;border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--hair-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td,.tbl tr:hover td{background:var(--fill)}
.tbl tr.selected td{background:rgba(var(--c-blue-rgb),.09)}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right}
.tbl th.num{text-align:right}

/* 标签：胶囊 */
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);
  font-weight:600;border:1px solid transparent;white-space:nowrap;line-height:1.5}
.tag.blue{background:rgba(var(--c-blue-rgb),.13);color:var(--c-blue);border-color:rgba(var(--c-blue-rgb),.18)}
.tag.teal{background:rgba(var(--c-teal-rgb),.13);color:var(--c-teal);border-color:rgba(var(--c-teal-rgb),.18)}
.tag.amber{background:rgba(var(--c-amber-rgb),.14);color:var(--c-amber);border-color:rgba(var(--c-amber-rgb),.2)}
.tag.red{background:rgba(var(--c-red-rgb),.13);color:var(--c-red);border-color:rgba(var(--c-red-rgb),.18)}
.tag.green{background:rgba(var(--c-green-rgb),.13);color:var(--c-green);border-color:rgba(var(--c-green-rgb),.18)}
.tag.violet{background:rgba(var(--c-violet-rgb),.13);color:var(--c-violet);border-color:rgba(var(--c-violet-rgb),.18)}
.tag.gray{background:var(--fill);color:var(--text-2);border-color:var(--hair)}
.money{font-variant-numeric:tabular-nums}

/* 表单 */
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.toolbar .sp{flex:1}
/* 筛选类输入框：胶囊，圆角随高度自适应 */
input.inp,select.inp{padding:9px 15px;border:1px solid var(--input-line);border-radius:var(--r-pill);
  font-size:calc(var(--fs-base) * .93);background:var(--input-bg);color:var(--text);outline:none;min-width:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .3s var(--ease)}
input.inp::placeholder{color:var(--text-3)}
input.inp:focus,select.inp:focus{border-color:rgba(var(--c-blue-rgb),.55);box-shadow:0 0 0 4px var(--focus)}
select.inp{cursor:pointer;appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.inp option{background:var(--bg);color:var(--text)}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;color:var(--text-2);margin-bottom:6px;font-weight:600;letter-spacing:.3px}
.field .inp{width:100%;border-radius:var(--r-sm)}
.empty{padding:40px;text-align:center;color:var(--text-2);font-size:13px}
hr,h1,h2,h3,h4{font-weight:700}

/* ------------------------------------------------------------
   4b. 材质层级修正：Liquid Glass 不堆叠
   玻璃是悬浮于内容之上的独立功能层，不能层层叠加。
   规则：一旦控件落在玻璃容器内，系统自动将其转为填充材质——
   去掉模糊、改用不透明填充与实色描边，避免"玻璃套玻璃"的视觉混乱。
   ------------------------------------------------------------ */
:is(.sidebar,.card,.sc-panel,.aibar,.ask-panel,.modal,.login-card)
  :is(.btn,.inp,.chip,.tag,.ask-form,.ask-send,.ask-chip,.sf-user,.sf-out,.sf-role,.sf-row,
      .nav a,.theme-seg,.fs-seg,.tnode,.nb-cell,.card,.demo-acc button,.avatar){
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* 玻璃上的次级按钮：白玻璃叠白会看不见，改用中性灰填充拉开层次 */
:is(.card,.sc-panel,.aibar,.ask-panel,.modal,.login-card,.sidebar)
  .btn:not(.primary):not(.danger):not(.ghost){
  background:var(--fill-glass);border-color:var(--hair);
}
:is(.card,.sc-panel,.aibar,.ask-panel,.modal,.login-card,.sidebar)
  .btn:not(.primary):not(.danger):not(.ghost):hover{
  background:var(--fill-glass-2);border-color:var(--hair);
}
/* 玻璃上的输入框：同样降为填充材质 */
:is(.card,.sc-panel,.aibar,.ask-panel,.modal,.login-card,.sidebar) :is(input.inp,select.inp,textarea){
  background:var(--fill-glass);border-color:var(--hair);
}
/* 顶栏询问框是主视觉焦点，用高不透明玻璃而非灰填充，保持胶囊的呼吸感 */
.aibar .ask-form{background:var(--glass-strong);border-color:var(--glass-line)}

/* 弹窗 */
.mask{position:fixed;inset:0;background:var(--mask);z-index:100;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.modal{background:var(--glass-strong);border-radius:var(--r-xl);width:520px;max-width:94vw;max-height:88vh;overflow:auto;
  padding:26px;box-shadow:var(--glass-shadow-hi),var(--glass-inset);animation:pop .28s var(--ease-pop)}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}}
.modal h2{font-size:var(--fs-lg);margin-bottom:18px;letter-spacing:-.2px;font-weight:700;text-align:left}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* Toast */
#toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:10px 22px;border-radius:var(--r-pill);
  font-size:calc(var(--fs-base) * .93);font-weight:500;
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--glass-shadow);animation:tin .28s var(--ease-pop)}
#chart-tip{position:fixed;z-index:300;display:none;pointer-events:none;white-space:pre-line;
  width:max-content;max-width:calc(100vw - 24px);overflow-wrap:anywhere;line-height:1.55;
  padding:5px 10px;border-radius:var(--r-xs);font-size:calc(var(--fs-base) * .86);font-weight:600;
  background:var(--toast-bg);color:var(--toast-fg);box-shadow:var(--shadow-sm)}
.toast.err{background:rgba(var(--c-red-rgb),.9)}
@keyframes tin{from{transform:translateY(-10px);opacity:0}}

/* ------------------------------------------------------------
   5. 登录页
   ------------------------------------------------------------ */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  z-index:1;padding:24px}
.login-icp{margin-top:16px;font-size:var(--fs-xs);color:var(--text-3);text-align:center}
.login-icp a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.login-icp a:hover{color:var(--text-2);text-decoration:underline}
.login-card{width:412px;max-width:94vw;border-radius:var(--r-xl);padding:38px 34px;background:var(--glass-strong)}
.login-card .lg{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-card .lg .mark{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(145deg,var(--c-blue),var(--c-teal));
  box-shadow:0 8px 22px rgba(var(--c-blue-rgb),.38),inset 0 1px 0 rgba(255,255,255,.45)}
.login-card h1{font-size:20px;letter-spacing:-.3px}
.login-card p{color:var(--text-2);font-size:12.5px;margin:6px 0 26px}
.login-card .btn.primary{width:100%;justify-content:center;padding:12px;font-size:14px}
.login-password{position:relative}
.login-password .inp{padding-right:48px}
.login-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--text-3);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease)}
.login-password-toggle:hover{color:var(--text);background:var(--fill-2)}
.login-password-toggle:focus-visible{outline:none;color:var(--c-blue);
  box-shadow:0 0 0 3px var(--focus)}
.login-captcha{margin:4px 0 14px}
.login-cap-track{position:relative;height:44px;border-radius:var(--r-pill);overflow:hidden;
  border:1px solid var(--input-line);background:var(--fill-2);user-select:none;touch-action:none}
.login-cap-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--r-pill);
  background:rgba(var(--c-blue-rgb),.12);transition:width .08s linear}
.login-cap-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);color:var(--text-3);pointer-events:none}
.login-cap-knob{position:absolute;left:0;top:4px;width:44px;height:34px;border:0;border-radius:var(--r-pill);
  background:var(--pill-bg);color:var(--pill-fg);display:flex;align-items:center;justify-content:center;
  cursor:grab;box-shadow:0 3px 10px rgba(20,24,40,.2);touch-action:none}
.login-cap-track.loading .login-cap-knob{cursor:progress;opacity:.55}
.login-cap-knob svg{transform:rotate(90deg)}
.login-cap-track.dragging .login-cap-knob{cursor:grabbing}
.login-cap-track.ok{border-color:rgba(var(--c-green-rgb),.45)}
.login-cap-track.ok .login-cap-fill{width:100%;background:rgba(var(--c-green-rgb),.15)}
.login-cap-track.ok .login-cap-text{color:var(--c-green);font-weight:700}
.login-cap-track.ok .login-cap-knob{background:var(--c-green)}
.login-mfa{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:9px}
.login-mfa[hidden]{display:none}
.login-mfa label{font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.login-mfa .inp{text-align:center;letter-spacing:.35em;font-size:20px;font-variant-numeric:tabular-nums}
.demo-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.demo-acc button{font-size:var(--fs-xs);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--hair);
  background:var(--fill);cursor:pointer;color:var(--text-2);font-family:inherit;font-weight:500;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),
    transform .26s var(--ease-pop)}
.demo-acc button:hover{border-color:rgba(var(--c-blue-rgb),.4);color:var(--c-blue);
  background:rgba(var(--c-blue-rgb),.08);transform:var(--lift-lg)}
/* 公网链路上不摆演示入口，只留一句提示（本地调试看不到这条） */
.demo-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.7;text-align:center}
.login-theme{position:absolute;top:22px;right:24px;z-index:3}

/* ------------------------------------------------------------
   6. 组织树
   ------------------------------------------------------------ */
.dept-plan-roles{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;align-items:center}
.dept-plan-roles span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-pill);
  background:var(--fill-2);border:1px solid var(--hair);font-size:var(--fs-xs);color:var(--text-2)}
.dept-plan-roles b{font-weight:700;color:var(--text)}
.dept-plan-roles em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);margin-left:2px}
.tree ul{list-style:none;padding-left:24px;border-left:1px dashed var(--hair-2);margin-left:14px}
.tree>ul{border-left:none;margin-left:0;padding-left:0}
/* 分组列表项：圆角取面板内块层，与外部容器同心 */
.tnode{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;margin:3px 0;
  border:1px solid transparent;transform-origin:left center;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .26s var(--ease-pop)}
.tnode:hover{background:var(--fill);border-color:var(--hair);transform:var(--lift-sm)}
.tnode.sel{background:rgba(var(--c-blue-rgb),.12);border-color:rgba(var(--c-blue-rgb),.28)}
.tnode .dept-badge{width:32px;height:32px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);flex-shrink:0}
.tnode b{font-size:13.5px;font-weight:600}
.tnode .meta{font-size:var(--fs-xs);color:var(--text-2)}

/* ------------------------------------------------------------
   8. 人才九宫格
   ------------------------------------------------------------ */
.ninebox{display:grid;grid-template-columns:70px repeat(3,1fr);grid-template-rows:repeat(3,90px) 34px;gap:9px}
.nb-cell{border-radius:var(--r-md);padding:11px 13px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;border:1px solid var(--nb-line,var(--hair));
  transition:transform .3s var(--ease-pop),box-shadow .3s var(--ease),border-color .25s var(--ease);
  position:relative;overflow:hidden;background:var(--nb-bg,rgba(var(--c-blue-rgb),.1))}
.nb-cell::before{content:"";position:absolute;top:-50%;left:-20%;width:110%;height:140%;
  background:radial-gradient(closest-side,var(--nb-glow,transparent),transparent 75%);pointer-events:none}
.nb-cell:hover{transform:var(--lift-md) translateY(-2px);box-shadow:var(--glass-shadow)}
.nb-cell.sel{border-color:var(--nb-fg,var(--c-blue));box-shadow:0 0 0 3px rgba(var(--c-blue-rgb),.18),var(--glass-shadow)}
.nb-cell .cnt{font-size:23px;font-weight:700;letter-spacing:-.5px;color:var(--nb-fg);position:relative;line-height:1.15}
.nb-cell .lbl{font-size:var(--fs-xs);position:relative;font-weight:600}
.nb-axis{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--text-2);
  writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:1px}
.nb-xaxis{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--text-2);
  grid-column:2/5;letter-spacing:1px}
/* 九宫格配色（白天 / 夜晚自动切换） */
.nb-h-h{--nb-fg:var(--c-violet);--nb-bg:rgba(var(--c-violet-rgb),.12);--nb-line:rgba(var(--c-violet-rgb),.22);--nb-glow:rgba(var(--c-violet-rgb),.2)}
.nb-h-m{--nb-fg:var(--c-blue);  --nb-bg:rgba(var(--c-blue-rgb),.12);  --nb-line:rgba(var(--c-blue-rgb),.22);  --nb-glow:rgba(var(--c-blue-rgb),.2)}
.nb-h-l{--nb-fg:var(--c-teal);  --nb-bg:rgba(var(--c-teal-rgb),.12);  --nb-line:rgba(var(--c-teal-rgb),.22);  --nb-glow:rgba(var(--c-teal-rgb),.2)}
.nb-m-h{--nb-fg:var(--c-green); --nb-bg:rgba(var(--c-green-rgb),.12); --nb-line:rgba(var(--c-green-rgb),.22); --nb-glow:rgba(var(--c-green-rgb),.2)}
.nb-m-m{--nb-fg:var(--c-slate); --nb-bg:rgba(var(--c-slate-rgb),.11); --nb-line:rgba(var(--c-slate-rgb),.2);  --nb-glow:rgba(var(--c-slate-rgb),.18)}
.nb-m-l{--nb-fg:var(--c-gray);  --nb-bg:rgba(var(--c-gray-rgb),.11);  --nb-line:rgba(var(--c-gray-rgb),.2);   --nb-glow:rgba(var(--c-gray-rgb),.16)}
.nb-l-h{--nb-fg:var(--c-amber); --nb-bg:rgba(var(--c-amber-rgb),.13); --nb-line:rgba(var(--c-amber-rgb),.24); --nb-glow:rgba(var(--c-amber-rgb),.22)}
.nb-l-m{--nb-fg:var(--c-amber); --nb-bg:rgba(var(--c-amber-rgb),.1);  --nb-line:rgba(var(--c-amber-rgb),.2);  --nb-glow:rgba(var(--c-amber-rgb),.18)}
.nb-l-l{--nb-fg:var(--c-red);   --nb-bg:rgba(var(--c-red-rgb),.11);   --nb-line:rgba(var(--c-red-rgb),.22);   --nb-glow:rgba(var(--c-red-rgb),.2)}

/* ------------------------------------------------------------
   9. 沙盘推演
   ------------------------------------------------------------ */
.sb-layout{display:grid;grid-template-columns:392px 1fr;gap:16px;align-items:start}
.sb-dept-row{display:grid;grid-template-columns:1fr 58px 58px 58px;gap:6px;align-items:center;margin-bottom:6px}
.sb-dept-row .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-dept-row input{padding:6px 4px;text-align:center;border:1px solid var(--input-line);border-radius:var(--r-xs);
  width:100%;font-size:var(--fs-sm);background:var(--input-bg);color:var(--text);outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.sb-dept-row input:focus{border-color:rgba(var(--c-blue-rgb),.55);box-shadow:0 0 0 3px var(--focus)}
.slider-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.slider-row label{width:96px;font-size:12.5px;color:var(--text-2);flex-shrink:0}
.slider-row output{width:56px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
input[type=range]{flex:1;appearance:none;height:5px;border-radius:var(--r-pill);background:var(--fill-2);outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--seg-thumb);border:1px solid var(--hair);cursor:pointer;
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-theme="dark"] input[type=range]::-webkit-slider-thumb{background:#f5f5f7;border-color:transparent}
.delta-up{color:var(--c-red);font-weight:700}
.delta-down{color:var(--c-green);font-weight:700}

/* ------------------------------------------------------------
   10. 高管大屏（随主题切换的驾驶舱）
   ------------------------------------------------------------ */
.screen{position:relative;z-index:1;min-height:100vh;padding:24px 28px 40px;color:var(--text);
  transition:background-color .45s ease,color .45s ease}
.screen .sc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
/* 大屏主标题：实色保证远距离可读，品牌渐变改作下方的短装饰条 */
.screen .sc-top h1{font-size:26px;letter-spacing:5px;font-weight:700;color:var(--text);
  position:relative;padding-bottom:9px}
.screen .sc-top h1::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:3px;
  border-radius:var(--r-pill);background:linear-gradient(90deg,var(--c-blue),var(--c-teal))}
.screen .sc-top .clock{font-size:15px;color:var(--text-2);font-variant-numeric:tabular-nums;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--fill);border:1px solid var(--hair)}
.screen .back{color:var(--text-2);cursor:pointer;font-size:calc(var(--fs-base) * .93);padding:8px 16px;
  border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--fill);white-space:nowrap;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),
    transform .26s var(--ease-pop)}
.screen .back:hover{border-color:rgba(var(--c-blue-rgb),.45);color:var(--c-blue);transform:var(--lift-md)}
.sc-grid{display:grid;gap:14px}
.sc-stats{grid-template-columns:repeat(6,1fr)}
.sc-panel{border-radius:var(--r-lg);padding:18px}
.sc-stat{--stat-rgb:var(--c-blue-rgb);position:relative;overflow:hidden}
.sc-stat.glow{--stat-rgb:var(--c-teal-rgb)}
.sc-stat.glow::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--c-teal),transparent)}
.sc-stat .k{font-size:var(--fs-xs);color:var(--text-2);margin-bottom:9px;letter-spacing:1.2px;
  position:relative;font-weight:600}
.sc-stat .v{font-size:31px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  letter-spacing:-.8px;position:relative;line-height:1.15}
.sc-stat .v small{font-size:13px;color:var(--text-3);font-weight:500;margin-left:4px;letter-spacing:0}
/* 辉光收敛，保证数字笔画不发糊 */
.sc-stat.glow .v{text-shadow:0 0 16px rgba(var(--c-teal-rgb),.45)}
.sc-rows{grid-template-columns:5fr 4fr 3fr}
.sc-mid{grid-template-columns:1fr 1fr}
.sc-panel h4{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:14px;letter-spacing:2px;display:flex;
  justify-content:space-between;align-items:center;font-weight:700;text-align:left}
.sc-panel h4::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c-teal);
  flex-shrink:0;margin-right:8px;order:-1}
.fun-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.fun-row .lb{width:52px;font-size:var(--fs-sm);color:var(--text-2);text-align:right;flex-shrink:0;font-weight:500}
.fun-row .bar{height:16px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--c-blue),var(--c-teal));min-width:3px}
.fun-row .ct{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.mini-nine{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mini-nine div{border-radius:var(--r-md);padding:9px;text-align:center;font-size:var(--fs-xs);font-weight:700;
  border:1px solid var(--hair);
  transition:transform .26s var(--ease-pop),box-shadow .26s var(--ease)}
.mini-nine div:hover{transform:var(--lift-md);box-shadow:var(--shadow-sm)}

/* ------------------------------------------------------------
   11. 主题切换过渡（液态揭幕）
   ------------------------------------------------------------ */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.theme-anim *{transition:background-color .45s ease,border-color .45s ease,color .45s ease}

/* ------------------------------------------------------------
   11b. 数据维护：可编辑表格
   表头吸顶 + 行内控件，编辑态用左侧色条标记，不改动行高以免整表跳动。
   ------------------------------------------------------------ */
.dt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dt-tab{padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--btn-line);
  background:var(--btn-bg);color:var(--btn-fg);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),transform .26s var(--ease-pop)}
.dt-tab:hover{transform:var(--lift-md)}
.dt-tab.active{background:var(--pill-bg);color:var(--pill-fg);border-color:transparent}
.dt-tab.dt-add{border-style:dashed;opacity:.7;flex:none}
.dt-tab.dt-add:hover{opacity:1}
/* 右键隐藏的表：管理员的恢复入口行 */
.dt-hid{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-8px 0 14px;
  font-size:var(--fs-xs);color:var(--text-3)}
/* 通用右键菜单 */
#ctx-menu{position:fixed;z-index:1200;min-width:150px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:var(--card);border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:var(--glass-shadow),var(--shadow-sm);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);animation:ctxIn .16s var(--ease)}
@keyframes ctxIn{from{opacity:0;transform:scale(.94) translateY(-3px)}to{opacity:1;transform:none}}
#ctx-menu button{padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--text);
  font-size:var(--fs-sm);font-weight:500;text-align:left;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:7px}
#ctx-menu button svg{flex:none}
#ctx-menu button:hover{background:var(--fill-2)}
#ctx-menu button.danger{color:var(--c-red)}
.dt-note{margin-top:14px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.9}
.chip.amber{background:rgba(var(--c-amber-rgb),.14);color:var(--c-amber);border-color:rgba(var(--c-amber-rgb),.2)}
.chip.blue{background:rgba(var(--c-blue-rgb),.14);color:var(--c-blue);border-color:rgba(var(--c-blue-rgb),.2)}

.dt-pager{display:flex;align-items:center;gap:8px;flex-shrink:0}

.hint{font-size:var(--fs-xs);color:var(--text-3);line-height:1.85;margin:8px 0}
.hint b{color:var(--text-2)}

/* ---- 导入：列映射 ---- */
.imp{display:flex;flex-direction:column;gap:10px}
.imp-pick{display:flex;align-items:center;gap:12px}
.imp-pick .btn{cursor:pointer}
.imp-file-name{font-size:var(--fs-sm);color:var(--text-2)}
.imp-sheet{padding:3px 24px 3px 8px !important;font-size:var(--fs-xs);height:auto;width:auto;min-width:0}
.imp-ok{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--c-green);
  padding:9px 12px;border-radius:var(--r-sm);background:rgba(var(--c-green-rgb),.09)}
.imp-un{border:1px solid rgba(var(--c-amber-rgb),.28);background:rgba(var(--c-amber-rgb),.07);
  border-radius:var(--r-md);padding:12px 14px}
.imp-un-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:var(--fs-sm);color:var(--text);margin-bottom:10px}
.imp-un-h svg{color:var(--c-amber);vertical-align:-3px;margin-right:3px}
.imp-un-list{display:flex;flex-direction:column;gap:4px;max-height:20vh;overflow:auto}
.imp-un-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,1.6fr) auto auto;
  gap:12px;align-items:center;padding:3px 0}
/* 已忽略的列：不再用告警色，安静地待在下面等人想起来恢复 */
.imp-ign{border-color:var(--border);background:var(--fill-2)}
.imp-ign .imp-un-h{color:var(--text-3);margin-bottom:8px}
.imp-ign .imp-un-h svg{color:var(--text-3)}
.imp-ign .imp-un-list{max-height:14vh}
.imp-ign .imp-k{color:var(--text-3);text-decoration:line-through}
.imp-sample{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 自动判出来的列类型，让人在建字段之前就能看出日期/数字有没有判对 */
.tp{display:inline-block;margin-left:6px;padding:0 6px;font-style:normal;
  font-size:var(--fs-xs);line-height:1.5;border-radius:var(--r-pill);
  color:var(--c-blue);background:rgba(var(--c-blue-rgb),.12)}
.tp-off{color:var(--text-3);background:var(--fill)}
.imp-map{margin-top:6px}
.imp-meta{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);
  padding:9px 13px;border-radius:var(--r-md);background:var(--fill-2);margin-bottom:12px}
.imp-meta svg{color:var(--c-blue)}
.imp-grid{display:grid;gap:6px;max-height:32vh;overflow:auto;padding-right:4px}
.imp-row{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;align-items:center}
.imp-row-h{font-size:var(--fs-xs);color:var(--text-3);font-weight:600;padding-bottom:2px}
.imp-k{font-size:var(--fs-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-sel{min-width:0}
.imp-opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--hair)}
.imp-opt label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--text-3);font-weight:600}
.imp-opt select{font-weight:500;color:var(--text)}
.imp-err{display:flex;flex-direction:column;gap:6px;max-height:36vh;overflow:auto;
  padding:12px 14px;border-radius:var(--r-md);background:rgba(var(--c-red-rgb),.08);
  border:1px solid rgba(var(--c-red-rgb),.22);color:var(--c-red);font-size:var(--fs-sm)}
.imp-err-title{font-size:var(--fs-md);font-weight:700;color:var(--c-red);margin-bottom:8px}

.exp-btns{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.exp-btns .btn{justify-content:flex-start;padding:12px 16px}

/* ---- 系统设置 · 版式与 AI 模型接入 ----
   两列卡片默认 stretch，本来就会等高；此前在容器上显式写了 align-items:start，
   把拉伸关掉，两卡便各自按内容收高，底边参差不齐。这里回归等高，
   并让卡片内部走纵向 flex：标题固定在上，末行说明用 set-foot 沉底。
   于是不论内容长短，左右两卡的标题基线、内边距与底边都严格对齐。 */
.set-page{display:grid;gap:16px}
.security-warning{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:11px 14px;border-radius:var(--r-md);
  border:1px solid rgba(var(--c-red-rgb),.25);background:rgba(var(--c-red-rgb),.08);
  color:var(--c-red);font-size:var(--fs-sm);font-weight:600}
.security-warning span{display:inline-flex;align-items:center;gap:7px}
.security-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.security-grid>div{padding:11px 12px;border-radius:var(--r-sm);background:var(--fill-2);
  display:flex;flex-direction:column;gap:5px}
.security-grid span{font-size:var(--fs-xs);color:var(--text-3)}
.security-grid b{font-size:var(--fs-sm);color:var(--text)}
.security-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.security-panel{border-top:1px solid var(--hair);padding-top:14px}
.security-panel h4{font-size:var(--fs-md);margin:0 0 8px}
.mfa-secret{padding:11px 12px;border-radius:var(--r-sm);background:var(--fill-2);
  font-size:var(--fs-xs);line-height:1.8;word-break:break-all;margin-bottom:10px}
.mfa-secret code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text)}
@media(max-width:720px){.security-grid{grid-template-columns:1fr}}
.card-col{display:flex;flex-direction:column}
.card-col>.grow{flex:1;min-height:0}
/* 标题行统一高度：AI 卡片标题右侧挂状态标签，租户卡片标题只有文字，
   两者高度差会把标题文字基线顶偏几像素。锁一个 min-height 后文字垂直居中，基线即对齐。 */
.set-page .card h3{min-height:28px}
.set-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.set-stat{background:var(--fill);border-radius:var(--r-md);padding:12px 14px;line-height:1.35}
.set-stat b{display:block;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums}
.set-stat span{font-size:var(--fs-xs);color:var(--text-2)}
.set-foot{margin-top:auto;padding-top:16px;font-size:var(--fs-sm);line-height:2;color:var(--text-2)}
.set-foot code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-xs);
  background:var(--fill);padding:1px 6px;border-radius:var(--r-xs);word-break:break-all;
  -webkit-user-select:all;user-select:all}

.ai-form{display:grid;gap:12px}
.ai-form .field{margin:0}
.ai-key{display:flex;gap:8px;align-items:center}
.ai-key .inp{flex:1;min-width:0}
.ai-key>.btn{flex-shrink:0;padding:0 11px;height:36px}
.ai-adv{border-radius:var(--r-md);background:var(--fill);padding:0 14px}
.ai-adv>summary{cursor:pointer;list-style:none;padding:10px 0;display:flex;align-items:center;
  font-size:var(--fs-sm);color:var(--text-2)}
.ai-adv>summary::-webkit-details-marker{display:none}
.ai-adv>summary::after{content:"";width:6px;height:6px;margin-left:auto;flex-shrink:0;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.ai-adv[open]>summary::after{transform:rotate(-135deg)}
.ai-adv>div{padding-bottom:12px}
.ai-msg{margin-top:12px;font-size:var(--fs-sm);line-height:1.8;color:var(--text-2);word-break:break-word}
.ai-msg:empty{display:none}
.ai-msg.ok{color:var(--c-green)}
.ai-msg.err{color:var(--c-red)}
.ai-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ---- 系统设置 · 外部系统接入 ---- */
.sync-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 8px;
  font-size:var(--fs-md)}
.code-box{margin-top:18px;border-top:1px solid var(--hair);padding-top:14px}
.code-box summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--c-blue);
  padding:4px 0;list-style:none}
.code-box summary::-webkit-details-marker{display:none}
.code-box summary::before{content:"› ";display:inline-block;transition:transform .2s var(--ease)}
.code-box[open] summary::before{content:"⌄ "}
.code-box pre{margin-top:10px;padding:14px 16px;border-radius:var(--r-md);background:var(--fill-2);
  font-size:var(--fs-xs);line-height:1.85;color:var(--text-2);overflow:auto;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre.tk-box{user-select:all;cursor:text;color:var(--text);font-size:var(--fs-sm);
  background:rgba(var(--c-blue-rgb),.08);border:1px solid rgba(var(--c-blue-rgb),.2)}

/* ------------------------------------------------------------
   11b. 表头（字段）管理
   表头本身可点：列名右边挂一个铅笔，点开就是字段设置。
   「管理表头」则是全字段总览，负责排序与增删。
   ------------------------------------------------------------ */
table.dt th .th-lb{vertical-align:middle}
.th-cog{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;
  width:20px;height:20px;padding:0;border-radius:var(--r-pill);cursor:pointer;vertical-align:-3px;
  border:1px solid transparent;background:transparent;color:var(--text-3);opacity:0;
  transition:opacity .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
table.dt th:hover .th-cog,.th-cog:focus-visible{opacity:1}
.th-cog:hover{background:var(--fill);color:var(--c-blue);border-color:var(--hair)}
@media (hover:none){.th-cog{opacity:.7}}

/* 列头漏斗筛选：默认半隐，hover 或已启用筛选时亮起 */
.th-flt{display:inline-flex;align-items:center;justify-content:center;margin-left:3px;
  width:18px;height:18px;padding:0;border-radius:var(--r-pill);cursor:pointer;vertical-align:-2px;
  border:1px solid transparent;background:transparent;color:var(--text-3);opacity:.45;
  transition:opacity .16s var(--ease),background .16s var(--ease),color .16s var(--ease)}
table.dt th:hover .th-flt,.th-flt:focus-visible{opacity:1}
.th-flt:hover{background:var(--fill);color:var(--c-blue);border-color:var(--hair)}
.th-flt.on{opacity:1;color:var(--c-blue);background:rgba(var(--c-blue-rgb),.12)}
#flt-pop{position:fixed;z-index:120;width:250px;padding:10px;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-lg,0 18px 50px rgba(0,0,0,.18));
  display:flex;flex-direction:column;gap:8px}
#flt-pop .flt-all{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-2);cursor:pointer}
.flt-list{max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.flt-it{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.flt-it:hover{background:var(--fill)}
.flt-it span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flt-it em{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.flt-f{display:flex;align-items:center;gap:6px}

/* 拖拽填充柄（Excel 的「拉」）与填充高亮 */
#dt-fh{position:fixed;z-index:60;display:none;width:9px;height:9px;
  background:var(--c-blue);border:1.5px solid var(--card);border-radius:2px;cursor:crosshair;
  box-shadow:0 1px 4px rgba(0,0,0,.28)}
tr.fill-hit td{background:rgba(var(--c-blue-rgb),.09) !important}
body.dt-filling, body.dt-filling *{cursor:crosshair !important;user-select:none !important}

/* 字段设置弹层 */
.fm{display:flex;flex-direction:column;gap:14px}
textarea.inp{padding:10px 14px;border:1px solid var(--hair);border-radius:var(--r-sm);width:100%;
  font-family:inherit;font-size:var(--fs-sm);line-height:1.75;color:var(--text);
  background:var(--input-bg);outline:none;resize:vertical;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea.inp:focus{border-color:rgba(var(--c-blue-rgb),.55);box-shadow:0 0 0 3px var(--focus)}
.fm-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fm-2col .field{margin-bottom:0}
.fm-ro{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--input-line);background:var(--fill-2);font-size:var(--fs-sm);color:var(--text-2)}
.fm-sw{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:9px}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-2);cursor:pointer}
.ck input{width:15px;height:15px;accent-color:var(--c-blue);cursor:pointer;margin:0}
.fm-tip{font-size:var(--fs-xs);color:var(--text-3);line-height:1.9}
.fm-tip code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:1px 5px;border-radius:var(--r-xs);background:var(--fill-2);color:var(--text-2)}
.fm-danger{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);
  background:rgba(var(--c-red-rgb),.06);border:1px solid rgba(var(--c-red-rgb),.18)}
.fm-danger .btn{flex-shrink:0}
.fm-danger span{font-size:var(--fs-xs);color:var(--text-3);line-height:1.7}

/* 管理表头：字段清单 */
.fl{display:flex;flex-direction:column;gap:10px}
.fl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:var(--fs-sm);color:var(--text-2)}
.fl-list{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow:auto;padding-right:2px}
.fl-row{display:grid;grid-template-columns:26px minmax(72px,1.3fr) minmax(70px,1fr) auto auto;
  gap:10px;align-items:center;padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--fill-2);
  transition:border-color .16s var(--ease)}
.fl-row:hover{border-color:var(--input-line)}
.fl-row.is-hidden{opacity:.55}
.fl-no{font-size:var(--fs-xs);color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.fl-lb{font-size:var(--fs-sm);color:var(--text);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fl-star{color:var(--c-red);font-style:normal}
.fl-k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-xs);
  color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-tags{display:flex;gap:5px;flex-shrink:0}
.fl-tags .tag{padding:2px 8px}
.fl-act{display:flex;gap:2px;flex-shrink:0}
.icb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;
  border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;background:transparent;
  color:var(--text-3);transition:background .16s var(--ease),color .16s var(--ease)}
.icb:hover{background:var(--fill);color:var(--c-blue)}
.icb.danger:hover{color:var(--c-red);background:rgba(var(--c-red-rgb),.1)}
.icb:disabled{opacity:.25;cursor:not-allowed}
.icb:disabled:hover{background:transparent;color:var(--text-3)}
.fl-foot{font-size:var(--fs-xs);color:var(--text-3);line-height:1.85}
.fl-del{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;
  border:1px dashed var(--border);border-radius:var(--r-md);background:var(--fill-2)}
.fl-del-t{font-size:var(--fs-xs);color:var(--text-3);font-weight:600}

/* ------------------------------------------------------------
   12. 响应式
   ------------------------------------------------------------ */@media (max-width:1360px){.cards6{grid-template-columns:repeat(3,1fr)}.sc-stats{grid-template-columns:repeat(3,1fr)}
  .sc-rows{grid-template-columns:1fr 1fr}.sb-layout{grid-template-columns:1fr}}
@media (max-width:1024px){.cards4,.cards3{grid-template-columns:1fr 1fr}.sc-mid{grid-template-columns:1fr}
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-kpis>.card,.dashboard-kpis>.card:nth-child(n+5){grid-column:span 1}
  .dashboard-kpis>.card:last-child{grid-column:1/-1}
  .talent-top{height:auto}
  .talent-side{height:auto;grid-template-rows:auto auto}
  .talent-scroll{max-height:240px}
  .sidebar{display:flex;width:min(280px,calc(100vw - 24px));left:12px;top:12px;bottom:12px;z-index:60;
    transform:translateX(calc(-100% - 24px));transition:transform .28s var(--ease);
    background:var(--glass-strong);border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
    box-shadow:var(--glass-inset),var(--glass-shadow-hi)}
  .layout.nav-open .sidebar{transform:translateX(0)}
  .mobile-topbar{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:2px 2px 0}
  .mobile-topbar b{font-size:16px;letter-spacing:.3px}
  .mobile-menu-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
    border-radius:var(--r-pill);border:1px solid var(--glass-line);background:var(--glass-strong);
    color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:650;cursor:pointer;
    box-shadow:var(--glass-inset)}
  .mobile-nav-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;
    top:14px;right:14px;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--hair);
    background:var(--fill-2);color:var(--text-2);cursor:pointer;z-index:2}
  .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:55;border:0;padding:0;
    background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .24s ease}
  .layout.nav-open .mobile-nav-backdrop{opacity:1;pointer-events:auto}
  body.mobile-nav-lock{overflow:hidden}
  .main{margin-left:0;padding:12px 18px 40px}}
@media (max-width:720px){.cards6,.cards4,.cards3,.cards2{grid-template-columns:1fr}.sc-stats{grid-template-columns:1fr 1fr}
  .dashboard-kpis{grid-template-columns:minmax(0,1fr)}
  .dashboard-kpis>.card:last-child{grid-column:auto}
  .ninebox{grid-template-rows:repeat(3,84px) 30px}}

/* 双店对比 */
.dual-selects{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.dual-selects label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);
  color:var(--text-2);font-weight:700}
.dual-selects select{min-width:240px}
.dual-vslabel{align-self:flex-end;padding:9px 12px;font-size:var(--fs-xs);font-weight:900;color:var(--text-3)}
.dual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dual-side{padding:20px;border-radius:var(--r-lg);border:1px solid var(--glass-line);
  background:var(--glass);-webkit-backdrop-filter:blur(40px) saturate(180%);
  backdrop-filter:blur(40px) saturate(180%);box-shadow:var(--glass-inset),var(--glass-shadow)}
.dual-side::before{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--dual-color);margin-bottom:14px}
.dual-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dual-head h3{margin:2px 0 4px;font-size:calc(var(--fs-md) * 1.12)}
.dual-role{font-size:var(--fs-xs);font-weight:700;color:var(--dual-color)}
.dual-main{font-size:calc(var(--fs-base) * 2.15);font-weight:800;line-height:1.15;margin:20px 0 8px;
  font-variant-numeric:tabular-nums;color:var(--text)}
.dual-main small{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);margin-left:7px}
.dual-vs{font-size:var(--fs-sm);color:var(--text-2);padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--hair)}
.dual-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.dual-stats>div{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:var(--r-sm);background:var(--fill-2)}
.dual-stats span{font-size:var(--fs-xs);color:var(--text-3)}
.dual-stats b{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.dual-empty{display:flex;align-items:center;justify-content:center;min-height:360px}
@media (max-width:900px){.dual-grid{grid-template-columns:minmax(0,1fr)}
  .dual-selects select{min-width:0;width:100%}.dual-selects label{flex:1 1 100%}}

/* 数据质量 */
.audit-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.audit-filters label{display:flex;flex-direction:column;gap:5px;min-width:0}
.audit-filters span{font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.audit-table{max-height:calc(100vh - 330px)}
.audit-time,.audit-ip{font-size:var(--fs-xs);white-space:nowrap;font-variant-numeric:tabular-nums}
.audit-risks{display:flex;flex-direction:column;gap:7px}
.audit-risk{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--fill-2)}
.audit-risk.high{border-color:rgba(var(--c-red-rgb),.22);background:rgba(var(--c-red-rgb),.055)}
.audit-risk.medium{border-color:rgba(var(--c-amber-rgb),.22);background:rgba(var(--c-amber-rgb),.045)}
.audit-risk-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.audit-risk-main b{font-size:var(--fs-sm)}
.audit-risk-main span{font-size:var(--fs-xs);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-risk time{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.audit-ok{display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r-sm);
  background:rgba(var(--c-green-rgb),.07);color:var(--c-green);font-size:var(--fs-sm)}
@media(max-width:1100px){.audit-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.audit-filters{grid-template-columns:1fr}
  .audit-risk{grid-template-columns:38px minmax(0,1fr)}.audit-risk time{grid-column:2}}
.dq-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.dq-dup{border-top:1px solid var(--hair);padding-top:8px;margin-top:8px}
.dq-dup summary{cursor:pointer;font-size:var(--fs-sm);font-weight:700;color:var(--text-2)}
.dq-dup .tbl-wrap{margin-top:8px;max-height:240px}
.dq-kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair-2)}
.dq-kv:last-child{border-bottom:0}
.dq-kv span{font-size:var(--fs-sm);color:var(--text-2)}

/* ============================================================
   xgrid — Excel 式数据表格（数据维护页表格引擎）
   ============================================================ */
.xg{position:relative;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.xg-scroll{height:clamp(340px,60vh,860px);overflow:auto;outline:none}
.xg-scroll:focus-visible{box-shadow:var(--ring-sm)}
.xg-head{position:sticky;top:0;z-index:6;display:flex;background:var(--grid-solid);border-bottom:1px solid var(--border)}
.xg-hc{position:relative;display:flex;align-items:center;gap:4px;padding:0 8px;height:36px;
  font-weight:600;font-size:var(--fs-sm);color:var(--text-2);border-right:1px solid var(--border);
  white-space:nowrap;overflow:hidden;flex:none;user-select:none}
.xg-hc.num{justify-content:flex-end}
.xg-hc.xg-num{position:sticky;left:0;z-index:7;justify-content:center;background:var(--grid-solid);color:var(--text-3)}
.xg-hlb{cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.xg-hlb:hover{color:var(--c-blue)}
.xg-arr{font-style:normal;color:var(--c-blue);margin-left:2px}
.xg-flt,.xg-cog{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:1px solid transparent;border-radius:var(--r-xs);background:transparent;color:var(--text-2);
  cursor:pointer;padding:0;opacity:.9}
.xg-flt:hover,.xg-cog:hover{opacity:1;background:var(--fill-2);color:var(--c-blue);border-color:var(--border)}
.xg-flt.on{opacity:1;color:var(--c-blue);background:rgba(var(--c-blue-rgb),.1);border-color:rgba(var(--c-blue-rgb),.35)}
.xg-rs{position:absolute;right:-3px;top:0;width:7px;height:100%;cursor:col-resize;z-index:2}
.xg-rs:hover{background:rgba(var(--c-blue-rgb),.25)}
.xg-body{position:relative}
.xg-row{position:absolute;display:flex;left:0}
.xg-c{flex:none;height:100%;display:flex;align-items:center;padding:0 8px;font-size:var(--fs-sm);color:var(--text);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap;
  overflow:hidden;cursor:cell;background:var(--card)}
.xg-c.num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.xg-c.xg-num{position:sticky;left:0;z-index:2;justify-content:center;color:var(--text-3);
  background:var(--grid-solid);cursor:pointer;user-select:none;font-variant-numeric:tabular-nums}
.xg-c.xg-rsel{color:var(--c-blue);font-weight:700}
.xg-sel{background:rgba(var(--c-blue-rgb),.12)!important}
.xg-cur{outline:2px solid var(--c-blue);outline-offset:-2px}
.xg-fill{background:rgba(var(--c-green-rgb),.16)!important}
/* 拖动填充时：将要填到的那些格子用虚线框出来，一眼看出填到哪 */
.xg-fill-dst{background:rgba(var(--c-green-rgb),.1)!important;
  outline:1px dashed var(--c-green);outline-offset:-1px}
/* 「自动填充选项」小图标：拖完填充后在选区右下角冒出来（点开可选复制 / 序列 / 撤销）。
   原来只有 15×16px，很难点中 —— 点不中就点到单元格、图标随即消失（用户反馈"闪退"）。
   现在放大到 24×22，并加了蓝框，好认也好点。 */
.xg-fopt{position:absolute;z-index:11;min-width:24px;height:22px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--card);border:1px solid var(--c-blue);border-radius:4px;
  font-size:12px;line-height:1;color:var(--c-blue);font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.2)}
.xg-fopt:hover{background:rgba(var(--c-blue-rgb),.12)}
/* 数据末尾的「＋ 新增一行」行（Excel 里在最后一行下面加行的感觉） */
.xg-addrow{position:absolute;left:0;right:0;display:flex;align-items:center;gap:6px;
  padding:0 10px;cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);
  border-bottom:1px solid var(--border);border-right:1px solid var(--border);background:var(--card)}
.xg-addrow:hover{background:rgba(var(--c-blue-rgb),.07);color:var(--c-blue)}
.xg-addrow-ic{font-style:normal;font-weight:700;font-size:14px;line-height:1;color:var(--c-blue)}
/* 不是最后一页时的提示行（新增只能追加到数据末尾，所以给个跳转按钮） */
.xg-addrow-hint{cursor:default;background:var(--fill);color:var(--text-3)}
.xg-addrow-hint:hover{background:var(--fill);color:var(--text-3)}
.xg-addrow-hint .btn{margin-left:auto}
.xg-row.xg-new .xg-c:not(.xg-num){background:rgba(var(--c-amber-rgb),.08)}
.xg-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--c-amber);margin-left:3px;flex:none}
.xg-err{color:var(--c-red)!important}
.xg-empty{position:absolute;left:0;right:0;top:0;padding:26px 20px;font-size:var(--fs-sm);color:var(--text-3)}
.xg-ed{position:absolute;z-index:8;border:2px solid var(--c-blue);border-radius:var(--r-xs);padding:0 6px;
  font-size:var(--fs-sm);font-family:inherit;color:var(--text);background:var(--card);outline:none}
.xg-fh{position:absolute;z-index:9;width:11px;height:11px;background:var(--c-blue);border:1.5px solid var(--card);
  border-radius:2px;cursor:crosshair;box-shadow:0 0 0 1px rgba(var(--c-blue-rgb),.45)}

/* ------------------------------------------------------------
   数据环比（店长）：两段期间选择器 + 逐项对比表
   两段期间各自可选「按月」或「按日期」，所以选择器要能并排放下两组控件；
   窄屏时自动堆叠，不做横向滚动。
   ------------------------------------------------------------ */
.cmp-pick{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cmp-side{flex:1 1 260px;min-width:238px;display:flex;flex-direction:column;gap:9px}
.cmp-h{font-size:var(--fs-sm);color:var(--text-2);font-weight:700}
.cmp-seg{display:inline-flex;gap:6px}
.cmp-dates{display:flex;align-items:center;gap:8px}
.cmp-dates .inp{flex:1;min-width:0}
.cmp-tilde{color:var(--text-3);font-size:var(--fs-sm);flex:none}
.cmp-vs{display:flex;align-items:center;align-self:center;padding-top:26px;
  color:var(--text-3);font-size:var(--fs-sm);font-weight:700;flex:none}
.cmp-presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.cmp-warn{margin:0 0 16px;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(var(--c-amber-rgb),.12);color:var(--c-amber);
  font-size:var(--fs-sm);line-height:1.7;display:flex;flex-direction:column;gap:5px}
.cmp-cells{display:grid;gap:14px;align-items:stretch;margin-bottom:16px}
.cmp-card{padding:15px 17px}
.cmp-cells>.cmp-card{padding:16px 18px;min-height:132px;display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;isolation:isolate}
.cmp-cells>.cmp-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--cmp-accent,var(--c-blue)),transparent 86%);opacity:.9}
.cmp-cells>.cmp-card:nth-child(1){--cmp-accent:var(--c-blue)}
.cmp-cells>.cmp-card:nth-child(2){--cmp-accent:var(--c-teal)}
.cmp-cells>.cmp-card:nth-child(3){--cmp-accent:var(--c-violet)}
.cmp-cells>.cmp-card:nth-child(4){--cmp-accent:var(--c-amber)}
.cmp-cells>.cmp-card .k{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-weight:650;letter-spacing:.15px}
.cmp-cells>.cmp-card .v{font-size:21px;font-weight:800;margin:5px 0 3px;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;line-height:1.08;flex:1;display:flex;align-items:center}
.cmp-cells>.cmp-card .d{font-size:var(--fs-xs);color:var(--text-2);display:flex;gap:7px;flex-wrap:wrap;
  align-items:center;min-height:23px}
.cmp-cells>.cmp-card .cmp-base{color:var(--text-3);margin-right:auto}
.cmp-cells>.cmp-card .cmp-delta,.cmp-cells>.cmp-card .cmp-rate{padding:2px 7px;border-radius:var(--r-pill);
  background:var(--fill-2);font-variant-numeric:tabular-nums}
.cmp-cells>.cmp-card .cmp-delta.cmp-up,.cmp-cells>.cmp-card .cmp-rate.cmp-up{background:rgba(var(--c-red-rgb),.10)}
.cmp-cells>.cmp-card .cmp-delta.cmp-down,.cmp-cells>.cmp-card .cmp-rate.cmp-down{background:rgba(var(--c-green-rgb),.10)}
.cmp-scope{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hair)}
/* 每个分组一块：短分组并排，长分组由 JS 打上 grid-column:1/-1 占满整行 */
.cmp-blocks{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch}
.cmp-block{padding:18px 20px;height:100%;display:flex;flex-direction:column;min-width:0}
.cmp-bh{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;
  font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.cmp-bh::before{content:"";width:3px;height:14px;border-radius:2px;margin-right:1px;
  background:var(--cmp-accent,var(--c-blue));align-self:center;flex:none}
.cmp-bh span{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.cmp-block:nth-child(3n+2){--cmp-accent:var(--c-teal)}
.cmp-block:nth-child(3n){--cmp-accent:var(--c-violet)}
.cmp-table{table-layout:fixed;width:100%}
.cmp-table .cmp-col-name{width:31%}.cmp-table .cmp-col-value{width:21%}
.cmp-table .cmp-col-change{width:13.5%}
.cmp-table th,.cmp-table td{padding-left:12px;padding-right:12px}
.cmp-table th:first-child,.cmp-table td:first-child{padding-left:10px}
.cmp-table th:last-child,.cmp-table td:last-child{padding-right:10px}
.cmp-table th{background:var(--fill);font-weight:700}
.cmp-table tr:not(:first-child) td:first-child{font-weight:600}
.cmp-notes{margin-top:16px;padding-top:16px;padding-bottom:16px}
.cmp-mrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cmp-mrow .sp{flex:1}
.cmp-metrics{display:flex;gap:6px;flex-wrap:wrap}
.cmp-cell{position:relative}
.cmp-bar{position:absolute;left:0;bottom:2px;height:3px;border-radius:3px;
  background:rgba(var(--c-blue-rgb),.32)}
.cmp-up{color:var(--c-red);font-weight:700}
.cmp-down{color:var(--c-green);font-weight:700}

/* 折线图图例：点一下隐藏 / 显示那条线 */
.lc-legend{margin-top:-6px;text-align:right}
.lc-lg{display:inline-flex;align-items:center;gap:5px;margin-left:14px;font-size:11.5px;
  color:var(--chart-axis);cursor:pointer;user-select:none;transition:opacity .15s}
.lc-lg:hover{opacity:.7}
.lc-lg.off{opacity:.35;text-decoration:line-through}
.lc-lg.off i{background:var(--chart-axis) !important}

/* 长表格：区域内部滚动 + 表头吸顶。
   卡片本身是 overflow:hidden（为了圆角和光泽效果），表头如果在卡片里做 sticky
   会钉不住，所以把滚动放到这一层容器上，表头就能固定在这层顶部。 */
.tbl-wrap{overflow:auto;max-height:calc(100vh - 250px);min-height:200px;border-radius:var(--r-md);
  overscroll-behavior:auto}
.tbl-wrap.region-table{overflow:visible;max-height:none;min-height:0}
.region-compare-table{table-layout:fixed}
.region-compare-table:not(.region-host-table) th:nth-child(1){width:8%}
.region-compare-table:not(.region-host-table) th:nth-child(2){width:22%}
.region-compare-table:not(.region-host-table) th:nth-child(n+3){width:17.5%}
.region-host-table th:nth-child(1){width:7%}
.region-host-table th:nth-child(2){width:18%}
.region-host-table th:nth-child(n+3){width:10.71%}
.region-compare-table th,.region-compare-table td{overflow-wrap:anywhere}
.store-rank-wrap{max-height:none;overflow-x:auto;overflow-y:visible}
.store-rank-table{table-layout:fixed;min-width:980px}
.store-rank-table th:nth-child(1){width:6%}
.store-rank-table th:nth-child(2){width:24%}
.store-rank-table th:nth-child(n+3){width:10%}
.store-list-table{table-layout:fixed}
.store-list-table th:nth-child(1){width:24%}
.store-list-table th:nth-child(2){width:7%}
.store-list-table th:nth-child(3){width:10%}
.store-list-table th:nth-child(4){width:10%}
.store-list-table th:nth-child(5){width:15%}
.store-list-table th:nth-child(6){width:17%}
.store-list-table th:nth-child(7){width:17%}
.ability-summary{display:flex;flex-direction:column;gap:2px;white-space:nowrap;font-size:var(--fs-xs);color:var(--text-2)}
.ability-summary b{color:var(--text);font-weight:700}
.ability-summary em{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-right:5px;
  border-radius:50%;background:var(--fill-2);font-style:normal;font-size:9px;font-weight:800;color:var(--text-3)}
.tbl-wrap table.tbl th{position:sticky;top:0;z-index:3;background:var(--glass-strong);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 -1px 0 var(--hair)}

/* 二级页面（店员画像 / 门店画像）：返回按钮 + 姓名/门店名 吸顶。
   往下滚也不会忘了「这是谁的数据」。偏移量 --head-top 由 JS 按 AI 顶栏实际高度写入。
   类名特意不用 .page-head —— 那是外壳页面标题的样式。 */
/* 左右各留 14px 内边距，同时把底色往两侧各撑出 14px ——
   文字就不会再贴着吸顶条的边缘（但仍然和下面卡片的左边界对齐）。 */
.who-head{position:sticky;top:var(--head-top,160px);z-index:6;margin:0 -14px 16px;padding:11px 14px 13px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 16px -14px rgba(0,0,0,.28)}
.who-head .toolbar{margin-bottom:10px}
.who-head h2{margin:0}

/* 数据环比：门店选择页（管理员 / HR 从导航进来时）—— 按区域分组的门店卡片墙 */
.cmp-region{display:flex;align-items:center;gap:8px;margin:20px 0 10px;
  font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--text-2)}
.cmp-region span::before{content:"";display:inline-block;width:3px;height:12px;border-radius:2px;
  background:var(--c-blue);margin-right:7px;vertical-align:-1px}
.cmp-region em{font-style:normal;font-weight:400;color:var(--text-3)}
.cmp-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.cmp-pk{text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%;
  background:var(--glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.cmp-pk:hover{transform:var(--lift-xs);border-color:var(--glass-edge);
  box-shadow:var(--glass-inset),var(--glass-shadow-hi)}
.cmp-pk-h{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:9px}
.cmp-pk-h b{font-size:14px}
.cmp-pk-n{font-size:22px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.cmp-pk-l{font-size:11px;color:var(--text-3);margin-bottom:9px}
.cmp-pk-m{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--text-2)}
.cmp-pk-m b{font-variant-numeric:tabular-nums}
.cmp-pk-go{display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  font-size:12px;font-style:normal;color:var(--c-blue)}

/* 环比表里可点开的店员行 */
.cmp-srow:hover td{background:var(--fill);cursor:pointer}

/* 人物评价卡：结论列表 + 数据依据。
   之前这几处写死了 12.5px（数据依据还套了最下级的 .dt-note），既偏小
   又不会跟着「字号」设置缩放，所以统一改用系统字号变量。 */
.ev-h{font-size:var(--fs-md);font-weight:700}
.ev-list{margin:7px 0 0;padding-left:17px;font-size:var(--fs-md);line-height:1.9;color:var(--text)}
.ev-list li{margin:2px 0}
.ev-empty{margin:7px 0 0;font-size:var(--fs-md);color:var(--text-3)}
.ev-ev{margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);background:var(--fill);
  font-size:var(--fs-sm);color:var(--text-2)}
.ev-ev b{font-size:var(--fs-md);color:var(--text)}
.ev-ev ul{margin:7px 0 0;padding-left:17px;font-size:var(--fs-sm);line-height:1.95}

/* 环比筛选面板：三行（对比对象 / 对比期间 / 快捷区间）统一成同一套对齐规则 ——
   同一个标签列宽、同一控件高度、分段按钮等宽，看起来才像一套控件。
   之前的问题是：标签宽窄不一、分段按钮在期间区被拉伸到 448px、
   按钮 29px / 下拉 35px / chip 30px 三种高度混在一起。 */
.cmp-filter{display:block}
.cmp-filter .cmp-frow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--hair)}
.cmp-filter .cmp-frow:first-child{padding-top:0;border-top:0}
.cmp-filter .cmp-frow:last-child{padding-bottom:0}
.cmp-fh{font-size:var(--fs-sm);font-weight:700;color:var(--text-2);white-space:nowrap}
.cmp-fc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.cmp-filter .cmp-pick{flex:1 1 auto;min-width:0;margin:0;padding:0;align-items:stretch}
/* 控件统一高度 32px */
.cmp-filter .btn{height:32px;min-width:78px;justify-content:center;padding:0 12px;line-height:1}
.cmp-filter .inp{height:32px}
.cmp-filter select.inp{padding:0 10px}
/* 分段按钮（按月 / 按日期、门店 / 店员）等宽且不被拉伸 */
.cmp-filter .cmp-seg{gap:6px;align-self:auto}
.cmp-filter .cmp-side{gap:7px}
.cmp-filter .cmp-side .cmp-seg{align-self:flex-start}
.cmp-filter .cmp-side .cmp-h{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);letter-spacing:.3px}
.cmp-filter .cmp-dates{width:100%}
.cmp-filter .cmp-dates .inp{flex:1;min-width:0}
.cmp-filter .cmp-vs{align-self:center;padding:0;justify-content:center;min-width:30px;height:26px;
  border-radius:var(--r-pill);background:var(--fill-2);color:var(--text-2);font-size:var(--fs-xs)}
/* 快捷按钮等宽，排成整齐的一行 */
.cmp-filter .cmp-presets{margin:0;padding:0;border:0;width:100%;max-width:700px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:8px}

/* 核心指标卡目前固定 5 张：宽屏排成一行，窄屏自动收成两列 */
.cmp-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){ .cmp-cells{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .cmp-cells{grid-template-columns:minmax(0,1fr)} }

/* 指标块：固定两列。原来用 auto-fit(430px) —— 浏览器一最大化就变 3~4 列，
   每块只剩 500 出头，表格挤成一团、还会落单。两列时每块 700+，读起来舒服。 */
.cmp-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){ .cmp-blocks{grid-template-columns:minmax(0,1fr)} }
/* 数字列不换行：别让「-12,345.6」被折断成两行 */
.cmp-block table td.num,.cmp-block table th.num{white-space:nowrap}
/* 卡片里的大数字跟着字号缩放（原来写死 21px，字号调大后标签跟数字一样大，
   挤在一起像把数字盖住了） */
.cmp-card .v{font-size:calc(var(--fs-base) * 1.62);line-height:1.12}
.cmp-pk-n{font-size:calc(var(--fs-base) * 1.6)}

/* 数据概览：逐月门店积分达标 */
.ach-list{display:flex;flex-direction:column;gap:8px}
.ach-month{border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden}
.ach-month summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;
  cursor:pointer;list-style:none;background:var(--fill)}
.ach-month summary::-webkit-details-marker{display:none}
.ach-month summary::before{content:"›";font-size:16px;color:var(--text-3);
  transform:rotate(0);transition:transform .2s var(--ease)}
.ach-month[open] summary::before{transform:rotate(90deg)}
.ach-total{font-size:var(--fs-xs);color:var(--text-3)}
.ach-group{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;align-items:start;
  padding:11px 13px;border-top:1px solid var(--hair-2)}
.ach-heading{font-size:var(--fs-xs);font-weight:800}
.ach-stores{display:flex;flex-wrap:wrap;gap:6px}
.ach-store{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:transparent;color:var(--text-2);cursor:pointer;font:inherit;
  font-size:var(--fs-xs);transition:background .2s var(--ease),border-color .2s var(--ease)}
.ach-store small{font-weight:800;font-variant-numeric:tabular-nums}
.ach-store.star{color:var(--c-amber);border-color:rgba(var(--c-amber-rgb),.28);
  background:rgba(var(--c-amber-rgb),.07)}
.ach-store.excellent{color:var(--c-red);border-color:rgba(var(--c-red-rgb),.25);
  background:rgba(var(--c-red-rgb),.06)}
.ach-store.good{color:var(--c-teal);border-color:rgba(var(--c-teal-rgb),.25);
  background:rgba(var(--c-teal-rgb),.06)}
.ach-store.pass{color:var(--c-blue);border-color:rgba(var(--c-blue-rgb),.25);
  background:rgba(var(--c-blue-rgb),.06)}
.ach-store.bad{color:var(--c-green);border-color:rgba(var(--c-green-rgb),.25);
  background:rgba(var(--c-green-rgb),.06)}
.ach-heading.ach-star{color:var(--c-amber)}
.ach-heading.ach-excellent{color:var(--c-red)}
.ach-heading.ach-good{color:var(--c-teal)}
.ach-heading.ach-pass{color:var(--c-blue)}
.ach-heading.ach-bad{color:var(--c-green)}
.ach-store:hover{filter:brightness(.97);transform:var(--lift-sm)}
@media (max-width:720px){.ach-group{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ------------------------------------------------------------
   门店月度看板（表格默认 / 趋势切换）
   增减方向按业务习惯：红 = 增加，绿 = 减少
   ------------------------------------------------------------ */
.mon-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mon-chips{display:flex;flex-wrap:wrap;gap:6px}
.mon-switch{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.region-filter-compact{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.region-filter-compact>.mon-chips{grid-column:1}
.region-filter-compact>.mon-switch{grid-column:2;margin-left:0;justify-self:center}
.region-compact-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.region-compact-head h2{margin:0;font-size:23px;white-space:nowrap}
.region-compact-head .toolbar{flex:1;min-width:280px;margin:0}
.region-inline-filter{margin:-4px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.region-inline-filter.region-filter-compact{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.region-inline-filter.region-filter-compact>.mon-chips{
  flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:6px;
  border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--fill-2);
  scrollbar-width:thin}
.region-inline-filter.region-filter-compact>.mon-chips>.btn{flex:none}
.region-inline-filter.region-filter-compact>.mon-switch{
  width:100%;justify-content:center;margin-left:0;justify-self:auto}
select.inp.region-month-pick{min-width:250px;padding:12px 20px;text-align:center;text-align-last:center;
  font-size:calc(var(--fs-base) * 1.08);font-weight:800;cursor:pointer}
.mon-month-pick{width:auto;min-width:205px;font-weight:700;cursor:pointer}
.ov-diag-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ov-month-inline{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0 18px 0 0;
  font:inherit;color:var(--c-blue);font-weight:800;cursor:pointer;outline:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 7px) 52%,calc(100% - 2px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.ov-month-inline:focus{text-decoration:underline}
.mon-up{color:var(--c-red)!important;font-weight:600}
.mon-down{color:var(--c-green)!important;font-weight:600}
.mon-na{color:var(--text-3)}
.mon-subv{color:var(--text-3);font-size:calc(var(--fs-xs) * .95);font-weight:400}
.mon-rate-click{cursor:pointer;border-bottom:1px dashed var(--border)}
.mon-avg{color:var(--text-3);font-size:calc(var(--fs-xs) * .95);margin-left:4px;white-space:nowrap}
.mon-target{color:var(--c-blue);font-weight:500;opacity:.9}
.mon-rate{font-size:calc(var(--fs-base) * 1.08);font-weight:800}
.mon-ch2{display:inline-flex;gap:9px;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.mon-on{color:#2563eb}
.mon-off{color:#d97706}
.mon-verdict{display:block;font-size:calc(var(--fs-xs) * .95);font-weight:700;margin-top:1px}
.mon-good{color:var(--c-red)}
.mon-bad{color:var(--c-green)}
.mon-analysis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;padding:0;font-size:12.5px;overflow:hidden}
.mon-an-left{display:flex;flex-direction:column;gap:6px;padding:18px 20px;min-width:0}
.mon-an-right{display:flex;flex-direction:column;gap:9px;padding:18px 20px;
  border-left:1px solid var(--hair);min-width:0}
.mon-an-h{font-weight:700;color:var(--text-2)}
.mon-an-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mon-an-k{min-width:66px;font-weight:700}
.mon-an-n{color:var(--text-3);min-width:52px}
.mon-analysis .tag{font-weight:600}
.mon-an-rtitle{font-weight:800;color:var(--text);font-size:var(--fs-sm)}
.mon-an-copy{font-size:calc(var(--fs-base) * .96);line-height:1.9;color:var(--text);font-weight:500}
.mon-an-copy b{color:var(--text);font-variant-numeric:tabular-nums}
.mon-ai{margin-top:4px;padding-top:12px;border-top:1px solid var(--hair)}
.mon-ai-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);
  font-weight:800;color:var(--text)}
.mon-ai-h span{font-weight:600;color:var(--c-amber)}
.mon-ai-text{font-size:var(--fs-sm);line-height:1.8;color:var(--text-2);margin-top:6px}
.mon-ai-text.loading{color:var(--text-3)}
.mon-ai-text.err{color:var(--c-amber)}
.ov-hero{display:flex;align-items:center;justify-content:space-between;gap:18px}
.ov-k{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);margin-bottom:5px}
.ov-summary{font-size:calc(var(--fs-base) * 1.1);line-height:1.8;font-weight:650}
.ov-year-summary{margin-top:6px;font-size:var(--fs-sm);line-height:1.8;color:var(--text-2)}
.ov-tbl td{vertical-align:top}
.ov-row:hover{background:var(--fill-2)}
.ov-diag-list{display:flex;flex-direction:column}
.ov-diag-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:16px 4px;border-bottom:1px solid var(--hair);cursor:pointer;border-radius:var(--r-sm)}
.ov-diag-row:last-child{border-bottom:0}
.ov-diag-row:hover,.ov-diag-row:focus{background:var(--fill-2);outline:none}
.ov-diag-no{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--fill-2);font-size:var(--fs-xs);font-weight:800;color:var(--text-2)}
.ov-diag-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.ov-diag-head b{font-size:var(--fs-sm)}
.ov-diag-head span{font-size:var(--fs-xs);font-weight:800}
.ov-diag-text{font-size:var(--fs-sm);line-height:1.85;color:var(--text-2)}
.ov-diag-text b{color:var(--text);font-variant-numeric:tabular-nums}
.ov-diag-go{font-size:var(--fs-xs);color:var(--c-blue);font-weight:700;white-space:nowrap;padding-top:3px}
.mon-ai-card{border-color:rgba(var(--c-amber-rgb),.35)}
.mon-analysis-modal{width:980px;max-width:94vw;padding:22px}
.mon-analysis-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.mon-analysis-top h2{margin:0 0 5px}
.mon-analysis-meta{font-size:var(--fs-sm);color:var(--text-2)}
.mon-analysis-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mon-analysis-modal .mon-analysis{border:1px solid var(--hair);border-radius:var(--r-lg)}
@media (max-width:900px){
  .mon-analysis{grid-template-columns:minmax(0,1fr)}
  .mon-an-right{border-left:0;border-top:1px solid var(--hair)}
  .mon-analysis-top{flex-direction:column}
  .mon-analysis-actions{justify-content:flex-start}
  .ov-hero{flex-direction:column;align-items:flex-start}
  .ov-diag-row{grid-template-columns:26px minmax(0,1fr)}
  .ov-diag-go{grid-column:2;padding-top:0}
}
.mon-base{color:var(--text-2)}
.mon-tbl th.num,.mon-tbl td.num{text-align:right;white-space:nowrap}
.mon-tbl td{padding:10px}
.mon-th{cursor:pointer;user-select:none;white-space:nowrap;color:var(--c-blue)}
.mon-th:hover{text-decoration:underline}
.mon-th i{font-style:normal;color:var(--text-3);margin:0 1px}
.mon-th span{opacity:.45;font-weight:500}
.mon-th span.on{opacity:1;font-weight:800;color:var(--c-blue)}
.th-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  margin-left:5px;border:1px solid var(--border);border-radius:50%;font-size:10px;
  line-height:1;color:var(--text-3);cursor:help;vertical-align:1px;user-select:none}
.mon-th .th-tip{opacity:1}
.th-tip:hover,.th-tip:focus{color:var(--c-blue);border-color:var(--c-blue);outline:none}
.mon-warn{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.8;color:var(--text-3)}
.mon-warn .ic{flex:none;margin-top:3px;color:var(--c-amber)}
.mon-rank{display:flex;flex-direction:column;gap:7px;max-height:360px;overflow:auto;padding-right:2px}
.mon-rank-wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;
  max-height:none;overflow:visible}
@media (max-width:900px){ .mon-rank-wide{grid-template-columns:minmax(0,1fr)} }
.mon-rk{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mon-rk-n{width:16px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.mon-rk-m{width:64px;color:var(--text-2);font-variant-numeric:tabular-nums}
.mon-rk-bar{flex:1;height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.mon-rk-bar i{display:block;height:100%;border-radius:3px;background:var(--c-blue)}
.mon-rk b{width:80px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:940px){
  .mon-switch{margin-left:0;width:100%}
  .region-filter-compact{grid-template-columns:minmax(0,1fr)}
  .region-filter-compact>.mon-switch{grid-column:1;grid-row:1;justify-self:stretch}
  .region-filter-compact>.mon-chips{grid-column:1;grid-row:2;justify-content:center}
  select.inp.region-month-pick{width:100%;min-width:220px}
}