.training-banner {
  display: flex; gap: 12px; align-items: center; margin: 12px 0; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--text);
}
.training-banner strong { color: var(--warn); white-space: nowrap; }
.training-banner span, .plan-legend { font-size: 12px; }
.plan-legend { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 12px 0; color: var(--muted); }
.plan-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.plan-dot.ok, .plan-marker.ok { background: var(--ok); }
.plan-dot.fault, .plan-marker.fault { background: var(--warn); }
.plan-dot.fire, .plan-marker.fire { background: var(--danger); }
.plan-dot.offline, .plan-marker.offline { background: var(--muted); }
.plan-scroll { max-height: 72vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.plan-stage { position: relative; min-width: 900px; line-height: 0; }
.plan-stage > img { display: block; width: 100%; height: auto; }
.plan-marker {
  position: absolute; transform: translate(-50%, -50%); width: 25px; height: 25px; padding: 0;
  border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.65); cursor: pointer; z-index: 2;
}
.plan-marker.manual { border-radius: 5px; }
.plan-marker:hover, .plan-marker:focus { outline: 3px solid #172025; z-index: 3; }
.plan-marker span {
  position: absolute; left: 50%; top: 28px; transform: translateX(-50%); padding: 2px 4px;
  border-radius: 4px; background: rgba(255,255,255,.94); color: #172025;
  font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap;
}
.plan-selected {
  display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font-size: 13px;
}
.plan-selected .primary { margin-left: auto; }
@media (max-width: 720px) {
  .training-banner { align-items: flex-start; flex-direction: column; }
  .plan-selected { align-items: stretch; flex-direction: column; }
  .plan-selected .primary { margin-left: 0; }
}