/* v2 壳的业务组件样式。只补内容区，不改 3110 的布局骨架。 */

/* 17 个模块 + 6 个子项会超出视口，侧栏必须能滚动，否则「管理中心」后几项永远点不到。 */
.sidebar { overflow-y: auto; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
/* 同时把行高收紧一点，让 17 个模块在 1000px 高度里尽量一屏放下。 */
.sidebar .nav-item { padding-top: 7px; padding-bottom: 7px; }
.sidebar .nav-group { margin-bottom: 6px; }
.sidebar .nav-group > small { margin-bottom: 2px; }

.v2-page { display: flex; flex-direction: column; gap: 16px; }

/* 顶部结论条 */
.v2-headline {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 24px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #176d65, #0e4d49);
  box-shadow: 0 14px 34px rgba(20, 54, 58, .16);
}
.v2-headline.watch { background: linear-gradient(135deg, #a9762a, #7a531a); }
.v2-headline.risk { background: linear-gradient(135deg, #a8414b, #7c2c34); }
.v2-headline.good { background: linear-gradient(135deg, #176d65, #0e4d49); }
.v2-headline h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.45; font-weight: 600; }
.v2-headline .v2-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.v2-headline-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.v2-headline-actions button {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
  padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.v2-headline-actions button:hover { background: rgba(255,255,255,.22); }

/* KPI */
.v2-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v2-kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(20,54,58,.05); min-width: 0;
}
.v2-kpi-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.v2-kpi-value { font-size: 26px; font-weight: 650; color: var(--ink); margin: 8px 0 4px; letter-spacing: -.02em; }
.v2-kpi-value.risk { color: var(--rose); }
.v2-kpi-value.good { color: var(--teal); }
.v2-kpi-note { font-size: 11px; color: var(--muted); line-height: 1.5; }
.v2-kpi-split { font-size: 11px; color: var(--muted); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* 面板 */
.v2-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 22px rgba(20,54,58,.05); }
.v2-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.v2-panel-head h3 { margin: 2px 0 0; font-size: 16px; color: var(--ink); }
.v2-panel-head small { font-size: 10px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.v2-panel-desc { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

.v2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* 表格 */
.v2-table-wrap { overflow-x: auto; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v2-table th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 11px;
  letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.v2-table td { padding: 9px 10px; border-bottom: 1px solid #eef3f2; color: var(--ink); vertical-align: top; }
.v2-table tr:last-child td { border-bottom: none; }
.v2-table tr:hover td { background: #f8fbfa; }
.v2-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-table .muted { color: var(--muted); }
.v2-table .strong { font-weight: 600; }

/* 横向条形 */
.v2-bars { display: flex; flex-direction: column; gap: 12px; }
.v2-bar-row { display: grid; grid-template-columns: 132px 1fr 96px; gap: 12px; align-items: center; }
.v2-bar-label { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-bar-track { height: 8px; background: #eef3f2; border-radius: 99px; overflow: hidden; }
.v2-bar-fill { height: 100%; background: linear-gradient(90deg, #2b8b80, #176d65); border-radius: 99px; }
.v2-bar-fill.warn { background: linear-gradient(90deg, #e0a94a, #c98a25); }
.v2-bar-fill.risk { background: linear-gradient(90deg, #e0858d, #c94b56); }
.v2-bar-value { font-size: 12px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 标签 */
.v2-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; line-height: 1.6; white-space: nowrap; }
.v2-tag.good { background: #e7f4ef; color: #176d65; }
.v2-tag.warn { background: #fdf3e2; color: #9a6a18; }
.v2-tag.risk { background: #fbe9ea; color: #a8414b; }
.v2-tag.muted { background: #eef2f1; color: #6a7a80; }
.v2-tag.info { background: #e8f0f6; color: #2d5f7d; }

/* 说明与空态 */
.v2-notes { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.v2-notes li { font-size: 12px; color: #7a6a3a; background: #fdf9ee; border: 1px solid #f2e6c8; border-radius: 8px; padding: 8px 10px; line-height: 1.6; }
.v2-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; background: #f9fbfa; border: 1px dashed var(--line); border-radius: 10px; }
.v2-empty b { display: block; color: var(--ink); margin-bottom: 6px; font-size: 14px; }
.v2-loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

/* 进度条（目标） */
.v2-target-row { display: grid; grid-template-columns: 1fr 110px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef3f2; }
.v2-target-row:last-child { border-bottom: none; }
.v2-target-name { font-size: 13px; color: var(--ink); }
.v2-target-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.v2-target-track { height: 8px; background: #eef3f2; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.v2-target-fill { height: 100%; background: linear-gradient(90deg, #2b8b80, #176d65); }
.v2-target-fill.warn { background: linear-gradient(90deg, #e0a94a, #c98a25); }
.v2-target-fill.risk { background: linear-gradient(90deg, #e0858d, #c94b56); }
.v2-target-pct { text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 责任扫描 */
.v2-resp-row { display: grid; grid-template-columns: 1fr 80px 110px; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef3f2; font-size: 13px; }
.v2-resp-row:last-child { border-bottom: none; }
.v2-resp-row .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 待办 */
.v2-todo { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef3f2; align-items: flex-start; }
.v2-todo:last-child { border-bottom: none; }
.v2-todo-title { font-size: 13px; color: var(--ink); line-height: 1.5; }
.v2-todo-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* 排班 */
.v2-schedule-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-radius: 14px; background: #fdf9ee; border: 1px solid #f2e6c8; }
.v2-schedule-hero h3 { margin: 0 0 6px; font-size: 16px; color: #7a531a; }
.v2-schedule-hero p { margin: 0; font-size: 12px; color: #8a7346; line-height: 1.7; }
.v2-rule { padding: 12px 0; border-bottom: 1px solid #eef3f2; }
.v2-rule:last-child { border-bottom: none; }
.v2-rule-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.v2-rule-q { font-size: 12px; color: var(--ink); margin-top: 6px; line-height: 1.6; }
.v2-rule-impact { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.v2-rule-owner { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* 已确认规则的结论：和「影响」区分开，避免把业务结论当成系统推断 */
.v2-rule-answer { font-size: 11px; color: #176d65; background: #f1f7f6; border-left: 2px solid #176d65; padding: 6px 8px; margin-top: 6px; line-height: 1.7; border-radius: 0 6px 6px 0; }
.v2-good-text { color: #176d65; }
.v2-bad-text { color: #a8414b; }

/* 商品 */
.v2-product-hero { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.v2-cover-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.v2-cover-label { font-size: 11px; color: var(--muted); }
.v2-cover-value { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.v2-cover-value.warn { color: #9a6a18; }
.v2-cover-note { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* 系统页 */
.v2-section-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 18px 0 8px; }
.v2-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; }
.v2-kv dt { color: var(--muted); font-size: 12px; }
.v2-kv dd { margin: 0; color: var(--ink); }
.v2-chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* 筛选条补充 */
.v2-filterbar input[type="date"] { border: none; background: transparent; font: inherit; color: var(--ink); padding: 0; }
.v2-filterbar .select-chip { display: flex; align-items: center; gap: 6px; }

/* 抽屉内表单 */
.v2-form { display: flex; flex-direction: column; gap: 12px; }
.v2-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.v2-form input, .v2-form select, .v2-form textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; color: var(--ink); background: #fff;
}
.v2-form textarea { min-height: 84px; resize: vertical; }
/* 人员变动表单：一屏能看全填报项，窄屏退成两列，不让姓名和生效日被挤成一行 */
.v2-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v2-btn { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--teal); font-size: 11px; }
.v2-btn:hover { border-color: var(--teal); }
/* .primary 只有 .full/.compact 定义了内边距，单独用时会被压成一个小方块 */
.v2-form .primary { align-self: flex-start; padding: 11px 22px; font-size: 13px; }

/* 口径与缺口说明：一段一条，编号交给 CSS，避免每条都手写序号 */
.v2-note-list { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.v2-note-list li::marker { color: var(--teal, #1c7a6b); }

@media (max-width: 1180px) {
  .v2-kpi-grid, .v2-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .v2-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-grid-3 { grid-template-columns: 1fr; }
  .v2-product-hero { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .v2-grid-2 { grid-template-columns: 1fr; }
  .v2-kpi-grid { grid-template-columns: 1fr; }
  .v2-headline { flex-direction: column; }
  .v2-bar-row { grid-template-columns: 96px 1fr 76px; }
}

/* 未设目标店铺的说明行：不进分母，但要让人看得见差额 */
.v2-target-extra { border-top: 1px dashed var(--line, #dbe4e4); margin-top: 6px; padding-top: 10px; opacity: .78; }
.v2-target-extra .v2-target-meta { font-size: 12px; }

/* ===== v1.7.0 排班看板 ===== */

/* 紧凑柱状图：逐日 31 根、逐小时 24 根，用 flex 撑满宽度 */
.v2-col-chart { display: flex; align-items: flex-end; gap: 3px; padding: 8px 2px 0; }
.v2-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.v2-col-track { height: 108px; display: flex; align-items: flex-end; }
.v2-col-bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #4f9d94, #2f7d74);
  transition: height .25s ease;
}
.v2-col-bar.zero { background: #e3eae9; }
.v2-col-bar.peak { background: linear-gradient(180deg, #c08a2e, #9a6a18); }
.v2-col-label {
  font-size: 9px; color: var(--muted); text-align: center;
  height: 13px; line-height: 13px; overflow: hidden; white-space: nowrap;
}
.v2-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.v2-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.v2-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; background: #2f7d74; }
.v2-dot.actual { background: #2f7d74; }

/* 缺口清单 */
.v2-gap-list { display: flex; flex-direction: column; gap: 10px; }
.v2-gap {
  border: 1px solid var(--line); border-left: 3px solid #c8d2d0;
  border-radius: 10px; padding: 11px 13px; background: #fff;
}
.v2-gap-high { border-left-color: #a8414b; background: #fdf7f7; }
.v2-gap-medium { border-left-color: #c08a2e; background: #fdfbf5; }
.v2-gap-low { border-left-color: #9fb2af; }
.v2-gap-head { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.v2-gap-head b { color: var(--ink); font-weight: 600; }
.v2-gap-detail { font-size: 12px; color: #5b6b70; line-height: 1.7; margin-top: 6px; }
.v2-gap-names { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.7; }
.v2-gap-ack { font-size: 12px; color: #1d6f4a; background: #eef8f2; border-left: 3px solid #2f9e6b;
  padding: 6px 10px; margin-top: 8px; border-radius: 4px; line-height: 1.7; }
.v2-gap-samples { margin: 6px 0 0; padding-left: 16px; }
.v2-gap-samples li { font-size: 11px; color: var(--muted); line-height: 1.8; }

/* 规则网格：规则多了以后单列太长 */
.v2-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }

@media (max-width: 1100px) {
  .v2-rule-grid { grid-template-columns: 1fr; }
  .v2-col-track { height: 88px; }
}


.v2-select {
  border: 1px solid #e2d4b4; background: #fff; color: #7a531a;
  padding: 5px 9px; border-radius: 8px; font-size: 12px; cursor: pointer;
}

.v2-unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }

/* ---- 系统维护折叠入口 ---- */
.nav-admin { margin-top: 4px; }
.nav-admin > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; cursor: pointer; list-style: none;
  padding: 8px 10px; border-radius: 8px;
  color: var(--muted, #6b7280); font-size: 12px; letter-spacing: .04em;
  text-transform: none; user-select: none;
}
.nav-admin > summary::-webkit-details-marker { display: none; }
.nav-admin > summary::before { content: '▸'; margin-right: 6px; transition: transform .15s ease; }
.nav-admin[open] > summary::before { transform: rotate(90deg); }
.nav-admin > summary:hover { background: rgba(15, 23, 42, .05); }
.nav-admin > summary span {
  min-width: 20px; text-align: center; font-size: 11px;
  background: rgba(15, 23, 42, .08); border-radius: 999px; padding: 1px 6px;
}
.nav-admin-body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px 6px; }
.nav-admin-group { display: flex; flex-direction: column; gap: 2px; }
.nav-admin-group + .nav-admin-group { margin-top: 6px; }
.nav-admin-group > small {
  padding: 2px 12px 4px; color: rgba(217, 235, 232, .55);
  font-size: 10px; letter-spacing: .08em;
}
/* ---- 登录页切换（登录 / 申请开通） ---- */
.login-switch { margin: 10px 0 0; text-align: center; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent, #2563eb); font-size: 13px; text-decoration: underline;
}
.link-btn:hover { opacity: .8; }
/* ---- 单一维护面板 ---- */
.maint-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1080px) { .maint-layout { grid-template-columns: 1fr; } }
.maint-factors { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.maint-factors > .maint-factor { flex: none; }
/* 卡片用 div：<button> 内部有匿名 flex 包裹，会把子元素拉高。块级流行为可预测。 */
.maint-factor {
  display: block; width: 100%; box-sizing: border-box;
  text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.maint-factor:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.maint-factor b { display: block; font-size: 13px; font-weight: 600; }
.maint-factor small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.maint-factor-state { display: inline-block; font-size: 11px; color: var(--muted); white-space: nowrap; margin-top: 5px; }
.maint-factor-state.state-complete { color: var(--good, #0f766e); }
.maint-factor-state.state-partial { color: var(--warn, #b45309); }
.maint-factor-state.state-empty { color: var(--risk, #b91c1c); }
.maint-factor:hover { border-color: var(--teal); }
.maint-factor.active { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); background: #f8fbfb; }
.maint-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.maint-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.maint-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.maint-field > span { color: var(--muted); }
.maint-field > span i { font-style: normal; margin-left: 4px; opacity: .75; }
.maint-field input, .maint-field select {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 13px; background: #fff; color: inherit; min-width: 0;
}
.maint-field input:focus, .maint-field select:focus { outline: 2px solid rgba(13, 148, 136, .25); border-color: var(--teal); }
.maint-field em { font-style: normal; font-size: 11px; color: var(--muted); opacity: .85; }
.maint-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.maint-form-foot .form-error { margin: 0; }
/* 长文本列换行，避免最后一列被挤出可视区只能横向拖 */
.v2-table td.wrap { white-space: normal; min-width: 300px; line-height: 1.55; }

/* ==========================================================================
   驾驶舱改版 v1 · 设计系统
   作用域限定在 .dash 内：变量只在这里覆盖，旧页面用的 --ink/--line 等
   全局变量保持原样，避免改版一页把其余 20 页的配色全带跑。
   ========================================================================== */
/* .d-scope 只带变量与字体，不带布局：抽屉里的内容也要用同一套色板，
   但抽屉不能套 .dash 的 max-width 和 grid。 */
.d-scope,
.dash {
  --bg: #f8faf9; --surface: #ffffff;
  --line: #e7ecea; --line-soft: #f0f4f3;
  --ink: #0f1c1a; --ink-2: #40514e; --ink-3: #71817e;
  --brand: #176d65; --brand-deep: #0e4d49; --brand-soft: #eef3f2;
  --good: #167c72; --warn: #9a6a18; --warn-bg: #fdf9ee;
  --danger: #a8414b; --danger-bg: #fce8ea;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dash {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

/* ① 结论条：一句话 + 一个动作，左侧 3px 状态竖条 */
.d-headline {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 24px 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.d-headline::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--brand);
}
.d-headline.is-watch::before { background: var(--warn); }
.d-headline.is-risk::before { background: var(--danger); }
.d-headline-text {
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d-headline-meta { margin-top: 4px; font-size: 11px; color: var(--ink-3); }
.d-headline-actions { display: flex; gap: 8px; flex: none; }
.d-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--brand); border-radius: 6px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.d-btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.d-btn.ghost { background: transparent; color: var(--brand); }
.d-btn.ghost:hover { background: var(--brand-soft); }

/* ② 指标带：4-6 张，超 6 张必须拆页
   固定 3 列（不再随宽度变 6 列）：6 列时列宽只有 170 左右，中文标签要挤到折行，
   而且数字和口径行会互相争空间。3 列在任何宽度下都更好读。 */
.d-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.d-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px 24px; min-width: 0;
}
.d-kpi:hover { border-color: #cfe0dc; }
.d-kpi-label {
  font-size: 11px; font-weight: 500; color: var(--ink-3);
  letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-kpi-value {
  margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--ink);
  display: flex; align-items: baseline; gap: 4px;
}
.d-kpi-unit { font-size: 12px; font-weight: 400; color: var(--ink-3); }
/* 增量只占一行：六列并排时列宽只有 170 左右，任它折行会把卡片撑到 278px，
   指标带一变高，主视图就被顶出首屏。 */
.d-kpi-delta {
  margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-kpi-delta.good { color: var(--good); }
.d-kpi-delta.danger { color: var(--danger); }
.d-kpi-note {
  margin-top: 8px; font-size: 11px; font-weight: 400; color: var(--ink-3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 达标状态只用 4px 圆点表达，不给整卡上色 */
.d-dot {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  margin-left: 6px; vertical-align: middle; background: var(--brand);
}
.d-dot.good { background: var(--good); }
.d-dot.warn { background: var(--warn); }
.d-dot.danger { background: var(--danger); }

/* 待接入：灰态，不显示 0 */
.d-pending-value { color: var(--ink-3); font-size: 20px; font-weight: 500; }

/* ③ 区块 */
.d-block { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; }
.d-block-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.d-block-hd h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.d-hint { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.d-note { margin: 16px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.6; }

/* 目标组：4 组横向卡 */
.d-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.d-target { border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
.d-target-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.d-target-meta { margin-top: 4px; font-size: 11px; color: var(--ink-3); }
.d-target-bar { margin-top: 12px; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.d-target-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.d-target-bar i.is-warn { background: var(--warn); }
.d-target-bar i.is-danger { background: var(--danger); }
.d-target-pct { margin-top: 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.d-target-pct.is-empty { font-size: 13px; color: var(--ink-3); font-weight: 500; }

/* 三 tab */
.d-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.d-tab {
  padding: 6px 14px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-3); font-size: 12px; cursor: pointer;
}
.d-tab.is-active { background: var(--surface); color: var(--brand); font-weight: 600; }

/* 表格：表头无底色只有下边框，行线 1px，数字右对齐 */
.d-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.d-table th {
  padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 500;
  color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.d-table td {
  padding: 0 12px; height: 44px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); white-space: nowrap;
}
.d-table th.num, .d-table td.num { text-align: right; }
.d-table td.num { color: var(--ink); }
.d-table tbody tr:hover td { background: rgba(23, 109, 101, .06); }
.d-table tbody tr:last-child td { border-bottom: 0; }

/* 折叠区 */
.d-fold { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.d-fold > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.d-fold > summary::-webkit-details-marker { display: none; }
.d-fold > summary::after { content: "展开"; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.d-fold[open] > summary::after { content: "收起"; }
.d-fold-body { padding: 0 24px 20px; }

/* 空态 / 待接入 */
.d-empty {
  padding: 28px 16px; text-align: center; font-size: 12px; color: var(--ink-3);
  background: var(--bg); border-radius: 8px; line-height: 1.7;
}
.d-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 500;
}
.d-tag.warn { background: var(--warn-bg); color: var(--warn); }
.d-tag.danger { background: var(--danger-bg); color: var(--danger); }
.d-tag.muted { background: var(--line-soft); color: var(--ink-3); }

/* 三档宽度：1440 / 1280 / 1024 均不得出现横向滚动 */
@media (max-width: 1180px) {
  .d-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1024 档仍保持 3 列：改成 2 列会让 6 张卡排成 3 行，
   高度直接把主视图顶出首屏，违反「首屏不滚动能看到结论+指标带+主视图开头」。 */
@media (max-width: 1080px) {
  .d-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-kpi { padding: 16px 16px; }
  .d-kpi-value { font-size: 24px; }
  .d-kpi-label { letter-spacing: .04em; }
}

/* 数据滞后提示条：32px 浅黄条，不弹窗 */
.d-warnbar {
  display: grid; gap: 2px; padding: 6px 16px;
  background: var(--warn-bg); border: 1px solid #f0e3c4; border-radius: 6px;
  font-size: 11px; color: var(--warn); line-height: 1.6; min-height: 32px;
  align-content: center;
}

/* ===== 下钻抽屉（需求第 7 节：560px、200ms 滑入、面包屑可回退） ===== */
.drawer.is-dash { width: min(560px, 94vw); }
.d-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12px; color: var(--ink-3); }
.d-crumb button {
  padding: 0; border: 0; background: none; color: var(--brand);
  font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.d-crumb strong { font-weight: 600; color: var(--ink); }
.d-sample { margin: 0 0 16px; font-size: 11px; color: var(--ink-3); }
.d-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-cell { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.d-cell-label { font-size: 11px; color: var(--ink-3); }
.d-cell-value { margin-top: 4px; font-size: 20px; font-weight: 600; color: var(--ink); }
.d-cell-value.is-thin { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.d-section-title { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.d-drawer-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.d-drawer-foot .d-ok { font-size: 11px; color: var(--good); }
.d-drawer-foot .d-bad { font-size: 11px; color: var(--danger); font-weight: 600; }
.d-btn.small { padding: 6px 12px; font-size: 12px; }

/* 可下钻的表格行 */
.d-table tbody tr[data-store] { cursor: pointer; }