:is(
  .ui-btn,
  .bm-btn,
  .sf-btn,
  .sf-hero__btn,
  .sf-cta__btn,
  .sf-view-toggle__btn,
  .finance-primary-btn,
  .finance-secondary-btn,
  .primary-button,
  .ghost-button,
  .submit-button,
  .bp-pay__submit,
  .checkout-btn,
  .upload-submit-btn,
  .upload-form-header .upload-submit-btn,
  .upload-yt-modal__btn,
  .upload-success-panel__btn,
  .upload-success-panel__copy,
  .guest-purchase-btn,
  .guest-purchase-file-link,
  .upload-back-btn,
  .btn-cancel,
  .btn-accept,
  .balance-btn,
  .filter-toggle-btn,
  .bm-kind-tab,
  .bm-home .chart-filter-btn,
  .bm-home .chart-type-btn,
  .bm-home .chart-range-trigger,
  .cart-subscription-period-btn,
  .ui-segmented__btn,
  .bm-finance-pager__btn,
  .beat-license-btn,
  button.ui-btn,
  button.bm-btn,
  button.primary-button,
  button.ghost-button,
  button.submit-button,
  button.checkout-btn
) {
  --btn-size: var(--control-height);
  --width: var(--btn-size);
  corner-shape: squircle;
  border-radius: calc((var(--width) / 2) * 44.53125);
}

:is(
  .ui-btn--sm,
  .bm-btn--sm,
  .bm-kind-tab,
  .bm-home .chart-filter-btn,
  .bm-home .chart-type-btn,
  .bm-home .chart-range-trigger,
  .cart-subscription-period-btn,
  .ui-segmented__btn,
  .bm-finance-pager__btn,
  .filter-toggle-btn,
  .guest-purchase-file-link
) {
  --btn-size: var(--control-height-sm);
  --width: var(--btn-size);
}

.ui-btn,
.bm-btn,
.sf-btn,
.finance-primary-btn,
.finance-secondary-btn,
.primary-button,
.ghost-button,
.submit-button,
.bp-pay__submit,
.checkout-btn,
.upload-submit-btn,
.upload-form-header .upload-submit-btn,
.upload-yt-modal__btn,
.upload-success-panel__btn,
.upload-success-panel__copy,
.guest-purchase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  border: none;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-family: inherit;
  font-size: var(--text-size-subhead);
  font-weight: var(--text-weight-semibold);
  line-height: var(--line-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transform: none;
  box-shadow: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.ui-btn:hover,
.bm-btn:hover,
.sf-btn:hover,
.primary-button:hover,
.ghost-button:hover,
.submit-button:hover,
.bp-pay__submit:hover,
.checkout-btn:hover,
.upload-submit-btn:hover,
.upload-yt-modal__btn:hover {
  background: var(--button-hover-bg);
}

.ui-btn:disabled,
.bm-btn:disabled,
.sf-btn:disabled,
.finance-primary-btn:disabled,
.finance-secondary-btn:disabled,
.primary-button:disabled,
.ghost-button:disabled,
.submit-button:disabled,
.bp-pay__submit:disabled,
.checkout-btn:disabled,
.upload-submit-btn:disabled,
.upload-yt-modal__btn:disabled,
.ui-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-btn--primary,
.bm-btn--primary,
.sf-btn--primary,
.finance-primary-btn,
.primary-button.save-edit,
.primary-button,
.submit-button,
.bp-pay__submit,
.checkout-btn-primary,
.checkout-btn.checkout-btn-primary,
.upload-container .upload-submit-btn,
.upload-container .primary-button.save-edit.upload-submit-btn,
.upload-form-header .upload-submit-btn,
.upload-yt-modal__btn--primary,
#topUpModal #stripeTopUpBtn,
#topUpModal #ruSbpStartBtn,
#withdrawModal .withdraw-btn-primary,
#topUpModal.bp-pay #stripeTopUpBtn,
#topUpModal.bp-pay #ruSbpStartBtn,
#topUpModal.bp-pay .bp-pay__submit {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.ui-btn--primary:hover,
.bm-btn--primary:hover,
.sf-btn--primary:hover,
.finance-primary-btn:hover,
.primary-button:hover,
.primary-button.save-edit:hover,
.submit-button:hover,
.bp-pay__submit:hover,
.checkout-btn-primary:hover,
.checkout-btn.checkout-btn-primary:hover,
.upload-container .upload-submit-btn:hover,
.upload-container .primary-button.save-edit.upload-submit-btn:hover,
.upload-form-header .upload-submit-btn:hover,
.upload-yt-modal__btn--primary:hover,
#topUpModal #stripeTopUpBtn:hover,
#topUpModal #ruSbpStartBtn:hover,
#withdrawModal .withdraw-btn-primary:hover,
#topUpModal.bp-pay #stripeTopUpBtn:hover,
#topUpModal.bp-pay #ruSbpStartBtn:hover,
#topUpModal.bp-pay .bp-pay__submit:hover {
  background: var(--accent-hover);
  color: var(--button-primary-text);
  opacity: 1;
}

.ui-btn--secondary,
.bm-btn--secondary,
.finance-secondary-btn,
.ghost-button,
.bp-pay__submit--ghost,
.sf-btn--ghost,
.upload-yt-modal__btn--ghost,
.btn-cancel {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.ui-btn--secondary:hover,
.bm-btn--secondary:hover,
.finance-secondary-btn:hover,
.ghost-button:hover,
.bp-pay__submit--ghost:hover,
.sf-btn--ghost:hover,
.upload-yt-modal__btn--ghost:hover,
.btn-cancel:hover {
  background: color-mix(in srgb, var(--label-primary) 8%, var(--fill-secondary));
  color: var(--button-secondary-text);
  opacity: 1;
}

.ui-btn--ghost,
.bm-btn--ghost {
  background: transparent;
  color: var(--label-tertiary);
}

.ui-btn--ghost:hover,
.bm-btn--ghost:hover {
  background: var(--accent-soft);
  color: var(--label-primary);
}

.ui-btn--destructive {
  background: var(--system-red);
  color: var(--label-on-accent);
}

.ui-btn--destructive:hover {
  background: color-mix(in srgb, var(--system-red) 88%, var(--fill-grouped));
  color: var(--label-on-accent);
}

.ui-btn--sm,
.bm-btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-size-footnote);
}

.ui-btn--on-dark,
.bm-metric--balance .bm-btn--secondary,
.bm-metric--balance .bm-btn--ghost {
  background: var(--accent, #ffffff);
  color: var(--label-on-accent, #1c1c1e);
  min-height: var(--control-height-sm);
  font-size: var(--text-size-footnote);
}

.ui-btn--on-dark:hover,
.bm-metric--balance .bm-btn--secondary:hover,
.bm-metric--balance .bm-btn--ghost:hover {
  background: var(--accent-hover, #e5e5ea);
  color: var(--label-on-accent, #1c1c1e);
}

.ui-btn--block,
.finance-primary-btn,
.finance-secondary-btn,
.submit-button,
.bp-pay__submit,
.checkout-btn,
#topUpModal #stripeTopUpBtn,
#topUpModal #ruSbpStartBtn,
#withdrawModal .withdraw-btn-primary,
#topUpModal.bp-pay #stripeTopUpBtn,
#topUpModal.bp-pay #ruSbpStartBtn,
#topUpModal.bp-pay .bp-pay__submit {
  width: 100%;
}

.bm-page-actions [hidden],
.bm-btn[hidden],
[data-for-section][hidden] {
  display: none !important;
}

.ui-card,
.ui-panel,
.bm-panel,
.sf-simple__card {
  background: var(--fill-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-sizing: border-box;
  border: none;
  box-shadow: none;
}

.ui-card,
.ui-elevated,
.cart-item,
.order-summary,
.upload-type-card,
.upload-license-card {
  background: var(--fill-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.ui-panel,
.bm-panel {
  margin-bottom: var(--space-3);
}

.ui-panel--flush,
.bm-panel--flush {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  border: none;
}

.ui-section-title,
.bm-panel__title,
.cart-header h1,
.upload-step-title,
.upload-form-heading,
.upload-form-header .upload-form-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-size-headline);
  font-weight: var(--text-weight-bold);
  line-height: var(--line-tight);
  color: var(--label-primary);
}

.cart-header h1,
.upload-step-title {
  font-size: var(--text-size-large-title);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.upload-form-heading,
.upload-form-header .upload-form-heading {
  font-size: var(--text-size-title1);
  letter-spacing: -0.025em;
  margin-bottom: 0;
}

.ui-caption,
.bm-panel__hint,
.upload-step-subtitle,
.upload-guide-tip {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: var(--text-size-footnote);
  font-weight: var(--text-weight-regular);
  line-height: var(--line-body);
  color: var(--label-tertiary);
}

.upload-step-subtitle {
  font-size: var(--text-size-subhead);
  margin: 0 0 var(--space-7);
}

.ui-input,
.ui-select,
.ui-textarea,
.bm-select,
.bm-input,
.bm-textarea,
.cabin-search,
.cabin-sort,
.form-control {
  min-height: var(--control-height);
  width: 100%;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--fill-secondary);
  color: var(--label-primary);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-size-subhead);
  line-height: var(--line-body);
  outline: none;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.bm-search {
  min-height: var(--control-height);
  width: auto;
  min-width: min(220px, 100%);
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--fill-secondary);
  color: var(--label-primary);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-size-subhead);
  line-height: var(--line-body);
  outline: none;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.bm-search:focus,
.bm-select:focus,
.bm-input:focus,
.bm-textarea:focus,
.cabin-search:focus,
.cabin-sort:focus,
.form-control:focus {
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus);
  box-shadow: none;
}

.ui-select,
.bm-select,
.cabin-sort {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23666666'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.ui-select::-ms-expand,
.bm-select::-ms-expand,
.cabin-sort::-ms-expand {
  display: none;
}

.ui-textarea,
.bm-textarea,
textarea.form-control {
  padding: var(--space-3);
  min-height: 96px;
  resize: vertical;
}

.bm-toolbar,
.cabin-toolbar,
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.bm-toolbar__right,
.cabin-toolbar__right,
.ui-toolbar__right {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.bm-toolbar__right .bm-search,
.cabin-toolbar__right .cabin-search,
.ui-toolbar__right .bm-search {
  width: auto;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
}

.bm-toolbar__right .bm-select,
.cabin-toolbar__right .cabin-sort,
.ui-toolbar__right .bm-select {
  width: auto;
  flex: 0 0 auto;
  min-width: 132px;
  max-width: 200px;
}

.ui-segmented,
.bm-kind-tabs,
.cart-subscription-period-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: none;
  box-sizing: border-box;
  min-width: 0;
}

.bm-home .chart-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--fill-quaternary);
  border: none;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.ui-segmented__btn,
.bm-kind-tab,
.cart-subscription-period-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  height: var(--control-height-sm);
  min-height: var(--control-height-sm);
  max-height: var(--control-height-sm);
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--label-primary);
  font: inherit;
  font-size: var(--text-size-footnote);
  font-weight: var(--text-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.bm-home .chart-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: var(--control-height-sm);
  min-height: var(--control-height-sm);
  max-height: var(--control-height-sm);
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--label-primary);
  font: inherit;
  font-size: var(--text-size-caption1);
  font-weight: var(--text-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.ui-segmented__btn:hover,
.bm-kind-tab:hover,
.bm-home .chart-filter-btn:hover,
.cart-subscription-period-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fill-elevated) 55%, transparent);
}

.ui-segmented__btn.is-active,
.ui-segmented__btn.active,
.bm-kind-tab.is-active,
.bm-home .chart-filter-btn.active,
.cart-subscription-period-btn.is-active {
  background: var(--fill-elevated);
  color: var(--label-primary);
  box-shadow: none;
}

.bm-section[data-section="settings"] .form-control,
.bm-settings-form .form-control {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--fill-secondary);
  padding: 0 var(--space-3);
  font: inherit;
  box-sizing: border-box;
}

.upload-container .form-row input[type="text"],
.upload-container .form-row input[type="number"],
.upload-container .form-row input[type="url"],
.upload-container .form-row textarea,
.upload-container .form-input,
.upload-container .custom-dropdown,
.upload-container .upload-audio-option,
.upload-container .product-type-selector,
.upload-container .input-with-prefix,
.upload-container .upload-license-card__price,
.upload-container .upload-cover-add,
.upload-container .upload-tags-compose,
.upload-container .dropdown-search,
.upload-title-row-inner #uploadTitle {
  min-height: var(--control-height);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--fill-secondary);
  box-shadow: none;
  color: var(--label-primary);
  font-size: var(--text-size-subhead);
  box-sizing: border-box;
}

.upload-container .form-row input[type="text"]:focus,
.upload-container .form-row input[type="number"]:focus,
.upload-container .form-row input[type="url"]:focus,
.upload-container .form-row textarea:focus,
.upload-container .form-input:focus,
.upload-container .custom-dropdown:focus-within,
.upload-container .input-with-prefix:focus-within,
.upload-container .upload-license-card__price:focus,
.upload-title-row-inner #uploadTitle:focus {
  border-color: var(--input-border-focus);
  background: var(--input-bg-focus);
  outline: none;
}

.upload-back-btn,
.upload-form-header .upload-back-btn {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--system-blue);
  font-size: var(--text-size-subhead);
  font-weight: var(--text-weight-medium);
  cursor: pointer;
}

.upload-back-btn:hover,
.upload-form-header .upload-back-btn:hover {
  background: color-mix(in srgb, var(--system-blue) 10%, transparent);
  color: var(--system-blue);
}

.ui-switch,
.bm-switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  display: inline-block;
}

.bm-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-size-subhead);
  font-weight: var(--text-weight-semibold);
  color: var(--label-primary);
}

.ui-switch input,
.bm-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ui-switch span,
.bm-switch span {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--label-primary) 18%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--motion-normal) var(--ease-standard);
}

.ui-switch span::before,
.bm-switch span::before {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  left: 2px;
  top: 2px;
  background: var(--fill-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-normal) var(--ease-emphasized);
}

.ui-switch input:checked + span,
.bm-switch input:checked + span {
  background: var(--system-green);
}

.ui-switch input:checked + span::before,
.bm-switch input:checked + span::before {
  transform: translateX(20px);
}

.ui-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.175em;
}

.ui-icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.ui-icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

body:has(.bm-shell),
body:has(.cart-container),
body:has(.upload-step),
body:has(.upload-container),
body:has(.auth-container),
body:has(.beats-container),
body:has(.profile-page),
body:has(.user-profile) {
  background: var(--fill-grouped) !important;
  font-family: var(--font-family);
  color: var(--label-primary);
}

.ui-card,
.ui-elevated,
.ui-panel {
  border-color: var(--separator);
}

.ui-grouped-list {
  background: var(--fill-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: none;
}

.ui-grouped-list > * + * {
  border-top: 1px solid var(--separator);
}

.ui-hairline {
  border-color: var(--separator) !important;
}

.ui-caption {
  font-size: var(--text-size-footnote);
  color: var(--label-tertiary);
  line-height: var(--line-body);
}

.ui-title {
  font-size: var(--text-size-title1);
  font-weight: var(--text-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--line-tight);
  color: var(--label-primary);
}

.ui-large-title {
  font-size: var(--text-size-large-title);
  font-weight: var(--text-weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--line-tight);
  color: var(--label-primary);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}