:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --line: #e5e8ee;
  --text: #1f2329;
  --text2: #6b7280;
  --brand: #185fa5;
  --brand2: #378ADD;
  --danger: #a32d2d;
  --danger-bg: #fcebeb;
  --ok: #0f6e56;
  --ok-bg: #e1f5ee;
  --warn-bg: #faeeda;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 30, 50, .08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
button { font-family: inherit; cursor: pointer; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; background: var(--brand); color: #fff; transition: opacity .15s; }
button:hover { opacity: .88; }
button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand2); }
button.ghost:hover { background: #e6f1fb; opacity: 1; }
button.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #f7c1c1; }
button.small { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea {
  font-family: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; background: #fff; color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand2); }
a { color: var(--brand); text-decoration: none; }

/* ---------- 登录页 ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #e6f1fb 0%, #f5f6f8 55%); }
.login-card { width: 380px; background: var(--card); border-radius: 16px; box-shadow: 0 8px 40px rgba(24,95,165,.12); padding: 40px 36px 28px; }
.login-card h1 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.login-card .sub { color: var(--text2); font-size: 13px; margin-bottom: 26px; }
.login-card .field { margin-bottom: 16px; }
.login-card label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.login-card input { width: 100%; padding: 10px 12px; }
.login-card .btn-login { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; }
.login-card .hint { margin-top: 18px; font-size: 12px; color: var(--text2); background: var(--bg); border-radius: 8px; padding: 10px 12px; line-height: 1.7; }
.err { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* ---------- 主框架：左侧导航 + 右侧内容 ---------- */
.app { min-height: 100vh; display: flex; align-items: stretch; }

aside.sidebar {
  width: 212px; flex: 0 0 212px; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand { padding: 20px 18px 16px; font-size: 15px; font-weight: 600; color: var(--brand); line-height: 1.45; border-bottom: 1px solid var(--line); }
.side-brand span { display: block; font-size: 11px; font-weight: 400; color: var(--text2); margin-top: 3px; letter-spacing: .3px; }
.side-nav { flex: 1; padding: 10px 10px 16px; }
.side-group-title { font-size: 11px; color: #9aa3b0; letter-spacing: .6px; padding: 14px 10px 6px; }
.side-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; margin-bottom: 2px;
  transition: background .12s, color .12s;
}
.side-item:hover { background: #f4f7fb; }
.side-item.on { background: #e6f1fb; color: var(--brand); font-weight: 500; }
.side-item .ico { width: 16px; text-align: center; font-size: 13px; opacity: .75; }
.side-item.on .ico { opacity: 1; }
.side-foot { border-top: 1px solid var(--line); padding: 12px 16px 16px; }
.side-user { font-size: 13px; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.role-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e6f1fb; color: var(--brand); }
.side-ver { font-size: 11px; color: var(--text2); margin: 0 0 8px; opacity: .75; }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { flex: 1; padding: 22px 26px 48px; width: 100%; max-width: 1500px; margin: 0 auto; }

/* 页面标题条 */
.page-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-hd h2 { font-size: 18px; font-weight: 600; }
.page-hd .desc { font-size: 12.5px; color: var(--text2); }

/* 侧栏折叠（窄屏自动变顶栏） */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  aside.sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .side-brand { border-bottom: none; padding: 12px 14px; white-space: nowrap; }
  .side-brand span { display: none; }
  .side-nav { display: flex; padding: 8px; gap: 4px; }
  .side-group-title { display: none; }
  .side-item { white-space: nowrap; }
  .side-foot { border-top: none; border-left: 1px solid var(--line); padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
  .side-user { margin-bottom: 0; }
}

/* 4 块展示区的通用网格 */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } }

/* 完成率进度条 */
.progress { height: 6px; background: #eef1f5; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--brand2); border-radius: 3px; }
.progress > i.ok { background: #22a06b; }
.progress > i.warn { background: #e8a33d; }
.progress > i.bad { background: #d9534f; }

/* 数据缺口提示条 */
.notice-bar { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; }
.notice-bar.warn { background: #fdf6e8; border: 1px solid #f3d9a4; color: #8a5a00; }
.notice-bar.info { background: #eef6fd; border: 1px solid #c7e0f7; color: #1a4f7a; }
.notice-bar b { font-weight: 600; }

/* 店铺 / 单品卡片 */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mini { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.mini .nm { font-size: 13px; color: var(--text2); margin-bottom: 10px; font-weight: 500; }
.mini .row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.mini .row b { font-weight: 600; }
.mini .row span { color: var(--text2); }
.mini .big { font-size: 22px; font-weight: 600; margin-bottom: 2px; }

/* 费比颜色 */
.r-low { color: #0f6e56; font-weight: 600; }
.r-mid { color: #b8860b; font-weight: 600; }
.r-high { color: #a32d2d; font-weight: 600; }
.r-none { color: #b0b7c0; }

/* 周切换 */
.week-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.week-tab { font-size: 12.5px; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--text2); cursor: pointer; }
.week-tab.on { background: #e6f1fb; border-color: var(--brand2); color: var(--brand); font-weight: 500; }

/* 表格内数字对齐 */
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.total td { font-weight: 600; background: #f7fafd; }
.scroll-x { overflow-x: auto; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.card .card-hd { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.card .card-bd { padding: 16px 18px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.toolbar .lbl { color: var(--text2); font-size: 13px; }
.metric-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.metric-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); cursor: pointer; user-select: none; background: #fff; }
.metric-chip.on { background: #e6f1fb; border-color: var(--brand2); color: var(--brand); }
.metric-chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; color: var(--text2); }
.crumb a { cursor: pointer; }
.crumb .cur { color: var(--text); font-weight: 500; }
.crumb .sep { color: #c0c6cf; }

/* 粒度切换（逐日/周/月度） */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { background: transparent; color: var(--text2); padding: 6px 14px; border-radius: 0; font-size: 13px; border: none; }
.seg button.on { background: #e6f1fb; color: var(--brand); font-weight: 500; }

/* 用户管理：店铺勾选 */
.check-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--text); margin-top: 6px; font-weight: 400; }
.check-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.check-item input, .check-line > input { cursor: pointer; }
.modal-bd .check-line, .modal-bd .check-item { font-size: 13px; color: var(--text); margin-bottom: 0; }
.modal-bd .check-item { display: inline-flex; align-items: center; gap: 5px; }

/* 操作记录提醒弹窗 */
.alert-modal { width: 460px; }
.alert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.alert-grid .full { grid-column: 1 / -1; }
.alert-grid span { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.alert-grid b { font-weight: 500; font-size: 13px; line-height: 1.5; word-break: break-all; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.stat .v { font-size: 20px; font-weight: 500; }
.stat .v small { font-size: 12px; color: var(--text2); font-weight: 400; }
.stat .delta { font-size: 12px; margin-top: 4px; }
.delta.up { color: var(--danger); }
.delta.down { color: var(--ok); }

.charts { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; }
@media (max-width: 1100px) { .charts { grid-template-columns: 1fr; } }
.chart-box { position: relative; }
.chart { width: 100%; height: 340px; }

/* ---------- 表格 ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th { color: var(--text2); font-weight: 500; background: #fafbfc; white-space: nowrap; }
table.tbl tr:hover td { background: #fafbfd; }
.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.tag.main { background: #e6f1fb; color: var(--brand); }
.tag.traffic { background: #e1f5ee; color: var(--ok); }
.tag.industry { background: #fdf3e3; color: #b8860b; }
.tag.role-admin { background: #fcebeb; color: var(--danger); }

/* ---------- 上传 ---------- */
.dropzone { border: 1.5px dashed #b9c6d6; border-radius: 12px; padding: 30px; text-align: center; color: var(--text2); cursor: pointer; background: #fafbfd; transition: .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--brand2); background: #eef6fd; color: var(--brand); }
.preview-table-wrap { max-height: 320px; overflow: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; }
.new-metric-note { margin-top: 12px; font-size: 13px; color: var(--ok); background: var(--ok-bg); padding: 9px 12px; border-radius: 8px; }
.upload-info { margin-top: 12px; font-size: 13px; color: var(--text2); line-height: 1.8; }
.upload-info .warn { color: var(--danger); }

/* ---------- 商品管理 ---------- */
.prod-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 900px) { .prod-layout { grid-template-columns: 1fr; } }
.prod-item { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.prod-item:hover { background: #fafbfd; }
.prod-item.on { background: #e6f1fb; border-left: 3px solid var(--brand); }
.prod-item .nm { font-weight: 500; }
.prod-item .nm.empty .warn-icon { color: var(--danger); margin-right: 4px; font-size: 14px; }
.prod-item .nm.empty .warn-text { color: var(--danger); font-weight: 600; }
.prod-item.empty-name { background: #fff7f0; border-left: 3px solid var(--danger); }
.prod-item.empty-name .meta { color: var(--danger); opacity: 0.85; }
.prod-item .meta { font-size: 12px; color: var(--text2); margin-top: 3px; }
/* 链接名称展示（看板筛选条） */
.link-name-lbl { margin-left: 14px; }
.link-name-display { display: inline-flex; align-items: center; padding: 4px 10px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px; color: #0369a1; font-weight: 500; font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 信息类型 tag */
.tag.info { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.tag.info-A { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tag.info-B { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.tag.info-C { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.prod-actions { display: flex; gap: 6px; }
.link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.link-row input { flex: 1; min-width: 90px; }

/* ---------- 操作记录 ---------- */
.op-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.op-form .full { grid-column: 1 / -1; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #1f2329; color: #fff; font-size: 13px; padding: 9px 18px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); animation: rise .2s ease; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.empty { color: var(--text2); text-align: center; padding: 40px 0; }
.muted { color: var(--text2); font-size: 12px; }
.spacer { flex: 1; }

/* ---------- 数据管理：三层分层 ---------- */
.sec-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 26px 0 12px; padding-left: 10px; border-left: 3px solid var(--brand2); line-height: 1.2; }
.layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px; }
@media (max-width: 1200px) { .layer-grid { grid-template-columns: 1fr; } }
.layer-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-top: 3px solid var(--brand2); }
.layer-card.tone-blue { border-top-color: #185fa5; }
.layer-card.tone-green { border-top-color: #1d9e75; }
.layer-card.tone-amber { border-top-color: #ba7517; }
.layer-hd { padding: 14px 16px 10px; border-bottom: 1px dashed var(--line); }
.layer-hd b { display: block; font-size: 14px; margin-bottom: 4px; }
.layer-hd .muted { line-height: 1.5; }
.layer-item { padding: 11px 16px; border-bottom: 1px solid #f2f4f8; }
.layer-item:last-child { border-bottom: none; }
.li-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.li-top span { font-size: 13px; font-weight: 500; }
.li-top b { font-size: 17px; font-weight: 600; color: #1f2329; }
.li-top b small { font-size: 11px; color: var(--text2); font-weight: 400; margin-left: 2px; }
.li-sub { margin-top: 3px; line-height: 1.45; }
.li-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; color: #8892a0; flex-wrap: wrap; }
.layer-alert { margin: 10px 12px; padding: 8px 10px; background: #fef6e7; border: 1px solid #f5d9a8; color: #854f0b; border-radius: 7px; font-size: 12px; line-height: 1.5; }
.done-ok { color: #0f6e56; font-weight: 600; }
.done-low { color: #a15c00; font-weight: 600; }

/* ---------- 当月完成情况：时间进度 / 店铺进度卡 ---------- */
.pace-ok { color: #0f6e56; }
.pace-warn { color: #a15c00; }
.pace-bad { color: #a32d2d; }
.pace-none { color: #98a2b3; }

.time-card {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 18px 22px; margin-bottom: 16px;
}
.time-left { flex: 1 1 380px; min-width: 280px; }
.time-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 9px; }
.time-bar { position: relative; height: 12px; background: #eef2f7; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.time-bar > i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #9dc3e6, #4a8fd0); transition: width .4s ease; }
.time-bar > span { position: absolute; right: 8px; top: -3px; font-size: 10.5px; color: #4b5563; line-height: 18px; }
.time-hint { font-size: 12px; color: #8a94a3; line-height: 1.55; }
.time-right { min-width: 210px; text-align: right; padding-left: 22px; border-left: 1px dashed var(--line); }
.tr-k { font-size: 12.5px; color: var(--text2); margin-bottom: 2px; }
.tr-v { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.tr-s { font-size: 12px; color: #8a94a3; margin-top: 3px; }

.pace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pace-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 15px 17px 12px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.pace-card:hover { box-shadow: 0 6px 20px rgba(20,30,50,.09); transform: translateY(-1px); }
.pc-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pc-hd b { font-size: 13.5px; font-weight: 600; }
.pc-hero { text-align: center; padding: 4px 0 10px; }
.pc-num { font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.pc-lbl { font-size: 11.5px; color: #98a2b3; margin-top: 2px; }
.pc-rows { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.pc-row { display: grid; grid-template-columns: 42px 62px 1fr 42px; align-items: center; gap: 7px; }
.pc-row-l { font-size: 12px; color: #5b6572; }
.pc-row-t { font-size: 11.5px; color: #98a2b3; text-align: right; }
.pc-bar { position: relative; height: 7px; background: #eef2f7; border-radius: 5px; overflow: visible; }
.pc-bar > i { display: block; height: 100%; border-radius: 5px; background: #4a8fd0; max-width: 100%; }
.pc-bar > i.pace-ok { background: linear-gradient(90deg, #6fc7a8, #1d9e75); }
.pc-bar > i.pace-warn { background: linear-gradient(90deg, #f0c37b, #e8a33d); }
.pc-bar > i.pace-bad { background: linear-gradient(90deg, #e79a9a, #c85d5d); }
.pc-bar > em { position: absolute; top: -3px; width: 2px; height: 13px; background: #b6bfcc; border-radius: 1px; }
.pc-row-v { font-size: 12px; font-weight: 600; text-align: right; }
.pc-norow { font-size: 12px; color: #98a2b3; padding: 4px 0; }
.pc-ft { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 11.5px; color: #8a94a3; }
.pc-ft b { color: #4b5563; font-weight: 600; }

/* ---------- 当月完成情况：核心指标卡（2026-10-21 改版） ---------- */
.ov-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1240px) { .ov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ov-grid { grid-template-columns: 1fr; } }
/* 切片器卡：与指标卡同排，占 2 格 */
.ov-slicer { grid-column: span 2; }
.ov-slicer .sl-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.ov-slicer .chip { font-size: 11.5px; padding: 3px 10px; }
.ov-slicer-ft { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; }
@media (max-width: 1240px) { .ov-slicer { grid-column: 1 / -1; } }
@media (max-width: 680px) { .ov-slicer { grid-column: auto; } }
.ov-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 18px 12px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.ov-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent, #4a8fd0); opacity: .85; }
.ov-card:hover { box-shadow: 0 6px 20px rgba(20,30,50,.09); transform: translateY(-1px); }
.ov-k { font-size: 12.5px; color: var(--text2); display: flex; align-items: baseline; gap: 6px; }
.ov-k .sub { font-size: 11px; color: #98a2b3; font-weight: 400; }
.ov-v { font-size: 25px; font-weight: 700; letter-spacing: -.5px; margin-top: 6px; line-height: 1.2; }
.ov-v small { font-size: 12px; color: var(--text2); font-weight: 400; margin-left: 1px; }
.ov-bar { position: relative; height: 7px; background: #eef2f7; border-radius: 5px; margin-top: 12px; overflow: visible; }
.ov-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #9dc3e6, #4a8fd0); max-width: 100%; transition: width .4s ease; }
.ov-bar > i.pace-ok { background: linear-gradient(90deg, #6fc7a8, #1d9e75); }
.ov-bar > i.pace-warn { background: linear-gradient(90deg, #f0c37b, #e8a33d); }
.ov-bar > i.pace-bad { background: linear-gradient(90deg, #e79a9a, #c85d5d); }
.ov-bar > em { position: absolute; top: -3px; width: 2px; height: 13px; background: #b6bfcc; border-radius: 1px; }
.ov-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; min-height: 20px; font-size: 11.5px; color: #8a94a3; }
.ov-ft-solo { margin-top: auto; padding-top: 10px; }
.ov-delta-row { display: flex; align-items: center; gap: 7px; margin-top: 13px; min-height: 20px; }
.ov-delta-label { font-size: 11.5px; color: #8a94a3; }
.ov-delta { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 20px; }
.ov-delta.good { background: #e6f5ef; color: #0f6e56; }
.ov-delta.bad { background: #fbeeec; color: #a32d2d; }
.ov-delta.flat { background: #f1f3f6; color: #5b6572; }
.pace-badge { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 20px; white-space: nowrap; }
.pace-badge.pace-ok { background: #e6f5ef; color: #0f6e56; }
.pace-badge.pace-warn { background: #fdf3e2; color: #a15c00; }
.pace-badge.pace-bad { background: #fbeeec; color: #a32d2d; }
.pace-badge.pace-none { background: #f1f3f6; color: #98a2b3; }

/* ---------- 数据管理入口链接 ---------- */
.db-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f7fbff, #eef6fd); border: 1px solid #d6e6f7; border-radius: 12px;
  padding: 14px 18px; margin-top: 16px; }
.db-entry .de-t { font-size: 13px; color: #374151; }
.db-entry .de-t b { font-size: 13.5px; }
.db-entry a.de-link { font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.db-entry a.de-link:hover { text-decoration: underline; }
.back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--brand); cursor: pointer; }
.back-link:hover { text-decoration: underline; }

/* ---------- 切片器（店铺 / 负责人 / 产品） ---------- */
.slicer-bar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20,30,50,.04); padding: 12px 16px; margin-bottom: 16px;
}
/* 筛选条滚动吸顶（2026-10-22 用户要求：下拉时切片器 / 工具栏常驻顶部，各板块统一）
   top = 顶栏高度 48px（.topbar 也是 sticky），z-index 低于顶栏(40)，避免盖住导航与通知下拉 */
.slicer-bar, main > section > .toolbar, .ov-slicer {
  position: sticky; top: 48px; z-index: 30;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.3) blur(8px);
  box-shadow: 0 2px 12px rgba(20,30,50,.09);
}
main > section > .toolbar { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sl-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-label { font-size: 12.5px; color: #8a94a3; white-space: nowrap; }
.sl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; line-height: 1; padding: 7px 12px; border-radius: 16px;
  border: 1px solid #e3e9f1; background: #f8fafc; color: #4b5563; cursor: pointer;
  transition: all .15s ease; font-family: inherit;
}
.chip:hover { border-color: #b9d3ea; background: #f0f7fd; color: #1f5c8f; }
.chip.on { background: linear-gradient(135deg, #4a8fd0, #3576b3); border-color: #3576b3; color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(53,118,179,.25); }

/* ---------- 负责人完成卡片 ---------- */
.owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; margin-bottom: 18px; }
/* 负责人图（左）+ 单品图（右）并排一行（2026-10-21 用户要求顺序对调） */
.duo-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.duo-row.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* 周信息与费用：两图等宽（2026-10-22 用户要求） */
.duo-row .card { margin-bottom: 0; }
@media (max-width: 1100px) { .duo-row, .duo-row.even { grid-template-columns: 1fr; } }
/* 周信息与费用：优化动作提示列表 */
.wc-ops { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.wc-op { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; background: #fffdf7; }
.wc-op-date { font-family: Consolas, monospace; color: #854f0b; font-weight: 600; min-width: 44px; }
.wc-op b { color: #1f2329; font-weight: 600; }
.owner-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px 11px;
  box-shadow: 0 1px 4px rgba(20,30,50,.05); cursor: pointer; transition: all .18s ease;
  border-top: 3px solid #dbe6f2;
}
.owner-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,30,50,.10); }
.owner-card.on { border-color: #4a8fd0; border-top-color: #3576b3; background: linear-gradient(180deg, #f7fbff, #fff); }
.oc-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.oc-hd b { font-size: 13.5px; font-weight: 600; color: #1f2329; }
.oc-hd .muted { font-size: 11px; }
.oc-hero { font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.oc-lbl { font-size: 11px; color: #98a2b3; margin-bottom: 8px; }
.oc-bar { position: relative; height: 7px; background: #eef2f7; border-radius: 5px; margin-bottom: 8px; }
.oc-bar > i { display: block; height: 100%; border-radius: 5px; background: #4a8fd0; max-width: 100%; }
.oc-bar > i.pace-ok { background: linear-gradient(90deg, #6fc7a8, #1d9e75); }
.oc-bar > i.pace-warn { background: linear-gradient(90deg, #f0c37b, #e8a33d); }
.oc-bar > i.pace-bad { background: linear-gradient(90deg, #e79a9a, #c85d5d); }
.oc-bar > i.pace-none { background: #d7dee8; }
.oc-bar > em { position: absolute; top: -3px; width: 2px; height: 13px; background: #b6bfcc; border-radius: 1px; }
.oc-ft { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #7b8697; }
.oc-ft b { color: #374151; font-weight: 600; }
.oc-ft2 { font-size: 11px; color: #98a2b3; margin-top: 3px; }
/* 负责人卡统计行（成功率 / 预计全月 / 比上月） */
.oc-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: #7b8697; margin-bottom: 8px; }
.oc-stats b { color: #374151; font-weight: 600; }

/* ---------- 单品完成情况：明细表排序 / 展开行 / 信息类型徽章 ---------- */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: #3576b3; }
.row-exp { cursor: pointer; }
.row-exp:hover td { background: #f7fbff; }
.exp-btn { display: inline-block; width: 18px; color: #98a2b3; font-size: 11px; }
.expand-tr > td { background: #fafcff; padding: 8px 10px 12px 26px; }
.tbl.inner { margin: 0; box-shadow: none; }
.tbl.inner th { font-size: 11px; padding: 6px 10px; background: #f1f6fb; }
.tbl.inner td { padding: 5px 10px; font-size: 12px; }
.it-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 9px; line-height: 17px; }
.it-A类 { background: #e6f5ef; color: #0f6e56; }
.it-B类 { background: #e8f0fb; color: #2563ab; }
.it-C类 { background: #fdf3e2; color: #a15c00; }
.it-D类 { background: #fbeeec; color: #a32d2d; }
.it-none { background: #f1f3f6; color: #98a2b3; }

/* ---------- 节假日日历 ---------- */
.cal-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav b { font-size: 15px; color: var(--text); min-width: 76px; text-align: center; letter-spacing: .5px; }
.cal-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-stats .cs {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 92px;
}
.cal-stats .cs span { font-size: 11px; color: var(--text2); }
.cal-stats .cs b { font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-stats .cs.hl { border-color: #bcd8f2; background: #f2f8fe; }
.cal-stats .cs.hl b { color: var(--brand); }

.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cal-main { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--text2); padding-bottom: 4px; }
.cal-cell {
  min-height: 62px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 6px 7px; cursor: pointer; transition: border-color .12s, transform .12s;
}
.cal-cell:hover { border-color: var(--brand2); }
.cal-cell.blank { border: 1px dashed transparent; background: transparent; cursor: default; }
.cal-cell .cd { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-cell .ck { font-size: 10px; color: var(--text2); }
.cal-cell.k-weekend { background: #f6f7f9; }
.cal-cell.k-weekend .cd { color: #9aa3af; }
.cal-cell.k-holiday { background: #fdf2e4; border-color: #f4d9b7; }
.cal-cell.k-holiday .cd { color: #a15c1c; }
.cal-cell.k-holiday .ck { color: #b8792f; }
.cal-cell.k-makeup { background: #eaf3fd; border-color: #bcd8f2; }
.cal-cell.k-makeup .cd { color: var(--brand); }
.cal-cell.k-makeup .ck { color: var(--brand2); }
.cal-cell.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(24,95,165,.16); }
.cal-cell.today .cd::after {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); margin-left: 4px; vertical-align: 3px;
}
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text2); }
.cal-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); }
.cal-legend .dot.k-work { background: #fff; }
.cal-legend .dot.k-weekend { background: #f6f7f9; }
.cal-legend .dot.k-holiday { background: #fdf2e4; border-color: #f4d9b7; }
.cal-legend .dot.k-makeup { background: #eaf3fd; border-color: #bcd8f2; }
.cal-legend .muted { color: #9aa3af; }

.cal-side { display: flex; flex-direction: column; gap: 12px; }
.cal-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.cal-panel.muted { color: var(--text2); font-size: 13px; line-height: 1.7; }
.cp-date { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.cp-kind { font-size: 13px; color: var(--text2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cp-kind b { color: var(--text); }
.tag-work, .tag-rest { font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.tag-work { background: var(--ok-bg); color: var(--ok); }
.tag-rest { background: #f1f2f4; color: #8b93a1; }
.cp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-readonly { font-size: 12px; color: var(--text2); }
.cp-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.cr-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cr-row label { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 5px; }
.cr-row input[type=date] { padding: 5px 8px; font-size: 12px; }
.cr-row select { padding: 5px 8px; font-size: 12px; }
.cp-note { font-size: 12px; color: var(--text2); line-height: 1.85; }
.cp-note b { color: var(--text); }

@media (max-width: 1080px) {
  .cal-wrap { grid-template-columns: 1fr; }
}

.w-num { width: 62px; padding: 5px 7px; font-size: 12px; text-align: right; }
.cal-cell .ck em { font-style: normal; opacity: .75; }

/* ---------- 顶栏 + 站内通知 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: 48px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.tb-name { font-size: 14px; font-weight: 600; }
.tb-name em {
  font-style: normal; font-size: 11px; color: var(--brand); background: #e9f2fb;
  border-radius: 10px; padding: 2px 8px; margin-left: 8px; font-weight: 500;
}
.notif-wrap { position: relative; }
.bell-btn {
  background: #fff; color: var(--text); border: 1px solid var(--line); padding: 6px 12px;
  font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.bell-btn:hover { border-color: var(--brand2); color: var(--brand); opacity: 1; }
.bell-btn .badge {
  font-style: normal; background: var(--danger); color: #fff; border-radius: 9px;
  font-size: 11px; padding: 1px 6px; min-width: 18px; text-align: center; line-height: 16px;
}
.notif-pop {
  position: absolute; right: 0; top: 40px; width: 380px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(20,30,50,.14); overflow: hidden;
}
.np-hd {
  display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 13px;
}
.np-body { max-height: 380px; overflow-y: auto; }
.np-item { padding: 10px 14px; border-bottom: 1px solid #f1f3f6; }
.np-item:last-child { border-bottom: none; }
.np-item.unread { background: #f6faff; }
.np-r1 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.np-r1 b { position: relative; padding-left: 10px; }
.np-r1 b.dot::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand);
}
.np-time { margin-left: auto; font-size: 11px; color: var(--text2); }
.np-c { font-size: 12px; color: var(--text2); margin-top: 4px; line-height: 1.6; }
.np-by { font-size: 11px; color: #9aa3af; margin-top: 3px; }

/* ---------- 数据成品 ---------- */
.ds-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ds-bar label { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.ds-bar input[type=month], .ds-bar input[type=date] { padding: 5px 8px; font-size: 12px; }
.sel-btn { background: #e6f1fb; border-color: var(--brand2); color: var(--brand); }

/* 费比/信息成本 变化（当月 vs 今年累积） */
.pp { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 4px; }
.pp.pp-good { color: var(--ok, #1d9e75); }
.pp.pp-bad { color: var(--danger, #c85d5d); }

/* ============================================================
   2026-10-22 全局美化：字号整体放大 +2px，细节润色
   （覆盖块放在文件末尾，同优先级后者生效；回滚删除本块即可）
   ============================================================ */
body { font-size: 16px; }
button { font-size: 15px; }
button.small { font-size: 13.5px; }
input, select, textarea { font-size: 14.5px; }
main { padding: 24px 30px 52px; }

/* 侧边导航（2026-11-02：一级分组标题加大加粗 + 可点击折叠，二级菜单项调小） */
.side-brand { font-size: 17px; }
.side-group-title {
  font-size: 13.5px; font-weight: 600; color: #7a8593;
  display: flex; align-items: center; cursor: pointer; user-select: none;
}
.side-group-title:hover { color: var(--brand); }
.fold-arrow { margin-left: auto; font-size: 10px; color: #b6bfc9; transition: transform .15s ease; }
.fold-arrow.folded { transform: rotate(-90deg); }
.side-item { font-size: 14px; padding: 9px 12px; }
.side-item .ico { font-size: 13px; }
.side-user { font-size: 14px; }
.role-tag { font-size: 12px; }

/* 页面标题与提示条 */
.page-hd h2 { font-size: 20px; }
.page-hd .desc { font-size: 14px; }
.notice-bar { font-size: 14.5px; }
.muted { font-size: 13px; }
.crumb { font-size: 14px; }

/* 卡片与统计 */
.card .card-hd { padding: 15px 20px; font-size: 15.5px; }
.card .card-bd { padding: 18px 20px; }
.mini .nm { font-size: 14.5px; }
.mini .row { font-size: 14.5px; }
.mini .big { font-size: 24px; }
.stat .k { font-size: 13px; }
.stat .v { font-size: 22px; }
.stat .v small { font-size: 13px; }
.sec-title { font-size: 15.5px; }

/* 表格 */
table.tbl { font-size: 14.5px; }
table.tbl th, table.tbl td { padding: 10px 11px; }
.tbl.inner th { font-size: 12px; }
.tbl.inner td { font-size: 13px; }
.tag { font-size: 12px; }

/* 切片器 / 筛选 */
.sl-label { font-size: 14px; }
.chip { font-size: 14px; padding: 7px 14px; }
.ov-slicer .chip { font-size: 12.5px; }
.toolbar .lbl { font-size: 14.5px; }
.metric-chip { font-size: 14.5px; }
.week-tab { font-size: 14px; }
.seg button { font-size: 14.5px; }

/* 当月完成情况：指标卡 */
.ov-k { font-size: 14px; }
.ov-k .sub { font-size: 12px; }
.ov-v { font-size: 27px; }
.ov-v small { font-size: 13px; }
.ov-ft { font-size: 12.5px; }
.ov-delta-label { font-size: 12.5px; }
.ov-delta { font-size: 12.5px; }
.pace-badge { font-size: 12px; }
.tr-k { font-size: 13.5px; }
.tr-v { font-size: 36px; }
.tr-s { font-size: 13px; }
.time-title { font-size: 15px; }
.time-hint { font-size: 13px; }

/* 进度卡 / 负责人卡 */
.pc-hd b { font-size: 15px; }
.pc-lbl { font-size: 12.5px; }
.pc-row-l { font-size: 13px; }
.pc-row-t { font-size: 12.5px; }
.pc-row-v { font-size: 13px; }
.pc-norow { font-size: 13px; }
.pc-ft { font-size: 12.5px; }
.oc-hd b { font-size: 15px; }
.oc-hero { font-size: 29px; }
.oc-lbl { font-size: 12px; }
.oc-ft { font-size: 12.5px; }
.oc-ft2 { font-size: 12px; }
.oc-stats { font-size: 12.5px; }

/* 周信息与费用：优化动作 / 数据管理 */
.wc-op { font-size: 13.5px; }
.li-top span { font-size: 14px; }
.li-meta { font-size: 12.5px; }
.layer-alert { font-size: 13px; }
.toast { font-size: 14.5px; }
.new-metric-note, .upload-info { font-size: 14.5px; }

/* ---------- 历月分析（店铺总览 / 产品分析 / 丰控专项） ---------- */
.hist-slicer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 14px; }
.hist-slicer .lbl { color: var(--text2); font-size: 13px; }
.chip-grp { font-size: 11px; color: #9aa3b0; letter-spacing: .5px; padding-right: 2px; }
.chip-grp.newgrp { color: #993C1D; }
.chip.isnew { border-color: #D85A30; color: #993C1D; }
.chip.isnew.on { background: linear-gradient(135deg, #D85A30, #993C1D); border-color: #993C1D; color: #fff; }
.chip em { font-style: normal; font-size: 11px; opacity: .8; margin-left: 4px; }
.hd-note { font-size: 11.5px; font-weight: 400; color: var(--text2); margin-left: 8px; font-style: normal; }
.hist-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hist-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; }
.hist-kpi .k { font-size: 12.5px; color: var(--text2); margin-bottom: 6px; }
.hist-kpi .v { font-size: 22px; font-weight: 600; line-height: 1.2; }
.hist-kpi .v small { font-size: 12px; font-weight: 400; color: var(--text2); }
.hist-kpi .d { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hist-kpi .d.muted, .hist-kpi .d .m { color: #b0b7c0; }
.hist-kpi .d .m { font-size: 11px; }
.alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; line-height: 1.6; }
.alert-row:last-child { border-bottom: none; }
.al-tag { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #f1f6fb; color: var(--text2); }
.al-tag.bad { background: var(--danger-bg); color: var(--danger); }
.al-tag.mid { background: var(--warn-bg); color: #8a5a00; }
.diag { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.diag:last-of-type { border-bottom: none; }
.diag .dl { width: 84px; flex: none; color: var(--text2); }
.diag .dv { flex: 1; }
.diag .dr { flex: none; font-weight: 600; font-size: 12.5px; padding: 2px 9px; border-radius: 10px; background: #f1f6fb; color: var(--text2); }
.diag .dr.bad { background: var(--danger-bg); color: var(--danger); }
.diag .dr.good { background: var(--ok-bg); color: var(--ok); }
.diag-concl { margin-top: 10px; font-size: 12.5px; line-height: 1.75; color: #8a5a00; background: var(--warn-bg); border-radius: 8px; padding: 9px 12px; }
.tag-new, .tag-cat { font-style: normal; font-size: 10.5px; margin-left: 5px; padding: 1px 6px; border-radius: 8px; }
.tag-new { background: var(--danger-bg); color: var(--danger); }
.tag-cat { background: #f1efe8; color: #5f5e5a; }
.tbl-ft { padding: 9px 14px; font-size: 12px; color: var(--text2); border-top: 1px solid var(--line); }

/* ---------- 客户资产：排序标记与导出按钮 ---------- */
.tbl th .srt { font-style: normal; font-size: 10px; color: #9aa3b0; margin-left: 2px; }
button.link { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 12px; padding: 0 4px; font-family: inherit; }
button.link:hover { text-decoration: underline; }
.tbl th { cursor: pointer; user-select: none; white-space: nowrap; }

/* 上传历史备注列 */
td.up-note { max-width: 200px; color: #667; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 商品ID历月 ---------- */
.hist-kpi .v.bad { color: var(--danger); }
.hist-kpi .v.good { color: var(--ok); }
.tag-abcd { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #f1f4f8; color: #6b7684; }
.tag-abcd.ab-A { background: #e6f0fb; color: #1f6fb2; }
.tag-abcd.ab-B { background: #e6f5ee; color: #1f7a57; }
.tag-abcd.ab-C { background: #fdf1e2; color: #9a6113; }
.tag-abcd.ab-D { background: #f1f2f4; color: #8b93a1; }
.tbl tr.on td { background: #f4f9ff; }
.tbl tr.row-warn td { background: #fff7f5; }
.tbl tr.row-warn.on td { background: #fdeeea; }
.tbl td.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #4a5563; }
.tbl td.bad { color: var(--danger); }
.foot-note { margin-top: 14px; font-size: 12px; color: #9aa3b0; line-height: 1.7; }
.tbl td.lnk { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4a5563; }

/* ---------- 商品ID历月：上月快照 ---------- */
.snap-sec { background: #f7fafd; border: 1px solid #d9e7f5; border-radius: var(--radius); padding: 14px 16px 16px; margin-bottom: 18px; }
.snap-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.snap-hd .ttl { font-size: 15px; font-weight: 600; color: #185FA5; }
.snap-hd .sub { font-size: 11.5px; color: #8aa0b8; }
.snap-split { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #8aa0b8; margin: 4px 0 14px; }
.snap-split::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* 涨跌统一方向配色（2026-11-03）：上涨=红、下跌=绿 */
.mom-up, .tbl td.mom-up, .hist-kpi .d .mom-up { color: #D2543F; font-weight: 600; }
.mom-dn, .tbl td.mom-dn, .hist-kpi .d .mom-dn { color: #2F9E6B; font-weight: 600; }
.pp.pp-up { color: var(--danger, #c85d5d); }
.pp.pp-dn { color: var(--ok, #1d9e75); }
.snap-sec .card { background: #fff; }

/* 商品ID历月：两条筛选条打包吸顶（跟随其他板块 sticky top:48px 惯例，z-index < 顶栏40） */
.gm-slicers {
  position: sticky; top: 48px; z-index: 30;
  background: rgba(245, 246, 248, .97);
  backdrop-filter: saturate(1.3) blur(8px);
  margin: -6px -8px 10px; padding: 6px 8px 8px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(20,30,50,.09);
  border-radius: 0 0 12px 12px;
}

/* ---------- 自由查询（自助取数，2026-11-02） ---------- */
.q-bar { align-items: flex-start; row-gap: 0; }
.q-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; width: 100%; }
.q-row + .q-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.q-row select { padding: 6px 8px; font-size: 13px; }
.q-kw { width: 250px; }

.ms { position: relative; }
.ms-btn {
  background: #fff; color: var(--text); border: 1px solid var(--line);
  padding: 6px 10px; font-size: 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-btn:hover { border-color: var(--brand2); opacity: 1; }
.ms-btn .caret { color: var(--text2); font-size: 11px; }
.ms-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 33;
  min-width: 190px; max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16,32,56,.16); padding: 8px;
}
.ms-panel.wide { min-width: 270px; }
.ms-list { max-height: 280px; overflow: auto; }
.ms-head { display: flex; align-items: center; gap: 12px; padding: 2px 6px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text2); }
.ms-head span { flex: 1; }
.ms-head a { cursor: pointer; color: var(--brand); }
.ms-opt { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-opt:hover { background: #f4f8fc; }
.ms-opt input { margin: 0; }
.ms-backdrop { position: fixed; inset: 0; z-index: 29; }

.q-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px;
  color: var(--text2); background: #fff; cursor: pointer; user-select: none;
}
.q-chip.on { border-color: var(--brand); color: var(--brand); background: #eef6fd; font-weight: 600; }
.q-chip input { display: none; }
.q-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.q-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text2); cursor: pointer; }

.q-sum {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--text2);
}
.q-sum b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.q-sum .qs-total { padding-right: 14px; border-right: 1px solid var(--line); }

.q-card { padding: 0; overflow: hidden; }
.q-tbl-wrap { max-height: 62vh; overflow: auto; }
.q-tbl-wrap thead th { position: sticky; top: 0; z-index: 2; cursor: pointer; }
.q-tbl-wrap td.num { white-space: nowrap; }
.q-card .tbl-ft { display: flex; gap: 12px; align-items: center; }
.q-pg { cursor: pointer; }
.q-note { margin-top: 10px; font-size: 12px; color: var(--text2); line-height: 1.7; }

/* ---------- ICP 备案号（合规悬挂） ---------- */
.icp-footer { text-align: center; padding: 18px 0 14px; font-size: 12px; }
.icp-footer a { color: #9aa5b1; text-decoration: none; }
.icp-footer a:hover { color: var(--brand); }