/* Лестница уровней (15+ уровней) — StageBadge, StageNote, LevelItem, StageBar
   Цвет ступени задаётся модификатором --s1 / --s2 / --s3. */
.vb-s1 { --stage: var(--vb-stage-1); --stage-tint: var(--vb-stage-1-tint); }
.vb-s2 { --stage: var(--vb-stage-2); --stage-tint: var(--vb-stage-2-tint); }
.vb-s3 { --stage: var(--vb-stage-3); --stage-tint: var(--vb-stage-3-tint); }

.vb-stage-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--stage, var(--vb-stage-1)); color: #fff;
  font-family: var(--font-brand); font-weight: 700; font-size: 15px; line-height: 1;
}
.vb-stage-note { background: var(--stage-tint, var(--vb-stage-1-tint)); border-radius: var(--r-md); padding: 16px 18px 18px; }
.vb-stage-note__label { margin-bottom: 9px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--stage, var(--vb-stage-1)); }
.vb-stage-note__text { font-size: 14px; line-height: 1.5; color: var(--vb-ink-2); }

.vb-level { display: flex; gap: 14px; align-items: flex-start; }
.vb-level__roman { flex: none; min-width: 42px; font-family: var(--font-brand); font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--stage, var(--vb-stage-1)); }
.vb-level__text { font-size: 14px; line-height: 1.5; color: var(--vb-ink-2); }

.vb-stage-bar__track { display: flex; height: 7px; border-radius: var(--r-pill); overflow: hidden; }
.vb-stage-bar__seg { flex: var(--flex, 1); background: var(--stage); }
.vb-stage-bar__labels { display: flex; margin-top: 10px; }
.vb-stage-bar__labels span { flex: var(--flex, 1); font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--vb-ink-3); text-align: center; }
.vb-stage-bar__labels span:first-child { text-align: left; }
.vb-stage-bar__labels span:last-child  { text-align: right; }