/* 关系星图（批次 7）——媒体×品牌的报道关系
   颜色只用状态色（正面绿 / 持平中性 / 负面红），不用金：
   这一页已经有火漆和标题的金，同屏 ≤3 得留给它们。 */

.sm-wrap {
    border:1px solid var(--line); border-radius:var(--r-2);
    background:var(--card); padding:var(--sp-5); margin-bottom:var(--sp-6);
}
.sm-title {
    font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700;
    margin:0; color:var(--ink); line-height:1.2;
}
.sm-lede { margin:6px 0 var(--sp-4); font-size:var(--fs-sm); color:var(--ink-3); line-height:1.8; }

.sm-stage {
    position:relative; border:1px solid var(--line-2); border-radius:var(--r-1);
    background:var(--paper); overflow:hidden;
}
#sm-canvas { display:block; width:100%; height:420px; cursor:grab; }
#sm-canvas:active { cursor:grabbing; }

.sm-legend {
    display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
    margin-top:var(--sp-3); font-size:var(--fs-xs); color:var(--ink-3);
}
.sm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.sm-dot--src { background:var(--ink-2); }
.sm-dot--brand { background:var(--ink-4); }
.sm-line { display:inline-block; width:16px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.sm-line--pos { background:var(--q-good); }
.sm-line--neu { background:var(--ink-4); }
.sm-line--neg { background:var(--q-bad); }

.sm-note { margin:var(--sp-3) 0 0; font-size: var(--fs-xs); line-height:1.9; color:var(--ink-3); }

@media (max-width:560px) {
    .sm-wrap { padding:var(--sp-4); }
    #sm-canvas { height:320px; }
    .sm-title { font-size:var(--fs-xl); }
}