/* ==========================================================================
   气泡音乐 — Neon skin
   Loaded after the theme stylesheet and the inline theme variables so it can
   replace colours, spacing and surfaces without touching 气泡音乐 features.
   ========================================================================== */

:root {
  --main-color: #d8ff3e !important;
  --second-color: #b8e600 !important;
  --neon-lime: #d8ff3e;
  --neon-lime-soft: rgba(216, 255, 62, 0.14);
  --neon-lime-line: rgba(216, 255, 62, 0.32);
  --neon-bg: #000000;
  --neon-surface: #111111;
  --neon-surface-2: #181818;
  --neon-surface-3: #202020;
  --neon-line: rgba(255, 255, 255, 0.08);
  --neon-line-strong: rgba(255, 255, 255, 0.14);
  --neon-text: #f7f7f5;
  --neon-muted: #8d8d8d;
  --neon-dim: #5f5f5f;
  --neon-radius: 20px;
  --neon-radius-sm: 14px;
  --neon-font: "Manrope", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --neon-display: "Manrope", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --neon-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

html {
  background: var(--neon-bg);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  background: var(--neon-bg) !important;
  color: var(--neon-text) !important;
  font-family: var(--neon-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.neon-has-ambient {
  background: #050505 !important;
}

::selection {
  background: var(--neon-lime);
  color: #000;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #2e2e2e;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

a {
  color: var(--neon-text);
}

a:hover {
  color: var(--neon-lime);
}

p,
span,
li,
label,
input,
textarea,
select,
button {
  font-family: var(--neon-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--neon-display) !important;
  letter-spacing: -0.025em;
  color: var(--neon-text);
}

/* Ambient artwork layer injected by neon.js */
.neon-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

body.neon-has-ambient .neon-ambient {
  opacity: 0.34;
}

.neon-ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(90px) saturate(1.6);
  transform: scale(1.25);
}

.neon-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.72) 44%, #000 82%);
}

.music_app {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: var(--neon-text) !important;
  padding-top: 92px !important;
}

.ma_page_content {
  margin-left: 248px;
  min-height: 100vh;
}

.ma_pc_inner {
  padding-bottom: 132px !important;
}

.page_padding {
  width: 100%;
  max-width: 1440px;
  padding: 18px 34px 0 !important;
  margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

#main-header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 76px;
}

header {
  height: 76px;
  padding: 0 30px !important;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.74) !important;
  border-bottom: 1px solid var(--neon-line);
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

header .head_menu {
  display: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin-right: 10px !important;
  border-radius: 50%;
  color: var(--neon-text);
  transition: background 0.2s ease;
}

header .head_menu:hover {
  background: rgba(255, 255, 255, 0.08);
}

header .head_menu svg {
  width: 22px;
  height: 22px;
}

header .head_logo {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  min-width: 176px;
}

header .head_logo a.brans {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  max-width: none !important;
  color: var(--neon-text) !important;
  text-decoration: none !important;
}

header .head_logo a.brans img,
header .head_logo a.brans > svg {
  display: none !important;
}

header .head_logo a.brans::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  background: url("../img/qipao-mark.png?v=20261105") center / contain no-repeat;
  mix-blend-mode: screen;
}

header .head_logo a.brans::after {
  content: "气泡音乐";
  display: block;
  font: 800 21px/1 var(--neon-display);
  letter-spacing: -0.055em;
  color: var(--neon-text);
}

header .mu_left_hdr_part {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 28px;
}

header .head_search {
  width: 100%;
}

header .head_search .head_search_cont input {
  height: 44px !important;
  width: 100% !important;
  padding: 0 48px 0 20px !important;
  background: #161616 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--neon-text) !important;
  font: 500 14px/1.4 var(--neon-font) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

header .head_search .head_search_cont input::placeholder {
  color: #777 !important;
}

header .head_search .head_search_cont input:focus {
  background: #1b1b1b !important;
  border-color: var(--neon-lime) !important;
  box-shadow: 0 0 0 4px rgba(216, 255, 62, 0.1) !important;
  border-radius: 999px !important;
}

header .head_search .head_search_cont > svg {
  right: 18px !important;
  width: 19px;
  height: 19px;
  color: #8b8b8b !important;
}

header .head_search .search_dropdown {
  top: 52px !important;
  background: #121212 !important;
  border: 1px solid var(--neon-line);
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden;
}

header .head_search .search_dropdown .trend_head {
  color: var(--neon-lime) !important;
  font: 700 11px/1.4 var(--neon-font) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 20px 8px !important;
}

header .head_search .search_dropdown .serach_trend a {
  color: #cfcfcf !important;
  font: 500 14px/1.4 var(--neon-font) !important;
  padding: 11px 20px !important;
}

header .head_search .search_dropdown .serach_trend a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

header .head_user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

header .head_user .notis,
header .head_user .music_opts {
  position: relative;
}

header .head_user .ds_hdr_top_btns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #c7c7c7;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

header .head_user .ds_hdr_top_btns:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

header .head_user .ds_hdr_top_btns svg {
  width: 20px;
  height: 20px;
}

header .head_user .hdr_dt_up_btns .ds_hdr_top_btns,
header .head_user .upload-song-btn,
header .head_user .import-song-btn {
  height: 38px;
  padding: 0 16px !important;
  border: 1px solid rgba(216, 255, 62, 0.28);
  background: rgba(216, 255, 62, 0.08);
  color: var(--neon-lime) !important;
  font: 700 13px/1 var(--neon-font) !important;
  letter-spacing: 0;
}

header .head_user .upload-song-btn:hover,
header .head_user .import-song-btn:hover {
  background: var(--neon-lime) !important;
  border-color: var(--neon-lime) !important;
  color: #000 !important;
}

header .ds_go_pro {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-left: 20px !important;
  padding: 0 16px !important;
  border: 1px solid var(--neon-lime-line) !important;
  border-radius: 999px !important;
  color: var(--neon-lime) !important;
  font: 700 12px/1 var(--neon-font) !important;
  letter-spacing: 0.01em !important;
}

header .head_user .opts_account > .d-inline-flex {
  gap: 9px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

header .head_user .opts_account > .d-inline-flex:hover {
  background: rgba(255, 255, 255, 0.06);
}

header .head_user .opts_account img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

header .head_user .opts_account > .d-inline-flex p {
  margin: 0;
  color: #efefef;
  font: 700 12px/1.25 var(--neon-font);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

header .head_user .opts_account > .d-inline-flex time {
  color: #7d7d7d;
  font: 500 10px/1.25 var(--neon-font);
}

header .head_user .unread_count,
header .head_user .unread_cart_count,
header .head_user .unread_R_count,
header .head_user span#new-messages {
  top: 2px !important;
  right: 4px !important;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--neon-lime) !important;
  color: #000 !important;
  font: 800 9px/16px var(--neon-font) !important;
  text-align: center;
}

header .head_user .mat-dropdown {
  margin-top: 12px;
  padding: 8px !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 18px !important;
  background: #131313 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
}

header .head_user .mat-dropdown ul li a {
  border-radius: 10px;
  color: #c8c8c8 !important;
  font: 500 13px/1.4 var(--neon-font) !important;
  padding: 10px 12px !important;
}

header .head_user .mat-dropdown ul li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

header .head_user .mat-dropdown ul li a svg {
  width: 18px;
  height: 18px;
}

header .head_user .mat-dropdown .divider {
  background: var(--neon-line);
}

/* ==========================================================================
   Desktop sidebar
   ========================================================================== */

.ma_sidebar {
  top: 76px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 248px !important;
  max-width: 248px !important;
  background: #050505 !important;
  border-right: 1px solid var(--neon-line) !important;
  box-shadow: none !important;
  padding: 10px 12px 24px;
  z-index: 990 !important;
}

.sidebar,
.sidebar .sidebar_innr {
  height: 100%;
}

.sidebar .logo_container {
  display: none;
}

.sidebar .sidebar_innr .sections {
  padding: 0;
  margin: 0;
}

.sidebar .sidebar_innr .sections h3 {
  padding: 22px 14px 9px !important;
  margin: 0 !important;
  border: 0 !important;
  color: #5e5e5e !important;
  font: 800 10px/1.2 var(--neon-font) !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase;
}

.sidebar .sidebar_innr .sections li {
  padding: 1px 0;
}

.sidebar .sidebar_innr .sections li a {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 14px !important;
  border-radius: 12px;
  color: #9b9b9b !important;
  font: 600 13.5px/1 var(--neon-font) !important;
  letter-spacing: -0.01em;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar .sidebar_innr .sections li a svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin-right: 13px !important;
  opacity: 0.9;
}

.sidebar .sidebar_innr .sections li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  transform: translateX(2px);
}

.sidebar .sidebar_innr .sections li.active a {
  background: var(--neon-lime) !important;
  color: #050505 !important;
  font-weight: 800 !important;
}

.sidebar .sidebar_innr .sections li.active a svg {
  opacity: 1;
}

.sidebar .sidebar_innr .sections li a:before {
  display: none !important;
}

.sidebar .sidebar_innr .sections li .mystore_menu_parent span {
  margin-left: auto;
}

.sidebar .sidebar_innr .sections li .mystore_menu_parent span svg {
  margin: 0;
  width: 15px !important;
  height: 15px !important;
}

/* Keep the rail expanded on desktop, collapse is no longer needed. */
@media (min-width: 1190px) {
  .ma_sidebar,
  body.side_open .ma_sidebar {
    width: 248px !important;
    max-width: 248px !important;
  }

  .sidebar .sidebar_innr .sections:first-child h3,
  .sidebar .sidebar_innr .sections h3,
  body.side_open .sidebar .sidebar_innr .sections h3 {
    display: block !important;
    border: 0 !important;
    font-size: 10px !important;
    padding: 22px 14px 9px !important;
    margin: 0 !important;
  }

  .sidebar .sidebar_innr .sections li a,
  body.side_open .sidebar .sidebar_innr .sections li a {
    padding: 0 14px !important;
    font-size: 13.5px !important;
    height: 45px;
  }

  .sidebar .sidebar_innr .sections li a svg {
    margin-right: 13px !important;
  }

  .ma_page_content,
  body.side_open .ma_page_content {
    margin-left: 248px !important;
  }

  .ma_footer,
  body.side_open .ma_footer {
    margin: 0 34px 0 282px !important;
  }

}

body.full_page .ma_page_content {
  margin-left: 0 !important;
}

/* ==========================================================================
   Type scale and common blocks
   ========================================================================== */

.home_widget_title {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  color: var(--neon-text) !important;
  font-family: var(--neon-display) !important;
}

.home_widget_title.home_big_title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 22px !important;
  font: 800 27px/1.15 var(--neon-display) !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  color: var(--neon-text) !important;
}

.home_widget_title.home_big_title::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: 0 0 18px rgba(216, 255, 62, 0.6);
}

.home_widget_title.home_big_title > span {
  display: none !important;
}

.home_widget_title .slide_btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.home_widget_title .slide_btns a {
  color: #8f8f8f !important;
  font: 600 12px/1 var(--neon-font) !important;
  letter-spacing: 0;
  padding: 8px 14px;
  border: 1px solid var(--neon-line);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.home_widget_title .slide_btns a:hover {
  color: #000 !important;
  background: var(--neon-lime);
  border-color: var(--neon-lime);
}

.section_title_neon {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 27px/1.15 var(--neon-display);
  letter-spacing: -0.035em;
  margin: 42px 0 20px;
}

.section_title_neon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-lime);
}

.page_margin {
  margin-top: 20px;
  margin-bottom: 40px;
}

.content {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line);
  border-radius: var(--neon-radius) !important;
  box-shadow: none !important;
  color: var(--neon-text);
}

/* ==========================================================================
   Discover / carousels / cards
   ========================================================================== */

.home_top_slider {
  margin-bottom: 38px !important;
}

.home_top_slider .item .card {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line) !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease;
}

.home_top_slider .item .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.home_top_slider .item .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(216, 255, 62, 0.18);
}

.home_top_slider .item .play_btn {
  width: 54px !important;
  height: 54px !important;
  background: var(--neon-lime) !important;
  color: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
  bottom: 14px;
  left: auto !important;
  right: 14px;
  top: auto !important;
  transform: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}

.home_top_slider .item .play_btn svg {
  display: none;
}

.home_top_slider .item .play_btn::before {
  content: "";
  width: 19px;
  height: 19px;
  margin-left: 3px;
  background: #050505;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.home_top_slider .item .card:hover .play_btn {
  transform: scale(1.07) !important;
  background: #e4ff71 !important;
}

.home_top_slider .item .bg_text {
  margin-top: 13px !important;
}

.home_top_slider .item .bg_text h2 {
  margin: 0 0 4px;
  font: 700 15px/1.3 var(--neon-display) !important;
  letter-spacing: -0.02em;
}

.home_top_slider .item .bg_text h2 a {
  color: #ececec !important;
}

.home_top_slider .item .bg_text p {
  margin: 0;
}

.home_top_slider .item .bg_text p a {
  color: #727272 !important;
  font: 500 12px/1.3 var(--neon-font) !important;
}

.home_top_slider.owl-carousel .owl-nav button span,
.mus_disc_new_trk.owl-carousel .owl-nav button span {
  width: 38px !important;
  height: 38px !important;
  background-color: #191919 !important;
  border: 1px solid var(--neon-line);
  box-shadow: none !important;
}

.home_top_slider.owl-carousel .owl-nav .owl-prev span,
.mus_disc_new_trk.owl-carousel .owl-nav .owl-prev span {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23ffffff' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' /%3e%3c/svg%3e") !important;
}

.home_top_slider.owl-carousel .owl-nav .owl-next span,
.mus_disc_new_trk.owl-carousel .owl-nav .owl-next span {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23ffffff' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /%3e%3c/svg%3e") !important;
}

/* Recently played cards */
.rp_slider {
  margin: 0 -8px !important;
}

.rp_slider .track_list {
  padding: 0 8px !important;
}

.rp_slider .track_list .track {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line);
  border-radius: 16px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rp_slider .track_list .track:hover {
  transform: translateY(-3px) !important;
  background: #171717 !important;
  border-color: rgba(216, 255, 62, 0.2);
}

.rp_slider .track_list .track .cover_art {
  width: 54px !important;
  height: 54px !important;
  margin-right: 13px !important;
}

.rp_slider .track_list .track .cover_art img {
  border-radius: 12px !important;
}

.rp_slider .track_list .track .track_info .title {
  font: 700 14px/1.3 var(--neon-display) !important;
  letter-spacing: -0.015em;
  color: #f0f0f0 !important;
}

.rp_slider .track_list .track .track_info .artist {
  font: 500 11px/1.3 var(--neon-font) !important;
  color: #7d7d7d !important;
  margin-top: 4px !important;
}

.rp_slider .track_list .track .track_info .play_btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(216, 255, 62, 0.12);
  border: 1px solid rgba(216, 255, 62, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp_slider .track_list .track .track_info .play_btn svg {
  width: 16px;
  height: 16px;
  color: var(--neon-lime);
}

.rp_slider .track_list .track:hover .track_info .play_btn {
  transform: none !important;
  background: var(--neon-lime);
}

.rp_slider .track_list .track:hover .track_info .play_btn svg {
  color: #050505;
}

/* Featured playlist */
.pop_playlist {
  position: relative;
  overflow: hidden;
  padding: 34px 38px 38px !important;
  border-radius: 26px !important;
  background: radial-gradient(120% 160% at 100% 0%, #31314a 0%, #1a1a2a 42%, #101016 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.pop_playlist::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: var(--neon-lime);
  opacity: 0.16;
  filter: blur(30px);
}

.pop_playlist h2 {
  position: relative;
  font: 800 clamp(36px, 3.4vw, 54px)/1.02 var(--neon-display) !important;
  letter-spacing: -0.06em;
  margin-bottom: 14px !important;
}

.pop_playlist .artist {
  position: relative;
  font: 500 17px/1.4 var(--neon-font) !important;
  color: #d0d0d0;
  margin-bottom: 10px !important;
}

.pop_playlist p {
  position: relative;
  font: 600 11px/1.4 var(--neon-font) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46) !important;
}

.pop_playlist .btn {
  position: relative;
  margin-top: 24px !important;
  height: 44px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: var(--neon-lime) !important;
  border: 0 !important;
  color: #050505 !important;
  font: 800 13px/44px var(--neon-font) !important;
  letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(216, 255, 62, 0.14);
}

.pop_playlist .btn svg {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.pop_playlist img {
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  transition: transform 0.3s ease;
}

.pop_playlist img:hover {
  transform: scale(1.015) rotate(-0.5deg);
}

/* Charts */
.top_playlists .top_playlist_list {
  border-bottom: 1px solid var(--neon-line) !important;
  padding: 18px 8px !important;
  border-radius: 12px;
}

.top_playlists .top_playlist_list:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}

.top_playlist_list > div:before {
  color: var(--neon-lime) !important;
  font: 800 13px/1 var(--neon-display) !important;
  width: 28px !important;
}

.top_playlist_list h3 {
  font: 700 15px/1.3 var(--neon-display) !important;
}

.top_playlist_list h3 a {
  color: #ededed !important;
}

.top_playlist_list p a {
  color: #727272 !important;
}

.top_playlist_list .btn {
  color: var(--neon-lime) !important;
  font-size: 0 !important;
}

.top_playlist_list .btn svg {
  width: 26px !important;
  height: 26px !important;
}

/* Track / album cards */
.sq_music_tracks .track .cover_art a,
.sq_music_tracks .track .cover_art a img {
  border-radius: 18px !important;
}

.sq_music_tracks .track .cover_art a {
  border: 1px solid var(--neon-line);
  background: var(--neon-surface) !important;
}

.sq_music_tracks .track {
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sq_music_tracks .track:hover {
  transform: translateY(-4px);
}

.sq_music_tracks .track .cover_art .play_btn {
  top: auto !important;
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  background: var(--neon-lime) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.sq_music_tracks .track:hover .cover_art .play_btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}

.sq_music_tracks .track .cover_art .play_btn svg {
  display: none;
}

.sq_music_tracks .track .cover_art .play_btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-46%, -50%);
  background: #050505;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sq_music_tracks .track .track_info {
  padding: 11px 2px 4px !important;
}

.sq_music_tracks .track .track_info .title {
  font: 700 14px/1.35 var(--neon-display) !important;
  letter-spacing: -0.015em;
  color: #ececec !important;
  margin: 0 0 3px !important;
}

.sq_music_tracks .track .track_info .artist {
  font: 500 12px/1.35 var(--neon-font) !important;
  color: #747474 !important;
}

.sq_music_tracks .track .track_info .artist svg {
  width: 13px !important;
  height: 13px !important;
}

.sq_music_tracks .track .track_info .play_btn {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--neon-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.sq_music_tracks .track .track_info .play_btn::before {
  content: "";
  width: 13px;
  height: 13px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sq_music_tracks .track:hover .track_info .play_btn {
  opacity: 1;
  transform: none !important;
}

.sq_music_tracks .track .track_info .play_btn:hover {
  background: var(--neon-lime) !important;
}

.sq_music_tracks .track .track_info .play_btn:hover::before {
  background: #000;
}

/* Song list rows */
.short_list_cont .s_lsongs_child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 12px;
  padding: 10px 8px !important;
  transition: background 0.18s ease;
}

.short_list_cont .s_lsongs_child:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}

.short_list_cont .s_lsongs_child .art_song,
.short_list_cont .s_lsongs_child .art_song img {
  border-radius: 10px !important;
}

.short_list_cont .s_lsongs_child .art_details h4 {
  font: 700 14px/1.35 var(--neon-display) !important;
  color: #ededed !important;
  letter-spacing: -0.01em;
}

.short_list_cont .s_lsongs_child .art_details p {
  color: #777 !important;
  font: 500 11px/1.3 var(--neon-font) !important;
}

.short_list_cont .s_lsongs_child .duration {
  color: #6d6d6d !important;
  font: 500 11px/1 var(--neon-font) !important;
}

.short_list_cont .home_tp_songs_list .s_lsongs_child {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line) !important;
  margin: 8px 0 !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
}

.short_list_cont .home_tp_songs_list .s_lsongs_child:hover {
  background: #181818 !important;
  border-color: rgba(216, 255, 62, 0.18) !important;
}

.short_list_cont .home_tp_songs_list .s_lsongs_child .art_song {
  width: 52px !important;
  height: 52px !important;
}

.short_list_cont .home_tp_songs_list .s_lsongs_child .art_details {
  padding-top: 0 !important;
  align-self: center;
}

/* Buttons, badges and pills */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background: var(--neon-lime) !important;
  border-color: var(--neon-lime) !important;
  color: #050505 !important;
  font-weight: 800;
}

.btn-primary:hover {
  background: #e8ff81 !important;
  border-color: #e8ff81 !important;
  color: #050505 !important;
}

.btn-outline-primary {
  color: var(--neon-lime) !important;
  border-color: var(--neon-lime-line) !important;
}

.btn-outline-primary:hover {
  background: var(--neon-lime) !important;
  color: #050505 !important;
}

.btn-mat {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font: 700 13px/1.2 var(--neon-font) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

.btn-primary-rev,
.btn-primary.btn-mat {
  box-shadow: none !important;
}

.btn-primary-rev {
  background: rgba(216, 255, 62, 0.08) !important;
  border: 1px solid rgba(216, 255, 62, 0.25) !important;
  color: var(--neon-lime) !important;
}

.btn-primary-rev:hover {
  background: var(--neon-lime) !important;
  color: #050505 !important;
}

.see_all a {
  color: #bcbcbc !important;
  background: #151515 !important;
  border: 1px solid var(--neon-line);
  box-shadow: none !important;
  font: 700 12px/42px var(--neon-font) !important;
  height: 42px;
  padding: 0 18px 0 40px !important;
  border-radius: 999px !important;
}

.see_all a:hover {
  color: #050505 !important;
  background: var(--neon-lime) !important;
  border-color: var(--neon-lime) !important;
}

.see_all a:before {
  left: 15px !important;
  width: 16px !important;
  height: 16px !important;
}

.badge,
.badge-primary,
.label {
  border-radius: 999px !important;
}

.badge-primary {
  background: var(--neon-lime) !important;
  color: #050505 !important;
}

/* Forms */
.mat_input input,
.mat_input select,
.mat_input textarea,
.form-control {
  background: #151515 !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 12px !important;
  color: var(--neon-text) !important;
  font-family: var(--neon-font) !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
}

.mat_input input:focus,
.mat_input select:focus,
.mat_input textarea:focus,
.form-control:focus {
  background: #191919 !important;
  border-color: var(--neon-lime) !important;
  box-shadow: 0 0 0 4px rgba(216, 255, 62, 0.09) !important;
  color: #fff !important;
}

.mat_input input[readonly],
.mat_input select:disabled {
  background: #101010 !important;
  color: #777 !important;
}

.mat_input.float > .form-control,
.mat_input.float > .form-select {
  border: 1px solid var(--neon-line) !important;
  border-radius: 12px !important;
  background: #141414 !important;
}

.mat_input.float > label {
  color: #777 !important;
}

.mat_input.float > .form-control:focus ~ label,
.mat_input.float > .form-control:not([type=hidden]):not(:placeholder-shown) ~ label,
.mat_input.float > .form-select ~ label,
.mat_input.float.done label {
  color: var(--neon-lime) !important;
}

.mat_input.float > .form-control.bootstrap-select > .dropdown-menu {
  background: #161616 !important;
  border-color: var(--neon-line) !important;
  border-radius: 12px !important;
}

.mat_input.float > .form-control.bootstrap-select > .dropdown-menu * {
  background-color: #161616 !important;
}

.mat_input.float > select {
  background-color: #141414 !important;
  border-radius: 12px !important;
}

.mat_input ul.tagit {
  border: 1px solid var(--neon-line) !important;
  border-radius: 12px !important;
  background: #141414 !important;
}

.modal-content {
  background: #131313 !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8) !important;
  color: var(--neon-text);
}

.modal-header,
.modal-footer {
  border-color: var(--neon-line) !important;
}

.modal-header .modal-title {
  font: 800 20px/1.3 var(--neon-display) !important;
  color: #fff;
}

.modal-footer .btn {
  border-radius: 999px !important;
}

.close {
  color: #fff !important;
  text-shadow: none !important;
  opacity: 0.7;
}

.close:hover {
  opacity: 1;
}

.mat-dropdown {
  background: #131313 !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
}

.mat-dropdown ul li a {
  color: #c8c8c8 !important;
  font: 500 13px/1.35 var(--neon-font) !important;
  border-radius: 9px;
}

.mat-dropdown ul li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* ==========================================================================
   Player
   ========================================================================== */

.ma_player {
  left: 272px !important;
  right: 24px !important;
  bottom: 16px !important;
  height: 84px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(10, 10, 10, 0.97)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  overflow: visible !important;
  z-index: 980 !important;
}

.ma_player.closed {
  bottom: -110px !important;
}

.ma_player .player {
  height: 84px !important;
  background: transparent !important;
  padding: 0 18px 0 14px !important;
  box-shadow: none !important;
  border-radius: 24px !important;
  overflow: hidden;
}

.player .song_details {
  width: 260px !important;
  min-width: 210px;
  max-width: 300px !important;
}

.player .song_details .song_details_inner {
  height: 84px !important;
}

.player .song_details .song_details_inner .song_art {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  margin-right: 13px !important;
}

.player .song_details .song_details_inner .song_art img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.player .song_details .song_title h3 {
  font: 800 14px/1.3 var(--neon-display) !important;
  letter-spacing: -0.015em;
  color: #f5f5f5 !important;
}

.player .song_details .song_title p {
  color: #7c7c7c !important;
  font: 500 11px/1.3 var(--neon-font) !important;
}

.player .song_details .song_title .song_time_sec {
  color: #6e6e6e;
  font-size: 10px !important;
}

.player .song_details .song_fav {
  color: #808080;
}

.player .song_details .song_fav:hover {
  color: var(--neon-lime) !important;
}

.player .song_progress {
  padding: 0 18px !important;
}

.player .song_progress .song_time {
  border: 0 !important;
  padding: 0 !important;
  gap: 8px;
  color: #7b7b7b !important;
  font: 500 10px/1 var(--neon-font) !important;
}

.player .song_progress .song_time .current_time,
.player .song_progress .song_time .duration_time {
  color: #7b7b7b !important;
  font-size: 10px !important;
}

.player .song_progress .song_time .progress_container {
  margin: 0 4px !important;
}

.player .song_progress .song_time .progress_container .amplitude-song-played-progress {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.player .song_progress .song_time .progress_container .amplitude-song-played-progress[value]::-webkit-progress-value {
  background: var(--neon-lime) !important;
  border-radius: 999px !important;
}

.player .song_progress .song_time .progress_container .amplitude-song-played-progress::-moz-progress-bar {
  background: var(--neon-lime) !important;
  border-radius: 999px !important;
}

.player .song_progress .song_time .progress_container .amplitude-buffered-progress {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.player .song_progress .song_time .progress_container input[type=range]::-webkit-slider-thumb {
  width: 12px !important;
  height: 12px !important;
  margin-top: -4.5px;
  background: var(--neon-lime) !important;
  border: 2px solid #111 !important;
  box-shadow: 0 0 0 3px rgba(216, 255, 62, 0.16);
}

.player .song_progress .song_controls {
  gap: 2px;
}

.player .song_progress .song_controls .amplitude-prev,
.player .song_progress .song_controls .amplitude-next,
.player .song_progress .song_controls .amplitude-shuffle,
.player .song_progress .song_controls .amplitude-repeat {
  margin: 0 8px !important;
  color: #8a8a8a !important;
}

.player .song_progress .song_controls .amplitude-prev:hover,
.player .song_progress .song_controls .amplitude-next:hover,
.player .song_progress .song_controls .amplitude-shuffle:hover,
.player .song_progress .song_controls .amplitude-repeat:hover {
  color: #fff !important;
}

.player .song_progress .song_controls .amplitude-prev svg,
.player .song_progress .song_controls .amplitude-next svg {
  width: 15px;
  height: 24px;
}

.player .song_progress .song_controls .amplitude-shuffle svg,
.player .song_progress .song_controls .amplitude-repeat svg {
  width: 20px;
  height: 20px;
}

.player .song_progress .song_controls .amplitude-play-pause {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
  background-color: var(--neon-lime) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23050505' d='M8,5.14V19.14L19,12.14L8,5.14Z' /%3e%3c/svg%3e") !important;
  background-size: 21px !important;
  box-shadow: 0 0 0 5px rgba(216, 255, 62, 0.08), 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.player .song_progress .song_controls .amplitude-play-pause:hover {
  transform: scale(1.06);
  background-color: #e7ff85 !important;
}

.player .song_progress .song_controls .amplitude-play-pause.amplitude-playing {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%23050505' d='M14,19H18V5H14M6,19H10V5H6V19Z' /%3e%3c/svg%3e") !important;
}

.player .song_progress_right {
  height: 84px !important;
}

.player .song_progress_right .song_volume .volume_controls input[type=range].amplitude-volume-slider {
  width: 92px !important;
}

.player .song_progress_right .song_volume .volume_controls input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
  height: 3px !important;
  background: #3c3c3c !important;
}

.player .song_progress_right .song_volume .volume_controls input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  background: var(--neon-lime) !important;
}

.player .song_progress_right .song_queue {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #8c8c8c;
  transition: background 0.2s ease, color 0.2s ease;
}

.player .song_progress_right .song_queue:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.player .song_progress_right .song_queue svg {
  width: 19px;
  height: 19px;
}

.ma_player_playlist {
  bottom: 96px !important;
  right: 0 !important;
  width: 360px !important;
  max-width: calc(100vw - 24px) !important;
  border-radius: 22px;
  background: #121212 !important;
  border: 1px solid var(--neon-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8) !important;
}

.ma_player_playlist .queue_head h4 {
  font: 800 15px/1.2 var(--neon-display);
}

.ma_player_playlist .queue_head span {
  color: #777;
}

/* ==========================================================================
   Single track, album, playlist detail pages
   ========================================================================== */

.single_song .ssong_header.blur {
  position: relative;
  padding: 56px 34px 120px;
  margin: -10px 0 0;
  background: transparent !important;
  overflow: hidden;
}

.single_song .ssong_header.blur .blur_img {
  position: absolute;
  inset: -20%;
  opacity: 0.55;
  filter: blur(80px) saturate(1.5);
  transform: scale(1.15);
}

.single_song .ssong_header.blur .blur_img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
}

.single_song .ssong_header.blur .container {
  position: relative;
  z-index: 2;
}

.single_song .ssong_header .ss_sub_head {
  margin-bottom: 48px !important;
}

.single_song .ssong_header .ss_sub_head h2 {
  font: 800 clamp(36px, 4.8vw, 68px)/1.0 var(--neon-display) !important;
  letter-spacing: -0.06em;
  margin-top: 16px;
}

.single_song .ssong_header .ss_sub_head h2 a {
  color: #fff !important;
}

.single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info {
  color: #d9d9d9 !important;
  font: 600 13px/1.2 var(--neon-font) !important;
}

.single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info img:not(.pro_packages_icon) {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
}

.single_song .ssong_header .ss_sub_head h2 .dropdown .btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--neon-line);
  width: 38px !important;
  height: 38px !important;
}

.single_song .ssong_header .ss_sub_head .mus_track_toolbar {
  margin-top: 18px;
  gap: 4px;
  flex-wrap: wrap;
}

.single_song .ssong_header .ss_sub_head .mus_track_toolbar .btn,
.single_song .ssong_header .ss_sub_head .mus_track_toolbar .ss_action_item {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--neon-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05);
  color: #e5e5e5 !important;
  font: 600 12px/40px var(--neon-font) !important;
}

.single_song .ssong_header .ss_sub_head .mus_track_toolbar .btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}

.single_song .ssong_header .ss_sub_head .published,
.single_song .ssong_header .ss_sub_head .ss_publisher_info > span {
  color: #8a8a8a !important;
  font: 500 12px/1.4 var(--neon-font) !important;
}

.single_song .ssong_header .ss_sub_body .ss_image {
  border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.single_song .ssong_header .ss_sub_body .ss_track_info_innr {
  margin-left: 0 !important;
}

.single_song .ssong_header .ss_sub_body .ss_track_info_innr .ss_track_info_innr {
  margin-left: 0;
}

.single_song .ssong_header .ss_sub_body .ss_release_date {
  border-color: var(--neon-line) !important;
  color: #8b8b8b;
}

.single_song .ssong_header .ss_sub_body .ss_track_info {
  color: #b0b0b0;
}

/* Generic page hero / headers */
.artist_header .artist_cover,
.user_header .user_cover,
.album_bg_cover {
  border-radius: 24px;
}

.album_bg_cover {
  overflow: hidden;
}

.album_poster_info .al_art {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.album_poster_info .al_name {
  font: 800 clamp(30px, 4vw, 60px)/1.02 var(--neon-display);
  letter-spacing: -0.05em;
}

.album_poster_info .al_artist a,
.artist_user_info .info_container h4 a {
  color: #fff !important;
}

.artist_user_info .avatar_container .avatar,
.artist_user_info .avatar_container img {
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.artist_user_info .info_container h4 {
  font: 800 clamp(40px, 6vw, 84px)/0.98 var(--neon-display) !important;
  letter-spacing: -0.06em;
}

/* Auth modal */
.auth_box_prnt {
  background: rgba(0, 0, 0, 0.8) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.auth_box .modal-content {
  border-radius: 28px !important;
  background: #101010 !important;
  min-height: 560px;
}

.auth_box .right_combo {
  background: #0c0c0c !important;
  padding: 48px !important;
}

.auth_box .left_combo {
  background: radial-gradient(120% 110% at 0% 0%, #2b3016 0%, #15170d 45%, #0a0a0a 100%) !important;
}

.auth_box .right_combo > .navbar-brand img {
  content: url("../img/qipao-mark.png?v=20261105");
  width: 50px;
  height: 50px;
  max-width: 50px;
  mix-blend-mode: screen;
}

.auth_box .right_combo > h2 {
  font: 800 40px/1.06 var(--neon-display) !important;
  letter-spacing: -0.05em;
  color: #fff !important;
}

.auth_box .right_combo > p {
  color: #818181 !important;
  font: 400 14px/1.6 var(--neon-font) !important;
}

.auth_box .right_combo .mat_input input {
  height: 50px !important;
  padding: 9px 18px 9px 48px !important;
  border-radius: 14px !important;
  background: #161616 !important;
  border: 1px solid var(--neon-line) !important;
  font: 500 14px/1.4 var(--neon-font) !important;
}

.auth_box .right_combo .mat_input > svg {
  left: 17px !important;
  color: #777;
}

.auth_box .right_combo .btn-mat {
  width: 100%;
  height: 50px;
  line-height: 30px !important;
  margin-top: 16px;
  background: var(--neon-lime) !important;
  color: #050505 !important;
  border-radius: 14px !important;
  font: 800 14px/1.2 var(--neon-font) !important;
}

.auth_box .right_combo .forgot_password a {
  color: #858585 !important;
  font-size: 12px;
}

.auth_box .right_combo .forgot_password a:hover {
  color: var(--neon-lime) !important;
}

/* Upload / settings / dashboard cards */
.upload_music .upload_form,
.sett_page .st_content,
.ma_dashboard .content,
.ds_create_edit_prods,
.ds_create_edit_ads_cont {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line);
  border-radius: var(--neon-radius) !important;
  box-shadow: none !important;
}

.mat_sett_btn .btn {
  border-radius: 999px !important;
}

.ds_media_file {
  border-radius: 14px;
  overflow: hidden;
}

/* Ad slots blend in */
.ads_contents,
.ad-container,
[class*="ads-"] iframe {
  border-radius: 14px;
}

/* Footer */
.ma_footer {
  margin: 28px 34px 0 282px !important;
  color: #5e5e5e;
  border-top: 1px solid var(--neon-line);
  padding-top: 26px;
}

.ma_footer a {
  color: #717171 !important;
}

.ma_footer a:hover {
  color: var(--neon-lime) !important;
}

.ma_footer .ma_footer_cright {
  color: #565656;
}

/* ==========================================================================
   Mobile app chrome
   ========================================================================== */

.neon-tabbar {
  display: none;
}

@media (max-width: 1024px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .music_app {
    padding-top: 64px !important;
  }

  #main-header {
    height: 64px;
  }

  header {
    height: 64px !important;
    padding: 0 14px !important;
    background: rgba(0, 0, 0, 0.82) !important;
    border-bottom: 1px solid var(--neon-line);
  }

  header .head_menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 6px 0 0 !important;
    padding: 8px !important;
  }

  header .head_logo {
    min-width: 0 !important;
  }

  header .head_logo a.brans {
    gap: 8px;
  }

  header .head_logo a.brans::before {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  header .head_logo a.brans::after {
    font-size: 18px;
  }

  header .mu_left_hdr_part {
    max-width: none !important;
    padding: 0 8px !important;
  }

  header .head_search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 1100;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform: translateY(-70px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  body.search_open header .head_search {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  header .head_search .head_search_cont input {
    height: 44px !important;
    border-radius: 999px !important;
    background: #161616 !important;
    border: 1px solid var(--neon-line) !important;
    padding: 0 20px 0 48px !important;
  }

  header .head_search .head_search_cont > svg {
    left: 18px !important;
    right: auto !important;
  }

  header .head_user {
    margin-left: auto;
    gap: 0;
  }

  header .head_user .hdr_dt_up_btns,
  header .head_user .music_opts,
  header .head_user .cart_items,
  header .head_user .notis:not(.ds_hdr_search_btn):not(.chaticon),
  header .head_user .opts_account > .d-inline-flex > div {
    display: none !important;
  }

  header .head_user .chaticon {
    display: inline-flex !important;
  }

  header .head_user .ds_hdr_top_btns {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0 !important;
  }

  header .head_user .opts_account img {
    width: 32px !important;
    height: 32px !important;
  }

  header .ds_go_pro {
    display: none !important;
  }

  .ma_sidebar {
    top: 64px !important;
    bottom: 0 !important;
    height: calc(100% - 64px) !important;
    left: -320px !important;
    width: min(310px, calc(100vw - 48px)) !important;
    max-width: 320px !important;
    padding: 20px 12px calc(26px + env(safe-area-inset-bottom)) !important;
    border-right: 1px solid var(--neon-line) !important;
    border-radius: 0 24px 24px 0;
    background: #080808 !important;
    z-index: 2200 !important;
    transition: left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.7) !important;
  }

  body.side_open .ma_sidebar {
    left: 0 !important;
  }

  .sidebar .sidebar_innr .sections h3 {
    display: block !important;
    font-size: 10px !important;
    padding: 20px 14px 8px !important;
  }

  .sidebar .sidebar_innr .sections li a {
    height: 46px;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  .ma_page_content {
    margin-left: 0 !important;
  }

  .ma_pc_inner {
    padding-bottom: 196px !important;
  }

  .page_padding {
    padding: 10px 16px 0 !important;
    max-width: none;
  }

  .home_widget_title.home_big_title {
    margin: 32px 0 16px !important;
    font-size: 22px !important;
  }

  .home_widget_title .slide_btns a {
    padding: 7px 11px;
    font-size: 11px !important;
  }

  .rp_slider .track_list {
    width: 100% !important;
  }

  .pop_playlist {
    border-radius: 22px !important;
    padding: 26px 22px 28px !important;
  }

  .pop_playlist h2 {
    font-size: 38px !important;
  }

  .pop_playlist img {
    margin-top: 22px;
  }

  .single_song .ssong_header.blur {
    margin: -10px 0 0;
    padding: 34px 16px 90px;
  }

  .single_song .ssong_header .ss_sub_head h2 {
    font-size: 34px !important;
  }

  .single_song .ssong_header .ss_sub_body .ss_image {
    border-radius: 20px !important;
  }

  .ma_player {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    height: 64px !important;
    border-radius: 18px !important;
  }

  .ma_player.closed {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .ma_player .player {
    height: 64px !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
  }

  .player .song_details {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto;
    max-width: none !important;
  }

  .player .song_details .song_details_inner {
    height: 64px !important;
  }

  .player .song_details .song_details_inner .song_art {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin-right: 10px !important;
  }

  .player .song_details .song_details_inner .song_art img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
  }

  .player .song_details .song_title h3 {
    font-size: 12.5px !important;
  }

  .player .song_details .song_title p {
    font-size: 10px !important;
  }

  .player .song_progress {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 4px !important;
  }

  .player .song_progress .song_time {
    display: none !important;
  }

  .player .song_progress .song_controls {
    display: flex;
    align-items: center;
  }

  .player .song_progress .song_controls .amplitude-shuffle,
  .player .song_progress .song_controls .amplitude-prev,
  .player .song_progress .song_controls .amplitude-next,
  .player .song_progress .song_controls .amplitude-repeat {
    display: none !important;
  }

  .player .song_progress .song_controls .amplitude-play-pause {
    width: 38px !important;
    height: 38px !important;
    background-size: 17px !important;
    box-shadow: 0 0 0 3px rgba(216, 255, 62, 0.08);
  }

  .player .song_progress_right {
    display: flex !important;
    height: 64px !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-left: 0;
  }

  .player .song_progress_right .song_volume,
  .player .song_progress_right .song_rs_controls,
  .player .song_progress_right .song_queue:not(.song_queued) {
    display: none !important;
  }

  .player .song_progress_right .song_queue.song_queued {
    display: flex !important;
    width: 32px;
    height: 32px;
  }

  .ma_player_playlist {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 70vh;
    border-radius: 22px 22px 0 0;
    z-index: 1200;
  }

  .ma_footer {
    display: none !important;
  }

  .neon-tabbar {
    position: fixed;
    display: flex;
    align-items: stretch;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: 60px;
    z-index: 1150;
    padding: 6px 4px;
    border-radius: 20px;
    background: rgba(16, 16, 16, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
  }

  .neon-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 14px;
    color: #767676 !important;
    text-decoration: none !important;
    transition: color 0.18s ease, background 0.18s ease;
  }

  .neon-tabbar a svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
  }

  .neon-tabbar a span {
    font: 700 9px/1 var(--neon-font);
    letter-spacing: 0.01em;
  }

  .neon-tabbar a.active {
    color: var(--neon-lime) !important;
    background: rgba(216, 255, 62, 0.09);
  }

  .neon-tabbar a.active span {
    color: var(--neon-lime);
  }

  body.neon-tabbar-ready .ma_player {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
  }

  /* Cards on mobile */
  .sq_track_slider.no-slider {
    margin: 0 -7px !important;
  }

  .sq_track_slider.no-slider .track_list {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    padding: 7px !important;
  }

  .sq_music_tracks .track .cover_art a,
  .sq_music_tracks .track .cover_art a img {
    border-radius: 14px !important;
  }

  .sq_music_tracks .track .track_info .title {
    font-size: 12.5px !important;
  }

  .sq_music_tracks .track .track_info .artist {
    font-size: 11px !important;
  }

  .sq_music_tracks .track .track_info .play_btn {
    display: none;
  }

  .home_top_slider {
    margin-bottom: 26px !important;
  }

  .home_top_slider .item .bg_text h2 {
    font-size: 14px !important;
  }

  .home_top_slider .item .play_btn {
    width: 44px !important;
    height: 44px !important;
  }

  .top_playlist_list {
    padding: 15px 4px !important;
  }

  .short_list_cont .home_tp_songs_list .s_lsongs_child {
    border-radius: 13px !important;
  }

  .home_widget_title.home_big_title::before {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
  }
}

@media (max-width: 600px) {
  .page_padding {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header .head_logo a.brans::after {
    content: "气泡音乐";
    font-size: 17px;
    font-weight: 800;
  }

  .home_widget_title.home_big_title {
    font-size: 21px !important;
    margin-top: 28px !important;
  }

  .pop_playlist h2 {
    font-size: 32px !important;
  }

  .pop_playlist .artist {
    font-size: 14px !important;
  }

  .pop_playlist .btn {
    height: 40px;
    font-size: 12px !important;
    line-height: 40px !important;
  }

  .short_list_cont .s_lsongs_child .art_details p {
    font-size: 10px !important;
  }

  .single_song .ssong_header .ss_sub_head h2 {
    font-size: 30px !important;
  }

  .single_song .ssong_header .ss_sub_head .mus_track_toolbar .btn {
    height: 36px;
    padding: 0 13px;
    font-size: 11px !important;
    line-height: 36px !important;
  }

  .neon-tabbar {
    height: 58px;
  }

  .ma_pc_inner {
    padding-bottom: 186px !important;
  }
}

@media (max-width: 400px) {
  header .head_logo a.brans::after {
    font-size: 16px;
  }

  .sq_track_slider.no-slider .track_list {
    flex: 0 0 50% !important;
    width: 50% !important;
  }
}

/* Utility: hide the old multicolor page loader for a cleaner app frame */
#bar_loading {
  background: var(--neon-lime) !important;
  height: 2px !important;
}

/* Neon page intro injected on the discover page */
.neon-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 2px 8px;
}

.neon-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--neon-lime);
  font: 800 10px/1.2 var(--neon-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.neon-intro .eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--neon-lime);
}

.neon-intro h1 {
  margin: 0;
  color: #fff;
  font: 800 clamp(32px, 4vw, 52px)/1.02 var(--neon-display);
  letter-spacing: -0.06em;
}

.neon-intro p {
  margin: 9px 0 0;
  color: #777;
  font: 500 13px/1.5 var(--neon-font);
}

.neon-intro .neon-intro-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--neon-line);
  color: #a8a8a8;
  font: 600 11px/1 var(--neon-font);
}

.neon-intro .neon-intro-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: 0 0 10px rgba(216, 255, 62, 0.8);
}

@media (max-width: 768px) {
  .neon-intro {
    padding: 20px 0 2px;
    display: block;
  }

  .neon-intro .neon-intro-badge {
    display: none;
  }

  .neon-intro h1 {
    font-size: 31px;
  }

  .neon-intro p {
    font-size: 12px;
    margin-top: 6px;
  }
}

/* 气泡音乐's own modal is sometimes taller than the viewport on phones */
@media (max-width: 600px) {
  .auth_box {
    width: calc(100vw - 20px);
    max-width: 460px;
  }

  .auth_box .right_combo {
    padding: 34px 22px !important;
  }

  .auth_box .modal-content {
    min-height: 0;
  }

  .auth_box .right_combo > h2 {
    font-size: 32px !important;
  }

  .auth_box .right_combo > p {
    font-size: 13px !important;
  }
}

/* Settings page: Neon list + readable active state */
.sett_page {
  max-width: 1180px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sett_page .st_sidebar {
  margin-bottom: 18px !important;
  padding: 8px !important;
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line);
  border-radius: 18px !important;
}

.sett_page .st_sidebar li {
  margin: 1px 0;
}

.sett_page .st_sidebar li a {
  padding: 11px 14px !important;
  border-radius: 11px;
  color: #9a9a9a !important;
  font: 600 13px/1.4 var(--neon-font) !important;
}

.sett_page .st_sidebar li a svg {
  width: 17px !important;
  height: 17px !important;
  margin-right: 10px;
}

.sett_page .st_sidebar li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

.sett_page .st_sidebar li.active a {
  background: var(--neon-lime) !important;
  color: #050505 !important;
  font-weight: 800 !important;
}

.sett_page .st_sidebar li.active a svg {
  color: #050505 !important;
}

.sett_page .st_content {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line);
  border-radius: 20px !important;
  padding: 26px !important;
}

.sett_page .st_content .st_form h3 {
  font: 800 25px/1.2 var(--neon-display) !important;
  letter-spacing: -0.03em;
  color: #fff;
}

.sett_page > h3 {
  text-align: left !important;
  font-weight: 800 !important;
}

.sett_page .mat_sett_btn {
  gap: 10px;
  padding-top: 8px;
}

.sett_page .mat_sett_btn .btn {
  background: var(--neon-lime) !important;
  border-color: var(--neon-lime) !important;
  color: #050505 !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .sett_page {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .sett_page .st_sidebar {
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 14px !important;
  }

  .sett_page .st_sidebar ul {
    display: flex;
  }

  .sett_page .st_sidebar li a {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .sett_page .st_sidebar li a svg {
    display: none;
  }

  .sett_page .st_content {
    padding: 18px !important;
    border-radius: 16px !important;
  }
}

/* ==========================================================================
   Logged-out landing page
   ========================================================================== */

.neon-landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(80% 55% at 78% 0%, rgba(216, 255, 62, 0.13) 0%, rgba(216, 255, 62, 0.03) 32%, transparent 66%),
    #000;
  color: var(--neon-text);
}

.neon-landing::before {
  content: "";
  position: absolute;
  top: -260px;
  right: -180px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: var(--neon-lime);
  opacity: 0.06;
  filter: blur(120px);
  pointer-events: none;
}

.neon-landing-nav {
  position: relative;
  z-index: 5;
  max-width: 1440px;
  height: 88px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid var(--neon-line);
}

.neon-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  text-decoration: none !important;
  flex: 0 0 auto;
}

.neon-landing-brand img {
  width: 46px;
  height: 46px;
  mix-blend-mode: screen;
}

.neon-landing-brand span {
  font: 800 21px/1 var(--neon-display);
  letter-spacing: -0.055em;
}

.neon-landing-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.neon-landing-links a {
  position: relative;
  color: #8f8f8f !important;
  font: 600 13px/1 var(--neon-font);
  text-decoration: none !important;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.neon-landing-links a:hover,
.neon-landing-links a.active {
  color: #fff !important;
}

.neon-landing-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: 0 0 12px rgba(216, 255, 62, 0.8);
}

.neon-landing-search {
  flex: 1 1 auto;
  max-width: 380px;
  margin-left: auto;
  position: relative;
}

.neon-landing-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: #777;
  stroke-width: 1.8;
}

.neon-landing-search input {
  width: 100%;
  height: 42px;
  padding: 0 18px 0 44px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #151515;
  color: #fff;
  font: 500 13px/1.4 var(--neon-font);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.neon-landing-search input::placeholder {
  color: #6f6f6f;
}

.neon-landing-search input:focus {
  border-color: var(--neon-lime);
  box-shadow: 0 0 0 4px rgba(216, 255, 62, 0.08);
}

.neon-landing-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.neon-login-link {
  color: #b9b9b9 !important;
  font: 600 13px/1 var(--neon-font);
  text-decoration: none !important;
}

.neon-login-link:hover {
  color: #fff !important;
}

.neon-signup-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--neon-lime);
  color: #050505 !important;
  font: 800 12px/1 var(--neon-font);
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(216, 255, 62, 0.12);
}

.neon-signup-btn:hover {
  background: #e7ff85;
  color: #000 !important;
}

.neon-landing-main {
  position: relative;
  z-index: 2;
}

.neon-hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: 74px 40px 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  gap: 70px;
  align-items: center;
  min-height: calc(100vh - 88px);
}

.neon-hero-copy {
  padding-left: 12px;
}

.neon-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--neon-lime);
  font: 800 10px/1.2 var(--neon-font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.neon-hero-eyebrow i {
  width: 22px;
  height: 1px;
  background: var(--neon-lime);
}

.neon-hero h1 {
  margin: 0;
  color: #fff;
  font: 800 clamp(64px, 7.6vw, 110px)/0.92 var(--neon-display);
  letter-spacing: -0.075em;
}

.neon-hero h1 span {
  color: var(--neon-lime);
}

.neon-hero-lead {
  max-width: 450px;
  margin: 28px 0 0;
  color: #8a8a8a;
  font: 500 15px/1.7 var(--neon-font);
}

.neon-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.neon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font: 800 13px/1 var(--neon-font);
  text-decoration: none !important;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.neon-btn:hover {
  transform: translateY(-2px);
}

.neon-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.neon-btn-primary {
  background: var(--neon-lime);
  color: #050505 !important;
  box-shadow: 0 12px 34px rgba(216, 255, 62, 0.15);
}

.neon-btn-primary:hover {
  background: #e9ff88;
  color: #050505 !important;
}

.neon-btn-ghost {
  border: 1px solid var(--neon-line-strong);
  color: #d6d6d6 !important;
  background: rgba(255, 255, 255, 0.025);
}

.neon-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
}

.neon-hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  color: #6f6f6f;
}

.neon-avatars {
  display: flex;
  align-items: center;
}

.neon-avatars img {
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border: 2px solid #000;
  border-radius: 50%;
  object-fit: cover;
}

.neon-avatars img:first-child {
  margin-left: 0;
}

.neon-hero-proof strong {
  display: block;
  color: #efefef;
  font: 800 17px/1 var(--neon-display);
  letter-spacing: -0.03em;
}

.neon-hero-proof span {
  display: block;
  margin-top: 3px;
  color: #696969;
  font: 500 10px/1.2 var(--neon-font);
}

.neon-proof-divider {
  width: 1px;
  height: 28px;
  background: var(--neon-line);
}

.neon-hero-art {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neon-hero-glow {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #8cff00, #14ff9a, #6cff00, #beff00, #8cff00);
  filter: blur(80px);
  opacity: 0.17;
}

.neon-hero-cover {
  position: relative;
  display: block;
  width: min(430px, 37vw);
  aspect-ratio: 1;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.72);
  transform: rotate(-4deg);
  text-decoration: none !important;
}

.neon-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.52));
}

.neon-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.neon-hero-cover:hover img {
  transform: scale(1.04);
}

.neon-cover-play {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--neon-lime);
  color: #050505;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.neon-cover-play svg {
  width: 23px;
  height: 23px;
  margin-left: 3px;
}

.neon-hero-note {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 4;
  width: min(330px, 30vw);
  padding: 17px 20px 15px;
  border-radius: 20px;
  background: rgba(12, 12, 12, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  transform: translateX(-52%);
}

.neon-hero-note-kicker {
  color: var(--neon-lime);
  font: 800 8px/1.2 var(--neon-font);
  letter-spacing: 0.2em;
}

.neon-hero-note strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font: 800 15px/1.3 var(--neon-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neon-hero-note > span:not(.neon-hero-note-kicker) {
  display: block;
  margin-top: 3px;
  color: #777;
  font: 500 10px/1.3 var(--neon-font);
}

.neon-hero-progress {
  margin-top: 12px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.13);
}

.neon-hero-progress i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: var(--neon-lime);
}

.neon-hero-note-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: #666;
  font: 500 8px/1 var(--neon-font);
}

.neon-hero-chip {
  position: absolute;
  right: 6%;
  top: 12%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 16px;
  background: var(--neon-lime);
  color: #050505;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  transform: rotate(3deg);
}

.neon-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.08);
}

.neon-hero-chip b {
  display: block;
  font: 800 15px/1 var(--neon-display);
}

.neon-hero-chip small {
  display: block;
  margin-top: 3px;
  font: 700 8px/1 var(--neon-font);
  opacity: 0.7;
}

.neon-hero-float {
  position: absolute;
  left: 4%;
  top: 16%;
  color: #7c7c7c;
  font: 600 10px/1 var(--neon-font);
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.neon-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 40px 70px;
}

.neon-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.neon-kicker {
  display: block;
  color: var(--neon-lime);
  font: 800 9px/1.2 var(--neon-font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.neon-section-head h2,
.neon-cta h2 {
  margin: 0;
  color: #fff;
  font: 800 clamp(30px, 3.2vw, 46px)/1.02 var(--neon-display);
  letter-spacing: -0.055em;
}

.neon-section-head > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8a8a8a !important;
  font: 600 12px/1 var(--neon-font);
  text-decoration: none !important;
  border: 1px solid var(--neon-line);
  border-radius: 999px;
  padding: 10px 15px;
  transition: all 0.2s ease;
}

.neon-section-head > a svg {
  width: 14px;
  height: 14px;
}

.neon-section-head > a:hover {
  color: #000 !important;
  background: var(--neon-lime);
  border-color: var(--neon-lime);
}

.neon-trending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.neon-trending-grid .track_list {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}

.neon-trending-grid .track {
  padding: 0;
}

.neon-trending-grid .cover_art a {
  border-radius: 20px !important;
  border: 1px solid var(--neon-line);
}

.neon-trending-grid .track_info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 2px 0 !important;
}

.neon-trending-grid .track_info .title {
  font: 700 14px/1.35 var(--neon-display) !important;
  color: #eaeaea !important;
}

.neon-trending-grid .track_info .artist {
  font: 500 11px/1.35 var(--neon-font) !important;
  color: #6f6f6f !important;
}

.neon-trending-grid .track_info .play_btn {
  color: var(--neon-lime) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.neon-trending-grid .track_info .play_btn svg {
  width: 22px;
  height: 22px;
}

.neon-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 30px;
}

.neon-feature-card {
  padding: 30px;
  border-radius: 24px;
  background: var(--neon-surface);
  border: 1px solid var(--neon-line);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.neon-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 255, 62, 0.18);
}

.neon-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--neon-lime-soft);
  color: var(--neon-lime);
  margin-bottom: 24px;
}

.neon-feature-icon svg {
  width: 22px;
  height: 22px;
}

.neon-feature-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font: 800 19px/1.25 var(--neon-display);
  letter-spacing: -0.03em;
}

.neon-feature-card p {
  margin: 0;
  color: #747474;
  font: 500 12px/1.7 var(--neon-font);
}

.neon-cta {
  max-width: 1440px;
  margin: 30px auto 90px;
  padding: 46px 46px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  border-radius: 32px;
  background:
    radial-gradient(120% 160% at 90% 0%, rgba(255, 255, 255, 0.36) 0%, transparent 44%),
    linear-gradient(135deg, #d8ff3e 0%, #b9f000 52%, #b8ff00 100%);
  color: #050505;
}

.neon-cta .neon-kicker {
  color: rgba(0, 0, 0, 0.55);
}

.neon-cta h2 {
  color: #050505;
  font-size: clamp(34px, 4.6vw, 68px);
}

.neon-cta .neon-btn-primary {
  flex: 0 0 auto;
  background: #050505;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.neon-cta .neon-btn-primary:hover {
  background: #191919;
}

.neon-landing-footer {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 40px 46px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--neon-line);
  color: #5f5f5f;
}

.neon-landing-footer .neon-landing-brand img {
  width: 30px;
  height: 30px;
}

.neon-landing-footer .neon-landing-brand span {
  font-size: 16px;
}

.neon-landing-footer p {
  margin: 0;
  color: #585858;
  font: 500 11px/1.4 var(--neon-font);
}

.neon-copyright {
  margin-left: auto;
  color: #4d4d4d;
  font: 500 10px/1 var(--neon-font);
}

@media (max-width: 1100px) {
  .neon-landing-links {
    display: none;
  }

  .neon-landing-search {
    margin-left: 0;
    max-width: 330px;
  }

  .neon-hero {
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
  }

  .neon-hero-art {
    min-height: 500px;
  }

  .neon-hero h1 {
    font-size: clamp(54px, 7.4vw, 82px);
  }

  .neon-hero-cover {
    width: min(360px, 38vw);
  }

  .neon-hero-note {
    width: min(300px, 32vw);
  }
}

@media (max-width: 900px) {
  .neon-landing-nav {
    height: 68px;
    padding: 0 18px;
    gap: 14px;
  }

  .neon-landing-search {
    display: none;
  }

  .neon-landing-actions {
    margin-left: auto;
    gap: 12px;
  }

  .neon-login-link {
    font-size: 12px;
  }

  .neon-signup-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
  }

  .neon-hero {
    display: flex;
    flex-direction: column;
    padding: 40px 18px 54px;
    min-height: 0;
    gap: 38px;
  }

  .neon-hero-copy {
    padding-left: 0;
    width: 100%;
  }

  .neon-hero-eyebrow {
    margin-bottom: 16px;
  }

  .neon-hero h1 {
    font-size: clamp(48px, 12vw, 70px);
  }

  .neon-hero-lead {
    font-size: 13px;
    margin-top: 18px;
    max-width: 100%;
  }

  .neon-hero-actions {
    margin-top: 24px;
  }

  .neon-btn {
    height: 46px;
    padding: 0 20px;
    font-size: 12px;
  }

  .neon-hero-proof {
    margin-top: 28px;
    flex-wrap: wrap;
  }

  .neon-hero-art {
    width: 100%;
    min-height: 360px;
    margin-top: 4px;
  }

  .neon-hero-cover {
    width: min(300px, 70vw);
    border-radius: 26px;
  }

  .neon-hero-note {
    width: min(265px, 66vw);
    left: 50%;
    bottom: -12px;
    padding: 13px 16px 12px;
    border-radius: 16px;
  }

  .neon-hero-chip {
    right: 2%;
    top: 5%;
    padding: 9px 13px;
  }

  .neon-hero-float {
    display: none;
  }

  .neon-section {
    padding: 20px 18px 44px;
  }

  .neon-section-head {
    margin-bottom: 20px;
  }

  .neon-section-head h2 {
    font-size: 28px;
  }

  .neon-trending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .neon-trending-grid .cover_art a {
    border-radius: 15px !important;
  }

  .neon-trending-grid .track_info .title {
    font-size: 12.5px !important;
  }

  .neon-features {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 8px;
  }

  .neon-feature-card {
    padding: 22px;
    border-radius: 20px;
  }

  .neon-feature-icon {
    margin-bottom: 16px;
  }

  .neon-cta {
    margin: 16px 14px 50px;
    padding: 28px 22px 32px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 24px;
  }

  .neon-cta h2 {
    font-size: 32px;
  }

  .neon-landing-footer {
    padding: 22px 18px 34px;
    flex-wrap: wrap;
  }

  .neon-landing-footer p {
    width: 100%;
    order: 3;
  }

  .neon-copyright {
    order: 2;
  }
}

@media (max-width: 380px) {
  .neon-hero h1 {
    font-size: 43px;
  }

  .neon-hero-proof {
    gap: 10px;
  }

  .neon-hero-note {
    width: 74vw;
    left: 46%;
  }
}

/* 404 and auth utility pages */
.reset_page {
  padding: 24px 16px !important;
  min-height: calc(100vh - 190px) !important;
}

.ma_404 {
  max-width: 620px !important;
  padding: 0 8px;
}

.ma_404 > svg {
  width: min(400px, 82vw) !important;
  height: auto !important;
  margin: 0 auto 6px !important;
  display: block;
}

.ma_404 h3 {
  font: 800 clamp(26px, 4vw, 44px)/1.15 var(--neon-display) !important;
  letter-spacing: -0.045em !important;
  color: #fff !important;
  margin: 10px 0 12px !important;
}

.ma_404 p {
  font: 500 13px/1.7 var(--neon-font) !important;
  color: #7b7b7b !important;
  max-width: 440px;
  margin: 0 auto 26px !important;
}

.ma_404 .btn {
  height: 42px;
  line-height: 24px !important;
}

@media (max-width: 600px) {
  .ma_404 > svg {
    width: min(280px, 76vw) !important;
  }

  .ma_404 h3 {
    font-size: 24px !important;
  }

  .ma_404 p {
    font-size: 12px !important;
  }
}

/* Search tabs */
.search_tabs ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search_tabs ul li a {
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 999px !important;
  background: #151515 !important;
  color: #9b9b9b !important;
  box-shadow: none !important;
  font: 600 12px/1.3 var(--neon-font) !important;
}

.search_tabs ul li a:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.search_tabs ul li.active a {
  background: var(--neon-lime) !important;
  border-color: var(--neon-lime) !important;
  color: #050505 !important;
  font-weight: 800 !important;
}

.search_tabs ul li a svg {
  width: 16px;
  height: 16px;
}

/* Generic empty states */
.empty_state,
.noti_load {
  color: #777 !important;
}

.empty_state svg {
  color: var(--neon-lime) !important;
}

/* Dropdowns / tooltips that appear outside the header */
.tooltip-inner {
  background: #1c1c1c !important;
  border: 1px solid var(--neon-line);
  color: #eee !important;
  font: 500 11px/1.3 var(--neon-font) !important;
  border-radius: 8px !important;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #1c1c1c !important;
}

/* Search result counters */
.search_result_count {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px !important;
  margin-bottom: 20px;
  border-radius: 14px !important;
  background: #111 !important;
  border: 1px solid var(--neon-line) !important;
  color: #9a9a9a !important;
  font: 500 13px/1.4 var(--neon-font) !important;
}

.search_result_count svg {
  width: 18px;
  height: 18px;
  color: var(--neon-lime);
  flex: 0 0 auto;
}

.search_result_count b {
  color: #f0f0f0;
  font-weight: 800;
}

.alert {
  border-radius: 14px !important;
}

.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
  background: #111 !important;
  border: 1px solid var(--neon-line) !important;
  color: #a7a7a7 !important;
}

.alert-success {
  border-color: rgba(216, 255, 62, 0.2) !important;
}

.alert-info {
  color: #b9b9b9 !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--neon-lime);
}

/* Search filters */
.search_filters,
.search_filters .filter_block,
.store_filters .store_widget {
  background: var(--neon-surface) !important;
  border: 1px solid var(--neon-line) !important;
  border-radius: 18px !important;
}

.search_filters h4,
.search_filters h5,
.search_filters .filter_title {
  color: #fff !important;
  font: 800 14px/1.3 var(--neon-display) !important;
}

/* The dashed "Create Playlist" tile is painted by an absolutely-positioned
   child. Make its anchor fill the tile so the visible card is actually clickable. */
.pub_playlists .track_list.create .art_innr > a.block {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: 10px;
}

/* ==========================================================================
   Language switch
   ========================================================================== */

.neon-lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 60px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--neon-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #777 !important;
  font: 800 10px/1 var(--neon-font);
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.neon-lang-switch:hover {
  border-color: rgba(216, 255, 62, 0.32);
  background: rgba(216, 255, 62, 0.06);
}

.neon-lang-switch i {
  width: 1px;
  height: 10px;
  background: var(--neon-line-strong);
  flex: 0 0 1px;
}

.neon-lang-switch span {
  color: #6f6f6f;
  transition: color 0.2s ease;
}

.neon-lang-switch span.active {
  color: var(--neon-lime);
}

.neon-lang-header {
  margin-right: 4px;
}

.neon-drawer-lang {
  display: none;
  padding: 2px 2px 14px;
}

.neon-drawer-lang .neon-lang-switch {
  width: 100%;
  height: 40px;
}

.neon-landing-lang {
  background: transparent;
}

@media (max-width: 1024px) {
  .neon-lang-header {
    display: none !important;
  }

  .neon-drawer-lang {
    display: block;
  }
}

@media (max-width: 600px) {
  .neon-landing-lang {
    min-width: 52px;
    height: 32px;
    padding: 0 8px;
    gap: 5px;
  }
}

/* The header wrapper is always rendered, even on the landing page where there
   is no site header. Keep it transparent to pointer events so it never blocks
   the landing navigation underneath. */
#main-header {
  pointer-events: none;
}

#main-header > header {
  pointer-events: auto;
}

/* ==========================================================================
   No-blur policy
   Every frosted / blurred surface is replaced with a solid surface.
   ========================================================================== */

*,
*::before,
*::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.neon-ambient,
.neon-hero-glow,
.single_song .ssong_header.blur .blur_img,
.pop_playlist::before,
.neon-landing::before,
.circle_blue,
.circle_red,
.circle_orange {
  display: none !important;
}

.neon-landing {
  background: #000 !important;
}

header {
  background: #050505 !important;
}

.ma_player {
  background: #111 !important;
}

.neon-tabbar {
  background: #111 !important;
}

.neon-hero-note {
  background: #0b0b0b !important;
}

.auth_box_prnt {
  background: rgba(0, 0, 0, 0.92) !important;
}

@media (max-width: 1024px) {
  header .head_search {
    background: #050505 !important;
  }

  .ma_sidebar {
    background: #080808 !important;
  }
}

.single_song .ssong_header.blur {
  background: #090909 !important;
}


/* No blurred artwork layers remain in the active layout. */
.single_song .ssong_header.blur .blur_img img {
  filter: none !important;
}

/* ==========================================================================
   Mobile now-playing bar: cover, title, progress, prev / play / next.
   Stays above the bottom tab bar like a music app.
   ========================================================================== */

@media (max-width: 1024px) {
  .ma_player {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 1140 !important;
    height: 84px !important;
    border-radius: 20px !important;
    background: #111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62) !important;
  }

  .ma_player.closed {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    transform: translateY(150%);
  }

  .ma_player .player {
    position: relative;
    height: 84px !important;
    padding: 8px 12px 12px !important;
    display: flex !important;
    align-items: center;
    border-radius: 20px !important;
  }

  .ma_player .song_details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin-right: 2px !important;
  }

  .ma_player .song_details .song_details_inner {
    height: 58px !important;
    min-width: 0 !important;
  }

  .ma_player .song_details .song_details_inner .song_art {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin-right: 10px !important;
  }

  .ma_player .song_details .song_details_inner .song_art img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .ma_player .song_title {
    min-width: 0 !important;
  }

  .ma_player .song_title h3 {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  .ma_player .song_title p {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    margin-top: 3px !important;
  }

  .ma_player .song_title .song_time_sec,
  .ma_player .song_fav {
    display: none !important;
  }

  .ma_player .song_progress {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  .ma_player .song_progress .song_time {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 3px !important;
    display: block !important;
    height: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 2;
  }

  .ma_player .song_progress .song_time .current_time,
  .ma_player .song_progress .song_time .duration_time,
  .ma_player .song_progress .song_time .duration_seperate {
    display: none !important;
  }

  .ma_player .song_progress .song_time .song_prog_mobi {
    display: block !important;
    width: 100% !important;
  }

  .ma_player .song_progress .song_time .progress_container {
    position: relative !important;
    width: 100% !important;
    height: 12px !important;
    margin: 0 !important;
  }

  .ma_player .song_progress .song_time .progress_container input[type="range"].amplitude-song-slider {
    position: absolute !important;
    top: -3px !important;
    left: 0 !important;
    width: 100% !important;
    height: 18px !important;
    margin: 0 !important;
    opacity: 0;
    z-index: 20;
  }

  .ma_player .song_progress .song_time .progress_container .amplitude-buffered-progress,
  .ma_player .song_progress .song_time .progress_container .amplitude-song-played-progress {
    top: 5px !important;
    height: 3px !important;
    border-radius: 999px !important;
  }

  .ma_player .song_progress .song_controls {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .ma_player .song_progress .song_controls .amplitude-shuffle,
  .ma_player .song_progress .song_controls .amplitude-repeat {
    display: none !important;
  }

  .ma_player .song_progress .song_controls .amplitude-prev,
  .ma_player .song_progress .song_controls .amplitude-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .ma_player .song_progress .song_controls .amplitude-prev svg,
  .ma_player .song_progress .song_controls .amplitude-next svg {
    width: 11px !important;
    height: 18px !important;
  }

  .ma_player .song_progress .song_controls .amplitude-play-pause {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    background-size: 18px !important;
    margin: 0 2px !important;
  }

  .ma_player .song_progress_right {
    display: none !important;
  }

  body.neon-tabbar-ready .ma_player:not(.closed) {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62) !important;
  }
}

/* ==========================================================================
   Track page hero: keep the play / like / share row inside the hero.
   The legacy track layout pulls the hero up by 185px
   (.ss_sub_body { margin-bottom: -185px }) and gives that space back to the
   next block (.mus_track_btm_row { padding-top: 210px }). The neon hero clips
   its overflow, so the 80px play button and the share button were cut off at
   the hero's bottom edge (only the top sliver of the lime play circle showed).
   Give the 185px back to the hero and take it out of the next block's top
   padding: the page rhythm is unchanged and the whole row stays visible.
   ========================================================================== */

.single_song .ssong_header .ss_sub_body {
  margin-bottom: 0 !important;
}

.single_song .mus_track_btm_row {
  padding-top: 25px !important;
}

/* ==========================================================================
   QA 2026-11-03 · client test report fixes
   ========================================================================== */

/* 1) Desktop font compression inside menus
   The track title is an <h2> with font-size:68px + letter-spacing:-.06em, and
   the "more" dropdown is nested inside that h2. The menu inherited -4.08px
   letter-spacing, which squeezed every menu label into the previous glyph.
   Menus must always use normal tracking, whatever their parent heading does. */
.mat-dropdown,
.mat-dropdown ul,
.mat-dropdown li,
.mat-dropdown li a,
.mat-dropdown .dropdown-item {
  letter-spacing: normal !important;
}

/* 2) Notification badges: empty counters must not render as green dots.
   neon.css gives every counter min-width/height + lime background, so an
   empty <span class="unread_count"></span> still painted a 16px dot. */
header .head_user .unread_count:empty,
header .head_user .unread_cart_count:empty,
header .head_user .unread_R_count:empty,
header .head_user span#new-messages:empty {
  display: none !important;
}

/* 3) Shuffle / repeat: make the enabled state visible in the player bar */
.player .song_progress .song_controls .amplitude-shuffle-on,
.player .song_progress .song_controls .amplitude-repeat-on,
.ma_player .song_progress .song_controls .amplitude-shuffle-on,
.ma_player .song_progress .song_controls .amplitude-repeat-on {
  color: var(--neon-lime) !important;
}
.player .song_progress .song_controls .amplitude-shuffle-on svg,
.player .song_progress .song_controls .amplitude-repeat-on svg,
.ma_player .song_progress .song_controls .amplitude-shuffle-on svg,
.ma_player .song_progress .song_controls .amplitude-repeat-on svg {
  color: var(--neon-lime) !important;
}

/* 4) Chat timestamps */
.message .msg-time {
  margin-top: 4px;
  color: #7d7d7d;
  font: 500 10px/1.2 var(--neon-font);
  letter-spacing: .02em;
}
.message.pull-right .msg-time { text-align: right; }
.message.incming_msg .msg-time { padding-left: 46px; }

/* 5) Recently played: day dividers */
.rp_day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: #8a8a8a;
  font: 700 12px/1 var(--neon-font);
  letter-spacing: .08em;
}
.rp_day:first-child { margin-top: 0; }
.rp_day:after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--neon-line);
}
.track_list .track_time {
  color: #6f6f6f;
  font: 500 11px/1 var(--neon-font);
  margin-left: 8px;
}

/* Empty search landing: give the user a real input instead of an empty
   "search results" page (client report: 点击搜索总是跳到空搜索页). */
.sz-empty-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  padding: 6px;
  border: 1px solid var(--neon-line);
  border-radius: 999px;
  background: #101010;
  max-width: 560px;
}
.sz-empty-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 500 14px/1 var(--neon-font);
  outline: none;
}
.sz-empty-search input::placeholder { color: #6f6f6f; }
.sz-empty-search button {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--neon-lime);
  color: #050505;
  font: 800 13px/1 var(--neon-font);
  cursor: pointer;
}
.sz-empty-search button:hover { filter: brightness(1.05); }

/* Category rail (explore_genres): drag / keyboard affordance */
#page[data-page="explore_genres"] .genre_lst.small {
  scroll-behavior: smooth;
  cursor: grab;
  outline: none;
}
#page[data-page="explore_genres"] .genre_lst.small.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
#page[data-page="explore_genres"] .genre_lst.small:focus-visible {
  box-shadow: 0 0 0 2px rgba(199, 255, 114, .55);
  border-radius: 12px;
}

/* Empty search state: the new search field replaces the blank result box. */
.sz-page.is-empty .sz-result-wrap { display: none; }

/* =========================================================================
   曲目页 · 行内歌词（dsnpi）
   - 右栏的波形 / 操作按钮不再显示，整块换成随播放滚动的歌词
   - 波形与按钮保留在 DOM 里（播放器脚本仍在用），只做视觉隐藏
   ========================================================================= */
.single_song .ssong_header .ss_sub_body #waveform,
.single_song .ssong_header .ss_sub_body #waveform-load,
.single_song .ssong_header .ss_sub_body .waveform.mus_track_wf,
.single_song .ssong_header .ss_sub_body .mus_track_act_btns {
  display: none !important;
}
.single_song .ssong_header .ss_sub_body .ss_image { cursor: pointer; }

.dsnpi {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: 340px;
  margin: 2px 0 0;
  overflow: hidden;
}
.dsnpi-scroll {
  position: relative;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 86%, transparent 100%);
}
.dsnpi-scroll.is-static {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.dsnpi-scroll.is-static::-webkit-scrollbar { width: 6px; }
.dsnpi-scroll.is-static::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }
.dsnpi-inner {
  position: relative;
  padding: 14px 0 30px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.dsnpi-scroll.is-static .dsnpi-inner { margin: auto 0; transition: none; width: 100%; }

.dsnpi-line {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: none;
  text-align: left;
  color: rgba(255, 255, 255, .38);
  font: 700 clamp(19px, 1.8vw, 30px)/1.45 var(--neon-font);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: color .3s ease;
}
.dsnpi-txt { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.dsnpi-base { color: rgba(255, 255, 255, .38); transition: color .3s ease; }
.dsnpi-line:hover .dsnpi-base { color: rgba(255, 255, 255, .62); }
.dsnpi-line:focus-visible .dsnpi-base { color: #fff; }
/* 卡拉 OK 填充层：白色文字盖在灰字上，clip 从左往右推进 */
.dsnpi-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #fff;
  white-space: pre-wrap;
  pointer-events: none;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.dsnpi-line.is-active .dsnpi-base { color: rgba(255, 255, 255, .45); }
/* 逐字时间轴（yrc）：唱到的字直接变白 */
.dsnpi-ch { transition: color .12s linear; }
.dsnpi-ch.is-sung { color: #fff; }
.dsnpi-line .dsnpi-sub {
  display: block;
  margin-top: 4px;
  font-size: .6em;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, .30);
  transition: color .3s ease;
}
.dsnpi-line.is-active .dsnpi-sub { color: rgba(255, 255, 255, .56); }
.dsnpi-scroll.is-static .dsnpi-line .dsnpi-base { color: rgba(255, 255, 255, .56); }
.dsnpi-scroll.is-static .dsnpi-line:hover .dsnpi-base { color: rgba(255, 255, 255, .86); }

.dsnpi-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: rgba(255, 255, 255, .5);
}
.dsnpi-empty[hidden] { display: none; }
.dsnpi-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .5);
}
.dsnpi-empty-ico svg { width: 24px; height: 24px; }
.dsnpi-empty b { font: 700 17px/1.3 var(--neon-font); color: rgba(255, 255, 255, .8); }
.dsnpi-empty span:last-child { font: 500 13px/1.5 var(--neon-font); color: rgba(255, 255, 255, .38); }

@media (max-width: 991px) {
  .dsnpi { height: 300px; margin-top: 10px; }
  .dsnpi-line { font-size: clamp(18px, 4.6vw, 22px); }
}
@media (max-width: 700px) {
  .dsnpi { height: 260px; }
  .dsnpi-line { font-size: 18px; padding: 6px 0; }
}

@media (max-width: 767px) {
  .single_song .ssong_header .ss_sub_body .ss_image {
    width: 260px;
    max-width: calc(100vw - 48px);
    padding-bottom: 260px;
    margin-left: auto;
    margin-right: auto;
  }
  .single_song .ssong_header .ss_sub_body .mus_track_ss_stats { justify-content: center; }
  .dsnpi { height: 240px; }
}

/* ==========================================================================
   2026-11-04 · 手机端歌曲页（页面模式视觉）
   - 封面模糊成整块底色，标题 / 封面 / 统计 / 歌词同一条竖轴
   - 统计条改成玻璃胶囊；歌词放大；底部播放条收窄
   只作用于 <=767px，桌面与刷歌页不受影响
   ========================================================================= */
@media (max-width: 767px) {
  /* ---- 1. 背景：封面模糊底 + 渐隐到页面底色 ---------------------------- */
  .ma_container .single_song .ssong_header.blur {
    position: relative;
    overflow: hidden;
    /* 站点顶栏是 fixed 64px，内容要从它下面开始（.single_song 有 -45px 上提） */
    padding: 50px 18px 4px;
    margin: -10px 0 0;
    background: #07080c !important;
  }
  .ma_container .single_song .ssong_header.blur .blur_img {
    display: block !important;
    position: absolute;
    left: -24%;
    right: -24%;
    top: -10%;
    bottom: auto;
    height: 780px;
    opacity: .72;
    filter: blur(58px) saturate(1.5);
    pointer-events: none;
  }
  .ma_container .single_song .ssong_header.blur .blur_img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(7, 8, 12, .2) 0%, rgba(7, 8, 12, .58) 44%, rgba(7, 8, 12, .93) 78%, #07080c 100%);
  }
  .ma_container .single_song .ssong_header.blur .blur_img img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: .85 !important;
    filter: blur(56px) saturate(1.4) !important;
  }
  .ma_container .single_song .ssong_header.blur .container {
    position: relative;
    z-index: 2;
    padding: 0;
  }

  /* ---- 2. 头部：歌手 → 标题 → 发布时间 -------------------------------- */
  .ma_container .single_song .ssong_header .ss_sub_head {
    margin: 16px 0 0 !important;
    padding: 0;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .82) !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info img:not(.pro_packages_icon) {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 {
    display: flex;
    align-items: flex-start;
    font-size: 30px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    margin: 6px 0 0 !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 a {
    padding-right: 8px;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown .btn {
    width: 34px !important;
    height: 34px !important;
    margin-top: 4px;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .published {
    display: block;
    margin-top: 9px;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, .46) !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .published a {
    color: rgba(216, 255, 62, .82) !important;
    font-weight: 600;
  }
  /* 手机端不需要桌面那排下载/评分按钮 */
  .ma_container .single_song .ssong_header .ss_sub_head .mus_track_toolbar {
    margin-top: 10px;
    gap: 6px;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .mus_track_toolbar .btn,
  .ma_container .single_song .ssong_header .ss_sub_head .mus_track_toolbar .ss_action_item,
  .ma_container .single_song .ssong_header .ds_review_headlines,
  .ma_container .single_song .ssong_header .ds_buy_stores_btn {
    display: none !important;
  }

  /* ---- 3. 封面：232 方图，点击播放 ----------------------------------- */
  .ma_container .single_song .ss_sub_body .ss_image {
    width: 300px !important;
    max-width: calc(100vw - 56px) !important;
    padding-bottom: 300px !important;
    margin: 14px auto 0 !important;
    border-radius: 20px !important;
    background-size: cover;
    box-shadow:
      0 30px 70px rgba(0, 0, 0, .6),
      0 0 0 1px rgba(255, 255, 255, .09) !important;
  }
  /* ---- 4. 统计：玻璃胶囊 ---------------------------------------------- */
  .ma_container .single_song .ss_sub_body .mus_track_ss_stats {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center !important;
    gap: 7px !important;
    margin: 16px 0 0 !important;
  }
  .ma_container .single_song .ss_sub_body .mus_track_ss_stats li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    min-width: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
  }
  .ma_container .single_song .ss_sub_body .mus_track_ss_stats li svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* ---- 5. 歌词：更大、更居中 ----------------------------------------- */
  .ma_container .single_song .dsnpi {
    height: 40vh !important;
    min-height: 240px;
    max-height: 360px;
    margin: 16px 0 0 !important;
  }
  .ma_container .single_song .dsnpi-line {
    font-size: 19px !important;
    line-height: 1.5 !important;
    padding: 6px 0 !important;
    letter-spacing: -.015em;
  }
  .ma_container .single_song .dsnpi-line.is-active .dsnpi-base {
    color: rgba(255, 255, 255, .5);
  }
  .ma_container .single_song .dsnpi-line.is-active {
    transform: none;
  }

  /* ---- 6. 页面底部留白：给播放条 + 底栏 ------------------------------ */
  .ma_container .ma_pc_inner {
    padding-bottom: 190px !important;
  }
}

/* ---- 7. 底部播放条：更紧凑的一体卡片 -------------------------------- */
@media (max-width: 767px) {
  .ma_player {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: #0f1015 !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .58) !important;
  }
  .ma_player.closed {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
  .ma_player .player {
    height: 64px !important;
    padding: 0 10px 6px !important;
  }
  .ma_player .song_details .song_details_inner {
    height: 46px !important;
  }
  .ma_player .song_details .song_details_inner .song_art,
  .ma_player .song_details .song_details_inner .song_art img {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  .ma_player .song_details .song_details_inner .song_art img {
    border-radius: 10px !important;
  }
  .ma_player .song_title h3 {
    font-size: 12.5px !important;
    letter-spacing: -.01em;
  }
  .ma_player .song_title p {
    margin-top: 2px !important;
    font-size: 10px !important;
    color: rgba(255, 255, 255, .42) !important;
  }
  .ma_player .song_progress .song_controls .amplitude-play-pause {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background-size: 16px !important;
  }
  .ma_player .song_progress .song_controls .amplitude-play-pause.amplitude-playing {
    background-size: 14px !important;
  }
  .ma_player .song_progress .song_controls .amplitude-prev,
  .ma_player .song_progress .song_controls .amplitude-next {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  /* 进度条：贴在卡片底边、左右留 10px 的荧光绿细线 */
  .ma_player .song_progress .song_time {
    left: 14px !important;
    right: 14px !important;
    bottom: 6px !important;
    height: 3px !important;
  }
  .ma_player .song_progress .song_time .progress_container {
    height: 3px !important;
  }
  .ma_player .song_progress .song_time .progress_container .amplitude-buffered-progress,
  .ma_player .song_progress .song_time .progress_container .amplitude-song-played-progress {
    top: 0 !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .07) !important;
  }
  .ma_player .song_progress .song_time .progress_container .amplitude-buffered-progress {
    background: rgba(255, 255, 255, .05) !important;
  }
  .ma_player .song_progress .song_time .progress_container .amplitude-song-played-progress[value]::-webkit-progress-value {
    background: #d8ff3e !important;
    border-radius: 999px !important;
  }
  .ma_player .song_progress .song_time .progress_container .amplitude-song-played-progress::-moz-progress-bar {
    background: #d8ff3e !important;
    border-radius: 999px !important;
  }
  .ma_player .song_progress .song_controls .amplitude-play-pause {
    background-color: #d8ff3e !important;
    color: #0b0e07 !important;
  }
  .ma_player .song_progress .song_controls .amplitude-play-pause svg {
    fill: #0b0e07 !important;
  }
}

/* ==========================================================================
   2026-11-04 · 手机端歌曲页：操作行（播放 + 分享）—— 由 footer.js 搬到封面下方
   顺序与刷歌页一致：封面 → 标题 → 操作 → 统计 → 歌词
   ========================================================================== */
@media (max-width: 767px) {
  .ma_container .single_song .ssong_header .mus_track_act_btns {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 16px 0 2px;
    padding: 0;
  }
  .ma_container .single_song .ssong_header .mus_track_act_btns .ss_track_play_pause {
    width: 64px;
    height: 64px;
    margin: 0 4px;
  }
  .ma_container .single_song .ssong_header .mus_track_act_btns .ss_track_play_pause > div,
  .ma_container .single_song .ssong_header .mus_track_act_btns .ss_track_play_pause > div svg {
    width: 64px !important;
    height: 64px !important;
  }
  .ma_container .single_song .ssong_header .mus_track_act_btns .ss_action_item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: rgba(255, 255, 255, .82) !important;
    font: 600 12px/40px var(--neon-font) !important;
    box-shadow: none !important;
  }
  .ma_container .single_song .ssong_header .mus_track_act_btns .ss_action_item svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* ==========================================================================
   2026-11-04 · 手机端曲目页：模仿刷歌页（封面下方的实时歌词行 + 更高的封面）
   ========================================================================== */
.ds-live-lyric { display: none; }

@media (max-width: 767px) {
  .ma_container .single_song .ss_sub_body .ss_image {
    width: calc(100vw - 40px) !important;
    max-width: 358px !important;
    padding-bottom: 94% !important;
    border-radius: 22px !important;
    margin: 12px auto 0 !important;
  }

  /* 暂停时封面中央的绿色播放键（刷歌页同款；播放中隐藏） */
  .ma_container .single_song .ss_sub_body .ss_image {
    position: relative;
  }
  .ma_container .single_song .ss_sub_body .ss_image::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background:
      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b0e07' d='M8.5 5.6v12.8L18.6 12L8.5 5.6Z'/%3E%3C/svg%3E") center / 22px no-repeat,
      #d8ff3e;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 9px rgba(216, 255, 62, .1);
    opacity: 1;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  body.audio_playing .ma_container .single_song .ss_sub_body .ss_image::after {
    opacity: 0;
  }

  .ds-live-lyric {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 14px 0 0;
    padding: 0 2px;
  }
  .ds-live-copy {
    flex: 1;
    min-width: 0;
  }
  .ds-live-main {
    font: 800 25px/1.24 var(--neon-font);
    letter-spacing: -.025em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
    word-break: break-word;
  }
  .ds-live-sub {
    margin-top: 5px;
    font: 500 14px/1.45 var(--neon-font);
    letter-spacing: -.005em;
    color: rgba(255, 255, 255, .6);
  }
  .ds-live-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 13px;
    background: rgba(216, 255, 62, .1);
    border: 1px solid rgba(216, 255, 62, .28);
    color: #d8ff3e;
    font: 800 12px/1 var(--neon-font);
    letter-spacing: .02em;
  }
  .ds-live-badge:active { transform: scale(.94); }

  /* 统计条和歌词列表之间留一点呼吸 */
  .ma_container .single_song .ss_sub_body .mus_track_ss_stats {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 767px) {
  /* 标题在歌手上面（刷歌页的顺序） */
  .ma_container .single_song .ssong_header .ss_sub_head {
    display: flex;
    flex-direction: column;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 { order: 1; }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info {
    order: 2;
    margin-top: 10px;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .mus_track_toolbar { order: 3; }
}

/* ==========================================================================
   2026-11-04 · 手机端曲目页：刷歌同款播放面板（实时歌词 / 标题标签 / 关注 / 操作 / 进度）
   ========================================================================== */
.ds-player { display: none; }

@media (max-width: 767px) {
  /* 旧的头部 / 统计 / 播放行用新面板替换 */
  .ma_container .single_song .ssong_header .ss_sub_head,
  .ma_container .single_song .ssong_header .mus_track_ss_stats,
  .ma_container .single_song .ssong_header .mus_track_act_btns,
  .ds-live-lyric { display: none !important; }

  .ds-player { display: block; margin: 14px 0 0; }

  .ds-player-live {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
  }
  .ds-player-live-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .ds-player-live-main { font: 800 25px/1.22 var(--neon-font); letter-spacing: -.025em; color: #fff; }
  .ds-player-live-sub { font: 500 14px/1.4 var(--neon-font); color: rgba(255, 255, 255, .6); }
  .ds-player-live-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(216, 255, 62, .1);
    border: 1px solid rgba(216, 255, 62, .28);
    color: #d8ff3e;
    font: 800 12px/1 var(--neon-font);
  }

  .ds-player-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
  .ds-player-title { margin: 0; font: 800 30px/1.15 var(--neon-font); letter-spacing: -.03em; color: #fff; }
  .ds-player-tag {
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .62);
    font-size: 10.5px;
    font-weight: 600;
  }
  .ds-player-tag-vip { background: rgba(216, 255, 62, .12); border: 1px solid rgba(216, 255, 62, .26); color: #d8ff3e; }

  .ds-player-artistline { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
  .ds-player-artist { font-size: 16px; color: rgba(255, 255, 255, .78); }
  .ds-player-check {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .62);
    display: grid;
    place-items: center;
  }
  .ds-player-check svg { width: 9px; height: 9px; }
  .ds-player-follow {
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: none;
    color: rgba(255, 255, 255, .82);
    font-size: 11.5px;
  }

  .ds-player-actions { display: flex; align-items: flex-end; gap: 26px; margin-top: 14px; padding: 0 4px; }
  .ds-player-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
  }
  .ds-player-num { height: 14px; line-height: 14px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .62); }
  .ds-player-icon { display: grid; place-items: center; width: 28px; height: 28px; }
  .ds-player-icon svg { width: 26px; height: 26px; }
  .ds-player-more { margin-left: auto; min-width: 26px; }
  .ds-player-more .ds-player-icon svg { width: 23px; height: 23px; }
  .ds-player-action.is-liked .ds-icon-heart { fill: #d8ff3e; stroke: #d8ff3e; }
  .ds-player-action.is-liked .ds-player-num { color: #d8ff3e; }

  .ds-player-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
  .ds-player-time { flex: none; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
  .ds-player-bar { position: relative; flex: 1; height: 24px; display: flex; align-items: center; }
  .ds-player-bar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2.5px;
    margin-top: -1.25px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .24);
  }
  .ds-player-bar-fill {
    position: absolute;
    left: 0; top: 50%;
    height: 2.5px;
    margin-top: -1.25px;
    width: 0;
    border-radius: 99px;
    background: #d8ff3e;
  }
}

/* 刷歌同款底部导航（曲目页手机端）：发现 / 刷歌 / 播放 / 每日特权 / 我的 */
.ds-nav { display: none; }

@media (max-width: 767px) {
  html body:has(.ds-player) .ma_player { display: none !important; }
  html body:has(.ds-player) .ds-nav { display: none !important; }

  .ds-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 1150;
    display: grid;
    grid-template-columns: 1fr 1fr 74px 1fr 1fr;
    align-items: center;
    height: 60px;
    padding: 0 6px;
    border-radius: 20px;
    background: rgba(16, 16, 16, .94);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
  }
  .ds-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #767676;
    font-size: 11.5px;
    font-weight: 500;
  }
  .ds-nav-item.is-active { color: #d8ff3e; font-weight: 600; }
  .ds-nav-dot {
    position: absolute;
    bottom: 9px;
    left: 50%;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: #d8ff3e;
    box-shadow: 0 0 8px rgba(216, 255, 62, .7);
  }
  .ds-nav-play {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    transform: translateY(-8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  }
  .ds-nav-play svg { width: 22px; height: 22px; }
  .ds-nav-play .ds-nav-start { width: 25px; height: 25px; margin-left: 2px; }
  .ds-nav-play svg[hidden] { display: none !important; }
}

.ds-sound-hint {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 1300;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(216, 255, 62, .14);
  border: 1px solid rgba(216, 255, 62, .34);
  color: #d8ff3e;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: dsSoundPulse 2.4s ease-in-out infinite;
}
@keyframes dsSoundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 255, 62, .18); }
  50% { box-shadow: 0 0 0 7px rgba(216, 255, 62, 0); }
}

/* ==========================================================================
   2026-11-04 · 手机端曲目页：正常播放器（网易云式）
   标题/歌手 → 大字歌词 → 点赞等 → 进度 → 上一首/播放/下一首
   站点底栏保留，不再套刷歌底栏
   ========================================================================== */
@media (max-width: 767px) {
  /* 不显示封面大图，把首屏留给歌词 */
  .ma_container .single_song .ss_sub_body .ss_image { display: none !important; }

  /* 头部：标题 + 歌手，居中、紧凑 */
  .ma_container .single_song .ssong_header .ss_sub_head {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px 0 6px !important;
    padding: 0 !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 {
    order: 1;
    justify-content: center;
    width: 100%;
    font-size: 20px !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
    color: #fff;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown { margin-left: 6px; }
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown .btn {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, .07) !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info {
    order: 2;
    justify-content: center;
    margin-top: 6px;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, .5) !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .ss_publisher_info .ss_short_info img:not(.pro_packages_icon) {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
  }
  .ma_container .single_song .ssong_header .ss_sub_head .published,
  .ma_container .single_song .ssong_header .ss_sub_head .mus_track_toolbar { display: none !important; }

  /* 歌词：居中大字，当前句白色 */
  .ma_container .single_song .dsnpi {
    height: 52vh !important;
    min-height: 300px;
    max-height: 460px;
    margin: 6px 0 0 !important;
  }
  .ma_container .single_song .dsnpi-line {
    text-align: center;
    font-size: 21px !important;
    line-height: 1.5 !important;
    padding: 8px 6px !important;
    color: rgba(255, 255, 255, .34);
  }
  .ma_container .single_song .dsnpi-line.is-active {
    color: #fff;
  }
  .ma_container .single_song .dsnpi-line.is-active .dsnpi-base {
    color: rgba(255, 255, 255, .5);
  }
  .ma_container .single_song .dsnpi-line .dsnpi-sub {
    font-size: 15px;
    margin-top: 3px;
    color: rgba(255, 255, 255, .3);
  }

  /* 面板：只保留操作 / 进度 / 播放控制 */
  .ds-player { margin-top: 4px; }
  .ds-player-live,
  .ds-player-titleline,
  .ds-player-artistline { display: none !important; }
  .ds-player-actions {
    justify-content: center;
    gap: 40px;
    margin: 6px 0 0;
    padding: 0;
  }
  .ds-player-action { min-width: 40px; }
  .ds-player-num { font-size: 10.5px; }
  .ds-player-more { margin-left: 0; }

  .ds-player-progress { margin-top: 10px; }
  .ds-player-time { color: rgba(255, 255, 255, .42); }

  .ds-player-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin: 18px 0 8px;
  }
  .ds-player-tp {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .9);
  }
  .ds-player-tp svg { width: 22px; height: 22px; }
  .ds-player-tp-play {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
  }
  .ds-player-tp-play svg { width: 28px; height: 28px; }
  .ds-player-tp-play .ds-tp-start { margin-left: 3px; }
  .ds-player-tp-play svg[hidden] { display: none !important; }
}

/* 2026-11-04 · 曲目页底部播放控制锁定在底部（歌词在上面滚动） */
@media (max-width: 767px) {
  .ds-player-actions {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom) + 184px);
    z-index: 1120;
    margin: 0;
    justify-content: center;
    gap: 40px;
  }
  .ds-player-progress {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom) + 152px);
    z-index: 1120;
    margin: 0;
  }
  .ds-player-transport {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 80px);
    z-index: 1120;
    margin: 0;
    transform: translateX(-50%);
  }
  /* 前面跟着走的圆点 */
  .ds-player-bar-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
  }
  .ma_container .ma_pc_inner { padding-bottom: 230px !important; }
}

.ds-dock-bg { display: none; }
@media (max-width: 767px) {
  .ds-dock-bg {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(env(safe-area-inset-bottom) + 286px);
    z-index: 1110;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 8, 12, 0) 0%, rgba(7, 8, 12, .96) 16%, #07080c 38%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* 2026-11-04 · 曲目页「⋯」按钮居中 */
@media (max-width: 767px) {
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 6px;
    padding: 0;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown .btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    line-height: 1;
  }
  .ma_container .single_song .ssong_header .ss_sub_head h2 .dropdown .btn svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
  }
}

/* 2026-11-04 · 曲目页：整页（含底部锁定区 / 评论 / 相关推荐）同一个封面底色 */
.ds-bg { display: none; }
@media (max-width: 767px) {
  /* 固定全屏封面底图，整页共用 */
  .ds-bg {
    display: block;
    position: fixed;
    inset: -14%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(46px) saturate(1.45) brightness(.5);
    transform: scale(1.06);
    pointer-events: none;
  }
  .ds-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 8, 12, .18) 0%, rgba(7, 8, 12, .32) 55%, rgba(7, 8, 12, .48) 100%);
  }
  /* 所有大块容器透明，露出同一张底图 */
  html body:has(.ds-player) .music_app,
  html body:has(.ds-player) .ma_container,
  html body:has(.ds-player) .ma_page_content,
  html body:has(.ds-player) .ma_pc_inner,
  html body:has(.ds-player) .single_song,
  html body:has(.ds-player) .ssong_header,
  html body:has(.ds-player) .ss_sub_body,
  html body:has(.ds-player) .content,
  html body:has(.ds-player) .ss_related,
  html body:has(.ds-player) .ssong_comments,
  html body:has(.ds-player) .no-track-found,
  html body:has(.ds-player) .track_page_ad,
  html body:has(.ds-player) .row,
  html body:has(.ds-player) .col-lg-12,
  html body:has(.ds-player) .col-lg-8,
  html body:has(.ds-player) .col-lg-4 {
    background: transparent !important;
    box-shadow: none !important;
  }
  html body:has(.ds-player) .single_song .ssong_header.blur .blur_img { display: none !important; }

  /* 底部锁定区：同一底色 + 背景模糊（滚动内容不会透出来） */
  .ds-dock-bg {
    background: rgba(7, 8, 12, .18) !important;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.15) !important;
    backdrop-filter: blur(26px) saturate(1.15) !important;
  }
}

/* 曲目页：把带底色的容器按最高优先级清成透明，整页共用一张封面底色 */
@media (max-width: 767px) {
  html body:has(.ds-player) .ma_container .single_song,
  html body:has(.ds-player) .ma_container .single_song .ssong_header,
  html body:has(.ds-player) .ma_container .single_song .ssong_header.blur,
  html body:has(.ds-player) .ma_container .single_song .ssong_header.blur .container,
  html body:has(.ds-player) .ma_container .single_song .ss_sub_body,
  html body:has(.ds-player) .ma_container .single_song .ss_sub_body .row,
  html body:has(.ds-player) .ma_container .single_song .ss_sub_body .col-lg-3,
  html body:has(.ds-player) .ma_container .single_song .ss_sub_body .col-lg-8,
  html body:has(.ds-player) .ma_container .single_song .content,
  html body:has(.ds-player) .ma_container .single_song .content.mt-0,
  html body:has(.ds-player) .ma_container .single_song .content.ss_related,
  html body:has(.ds-player) .ma_container .single_song .ss_related,
  html body:has(.ds-player) .ma_container .single_song .ssong_comments,
  html body:has(.ds-player) .ma_container .single_song .no-track-found,
  html body:has(.ds-player) .ma_container .single_song .track_page_ad {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .ds-dock { position: static; }
  /* 搬到 body 之后仍保持锁定在底部 */
  .ds-dock .ds-player-actions,
  .ds-dock .ds-player-progress,
  .ds-dock .ds-player-transport { position: fixed; }
  .ds-dock .ds-dock-bg { position: fixed; }
}

/* 2026-11-04 · 曲目页只留歌词：下面全部隐藏，底部播放区锁死，只有歌词可滚动 */
@media (max-width: 767px) {
  html body:has(.ds-player) #ds-tabbar,
  html body:has(.ds-player) .neon-tabbar { display: none !important; }

  html body:has(.ds-player) .content,
  html body:has(.ds-player) .content.mt-0,
  html body:has(.ds-player) .content.ss_related,
  html body:has(.ds-player) .ss_related,
  html body:has(.ds-player) .ssong_comments,
  html body:has(.ds-player) .track_page_ad,
  html body:has(.ds-player) .no-track-found,
  html body:has(.ds-player) .emojionearea.comment_input { display: none !important; }

  html body:has(.ds-player) { overflow: hidden !important; }
  html body:has(.ds-player) .ma_pc_inner { padding-bottom: 0 !important; }

  /* 底部播放区：没有站点底栏了，整体往下挪 */
  .ds-dock .ds-player-actions { bottom: calc(env(safe-area-inset-bottom) + 118px) !important; }
  .ds-dock .ds-player-progress { bottom: calc(env(safe-area-inset-bottom) + 88px) !important; }
  .ds-dock .ds-player-transport { bottom: calc(env(safe-area-inset-bottom) + 16px) !important; }
  .ds-dock .ds-dock-bg { height: calc(env(safe-area-inset-bottom) + 210px) !important; }

  /* 歌词自己滚 */
  .ma_container .single_song .dsnpi { height: 60vh !important; }
  .ma_container .single_song .dsnpi-scroll { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  /* 曲目页：页面本身不滚，裁掉多余高度，只让歌词内部滚 */
  html body:has(.ds-player) .ma_pc_inner {
    height: calc(100dvh - 64px);
    overflow: hidden !important;
  }
}