/* ── beatif-studio shared plugin UI — unify.css ──
   Unified playbar, A/B toggle, download buttons, waveform.
   Add .bf-* classes to existing elements — old classes stay as fallback.
*/

/* PLAYBAR */
.bf-playbar { display:flex; align-items:center; gap:12px; }

.bf-play {
  appearance:none; cursor:pointer; width:46px; height:46px; border-radius:50%;
  background:rgba(155,92,255,0.18); border:1px solid rgba(155,92,255,0.38); color:#fff;
  backdrop-filter:blur(12px) saturate(1.6); -webkit-backdrop-filter:blur(12px) saturate(1.6);
  display:grid; place-items:center;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.45), 0 4px 14px -4px rgba(155,92,255,0.45);
  transition:transform 0.08s ease, background 0.15s ease; flex-shrink:0;
}
.bf-play:hover:not(:disabled) { transform:scale(1.06); }
.bf-play:active:not(:disabled) { transform:scale(0.95); }
.bf-play.is-playing { background:rgba(155,92,255,0.30); }
.bf-play:disabled { opacity:0.38; cursor:default; transform:none; }

/* A/B TOGGLE */
.bf-ab { display:inline-flex; border:1px solid var(--border-2,rgba(255,255,255,0.12)); border-radius:999px; overflow:hidden; }
.bf-ab-t {
  appearance:none; cursor:pointer; padding:9px 16px; border:none; background:transparent;
  color:var(--dim,rgba(255,255,255,0.5)); font:700 12px/1 'Satoshi',sans-serif;
  letter-spacing:0.04em; transition:all 0.15s; white-space:nowrap;
}
.bf-ab-t.is-on { color:#9B5CFF; background:rgba(155,92,255,0.14); }
[data-theme="light"] .bf-ab { border-color:rgba(0,0,0,0.12); }
[data-theme="light"] .bf-ab-t { color:var(--dim,rgba(0,0,0,0.45)); }

/* DOWNLOAD ROW */
.bf-dlrow { display:flex; gap:8px; }

.bf-dl {
  flex:1; padding:13px 16px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(155,92,255,0.38); background:rgba(155,92,255,0.18);
  backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6);
  color:#fff; font:700 13px/1 'Satoshi',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(100,30,200,0.20),
             0 4px 18px -6px rgba(155,92,255,0.35);
  transition:filter 0.15s, transform 0.08s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bf-dl:hover:not(:disabled) { background:rgba(155,92,255,0.28); border-color:rgba(155,92,255,0.58); transform:translateY(-1px); }
.bf-dl:active:not(:disabled) { transform:translateY(0); }
.bf-dl:disabled { opacity:0.45; cursor:default; }

.bf-dl--wav {
  flex:0 0 auto; background:transparent; border:1px solid rgba(155,92,255,0.25);
  color:rgba(155,92,255,0.9); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.bf-dl--wav:hover:not(:disabled) { border-color:rgba(155,92,255,0.55); color:#9B5CFF; background:rgba(155,92,255,0.08); }

[data-theme="light"] .bf-dl {
  background:linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0.04)),
             linear-gradient(120deg,#FF4D9D,#9B5CFF,#5AA9FF);
  border:none; backdrop-filter:none; -webkit-backdrop-filter:none; color:#fff;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.45), 0 4px 18px -6px rgba(255,77,157,0.30);
}
[data-theme="light"] .bf-dl--wav {
  background:transparent; border:1px solid rgba(155,92,255,0.35); color:#9B5CFF;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
[data-theme="light"] .bf-dl--wav:hover:not(:disabled) { background:rgba(155,92,255,0.08); }

/* WAVEFORM CARD */
.bf-wave {
  position:relative; background:var(--surface,rgba(255,255,255,0.04));
  border:1px solid var(--border,rgba(255,255,255,0.10));
  border-radius:14px; padding:12px 14px 14px; cursor:crosshair; overflow:hidden;
}
.bf-wave-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bf-wave-head .name {
  font:700 11px/1 'Satoshi',sans-serif; letter-spacing:0.04em;
  color:var(--dim,rgba(255,255,255,0.5));
  display:inline-flex; align-items:center; gap:8px;
}
.bf-wave-head .name.on { color:var(--blue,#5AA9FF); }
.bf-wave-head .led { width:7px; height:7px; border-radius:50%; background:var(--blue,#5AA9FF); box-shadow:0 0 6px var(--blue-glow,rgba(90,169,255,0.6)); }
.bf-wave-head .time { font:600 11px/1 'Satoshi',sans-serif; color:var(--dim,rgba(255,255,255,0.4)); font-variant-numeric:tabular-nums; }
.bf-wave svg { display:block; width:100%; height:60px; }

/* NO LAYOUT SHIFT: always-visible, locked state */
.bf-gated { transition:opacity 0.2s ease; }
.bf-gated.is-locked { opacity:0.45; pointer-events:none; }