/* shared chrome for the vis pages (index, vj) */
.ui { color: #fff; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, "Roboto Mono", monospace; }
.ui a, .ui button, .ui select, .ui label.btn { color: #fff; background: rgba(0,0,0,.6); border: 1px solid #fff; padding: 4px 8px;
       font: inherit; text-decoration: none; cursor: pointer; }
.ui a { border-color: transparent; }
.ui button.on { background: #fff; color: #000; }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meter { width: 60px; height: 8px; background: rgba(255,255,255,.25); }
.meter i { display: block; height: 100%; width: 0; background: #7cf5ff; }
.status { opacity: .75; }
.status.bad { color: #ff8a8a; opacity: 1; }
.panel h3 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7cf5ff; }
.panel h3:first-child { margin-top: 0; }
.row { display: grid; grid-template-columns: 1fr 44px; gap: 2px 8px; margin: 6px 0; }
.row label { cursor: default; user-select: none; }
.row span { text-align: right; opacity: .8; }
.row input { grid-column: 1 / 3; width: 100%; margin: 0; accent-color: #7cf5ff; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.keys { margin-top: 12px; opacity: .65; font-size: 11px; display: flex; flex-wrap: wrap; gap: 3px 12px; }
.keys span { white-space: nowrap; }
.keys b { font-weight: normal; color: #7cf5ff; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); padding: 8px 16px; background: rgba(0,0,0,.65);
         color: #fff; font-size: 14px; opacity: 0; transition: opacity .5s; pointer-events: none; z-index: 10; }
.toast.show { opacity: 1; transition: none; }

.presetlist { display: flex; flex-direction: column; gap: 4px; }
.presetlist button { display: flex; align-items: center; gap: 10px; text-align: left; }
.presetlist button span { flex: 1; }
.presetlist kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: inherit; opacity: .7; }
.presetlist button.on kbd { opacity: 1; }
.presetlist small { opacity: .6; font-size: 10px; letter-spacing: .08em; }

/* MIDI mapping */
.midi-panel { position: fixed; top: 48px; right: 12px; width: 280px; max-height: calc(100vh - 70px); overflow-y: auto; z-index: 40; background: rgba(0,0,0,.85); }
.midi-panel[hidden] { display: none; }
.midi-panel h3 { margin: 0 0 6px; }
.midirow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.midistatus { color: #ffb347; margin: 6px 0; }
.midimap { display: grid; gap: 3px; margin: 8px 0; }
.mididrow { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; font-size: 11px; }
.mididrow button { padding: 0 6px; }
.midi-bound { box-shadow: inset 3px 0 0 #ffb347; }
body.midi-learn [data-midi] { outline: 1px dashed rgba(255,179,71,.7); outline-offset: 1px; cursor: crosshair; }
body.midi-learn .row > * { pointer-events: none; }   /* so a click lands on the row, and the slider does not move */
.midi-armed { outline: 2px solid #ffb347 !important; animation: midipulse 1s infinite; }
@keyframes midipulse { 50% { outline-color: rgba(255,179,71,.3); } }