:root { color-scheme: dark; --bg: #0c0c10; --panel: #15151c; --line: #2a2a35; --fg: #eee; --dim: #9a9aa8; --acc: #8a2be2; --acc2: #a65cff; --ok: #39ff6a; --warn: #ff6a3b; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 17px/1.35 -apple-system, system-ui, "Segoe UI", sans-serif; overscroll-behavior: none; }
body { display: flex; flex-direction: column; height: 100vh; }
button, input, select { font: inherit; color: inherit; }
.btn { min-height: 52px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); background: #22222c; color: var(--fg); cursor: pointer; font-weight: 600; touch-action: manipulation; user-select: none; }
.btn:active { transform: scale(.97); background: #2b2b38; }
.btn.primary { background: var(--acc); border-color: var(--acc2); }
.btn.big { min-height: 72px; font-size: 20px; flex: 1; }
.btn.on { background: var(--acc); border-color: var(--acc2); }
.btn:disabled { opacity: .35; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.grow { flex: 1; }
.dim { color: var(--dim); } .small { font-size: 14px; } .lbl { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

#top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #0f0f14; }
.brand { font-size: 22px; letter-spacing: .02em; } .brand b { color: var(--acc2); }
.pill { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #222; }
.pill.on { background: #103a1c; color: var(--ok); } .pill.off { background: #3a1010; color: var(--warn); }

#main { flex: 1; overflow: auto; padding: 14px 16px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-content: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--acc2); }
.panel h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.panel.monitor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(320px, 2fr) 3fr; gap: 16px; }
.screens { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.screens .scr { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #1c1c25; border: 1px solid var(--line); }
.maskwrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); touch-action: none; }
.maskwrap canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; cursor: crosshair; }
.maskrow { flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; } .maskrow .grow { flex: 1; min-width: 220px; }
.screens .scr.on { border-color: var(--acc2); background: #241a35; }
.screens .scr .info { flex: 1; font-size: 16px; } .screens .scr .info small { display: block; color: var(--dim); font-size: 13px; }
.screens .btn { min-height: 44px; padding: 6px 12px; font-size: 13px; text-align: left; line-height: 1.25; }
.screens .btn small { display: block; color: var(--dim); font-weight: 400; }
.screens .btn.on { background: var(--acc); border-color: var(--acc2); } .screens .btn.on small { color: #eee; }
.preview { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.preview img, .preview canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
#previewName { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#previewName .dj-box { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; will-change: transform; }
#previewName .dj-next { font-size: 0.35em; opacity: .8; margin-top: .2em; }
#previewName .dj-line, #previewName .dj-main { position: relative; }
#previewName .dj-glow { position: absolute; inset: 0; color: transparent; opacity: 0; will-change: opacity; pointer-events: none; }
#noLive { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); background: rgba(0,0,0,.6); }
#noLive.hidden { display: none; }
.tele .now b { font-size: 26px; display: block; }
.meters { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.beatrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
#beatDots i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #2a2a36; margin-right: 8px; transition: background .05s, transform .05s; }
#beatDots i.on { background: var(--acc2); transform: scale(1.25); } #beatDots i.one.on { background: var(--ok); }
.m { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); min-width: 0; } .m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #39ff6a, #ffe53b 70%, #ff2fd6); transform-origin: left; transform: scaleX(0); transition: transform .08s; }
.stats { display: flex; gap: 18px; font-variant-numeric: tabular-nums; font-size: 16px; }
.stats span:first-child { font-weight: 700; color: var(--fg); }
#dropFlash.flash { background: #ff2fd6; color: #000; opacity: 1 !important; box-shadow: 0 0 24px #ff2fd6; transform: scale(1.08); }

.nowplaying { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.quickrow { align-items: center; } #djQuick { margin: 0; }
.lightbox .sheet.wide { width: min(980px, 100%); }
h3.sub { margin: 18px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; } .tabs-inline .btn { min-height: 40px; padding: 0 12px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.nowplaying b { font-size: 30px; display: block; margin-bottom: 6px; }
#djQuick .btn { min-height: 56px; font-size: 18px; } #djQuick .btn.on { background: var(--acc); border-color: var(--acc2); }
.lightbox .sheet .row { flex-shrink: 0; }
#djList { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; }
.grid label { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 14px; color: var(--dim); align-content: start; }
.grid label.full, .grid .full { grid-column: 1 / -1; }
.grid label.chk { grid-template-columns: auto 1fr; align-items: center; min-height: 48px; color: var(--fg); font-size: 16px; }
input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--acc); }
input[type=range] { width: 100%; height: 56px; accent-color: var(--acc2); -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: #2a2a36; border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c89cff, var(--acc2) 55%, #6a1fc2); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.6); cursor: grab; }
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.showgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 22px; }
.showgrid .col { display: grid; gap: 10px; align-content: start; }
.showgrid .col h3.sub { margin: 4px 0 2px; }
.showgrid label { display: grid; gap: 6px; font-size: 14px; color: var(--dim); }
.showgrid label.chk { grid-template-columns: auto 1fr; align-items: center; min-height: 52px; color: var(--fg); font-size: 16px; }
.showgrid label.slider .for { color: var(--acc2); font-weight: 600; }
.showgrid .lbl { font-size: 14px; color: var(--dim); }
.showgrid .row { display: flex; gap: 8px; } .showgrid .row .btn { flex: 1; }
.pals { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; } .pals .pal { flex: 1 0 118px; }
.showpanel > .lbl { font-size: 14px; color: var(--dim); margin-bottom: 6px; }
.showgrid.two { grid-template-columns: 1fr 1fr; }
.pal { min-height: 62px; border-radius: 12px; border: 2px solid var(--line); background: #1c1c25; color: var(--fg); font-weight: 700; cursor: pointer; display: grid; grid-template-rows: 1fr auto; overflow: hidden; padding: 0; touch-action: manipulation; }
.pal .sw { display: flex; } .pal .sw i { flex: 1; display: block; min-height: 30px; }
.pal span { padding: 6px 8px; font-size: 14px; text-align: left; }
.pal.on { border-color: #fff; box-shadow: 0 0 0 3px var(--acc2); }
.panel.showpanel { grid-column: 1 / -1; }
@media (max-width: 1100px) { .showgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .showgrid { grid-template-columns: 1fr; } }
output { font-variant-numeric: tabular-nums; color: var(--fg); font-size: 14px; }
select, input[type=text] { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: #0f0f14; color: var(--fg); padding: 0 12px; font-size: 16px; }
input[type=color] { width: 100%; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; }
.fontgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-height: 190px; overflow: auto; }
.fontgrid button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #1c1c25; color: var(--fg); font-size: 18px; }
.fontgrid button.on { border-color: var(--acc2); background: #241a35; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; padding: 20px; }
.lightbox.hidden { display: none; }
.lightbox .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; padding: 16px; }
.lightbox .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lightbox h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--acc2); }
.lightbox .scroll { overflow: auto; margin-top: 8px; }
#midiTable { width: 100%; border-collapse: collapse; } #midiTable td { padding: 6px 4px; border-top: 1px solid var(--line); font-size: 15px; }
#midiTable td.key { color: var(--dim); white-space: nowrap; } #midiTable .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
#midiTable .btn.learning { background: var(--acc); }
.panel.audio { grid-column: 1 / -1; }

#picker { border-top: 1px solid var(--line); background: #0f0f14; padding: 8px 12px 10px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.tabs .btn { min-height: 44px; white-space: nowrap; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.strip:active { cursor: grabbing; }
.thumb { flex: 0 0 auto; width: 232px; scroll-snap-align: start; border-radius: 12px; overflow: hidden; border: 3px solid transparent; background: #1a1a22; cursor: pointer; touch-action: pan-x; -webkit-user-drag: none; }
.thumb.on { border-color: var(--acc2); box-shadow: 0 0 0 2px rgba(166,92,255,.4); }
.thumb .img { aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; display: grid; place-items: center; color: var(--dim); font-size: 13px; }
.thumb .cap { padding: 6px 10px 8px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb .cap small { display: block; font-weight: 400; color: var(--dim); font-size: 12px; }
@media (max-width: 900px) { .panel.monitor { grid-template-columns: 1fr; } #main { grid-template-columns: 1fr; } }

/* Screens panel */
#screensBox .sbox { padding: 4px 0 14px; border-bottom: 1px solid var(--line); } #screensBox .sbox:last-child { border-bottom: 0; }
#screensBox .sbox h3.sub { margin-top: 10px; }
#screensBox .url { display: block; font-size: 15px; word-break: break-all; background: #0f0f14; padding: 10px 12px; border-radius: 10px; margin: 6px 0 10px; }
#screensBox .addgrid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 8px 10px; align-items: center; }
#screensBox .addgrid b { font-size: 15px; padding-right: 6px; }
#screensBox .tips summary { cursor: pointer; color: var(--dim); font-size: 14px; padding: 8px 0; }
#screensBox .scroll { padding-right: 4px; }
@media (max-width: 560px) { #screensBox .addgrid { grid-template-columns: 1fr 1fr 1fr; } #screensBox .addgrid b { grid-column: 1 / -1; } }

/* ---------- DJ Names panel ---------- */
.lightbox .sheet.djsheet { width: min(1240px, 100%); height: 92vh; max-height: 92vh; }
.djcols { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 18px; min-height: 0; flex: 1; margin-top: 8px; }
.djcols > section { min-height: 0; overflow: auto; padding-right: 4px; }
.djcols h3.sub { margin-top: 4px; } .djcols h3.sub .dim { text-transform: none; letter-spacing: 0; font-weight: 400; }
#djList { display: flex; flex-direction: column; gap: 8px; }
.djrow { display: grid; grid-template-columns: 56px 1fr 52px; grid-template-areas: "num nm col" "num fnt ops"; gap: 8px; padding: 10px; border-radius: 14px; background: #1c1c25; border: 1px solid var(--line); }
.djrow.on { border-color: var(--ok); background: #13261a; box-shadow: 0 0 0 1px var(--ok) inset; }
.djrow .num { grid-area: num; border-radius: 12px; border: 1px solid var(--line); background: #2a2a36; color: var(--fg); font: 800 24px system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.djrow .num small { font-size: 9px; letter-spacing: .08em; color: #0c0c10; background: var(--ok); padding: 2px 4px; border-radius: 4px; }
.djrow.on .num { background: #1d4a2a; border-color: var(--ok); color: var(--ok); }
.djrow .nm { grid-area: nm; min-height: 52px; font-size: 22px; font-weight: 700; padding: 0 14px; }
.djrow .col { grid-area: col; width: 52px; height: 52px; border-radius: 12px; cursor: pointer; }
.djrow .fnt { grid-area: fnt; min-height: 44px; font-size: 14px; }
.djrow .ops { grid-area: ops; display: flex; gap: 6px; justify-content: flex-end; }
.djrow .ops .btn { min-height: 44px; min-width: 44px; padding: 0; font-size: 14px; }
.djrow .ops .btn.del:hover { border-color: var(--warn); color: var(--warn); }
.djrow { grid-template-columns: 56px minmax(0, 1fr) auto 52px; grid-template-areas: "num nm nm col" "num fnt ops ops"; } .djrow .nm, .djrow .fnt { min-width: 0; width: 100%; }
.djcols > section.djlineup { overflow-x: hidden; }
.addbtn { width: 100%; margin: 10px 0; border-style: dashed; }
#djBox label.sw { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; color: var(--fg); cursor: pointer; user-select: none; }
#djBox label.sw input { -webkit-appearance: none; appearance: none; width: 52px; height: 30px; border-radius: 15px; background: #2a2a36; border: 1px solid var(--line); position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 0; }
#djBox label.sw input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #bbb; transition: transform .15s, background .15s; }
#djBox label.sw input:checked { background: var(--acc); border-color: var(--acc2); }
#djBox label.sw input:checked::after { transform: translateX(22px); background: #fff; }
.stylebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #0f0f14; border: 1px solid var(--line); border-radius: 12px; }
.segb { min-height: 40px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; color: var(--dim); font-weight: 700; font-size: 14px; cursor: pointer; }
.segb.on { background: var(--acc); color: #fff; }
.stage { position: relative; aspect-ratio: 16 / 9; max-height: 34vh; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 30% 20%, #3a1466 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, #0f4a5a 0%, transparent 50%), #07070b; }
#djStage { position: absolute; inset: 0; pointer-events: none; }
#djStage .dj-box { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; will-change: transform; }
#djStage .dj-line, #djStage .dj-main { position: relative; line-height: 1; letter-spacing: .02em; }
#djStage .dj-glow { position: absolute; inset: 0; line-height: 1; letter-spacing: .02em; color: transparent; opacity: 0; will-change: opacity; pointer-events: none; }
#djStage .dj-next { font-size: .22em; margin-top: .25em; opacity: .85; letter-spacing: .12em; font-weight: 700; }
.stagetag { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: var(--dim); }
#styleNote { margin: 8px 0 10px; min-height: 1.2em; }
.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ptab { min-height: 46px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--dim); font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
.ptab.on { color: var(--fg); border-bottom-color: var(--acc2); }
.ppanes { padding: 14px 2px 4px; }
.ppane[hidden] { display: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; align-items: end; }
.pgrid .full { grid-column: 1 / -1; }
.pgroup { padding: 4px 0 12px; } .pgroup + .pgroup { border-top: 1px solid var(--line); padding-top: 10px; }
#djBox .ctl { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--dim); transition: opacity .15s; }
#djBox .ctl .lab { display: flex; justify-content: space-between; align-items: baseline; }
#djBox .ctl output { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 700; }
#djBox .ctl input[type=range] { height: 48px; }
#djBox .ctl.off { opacity: .35; pointer-events: none; }
#djBox .chips { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 8px; }
#djBox #center { margin-top: 10px; }
.stylefoot { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.stylefoot .btn { flex: 1; }
@media (max-width: 900px) {
  .lightbox .sheet.djsheet { height: auto; }
  .djcols { grid-template-columns: 1fr; } .djcols > section { overflow: visible; }
  .djsheet { overflow: auto; }
}

.beatline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-bottom: 4px; }
.beatline .beatrow { margin: 0; } .beatline .stats { margin: 0; }

.intenrow { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--dim); margin-top: 4px; }
.intenrow .lab { display: flex; gap: 8px; align-items: baseline; } .intenrow .for { color: var(--acc2); font-weight: 600; }
.intenrow output { margin-left: auto; color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.intenrow input[type=range] { height: 48px; }

/* Flow: auto-cycle | within (50/50) | next-on-drop toggle button */
.flowrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.flowrow label.btn.dropnextbtn { padding: 4px 14px; white-space: normal; max-width: 8.5em; line-height: 1.15; text-align: center; }
.flowrow select { width: 100%; min-width: 0; padding: 0 6px 0 10px; }
label.btn.togglebtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: var(--fg); font-size: 15px; white-space: nowrap; cursor: pointer; }
.togglebtn input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.togglebtn:has(input:checked) { background: var(--acc); border-color: var(--acc2); color: #fff; }
.togglebtn:has(input:focus-visible) { outline: 2px solid var(--acc2); outline-offset: 2px; }
@media (max-width: 700px) { .flowrow { grid-template-columns: 1fr 1fr; } }

/* right of the preview: breathing room between the meters, beat/stats, tap row and the DJ/intensity block */
.panel.monitor > .tele { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.tele .meters { margin: 0; } .tele .beatline { margin: 0; } .tele #tStatus { margin-top: -10px; } .tele > .row { margin: 0; }
.tele .nowplaying { margin-top: 0; padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.tele .nowplaying .quickrow { margin: 0; }
.intenline { display: flex; align-items: flex-end; gap: 16px; }
.intenline .intenrow { flex: 1; min-width: 0; margin: 0; }
.intenline .togglebtn { min-width: 120px; margin-bottom: 0; }
.blinkchk { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--fg); font-size: 16px; cursor: pointer; line-height: 1; }
.blinkchk input { margin: 0; flex: none; }

/* one combined control surface: preview + sensitivity | live telemetry & DJ, then palette and flow across the bottom */
.panel.monitor { row-gap: 18px; }
.panel.monitor > .leftcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel.monitor > .pals, .panel.monitor > .flowrow { grid-column: 1 / -1; margin: 0; }
.flowrow > label:not(.btn) { display: grid; gap: 6px; font-size: 14px; color: var(--dim); }
.flowrow select { min-height: 56px; font-size: 17px; }
.flowrow label.btn.dropnextbtn { min-height: 56px; }
.sensrow { margin: 0; }
.flowrow label.btn.dropnextbtn { max-width: none; white-space: nowrap; padding: 0 22px; }
@media (max-width: 1100px) { .flowrow label.btn.dropnextbtn { white-space: normal; max-width: 8.5em; padding: 4px 14px; } }
.intenrow .lab { white-space: nowrap; min-width: 0; } .intenrow .lab .for { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .intenrow output { flex: none; }

/* ---------- main panel layout (one surface, touch sized) ----------
   row 1: preview | meters, beat/stats, big TAP / Clear / DROP (fills the preview's height)
   then full width: sliders + strobe, DJ buttons + 60s, palette, flow                       */
.panel.monitor { grid-template-columns: minmax(320px, 5fr) 6fr; gap: 14px 18px; align-items: stretch; }
.panel.monitor > .tele { justify-content: flex-start; gap: 12px; }
.panel.monitor > .intenline, .panel.monitor > .quickrow { grid-column: 1 / -1; margin: 0; }
.tele .beatline { gap: 4px 16px; }
.tele #tStatus { margin: 0; flex-basis: 100%; min-height: 0; } .tele #tStatus:empty, .tele #tStatus:is(:empty) { display: none; }
.tele .taprow { flex: 1; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 0; min-height: 76px; }
.tele .taprow .btn { height: 100%; min-height: 76px; font-size: 20px; }
.tele .taprow #tap { font-size: 24px; letter-spacing: .04em; }
.intenline { gap: 18px; align-items: center; }
.intenline .togglebtn { min-height: 56px; min-width: 140px; font-size: 17px; }
.panel.monitor > .quickrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel.monitor > .quickrow #djQuick { display: flex; flex-wrap: wrap; gap: 10px; }
#djQuick .btn { min-height: 60px; min-width: 120px; font-size: 19px; }
.tele #tStatus { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.monitor { row-gap: 12px; }
.panel.monitor .pal { min-height: 52px; } .panel.monitor .pal .sw i { min-height: 24px; } .panel.monitor .pal span { padding: 4px 8px; }
.panel.monitor > .pals { padding-bottom: 2px; }
/* right column holds the controls (tap row normal size); palette + flow run full width below */
.tele .taprow { flex: none; min-height: 0; grid-template-columns: 2fr 1fr 1fr; }
.tele .taprow .btn { height: auto; min-height: 60px; font-size: 18px; } .tele .taprow #tap { font-size: 20px; }
.tele > .intenline, .tele > .quickrow { margin: 0; }
.tele > .quickrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tele > .quickrow #djQuick { display: flex; flex-wrap: wrap; gap: 10px; }
.tele .intenline { gap: 14px; } .tele .intenline .togglebtn { min-width: 110px; }
#djQuick .btn { min-height: 56px; min-width: 110px; font-size: 18px; }
.panel.monitor { grid-template-columns: minmax(300px, 4fr) 6fr; }
.tele .taprow .btn { white-space: nowrap; padding: 0 10px; }
.panel.monitor .pal .sw i { min-height: 36px; } .panel.monitor .pal { min-height: 64px; }
/* no card around the main controls: content sits straight on the page (the box + padding wasted space) */
.panel.monitor { background: none; border: 0; border-radius: 0; padding: 0; }
#main { padding: 12px 14px 14px; }

/* ---------- iPad / touch ---------- */
body { height: 100vh; height: 100dvh; }                 /* Safari: follow the visible area, not behind its toolbars */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }   /* no double-tap zoom */
.btn, .pal, .segb, .ptab, .togglebtn, #djQuick .btn, .djrow .num { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* portrait iPad (834 wide) and other narrow screens: preview on top (capped height), controls full width below */
@media (max-width: 900px) {
  .panel.monitor { grid-template-columns: 1fr; }
  .panel.monitor > .leftcol .preview { height: min(30vh, calc((100vw - 24px) * 9 / 16)); width: auto; max-width: 100%; aspect-ratio: 16 / 9; align-self: center; }
  .panel.monitor .pals .pal { flex: 1 0 96px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #main { padding: 10px 12px 12px; }
}
@media (max-width: 900px) {
  #top { gap: 8px; padding: 8px 12px; }
  #top .brand { white-space: nowrap; } #top .brand small, #top .brand .ver, #top #buildTag { display: none; }
  #top .pill { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  #top .btn { white-space: nowrap; padding: 0 14px; }
  .panel.monitor > .leftcol .preview { height: min(25vh, calc((100vw - 24px) * 9 / 16)); }
  #djBox .stage { height: 24vh; width: auto; max-width: 100%; margin: 0 auto; }
}

/* ---------- fit: everything above and including the DJ buttons stays beside the preview ---------- */
.tele #tStatus { display: none; }                                   /* render-size line removed (it lives in Screens) */
.panel.monitor > .tele { gap: 8px; }
.tele .meters { gap: 5px; }
.tele .taprow .btn { min-height: 52px; font-size: 17px; } .tele .taprow #tap { font-size: 19px; }
.tele .intenline .togglebtn { min-height: 48px; font-size: 16px; }
.tele .intenrow input[type=range] { height: 36px; }
#djQuick .btn { min-height: 50px; font-size: 17px; }
.tele .blinkchk { min-height: 44px; }
/* smaller slider handle (still a comfortable 30px touch target; the track stays easy to hit) */
input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -9px; border-width: 2px; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-width: 2px; }