/* ═══════════════════════════════════════════
   YUVIA CITY · 原生交互式图表系统
   全部使用 SVG / CSS 绘制，无图片依赖
   配色继承 Logo 橙红主色，风格与磨砂玻璃一致
   ═══════════════════════════════════════════ */

:root{
  /* 图表语义色 —— 三情景 */
  --c-pes:#9c6b5e;        /* 悲观 · 灰陶 */
  --c-neu:var(--gold);    /* 中性 · 主橙 */
  --c-opt:#5f9e93;        /* 乐观 · 青玉 */
  /* 图表分类色（同色系梯度，避免花） */
  --c-1:#FF924D;
  --c-2:#E86A25;
  --c-3:#C44A1C;
  --c-4:#9c5a3c;
  --c-5:#6f8f86;
  --c-6:#4d6b74;
  --c-grid:rgba(255,255,255,.07);
  --c-axis:rgba(255,255,255,.16);
  --c-lbl:#c4a088;
}

/* ── 图表外壳（填满容器宽度） ─────────────── */
.chart{
  position:relative;margin:1.5rem 0;padding:1.4rem 1.5rem 1.2rem;
  background:var(--glass-bg);border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);box-shadow:var(--glass-hl),var(--glass-sh);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  overflow:hidden;width:100%;box-sizing:border-box;
}
.chart::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(680px 220px at 12% -10%,rgba(232,106,37,.10),transparent 62%);
}
.chart > *{position:relative;z-index:1}

.chart__hd{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  margin-bottom:1.15rem;padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chart__ttl{font-size:.98rem;font-weight:650;letter-spacing:-.01em;color:var(--sand-050)}
.chart__sub{font-size:.76rem;color:var(--sand-600);letter-spacing:.02em}
.chart__cap{
  margin-top:1rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.055);
  font-size:.78rem;line-height:1.6;color:var(--sand-400);
}
.chart__cap b{color:var(--gold-hi);font-weight:600}

/* 图例 */
.lgd{display:flex;flex-wrap:wrap;gap:.35rem .95rem;margin-left:auto}
.lgd span{display:inline-flex;align-items:center;gap:.38rem;
  font-size:.73rem;color:var(--sand-400);white-space:nowrap}
.lgd i{width:10px;height:10px;border-radius:3px;background:var(--k);flex-shrink:0}
.lgd i.is-line{height:3px;width:16px;border-radius:2px}

.chart--wide{max-width:none;margin:1.5rem 0}

/* 双列网格（等宽填满） */
.chart-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0}
.chart-duo > .chart{margin:0;width:100%}
/* 雷达图卡片紧凑化 */
.radar-wrap .chart{padding:1rem 1.2rem .9rem}
@media(max-width:860px){.chart-duo{grid-template-columns:1fr}}

/* SVG 通用 */
.chart svg{width:100%;height:auto;overflow:visible}
.chart svg text{font-family:var(--font);fill:var(--c-lbl)}
.ax-line{stroke:var(--c-axis);stroke-width:1}
.gr-line{stroke:var(--c-grid);stroke-width:1;stroke-dasharray:3 4}
.ax-t{font-size:10.5px;fill:var(--sand-600)}
.ax-t--v{font-size:10.5px;fill:var(--sand-600);text-anchor:end}
.val-t{font-size:11px;font-weight:600;font-family:var(--font-num)}

/* ══════════ 1. 横向条形图 ══════════ */
.hbar{display:grid;gap:.85rem}
.hbar__row{display:grid;grid-template-columns:9.5rem 1fr auto;align-items:center;gap:.9rem;
  cursor:default;transition:transform .3s var(--ease)}
.hbar__row:hover{transform:translateX(3px)}
.hbar__lb{font-size:.82rem;color:var(--sand-200);line-height:1.35}
.hbar__lb small{display:block;font-size:.68rem;color:var(--sand-600);letter-spacing:.02em}
.hbar__tr{position:relative;height:26px;border-radius:7px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.hbar__tr i{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--k,var(--gold-dp)),var(--k2,var(--gold-hi)));
  box-shadow:0 0 18px -4px var(--k2,var(--gold-hi));
  transition:width 1.15s var(--ease);
}
.is-drawn .hbar__tr i{width:calc(var(--p) * 1%)}
.hbar__row:hover .hbar__tr i{filter:brightness(1.14)}
.hbar__vl{font-family:var(--font-num);font-size:.86rem;font-weight:650;
  color:var(--sand-050);min-width:5.2rem;text-align:right}
.hbar__vl em{font-style:normal;font-size:.7rem;color:var(--sand-600);margin-left:.15rem}
.hbar__row--ghost .hbar__tr i{
  background:repeating-linear-gradient(45deg,rgba(156,107,94,.55) 0 6px,rgba(156,107,94,.2) 6px 12px);
  box-shadow:none}
.hbar__row--ghost .hbar__vl{color:var(--sand-400)}
@media(max-width:600px){
  .hbar__row{grid-template-columns:1fr;gap:.3rem}
  .hbar__vl{text-align:left;min-width:0}
}

/* ══════════ 2. 价值链流程 ══════════ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;align-items:stretch}
.flow__n{
  position:relative;padding:.95rem .85rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  transition:.35s var(--ease);cursor:default;
}
.flow__n::after{
  content:"";position:absolute;right:-.65rem;top:50%;width:.65rem;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(232,106,37,.25));transform:translateY(-50%);z-index:2
}
.flow__n:last-child::after{display:none}
.flow__n:hover{background:rgba(232,106,37,.10);border-color:rgba(232,106,37,.34);
  transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(232,106,37,.7)}
.flow__i{display:block;font-family:var(--font-num);font-size:.7rem;color:var(--gold);
  letter-spacing:.14em;margin-bottom:.35rem}
.flow__t{display:block;font-size:.88rem;font-weight:600;color:var(--sand-050);margin-bottom:.3rem}
.flow__d{font-size:.74rem;line-height:1.55;color:var(--sand-400)}
.flow-back{
  margin-top:.85rem;padding:.7rem .95rem;border-radius:var(--r-sm);
  background:rgba(95,158,147,.08);border:1px dashed rgba(95,158,147,.32);
  font-size:.78rem;color:var(--sand-200);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap
}
.flow-back b{color:var(--jade);font-weight:600}
.flow-back .arrow-l{color:var(--jade);font-family:var(--font-num);letter-spacing:-.1em}
@media(max-width:760px){
  .flow{grid-template-columns:1fr 1fr}
  .flow__n::after{display:none}
}
@media(max-width:460px){.flow{grid-template-columns:1fr}}

/* ══════════ 3. 三层合规架构 ══════════ */
.layers{display:grid;gap:.7rem}
.layer{
  display:grid;grid-template-columns:3.4rem 1fr 6.5rem;align-items:center;gap:1rem;
  padding:.9rem 1rem;border-radius:var(--r-md);cursor:default;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.075);
  transition:.35s var(--ease);
}
.layer:hover{transform:translateX(4px);background:rgba(232,106,37,.09);
  border-color:rgba(232,106,37,.3)}
.layer__k{
  display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:12px;
  font-family:var(--font-num);font-size:1.05rem;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--k),var(--k2));
  box-shadow:0 10px 24px -12px var(--k2)
}
.layer__b h4{margin:0 0 .22rem;font-size:.9rem;font-weight:620;color:var(--sand-050)}
.layer__b p{font-size:.76rem;line-height:1.55;color:var(--sand-400)}
.layer__b em{display:block;margin-top:.3rem;font-style:normal;font-size:.68rem;
  color:var(--gold);letter-spacing:.02em;opacity:.85}
.layer__r{text-align:center}
.layer__r span{display:block;font-size:.66rem;color:var(--sand-600);margin-bottom:.25rem}
.layer__r b{font-size:.8rem;font-weight:650;padding:.22rem .55rem;border-radius:999px;
  display:inline-block;background:var(--rk-bg);color:var(--rk);border:1px solid var(--rk-bd)}
.rk--hi{--rk:#e0685c;--rk-bg:rgba(224,104,92,.12);--rk-bd:rgba(224,104,92,.32)}
.rk--md{--rk:#e8a33a;--rk-bg:rgba(232,163,58,.12);--rk-bd:rgba(232,163,58,.32)}
.rk--lo{--rk:#5f9e93;--rk-bg:rgba(95,158,147,.12);--rk-bd:rgba(95,158,147,.32)}
@media(max-width:640px){
  .layer{grid-template-columns:2.6rem 1fr;gap:.75rem}
  .layer__k{width:2.6rem;height:2.6rem;font-size:.85rem}
  .layer__r{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:.5rem}
  .layer__r span{margin:0}
}

/* ══════════ 4. 分组柱状图 ══════════ */
.gbar-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gbar rect.bar{transition:opacity .25s ease,filter .25s ease;cursor:pointer}
.gbar:hover rect.bar{opacity:.42}
.gbar rect.bar:hover{opacity:1;filter:brightness(1.2)}
.bar-grow{transform:scaleY(0);transform-origin:center bottom;
  transition:transform 1s var(--ease)}
.is-drawn .bar-grow{transform:scaleY(1)}
.is-drawn .bar-grow:nth-child(2){transition-delay:.08s}
.is-drawn .bar-grow:nth-child(3){transition-delay:.16s}

/* ══════════ 5. 折线 / 面积图 ══════════ */
.ln-path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease)}
.is-drawn .ln-path{stroke-dashoffset:0}
.ln-area{opacity:0;transition:opacity .9s ease .5s}
.is-drawn .ln-area{opacity:.16}
.ln-dot{opacity:0;transition:opacity .4s ease}
.is-drawn .ln-dot{opacity:1}
.ln-dot circle{cursor:pointer;transition:r .2s ease}
.ln-dot circle:hover{r:6}
.zero-line{stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:5 4}

/* ══════════ 6. 堆叠条形图 ══════════ */
.stk{display:grid;gap:1.05rem}
.stk__row{display:grid;gap:.4rem}
.stk__hd{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem}
.stk__hd b{color:var(--sand-050);font-weight:600}
.stk__hd span{font-family:var(--font-num);color:var(--sand-400);font-size:.78rem}
.stk__tr{display:flex;height:30px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.stk__sg{
  width:0;background:var(--k);position:relative;cursor:pointer;
  transition:width 1.1s var(--ease),filter .25s ease;
  display:grid;place-items:center;overflow:hidden
}
.is-drawn .stk__sg{width:calc(var(--p) * 1%)}
.stk__sg:hover{filter:brightness(1.25)}
.stk__sg em{font-style:normal;font-size:.66rem;font-weight:650;color:rgba(255,255,255,.92);
  white-space:nowrap;opacity:0;transition:opacity .4s ease .9s}
.is-drawn .stk__sg em{opacity:1}
.stk__tr:hover .stk__sg{filter:brightness(.72)}
.stk__tr .stk__sg:hover{filter:brightness(1.25)}

/* ══════════ 7. 敏感性双轴（龙卷风） ══════════ */
.chart--wide.sens{padding:1.1rem 1.3rem 1rem}
.chart--wide.sens .chart__hd{margin-bottom:.7rem;padding-bottom:.5rem}
.chart--wide.sens .chart__ttl{font-size:.9rem}
.chart--wide.sens .chart__sub{font-size:.72rem}
.chart--wide.sens .chart__cap{margin-top:.7rem;font-size:.73rem;line-height:1.5}
.sens rect.sbar{transition:filter .25s ease,opacity .25s ease;cursor:pointer}
.sens:hover rect.sbar{opacity:.45}
.sens rect.sbar:hover{opacity:1;filter:brightness(1.2)}
.sens .thr{stroke:var(--jade);stroke-width:1.4;stroke-dasharray:6 4;opacity:.75}
.sens .thr-t{font-size:10px;fill:var(--jade)}

/* ══════════ 8. 四阶段路线 ══════════ */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;position:relative}
.phases::before{
  content:"";position:absolute;left:0;right:0;top:1.35rem;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-hi),rgba(95,158,147,.7))
}
.ph{position:relative;z-index:1;text-align:center;cursor:default}
.ph__d{
  width:2.7rem;height:2.7rem;margin:0 auto .7rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-num);font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--k),var(--k2));border:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 26px -12px var(--k2);
  transition:transform .35s var(--spring)
}
.ph:hover .ph__d{transform:scale(1.14)}
.ph__t{display:block;font-size:.85rem;font-weight:620;color:var(--sand-050);margin-bottom:.15rem}
.ph__w{display:block;font-family:var(--font-num);font-size:.72rem;color:var(--gold);margin-bottom:.4rem}
.ph__g{font-size:.71rem;line-height:1.5;color:var(--sand-400);
  padding:.5rem .55rem;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
@media(max-width:700px){
  .phases{grid-template-columns:1fr 1fr;gap:1.1rem .6rem}
  .phases::before{display:none}
}

/* ══════════ 9. 甘特图 ══════════ */
.gantt{display:grid;gap:.5rem}
.gantt__ax{display:grid;grid-template-columns:9.5rem 1fr;gap:.8rem;
  font-size:.68rem;color:var(--sand-600);margin-bottom:.15rem}
.gantt__ax div{display:flex;justify-content:space-between}
.gantt__r{display:grid;grid-template-columns:9.5rem 1fr;gap:.8rem;align-items:center;cursor:default}
.gantt__lb{font-size:.76rem;color:var(--sand-200);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-ellipsis}
.gantt__tr{position:relative;height:22px;border-radius:6px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);overflow:hidden}
.gantt__tr::before,.gantt__tr::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--c-grid)}
.gantt__tr::before{left:33.33%}
.gantt__tr::after{left:66.66%}
.gantt__b{
  position:absolute;top:3px;bottom:3px;left:calc(var(--s) * 1%);width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--k),var(--k2));
  box-shadow:0 0 14px -4px var(--k2);
  transition:width .95s var(--ease);
  display:grid;place-items:center;overflow:hidden
}
.is-drawn .gantt__b{width:calc(var(--w) * 1%)}
.gantt__b em{font-style:normal;font-size:.63rem;color:rgba(255,255,255,.95);font-weight:600;
  white-space:nowrap;opacity:0;transition:opacity .35s ease .85s}
.is-drawn .gantt__b em{opacity:1}
.gantt__r:hover .gantt__b{filter:brightness(1.2)}
@media(max-width:600px){
  .gantt__r,.gantt__ax{grid-template-columns:6.2rem 1fr;gap:.5rem}
  .gantt__lb{font-size:.7rem}
}

/* ══════════ 10. 风险热力图 ══════════ */
.heat{display:grid;grid-template-columns:2.2rem 1fr;gap:.5rem}
.heat__yl{display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.7rem;color:var(--sand-600);letter-spacing:.1em}
.heat__g{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(72px,auto));gap:.4rem}
.heat__c{
  position:relative;border-radius:10px;padding:.5rem;display:grid;align-content:flex-start;gap:.28rem;
  border:1px solid rgba(255,255,255,.07);transition:.3s var(--ease);
  background:rgba(255,255,255,calc(.02 + var(--h) * .012))
}
.heat__c[data-lv="3"]{background:rgba(224,104,92,.15);border-color:rgba(224,104,92,.3)}
.heat__c[data-lv="2"]{background:rgba(232,163,58,.11);border-color:rgba(232,163,58,.26)}
.heat__c[data-lv="1"]{background:rgba(95,158,147,.09);border-color:rgba(95,158,147,.22)}
.heat__c:hover{transform:scale(1.03);z-index:2;box-shadow:0 14px 32px -16px rgba(0,0,0,.8)}
.heat__tag{
  font-size:.7rem;line-height:1.4;padding:.26rem .45rem;border-radius:6px;
  background:rgba(0,0,0,.24);color:var(--sand-200);cursor:default;
  border-left:2px solid var(--tk,var(--gold))}
.heat__xl{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  font-size:.7rem;color:var(--sand-600);text-align:center;margin-top:.2rem}
@media(max-width:560px){
  .heat__g{grid-template-rows:repeat(3,minmax(84px,auto))}
  .heat__tag{font-size:.63rem}
}

/* ══════════ 11. 雷达图（两栏：图表 | 数据列表） ══════════ */
.radar-wrap{
  display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);gap:1.2rem;
  align-items:start;width:100%}
.radar__chart{display:flex;justify-content:center;align-items:center}
.radar svg{width:100%;max-width:320px;height:auto;max-height:260px}  /* 缩小雷达图 */
.radar__side{display:flex;flex-direction:column}
.radar__data{width:100%}
.radar .rd-grid{fill:none;stroke:var(--c-grid);stroke-width:1}
.radar .rd-spoke{stroke:rgba(255,255,255,.09);stroke-width:1}
.radar .rd-poly{
  fill:rgba(232,106,37,.18);stroke:var(--gold);stroke-width:2;stroke-linejoin:round;
  transform:scale(.02);transform-origin:center;transition:transform 1.2s var(--spring)}
.is-drawn .radar .rd-poly{transform:scale(1)}
.radar .rd-pt{fill:var(--gold-hi);opacity:0;transition:opacity .5s ease .7s;cursor:pointer}
.is-drawn .radar .rd-pt{opacity:1}
.radar .rd-pt:hover{fill:#fff}
.radar .rd-lb{font-size:12px;fill:var(--sand-400)}
.rd-list{display:grid;gap:.18rem;width:100%}
.rd-list li{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center;
  font-size:12px;color:var(--sand-400);padding:.1rem 0;
  border-bottom:1px solid rgba(255,255,255,.03)}
.rd-list b{font-family:var(--font-num);font-weight:650;font-size:12px;color:var(--k)}
@media(max-width:820px){.radar-wrap{grid-template-columns:1fr;gap:1rem}}

/* ══════════ 12. 利益相关方价值交换 ══════════ */
.exch{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.exch__c{
  padding:1rem;border-radius:var(--r-md);cursor:default;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  transition:.35s var(--ease)
}
.exch__c:hover{transform:translateY(-4px);border-color:var(--k);
  background:rgba(232,106,37,.07);box-shadow:0 18px 38px -22px var(--k)}
.exch__h{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem;
  padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.exch__ic{width:1.9rem;height:1.9rem;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--k),var(--k2));flex-shrink:0}
.exch__ic svg{width:14px;height:14px}
.exch__h b{font-size:.87rem;font-weight:620;color:var(--sand-050)}
.exch__g{display:grid;gap:.55rem}
.exch__i{font-size:.74rem;line-height:1.5;padding-left:.85rem;position:relative;color:var(--sand-400)}
.exch__i::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--k)}
.exch__i b{display:block;color:var(--sand-200);font-weight:600;font-size:.76rem}
.exch__i--out::before{background:var(--jade)}
.exch__ttl{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;margin-bottom:-.35rem;
  font-size:.73rem;color:var(--sand-600);letter-spacing:.05em}
.exch__ttl::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.07)}
@media(max-width:800px){.exch{grid-template-columns:1fr}}

/* ── 工具提示 ─────────────────────────────── */
/* 联系区 5 步流程：避免被价值链 .flow(4列) 覆盖 */
.flow--steps{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.flow--steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.flow--steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flow--steps{grid-template-columns:1fr}}
.ctip{
  position:fixed;z-index:120;pointer-events:none;opacity:0;
  padding:.45rem .68rem;border-radius:9px;font-size:.74rem;line-height:1.45;
  background:rgba(14,18,22,.94);color:var(--sand-050);
  border:1px solid rgba(232,106,37,.35);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
  transform:translate(-50%,-118%);transition:opacity .16s ease;white-space:nowrap
}
.ctip.is-on{opacity:1}
.ctip b{color:var(--gold-hi);font-family:var(--font-num)}

/* ── 降级 ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hbar__tr i,.stk__sg,.gantt__b,.ln-path,.bar-grow,.rd-poly{transition:none!important}
  .chart .ln-path{stroke-dashoffset:0}
  .chart .bar-grow{transform:scaleY(1)}
  .chart .rd-poly{transform:scale(1)}
}