/**
 * Beat Editor — align chrome with beat portal tokens + cutflux-ui patterns.
 */
html[data-portal="beat"] .hdr-export,
html[data-portal="beat"] .t-primary,
html[data-portal="beat"] .dn-share,
html[data-portal="beat"] .clip-check,
html[data-portal="beat"] .cap-toggle.on .cap-switch,
html[data-portal="beat"] .dk.active .dk-box {
  background: linear-gradient(135deg, var(--portal-accent-deep), var(--portal-accent)) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--portal-accent) 35%, transparent) !important;
}

html[data-portal="beat"] .tl-clip,
html[data-portal="beat"] .clip-tile,
html[data-portal="beat"] .clip-hint i.c,
html[data-portal="beat"] .fmt-glyph .inner {
  background: linear-gradient(135deg, var(--portal-accent-deep), var(--portal-accent)) !important;
}

html[data-portal="beat"] .save-coach,
html[data-portal="beat"] .play-coach {
  background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-deep)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--portal-accent) 36%, transparent) !important;
}

html[data-portal="beat"] .save-coach::before {
  background: var(--portal-accent) !important;
}

html[data-portal="beat"] .stage-empty-h em,
html[data-portal="beat"] .load-lbl,
html[data-portal="beat"] .dn-sub b {
  color: var(--portal-accent) !important;
}

html[data-portal="beat"] .stage-empty-cta {
  background: linear-gradient(135deg, var(--portal-accent-deep), var(--portal-accent)) !important;
}

html[data-portal="beat"] .add-chip.filled:hover,
html[data-portal="beat"] .add-chip.filled:focus-visible {
  border-color: color-mix(in srgb, var(--portal-accent) 55%, transparent);
  background: color-mix(in srgb, var(--portal-accent) 12%, transparent);
}

html[data-portal="beat"] .stage-empty-arrow {
  color: var(--portal-accent) !important;
}