/* DPE (Drum Program Editor): MPC4000 over USB.
   Sits on top of tonelab.css (colours, fonts, banner, footer) and tl-tools.css (.tl-main).
   The AkSys pieces (icons, arrow buttons) are pixel art, so they are only ever scaled by whole numbers. */

:root {
  --z8-blue: #24408f;        /* AkSys panel blue */
  --z8-blue-hi: #3d5fc4;
  --z8-blue-lo: #142357;
  --z8-list: #0a1226;        /* list background */
  --z8-row-alt: #0d1730;
  --z8-sel: rgba(242, 163, 58, .16);
  --z8-lcd: #c4d7a0;         /* AkSys front-panel LCD green */
  --z8-lcd-ink: #1b2a0c;
}

.z8 img.px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- Top: notice, then the section picker ---------- */
.z8-notice { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0 0 18px;
  background: #2a1d07; border: 1px solid #7a5313; border-radius: 10px; }
.z8-notice .bang { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tl-accent); color: var(--tl-accent-ink); font-weight: 700; }
.z8-notice p { margin: 0; }
.z8-notice strong { color: #fff; }
.tl-main .z8-notice .sub { color: var(--tl-muted); font-size: 14px; text-align: left; }
.z8-notice details { margin-top: 6px; font-size: 14px; color: var(--tl-muted); }
.z8-notice summary { cursor: pointer; color: var(--tl-accent); }
.z8-notice ol { margin: 6px 0 0; padding-left: 20px; }

.z8-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 18px; }
.z8-bar .grow { flex: 1 1 auto; }
.z8-bar label { display: inline; margin: 0 8px 0 0; font-size: 14px; }
.z8-bar select { width: auto; min-width: 220px; min-height: 42px; font-family: var(--tl-font); font-weight: 600; }
.tl-main .z8-bar button { display: inline-block; width: auto; min-height: 42px; padding: 8px 18px; }
.z8-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--tl-line); color: var(--tl-muted); }
.z8-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.z8-pill.on { color: #c9f2e6; border-color: #1f5754; background: #0f2a2a; }
.z8-pill.on::before { background: #34d399; }
.z8-pill.busy::before { background: var(--tl-accent); }

/* ---------- Transfer: MPC | buttons | PC ---------- */
.z8-xfer { display: grid; grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }

.z8-pane { display: flex; flex-direction: column; min-width: 0; height: 520px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, var(--z8-blue-hi), var(--z8-blue) 46px, var(--z8-blue-lo));
  border: 1px solid #4a66c8; box-shadow: 0 0 0 1px #050b1f, 0 8px 24px rgba(0,0,0,.35); }
.z8-pane-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 46px; }
.z8-pane-head h2 { margin: 0; font-family: var(--tl-head); font-weight: 600; font-size: 20px; letter-spacing: .04em; color: #fff; }
.z8-pane-head .where { flex: 1 1 auto; min-width: 0; color: #dbe4ff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.tl-main .z8-pane-head button { display: inline-block; width: auto; min-height: 32px; padding: 4px 12px; font-size: 14px; flex: none; }
.tl-main .z8-pane-head button.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.tl-main .z8-pane-head button.ghost:hover { background: rgba(255,255,255,.12); }

.z8-mpc-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); min-height: 0; margin: 0 8px; gap: 8px; }
.z8-tree, .z8-list { background: var(--z8-list); border: 1px solid #05091a; border-radius: 4px; overflow: auto; min-height: 0; }
.z8-pc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0 8px; }
.z8-pc-body .z8-list { flex: 1 1 auto; }

.z8-tree ul { list-style: none; margin: 0; padding: 0; }
.z8-tree ul ul { padding-left: 18px; }
.z8-tree .node { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; white-space: nowrap; font-size: 15px; color: var(--tl-text); border-radius: 3px; }
.z8-tree .node:hover { background: rgba(255,255,255,.06); }
.z8-tree .node.sel { background: var(--z8-sel); color: #fff; box-shadow: inset 2px 0 0 var(--tl-accent); }
.z8-tree .node.off { color: #64748b; cursor: default; }
.z8-tree .node img { width: 32px; height: 32px; flex: none; }
.z8-tree .node .kind { color: var(--tl-muted); font-size: 12px; }

table.z8-files { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.z8-files th { position: sticky; top: 0; z-index: 1; background: #16234a; color: #c7d2fe; font-weight: 600; font-size: 13px; letter-spacing: .03em;
  text-align: left; padding: 7px 8px; border-bottom: 1px solid #05091a; white-space: nowrap; }
.z8-files td { padding: 5px 8px; border-bottom: 1px solid #111b38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.z8-files tr:nth-child(even) td { background: var(--z8-row-alt); }
.z8-files tr.sel td { background: var(--z8-sel); }
.z8-files tr.clash td.name::after { content: "already there"; margin-left: 8px; padding: 0 6px; border: 1px solid #7a5313; border-radius: 3px; color: var(--tl-accent); font-size: 11px; }
.z8-files tr.folder td.name { cursor: pointer; }
.z8-files tr.folder td.name:hover { text-decoration: underline; }
.z8-files tr.off td { color: #64748b; }
.z8-files .c-check { width: 38px; text-align: center; }
.z8-files .c-size { width: 96px; text-align: right; }
.z8-files .c-type { width: 84px; color: var(--tl-muted); }
.z8-files .name { display: table-cell; }
.z8-files .name img { width: 32px; height: 32px; vertical-align: middle; margin-right: 8px; }
.z8-files input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; vertical-align: middle;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--tl-accent); }
.z8-empty { padding: 28px 16px; text-align: center; color: var(--tl-muted); font-size: 14px; }

.z8-pane-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; color: #dbe4ff; font-size: 13px; }

.z8-drop { position: relative; }
.z8-drop.over::after { content: "Drop to add"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(242,163,58,.12); border: 2px dashed var(--tl-accent); border-radius: 4px; color: #fff; font-weight: 700; pointer-events: none; }

/* Middle: the two copy buttons */
.z8-mid { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; padding-top: 58px; }
.tl-main .z8-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 170px; min-height: 50px; padding: 10px 14px; white-space: nowrap; }
.z8-go .arr.to-mpc::before { content: "\25C0"; }
.z8-go .arr.to-pc::before { content: "\25B6"; }

/* Pad Mixer: AkSys mixer strips at 1x (art 50 x 348 px) */
.z8-pad-box { border-radius: 8px; overflow: hidden; background: #0b1430; border: 1px solid #4a66c8; }
.z8-pad-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 9px 12px; background: linear-gradient(90deg, var(--z8-blue), var(--z8-blue-hi)); }
.z8-pad-head .pick { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.z8-pad-head .zoom { display: flex; justify-content: flex-end; }
.z8-pad-head h2 { margin: 0; text-align: center; font-family: var(--tl-head); font-weight: 600; font-size: 20px; letter-spacing: .04em; color: #fff; }
.z8-pad-head label { display: flex; align-items: center; gap: 8px; color: #dbe4ff; font-size: 14px; margin: 0; }
.tl-main .z8-pad-head select { width: auto; min-width: 70px; min-height: 32px; padding: 3px 28px 3px 10px; font-size: 15px; }
.tl-main .z8-pad-head #z8-pad-prog, .tl-main .z8-pad-head #z8-dpe-prog { min-width: 180px; }
.z8-pad-scroll { overflow-x: auto; padding: 8px 12px 0; }
.z8-pad-nums, .z8-pad-strips { display: grid; grid-template-columns: repeat(16, 50px); gap: 0; width: 800px; margin: 0 auto; }
.z8-pad-nums span { text-align: center; padding: 3px 0 5px; font: 600 15px var(--tl-mono); color: #9fb0e0; cursor: pointer; }
.z8-pad-nums span.on { color: #0b1430; background: var(--tl-accent); border-radius: 4px 4px 0 0; }
.z8-strip { position: relative; width: 50px; height: 348px; background: url(img/pad-strip.png) 0 0 / 50px 348px no-repeat; image-rendering: pixelated; user-select: none; touch-action: none; }
.z8-strip.on::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--tl-accent); pointer-events: none; }
.z8-strip.off > * { visibility: hidden; }
.tl-main .z8-strip .box { position: absolute; left: 7px; width: 37px; min-height: 0; height: 16px; line-height: 16px; padding: 0; border: 0; background: transparent; box-shadow: none;
  color: #fff; font: 700 12px var(--tl-mono); text-align: center; cursor: pointer; }
.tl-main .z8-strip .box:hover { color: var(--tl-accent); background: transparent; }
.tl-main .z8-strip.ph .box, .tl-main .z8-strip.ph .box:hover { color: rgba(255, 255, 255, .55); cursor: default; }
.z8-strip.ph .knob, .z8-strip.ph .fader { cursor: default; }
.z8-strip .box.out { top: 19px; }
.z8-strip .box.send { top: 100px; }
.z8-strip .knob { position: absolute; left: 11px; width: 26px; height: 26px; border-radius: 50%; cursor: ns-resize; }
.z8-strip .knob.fx { top: 57px; }
.z8-strip .knob.pan { top: 128px; }
.z8-strip .knob i { position: absolute; left: 12px; top: 3px; width: 2px; height: 9px; background: #000; border-radius: 2px; box-shadow: none;
  transform-origin: 1px 10px; pointer-events: none; }
.z8-strip .fader { position: absolute; left: 0; right: 0; top: 167px; bottom: 0; cursor: ns-resize; }
.z8-strip .fader img { position: absolute; left: 17px; width: 14px; height: 25px; margin-top: -167px; image-rendering: pixelated; pointer-events: none; }
/* Zoom x2: the same strips at 2x */
.z8-pad.x2 { position: relative; left: 50%; width: min(1660px, calc(100vw - 32px)); transform: translateX(-50%); }
.z8-pad.x2 .z8-pad-nums, .z8-pad.x2 .z8-pad-strips { grid-template-columns: repeat(16, 100px); width: 1600px; }
.z8-pad.x2 .z8-strip { width: 100px; height: 696px; background-size: 100px 696px; }
.tl-main .z8-pad.x2 .z8-strip .box { left: 14px; width: 74px; height: 32px; line-height: 32px; font-size: 15px; }
.z8-pad.x2 .z8-strip .box.out { top: 39px; }
.z8-pad.x2 .z8-strip .box.send { top: 200px; }
.z8-pad.x2 .z8-strip .knob { left: 22px; width: 52px; height: 52px; }
.z8-pad.x2 .z8-strip .knob.fx { top: 114px; }
.z8-pad.x2 .z8-strip .knob.pan { top: 256px; }
.z8-pad.x2 .z8-strip .knob i { left: 24px; top: 6px; width: 4px; height: 18px; transform-origin: 2px 20px; }
.z8-pad.x2 .z8-strip .fader { top: 334px; }
.z8-pad.x2 .z8-strip .fader img { left: 34px; width: 28px; height: 50px; margin-top: -334px; }
.z8-pad-foot { display: flex; gap: 40px; padding: 8px 14px; color: #dbe4ff; font: 600 15px var(--tl-mono); border-top: 1px solid #2b3a52; }
.z8-pad .z8-lcd { margin-top: 14px; }

/* LCD readout + progress */
.z8-lcd { margin-top: 14px; padding: 11px 14px 9px; border-radius: 6px; background: var(--z8-lcd); color: var(--z8-lcd-ink);
  font: 600 15px var(--tl-mono); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); border: 2px solid #0b1430; min-height: 46px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.z8-lcd .line { overflow-wrap: anywhere; }
.z8-lcd .bar { height: 12px; background: #9fb47c; border: 1px solid var(--z8-lcd-ink); }
.z8-lcd .bar i { display: block; height: 100%; width: 0; background: var(--z8-lcd-ink); transition: width .15s linear; }
.z8-lcd.err { background: #f0b3a6; color: #3d0c04; }

/* Other sections (coming later) */
.z8-later { padding: 40px 20px; text-align: center; color: var(--tl-muted); }
.z8-later h2 { font-family: var(--tl-head); color: #fff; margin: 0 0 8px; }

/* Dialogs: clash check, rename, delete, new folder */
.z8-dlg { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid #4a66c8; border-radius: 10px; color: var(--tl-text);
  background: var(--tl-panel); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.z8-dlg::backdrop { background: rgba(0, 6, 25, .7); }
.z8-dlg h3 { margin: 0; padding: 12px 16px; font-family: var(--tl-head); font-weight: 600; font-size: 18px; color: #fff;
  background: linear-gradient(90deg, var(--z8-blue), var(--z8-blue-hi)); }
.z8-dlg .body { padding: 16px; }
.z8-dlg .body p { margin: 0 0 10px; }
.z8-dlg ul.names { max-height: 220px; overflow: auto; margin: 0 0 6px; padding: 8px 10px 8px 28px; background: var(--tl-bg); border: 1px solid var(--tl-line); border-radius: 6px; font: 14px var(--tl-mono); }
.z8-dlg input { margin-top: 4px; }
.z8-dlg .btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 0 16px 16px; }
.z8-dlg .btns button { display: inline-block; width: auto; min-height: 42px; padding: 8px 18px; border: 0; border-radius: 6px; cursor: pointer;
  font: 700 15px var(--tl-font); background: var(--tl-accent); color: var(--tl-accent-ink); }
.z8-dlg .btns button.ghost { background: transparent; color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-line); }
.z8-dlg .btns button.danger { background: var(--tl-warn); color: #fff; }

/* Drum Program Editor: AkSys art placed in AkSys pixels; the stage is zoomed to the box width */
.z8-dpe-fit { overflow: hidden; background: #0b1430; }
.z8-dpe-stage { position: relative; user-select: none; -webkit-user-select: none; font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif; }
.z8-dpe-stage div, .z8-dpe-stage button, .z8-dpe-stage svg { position: absolute; }
.z8-dpe-stage .bg { background-size: 100% 100%; background-repeat: no-repeat; }
.z8-dpe-stage .spr { background-repeat: no-repeat; touch-action: none; }
.z8-dpe-stage .knob { cursor: ns-resize; }
.z8-dpe-stage .click { cursor: pointer; }
.tl-main .z8-dpe-stage button { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #fff; font: 10px Tahoma, Verdana, "DejaVu Sans", sans-serif; text-align: center; cursor: pointer; }
.tl-main .z8-dpe-stage button:hover { background: transparent; }
.tl-main .z8-dpe-stage button:disabled { opacity: 1; }
/* Every value field: one sunken box, same bevel, text centred up/down; left-aligned text keeps the same 4 px inset */
.tl-main .z8-dpe-stage .box, .tl-main .z8-dpe-stage .lcd { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: var(--tpad, 3px) 4px var(--bpad, 0px); color: #fff; font-size: 10px; line-height: 1; white-space: nowrap; overflow: hidden; z-index: 1;   /* --tpad/--bpad: measured per font so caps/digits sit dead centre */
  background: #000715; border: 1px solid; border-color: #000 #000206 #000002 #080e0c; box-shadow: 0 1px 0 #929599, 1px 0 0 #46516e, 1px 1px 0 #7c7e8a; }   /* AkSys's own field edges, measured off its art: light bottom, slate right */
.tl-main .z8-dpe-stage .box.sample, .tl-main .z8-dpe-stage .box.plain { justify-content: flex-start; }
.tl-main .z8-dpe-stage .box.center { justify-content: center; }
.tl-main .z8-dpe-stage .box.sample.sel { color: #ffd200; }
.tl-main .z8-dpe-stage .box.num { justify-content: center; padding: 0; color: #000; background: none; border: 0; box-shadow: none; }
.tl-main .z8-dpe-stage .box.cont { color: #ffd200; }
/* Browsers that can trim text to its capital height (Chrome 133+): centre the capitals/digits themselves, whatever the font */
@supports (text-box: trim-both cap alphabetic) {
  .tl-main .z8-dpe-stage .box, .tl-main .z8-dpe-stage .lcd { display: block; align-content: center; text-align: center; text-overflow: clip;
    padding-top: 0; padding-bottom: 0; text-box: trim-both cap alphabetic; }
  .tl-main .z8-dpe-stage .box.sample, .tl-main .z8-dpe-stage .box.plain { text-align: left; }
  .tl-main .z8-dpe-stage .box.center, .tl-main .z8-dpe-stage .box.num { text-align: center; }
}
.tl-main .z8-dpe-stage button.box:hover { color: var(--tl-accent); background: #000715; }
.tl-main .z8-dpe-stage .bank, .tl-main .z8-dpe-stage .pad { background: transparent; }
.z8-dpe-stage .bank img, .z8-dpe-stage .pad img { display: block; width: 100%; height: 100%; pointer-events: none; }
.z8-dpe-stage .navhit { opacity: 0; }
.z8-dpe-stage .vbar { height: 3px; border-radius: 1px; background: linear-gradient(#fff, #9cc8ff); box-shadow: 0 0 2px #8fc3ff; }
.z8-dpe-stage .vbar.act { background: linear-gradient(#fff, #ff8f80); box-shadow: 0 0 2px #ff6a5a; }
.z8-dpe-stage svg.vrange { z-index: 2; cursor: ew-resize; touch-action: none; }
.z8-dpe-stage svg.env, .z8-dpe-stage svg.wave { overflow: visible; }
.z8-dpe-stage svg.env polyline { fill: none; stroke: #d8e0f2; stroke-width: 1.2; }
.z8-dpe-stage svg.env circle { fill: #fff; stroke: #1a2550; stroke-width: .6; cursor: move; touch-action: none; }
.z8-dpe-stage svg.env circle.on { fill: #ff3030; }
.z8-dpe-stage svg.wave .ax { stroke: #a8c64c; stroke-width: .8; }
.z8-dpe-stage svg.wave .w { fill: none; stroke: #fff; stroke-width: 1.2; }
.z8-dpe-stage .envtip { z-index: 3; transform: translateX(-50%); padding: 1px 4px; background: #fdf3e1; color: #000; border: 1px solid #000;
  font-size: 9px; line-height: 11px; white-space: pre; }
.z8-menu.z8-dpe-menu { max-height: 60vh; overflow-y: auto; }
.z8-dpe-stage .z8-menu.in-stage { position: absolute; z-index: 50; min-width: 100px; max-height: 220px; padding: 3px 0; border-radius: 3px; }
.tl-main .z8-dpe-stage .z8-menu.in-stage button { position: static; display: block; width: 100%; padding: 3px 9px; font: 10px Tahoma, Verdana, "DejaVu Sans", sans-serif; text-align: left; color: var(--tl-text); }
.tl-main .z8-dpe-stage .z8-menu.in-stage button:hover { color: var(--tl-accent); background: rgba(255,255,255,.08); }
.tl-main .z8-dpe-stage .z8-menu.in-stage button:disabled { color: #475569; }
.z8-dpe-stage .z8-menu.in-stage .z8-dpe-search { position: sticky; box-sizing: border-box; width: calc(100% - 6px); height: 16px; min-height: 0; margin-left: 3px !important; padding: 0 5px; margin: 0 0 3px; font: 10px Tahoma, Verdana, "DejaVu Sans", sans-serif; user-select: text; -webkit-user-select: text; }
.z8-dpe-menu .z8-dpe-search { display: block; box-sizing: border-box; width: 100%; margin: 0 0 4px; padding: 3px 6px; background: #000715; color: #fff; border: 1px solid #6a7a99; font: inherit; outline: none; position: sticky; top: 0; }
.z8-dpe .z8-lcd { margin-top: 14px; }

/* Right-click menu */
.z8-menu { position: fixed; z-index: 2000; min-width: 170px; padding: 6px 0; background: var(--tl-bar); border: 1px solid #2b3a52; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.z8-menu button { display: block; width: 100%; min-height: 0; padding: 8px 16px; border: 0; background: none; color: var(--tl-text); text-align: left; font: 15px var(--tl-font); cursor: pointer; }
.z8-menu button:hover { background: rgba(255,255,255,.08); color: var(--tl-accent); }
.z8-menu button:disabled { color: #475569; background: none; cursor: default; }
.z8-menu hr { border: 0; border-top: 1px solid #2b3a52; margin: 6px 0; }

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .z8-xfer { grid-template-columns: minmax(0, 1fr); }
  .z8-mid { flex-direction: row; justify-content: center; padding-top: 0; }
  .tl-main .z8-go { width: auto; flex: 1 1 0; }
  .z8-go .arr.to-mpc::before { content: "\25B2"; }
  .z8-go .arr.to-pc::before { content: "\25BC"; }
  .z8-pane { height: 420px; }
  .z8-pad-head { grid-template-columns: minmax(0, 1fr); }
  .z8-pad-head h2 { grid-row: 1; }
}
@media (max-width: 620px) {
  .z8-mpc-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 1fr); }
  .z8-pane { height: 560px; }
  .z8-tree { max-height: 220px; }
  .z8-files .c-type { display: none; }
  .z8-bar select { min-width: 0; width: 100%; }
}

.z8-dpe-stage .lcd.typein { cursor: text; }
.z8-dpe-stage .lcd input { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; text-align: center; }
.z8-dpe-stage .vtrack { height: 3px; border-radius: 1px; background: linear-gradient(#5d79a8, #3b5585); }

/* Message over the pad (mirrors the footer) */
.z8-dpe-stage .pad-note { position: absolute; z-index: 40; width: 102px; height: 102px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px; border-radius: 6px; background: rgba(0, 7, 21, .85); color: #fff; font: 9px Tahoma, Verdana, "DejaVu Sans", sans-serif; text-align: center; pointer-events: none; transition: opacity .35s; overflow: hidden; word-break: break-word; }
.z8-dpe-stage .pad-note span { display: block; max-width: 100%; }
.z8-dpe-stage .pad-note.bad { color: #ff9c8c; }
.z8-dpe-stage .pad-note.out { opacity: 0; }

/* Drum Program Editor footer: messages on the left, Zoom x1 / x2 on the right */
.z8-lcd.z8-dpe-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.z8-dpe-foot .line { flex: 1; min-width: 0; }
.z8-dpe-foot .zoom { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; color: var(--z8-lcd-ink); font: inherit; }
.tl-main .z8-dpe-foot select { width: auto; min-width: 64px; min-height: 26px; padding: 1px 26px 1px 8px; font-size: 14px; }
.z8-dpe-stage .pad-note.x1 { padding: 5px; gap: 0; border-radius: 3px; font-size: 7px; line-height: 1.15; }   /* v68: text keeps off the edges */

/* Pad Mixer under the Drum Program Editor: its Drum Program field only shows the editor's program */
.z8-dpe .z8-mix { margin-top: 0; }
.tl-main .z8-pad-head select.static { -webkit-appearance: none; appearance: none; background-image: none; padding-right: 10px; pointer-events: none; cursor: default; }

/* Keygroup Editor: keyboard and keygroup strip (plain stand-in keys until the key art is done) */
.z8-dpe-stage .kge-under { background: linear-gradient(#6698e5, #4a76d2); }
.tl-main .z8-dpe-stage .kk { box-sizing: border-box; background: linear-gradient(90deg, #fff, #dfe2e8); border: 1px solid #555a66; border-top: 0; border-radius: 0 0 2px 2px; cursor: pointer; }
.tl-main .z8-dpe-stage .kb { box-sizing: border-box; background: #000; border-radius: 0 0 1px 1px; cursor: pointer; z-index: 1; }
/* Keys outside the selected keygroup: AkSys's blue (measured from Boss's AkSys video) */
.tl-main .z8-dpe-stage .kk.dim { background: #4770a1; border-color: #34507a; }
.tl-main .z8-dpe-stage .kb.dim { background: #233348; }
/* AkSys's bookend pointers (AKComCtrls cursors): right arrow moves the low note, left arrow the high note */
.tl-main .z8-dpe-stage .kk.to-lo, .tl-main .z8-dpe-stage .kb.to-lo { cursor: url(img/dpe/kb-right.png) 16 5, e-resize; }
.tl-main .z8-dpe-stage .kk.to-hi, .tl-main .z8-dpe-stage .kb.to-hi { cursor: url(img/dpe/kb-left.png) 15 6, w-resize; }
.tl-main .z8-dpe-stage .kcell { box-sizing: border-box; background: #a9c6f2; border: 1px solid #23417f; color: #000; font: bold 10px Tahoma, Verdana, sans-serif; text-align: center; cursor: pointer; }
.tl-main .z8-dpe-stage .kcell:disabled { cursor: default; }
.tl-main .z8-dpe-stage .kcell.sel { background: #fff; color: #c00000; }
.tl-main .z8-dpe-stage .karr { color: #fff; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; }
/* Part Mixer: one AkSys strip (img/part/strip.png, 50 x 562) per part; more than 16 parts scroll sideways */
.z8-part-strips { display: flex; margin: 0 auto 8px; }
.z8-pstrip { position: relative; flex: 0 0 50px; width: 50px; height: 562px; background: url(img/part/strip.png) 0 0 / 50px 562px no-repeat; image-rendering: pixelated; user-select: none; touch-action: none; }
.z8-pstrip.on::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--tl-accent); pointer-events: none; }
.z8-pstrip.off > *:not(.pnum) { visibility: hidden; }
.tl-main .z8-pstrip .box { position: absolute; left: 7px; width: 37px; min-height: 0; height: 14px; line-height: 14px; padding: 0; border: 0; background: transparent; box-shadow: none;
  color: #fff; font: 700 11px var(--tl-mono); text-align: center; white-space: nowrap; overflow: hidden; cursor: pointer; }
.tl-main .z8-pstrip .box:hover { color: var(--tl-accent); background: transparent; }
.tl-main .z8-pstrip .box.lo, .tl-main .z8-pstrip .box.hi { top: 16px; width: 21px; font-size: 9px; letter-spacing: -.04em; }
.tl-main .z8-pstrip .box.lo { left: 4px; }
.tl-main .z8-pstrip .box.hi { left: 26px; }
.z8-pstrip .box.pno { top: 46px; }
.z8-pstrip .box.pri { top: 76px; }
.z8-pstrip .box.ch { top: 106px; }
.z8-pstrip .box.fxch { top: 279px; }
.z8-pstrip .box.out { top: 314px; }
.z8-pstrip .knob { position: absolute; left: 11px; width: 27px; height: 27px; border-radius: 50%; cursor: ns-resize; }
.z8-pstrip .knob.semi { top: 141px; }
.z8-pstrip .knob.fine { top: 186px; }
.z8-pstrip .knob.fx { top: 234px; }
.z8-pstrip .knob.pan { top: 343px; }
.z8-pstrip .knob i { position: absolute; left: 12.5px; top: 3px; width: 2px; height: 9px; background: #000; border-radius: 2px; box-shadow: none;
  transform-origin: 1px 10.5px; pointer-events: none; }
.tl-main .z8-pstrip .sm { position: absolute; top: 374px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent 0 0 / 48px 24px no-repeat; cursor: pointer; }
.tl-main .z8-pstrip .sm.solo { left: 1px; background-image: url(img/part/solo.png); }
.tl-main .z8-pstrip .sm.mute { left: 25px; background-image: url(img/part/mute.png); }
.tl-main .z8-pstrip .sm.lit { background-position: -24px 0; }
.z8-pstrip .fader { position: absolute; left: 0; right: 0; top: 400px; height: 140px; cursor: ns-resize; }
.z8-pstrip .fader img { position: absolute; left: 17px; width: 14px; height: 25px; margin-top: -400px; image-rendering: pixelated; pointer-events: none; }
.z8-pstrip .pname { position: absolute; left: 33px; top: 4px; bottom: 4px; width: 14px; writing-mode: vertical-rl; transform: rotate(180deg); overflow: hidden; white-space: nowrap;
  color: #dbe4ff; font: 600 10px var(--tl-mono); line-height: 14px; text-align: start; pointer-events: none; }
.z8-pstrip .pnum { position: absolute; left: 0; right: 0; top: 542px; text-align: center; color: #fff; font: 700 13px var(--tl-mono); line-height: 18px; }
.z8-part .z8-lcd { margin-top: 14px; }
.z8-part .z8-pad-scroll { width: 800px; max-width: 100%; margin: 0 auto; padding: 8px 0 0; }
.tl-main .z8-pstrip .grp { position: absolute; left: 1px; width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url(img/part/groups.png) -16px 0 / 32px 128px no-repeat; image-rendering: pixelated; cursor: pointer; z-index: 1; }
.tl-main .z8-pstrip .grp.lit { background-position-x: 0; }
.tl-main .z8-part .z8-pad-head #z8-part-multi { min-width: 180px; }
.z8-part.x2 .z8-part-strips { zoom: 2; }
.z8-part.x2 .z8-pad-scroll { width: 1600px; }
#z8-part-range { flex: none; }
/* Part Mixer: the scroll bar always shows, so more Parts are easy to find */
#z8-part-scroll { overflow-x: scroll; scrollbar-width: auto; scrollbar-color: #6f8fd8 #1b2536; }
#z8-part-scroll::-webkit-scrollbar { height: 14px; }
#z8-part-scroll::-webkit-scrollbar-track { background: #1b2536; }
#z8-part-scroll::-webkit-scrollbar-thumb { background: #6f8fd8; border-radius: 7px; border: 3px solid #1b2536; }
/* Part Mixer mini meter: AkSys art (Z48Standard 13006 lit, 13007 unlit), 8 lights of 3px, lit from the bottom */
.z8-pstrip .meter { position: absolute; left: 4px; top: 534px; width: 9px; height: 25px; background: url(img/part/meter-off.png) 0 0 / 9px 25px no-repeat; image-rendering: pixelated; pointer-events: none; }
.z8-pstrip .meter i { position: absolute; left: 0; bottom: 0; width: 9px; height: 0; background: url(img/part/meter-on.png) 0 100% / 9px 25px no-repeat; }
/* Pad Mixer Group buttons: the Part Mixer's art, left of the fader */
.tl-main .z8-strip .grp { position: absolute; left: 1px; top: calc(186px + var(--g) * 16px); width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url(img/part/groups.png) -16px calc(var(--g) * -16px) / 32px 128px no-repeat; image-rendering: pixelated; cursor: pointer; z-index: 1; }
.tl-main .z8-strip .grp.lit { background-position-x: 0; }
.tl-main .z8-pad.x2 .z8-strip .grp { left: 2px; top: calc(372px + var(--g) * 32px); width: 32px; height: 32px; background-size: 64px 256px; background-position: -32px calc(var(--g) * -32px); }
.tl-main .z8-pad.x2 .z8-strip .grp.lit { background-position-x: 0; }
/* Double-click a knob or fader: type a value */
.z8-typeover { position: absolute; z-index: 1000; height: 22px; padding: 0 2px; box-sizing: border-box; border: 1px solid var(--tl-accent, #ffd23f); border-radius: 0; background: #000; color: #fff;
  font: 700 13px var(--tl-mono, monospace); text-align: center; outline: none; }
/* Keygroup Editor low/high note boxes, like AkSys: black, grey edge on the bottom and right only, no shadow */
.tl-main .z8-dpe-stage .box.nbox { background: #000; border: 0; box-shadow: 0 1px 0 #a3a3a3, 1px 0 0 #a3a3a3, 1px 1px 0 #a3a3a3; }
.tl-main .z8-dpe-stage .box.none { color: rgba(255, 255, 255, .6); }   /* v62 (Boss, 15 Oct): 60%, was 70% */
/* Before connecting: placeholder values (the defaults) in 55% white; the real values replace them in full white */
.tl-main .z8-dpe-stage .box.ph, .tl-main .z8-dpe-stage .lcd.ph { color: rgba(255, 255, 255, .55); }
.z8-dpe-stage svg.env polyline.ph, .z8-dpe-stage svg.wave .w.dim, .z8-dpe-stage .vbar.dim { opacity: .7; }

/* Footer banner on every panel: the panel's own messages on the left, Zoom and Show / Hide on the right */
.z8-pad-foot.z8-banner { align-items: center; gap: 24px; padding: 7px 12px; background: linear-gradient(90deg, var(--z8-blue), var(--z8-blue-hi)); border-top: 1px solid #4a66c8; }
.z8-banner .line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z8-banner .line.err { color: #ffb4a6; }
.z8-banner .tools { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.z8-banner label { display: flex; align-items: center; gap: 8px; margin: 0; color: #dbe4ff; font: 14px var(--tl-font); }
/* Every Show / Hide and Zoom box is the same size: 12 px in, the longest word (4 letters at 15 px mono, about 36 px), 10 px gap, then the arrow 13 px from the edge */
.tl-main .z8-banner select, .tl-main .z8-pad-head select.show, .tl-main .z8-notice select.show, .tl-main .z8-pads-zoom select { flex: none; box-sizing: border-box; width: 84px; min-width: 84px; height: 32px; min-height: 32px; padding: 0 33px 0 12px; font-size: 15px; line-height: 30px; }

/* Browser notice: X to close; once closed (or after 3 visits) it sits at the bottom with a Show / Hide box */
.z8-notice .body { flex: 1; min-width: 0; }
.tl-main .z8-notice .x { flex: none; width: 30px; min-width: 0; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tl-muted); font-size: 24px; line-height: 30px; cursor: pointer; }
.tl-main .z8-notice .x:hover { color: #fff; background: rgba(255,255,255,.08); }
.z8-notice.down { margin: 18px 0 0; padding-right: 12px; }
/* v50 (Boss, 14 Oct): the ! stays put whatever the notice shows: it centres on the bold first line, and so do the X (top) and the
   Show box (bottom). That line is as tall as the ! (26 px), so all three share one centre line. */
.z8-notice .body > p:first-child { line-height: 26px; }
/* v50 (Boss's mock): the X sits in the top-right corner, the !'s size (26 px), level with it, as far from the right edge as from the top. */
.z8-notice { position: relative; }
.z8-notice:not(.down) { padding-right: 54px; }
.tl-main .z8-notice .x { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; margin: 0; font-size: 22px; line-height: 26px; }
.tl-main .z8-notice button.show { margin: -3px 0; }   /* takes only the line's 26 px, so the air above and below match */
.z8-notice.down .x { display: none; }

/* The warning's box: the banner's orange edge, and a background as much darker than the banner as the banner is than its edge */
.tl-main .z8-notice select.show { border-color: #7a5313; background-color: #0e0a03; }
/* v50 (Boss, 14 Oct): Show / Hide is one button, one click, no menu; same 84x32 box as the Zoom boxes. No orange edge after a click
   (that was the browser's focus ring); keyboard focus still shows it. */
.tl-main button.show { flex: none; display: block; box-sizing: border-box; width: 84px; min-width: 84px; height: 32px; min-height: 32px; margin: 0; padding: 0;
  border: 1px solid var(--tl-line); border-radius: 6px; background: var(--tl-bg); color: var(--tl-text); font: 500 15px/30px var(--tl-mono); text-align: center; cursor: pointer; }
.tl-main button.show:hover { background: var(--tl-bg); }
.tl-main button.show:focus { outline: none; }
.tl-main button.show:focus-visible { border-color: var(--tl-accent); }
.tl-main .z8-notice button.show { border-color: #7a5313; background-color: #0e0a03; }
.tl-main .z8-banner select:focus, .tl-main .z8-pads-zoom select:focus { border-color: var(--tl-line); }
.tl-main .z8-banner select:focus-visible, .tl-main .z8-pads-zoom select:focus-visible { border-color: var(--tl-accent); }

/* The Pads panel's Show/Hide (top right, on the PAD BANK lettering) and Zoom (bottom right, on the pad plate's bottom edge): same right-hand column as the banner boxes */
.z8-dpe-fit { position: relative; }
.z8-pads-zoom, .z8-pads-labels { position: absolute; right: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0; color: #dbe4ff; font: 14px var(--tl-font); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Pad Mixer: the same air below the strips as above the pad numbers */
#z8-pad .z8-pad-scroll { padding-bottom: 8px; }

/* Editor and Pad Mixer are one panel: rounded only at the very top and bottom. Each join is the thin dark edge
   the art uses between the top strip and the Pads (about 3 px on screen). */
#z8-dpe > .z8-pad-box { border-bottom: 0; border-radius: 8px 8px 0 0; }
#z8-pad .z8-pad-box { border-top: 0; border-radius: 0 0 8px 8px; }
#z8-dpe > .z8-pad-box > .z8-pad-foot.z8-banner { border-top: 3px solid #1a3468; border-bottom: 3px solid #1a3468; }
/* Every join is the same dark line (Boss, 14 Oct): under each title bar, and under the Pad Mixer strips (not on its footer, so hidden strips give one line, not two) */
#z8-dpe > .z8-pad-box > .z8-pad-head, #z8-pad .z8-pad-head { border-bottom: 3px solid #1a3468; }
#z8-pad .z8-pad-scroll { border-bottom: 3px solid #1a3468; }
#z8-pad .z8-pad-foot.z8-banner { border-top: 0; }

/* Pads hidden: only the PAD BANK strip stays, closed by the top strip art's own 2 bottom rows (top-drum.png rows 96-97) */
.z8-dpe-stage > .fold-out { display: none !important; }
.z8-dpe-stage > .midbg { background-color: #546bbc; }   /* the art's top row, under a lifted panel */
.z8-dpe-stage > .midbg.folded.last::after, .z8-dpe-stage > .kstrip.folded.last::after { display: none; }
.z8-dpe-stage > .kstrip { background: #546bbc; }   /* v50: Keygroup Editor's Keyboard strip, the Pad Bank strip's blue */
.z8-dpe-stage > .kstrip.folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(#224386, #1b376e 45%, #183060); }
.z8-dpe-stage > .midbg.folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(#224386, #1b376e 45%, #183060); }
/* The Pad Bank title: the same font and size as the panel titles ("Drum Program Editor"), centred on the bank buttons */
.tl-main .z8-pads-title { position: absolute; left: 0; right: 0; z-index: 4; height: 32px; margin: 0; line-height: 32px; text-align: center; pointer-events: none;
  font-family: var(--tl-head); font-weight: 600; font-size: 20px; letter-spacing: .04em; color: #fff; }

/* v50 (Boss, 14 Oct): "No Drum Program" / "No KG Program" in placeholder grey; the Zones banner gets its title, centred like the others. */
.tl-main select.ph { color: rgba(255,255,255,.55); }
#z8-dpe > .z8-pad-box > .z8-pad-foot.z8-banner { position: relative; }
.tl-main .z8-zones-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; pointer-events: none;
  font-family: var(--tl-head); font-weight: 600; font-size: 20px; letter-spacing: .04em; color: #fff; }
/* v50: bank letters and PAD n labels: page text in our heading font, on the pads art (sizes in stage px, so they scale with the art). */
.z8-dpe-stage .blbl, .z8-dpe-stage .plbl { position: absolute; margin: 0; color: #fff; font-family: var(--tl-head); font-weight: 600; white-space: nowrap; pointer-events: none; }
.z8-dpe-stage .blbl { font-size: 12px; line-height: 13px; text-align: center; }
.z8-dpe-stage .plbl { font-size: 8.5px; line-height: 10px; letter-spacing: .04em; }
/* v50 (Boss, 14 Oct): pads. Selected = white; no sample = the dark pad with fine diagonal lines (Boss's mock V50-pad-final-2). */
.z8-dpe-stage .pad.sel img { filter: grayscale(1) brightness(1.85); }
.z8-dpe-stage .pad.empty::after { content: ""; position: absolute; inset: 8% 8% 10% 8%; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }

/* Only the cap moves the level; the rest of the fader slot just selects the channel. */
.z8-strip .fader, .z8-pstrip .fader { cursor: default; }
.z8-strip .fader img, .z8-pstrip .fader img { pointer-events: auto; cursor: ns-resize; }

/* v53 (Boss, 14 Oct): Zoom x1.5 for both mixers: the x1 strips at 1.5x (16 strips = 1200 px). */
.z8-pad.x15 .z8-pad-nums, .z8-pad.x15 .z8-pad-strips { zoom: 1.5; }
.z8-part.x15 .z8-part-strips { zoom: 1.5; }
.z8-part.x15 .z8-pad-scroll { width: 1200px; }
/* v53 (Boss, 14 Oct): the Part Mixer is the Pad Mixer's twin: same dark joins under the title bar and the strips,
   the same footer banner (messages left, Zoom right), the same air under the strips. */
#z8-part .z8-pad-head { border-bottom: 3px solid #1a3468; }
#z8-part .z8-pad-scroll { padding-bottom: 8px; }
#z8-part .z8-pad-foot.z8-banner { border-top: 3px solid #1a3468; }   /* full width (the strips' scroll box is only 16 strips wide) */

/* Instructions (text written in dpe-admin.php): each "##" sub-heading is its own expand arrow */
.z8-notice .z8-instr-wrap { margin-top: 2px; }
.z8-notice details.z8-instr { margin-top: 6px; }
.z8-notice .z8-instr-body, .z8-notice .z8-instr-wrap > p, .z8-notice .z8-instr-wrap > ul { color: var(--tl-text); }
.z8-notice .z8-instr-body { margin: 4px 0 0 4px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.10); }
.z8-notice .z8-instr-body p, .z8-notice .z8-instr-wrap > p { margin: 6px 0; }
.z8-notice .z8-instr-body ul, .z8-notice .z8-instr-wrap > ul { margin: 4px 0; padding-left: 22px; }
.z8-notice .z8-instr-body a, .z8-notice .z8-instr-wrap a { color: var(--tl-accent); }
.z8-notice .z8-instr-body strong { color: #fff; }
.z8-notice .z8-instr-wrap .gap { height: 1em; }

/* v60 (Boss, 15 Oct): Labels. Pad Bank: the Labels box bottom left, on Zoom's line. */
.z8-pads-labels { right: auto; left: 12px; }
.z8-pads-labels[hidden] { display: none; }
/* Sample name on a pad: last letter bottom right, a long name wraps upward; dark on the white (selected) pad. */
.z8-dpe-stage .pad .plab { position: absolute; left: 14.3%; right: 14.3%; bottom: 12.5%; z-index: 2; text-align: right; white-space: pre; line-height: 1.18; color: #fff; font-family: var(--tl-head); font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.z8-dpe-stage .pad.sel .plab { color: #10131c; text-shadow: 0 0 3px rgba(255, 255, 255, .8); }
/* Pad Mixer: the name runs up the right of the fader slot from its bottom edge; the channel number sits under the slot. */
.z8-strip .zname { position: absolute; left: 33.5px; top: 171px; bottom: 21px; width: 14px; writing-mode: vertical-rl; transform: rotate(180deg); overflow: hidden; white-space: nowrap; color: #dbe4ff; font: 600 10px var(--tl-mono); line-height: 14px; text-align: start; pointer-events: none; }
.z8-strip .znum { position: absolute; left: 0; width: 48px; top: 329px; height: 17px; line-height: 17px; text-align: center; color: #dbe4ff; font: 600 11px var(--tl-mono); pointer-events: none; }
.z8-strip.off > .znum { visibility: visible; }
.z8-pad.x2 .z8-strip .zname { left: 67px; top: 342px; bottom: 42px; width: 28px; font-size: 20px; line-height: 28px; }
.z8-pad.x2 .z8-strip .znum { width: 96px; top: 658px; height: 34px; line-height: 34px; font-size: 22px; }

/* v63 (Boss, 15 Oct): Labels as in his mock: "Labels" in white; in the Pad Mixer footer the group sits apart from Zoom, its box ending 498 px before Zoom's text. */
.z8-pads-labels, .z8-mix-labels { color: #fff; }
#z8-pad .z8-pad-foot.z8-banner { position: relative; }
@media (min-width: 1200px) {
  .z8-banner .tools .z8-mix-labels { position: absolute; right: 635px; top: 50%; transform: translateY(-50%); }
}

/* The Pad Mixer's footer messages stop short of the Labels group (a long Sample name is shortened with ... rather than run under it). */
.z8-msgs { display: flex; gap: 24px; min-width: 0; }
.z8-msgs > span { flex: none; white-space: nowrap; }
.z8-msgs > #z8-pad-sample { flex: 0 1 auto; min-width: 0; overflow: hidden; }   /* v63 (Boss): never "..." on a Sample name */
#z8-pad-sample .mq { display: inline-block; white-space: nowrap; }
#z8-pad-sample .mq .gap { display: inline-block; width: 48px; }
#z8-pad-sample.scroll .mq { animation: z8-marquee var(--t) linear infinite; }
@keyframes z8-marquee { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
@media (min-width: 1200px) { #z8-pad .z8-msgs { max-width: calc(50% - 111px); } }

/* v63 (Boss, 15 Oct): Pad Bank "Labels" and "Zoom" sit above their boxes, centred */
.z8-pads-labels .cap, #z8-pads-zoom .cap { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px; text-align: center; line-height: 16px; color: #fff; background: none; }
.z8-pads-labels, #z8-pads-zoom { gap: 0; }


/* v70 (Boss): the selected menu item shows in yellow instead of a tick */
.z8-menu button[data-on], .tl-main .z8-dpe-stage .z8-menu.in-stage button[data-on] { color: #ffd200; }