:root {
--bg: #0f1115;
--panel: #171a21;
--panel2: #1c2029;
--line: #262b36;
--fg: #e6e9ef;
--dim: #8b93a7;
--acc: #4f8cff;
--ok: #3ddc97;
--warn: #ffcc66;
--err: #ff6b6b;
--radius: 10px;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 14px/1.6 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}
#app { display: flex; min-height: 100vh; }
/* ----------------------------- 侧边栏 ----------------------------- */
.sidebar {
width: 216px;
flex: 0 0 216px;
background: #12141a;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
}
.brand { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.brand-title { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--dim); margin-top: 3px; }
#nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
#nav a {
color: var(--fg);
text-decoration: none;
padding: 9px 12px;
border-radius: 8px;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid transparent;
}
#nav a:hover { background: #1a1e27; }
#nav a.active { background: #1f2733; border-color: #2c3a52; color: #fff; }
#nav a .ico { width: 18px; text-align: center; }
.badge {
margin-left: auto;
background: var(--warn);
color: #23180a;
border-radius: 99px;
font-size: 11px;
padding: 0 7px;
font-weight: 700;
}
.sidebar-foot { padding: 12px 14px; border-top: 1px solid var(--line); word-break: break-all; }
/**
* 导航分组标题。
*
* 用来把"一家客户之内的事"和"跨客户的运营"分开 ——
* 混在一列里会让人搞不清当前视角是"所有客户"还是"某一家"。
*/
.nav-sep {
margin-top: 12px;
padding: 6px 14px 4px;
border-top: 1px solid var(--line);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--dim);
text-transform: none;
}
/**
* **分组标题下面的一句引导。**
*
* 为什么需要它：导航里「客户管理 / 账号管理 / 用户管理」三个名字
* 都带"管理"，用户最常问的就是"我该去哪一页"。
* 结论放在这里（而不是让你点进去各读一遍再自己总结）。
*
* 字号比分组标题还小一档、且不进链接列表 —— 它是**说明**不是入口。
*/
.nav-hint {
padding: 0 14px 5px;
font-size: 11px;
line-height: 1.5;
color: var(--dim);
opacity: 0.85;
}
/**
* 段落里的跳转链接（如「导出交付」→「ERP 导入」的指路）。
*
* 用链接样式而不是按钮：它是"去另一个页面看看"，不是提交动作；
* 做成按钮会让人以为点了会立刻执行什么。
*/
.btn-link {
color: var(--accent, #6ea8fe);
text-decoration: none;
border-bottom: 1px dashed currentColor;
font-weight: 600;
}
.btn-link:hover { border-bottom-style: solid; }
/* ----------------------------- 顶栏 ----------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 22px;
border-bottom: 1px solid var(--line);
background: #12141a;
position: sticky;
top: 0;
z-index: 5;
flex-wrap: wrap;
}
.ctx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctx label { line-height: 1; }
.actions { display: flex; gap: 8px; }
select, input, button {
background: var(--panel);
color: var(--fg);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
font-size: 13.5px;
font-family: inherit;
}
input { width: 104px; }
button { cursor: pointer; }
button.primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
button:hover { border-color: #3a4356; }
button.primary:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.small { padding: 4px 9px; font-size: 12px; }
button.danger { border-color: #5a2b2b; color: #ffb3b3; }
/**
* **`.btn` —— 给"长得像按钮、但是 `` 的下载链接"用的。**
*
* ⚠ 实测踩到：`装订包` 那个链接写的是 ``，
* 而**样式表里从来没有 `.btn` 这条规则**（只有 `button.primary`）。
* 于是它按浏览器默认的 `` 渲染 —— 蓝色、带下划线，在深色底上看起来
* 像"被划掉/失效的按钮"，而它其实是个能点的下载链接。
*
* 为什么下载要用 `` 而不是 `