/* ═══════════════════════════════════════════════
   BH Vocal Studio DAW v5
   ═══════════════════════════════════════════════ */
#bh-vs{
  width:100%;max-width:none;padding:0;
  font-family:'dm mono',"dm mono Fallback",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-full-page.php's shared #bh-page-root forces min-height:100dvh for pages
   with tall content; vocal-studio.css only ever loads on THIS page (enqueue
   is is_page('vocal-studio') gated), so this override never reaches other
   app pages. Without it, a short guest home leaves a black gap before the
   site footer. !important guards against source-order uncertainty against
   the template's inline <style>. */
#bh-page-root{min-height:0!important;}
#bh-vs-home{
  display:flex;flex-direction:column;gap:0;
  background:var(--bg);min-height:0;
  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',"syne Fallback",sans-serif;line-height:1.1;
}
.vs-home-hero-sub{font-size:11px;color:var(--muted);letter-spacing:.04em;font-family:'dm mono',"dm mono Fallback",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',"dm mono Fallback",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 guest preview (static mock, no JS) ─── */
#bh-vs .vs-home-preview{padding:0 28px 8px;}
#bh-vs .vs-preview-daw{
  border:1px solid var(--bdr);border-radius:14px;background:var(--sur);
  overflow:hidden;
}
#bh-vs .vs-preview-transport{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--bdr);
  background:rgba(255,255,255,.02);
}
#bh-vs .vs-preview-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);}
#bh-vs .vs-preview-dot:first-child{background:var(--cb);}
#bh-vs .vs-preview-transport-time{
  margin-left:4px;font-size:10px;color:rgba(255,255,255,.4);
  font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.03em;
}
#bh-vs .vs-preview-transport-bpm{
  margin-left:auto;font-size:10px;color:var(--cb);
  font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.03em;
}
#bh-vs .vs-preview-lanes{display:flex;flex-direction:column;gap:1px;background:var(--bdr);}
#bh-vs .vs-preview-lane{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--bg);
}
#bh-vs .vs-preview-lane-label{
  flex-shrink:0;width:38px;font-size:10px;color:rgba(255,255,255,.35);
  font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.03em;
}
#bh-vs .vs-preview-wave{width:100%;height:28px;color:var(--cb);opacity:.55;}
#bh-vs .vs-preview-lane--vocal .vs-preview-wave{color:var(--cb-tint,#7FD0FF);}
#bh-vs .vs-preview-wave rect{fill:currentColor;}
#bh-vs .vs-preview-fx{
  display:flex;align-items:center;gap:22px;
  padding:14px;border-top:1px solid var(--bdr);
}
#bh-vs .vs-preview-knob{display:flex;flex-direction:column;align-items:center;gap:6px;}
#bh-vs .vs-preview-knob-dial{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--bdr);background:rgba(255,255,255,.02);
  position:relative;
}
#bh-vs .vs-preview-knob-dial::after{
  content:'';position:absolute;top:2px;left:50%;width:2px;height:8px;
  background:var(--cb);border-radius:1px;transform:translateX(-50%) rotate(-25deg);
  transform-origin:50% 11px;
}
#bh-vs .vs-preview-knob-label{
  font-size:9px;color:rgba(255,255,255,.35);
  font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.04em;text-transform:uppercase;
}

#bh-vs .vs-home-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  padding:20px 28px 4px;
}
#bh-vs .vs-home-feature{
  padding:16px;border:1px solid var(--bdr);border-radius:12px;background:var(--sur);
}
#bh-vs .vs-home-feature-title{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.85);
  font-family:'manrope',"manrope Fallback",sans-serif;margin-bottom:6px;
}
#bh-vs .vs-home-feature-desc{
  font-size:11px;line-height:1.5;color:var(--muted);
  font-family:'dm mono',"dm mono Fallback",monospace;
}

.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',"dm mono Fallback",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',"dm mono Fallback",monospace;
}
.vs-section-viewall:hover{background:rgba(74,184,245,.1);}
.vs-take-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
/* Community is the last section on desktop's guest/empty home — with
   #bh-page-root's forced height removed above, let it claim any leftover
   space and center its loading/empty state instead of a stray line at the
   top. Scoped >600px only: on mobile, #bh-vs-home is deliberately forced to
   full viewport height ("true single-screen" below) and hero+preview+
   features already use most of it — flex:1 here flex-shrinks Community
   below its own content's needed height and clips "No takes yet" off-screen
   (confirmed via live measurement: 89px available vs ~133px needed). Mobile
   keeps natural content flow + #bh-vs-home's own overflow-y:auto instead. */
@media(min-width:601px){
  #bh-vs-community{display:flex;flex-direction:column;flex:1;min-height:0;}
  #bh-vs-community .vs-take-grid{flex:1;}
}
.vs-take-grid:has(>.vs-grid-loading){display:flex;align-items:center;justify-content:center;}
.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',"manrope Fallback",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vs-take-beat{
  font-size:9px;color:var(--muted);font-family:'dm mono',"dm mono Fallback",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',"dm mono Fallback",monospace;flex-shrink:0;}
.vs-take-date{font-size:8px;color:rgba(255,255,255,.2);font-family:'dm mono',"dm mono Fallback",monospace;}
.vs-beat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  max-height:420px;overflow-y:auto;padding-right:4px;
  /* QA (2026-07-21): available height often lands well under the 420px cap
     (the modal's own header/search bar eat into it), and OS-level overlay
     scrollbars are invisible until actively dragged — a partially-cut third
     row with no visible scrollbar reads as "broken/cut off", not
     "scrollable". Force a thin, always-visible scrollbar instead. */
  scrollbar-width:thin;scrollbar-color:rgba(34,182,255,.4) transparent;
}
.vs-beat-grid::-webkit-scrollbar{width:6px;}
.vs-beat-grid::-webkit-scrollbar-track{background:transparent;}
.vs-beat-grid::-webkit-scrollbar-thumb{background:rgba(34,182,255,.4);border-radius:3px;}
.vs-beat-grid::-webkit-scrollbar-thumb:hover{background:rgba(34,182,255,.6);}
.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',"manrope Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"manrope Fallback",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:32px 16px;
  font-size:12px;color:rgba(255,255,255,.55);font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.04em;
}
.vs-grid-loading--empty{border:1px dashed var(--bdr);border-radius:12px}
@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;}
  #bh-vs .vs-home-preview{padding:0 16px 8px;}
  #bh-vs .vs-preview-fx{gap:16px;}
  #bh-vs .vs-home-features{grid-template-columns:1fr;padding:16px 16px 4px;}
}

/* ─── 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;}
/* Cloud autosave indicator (VS6-2.5) — a dot + label, "Word"-style. The dot
   is an ::before so the mobile breakpoint can hide the label text alone
   (font-size:0 on the parent) while keeping the dot's own explicit size. */
.vs-cloudstat{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-family:'dm mono',"dm mono Fallback",monospace;font-size:9px;letter-spacing:.05em;color:rgba(255,255,255,.45);white-space:nowrap;}
.vs-cloudstat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.vs-cloudstat[data-state="saving"]::before{background:var(--cb);animation:vsCloudPulse 1s ease-in-out infinite;}
.vs-cloudstat[data-state="saved"]::before{background:#22c55e;}
.vs-cloudstat[data-state="offline"]::before{background:#f59e0b;}
.vs-cloudstat[data-state="error"]::before{background:var(--cr);}
@keyframes vsCloudPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.vs-tp-title{
  font-family:'manrope',"manrope Fallback",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',"manrope Fallback",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;}
/* No-cover beats show a deterministic gradient tile (background set inline) instead of a blank/broken img. */
.vs-track__art.is-ph{display:block;background-size:cover;}
.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-mic-sel{
  max-width:140px;background:var(--sur);border:1px solid var(--bdr);border-radius:6px;
  color:rgba(255,255,255,.6);font-family:'dm mono',"dm mono Fallback",monospace;font-size:10px;
  padding:3px 5px;cursor:pointer;flex-shrink:1;min-width:0;
}
.vs-mic-sel:hover{border-color:rgba(255,255,255,.25);}
.vs-clean-btn{
  background:var(--sur);border:1px solid var(--bdr);border-radius:6px;
  color:rgba(255,255,255,.5);font-family:'dm mono',"dm mono Fallback",monospace;font-size:9px;
  letter-spacing:.03em;padding:4px 8px;cursor:pointer;flex-shrink:0;transition:all .14s;
}
.vs-clean-btn:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75);}
.vs-clean-btn[aria-pressed="true"]{border-color:var(--cb);color:var(--cb);}
.vs-clean-btn.blocked{border-color:var(--cr);color:var(--crh);}
.is-clip{background:var(--cr) !important;}
.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',"manrope Fallback",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',"dm mono Fallback",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 ══════ */
/* VS6-3.2: single primary CTA — #bh-vs-act carries a 'has-take' state class
   (toggled in engine.js at installTake()/armLayer()/recording-reset/track-change,
   the same spots that already show/hide these buttons). Every action button is
   "ghost" by default; #bh-vs-sing gets the blue fill pre-take, #bh-vs-pub gets it
   once a take is installed — never both. */
#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:transparent;border:1px solid var(--bdr);
  color:rgba(255,255,255,.65);font-size:13px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;flex-shrink:0;transition:all .14s;font-family:'dm mono',"dm mono Fallback",monospace;
}
.vs-sing:hover{background:rgba(255,255,255,.06);}
.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;}}
/* Primary CTA: no take installed yet → Sing is the one filled button */
#bh-vs-act:not(.has-take) #bh-vs-sing:not(.go){
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);border-color:transparent;
  color:#fff;box-shadow:0 6px 20px rgba(34,182,255,.35);
}
#bh-vs-act:not(.has-take) #bh-vs-sing:not(.go):hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,182,255,.45);}
.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',"dm mono Fallback",monospace;
  background:transparent;border:1px solid var(--bdr);color:rgba(255,255,255,.6);
}
.vs-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);}
.vs-btn-pub{margin-left:auto;}
.vs-btn-pub:disabled{opacity:.45;pointer-events:none;}
/* Primary CTA: take installed → Publish is the one filled button */
#bh-vs-act.has-take #bh-vs-pub{
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);border-color:transparent;
  color:#fff;box-shadow:0 6px 20px rgba(34,182,255,.35);
}
#bh-vs-act.has-take #bh-vs-pub:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,182,255,.45);}
.vs-btn-mix:disabled{opacity:.45;pointer-events:none;}
.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);color:#2dd4bf;}
.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);color:#fbbf24;}
.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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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:32px 16px;
  font-size:12px;color:rgba(255,255,255,.55);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',"manrope Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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-cloudstat{font-size:0;gap:0;margin-left:6px;}
  .vs-cloudstat::before{width:6px;height:6px;}
  .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 — the "dedicated pass" the QA note below asked for ──
     Was: flex:1/1.3 squeezed every row into the fixed panel height, so a vocal
     row needing ~137px only got ~60px and bled ~42px INTO the next row (garbled,
     overlapping content — the reported bug). Fix: the panel scrolls vertically
     and each track keeps its NATURAL height (flex:0 0 auto) → no compression, no
     overlap, tap-only (no swipe), scroll to reach lower tracks. */
  #bh-vs-tracks{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;overscroll-behavior:contain;}
  .vs-track--beat{flex:0 0 auto;}
  .vs-track--vocal{flex:0 0 auto;}
  /* Beat waveform lane keeps a usable height even at natural sizing. */
  .vs-track--beat .vs-track__lane{min-height:72px;}
  .vs-track--vocal .vs-track__lane{min-height:44px;}
  .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;}
  #bh-vs-mic-gain-row{flex-wrap:wrap;}
  .vs-mic-sel{max-width:none;width:100%;}
  .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:flex;flex-direction:column;gap:8px;margin-bottom:24px;
}
.vs-imodal-step{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:10px 12px;text-align:left;
}
.vs-imodal-step-ico{
  flex:0 0 30px;width:30px;height:22px;
  display:flex;align-items:center;justify-content:center;
}
.vs-imodal-step-body{min-width:0;}
.vs-imodal-step-ttl{
  font:700 11px/1.2 'Manrope',sans-serif;color:#fff;
  margin-bottom:3px;
}
.vs-imodal-step-txt{
  font:400 9px/1.4 'DM Mono',monospace;
  color:rgba(255,255,255,.35);
}
/* Pure-CSS step illustrations — reuse the same tokens/keyframes already
   established elsewhere in this file (var(--cb)/--cr, the `dp` blink
   keyframe from the record button) rather than new emoji/images. */
.vs-imodal-ico--eq{gap:3px;}
.vs-imodal-ico--eq i{
  width:4px;border-radius:2px;display:block;
  background:linear-gradient(180deg,var(--cb-tint,#7FD0FF),var(--cb));
}
.vs-imodal-ico--eq i:nth-child(1){height:9px;}
.vs-imodal-ico--eq i:nth-child(2){height:19px;}
.vs-imodal-ico--eq i:nth-child(3){height:13px;}
.vs-imodal-ico--mic b{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--cb);position:relative;display:block;
}
.vs-imodal-ico--mic b::after{
  content:'';position:absolute;inset:4px;border-radius:50%;
  background:var(--cb);opacity:.55;
}
.vs-imodal-ico--cloud{gap:6px;}
.vs-imodal-ico--cloud em{
  width:22px;height:12px;border-radius:8px;position:relative;display:block;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
}
.vs-imodal-ico--cloud em::before{
  content:'';position:absolute;left:3px;top:-5px;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
}
.vs-imodal-ico--cloud b{
  width:8px;height:8px;border-radius:50%;background:var(--cr);display:block;
  animation:dp .6s step-start infinite;
}
.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
══════════════════════════════════════════════ */
/* VS6-3.2: ghost by default (see 1-CTA rule for #bh-vs-act above) — no accent
   color competing with the primary Sing/Publish fill. */

/* ══════════════════════════════════════════════
   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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"dm mono Fallback",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',"manrope Fallback",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',"manrope Fallback",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;}}

/* ══════════════════════════════════════════════════════
   MOBILE SHELL (VS6-3.3) — linear one-task-at-a-time flow.
   Every rule scoped under body.bh-vs-m (set by the inline anti-FOUC
   script + shell.js, VS6-3.1) so #bh-vs-mshell can never render on
   desktop even though the markup exists in the DOM there too —
   shell-mobile.js itself already no-ops off body.bh-vs-m; this is the
   independent CSS-side guard. Reuses --cb/--bdr/--sur/--bg/--cr/--crh
   and the existing `dp`/`vs-rectimer-blink` keyframes from the top of
   this file — no new variables or animations introduced.
   ══════════════════════════════════════════════════════ */
body.bh-vs-d #bh-vs-mshell{display:none!important;}
body.bh-vs-m #bh-vs-mshell{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  height:calc(100dvh - var(--vs-nav-h,64px));background:var(--bg);
  font-family:'dm mono',"dm mono Fallback",monospace;
}
body.bh-vs-m #bh-vs-mshell .vs-ms-step{display:none;flex-direction:column;height:100%;min-height:0;}
body.bh-vs-m #bh-vs-mshell .vs-ms-step.is-active{display:flex;}

body.bh-vs-m .vs-ms-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;flex-shrink:0;
  border-bottom:1px solid var(--bdr);
}
body.bh-vs-m .vs-ms-back{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid var(--bdr);color:#fff;
  font-size:16px;line-height:1;cursor:pointer;
}
body.bh-vs-m .vs-ms-back:active{background:rgba(255,255,255,.12);}
body.bh-vs-m .vs-ms-title{font-size:14px;font-weight:700;color:#fff;font-family:'syne',"syne Fallback",sans-serif;}
body.bh-vs-m .vs-ms-body{
  flex:1;min-height:0;overflow-y:auto;padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:14px;
}
body.bh-vs-m .vs-ms-body--center{align-items:center;justify-content:center;text-align:center;gap:20px;}
body.bh-vs-m .vs-ms-foot{
  flex-shrink:0;padding:14px 16px;border-top:1px solid var(--bdr);
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}

/* Single primary CTA (blue, var(--cb) gradient) per step — same fill the
   Actions bar CTA already uses (VS6-3.2). */
body.bh-vs-m .vs-ms-cta,
body.bh-vs-m .vs-ms-next{
  display:flex;align-items:center;justify-content:center;width:100%;
  padding:15px 20px;border-radius:28px;border:none;
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;
  cursor:pointer;font-family:'dm mono',"dm mono Fallback",monospace;
  box-shadow:0 6px 20px rgba(34,182,255,.35);
}
body.bh-vs-m .vs-ms-cta:disabled{opacity:.5;pointer-events:none;}
body.bh-vs-m .vs-ms-cta.is-busy{opacity:.7;}
body.bh-vs-m .vs-ms-retake{
  width:100%;padding:13px 20px;margin-top:8px;border-radius:28px;
  background:transparent;border:1px solid var(--bdr);color:rgba(255,255,255,.65);
  font-size:12px;cursor:pointer;font-family:'dm mono',"dm mono Fallback",monospace;
}

/* Full-mode escape hatch — reachable from any step */
body.bh-vs-m .vs-ms-fullmode{
  position:absolute;top:14px;right:16px;z-index:5;
  background:transparent;border:1px solid var(--bdr);border-radius:14px;
  padding:5px 10px;font-size:9px;color:rgba(255,255,255,.4);
  cursor:pointer;font-family:'dm mono',"dm mono Fallback",monospace;letter-spacing:.04em;
}

/* STEP: beat */
body.bh-vs-m .vs-ms-beatlist{display:flex;flex-direction:column;gap:8px;width:100%;}
body.bh-vs-m .vs-ms-beatcard{
  display:flex;align-items:center;gap:12px;padding:10px;width:100%;
  background:var(--sur);border:1px solid var(--bdr);border-radius:12px;
  cursor:pointer;text-align:left;font-family:'dm mono',"dm mono Fallback",monospace;
}
body.bh-vs-m .vs-ms-beatcard:active{background:rgba(255,255,255,.06);}
body.bh-vs-m .vs-ms-beatcard-art{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.05);}
body.bh-vs-m .vs-ms-beatcard-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px;}
body.bh-vs-m .vs-ms-beatcard-title{font-size:12px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.bh-vs-m .vs-ms-beatcard-tags{display:flex;gap:6px;}
body.bh-vs-m .vs-ms-beatcard-tag{font-size:9px;color:rgba(74,184,245,.8);background:rgba(34,182,255,.1);padding:2px 6px;border-radius:6px;}
body.bh-vs-m .vs-ms-loading{padding:32px 16px;font-size:12px;color:rgba(255,255,255,.55);text-align:center;width:100%;}
body.bh-vs-m .vs-ms-loadmore{
  width:100%;padding:11px;margin-top:4px;border-radius:20px;
  background:transparent;border:1px solid var(--bdr);color:rgba(255,255,255,.6);
  font-size:11px;cursor:pointer;font-family:'dm mono',"dm mono Fallback",monospace;
}

/* STEP: cal */
body.bh-vs-m .vs-ms-cal-status{font-size:12px;color:rgba(255,255,255,.55);line-height:1.6;max-width:280px;}
body.bh-vs-m .vs-ms-mic-slot{width:100%;max-width:320px;}
body.bh-vs-m .vs-ms-mic-slot select{
  width:100%;padding:12px 14px;border-radius:12px;
  background:var(--sur);border:1px solid var(--bdr);color:#fff;font-size:12px;
  font-family:'dm mono',"dm mono Fallback",monospace;
}

/* STEP: rec */
body.bh-vs-m .vs-ms-wave{width:100%;max-width:320px;height:80px;}
body.bh-vs-m .vs-ms-cdnum{
  display:none;font-size:52px;line-height:1;font-weight:800;color:#fff;
  font-family:'syne',"syne Fallback",sans-serif;
}
body.bh-vs-m .vs-ms-cdnum.is-on{display:block;}
body.bh-vs-m .vs-ms-timer{
  display:none;font-size:13px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;
}
body.bh-vs-m .vs-ms-timer.on{display:block;color:var(--crh);}
body.bh-vs-m .vs-ms-timer.warn{color:#ff5a5a;animation:vs-rectimer-blink .8s steps(2,start) infinite;}
body.bh-vs-m .vs-ms-recbig{
  width:88px;height:88px;border-radius:50%;flex-shrink:0;padding:0;
  background:linear-gradient(135deg,#22B6FF 0%,#4ab8f5 100%);border:none;
  box-shadow:0 8px 28px rgba(34,182,255,.4);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
body.bh-vs-m .vs-ms-recbig .dot{width:26px;height:26px;border-radius:50%;background:#fff;}
body.bh-vs-m .vs-ms-recbig.is-rec{
  background:rgba(239,68,68,.25);border:2px solid var(--cr);
  box-shadow:0 0 0 8px rgba(239,68,68,.12);
}
body.bh-vs-m .vs-ms-recbig.is-rec .dot{background:var(--cr);border-radius:6px;animation:dp .6s step-start infinite;}
body.bh-vs-m .vs-ms-hint{font-size:11px;color:rgba(255,255,255,.35);}

/* STEP: listen */
body.bh-vs-m .vs-ms-wave--static{opacity:.8;}
body.bh-vs-m .vs-ms-playbtn{max-width:220px;}
body.bh-vs-m .vs-ms-playbtn.is-playing{background:rgba(239,68,68,.25);border:1px solid var(--cr);box-shadow:none;}

/* STEP: save */
body.bh-vs-m .vs-ms-name{
  width:100%;max-width:320px;padding:13px 16px;border-radius:14px;
  background:var(--sur);border:1px solid var(--bdr);color:#fff;font-size:13px;
  font-family:'dm mono',"dm mono Fallback",monospace;text-align:center;
}
body.bh-vs-m .vs-ms-cloudstat{font-size:11px;color:rgba(255,255,255,.4);min-height:14px;}
body.bh-vs-m .vs-ms-cloudstat[data-state="saved"]{color:#4ade80;}
body.bh-vs-m .vs-ms-cloudstat[data-state="error"]{color:#f87171;}
body.bh-vs-m .vs-ms-cloudstat[data-state="saving"]{color:rgba(74,184,245,.8);}
@keyframes vs-lat-scan{from{opacity:.3;width:10%}to{opacity:1;width:90%}}

/* The one-time quest (shared BHTour engine, vs-tutorial.js) is now the single
   onboarding for Vocal Studio — permanently retire the legacy intro modal so the
   two never double up on first load (onboarding.js can still no-op on it). */
#bh-vs-intro-modal{display:none!important;}

/* ══════════════════════════════════════════════════════════════════════════
   Unificación con BeatStudio — transport "GarageBand" (RESKIN, no estructura).
   Solo props visuales (sin width/height) para respetar el sizing responsive
   existente. Alinea botones/Play/Loop/tiempo al lenguaje de BeatStudio; ambos
   estudios ya comparten tokens (--cb, DM Mono, fondo casi-negro).
   ══════════════════════════════════════════════════════════════════════════ */
#bh-vs-tp{ background:rgba(12,10,20,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.vs-tb{ border-right-color:rgba(255,255,255,.05); }
/* Transport buttons → BeatStudio pill (resting skin; sizes stay per breakpoint) */
.vs-tbtn{ border-radius:9px; border-color:var(--bdr2,rgba(255,255,255,.16)); background:var(--sur,rgba(255,255,255,.05)); color:rgba(255,255,255,.72); }
/* Scoped :not(.rec):not(.active) so the reskin hover never clobbers the semantic
   states — the RECORD button stays red and an armed MONITOR stays teal on hover. */
.vs-tbtn:not(.rec):not(.active):hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.09); color:#fff; }
/* Play = the primary action — BeatStudio's green→cyan gradient */
#bh-vs-playbtn{ background:linear-gradient(135deg,#34d399,#22B6FF); border-color:transparent; color:#04121c; box-shadow:0 3px 14px rgba(34,182,255,.32); }
#bh-vs-playbtn:hover{ filter:brightness(1.07); background:linear-gradient(135deg,#34d399,#22B6FF); color:#04121c; }
/* Loop / metronome lit state → BeatStudio's loop-toggle gradient */
.vs-loop{ border-radius:9px; border-color:var(--bdr2,rgba(255,255,255,.14)); }
.vs-loop:hover{ border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.7); }
.vs-loop.active,.vs-metro.active{ background:linear-gradient(135deg,var(--cb-light),var(--cb-deep)); border-color:transparent; color:#04121c; box-shadow:0 2px 10px rgba(34,182,255,.3); }
/* Time → dark inset LCD chip (mono, cyan-tint), like BeatStudio's LCD */
.vs-time{ display:inline-flex; align-items:center; font-family:'dm mono',"dm mono Fallback",ui-monospace,monospace; font-weight:700; letter-spacing:.06em; color:var(--cb-tint,#7FD0FF); background:#0c0a14; border:1px solid var(--bdr2,rgba(255,255,255,.16)); border-radius:9px; box-shadow:inset 0 1px 5px rgba(0,0,0,.55); padding:6px 11px; }
/* BPM badge → same LCD/mono cyan family */
.vs-badge-bpm{ font-family:'dm mono',"dm mono Fallback",ui-monospace,monospace; }

/* Rounded pills for every transport control (the aggressive theme forces
   border-radius:0 on bare buttons at low specificity; #bh-vs-tp beats it). */
#bh-vs-tp .vs-tbtn, #bh-vs-tp .vs-loop{ border-radius:10px; }

/* EQ preset chips → BeatStudio's segmented control (shared pattern; was red-themed
   flat chips). #bh-vs-daw prefix (1,1,0) beats the theme's #main button (1,0,1)
   and the original .vs-preset rules. Cyan-gradient active = same as BeatStudio's
   wave-chip segmented control. */
#bh-vs-daw .vs-presets{ display:inline-flex; flex-wrap:nowrap; gap:3px; padding:3px; background:var(--sur,rgba(255,255,255,.05)); border:1px solid var(--bdr,rgba(255,255,255,.09)); border-radius:20px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
#bh-vs-daw .vs-presets::-webkit-scrollbar{ display:none; }
#bh-vs-daw .vs-preset{ border:0; border-radius:14px; background:transparent; color:var(--muted,rgba(255,255,255,.42)); flex:0 0 auto; }
#bh-vs-daw .vs-preset:hover{ color:#fff; background:rgba(255,255,255,.06); }
#bh-vs-daw .vs-preset.is-active{ background:linear-gradient(135deg,var(--cb-light),var(--cb-deep)); color:#fff; box-shadow:0 2px 10px rgba(34,182,255,.3); }

/* Mobile DAW tab bar: active tab gets a subtle cyan chip (BeatStudio's active-pill
   language) while keeping the bottom-nav structure (icon/label/underline). It's a
   5-tab bottom nav, NOT a 2-way segmented control, so it stays a nav — only the
   active treatment is unified. #bh-vs-daw (1,1,0) beats the theme's #main button. */
@media(max-width:600px){
  #bh-vs-daw .vs-daw-tab{ border-radius:11px; margin:4px 3px; transition:color .18s, background .18s; }
  #bh-vs-daw .vs-daw-tab.active{ background:rgba(34,182,255,.13); }
}

/* ── Tarjetas de My Projects: respaldo de miniatura y tarjeta clicable ──
   2026-09-20. La miniatura salía rota porque el JS ponía src="" cuando no había
   URL; ahora, sin imagen, se dibuja este placeholder con la inicial. */
.vs-take-avatar--ph{
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 'Syne',system-ui,sans-serif;
  color:rgba(34,182,255,.85);
  background:rgba(34,182,255,.10);
  border-color:rgba(34,182,255,.22);
  user-select:none;
}
/* La tarjeta entera lleva al beat sobre el que se grabó. */
.vs-take-card--link{cursor:pointer;transition:border-color .18s,transform .18s;}
.vs-take-card--link:hover{border-color:rgba(34,182,255,.3);transform:translateY(-2px);}
.vs-take-card--link:focus-visible{outline:2px solid rgba(34,182,255,.6);outline-offset:2px;}