/* ===== 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, #c62828) !important;
box-shadow: 0 0 0 1px rgba(198, 40, 40, .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 读，彻底消除不同步 */
body.sidebar-collapsed {
--sidebar-width: 44px;
}
/* 侧栏右上角操作区：[刷新] [收起] 两个同样式按钮并排，统一视觉与交互
* 所有 .sidebar-toggle 下 全部用 mask SVG（fill=currentColor + mask-image SVG 描边）
* 三个按钮视觉完全一致：尺寸 18×18，SVG viewBox 24，stroke-width=2.2，stroke-linecap/join=round */
.sidebar-head-actions {
position: absolute;
top: 16px;
right: 12px;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
}
.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 图形 bounding box 调整为 19×19，与刷新图标视觉占比一致 */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
flex-shrink: 0;
}
/* 折叠态（侧边栏已关闭）：外框相同，竖条切换到靠右边 → 点击展开 */
body.sidebar-collapsed #sidebarToggleBtn i {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 删除之前"方框 + 两条横线"方案的伪元素（SVG mask 不需要） */
#sidebarToggleBtn i::before,
#sidebarToggleBtn i::after { display: none; content: none; }
/* 刷新 / 全部折叠按钮不需要伪元素（它们用 SVG mask），保险起见明确隐藏 */
.sidebar-reload i::before,
.sidebar-reload 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;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 10px); /* 元素正右方，留 10px 间隔（匹配截图"关闭边栏"的间距） */
top: 50%;
transform: translateY(-50%);
background: var(--dark-bg); /* 近黑背景（比纯黑更柔和，贴近截图的黑底） */
color: #ffffff;
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: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity .18s ease;
z-index: 9999;
box-shadow: 0 6px 16px rgba(31,36,43,.28); /* 轻微阴影（让气泡有浮起感） */
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
}
/* 折叠态（侧栏已收起）时，顶部操作条是竖排 column，tooltip 仍固定在元素右侧（空间足够） */
body.sidebar-collapsed [data-tooltip]::after {
left: calc(100% + 8px); /* 折叠态按钮 36px 更小，间隔减 2px 更紧凑 */
}
/* 侧栏最右侧拖动手柄(sidebar-resizer)：元素本身在侧栏最右边线外 3px 左右 → 气泡改显示在正右方+留充足间隔即可 */
.sidebar-resizer[data-tooltip]::after {
left: calc(100% + 12px);
}
/* 刷新按钮（与 sidebar-toggle 同尺寸/圆角/hover，描边风 2.2） */
.sidebar-reload i {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ===== LOGO 下方工具栏：一排功能小图标按钮（预留扩展位，当前为空时自动隐藏不占空间） ===== */
/* 布局说明：全部折叠按钮需要和下方每个一级分组标题右侧的 ">"(chevron) 图标在同一竖直线上
* 基准：.nav-group-title padding: 8px 12px → chevron 右边到 sidebar 右边缘距离 = 12px
* 实现：toolbar 左右 padding 同步成 12px，内容右对齐 → 按钮右边沿 x 坐标与 chevron 完全一致 */
.sidebar-toolbar {
display: flex;
align-items: center;
justify-content: flex-end; /* 全部折叠图标向右对齐到分组 chevron 那一列 */
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 {
width: 17px; /* 紧凑：18→17 */
height: 17px;
display: block;
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,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ===== 水平位置校准：让"全部折叠"与分组标题右侧 chevron(>) 在同一竖直线上 =====
* 结构分两层（两个层级的盒子宽度/内边距不同，差值均为常数，不随侧栏拖动宽度变化）：
* L1 按钮方框 right ↔ chevron 图标 right：差值固定 11px
* → 给 .sidebar-collapse-all 加 margin-right:11px 回拉 → 方框边界与 > 符号边界同线
* L2 图标内容(17×17, 居中于26×26方框) ↔ chevron 图标本体(16×16)：
* place-items:center → 26与17的差=9 → 左右各留 4.5px 内侧边距，图标内容比方框右沿 左偏4.5px
* → 给 .sidebar-collapse-all i 加 margin-right:-5px 让图标内容向右延展出方框
* → 图标尖角 + 长破折号的视觉右沿，与 chevron 尖角/右沿同一直线 */
.sidebar-collapse-all { margin-right: 11px; }
.sidebar-collapse-all i { margin-right: -5px; }
.brand {
display: flex;
gap: 10px;
align-items: center;
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 {
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-group { 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 不收缩会撑破） */
}
.nav-group-title:hover { background: var(--hover-bg); border-color: transparent; color: inherit; }
/* ===== 分组收起/展开小箭头（你要求的：和刷新图标一样的 SVG mask 描边风，stroke-width=2.2 + 圆角端点） ===== */
/* 说明：之前我误解成右上角汉堡包按钮了，真正的你指的是这个分组右侧的小箭头——现在换成 SVG mask，纠正方向：展开=向下∨、折叠=向右▶ */
.nav-group-title i {
width: 16px; /* 统一为 16×16（之前 L 形只有 6×6 只有角，新 SVG 整只 chevron 更清晰） */
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,");
mask-image: url("data:image/svg+xml;utf8,");
transition: transform .2s ease;
}
/* 折叠态（aria-expanded=false）：同一个向下 chevron 旋转 -90° → 变成"▶ 朝右"（业界常规交互方向） */
.nav-group-title[aria-expanded="false"] i {
transform: rotate(-90deg);
}
.nav-group-items { display: grid; gap: 3px; padding-left: 8px; } /* 增加多0.5倍间隔：0→3（子菜单项之间少量空气，缩进8px保留层次） */
.nav-group-title[aria-expanded="false"] + .nav-group-items { display: none; }
.nav {
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;
}
.nav.active,
.nav:hover {
background: var(--accent-soft);
color: var(--accent-strong);
font-weight: 600;
}
.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: #f0f1f3;
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; }
/* 收起状态 */
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; }
/* 收起状态：右上角操作条（[刷新][收起]）整体靠上靠外，两个按钮各自变为"浮出白底圆角卡片"风格 */
body.sidebar-collapsed .sidebar-head-actions {
top: 14px;
right: 4px;
flex-direction: column;
gap: 6px;
}
body.sidebar-collapsed .sidebar-toggle {
width: 36px;
height: 34px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
background: #fff;
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: #ffffff !important;
overflow: hidden;
}
.main-content {
margin-left: var(--sidebar-width, 232px);
min-height: 100vh;
max-height: 100vh;
background: #ffffff !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;
padding: 20px 10px 22px;
}
.view.active { display: block; }
/* ===== 顶栏、面板、卡片骨架（可覆盖） ===== */
.topbar {
position: sticky;
top: 10px;
z-index: 10;
background: var(--panel);
border: 1px solid var(--line-strong);
/* 用户明确要求顶栏外框圆角 20px，通过 --radius-lg = 20px token 统一（platform.css 已同步调整） */
border-radius: var(--radius-lg);
margin: 10px 10px 20px;
padding: 10px 20px;
display: flex;
justify-content: space-between;
gap: 18px;
box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
/* ===== Step 4：sticky topbar 提升独立合成层 =====
* 背景：主内容区滚动时 sticky topbar 每帧都要重绘（它下面的内容在变），
* 低性能 Mac/Win 笔记本上会出现滚动卡顿、顶栏"掉帧抖动"。
* 策略：transform:translateZ(0) 强制浏览器给它一个独立的 GPU 合成层，
* 下面的内容怎么滚都不重绘 topbar；同时 will-change:transform 提示浏览器提前预留纹理。
* 副作用：z-index 仍 10 不变，它与弹层(z=90/100)的相对层级不会错乱。*/
transform: translateZ(0);
will-change: transform;
}
.topbar h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; }
.top-actions,
.row-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.panel {
background: #ffffff;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 24, 39, .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: #fff;
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); }
table {
border-collapse: separate;
border-spacing: 0;
width: max-content;
min-width: 100%;
background: #fff;
}
th, td {
border: 0;
border-bottom: 1px solid var(--line);
padding: 12px 14px;
vertical-align: middle;
}
th {
position: sticky;
top: 0;
background: #fff;
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 产生双线，而且只作用在 上，
* 正文 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 rgba(213, 0, 13, .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; }
.badge {
display: inline-block;
border-radius: 999px;
padding: 4px 9px;
font-size: var(--fs-sm);
background: var(--accent-soft);
color: var(--accent-strong);
}
.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%, rgba(213, 0, 13, .08), transparent 34%),
linear-gradient(145deg, #fff8f8 0%, #eef1f8 52%, #f8f9fc 100%);
z-index: 100;
display: grid;
place-items: center;
padding: 20px;
}
.login-overlay.hidden { display: none; }
.login-card {
width: min(440px, 100%);
background: #fff;
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);
}
/* ===== 通用 Picker / 弹层（改密、账号信息等） ===== */
.picker-overlay {
position: fixed;
inset: 0;
background: rgba(17, 24, 39, .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: #fff;
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: #fff;
}
.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;
}
/* ===== 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,
body.locked .sidebar { filter: blur(6px); opacity: .6; pointer-events: none; }
/* 小屏响应：侧栏自动覆盖 */
@media (max-width: 1000px) {
.sidebar {
box-shadow: 0 0 0 1px var(--line-strong), 0 30px 40px rgba(17, 24, 39, .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: rgba(17, 24, 39, .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;
flex: 0 0 auto;
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 rgba(17, 24, 39, .15);
}
body.sidebar-mobile-open .sidebar { transform: translateX(0); }
body.sidebar-collapsed .sidebar { width: 260px; padding: 20px 14px; }
body.sidebar-collapsed .sidebar .brand { display: flex; }
body.sidebar-collapsed .sidebar nav { display: block; }
.main-content,
body.sidebar-collapsed .main-content { margin-left: 0; }
/* 汉堡菜单按钮显示 */
.mobile-menu-btn { display: flex; }
/* topbar 适配：允许换行，按钮缩小 */
.topbar {
position: static;
flex-wrap: wrap;
padding: 8px 12px;
margin: 8px;
}
.top-actions {
flex-wrap: wrap;
gap: 6px;
}
.top-actions button,
.top-actions .secondary {
padding: 6px 10px;
font-size: var(--fs-sm);
}
/* 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;
}
.topbar {
margin: 0 0 8px;
border-radius: 0;
border-left: 0;
border-right: 0;
padding: 8px 10px;
}
.topbar h2 { font-size: var(--fs-lg); }
.top-actions { gap: 4px; }
.top-actions button,
.top-actions .secondary {
padding: 6px 8px;
font-size: var(--fs-xs);
}
/* 登录卡片 */
.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,");
mask-image: url("data:image/svg+xml;utf8,");
}
.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: #fff;
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 红 #D5000D，与主题统一（原用 var(--purple) 已映射，此处再加注释） */
background: rgba(213, 0, 13, .06); /* LOGO 红 6% 透明浅底，原写死紫 rgba(93,63,211,.06) */
border-color: rgba(213, 0, 13, .28);/* LOGO 红 28% 透明边，原写死紫 rgba(93,63,211,.28) */
}
.picker-actions .icon-btn:active {
background: rgba(213, 0, 13, .12); /* LOGO 红 12% 透明，原写死紫 rgba(93,63,211,.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 rgba(20, 30, 45, .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: #fff;
background: var(--purple); /* var(--purple) 已映射为 --accent LOGO 红 */
font-weight: 600;
box-shadow: 0 2px 8px rgba(213, 0, 13, .25); /* 原 rgba(93,63,211,.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: #fff;
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: #fff;
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 rgba(213, 0, 13, .16);
transition: transform .18s ease, box-shadow .18s ease;
}
.trend-col:hover .trend-bar {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(213, 0, 13, .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: rgba(180, 35, 24, .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: #374151;
}
.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: #fff;
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: rgba(213, 0, 13, .55);
box-shadow: 0 0 0 3px rgba(213, 0, 13, .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: rgba(25, 161, 76, .08);
border-color: rgba(25, 161, 76, .28);
color: var(--ok-text);
}
.config-msg.err {
background: rgba(229, 56, 59, .07);
border-color: rgba(229, 56, 59, .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: rgba(244, 63, 94, .06);
border: 1px solid rgba(244, 63, 94, .28);
border-radius: 10px;
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
font-family: inherit;
}
.btn-ghost:hover { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .45); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost.primary { background: var(--purple); color: #fff; 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: #6b7280; }
.ai-test-result.ok { color: var(--ok-text); }
.ai-test-result.err { color: var(--bad-text); }
.ai-config-hint.muted {
color: #8f98a8;
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, #fff 0%, #fff5f6 100%);
border: 1px solid rgba(244, 63, 94, .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, #fff 0%, #fde7ea 100%);
border-color: rgba(244, 63, 94, .5);
box-shadow: 0 1px 3px rgba(244, 63, 94, .12);
}
.ai-action-btn:active { transform: translateY(1px); }
.ai-action-btn:disabled {
opacity: .45;
cursor: not-allowed;
background: #fafafa;
box-shadow: none;
}
.ai-action-btn.primary {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); /* 纯 LOGO 红渐变，不保留紫色终点过渡 */
color: #fff;
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: #fff;
border: 1px solid #e5e7eb;
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 rgba(15, 23, 42, .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 红 #D5000D，与全局 focus-ring 统一色系 */
box-shadow: 0 0 0 3px rgba(213, 0, 13, .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: #fff;
font-size: 13px;
font-family: inherit;
color: #0f172a;
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: #fafbff; }
.ai-chat-input-wrap .ai-chat-input:focus { background: #fff; }
.ai-chat-input-wrap .ai-chat-input::placeholder {
color: #94a3b8;
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: #94a3b8;
white-space: nowrap;
padding: 0 4px;
}
.ai-chat-count.active { color: var(--accent); } /* LOGO 红 #D5000D：字数到达上限时的提示色 */
.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: #64748b;
background: #f8fafc;
border: 1px solid #e2e8f0;
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: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.ai-chat-send:active { transform: translateY(1px); }
.ai-chat-send:disabled {
background: #f1f5f9;
border-color: #e2e8f0;
color: #94a3b8;
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: #64748b;
background: #f8fafc;
border: 1px solid #e2e8f0;
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: #fef2f2;
border-color: #fecaca;
border-right-color: transparent; /* hover 时上/下/左三条边变红，右边仍保持透明（不重新画出浅红竖线） */
color: #b91c1c;
}
.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: #fff;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); /* LOGO 红渐变：#D5000D → #b8000b，与发送按钮同色系 */
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: #64748b;
background: #f8fafc;
border: 1px solid #e2e8f0;
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: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.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, #eef2ff, #ede9fe);
color: #3730a3;
border: 1px solid #c7d2fe;
border-bottom-right-radius: 2px;
}
.ai-chat-bubble.role-assistant {
align-self: flex-start;
background: #fff;
color: #0f172a;
border: 1px solid #e2e8f0;
border-bottom-left-radius: 2px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .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 红 #D5000D：AI 回复气泡的元信息色 */
.ai-chat-bubble.role-user .ai-bubble-meta { color: #475569; } /* 深 slate 灰：用户气泡的元信息色，与 AI 红色区分，且不出现紫色系 */
.ai-chat-bubble.dim { opacity: .55; }
/* ===== 管理后台：通用按钮修饰（ghost/danger）===== */
button.ghost {
background: #fff;
color: #475569;
border: 1px solid #e2e8f0;
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: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
button.ghost:active { transform: translateY(1px); }
button.danger {
background: #fff;
color: #b91c1c;
border: 1px solid #fecaca;
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: #fef2f2; border-color: #fca5a5; }
button.danger:active { transform: translateY(1px); }
/* ===== 管理后台：AI 对话日志列表 + 详情 ===== */
#adminAiLogsTable {
width: 100%;
border-collapse: collapse;
background: #fff;
}
#adminAiLogsTable thead th {
position: sticky;
top: 0;
background: #f8fafc;
z-index: 1;
text-align: left;
font-weight: 600;
font-size: 12px;
color: #475569;
padding: 10px 12px;
border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
#adminAiLogsTable tbody td {
padding: 9px 12px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
#adminAiLogsTable tbody tr:hover td { background: #fafbff; }
/* ===== 管理后台：账号权限表格 — 工号/姓名等短列严格按固定列宽（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: #fff;
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: #64748b;
}
.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 rgba(244, 63, 94, .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: #f7f8fa;
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: #fff;
}
.org-tree-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 9px;
border: 1px solid transparent;
border-radius: 9px;
background: rgba(255, 255, 255, .82);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
user-select: none;
}
.org-tree-row:hover {
background: #fff;
border-color: #ead5d7;
box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
}
.org-tree-row.new-row {
background: #fdf4f4;
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,");
mask-image: url("data:image/svg+xml;utf8,");
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: #858d99;
-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,");
mask-image: url("data:image/svg+xml;utf8,");
}
.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: #2c3338;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.org-tree-name.root-name {
color: #1f242b;
font-weight: 600;
}
.org-tree-input {
flex: 1;
font-size: var(--fs-base);
color: #2c3338;
padding: 2px 6px;
border: 1px solid var(--accent); /* LOGO 红边（var(--purple) 已映射，但直接用 --accent 语义更明确） */
border-radius: 4px;
background: #fff;
/* outline:none → outline-color:transparent；键盘焦点由全局 :focus-visible 接管（红色焦点环） */
outline-color: transparent;
box-shadow: 0 0 0 2px rgba(213, 0, 13, .15); /* LOGO 红 15% 发光环，原写死紫 rgba(93,63,211,.15) */
min-width: 0;
font-family: inherit;
}
.org-tree-input-new {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(213, 0, 13, .2); /* LOGO 红 20% 发光环（新建更明显），原写死紫 rgba(93,63,211,.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: #fff;
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: #d7aeb1;
background: var(--accent-soft);
color: var(--accent-strong);
}
.org-owner-button.has-owner { color: var(--text); }
.org-owner-button.missing-owner { color: #b45309; background: #fffbeb; }
.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: #fff;
}
.org-btn.danger:hover {
background: #e5383b;
color: #fff;
}
.org-tree-children {
margin-left: 19px;
border-left: 1px solid #dfe3e8;
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: #fff;
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: rgba(255,255,255,.2); color: #fff; }
.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: #fff;
}
.admin-shell > .admin-shell-head {
min-height: 50px;
padding: 12px 16px;
background: #fff;
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: #fafbfc;
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: #fff;
}
.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: #fafbfc;
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: #fff;
}
.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: #fcfcfd;
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: #f4f5f7;
}
.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 控高
* 使用示例：
*
* ✕
* 暂无数据
* 请先新增公司年目标或筛选其它负责人
* |