/* ==========================================================================
MHOT ERP · 设计系统 v2
颜色不变：主色 #002E83 · 品牌黄 #FCC200 · 中性灰阶
1 变量 · 2 基础 · 3 外壳 · 4 页头/工具栏 · 5 卡片 · 6 KPI · 7 表格
8 按钮/图标按钮 · 9 表单 · 10 标签胶囊 · 11 提示/空态 · 12 兼容旧类 · 13 响应式
========================================================================== */
/* ---------- 1. 变量 ---------- */
:root{
--brand:#002E83; --brand-700:#00266B; --brand-600:#0B3E9E; --brand-100:#DCE6F7; --brand-50:#EEF3FB;
--accent:#FCC200; --accent-700:#D9A600; --accent-50:#FFF9E6;
--ink:#0E1A2B; --ink-2:#33425A; --muted:#5A6A80; --muted-2:#66768C; /* v1.3.0 压深一档，保证小字也过 4.5:1 */
--line:#E3E8F0; --line-2:#EFF3F9; --bg:#F5F7FB; --surface:#fff;
--danger:#C0392B; --danger-bg:#FDECEA; --danger-line:#F7D3CE;
--ok:#1E8E3E; --ok-bg:#E9F6EE; --ok-line:#CBE9D6;
--warn:#8A6100; --warn-bg:#FFF8E1; --warn-line:#F5E4B0;
--r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
--sh-1:0 1px 2px rgba(16,24,40,.05);
--sh-2:0 2px 6px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
--sh-3:0 8px 24px rgba(16,24,40,.10);
--sidebar-w:236px; --topbar-h:56px;
--fs-xs:11.5px; --fs-sm:12.5px; --fs:13.5px; --fs-lg:15px; --fs-xl:19px; --fs-2xl:26px;
}
/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;background:var(--bg);color:var(--ink);
font:var(--fs)/1.55 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600);text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:var(--w-strong);letter-spacing:.1px}
h1{font-size:var(--fs-xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs)}
hr{border:0;border-top:1px solid var(--line-2);margin:14px 0}
::selection{background:var(--brand-100)}
/* ---------- 3. 外壳 ---------- */
.app,.layout{display:flex;min-height:100vh}
.sidebar,.side{
width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sh-nav-bg);color:var(--sh-nav-fg);
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--sh-nav-scroll);border-radius:6px}
.brand,.side .logo{
display:flex;align-items:baseline;gap:6px;padding:18px 20px 14px;font-size:var(--t-xl);font-weight:var(--w-strong);
letter-spacing:.4px;border-bottom:1px solid var(--sh-nav-line-soft)
}
.brand span,.side .logo span{color:var(--accent)}
.brand small{font-size:var(--t-2xs);font-weight:var(--w-strong);color:var(--sh-nav-fg-dim);letter-spacing:1.4px;text-transform:uppercase}
/* 导航区自己滚，底部用户卡钉住不动 —— 菜单项再多也不会把用户卡挤出屏幕。 */
.sidebar nav{padding:10px 0 6px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.group{margin:4px 0 2px}
.group-title{
padding:8px 20px 4px;font-size:var(--t-2xs);font-weight:var(--w-strong);letter-spacing:1.2px;
color:var(--sh-nav-fg-dim);text-transform:uppercase
}
.nav-item,.side nav a{
display:flex;align-items:center;gap:9px;padding:8px 20px 8px 17px;color:var(--sh-nav-fg);
font-size:var(--t-sm);border-left:3px solid transparent;transition:background .14s,color .14s
}
.nav-item:hover,.side nav a:hover{background:var(--sh-nav-hover);color:var(--sh-nav-fg-hi);text-decoration:none}
.nav-item.on,.side nav a.on{background:var(--sh-nav-on-bg);color:var(--sh-nav-on-fg);border-left-color:var(--sh-nav-bar);font-weight:var(--w-strong)}
.nav-item .ic{width:16px;height:16px;flex:0 0 16px;opacity:.9}
.side-foot,.side .foot{
padding:12px 20px 16px;font-size:var(--t-2xs);color:var(--sh-nav-fg-dim);
border-top:1px solid var(--sh-nav-line-soft);line-height:1.7;margin-top:auto
}
.side-foot a,.side .foot a{color:var(--sh-nav-fg)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
background:var(--surface);opacity:.97;backdrop-filter:saturate(180%) blur(8px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30
}
.crumbs{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);min-width:0}
.crumbs b{color:var(--ink);font-weight:var(--w-strong)}
.top-actions{display:flex;align-items:center;gap:8px}
.content{padding:22px 24px 56px;max-width:1680px;width:100%;margin:0 auto}
/* ---------- 4. 页头 / 工具栏 ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.page-head .t{min-width:0}
.page-head h1{font-size:var(--fs-xl);font-weight:var(--w-strong);display:flex;align-items:center;gap:8px}
.page-head .sub{font-size:var(--fs-sm);color:var(--muted);margin-top:3px}
.page-head .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.section-title{font-size:var(--fs-lg);font-weight:var(--w-strong);display:flex;align-items:center;gap:8px}
.section-title .hint{font-size:var(--fs-sm);font-weight:var(--w-read);color:var(--muted)}
.toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:14px
}
.toolbar form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.spacer{flex:1}
/* ---------- 5. 卡片 ---------- */
.card{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:16px
}
.card.tight{padding:14px 16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.card-head h2,.card-head h3{font-size:var(--fs-lg);font-weight:var(--w-strong);display:flex;align-items:center;gap:8px}
.card-head .hint{font-size:var(--fs-sm);color:var(--muted);font-weight:var(--w-read)}
.grid.cols-2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols-4{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* ---------- 6. KPI ---------- */
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.kpi{flex:1 1 178px;min-width:148px;max-width:360px}
.kpi{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
box-shadow:var(--sh-1);position:relative;overflow:hidden;flex:1 1 178px;min-width:148px;max-width:360px
}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-100)}
.kpi.hi::after{background:var(--brand)}
.kpi.alert::after{background:var(--danger)}
.kpi.ok::after{background:var(--ok)}
.kpi .l{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.kpi .v{font-size:var(--fs-2xl);font-weight:var(--w-strong);color:var(--brand);margin-top:6px;letter-spacing:-.4px}
.kpi .v.warn{color:var(--danger)}
.kpi .f{font-size:var(--fs-xs);color:var(--muted-2);margin-top:2px}
/* ---------- 7. 表格 ---------- */
.table-wrap,.scroll{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-1);overflow:auto;max-height:74vh;margin-bottom:16px
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
thead th{
position:sticky;top:0;z-index:2;background:var(--brand-50);color:var(--muted);font-weight:var(--w-strong);font-size:var(--fs-xs);
letter-spacing:.3px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:normal;line-height:1.25
}
tbody td{padding:8px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2)}
tbody tr:hover td{background:var(--brand-50)}
tbody tr:last-child td{border-bottom:0}
tbody tr.total td,tfoot td{background:var(--brand-50);font-weight:var(--w-strong);color:var(--ink)}
td.c,th.c{text-align:center}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.num,td.r{font-variant-numeric:tabular-nums}
td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs)}
td .sub{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--w-read)}
td b{color:var(--ink)}
.cell-inline{display:flex;align-items:center;gap:6px}
.icon-btn-group{display:inline-flex;gap:6px;align-items:center;justify-content:center}
/* ---------- 8. 按钮 / 图标按钮 ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;
border-radius:var(--r-sm);border:1px solid transparent;background:var(--brand);color:#fff;
font-size:var(--fs-sm);font-weight:var(--w-strong);cursor:pointer;white-space:nowrap;font-family:inherit;line-height:1;
transition:background .14s,border-color .14s,box-shadow .14s,transform .06s
}
.btn:hover{background:var(--brand-600);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand-100);outline-offset:1px}
.btn.sec{background:var(--surface);color:var(--brand);border-color:var(--line);box-shadow:var(--sh-1)}
.btn.sec:hover{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-2);color:var(--ink)}
.btn.y{background:var(--accent);color:#4A3A00;box-shadow:var(--sh-1)}
.btn.y:hover{background:var(--accent-700);color:#3A2D00}
.btn.g{background:var(--ok);color:#fff}
.btn.g:hover{background:#187A34}
.btn.r{background:var(--surface);color:var(--danger);border-color:var(--danger-line)}
.btn.r:hover{background:var(--danger-bg);border-color:#EFBFB7;color:#9E2E22}
.btn.s,.btn.sm{height:28px;padding:0 10px;font-size:var(--fs-xs);border-radius:5px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.ibtn{
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
border:1px solid var(--line);border-radius:6px;background:var(--surface) no-repeat center/15px 15px;cursor:pointer;
transition:background-color .14s,border-color .14s;flex:0 0 auto
}
.ibtn:hover{background-color:var(--brand-50);border-color:var(--brand-100)}
.ibtn.primary:hover{background-color:var(--ok-bg);border-color:var(--ok-line)}
.ibtn.danger:hover{background-color:var(--danger-bg);border-color:var(--danger-line)}
.ibtn.edit{background-image:url("data:image/svg+xml;utf8,")}
.ibtn.save{background-image:url("data:image/svg+xml;utf8,")}
.ibtn.del{background-image:url("data:image/svg+xml;utf8,")}
.ibtn.open{background-image:url("data:image/svg+xml;utf8,")}
.ibtn.print{background-image:url("data:image/svg+xml;utf8,")}
/* ---------- 9. 表单 ---------- */
label{display:block;font-size:var(--fs-xs);color:var(--muted);margin:0 0 4px;font-weight:var(--w-ui)}
input,select,textarea{
height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
color:var(--ink);font-size:var(--fs-sm);font-family:inherit;transition:border-color .14s,box-shadow .14s
}
textarea{height:auto;padding:8px 10px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:#CFD8E6}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
input[type=number]{font-variant-numeric:tabular-nums}
input.mini,select.mini{height:28px;padding:0 6px;font-size:var(--fs-xs);border-radius:5px}
.field{margin-bottom:12px}
.field .help,{font-size:var(--fs-xs);color:var(--muted-2)}
.form-grid,.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.form-grid .span-2{grid-column:1/-1}
.inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.search{position:relative;display:inline-flex;align-items:center}
.search input{padding-left:32px;min-width:240px}
.search::before{
content:"";position:absolute;left:10px;width:14px;height:14px;opacity:.55;
background:url("data:image/svg+xml;utf8,") center/14px no-repeat
}
.seg{display:inline-flex;background:var(--line-2);border-radius:var(--r-sm);padding:2px;gap:2px}
.seg a{padding:5px 12px;border-radius:5px;font-size:var(--fs-xs);color:var(--ink-2);font-weight:var(--w-strong)}
.seg a:hover{text-decoration:none;color:var(--brand)}
.seg a.on{background:var(--surface);color:var(--brand);box-shadow:var(--sh-1)}
/* ---------- 10. 标签 / 胶囊 ---------- */
.pill,.tag,.ok,.miss{
display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);
font-size:var(--fs-xs);font-weight:var(--w-strong);background:var(--brand-50);color:var(--brand);
border:1px solid var(--brand-100);white-space:nowrap
}
.pill.ok,.tag.g,.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.warn,.tag.y{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.danger,.tag.red,.miss{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.pill.mute{background:#F2F5FA;color:var(--muted);border-color:var(--line)}
.pill.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.alert-text{color:var(--danger);font-weight:var(--w-strong)}
.ok-text{color:var(--ok);font-weight:var(--w-strong)}
.thumb{width:44px;height:44px;object-fit:contain;background:#fff;/* keep white */border:1px solid var(--line);border-radius:var(--r-sm);display:block}
.thumb.big,.thumb.lg{width:126px;height:126px}
.noimg{
width:44px;height:44px;border:1px dashed #CBD5E4;border-radius:var(--r-sm);display:flex;align-items:center;
justify-content:center;color:var(--muted-2);font-size:var(--t-2xs)
}
/* ---------- 11. 提示 / 空态 ---------- */
.toast,.note{
display:flex;align-items:flex-start;gap:9px;background:var(--accent-50);border:1px solid var(--warn-line);
border-left:3px solid var(--accent);border-radius:var(--r);padding:10px 14px;margin:0 0 14px;
font-size:var(--fs-sm);color:#5C4A00
}
.toast::before{
content:"";flex:0 0 15px;height:15px;margin-top:2px;
background:url("data:image/svg+xml;utf8,") center/15px no-repeat
}
.err{
display:flex;gap:9px;background:var(--danger-bg);border:1px solid var(--danger-line);border-left:3px solid var(--danger);
border-radius:var(--r);padding:10px 14px;margin:0 0 14px;font-size:var(--fs-sm);color:#8E2A1E
}
.tiny,.help-text{font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
.empty{padding:38px 16px;text-align:center;color:var(--muted);font-size:var(--fs-sm);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg)}
.empty b{display:block;color:var(--ink-2);font-size:var(--fs);margin-bottom:4px}
.sec{border-top:1px solid var(--line-2);margin-top:16px;padding-top:14px}
.sec h3{margin:0 0 10px;font-size:var(--fs);color:var(--brand);display:flex;align-items:center;gap:8px}
.calc{background:var(--brand-50);border:1px solid var(--brand-100);border-left:3px solid var(--brand);border-radius:var(--r);padding:10px 14px;font-size:var(--fs-sm);margin-top:10px;color:var(--ink-2)}
.calc b{color:var(--brand)}
.bar{height:8px;background:var(--line-2);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brand)}
pre{font-family:ui-monospace,Menlo,monospace}
/* 登录页 */
.login{max-width:372px;margin:11vh auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--sh-3)}
.login h1{text-align:center;font-size:var(--t-xl);margin-bottom:6px}
/* ---------- 13. 响应式 ---------- */
@media (max-width:1100px){
:root{--sidebar-w:64px}
.brand b,.brand small,.group-title,.nav-item span,.side-foot{display:none}
.brand{justify-content:center;padding:16px 0}
.brand>span{font-size:var(--t-xl);line-height:1}
.nav-item{padding:11px 0;justify-content:center}
.brand{padding:16px 0;justify-content:center}
.content{padding:16px 14px 48px}
.topbar{padding:0 14px}
}
@media (max-width:720px){
.page-head{align-items:stretch}
.page-head .actions{width:100%}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi .v{font-size:var(--t-xl)}
table{font-size:var(--t-xs)}
thead th,tbody td{padding:7px 8px}
}
/* 卡片内标题与段落的呼吸感（模板里多为 ） */
.card>h2,.card>h3,.card>h4{margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card>h2+.tiny,.card-head+.tiny{margin-top:-6px;margin-bottom:10px}
.card>.row:last-child,.card>form:last-child{margin-bottom:0}
.card table{margin-top:2px}
.card .kpis{margin:4px 0 14px}
.card .table-wrap,.card .scroll{margin-bottom:0;box-shadow:none;border-color:var(--line-2)}
.page-head+.kpis{margin-top:2px}
.kpis+.card,.kpis+.table-wrap{margin-top:2px}
p{margin:0 0 10px}
ul,ol{margin:0 0 10px;padding-left:20px}
/* 图表容器：固定高度，避免 canvas 按比例撑成一大块 */
.chart-box{position:relative;width:100%;height:248px}
.chart-box canvas{width:100%!important;height:100%!important;display:block}
.chart-box.sm{height:190px}
/* 行内表单：label 与控件同排，避免每个字段占一整行 */
.row label{display:inline-block;margin:0 6px 0 0;white-space:nowrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* 表格里的英文副标题：单行省略，行高整齐 */
td .tiny{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
td .tiny.wrap{white-space:normal;max-width:none}
/* 数据表默认不换行，长文本用 class="wrap" 单独允许换行 */
tbody td{white-space:nowrap}
tbody td.wrap,tbody td .wrap{white-space:normal;max-width:34ch;display:block}
.pill,.tag{vertical-align:middle}
/* KPI 数量较多时（如仪表盘 8 个）用固定 4 列，避免最后一行留空洞 */
.kpis.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.cols-4 .kpi{max-width:none}
@media (max-width:1200px){.kpis.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 紧凑图标按钮组（表格操作列） */
.ibtn.xs{width:24px;height:24px;background-size:13px 13px;border-radius:5px}
.icon-btn-group.tight{gap:4px}
.icon-btn-group.tight .ibtn{width:25px;height:25px;background-size:13px 13px}
/* ---------- 商品标签 chip（v0.7）---------- */
.tagchip{display:inline-block;padding:1px 7px;margin:1px 3px 1px 0;border-radius:9px;font-size:var(--t-2xs);
line-height:16px;white-space:nowrap;border:1px solid transparent;background:#eef1f7;color:#4a5568;
text-decoration:none;vertical-align:middle}
.tagchip.blue{background:#e8effc;color:#002E83;border-color:#c3d4f0}
.tagchip.gold{background:#fff6dd;color:#8a6100;border-color:#f7dc9a}
.tagchip.warn{background:#fff2e5;color:#a4530b;border-color:#f7cfa8}
.tagchip.red{background:#fdecec;color:#b3261e;border-color:#f3c2c0}
.tagchip.gray{background:#eef1f7;color:#5b667a}
.tagchip.on{outline:2px solid #002E83;outline-offset:1px;font-weight:var(--w-strong)}
/* ---------- 12. 表格里的产品缩略图（v1.0） ---------- */
.thumb.sm{width:32px;height:32px}
.noimg.sm{width:32px;height:32px;font-size:var(--t-2xs)}
.thumbs{display:flex;gap:3px;align-items:center;flex-wrap:nowrap}
.thumbs img{flex:0 0 auto}
.thumbs .noimg{flex:0 0 auto}
td.c .thumb,td.c .noimg{margin:0 auto}
/* ==========================================================================
v1.1 可读性 & 友好度优化（2026-09-28）
目标：表格不再被压成竖排、一屏能看更多行、颜色噪声降低、手机可用
========================================================================== */
/* ---------- 14.1 表格：不再挤压列宽 ---------- */
/* 关键：让表格按内容自然宽度铺开，容器不够就横向滚动，而不是把中文列压成一个字一行 */
.table-wrap>table,.scroll>table,.card>table{min-width:max-content}
.table-wrap,.scroll{overflow:auto}
.card{overflow-x:auto} /* 直接放在卡片里的宽表也能滚，不撑破卡片 */
tbody td[style*="white-space:normal"]{min-width:170px} /* 允许换行的“品名”类列，给最小宽度 */
tbody td[style*="white-space:normal"] .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:34ch}
/* 行高与斑马纹：长表更好扫读 */
tbody tr{height:46px}
tbody tr:nth-child(even)>td{background:var(--line-2)}
tbody tr:hover>td{background:var(--brand-50)}
tbody tr.on>td{background:var(--brand-50)}
thead th{position:sticky;top:0;z-index:3;background:#F4F7FC;border-bottom:1px solid var(--line)}
thead th:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line-2)}
tbody td{border-bottom:1px solid #F1F4FA}
tbody tr:last-child>td{border-bottom:0}
/* 数字列：等宽数字、右对齐、千分位更整齐 */
td.r,th.r{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* 表格里的输入框：去掉满屏边框，聚焦才描边（视觉噪声 -60%） */
tbody input,td input{border-color:transparent;background:var(--brand-50);box-shadow:none}
tbody input:hover,td input:hover{border-color:var(--line);background:var(--surface)}
tbody input:focus,td input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-50)}
tbody input[type=number]{text-align:right}
td.c input[type=number],td.c input[type=text]{text-align:center}
td .btn.s,td .ibtn{height:26px}
/* 行内操作按钮：平时安静，鼠标移到这一行才显眼 */
tbody .icon-btn-group{opacity:.42;transition:opacity .15s}
tbody tr:hover .icon-btn-group,tbody tr:focus-within .icon-btn-group{opacity:1}
tbody .btn.s{opacity:.75}
tbody tr:hover .btn.s{opacity:1}
/* ---------- 14.2 KPI：更紧凑 + 自动填满（不再落单留大片空白） ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.kpi{max-width:none;min-width:0;padding:12px 14px;border-radius:var(--r)}
.kpi .l{font-size:var(--t-xs);color:var(--muted)}
.kpi .v{font-size:var(--t-xl);margin-top:5px;letter-spacing:-.3px}
.kpi .v.sm{font-size:var(--t-lg);line-height:1.35}
.kpi .f{font-size:var(--t-2xs);margin-top:3px}
.kpis.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.dense .kpi{padding:10px 12px}
.kpis.dense .kpi .v{font-size:var(--t-xl)}
/* 次要 KPI：弱化成灰底小卡，不跟主数字抢注意力 */
.kpi.sub{background:#F8FAFD;border-color:var(--line-2);box-shadow:none}
.kpi.sub .v{color:var(--ink-2);font-size:var(--t-xl)}
.kpi.sub::after{background:var(--line)}
/* ---------- 14.3 提示条：数据来源提示轻量化 + 可折叠 ---------- */
.note.data{
background:var(--brand-50);border:1px solid var(--line);border-left:3px solid var(--muted-2);
color:var(--ink-2);padding:8px 12px;font-size:var(--t-xs);margin-bottom:12px
}
.note.data::before{background:none}
.note.data details>summary{cursor:pointer;color:var(--brand);font-weight:var(--w-strong);list-style:none;display:inline}
.note.data details>summary::-webkit-details-marker{display:none}
.note.data details>summary:after{content:" 详情 ↓";font-weight:var(--w-read);color:var(--muted)}
.note.data details[open]>summary:after{content:" 收起 ↑"}
.note.data b{color:var(--ink)}
.note.compact{padding:8px 12px;font-size:var(--t-xs)}
/* ---------- 14.4 页内锚点导航 + 分栏（详情页少滚动） ---------- */
.anchor-nav{
position:sticky;top:var(--topbar-h);z-index:20;display:flex;gap:6px;flex-wrap:wrap;align-items:center;
padding:8px 10px;margin:0 0 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)
}
.anchor-nav a{
padding:5px 10px;border-radius:5px;font-size:var(--t-xs);font-weight:var(--w-strong);color:var(--ink-2);white-space:nowrap
}
.anchor-nav a:hover{background:var(--brand-50);color:var(--brand);text-decoration:none}
.anchor-nav .spacer{flex:1}
/* ---------- 14.5 无 JS 下拉（打印/导出/更多） ---------- */
.dropdown{position:relative;display:inline-flex}
.dropdown>summary{
list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
border-radius:5px;border:1px solid var(--line);background:var(--surface);color:var(--brand);font-size:var(--t-xs);font-weight:var(--w-strong);
box-shadow:var(--sh-1)
}
.dropdown>summary::-webkit-details-marker{display:none}
.dropdown>summary:after{content:"▾";font-size:var(--t-2xs);opacity:.7}
.dropdown[open]>summary{background:var(--brand-50);border-color:var(--brand-100)}
.dropdown .menu{
position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:170px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);box-shadow:var(--sh-3);padding:6px;display:flex;flex-direction:column;gap:2px
}
.dropdown .menu a{
padding:7px 10px;border-radius:5px;font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap;font-weight:var(--w-ui)
}
.dropdown .menu a:hover{background:var(--brand-50);color:var(--brand);text-decoration:none}
/* ---------- 14.6 顶栏：全局搜索 ---------- */
.topbar .gsearch{position:relative;display:flex;align-items:center;flex:1 1 auto;max-width:420px}
.topbar .gsearch input{
height:34px;padding-left:32px;padding-right:64px;width:100%;background:var(--surface);border-color:var(--line)
}
.topbar .gsearch:before{
content:"";position:absolute;left:10px;width:15px;height:15px;opacity:.55;
background:url("data:image/svg+xml;utf8,") center/15px no-repeat
}
.topbar .gsearch kbd{
position:absolute;right:8px;font-size:var(--t-2xs);color:var(--muted-2);background:#F2F5FA;border:1px solid var(--line);
border-radius:4px;padding:1px 5px;font-family:inherit
}
.nav-toggle{display:none}
/* ---------- 14.7 侧栏：更紧凑 ---------- */
.nav-item,.side nav a{padding:7px 20px 7px 17px;font-size:var(--t-xs)}
.group{margin:2px 0}
.group-title{padding:7px 20px 3px;font-size:var(--t-2xs)}
.brand{padding:15px 20px 12px;font-size:var(--t-lg)}
/* ---------- 14.8 手机端（≤820px）：侧栏抽屉 + 表格卡片化 ---------- */
.scrim{display:none}
@media (max-width:820px){
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.nav-toggle:before{content:"";width:16px;height:12px;
background:linear-gradient(var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 7px,transparent 7px 10px,var(--ink) 10px 12px)}
.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-102%);transition:transform .2s ease;
width:236px;box-shadow:var(--sh-3)}
body.nav-open .sidebar{transform:none}
body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(14,26,43,.42);z-index:55}
.brand b,.brand small,.group-title,.nav-item span,.side-foot{display:block}
.nav-item{justify-content:flex-start;padding:10px 18px}
.content{padding:14px 12px 60px}
.topbar{padding:0 12px;gap:8px}
.topbar .gsearch{max-width:none}
.page-head h1{font-size:var(--t-lg)}
.card{padding:14px;border-radius:var(--r)}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kpi .v{font-size:var(--t-xl)}
.anchor-nav{top:var(--topbar-h);overflow-x:auto;flex-wrap:nowrap}
/* 表格卡片化：加了 .table-cards 的表，在手机上每行变成一张小卡（不用左右拖动） */
.table-cards{min-width:0!important}
.table-cards thead{display:none}
.table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:auto}
.table-cards tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px;padding:10px 12px;height:auto!important;
background:var(--surface);box-shadow:var(--sh-1)}
.table-cards tr:nth-child(even)>td{background:transparent}
.table-cards td{border:0;padding:3px 0;height:auto;white-space:normal;display:flex;gap:10px;align-items:baseline}
.table-cards td:before{content:attr(data-label);flex:0 0 78px;color:var(--muted);font-size:var(--t-2xs);font-weight:var(--w-ui)}
.table-cards td.full{display:block}
.table-cards td.full:before{display:block;margin-bottom:2px}
.table-cards td[data-label=""]{padding:0}
.table-cards td[data-label=""]:before{display:none}
.table-cards td.c{text-align:left}
.table-cards td .noimg,.table-cards td .thumb{width:56px!important;height:56px!important}
}
/* ---------- 14.9 空态 / 说明文字更清楚 ---------- */
.tiny{line-height:1.65}
.hint-bar{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r);padding:8px 12px;
font-size:var(--t-xs);color:var(--ink-2);margin-bottom:12px}
.hint-bar b{color:var(--brand)}
/* ---------- 14.10 手机端：根治横向溢出（顶栏与 KPI 会撑宽页面） ---------- */
@media (max-width:820px){
body{overflow-x:hidden}
.topbar{gap:6px}
.gsearch{min-width:0;flex:1 1 60px}
.gsearch input{min-width:0;padding-right:10px}
.gsearch kbd{display:none}
.top-actions .btn.sec.s{display:none} /* 手机顶部放不下，从抽屉菜单进 */
.crumbs{display:none} /* 页面自己有大标题，手机上省地方 */
.kpi .l,.kpi .f{white-space:normal} /* 允许换行，卡片不再被撑宽 */
.toolbar{overflow-x:auto;flex-wrap:nowrap}
.page-head .actions{width:auto}
.table-cards td[style*="white-space:normal"]{min-width:0}
}
/* ---------- 14.11 商品身份：只把（子）ASIN 当主标识（v1.2） ---------- */
.idcell{line-height:1.35}
.idcell .tiny{margin-top:1px;white-space:normal}
.asin-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:var(--w-strong);
font-size:var(--t-sm);letter-spacing:.3px;white-space:nowrap}
tbody td .asin-id{display:inline-block}
tr.row-parent{background:#FBFAF2} /* 父体行：淡黄底，一眼看出不是发货对象 */
tr.row-parent:hover{background:#F7F5E8}
@media print{
tr.row-parent{background:none}
.asin-id{font-size:var(--t-2xs)}
}
/* ==========================================================================
v1.2.8 交互层：命令面板(⌘K) · 批量操作条 · 右上角提示 · 可折叠菜单
（颜色仍只用品牌色 #002E83 / #FCC200 + 既有中性灰阶）
========================================================================== */
/* ---------- 顶栏搜索（打开命令面板） ---------- */
.gsearch.palette-open{
display:flex;align-items:center;gap:8px;min-width:320px;max-width:520px;flex:1;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
padding:7px 12px;color:var(--muted);font:inherit;text-align:left;cursor:text;
transition:border-color .15s,box-shadow .15s
}
.gsearch.palette-open:hover{border-color:var(--brand-100);box-shadow:var(--sh-1)}
.gs-ico{width:14px;height:14px;flex:0 0 14px;border-radius:50%;
border:1.6px solid var(--muted-2);position:relative}
.gs-ico::after{content:"";position:absolute;right:-4px;bottom:-3px;width:7px;height:1.6px;
background:var(--muted-2);transform:rotate(45deg);border-radius:2px}
.gs-ph{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsearch kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-2xs);font-weight:var(--w-ui);line-height:1;color:var(--muted);
background:var(--brand-50);border:1px solid var(--line);border-radius:5px;padding:4px 6px}
/* ---------- 命令面板 ---------- */
.cmdk{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start}
.cmdk[hidden]{display:none}
.cmdk-bg{position:absolute;inset:0;background:rgba(14,26,43,.42);backdrop-filter:blur(2px)}
.cmdk-box{position:relative;margin-top:9vh;width:min(680px,92vw);background:var(--surface);
border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;animation:cmdkIn .16s ease-out}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.cmdk-box input{width:100%;border:0;border-bottom:1px solid var(--line-2);padding:16px 18px;
font-size:var(--fs-lg);outline:none;background:transparent;color:var(--ink)}
.cmdk-list{max-height:min(58vh,460px);overflow:auto;padding:6px}
.cmdk-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;
padding:9px 12px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.cmdk-item:hover,.cmdk-item.on{background:var(--brand-50);text-decoration:none;color:var(--ink)}
.cmdk-kind{font-size:var(--t-2xs);font-weight:var(--w-strong);color:var(--brand);background:var(--brand-100);
border-radius:var(--r-pill);padding:2px 8px;text-align:center}
.cmdk-title{font-weight:var(--w-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-sub{color:var(--muted);font-size:var(--fs-sm);max-width:220px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted)}
.cmdk-foot{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--line-2);
color:var(--muted-2);font-size:var(--fs-xs);background:var(--brand-50)}
/* ---------- 批量操作条（勾选后从底部浮出） ---------- */
.bulkbar{position:fixed;left:calc(var(--sidebar-w) + 16px);right:16px;bottom:16px;z-index:60;
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:10px 12px;animation:bulkIn .18s ease-out}
.bulkbar[hidden]{display:none}
@keyframes bulkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bulkcount{font-weight:var(--w-strong);color:var(--brand);white-space:nowrap}
.bulkcount b{font-size:var(--fs-lg)}
.bulkbar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
body.has-bulk .content{padding-bottom:96px}
@media (max-width:900px){
.bulkbar{left:8px;right:8px;bottom:8px}
.bulkbar input,.bulkbar select{flex:1 1 140px}
}
/* ---------- 右上角提示 toast ---------- */
#toastHost{position:fixed;right:18px;top:66px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast-item{background:var(--ink);color:#fff;border-radius:var(--r);box-shadow:var(--sh-3);
padding:10px 14px;max-width:340px;font-size:var(--fs-sm);animation:toastIn .18s ease-out}
.toast-item.ok{background:#146B33}
.toast-item.warn{background:#8A6100}
.toast-item.out{opacity:0;transform:translateY(-6px);transition:all .35s}
@keyframes toastIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
/* ---------- 可折叠菜单分组 ---------- */
.group-title{width:100%;border:0;background:transparent;cursor:pointer;display:flex;
align-items:center;justify-content:space-between;gap:6px;font:inherit;text-align:left}
.group-title:hover{color:var(--brand)}
.group-title .chev{width:7px;height:7px;border-right:1.6px solid currentColor;
border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .18s}
[data-group].closed .group-title .chev{transform:rotate(-45deg)}
[data-group].closed .nav-item{display:none}
/* ---------- 细节打磨 ---------- */
.card{border-radius:var(--r-lg)}
table tbody tr:hover{background:var(--brand-50)}
.btn{transition:transform .06s,box-shadow .15s,background .15s}
.btn:active{transform:translateY(1px)}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* ---------- 手机端：表格横向可滑 + 卡片化提示 ---------- */
@media (max-width:760px){
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grid2{grid-template-columns:1fr}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-head{flex-direction:column;align-items:flex-start;gap:8px}
#toastHost{right:8px;left:8px;top:60px}
.toast-item{max-width:none}
}
/* ---------- 首页「今天要处理的事」清单 ---------- */
.tasklist{display:flex;flex-direction:column;gap:6px}
.taskitem{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--brand-100);
border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;
transition:box-shadow .15s,transform .08s,border-color .15s}
.taskitem:hover{box-shadow:var(--sh-2);transform:translateY(-1px);text-decoration:none;border-color:var(--brand-100)}
.taskitem.danger{border-left-color:var(--danger)}
.taskitem.warn{border-left-color:var(--accent)}
.taskitem.info{border-left-color:var(--brand)}
.tk-n{font-size:var(--t-lg);font-weight:var(--w-strong);text-align:center;color:var(--brand)}
.taskitem.danger .tk-n{color:var(--danger)}
.taskitem.warn .tk-n{color:var(--warn)}
.tk-body{display:flex;flex-direction:column;min-width:0}
.tk-body b{font-size:var(--fs);font-weight:var(--w-strong)}
.tk-body .tiny{color:var(--muted)}
.tk-go{color:var(--brand);font-weight:var(--w-strong);white-space:nowrap}
@media (max-width:760px){
.taskitem{grid-template-columns:36px 1fr;gap:8px}
.tk-go{grid-column:2;font-size:var(--fs-sm)}
}
/* ==========================================================================
v1.2.9 深色模式 · 表格密度 · 手机卡片化 · 图标按钮 · 键盘选中行
========================================================================== */
/* ---------- 顶栏小图标按钮 ---------- */
.iconbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
color:var(--brand);font-size:var(--t-md);line-height:1;cursor:pointer;display:inline-flex;
align-items:center;justify-content:center;transition:background .15s,box-shadow .15s,transform .08s}
.iconbtn:hover{background:var(--brand-50);box-shadow:var(--sh-1)}
.iconbtn:active{transform:translateY(1px)}
/* ---------- 键盘选中的行 ---------- */
tr.kbd-row{background:var(--accent-50)!important;box-shadow:inset 3px 0 0 var(--accent)}
/* ---------- 表格密度 ---------- */
[data-density="compact"] table th,[data-density="compact"] table td{padding-top:3px;padding-bottom:3px}
[data-density="compact"] .card{padding:10px 12px}
[data-density="compact"] .kpi{padding:10px 12px}
[data-density="compact"] .kpi .v{font-size:var(--fs-lg)}
/* ---------- 深色模式（品牌色不变：深蓝可提亮一档以保证可读性） ---------- */
[data-theme="dark"]{
--brand:#7FA8F0; --brand-700:#5E8BD8; --brand-600:#93B6F5; --brand-100:#22375C; --brand-50:#1A2740;
--accent:#FCC200; --accent-700:#E0AC00; --accent-50:#2A2410;
--ink:#E9EEF7; --ink-2:#C3CDDD; --muted:#93A0B4; --muted-2:#75839A;
--line:#2A3648; --line-2:#232E3E; --bg:#101823; --surface:#161F2C;
--danger:#F08A7E; --danger-bg:#3A1F1C; --danger-line:#5A2E28;
--ok:#7BD69B; --ok-bg:#152C1E; --ok-line:#265034;
--warn:#F3C969; --warn-bg:#332C12; --warn-line:#584B1F;
--sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 2px 8px rgba(0,0,0,.45); --sh-3:0 10px 30px rgba(0,0,0,.55);
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] .side{background:var(--sh-nav-bg)}
[data-theme="dark"] .card,[data-theme="dark"] .kpi,[data-theme="dark"] .cmdk-box,
[data-theme="dark"] .bulkbar{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] table th{background:#1B2534;color:var(--ink-2)}
[data-theme="dark"] table td{border-color:var(--line)}
[data-theme="dark"] table tbody tr:hover{background:#1B2534}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
background:#111A25;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .btn{background:#1D283A;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .btn.y{background:var(--accent);color:#1A1A1A;border-color:var(--accent)}
[data-theme="dark"] .toast-item{background:#0B1119}
[data-theme="dark"] .cmdk-bg{background:rgba(0,0,0,.55)}
[data-theme="dark"] tr.kbd-row{background:#2A2410!important}
/* ---------- 手机端：表格自动变卡片（标签靠 JS 写入的 data-label） ----------
复用已有 .table-cards 的成熟写法，并补两个必须项：
① 桌面规则里 `tbody tr{height:46px}` 会把卡片压成 46px 造成行与行重叠 → 必须 height:auto!important；
② `.scroll>table{min-width:max-content}` + `td[style*=white-space:normal]{min-width:170px}` 优先级更高 → 也要压掉。 */
@media (max-width:760px){
.scroll{overflow:visible!important;box-shadow:none;border:0;background:transparent}
.scroll table{display:block!important;width:auto!important;min-width:0!important;max-width:100%!important;font-size:var(--fs)}
.scroll thead{display:none!important}
.scroll tbody{display:block!important}
.scroll tbody tr{display:block!important;height:auto!important;min-height:0!important;float:none!important;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh-1);padding:10px 12px;margin:0 0 10px}
.scroll tbody tr>td{display:flex!important;height:auto!important;align-items:baseline;gap:10px;
width:auto!important;min-width:0!important;max-width:none!important;border:0!important;
padding:3px 0!important;background:transparent!important;white-space:normal!important;
overflow-wrap:anywhere;text-align:left!important;position:static!important}
.scroll tbody tr>td::before{content:attr(data-label);flex:0 0 76px;color:var(--muted);
font-size:var(--fs-xs);font-weight:var(--w-strong);white-space:normal}
.scroll tbody tr>td:not([data-label])::before,
.scroll tbody tr>td[data-label=""]::before{display:none}
.scroll tbody tr>td:empty{display:none!important}
.scroll tbody tr>td .thumb{width:56px;height:56px}
.scroll tbody tr>td input,.scroll tbody tr>td select{max-width:100%!important}
}
/* ==========================================================================
v3 外壳与组件精修（v1.3.0）
目标：先把「看不清」解决（侧栏分组标题原来只有 3.61:1 对比度），
再把外壳的层次、间距、按钮层级统一。
做法：本层只覆盖视觉，不改结构；浅色/深色两套都过 WCAG 4.5:1 自检。
========================================================================== */
/* ---------- 侧栏 ---------- */
/* 侧栏底色不再用深蓝渐变，也不再是近黑 —— 统一由 --sh-nav-bg 决定。
去掉 background-image：渐变会盖掉 background-color，是当初看着像黑柱子的原因之一。 */
.sidebar{
background-color:var(--sh-nav-bg);
box-shadow:inset -1px 0 0 var(--sh-nav-line)
}
.brand{padding:16px 18px 14px;border-bottom:1px solid var(--sh-nav-line-soft)}
.brand b{font-size:var(--t-xl);font-weight:var(--w-strong);letter-spacing:.2px}
.brand .brand-logo{height:26px;width:auto;display:block;align-self:center}
body.rail .sidebar .brand-logo{display:none}
[data-theme="dark"] .brand .brand-logo{filter:brightness(0) invert(1)}
/* 分组标题：原来 10.5px/700 却被 font:inherit 冲掉、颜色只有 45% 白（3.61:1）
→ 现在 11px/700、72% 白（≈6.4:1）、中文不做大写、悬停变纯白 */
.sidebar .group-title{
font-family:var(--ds-font);font-size:var(--t-xs);font-weight:var(--w-strong);line-height:1.25;
letter-spacing:.6px;text-transform:none;color:var(--sh-nav-fg);
padding:13px 16px 6px;border:0;background:transparent;width:100%;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:8px;
transition:color .14s
}
.sidebar .group-title:hover,.sidebar .group-title:focus-visible{color:var(--sh-nav-fg-hi)}
.sidebar .group-title .chev{width:8px;height:8px;border-right:1.8px solid currentColor;
border-bottom:1.8px solid currentColor;transform:rotate(45deg);opacity:.9}
[data-group].closed .group-title .chev{transform:rotate(-45deg)}
.group{margin:0}
[data-group]{padding-bottom:2px}
/* 导航项：字号回到 13px、常态 86% 白（≈10:1）、选中左侧品牌黄 + 轻微白底 */
.sidebar .nav-item,.sidebar .side nav a{
font-size:var(--t-sm);font-weight:var(--w-ui);color:var(--sh-nav-fg);
padding:8.5px 16px 8.5px 14px;border-left:3px solid transparent;border-radius:0 8px 8px 0;
margin-right:8px;transition:background .14s,color .14s
}
.sidebar .nav-item .ic{width:17px;height:17px;flex:0 0 17px;opacity:.92}
.sidebar .nav-item:hover{background:var(--sh-nav-hover);color:var(--sh-nav-fg-hi);text-decoration:none}
.sidebar .nav-item.on{background:var(--sh-nav-on-bg);color:var(--sh-nav-on-fg);font-weight:var(--w-strong);
border-left-color:var(--sh-nav-bar);box-shadow:none}
.sidebar .side-foot{padding:12px 16px 16px;color:var(--sh-nav-fg-dim);font-size:var(--t-2xs)}
/* ---------- 顶栏 ---------- */
.topbar{height:60px;background:var(--surface);box-shadow:0 1px 0 var(--line),0 1px 3px rgba(16,24,40,.04)}
[data-theme="dark"] .topbar{box-shadow:0 1px 0 var(--line)}
/* ---------- 页头 ---------- */
.page-head{padding:0 0 14px;border-bottom:1px solid var(--line-2);margin-bottom:16px}
.page-head h1{font-size:var(--t-xl);font-weight:var(--w-strong);letter-spacing:-.2px;color:var(--ink)}
.page-head .sub{font-size:var(--t-xs);color:var(--muted);margin-top:3px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
/* ---------- 卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 1px 2px rgba(16,24,40,.04);padding:16px 18px;margin-bottom:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.card-head h2,.card > h2,.card > h3{font-size:var(--t-md);font-weight:var(--w-strong);color:var(--ink);letter-spacing:-.1px}
[data-theme="dark"] .card{box-shadow:none}
/* ---------- 表格 ---------- */
table thead th{background:var(--brand-50);color:var(--muted);font-size:var(--t-2xs);font-weight:var(--w-strong);
letter-spacing:.4px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl-wrap,.table-wrap,.scroll{border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--surface);overflow:auto}
tbody td{padding:10px 12px;font-size:var(--t-sm);color:var(--ink-2);vertical-align:middle}
tbody tr{height:auto;min-height:44px}
tbody tr>td{border-bottom:1px solid var(--line-2)}
tbody tr:hover>td{background:var(--brand-50)}
tbody tr:last-child>td{border-bottom:0}
.card .table-wrap,.card .scroll{border:0;box-shadow:none;margin-top:2px}
/* ---------- 按钮体系：主/次/强调/危险 ---------- */
.btn,.btn.s{height:34px;padding:0 14px;border-radius:var(--r);border:1px solid transparent;
font-size:var(--t-sm);font-weight:var(--w-ui);line-height:1;display:inline-flex;align-items:center;gap:6px;justify-content:center;
transition:background .15s,border-color .15s,box-shadow .15s,transform .06s}
.btn.s{height:28px;padding:0 10px;font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.btn:hover{background:var(--brand-600);color:#fff;text-decoration:none}
.btn.y{background:var(--accent);color:#3A2C00;border-color:var(--accent-700);font-weight:var(--w-strong)}
.btn.y:hover{background:#FFD334;color:#3A2C00}
.btn.sec,.btn.r{background:var(--surface);color:var(--ink)}
.btn.sec{border-color:var(--line)}
.btn.sec:hover{border-color:var(--brand-100);color:var(--brand)}
.btn.r{color:var(--danger);border-color:var(--danger-line)}
.btn.r:hover{background:var(--danger-bg)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed}
[data-theme="dark"] .btn{background:var(--brand-100);color:var(--ink);border-color:var(--brand-100)}
[data-theme="dark"] .btn.y{background:var(--accent);color:#3A2C00}
[data-theme="dark"] .btn.sec,[data-theme="dark"] .btn.r{background:var(--surface);color:var(--ink)}
/* ---------- KPI 卡片 ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:14px 16px;position:relative;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kpi .l{font-size:var(--t-xs);font-weight:var(--w-strong);color:var(--muted);letter-spacing:.2px}
.kpi .v{font-size:var(--t-2xl);font-weight:var(--w-strong);color:var(--brand);letter-spacing:-.6px;line-height:1.2;margin:4px 0 2px}
.kpi .f{font-size:var(--t-2xs);color:var(--muted)}
.kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
background:var(--brand-100)}
.kpi.alert::before{background:var(--danger)}
.kpi.hi::before{background:var(--accent)}
.kpi.alert{border-color:var(--danger-line)}
[data-theme="dark"] .kpi{box-shadow:none}
/* ---------- 提示条 / 空态 ---------- */
.note{border-radius:var(--r);border:1px solid var(--warn-line);background:var(--warn-bg);
color:var(--ink);font-size:var(--t-xs);padding:10px 12px}
.toast{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--ink)}
/* ---------- 标签胶囊 ---------- */
.tagchip,.pill{border-radius:var(--r-pill);font-size:var(--t-2xs);font-weight:var(--w-strong);padding:2px 9px;
border:1px solid transparent;display:inline-flex;align-items:center;gap:4px}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
/* 只读字段（原来 inline 写死浅灰底，深色下会露白） */
.ro-field{background:var(--brand-50)!important;color:var(--muted)}
/* ---------- 侧栏文字渲染优化（v1.3.1） ---------- */
.sidebar{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sidebar .nav-item,.sidebar .group-title{text-shadow:none}
.sidebar .nav-item.on{box-shadow:none}
/* ================= v1.4 排版与可视化增强 ================= */
/* KPI 卡：色点 + 单位/目标小字 + 环比 */
.kpi .l .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.kpi .l .tiny{margin-left:4px;font-size:var(--fs-xs);color:var(--muted-2)}
.kpi .d{font-size:var(--fs-xs);color:var(--muted-2);margin-top:4px;display:flex;gap:6px;align-items:center}
.kpi .d .up{color:var(--ok)} .kpi .d .down{color:var(--danger)}
/* 图表网格：宽屏并排，窄屏堆叠 */
.chart-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:16px}
.chart-grid .card{margin:0;min-width:0}
.chart-grid .card-head{margin-bottom:6px}
.chart-grid h2{font-size:var(--t-sm);font-weight:var(--w-strong);color:var(--ink)}
@media (max-width:1180px){.chart-grid{grid-template-columns:1fr}}
/* 表格：数字列等宽右对齐，便于纵向比对 */
table .r,table .c{font-variant-numeric:tabular-nums}
table td.r{font-feature-settings:"tnum"}
tbody tr:hover td{background:var(--brand-50)}
/* 可排序表头 */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--brand)}
th.sortable::after{content:"⇅";opacity:.35;margin-left:4px;font-size:var(--t-2xs)}
th.sortable.asc::after{content:"↑";opacity:1;color:var(--brand)}
th.sortable.desc::after{content:"↓";opacity:1;color:var(--brand)}
/* 空状态：更明确 + 带操作入口 */
.empty{display:flex;flex-direction:column;align-items:center;gap:6px}
.empty .ico{font-size:var(--t-2xl);line-height:1;opacity:.5}
.empty .acts{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* 状态徽章（统一「进行中/已暂停」等） */
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--r-pill);
font-size:var(--fs-xs);font-weight:var(--w-strong);border:1px solid transparent;white-space:nowrap}
.badge.on{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.off{background:#F2F5FA;color:var(--muted);border-color:var(--line)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.bad{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
/* 建议列：色块化，扫一眼就能分出该不该动手 */
.act{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--w-strong)}
.act.good{background:var(--ok-bg);color:var(--ok)}
.act.hold{background:var(--accent-50);color:var(--warn)}
.act.fix{background:var(--warn-bg);color:var(--warn)}
.act.kill{background:var(--danger-bg);color:var(--danger)}
/* 顶部「数据说明」默认收起，不再占整行 */
details.data-note{border-left:3px solid var(--accent);background:var(--accent-50);
border-radius:var(--r-sm);padding:5px 10px;margin-bottom:10px;font-size:var(--fs-sm)}
details.data-note>summary{cursor:pointer;font-weight:var(--w-strong);color:var(--brand);list-style:none;display:inline-flex;gap:6px;align-items:center}
details.data-note>summary::-webkit-details-marker{display:none}
details.data-note>summary::before{content:"ⓘ"}
details.data-note .body{margin-top:5px;color:var(--ink-2);line-height:1.7}
/* 表格工具条：行数 + 密度切换 */
.tblbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 6px;flex-wrap:wrap}
.tblbar .cnt{font-size:var(--fs-xs);color:var(--muted-2)}
/* 顶部数据说明：紧凑化，不再每条占一整行 */
.note.data.compact{padding:3px 8px;margin-bottom:8px;font-size:var(--fs-xs);background:transparent;border:none;border-left:2px solid var(--accent)}
.note.data.compact details>summary{font-size:var(--fs-xs);color:var(--muted-2)}
/* ================= v1.5 库存管理 ================= */
/* 可售天数：一条细进度条 + 大字，红黄绿一眼分辨 */
.daysbar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;margin:0 0 4px;max-width:96px;margin-left:auto;margin-right:auto}
.daysbar>span{display:block;height:100%;border-radius:3px;transition:width .2s}
.daysbar.danger>span{background:var(--danger)}
.daysbar.warn>span{background:var(--accent)}
.daysbar.ok>span{background:var(--ok)}
.dl{font-size:var(--t-md);font-variant-numeric:tabular-nums}
.dl.danger{color:var(--danger)} .dl.warn{color:#8A6100} .dl.ok{color:var(--ink-2)}
/* 在库 / 在途 输入框带小标签，不用靠 placeholder 猜 */
.inlab{display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:var(--t-2xs);color:var(--muted-2);line-height:1}
.inlab input{text-align:center}
/* 表格里的密集 KPI（库存页 4 张卡） */
.kpis.dense .kpi{flex:1 1 200px}
/* ==========================================================================
v1.4 「极简」皮肤 (2026-10-08)
--------------------------------------------------------------------------
目标：**文字精简、大留白、功能不减、交互更顺手**。
实现策略：本层只**覆盖**变量与组件样式，不删除上面任何规则。
· 零风险：出问题删掉本段即回到原样；
· 一次生效：所有页面无需逐个改模板就能获得新间距与字号。
三个原则：
1. 留白代替分割线 —— 用间距划分区块，而不是到处画边框。视觉噪声至少降一半。
2. 层级靠字重与色深，不靠字号堆叠 —— 只保留 3 档正文字号，扫读更快。
3. 明细进渐进式披露 —— 收纳解释性长文，
默认只露一行结论。**信息一条不删，只是不再糊在脸上。**
========================================================================== */
:root{
/* ---- 间距比例（4 的倍数，全站只用这 9 档）---- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
--sp-page:clamp(20px, 2.6vw, 40px); /* 页面外边距：窄屏收紧、宽屏放开 */
--sp-card:clamp(20px, 2.2vw, 32px); /* 卡片内边距 */
--sp-gap:var(--sp-5); /* 卡片之间 */
/* ---- 字号阶（只留 5 档，不再有 11.5/12.5/13.5 这种密集档位）---- */
--t-xs:12px; /* 辅助说明 */
--t-sm:13px; /* 次要信息、表头 */
--t-md:14.5px; /* 正文 */
--t-lg:17px; /* 卡片标题 */
--t-xl:22px; /* 页面主标题 */
--t-num:30px; /* KPI 大数字 */
--lh:1.65; /* 行高统一放开，中文需要更大行距才好读 */
/* ---- 圆角与阴影：更柔、更少 ---- */
--r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
--sh-1:0 1px 2px rgba(16,24,40,.04);
--sh-2:0 1px 3px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.04);
--sh-3:0 12px 32px rgba(16,24,40,.10);
/* ---- 分割线更淡：能不用就不用 ---- */
--line:#EAEDF3; --line-2:#F3F5FA;
--sidebar-w:248px; --topbar-h:64px;
/* ---- 动效：统一节奏 ---- */
--ease:cubic-bezier(.32,.72,0,1);
--dur:160ms;
}
/* 兼容旧模板：它们直接引用 --fs-* 变量 */
:root{ --fs-xs:var(--t-xs); --fs-sm:var(--t-sm); --fs:var(--t-md);
--fs-lg:var(--t-lg); --fs-xl:var(--t-xl); --fs-2xl:var(--t-num); }
/* ---------- 基础：行高与平滑 ---------- */
html{scroll-behavior:smooth}
body{font-size:var(--t-md); line-height:var(--lh);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
/* 表格里不需要那么大的行高，否则一屏看不了几行 */
table{line-height:1.5}
/* 焦点可见：极简不等于没有可访问性 */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:2px solid var(--brand-600); outline-offset:2px; border-radius:var(--r-sm);
}
/* ---------- 外壳：更松 ---------- */
.sidebar{width:var(--sidebar-w)}
.nav-item{padding:10px 14px; margin:2px 8px; border-radius:var(--r-sm);
transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.nav-item:hover{background:var(--sh-nav-hover)}
.group-title{padding:14px 22px 6px; font-size:var(--t-xs); letter-spacing:.08em}
.brand{padding:20px 22px 16px}
/* 内容区：留白是主角 */
.main{padding:var(--sp-page)}
.page-head{margin-bottom:var(--sp-6); gap:var(--sp-4); align-items:flex-start}
.page-head h1{font-size:var(--t-xl); font-weight:var(--w-strong); letter-spacing:-.01em; line-height:1.3}
/* 副标题默认只留一行；长解释交给 .more 折叠（见下） */
.page-head .sub{font-size:var(--t-sm); color:var(--muted); max-width:70ch; margin-top:6px;
line-height:1.6}
.page-head .actions{gap:var(--sp-2)}
/* ---------- 卡片：靠留白分隔，不靠边框 ---------- */
.card{padding:var(--sp-card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--sh-1);
margin-bottom:var(--sp-gap); background:var(--surface);
transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.card:hover{border-color:#E2E7F0}
.card-head{margin-bottom:var(--sp-4); gap:var(--sp-3); align-items:baseline}
.card-head h2{font-size:var(--t-lg); font-weight:var(--w-strong); letter-spacing:-.005em}
.card-head .hint{font-size:var(--t-xs); color:var(--muted-2)}
/* ---------- KPI：数字大、装饰少、留白够 ---------- */
.kpis{gap:var(--sp-4); margin-bottom:var(--sp-6)}
.kpi{padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg); border:1px solid var(--line);
box-shadow:none; background:var(--surface);
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.kpi:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}
.kpi .l{font-size:var(--t-xs); color:var(--muted); letter-spacing:.02em; margin-bottom:var(--sp-2)}
.kpi .v{font-size:var(--t-num); font-weight:var(--w-strong); line-height:1.15; letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.kpi .d{font-size:var(--t-xs); color:var(--muted-2); margin-top:var(--sp-2); line-height:1.5}
.kpi.hi{background:linear-gradient(180deg,var(--brand-50),var(--surface))}
/* ---------- 表格：去竖线、放宽行距、操作列悬浮才出现 ---------- */
table{border-collapse:separate; border-spacing:0}
table th{font-size:var(--t-xs); font-weight:var(--w-strong); color:var(--muted);
letter-spacing:.03em; padding:var(--sp-3) var(--sp-4);
border-bottom:1px solid var(--line); background:transparent; text-transform:none}
table td{padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line-2)}
table tbody tr{transition:background 100ms var(--ease)}
table tbody tr:hover{background:var(--brand-50)}
table tbody tr:last-child td{border-bottom:0}
/* 行内操作：平时隐身，鼠标进这一行才露 —— 表格立刻安静下来 */
table tbody tr .row-actions,table tbody td form{opacity:.35;
transition:opacity var(--dur) var(--ease)}
table tbody tr:hover .row-actions,table tbody tr:hover td form{opacity:1}
@media (hover:none){table tbody tr .row-actions,table tbody td form{opacity:1}}
/* ---------- 按钮：更克制，圆角更大，动效更轻 ---------- */
.btn{padding:9px 16px; border-radius:var(--r); font-size:var(--t-sm); font-weight:var(--w-ui);
letter-spacing:.01em; transition:transform var(--dur) var(--ease),
background var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.btn:active{transform:scale(.98)}
.btn.s{padding:6px 12px; font-size:var(--t-xs)}
/* ---------- 表单：控件更高、标签更淡、聚焦才描边 ---------- */
input,select,textarea{padding:9px 12px; border-radius:var(--r-sm);
border:1px solid var(--line); font-size:var(--t-md);
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#D5DCE8}
input:focus,select:focus,textarea:focus{
border-color:var(--brand-600); box-shadow:0 0 0 3px var(--brand-50); outline:none}
label,.field label,.tiny{color:var(--muted)}
/* ---------- 分段控件：更像"标签页"，不像按钮组 ---------- */
.seg{gap:var(--sp-1); padding:var(--sp-1); background:var(--line-2);
border-radius:var(--r); display:inline-flex; flex-wrap:wrap}
.seg a{padding:7px 14px; border-radius:var(--r-sm); font-size:var(--t-sm);
color:var(--muted); transition:all var(--dur) var(--ease)}
.seg a:hover{color:var(--ink); background:rgba(255,255,255,.7)}
.seg a.on{background:var(--surface); color:var(--ink); font-weight:var(--w-strong); box-shadow:var(--sh-1)}
/* ---------- 提示条：轻量化 ---------- */
.toast{padding:var(--sp-3) var(--sp-4); border-radius:var(--r);
background:var(--brand-50); border:1px solid var(--brand-100);
font-size:var(--t-sm); box-shadow:none}
/* ==========================================================================
渐进式披露组件（本次"文字精简但功能不减"的关键）
--------------------------------------------------------------------------
默认收起，只露一句结论；点开才是完整说明。
这样做的好处：**信息一条都没删**，只是不再默认铺满屏幕。
用法：
说明
…长文…
上加 data-p 标优先级
data-p="1" 核心列，始终显示
data-p="2" 次要列，默认显示（可在面板里关掉）
无 data-p 高级列，默认隐藏（可在面板里勾出来）
每张表的状态按 data-colset 的 id 存 localStorage，刷新后保持。
========================================================================== */
.colbar{display:flex; align-items:center; gap:8px; margin:0 0 12px; position:relative}
.colbar-btn{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:var(--t-xs);
border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
color:var(--muted); cursor:pointer; transition:all var(--dur) var(--ease)}
.colbar-btn:hover{color:var(--ink); border-color:#CDD6E5}
.colbar-btn.on{color:var(--brand); border-color:var(--brand-100); background:var(--brand-50)}
.colbar-btn b{font-weight:var(--w-strong); color:var(--ink)}
.colpop{position:absolute; left:0; top:calc(100% + 6px); z-index:70; min-width:230px; max-height:340px;
overflow:auto; padding:14px 16px; border-radius:var(--r); background:var(--surface);
box-shadow:var(--sh-3); border:1px solid var(--line); animation:fade .14s var(--ease)}
.colpop h4{margin:0 0 10px; font-size:var(--t-xs); color:var(--muted); font-weight:var(--w-strong); letter-spacing:.03em}
.colpop label{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:var(--t-sm);
color:var(--ink-2); cursor:pointer; white-space:nowrap}
.colpop label:hover{color:var(--ink)}
.colpop label input{margin:0; flex:0 0 auto}
.colpop .tiny{margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2); display:block}
.colpop .reset{margin-top:8px; font-size:var(--t-xs); color:var(--brand); cursor:pointer;
background:none; border:0; padding:0; text-decoration:underline}
/* 规格：表头去掉底色，只靠字体加粗与色深区分。
页面上量出表头还有 rgb(238,243,251) 的浅蓝底 —— 那是 --brand-50 留下的。
表头一旦有底色，整张表就多出一条"色带"，密度感立刻上来。 */
/* ★ 用「卡片背景色」而不是 transparent：
表头是 position:sticky 的，必须**不透明**，否则滚动时表格内容会从表头底下透出来。
所以去掉的是"色带感"（改用与卡片同色的底），而不是"底色"本身。 */
table thead th, table th{background:var(--surface) !important; background-image:none !important}
table thead{background:transparent}
/* 表头与内容用一条极淡的线分开即可，不需要色块 */
table thead tr{border-bottom:0}
/* 暗黑模式：规格要求「深蓝/黑工业风格」 */
[data-theme="dark"]{--bg:#0B0F16; --surface:#121822; --line:#1F2733; --line-2:#181F2A;
--ink:#E8EDF5; --ink-2:#C2CCDA; --muted:#8A97A8; --muted-2:#76839A;
--brand-50:#141C2A; --brand-100:#1B2740}
[data-theme="dark"] body{background:var(--bg); color:var(--ink)}
[data-theme="dark"] .sidebar{background:var(--sh-nav-bg)}
[data-theme="dark"] .card,[data-theme="dark"] .kpi,[data-theme="dark"] details.panel{
background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 8px rgba(0,0,0,.25)}
[data-theme="dark"] table thead th{background:transparent !important; color:var(--muted)}
[data-theme="dark"] table td{border-bottom-color:var(--line-2)}
[data-theme="dark"] table tbody tr:hover{background:#182231}
[data-theme="dark"] .seg{background:#181F2A}
[data-theme="dark"] .seg a.on{background:#232C3B; color:var(--ink)}
[data-theme="dark"] details.more>div{background:#182231; color:var(--ink-2)}
[data-theme="dark"] .colpop{background:var(--surface); border-color:var(--line)}
[data-theme="dark"] .colbar-btn{background:var(--surface); border-color:var(--line)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
background:#0E141D; border-color:var(--line); color:var(--ink)}
/* ==========================================================================
修复：.note 被误设成 flex，导致长文本被切成碎片
--------------------------------------------------------------------------
原来 `.toast,.note{display:flex;gap:9px}` 把两者写在一起。`.toast` 需要 flex
（左边有个 ::before 图标），但 `.note` 是**普通段落**：
一旦它是 flex，里面的每个 、每段文本节点都变成独立 flex 项，
排成一行还带 9px 间距 —— 页面上就成了"三种 标 准 ， 用系统 PDF…"这种碎句子。
★ 这类错误不报任何异常，只是"字看着怪"，很容易被当成内容问题而查错方向。
========================================================================== */
.note{
display:block; /* 段落用正常文档流 */
background:var(--accent-50);
border:1px solid var(--warn-line);
border-left:3px solid var(--accent);
border-radius:var(--r);
padding:12px 16px;
margin:0 0 16px;
font-size:var(--t-sm,13px);
color:#5C4A00;
line-height:1.7; /* 长说明要足够行距才好读 */
}
.note b{color:var(--ink)}
[data-theme="dark"] .note{background:#241E0A; border-color:#4A3E14; color:#E8D9A8}
[data-theme="dark"] .note b{color:#FFF4CF}
/* ---------- 供应商「可选可输」下拉（sup_field ▾ 按钮 + 弹出列表）----------
原生 datalist 各浏览器行为不一致（有的要打字才弹），加一个永远能点开的列表。 */
.sup-wrap{display:flex;gap:6px;align-items:center;width:100%}
.sup-wrap .sup-x{padding:0 !important;width:36px;min-width:36px;flex:0 0 36px;font-size:13px;color:var(--muted-2,#6B7A90)}
.sup-pop{position:fixed;z-index:1300;background:var(--surface,#fff);border:1px solid var(--line,#E3E8EF);
border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.16);padding:5px;max-height:300px;overflow:auto;min-width:240px}
.sup-pop .it{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:var(--t-sm,13px);color:var(--ink,#1A2233)}
.sup-pop .it:hover{background:var(--brand-50,#F2F5FA)}
.sup-pop .it .sub{color:var(--muted-2,#8892A6);font-size:var(--t-2xs,11px);margin-left:8px}
.sup-pop .it.mut{color:var(--muted-2,#8892A6);cursor:default}
.sup-pop .it.mut:hover{background:none}
/* 发货页商品挑选：类目芯片选中态 */
.pf-tag.on{background:#FFF9E6 !important;border-color:#F5E4B0 !important;color:#8A6100 !important;font-weight:var(--w-strong,600)}
|