/* ═══════════════════════════════════════════════
   BH Vocal Studio DAW v5
   ═══════════════════════════════════════════════ */
#bh-vs{
  width:100%;max-width:none;padding:0;
  font-family:'DM Mono',monospace;
  --cb:#22B6FF;--cp:#22B6FF;--cr:#ef4444;--crh:#f87171;
  --cb-deep:#1A96E8;--cb-light:#4AB8F5;--cb-tint:#7FD0FF;
  --cbo:rgba(34,182,255,.14);--cpo:rgba(34,182,255,.14);
  --bdr:rgba(255,255,255,.07);--bg:rgba(8,7,12,.95);
  --sur:rgba(255,255,255,.025);--muted:rgba(255,255,255,.28);
  --sidebar:188px;
}
#bh-vs .vh{display:none!important;}
#bh-vault-player,#bh-fp{display:none!important;}

/* ─── VS Home ─── */
#bh-vs-home{
  display:flex;flex-direction:column;gap:0;
  background:var(--bg);min-height:clamp(520px,calc(100vh - 120px),1100px);
  overflow-y:auto;
}
.vs-home-hero{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:32px 28px 24px;border-bottom:1px solid var(--bdr);
  background:linear-gradient(160deg,rgba(34,182,255,.06) 0%,rgba(74,184,245,.04) 100%);
}
.vs-home-hero-left{display:flex;flex-direction:column;gap:6px;}
.vs-home-hero-title{
  font-size:24px;font-weight:800;color:#fff;letter-spacing:-.01em;
  font-family:'Syne',sans-serif;line-height:1.1;
}
.vs-home-hero-sub{font-size:11px;color:var(--muted);letter-spacing:.04em;font-family:'DM Mono',monospace;}
.vs-home-new-btn{
  display:flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:28px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cp) 0%,var(--cb) 100%);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;
  font-family:'DM Mono',monospace;transition:opacity .15s,transform .15s;
  box-shadow:0 4px 18px rgba(34,182,255,.35);
}
.vs-home-new-btn:hover{opacity:.88;transform:translateY(-1px);}
.vs-home-new-btn svg{width:14px;height:14px;flex-shrink:0;}
.vs-home-section{padding:24px 28px;}
.vs-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.vs-section-title{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);font-family:'DM Mono',monospace;
}
.vs-section-viewall{
  font-size:10px;color:var(--cb);text-decoration:none;letter-spacing:.05em;
  border:1px solid rgba(74,184,245,.2);border-radius:12px;padding:4px 12px;
  transition:background .14s;font-family:'DM Mono',monospace;
}
.vs-section-viewall:hover{background:rgba(74,184,245,.1);}
.vs-take-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.vs-take-card{
  background:var(--sur);border:1px solid var(--bdr);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .14s;
}
.vs-take-card:hover{border-color:rgba(255,255,255,.14);}
.vs-take-card-top{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;}
.vs-take-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:rgba(255,255,255,.08);border:1px solid var(--bdr);
}
.vs-take-meta{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.vs-take-user{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.78);
  font-family:'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vs-take-beat{
  font-size:9px;color:var(--muted);font-family:'DM Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vs-take-badge{font-size:8px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:8px;flex-shrink:0;}
.vs-take-badge-pub{background:rgba(74,184,245,.1);border:1px solid rgba(74,184,245,.25);color:var(--cb);}
.vs-take-badge-priv{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.3);}
.vs-take-card-foot{
  display:flex;align-items:center;gap:8px;padding:10px 14px 12px;
  border-top:1px solid var(--bdr);background:rgba(0,0,0,.15);
}
.vs-take-playbtn{
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(34,182,255,.35);
  background:rgba(34,182,255,.1);color:#7FD0FF;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .14s;
}
.vs-take-playbtn:hover{background:rgba(34,182,255,.25);border-color:rgba(34,182,255,.6);}
.vs-take-playbtn svg{width:10px;height:10px;pointer-events:none;}
.vs-take-audio{flex:1;height:20px;min-width:0;opacity:.7;}
.vs-take-dur{font-size:9px;color:var(--muted);font-family:'DM Mono',monospace;flex-shrink:0;}
.vs-take-date{font-size:8px;color:rgba(255,255,255,.2);font-family:'DM Mono',monospace;}
.vs-beat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  max-height:420px;overflow-y:auto;padding-right:4px;
}
.vs-beat-card{
  display:flex;align-items:center;gap:12px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:10px;
  padding:12px;cursor:pointer;transition:all .14s;
}
.vs-beat-card:hover{border-color:rgba(74,184,245,.35);background:rgba(74,184,245,.05);}
.vs-beat-thumb{
  width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;
  background:rgba(255,255,255,.07);border:1px solid var(--bdr);
}
.vs-beat-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.vs-beat-title{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.85);
  font-family:'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vs-beat-tags{display:flex;gap:5px;flex-wrap:wrap;}
.vs-beat-tag{font-size:8px;padding:2px 7px;border-radius:6px;font-family:'DM Mono',monospace;}
.vs-beat-tag-bpm{background:rgba(74,184,245,.1);border:1px solid rgba(74,184,245,.2);color:var(--cb);}
.vs-beat-tag-key{background:rgba(34,182,255,.1);border:1px solid rgba(34,182,255,.2);color:#7FD0FF;}
.vs-beat-tag-genre{background:rgba(127,208,255,.1);border:1px solid rgba(127,208,255,.22);color:var(--cb-tint,#7FD0FF);}
.vs-beat-producer{display:flex;align-items:center;gap:5px;}
.vs-beat-producer-av{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.08);}
.vs-beat-producer-name{font-size:9px;color:rgba(255,255,255,.4);font-family:'DM Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-beat-price{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);font-family:'DM Mono',monospace;}
.vs-beat-search-row{flex-shrink:0;}
.vs-beat-search{
  width:100%;padding:10px 14px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid var(--bdr);
  color:#fff;font-size:12px;font-family:'DM Mono',monospace;outline:none;transition:border-color .14s;
}
.vs-beat-search::placeholder{color:rgba(255,255,255,.25);}
.vs-beat-search:focus{border-color:rgba(34,182,255,.45);}
.vs-beat-loadmore{
  align-self:center;margin-top:4px;padding:8px 20px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid var(--bdr);
  color:rgba(255,255,255,.6);font-size:10px;font-weight:700;letter-spacing:.05em;
  font-family:'DM Mono',monospace;cursor:pointer;transition:all .14s;
}
.vs-beat-loadmore:hover{background:var(--cbo);border-color:rgba(34,182,255,.4);color:#fff;}
.vs-beat-loadmore:disabled{opacity:.5;cursor:default;}
#bh-vs-new-modal{
  position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
}
.vs-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.78);}
.vs-modal-box{
  position:relative;z-index:1;
  background:#12111a;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:24px 24px 20px;width:min(620px,95vw);max-height:90vh;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
}
.vs-modal-head{display:flex;align-items:center;justify-content:space-between;}
.vs-modal-title{font-size:14px;font-weight:700;color:#fff;font-family:'Manrope',sans-serif;}
.vs-modal-close{
  width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .12s;
}
.vs-modal-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.vs-grid-loading{
  grid-column:1/-1;text-align:center;padding:20px;
  font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:.04em;
}
@media(max-width:900px){.vs-take-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
  .vs-home-hero{padding:20px 16px 16px;}
  .vs-home-section{padding:16px;}
  .vs-take-grid{grid-template-columns:1fr;}
  .vs-beat-grid{grid-template-columns:1fr;}
  .vs-home-new-btn{padding:11px 18px;}
}

/* ─── DAW shell — fills viewport ─── */
#bh-vs-daw{
  display:flex;flex-direction:column;position:relative;
  min-height:clamp(520px,calc(100vh - 120px),1100px);
  border:1px solid var(--bdr);border-radius:0;overflow:hidden;background:var(--bg);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
}

/* ══════ TRANSPORT ══════ */
#bh-vs-tp{
  display:flex;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--bdr);
  background:rgba(255,255,255,.018);min-height:50px;
}
.vs-tb{display:flex;align-items:center;border-right:1px solid var(--bdr);height:50px;padding:0 12px;gap:7px;flex-shrink:0;}
.vs-tb:last-child{border-right:0;}
.vs-tbtn{
  width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;
}
.vs-tbtn:hover{background:rgba(255,255,255,.1);color:#fff;}
.vs-tbtn.active{background:rgba(74,184,245,.16);border-color:rgba(74,184,245,.42);color:var(--cb);}
.vs-tbtn.rec{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.28);color:var(--crh);}
.vs-tbtn.rec.go{background:rgba(239,68,68,.26);border-color:var(--cr);color:#fff;animation:rp 1s ease-in-out infinite;}
@keyframes rp{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55);}55%{box-shadow:0 0 0 9px rgba(239,68,68,0);}}
.vs-tbtn svg{width:12px;height:12px;pointer-events:none;}
.vs-time{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.04em;font-variant-numeric:tabular-nums;min-width:90px;}
.vs-tp-title{
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
.vs-badge{font-size:10px;font-weight:700;letter-spacing:.07em;padding:4px 10px;border-radius:5px;white-space:nowrap;}
.vs-badge-bpm{background:rgba(74,184,245,.1);border:1px solid rgba(74,184,245,.22);color:var(--cb);}
.vs-badge-key{background:rgba(34,182,255,.1);border:1px solid rgba(34,182,255,.22);color:#7FD0FF;}
/* Key shift controls */
.vs-kshift-wrap{display:flex;align-items:center;gap:5px;}
.vs-kshift{
  width:22px;height:22px;border-radius:5px;border:1px solid rgba(34,182,255,.3);
  background:rgba(34,182,255,.08);color:#7FD0FF;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;line-height:1;
}
.vs-kshift:hover{background:rgba(34,182,255,.22);border-color:rgba(34,182,255,.6);color:#fff;}
.vs-kname{
  font-size:13px;font-weight:900;color:#7FD0FF;letter-spacing:.02em;
  min-width:28px;text-align:center;font-family:'Manrope',sans-serif;
}
.vs-loop{
  width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.09);background:transparent;
  color:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;
}
.vs-loop.active{border-color:rgba(74,184,245,.38);color:var(--cb);background:rgba(74,184,245,.08);}
.vs-metro.active{border-color:rgba(34,182,255,.45);color:var(--cp,#22B6FF);background:rgba(34,182,255,.1);}
.vs-metro.active svg{animation:vs-metro-tick .5s ease-in-out infinite alternate;transform-origin:12px 21px;}
@keyframes vs-metro-tick{from{transform:rotate(-11deg);}to{transform:rotate(11deg);}}
.vs-buy-link{
  font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:5px 12px;transition:all .14s;white-space:nowrap;
}
.vs-buy-link:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);}
.vs-notice{display:flex;align-items:center;gap:5px;font-size:9px;color:rgba(255,255,255,.18);letter-spacing:.03em;padding-right:4px;}

/* ══════ TRACKS — grow to fill ══════ */
#bh-vs-tracks{display:flex;flex-direction:column;flex:1;}
.vs-track{display:flex;align-items:stretch;border-bottom:1px solid var(--bdr);flex:1;}
.vs-track:last-child{border-bottom:0;}
.vs-track--beat{min-height:140px;}
.vs-track--vocal{min-height:160px;flex:1.3;}

/* 4-layer mixer console: one strip per vocal layer, compact so all 4 fit */
#bh-vs-vocal-layers{display:flex;flex-direction:column;flex:1.6;min-height:0;}
#bh-vs-vocal-layers .vs-track--vocal{min-height:60px;flex:1;border-bottom:1px solid var(--bdr);opacity:.55;transition:opacity .15s,background .15s;}
#bh-vs-vocal-layers .vs-track--vocal:last-child{border-bottom:0;}
#bh-vs-vocal-layers .vs-track--vocal.is-armed{opacity:1;background:rgba(34,182,255,.05);}
#bh-vs-vocal-layers .vs-track--vocal .vs-track__cv{height:calc(100% - 10px);}
.vs-layer-arm{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,182,255,.13);border:1px solid rgba(34,182,255,.22);
}
.is-armed .vs-layer-arm{background:rgba(34,182,255,.32);border-color:rgba(34,182,255,.6);}
.vs-solo{
  width:20px;height:20px;border-radius:4px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:rgba(255,255,255,.22);font-size:7px;font-weight:700;cursor:pointer;transition:all .14s;
}
.vs-solo:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);}
.vs-solo.on{background:rgba(250,204,21,.18);border-color:rgba(250,204,21,.5);color:#facc15;}
#bh-vs-mic-gain-row{padding:6px 12px;border-top:1px solid var(--bdr);}

/* Sidebar */
.vs-track__sb{
  width:var(--sidebar);flex-shrink:0;display:flex;gap:8px;align-items:center;
  padding:10px 12px;border-right:1px solid var(--bdr);background:rgba(255,255,255,.012);
}
.vs-track__art{
  width:52px;height:52px;border-radius:9px;flex-shrink:0;object-fit:cover;
  background:rgba(255,255,255,.06);border:1px solid var(--bdr);display:none;
}
.vs-track__art.loaded{display:block;}
.vs-track__meta{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;}
.vs-track__head{display:flex;align-items:center;gap:7px;}
.vs-track__icon{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.vs-track--beat .vs-track__icon{background:rgba(74,184,245,.13);border:1px solid rgba(74,184,245,.22);}
.vs-track--vocal .vs-track__icon{background:rgba(34,182,255,.13);border:1px solid rgba(34,182,255,.22);}
.vs-track__name{font-size:10px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-ctrl-row{display:flex;align-items:center;gap:5px;}
.vs-ctrl-lbl{font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.18);flex-shrink:0;width:24px;}
.vs-track__vol{flex:1;height:2px;-webkit-appearance:none;appearance:none;border-radius:1px;cursor:pointer;min-width:0;}
.vs-track--beat .vs-track__vol{accent-color:var(--cb);}
.vs-track--vocal .vs-track__vol{accent-color:var(--cp);}
.vs-ctrl-val{font-size:8px;color:rgba(255,255,255,.28);min-width:28px;text-align:right;flex-shrink:0;}
.vs-mute{
  width:20px;height:20px;border-radius:4px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:rgba(255,255,255,.22);font-size:7px;font-weight:700;cursor:pointer;transition:all .14s;
}
.vs-mute:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);}
.vs-mute.on{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);color:var(--crh);}

/* Lane */
.vs-track__lane{flex:1;position:relative;overflow:hidden;background:rgba(0,0,0,.2);min-width:0;}
.vs-track__cv{display:block;width:100%;position:absolute;top:0;left:0;right:0;}
.vs-track--beat .vs-track__cv{height:100%;}
.vs-track--vocal .vs-track__cv{height:calc(100% - 14px);}
.vs-playhead{position:absolute;top:0;bottom:14px;width:1.5px;left:0;background:rgba(255,255,255,.75);pointer-events:none;opacity:0;transition:opacity .1s;}
.vs-playhead.on{opacity:1;}

/* VU meter */
.vs-vu-wrap{position:absolute;bottom:0;left:0;right:0;height:10px;background:rgba(0,0,0,.3);overflow:hidden;}
.vs-vu-track{position:absolute;inset:2px;border-radius:3px;background:rgba(255,255,255,.04);}
.vs-vu-fill{
  position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:3px;
  background:linear-gradient(to right,rgba(74,220,100,.7) 0%,rgba(255,200,0,.8) 70%,rgba(239,68,68,.9) 92%);
  transition:width .04s linear;
}
.vs-vu-peak{position:absolute;top:0;bottom:0;width:2px;left:0%;background:rgba(255,255,255,.6);border-radius:1px;transition:left .1s linear;}
.vs-vu-lbl{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:7px;color:rgba(255,255,255,.22);letter-spacing:.06em;}

/* Load bar */
.vs-load-bar{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,var(--cb),rgba(74,184,245,.3));width:0%;transition:width .4s;}

/* Recording border */
.vs-recbrd{position:absolute;inset:0;border:1.5px solid var(--cr);pointer-events:none;opacity:0;}
.vs-recbrd.on{opacity:.55;animation:rb 1s ease-in-out infinite;}
@keyframes rb{0%,100%{opacity:.3;}50%{opacity:.75;}}

/* Countdown overlay */
.vs-countdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,7,12,.78);z-index:10;}
.vs-countdown.on{display:flex;}
.vs-cnum{font-size:64px;font-weight:900;font-family:'Manrope',sans-serif;color:#fff;opacity:0;transform:scale(1.6);animation:none;}
.vs-cnum.tick{animation:ctick .65s ease-out forwards;}
@keyframes ctick{0%{opacity:1;transform:scale(1.6);}80%{opacity:.7;transform:scale(.9);}100%{opacity:0;transform:scale(.7);}}

/* Vocal idle hint */
.vs-vocal-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;}
.vs-vocal-hint svg{opacity:.18;}
.vs-vocal-hint span{font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.2);text-transform:uppercase;}

/* ══════ SCRUBBER ══════ */
#bh-vs-scrub{padding:9px 16px 9px calc(var(--sidebar) + 16px);border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.008);}
.vs-prog{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;cursor:pointer;outline:none;
  background:linear-gradient(to right,var(--cb) 0%,var(--cb) var(--_f,0%),rgba(255,255,255,.09) var(--_f,0%),rgba(255,255,255,.09) 100%);
}
.vs-prog::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--cb);margin-top:-4.5px;cursor:pointer;}
.vs-prog::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--cb);border:none;}

/* ══════ FX RACK ══════ */
#bh-vs-fx{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.008);}
.vs-fx{padding:11px 14px 10px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:7px;}
.vs-fx:last-child{border-right:0;}
.vs-fxrow{display:flex;align-items:center;gap:10px;}
.vs-knob-wrap{position:relative;flex-shrink:0;width:44px;height:44px;}
.vs-knob-svg{width:44px;height:44px;overflow:visible;display:block;}
.vs-plug-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.vs-fxlbl{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22);}
.vs-fxval{color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;}
/* Per-control slider colors */
.vs-fxsl{width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:2px;background:rgba(255,255,255,.08);}
.vs-fxsl::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;cursor:pointer;transition:transform .1s,box-shadow .2s;}
.vs-fxsl::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;}
/* Robo — teal */
.vs-fx-robo   .vs-fxsl{accent-color:var(--fx-robo);}
.vs-fx-robo   .vs-fxsl::-webkit-slider-thumb{background:var(--fx-robo);box-shadow:0 0 8px rgba(0,200,200,.6);}
/* Reverb — orange */
.vs-fx-reverb .vs-fxsl{accent-color:var(--fx-reverb);}
.vs-fx-reverb .vs-fxsl::-webkit-slider-thumb{background:var(--fx-reverb);box-shadow:0 0 8px rgba(249,115,22,.6);}
/* Delay — amber */
.vs-fx-delay  .vs-fxsl{accent-color:var(--fx-delay);}
.vs-fx-delay  .vs-fxsl::-webkit-slider-thumb{background:var(--fx-delay);box-shadow:0 0 8px rgba(255,144,0,.6);}
/* Chorus — green */
.vs-fx-chorus .vs-fxsl{accent-color:var(--fx-chorus);}
.vs-fx-chorus .vs-fxsl::-webkit-slider-thumb{background:var(--fx-chorus);box-shadow:0 0 8px rgba(0,200,60,.6);}
/* Key — blue */
.vs-fx-key    .vs-fxsl{accent-color:var(--fx-key);}
.vs-fx-key    .vs-fxsl::-webkit-slider-thumb{background:var(--fx-key);box-shadow:0 0 8px rgba(34,182,255,.6);}
/* Hover: thumb scales up */
.vs-fxsl:hover::-webkit-slider-thumb{transform:scale(1.35);}
/* Touch target: keep the visual track thin (4px) but pad the hit box to the
   44px minimum the design system requires for any interactive control. */
.vs-fxsl{height:44px;padding:20px 0;background-clip:content-box;box-sizing:border-box;}
@media(hover:none){
  .vs-fxsl::-webkit-slider-thumb{width:28px;height:28px;}
  .vs-fxsl::-moz-range-thumb{width:28px;height:28px;}
}

/* ══════ 3-BAND EQ ══════ */
#bh-vs-eq{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.008);flex-wrap:wrap;}
.vs-eq-title{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);}
.vs-eq-band{display:flex;align-items:center;gap:6px;}
.vs-eq-band .vs-eq-lbl{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4);min-width:26px;}
.vs-eq-band .vs-eq-val{font-size:10px;font-variant-numeric:tabular-nums;color:var(--cb);min-width:28px;text-align:right;}
.vs-eqsl{
  /* 44px touch box, ~4px visible track kept via padding + content-box clip */
  width:90px;height:44px;padding:20px 0;box-sizing:border-box;
  cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:2px;
  background:rgba(255,255,255,.08);background-clip:content-box;accent-color:var(--cb);
}
.vs-eqsl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cb);box-shadow:0 0 8px rgba(74,184,245,.5);transition:transform .12s;}
.vs-eqsl:hover::-webkit-slider-thumb{transform:scale(1.3);}
@media(hover:none){.vs-eqsl::-webkit-slider-thumb{width:28px;height:28px;}.vs-eqsl::-moz-range-thumb{width:28px;height:28px;}}
.vs-eq-reset{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:4px 10px;cursor:pointer;transition:all .12s;}
.vs-eq-reset:hover{color:#fff;border-color:var(--cb);}
@media(max-width:600px){#bh-vs-eq{gap:10px;}.vs-eqsl{width:72px;}}

/* ══════ RECOVER TAKE BAR ══════ */
.vs-recover-bar{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,#1c1726,#120f1a);border:1px solid rgba(34,182,255,.35);border-radius:12px;
  padding:9px 12px;box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:12px;color:rgba(255,255,255,.85);max-width:92%;}
.vs-recover-bar button{font-size:11px;font-weight:700;border-radius:7px;padding:6px 12px;cursor:pointer;border:0;}
.vs-recover-yes{background:linear-gradient(135deg,#22B6FF,#1A96E8);color:#fff;}
.vs-recover-no{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);}
.vs-recover-no:hover{background:rgba(255,255,255,.14);color:#fff;}

/* ══════ PRESETS + SYNC ══════ */
#bh-vs-bot{display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap;border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.008);}
.vs-presets{display:flex;gap:5px;flex-wrap:wrap;}
.vs-preset{
  padding:6px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:transparent;
  color:rgba(255,255,255,.3);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .14s;font-family:'DM Mono',monospace;
}
.vs-preset.is-active,.vs-preset:hover{border-color:rgba(239,68,68,.42);color:#fff;background:rgba(239,68,68,.11);}
.vs-sync{display:flex;align-items:center;gap:7px;margin-left:auto;}
.vs-synclbl{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.18);flex-shrink:0;}
.vs-syncsl{width:110px;height:3px;accent-color:#4AB8F5;cursor:pointer;}
.vs-syncval{font-size:9px;color:rgba(255,255,255,.32);min-width:56px;text-align:right;font-variant-numeric:tabular-nums;}
.vs-syncrst{font-size:14px;color:rgba(255,255,255,.15);cursor:pointer;background:none;border:none;padding:0 3px;line-height:1;transition:color .14s;}
.vs-syncrst:hover{color:rgba(255,255,255,.55);}

/* ══════ ACTIONS ══════ */
#bh-vs-act{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(0,0,0,.18);flex-wrap:wrap;}
.vs-sing{
  display:flex;align-items:center;gap:8px;padding:13px 26px;border-radius:28px;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);
  color:var(--crh);font-size:13px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;flex-shrink:0;transition:all .14s;font-family:'DM Mono',monospace;
}
.vs-sing:hover{background:rgba(239,68,68,.2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.2);}
.vs-sing.go{background:rgba(239,68,68,.25);border-color:var(--cr);color:#fff;transform:none;box-shadow:none;}
.vs-sing .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;}
.vs-sing.go .dot{animation:dp .6s step-start infinite;}
@keyframes dp{50%{opacity:0;}}
.vs-rec-timer{font-size:10px;color:var(--crh);font-variant-numeric:tabular-nums;letter-spacing:.06em;display:none;}
.vs-rec-timer.on{display:block;}
.vs-rec-timer.warn{color:#ff5a5a;animation:vs-rectimer-blink .8s steps(2,start) infinite;}
@keyframes vs-rectimer-blink{50%{opacity:.35;}}
.vs-btn{
  display:flex;align-items:center;gap:6px;padding:11px 18px;border-radius:24px;
  font-size:11px;letter-spacing:.05em;cursor:pointer;flex-shrink:0;
  transition:all .14s;font-family:'DM Mono',monospace;
}
.vs-btn-play{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.65);}
.vs-btn-play:hover{background:rgba(255,255,255,.1);}
.vs-btn-save{background:rgba(74,184,245,.07);border:1px solid rgba(74,184,245,.22);color:var(--cb);}
.vs-btn-save:hover{background:rgba(74,184,245,.15);}
.vs-btn-pub{background:rgba(34,182,255,.1);border:1px solid rgba(34,182,255,.32);color:var(--cp);margin-left:auto;}
.vs-btn-pub:hover{background:rgba(34,182,255,.2);}
.vs-btn-pub:disabled{opacity:.45;pointer-events:none;}
.vs-btn-mix{background:rgba(34,182,255,.1);border:1px solid rgba(34,182,255,.3);color:var(--cp);}
.vs-btn-mix:hover{background:rgba(34,182,255,.2);}
.vs-btn-mix:disabled{opacity:.45;pointer-events:none;}
.vs-btn-denoise{background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.28);color:#2dd4bf;}
.vs-btn-denoise:hover{background:rgba(20,184,166,.18);}
.vs-btn-denoise:disabled{opacity:.45;pointer-events:none;}
.vs-btn-denoise.is-applied{background:rgba(20,184,166,.22);border-color:rgba(45,212,191,.5);}
.vs-btn-bass{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:#fbbf24;}
.vs-btn-bass:hover{background:rgba(245,158,11,.18);}
.vs-btn-bass:disabled{opacity:.45;pointer-events:none;}
.vs-btn-bass.is-applied{background:rgba(245,158,11,.22);border-color:rgba(251,191,36,.5);}
.vs-btn svg{width:12px;height:12px;pointer-events:none;}
.vs-status{font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.03em;max-width:360px;line-height:1.6;font-family:'DM Mono',monospace;}

/* ══════ KEYBOARD HINT ══════ */
.vs-kbd-hint{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 16px;
  border-top:1px solid var(--bdr);background:rgba(255,255,255,.005);
  font-size:8px;color:rgba(255,255,255,.15);letter-spacing:.04em;
}
.vs-kbd{
  display:inline-flex;align-items:center;padding:1px 5px;border-radius:3px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:7px;color:rgba(255,255,255,.3);margin:0 2px;font-family:'DM Mono',monospace;
}

/* ══════ Take protection modal ══════ */
.vs-takemodal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9999;
  display:flex;align-items:center;justify-content:center;
}
.vs-takemodal{
  background:#1a1a2e;border:1px solid rgba(34,182,255,.3);border-radius:10px;
  padding:24px 28px;max-width:340px;width:90%;text-align:center;
}
.vs-takemodal h4{margin:0 0 8px;font-size:14px;color:#fff;font-weight:600;}
.vs-takemodal p{margin:0 0 18px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.5;}
.vs-takemodal-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.vs-takemodal-btns button{
  padding:7px 14px;border-radius:6px;font-size:12px;cursor:pointer;border:1px solid;
}
.vs-takemodal-btns .btn-wav{background:rgba(74,184,245,.1);border-color:rgba(74,184,245,.3);color:var(--cb);}
.vs-takemodal-btns .btn-pub{background:rgba(34,182,255,.1);border-color:rgba(34,182,255,.3);color:var(--cp);}
.vs-takemodal-btns .btn-rec{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#f87171;}
.vs-takemodal-btns .btn-cancel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.45);}

/* ══════ WAB sync indicator ══════ */
.vs-wab-dot{
  width:6px;height:6px;border-radius:50%;background:rgba(74,220,100,.5);
  display:inline-block;margin-left:6px;transition:background .3s;
}
.vs-wab-dot.ready{background:rgba(74,220,100,.9);box-shadow:0 0 6px rgba(74,220,100,.5);}

/* ══════ RESPONSIVE ══════ */
@media(max-width:760px){
  #bh-vs{--sidebar:155px;}
  #bh-vs-fx{grid-template-columns:repeat(3,1fr);}
  .vs-fx:nth-child(3){border-right:0;}
  .vs-fx:nth-child(4){border-top:1px solid var(--bdr);}
  .vs-tp-title{max-width:130px;}
}
@media(max-width:600px){
  #bh-vs{--sidebar:100%;}
  .vs-track{flex-direction:column;}
  .vs-track__sb{
    width:100%;height:auto;flex-direction:row;
    border-right:0;border-bottom:1px solid var(--bdr);
    padding:7px 10px;gap:10px;
  }
  .vs-track__art{width:36px;height:36px;}
  .vs-track__meta{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;}
  .vs-track__head{flex-shrink:0;}
  .vs-buy-link{display:none;}
  .vs-notice{display:none;}
}
@media(max-width:420px){
  .vs-tb.vs-tb-hide-xs{display:none!important;}
  .vs-kshift-wrap{gap:3px;}
  .vs-syncsl{width:80px;}
  .vs-tp-title{max-width:70px;}
}

/* ══════ Compact buttons ══════ */
.vs-sing{padding:10px 20px;font-size:12px;}
.vs-btn{padding:8px 14px;font-size:10px;}

/* ══════ Per-FX accent colors (honest, no third-party brand names) ══════ */
:root{
  --fx-robo:#00c8c8; --fx-reverb:#f97316; --fx-delay:#ff9000;
  --fx-chorus:#00c83c; --fx-key:#22B6FF;
}

/* ── FX row per-plugin accent glow (active = slider > 0) ── */
.vs-fx[data-active="1"].vs-fx-robo   {border-left:2px solid rgba(0,200,200,.55);}
.vs-fx[data-active="1"].vs-fx-reverb {border-left:2px solid rgba(249,115,22,.55);}
.vs-fx[data-active="1"].vs-fx-delay  {border-left:2px solid rgba(255,144,0,.55);}
.vs-fx[data-active="1"].vs-fx-chorus {border-left:2px solid rgba(0,200,60,.55);}
.vs-fx[data-active="1"].vs-fx-key    {border-left:2px solid rgba(34,182,255,.55);}

/* ── Monitor button ── */
.vs-tbtn-mon{position:relative;transition:background .2s,box-shadow .2s;}
.vs-tbtn-mon.active{
  background:rgba(0,200,200,.18);
  box-shadow:0 0 10px rgba(0,200,200,.35),inset 0 0 8px rgba(0,200,200,.1);
  color:#00c8c8;
}
.vs-tbtn-mon.active svg{stroke:#00c8c8;}

/* ══════ Sync nudge tooltip ══════ */
#bh-vs-bot{position:relative;}
#bh-vs-sync-nudge{
  position:absolute;top:-56px;right:10px;z-index:30;
  background:rgba(8,6,18,.98);border:1px solid rgba(34,182,255,.45);border-radius:10px;
  padding:8px 12px;display:flex;align-items:center;gap:10px;
  font-family:'DM Mono',monospace;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.97);
  transition:opacity .12s,transform .12s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
#bh-vs-sync-nudge.on{opacity:1;transform:translateY(0) scale(1);}
.nudge-ms{font-size:14px;font-weight:700;color:#7FD0FF;letter-spacing:.02em;min-width:62px;text-align:right;}
.nudge-bar-wrap{width:70px;height:5px;background:rgba(255,255,255,.07);border-radius:2px;position:relative;overflow:hidden;}
.nudge-bar-fill{position:absolute;top:0;height:100%;border-radius:2px;background:linear-gradient(90deg,#1A96E8,#7FD0FF);}
.nudge-dir{font-size:7.5px;color:rgba(255,255,255,.28);letter-spacing:.08em;text-transform:uppercase;}

/* ══════ Mobile DAW tab bar ══════ */
.vs-daw-tabs{display:none;}

/* ══════ Projects panel (all sizes) ══════ */
#bh-vs-projects{display:none;flex-direction:column;flex:1;overflow:hidden;}
.vs-proj-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--bdr);flex-shrink:0;
}
.vs-proj-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.vs-proj-new{
  display:flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:14px;border:1px solid rgba(34,182,255,.35);
  background:rgba(34,182,255,.1);color:var(--cp);font-size:9px;font-weight:700;
  letter-spacing:.05em;cursor:pointer;font-family:'DM Mono',monospace;transition:all .14s;
}
.vs-proj-new:hover{background:rgba(34,182,255,.22);}
.vs-proj-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;}
.vs-proj-folder{border-radius:10px;overflow:hidden;border:1px solid var(--bdr);}
.vs-proj-folder-head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:rgba(255,255,255,.03);cursor:pointer;transition:background .12s;
}
.vs-proj-folder-head:hover{background:rgba(255,255,255,.06);}
.vs-proj-folder-icon{font-size:12px;flex-shrink:0;}
.vs-proj-folder-name{font-size:10px;font-weight:700;color:rgba(255,255,255,.6);flex:1;letter-spacing:.04em;}
.vs-proj-folder-count{font-size:8px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:8px;padding:2px 7px;}
.vs-proj-folder-chev{color:var(--muted);font-size:10px;transition:transform .2s;flex-shrink:0;}
.vs-proj-folder.open .vs-proj-folder-chev{transform:rotate(90deg);}
.vs-proj-items{display:none;padding:6px;}
.vs-proj-folder.open .vs-proj-items{display:flex;flex-direction:column;gap:5px;}
.vs-proj-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  background:rgba(255,255,255,.02);border:1px solid var(--bdr);border-radius:8px;
  cursor:pointer;transition:all .14s;
}
.vs-proj-item:hover{background:rgba(74,184,245,.06);border-color:rgba(74,184,245,.25);}
.vs-proj-item-art{width:32px;height:32px;border-radius:6px;object-fit:cover;background:rgba(255,255,255,.06);flex-shrink:0;border:1px solid var(--bdr);}
.vs-proj-item-info{flex:1;min-width:0;}
.vs-proj-item-name{font-size:10px;font-weight:700;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-proj-item-meta{font-size:8px;color:var(--muted);margin-top:2px;font-family:'DM Mono',monospace;}
.vs-proj-item-del{
  width:22px;height:22px;border-radius:5px;border:1px solid rgba(239,68,68,.2);
  background:rgba(239,68,68,.06);color:rgba(239,68,68,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;transition:all .14s;font-size:9px;
}
.vs-proj-item-del:hover{background:rgba(239,68,68,.18);color:var(--crh);border-color:rgba(239,68,68,.5);}
.vs-proj-empty{
  text-align:center;padding:28px 16px;
  font-size:10px;color:var(--muted);letter-spacing:.05em;line-height:1.6;
}
/* Save project modal */
.vs-saveproj-overlay{
  position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.vs-saveproj-box{
  background:#12111a;border:1px solid rgba(34,182,255,.35);border-radius:14px;
  padding:22px 24px;width:min(340px,92vw);display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
}
.vs-saveproj-title{font-size:13px;font-weight:700;color:#fff;font-family:'Manrope',sans-serif;}
.vs-saveproj-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.vs-saveproj-input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:9px 12px;font-family:'DM Mono',monospace;font-size:11px;
  color:#fff;outline:none;transition:border-color .14s;box-sizing:border-box;
}
.vs-saveproj-input:focus{border-color:rgba(34,182,255,.55);}
.vs-saveproj-btns{display:flex;gap:8px;}
.vs-saveproj-ok{
  flex:1;padding:10px;border-radius:10px;border:none;cursor:pointer;
  background:var(--cp);color:#fff;font-family:inherit;font-size:11px;font-weight:700;
  transition:filter .14s;
}
.vs-saveproj-ok:hover{filter:brightness(1.15);}
.vs-saveproj-cancel{
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:var(--muted);font-family:inherit;font-size:11px;cursor:pointer;
}

@media(max-width:600px){
  /* ── Tab bar ── */
  .vs-daw-tabs{
    display:flex;flex-shrink:0;border-top:1px solid var(--bdr);
    background:rgba(6,5,10,.99);position:relative;height:52px;
  }
  .vs-daw-tab{
    flex:1;padding:7px 2px 9px;border:none;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;
    color:rgba(255,255,255,.22);font-size:6px;letter-spacing:.09em;text-transform:uppercase;
    font-family:'DM Mono',monospace;transition:color .18s;
  }
  .vs-daw-tab::before{
    content:'';position:absolute;top:0;left:15%;right:15%;height:2px;
    border-radius:0 0 2px 2px;background:var(--cb);
    transform:scaleX(0);transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  .vs-daw-tab svg{width:15px;height:15px;opacity:.25;transition:opacity .18s;}
  .vs-daw-tab.active{color:var(--cb);}
  .vs-daw-tab.active svg{opacity:1;}
  .vs-daw-tab.active::before{transform:scaleX(1);}
  .vs-daw-tab[data-daw-tab="save"].active{color:var(--cp);}
  .vs-daw-tab[data-daw-tab="save"].active::before{background:var(--cp);}
  .vs-daw-tab[data-daw-tab="save"].active svg{opacity:1;}

  /* ── True single-screen: DAW fills viewport minus site nav ── */
  #bh-vs{background:var(--bg);height:calc(100dvh - var(--vs-nav-h,64px));overflow:hidden;}
  #bh-vs-home{min-height:0;height:calc(100dvh - var(--vs-nav-h,64px));overflow-y:auto;}
  #bh-vs-daw{
    display:flex;flex-direction:column;
    height:calc(100dvh - var(--vs-nav-h,64px));
    min-height:0;overflow:hidden;
  }

  /* ── Transport strip: single scrollable row, 40px ── */
  #bh-vs-tp{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex-shrink:0;
    height:40px;min-height:40px;
    -webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%);
    mask-image:linear-gradient(to right,black 85%,transparent 100%);
  }
  #bh-vs-tp::-webkit-scrollbar{display:none;}
  .vs-tb{height:40px;padding:0 6px;gap:4px;}
  .vs-tbtn{width:24px;height:24px;border-radius:6px;}
  .vs-tbtn svg{width:10px;height:10px;}
  .vs-time{font-size:10px;min-width:50px;}
  .vs-badge{font-size:8px;padding:2px 5px;}
  .vs-kshift{width:20px;height:20px;font-size:12px;}
  .vs-kname{font-size:11px;min-width:20px;}
  .vs-loop{width:22px;height:22px;}

  /* ── Track panel ── */
  #bh-vs-tracks{flex:1;overflow:hidden;min-height:0;}
  .vs-track--beat{min-height:0;flex:1;}
  .vs-track--vocal{min-height:0;flex:1.3;}
  .vs-track__lane{min-height:30px;}
  .vs-track__sb{padding:4px 8px;flex-shrink:0;}
  .vs-track__art{width:28px;height:28px;border-radius:5px;}
  .vs-track__icon{width:18px;height:18px;}
  .vs-track__name{font-size:8px;}
  .vs-ctrl-lbl{width:16px;font-size:6px;}
  .vs-mute{width:17px;height:17px;font-size:6px;}
  .vs-track--vocal .vs-ctrl-row:last-child{display:none;}

  /* ── Scrubber: 22px ── */
  #bh-vs-scrub{flex-shrink:0;padding:3px 10px;height:22px;display:flex;align-items:center;}

  /* ── Action bar: 50px fixed ── */
  #bh-vs-act{
    flex-shrink:0;padding:6px 10px;gap:6px;height:50px;
    display:flex;align-items:center;
  }
  .vs-sing{padding:9px 16px;font-size:11px;border-radius:22px;}
  .vs-btn{padding:7px 10px;font-size:9px;border-radius:18px;}
  .vs-status{font-size:8px;flex:1;min-width:0;}
  .vs-rec-timer{font-size:9px;}
  .vs-kbd-hint{display:none!important;}

  /* ── Tab bar: 52px, order at bottom ── */
  .vs-daw-tabs{order:10;flex-shrink:0;}

  /* ── Tab panel visibility ── */
  @keyframes vs-tab-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
  .vs-tab-animate #bh-vs-tp,
  .vs-tab-animate #bh-vs-tracks,
  .vs-tab-animate #bh-vs-scrub,
  .vs-tab-animate #bh-vs-fx,
  .vs-tab-animate #bh-vs-bot,
  .vs-tab-animate #bh-vs-act,
  .vs-tab-animate #bh-vs-projects{animation:vs-tab-in .18s ease-out;}

  /* Track tab: shows transport + tracks + scrubber + actions */
  #bh-vs-daw[data-tab="track"] #bh-vs-fx{display:none!important;}
  #bh-vs-daw[data-tab="track"] #bh-vs-bot{display:none!important;}
  #bh-vs-daw[data-tab="track"] #bh-vs-projects{display:none!important;}

  /* FX tab: shows fx + presets + sync */
  #bh-vs-daw[data-tab="fx"] #bh-vs-tp{display:none!important;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-tracks{display:none!important;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-scrub{display:none!important;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-act{display:none!important;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-projects{display:none!important;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-fx{
    display:flex!important;flex-direction:column;flex:1;overflow-y:auto;border-bottom:none;
  }
  /* Each FX row fills equal height — bigger touch target, no dead space */
  #bh-vs-daw[data-tab="fx"] .vs-fx{
    flex:1;min-height:52px;
    padding:8px 16px;border-right:none;border-bottom:1px solid var(--bdr);
    flex-direction:row;align-items:center;gap:12px;
  }
  #bh-vs-daw[data-tab="fx"] .vs-fx:last-child{border-bottom:none;}
  #bh-vs-daw[data-tab="fx"] .vs-fxrow{
    flex-direction:row;align-items:center;gap:14px;flex-shrink:0;
  }
  #bh-vs-daw[data-tab="fx"] .vs-knob-wrap{width:56px;height:56px;}
  #bh-vs-daw[data-tab="fx"] .vs-knob-svg{width:56px;height:56px;}
  #bh-vs-daw[data-tab="fx"] .vs-plug-meta{gap:4px;}
  #bh-vs-daw[data-tab="fx"] .vs-fxlbl{font-size:9px;}
  #bh-vs-daw[data-tab="fx"] .vs-fxval{font-size:20px;font-weight:700;min-width:28px;}
  #bh-vs-daw[data-tab="fx"] .vs-fxsl{
    /* 44px touch box, ~4px visible track (border-radius on the 4px content
       box, not the full padded box, keeps the visible strip properly rounded) */
    flex:1;height:44px;padding:20px 0;box-sizing:border-box;
    background-clip:content-box;border-radius:4px;
    -webkit-appearance:none;appearance:none;cursor:pointer;
  }
  #bh-vs-daw[data-tab="fx"] .vs-fxsl::-webkit-slider-thumb{width:28px;height:28px;border-radius:50%;}
  #bh-vs-daw[data-tab="fx"] #bh-vs-bot{flex-shrink:0;padding:10px 16px;}
  #bh-vs-daw[data-tab="fx"] .vs-preset{padding:8px 14px;font-size:10px;}

  /* Mix tab: recording cockpit — hide everything except transport + actions */
  #bh-vs-daw[data-tab="mix"] #bh-vs-tracks{display:none!important;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-scrub{display:none!important;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-fx{display:none!important;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-bot{display:none!important;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-projects{display:none!important;}

  /* Save/Projects tab */
  #bh-vs-daw[data-tab="save"] #bh-vs-tp{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-tracks{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-scrub{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-fx{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-bot{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-act{display:none!important;}
  #bh-vs-daw[data-tab="save"] #bh-vs-projects{display:flex!important;}

  /* Sync reset button: iOS fix */
  .vs-syncrst{
    -webkit-appearance:none;appearance:none;
    width:24px;height:24px;border-radius:5px;
    display:flex;align-items:center;justify-content:center;padding:0;
  }

  /* ── iOS safe area: tab bar sits above home indicator ── */
  .vs-daw-tabs{
    padding-bottom:env(safe-area-inset-bottom,0px);
    height:calc(52px + env(safe-area-inset-bottom,0px))!important;
  }

  /* ── Mix tab: recording cockpit ── */
  /* Compact transport: Play/Stop/Rec + time + BPM — bigger buttons */
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp{display:flex!important;height:50px;min-height:50px;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tbtn{width:34px;height:34px;border-radius:10px;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tbtn svg{width:13px;height:13px;}
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tb:nth-child(3),
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tb:nth-child(6),
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tb:nth-child(7),
  #bh-vs-daw[data-tab="mix"] #bh-vs-tp .vs-tb:nth-child(8){display:none!important;}
  /* Action bar: centered flex — Sing floats in the middle, post-rec buttons wrap 2-col */
  #bh-vs-daw[data-tab="mix"] #bh-vs-act{
    display:flex!important;
    flex-wrap:wrap;
    flex:1;
    align-content:center;
    align-items:flex-start;
    padding:20px 14px;
    gap:10px;
    height:auto;
    overflow-y:auto;
  }
  #bh-vs-daw[data-tab="mix"] .vs-sing{
    flex:0 0 100%;
    padding:22px 20px;font-size:17px;
    border-radius:32px;justify-content:center;
    letter-spacing:.04em;
  }
  #bh-vs-daw[data-tab="mix"] .vs-rec-timer{
    flex:0 0 100%;text-align:center;margin:0;
  }
  /* Post-rec action buttons: 2-col grid */
  #bh-vs-daw[data-tab="mix"] .vs-btn:not(.vh){
    flex:1;min-width:calc(50% - 5px);
    display:flex!important;justify-content:center;
    padding:15px 8px;font-size:11px;
  }
  #bh-vs-daw[data-tab="mix"] .vs-btn.vh{display:none!important;}
  #bh-vs-daw[data-tab="mix"] .vs-status{
    flex:0 0 100%;max-width:none;
    text-align:center;font-size:10px;line-height:1.6;
    order:99;padding-top:4px;
  }

  /* ── FX tab: show Sync section ── */
  #bh-vs-daw[data-tab="fx"] #bh-vs-bot{
    display:flex!important;flex-shrink:0;
    flex-wrap:wrap;padding:10px 14px;gap:8px;
    border-top:1px solid var(--bdr);
  }
  #bh-vs-daw[data-tab="fx"] .vs-sync{
    width:100%;margin-left:0;justify-content:flex-start;gap:8px;
  }
  #bh-vs-daw[data-tab="fx"] .vs-syncsl{flex:1;min-width:0;}
  /* FX slider thumb: 28px touch target (covered by rule above) */
  #bh-vs-daw[data-tab="fx"] .vs-fxsl::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--cr);border:none;}

  /* ── Track tab: action bar ── */
  #bh-vs-daw[data-tab="track"] #bh-vs-act{
    height:auto;min-height:54px;padding:8px 10px;flex-wrap:wrap;gap:6px;
  }
  #bh-vs-daw[data-tab="track"] .vs-sing{padding:10px 18px;font-size:12px;}
  #bh-vs-daw[data-tab="track"] .vs-btn{padding:8px 11px;font-size:9px;}

  /* ── Vol / Gain sliders: bigger thumb for touch ── */
  .vs-track__vol{height:4px;}
  .vs-track__vol::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;cursor:pointer;}
  .vs-track__vol::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:none;}
}

/* ══════════════════════════════════════════════
   Tablet (601–900px): compact FX + wrapping
══════════════════════════════════════════════ */
@media(min-width:601px) and (max-width:900px){
  #bh-vs-fx{grid-template-columns:repeat(3,1fr);}
  .vs-fx:nth-child(3){border-right:0;}
  .vs-fx:nth-child(4){border-top:1px solid var(--bdr);}
  #bh-vs-act{flex-wrap:wrap;}
  .vs-sing{padding:11px 22px;}
}

/* ══════════════════════════════════════════════
   VS Intro Modal
══════════════════════════════════════════════ */
.vs-imodal-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vs-imodal-overlay.vs-hidden{display:none;}
.vs-imodal-box{
  background:linear-gradient(160deg,rgba(16,13,26,.98) 0%,rgba(8,7,14,.98) 100%);
  border:1px solid rgba(34,182,255,.25);border-radius:22px;
  padding:32px 24px 24px;max-width:370px;width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(34,182,255,.06) inset;
  text-align:center;
}
.vs-imodal-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;margin-bottom:16px;
  background:rgba(34,182,255,.12);border:1px solid rgba(34,182,255,.22);
  font:600 9px/1 'DM Mono',monospace;color:#7FD0FF;letter-spacing:.1em;
  text-transform:uppercase;
}
.vs-imodal-title{
  font:900 20px/1.1 'Manrope',sans-serif;color:#fff;
  letter-spacing:-.02em;margin-bottom:6px;
}
.vs-imodal-sub{
  font:400 11px/1.5 'DM Mono',monospace;
  color:rgba(255,255,255,.38);letter-spacing:.02em;margin-bottom:24px;
}
.vs-imodal-steps{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;
}
.vs-imodal-step{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:14px 10px;text-align:left;
}
.vs-imodal-step-ico{font-size:18px;margin-bottom:8px;display:block;}
.vs-imodal-step-ttl{
  font:700 10px/1.2 'Manrope',sans-serif;color:#fff;
  margin-bottom:4px;
}
.vs-imodal-step-txt{
  font:400 9px/1.4 'DM Mono',monospace;
  color:rgba(255,255,255,.35);
}
.vs-imodal-cta{
  width:100%;padding:14px;border-radius:30px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);
  color:#fff;font:700 11px/1 'DM Mono',monospace;letter-spacing:.08em;
  box-shadow:0 6px 20px rgba(34,182,255,.4);transition:opacity .15s,transform .15s;
}
.vs-imodal-cta:hover{opacity:.9;transform:translateY(-1px);}
.vs-imodal-skip{
  display:block;margin-top:12px;font:400 9px/1 'DM Mono',monospace;
  color:rgba(255,255,255,.2);cursor:pointer;text-decoration:underline;
  background:none;border:none;width:100%;
}
.vs-imodal-skip:hover{color:rgba(255,255,255,.4);}

/* ══════════════════════════════════════════════
   VS Sync Help Modal
══════════════════════════════════════════════ */
.vs-shelp-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vs-shelp-overlay.vs-hidden{display:none;}
.vs-shelp-box{
  background:linear-gradient(160deg,rgba(14,11,24,.98) 0%,rgba(8,7,14,.98) 100%);
  border:1px solid rgba(74,184,245,.2);border-radius:20px;
  padding:26px 22px 22px;max-width:360px;width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.65);
}
.vs-shelp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.vs-shelp-title{font:800 14px/1 'Manrope',sans-serif;color:#fff;letter-spacing:-.01em;}
.vs-shelp-close{
  background:none;border:none;cursor:pointer;padding:4px;
  color:rgba(255,255,255,.35);font-size:18px;line-height:1;
  transition:color .15s;
}
.vs-shelp-close:hover{color:#fff;}
.vs-shelp-desc{
  font:400 10px/1.6 'DM Mono',monospace;
  color:rgba(255,255,255,.45);margin-bottom:18px;
}
.vs-shelp-diagram{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px 12px;margin-bottom:16px;
}
.vs-shelp-diag-row{
  display:flex;flex-direction:column;gap:6px;margin-bottom:12px;
}
.vs-shelp-diag-row:last-child{margin-bottom:0;}
.vs-shelp-diag-label{
  font:600 8px/1 'DM Mono',monospace;
  color:rgba(255,255,255,.28);letter-spacing:.08em;text-transform:uppercase;
}
.vs-shelp-diag-bars{display:flex;gap:4px;align-items:center;}
.vs-shelp-bar-wrap{flex:1;position:relative;height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;}
.vs-shelp-bar{height:100%;border-radius:4px;}
.vs-shelp-bar--beat{background:rgba(74,184,245,.6);}
.vs-shelp-bar--vocal{background:rgba(34,182,255,.6);}
.vs-shelp-bar--ok{background:rgba(34,197,94,.5);}
.vs-shelp-diag-chip{
  font:700 8px/1 'DM Mono',monospace;
  padding:3px 7px;border-radius:8px;white-space:nowrap;
}
.vs-shelp-chip--late{background:rgba(239,68,68,.12);color:#f87171;}
.vs-shelp-chip--early{background:rgba(251,191,36,.12);color:#fbbf24;}
.vs-shelp-chip--ok{background:rgba(34,197,94,.12);color:#4ade80;}
.vs-shelp-tips{
  display:flex;flex-direction:column;gap:7px;margin-bottom:18px;
}
.vs-shelp-tip{
  display:flex;align-items:flex-start;gap:8px;
  font:400 9px/1.5 'DM Mono',monospace;color:rgba(255,255,255,.38);
}
.vs-shelp-tip-dot{
  width:5px;height:5px;border-radius:50%;background:#4ab8f5;
  flex-shrink:0;margin-top:4px;
}
.vs-shelp-gotit{
  width:100%;padding:11px;border-radius:24px;border:none;cursor:pointer;
  background:rgba(74,184,245,.12);border:1px solid rgba(74,184,245,.22);
  color:#4ab8f5;font:700 10px/1 'DM Mono',monospace;letter-spacing:.06em;
  transition:background .15s;
}
.vs-shelp-gotit:hover{background:rgba(74,184,245,.2);}

/* ══════════════════════════════════════════════
   Share button
══════════════════════════════════════════════ */
.vs-btn-share{background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.2);color:#4ade80;}
.vs-btn-share:hover{background:rgba(34,197,94,.16);}

/* ══════════════════════════════════════════════
   Share / Collab modal
══════════════════════════════════════════════ */
.vs-share-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vs-share-overlay.vs-hidden{display:none;}
.vs-share-box{
  background:linear-gradient(160deg,rgba(14,11,24,.98) 0%,rgba(8,7,14,.98) 100%);
  border:1px solid rgba(34,197,94,.18);border-radius:22px;
  padding:24px;max-width:380px;width:100%;
  box-shadow:0 28px 72px rgba(0,0,0,.7);
}
.vs-share-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.vs-share-title{font:800 14px/1 'Manrope',sans-serif;color:#fff;}
.vs-share-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.3);font-size:20px;line-height:1;padding:2px;transition:color .15s;}
.vs-share-close:hover{color:#fff;}
.vs-share-beat-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:10px 12px;margin-bottom:16px;
}
.vs-share-art{width:36px;height:36px;border-radius:7px;object-fit:cover;background:rgba(255,255,255,.07);flex-shrink:0;}
.vs-share-beat-name{font:700 11px/1.3 'Manrope',sans-serif;color:#fff;margin-bottom:3px;}
.vs-share-beat-meta{font:400 9px/1 'DM Mono',monospace;color:rgba(255,255,255,.32);}
.vs-share-label{font:700 8px/1 'DM Mono',monospace;color:rgba(255,255,255,.28);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px;}
.vs-share-input,.vs-share-textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:10px 12px;
  color:#fff;font:400 10px/1.4 'DM Mono',monospace;
  outline:none;margin-bottom:14px;box-sizing:border-box;transition:border-color .15s;
}
.vs-share-input:focus,.vs-share-textarea:focus{border-color:rgba(34,197,94,.45);}
.vs-share-textarea{resize:none;height:68px;}
.vs-share-actions{display:flex;gap:8px;margin-bottom:10px;}
.vs-share-send{
  flex:1;padding:12px;border-radius:22px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;font:700 10px/1 'DM Mono',monospace;letter-spacing:.07em;
  box-shadow:0 4px 14px rgba(34,197,94,.3);transition:opacity .15s;
}
.vs-share-send:hover{opacity:.9;}
.vs-share-send:disabled{opacity:.5;pointer-events:none;}
.vs-share-copy{
  padding:12px 14px;border-radius:22px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);font:600 9px/1 'DM Mono',monospace;transition:background .15s;
}
.vs-share-copy:hover{background:rgba(255,255,255,.1);}
.vs-share-status{font:400 9px/1.4 'DM Mono',monospace;text-align:center;min-height:14px;transition:color .2s;}

/* ══════════════════════════════════════════════
   VS Login Gate Modal
══════════════════════════════════════════════ */
.vs-login-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vs-login-overlay.vs-hidden{display:none;}
.vs-login-box{
  background:linear-gradient(160deg,rgba(16,13,26,.98) 0%,rgba(8,7,14,.98) 100%);
  border:1px solid rgba(34,182,255,.22);border-radius:22px;
  padding:32px 24px 26px;max-width:340px;width:100%;
  box-shadow:0 32px 80px rgba(0,0,0,.7);text-align:center;
}
.vs-login-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(135deg,rgba(34,182,255,.2) 0%,rgba(74,184,245,.15) 100%);
  border:1px solid rgba(34,182,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.vs-login-title{
  font:800 17px/1.1 'Manrope',sans-serif;color:#fff;
  letter-spacing:-.02em;margin-bottom:8px;
}
.vs-login-desc{
  font:400 10px/1.6 'DM Mono',monospace;
  color:rgba(255,255,255,.38);margin-bottom:24px;
}
.vs-login-btn-primary{
  width:100%;padding:13px;border-radius:28px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);
  color:#fff;font:700 11px/1 'DM Mono',monospace;letter-spacing:.07em;
  box-shadow:0 6px 20px rgba(34,182,255,.35);transition:opacity .15s,transform .15s;
  margin-bottom:8px;
}
.vs-login-btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.vs-login-btn-secondary{
  width:100%;padding:12px;border-radius:28px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);font:600 10px/1 'DM Mono',monospace;letter-spacing:.05em;
  transition:background .15s;margin-bottom:14px;
}
.vs-login-btn-secondary:hover{background:rgba(255,255,255,.08);}
.vs-login-dismiss{
  font:400 9px/1 'DM Mono',monospace;color:rgba(255,255,255,.2);
  cursor:pointer;background:none;border:none;text-decoration:underline;
  transition:color .15s;
}
.vs-login-dismiss:hover{color:rgba(255,255,255,.4);}

/* Sync help button */
.vs-sync-help-btn{
  background:none;border:1px solid rgba(74,184,245,.22);color:rgba(74,184,245,.6);
  border-radius:50%;width:16px;height:16px;font:700 8px/1 'DM Mono',monospace;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:border-color .15s,color .15s;
}
.vs-sync-help-btn:hover{border-color:rgba(74,184,245,.7);color:#4ab8f5;}

/* Auto latency detect button */
.vs-autolatbtn{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;
  border:1px solid rgba(34,182,255,.3);background:rgba(34,182,255,.07);
  color:rgba(34,182,255,.6);cursor:pointer;flex-shrink:0;padding:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,color .15s,background .15s;
}
.vs-autolatbtn:hover{border-color:rgba(34,182,255,.65);color:#7FD0FF;background:rgba(34,182,255,.12);}
.vs-autolatbtn.scanning{
  border-color:rgba(0,200,200,.7);color:#00c8c8;background:rgba(0,200,200,.08);
  animation:vs-lat-spin 1.2s linear infinite;
}
@keyframes vs-lat-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Auto badge: tiny label showing API/LB source */
.vs-autolat-badge{
  font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:2px 5px;border-radius:3px;white-space:nowrap;
  border:1px solid rgba(34,182,255,.2);color:rgba(34,182,255,.5);
  background:rgba(34,182,255,.05);flex-shrink:0;
}
.vs-autolat-badge.lb{border-color:rgba(0,200,200,.3);color:rgba(0,200,200,.7);background:rgba(0,200,200,.05);}
/* Nudge tooltip: auto-detect state overrides */
#bh-vs-sync-nudge.detecting{border-color:rgba(0,200,200,.5);}
#bh-vs-sync-nudge.detecting .nudge-bar-fill{
  background:linear-gradient(90deg,#0d9488,#00c8c8);
  animation:vs-lat-scan 1.2s ease-in-out infinite alternate;
}

/* ══════ Lyrics drawer ══════ */
#bh-vs-lyrics{
  /* The site nav sits at z-index 99999 (design system §2) and is never
     hidden inside the DAW — a DAW overlay needs z-index >=100001 or its
     top edge (where the close button lives) is unclickable behind the nav. */
  position:fixed;top:0;right:-380px;width:360px;max-width:92vw;height:100%;z-index:100001;
  background:#0c0c0d;border-left:1px solid var(--bdr);
  display:flex;flex-direction:column;gap:10px;padding:16px;
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transition:right .25s cubic-bezier(0.19,1,0.22,1);
}
#bh-vs-lyrics.is-open{right:0;}
.vs-lyrics-header{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.vs-lyrics-title{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);flex:1;font-family:'DM Mono',monospace;
}
.vs-lyrics-lrc{
  padding:6px 12px;border-radius:14px;border:1px solid rgba(34,182,255,.35);
  background:rgba(34,182,255,.1);color:var(--cb);font-size:9px;font-weight:700;
  letter-spacing:.05em;cursor:pointer;font-family:'DM Mono',monospace;transition:all .14s;
}
.vs-lyrics-lrc:hover{background:rgba(34,182,255,.22);}
.vs-lyrics-close{
  width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .12s;flex-shrink:0;
}
.vs-lyrics-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.vs-lyrics-ai-row{display:flex;gap:6px;flex-shrink:0;}
.vs-lyrics-input{
  flex:1;min-width:0;padding:8px 10px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid var(--bdr);
  color:#fff;font-size:11px;font-family:'DM Mono',monospace;outline:none;transition:border-color .14s;
}
.vs-lyrics-input:focus{border-color:rgba(34,182,255,.45);}
.vs-lyrics-btn{
  padding:8px 12px;border-radius:8px;border:1px solid var(--bdr);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);
  font-size:9px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  font-family:'DM Mono',monospace;cursor:pointer;transition:all .14s;
}
.vs-lyrics-btn:hover{background:var(--cbo);border-color:rgba(34,182,255,.4);color:#fff;}
.vs-lyrics-btn:disabled{opacity:.5;cursor:default;}
.vs-lyrics-suggestions{display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0;}
.vs-lyrics-suggestion{
  padding:4px 9px;border-radius:12px;border:1px solid rgba(34,182,255,.22);
  background:rgba(34,182,255,.08);color:#7FD0FF;font-size:9px;
  font-family:'DM Mono',monospace;cursor:pointer;transition:all .14s;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vs-lyrics-suggestion:hover{background:rgba(34,182,255,.18);}
.vs-lyrics-text{
  flex:1;resize:none;padding:12px;border-radius:10px;
  background:rgba(255,255,255,.02);border:1px solid var(--bdr);
  color:rgba(255,255,255,.85);font-size:12px;line-height:1.7;
  font-family:'Manrope',sans-serif;outline:none;transition:border-color .14s;
}
.vs-lyrics-text:focus{border-color:rgba(34,182,255,.4);}
.vs-lyrics-karaoke{
  flex:1;overflow-y:auto;padding:12px 4px;display:flex;flex-direction:column;gap:10px;
}
.vs-lyric-line{
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.28);
  font-family:'Manrope',sans-serif;transition:color .2s,transform .2s;
}
.vs-lyric-line.active{color:#fff;font-weight:700;transform:scale(1.03);text-shadow:0 0 18px rgba(34,182,255,.5);}
@media(max-width:600px){#bh-vs-lyrics{width:100vw;max-width:100vw;right:-100vw;}}
@keyframes vs-lat-scan{from{opacity:.3;width:10%}to{opacity:1;width:90%}}