/* views/roi.css — 「ROI / 成本归因看板」(FU-ROI-DASHBOARD)。只引用 tokens.css 变量,零字面量、
 * 零外部资源、零内联样式(CSP)。复用通用 .stats/.stat/.section/.filters/.table 骨架,仅加视图
 * 私有 .v-roi-* 类(类契约:只增不改既有冻结类,DESIGN.md §0.10)。
 * 信号色语义固定;teal 配给:每区一道(section marker 图标 / 功能性链接 / 趋势面积线 / 总成本头条值)。
 * 数值/比例条轨用中性钢与信号色,绝不把 teal 当数值轨(DESIGN.md §0.4 teal 预算)。 */

.v-roi-hidden { display: none; }

/* 过滤行 */
.v-roi-dt { width: 200px; }
.v-roi-filter-actions { display: flex; gap: var(--space-2); align-items: flex-end; }

/* 窗口回显 */
.v-roi-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* 统计簇 */
.v-roi-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.v-roi-card { display: flex; flex-direction: column; gap: var(--space-2); }
.v-roi-card .stat-label,
.v-roi-card .stat-value { margin: 0; }
.v-roi-cap { font-size: 12px; color: var(--color-text-muted); }

/* 信号色(语义固定) + 区域唯一一道 teal(总成本头条值 / accent 文字) */
.v-roi-hot { color: var(--color-danger); }
.v-roi-warn { color: var(--color-warning); }
.v-roi-ok { color: var(--color-success); }
.v-roi-muted { color: var(--color-text-muted); }
.v-roi-accent { color: var(--color-accent); }

/* 下钻链接(功能性 teal 文字/链接,DESIGN.md §2) */
.v-roi-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 120ms ease;
}
.v-roi-link:hover { color: var(--color-accent-strong); }
.v-roi-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}
.v-roi-link .icon { vertical-align: 0; }

.v-roi-note { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-3); }

/* 区块标题 + 一道 teal marker */
.v-roi-sec-title { display: flex; align-items: center; gap: var(--space-2); }
.v-roi-sec-mark { display: inline-flex; color: var(--color-accent); }

/* ---- 单卡 panel ---- */
.v-roi-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
  min-width: 0;
}
.v-roi-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.v-roi-panel-mark { display: inline-flex; color: var(--color-accent); } /* 本卡唯一一道 teal */
.v-roi-panel-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.v-roi-panel-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: flex-end; }

.v-roi-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: var(--space-6) var(--space-2);
  text-align: center;
}

/* 卡内细分行 */
.v-roi-bd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.v-roi-bd-item { display: flex; flex-direction: column; gap: var(--space-1); }
.v-roi-bd-label { font-size: 11px; color: var(--color-text-muted); }
.v-roi-bd-val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---- per-head license 对比卡 ---- */
.v-roi-license-host { margin-top: var(--space-3); }
.v-roi-price { width: 160px; }
.v-roi-license { display: flex; flex-direction: column; gap: var(--space-3); }
.v-roi-license-formula { font-size: 13px; color: var(--color-text-secondary); }
.v-roi-savings {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-table-header-bg);
  border-radius: var(--radius-control);
}
.v-roi-savings-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.v-roi-savings-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- 横向比例条(原生 <progress>;轨色中性钢/信号,绝不 teal) ---- */
.v-roi-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.v-roi-hbar { display: flex; flex-direction: column; gap: var(--space-1); }
.v-roi-hbar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 12px;
}
.v-roi-hbar-label {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.v-roi-hbar-val {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.v-roi-hbar-track {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border: none;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.v-roi-hbar-track::-webkit-progress-bar { background: var(--color-border); border-radius: 999px; }
.v-roi-hbar-track::-webkit-progress-value { background: var(--color-gauge-neutral); border-radius: 999px; }
.v-roi-hbar-track::-moz-progress-bar { background: var(--color-gauge-neutral); border-radius: 999px; }
/* ghost = 假设/估算轨(更淡,与实际成本轨区分,均非 teal) */
.v-roi-hbar-ghost::-webkit-progress-value { background: var(--color-border-input); }
.v-roi-hbar-ghost::-moz-progress-bar { background: var(--color-border-input); }
.v-roi-hbar-warn::-webkit-progress-value { background: var(--color-warning); }
.v-roi-hbar-warn::-moz-progress-bar { background: var(--color-warning); }
.v-roi-hbar-hot::-webkit-progress-value { background: var(--color-danger); }
.v-roi-hbar-hot::-moz-progress-bar { background: var(--color-danger); }

/* ---- 部门排行 + 表 ---- */
.v-roi-dept-host { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.v-roi-table { padding: 0; background: transparent; border: none; }

/* ---- 趋势 ---- */
.v-roi-trend-host { margin-top: var(--space-3); }
.v-roi-trend-chart { width: 100%; min-height: 240px; }

/* ============================================================================
 * 图表原语着色(charts.js prefix='v-roi')。SVG presentation 属性不支持 var(),颜色必须由 CSS
 * 用 --color-* 着色(对拍 dashboards.css 给 v-dash-* 的着色;绝不引用 --bs-*,绝不套 .bs 容器)。
 * 趋势面积线 = 本区一道 accent(teal,图表主可视化)。
 * ==========================================================================*/
.v-roi-area { width: 100%; height: 240px; display: block; }
.v-roi-area-line { fill: none; stroke: var(--color-accent); stroke-width: 2.4; }
.v-roi-area-fill { fill: var(--color-accent); opacity: 0.12; stroke: none; }
.v-roi-area-dot { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 2; }
.v-roi-grid { stroke: var(--color-border); stroke-width: 1; }
.v-roi-wk { fill: rgba(255, 255, 255, 0.035); }
.v-roi-ax { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: 11px; }

/* ============================================================================
 * ROI 视觉改版(v-roi2-*)—— 严格对齐 Figma node 70:350(wan.now · 计量)。
 * 只引用 tokens.css,零字面色(模型品牌色用 --color-model-*)、零内联样式。
 * 桑基为手画 SVG(charts.js 的 s());几何走 setAttribute,颜色全在此 class 着色。
 * ==========================================================================*/

.tnum { font-variant-numeric: tabular-nums; }

/* ---- 顶部操作行:日期 pill + 导出报表 ---- */
/* 顶行合一:左 chips / 右 日期胶囊+导出(原两行各自半空,2026-07-12 并) */
.v-roi2-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.v-roi2-actions-right { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.v-roi2-datepill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12.8px; font-weight: 700; color: var(--color-text-secondary);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 9px; padding: 7px 12px;
}
.v-roi2-datepill .icon { color: var(--color-text-muted); }
.v-roi2-export {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12.8px; font-weight: 700; color: var(--color-text-inverse); cursor: pointer;
  background: var(--grad-brand); border: none;
  border-radius: 9px; padding: 7px 14px;
  box-shadow: 0 8px 18px -8px rgba(244, 101, 15, 0.45);
}
.v-roi2-export:hover { filter: brightness(1.04); }
.v-roi2-export .icon { color: var(--color-text-inverse); }

/* ---- 叙事头部(白底「鎏金档案馆」编辑体:橙 kicker + 大标题 + 关键数字橙高亮 + 右侧描边 pill) ---- */
.v-roi2-hd {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.v-roi2-hd-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.v-roi2-hd-kicker {
  font-size: 13px; font-weight: 600; letter-spacing: 0.24em;
  color: var(--color-accent);
}
/* 结论带:图表之后的收束(灰=数据,橙晕=结论;先看数后给话 —— 2026-07-12 终稿) */
.v-roi2-summary {
  margin: 12px 0 8px; padding: 16px 22px; border-radius: 14px;
  background: var(--grad-brand-soft);
}
.v-roi2-summary-line {
  font-size: 16px; line-height: 1.7; color: var(--color-text-secondary);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
}
.v-roi2-summary-line b {
  font-family: var(--font-mono-tabular); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--color-text);
}
.v-roi2-hd-approx { color: var(--color-text-muted); font-size: 14px; }
.v-roi2-hl { color: var(--color-accent); }
.v-roi2-hd-chips { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }  /* 顶行左侧(随合一改左对齐) */
.v-roi2-hchip {
  font-size: 13px; font-weight: 600; color: var(--color-accent);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-edge);
  border-radius: 999px; padding: 7px 15px; white-space: nowrap;
}

/* ---- KPI 分隔条(4 列,列间发丝线;标签 / 大值 / 迷你走势线 / 涨跌 badge) ---- */
.v-roi2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: var(--space-8); }
.v-roi2-kpi { padding: 4px 26px; border-left: 1px solid var(--color-border); min-width: 0; }
.v-roi2-kpi:first-child { border-left: none; padding-left: 0; }
.v-roi2-kpi-label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.v-roi2-kpi-value { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--color-text); margin: 10px 0 0; }
.v-roi2-kpi-value small { font-size: 17px; font-weight: 600; color: var(--color-text-secondary); }
.v-roi2-kpi-spark { margin: 14px 0 10px; }
.v-roi2-spark { display: block; width: 100%; height: 46px; }
.v-roi2-kpi-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.v-roi2-delta { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.v-roi2-delta-bad { color: var(--color-danger); background: var(--color-danger-tint); }
.v-roi2-delta-good { color: var(--color-success); background: var(--color-success-tint); }
.v-roi2-kpi-cap { font-size: 12px; color: var(--color-text-muted); }

/* 迷你走势线(2026-07 对齐参考稿重画):粗线圆折角 + 面积「向下渐隐」渐变
 * (fill 由 charts.js 每实例渐变提供,stop 走 currentColor → 由 sk-* 的
 * color 决定),无末端圆点 —— 旧版死板色块填充/圆点规则移除。 */
.v-roi2-spark-area { stroke: none; }
.v-roi2-spark-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.v-roi2-spark-gs-a { stop-color: currentColor; stop-opacity: 0.32; }
.v-roi2-spark-gs-b { stop-color: currentColor; stop-opacity: 0; }
.v-roi2-spark.sk-cost, .v-roi2-spark.sk-token { color: var(--color-spark-brand); }  /* 图形 currentColor 通道,非文字 */
.v-roi2-spark.sk-cap { color: var(--color-warning); }
.v-roi2-spark.sk-roi { color: var(--color-success); }

/* KPI 曲线入场生长(2026-07-14 用户点名;对拍 bigscreen 入场):线 dashoffset 1→0
 * (pathLength 已在 roi.js 归一),面积随后渐显;四卡错开 150ms 像逐卡点亮;
 * both 填充让延迟期停在起点;reduced-motion 直达终态(基态 offset 0 = 整线)。 */
.v-roi2-kpi-spark .v-roi2-spark-line {
  stroke-dasharray: 1;
  animation: v-roi2-spark-grow 1.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.v-roi2-kpi-spark .v-roi2-spark-area {
  animation: v-roi2-spark-fill 900ms ease-out both;
  animation-delay: 800ms;
}
.v-roi2-kpi:nth-child(2) .v-roi2-spark-line { animation-delay: 150ms; }
.v-roi2-kpi:nth-child(3) .v-roi2-spark-line { animation-delay: 300ms; }
.v-roi2-kpi:nth-child(4) .v-roi2-spark-line { animation-delay: 450ms; }
.v-roi2-kpi:nth-child(2) .v-roi2-spark-area { animation-delay: 950ms; }
.v-roi2-kpi:nth-child(3) .v-roi2-spark-area { animation-delay: 1100ms; }
.v-roi2-kpi:nth-child(4) .v-roi2-spark-area { animation-delay: 1250ms; }
@keyframes v-roi2-spark-grow {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes v-roi2-spark-fill {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v-roi2-kpi-spark .v-roi2-spark-line,
  .v-roi2-kpi-spark .v-roi2-spark-area { animation: none; }
}
.v-roi2-spark.sk-cost .v-roi2-spark-line, .v-roi2-spark.sk-token .v-roi2-spark-line { stroke: var(--color-accent-bright); }
.v-roi2-spark.sk-cap .v-roi2-spark-line { stroke: var(--color-warning); }
.v-roi2-spark.sk-roi .v-roi2-spark-line { stroke: var(--color-success); }

/* ---- 桑基 holo 面板(深色「指挥中心」· 蓝图网格 + 发光流带) ----
 * 深底文字用作用域内本地变量(不进 tokens.css,不外溢;避开「color: 裸 hex」lint②),
 * 与 landing/bigscreen 深底语义同值(§9/§9b)。 */
.v-roi2-panel {
  --holo-ink: #EAF0F7;    /* 深底主文字/标题 */
  --holo-node: #E6ECF3;   /* 节点名(近白) */
  --holo-sub: #AEB9C6;    /* 深底次文字 */
  --holo-muted: #7E8798;  /* 深底弱文字/hint/meta */
  --holo-bar: #6FA8DC;    /* 部门/用途发光柱 + 数值(浅蓝) */
  position: relative; overflow: hidden;
  background: #0B1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 20px 24px 16px;
  margin-bottom: var(--space-4);
  box-shadow: 0 26px 60px -30px rgba(11, 18, 32, 0.75);
}
.v-roi2-panel > * { position: relative; z-index: 1; }
/* 蓝图网格背纹(装饰,pointer-events:none;中心亮四周淡出) */
.v-roi2-holo-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(120, 150, 200, 0.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(120, 150, 200, 0.06) 39px 40px);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 40%, transparent 100%);
}
.v-roi2-panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.v-roi2-panel-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--holo-ink); }
.v-roi2-panel-note {
  font-size: 11.5px; font-weight: 600; color: var(--holo-sub);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px;
}
.v-roi2-panel-hint { font-size: 12px; color: var(--holo-muted); }
.v-roi2-panel-sub { margin-left: auto; font-family: var(--font-mono); font-size: 11.8px; color: var(--holo-muted); }

/* 桑基 SVG */
.v-roi2-sankey { display: block; width: 100%; height: auto; }
.v-roi2-col-head { fill: var(--color-text-muted); font-family: var(--font-ui); font-size: 13px; }
.v-roi2-node-label { font-family: var(--font-ui); font-size: 13.5px; }
.v-roi2-nl-name { fill: var(--color-text); }
.v-roi2-nl-val { fill: var(--color-text-muted); }
.v-roi2-ml { font-size: 13px; font-weight: 600; }

/* 流带 = 二维渐变「色块」(横向呼吸 × 纵向渐隐) + 一束细「线条」(丝质编织)。
 * 横向:gh-* 三停(源侧浓 → 中段弱 → 目标侧次浓),每条带各自 objectBoundingBox,产生「左右呼吸感」;
 * 纵向:#v-roi2-fade luminance mask(顶亮 → 底暗)逐带套用,保留「顶浓底透」;
 * 线条 stroke-opacity 由逐丝属性(JS setAttribute)控制纵向淡出;Claude 线条另有横向色变。 */
.v-roi2-node { stroke: none; }
.v-roi2-band { stroke: none; }          /* 色块(命中区):默认 pointer-events 生效 */
.v-roi2-strand { fill: none; stroke-width: 0.9; pointer-events: none; }
/* 色块=横向渐变(CSS);线条描边颜色由 JS 逐丝属性控制(默认模型色 / 悬浮顶白→模型色),故此处不写 stroke */
.flow-claude .v-roi2-band { fill: url(#v-roi2-gh-claude); }
.flow-gpt .v-roi2-band { fill: url(#v-roi2-gh-gpt); }
.flow-gemini .v-roi2-band { fill: url(#v-roi2-gh-gemini); }
/* Claude 横向色相止点(浓橙 → 淡橙) */
.gs-claude-a { stop-color: var(--color-model-claude-a); }
.gs-claude-b { stop-color: var(--color-model-claude-b); }
/* 横向「呼吸」止点:0 源侧浓 → 0.5 中段弱 → 1 目标侧次浓(同色仅变透明度,不脏色相) */
.gh-claude-a { stop-color: var(--color-model-claude-a); stop-opacity: 0.9; }
.gh-claude-m { stop-color: var(--color-model-claude-a); stop-opacity: 0.36; }
.gh-claude-b { stop-color: var(--color-model-claude-a); stop-opacity: 0.75; }
.gh-gpt-a { stop-color: var(--color-model-gpt); stop-opacity: 0.78; }
.gh-gpt-m { stop-color: var(--color-model-gpt); stop-opacity: 0.3; }
.gh-gpt-b { stop-color: var(--color-model-gpt); stop-opacity: 0.62; }
.gh-gemini-a { stop-color: var(--color-model-gemini); stop-opacity: 0.8; }
.gh-gemini-m { stop-color: var(--color-model-gemini); stop-opacity: 0.32; }
.gh-gemini-b { stop-color: var(--color-model-gemini); stop-opacity: 0.66; }
/* 纵向渐隐 mask 止点(luminance:白=不透明 → 暗=淡出)。rgb() 写法避开 lint②「color: 禁裸 hex」的子串误伤 */
.gf-a { stop-color: rgb(255, 255, 255); stop-opacity: 1; }
.gf-b { stop-color: rgb(255, 255, 255); stop-opacity: 0.12; }
/* 节点基色(模型列品牌色:GPT 绿 / Gemini 蓝) */
.node-claude { fill: var(--color-model-claude); }
.node-gpt { fill: var(--color-model-gpt); }
.node-gemini { fill: var(--color-model-gemini); }
.node-dept { fill: #ffffff; }
.node-purpose { fill: #1b1e24; }

/* ============ holo 深底作用域:文字/发光柱/流带 ============ */
.v-roi2-holo .v-roi2-col-head { fill: var(--holo-muted); letter-spacing: 0.14em; }
.v-roi2-holo .v-roi2-nl-name { fill: var(--holo-node); }
.v-roi2-holo .v-roi2-nl-val { fill: var(--holo-bar); }             /* 部门/用途数值:浅蓝 */
.v-roi2-holo .v-roi2-ml .v-roi2-nl-val { fill: var(--holo-sub); }  /* 模型数值:浅灰 */

/* 发光胶囊柱:部门(最左)= 白;用途 = 浅蓝;模型 = 品牌色(辉光走 filter drop-shadow) */
.v-roi2-holo .node-dept { stroke: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55)); }
.v-roi2-holo .node-purpose { fill: var(--holo-bar); stroke: none; filter: drop-shadow(0 0 3px rgba(111, 168, 220, 0.7)); }
.v-roi2-holo .node-claude { filter: drop-shadow(0 0 4px rgba(232, 90, 40, 0.8)); }
.v-roi2-holo .node-gpt { filter: drop-shadow(0 0 4px rgba(47, 140, 99, 0.75)); }
.v-roi2-holo .node-gemini { filter: drop-shadow(0 0 4px rgba(79, 143, 208, 0.75)); }

/* 流带 base(默认暗调 = 参考图未悬浮的沉调:色块很淡 + 线暗;逐丝纵向渐变由 JS stroke-opacity 属性控制)。
 * 数值略高于纯纵向渐变时代(.08/.04/.05):横向呼吸的中段停只有 ~0.3x,提总量才能让呼吸在默认态可见。 */
.v-roi2-holo .flow-claude .v-roi2-band { fill-opacity: 0.11; }
.v-roi2-holo .flow-gpt .v-roi2-band { fill-opacity: 0.06; }
.v-roi2-holo .flow-gemini .v-roi2-band { fill-opacity: 0.07; }
.v-roi2-holo .flow-claude { filter: drop-shadow(0 0 1px rgba(232, 90, 40, 0.12)); }
.v-roi2-holo .flow-gpt { filter: drop-shadow(0 0 1px rgba(47, 140, 99, 0.1)); }
.v-roi2-holo .flow-gemini { filter: drop-shadow(0 0 1px rgba(79, 143, 208, 0.1)); }
/* 顶缘线略粗(高光感);透明度不在此写死——交给 JS 逐丝属性,好让悬浮能整体提亮 */
.v-roi2-holo .v-roi2-flow .v-roi2-strand-top { stroke-width: 1.1; }

/* 悬浮:被指到的那条提亮(色块变浓 + 强辉光;线条亮度由 JS setStrands(true) 提,仍带纵向渐变),
 * 其余流带保持默认暗度(不额外压暗——对齐参考图「未指到=默认亮度」)。过渡走 filter/fill-opacity。 */
.v-roi2-sankey .v-roi2-flow { transition: filter 140ms ease; }
.v-roi2-holo .flow-claude.spot { filter: drop-shadow(0 0 4px rgba(232, 90, 40, 0.7)); }
.v-roi2-holo .flow-claude.spot .v-roi2-band { fill-opacity: 0.5; }
.v-roi2-holo .flow-gpt.spot { filter: drop-shadow(0 0 4px rgba(47, 140, 99, 0.6)); }
.v-roi2-holo .flow-gpt.spot .v-roi2-band { fill-opacity: 0.42; }
.v-roi2-holo .flow-gemini.spot { filter: drop-shadow(0 0 4px rgba(79, 143, 208, 0.6)); }
.v-roi2-holo .flow-gemini.spot .v-roi2-band { fill-opacity: 0.44; }

/* SVG tooltip(悬停流带):边框微发光(drop-shadow) */
.v-roi2-tip { opacity: 0; transition: opacity 120ms ease; pointer-events: none; filter: drop-shadow(0 0 5px rgba(150, 180, 220, 0.45)); }
.v-roi2-tip.show { opacity: 1; }
.v-roi2-tip-bg { fill: #0E1728; stroke: rgba(190, 210, 240, 0.4); stroke-width: 1; }
.v-roi2-tip-text { fill: var(--holo-ink); font-family: var(--font-ui); font-size: 13px; font-weight: 600; }

/* ---- 底部统计条(4 格,发丝线分隔) ---- */
.v-roi2-stats {
  display: grid; grid-template-columns: 1.35fr 1.75fr 1.05fr 1.05fr;
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.v-roi2-stat { padding: 14px 18px; border-left: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; }
.v-roi2-stat:first-child { border-left: none; padding-left: 4px; }
.v-roi2-stat-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--holo-muted); margin-bottom: 7px;
}
.v-roi2-stat-val { font-size: 15px; font-weight: 700; color: var(--holo-ink); white-space: nowrap; }
.v-roi2-stat-sub { font-weight: 500; color: var(--holo-muted); font-size: 12.5px; }
.v-roi2-shares { display: flex; align-items: center; gap: 14px; }
.v-roi2-share { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v-roi2-share b { font-size: 15px; font-weight: 700; color: var(--holo-ink); }
.v-roi2-share-name { color: var(--holo-muted); font-size: 12.5px; }
.v-roi2-share-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-claude { background: var(--color-model-claude); }
.dot-gpt { background: var(--color-model-gpt); }
.dot-gemini { background: var(--color-model-gemini); }

/* ---- 部门成本与预算表(毛玻璃) ---- */
.v-roi2-tablecard {
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(120, 79, 61, 0.22), var(--shadow-raised);
}
.v-roi2-tch { display: flex; align-items: baseline; gap: var(--space-3); padding: 17px 20px 12px; }
.v-roi2-tch h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text); }
.v-roi2-tcs { margin-left: auto; font-size: 12px; color: var(--color-text-muted); }
.v-roi2-alertwrap { padding: 0 20px var(--space-3); }
.v-roi2-alert {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 13px; border-radius: 9px;
  background: var(--grad-brand-soft); border: 1px solid rgba(255, 114, 68, 0.28);
  font-size: 12.8px; font-weight: 700; color: var(--color-accent);
}
.v-roi2-alert .icon { flex: none; color: var(--color-accent); }
.v-roi2-alert b { font-weight: 900; }

.v-roi2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.v-roi2-table .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.v-roi2-table thead th {
  text-align: left; font-size: 11.4px; letter-spacing: 0.5px; font-weight: 700;
  color: var(--color-text-muted); padding: 9px 20px;
  background: rgba(255, 255, 255, 0.4);
  border-top: 1px solid var(--color-border-table); border-bottom: 1px solid var(--color-border-table);
}
.v-roi2-table th.r, .v-roi2-table td.r { text-align: right; }
.v-roi2-table tbody td { padding: 13px 20px; border-bottom: 1px solid var(--color-row-zebra); color: var(--color-text); }
.v-roi2-table tbody tr:last-child td { border-bottom: 0; }
.v-roi2-table tbody tr:hover { background: var(--color-row-hover); }
.v-roi2-cost { font-weight: 700; }
.v-roi2-warn { color: var(--color-accent); }
.v-roi2-dept { display: flex; align-items: center; gap: var(--space-2); }
.v-roi2-dept-name { font-weight: 700; color: var(--color-text); font-size: 13.5px; }
.v-roi2-dept-mark {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, rgba(255, 183, 122, 0.32), rgba(249, 115, 22, 0.14));  /* 旧陶土 tint → 正橙家族 */
  color: var(--color-accent); font-size: 12.5px; font-weight: 700;
}
.v-roi2-bud { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.v-roi2-bud-track {
  appearance: none; -webkit-appearance: none;
  width: 84px; height: 7px; border: none; border-radius: 99px;
  background: rgba(27, 30, 36, 0.07); overflow: hidden;
}
.v-roi2-bud-track::-webkit-progress-bar { background: rgba(27, 30, 36, 0.07); border-radius: 99px; }
.v-roi2-bud-track::-webkit-progress-value { background: linear-gradient(90deg, #FFB77A, #F4650F); border-radius: 99px; }  /* 三文鱼 → 正橙(排名条同族) */
.v-roi2-bud-track::-moz-progress-bar { background: linear-gradient(90deg, #FFB77A, #F4650F); border-radius: 99px; }
.v-roi2-bud-warn::-webkit-progress-value { background: linear-gradient(90deg, #F6C877, #D97A06); }  /* 接近超支 = 琥珀语义(原浅三文鱼无语义) */
.v-roi2-bud-warn::-moz-progress-bar { background: linear-gradient(90deg, #F6C877, #D97A06); }
.v-roi2-bud-pct { font-size: 12.5px; font-weight: 700; width: 36px; text-align: right; color: var(--color-text-secondary); }
.v-roi2-tag { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.v-roi2-tag-up { color: var(--color-accent); background: rgba(249, 115, 22, 0.12); }
.v-roi2-tag-down { color: var(--color-success); background: rgba(47, 140, 99, 0.12); }

@media (max-width: 1100px) { .v-roi2-kpis { grid-template-columns: repeat(2, 1fr); } }


/* ---- ROI 改版:Figma 原图呈现(banner / 桑基像素级一致) ---- */
.v-roi2-banner-wrap { margin-bottom: var(--space-4); }
.v-roi2-banner-img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  /* 柔和浮起阴影(对齐 Figma:底部 + 四周一圈柔光,卡片浮起) */
  box-shadow: 0 28px 56px -20px rgba(234, 88, 12, 0.30), 0 10px 26px -10px rgba(28, 30, 36, 0.1);
}
.v-roi2-sankey-img { display: block; width: 100%; height: auto; margin-top: var(--space-2); }

/* 桑基:静态即时渲染(已按用户要求移除逐条生长/淡入动画);仅保留悬停聚光的 120–140ms 过渡。 */

/* ---- 部门表数据可视化:预算条按风险分色 + 成本迷你条 ---- */
/* 预算条:绿(<60安全)/橙(60-89注意)/红(≥90将触顶);% 文字同色(色非唯一编码,数值仍在) */
.v-roi2-bud-ok::-webkit-progress-value { background: var(--color-success); }
.v-roi2-bud-ok::-moz-progress-bar { background: var(--color-success); }
.v-roi2-bud-mid::-webkit-progress-value { background: var(--color-warning); }
.v-roi2-bud-mid::-moz-progress-bar { background: var(--color-warning); }
.v-roi2-bud-hot::-webkit-progress-value { background: var(--color-danger); }
.v-roi2-bud-hot::-moz-progress-bar { background: var(--color-danger); }
.v-roi2-pct-ok { color: var(--color-success); }
.v-roi2-pct-mid { color: var(--color-warning); }
.v-roi2-pct-hot { color: var(--color-danger); }

/* 成本列:数字上 + 比例迷你条(橙,仅示意量级) */
.v-roi2-costcell { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.v-roi2-costbar {
  appearance: none; -webkit-appearance: none;
  width: 92px; height: 4px; border: none; border-radius: 99px;
  background: rgba(27, 30, 36, 0.06); overflow: hidden;
}
.v-roi2-costbar::-webkit-progress-bar { background: rgba(27, 30, 36, 0.06); border-radius: 99px; }
.v-roi2-costbar::-webkit-progress-value { background: var(--color-accent-bright); border-radius: 99px; }
.v-roi2-costbar::-moz-progress-bar { background: var(--color-accent-bright); border-radius: 99px; }

/* ---- 部门成本对比:横向条形图(条长=成本;预算 pill 报风险;环比标签) ---- */
.v-roi2-bars2 { display: flex; flex-direction: column; gap: 16px; padding: 6px 20px 22px; }
.v-roi2-bar-row { display: flex; align-items: center; gap: 14px; }
.v-roi2-bar-dept { display: flex; align-items: center; gap: 8px; width: 134px; flex: none; }
.v-roi2-bar-dept .v-roi2-dept-name { white-space: nowrap; }
.v-roi2-bar {
  appearance: none; -webkit-appearance: none;
  flex: 1; min-width: 60px; height: 18px; border: none; border-radius: 6px;
  background: rgba(27, 30, 36, 0.05); overflow: hidden;
}
.v-roi2-bar::-webkit-progress-bar { background: rgba(27, 30, 36, 0.05); border-radius: 6px; }
.v-roi2-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--color-accent-bright), var(--color-accent)); border-radius: 6px; }
.v-roi2-bar::-moz-progress-bar { background: var(--color-accent-bright); border-radius: 6px; }
.v-roi2-bar-cost { width: 72px; text-align: right; flex: none; font-size: 14px; font-weight: 700; color: var(--color-text); }
.v-roi2-bud-tag { width: 88px; flex: none; text-align: center; font-size: 12px; font-weight: 700; padding: 3px 0; border-radius: 6px; }
.v-roi2-bud-tag-ok { color: var(--color-success); background: var(--color-success-tint); }
.v-roi2-bud-tag-mid { color: var(--color-warning); background: var(--color-warning-tint); }
.v-roi2-bud-tag-hot { color: var(--color-danger); background: var(--color-danger-tint); }
.v-roi2-bar-row .v-roi2-tag { width: 54px; flex: none; text-align: center; }

/* ---- 部门身份色:成本条用用户 Figma 调好的色;徽标照条色自动配套(浅底+深字) ---- */
.bar-dev::-webkit-progress-value   { background: #FFAF97; }  .bar-dev::-moz-progress-bar   { background: #FFAF97; }
.bar-cs::-webkit-progress-value    { background: #93E699; }  .bar-cs::-moz-progress-bar    { background: #93E699; }
.bar-risk::-webkit-progress-value  { background: #A1C9FF; }  .bar-risk::-moz-progress-bar  { background: #A1C9FF; }
.bar-legal::-webkit-progress-value { background: #D4A8FF; }  .bar-legal::-moz-progress-bar { background: #D4A8FF; }
.bar-mkt::-webkit-progress-value   { background: #FFE682; }  .bar-mkt::-moz-progress-bar   { background: #FFE682; }
.mark-dev   { background: rgba(255, 175, 151, 0.22); color: var(--color-cat-dev); }
.mark-cs    { background: rgba(147, 230, 153, 0.24); color: var(--color-cat-cs); }
.mark-risk  { background: rgba(161, 201, 255, 0.24); color: var(--color-cat-risk); }
.mark-legal { background: rgba(212, 168, 255, 0.24); color: var(--color-cat-legal); }
.mark-mkt   { background: rgba(255, 230, 130, 0.30); color: var(--color-cat-mkt); }

/* 部门成本条:静态即时渲染(已移除逐行生长动画)。 */