.flux-controls { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--tui-border); border-radius: 6px; }
.flux-controls legend { width: auto; padding: 0 .4rem; font-size: .85em; }
.flux-slice-controls, .flux-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.flux-slice-controls { margin-bottom: .75rem; }
.flux-slice-controls input { flex: 1; min-width: 100px; width: auto; margin: 0; }
.flux-slice-controls output { min-width: 3.5em; font-variant-numeric: tabular-nums; }
.flux-controls button { width: auto; margin: 0; padding: .4rem .65rem; font-size: .8em; color: var(--tui-text); background: var(--tui-control); border: 1px solid var(--tui-border); border-radius: 4px; cursor: pointer; }
.flux-controls button:disabled { cursor: wait; }
.flux-toggles label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .8em; font-weight: normal; }
.flux-toggles input { width: auto; margin: 0; }
#flux-canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: white; border: 1px solid var(--tui-border); border-radius: 6px; touch-action: none; }
#flux-canvas:focus-visible { outline: 2px solid var(--tui-accent); outline-offset: 3px; }
.flux-help, .flux-metadata, .flux-legend { font-size: .75em; color: var(--tui-muted); }
.flux-metadata { font-variant-numeric: tabular-nums; }
.flux-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: 0; list-style: none; }
.flux-dot { display: inline-block; width: .65em; height: .65em; margin-right: .25em; border-radius: 50%; border: 1px solid var(--tui-muted); }
.flux-one { background: #4059ff; } .flux-two { background: #ff40ff; } .flux-three { background: #ff4040; }
.flux-positive { background: #00ff00; } .flux-negative { background: #ffe600; }
@media (max-width: 600px) { .flux-controls { padding: .5rem; } .flux-slice-controls { gap: .35rem; } .flux-slice-controls label { flex-basis: 100%; } }

.flux-configuration-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .75rem; }
.flux-configuration-controls label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .85em; font-weight: normal; cursor: pointer; }
.flux-configuration-controls input { width: auto; margin: 0; }

.flux-viewer { position: relative; }
.flux-camera-help { padding: .85rem; border: 1px solid var(--tui-border); border-radius: 6px; background: var(--tui-panel); color: var(--tui-muted); font-size: .7em; line-height: 1.5; }
.flux-camera-help h2 { margin: 0 0 .6rem; padding: 0; border: 0; color: var(--tui-active); font-size: 1.1em; }
.flux-camera-help p { margin: 0 0 .75rem; }
.flux-camera-help dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem .6rem; margin: 0; }
.flux-camera-help dt { margin: 0; color: var(--tui-active); font-weight: bold; }
.flux-camera-help dd { margin: 0; }
.flux-camera-help { margin-top: 1rem; }
@media (min-width: 1200px) {
  .flux-camera-help { position: absolute; top: 0; left: calc(100% + 1rem); width: 180px; margin-top: 0; }
}