/* =============================================================================
耗材二部 · 统一设计系统 v2（award.css）—— 获奖级子模块改造
-----------------------------------------------------------------------------
引入方式（每个子模块页面 前加一行）：
配套：
改造要点（只改外观与质感，不动任何业务逻辑）：
① 顶栏统一为「墨色玻璃条」——全站最强的视觉锚点
② 纸面内容区 + 顶部渐晕，建立层级
③ 卡片：分层阴影 + 顶部高光 + 悬浮上浮
④ 统计卡：大字号 tabular 数字 + 语义色
⑤ 表格：粘性表头 / 斑马 / 悬浮位移 / 数字右对齐
⑥ 筛选 chips：胶囊 + 激活渐变
⑦ 表单：统一圆角 + 聚焦光晕；按钮：主/幽灵双体系
⑧ 弹窗：毛玻璃遮罩 + 弹出动效
⑨ 动效：入场错峰、按钮按压、行悬浮、数字滚动（award.js）
⑩ 打印样式：顶栏与装饰不进纸面
========================================================================== */
/* ========== 1. 设计令牌（压过各页面自己的 :root） ========== */
:root:root{
--ink:#0A1020;
--ink-2:#4B5568;
--ink-3:#5C6478; /* 4.9:1 @白底（原 #8B94A8 仅 3.0:1，浅色主题下过淡） */
--ink-4:#6E7688; /* 4.5:1 @白底 */
--ink-soft:#2C3547;
--muted:#6B7488;
--gray:#6B7488;
--bg:#F4F5F8;
--card:#FFFFFF;
--white:#fff;
--soft:#F1F3F7;
--line:#E5E8EF;
--line-2:#EFF1F6;
--brand:#2447C9;
--brand-2:#4E6BFF;
--brand-d:#1A34A0;
--brand-deep:#1A34A0;
--brand-soft:#ECEFFF;
--blue:#2447C9;
--blue-2:#4E6BFF;
--ok:#0E9F6E; --green:#0E9F6E; --green-2:#3DDC97;
--warn:#B26A05; --amber:#B26A05;
--danger:#C93B3B;--red:#C93B3B; --err:#C93B3B;
--purple:#6D5BD0;
--radius:18px;
--radius-sm:11px;
--r-s:10px; --r-m:13px; --r-l:22px;
--shadow-card:0 1px 2px rgba(10,16,32,.04), 0 12px 32px -20px rgba(10,16,32,.30);
--shadow-card-hover:0 2px 6px rgba(10,16,32,.05), 0 30px 60px -28px rgba(10,16,32,.42);
--shadow:0 10px 34px -16px rgba(10,16,32,.30);
--sh-1:0 1px 2px rgba(10,16,32,.05);
--sh-2:0 8px 22px -14px rgba(10,16,32,.26);
--sh-3:0 30px 64px -32px rgba(10,16,32,.44);
--transition:.3s cubic-bezier(.22,1,.36,1);
--ease:cubic-bezier(.22,1,.36,1);
--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",
"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
--sans:var(--ui-font);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
/* 墨色顶栏专用 */
--bar:#0C1322;
--bar-2:#141D31;
--bar-ink:#E9ECF4;
--bar-ink-2:rgba(233,236,244,.62);
--bar-line:rgba(255,255,255,.10);
}
/* ========== 2. 页面底色与纸面质感 ========== */
body{
font-family:var(--ui-font);
color:var(--ink);
background:var(--bg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
::selection{background:rgba(36,71,201,.16)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
input,select,textarea,button{font-family:inherit}
/* 顶部渐晕 + 细网格，给纸面一点纵深 */
body::before{
content:"";position:fixed;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:0;
background:
radial-gradient(90% 100% at 50% 0%,rgba(36,71,201,.07),transparent 70%),
linear-gradient(rgba(10,16,32,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(10,16,32,.028) 1px,transparent 1px);
background-size:auto,52px 52px,52px 52px;
mask-image:linear-gradient(#000,transparent);
-webkit-mask-image:linear-gradient(#000,transparent);
}
body > *{position:relative;z-index:1}
/* 细滚动条 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(10,16,32,.16);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(10,16,32,.30);background-clip:content-box}
/* 数字统一等宽 */
table,.tabular,.val,.stat,.stat-val,td,th,.num,.money,.tnum,.count{font-variant-numeric:tabular-nums}
/* ========== 3. 墨色玻璃顶栏（核心改造） ========== */
.topbar,.top{
background:linear-gradient(180deg,var(--bar-2),var(--bar))!important;
border-bottom:1px solid var(--bar-line)!important;
color:var(--bar-ink)!important;
box-shadow:0 10px 30px -22px rgba(10,16,32,.75)!important;
position:sticky;top:0;z-index:50;
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
}
.topbar::after,.top::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(120% 100% at 20% 0%,#000,transparent 75%);
-webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000,transparent 75%);
}
.topbar-in,.header-inner{position:relative;z-index:1}
/* 顶栏内的文字统一成浅色 */
.topbar b,.topbar .brand-name,.topbar .brand-sub,.top b,.top h1{
color:var(--bar-ink)!important;
}
.topbar small,.topbar .brand small,.topbar .brand-sub,.top .who{
color:var(--bar-ink-2)!important;
}
.topbar a,.topbar button,.top a,.top button{color:var(--bar-ink-2)!important}
.topbar a:hover,.topbar button:hover,.top a:hover,.top button:hover{color:#fff!important}
/* 返回按钮：玻璃胶囊 */
.topbar .back-btn,.topbar .back-home,.topbar .back,.top .back{
display:inline-flex;align-items:center;gap:7px;
padding:6px 13px;border-radius:99px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);
color:var(--bar-ink-2)!important;
font-size:12.5px;font-weight:600;
text-decoration:none;
transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);
}
.topbar .back-btn:hover,.topbar .back-home:hover,.topbar .back:hover,.top .back:hover{
background:rgba(255,255,255,.14)!important;color:#fff!important;border-color:rgba(255,255,255,.28);
transform:translateY(-1px);
}
/* 品牌徽标 */
.topbar .logo,.topbar .brand-logo{
background:linear-gradient(145deg,#2E52E4,#16247A)!important;
color:#fff!important;
box-shadow:0 6px 16px -8px rgba(22,36,122,.9),inset 0 1px 0 rgba(255,255,255,.3);
border:0!important;
border-radius:12px!important;
transition:transform var(--transition);
}
.topbar .brand:hover .logo,.topbar .brand:hover .brand-logo{transform:rotate(-6deg) scale(1.05)}
/* 顶栏里的按钮 */
.topbar .btn-top,.topbar .btn,.top .btn-top{
background:rgba(255,255,255,.09)!important;
color:var(--bar-ink)!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:11px!important;
box-shadow:none!important;
transition:background var(--transition),transform var(--transition);
}
.topbar .btn-top:hover,.topbar .btn:hover{background:rgba(255,255,255,.16)!important;transform:translateY(-1px)}
/* 顶栏页签 */
.topbar .tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);width:fit-content}
.topbar .tab{
padding:7px 14px;border-radius:10px!important;font-size:13px!important;font-weight:600;
color:var(--bar-ink-2)!important;cursor:pointer;
transition:background var(--transition),color var(--transition);
}
.topbar .tab:hover{color:#fff!important;background:rgba(255,255,255,.08)}
.topbar .tab.active{
background:linear-gradient(180deg,#2E52E4,#2447C9)!important;color:#fff!important;
box-shadow:0 6px 16px -10px rgba(36,71,201,.9);
}
/* 顶栏搜索框 */
.topbar .searchbox{
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:12px!important;
transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.topbar .searchbox:focus-within{background:rgba(255,255,255,.13)!important;border-color:rgba(120,150,255,.55)!important;
box-shadow:0 0 0 3px rgba(78,107,255,.18)}
.topbar .searchbox input{color:#fff!important}
.topbar .searchbox input::placeholder{color:rgba(233,236,244,.45)!important}
.topbar .searchbox svg{color:rgba(233,236,244,.6)!important}
.topbar .searchbox .clr{color:rgba(233,236,244,.6)!important}
/* ========== 4. 页面容器与留白 ========== */
.wrap,.container,.main-wrap,main{max-width:1400px}
.wrap,.container{margin-inline:auto;padding-inline:clamp(16px,2.6vw,34px)}
/* ========== 5. 卡片 ========== */
.card,.panel,.stat-card,.stat,.box,.panel-h + .panel-b,.card,.tb{
background:var(--card)!important;
border:1px solid var(--line)!important;
border-radius:var(--radius)!important;
box-shadow:var(--shadow-card)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
position:relative;
}
/* 卡片顶部高光 */
.card::before,.panel::before{
content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
opacity:.9;pointer-events:none;
}
.card:hover,.panel:hover{border-color:#DCE1EC!important;box-shadow:var(--shadow-card-hover)!important}
/* ========== 6. 统计卡 ========== */
.stat .lbl,.stat-label,.stat .val,.stat-val,.stat .num{letter-spacing:-.01em}
.stat-val,.stat .val{font-weight:700!important;letter-spacing:-.03em!important;line-height:1.05}
.stat .val,.stat-val{font-variant-numeric:tabular-nums}
/* ========== 7. 按钮 ========== */
.btn,.btn-s,.btn-p,.btn-xs,.btn-sm{
border-radius:var(--radius-sm)!important;
font-weight:600;letter-spacing:.01em;
border:1px solid transparent;
transition:transform var(--transition),box-shadow var(--transition),background var(--transition),
border-color var(--transition),color var(--transition),filter var(--transition);
}
.btn:hover,.btn-s:hover,.btn-p:hover{transform:translateY(-1px)}
.btn:active,.btn-s:active,.btn-p:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-primary,.btn-p,.btn.btn-primary{
background:linear-gradient(180deg,#2C4FD8,#2447C9)!important;color:#fff!important;border-color:transparent!important;
box-shadow:0 6px 16px -8px rgba(36,71,201,.75)!important;
}
.btn-primary:hover,.btn-p:hover{background:linear-gradient(180deg,#3357E4,#2447C9)!important;
box-shadow:0 12px 24px -12px rgba(36,71,201,.85)!important}
.btn-ghost,.btn-outline,.btn.btn-ghost,.btn.btn-outline{
background:#fff!important;color:var(--ink-2)!important;border-color:var(--line)!important;box-shadow:var(--sh-1)!important;
}
.btn-ghost:hover,.btn-outline:hover{color:var(--ink)!important;border-color:#D3D9E4!important;box-shadow:var(--sh-2)!important}
.btn-ok{background:linear-gradient(180deg,#11B583,#0E9F6E)!important;color:#fff!important;border-color:transparent!important}
.btn-warn{background:linear-gradient(180deg,#C47A0A,#B26A05)!important;color:#fff!important;border-color:transparent!important}
.btn-danger{background:linear-gradient(180deg,#D24A4A,#C93B3B)!important;color:#fff!important;border-color:transparent!important}
/* ========== 8. 筛选 chips / 标签 ========== */
.filter-tag,.chip,.tag,.badge,.pill,.pp-tag{
border-radius:99px!important;
font-weight:600;letter-spacing:.02em;
transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);
}
.filter-tag{cursor:pointer}
.filter-tag:hover,.chip:hover{transform:translateY(-1px);color:var(--brand)!important;border-color:rgba(36,71,201,.4)!important}
.filter-tag.on,.filter-tag.active,.chip.on,.chip.active{
background:linear-gradient(180deg,#2C4FD8,#2447C9)!important;color:#fff!important;border-color:transparent!important;
box-shadow:0 6px 14px -9px rgba(36,71,201,.9)!important;
}
/* ========== 9. 表单 ========== */
.field label,.fld label,.lbl{font-size:12.5px!important;font-weight:600!important;color:var(--ink-2)!important}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],
input[type=password],input[type=tel],input[type=month],select,textarea{
border:1px solid var(--line)!important;
border-radius:var(--radius-sm)!important;
background:#fff!important;color:var(--ink)!important;
padding:8px 11px!important;font-size:13.5px!important;
transition:border-color var(--transition),box-shadow var(--transition);
}
input:hover,select:hover,textarea:hover{border-color:#D3D9E4!important}
input:focus,select:focus,textarea:focus{
outline:none!important;border-color:rgba(36,71,201,.55)!important;
box-shadow:0 0 0 3px rgba(36,71,201,.12)!important;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)!important}
select{
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,")!important;
background-repeat:no-repeat!important;background-position:right 10px center!important;padding-right:30px!important;
}
/* ========== 10. 表格 ========== */
table{border-collapse:separate!important;border-spacing:0}
thead th{
background:var(--soft)!important;color:var(--ink-2)!important;
font-weight:650!important;letter-spacing:.02em;
border-bottom:1px solid var(--line)!important;
position:sticky;top:0;z-index:3;
backdrop-filter:blur(6px);
}
tbody td{border-bottom:1px solid var(--line-2)!important;color:var(--ink-2)!important}
tbody tr{transition:background var(--transition),transform var(--transition)}
tbody tr:hover{background:#FAFBFF!important}
tbody tr:last-child td{border-bottom:0!important}
/* ========== 11. 弹窗 ========== */
.modal-overlay{
background:rgba(10,16,32,.44)!important;
backdrop-filter:blur(7px)!important;-webkit-backdrop-filter:blur(7px)!important;
animation:award-fade .26s var(--ease);
}
@keyframes award-fade{from{opacity:0}to{opacity:1}}
.modal{
background:var(--card)!important;
border-radius:var(--r-l)!important;border:1px solid var(--line)!important;
box-shadow:0 44px 96px -34px rgba(10,16,32,.6)!important;
animation:award-pop .32s var(--ease);
}
@keyframes award-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* ========== 12. 空状态 ========== */
.empty{color:var(--ink-3)!important;font-size:13px!important;line-height:1.85!important;letter-spacing:.02em}
/* ========== 13. 页签（正文区） ========== */
.tab,.tabs button{border-radius:11px!important;font-weight:600;color:var(--ink-2)!important;
transition:background var(--transition),color var(--transition)}
.tab.active,.tabs button.active{background:var(--brand-soft)!important;color:var(--brand)!important}
/* ========== 14. 杂项 ========== */
.dot{box-shadow:0 0 0 3px rgba(14,159,110,.13)}
.mono,.mono *{font-family:var(--mono)}
hr{border:0;border-top:1px solid var(--line)}
.tag,.badge{border:1px solid transparent}
/* ========== 15. 入场动效（award.js 会给 body 加 .aw-ready） ========== */
.aw-rise{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.aw-rise.aw-in{opacity:1;transform:none}
/* ========== 16. 响应式 ========== */
@media (max-width:980px){
.topbar .tabs{width:100%;overflow-x:auto}
.topbar .tab{white-space:nowrap}
}
@media (max-width:720px){
.topbar,.top{backdrop-filter:none}
.topbar .brand small,.topbar .brand-sub,.top .brand-sub{display:none!important}
.card,.panel{border-radius:15px!important}
table{font-size:12.5px}
}
/* ========== 17. 打印：顶栏与装饰不进纸面 ========== */
@media print{
body::before{display:none!important}
.topbar,.top,.toasts,.sess-fab,.sess-menu{display:none!important}
body{background:#fff!important}
.card,.panel{box-shadow:none!important;border-color:#ddd!important}
thead th{position:static!important;background:#f0f0f0!important}
}
/* ========== 18. 降低动效偏好 ========== */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.aw-rise{opacity:1!important;transform:none!important}
}
/* ========== 19. 顶栏滚动投影 & 表格行微位移（配合 award.js） ========== */
.topbar.aw-stuck,.top.aw-stuck{box-shadow:0 16px 38px -22px rgba(10,16,32,.9)!important}
tbody tr{transform:translateX(var(--row-shift,0px));
transition:transform var(--transition),background var(--transition)}
/* =============================================================================
20. 页面适配（各子模块真实类名 → 获奖级卡片质感）
========================================================================== */
/* ---- 通用：卡片顶部高光（对上面这些真实类名生效） ---- */
.dc-kpi,.dc-panel,.order-card,.stat-card,.chart-card,.g-card,.tb,.wstat,.side-sec,.pane,.row-card{
position:relative;overflow:hidden;
}
.dc-kpi::before,.dc-panel::before,.order-card::before,.stat-card::before,
.chart-card::before,.g-card::before,.tb::before{
content:"";position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
/* ---- 订单进度中心 ---- */
.dc-kpi{
background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
padding:13px 15px!important;box-shadow:var(--shadow-card)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.dc-kpi:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-card-hover)!important;border-color:#DCE1EC!important}
.dc-kpi .k{font-size:11.5px!important;color:var(--ink-3)!important;font-weight:600!important;letter-spacing:.02em}
.dc-kpi .v{font-size:27px!important;font-weight:700!important;letter-spacing:-.03em!important;
margin-top:7px!important;line-height:1.08!important;font-variant-numeric:tabular-nums}
.dc-kpi .v small{font-size:12px!important;font-weight:600!important;color:var(--ink-3)!important;margin-left:3px}
.dc-kpi .d{font-size:11px!important;color:var(--ink-3)!important;margin-top:6px!important}
.stat-card{
background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
padding:14px 16px!important;box-shadow:var(--shadow-card)!important;cursor:pointer;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.stat-card:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-card-hover)!important}
.stat-card .num{
font-size:30px!important;font-weight:700!important;letter-spacing:-.035em!important;line-height:1.05!important;
font-variant-numeric:tabular-nums;
}
.stat-card .label{font-size:11.5px!important;color:var(--ink-3)!important;margin-top:5px!important;font-weight:500}
.stat-card.active{
border-color:rgba(36,71,201,.45)!important;
box-shadow:0 0 0 1px rgba(36,71,201,.18),var(--shadow-card)!important;
}
.stat-card.active .num{color:var(--brand)!important}
.order-card{
background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
box-shadow:var(--shadow-card)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.order-card:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-card-hover)!important;border-color:#DCE1EC!important}
.order-no{font-family:var(--mono)!important;font-weight:650!important;letter-spacing:-.01em!important;font-size:13.5px!important}
.dc-panel{background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow-card)!important}
.empty-state{color:var(--ink-3)!important;font-size:13px!important;line-height:1.85}
/* ---- 薪酬统计中心 ---- */
.stats-grid{gap:12px!important}
.stat{
background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
padding:15px 17px!important;box-shadow:var(--shadow-card)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.stat:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-card-hover)!important;border-color:#DCE1EC!important}
.stat .lbl{font-size:11.5px!important;color:var(--ink-3)!important;font-weight:600!important;letter-spacing:.02em}
.stat .val{font-size:29px!important;font-weight:700!important;letter-spacing:-.035em!important;
margin-top:8px!important;line-height:1.05!important;font-variant-numeric:tabular-nums}
.stat .val small{font-size:13px!important;font-weight:600!important;color:var(--ink-3)!important;margin:0 2px}
.chart-card{
background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;
box-shadow:var(--shadow-card)!important;transition:box-shadow var(--transition),transform var(--transition)!important;
}
.chart-card:hover{box-shadow:var(--shadow-card-hover)!important;transform:translateY(-2px)!important}
.chart-card h2{font-size:14.5px!important;font-weight:650!important;letter-spacing:-.01em}
/* ---- 配件查询中心 ---- */
.g-card{
background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
box-shadow:var(--shadow-card)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.g-card:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-card-hover)!important;border-color:#DCE1EC!important}
.side{background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow-card)!important}
.side-title{font-size:13px!important;font-weight:650!important;letter-spacing:-.01em!important}
.side-sec{border-radius:12px!important;transition:background var(--transition)}
.side-sec:hover{background:#FAFBFF!important}
/* ---- 产品资料中心 ---- */
.tb{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow-card)!important}
.tb:hover{box-shadow:var(--shadow-card-hover)!important;transform:translateY(-2px)!important;transition:all var(--transition)}
.wstat{
background:#fff!important;border:1px solid var(--line)!important;border-radius:14px!important;
padding:12px 14px!important;box-shadow:var(--sh-1)!important;
transition:transform var(--transition),box-shadow var(--transition)!important;
}
.wstat:hover{transform:translateY(-2px)!important;box-shadow:var(--sh-2)!important}
.crumbs .crumb{color:var(--ink-3)!important;transition:color var(--transition)}
.crumbs .crumb:hover{color:var(--brand)!important}
/* ---- 系统管理 ---- */
.pane,.row-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow-card)!important}
.fld input,.fld select,.fld textarea{border-radius:var(--radius-sm)!important;border-color:var(--line)!important}
.fld label{font-size:12px!important;color:var(--ink-2)!important;font-weight:600!important}
/* ---- 生产周报 ---- */
.drow{transition:background var(--transition)!important}
.drow:hover{background:#FAFBFF!important}
.pill{border-radius:99px!important;font-weight:600!important}
/* =============================================================================
21. 强化视觉：让"改造过"一眼可见（更实的层次 / 更深的底 / 标题锚点）
========================================================================== */
:root:root{
--bg:#F1F3F7;
--shadow-card:0 1px 2px rgba(10,16,32,.05), 0 8px 20px -10px rgba(10,16,32,.18),
0 30px 60px -38px rgba(10,16,32,.34);
--shadow-card-hover:0 2px 6px rgba(10,16,32,.06), 0 18px 40px -18px rgba(10,16,32,.30),
0 44px 80px -44px rgba(10,16,32,.40);
}
/* 卡片右上角品牌辉光 + 更实的阴影 */
.stat-card,.order-card,.dc-kpi,.stat,.g-card,.chart-card,.tb,.wstat{
background-image:radial-gradient(120% 90% at 100% 0%,rgba(36,71,201,.05),transparent 58%)!important;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)!important;
}
.stat-card:hover,.order-card:hover,.dc-kpi:hover,.stat:hover,.g-card:hover,.chart-card:hover,.tb:hover,.wstat:hover{
transform:translateY(-4px)!important;
box-shadow:var(--shadow-card-hover)!important;
border-color:#D8DEEA!important;
}
/* 统计卡：更大、更聚焦 */
.stat-card{padding:17px 19px!important;border-radius:19px!important}
.stat-card .num{font-size:32px!important;margin-top:2px!important}
.stat-card .label{font-size:12px!important;letter-spacing:.04em!important}
/* 订单卡：更舒展 + 左侧状态色条 */
.order-card{padding:15px 16px 14px!important;border-radius:18px!important;border-left:3px solid rgba(36,71,201,.16)!important}
.order-card:hover{border-left-color:rgba(36,71,201,.55)!important}
.order-header{padding-bottom:9px!important;border-bottom:1px dashed rgba(10,16,32,.08)}
/* 薪酬统计卡 */
.stat{padding:17px 19px!important;border-radius:19px!important}
.stat .val{font-size:31px!important}
/* 面板 / 分区标题：加锚点 */
.panel h2,.card h2,.dc-panel h2,.chart-card h2{
font-size:14.5px!important;font-weight:660!important;letter-spacing:-.012em!important;
display:flex;align-items:center;gap:9px;color:var(--ink)!important;
}
.panel h2::before,.card h2::before,.dc-panel h2::before,.chart-card h2::before{
content:"";width:3px;height:14px;border-radius:99px;flex:0 0 auto;
background:linear-gradient(180deg,#4E6BFF,#2447C9);
}
.panel .sub,.card .sub{font-size:12px!important;color:var(--ink-3)!important}
/* 表格：表头微蓝底 + 首列强调 + 分隔更轻 */
thead th{
background:linear-gradient(180deg,#F4F6FB,#EFF2F7)!important;
font-size:12px!important;letter-spacing:.03em!important;
border-bottom:1px solid #DFE4EE!important;
}
tbody td{font-size:13px!important}
tbody tr:first-child td:first-child{font-weight:600!important;color:var(--ink)!important}
/* 空状态：虚线框居中 */
.empty,.empty-state{
border:1px dashed rgba(10,16,32,.14)!important;border-radius:14px!important;
padding:26px 18px!important;text-align:center!important;background:rgba(255,255,255,.6)!important;
}
/* 列表项 hover 位移 */
.side-sec,.crumbs .crumb,.row,.row-card,.drow{transition:background var(--transition),transform var(--transition)!important}
/* =============================================================================
22. 浅色顶栏主题（取代墨色玻璃条）
—— 变量层 + 组件层双重覆盖，保证深色规则里的 !important 不会残留
========================================================================== */
:root:root{
--bar:#FFFFFF;
--bar-2:#F6F8FD;
--bar-ink:#0F172A;
--bar-ink-2:rgba(15,23,42,.60);
--bar-line:rgba(10,16,32,.08);
--bar-glass:rgba(255,255,255,.82);
--bar-soft:rgba(10,16,32,.045);
--bar-soft-2:rgba(10,16,32,.075);
}
/* --- 顶栏主体：白色玻璃 + 底部细线 + 柔和投影 --- */
.topbar,.top{
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,248,253,.88))!important;
-webkit-backdrop-filter:saturate(180%) blur(16px)!important;
backdrop-filter:saturate(180%) blur(16px)!important;
border-bottom:1px solid var(--bar-line)!important;
color:var(--bar-ink)!important;
box-shadow:0 1px 0 rgba(10,16,32,.02), 0 10px 26px -22px rgba(10,16,32,.45)!important;
}
/* 网格纹理在浅色下改成极淡的点阵 */
.topbar::after,.top::after{
opacity:.30!important;
background-image:radial-gradient(rgba(10,16,32,.10) 1px,transparent 1px)!important;
background-size:18px 18px!important;
-webkit-mask-image:radial-gradient(130% 100% at 12% 0%,#000,transparent 70%)!important;
mask-image:radial-gradient(130% 100% at 12% 0%,#000,transparent 70%)!important;
}
/* --- 文字 --- */
.topbar b,.topbar .brand-name,.topbar .brand-sub,.top b,.top h1{color:var(--bar-ink)!important}
.topbar small,.topbar .brand small,.topbar .brand-sub,.top .who{color:var(--bar-ink-2)!important}
.topbar a,.topbar button,.top a,.top button{color:var(--ink-2)!important}
.topbar a:hover,.topbar button:hover,.top a:hover,.top button:hover{color:var(--brand)!important}
/* --- 返回胶囊 --- */
.topbar .back-btn,.topbar .back-home,.topbar .back,.top .back{
background:#fff!important;
border:1px solid var(--line)!important;
color:var(--ink-2)!important;
box-shadow:var(--sh-1)!important;
}
.topbar .back-btn:hover,.topbar .back-home:hover,.topbar .back:hover,.top .back:hover{
background:#fff!important;color:var(--brand)!important;border-color:#C9D2E6!important;
box-shadow:var(--sh-2)!important;transform:translateY(-1px)!important;
}
/* --- 品牌徽标：浅色下用描边+浅渐变，不再是深色块 --- */
.topbar .logo,.topbar .brand-logo{
background:linear-gradient(145deg,#EEF2FF,#E3E9FF)!important;
color:var(--brand)!important;
border:1px solid rgba(36,71,201,.20)!important;
box-shadow:0 4px 12px -6px rgba(36,71,201,.45),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
/* --- 顶栏按钮 --- */
.topbar .btn-top,.topbar .btn,.top .btn-top{
background:#fff!important;
color:var(--ink-2)!important;
border:1px solid var(--line)!important;
box-shadow:var(--sh-1)!important;
}
.topbar .btn-top:hover,.topbar .btn:hover{
background:#F7F9FF!important;color:var(--brand)!important;border-color:#C9D2E6!important;
transform:translateY(-1px)!important;
}
/* --- 顶栏页签组 --- */
.topbar .tabs{
background:var(--bar-soft)!important;
border:1px solid rgba(10,16,32,.06)!important;
}
.topbar .tab{color:var(--ink-2)!important}
.topbar .tab:hover{color:var(--brand)!important;background:rgba(36,71,201,.07)!important}
.topbar .tab.active{
background:linear-gradient(180deg,#2E52E4,#2447C9)!important;color:#fff!important;
box-shadow:0 6px 16px -10px rgba(36,71,201,.9)!important;
}
/* --- 顶栏搜索框 --- */
.topbar .searchbox{
background:#fff!important;
border:1px solid var(--line)!important;
box-shadow:var(--sh-1)!important;
}
.topbar .searchbox:focus-within{
background:#fff!important;border-color:rgba(78,107,255,.55)!important;
box-shadow:0 0 0 3px rgba(78,107,255,.14)!important;
}
.topbar .searchbox input{color:var(--ink)!important;background:transparent!important}
.topbar .searchbox input::placeholder{color:rgba(100,116,139,.55)!important}
.topbar .searchbox svg{color:rgba(100,116,139,.7)!important}
.topbar .searchbox .clr{color:rgba(100,116,139,.7)!important}
/* =============================================================================
23. 订单卡重新排布：等高网格（每个框一样大）+ 内部层次 + 明细区内部滚动
—— 2026-11-03 老板要求：不要瀑布流。所有卡片统一高度（--order-row-h），
品类多的订单在卡片内部折叠/滚动，绝不把卡片撑高。
========================================================================== */
.order-grid{
align-items:stretch!important; /* 关键：同排卡片等高 */
grid-auto-rows:var(--order-row-h,340px)!important; /* 固定行高 → 每个框框都一样大 */
gap:var(--order-row-gap,12px)!important;
}
/* 单列（手机）时同样保持「每个框一样大」，只是高度收紧到 300px，明细仍在卡片内滚动 */
@media (max-width:900px){
.order-grid{grid-auto-rows:var(--order-row-h-sm,340px)!important}
}
.order-card{
display:flex!important;flex-direction:column!important;
min-height:0!important;height:100%!important;
padding:15px 16px 13px!important;
border-radius:18px!important;
overflow:hidden!important;
}
/* 头部：单号为主角，客户名降级为右侧小字 */
.order-card .order-header{
display:flex!important;align-items:center!important;gap:8px!important;
margin-bottom:10px!important;padding-bottom:10px!important;
border-bottom:1px solid rgba(10,16,32,.07)!important;
min-height:26px!important;
}
.order-card .order-no{font-size:13.5px!important;font-weight:700!important;letter-spacing:-.01em!important}
.order-card .order-customer{
font-size:11.5px!important;color:var(--ink-3)!important;font-weight:500!important;
max-width:42%!important;margin-left:auto!important;
}
/* 明细区：软底内嵌面板 + 卡片内滚动（卡片等高后，长订单只在面板内部滚动，不外扩）
2026-11-03：flex:1 1 auto 让面板吃掉卡片剩余高度，卡片底部按钮/信息条始终贴底对齐 */
.order-card .item-list{
display:flex!important;flex-direction:column!important;
flex:1 1 auto!important;min-height:0!important;
max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;
margin:0 0 10px!important;padding:9px 10px!important;
background:linear-gradient(180deg,#FAFBFE,#F6F8FC)!important;
border:1px solid rgba(10,16,32,.055)!important;
border-radius:13px!important;
scrollbar-width:thin;
}
.order-card .item-list > *{flex:0 0 auto}
/* 两栏版式：左右两栏都撑满卡片高度，各自内部滚动（备注长也不撑破卡片） */
.order-card.v2 .card-cols{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;align-items:stretch!important}
.order-card.v2 .card-cols .col-left{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.order-card.v2 .card-cols .col-note{min-height:0!important;overflow-y:auto!important}
.order-card .actions{flex:none!important}
.order-card .item-list::-webkit-scrollbar{width:7px}
.order-card .item-list::-webkit-scrollbar-thumb{background:rgba(10,16,32,.14);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.order-card .item-list::-webkit-scrollbar-track{background:transparent}
.order-card .item-row{border-radius:7px!important}
.order-card .item-row:hover{background:rgba(36,71,201,.045)!important}
/* 底部信息条：固定在卡片底部，所有卡片基线对齐 */
.order-card .order-meta{
margin-top:auto!important;padding-top:10px!important;
border-top:1px solid rgba(10,16,32,.06)!important;
gap:10px!important;font-size:11px!important;color:var(--ink-3)!important;
}
.order-card .actions{margin-top:9px!important;gap:6px!important}
.order-card .actions .btn-sm{
padding:5px 11px!important;font-size:11.5px!important;border-radius:9px!important;
flex:1 1 auto!important;justify-content:center;
}
/* 明细被折叠时给个渐隐提示 */
.order-card .item-list.is-overflow{
-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);
mask-image:linear-gradient(180deg,#000 78%,transparent);
}
/* =============================================================================
24. 低对比度修正（自动检测扫出的问题点）
========================================================================== */
/* 生产周报：小标签与任务行次级文字过淡 */
.report-eyebrow,.eyebrow{color:#7A7F9E!important}
.task-tx span{color:#767690!important}
.person-list{color:#6E738F!important}
/* 配件查询：白色半透明徽标在白底上看不见 */
.side .cnt,.cnt.ghost{color:#8A93A8!important}
/* 全站：表单说明、区块副标题、表格次级文字统一提一档 */
.sub,.hint,.label,.lbl,.order-customer,.item-sub,.order-meta,.crumbtag,.arc-chip{
color:var(--ink-3)!important;
}
.stat-foot,.stat .lbl,.stat-label{color:var(--ink-3)!important}
/* =============================================================================
25. 选中态字色修正（系统性问题）
—— 设计系统用 !important 统一了字色，把各页面「选中态」的白字压成了深色字，
深色字压深色底 → 对比度 1.0~1.3，完全看不见（如管理页的「操作日志」页签）
—— 规则：底色变了，字色必须跟着变
========================================================================== */
/* 管理页页签组 */
.tab.on,.tabs button.on,.tab.active.on{color:#fff!important}
.tab.on:hover,.tabs button.on:hover{color:#fff!important}
/* 配件查询：左侧类目筛选的选中行 */
.frow.on .lbl,.frow.on .cnt,
.side .on .lbl,.side .on .cnt,
.side-sec.on .lbl,.side-sec.on .cnt{color:#fff!important}
.frow.on .cnt{background:rgba(255,255,255,.24)!important}
.frow.on .icn{color:#fff!important;background:rgba(255,255,255,.20)!important}
/* 浅绿「图 N」徽标：绿字压绿底太淡，加深 */
.icn{color:#0E7A57!important}
/* 侧栏小标题 / 搜索提示：提一档 */
.side-title{color:var(--ink-2)!important}
.side-note,.side-hint,.result-hint{color:var(--ink-3)!important}
/* 计数徽标（白底上的浅灰数字） */
.cnt{color:var(--ink-3)!important}
/* 顶部页签里的白色计数（蓝底）——底色压深一点更清晰 */
.scope-tabs .cnt,.tabs .cnt,.cnt.on{background:#2A4BC4!important;color:#fff!important}
/* =============================================================================
26. 配件查询侧栏：原为深色侧栏（白字），浅色主题下白字压白底 → 全部改成深字
========================================================================== */
.side .frow .cnt{
background:rgba(10,16,32,.055)!important;
color:var(--ink-3)!important;
}
.side .frow .icn{
background:rgba(13,148,136,.12)!important;
color:#0B7A63!important;
border-color:rgba(13,148,136,.28)!important;
}
.side .frow.on .cnt{background:rgba(255,255,255,.24)!important;color:#fff!important}
.side .frow.on .icn{background:rgba(255,255,255,.25)!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
.side .side-note{color:var(--ink-3)!important}
.side .side-note b{color:var(--ink-2)!important}
.side .side-empty{color:var(--ink-3)!important}
.side .side-btn{
color:var(--ink-2)!important;
background:#fff!important;
border:1px solid var(--line)!important;
box-shadow:var(--sh-1)!important;
}
.side .side-btn:hover{background:#F7F9FF!important;color:var(--brand)!important;border-color:#C9D2E6!important}
/* =============================================================================
27. 订单卡布局（2026-11-03：瀑布流已停用 → 等高网格）+ 返回键浅色可读性修复
—— 之前这里把 .order-grid 强制成 align-items:start + gap:0（交给 JS 绝对定位）。
现在 JS 瀑布流关闭（award.js 里 MASONRY_ENABLED=false），这里必须回到普通网格，
否则会出现「行间距 0 + 卡片不等高」的错位观感。
========================================================================== */
/* --- 等高网格：同一行卡片一样高（固定行高由第 23 节的 --order-row-h 控制） --- */
.order-grid{
align-items:stretch!important;
gap:var(--order-row-gap,12px)!important;
}
/* 兼容：万一还有旧 .aw-masonry 标记残留，仅清掉绝对定位，不影响网格流 */
.order-grid.aw-masonry{position:relative!important;align-items:stretch!important}
.order-grid.aw-masonry .order-card{position:relative!important}
/* --- 返回键：浅色主题下白字白底 → 全部改成深字（不限 .topbar） ---
这些页面的返回键是 .back-home / .back，不在 .topbar 里，所以之前的浅色覆盖没命中 */
a.back-home,.back-home,a.back,.back{
color:var(--ink-2)!important;
background:#fff!important;
border:1px solid var(--line)!important;
box-shadow:var(--sh-1)!important;
}
a.back-home:hover,.back-home:hover,a.back:hover,.back:hover{
color:var(--brand)!important;
border-color:#C9D2E6!important;
background:#fff!important;
box-shadow:var(--sh-2)!important;
}
a.back-home svg,.back-home svg,a.back svg,.back svg{color:currentColor!important}
/* 页内其它浅色残留的白色链接/按钮 */
a[style*="color:#fff"],a[style*="color: #fff"]{color:var(--ink-2)!important}
/* =============================================================================
28. 顶栏加高（老板要求「适当改高一点」）+ 账号胶囊在顶栏时的位偏移
========================================================================== */
.topbar,.top{min-height:64px!important}
.topbar-in,.header-inner{min-height:64px!important;align-items:center!important}
.topbar .brand,.top .brand{line-height:1.35!important}
.topbar .back-home,.topbar .back,.top .back-home,.top .back{
padding:8px 15px!important;border-radius:99px!important;
}
@media (max-width:720px){
.topbar,.top{min-height:58px!important}
.topbar-in,.header-inner{min-height:58px!important}
}