/* Beat-Timeline Features (Beta) styling */

.sb-bt-beta-tag {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
  border-radius: 0.3em;
  background: linear-gradient(135deg, #ff4d8b, #ff8a3d);
  color: #fff;
}

.sb-bt-coming-tag {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.05em 0.4em;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

.sb-bt-feature-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.7em;
  row-gap: 0.1em;
  align-items: start;
  padding: 0.55em 0;
  cursor: pointer;
  user-select: none;
}

.sb-bt-feature-toggle input[type="checkbox"] {
  grid-row: 1 / span 2;
  margin-top: 0.25em;
  width: 1.05em;
  height: 1.05em;
  accent-color: #ff4d8b;
}

.sb-bt-feature-toggle .sb-bt-feature-name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  font-size: 0.95em;
  color: #fff;
}

.sb-bt-feature-toggle .sb-bt-feature-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

.sb-bt-feature-toggle--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sb-bt-feature-toggle--disabled input { cursor: not-allowed; }

/* ---------------- Lyric B-roll panel ---------------- */

.sb-bt-features-broll {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9000;
  background: rgba(8, 10, 16, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6vh 4vw;
  overflow: auto;
}

.sb-bt-features-broll.is-open {
  display: block;
}

.sb-bt-features-broll-head,
.sb-bt-features-broll-controls,
.sb-bt-features-broll-results,
.sb-bt-features-broll-hint {
  max-width: 920px;
  margin: 0 auto;
}

.sb-bt-features-broll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.4em;
  color: #fff;
}

.sb-bt-features-broll-head h3 {
  margin: 0;
  font-size: 1.4em;
}

.sb-bt-features-broll-hint {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92em;
  margin: 0 auto 1.1em;
  line-height: 1.45;
}

.sb-bt-features-broll-controls {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.4em;
}

.sb-bt-features-broll-status {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9em;
}

.sb-bt-features-broll-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.95em;
}

.sb-bt-features-broll-empty {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 2em 1em;
}

.sb-bt-features-broll-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sb-bt-features-broll-thumb {
  aspect-ratio: 16 / 9;
  background: #111 center / cover no-repeat;
}

.sb-bt-features-broll-meta {
  padding: 0.55em 0.7em 0.2em;
  color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
}

.sb-bt-features-broll-meta strong {
  font-size: 0.95em;
  text-transform: capitalize;
}

.sb-bt-features-broll-meta span {
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.55);
}

.sb-bt-features-broll-actions {
  padding: 0.35em 0.7em 0.6em;
  display: flex;
  gap: 0.4em;
}

.sb-bt-features-broll-actions .sb-bt-btn {
  flex: 1;
  text-align: center;
}

/* ---------------- Hype Moments settings sub-panel ---------------- */

.sb-bt-feature-subpanel {
  margin: 0.4em 0 0.6em 1.85em;
  padding: 0.7em 0.85em;
  border-left: 2px solid rgba(255, 77, 139, 0.6);
  background: rgba(255, 77, 139, 0.05);
  border-radius: 0.35em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.sb-bt-feature-sub-row {
  display: grid;
  grid-template-columns: 5.5em 1fr auto;
  align-items: center;
  gap: 0.7em;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88em;
}

.sb-bt-feature-sub-row > span:first-child {
  font-weight: 600;
}

.sb-bt-feature-sub-val {
  min-width: 4.5em;
  text-align: right;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.6);
}

.sb-bt-feature-sub-row input[type="range"] {
  width: 100%;
  accent-color: #ff4d8b;
}

.sb-bt-feature-sub-checks {
  grid-template-columns: 5.5em 1fr;
  align-items: start;
}

.sb-bt-feature-sub-checkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em 0.85em;
}

.sb-bt-feature-sub-checkrow label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.88em;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.sb-bt-feature-sub-checkrow input[type="checkbox"] {
  accent-color: #ff4d8b;
}

.sb-bt-feature-sub-hint {
  margin: 0.1em 0 0;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

/* ---------------- Hype Moments live preview effects ---------------- */

/* The container of the preview video gets these effects applied via class toggles. */

.sb-bt-stage,
.sb-bt-preview,
.sb-bt-preview-stage {
  position: relative;
}

.sb-bt-hype-zoom {
  animation: sb-bt-hype-zoom-anim 0.42s cubic-bezier(0.18, 1.4, 0.4, 1) both;
  transform-origin: center center;
  will-change: transform;
}

@keyframes sb-bt-hype-zoom-anim {
  0%   { transform: scale(1.00); }
  18%  { transform: scale(var(--hype-zoom-peak, 1.12)); }
  100% { transform: scale(1.00); }
}

.sb-bt-hype-active[data-hype-intensity="1"] { --hype-zoom-peak: 1.06; --hype-shake-px: 3px; }
.sb-bt-hype-active[data-hype-intensity="2"] { --hype-zoom-peak: 1.12; --hype-shake-px: 6px; }
.sb-bt-hype-active[data-hype-intensity="3"] { --hype-zoom-peak: 1.20; --hype-shake-px: 10px; }

.sb-bt-hype-shake {
  animation: sb-bt-hype-shake-anim 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  will-change: transform;
}

@keyframes sb-bt-hype-shake-anim {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(calc(-1 * var(--hype-shake-px, 6px)), calc(0.5 * var(--hype-shake-px, 6px)), 0); }
  20% { transform: translate3d(var(--hype-shake-px, 6px), calc(-0.6 * var(--hype-shake-px, 6px)), 0); }
  30% { transform: translate3d(calc(-0.7 * var(--hype-shake-px, 6px)), calc(0.4 * var(--hype-shake-px, 6px)), 0); }
  40% { transform: translate3d(calc(0.8 * var(--hype-shake-px, 6px)), calc(-0.3 * var(--hype-shake-px, 6px)), 0); }
  60% { transform: translate3d(calc(-0.4 * var(--hype-shake-px, 6px)), calc(0.2 * var(--hype-shake-px, 6px)), 0); }
  80% { transform: translate3d(calc(0.3 * var(--hype-shake-px, 6px)), calc(-0.1 * var(--hype-shake-px, 6px)), 0); }
}

.sb-bt-hype-flash-layer {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: screen;
  border-radius: inherit;
}

.sb-bt-hype-flash-layer.is-on {
  animation: sb-bt-hype-flash-anim 0.22s ease-out both;
}

@keyframes sb-bt-hype-flash-anim {
  0%   { opacity: 0; }
  20%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ---------------- Transitions row (chips above beat rail) ---------------- */

.sb-bt-transitions-row {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 6;
}

.sb-bt-tx-chip {
  position: absolute;
  transform: translateX(-50%);
  top: 2px;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.18em 0.55em;
  background: rgba(20, 22, 30, 0.9);
  color: #fff;
  border-radius: 0.4em;
  border: 1px solid #fff;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-family: inherit;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.sb-bt-tx-chip:hover {
  background: rgba(40, 44, 55, 0.98);
  transform: translateX(-50%) translateY(-1px);
}

/* Composite chip — audition button + label + beat-class badge in a row. */
.sb-bt-tx-chip.sb-bt-tx-chip--withctl {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.12em 0.28em 0.12em 0.18em;
}
.sb-bt-tx-chip-play,
.sb-bt-tx-chip-label,
.sb-bt-tx-chip-cls {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1.2;
}
.sb-bt-tx-chip-play {
  font-size: 0.85em;
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sb-bt-tx-chip-play:hover { background: rgba(255, 255, 255, 0.22); }
.sb-bt-tx-chip-label { padding: 0 0.25em; }
.sb-bt-tx-chip-label:hover { text-decoration: underline; }
.sb-bt-tx-chip-cls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}
.sb-bt-tx-chip-cls--kick   { background: rgba(255, 99, 99, 0.35);  color: #ffd5d5; }
.sb-bt-tx-chip-cls--snare  { background: rgba(255, 204, 79, 0.32); color: #ffe9b8; }
.sb-bt-tx-chip-cls--hat    { background: rgba(120, 220, 255, 0.3); color: #d6f1ff; }
.sb-bt-tx-chip-cls--unknown{ background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }

/* Beat-class picker bar above the catalog tiles. */
.sb-bt-tx-class-bar {
  display: flex;
  gap: 4px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}
.sb-bt-tx-class-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 0;
  font: inherit;
  font-size: 0.78em;
  font-weight: 600;
  cursor: pointer;
}
.sb-bt-tx-class-btn:hover { background: rgba(255, 255, 255, 0.09); }
.sb-bt-tx-class-btn.is-active {
  background: rgba(66, 214, 255, 0.18);
  color: #ddf6ff;
  border-color: rgba(66, 214, 255, 0.45);
}

/* ---------------- Sidebar tabs + transitions panel ---------------- */

.sb-bt-sidebar-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.18);
}
.sb-bt-sb-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-weight: 600;
  font-size: 0.85em;
  padding: 10px 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sb-bt-sb-tab:hover { color: #fff; }
.sb-bt-sb-tab.is-active {
  color: #fff;
  border-bottom-color: #42d6ff;
}
.sb-bt-sb-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.sb-bt-sb-pane[hidden] { display: none !important; }

/* Transitions catalog grid */
.sb-bt-tx-catalog {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 14px;
}
.sb-bt-tx-cat-group {
  font-size: 0.66em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin: 8px 2px 6px;
  font-weight: 700;
}
.sb-bt-tx-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}
.sb-bt-tx-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, transform 0.12s;
}
.sb-bt-tx-tile:hover { border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); }
.sb-bt-tx-tile.is-on {
  border-color: #42d6ff;
  box-shadow: 0 0 0 1px rgba(66, 214, 255, 0.5) inset;
}
.sb-bt-tx-tile-label {
  font-size: 0.66em;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-bt-tx-tile-freq {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}
.sb-bt-tx-tile-freq-pip {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.12s;
}
.sb-bt-tx-tile-freq-pip.is-on {
  background: #42d6ff;
  box-shadow: 0 0 4px rgba(66, 214, 255, 0.55);
}
.sb-bt-tx-tile.is-on .sb-bt-tx-tile-freq-pip:not(.is-on) {
  background: rgba(66, 214, 255, 0.18);
}

/* Tile thumb — preview canvas */
.sb-bt-tx-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    url("/images/transition-preview.svg") center / cover no-repeat,
    #1a1d24;
  border-radius: 4px;
  overflow: hidden;
}
.sb-bt-tx-thumb-inner {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 55%),
    url("/images/transition-preview.svg") center / cover no-repeat,
    #1a1d24;
  transform-origin: center center;
  will-change: transform, filter;
}
.sb-bt-tx-thumb-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: normal;
}

/* "None" tile — neutral surface with a diagonal slash, so users can pick
   "no transition" and see at a glance that this means no effect. */
.sb-bt-tx-fx-none {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.04) 0 6px,
      rgba(255, 255, 255, 0.08) 6px 12px),
    #1a1d24;
}
.sb-bt-tx-fx-none .sb-bt-tx-thumb-inner {
  background: transparent;
}
.sb-bt-tx-fx-none .sb-bt-tx-thumb-overlay {
  opacity: 1;
  background:
    linear-gradient(
      to top left,
      transparent 0%,
      transparent calc(50% - 1px),
      rgba(255, 90, 110, 0.85) 50%,
      transparent calc(50% + 1px),
      transparent 100%
    );
}

/* Stage overlay layer (color flashes / dips during preview) */
.sb-bt-tx-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 55;
  border-radius: inherit;
}

/* ============== Effect keyframes ============== */

/* Flash + Strobe */
@keyframes tx-flash {
  0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes tx-strobe {
  0%, 100% { opacity: 0; }
  10%, 30%, 50%, 70%, 90% { opacity: 1; }
  20%, 40%, 60%, 80% { opacity: 0; }
}
.sb-bt-preview.sb-bt-tx-fx-flash .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-flash.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-flash 0.32s ease-out both;
  background: var(--tx-color, #ffffff);
}
.sb-bt-preview.sb-bt-tx-fx-strobe .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-strobe.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-strobe 0.5s steps(10, end) both;
  background: #ffffff;
}

/* Dip — color full coverage in/out */
@keyframes tx-dip {
  0%, 100% { opacity: 0; }
  45%, 55% { opacity: 1; }
}
.sb-bt-preview.sb-bt-tx-fx-dip .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-dip.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-dip 0.5s ease both;
  background: var(--tx-color, #000000);
}

/* Zoom in / out / blur / punch */
@keyframes tx-zoom-in {
  0% { transform: scale(1); filter: blur(0); }
  100% { transform: scale(1.5); filter: blur(2px); }
}
@keyframes tx-zoom-out {
  0% { transform: scale(1.4); filter: blur(2px); }
  100% { transform: scale(1); filter: blur(0); }
}
@keyframes tx-zoom-blur {
  0% { transform: scale(1); filter: blur(0); }
  50% { transform: scale(1.3); filter: blur(10px); }
  100% { transform: scale(1); filter: blur(0); }
}
@keyframes tx-punch-in {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  100% { transform: scale(1.05); }
}
.sb-bt-preview.sb-bt-tx-fx-zoom-in,
.sb-bt-tx-fx-zoom-in.is-playing .sb-bt-tx-thumb-inner { animation: tx-zoom-in 0.4s ease both; }
.sb-bt-preview.sb-bt-tx-fx-zoom-out,
.sb-bt-tx-fx-zoom-out.is-playing .sb-bt-tx-thumb-inner { animation: tx-zoom-out 0.4s ease both; }
.sb-bt-preview.sb-bt-tx-fx-zoom-blur,
.sb-bt-tx-fx-zoom-blur.is-playing .sb-bt-tx-thumb-inner { animation: tx-zoom-blur 0.45s ease both; }
.sb-bt-preview.sb-bt-tx-fx-punch-in,
.sb-bt-tx-fx-punch-in.is-playing .sb-bt-tx-thumb-inner { animation: tx-punch-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* Whip pan — h/v with --tx-dir */
@keyframes tx-whip-h {
  0% { transform: translateX(0); filter: blur(0); }
  49% { transform: translateX(calc(var(--tx-dir, 1) * 26%)); filter: blur(14px); }
  51% { transform: translateX(calc(var(--tx-dir, 1) * -26%)); filter: blur(14px); }
  100% { transform: translateX(0); filter: blur(0); }
}
@keyframes tx-whip-v {
  0% { transform: translateY(0); filter: blur(0); }
  49% { transform: translateY(calc(var(--tx-dir, 1) * 26%)); filter: blur(14px); }
  51% { transform: translateY(calc(var(--tx-dir, 1) * -26%)); filter: blur(14px); }
  100% { transform: translateY(0); filter: blur(0); }
}
.sb-bt-preview.sb-bt-tx-fx-whip-h,
.sb-bt-tx-fx-whip-h.is-playing .sb-bt-tx-thumb-inner { animation: tx-whip-h 0.4s cubic-bezier(0.5, 0, 0.5, 1) both; }
.sb-bt-preview.sb-bt-tx-fx-whip-v,
.sb-bt-tx-fx-whip-v.is-playing .sb-bt-tx-thumb-inner { animation: tx-whip-v 0.4s cubic-bezier(0.5, 0, 0.5, 1) both; }

/* Slide */
@keyframes tx-slide-h {
  0% { transform: translateX(calc(var(--tx-dir, 1) * 60%)); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes tx-slide-v {
  0% { transform: translateY(calc(var(--tx-dir, 1) * 60%)); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}
.sb-bt-preview.sb-bt-tx-fx-slide-h,
.sb-bt-tx-fx-slide-h.is-playing .sb-bt-tx-thumb-inner { animation: tx-slide-h 0.4s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
.sb-bt-preview.sb-bt-tx-fx-slide-v,
.sb-bt-tx-fx-slide-v.is-playing .sb-bt-tx-thumb-inner { animation: tx-slide-v 0.4s cubic-bezier(0.3, 0.9, 0.4, 1) both; }

/* Push — shove off + new on (single-element approx via translate-and-bounce) */
@keyframes tx-push-h {
  0% { transform: translateX(0); }
  49% { transform: translateX(calc(var(--tx-dir, 1) * -90%)); }
  51% { transform: translateX(calc(var(--tx-dir, 1) * 90%)); }
  100% { transform: translateX(0); }
}
@keyframes tx-push-v {
  0% { transform: translateY(0); }
  49% { transform: translateY(calc(var(--tx-dir, 1) * -90%)); }
  51% { transform: translateY(calc(var(--tx-dir, 1) * 90%)); }
  100% { transform: translateY(0); }
}
.sb-bt-preview.sb-bt-tx-fx-push-h,
.sb-bt-tx-fx-push-h.is-playing .sb-bt-tx-thumb-inner { animation: tx-push-h 0.5s ease both; }
.sb-bt-preview.sb-bt-tx-fx-push-v,
.sb-bt-tx-fx-push-v.is-playing .sb-bt-tx-thumb-inner { animation: tx-push-v 0.5s ease both; }

/* Spin + barrel + tilt */
@keyframes tx-spin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(calc(var(--tx-dir, 1) * 180deg)) scale(0.85); }
  100% { transform: rotate(calc(var(--tx-dir, 1) * 360deg)) scale(1); }
}
@keyframes tx-barrel {
  0% { transform: perspective(400px) rotateX(0) rotateZ(0); }
  100% { transform: perspective(400px) rotateX(0) rotateZ(360deg); }
}
@keyframes tx-tilt {
  0% { transform: perspective(500px) rotateX(0); }
  50% { transform: perspective(500px) rotateX(40deg); }
  100% { transform: perspective(500px) rotateX(0); }
}
.sb-bt-preview.sb-bt-tx-fx-spin,
.sb-bt-tx-fx-spin.is-playing .sb-bt-tx-thumb-inner { animation: tx-spin 0.55s ease-in-out both; }
.sb-bt-preview.sb-bt-tx-fx-barrel,
.sb-bt-tx-fx-barrel.is-playing .sb-bt-tx-thumb-inner { animation: tx-barrel 0.6s ease-in-out both; }
.sb-bt-preview.sb-bt-tx-fx-tilt,
.sb-bt-tx-fx-tilt.is-playing .sb-bt-tx-thumb-inner { animation: tx-tilt 0.5s ease both; }

/* Glitch family */
@keyframes tx-rgb-split {
  0%   { filter: drop-shadow(2px 0 0 #ff2f4f) drop-shadow(-2px 0 0 #42d6ff); transform: translateX(0); }
  25%  { filter: drop-shadow(6px 0 0 #ff2f4f) drop-shadow(-6px 0 0 #42d6ff); transform: translateX(2px); }
  50%  { filter: drop-shadow(-4px 0 0 #ff2f4f) drop-shadow(4px 0 0 #42d6ff); transform: translateX(-2px); }
  100% { filter: drop-shadow(0 0 0 transparent); transform: translateX(0); }
}
@keyframes tx-scanlines {
  0%, 100% { opacity: 0; background-position: 0 0; }
  20%, 80% { opacity: 1; background-position: 0 20px; }
}
@keyframes tx-pixelate {
  0%, 100% { filter: blur(0); transform: scale(1); image-rendering: auto; }
  30%, 70% { filter: blur(4px) contrast(1.4); transform: scale(1.04); }
}
@keyframes tx-glitch {
  0% { transform: translate(0, 0); filter: hue-rotate(0); }
  20% { transform: translate(-4px, 2px); filter: hue-rotate(45deg); }
  40% { transform: translate(4px, -2px); filter: hue-rotate(-30deg) saturate(2); }
  60% { transform: translate(-2px, 0); filter: hue-rotate(90deg); }
  80% { transform: translate(2px, 0); filter: hue-rotate(0); }
  100% { transform: translate(0, 0); filter: none; }
}
@keyframes tx-static {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.85; }
}
.sb-bt-preview.sb-bt-tx-fx-rgb-split,
.sb-bt-tx-fx-rgb-split.is-playing .sb-bt-tx-thumb-inner { animation: tx-rgb-split 0.45s steps(6, end) both; }
.sb-bt-preview.sb-bt-tx-fx-scanlines .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-scanlines.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-scanlines 0.5s linear both;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0 2px, transparent 2px 4px);
}
.sb-bt-preview.sb-bt-tx-fx-pixelate,
.sb-bt-tx-fx-pixelate.is-playing .sb-bt-tx-thumb-inner { animation: tx-pixelate 0.45s steps(6, end) both; }
.sb-bt-preview.sb-bt-tx-fx-glitch,
.sb-bt-tx-fx-glitch.is-playing .sb-bt-tx-thumb-inner { animation: tx-glitch 0.5s steps(8, end) both; }
.sb-bt-preview.sb-bt-tx-fx-static .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-static.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-static 0.4s steps(8, end) both;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.6) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 1px, transparent 1px 3px);
}

/* Blur family */
@keyframes tx-blur-motion {
  0%, 100% { filter: blur(0); transform: translateX(0); }
  50% { filter: blur(12px); transform: translateX(8%); }
}
@keyframes tx-blur-soft {
  0%, 100% { filter: blur(0); }
  50% { filter: blur(14px); }
}
@keyframes tx-blur-radial {
  0%, 100% { filter: blur(0) brightness(1); transform: scale(1); }
  50% { filter: blur(8px) brightness(1.4); transform: scale(1.08); }
}
.sb-bt-preview.sb-bt-tx-fx-blur-motion,
.sb-bt-tx-fx-blur-motion.is-playing .sb-bt-tx-thumb-inner { animation: tx-blur-motion 0.4s ease both; }
.sb-bt-preview.sb-bt-tx-fx-blur-soft,
.sb-bt-tx-fx-blur-soft.is-playing .sb-bt-tx-thumb-inner { animation: tx-blur-soft 0.4s ease both; }
.sb-bt-preview.sb-bt-tx-fx-blur-radial,
.sb-bt-tx-fx-blur-radial.is-playing .sb-bt-tx-thumb-inner { animation: tx-blur-radial 0.45s ease both; }

/* Shake family */
@keyframes tx-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 2px); }
  25% { transform: translate(6px, -3px); }
  40% { transform: translate(-5px, 4px); }
  55% { transform: translate(5px, -2px); }
  70% { transform: translate(-3px, 2px); }
  85% { transform: translate(3px, -1px); }
}
@keyframes tx-vibrate {
  0%, 100% { transform: translate(0, 0); }
  20%, 60% { transform: translate(2px, -1px); }
  40%, 80% { transform: translate(-2px, 1px); }
}
@keyframes tx-tremor {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-3px, 1px) rotate(-1deg); }
  75% { transform: translate(3px, -1px) rotate(1deg); }
}
.sb-bt-preview.sb-bt-tx-fx-shake,
.sb-bt-tx-fx-shake.is-playing .sb-bt-tx-thumb-inner { animation: tx-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.sb-bt-preview.sb-bt-tx-fx-vibrate,
.sb-bt-tx-fx-vibrate.is-playing .sb-bt-tx-thumb-inner { animation: tx-vibrate 0.4s linear both; }
.sb-bt-preview.sb-bt-tx-fx-tremor,
.sb-bt-tx-fx-tremor.is-playing .sb-bt-tx-thumb-inner { animation: tx-tremor 0.45s ease-in-out both; }

/* Iris + Doors + Wipe */
@keyframes tx-iris-in {
  0% { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(8% at 50% 50%); }
}
@keyframes tx-iris-out {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes tx-doors-open {
  0% { clip-path: inset(0 50% 0 50%); opacity: 0.6; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes tx-doors-close {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 50% 0 50%); }
}
@keyframes tx-wipe-h {
  0% { clip-path: inset(0 calc(var(--tx-dir, 1) * 100% + 0px) 0 calc(var(--tx-dir, 1) * -100% + 0px)); }
  100% { clip-path: inset(0 0 0 0); }
}
.sb-bt-preview.sb-bt-tx-fx-iris-in,
.sb-bt-tx-fx-iris-in.is-playing .sb-bt-tx-thumb-inner { animation: tx-iris-in 0.45s ease both; }
.sb-bt-preview.sb-bt-tx-fx-iris-out,
.sb-bt-tx-fx-iris-out.is-playing .sb-bt-tx-thumb-inner { animation: tx-iris-out 0.45s ease both; }
.sb-bt-preview.sb-bt-tx-fx-doors-open,
.sb-bt-tx-fx-doors-open.is-playing .sb-bt-tx-thumb-inner { animation: tx-doors-open 0.45s ease both; }
.sb-bt-preview.sb-bt-tx-fx-doors-close,
.sb-bt-tx-fx-doors-close.is-playing .sb-bt-tx-thumb-inner { animation: tx-doors-close 0.45s ease both; }
.sb-bt-preview.sb-bt-tx-fx-wipe-h,
.sb-bt-tx-fx-wipe-h.is-playing .sb-bt-tx-thumb-inner { animation: tx-wipe-h 0.45s ease both; }

/* Light family — overlay-driven */
@keyframes tx-light-leak {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(100%); }
}
@keyframes tx-lens-flare {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes tx-bloom {
  0%, 100% { filter: brightness(1) blur(0); }
  50% { filter: brightness(1.8) blur(3px); }
}
.sb-bt-preview.sb-bt-tx-fx-light-leak .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-light-leak.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-light-leak 0.55s ease both;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 211, 77, 0.85) 50%, transparent 70%);
}
.sb-bt-preview.sb-bt-tx-fx-lens-flare .sb-bt-tx-overlay-layer,
.sb-bt-tx-fx-lens-flare.is-playing .sb-bt-tx-thumb-overlay {
  animation: tx-lens-flare 0.5s ease both;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 230, 0.95), rgba(255, 200, 120, 0.4) 30%, transparent 60%);
}
.sb-bt-preview.sb-bt-tx-fx-bloom,
.sb-bt-tx-fx-bloom.is-playing .sb-bt-tx-thumb-inner { animation: tx-bloom 0.45s ease both; }

/* Cross fade */
@keyframes tx-cross-fade {
  0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; }
}
.sb-bt-preview.sb-bt-tx-fx-cross-fade,
.sb-bt-tx-fx-cross-fade.is-playing .sb-bt-tx-thumb-inner { animation: tx-cross-fade 0.5s ease both; }

/* ---------------- Smart SFX (detect) panel ---------------- */

.sb-bt-sfxd {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-bt-sfxd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sb-bt-sfxd-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}
.sb-bt-sfxd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  padding: 6px;
}
.sb-bt-sfxd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
}
.sb-bt-sfxd-item:hover { background: rgba(255, 255, 255, 0.04); }
.sb-bt-sfxd-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.85);
}
.sb-bt-sfxd-toggle input[type="checkbox"] { accent-color: #ff4d8b; }

/* Beat-replacement (music-detail) controls */
.sb-bt-sfxd-mb {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255, 211, 77, 0.06);
  border: 1px solid rgba(255, 211, 77, 0.18);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-bt-sfxd-mb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-bt-sfxd-mb-row .sb-bt-sfx-hint {
  flex: 1;
  margin: 0;
  font-size: 0.75em;
}
.sb-bt-sfxd-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-bt-sfxd-bands .sb-bt-sfx-cat.is-locked {
  opacity: 0.5;
  filter: grayscale(0.6);
}

/* Transform mode — magenta accent to signal "this rewrites the music".
   Sits inside the gold music-beat panel so users see it as an upgrade
   to beat-replacement, not a separate feature. */
.sb-bt-sfxd-tx {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255, 77, 139, 0.07);
  border: 1px solid rgba(255, 77, 139, 0.22);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-bt-sfxd-tx.is-on {
  background: rgba(255, 77, 139, 0.14);
  border-color: rgba(255, 77, 139, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 77, 139, 0.25) inset;
}
.sb-bt-sfxd-tx .sb-bt-sfx-hint {
  margin: 0;
  font-size: 0.75em;
  color: rgba(255, 200, 220, 0.85);
}

/* SFX detect markers on the beat rail */
.sb-bt-sfx-detect-row {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  z-index: 5;
}
.sb-bt-sfx-detect-dot {
  position: absolute;
  top: 2px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd34d;
  box-shadow: 0 0 6px rgba(255, 211, 77, 0.7);
}

/* ---- Auto Edit (agent) button + status feed ---- */
.sb-bt-btn--agent {
  background: linear-gradient(135deg, #7b5cff 0%, #ff5cb8 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(123, 92, 255, 0.35);
}
.sb-bt-btn--agent:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(123, 92, 255, 0.45);
}
.sb-bt-btn--agent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.sb-bt-agent-feed {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: min(360px, calc(100% - 24px));
  max-height: 45%;
  background: rgba(10, 10, 14, 0.82);
  color: #f4f4f6;
  border: 1px solid rgba(123, 92, 255, 0.45);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  z-index: 6;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: auto;
}
.sb-bt-agent-feed[hidden] { display: none; }
.sb-bt-agent-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sb-bt-agent-feed-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sb-bt-agent-feed-close {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sb-bt-agent-feed-close:hover { color: #fff; }
.sb-bt-agent-feed-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px 10px;
  overflow-y: auto;
  flex: 1;
}
.sb-bt-agent-feed-item {
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.sb-bt-agent-feed-item:last-child { border-bottom: none; }
.sb-bt-agent-feed-item--ok { color: #b6f5c2; }
.sb-bt-agent-feed-item--warn { color: #ffd089; }
.sb-bt-agent-feed-item--info { color: #d6d6df; }

/* ---- Tempo-tap viewport (BPM hint) ---- */
.sb-bt-tempo-tap {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: rgba(123, 92, 255, 0.07);
  border: 1px solid rgba(123, 92, 255, 0.22);
  border-radius: 10px;
}
.sb-bt-tempo-tap-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.sb-bt-tempo-tap-header strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.sb-bt-tempo-tap-sub {
  font-size: 11px;
  opacity: 0.7;
}
.sb-bt-tempo-tap-body {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-bt-tempo-tap-pad {
  position: relative;
  flex: 1 1 auto;
  min-height: 64px;
  border: 1px dashed rgba(123, 92, 255, 0.6);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.18), rgba(255, 92, 184, 0.15));
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.06s ease, box-shadow 0.18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sb-bt-tempo-tap-pad:hover {
  box-shadow: 0 4px 14px rgba(123, 92, 255, 0.28);
}
.sb-bt-tempo-tap-pad:active,
.sb-bt-tempo-tap-pad.is-tapping {
  transform: scale(0.97);
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.35), rgba(255, 92, 184, 0.32));
}
.sb-bt-tempo-tap-pulse {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35), transparent 60%);
}
.sb-bt-tempo-tap-pad.is-tapping .sb-bt-tempo-tap-pulse {
  animation: bt-tempo-pulse 0.32s ease-out;
}
@keyframes bt-tempo-pulse {
  0%   { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(1.0); }
}
.sb-bt-tempo-tap-bpm {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sb-bt-tempo-tap-hint {
  font-size: 10px;
  opacity: 0.72;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sb-bt-tempo-tap-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 60px;
}
.sb-bt-tempo-tap-taps {
  font-size: 11px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ── Video length moved into the Import Media modal ──────────────────────── */
/* The old top-corner length slider is hidden; the canonical #targetDur input
   stays in the DOM (driven by the modal chips) so all existing JS keeps
   working. */
.sb-bt-length-control {
  display: none !important;
}
.sb-bt-mim-duration {
  margin: 6px 0 2px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(90, 160, 255, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(90, 160, 255, 0.1), rgba(90, 160, 255, 0.02));
}
.sb-bt-mim-duration-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sb-bt-mim-duration-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5aa0ff;
}
.sb-bt-mim-duration-val {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sb-bt-mim-duration-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-bt-mim-dchip {
  position: relative;
  flex: 1 1 0;
  min-width: 56px;
  padding: 11px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #e8eefb;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease;
}
.sb-bt-mim-dchip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
}
.sb-bt-mim-dchip.is-active {
  background: linear-gradient(120deg, #3a6bff, #5aa0ff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(58, 107, 255, 0.42);
}
.sb-bt-mim-dchip[data-premium="1"]::after {
  content: "\2605";
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 9px;
  line-height: 1;
  color: #ffd97a;
  opacity: 0.9;
}
.sb-bt-mim-duration-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.sb-bt-mim-duration-note b {
  color: #ffd97a;
  font-weight: 700;
}