.site-background-music {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 190px;
  height: 58px;
  padding: 4px 8px 4px 4px;
  border: 1px solid #c7d8ee;
  border-radius: 12px;
  background: #f4f8ff;
  color: #173967;
  font: 500 12px/1.4 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.site-background-music[hidden] { display: none; }
.site-background-music:hover { border-color: #5987ca; background: #edf4ff; }
.site-background-music:focus-visible { outline: 3px solid #5688cf; outline-offset: 3px; }
.site-background-music .music-avatar { position: relative; display: block; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 50%; background: #dbeaff; }
.site-background-music .music-avatar img { position: absolute; left: 50%; top: 50%; width: 270%; max-width: none; height: auto; transform: translate(-56%, -61%); }
.site-background-music .music-copy { display: grid; flex: 0 0 70px; gap: 2px; min-width: 0; }
.site-background-music .music-copy strong { margin: 0; color: #173967; font: 800 14px/1.3 "Noto Sans SC", "Microsoft YaHei", sans-serif; white-space: nowrap; }
.site-background-music [data-music-label] { color: #647895; font-size: 10px; line-height: 1.3; white-space: nowrap; }
.site-background-music .music-action { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #245fba; color: #fff; box-shadow: 0 2px 5px #16448626; }
.site-background-music svg { display: block; width: 23px; height: 23px; }
.site-background-music .music-play { fill: currentColor; stroke: none; }
.site-background-music .music-pause { display: none; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.site-background-music[data-state="playing"] .music-action { background: #173f7c; }
.site-background-music:is([data-state="playing"], [data-state="loading"]) .music-play { display: none; }
.site-background-music:is([data-state="playing"], [data-state="loading"]) .music-pause { display: block; }

.music-main-header { gap: 16px; }
.music-main-header .header-leading { gap: 12px; }
.music-main-header .domain-sale-main-actions { gap: 8px; }
.music-main-header > .site-nav[aria-label="AI历史书生态导航"] { gap: 2px; }
.music-main-header > .site-nav[aria-label="AI历史书生态导航"] a { padding-inline: 7px; font-size: 12px; }
.music-workshop-header .header-account { flex-wrap: wrap; }
.portal-page .music-portal-header { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px 16px; padding-block: 8px; }
.portal-page .music-portal-header .domain-sale-header-actions { flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .music-main-header .header-leading { justify-content: space-between; gap: 8px; }
  .music-main-header .domain-sale-main-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .music-main-header .domain-sale-main-actions > [data-auth-user] { margin-left: auto; }
}

@media (max-width: 760px) {
  .music-workshop-header .header-account { grid-row: 2; gap: 6px 8px; }
  .music-workshop-header .header-inner nav { grid-row: 3; }
  .music-workshop-header .header-account > .account-button { margin-left: auto; }
}

@media (max-width: 680px) {
  .site-background-music { width: 158px; min-width: 158px; height: 48px; gap: 6px; padding: 5px 6px; border-radius: 10px; }
  .site-background-music .music-avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .site-background-music .music-copy { flex-basis: 60px; gap: 1px; }
  .site-background-music .music-copy strong { font-size: 12px; }
  .site-background-music [data-music-label] { font-size: 9px; }
  .site-background-music .music-action { width: 30px; height: 30px; flex-basis: 30px; }
  .site-background-music svg { width: 21px; height: 21px; }
}

@media (max-width: 640px) {
  .portal-page .music-portal-header { gap: 7px 8px; }
  .portal-page .music-portal-header .brand strong { font-size: 22px; }
  .portal-page .music-portal-header nav { top: 100%; }
  .portal-page .music-portal-header .domain-sale-header-actions { flex-basis: 100%; justify-content: space-between; gap: 6px; }
  .portal-page .music-portal-header .theme-toggle { margin-left: 0; }
  .portal-page .music-portal-header :is(.theme-toggle, .nav-toggle, .unified-login) { min-width: 0; min-height: 36px; padding: 6px; font-size: 11px; }
}