/* ============================================================
   screens.css — 仅补充 components.css 未覆盖的少量排版类
   规则：不覆盖 components.css 任何已有类；颜色全部取 tokens.css 变量，
   文字色沿用 components.css 已出现的色值（#C97A1E / #3D7FB8 / #6B625C）。
   ============================================================ */

.sec-title {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  margin: 16px 0 8px; padding-left: 2px;
}
.note {
  font-size: 11.5px; line-height: 1.5;
  padding: 7px 10px; border-radius: 9px; margin-top: 9px;
}
.note-warn { background: var(--yellow-soft); color: #C97A1E; }
.note-info { background: var(--blue-soft); color: #3D7FB8; }
.note-soft { background: var(--primary-soft); color: #B4674B; }

.hr { height: 1px; background: var(--line); margin: 12px 0; }
.mt-sm { margin-top: 8px; }
.center { text-align: center; }

.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

.txt { font-size: 12px; color: #6B625C; line-height: 1.6; }
.txt-sm { font-size: 11px; color: var(--text-2); line-height: 1.6; }
.txt-sm b { color: var(--text); }

.viz-dot { transform: translateX(-50%); }
.viz-dot.m1 { left: 6%; }
.viz-dot.m2 { left: 38%; }
.viz-dot.m3 { left: 62%; }
.viz-dot.m4 { left: 88%; }
.viz-name.n1 { left: 6%; top: 24px; }
.viz-name.n2 { left: 38%; top: 62px; }
.viz-name.n3 { left: 62%; top: 24px; }
.viz-name.n4 { left: 88%; top: 62px; }
.viz-tick.t0 { left: 6%; }
.viz-tick.t1 { left: 50%; }
.viz-tick.t2 { left: 94%; }