/* ============================================================
   设计系统 - 所有组件类名以 ds- 为前缀
   新代码必须用设计系统类名，禁止写 inline style
   ============================================================ */

:root {
  --primary: #1B2A4A;
  --accent: #E63946;
  --success: #2E7D32;
  --warning: #FF9800;
  --danger: #c0392b;
  --bg: #f5f6fa;
  --card-bg: #fff;
  --text: #333;
  --muted: #888;
  --border: #e8e8e8;
  --hover: #f8f9fa;
  --radius: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 导航栏 ---------- */
.ds-navbar {
  display: flex;
  align-items: center;
  background: var(--primary);
  color: #fff;
  padding: 0 1.5em;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ds-navbar-brand { font-size: 18px; font-weight: 700; margin-right: 2em; }
.ds-navbar-menu { display: flex; gap: .5em; flex: 1; }
.ds-navbar-menu a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: .5em 1em;
  border-radius: var(--radius);
  transition: all .2s;
}
.ds-navbar-menu a:hover,
.ds-navbar-menu a.active { color: #fff; background: rgba(255,255,255,0.15); }
.ds-navbar-user { font-size: 13px; color: rgba(255,255,255,0.8); }

/* ---------- 主内容 ---------- */
.ds-main { padding: 1.5em; max-width: 1400px; margin: 0 auto; }

/* ---------- 卡片 ---------- */
.ds-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.2em 1.5em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 1em;
}
.ds-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: .8em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--border);
}

/* ---------- 内嵌页面(iframe 模块:ERP原型/智能排柜等) ---------- */
.ds-embed-frame {
  width: 100%;
  height: calc(100vh - 120px);
  border: none;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: block;
}
.ds-embed-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .5em;
}

/* ---------- 按钮 ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em 1.2em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}
.ds-btn-primary { background: var(--primary); color: #fff; }
.ds-btn-primary:hover { opacity: .85; }
.ds-btn-danger { background: var(--accent); color: #fff; }
.ds-btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* ---------- 表格 ---------- */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ds-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--hover);
  text-align: left;
  padding: .6em .8em;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 2px solid var(--border);
}
.ds-table td {
  padding: .5em .8em;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ds-table tr:hover { background: var(--hover); }

/* ---------- 拖拽把手 ---------- */
.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: rgba(0,0,0,0.08);
}

/* ---------- 输入框清空按钮 ---------- */
.inp-clear-wrap { position: relative; display: inline-flex; align-items: center; }
.inp-clear-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  display: none;
}
.inp-clear-wrap input:not(:placeholder-shown) + .inp-clear-btn { display: block; }

/* ---------- 徽章 ---------- */
.ds-badge {
  display: inline-block;
  padding: .15em .6em;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.ds-badge-success { background: #e8f5e9; color: var(--success); }
.ds-badge-warning { background: #fff3e0; color: #e65100; }
.ds-badge-danger { background: #fef2f2; color: var(--danger); }

/* ---------- 提示 ---------- */
.ds-toast {
  position: fixed;
  top: 72px;
  right: 1.5em;
  background: var(--primary);
  color: #fff;
  padding: .8em 1.5em;
  border-radius: var(--radius);
  z-index: 9999;
  animation: slideIn .3s ease;
}
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } }

/* ---------- 表单控件 ---------- */
.ds-input, .ds-select {
  height: 34px;
  padding: 0 .6em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: #fff;
  color: var(--text);
}
.ds-input:focus, .ds-select:focus { outline: none; border-color: var(--primary); }
.ds-field { display: inline-flex; flex-direction: column; gap: .25em; }
.ds-field-label { font-size: 12px; color: var(--muted); }

/* ---------- 筛选栏 ---------- */
.ds-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8em;
  margin-bottom: 1em;
}

/* ---------- 表格容器(横向滚动 + 冻结表头靠 .ds-table th sticky) ---------- */
.ds-table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- 状态占位 ---------- */
.ds-state { text-align: center; color: var(--muted); padding: 3em 0; }
.ds-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- KPI 卡片 ---------- */
.ds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8em; }
.ds-kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: .7em .9em; }
.ds-kpi-label { font-size: 12px; color: var(--muted); margin-bottom: .3em; }
.ds-kpi-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-kpi-delta { font-size: 12px; margin-top: .2em; }
.ds-up { color: var(--success); }
.ds-down { color: var(--danger); }

/* ---------- 健康标签色 ---------- */
.ds-tag { display: inline-block; padding: .12em .55em; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ds-tag-danger { background: #fef2f2; color: var(--danger); }
.ds-tag-warn   { background: #fff3e0; color: #e65100; }
.ds-tag-ok     { background: #e8f5e9; color: var(--success); }
.ds-tag-muted  { background: #f0f0f0; color: var(--muted); }
.ds-row-click { cursor: pointer; }

/* ---------- 工作台 / 统计卡 ---------- */
.ds-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6em;
  margin: .2em 0 1.2em;
}
.ds-board-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .5em;
}
.ds-range-pill {
  font-size: 12px;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--border);
  padding: .35em .9em;
  border-radius: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ds-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1em;
}
.ds-stat {
  --stat-color: var(--primary);
  --stat-soft: #eef1f8;
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3em 1.4em;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ds-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stat-color);
}
.ds-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(27, 42, 74, 0.10);
}
.ds-stat-head {
  display: flex;
  align-items: center;
  gap: .65em;
  margin-bottom: .9em;
}
.ds-stat-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--stat-soft);
  color: var(--stat-color);
}
.ds-stat-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.ds-stat-val {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--stat-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.ds-stat-sub { margin-top: .45em; font-size: 12px; color: var(--muted); }

.ds-stat-primary { --stat-color: var(--primary); --stat-soft: #eef1f8; }
.ds-stat-success { --stat-color: var(--success); --stat-soft: #e8f5e9; }
.ds-stat-warning { --stat-color: #ef7d00;        --stat-soft: #fff3e0; }
.ds-stat-accent  { --stat-color: var(--accent);  --stat-soft: #fdecee; }

.ds-skeleton {
  display: inline-block;
  width: 72%;
  height: .9em;
  border-radius: 6px;
  background: var(--border);
  animation: ds-pulse 1.2s ease-in-out infinite;
}
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* 派生指标 chip 条 */
.ds-chip-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8em;
  margin-bottom: 1.2em;
}
.ds-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8em 1em;
  display: flex;
  flex-direction: column;
  gap: .25em;
}
.ds-chip-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: .35em; }
.ds-chip-val { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ds-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* 图表卡片 */
.ds-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
  margin-bottom: 1em;
}
.ds-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1em 1.3em 1.3em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 0;
}
.ds-chart-card.span-2 { grid-column: 1 / -1; }
.ds-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  margin-bottom: .9em;
}
.ds-chart-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ds-chart-note { font-size: 12px; color: var(--muted); }
.ds-chart-box { position: relative; height: 300px; }
.ds-chart-box.tall { height: 340px; }
@media (max-width: 860px) {
  .ds-chart-grid { grid-template-columns: 1fr; }
}

/* ---------- 布局工具类 ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: .5em; }
.gap-md { gap: 1em; }
.gap-lg { gap: 1.5em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }

/* ===================== 产品开发看板(scoped .mcd,含明暗双主题,不影响其它模块) ===================== */
.mcd{
  --m-plane:#f5f7fb; --m-surface:#ffffff; --m-ink:#0f1a2e; --m-ink2:#42506a; --m-muted:#6b7890;
  --m-hair:#e6ebf2; --m-hair2:#eef2f8; --m-accent:#3b6ef5; --m-accent-soft:#eaf0fe;
  --m-req:#0e9488; --m-req-soft:#e2f5f2; --m-good:#16a34a; --m-warn:#d97706; --m-crit:#dc2626;
  --m-shadow:0 1px 2px rgba(16,26,46,.06),0 4px 16px -8px rgba(16,26,46,.10);
  background:var(--m-plane); color:var(--m-ink); margin:-1em; padding:1.2em 1.2em 2.4em; border-radius:10px;
}
.mcd[data-mcd-theme="dark"]{
  --m-plane:#0d1420; --m-surface:#131c2b; --m-ink:#e8eef6; --m-ink2:#c2ccdb; --m-muted:#8494ab;
  --m-hair:#223047; --m-hair2:#1c2838; --m-accent:#5b86f7; --m-accent-soft:#1a2740;
  --m-req:#2bb6a6; --m-req-soft:#12302e; --m-good:#34d17f; --m-warn:#f0a43c; --m-crit:#f2686a;
  --m-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.55);
}
.mcd .ds-card{background:var(--m-surface);border:1px solid var(--m-hair);box-shadow:var(--m-shadow);color:var(--m-ink);border-radius:14px}
.mcd .ds-card-title{color:var(--m-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--m-hair2)}
.mcd .ds-field-label{color:var(--m-muted)}
.mcd .ds-input,.mcd .ds-select{background:var(--m-surface);color:var(--m-ink);border:1px solid var(--m-hair)}
.mcd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.mcd-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-accent);font-weight:800}
.mcd-h1{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:.25em 0 .1em;color:var(--m-ink)}
.mcd-sub{color:var(--m-muted);font-size:13px}
.mcd-meta{font-size:12px;color:var(--m-muted);text-align:right;line-height:1.7}
.mcd-theme{border:1px solid var(--m-hair);background:var(--m-surface);color:var(--m-ink2);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer}
.mcd-theme:hover{border-color:var(--m-accent);color:var(--m-accent)}
.mcd-kpis{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.mcd-kpis{grid-template-columns:repeat(4,1fr)}}
@media(min-width:960px){.mcd-kpis{grid-template-columns:repeat(7,1fr)}}
.mcd-kpi{background:var(--m-surface);border:1px solid var(--m-hair);border-radius:12px;padding:14px 15px;position:relative;overflow:hidden}
.mcd-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--m-accent);opacity:.85}
.mcd-kpi.req::before{background:var(--m-req)}
.mcd-kpi.crit::before{background:var(--m-crit)}
.mcd-kpi .l{font-size:11.5px;color:var(--m-muted);margin-bottom:9px}
.mcd-kpi .v{font-size:25px;font-weight:770;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--m-ink)}
.mcd-kpi.crit .v{color:var(--m-crit)}
.mcd-sect{margin:26px 0 12px;display:flex;align-items:center;gap:10px}
.mcd-sect .n{font-size:13px;font-weight:800;color:var(--m-ink)}
.mcd-sect .rule{flex:1;height:1px;background:var(--m-hair)}
.mcd-sect .tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.mcd-sect .tag.req{color:var(--m-req);background:var(--m-req-soft)}
.mcd-sect .tag.proj{color:var(--m-accent);background:var(--m-accent-soft)}
.mcd .ds-table{color:var(--m-ink)}
.mcd .ds-table th{color:var(--m-muted);background:var(--m-surface);border-bottom:1px solid var(--m-hair)}
.mcd .ds-table td{border-bottom:1px solid var(--m-hair2)}
.mcd-grid{display:grid;gap:16px}
@media(min-width:720px){.mcd-g2{grid-template-columns:repeat(2,1fr)}.mcd-g3{grid-template-columns:repeat(3,1fr)}.mcd-g4{grid-template-columns:repeat(4,1fr)}}