@scope (#overview-widget){

    :root {
      --ink: #18202a;
      --muted: #667385;
      --line: #d9e0ea;
      --page: #f5f7fa;
      --panel: #ffffff;
      --green-bg: #eaf4ed;
      --green-line: #4d8a63;
      --warn-bg: #fff5e7;
      --warn-line: #c77c25;
      --blue-bg: #eaf1fb;
      --blue-line: #527eb8;
      --soft-bg: #f3f5f8;
      --soft-line: #9aa5b4;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      overflow-x: hidden;
    }
    header {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: end;
      padding: 22px 28px 16px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }
    h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
    .subtitle { margin-top: 7px; color: var(--muted); font-size: 13px; max-width: 820px; line-height: 1.5; }
    .summary { display: grid; grid-template-columns: repeat(4, 124px); gap: 10px; }
    .summary-card { background: #fbfcfe; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
    .summary-card b { display: block; font-size: 20px; line-height: 1; }
    .summary-card span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
    .app { min-height: calc(100vh - 94px); }
    main { padding: 30px 20px 26px; }
    .phase4-panel {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .phase4-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: end;
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfe;
    }
    .phase4-title { font-size: 15px; font-weight: 780; }
    .phase4-note { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .phase4-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .phase4-stat { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 9px; font-size: 12px; color: #405066; white-space: nowrap; }
    .phase4-controls { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
    .phase4-controls label { color: var(--muted); font-size: 12px; }
    .phase4-select { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 0 8px; font-size: 12px; }
    .progress-panel {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .progress-block {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      min-width: 0;
    }
    .progress-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
      padding: 13px 14px 10px;
      background: #fbfcfe;
      border-bottom: 1px solid var(--line);
    }
    .progress-title { font-size: 15px; font-weight: 780; }
    .progress-note { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .progress-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .progress-stat { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 8px; font-size: 12px; color: #405066; white-space: nowrap; }
    .progress-body { padding: 12px 14px 14px; }
    .mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
    .mini-card { border: 1px solid #edf0f4; border-radius: 8px; padding: 8px 9px; background: #fbfcfe; min-width: 0; }
    .mini-label { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mini-value { margin-top: 4px; color: #213043; font-size: 16px; font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progress-list { display: grid; gap: 7px; }
    .progress-row { border: 1px solid #edf0f4; border-radius: 8px; padding: 8px 9px; background: #fff; min-width: 0; }
    .progress-row-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #334155; font-weight: 720; }
    .progress-row-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .progress-row-meta { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .frontline-panel {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .pulse-block,
    .quadrant-block {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      min-width: 0;
    }
    .front-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
      padding: 13px 14px 10px;
      background: #fbfcfe;
      border-bottom: 1px solid var(--line);
    }
    .front-title { font-size: 15px; font-weight: 780; }
    .front-note { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .front-pill { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 8px; color: #405066; font-size: 12px; white-space: nowrap; }
    .pulse-body { padding: 11px 12px 12px; display: grid; gap: 7px; }
    .pulse-row {
      display: grid;
      grid-template-columns: 84px minmax(76px, 1fr) 58px 42px;
      gap: 8px;
      align-items: center;
      border: 1px solid #edf0f4;
      border-radius: 8px;
      padding: 7px 8px;
      background: #fff;
      min-width: 0;
    }
    .pulse-name { font-size: 12px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pulse-value { font-size: 13px; color: #213043; font-weight: 780; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pulse-delta { font-size: 12px; font-weight: 720; white-space: nowrap; text-align: right; }
    .pulse-tag { font-size: 11px; border-radius: 999px; padding: 3px 6px; text-align: center; background: #f3f5f8; color: #516070; }
    .tone-positive { color: #267047; }
    .tone-negative { color: #ab5a00; }
    .quadrant-grid { padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .quadrant-card { border: 1px solid #edf0f4; border-radius: 8px; background: #fff; padding: 10px 11px; min-width: 0; }
    .quadrant-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 4px; }
    .quadrant-title b { font-size: 14px; color: #263446; }
    .quadrant-title span { font-size: 11px; color: var(--muted); white-space: nowrap; }
    .quadrant-stance { color: var(--muted); font-size: 11px; line-height: 1.4; margin-bottom: 8px; }
    .evidence-list { display: grid; gap: 6px; }
    .evidence-row { display: grid; grid-template-columns: minmax(70px, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12px; min-width: 0; }
    .evidence-row span:first-child { color: #405066; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .evidence-row b { color: #213043; white-space: nowrap; }
    .evidence-meta { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .phase4-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(92px, 1fr));
      overflow-x: auto;
    }
    .year-card {
      min-width: 92px;
      min-height: 136px;
      padding: 10px 9px;
      border-right: 1px solid #edf0f4;
      background: #fff;
    }
    .year-card.empty { background: #fafbfc; color: #9aa5b4; }
    .year-card.active { outline: 2px solid #527eb8; outline-offset: -2px; background: #f3f8ff; }
    .year-title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
    .year-line { font-size: 11px; line-height: 1.35; color: #405066; margin-top: 5px; }
    .year-card.empty .year-line { color: #9aa5b4; }
    .time-panel {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto 16px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px 16px 13px;
    }
    .time-row { display: grid; grid-template-columns: 140px 1fr 110px; gap: 16px; align-items: center; }
    .time-label { color: var(--muted); font-size: 12px; }
    .time-value { color: var(--ink); font-size: 20px; white-space: nowrap; font-weight: 800; letter-spacing: 0; }
    .time-slider { width: 100%; accent-color: #527eb8; }
    .time-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 5px; }
    .time-note { color: var(--muted); font-size: 12px; text-align: right; line-height: 1.4; }
    .canvas-wrap { width: 100%; max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    svg { display: block; width: 100%; height: auto; aspect-ratio: 1580 / 870; }
    .layer-title { fill: #fff; font-size: 21px; font-weight: 760; letter-spacing: 0; }
    .layer-total { fill: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0; }
    .layer-caption { fill: rgba(255,255,255,.88); font-size: 10px; letter-spacing: 0; }
    .layer-card { cursor: pointer; }
    .layer-card path { transition: filter .15s ease, stroke .15s ease; }
    .layer-card.selected path { stroke: #1d4f88; stroke-width: 3; filter: brightness(1.05); }
    .edge { fill: none; stroke: #b7c0cc; stroke-width: 2; }
    .edge.soft { stroke: #d7dce4; stroke-width: 1.4; stroke-dasharray: 6 5; }
    .flow-label-bg { fill: #fff; stroke: #d9e0ea; rx: 8; opacity: .95; }
    .flow-label { fill: #405066; font-size: 9px; font-weight: 720; letter-spacing: 0; }
    .flow-label.missing { fill: #9a6508; }
    .node-card { cursor: pointer; }
    .node-rect { fill: var(--green-bg); stroke: var(--green-line); stroke-width: 1.7; rx: 8; }
    .node-card.missing .node-rect { fill: var(--warn-bg); stroke: var(--warn-line); }
    .node-card.role-downgraded .node-rect { fill: #fbfcfe; stroke: #aab4c2; stroke-dasharray: 5 5; }
    .node-card.selected .node-rect { stroke: #1d4f88; stroke-width: 3; }
    .node-title { fill: var(--ink); font-size: 15px; font-weight: 760; letter-spacing: 0; }
    .node-badge { fill: #516070; font-size: 11px; }
    .node-value { fill: #213043; font-size: 18px; font-weight: 780; letter-spacing: 0; }
    .node-sub { fill: #5a6878; font-size: 11px; }
    .node-ref { fill: #334155; font-size: 12px; }
    .node-card.role-downgraded .node-title { font-size: 13px; }
    .node-card.role-downgraded .node-badge { font-size: 10px; }
    .node-card.role-downgraded .node-value { font-size: 14px; }
    .node-card.role-downgraded .node-sub,
    .node-card.role-downgraded .node-ref { font-size: 10px; }
    .spark { fill: none; stroke: #4778b8; stroke-width: 1.8; }
    .spark-base { stroke: #d9e0ea; stroke-width: 1; }
    aside { border-top: 1px solid var(--line); background: #fff; padding: 18px 24px 22px; display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
    .landscape-panel { border-top: 1px solid var(--line); background: #fff; padding: 18px 24px 24px; display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
    .pie-wrap { min-width: 0; }
    .pie-chart { width: 260px; max-width: 100%; height: auto; display: block; margin: 2px auto 10px; }
    .pie-disc { width: 230px; height: 230px; max-width: 100%; border-radius: 50%; margin: 4px auto 12px; border: 1px solid #e2e8f0; }
    .pie-title { margin: 0 0 4px; font-size: 22px; letter-spacing: 0; }
    .pie-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
    .pie-legend { display: grid; gap: 6px; margin-top: 10px; }
    .legend-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; font-size: 12px; color: #334155; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
    .landscape-list { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 8px; align-content: start; }
    .detail-head { min-width: 0; }
    .detail-body { min-width: 0; display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
    .detail-title { margin: 0 0 4px; font-size: 22px; letter-spacing: 0; }
    .detail-subtitle { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
    .pill { display: inline-flex; border-radius: 999px; padding: 4px 9px; border: 1px solid var(--line); background: #fbfcfe; color: #516070; font-size: 12px; font-weight: 650; }
    .section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
    .section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
    .section h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: 0; }
    .anchor-box { border: 1px solid #edf0f4; border-radius: 8px; padding: 11px 12px; background: #fbfcfe; margin-bottom: 8px; }
    .box-label { color: #334155; font-size: 13px; }
    .box-value { margin-top: 5px; font-size: 22px; font-weight: 780; letter-spacing: 0; }
    .box-note { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .signal-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; border: 1px solid #edf0f4; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: #fbfcfe; }
    .signal-label { font-size: 13px; color: #334155; }
    .signal-value { font-size: 14px; font-weight: 740; white-space: nowrap; }
    .signal-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.45; }
    .landscape-card { border: 1px solid #edf0f4; border-radius: 8px; padding: 10px 11px; background: #fbfcfe; margin-bottom: 8px; }
    .landscape-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
    .landscape-name { font-size: 14px; font-weight: 780; color: #263446; }
    .landscape-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .metric-chip { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 6px 7px; min-width: 0; }
    .metric-chip span { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .metric-chip b { display: block; margin-top: 3px; color: #213043; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .delta.up { color: #ab5a00; }
    .delta.down { color: #267047; }
    @media (max-width: 1100px) {
      header { display: block; }
      .summary { grid-template-columns: repeat(2, minmax(120px, 1fr)); margin-top: 14px; }
      .phase4-head { display: block; }
      .phase4-stats { justify-content: flex-start; margin-top: 10px; }
      .phase4-controls { justify-content: flex-start; margin-top: 10px; }
      .progress-panel { grid-template-columns: 1fr; }
      .progress-head { display: block; }
      .progress-stats { justify-content: flex-start; margin-top: 10px; }
      .frontline-panel { grid-template-columns: 1fr; }
      .front-head { display: block; }
      .front-pill { display: inline-flex; margin-top: 8px; }
      .pulse-row { grid-template-columns: 76px minmax(74px, 1fr) 48px 32px; gap: 6px; padding: 7px 6px; }
      .pulse-tag { font-size: 10px; padding: 3px 4px; }
      .quadrant-grid { grid-template-columns: 1fr; }
      .time-row { grid-template-columns: 1fr; gap: 8px; }
      .time-note { text-align: left; }
      aside { display: block; }
      .landscape-panel { display: block; }
      .landscape-list { grid-template-columns: 1fr; margin-top: 14px; }
      .detail-body { display: block; }
    }
  

    .time-row { grid-template-columns: 140px 1fr; }
    #chainSvg { aspect-ratio: 1580 / 950; }
    .edge.circular { stroke: #4f7a67; stroke-width: 2.2; stroke-dasharray: 8 6; }
    .edge.conversion-relation { stroke: #7c5f46; stroke-width: 1.5; stroke-dasharray: 4 5; }
    .node-role { fill: #5a6878; font-size: 11px; }
    .node-card.noninteractive { cursor: default; opacity: .68; }
    .node-card.noninteractive .node-rect { stroke-dasharray: 5 4; }
    .node-card.noninteractive:hover .node-rect { filter: none; }
    .node-stage-arrow { fill: #758191; font-size: 13px; font-weight: 700; }
    .node-stage-process { fill: #6b7280; font-size: 10px; }
    .node-stage-rule { stroke: #cfd5dc; stroke-width: 1; stroke-dasharray: 3 3; }
    .landscape-panel.no-share { grid-template-columns: 1fr; }
    .landscape-panel[hidden] { display: none !important; }
    .landscape-content { min-width: 0; }
    .landscape-section + .landscape-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf0f4; }
    .landscape-section-title { margin: 0 0 8px; color: #314052; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
    .participant-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 7px; }
    .participant-card { min-width: 0; border: 1px solid #e7ebef; border-radius: 8px; padding: 9px 10px; background: #fff; }
    .participant-name { color: #17212d; font-size: 13px; font-weight: 800; }
    .participant-scope { margin-top: 4px; color: #657283; font-size: 10px; line-height: 1.45; }
    .landscape-list { margin-top: 0; }
    .landscape-panel.no-share .landscape-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .landscape-panel.no-share .landscape-card:only-child { max-width: 520px; }
    .bar-wrap { min-width: 0; }
    .bar-list { display: grid; gap: 11px; margin-top: 18px; }
    .bar-row { display: grid; grid-template-columns: minmax(82px, 1fr) 1.65fr auto; align-items: center; gap: 9px; }
    .bar-label { min-width: 0; color: #314052; font-size: 12px; line-height: 1.35; }
    .bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: #edf1f4; }
    .bar-fill { height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #557c6b, #91ad9f); }
    .bar-value { color: #17212d; font-size: 12px; font-weight: 800; white-space: nowrap; }
    .bar-metric { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
    .structure-summary { margin-top: 10px; }
    .structure-track { display: flex; width: 100%; height: 14px; overflow: hidden; border-radius: 999px; background: #edf1f4; }
    .structure-segment { height: 100%; min-width: 2px; }
    .structure-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px 12px; margin-top: 10px; }
    .structure-item { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #536171; font-size: 11px; }
    .structure-dot { width: 8px; height: 8px; border-radius: 2px; }
    .structure-item b { color: #253242; font-size: 11px; }
    .structure-note { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .landscape-card { margin-bottom: 0; }
    .landscape-head { margin-bottom: 5px; }
    .landscape-meta:empty { display: none; }
    .detail-subtitle:empty { display: none; }
    .landscape-headline { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; }
    .landscape-headline-label { color: var(--muted); font-size: 11px; }
    .landscape-headline-value { color: #17212d; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
    .landscape-secondary { margin-top: 7px; color: #596777; font-size: 12px; line-height: 1.45; }
    .landscape-takeaway { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e8edf2; color: #314052; font-size: 12px; line-height: 1.55; }
    .landscape-insight { margin: 14px 0 0; color: #314052; font-size: 13px; line-height: 1.65; }
    .landscape-method { margin-top: 14px; border-top: 1px solid #edf0f4; padding-top: 10px; color: #657283; font-size: 11px; line-height: 1.55; }
    .landscape-method summary { cursor: pointer; color: #536171; font-weight: 700; }
    .landscape-method div { margin-top: 7px; }
    @media (max-width: 1100px) {
      .participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .landscape-panel.no-share .landscape-list { grid-template-columns: 1fr; }
    }
  
}