.bfield-stage { padding-bottom: 24px; }

.mode-control { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; border: 1px solid var(--line); }
.mode-option { min-width: 0; min-height: 40px; padding: 8px 5px; border: 0; }
.mode-option + .mode-option { border-left: 1px solid var(--line); }
.mode-option.active { color: #08211f; background: var(--cyan); }

.speed-control { display: flex; border: 1px solid var(--line); }
.speed-option { min-width: 52px; min-height: 40px; padding: 9px 10px; border: 0; }
.speed-option + .speed-option { border-left: 1px solid var(--line); }
.speed-option.active { color: #08211f; background: var(--cyan); }

.bfield-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--line); color: #c9d8d5; font-size: 12px; line-height: 1.5; }
.bfield-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }

.bfield-canvas { min-width: 0; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.bfield-scene { display: block; width: 100%; height: auto; }
.field-symbol { fill: #2c4d53; font: 13px "DM Mono", monospace; }
.world-grid { stroke: #203d44; stroke-width: 1; stroke-dasharray: 2 7; }
.orbit-track { fill: rgba(101, 230, 209, .025); stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 7 6; }
.swept-arc { fill: none; stroke: var(--yellow); stroke-width: 4.5; opacity: .85; }
.radius-line { stroke: #66817e; stroke-width: 1.3; stroke-dasharray: 5 5; }
.center-point { fill: var(--cyan); }
.entry-point { fill: var(--panel-deep); stroke: var(--orange); stroke-width: 2; }
.particle { fill: var(--orange); stroke: #fff1d8; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 173, 104, .65)); }
.vector { stroke-width: 2.4; }
.velocity-vector { stroke: var(--cyan); }
.force-vector { stroke: var(--orange); }
.vector-label { font: 500 13px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 5px; stroke-linejoin: round; }
.velocity-label { fill: var(--cyan); }
.force-label { fill: var(--orange); }
.scale-note { fill: #8fa9a7; font: 11px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 4px; }

.bfield-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bfield-metrics .metric-value { font-size: 18px; line-height: 1.4; }

@media (max-width: 820px) {
  .bfield-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bfield-metrics .metric:nth-child(n+3) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
  .bfield-metrics .metric:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  .bfield-status span { display: block; flex-basis: 100%; }
  .vector-label { font-size: 16px; stroke-width: 6px; }
  .scale-note { font-size: 13px; }
  .field-symbol { font-size: 15px; }
  .bfield-scene .annotation { font-size: 13px; }
  .bfield-metrics { grid-template-columns: 1fr; }
  .bfield-metrics .metric, .bfield-metrics .metric:nth-child(n) { margin-top: 0; padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .bfield-metrics .metric:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .stage-actions .speed-control { flex: 0 0 auto; }
  .stage-actions .speed-option { flex: 0 0 auto; min-width: 46px; }
}