/* Beast Mode is a storefront preset. Every override stays within this class so
   switching back to Signal Red restores the original component styling. */
body.theme-beast-mode {
  --canvas: var(--palette-background, #0d0d0d);
  --surface: var(--palette-surface, #171717);
  --surface-soft: var(--palette-panel, #202020);
  --ink: var(--palette-text, #f7f7f7);
  --muted: var(--palette-muted, #aaa);
  --line: var(--palette-border, #292929);
  --line-strong: var(--palette-border, #343434);
  --red: var(--palette-accent, #e42024);
  --red-dark: var(--palette-accent-hover, #bc151a);
  --shadow: 0 14px 40px rgba(0, 0, 0, .2);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .55);
  background: var(--palette-background, #0d0d0d);
  color: var(--ink);
  color-scheme: dark;
}

/* Shell and brand */
body.theme-beast-mode .site-header { background: var(--palette-surface, #151515); border-color: transparent; }
body.theme-beast-mode .storefront-footer { background: var(--palette-footer, #181818); border-color: transparent; }
body.theme-beast-mode .brand,
body.theme-beast-mode .footer-brand-name { color: var(--palette-accent, #e42024); }
body.theme-beast-mode .brand small,
body.theme-beast-mode .footer-tagline { color: var(--palette-muted, #d0d0d0); }
body.theme-beast-mode .main-nav a,
body.theme-beast-mode .footer-column a { color: var(--palette-text, #e1e1e1); }
body.theme-beast-mode .main-nav a::after { background: var(--palette-accent, #e42024); }
body.theme-beast-mode .footer-column a:hover { color: var(--palette-accent, #ff5558); }
body.theme-beast-mode .storefront-owner-menu > summary,
body.theme-beast-mode .storefront-owner-menu > div,
body.theme-beast-mode .admin-shortcut { background: var(--palette-surface, #171717); color: var(--palette-text, #f7f7f7); border-color: var(--palette-border, #343434); }
body.theme-beast-mode .storefront-owner-menu > div a:hover,
body.theme-beast-mode .storefront-owner-menu > div button:hover,
body.theme-beast-mode .icon-button:hover { background: var(--palette-panel, #262626); }
body.theme-beast-mode .storefront-owner-avatar { background: var(--palette-border, #333); color: #fff; }
body.theme-beast-mode .brand-masthead { background: var(--palette-surface, #171717); border-color: var(--palette-border, #292929); }

/* Featured beat and catalog */
body.theme-beast-mode .featured-track-card,
body.theme-beast-mode .catalog-card,
body.theme-beast-mode .favorites-panel,
body.theme-beast-mode .bundle-bar { background: var(--palette-surface, #141414); border-color: transparent; box-shadow: none; }
body.theme-beast-mode .featured-track-card .hero-player .round-play,
body.theme-beast-mode .featured-track-card .hero-player .round-play:not(.playing):hover { background: var(--palette-accent, #e42024); border-color: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .hero-player,
body.theme-beast-mode .pill,
body.theme-beast-mode .round-play,
body.theme-beast-mode .square-add,
body.theme-beast-mode .tool-pill,
body.theme-beast-mode .catalog-search,
body.theme-beast-mode .custom-select-menu,
body.theme-beast-mode .row-play,
body.theme-beast-mode .license-open { background: var(--palette-panel, #202020); border-color: var(--palette-border, #343434); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .pill-primary,
body.theme-beast-mode .round-play.playing,
body.theme-beast-mode .row-play.playing,
body.theme-beast-mode .license-open.in-cart,
body.theme-beast-mode .track-row.active .license-open.in-cart { background: var(--palette-accent, #e42024); border-color: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .round-play:hover,
body.theme-beast-mode .row-icon:hover,
body.theme-beast-mode .tool-pill:hover,
body.theme-beast-mode .custom-select-menu button:hover { background: var(--palette-border, #292929); }
body.theme-beast-mode .round-play.playing:hover,
body.theme-beast-mode .sticky-player .round-play:hover,
body.theme-beast-mode .sticky-player .round-play.playing:hover { background: var(--palette-accent-hover, #bc151a); border-color: var(--palette-accent-hover, #bc151a); color: var(--palette-accent-text,#fff); box-shadow: 0 8px 20px color-mix(in srgb,var(--palette-accent,#e42024) 24%,transparent); }
body.theme-beast-mode .catalog-head,
body.theme-beast-mode .track-row,
body.theme-beast-mode .favorite-card { border-color: var(--palette-border, #292929); }
body.theme-beast-mode .track-row:hover { background: #222; }
body.theme-beast-mode .track-row.active { background: var(--palette-panel, #242424); }
body.theme-beast-mode .row-icon { color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .track-row.active .license-open:not(.in-cart) { background: var(--palette-accent, #e42024); border-color: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .catalog-search::placeholder { color: var(--palette-muted, #a8a8a8); }
body.theme-beast-mode .bar-waveform i { background: var(--palette-muted, #555); }
body.theme-beast-mode .bar-waveform i.on { background: var(--palette-visualizer, var(--palette-accent, #e42024)); }
body.theme-beast-mode .filter-tag,
body.theme-beast-mode .progress-dot,
body.theme-beast-mode .bundle-node.empty,
body.theme-beast-mode .bundle-line { background: var(--palette-border, #292929); border-color: var(--palette-border, #343434); }
body.theme-beast-mode .progress-dot.filled,
body.theme-beast-mode .bundle-node.filled,
body.theme-beast-mode .cart-bundle-dot.filled { border-color: var(--red); background: var(--red); color: #fff; }
body.theme-beast-mode .progress-dot.filled::after { color: #fff; }

/* License Studio: override the legacy white rules, including the phone layout. */
body.theme-beast-mode .license-studio,
body.theme-beast-mode .license-studio .studio-console,
body.theme-beast-mode .license-studio .studio-desktop-heading,
body.theme-beast-mode .license-studio .studio-track-context,
body.theme-beast-mode .license-studio .studio-choice-panel,
body.theme-beast-mode .license-studio .recommendation,
body.theme-beast-mode .license-studio .comparison-card,
body.theme-beast-mode .license-studio .comparison-matrix { background: var(--palette-surface, #171717); border-color: var(--palette-border, #292929); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .license-studio .studio-track-context { background: var(--palette-surface, #1b1b1b); }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button,
body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder,
body.theme-beast-mode .license-studio .modal-exclusive { background: var(--palette-panel, #1e1e1e); border-color: var(--palette-border, #2d2d2d); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button:hover,
body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder:hover { background: var(--palette-panel, #282828); color: #fff; }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active,
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active:hover { background: var(--palette-panel, #242424); border-color: var(--palette-border, #444); color: var(--palette-accent, #e42024); box-shadow: inset 3px 0 0 var(--palette-accent, #e42024); }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active .studio-intent-license,
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active .studio-intent-compact-price { color: var(--palette-muted, #aaa); }
body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active .studio-intent-compact-name { color: var(--palette-accent, #e42024); }
body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder small { color: var(--palette-muted, #aaa); }
body.theme-beast-mode .license-studio .recommend-mobile-description,
body.theme-beast-mode .license-studio .studio-mobile-choose-label,
body.theme-beast-mode .license-studio .studio-mobile-right,
body.theme-beast-mode .license-studio .studio-mobile-stat small,
body.theme-beast-mode .license-studio .studio-mobile-trust small,
body.theme-beast-mode .license-studio .studio-intent-compact-price,
body.theme-beast-mode .license-studio .exclusive-license-placeholder::after,
body.theme-beast-mode .license-studio .studio-intent-license,
body.theme-beast-mode .license-studio .recommend-summary { color: var(--palette-muted, #aaa); }
body.theme-beast-mode .license-studio .recommendation,
body.theme-beast-mode .license-studio .comparison-cell,
body.theme-beast-mode .license-studio .comparison-matrix > div { border-color: var(--palette-border, #292929); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .license-studio .studio-terms-button { background: transparent; border-color: var(--palette-accent, #e42024); color: var(--palette-accent, #ff575b); }
body.theme-beast-mode .license-studio .studio-terms-button:hover { background: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .license-studio .recommend-cta { background: var(--palette-accent, #e42024); color: #fff; }

/* One quiet panel restores the Studio's shape without the tall outer slab. */
body.theme-beast-mode .license-studio,
body.theme-beast-mode .license-studio .studio-layout { background: transparent; border-color: transparent; box-shadow: none; }
body.theme-beast-mode .license-studio .studio-console { overflow: hidden; border-color: transparent; border-radius: 18px; background: var(--palette-surface, #141414); box-shadow: none; }
body.theme-beast-mode .license-studio .studio-track-context { background: var(--palette-surface, #141414); border-color: var(--palette-panel, #242424); }
body.theme-beast-mode .license-studio .recommendation { background: var(--palette-surface, #141414); border-color: transparent; box-shadow: none; }

/* Menus, purchasing dialogs, and forms used from the storefront. */
body.theme-beast-mode .modal,
body.theme-beast-mode dialog,
body.theme-beast-mode .modal-body,
body.theme-beast-mode .modal-license-card,
body.theme-beast-mode .modal-selector-layout .modal-license-card,
body.theme-beast-mode .modal-selector-layout .modal-exclusive,
body.theme-beast-mode .comparison-matrix,
body.theme-beast-mode .terms-content,
body.theme-beast-mode .terms-rights li { background: var(--palette-surface, #171717); border-color: var(--palette-border, #292929); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .modal-selector-layout .intent-button,
body.theme-beast-mode .modal-action-row .studio-terms-button,
body.theme-beast-mode .detail-license-option,
body.theme-beast-mode .detail-offer-button,
body.theme-beast-mode .offer-form input,
body.theme-beast-mode .offer-form textarea { background: var(--palette-panel, #202020); border-color: var(--palette-border, #343434); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .modal-selector-layout .intent-button.active,
body.theme-beast-mode .modal-selector-layout .intent-button.active:hover,
body.theme-beast-mode .detail-choose-license { background: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .terms-notice,
body.theme-beast-mode .comparison-matrix .comparison-matrix-head.recommended { background: var(--palette-panel, #262626); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .comparison-matrix .comparison-matrix-label,
body.theme-beast-mode .comparison-matrix .terms-open,
body.theme-beast-mode .terms-content { color: var(--palette-muted, #d0d0d0); }
body.theme-beast-mode .license-modal { border-color: var(--palette-border, #292929); }
/* The license chooser has ID-scoped light styles in the base layout. */
body.theme-beast-mode #licenseModal .modal-intents .intent-button,
body.theme-beast-mode #licenseModal .modal-exclusive { background: var(--palette-panel, #1e1e1e); border-color: var(--palette-border, #2d2d2d); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode #licenseModal .modal-intents .intent-button:hover,
body.theme-beast-mode #licenseModal .modal-exclusive:hover { background: var(--palette-panel, #1e1e1e); color: var(--palette-accent, #e42024); }
body.theme-beast-mode #licenseModal .modal-intents .intent-button.active,
body.theme-beast-mode #licenseModal .modal-intents .intent-button.active:hover { background: var(--palette-panel, #1e1e1e); color: var(--palette-accent, #e42024); }
body.theme-beast-mode #licenseModal .modal-license-card { background: var(--palette-surface, #1a1a1a); border-color: var(--palette-border, #292929); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode #licenseModal .modal-intent-compact-name,
body.theme-beast-mode #licenseModal .modal-exclusive span,
body.theme-beast-mode #licenseModal .modal-license-name { color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode #licenseModal .modal-intents .intent-button.active .modal-intent-compact-name,
body.theme-beast-mode #licenseModal .modal-intents .intent-button:hover .modal-intent-compact-name { color: var(--palette-accent, #e42024); }
body.theme-beast-mode #licenseModal .modal-question,
body.theme-beast-mode #licenseModal .modal-intent-compact-price,
body.theme-beast-mode #licenseModal .modal-exclusive::after,
body.theme-beast-mode #licenseModal .modal-license-card > p,
body.theme-beast-mode #licenseModal .studio-mobile-stat small,
body.theme-beast-mode #licenseModal .modal-mobile-trust small { color: var(--palette-muted, #aaa); }

/* Player and footer */
body.theme-beast-mode .sticky-player .sticky-inner { background: var(--palette-surface, #171717); border-color: var(--palette-border, #292929); color: var(--palette-text, #f7f7f7); box-shadow: 0 18px 54px rgba(0,0,0,.55); }
body.theme-beast-mode .sticky-player .round-play:not(.playing),
body.theme-beast-mode .sticky-price { background: var(--palette-accent, #e42024); border-color: var(--palette-accent, #e42024); color: #fff; }
body.theme-beast-mode .sticky-transport-extra { background: var(--palette-panel, #202020); border-color: var(--palette-border, #343434); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .storefront-footer { --footer-bg: var(--palette-footer, #181818); box-shadow: 0 104px 0 var(--palette-footer, #181818); }
body.theme-beast-mode .footer-column h3,
body.theme-beast-mode .footer-subscribe .eyebrow { color: var(--palette-muted, #d0d0d0); }
body.theme-beast-mode .footer-description,
body.theme-beast-mode .footer-subscribe p,
body.theme-beast-mode .footer-bottom { color: var(--palette-muted, #aaa); }
body.theme-beast-mode .footer-social,
body.theme-beast-mode .footer-signup { background: var(--palette-surface, #171717); border-color: var(--palette-border, #343434); color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .footer-signup input { color: var(--palette-text, #f7f7f7); }
body.theme-beast-mode .footer-signup input::placeholder { color: var(--palette-muted, #a8a8a8); }
body.theme-beast-mode .footer-signup button { background: var(--palette-accent, #e42024); color: #fff; }

/* Use layers and restrained row separators instead of outlining every surface. */
body.theme-beast-mode .featured-track-card,
body.theme-beast-mode .catalog-card,
body.theme-beast-mode .catalog-controls { border-color: transparent; }
body.theme-beast-mode .catalog-controls { background: transparent; box-shadow: none; }
body.theme-beast-mode .catalog-controls .catalog-search,
body.theme-beast-mode .catalog-controls .tool-pill { border-color: transparent; background: var(--palette-panel, #202020); }
body.theme-beast-mode .catalog-controls .catalog-search:focus-visible,
body.theme-beast-mode .catalog-controls .tool-pill:focus-visible,
body.theme-beast-mode .catalog-controls .custom-select.open .custom-select-trigger { outline: 2px solid var(--palette-accent, #e42024); outline-offset: 2px; }
body.theme-beast-mode .catalog-head,
body.theme-beast-mode .track-row { border-color: var(--palette-panel, #242424); }

@media (max-width: 700px) {
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact),
  body.theme-beast-mode.beat-page-view { background: var(--palette-background, #0d0d0d); color: var(--palette-text, #f7f7f7); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .producer-line,
  body.theme-beast-mode.beat-page-view .featured-track-card .producer-line { color: var(--palette-muted, #aaa); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .detail-meta span,
  body.theme-beast-mode.beat-page-view .featured-track-card .detail-meta span,
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .featured-mobile-time,
  body.theme-beast-mode.beat-page-view .featured-track-card .featured-mobile-time { color: var(--palette-muted, #aaa); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .detail-quick-actions .pill,
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .detail-quick-actions #detailQuickSave,
  body.theme-beast-mode.beat-page-view .featured-track-card .detail-quick-actions .pill,
  body.theme-beast-mode.beat-page-view .featured-track-card .detail-quick-actions #detailQuickSave { border-color: var(--palette-border, #292929); background: var(--palette-panel, #202020); color: var(--palette-text, #f7f7f7); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .detail-purchase,
  body.theme-beast-mode.beat-page-view .featured-track-card .detail-purchase { border-color: transparent; background: var(--palette-surface, #171717); color: var(--palette-text, #f7f7f7); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .featured-track-card .featured-mobile-license-name,
  body.theme-beast-mode.beat-page-view .featured-track-card .featured-mobile-license-name { color: var(--palette-muted, #aaa); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .catalog-controls,
  body.theme-beast-mode.beat-page-view .catalog-controls { border-color: transparent; background: transparent; box-shadow: none; }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .catalog-controls .catalog-search,
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .catalog-controls .tool-pill,
  body.theme-beast-mode.beat-page-view .catalog-controls .catalog-search,
  body.theme-beast-mode.beat-page-view .catalog-controls .tool-pill { border-color: transparent; background: var(--palette-panel, #202020); color: var(--palette-text, #f7f7f7); }
  body.theme-beast-mode:not(.beat-page-view):not(.storefront-compact) .catalog-card,
  body.theme-beast-mode.beat-page-view .catalog-card { border-color: transparent; background: var(--palette-surface, #141414); box-shadow: none; }
  body.theme-beast-mode .mobile-catalog-strip button { border-color: transparent; background: var(--palette-panel, #202020); color: var(--palette-muted, #d0d0d0); box-shadow: none; }
  body.theme-beast-mode .mobile-catalog-strip button:hover,
  body.theme-beast-mode .mobile-catalog-strip button:focus-visible { background: var(--palette-border, #292929); color: #fff; }
  body.theme-beast-mode .mobile-catalog-strip button.active,
  body.theme-beast-mode .mobile-catalog-strip button.active:hover { background: var(--palette-accent, #e42024); color: #fff; }
  body.theme-beast-mode .license-studio .studio-console,
  body.theme-beast-mode .license-studio .studio-track-context { background: var(--palette-surface, #141414); border-color: transparent; box-shadow: none; }
  body.theme-beast-mode .license-studio .recommendation { background: var(--palette-surface, #141414); border-color: transparent; box-shadow: none; }
  body.theme-beast-mode .license-studio .studio-choice-panel .intent-button,
  body.theme-beast-mode .license-studio .studio-choice-panel .exclusive-license-placeholder { background: var(--palette-panel, #1e1e1e); }
  body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active,
  body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active:hover { background: var(--palette-panel, #242424); color: var(--palette-accent, #e42024); }
  body.theme-beast-mode .license-studio .studio-choice-panel .intent-button.active .studio-intent-compact-name { color: var(--palette-accent, #e42024); }
  body.theme-beast-mode .storefront-footer { box-shadow: 0 112px 0 var(--palette-footer, #181818); }
}