/* ELAIA BRANCH 2026-10-23: the logged-in modular workspace. Green #589000 only (hover #6BA80A). */
html,body.bx{height:100%;margin:0;background:#0A0A0B;color:#ECECF0;font-family:Inter,system-ui,sans-serif;overflow:hidden}
.bx *{box-sizing:border-box}
.bx-top{position:fixed;top:0;left:0;right:0;width:auto;max-width:none;margin:0;z-index:40;height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #222226;background:#0E0E10}
.bx-logo{display:flex;align-items:center;gap:6px;text-decoration:none}
.bx-lab{font-size:11px;color:#9A9AA2;text-transform:uppercase;letter-spacing:.08em}
.bx-crumbs{flex:1;display:flex;gap:4px;align-items:center;font-size:13px;color:#9A9AA2;min-width:0;overflow:hidden;white-space:nowrap}
.bx-crumbs button{background:none;border:0;color:#9A9AA2;cursor:pointer;font:inherit;padding:2px 4px}
.bx-crumbs button:hover{color:#ECECF0}.bx-crumbs .cur{color:#ECECF0}
.bx-actions{display:flex;gap:8px;align-items:center}
.bx-btn{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.bx-btn:hover{border-color:#3A3A40}
.bx-primary{background:#589000;border-color:#589000;color:#0A0A0B;font-weight:600}.bx-primary:hover{background:#6BA80A;border-color:#6BA80A}
.bx-link{color:#9A9AA2;font-size:13px;text-decoration:none}.bx-link:hover{color:#ECECF0}
.bx-who{font-size:12px;color:#6A6A72}
.bx-switch{display:none}
.bx-menu{position:fixed;top:52px;right:180px;z-index:50;background:#141416;border:1px solid #2A2A2E;border-radius:10px;padding:8px;min-width:240px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.bx-menu-r{right:12px}
.bx-menu button.item{display:block;width:100%;text-align:left;background:none;border:0;color:#ECECF0;padding:7px 10px;border-radius:6px;font:inherit;font-size:13px;cursor:pointer}
.bx-menu button.item:hover{background:#1C1C1F}
.bx-menu small{color:#9A9AA2;display:block;font-size:11px}
.bx-menu h4{margin:6px 10px 4px;font-size:11px;color:#6A6A72;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.bx-menu textarea{width:100%;height:90px;background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;font:12px monospace}
.bx-ws{position:absolute;top:48px;left:0;right:0;bottom:0;padding:6px;display:flex}
.bx-split{display:flex;flex:1 1 0;min-width:0;min-height:0}
.bx-split.row{flex-direction:row}.bx-split.col{flex-direction:column}
.bx-div{flex:0 0 6px;cursor:col-resize;position:relative}.bx-split.col>.bx-div{cursor:row-resize}
.bx-div:hover::after,.bx-div.on::after{content:"";position:absolute;inset:2px;background:#589000;border-radius:2px}
.bx-stack{flex:1 1 0;min-width:120px;min-height:80px;display:flex;flex-direction:column;background:#141416;border:1px solid #222226;border-radius:10px;overflow:hidden;position:relative}
.bx-head{display:flex;align-items:center;height:32px;background:#111113;border-bottom:1px solid #222226;padding:0 4px;gap:2px;flex:0 0 auto}
.bx-tabs{display:flex;flex:1;min-width:0;overflow:hidden;gap:2px}
.bx-tab{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font-size:12px;color:#9A9AA2;cursor:grab;white-space:nowrap;user-select:none;touch-action:none}
.bx-tab.on{color:#ECECF0;background:#1C1C1F}.bx-tab.on::before{content:"";width:6px;height:6px;border-radius:50%;background:#589000}
.bx-tab .grip{opacity:.5;font-size:10px}
.bx-head{cursor:grab;touch-action:none}.bx-head .bx-ic{cursor:pointer}
.bx-ro{position:fixed;left:12px;right:12px;top:72px;z-index:59;background:#111113;border:1px solid #3E6500;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 140px);overflow:auto;pointer-events:none}
.bx-ro h4{margin:0 0 4px;font-size:12px;color:#9A9AA2;font-weight:600}
.bx-ro-row{padding:12px 14px;border-radius:8px;background:#1C1C1F;color:#ECECF0;font-size:14px}
.bx-ro-row.self{opacity:.45;border:1px dashed #589000}
.bx-ro-row.ro-before{box-shadow:inset 0 3px 0 #589000}.bx-ro-row.ro-after{box-shadow:inset 0 -3px 0 #589000}
.bx-ic{background:none;border:0;color:#6A6A72;cursor:pointer;font-size:13px;padding:3px 5px;border-radius:5px;line-height:1}
.bx-ic:hover{color:#ECECF0;background:#1C1C1F}
.bx-body{flex:1;min-height:0;overflow:auto;position:relative}
.bx-panel{height:100%;display:flex;flex-direction:column}
.bx-panel>.pb{flex:1;min-height:0;overflow:auto;padding:10px}
.bx-set{background:#0E0E10;border-bottom:1px solid #222226;padding:10px;font-size:13px;display:grid;gap:8px}
.bx-set label{display:grid;gap:4px;color:#9A9AA2;font-size:12px}
.bx-set input,.bx-set select,.bx-set textarea,.bx-in{background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;padding:6px 8px;font:inherit;font-size:13px}
.bx-drop{position:fixed;z-index:60;background:rgba(88,144,0,.22);border:2px solid #589000;border-radius:8px;pointer-events:none}
.bx-ghost{position:fixed;z-index:61;pointer-events:none;background:#589000;color:#0A0A0B;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px}
.bx-dragging,.bx-dragging *{cursor:grabbing!important;user-select:none}
.bx-dragging iframe{pointer-events:none}
/* list cards */
.bx-list{display:grid;gap:6px}
.bx-card{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;background:#1C1C1F}
.bx-card img{width:64px;height:36px;object-fit:cover;border-radius:4px;background:#0A0A0B;flex:0 0 auto}
.bx-card .t{flex:1;min-width:0}.bx-card .t b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-card .t span{font-size:11px;color:#9A9AA2}
.bx-compact .bx-card img{display:none}
.bx-play{background:#589000;color:#0A0A0B;border:0;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:12px;flex:0 0 auto}.bx-play:hover{background:#6BA80A}
.bx-open{color:#9A9AA2;font-size:12px;text-decoration:none}.bx-open:hover{color:#ECECF0}
.bx-empty{color:#6A6A72;font-size:13px;padding:6px}
/* player */
.bx-player{display:flex;flex-direction:column;gap:8px;height:100%}
.bx-stage{flex:1;min-height:60px;background:#0A0A0B;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bx-stage video,.bx-stage img{width:100%;height:100%;object-fit:contain}
.bx-np{display:flex;align-items:center;gap:10px;font-size:13px}
.bx-np b{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-time{color:#9A9AA2;font-variant-numeric:tabular-nums;font-size:12px}
.bx-wave{height:64px;width:100%;cursor:pointer;display:block;border-radius:4px;background:#0E0E10}
.bx-tl li{list-style:none;padding:5px 8px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;gap:8px}
.bx-tl{padding:0;margin:0}.bx-tl li:hover{background:#1C1C1F}.bx-tl li.on{background:#1C1C1F;color:#ECECF0;box-shadow:inset 3px 0 0 #589000}
.bx-tl .ts{color:#9A9AA2;font-variant-numeric:tabular-nums;min-width:56px}
.bx-notes{width:100%;height:100%;min-height:120px;background:transparent;color:#ECECF0;border:0;resize:none;font:inherit;font-size:14px;outline:none}
.bx-embed iframe{width:100%;border:0;border-radius:8px}
.bx-a{color:#589000}.bx-a:hover{color:#6BA80A}
.bx-zoomed>.bx-stack,.bx-zoomed>.bx-split{flex:1}
@media (max-width:720px){
  .bx-crumbs{display:none}.bx-switch{display:block;flex:1;background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:8px;padding:6px}
  .bx-link,.bx-who{display:none}.bx-menu{right:8px;left:8px}
}

/* FLOAT + SYNC 2026-10-23 */
.bx-slot{width:100%;height:100%;min-height:200px}
.bx-embeds{position:fixed;inset:0;pointer-events:none;z-index:30}
.bx-float{position:fixed;pointer-events:auto;overflow:auto;visibility:hidden;box-sizing:border-box}
body.bx-dragging .bx-float{pointer-events:none}
.bx-sync{font-size:11px;color:#9A9AA2;margin:0 4px 6px}
.bx-sync.ok{color:#589000}
/* NIGHT BUILD 2026-10-23: named layouts, crate & queue */
.bx-lay-pick{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;max-width:200px}
.bx-lay-pick:focus{outline:1px solid #589000}
.bx-lrow{display:flex;align-items:center;gap:2px}.bx-lrow .item{flex:1}.bx-lrow.on .item{color:#589000;font-weight:600}
.bx-qadd{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:50%;width:28px;height:28px;cursor:pointer;flex:0 0 auto;font-size:16px;line-height:1}
.bx-qadd:hover{border-color:#589000;color:#589000}.bx-qadd.ok{background:#589000;color:#0A0A0B;border-color:#589000}
.bx-card[draggable=true]{cursor:grab}
.bx-queue{padding:8px;display:flex;flex-direction:column;gap:6px}
.bx-qh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.bx-qh b{font-size:13px}.bx-qn{font-size:12px;color:#9A9AA2;flex:1}
.bx-ql{list-style:none;margin:0;padding:4px;border:1px dashed #2A2A2E;border-radius:8px;min-height:44px}
.bx-ql.bx-dropok{border-color:#589000;background:rgba(88,144,0,.08)}
.bx-qrow{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;font-size:13px}.bx-qrow:hover{background:#1C1C1F}
.bx-qrow.over{box-shadow:inset 0 2px 0 #589000}.bx-qrow .qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bx-qrow .grip{color:#6A6A72;cursor:grab}
.bx-cpick{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;padding:4px;font:inherit;font-size:12px}
.bx-next{font-size:14px}
.bx-studio{padding:8px}.bx-sform label{display:block;font-size:12px;color:#9A9AA2;margin:8px 0}
.bx-sform input:not([type=file]),.bx-sform textarea{display:block;width:100%;margin-top:4px;background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;padding:6px;font:13px Inter,system-ui,sans-serif}
.bx-sform input:focus,.bx-sform textarea:focus{outline:1px solid #589000}
.bx-stl{font-family:ui-monospace,monospace!important}
.bx-scover{display:flex;gap:10px;align-items:flex-start;margin-top:4px}.bx-scover img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid #2A2A2E}
.bx-sst{display:block;font-size:12px;color:#9A9AA2;margin:4px 0}.bx-spv{max-height:200px;overflow:auto;margin-top:6px}
.bx-sro{font-size:12px;color:#6A6A72;border-top:1px solid #222226;margin-top:10px;padding-top:8px}
.bx-cym{position:relative;width:100%;height:100%;min-height:160px;background:#0b0c0e}.bx-cym canvas{display:block;width:100%;height:100%}
.bx-cymtag{position:absolute;left:8px;bottom:6px;font-size:11px;color:#6A6A72;pointer-events:none}
.bx-ws.bx-map{overflow:hidden;padding:0;display:block}
.bx-mapwrap{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;padding:6px;box-sizing:border-box}
.bx-mapwrap.bx-flying{transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.bx-map .bx-stack{cursor:zoom-in;transition:box-shadow .15s}.bx-map .bx-stack:hover{box-shadow:0 0 0 2px #589000}
.bx-map .bx-stack *{pointer-events:none}
.bx-mgroup{position:relative;outline:1px dashed #2E2E34;outline-offset:-2px;border-radius:12px;padding:22px 4px 4px}
.bx-mgroup:hover{outline-color:#589000}
.bx-mchip{position:absolute;top:2px;left:8px;z-index:3;font:11px inherit;background:#141416;color:#9A9AA2;border:1px solid #2E2E34;border-radius:8px;padding:1px 8px;cursor:zoom-in;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-mchip:hover{color:#fff;border-color:#589000}
#bx-map.on{background:#589000;color:#fff;border-color:#589000}
.bx-public #bx-add,.bx-public #bx-layout,.bx-public #bx-lay-pick,.bx-public a[href*="upload"],.bx-public #bx-switch-x{display:none!important}
.bx-pubtag{color:#589000;font-weight:600;margin-right:10px}
.bx-pub{display:flex;flex-direction:column;gap:6px;padding:4px 10px 8px}.bx-pub input{width:100%}
.bx-publinks{display:flex;gap:8px;align-items:center}
.bx-pubmiss{margin:40px auto;font-size:15px}
/* PHONE HEADER 2026-10-23h: at phone widths the header wraps to two rows so every control stays on screen.
   Row 1: logo + layout picker + panel picker. Row 2: Map, Add panel, Layout. */
@media (max-width:560px){
  .bx-top{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;column-gap:8px;padding:6px 10px}
  .bx-lab{display:none}
  .bx-lay-pick{flex:1 1 0;min-width:0;max-width:none}
  .bx-switch{flex:1 1 0;min-width:0}
  .bx-actions{flex:1 0 100%;order:5;gap:6px}
  .bx-actions .bx-btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px;white-space:nowrap}
  .bx-ws{top:var(--bx-top-h,92px)}
}

/* BRANCH ONLY 2026-10-24: page panels, templates chooser */
.bx-frame { background: #0A0A0B; }
.bx-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #0A0A0B; }
button.bx-open { background: none; border: 1px solid #2A2A2F; color: #C9C9CF; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
button.bx-open:hover { border-color: #589000; color: #fff; }
.bx-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #6BA80A; text-decoration: underline; }
.bx-upload { padding: 4px 2px 16px; }
/* UPLOAD RESIZE 2026-10-28: the upload card used to be capped at 680px and kept the classic page's two-column .card grid
   (320px + the rest), so zooming the module to fill the screen (or making it wider) left it stuck at the left. It now
   fills the module: fields flow into as many ~280px columns as fit, the tracklist and buttons span the full width. */
.bx-upload #upload-offline-view { max-width: none; width: auto; margin: 0; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 18px; align-content: start; box-shadow: none; }
.bx-upload #upload-offline-view > * { grid-column: 1 / -1; min-width: 0; }
.bx-upload #upload-offline-view > label.lu-l { grid-column: auto; }
.bx-libbar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bx-libbar .bx-btn.on { background: #589000; border-color: #589000; color: #fff; }
.bx-wavep { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 120px; }
.bx-bigwave { flex: 1 1 auto; width: 100%; min-height: 90px; cursor: pointer; border-radius: 8px; background: #111114; }
.bx-tlb { display: flex; flex-direction: column; gap: 8px; }
.bx-tlb textarea { width: 100%; box-sizing: border-box; min-height: 160px; background: #111114; color: #ECECF0; border: 1px solid #2A2A2F; border-radius: 8px; padding: 8px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bx-blank { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.bx-blank .bx-btn { margin-right: 8px; }
.bx-panel.bx-flash { animation: bxflash .9s ease-out; }
@keyframes bxflash { from { box-shadow: inset 0 0 0 2px #6BA80A; } to { box-shadow: inset 0 0 0 2px transparent; } }
.bx-tplwrap { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,6,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bx-tplwrap[hidden] { display: none; }
.bx-tpl { background: #141417; border: 1px solid #2A2A2F; border-radius: 14px; padding: 22px; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; color: #ECECF0; }
.bx-tpl h2 { margin: 0 0 6px; font-size: 22px; }
.bx-tpl > .bx-sst { margin: 0 0 16px; color: #9A9AA2; font-size: 14px; }
.bx-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bx-tplcell { position: relative; }
.bx-tplcell .bx-ic { position: absolute; top: 6px; right: 6px; }
.bx-tplcard { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; height: 100%; box-sizing: border-box; background: #1B1B1F; border: 1px solid #2A2A2F; border-radius: 12px; padding: 14px; color: #ECECF0; cursor: pointer; font: inherit; }
.bx-tplcard:hover, .bx-tplcard:focus-visible { border-color: #589000; outline: none; }
.bx-tplcard b { font-size: 16px; color: #fff; }
.bx-tplcard span { font-size: 13px; color: #C9C9CF; }
.bx-tplcard small { font-size: 11px; color: #6BA80A; }
@media (max-width: 560px) { .bx-tpl { padding: 16px; } .bx-tplgrid { grid-template-columns: 1fr 1fr; } .bx-tpl h2 { font-size: 19px; } }
/* ESSENTIAL MODULES 2026-10-24: dock, search, settings, help, history, stats, export, notes. Greens: #589000 / #6BA80A / #3E6500 only. */
.bx-ws{bottom:var(--bx-dock-h,0px)}
.bx-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:44px minmax(120px,1fr) auto minmax(180px,2fr) auto;align-items:center;gap:10px;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));background:#0E0E10;border-top:1px solid #222226}
.bx-dock[hidden]{display:none}
.bx-dock.on{border-top-color:#3E6500}
.bx-dk-art{width:44px;height:44px;border-radius:6px;object-fit:cover;background:#1C1C1F}
.bx-dk-meta{min-width:0;cursor:pointer;display:flex;flex-direction:column}
.bx-dk-meta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-dk-meta span{font-size:12px;color:#9A9AA2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-dk-meta:hover b{color:#6BA80A}
.bx-dk-ctl{display:flex;gap:4px;align-items:center}
.bx-dk-b{background:none;border:1px solid transparent;color:#ECECF0;border-radius:8px;min-width:32px;height:32px;font-size:14px;cursor:pointer;padding:0 6px}
.bx-dk-b:hover{border-color:#2A2A2E;color:#6BA80A}
.bx-dk-b:focus-visible,.bx-dk-seek:focus-visible,.bx-dk-vol:focus-visible{outline:2px solid #589000;outline-offset:2px}
.bx-dk-pp{background:#589000;color:#0A0A0B;border-radius:50%;width:38px;height:38px;font-weight:700}
.bx-dk-pp:hover{background:#6BA80A;color:#0A0A0B}
.bx-dk-bar{display:flex;align-items:center;gap:8px;min-width:0}
.bx-dk-t{font-size:11px;color:#9A9AA2;font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.bx-dk-seekw{position:relative;flex:1;min-width:0;height:20px;display:flex;align-items:center}
.bx-dk-seek,.bx-dk-vol{width:100%;accent-color:#589000;margin:0;cursor:pointer}
.bx-dk-marks{position:absolute;left:0;right:0;top:2px;height:4px;pointer-events:none}
.bx-dk-marks span{position:absolute;top:0;width:2px;height:4px;background:#3E6500;border-radius:1px}
.bx-dk-side{display:flex;align-items:center;gap:4px}
.bx-dk-vol{width:90px}
.bx-dk-note{grid-column:1/-1;font-size:12px;color:#9A9AA2;margin-top:-2px}
.bx-dk-note[hidden]{display:none}
.bx-dk-link{background:none;border:0;color:#589000;cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.bx-dk-link:hover{color:#6BA80A}
@media (max-width:720px){
  .bx-dock{grid-template-columns:40px minmax(0,1fr) auto;gap:6px 8px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .bx-dk-art{width:40px;height:40px}
  .bx-dk-bar{grid-column:1/-1;grid-row:2}
  .bx-dk-side{display:none}
  .bx-dk-x{display:none}
  .bx-dk-b{min-width:36px;height:36px}
}
.bx-toast{position:fixed;left:50%;bottom:calc(var(--bx-dock-h,0px) + 16px);transform:translate(-50%,8px);z-index:70;background:#1C1C1F;color:#ECECF0;border:1px solid #3E6500;border-radius:8px;padding:8px 14px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(92vw,520px);text-align:center}
.bx-toast.on{opacity:1;transform:translate(-50%,0)}
.bx-search,.bx-sett,.bx-help,.bx-hist,.bx-stats,.bx-export{display:flex;flex-direction:column;gap:6px;font-size:13px}
.bx-sq,.bx-vhash{width:100%;background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:8px;padding:8px 10px;font:inherit;font-size:14px}
.bx-sq:focus,.bx-vhash:focus{outline:none;border-color:#589000}
.bx-sres{display:flex;flex-direction:column;gap:6px}
.bx-search h5,.bx-sett h5,.bx-help h5,.bx-export h5{margin:10px 0 2px;font-size:11px;color:#6A6A72;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.bx-shit{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:#1C1C1F;border:1px solid transparent;color:#ECECF0;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}
.bx-shit:hover{border-color:#3E6500}
.bx-shit small{color:#9A9AA2;font-size:12px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.bx-stime{color:#589000;font-variant-numeric:tabular-nums;font-size:12px;min-width:42px}
.bx-slab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-sres mark,.bx-card mark{background:rgba(88,144,0,.3);color:#ECECF0;border-radius:2px}
.bx-sett label.bx-setrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:6px 0;border-bottom:1px solid #1C1C1F}
.bx-sett label.bx-setrow small{grid-column:1/-1;color:#6A6A72;font-size:12px}
.bx-sett select,.bx-sett input[type=checkbox]{accent-color:#589000}
.bx-sett select,.bx-sett input:not([type]){background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;padding:4px 6px;font:inherit;font-size:13px;max-width:230px}
.bx-setbtns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.bx-adv{margin-top:10px;border:1px solid #222226;border-radius:8px;padding:6px 10px}
.bx-adv summary{cursor:pointer;color:#9A9AA2;font-size:13px}
.bx-adv summary:hover{color:#6BA80A}
.bx-setinfo{font-size:11px;color:#6A6A72;word-break:break-all;margin:6px 0}
.bx-keys{border-collapse:collapse;width:100%}
.bx-keys td{padding:4px 6px;border-bottom:1px solid #1C1C1F;vertical-align:top}
.bx-keys td:first-child{white-space:nowrap;color:#9A9AA2}
kbd{display:inline-block;background:#1C1C1F;border:1px solid #2A2A2E;border-bottom-width:2px;border-radius:5px;padding:0 6px;font:12px ui-monospace,monospace;color:#ECECF0}
.bx-helpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.bx-helpgrid .bx-shit{flex-direction:column;align-items:flex-start;gap:2px}
.bx-helpgrid .bx-shit small{margin-left:0;max-width:none;white-space:normal}
.bx-helpul{margin:0;padding-left:18px;color:#9A9AA2;line-height:1.5}
.bx-histtop{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#6A6A72;font-size:12px}
.bx-hrow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;background:#1C1C1F}
.bx-hrow img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.bx-hrow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bx-hrow .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-hrow .t span{font-size:12px;color:#9A9AA2}
.bx-hprog{height:3px;background:#2A2A2E;border-radius:2px;overflow:hidden}
.bx-hprog i{display:block;height:100%;background:#589000}
.bx-scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.bx-scard{background:#1C1C1F;border-radius:8px;padding:10px;display:flex;flex-direction:column}
.bx-scard b{font-size:20px;color:#ECECF0}
.bx-scard span{font-size:12px;color:#9A9AA2}
.bx-stbl{width:100%;border-collapse:collapse;font-size:13px}
.bx-stbl th{text-align:left;font-weight:500;color:#6A6A72;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border-bottom:1px solid #222226}
.bx-stbl td{padding:6px;border-bottom:1px solid #1C1C1F}
.bx-stbl td.n{font-variant-numeric:tabular-nums}
.bx-stbl .bx-link{background:none;border:0;cursor:pointer;padding:0;text-align:left;font:inherit}
.bx-spark{width:120px;height:28px;display:block}
.bx-spark rect{fill:#589000}
.bx-exhd{display:flex;flex-direction:column}
.bx-exhd span{font-size:12px;color:#9A9AA2}
.bx-export a.bx-btn{text-decoration:none;display:inline-block}
.bx-btn:disabled{opacity:.5;cursor:default}
.bx-fp{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;background:#1C1C1F;border-radius:8px;padding:8px}
.bx-fp b{text-transform:capitalize}
.bx-fp span{color:#9A9AA2;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-fp code{grid-column:1/-1;font:11px ui-monospace,monospace;color:#ECECF0;word-break:break-all}
.bx-fp .bx-link{background:none;border:0;cursor:pointer;grid-row:1;grid-column:3}
.bx-verify{display:flex;flex-direction:column;gap:6px}
.bx-verify small{color:#6A6A72;font-size:12px}
.bx-verify progress{width:100%;accent-color:#589000}
.bx-vres{font-size:13px;display:flex;flex-direction:column;gap:2px}
.bx-vres code{font:11px ui-monospace,monospace;word-break:break-all;color:#9A9AA2}
.bx-vres.ok b{color:#6BA80A}
.bx-vres.bad b{color:#E08A8A}
.bx-notesw{display:flex;flex-direction:column;height:100%;gap:6px}
.bx-notesbar{display:flex;gap:6px;align-items:center}
.bx-wc{margin-left:auto;color:#6A6A72;font-size:12px}
.bx-notesw .bx-notes{flex:1}
body.bx-dense .bx-card,body.bx-dense .bx-hrow{padding:3px 6px;gap:6px}
body.bx-dense .bx-card img,body.bx-dense .bx-hrow img{width:32px;height:32px}
body.bx-dense .bx-head{height:28px}
body.bx-dense .bx-ws{padding:3px}
body.bx-dense .bx-shit{padding:5px 8px}
body.bx-dense .bx-sett label.bx-setrow{padding:3px 0}
body.bx-dense .bx-dock{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom,0px))}
body.bx-dense .bx-dk-art{width:34px;height:34px}
/* SCROLLING WAVEFORM + CYMATICS 2026-10-24k */
.bx-lazy{position:relative;width:100%;height:100%;min-height:150px;display:flex;flex-direction:column}
.bx-swf{position:relative;flex:1;display:flex;flex-direction:column;min-height:150px;background:#080810;user-select:none;-webkit-user-select:none}
.bx-swf-stage{position:relative;flex:1;min-height:96px}
.bx-swf-main{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.bx-swf-main:active{cursor:grabbing}
.bx-swf-ov{display:block;width:100%;height:46px;flex:none;cursor:pointer;touch-action:none;border-top:1px solid #1a1a22}
.bx-swf-zoom{position:absolute;top:6px;right:18px;display:flex;gap:4px;z-index:2}
.bx-swf-zoom button{width:22px;height:18px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:3px;background:rgba(0,0,0,.55);color:#ddd;font:600 12px/16px system-ui,sans-serif;cursor:pointer}
.bx-swf-zoom button:hover{border-color:#6BA80A;color:#fff}
.bx-swf-st{flex:none;padding:3px 8px;font:11px/1.35 system-ui,sans-serif;color:#9A9AA2;background:#0A0A0B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-cym2{position:relative;flex:1;width:100%;height:100%;min-height:180px;background:#0b0c0e}
.bx-cym2-gl{position:absolute;inset:0 0 22px 0}
.bx-cym2-gl canvas{display:block;width:100%;height:100%}
.bx-cym2-tag{position:absolute;left:0;right:0;bottom:0;height:22px;padding:3px 8px;font:11px/16px system-ui,sans-serif;color:#9A9AA2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-cymph canvas.bx-cym2-gl{width:100%;height:calc(100% - 22px)}
.bx-set details{margin:6px 0}.bx-set details summary{cursor:pointer;color:#6BA80A;margin:4px 0}
/* Source picker for visualizers (audio routing hub, 2026-10-24l) */
.bx-srcpick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.bx-srcrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bx-srcpick .bx-srcrow label { display: flex !important; flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.bx-srcpick .bx-srcrow input[type=checkbox] { width: auto !important; flex: 0 0 auto; margin: 0; }
.bx-srcpick .bx-srcrow input[type=range] { width: 110px !important; flex: 0 0 auto; }
.bx-srcnote { font-size: 12px; opacity: .75; }
.bx-srcerr { font-size: 12px; color: #c0392b; }
/* 2026-10-24m: module sources that cannot be listened to, and the Tone module */
.bx-srcpick .bx-srcoff label { opacity: .55; }
.bx-tone { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.bx-tone .bx-btn { align-self: flex-start; }
/* route to visualizer (2026-10-24n) */
.bx-routebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 6px;font-size:12px}
.bx-routebar .bx-btn[data-on="1"]{border-color:#589000;color:#9fd85a}
.bx-routest{opacity:.75}
.bx-routeoffer{position:fixed;z-index:9999;right:16px;bottom:84px;max-width:360px;background:#111;border:1px solid #589000;border-radius:10px;padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:13px}
.bx-routeoffer>div{flex:1 1 100%}
@media (max-width:600px){.bx-routeoffer{left:12px;right:12px;bottom:96px;max-width:none}}
.bx-srcpick .bx-srclock label{font-style:normal}
/* PAYMENTS 2026-10-24r: Membership, Mix pool, Payments Blueprint, tip history. Green only on the main action. */
.pay{padding:10px;font-size:13px;color:#ECECF0;overflow:auto;height:100%}
.bx-tipbox .pay{height:auto;padding:10px 0 0}
.pay-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.pay-hd b{font-size:15px}
.pay-test{font-size:11px;color:#C9C9D0;background:#2A2410;border:1px solid #5A4A14;border-radius:999px;padding:1px 8px}
.pay-p{margin:4px 0 8px;line-height:1.45;color:#C9C9D0}
.pay-muted{color:#9A9AA2;font-size:12px;line-height:1.45;margin:6px 0}
.pay-bad{color:#FF9B8A;font-size:12px;margin:6px 0}.pay-good{color:#B9E08A;font-size:12px;margin:6px 0}
.pay-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.pay-row select,.pay-row input,.pay-prop input{background:#0A0A0B;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}
.pay-row input{flex:1 1 220px;min-width:0}
.pay-clock span{font-size:11px;color:#6A6A72;text-transform:uppercase;letter-spacing:.06em}
.pay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0}
.pay-card{background:#1C1C1F;border-radius:8px;padding:9px;display:flex;flex-direction:column}.pay-card b{font-size:16px;font-variant-numeric:tabular-nums}.pay-card span{font-size:11px;color:#9A9AA2}
.pay-chip{font-size:12px;border:1px solid #3A3A40;border-radius:999px;padding:2px 9px;color:#ECECF0}
.pay-status{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:8px 0;font-size:12px;color:#C9C9D0}
.pay-cd{color:#ECECF0;font-variant-numeric:tabular-nums}
.pay-tabs{display:flex;gap:4px;border-bottom:1px solid #222226;margin:4px 0 8px;overflow-x:auto}
.pay-tab{background:none;border:0;border-bottom:2px solid transparent;color:#9A9AA2;padding:6px 8px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}.pay-tab.on{color:#ECECF0;border-bottom-color:#ECECF0}
.pay-h5{margin:12px 0 4px;font-size:11px;color:#9A9AA2;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.pay-tbl td{vertical-align:top}.pay-tbl a{color:#C9C9D0}
.pay-sm{padding:3px 7px;font-size:12px;margin:1px 2px 1px 0}
.pay-tally{display:grid;gap:6px;margin:8px 0;font-size:12px;color:#C9C9D0}
.pay-bar{display:block;position:relative;height:6px;background:#1C1C1F;border-radius:3px;margin-top:3px}.pay-bar i{position:absolute;left:0;top:0;bottom:0;background:#8A8A92;border-radius:3px}.pay-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:#ECECF0}
.pay-det{margin:8px 0}.pay-det summary{cursor:pointer;color:#C9C9D0}
.pay-claims,.pay-log,.pay-ul{margin:6px 0;padding-left:20px;color:#C9C9D0;line-height:1.5}
.pay-prop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}.pay-prop label{display:flex;flex-direction:column;font-size:12px;color:#9A9AA2;gap:2px}
.pay-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin:6px 0}
.pay-fbox{background:#1C1C1F;border:1px solid #2A2A2E;border-radius:8px;padding:7px 9px;flex:1 1 120px;min-width:110px}.pay-fbox b{display:block;font-size:13px}.pay-fbox small{display:block;color:#9A9AA2;font-size:11px;line-height:1.35;margin-top:2px}
.pay-arr{align-self:center;color:#6A6A72}
@media (max-width:600px){.pay-arr{display:none}.pay-fbox{flex-basis:100%}.pay-tbl{font-size:12px}.pay-tbl th,.pay-tbl td{padding:4px}}
/* mix pool v2 (2026-10-25a) */
.pay-cbar{height:8px}.pay-cbar i{background:#589000}.pay-cbar em.pay-em99{background:#ECECF0;opacity:.55}
.pay-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.pay-matrix th,.pay-matrix td{white-space:nowrap}
.pay-merged td{border-top:1px solid #3A3A40}
p.pay-cd{margin:4px 0 8px;font-size:12px}
.pay-muted a{color:#ECECF0;text-decoration:underline}
/* TRACKLIST COLUMNS 2026-10-28: a compact DJ-library style grid. Columns come from --tlr-cols (set by the editor from
   the column setup); one line per track; the grid scrolls sideways when the columns are wider than the module. */
.tlr{container-type:inline-size;display:flex;flex-direction:column;gap:6px;min-width:0;position:relative}
.tlr-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border:1px solid #232327;border-radius:8px;background:#0F0F11}
.tlr-gi{min-width:var(--tlr-min,0)}
.tlr-list{display:flex;flex-direction:column}
.tlr-row,.tlr-hrow{display:grid;grid-template-columns:var(--tlr-cols,minmax(160px,1fr) minmax(140px,1fr) 112px 62px);column-gap:4px;align-items:center;padding:0 6px}
.tlr-row{min-height:34px;border-top:1px solid #1C1C1F}
.tlr-row:nth-child(even){background:#121214}
.tlr-row:hover{background:#17171A}
.tlr-row:focus-within{background:#18200E}
.tlr-hrow{position:sticky;top:0;z-index:2;background:#151518;border-bottom:1px solid #26262A;font-size:11px;color:#9A9AA2;text-transform:uppercase;letter-spacing:.04em;min-height:26px;user-select:none;-webkit-user-select:none}
.tlr-h{position:relative;display:flex;align-items:center;min-width:0;height:26px;padding:0 6px;cursor:grab;touch-action:none;border-radius:4px}
.tlr-h .tlr-hl{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tlr-h:hover{color:#ECECF0}
.tlr-h.dragging{opacity:.55;cursor:grabbing;background:#1C1C1F}
.tlr-h.drop-before{box-shadow:inset 2px 0 0 #589000}.tlr-h.drop-after{box-shadow:inset -2px 0 0 #589000}
.tlr-rs{position:absolute;right:-4px;top:2px;bottom:2px;width:8px;cursor:col-resize;z-index:3;touch-action:none}
.tlr-rs::after{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:1px;background:#33333A}
.tlr-h:hover .tlr-rs::after,.tlr-resizing .tlr-rs::after{background:#589000}
.tlr-resizing,.tlr-resizing *{cursor:col-resize!important}
.tlr-hctl{justify-content:flex-end;cursor:default;padding:0}
.tlr-gear{height:22px;width:26px;border-radius:5px;border:1px solid #2A2A2E;background:#1C1C1F;color:#9A9AA2;cursor:pointer;font-size:13px;padding:0}
.tlr-gear:hover{color:#ECECF0;border-color:#589000}
.tlr-cell{min-width:0;display:flex;align-items:center;gap:3px}
.tlr-num{font-size:12px;color:#6E6E76;font-variant-numeric:tabular-nums;padding-left:4px}
.tlr-row input,.tlr-row select{width:100%;min-width:0;box-sizing:border-box;background:transparent;color:#ECECF0;border:1px solid transparent;border-radius:5px;padding:5px 6px;font:inherit;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.tlr-row select{background:#141416;border-color:#232327;color-scheme:dark}
.tlr-row input:hover{border-color:#2A2A2E}
.tlr-row input:focus,.tlr-row select:focus{outline:none;border-color:#589000;background:#141416}
.tlr-row input::placeholder{color:#55555C}
.tlr-ti{color:#ECECF0!important;font-weight:500!important}
.tlr-a{color:#C9C9CE!important}
.tlr-t{font-variant-numeric:tabular-nums;text-align:right;flex:1 1 auto;background:#141416!important;border-color:#26262A!important}
.tlr-row.timed .tlr-t{border-color:#3E6500!important;box-shadow:inset 3px 0 0 #589000}
.tlr-t.bad,.tlr-row input.bad{border-color:#C0563F!important;box-shadow:none!important}
.tlr-row button{height:26px;border-radius:5px;border:1px solid #2A2A2E;background:#1C1C1F;color:#ECECF0;font:inherit;font-size:11px;cursor:pointer;padding:0 6px;flex:0 0 auto}
.tlr-row button:hover{border-color:#589000}
.tlr-now{color:#589000!important;font-weight:600}
.tlr-ctl{justify-content:flex-end;gap:3px}.tlr-ctl button{width:26px;padding:0}
.tlr-x{color:#9A9AA2!important}
.tlr-brk{display:none}
.tlr-dense .tlr-row{min-height:28px}.tlr-dense .tlr-row input,.tlr-dense .tlr-row select{padding:3px 5px;font-size:12px}.tlr-dense .tlr-row button{height:22px}
.tlr-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tlr-add{background:#589000;color:#0A0A0B;border:0;border-radius:6px;font-weight:700;font-size:14px;padding:5px 14px;cursor:pointer}
.tlr-add:hover{background:#6BA80A}
.tlr-colsbtn{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;font:inherit;font-size:12px;padding:5px 10px;cursor:pointer}
.tlr-colsbtn:hover{border-color:#589000}
.tlr-note{font-size:12px;color:#9A9AA2}
.tlr-orig summary{font-size:12px;color:#9A9AA2;cursor:pointer}
.tlr-orig textarea{width:100%;box-sizing:border-box;margin-top:6px;background:#141416;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;font:12px/1.4 ui-monospace,monospace;padding:6px}
/* the Columns menu (like Engine DJ's column picker) */
.tlr-menu{position:absolute;right:0;top:30px;z-index:30;width:min(320px,100%);max-height:min(70vh,560px);overflow:auto;background:#151518;border:1px solid #33333A;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.55);padding:10px;font-size:13px;color:#ECECF0;box-sizing:border-box}
.tlr-mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tlr-mhint{font-size:11px;color:#9A9AA2;margin:2px 0 8px}
.tlr-mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tlr-mlist li{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:6px}
.tlr-mlist li:hover{background:#1C1C1F}.tlr-mlist li.dragging{background:#1B2410;outline:1px solid #3E6500}
.tlr-mlist label{flex:1;display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0}
.tlr-mlist input{accent-color:#589000}
.tlr-grip{cursor:grab;color:#6E6E76;font-size:15px;padding:0 4px;touch-action:none;user-select:none}
.tlr-mv{background:none;border:0;color:#6E6E76;cursor:pointer;font-size:12px;padding:2px 4px}.tlr-mv:hover{color:#ECECF0}
.tlr-mbtn{background:#1C1C1F;color:#ECECF0;border:1px solid #2A2A2E;border-radius:6px;font:inherit;font-size:12px;padding:4px 10px;cursor:pointer}.tlr-mbtn:hover{border-color:#589000}
.tlr-adv{margin-top:8px;border-top:1px solid #26262A;padding-top:6px}.tlr-adv summary{cursor:pointer;color:#9A9AA2;font-size:12px;padding:2px 0}
.tlr-mrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;font-size:12px;color:#C9C9CE}
.tlr-mrow input[type=number]{width:72px;background:#0F0F11;color:#ECECF0;border:1px solid #2A2A2E;border-radius:5px;padding:3px 6px;font:inherit}
.tlr-mchk{justify-content:flex-start}.tlr-mchk input{accent-color:#589000}
.tlr-mf{display:flex;justify-content:flex-end;margin-top:8px}
/* phone and narrow modules: each track is a small card. Line 1: time, track title, play/remove; the other columns below */
@container (max-width:480px){
  .tlr-scroll{border:0;background:none;overflow:visible}
  .tlr-gi{min-width:0}
  .tlr-hrow{display:none}
  .tlr-list{gap:6px}
  .tlr-row{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid #232327;border-radius:8px;background:#121214!important}
  .tlr-row .tlr-cell{order:2;flex:1 1 calc(50% - 4px);min-width:110px}
  .tlr-row .tlr-k-num{order:0;flex:0 0 auto;min-width:0}
  .tlr-row .tlr-k-t{order:0;flex:0 0 112px;min-width:0}
  .tlr-row .tlr-k-title{order:0;flex:1 1 0;min-width:0}
  .tlr-row .tlr-ctl{order:0;flex:0 0 auto;min-width:0}
  .tlr-brk{display:block;order:1;flex-basis:100%;height:0}
  .tlr-row input{border-color:#232327;background:#141416}
  .tlr-menu{position:fixed;left:8px;right:8px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));width:auto;max-height:65vh}
}
.bx-tlrw{min-width:0}
/* view mode: times are links, YouTube comment style */
a.tl-ts{color:#589000;text-decoration:none;font-variant-numeric:tabular-nums}
a.tl-ts:hover{text-decoration:underline}
.bx-tl a.tl-ts{min-width:56px}
/* TRACKLIST COLUMNS 2026-10-28: view mode, the printed tracklist with the chosen columns in order */
.bx-tlv{container-type:inline-size}
.bx-tlv li.tlv-row,.bx-tlv li.tlv-head{display:grid;grid-template-columns:var(--tlv-cols,minmax(56px,auto) minmax(0,1fr));gap:10px;align-items:baseline}
.bx-tlv li.tlv-head{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#6E6E76;cursor:default;padding-top:2px;padding-bottom:2px}
.bx-tlv li.tlv-head:hover{background:none}
.bx-tlv .tlv-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-tlv .tlv-title{color:#ECECF0}.bx-tlv .tlv-artist{color:#B9B9C0}
.bx-tlv .tlv-version,.bx-tlv .tlv-label,.bx-tlv .tlv-album,.bx-tlv .tlv-genre,.bx-tlv .tlv-comment,.bx-tlv .tlv-year,.bx-tlv .tlv-bpm,.bx-tlv .tlv-key,.bx-tlv .tlv-num{color:#8A8A92;font-size:12px}
.bx-tlv .tlv-num,.bx-tlv .tlv-bpm,.bx-tlv .tlv-year{font-variant-numeric:tabular-nums}
.tlv-link{color:#589000;text-decoration:none;font-size:12px}.tlv-link:hover{text-decoration:underline}
.tlv-chip{font-size:10px;border:1px solid #3E6500;color:#9BCB4A;border-radius:999px;padding:0 6px}
@container (max-width:420px){
  .bx-tlv li.tlv-head{display:none}
  .bx-tlv li.tlv-row{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:0}
  .bx-tlv .tlv-c{white-space:normal}
  .bx-tlv .tlv-t{order:-2;min-width:52px}.bx-tlv .tlv-title{order:-1;flex:1 1 60%}
  .bx-tlv .tlv-c:not(.tlv-t):not(.tlv-title){padding-left:60px;flex:1 1 100%;font-size:12px}
}
.bx-dk-marks{z-index:2}
.bx-dk-marks span{pointer-events:auto;cursor:pointer;height:6px;top:-1px}
.bx-dk-marks span::before{content:"";position:absolute;left:-5px;right:-5px;top:-4px;bottom:-4px}
.bx-dk-marks span:hover{background:#589000}
/* POP-OUT SETTINGS 2026-10-28b */
.bx-pop{position:fixed;z-index:900;width:340px;max-width:calc(100vw - 8px);max-height:calc(100vh - 16px);display:flex;flex-direction:column;background:#101012;border:1px solid #2A2A2E;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.6);color:#ECECF0}
.bx-pop-hd{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-bottom:1px solid #222226;cursor:grab;user-select:none;touch-action:none;flex:none}
.bx-pop-hd:active{cursor:grabbing}
.bx-pop-t{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-pop-tabs{display:flex;border:1px solid #2A2A2E;border-radius:6px;overflow:hidden}
.bx-pop-tab{background:none;border:0;color:#9A9AA2;padding:4px 9px;font:inherit;font-size:12px;cursor:pointer}
.bx-pop-tab.on{background:#589000;color:#fff}
.bx-pop-x{background:none;border:1px solid #2A2A2E;color:#ECECF0;border-radius:6px;width:28px;height:26px;cursor:pointer;font-size:13px}
.bx-pop-x:hover{border-color:#589000}
.bx-pop-b{overflow:auto;flex:1;min-height:0;border-bottom:0!important;overscroll-behavior:contain}
.bx-pop-b[hidden]{display:none}
.bx-pop-dock{top:56px!important;right:0;left:auto!important;bottom:0;max-height:none;border-radius:10px 0 0 10px}
.bx-pop-sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-width:none;max-height:50vh;border-radius:14px 14px 0 0}
.bx-pop-sheet .bx-pop-hd{cursor:default}
@media (max-width:599px){body.bx-sheet-open .bx-ws{bottom:var(--bx-sheet,50vh)!important;height:auto!important}}
.bx-panel.bx-editing{outline:1px solid #589000;outline-offset:-1px}
@media (min-width:600px){body.bx-pop-docked .bx-ws{right:352px!important}.bx-pop-dock{width:348px}}

/* PHASE 1 2026-10-29a: Detail strip, power switch, Published view preview */
.bx-pop-strip{max-height:40vh}
@media (min-width:600px){body.bx-sheet-open.bx-strip-on .bx-ws{bottom:var(--bx-sheet,40vh)!important;height:auto!important}}
.bx-ic.bx-power.off{color:#6A6A72}.bx-ic.bx-power:not(.off){color:#589000}
.bx-offbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;color:#9A9AA2}
.bx-pubprev-btn{flex:none;margin:0 6px;white-space:nowrap;background:none;border:1px solid #33333A;color:#9A9AA2;border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer}
.bx-pubprev-btn.on{border-color:#589000;color:#ECECF0;background:#1B2410}
body.bx-pubprev .bx-own{display:none!important}
/* FF 2026-11-01a: Scrolling Waveform settings pop-out, restyled on Fluid Functionalism rules: one 36px control height
   (32px phone sheet inputs grow to 16px text so iOS doesn't zoom), concentric corners (12 outer, 8 inner at 4px inset),
   2 text colours, toggles on the right of their label, a sliding tab pill, motion on the 120/160ms tokens via transform/opacity only. */
.bx-pop-ff{width:360px;border-radius:12px;background:#0F0F11;border-color:#26262A;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 48px rgba(0,0,0,.55);animation:bxffIn .16s cubic-bezier(.2,.8,.2,1)}
@keyframes bxffIn{from{opacity:0;transform:translateY(4px) scale(.985)}}
.bx-pop-ff .bx-pop-hd{padding:8px 8px 8px 14px;gap:8px;border-bottom-color:#1E1E22}
.bx-pop-ff .bx-pop-t{font-size:13px;font-weight:600;color:#ECECF0;min-width:84px}
.bx-pop-ff .bx-pop-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:156px;flex:none;box-sizing:border-box;padding:3px;gap:0;background:#17171A;border:1px solid #26262A;border-radius:10px;overflow:visible}
.bx-pop-ff .bx-pop-tabs::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:7px;background:#589000;transition:transform .16s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.bx-pop-ff .bx-pop-tabs.bx-adv::before{transform:translateX(100%)}
.bx-pop-ff .bx-pop-tab{position:relative;z-index:1;height:24px;padding:0;border-radius:7px;color:#9A9AA2;font-weight:500;transition:color .12s}
.bx-pop-ff .bx-pop-tab.on{background:none;color:#fff;font-weight:600}
.bx-pop-ff .bx-pop-tab:not(.on):hover{color:#ECECF0}
.bx-pop-ff .bx-pop-x{width:30px;height:30px;border-radius:8px;border-color:transparent;background:#17171A;color:#9A9AA2;transition:color .12s,background-color .12s}
.bx-pop-ff .bx-pop-x:hover{color:#ECECF0;background:#202024;border-color:transparent}
.bx-pop-ff .bx-pop-x:focus-visible,.bx-pop-ff .bx-pop-tab:focus-visible{outline:2px solid #589000;outline-offset:1px}
.bx-pop-ff .bx-set{background:none;padding:12px 14px 14px;gap:12px}
.bx-pop-ff .bx-set label{gap:6px;color:#ECECF0;font-size:13px;line-height:18px}
.bx-pop-ff .bx-set input:not([type=checkbox]):not([type=range]),.bx-pop-ff .bx-set select{height:36px;box-sizing:border-box;border-radius:8px;background:#0A0A0B;border-color:#26262A;padding:0 10px;transition:border-color .12s}
.bx-pop-ff .bx-set input:not([type=checkbox]):hover,.bx-pop-ff .bx-set select:hover{border-color:#34343A}
.bx-pop-ff .bx-set input:focus-visible,.bx-pop-ff .bx-set select:focus-visible{outline:none;border-color:#589000}
.bx-pop-ff .bx-set label:has(> input[type=checkbox]){display:flex;justify-content:space-between;align-items:center;column-gap:12px;min-height:36px;padding:0;border-top:1px solid #1A1A1D;padding-top:8px}
.bx-pop-ff .bx-set input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;width:34px;height:20px;border-radius:10px;background:#2A2A2E;position:relative;cursor:pointer;transition:background-color .16s;flex:none}
.bx-pop-ff .bx-set input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#ECECF0;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.bx-pop-ff .bx-set input[type=checkbox]:checked{background:#589000}
.bx-pop-ff .bx-set input[type=checkbox]:checked::after{transform:translateX(14px)}
.bx-pop-ff .bx-set input[type=checkbox]:focus-visible{outline:2px solid #589000;outline-offset:2px}
.bx-pop-ff .bx-set > div:not([class]),.bx-pop-ff .bx-set p,.bx-pop-ff .bx-set small{color:#8A8A92;font-size:12px;line-height:17px;text-align:left}
.bx-pop-ff .bx-set details summary{color:#ECECF0;font-weight:600}
.bx-pop-ff .bx-btn{height:36px;border-radius:8px}
.bx-pop-ff.bx-pop-sheet{width:auto;border-radius:16px 16px 0 0}
@media (max-width:599px){.bx-pop-ff .bx-set input:not([type=checkbox]):not([type=range]),.bx-pop-ff .bx-set select{font-size:16px;height:40px}}
@media (prefers-reduced-motion:reduce){.bx-pop-ff,.bx-pop-ff *,.bx-pop-ff *::before,.bx-pop-ff *::after{animation:none!important;transition-property:color,background-color,opacity!important}}
.bx-pop-ff .bx-set label > input[type=checkbox]{order:2;margin-left:auto}
.bx-pop-ff .bx-set input[type=range]{accent-color:#589000;width:100%}
.bx-pop-ff .bx-srcpick .bx-srcrow{min-height:36px}
.bx-pop-ff .bx-srcpick .bx-srcrow label{justify-content:space-between}
.bx-pop-ff .bx-srcpick .bx-srcrow input[type=checkbox]{width:34px!important;order:2;margin-left:auto}
.bx-pop-ff .bx-pop-tabs{width:140px}
.bx-pop-ff .bx-pop-t{min-width:0}
.bx-pop-ff .bx-pop-x{width:28px;height:28px}
.bx-pop-ff,.bx-pop-ff *{box-sizing:border-box}
.bx-pop-ff .bx-pop-b{overflow-x:hidden}
.bx-pop-ff .bx-pop-x{flex:none}
.bx-pop-ff .bx-set input[type=range]{margin:0}
/* FF 2026-11-03a: every pop-out. The title gets its own line so the full module name shows (no "Scrolling ..."). */
.bx-pop-ff .bx-pop-hd{flex-wrap:wrap;row-gap:8px}
.bx-pop-ff .bx-pop-t{flex:1 1 100%;order:-1;font-size:14px;line-height:20px;white-space:normal;overflow:visible}
.bx-pop-ff .bx-pop-tabs{margin-right:auto}
.bx-pop-ff .bx-empty{color:#8A8A92;font-size:12px}
.bx-pop-ff .bx-pop-b .bx-btn:not(.bx-primary){background:#17171A;border-color:#26262A}
/* FF 2026-11-03b: module headers, buttons and inputs */
.bx-head{height:36px;padding:0 6px;gap:4px}
.bx-tab{min-width:0;padding:6px 10px;font-size:13px;line-height:18px;transition:background-color .15s ease,color .15s ease}
.bx-tab>span:not(.grip){overflow:hidden;text-overflow:ellipsis}
.bx-tab:hover{color:#ECECF0}
.bx-head .bx-ic{font-size:15px;min-width:28px;height:28px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:none;transition:background-color .15s ease,color .15s ease}
.bx-btn,button.bx-open{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.bx-btn:active:not(:disabled),button.bx-open:active,.bx-ic:active{transform:scale(.97)}
.bx-btn:focus-visible,button.bx-open:focus-visible,.bx-ic:focus-visible,.bx-tab:focus-visible{outline:2px solid #589000;outline-offset:2px}
input[type=text],input[type=number],input[type=search],input[type=url],input:not([type]),select,textarea{transition:border-color .15s ease,box-shadow .15s ease}
input[type=text]:focus-visible,input[type=number]:focus-visible,input[type=search]:focus-visible,input[type=url]:focus-visible,input:not([type]):focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:#589000;box-shadow:0 0 0 3px rgba(88,144,0,.25)}
@media (prefers-reduced-motion:reduce){.bx-tab,.bx-head .bx-ic,.bx-btn,button.bx-open{transition:none}.bx-btn:active,button.bx-open:active,.bx-ic:active{transform:none}}
/* FF 2026-11-03c: player transport and tracklist editor grid */
.bx-dk-b{min-width:36px;height:36px;font-size:16px;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.bx-dk-b:hover{background:#17171A}
.bx-dk-b:active{transform:scale(.95)}
.bx-dk-pp{width:40px;height:40px;font-size:16px}
.bx-dk-t{font-size:12px}
.bx-dk-ctl{gap:6px}
.tlr-hrow{font-size:12px;text-transform:none;letter-spacing:0;font-weight:500;min-height:30px}
.tlr-h{height:30px}
.tlr:not(.tlr-dense) .tlr-row{min-height:38px}
.tlr:not(.tlr-dense) .tlr-row button{height:28px;border-radius:6px;font-size:12px;padding:0 8px}
.tlr:not(.tlr-dense) .tlr-ctl button{width:28px;padding:0}
.tlr-row button{transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
.tlr-row button:active{transform:scale(.96)}
.tlr-row button:focus-visible,.tlr-gear:focus-visible,.tlr-add:focus-visible{outline:2px solid #589000;outline-offset:2px}
.tlr-row button.tlr-now{background:#18200E;border-color:#3E6500}
.tlr-gear{height:26px;width:30px;border-radius:6px}
.tlr-add{border-radius:8px;padding:7px 16px;transition:background-color .15s ease,transform .1s ease}
.tlr-add:active{transform:scale(.97)}
@media (max-width:600px){.tlr:not(.tlr-dense) .tlr-row button{height:32px}.tlr:not(.tlr-dense) .tlr-row .tlr-cell button{min-width:32px}}
@media (prefers-reduced-motion:reduce){.bx-dk-b,.tlr-row button,.tlr-add{transition:none}.bx-dk-b:active,.tlr-row button:active,.tlr-add:active{transform:none}}
/* FF 2026-11-03d: phone top bar, nothing clipped. Row 1: logo, layout, Published view. Row 2: module switch, full width.
   Row 3: the action buttons at their natural width, sliding sideways if they do not all fit. */
@media (max-width:560px){
  .bx-top{row-gap:6px}
  .bx-lay-pick{order:1;flex:1 1 0;height:34px}
  .bx-pubprev-btn{order:2;flex:none;white-space:nowrap}
  .bx-switch{order:3;flex:1 0 100%;height:34px}
  .bx-actions{order:5;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -10px;padding:0 10px 2px}
  .bx-actions::-webkit-scrollbar{display:none}
  .bx-actions .bx-btn{flex:none;min-width:0;height:34px;padding-left:12px;padding-right:12px}
}