/* ===== AmarokOS Platform Shell 布局与共享 UI 壳样式 =====
 * 用途：所有业务模块统一导入 platform.css + platform/shell.css
 * 作用：侧边栏、登录遮罩、主内容区边距、通用 picker 弹层、账号信息/改密弹层、view 显示切换、卡片 panel 骨架、tables 样式、顶栏/工具条基础。
 * 业务模块的自定义样式在各自的 styles.css 中追加，不要再重复声明 :root 和 shell 基础类。
 */

/* ===== 侧边栏 .sidebar =====
 * 注：--sidebar-width / --sidebar-collapsed-width 统一在 platform.css :root 声明，
 *     本文件不再重复声明 :root，避免两套变量错位、浏览器层叠顺序覆盖导致的宽度不同步。
 *     用户拖动侧栏手柄时，JS 直接写 document.documentElement.style.setProperty('--sidebar-width') 修改唯一源头。 */
.sidebar {
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width, 232px);
  background: var(--sidebar-bg);
  color: var(--text);
  padding: 20px 14px;
  border: 0;
  border-right: 1px solid var(--sidebar-border);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: width .2s ease, padding .2s ease;
  z-index: 20;
}

/* ===== 侧边栏右侧手柄：支持左右拖动改变宽度（用户要求"左侧导航条手动拖"） =====
 *  ⚠️ position: absolute 必须 !important：HTML 模板中该元素同时挂了 data-tooltip 属性（以前版本的提示气泡），
 *     通用规则 [data-tooltip] { position: relative } 特异性同为 10，且靠后出现，会把此处的 absolute 覆盖成 relative，
 *     导致 resizer 变成 flex flow 中 sidebar 末尾的一个 6×0 flex item（沉到账号栏下面），用户完全抓不到、拖不动。
 *     加 !important 彻底锁定绝对定位基准（以最近 position≠static 的 sidebar 为基准）。 */
.sidebar-resizer {
  position: absolute !important;
  top: 0;
  right: -3px;                    /* 居中 6px 手柄跨在右边缘：一半在侧栏内，一半在主内容上，好抓 */
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 30;                    /* 比侧栏（20）高，确保 hover 不会被其他元素抢 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;             /* 触控设备上也能横向拖 */
}
/* hover / 拖动中：右侧显示一条细 accent 色亮条 + 轻微阴影，提示可拖 / 正在拖
   用户要求："这条竖红线可以整条显示，或在中间显示一段" → 默认【中间显示一段】：
   绝对定位 + top:50% + translateY(-50%) 让竖线"几何中心"与侧栏垂直中心重合；
   显示时 height = 80%（上下各留 10% 空白，视觉居中且不顶到 LOGO/账号边界）；
   实测：top/bottom 百分比 + transition 起点/终点读值不稳定；改用【height + translateY】组合在绝对定位父级里始终可预测（sanity/newDiv 测试均一致通过）。
   若后续想要"整条满高"，把 active 态的 height 改成 calc(100% - 16px) 或 100% 即可。 */
.sidebar-resizer .bar {
  position: absolute;
  right: 2px;
  top: 50%;
  width: 2px;
  height: 0;                          /* 默认态：高度 0，看不见 */
  border-radius: 2px;
  background: transparent;
  opacity: 0;
  transform: translateY(-50%);
  transition: height .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  pointer-events: none;               /* 竖线不抢鼠标事件，全部交给父层 6px 宽的 resizer 接收拖放 */
}
.sidebar-resizer:hover .bar,
.sidebar-resizer.drag-active .bar {
  height: 80% !important;           /* 中间 80% 的一段（几何中心在正中间），!important 防 transition/其他规则反向覆盖 */
  opacity: 1 !important;
  background: var(--accent-strong, var(--bad-text)) !important;
  box-shadow: 0 0 0 1px rgb(var(--bad-rgb) / .12) !important;
}
/* 收起状态（仅图标 44px）不允许拖，手柄隐藏 */
body.sidebar-collapsed .sidebar-resizer { display: none; }

/* 拖动中：整页不允许文字选中，光标保持 col-resize，避免乱跳 */
body.dragging-sidebar,
body.dragging-sidebar * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}
/* 拖动中禁用侧栏宽度过渡动画（实时响应，避免拖一下滞后 0.2s） */
body.dragging-sidebar .sidebar { transition: none !important; }
body.dragging-sidebar .main-content { transition: margin-left 0s linear !important; }

/* ===== 收起状态：统一让 --sidebar-width = 44px（侧边栏宽度 + 主内容 margin-left 共享同一变量 → 100% 同步，绝对不会错位） ===== */
/* 之前靠 .sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width) } 特异性覆盖，偶尔会因缓存/层叠没生效；
   现在直接改 --sidebar-width 本身，两侧（sidebar + main-content）都从同一个 var 读，彻底消除不同步 */
/* 仅桌面（≥769px）有"44px 图标栏"形态；≤768px 侧栏是抽屉，必须恒为 260px 全宽 */
@media (min-width: 769px) {
  body.sidebar-collapsed {
    --sidebar-width: 44px;
  }
}

/* 侧栏右上角操作区，从左到右：[切换语言] [切换导航布局] [搜索] [刷新] [收起]
 * 语言 / 导航布局两个图标由 LOGO 下方工具栏**移入本行**，统一放在搜索图标左边，五个按钮同尺寸同风格。
 * 所有 .sidebar-toggle 下 <i> 全部用 mask SVG（fill=currentColor + mask-image SVG 描边）
 * 五个按钮视觉完全一致：按钮 30×30，图标 20×20，SVG viewBox 24，stroke-width=2.2，stroke-linecap/join=round */
.sidebar-head-actions {
  /* 2026-10-09 用户要求「LOGO 放到上面，这一排图标放到 LOGO 下面」：
     本行由「右上角绝对定位覆盖层」改为 LOGO 下方的**正常流一行**，右对齐。
     视觉顺序靠 .sidebar > .brand/.sidebar-head-actions 上的 flex order 调（见下方），
     不动 shell.js 的 DOM —— 锁屏 / 抽屉 / 收起态都依赖那个结构。 */
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* 右对齐，与下一行「全部折叠」同一条右沿 */
  gap: 6px;
  padding: 0 12px;             /* 与 .sidebar-toolbar 一致 → 右沿对齐 */
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* ===== 移入右上角操作条的快捷按钮（语言切换 / 导航布局切换）=====
 * 只给「仍在 LOGO 下方工具栏里的按钮」保留 17×17 小尺寸（见下方 .sidebar-toolbar-btn 规则），
 * 本行内的按钮与搜索 / 刷新 / 收起按钮**完全同尺寸**：方框 30×30、图标 20×20。
 * 选择器前缀 .sidebar-head-actions 限定作用域，不影响仍在 LOGO 下方工具栏里的全部折叠按钮（契约：17px）。 */
.sidebar-head-actions .sidebar-toolbar-btn,
.sidebar-head-actions .sidebar-language-toggle,
.sidebar-head-actions .sidebar-navmode-toggle {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--icon-gray);
}
.sidebar-head-actions .sidebar-toolbar-btn:hover {
  background: var(--hover-bg);
  color: var(--nav-muted);
}
.sidebar-head-actions .sidebar-toolbar-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.sidebar-head-actions .sidebar-toolbar-btn i,
.sidebar-head-actions .sidebar-toolbar-btn svg {
  width: 20px;   /* 与搜索 / 刷新 / 收起图标同尺寸 */
  height: 20px;
}
/* 语言切换图形沿用工具栏里的地球描边（1.9）会让线看起来比搜索镜片细，这里统一到 2.2 描边风 */
.sidebar-head-actions .sidebar-language-toggle i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.28 2.41 3.49 5.44 3.49 9S14.28 18.59 12 21C9.72 18.59 8.51 15.56 8.51 12S9.72 5.41 12 3Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.28 2.41 3.49 5.44 3.49 9S14.28 18.59 12 21C9.72 18.59 8.51 15.56 8.51 12S9.72 5.41 12 3Z'/></svg>");
}
/* 导航布局切换图形：与搜索 / 刷新图标同为 2.2 描边（原工具栏里是 1.8，迁到本行后统一） */
.sidebar-head-actions .sidebar-navmode-toggle svg {
  stroke-width: 2.2;
}
/* 收起态（44px 图标栏）：本行改为纵向排列，语言 / 布局两个控制也一起变成纵向卡片，不再另行隐藏 */
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar-head-actions .sidebar-toolbar-btn {
    width: 36px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg);
    box-shadow: var(--shadow-soft);
    color: var(--nav-muted);
  }
  /* 收起态侧栏只有 44px 宽：语言 / 导航布局菜单改为「固定定位 + 按钮右侧展开」，
     否则右对齐的菜单会向左顶出视口（left:0 的旧规则同理），点了什么都看不见。 */
  body.sidebar-collapsed .sidebar-language-menu,
  body.sidebar-collapsed .sidebar-navmode-menu {
    position: fixed;
    top: auto;
    left: 52px;
    right: auto;
    z-index: 1200;
  }
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--icon-gray);
  box-shadow: none;
}
.sidebar-toggle:hover {
  border-color: transparent;
  background: var(--hover-bg);
  color: var(--nav-muted);
}
.sidebar-toggle i {
  width: 20px;
  height: 20px;
  display: block;
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
/* ===== 右上角收起整个侧栏按钮：正方形圆角线框 + 一条竖线（竖线位置跟随状态切换左右），图形尺寸与刷新图标一致 ===== */
/* 展开态（侧边栏已打开）：外框=正方形圆角线框，竖条靠左边 → 点击收起 */
#sidebarToggleBtn i {
  position: static;               /* 取消原来相对定位（用于 before/after 横线） */
  width: 20px;
  height: 20px;
  display: block;
  border: 0;                      /* 取消原来纯 CSS 的方框边框 */
  border-radius: 0;
  background-color: currentColor; /* 恢复 SVG mask 机制：currentColor fill */
  color: inherit;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
  /* SVG 图形墨迹外框统一落在 3..21（18 单位），与刷新 / 搜索 / 导航布局 / 全部折叠一致 */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><line x1='7.3' y1='5.4' x2='7.3' y2='18.6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><line x1='7.3' y1='5.4' x2='7.3' y2='18.6'/></svg>");
  flex-shrink: 0;
}
/* 折叠态（侧边栏已关闭）：外框相同，竖条切换到靠右边 → 点击展开
   （仅桌面：≤768px 抽屉形态下这个按钮＝关闭抽屉，图标保持"收起"语义） */
@media (min-width: 769px) {
  body.sidebar-collapsed #sidebarToggleBtn i {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><line x1='16.7' y1='5.4' x2='16.7' y2='18.6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><line x1='16.7' y1='5.4' x2='16.7' y2='18.6'/></svg>");
  }
}
/* 删除之前"方框 + 两条横线"方案的伪元素（SVG mask 不需要） */
#sidebarToggleBtn i::before,
#sidebarToggleBtn i::after { display: none; content: none; }

/* 刷新 / 搜索 / 全部折叠按钮不需要伪元素（它们用 SVG mask），保险起见明确隐藏 */
.sidebar-reload i::before,
.sidebar-reload i::after,
.sidebar-search i::before,
.sidebar-search i::after,
.sidebar-collapse-all i::before,
.sidebar-collapse-all i::after { display: none; }

/* ===== 通用自定义 data-tooltip：替代原生 title（原生无法控制圆角/字号/留白） ===== */
/*  位置：所有带 data-tooltip 的元素（按钮/手柄），默认气泡出现在元素正右方（用户截图位置）
 *  样式：黑底白字 + 大圆角 + 字号增大一倍(15px) + 内边距翻倍(8px 16px)
 *  交互：hover / focus-visible 才显示（避免常显） */
[data-tooltip] {
  position: relative;
}
/* 统一自定义 tooltip：JS 渲染的固定视口气泡（.orbit-tip），跟随鼠标位置、越过视口边缘自动钳制防溢出。
 * 为什么改用 .orbit-tip 而不是 [data-tooltip]::after：
 *   ::after 是绝对定位，会被 .table-wrap{overflow:auto} 等滚动容器裁切（如库存最新明细整行宽元素，
 *   气泡锚定在其水平中心会偏出右侧而被裁掉）；fixed 挂在 body 下不受任何祖先 overflow/transform 影响，
 *   直接用鼠标坐标定位即可做到"跟随鼠标位置"。视觉与旧 ::after 完全一致：近黑底、15px、8px/16px 留白、大圆角。 */
.orbit-tip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;             /* 单行上限，超出自动折行 */
  box-sizing: border-box;
  background: var(--dark-bg);          /* 近黑背景（比纯黑更柔和，贴近截图的黑底） */
  color: var(--on-inverse);
  font-size: 15px;              /* 文字增大一倍：从常用 12~13px → 15px（视觉清晰） */
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 16px;            /* 留白翻倍：常规 4px 8px → 8px 16px */
  border-radius: var(--radius-sm);
  white-space: normal;          /* 默认允许换行：长提示不横向溢出 */
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
  box-shadow: 0 6px 16px rgb(var(--overlay-rgb) / .28);  /* 轻微阴影（让气泡有浮起感） */
}
.orbit-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 刷新按钮（与 sidebar-toggle 同尺寸/圆角/hover，描边风 2.2） */
.sidebar-reload i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><polyline points='21 3 21 9 15 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><polyline points='21 3 21 9 15 9'/></svg>");
}

/* 顶部搜索按钮：放大镜图形（圆圈 + 斜柄），与刷新/收起按钮同为 SVG mask 描边风（24 viewBox / 2.2）
 * 占位基准：**整枚图形的墨迹外框**统一落在 3..21（18 单位），与刷新 / 导航布局 / 全部折叠一致。
 * 旧版按「镜片半径 8.5 ≈ 刷新圆弧半径 9」对齐，只比了圆圈、漏了斜柄 —— 斜柄把外框顶到 21.6，
 * 于是放大镜的整体墨迹（21.8 单位）比别的图标大出约 1.6 单位，看起来「搜索比它们大」。 */
.sidebar-search i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='7.8'/><line x1='16.4' y1='16.4' x2='21' y2='21'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.8' cy='10.8' r='7.8'/><line x1='16.4' y1='16.4' x2='21' y2='21'/></svg>");
}

/* ===== LOGO 下方工具栏：一排功能小图标按钮（预留扩展位，当前为空时自动隐藏不占空间） ===== */
/*  布局说明：全部折叠按钮需要和下方每个一级分组标题右侧的 ">"(chevron) 图标在同一竖直线上
 *  基准：.nav-group-title padding: 8px 12px → chevron 右边到 sidebar 右边缘距离 = 12px
 *  实现：toolbar 左右 padding 同步成 12px，内容一律靠右（flex-end）。
 *  为什么是 flex-end 而不是 space-between：本行现在只剩「全部折叠」一个按钮，
 *  space-between 在单子元素下等于 flex-start，会把它顶到最左边、离菜单右侧 150px 开外。
 *  flex-end 下按钮盒右沿 = toolbar 内容右沿 = .nav-group-title 内容右沿，天然同一条竖线。 */
.sidebar-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 6px;
  padding: 0 12px;  /* 与 .nav-group-title 的左右 12px 完全一致，保证右边沿同一竖直线 */
  flex-shrink: 0;
  min-height: 26px;
}
/* 空工具栏（未放按钮）不占高度，避免 LOGO 与菜单之间留一个空行 */
.sidebar-toolbar:empty,
.sidebar-toolbar:not(:has(> *)) {
  display: none;
  margin: 0;
  padding: 0;
}
.sidebar-toolbar-btn {
  width: 26px;  /* 紧凑：28→26，与整体菜单密度一致 */
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--icon-gray);
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-toolbar-btn:hover {
  background: var(--hover-bg);
  color: var(--nav-muted);
}
.sidebar-toolbar-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.sidebar-toolbar-btn i,
.sidebar-toolbar-btn svg {
  width: 17px;  /* 紧凑：18→17，与语言切换和全部折叠图标大小严格一致 */
  height: 17px;
  display: block;
}
.sidebar-toolbar-btn i {
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
/* 全部折叠图标：用户指定形状 "> —"（右尖角 + 长破折号，中间留明显间隔），统一 2.2 线宽 + 圆角端点 */
.sidebar-collapse-all i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 10 12 3 18'/><line x1='15' y1='12' x2='21' y2='12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 10 12 3 18'/><line x1='15' y1='12' x2='21' y2='12'/></svg>");
}
.sidebar-language-toggle i {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.15 2.28 3.3 5.14 3.3 8.5S14.15 18.22 12 20.5C9.85 18.22 8.7 15.36 8.7 12S9.85 5.78 12 3.5Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c2.15 2.28 3.3 5.14 3.3 8.5S14.15 18.22 12 20.5C9.85 18.22 8.7 15.36 8.7 12S9.85 5.78 12 3.5Z'/></svg>");
}
.sidebar-language-control { position: relative; }
.sidebar-language-menu {
  position: absolute;
  top: 34px;      /* 从 LOGO 下方工具栏迁到右上角操作条后，按钮方框 30×30 → 菜单顶到按钮下沿 4px 处 */
  left: 0;        /* 左对齐按钮（与导航布局菜单一致）：向右展开，不会顶出视口左边界 */
  z-index: 60;
  display: grid;
  min-width: 106px;
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 8px 20px rgb(var(--overlay-rgb) / .16);
}
.sidebar-language-menu[hidden] { display: none; }
.sidebar-language-menu button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
}
.sidebar-language-menu button:hover,
.sidebar-language-menu button:focus-visible { background: var(--hover-bg); }

/* ===== 水平位置校准：让"全部折叠"图形本体的右沿落在分组标题 chevron(>) 的右沿上 =====
 *  L1  按钮盒右沿 ↔ 标题内容右沿：靠 .sidebar-toolbar 的 12px 右 padding 与 flex-end 对齐，差值 0（无需补偿）。
 *  L2  图形本体(17×17, 居中于 26×26 盒) ↔ chevron 图形(16×16) 的墨迹右沿：
 *       盒内居中让图形比方框右沿左偏 4.5px，且 mask SVG viewBox 24 的笔画只画到 x=21（右侧还留 3/24 空白），
 *       两处合计图形墨迹比盒右沿左偏约 6.6px；
 *       → 给 .sidebar-collapse-all i 加 margin-right:-5px，把图形向右推出约 2.5px，
 *         使其墨迹右沿与 chevron 墨迹右沿同线（实测差 <1px）。 */
.sidebar-collapse-all i { margin-right: -5px; }

/* 2026-10-09：LOGO 回到侧栏最上（原先为了避让右上角那排绝对定位的图标，被 margin-top:38px 下推）。
   现在那排已移到 LOGO 之下、且两者顺序由下面两条 flex order 决定。 */
.sidebar > .brand { order: -2; }
.sidebar > .sidebar-head-actions { order: -1; }
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 6px; /* 增加多0.5倍间隔：4→6（×1.5） */
  padding: 2px 6px 2px 6px;
  padding-right: 34px;
}
.brand-logo { height: 50px; width: 100px; flex: 0 0 auto; }
.brand h1 { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; margin: 0; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-sm); }

.nav-module-title {
  margin: -3px 8px 6px;   /* 增加多0.5倍间隔：-2 8 4 → -3 8 6（上下各×1.5） */
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* ===== 侧栏滚动布局：LOGO / 工具栏固定在顶部不滚，nav 菜单区填满中间可滚，账号常驻底部（参考截图风格） ===== */
/* 侧栏整体：fixed 撑满视口 + flex column（高度 = top:0~bottom:0 固定） */
nav {
  position: relative;     /* 为绝对定位的高亮滑块 .nav-indicator 提供定位基准 */
  display: flex;
  flex-direction: column;
  gap: 6px;                /* 增加多0.5倍间隔：0→6（一级分组之间拉开6px空气，形成层次） */
  /* 让菜单区占据"LOGO + 工具栏 + 账号"之间的全部剩余空间 */
  flex: 1 1 auto;
  /* 关键：flex 子项默认 min-height=auto 会让内容撑开无法收缩，必须显式 0 才能让 overflow-y 生效 */
  min-height: 0;
  /* 菜单超出时：滚动条显示在 nav 内部（只滚菜单区，LOGO/工具栏/账号不滚） */
  overflow-y: auto;
  overflow-x: visible;
  /* 菜单内边距：顶部保持 0 与工具栏直接对接，让工具栏 margin-bottom（6px）精确控制区块间隔 */
  padding: 0 2px 2px 0;
  margin-right: -2px; /* 抵消 padding-right:2px 让滚动条贴侧栏右边线 */
  /* iOS / 触摸设备顺滑惯性滚动 */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
/* 细滚动条风格（与截图 VSCode 风格一致） */
nav::-webkit-scrollbar { width: 8px; }
nav::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
nav::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid transparent; background-clip: content-box; }
nav::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; border: 1px solid transparent; }
/* Firefox */
nav { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* ===== 当前项圆角高亮滑动底块：切换时从旧位置滑到新位置，宽高跟随目标项变化，带一点回弹 ===== */
.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--radius-xs, 6px);
  background: var(--accent-soft);
  transition: transform .36s cubic-bezier(0.34, 1.45, 0.64, 1),
              width .36s cubic-bezier(0.34, 1.45, 0.64, 1),
              height .36s cubic-bezier(0.34, 1.45, 0.64, 1),
              opacity .18s ease;
  will-change: transform, width, height;
  opacity: 0;
}

.nav-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}  /* 增加多0.5倍间隔：0→3（分组标题与子菜单项、子菜单项之间少量空气，层次感） */
.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 8px 12px;       /* 增加多0.5倍间隔：5 10 → 8 12（上下×1.6，左右×1.2：行内空气从 10px → 16px） */
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
  /* 关键：侧栏被拖窄（如截图<150px）时，文字不再折行导致高度暴涨（你反映的"间隔太宽"本质是折行后的多行高度） */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;           /* 允许 flex/grid 收缩（grid 项默认 min-width:auto 不收缩会撑破） */
  transition: background .15s ease, color .15s ease;
}
.nav-group-title.active {
  background: transparent;
  color: var(--accent-strong);
  font-weight: 600;
}
.nav-group-title.active i {
  color: var(--accent-strong);
}
.nav-group-title.selected-group {
  background: transparent;
  color: var(--accent-strong);
  font-weight: 600;
}
.nav-group-title.selected-group i {
  color: var(--accent-strong);
}
.nav-group-title:hover:not(.active):not(.selected-group) { background: var(--hover-bg); border-color: transparent; color: inherit; }
/* ===== 分组收起/展开小箭头：旋转九十度 ===== */
.nav-group-title i {
  width: 16px;     /* 统一为 16×16 */
  height: 16px;
  display: block;
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  color: var(--muted);   /* 箭头用稍淡的灰色，和文字区分但可点击 */
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
  flex-shrink: 0;
  /* 默认 SVG mask = chevron-down（向下的 V，用于展开态） */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transform-origin: center;
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 折叠态（aria-expanded=false）：旋转 -90° → 变成"▶ 朝右" */
.nav-group-title[aria-expanded="false"] i {
  transform: rotate(-90deg);
}
/* 展开态（aria-expanded=true）：旋转 0° → 保持"∨ 朝下"，正好旋转九十度 */
.nav-group-title[aria-expanded="true"] i {
  transform: rotate(0deg);
}

/* ===== 侧边菜单二级项就地折叠展开 + 左侧细竖线连接 ===== */
.nav-group-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-left: 16px;
  padding-left: 8px;
}
/* 左侧细竖线连接 */
.nav-group-items::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
  border-radius: 1px;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
/* 折叠状态就地收缩 */
.nav-group-title[aria-expanded="false"] + .nav-group-items {
  grid-template-rows: 0fr;
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.28s;
}
.nav-group-title[aria-expanded="false"] + .nav-group-items::before {
  opacity: 0;
}
.nav-group-items-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ===== 二级子项依次错开淡入 ===== */
@keyframes navSubItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > * {
  animation: navSubItemFadeIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(1)  { animation-delay: 0.02s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(2)  { animation-delay: 0.05s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(3)  { animation-delay: 0.08s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(4)  { animation-delay: 0.11s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(5)  { animation-delay: 0.14s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(6)  { animation-delay: 0.17s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(7)  { animation-delay: 0.20s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(8)  { animation-delay: 0.23s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(9)  { animation-delay: 0.26s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(10) { animation-delay: 0.29s; }
.nav-group-title[aria-expanded="true"] + .nav-group-items .nav-group-items-inner > *:nth-child(n+11) { animation-delay: 0.32s; }

.nav {
  position: relative;
  z-index: 1;               /* 在滑动高亮块 .nav-indicator 之上 */
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 8px 12px;        /* 增加多0.5倍间隔：5 10 → 8 12（和分组标题同步：上下×1.6，左右×1.2，行高统一 ~33px） */
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
  /* 和分组标题一样：侧栏变窄时不折行（这是截图里"间隔过宽"的根本原因之一——折行使单项高度从27→122） */
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  transition: color .2s ease, background .15s ease;
}
.nav.active {
  background: transparent;  /* 高亮底色由滑动的 .nav-indicator 呈现 */
  color: var(--accent-strong);
  font-weight: 600;
}
.nav:hover:not(.active) {
  background: var(--hover-bg);
  color: var(--text);
}
.nav[style*="display: none"] { display: none !important; }

.sidebar-account {
  width: 100%;
  min-width: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;  /* 紧凑：9→8 */
  padding: 7px;  /* 紧凑：9→7（账号按钮也紧凑，和菜单密度一致） */
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.sidebar-account[hidden] { display: none; }
.sidebar-account:hover { background: var(--hover-bg-alt); border-color: transparent; color: inherit; }
.sidebar-account-avatar {
  width: 28px;  /* 紧凑：32→28 */
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-sm);  /* 紧凑：小一号字体配合头像缩小 */
}
.sidebar-account-copy { min-width: 0; display: block; flex: 1; }
.sidebar-account-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.sidebar-account-more { flex: 0 0 auto; color: var(--muted); font-size: 10px; letter-spacing: 1px; line-height: 1; }

/* 收起状态（"44px 图标栏"整套形态）仅桌面 ≥769px 生效。
   ≤768px 侧栏是覆盖式抽屉，宽度/内容必须恒为展开态 —— 桌面这套规则一旦落到抽屉上，
   抽屉会缩成 44px 细条且导航 display:none，表现就是"点了汉堡看不到导航"。 */
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar {
    width: 44px !important;
    padding: 14px 6px;
  }
  body.sidebar-collapsed .sidebar .brand,
  body.sidebar-collapsed .sidebar .nav-module-title,
  body.sidebar-collapsed .sidebar .sidebar-toolbar,
  body.sidebar-collapsed .sidebar nav { display: none; }

  /* 收起状态：操作条改成纵向图标栏（原 top/right 依赖绝对定位，改成正常流后失效）。
     纵向时 justify-content 走的是纵轴 → 必须 flex-start，否则图标会被推到栏底。 */
  body.sidebar-collapsed .sidebar-head-actions {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    gap: 6px;
  }
  body.sidebar-collapsed .sidebar-toggle {
    width: 36px;
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg);
    box-shadow: var(--shadow-soft);
    color: var(--nav-muted);
  }

  body.sidebar-collapsed .sidebar-account {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border: 0;
  }
  body.sidebar-collapsed .sidebar-account-copy,
  body.sidebar-collapsed .sidebar-account-more { display: none; }
  body.sidebar-collapsed .sidebar-account-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: var(--fs-sm);
  }
}

/* ===== 主内容区 .main-content ===== */
body {
  margin-left: 0;
  min-height: 100vh;
  background: var(--bg) !important;
  overflow: hidden;
}
.main-content {
  margin-left: var(--sidebar-width, 232px);
  min-height: 100vh;
  max-height: 100vh;
  background: var(--bg) !important;
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-left .2s ease;
}
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width, 44px); }

/* ===== 视图切换 ===== */
.view {
  display: none;
  /* docs/42 §2：默认内容边距**桌面 24、窄屏 16**。原来左右只有 10px，内容贴着壳层边（用户实测：太靠边）。 */
  padding: 20px 24px 22px;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .view { padding: 16px 16px 20px; }
}
.view.active { display: block; }

/* 嵌入公共页面时由view提供外侧留白，独立页面仍使用自己的padding。 */
.view .orbit-ui-page { padding: 0; }

/* ===== 面板、卡片骨架（可覆盖） ===== */
.row-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.panel {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(var(--overlay-rgb) / .03);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
}
.panel-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
}
.card strong { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; font-weight: 700; }
.card span { color: var(--muted); }

.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px;
}
.flow div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--panel-soft); }
.flow strong { display: block; margin-bottom: 8px; font-weight: 600; }
.flow span { color: var(--muted); }

.todo-list { padding: 8px 18px 16px; }
.todo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
}
.todo:last-child { border-bottom: 0; }

/* ===== 表格骨架 ===== */
select, input, textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);  /* 原 8px 统一收敛到 --radius-xs（6px 视觉略紧但统一），若需更大可调 --radius-xs */
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  /* ⚠️ 历史 outline:none 是键盘无障碍大坑：彻底看不见 Tab 焦点位置
   * → 改为 outline-color: transparent，保留 outline 机制（:focus-visible 会把它变红），
   * 鼠标点击时 outline 仍透明（视觉无噪音），键盘焦点时 platform.css 的 :focus-visible 强制显示 --focus-ring。*/
  outline-color: transparent;
  transition: border-color .15s ease, background .15s ease;
}
textarea { min-height: 72px; resize: vertical; line-height: 1.55; }

.table-wrap { overflow: auto; max-height: 70vh; background: var(--panel); }
/* 库存明细：隐藏盒子自身的横向滚动条，改用固定在浏览器底部的 .inventory-h-scrollbar
 * 拖动同步到 wrap.scrollLeft（overflow-x:hidden 仍可编程滚动，见 renderLatestRows）。
 * 只作用于库存面板，不影响同样用 .table-wrap 的 attendance/admin 表。
 * 纵向保持整页展开（.inventory-latest-table .table-wrap{max-height:none}，见 platform.css），
 * 不做盒内滚动，因此顶部表头随页面滚动而不吸附；列的归属由「选中行上方的半隐列名条」提示。 */
.inventory-latest-panel .inventory-latest-table .table-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
/* 全屏时恢复盒子原生横向滚动条（此时 .inventory-h-scrollbar 已隐藏，见下方兄弟选择器）。 */
.inventory-latest-panel.is-browser-fullscreen .inventory-latest-table .table-wrap {
  overflow-x: auto;
}
/* 固定在浏览器底部的横向滚动条。它是 #inventoryLatestPanel 的兄弟（位于 .view 内），
 * 最近的滚动容器是 .main-content，因此 sticky-bottom 能钉在视口底部，而不是表格底边。 */
.inventory-h-scrollbar {
  position: fixed;
  bottom: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  z-index: 4;
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.inventory-h-scrollbar[hidden] { display: none; }
.inventory-h-scrollbar::-webkit-scrollbar { height: 12px; }
.inventory-h-scrollbar::-webkit-scrollbar-track { background: transparent; }
.inventory-h-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: 4px; border: 1px solid transparent; background-clip: content-box;
}
.inventory-h-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
/* 全屏时隐藏该条：面板铺满屏幕，改用盒内原生横向滚动条。bar 是 panel 的后续兄弟。 */
.inventory-latest-panel.is-browser-fullscreen ~ .inventory-h-scrollbar { display: none; }
.inventory-h-spacer { height: 2px; min-width: 100%; }
/* 选中行上方的「半隐列名条」：当某行被选中时，在该行上方插入一条淡化列名带，
 * 让用户不抬头找表头就能认出每一列。它随选中行移动、列宽与 colgroup 对齐（table-layout:fixed），
 * 半透明弱化（半隐），只作提示不参与交互。 */
.inventory-row-header-context td {
  background: rgb(var(--overlay-rgb) / 0.05);
  color: rgb(var(--overlay-rgb) / 0.52);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
  pointer-events: none;
  user-select: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  background: var(--bg);
}
th, td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: middle;
}
th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 3;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  /* ===== Step 4：表头底部阴影分割线 =====
   * 问题：原来 th 和 td 都只是用通用 border-bottom:1px solid var(--line)，
   *       粘性表头随滚动停在顶部时，表头与表格正文之间视觉"粘连"、分不开，
   *       用户分不清哪一行是头，数据行数多的时候尤其混乱。
   * 策略：用 inset box-shadow 在底部画一条稍深的 --line-strong 分割线，
   *       它不会撑开盒模型、不会与 border-bottom 产生双线，而且只作用在 <th> 上，
   *       正文 td 仍保持浅线，视觉层次立刻拉开。*/
  box-shadow: inset 0 -1px 0 var(--line-strong);
}
td input, td select, td textarea {
  border: 0;
  padding: 5px 6px;
  background: transparent;
  min-width: 90px;
  border-radius: var(--radius-xs);
}
td input:focus, td select:focus, td textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
  background: var(--input-focus-bg);
}
td textarea { min-width: 260px; line-height: 1.5; }
td input:disabled, td textarea:disabled, td select:disabled { color: var(--disabled-text); background: var(--disabled-bg); }

.small { width: 76px; }
.medium { width: 140px; }
.wide { width: 280px; }

/* ===== 考勤与假勤 · 明细/年度表 + 年度统计卡片 ===== */
.attendance-file-selection {
  display: block;
  margin-top: 8px;
  color: var(--muted, var(--disabled-text));
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* 明细表与年度统计均设为整行板块（跨满 .inventory-layout 两列），
   否则两表并列各占一半空间，15 列在窄栏里非常拥挤。 */
.attendance-detail-panel,
.attendance-summary-panel { grid-column: 1 / -1; }
.attendance-detail-table th,
.attendance-detail-table td,
.attendance-summary-table th,
.attendance-summary-table td {
  text-align: center;
}
.attendance-summary-table,
.attendance-detail-table {
  width: 100%;
}
.attendance-detail-table tr.attendance-row,
.attendance-summary-table tr.attendance-row {
  cursor: pointer;
}
.attendance-detail-table tr.attendance-row.selected > td,
.attendance-summary-table tr.attendance-row.selected > td {
  background: var(--accent-soft);
}
.attendance-detail-table tr.attendance-totals-row > td,
.attendance-summary-table tr.attendance-totals-row > td {
  background: var(--panel-muted, var(--hover-bg-alt));
  font-weight: 600;
}
.attendance-check {
  width: 38px;
  padding-left: 6px;
  padding-right: 6px;
}
.attendance-check input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-width: 0; /* 抵消 td input { min-width: 90px }，否则复选框把整列撑到 ~100px */
  cursor: pointer;
  margin: 0;
}
.attendance-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px; /* 与 panel-head 的水平内边距一致，全选按钮不再紧贴面板左缘 */
}
/* 全选 / 导出选中 统一为一行文本按钮（不用 30px 图标钮，文字会折行） */
.attendance-detail-toolbar button {
  white-space: nowrap;
  line-height: 1.4;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.attendance-detail-toolbar button:hover {
  background: var(--hover-bg, rgb(var(--overlay-rgb) / .05));
  border-color: currentColor;
}
.attendance-detail-toolbar button:disabled {
  color: var(--disabled-text);
  cursor: not-allowed;
}
/* 年度表：让 .table-wrap 不再是滚动容器，th 才能锚定到外层 .inventory-latest-table
   贴顶固定；同时左移 18px，使复选框列（含全选）与 panel-head 内容对齐，不再紧贴面板左缘。
   （注：月度考勤明细已专属由 platform.css 管理为内部 table-wrap 滚动、顶部信息固定） */
.attendance-summary-panel .inventory-latest-table .table-wrap {
  overflow: visible;
  padding-left: 18px;
}
/* 全选按钮（第一个）与下方复选框列等宽并对齐（复选框列 38px） */
.attendance-detail-toolbar #attendanceDetailSelectAll,
.attendance-detail-toolbar #attendanceSummarySelectAll {
  min-width: 38px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.attendance-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.attendance-card {
  background: var(--panel-muted, var(--hover-bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attendance-card-label {
  color: var(--muted-text, var(--nav-muted));
  font-size: var(--fs-sm);
}
.attendance-card-value {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--text);
}
.attendance-year-select {
  min-width: 120px;
}
@media (max-width: 720px) {
  .attendance-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* 双击明细行 → 个人考勤与假勤弹窗 */
.attendance-employee-detail {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--overlay-rgb) / .35);
  padding: 20px;
}
.attendance-employee-detail[hidden] { display: none; }
.attendance-employee-detail-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  width: min(960px, 94vw);
  max-width: 960px;
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 12px 40px rgb(var(--overlay-rgb) / .22);
}
.attendance-employee-detail-card .panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
}
.attendance-employee-detail-card .inventory-latest-table {
  max-height: none;
}

/* 个人考勤与假勤 · 逐字段明细 */
.attendance-month-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 12px;
}
.attendance-month-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--muted-text, var(--nav-muted));
}
.attendance-month-picker select {
  min-width: 120px;
}
.attendance-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.attendance-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.attendance-tile {
  background: var(--panel-muted, var(--hover-bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attendance-tile-label {
  color: var(--muted-text, var(--nav-muted));
  font-size: var(--fs-sm);
}
.attendance-tile-value {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--text);
}
.attendance-field-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.attendance-field-group {
  background: var(--panel-muted, var(--hover-bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.attendance-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-weight: 650;
  color: var(--text);
}
.attendance-field-value {
  font-weight: 650;
  color: var(--accent, var(--info));
  white-space: nowrap;
}
.attendance-field-value i {
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--muted-text, var(--nav-muted));
  margin-left: 3px;
}
.attendance-field-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.attendance-field-sub-label {
  color: var(--muted-text, var(--nav-muted));
  font-size: var(--fs-sm);
}
.attendance-field-sub-text {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  word-break: break-word;
}
.attendance-field-remark .attendance-field-sub-text {
  color: var(--text);
}
@media (max-width: 720px) {
  .attendance-tiles { grid-template-columns: repeat(2, 1fr); }
  .attendance-field-groups { grid-template-columns: 1fr; }
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: var(--fs-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
  /* 徽章是一枚胶囊：窄列里**不许在词中间折行**（用户 2026-10-08 截图：
     「待配置」被折成「待配/置」、「在册编制」被折成「在册/编制」）。窄屏该做的是让表格横向滚动，而不是压字。 */
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }

/* ===== 登录遮罩 ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 15%, rgb(var(--accent-rgb) / .08), transparent 34%),
    linear-gradient(145deg, var(--sidebar-bg) 0%, var(--info-bg) 52%, var(--surface-muted) 100%);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-overlay.hidden { display: none; }

.login-card {
  width: min(440px, 100%);
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.login-brand-logo { width: 100px; height: auto; }
.login-card h1 { margin: 0; font-size: var(--fs-2xl); text-align: center; }
.login-description { color: var(--muted); text-align: center; margin-bottom: 14px; }
.login-card label {
  display: grid;
  gap: 6px;
  margin: 6px 0;
  font-size: var(--fs-base);
  color: var(--muted);
}
.login-card label input { font-size: var(--fs-md); color: var(--text); }
.login-password-field {
  position: relative;
  display: block;
}
.login-password-field input {
  width: 100%;
  padding-right: 50px;
}
.login-password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.login-password-eye {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-password-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-password-eye-slash { display: block; }
.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: transparent;
}
.login-password-toggle:active {
  transform: translateY(-50%);
}
.login-remember {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--text) !important;
  font-size: var(--fs-base) !important;
  margin: 4px 0 8px !important;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.login-remember span { color: var(--text); cursor: pointer; }
.login-error {
  color: var(--bad);
  margin: 4px 0 0;
  font-size: var(--fs-base);
  min-height: 18px;
}
.login-bootstrap {
  margin-top: 4px;
  font-size: var(--fs-sm);
  background: var(--panel-soft);
  border-style: dashed;
  color: var(--muted);
}
.login-bootstrap:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.login-security {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ===== 生成随机密码 ===== */
.login-generate-row {
  display: flex;
  gap: 8px;
  margin: -2px 0 2px;
}
.login-generate-row button {
  flex: 1;
  padding: 5px 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.login-generate-hint {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
  min-height: 16px;
}

/* ===== 通用 Picker / 弹层（改密、账号信息等） ===== */
.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--overlay-rgb) / .35);
  display: grid;
  place-items: center;
  z-index: 90;
  padding: 20px;
}
.picker-overlay.hidden { display: none; }
.picker-card {
  width: min(560px, 100%);
  max-height: 85vh;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.picker-head h3 { margin: 0; font-size: var(--fs-lg); }
.picker-close {
  padding: 2px 8px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  box-shadow: none;
  border-radius: var(--radius-xs);
}
.picker-close:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }

.picker-search {
  margin: 12px 14px 6px;
  width: calc(100% - 28px);
}
.picker-options {
  overflow: auto;
  padding: 6px 14px 10px;
  display: grid;
  gap: 4px;
}
.picker-options .picker-option {
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text);
}
.picker-options .picker-option:hover { background: var(--accent-soft); color: var(--accent-strong); }
.picker-options .picker-option[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.picker-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.password-card form {
  display: grid;
  gap: 10px;
  padding: 14px 18px 4px;
}
.password-card label {
  display: grid;
  gap: 6px;
  font-size: var(--fs-base);
  color: var(--muted);
}
.password-card p { padding: 0 18px; }

/* 账号信息弹层 */
.account-info-card { max-width: 440px; }
.account-info-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 10px;
}
.account-info-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: var(--fs-xl);
  flex: 0 0 auto;
}
.account-info-summary strong { display: block; font-size: var(--fs-lg); }
.account-info-summary span { color: var(--muted); font-size: var(--fs-base); }
.account-info-list {
  margin: 0;
  padding: 4px 20px 14px;
  display: grid;
  gap: 8px;
}
.account-info-list > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: start;
}
.account-info-list dt { color: var(--muted); }
.account-info-list dd { margin: 0; color: var(--text); }
.account-info-actions {
  justify-content: space-between;
  padding: 12px 18px;
}
.account-ai-model { display: grid; gap: 8px; margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-soft); }
.account-ai-model label { color: var(--muted); font-size: var(--fs-sm); }
.account-ai-model select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); }
.account-ai-model span { font-size: var(--fs-xs); }

/* ===== Settings / 数据维护网格 ===== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  padding: 16px;
}
.settings-grid h4 { margin: 4px 0 10px; }
.settings-grid > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--panel-soft);
  display: grid;
  gap: 8px;
  align-content: start;
}
.body-note {
  padding: 8px 18px;
  color: var(--muted);
  font-size: var(--fs-base);
}

/* body.locked 时模糊内容与强制隐藏全部导航系统（登录前） */
body.locked .main-content { filter: blur(6px); opacity: .6; pointer-events: none; }
body.locked .sidebar,
body.locked #topNavbar,
body.locked .top-mega-panel,
body.locked #floatingDock,
body.locked .dock-popover {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 小屏响应：侧栏自动覆盖 */
@media (max-width: 1000px) {
  .sidebar {
    box-shadow: 0 0 0 1px var(--line-strong), 0 30px 40px rgb(var(--overlay-rgb) / .22);
    z-index: 40;
  }
  .main-content { margin-left: 0; }
  body:not(.sidebar-collapsed) .sidebar {
    /* 展开时浮于内容上方，主内容不加边距 */
  }
  body.sidebar-collapsed .main-content { margin-left: 0; }
}

/* ===== 移动端侧边栏遮罩层（仅 768px 以下显示） ===== */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--overlay-rgb) / .4);
  z-index: 45;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
}
body.sidebar-mobile-open .sidebar-overlay {
  display: block;
  opacity: 1;
}

/* ===== 移动端汉堡菜单按钮（仅 768px 以下显示） ===== */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ===== 平板断点 768px：侧边栏改抽屉式 ===== */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 50;
    box-shadow: 2px 0 16px rgb(var(--overlay-rgb) / .15);
  }
  body.sidebar-mobile-open .sidebar { transform: translateX(0); }
  /* 抽屉形态下 body.sidebar-collapsed 不再影响侧栏（44px 形态已在 ≥769px 内隔离），
     这里只需保证主内容不被侧栏占位 */
  .main-content,
  body.sidebar-collapsed .main-content { margin-left: 0; }

  /* 汉堡菜单按钮显示 */
  .mobile-menu-btn { display: flex; }

  /* picker 弹层：宽度占满 */
  .picker-overlay { padding: 10px; }
  .picker-card {
    width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  /* 通用按钮增大触摸区 */
  button {
    min-height: 36px;
  }
}

/* ===== 手机断点 480px：单列、全屏弹层 ===== */
@media (max-width: 480px) {
  body { padding: 0; }

  .main-content {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 0;
  }

  /* 登录卡片 */
  .login-card {
    padding: 20px 16px;
    gap: 8px;
  }
  .login-brand-logo { width: 72px; }
  .login-card h1 { font-size: var(--fs-xl); }

  /* picker / 弹层全屏化 */
  .picker-overlay { padding: 0; }
  .picker-card {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .picker-head { padding: 12px 14px; }
  .picker-search { margin: 8px 12px 4px; width: calc(100% - 24px); }
  .picker-options { padding: 4px 12px 8px; }
  .picker-actions { padding: 8px 12px; }

  /* 按钮全宽（操作栏内） */
  .row-actions {
    flex-direction: column;
    gap: 6px;
  }
  .row-actions button {
    width: 100%;
    min-height: 40px;
  }
}

/* ============================================================
   齿轮图标（⚙️）：与 refresh/chevron/collapse-all 同 SVG mask 风格：
   stroke-width=2.2 + stroke-linecap/join=round
   ============================================================ */
.icon-gear {
  display: inline-block;
  width: 22px;                      /* 与 refresh icon 同尺寸（≈20-22px） */
  height: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}
.icon-gear.inline {
  width: 16px; height: 16px;
  vertical-align: -3px; margin-right: 6px;
}

/* 账号信息弹层里的「齿轮图标」按钮：纯图标方形（和修改密码/退出的文字按钮高度对齐） */
.picker-actions .icon-btn {
  position: relative;                        /* 让 data-tooltip 定位正确（不被 .sidebar-resizer 那套影响，因为这里不是 resizer，是真的需要 position） */
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.picker-actions .icon-btn:hover {
  color: var(--accent);           /* LOGO 红 var(--accent)，与主题统一（原用 var(--purple) 已映射，此处再加注释） */
  background: rgb(var(--accent-rgb) / .06);  /* LOGO 红 6% 透明浅底，原写死紫 rgb(var(--purple-rgb) / .06) */
  border-color: rgb(var(--accent-rgb) / .28);/* LOGO 红 28% 透明边，原写死紫 rgb(var(--purple-rgb) / .28) */
}
.picker-actions .icon-btn:active {
  background: rgb(var(--accent-rgb) / .12);  /* LOGO 红 12% 透明，原写死紫 rgb(var(--purple-rgb) / .12) */
}
/* 深色模式兜底（账号信息弹层背景是白色，所以不用改） */

/* ============================================================
   管理后台 view=admin：5-Tab 二级导航 + KPI + 登录趋势
   ============================================================ */
.admin-tabs {
  display: flex;
  gap: 2px;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px;
  margin: 10px 24px 18px 24px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgb(var(--overlay-rgb) / .035);
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--fs-base)/1.4 "PingFang SC", ui-sans-serif;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
.admin-tab svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: .65;
  transition: opacity .14s ease;
}
.admin-tab:hover {
  color: var(--text);
  background: var(--hover-bg);
}
.admin-tab:hover svg { opacity: .85; }
.admin-tab.active {
  color: var(--on-accent);
  background: var(--purple); /* var(--purple) 已映射为 --accent LOGO 红 */
  font-weight: 600;
  box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .25); /* 原 rgb(var(--purple-rgb) / .25) 紫 → LOGO 红 */
}
.admin-tab.active svg { opacity: 1; }
/* 移除旧的渐变下划线伪元素 */

.admin-tab-panel {
  display: none;
}
.admin-tab-panel.active {
  display: block;
  animation: adminPanelFade .18s ease;
}
@keyframes adminPanelFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 子面板里的小标题栏（比 panel-head 小一圈、无顶部 margin） */
.panel-head-nested {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 14px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 16px;
}
.panel-head-nested h4,
.panel-head-nested h5 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}
.panel-head-nested h5 { font-size: var(--fs-md); }
.panel-head-nested .row-actions { display: inline-flex; gap: 8px; align-items: center; }
.panel-head-nested .row-actions button.primary {
  background: var(--purple);
  color: var(--on-accent);
  border-color: var(--purple);
}
.panel-head-nested .row-actions button.primary:hover {
  filter: brightness(1.05);
}

/* ——— KPI 8 卡片网格 ——— */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .admin-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-left-color .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
  border-left-color: var(--purple-2);
  box-shadow: var(--shadow-soft);
}
/* 移除旧的渐变顶边 */
.kpi-icon  { font-size: var(--fs-2xl); line-height: 1; margin-bottom: 10px; }
.kpi-label {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.kpi-label svg {
  width: 14px; height: 14px;
  opacity: .6;
  flex-shrink: 0;
}
.kpi-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.kpi-unit {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
  letter-spacing: normal;
}
.kpi-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

/* ——— 登录趋势 7 天柱形图 ——— */
.admin-login-trend {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px 18px;
}
.trend-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items: end;
  min-height: 220px;
}
.trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}
.trend-bar {
  width: 60%;
  max-width: 48px;
  min-height: 2px;
  background: linear-gradient(180deg, var(--purple-2) 0%, var(--purple) 100%);
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 4px 10px rgb(var(--accent-rgb) / .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.trend-col:hover .trend-bar {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgb(var(--accent-rgb) / .26);
}
.trend-num {
  font: 700 13px ui-monospace, SFMono-Regular, Menlo;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.trend-lab {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-bottom: 2px;
  border-top: 1px dashed var(--line);
  width: 100%;
  text-align: center;
  padding-top: 8px;
}

/* ============================================================
   系统参数表单（分组卡片化）
   ============================================================ */
.config-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* —— 分组卡片 —— */
.config-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.config-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.config-section-head .section-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  background: var(--head);
  display: grid; place-items: center;
  color: var(--purple);
  flex-shrink: 0;
}
.config-section-head .section-icon svg {
  width: 15px; height: 15px;
}
.config-section-head h4 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.config-section-head .section-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-left: auto;
}

/* —— 数据维护卡片化操作入口 —— */
.admin-action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.action-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.action-card.danger {
  border-left: 3px solid var(--bad);
}
.action-card .card-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-xs);
  background: var(--head);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--purple);
}
.action-card.danger .card-icon {
  color: var(--bad);
}
.action-card .card-icon svg {
  width: 18px; height: 18px;
}
.action-card .card-body { flex: 1; }
.action-card .card-body h5 {
  margin: 0 0 2px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}
.action-card .card-body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.4;
}
.action-card .card-btn {
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s ease;
}
.action-card .card-btn:hover {
  background: var(--hover-bg);
  border-color: var(--purple);
  color: var(--purple);
}
.action-card .card-btn.danger {
  border-color: var(--bad);
  color: var(--bad);
}
.action-card .card-btn.danger:hover {
  background: rgb(var(--bad-rgb) / .06);
}
.config-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .config-row { grid-template-columns: 1fr; } }
.config-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.config-row label.full { grid-column: 1 / -1; }
.config-row label.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  color: var(--text-soft);
}
.config-row input[type="text"],
.config-row select,
.config-row textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-md);
  /* 同表格骨架：outline:none → outline-color:transparent，保留机制配合 :focus-visible */
  outline-color: transparent;
  transition: border-color .14s ease, box-shadow .14s ease;
  font-family: inherit;
}
.config-row textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.config-row input[type="text"]:focus,
.config-row select:focus,
.config-row textarea:focus {
  border-color: rgb(var(--accent-rgb) / .55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .10);
}
.config-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--purple);
}
.config-msg {
  font: 500 14px/1.5 "PingFang SC", ui-sans-serif;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
}
.config-msg.ok {
  background: rgb(var(--ok-rgb) / .08);
  border-color: rgb(var(--ok-rgb) / .28);
  color: var(--ok-text);
}
.config-msg.err {
  background: rgb(var(--bad-rgb) / .07);
  border-color: rgb(var(--bad-rgb) / .26);
  color: var(--bad-text);
}
.config-row.config-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.config-row.config-actions-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-strong);
  background: rgb(var(--rose-rgb) / .06);
  border: 1px solid rgb(var(--rose-rgb) / .28);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  font-family: inherit;
}
.btn-ghost:hover { background: rgb(var(--rose-rgb) / .12); border-color: rgb(var(--rose-rgb) / .45); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost.primary { background: var(--purple); color: var(--on-accent); border-color: var(--purple); }
.btn-ghost.primary:hover { filter: brightness(1.05); }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.ai-test-result {
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
}
.ai-test-result.pending { color: var(--muted); }
.ai-test-result.ok { color: var(--ok-text); }
.ai-test-result.err { color: var(--bad-text); }
.ai-config-hint.muted {
  color: var(--icon-gray);
  font-size: 12px;
  line-height: 1.6;
  max-width: 720px;
}

/* ===== 目标管理 AI 按钮 ===== */
.ai-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;        /* 去掉上下 padding，高度由 height 精确锁定 */
  height: 32px;           /* 与输入胶囊单行总高（28px 按钮 + 上下 2px padding）严格一致 → 32px */
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-strong);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bad-bg) 100%);
  border: 1px solid rgb(var(--rose-rgb) / .28);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  white-space: nowrap;
  /* 让 flex 父容器对齐时，按钮自身垂直中心对齐（配合 align-items:center） */
  align-self: center;
  flex: 0 0 auto;
}
.ai-action-btn:hover {
  background: linear-gradient(180deg, var(--bg) 0%, var(--accent-soft) 100%);
  border-color: rgb(var(--rose-rgb) / .5);
  box-shadow: 0 1px 3px rgb(var(--rose-rgb) / .12);
}
.ai-action-btn:active { transform: translateY(1px); }
.ai-action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--surface-muted);
  box-shadow: none;
}
.ai-action-btn.primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); /* 纯 LOGO 红渐变，不保留紫色终点过渡 */
  color: var(--on-accent);
  border-color: transparent;
}
.ai-action-btn.primary:hover { filter: brightness(1.08); }
.ai-action-inline-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;       /* 强制一行：✨AI 按钮和输入胶囊 / 内部组件永远同一行，不分行 */
  align-items: center;     /* 唯一对齐机制：同一行内所有子元素垂直中心线严格对齐 */
  justify-content: flex-start;
  margin-bottom: 6px;
  min-height: 0;
  height: auto;
  min-width: 0;            /* 允许 flex 项收缩，窄屏时不会因溢出触发换行或滚动条 */
  width: 100%;
  box-sizing: border-box;
}
/* 整个"气泡历史 + 输入胶囊"的最外层包装：
   单行（无气泡）时高度 = 输入胶囊 32px，完全贴合按钮组件高度；
   有气泡时按内容向下自然伸展，永远不会被父容器硬拉或强制底部对齐。 */
.ai-chat-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 输入胶囊永远在最上面，后接气泡，不空出大片白 */
  align-items: stretch;
  min-width: 0;              /* 关键：允许收缩到比内容窄，flex 剩余空间才能正确分配 */
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto;            /* 正确写法：吃掉 ✨AI 按钮以外的全部剩余空间（不撑破父容器） */
  /* 不能写 width:100% —— flex 子项 100% 宽 + 按钮宽会溢出，flex 又压回内容宽度，导致胶囊只有内容宽 */
  max-width: none;
  align-self: stretch;
  /* 基线对齐保险：和相邻元素（✨AI按钮）共享同一条 text-baseline，避免视觉跳动 */
  vertical-align: middle;
  box-sizing: border-box;
}
.ai-chat-wrap > :first-child { margin-top: 0; }
.ai-chat-wrap > :last-child { margin-bottom: 0; }
/* 输入胶囊本身：单行 32px，多行随 textarea 自然变高，按钮贴底 */
.ai-chat-bar {
  display: flex;
  align-items: center;     /* 单行/多行统一：胶囊内所有子元素（输入框 / 发送 / 重置）垂直中心线严格对齐 */
  gap: 0;
  flex: 1 1 auto;          /* 在 .ai-chat-wrap（已是剩余空间）内部撑满 */
  min-width: 120px;        /* 两个 30×30 按钮(60) + 分隔线 + 输入最小可见区 ≈ 120，窄屏也不溢出换行 */
  background: var(--bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  padding: 0 4px; /* 左右 4px 呼吸，上下 0 → 内容区高度 = 胶囊总高（min 32）- border = 正好塞下 32px 按钮 + 32px textarea 单行 */
  min-height: 32px !important; /* 和 ✨AI 按钮外高 32px 严格相同，单行三按钮像素对齐 */
  height: auto !important;
  box-shadow: 0 1px 2px rgb(var(--overlay-rgb) / .03);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;             /* 撑满 .ai-chat-wrap 的剩余宽度（.ai-chat-wrap 由 flex:1 1 auto 决定，不会溢出） */
  max-width: 100%;
  box-sizing: border-box;
}
.ai-chat-bar:focus-within {
  border-color: var(--accent);  /* LOGO 红 var(--accent)，与全局 focus-ring 统一色系 */
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
}
.ai-chat-input-wrap {
  position: relative;
  flex: 1 1 auto;          /* 在胶囊内部吃掉 textarea 以外（发送/重置按钮）的全部剩余空间 */
  display: flex;
  align-items: center;   /* 输入框容器内部：textarea 与周围元素统一垂直居中（单行时内容正好居中） */
  min-width: 0;            /* 允许收缩，textarea 才能 flex 撑满 */
  /* 注：原 border-right / padding-right / margin-right 用来画"输入框 vs 按钮"分隔线 → 直接删除，避免重置按钮右边多一条浅竖线 */
  padding-right: 0;
  margin-right: 0;
  border-right: none;
  box-sizing: border-box;
}
.ai-chat-input-wrap .ai-chat-input {
  width: 100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  /* 垂直居中实现：line-height 20px + 上7px下3px padding = 精确 30px，placeholder 文字视觉居中（字体实际渲染偏上需补偿 2px）；多行时内容自然从顶往下排 */
  padding: 8px 8px 2px;
  background: var(--bg);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  line-height: 20px;
  box-sizing: border-box;
  min-height: 30px;
  height: auto;           /* 单行 = min-height 30；多行按内容自然变高（原 height:30px 锁死高度导致文字顶/底偏移） */
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  resize: none;
  display: block;
  align-self: center;     /* 垂直中线对齐，和发送/重置按钮中心线一致 */
  border-radius: 8px;
  transition: background .12s ease;
}
.ai-chat-input-wrap .ai-chat-input:hover { background: var(--head); }
.ai-chat-input-wrap .ai-chat-input:focus { background: var(--bg); }
.ai-chat-input-wrap .ai-chat-input::placeholder {
  color: var(--icon-gray);
  white-space: nowrap;
  /* 占位文字和真实输入文字基线对齐，避免视觉跳动 */
  line-height: 20px;
}
/* 发送 / 重置 按钮：与 ✨AI 按钮外高严格同为 32px（border-box），单行三按钮像素对齐 */
.ai-chat-bar .ai-chat-send,
.ai-chat-bar .ai-chat-reset {
  align-self: center;   /* 统一父级 center：单行/多行按钮中心线严格与输入框内容对齐 */
  margin-top: 0;
  margin-bottom: 0;
}
.ai-chat-bar .ai-chat-send {
  margin-left: 2px;
  margin-right: 2px;
}
.ai-chat-bar .ai-chat-reset {
  margin-right: 0;
}
.ai-chat-count {
  font-size: 11px;
  color: var(--icon-gray);
  white-space: nowrap;
  padding: 0 4px;
}
.ai-chat-count.active { color: var(--accent); } /* LOGO 红 var(--accent)：字数到达上限时的提示色 */
.ai-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;             /* 正方形，与 height:30 一致，纯图标按钮 */
  height: 30px;            /* 胶囊 min-height:32(border-box) 内净高 30px，精确撑满 + 与 textarea、重置同高 */
  box-sizing: border-box;
  padding: 0;              /* 纯图标，无左右 padding */
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--disabled-text);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  flex: 0 0 auto;
}
.ai-chat-send:hover {
  background: var(--bad-bg);
  border-color: var(--accent-dim);
  color: var(--bad-text);
}
.ai-chat-send:active { transform: translateY(1px); }
.ai-chat-send:disabled {
  background: var(--hover-bg);
  border-color: var(--line);
  color: var(--icon-gray);
  cursor: not-allowed;
}
.ai-chat-send svg {
  width: 15px;
  height: 15px;
  display: block;
}
.ai-chat-send:hover svg {
  transform: translateX(1px);
}
.ai-chat-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;             /* 正方形，与 height:30 一致，纯图标按钮 */
  height: 30px;            /* 同发送按钮 30px；1px border 被 box-sizing 包含，总外高 30，不溢出胶囊内净 30 */
  box-sizing: border-box;
  padding: 0;              /* 纯图标，无左右 padding */
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--disabled-text);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-right: none;      /* 重置是胶囊最右元素：右边框紧贴胶囊右内边，形成"多余一条浅竖线"，直接删除右边框 */
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  flex: 0 0 auto;
}
.ai-chat-reset:hover {
  background: var(--bad-bg);
  border-color: var(--accent-dim);
  border-right-color: transparent; /* hover 时上/下/左三条边变红，右边仍保持透明（不重新画出浅红竖线） */
  color: var(--bad-text);
}
.ai-chat-reset svg {
  width: 15px;
  height: 15px;
  display: block;
  transition: transform .35s ease;
}
.ai-chat-reset:hover svg {
  transform: rotate(-90deg); /* 悬停时旋转强化"重置"语义 */
}
/* 草稿气泡里的"接受/撤销"按钮：文字自适应宽度（不使用发送/重置正方形样式） */
.ai-chat-accept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); /* LOGO 红渐变：var(--accent) → var(--accent-strong)，与发送按钮同色系 */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-chat-accept-btn:hover { filter: brightness(1.08); }
.ai-chat-accept-btn:active { transform: translateY(1px); }
.ai-chat-reject-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--disabled-text);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-chat-reject-btn:hover {
  background: var(--bad-bg);
  border-color: var(--accent-dim);
  color: var(--bad-text);
}
.ai-chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}
.ai-chat-bubble {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.ai-chat-bubble.role-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--info-bg), var(--info-bg));
  color: var(--info-text);
  border: 1px solid var(--info-dim);
  border-bottom-right-radius: 2px;
}
.ai-chat-bubble.role-assistant {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 2px;
  box-shadow: 0 1px 2px rgb(var(--overlay-rgb) / .04);
}
.ai-chat-bubble .ai-bubble-meta {
  font-size: 10px;
  opacity: .65;
  margin-bottom: 2px;
}
.ai-chat-bubble.role-assistant .ai-bubble-meta { color: var(--accent); } /* LOGO 红 var(--accent)：AI 回复气泡的元信息色 */
.ai-chat-bubble.role-user .ai-bubble-meta { color: var(--text-soft); } /* 深 slate 灰：用户气泡的元信息色，与 AI 红色区分，且不出现紫色系 */
.ai-chat-bubble.dim { opacity: .55; }

/* ===== 管理后台：通用按钮修饰（ghost/danger）===== */
button.ghost {
  background: var(--bg);
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button.ghost:hover { background: var(--surface-muted); border-color: var(--line-strong); color: var(--text); }
button.ghost:active { transform: translateY(1px); }
button.danger {
  background: var(--bg);
  color: var(--bad-text);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button.danger:hover { background: var(--bad-bg); border-color: var(--accent-dim); }
button.danger:active { transform: translateY(1px); }

/* ===== 管理后台：AI 对话日志列表 + 详情 ===== */
#adminAiLogsTable {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
}
#adminAiLogsTable thead th {
  position: sticky;
  top: 0;
  background: var(--surface-muted);
  z-index: 1;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-soft);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
#adminAiLogsTable tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hover-bg);
  vertical-align: top;
}
#adminAiLogsTable tbody tr:hover td { background: var(--head); }

/* ===== 管理后台：账号权限表格 — 工号/姓名等短列严格按固定列宽（167634：max-width 对 td 无效，必须 width+table-layout:fixed） ===== */
#adminAccountsTable, #accountsTable {
  width: 100% !important;
  table-layout: fixed !important;      /* 167634：只有 fixed 下 th/td 的 width/max-width 才严格生效 */
  background: var(--bg);
  border-collapse: separate;
  border-spacing: 0;
}
/* 兜底：哪怕 JS 没执行（缓存），只要 CSS 下载了，工号列也不会被撑大（!important 覆盖 inline style 以外的规则） */
#adminAccountsTable .ac-col-acct-no,
#accountsTable       .ac-col-acct-no {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
#adminAccountsTable .ac-col-name,
#accountsTable       .ac-col-name {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
#adminAccountsTable .ac-col-enabled,
#accountsTable       .ac-col-enabled {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  text-align: center !important;
}
.ai-logs-detail-meta {
  font-size: 12px;
  color: var(--disabled-text);
}
.ai-split-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 8px 8px;   /* 上 10px 与拆分行底部隔开；左右 8px 与 .annual-split-card 的 margin:0 8px 对齐 */
  flex-wrap: wrap;
}
.ai-busy-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgb(var(--rose-rgb) / .25);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: ai-spin .6s linear infinite;
  margin-right: 4px;
  vertical-align: -1px;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* ===== 组织架构编辑器（与公司年目标 .department-tree / .tree-node 视觉统一） ===== */
.org-editor {
  margin: 12px 10px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--hover-bg-alt);
  padding: 10px;
  max-height: 560px;
  overflow-y: auto;
  font-family: -apple-system, "SF Pro Text", "PingFang SC", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.org-tree-node {
  position: relative;
  margin: 4px 0;
}
.org-tree-node.root > .org-tree-row {
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 9px 8px;
  border: 1px solid var(--line-strong);
  margin-bottom: 6px;
  background: var(--bg);
}
.org-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgb(var(--inverse-rgb) / .82);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
}
.org-tree-row:hover {
  background: var(--bg);
  border-color: var(--accent-soft);
  box-shadow: 0 2px 8px rgb(var(--overlay-rgb) / .04);
}
.org-tree-row.new-row {
  background: var(--bad-bg);
  box-shadow: inset 2px 0 0 var(--purple);
}
.org-tree-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  opacity: 1 !important;
}
.org-tree-chevron:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.org-tree-chevron.expanded {
  color: var(--muted);
}
.org-tree-chevron i {
  width: 14px;
  height: 14px;
  display: block;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transition: transform .18s ease;
}
.org-tree-chevron:not(.expanded) i {
  transform: rotate(-90deg);
}
.org-tree-chevron-spacer {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.org-tree-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  background-color: var(--icon-gray);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='3' width='6' height='5' rx='1.2'/><rect x='2.5' y='16' width='6' height='5' rx='1.2'/><rect x='15.5' y='16' width='6' height='5' rx='1.2'/><path d='M12 8v4M5.5 12h13M5.5 12v4M18.5 12v4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='3' width='6' height='5' rx='1.2'/><rect x='2.5' y='16' width='6' height='5' rx='1.2'/><rect x='15.5' y='16' width='6' height='5' rx='1.2'/><path d='M12 8v4M5.5 12h13M5.5 12v4M18.5 12v4'/></svg>");
}
.org-tree-node.root > .org-tree-row .org-tree-icon { background-color: var(--accent); }
.org-tree-indent {
  display: inline-block;
  width: calc(var(--depth, 0) * 18px);
  flex-shrink: 0;
}
.org-tree-name {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--dark-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-tree-name.root-name {
  color: var(--dark-bg);
  font-weight: 600;
}
.org-tree-input {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--dark-bg);
  padding: 2px 6px;
  border: 1px solid var(--accent);  /* LOGO 红边（var(--purple) 已映射，但直接用 --accent 语义更明确） */
  border-radius: 4px;
  background: var(--bg);
  /* outline:none → outline-color:transparent；键盘焦点由全局 :focus-visible 接管（红色焦点环） */
  outline-color: transparent;
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .15); /* LOGO 红 15% 发光环，原写死紫 rgb(var(--purple-rgb) / .15) */
  min-width: 0;
  font-family: inherit;
}
.org-tree-input-new {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .2); /* LOGO 红 20% 发光环（新建更明显），原写死紫 rgb(var(--purple-rgb) / .2) */
}
.org-tree-actions {
  display: flex;
  gap: 2px;
  opacity: .45;
  transition: opacity .15s;
  flex-shrink: 0;
}
.org-tree-row:hover .org-tree-actions {
  opacity: 1;
}
.org-owner-button {
  width: 156px;
  min-width: 156px;
  height: 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  box-shadow: none;
  text-align: left;
}
.org-owner-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.org-owner-button:hover {
  border-color: var(--scrollbar-thumb-hover);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.org-owner-button.has-owner { color: var(--text); }
.org-owner-button.missing-owner { color: var(--warn); background: var(--warn-bg); }
.org-owner-label { font-size: var(--fs-xs); color: var(--muted); }
.org-owner-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.org-owner-arrow { font-size: 18px; line-height: 1; color: var(--icon-gray); }
.org-btn {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--icon-gray);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.org-btn:hover {
  background: var(--purple);
  color: var(--on-accent);
}
.org-btn.danger:hover {
  background: var(--bad-bright);
  color: var(--on-accent);
}
.org-tree-children {
  margin-left: 19px;
  border-left: 1px solid var(--line);
  padding-left: 5px;
}
.org-owner-picker-card { width: min(520px, 100%); }
.org-owner-picker-node { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.org-owner-picker-meta { padding: 4px 16px 6px; color: var(--muted); font-size: var(--fs-sm); }
.org-owner-options { min-height: 180px; max-height: 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.org-owner-options .org-owner-option {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
  box-shadow: none;
}
.org-owner-option-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.org-owner-options .org-owner-option[aria-selected="true"] .org-owner-option-avatar { background: rgb(var(--inverse-rgb) / .2); color: var(--on-accent); }
.org-owner-option-check { text-align: center; }
.org-owner-empty { grid-column: 1 / -1; padding: 48px 16px; text-align: center; color: var(--muted); }
.org-owner-picker-actions { border-top: 1px solid var(--line); padding: 12px 14px; }
@media (max-width: 760px) {
  .org-owner-group { gap: 4px; }
  .org-owner-button { width: 116px; min-width: 116px; }
  .org-owner-label { display: none; }
  .org-owner-options { grid-template-columns: 1fr; }
}

/* ===== 管理后台：与主导航统一的扁平双栏风格 ===== */
.admin-view > .admin-shell {
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}
.admin-shell > .admin-shell-head {
  min-height: 50px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.admin-shell-head h3 { font-size: var(--fs-lg); }
.admin-workspace {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 190px);
}
.admin-workspace > .admin-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 14px 10px;
  overflow: visible;
  background: var(--surface-muted);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.admin-nav-label {
  padding: 2px 10px 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}
.admin-workspace .admin-tab {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-weight: 400;
  box-shadow: none;
}
.admin-workspace .admin-tab svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  opacity: 1;
  stroke-width: 1.4;
}
.admin-workspace .admin-tab:hover,
.admin-workspace .admin-tab.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
  box-shadow: none;
}
.admin-workspace .admin-tab:hover svg,
.admin-workspace .admin-tab.active svg {
  color: var(--accent-strong);
  opacity: 1;
}
.admin-content {
  min-width: 0;
  padding: 18px 22px 24px;
  background: var(--bg);
}
.admin-content > .admin-tab-panel.active { animation: none; }
.admin-content .panel-head-nested {
  padding: 0 0 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.admin-content .panel-head-nested h4 { font-size: var(--fs-lg); }
.admin-content .body-note {
  background: var(--surface-muted);
  border: 0;
  border-radius: 6px;
  color: var(--muted);
}
.admin-content .kpi-card,
.admin-content .config-section,
.admin-content .action-card,
.admin-content .admin-login-trend,
.admin-content .admin-config-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  background: var(--bg);
}
.admin-content .kpi-card {
  border-left: 1px solid var(--line);
  padding: 13px 14px;
}
.admin-content .kpi-card:hover,
.admin-content .action-card:hover {
  border-color: var(--line-strong);
  background: var(--bg);
  box-shadow: none;
}
.admin-content .kpi-label svg,
.admin-content .config-section-head .section-icon,
.admin-content .action-card .card-icon {
  color: var(--muted);
}
.admin-content .config-section-head .section-icon,
.admin-content .action-card .card-icon {
  background: var(--hover-bg-alt);
}
.admin-content .action-card.danger { border-left: 2px solid var(--bad); }
.admin-content .org-editor {
  margin-left: 0;
  margin-right: 0;
  border-radius: 8px;
}
.admin-content .table-wrap { border-radius: 8px; box-shadow: none; }
@media (max-width: 900px) {
  .admin-workspace { display: block; min-height: 0; }
  .admin-workspace > .admin-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }
  .admin-nav-label { display: none; }
  .admin-workspace .admin-tab { width: auto; flex: 0 0 auto; }
  .admin-content { padding: 16px 14px 20px; }
}

/* ===== Step 3：空态 .empty 基类（所有模块通用，表格/面板/列表无数据时直接 class='empty'）=====
 * 背景：所有模块都可能出现"表格没数据""列表空了""选了筛选条件无结果"，
 *       之前每个模块都自己写或留白，视觉不统一、用户也不知道"是还没加载？真的空了？还是加载失败？"
 * 统一规范：
 *   - 居中布局，垂直留 40px/48px 空气，不会贴边
 *   - 灰色图标（文字字符 ✕，不依赖额外图片/SVG）+ 一行主标题 + 可选副标题
 *   - 标题用 muted 灰色(不是全灰)，副标题更淡，明确传递"这是占位信息"
 *   - 不设 min-height，包裹在 table-wrap/panel 内时可由容器撑开；模块可按需加 style 控高
 * 使用示例：
 *   <div class="empty">
 *     <div class="empty-icon">✕</div>
 *     <div class="empty-title">暂无数据</div>
 *     <div class="empty-sub">请先新增公司年目标或筛选其它负责人</div>
 *   </div>
 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 48px;
  gap: 10px;
  color: var(--muted);
  background: transparent;
}
.empty-icon {
  font-size: 32px;
  line-height: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--head);
  display: grid;
  place-items: center;
  color: var(--muted);
  margin-bottom: 4px;
  border: 1px solid var(--line);
}
.empty-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.empty-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
  max-width: 380px;
}

/* ===== AI 目标跳转高亮：3 秒黄闪淡出 ===== */
@keyframes ai-row-highlight {
  0%   { background: var(--warn-dim); box-shadow: inset 0 0 0 2px var(--warn-bright); }
  35%  { background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn-bright); }
  70%  { background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--warn-bright); }
  100% { background: transparent; box-shadow: none; }
}
tr.ai-highlight-row,
[data-annual-row].ai-highlight-row,
[data-monthly-row].ai-highlight-row {
  animation: ai-row-highlight 3.2s cubic-bezier(.4,0,.2,1) both !important;
}
tr.ai-highlight-row td,
tr[data-monthly-row].ai-highlight-row td,
tr[data-annual-row].ai-highlight-row td {
  background-color: transparent !important; /* 让动画通过 tr 生效，不受单格 TD 背景干扰 */
}

/* ===== AI 草稿对比气泡：窄屏时由左右两栏降级为上下堆叠 ===== */
.ai-draft-compare-bubble > [style*="grid-template-columns:repeat(2"] {
  /* 外层容器的内联 grid 由 JS 注入；这里在窄屏下直接覆盖为 1 列 */
}
@media (max-width: 680px) {
  .ai-draft-compare-bubble [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ===== 权限设定弹窗 ===== */
.perm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--overlay-rgb) / 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.perm-modal {
  width: min(520px, 100%);
  max-height: 85vh;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgb(var(--overlay-rgb) / 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.perm-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.perm-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.perm-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.perm-close-btn:hover {
  background: var(--hover-bg);
  color: var(--text-soft);
}
.perm-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.perm-account-info {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: var(--surface-muted);
  border-radius: 8px;
  margin-bottom: 16px;
}
.perm-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.perm-info-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.perm-info-item span:last-child {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.perm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.perm-module-item {
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 12px 16px;
  transition: border-color 0.15s;
}
.perm-module-item:hover {
  border-color: var(--scrollbar-thumb);
}
.perm-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.perm-module-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.perm-module-desc {
  font-size: 12px;
  color: var(--muted);
}
.perm-level-group {
  display: flex;
  gap: 8px;
}
.perm-level-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--sidebar-border);
  background: var(--bg);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.perm-level-btn:hover {
  border-color: var(--scrollbar-thumb);
  background: var(--surface-muted);
}
.perm-level-btn.active {
  border-color: var(--accent);
  background: var(--sidebar-bg);
  color: var(--accent-strong);
}
.perm-level-icon {
  font-size: 16px;
}
.perm-level-label {
  font-size: 12px;
  font-weight: 500;
}
.perm-level-btn.active .perm-level-label {
  color: var(--accent-strong);
}
.perm-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.perm-btn-cancel {
  padding: 8px 16px;
  border: 1px solid var(--scrollbar-thumb);
  background: var(--bg);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.perm-btn-cancel:hover {
  background: var(--surface-muted);
  border-color: var(--icon-gray);
}
.perm-btn-save {
  padding: 8px 16px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.perm-btn-save:hover {
  background: var(--accent-strong);
}

/* 权限设定按钮（在表格中） */
.ac-perm-btn {
  padding: 4px 12px;
  border: 1px solid var(--scrollbar-thumb);
  background: var(--bg);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.ac-perm-btn:hover {
  border-color: var(--accent);
  background: var(--sidebar-bg);
  color: var(--accent-strong);
}

/* Shared login language control; reuses the existing globe asset. */
.login-card { position: relative; }
.login-language-control { position: absolute; top: 14px; right: 14px; z-index: 2; }
.login-language-toggle { width: 32px; height: 32px; }
.login-language-menu { top: 38px; left: auto; right: 0; min-width: 130px; }
.login-language-toggle:focus-visible { outline: 2px solid var(--primary, var(--accent)); outline-offset: 2px; }

/* ==========================================================================
   多模态导航布局与微标动效（顶部横排 Mega 面板 / 底部 Dock 鱼眼 / 呼吸与滚动微标）
   ========================================================================== */

/* ===== 1. 布局模式切换与容器适配 ===== */
body.nav-mode-top .sidebar,
body.nav-mode-dock .sidebar,
body.nav-mode-top .sidebar-resizer,
body.nav-mode-dock .sidebar-resizer,
body.nav-mode-top #mobileMenuBtn,
body.nav-mode-dock #mobileMenuBtn {
  display: none !important;
}

body.nav-mode-top .main-content {
  margin-left: 0 !important;
  padding-top: 58px;
  max-height: 100vh;
}

body.nav-mode-dock .main-content {
  margin-left: 0 !important;
  padding-bottom: 96px;
  max-height: 100vh;
}

body:not(.nav-mode-top) #topNavbar {
  display: none !important;
}

body:not(.nav-mode-dock) #floatingDock {
  display: none !important;
}

/* ===== 2. 状态点与计数微标（呼吸动画 + 上下滚动） ===== */
.nav-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.nav-badge-wrap.hidden {
  display: none !important;
}
.nav-badge-wrap.badge-clearing {
  transform: scale(0) !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* 呼吸动画状态点 */
.nav-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ok);
  flex-shrink: 0;
  display: inline-block;
  opacity: 0.9;
}
.nav-status-dot.breathing {
  animation: dotBreathe 1.8s infinite ease-in-out;
}
@keyframes dotBreathe {
  0%, 100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / 0.75);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgb(var(--ok-rgb) / 0);
    opacity: 1;
  }
}

/* 计数微标与数字上下滚轮 */
.nav-counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(var(--accent-rgb) / 0.35);
}
.nav-counter-badge.hidden {
  display: none !important;
}
.rolling-counter-track {
  display: inline-flex;
  flex-direction: column;
  height: 18px;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.rolling-num {
  height: 18px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* 侧边栏按钮里的微标容器对齐 */
.sidebar .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== 3. 顶部横排主导航与通栏下落面板 ===== */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgb(var(--inverse-rgb) / 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sidebar-border, var(--line));
  z-index: 100;
  box-shadow: 0 2px 8px rgb(var(--overlay-rgb) / 0.04);
}
.top-nav-inner {
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.top-brand-logo {
  height: 28px;
  width: auto;
  display: block;
}
.top-brand-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* 菜单项容器 */
.top-nav-menu {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 16px;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scrollbar-gutter: auto !important;
}
.top-nav-menu::-webkit-scrollbar {
  display: none;
}
.top-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-soft);
  border-radius: var(--radius-xs, 6px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.top-nav-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs, 6px);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.top-nav-item:hover {
  background: var(--hover-bg, rgb(var(--overlay-rgb) / 0.04));
}
.top-nav-item.active,
.top-nav-item.open {
  color: var(--accent-strong);
  font-weight: 600;
}
.top-nav-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  transition: transform 0.25s ease;
}
.top-nav-item.open .top-nav-arrow {
  transform: rotate(180deg);
}

/* 顶栏操作区 */
.top-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.top-nav-action-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm, 6px);
  color: var(--icon-gray, var(--muted));
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
  flex-shrink: 0;
}
.top-nav-action-btn:hover {
  background: var(--hover-bg, rgb(var(--overlay-rgb) / 0.05));
  color: var(--nav-muted, var(--text));
}
.top-nav-action-btn:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
#topNavSearchBtn svg,
#topNavReloadBtn svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* 2026-10-09 用户反馈「切换语言、切换导航布局的图标图形，与搜索、刷新不一样大」：
   本枚原为 17px（侧栏那枚还在旧工具栏时的尺寸），但侧栏那枚现已随操作条变成 20px，
   于是它成了顶栏里唯一偏小的一枚。改为 20px + 2.2 描边，与搜索 / 刷新 / 侧栏同规格。 */
#topNavModeToggle svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 2.2;   /* svg 自带 1.8 属性，靠 CSS 覆盖（与侧栏同款做法） */
}
/* 底部停靠里的同一枚：盒子已是 20px，只差描边口径 */
#dockNavModeToggle svg {
  stroke-width: 2.2;
}
.top-nav-account-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.top-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgb(var(--overlay-rgb) / 0.1);
}

/* 通栏下落面板 (Mega Dropdown Panel) */
.top-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 16px 36px rgb(var(--overlay-rgb) / 0.12), 0 2px 6px rgb(var(--overlay-rgb) / 0.04);
  transform-origin: top center;
  z-index: 99;
}
.top-mega-panel.open {
  animation: megaPanelDropDown 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.top-mega-panel.closing {
  animation: megaPanelPullUp 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes megaPanelDropDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes megaPanelPullUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.top-mega-panel-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 28px 28px;
}
.top-mega-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.top-mega-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.top-mega-desc {
  font-size: 13px;
  color: var(--muted);
}

/* 分列展示容器与跨菜单移动平滑切换 */
.top-mega-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 24px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.top-mega-columns.cross-fade-in {
  animation: crossFadeIn 0.15s ease both;
}
@keyframes crossFadeIn {
  from {
    opacity: 0.4;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 分组列块 */
.top-mega-col-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top-mega-col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 4px;
}

/* 子页面卡片条目（带图标与一行说明） */
.top-mega-subitem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 10px);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.top-mega-subitem:hover {
  background: var(--hover-bg, var(--surface-muted));
  border-color: var(--line);
  transform: translateY(-1px);
}
.top-mega-subitem.active {
  background: var(--accent-soft);
  border-color: rgb(var(--accent-rgb) / 0.15);
}
.top-mega-subitem-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--head, var(--hover-bg));
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.top-mega-subitem:hover .top-mega-subitem-icon {
  background: var(--bg);
  color: var(--accent);
  box-shadow: 0 2px 6px rgb(var(--overlay-rgb) / 0.06);
}
.top-mega-subitem.active .top-mega-subitem-icon {
  background: var(--bg);
  color: var(--accent-strong);
}
.top-mega-subitem-icon svg {
  width: 18px;
  height: 18px;
}
.top-mega-subitem-content {
  flex: 1;
  min-width: 0;
}
.top-mega-subitem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.top-mega-subitem-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-mega-subitem.active .top-mega-subitem-label {
  color: var(--accent-strong);
}
.top-mega-subitem-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 4. 底部居中浮动停靠栏 (Floating Dock) ===== */
.floating-dock {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  overflow: visible;
  pointer-events: none;
}
.dock-container {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 58px;
  padding: 8px 14px;
  background: rgb(var(--inverse-rgb) / 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgb(var(--inverse-rgb) / 0.65);
  box-shadow: 0 16px 36px rgb(var(--overlay-rgb) / 0.16), 0 2px 8px rgb(var(--overlay-rgb) / 0.08);
  border-radius: 22px;
  pointer-events: auto;
  box-sizing: content-box;
}

/* Dock 图标项：一级菜单生成图标只放图标 */
.dock-item {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--dock-scale, 1));
  transform-origin: bottom center;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.dock-container:not(:hover) .dock-item {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock-icon-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--hover-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgb(var(--overlay-rgb) / 0.06);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.dock-item:hover .dock-icon-wrapper {
  background: var(--bg);
  box-shadow: 0 4px 12px rgb(var(--overlay-rgb) / 0.12);
  color: var(--accent);
}
.dock-item.active .dock-icon-wrapper {
  background: var(--bg);
  color: var(--accent-strong);
}
.dock-icon svg {
  width: 20px;
  height: 20px;
}

/* Dock 图标右上角微标适配 */
.dock-item .nav-badge-wrap {
  position: absolute;
  top: -4px;
  right: -6px;
  margin-left: 0;
  z-index: 3;
}
.dock-item .nav-counter-badge {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
}
.dock-item .rolling-counter-track,
.dock-item .rolling-num {
  height: 15px;
  line-height: 15px;
}
.dock-item .nav-status-dot {
  width: 5px;
  height: 5px;
}

/* 悬停时上方显示名称 Tooltip */
.dock-tooltip {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: rgb(var(--overlay-rgb) / 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--on-inverse);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgb(var(--overlay-rgb) / 0.2);
  z-index: 20;
}
.dock-item:hover .dock-tooltip,
.dock-item.dock-hovered .dock-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 当前页图标下方加一个小圆点 */
.dock-active-dot {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-strong);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  pointer-events: none;
}
.dock-item.active .dock-active-dot {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* 分隔线 */
.dock-divider {
  width: 1px;
  height: 32px;
  background: var(--line);
  margin: 0 2px 5px;
  flex-shrink: 0;
}

/* Dock 子项选择卡片浮层 (Dock Popover) */
.dock-popover {
  position: absolute;
  bottom: 78px;
  left: 50%;
  min-width: 240px;
  max-width: 320px;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgb(var(--overlay-rgb) / 0.15);
  padding: 12px;
  pointer-events: auto;
  z-index: 1001;
  animation: dockPopoverUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dockPopoverUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dock-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.dock-popover-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.dock-popover-close {
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.dock-popover-close:hover {
  background: var(--hover-bg, rgb(var(--overlay-rgb) / 0.05));
  color: var(--text);
}
.dock-popover-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.dock-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: 13px;
  color: var(--text);
  transition: background-color 0.12s ease;
}
.dock-popover-item:hover {
  background: var(--hover-bg, rgb(var(--overlay-rgb) / 0.05));
}
.dock-popover-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}
.dock-popover-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dock-popover-item-icon svg {
  width: 16px;
  height: 16px;
}

/* ===== 5. 导航模式切换菜单组件 (通用下拉气泡) ===== */
.sidebar-navmode-control,
.top-nav-mode-control,
.dock-navmode-control {
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar-navmode-menu,
.top-navmode-menu,
.dock-navmode-menu {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 10px 25px rgb(var(--overlay-rgb) / 0.12);
  padding: 6px;
  min-width: 140px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: auto;
}
.sidebar-navmode-menu {
  top: 34px;      /* 与语言菜单同基准：右上角操作条按钮 30×30，菜单贴按钮下沿 */
  left: 0;
}
.top-navmode-menu {
  top: 42px;
  right: 0;
}
.dock-navmode-menu {
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
}
.sidebar-navmode-menu[hidden],
.top-navmode-menu[hidden],
.dock-navmode-menu[hidden] {
  display: none !important;
}
.sidebar-navmode-menu button,
.top-navmode-menu button,
.dock-navmode-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease;
  white-space: nowrap;
}
.sidebar-navmode-menu button:hover,
.top-navmode-menu button:hover,
.dock-navmode-menu button:hover {
  background: var(--hover-bg);
}
.sidebar-navmode-menu button.selected,
.top-navmode-menu button.selected,
.dock-navmode-menu button.selected {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}
.dock-item[aria-expanded="true"] .dock-tooltip,
.dock-navmode-control:has(.dock-navmode-menu:not([hidden])) .dock-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mode-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}


/* 通知弹卡片：现有公共能力增量调整。留白让外阴影不被滚动容器裁掉。 */
.notice-toasts {
  top: 0; right: 0; width: min(412px, 100vw);
  max-height: 100vh; padding: 16px;
}
.notice-toast {
  box-shadow: 0 3px 8px -3px rgb(var(--overlay-rgb) / .14);
  transition: box-shadow .15s ease;
}
.notice-toast.is-actionable:hover {
  box-shadow: 0 4px 10px -4px rgb(var(--overlay-rgb) / .18);
}
.notice-toast-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.notice-toast-header strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notice-toast-time { flex: none; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; line-height: 1.6; }
@media (max-width: 560px) {
  .notice-toasts { top: 0; right: 0; left: 0; width: auto; padding: 8px; }
  .notice-toast-header { flex-wrap: wrap; }
  .notice-toast-time { order: -1; width: 100%; text-align: right; }
}

/* Shared loading state: navigation remains available, page content is revealed together. */
.main-content.orbit-page-loading { min-height: calc(100dvh - var(--sp-6, 24px)); }
.orbit-page-loading > * { visibility: hidden !important; pointer-events: none !important; }
.orbit-page-loader {
  position: fixed;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--bg);
  pointer-events: none;
}
.orbit-loading-ring {
  display: inline-block;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: orbit-loading-turn 900ms linear infinite;
}
@keyframes orbit-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit-loading-ring { animation: none; }
}

/* A page wait has one indicator; background request notices resume afterwards. */
body:has(.orbit-page-loading) .orbit-ui-loading-notice { visibility: hidden; }