/* ==========================================================================
   第一阶段四套皮肤：指标中台 / ETL 数据集成 / 规则引擎 / BI 设计器
   与第二阶段的八套配色排版互不相同。
   ========================================================================== */
.p2-entry.skin-metric { --p2c: #0f766e; }
.p2-entry.skin-etl { --p2c: #c2410c; }
.p2-entry.skin-rule { --p2c: #6d28d9; }
.p2-entry.skin-bidesign { --p2c: #0b63ce; }

/* ---------------- 步骤1 · 指标中台 ---------------- */
.stage--metric { --skin: #0f766e; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.mt { background: #f2f6f5; }
.mt-top { flex: none; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; background: #0f766e; color: #fff; }
.mt-back { width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,.18); color: #fff; font-size: 16px; cursor: pointer; }
.mt-logo { padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.92); color: #0f766e; font-size: 12px; font-weight: 800; }
.mt-top b { font-size: 15px; }
.mt-path { opacity: .8; font-size: 12px; }
.mt-state { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; }
.mt-state.ok, .mt-state.done { background: #fff; color: #0f766e; font-weight: 700; }
.mt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 274px; gap: 16px; padding: 16px; overflow: auto; align-content: start; }
.mt-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.mt-card { padding: 16px 18px; border: 1px solid #dbe6e4; border-radius: 12px; background: #fff; }
.mt-card-head { margin-bottom: 12px; font-size: 13.5px; font-weight: 700; color: #14312d; }
.mt-card-head small { margin-left: 6px; font-weight: 400; color: #7d918e; font-size: 12px; }
.mt-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mt-actions { display: flex; gap: 9px; margin-top: 12px; }
.mt-primary { min-height: 33px; padding: 0 20px; border: none; border-radius: 8px; background: #0f766e; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mt-ghost { min-height: 33px; padding: 0 20px; border: 1px solid #cbdad7; border-radius: 8px; background: #fff; color: #33544f; font-size: 12.5px; cursor: pointer; }
.mt-pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.mt-theme { border: 1px solid #e3ecea; border-radius: 10px; overflow: hidden; }
.mt-theme-head { display: flex; justify-content: space-between; padding: 7px 11px; background: #eef5f4; font-size: 12px; font-weight: 700; color: #14312d; }
.mt-theme-head span { color: #0f766e; }
.mt-theme-body { padding: 9px; display: grid; gap: 6px; }
.mt-ind { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #e3ecea; border-radius: 7px; background: #fff; font-size: 12px; color: #33544f; cursor: pointer; text-align: left; }
.mt-ind:hover { border-color: #9dc9c3; }
.mt-ind.on { border-color: #0f766e; background: #eefaf8; color: #0f766e; font-weight: 600; }
.mt-ind-box { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border: 1.5px solid #cbdad7; border-radius: 4px; color: #fff; font-size: 10px; }
.mt-ind.on .mt-ind-box { background: #0f766e; border-color: #0f766e; }
.mt-dict { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
.mt-dict th, .mt-dict td { border: 1px solid #e3ecea; padding: 7px 10px; text-align: left; }
.mt-dict thead th { background: #eef5f4; color: #4a6b66; font-weight: 600; }
.mt-side { padding: 16px; border: 1px solid #dbe6e4; border-radius: 12px; background: #fff; align-self: start; }
.mt-side-title { margin: 14px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #7d918e; }
.mt-side-title:first-child { margin-top: 2px; }
.mt-step { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12.5px; color: #7d918e; }
.mt-step span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #eef1f0; font-size: 11px; font-weight: 700; }
.mt-step.done { color: #0f766e; }
.mt-step.done span { background: #0f766e; color: #fff; }
.mt-kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f4f3; font-size: 12.5px; }
.mt-kv span { color: #7d918e; }

/* ---------------- 步骤2 · ETL 数据集成 ---------------- */
.stage--etl { --skin: #c2410c; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.etl { background: #f6f3f1; }
.etl-top { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; background: #3d2b23; color: #f5e9e3; font-size: 13px; }
.etl-logo { padding: 3px 9px; border-radius: 4px; background: #c2410c; color: #fff; font-weight: 800; font-size: 11.5px; }
.etl-job { margin-left: auto; opacity: .7; font-size: 11.5px; }
.etl-close { width: 26px; height: 26px; border: none; background: none; color: #f5e9e3; cursor: pointer; }
.etl-close:hover { background: #c0392b; }
.etl-toolbar { flex: none; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; background: #fdf8f6; border-bottom: 1px solid #e6d9d2; }
.etl-tool { min-height: 28px; padding: 0 13px; border: 1px solid #dcc9c0; border-radius: 4px; background: #fff; font-size: 12px; color: #5c3d30; cursor: pointer; }
.etl-tool.primary { border-color: #c2410c; background: #c2410c; color: #fff; font-weight: 600; }
.etl-tool.done { border-color: #0f766e; color: #0f766e; }
.etl-tool-sep { width: 1px; height: 18px; background: #e6d9d2; }
.etl-stat { font-size: 11.5px; color: #8a6a5c; }
.etl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 246px minmax(0, 1fr) 250px; }
.etl-left, .etl-right { overflow: auto; padding: 12px; background: #fff; border-right: 1px solid #e6d9d2; }
.etl-right { border-right: none; border-left: 1px solid #e6d9d2; }
.etl-panel-title { margin: 12px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #8a6a5c; }
.etl-panel-title:first-child { margin-top: 2px; }
.etl-src { margin-bottom: 12px; }
.etl-src-head { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #3d2b23; }
.etl-field { display: block; width: 100%; margin-bottom: 5px; padding: 6px 9px; border: 1px solid #ecdfd9; border-radius: 5px; background: #fdfaf9; font-size: 11.5px; color: #5c3d30; text-align: left; cursor: pointer; }
.etl-field:hover { border-color: #c2410c; color: #c2410c; }
.etl-field.used { background: #fdf1ea; border-color: #f0c4ae; color: #c2410c; }
.etl-center { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 12px; }
/* 第四列放「取消映射」按钮，宽度固定 */
.etl-head, .etl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr) 26px; gap: 10px; }
.etl-head { padding: 0 10px 7px; font-size: 11px; color: #8a6a5c; }
.etl-rows { display: grid; gap: 7px; }
.etl-row { padding: 9px 10px; border: 1px solid #e6d9d2; border-radius: 7px; background: #fff; cursor: pointer; align-items: center; }
.etl-row:hover { border-color: #d9a88f; }
.etl-row.sel { border-color: #c2410c; box-shadow: 0 0 0 2px rgba(194,65,12,.14); }
.etl-cell { font-size: 12px; color: #3d2b23; min-width: 0; overflow-wrap: anywhere; }
.etl-target { font-weight: 700; }
.etl-cell i { color: #b9a49b; font-style: normal; }
.etl-op { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 7px; border-radius: 999px; background: #fdf1ea; color: #c2410c; font-size: 11px; }
.etl-preview { margin-top: 14px; }
.etl-result { width: 100%; border-collapse: collapse; font-size: 12px; }
.etl-result th, .etl-result td { border: 1px solid #e6d9d2; padding: 6px 9px; text-align: left; }
.etl-result thead th { background: #fdf8f6; color: #8a6a5c; font-weight: 600; }
.etl-prop { padding: 9px 10px; border: 1px solid #ecdfd9; border-radius: 7px; background: #fdfaf9; font-size: 12px; }
.etl-prop span { display: block; color: #8a6a5c; font-size: 11px; }
.etl-prop b { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.etl-prop-hint { margin: 6px 0 12px; font-size: 11px; color: #b9a49b; }
.etl-oplist { display: grid; gap: 6px; }
.etl-opbtn { padding: 7px 10px; border: 1px dashed #dcc9c0; border-radius: 6px; background: #fff; font-size: 11.5px; color: #5c3d30; cursor: pointer; text-align: left; }
.etl-opbtn.on { border-style: solid; border-color: #c2410c; background: #fdf1ea; color: #c2410c; font-weight: 600; }

/* ---------------- 步骤3 · 规则引擎 ---------------- */
.stage--rule { --skin: #6d28d9; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.rl { background: #f6f4fb; }
.rl-top { flex: none; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; background: #2e1065; color: #ede9fe; }
.rl-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #6d28d9; color: #fff; font-weight: 800; font-size: 13px; }
.rl-top b { font-size: 14.5px; color: #fff; }
.rl-model { opacity: .7; font-size: 11.5px; }
.rl-state { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 12px; }
.rl-state.ok { background: #d1fae5; color: #065f46; font-weight: 700; }
.rl-state.bad { background: #fee2e2; color: #991b1b; font-weight: 700; }
.rl-close { width: 26px; height: 26px; border: none; background: none; color: #ede9fe; cursor: pointer; }
.rl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 262px minmax(0, 1fr); }
.rl-left { overflow: auto; padding: 14px; background: #fff; border-right: 1px solid #e5def7; }
.rl-panel-title { margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #8b7bb0; }
.rl-panel-title:first-child { margin-top: 2px; }
.rl-item { display: block; width: 100%; margin-bottom: 7px; padding: 9px 11px; border: 1px solid #e5def7; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.rl-item.sel { border-color: #6d28d9; box-shadow: 0 0 0 2px rgba(109,40,217,.13); }
.rl-item.done { background: #f8f5ff; }
.rl-item b { display: block; font-size: 12.5px; color: #2e1065; }
.rl-item small { display: block; margin-top: 3px; font-size: 11px; color: #8b7bb0; overflow-wrap: anywhere; }
.rl-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-token { padding: 5px 9px; border: 1px solid #e5def7; border-radius: 6px; background: #fff; font-size: 11.5px; color: #4c1d95; cursor: pointer; }
.rl-token:hover { border-color: #6d28d9; background: #f8f5ff; }
.rl-token.op { background: #6d28d9; border-color: #6d28d9; color: #fff; font-weight: 700; min-width: 34px; }
.rl-formulas { display: flex; flex-direction: column; gap: 8px; }
.rl-formula-chip { padding: 10px 12px; border: 1px solid #e5def7; border-radius: 8px; background: #f8f5ff; color: #4c1d95; font-size: 12px; font-weight: 600; text-align: left; cursor: grab; line-height: 1.5; }
.rl-formula-chip:hover { border-color: #6d28d9; background: #efe8ff; }
.rl-formula-chip:active { cursor: grabbing; }
.rl-formula-chip[disabled] { opacity: .5; cursor: not-allowed; }
.rl-center { overflow: auto; padding: 16px; }
.rl-expr { min-height: 54px; padding: 13px 15px; border: 1px solid #e5def7; border-radius: 10px; background: #fff; font-size: 14px; color: #2e1065; font-family: "Consolas", monospace; overflow-wrap: anywhere; transition: border-color .12s, background .12s; }
.rl-expr.drop { border-color: #6d28d9; background: #f8f5ff; border-style: dashed; }
.rl-expr i { color: #b6a9d4; font-style: normal; font-size: 12.5px; font-family: inherit; }
.rl-expr-actions { display: flex; gap: 8px; margin-top: 9px; }
.rl-form { max-width: 220px; margin-top: 12px; }
.rl-actions { display: flex; gap: 9px; margin-top: 10px; }
.rl-primary { min-height: 33px; padding: 0 20px; border: none; border-radius: 8px; background: #6d28d9; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rl-ghost { min-height: 30px; padding: 0 15px; border: 1px solid #ddd4f2; border-radius: 7px; background: #fff; color: #5b21b6; font-size: 12px; cursor: pointer; }
.rl-download { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.rl-result { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
.rl-result th, .rl-result td { border: 1px solid #e5def7; padding: 7px 9px; text-align: left; }
.rl-result thead th { background: #f6f4fb; color: #6b5b91; font-weight: 600; }
.rl-num { font-family: "Consolas", monospace; }
.rl-ok { color: #059669; font-weight: 700; }
.rl-bad { color: #dc2626; font-weight: 700; }

/* ---------------- 步骤4 · BI 设计器 ---------------- */
.stage--bidesign { --skin: #0b63ce; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.bd { background: #eef3f9; }
.bd-top { flex: none; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; background: #fff; border-bottom: 1px solid #d8e3f0; }
.bd-logo { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #0b63ce; color: #fff; font-weight: 800; font-size: 12px; }
.bd-top b { font-size: 14.5px; color: #123; }
.bd-file { color: #7b8ca3; font-size: 12px; }
.bd-top-actions { margin-left: auto; }
.bd-primary { min-height: 32px; padding: 0 18px; border: none; border-radius: 7px; background: #0b63ce; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bd-close { width: 28px; height: 28px; border: none; background: none; color: #7b8ca3; cursor: pointer; font-size: 14px; }
.bd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr) 232px; }
.bd-left, .bd-right { overflow: auto; padding: 14px; background: #fff; border-right: 1px solid #d8e3f0; }
.bd-right { border-right: none; border-left: 1px solid #d8e3f0; }
.bd-panel-title { margin: 14px 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #7b8ca3; }
.bd-panel-title:first-child { margin-top: 2px; }
.bd-blocks { display: grid; gap: 7px; }
.bd-block { padding: 9px 11px; border: 1px dashed #cbd9ea; border-radius: 8px; background: #fbfdff; font-size: 12px; color: #3d5875; cursor: pointer; text-align: left; }
.bd-block.on { border-style: solid; border-color: #0b63ce; background: #eaf3ff; color: #0b63ce; font-weight: 600; }
.bd-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-metric { padding: 4px 9px; border-radius: 999px; background: #eaf3ff; color: #0b63ce; font-size: 11.5px; }
.bd-empty { padding: 12px; border: 1px dashed #d8e3f0; border-radius: 8px; color: #a8b8cc; font-size: 11.5px; text-align: center; }
.bd-canvas { overflow: auto; padding: 16px; }
.bd-canvas-head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 12.5px; color: #3d5875; }
.bd-rows { color: #7b8ca3; }
.bd-canvas-empty { display: grid; place-content: center; min-height: 220px; border: 2px dashed #d8e3f0; border-radius: 12px; color: #a8b8cc; font-size: 13px; background: #fff; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bd-widget { border: 1px solid #d8e3f0; border-radius: 10px; background: #fff; overflow: hidden; }
.bd-widget-head { padding: 9px 12px; background: #f6f9fd; border-bottom: 1px solid #e6eef7; font-size: 12.5px; font-weight: 700; color: #123; }
.bd-widget-empty { display: grid; place-content: center; height: 116px; color: #a8b8cc; font-size: 12px; }
.bd-chart { display: flex; align-items: flex-end; gap: 9px; height: 116px; padding: 12px 14px; }
.bd-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #4d97f0, #0b63ce); }
.bd-ds { padding: 11px; border: 1px solid #d8e3f0; border-radius: 8px; background: #fbfdff; }
.bd-ds.ok { border-color: #86c79b; background: #f2fbf5; }
.bd-ds b { display: block; font-size: 12px; color: #123; }
.bd-ds small { display: block; margin-top: 4px; font-size: 11px; color: #7b8ca3; }
.bd-kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f4f9; font-size: 12.5px; }
.bd-kv span { color: #7b8ca3; }

@media (max-width: 900px) {
  .mt-body, .etl-body, .rl-body, .bd-body { grid-template-columns: minmax(0, 1fr); }
  .etl-left, .etl-right, .rl-left, .bd-left, .bd-right { max-height: 250px; border-right: none; border-bottom: 1px solid rgba(0,0,0,.1); }
}

/* ---------------- 步骤2 · 取消映射与标准化数据池 ---------------- */
/* 源字段按钮上标出它映射到了哪个标准字段，再点一次就撤销 */
.etl-field-to { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: #c2410c; opacity: .8; }
.etl-field.used:hover { border-color: #b91c1c; color: #b91c1c; }
.etl-field.used:hover .etl-field-to { color: #b91c1c; }
/* 血缘行末尾的撤销按钮 */
.etl-act { display: flex; justify-content: flex-end; }
.etl-clear { width: 20px; height: 20px; padding: 0; border: 1px solid #e6d9d2; border-radius: 4px; background: #fff; color: #b9a49b; font-size: 11px; line-height: 1; cursor: pointer; }
.etl-clear:hover { border-color: #b91c1c; background: #fdf1ea; color: #b91c1c; }
.etl-clear:disabled { cursor: not-allowed; opacity: .45; }
.etl-prop-act { margin: 7px 0 12px; }
.etl-ghost { min-height: 28px; padding: 0 12px; border: 1px solid #dcc9c0; border-radius: 5px; background: #fff; color: #5c3d30; font-size: 11.5px; cursor: pointer; width: 100%; }
.etl-ghost:hover { border-color: #b91c1c; color: #b91c1c; }
.etl-ghost:disabled { cursor: not-allowed; opacity: .5; }
/* 标准化经营数据池：治理跑完后就在本页显示，不用去BI页面找 */
.etl-preview-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #3d2b23; }
.etl-pool-ok, .etl-pool-wait { font-style: normal; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.etl-pool-ok { background: #e6f4ef; color: #0f766e; }
.etl-pool-wait { background: #f4efec; color: #a89388; }
.etl-pool { width: 100%; border-collapse: collapse; font-size: 12px; }
.etl-pool th, .etl-pool td { border: 1px solid #e6d9d2; padding: 6px 9px; text-align: left; vertical-align: top; }
.etl-pool thead th { background: #fdf8f6; color: #8a6a5c; font-weight: 600; }
.etl-pool td { overflow-wrap: anywhere; }
.etl-pool-note { margin: 8px 0 0; font-size: 11.5px; color: #0f766e; }
/* 数据池里的数据表：《香榧数据源.xlsx》五张表按页签切换，表格自己横向滚动 */
.etl-data { margin-top: 14px; border: 1px solid #e6d9d2; border-radius: 8px; background: #fff; overflow: hidden; }
.etl-data-wait { padding: 14px; font-size: 12px; color: #a89388; text-align: center; }
.etl-data-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #fdf8f6; border-bottom: 1px solid #e6d9d2; }
.etl-data-title { font-size: 12px; font-weight: 700; color: #3d2b23; }
.etl-data-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.etl-data-tab { padding: 4px 10px; border: 1px solid #dcc9c0; border-radius: 999px; background: #fff; font-size: 11.5px; color: #5c3d30; cursor: pointer; }
.etl-data-tab em { margin-left: 5px; font-style: normal; font-size: 10.5px; color: #a89388; }
.etl-data-tab.on { border-color: #c2410c; background: #fdf1ea; color: #c2410c; font-weight: 600; }
.etl-data-tab.on em { color: #c2410c; }
.etl-data-dl { margin-left: auto; font-size: 11.5px; color: #0f766e; text-decoration: none; }
.etl-data-dl:hover { text-decoration: underline; }
.etl-data-scroll { max-height: 360px; overflow: auto; }
.etl-data-table { border-collapse: collapse; font-size: 11.5px; white-space: nowrap; min-width: 100%; }
.etl-data-table th, .etl-data-table td { padding: 5px 9px; border-bottom: 1px solid #f0e6e1; border-right: 1px solid #f5ede9; text-align: left; }
.etl-data-table thead th { position: sticky; top: 0; z-index: 1; background: #fdf8f6; color: #8a6a5c; font-weight: 600; border-bottom: 1px solid #e6d9d2; }
.etl-data-table tbody tr:nth-child(even) td { background: #fdfaf9; }
.etl-data-no { color: #b9a49b; font-family: "Consolas", monospace; }
.etl-data-note { margin: 0; padding: 7px 10px; font-size: 11px; color: #8a6a5c; border-top: 1px solid #e6d9d2; background: #fdf8f6; }