/* =========================================================================
   JuMI 业务地图全览 · 样式
   -------------------------------------------------------------------------
   复用 app.css 的设计 token（--brand / --primary / --ink / --ok / --warn 等），
   仅用 token，不引入新主色：橘=业务动作与结果，蓝紫=智能协作与流动，绿=经营资源。

   视觉层级（四层分明）：
     1) 版面底色（细点阵）→ 2) 段底板（淡色圆角）+ 段头 → 3) 节点卡片 → 4) 文字
   字体：统一系统字体栈，显式 -webkit-font-smoothing:auto（覆盖全局 antialiased），
        标题只用 600/700 字重，中文不加 letter-spacing。
   ========================================================================= */

.bizmap {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: auto;
}

/* ---------- 头部 ---------- */
.bm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.bm-head h2 { font-size: 15px; font-weight: 600; }
.bm-head p { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; max-width: 640px; line-height: 1.6; }
.bm-head .row { margin: 0; }

/* ---------- 地图区 ---------- */
.bm-map-wrap {
  position: relative; width: 100%;
  background-color: #FBFCFE;
  background-image: radial-gradient(rgba(32,41,56,.035) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
}
.bm-svg { width: 100%; height: auto; display: block; -webkit-font-smoothing: auto; }
/* 文字统一：显式字体栈 + 关闭描边，避免继承全局 svg 的 stroke 造成糊边 */
.bm-svg text {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: auto; stroke: none;
}

/* ---------- 段底板 + 段头 ---------- */
.bm-panel-box { stroke: none; }
.bm-tone-entry .bm-panel-box { fill: rgba(32,41,56,.035); }
.bm-tone-resource .bm-panel-box { fill: rgba(47,138,104,.06); }
.bm-tone-event .bm-panel-box { fill: rgba(220,90,34,.06); }
.bm-tone-agent .bm-panel-box { fill: rgba(83,109,255,.06); }

.bm-panel-num { stroke: none; }
.bm-tone-entry .bm-panel-num { fill: rgba(107,118,138,.16); }
.bm-tone-resource .bm-panel-num { fill: rgba(47,138,104,.16); }
.bm-tone-event .bm-panel-num { fill: rgba(220,90,34,.16); }
.bm-tone-agent .bm-panel-num { fill: rgba(83,109,255,.16); }

.bm-panel-num-text { font-size: 11px; font-weight: 700; }
.bm-tone-entry .bm-panel-num-text { fill: #6B768A; }
.bm-tone-resource .bm-panel-num-text { fill: #2F8A68; }
.bm-tone-event .bm-panel-num-text { fill: #DC5A22; }
.bm-tone-agent .bm-panel-num-text { fill: #536DFF; }

.bm-panel-title { font-size: 13.5px; font-weight: 600; fill: #202938; }
.bm-panel-sub { font-size: 11px; font-weight: 400; fill: #6B768A; }

/* ---------- 节点卡片 ---------- */
.bm-node { cursor: pointer; }
.bm-node .bm-box {
  fill: #fff; stroke: #E5E8EE; stroke-width: 1.25;
  filter: drop-shadow(0 1px 3px rgba(32,41,56,.06));
  transition: stroke .2s, filter .2s;
}
.bm-node:hover .bm-box { stroke: #536DFF; filter: drop-shadow(0 6px 14px rgba(32,41,56,.13)); }
.bm-node:focus-visible { outline: none; }
.bm-node:focus-visible .bm-box { stroke: #536DFF; stroke-width: 2; }
.bm-node.is-active .bm-box { stroke-width: 1.75; }
.bm-node.is-active.bm-cat-resource .bm-box { stroke: #2F8A68; filter: drop-shadow(0 6px 16px rgba(47,138,104,.22)); }
.bm-node.is-active.bm-cat-event .bm-box { stroke: #DC5A22; filter: drop-shadow(0 6px 16px rgba(220,90,34,.22)); }
.bm-node.is-active.bm-cat-agent .bm-box { stroke: #536DFF; filter: drop-shadow(0 6px 16px rgba(83,109,255,.22)); }
.bm-node.is-active.bm-cat-outcome .bm-box { stroke: #202938; filter: drop-shadow(0 6px 16px rgba(32,41,56,.18)); }

/* 类别色：芯片底色 + 图标前景色（currentColor 传给 symbol 的描边） */
.bm-chip { stroke: none; }
.bm-cat-resource { color: #2F8A68; }
.bm-cat-resource .bm-chip { fill: #E6F1EB; }
.bm-cat-event { color: #DC5A22; }
.bm-cat-event .bm-chip { fill: #FCF0E9; }
.bm-cat-agent { color: #536DFF; }
.bm-cat-agent .bm-chip { fill: #EDF0FF; }
.bm-cat-outcome { color: #202938; }
.bm-cat-outcome .bm-chip { fill: #EEF1F6; }

/* 节点文字 */
.bm-svg .bm-title { font-size: 13px; font-weight: 600; fill: #202938; }
.bm-cap-dot { stroke: #fff; stroke-width: 1.5; }

/* ---------- JuMI 核心卡（橙色主焦点） ---------- */
.bm-is-core { color: #fff; }
.bm-is-core .bm-box {
  fill: url(#bm-hub-grad); stroke: rgba(255,255,255,.32); stroke-width: 1;
  filter: drop-shadow(0 10px 24px rgba(220,90,34,.32));
  transition: filter .2s;
}
.bm-is-core:hover .bm-box { filter: drop-shadow(0 14px 30px rgba(220,90,34,.42)); }
.bm-is-core .bm-chip { fill: rgba(255,255,255,.18); }
.bm-core-t1 { font-size: 16px; font-weight: 700; fill: #fff; }
.bm-core-t2 { font-size: 12px; font-weight: 500; fill: rgba(255,255,255,.88); }

/* ---------- 边 ---------- */
.bm-edge {
  fill: none; stroke: #B3BECE; stroke-width: 1.25; stroke-opacity: .52;
  stroke-linecap: round; transition: stroke .25s, stroke-width .25s, stroke-opacity .25s;
}
.bm-edge.is-active {
  stroke: #536DFF; stroke-width: 2.2; stroke-opacity: 1;
  stroke-dasharray: 7 6; animation: bm-flow 1.1s linear infinite;
}
.bm-edge.is-loop { stroke-opacity: .38; stroke-dasharray: 5 5; }
.bm-edge.is-loop.is-active { stroke: #DC5A22; }
@keyframes bm-flow { to { stroke-dashoffset: -26; } }

/* 段间流向箭头 */
.bm-chevron { fill: none; stroke: #C3CBD8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 图例 ---------- */
.bm-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 4px 2px; align-items: center; }
.bm-legend .bm-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.bm-leg .bm-swatch { width: 10px; height: 10px; border-radius: 3px; border: 0; }
.bm-capkey { display: inline-flex; align-items: center; gap: 14px; padding-left: 16px; border-left: 1px solid var(--line); }
.bm-cap-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.bm-cap-item .bm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bm-dot.ok { background: #2F8A68; }
.bm-dot.warn { background: #B56A16; }
.bm-legend .bm-disc { flex: 1 0 100%; font-size: 11px; color: var(--ink-3); line-height: 1.6; padding-top: 2px; }

/* ---------- 详情面板 ---------- */
.bm-detail { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 18px 20px; }
.bm-detail[hidden] { display: none; }
.bm-detail .bm-d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bm-detail .bm-d-title { font-size: 16px; font-weight: 600; }
.bm-detail .bm-d-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.bm-detail dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px 14px; margin: 0; }
.bm-detail dt { color: var(--ink-3); font-size: 12.5px; }
.bm-detail dd { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.6; }
.bm-detail .bm-d-note { margin-top: 12px; padding: 10px 12px; background: var(--inset); border-radius: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.bm-detail .bm-d-close { margin-left: auto; }

/* 状态 badge（复用规范五类） */
.bm-badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.bm-badge.ok { background: var(--ok-soft); color: var(--ok); }
.bm-badge.warn { background: var(--warn-soft); color: var(--warn); }
.bm-badge.muted { background: #EEF1F6; color: var(--ink-2); }
.bm-badge.info { background: var(--primary-soft); color: var(--primary); }

/* ---------- 播放控制条（宣传模式 / 嵌入模式通用） ---------- */
.bm-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bm-controls .bm-seek { flex: 1; min-width: 160px; height: 6px; border-radius: 999px; background: var(--inset); position: relative; cursor: pointer; }
.bm-controls .bm-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--brand); width: 0; }
.bm-controls .bm-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bm-stages { display: flex; gap: 6px; }
.bm-stages button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink-3); font-size: 11px; cursor: pointer; }
.bm-stages button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 宣传模式全屏层 ---------- */
.bm-promo { position: fixed; inset: 0; z-index: 1000; background: #0E1116; display: flex; align-items: center; justify-content: center; flex-direction: column; --bm-bar-h: 96px; }
.bm-promo[hidden] { display: none; }
.bm-promo .bm-stage { position: relative; width: min(96vw, calc(96vh * 16 / 9)); aspect-ratio: 16 / 9; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bm-promo.is-portrait { --bm-bar-h: 150px; }
.bm-promo.is-portrait .bm-stage { width: min(94vw, calc(94vh * 9 / 16)); aspect-ratio: 9 / 16; }
.bm-promo .bm-stage .bizmap { height: 100%; }
.bm-promo .bm-stage .bm-map-wrap { height: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; padding-bottom: var(--bm-bar-h); box-sizing: border-box; }
.bm-promo .bm-stage .bm-svg { flex: 1; }
.bm-promo .bm-stage .bm-legend { display: none; }
.bm-promo .bm-narration { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bm-bar-h); box-sizing: border-box; padding: 12px 24px; background: rgba(14,17,22,.93); color: #fff; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.bm-promo .bm-narration .bm-n-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bm-promo .bm-narration .bm-n-right { display: flex; align-items: center; gap: 18px; }
.bm-promo .bm-narration .bm-n-keys { display: inline-flex; align-items: center; gap: 14px; }
.bm-promo .bm-narration .bm-n-keys .bm-cap-item { color: rgba(255,255,255,.72); font-size: 11.5px; }
.bm-promo .bm-narration .bm-n-stage { font-size: 12px; color: #FFC7A8; text-transform: none; }
.bm-promo .bm-narration .bm-n-text { font-size: clamp(15px, 2.2vw, 22px); font-weight: 600; margin-top: 6px; line-height: 1.5; }
.bm-promo .bm-narration .bm-n-sub { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 4px; }
.bm-promo .bm-narration .bm-n-brand { font-size: 13px; color: #FFC7A8; font-weight: 600; white-space: nowrap; }
.bm-promo.is-portrait .bm-narration { padding: 12px 18px; }
.bm-promo.is-portrait .bm-narration .bm-n-text { font-size: 16px; line-height: 1.45; margin-top: 5px; }
.bm-promo.is-portrait .bm-narration .bm-n-sub { font-size: 12px; margin-top: 3px; }
.bm-promo.is-portrait .bm-narration .bm-n-top { gap: 10px; }
.bm-promo.is-portrait .bm-narration .bm-n-right { gap: 10px; }
.bm-promo.is-portrait .bm-narration .bm-n-keys { gap: 9px; }
.bm-promo.is-portrait .bm-narration .bm-n-keys .bm-cap-item { font-size: 10.5px; }
.bm-promo.is-portrait .bm-narration .bm-n-stage { font-size: 11px; }
.bm-promo .bm-bar { width: 100%; max-width: min(96vw, calc(96vh * 16 / 9)); display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 0 6px; }
.bm-promo.is-portrait .bm-bar { max-width: min(94vw, calc(94vh * 9 / 16)); }
.bm-promo .bm-bar .bm-controls { flex: 1; margin: 0; }
.bm-promo .bm-bar .bm-controls .bm-seek { background: rgba(255,255,255,.18); }
.bm-promo .bm-bar .bm-controls .bm-seek-fill { background: var(--brand); }
.bm-promo .bm-bar .btn { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.bm-promo .bm-bar .btn:hover { background: rgba(255,255,255,.14); }
.bm-promo .bm-bar .bm-stages button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7); }
.bm-promo .bm-bar .bm-stages button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bm-promo .bm-time { color: rgba(255,255,255,.7); }

/* 宣传模式控制条内的比例 / 退出按钮 */
.bm-promo .bm-exit { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.bm-promo .bm-exit:hover { background: rgba(255,255,255,.16); }
.bm-promo .bm-aspect { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.bm-promo .bm-aspect:hover { background: rgba(255,255,255,.16); }

/* ---------- 纵向卡片流（移动端 / 宣传竖版共用同一套渲染） ---------- */
.bm-flow-mobile { display: none; }
.bm-fs-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.bm-fs-head:first-child { margin-top: 0; }
.bm-fs-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700;
}
.bm-fs-num.core { background: var(--brand); color: #fff; }
.bm-fs-title { font-size: 13.5px; font-weight: 600; }
.bm-fs-sub { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.bm-flow-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: #fff; }
.bm-flow-card .bm-fc-head { display: flex; align-items: center; gap: 8px; }
.bm-flow-card .bm-fc-title { font-size: 14px; font-weight: 600; }
.bm-flow-card .bm-fc-body { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.bm-flow-card .bm-fc-body[hidden] { display: none; }
.bm-flow-card.is-active { border-color: var(--brand); box-shadow: 0 2px 10px rgba(220,90,34,.13); }
.bm-flow-card.is-active .bm-fc-title { color: var(--brand); }

@media (max-width: 860px) {
  .bm-map-wrap .bm-svg, .bm-map-wrap .bm-legend { display: none; }
  .bm-flow-mobile { display: block; margin-top: 10px; }
}

/* ---------- 宣传模式 9:16 竖版 ----------
   横向版面（1120 宽）在竖屏里整图缩小后文字过小，故竖版改走纵向卡片流，
   与移动端复用同一套渲染，字号足够大，并随五幕推进自动高亮与滚动。 */
.bm-promo.is-portrait .bm-stage .bizmap { display: flex; flex-direction: column; height: 100%; }
.bm-promo.is-portrait .bm-stage .bm-map-wrap { display: none; }
.bm-promo.is-portrait .bm-stage .bm-flow-mobile {
  display: block; flex: 1; overflow-y: auto; position: relative;
  margin: 0; padding: 14px 16px 108px; box-sizing: border-box;
}
.bm-promo.is-portrait .bm-stage .bm-fs-title { font-size: 15px; }
.bm-promo.is-portrait .bm-stage .bm-fc-title { font-size: 15px; }
.bm-promo.is-portrait .bm-stage .bm-fs-sub { font-size: 12px; }

/* ---------- 降级：低性能 / 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bm-edge.is-active { animation: none; }
  .bm-node .bm-box { transition: none; }
}
.bm-loading { padding: 40px; text-align: center; color: var(--ink-3); font-size: 13px; }