body {
  --paper: #f7f2e8; --paper-soft: #f7f2e8; --muted: #aca5b7;
  --lyric-active: #cfb8ff;
  --gold: #c8b2ff; --red: #a88adb; --rose: #c8b2ff;
  --line: rgba(255,255,255,.09);
  background: linear-gradient(135deg,rgba(120,184,255,.16),transparent 32%),radial-gradient(circle at 90% 8%,rgba(241,216,95,.16),transparent 28%),#121218 !important;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
input,textarea,[contenteditable="true"] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
:is(.card,.shelf button,.queue-row,.track-action-panel,.screenCard,.merchCard,.officialVideoCard,.officialCategoryCard,.globalResult,.photocard-entry) { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
:is(.card,.shelf button,.queue-row,.track-action-panel,.screenCard,.merchCard,.officialVideoCard,.officialCategoryCard,.globalResult,.photocard-entry) img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
body.theme-light, body.light {
  --paper: #3b245f; --paper-soft: #3b245f; --muted: #755f8c;
  --lyric-active: #7d55b4;
  --gold: #8159bc; --red: #8159bc; --rose: #8159bc;
  --line: rgba(105,70,150,.13);
  background: linear-gradient(135deg,rgba(120,184,255,.16),transparent 32%),radial-gradient(circle at 90% 8%,rgba(241,216,95,.16),transparent 28%),#f5f1ff !important;
  color: #3b245f;
}
body::before {
  background: url('assets/bg-uaena-dark-landscape.png') center/cover no-repeat !important;
  opacity: .32 !important; animation: none !important; transform: none !important;
  position: fixed; inset: 0; pointer-events: none; z-index: -1 !important;
}
body.theme-light::before, body.light::before { background-image: url('assets/bg-uaena-light-landscape.png') !important; opacity: .5 !important; }
body::after { display: none !important; }
body[data-active-view]::before { display: none !important; }
body.theme-light :is(.settingsCard,.profileHero,.screenCard,.merchCard,.officialVideoCard,.globalResult,.searchGlassShell,.globalSearchTools,.sectionTabs) {
  background-color: rgba(255,255,255,.76) !important;
  color: #3b245f;
  box-shadow: 0 12px 32px rgba(70,45,120,.1);
}
body.theme-light :is(.settingsCard,.profileHero,.screenCard,.merchCard,.globalResult) :is(p,small) { color: #755f8c; }
:is(.nav,#bottomNav) {
  box-sizing: border-box; height: 64px !important; min-height: 64px !important;
  padding: 6px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(42,42,54,.82) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 10px 28px rgba(0,0,0,.15) !important;
  color: #aca5b7;
}
#bottomNav { width: min(680px,calc(100% - 24px)) !important; bottom: 14px !important; }
.dock { width: min(680px,calc(100% - 24px)); bottom: 14px; }
:is(body.light,body.theme-light) :is(.nav,#bottomNav) { background: rgba(255,255,255,.78) !important; color: #81768d; }
#bottomNav button {
  color: #aca5b7 !important; background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.theme-light #bottomNav button { color: #81768d !important; }
#bottomNav button.is-active { color: #82b9ef !important; }
body.theme-light #bottomNav button.is-active { color: #477fca !important; }
:is(.nav-indicator,#bottomNav .bottomNav__indicator) {
  top: 6px !important; bottom: 6px !important; left: 6px !important;
  height: calc(100% - 12px) !important; width: calc((100% - 12px)/5) !important;
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(135deg,rgba(187,162,236,.3),rgba(123,181,230,.22)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(0,0,0,.08) !important;
  transition: transform 300ms cubic-bezier(.2,.85,.2,1) !important;
  will-change: transform;
}
:is(body.light,body.theme-light) :is(.nav-indicator,#bottomNav .bottomNav__indicator) { background: linear-gradient(135deg,rgba(230,227,255,.8),rgba(206,232,255,.72)) !important; }
#bottomNav::after { animation: none !important; }
#bottomNav .navIcon { animation: none !important; filter: none !important; transform: none !important; }
.nav img, #bottomNav .navIcon { width: 24px !important; height: 24px !important; }
body:not(.light) .nav img { filter: invert(1); }
body.light .nav img { filter: none; }
.mini {
  border-radius: 999px; background: rgba(42,42,54,.82); border: 0;
  padding: 9px 14px; gap: 12px; margin-bottom: 10px;
  backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
body.light .mini { background: rgba(255,255,255,.78); }
.mini img { width: 40px; height: 40px; border-radius: 10px; }
.mini .icon { width: 36px; height: 36px; }
.search { backdrop-filter: blur(12px); }
.search::after { animation: none; }
.art { box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.art img { transition: none; }
.card:hover img { transform: none; }
.side { backdrop-filter: blur(16px); }
.officialCategoryCard::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
.officialVideoCard { backdrop-filter: none; }
.officialVideoCard__cover img[src="assets/icons/tv.svg"] { width: 36px; height: 36px; margin: auto; position: absolute; inset: 0; opacity: .6; filter: invert(1); }
:is(.screenCard,.merchCard,.globalResult,.settingsCard,.profileHero) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.globalResult { animation: none; }
@media (max-width:740px) {
  body::before { background-image: url('assets/bg-uaena-dark-portrait.png') !important; background-position: center top !important; opacity: .36 !important; }
  body.theme-light::before,body.light::before { background-image: url('assets/bg-uaena-light-portrait.png') !important; opacity: .55 !important; }
  :is(.nav,#bottomNav) { height: 56px !important; min-height: 56px !important; padding: 5px !important; }
  .dock,#bottomNav { bottom: 10px !important; width: calc(100% - 18px) !important; }
  :is(.nav-indicator,#bottomNav .bottomNav__indicator) { top: 5px !important; bottom: 5px !important; left: 5px !important; width: calc((100% - 10px)/5) !important; height: calc(100% - 10px) !important; }
  .nav img,#bottomNav .navIcon { width: 22px !important; height: 22px !important; }
  .mini { padding: 7px 10px; gap: 9px; margin-bottom: 8px; }
  .mini img { width: 34px; height: 34px; }
  .mini strong { font-size: 12px; }
  .mini small { font-size: 10px; }
  .mini .icon { width: 32px; height: 32px; flex: 0 0 32px; }
}

html.parent-player-only,html.parent-player-only body,body.parent-player-only { min-height: 0; overflow: hidden; background: transparent !important; }
body.parent-player-only::before,body.parent-player-only .app,body.parent-player-only .nav { display: none !important; }
body.parent-player-only .dock { bottom: 0 !important; }
body.parent-player-only .mini { margin-bottom: 0; }
@media(prefers-reduced-motion:reduce) { :is(.nav-indicator,#bottomNav .bottomNav__indicator) { transition: none !important; } }

.profileIntroStack { display: grid; align-content: start; gap: 14px; min-width: 0; }
.profileLayout > *, .feedbackCard { min-width: 0; }
.feedbackCard__eyebrow { font-size: 11px; color: var(--gold); }
.feedbackCard h3 { margin: 6px 0 0; }
.feedbackCard__mail { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.feedbackCard__mail > span { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(157,125,211,.12); }
.feedbackCard__mail strong { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
@media (max-width:740px) {
  .profileLayout { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .profileHero { min-height: 150px; padding: 22px 100px 22px 20px; }
  .profileHero h3 { font-size: 26px; max-width: none; line-height: 1.25; margin: 0; }
  .profileHero__planetLink { width: 64px; height: 64px; top: 20px; right: 18px; border-radius: 16px; }
  .settingsCard { padding: 20px; }
  #themeControl { width: 100%; display: flex; }
  #themeControl button { flex: 1; min-width: 0; min-height: 44px; }
}

/* Short acrylic player with system-media and timed-lyric states. */
.top { margin-bottom: 16px; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.heading { min-height: 18px; justify-content: flex-end; margin-bottom: 10px; }
.dock { width: min(680px,calc(100% - 24px)); }
.mini {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(80px,1fr) auto;
  grid-template-rows: 48px 6px;
  align-items: center;
  width: min(580px,calc(100% - 56px));
  min-height: 72px;
  margin: 0 auto 10px;
  padding: 8px 10px 7px;
  column-gap: 9px;
  row-gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 24px;
  background:
    linear-gradient(110deg,rgba(188,164,235,.12),transparent 42%,rgba(119,183,230,.09)),
    rgba(30,30,40,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 14px 38px rgba(0,0,0,.2);
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
}
.mini::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(255,255,255,.08),transparent 52%);
  pointer-events: none;
}
body.light .mini {
  border-color: rgba(104,75,145,.1) !important;
  background:
    linear-gradient(110deg,rgba(171,145,226,.1),transparent 42%,rgba(116,181,229,.1)),
    rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96),0 14px 36px rgba(70,45,120,.14);
}
.mini > img {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 7px 18px rgba(0,0,0,.2);
}
body.light .mini > img { border-color: rgba(105,70,150,.12); box-shadow: 0 7px 17px rgba(75,50,110,.14); }
.mini .meta {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0 3px;
}
.mini strong,.mini small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini strong { font-size: 13px; font-weight: 750; line-height: 1.25; }
.mini small { color: #b9b1c6; font-size: 10px; line-height: 1.35; }
body.light .mini small { color: #79688b; }
.mini-controls { display: flex; align-items: center; gap: 1px; }
.mini .icon {
  display: grid !important;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: #d4ccdf;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  transition: color .18s ease,background-color .18s ease,transform .18s ease;
}
.mini .icon:hover { color: #fff; background: rgba(255,255,255,.08); }
.mini .icon:active { transform: scale(.92); }
body.light .mini .icon { color: #6d5d7e; }
body.light .mini .icon:hover { color: #49305f; background: rgba(120,88,160,.08); }
.mini .play {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  color: #fff !important;
  background: rgba(129,102,202,.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 5px 14px rgba(91,78,174,.25);
}
.mini .play span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}
.mini .play.is-playing span {
  width: 10px;
  height: 12px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 10px);
}
.mini .playback-mode { font-size: 14px; }
.mini .playback-mode[data-mode="one"] { color: #a98be8; font-size: 12px; }
.mini .playback-mode[data-mode="shuffle"] { color: #8bc9ea; }
.mini-progress {
  grid-column: 2 / 4;
  width: 100%;
  height: 10px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: #a98be8;
}
.mini-progress::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(90deg,#a98be8 0 var(--player-progress,0%),rgba(255,255,255,.18) var(--player-progress,0%) 100%); }
.mini-progress::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; margin-top: -4px; border: 2px solid rgba(255,255,255,.86); border-radius: 50%; background: #8d70d1; box-shadow: 0 2px 8px rgba(61,42,91,.28); }
.mini-progress::-moz-range-track { height: 3px; border-radius: 99px; background: rgba(255,255,255,.18); }
.mini-progress::-moz-range-progress { height: 3px; border-radius: 99px; background: #9f7fdf; }
.mini-progress::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid rgba(255,255,255,.86); border-radius: 50%; background: #8d70d1; }
.verse { transform-origin: left center; transition: transform .26s ease,color .26s ease,opacity .26s ease,text-shadow .26s ease; cursor: pointer; }
.verse.is-active { color: var(--lyric-active); font-weight: 720; transform: scale(1.14); text-shadow: 0 0 18px color-mix(in srgb,var(--lyric-active) 28%,transparent); }
.verse.is-active small { color: color-mix(in srgb,var(--lyric-active) 78%,var(--muted)); font-weight: 550; }
.side.open .verse.is-active { color: #7d55b4; }
.side.open .verse.is-active small { color: #9b78c2; }
.card { position: relative; cursor: pointer; }
.card.actions-open { z-index: 4; }
.card.actions-open .art { overflow: visible; }
.card.actions-open .art img { border-radius: inherit; }
.card:focus-visible { outline: none; }
.card:focus-visible .art { box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 72%,transparent),0 16px 36px rgba(0,0,0,.25); }
.card-actions {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(24,22,34,.78); box-shadow: 0 12px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,-44%) scale(.94);
  transition: opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.card.actions-open .card-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.card-actions button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #f7f2ff; background: rgba(255,255,255,.1); }
.card-actions button:hover,.card-actions button:focus-visible { color: #fff; background: rgba(169,139,232,.42); outline: none; }
.card-actions button:active { transform: scale(.94); }
.card-actions button[hidden] { display: none; }
.card-actions svg { width: 22px; height: 22px; fill: currentColor; pointer-events: none; }
body.light .card-actions { border-color: rgba(91,68,125,.14); background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(63,42,92,.18); }
body.light .card-actions button { color: #684d91; background: rgba(112,82,154,.09); }
.queue-sheet,.track-action { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; padding: 22px; }
.queue-backdrop,.track-action-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: rgba(8,8,14,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.queue-panel,.track-action-panel {
  position: relative;
  width: min(520px,100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  color: #eeeaf5;
  background: linear-gradient(145deg,rgba(65,61,78,.96),rgba(30,30,40,.96));
  box-shadow: 0 24px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(28px) saturate(1.22);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
}
body.light :is(.queue-panel,.track-action-panel) { color: #3b245f; border-color: rgba(104,75,145,.12); background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,240,251,.94)); box-shadow: 0 24px 70px rgba(67,46,100,.18),inset 0 1px 0 #fff; }
.queue-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-height: min(660px,76dvh); padding: 20px; }
.queue-panel header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.queue-panel header small { color: #bba7e8; font-size: 10px; letter-spacing: 1.5px; }
.queue-panel h2 { margin: 3px 0 0; font-size: 22px; letter-spacing: 0; }
.queue-close { width: 38px; height: 38px; border-radius: 50%; color: inherit; background: rgba(255,255,255,.08); font-size: 20px; }
.queue-list { min-height: 100px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.queue-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 34px; align-items: center; gap: 8px; min-height: 62px; padding: 6px 4px; border-radius: 14px; }
.queue-row.is-current { color: #c8b2ff; background: rgba(169,139,232,.11); }
.queue-index { color: #aaa2b5; text-align: center; font-size: 11px; }
.queue-song { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 11px; min-width: 0; text-align: left; }
.queue-song img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
.queue-song span,.queue-song strong,.queue-song small { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue-song strong { font-size: 13px; }
.queue-song small { margin-top: 3px; color: #aaa2b5; font-size: 10px; }
body.light .queue-song small,body.light .queue-index { color: #79688b; }
.queue-remove { width: 32px; height: 32px; border-radius: 50%; color: #aaa2b5; font-size: 18px; }
.queue-clear { justify-self: center; min-height: 38px; margin-top: 13px; padding: 0 18px; border-radius: 999px; color: #c5bace; background: rgba(255,255,255,.07); }
body.light .queue-clear { color: #735e88; background: rgba(120,88,160,.08); }
.queue-empty { align-self: center; padding: 46px 10px; color: #aaa2b5; text-align: center; }
.track-action-panel { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 18px; }
.track-action-cover { grid-row: 1; width: 52px; height: 52px; border-radius: 13px; object-fit: cover; }
.track-action-panel > div { align-self: center; min-width: 0; }
.track-action-panel strong,.track-action-panel small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-action-panel small { margin-top: 4px; color: #aaa2b5; font-size: 11px; }
.track-action-panel > button:not(.track-action-backdrop) { grid-column: 1 / 3; min-height: 44px; border-radius: 14px; color: inherit; background: rgba(255,255,255,.08); font-weight: 700; }
.track-action-panel > button[data-track-action="play"] { color: #fff; background: linear-gradient(135deg,#9979db,#6587d5); }
.track-action-panel > .track-action-cancel { background: transparent; color: #aaa2b5; }
@media (max-width:740px) {
  .top { margin-bottom: 12px; }
  .brand small { font-size: 10px; }
  .heading { min-height: 16px; margin-bottom: 8px; }
  .dock { width: calc(100% - 18px); }
  .mini {
    grid-template-columns: 38px minmax(54px,1fr) auto;
    grid-template-rows: 40px 6px;
    width: calc(100% - 34px);
    min-height: 62px;
    padding: 7px 8px 6px;
    column-gap: 6px;
    row-gap: 3px;
    margin-bottom: 8px;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 9px 24px rgba(0,0,0,.17);
  }
  .mini::before { border-radius: 18px; }
  .mini > img { width: 38px; height: 38px; border-radius: 11px; }
  .mini .meta { gap: 1px; padding: 0 1px; }
  .mini strong { font-size: 11px; }
  .mini small { font-size: 9px; }
  .mini-controls { gap: 0; }
  .mini .icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 17px; }
  .mini .play { flex-basis: 40px; width: 40px; height: 40px; }
  .mini .playback-mode { font-size: 12px; }
  .mini-progress { height: 8px; }
  .side.open .verse.is-active { transform: scale(1.12); }
  .queue-sheet,.track-action { padding: 10px 10px max(10px,env(safe-area-inset-bottom)); }
  .queue-panel { max-height: min(620px,78dvh); padding: 17px 14px; border-radius: 24px; }
  .queue-panel h2 { font-size: 20px; }
  .queue-row { min-height: 58px; }
  .queue-song { grid-template-columns: 42px minmax(0,1fr); gap: 9px; }
  .queue-song img { width: 42px; height: 42px; }
  .track-action-panel { border-radius: 24px; }
}
@media (max-width:350px) {
  .mini { width: calc(100% - 24px); grid-template-columns: 36px minmax(44px,1fr) auto; column-gap: 4px; }
  .mini > img { width: 36px; height: 36px; }
  .mini .icon { flex-basis: 30px; width: 30px; height: 30px; }
  .mini .play { flex-basis: 40px; width: 40px; height: 40px; }
}
@media(prefers-reduced-motion:reduce) {
  .mini .icon,.verse { transition: none; }
  .verse.is-active { transform: none; }
}

/* Reference-video controls: pale glass player and icon-only moving dock. */
.dock { width: min(680px,calc(100% - 24px)); }
.mini {
  grid-template-columns: 54px minmax(90px,1fr) auto;
  grid-template-rows: 54px 3px;
  width: 100%; min-height: 70px; margin-bottom: 10px; padding: 7px 12px 6px 7px;
  column-gap: 11px; row-gap: 3px; color: #17151c;
  border: 1px solid rgba(255,255,255,.62) !important; border-radius: 999px;
  background: rgba(243,242,246,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88),0 12px 34px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(28px) saturate(1.18); -webkit-backdrop-filter: blur(28px) saturate(1.18);
}
.mini::before { inset: 1px; border-radius: 999px; background: linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04)); }
body.light .mini { color: #17151c; background: rgba(245,244,247,.8) !important; }
.mini > img { width: 54px; height: 54px; border: 0; border-radius: 14px; box-shadow: 0 5px 14px rgba(34,27,42,.18); }
.mini .meta { padding: 0 2px; color: #17151c; }
.mini .meta { touch-action: pan-y; will-change: transform,opacity; }
.mini strong { color: #17151c; font-size: 14px; font-weight: 760; }
.mini small,body.light .mini small { color: #66616b; font-size: 10px; }
.mini-controls { gap: 2px; }
.mini .icon { flex: 0 0 42px; width: 42px; height: 42px; color: #17151c; background: transparent; }
.mini .icon:hover { color: #17151c; background: rgba(255,255,255,.5); }
.mini .play { order: 2; flex-basis: 42px; width: 42px; height: 42px; color: #17151c !important; background: transparent !important; box-shadow: none !important; }
.mini .mini-fav { order: 1; color: #d74d55; font-size: 29px; font-family: "Segoe UI Symbol",sans-serif; }
.mini .mini-fav.is-favorite { color: #dc4e55; }
.mini .queue-toggle { order: 3; }
.mini .queue-toggle svg { width: 25px; height: 25px; fill: currentColor; }
.mini .mini-secondary { display: none !important; }
.mini .playback-mode,.mini .prev,.mini .next { display: none !important; }
.mini-progress { grid-column: 2 / 4; height: 5px; }
.mini-progress::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg,#6f6875 0 var(--player-progress,0%),rgba(40,36,45,.16) var(--player-progress,0%) 100%); }
.mini-progress::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3px; border: 1px solid rgba(255,255,255,.9); background: #6f6875; box-shadow: none; }
.mini-progress::-moz-range-track { height: 2px; background: rgba(40,36,45,.16); }
.mini-progress::-moz-range-progress { height: 2px; background: #6f6875; }

:is(.nav,#bottomNav) {
  width: min(420px,calc(100vw - 42px)) !important; height: 66px !important; min-height: 66px !important;
  margin-inline: auto; padding: 6px !important; color: #242129 !important;
  border: 1px solid rgba(255,255,255,.58) !important; border-radius: 999px !important;
  background: rgba(239,238,242,.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86),0 14px 34px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(28px) saturate(1.15) !important; -webkit-backdrop-filter: blur(28px) saturate(1.15) !important;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.nav button,#bottomNav button { min-height: 54px !important; color: #69636f !important; font-size: 0 !important; }
.nav button > span,#bottomNav button > span:not(.navIcon) { display: none !important; }
.nav button.active,#bottomNav button.is-active { color: #6f55a8 !important; }
body .nav button,body #bottomNav button,body.theme-light #bottomNav button { color: #69636f !important; }
body .nav button.active,body #bottomNav button.is-active,body.theme-light #bottomNav button.is-active { color: #6f55a8 !important; }
.nav .navIcon,#bottomNav .navIcon { display: block !important; width: 26px !important; height: 26px !important; opacity: .96; background: currentColor; -webkit-mask: var(--nav-icon) center/contain no-repeat; mask: var(--nav-icon) center/contain no-repeat; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.navIcon--headphones { --nav-icon: url('./assets/icons/headphones.svg'); }
.navIcon--tv { --nav-icon: url('./assets/icons/tv.svg'); }
.navIcon--gift { --nav-icon: url('./assets/icons/gift.svg'); }
.navIcon--search { --nav-icon: url('./assets/icons/search.svg'); }
.navIcon--profile { --nav-icon: url('./assets/icons/user-round.svg'); }
:is(.nav-indicator,#bottomNav .bottomNav__indicator) {
  top: 6px !important; bottom: 6px !important; left: 6px !important;
  width: calc((100% - 12px)/5) !important; height: calc(100% - 12px) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88),0 5px 16px rgba(40,34,48,.12) !important;
  transition: transform 360ms cubic-bezier(.2,.84,.25,1) !important;
  transform: translate3d(calc(var(--active-index,0) * 100%),0,0);
}
:is(.nav,#bottomNav).is-pressing:not(.is-dragging) :is(.nav-indicator,.bottomNav__indicator) { filter: brightness(1.04); }
:is(.nav,#bottomNav).is-dragging :is(.nav-indicator,.bottomNav__indicator) {
  transform: translate3d(var(--drag-x),0,0) !important;
  filter: none !important;
  transition: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88),0 5px 16px rgba(40,34,48,.12) !important;
}
:is(.nav,#bottomNav).is-dragging button { opacity: 1 !important; }
:is(.nav,#bottomNav).is-dragging button.drag-preview { color: #6f55a8 !important; transform: scale(1.06); }
:is(.nav,#bottomNav).is-dragging button .navIcon { display: block !important; visibility: visible !important; opacity: .96 !important; filter: none !important; }

@media (max-width:740px) {
  .dock { width: calc(100% - 18px); bottom: 9px !important; }
  .mini { grid-template-columns: 50px minmax(72px,1fr) auto; grid-template-rows: 50px 3px; min-height: 66px; padding: 7px 9px 6px 7px; column-gap: 8px; }
  .mini > img { width: 50px; height: 50px; border-radius: 13px; }
  .mini .icon,.mini .play { flex-basis: 38px; width: 38px; height: 38px; }
  .mini .mini-fav { font-size: 27px; }
  :is(.nav,#bottomNav) { width: min(342px,calc(100vw - 30px)) !important; height: 62px !important; min-height: 62px !important; padding: 5px !important; }
  .nav button,#bottomNav button { min-height: 52px !important; }
  .nav .navIcon,#bottomNav .navIcon { width: 25px !important; height: 25px !important; }
  :is(.nav-indicator,#bottomNav .bottomNav__indicator) { top: 5px !important; bottom: 5px !important; left: 5px !important; width: calc((100% - 10px)/5) !important; height: calc(100% - 10px) !important; }
}