/*
 * AXIOM 1.0.2 private beta — approved visual integration.
 * The existing Flask/JavaScript application remains the functional authority.
 * This layer applies the approved flat cockpit hierarchy without replacing handlers.
 */

:root {
  --axiom-final-green: #a3ff00;
  --axiom-final-green-hot: #b7ff48;
  --axiom-final-cyan: #32d7ff;
  --axiom-final-orange: #ff8a1f;
  --axiom-final-ink: #030604;
  --axiom-final-panel: #080c09;
  --axiom-final-line: rgba(255, 255, 255, 0.13);
  --axiom-final-muted: rgba(255, 255, 255, 0.56);
}

/* ========================================================================== */
/* ROOM RESCUE — THREE DECISIONS, FIVE REAL LIBRARY TRACKS                    */
/* ========================================================================== */

.room-rescue-wizard {
  min-height: 100%;
  padding: clamp(28px, 4vw, 64px);
  color: #f4f6f2;
  background:
    radial-gradient(circle at 76% 12%, rgba(163, 255, 0, 0.08), transparent 30%),
    #050706;
}

.room-rescue-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #2a302b;
}

.room-rescue-kicker,
.room-rescue-result-head span {
  display: block;
  margin-bottom: 8px;
  color: #a3ff00;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.room-rescue-title {
  margin: 0;
  color: #f7f8f5;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(54px, 7vw, 92px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.room-rescue-copy {
  margin: 14px 0 0;
  color: #a7ada8;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.room-rescue-back,
.room-rescue-change {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid #3b423c;
  border-radius: 5px;
  color: #eef1ed;
  background: #0c100d;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.room-rescue-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 32px;
  border: 1px solid #282e29;
}

.room-rescue-progress span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 18px;
  border-right: 1px solid #282e29;
  color: #656d67;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-rescue-progress span:last-child { border-right: 0; }
.room-rescue-progress span.active { color: #071005; background: #a3ff00; }
.room-rescue-progress span.complete { color: #a3ff00; background: rgba(163, 255, 0, 0.06); }
.room-rescue-progress b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; font-weight: 400; }

.room-rescue-gig-grid,
.room-rescue-moment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.room-rescue-gig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: clamp(250px, 31vh, 390px);
  padding: 28px;
  overflow: hidden;
  border: 1px solid #343a35;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(145deg, #101511, #080a08);
  text-align: left;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.room-rescue-gig-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  content: '';
  background: #a3ff00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms ease;
}

.room-rescue-gig-card:hover,
.room-rescue-gig-card:focus-visible {
  border-color: #a3ff00;
  background: linear-gradient(145deg, rgba(163, 255, 0, 0.1), #080a08 62%);
  transform: translateY(-2px);
}

.room-rescue-gig-card:hover::after,
.room-rescue-gig-card:focus-visible::after { transform: scaleX(1); }

.room-rescue-gig-card img {
  width: clamp(112px, 10vw, 164px);
  height: clamp(112px, 10vw, 164px);
  margin: 0 auto auto;
  object-fit: contain;
}

.room-rescue-gig-card span,
.room-rescue-moment-card span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.room-rescue-moment-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 230px;
  padding: 28px;
  border: 1px solid #343a35;
  border-radius: 6px;
  color: #fff;
  background: #0b0f0c;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.room-rescue-moment-card b { color: #a3ff00; font-size: 36px; line-height: 1; }
.room-rescue-moment-card:hover,
.room-rescue-moment-card:focus-visible { border-color: #a3ff00; background: rgba(163, 255, 0, 0.07); }

.room-rescue-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-left: 3px solid #a3ff00;
  background: #0d110e;
}

.room-rescue-result-head strong {
  display: block;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.25;
}

.room-rescue-track-list { border: 1px solid #2d342e; border-bottom: 0; }

.room-rescue-track {
  display: grid;
  grid-template-columns: 42px 58px minmax(240px, 1fr) minmax(150px, 220px);
  align-items: center;
  gap: 16px;
  min-height: 82px;
  padding: 11px 18px;
  border-bottom: 1px solid #2d342e;
  background: #090c0a;
}

.room-rescue-track-number { color: #6d756e; font-family: 'Bebas Neue', sans-serif; font-size: 25px; }
.room-rescue-track-art { width: 58px; height: 58px; overflow: hidden; border: 1px solid #4b554c; border-radius: 4px; }
.room-rescue-track-art img { width: 100%; height: 100%; object-fit: cover; }
.room-rescue-track-copy { min-width: 0; }
.room-rescue-track-copy strong { display: block; overflow: hidden; color: #f5f7f4; font-family: 'Bebas Neue', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.room-rescue-track-copy span { display: block; margin-top: 5px; overflow: hidden; color: #929a93; font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.room-rescue-track-role { text-align: right; }
.room-rescue-track-role b { display: block; color: #a3ff00; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.room-rescue-track-role span { display: block; margin-top: 5px; color: #a2aaa3; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700; }

.room-rescue-final-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #2d342e;
  background: #0d110e;
}

.room-rescue-final-action p { margin: 0; color: #9ca49d; font-family: 'Barlow', sans-serif; font-size: 13px; }
.room-rescue-final-action .button--primary { min-width: 240px; min-height: 48px; }
.room-rescue-loading,
.room-rescue-empty { display: flex; min-height: 250px; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: #929a93; background: #090c0a; font-family: 'Barlow', sans-serif; font-weight: 700; text-align: center; }
.room-rescue-empty { flex-direction: column; }
.room-rescue-empty strong { color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 32px; font-weight: 400; }

/* The Library card has five stable information lanes. Selection never changes them. */
#search-results .library-track-card .library-track-main {
  grid-template-rows: minmax(28px, auto) minmax(20px, auto) minmax(20px, auto) minmax(20px, auto) minmax(20px, auto) !important;
  row-gap: 3px !important;
  align-content: center !important;
  padding-block: 10px !important;
}

#search-results .library-track-card,
#search-results .library-track-card.playing-track,
#search-results .library-track-card.axiom-focus-selected,
#search-results .library-track-card.library-track-selected,
#search-results .library-track-card.is-selected {
  min-height: 132px !important;
}

#search-results .library-track-card .library-track-title,
#search-results .library-track-card .library-track-artist,
#search-results .library-track-card .library-fit-row,
#search-results .library-track-card .library-meta-line,
#search-results .library-track-card .library-health-chips {
  position: relative !important;
  inset: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#search-results .library-track-card .library-track-title { grid-row: 1 !important; align-self: end !important; }
#search-results .library-track-card .library-track-artist { grid-row: 2 !important; align-self: center !important; }
#search-results .library-track-card .library-fit-row { grid-row: 3 !important; align-self: center !important; gap: 8px !important; overflow: hidden !important; white-space: nowrap !important; }
#search-results .library-track-card .library-meta-line { grid-row: 4 !important; align-self: center !important; gap: 10px !important; }
#search-results .library-track-card .library-health-chips { grid-row: 5 !important; align-self: start !important; gap: 8px !important; }

#search-results .library-track-card .library-fit-badge,
#search-results .library-track-card .library-health-chip,
#search-results .library-track-card .library-dna-chip,
#search-results .library-track-card .library-year-chip {
  flex: 0 0 auto !important;
  line-height: 18px !important;
}

body.light-mode .room-rescue-wizard { color: #071326; background: radial-gradient(circle at 76% 12%, rgba(19, 94, 199, 0.1), transparent 30%), #f4f7fc; }
body.light-mode .room-rescue-head,
body.light-mode .room-rescue-progress,
body.light-mode .room-rescue-progress span,
body.light-mode .room-rescue-track-list,
body.light-mode .room-rescue-track,
body.light-mode .room-rescue-final-action { border-color: #bfd0ec; }
body.light-mode .room-rescue-kicker,
body.light-mode .room-rescue-result-head span,
body.light-mode .room-rescue-track-role b { color: #125bc0; }
body.light-mode .room-rescue-title,
body.light-mode .room-rescue-gig-card,
body.light-mode .room-rescue-moment-card,
body.light-mode .room-rescue-result-head strong,
body.light-mode .room-rescue-track-copy strong,
body.light-mode .room-rescue-empty strong { color: #071326; }
body.light-mode .room-rescue-copy,
body.light-mode .room-rescue-track-copy span,
body.light-mode .room-rescue-track-role span,
body.light-mode .room-rescue-final-action p { color: #4b5d78; }
body.light-mode .room-rescue-progress span.active { color: #fff; background: #125bc0; }
body.light-mode .room-rescue-progress span.complete { color: #125bc0; background: rgba(19, 94, 199, 0.08); }
body.light-mode .room-rescue-gig-card,
body.light-mode .room-rescue-moment-card,
body.light-mode .room-rescue-result-head,
body.light-mode .room-rescue-track,
body.light-mode .room-rescue-final-action,
body.light-mode .room-rescue-loading,
body.light-mode .room-rescue-empty { background: #fff; }
body.light-mode .room-rescue-gig-card::after { background: #125bc0; }
body.light-mode .room-rescue-gig-card:hover,
body.light-mode .room-rescue-gig-card:focus-visible,
body.light-mode .room-rescue-moment-card:hover,
body.light-mode .room-rescue-moment-card:focus-visible { border-color: #125bc0; background: #eaf1fc; }
body.light-mode .room-rescue-moment-card b { color: #125bc0; }

@media (max-width: 980px) {
  .room-rescue-gig-grid,
  .room-rescue-moment-grid { grid-template-columns: 1fr; }
  .room-rescue-gig-card,
  .room-rescue-moment-card { min-height: 170px; }
  .room-rescue-gig-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 20px; }
  .room-rescue-gig-card img { width: 100px; height: 100px; margin: 0; }
  .room-rescue-track { grid-template-columns: 34px 52px minmax(0, 1fr); }
  .room-rescue-track-role { grid-column: 3; text-align: left; }
  .room-rescue-final-action { align-items: stretch; flex-direction: column; }
}

body:not(.light-mode) {
  background:
    radial-gradient(circle at 55% 8%, rgba(163, 255, 0, 0.035), transparent 28%),
    #030604 !important;
}

body:not(.light-mode) main {
  background: transparent;
}

/* Shared cockpit language: open sections, restrained corners, clear dividers. */
body:not(.light-mode) :is(
  .library-track-card,
  .recommendation-card,
  .studio-transition-row,
  .performance-panel,
  .performance-suggestion-card,
  .playlists-shell > aside,
  .playlists-shell > section
) {
  border-radius: 0 !important;
}

body:not(.light-mode) :is(
  .library-track-card,
  .recommendation-card,
  .studio-transition-row,
  .performance-suggestion-card,
  .playlist-listen-row
) {
  box-shadow: none !important;
}

/* ---------- Library ---------- */
#tab-content-library.library-cockpit {
  padding: 28px 28px 124px 30px !important;
  gap: 0;
}

#tab-content-library .library-topbar {
  max-width: none !important;
  margin-bottom: 18px !important;
}

#tab-content-library .library-search-shell {
  min-height: 58px;
}

#tab-content-library .library-search-input {
  min-height: 58px;
  padding: 0 62px 0 24px !important;
  border-radius: 5px !important;
  background: rgba(8, 12, 9, 0.86) !important;
  box-shadow: none !important;
}

#tab-content-library .library-guide-btn {
  border-radius: 5px !important;
  min-width: 90px;
}

#tab-content-library .library-control-row {
  margin-bottom: 18px !important;
}

#tab-content-library .library-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
  gap: 24px !important;
  border-top: 1px solid var(--axiom-final-line);
}

#tab-content-library .library-results-column {
  gap: 0 !important;
  border-right: 1px solid var(--axiom-final-line);
  padding-right: 24px;
}

#tab-content-library #search-results {
  gap: 0 !important;
  padding: 0 0 28px !important;
}

#tab-content-library .library-track-card {
  grid-template-columns: 58px minmax(190px, 1fr) minmax(82px, 0.28fr) 66px 58px 58px 22px !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 10px 10px 10px 12px !important;
  gap: 12px !important;
  background: rgba(5, 9, 6, 0.42) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow: visible !important;
  transform: none !important;
}

#tab-content-library .library-track-card::before {
  inset: 0 auto 0 0 !important;
  width: 3px;
  background: var(--axiom-final-green) !important;
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 150ms ease, transform 150ms ease;
}

#tab-content-library .library-track-card:hover {
  background: rgba(163, 255, 0, 0.055) !important;
  border-bottom-color: rgba(163, 255, 0, 0.34) !important;
}

#tab-content-library .library-track-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

#tab-content-library .library-track-card .library-artwork {
  width: 54px;
  height: 54px;
  border-radius: 4px;
  box-shadow: none;
}

#tab-content-library .library-track-title {
  font-size: 20px !important;
  line-height: 0.95 !important;
  letter-spacing: 0.025em !important;
}

#tab-content-library .library-track-artist {
  font-size: 13px !important;
  line-height: 1.05;
  margin-top: 3px;
}

#tab-content-library .library-meta-line {
  gap: 6px !important;
  margin-top: 5px !important;
  font-size: 8px !important;
}

#tab-content-library .library-health-chips {
  margin-top: 4px !important;
}

#tab-content-library .library-waveform {
  opacity: 0.62;
}

#tab-content-library .library-bpm-value {
  font-size: 18px !important;
}

#tab-content-library .library-add-btn {
  min-width: 54px !important;
  min-height: 36px !important;
  border-radius: 4px !important;
}

#tab-content-library .fav-star-btn {
  font-size: 23px !important;
}

body:not(.light-mode) #tab-content-library #search-results .library-track-card.selected,
body:not(.light-mode) #tab-content-library #search-results .library-track-card.library-track-playing,
body:not(.light-mode) #tab-content-library #search-results .library-track-card.playing-track {
  color: #061000 !important;
  background: linear-gradient(90deg, var(--axiom-final-green), var(--axiom-final-green-hot)) !important;
  border-color: var(--axiom-final-green) !important;
}

#tab-content-library #search-results .library-track-card.selected::before,
#tab-content-library #search-results .library-track-card.library-track-playing::before,
#tab-content-library #search-results .library-track-card.playing-track::before {
  display: none;
}

#tab-content-library #search-results .library-track-card:is(.selected, .library-track-playing, .playing-track) :is(
  .library-track-title,
  .library-track-artist,
  .library-meta-line,
  .library-meta-line span,
  .library-health-chip,
  .library-bpm-value,
  .library-bpm-tools button,
  .fav-star-btn
) {
  color: #061000 !important;
  text-shadow: none !important;
}

#tab-content-library #search-results .library-track-card:is(.selected, .library-track-playing, .playing-track) :is(
  .library-dna-chip,
  .library-year-chip,
  .library-health-chip,
  .camelot-pill
) {
  color: #061000 !important;
  border-color: rgba(6, 16, 0, 0.35) !important;
  background: rgba(6, 16, 0, 0.12) !important;
  box-shadow: none !important;
}

#tab-content-library #search-results .library-track-card:is(.selected, .library-track-playing, .playing-track) .library-bpm-value {
  color: #061000 !important;
  border-color: rgba(6, 16, 0, 0.46) !important;
  background: rgba(6, 16, 0, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#tab-content-library #search-results .library-track-card:is(.selected, .library-track-playing, .playing-track) .library-add-btn {
  color: var(--axiom-final-green) !important;
  border-color: #061000 !important;
  background: #061000 !important;
  box-shadow: 0 0 18px rgba(6, 16, 0, 0.24) !important;
}

#smart-links-panel.recommendations-panel {
  width: auto !important;
  margin: 0 !important;
  padding: 20px 0 20px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#smart-links-panel .recommendations-title {
  font-size: clamp(32px, 3vw, 48px) !important;
  line-height: 0.95;
  letter-spacing: 0.06em;
}

#lib-suggestions-list {
  gap: 0 !important;
  padding-bottom: 44px !important;
}

#lib-suggestions-list .recommendation-card {
  position: relative;
  grid-template-columns: 50px minmax(0, 1fr) 26px !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 11px 4px 11px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow: visible !important;
}

#lib-suggestions-list .recommendation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--axiom-final-green);
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 150ms ease, transform 150ms ease;
}

#lib-suggestions-list .recommendation-card:hover,
#lib-suggestions-list .recommendation-card.selected,
#lib-suggestions-list .recommendation-card.active-suggestion {
  background: rgba(163, 255, 0, 0.055) !important;
  border-bottom-color: rgba(163, 255, 0, 0.34) !important;
}

#lib-suggestions-list .recommendation-card:hover::before,
#lib-suggestions-list .recommendation-card.selected::before,
#lib-suggestions-list .recommendation-card.active-suggestion::before {
  opacity: 1;
  transform: scaleY(1);
}

#lib-suggestions-list .recommendation-title {
  font-size: 19px !important;
}

#lib-suggestions-list .recommendation-artist {
  font-size: 11px !important;
}

/* ---------- Studio ---------- */
#tab-content-studio #studio-active-view {
  padding: 0 0 124px !important;
}

#studio-active-view .studio-header {
  border-radius: 0 !important;
  border-width: 0 0 1px !important;
  background: rgba(2, 6, 3, 0.72) !important;
  box-shadow: none !important;
}

#studio-set-brief-bar,
#studio-active-view .studio-tabbar {
  border-radius: 0 !important;
}

#studio-mode-controls {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--axiom-final-line);
  border-bottom: 1px solid var(--axiom-final-line);
  padding: 12px 20px !important;
}

#studio-mode-controls button {
  border-radius: 4px !important;
}

#studio-mode-controls #btn-optimize {
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(50, 215, 255, 0.44);
  background: rgba(50, 215, 255, 0.07);
  color: #7ce5ff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#studio-mode-controls #btn-optimize.unlocked {
  display: inline-flex !important;
}

#studio-mode-controls #btn-optimize.route-created {
  display: none !important;
}

#studio-mode-controls #studio-tab-route:not(.route-tab-hidden) {
  border-color: rgba(50, 215, 255, 0.66);
  color: #7ce5ff;
  box-shadow: 0 0 0 2px rgba(50, 215, 255, 0.12);
}

#energy-ladder {
  height: 48px !important;
  margin: 12px 20px 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.light-mode) #energy-ladder .energy-block {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#active-playlist-container {
  padding: 0 0 118px !important;
  mask-image: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row {
  grid-template-columns: 48px minmax(310px, 1fr) minmax(78px, 0.22fr) minmax(78px, 0.2fr) minmax(92px, 0.2fr) 140px 42px !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  background: rgba(3, 7, 4, 0.42) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  transform: none !important;
}

body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#active-playlist-container .playlist-row.studio-transition-row::before {
  display: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row::after {
  opacity: 0.42;
}

#active-playlist-container .playlist-row.studio-transition-row:hover {
  background: rgba(163, 255, 0, 0.055) !important;
  border-bottom-color: rgba(163, 255, 0, 0.36) !important;
}

body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.selected,
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.playing-track {
  color: #061000 !important;
  background: linear-gradient(90deg, var(--axiom-final-green), var(--axiom-final-green-hot)) !important;
  border-bottom-color: var(--axiom-final-green) !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) :is(
  .studio-row-title,
  .studio-row-artist,
  .track-title-resize,
  .track-artist-resize,
  .studio-harmonic-indicator,
  .studio-remove-btn,
  .fav-star-btn
) {
  color: #061000 !important;
  text-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .studio-dna-chip {
  color: #061000 !important;
  border-color: rgba(6, 16, 0, 0.34) !important;
  background: rgba(6, 16, 0, 0.11) !important;
  box-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .studio-metric {
  color: #061000 !important;
  border-left-color: rgba(6, 16, 0, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .studio-metric small {
  color: rgba(6, 16, 0, 0.68) !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .camelot-pill {
  color: #050605 !important;
  border-color: #067a85 !important;
  background: #18d8e8 !important;
  box-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .transition-badge.energy-spine-node {
  color: var(--axiom-final-green) !important;
  border-color: rgba(6, 16, 0, 0.82) !important;
  background: #061000 !important;
  box-shadow:
    0 0 0 5px rgba(6, 16, 0, 0.1),
    0 0 24px rgba(6, 16, 0, 0.4),
    inset 0 0 12px rgba(163, 255, 0, 0.08) !important;
}

#active-playlist-container .playlist-row.studio-transition-row:is(.selected, .playing-track) .studio-smart-btn {
  color: var(--axiom-final-green) !important;
  border-color: #061000 !important;
  background: #061000 !important;
  box-shadow: 0 0 22px rgba(6, 16, 0, 0.35) !important;
}

#active-playlist-container .studio-track-artwork {
  border-radius: 4px !important;
}

#active-playlist-container .studio-row-title {
  font-size: 20px !important;
}

/* ---------- Matching Songs ---------- */
#replacement-modal.anchor-dj-modal {
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.975) !important;
}

#replacement-modal .anchor-dj-shell {
  width: 100% !important;
  height: calc(100vh - 28px) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #030604 !important;
  box-shadow: none !important;
}

#replacement-modal .anchor-hero-panel,
#replacement-modal .anchor-modal-body,
#replacement-modal .anchor-suggestions-panel,
#replacement-modal .live-transition-panel,
#replacement-modal .anchor-insight-strip {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#replacement-modal .anchor-suggestion-row {
  min-height: 92px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  background: rgba(4, 8, 5, 0.45) !important;
  box-shadow: none !important;
}

#replacement-modal .anchor-suggestion-row:hover {
  background: rgba(163, 255, 0, 0.055) !important;
}

#replacement-modal .anchor-suggestion-row.selected,
#replacement-modal .anchor-suggestion-row.active-suggestion {
  color: #061000 !important;
  background: linear-gradient(90deg, var(--axiom-final-green), var(--axiom-final-green-hot)) !important;
  border-bottom-color: var(--axiom-final-green) !important;
}

#replacement-modal .anchor-suggestion-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-title,
  .anchor-suggestion-artist,
  .anchor-suggestion-score,
  .anchor-suggestion-bpm,
  .anchor-suggestion-key,
  p,
  span,
  strong,
  small
) {
  color: #061000 !important;
  text-shadow: none !important;
}

#replacement-modal .anchor-suggestion-row:is(.selected, .active-suggestion) button {
  color: #061000 !important;
  border-color: rgba(6, 16, 0, 0.34) !important;
  background: rgba(6, 16, 0, 0.1) !important;
}

#replacement-modal .anchor-suggestion-row:is(.selected, .active-suggestion) :is(.anchor-add-btn, .anchor-suggestion-add) {
  color: var(--axiom-final-green) !important;
  border-color: #061000 !important;
  background: #061000 !important;
}

#replacement-modal .live-transition-panel {
  border-left: 1px solid var(--axiom-final-line) !important;
  background: rgba(2, 6, 3, 0.78) !important;
}

#replacement-modal .transition-preview-controls {
  min-height: 102px !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) 72px minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  border-top: 1px solid var(--axiom-final-line);
}

#replacement-modal .transition-preview-controls > button:not(.transition-play-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#replacement-modal .transition-preview-controls > button:not(.transition-play-btn):hover {
  color: var(--axiom-final-green) !important;
  background: rgba(163, 255, 0, 0.055) !important;
}

#replacement-modal .transition-preview-controls .skip-preview-icon {
  width: 24px;
  height: 24px;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%);
}

#replacement-modal .transition-play-btn {
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px !important;
  background: var(--axiom-final-green) !important;
  color: #061000 !important;
  box-shadow: 0 0 28px rgba(163, 255, 0, 0.34) !important;
}

#replacement-modal .transition-play-btn svg {
  width: 22px !important;
  height: 22px !important;
}

#replacement-modal .transition-action {
  border-radius: 4px !important;
}

/* ---------- Magic Set ---------- */
body.graph-mode-active #tab-content-studio {
  overflow: hidden !important;
}

body.graph-mode-active #magic-set-command,
body.graph-mode-active #studio-build-controls,
body.graph-mode-active #graph-container {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.graph-mode-active #magic-set-command {
  border-width: 0 0 1px !important;
}

body.graph-mode-active #studio-build-controls {
  border-width: 0 0 1px !important;
  padding: 12px 18px !important;
}

body.graph-mode-active #studio-build-controls button,
body.graph-mode-active #studio-build-controls select,
body.graph-mode-active #studio-build-controls input {
  border-radius: 4px !important;
}

body.graph-mode-active #graph-container {
  margin: 0 !important;
  border: 0 !important;
  background: rgba(2, 6, 3, 0.5) !important;
}

body.graph-mode-active .magic-axis-title strong {
  text-shadow: 0 0 18px rgba(163, 255, 0, 0.18);
}

body.graph-mode-active .magic-phase-card {
  border-radius: 0 !important;
}

#btn-view-studio-set span {
  font-size: 14px !important;
  letter-spacing: 0.09em !important;
}

/* ---------- Playlists ---------- */
#tab-content-playlists {
  padding: 30px 30px 124px !important;
}

#tab-content-playlists > .flex:first-child {
  margin-bottom: 22px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--axiom-final-line);
}

#tab-content-playlists h2 {
  font-size: 62px !important;
}

#tab-content-playlists button {
  border-radius: 4px !important;
}

#playlist-listen-edit-btn.hidden {
  display: none !important;
}

#playlist-listen-total:empty + p {
  display: none !important;
}

.playlists-shell {
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 0 !important;
  border: 1px solid var(--axiom-final-line);
}

.playlists-shell > aside,
.playlists-shell > section {
  background: rgba(4, 8, 5, 0.46) !important;
  border: 0 !important;
}

.playlists-shell > aside {
  border-right: 1px solid var(--axiom-final-line) !important;
}

#saved-playlists-list {
  gap: 0 !important;
}

#saved-playlists-list > * {
  border-radius: 0 !important;
  border-width: 0 0 1px !important;
  box-shadow: none !important;
}

.playlist-listen-row {
  min-height: 78px;
  border-bottom: 1px solid var(--axiom-final-line);
  background: transparent !important;
}

.playlist-listen-row:hover,
.playlist-listen-row.playing-track {
  background: rgba(163, 255, 0, 0.055) !important;
}

.playlist-empty-state {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.playlist-empty-state strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: 0.04em;
}

/* ---------- Performance ---------- */
#tab-content-performance {
  padding: 28px 28px 124px !important;
}

#tab-content-performance > .flex:first-child {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--axiom-final-line);
}

#tab-content-performance h2 {
  font-size: 56px !important;
}

#tab-content-performance > .flex:first-child > .flex {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px !important;
}

#tab-content-performance > .flex:first-child .performance-action {
  min-height: 42px;
  padding: 0 10px !important;
  font-size: 8px !important;
  white-space: nowrap;
}

#tab-content-performance .performance-action,
#tab-content-performance .performance-mini-btn,
#tab-content-performance .performance-filter-chip,
#tab-content-performance .performance-pick-btn,
#tab-content-performance :is(input, select) {
  border-radius: 4px !important;
}

.performance-shell {
  grid-template-columns: minmax(320px, 0.76fr) minmax(0, 1.7fr) !important;
  gap: 0 !important;
  border: 1px solid var(--axiom-final-line);
}

.performance-panel {
  background: rgba(3, 7, 4, 0.46) !important;
  border: 0 !important;
}

.performance-now-card {
  border-right: 1px solid var(--axiom-final-line) !important;
}

.performance-now-track {
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 94px;
}

/* Live provider identity: djay Pro is orange, Serato is blue. */
#tab-content-performance .performance-now-track.provider-djay {
  border-left: 3px solid #ff8a1f;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 138, 31, 0.12), rgba(255, 138, 31, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 31, 0.16);
}

#tab-content-performance .performance-now-track.provider-serato {
  border-left: 3px solid #22a7ff;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(34, 167, 255, 0.12), rgba(34, 167, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(34, 167, 255, 0.16);
}

#tab-content-performance .performance-now-track.provider-axiom {
  border-left: 3px solid #a3ff00;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(163, 255, 0, 0.12), rgba(163, 255, 0, 0.025));
  box-shadow: inset 0 0 0 1px rgba(163, 255, 0, 0.16);
}

.performance-now-track .artwork-fallback,
.performance-now-track .library-artwork {
  border-radius: 4px !important;
}

.performance-track-title {
  font-size: 24px !important;
  line-height: 1 !important;
}

.performance-gig-profile,
.performance-signal,
.performance-playing-bpm-control,
.performance-cued-next {
  border-radius: 4px !important;
}

.performance-suggestion-card {
  min-height: 118px;
  margin: 0 !important;
  border: 0 !important;
  border-left: 3px solid rgba(163, 255, 0, 0.34) !important;
  border-bottom: 1px solid var(--axiom-final-line) !important;
  background: rgba(3, 7, 4, 0.38) !important;
}

.performance-suggestion-card:hover {
  background: rgba(163, 255, 0, 0.05) !important;
}

.performance-suggestion-card.gig-serato {
  border-left-color: var(--axiom-final-cyan) !important;
  background: rgba(50, 215, 255, 0.075) !important;
}

.performance-suggestion-card.gig-djay {
  border-left-color: var(--axiom-final-orange) !important;
  background: rgba(255, 138, 31, 0.075) !important;
}

.performance-suggestion-card.gig-mixed {
  border-left-color: var(--axiom-final-cyan) !important;
  box-shadow: inset -3px 0 0 var(--axiom-final-orange) !important;
}

.performance-suggestion-title {
  font-size: 18px !important;
}

.performance-suggestions > .text-center {
  display: grid;
  place-items: center;
  min-height: 280px;
  margin-top: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 11px !important;
  line-height: 1.6;
}

.performance-mini-btn {
  min-height: 30px;
  padding: 7px 10px !important;
  font-size: 9px !important;
}

.performance-pick-btn {
  min-height: 36px;
  font-size: 10px !important;
}

/* Settings and confirmation dialogs were approved; only normalize their corners. */
.settings-shell,
#axiom-modal-card {
  border-radius: 8px !important;
}

#axiom-modal-card[data-variant="health"] {
  --modal-accent: var(--axiom-final-green);
}

#axiom-modal-card[data-variant="serato"] {
  --modal-accent: var(--axiom-final-cyan);
}

#axiom-modal-card[data-variant="djay"] {
  --modal-accent: var(--axiom-final-orange);
}

/* Keep the product usable on the minimum supported laptop width. */
@media (max-width: 1220px) {
  #tab-content-library .library-main-grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  #tab-content-library .library-track-card {
    grid-template-columns: 54px minmax(168px, 1fr) 64px 54px 52px 20px !important;
  }

  #tab-content-library .library-waveform {
    display: none !important;
  }

  #active-playlist-container .playlist-row.studio-transition-row {
    grid-template-columns: 46px minmax(250px, 1fr) 74px 72px 84px 122px 36px !important;
  }

  #tab-content-performance > .flex:first-child {
    align-items: flex-start !important;
  }

  #tab-content-performance > .flex:first-child > .flex {
    max-width: 700px;
  }
}

@media (max-width: 920px) {
  #tab-content-library .library-main-grid {
    display: block !important;
    overflow-y: auto !important;
  }

  #tab-content-library .library-results-column {
    border-right: 0;
    padding-right: 0;
  }

  #smart-links-panel.recommendations-panel {
    margin-top: 24px !important;
    border-top: 1px solid var(--axiom-final-line) !important;
  }

  .performance-shell {
    display: block !important;
    overflow-y: auto;
  }

  .performance-now-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--axiom-final-line) !important;
  }
}

/* ==========================================================================
   APPROVED SCREEN COMPOSITIONS — 2026-07-30
   These route-specific rules translate the approved browser prototypes onto
   the live AXIOM controls. They deliberately sit after the earlier cleanup
   layer so old cockpit decoration cannot override the approved hierarchy.
   ========================================================================== */

:root {
  --axiom-approved-sidebar: 288px;
  --axiom-approved-player: 108px;
  --axiom-approved-row: 100px;
}

/*
 * The approved browser compositions use an 18%-wide navigation rail.
 * Keep the installed shell proportional instead of letting Tailwind's fixed
 * w-72 consume 288px even when the window is only 1280px wide.
 */
body.axiom-installed-app > aside {
  width: clamp(230px, 18vw, var(--axiom-approved-sidebar)) !important;
}

/* ---------- Installed update / opening screen ---------- */
.release-splash-overlay {
  padding: 27px !important;
  background: rgba(0, 0, 0, 0.94) !important;
  z-index: 25000 !important;
}

.release-splash-shell {
  display: grid !important;
  grid-template-columns: minmax(285px, 33.5%) minmax(0, 1fr) !important;
  gap: 0 !important;
  width: min(1320px, calc(100vw - 54px)) !important;
  height: min(860px, calc(100vh - 54px)) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  background: #030403 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68) !important;
}

.release-splash-brand {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  padding: clamp(36px, 5vh, 62px) clamp(32px, 3.5vw, 56px) 38px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.34) !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(163, 255, 0, 0.065), transparent 34%),
    #030403 !important;
}

.release-splash-brand::before {
  display: none !important;
}

.release-splash-mark {
  display: block !important;
  width: clamp(104px, 9vw, 118px) !important;
  height: clamp(104px, 9vw, 118px) !important;
  margin: 0 0 clamp(16px, 2.6vh, 26px) !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: lighten !important;
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.release-splash-overlay.update-build .release-splash-mark {
  width: clamp(104px, 9vw, 118px) !important;
  height: clamp(104px, 9vw, 118px) !important;
  margin: 0 0 clamp(16px, 2.6vh, 26px) !important;
}

.release-splash-latest {
  color: var(--axiom-final-green) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.release-splash-version {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: 4px 0 0 !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  line-height: 0.9 !important;
}

.release-splash-version strong {
  color: #f4f5f2 !important;
  font-size: clamp(98px, 11vw, 142px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em !important;
}

.release-splash-cyan-rule {
  width: 58px;
  height: 2px;
  margin: clamp(16px, 2.4vh, 24px) 0 clamp(16px, 2.7vh, 26px);
  background: var(--axiom-final-cyan);
}

.release-splash-statement {
  margin: 0 !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(50px, 5.2vw, 68px) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.015em !important;
  text-transform: uppercase !important;
}

.release-splash-identity-copy {
  max-width: 270px !important;
  margin: clamp(16px, 2.6vh, 26px) 0 0 !important;
  color: #d0d3d0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.release-splash-build {
  position: absolute !important;
  left: clamp(32px, 3.5vw, 56px) !important;
  bottom: 24px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.34) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.release-splash-content {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  padding: clamp(38px, 5vh, 62px) clamp(38px, 4.8vw, 68px) 28px !important;
  background: #030403 !important;
}

.release-splash-headline,
.release-splash-overlay.update-build .release-splash-headline {
  margin: 0 !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(62px, 6.2vw, 82px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

.release-splash-headline .accent {
  color: inherit !important;
}

.release-splash-title,
.release-splash-overlay.update-build .release-splash-title {
  max-width: 610px !important;
  margin: clamp(14px, 2vh, 22px) 0 0 !important;
  color: #e0e3e0 !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  line-height: 1.38 !important;
}

.release-splash-features,
.release-splash-overlay.update-build .release-splash-features {
  counter-reset: axiom-update-feature !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(26px, 3vw, 42px) !important;
  min-height: 0 !important;
  margin: clamp(14px, 2vh, 24px) 0 12px !important;
}

.release-splash-features[data-count="1"],
.release-splash-features[data-count="2"],
.release-splash-features[data-count="3"] {
  grid-auto-flow: row !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.release-splash-features[data-count="8"],
.release-splash-features[data-count="9"],
.release-splash-features[data-count="10"] {
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}

/* The update-build selector above is more specific than the count selectors.
   Repeat the supported count rules at equal specificity so release-note lists
   never create an implicit third column with zero-width first columns. */
.release-splash-overlay.update-build .release-splash-features[data-count="1"],
.release-splash-overlay.update-build .release-splash-features[data-count="2"],
.release-splash-overlay.update-build .release-splash-features[data-count="3"] {
  grid-auto-flow: row !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.release-splash-overlay.update-build .release-splash-features[data-count="8"] {
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

.release-splash-overlay.update-build .release-splash-features[data-count="9"],
.release-splash-overlay.update-build .release-splash-features[data-count="10"] {
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}

.release-splash-features[data-count="11"],
.release-splash-features[data-count="12"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}

.release-splash-features[data-count="13"],
.release-splash-features[data-count="14"],
.release-splash-features[data-count="15"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}

.release-splash-feature,
.release-splash-overlay.update-build .release-splash-feature {
  counter-increment: axiom-update-feature !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  align-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px 0 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: transparent !important;
}

.release-splash-feature::before {
  content: counter(axiom-update-feature, decimal-leading-zero);
  color: #6f726f;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(45px, 4.7vw, 62px);
  line-height: 0.86;
}

.release-splash-feature-dot {
  display: none !important;
}

.release-splash-feature > span {
  align-self: center !important;
  min-width: 0 !important;
}

.release-splash-feature strong,
.release-splash-overlay.update-build .release-splash-feature strong {
  display: block !important;
  overflow: visible !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(20px, 1.75vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.release-splash-feature span:last-child span,
.release-splash-overlay.update-build .release-splash-feature span:last-child span {
  display: block !important;
  margin-top: 3px !important;
  overflow: visible !important;
  color: #c9ccc9 !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  line-height: 1.26 !important;
  white-space: normal !important;
}

.release-splash-features[data-count="11"] .release-splash-feature,
.release-splash-features[data-count="12"] .release-splash-feature,
.release-splash-features[data-count="13"] .release-splash-feature,
.release-splash-features[data-count="14"] .release-splash-feature,
.release-splash-features[data-count="15"] .release-splash-feature {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 4px 0 5px !important;
}

.release-splash-features[data-count="11"] .release-splash-feature::before,
.release-splash-features[data-count="12"] .release-splash-feature::before,
.release-splash-features[data-count="13"] .release-splash-feature::before,
.release-splash-features[data-count="14"] .release-splash-feature::before,
.release-splash-features[data-count="15"] .release-splash-feature::before {
  font-size: 32px !important;
}

.release-splash-features[data-count="11"] .release-splash-feature strong,
.release-splash-features[data-count="12"] .release-splash-feature strong,
.release-splash-features[data-count="13"] .release-splash-feature strong,
.release-splash-features[data-count="14"] .release-splash-feature strong,
.release-splash-features[data-count="15"] .release-splash-feature strong {
  font-size: 16px !important;
  line-height: 0.98 !important;
}

.release-splash-features[data-count="11"] .release-splash-feature span:last-child span,
.release-splash-features[data-count="12"] .release-splash-feature span:last-child span,
.release-splash-features[data-count="13"] .release-splash-feature span:last-child span,
.release-splash-features[data-count="14"] .release-splash-feature span:last-child span,
.release-splash-features[data-count="15"] .release-splash-feature span:last-child span {
  margin-top: 2px !important;
  font-size: 9px !important;
  line-height: 1.14 !important;
}

.release-splash-actions {
  display: block !important;
  margin: 0 !important;
}

.release-splash-btn,
.release-splash-overlay.update-build .release-splash-btn {
  border-radius: 3px !important;
}

.release-splash-btn.primary {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  border: 0 !important;
  background: var(--axiom-final-green) !important;
  color: #050605 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

.release-splash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  color: var(--axiom-final-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.release-splash-btn.secondary {
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f4f5f2 !important;
  font-size: 13px !important;
}

/* ---------- Choose Your Set Start ---------- */
#tab-content-studio:has(#studio-start-view:not(.hidden)) {
  padding: 0 !important;
  overflow: hidden !important;
}

#studio-start-view.command-launch-shell {
  display: grid !important;
  grid-template-rows: minmax(250px, 29vh) minmax(250px, 30vh) minmax(160px, 1fr) !important;
  gap: clamp(10px, 1.4vh, 16px) !important;
  width: 100% !important;
  height: calc(100vh - var(--axiom-approved-player)) !important;
  min-height: 0 !important;
  padding: clamp(22px, 3.5vh, 38px) clamp(28px, 3vw, 48px) 18px !important;
  overflow: hidden !important;
  background: #050605 !important;
}

#studio-start-view.command-launch-shell.hidden {
  display: none !important;
}

#studio-start-view.command-launch-shell::before,
#studio-start-view.command-launch-shell::after,
#studio-start-view .command-launch-hero::after,
#studio-start-view .command-action-card::before,
#studio-start-view .command-action-card::after {
  display: none !important;
}

#studio-start-view .command-launch-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(440px, 0.96fr) minmax(420px, 1.04fr) !important;
  align-items: center !important;
  gap: 34px !important;
  min-height: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26) !important;
  background: transparent !important;
}

#studio-start-view .command-launch-hero > div:not(.command-terrain):not(.command-status-readout) {
  position: relative !important;
  z-index: 2 !important;
  max-width: 640px !important;
}

#studio-start-view .command-terrain {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 150px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, #050605 0%, transparent 14%),
    url("/static/axiom-platform-hero.png") center right / cover no-repeat !important;
}

#studio-start-view .command-terrain::before,
#studio-start-view .command-terrain::after,
#studio-start-view .command-signal-canvas,
#studio-start-view .command-status-readout {
  display: none !important;
}

#studio-start-view .command-eyebrow {
  margin: 0 0 10px !important;
  color: #f4f5f2 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

#studio-start-view .command-eyebrow::after {
  content: "";
  display: inline-block;
  width: 52px;
  height: 2px;
  margin: 0 0 3px 12px;
  background: var(--axiom-final-green);
}

#studio-start-view .command-title {
  margin: 0 !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(60px, 5vw, 72px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
}

#studio-start-view .command-copy {
  max-width: 610px !important;
  margin: clamp(14px, 2vh, 22px) 0 0 !important;
  color: rgba(244, 245, 242, 0.76) !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 1.45 !important;
}

#studio-start-view .studio-quick-actions {
  min-height: 0 !important;
}

#studio-start-view .studio-section-label {
  display: none !important;
}

#studio-start-view .command-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  height: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

#studio-start-view .command-action-card,
#studio-start-view .command-action-card.primary,
#studio-start-view .command-action-card.secondary {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(20px, 2.5vw, 34px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

#studio-start-view .command-action-card:first-child {
  background: linear-gradient(110deg, #9cf000, #b9ff23) !important;
  color: #061000 !important;
}

#studio-start-view .command-action-card:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: #080a08 !important;
  color: #f4f5f2 !important;
}

#studio-start-view .command-action-card:hover,
#studio-start-view .command-action-card:focus-visible {
  transform: none !important;
  filter: brightness(1.04) !important;
}

#studio-start-view .command-action-icon {
  width: 38px !important;
  height: 38px !important;
  filter: brightness(0) saturate(100%) !important;
}

#studio-start-view .command-action-card:last-child .command-action-icon {
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%) !important;
}

#studio-start-view .command-card-copy {
  display: block !important;
  min-width: 0 !important;
}

#studio-start-view .command-card-kicker {
  display: block !important;
  margin: 0 0 12px !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

#studio-start-view .command-card-title {
  display: block !important;
  margin: 0 0 6px !important;
  color: inherit !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(34px, 3vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#studio-start-view .command-card-desc {
  display: block !important;
  max-width: 360px !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#studio-start-view .command-card-guidance {
  display: grid !important;
  gap: 6px !important;
  margin-top: 11px !important;
  color: inherit !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

#studio-start-view .command-card-guidance > span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 1px 0;
  background: var(--axiom-final-cyan);
}

#studio-start-view .command-action-card:last-child .command-card-guidance > span::before {
  background: var(--axiom-final-green);
}

#studio-start-view .command-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 126px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid currentColor !important;
  border-radius: 4px !important;
  background: #050605 !important;
  color: #f4f5f2 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

#studio-start-view .command-action-card:last-child .command-card-cta {
  border-color: rgba(163, 255, 0, 0.66) !important;
  background: transparent !important;
  color: var(--axiom-final-green) !important;
}

#studio-start-view .build-night-panel {
  display: block !important;
  min-height: 160px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #070907 !important;
}

#studio-start-view .build-night-copy {
  display: none !important;
}

#studio-start-view .build-night-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  height: 100% !important;
}

#studio-start-view .build-night-card {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 24px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

#studio-start-view .build-night-card:last-child {
  border-right: 0 !important;
}

#studio-start-view .build-night-card:hover,
#studio-start-view .build-night-card:focus-visible {
  background: rgba(163, 255, 0, 0.065) !important;
}

#studio-start-view .build-night-icon {
  width: 28px !important;
  height: 28px !important;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%) !important;
}

#studio-start-view .build-night-card-copy {
  display: block !important;
  min-width: 0 !important;
}

#studio-start-view .build-night-card strong {
  display: block !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#studio-start-view .build-night-card-copy > span {
  display: -webkit-box !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  color: rgba(244, 245, 242, 0.66) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

#studio-start-view .build-night-card small {
  display: block !important;
  margin-top: 10px !important;
  color: var(--axiom-final-green) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#studio-start-view .build-night-card-copy > .build-night-settings {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 10px !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

#studio-start-view .build-night-settings b {
  padding: 4px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(244, 245, 242, 0.72) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#studio-start-view .build-night-card-copy > .build-night-start {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 9px !important;
  overflow: visible !important;
  color: var(--axiom-final-green) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  -webkit-line-clamp: unset !important;
}

/* ---------- Library ---------- */
#tab-content-library.library-cockpit {
  padding: 24px 30px calc(var(--axiom-approved-player) + 12px) !important;
  background: #050605 !important;
}

#tab-content-library .library-topbar {
  min-height: 42px !important;
  margin-bottom: 14px !important;
}

#tab-content-library .library-search-shell {
  min-height: 42px !important;
}

#tab-content-library .library-search-input {
  min-height: 42px !important;
  padding: 0 48px 0 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 4px !important;
  background: #090b09 !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

#tab-content-library .library-guide-btn {
  min-width: 78px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(163, 255, 0, 0.72) !important;
  border-radius: 4px !important;
  background: #080b08 !important;
  color: var(--axiom-final-green) !important;
  box-shadow: none !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

#tab-content-library .library-control-row {
  min-height: 42px !important;
  margin-bottom: 14px !important;
}

#tab-content-library .library-control-row button {
  border-radius: 4px !important;
}

#tab-content-library .library-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  gap: 24px !important;
  min-height: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
}

#tab-content-library .library-results-column {
  min-height: 0 !important;
  padding-right: 24px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#tab-content-library #search-results {
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 0 24px !important;
}

#tab-content-library .library-track-card {
  grid-template-columns: 62px minmax(210px, 1fr) minmax(74px, 0.23fr) 66px 58px 58px 22px !important;
  min-height: var(--axiom-approved-row) !important;
  padding: 10px 10px 10px 12px !important;
  gap: 12px !important;
  background: rgba(6, 9, 7, 0.26) !important;
}

#tab-content-library .library-track-card .library-artwork {
  width: 58px !important;
  height: 58px !important;
}

#tab-content-library .library-track-title {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#tab-content-library .library-track-artist {
  min-width: 0 !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

#tab-content-library .library-meta-line {
  margin-top: 5px !important;
  font-size: 8px !important;
}

#tab-content-library .library-health-chips {
  margin-top: 4px !important;
}

#tab-content-library .library-health-chip {
  min-height: 14px !important;
  padding: 1px 6px !important;
  font-size: 7px !important;
}

#tab-content-library .library-bpm-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  min-height: 38px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 6px !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

#tab-content-library .library-bpm-tools {
  margin-top: 2px !important;
}

#tab-content-library .library-bpm-tools button {
  min-height: 18px !important;
  padding: 0 4px !important;
  font-size: 7px !important;
}

#tab-content-library .library-add-btn {
  min-width: 54px !important;
  min-height: 38px !important;
}

#smart-links-panel.recommendations-panel {
  padding: 18px 0 18px !important;
}

#smart-links-panel .recommendations-title {
  font-size: clamp(34px, 3vw, 46px) !important;
}

#smart-links-panel .recommendations-controls {
  gap: 7px !important;
}

#lib-suggestions-list .recommendation-card {
  grid-template-columns: 58px minmax(0, 1fr) 26px !important;
  min-height: var(--axiom-approved-row) !important;
  padding: 10px 4px 10px 12px !important;
}

#lib-suggestions-list .recommendation-card .recommendation-artwork,
#lib-suggestions-list .recommendation-card .artwork-fallback {
  width: 54px !important;
  height: 54px !important;
}

#lib-suggestions-list .recommendation-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 19px !important;
}

#lib-suggestions-list .recommendation-artist {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

/* ---------- Studio / manual set builder ---------- */
#tab-content-studio:has(#studio-active-view:not(.hidden)) {
  padding: 0 !important;
  overflow: hidden !important;
  background: #050605 !important;
}

#studio-active-view {
  min-height: 0 !important;
  background: #050605 !important;
}

#studio-active-view::before,
#studio-active-view::after {
  display: none !important;
}

#studio-active-view .studio-header {
  min-height: 108px !important;
  margin: 0 !important;
  padding: 20px 28px 17px 34px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: #050605 !important;
}

#studio-active-view .studio-header::before,
#studio-active-view .studio-header::after {
  display: none !important;
}

#studio-active-view .studio-actions button {
  border-radius: 4px !important;
}

#studio-set-brief-bar {
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #060806 !important;
}

#studio-mode-controls {
  display: flex !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 0 !important;
  background: #050605 !important;
  box-shadow: none !important;
}

#energy-ladder {
  display: block !important;
  height: 70px !important;
  margin: 0 !important;
  padding: 18px 21px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 0 !important;
  background: #050605 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#energy-ladder::before {
  display: none !important;
}

#energy-ladder .energy-timeline-track {
  height: 10px !important;
  gap: 0 !important;
}

#energy-ladder .energy-timeline-track::before,
#energy-ladder .energy-timeline-track::after {
  display: none !important;
}

#energy-ladder .energy-block {
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(5, 6, 5, 0.65) !important;
  background: #292c29 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#energy-ladder .energy-block:first-child {
  border-radius: 10px 0 0 10px !important;
}

#energy-ladder .energy-block:last-child {
  border-right: 0 !important;
  border-radius: 0 10px 10px 0 !important;
}

#energy-ladder .energy-block.energy-Peak {
  background: var(--axiom-final-green) !important;
}

#energy-ladder .energy-timeline-labels {
  gap: 0 !important;
  margin-top: 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

#energy-ladder .energy-block.active,
#energy-ladder .energy-block.current {
  background: var(--axiom-final-green) !important;
  color: #061000 !important;
}

#active-playlist-container {
  min-height: 0 !important;
  padding: 0 0 calc(var(--axiom-approved-player) + 8px) !important;
  overflow-y: auto !important;
}

#active-playlist-container .playlist-row.studio-transition-row {
  grid-template-columns: 48px minmax(310px, 1fr) minmax(78px, 0.22fr) minmax(78px, 0.2fr) minmax(92px, 0.2fr) 140px 42px !important;
  min-height: 88px !important;
  padding: 0 19px 0 14px !important;
  gap: 12px !important;
  background: #0a0c0b !important;
  border-radius: 0 !important;
}

#active-playlist-container .playlist-row.studio-transition-row:hover:not(.selected):not(.playing-track) {
  background: #0f120f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.3) !important;
}

#active-playlist-container .studio-track-artwork {
  width: 56px !important;
  height: 56px !important;
}

#active-playlist-container .studio-row-title {
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
}

#active-playlist-container .studio-row-artist {
  font-size: 14px !important;
}

#active-playlist-container .studio-smart-btn {
  min-height: 39px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
}

/* ---------- Matching Songs / anchor selection ---------- */
#replacement-modal.anchor-dj-modal {
  padding: 18px !important;
}

#replacement-modal .anchor-dj-shell {
  height: calc(100vh - 36px) !important;
  border: 0 !important;
}

#replacement-modal .anchor-modal-header {
  min-height: 48px !important;
  padding: 0 10px !important;
}

#replacement-modal .anchor-hero-panel {
  grid-template-columns: 112px 235px minmax(0, 1fr) !important;
  min-height: 160px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#replacement-modal .anchor-cover-card {
  width: 100px !important;
  height: 100px !important;
  border-radius: 4px !important;
}

#replacement-modal .anchor-title {
  font-size: 30px !important;
  line-height: 0.92 !important;
}

#replacement-modal .anchor-filter-bar {
  min-height: 44px !important;
  padding: 8px 0 !important;
}

#replacement-modal .anchor-modal-body {
  grid-template-columns: minmax(0, 1.78fr) minmax(310px, 0.86fr) !important;
  min-height: 0 !important;
}

#replacement-modal .anchor-panel-header {
  min-height: 48px !important;
  padding: 8px 12px !important;
}

#replacement-modal .anchor-suggestion-row {
  min-height: 82px !important;
  padding: 7px 10px !important;
}

#replacement-modal .live-transition-panel {
  min-height: 0 !important;
}

#replacement-modal .transition-preview-controls {
  min-height: 96px !important;
  padding: 14px 18px !important;
}

/* ---------- Magic Set ---------- */
body.graph-mode-active #tab-content-studio,
body.studio-magic-mode #tab-content-studio {
  padding: 0 !important;
  overflow: hidden !important;
  background: #050605 !important;
}

body.graph-mode-active #studio-active-view,
body.studio-magic-mode #studio-active-view {
  padding: 0 0 var(--axiom-approved-player) !important;
}

body.graph-mode-active #active-playlist-container,
body.studio-magic-mode #active-playlist-container {
  display: none !important;
}

body.graph-mode-active #magic-set-command,
body.studio-magic-mode #magic-set-command {
  min-height: 86px !important;
  padding: 13px 18px !important;
  background: #050605 !important;
}

body.graph-mode-active #studio-build-controls,
body.studio-magic-mode #studio-build-controls {
  min-height: 76px !important;
  padding: 10px 18px !important;
  background: #070907 !important;
}

body.graph-mode-active .magic-phase-band,
body.studio-magic-mode .magic-phase-band {
  min-height: 58px !important;
  margin: 0 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}

body.graph-mode-active #graph-container,
body.studio-magic-mode #graph-container {
  height: calc(100vh - 338px - var(--axiom-approved-player)) !important;
  min-height: 300px !important;
  margin: 0 18px !important;
  padding: 14px 18px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: #050705 !important;
}

body.graph-mode-active .magic-chart-footer,
body.studio-magic-mode .magic-chart-footer {
  min-height: 50px !important;
  padding: 8px 12px !important;
}

/* ---------- Performance ---------- */
#tab-content-performance {
  padding: 22px 26px calc(var(--axiom-approved-player) + 10px) !important;
  background: #050605 !important;
}

#tab-content-performance > .flex:first-child {
  min-height: 72px !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

#tab-content-performance h2 {
  font-size: 52px !important;
}

#tab-content-performance > .flex:first-child .performance-action {
  min-height: 38px !important;
}

.performance-shell {
  min-height: 0 !important;
  background: #050605 !important;
}

.performance-panel {
  min-height: 0 !important;
  padding: 18px !important;
}

.performance-now-track {
  min-height: 88px !important;
}

.performance-track-title {
  font-size: 26px !important;
}

.performance-suggestions {
  min-height: 0 !important;
  overflow-y: auto !important;
}

.performance-suggestion-card {
  min-height: 112px !important;
}

.performance-suggestion-title {
  font-size: 20px !important;
}

.performance-suggestion-card.gig-serato {
  border-left-color: #18d8e8 !important;
  background: linear-gradient(90deg, rgba(24, 216, 232, 0.12), rgba(24, 216, 232, 0.025)) !important;
}

.performance-suggestion-card.gig-djay {
  border-left-color: #ff8a1f !important;
  background: linear-gradient(90deg, rgba(255, 138, 31, 0.13), rgba(255, 138, 31, 0.025)) !important;
}

/* ---------- Playlists ---------- */
#tab-content-playlists {
  padding: 24px 28px calc(var(--axiom-approved-player) + 10px) !important;
  background: #050605 !important;
}

#tab-content-playlists > .flex:first-child {
  min-height: 76px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
}

#tab-content-playlists h2 {
  font-size: 58px !important;
}

.playlists-shell {
  min-height: 0 !important;
  grid-template-columns: 310px minmax(0, 1fr) !important;
  background: #050605 !important;
}

.playlists-shell > aside,
.playlists-shell > section {
  min-height: 0 !important;
}

.playlist-listen-row {
  min-height: 72px !important;
}

/* ---------- Approved settings and system actions ---------- */
.settings-shell {
  max-width: 960px !important;
  border-radius: 9px !important;
}

#axiom-modal-card {
  border-radius: 5px !important;
}

/*
 * A duplicated legacy modal rule earlier in the bundled stylesheet uses
 * `display: none !important`. Restore the approved confirmation surface when
 * the real action adds `.active`, and return pointer input to its buttons.
 */
#axiom-modal-overlay.active {
  display: flex !important;
  pointer-events: auto !important;
}

/* Provider handoff receipts keep one shared layout and a truthful provider colour. */
.serato-success-overlay {
  background:
    radial-gradient(circle at 52% 30%, color-mix(in srgb, var(--axiom-final-cyan) 18%, transparent), transparent 34%),
    rgba(0, 0, 0, 0.84) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

.serato-success-overlay:has(.djay-success) {
  background:
    radial-gradient(circle at 52% 30%, color-mix(in srgb, var(--axiom-final-orange) 18%, transparent), transparent 34%),
    rgba(0, 0, 0, 0.84) !important;
}

.serato-success-card {
  --handoff-accent: var(--axiom-final-cyan);
  width: min(640px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px);
  overflow: auto !important;
  border-color: color-mix(in srgb, var(--handoff-accent) 52%, transparent) !important;
  border-radius: 9px !important;
  background: #0c100e !important;
  isolation: isolate !important;
  contain: paint !important;
  animation: none !important;
  transform: none !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    0 0 42px color-mix(in srgb, var(--handoff-accent) 14%, transparent) !important;
}

.serato-success-card.djay-success {
  --handoff-accent: var(--axiom-final-orange);
}

.serato-success-card::before {
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--handoff-accent), transparent) !important;
  filter: none !important;
  opacity: 1 !important;
}

.serato-success-card::after {
  display: none !important;
}

.serato-success-content {
  padding: 30px !important;
  background: #0c100e !important;
}

.serato-success-header {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding-bottom: 18px !important;
}

.serato-success-mark {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--handoff-accent) 12%, #0c100e) !important;
  color: var(--handoff-accent) !important;
  box-shadow: 0 0 34px color-mix(in srgb, var(--handoff-accent) 44%, transparent) !important;
}

.serato-success-title {
  font-size: 44px !important;
  line-height: 0.95 !important;
}

.serato-success-copy {
  margin-top: 9px !important;
  font-size: 11px !important;
}

.serato-success-kicker,
.serato-success-stat strong,
.serato-success-detail span {
  color: var(--handoff-accent) !important;
}

.serato-success-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 17px 0 !important;
}

.serato-success-stat {
  min-height: 72px !important;
  padding: 12px !important;
  border-radius: 4px !important;
}

.serato-success-stat strong {
  font-size: 24px !important;
}

.serato-success-stat span {
  margin-top: 6px !important;
  font-size: 8px !important;
}

.serato-success-details {
  gap: 7px !important;
  margin-bottom: 14px !important;
}

.serato-success-detail {
  grid-template-columns: 94px minmax(0, 1fr) !important;
  padding: 9px 11px !important;
  border-color: color-mix(in srgb, var(--handoff-accent) 18%, transparent) !important;
  border-radius: 4px !important;
}

.serato-success-note {
  margin-bottom: 16px !important;
  padding: 10px 12px !important;
  border-radius: 4px !important;
  background: color-mix(in srgb, var(--handoff-accent) 8%, transparent) !important;
  font-size: 10px !important;
}

.serato-success-note svg path {
  stroke: var(--handoff-accent) !important;
}

.serato-success-btn.primary {
  border-color: var(--handoff-accent) !important;
  background: var(--handoff-accent) !important;
  color: #050805 !important;
  box-shadow: 0 0 28px color-mix(in srgb, var(--handoff-accent) 24%, transparent) !important;
}

.serato-success-btn {
  min-width: 142px !important;
  min-height: 42px !important;
  padding: 11px 16px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
}

.serato-success-close {
  border-radius: 4px !important;
}

.serato-success-close:hover {
  border-color: color-mix(in srgb, var(--handoff-accent) 55%, transparent) !important;
  color: var(--handoff-accent) !important;
}

/* ---------- Compact-height safeguards ---------- */
@media (max-height: 780px) {
  :root {
    --axiom-approved-player: 106px;
    --axiom-approved-row: 82px;
  }

  .release-splash-brand {
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }

  .release-splash-mark {
    width: 104px !important;
    height: 104px !important;
    margin-bottom: 8px !important;
  }

  .release-splash-overlay.update-build .release-splash-mark {
    width: 104px !important;
    height: 104px !important;
    margin-bottom: 8px !important;
  }

  .release-splash-version strong {
    font-size: 92px !important;
  }

  .release-splash-cyan-rule {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  .release-splash-statement {
    font-size: 48px !important;
  }

  .release-splash-identity-copy {
    margin-top: 12px !important;
    font-size: 13px !important;
  }

  .release-splash-content {
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }

  .release-splash-headline,
  .release-splash-overlay.update-build .release-splash-headline {
    font-size: 58px !important;
  }

  .release-splash-title,
  .release-splash-overlay.update-build .release-splash-title {
    margin-top: 10px !important;
    font-size: 14px !important;
  }

  .release-splash-features,
  .release-splash-overlay.update-build .release-splash-features {
    margin-top: 8px !important;
    margin-bottom: 7px !important;
  }

  .release-splash-feature,
  .release-splash-overlay.update-build .release-splash-feature {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding: 3px 0 4px !important;
  }

  .release-splash-feature::before {
    font-size: 38px !important;
  }

  .release-splash-feature strong,
  .release-splash-overlay.update-build .release-splash-feature strong {
    font-size: 19px !important;
  }

  .release-splash-feature span:last-child span,
  .release-splash-overlay.update-build .release-splash-feature span:last-child span {
    font-size: 10px !important;
  }

  .release-splash-btn.primary {
    min-height: 46px !important;
    font-size: 25px !important;
  }

  .release-splash-footer {
    min-height: 30px !important;
    font-size: 10px !important;
  }

  #studio-start-view.command-launch-shell {
    grid-template-rows: 168px minmax(188px, 1fr) 84px !important;
    padding-top: 18px !important;
  }

  #studio-start-view .command-title {
    font-size: 59px !important;
  }

  #studio-start-view .command-card-title {
    font-size: 36px !important;
  }

  #studio-start-view .command-card-guidance {
    display: none !important;
  }

  #studio-start-view .command-action-card,
  #studio-start-view .command-action-card.primary,
  #studio-start-view .command-action-card.secondary {
    padding: 18px 22px !important;
  }

  #tab-content-library.library-cockpit {
    padding-top: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   Library information lanes
   Mission fit, track metadata, and Health state are separate decisions. Give
   each one a stable row so packaged-window density cannot stack the labels.
   -------------------------------------------------------------------------- */
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row {
  min-height: 120px !important;
  grid-template-rows: 24px 18px 16px 18px 18px !important;
  row-gap: 3px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing) {
  min-height: 128px !important;
  grid-template-rows: 28px 18px 16px 18px 18px !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(
    .library-fit-row,
    .library-meta-line,
    .library-health-chips
  ) {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  min-height: 16px !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-fit-row {
  gap: 6px !important;
  padding-bottom: 1px !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-meta-line {
  gap: 8px !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-health-chips {
  gap: 6px !important;
  padding-top: 1px !important;
}

@media (max-width: 1180px) {
  #studio-start-view .command-launch-hero {
    grid-template-columns: minmax(380px, 1fr) minmax(340px, 0.9fr) !important;
  }

  #studio-start-view .command-action-card,
  #studio-start-view .command-action-card.primary,
  #studio-start-view .command-action-card.secondary {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #studio-start-view .command-card-cta {
    min-width: 108px !important;
    padding: 0 10px !important;
    font-size: 8px !important;
  }

  #studio-start-view .build-night-card-copy > span {
    display: none !important;
  }
}

/* First-pass fidelity corrections: lock control placement, prevent the compact
   transition stack from collapsing, and let the lime Selection shell use the
   reference's dark-on-lime information hierarchy. */
#replacement-modal.anchor-dj-modal .anchor-search-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .anchor-filter-btn.primary {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-action-menu {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-era {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-root {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-count {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .root-help {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .live-transition-panel {
  display: block !important;
}

#replacement-modal.anchor-dj-modal .transition-content {
  display: block !important;
  height: auto !important;
}

#replacement-modal.anchor-dj-modal .transition-intel-stage {
  display: block !important;
  height: 46px !important;
  overflow: visible !important;
}

#replacement-modal.anchor-dj-modal .mix-advice-card {
  margin-top: 8px !important;
}

#replacement-modal.anchor-dj-modal .modal-action-panel {
  margin-top: 10px !important;
}

/* Matching Songs approval correction — final cascade. */
/* The doubled modal id intentionally locks this approved state above the
   legacy full-lime declarations that still exist later in the stylesheet. */
html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
  color: #f4f6f1 !important;
  border-top: 2px solid var(--focus-deck-lime) !important;
  border-right: 1px solid rgba(163, 255, 0, 0.52) !important;
  border-bottom: 2px solid var(--focus-deck-lime) !important;
  background: linear-gradient(90deg, rgba(13, 20, 13, 0.995), rgba(7, 10, 8, 0.995) 62%, rgba(12, 16, 11, 0.99)) !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .axiom-focus-marker {
  background: var(--focus-deck-lime) !important;
  color: var(--focus-deck-ink) !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-play {
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
  color: var(--focus-deck-ink) !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-art {
  border-color: rgba(163, 255, 0, 0.72) !important;
  background: #030503 !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-title {
  padding-bottom: 5px !important;
  border-bottom: 2px solid var(--focus-deck-lime) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) :is(.anchor-suggestion-artist, .anchor-suggestion-tags span, .axiom-role-fit, .anchor-suggestion-metric span, .anchor-suggestion-key span, .anchor-suggestion-match span) {
  color: rgba(245, 247, 242, 0.72) !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-bpm > strong {
  color: #ffffff !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-key strong {
  background: #153c42 !important;
  color: #59e8f4 !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-match strong {
  color: var(--focus-deck-lime) !important;
}

html body #replacement-modal#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-add {
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
  color: var(--focus-deck-ink) !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal .live-transition-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal .transition-content {
  display: flex !important;
  height: auto !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal .transition-intel-stage {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal .mix-advice-card {
  margin-top: 0 !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal #btn-action-add {
  grid-column: 1 / -1 !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal #btn-action-replace,
html body #replacement-modal#replacement-modal.anchor-dj-modal #btn-action-before {
  grid-column: 1 !important;
}

html body #replacement-modal#replacement-modal.anchor-dj-modal #modal-save-for-later-btn,
html body #replacement-modal#replacement-modal.anchor-dj-modal #btn-action-after {
  grid-column: 2 !important;
}
@media (max-width: 1320px) {
  #replacement-modal.anchor-dj-modal .anchor-filter-bar {
    grid-template-columns: minmax(190px, 1fr) 120px 110px 98px 98px 105px 30px minmax(0, 250px) !important;
    gap: 7px !important;
  }
}

@media (max-width: 1180px) {
  #replacement-modal.anchor-dj-modal .anchor-filter-bar {
    grid-template-columns: minmax(180px, 1fr) 112px 102px 92px 92px 98px 30px minmax(0, 170px) !important;
  }
}

/* Release-note stress layouts must remain deterministic after every compact
   viewport override above. Row flow prevents implicit zero-width columns when
   a release contains more than twelve items. */
.release-splash-overlay.update-build .release-splash-features[data-count="11"],
.release-splash-overlay.update-build .release-splash-features[data-count="12"] {
  grid-auto-flow: row !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}

.release-splash-overlay.update-build .release-splash-features[data-count="13"],
.release-splash-overlay.update-build .release-splash-features[data-count="14"],
.release-splash-overlay.update-build .release-splash-features[data-count="15"] {
  grid-auto-flow: row !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}

/* Approved Playlists is a continuous two-pane workspace, not a stack of
   floating cards. Keep the functional rows and undo behaviour, but remove the
   accidental utility spacing and rounded shelf treatment. */
#tab-content-playlists .playlists-shell > aside,
#tab-content-playlists .playlists-shell > section {
  padding: 0 !important;
}

#tab-content-playlists .playlists-shell > aside > :first-child,
#tab-content-playlists .playlists-shell > section > :first-child {
  min-height: 88px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--axiom-final-line) !important;
}

#saved-playlists-list,
#playlist-listen-tracks {
  padding-right: 0 !important;
}

#saved-playlists-list > :not([hidden]) ~ :not([hidden]),
#playlist-listen-tracks > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

#saved-playlists-list .playlist-crate-row,
#playlist-listen-tracks .playlist-listen-row {
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#saved-playlists-list .playlist-crate-row {
  min-height: 118px !important;
  padding: 18px 20px !important;
}

#saved-playlists-list .playlist-crate-row.active {
  border-color: rgba(0, 0, 0, 0.24) !important;
  background: var(--axiom-final-green) !important;
  color: #050605 !important;
}

#saved-playlists-list .playlist-crate-row.active p,
#saved-playlists-list .playlist-crate-row.active span,
#saved-playlists-list .playlist-crate-row.active .playlist-quiet-action {
  color: #050605 !important;
}

#saved-playlists-list .playlist-crate-row.active .playlist-edit-cta {
  border-color: #050605 !important;
  background: #050605 !important;
  color: var(--axiom-final-green) !important;
  box-shadow: none !important;
}

#playlist-listen-tracks .playlist-listen-row {
  min-height: 86px !important;
  padding: 13px 20px !important;
  background: transparent !important;
}

#playlist-listen-tracks .playlist-listen-row:hover,
#playlist-listen-tracks .playlist-listen-row.playing-track {
  background: rgba(163, 255, 0, 0.055) !important;
}

#playlist-listen-tracks .playlist-listen-row > button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
}

/* Performance keeps the first recommendation fully explained and makes the
   next moves glanceable. This preserves every decision control while fitting
   four useful choices in the live viewport. Selecting a compact row expands
   its evidence again. */
.performance-suggestion-card.is-priority,
.performance-suggestion-card.is-selected {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 11px !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) {
  min-height: 0 !important;
  padding: 9px 11px !important;
  gap: 10px !important;
}

.performance-suggestion-card.is-priority .performance-cue,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-decision-line,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-cue,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .axiom-role-fit {
  display: none !important;
}

.performance-suggestion-card.is-priority .performance-decision-line {
  padding: 7px 9px !important;
}

.performance-suggestion-card.is-priority .performance-decision-line span {
  display: none !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-suggestion-title {
  font-size: 18px !important;
  line-height: 1.02 !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-meta-line {
  display: none !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-bpm-readout {
  margin-top: 6px !important;
  padding: 5px 7px !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-suggestion-actions {
  display: none !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .recommendation-artwork {
  width: 46px !important;
  height: 46px !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-pick-stack {
  gap: 6px !important;
}

.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-pick-btn {
  min-height: 31px !important;
  padding: 7px 11px !important;
}

body.graph-mode-active #studio-active-view.graph-mode #graph-container,
body.studio-magic-mode #studio-active-view.graph-mode #graph-container {
  width: calc(100% - 36px) !important;
  box-sizing: border-box !important;
}

/* ========================================================================
   MAGIC SET APPROVAL INTEGRATION — AXIOM 2.0 REFERENCE
   Keep the approved Studio shell while matching the compact 112 / 100 / 62
   composition and allowing the populated journey to use the remaining height.
   ======================================================================== */
body.studio-magic-mode #studio-active-view.graph-mode {
  min-height: 100% !important;
  overflow: hidden !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #magic-set-command {
  height: 112px !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 0 8px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-command-main {
  width: 100% !important;
  min-height: 112px !important;
  padding: 18px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 0 !important;
  background: #050605 !important;
  box-shadow: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-command-title {
  font-size: 53px !important;
  line-height: 0.92 !important;
  letter-spacing: 0.035em !important;
  text-shadow: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-command-copy {
  margin-top: 9px !important;
  color: #d2d6d0 !important;
  font-size: 10px !important;
  letter-spacing: 0.17em !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-score-card {
  width: 144px !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border-radius: 3px !important;
  background: rgba(13, 16, 14, 0.8) !important;
  box-shadow: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-score-card strong {
  font-size: 40px !important;
  line-height: 1 !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 0 !important;
  background: #050605 !important;
  box-shadow: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: end !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child > .w-px {
  display: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:last-child {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: auto !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child > div:not(.studio-magic-build-pair) {
  flex: 0 0 84px !important;
  min-width: 0 !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child > div:first-child {
  flex-basis: 98px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child > div:nth-child(2) {
  flex-basis: 92px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls .studio-magic-build-pair {
  display: grid !important;
  grid-template-columns: minmax(170px, 1.25fr) minmax(120px, 0.75fr) !important;
  flex: 1 1 360px !important;
  gap: 8px !important;
  min-width: 300px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls select,
body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 3px !important;
  font-size: 9px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls .magic-build-around-btn,
body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls .magic-generate-btn {
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.09em !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls button:not(.magic-generate-btn):not(.magic-build-around-btn) {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 11px !important;
  border-radius: 18px !important;
  font-size: 7px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #studio-workspace {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #graph-container {
  width: calc(100% - 16px) !important;
  height: calc(100vh - var(--axiom-approved-player) - 224px) !important;
  flex: 0 0 calc(100vh - var(--axiom-approved-player) - 224px) !important;
  min-height: 388px !important;
  margin: 0 8px 12px !important;
  padding: 132px 42px 60px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #graph-container::before {
  top: 72px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 100% 42px, 15% 100% !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-phase-band {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 62px !important;
  height: 62px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-phase-band div {
  min-height: 60px !important;
  padding: 9px 14px !important;
  border-right-style: solid !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-graph-hud {
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #graph-container canvas {
  width: 100% !important;
  height: 100% !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-chart-footer {
  min-height: 60px !important;
  height: 60px !important;
  padding: 0 14px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-chart-stats {
  margin-left: auto !important;
  margin-right: 220px !important;
}

body.studio-magic-mode #studio-active-view.graph-mode .magic-chart-stats span:last-child {
  display: none !important;
}

body.studio-magic-mode #studio-active-view.graph-mode #btn-view-studio-set {
  right: 14px !important;
  bottom: 9px !important;
  min-width: 190px !important;
  height: 42px !important;
  border-radius: 20px !important;
}

@media (max-width: 1180px) {
  body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls .studio-magic-build-pair {
    min-width: 270px !important;
  }

  body.studio-magic-mode #studio-active-view.graph-mode #studio-build-controls > div:first-child > div:not(.studio-magic-build-pair) {
    flex-basis: 72px !important;
  }
}

/* Keep the recoverable playlist-delete action above the persistent player.
   A bottom offset becomes unreliable when the app shell is font-scaled, so the
   viewport-relative top position is the stable contract. */
#playlist-undo-snackbar {
  top: calc(100vh - 178px) !important;
  bottom: auto !important;
}

#studio-start-view .command-action-card:first-child .command-card-kicker,
#studio-start-view .command-action-card:first-child .command-card-title,
#studio-start-view .command-action-card:first-child .command-card-desc,
#studio-start-view .command-action-card:first-child .command-card-guidance,
#studio-start-view .command-action-card:first-child .command-card-guidance span {
  color: #061000 !important;
  text-shadow: none !important;
}

#studio-start-view .command-action-card:first-child .command-card-desc,
#studio-start-view .command-action-card:first-child .command-card-guidance,
#studio-start-view .command-action-card:first-child .command-card-guidance span {
  color: rgba(6, 16, 0, 0.78) !important;
}

/* ==========================================================================
   PERFORMANCE APPROVAL RECOVERY — MAIN WORKSPACE + LIVE ASSIST
   The approved Performance design is intentionally information-dense: the
   next-move cards keep their reasons and controls, and the floating assistant
   remains a separate compact tool instead of flattening into the page.
   ========================================================================== */

#tab-content-performance {
  position: relative;
  padding: 20px 24px calc(var(--axiom-approved-player) + 8px) !important;
  background: #050706 !important;
}

#tab-content-performance > .flex:first-child {
  min-height: 76px !important;
  margin-bottom: 0 !important;
  padding: 0 0 14px !important;
}

#tab-content-performance > .flex:first-child > div:first-child p {
  margin-bottom: 6px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 8px !important;
  letter-spacing: 0.24em !important;
}

#tab-content-performance h2 {
  font-size: 54px !important;
  line-height: 0.9 !important;
}

#tab-content-performance > .flex:first-child > .flex {
  gap: 7px !important;
}

#tab-content-performance > .flex:first-child .performance-action {
  min-height: 36px !important;
  padding: 0 11px !important;
  border-radius: 3px !important;
  font-size: 7px !important;
  letter-spacing: 0.08em !important;
}

.performance-shell {
  grid-template-columns: minmax(342px, 0.78fr) minmax(0, 1.7fr) !important;
  height: calc(100vh - var(--axiom-approved-player) - 114px) !important;
  min-height: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: #050706 !important;
}

.performance-panel {
  border-radius: 0 !important;
  background: #050706 !important;
  box-shadow: none !important;
}

.performance-now-card {
  align-content: start !important;
  gap: 9px !important;
  padding: 14px 18px 0 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.13) !important;
  overflow: hidden !important;
}

.performance-now-card > div:first-child {
  min-width: 0;
}

.performance-now-track {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  min-height: 64px !important;
  align-items: center !important;
  gap: 13px !important;
}

.performance-now-track .artwork-fallback,
.performance-now-track .library-artwork,
.performance-now-track .recommendation-artwork {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  border-radius: 4px !important;
}

.performance-track-title {
  margin: 0 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 0.96 !important;
}

.performance-now-track .performance-meta-line {
  gap: 5px !important;
  margin-top: 8px !important;
}

.performance-meta-chip,
.performance-filter-chip {
  border-radius: 3px !important;
}

.performance-now-track .performance-meta-chip {
  padding: 4px 7px !important;
  font-size: 7px !important;
  letter-spacing: 0.06em !important;
}

.performance-cued-next {
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 3px !important;
}

.performance-gig-profile {
  margin-top: 9px !important;
  padding: 10px !important;
  border: 1px solid rgba(24, 216, 232, 0.4) !important;
  border-left: 4px solid var(--axiom-final-cyan) !important;
  border-radius: 0 !important;
  background: #081012 !important;
}

.performance-gig-profile-head > span {
  color: var(--axiom-final-cyan) !important;
  font-size: 10px !important;
  letter-spacing: 0.13em !important;
}

.performance-gig-profile .performance-filter-chip {
  min-height: 20px !important;
  padding: 3px 5px !important;
  font-size: 6px !important;
}

.performance-gig-profile-controls {
  margin-top: 8px !important;
}

.performance-gig-profile-controls select,
.performance-gig-profile-controls button {
  min-height: 32px !important;
  border-radius: 3px !important;
  font-size: 8px !important;
}

.performance-gig-profile-summary {
  margin-top: 7px !important;
  color: var(--axiom-final-cyan) !important;
  font-size: 6px !important;
}

.performance-signal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.performance-signal {
  min-height: 53px !important;
  padding: 9px 10px !important;
  border-radius: 0 !important;
  background: #090b0a !important;
}

.performance-signal:last-child {
  grid-column: 1 / -1 !important;
  min-height: 45px !important;
}

.performance-signal span {
  font-size: 6px !important;
}

.performance-signal strong {
  margin-top: 6px !important;
  font-size: 14px !important;
}

.performance-signal small {
  margin-top: 3px !important;
  color: var(--axiom-final-green) !important;
  font-size: 6px !important;
}

.performance-playing-bpm-control {
  min-height: 42px !important;
  padding: 7px 9px !important;
  border-radius: 0 !important;
  background: #090b0a !important;
}

.performance-now-card > .performance-audit-details,
.performance-now-card > .border-t {
  display: none !important;
}

.performance-now-card > div:has(> .performance-filter-row) {
  display: block !important;
  min-width: 0;
}

.performance-now-card > div:has(> .performance-filter-row) > p {
  margin: 0 0 7px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 7px !important;
  letter-spacing: 0.18em !important;
}

.performance-now-card > div:has(> .performance-filter-row) .performance-filter-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.performance-now-card > div:has(> .performance-filter-row) .performance-filter-chip {
  display: none !important;
}

#performance-filter-energy-up,
#performance-filter-energy-down,
#performance-filter-double-time,
#performance-filter-half-time {
  display: inline-flex !important;
  min-width: 0;
  min-height: 24px !important;
  align-items: center;
  justify-content: center;
  padding: 4px 5px !important;
  font-size: 6px !important;
  letter-spacing: 0.07em !important;
  white-space: nowrap;
}

.performance-now-card > .performance-playing-bpm-control {
  margin-top: 0 !important;
}

.performance-shell > section.performance-panel {
  padding: 14px 0 0 20px !important;
  overflow: hidden !important;
}

.performance-shell > section.performance-panel > .flex:first-child {
  min-height: 82px !important;
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

.performance-shell > section.performance-panel > .flex:first-child > div > p:first-child {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 8px !important;
}

.performance-shell > section.performance-panel > .flex:first-child > div > p:nth-child(2) {
  margin-top: 5px !important;
  font-size: 8px !important;
  letter-spacing: 0.1em !important;
}

.performance-lane-summary {
  gap: 6px !important;
  margin-top: 10px !important;
}

.performance-lane-summary span {
  padding: 5px 8px !important;
  border-radius: 3px !important;
  font-size: 7px !important;
}

.performance-suggestions {
  padding: 0 !important;
  overflow-y: auto !important;
}

.performance-section-heading {
  height: 24px !important;
  margin: 0 !important;
  padding-top: 7px !important;
  font-size: 7px !important;
}

.performance-suggestion-card,
.performance-suggestion-card.is-priority,
.performance-suggestion-card.is-selected,
.performance-suggestion-card:not(.is-priority):not(.is-selected) {
  grid-template-columns: 44px minmax(0, 1fr) 78px !important;
  min-height: 210px !important;
  align-items: start !important;
  gap: 11px !important;
  margin: 0 0 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 !important;
  background: #0a0d0b !important;
}

.performance-suggestion-card.is-priority,
.performance-suggestion-card.is-selected {
  border-color: rgba(24, 216, 232, 0.42) !important;
  border-left-color: var(--axiom-final-cyan) !important;
  background: #081116 !important;
}

.performance-suggestion-card.gig-serato {
  border-color: rgba(24, 216, 232, 0.42) !important;
  border-left-color: var(--axiom-final-cyan) !important;
  background: #081116 !important;
}

.performance-suggestion-card.gig-djay {
  border-color: rgba(255, 138, 31, 0.48) !important;
  border-left-color: var(--axiom-final-orange) !important;
  background: #160d07 !important;
}

.performance-suggestion-card .recommendation-artwork {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 3px !important;
}

.performance-suggestion-card .performance-rank {
  margin: 0 0 5px !important;
  font-size: 26px !important;
}

.performance-suggestion-card .performance-suggestion-title,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-suggestion-title {
  display: block !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 0.96 !important;
}

.performance-suggestion-card .performance-meta-line,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-meta-line {
  display: flex !important;
  gap: 5px !important;
  margin-top: 9px !important;
}

.performance-suggestion-card .performance-meta-chip {
  padding: 4px 6px !important;
  font-size: 7px !important;
}

.performance-suggestion-card .performance-bpm-readout,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-bpm-readout {
  display: flex !important;
  margin-top: 9px !important;
  padding: 7px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.performance-suggestion-card .performance-decision-line,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-decision-line {
  display: block !important;
  margin-top: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.performance-suggestion-card .performance-decision-line strong {
  font-size: 9px !important;
}

.performance-suggestion-card .performance-decision-line span,
.performance-suggestion-card.is-priority .performance-decision-line span {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 8px !important;
}

.performance-suggestion-card .performance-cue,
.performance-suggestion-card .axiom-role-fit,
.performance-suggestion-card.is-priority .performance-cue,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-cue,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .axiom-role-fit {
  display: flex !important;
}

.performance-suggestion-card .performance-suggestion-actions,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-suggestion-actions {
  display: flex !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

.performance-suggestion-card .performance-mini-btn {
  min-height: 23px !important;
  padding: 0 7px !important;
  font-size: 6px !important;
}

.performance-pick-stack {
  gap: 8px !important;
  min-width: 78px !important;
}

.performance-pick-btn,
.performance-suggestion-card:not(.is-priority):not(.is-selected) .performance-pick-btn {
  min-height: 31px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  font-size: 7px !important;
}

.performance-assist-activation {
  position: fixed;
  right: 18px;
  bottom: calc(var(--axiom-approved-player) + 14px);
  z-index: 180;
  display: grid;
  grid-template-columns: 50px 11px minmax(0, 1fr) 36px;
  width: 392px;
  min-height: 86px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 2px solid var(--axiom-final-green);
  border-radius: 8px;
  background: #090b09;
  box-shadow: 0 0 20px rgba(163, 255, 0, 0.24);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.performance-assist-activation:hover {
  background: #0c100b;
  box-shadow: 0 0 28px rgba(163, 255, 0, 0.34);
}

/*
 * The native macOS shell owns the floating Live Assist activation bar.
 * Keep the in-page control only for browser fallback so Performance never
 * presents two identical activation windows in the installed app.
 */
body.axiom-native-shell .performance-assist-activation {
  display: none !important;
}

.performance-assist-activation img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.performance-assist-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2cf000;
  box-shadow: 0 0 12px rgba(44, 240, 0, 0.72);
  animation: axiomPerformancePulse 1.8s ease-in-out infinite;
}

@keyframes axiomPerformancePulse {
  0%, 100% { opacity: 0.68; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
}

.performance-assist-copy {
  min-width: 0;
}

.performance-assist-copy small,
.performance-assist-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-assist-copy small {
  color: #a9afa8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.performance-assist-copy strong {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.performance-assist-chevron {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 19px;
}

@media (max-width: 1220px) {
  .performance-shell {
    grid-template-columns: minmax(315px, 0.8fr) minmax(0, 1.55fr) !important;
  }

  #tab-content-performance > .flex:first-child > .flex {
    flex-wrap: wrap !important;
  }

  .performance-assist-activation {
    width: 350px;
  }
}

/* Quick Start walkthrough — approved flat editorial composition. */
.axiom-arrival-overlay {
  padding: 22px !important;
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(14px) !important;
}

.axiom-arrival-card {
  width: min(1296px, calc(100vw - 44px)) !important;
  height: min(820px, calc(100vh - 44px)) !important;
  min-height: 660px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 3px !important;
  background:
    radial-gradient(circle at 46% 38%, rgba(163, 255, 0, 0.035), transparent 30%),
    #070907 !important;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.78) !important;
}

.axiom-arrival-card::before,
.axiom-arrival-card::after,
.axiom-step-main::before,
.axiom-step-main::after {
  display: none !important;
}

.axiom-walkthrough-frame {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(318px, 27vw, 370px) !important;
  grid-template-rows: minmax(0, 1fr) 98px !important;
  gap: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
}

.axiom-step-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.axiom-step-content {
  position: relative !important;
  height: 100% !important;
  padding: 36px 44px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

.axiom-walkthrough-brand-block {
  position: relative !important;
  z-index: 2 !important;
}

.axiom-walkthrough-brand {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.22em !important;
  color: #f4f5f2 !important;
}

.axiom-walkthrough-kicker {
  margin-top: 13px !important;
  color: var(--axiom-final-green) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

.axiom-step-ghost {
  position: absolute !important;
  z-index: 0 !important;
  left: 30px !important;
  top: 128px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(260px, 25vw, 360px) !important;
  font-weight: 400 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.035em !important;
  color: rgba(255, 255, 255, 0.075) !important;
  user-select: none !important;
}

.axiom-step-copy-block {
  position: relative !important;
  z-index: 2 !important;
  width: min(560px, calc(100% - 260px)) !important;
  margin: 48px 0 0 clamp(230px, 25vw, 300px) !important;
}

.axiom-step-eyebrow,
.axiom-step-counter {
  color: var(--axiom-final-green) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.axiom-arrival-title {
  margin-top: 14px !important;
  max-width: 540px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(74px, 7.4vw, 112px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.012em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.axiom-step-accent {
  display: block !important;
  width: 42px !important;
  height: 2px !important;
  margin-top: 22px !important;
  background: var(--axiom-final-cyan) !important;
  box-shadow: none !important;
}

.axiom-arrival-copy {
  max-width: 520px !important;
  margin-top: 22px !important;
  color: rgba(244, 245, 242, 0.7) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.axiom-step-modules {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  margin: auto 0 0 !important;
  padding: 0 0 22px !important;
}

.axiom-step-module {
  position: relative !important;
  min-height: 78px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.axiom-step-module:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: -22px !important;
  width: 16px !important;
  height: 16px !important;
  background: url("/static/icons/chevron-down.svg") center / 16px 16px no-repeat !important;
  filter: brightness(0) invert(1) opacity(0.72) !important;
  transform: rotate(-90deg) !important;
  pointer-events: none !important;
}

.axiom-step-module strong {
  margin-bottom: 12px !important;
  color: var(--axiom-final-green) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
}

.axiom-step-module span {
  color: rgba(244, 245, 242, 0.62) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.axiom-walkthrough-protection {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(244, 245, 242, 0.5) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

.axiom-walkthrough-protection::before {
  display: none !important;
}

.axiom-walkthrough-sidebar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090b09 !important;
  box-shadow: none !important;
}

.axiom-walkthrough-sidebar-head {
  height: 122px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 46px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(244, 245, 242, 0.62) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.axiom-walkthrough-steps {
  position: relative !important;
  display: grid !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  height: calc(100% - 122px) !important;
  margin: 0 !important;
}

.axiom-walkthrough-steps::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 65px !important;
  top: 50px !important;
  bottom: 50px !important;
  width: 1px !important;
  background: rgba(244, 245, 242, 0.26) !important;
}

.axiom-walkthrough-step {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  align-items: center !important;
  gap: 22px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 44px !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(244, 245, 242, 0.64) !important;
  box-shadow: none !important;
  transform: none !important;
}

.axiom-walkthrough-step:hover {
  background: rgba(255, 255, 255, 0.025) !important;
  color: #f4f5f2 !important;
}

.axiom-walkthrough-step.active {
  border-left-color: var(--axiom-final-green) !important;
  background: linear-gradient(90deg, rgba(163, 255, 0, 0.13), rgba(163, 255, 0, 0.04)) !important;
  color: var(--axiom-final-green) !important;
}

.axiom-walkthrough-step-number {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(244, 245, 242, 0.5) !important;
  border-radius: 50% !important;
  background: #090b09 !important;
  color: rgba(244, 245, 242, 0.72) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.axiom-walkthrough-step.active .axiom-walkthrough-step-number {
  border-color: var(--axiom-final-green) !important;
  background: var(--axiom-final-green) !important;
  color: #050605 !important;
  box-shadow: none !important;
}

.axiom-walkthrough-step-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.axiom-step-footer {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 0 44px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #080a08 !important;
}

.axiom-step-progress {
  gap: 15px !important;
}

.axiom-step-progress-dot {
  width: 54px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

.axiom-step-progress-dot.active {
  width: 54px !important;
  background: var(--axiom-final-green) !important;
  box-shadow: none !important;
}

.axiom-arrival-actions {
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

.axiom-arrival-primary,
.axiom-arrival-secondary {
  min-height: 48px !important;
  border-radius: 4px !important;
  padding: 0 30px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  box-shadow: none !important;
}

.axiom-arrival-primary {
  min-width: 190px !important;
  border: 1px solid var(--axiom-final-green) !important;
  background: var(--axiom-final-green) !important;
  color: #050605 !important;
}

.axiom-arrival-primary:hover {
  background: var(--axiom-final-green-hot) !important;
}

.axiom-arrival-secondary {
  min-width: 140px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  color: #f4f5f2 !important;
}

.axiom-arrival-secondary:hover:not(:disabled) {
  border-color: var(--axiom-final-green) !important;
  color: var(--axiom-final-green) !important;
}

.axiom-arrival-secondary:disabled {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(255, 255, 255, 0.22) !important;
}

@media (max-width: 1040px) {
  .axiom-walkthrough-frame {
    grid-template-columns: minmax(0, 1fr) 290px !important;
  }

  .axiom-step-content {
    padding: 30px 30px 22px !important;
  }

  .axiom-step-copy-block {
    width: min(500px, calc(100% - 180px)) !important;
    margin-left: 180px !important;
  }

  .axiom-step-ghost {
    left: 18px !important;
    font-size: 248px !important;
  }

  .axiom-arrival-title {
    font-size: clamp(64px, 8vw, 86px) !important;
  }

  .axiom-step-modules {
    gap: 18px !important;
  }

  .axiom-step-module:not(:last-child)::after {
    right: -17px !important;
  }

  .axiom-walkthrough-sidebar-head,
  .axiom-walkthrough-step {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .axiom-walkthrough-steps::before {
    left: 51px !important;
  }
}

@media (max-height: 780px) and (min-width: 821px) {
  .axiom-arrival-overlay {
    padding: 14px !important;
  }

  .axiom-arrival-card {
    width: min(1296px, calc(100vw - 28px)) !important;
    height: calc(100vh - 28px) !important;
    min-height: 0 !important;
  }

  .axiom-walkthrough-frame {
    grid-template-rows: minmax(0, 1fr) 84px !important;
  }

  .axiom-step-content {
    padding-top: 28px !important;
    padding-bottom: 16px !important;
  }

  .axiom-walkthrough-brand {
    font-size: 42px !important;
  }

  .axiom-walkthrough-kicker {
    margin-top: 10px !important;
  }

  .axiom-step-ghost {
    top: 112px !important;
    font-size: clamp(220px, 22vw, 300px) !important;
  }

  .axiom-step-copy-block {
    margin-top: 32px !important;
  }

  .axiom-arrival-title {
    margin-top: 10px !important;
    font-size: clamp(68px, 6.8vw, 92px) !important;
  }

  .axiom-step-accent {
    margin-top: 16px !important;
  }

  .axiom-arrival-copy {
    margin-top: 16px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .axiom-step-modules {
    gap: 22px !important;
    padding-bottom: 12px !important;
  }

  .axiom-step-module {
    min-height: 58px !important;
  }

  .axiom-step-module:not(:last-child)::after {
    top: 6px !important;
  }

  .axiom-step-module strong {
    margin-bottom: 8px !important;
  }

  .axiom-walkthrough-protection {
    padding-top: 10px !important;
    font-size: 9px !important;
  }

  .axiom-walkthrough-protection::before {
    top: 10px !important;
  }

  .axiom-walkthrough-sidebar-head {
    height: 96px !important;
  }

  .axiom-walkthrough-steps {
    height: calc(100% - 96px) !important;
  }

  .axiom-walkthrough-steps::before {
    top: 42px !important;
    bottom: 42px !important;
  }

  .axiom-step-footer {
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}

@media (max-width: 820px) {
  .axiom-arrival-card {
    height: calc(100vh - 28px) !important;
    width: calc(100vw - 28px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .axiom-walkthrough-frame {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 86px !important;
    height: auto !important;
  }

  .axiom-step-main,
  .axiom-walkthrough-sidebar,
  .axiom-step-footer {
    grid-column: 1 !important;
  }

  .axiom-step-main {
    grid-row: 1 !important;
    min-height: 560px !important;
    border-right: 0 !important;
  }

  .axiom-walkthrough-sidebar {
    grid-row: 2 !important;
  }

  .axiom-step-footer {
    grid-row: 3 !important;
    position: sticky !important;
    bottom: 0 !important;
    padding: 0 22px !important;
  }

  .axiom-walkthrough-sidebar-head {
    height: 70px !important;
  }

  .axiom-walkthrough-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    height: auto !important;
  }

  .axiom-walkthrough-steps::before {
    display: none !important;
  }

  .axiom-walkthrough-step {
    min-height: 76px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 8px !important;
    border-left: 0 !important;
    border-top: 2px solid transparent !important;
    text-align: center !important;
  }

  .axiom-walkthrough-step.active {
    border-top-color: var(--axiom-final-green) !important;
  }

  .axiom-step-module:not(:last-child)::after {
    display: none !important;
  }

  .axiom-arrival-secondary,
  .axiom-arrival-primary {
    min-width: 0 !important;
    padding: 0 18px !important;
  }
}

/* ---------- Approved Help button scale system ---------- */
:root {
  --axiom-help-accent: #a3ff00;
  --axiom-help-ink: #0c0f09;
  --axiom-help-ratio: 2.5;
}

.axiom-help-btn,
body.light-mode .axiom-help-btn {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: 1px solid var(--axiom-help-accent) !important;
  background: var(--axiom-help-accent) !important;
  color: var(--axiom-help-ink) !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  transition: filter 140ms ease, outline-color 140ms ease !important;
}

.axiom-help-btn:hover,
body.light-mode .axiom-help-btn:hover {
  border-color: var(--axiom-help-accent) !important;
  background: var(--axiom-help-accent) !important;
  color: var(--axiom-help-ink) !important;
  filter: brightness(1.08) !important;
  box-shadow: none !important;
  transform: none !important;
}

.axiom-help-btn:focus-visible {
  outline: 2px solid #f5ffe7 !important;
  outline-offset: 3px !important;
}

.axiom-help-btn--compact,
#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact,
#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn--compact,
body.light-mode #studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact,
body.light-mode #replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn--compact {
  width: 100px !important;
  min-width: 100px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 2px !important;
  background: var(--axiom-help-accent) !important;
  color: var(--axiom-help-ink) !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
}

#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact span,
body.light-mode #studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact span {
  color: var(--axiom-help-ink) !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

.axiom-help-btn--standard {
  width: 125px !important;
  min-width: 125px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 3px !important;
  font-size: 23px !important;
}

.axiom-help-btn--feature,
#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.light-mode #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature {
  width: 185px !important;
  min-width: 185px !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 26px !important;
  border-radius: 4px !important;
  background: var(--axiom-help-accent) !important;
  color: var(--axiom-help-ink) !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 33px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
  animation: none !important;
}

#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature::before,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature::before {
  content: none !important;
}

@media (max-width: 1180px) {
  .axiom-help-btn--feature,
  #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
  body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature {
    width: 160px !important;
    min-width: 160px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 22px !important;
    font-size: 29px !important;
  }
}

/* Review-only scale board. It uses the same production classes as the live controls. */
body.help-button-review-mode > :not(#help-button-scale-review):not(.library-guide-overlay):not(.workflow-overlay):not(.workflow-popover) {
  visibility: hidden !important;
}

#help-button-scale-review {
  position: fixed;
  inset: 0;
  z-index: 13000;
  overflow: auto;
  padding: 42px 48px 60px;
  background:
    linear-gradient(rgba(163, 255, 0, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 255, 0, 0.018) 1px, transparent 1px),
    #030604;
  background-size: 48px 48px;
  color: #f3f4f0;
}

.help-button-review-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(163, 255, 0, 0.34);
}

.help-button-review-header > div:first-child > span,
.help-button-review-copy > span {
  color: var(--axiom-help-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.help-button-review-header h1,
.help-button-review-copy h2 {
  margin: 4px 0 0;
  color: #f3f4f0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.help-button-review-header h1 {
  font-size: 58px;
  line-height: 0.94;
}

.help-button-review-header p,
.help-button-review-copy p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.5;
}

.help-button-review-header p {
  margin: 10px 0 0;
}

.help-button-review-key {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 20px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.help-button-review-key span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.help-button-review-key i {
  width: 8px;
  height: 8px;
  background: #a3ff00;
}

.help-button-review-key i.neutral { background: #a5a9a5; }
.help-button-review-key i.attention { background: #ff9f2f; }
.help-button-review-key i.danger { background: #ff4f55; }

.help-button-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
}

.help-button-review-card {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(300px, 1.18fr);
  min-height: 270px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(5, 9, 6, 0.84);
}

.help-button-review-card.feature-card,
.help-button-review-card.semantic-card {
  grid-column: 1 / -1;
}

.help-button-review-copy {
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.help-button-review-copy h2 {
  font-size: 38px;
}

.help-button-review-copy p {
  max-width: 420px;
  margin: 10px 0 22px;
}

.help-button-review-copy dl {
  display: flex;
  gap: 22px;
  margin: 0;
}

.help-button-review-copy dl div {
  display: grid;
  gap: 4px;
}

.help-button-review-copy dt {
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.help-button-review-copy dd {
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.help-button-review-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.012);
}

.help-button-review-stage.large-stage {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(163, 255, 0, 0.12) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(163, 255, 0, 0.12) 50%, transparent 50.2%),
    rgba(255, 255, 255, 0.012);
}

.help-button-review-actions,
.semantic-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.help-peer-btn {
  min-width: 100px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  background: transparent;
  color: #f3f4f0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-peer-btn.positive {
  border-color: var(--axiom-help-accent);
  background: var(--axiom-help-accent);
  color: var(--axiom-help-ink);
}

.help-peer-btn.attention {
  border-color: #ff9f2f;
  color: #ffb35c;
}

.help-peer-btn.danger {
  border-color: #ff4f55;
  color: #ff7479;
}

.help-peer-btn.more {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

@media (max-width: 980px) {
  #help-button-scale-review {
    padding: 28px 20px 48px;
  }

  .help-button-review-header,
  .help-button-review-card {
    grid-template-columns: 1fr;
  }

  .help-button-review-header {
    align-items: start;
    flex-direction: column;
  }

  .help-button-review-grid {
    grid-template-columns: 1fr;
  }

  .help-button-review-card,
  .help-button-review-card.feature-card,
  .help-button-review-card.semantic-card {
    grid-column: auto;
  }

  .help-button-review-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   STUDIO SET START — APPROVED AXIOM 2.0 DIRECTION
   The path cards select first and commit only from their dedicated CTA.
   ========================================================================== */

body:has(#studio-start-view:not(.hidden)) {
  --axiom-approved-player: 126px;
}

body:has(#studio-start-view:not(.hidden)) #audio-player.library-player-upgrade {
  height: var(--axiom-approved-player) !important;
}

#studio-start-view.command-launch-shell {
  grid-template-rows: minmax(240px, 29vh) minmax(236px, 26vh) minmax(190px, 1fr) !important;
  padding-right: 24px !important;
  padding-bottom: 26px !important;
  padding-left: 30px !important;
}

#studio-start-view .command-launch-hero > div:not(.command-terrain):not(.command-status-readout) {
  width: 100% !important;
}

@media (min-width: 1181px) {
  #studio-start-view .command-terrain {
    width: calc(100% + 80px) !important;
    transform: translateX(-80px) !important;
  }
}

#studio-start-view .command-action-grid {
  position: relative !important;
  height: calc(100% + 21px) !important;
  margin-top: 5px !important;
}

#studio-start-view .command-action-card,
#studio-start-view .command-action-card.primary,
#studio-start-view .command-action-card.secondary {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  padding: clamp(25px, 2.2vw, 34px) clamp(22px, 2.3vw, 34px) !important;
  cursor: pointer !important;
  transition: background 160ms ease, color 160ms ease, filter 160ms ease !important;
}

#studio-start-view .command-action-card:first-child,
#studio-start-view .command-action-card:last-child,
#studio-start-view .command-action-card:not(.is-selected) {
  background: #080a08 !important;
  color: #f4f5f2 !important;
}

#studio-start-view .command-action-card.is-selected,
#studio-start-view .command-action-card:first-child.is-selected,
#studio-start-view .command-action-card:last-child.is-selected {
  background: linear-gradient(110deg, #9cf000 0%, #b9ff23 100%) !important;
  color: #061000 !important;
}

#studio-start-view .command-action-card:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#studio-start-view .command-action-card:first-child {
  padding-left: 24px !important;
}

#studio-start-view .command-action-card:focus-visible {
  outline: 2px solid var(--axiom-final-cyan) !important;
  outline-offset: -3px !important;
}

#studio-start-view .command-path-radio {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 40px 0 0 !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}

#studio-start-view .command-path-radio::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  transform: scale(0) !important;
  transition: transform 120ms ease !important;
}

#studio-start-view .command-path-radio:checked::before {
  transform: scale(1) !important;
}

#studio-start-view .command-path-radio:focus-visible {
  outline: 2px solid var(--axiom-final-cyan) !important;
  outline-offset: 3px !important;
}

#studio-start-view .command-card-copy {
  align-self: start !important;
}

#studio-start-view .command-card-kicker {
  position: relative !important;
  margin-bottom: 20px !important;
  padding-left: 20px !important;
}

#studio-start-view .command-card-kicker::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--axiom-final-green) !important;
  transform: translateY(-50%) !important;
}

#studio-start-view .command-action-card.is-selected .command-card-kicker::before {
  background: var(--axiom-final-cyan) !important;
}

#studio-start-view .command-action-card:not(.is-selected) .command-card-kicker,
#studio-start-view .command-action-card:not(.is-selected) .command-card-title {
  color: #f4f5f2 !important;
  text-shadow: none !important;
}

#studio-start-view .command-action-card:not(.is-selected) .command-card-desc,
#studio-start-view .command-action-card:not(.is-selected) .command-card-guidance,
#studio-start-view .command-action-card:not(.is-selected) .command-card-guidance span {
  color: rgba(244, 245, 242, 0.72) !important;
}

#studio-start-view .command-action-card.is-selected .command-card-kicker,
#studio-start-view .command-action-card.is-selected .command-card-title {
  color: #061000 !important;
  text-shadow: none !important;
}

#studio-start-view .command-action-card.is-selected .command-card-desc,
#studio-start-view .command-action-card.is-selected .command-card-guidance,
#studio-start-view .command-action-card.is-selected .command-card-guidance span {
  color: rgba(6, 16, 0, 0.82) !important;
}

#studio-start-view .command-card-guidance > span::before,
#studio-start-view .command-action-card:last-child .command-card-guidance > span::before {
  background: var(--axiom-final-green) !important;
}

#studio-start-view .command-action-card.is-selected .command-card-guidance > span::before {
  background: var(--axiom-final-cyan) !important;
}

#studio-start-view .command-card-cta,
#studio-start-view #btn-upload-csv.command-card-cta {
  align-self: center !important;
  margin-top: 38px !important;
  border-color: rgba(163, 255, 0, 0.76) !important;
  background: transparent !important;
  color: var(--axiom-final-green) !important;
  cursor: pointer !important;
}

#studio-start-view .command-action-card.is-selected .command-card-cta,
#studio-start-view .command-action-card.is-selected #btn-upload-csv.command-card-cta {
  border-color: #050605 !important;
  background: #050605 !important;
  color: #f4f5f2 !important;
}

#studio-start-view .command-card-cta:hover,
#studio-start-view .command-card-cta:focus-visible {
  filter: brightness(1.16) !important;
}

#studio-start-view .command-path-or {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(244, 245, 242, 0.65) !important;
  border-radius: 50% !important;
  background: #070907 !important;
  color: #f4f5f2 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

#studio-start-view .command-path-or.hidden {
  display: none !important;
}

#studio-start-view .build-night-panel {
  display: grid !important;
  grid-template-columns: minmax(330px, 0.78fr) minmax(600px, 1.22fr) !important;
  height: calc(100% - 27px) !important;
  min-height: 0 !important;
  margin-top: 26px !important;
  border: 0 !important;
  background: transparent !important;
}

#studio-start-view .build-night-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 12px clamp(34px, 4vw, 64px) 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translateY(-10px) !important;
}

#studio-start-view .build-night-kicker {
  color: #f4f5f2 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#studio-start-view .build-night-title {
  margin: 8px 0 0 !important;
  color: #f4f5f2 !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(43px, 4vw, 57px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

#studio-start-view .build-night-text {
  max-width: 470px !important;
  margin: 12px 0 0 !important;
  color: rgba(244, 245, 242, 0.69) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

#studio-start-view .build-night-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#studio-start-view .build-night-card {
  min-height: 0 !important;
  padding: clamp(15px, 1.5vw, 23px) clamp(14px, 1.4vw, 21px) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#studio-start-view .build-night-card:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#studio-start-view .build-night-card:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

#studio-start-view .build-night-card-copy > span {
  display: block !important;
  -webkit-line-clamp: unset !important;
}

#studio-start-view .build-night-card-copy > .build-night-settings,
#studio-start-view .build-night-card-copy > .build-night-start {
  display: none !important;
}

@media (max-height: 950px) and (min-height: 781px) {
  body:has(#studio-start-view:not(.hidden)) {
    --axiom-approved-player: 108px;
  }

  #studio-start-view .build-night-panel {
    height: 211px !important;
  }
}

@media (max-height: 780px), (max-width: 1180px) {
  #studio-start-view .command-path-radio {
    margin-top: 30px !important;
  }

  #studio-start-view .command-card-kicker {
    margin-bottom: 12px !important;
  }

  #studio-start-view .command-card-cta,
  #studio-start-view #btn-upload-csv.command-card-cta {
    margin-top: 28px !important;
  }

  #studio-start-view .build-night-panel {
    grid-template-columns: 1fr !important;
  }

  #studio-start-view .build-night-copy {
    display: none !important;
  }

  #studio-start-view .build-night-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
  }

  #studio-start-view .build-night-card {
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 0 !important;
  }

  #studio-start-view .build-night-card:last-child {
    border-right: 0 !important;
  }
}

/* Build The Night uses the full AXIOM 2.0 mission-card anatomy: icon,
   room outcome, working defaults, and a clear Library destination. */
#studio-start-view .build-night-panel {
  display: block !important;
  height: 188px !important;
  margin-top: 44px !important;
}

#studio-start-view .build-night-copy {
  display: none !important;
}

#studio-start-view .build-night-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  width: 100% !important;
  height: 100% !important;
  background: #080a08 !important;
}

#studio-start-view .build-night-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 20px 20px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: 0 !important;
  background: #080a08 !important;
  color: var(--axiom-final-green) !important;
  transition: background 150ms ease, box-shadow 150ms ease !important;
}

#studio-start-view .build-night-card:last-child {
  border-right: 0 !important;
}

#studio-start-view .build-night-card:hover,
#studio-start-view .build-night-card:focus-visible {
  background: #141a12 !important;
  box-shadow: inset 0 3px 0 var(--axiom-final-green) !important;
  outline: 0 !important;
}

#studio-start-view .build-night-icon {
  flex: 0 0 auto !important;
  width: 33px !important;
  height: 33px !important;
}

#studio-start-view .build-night-card-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#studio-start-view .build-night-card strong {
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
}

#studio-start-view .build-night-card-copy > span:not(.build-night-settings):not(.build-night-start) {
  display: block !important;
  margin-top: 0 !important;
  overflow: visible !important;
  color: rgba(244, 245, 242, 0.64) !important;
  font-size: 12px !important;
  line-height: 1.34 !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

#studio-start-view .build-night-card small {
  display: none !important;
}

#studio-start-view .build-night-card-copy > .build-night-settings {
  order: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: auto !important;
  overflow: visible !important;
}

#studio-start-view .build-night-settings b {
  padding: 4px 6px !important;
  border: 1px solid rgba(163, 255, 0, 0.28) !important;
  border-radius: 3px !important;
  color: #c8d4c4 !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

#studio-start-view .build-night-card-copy > .build-night-start {
  order: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 2px !important;
  overflow: visible !important;
  color: var(--axiom-final-green) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  -webkit-line-clamp: unset !important;
}

@media (max-height: 780px) {
  #studio-start-view .build-night-panel {
    height: 84px !important;
    margin-top: 0 !important;
  }

  #studio-start-view .build-night-card {
    gap: 7px !important;
    padding: 11px 12px !important;
  }

  #studio-start-view .build-night-icon {
    width: 24px !important;
    height: 24px !important;
  }

  #studio-start-view .build-night-card-copy > .build-night-settings,
  #studio-start-view .build-night-card small {
    display: none !important;
  }

  #studio-start-view .build-night-card-copy > .build-night-start {
    margin-top: auto !important;
  }
}

/* ========================================================================== 
   GLOBAL SIDEBAR — APPROVED EDITORIAL RAIL
   Axiom Start lives in the neutral wordmark; navigation and live status stay
   connected to the existing application handlers and data.
   ========================================================================== */

#axiom-sidebar.axiom-sidebar {
  width: 18rem !important;
  min-width: 18rem !important;
  border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: #0e100e !important;
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

#axiom-sidebar .axiom-sidebar-brand-row {
  flex: 0 0 132px;
  min-height: 132px;
  padding: 28px 34px 24px 40px !important;
  gap: 18px;
}

#axiom-start-button.axiom-start-wordmark {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f6f3;
  font-family: "Bebas Neue", sans-serif;
  font-size: 47px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: none;
}

#axiom-start-button.axiom-start-wordmark:hover,
#axiom-start-button.axiom-start-wordmark:active,
#axiom-start-button.axiom-start-wordmark[aria-current="page"] {
  border: 0;
  background: transparent;
  color: #f5f6f3;
  filter: none;
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

#axiom-start-button.axiom-start-wordmark:focus-visible {
  outline: 1px solid rgba(245, 246, 243, 0.62);
  outline-offset: 6px;
}

#axiom-sidebar .axiom-sidebar-utilities {
  flex: 0 0 auto;
  gap: 8px !important;
}

#axiom-sidebar .axiom-sidebar-utilities .refresh-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.33) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.12) !important;
  color: rgba(245, 246, 243, 0.68) !important;
  box-shadow: none !important;
}

#axiom-sidebar .axiom-sidebar-utilities .refresh-icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.62) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #f5f6f3 !important;
  transform: none !important;
}

#axiom-sidebar .axiom-sidebar-utilities .refresh-icon-btn:focus-visible {
  outline: 2px solid var(--axiom-final-green) !important;
  outline-offset: 3px !important;
}

#axiom-sidebar .axiom-sidebar-nav {
  margin-top: 0 !important;
  padding: 10px 0 18px !important;
  gap: 0 !important;
}

#axiom-sidebar .axiom-sidebar-nav-item {
  position: relative;
  min-height: 64px;
  padding: 0 38px 0 40px !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f3f4f1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.16em !important;
  text-align: left;
  text-transform: uppercase;
  box-shadow: none !important;
}

#axiom-sidebar .axiom-sidebar-nav-item > div {
  min-width: 0;
  gap: 22px !important;
}

#axiom-sidebar .axiom-sidebar-nav-item svg {
  flex: 0 0 23px;
  width: 23px !important;
  height: 23px !important;
  color: rgba(245, 246, 243, 0.56) !important;
  opacity: 1 !important;
  filter: none !important;
  stroke-width: 1.75;
}

#axiom-sidebar .axiom-sidebar-nav-item > div > span:not(#fav-sidebar-badge) {
  color: #f3f4f1 !important;
}

#axiom-sidebar .axiom-sidebar-nav-item > span:last-child:not(.axiom-sidebar-nav-label) {
  display: none !important;
}

#axiom-sidebar .axiom-sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  color: #ffffff !important;
}

#axiom-sidebar .axiom-sidebar-nav-item:hover svg {
  color: rgba(255, 255, 255, 0.84) !important;
}

#axiom-sidebar .axiom-sidebar-nav-item:focus-visible {
  outline: 2px solid rgba(163, 255, 0, 0.78) !important;
  outline-offset: -4px !important;
}

#axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] {
  background: rgba(92, 145, 25, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 0 0 var(--axiom-final-green),
    inset 0 1px 0 rgba(163, 255, 0, 0.48),
    inset 0 -1px 0 rgba(163, 255, 0, 0.48) !important;
}

#axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg {
  color: var(--axiom-final-green) !important;
  filter: drop-shadow(0 0 7px rgba(163, 255, 0, 0.66)) !important;
}

#axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] > div > span:not(#fav-sidebar-badge) {
  color: #ffffff !important;
}

body:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"],
body.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] {
  background: transparent !important;
  box-shadow: none !important;
}

body:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg,
body.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg {
  color: rgba(245, 246, 243, 0.56) !important;
  filter: none !important;
}

#axiom-sidebar #fav-sidebar-badge {
  margin-left: auto;
  border-radius: 2px !important;
  background: var(--axiom-final-green) !important;
  color: #071005 !important;
}

#axiom-sidebar .axiom-sidebar-track-dock {
  display: flex !important;
  flex: 0 0 98px;
  align-items: center !important;
  gap: 12px !important;
  min-height: 98px;
  margin: 0 !important;
  padding: 0 34px 0 40px !important;
  border: 0 !important;
  border-top: 2px solid var(--axiom-final-green) !important;
  border-radius: 0 !important;
  background: #111611 !important;
  box-shadow: inset 0 14px 30px rgba(104, 162, 29, 0.08) !important;
  cursor: default;
  transition: background 160ms ease, box-shadow 160ms ease !important;
}

#axiom-sidebar .axiom-sidebar-track-count,
#axiom-sidebar .axiom-sidebar-track-unit {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

#axiom-sidebar .axiom-sidebar-track-count {
  color: var(--axiom-final-green) !important;
}

#axiom-sidebar .axiom-sidebar-track-unit {
  color: #f5f6f3 !important;
}

#axiom-sidebar .axiom-sidebar-track-hint {
  align-self: center;
  margin-left: auto;
  color: var(--axiom-final-green) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 160ms ease;
}

#axiom-sidebar .axiom-sidebar-engine {
  flex: 0 0 var(--axiom-approved-player, 108px);
  min-height: var(--axiom-approved-player, 108px);
  margin: 0 !important;
  padding: 0 40px !important;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #0b0d0b;
}

#axiom-sidebar #lib-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(245, 246, 243, 0.5) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 0.1em !important;
  white-space: nowrap;
}

#axiom-sidebar #lib-status::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--axiom-final-green);
  box-shadow: 0 0 8px rgba(163, 255, 0, 0.35);
}

#axiom-sidebar #lib-status span {
  color: rgba(245, 246, 243, 0.72) !important;
}

body.light-mode #axiom-sidebar.axiom-sidebar {
  background: #0e100e !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0 !important;
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.55) !important;
}

body.light-mode #axiom-sidebar :is(.axiom-start-wordmark, .axiom-sidebar-nav-item, .axiom-sidebar-track-unit) {
  color: #f5f6f3 !important;
}

body.light-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] {
  border: 0 !important;
  background: rgba(92, 145, 25, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 0 0 var(--axiom-final-green),
    inset 0 1px 0 rgba(163, 255, 0, 0.48),
    inset 0 -1px 0 rgba(163, 255, 0, 0.48) !important;
}

body.light-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg {
  color: var(--axiom-final-green) !important;
  filter: drop-shadow(0 0 7px rgba(163, 255, 0, 0.66)) !important;
}

body.light-mode:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"],
body.light-mode.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.light-mode:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg,
body.light-mode.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-item[data-nav-state="active"] svg {
  color: rgba(245, 246, 243, 0.56) !important;
  filter: none !important;
}

body.light-mode #axiom-sidebar #tracks-drop-zone {
  border: 0 !important;
  border-top: 2px solid var(--axiom-final-green) !important;
  border-radius: 0 !important;
  background: #111611 !important;
  box-shadow: inset 0 14px 30px rgba(104, 162, 29, 0.08) !important;
}

body.light-mode #axiom-sidebar #tracks-drop-zone #lib-track-count-val {
  color: var(--axiom-final-green) !important;
}

body.light-mode #axiom-sidebar #tracks-drop-zone .axiom-sidebar-track-unit {
  color: #f5f6f3 !important;
}

body.light-mode #axiom-sidebar #lib-status,
body.light-mode #axiom-sidebar #lib-status span {
  background: transparent !important;
  color: rgba(245, 246, 243, 0.58) !important;
}

@media (max-height: 780px) and (min-width: 769px) {
  #axiom-sidebar .axiom-sidebar-brand-row {
    flex-basis: 102px;
    min-height: 102px;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  #axiom-sidebar .axiom-sidebar-nav {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
  }

  #axiom-sidebar .axiom-sidebar-nav-item {
    min-height: 50px;
  }

  #axiom-sidebar .axiom-sidebar-track-dock {
    flex-basis: 68px;
    min-height: 68px;
  }

  #axiom-sidebar .axiom-sidebar-engine {
    flex-basis: var(--axiom-approved-player, 108px);
    min-height: var(--axiom-approved-player, 108px);
  }

  #studio-start-view .build-night-card {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  #studio-start-view .build-night-icon {
    display: block !important;
    align-self: center !important;
    width: 24px !important;
    height: 24px !important;
  }

  #studio-start-view .build-night-card-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #studio-start-view .build-night-card strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #studio-start-view .build-night-card-copy > span:not(.build-night-start),
  #studio-start-view .build-night-card-copy > .build-night-settings,
  #studio-start-view .build-night-card small {
    display: none !important;
  }

  #studio-start-view .build-night-card-copy > .build-night-start {
    display: flex !important;
    margin-top: 0 !important;
    font-size: 9px !important;
  }
}

@media (max-width: 1180px) and (min-width: 769px) {
  #studio-start-view .build-night-panel {
    height: 96px !important;
    margin-top: 0 !important;
  }

  #studio-start-view .build-night-card {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #studio-start-view .build-night-card .build-night-icon {
    display: block !important;
    align-self: center !important;
    width: 26px !important;
    height: 26px !important;
  }

  #studio-start-view .build-night-card .build-night-card-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  #studio-start-view .build-night-card .build-night-card-copy strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #studio-start-view .build-night-card .build-night-card-copy > span:not(.build-night-start),
  #studio-start-view .build-night-card .build-night-card-copy > .build-night-settings,
  #studio-start-view .build-night-card .build-night-card-copy > small {
    display: none !important;
  }

  #studio-start-view .build-night-card .build-night-card-copy > .build-night-start {
    display: flex !important;
    margin-top: 0 !important;
    font-size: 9px !important;
  }
}

/* ========================================================================== */
/* AXIOM START MISSION MARKS + SIDEBAR GROUPS + DJ SOFTWARE HANDOFF REVIEW     */
/* ========================================================================== */

#studio-start-view .build-night-card {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
}

#studio-start-view .build-night-card .build-night-icon {
  display: block !important;
  align-self: start !important;
  width: 42px !important;
  height: 36px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}

#axiom-sidebar .axiom-sidebar-nav {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

#axiom-sidebar .axiom-sidebar-nav::-webkit-scrollbar {
  display: none;
}

#axiom-sidebar .axiom-sidebar-nav-group {
  flex: 0 0 auto;
  width: 100%;
}

/* The Studio counter belongs to the 64px Studio row, not the full group.
   Keep it pinned while the Magic Set submenu increases the group height. */
#axiom-sidebar #studio-sidebar-tools-container {
  --axiom-studio-nav-row-height: 64px;
}

#axiom-sidebar #studio-tools-dropdown-btn {
  top: calc(var(--axiom-studio-nav-row-height) / 2) !important;
}

/* Export uses the same counter pattern. Keep 03 attached to the Export row
   while its three-option submenu expands beneath it. */
#axiom-sidebar #sidebar-export-group {
  --axiom-export-nav-row-height: 64px;
}

#axiom-sidebar #sidebar-export-dropdown-btn {
  top: calc(var(--axiom-export-nav-row-height) / 2) !important;
}

#axiom-sidebar .axiom-sidebar-counter-menu-btn {
  min-width: 39px;
  height: 25px;
  justify-content: center;
  border: 1px solid rgba(163, 255, 0, 0.2) !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.24) !important;
  color: rgba(163, 255, 0, 0.82) !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  opacity: 0.78;
}

#axiom-sidebar .axiom-sidebar-counter-menu-btn:hover,
#axiom-sidebar .axiom-sidebar-counter-menu-btn[aria-expanded="true"] {
  border-color: rgba(163, 255, 0, 0.62) !important;
  background: rgba(163, 255, 0, 0.1) !important;
  color: #a3ff00 !important;
  opacity: 1;
}

#axiom-sidebar .axiom-sidebar-counter-menu-btn svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

#axiom-sidebar .axiom-sidebar-counter-menu-btn.hidden {
  display: none !important;
}

#axiom-sidebar .axiom-sidebar-nav-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 20px;
}

#axiom-sidebar .axiom-sidebar-nav-label > span {
  color: #e0e0e0 !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#axiom-sidebar .axiom-sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  opacity: 0.52;
  filter: grayscale(1) invert(1) brightness(0.82);
  transition: opacity 160ms ease, filter 160ms ease;
}

#axiom-sidebar .axiom-sidebar-nav-item:hover .axiom-sidebar-nav-icon,
#axiom-sidebar .axiom-sidebar-nav-group.is-expanded .axiom-sidebar-nav-icon {
  opacity: 1;
}

#axiom-sidebar .axiom-sidebar-menu-arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  opacity: 0.48;
  filter: invert(1);
  transition: transform 160ms ease, opacity 160ms ease;
}

#axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item {
  background: rgba(92, 145, 25, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 0 0 var(--axiom-final-green),
    inset 0 1px 0 rgba(163, 255, 0, 0.48),
    inset 0 -1px 0 rgba(163, 255, 0, 0.48) !important;
}

/* Axiom Start keeps ordinary route selections neutral, but an open utility
   group is an intentional live selection and must retain the standard state. */
body:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item,
body.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item,
body.light-mode:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item,
body.light-mode.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item {
  background: rgba(92, 145, 25, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 0 0 var(--axiom-final-green),
    inset 0 1px 0 rgba(163, 255, 0, 0.48),
    inset 0 -1px 0 rgba(163, 255, 0, 0.48) !important;
}

/* Export is a selected sidebar feature, not just an open menu. Keep the same
   active treatment after its submenu closes or an export option is chosen. */
body:has(#studio-start-view:not(.hidden)) #axiom-sidebar #tab-btn-export[data-nav-state="active"],
body.axiom-start-mode #axiom-sidebar #tab-btn-export[data-nav-state="active"],
body.light-mode:has(#studio-start-view:not(.hidden)) #axiom-sidebar #tab-btn-export[data-nav-state="active"],
body.light-mode.axiom-start-mode #axiom-sidebar #tab-btn-export[data-nav-state="active"] {
  background: rgba(92, 145, 25, 0.24) !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 0 0 var(--axiom-final-green),
    inset 0 1px 0 rgba(163, 255, 0, 0.48),
    inset 0 -1px 0 rgba(163, 255, 0, 0.48) !important;
}

#axiom-sidebar #tab-btn-export[data-nav-state="active"] .axiom-sidebar-nav-label > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#axiom-sidebar #tab-btn-export[data-nav-state="active"] .axiom-sidebar-nav-icon {
  opacity: 1;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%) drop-shadow(0 0 7px rgba(163, 255, 0, 0.66));
}

#axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item .axiom-sidebar-nav-label > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item .axiom-sidebar-nav-icon {
  opacity: 1;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%) drop-shadow(0 0 7px rgba(163, 255, 0, 0.66));
}

#axiom-sidebar .axiom-sidebar-nav-group.is-expanded .axiom-sidebar-menu-arrow {
  opacity: 1;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%);
}

#axiom-sidebar .axiom-sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 5px 14px 8px 43px;
  border-left: 1px solid rgba(163, 255, 0, 0.42);
  background: #090b09;
}

#axiom-sidebar .axiom-sidebar-submenu.hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Shared Focus Deck selected-track system
   Library, Studio, and Matching Songs deliberately share this one state.
   -------------------------------------------------------------------------- */

.axiom-focus-deck-row {
  --focus-deck-marker-width: 44px;
  --focus-deck-lime: #a3ff00;
  --focus-deck-ink: #071005;
  position: relative;
}

.axiom-focus-marker {
  display: none;
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--focus-deck-marker-width);
  z-index: 28;
  align-items: center;
  justify-content: center;
  background: var(--focus-deck-lime);
  color: var(--focus-deck-ink);
  box-shadow:
    inset 5px 0 0 #82d900,
    inset -1px 0 0 rgba(7, 16, 5, 0.38);
  pointer-events: none;
}

.axiom-focus-marker img {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.axiom-focus-marker > span {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 8px;
  color: var(--focus-deck-ink) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.axiom-focus-deck-row.selected .axiom-focus-marker,
.axiom-focus-deck-row.active-suggestion .axiom-focus-marker {
  display: flex;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected,
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected,
#modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.selected,
#modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.active-suggestion {
  transform: none !important;
  border: 0 !important;
  border-top: 2px solid var(--focus-deck-lime) !important;
  border-right: 1px solid rgba(163, 255, 0, 0.52) !important;
  border-bottom: 2px solid var(--focus-deck-lime) !important;
  border-radius: 2px !important;
  background:
    linear-gradient(90deg, rgba(13, 20, 13, 0.995), rgba(7, 10, 8, 0.995) 62%, rgba(12, 16, 11, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(163, 255, 0, 0.12),
    0 0 0 1px rgba(163, 255, 0, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(163, 255, 0, 0.08) !important;
  overflow: hidden !important;
  isolation: isolate;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected {
  min-height: 112px !important;
  padding-left: 58px !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected {
  grid-template-columns: minmax(300px, 1fr) minmax(70px, 0.2fr) minmax(78px, 0.2fr) minmax(92px, 0.2fr) 128px 44px !important;
  min-height: 104px !important;
  padding: 12px 16px 12px 58px !important;
}

body.matching-songs-left #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected {
  grid-template-columns: minmax(390px, 1fr) minmax(70px, 0.2fr) minmax(78px, 0.2fr) minmax(92px, 0.2fr) 44px !important;
}

#modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.selected,
#modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.active-suggestion {
  min-height: 112px;
  padding-left: 58px !important;
}

.axiom-focus-deck-row.selected::before,
.axiom-focus-deck-row.selected::after,
.axiom-focus-deck-row.active-suggestion::before,
.axiom-focus-deck-row.active-suggestion::after {
  opacity: 0 !important;
}

.axiom-focus-deck-row.selected :is(.library-track-title, .studio-row-title, .anchor-suggestion-title),
.axiom-focus-deck-row.active-suggestion .anchor-suggestion-title {
  color: #ffffff !important;
  text-decoration-line: underline;
  text-decoration-color: var(--focus-deck-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-shadow: none !important;
}

.axiom-focus-deck-row.selected :is(.library-track-artist, .studio-row-artist, .anchor-suggestion-artist),
.axiom-focus-deck-row.active-suggestion .anchor-suggestion-artist {
  color: rgba(245, 247, 242, 0.76) !important;
}

.axiom-focus-deck-row.selected :is(.library-artwork, .studio-track-artwork, .anchor-suggestion-art),
.axiom-focus-deck-row.active-suggestion .anchor-suggestion-art {
  border-color: rgba(163, 255, 0, 0.72) !important;
  background: #030503 !important;
  box-shadow:
    0 0 0 5px rgba(3, 5, 3, 0.82),
    0 0 22px rgba(163, 255, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.46) !important;
}

.axiom-focus-deck-row.selected .library-bpm-value {
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  box-shadow: none !important;
}

.axiom-focus-deck-row.selected .library-bpm-tools,
.axiom-focus-deck-row.selected .library-meta-line {
  color: rgba(245, 247, 242, 0.66) !important;
}

.axiom-focus-deck-row.selected .library-add-btn,
.axiom-focus-deck-row.selected .studio-smart-btn,
.axiom-focus-deck-row.selected .anchor-suggestion-add,
.axiom-focus-deck-row.active-suggestion .anchor-suggestion-add {
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
  color: var(--focus-deck-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 0 20px rgba(163, 255, 0, 0.20) !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-metric {
  border-left: 0 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .transition-badge.energy-spine-node {
  border: 2px solid var(--focus-deck-lime) !important;
  background: var(--focus-deck-ink) !important;
  color: var(--focus-deck-lime) !important;
  box-shadow:
    0 0 0 4px rgba(163, 255, 0, 0.11),
    0 0 24px rgba(163, 255, 0, 0.48),
    inset 0 0 14px rgba(163, 255, 0, 0.10) !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .transition-node-ripple {
  opacity: 0.16;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .drag-handle {
  position: absolute;
  left: 12px;
  top: 7px;
  width: 20px;
  padding: 0 !important;
  color: var(--focus-deck-ink) !important;
  opacity: 0.78;
  z-index: 34;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .drag-handle svg {
  width: 18px;
  height: 18px;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-remove-btn {
  left: 13px !important;
  /* Keep Remove in its own lane: selection tick above, label below. */
  top: 58px;
  bottom: auto;
  width: 18px !important;
  height: 18px !important;
  color: var(--focus-deck-ink) !important;
  opacity: 0;
  z-index: 34;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected:hover .studio-remove-btn,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected:focus-within .studio-remove-btn {
  opacity: 0.72;
}

.axiom-focus-deck-row.selected .fav-star-btn,
.axiom-focus-deck-row.active-suggestion .fav-star-btn {
  color: rgba(255, 255, 255, 0.46) !important;
}

/* These surface-specific selectors intentionally outrank the retired full-lime
   selected-row rules that still serve older, non-cockpit layouts above. */
#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected .library-track-title,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-row-title,
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 4px;
  color: #ffffff !important;
  border-bottom: 2px solid var(--focus-deck-lime) !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected :is(
  .library-track-artist,
  .library-meta-line,
  .library-meta-line span,
  .library-bpm-tools,
  .library-bpm-tools button
),
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected :is(
  .studio-row-artist,
  .studio-transition-tagline,
  .studio-metric,
  .studio-metric small
),
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-artist,
  .anchor-suggestion-tags,
  .anchor-suggestion-tags span,
  .anchor-suggestion-metric span,
  .anchor-suggestion-key span,
  .anchor-suggestion-match span
) {
  color: rgba(245, 247, 242, 0.70) !important;
  text-shadow: none !important;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected :is(
  .library-dna-chip,
  .library-year-chip,
  .library-health-chip
) {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected .library-bpm-value,
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-bpm > strong {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected .library-add-btn,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-smart-btn,
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-add {
  color: var(--focus-deck-ink) !important;
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-key strong {
  color: #061014 !important;
  border-color: #067a85 !important;
  background: #18d8e8 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-match strong {
  color: var(--focus-deck-lime) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-bpm-tools button,
  .anchor-decision-btn
) {
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(163, 255, 0, 0.28) !important;
  background: rgba(163, 255, 0, 0.07) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-decision-btn.active {
  color: var(--focus-deck-ink) !important;
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
}

.axiom-focus-deck-row.selected.playing-track,
.axiom-focus-deck-row.selected.library-track-playing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(163, 255, 0, 0.16),
    0 0 0 1px rgba(163, 255, 0, 0.20),
    0 0 30px rgba(163, 255, 0, 0.14) !important;
}

/* Playing is deliberately quieter than selected so playback never impersonates
   an explicit Focus Deck choice. Selected + playing keeps the stronger state. */
body:not(.light-mode) #tab-content-library #search-results .library-track-card.axiom-focus-deck-row:is(.playing-track, .library-track-playing):not(.selected),
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) {
  color: #f7f8f5 !important;
  border-color: rgba(163, 255, 0, 0.58) !important;
  background:
    linear-gradient(90deg, rgba(21, 31, 18, 0.98), rgba(8, 11, 9, 0.98) 68%, rgba(13, 18, 12, 0.98)) !important;
  box-shadow:
    inset 4px 0 0 rgba(163, 255, 0, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(163, 255, 0, 0.07) !important;
}

body:not(.light-mode) #tab-content-library #search-results .library-track-card.axiom-focus-deck-row:is(.playing-track, .library-track-playing):not(.selected) :is(
  .library-track-title,
  .library-track-artist,
  .library-meta-line,
  .library-meta-line span,
  .library-bpm-tools
),
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) :is(
  .studio-row-title,
  .studio-row-artist,
  .track-title-resize,
  .track-artist-resize,
  .studio-transition-tagline,
  .studio-metric,
  .studio-metric small
) {
  color: rgba(247, 248, 245, 0.78) !important;
  text-shadow: none !important;
}

body:not(.light-mode) #tab-content-library #search-results .library-track-card.axiom-focus-deck-row:is(.playing-track, .library-track-playing):not(.selected) .library-track-title,
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) .studio-row-title {
  color: #ffffff !important;
}

body:not(.light-mode) #tab-content-library #search-results .library-track-card.axiom-focus-deck-row:is(.playing-track, .library-track-playing):not(.selected) .library-bpm-value {
  color: #ffffff !important;
  border-color: rgba(163, 255, 0, 0.36) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow: none !important;
}

body:not(.light-mode) #tab-content-library #search-results .library-track-card.axiom-focus-deck-row:is(.playing-track, .library-track-playing):not(.selected) .library-add-btn,
body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) .studio-smart-btn {
  color: var(--focus-deck-ink) !important;
  border-color: var(--focus-deck-lime) !important;
  background: var(--focus-deck-lime) !important;
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.16) !important;
}

body:not(.light-mode) #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) .camelot-pill {
  color: #061014 !important;
  border-color: #067a85 !important;
  background: #18d8e8 !important;
}

.axiom-focus-deck-row:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: -5px;
}

.axiom-focus-deck-row[aria-disabled="true"],
.axiom-focus-deck-row.is-disabled,
.axiom-focus-deck-row.loading {
  cursor: not-allowed;
  opacity: 0.46 !important;
}

.axiom-focus-deck-row.error {
  border-color: rgba(255, 75, 67, 0.74) !important;
}

@media (max-width: 1180px) {
  .axiom-focus-deck-row {
    --focus-deck-marker-width: 38px;
  }

  #tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row.selected,
  #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.selected,
  #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row.active-suggestion {
    padding-left: 48px !important;
  }

  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected {
    grid-template-columns: minmax(250px, 1fr) 64px 68px 78px 108px 36px !important;
    padding-left: 48px !important;
  }

  .axiom-focus-marker > span {
    font-size: 5px;
    letter-spacing: 0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .axiom-focus-deck-row,
  .axiom-focus-deck-row * {
    transition-duration: 0.01ms !important;
  }
}

/* Studio set facts share the score zone so the DJ can read the size and
   running time of the working set without opening another panel. */
#studio-active-view .studio-score-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 22px;
}

#studio-active-view .studio-set-facts {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 58px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

#studio-active-view .studio-set-facts > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 72px;
}

#studio-active-view .studio-set-facts strong {
  color: #f4f5f2;
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

#studio-active-view .studio-set-facts small {
  color: rgba(255, 255, 255, 0.58);
  font-family: "Barlow", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.light-mode #studio-active-view .studio-set-facts {
  border-left-color: rgba(15, 39, 74, 0.18);
}

body.light-mode #studio-active-view .studio-set-facts strong {
  color: #071327;
}

body.light-mode #studio-active-view .studio-set-facts small {
  color: rgba(15, 39, 74, 0.62);
}

@media (max-width: 1280px) {
  #studio-active-view .studio-score-summary,
  #studio-active-view .studio-set-facts {
    gap: 14px;
  }

  #studio-active-view .studio-set-facts {
    padding-left: 14px;
  }

  #studio-active-view .studio-set-facts > span {
    min-width: 60px;
  }

  #studio-active-view .studio-set-facts strong {
    font-size: 25px;
  }
}

/* A release can contain many real customer-facing notes. Give every item a
   natural row and scroll the list at compact packaged-app heights instead of
   forcing copy into fixed-height grid cells where lines can overlap. */
.release-splash-overlay.update-build .release-splash-features,
.release-splash-overlay.update-build .release-splash-features[data-count="8"],
.release-splash-overlay.update-build .release-splash-features[data-count="9"],
.release-splash-overlay.update-build .release-splash-features[data-count="10"],
.release-splash-overlay.update-build .release-splash-features[data-count="11"],
.release-splash-overlay.update-build .release-splash-features[data-count="12"],
.release-splash-overlay.update-build .release-splash-features[data-count="13"],
.release-splash-overlay.update-build .release-splash-features[data-count="14"],
.release-splash-overlay.update-build .release-splash-features[data-count="15"] {
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: minmax(68px, auto) !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 10px !important;
}

.release-splash-overlay.update-build .release-splash-features[data-count="1"],
.release-splash-overlay.update-build .release-splash-features[data-count="2"],
.release-splash-overlay.update-build .release-splash-features[data-count="3"] {
  grid-template-columns: 1fr !important;
}

.release-splash-overlay.update-build .release-splash-feature {
  align-content: center !important;
  min-height: 68px !important;
}

.release-splash-overlay.update-build .release-splash-features::-webkit-scrollbar {
  width: 6px;
}

.release-splash-overlay.update-build .release-splash-features::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(163, 255, 0, 0.42);
}

@media (max-height: 760px) {
  .release-splash-overlay.update-build .release-splash-brand {
    padding-top: 24px !important;
    padding-bottom: 22px !important;
  }

  .release-splash-overlay.update-build .release-splash-content {
    padding-top: 24px !important;
    padding-bottom: 16px !important;
  }

  .release-splash-overlay.update-build .release-splash-features {
    grid-auto-rows: minmax(60px, auto) !important;
  }

  .release-splash-overlay.update-build .release-splash-feature {
    min-height: 60px !important;
  }
}

/* Final Day Mode cascade lock. Export's original release selector carries a
   two-ID :has() chain, so this final rule intentionally exceeds it. */
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group#sidebar-export-group.is-expanded > #tab-btn-export#tab-btn-export,
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group#sidebar-playlists-group.is-expanded > #tab-btn-playlists#tab-btn-playlists {
  border-color: rgba(0, 71, 171, 0.32) !important;
  border-left-color: #0047ab !important;
  background: linear-gradient(90deg, rgba(0, 71, 171, 0.13), rgba(37, 99, 235, 0.045)) !important;
  color: #0047ab !important;
  box-shadow: inset 5px 0 0 #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group.is-expanded > #tab-btn-export :is(span, img),
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group.is-expanded > #tab-btn-playlists :is(span, svg, svg *, img) {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group.is-expanded > #tab-btn-export .axiom-sidebar-nav-icon,
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group.is-expanded > #tab-btn-playlists :is(svg, img) {
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(2364%) hue-rotate(205deg) brightness(74%) contrast(112%) !important;
}

html body.light-mode :focus-visible {
  outline-color: #0047ab !important;
}

html body.light-mode #studio-added-overlay img[src*="axiom-mark"] {
  filter: hue-rotate(168deg) saturate(1.15) brightness(0.72) !important;
}

html body.light-mode img[src*="axiom-mark"] {
  filter: hue-rotate(168deg) saturate(1.15) brightness(0.72) !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar .axiom-sidebar-nav-item:focus-visible,
html body.light-mode #main-content-wrapper#main-content-wrapper :focus-visible {
  outline-color: #0047ab !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-table th,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-track-title,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-track-sub,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-path {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-inbox-activity strong {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #health-progress-container#health-progress-container .health-live-headline {
  border-color: rgba(0, 71, 171, 0.24) !important;
  background: rgba(0, 71, 171, 0.075) !important;
  box-shadow: none !important;
}

html body.light-mode #health-live-headline-status#health-live-headline-status,
html body.light-mode #health-progress-container#health-progress-container .serato-progress-pill {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 71, 171, 0.18) !important;
}

html body.light-mode #health-progress-live-time#health-progress-live-time {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

html body.light-mode #magic-score-label#magic-score-label {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

/* Night Library control alignment lock. The title lane intentionally occupies
   the first grid row, so controls spanning rows 2-5 otherwise sit 11px below
   the physical card centre. Keep the shared card structure and move the four
   controls as one unit; reserve a real favourite column and safe right inset. */
html body:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row {
  grid-template-columns: 62px minmax(200px, 1fr) 66px 58px 62px 36px !important;
  column-gap: 10px !important;
  padding-right: 16px !important;
  overflow: hidden !important;
}

html body:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row > :is(
    .library-bpm-cell,
    .library-key-cell,
    .library-add-btn,
    .fav-star-btn
  ) {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  position: relative !important;
  top: -11px !important;
}

html body:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row > .fav-star-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
}

/* Selected rows reserve a 58px marker rail. Let the copy lane absorb that
   known difference instead of allowing the fixed controls to overflow. */
html body:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected {
  grid-template-columns: 62px minmax(0, 1fr) 66px 58px 62px 36px !important;
}

html body:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected > :is(
    .library-bpm-cell,
    .library-key-cell,
    .library-add-btn,
    .fav-star-btn
  ) {
  top: -14px !important;
}

/* ========================================================================
   DAY MODE STATE INTEGRITY PASS
   Selected, playing and review states are paint changes only. They retain the
   same component grids, replace Night Mode lime with AXIOM blue, and preserve
   dark readable type on every light surface.
   ======================================================================== */

html body.light-mode .axiom-focus-deck-row {
  --focus-deck-lime: #0047ab;
  --focus-deck-ink: #ffffff;
}

html body.light-mode .axiom-focus-marker {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  box-shadow: inset 5px 0 0 #003987, inset -1px 0 0 rgba(7, 17, 31, 0.22) !important;
}

html body.light-mode .axiom-focus-marker > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Library: title, artist, metadata and Health chips each own a separate row.
   The top title lane remains available across the full card without allowing
   the lower metadata to collide. */
html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row {
  min-height: 116px !important;
  grid-template-rows: 24px 18px 16px 18px 18px !important;
  row-gap: 1px !important;
  border-color: rgba(0, 71, 171, 0.13) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(7, 17, 31, 0.055) !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing) {
  min-height: 124px !important;
  grid-template-rows: 27px 18px 16px 18px 18px !important;
  border: 0 !important;
  border-top: 2px solid #0047ab !important;
  border-right: 1px solid rgba(0, 71, 171, 0.50) !important;
  border-bottom: 2px solid #0047ab !important;
  background: linear-gradient(90deg, #eef4ff 0%, #ffffff 43%, #f7faff 100%) !important;
  box-shadow: 0 10px 24px rgba(7, 17, 31, 0.10) !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing)
  .library-track-title {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  padding-bottom: 3px !important;
  border-bottom: 2px solid #0047ab !important;
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-decoration: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(
    .library-track-artist,
    .library-fit-row,
    .library-meta-line,
    .library-meta-line span,
    .library-bpm-tools,
    .library-bpm-tools button
  ) {
  color: #40516a !important;
  -webkit-text-fill-color: #40516a !important;
  text-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(.library-meta-line, .library-health-chips) {
  min-height: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-health-chips {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(.library-dna-chip, .library-year-chip, .library-health-chip) {
  border-color: rgba(0, 71, 171, 0.34) !important;
  background: #eef4ff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-value {
  border-color: rgba(0, 71, 171, 0.18) !important;
  background: #f7faff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric.has-key {
  border-color: rgba(8, 160, 183, 0.56) !important;
  background: #eafcff !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing)
  .library-key-metric.has-key {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric.has-key :is(.camelot-pill, small) {
  color: #06324a !important;
  -webkit-text-fill-color: #06324a !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-add-btn {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row > .fav-star-btn,
html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card > .fav-star-btn {
  border-color: rgba(0, 71, 171, 0.10) !important;
  background: #eef4ff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

/* Matching Songs rail: protect the copy lane and keep its actions centred
   inside the card rather than pressed against the right edge. */
html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list .recommendation-card {
  min-height: 104px !important;
  grid-template-columns: 58px minmax(0, 1fr) 38px !important;
  grid-template-rows: minmax(38px, auto) minmax(38px, auto) !important;
  column-gap: 11px !important;
  row-gap: 7px !important;
  padding: 12px 14px !important;
  border-color: rgba(0, 71, 171, 0.13) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(7, 17, 31, 0.055) !important;
}

html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card :is(.recommendation-title, .recommendation-artist) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card .recommendation-meta {
  display: flex !important;
  min-width: 0 !important;
  gap: 8px !important;
  padding-right: 2px !important;
  justify-content: flex-end !important;
}

html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card .recommendation-add-btn {
  min-width: 48px !important;
  height: 36px !important;
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

/* Studio: all five interaction states share one light surface and one grid.
   Blue selected paint never changes the title, BPM, key, harmonic or action
   coordinates. */
html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row {
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 71, 171, 0.15) !important;
  background: #ffffff !important;
  color: #07111f !important;
  box-shadow: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:hover {
  border-bottom-color: rgba(0, 71, 171, 0.34) !important;
  background: #f7faff !important;
  box-shadow: inset 3px 0 0 rgba(0, 71, 171, 0.52) !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:is(.selected, .playing-track) {
  border: 0 !important;
  border-top: 2px solid #0047ab !important;
  border-right: 1px solid rgba(0, 71, 171, 0.46) !important;
  border-bottom: 2px solid #0047ab !important;
  background: linear-gradient(90deg, #e9f1ff 0%, #ffffff 46%, #f6faff 100%) !important;
  color: #07111f !important;
  box-shadow: 0 9px 22px rgba(7, 17, 31, 0.09) !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row :is(
    .studio-row-title,
    .track-title-resize,
    .studio-row-artist,
    .track-artist-resize,
    .studio-transition-tagline,
    .studio-metric,
    .studio-metric small
  ) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row :is(.studio-row-artist, .track-artist-resize, .studio-transition-tagline, .studio-metric small) {
  color: #52617a !important;
  -webkit-text-fill-color: #52617a !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:is(.selected, .playing-track)
  .studio-row-title {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  padding-bottom: 4px !important;
  border-bottom: 2px solid #0047ab !important;
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-decoration: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-dna-chip {
  border-color: rgba(0, 71, 171, 0.34) !important;
  background: #eef4ff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-metric {
  border-left-color: rgba(0, 71, 171, 0.12) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.light-mode #studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric {
  border-color: rgba(8, 160, 183, 0.56) !important;
  background: #eafcff !important;
}

html body.light-mode #studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric :is(.camelot-pill, small) {
  color: #06324a !important;
  -webkit-text-fill-color: #06324a !important;
}

html body.light-mode #studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:is(.selected, .playing-track)
  .studio-key-metric:not(.is-missing) {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
}

html body.light-mode #studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric.is-missing {
  border-color: #c9d4e7 !important;
  background: #f1f5fb !important;
}

html body.light-mode #studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric.is-missing :is(.camelot-pill, small) {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

html body.light-mode #studio-active-view#studio-active-view #active-playlist-container#active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-smart-btn.button--green-outline {
  border-color: rgba(0, 71, 171, 0.62) !important;
  background: #ffffff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #studio-active-view#studio-active-view #active-playlist-container#active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:is(.selected, .playing-track)
  > .studio-smart-btn.button--green-outline {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .fav-star-btn {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  background: #eef4ff !important;
  border-color: rgba(0, 71, 171, 0.10) !important;
  box-shadow: none !important;
}

html body.light-mode #studio-active-view#studio-active-view #active-playlist-container#active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .transition-badge.energy-spine-node {
  border-color: #75a8ff !important;
  background: #ffffff !important;
  color: #0047ab !important;
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.08), 0 0 16px rgba(0, 71, 171, 0.30) !important;
}

html body.light-mode #studio-active-view#studio-active-view #active-playlist-container#active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row
  .transition-badge.energy-spine-node .studio-node-bpm-value {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #studio-active-view#studio-active-view #active-playlist-container#active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row
  .transition-badge.energy-spine-node .studio-node-bpm-label {
  color: #40516a !important;
  -webkit-text-fill-color: #40516a !important;
  text-shadow: none !important;
}

html body.light-mode #active-playlist-container
  .playlist-row.studio-transition-row .transition-badge.energy-spine-node::after {
  background: linear-gradient(180deg, rgba(0, 71, 171, 0.30), #70a5ff 48%, rgba(0, 71, 171, 0.36)) !important;
  box-shadow: 0 0 5px rgba(0, 71, 171, 0.45), 0 0 13px rgba(0, 71, 171, 0.28) !important;
}

/* Matching Songs modal uses the same blue selected language as both source
   lists. No Night Mode green, white-on-white copy, or selected-state reflow. */
html body.light-mode #replacement-modal #modal-suggestions-list
  .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
  border: 0 !important;
  border-top: 2px solid #0047ab !important;
  border-right: 1px solid rgba(0, 71, 171, 0.46) !important;
  border-bottom: 2px solid #0047ab !important;
  background: linear-gradient(90deg, #e9f1ff 0%, #ffffff 46%, #f6faff 100%) !important;
  box-shadow: 0 9px 22px rgba(7, 17, 31, 0.09) !important;
}

html body.light-mode #replacement-modal #modal-suggestions-list
  .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion)
  :is(.anchor-suggestion-title, .anchor-suggestion-artist, .anchor-suggestion-tags, .anchor-suggestion-tags span) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #replacement-modal #modal-suggestions-list
  .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion)
  .anchor-suggestion-title {
  border-bottom-color: #0047ab !important;
}

html body.light-mode #replacement-modal #modal-suggestions-list
  .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion)
  .anchor-suggestion-add {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

/* Health review and empty states: all copy remains dark on white, review rows
   have stable columns, and positive status uses Day Mode blue rather than the
   Night Mode acid green. */
html body.light-mode #health-inbox-app#health-inbox-app .health-inbox-detail {
  background: #ffffff !important;
  color: #07111f !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-state {
  border-color: rgba(0, 71, 171, 0.24) !important;
  background: #eef4ff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-state.healthy {
  border-color: rgba(0, 71, 171, 0.42) !important;
  background: #e8f0ff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-state.danger {
  border-color: rgba(220, 38, 38, 0.38) !important;
  background: #fff1f1 !important;
  color: #c81e1e !important;
  -webkit-text-fill-color: #c81e1e !important;
}

html body.light-mode #health-inbox-app#health-inbox-app :is(
  .health-detail-title,
  .health-detail-copy,
  .health-detail-guidance-card strong,
  .health-detail-trust,
  .health-detail-table td,
  .health-detail-list-row strong,
  .health-detail-list-row span
) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app :is(
  .health-detail-copy,
  .health-detail-trust,
  .health-detail-list-row span,
  .health-detail-track-sub,
  .health-detail-path,
  .health-detail-footer
) {
  color: #52617a !important;
  -webkit-text-fill-color: #52617a !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-guidance-card {
  border-color: rgba(0, 71, 171, 0.16) !important;
  background: #f7faff !important;
  box-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-guidance-card span {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list {
  border-color: rgba(0, 71, 171, 0.16) !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row {
  grid-template-columns: minmax(180px, 1.15fr) minmax(0, 1.7fr) minmax(88px, 96px) !important;
  gap: 18px !important;
  min-height: 72px !important;
  padding: 12px 10px !important;
  border-color: rgba(0, 71, 171, 0.14) !important;
  background: #ffffff !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row > * {
  min-width: 0 !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row :is(strong, span) {
  overflow-wrap: anywhere !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row b {
  justify-self: end !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-action {
  min-width: 96px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-color: rgba(0, 71, 171, 0.38) !important;
  background: #ffffff !important;
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-action.primary {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-action.danger {
  border-color: rgba(220, 38, 38, 0.55) !important;
  background: #ffffff !important;
  color: #c81e1e !important;
  -webkit-text-fill-color: #c81e1e !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-table :is(th, td) {
  border-color: rgba(0, 71, 171, 0.13) !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-badge {
  color: #c81e1e !important;
  -webkit-text-fill-color: #c81e1e !important;
}

@media (max-width: 1180px) {
  html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row b,
  html body.light-mode #health-inbox-app#health-inbox-app .health-detail-list-row .health-detail-action {
    justify-self: start !important;
  }
}

/* Library musical-data parity. Library keeps its approved rectangular BPM
   treatment (the connected spine belongs to Studio), while key data, type,
   states, and action hierarchy follow the same component contract. */
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-cell {
  gap: 2px !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-value {
  height: 38px !important;
  min-height: 38px !important;
  color: #f1f3f1 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.015em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-label {
  color: rgba(224, 230, 222, 0.54) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric {
  justify-self: center !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 4px 4px !important;
  border: 1px solid rgba(32, 223, 242, 0.75) !important;
  border-radius: 5px !important;
  background: rgba(10, 18, 19, 0.78) !important;
  box-shadow: none !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric .camelot-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #20dff2 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric > small {
  color: rgba(32, 223, 242, 0.78) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric.is-missing {
  border-color: #343a35 !important;
  background: rgba(12, 15, 13, 0.78) !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric.is-missing .camelot-pill {
  color: rgba(241, 243, 241, 0.62) !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-metric.is-missing > small {
  color: rgba(226, 230, 223, 0.50) !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected .library-key-metric.has-key,
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected.playing-track .library-key-metric.has-key {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected .library-key-metric.has-key .camelot-pill,
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected.playing-track .library-key-metric.has-key .camelot-pill {
  color: #061012 !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected .library-key-metric.has-key > small,
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row.selected.playing-track .library-key-metric.has-key > small {
  color: rgba(6, 16, 18, 0.75) !important;
}

/* Matching Songs uses the same key language at a compact rail proportion. */
#tab-content-library.library-cockpit #lib-suggestions-list .recommendation-key-metric {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 3px 3px !important;
  border: 1px solid rgba(32, 223, 242, 0.68) !important;
  border-radius: 5px !important;
  background: rgba(10, 18, 19, 0.76) !important;
  box-shadow: none !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-key-metric .camelot-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #20dff2 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-key-metric > small {
  color: rgba(32, 223, 242, 0.74) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-key-metric.is-missing {
  border-color: #343a35 !important;
  background: rgba(12, 15, 13, 0.78) !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-key-metric.is-missing .camelot-pill {
  color: rgba(241, 243, 241, 0.58) !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-key-metric.is-missing > small {
  color: rgba(226, 230, 223, 0.46) !important;
}

#axiom-sidebar .axiom-sidebar-submenu > button {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: rgba(245, 246, 243, 0.68);
  font-family: "Barlow", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

#axiom-sidebar .axiom-sidebar-submenu > button:hover,
#axiom-sidebar .axiom-sidebar-submenu > button:focus-visible {
  border-color: rgba(163, 255, 0, 0.32);
  background: rgba(163, 255, 0, 0.07);
  color: #ffffff;
  outline: none;
}

#axiom-sidebar .axiom-sidebar-submenu > button > img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.66;
  filter: grayscale(1) invert(1) brightness(0.82);
}

#axiom-sidebar .axiom-sidebar-submenu > button > small {
  justify-self: end;
  color: rgba(163, 255, 0, 0.72);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

#axiom-sidebar .axiom-sidebar-submenu > button:hover > img,
#axiom-sidebar .axiom-sidebar-submenu > button:focus-visible > img {
  opacity: 1;
  filter: invert(89%) sepia(97%) saturate(2455%) hue-rotate(29deg) brightness(113%) contrast(106%);
}

#axiom-sidebar #fav-sidebar-badge {
  min-width: 18px;
  padding: 3px 5px;
  border-radius: 2px !important;
  background: var(--axiom-final-green) !important;
  color: #071005 !important;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.export-handoff-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 3, 5, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.studio-health-mode .loud-audio-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(3, 6, 4, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.export-handoff-overlay.hidden {
  display: none !important;
}

.export-handoff-card {
  --export-handoff-accent: var(--axiom-final-cyan);
  position: relative;
  width: min(650px, calc(100vw - 48px));
  padding: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--export-handoff-accent) 56%, transparent);
  border-left: 5px solid var(--export-handoff-accent);
  border-radius: 9px;
  background: #0a1114;
  color: #f5f6f3;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), 0 0 46px color-mix(in srgb, var(--export-handoff-accent) 12%, transparent);
}

.export-handoff-card[data-variant="djay"] {
  --export-handoff-accent: var(--axiom-final-orange);
  background: #160d08;
}

.export-handoff-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 48px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(245, 246, 243, 0.58);
  font-family: "Barlow", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.export-handoff-close:hover,
.export-handoff-close:focus-visible {
  border-color: var(--export-handoff-accent);
  color: #ffffff;
  outline: none;
}

.export-handoff-header {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding-right: 70px;
}

.export-handoff-icon-frame {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid color-mix(in srgb, var(--export-handoff-accent) 62%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--export-handoff-accent) 7%, transparent);
}

.export-handoff-icon-frame img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: invert(78%) sepia(73%) saturate(720%) hue-rotate(140deg) brightness(98%) contrast(90%);
}

.export-handoff-card[data-variant="djay"] .export-handoff-icon-frame img {
  filter: invert(59%) sepia(97%) saturate(1928%) hue-rotate(344deg) brightness(103%) contrast(101%);
}

.export-handoff-heading-copy {
  min-width: 0;
}

.export-handoff-heading-copy small {
  display: block;
  margin-bottom: 5px;
  color: var(--export-handoff-accent);
  font-family: "Barlow", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.export-handoff-heading-copy h2 {
  margin: 0;
  color: #f5f6f3;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.96;
  text-transform: uppercase;
}

.export-handoff-copy {
  margin: 24px 0 22px;
  color: rgba(245, 246, 243, 0.67);
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  line-height: 1.55;
}

.export-handoff-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.export-handoff-stats > span {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.export-handoff-stats > span:last-child {
  border-right: 0;
}

.export-handoff-stats strong,
.export-handoff-stats small {
  display: block;
  text-transform: uppercase;
}

.export-handoff-stats strong {
  overflow: hidden;
  color: var(--export-handoff-accent);
  font-family: "Bebas Neue", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-handoff-stats small {
  margin-top: 7px;
  color: rgba(245, 246, 243, 0.42);
  font-family: "Barlow", sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.export-handoff-safety {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  padding: 13px 16px;
  border-left: 3px solid var(--export-handoff-accent);
  background: color-mix(in srgb, var(--export-handoff-accent) 6%, rgba(255, 255, 255, 0.015));
}

.export-handoff-safety > img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: invert(78%) sepia(73%) saturate(720%) hue-rotate(140deg) brightness(98%) contrast(90%);
}

.export-handoff-card[data-variant="djay"] .export-handoff-safety > img {
  filter: invert(59%) sepia(97%) saturate(1928%) hue-rotate(344deg) brightness(103%) contrast(101%);
}

.export-handoff-safety strong,
.export-handoff-safety small {
  display: block;
  font-family: "Barlow", sans-serif;
}

.export-handoff-safety strong {
  color: var(--export-handoff-accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.export-handoff-safety small {
  margin-top: 3px;
  color: rgba(245, 246, 243, 0.48);
  font-size: 8px;
  line-height: 1.35;
}

.export-handoff-actions {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(220px, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.export-handoff-action {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: "Barlow", sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: filter 150ms ease, transform 150ms ease;
}

.export-handoff-action.secondary {
  background: transparent;
  color: rgba(245, 246, 243, 0.7);
}

.export-handoff-action.primary {
  border-color: var(--export-handoff-accent);
  background: var(--export-handoff-accent);
  color: #071005;
}

.export-handoff-action:hover,
.export-handoff-action:focus-visible {
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-1px);
}

@media (max-height: 780px) and (min-width: 769px), (max-width: 1180px) and (min-width: 769px) {
  #axiom-sidebar #studio-sidebar-tools-container {
    --axiom-studio-nav-row-height: 50px;
  }

  #axiom-sidebar #sidebar-export-group {
    --axiom-export-nav-row-height: 50px;
  }

  #studio-start-view .build-night-card {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  #studio-start-view .build-night-card .build-night-icon {
    width: 28px !important;
    height: 26px !important;
  }

  #axiom-sidebar .axiom-sidebar-submenu {
    padding-top: 3px;
    padding-bottom: 5px;
  }

  #axiom-sidebar .axiom-sidebar-submenu > button {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@media (max-width: 700px) {
  .export-handoff-overlay {
    padding: 12px;
  }

  .export-handoff-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 24px 18px;
    overflow-y: auto;
  }

  .export-handoff-header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    padding-right: 0;
  }

  .export-handoff-icon-frame {
    width: 48px;
    height: 48px;
  }

  .export-handoff-close {
    position: static;
    float: right;
    margin-bottom: 12px;
  }

  .export-handoff-stats {
    grid-template-columns: 1fr;
  }

  .export-handoff-stats > span {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .export-handoff-stats > span:last-child {
    border-bottom: 0;
  }

  .export-handoff-actions {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Matching Songs row parity
   Uses the approved Library/Studio hierarchy without clipping dense controls.
   -------------------------------------------------------------------------- */

#replacement-modal #modal-suggestions-list .anchor-suggestion-row {
  grid-template-columns: 68px minmax(190px, 1fr) 92px 58px 72px 66px !important;
  grid-template-areas:
    "art info bpm key match add"
    "art info bpm decisions decisions decisions" !important;
  grid-template-rows: minmax(54px, auto) 32px !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  min-height: 118px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
  min-height: 118px !important;
  padding-left: 58px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-play {
  grid-area: art;
  align-self: center;
  justify-self: center;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(163, 255, 0, 0.78);
  background: rgba(4, 8, 5, 0.74);
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.16);
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-art {
  grid-area: art;
  align-self: center;
  justify-self: center;
  width: 66px;
  height: 66px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 5px;
  background: #030503;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-art img,
#replacement-modal #modal-suggestions-list .anchor-suggestion-art .artwork-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row > .min-w-0 {
  grid-area: info;
  align-self: center;
  min-width: 0;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-title {
  width: fit-content;
  max-width: 100%;
  color: #ffffff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.025em;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-artist {
  color: rgba(245, 247, 242, 0.70);
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

#replacement-modal #modal-suggestions-list .axiom-role-fit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm {
  grid-area: bpm;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 38px;
  padding: 2px 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.30);
  color: #ffffff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.025em;
  font-variant-numeric: tabular-nums;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm-tools {
  margin-top: 6px;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-key {
  grid-area: key;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-key strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 34px;
  border: 1px solid rgba(24, 216, 232, 0.58);
  border-radius: 5px;
  background: rgba(24, 216, 232, 0.12);
  color: #35e8ff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-match {
  grid-area: match;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-match strong {
  color: var(--focus-deck-lime);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-add {
  grid-area: add;
  align-self: center;
  min-height: 36px;
  border-radius: 6px;
  font-family: "Barlow", sans-serif;
  font-size: 10px;
  font-weight: 900;
}

#replacement-modal #modal-suggestions-list .anchor-decision-actions {
  grid-area: decisions;
  align-self: end;
  justify-self: stretch;
}

#replacement-modal #modal-suggestions-list .anchor-decision-btn {
  min-height: 30px;
  border-radius: 5px;
}

@media (max-width: 1180px) and (min-width: 761px) {
  #replacement-modal #modal-suggestions-list .anchor-suggestion-row {
    grid-template-columns: 62px minmax(160px, 1fr) 84px 54px 64px 60px !important;
    column-gap: 8px !important;
  }

  #replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
    padding-left: 48px !important;
  }

  #replacement-modal #modal-suggestions-list .anchor-suggestion-art {
    width: 60px;
    height: 60px;
  }

  #replacement-modal #modal-suggestions-list .anchor-suggestion-bpm > strong {
    min-width: 62px;
    font-size: 24px;
  }
}

/* AXIOM shared button system — Library and Studio. These variants own only
   presentation; existing labels, handlers, ARIA, and product behavior remain. */
:where(
  button.button--primary,
  button.button--secondary,
  button.button--green-outline,
  button.button--cyan-outline,
  button.button--danger,
  button.button--small,
  button.button--icon
) {
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 100ms ease !important;
}

button.button--primary {
  background: #a3ff00 !important;
  border-color: #a3ff00 !important;
  color: #050705 !important;
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.18) !important;
}

button.button--primary:hover:not(:disabled) {
  background: #b4ff2c !important;
  border-color: #b4ff2c !important;
  color: #050705 !important;
  box-shadow: 0 0 20px rgba(163, 255, 0, 0.28) !important;
  transform: none !important;
}

button.button--primary:active:not(:disabled) {
  background: #91e600 !important;
  border-color: #91e600 !important;
  box-shadow: 0 0 8px rgba(163, 255, 0, 0.16) !important;
  transform: translateY(1px) !important;
}

button.button--secondary {
  background: rgba(12, 15, 13, 0.72) !important;
  border-color: #343a35 !important;
  color: #f1f3f1 !important;
  box-shadow: none !important;
}

button.button--secondary:hover:not(:disabled),
button.button--secondary[aria-expanded="true"] {
  background: #151916 !important;
  border-color: #5b655d !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

button.button--green-outline {
  background: #0b0e0b !important;
  border-color: rgba(163, 255, 0, 0.55) !important;
  color: #a3ff00 !important;
  box-shadow: none !important;
}

button.button--green-outline:hover:not(:disabled) {
  background: rgba(163, 255, 0, 0.08) !important;
  border-color: #a3ff00 !important;
  color: #a3ff00 !important;
  box-shadow: none !important;
  transform: none !important;
}

button.button--cyan-outline {
  background: transparent !important;
  border-color: rgba(32, 223, 242, 0.65) !important;
  color: #20dff2 !important;
  box-shadow: none !important;
}

button.button--cyan-outline:hover:not(:disabled) {
  background: rgba(32, 223, 242, 0.08) !important;
  border-color: #20dff2 !important;
  color: #57edfa !important;
  box-shadow: none !important;
  transform: none !important;
}

button.button--danger {
  background: transparent !important;
  border-color: rgba(255, 77, 77, 0.55) !important;
  color: #ff4d4d !important;
  box-shadow: none !important;
}

button.button--danger:hover:not(:disabled) {
  background: rgba(255, 77, 77, 0.08) !important;
  border-color: #ff4d4d !important;
  color: #ff6868 !important;
  box-shadow: none !important;
  transform: none !important;
}

button.button--small {
  min-height: 32px !important;
  height: 32px !important;
  padding-inline: 12px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

button.button--icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:where(
  button.button--primary,
  button.button--secondary,
  button.button--green-outline,
  button.button--cyan-outline,
  button.button--danger,
  button.button--small,
  button.button--icon
):focus-visible {
  outline: 2px solid #a3ff00 !important;
  outline-offset: 2px !important;
}

:where(
  button.button--primary,
  button.button--secondary,
  button.button--green-outline,
  button.button--cyan-outline,
  button.button--danger,
  button.button--small,
  button.button--icon
):disabled,
:where(
  button.button--primary,
  button.button--secondary,
  button.button--green-outline,
  button.button--cyan-outline,
  button.button--danger,
  button.button--small,
  button.button--icon
)[aria-disabled="true"] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Header tools are one compact family. HELP is intentionally a standard
   utility control here, not a green hero action. */
#studio-active-view .studio-header .studio-actions {
  align-items: center !important;
  gap: 10px !important;
}

#studio-active-view .studio-header .studio-actions #studio-save-set-btn.button--primary,
#studio-active-view .studio-header .studio-actions #export-dropdown-btn.button--secondary,
#studio-active-view .studio-header .studio-actions #btn-studio-guide.button--secondary,
#studio-active-view .studio-header .studio-actions #studio-more-menu-btn.button--icon {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

#studio-active-view .studio-header .studio-actions #studio-save-set-btn.button--primary {
  min-width: 120px !important;
  width: auto !important;
  padding-inline: 22px !important;
}

#studio-active-view .studio-header .studio-actions #export-dropdown-btn.button--secondary {
  min-width: 112px !important;
  width: auto !important;
  padding-inline: 20px !important;
}

#studio-active-view .studio-header .studio-actions #btn-studio-guide.button--secondary,
body.light-mode #studio-active-view .studio-header .studio-actions #btn-studio-guide.button--secondary {
  min-width: 92px !important;
  width: auto !important;
  padding-inline: 20px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  border: 1px solid #343a35 !important;
  color: #f1f3f1 !important;
  box-shadow: none !important;
}

#studio-active-view .studio-header .studio-actions #btn-studio-guide.button--secondary::before {
  content: none !important;
  display: none !important;
}

#studio-active-view .studio-header .studio-actions #btn-studio-guide.button--secondary span {
  color: inherit !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

#studio-active-view .studio-mode-controls {
  align-items: center !important;
  gap: 10px !important;
}

#studio-active-view #studio-tab-manual.button--primary,
#studio-active-view #btn-optimize.button--secondary {
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

#studio-active-view #studio-tab-manual.button--primary {
  min-width: 150px !important;
}

#studio-active-view #btn-optimize.button--secondary {
  min-width: 160px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  border-color: #343a35 !important;
  color: #f1f3f1 !important;
  box-shadow: none !important;
}

/* Matching Songs keeps one position and one size in every Studio state. */
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  > .studio-smart-btn.button--green-outline {
  width: 140px !important;
  min-width: 140px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding-inline: 12px !important;
  background: #0b0e0b !important;
  border: 1px solid rgba(163, 255, 0, 0.55) !important;
  color: #a3ff00 !important;
  box-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  > .studio-smart-btn.button--green-outline,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track
  > .studio-smart-btn.button--green-outline {
  width: 140px !important;
  min-width: 140px !important;
  background: #a3ff00 !important;
  border-color: #a3ff00 !important;
  color: #050705 !important;
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.16) !important;
  transform: none !important;
}

/* Library header and prep controls use the same system without disturbing the
   search field or the established two-column content shell. */
body #tab-content-library.library-cockpit .library-guide-btn.button--secondary {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 92px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 20px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  border: 1px solid #343a35 !important;
  border-radius: 5px !important;
  color: #f1f3f1 !important;
  box-shadow: none !important;
}

body #tab-content-library.library-cockpit .library-guide-btn.button--secondary::before {
  content: none !important;
  display: none !important;
}

#tab-content-library.library-cockpit .library-add-folder.button--primary {
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 22px !important;
  border-radius: 5px !important;
}

#tab-content-library.library-cockpit :is(
  .library-brief-chip.button--small,
  .library-brief-collapse.button--small,
  .library-fresh-rotate.button--small,
  .recommendations-controls .button--small
) {
  height: 32px !important;
  min-height: 32px !important;
  padding-inline: 12px !important;
  border-radius: 4px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

#tab-content-library.library-cockpit .library-brief-chip.button--small:not(.active):not(.library-fresh-rotate) {
  background: #111411 !important;
  border: 1px solid #343934 !important;
  color: #f1f3f1 !important;
  box-shadow: none !important;
}

#tab-content-library.library-cockpit .library-brief-chip.button--small.active {
  background: rgba(163, 255, 0, 0.07) !important;
  border-color: rgba(163, 255, 0, 0.60) !important;
  color: #a3ff00 !important;
  box-shadow: none !important;
}

#tab-content-library.library-cockpit .recommendations-controls select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: #111411 !important;
  border: 1px solid #343934 !important;
  border-radius: 4px !important;
  color: #f1f3f1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* Library rows and song suggestions share the approved title/artist hierarchy.
   Suggestion titles stay slightly smaller because their column is narrower. */
#tab-content-library.library-cockpit .recommendation-card .recommendation-title {
  overflow: hidden !important;
  color: #f7f8f5 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tab-content-library.library-cockpit .recommendation-card .recommendation-artist {
  overflow: hidden !important;
  color: rgba(229, 233, 225, 0.60) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.065em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tab-content-library.library-cockpit .recommendation-card :is(
  .recommendation-meta,
  .recommendation-bpm,
  .track-role-evidence,
  .library-bpm-tools
) {
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

#tab-content-library.library-cockpit :is(
  .library-add-btn.button--primary,
  .recommendation-add-btn.button--primary
) {
  height: 42px !important;
  min-height: 42px !important;
  padding-inline: 18px !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

#tab-content-library.library-cockpit .library-more-btn.button--icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(241, 243, 241, 0.55) !important;
  box-shadow: none !important;
}

#audio-player.library-player-upgrade .player-add-btn.button--primary {
  height: 42px !important;
  min-height: 42px !important;
  padding-inline: 18px !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
    > .studio-smart-btn.button--green-outline,
  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
    > .studio-smart-btn.button--green-outline {
    width: 120px !important;
    min-width: 120px !important;
  }
}

@media (max-width: 760px) {
  #replacement-modal #modal-suggestions-list .anchor-suggestion-row,
  #replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
    grid-template-columns: 58px minmax(150px, 1fr) 78px 54px !important;
    grid-template-areas:
      "art info bpm key"
      "art info match add"
      "decisions decisions decisions decisions" !important;
    grid-template-rows: minmax(52px, auto) 36px 32px !important;
    min-height: 148px !important;
    padding: 10px 10px 10px 48px !important;
  }
}

/* --------------------------------------------------------------------------
   AXIOM 2.0 Matching Songs shell merge
   Faithfully carries the finalized full-window layout while preserving the
   live AXIOM Selection shell and all existing matching-song actions.
   -------------------------------------------------------------------------- */

#replacement-modal.anchor-dj-modal {
  padding: 0 !important;
  background: #030403 !important;
  backdrop-filter: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-dj-shell {
  display: grid !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  grid-template-columns: minmax(0, 2.03fr) minmax(360px, 0.97fr) !important;
  grid-template-rows: 64px 220px 53px minmax(0, 1fr) 54px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 72% 28%, rgba(46, 64, 52, 0.13), transparent 34%),
    linear-gradient(135deg, #070908 0%, #030403 100%) !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-dj-shell::before {
  display: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-dj-topline {
  display: grid !important;
  min-height: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  grid-template-columns: 150px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
}

#replacement-modal.anchor-dj-modal .anchor-brand-lockup {
  display: contents !important;
}

#replacement-modal.anchor-dj-modal .anchor-logo-word {
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 35px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.19em !important;
}

#replacement-modal.anchor-dj-modal .anchor-kicker {
  color: #f3f4f0 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
}

#replacement-modal.anchor-dj-modal .anchor-dj-topline > .flex {
  display: flex !important;
  gap: 12px !important;
}

#replacement-modal.anchor-dj-modal .anchor-close-btn,
#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn-compact {
  min-width: 100px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn-compact {
  border-color: #a3ff00 !important;
  background: #a3ff00 !important;
  color: #0c0f09 !important;
}

#replacement-modal.anchor-dj-modal .anchor-close-btn:hover {
  transform: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-close-btn > span {
  margin: 0 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

#replacement-modal.anchor-dj-modal .anchor-hero-panel {
  display: grid !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-template-columns: 120px 212px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 18px !important;
  margin: 0 22px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  background: linear-gradient(120deg, rgba(17, 20, 18, 0.98), rgba(10, 12, 11, 0.96)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-cover-card {
  width: 120px !important;
  height: 120px !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-cover-card .artwork-fallback {
  font-size: 58px !important;
}

#replacement-modal.anchor-dj-modal .anchor-section-label,
#replacement-modal.anchor-dj-modal .anchor-board-mode,
#replacement-modal.anchor-dj-modal .anchor-intent-label {
  color: #d4d7d1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#replacement-modal.anchor-dj-modal .anchor-context-copy {
  max-width: 230px !important;
  margin: 7px 0 12px !important;
  color: #b8bcb6 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

#replacement-modal.anchor-dj-modal .anchor-title {
  display: -webkit-box !important;
  max-width: 240px !important;
  margin: 0 !important;
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0.025em !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

#replacement-modal.anchor-dj-modal .anchor-subtitle {
  margin: 10px 0 0 !important;
  color: #a7aba6 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
}

#replacement-modal.anchor-dj-modal .anchor-meta-stack,
#replacement-modal.anchor-dj-modal .anchor-tag-row {
  display: flex !important;
  gap: 6px !important;
}

#replacement-modal.anchor-dj-modal .anchor-meta-stack {
  margin-top: 10px !important;
}

#replacement-modal.anchor-dj-modal .anchor-tag-row {
  margin-top: 6px !important;
}

#replacement-modal.anchor-dj-modal .anchor-meta-pill,
#replacement-modal.anchor-dj-modal .anchor-tag-row span {
  padding: 4px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #d7dad5 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

#replacement-modal.anchor-dj-modal .anchor-meta-pill.accent {
  border-color: rgba(163, 255, 0, 0.34) !important;
  color: #a3ff00 !important;
}

#replacement-modal.anchor-dj-modal .anchor-transition-zone {
  display: grid !important;
  min-width: 0 !important;
  align-self: stretch !important;
  grid-template-rows: 25px minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-left: 7px !important;
  overflow: hidden !important;
}

#replacement-modal.anchor-dj-modal .anchor-board-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#replacement-modal.anchor-dj-modal .anchor-board-mode {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#replacement-modal.anchor-dj-modal .anchor-remaining {
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

#replacement-modal.anchor-dj-modal .anchor-transition-board {
  display: grid !important;
  min-height: 0 !important;
  grid-template-rows: 88px 48px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#replacement-modal.anchor-dj-modal .anchor-section-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

#replacement-modal.anchor-dj-modal .anchor-section-chip {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 1px solid color-mix(in srgb, var(--cue, #a3ff00) 58%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--cue, #a3ff00) 7%, #101311) !important;
  transform: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-section-chip strong {
  color: var(--cue, #a3ff00) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
}

#replacement-modal.anchor-dj-modal .anchor-section-chip span {
  color: #d0d3ce !important;
  font-size: 9px !important;
}

#replacement-modal.anchor-dj-modal .anchor-intent-shell {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 12px !important;
}

#replacement-modal.anchor-dj-modal .anchor-intent-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#replacement-modal.anchor-dj-modal .anchor-intent-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  background: #111311 !important;
  color: #d9dcd7 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

#replacement-modal.anchor-dj-modal .anchor-intent-btn.active {
  border-color: #a3ff00 !important;
  background: #a3ff00 !important;
  color: #0a0d08 !important;
  box-shadow: 0 0 24px rgba(163, 255, 0, 0.12) !important;
}

#replacement-modal.anchor-dj-modal .anchor-filter-bar {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  grid-template-columns: minmax(230px, 1fr) 136px 126px 110px 110px 112px 32px minmax(0, 560px) !important;
  gap: 10px !important;
  align-items: center !important;
  max-height: none !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
}

#replacement-modal.anchor-dj-modal #mod-mood_lift,
#replacement-modal.anchor-dj-modal #mod-mood_drop,
#replacement-modal.anchor-dj-modal #mod-bpm_half,
#replacement-modal.anchor-dj-modal #mod-bpm_double,
#replacement-modal.anchor-dj-modal #mod-key_shift {
  display: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-search-wrap {
  order: -1 !important;
  width: auto !important;
  margin: 0 !important;
}

#replacement-modal.anchor-dj-modal .anchor-search-input,
#replacement-modal.anchor-dj-modal .anchor-filter-btn,
#replacement-modal.anchor-dj-modal .anchor-filter-select {
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 2px !important;
  background: #0d0f0e !important;
  color: #d9dcd7 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

#replacement-modal.anchor-dj-modal .anchor-search-input {
  width: 100% !important;
  padding: 0 40px 0 15px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-filter-btn.primary {
  border-color: #a3ff00 !important;
  background: #121711 !important;
  color: #a3ff00 !important;
  box-shadow: inset 0 0 20px rgba(163, 255, 0, 0.05) !important;
  transform: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-filter-select {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 28px 0 12px !important;
}

#replacement-modal.anchor-dj-modal .root-help {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  color: #c9cec8 !important;
}

#replacement-modal.anchor-dj-modal .anchor-modal-body {
  display: grid !important;
  min-height: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  grid-template-columns: minmax(0, 2.03fr) minmax(360px, 0.97fr) !important;
  gap: 0 !important;
  margin: 0 22px !important;
  overflow: hidden !important;
}

#replacement-modal.anchor-dj-modal .anchor-suggestions-panel {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-template-rows: 62px minmax(0, 1fr) !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-suggestions-panel > .anchor-panel-header {
  display: flex !important;
  height: 62px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 11px 0 15px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(16, 18, 17, 0.86) !important;
}

#replacement-modal.anchor-dj-modal .anchor-result-count,
#replacement-modal.anchor-dj-modal .anchor-decision-summary,
#replacement-modal.anchor-dj-modal .anchor-sort-pill > span,
#replacement-modal.anchor-dj-modal .anchor-suggestions-panel .anchor-section-label {
  color: #f3f4f0 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
}

#replacement-modal.anchor-dj-modal .anchor-panel-tools {
  gap: 8px !important;
}

#replacement-modal.anchor-dj-modal .anchor-header-action,
#replacement-modal.anchor-dj-modal .anchor-sort-pill,
#replacement-modal.anchor-dj-modal .anchor-sort-select {
  height: 30px !important;
  border-radius: 2px !important;
}

#replacement-modal.anchor-dj-modal .anchor-header-action {
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  background: #131513 !important;
  color: #c8ccc6 !important;
  font-size: 8px !important;
}

#replacement-modal.anchor-dj-modal .anchor-header-action.primary {
  border-color: #a3ff00 !important;
  color: #a3ff00 !important;
}

#replacement-modal.anchor-dj-modal .anchor-sort-pill {
  min-width: 190px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#replacement-modal.anchor-dj-modal .anchor-sort-select {
  min-width: 150px !important;
  padding: 0 28px 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  background: #131513 !important;
  color: #c8ccc6 !important;
  font-size: 8px !important;
}

#replacement-modal.anchor-dj-modal .modal-results-pane,
#replacement-modal.anchor-dj-modal .anchor-suggestions-list {
  min-height: 0 !important;
  height: 100% !important;
}

#replacement-modal.anchor-dj-modal .modal-results-pane {
  overflow: hidden !important;
}

#replacement-modal.anchor-dj-modal .anchor-suggestions-list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row,
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
  display: grid !important;
  min-height: 95px !important;
  grid-template-columns: 44px 34px 62px minmax(160px, 1fr) 88px 58px 78px 64px 158px !important;
  grid-template-areas: none !important;
  grid-template-rows: 95px !important;
  align-items: center !important;
  column-gap: 5px !important;
  row-gap: 0 !important;
  padding: 0 11px 0 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(18, 21, 19, 0.96), rgba(13, 15, 14, 0.96)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
  color: #0b0e08 !important;
  background: linear-gradient(96deg, #baff18 0%, #8ee400 100%) !important;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.14) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row > :is(
  .axiom-focus-marker,
  .anchor-suggestion-play,
  .anchor-suggestion-art,
  .min-w-0,
  .anchor-suggestion-bpm,
  .anchor-suggestion-key,
  .anchor-suggestion-match,
  .anchor-suggestion-add,
  .anchor-decision-actions
) {
  grid-area: auto !important;
}

#replacement-modal #modal-suggestions-list .axiom-focus-marker {
  position: relative !important;
  inset: auto !important;
  display: none !important;
  width: 44px !important;
  height: 95px !important;
  grid-column: 1 !important;
  background: transparent !important;
  box-shadow: inset 4px 0 0 rgba(7, 16, 5, 0.22) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .axiom-focus-marker {
  display: flex !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-play {
  width: 28px !important;
  height: 28px !important;
  grid-column: 2 !important;
  justify-self: center !important;
  border: 1px solid #a3ff00 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #a3ff00 !important;
  box-shadow: none !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-play {
  border-color: #0a0d08 !important;
  color: #0a0d08 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-art {
  width: 55px !important;
  height: 55px !important;
  grid-column: 3 !important;
  justify-self: center !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-radius: 3px !important;
  background: #030503 !important;
  box-shadow: none !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row > .min-w-0 {
  min-width: 0 !important;
  grid-column: 4 !important;
  padding-left: 7px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-title {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-artist {
  margin-top: 2px !important;
  overflow: hidden !important;
  color: #aaafaa !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-tags {
  display: flex !important;
  gap: 5px !important;
  margin-top: 6px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-tags span {
  padding: 3px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #dfe3dc !important;
  font-size: 7px !important;
  font-weight: 700 !important;
}

#replacement-modal #modal-suggestions-list .axiom-role-fit {
  margin-top: 4px !important;
  color: #7f867e !important;
  font-size: 7px !important;
  font-weight: 700 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-title,
  .anchor-suggestion-artist,
  .anchor-suggestion-tags span,
  .axiom-role-fit,
  .anchor-suggestion-metric span,
  .anchor-suggestion-key span,
  .anchor-suggestion-match span
) {
  color: #18220c !important;
  border-color: rgba(7, 12, 4, 0.32) !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm {
  grid-column: 5 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm > strong {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm-tools {
  display: flex !important;
  gap: 4px !important;
  margin-top: 7px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-bpm-tools button {
  min-height: 0 !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #dfe3dc !important;
  font-size: 7px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-key {
  grid-column: 6 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-key strong {
  min-width: 43px !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #153c42 !important;
  color: #59e8f4 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-match {
  grid-column: 7 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-match strong {
  color: #a3ff00 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-add {
  width: 64px !important;
  min-height: 29px !important;
  grid-column: 8 !important;
  border: 1px solid #a3ff00 !important;
  border-radius: 2px !important;
  background: #a3ff00 !important;
  color: #0a0e08 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#replacement-modal #modal-suggestions-list .anchor-decision-actions {
  display: grid !important;
  width: 158px !important;
  grid-column: 9 !important;
  grid-template-columns: repeat(3, 48px) !important;
  gap: 7px !important;
  align-self: center !important;
}

#replacement-modal #modal-suggestions-list .anchor-decision-btn {
  min-height: 29px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 2px !important;
  background: #111411 !important;
  color: #e5e7e3 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-bpm > strong,
  .anchor-suggestion-match strong
) {
  color: #101807 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-key strong {
  background: #182824 !important;
  color: #59e8f4 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-add,
  .anchor-decision-btn
) {
  border-color: rgba(9, 15, 5, 0.45) !important;
  background: rgba(12, 17, 9, 0.9) !important;
  color: #e8f1e0 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row:is(.selected, .active-suggestion) .anchor-suggestion-add {
  color: #a3ff00 !important;
  box-shadow: 0 0 17px rgba(7, 15, 3, 0.55), inset 0 0 10px rgba(163, 255, 0, 0.08) !important;
}

#replacement-modal.anchor-dj-modal .live-transition-panel {
  display: grid !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-template-rows: auto auto 106px auto !important;
  gap: 0 !important;
  padding: 18px 16px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#replacement-modal.anchor-dj-modal .live-transition-panel::before {
  display: none !important;
}

#replacement-modal.anchor-dj-modal #anchor-transition-panel > .anchor-panel-header {
  display: block !important;
  min-height: 48px !important;
}

#replacement-modal.anchor-dj-modal #anchor-transition-panel > .anchor-panel-header .anchor-section-label {
  color: #f3f4f0 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
}

#replacement-modal.anchor-dj-modal .transition-settings-btn {
  display: none !important;
}

#replacement-modal.anchor-dj-modal .transition-content {
  display: grid !important;
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
}

#replacement-modal.anchor-dj-modal .transition-intel-stage {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .transition-perspective-grid,
#replacement-modal.anchor-dj-modal .transition-sync-line,
#replacement-modal.anchor-dj-modal .transition-stage-score,
#replacement-modal.anchor-dj-modal .transition-now-playing,
#replacement-modal.anchor-dj-modal .transition-metrics-grid {
  display: none !important;
}

#replacement-modal.anchor-dj-modal .transition-stage-metrics {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

#replacement-modal.anchor-dj-modal .transition-stage-metric {
  min-height: 46px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  border-radius: 2px !important;
  background: rgba(16, 18, 17, 0.58) !important;
}

#replacement-modal.anchor-dj-modal .transition-stage-metric span,
#replacement-modal.anchor-dj-modal .mix-advice-card p {
  color: #9fa49e !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

#replacement-modal.anchor-dj-modal .transition-stage-metric strong {
  display: block !important;
  margin-top: 4px !important;
  color: #c5c9c4 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
}

#replacement-modal.anchor-dj-modal .mix-advice-card {
  display: grid !important;
  min-height: 108px !important;
  grid-template-columns: minmax(0, 1fr) 70px !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 2px !important;
  background: rgba(16, 18, 17, 0.88) !important;
}

#replacement-modal.anchor-dj-modal .mix-advice-card strong {
  display: block !important;
  margin: 6px 0 4px !important;
  color: #f3f4f0 !important;
  font-size: 16px !important;
}

#replacement-modal.anchor-dj-modal .mix-advice-card .text-white\/50 {
  margin-top: 0 !important;
  color: #9da29c !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

#replacement-modal.anchor-dj-modal .confidence-ring {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border: 6px solid #a3ff00 !important;
  border-right-color: #373c37 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #f3f4f0 !important;
  font-size: 14px !important;
}

#replacement-modal.anchor-dj-modal .transition-preview-controls {
  display: flex !important;
  height: 106px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

#replacement-modal.anchor-dj-modal .transition-preview-controls > button:not(.transition-play-btn) {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #f1f4ee !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .transition-preview-controls .skip-preview-icon {
  width: 23px !important;
  height: 23px !important;
}

#replacement-modal.anchor-dj-modal .transition-play-btn {
  width: 62px !important;
  height: 62px !important;
  border: 2px solid #a3ff00 !important;
  border-radius: 50% !important;
  background: #a3ff00 !important;
  color: #0a0e08 !important;
  box-shadow: 0 0 26px rgba(163, 255, 0, 0.26) !important;
}

#replacement-modal.anchor-dj-modal .modal-action-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#replacement-modal.anchor-dj-modal .transition-action {
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  background: #101210 !important;
  color: #d4d7d2 !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}

#replacement-modal.anchor-dj-modal .transition-action.primary {
  height: 58px !important;
  grid-column: 1 / -1 !important;
  border: 0 !important;
  background: #a3ff00 !important;
  color: #090d07 !important;
}

#replacement-modal.anchor-dj-modal .transition-action.primary span {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

#replacement-modal.anchor-dj-modal .transition-action.primary small {
  margin-top: 5px !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
}

#replacement-modal.anchor-dj-modal .anchor-insight-strip {
  display: flex !important;
  min-height: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  align-items: center !important;
  gap: 34px !important;
  margin: 0 22px 16px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: rgba(16, 18, 17, 0.93) !important;
  box-shadow: none !important;
}

#replacement-modal.anchor-dj-modal .anchor-insight-strip span {
  color: #a3ff00 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
}

#replacement-modal.anchor-dj-modal .anchor-insight-strip p {
  color: #a7aca6 !important;
  font-size: 10px !important;
}

@media (max-width: 1180px) {
  #replacement-modal.anchor-dj-modal .anchor-dj-shell {
    grid-template-columns: minmax(0, 1.95fr) minmax(330px, 1.05fr) !important;
  }

  #replacement-modal.anchor-dj-modal .anchor-hero-panel {
    grid-template-columns: 108px 184px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  #replacement-modal.anchor-dj-modal .anchor-cover-card {
    width: 108px !important;
    height: 108px !important;
  }

  #replacement-modal.anchor-dj-modal .anchor-filter-bar {
    grid-template-columns: minmax(180px, 1fr) 120px 108px 98px 98px 104px 30px minmax(0, 190px) !important;
    gap: 7px !important;
  }

  #replacement-modal.anchor-dj-modal .anchor-modal-body {
    grid-template-columns: minmax(0, 1.95fr) minmax(330px, 1.05fr) !important;
  }

  #replacement-modal #modal-suggestions-list .anchor-suggestion-row,
  #replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) {
    grid-template-columns: 40px 30px 56px minmax(130px, 1fr) 78px 52px 66px 55px 128px !important;
    column-gap: 4px !important;
  }

  #replacement-modal #modal-suggestions-list .axiom-focus-marker {
    width: 40px !important;
  }

  #replacement-modal #modal-suggestions-list .anchor-suggestion-art {
    width: 52px !important;
    height: 52px !important;
  }

  #replacement-modal #modal-suggestions-list .anchor-decision-actions {
    width: 128px !important;
    grid-template-columns: repeat(3, 40px) !important;
    gap: 4px !important;
  }
}

/* Final cascade lock for the AXIOM 2.0 shell. */
@media (max-width: 1320px) {
  #replacement-modal.anchor-dj-modal .anchor-filter-bar {
    grid-template-columns: minmax(190px, 1fr) 120px 110px 98px 98px 105px 30px minmax(0, 250px) !important;
    gap: 7px !important;
  }
}

@media (max-width: 1180px) {
  #replacement-modal.anchor-dj-modal .anchor-filter-bar {
    grid-template-columns: minmax(180px, 1fr) 112px 102px 92px 92px 98px 30px minmax(0, 170px) !important;
  }
}

#replacement-modal.anchor-dj-modal .anchor-search-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .anchor-filter-btn.primary {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-action-menu {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-era {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-root {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal #mod-count {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .root-help {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

#replacement-modal.anchor-dj-modal .live-transition-panel {
  display: block !important;
}

#replacement-modal.anchor-dj-modal .transition-content {
  display: block !important;
  height: auto !important;
}

#replacement-modal.anchor-dj-modal .transition-intel-stage {
  display: block !important;
  height: 46px !important;
  overflow: visible !important;
}

#replacement-modal.anchor-dj-modal .mix-advice-card {
  margin-top: 8px !important;
}

#replacement-modal.anchor-dj-modal .modal-action-panel {
  margin-top: 10px !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-title {
  padding-bottom: 0 !important;
  border: 0 !important;
  color: #0b0e08 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-artist,
  .anchor-suggestion-tags,
  .anchor-suggestion-tags span,
  .axiom-role-fit,
  .anchor-suggestion-metric span,
  .anchor-suggestion-key span,
  .anchor-suggestion-match span
) {
  color: #24340e !important;
  text-shadow: none !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-bpm > strong,
#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-match strong {
  border: 0 !important;
  background: transparent !important;
  color: #101807 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-key strong {
  border: 0 !important;
  background: #182824 !important;
  color: #59e8f4 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) :is(
  .anchor-suggestion-bpm-tools button,
  .anchor-suggestion-add,
  .anchor-decision-btn
) {
  border-color: rgba(9, 15, 5, 0.45) !important;
  background: rgba(12, 17, 9, 0.9) !important;
  color: #e8f1e0 !important;
}

#replacement-modal #modal-suggestions-list .anchor-suggestion-row.axiom-focus-deck-row:is(.selected, .active-suggestion) .anchor-suggestion-add {
  color: #a3ff00 !important;
}

/* ---------- Health command centre ---------- */
body.studio-health-mode #main-content-wrapper {
  min-width: 0;
}

body.studio-health-mode #health-view {
  padding: 18px 22px 118px 22px !important;
  background:
    radial-gradient(circle at 16% 2%, rgba(163, 255, 0, 0.045), transparent 27%),
    #030604;
}

body.studio-health-mode .health-inbox-app {
  min-height: calc(100vh - 136px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(3, 6, 4, 0.92);
}

body.studio-health-mode .health-repair-center {
  display: grid;
  grid-template-columns: minmax(400px, 1.62fr) repeat(4, minmax(128px, 0.62fr));
  gap: 0;
  min-height: 156px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(163, 255, 0, 0.22);
  border-radius: 0;
  background:
    radial-gradient(circle at 15% -26%, rgba(163, 255, 0, 0.2), transparent 44%),
    linear-gradient(90deg, rgba(8, 15, 8, 0.98), rgba(4, 7, 5, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.studio-health-mode .health-repair-center-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 12px 20px;
  padding: 20px 24px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

body.studio-health-mode .health-repair-center-kicker {
  color: var(--axiom-final-green);
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

body.studio-health-mode .health-repair-center-kicker::before {
  display: none;
}

body.studio-health-mode .health-repair-center-title {
  margin-top: 8px;
  color: #f4f6f3;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.015em;
}

body.studio-health-mode .health-repair-center-title .danger {
  color: #ff4c51;
}

body.studio-health-mode .health-repair-center-title .healthy {
  color: var(--axiom-final-green);
}

body.studio-health-mode #health-repair-center {
  --health-overall-accent: #94a3b8;
  --health-overall-accent-rgb: 148, 163, 184;
}

body.studio-health-mode #health-repair-center[data-overall-health="healthy"] {
  --health-overall-accent: #a3ff00;
  --health-overall-accent-rgb: 163, 255, 0;
}

body.studio-health-mode #health-repair-center[data-overall-health="attention"] {
  --health-overall-accent: #ff9d2e;
  --health-overall-accent-rgb: 255, 157, 46;
}

body.studio-health-mode #health-repair-center[data-overall-health="bad"] {
  --health-overall-accent: #ff4f55;
  --health-overall-accent-rgb: 255, 79, 85;
}

body.studio-health-mode .health-repair-center-title .overall-health-value {
  color: var(--health-overall-accent);
}

body.studio-health-mode .health-repair-center-copy {
  max-width: 470px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.4;
}

body.studio-health-mode .health-repair-center-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

body.studio-health-mode .health-repair-center-actions .health-unified-controls {
  width: 178px;
  margin: 0;
}

body.studio-health-mode .health-repair-center-actions #health-scan-all-button {
  min-height: 42px;
  margin: 0;
  border-color: var(--axiom-final-green);
  border-radius: 5px;
  background: var(--axiom-final-green);
  color: #071005;
  box-shadow: 0 0 24px rgba(163, 255, 0, 0.2);
}

body.studio-health-mode .health-repair-center-actions > button {
  min-height: 42px;
  border-radius: 5px;
}

body.studio-health-mode .health-command-utility {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.48);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

body.studio-health-mode .health-command-utility span {
  white-space: nowrap;
}

body.studio-health-mode .health-command-utility strong {
  color: #fff;
  font-weight: 950;
}

body.studio-health-mode .health-command-utility .health-inbox-refresh {
  width: auto;
  min-height: 25px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 4px;
}

body.studio-health-mode .health-command-utility .health-inbox-reset {
  margin-left: -7px;
}

body.studio-health-mode .health-repair-center-card {
  min-height: 156px;
  padding: 20px 16px 16px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.012);
}

body.studio-health-mode .health-repair-center-card:last-of-type {
  border-right: 0;
}

body.studio-health-mode .health-repair-center-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  letter-spacing: 0.055em;
}

body.studio-health-mode .health-repair-center-card strong {
  margin-top: 6px;
  font-size: 40px;
}

body.studio-health-mode .health-repair-center-card.ready {
  background:
    radial-gradient(circle at 50% -30%, rgba(var(--health-overall-accent-rgb), 0.14), transparent 62%),
    rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 3px 0 rgba(var(--health-overall-accent-rgb), 0.92);
}

body.studio-health-mode .health-repair-center-card.ready > strong {
  color: var(--health-overall-accent);
}

body.studio-health-mode .health-overall-band {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--health-overall-accent-rgb), 0.36);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}

body.studio-health-mode .health-overall-band b {
  color: var(--health-overall-accent);
  font-family: 'Barlow', sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.1;
  text-transform: uppercase;
}

body.studio-health-mode .health-overall-band em {
  color: rgba(255, 255, 255, 0.58);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
}

body.studio-health-mode .health-repair-center-card.ready small {
  min-height: 0;
  margin-top: 7px;
}

body.studio-health-mode .health-repair-center-card small {
  min-height: 38px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  line-height: 1.35;
}

body.studio-health-mode .health-repair-center-card.bpm strong {
  color: #1bc9b4;
}

body.studio-health-mode .health-repair-center-card.bpm .health-repair-card-action {
  border-color: #1bc9b4;
  background: #1bc9b4;
  color: #04100e;
}

body.studio-health-mode .health-repair-card-action,
body.studio-health-mode .health-repair-card-clear {
  min-height: 30px;
  border-radius: 4px;
}

body.studio-health-mode .health-inbox-workspace {
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 630px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(3, 6, 4, 0.8);
}

body.studio-health-mode .health-inbox-nav {
  padding: 14px 12px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 11, 8, 0.76);
}

body.studio-health-mode .health-inbox-group + .health-inbox-group {
  margin-top: 8px;
  padding-top: 8px;
}

body.studio-health-mode .health-inbox-group-title {
  min-height: 24px;
  padding: 0 8px 4px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 9px;
}

body.studio-health-mode .health-inbox-group-title span {
  padding: 2px 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
}

body.studio-health-mode .health-inbox-item {
  min-height: 48px;
  padding: 8px 10px 7px;
  border-radius: 4px;
}

body.studio-health-mode .health-inbox-item.active {
  border-color: transparent;
  border-left: 3px solid var(--axiom-final-green);
  background: rgba(163, 255, 0, 0.075);
}

body.studio-health-mode .health-inbox-item.danger.active {
  border-color: transparent;
  border-left: 3px solid #ff4c51;
  background: rgba(255, 76, 81, 0.09);
}

body.studio-health-mode .health-inbox-item-label {
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  font-weight: 820;
}

body.studio-health-mode .health-inbox-item-hint {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 8px;
}

body.studio-health-mode .health-inbox-item-count {
  font-size: 11px;
}

body.studio-health-mode .health-inbox-detail {
  padding: 30px 30px 38px;
  background:
    radial-gradient(circle at 72% 8%, rgba(163, 255, 0, 0.025), transparent 32%),
    rgba(2, 5, 3, 0.72);
}

body.studio-health-mode .health-detail-state {
  display: none;
}

body.studio-health-mode .health-detail-title {
  margin: 0;
  font-size: 58px;
  line-height: 0.9;
}

body.studio-health-mode .health-detail-copy {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.42;
}

body.studio-health-mode .health-detail-guidance {
  gap: 0;
  margin-top: 32px;
}

body.studio-health-mode .health-detail-guidance-card {
  min-height: 74px;
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.studio-health-mode .health-detail-guidance-card + .health-detail-guidance-card {
  padding: 0 0 0 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

body.studio-health-mode .health-detail-guidance-card span {
  color: var(--axiom-final-green);
  font-size: 10px;
}

body.studio-health-mode .health-detail-guidance-card strong {
  margin-top: 10px;
  font-size: 13px;
}

body.studio-health-mode .health-detail-actions {
  gap: 12px;
  margin-top: 34px;
}

body.studio-health-mode .health-detail-action {
  min-height: 56px;
  border-radius: 4px;
  font-size: 10px;
}

body.studio-health-mode .health-detail-table {
  margin-top: 34px;
}

body.studio-health-mode .health-detail-table th {
  font-size: 9px;
}

body.studio-health-mode .health-detail-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}

body.studio-health-mode .health-inbox-activity {
  min-height: 38px;
  padding: 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1320px) {
  body.studio-health-mode .health-repair-center {
    grid-template-columns: minmax(360px, 1.45fr) repeat(4, minmax(112px, 0.58fr));
  }

  body.studio-health-mode .health-repair-center-main {
    padding-left: 18px;
    padding-right: 18px;
  }

  body.studio-health-mode .health-repair-center-actions > button {
    display: none;
  }
}

@media (max-width: 1500px) {
  body.studio-health-mode .health-repair-center {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.studio-health-mode .health-repair-center-main {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
}

@media (max-width: 1080px) {
  body.studio-health-mode .health-inbox-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  body.studio-health-mode #health-view {
    padding: 12px 12px 108px !important;
  }

  body.studio-health-mode .health-repair-center {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.studio-health-mode .health-repair-center-main {
    grid-template-columns: 1fr;
  }

  body.studio-health-mode .health-command-utility {
    flex-wrap: wrap;
  }

  body.studio-health-mode .health-inbox-workspace {
    grid-template-columns: 1fr;
  }

  body.studio-health-mode .health-inbox-nav {
    max-height: 320px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  body.studio-health-mode .health-detail-title {
    font-size: 46px;
  }
}

/* Help scale contract: this true-EOF block wins over legacy page/theme rules. */
#tab-content-library.library-cockpit .library-topbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.light-mode #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature {
  align-self: flex-end !important;
}

.axiom-help-btn,
body.light-mode .axiom-help-btn,
#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn,
#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn,
#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: 1px solid #a3ff00 !important;
  background: #a3ff00 !important;
  color: #0c0f09 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  transition: filter 140ms ease, outline-color 140ms ease !important;
}

.axiom-help-btn:hover,
body.light-mode .axiom-help-btn:hover,
#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn:hover,
#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn:hover,
#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn:hover {
  border-color: #a3ff00 !important;
  background: #a3ff00 !important;
  color: #0c0f09 !important;
  filter: brightness(1.08) !important;
  box-shadow: none !important;
  transform: none !important;
}

.axiom-help-btn:focus-visible {
  outline: 2px solid #f5ffe7 !important;
  outline-offset: 3px !important;
}

.axiom-help-btn--compact,
#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact,
#replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn--compact,
body.light-mode #studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact,
body.light-mode #replacement-modal.anchor-dj-modal .anchor-close-btn.axiom-help-btn--compact {
  width: 100px !important;
  min-width: 100px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 2px !important;
  font-size: 18px !important;
}

#studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact span,
body.light-mode #studio-active-view .studio-header .studio-actions #btn-studio-guide.axiom-help-btn--compact span {
  color: #0c0f09 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

.axiom-help-btn--standard {
  width: 125px !important;
  min-width: 125px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 3px !important;
  font-size: 23px !important;
}

.axiom-help-btn--feature,
#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
body.light-mode #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature {
  width: 185px !important;
  min-width: 185px !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 26px !important;
  border-radius: 4px !important;
  font-size: 33px !important;
}

#tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature::before,
body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature::before {
  content: none !important;
}

@media (max-width: 1180px) {
  .axiom-help-btn--feature,
  #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature,
  body.axiom-free-access #tab-content-library.library-cockpit .library-guide-btn.axiom-help-btn--feature {
    width: 160px !important;
    min-width: 160px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 22px !important;
    font-size: 29px !important;
  }
}

/* Full-width Library title lane: every state gets the unused top lane above
   waveform/BPM controls, while resting Matching Songs rows stay compact. */
#tab-content-library.library-cockpit #search-results .library-track-card.axiom-focus-deck-row {
  grid-template-rows: 18px repeat(4, minmax(0, 1fr)) !important;
  row-gap: 0 !important;
  align-items: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-main {
  display: contents !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing)
  .library-track-title {
  width: fit-content !important;
  max-width: 100% !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-artist {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.08em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-fit-row {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-meta-line {
  grid-column: 2 !important;
  grid-row: 4 !important;
  align-self: center !important;
  margin: 0 !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-health-chips {
  grid-column: 2 !important;
  grid-row: 5 !important;
  align-self: start !important;
  margin: 0 !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-artwork {
  grid-column: 1 !important;
  grid-row: 1 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-waveform {
  grid-column: 3 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-cell {
  grid-column: 4 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-cell {
  grid-column: 5 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-add-btn {
  grid-column: 6 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row > .fav-star-btn {
  grid-column: 7 !important;
  grid-row: 2 / 6 !important;
  align-self: center !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card:not(.selected):not(.playing-track)
  .recommendation-title {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: 0.035em !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card:not(.selected):not(.playing-track)
  .recommendation-artist {
  margin-top: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: 0.09em !important;
}

/* Studio spine and left-selection grid correction: resting rows return to the
   approved neutral cockpit surface, and selected rows keep every metric on the
   same columns so the BPM spine never collides with Matching Songs. */
body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row:not(.selected):not(.playing-track) {
  color: #f7f8f5 !important;
  background:
    linear-gradient(90deg, rgba(9, 12, 10, 0.99), rgba(4, 6, 5, 0.995) 72%, rgba(7, 9, 7, 0.99)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row:not(.selected):not(.playing-track):hover {
  background:
    linear-gradient(90deg, rgba(13, 17, 13, 0.995), rgba(6, 8, 6, 0.995) 72%, rgba(9, 12, 8, 0.99)) !important;
  border-bottom-color: rgba(163, 255, 0, 0.34) !important;
  box-shadow: inset 3px 0 0 rgba(163, 255, 0, 0.52) !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) {
  color: #f7f8f5 !important;
  background:
    linear-gradient(90deg, rgba(14, 21, 13, 0.995), rgba(5, 8, 6, 0.995) 72%, rgba(8, 11, 8, 0.99)) !important;
  border-color: rgba(163, 255, 0, 0.48) !important;
  box-shadow:
    inset 4px 0 0 rgba(163, 255, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected,
body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected {
  grid-template-columns:
    48px minmax(310px, 1fr) minmax(78px, 0.22fr) minmax(78px, 0.2fr)
    minmax(92px, 0.2fr) 140px 42px !important;
  padding: 12px 16px 12px 14px !important;
  overflow: visible !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .studio-row-main {
  grid-column: 2 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .studio-bpm-metric {
  grid-column: 3 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .studio-bpm-metric + .studio-metric {
  grid-column: 4 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .studio-bpm-metric + .studio-metric + .studio-metric {
  grid-column: 5 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected > .studio-smart-btn {
  grid-column: 6 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected > .fav-star-btn {
  grid-column: 7 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected > .fav-star-btn {
  grid-column: 6 !important;
}

#active-playlist-container .playlist-row.studio-transition-row
  .transition-badge.energy-spine-node::after {
  width: 3px !important;
  opacity: 0.94 !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(163, 255, 0, 0.26), rgba(244, 255, 205, 0.98) 48%, rgba(163, 255, 0, 0.34)) !important;
  box-shadow:
    0 0 8px rgba(210, 255, 115, 0.88),
    0 0 22px rgba(163, 255, 0, 0.54) !important;
}

#active-playlist-container .playlist-row.studio-transition-row .studio-spine-orb {
  z-index: 0 !important;
  filter: blur(6px) saturate(1.22) !important;
}

/* Approved Studio and Library typography/layout contract. State classes may
   change paint only; they never change the track grid or metric coordinates. */
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row:is(
  .selected,
  .playing-track,
  .selected.playing-track
) {
  display: grid !important;
  grid-template-columns:
    42px minmax(330px, 1fr) 88px 74px 96px 140px 34px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 98px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row,
body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:is(
    .selected,
    .playing-track,
    .selected.playing-track
  ) {
  grid-template-columns:
    42px minmax(330px, 1fr) 140px 88px 74px 96px 34px !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  > .drag-handle {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  > .studio-row-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric + .studio-metric {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric + .studio-metric + .studio-metric {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-smart-btn {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

body:not(.matching-songs-left) #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .fav-star-btn {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-smart-btn {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric + .studio-metric {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .studio-bpm-metric + .studio-metric + .studio-metric {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

body.matching-songs-left #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row > .fav-star-btn {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-track-artwork {
  width: 60px !important;
  height: 60px !important;
  border-radius: 4px !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-track-artwork .artwork-fallback {
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-row-text {
  min-width: 0 !important;
  width: 100% !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-row-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #f7f8f5 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: clamp(20px, 1.35vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-row-artist {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(229, 233, 225, 0.64) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.065em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-dna-chip {
  min-height: 18px !important;
  padding: 2px 7px !important;
  color: rgba(190, 236, 126, 0.78) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-smart-btn {
  width: 140px !important;
  min-width: 140px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 5px !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.055em !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-metric {
  min-width: 0 !important;
  min-height: 48px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: "Barlow", sans-serif !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-metric small {
  color: rgba(226, 230, 223, 0.54) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.09em !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .camelot-pill {
  min-width: 44px !important;
  min-height: 30px !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-harmonic-indicator {
  font-family: "Barlow", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .transition-badge.energy-spine-node {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  box-shadow:
    0 0 0 3px rgba(163, 255, 0, 0.08),
    0 0 18px rgba(163, 255, 0, 0.38),
    inset 0 0 12px rgba(255, 255, 255, 0.10) !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-node-bpm-value {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 0.86 !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
  .studio-node-bpm-label {
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

#active-playlist-container .playlist-row.studio-transition-row
  .transition-badge.energy-spine-node::after {
  width: 3px !important;
  opacity: 0.78 !important;
  z-index: 20 !important;
  box-shadow:
    0 0 5px rgba(210, 255, 115, 0.70),
    0 0 14px rgba(163, 255, 0, 0.36) !important;
}

#active-playlist-container .playlist-row.studio-transition-row .studio-spine-orb {
  z-index: 19 !important;
  opacity: 0.48;
  filter: blur(5px) saturate(1.12) !important;
}

/* Explicit paint precedence: later states own the row without changing grid. */
body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row.axiom-focus-deck-row {
  background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.995), rgba(4, 6, 5, 0.998) 72%, rgba(7, 9, 7, 0.995)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row.axiom-focus-deck-row:hover:not(.playing-track):not(.selected) {
  background:
    linear-gradient(90deg, rgba(12, 15, 12, 0.998), rgba(6, 8, 6, 0.998) 72%, rgba(9, 11, 8, 0.995)) !important;
  border-bottom-color: rgba(163, 255, 0, 0.32) !important;
  box-shadow: inset 3px 0 0 rgba(163, 255, 0, 0.46) !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row.axiom-focus-deck-row.playing-track:not(.selected) {
  background:
    linear-gradient(90deg, rgba(13, 19, 12, 0.998), rgba(5, 8, 6, 0.998) 72%, rgba(8, 10, 8, 0.995)) !important;
  border-color: rgba(163, 255, 0, 0.48) !important;
  box-shadow: inset 4px 0 0 rgba(163, 255, 0, 0.74) !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row.axiom-focus-deck-row.selected {
  background:
    linear-gradient(90deg, rgba(10, 15, 10, 0.998), rgba(5, 8, 6, 0.998) 68%, rgba(8, 11, 8, 0.995)) !important;
  border-top: 2px solid rgba(163, 255, 0, 0.92) !important;
  border-right: 1px solid rgba(163, 255, 0, 0.46) !important;
  border-bottom: 2px solid rgba(163, 255, 0, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 18px rgba(163, 255, 0, 0.08) !important;
}

body:not(.light-mode) #active-playlist-container
  .playlist-row.glass.studio-transition-row.axiom-focus-deck-row.selected.playing-track {
  background:
    linear-gradient(90deg, rgba(11, 17, 11, 0.998), rgba(5, 8, 6, 0.998) 68%, rgba(8, 12, 8, 0.995)) !important;
  border-top-color: var(--focus-deck-lime) !important;
  border-bottom-color: var(--focus-deck-lime) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 20px rgba(163, 255, 0, 0.11) !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .studio-row-title,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track
  .studio-row-title {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding-bottom: 4px !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--focus-deck-lime) !important;
  text-decoration: none !important;
}

#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .transition-badge.energy-spine-node,
#active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track
  .transition-badge.energy-spine-node {
  z-index: 32 !important;
  border: 2px solid var(--focus-deck-lime) !important;
  background: #071005 !important;
  color: var(--focus-deck-lime) !important;
  box-shadow:
    0 0 0 3px rgba(163, 255, 0, 0.10),
    0 0 17px rgba(163, 255, 0, 0.40),
    inset 0 0 10px rgba(163, 255, 0, 0.08) !important;
}

/* Library keeps its approved full-width title lane and adopts the same calm
   typographic hierarchy without reducing the available title width. */
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row {
  grid-template-rows: 22px repeat(4, minmax(0, 1fr)) !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-artist {
  color: rgba(229, 233, 225, 0.64) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(
    .library-fit-row,
    .library-meta-line,
    .library-health-chips,
    .library-dna-chip,
    .library-year-chip,
    .library-health-chip
  ) {
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

#tab-content-library.library-cockpit :is(
  .library-add-btn,
  .recommendation-add-btn,
  .library-brief-chip,
  .library-source-button
) {
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#audio-player.library-player-upgrade {
  grid-template-columns: minmax(332px, auto) minmax(320px, 1fr) minmax(108px, 128px) !important;
  column-gap: 18px !important;
}

#audio-player.library-player-upgrade #ap-title {
  overflow: hidden !important;
  color: #f7f8f5 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.075em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#audio-player.library-player-upgrade #ap-artist {
  overflow: hidden !important;
  color: rgba(229, 233, 225, 0.58) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.10em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#axiom-sidebar .axiom-sidebar-nav-item,
#axiom-sidebar .axiom-sidebar-nav-label > span {
  font-family: "Barlow", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row,
  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row:is(
    .selected,
    .playing-track,
    .selected.playing-track
  ) {
    grid-template-columns:
      38px minmax(260px, 1fr) 78px 68px 82px 120px 30px !important;
    gap: 7px !important;
    padding-inline: 10px !important;
  }

  body.matching-songs-left #active-playlist-container
    .playlist-row.studio-transition-row.axiom-focus-deck-row,
  body.matching-songs-left #active-playlist-container
    .playlist-row.studio-transition-row.axiom-focus-deck-row:is(
      .selected,
      .playing-track,
      .selected.playing-track
    ) {
    grid-template-columns:
      38px minmax(260px, 1fr) 120px 78px 68px 82px 30px !important;
  }

  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
    .studio-smart-btn {
    width: 120px !important;
    min-width: 120px !important;
  }

  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
    .studio-dna-chip {
    display: none !important;
  }

  #active-playlist-container .playlist-row.studio-transition-row.axiom-focus-deck-row
    .studio-row-title {
    font-size: 20px !important;
  }

  #audio-player.library-player-upgrade {
    grid-template-columns: minmax(310px, auto) minmax(250px, 1fr) 104px !important;
    column-gap: 12px !important;
  }
}

/* Final cascade lock: legacy Help and cockpit button rules occur earlier in
   this bundle. Keep the approved shared variants authoritative at runtime. */
html body #studio-active-view .studio-header .studio-actions
  #btn-studio-guide.axiom-help-btn.button--secondary,
html body.light-mode #studio-active-view .studio-header .studio-actions
  #btn-studio-guide.axiom-help-btn.button--secondary {
  width: auto !important;
  min-width: 92px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid #343a35 !important;
  border-radius: 5px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  color: #f1f3f1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #studio-active-view .studio-header .studio-actions
  #btn-studio-guide.axiom-help-btn.button--secondary:hover {
  border-color: #5b655d !important;
  background: #151916 !important;
  color: #ffffff !important;
}

html body #studio-active-view .studio-header .studio-actions
  #btn-studio-guide.axiom-help-btn.button--secondary span {
  color: inherit !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

html body #studio-active-view .studio-header .studio-actions
  #export-dropdown-btn.button--secondary,
html body #studio-active-view .studio-header .studio-actions
  #studio-more-menu-btn.button--secondary {
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #343a35 !important;
  border-radius: 5px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  color: #f1f3f1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
}

html body #tab-content-library.library-cockpit
  .library-guide-btn.axiom-help-btn.button--secondary,
html body.axiom-free-access #tab-content-library.library-cockpit
  .library-guide-btn.axiom-help-btn.button--secondary,
html body.light-mode #tab-content-library.library-cockpit
  .library-guide-btn.axiom-help-btn.button--secondary {
  width: auto !important;
  min-width: 92px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid #343a35 !important;
  border-radius: 5px !important;
  background: rgba(12, 15, 13, 0.72) !important;
  color: #f1f3f1 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  box-shadow: none !important;
}

html body #tab-content-library.library-cockpit
  .library-guide-btn.axiom-help-btn.button--secondary:hover {
  border-color: #5b655d !important;
  background: #151916 !important;
  color: #ffffff !important;
}

html body #tab-content-library.library-cockpit .recommendation-card
  .recommendation-title {
  color: #f7f8f5 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.025em !important;
}

html body #tab-content-library.library-cockpit .recommendation-card
  .recommendation-artist {
  color: rgba(229, 233, 225, 0.60) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.065em !important;
}

/* Studio reference button lock — preserve actions and semantics while matching
   the approved compact proportions, acid-lime hue, and restrained halo. */
#studio-active-view {
  --studio-reference-lime: #a3ff00;
  --studio-reference-ink: #071005;
}

html body #studio-active-view .studio-header .studio-actions {
  gap: 12px !important;
}

html body #studio-active-view .studio-header .studio-actions
  #studio-save-set-btn.button--primary {
  width: 110px !important;
  min-width: 110px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--studio-reference-lime) !important;
  border-radius: 3px !important;
  background: var(--studio-reference-lime) !important;
  color: var(--studio-reference-ink) !important;
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.18) !important;
}

html body #studio-active-view .studio-header .studio-actions
  #export-dropdown-btn.button--secondary {
  width: 116px !important;
  min-width: 116px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-color: #343934 !important;
  border-radius: 3px !important;
  background: rgba(7, 10, 8, 0.82) !important;
  box-shadow: none !important;
}

html body #studio-active-view .studio-header .studio-actions
  #studio-more-menu-btn.button--secondary.button--icon {
  width: 46px !important;
  min-width: 46px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-color: #343934 !important;
  border-radius: 3px !important;
  background: rgba(7, 10, 8, 0.82) !important;
  box-shadow: none !important;
}

html body #studio-active-view .studio-header .studio-actions
  #btn-studio-guide.axiom-help-btn.button--secondary {
  width: 116px !important;
  min-width: 116px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border-color: #343934 !important;
  border-radius: 3px !important;
  background: rgba(7, 10, 8, 0.82) !important;
  box-shadow: none !important;
}

html body #studio-active-view #studio-mode-controls {
  gap: 10px !important;
}

html body #studio-active-view #studio-tab-manual.button--primary {
  width: 132px !important;
  min-width: 132px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid var(--studio-reference-lime) !important;
  border-radius: 3px !important;
  background: var(--studio-reference-lime) !important;
  color: var(--studio-reference-ink) !important;
  box-shadow: 0 0 16px rgba(163, 255, 0, 0.18) !important;
}

html body #studio-active-view #btn-optimize.button--secondary {
  width: 146px !important;
  min-width: 146px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-color: #343934 !important;
  border-radius: 3px !important;
  background: rgba(7, 10, 8, 0.82) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

html body #studio-active-view #btn-optimize.button--secondary > span {
  white-space: nowrap !important;
}

html body #studio-active-view
  .playlist-row.studio-transition-row.axiom-focus-deck-row
  > .studio-smart-btn.button--green-outline {
  border-color: rgba(163, 255, 0, 0.60) !important;
  border-radius: 3px !important;
  color: var(--studio-reference-lime) !important;
  background: rgba(7, 10, 8, 0.82) !important;
  box-shadow: none !important;
}

html body #studio-active-view
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  > .studio-smart-btn.button--green-outline,
html body #studio-active-view
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track
  > .studio-smart-btn.button--green-outline {
  border-color: var(--studio-reference-lime) !important;
  background: var(--studio-reference-lime) !important;
  color: var(--studio-reference-ink) !important;
  box-shadow: 0 0 12px rgba(163, 255, 0, 0.13) !important;
}

/* Approved Studio BPM spine: acid green, controlled halo, no yellow-white
   wash. The selected node keeps the same axis and owns only its paint state. */
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row:not(.selected)
  .transition-badge.energy-spine-node {
  border: 2px solid rgba(225, 255, 160, 0.80) !important;
  background:
    radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(145deg, #d9ff3a 0%, #a3ff00 48%, #58d900 100%) !important;
  color: #071005 !important;
  box-shadow:
    0 0 0 2px rgba(163, 255, 0, 0.07),
    0 0 12px rgba(163, 255, 0, 0.42),
    0 0 24px rgba(163, 255, 0, 0.18),
    inset 0 0 8px rgba(255, 255, 255, 0.08) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row
  .transition-badge.energy-spine-node::after {
  background:
    linear-gradient(180deg, rgba(163, 255, 0, 0.46), #d6ff5b 48%, rgba(98, 220, 0, 0.50)) !important;
  box-shadow:
    0 0 5px rgba(163, 255, 0, 0.62),
    0 0 12px rgba(163, 255, 0, 0.24) !important;
  opacity: 0.88 !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row .studio-spine-orb {
  width: 26px !important;
  height: 26px !important;
  background:
    radial-gradient(circle, rgba(190, 255, 88, 0.65) 0 10%, rgba(163, 255, 0, 0.38) 28%, rgba(105, 218, 0, 0.12) 55%, transparent 72%) !important;
  filter: blur(3px) saturate(1.05) !important;
  opacity: 0.26 !important;
  animation: none !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected
  .transition-badge.energy-spine-node,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track
  .transition-badge.energy-spine-node {
  border-color: #a3ff00 !important;
  background: #071005 !important;
  color: #a3ff00 !important;
  box-shadow:
    0 0 0 2px rgba(163, 255, 0, 0.08),
    0 0 14px rgba(163, 255, 0, 0.40),
    inset 0 0 8px rgba(163, 255, 0, 0.08) !important;
}

html body #studio-active-view .studio-actions :is(
  #studio-save-set-btn,
  #export-dropdown-btn,
  #studio-more-menu-btn,
  #btn-studio-guide
):hover:not(:disabled),
html body #studio-active-view #studio-mode-controls :is(
  #studio-tab-manual,
  #btn-optimize
):hover:not(:disabled) {
  transform: none !important;
}

/* Studio musical-control contract. These are different component families:
   primary action, harmonic tool, key tile, harmonic metric, and BPM data node. */
html body #studio-active-view #studio-tab-manual.button--primary {
  height: 42px !important;
  min-height: 42px !important;
}

html body #studio-active-view #btn-optimize.button--harmonic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  width: auto !important;
  min-width: 146px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid #353b36 !important;
  border-radius: 5px !important;
  background: #0b0d0c !important;
  color: #e9ece9 !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: inset 0 0 12px rgba(32, 223, 242, 0.035) !important;
}

html body #studio-active-view #btn-optimize.button--harmonic svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: #a3ff00 !important;
  filter: none;
}

html body #studio-active-view #btn-optimize.button--harmonic:hover:not(:disabled) {
  border-color: #20dff2 !important;
  background: rgba(32, 223, 242, 0.07) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 12px rgba(32, 223, 242, 0.07) !important;
}

html body #studio-active-view #btn-optimize.button--harmonic:hover:not(:disabled) svg {
  filter: drop-shadow(0 0 8px rgba(163, 255, 0, 0.45));
}

html body #studio-active-view #btn-optimize.button--harmonic:active:not(:disabled),
html body #studio-active-view #btn-optimize.button--harmonic.is-selected,
html body #studio-active-view #btn-optimize.button--harmonic.is-calculating,
html body #studio-active-view #btn-optimize.button--harmonic[aria-busy="true"] {
  border-color: #20dff2 !important;
  background: rgba(32, 223, 242, 0.11) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(32, 223, 242, 0.16),
    inset 0 0 14px rgba(32, 223, 242, 0.09) !important;
}

html body #studio-active-view #btn-optimize.button--harmonic:active:not(:disabled) {
  transform: translateY(1px) !important;
}

html body #studio-active-view #btn-optimize.button--harmonic:is(.is-selected, .is-calculating) svg,
html body #studio-active-view #btn-optimize.button--harmonic[aria-busy="true"] svg {
  animation: axiomHarmonicIconPulse 1.25s ease-in-out infinite;
}

html body #studio-active-view #btn-optimize.button--harmonic.is-completed {
  border-color: rgba(163, 255, 0, 0.70) !important;
  background: #0b0d0c !important;
  color: #f1f3f1 !important;
  box-shadow: inset 0 0 12px rgba(163, 255, 0, 0.035) !important;
}

html body #studio-active-view #btn-optimize.button--harmonic:disabled {
  opacity: 0.35 !important;
  box-shadow: none !important;
}

html body #studio-active-view #btn-optimize.button--harmonic:disabled svg {
  animation: none !important;
  filter: none !important;
}

@keyframes axiomHarmonicIconPulse {
  0%, 100% { opacity: 0.74; filter: drop-shadow(0 0 2px rgba(163, 255, 0, 0.22)); }
  50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(163, 255, 0, 0.46)); }
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric {
  justify-self: center !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 4px 4px !important;
  border: 1px solid rgba(32, 223, 242, 0.75) !important;
  border-radius: 5px !important;
  background: rgba(10, 18, 19, 0.78) !important;
  box-shadow: none !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric .camelot-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #20dff2 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric > small {
  color: rgba(32, 223, 242, 0.78) !important;
  font-family: "Barlow", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric.is-missing {
  border-color: #343a35 !important;
  background: rgba(12, 15, 13, 0.78) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric.is-missing .camelot-pill {
  color: rgba(241, 243, 241, 0.62) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-key-metric.is-missing > small {
  color: rgba(226, 230, 223, 0.50) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric .camelot-pill,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric .camelot-pill {
  color: #061012 !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric > small,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric > small {
  color: rgba(6, 16, 18, 0.75) !important;
}

/* A missing key is not selected musical data. Keep the full-size tile neutral
   until AXIOM has a real Camelot value to present. */
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric.is-missing,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric.is-missing {
  border-color: #343a35 !important;
  background: rgba(12, 15, 13, 0.78) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric.is-missing .camelot-pill,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric.is-missing .camelot-pill {
  color: rgba(241, 243, 241, 0.62) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected .studio-key-metric.is-missing > small,
#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row.selected.playing-track .studio-key-metric.is-missing > small {
  color: rgba(226, 230, 223, 0.50) !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-harmonic-metric {
  justify-self: stretch !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-harmonic-indicator {
  color: #a3ff00 !important;
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-harmonic-indicator.is-anchor {
  font-family: "Barlow", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row .studio-harmonic-metric > small {
  color: rgba(190, 213, 174, 0.56) !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row.axiom-focus-deck-row
  .transition-badge.energy-spine-node {
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row
  .transition-badge.energy-spine-node::after {
  top: calc(100% + var(--spine-gap-offset, 1px)) !important;
  width: 3px !important;
  height: var(--spine-line-height, 22px) !important;
  animation: studioSpineBreath 3.2s ease-in-out infinite !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row .studio-spine-orb {
  top: calc(100% + var(--spine-orb-start, 6px)) !important;
  width: 12px !important;
  height: 20px !important;
  background:
    radial-gradient(ellipse, rgba(218, 255, 116, 0.88) 0 12%, rgba(163, 255, 0, 0.54) 34%, rgba(105, 218, 0, 0.12) 64%, transparent 76%) !important;
  filter: blur(2.5px) saturate(1.08) !important;
  opacity: 0;
  animation: studioNodeSpineFlow 3.2s linear infinite !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row:nth-child(3n + 2) .studio-spine-orb {
  animation-delay: -1.05s !important;
}

#studio-active-view #active-playlist-container
  .playlist-row.studio-transition-row:nth-child(3n) .studio-spine-orb {
  animation-delay: -2.1s !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #studio-active-view #btn-optimize.button--harmonic svg,
  #studio-active-view #active-playlist-container
    .playlist-row.studio-transition-row .studio-spine-orb,
  #studio-active-view #active-playlist-container
    .playlist-row.studio-transition-row .transition-badge.energy-spine-node::after {
    animation: none !important;
  }

  #studio-active-view #active-playlist-container
    .playlist-row.studio-transition-row .studio-spine-orb {
    opacity: 0.22 !important;
  }
}

/* Final packaged-app Library allocation. Keep this after the shared title-lane
   rules so low-priority waveform detail yields before title or musical data. */
@media (max-width: 1400px) {
  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row {
    grid-template-columns: 62px minmax(170px, 1fr) 66px 58px 58px 22px !important;
    min-height: 104px !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
  }

  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row .library-waveform {
    display: none !important;
  }

  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row .library-bpm-cell {
    grid-column: 3 !important;
  }

  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row .library-key-cell {
    grid-column: 4 !important;
  }

  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row .library-add-btn {
    grid-column: 5 !important;
  }

  #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row > .fav-star-btn {
    grid-column: 6 !important;
  }
}

/* The installed cockpit can open wider than the browser review surface. Keep
   the approved Library density in the native shell instead of reintroducing
   the low-priority waveform and compressing the title/action lanes. */
html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row {
  grid-template-columns: 62px minmax(200px, 1fr) 66px 58px 62px 36px !important;
  min-height: 104px !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
}

html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-waveform {
  display: none !important;
}

html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-bpm-cell {
  grid-column: 3 !important;
}

html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-key-cell {
  grid-column: 4 !important;
}

html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-add-btn {
  grid-column: 5 !important;
}

html body.axiom-native-shell:not(.light-mode) #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row > .fav-star-btn {
  grid-column: 6 !important;
}

/* Library hierarchy containment. The title owns only the flexible text lane;
   fixed BPM, key, Add, and favourite columns remain visually protected. */
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title {
  display: block !important;
  grid-column: 2 / 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px 3px 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing)
  .library-track-title {
  width: 100% !important;
  max-width: 100% !important;
  border-bottom: 0 !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--focus-deck-lime) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}

/* The lime underline needs its own breathing lane. Only rows that show that
   selected/playing treatment become taller; approved resting rows do not move. */
#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row:is(.selected, .playing-track, .library-track-playing) {
  min-height: 118px !important;
  grid-template-rows: 28px repeat(4, minmax(0, 1fr)) !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row :is(
    .library-track-artist,
    .library-fit-row,
    .library-meta-line,
    .library-health-chips
  ) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-artist {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-more-btn {
  display: none !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card .recommendation-main {
  min-width: 0 !important;
  overflow: hidden !important;
}

#tab-content-library.library-cockpit #lib-suggestions-list
  .recommendation-card .recommendation-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ========================================================================
   DAY MODE COMPLETION PASS
   The release stylesheet loads after daymode-final.css, so these rules own
   final state styling for shared controls and overlays without touching the
   approved Night Mode presentation.
   ======================================================================== */

/* The AXIOM wordmark is typography, not a tinted tile. Utility icons remain
   visible and deliberate beside it. */
html body.light-mode #axiom-sidebar #axiom-start-button.axiom-start-wordmark {
  border: 0 !important;
  background: transparent !important;
  color: #07111f !important;
  box-shadow: none !important;
  outline-offset: 4px;
}

html body.light-mode #axiom-sidebar :is(#theme-toggle, #settings-toggle).refresh-icon-btn {
  border-color: rgba(0, 71, 171, 0.24) !important;
  background: #ffffff !important;
  color: #0047ab !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body.light-mode #axiom-sidebar :is(#theme-toggle, #settings-toggle).refresh-icon-btn :is(svg, path) {
  color: #0047ab !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

/* One blue navigation state for ordinary routes and dropdown parents. This
   deliberately clears every leftover acid-green fill, rail and inner glow. */
html body.light-mode #axiom-sidebar :is(
  #tab-btn-library,
  #tab-btn-studio,
  #tab-btn-export,
  #tab-btn-performance,
  #tab-btn-playlists,
  #tab-btn-health
)[data-nav-state="active"],
html body.light-mode #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item,
html body.light-mode:has(#studio-start-view:not(.hidden)) #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item,
html body.light-mode.axiom-start-mode #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item {
  border-color: rgba(0, 71, 171, 0.32) !important;
  border-left-color: #0047ab !important;
  background: linear-gradient(90deg, rgba(0, 71, 171, 0.13), rgba(37, 99, 235, 0.045)) !important;
  color: #0047ab !important;
  box-shadow: inset 5px 0 0 #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #axiom-sidebar :is(
  #tab-btn-library,
  #tab-btn-studio,
  #tab-btn-export,
  #tab-btn-performance,
  #tab-btn-playlists,
  #tab-btn-health
)[data-nav-state="active"] :is(span, svg, svg *, img),
html body.light-mode #axiom-sidebar .axiom-sidebar-nav-group.is-expanded > .axiom-sidebar-nav-item :is(span, svg, svg *, img) {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Light SVG assets need a blue ink treatment rather than their Night Mode
   grey. Applies equally to Export, Playlists and Studio submenus. */
html body.light-mode #axiom-sidebar .axiom-sidebar-submenu button > img {
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(2364%) hue-rotate(205deg) brightness(74%) contrast(112%) !important;
}

html body.light-mode #axiom-sidebar .axiom-sidebar-submenu button {
  border-color: rgba(0, 71, 171, 0.24) !important;
  background: #f7faff !important;
  color: #07111f !important;
  box-shadow: none !important;
}

html body.light-mode #axiom-sidebar .axiom-sidebar-submenu button:is(:hover, :focus-visible) {
  border-color: #0047ab !important;
  background: #e8f0ff !important;
  color: #0047ab !important;
}

/* Player transport is a solid blue action in Day Mode, never a pale glowing
   disc. */
html body.light-mode #audio-player.library-player-upgrade .player-left-zone > button:first-child,
html body.light-mode #audio-player .player-left-zone > button:first-child {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.light-mode #audio-player .player-left-zone > button:first-child :is(svg, path) {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Fresh Picks is the cyan lane action. Its active/readied presentation is a
   cyan fill with dark text, distinct from AXIOM blue primary actions. */
html body.light-mode #tab-content-library.library-cockpit #library-fresh-rotate.library-fresh-rotate {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body.light-mode #tab-content-library.library-cockpit #library-fresh-rotate.library-fresh-rotate:is(:hover, :focus-visible, :active) {
  border-color: #08bfd3 !important;
  background: #6aefff !important;
  color: #07111f !important;
}

/* Library rows allocate real columns for every control. The previous 22px
   favourite track held a 32px button, which physically pushed it outside the
   card. */
html body.light-mode #tab-content-library.library-cockpit #search-results .library-track-card {
  grid-template-columns: 62px minmax(200px, 1fr) 66px 58px 62px 36px !important;
  column-gap: 10px !important;
  padding-right: 14px !important;
  overflow: hidden !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results .library-track-card > :is(
  .library-bpm-cell,
  .library-key-cell,
  .library-add-btn,
  .fav-star-btn
) {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

html body.light-mode #tab-content-library.library-cockpit #search-results .library-track-card .fav-star-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
}

/* Recommendation rows receive a real favourite column and internal right
   padding. Their metadata/actions may span the copy and favourite columns but
   cannot sit on the card edge. */
html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list .recommendation-card {
  grid-template-columns: 58px minmax(0, 1fr) 34px !important;
  column-gap: 9px !important;
  padding: 12px 12px 12px 12px !important;
  overflow: hidden !important;
}

html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list .recommendation-card > .fav-star-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  justify-self: end !important;
  margin: 0 !important;
}

html body.light-mode #tab-content-library.library-cockpit #lib-suggestions-list .recommendation-card > .recommendation-meta {
  grid-column: 2 / 4 !important;
  width: auto !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

html body.light-mode #tab-content-library.library-cockpit .library-main-grid {
  gap: 18px !important;
}

@media (min-width: 1501px) {
  html body.light-mode #tab-content-library.library-cockpit > .library-main-grid {
    grid-template-columns: minmax(760px, 1fr) minmax(420px, 470px) !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  html body.light-mode #tab-content-library.library-cockpit > .library-main-grid {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 12px !important;
  }

  html body.light-mode #tab-content-library.library-cockpit #search-results .library-track-card {
    grid-template-columns: 62px minmax(178px, 1fr) 64px 56px 60px 36px !important;
    column-gap: 8px !important;
  }
}

/* The Working Set confirmation is a shared overlay mounted under body. Give
   it a complete Day Mode surface instead of allowing any Night Mode layer to
   remain visible. */
html body.light-mode #studio-added-overlay.studio-added-overlay {
  background: rgba(7, 17, 31, 0.38) !important;
  backdrop-filter: blur(10px) saturate(0.86) !important;
}

html body.light-mode #studio-added-overlay .studio-added-panel {
  border-color: rgba(0, 71, 171, 0.34) !important;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 44%, #eef4ff 100%) !important;
  color: #07111f !important;
  box-shadow: 0 28px 74px rgba(7, 17, 31, 0.22) !important;
}

html body.light-mode #studio-added-overlay :is(.studio-added-kicker, .studio-added-mission span) {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
}

html body.light-mode #studio-added-overlay :is(
  .studio-added-title,
  .studio-added-mission,
  .studio-added-mission strong,
  .studio-added-count,
  .studio-added-track strong
) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #studio-added-overlay :is(
  .studio-added-copy,
  .studio-added-journey,
  .studio-added-phase,
  .studio-added-track small
) {
  color: #40516a !important;
  -webkit-text-fill-color: #40516a !important;
}

html body.light-mode #studio-added-overlay :is(.studio-added-mission-row, .studio-added-track) {
  border-color: rgba(0, 71, 171, 0.18) !important;
}

html body.light-mode #studio-added-overlay .studio-added-track {
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(7, 17, 31, 0.08) !important;
}

html body.light-mode #studio-added-overlay .studio-added-track.is-new {
  border-color: #0047ab !important;
  box-shadow: 0 0 0 2px rgba(0, 71, 171, 0.12), 0 10px 24px rgba(7, 17, 31, 0.10) !important;
}

html body.light-mode #studio-added-overlay .studio-added-phases::before {
  background: linear-gradient(90deg, rgba(0, 71, 171, 0.28), #0047ab, #20dff2) !important;
}

html body.light-mode #studio-added-overlay .studio-added-phase::before {
  border-color: #ffffff !important;
  background: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #studio-added-overlay .studio-added-close {
  border-color: rgba(0, 71, 171, 0.30) !important;
  background: #ffffff !important;
  color: #0047ab !important;
  box-shadow: none !important;
}

html body.light-mode #studio-added-overlay .studio-added-view {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.light-mode #studio-added-overlay .studio-added-session-hide {
  border-color: rgba(0, 71, 171, 0.28) !important;
  background: #ffffff !important;
  color: #0047ab !important;
  box-shadow: none !important;
}

/* Performance interaction states use Day Mode blue/cyan, including hover,
   selected suggestions and Live Assist status. */
html body.light-mode #tab-content-performance :is(
  .performance-suggestion-card.is-priority,
  .performance-suggestion-card.is-selected,
  .performance-suggestion-card:hover,
  .performance-filter-chip.active,
  .performance-action:hover,
  .performance-mini-btn:hover,
  .performance-pick-btn
) {
  border-color: rgba(0, 71, 171, 0.46) !important;
  box-shadow: none !important;
}

html body.light-mode #tab-content-performance :is(
  .performance-pick-btn,
  .performance-action:not(.secondary)
) {
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.light-mode #tab-content-performance :is(
  .performance-decision-line strong,
  .performance-rank,
  .performance-bpm-readout,
  .performance-assist-live-dot
) {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Health tables and result details previously retained white Night Mode text
   on white cards. Use dark body copy and preserve red only for destructive
   status/action signals. */
html body.light-mode #tab-content-health :is(
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  td div,
  .health-section-track-name,
  .health-section-track-artist,
  .health-section-last-location,
  .health-section-empty,
  .health-section-footnote
) {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #tab-content-health :is(.text-red-500, .health-danger, [data-health-status="missing"]) {
  color: #d32636 !important;
  -webkit-text-fill-color: #d32636 !important;
}

html body.light-mode #tab-content-health strong[style*="#a3ff00"],
html body.light-mode #tab-content-health .text-axiom-accent {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

/* Harmonic Route is a distinct Studio mode, not another lime primary action.
   Preserve its approved resting treatment and use cyan only while selected. */
html body #studio-active-view #studio-tab-route.active:not(.route-tab-hidden) {
  border-color: #20dff2 !important;
  background: #20dff2 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 25, 32, 0.42) !important;
  box-shadow: 0 0 16px rgba(32, 223, 242, 0.24) !important;
}

/* First Matching Songs visit: teach the anchor through one deliberate action,
   then let the candidate list arrive as a readable sequence. */
#replacement-modal.anchor-dj-modal .anchor-reference-details {
  min-height: 120px;
}

#smart-list-guide-popover .workflow-item.workflow-item-attention {
  border-color: rgba(163, 255, 0, 0.76) !important;
  box-shadow: inset 4px 0 0 #a3ff00, 0 0 24px rgba(163, 255, 0, 0.24);
  transform-origin: center;
  animation: axiomAnchorNudge 1.45s ease-in-out infinite;
}

#smart-list-guide-popover .workflow-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: #111411;
  color: #f1f3f1;
  font-family: "Barlow", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}

#smart-list-guide-popover .workflow-close:hover,
#smart-list-guide-popover .workflow-close:focus-visible {
  border-color: #a3ff00;
  background: #a3ff00;
  color: #071005;
  outline: 2px solid rgba(163, 255, 0, 0.72);
  outline-offset: 2px;
}

#smart-list-guide-popover .workflow-close:active {
  border-color: #91e600;
  background: #91e600;
  color: #071005;
  transform: translateY(1px);
}

#smart-list-guide-popover .workflow-item.workflow-reveal-detail .workflow-detail {
  animation: axiomWorkflowDetailReveal 360ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

#replacement-modal.anchor-dj-modal.anchor-intro-pending .anchor-reference-details {
  display: none;
}

#replacement-modal.anchor-dj-modal.anchor-intro-revealed .anchor-reference-details {
  animation: axiomAnchorDetailsReveal 540ms cubic-bezier(0.2, 0.76, 0.2, 1) both;
}

#replacement-modal.anchor-dj-modal .anchor-results-placeholder {
  display: grid;
  width: calc(100% - 20px);
  min-height: 152px;
  margin: 10px;
  padding: 24px;
  place-content: center;
  gap: 7px;
  border: 1px dashed rgba(163, 255, 0, 0.36);
  border-radius: 4px;
  background: rgba(163, 255, 0, 0.035);
  color: #f5f7f3;
  text-align: center;
  cursor: pointer;
}

#replacement-modal.anchor-dj-modal .anchor-results-placeholder span,
#replacement-modal.anchor-dj-modal .anchor-results-placeholder small {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
}

#replacement-modal.anchor-dj-modal .anchor-results-placeholder span {
  color: #a3ff00;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

#replacement-modal.anchor-dj-modal .anchor-results-placeholder strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#replacement-modal.anchor-dj-modal .anchor-results-placeholder small {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
}

#replacement-modal.anchor-dj-modal .anchor-results-list.anchor-results-entering,
#replacement-modal.anchor-dj-modal .anchor-suggestions-list.anchor-results-entering {
  overflow-anchor: none;
}

#replacement-modal.anchor-dj-modal .anchor-suggestions-list.anchor-results-entering .anchor-result-reveal {
  animation: axiomMatchingResultArrive 460ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
  animation-delay: var(--anchor-reveal-delay, 0ms);
}

@keyframes axiomAnchorNudge {
  0%, 46%, 100% { transform: translateX(0) rotate(0) scale(1); }
  55% { transform: translateX(-7px) rotate(-0.8deg) scale(1.008); }
  64% { transform: translateX(8px) rotate(0.9deg) scale(1.008); }
  73% { transform: translateX(-6px) rotate(-0.6deg) scale(1.005); }
  82% { transform: translateX(4px) rotate(0.4deg) scale(1.003); }
  91% { transform: translateX(-2px) rotate(-0.15deg) scale(1); }
}

@keyframes axiomWorkflowDetailReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes axiomAnchorDetailsReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes axiomMatchingResultArrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #smart-list-guide-popover .workflow-item.workflow-item-attention,
  #smart-list-guide-popover .workflow-item.workflow-reveal-detail .workflow-detail,
  #replacement-modal.anchor-dj-modal.anchor-intro-revealed .anchor-reference-details,
  #replacement-modal.anchor-dj-modal .anchor-suggestions-list.anchor-results-entering .anchor-result-reveal {
    animation: none !important;
  }
}

/* Final Day Mode cascade lock. Keep expandable sidebar groups in the blue
   Day palette even when older release selectors appear earlier in the file. */
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group#sidebar-export-group.is-expanded > #tab-btn-export#tab-btn-export,
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group#sidebar-playlists-group.is-expanded > #tab-btn-playlists#tab-btn-playlists {
  border-color: rgba(0, 71, 171, 0.32) !important;
  border-left-color: #0047ab !important;
  background: linear-gradient(90deg, rgba(0, 71, 171, 0.13), rgba(37, 99, 235, 0.045)) !important;
  color: #0047ab !important;
  box-shadow: inset 5px 0 0 #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group.is-expanded > #tab-btn-export :is(span, img),
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group.is-expanded > #tab-btn-playlists :is(span, svg, svg *, img) {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-export-group.is-expanded > #tab-btn-export .axiom-sidebar-nav-icon,
html body.light-mode #axiom-sidebar#axiom-sidebar #sidebar-playlists-group.is-expanded > #tab-btn-playlists :is(svg, img) {
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(2364%) hue-rotate(205deg) brightness(74%) contrast(112%) !important;
}

html body.light-mode :focus-visible {
  outline-color: #0047ab !important;
}

html body.light-mode #studio-added-overlay img[src*="axiom-mark"] {
  filter: hue-rotate(168deg) saturate(1.15) brightness(0.72) !important;
}

/* Day Mode final ownership for shared focus, brand marks, and Health detail
   text. These must remain below every legacy release rule. */
html body.light-mode img[src*="axiom-mark"] {
  filter: hue-rotate(168deg) saturate(1.15) brightness(0.72) !important;
}

html body.light-mode #axiom-sidebar#axiom-sidebar .axiom-sidebar-nav-item:focus-visible,
html body.light-mode #main-content-wrapper#main-content-wrapper :focus-visible {
  outline-color: #0047ab !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-detail-table th,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-track-title,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-track-sub,
html body.light-mode #health-inbox-app#health-inbox-app .health-detail-path {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

html body.light-mode #health-inbox-app#health-inbox-app .health-inbox-activity strong {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}

html body.light-mode #health-progress-container#health-progress-container .health-live-headline {
  border-color: rgba(0, 71, 171, 0.24) !important;
  background: rgba(0, 71, 171, 0.075) !important;
  box-shadow: none !important;
}

html body.light-mode #health-live-headline-status#health-live-headline-status,
html body.light-mode #health-progress-container#health-progress-container .serato-progress-pill {
  border-color: #0047ab !important;
  background: #0047ab !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 71, 171, 0.18) !important;
}

html body.light-mode #health-progress-live-time#health-progress-live-time {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

html body.light-mode #magic-score-label#magic-score-label {
  color: #0047ab !important;
  -webkit-text-fill-color: #0047ab !important;
  text-shadow: none !important;
}
/* Library Matching Songs visibility is a user preference. Keep the rail in
   the DOM so enabling it restores the existing filters and recommendation
   state, while the Library list receives the complete workspace when hidden. */
html body.library-matching-songs-disabled #tab-content-library.library-cockpit > .library-main-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body.library-matching-songs-disabled #tab-content-library.library-cockpit .library-results-column {
  padding-right: 0 !important;
  border-right: 0 !important;
}

html body.library-matching-songs-disabled #tab-content-library.library-cockpit #smart-links-panel.recommendations-panel {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Axiom Start final layout integrity
   Keep the mission routes fully inside the cockpit above the fixed player.
   -------------------------------------------------------------------------- */
#studio-start-view.command-launch-shell {
  grid-template-rows: minmax(220px, 27vh) minmax(220px, 25vh) minmax(216px, 1fr) !important;
}

#studio-start-view .build-night-panel {
  height: 216px !important;
  margin-top: 18px !important;
}

html body:not(.light-mode) #studio-start-view .command-action-card.is-selected .command-card-kicker::before,
html body:not(.light-mode) #studio-start-view .command-action-card.is-selected .command-card-guidance > span::before {
  background: #071005 !important;
  box-shadow: none !important;
}

@media (max-height: 950px) and (min-height: 781px) {
  #studio-start-view.command-launch-shell {
    grid-template-rows: minmax(205px, 25vh) minmax(215px, 25vh) minmax(205px, 1fr) !important;
    gap: 12px !important;
    padding-top: 20px !important;
    padding-bottom: 18px !important;
  }

  #studio-start-view .build-night-panel {
    height: 205px !important;
    margin-top: 8px !important;
  }

  #studio-start-view .build-night-card {
    gap: 8px !important;
    padding: 16px 16px 14px !important;
  }
}

@media (max-height: 780px) {
  body:has(#studio-start-view:not(.hidden)) {
    --axiom-approved-player: 126px;
  }

  #studio-start-view.command-launch-shell {
    grid-template-rows: 170px 210px minmax(124px, 1fr) !important;
    gap: 10px !important;
    padding: 14px 24px 12px 30px !important;
  }

  #studio-start-view .command-launch-hero {
    padding-bottom: 10px !important;
  }

  #studio-start-view .command-title {
    font-size: clamp(46px, 4vw, 58px) !important;
  }

  #studio-start-view .command-copy {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #studio-start-view .command-action-card,
  #studio-start-view .command-action-card.primary,
  #studio-start-view .command-action-card.secondary {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #studio-start-view .command-card-kicker {
    margin-bottom: 10px !important;
  }

  #studio-start-view .command-card-title {
    font-size: clamp(30px, 2.5vw, 38px) !important;
  }

  #studio-start-view .command-card-guidance {
    margin-top: 8px !important;
  }

  #studio-start-view .build-night-panel {
    height: 124px !important;
    margin-top: 0 !important;
  }

  #studio-start-view .build-night-card {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #studio-start-view .build-night-card-copy {
    justify-content: center !important;
  }

  #studio-start-view .build-night-card-copy > span:not(.build-night-start),
  #studio-start-view .build-night-card-copy > .build-night-settings,
  #studio-start-view .build-night-card small {
    display: none !important;
  }

  #studio-start-view .build-night-card strong {
    font-size: 18px !important;
  }

  #studio-start-view .build-night-card-copy > .build-night-start {
    display: flex !important;
    margin-top: 4px !important;
    font-size: 9px !important;
  }
}

/* Final Library-row contract. Identity remains calm and readable while fit,
   metadata, and Health state share one deliberate detail lane. */
body #search-results .library-track-card,
body #search-results .library-track-card.playing-track,
body #search-results .library-track-card.axiom-focus-selected,
body #search-results .library-track-card.library-track-selected,
body #search-results .library-track-card.is-selected {
  min-height: 118px !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-main {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 / 6 !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  row-gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-block: 9px !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-identity {
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
  align-content: center !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-detail-lane {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px 12px !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-artist,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-fit-row,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-meta-line,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-health-chips {
  position: relative !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-title {
  align-self: end !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-artist {
  align-self: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-fit-row,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-meta-line,
html body #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-health-chips {
  display: flex !important;
  width: auto !important;
  min-height: 20px !important;
  align-items: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

html body.library-matching-songs-disabled #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-main {
  grid-template-columns: minmax(300px, 1.15fr) minmax(410px, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 28px !important;
  row-gap: 0 !important;
}

html body.library-matching-songs-disabled #tab-content-library.library-cockpit #search-results
  .library-track-card.axiom-focus-deck-row .library-track-detail-lane {
  justify-content: flex-start !important;
}

@media (max-width: 1350px) {
  html body.library-matching-songs-disabled #tab-content-library.library-cockpit #search-results
    .library-track-card.axiom-focus-deck-row .library-track-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 9px !important;
  }
}

body #search-results .library-track-card .library-fit-badge,
body #search-results .library-track-card .library-health-chip,
body #search-results .library-track-card .library-dna-chip,
body #search-results .library-track-card .library-year-chip {
  flex: 0 0 auto !important;
  line-height: 18px !important;
}

/* Approved Help discovery contract: never auto-open a guide. The relevant
   Help control nudges until the user chooses to open it. */
@keyframes axiomHelpAttentionNudge {
  0%, 58%, 100% { transform: translateX(0) rotate(0deg); }
  64% { transform: translateX(-3px) rotate(-1deg); }
  70% { transform: translateX(4px) rotate(1.2deg); }
  76% { transform: translateX(-3px) rotate(-0.8deg); }
  82% { transform: translateX(2px) rotate(0.5deg); }
  88% { transform: translateX(0) rotate(0deg); }
}

#btn-library-guide,
#btn-studio-guide,
#btn-matching-guide {
  animation: none !important;
}

#btn-library-guide.axiom-help-needs-attention,
#btn-studio-guide.axiom-help-needs-attention,
#btn-matching-guide.axiom-help-needs-attention {
  animation: axiomHelpAttentionNudge 2.4s ease-in-out infinite !important;
  outline: 1px solid rgba(163, 255, 0, 0.72);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #btn-library-guide.axiom-help-needs-attention,
  #btn-studio-guide.axiom-help-needs-attention,
  #btn-matching-guide.axiom-help-needs-attention {
    animation: none !important;
    outline: 2px solid #a3ff00;
    outline-offset: 3px;
  }
/* ==========================================================================
   Core Audio Needs Attention Item
   ========================================================================== */
#btn-coreaudio-loud.status-ok .status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--axiom-final-green);
  box-shadow: 0 0 8px var(--axiom-final-green);
}
#btn-coreaudio-loud.status-ok #coreaudio-status-text {
  color: var(--axiom-final-green);
}

#btn-coreaudio-loud.status-error {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
}
#btn-coreaudio-loud.status-error #coreaudio-status-text {
  color: #ff3b30;
}
#btn-coreaudio-loud.status-error .status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 12px #ff3b30;
  animation: pulse-red-dot 1s infinite alternate;
}
@keyframes pulse-red-dot {
  from { opacity: 0.5; }
  to { opacity: 1; }
}