*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

/* Full desktop mode keeps the existing renderer and glass stack intact. */
.desktop-mode-note {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: rgba(235,244,250,.62);
  font-size: 11px;
  line-height: 1.55;
}

#desktop-mode-control-dock {
  display: none;
  position: fixed;
  z-index: 680;
  top: 16px;
  right: 24px;
  width: 34px;
  height: 30px;
  pointer-events: none;
  -webkit-app-region: no-drag;
}

body.desktop-wallpaper-mode.desktop-wallpaper-interactive #desktop-mode-control-dock {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(14px, -4px, 0) scale(.94);
  transform-origin: 100% 0;
  transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s;
}

body.desktop-wallpaper-mode.desktop-wallpaper-interactive.desktop-mode-control-peek #desktop-mode-control-dock,
body.desktop-wallpaper-mode.desktop-wallpaper-interactive.desktop-mode-controls-open #desktop-mode-control-dock {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

#desktop-mode-control-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 15px;
  background: rgba(8, 12, 16, .56);
  color: rgba(240, 247, 251, .76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

#desktop-mode-control-handle:hover,
#desktop-mode-control-handle:focus-visible,
#desktop-mode-control-dock.is-open #desktop-mode-control-handle {
  color: #fff;
  border-color: rgba(var(--fc-accent-rgb), .48);
  background: rgba(var(--fc-accent-rgb), .13);
  transform: translateY(-1px);
  outline: none;
}

#desktop-mode-control-handle svg {
  width: 17px;
  height: 17px;
  fill: rgba(8, 12, 16, .88);
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.desktop-software-locked #desktop-mode-control-handle {
  color: rgba(238, 255, 251, .96);
  border-color: rgba(var(--fc-accent-rgb), .52);
  background: rgba(var(--fc-accent-rgb), .17);
}

#desktop-mode-control-panel {
  position: absolute;
  top: 38px;
  right: 0;
  width: 244px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(8, 12, 16, .76);
  color: rgba(242, 247, 250, .88);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -7px, 0) scale(.975);
  transform-origin: 100% 0;
  transition: opacity .17s ease, transform .2s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .2s;
}

#desktop-mode-control-dock.is-open #desktop-mode-control-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.desktop-mode-control-heading {
  min-height: 24px;
  padding: 0 3px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .88);
  font: 650 11px/1.2 var(--font-sans);
  letter-spacing: .04em;
}

.desktop-mode-control-heading small {
  color: rgba(255, 255, 255, .40);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0;
}

.desktop-mode-switch {
  width: 100%;
  min-height: 49px;
  padding: 7px 8px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.desktop-mode-switch:hover,
.desktop-mode-switch:focus-visible {
  background: rgba(255, 255, 255, .07);
  outline: none;
}

.desktop-mode-switch[aria-busy="true"] {
  cursor: wait;
  opacity: .58;
}

.desktop-mode-switch-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.desktop-mode-switch-copy strong {
  color: rgba(255, 255, 255, .88);
  font: 620 12px/1.1 var(--font-sans);
}

.desktop-mode-switch-copy small {
  color: rgba(255, 255, 255, .43);
  font: 500 10px/1.1 var(--font-sans);
}

.desktop-mode-switch-track {
  position: relative;
  width: 35px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  transition: border-color .16s ease, background .16s ease;
}

.desktop-mode-switch-track span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .32);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .16s ease;
}

.desktop-mode-switch[aria-checked="true"] .desktop-mode-switch-track {
  border-color: rgba(var(--fc-accent-rgb), .58);
  background: rgba(var(--fc-accent-rgb), .28);
}

.desktop-mode-switch[aria-checked="true"] .desktop-mode-switch-track span {
  background: rgba(228, 255, 249, .98);
  transform: translateX(15px);
}

body.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
  top: 62px;
}

body.desktop-mode-controls-open.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
  top: 137px;
}

@media (prefers-reduced-motion: reduce) {
  #desktop-mode-control-dock,
  #desktop-mode-control-handle,
  #desktop-mode-control-panel,
  .desktop-mode-switch,
  .desktop-mode-switch-track,
  .desktop-mode-switch-track span {
    transition: none !important;
  }

  #desktop-mode-control-panel {
    transform: none;
  }
}

@media (max-width:720px) {
  #desktop-mode-control-dock {
    right: 12px;
  }

  #desktop-mode-control-panel {
    width: min(244px, calc(100vw - 24px));
  }

  body.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
    top: 58px;
  }

  body.desktop-mode-controls-open.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
    top: 133px;
  }
}

body.desktop-wallpaper-mode #desktop-resize-handles {
  display: none !important;
}

html,
body {
  font-family: var(--font-sans);
  background: #000;
  color: #fff;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-font-smoothing: antialiased
}

body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important
}

html.desktop-shell-root,
html.desktop-shell-root body {
  background: transparent
}

:root {
  --font-sans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Alibaba PuHuiTi", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", ui-monospace, monospace;
  --fc-bg: #08090B;
  --fc-paper: #0E1014;
  --fc-ink: #E8ECEF;
  --fc-ink-2: #D2D7DC;
  --fc-muted: #8A9099;
  --fc-hair: #1A1D22;
  --fc-hair-2: #262A31;
  --fc-accent: #FFFFFF;
  --fc-accent-hov: #FFFFFF;
  --fc-accent-rgb: 255, 255, 255;
  --fc-blue: #2442ff;
  --fc-warm: #f8f4ee;
  --chill-ink: #030608;
  --chill-deep: #061116;
  --chill-cyan: #8fe9ff;
  --chill-blue: #73a7ff;
  --chill-mint: #9cffdf;
  --chill-soft: rgba(214, 248, 255, .9);
  --champagne: #f4d28a;
  --champagne-deep: #9a6f2c;
  --home-accent: #00f5d4;
  --home-accent-rgb: 0, 245, 212;
  --visual-tint: #9db8cf;
  --source-netease: #d95b67;
  --source-qq: #00F5D4;
  --source-qishui: #45d68f;
  --source-spotify: #1ed760;
  --source-local: #9db8cf
}

:root {
  --glass-bg: linear-gradient(112deg, rgba(72, 74, 76, .62), rgba(24, 27, 30, .70) 48%, rgba(8, 12, 14, .74));
  --glass-bg-focus: linear-gradient(112deg, rgba(88, 91, 92, .68), rgba(28, 32, 35, .76) 50%, rgba(8, 13, 15, .82));
  --glass-border: rgba(0, 245, 212, .30);
  --glass-border-soft: rgba(255, 255, 255, .095);
  --glass-shadow: 0 22px 64px rgba(0, 0, 0, .30), 0 0 34px rgba(0, 245, 212, .052), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -24px 58px rgba(0, 0, 0, .16);
  --glass-shadow-focus: 0 24px 72px rgba(0, 0, 0, .34), 0 0 0 1px rgba(0, 245, 212, .13), 0 0 42px rgba(0, 245, 212, .075), inset 0 1px 0 rgba(255, 255, 255, .20)
}

:root {
  --saved-panel-glass-bg: rgba(0, 0, 0, .10);
  --saved-panel-glass-filter: blur(12px) saturate(1.8) brightness(1.16);
  --saved-panel-glass-svg-filter: url(#sumusic-control-glass-filter) saturate(1);
  --saved-panel-glass-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .35), inset 0 0 10px 4px rgba(255, 255, 255, .15), 0 4px 16px rgba(17, 17, 26, .05), 0 8px 24px rgba(17, 17, 26, .05), 0 16px 56px rgba(17, 17, 26, .05), inset 0 4px 16px rgba(17, 17, 26, .05), inset 0 8px 24px rgba(17, 17, 26, .05), inset 0 16px 56px rgba(17, 17, 26, .05);
  --saved-panel-glass-radius: 50px;
  --saved-button-glass-bg: rgba(0, 0, 0, .10);
  --saved-button-glass-filter: blur(12px) saturate(1.8) brightness(1.16);
  --saved-button-glass-svg-filter: url(#sumusic-control-glass-filter) saturate(1);
  --saved-button-glass-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .34), inset 0 0 10px 4px rgba(255, 255, 255, .13), 0 10px 30px rgba(0, 0, 0, .18);
  --saved-button-glass-hover-bg: rgba(255, 255, 255, .055);
  --saved-button-glass-hover-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .42), inset 0 0 12px 5px rgba(255, 255, 255, .17), 0 12px 34px rgba(0, 0, 0, .22), 0 0 18px rgba(255, 255, 255, .06)
}

:root {
  --home-icon-color: #f4d28a;
  --home-icon-rgb: 244, 210, 138;
  --visual-icon-color: #7fd8ff;
  --visual-icon-rgb: 127, 216, 255
}

.glass-saved-panel {
  background: var(--saved-panel-glass-bg);
  border: 0;
  border-radius: var(--saved-panel-glass-radius);
  backdrop-filter: var(--saved-panel-glass-filter);
  -webkit-backdrop-filter: var(--saved-panel-glass-filter);
  box-shadow: var(--saved-panel-glass-shadow)
}

html.control-glass-svg-ok .glass-saved-panel {
  background: var(--saved-panel-glass-bg);
  backdrop-filter: var(--saved-panel-glass-svg-filter);
  -webkit-backdrop-filter: var(--saved-panel-glass-svg-filter)
}

.glass-saved-panel::before {
  content: none
}

.glass-saved-button {
  border: 0;
  background: var(--saved-button-glass-bg);
  backdrop-filter: var(--saved-button-glass-filter);
  -webkit-backdrop-filter: var(--saved-button-glass-filter);
  box-shadow: var(--saved-button-glass-shadow)
}

html.control-glass-svg-ok .glass-saved-button {
  backdrop-filter: var(--saved-button-glass-svg-filter);
  -webkit-backdrop-filter: var(--saved-button-glass-svg-filter)
}

.glass-saved-button:hover {
  background: var(--saved-button-glass-hover-bg);
  box-shadow: var(--saved-button-glass-hover-shadow)
}

body::after,
#desktop-window-shell::after {
  content: none
}

#desktop-window-shell {
  display: contents
}

#desktop-titlebar {
  display: none
}

body.desktop-shell {
  background: transparent
}

body.desktop-shell #desktop-window-shell {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  border-radius: 34px;
  clip-path: inset(0 round 34px);
  background: transparent;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .46);
  transform: translateZ(0);
  transform-origin: 50% 54%;
  will-change: transform, opacity, filter;
  transition: border-radius .22s ease, box-shadow .22s ease, clip-path .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, filter .22s ease
}

body.desktop-shell.desktop-maximized #desktop-window-shell,
body.desktop-shell.desktop-fullscreen #desktop-window-shell,
body.desktop-shell.desktop-wallpaper-mode #desktop-window-shell,
html:fullscreen body.desktop-shell #desktop-window-shell {
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important
}

body.desktop-shell.desktop-window-minimizing #desktop-window-shell {
  opacity: .08;
  transform: translate3d(0, 18px, 0) scale(.965);
  filter: blur(6px) saturate(.85)
}

body.desktop-shell.desktop-window-restoring #desktop-window-shell {
  animation: desktop-window-restore .26s cubic-bezier(.16, .9, .28, 1)
}

@keyframes desktop-window-restore {
  from {
    opacity: .01;
    transform: translate3d(0, 18px, 0) scale(.97);
    filter: blur(7px) saturate(.9)
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: none
  }
}

@media (prefers-reduced-motion: reduce) {
  body.desktop-shell #desktop-window-shell {
    transition: none;
    animation: none
  }
}

body.desktop-shell #desktop-titlebar {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  padding: 0 12px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-app-region: drag;
  pointer-events: none
}

body.desktop-shell #desktop-titlebar::after {
  content: none
}

.desktop-drag-region {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: rgba(224, 250, 255, .74);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-app-region: drag;
  pointer-events: auto
}

.desktop-app-mark {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: url("../assets/sumusic/sumusic-logo-256.png") center/cover no-repeat;
  box-shadow: 0 0 14px rgba(55, 221, 239, .22);
}

.desktop-app-title {
  display: block
}

.desktop-window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-app-region: no-drag;
  pointer-events: auto
}

.desktop-window-btn {
  width: 38px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: rgba(4, 8, 10, .42);
  color: rgba(224, 250, 255, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s
}

.desktop-window-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none
}

.desktop-window-btn:hover {
  background: rgba(244, 210, 138, .14);
  color: #fff1bd;
  transform: translateY(-1px)
}

.desktop-window-btn.close:hover {
  background: rgba(255, 86, 100, .86);
  color: #fff
}

.desktop-mode-btn {
  height: 30px;
  min-width: 78px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(4, 8, 10, .42);
  color: rgba(224, 250, 255, .70);
  font-family: inherit;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s, border-color .18s, box-shadow .18s
}

.desktop-mode-btn::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 rgba(255, 83, 103, 0);
  transition: background .18s, box-shadow .18s
}

.desktop-mode-btn:hover {
  background: rgba(255, 83, 103, .10);
  border-color: rgba(255, 83, 103, .34);
  color: #fff;
  transform: translateY(-1px)
}

.desktop-mode-btn.on {
  color: #fff;
  border-color: rgba(255, 83, 103, .50);
  background: rgba(255, 83, 103, .13);
  box-shadow: 0 12px 34px rgba(255, 83, 103, .09), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.desktop-mode-btn.on::before {
  background: #ff5367;
  box-shadow: 0 0 16px rgba(255, 83, 103, .56)
}

body.desktop-shell #desktop-titlebar #visual-guide-btn,
body.desktop-shell #desktop-titlebar #update-entry {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: none;
  background: rgba(4, 8, 10, .42);
  border-color: rgba(255, 255, 255, .08);
  color: rgba(224, 250, 255, .70);
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}

body.desktop-shell #desktop-titlebar #visual-guide-btn {
  font-size: 14px
}

body.desktop-shell #desktop-titlebar #update-entry.available {
  display: flex
}

body.desktop-shell #desktop-titlebar #update-entry svg {
  width: 18px;
  height: 18px
}

body.desktop-shell #desktop-titlebar #update-entry::before,
body.desktop-shell #desktop-titlebar #update-entry::after {
  display: none
}

body.desktop-shell #desktop-titlebar #visual-guide-btn:hover,
body.desktop-shell #desktop-titlebar #update-entry:hover {
  background: rgba(255, 83, 103, .10);
  border-color: rgba(255, 83, 103, .32);
  color: #fff;
  transform: translateY(-1px)
}

body.desktop-shell #search-area {
  top: -92px
}

body.desktop-shell #search-area.peek {
  top: 34px
}

body.desktop-shell #search-area.stage-mode.peek {
  top: 32px
}

body.desktop-shell #top-right {
  top: 58px;
  right: 24px
}

body.desktop-shell #trial-banner {
  top: 112px
}

body.desktop-shell #ai-depth-chip {
  top: 112px
}

body.desktop-shell #beat-chip {
  top: 154px
}

body.desktop-shell #toast {
  top: 60px
}

#fullscreen-diy-zone {
  display: none;
  position: fixed;
  z-index: 520;
  top: var(--fullscreen-diy-top, 24px);
  left: var(--fullscreen-diy-left, calc(100vw - 510px));
  width: var(--fullscreen-diy-width, 128px);
  height: 52px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  -webkit-app-region: no-drag
}

#fullscreen-diy-btn {
  min-width: 108px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px) scale(.96);
  transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), background .18s, color .18s, border-color .18s, box-shadow .18s
}

body.visual-guide-active #fullscreen-diy-zone {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .18s cubic-bezier(.16, 1, .3, 1)
}

body.visual-guide-active #fullscreen-diy-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-18px) scale(.96) !important
}

body.desktop-shell.desktop-fullscreen #desktop-titlebar,
html:fullscreen body.desktop-shell #desktop-titlebar {
  display: none !important
}

body.desktop-shell.desktop-fullscreen #fullscreen-diy-zone,
html:fullscreen body.desktop-shell #fullscreen-diy-zone {
  display: flex
}

body.fullscreen-diy-peek #fullscreen-diy-zone,
#fullscreen-diy-zone:hover {
  pointer-events: auto
}

body.fullscreen-diy-peek #fullscreen-diy-btn,
#fullscreen-diy-zone:hover #fullscreen-diy-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1)
}

body.desktop-shell.desktop-fullscreen #search-area.peek {
  top: 24px
}

body.desktop-shell.desktop-fullscreen #top-right {
  top: 24px
}

@media (max-width:720px) {
  body.desktop-shell #top-right {
    right: 12px;
    top: 58px
  }

  body.desktop-shell #search-area.peek {
    top: 58px
  }
}

@media (max-width:720px) {
  #fullscreen-diy-zone {
    height: 48px
  }

  #fullscreen-diy-btn {
    min-width: 96px;
    height: 32px
  }
}

/* ---------- 背景 ---------- */
#custom-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(var(--custom-bg-color-rgb, 0, 0, 0), var(--custom-bg-base-opacity, 1));
  overflow: hidden;
  transition: background .35s ease, opacity 420ms cubic-bezier(.16, 1, .3, 1)
}

#custom-bg-video {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  opacity: var(--custom-bg-video-opacity, 0);
  filter: none;
  transform: scale(calc(1.002 * var(--custom-bg-zoom, 1)));
  transform-origin: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  transition: opacity .35s ease;
  pointer-events: none;
  background: transparent
}

#custom-bg::before {
  content: '';
  position: absolute;
  inset: -1px;
  background-image: var(--custom-bg-image, none);
  background-size: cover;
  background-position: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  opacity: var(--custom-bg-image-opacity, 0);
  filter: none;
  transform: scale(calc(1.002 * var(--custom-bg-zoom, 1)));
  transform-origin: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  transition: opacity .35s ease, background-image .35s ease, background-position .22s ease, transform .22s ease;
  pointer-events: none
}

#custom-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .16));
  opacity: var(--custom-bg-overlay-opacity, 0);
  transition: opacity .35s ease, background .35s ease;
  pointer-events: none
}

#wallpaper-engine-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
  clip-path: inset(0);
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 420ms;
  contain: strict
}

#wallpaper-engine-layer.ready {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s
}

body.wallpaper-engine-dwm-active #wallpaper-engine-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important
}

/* DWM keeps the real WE scene/cursor-parallax path native. This narrowly
   clipped compositor copy exists only so the saved bottom-bar SVG backdrop
   filter can sample the wallpaper together with the DOM cover and particles. */
#wallpaper-engine-glass-sampler {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border-radius: 0;
  clip-path: inset(0 round var(--wallpaper-engine-glass-radius, 0px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  contain: strict
}

#wallpaper-engine-glass-sampler-video {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  opacity: 1;
  pointer-events: none;
  background: transparent
}

body.wallpaper-engine-dwm-active.wallpaper-engine-glass-sampler-ready #wallpaper-engine-glass-sampler.bar-visible {
  opacity: 1;
  visibility: visible
}

#wallpaper-engine-image,
#wallpaper-engine-video,
#wallpaper-engine-freeze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  clip-path: inherit;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  background: #000
}

#wallpaper-engine-image,
#wallpaper-engine-video {
  z-index: 1
}

#wallpaper-engine-freeze {
  z-index: 2;
  object-fit: fill;
  visibility: hidden;
  transition: opacity 160ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 160ms
}

#wallpaper-engine-layer.freeze-ready #wallpaper-engine-freeze {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s
}

#wallpaper-engine-layer.image-ready #wallpaper-engine-image,
#wallpaper-engine-layer.video-ready #wallpaper-engine-video {
  opacity: 1
}

#wallpaper-engine-layer.engine-ready #wallpaper-engine-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill
}

body.desktop-shell #wallpaper-engine-layer,
body.desktop-shell #wallpaper-engine-image,
body.desktop-shell #wallpaper-engine-video,
body.desktop-shell #wallpaper-engine-freeze {
  border-radius: 34px;
  clip-path: inset(0 round 34px)
}

body.desktop-shell.desktop-maximized #wallpaper-engine-layer,
body.desktop-shell.desktop-maximized #wallpaper-engine-image,
body.desktop-shell.desktop-maximized #wallpaper-engine-video,
body.desktop-shell.desktop-maximized #wallpaper-engine-freeze,
body.desktop-shell.desktop-fullscreen #wallpaper-engine-layer,
body.desktop-shell.desktop-fullscreen #wallpaper-engine-image,
body.desktop-shell.desktop-fullscreen #wallpaper-engine-video,
body.desktop-shell.desktop-fullscreen #wallpaper-engine-freeze,
body.desktop-shell.desktop-wallpaper-mode #wallpaper-engine-layer,
body.desktop-shell.desktop-wallpaper-mode #wallpaper-engine-image,
body.desktop-shell.desktop-wallpaper-mode #wallpaper-engine-video,
body.desktop-shell.desktop-wallpaper-mode #wallpaper-engine-freeze,
html:fullscreen body.desktop-shell #wallpaper-engine-layer,
html:fullscreen body.desktop-shell #wallpaper-engine-image,
html:fullscreen body.desktop-shell #wallpaper-engine-video,
html:fullscreen body.desktop-shell #wallpaper-engine-freeze {
  border-radius: 0 !important;
  clip-path: none !important
}

body.wallpaper-engine-active #custom-bg,
body.wallpaper-engine-active #album-bg,
body.wallpaper-engine-active #album-bg-next {
  opacity: 0 !important
}

body.custom-bg-glass-active #custom-bg::after {
  background:
    radial-gradient(circle at 22% 8%, rgba(255, 255, 255, var(--custom-bg-glass-veil, 0)), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, var(--custom-bg-glass-veil, 0)), rgba(0, 0, 0, .06));
  backdrop-filter: blur(var(--custom-bg-glass-blur, 0px)) saturate(var(--custom-bg-glass-saturate, 1)) brightness(var(--custom-bg-glass-brightness, 1));
  -webkit-backdrop-filter: blur(var(--custom-bg-glass-blur, 0px)) saturate(var(--custom-bg-glass-saturate, 1)) brightness(var(--custom-bg-glass-brightness, 1))
}

body.custom-background-override #custom-bg::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .018), rgba(0, 0, 0, .045))
}

body.custom-background-override.custom-bg-glass-active #custom-bg::after {
  background:
    radial-gradient(circle at 22% 8%, rgba(255, 255, 255, var(--custom-bg-glass-veil, 0)), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, var(--custom-bg-glass-veil, 0)), rgba(0, 0, 0, .035))
}

body.custom-background-override.custom-background-flat:not(.custom-bg-glass-active) #custom-bg::after {
  opacity: 0 !important
}

body.custom-background-video #custom-bg::before {
  opacity: 0 !important
}

#album-bg,
#album-bg-next {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  filter: blur(120px) brightness(0.18) saturate(1.5);
  transform: scale(calc(1.4 * var(--custom-bg-zoom, 1)));
  transform-origin: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  transition: opacity 760ms cubic-bezier(.16, 1, .3, 1), background-position .22s ease, transform .22s ease;
  opacity: 0;
  pointer-events: none
}

#album-bg.visible,
#album-bg-next.visible {
  opacity: var(--custom-bg-album-opacity, 1)
}

body.custom-background-override #album-bg,
body.custom-background-override #album-bg-next {
  opacity: 0 !important
}

body.custom-background-album-cover #custom-bg::before {
  opacity: var(--custom-bg-image-opacity, 0) !important
}

body.custom-background-album-cover #custom-bg-video {
  opacity: var(--custom-bg-video-opacity, 0) !important
}

#sonic-workshop-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  background: #000;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none
}

#sonic-workshop-layer iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none
}

#sonic-workshop-layer,
#sonic-workshop-layer * {
  pointer-events: none !important
}

body.sonic-workshop-active #album-bg,
body.sonic-workshop-active #album-bg-next,
body.sonic-workshop-active #custom-bg {
  opacity: 0 !important
}

/* In layered-colorkey desktop composition Explorer keys only its own icon
   surface. SuMusic keeps the same renderer-owned album, particle, custom,
   Wallpaper Engine, and Sonic Workshop backgrounds as the normal player. */

#canvas-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  transition: opacity 760ms cubic-bezier(.16, 1, .3, 1), transform 760ms cubic-bezier(.16, 1, .3, 1)
}

#canvas-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important
}

#canvas-container:focus,
#canvas-container:focus-visible,
#canvas-container canvas:focus,
#canvas-container canvas:focus-visible,
html:focus,
html:focus-visible,
body:focus,
body:focus-visible {
  outline: none !important;
  box-shadow: none !important
}

#canvas-container canvas {
  outline: none !important;
  border: 0 !important
}

body.render-deep-sleep #canvas-container,
body.render-deep-sleep #sonic-workshop-layer,
body.render-deep-sleep #idle-guide-canvas,
body.render-deep-sleep #splash-canvas,
body.render-deep-sleep #hand-canvas {
  opacity: 0 !important;
  visibility: hidden !important
}

body.splash-active:not(.splash-revealing) #canvas-container {
  opacity: .22;
  transform: scale(1)
}

body.splash-active.splash-revealing #canvas-container {
  opacity: 1;
  transform: scale(1)
}

#idle-guide-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1)
}

body.idle-guide-on #idle-guide-canvas {
  opacity: 1 !important
}

body.home-wallpaper-preview #idle-guide-canvas {
  opacity: 0 !important;
  visibility: hidden !important
}

body.idle-guide-interactive #canvas-container {
  cursor: grab
}

body.idle-guide-dragging #canvas-container {
  cursor: grabbing
}

#free-camera-hint {
  position: fixed;
  z-index: 22;
  left: 24px;
  bottom: 92px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(5, 6, 8, .78);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s
}

#free-camera-hint.show {
  opacity: 1;
  transform: translateY(0)
}

#free-camera-hint b {
  color: #fff;
  font-weight: 780
}

/* ---------- 启动页 ---------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #010304;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 1;
  overflow: hidden;
  transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
  box-shadow: inset 0 0 180px rgba(0, 0, 0, .88)
}

#splash::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 83, 103, .055) 24%, transparent 42%, rgba(244, 210, 138, .052) 62%, transparent 82%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .030) 0 1px, transparent 1px 54px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .020) 0 1px, transparent 1px 46px), linear-gradient(180deg, #020606 0%, #050607 42%, #000 100%);
  filter: blur(.4px);
  opacity: .90;
  animation: splash-field-breathe 7s ease-in-out infinite alternate;
  pointer-events: none
}

#splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 21%, transparent 79%, rgba(0, 0, 0, .82)), linear-gradient(180deg, rgba(0, 0, 0, .68), transparent 32%, transparent 64%, rgba(0, 0, 0, .74));
  pointer-events: none
}

#splash.hide {
  pointer-events: none
}

#splash.ready {
  cursor: pointer
}

#splash.exiting {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.010)
}

#splash-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1)
}

#splash.exiting #splash-canvas {
  opacity: .22;
  transform: scale(1.008)
}

.splash-bg-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: screen;
  pointer-events: none
}

.splash-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1)
}

.splash-wordmark {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: clamp(70px, 12vw, 136px);
  min-width: min(74vw, 760px);
  font-size: clamp(52px, 8.8vw, 112px);
  line-height: .92;
  font-weight: 720;
  letter-spacing: -.055em;
  color: #f8f8f2;
  text-shadow: 0 20px 82px rgba(0, 0, 0, .68), -2px 0 18px rgba(255, 83, 103, .16), 2px 0 18px rgba(122, 215, 194, .12);
  isolation: isolate;
  filter: drop-shadow(0 0 22px rgba(244, 210, 138, .075))
}

.splash-logo {
  width: clamp(72px, 10vw, 118px);
  height: clamp(72px, 10vw, 118px);
  margin: 0 auto 18px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 0 34px rgba(40, 224, 240, .22), 0 18px 52px rgba(0, 0, 0, .38);
}

.splash-word-mine,
.splash-word-radio {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  will-change: opacity, transform, letter-spacing
}

.splash-word-mine {
  opacity: 0;
  animation: splash-mine-in 5200ms cubic-bezier(.22, 1, .36, 1) forwards;
  text-shadow: -2px 0 0 rgba(255, 83, 103, .24), 2px 0 0 rgba(122, 215, 194, .18), 0 22px 72px rgba(0, 0, 0, .58), 0 0 34px rgba(244, 210, 138, .10)
}

.splash-word-radio {
  opacity: 0;
  letter-spacing: -.018em;
  background: linear-gradient(94deg, rgba(255, 255, 255, .06), #fff 26%, rgba(244, 210, 138, .98) 48%, rgba(122, 215, 194, .90) 68%, rgba(255, 255, 255, .82));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: splash-radio-in 5200ms cubic-bezier(.22, 1, .36, 1) forwards;
  text-shadow: -2px 0 0 rgba(255, 83, 103, .16), 2px 0 0 rgba(122, 215, 194, .22), 0 0 34px rgba(122, 215, 194, .10)
}

.splash-word-i {
  display: inline-block;
  position: relative;
  width: .24em;
  height: .86em;
  margin: 0 .022em;
  vertical-align: -.015em;
  color: transparent;
  -webkit-text-fill-color: transparent
}

.splash-word-i::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .015em;
  width: .108em;
  height: .565em;
  border-radius: .06em;
  background: linear-gradient(180deg, #f8edd1 0%, #d8bd78 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(244, 210, 138, .12)
}

.splash-word-i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: .035em;
  width: .142em;
  height: .142em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(244, 210, 138, .44), 0 0 36px rgba(255, 255, 255, .16);
  opacity: 0;
  transform: translate(-50%, .22em) scale(.34);
  animation: splash-i-dot-pop 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-word-o {
  display: inline-block;
  position: relative;
  color: #d8c486;
  -webkit-text-fill-color: #d8c486
}

.splash-signal-line {
  position: relative;
  width: min(460px, 54vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(122, 215, 194, .22), rgba(255, 255, 255, .78), rgba(244, 210, 138, .66), rgba(255, 83, 103, .22), transparent);
  opacity: 0;
  transform: scaleX(.12);
  box-shadow: 0 0 18px rgba(244, 210, 138, .24), 0 0 34px rgba(122, 215, 194, .10);
  animation: splash-signal-line 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-signal-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 24px rgba(244, 210, 138, .54);
  transform: translate(-50%, -50%) scale(.32);
  opacity: 0;
  animation: splash-signal-blip 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .34);
  text-transform: uppercase;
  opacity: 0;
  animation: splash-sub-in 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-enter {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .62);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: 0 0 18px rgba(244, 210, 138, .24), 0 0 34px rgba(122, 215, 194, .12);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1)
}

#splash.ready .splash-enter {
  opacity: 1;
  transform: translateY(0);
  animation: splash-enter-pulse 1800ms ease-in-out infinite alternate
}

@keyframes splash-field-breathe {
  0% {
    opacity: .72;
    transform: scale(1)
  }

  100% {
    opacity: 1;
    transform: scale(1.035)
  }
}

@keyframes splash-mine-in {
  0% {
    opacity: 0;
    clip-path: inset(48% 0 49% 0);
    transform: translate(calc(-50% - 10px), -42%) skewX(-10deg) scaleX(1.08);
    letter-spacing: .055em
  }

  14% {
    opacity: .92;
    clip-path: inset(40% 0 42% 0);
    transform: translate(calc(-50% - 4px), -50%) skewX(-4deg) scaleX(1.04);
    letter-spacing: .014em
  }

  26% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate(-50%, -50%) skewX(0) scaleX(1);
    letter-spacing: -.040em
  }

  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }

  67% {
    opacity: 1;
    transform: translate(calc(-50% - clamp(66px, 10.8vw, 130px)), -50%) scale(.998);
    letter-spacing: -.055em
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% - clamp(66px, 10.8vw, 130px)), -50%) scale(.998)
  }
}

@keyframes splash-radio-in {

  0%,
  32% {
    opacity: 0;
    clip-path: inset(52% 0 44% 0);
    transform: translate(calc(-50% + clamp(78px, 12vw, 142px)), -50%) skewX(9deg) scaleX(1.06);
    background-position: 0 0
  }

  48% {
    opacity: .88;
    clip-path: inset(34% 0 32% 0);
    transform: translate(calc(-50% + clamp(72px, 11.5vw, 138px)), -50%) skewX(3deg) scaleX(1.02);
    background-position: 52% 0
  }

  66% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate(calc(-50% + clamp(70px, 11.4vw, 136px)), -50%) scale(1);
    background-position: 76% 0
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + clamp(70px, 11.4vw, 136px)), -50%) scale(1);
    background-position: 100% 0
  }
}

@keyframes splash-i-dot-pop {

  0%,
  48% {
    opacity: 0;
    transform: translate(-50%, .22em) scale(.34)
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -.018em) scale(1.12)
  }

  68% {
    opacity: .92;
    transform: translate(-50%, .010em) scale(.94)
  }

  76%,
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1)
  }
}

@keyframes splash-signal-line {

  0%,
  28% {
    opacity: 0;
    transform: scaleX(.10)
  }

  44% {
    opacity: .98;
    transform: scaleX(1.05)
  }

  64% {
    opacity: .70;
    transform: scaleX(.82)
  }

  76% {
    opacity: 1;
    transform: scaleX(1.14);
    box-shadow: 0 0 28px rgba(244, 210, 138, .36), 0 0 60px rgba(122, 215, 194, .18)
  }

  100% {
    opacity: .30;
    transform: scaleX(.64)
  }
}

@keyframes splash-signal-blip {

  0%,
  42% {
    opacity: 0;
    left: 18%;
    transform: translate(-50%, -50%) scale(.24)
  }

  62% {
    opacity: .94;
    left: 50%;
    transform: translate(-50%, -50%) scale(1)
  }

  76% {
    opacity: 1;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.45)
  }

  100% {
    opacity: .16;
    left: 82%;
    transform: translate(-50%, -50%) scale(.46)
  }
}

@keyframes splash-sub-in {

  0%,
  38% {
    opacity: 0;
    transform: translateY(7px)
  }

  56% {
    opacity: .58;
    transform: translateY(0)
  }

  100% {
    opacity: .42;
    transform: translateY(0)
  }
}

@keyframes splash-enter-pulse {
  0% {
    opacity: .46;
    text-shadow: 0 0 14px rgba(244, 210, 138, .16), 0 0 26px rgba(122, 215, 194, .08)
  }

  100% {
    opacity: .78;
    text-shadow: 0 0 22px rgba(244, 210, 138, .30), 0 0 42px rgba(122, 215, 194, .16)
  }
}

html[data-sumusic="1"] #splash {
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 220, 207, .13), transparent 31%),
    radial-gradient(circle at 28% 70%, rgba(255, 126, 153, .10), transparent 27%),
    linear-gradient(155deg, #050708 0%, #0b0d10 48%, #020203 100%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .72);
}

html[data-sumusic="1"] #splash::before {
  inset: -18%;
  background:
    conic-gradient(from 210deg at 50% 48%, transparent 0deg, rgba(101, 232, 218, .10) 62deg, transparent 126deg, rgba(255, 144, 170, .09) 218deg, transparent 304deg),
    radial-gradient(circle at center, transparent 0 26%, rgba(255, 255, 255, .045) 26.3% 26.8%, transparent 27.2% 38%, rgba(101, 232, 218, .040) 38.3% 38.8%, transparent 39.2%),
    linear-gradient(180deg, rgba(255, 255, 255, .030), transparent 46%, rgba(255, 255, 255, .018));
  filter: blur(.2px);
  opacity: .78;
  animation: sumusic-splash-disc 10s linear infinite;
}

html[data-sumusic="1"] #splash::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .46), transparent 34%, rgba(0, 0, 0, .60)),
    radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, .68) 100%);
}

html[data-sumusic="1"] #splash-canvas {
  opacity: .20;
  filter: saturate(.72) blur(.2px);
}

html[data-sumusic="1"] .splash-bg-noise {
  opacity: .025;
}

html[data-sumusic="1"] .splash-content {
  gap: 14px;
  transform: translateY(0);
  animation: sumusic-splash-content 960ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-sumusic="1"] .splash-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  width: min(520px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .055) 0 2px, transparent 3px 100%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .085) 0 1px, transparent 1px 20px);
  opacity: .28;
  mask-image: radial-gradient(circle, #000 0 58%, transparent 74%);
  animation: sumusic-splash-breathe 4.8s ease-in-out infinite;
}

html[data-sumusic="1"] .splash-logo {
  width: clamp(78px, 9vw, 112px);
  height: clamp(78px, 9vw, 112px);
  margin: 0 auto 10px;
  border-radius: 28px;
  box-shadow:
    0 20px 58px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(255, 255, 255, .16),
    0 0 42px rgba(93, 226, 213, .22);
  animation: sumusic-logo-in 980ms 80ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-sumusic="1"] .splash-wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16em;
  height: auto;
  min-width: 0;
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
  color: #fff;
  filter: none;
  text-shadow:
    0 18px 68px rgba(0, 0, 0, .58),
    0 0 26px rgba(92, 220, 207, .16);
  animation: sumusic-wordmark-in 920ms 180ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-sumusic="1"] .splash-word-mine,
html[data-sumusic="1"] .splash-word-radio {
  position: static;
  top: auto;
  left: auto;
  opacity: 1;
  transform: none;
  animation: none;
  white-space: nowrap;
  will-change: transform, opacity;
}

html[data-sumusic="1"] .splash-word-mine {
  color: #ffffff;
  text-shadow: 0 0 28px rgba(255, 255, 255, .16), 0 0 44px rgba(92, 220, 207, .18);
}

html[data-sumusic="1"] .splash-word-radio {
  background: linear-gradient(98deg, #ffffff 0%, #e9fff9 42%, #8de8db 78%, #ffffff 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: sumusic-word-shimmer 3.2s ease-in-out infinite;
}

html[data-sumusic="1"] .splash-signal-line {
  width: min(320px, 46vw);
  height: 24px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent),
    repeating-linear-gradient(90deg, rgba(141, 232, 219, .72) 0 2px, transparent 2px 14px);
  opacity: .68;
  transform: scaleX(1);
  box-shadow: 0 0 22px rgba(92, 220, 207, .13);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  animation: sumusic-wave-line 1.8s ease-in-out infinite;
}

html[data-sumusic="1"] .splash-signal-line::after {
  display: none;
}

html[data-sumusic="1"] .splash-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(224, 255, 249, .54);
  opacity: 0;
  animation: sumusic-sub-in 760ms 420ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-sumusic="1"] .splash-enter {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 0 18px rgba(92, 220, 207, .18);
}

html[data-sumusic="1"] #splash.ready .splash-enter {
  animation: sumusic-enter-pulse 1.9s ease-in-out infinite alternate;
}

@keyframes sumusic-splash-disc {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.02); }
}

@keyframes sumusic-splash-content {
  0% { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes sumusic-splash-breathe {
  0%, 100% { opacity: .20; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: .34; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes sumusic-logo-in {
  0% { opacity: 0; transform: translateY(10px) scale(.88); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes sumusic-wordmark-in {
  0% { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes sumusic-word-shimmer {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 100% 0; }
}

@keyframes sumusic-wave-line {
  0%, 100% { opacity: .48; transform: scaleX(.92); }
  50% { opacity: .78; transform: scaleX(1); }
}

@keyframes sumusic-sub-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: .62; transform: translateY(0); }
}

@keyframes sumusic-enter-pulse {
  0% { opacity: .46; transform: translateY(0); }
  100% { opacity: .82; transform: translateY(-1px); }
}

/* ---------- 主提示 ---------- */
#hint {
  display: none;
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 1s ease
}

#hint.hidden {
  opacity: 0
}

#hint.shelf-hidden {
  opacity: 0 !important
}

#hint .sub {
  font-size: 10px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 2px
}

body.splash-active:not(.splash-revealing) #hint,
body.splash-active:not(.splash-revealing) #top-right,
body.splash-active:not(.splash-revealing) #search-area {
  opacity: 0;
  pointer-events: none
}

body.splash-active:not(.splash-revealing) #hint {
  transform: translate(-50%, -44%) scale(.985);
  filter: blur(12px)
}

body.splash-active.splash-revealing #hint:not(.hidden) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  transition: opacity 620ms 140ms cubic-bezier(.32, 0, .1, 1), transform 620ms 140ms cubic-bezier(.32, 0, .1, 1), filter 620ms 140ms cubic-bezier(.32, 0, .1, 1)
}

body.splash-active.splash-revealing #top-right {
  opacity: 1;
  transition: opacity 560ms 220ms cubic-bezier(.32, 0, .1, 1)
}

html.startup-fast-skip-preload body {
  background: #000
}

html.startup-fast-skip-preload #splash {
  background: #000 !important;
  box-shadow: none !important;
  transition: none !important
}

html.startup-fast-skip-preload #splash::before,
html.startup-fast-skip-preload #splash::after,
html.startup-fast-skip-preload #splash-canvas,
html.startup-fast-skip-preload .splash-bg-noise,
html.startup-fast-skip-preload .splash-content {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important
}

html.startup-fast-skip-preload #canvas-container,
html.startup-fast-skip-preload #idle-guide-canvas,
html.startup-fast-skip-preload #hint,
html.startup-fast-skip-preload #top-right,
html.startup-fast-skip-preload #search-area,
html.startup-fast-skip-preload #bottom-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important
}

body.startup-fast-skip-revealing #canvas-container,
body.startup-fast-skip-revealing #idle-guide-canvas,
body.startup-fast-skip-revealing #top-right,
body.startup-fast-skip-revealing #search-area,
body.startup-fast-skip-revealing #bottom-bar {
  transition-duration: 420ms !important
}

/* ---------- 顶部搜索 (半隐藏) ---------- */
#search-area {
  --search-offset: 0px;
  position: fixed;
  z-index: 10;
  top: -76px;
  left: 50%;
  transform: translateX(calc(-50% + var(--search-offset)));
  width: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: top .45s cubic-bezier(.2, .7, .2, 1), opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1);
  opacity: 0;
  pointer-events: none
}

#search-area.has-cover-action {
  --search-offset: 0px
}

#search-area.peek {
  top: 24px;
  opacity: 1;
  pointer-events: auto
}

#search-area.stage-mode #search-stack {
  width: min(360px, 52vw)
}

#search-area.stage-mode.peek {
  top: 18px
}

#search-stack {
  width: min(520px, 58vw)
}

#search-box {
  display: flex;
  align-items: center;
  height: 58px;
  border-radius: 22px;
  padding: 0 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(34px) saturate(1.34);
  -webkit-backdrop-filter: blur(34px) saturate(1.34);
  transition: border-color .28s, background .28s, box-shadow .28s, transform .28s;
  cursor: text
}

#search-box:focus-within {
  border-color: rgba(var(--fc-accent-rgb), .50);
  background: var(--glass-bg-focus);
  box-shadow: var(--glass-shadow-focus);
  transform: translateY(-1px)
}

#search-icon {
  color: rgba(255, 255, 255, 0.3);
  margin-right: 10px;
  flex-shrink: 0
}

#search-input {
  flex: 1;
  border: none;
  background: none;
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  letter-spacing: 0.3px
}

#search-input::placeholder {
  color: rgba(255, 255, 255, 0.22)
}

.search-mode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin-top: 8px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(var(--fc-accent-rgb), .12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px)
}

.search-mode-tabs button {
  height: 24px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .7px;
  cursor: pointer;
  transition: background .22s, color .22s, box-shadow .22s, transform .22s
}

.search-mode-tabs button:hover {
  color: rgba(255, 255, 255, .78)
}

.search-mode-tabs button.active {
  color: #eafffb;
  background: rgba(0, 245, 212, .11);
  box-shadow: inset 0 0 0 1px rgba(0, 245, 212, .22), 0 8px 24px rgba(0, 245, 212, .055)
}

body.empty-home-active.diy-mode #search-area:not(.has-results) #search-mode-tabs {
  display: none
}

#search-results {
  margin-top: 8px;
  background: rgba(12, 12, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  display: none
}

#search-results.show {
  display: block;
  border-color: rgba(var(--fc-accent-rgb), .16);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .34), 0 0 0 1px rgba(var(--fc-accent-rgb), .05)
}

#search-results::-webkit-scrollbar {
  width: 3px
}

#search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px
}

.search-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .42);
  letter-spacing: .4px
}

.search-history {
  padding: 10px
}

.search-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
  color: rgba(255, 255, 255, .42);
  font-size: 10.5px;
  letter-spacing: .8px
}

.search-history-clear {
  border: 0;
  background: transparent;
  color: rgba(var(--fc-accent-rgb), .68);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  padding: 2px 0
}

.search-history-clear:hover {
  color: #fff;
  text-shadow: 0 0 14px rgba(var(--fc-accent-rgb), .22)
}

.search-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.search-history-chip {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .66);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s
}

.search-history-chip:hover {
  background: rgba(var(--fc-accent-rgb), .10);
  border-color: rgba(var(--fc-accent-rgb), .30);
  color: #fff;
  box-shadow: 0 8px 22px rgba(var(--fc-accent-rgb), .07);
  transform: translateY(-1px)
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025)
}

.search-result:last-child {
  border-bottom: none
}

.search-result:hover {
  background: rgba(var(--fc-accent-rgb), .075)
}

.search-result img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05)
}

.search-result-info {
  flex: 1;
  min-width: 0
}

.search-result-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px
}

.search-result-meta {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.search-artist-link {
  display: inline-flex;
  max-width: 48%;
  vertical-align: baseline;
  border: 0;
  background: transparent;
  color: rgba(var(--fc-accent-rgb), .78);
  font: inherit;
  font-weight: 650;
  padding: 0;
  margin: 0 3px 0 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.search-artist-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px
}

.tag-vip {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff3c2, var(--champagne), #c9963d);
  color: #201303;
  font-weight: 700;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(244, 210, 138, .22)
}

.tag-podcast {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .58);
  font-weight: 750;
  letter-spacing: .7px;
  flex-shrink: 0
}

.tag-source {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .55px;
  line-height: 1;
  flex-shrink: 0
}

.tag-source.netease {
  color: #ffd8dd;
  border-color: rgba(217, 91, 103, .30);
  background: rgba(217, 91, 103, .075)
}

.tag-source.qq {
  color: #f0ffc8;
  border-color: rgba(191, 214, 107, .30);
  background: rgba(191, 214, 107, .075)
}

.tag-source.kugou {
  color: #c9f5ff;
  border-color: rgba(86, 224, 255, .30);
  background: rgba(86, 224, 255, .075)
}

.tag-source.qishui {
  color: #d7ffe5;
  border-color: rgba(69, 214, 143, .30);
  background: rgba(69, 214, 143, .075)
}

.tag-source.spotify {
  color: #d8ffe2;
  border-color: rgba(30, 215, 96, .34);
  background: rgba(30, 215, 96, .085)
}

.search-result.qq-source:hover {
  background: rgba(191, 214, 107, .052)
}

.search-result.kugou-source:hover {
  background: rgba(86, 224, 255, .052)
}

.search-result.qishui-source:hover {
  background: rgba(69, 214, 143, .052)
}

.search-result.spotify-source:hover {
  background: rgba(30, 215, 96, .052)
}

.search-result.netease-source:hover {
  background: rgba(217, 91, 103, .045)
}

.podcast-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  background: rgba(255, 255, 255, .025)
}

.podcast-result-head img {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, .05);
  flex-shrink: 0
}

.podcast-back-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .66);
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}

.podcast-back-btn:hover {
  color: #fff0bf;
  border-color: rgba(244, 210, 138, .35);
  background: rgba(244, 210, 138, .10)
}

.search-result .add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s
}

.search-result .add-btn:hover {
  background: rgba(0, 245, 212, .12);
  color: #eafffb;
  border-color: rgba(0, 245, 212, .34)
}

html.simple-mode-preload #search-mode-tabs,
html.simple-mode-preload #upload-actions,
html.simple-mode-preload #fx-fab,
html.simple-mode-preload #fx-fab-hide-btn,
html.simple-mode-preload #fx-panel,
body.simple-mode #search-mode-tabs,
body.simple-mode #upload-actions,
body.simple-mode #fx-fab,
body.simple-mode #fx-fab-hide-btn,
body.simple-mode #fx-panel {
  display: none !important
}

html.simple-mode-preload #search-area,
body.simple-mode #search-area {
  --search-offset: 0;
  left: 50%;
  width: min(620px, calc(100vw - 56px));
  transform: translateX(-50%);
  align-items: stretch
}

body.simple-mode #search-area.peek {
  top: 24px
}

body.desktop-shell.simple-mode #search-area.peek {
  top: 34px
}

html.simple-mode-preload #search-stack,
body.simple-mode #search-stack {
  width: 100%
}

body.simple-mode #search-box {
  height: 58px;
  border-radius: 22px;
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow)
}

body.simple-mode #search-box:focus-within {
  border-color: rgba(0, 245, 212, .50);
  background: var(--glass-bg-focus);
  box-shadow: var(--glass-shadow-focus)
}

body.simple-mode #search-results {
  max-height: min(420px, calc(100vh - 210px))
}

body.simple-mode #quality-control,
body.simple-mode #controls-hide-btn,
body.simple-mode .fullscreen-toggle-btn {
  display: none !important
}

body.simple-mode .control-cluster.modes {
  gap: 12px
}

body.simple-mode #bottom-bar {
  width: min(1060px, calc(100vw - 56px))
}

body.simple-mode #controls {
  grid-template-columns: minmax(310px, 1.05fr) minmax(344px, auto) minmax(230px, .72fr)
}

body.simple-mode .control-meta {
  max-width: 420px
}

body.simple-mode .mini-queue-popover {
  width: min(380px, calc(100vw - 32px))
}

@media (max-width:720px) {
  body.simple-mode #search-area {
    width: calc(100vw - 28px)
  }

  body.desktop-shell.simple-mode #search-area.peek {
    top: 58px
  }

  body.simple-mode #search-area.peek {
    top: 24px
  }
}

/* ---------- 空场 Home ---------- */
#empty-home {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 158px;
  bottom: 58px;
  width: min(1240px, calc(100vw - 72px));
  transform: translateX(-50%) translateY(18px) scale(.992);
  opacity: 0;
  pointer-events: none;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1)
}

body.empty-home-active #empty-home {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1)
}

body.splash-active #empty-home,
body.immersive-mode #empty-home {
  opacity: 0 !important;
  pointer-events: none !important
}

body.empty-home-active #canvas-container {
  filter: none
}

body.home-wallpaper-preview #canvas-container {
  filter: none
}

.empty-home-shell {
  height: 100%;
  min-height: 440px;
  display: grid;
  grid-template-columns: minmax(370px, .94fr) minmax(520px, 1.06fr);
  grid-template-rows: auto 1fr;
  gap: 14px;
  align-content: stretch
}

.home-hero {
  position: relative;
  grid-row: 1 / span 2;
  min-height: 438px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--home-accent) 22%, rgba(255, 255, 255, .085));
  background: linear-gradient(145deg, rgba(33, 29, 34, .64), rgba(9, 10, 14, .76) 48%, rgba(17, 20, 25, .70));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34), 0 0 0 1px color-mix(in srgb, var(--home-accent) 7%, transparent), inset 0 1px 0 rgba(255, 255, 255, .065);
  backdrop-filter: blur(30px) saturate(1.16);
  -webkit-backdrop-filter: blur(30px) saturate(1.16);
  overflow: hidden
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .060), transparent 24%, rgba(255, 83, 103, .070) 54%, rgba(122, 215, 194, .055) 82%, transparent 100%), linear-gradient(90deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 48px), linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 44px);
  opacity: .72;
  pointer-events: none
}

.home-hero::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--home-accent) 0%, transparent), color-mix(in srgb, var(--home-accent) 52%, transparent), rgba(36, 66, 255, .24), rgba(248, 244, 238, .18), color-mix(in srgb, var(--home-accent) 0%, transparent));
  opacity: .82;
  pointer-events: none
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(150px, .64fr);
  grid-template-rows: auto auto auto auto minmax(150px, 1fr);
  column-gap: 18px
}

.home-hero-inner.home-construction-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 2px;
  min-height: 100%
}

.home-kicker {
  grid-column: 1;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .18em;
  color: color-mix(in srgb, var(--home-accent) 62%, rgba(255, 255, 255, .36));
  text-transform: uppercase;
  margin-bottom: 14px
}

.home-title {
  grid-column: 1;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: .98;
  font-weight: 760;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .98);
  max-width: 380px;
  text-shadow: 0 10px 36px rgba(0, 0, 0, .26)
}

.home-title.home-construction-title {
  max-width: 620px;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.08
}

.home-sub {
  grid-column: 1;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .62);
  max-width: 348px
}

.home-weather-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px
}

.home-weather-pill {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .050);
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .70);
  font-size: 11px;
  font-weight: 680
}

.home-quick-row {
  grid-column: 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px
}

.home-chip {
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .060);
  color: rgba(255, 255, 255, .76);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 680;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s
}

.home-chip:hover {
  background: color-mix(in srgb, var(--home-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--home-accent) 38%, rgba(255, 255, 255, .10));
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--home-accent) 8%, transparent);
  transform: translateY(-1px)
}

.home-console-chip {
  height: 36px;
  border-color: color-mix(in srgb, var(--home-accent) 34%, rgba(255, 255, 255, .12));
  background: color-mix(in srgb, var(--home-accent) 12%, rgba(255, 255, 255, .055));
  color: #fff
}

.home-visual {
  grid-column: 2;
  grid-row: 2 / span 2;
  position: relative;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 300px;
  height: 74px;
  margin-top: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28))
}

.home-visual.generated .home-sleeve,
.home-visual.generated .home-disc {
  display: none
}

.home-radio-img {
  display: none
}

.home-sleeve {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 67%;
  height: 56%;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0, 245, 212, .70), rgba(36, 66, 255, .44) 48%, rgba(248, 244, 238, .30));
  box-shadow: 0 20px 52px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .20);
  transform: rotate(-8deg);
  overflow: hidden
}

.home-sleeve::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .18)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 18px);
  opacity: .72
}

.home-sleeve::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 12px;
  border-radius: 999px;
  background: rgba(10, 10, 14, .44);
  box-shadow: 0 -24px 0 rgba(10, 10, 14, .16)
}

.home-disc {
  position: absolute;
  right: 4px;
  top: 0;
  width: min(210px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .10) 0 1px, transparent 1px 10px), conic-gradient(from 210deg, #00f5d4, #2442ff, #f8f4ee, #7ad7c2, #00f5d4);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 16px rgba(8, 8, 12, .56);
  animation: home-disc-turn 18s linear infinite
}

.home-disc::before {
  content: '';
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(12, 12, 16, .96), rgba(34, 32, 38, .90));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 0 0 12px rgba(255, 255, 255, .055)
}

.home-disc::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left-color: rgba(255, 255, 255, .03);
  border-bottom-color: rgba(255, 255, 255, .04)
}

.home-eq {
  display: none
}

.home-eq span {
  display: block;
  flex: 1;
  min-width: 5px;
  height: var(--h, 28px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), var(--bar, #ff5367));
  box-shadow: 0 0 18px color-mix(in srgb, var(--bar, #ff5367) 52%, transparent);
  animation: home-eq-rise 1.8s ease-in-out infinite;
  animation-delay: var(--d, 0s)
}

.home-radio-badge {
  display: none
}

.home-wave-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: .94;
  mix-blend-mode: screen;
  transform: translateY(-50%)
}

.home-wave-track span {
  flex: 1;
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--home-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--home-accent) 55%, transparent);
  height: 5px;
  transform-origin: bottom;
  transition: height .08s linear, opacity .08s linear
}

@keyframes home-disc-turn {
  to {
    transform: rotate(360deg)
  }
}

@keyframes home-eq-rise {

  0%,
  100% {
    transform: scaleY(.68);
    opacity: .66
  }

  45% {
    transform: scaleY(1);
    opacity: 1
  }
}

.home-mosaic {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: min(216px, 26vh);
  min-height: 150px;
  margin-top: 18px
}

.home-mosaic-cell {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--home-accent) 12%, rgba(255, 255, 255, .075));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26)
}

.home-mosaic-cell:first-child {
  grid-row: 1 / span 2
}

.home-mosaic-cell:not(.has-cover)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 245, 212, .62), rgba(36, 66, 255, .36) 46%, rgba(10, 10, 14, .20)), repeating-linear-gradient(110deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 18px)
}

.home-mosaic-cell:nth-child(2):not(.has-cover)::before {
  background: linear-gradient(135deg, rgba(122, 215, 194, .74), rgba(157, 184, 207, .46) 48%, rgba(10, 10, 14, .24)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 16px)
}

.home-mosaic-cell:nth-child(3):not(.has-cover)::before {
  background: linear-gradient(135deg, rgba(248, 244, 238, .38), rgba(0, 245, 212, .40) 58%, rgba(10, 10, 14, .24)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 2px, transparent 2px 15px)
}

.home-mosaic-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 42%, rgba(0, 0, 0, .42));
  pointer-events: none
}

.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px
}

.home-section-title {
  font-size: 13px;
  font-weight: 760;
  color: rgba(255, 255, 255, .84);
  letter-spacing: .04em
}

.home-section-note {
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  white-space: nowrap
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}


.home-card {
  --tone-a: #00f5d4;
  --tone-b: #2442ff;
  --tone-c: #f8f4ee;
  position: relative;
  min-height: 152px;
  border: 1px solid color-mix(in srgb, var(--home-accent) 10%, rgba(255, 255, 255, .085));
  border-radius: 22px;
  background: linear-gradient(142deg, rgba(18, 21, 26, .66), rgba(8, 9, 13, .76));
  box-shadow: 0 20px 64px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .060);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  padding: 17px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s, background .22s, box-shadow .22s
}

.home-card[data-home-tone="mix"] {
  --tone-a: #9db8cf;
  --tone-b: #00f5d4;
  --tone-c: #2442ff
}

.home-card[data-home-tone="local"] {
  --tone-a: #f8f4ee;
  --tone-b: #00f5d4;
  --tone-c: #2442ff
}

.home-card[data-home-tone="library"] {
  --tone-a: #00f5d4;
  --tone-b: #f8f4ee;
  --tone-c: #2442ff
}

.home-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, color-mix(in srgb, var(--tone-a) 22%, transparent), transparent 38%, color-mix(in srgb, var(--tone-b) 16%, transparent) 74%, transparent), linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 38px);
  opacity: .86;
  pointer-events: none
}

.home-card::after {
  content: '';
  position: absolute;
  right: 114px;
  bottom: 18px;
  width: 38px;
  height: 70px;
  border-radius: 999px;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--tone-c) 64%, rgba(255, 255, 255, .26)) 0 4px, transparent 4px 10px);
  opacity: .20;
  transform: skewX(-10deg);
  pointer-events: none
}

.home-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone-a) 42%, rgba(255, 255, 255, .18));
  background: linear-gradient(142deg, rgba(36, 33, 39, .72), rgba(10, 10, 14, .84));
  box-shadow: 0 28px 84px rgba(0, 0, 0, .36), 0 0 34px color-mix(in srgb, var(--tone-a) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .085)
}

body.empty-home-active .home-card {
  animation: home-card-float 7.4s ease-in-out infinite
}

body.empty-home-active .home-card:hover {
  animation: none
}

body.empty-home-active .home-card:nth-of-type(2) {
  animation-delay: -1.4s
}

body.empty-home-active .home-card:nth-of-type(3) {
  animation-delay: -2.6s
}

body.empty-home-active .home-card:nth-of-type(4) {
  animation-delay: -3.8s
}

body.empty-home-active .home-visual {
  animation: home-visual-drift 8.8s ease-in-out infinite
}

@keyframes home-card-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes home-visual-drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg)
  }

  50% {
    transform: translate3d(0, -5px, 0) rotate(.6deg)
  }
}

.home-card>*,
.home-chip>*,
.home-tile>* {
  pointer-events: none
}

.home-card-label,
.home-card-title,
.home-card-sub {
  position: relative;
  z-index: 2
}

.home-card-label {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone-a) 70%, #fff);
  margin-bottom: 8px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--tone-a) 22%, transparent)
}

.home-card-title {
  font-size: 19px;
  font-weight: 780;
  line-height: 1.16;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .96);
  max-width: 70%
}

.home-card-sub {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
  max-width: 70%
}

.home-card-art {
  position: absolute;
  z-index: 1;
  right: 13px;
  bottom: 13px;
  width: 108px;
  height: 108px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-a) 78%, #14141a), color-mix(in srgb, var(--tone-b) 68%, #09090d));
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: rotate(3deg);
  overflow: hidden
}

.home-card-art:not(.has-cover)::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1px 8px), conic-gradient(from 180deg, var(--tone-a), var(--tone-b), var(--tone-c), var(--tone-a));
  box-shadow: inset 0 0 0 14px rgba(5, 5, 8, .44), 0 12px 28px rgba(0, 0, 0, .26)
}

.home-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 42%, rgba(0, 0, 0, .28));
  pointer-events: none
}

.home-rail {
  align-self: stretch;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px
}

.home-tile-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 0
}

.home-tile {
  --tone-a: #00f5d4;
  --tone-b: #2442ff;
  --tone-c: #f8f4ee;
  position: relative;
  min-width: 0;
  min-height: 166px;
  border: 1px solid color-mix(in srgb, var(--home-accent) 9%, rgba(255, 255, 255, .075));
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .025));
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .052);
  backdrop-filter: blur(20px) saturate(1.10);
  -webkit-backdrop-filter: blur(20px) saturate(1.10);
  padding: 10px;
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
  overflow: hidden
}

.home-tile[data-home-tone="search"],
.home-tile[data-home-tone="playlist"] {
  --tone-a: #9db8cf;
  --tone-b: #00f5d4;
  --tone-c: #2442ff
}

.home-tile[data-home-tone="local"],
.home-tile[data-home-tone="podcast"] {
  --tone-a: #f8f4ee;
  --tone-b: #00f5d4;
  --tone-c: #2442ff
}

.home-tile[data-home-tone="guide"],
.home-tile[data-home-tone="library"] {
  --tone-a: #00f5d4;
  --tone-b: #f8f4ee;
  --tone-c: #2442ff
}

.home-tile::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 92px;
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-a) 12%, transparent), transparent 48%, color-mix(in srgb, var(--tone-b) 10%, transparent));
  opacity: .9;
  pointer-events: none
}

.home-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone-a) 36%, rgba(255, 255, 255, .18));
  background: rgba(255, 255, 255, .068);
  box-shadow: 0 22px 62px rgba(0, 0, 0, .28), 0 0 26px color-mix(in srgb, var(--tone-a) 12%, transparent)
}

.home-tile-cover {
  position: relative;
  width: 100%;
  height: 92px;
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone-a) 74%, #16161b), color-mix(in srgb, var(--tone-b) 58%, #08090d));
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
  margin-bottom: 10px;
  overflow: hidden
}

.home-tile-cover:not(.has-cover)::before {
  content: '';
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .14) 0 1px, transparent 1px 7px), conic-gradient(from 180deg, var(--tone-a), var(--tone-b), var(--tone-c), var(--tone-a));
  box-shadow: inset 0 0 0 10px rgba(5, 5, 8, .42)
}

.home-tile-cover:not(.has-cover)::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 14px;
  width: 46px;
  height: 48px;
  border-radius: 999px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .72) 0 3px, transparent 3px 9px);
  opacity: .32
}

.home-tile-title {
  font-size: 12px;
  font-weight: 720;
  color: rgba(255, 255, 255, .90);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.home-tile-sub {
  display: none;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.home-skeleton {
  position: relative;
  overflow: hidden
}

.home-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: translateX(-100%);
  animation: home-shimmer 1.5s ease-in-out infinite
}

@keyframes home-shimmer {
  100% {
    transform: translateX(100%)
  }
}

@media (max-width:1120px) {
  #empty-home {
    width: calc(100vw - 48px)
  }

  .empty-home-shell {
    grid-template-columns: minmax(300px, .88fr) minmax(440px, 1.12fr);
    gap: 12px
  }

  .home-hero {
    padding: 24px
  }

  .home-hero-inner {
    grid-template-columns: minmax(0, 1.16fr) minmax(128px, .52fr);
    column-gap: 14px
  }

  .home-title {
    font-size: clamp(30px, 4vw, 48px);
    max-width: 340px
  }

  .home-sub {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 314px
  }

  .home-visual {
    height: 198px;
    max-width: 236px
  }

  .home-mosaic {
    height: 142px;
    min-height: 126px;
    margin-top: 14px
  }

  .home-grid {
    gap: 10px
  }

  .home-card {
    min-height: 126px;
    padding: 14px;
    border-radius: 20px
  }

  .home-card-label {
    margin-bottom: 6px
  }

  .home-card-title {
    font-size: 16.5px;
    max-width: 66%
  }

  .home-card-sub {
    margin-top: 6px;
    font-size: 10.8px;
    line-height: 1.34;
    max-width: 64%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .home-card-art {
    right: 11px;
    bottom: 11px;
    width: 80px;
    height: 80px;
    border-radius: 18px
  }

  .home-card-art:not(.has-cover)::before {
    inset: 14px;
    box-shadow: inset 0 0 0 11px rgba(5, 5, 8, .44), 0 10px 24px rgba(0, 0, 0, .24)
  }

  .home-card::after {
    right: 88px;
    bottom: 14px;
    width: 30px;
    height: 56px
  }

  .home-rail {
    gap: 8px
  }

  .home-tile {
    min-height: 128px
  }

  .home-tile-cover {
    height: 66px
  }
}

@media (max-height:760px) {
  #empty-home {
    top: 132px;
    bottom: 44px
  }

  .empty-home-shell {
    min-height: 0
  }

  .home-hero {
    min-height: 0;
    padding: 22px
  }

  .home-hero-inner {
    grid-template-columns: minmax(0, 1.22fr) minmax(136px, .54fr);
    column-gap: 14px
  }

  .home-title {
    font-size: clamp(31px, 3.75vw, 48px);
    max-width: 360px
  }

  .home-sub {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 330px
  }

  .home-quick-row {
    margin-top: 16px
  }

  .home-visual {
    height: 206px;
    max-width: 246px
  }

  .home-mosaic {
    height: 132px;
    min-height: 120px;
    margin-top: 14px
  }

  .home-card {
    min-height: 134px;
    padding: 14px
  }

  .home-card-title {
    font-size: 17px
  }

  .home-card-art {
    width: 92px;
    height: 92px;
    border-radius: 21px
  }

  .home-tile {
    min-height: 132px
  }

  .home-tile-cover {
    height: 72px
  }
}

@media (max-height:700px) {
  #empty-home {
    top: 126px;
    bottom: 34px
  }

  .home-hero {
    padding: 20px
  }

  .home-title {
    font-size: clamp(28px, 3.55vw, 42px)
  }

  .home-sub {
    font-size: 12px;
    line-height: 1.42
  }

  .home-weather-meta {
    margin-top: 12px
  }

  .home-quick-row {
    margin-top: 12px
  }

  .home-visual {
    height: 174px;
    max-width: 216px
  }

  .home-mosaic {
    height: 112px;
    min-height: 104px
  }

  .home-card {
    min-height: 112px;
    padding: 12px
  }

  .home-card-title {
    font-size: 15.5px
  }

  .home-card-sub {
    font-size: 10.5px;
    line-height: 1.28;
    -webkit-line-clamp: 2
  }

  .home-card-art {
    width: 70px;
    height: 70px;
    border-radius: 16px
  }

  .home-card::after {
    right: 78px;
    height: 48px
  }

  .home-tile {
    min-height: 112px;
    padding: 9px
  }

  .home-tile-cover {
    height: 54px;
    margin-bottom: 8px
  }

  .home-section-head {
    min-height: 30px
  }
}

@media (max-width:840px) {
  .empty-home-shell {
    grid-template-columns: minmax(250px, .86fr) minmax(360px, 1.14fr)
  }

  .home-hero-inner {
    grid-template-columns: minmax(0, 1fr)
  }

  .home-visual {
    display: none
  }

  .home-mosaic {
    height: 124px;
    min-height: 108px
  }

  .home-card {
    min-height: 108px
  }

  .home-card-title {
    font-size: 15px;
    max-width: 68%
  }

  .home-card-sub {
    font-size: 10.3px;
    max-width: 62%
  }

  .home-card-art {
    width: 66px;
    height: 66px;
    border-radius: 15px
  }

  .home-card::after {
    right: 72px;
    width: 24px;
    height: 44px
  }

  .home-tile-title {
    font-size: 11.5px
  }
}

@media (max-width:760px) {
  #empty-home {
    top: 150px;
    bottom: 56px;
    width: calc(100vw - 40px)
  }

  .empty-home-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    overflow: auto;
    padding-bottom: 4px
  }

  .home-hero {
    grid-row: auto;
    min-height: 344px
  }

  .home-mosaic {
    height: 172px;
    min-height: 150px
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-tile-row {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

body.empty-home-active.controls-visible #empty-home {
  bottom: 128px
}

@media (max-height:760px) {
  body.empty-home-active.controls-visible #empty-home {
    bottom: 112px
  }
}

@media (max-width:620px) {
  #empty-home {
    top: 146px;
    bottom: 44px;
    width: calc(100vw - 24px)
  }

  .home-hero {
    padding: 20px;
    border-radius: 22px
  }

  .home-hero-inner {
    display: flex;
    flex-direction: column
  }

  .home-visual {
    display: none
  }

  .home-mosaic {
    display: none
  }

  .home-grid {
    grid-template-columns: 1fr
  }

  .home-tile-row {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-tile-cover {
    height: auto;
    aspect-ratio: 1
  }

  .home-tile-sub {
    display: block
  }

  .home-card-art {
    width: 88px;
    height: 88px
  }

  .home-card-title,
  .home-card-sub {
    max-width: 68%
  }
}

.home-visual.generated {
  height: 74px !important;
  max-width: 300px !important;
  align-self: center !important
}

@media (max-height:760px) {
  .home-visual.generated {
    height: 64px !important;
    max-width: 260px !important
  }
}

/* ---------- 顶部右侧按钮 ---------- */
#top-right {
  position: fixed;
  z-index: 10;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px
}

.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  font-family: inherit;
  padding: 0
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: scale(1.04)
}

.icon-btn.active {
  color: var(--champagne);
  border-color: rgba(244, 210, 138, 0.44);
  background: rgba(244, 210, 138, 0.10)
}

#upload-btn {
  border-color: rgba(0, 245, 212, .24);
  background: rgba(255, 255, 255, .045);
  color: rgba(232, 236, 239, .78);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08)
}

#upload-btn:hover {
  border-color: rgba(0, 245, 212, .50);
  background: rgba(0, 245, 212, .075);
  color: #fff;
  box-shadow: 0 16px 46px rgba(0, 245, 212, .08), inset 0 1px 0 rgba(255, 255, 255, .10)
}

#visual-guide-btn {
  font-size: 18px;
  font-weight: 780;
  line-height: 1;
  color: rgba(255, 255, 255, .68);
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04)
}

#visual-guide-btn:hover {
  color: #fff;
  border-color: rgba(255, 83, 103, .40);
  background: rgba(255, 83, 103, .10);
  box-shadow: 0 14px 38px rgba(255, 83, 103, .08)
}

#upload-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px
}

body.desktop-shell:not(.desktop-fullscreen) #upload-actions {
  margin-top: 0
}

html:fullscreen body.desktop-shell #upload-actions,
body.desktop-shell.desktop-fullscreen #upload-actions {
  margin-top: 0
}

.upload-panel {
  position: absolute;
  right: 0;
  top: 56px;
  width: 232px;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(150deg, rgba(20, 22, 27, .92), rgba(8, 9, 13, .88));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(26px) saturate(1.12);
  -webkit-backdrop-filter: blur(26px) saturate(1.12);
  display: grid;
  gap: 7px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s, visibility .18s, transform .18s;
  z-index: 8
}

.upload-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1)
}

.upload-panel::before {
  content: "";
  position: absolute;
  right: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(20, 22, 27, .94);
  border-left: 1px solid rgba(255, 255, 255, .10);
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.upload-choice {
  position: relative;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .040);
  color: rgba(255, 255, 255, .82);
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s, color .18s
}

.upload-choice:hover {
  background: rgba(var(--fc-accent-rgb), .10);
  border-color: rgba(var(--fc-accent-rgb), .34);
  color: #fff;
  transform: translateY(-1px)
}

.upload-choice svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor
}

.upload-choice strong {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 760;
  letter-spacing: .02em
}

.upload-choice small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

#clear-cover-btn {
  display: none;
  width: 28px;
  height: 28px;
  margin-top: 0;
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .34);
  font-size: 18px;
  line-height: 1;
  transform: scale(.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .20)
}

#clear-cover-btn.has-cover {
  display: flex;
  border-color: rgba(244, 210, 138, .30);
  background: rgba(244, 210, 138, .08);
  color: rgba(244, 210, 138, .84)
}

#clear-cover-btn:hover {
  color: #fff0bf;
  border-color: rgba(244, 210, 138, .55);
  background: rgba(244, 210, 138, .14);
  transform: scale(1.02)
}

#upload-tip {
  position: absolute;
  z-index: 3;
  left: 46px;
  top: 56px;
  width: 214px;
  padding: 13px 34px 13px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 23, 26, .96), rgba(10, 10, 14, .93));
  border: 1px solid rgba(244, 210, 138, .24);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .44), 0 0 0 1px rgba(255, 255, 255, .035), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .25px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  will-change: opacity, transform, filter
}

#upload-tip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1)
}

#upload-tip::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(24, 23, 26, .96);
  border-left: 1px solid rgba(244, 210, 138, .22);
  border-top: 1px solid rgba(244, 210, 138, .22)
}

.upload-tip-title {
  display: block;
  color: #fff0bf;
  font-weight: 700;
  margin-bottom: 2px
}

.upload-tip-close {
  position: absolute;
  right: 9px;
  top: 8px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .38);
  cursor: pointer;
  font-size: 15px;
  line-height: 18px;
  padding: 0;
  font-family: inherit
}

.upload-tip-close:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff
}

#user-btn {
  padding: 0 16px;
  width: auto;
  min-width: 58px;
  height: 44px;
  border-radius: 24px;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .4px
}

.user-capsule-hide-btn {
  width: 18px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .34);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transform: translateX(6px) scale(.92);
  transition: opacity .18s, transform .18s, background .18s, color .18s, border-color .18s;
  cursor: pointer
}

#top-right:hover .user-capsule-hide-btn,
.user-capsule-hide-btn.on {
  opacity: 1;
  transform: translateX(0) scale(1)
}

.user-capsule-hide-btn:hover,
.user-capsule-hide-btn.on {
  border-color: rgba(var(--fc-accent-rgb), .34);
  background: rgba(var(--fc-accent-rgb), .10);
  color: #fff
}

body.user-capsule-auto-hide #top-right {
  right: -96px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: right .28s cubic-bezier(.16, 1, .3, 1), opacity .18s, visibility 0s linear .18s, transform .24s
}

body.user-capsule-auto-hide #top-right:hover,
body.user-capsule-auto-hide.user-capsule-peek #top-right {
  right: 18px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: right .28s cubic-bezier(.16, 1, .3, 1), opacity .16s, transform .24s
}

body.user-capsule-auto-hide #top-right::before {
  content: '';
  position: absolute;
  right: 100%;
  top: -18px;
  width: 82px;
  height: 80px
}

#home-btn {
  width: 44px;
  min-width: 44px;
  border-color: rgba(0, 245, 212, .18);
  background: rgba(255, 255, 255, .04);
  color: rgba(232, 236, 239, .78)
}

#home-btn:hover {
  border-color: rgba(0, 245, 212, .44);
  background: rgba(0, 245, 212, .075);
  color: #fff;
  box-shadow: 0 14px 38px rgba(0, 245, 212, .08)
}

body.empty-home-active #home-btn {
  border-color: rgba(255, 83, 103, .36);
  background: rgba(255, 83, 103, .11);
  color: #fff
}

body.desktop-shell #empty-home {
  top: 132px;
  bottom: 46px;
  width: calc(100vw - 44px)
}

body.desktop-shell .empty-home-shell {
  min-height: 0
}

body.desktop-shell .home-hero {
  min-height: 390px
}

body.desktop-shell .home-card {
  min-height: 148px
}

body.desktop-shell .home-tile {
  min-height: 154px
}

body.desktop-shell .home-tile-cover {
  height: 84px
}

body.desktop-shell.desktop-fullscreen #empty-home,
html:fullscreen body.desktop-shell #empty-home {
  top: 96px;
  bottom: 52px;
  width: min(1480px, calc(100vw - 96px))
}

body.desktop-shell.desktop-fullscreen .empty-home-shell,
html:fullscreen body.desktop-shell .empty-home-shell {
  max-width: 1480px;
  margin: 0 auto;
  grid-template-columns: minmax(380px, .92fr) minmax(560px, 1.08fr)
}

body.desktop-shell.desktop-fullscreen .home-mosaic,
html:fullscreen body.desktop-shell .home-mosaic {
  height: clamp(146px, 16vh, 208px)
}

body.desktop-shell.desktop-fullscreen .home-mosaic-cell.has-cover,
html:fullscreen body.desktop-shell .home-mosaic-cell.has-cover {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(8, 10, 14, .54)
}

@media (max-height:760px) {
  body.desktop-shell #empty-home {
    top: 118px;
    bottom: 34px
  }

  body.desktop-shell .home-hero {
    min-height: 330px;
    padding: 22px
  }

  body.desktop-shell .home-visual {
    height: 196px;
    max-width: 260px
  }

  body.desktop-shell .home-card {
    min-height: 128px;
    padding: 14px
  }

  body.desktop-shell .home-tile {
    min-height: 130px
  }

  body.desktop-shell .home-tile-cover {
    height: 70px
  }

  body.desktop-shell .home-mosaic {
    height: 150px;
    min-height: 126px
  }
}

@media (max-width:1120px) {
  body.desktop-shell #empty-home {
    width: calc(100vw - 44px)
  }

  body.desktop-shell .empty-home-shell {
    grid-template-columns: minmax(300px, .88fr) minmax(430px, 1.12fr);
    gap: 12px
  }

  body.desktop-shell .home-hero {
    padding: 22px
  }

  body.desktop-shell .home-hero-inner {
    grid-template-columns: minmax(0, 1.16fr) minmax(126px, .52fr);
    column-gap: 14px
  }

  body.desktop-shell .home-title {
    font-size: clamp(30px, 4vw, 48px);
    max-width: 340px
  }

  body.desktop-shell .home-sub {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 314px
  }

  body.desktop-shell .home-visual {
    height: 190px;
    max-width: 226px
  }

  body.desktop-shell .home-mosaic {
    height: 132px;
    min-height: 116px;
    margin-top: 14px
  }

  body.desktop-shell .home-grid {
    gap: 10px
  }

  body.desktop-shell .home-card {
    min-height: 122px;
    padding: 14px
  }

  body.desktop-shell .home-card-label {
    margin-bottom: 6px
  }

  body.desktop-shell .home-card-title {
    font-size: 16px;
    max-width: 66%
  }

  body.desktop-shell .home-card-sub {
    margin-top: 6px;
    font-size: 10.6px;
    line-height: 1.32;
    max-width: 64%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  body.desktop-shell .home-card-art {
    right: 11px;
    bottom: 11px;
    width: 78px;
    height: 78px;
    border-radius: 18px
  }

  body.desktop-shell .home-card::after {
    right: 86px;
    bottom: 14px;
    width: 30px;
    height: 54px
  }

  body.desktop-shell .home-rail {
    gap: 8px
  }

  body.desktop-shell .home-tile {
    min-height: 120px
  }

  body.desktop-shell .home-tile-cover {
    height: 62px
  }
}

@media (max-height:700px) {
  body.desktop-shell #empty-home {
    top: 106px;
    bottom: 30px
  }

  body.desktop-shell .home-hero {
    min-height: 0;
    padding: 18px
  }

  body.desktop-shell .home-title {
    font-size: clamp(27px, 3.5vw, 40px)
  }

  body.desktop-shell .home-sub {
    font-size: 11.8px;
    line-height: 1.4
  }

  body.desktop-shell .home-weather-meta {
    margin-top: 11px
  }

  body.desktop-shell .home-quick-row {
    margin-top: 12px
  }

  body.desktop-shell .home-visual {
    height: 166px;
    max-width: 206px
  }

  body.desktop-shell .home-mosaic {
    height: 104px;
    min-height: 98px
  }

  body.desktop-shell .home-card {
    min-height: 104px;
    padding: 12px
  }

  body.desktop-shell .home-card-title {
    font-size: 15px
  }

  body.desktop-shell .home-card-sub {
    font-size: 10.2px;
    line-height: 1.28
  }

  body.desktop-shell .home-card-art {
    width: 66px;
    height: 66px;
    border-radius: 15px
  }

  body.desktop-shell .home-card::after {
    right: 72px;
    width: 24px;
    height: 44px
  }

  body.desktop-shell .home-tile {
    min-height: 104px;
    padding: 9px
  }

  body.desktop-shell .home-tile-cover {
    height: 50px;
    margin-bottom: 8px
  }

  body.desktop-shell .home-section-head {
    min-height: 28px
  }
}

@media (max-width:840px) {
  body.desktop-shell .empty-home-shell {
    grid-template-columns: minmax(250px, .86fr) minmax(360px, 1.14fr)
  }

  body.desktop-shell .home-hero-inner {
    grid-template-columns: minmax(0, 1fr)
  }

  body.desktop-shell .home-visual {
    display: none
  }

  body.desktop-shell .home-mosaic {
    height: 112px;
    min-height: 100px
  }

  body.desktop-shell .home-card {
    min-height: 102px
  }

  body.desktop-shell .home-card-title {
    font-size: 14.8px;
    max-width: 68%
  }

  body.desktop-shell .home-card-sub {
    font-size: 10px;
    max-width: 62%
  }

  body.desktop-shell .home-card-art {
    width: 62px;
    height: 62px;
    border-radius: 14px
  }
}

@media (max-width:760px) {
  body.desktop-shell #empty-home {
    top: 128px;
    bottom: 48px;
    width: calc(100vw - 36px)
  }

  body.desktop-shell .empty-home-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    overflow: auto;
    padding-bottom: 4px
  }

  body.desktop-shell .home-hero {
    grid-row: auto;
    min-height: 330px
  }

  body.desktop-shell .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  body.desktop-shell .home-tile-row {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

body.desktop-shell.empty-home-active.controls-visible #empty-home {
  bottom: 126px
}

@media (max-height:760px) {
  body.desktop-shell.empty-home-active.controls-visible #empty-home {
    bottom: 106px
  }
}

#user-btn.logged-out {
  justify-content: center;
  padding: 0 17px;
  min-width: 60px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
  border-color: rgba(244, 210, 138, .28);
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08)
}

#user-btn.logged-out:hover {
  color: #fff2bd;
  border-color: rgba(244, 210, 138, .56);
  background: rgba(244, 210, 138, .11);
  box-shadow: 0 16px 42px rgba(244, 210, 138, .10), inset 0 1px 0 rgba(255, 255, 255, .10)
}

#user-btn.login-eye-avatar {
  width: 48px;
  min-width: 48px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .025)
}

.login-easter-eyes {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 78px;
  gap: 13px;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .16))
}

.login-easter-eyes.compact {
  width: 31px;
  height: 24px;
  gap: 4px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .2))
}

.login-easter-eye {
  display: block;
  flex: 0 0 auto;
  background: radial-gradient(ellipse at 46% 44%, #fff 0 54%, rgba(255, 255, 255, .92) 68%, rgba(255, 255, 255, .34) 86%, transparent 100%);
  transform-origin: 50% 50%
}

.login-easter-eye-big {
  width: 44px;
  height: 62px;
  border-radius: 48% 52% 46% 54% / 45% 48% 52% 55%;
  transform: rotate(-7deg)
}

.login-easter-eye-small {
  width: 31px;
  height: 45px;
  border-radius: 53% 47% 54% 46% / 49% 44% 56% 51%;
  transform: translateY(3px) rotate(8deg)
}

.login-easter-eyes.compact .login-easter-eye-big {
  width: 11px;
  height: 17px
}

.login-easter-eyes.compact .login-easter-eye-small {
  width: 8px;
  height: 12px;
  transform: translateY(1px) rotate(8deg)
}

#user-btn .login-word {
  display: block;
  line-height: 1;
  transform: translateY(.5px)
}

#user-btn.logged-in {
  padding: 0 16px 0 4px;
  min-width: 0;
  color: #fff;
  border-color: rgba(244, 210, 138, 0.52);
  background: rgba(244, 210, 138, 0.07);
  box-shadow: 0 0 0 1px rgba(244, 210, 138, .08), 0 14px 42px rgba(0, 0, 0, .28)
}

#user-btn.login-eye-avatar,
#user-btn.login-eye-avatar.logged-in,
#user-btn.login-eye-avatar.logged-out {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .028);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .08)
}

#user-btn.login-eye-avatar:hover,
#user-btn.login-eye-avatar.logged-in:hover,
#user-btn.login-eye-avatar.logged-out:hover {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .3), 0 0 22px rgba(255, 255, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .11)
}

#user-btn.multi-account {
  height: auto;
  min-width: 0;
  padding: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}

#user-btn.multi-account.external-account-pills {
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  max-width: 206px;
  max-height: calc(100vh - 92px);
  overflow: visible
}

#top-right.account-pill-stack {
  align-items: flex-start
}

#user-btn.multi-account.external-account-pills .top-account-pill {
  width: 190px;
  min-width: 190px;
  justify-content: flex-start
}

#user-btn.multi-account.external-account-pills .top-account-name {
  flex: 1 1 auto;
  max-width: 118px
}

#user-btn.multi-account:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
  color: #fff
}

#user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1)
}

#user-vip-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 0;
  background: linear-gradient(135deg, #fff3c2, var(--champagne), #c9963d);
  color: #201303;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(244, 210, 138, .24)
}

#user-vip-tag.qq {
  background: linear-gradient(135deg, #e7fff9, #00f5d4, #61a8ff);
  color: #03100f;
  box-shadow: 0 0 12px rgba(0, 245, 212, .22)
}

#user-vip-tag.normal,
#user-vip-tag.none {
  border: 1px solid rgba(255, 255, 255, .44);
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 10px rgba(255, 255, 255, .045)
}

.account-source-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--source-local);
  box-shadow: 0 0 12px currentColor;
  flex-shrink: 0
}

.account-source-dot.netease {
  background: var(--source-netease);
  color: var(--source-netease)
}

.account-source-dot.qq {
  background: var(--source-qq);
  color: var(--source-qq)
}

.account-source-dot.kugou {
  background: #56e0ff;
  color: #56e0ff
}

.account-source-dot.qishui {
  background: var(--source-qishui);
  color: var(--source-qishui)
}

.account-source-dot.spotify {
  background: var(--source-spotify);
  color: var(--source-spotify)
}

.top-account-pill {
  position: relative;
  height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 4px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: grab;
  transition: transform .22s, filter .22s
}

#user-btn.pill-sorting .top-account-pill {
  cursor: grabbing
}

.top-account-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(244, 210, 138, .52);
  background: rgba(244, 210, 138, .07);
  box-shadow: 0 0 0 1px rgba(244, 210, 138, .08), 0 14px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .22s, border-color .22s, box-shadow .22s
}

#user-btn.multi-account:hover .top-account-pill::before {
  background: rgba(244, 210, 138, .10);
  border-color: rgba(244, 210, 138, .62);
  box-shadow: 0 0 0 1px rgba(244, 210, 138, .10), 0 16px 44px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .10)
}

.top-account-pill > * {
  position: relative;
  z-index: 1
}

.top-account-pill img {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
  flex-shrink: 0
}

.top-account-pill.offline img {
  opacity: .70;
  filter: grayscale(.18)
}

.top-account-name {
  position: relative;
  z-index: 1;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, .92)
}

.top-account-vip {
  position: relative;
  z-index: 1;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 0;
  background: linear-gradient(135deg, #fff3c2, var(--champagne), #c9963d);
  color: #201303;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(244, 210, 138, .24);
  flex-shrink: 0
}

.top-account-vip.svip {
  background: linear-gradient(135deg, #fff8d8, #f4d28a 46%, #e0a13b 100%);
  color: #1e1203;
  box-shadow: 0 0 14px rgba(244, 210, 138, .30)
}

.top-account-vip.qq {
  background: linear-gradient(135deg, #e7fff9, #00f5d4, #61a8ff);
  color: #03100f;
  box-shadow: 0 0 12px rgba(0, 245, 212, .22)
}

.top-account-vip.normal,
.top-account-vip.none {
  border: 1px solid rgba(255, 255, 255, .44);
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 10px rgba(255, 255, 255, .045)
}

.top-account-vip.pending {
  border: 1px solid rgba(255, 210, 112, .56);
  background: rgba(255, 210, 112, .13);
  color: rgba(255, 232, 174, .92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 12px rgba(255, 210, 112, .12)
}

.update-entry {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 210, 138, .26);
  background: radial-gradient(circle at 50% 36%, rgba(244, 210, 138, .14), rgba(255, 255, 255, .030) 58%, rgba(157, 184, 207, .020));
  color: rgba(255, 239, 190, .94);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .30), 0 0 22px rgba(244, 210, 138, .08), 0 0 0 1px rgba(255, 255, 255, .026), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: border-color .22s, background .22s, color .22s, box-shadow .22s, transform .22s;
  overflow: visible
}

.update-entry.available {
  display: flex
}

.update-entry:hover {
  color: #fff8df;
  border-color: rgba(244, 210, 138, .58);
  background: radial-gradient(circle at 50% 34%, rgba(244, 210, 138, .22), rgba(255, 255, 255, .045) 58%, rgba(157, 184, 207, .028));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .34), 0 0 26px rgba(244, 210, 138, .18), 0 0 18px rgba(157, 184, 207, .08), inset 0 1px 0 rgba(255, 255, 255, .13)
}

.update-entry svg {
  width: 23px;
  height: 23px;
  display: block;
  overflow: visible
}

.update-ring {
  stroke: rgba(255, 226, 162, .84);
  stroke-width: 1.65;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 48 18;
  transform-origin: 12px 12px;
  filter: drop-shadow(0 0 5px rgba(244, 210, 138, .18))
}

.update-arrow {
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.update-entry::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(244, 210, 138, .15);
  opacity: .70;
  filter: blur(.2px);
  pointer-events: none
}

.update-entry::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 236, 184, .96);
  box-shadow: 0 0 12px rgba(244, 210, 138, .76), 0 0 24px rgba(244, 210, 138, .34);
  pointer-events: none
}

.update-entry.downloading::after {
  opacity: .42
}

.update-entry.ready::after {
  background: rgba(244, 210, 138, .95);
  box-shadow: 0 0 12px rgba(244, 210, 138, .58), 0 0 26px rgba(244, 210, 138, .22)
}

.update-progress-ring {
  opacity: 0;
  stroke: rgba(255, 228, 170, .92);
  stroke-width: 1.95;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 55.29;
  stroke-dashoffset: 55.29;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
  transition: opacity .2s;
  filter: drop-shadow(0 0 5px rgba(244, 210, 138, .22))
}

.update-entry.downloading .update-progress-ring {
  opacity: 1
}

.update-entry.downloading .update-ring {
  opacity: .28
}

#update-modal.modal-mask {
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08)
}

.modal.update-modal {
  width: min(408px, 92vw);
  max-width: min(408px, 92vw);
  padding: 0;
  text-align: left;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(8, 8, 9, .965);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .66), 0 0 0 1px rgba(244, 210, 138, .055), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.modal.update-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 210, 138, .58), rgba(255, 255, 255, .20), transparent);
  opacity: .72;
  pointer-events: none
}

.update-panel-inner {
  position: relative;
  z-index: 1;
  padding: 28px 30px 24px
}

.update-panel-head {
  display: block;
  margin-bottom: 17px;
  padding: 0 0 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .075)
}

.update-kicker {
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .18em;
  color: rgba(244, 210, 138, .62);
  text-transform: uppercase;
  margin-bottom: 11px
}

.update-title {
  display: none
}

.update-version {
  margin-top: 0;
  font-size: 38px;
  line-height: .95;
  font-weight: 760;
  color: rgba(255, 246, 225, .97);
  letter-spacing: 0
}

.update-hero {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .065)
}

.update-hero-main {
  max-width: none;
  font-size: 13.5px;
  font-weight: 560;
  color: rgba(255, 244, 218, .82);
  line-height: 1.55;
  letter-spacing: 0
}

.update-hero-sub {
  display: none
}

.update-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 19px;
  border-top: 0
}

.update-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: transparent
}

.update-item-dot {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  color: rgba(244, 210, 138, .58);
  font-variant-numeric: tabular-nums
}

.update-item-dot::before {
  content: attr(data-index)
}

.update-item-text {
  font-size: 13px;
  font-weight: 560;
  line-height: 1.45;
  color: rgba(255, 255, 255, .76)
}

.update-download-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -3px 0 13px
}

.update-download-sources[hidden] {
  display: none
}

.update-download-source {
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .62);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform .18s, color .18s, border-color .18s, background .18s, box-shadow .18s
}

.update-download-source:hover,
.update-download-source.active {
  color: rgba(255, 244, 214, .94);
  border-color: rgba(244, 210, 138, .38);
  background: rgba(244, 210, 138, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
}

.update-download-source:hover {
  transform: translateY(-1px)
}

.update-download-source:disabled {
  cursor: default;
  opacity: .56;
  transform: none
}

.update-actions {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 10px;
  align-items: center;
  padding-top: 0
}

.update-primary-btn {
  position: relative;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(244, 210, 138, .34);
  background: rgba(244, 210, 138, .105);
  color: rgba(255, 244, 214, .96);
  font-family: inherit;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .2px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28), 0 0 22px rgba(244, 210, 138, .060), inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: background .22s, border-color .22s, transform .22s, color .22s, box-shadow .22s
}

.update-primary-btn:hover {
  border-color: rgba(244, 210, 138, .58);
  background: rgba(244, 210, 138, .15);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .30), 0 0 28px rgba(244, 210, 138, .11), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateY(-1px)
}

.update-primary-btn:disabled {
  cursor: default;
  transform: none;
  color: rgba(255, 255, 255, .64);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045)
}

.update-btn-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(244, 210, 138, .30), rgba(255, 239, 193, .18));
  opacity: .95;
  transition: width .22s ease;
  pointer-events: none
}

.update-btn-label {
  position: relative;
  z-index: 1
}

.update-secondary-btn {
  height: 44px;
  padding: 0;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .55);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s
}

.update-secondary-btn:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
  transform: translateY(-1px)
}

.update-footnote {
  display: block;
  margin-top: 12px;
  min-height: 17px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 244, 214, .54)
}

.modal.update-modal.ready .update-primary-btn {
  border-color: rgba(244, 210, 138, .46);
  background: rgba(244, 210, 138, .13);
  color: #fff0bf
}

.modal.update-modal.error .update-primary-btn {
  border-color: rgba(255, 190, 126, .46);
  background: rgba(255, 158, 86, .12);
  color: #ffe3c2
}

.modal.update-modal.error .update-footnote {
  color: rgba(255, 212, 170, .82)
}

/* ---------- 左下小封面 ---------- */
#thumb-wrap {
  position: fixed;
  z-index: 6;
  left: 24px;
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease
}

#thumb-wrap.visible {
  opacity: 1;
  pointer-events: auto
}

#thumb-cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform .15s ease
}

#thumb-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 250px;
  min-width: 0
}

#thumb-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .2s, text-shadow .2s
}

#thumb-artist {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .5px;
  cursor: pointer;
  transition: color .2s, text-shadow .2s
}

#thumb-title:hover,
#thumb-artist:hover {
  color: #fff0bf;
  text-shadow: 0 0 16px rgba(244, 210, 138, .22)
}

/* ---------- 底部控件 ---------- */
.control-glass-filter-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none
}

#bottom-handle {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: 13px;
  width: 236px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(-50%) translateY(0) scale(.96);
  opacity: .14;
  cursor: pointer;
  transition: opacity .42s cubic-bezier(.16, 1, .3, 1), transform .42s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0
}

#bottom-handle::before {
  content: '';
  position: absolute;
  inset: -12px -18px -8px;
  border-radius: 999px;
  background: transparent
}

#bottom-handle span {
  display: block;
  width: 164px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 16px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .70);
  transform: scaleX(.88);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .42s, box-shadow .42s
}

#bottom-handle:hover,
#bottom-handle.active,
body.controls-handle-awake #bottom-handle {
  opacity: .82;
  transform: translateX(-50%) translateY(-2px) scale(1)
}

#bottom-handle:hover span,
#bottom-handle.active span,
body.controls-handle-awake #bottom-handle span {
  transform: scaleX(1);
  opacity: 1
}

body.controls-visible #bottom-handle {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) scale(.78)
}

body.controls-visible #bottom-handle span {
  width: 168px;
  opacity: 0
}

body.immersive-mode #bottom-handle {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(16px) scale(.92) !important
}

#bottom-bar {
  position: fixed;
  z-index: 6;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(36px) scale(.972);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  filter: none;
  transition: opacity .34s cubic-bezier(.16, 1, .3, 1), bottom .34s cubic-bezier(.16, 1, .3, 1), width .34s, transform .46s cubic-bezier(.16, 1, .3, 1), filter .38s cubic-bezier(.16, 1, .3, 1);
  width: min(1080px, calc(100vw - 56px));
  padding: 9px 22px 14px;
  border-radius: 50px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none
}

html.control-glass-svg-ok #bottom-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}

#bottom-bar::before {
  content: none
}

#bottom-bar::after {
  content: none
}

#bottom-bar.visible {
  opacity: .91;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  filter: blur(0);
  background: rgba(0, 0, 0, .10);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.16);
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .35), inset 0 0 10px 4px rgba(255, 255, 255, .15), 0 4px 16px rgba(17, 17, 26, .05), 0 8px 24px rgba(17, 17, 26, .05), 0 16px 56px rgba(17, 17, 26, .05), inset 0 4px 16px rgba(17, 17, 26, .05), inset 0 8px 24px rgba(17, 17, 26, .05), inset 0 16px 56px rgba(17, 17, 26, .05)
}

html.control-glass-svg-ok #bottom-bar.visible {
  background: rgba(0, 0, 0, .10);
  backdrop-filter: url(#sumusic-control-glass-filter) saturate(1);
  -webkit-backdrop-filter: url(#sumusic-control-glass-filter) saturate(1)
}

#bottom-bar.soft-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(88px) scale(.972);
  filter: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none
}

body.home-controls-locked #bottom-bar {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(92px) scale(.985) !important;
  filter: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important
}

#bottom-bar.stage-mode {
  bottom: 14px;
  width: calc(100vw - 56px)
}

#progress-bar {
  position: relative;
  z-index: 1;
  align-self: center;
  width: calc(100% - clamp(86px, 10vw, 156px));
  height: 4px;
  margin: 4px auto 1px;
  background: rgba(255, 255, 255, 0.095);
  border-radius: 999px;
  cursor: pointer;
  transition: height .2s, background .2s, box-shadow .2s, width .2s;
  overflow: visible;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), inset 0 -1px 1px rgba(0, 0, 0, .20)
}

#progress-bar:hover,
#progress-bar.is-dragging {
  height: 5px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 18px rgba(var(--fc-accent-rgb), .10), inset 0 1px 1px rgba(255, 255, 255, .18)
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(var(--fc-accent-rgb), .74));
  border-radius: 999px;
  transition: width .12s linear;
  box-shadow: 0 0 16px rgba(var(--fc-accent-rgb), .18)
}

#progress-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0, #fff 28%, rgba(194, 235, 255, .86) 74%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 0 18px rgba(178, 229, 255, .28);
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, transform .16s
}

#progress-bar:hover #progress-thumb,
#progress-bar.is-dragging #progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1)
}

#progress-thumb::before,
#progress-thumb::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(255, 68, 88, .42);
  opacity: 0;
  transform: translate(-50%, -50%)
}

#progress-bar.is-dragging #progress-thumb::before {
  animation: thumb-particle-a .62s ease-out infinite
}

#progress-bar.is-dragging #progress-thumb::after {
  animation: thumb-particle-b .72s ease-out infinite
}

.progress-drag-particle {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 12px rgba(0, 245, 212, .36);
  pointer-events: none;
  animation: progress-particle-fade .62s ease-out forwards
}

@keyframes thumb-particle-a {
  0% {
    opacity: .8;
    transform: translate(-50%, -50%) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(-18px, -17px) scale(.2)
  }
}

@keyframes thumb-particle-b {
  0% {
    opacity: .7;
    transform: translate(-50%, -50%) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(16px, 13px) scale(.22)
  }
}

@keyframes progress-particle-fade {
  0% {
    opacity: .95;
    transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--px, 0) + var(--dx, 0)), calc(var(--py, 0) + var(--dy, 0)), 0) scale(.15)
  }
}

#controls {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 1.08fr) minmax(380px, auto) minmax(400px, 1.08fr);
  align-items: center;
  gap: 18px
}

.control-cluster {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  height: 62px
}

.control-cluster.actions {
  grid-column: 1;
  justify-content: flex-start;
  overflow: visible
}

.control-cluster.transport {
  grid-column: 2;
  justify-content: center
}

.control-cluster.modes {
  grid-column: 3;
  justify-content: flex-end
}

.control-divider {
  display: none
}

.control-track {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1
}

.control-cluster.actions #quality-control {
  flex: 0 0 auto;
  margin-left: 0
}

.control-cover {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, .070);
  border: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: transform .18s ease, opacity .2s ease, box-shadow .2s ease;
  flex: 0 0 auto
}

.control-cover:focus-visible,
#thumb-cover:focus-visible {
  outline: 2px solid rgba(var(--fc-accent-rgb), .78);
  outline-offset: 3px
}

.control-cover.cover-empty {
  background-image: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .18), transparent 24%), linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 8px 22px rgba(0, 0, 0, .22)
}

.control-meta {
  min-width: 0;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.control-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  cursor: pointer
}

.control-title-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.control-title-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  max-width: none
}

.control-title-badges .tag-source {
  height: 15px;
  min-width: 0;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 15px;
  letter-spacing: 0
}

.tag-source.control-source-chip {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer
}

.control-title-badges .control-source-chip {
  position: relative;
  transition: transform .16s, filter .16s, border-color .16s
}

.control-title-badges .control-source-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.14) saturate(1.12)
}

.control-title-badges .tag-vip {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0
}

.control-source-switcher {
  position: fixed;
  z-index: 22;
  width: 276px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(16, 17, 22, .86), rgba(7, 8, 12, .90));
  color: rgba(255, 255, 255, .86);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.985);
  transition: opacity .18s, transform .18s;
  overflow: hidden
}

.control-source-switcher::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .018) 44%, rgba(255, 255, 255, .085));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 10px 28px rgba(255, 255, 255, .045);
  opacity: .72
}

.control-source-switcher>* {
  position: relative;
  z-index: 1
}

.control-source-switcher.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1)
}

.control-source-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 2px 8px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1
}

.control-source-switcher-head small {
  min-width: 0;
  color: rgba(255, 255, 255, .46);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap
}

.control-source-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px
}

.control-source-option {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .74);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: background .18s, color .18s, border-color .18s, transform .18s
}

.control-source-option:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(var(--fc-accent-rgb), .26)
}

.control-source-option.active {
  color: #fff;
  border-color: rgba(var(--fc-accent-rgb), .38);
  background: rgba(var(--fc-accent-rgb), .12)
}

.control-source-option:focus-visible {
  border-color: rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10)
}

.control-source-option.disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none !important
}

.control-source-option-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 820
}

.control-source-option small {
  color: rgba(255, 255, 255, .42);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap
}

.control-source-option .tag-source {
  width: 27px;
  justify-content: center;
  pointer-events: none
}

.control-artist {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .48);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer
}

.control-title:hover,
.control-artist:hover {
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 245, 212, .20)
}

.ctrl-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.70);
  cursor: pointer;
  transition: color .18s, transform .18s, text-shadow .18s, background .18s, box-shadow .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  will-change: transform
}

.ctrl-btn:focus {
  outline: none
}

.ctrl-btn:focus-visible {
  outline: 1px solid rgba(var(--fc-accent-rgb), .34);
  outline-offset: 2px
}

.ctrl-btn svg {
  width: 21px;
  height: 21px
}

.ctrl-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .045);
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(0, 245, 212, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045)
}

.ctrl-btn:active {
  transform: translateY(0) scale(.96)
}

.ctrl-btn.active {
  color: rgba(210, 244, 241, .90);
  text-shadow: 0 0 12px rgba(0, 245, 212, .16)
}

.ctrl-btn.liked {
  color: #ff7a90;
  text-shadow: 0 0 18px rgba(255, 122, 144, .36)
}

.ctrl-btn.busy {
  opacity: .55;
  pointer-events: none
}

#play-mode-btn[data-mode="loop"] {
  color: rgba(255, 255, 255, .70)
}

#play-mode-btn[data-mode="shuffle"],
#play-mode-btn[data-mode="single"] {
  color: rgba(210, 244, 241, .90);
  text-shadow: 0 0 12px rgba(0, 245, 212, .15)
}

#play-mode-btn.mode-switching #play-mode-icon {
  animation: play-mode-pop .42s cubic-bezier(.16, 1, .3, 1)
}

#cuefield-automix-btn.cuefield-automix-on {
  color: rgba(255, 221, 150, .98);
  text-shadow: 0 0 14px rgba(255, 191, 100, .42)
}

#cuefield-automix-btn.cuefield-automix-ready {
  color: rgba(153, 241, 211, 1);
  text-shadow: 0 0 16px rgba(86, 255, 189, .52);
  animation: cuefield-ready-pulse 1.8s ease-in-out infinite
}

@keyframes cuefield-ready-pulse {
  50% { transform: translateY(-1px) scale(1.08) }
}

@keyframes play-mode-pop {
  0% {
    opacity: .4;
    transform: translateY(3px) scale(.84) rotate(-18deg)
  }

  65% {
    opacity: 1;
    transform: translateY(-1px) scale(1.10) rotate(4deg)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0)
  }
}

.heart-svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 0 rgba(255, 122, 144, 0))
}

.liked .heart-svg {
  filter: drop-shadow(0 0 10px rgba(255, 122, 144, .34))
}

.song-action-btn .heart-svg,
.qi-act button .heart-svg {
  width: 15px;
  height: 15px
}

.volume-control,
.quality-control,
.lyric-timing-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.control-quality-chip {
  height: 15px;
  align-self: center;
  flex: 0 0 auto;
  margin-left: -1px;
  line-height: 1
}

.control-quality-chip::before {
  left: -18px;
  right: -18px;
  bottom: 7px;
  height: 118px
}

.volume-control::before,
.quality-control::before,
.lyric-timing-control::before {
  content: '';
  position: absolute;
  left: -34px;
  right: -34px;
  bottom: 18px;
  height: 132px;
  display: none;
  z-index: 0
}

.volume-control.open::before,
.volume-control:hover::before,
.volume-control:focus-within::before,
.quality-control.open::before,
.quality-control:hover::before,
.quality-control:focus-within::before,
.lyric-timing-control:hover::before,
.lyric-timing-control:focus-within::before {
  display: block
}

.volume-control.sibling-suppressed::before,
.volume-control.handoff-closing::before {
  display: none !important
}

.volume-control.muted .ctrl-btn {
  color: rgba(255, 255, 255, .38)
}

.lyric-timing-control.has-offset .lyrics-toggle-btn {
  color: #fff6c8;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .32), inset 0 0 12px rgba(255, 220, 128, .18), 0 0 18px rgba(255, 220, 128, .12)
}

.volume-popover {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%) translateY(8px);
  width: 226px;
  padding: 10px 12px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(12, 12, 16, .78);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 1
}

.volume-control .ctrl-btn,
.quality-control .ctrl-btn,
.lyric-timing-control .ctrl-btn {
  position: relative;
  z-index: 2
}

.volume-control.open .volume-popover,
.volume-control:hover .volume-popover,
.volume-control:focus-within .volume-popover,
.quality-control.open .quality-popover,
.quality-control:hover .quality-popover,
.quality-control:focus-within .quality-popover,
.lyric-timing-control:hover .lyric-timing-popover,
.lyric-timing-control:focus-within .lyric-timing-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.volume-control.sibling-suppressed .volume-popover,
.volume-control.handoff-closing .volume-popover {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(8px) scale(.98) !important
}

.lyric-timing-popover {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%) translateY(8px);
  width: 226px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(10, 10, 14, .82);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 8
}

#bottom-bar.soft-hidden .lyric-timing-popover,
body:not(.controls-visible) .lyric-timing-popover,
.lyric-timing-control.closing .lyric-timing-popover {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(8px) scale(.98) !important
}

#bottom-bar.soft-hidden .lyric-timing-control::before,
body:not(.controls-visible) .lyric-timing-control::before,
.lyric-timing-control.closing::before {
  display: none !important
}

.lyric-timing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0
}

.lyric-timing-head span {
  font-size: 11px;
  font-weight: 850;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap
}

.lyric-timing-head strong {
  min-width: 48px;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 246, 200, .94);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.lyric-timing-song {
  min-height: 16px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .44);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lyric-timing-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px
}

.lyric-timing-actions button {
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .72);
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s
}

.lyric-timing-actions button:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255, 246, 200, .34);
  background: rgba(255, 246, 200, .10)
}

.lyric-timing-actions button:active {
  transform: translateY(0) scale(.98)
}

.lyric-timing-actions button:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none
}

#quality-btn.quality-pill {
  width: auto;
  min-width: 34px;
  max-width: 52px;
  height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid rgba(86, 224, 255, .30);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 15px;
  color: #c9f5ff;
  background: rgba(86, 224, 255, .075);
  box-shadow: none
}

#quality-btn-label {
  display: block;
  min-width: 0;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap
}

.control-quality-chip .quality-popover {
  bottom: 24px
}

.quality-popover {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%) translateY(8px);
  width: 238px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(157, 184, 207, .24);
  background: rgba(10, 11, 14, .82);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 8
}

.quality-option-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px
}

.audio-output-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035)
}

.quality-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 1px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px
}

.quality-output-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.quality-output-refresh {
  height: 20px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .58);
  font: inherit;
  font-size: 10px;
  cursor: pointer
}

.audio-output-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  max-height: 62px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 1px
}

.audio-output-summary-card {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .026));
  color: rgba(255, 255, 255, .72);
  font-family: inherit;
  text-align: left;
  padding: 7px 8px 7px 7px;
  cursor: pointer;
  min-width: 0
}

.audio-output-summary-card:hover {
  color: rgba(255, 255, 255, .94);
  border-color: rgba(var(--fc-accent-rgb), .32);
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .105), rgba(255, 255, 255, .035))
}

.audio-output-summary-copy {
  min-width: 0;
  display: grid;
  gap: 3px
}

.audio-output-summary-copy b,
.audio-output-summary-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.audio-output-summary-copy b {
  font-size: 11px;
  color: inherit
}

.audio-output-summary-copy small {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .46)
}

.audio-output-summary-action {
  font-size: 10px;
  font-weight: 900;
  color: rgba(var(--fc-accent-rgb), .82)
}

.audio-output-option {
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .62);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 9px;
  cursor: pointer
}

.audio-output-option:hover,
.audio-output-option.active {
  color: #fff;
  border-color: rgba(var(--fc-accent-rgb), .34);
  background: rgba(var(--fc-accent-rgb), .11)
}

.workflow-node {
  position: relative
}

.workflow-link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0
}

.workflow-link-layer .workflow-link {
  fill: none;
  stroke: rgba(var(--fc-accent-rgb), .46);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(var(--fc-accent-rgb), .24))
}

.workflow-link-layer .workflow-link.mirror {
  stroke: rgba(126, 211, 255, .58)
}

.workflow-link-layer .workflow-link.bridge {
  stroke: rgba(244, 210, 138, .68)
}

.workflow-link-layer .workflow-link.temp {
  stroke: rgba(255, 255, 255, .76);
  stroke-dasharray: 6 5;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .28));
  animation: workflowDash 1s linear infinite
}

.workflow-link-layer .workflow-link.pending {
  stroke: rgba(244, 210, 138, .50);
  stroke-dasharray: 5 6;
  filter: drop-shadow(0 0 7px rgba(244, 210, 138, .18))
}

.flow-port {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(var(--fc-accent-rgb), .58);
  background: rgba(9, 11, 16, .94);
  box-shadow: 0 0 0 3px rgba(var(--fc-accent-rgb), .07), 0 0 11px rgba(var(--fc-accent-rgb), .20), inset 0 0 0 1px rgba(255, 255, 255, .06);
  cursor: crosshair;
  z-index: 8;
  opacity: .62;
  transform: translateY(-50%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease
}

.flow-port::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: rgba(var(--fc-accent-rgb), .82);
  box-shadow: 0 0 8px rgba(var(--fc-accent-rgb), .35)
}

.flow-port.in {
  left: -6px
}

.flow-port.out {
  right: -6px
}

.workflow-node:hover .flow-port,
.dragging-line .flow-port,
.workflow-node.connected .flow-port,
.workflow-node.active .flow-port {
  opacity: 1;
  border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 4px rgba(var(--fc-accent-rgb), .12), 0 0 18px rgba(var(--fc-accent-rgb), .38), inset 0 0 0 1px rgba(255, 255, 255, .10)
}

.workflow-node:hover .flow-port.out,
.dragging-line .flow-port.out {
  transform: translateY(-50%) scale(1.08)
}

@keyframes workflowDash {
  to { stroke-dashoffset: -22 }
}

.audio-route-graph {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 9px 8px 10px 14px;
  color: rgba(255, 255, 255, .74);
  overflow: visible
}

.audio-route-graph > *:not(.workflow-link-layer) {
  position: relative;
  z-index: 1
}

.audio-flow-source {
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 13px;
  border: 1px solid rgba(var(--fc-accent-rgb), .30);
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .14), rgba(255, 255, 255, .042) 48%, rgba(255, 255, 255, .025));
  color: rgba(255, 255, 255, .82);
  padding: 10px 15px 10px 10px;
  box-shadow: 0 0 20px rgba(var(--fc-accent-rgb), .10), inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: visible;
  cursor: default;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease
}

.audio-flow-source .route-node-kicker {
  grid-column: 1 / -1;
  align-self: end;
  color: rgba(var(--fc-accent-rgb), .78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em
}

.audio-source-meter {
  grid-column: 2 / 3;
  height: 4px;
  display: grid;
  grid-template-columns: 1.3fr .7fr 1fr .5fr;
  gap: 4px;
  align-self: start;
  margin-top: -4px;
  opacity: .82
}

.audio-source-meter i {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--fc-accent-rgb), .82), rgba(244, 210, 138, .62));
  box-shadow: 0 0 10px rgba(var(--fc-accent-rgb), .24)
}

.audio-source-meter i:nth-child(2) {
  opacity: .54
}

.audio-source-meter i:nth-child(3) {
  opacity: .72
}

.audio-source-meter i:nth-child(4) {
  opacity: .38
}

.audio-route-status {
  position: relative;
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 2px;
  font-size: 10px;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .54)
}

.audio-route-status b {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .82)
}

.audio-route-status small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.audio-route-board {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .072);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, rgba(255, 255, 255, .027), transparent 1px) 0 0 / 42px 42px,
    rgba(4, 6, 10, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 54px rgba(0, 0, 0, .16)
}

.audio-route-board-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 2px
}

.route-board-title {
  min-width: 0;
  display: grid;
  gap: 2px
}

.route-board-title b {
  font-size: 11px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .08em
}

.route-board-title small {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .38)
}

.route-board-badges {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px
}

.audio-route-chip {
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .038);
  color: rgba(255, 255, 255, .50);
  font-size: 10px;
  font-weight: 900;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.audio-route-chip.active {
  border-color: rgba(var(--fc-accent-rgb), .34);
  background: rgba(var(--fc-accent-rgb), .105);
  color: rgba(255, 255, 255, .86)
}

.route-energy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--fc-accent-rgb), .78);
  box-shadow: 0 0 16px rgba(var(--fc-accent-rgb), .45);
  animation: routeNodePulse 1.8s ease-in-out infinite
}

.audio-route-lanes {
  display: grid;
  gap: 10px
}

.route-lane {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  gap: 11px;
  padding: 11px 12px 11px 14px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .062);
  background: linear-gradient(135deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .016));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  overflow: visible
}

.route-lane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, rgba(var(--fc-accent-rgb), .72), rgba(244, 210, 138, .42));
  box-shadow: 0 0 12px rgba(var(--fc-accent-rgb), .22)
}

.route-lane-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  align-content: center;
  gap: 7px 8px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, .06)
}

.route-lane-head b,
.route-lane-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.route-lane-head b {
  font-size: 11px;
  color: rgba(255, 255, 255, .78)
}

.route-lane-head small {
  margin-top: 1px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .36)
}

.route-lane-index {
  width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(var(--fc-accent-rgb), .20);
  background: rgba(var(--fc-accent-rgb), .07);
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  font-weight: 900
}

.route-lane-state {
  grid-column: 2 / 3;
  justify-self: start;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .56);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  padding: 0 8px;
  white-space: nowrap
}

.route-lane-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, .40);
  letter-spacing: .08em
}

.route-node-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  align-content: start;
  gap: 8px
}

.route-node-grid::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--fc-accent-rgb), .22), rgba(126, 211, 255, .13), transparent);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0
}

.route-node-grid > * {
  position: relative;
  z-index: 1
}

.bridge-grid {
  grid-template-columns: minmax(0, 1fr)
}

.audio-route-node {
  position: relative;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .026));
  color: rgba(255, 255, 255, .70);
  font-family: inherit;
  text-align: left;
  padding: 6px 8px 6px 7px;
  cursor: pointer;
  overflow: visible;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease
}

.audio-route-node::before {
  content: "";
  position: absolute;
  left: -38%;
  top: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--fc-accent-rgb), .18), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none
}

.audio-route-node:hover,
.audio-flow-source:hover {
  transform: translateY(-1px);
  color: rgba(255, 255, 255, .92);
  border-color: rgba(var(--fc-accent-rgb), .32);
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .105), rgba(255, 255, 255, .035))
}

.audio-route-node.connected {
  border-color: rgba(var(--fc-accent-rgb), .46);
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .14), rgba(255, 255, 255, .040));
  box-shadow: 0 0 0 1px rgba(var(--fc-accent-rgb), .08), 0 12px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.audio-route-node.pending {
  border-style: dashed;
  border-color: rgba(244, 210, 138, .42);
  background: linear-gradient(135deg, rgba(244, 210, 138, .075), rgba(255, 255, 255, .026))
}

.audio-route-node.warning {
  border-style: solid;
  border-color: rgba(255, 83, 103, .50);
  background: linear-gradient(135deg, rgba(255, 83, 103, .10), rgba(255, 255, 255, .026))
}

.audio-route-node.connected::before {
  opacity: 1;
  animation: routeEnergySweep 1.95s ease-in-out infinite
}

.audio-route-node.disabled {
  opacity: .56
}

.audio-route-node.disabled .flow-port {
  cursor: not-allowed;
  opacity: .26
}

.route-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--fc-accent-rgb), .13);
  color: rgba(255, 255, 255, .88);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .065)
}

.route-node-text {
  min-width: 0;
  display: grid;
  gap: 2px
}

.route-node-text b,
.route-node-text small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.route-node-text b {
  font-size: 11px;
  color: rgba(255, 255, 255, .84)
}

.route-node-text small {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .42)
}

.route-node-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18)
}

.audio-route-node.connected .route-node-pulse {
  background: rgba(var(--fc-accent-rgb), .9);
  box-shadow: 0 0 14px rgba(var(--fc-accent-rgb), .45);
  animation: routeNodePulse 1.55s ease-in-out infinite
}

.audio-route-node.pending .route-node-pulse {
  background: rgba(244, 210, 138, .86);
  box-shadow: 0 0 14px rgba(244, 210, 138, .32)
}

.audio-route-node.warning .route-node-pulse {
  background: rgba(255, 83, 103, .90);
  box-shadow: 0 0 14px rgba(255, 83, 103, .38)
}

.route-lane .audio-route-note {
  grid-column: 2 / 3;
  margin-top: -3px
}

.audio-route-note,
.audio-route-empty {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .34);
  padding: 0 2px 2px
}

@keyframes routeEnergySweep {
  0% { transform: translateX(0) skewX(-16deg); opacity: 0 }
  24% { opacity: 1 }
  100% { transform: translateX(360%) skewX(-16deg); opacity: 0 }
}

@keyframes routeNodePulse {
  0%, 100% { transform: scale(.86); opacity: .62 }
  50% { transform: scale(1.12); opacity: 1 }
}

.quality-option {
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .70);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  text-align: left
}

.quality-option span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.quality-option small {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .42);
  letter-spacing: 0;
  white-space: nowrap
}

.quality-option:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255, 255, 255, .09)
}

.quality-option.active {
  color: #eaf2ff;
  border-color: rgba(157, 184, 207, .46);
  background: rgba(157, 184, 207, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
}

.quality-option.locked {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important
}

.quality-option.locked:not(.cap-locked) small::after {
  content: ' · 需网易云SVIP';
  color: rgba(244, 210, 138, .88)
}

.quality-option.cap-locked small::after {
  content: ' · 已探测';
  color: rgba(168, 211, 255, .86)
}

.volume-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px
}

#volume-slider {
  width: 100%;
  accent-color: var(--fc-accent);
  cursor: pointer
}

#volume-value {
  width: 34px;
  text-align: right;
  font-size: 10px;
  color: rgba(255, 255, 255, .52);
  font-variant-numeric: tabular-nums
}

.fade-control-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  min-height: 22px
}

.fade-control-row label {
  font-size: 10px;
  color: rgba(255, 255, 255, .46);
  white-space: nowrap
}

.fade-control-row input {
  width: 100%;
  accent-color: var(--fc-accent);
  cursor: pointer
}

.fade-control-row span {
  font-size: 10px;
  color: rgba(255, 255, 255, .42);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.mini-queue-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: min(420px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 170px));
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(145deg, rgba(18, 18, 23, .82), rgba(8, 8, 12, .88));
  backdrop-filter: blur(30px) saturate(1.08);
  -webkit-backdrop-filter: blur(30px) saturate(1.08);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .065);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px) scale(.98);
  transition: opacity .22s, transform .22s;
  z-index: 7;
  overflow: hidden
}

.mini-queue-popover.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1)
}

.mini-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.mini-queue-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .4px
}

.mini-queue-count {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .44);
  margin-top: 3px
}

.mini-queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(320px, calc(100vh - 250px));
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain
}

.mini-queue-list::-webkit-scrollbar {
  width: 3px
}

.mini-queue-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .20);
  border-radius: 3px
}

.mini-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .032);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
  will-change: transform, opacity
}

.mini-queue-item:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px)
}

.mini-queue-item.now {
  border-color: rgba(0, 245, 212, .36);
  background: rgba(0, 245, 212, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 245, 212, .06)
}

.mini-queue-item img,
.mini-queue-cover {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, .07);
  flex-shrink: 0
}

.mini-queue-info {
  flex: 1;
  min-width: 0
}

.mini-queue-name {
  font-size: 12px;
  color: rgba(255, 255, 255, .90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mini-queue-item.now .mini-queue-name {
  color: #fff
}

.mini-queue-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px
}

.mini-queue-remove {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .50);
  cursor: pointer;
  line-height: 1
}

.mini-queue-remove:hover {
  background: rgba(255, 86, 100, .78);
  color: #fff
}

.mini-queue-remove.mini-queue-next:hover {
  background: rgba(0, 245, 212, .16);
  color: #eafffb
}

.mini-queue-empty {
  padding: 24px 8px;
  text-align: center;
  color: rgba(255, 255, 255, .35);
  font-size: 11.5px
}

.mini-queue-skeleton {
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(0, 245, 212, .085), rgba(255, 255, 255, .035));
  background-size: 220% 100%;
  animation: queue-shimmer 1.05s linear infinite
}

.mini-queue-skeleton+.mini-queue-skeleton {
  margin-top: 6px
}

@keyframes queue-shimmer {
  0% {
    background-position: 120% 0
  }

  100% {
    background-position: -120% 0
  }
}

.lyrics-word-icon {
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: currentColor;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif
}

#play-btn {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, .96);
  background: rgba(0, 0, 0, .10);
  transition: transform .20s cubic-bezier(.16, 1, .3, 1), background .20s, box-shadow .20s, filter .20s;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .34), inset 0 0 10px 4px rgba(255, 255, 255, .13), 0 10px 30px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.16)
}

html.control-glass-svg-ok #play-btn {
  backdrop-filter: blur(24px) saturate(1) brightness(1);
  -webkit-backdrop-filter: blur(24px) saturate(1) brightness(1)
}

#play-btn svg {
  width: 24px;
  height: 24px
}

#play-btn:hover {
  background: rgba(255, 255, 255, .055);
  transform: translateY(-1px) scale(1.012);
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .42), inset 0 0 12px 5px rgba(255, 255, 255, .17), 0 12px 34px rgba(0, 0, 0, .22), 0 0 18px rgba(var(--fc-accent-rgb), .10)
}

#play-btn:active {
  transform: translateY(0) scale(.965);
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .28), inset 0 0 10px 4px rgba(255, 255, 255, .10), 0 8px 22px rgba(0, 0, 0, .20)
}

#time-display {
  flex: 0 0 auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: .35px;
  min-width: 86px;
  text-align: center;
  font-variant-numeric: tabular-nums
}

body.diy-mode #bottom-bar {
  width: min(1160px, calc(100vw - 148px));
  left: calc(50% - 34px);
  bottom: 18px
}

body.diy-mode #bottom-bar.stage-mode {
  width: min(1160px, calc(100vw - 148px));
  bottom: 18px
}

@media (max-width: 1180px) {

  body.diy-mode #bottom-bar,
  body.diy-mode #bottom-bar.stage-mode {
    width: calc(100vw - 142px);
    padding: 9px 14px 12px;
    left: calc(50% - 34px)
  }

  body.diy-mode #controls {
    grid-template-columns: minmax(240px, 1fr) minmax(214px, auto) minmax(260px, auto);
    gap: 8px
  }

  .control-cluster {
    gap: 8px
  }

  .control-cover {
    width: 44px;
    height: 44px
  }

  .control-meta {
    max-width: 138px
  }

  .ctrl-btn {
    width: 32px;
    height: 32px
  }

  .ctrl-btn svg {
    width: 19px;
    height: 19px
  }

  body.diy-mode #play-btn {
    width: 54px;
    height: 54px
  }

  body.diy-mode #time-display {
    min-width: 72px;
    font-size: 11px
  }
}

@media (max-width: 920px) {

  #bottom-bar,
  #bottom-bar.stage-mode {
    width: calc(100vw - 28px);
    padding: 9px 14px 12px
  }

  #controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px
  }

  .control-cluster {
    gap: 8px;
    height: 56px
  }

  .control-cover {
    width: 44px;
    height: 44px
  }

  .control-meta {
    max-width: 170px
  }

  .control-title {
    font-size: 12.5px
  }

  .control-artist {
    font-size: 11px
  }

  .ctrl-btn {
    width: 32px;
    height: 32px
  }

  .ctrl-btn svg {
    width: 19px;
    height: 19px
  }

  .volume-popover,
  .quality-popover {
    bottom: 42px
  }

  #play-btn {
    width: 54px;
    height: 54px
  }

  #time-display {
    display: none
  }
}

@media (max-width: 620px) {

  #bottom-bar,
  #bottom-bar.stage-mode {
    width: calc(100vw - 20px)
  }

  #controls {
    grid-template-columns: 1fr
  }

  .control-cluster {
    grid-column: 1 !important;
    justify-content: center
  }

  .control-cluster.transport {
    order: 1
  }

  .control-cluster.actions {
    order: 2
  }

  .control-cluster.modes {
    order: 3
  }

  .control-track {
    display: none
  }

  .heart-svg {
    width: 19px;
    height: 19px
  }
}

/* ---------- 控制栏自适应实验：中轴固定 + 左右等宽弹性 ---------- */
#bottom-bar,
#bottom-bar.stage-mode,
body.simple-mode #bottom-bar {
  box-sizing: border-box;
  width: min(1120px, calc(100vw - clamp(20px, 5vw, 72px)));
  padding: clamp(8px, 1.2vw, 11px) clamp(12px, 2.2vw, 24px) clamp(10px, 1.35vw, 14px);
}

body.diy-mode #bottom-bar,
body.diy-mode #bottom-bar.stage-mode {
  left: 50%;
  width: min(1120px, calc(100vw - clamp(28px, 8vw, 148px)));
}

#controls,
body.simple-mode #controls,
body.diy-mode #controls {
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: clamp(8px, 1.7vw, 18px);
}

.control-cluster {
  min-width: 0
}

.control-cluster.actions {
  justify-content: flex-start;
  overflow: visible;
}

.control-cluster.transport {
  justify-self: center;
  justify-content: center;
  width: max-content;
  gap: clamp(8px, 1.1vw, 13px);
}

.control-cluster.modes {
  justify-content: flex-end;
  overflow: visible;
}

.control-track {
  flex: 1 1 auto;
  min-width: 0;
}

.control-meta {
  max-width: min(320px, 100%);
}

@media (max-width:1180px) {

  body.diy-mode #bottom-bar,
  body.diy-mode #bottom-bar.stage-mode {
    left: 50%;
    width: calc(100vw - clamp(28px, 8vw, 142px));
  }

  .control-meta {
    max-width: min(220px, 100%)
  }
}

@media (max-width:920px) {

  #bottom-bar,
  #bottom-bar.stage-mode,
  body.simple-mode #bottom-bar,
  body.diy-mode #bottom-bar,
  body.diy-mode #bottom-bar.stage-mode {
    width: calc(100vw - 28px);
  }

  #controls,
  body.simple-mode #controls,
  body.diy-mode #controls {
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  }

  .control-meta {
    max-width: min(170px, 100%)
  }
}

@media (max-width:720px) {
  .control-cover {
    display: none
  }

  .control-meta {
    max-width: min(132px, 100%)
  }

  .control-cluster.modes {
    gap: 6px
  }
}

@media (max-width:1180px) {
  body.diy-mode .control-cluster.modes {
    gap: 7px
  }

  body.diy-mode #controls {
    gap: 10px
  }
}

@media (max-width:1040px) {

  body.diy-mode #time-display,
  body.diy-mode #controls-hide-btn {
    display: none !important
  }

  body.diy-mode .control-track {
    max-width: 260px
  }
}

@media (max-width:940px) {

  body.diy-mode .lyrics-toggle-btn,
  body.diy-mode #volume-control,
  body.diy-mode .fullscreen-toggle-btn {
    display: none !important
  }
}

@media (max-width:620px) {

  #controls,
  body.simple-mode #controls,
  body.diy-mode #controls {
    grid-template-columns: 1fr;
  }

  .control-cluster.actions,
  .control-cluster.transport,
  .control-cluster.modes {
    justify-content: center;
    width: 100%;
  }
}

body.immersive-mode #desktop-titlebar,
body.immersive-mode #search-area,
body.immersive-mode #top-right,
body.immersive-mode #thumb-wrap,
body.immersive-mode #fx-fab,
body.immersive-mode #fx-panel,
body.immersive-mode #trial-banner,
body.immersive-mode #ai-depth-chip,
body.immersive-mode #beat-chip,
body.immersive-mode #gesture-hud,
body.immersive-mode #hand-canvas,
body.immersive-mode #hint,
body.immersive-mode #upload-tip,
body.immersive-mode #drop-overlay,
body.immersive-mode #idle-guide-canvas,
body.immersive-mode #login-guide-canvas,
body.immersive-mode #toast,
body.immersive-mode #cuefield-feedback,
body.immersive-mode #source-fallback-notice,
body.immersive-mode .modal-mask {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important
}

body.immersive-mode .modal-mask {
  display: none !important
}

body.immersive-mode #bottom-bar.visible {
  z-index: 32;
  bottom: 22px;
  width: min(620px, calc(100vw - 56px));
  padding: 10px 20px 13px;
  gap: 9px;
  border-radius: 22px;
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .13), transparent 35%), linear-gradient(112deg, rgba(255, 255, 255, .060), rgba(12, 15, 18, .45) 52%, rgba(2, 4, 7, .58));
  border-color: rgba(255, 255, 255, .060);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .32), 0 0 42px rgba(152, 221, 255, .055), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -22px 58px rgba(0, 0, 0, .18);
  backdrop-filter: blur(46px) saturate(1.36);
  -webkit-backdrop-filter: blur(46px) saturate(1.36)
}

body.immersive-mode #bottom-bar.soft-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(96px) scale(.97);
  filter: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none
}

body.immersive-mode #progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, .10)
}

body.immersive-mode #progress-bar:hover,
body.immersive-mode #progress-bar.is-dragging {
  height: 5px;
  background: rgba(255, 255, 255, .14)
}

body.immersive-mode #controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px
}

body.immersive-mode .control-cluster {
  grid-column: auto !important;
  justify-content: center;
  height: 64px;
  gap: 14px
}

body.immersive-mode .control-cluster.actions {
  display: none
}

body.immersive-mode .control-cluster.transport {
  display: flex;
  order: 1
}

body.immersive-mode .control-cluster.modes {
  display: flex;
  order: 2;
  gap: 14px
}

body.immersive-mode .control-track,
body.immersive-mode #heart-btn,
body.immersive-mode #collect-btn,
body.immersive-mode #play-mode-btn,
body.immersive-mode .lyrics-toggle-btn,
body.immersive-mode #mini-queue-btn,
body.immersive-mode #quality-control,
body.immersive-mode #volume-control,
body.immersive-mode #controls-hide-btn,
body.immersive-mode .control-divider,
body.immersive-mode .fullscreen-toggle-btn {
  display: none !important
}

body.immersive-mode #mini-queue-popover {
  display: none !important
}

body.immersive-mode .ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px
}

body.immersive-mode .ctrl-btn svg {
  width: 22px;
  height: 22px
}

body.immersive-mode #play-btn {
  width: 64px;
  height: 64px
}

body.immersive-mode #play-btn svg {
  width: 25px;
  height: 25px
}

body.immersive-mode #immersive-btn {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, .38)
}

body.immersive-mode #time-display {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  font-size: 12px;
  color: rgba(255, 255, 255, .58)
}

@media (max-width: 620px) {
  body.immersive-mode #bottom-bar {
    width: calc(100vw - 20px);
    padding: 10px 12px 12px
  }

  body.immersive-mode #controls {
    gap: 10px
  }

  body.immersive-mode .control-cluster {
    gap: 10px;
    height: 60px
  }

  body.immersive-mode .ctrl-btn {
    width: 36px;
    height: 36px
  }

  body.immersive-mode .ctrl-btn svg {
    width: 20px;
    height: 20px
  }

  body.immersive-mode #play-btn {
    width: 58px;
    height: 58px
  }

  body.immersive-mode #time-display {
    min-width: 72px;
    font-size: 10.5px
  }
}

@media (max-width: 420px) {
  body.immersive-mode #time-display {
    display: none
  }
}

body.immersive-mode::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 118px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16))
}

/* ---------- 试听提醒 ---------- */
#trial-banner {
  position: fixed;
  z-index: 8;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(244, 210, 138, 0.11);
  border: 1px solid rgba(244, 210, 138, 0.40);
  color: var(--champagne);
  padding: 10px 18px 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: .3px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s, transform .5s;
  max-width: 90vw
}

#trial-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto
}

#trial-banner .ic {
  flex-shrink: 0;
  color: var(--champagne)
}

#trial-banner .login-link {
  margin-left: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: background .2s;
  border: 1px solid rgba(255, 255, 255, 0.15)
}

#trial-banner .login-link:hover {
  background: rgba(255, 255, 255, 0.18)
}

#trial-banner .close {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  padding: 2px 4px;
  margin-left: 4px;
  transition: color .2s
}

#trial-banner .close:hover {
  color: #fff
}

/* ---------- 模态 ---------- */
#login-guide-canvas {
  position: fixed;
  inset: 0;
  z-index: 49;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease
}

body.login-guide-active #login-guide-canvas {
  opacity: 1
}

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle at 50% 48%, rgba(244, 210, 138, .07), transparent 34%), rgba(0, 0, 0, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden
}

.modal-mask.show {
  display: flex;
  opacity: 1;
  visibility: visible
}

.modal-mask::before {
  content: none
}

.modal {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 23, 26, 0.96), rgba(12, 11, 12, 0.92));
  border: 1px solid rgba(244, 210, 138, 0.16);
  border-radius: 18px;
  padding: 32px;
  max-width: 380px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .56), 0 0 0 1px rgba(255, 255, 255, .035), inset 0 1px 0 rgba(255, 255, 255, .07);
  will-change: opacity, transform, filter
}

.modal h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .5px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.95)
}

.modal .desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  line-height: 1.6
}

.dual-login-modal,
.dual-user-modal {
  width: min(470px, 92vw);
  max-width: min(470px, 92vw)
}

.dual-login-modal {
  width: fit-content;
  min-width: min(610px, calc(100vw - 44px));
  max-width: min(720px, calc(100vw - 44px));
  max-height: calc(100vh - 42px);
  padding: 24px 30px 26px;
  overflow: auto;
  text-align: left;
  scrollbar-width: thin;
  background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .09), transparent 28%), radial-gradient(circle at 78% 62%, rgba(var(--fc-accent-rgb), .055), transparent 38%), rgba(6, 7, 10, .34);
  border-color: rgba(255, 255, 255, .060);
  border-radius: 24px;
  box-shadow: 0 26px 84px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .060);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  transition: min-width .46s cubic-bezier(.16, 1, .3, 1), box-shadow .46s ease, background .46s ease
}

.login-easter-egg-gate {
  display: none
}

#login-modal.login-easter-egg-locked .dual-login-modal {
  width: min(560px, calc(100vw - 44px));
  min-width: min(560px, calc(100vw - 44px));
  min-height: min(520px, calc(100vh - 42px));
  overflow: hidden;
  background: radial-gradient(circle at 50% 37%, rgba(255, 255, 255, .07), transparent 28%), radial-gradient(circle at 76% 68%, rgba(var(--fc-accent-rgb), .055), transparent 34%), rgba(5, 6, 9, .48)
}

#login-modal.login-easter-egg-locked #login-node-graph,
#login-modal.login-easter-egg-locked #login-auth-drawer,
#login-modal.login-easter-egg-locked .login-reset-all-btn {
  display: none !important
}

#login-modal.login-easter-egg-locked .login-easter-egg-gate {
  position: relative;
  display: flex;
  min-height: 452px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px 28px 8px;
  text-align: center;
  isolation: isolate
}

html[data-sumusic="1"] #login-modal.login-easter-egg-locked #login-node-graph,
html[data-sumusic="1"] #login-modal.login-easter-egg-locked #login-auth-drawer,
html[data-sumusic="1"] #login-modal.login-easter-egg-locked .login-reset-all-btn {
  display: block !important;
}

html[data-sumusic="1"] #login-modal.login-easter-egg-locked .login-easter-egg-gate {
  display: none !important;
}

html[data-sumusic="1"] #login-workflow-svg,
html[data-sumusic="1"] #login-node-graph .flow-port,
html[data-sumusic="1"] #login-node-graph .login-provider-sort-handle {
  display: none !important;
}

.login-easter-egg-gate::before {
  content: '';
  position: absolute;
  inset: 46px 58px 34px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .035), transparent 64%);
  filter: blur(24px);
  opacity: .9;
  pointer-events: none
}

.login-easter-eye-trigger {
  position: relative;
  width: 174px;
  height: 174px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 52%, transparent 76%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 56px rgba(0, 0, 0, .3);
  cursor: pointer;
  outline: none;
  transition: width .9s cubic-bezier(.16, 1, .3, 1), height .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), opacity .55s ease, border-color .22s ease
}

.login-easter-eye-trigger::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), transparent 38%, rgba(255, 255, 255, .035)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none
}

.login-easter-eye-trigger:hover,
.login-easter-eye-trigger:focus-visible {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 26px 64px rgba(0, 0, 0, .34), 0 0 34px rgba(255, 255, 255, .04)
}

.login-easter-eye-trigger.tap-feedback {
  animation: login-easter-eye-tap .48s cubic-bezier(.36, .07, .19, .97)
}

@keyframes login-easter-eye-tap {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) }
  18% { transform: translate3d(-5px, 1px, 0) rotate(-2deg) }
  38% { transform: translate3d(6px, -1px, 0) rotate(2.4deg) }
  58% { transform: translate3d(-4px, 0, 0) rotate(-1.5deg) }
  78% { transform: translate3d(2px, 0, 0) rotate(.8deg) }
}

.login-easter-hint {
  min-height: 20px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .44);
  font-size: 11px;
  letter-spacing: .16em;
  transition: opacity .35s ease, transform .35s ease
}

.login-easter-egg-wish {
  position: absolute;
  left: 50%;
  top: 202px;
  width: min(390px, calc(100% - 58px));
  opacity: 0;
  filter: blur(18px);
  transform: translate(-50%, 24px) scale(.95);
  pointer-events: none;
  transition: opacity 1.35s ease, filter 1.5s cubic-bezier(.16, 1, .3, 1), transform 1.35s cubic-bezier(.16, 1, .3, 1)
}

.login-easter-egg-wish h1 {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .96);
  font-family: SimHei, 'Microsoft YaHei', sans-serif;
  font-size: clamp(42px, 6vw, 58px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
  text-shadow: 0 12px 38px rgba(0, 0, 0, .34)
}

.login-easter-egg-gate.is-revealed .login-easter-eye-trigger {
  width: 86px;
  height: 86px;
  transform: translateY(-146px) scale(.82);
  border-color: rgba(255, 255, 255, .06);
  opacity: .64
}

.login-easter-egg-gate.is-revealed .login-easter-eye-trigger .login-easter-eyes {
  transform: scale(.52)
}

.login-easter-egg-gate.is-revealed .login-easter-hint {
  opacity: 0;
  transform: translateY(-16px)
}

.login-easter-egg-gate.is-revealed .login-easter-egg-wish {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto
}

.login-easter-input-shell {
  position: relative;
  width: 100%
}

.login-easter-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  pointer-events: none
}

.login-easter-cell {
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 0, 0, .16);
  font-family: SimHei, 'Microsoft YaHei', sans-serif;
  font-size: 28px;
  font-weight: 800;
  transition: border-color .22s ease, background .22s ease, transform .22s ease, color .22s ease
}

.login-easter-cell.filled {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-2px)
}

.login-easter-cell.fixed {
  color: rgba(255, 226, 170, .96);
  border-color: rgba(244, 210, 138, .32);
  background: rgba(244, 210, 138, .07)
}

.login-easter-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 1;
  font-size: 24px;
  cursor: text;
  pointer-events: auto;
  touch-action: manipulation
}

.login-easter-status {
  min-height: 22px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .38);
  font-size: 11px;
  letter-spacing: .1em
}

.login-easter-status[data-mode='error'] { color: rgba(255, 153, 153, .82) }
.login-easter-status[data-mode='hint'] { color: rgba(255, 226, 170, .82) }
.login-easter-status[data-mode='success'] { color: rgba(185, 255, 221, .88) }

.login-easter-egg-wish.error-shake {
  animation: login-easter-error-shake .46s cubic-bezier(.36, .07, .19, .97)
}

@keyframes login-easter-error-shake {
  0%, 100% { margin-left: 0 }
  18% { margin-left: -8px }
  38% { margin-left: 7px }
  58% { margin-left: -5px }
  78% { margin-left: 3px }
}

#login-modal.login-easter-egg-unlocking .login-easter-egg-wish {
  opacity: 0;
  filter: blur(12px);
  transform: translate(-50%, -12px) scale(1.02)
}

#login-modal.login-easter-egg-unlocking .login-easter-eye-trigger {
  opacity: 0;
  transform: translateY(-146px) scale(.62)
}

.login-easter-unlock-cinematic {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  opacity: 1;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 2.2s cubic-bezier(.22, .61, .36, 1), opacity 1.2s ease
}

.login-easter-unlock-cinematic.is-mounted {
  display: grid;
  pointer-events: none
}

.login-easter-unlock-cinematic.is-extracting {
  background: rgba(0, 0, 0, .985)
}

.login-easter-unlock-cinematic.is-ready {
  pointer-events: auto
}

.login-easter-unlock-phrase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .06em;
  color: #fff;
  font-family: SimSun, SimHei, monospace;
  font-size: clamp(72px, 9.4vw, 132px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  filter: drop-shadow(6px 6px 0 #050505);
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
  transition: filter 1.1s ease, letter-spacing 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1)
}

.login-easter-unlock-phrase span {
  width: 1em;
  height: 1em;
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(var(--extract-x, 0), var(--extract-y, 0), 0) scale(.42);
  transform-origin: 50% 50%;
  transition: transform 1.35s cubic-bezier(.16, 1, .3, 1), opacity .44s ease, filter 1.05s ease;
  will-change: transform, opacity, filter
}

.login-easter-pixel-glyph {
  width: .92em;
  height: .92em;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(4px 0 0 #111) drop-shadow(-4px 0 0 #111) drop-shadow(0 4px 0 #111) drop-shadow(0 -4px 0 #111)
}

.login-easter-unlock-cinematic.is-positioned .login-easter-unlock-phrase span {
  opacity: 1
}

.login-easter-unlock-cinematic.is-extracting .login-easter-unlock-phrase span {
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1)
}

.login-easter-unlock-cinematic.is-extracting .login-easter-unlock-phrase span:nth-child(2) { transition-delay: .08s }
.login-easter-unlock-cinematic.is-extracting .login-easter-unlock-phrase span:nth-child(3) { transition-delay: .16s }
.login-easter-unlock-cinematic.is-extracting .login-easter-unlock-phrase span:nth-child(4) { transition-delay: .24s }

.login-easter-unlock-cinematic.is-ready .login-easter-unlock-phrase span {
  animation: login-easter-world-float var(--float-duration, 4s) var(--float-delay, 0s) ease-in-out infinite alternate;
  will-change: transform
}

@keyframes login-easter-world-float {
  0% { transform: translate3d(0, calc(0px - var(--float-distance, 10px)), 0) scale(.992) }
  48% { transform: translate3d(0, 2px, 0) scale(1.012) }
  100% { transform: translate3d(0, var(--float-distance, 10px), 0) scale(.998) }
}

.login-easter-unlock-cinematic.is-dismissing {
  opacity: 0;
  pointer-events: none
}

.login-easter-unlock-cinematic.is-dismissing .login-easter-unlock-phrase {
  filter: blur(10px) drop-shadow(0 0 34px rgba(255, 255, 255, .08));
  letter-spacing: .24em;
  transform: scale(1.08)
}

.login-easter-achievement {
  position: fixed;
  z-index: 100010;
  top: 34px;
  right: 38px;
  width: min(326px, calc(100vw - 76px));
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 9px;
  border: 3px solid #070707;
  border-radius: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px), linear-gradient(90deg, #1b1b1b, #101010 72%, #181818);
  box-shadow: 0 0 0 2px #b7b7b7, 0 0 0 4px #303030, 0 0 0 6px #050505, inset 0 0 0 2px #2e2e2e, inset 0 0 0 4px #090909, 6px 7px 0 rgba(0, 0, 0, .4), 0 16px 28px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(calc(100% + 46px), 0, 0) scale(.97);
  transition: transform .68s cubic-bezier(.16, 1, .3, 1), opacity .34s ease, visibility 0s linear .7s;
  pointer-events: none;
  image-rendering: pixelated
}

.login-easter-achievement::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .05), inset -2px -2px 0 rgba(0, 0, 0, .72);
  pointer-events: none
}

.login-easter-achievement.show {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s
}

.login-easter-achievement-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid #050505;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 4px, transparent 4px 8px), #121212;
  box-shadow: 0 0 0 2px #9d9d9d, 0 0 0 3px #151515, inset 0 0 0 2px #292929, 2px 2px 0 #000;
  image-rendering: pixelated
}

.login-easter-achievement-pixel-eyes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 31px;
  height: 24px;
  filter: drop-shadow(2px 2px 0 #000)
}

.login-easter-achievement-pixel-eye {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  image-rendering: pixelated
}

.login-easter-achievement-pixel-eye.pixel-eye-big {
  width: 14px;
  height: 19px;
  background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#cfcfcf 0 0);
  background-size: 8px 3px, 14px 13px, 8px 3px, 3px 3px;
  background-position: 3px 0, 0 3px, 3px 16px, 0 13px
}

.login-easter-achievement-pixel-eye.pixel-eye-small {
  width: 10px;
  height: 15px;
  margin-top: 4px;
  background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#cfcfcf 0 0);
  background-size: 6px 3px, 10px 9px, 6px 3px, 3px 3px;
  background-position: 2px 0, 0 3px, 2px 12px, 0 9px
}

.login-easter-achievement-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 3px 3px 0 #000;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision
}

.login-easter-achievement-copy small {
  color: #ffd85a;
  font-family: SimSun, 'Microsoft YaHei', monospace;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em
}

.login-easter-achievement-copy b {
  overflow: hidden;
  color: #fff;
  font-family: SimSun, SimHei, 'Microsoft YaHei', monospace;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media (max-width: 620px), (max-height: 620px) {
  #login-modal.login-easter-egg-locked .dual-login-modal {
    min-height: min(460px, calc(100vh - 24px))
  }
  #login-modal.login-easter-egg-locked .login-easter-egg-gate { min-height: 400px }
  .login-easter-eye-trigger { width: 144px; height: 144px }
  .login-easter-egg-wish { top: 172px }
  .login-easter-cell { height: 56px; border-radius: 17px; font-size: 24px }
  .login-easter-achievement { top: 22px; right: 22px; width: min(326px, calc(100vw - 44px)) }
}

@media (prefers-reduced-motion: reduce) {
  .login-easter-eye-trigger,
  .login-easter-egg-wish,
  .login-easter-hint { transition-duration: .01ms !important }
  .login-easter-eye-trigger.tap-feedback,
  .login-easter-egg-wish.error-shake,
  .login-easter-unlock-cinematic.is-ready .login-easter-unlock-phrase span { animation-duration: .01ms !important }
  .login-easter-unlock-cinematic,
  .login-easter-unlock-phrase,
  .login-easter-unlock-phrase span,
  .login-easter-achievement { transition-duration: .01ms !important }
}

.audio-output-workflow-modal {
  width: min(1080px, calc(100vw - 44px));
  max-width: min(1080px, calc(100vw - 44px));
  max-height: calc(100vh - 42px);
  padding: 24px 28px 24px;
  overflow: auto;
  text-align: left;
  scrollbar-width: thin;
  background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .09), transparent 28%), radial-gradient(circle at 78% 62%, rgba(var(--fc-accent-rgb), .055), transparent 38%), rgba(6, 7, 10, .34);
  border-color: rgba(255, 255, 255, .060);
  border-radius: 24px;
  box-shadow: 0 26px 84px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .060);
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18)
}

.audio-output-workflow-title {
  display: grid;
  gap: 4px;
  margin: 0 40px 18px 2px
}

.audio-output-workflow-title b {
  font-size: 16px;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .06em
}

.audio-output-workflow-title small {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42)
}

.audio-output-workflow-body {
  position: relative;
  min-height: 430px
}

.audio-output-workflow-modal .audio-route-graph {
  min-height: 430px;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-areas: "source board" "status board";
  align-items: stretch;
  gap: 14px 28px;
  padding: 20px 20px 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .026)
}

.audio-output-workflow-modal .audio-flow-source {
  grid-area: source;
  align-self: end
}

.audio-output-workflow-modal .audio-route-status {
  grid-area: status;
  align-self: start
}

.audio-output-workflow-modal .audio-route-board {
  grid-area: board;
  align-self: stretch;
  min-height: 100%
}

.audio-output-workflow-modal .audio-route-lanes {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px
}

.audio-output-workflow-modal .route-node-grid {
  max-height: min(136px, calc(100vh - 390px));
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain
}

.audio-output-workflow-modal .route-lane.bridge .route-node-grid {
  max-height: none
}

.audio-output-workflow-actions {
  margin-top: 16px
}

@media (max-width: 760px) {
  .audio-output-workflow-modal .audio-route-graph {
    grid-template-columns: 1fr;
    grid-template-areas: "source" "status" "board";
    min-height: 0
  }

  .audio-route-board-head {
    grid-template-columns: 1fr
  }

  .route-board-badges {
    justify-content: flex-start
  }

  .audio-output-workflow-modal .audio-route-lanes {
    grid-template-columns: 1fr
  }

  .route-lane {
    grid-template-columns: 1fr
  }

  .route-lane-head {
    border-right: 0;
    padding-right: 0
  }

  .route-lane .audio-route-note {
    grid-column: 1 / -1
  }

  .audio-output-workflow-modal .workflow-link-layer,
  .audio-output-workflow-modal .flow-port {
    display: none
  }

  .audio-output-workflow-body {
    min-height: 0
  }
}

.login-panel-head {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0
}

.login-panel-head > div {
  display: none
}

.login-panel-head b {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .08em
}

.login-panel-head small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, .36)
}

.login-panel-close {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .085);
  background: rgba(255, 255, 255, .040);
  color: rgba(255, 255, 255, .58);
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease
}

.login-panel-close:hover {
  background: rgba(255, 255, 255, .095);
  color: #fff;
  transform: translateY(-1px)
}

.login-reset-all-btn {
  min-width: 78px;
  height: 29px;
  padding: 0 11px;
  border: 1px solid rgba(255, 118, 118, .24);
  border-radius: 9px;
  background: rgba(92, 25, 31, .28);
  color: rgba(255, 226, 226, .78);
  font: 700 11px/1 'Microsoft YaHei', sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease
}

.login-reset-all-btn:hover:not(:disabled),
.login-reset-all-btn:focus-visible {
  border-color: rgba(255, 145, 145, .5);
  background: rgba(128, 34, 42, .48);
  color: #fff;
  transform: translateY(-1px)
}

.login-reset-all-btn:disabled {
  opacity: .56;
  cursor: wait
}

.login-node-graph {
  position: relative;
  display: grid;
  width: max-content;
  max-width: 100%;
  grid-template-columns: 248px 168px;
  grid-template-areas: "providers hub";
  gap: 112px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 10px 4px 4px;
  border-radius: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: translateY(0);
  transition: transform .58s cubic-bezier(.18, .86, .24, 1), filter .34s ease
}

.dual-login-modal.login-details-open .login-node-graph {
  transform: translateY(-4px)
}

.login-node-graph::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: calc(50% + 8px);
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16) 18%, rgba(var(--fc-accent-rgb), .30) 50%, rgba(255, 255, 255, .12) 82%, transparent);
  box-shadow: 0 0 24px rgba(var(--fc-accent-rgb), .18);
  opacity: .58;
  pointer-events: none;
  z-index: 0
}

.login-node-graph > *:not(.workflow-link-layer) {
  position: relative;
  z-index: 1
}

.login-node-rail {
  display: none
}

.login-node-hub,
.login-mode-node,
.login-node-providers button {
  position: relative;
  min-width: 0;
  display: grid;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .028);
  color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: visible
}

.login-node-hub {
  grid-area: hub;
  grid-template-columns: 37px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 9px 10px;
  min-height: 128px;
  padding: 13px;
  text-align: left;
  align-content: center;
  border-color: rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018) 58%, rgba(var(--fc-accent-rgb), .030));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18), 0 0 22px rgba(var(--fc-accent-rgb), .035), inset 0 1px 0 rgba(255, 255, 255, .065)
}

.login-node-copy {
  min-width: 0;
  align-self: center
}

.login-node-orb,
.provider-logo {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(var(--fc-accent-rgb), .14);
  box-shadow: 0 0 14px rgba(var(--fc-accent-rgb), .13), inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.login-node-hub b,
.login-mode-node b,
.login-node-providers button b {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .92)
}

.login-node-hub small,
.login-mode-node small,
.login-node-providers button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .42)
}

.login-node-providers.login-platform-tabs {
  grid-area: providers;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent
}

.login-node-providers.login-platform-tabs button {
  height: auto;
  min-height: 46px;
  grid-template-columns: 18px 35px minmax(0, 1fr) auto 56px;
  grid-template-rows: auto;
  justify-items: start;
  align-content: center;
  gap: 0 8px;
  padding: 7px 14px 7px 5px;
  border-radius: 13px;
  border-color: rgba(255, 255, 255, .050);
  background: linear-gradient(90deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  cursor: pointer;
  letter-spacing: 0;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease
}

.login-node-graph.dragging-line .login-node-providers.login-platform-tabs button,
.login-node-graph.sorting-provider .login-node-providers.login-platform-tabs button.sorting {
  cursor: grabbing
}

.login-provider-sort-handle {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 32px;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  cursor: grab;
  touch-action: none;
  opacity: .58;
  background: rgba(255, 255, 255, .026);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
  transition: opacity .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease
}

.login-provider-sort-handle i {
  width: 8px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 0 6px rgba(255, 255, 255, .10)
}

.login-provider-sort-handle:hover,
.login-node-providers.login-platform-tabs button.sorting .login-provider-sort-handle {
  opacity: 1;
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 12px rgba(var(--fc-accent-rgb), .13);
  transform: translateY(-1px)
}

.login-node-graph.sorting-provider .login-node-providers.login-platform-tabs button:not(.sorting) {
  opacity: .72
}

.login-node-providers.login-platform-tabs button .provider-logo {
  grid-row: auto
}

.login-node-providers.login-platform-tabs button small {
  display: none
}

.login-node-providers.login-platform-tabs button::after,
.login-mode-node::after {
  content: none
}

.login-node-providers.login-platform-tabs button::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: background .18s ease, box-shadow .18s ease
}

.login-node-providers.login-platform-tabs button:hover,
.login-mode-node:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .050)
}

.login-node-providers.login-platform-tabs button.active,
.login-mode-node.active {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, rgba(255, 255, 255, .065), rgba(var(--fc-accent-rgb), .035));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .075)
}

.login-node-providers.login-platform-tabs button.active::before,
.login-node-providers.login-platform-tabs button.connected::before {
  background: rgba(var(--fc-accent-rgb), .86);
  box-shadow: 0 0 12px rgba(var(--fc-accent-rgb), .45)
}

.login-node-providers.login-platform-tabs button.connected {
  border-color: rgba(244, 210, 138, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 0 0 1px rgba(244, 210, 138, .035)
}

.login-node-providers.login-platform-tabs button.external-on {
  border-color: rgba(244, 210, 138, .34);
  background: linear-gradient(135deg, rgba(244, 210, 138, .09), rgba(255, 255, 255, .030));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14), 0 0 0 1px rgba(244, 210, 138, .04), inset 0 1px 0 rgba(255, 255, 255, .075)
}

.login-node-providers.login-platform-tabs button.pending {
  border-color: rgba(244, 210, 138, .26);
  background: linear-gradient(135deg, rgba(244, 210, 138, .09), rgba(255, 255, 255, .024))
}

.login-node-providers.login-platform-tabs button.sorting {
  transform: translateY(-1px) scale(1.01)
}

.login-node-providers.login-platform-tabs button.provider-reorder-moving,
.top-account-pill.provider-reorder-moving {
  pointer-events: none;
  will-change: transform
}

.provider-logo.has-avatar {
  overflow: hidden;
  background: rgba(255, 255, 255, .070)
}

.provider-logo.has-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit
}

.login-provider-state-badge {
  grid-column: 4;
  justify-self: end;
  align-self: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 0;
  background: linear-gradient(135deg, #fff3c2, var(--champagne), #c9963d);
  color: #201303;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(244, 210, 138, .18);
  pointer-events: none
}

.login-provider-state-badge.svip {
  background: linear-gradient(135deg, #fff8d8, #f4d28a 46%, #e0a13b 100%);
  color: #1e1203;
  box-shadow: 0 0 12px rgba(244, 210, 138, .26)
}

.login-provider-state-badge.normal,
.login-provider-state-badge.none {
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 8px rgba(255, 255, 255, .04)
}

.login-provider-state-badge.hidden {
  display: none
}

.login-provider-external-switch {
  grid-column: 5;
  justify-self: end;
  align-self: center;
  position: relative;
  width: 56px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .030);
  opacity: .72;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: opacity .18s ease, border-color .20s ease, background .20s ease, box-shadow .20s ease, transform .20s ease
}

.login-provider-external-label {
  position: absolute;
  left: 18px;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .66);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .38);
  transition: left .22s cubic-bezier(.18, .86, .24, 1), right .22s cubic-bezier(.18, .86, .24, 1), color .20s ease
}

.login-provider-external-switch i {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .34);
  transform: translateY(-50%);
  transition: left .22s cubic-bezier(.18, .86, .24, 1), background .20s ease, box-shadow .20s ease
}

.login-node-providers.login-platform-tabs button.external-on .login-provider-external-switch {
  opacity: 1;
  border-color: rgba(244, 210, 138, .46);
  background: linear-gradient(135deg, rgba(244, 210, 138, .28), rgba(var(--fc-accent-rgb), .12));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .32), 0 0 16px rgba(244, 210, 138, .18), inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.login-node-providers.login-platform-tabs button.external-on .login-provider-external-switch i {
  left: 38px;
  background: #fff4cf;
  box-shadow: 0 0 10px rgba(244, 210, 138, .58), 0 1px 4px rgba(0, 0, 0, .32)
}

.login-node-providers.login-platform-tabs button.external-on .login-provider-external-label {
  left: 6px;
  right: 18px;
  color: rgba(255, 244, 207, .92)
}

.login-node-providers.login-platform-tabs button:hover .login-provider-external-switch,
.login-provider-external-switch:hover,
.login-provider-external-switch:focus-visible {
  opacity: .92;
  transform: translateY(-1px);
  outline: none
}

.login-node-graph .flow-port {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  opacity: .86
}

.login-node-graph .workflow-node:hover .flow-port,
.login-node-graph.dragging-line .flow-port,
.login-node-graph .workflow-node.connected .flow-port,
.login-node-graph .workflow-node.active .flow-port {
  border-color: transparent;
  background: transparent;
  box-shadow: none
}

.login-node-graph.dragging-line .flow-port {
  cursor: grabbing
}

.login-node-graph .flow-port::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .44);
  background: rgba(8, 10, 14, .80);
  box-shadow: 0 0 0 4px rgba(var(--fc-accent-rgb), .060), 0 0 14px rgba(var(--fc-accent-rgb), .24), inset 0 0 0 1px rgba(var(--fc-accent-rgb), .26);
  transform: translate(-50%, -50%);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease
}

.login-node-graph .flow-port::after {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 10px rgba(255, 255, 255, .36)
}

.login-node-graph .flow-port.in {
  left: -24px
}

.login-node-graph .flow-port.out {
  right: -24px
}

.login-node-graph .workflow-node:hover .flow-port::before,
.login-node-graph.dragging-line .flow-port::before,
.login-node-graph.drop-ready .login-node-hub .flow-port::before {
  border-color: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 8px rgba(var(--fc-accent-rgb), .075), 0 0 22px rgba(var(--fc-accent-rgb), .36), inset 0 0 0 1px rgba(var(--fc-accent-rgb), .44);
  transform: translate(-50%, -50%) scale(1.06)
}

.login-node-providers.login-platform-tabs button.active::after,
.login-node-providers.login-platform-tabs button.connected::after,
.login-mode-node.active::after {
  content: none
}

.login-mode-nodes {
  grid-column: 1 / -1;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding-top: 6px
}

.login-mode-node {
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  min-height: 32px;
  padding: 4px 9px 4px 5px;
  border-radius: 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer
}

.login-mode-node .provider-logo {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 9px
}

.login-mode-node small {
  display: none
}

@media (max-width: 720px) {
  .dual-login-modal {
    width: min(430px, calc(100vw - 28px));
    min-width: 0;
    padding: 14px
  }

  .login-node-graph {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "providers"
      "hub";
    width: 100%;
    gap: 14px;
    padding: 0
  }

  .login-node-graph::before {
    display: none
  }

  .login-node-hub {
    min-height: 104px
  }
}

.login-mode-node:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none
}

.login-auth-drawer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 14px;
  align-items: center;
  margin-top: 0;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px) scale(.985);
  transform-origin: 50% 0%;
  filter: blur(8px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, 0);
  background: linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .014));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition:
    max-height .68s cubic-bezier(.18, .88, .22, 1),
    margin-top .58s cubic-bezier(.18, .88, .22, 1),
    padding .58s cubic-bezier(.18, .88, .22, 1),
    opacity .34s ease .10s,
    transform .58s cubic-bezier(.18, .88, .22, 1),
    filter .42s ease,
    border-color .38s ease,
    visibility 0s linear .68s
}

.login-auth-drawer.show {
  max-height: 420px;
  margin-top: 18px;
  padding: 14px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
  border-color: rgba(255, 255, 255, .075);
  transition:
    max-height .72s cubic-bezier(.12, .72, .16, 1),
    margin-top .62s cubic-bezier(.12, .72, .16, 1),
    padding .62s cubic-bezier(.12, .72, .16, 1),
    opacity .32s ease .12s,
    transform .62s cubic-bezier(.12, .72, .16, 1),
    filter .42s ease .08s,
    border-color .38s ease .10s,
    visibility 0s linear 0s
}

.login-auth-copy h2 {
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.25
}

.login-auth-copy .desc {
  margin: 0 0 8px;
  font-size: 11px
}

.login-auth-copy #qr-status {
  min-height: 22px;
  margin: 0;
  font-size: 11px;
  color: rgba(244, 210, 138, .70);
  text-align: left
}

.login-auth-body {
  display: grid;
  justify-items: center;
  gap: 8px
}

.login-auth-drawer .qr-shell {
  width: 156px;
  height: 156px;
  margin: 0;
  border-radius: 12px
}

.login-auth-drawer #qr-img {
  width: 156px;
  height: 156px;
  margin: 0;
  border-radius: 10px
}

.login-auth-drawer .qq-cookie-panel.show {
  width: 100%;
  margin: 0
}

.login-auth-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin: 0;
  gap: 8px
}

.login-node-graph.connecting .login-node-hub,
.login-node-graph.connecting .login-node-providers button.active,
.login-node-graph.connecting .login-mode-node.active {
  animation: loginNodeBreathe .72s ease-in-out 2
}

@keyframes loginNodeBreathe {
  0%, 100% { filter: brightness(1); transform: translateY(0) }
  50% { filter: brightness(1.18); transform: translateY(-1px) }
}

.login-intro {
  margin: -6px 0 16px;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(135deg, rgba(255, 83, 103, .09), rgba(244, 210, 138, .055), rgba(255, 255, 255, .025));
  text-align: left
}

.login-intro-kicker {
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .18em;
  color: rgba(244, 210, 138, .72);
  text-transform: uppercase;
  margin-bottom: 6px
}

.login-intro-title {
  font-size: 18px;
  font-weight: 760;
  line-height: 1.18;
  color: rgba(255, 255, 255, .95);
  letter-spacing: 0;
  margin-bottom: 6px
}

.login-intro-body {
  font-size: 12px;
  line-height: 1.58;
  color: rgba(255, 255, 255, .56)
}

.login-platform-tabs,
.user-platform-tabs {
  display: flex;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035)
}

.login-platform-tabs button,
.user-platform-tabs button {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .48);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .45px;
  cursor: pointer;
  transition: background .22s, color .22s, box-shadow .22s, transform .22s;
  white-space: nowrap
}

.login-platform-tabs button:hover,
.user-platform-tabs button:hover {
  color: rgba(255, 255, 255, .82)
}

.login-platform-tabs button.active,
.user-platform-tabs button.active {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .20)
}

.login-platform-tabs button.netease.active,
.user-platform-tabs button.netease.active {
  background: rgba(217, 91, 103, .16);
  color: #ffd7dc
}

.login-platform-tabs button.qq.active,
.user-platform-tabs button.qq.active {
  background: rgba(191, 214, 107, .16);
  color: #f3ffd1
}

.login-platform-tabs button.kugou.active,
.user-platform-tabs button.kugou.active {
  background: rgba(86, 224, 255, .14);
  color: #c9f5ff
}

.login-platform-tabs button.qishui.active,
.user-platform-tabs button.qishui.active {
  background: rgba(69, 214, 143, .14);
  color: #d7ffe5
}

.login-platform-tabs button.spotify.active,
.user-platform-tabs button.spotify.active {
  background: rgba(30, 215, 96, .14);
  color: #d8ffe2
}

.login-node-providers.login-platform-tabs button.netease.active,
.login-node-providers.login-platform-tabs button.qq.active,
.login-node-providers.login-platform-tabs button.kugou.active,
.login-node-providers.login-platform-tabs button.qishui.active,
.login-node-providers.login-platform-tabs button.spotify.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .064), rgba(var(--fc-accent-rgb), .026));
  color: rgba(255, 255, 255, .95)
}

.login-node-providers.login-platform-tabs button.external-on,
.login-node-providers.login-platform-tabs button.external-on.active {
  border-color: rgba(244, 210, 138, .38);
  background: linear-gradient(135deg, rgba(244, 210, 138, .115), rgba(255, 255, 255, .035));
  color: #fff7df;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .16), 0 0 0 1px rgba(244, 210, 138, .045), inset 0 1px 0 rgba(255, 255, 255, .085)
}

.user-platform-tabs button.both.active {
  background: rgba(244, 210, 138, .14);
  color: #fff0bf
}

.qr-shell {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  border-radius: 16px
}

#qr-img {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: block;
  padding: 10px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .32), 0 0 0 1px rgba(244, 210, 138, .18)
}

.qr-shell #qr-img {
  margin: 0
}

.qr-shell.web-login-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(191, 214, 107, .22), transparent 46%), rgba(255, 255, 255, .035);
  border: 1px solid rgba(191, 214, 107, .26);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.qr-shell.web-login-preview.netease-preview {
  background: radial-gradient(circle at 50% 42%, rgba(217, 91, 103, .22), transparent 46%), rgba(255, 255, 255, .035);
  border-color: rgba(217, 91, 103, .28)
}

.qr-shell.web-login-preview #qr-img {
  display: none
}

.qq-login-mark {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(191, 214, 107, .30);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: rgba(243, 255, 209, .88);
  background: linear-gradient(135deg, rgba(191, 214, 107, .10), rgba(157, 184, 207, .05));
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s
}

.qr-shell.web-login-preview .qq-login-mark {
  display: flex
}

.qq-login-mark:hover {
  transform: translateY(-1px);
  border-color: rgba(191, 214, 107, .54);
  background: linear-gradient(135deg, rgba(191, 214, 107, .16), rgba(157, 184, 207, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 16px 38px rgba(0, 0, 0, .22)
}

.qr-shell.netease-preview .qq-login-mark {
  border-color: rgba(217, 91, 103, .34);
  color: #ffd7dc;
  background: linear-gradient(135deg, rgba(217, 91, 103, .10), rgba(244, 210, 138, .05))
}

.qr-shell.netease-preview .qq-login-mark:hover {
  border-color: rgba(217, 91, 103, .58);
  background: linear-gradient(135deg, rgba(217, 91, 103, .16), rgba(244, 210, 138, .08))
}

.qq-login-mark:disabled {
  opacity: .66;
  cursor: wait;
  transform: none
}

.qq-login-mark b {
  font-size: 22px;
  letter-spacing: .08em
}

.qq-login-mark span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .46);
  letter-spacing: .5px
}

.qq-cookie-panel {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(191, 214, 107, .18);
  background: rgba(255, 255, 255, .035)
}

.qq-cookie-panel.show {
  display: block
}

.qq-cookie-input {
  width: 100%;
  height: 74px;
  resize: none;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .82);
  padding: 10px 11px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.45;
  outline: none
}

.qq-cookie-input:focus {
  border-color: rgba(191, 214, 107, .42);
  box-shadow: 0 0 0 1px rgba(191, 214, 107, .10)
}

.qq-cookie-panel.spotify-guide-panel .qq-cookie-input {
  height: 46px
}

.qq-cookie-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px
}

.qq-cookie-panel.spotify-guide-panel .qq-cookie-actions {
  align-items: flex-end;
  flex-wrap: wrap
}

.qq-cookie-note {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .36);
  line-height: 1.45;
  text-align: left
}

.qq-cookie-panel.spotify-guide-panel .qq-cookie-note {
  flex: 1 1 250px
}

.spotify-guide-title {
  margin-bottom: 5px;
  color: rgba(30, 215, 96, .82);
  font-size: 11px;
  font-weight: 700
}

.spotify-guide-steps {
  display: grid;
  gap: 3px
}

.spotify-guide-steps code {
  color: rgba(255, 255, 255, .78);
  font-family: inherit
}

.spotify-guide-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px
}

.spotify-guide-link {
  border: 1px solid rgba(30, 215, 96, .26);
  border-radius: 8px;
  background: rgba(30, 215, 96, .08);
  color: rgba(232, 255, 238, .82);
  padding: 5px 8px;
  font-size: 10.5px;
  line-height: 1;
  cursor: pointer
}

.spotify-guide-link:hover {
  border-color: rgba(30, 215, 96, .48);
  color: #fff
}

.qq-cookie-panel .modal-btn {
  padding: 8px 12px;
  white-space: nowrap
}

#qq-cookie-toggle-btn {
  display: none;
  padding: 8px 13px
}

#qq-cookie-toggle-btn.show {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

#qr-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  min-height: 18px;
  margin-bottom: 14px;
  letter-spacing: .3px
}

#qr-status.scan {
  color: #7ee2a8
}

#qr-status.fail {
  color: #f08080
}

#qr-status.preview {
  color: rgba(191, 214, 107, .86)
}

.account-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  font-size: 10.5px;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .58)
}

.account-provider-chip.netease {
  border-color: rgba(217, 91, 103, .26);
  color: #ffd7dc;
  background: rgba(217, 91, 103, .08)
}

.account-provider-chip.qq {
  border-color: rgba(191, 214, 107, .26);
  color: #f3ffd1;
  background: rgba(191, 214, 107, .08)
}

.account-provider-chip.kugou {
  border-color: rgba(86, 224, 255, .26);
  color: #c9f5ff;
  background: rgba(86, 224, 255, .08)
}

.account-provider-chip.qishui {
  border-color: rgba(69, 214, 143, .26);
  color: #d7ffe5;
  background: rgba(69, 214, 143, .08)
}

.account-provider-chip.spotify {
  border-color: rgba(30, 215, 96, .26);
  color: #d8ffe2;
  background: rgba(30, 215, 96, .08)
}

.account-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px
}

.account-modal-actions .modal-btn {
  padding: 8px 10px
}

.account-hint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .38)
}

.modal .btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px
}

.dual-login-modal .btn-row {
  flex-wrap: wrap
}

.modal-btn {
  padding: 8px 20px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  letter-spacing: .5px;
  transition: all .2s;
  font-family: inherit
}

.modal-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3)
}

.modal-btn.primary {
  background: rgba(244, 210, 138, 0.14);
  border-color: rgba(244, 210, 138, 0.50);
  color: var(--champagne)
}

.modal-btn.primary:hover {
  background: rgba(244, 210, 138, 0.24)
}

.cover-crop-modal {
  width: min(720px, 92vw);
  max-width: min(720px, 92vw);
  padding: 28px;
  text-align: left
}

.cover-crop-modal h2 {
  text-align: center;
  margin-bottom: 22px
}

.cover-crop-layout {
  display: grid;
  grid-template-columns: minmax(260px, 312px) 1fr;
  gap: 24px;
  align-items: center
}

.cover-crop-stage {
  position: relative;
  width: min(312px, 72vw);
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 16px;
  background: #07070a;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .44), inset 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: grab;
  touch-action: none
}

.cover-crop-stage.dragging {
  cursor: grabbing
}

.cover-crop-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
  will-change: transform
}

.cover-crop-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 33.333% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 66.666% 0/1px 100% no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 0 33.333%/100% 1px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 0 66.666%/100% 1px no-repeat
}

.cover-crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px rgba(244, 210, 138, .52), inset 0 0 42px rgba(244, 210, 138, .08)
}

.cover-crop-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px
}

#cover-crop-preview {
  width: 124px;
  height: 124px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34), 0 0 0 1px rgba(244, 210, 138, .20)
}

.cover-zoom-control {
  width: min(240px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  letter-spacing: .3px
}

.cover-zoom-control input {
  flex: 1;
  accent-color: #f4d28a
}

.cover-crop-modal .btn-row {
  margin-top: 24px
}

.background-crop-modal {
  width: min(820px, 92vw);
  max-width: min(820px, 92vw)
}

.background-crop-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  gap: 24px;
  align-items: center
}

.background-crop-stage {
  position: relative;
  width: min(520px, 58vw);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 16px;
  background: #07070a;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .44), inset 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: grab;
  touch-action: none
}

.background-crop-stage.dragging {
  cursor: grabbing
}

.background-crop-stage img,
.background-crop-stage video,
.background-crop-preview img,
.background-crop-preview video {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: var(--bg-crop-modal-x, 50%) var(--bg-crop-modal-y, 50%);
  transform: scale(calc(1.002 * var(--bg-crop-modal-zoom, 1)));
  transform-origin: var(--bg-crop-modal-x, 50%) var(--bg-crop-modal-y, 50%);
  user-select: none;
  pointer-events: none;
  display: none
}

.background-crop-stage.media-image img,
.background-crop-preview.media-image img,
.background-crop-stage.media-video video,
.background-crop-preview.media-video video {
  display: block
}

.background-crop-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 33.333% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 66.666% 0/1px 100% no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 0 33.333%/100% 1px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) 0 66.666%/100% 1px no-repeat
}

.background-crop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px rgba(244, 210, 138, .48), inset 0 0 42px rgba(244, 210, 138, .08)
}

.background-crop-preview {
  width: 160px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34), 0 0 0 1px rgba(244, 210, 138, .20)
}

.background-crop-note {
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  text-align: center
}

@media (max-width: 680px) {
  .cover-crop-modal {
    padding: 24px
  }

  .cover-crop-layout,
  .background-crop-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px
  }

  .background-crop-stage {
    width: min(520px, 78vw)
  }

  .cover-crop-side {
    width: 100%
  }
}

.collect-modal {
  width: min(430px, 90vw);
  max-width: min(430px, 90vw);
  padding: 28px;
  text-align: left
}

.collect-modal h2 {
  text-align: center;
  margin-bottom: 18px
}

.collect-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  margin-bottom: 14px
}

.collect-current img,
.collect-current .cover-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, .07);
  flex-shrink: 0
}

.collect-title {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.collect-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.collect-create {
  display: flex;
  gap: 8px;
  margin-bottom: 12px
}

.collect-create input {
  flex: 1;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: #fff;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12px;
  outline: none
}

.collect-create input:focus {
  border-color: rgba(244, 210, 138, .42);
  background: rgba(244, 210, 138, .055)
}

.collect-create button {
  width: auto;
  min-width: 62px;
  height: 32px;
  padding: 0 12px
}

.collect-list {
  max-height: min(300px, 45vh);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 2px
}

.collect-list::-webkit-scrollbar {
  width: 3px
}

.collect-list::-webkit-scrollbar-thumb {
  background: rgba(244, 210, 138, .24);
  border-radius: 3px
}

.collect-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .032);
  cursor: pointer;
  transition: all .18s
}

.collect-item:hover {
  background: rgba(244, 210, 138, .10);
  border-color: rgba(244, 210, 138, .24);
  transform: translateY(-1px)
}

.collect-item.busy {
  opacity: .58;
  pointer-events: none
}

.collect-item img,
.collect-item .cover-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, .07);
  flex-shrink: 0
}

.collect-empty {
  padding: 18px 8px;
  text-align: center;
  color: rgba(255, 255, 255, .38);
  font-size: 11.5px
}

.track-detail-modal {
  width: min(700px, 92vw);
  max-width: min(700px, 92vw);
  max-height: min(780px, calc(100vh - 88px));
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: linear-gradient(145deg, rgba(31, 32, 35, .94), rgba(13, 14, 17, .94));
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58), 0 0 0 1px rgba(var(--fc-accent-rgb), .05), inset 0 1px 0 rgba(255, 255, 255, .10)
}

.track-detail-modal h2 {
  text-align: center;
  margin-bottom: 16px
}

#track-detail-body {
  min-height: 0;
  overflow: auto;
  padding-right: 0;
  overscroll-behavior: contain
}

#track-detail-body {
  scrollbar-width: none;
  -ms-overflow-style: none
}

#track-detail-body::-webkit-scrollbar {
  width: 0;
  height: 0
}

.track-detail-modal::-webkit-scrollbar,
.track-detail-modal *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important
}

.track-detail-modal * {
  scrollbar-width: none;
  -ms-overflow-style: none
}

.detail-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .032));
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
}

.detail-cover {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255, 255, 255, .07);
  flex-shrink: 0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34)
}

.detail-artist-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 44%, rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .74);
  font-size: 20px;
  font-weight: 800
}

.detail-title {
  font-size: 18px;
  font-weight: 760;
  color: rgba(255, 255, 255, .96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.detail-sub {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.detail-grid {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 12px
}

.detail-k {
  color: rgba(255, 255, 255, .38)
}

.detail-v {
  color: rgba(255, 255, 255, .78);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

.detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px
}

.detail-chip {
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fc-accent-rgb), .20);
  background: rgba(var(--fc-accent-rgb), .065);
  color: rgba(255, 255, 255, .80);
  font-size: 10.5px;
  display: flex;
  align-items: center
}

.detail-section {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 14px
}

.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.detail-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto
}

.detail-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .64)
}

.detail-action-toggle {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .74);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s
}

.detail-action-toggle:hover,
.detail-action-toggle.on {
  border-color: rgba(var(--fc-accent-rgb), .46);
  background: rgba(var(--fc-accent-rgb), .16);
  color: #fff;
  transform: translateY(-1px)
}

.detail-loading,
.detail-empty {
  padding: 14px 4px;
  text-align: center;
  color: rgba(255, 255, 255, .34);
  font-size: 11.5px
}

.detail-comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 10px
}

.detail-comment-compose input {
  min-width: 0;
  height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  outline: none;
  background: rgba(0, 0, 0, .24);
  color: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 12px;
  transition: border-color .18s, background .18s
}

.detail-comment-compose input:focus {
  border-color: rgba(var(--fc-accent-rgb), .42);
  background: rgba(0, 0, 0, .34)
}

.detail-comment-compose button {
  min-width: 66px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(var(--fc-accent-rgb), .34);
  border-radius: 12px;
  background: rgba(var(--fc-accent-rgb), .14);
  color: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer
}

.detail-comment-compose button:disabled {
  opacity: .48;
  cursor: wait
}

.detail-scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.detail-scroll::-webkit-scrollbar {
  width: 0;
  height: 0
}

.comment-item,
.artist-song-item {
  display: flex;
  gap: 11px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .045);
  margin-bottom: 7px
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .07);
  flex-shrink: 0
}

.comment-main,
.artist-song-main {
  min-width: 0;
  flex: 1
}

.comment-meta,
.artist-song-meta {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.comment-text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .76);
  word-break: break-word
}

.artist-song-item {
  align-items: center;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s
}

.artist-song-item:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(244, 210, 138, .25);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .20)
}

.artist-song-rank {
  width: 26px;
  color: rgba(244, 210, 138, .62);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center
}

.artist-song-cover {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
}

.artist-song-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.artist-song-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto
}

.artist-song-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(5, 6, 8, .58);
  color: rgba(255, 255, 255, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s, border-color .18s, color .18s, box-shadow .18s
}

.artist-song-action svg {
  width: 19px;
  height: 19px;
  display: block;
  stroke: currentColor
}

.artist-song-action.collect {
  color: #ff2430;
  border-color: rgba(255, 36, 48, .34);
  background: rgba(255, 0, 0, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 36, 48, .055)
}

.artist-song-action.next {
  color: rgba(255, 255, 255, .88);
  font-size: 0
}

.artist-song-action:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24)
}

.artist-song-action.collect:hover {
  color: #ff3038;
  border-color: rgba(255, 48, 56, .58);
  background: rgba(255, 0, 0, .075);
  box-shadow: 0 0 22px rgba(255, 48, 56, .12), inset 0 0 0 1px rgba(255, 48, 56, .08)
}

.artist-song-action.next:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .24)
}

@media (max-height:720px),
(max-width:1100px) {
  .track-detail-modal {
    width: min(620px, 94vw);
    max-height: calc(100vh - 64px);
    padding: 22px
  }

  .track-detail-modal h2 {
    margin-bottom: 12px
  }

  .detail-hero {
    padding: 10px;
    margin-bottom: 10px
  }

  .detail-cover {
    width: 58px;
    height: 58px;
    border-radius: 10px
  }

  .detail-grid {
    grid-template-columns: 82px 1fr;
    margin-top: 10px;
    gap: 7px 10px
  }

  .detail-section {
    margin-top: 12px;
    padding-top: 12px
  }
}

@media (max-width:560px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 4px
  }

  .detail-k {
    font-size: 10.5px
  }

  .artist-song-actions {
    gap: 6px
  }

  .artist-song-action {
    width: 31px;
    height: 31px;
    border-radius: 9px
  }
}

.local-beat-modal {
  width: min(460px, 90vw);
  max-width: min(460px, 90vw);
  padding: 28px;
  text-align: left
}

.local-beat-modal h2 {
  text-align: center;
  margin-bottom: 14px
}

.local-beat-track {
  padding: 11px 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035)
}

.local-beat-track-title {
  font-size: 13px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.local-beat-track-sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42)
}

.local-beat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px
}

.local-beat-tab {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .68);
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s
}

.local-beat-tab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .07);
  color: #fff
}

.local-beat-tab.active {
  border-color: rgba(244, 210, 138, .48);
  background: rgba(244, 210, 138, .12);
  color: var(--champagne)
}

.local-beat-tab b {
  display: block;
  font-size: 12.5px;
  letter-spacing: .3px
}

.local-beat-tab span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42)
}

.local-beat-desc {
  min-height: 44px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .55)
}

.local-beat-status {
  min-height: 18px;
  font-size: 11.5px;
  color: rgba(126, 226, 168, .84);
  letter-spacing: .25px
}

.local-beat-status.warn {
  color: #f4d28a
}

.local-beat-status.fail {
  color: #ff8f9d
}

.local-beat-modal.analyzing .local-beat-tab {
  pointer-events: none;
  opacity: .64
}

.custom-lyric-modal {
  width: min(560px, 92vw);
  max-width: min(560px, 92vw);
  padding: 28px;
  text-align: left
}

.custom-lyric-modal h2 {
  text-align: center;
  margin-bottom: 14px
}

.custom-lyric-track {
  padding: 11px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035)
}

.custom-lyric-title {
  font-size: 13px;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.custom-lyric-sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42)
}

.custom-lyric-input {
  width: 100%;
  height: min(310px, 42vh);
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .92);
  padding: 13px 14px;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.custom-lyric-input:focus {
  border-color: rgba(244, 210, 138, .42);
  background: rgba(244, 210, 138, .055)
}

.custom-lyric-input::placeholder {
  color: rgba(255, 255, 255, .28)
}

.custom-lyric-status {
  min-height: 18px;
  margin-top: 9px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .2px
}

.custom-lyric-status.good {
  color: rgba(126, 226, 168, .86)
}

.custom-lyric-status.fail {
  color: #ff8f9d
}

.lyric-source-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 12px
}

.lyric-source-seg button.has-custom::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: rgba(126, 226, 168, .86);
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(126, 226, 168, .50)
}

/* ---------- 加载/拖放 ---------- */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: none
}

#loading-overlay.show {
  display: block
}

.spinner {
  display: none
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px)
}

#drop-overlay.show {
  display: flex
}

#drop-overlay .drop-text {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 3px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  padding: 50px 70px;
  border-radius: 20px
}

/* ---------- AI 深度加载角标 ---------- */
#ai-depth-chip {
  position: fixed;
  z-index: 7;
  top: 80px;
  right: 24px;
  background: rgba(10, 10, 16, 0.85);
  border: 1px solid rgba(244, 210, 138, 0.32);
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 11px;
  color: var(--champagne);
  letter-spacing: .4px;
  display: none;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px)
}

#ai-depth-chip.show {
  display: flex
}

#ai-depth-chip .mini-spin {
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(244, 210, 138, .24);
  border-top-color: var(--champagne);
  border-radius: 50%;
  animation: spin .7s linear infinite
}

#beat-chip {
  position: fixed;
  z-index: 7;
  top: 122px;
  right: 24px;
  background: rgba(10, 10, 16, 0.85);
  border: 1px solid rgba(126, 226, 168, 0.3);
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 11px;
  color: #7ee2a8;
  letter-spacing: .4px;
  display: none;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px)
}

#beat-chip.show {
  display: flex
}

#beat-chip .mini-spin {
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(126, 226, 168, .25);
  border-top-color: #7ee2a8;
  border-radius: 50%;
  animation: spin .7s linear infinite
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  z-index: 200;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(20, 20, 28, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  letter-spacing: .5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45)
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

#cuefield-feedback {
  position: fixed;
  z-index: 201;
  left: 50%;
  bottom: 112px;
  width: min(330px, calc(100vw - 34px));
  padding: 13px 14px 12px;
  border: 1px solid rgba(255, 240, 196, .18);
  border-radius: 14px;
  color: rgba(255, 250, 238, .92);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px) scale(.98);
  transition: opacity .24s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

#cuefield-feedback.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1)
}

.cuefield-feedback-kicker {
  color: rgba(255, 212, 128, .72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px
}

.cuefield-feedback-title {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700
}

.cuefield-feedback-meta {
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, .55);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cuefield-feedback-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px
}

.cuefield-feedback-actions button {
  min-height: 29px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  font-size: 11px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease
}

.cuefield-feedback-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 218, 144, .42);
  background: rgba(255, 201, 104, .13)
}

.cookie-export-prompt {
  position: fixed;
  z-index: 203;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

.cookie-export-prompt.show {
  display: flex;
  pointer-events: auto
}

.cookie-export-card {
  width: min(360px, calc(100vw - 40px));
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(15, 17, 23, .48);
  color: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(30px) saturate(1.45);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease
}

.cookie-export-prompt.show .cookie-export-card {
  opacity: 1;
  transform: translateY(0) scale(1)
}

.cookie-export-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  color: rgba(var(--fc-accent-rgb), .88);
  margin-bottom: 7px
}

.cookie-export-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px
}

.cookie-export-desc {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .52)
}

.cookie-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px
}

.cookie-export-actions button {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .74);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer
}

.cookie-export-actions button.primary {
  border-color: rgba(var(--fc-accent-rgb), .52);
  background: rgba(var(--fc-accent-rgb), .16);
  color: #fff
}

#source-fallback-stack {
  position: fixed;
  z-index: 202;
  top: 72px;
  right: 24px;
  width: min(344px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none
}

.source-fallback-card {
  position: relative;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 13, 18, .46);
  color: rgba(255, 255, 255, .86);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(30px) saturate(1.45);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px) translateY(-8px);
  transition: opacity .24s ease, transform .24s ease
}

.source-fallback-card.show {
  opacity: 1;
  transform: translateX(0) translateY(0)
}

.source-fallback-card.leaving {
  opacity: 0;
  transform: translateX(18px) translateY(-6px)
}

#source-fallback-notice {
  position: fixed;
  z-index: 201;
  top: 72px;
  right: 24px;
  width: min(330px, calc(100vw - 48px));
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(157, 184, 207, .24);
  background: rgba(12, 13, 18, .86);
  color: rgba(255, 255, 255, .86);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .26s, transform .26s
}

#source-fallback-notice.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

.source-fallback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px
}

.source-fallback-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .35px;
  color: #eaf2ff
}

.source-fallback-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  line-height: 20px;
  font-size: 15px;
  transition: background .2s, color .2s
}

.source-fallback-close:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff
}

.source-fallback-body {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .58)
}

#visual-guide {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: none;
  pointer-events: auto;
  cursor: pointer
}

#visual-guide.show {
  display: block
}

.visual-guide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(244, 210, 138, .05), rgba(255, 83, 103, .035) 34%, rgba(9, 10, 14, .38) 58%, rgba(0, 0, 0, .66)), radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .045), rgba(0, 0, 0, .36) 34%, rgba(0, 0, 0, .68));
  opacity: 0;
  transition: opacity .28s cubic-bezier(.16, 1, .3, 1)
}

#visual-guide.show .visual-guide-scrim {
  opacity: 1
}

.visual-guide-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 48px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, .74);
  box-shadow: 0 0 0 7px rgba(255, 83, 103, .13), 0 0 42px rgba(255, 83, 103, .24), inset 0 0 20px rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.98);
  transition: left .38s cubic-bezier(.16, 1, .3, 1), top .38s cubic-bezier(.16, 1, .3, 1), width .38s cubic-bezier(.16, 1, .3, 1), height .38s cubic-bezier(.16, 1, .3, 1), border-radius .38s cubic-bezier(.16, 1, .3, 1), opacity .24s, transform .38s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  overflow: hidden
}

.visual-guide-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(244, 210, 138, .34);
  border-radius: inherit;
  opacity: .62
}

.visual-guide-ring::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .86), transparent);
  animation: visual-guide-scan 1.8s cubic-bezier(.16, 1, .3, 1) infinite
}

#visual-guide.show .visual-guide-ring {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1)
}

.visual-guide-ring.shelf-target {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset -34px 0 56px rgba(255, 255, 255, .045), 0 0 54px rgba(255, 255, 255, .06);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .035));
}

.visual-guide-card {
  position: absolute;
  width: min(326px, calc(100vw - 32px));
  padding: 17px 18px 15px;
  border-radius: 14px;
  border: 1px solid rgba(244, 210, 138, .18);
  background: linear-gradient(145deg, rgba(28, 27, 32, .94), rgba(9, 10, 14, .95));
  box-shadow: 0 28px 86px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 83, 103, .10), inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(28px) saturate(1.16);
  -webkit-backdrop-filter: blur(28px) saturate(1.16);
  pointer-events: auto;
  cursor: default;
  opacity: 0;
  transform: translateY(10px) scale(.982);
  transition: left .38s cubic-bezier(.16, 1, .3, 1), top .38s cubic-bezier(.16, 1, .3, 1), opacity .26s, transform .38s cubic-bezier(.16, 1, .3, 1), filter .38s;
  overflow: hidden
}

.visual-guide-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 83, 103, .70), rgba(244, 210, 138, .56), transparent)
}

#visual-guide.show .visual-guide-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
}

.visual-guide-kicker {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .16em;
  color: rgba(255, 83, 103, .78);
  text-transform: uppercase;
  margin-bottom: 8px
}

.visual-guide-title {
  font-size: 16px;
  font-weight: 760;
  color: rgba(255, 255, 255, .96);
  letter-spacing: .2px;
  margin-bottom: 7px
}

.visual-guide-body {
  font-size: 12.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .64);
  letter-spacing: .1px
}

.visual-guide-hint {
  margin-top: 11px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .038);
  font-size: 11px;
  color: rgba(244, 210, 138, .72)
}

.visual-guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px
}

.visual-guide-progress {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .38);
  font-variant-numeric: tabular-nums
}

.visual-guide-actions button {
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .70);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 12px;
  transition: background .18s, border-color .18s, color .18s, transform .18s
}

.visual-guide-actions button:hover {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(255, 255, 255, .20);
  color: #fff;
  transform: translateY(-1px)
}

.visual-guide-actions .primary {
  border-color: rgba(255, 83, 103, .42);
  background: rgba(255, 83, 103, .14);
  color: #fff
}

.visual-guide-actions .primary:hover {
  border-color: rgba(255, 83, 103, .62);
  background: rgba(255, 83, 103, .20)
}

@keyframes visual-guide-scan {

  0%,
  100% {
    transform: translateY(0);
    opacity: .26
  }

  42% {
    opacity: .72
  }

  70% {
    transform: translateY(82px);
    opacity: .18
  }
}

/* ============================================================ */
/*  控制台 — 简化版                                              */
/* ============================================================ */
#fx-panel {
  position: fixed;
  z-index: 18;
  right: -460px;
  bottom: 92px;
  width: min(444px, calc(100vw - 48px));
  max-height: min(650px, calc(100vh - 132px));
  max-height: min(650px, calc(100dvh - 132px));
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  background: var(--glass-bg);
  border: 1px solid rgba(0, 245, 212, 0.16);
  border-radius: 20px;
  padding: 18px 18px 32px;
  backdrop-filter: blur(44px) saturate(1.34);
  -webkit-backdrop-filter: blur(44px) saturate(1.34);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  transition: right .55s cubic-bezier(.16, 1, .3, 1), opacity .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  transform: translateY(18px) scale(.97);
  scrollbar-width: auto;
  scrollbar-color: rgba(0, 245, 212, .42) transparent
}

#fx-panel.show,
#fx-panel.peek {
  right: 24px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

#fx-panel.show {
  animation: fx-panel-in .56s cubic-bezier(.16, 1, .3, 1)
}

#fx-panel.closing {
  animation: fx-panel-out .26s cubic-bezier(.5, 0, .7, 1)
}

#fx-panel::-webkit-scrollbar {
  width: 8px
}

#fx-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(0, 245, 212, .42);
  background-clip: padding-box
}

#fx-fab {
  position: fixed;
  z-index: 19;
  right: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 212, .30);
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .055) 48%, rgba(0, 245, 212, .055));
  color: rgba(232, 236, 239, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(26px) saturate(1.34);
  -webkit-backdrop-filter: blur(26px) saturate(1.34);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34), 0 0 24px rgba(0, 245, 212, .07), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: bottom .38s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), background .28s, border-color .28s, color .28s, box-shadow .28s
}

#fx-fab:hover,
#fx-fab.active {
  transform: translateY(-2px) scale(1.04);
  background: rgba(0, 245, 212, .075);
  border-color: rgba(0, 245, 212, .50);
  color: #fff
}

#fx-fab svg {
  transition: transform .38s cubic-bezier(.16, 1, .3, 1)
}

#fx-fab.active svg {
  transform: rotate(90deg)
}

#fx-fab-hide-btn {
  position: fixed;
  z-index: 20;
  right: 84px;
  bottom: 37px;
  width: 18px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .34);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transform: translateX(6px) scale(.92);
  transition: right .28s cubic-bezier(.16, 1, .3, 1), bottom .38s cubic-bezier(.16, 1, .3, 1), opacity .18s, transform .18s, background .18s, color .18s, border-color .18s;
  cursor: pointer
}

#fx-fab:hover+#fx-fab-hide-btn,
#fx-fab-hide-btn:hover,
#fx-fab-hide-btn.on {
  opacity: 1;
  transform: translateX(0) scale(1)
}

#fx-fab-hide-btn:hover,
#fx-fab-hide-btn.on {
  border-color: rgba(var(--fc-accent-rgb), .34);
  background: rgba(var(--fc-accent-rgb), .10);
  color: #fff
}

body.fx-fab-auto-hide #fx-fab {
  right: -76px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: right .28s cubic-bezier(.16, 1, .3, 1), bottom .38s cubic-bezier(.16, 1, .3, 1), opacity .18s, visibility 0s linear .18s, transform .24s, background .28s, border-color .28s, color .28s, box-shadow .28s
}

body.fx-fab-auto-hide.fx-fab-peek #fx-fab {
  right: 24px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: right .28s cubic-bezier(.16, 1, .3, 1), bottom .38s cubic-bezier(.16, 1, .3, 1), opacity .16s, transform .24s, background .28s, border-color .28s, color .28s, box-shadow .28s
}

body.fx-fab-auto-hide #fx-fab-hide-btn {
  right: -76px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px) scale(.92);
  transition: right .28s cubic-bezier(.16, 1, .3, 1), bottom .38s cubic-bezier(.16, 1, .3, 1), opacity .18s, visibility 0s linear .18s, transform .18s, background .18s, color .18s, border-color .18s
}

body.fx-fab-auto-hide.fx-fab-peek #fx-fab-hide-btn {
  right: 84px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: right .28s cubic-bezier(.16, 1, .3, 1), bottom .38s cubic-bezier(.16, 1, .3, 1), opacity .16s, transform .18s, background .18s, color .18s, border-color .18s
}

body.controls-visible #fx-fab-hide-btn,
body.desktop-shell.diy-mode.controls-visible #fx-fab-hide-btn {
  bottom: 139px
}

body.immersive-mode #fx-fab-hide-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important
}

body.desktop-shell.diy-mode #fx-panel {
  top: 64px;
  bottom: 132px;
  height: auto;
  max-height: calc(100dvh - 196px)
}

body.desktop-shell.diy-mode #fx-fab {
  bottom: 24px
}

body.desktop-shell.diy-mode #fx-fab-hide-btn {
  bottom: 37px
}

body.controls-visible #fx-fab,
body.desktop-shell.diy-mode.controls-visible #fx-fab {
  bottom: 126px
}

body.desktop-shell.diy-mode #bottom-bar,
body.desktop-shell.diy-mode #bottom-bar.stage-mode {
  left: 50%;
  width: min(1080px, calc(100vw - 72px))
}

@media (max-height:760px) {
  body.desktop-shell.diy-mode #fx-panel {
    top: 50px;
    bottom: 92px;
    width: min(410px, calc(100vw - 48px));
    height: auto;
    max-height: calc(100dvh - 142px);
    padding: 14px 14px 28px
  }

  body.desktop-shell.diy-mode #fx-fab {
    bottom: 22px
  }

  body.desktop-shell.diy-mode #fx-fab-hide-btn {
    bottom: 35px
  }

  body.desktop-shell.diy-mode.controls-visible #fx-fab {
    bottom: 112px
  }

  body.desktop-shell.diy-mode.controls-visible #fx-fab-hide-btn {
    bottom: 125px
  }
}

@media (max-height:600px) {
  body.desktop-shell.diy-mode #fx-panel {
    top: 42px;
    bottom: 76px;
    max-height: calc(100dvh - 118px);
    padding-bottom: 26px
  }
}

@media (max-width:980px) {
  body.desktop-shell.diy-mode #fx-panel {
    left: 18px;
    right: 18px;
    width: auto;
    top: 62px;
    bottom: 132px
  }

  body.desktop-shell.diy-mode #fx-panel.show,
  body.desktop-shell.diy-mode #fx-panel.peek {
    right: 18px
  }
}

@media (max-width:980px) and (max-height:760px) {
  body.desktop-shell.diy-mode #fx-panel {
    top: 50px;
    bottom: 92px;
    max-height: calc(100dvh - 142px)
  }
}

@media (max-width:980px) and (max-height:600px) {
  body.desktop-shell.diy-mode #fx-panel {
    top: 42px;
    bottom: 76px;
    max-height: calc(100dvh - 118px)
  }
}

@keyframes fx-panel-in {
  0% {
    opacity: 0;
    transform: translateX(32px) translateY(18px) scale(.96);
    filter: blur(8px)
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0)
  }
}

@keyframes fx-panel-out {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0)
  }

  100% {
    opacity: 0;
    transform: translateX(24px) translateY(12px) scale(.97);
    filter: blur(6px)
  }
}

.fx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .065)
}

.fx-head-main {
  min-width: 0
}

.fx-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  flex: 0 0 auto
}

.fx-head-actions .fx-mini-btn {
  width: auto;
  min-width: 58px;
  height: 28px;
  padding: 0 10px;
  flex: 0 0 auto;
  border-radius: 9px
}

.fx-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .95)
}

.fx-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, .32);
  margin-top: 4px;
  letter-spacing: 1px
}

.memory-status-chip {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.45
}

.memory-status-sub {
  margin-top: 4px;
  margin-bottom: 2px
}

.memory-mask-seg {
  margin-top: 8px
}

.memory-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.fx-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px
}

.fx-close:hover {
  color: #fff
}

.fx-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(0, 245, 212, .56);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 18px 0 9px;
  font-weight: 700
}

.fx-section-label::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(0, 245, 212, .16), transparent)
}

.fx-section-label:first-of-type {
  margin-top: 0
}

/* --- 预设卡片网格 --- */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px
}

.preset-card {
  position: relative;
  min-height: 94px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  overflow: hidden;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px
}

.preset-card:hover {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05)
}

.preset-card.active {
  border-color: rgba(0, 245, 212, .54);
  background: rgba(0, 245, 212, .075);
  box-shadow: 0 0 0 1px rgba(0, 245, 212, .22), 0 16px 46px rgba(0, 245, 212, .055)
}

.preset-card.switching::after {
  content: '';
  position: absolute;
  inset: -35%;
  background: radial-gradient(circle, rgba(244, 210, 138, .26), transparent 58%);
  animation: preset-card-pulse .72s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none
}

.preset-card .pc-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .45)
}

.preset-card.active .pc-icon {
  color: var(--fc-accent)
}

.preset-card .pc-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .3px
}

.preset-card .pc-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, .44);
  margin-top: 4px;
  letter-spacing: .3px;
  line-height: 1.35
}

.preset-card[data-preset="7"] .pc-name,
.preset-card[data-preset="8"] .pc-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 1px
}

.preset-card .pc-name-en {
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: .15px;
  white-space: nowrap
}

.preset-card .pc-author-ajin {
  color: #f59e0b;
  font-weight: 650
}

.preset-card.active .pc-name {
  color: #fff
}

.preset-card[data-preset="6"] .pc-name,
.preset-card[data-preset="6"] .pc-desc {
  font-family: "黑体", "SimHei", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .4px
}

.preset-card[data-preset="6"] .pc-name {
  font-size: 14px
}

.preset-card[data-preset="6"] .pc-desc {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .52);
  font-weight: 700
}

.preset-card[data-preset="6"] .pc-yui7w {
  color: #3257f7;
  font-family: "Microsoft Yi Baiti", "SimHei", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .7px
}

.preset-card[data-preset="6"] .pc-icon {
  color: #3257f7
}

.preset-card[data-preset="6"].active .pc-icon {
  color: #3257f7 !important;
  text-shadow: 0 0 12px rgba(50, 87, 247, .44)
}

.preset-card .pc-bg {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none
}

@keyframes preset-card-pulse {
  0% {
    opacity: 0;
    transform: scale(.6) rotate(0deg)
  }

  35% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: scale(1.25) rotate(12deg)
  }
}

.user-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px
}

.user-archive-toolbar {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .018)
}

.user-archive-note {
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .42)
}

.user-archive-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%
}

.user-archive-tools .fx-mini-btn {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap
}

.user-archive-share-panel {
  grid-column: 1/-1;
  display: grid;
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(var(--fc-accent-rgb), .16);
  background: rgba(var(--fc-accent-rgb), .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045)
}

.user-archive-share-input {
  width: 100%;
  min-height: 58px;
  max-height: 120px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .085);
  background: rgba(0, 0, 0, .24);
  color: rgba(255, 255, 255, .88);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  line-height: 1.42;
  padding: 8px;
  outline: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap
}

.user-archive-share-input:focus {
  border-color: rgba(var(--fc-accent-rgb), .38);
  box-shadow: 0 0 0 1px rgba(var(--fc-accent-rgb), .12)
}

.user-archive-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px
}

.user-archive-share-actions button {
  height: 26px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .72);
  font-family: inherit;
  font-size: 10px;
  font-weight: 740;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s
}

.user-archive-share-actions button:hover {
  background: rgba(var(--fc-accent-rgb), .10);
  border-color: rgba(var(--fc-accent-rgb), .24);
  color: #fff
}

.user-archive-slot {
  min-height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .028);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden
}

.user-archive-slot.has-save {
  border-color: rgba(var(--fc-accent-rgb), .24);
  background: rgba(var(--fc-accent-rgb), .040)
}

.user-archive-slot.is-new {
  align-items: center;
  justify-content: center;
  min-height: 86px;
  border-style: dashed;
  cursor: pointer;
  color: rgba(255, 255, 255, .54)
}

.user-archive-slot.is-new strong {
  font-size: 12px;
  color: rgba(255, 255, 255, .82)
}

.user-archive-slot.is-new span {
  display: block;
  margin-top: 4px
}

.user-archive-slot.is-new:hover {
  border-color: rgba(var(--fc-accent-rgb), .32);
  background: rgba(var(--fc-accent-rgb), .06);
  color: #fff
}

.user-archive-grid.dragover .user-archive-toolbar,
.user-archive-grid.dragover .user-archive-slot.is-new {
  border-color: rgba(var(--fc-accent-rgb), .46);
  background: rgba(var(--fc-accent-rgb), .09)
}

.user-archive-name {
  font-size: 12px;
  font-weight: 760;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.user-archive-input {
  width: 100%;
  height: 27px;
  border-radius: 8px;
  border: 1px solid rgba(var(--fc-accent-rgb), .28);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  padding: 0 8px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(var(--fc-accent-rgb), .06)
}

.user-archive-input:focus {
  border-color: rgba(var(--fc-accent-rgb), .52);
  box-shadow: 0 0 0 1px rgba(var(--fc-accent-rgb), .16), 0 10px 24px rgba(0, 0, 0, .18)
}

.user-archive-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, .42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.user-archive-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 6px;
  margin-top: auto
}

.user-archive-actions button {
  height: 25px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .70);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s
}

.user-archive-actions button:hover {
  background: rgba(var(--fc-accent-rgb), .10);
  border-color: rgba(var(--fc-accent-rgb), .24);
  color: #fff
}

.user-archive-actions button:disabled {
  opacity: .34;
  cursor: default;
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .42)
}

/* --- 主滑块 --- */
.fx-slider {
  display: grid;
  grid-template-columns: minmax(78px, 92px) minmax(0, 1fr) 44px 28px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .030)
}

.fx-slider label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.fx-slider input[type=range] {
  width: 100%;
  min-width: 0;
  accent-color: var(--fc-accent)
}

.fx-slider output {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .40);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.fx-sonic-hidden {
  display: none !important;
}

.sonic-workshop-theme-seg {
  margin: 6px 0 10px;
}

.sonic-workshop-theme-seg button {
  min-width: 0;
}

.sonic-audio-monitor {
  margin: 8px 0 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: rgba(255, 255, 255, .026);
  overflow: hidden
}

.sonic-audio-monitor-head {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(84px, 112px) minmax(0, 1fr) minmax(78px, auto);
  align-items: center;
  gap: 9px;
  padding: 7px 9px
}

.sonic-audio-monitor-head .fx-mini-btn {
  height: 28px;
  min-width: 0;
  flex: 0 0 auto
}

.sonic-audio-meter {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .35)
}

.sonic-audio-meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: inherit;
  background: linear-gradient(90deg, #33e6ff, #f4d28a, #ff5258);
  transition: transform .08s linear
}

#sonic-audio-monitor-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .50);
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums
}

.sonic-audio-monitor-panel {
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: height .22s ease, opacity .18s ease
}

.sonic-audio-monitor-panel.open {
  height: 112px;
  opacity: 1;
  pointer-events: auto
}

#sonic-audio-monitor-canvas {
  display: block;
  width: 100%;
  height: 108px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: #05080e
}

.fx-reset-one {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .46);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .2s, background .2s, border-color .2s, transform .2s
}

.fx-reset-one:hover {
  color: #eafffb;
  background: rgba(0, 245, 212, .085);
  border-color: rgba(0, 245, 212, .26);
  transform: rotate(-18deg) scale(1.04)
}

.fx-reset-one svg {
  width: 13px;
  height: 13px;
  display: block
}

.lyric-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 10px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .024)
}

.lyric-swatch {
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--swatch, #a9b8c8);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 8px 18px rgba(0, 0, 0, .18);
  transition: transform .18s, border-color .18s, box-shadow .18s
}

.lyric-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .34)
}

.lyric-swatch.active {
  border-color: rgba(244, 210, 138, .88);
  box-shadow: 0 0 0 1px rgba(244, 210, 138, .42), 0 10px 24px rgba(244, 210, 138, .12), inset 0 1px 0 rgba(255, 255, 255, .25)
}

.lyric-swatch.auto {
  background: linear-gradient(135deg, rgba(143, 233, 255, .52), rgba(156, 255, 223, .36), rgba(244, 210, 138, .42));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(8, 10, 12, .78);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px
}

.lyric-color-row {
  display: grid;
  grid-template-columns: 42px 1fr 68px;
  align-items: center;
  gap: 9px;
  margin: 7px 0 9px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .026);
  --lyric-glow-color: #9db8cf
}

.lyric-color-row.visual-tint-row {
  grid-template-columns: 42px 1fr 58px 58px
}

.lyric-color-row.image-pick-row {
  grid-template-columns: 42px minmax(88px, 1fr) auto;
  gap: 8px
}

.lyric-color-row.image-pick-row .fx-mini-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 8px;
  line-height: 1
}

.bg-media-preview {
  width: 42px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .24), transparent 36%),
    linear-gradient(135deg, rgba(143, 233, 255, .28), rgba(244, 210, 138, .20), rgba(255, 255, 255, .05));
  background-size: cover;
  background-position: var(--custom-bg-position-x, 50%) var(--custom-bg-position-y, 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px rgba(0, 0, 0, .20);
  overflow: hidden;
  position: relative
}

.bg-media-preview::after {
  content: attr(data-kind);
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .46);
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .2px
}

.bg-media-preview.empty::after {
  display: none
}

.bg-media-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(38px, 1fr));
  gap: 5px;
  width: clamp(168px, 38vw, 218px)
}

.bg-media-actions .fx-mini-btn {
  height: 28px;
  border-radius: 9px;
  padding: 0 7px;
  font-size: 11px
}

.bg-media-actions .fx-mini-btn:disabled {
  opacity: .34;
  cursor: default;
  border-color: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .42)
}

.wallpaper-engine-row {
  border-color: rgba(97, 185, 255, .13);
  background: linear-gradient(135deg, rgba(65, 142, 255, .075), rgba(255, 255, 255, .022))
}

.wallpaper-engine-mark {
  width: 42px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(239, 249, 255, .96);
  font: 800 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .7px;
  border: 1px solid rgba(121, 201, 255, .24);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .26), transparent 30%),
    linear-gradient(145deg, rgba(41, 147, 255, .62), rgba(56, 76, 138, .34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(19, 97, 171, .18)
}

.wallpaper-engine-actions {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(82px, 1fr);
  gap: 5px;
  width: clamp(172px, 39vw, 224px)
}

.wallpaper-engine-actions .fx-mini-btn {
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 10.5px;
  white-space: nowrap
}

.wallpaper-engine-actions .fx-mini-btn:disabled {
  opacity: .34;
  cursor: default
}

.wallpaper-engine-library-modal {
  position: relative;
  width: min(1120px, 94vw);
  max-width: none;
  height: min(820px, 88vh);
  padding: 22px;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% -12%, rgba(74, 164, 255, .13), transparent 34%),
    linear-gradient(180deg, rgba(17, 20, 27, .985), rgba(8, 9, 13, .97));
  border-color: rgba(119, 198, 255, .18)
}

.wallpaper-engine-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto
}

.wallpaper-engine-library-head h2 {
  margin: 4px 0 5px;
  font-size: 20px;
  font-weight: 760;
  color: rgba(255, 255, 255, .96)
}

.wallpaper-engine-library-head p {
  margin: 0;
  max-width: 780px;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
  line-height: 1.6
}

.wallpaper-engine-kicker {
  color: rgba(114, 199, 255, .76);
  font: 700 9px/1.2 "JetBrains Mono", monospace;
  letter-spacing: 1.45px
}

.wallpaper-engine-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .74);
  font-size: 21px;
  line-height: 30px;
  cursor: pointer
}

.wallpaper-engine-close:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff
}

.wallpaper-engine-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  flex: 0 0 auto
}

#wallpaper-engine-search {
  height: 34px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .11);
  outline: none;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .045)
}

#wallpaper-engine-search:focus {
  border-color: rgba(113, 199, 255, .42);
  box-shadow: 0 0 0 3px rgba(72, 166, 255, .08)
}

.wallpaper-engine-toolbar .fx-mini-btn {
  height: 34px;
  padding: 0 12px;
  white-space: nowrap
}

.wallpaper-engine-library-status {
  margin: 11px 1px 8px;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  flex: 0 0 auto
}

.wallpaper-engine-library-status.loading::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  border: 1px solid rgba(124, 207, 255, .28);
  border-top-color: rgba(124, 207, 255, .95);
  animation: wallpaper-engine-spin .7s linear infinite
}

@keyframes wallpaper-engine-spin {
  to { transform: rotate(360deg) }
}

.wallpaper-engine-manual-roots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 0;
  margin-bottom: 8px;
  flex: 0 0 auto
}

.wallpaper-engine-root-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  height: 24px;
  padding: 0 5px 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(117, 198, 255, .13);
  background: rgba(69, 143, 213, .07);
  color: rgba(215, 239, 255, .58);
  font-size: 10px
}

.wallpaper-engine-root-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.wallpaper-engine-root-chip button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .48);
  cursor: pointer
}

.wallpaper-engine-root-chip button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08)
}

.wallpaper-engine-grid {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 13px;
  padding: 2px 5px 10px 1px;
  overscroll-behavior: contain
}

.wallpaper-engine-empty {
  flex: 1 0 100%;
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, .38);
  font-size: 12px
}

.wallpaper-engine-load-more {
  flex: 1 0 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .055);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease
}

.wallpaper-engine-load-more:hover,
.wallpaper-engine-load-more:focus-visible {
  color: #fff;
  border-color: rgba(122, 204, 255, .38);
  background: rgba(122, 204, 255, .10)
}

.wallpaper-engine-card {
  position: relative;
  flex: 0 0 calc((100% - 39px) / 4);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, rgba(31, 43, 58, .92), rgba(7, 9, 13, .98));
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease
}

.wallpaper-engine-card:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 204, 255, .34);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .30)
}

.wallpaper-engine-card.active {
  border-color: rgba(132, 211, 255, .66);
  box-shadow: 0 0 0 1px rgba(132, 211, 255, .18), 0 14px 34px rgba(14, 92, 159, .24)
}

.wallpaper-engine-card.favorite {
  border-color: rgba(255, 215, 104, .28)
}

.wallpaper-engine-card-preview,
.wallpaper-engine-card-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(145deg, #172132, #07090d)
}

.wallpaper-engine-card-preview {
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease
}

.wallpaper-engine-card-preview.loaded {
  opacity: 1
}

.wallpaper-engine-card:hover .wallpaper-engine-card-preview {
  transform: scale(1.025)
}

.wallpaper-engine-card-meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 28px 10px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .90));
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.wallpaper-engine-card-meta small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .55);
  font-size: 9px;
  font-weight: 500
}

.wallpaper-engine-card-star,
.wallpaper-engine-card-settings,
.wallpaper-engine-card-hide {
  position: absolute;
  top: 7px;
  z-index: 3;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(4, 6, 9, .72);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  backdrop-filter: blur(8px)
}

.wallpaper-engine-card-star { left: 7px; font-size: 16px }
.wallpaper-engine-card-settings { right: 41px; font-size: 13px }
.wallpaper-engine-card-hide { right: 7px; font-size: 15px }
.wallpaper-engine-card-star.active { color: #ffd76c; border-color: rgba(255, 215, 108, .46) }
.wallpaper-engine-card-settings:hover { color: #dff4ff; background: rgba(40, 131, 194, .72) }
.wallpaper-engine-card-hide:hover { color: #fff; background: rgba(157, 39, 55, .76) }

.wallpaper-engine-details-drawer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  border-radius: inherit;
  background: rgba(2, 4, 8, .58);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease
}

.wallpaper-engine-details-drawer.show {
  opacity: 1;
  pointer-events: auto
}

.wallpaper-engine-details-panel {
  width: min(430px, 92%);
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-left: 1px solid rgba(123, 203, 255, .16);
  background:
    radial-gradient(circle at 100% 0, rgba(57, 157, 232, .13), transparent 36%),
    linear-gradient(180deg, rgba(17, 21, 29, .995), rgba(8, 10, 15, .99));
  box-shadow: -22px 0 50px rgba(0, 0, 0, .34);
  transform: translateX(24px);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1)
}

.wallpaper-engine-details-drawer.show .wallpaper-engine-details-panel {
  transform: translateX(0)
}

.wallpaper-engine-details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto
}

.wallpaper-engine-details-head h3 {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .95);
  font-size: 18px;
  line-height: 1.3
}

.wallpaper-engine-details-summary {
  margin: 13px 0 10px;
  color: rgba(216, 239, 255, .62);
  font-size: 11px;
  line-height: 1.6;
  flex: 0 0 auto
}

.wallpaper-engine-details-properties {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 1px 4px 8px 0;
  overscroll-behavior: contain
}

.wallpaper-engine-property-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy badge" "copy value";
  gap: 3px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035)
}

.wallpaper-engine-property-copy {
  grid-area: copy;
  min-width: 0
}

.wallpaper-engine-property-copy strong,
.wallpaper-engine-property-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.wallpaper-engine-property-copy strong {
  color: rgba(255, 255, 255, .86);
  font-size: 11px;
  font-weight: 650
}

.wallpaper-engine-property-copy small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .36);
  font: 500 9px/1.25 "JetBrains Mono", monospace
}

.wallpaper-engine-property-badge {
  grid-area: badge;
  justify-self: end;
  padding: 2px 6px;
  border: 1px solid rgba(108, 218, 167, .24);
  border-radius: 999px;
  color: rgba(154, 241, 196, .9);
  background: rgba(44, 157, 101, .12);
  font-size: 8.5px
}

.wallpaper-engine-property-badge.warning {
  color: rgba(255, 210, 125, .86);
  border-color: rgba(255, 194, 82, .22);
  background: rgba(168, 112, 23, .12)
}

.wallpaper-engine-property-value {
  grid-area: value;
  justify-self: end;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .58);
  font-size: 10px
}

.wallpaper-engine-details-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, .38);
  font-size: 11px
}

.wallpaper-engine-details-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  flex: 0 0 auto
}

.wallpaper-engine-details-actions .fx-mini-btn {
  min-width: 0;
  height: 34px;
  padding: 0 10px
}

.wallpaper-engine-details-actions .fx-mini-btn:disabled {
  opacity: .34;
  cursor: default
}

.wallpaper-engine-details-note {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, .32);
  font-size: 9px;
  line-height: 1.5;
  flex: 0 0 auto
}

@media (max-width: 980px) {
  .wallpaper-engine-card { flex-basis: calc((100% - 26px) / 3) }
}

@media (max-width: 720px) {
  .wallpaper-engine-library-modal { width: 96vw; height: 92vh; padding: 16px }
  .wallpaper-engine-toolbar { grid-template-columns: 1fr 1fr }
  #wallpaper-engine-search { grid-column: 1/-1 }
  .wallpaper-engine-card { flex-basis: calc((100% - 13px) / 2) }
}

@media (max-width: 480px) {
  .wallpaper-engine-card { flex-basis: 100% }
}

@media (prefers-reduced-motion: reduce) {
  #wallpaper-engine-layer,
  #wallpaper-engine-image,
  #wallpaper-engine-video,
  #wallpaper-engine-freeze,
  .wallpaper-engine-details-drawer,
  .wallpaper-engine-details-panel,
  .wallpaper-engine-card { transition-duration: .01ms !important }
  .wallpaper-engine-library-status.loading::before { animation-duration: 1.4s }
}

.lyric-color-picker {
  width: 42px;
  height: 32px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px rgba(0, 0, 0, .18);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  pointer-events: none
}

#lyric-glow-row {
  border-color: color-mix(in srgb, var(--lyric-glow-color) 22%, rgba(255, 255, 255, .065));
  background: linear-gradient(90deg, color-mix(in srgb, var(--lyric-glow-color) 10%, transparent), rgba(255, 255, 255, .026));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px color-mix(in srgb, var(--lyric-glow-color) 8%, transparent)
}

#lyric-glow-picker {
  border-color: color-mix(in srgb, var(--lyric-glow-color) 46%, rgba(255, 255, 255, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 18px color-mix(in srgb, var(--lyric-glow-color) 22%, transparent), 0 10px 22px rgba(0, 0, 0, .18)
}

.lyric-glow-effect-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: -1px 0 10px;
  --lyric-glow-color: #9db8cf
}

.lyric-glow-effect-row .fx-mini-btn {
  width: 100%;
  min-width: 0;
  border-color: color-mix(in srgb, var(--lyric-glow-color) 18%, rgba(255, 255, 255, .10));
  color: color-mix(in srgb, var(--lyric-glow-color) 72%, rgba(255, 255, 255, .74))
}

.lyric-glow-effect-row .fx-mini-btn.active {
  background: color-mix(in srgb, var(--lyric-glow-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--lyric-glow-color) 36%, rgba(255, 255, 255, .16));
  color: color-mix(in srgb, var(--lyric-glow-color) 90%, #fff);
  box-shadow: 0 0 20px color-mix(in srgb, var(--lyric-glow-color) 14%, transparent)
}

.lyric-color-picker:hover {
  border-color: rgba(var(--fc-accent-rgb), .34);
  box-shadow: 0 0 0 1px rgba(var(--fc-accent-rgb), .12), 0 10px 24px rgba(0, 0, 0, .22)
}

.lyric-color-picker::-webkit-color-swatch-wrapper {
  padding: 0
}

.lyric-color-picker::-webkit-color-swatch {
  border: 0;
  border-radius: 10px
}

.cover-color-pop {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1402;
  width: min(390px, calc(100vw - 42px));
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--fc-accent-rgb), .18);
  background: linear-gradient(145deg, rgba(12, 13, 18, .94), rgba(2, 3, 5, .90));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  transform: translate(-50%, -50%)
}

.cover-color-pop.show {
  display: block
}

.cover-color-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .76);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase
}

.cover-color-close {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .58);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0
}

.cover-color-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 12px;
  align-items: stretch
}

.cover-color-art {
  position: relative;
  min-height: 128px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid rgba(255, 255, 255, .11)
}

.cover-color-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 16px 16px;
  mix-blend-mode: screen;
  opacity: .42;
  pointer-events: none
}

.cover-color-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cover-color-preview {
  height: 34px;
  border-radius: 10px;
  background: var(--picked, #9db8cf);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18)
}

.cover-color-hint {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .46)
}

.cover-color-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto
}

.cover-color-swatches button {
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--c, #9db8cf);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20)
}

.cover-color-loupe {
  display: none;
  position: fixed;
  z-index: 1500;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2px solid #050505;
  background: var(--loupe-bg, #111);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .18);
  pointer-events: none;
  overflow: hidden
}

.cover-color-loupe.show {
  display: block
}

.cover-color-loupe::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9)
}

.color-lab-pop {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1401;
  width: min(330px, calc(100vw - 42px));
  padding: 14px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(145deg, #09090b, #020203);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .64), 0 0 0 1px rgba(var(--fc-accent-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff;
  transform: translate(-50%, -50%)
}

.color-lab-pop.show {
  display: block !important
}

.color-lab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68)
}

.color-lab-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .62);
  cursor: pointer
}

.color-lab-sv {
  position: relative;
  height: 150px;
  border-radius: 12px;
  background: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, var(--lab-hue, #f00));
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: crosshair;
  overflow: hidden
}

.color-lab-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
  left: 100%;
  top: 0
}

.color-lab-row {
  display: grid;
  grid-template-columns: 34px 1fr 48px;
  align-items: center;
  gap: 8px;
  margin-top: 10px
}

.color-lab-preview {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--lab-color, #f00000);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18)
}

.color-lab-hue {
  width: 100%;
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  outline: none
}

.color-lab-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--lab-hue, #f00);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  cursor: pointer
}

.color-lab-hex {
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: #fff;
  font: 700 11px var(--font-mono);
  text-align: center;
  outline: none
}

.color-lab-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 10px
}

.color-lab-presets button {
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: var(--c, #fff);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20)
}

.lyric-color-value {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .48);
  letter-spacing: .6px;
  font-variant-numeric: tabular-nums
}

#lyric-glow-value {
  color: color-mix(in srgb, var(--lyric-glow-color) 82%, rgba(255, 255, 255, .54))
}

.lyric-color-row.linked {
  cursor: pointer
}

.lyric-color-row.linked .lyric-color-picker {
  opacity: .38;
  filter: grayscale(1);
  pointer-events: none
}

.lyric-color-row.linked .lyric-color-value {
  color: color-mix(in srgb, var(--lyric-glow-color) 58%, rgba(255, 255, 255, .34))
}

.lyric-color-row.linked:hover .lyric-color-value {
  color: rgba(255, 255, 255, .52)
}

.fx-font-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 10px
}

.fx-font-grid button {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .030);
  color: rgba(255, 255, 255, .58);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s
}

.fx-font-grid.expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.fx-font-grid button[data-font="gothic"] {
  font-family: "UnifrakturCook", "UnifrakturMaguntia", "Old English Text MT", "Blackletter", "Cinzel Decorative", serif;
  font-size: 12.5px
}

.fx-font-grid button[data-font="stone-song"],
.fx-font-grid button[data-font="bold-song"] {
  font-family: "Source Han Serif SC", "Noto Serif SC", "STZhongsong", "SimSun", serif;
  font-weight: 800
}

.fx-font-grid button[data-font^="custom:"] {
  position: relative;
  padding-right: 22px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fx-font-grid .font-upload-btn {
  border-style: dashed;
  color: rgba(var(--fc-accent-rgb), .76);
  background: rgba(var(--fc-accent-rgb), .045)
}

.fx-font-grid .font-remove {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .36);
  font-size: 12px;
  line-height: 1
}

.fx-font-grid .font-remove:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff
}

.fx-font-grid button:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  transform: translateY(-1px)
}

.fx-font-grid button.active {
  border-color: rgba(var(--fc-accent-rgb), .36);
  background: rgba(var(--fc-accent-rgb), .09);
  color: #fff
}

.fx-color-row-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .66);
  line-height: 1.2
}

.fx-color-row-label small {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .34);
  letter-spacing: .35px
}

/* --- 开关组 --- */
.fx-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px
}

.fx-toggle {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .028);
  cursor: pointer;
  transition: all .2s;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .72)
}

#t-float {
  display: none !important
}

.fx-toggle span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px
}

.fx-toggle:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .15)
}

.fx-toggle.on {
  color: var(--fc-accent);
  border-color: rgba(0, 245, 212, .34);
  background: rgba(0, 245, 212, .07)
}

.fx-toggle .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: all .2s
}

.fx-toggle.on .dot {
  background: var(--fc-accent);
  box-shadow: 0 0 10px rgba(0, 245, 212, .45)
}

.fx-toggle.dev-locked {
  cursor: not-allowed;
  color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .018);
  border-color: rgba(255, 255, 255, .045)
}

.fx-toggle.dev-locked:hover {
  background: rgba(255, 255, 255, .026);
  border-color: rgba(255, 255, 255, .07)
}

.fx-toggle.dev-locked .dot {
  background: rgba(255, 255, 255, .10);
  box-shadow: none
}

.fx-toggle.dev-locked.on {
  color: rgba(255, 255, 255, .38) !important;
  background: rgba(255, 255, 255, .018) !important;
  border-color: rgba(255, 255, 255, .045) !important
}

.fx-dev-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(244, 210, 138, .28);
  background: rgba(244, 210, 138, .08);
  color: rgba(244, 210, 138, .76);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  vertical-align: 1px;
  letter-spacing: .05em
}

.fx-slider.dev-locked {
  opacity: .48;
  filter: saturate(.72)
}

.fx-slider.dev-locked input {
  cursor: not-allowed
}

/* --- 三态分段 --- */
.fx-seg {
  display: flex;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  background: rgba(255, 255, 255, .026);
  margin-bottom: 10px
}

.fx-seg button {
  flex: 1;
  padding: 8px 4px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  transition: all .2s;
  letter-spacing: .4px;
  border-right: 1px solid rgba(255, 255, 255, .05)
}

.fx-seg button:last-child {
  border-right: none
}

.fx-seg button:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff
}

.fx-seg button.active {
  background: rgba(0, 245, 212, .10);
  color: var(--fc-accent)
}

.lyric-texture-quality-seg button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05
}

.lyric-texture-quality-seg button span {
  font-size: 12px;
  font-weight: 850
}

.lyric-texture-quality-seg button small {
  font-size: 9px;
  font-weight: 700;
  opacity: .68
}

.foreground-fps-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden
}

.foreground-fps-seg button {
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.foreground-fps-seg button:nth-child(3n) {
  border-right: none
}

.foreground-fps-seg button:nth-last-child(-n + 3) {
  border-bottom: none
}

/* --- 高级折叠 --- */
.fx-advanced {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 13px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .022)
}

.fx-advanced-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .4px;
  padding: 4px 0;
  user-select: none
}

.fx-advanced-head:hover {
  color: #fff
}

.fx-advanced-head .arrow {
  transition: transform .2s;
  font-size: 10px
}

.fx-advanced.open .fx-advanced-head .arrow {
  transform: rotate(90deg)
}

.fx-advanced-body {
  display: none;
  margin-top: 8px
}

.cache-storage-panel {
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(3, 9, 14, .42);
  border-radius: 10px;
  padding: 10px;
  margin: -1px 0 12px
}

.cache-storage-head,
.cache-storage-row,
.cache-storage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.cache-storage-head {
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 700
}

.cache-storage-head span:last-child,
.cache-storage-row b {
  color: rgba(var(--fc-accent-rgb), .86);
  font-size: 10px;
  font-variant-numeric: tabular-nums
}

.cache-storage-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(222, 240, 246, .56);
  font-size: 9px;
  line-height: 1.45;
  margin: 4px 0 8px
}

.cache-storage-path.small {
  color: rgba(222, 240, 246, .38);
  margin: 2px 0 7px
}

.cache-storage-actions {
  justify-content: flex-start;
  margin: 7px 0 10px
}

.cache-storage-actions .fx-mini-btn {
  min-height: 25px;
  padding: 0 8px;
  font-size: 10px
}

.cache-storage-row {
  color: rgba(255, 255, 255, .63);
  font-size: 10px
}

.cache-storage-row.muted {
  color: rgba(255, 255, 255, .42)
}

.cache-storage-note {
  margin-top: 5px;
  line-height: 1.45
}

.fx-advanced.open .fx-advanced-body {
  display: block
}

.fx-advanced .fx-slider label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .48)
}

.fx-fold {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 13px;
  background: rgba(255, 255, 255, .022);
  overflow: hidden
}

.fx-fold-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 12px;
  color: rgba(255, 255, 255, .70);
  user-select: none;
  transition: background .2s, color .2s
}

.fx-fold-head:hover {
  background: rgba(255, 255, 255, .035);
  color: #fff
}

.fx-fold-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

.fx-fold-title strong {
  font-size: 12px;
  letter-spacing: .45px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82)
}

.fx-fold-title small {
  font-size: 10px;
  letter-spacing: .35px;
  color: rgba(255, 255, 255, .34);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.fx-fold-head .arrow {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(0, 245, 212, .58);
  transition: transform .2s
}

.fx-fold.open .fx-fold-head .arrow {
  transform: rotate(90deg)
}

.fx-fold-body {
  display: none;
  padding: 0 12px 12px
}

.fx-fold.open .fx-fold-body {
  display: block
}

.fx-fold-body .fx-section-label {
  margin-top: 12px
}

.fx-fold-body .fx-section-label:first-child {
  margin-top: 4px
}

.fx-fold .fx-slider label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .58)
}

.fx-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px
}

.fx-mini-btn {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .3px
}

.fx-mini-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff
}

.fx-mini-btn.active {
  border-color: rgba(244, 210, 138, .46);
  background: rgba(244, 210, 138, .10);
  color: var(--champagne)
}

.fx-mini-btn.ghost {
  background: transparent
}

.fx-mini-btn.ghost.active {
  background: rgba(244, 210, 138, .10)
}

#lyric-glow-link-btn {
  border-color: color-mix(in srgb, var(--lyric-glow-color) 28%, rgba(255, 255, 255, .12));
  color: color-mix(in srgb, var(--lyric-glow-color) 76%, rgba(255, 255, 255, .78))
}

#lyric-glow-link-btn.active {
  background: color-mix(in srgb, var(--lyric-glow-color) 13%, transparent);
  color: color-mix(in srgb, var(--lyric-glow-color) 88%, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lyric-glow-color) 14%, transparent)
}

.fx-fold {
  overflow: visible
}

.fx-fold-head,
.fx-advanced-head {
  display: none
}

.fx-fold-body,
.fx-fold.open .fx-fold-body,
.fx-advanced-body,
.fx-advanced.open .fx-advanced-body {
  display: block
}

.fx-fold-body {
  padding: 12px
}

.fx-advanced-body {
  margin-top: 0
}

.fx-fold,
.fx-advanced {
  background: rgba(255, 255, 255, .024)
}

.hotkey-modal {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px)
}

.hotkey-modal.show {
  display: flex
}

.hotkey-dialog {
  width: min(760px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 44px));
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(14, 15, 20, .96), rgba(5, 6, 8, .96));
  box-shadow: 0 32px 110px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
  padding: 18px;
  color: #fff
}

.hotkey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.hotkey-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em
}

.hotkey-sub {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .48)
}

.hotkey-close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .66);
  font-size: 18px;
  line-height: 1;
  cursor: pointer
}

.hotkey-close:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff
}

.hotkey-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0
}

.hotkey-tabs {
  display: flex;
  gap: 8px
}

.hotkey-tabs button {
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .58);
  font: 760 12px/1 var(--font-sans);
  cursor: pointer;
  padding: 0 13px
}

.hotkey-tabs button.active {
  border-color: rgba(var(--fc-accent-rgb), .35);
  background: rgba(var(--fc-accent-rgb), .12);
  color: #fff
}

.hotkey-note {
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  text-align: right
}

.hotkey-section {
  display: none
}

.hotkey-section.active {
  display: block
}

.hotkey-group {
  margin-top: 12px
}

.hotkey-group-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--fc-accent-rgb), .78);
  margin: 0 0 8px
}

.hotkey-row {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) 180px 86px minmax(126px, 1.15fr);
  gap: 9px;
  align-items: center;
  min-height: 46px;
  margin: 6px 0;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .028)
}

.hotkey-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 760;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hotkey-key {
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font: 760 11.5px/1 var(--font-sans);
  cursor: pointer;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hotkey-key:hover,
.hotkey-key.capturing {
  border-color: rgba(var(--fc-accent-rgb), .42);
  background: rgba(var(--fc-accent-rgb), .10)
}

.hotkey-reset {
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .55);
  font: 700 11px/1 var(--font-sans);
  cursor: pointer
}

.hotkey-reset:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff
}

.hotkey-status {
  min-width: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .46);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hotkey-status.ok {
  color: rgba(126, 226, 168, .78)
}

.hotkey-status.conflict {
  color: rgba(255, 206, 112, .86)
}

.hotkey-status .source-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 206, 112, .12);
  color: #ffce70;
  font-size: 11px;
  flex: 0 0 auto
}

.hotkey-capture-tip {
  display: none;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(var(--fc-accent-rgb), .22);
  background: rgba(var(--fc-accent-rgb), .075);
  font-size: 12px;
  color: rgba(255, 255, 255, .74)
}

.hotkey-modal.capturing .hotkey-capture-tip {
  display: block
}

@media (max-width:720px) {
  .hotkey-row {
    grid-template-columns: 1fr;
    gap: 7px
  }

  .hotkey-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  .hotkey-note {
    text-align: left
  }
}

/* ============================================================ */
/*  歌单/队列面板                                                 */
/* ============================================================ */
#playlist-panel {
  --playlist-panel-open-ms: var(--sumusic-playlist-panel-open-ms, 280ms);
  --playlist-panel-close-ms: var(--sumusic-playlist-panel-close-ms, 180ms);
  --playlist-panel-motion-ms: var(--playlist-panel-open-ms);
  --playlist-sticky-blur: 38px;
  --playlist-toolbar-blur: 28px;
  --playlist-sticky-a1: .94;
  --playlist-sticky-a2: .90;
  --playlist-sticky-a3: .78;
  --playlist-toolbar-a1: .88;
  --playlist-toolbar-a2: .82;
  --playlist-toolbar-a3: .68;
  position: fixed;
  z-index: 17;
  top: 78px;
  left: 32px;
  width: 340px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  background: rgba(12, 12, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--playlist-panel-motion-ms) cubic-bezier(.16, 1, .3, 1), transform var(--playlist-panel-motion-ms) cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  transform: translate3d(calc(-100% - 64px), 0, 0) !important;
  overscroll-behavior: contain;
  will-change: transform, opacity;
  contain: layout paint
}

#playlist-panel.playlist-panel-closing {
  --playlist-panel-motion-ms: var(--playlist-panel-close-ms)
}

#playlist-panel.show,
#playlist-panel.peek {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) !important
}

#playlist-panel.pinned {
  border-color: rgba(var(--fc-accent-rgb), .28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--fc-accent-rgb), .08)
}

body.desktop-shell.desktop-fullscreen #playlist-panel,
html:fullscreen body.desktop-shell #playlist-panel {
  top: clamp(64px, 6vh, 92px);
  left: clamp(24px, 2.2vw, 54px);
  width: clamp(340px, 21vw, 430px);
  max-height: calc(100vh - clamp(96px, 12vh, 142px))
}

@media (max-height:760px) {

  body.desktop-shell.desktop-fullscreen #playlist-panel,
  html:fullscreen body.desktop-shell #playlist-panel {
    top: 56px;
    max-height: calc(100vh - 78px)
  }
}

@media (min-width:2200px) and (min-height:1100px) {

  body.desktop-shell.desktop-fullscreen #playlist-panel,
  html:fullscreen body.desktop-shell #playlist-panel {
    width: clamp(380px, 19vw, 460px)
  }
}

#playlist-panel::-webkit-scrollbar {
  width: 3px
}

#playlist-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--fc-accent-rgb), .20);
  border-radius: 3px
}

.playlist-panel-sticky {
  position: sticky;
  top: -18px;
  z-index: 9;
  margin: -18px -18px 12px;
  padding: 18px 18px 10px;
  border-radius: 20px 20px 15px 15px;
  background: linear-gradient(180deg, rgba(12, 14, 18, var(--playlist-sticky-a1, .94)), rgba(9, 11, 15, var(--playlist-sticky-a2, .90)) 70%, rgba(9, 11, 15, var(--playlist-sticky-a3, .78))), linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028) 42%, rgba(var(--fc-accent-rgb), .048));
  border: 1px solid rgba(255, 255, 255, .090);
  border-top-color: rgba(255, 255, 255, .17);
  backdrop-filter: blur(var(--playlist-sticky-blur, 38px)) saturate(1.34) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--playlist-sticky-blur, 38px)) saturate(1.34) brightness(1.06);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -1px 0 rgba(255, 255, 255, .045);
  isolation: isolate
}

.playlist-panel-sticky::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), rgba(var(--fc-accent-rgb), .22), transparent);
  pointer-events: none
}

.playlist-panel-sticky .queue-head {
  margin-bottom: 10px
}

.playlist-panel-sticky .panel-tabs {
  margin-bottom: 0
}

.playlist-panel-sticky .fx-title {
  color: rgba(255, 255, 255, .96);
  font-weight: 680;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .72), 0 0 18px rgba(255, 255, 255, .08)
}

.playlist-panel-sticky .fx-sub {
  color: rgba(255, 255, 255, .48);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .62)
}

.queue-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px
}

.queue-head-act {
  display: flex;
  align-items: center;
  gap: 6px
}

.playlist-pin-btn {
  width: 30px;
  min-width: 30px;
  flex: 0 0 auto;
  padding: 0
}

.playlist-pin-btn.active {
  border-color: rgba(var(--fc-accent-rgb), .38);
  background: rgba(var(--fc-accent-rgb), .10);
  color: #fff
}

.panel-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

.panel-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  font-size: 11px;
  transition: all .2s;
  font-family: inherit
}

.panel-tab.active {
  background: rgba(0, 245, 212, .10);
  border-color: rgba(0, 245, 212, .34);
  color: #eafffb
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px
}

.queue-virtual-spacer,
.playlist-virtual-spacer,
.pl-detail-virtual-spacer {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  pointer-events: none
}

.queue-hydration-status,
.playlist-catalog-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .48);
  font-size: 10.5px;
  text-align: center
}

.queue-hydration-status.compact {
  min-height: 30px;
  padding: 6px 8px
}

.queue-hydration-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(var(--fc-accent-rgb), .92)
}

.queue-hydration-spinner.spinning {
  animation: sumusic-queue-loading-spin .72s linear infinite
}

@keyframes sumusic-queue-loading-spin {
  to { transform: rotate(360deg) }
}

.queue-hydration-retry {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fc-accent-rgb), .28);
  background: rgba(var(--fc-accent-rgb), .08);
  color: rgba(255, 255, 255, .84);
  font: 700 10px var(--font-sans);
  cursor: pointer
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: all .2s;
  will-change: transform, opacity
}

.queue-item:hover {
  background: rgba(255, 255, 255, .05)
}

.queue-item.now {
  border-color: rgba(0, 245, 212, .34);
  background: rgba(0, 245, 212, .075)
}

.queue-item img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0
}

.qi-info {
  flex: 1;
  min-width: 0
}

.qi-name {
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.queue-item.now .qi-name {
  color: #eafffb
}

.qi-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.queue-artist-link {
  max-width: 100%;
  border: 0;
  background: transparent;
  color: rgba(var(--fc-accent-rgb), .64);
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.queue-artist-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px
}

.qi-act {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s
}

.queue-item:hover .qi-act {
  opacity: 1
}

.qi-act button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  font-size: 13px;
  line-height: 1
}

.qi-act button:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff
}

.qi-act button.queue-next:hover {
  background: rgba(0, 245, 212, .14);
  color: #eafffb
}

.qi-act button.liked,
.song-action-btn.liked {
  color: #ff7a90;
  background: rgba(255, 122, 144, .10)
}

.song-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .58);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .18s;
  font-size: 14px;
  line-height: 1
}

.song-action-btn:hover {
  background: rgba(0, 245, 212, .10);
  border-color: rgba(0, 245, 212, .32);
  color: #eafffb;
  transform: translateY(-1px)
}

.queue-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  font-size: 10.5px;
  color: rgba(255, 255, 255, .65)
}

.queue-toolbar {
  position: sticky;
  top: 82px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -4px 8px;
  padding: 7px 4px 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11, 13, 18, var(--playlist-toolbar-a1, .88)), rgba(8, 10, 14, var(--playlist-toolbar-a2, .82)) 74%, rgba(8, 10, 14, var(--playlist-toolbar-a3, .68))), linear-gradient(135deg, rgba(255, 255, 255, .058), rgba(var(--fc-accent-rgb), .042));
  border: 1px solid rgba(255, 255, 255, .075);
  backdrop-filter: blur(var(--playlist-toolbar-blur, 28px)) saturate(1.25) brightness(1.05);
  -webkit-backdrop-filter: blur(var(--playlist-toolbar-blur, 28px)) saturate(1.25) brightness(1.05);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .085)
}

.queue-toolbar .fx-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1
}

.pl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .04);
  transition: all .2s;
  cursor: pointer;
  margin-bottom: 7px;
  will-change: transform, opacity
}

.pl-card:hover {
  background: rgba(255, 255, 255, .06)
}

.pl-card img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0
}

.pl-load-more {
  width: 100%;
  height: 30px;
  margin: 8px 0 2px;
  display: flex;
  align-items: center;
  justify-content: center
}

.pl-name {
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-section-label {
  margin: 14px 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 245, 212, .50)
}

.pl-inline-detail {
  position: relative;
  margin: -1px 0 14px;
  padding: 0 0 12px;
  scroll-margin-top: 16px;
  height: min(55vh, 520px);
  min-height: 330px;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.pl-detail-sticky {
  position: sticky;
  top: -10px;
  z-index: 4;
  margin: 0 -2px 10px;
  padding: 8px 2px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 17, 24, .92), rgba(14, 17, 24, .76) 68%, rgba(14, 17, 24, 0));
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18)
}

.pl-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.pl-detail-sticky .pl-detail-head {
  margin: 0 0 8px;
  padding-bottom: 8px
}

.pl-detail-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
  flex: 0 0 auto
}

.pl-detail-title {
  font-size: 13px;
  font-weight: 780;
  color: rgba(255, 255, 255, .94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-detail-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .42);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px
}

.pl-detail-play {
  height: 30px;
  min-width: 98px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fc-accent-rgb), .32);
  background: rgba(var(--fc-accent-rgb), .10);
  color: #fff;
  font: 700 11.5px var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer
}

.pl-detail-play svg {
  width: 13px;
  height: 13px;
  fill: currentColor
}

.pl-detail-top-btn {
  height: 30px;
  min-width: 82px;
  flex: 0 0 auto;
  padding: 0 12px
}

.pl-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-behavior: smooth
}

.pl-detail-list::-webkit-scrollbar {
  width: 3px
}

.pl-detail-list::-webkit-scrollbar-thumb {
  background: rgba(var(--fc-accent-rgb), .22);
  border-radius: 3px
}

.pl-detail-loading-row {
  cursor: default;
  min-height: 52px
}

.pl-detail-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .04);
  cursor: pointer
}

.pl-detail-row:hover {
  background: rgba(255, 255, 255, .055)
}

.pl-detail-count {
  margin-left: auto;
  color: rgba(255, 255, 255, .38);
  font-size: 10.5px;
  white-space: nowrap
}

.pl-detail-progress {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .34);
  font-size: 10.5px
}

.pl-detail-load-more {
  width: 100%;
  height: 42px;
  margin: 10px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 760
}

.pl-detail-row img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
  flex: 0 0 auto
}

.pl-detail-row-title {
  font-size: 11.5px;
  font-weight: 650;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-detail-row-artist {
  display: inline-flex;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: rgba(var(--fc-accent-rgb), .68);
  font: 500 10.5px var(--font-sans);
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pl-detail-row-artist:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px
}

.pl-card.expanded {
  border-color: rgba(var(--fc-accent-rgb), .32);
  background: rgba(var(--fc-accent-rgb), .060)
}

.pl-card.podcast-card {
  border-color: rgba(0, 245, 212, .075);
  background: rgba(0, 245, 212, .030)
}

.pl-card.podcast-card:hover {
  border-color: rgba(0, 245, 212, .20);
  background: rgba(0, 245, 212, .070)
}

.pl-card.podcast-child {
  margin-left: 10px;
  background: rgba(255, 255, 255, .03)
}

.podcast-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 7px
}

.podcast-inline-head .pl-section-label {
  margin: 0
}

.panel-tab.active,
.queue-item.now,
.mini-queue-item.now,
.preset-card.active,
.fx-toggle.on,
.fx-seg button.active {
  border-color: rgba(var(--fc-accent-rgb), .34) !important;
  background: rgba(var(--fc-accent-rgb), .085) !important;
  color: #fff !important
}

#search-box:focus-within,
#fx-panel,
#fx-fab,
#fx-fab:hover,
#fx-fab.active,
#upload-btn:hover,
#home-btn:hover {
  border-color: rgba(var(--fc-accent-rgb), .42) !important;
  box-shadow: 0 16px 46px rgba(var(--fc-accent-rgb), .08), inset 0 1px 0 rgba(255, 255, 255, .10)
}

#search-mode-tabs button.active {
  background: rgba(var(--fc-accent-rgb), .12) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(var(--fc-accent-rgb), .28), 0 8px 24px rgba(var(--fc-accent-rgb), .07) !important
}

#search-results::-webkit-scrollbar-thumb,
#fx-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--fc-accent-rgb), .30) !important
}

#fx-panel {
  scrollbar-color: rgba(var(--fc-accent-rgb), .30) transparent !important
}

.preset-card.active .pc-icon,
.fx-section-label,
.fx-fold-head .arrow,
.pl-section-label {
  color: rgba(var(--fc-accent-rgb), .72) !important
}

.lyric-color-row:focus-within,
.fx-slider:focus-within,
.fx-fold.open {
  border-color: rgba(var(--fc-accent-rgb), .18)
}

.song-action-btn:hover,
.qi-act button.queue-next:hover,
.mini-queue-remove.mini-queue-next:hover {
  background: rgba(var(--fc-accent-rgb), .12) !important;
  border-color: rgba(var(--fc-accent-rgb), .30) !important;
  color: #fff !important
}

.pl-section-label,
.fx-section-label,
.fx-fold-head .arrow {
  color: rgba(var(--fc-accent-rgb), .58)
}

.search-result .add-btn:hover,
.quality-option.active,
.fx-mini-btn.active,
.fx-mini-btn.ghost.active,
.playlist-pin-btn.active {
  border-color: rgba(var(--fc-accent-rgb), .38) !important;
  background: rgba(var(--fc-accent-rgb), .12) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(var(--fc-accent-rgb), .08)
}

#home-btn,
#upload-btn,
#play-btn {
  border-color: rgba(var(--fc-accent-rgb), .24) !important
}

#home-btn:hover,
#upload-btn:hover,
#play-btn:hover,
.ctrl-btn:hover {
  border-color: rgba(var(--fc-accent-rgb), .42) !important;
  background: rgba(var(--fc-accent-rgb), .085) !important;
  box-shadow: 0 14px 38px rgba(var(--fc-accent-rgb), .10), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  color: #fff
}

#bottom-bar .ctrl-btn:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .055) 44%, rgba(var(--fc-accent-rgb), .070)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14), 0 0 18px rgba(var(--fc-accent-rgb), .075), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(255, 255, 255, .08) !important;
  color: #fff
}

#play-btn {
  border: 0 !important;
  background: rgba(0, 0, 0, .10) !important;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .34), inset 0 0 10px 4px rgba(255, 255, 255, .13), 0 10px 30px rgba(0, 0, 0, .18) !important
}

#play-btn:hover {
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .42), inset 0 0 12px 5px rgba(255, 255, 255, .17), 0 12px 34px rgba(0, 0, 0, .22), 0 0 18px rgba(var(--fc-accent-rgb), .10) !important;
  color: #fff
}

body.empty-home-active #home-btn {
  border-color: rgba(var(--fc-accent-rgb), .42) !important;
  background: rgba(var(--fc-accent-rgb), .14) !important
}

/* Unified saved glass: keep panels in the same texture as the player bar. */
#search-box,
#search-results,
.search-mode-tabs,
#fx-panel,
#playlist-panel,
#upload-tip,
#trial-banner,
#toast,
#cuefield-feedback,
#source-fallback-notice,
#ai-depth-chip,
#beat-chip,
.modal,
.modal.update-modal,
.track-detail-modal,
.cover-color-pop,
.color-lab-pop,
.visual-guide-card,
.volume-popover,
.quality-popover,
.control-source-switcher,
.lyric-timing-popover,
.mini-queue-popover,
.home-hero,
.home-card,
.home-tile,
.home-mosaic-cell,
.pl-inline-detail,
.local-beat-track,
.custom-lyric-track,
.cover-crop-stage,
#drop-overlay .drop-text {
  background: var(--saved-panel-glass-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-panel-glass-shadow) !important;
  backdrop-filter: var(--saved-panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-filter) !important;
}

html.control-glass-svg-ok #search-results,
html.control-glass-svg-ok #fx-panel,
html.control-glass-svg-ok #playlist-panel,
html.control-glass-svg-ok #upload-tip,
html.control-glass-svg-ok #trial-banner,
html.control-glass-svg-ok #toast,
html.control-glass-svg-ok #cuefield-feedback,
html.control-glass-svg-ok #source-fallback-notice,
html.control-glass-svg-ok #ai-depth-chip,
html.control-glass-svg-ok #beat-chip,
html.control-glass-svg-ok .modal,
html.control-glass-svg-ok .modal.update-modal,
html.control-glass-svg-ok .track-detail-modal,
html.control-glass-svg-ok .cover-color-pop,
html.control-glass-svg-ok .color-lab-pop,
html.control-glass-svg-ok .visual-guide-card,
html.control-glass-svg-ok .volume-popover,
html.control-glass-svg-ok .quality-popover,
html.control-glass-svg-ok .lyric-timing-popover,
html.control-glass-svg-ok .mini-queue-popover,
html.control-glass-svg-ok .home-hero,
html.control-glass-svg-ok .home-card,
html.control-glass-svg-ok .home-tile,
html.control-glass-svg-ok .home-mosaic-cell,
html.control-glass-svg-ok .pl-inline-detail,
html.control-glass-svg-ok .local-beat-track,
html.control-glass-svg-ok .custom-lyric-track,
html.control-glass-svg-ok .cover-crop-stage,
html.control-glass-svg-ok #drop-overlay .drop-text {
  backdrop-filter: var(--saved-panel-glass-svg-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-svg-filter) !important;
}

html.control-glass-svg-ok .control-source-switcher {
  backdrop-filter: var(--saved-panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-filter) !important
}

.icon-btn,
#fx-fab,
.user-capsule-hide-btn,
.fx-mini-btn,
.fx-toggle,
.fx-seg button,
.panel-tab,
.preset-card,
.lyric-color-row,
.fx-slider,
.fx-fold,
.quality-option,
.modal-btn,
.visual-guide-actions button,
.home-chip,
.pl-card,
.queue-item,
.mini-queue-item,
.pl-detail-row,
.pl-detail-play,
.local-beat-tab,
.search-history-chip,
.search-result .add-btn,
.song-action-btn,
.qi-act button,
.mini-queue-remove {
  background: var(--saved-button-glass-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-button-glass-shadow) !important;
  backdrop-filter: var(--saved-button-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-filter) !important;
}

html.control-glass-svg-ok .icon-btn,
html.control-glass-svg-ok #fx-fab,
html.control-glass-svg-ok .user-capsule-hide-btn,
html.control-glass-svg-ok .fx-mini-btn,
html.control-glass-svg-ok .fx-toggle,
html.control-glass-svg-ok .fx-seg button,
html.control-glass-svg-ok .panel-tab,
html.control-glass-svg-ok .preset-card,
html.control-glass-svg-ok .lyric-color-row,
html.control-glass-svg-ok .fx-slider,
html.control-glass-svg-ok .fx-fold,
html.control-glass-svg-ok .quality-option,
html.control-glass-svg-ok .modal-btn,
html.control-glass-svg-ok .visual-guide-actions button,
html.control-glass-svg-ok .home-chip,
html.control-glass-svg-ok .pl-card,
html.control-glass-svg-ok .queue-item,
html.control-glass-svg-ok .mini-queue-item,
html.control-glass-svg-ok .pl-detail-row,
html.control-glass-svg-ok .pl-detail-play,
html.control-glass-svg-ok .local-beat-tab,
html.control-glass-svg-ok .search-history-chip,
html.control-glass-svg-ok .search-result .add-btn,
html.control-glass-svg-ok .song-action-btn,
html.control-glass-svg-ok .qi-act button,
html.control-glass-svg-ok .mini-queue-remove {
  backdrop-filter: var(--saved-button-glass-svg-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-svg-filter) !important;
}

.icon-btn:hover,
#fx-fab:hover,
#fx-fab.active,
.fx-mini-btn:hover,
.fx-mini-btn.active,
.fx-toggle.on,
.fx-seg button.active,
.panel-tab.active,
.preset-card.active,
.quality-option.active,
.modal-btn:hover,
.visual-guide-actions button:hover,
.home-chip:hover,
.home-card:hover,
.home-tile:hover,
.pl-card:hover,
.pl-card.expanded,
.pl-card.podcast-card,
.pl-card.podcast-card:hover,
.queue-item:hover,
.queue-item.now,
.mini-queue-item:hover,
.mini-queue-item.now,
.pl-detail-row:hover,
.pl-detail-play:hover,
.local-beat-tab:hover,
.local-beat-tab.active,
.search-history-chip:hover,
.search-result .add-btn:hover,
.song-action-btn:hover,
.qi-act button:hover,
.mini-queue-remove:hover {
  background: var(--saved-button-glass-hover-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-button-glass-hover-shadow) !important;
  color: #fff !important;
}

.home-hero::before,
.home-card::before,
.home-card::after,
.home-tile::before,
.home-tile::after,
.home-mosaic-cell::before,
.home-mosaic-cell::after,
.modal.update-modal::before,
.visual-guide-card::before,
#upload-tip::before {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.fx-section-label,
.pl-section-label,
.preset-card.active .pc-icon,
.fx-fold-head .arrow,
.visual-guide-kicker {
  color: rgba(255, 255, 255, .68) !important;
  text-shadow: none !important
}

.lyric-color-row:focus-within,
.fx-slider:focus-within,
.fx-fold.open,
#search-box:focus-within {
  border-color: transparent !important;
  box-shadow: var(--saved-panel-glass-shadow) !important
}

/* Left playlist panel rollback: keep this page lightweight. */
#playlist-panel {
  background: rgba(12, 12, 18, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.4) !important
}

#playlist-panel * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important
}

#playlist-panel .playlist-panel-sticky {
  background: linear-gradient(180deg, rgba(12, 14, 18, var(--playlist-sticky-a1, .94)), rgba(9, 11, 15, var(--playlist-sticky-a2, .90)) 70%, rgba(9, 11, 15, var(--playlist-sticky-a3, .78))), linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028) 42%, rgba(var(--fc-accent-rgb), .048)) !important;
  border: 1px solid rgba(255, 255, 255, .090) !important;
  border-top-color: rgba(255, 255, 255, .17) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -1px 0 rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(var(--playlist-sticky-blur, 38px)) saturate(1.34) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(var(--playlist-sticky-blur, 38px)) saturate(1.34) brightness(1.06) !important
}

#playlist-panel .queue-toolbar {
  background: linear-gradient(180deg, rgba(11, 13, 18, var(--playlist-toolbar-a1, .88)), rgba(8, 10, 14, var(--playlist-toolbar-a2, .82)) 74%, rgba(8, 10, 14, var(--playlist-toolbar-a3, .68))), linear-gradient(135deg, rgba(255, 255, 255, .058), rgba(var(--fc-accent-rgb), .042)) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .085) !important;
  backdrop-filter: blur(var(--playlist-toolbar-blur, 28px)) saturate(1.25) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(var(--playlist-toolbar-blur, 28px)) saturate(1.25) brightness(1.05) !important
}

#playlist-panel.pinned {
  border-color: rgba(var(--fc-accent-rgb), .28) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--fc-accent-rgb), .08) !important
}

#playlist-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--fc-accent-rgb), .20) !important
}

#playlist-panel .panel-tab {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .55) !important
}

#playlist-panel .panel-tab.active {
  background: rgba(var(--fc-accent-rgb), .10) !important;
  border-color: rgba(var(--fc-accent-rgb), .34) !important;
  color: #fff !important;
  box-shadow: none !important
}

#playlist-panel .queue-item {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
  color: inherit !important
}

#playlist-panel .queue-item:hover {
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important
}

#playlist-panel .queue-item.now {
  border-color: rgba(var(--fc-accent-rgb), .34) !important;
  background: rgba(var(--fc-accent-rgb), .075) !important;
  box-shadow: none !important
}

#playlist-panel .pl-card {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
  color: inherit !important
}

#playlist-panel .pl-card:hover {
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important
}

#playlist-panel .pl-card.expanded {
  border-color: rgba(var(--fc-accent-rgb), .32) !important;
  background: rgba(var(--fc-accent-rgb), .060) !important;
  box-shadow: none !important
}

#playlist-panel .pl-card.podcast-card {
  border-color: rgba(var(--fc-accent-rgb), .075) !important;
  background: rgba(var(--fc-accent-rgb), .030) !important;
  box-shadow: none !important
}

#playlist-panel .pl-card.podcast-card:hover {
  border-color: rgba(var(--fc-accent-rgb), .20) !important;
  background: rgba(var(--fc-accent-rgb), .070) !important;
  box-shadow: none !important
}

#playlist-panel .pl-card.podcast-child {
  background: rgba(255, 255, 255, .03) !important
}

#playlist-panel .pl-section-label {
  color: rgba(0, 245, 212, .50) !important;
  text-shadow: none !important
}

#playlist-panel .pl-detail-head {
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important
}

#playlist-panel .pl-detail-play {
  background: rgba(var(--fc-accent-rgb), .10) !important;
  border: 1px solid rgba(var(--fc-accent-rgb), .32) !important;
  box-shadow: none !important;
  color: #fff !important
}

#playlist-panel .pl-detail-row {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .04) !important;
  box-shadow: none !important
}

#playlist-panel .pl-detail-row:hover {
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important
}

#playlist-panel .fx-mini-btn {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .78) !important
}

#playlist-panel .fx-mini-btn:hover {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  box-shadow: none !important
}

#playlist-panel .fx-mini-btn.active,
#playlist-panel .fx-mini-btn.ghost.active {
  border-color: rgba(var(--fc-accent-rgb), .38) !important;
  background: rgba(var(--fc-accent-rgb), .10) !important;
  color: #fff !important;
  box-shadow: none !important
}

#playlist-panel .fx-mini-btn.ghost {
  background: transparent !important
}

#playlist-panel .song-action-btn {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .58) !important
}

#playlist-panel .song-action-btn:hover {
  background: rgba(var(--fc-accent-rgb), .10) !important;
  border-color: rgba(var(--fc-accent-rgb), .32) !important;
  color: #fff !important;
  box-shadow: none !important
}

#playlist-panel .qi-act button {
  background: rgba(255, 255, 255, .06) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .55) !important
}

#playlist-panel .qi-act button:hover {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important
}

#playlist-panel .qi-act button.queue-next:hover {
  background: rgba(var(--fc-accent-rgb), .14) !important;
  color: #fff !important
}

.home-card[data-home-tone],
.home-tile[data-home-tone] {
  --tone-a: var(--home-accent);
  --tone-b: color-mix(in srgb, var(--home-accent) 58%, #2442ff);
  --tone-c: color-mix(in srgb, var(--home-accent) 42%, #f8f4ee)
}

.home-hero {
  border-color: color-mix(in srgb, var(--home-accent) 34%, rgba(255, 255, 255, .085));
  background: linear-gradient(145deg, color-mix(in srgb, var(--home-accent) 18%, rgba(33, 29, 34, .64)), rgba(9, 10, 14, .76) 48%, color-mix(in srgb, var(--home-accent) 10%, rgba(17, 20, 25, .70)))
}

.home-hero::before {
  background: linear-gradient(118deg, color-mix(in srgb, var(--home-accent) 18%, rgba(255, 255, 255, .060)), transparent 24%, color-mix(in srgb, var(--home-accent) 13%, rgba(255, 83, 103, .070)) 54%, color-mix(in srgb, var(--home-accent) 15%, rgba(122, 215, 194, .055)) 82%, transparent 100%), linear-gradient(90deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 48px), linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 44px)
}

.home-card,
.home-tile,
.home-mosaic-cell {
  border-color: color-mix(in srgb, var(--home-accent) 22%, rgba(255, 255, 255, .080));
  box-shadow: 0 20px 64px rgba(0, 0, 0, .28), 0 0 26px color-mix(in srgb, var(--home-accent) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .060)
}

.home-card {
  background: linear-gradient(142deg, color-mix(in srgb, var(--home-accent) 13%, rgba(18, 21, 26, .66)), rgba(8, 9, 13, .76))
}

.home-card::before {
  background: linear-gradient(118deg, color-mix(in srgb, var(--home-accent) 24%, transparent), transparent 38%, color-mix(in srgb, var(--home-accent) 14%, transparent) 74%, transparent), linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 38px)
}

.home-card:hover,
.home-tile:hover {
  border-color: color-mix(in srgb, var(--home-accent) 44%, rgba(255, 255, 255, .18));
  box-shadow: 0 26px 78px rgba(0, 0, 0, .34), 0 0 34px color-mix(in srgb, var(--home-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .085)
}

.home-tile {
  background: linear-gradient(145deg, color-mix(in srgb, var(--home-accent) 12%, rgba(255, 255, 255, .060)), rgba(255, 255, 255, .025))
}

.home-sleeve {
  background: linear-gradient(135deg, color-mix(in srgb, var(--home-accent) 72%, rgba(255, 255, 255, .10)), color-mix(in srgb, var(--home-accent) 46%, #2442ff) 48%, rgba(248, 244, 238, .30))
}

.home-disc {
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .10) 0 1px, transparent 1px 10px), conic-gradient(from 210deg, var(--home-accent), color-mix(in srgb, var(--home-accent) 55%, #2442ff), #f8f4ee, color-mix(in srgb, var(--home-accent) 72%, #7ad7c2), var(--home-accent))
}

.home-mosaic-cell:not(.has-cover)::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--home-accent) 68%, transparent), color-mix(in srgb, var(--home-accent) 36%, #2442ff) 46%, rgba(10, 10, 14, .20)), repeating-linear-gradient(110deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 18px)
}

.home-mosaic-cell:nth-child(2):not(.has-cover)::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--home-accent) 72%, #7ad7c2), color-mix(in srgb, var(--home-accent) 42%, #9db8cf) 48%, rgba(10, 10, 14, .24)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 16px)
}

.home-mosaic-cell:nth-child(3):not(.has-cover)::before {
  background: linear-gradient(135deg, rgba(248, 244, 238, .38), color-mix(in srgb, var(--home-accent) 46%, transparent) 58%, rgba(10, 10, 14, .24)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 2px, transparent 2px 15px)
}

.home-hero,
.home-card,
.home-tile,
.home-mosaic-cell {
  background: var(--saved-panel-glass-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-panel-glass-shadow) !important;
  backdrop-filter: var(--saved-panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-filter) !important
}

html.control-glass-svg-ok .home-hero,
html.control-glass-svg-ok .home-card,
html.control-glass-svg-ok .home-tile,
html.control-glass-svg-ok .home-mosaic-cell {
  backdrop-filter: var(--saved-panel-glass-svg-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-svg-filter) !important
}

.home-hero::before,
.home-card::before,
.home-card::after,
.home-tile::before,
.home-tile::after,
.home-mosaic-cell::before,
.home-mosaic-cell::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important
}

/* Stable panel glass: do not reuse the player bar SVG displacement on tall panels. */
:root {
  --panel-glass-filter: blur(22px) saturate(1.22) brightness(1.04);
  --panel-glass-bg: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .10), transparent 34%), radial-gradient(circle at 88% 8%, rgba(var(--home-accent-rgb), .12), transparent 36%), linear-gradient(145deg, rgba(var(--home-accent-rgb), .115), rgba(12, 13, 18, .70) 42%, rgba(2, 3, 5, .66));
  --panel-glass-shadow: 0 24px 78px rgba(0, 0, 0, .44), 0 0 0 1px rgba(255, 255, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -18px 42px rgba(0, 0, 0, .16);
  --panel-button-bg: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(var(--home-accent-rgb), .060) 46%, rgba(0, 0, 0, .14));
}

#search-box,
#search-results,
.search-mode-tabs,
#fx-panel,
#upload-tip,
#trial-banner,
#toast,
#cuefield-feedback,
#source-fallback-notice,
#ai-depth-chip,
#beat-chip,
.modal,
.modal.update-modal,
.track-detail-modal,
.cover-color-pop,
.color-lab-pop,
.visual-guide-card,
.home-hero,
.home-card,
.home-tile,
.home-mosaic-cell,
.pl-inline-detail,
.local-beat-track,
.custom-lyric-track,
.cover-crop-stage,
#drop-overlay .drop-text {
  background: var(--panel-glass-bg) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  box-shadow: var(--panel-glass-shadow) !important;
  backdrop-filter: var(--panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--panel-glass-filter) !important;
}

html.control-glass-svg-ok #search-results,
html.control-glass-svg-ok #fx-panel,
html.control-glass-svg-ok #upload-tip,
html.control-glass-svg-ok #trial-banner,
html.control-glass-svg-ok #toast,
html.control-glass-svg-ok #cuefield-feedback,
html.control-glass-svg-ok #source-fallback-notice,
html.control-glass-svg-ok #ai-depth-chip,
html.control-glass-svg-ok #beat-chip,
html.control-glass-svg-ok .modal,
html.control-glass-svg-ok .modal.update-modal,
html.control-glass-svg-ok .track-detail-modal,
html.control-glass-svg-ok .cover-color-pop,
html.control-glass-svg-ok .color-lab-pop,
html.control-glass-svg-ok .visual-guide-card,
html.control-glass-svg-ok .home-hero,
html.control-glass-svg-ok .home-card,
html.control-glass-svg-ok .home-tile,
html.control-glass-svg-ok .home-mosaic-cell,
html.control-glass-svg-ok .pl-inline-detail,
html.control-glass-svg-ok .local-beat-track,
html.control-glass-svg-ok .custom-lyric-track,
html.control-glass-svg-ok .cover-crop-stage,
html.control-glass-svg-ok #drop-overlay .drop-text {
  backdrop-filter: var(--panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--panel-glass-filter) !important;
}

.icon-btn:not(.ctrl-btn),
#fx-fab,
.user-capsule-hide-btn,
.fx-mini-btn,
.fx-toggle,
.fx-seg button,
.panel-tab,
.preset-card,
.lyric-color-row,
.fx-slider,
.fx-fold,
.quality-option,
.modal-btn,
.visual-guide-actions button,
.home-chip,
.local-beat-tab,
.search-history-chip,
.search-result .add-btn,
.song-action-btn {
  background: var(--panel-button-bg) !important;
  border-color: rgba(255, 255, 255, .070) !important;
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
}

html.control-glass-svg-ok .icon-btn:not(.ctrl-btn),
html.control-glass-svg-ok #fx-fab,
html.control-glass-svg-ok .user-capsule-hide-btn,
html.control-glass-svg-ok .fx-mini-btn,
html.control-glass-svg-ok .fx-toggle,
html.control-glass-svg-ok .fx-seg button,
html.control-glass-svg-ok .panel-tab,
html.control-glass-svg-ok .preset-card,
html.control-glass-svg-ok .lyric-color-row,
html.control-glass-svg-ok .fx-slider,
html.control-glass-svg-ok .fx-fold,
html.control-glass-svg-ok .quality-option,
html.control-glass-svg-ok .modal-btn,
html.control-glass-svg-ok .visual-guide-actions button,
html.control-glass-svg-ok .home-chip,
html.control-glass-svg-ok .local-beat-tab,
html.control-glass-svg-ok .search-history-chip,
html.control-glass-svg-ok .search-result .add-btn,
html.control-glass-svg-ok .song-action-btn {
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
}

html.control-glass-svg-ok #playlist-panel {
  background: rgba(12, 12, 18, .42) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
}

.home-hero,
.home-card,
.home-tile,
.home-mosaic-cell {
  background: linear-gradient(145deg, rgba(var(--home-accent-rgb), .14), rgba(14, 14, 19, .74) 44%, rgba(2, 3, 5, .72)) !important;
  backdrop-filter: blur(26px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.16) !important;
}

.home-hero::before,
.home-card::before,
.home-tile::before,
.home-mosaic-cell::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .055), transparent 28%, rgba(var(--home-accent-rgb), .11) 70%, transparent), linear-gradient(90deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 44px) !important;
  opacity: .62 !important;
  pointer-events: none;
}

.home-card::after,
.home-tile::after,
.home-mosaic-cell::after {
  content: '' !important;
  position: absolute;
  inset: auto 18px 14px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--home-accent-rgb), .30), rgba(255, 255, 255, .12), transparent) !important;
  opacity: .72 !important;
  pointer-events: none;
}

/* Final glass scope: keep SVG only on the search input and main chrome buttons. */
#search-box {
  background: var(--saved-panel-glass-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-panel-glass-shadow) !important;
  backdrop-filter: var(--saved-panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-filter) !important;
}

#home-btn,
#upload-btn,
#visual-guide-btn,
#fx-fab,
#top-right .icon-btn {
  background: var(--saved-button-glass-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-button-glass-shadow) !important;
  backdrop-filter: var(--saved-button-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-filter) !important;
}

html.control-glass-svg-ok #home-btn,
html.control-glass-svg-ok #upload-btn,
html.control-glass-svg-ok #visual-guide-btn,
html.control-glass-svg-ok #fx-fab,
html.control-glass-svg-ok #top-right .icon-btn {
  backdrop-filter: var(--saved-button-glass-svg-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-svg-filter) !important;
}

#search-results,
.search-mode-tabs,
#playlist-panel,
#fx-panel {
  background: rgba(0, 0, 0, .90) !important;
  border: 1px solid rgba(255, 255, 255, .095) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html.control-glass-svg-ok #search-results,
html.control-glass-svg-ok #playlist-panel,
html.control-glass-svg-ok #fx-panel {
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

#search-box {
  position: relative;
  background: rgba(0, 0, 0, .10) !important;
  box-shadow: var(--saved-panel-glass-shadow) !important;
}

#search-box {
  overflow: visible;
  isolation: isolate
}

#search-box::before {
  content: none !important;
}

#search-results {
  background: rgba(0, 0, 0, .90) !important;
  border: 1px solid rgba(255, 255, 255, .095) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html.control-glass-svg-ok #search-results {
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

.fx-mini-btn,
.fx-toggle,
.fx-seg button,
.panel-tab,
.preset-card,
.lyric-color-row,
.quality-option,
.modal-btn,
.search-mode-tabs button,
.visual-guide-actions button,
.home-chip,
.pl-card,
.queue-item,
.mini-queue-item,
.pl-detail-row,
.pl-detail-play,
.local-beat-tab,
.search-history-chip,
.search-result .add-btn,
.song-action-btn,
.qi-act button,
.mini-queue-remove {
  background: rgba(0, 0, 0, .72) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.control-glass-svg-ok .fx-mini-btn,
html.control-glass-svg-ok .fx-toggle,
html.control-glass-svg-ok .fx-seg button,
html.control-glass-svg-ok .search-mode-tabs button,
html.control-glass-svg-ok .panel-tab,
html.control-glass-svg-ok .preset-card,
html.control-glass-svg-ok .lyric-color-row,
html.control-glass-svg-ok .quality-option,
html.control-glass-svg-ok .modal-btn,
html.control-glass-svg-ok .visual-guide-actions button,
html.control-glass-svg-ok .home-chip,
html.control-glass-svg-ok .pl-card,
html.control-glass-svg-ok .queue-item,
html.control-glass-svg-ok .mini-queue-item,
html.control-glass-svg-ok .pl-detail-row,
html.control-glass-svg-ok .pl-detail-play,
html.control-glass-svg-ok .local-beat-tab,
html.control-glass-svg-ok .search-history-chip,
html.control-glass-svg-ok .search-result .add-btn,
html.control-glass-svg-ok .song-action-btn,
html.control-glass-svg-ok .qi-act button,
html.control-glass-svg-ok .mini-queue-remove {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#playlist-panel .pl-section-label,
.search-artist-link,
.queue-artist-link,
.pl-detail-row-artist,
#thumb-artist,
.control-artist {
  color: rgba(255, 255, 255, .92) !important;
}

.search-artist-link:hover,
.queue-artist-link:hover,
.pl-detail-row-artist:hover,
#thumb-artist:hover,
.control-artist:hover {
  color: #fff !important;
  text-shadow: none !important;
}

#playlist-panel .pl-card,
#playlist-panel .queue-item,
#playlist-panel .pl-detail-row {
  background: rgba(0, 0, 0, .72) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#playlist-panel .pl-card:hover,
#playlist-panel .queue-item:hover,
#playlist-panel .pl-detail-row:hover {
  background: rgba(18, 18, 22, .82) !important;
}

#playlist-panel .pl-card.expanded,
#playlist-panel .queue-item.now {
  background: rgba(8, 14, 24, .86) !important;
  border-color: rgba(var(--fc-accent-rgb), .28) !important;
}

html.control-glass-svg-ok .icon-btn,
html.control-glass-svg-ok .fx-mini-btn,
html.control-glass-svg-ok .fx-toggle,
html.control-glass-svg-ok .fx-seg button,
html.control-glass-svg-ok .panel-tab,
html.control-glass-svg-ok .preset-card,
html.control-glass-svg-ok .lyric-color-row,
html.control-glass-svg-ok .quality-option,
html.control-glass-svg-ok .modal-btn,
html.control-glass-svg-ok .visual-guide-actions button,
html.control-glass-svg-ok .home-chip,
html.control-glass-svg-ok .pl-card,
html.control-glass-svg-ok .queue-item,
html.control-glass-svg-ok .mini-queue-item,
html.control-glass-svg-ok .pl-detail-row,
html.control-glass-svg-ok .pl-detail-play,
html.control-glass-svg-ok .local-beat-tab,
html.control-glass-svg-ok .search-history-chip,
html.control-glass-svg-ok .search-result .add-btn,
html.control-glass-svg-ok .song-action-btn,
html.control-glass-svg-ok .qi-act button,
html.control-glass-svg-ok .mini-queue-remove {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.control-glass-svg-ok .home-hero,
html.control-glass-svg-ok .home-card,
html.control-glass-svg-ok .home-tile,
html.control-glass-svg-ok .home-mosaic-cell,
html.control-glass-svg-ok .modal,
html.control-glass-svg-ok .track-detail-modal,
html.control-glass-svg-ok .visual-guide-card,
html.control-glass-svg-ok .volume-popover,
html.control-glass-svg-ok .quality-popover,
html.control-glass-svg-ok .lyric-timing-popover,
html.control-glass-svg-ok .mini-queue-popover,
html.control-glass-svg-ok .pl-inline-detail {
  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

html.control-glass-svg-ok #home-btn,
html.control-glass-svg-ok #upload-btn,
html.control-glass-svg-ok #visual-guide-btn,
html.control-glass-svg-ok #fx-fab,
html.control-glass-svg-ok #top-right .icon-btn {
  backdrop-filter: var(--saved-button-glass-svg-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-svg-filter) !important;
}

#top-right #user-btn.multi-account,
html.control-glass-svg-ok #top-right #user-btn.multi-account,
#top-right #user-btn.multi-account:hover,
html.control-glass-svg-ok #top-right #user-btn.multi-account:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

.top-account-pill {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top-account-pill::before {
  background: var(--saved-button-glass-bg) !important;
  border-color: rgba(244, 210, 138, .44) !important;
  box-shadow: var(--saved-button-glass-shadow) !important;
  backdrop-filter: var(--saved-button-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-button-glass-filter) !important;
}

#user-btn.multi-account:hover .top-account-pill::before {
  background: var(--saved-button-glass-hover-bg) !important;
  border-color: rgba(244, 210, 138, .58) !important;
  box-shadow: var(--saved-button-glass-hover-shadow) !important;
}

html.control-glass-svg-ok .top-account-pill::before {
  backdrop-filter: url(#sumusic-account-pill-glass-filter) saturate(1) !important;
  -webkit-backdrop-filter: url(#sumusic-account-pill-glass-filter) saturate(1) !important;
}

html.control-glass-svg-ok .search-mode-tabs button,
html.control-glass-svg-ok .search-history-chip {
  background: var(--saved-button-glass-bg) !important;
  border-color: transparent !important;
  color: rgba(var(--fc-accent-rgb), .78) !important;
  box-shadow: var(--saved-button-glass-shadow) !important;
  backdrop-filter: url(#sumusic-search-pill-glass-filter) saturate(1) !important;
  -webkit-backdrop-filter: url(#sumusic-search-pill-glass-filter) saturate(1) !important;
  overflow: visible !important;
}

html.control-glass-svg-ok .search-mode-tabs button:hover,
html.control-glass-svg-ok .search-mode-tabs button.active,
html.control-glass-svg-ok .search-history-chip:hover {
  background: var(--saved-button-glass-hover-bg) !important;
  color: rgba(var(--fc-accent-rgb), .98) !important;
  border-color: transparent !important;
  box-shadow: var(--saved-button-glass-hover-shadow) !important;
}

#search-area .search-mode-tabs,
html.control-glass-svg-ok #search-area .search-mode-tabs {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important
}

#search-box {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#search-area.peek #search-box {
  background: var(--saved-panel-glass-bg) !important;
  border: 1px solid transparent;
  box-shadow: var(--saved-panel-glass-shadow) !important;
  backdrop-filter: var(--saved-panel-glass-filter) !important;
  -webkit-backdrop-filter: var(--saved-panel-glass-filter) !important;
}

html.control-glass-svg-ok #search-area.peek #search-box {
  backdrop-filter: url(#sumusic-search-box-glass-filter) saturate(1) !important;
  -webkit-backdrop-filter: url(#sumusic-search-box-glass-filter) saturate(1) !important;
}

html.control-glass-svg-ok #search-box::before {
  content: none !important;
}

#search-box #search-icon,
#search-box #search-input {
  position: relative;
  z-index: 1;
}

#search-results.show:not(.search-history-surface),
html.control-glass-svg-ok #search-results.show:not(.search-history-surface) {
  position: relative;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-top-color: rgba(255, 255, 255, .22) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(18, 20, 26, .28) 42%, rgba(0, 0, 0, .18)) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 34px rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(34px) saturate(1.34) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.34) brightness(1.08) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

#search-results.show:not(.search-history-surface)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .14), transparent 34%, rgba(var(--fc-accent-rgb), .08) 70%, transparent);
  opacity: .34;
  pointer-events: none;
}

#search-results.show:not(.search-history-surface) .search-result,
#search-results.show:not(.search-history-surface) .podcast-result-head,
#search-results.show:not(.search-history-surface) .search-empty {
  position: relative;
  z-index: 1;
}

#search-results.show:not(.search-history-surface) .search-result {
  background: rgba(255, 255, 255, .026) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
}

#search-results.show:not(.search-history-surface) .search-result:hover {
  background: rgba(255, 255, 255, .075) !important;
}

#search-results.search-history-surface,
html.control-glass-svg-ok #search-results.search-history-surface {
  position: relative;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-top-color: rgba(255, 255, 255, .22) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(18, 20, 26, .28) 42%, rgba(0, 0, 0, .18)) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 34px rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(34px) saturate(1.34) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.34) brightness(1.08) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

#search-results.search-history-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .14), transparent 34%, rgba(var(--fc-accent-rgb), .08) 70%, transparent);
  opacity: .34;
  pointer-events: none;
}

#search-results.search-history-surface .search-history {
  position: relative;
  z-index: 1;
  padding: 13px 14px 15px;
}

#search-results.search-history-surface .search-history-head {
  color: rgba(255, 255, 255, .58);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}

#search-results.search-history-surface .search-history-clear {
  color: rgba(var(--fc-accent-rgb), .82);
}

#search-mode-tabs button.active,
.search-history-chip:hover {
  color: rgba(var(--fc-accent-rgb), .96) !important;
}

#home-btn,
#upload-btn,
#visual-guide-btn,
#fx-fab,
#top-right .icon-btn {
  color: rgba(var(--fc-accent-rgb), .82) !important;
}

#home-btn svg,
#upload-btn svg,
#fx-fab svg,
#top-right .icon-btn svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

#home-btn:hover,
#upload-btn:hover,
#visual-guide-btn:hover,
#fx-fab:hover,
#fx-fab.active,
#top-right .icon-btn:hover {
  color: rgba(var(--fc-accent-rgb), 1) !important;
}

#home-btn,
#upload-btn {
  color: var(--home-icon-color) !important;
  border-color: rgba(var(--home-icon-rgb), .42) !important;
  box-shadow: var(--saved-button-glass-shadow), 0 0 18px rgba(var(--home-icon-rgb), .10) !important;
}

#home-btn:hover,
#upload-btn:hover,
body.empty-home-active #home-btn {
  color: var(--home-icon-color) !important;
  border-color: rgba(var(--home-icon-rgb), .68) !important;
  background: rgba(var(--home-icon-rgb), .075) !important;
  box-shadow: var(--saved-button-glass-hover-shadow), 0 0 24px rgba(var(--home-icon-rgb), .16) !important;
}

#visual-guide-btn,
#fx-fab {
  color: var(--visual-icon-color) !important;
  border-color: rgba(var(--visual-icon-rgb), .42) !important;
  box-shadow: var(--saved-button-glass-shadow), 0 0 18px rgba(var(--visual-icon-rgb), .10) !important;
}

#visual-guide-btn:hover,
#fx-fab:hover,
#fx-fab.active {
  color: var(--visual-icon-color) !important;
  border-color: rgba(var(--visual-icon-rgb), .68) !important;
  background: rgba(var(--visual-icon-rgb), .075) !important;
  box-shadow: var(--saved-button-glass-hover-shadow), 0 0 24px rgba(var(--visual-icon-rgb), .16) !important;
}

#visual-guide-btn svg,
#home-btn svg,
#upload-btn svg,
#fx-fab svg {
  stroke: currentColor !important;
}

#visual-guide-btn,
body.desktop-shell #desktop-titlebar #visual-guide-btn,
html.control-glass-svg-ok #visual-guide-btn {
  color: rgba(184, 188, 196, .58) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(36, 38, 44, .46) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#visual-guide-btn:hover,
body.desktop-shell #desktop-titlebar #visual-guide-btn:hover,
html.control-glass-svg-ok #visual-guide-btn:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(72, 76, 86, .72) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* Visual console organization and adaptive popovers. */
.fx-panel-tabs {
  position: sticky;
  top: -18px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: -2px -2px 14px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .50);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.fx-panel-tabs button {
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .52);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}

.fx-panel-tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .055)
}

.fx-panel-tabs button.active {
  color: #fff;
  background: rgba(var(--fc-accent-rgb), .15);
  box-shadow: inset 0 0 0 1px rgba(var(--fc-accent-rgb), .24), 0 8px 22px rgba(var(--fc-accent-rgb), .08);
}

.fx-tab-page {
  display: none
}

.fx-tab-page.active {
  display: block
}

.fx-tab-page>.fx-section-label:first-child {
  margin-top: 0
}

#fx-panel .fx-fold {
  margin-top: 10px
}

#fx-panel .fx-fold.open {
  background: rgba(255, 255, 255, .026)
}

.lyric-color-row.bg-cover-mode #bg-color-picker {
  border-color: rgba(255, 255, 255, .26) !important;
  background: conic-gradient(from 210deg, #f8f4ee, #9db8cf, #2442ff, #f4d28a, #f8f4ee) !important;
  box-shadow: 0 0 0 1px rgba(var(--fc-accent-rgb), .12), 0 10px 24px rgba(0, 0, 0, .22) !important;
}

.lyric-color-row.bg-cover-mode #bg-color-picker::-webkit-color-swatch {
  opacity: .18
}

.lyric-color-row.bg-cover-mode .fx-color-row-label small {
  color: rgba(var(--fc-accent-rgb), .78)
}

.cover-color-pop,
.color-lab-pop {
  transform: none !important;
  max-height: calc(100vh - 28px);
  overflow: auto;
}

@keyframes lyric-glitch-button-shift {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  18% {
    transform: translate3d(-1px, .5px, 0)
  }

  22% {
    transform: translate3d(1.4px, -.5px, 0)
  }

  48% {
    transform: translate3d(.3px, 0, 0)
  }

  52% {
    transform: translate3d(-1.2px, .4px, 0)
  }
}

@keyframes lyric-glitch-scan {
  0% {
    transform: translate3d(-120%, 0, 0);
    opacity: .18
  }

  48% {
    opacity: .72
  }

  100% {
    transform: translate3d(130%, 0, 0);
    opacity: .10
  }
}

.lyric-motion-style-seg button[data-motion="glitch"] {
  position: relative;
  overflow: hidden
}

.lyric-motion-style-seg.glitch-selected button[data-motion="glitch"].active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255, 70, 110, .22), rgba(0, 245, 212, .12) 48%, rgba(126, 90, 255, .18)) !important;
  text-shadow: -1px 0 rgba(255, 70, 110, .72), 1px 0 rgba(0, 245, 212, .62), 0 0 14px rgba(255, 255, 255, .20) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 24px rgba(255, 70, 110, .12), 0 0 28px rgba(0, 245, 212, .08) !important;
  animation: lyric-glitch-button-shift .72s steps(2, end) infinite;
}

.lyric-motion-style-seg.glitch-selected button[data-motion="glitch"].active::before {
  content: '';
  position: absolute;
  inset: -20% auto -20% 0;
  width: 58%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .40), rgba(0, 245, 212, .24), transparent);
  mix-blend-mode: screen;
  animation: lyric-glitch-scan 1.05s cubic-bezier(.16, 1, .3, 1) infinite;
}

.lyric-motion-style-seg.glitch-selected button[data-motion="glitch"].active::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 5px);
  opacity: .18;
  mix-blend-mode: screen;
}

.lyric-glitch-controls {
  display: none;
  margin: 8px 0 12px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 80, 120, .16);
  background: linear-gradient(145deg, rgba(255, 70, 110, .065), rgba(0, 245, 212, .030) 52%, rgba(126, 90, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)
}

.lyric-glitch-controls.show {
  display: block
}

.lyric-glitch-controls .fx-slider {
  margin-bottom: 8px
}

.lyric-glitch-bind {
  width: 100%;
  margin: 0 0 9px;
  min-height: 30px
}

.lyric-glitch-bind.active {
  border-color: rgba(255, 80, 120, .42) !important;
  background: linear-gradient(135deg, rgba(255, 70, 110, .18), rgba(0, 245, 212, .10)) !important;
  color: #fff !important;
  text-shadow: -1px 0 rgba(255, 70, 110, .55), 1px 0 rgba(0, 245, 212, .48)
}

@media (max-width:720px) {
  .fx-panel-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    top: -14px
  }

  .fx-panel-tabs::-webkit-scrollbar {
    display: none
  }

  .fx-panel-tabs button {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 0 10px
  }

  .cover-color-pop,
  .color-lab-pop {
    width: calc(100vw - 28px) !important
  }
}

/* ============================================================ */
/*  舞台歌词 (大字 + 3D 入场 + 呼吸)                              */
/* ============================================================ */
#stage-lyrics {
  display: none
}

.stage-lyric-line {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 76px);
  letter-spacing: 2px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  max-width: 92vw;
  padding: 0 24px;
  text-shadow: 0 0 14px rgba(168, 246, 255, .38), 0 0 36px rgba(143, 233, 255, .30), 0 0 80px rgba(115, 167, 255, .16);
  background: linear-gradient(180deg, rgba(246, 253, 255, 1) 0%, rgba(168, 246, 255, 1) 55%, rgba(126, 205, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 4px 22px rgba(143, 233, 255, .30))
}

.stage-lyric-line.in {
  animation: lyr-in 900ms cubic-bezier(.16, .84, .32, 1.02) forwards, lyr-bob 5.6s ease-in-out 900ms infinite
}

.stage-lyric-line.out {
  animation: lyr-out 700ms cubic-bezier(.55, 0, .85, .45) forwards
}

@keyframes lyr-bob {

  0%,
  100% {
    transform: translate3d(var(--bx, 0px), 0, 0) rotateX(0deg) rotateY(0deg) scale(1)
  }

  25% {
    transform: translate3d(calc(var(--bx, 0px) + 6px), -7px, 12px) rotateX(2deg) rotateY(-1.5deg) scale(1.01)
  }

  50% {
    transform: translate3d(var(--bx, 0px), 3px, 0) rotateX(-1.5deg) rotateY(0deg) scale(.99)
  }

  75% {
    transform: translate3d(calc(var(--bx, 0px) - 6px), -4px, 8px) rotateX(1.2deg) rotateY(1.5deg) scale(1.005)
  }
}

@keyframes lyr-in {
  0% {
    opacity: 0;
    transform: translate3d(var(--inx, -60px), var(--iny, 40px), -160px) rotateX(var(--inrx, 28deg)) rotateY(var(--inry, -22deg)) scale(.7);
    filter: blur(14px) drop-shadow(0 4px 22px rgba(143, 233, 255, .30))
  }

  55% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 4px 22px rgba(143, 233, 255, .30))
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--bx, 0px), 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0) drop-shadow(0 4px 22px rgba(143, 233, 255, .30))
  }
}

@keyframes lyr-out {
  0% {
    opacity: 1;
    transform: translate3d(var(--bx, 0px), 0, 0) rotateX(0) rotateY(0) scale(1);
    filter: blur(0)
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--outx, 60px), var(--outy, -40px), -120px) rotateX(var(--outrx, -22deg)) rotateY(var(--outry, 18deg)) scale(.78);
    filter: blur(10px)
  }
}

/* ============================================================ */
/*  手势 HUD + 手骨架                                            */
/* ============================================================ */
.gesture-hud {
  position: fixed;
  left: 50%;
  bottom: 110px;
  z-index: 21;
  width: min(440px, calc(100vw - 44px));
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(10, 10, 16, .42);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  font-size: 12px;
  color: rgba(255, 255, 255, .80);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: all .2s;
  pointer-events: none;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .4)
}

.gesture-hud.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.gesture-hud b {
  color: var(--champagne);
  font-weight: 600
}

.gesture-confirm {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .52);
  margin-top: 5px
}

.gesture-meter {
  height: 3px;
  background: rgba(255, 255, 255, .10);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px
}

.gesture-meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--champagne);
  border-radius: 4px;
  transition: width .08s linear
}

.gesture-legend {
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  margin-top: 6px;
  line-height: 1.5
}

#hand-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 22;
  opacity: 0;
  transition: opacity .35s
}

#hand-canvas.show {
  opacity: 1
}

/* ============================================================ */
/*  响应式                                                        */
/* ============================================================ */
@media (max-width:720px) {

  #fx-panel,
  #playlist-panel {
    right: 12px;
    left: 12px;
    width: auto;
    top: 76px;
    bottom: auto
  }

  #playlist-panel {
    transform: translate3d(calc(-100% - 28px), 0, 0) !important
  }

  #playlist-panel.show,
  #playlist-panel.peek {
    transform: translate3d(0, 0, 0) !important
  }

  #top-right {
    right: 12px
  }
}

@media (max-width:520px) {

  .preset-grid,
  .fx-toggle-grid {
    grid-template-columns: 1fr
  }

  .fx-slider {
    grid-template-columns: 74px minmax(0, 1fr) 40px 28px;
    gap: 8px;
    padding: 8px
  }

  .lyric-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

#user-btn.multi-account,
html.control-glass-svg-ok #user-btn.multi-account,
#user-btn.multi-account:hover,
html.control-glass-svg-ok #user-btn.multi-account:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

#top-right.account-pill-stack {
  align-items: flex-start
}

#user-btn.multi-account.external-account-pills,
html.control-glass-svg-ok #user-btn.multi-account.external-account-pills,
#user-btn.multi-account.external-account-pills:hover,
html.control-glass-svg-ok #user-btn.multi-account.external-account-pills:hover {
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  max-width: 206px;
  max-height: calc(100vh - 92px);
  overflow: visible
}

#user-btn.multi-account.external-account-pills .top-account-pill {
  width: 190px;
  min-width: 190px;
  justify-content: flex-start
}

#user-btn.multi-account.external-account-pills .top-account-name {
  flex: 1 1 auto;
  max-width: 118px
}

.queue-item[data-queue-index],
.mini-queue-item[data-queue-index],
.pl-card[data-playlist-index] {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none
}

body.panel-reordering {
  cursor: grabbing
}

body.panel-reordering #playlist-panel .queue-item.is-reordering,
body.panel-reordering #playlist-panel .pl-card.is-reordering,
body.panel-reordering .mini-queue-item.is-reordering {
  transform: translateY(-1px) scale(1.012) !important;
  border-color: rgba(var(--fc-accent-rgb), .46) !important;
  background: rgba(var(--fc-accent-rgb), .105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px rgba(var(--fc-accent-rgb), .12) !important;
  opacity: .96
}

.queue-item.reorder-pressing,
.mini-queue-item.reorder-pressing,
.pl-card.reorder-pressing {
  border-color: rgba(var(--fc-accent-rgb), .28) !important
}

/* 左侧歌单详情与整栏共用一条滚动轴：保留虚拟行性能，不再出现内嵌小滚动窗。 */
#playlist-panel .pl-inline-detail {
  min-height: 0;
  display: block;
  overflow: visible;
  box-sizing: border-box;
  margin: -2px 0 16px;
  padding: 10px 8px 14px;
  border: 1px solid rgba(var(--fc-accent-rgb), .30);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(180deg, rgba(var(--fc-accent-rgb), .105), rgba(8, 12, 20, .76) 24%, rgba(4, 7, 12, .56));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05), 0 16px 34px rgba(0, 0, 0, .18)
}

#playlist-panel .pl-detail-sticky {
  position: sticky;
  top: 126px;
  z-index: 8;
  margin: 0 0 8px;
  padding: 8px 2px 8px;
  background: linear-gradient(180deg, rgba(12, 17, 27, .92), rgba(12, 17, 27, .72));
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12)
}

#playlist-panel .pl-detail-list {
  display: block;
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
  scroll-behavior: auto
}

#playlist-panel .pl-detail-row {
  min-height: 50px;
  margin: 0 0 6px;
  box-sizing: border-box
}

#playlist-panel .pl-card.expanded {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  border-radius: 13px 13px 6px 6px;
  border-color: rgba(var(--fc-accent-rgb), .62) !important;
  background: linear-gradient(105deg, rgba(var(--fc-accent-rgb), .20), rgba(10, 16, 27, .92) 58%, rgba(var(--fc-accent-rgb), .10)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 24px rgba(var(--fc-accent-rgb), .09), 0 0 22px rgba(var(--fc-accent-rgb), .14) !important
}

#playlist-panel .pl-card.expanded::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: rgb(var(--fc-accent-rgb));
  box-shadow: 0 0 12px rgba(var(--fc-accent-rgb), .75)
}

/* Visual console task-first layout. Keep the established panel/button glass; only reorganize information. */
.fx-console-toolbar {
  position: sticky;
  top: -18px;
  z-index: 14;
  margin: -2px -2px 14px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  background: rgba(0, 0, 0, .54);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14)
}

.fx-console-search-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 3px 4px 3px 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025)
}

.fx-console-search-row:focus-within {
  border-color: rgba(var(--fc-accent-rgb), .30);
  box-shadow: inset 0 0 0 1px rgba(var(--fc-accent-rgb), .08), 0 8px 24px rgba(var(--fc-accent-rgb), .06)
}

.fx-console-search-icon {
  color: rgba(255, 255, 255, .44);
  font-size: 19px;
  line-height: 1;
  text-align: center;
  transform: translateY(-1px)
}

.fx-console-search {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 3px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font: 500 11.5px/1 var(--font-sans)
}

.fx-console-search::placeholder {
  color: rgba(255, 255, 255, .30)
}

.fx-console-search::-webkit-search-cancel-button {
  opacity: .55;
  filter: invert(1)
}

.fx-console-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .62);
  font: 700 10px/1 var(--font-sans);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, opacity .18s
}

.fx-console-tool-btn:hover:not(:disabled),
.fx-console-tool-btn[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(var(--fc-accent-rgb), .28);
  background: rgba(var(--fc-accent-rgb), .10)
}

.fx-console-tool-btn:disabled {
  opacity: .30;
  cursor: default
}

.fx-console-toolbar .fx-panel-tabs {
  position: static;
  display: flex;
  gap: 4px;
  margin: 5px 0 0;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: none
}

.fx-console-toolbar .fx-panel-tabs::-webkit-scrollbar {
  display: none
}

.fx-console-toolbar .fx-panel-tabs button {
  flex: 1 0 52px;
  min-width: 52px;
  height: 27px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10.5px
}

.fx-console-popover {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 45px;
  z-index: 30;
  max-height: min(46vh, 340px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(7, 9, 13, .96);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12)
}

.fx-console-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  text-align: left;
  cursor: pointer
}

.fx-console-search-result:hover,
.fx-console-search-result:focus-visible {
  outline: 0;
  background: rgba(var(--fc-accent-rgb), .10)
}

.fx-console-result-main,
.fx-console-history-item>span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}

.fx-console-result-main strong,
.fx-console-history-item strong {
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fx-console-breadcrumb,
.fx-console-history-item small,
.fx-console-popover-head small {
  color: rgba(255, 255, 255, .36);
  font-size: 9.5px;
  font-weight: 500
}

.fx-console-search-result>b {
  flex: 0 0 auto;
  max-width: 96px;
  overflow: hidden;
  color: rgba(var(--fc-accent-rgb), .74);
  font-size: 9.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fx-console-empty {
  padding: 18px 10px;
  color: rgba(255, 255, 255, .40);
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center
}

.fx-console-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.fx-console-popover-head strong {
  color: rgba(255, 255, 255, .84);
  font-size: 11px
}

.fx-console-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 48px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .045)
}

.fx-console-history-item:last-child {
  border-bottom: 0
}

.fx-console-history-item button {
  flex: 0 0 auto;
  height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(var(--fc-accent-rgb), .20);
  border-radius: 7px;
  background: rgba(var(--fc-accent-rgb), .065);
  color: rgba(255, 255, 255, .68);
  font: 700 9.5px/1 var(--font-sans);
  cursor: pointer
}

.fx-console-history-item button:hover {
  color: #fff;
  background: rgba(var(--fc-accent-rgb), .13)
}

.fx-console-tool-btn:focus-visible,
.fx-console-toolbar .fx-panel-tabs button:focus-visible,
#fx-panel .fx-console-group .fx-console-group-head:focus-visible,
.fx-console-history-item button:focus-visible {
  outline: 1px solid rgba(var(--fc-accent-rgb), .76);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(var(--fc-accent-rgb), .12)
}

#fx-panel .fx-console-group {
  margin: 0 0 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .024)
}

#fx-panel .fx-console-group .fx-console-group-head {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left
}

#fx-panel .fx-console-group .fx-console-group-body,
#fx-panel .fx-console-group.open .fx-console-group-body {
  display: none;
  padding: 0 11px 11px
}

#fx-panel .fx-console-group.open .fx-console-group-body {
  display: block
}

#fx-panel .fx-console-group.open .fx-console-group-head {
  color: #fff;
  background: rgba(255, 255, 255, .024)
}

.fx-console-toggle-grid {
  margin-bottom: 9px
}

.fx-console-group-body>.fx-slider:first-child,
.fx-console-group-body>.lyric-color-row:first-child,
.fx-console-group-body>.fx-seg:first-child,
.fx-console-group-body>.fx-toggle-grid:first-child {
  margin-top: 2px
}

@keyframes fx-console-search-hit {
  0%, 100% {
    outline-color: transparent
  }
  18%, 76% {
    outline-color: rgba(var(--fc-accent-rgb), .96)
  }
}

#fx-panel .fx-search-hit {
  outline: 2px solid transparent;
  outline-offset: -2px;
  animation: fx-console-search-hit 1.55s cubic-bezier(.16, 1, .3, 1)
}

#fx-panel .fx-console-group-body .lyric-color-row.image-pick-row {
  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 56%);
  max-width: 100%;
  box-sizing: border-box
}

#fx-panel .fx-console-group-body .image-pick-row .fx-color-row-label {
  min-width: 0;
  overflow: hidden
}

#fx-panel .fx-console-group-body .image-pick-row .fx-color-row-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#fx-panel .fx-console-group-body .bg-media-actions,
#fx-panel .fx-console-group-body .wallpaper-engine-actions {
  width: 100%;
  min-width: 0
}

#fx-panel .fx-console-group-body .bg-media-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

#fx-panel .fx-console-group-body .wallpaper-engine-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

#fx-panel .fx-console-group-body .image-pick-row .fx-mini-btn {
  overflow: hidden;
  text-overflow: ellipsis
}

@media (max-width:720px) {
  .fx-console-toolbar {
    top: -14px
  }

  .fx-console-toolbar .fx-panel-tabs {
    top: auto
  }

  .fx-console-toolbar .fx-panel-tabs button {
    flex: 0 0 56px;
    min-width: 56px;
    padding: 0 8px
  }
}

@media (max-width:520px) {
  .fx-console-tool-btn span {
    display: none
  }

  .fx-console-tool-btn {
    width: 28px;
    padding: 0
  }

  .fx-console-search-row {
    grid-template-columns: 20px minmax(0, 1fr) 28px 28px
  }

  #fx-panel .fx-console-group-body .lyric-color-row.image-pick-row {
    grid-template-columns: 42px minmax(0, 1fr)
  }

  #fx-panel .fx-console-group-body .bg-media-actions,
  #fx-panel .fx-console-group-body .wallpaper-engine-actions {
    grid-column: 1 / -1
  }
}

@media (max-height:760px) {
  .fx-console-toolbar {
    top: -14px
  }

  #fx-panel .fx-console-group .fx-console-group-head {
    min-height: 46px;
    padding: 8px 10px
  }

  .fx-console-popover {
    max-height: min(44vh, 280px)
  }
}

@media (prefers-reduced-motion:reduce) {
  #fx-panel .fx-search-hit {
    animation: none;
    outline-color: rgba(var(--fc-accent-rgb), .92)
  }
}

/* ---------- Home dashboard (scoped; does not alter player/control glass) ---------- */
#empty-home .empty-home-shell {
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.78fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden
}

#empty-home .home-hero {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 0;
  height: 100%;
  padding: 0;
  contain: layout paint style;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden
}

#empty-home .daily-review-card {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  background:
    radial-gradient(520px 420px at 20% 12%, rgba(var(--fc-accent-rgb), .18), transparent 64%),
    radial-gradient(360px 320px at 96% 4%, rgba(76, 100, 255, .17), transparent 66%),
    linear-gradient(160deg, rgba(26, 31, 41, .38), rgba(4, 6, 10, .88));
  color: #fff;
  contain: layout paint style;
  isolation: isolate;
  filter: brightness(1) saturate(1);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: filter .28s ease
}

#empty-home .daily-review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, .02), rgba(3, 5, 9, .88) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 42px);
  opacity: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity .28s ease
}

#empty-home .daily-review-card>:not(.home-dashboard-video) {
  position: relative;
  z-index: 2
}

#empty-home .home-dashboard-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background: #050608
}

@media (hover:hover) {
  #empty-home .daily-review-card:hover {
    filter: brightness(1.055) saturate(1.06)
  }

  #empty-home .daily-review-card:hover::before {
    opacity: .56
  }
}

#empty-home .daily-review-date {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .62);
  text-transform: uppercase
}

#empty-home .daily-review-art {
  width: clamp(110px, 25%, 150px);
  max-height: 260px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto clamp(14px, 2vh, 22px);
  opacity: .9;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .42));
  pointer-events: none;
  user-select: none
}

#empty-home .daily-review-time {
  margin-top: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 12px 38px rgba(0, 0, 0, .54)
}

#empty-home .daily-review-quote {
  margin-top: 24px;
  font-size: clamp(21px, 2.2vw, 34px);
  font-weight: 760;
  line-height: 1.36;
  letter-spacing: .01em;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .68)
}

#empty-home .daily-review-source {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .58)
}

#empty-home .daily-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px
}

#empty-home .daily-review-actions button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(0, 0, 0, .26);
  color: rgba(255, 255, 255, .78);
  font: 700 11px inherit;
  cursor: pointer;
  backdrop-filter: blur(12px)
}

#empty-home .daily-review-actions button:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff
}

#empty-home .home-grid.home-quick-grid {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: minmax(320px, 1.75fr) repeat(3, minmax(145px, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  gap: 13px;
  overflow: visible
}

#empty-home .home-grid.home-quick-grid .home-card {
  min-height: 158px;
  height: auto;
  padding: 20px
}

#empty-home .home-grid.home-quick-grid .home-card-featured {
  min-height: 176px
}

#empty-home .home-grid.home-quick-grid .home-card-featured .home-card-title {
  max-width: calc(100% - 142px);
  font-size: 24px
}

#empty-home .home-grid.home-quick-grid .home-card-featured .home-card-sub {
  max-width: calc(100% - 142px);
  font-size: 12.5px
}

#empty-home .home-grid.home-quick-grid .home-card-featured .home-card-art {
  right: 20px;
  bottom: 20px;
  width: 126px;
  height: 126px;
  border-radius: 26px
}

#empty-home .home-grid.home-quick-grid .home-card-quick .home-card-title {
  max-width: calc(100% - 78px);
  font-size: 18px
}

#empty-home .home-grid.home-quick-grid .home-card-quick .home-card-sub {
  max-width: calc(100% - 74px);
  display: -webkit-box;
  overflow: hidden;
  font-size: 10.5px;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

#empty-home .home-grid.home-quick-grid .home-card-quick .home-card-art {
  right: 14px;
  bottom: 14px;
  width: 70px;
  height: 70px;
  border-radius: 18px
}

#empty-home .home-insight-rail {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-height: 0;
  align-self: stretch;
  padding-top: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent
}

#empty-home .home-insight-rail::-webkit-scrollbar {
  width: 5px
}

#empty-home .home-insight-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, .18)
}

#empty-home .home-insight-dock {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: 13px;
  min-height: 132px
}

#empty-home .home-insight-card {
  position: relative;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 22px;
  background: linear-gradient(142deg, rgba(20, 24, 31, .62), rgba(7, 9, 13, .72));
  box-shadow: 0 20px 62px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .075);
  color: #fff;
  backdrop-filter: blur(25px) saturate(1.18)
}

#empty-home .home-insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(340px 160px at 4% 0, rgba(var(--fc-accent-rgb), .13), transparent 68%),
    linear-gradient(112deg, rgba(255, 255, 255, .045), transparent 33%, rgba(157, 184, 207, .045));
  opacity: .92
}

#empty-home .home-insight-card>* {
  position: relative;
  z-index: 1
}

#empty-home .home-listen-card {
  padding: 18px 20px
}

#empty-home .home-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

#empty-home .home-insight-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(var(--fc-accent-rgb), .82)
}

#empty-home .home-insight-link {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font: 700 10px inherit;
  cursor: pointer
}

#empty-home .home-insight-link:hover {
  color: #fff
}

#empty-home .home-listen-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 17px
}

#empty-home .home-listen-metric {
  min-width: 0
}

#empty-home .home-listen-metric+.home-listen-metric {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .085)
}

#empty-home .home-listen-value {
  display: block;
  overflow: hidden;
  font-size: 21px;
  font-weight: 780;
  line-height: 1.05;
  color: rgba(255, 255, 255, .96);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums
}

#empty-home .home-listen-label {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, .43);
  white-space: nowrap;
  text-overflow: ellipsis
}

#empty-home .home-next-card {
  width: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s
}

#empty-home .home-next-card:hover,
#empty-home .home-ranking-entry:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--fc-accent-rgb), .38);
  background: linear-gradient(142deg, rgba(28, 34, 43, .72), rgba(7, 9, 14, .80));
  box-shadow: 0 25px 72px rgba(0, 0, 0, .31), 0 0 30px rgba(var(--fc-accent-rgb), .075), inset 0 1px 0 rgba(255, 255, 255, .10)
}

#empty-home .home-next-cover {
  width: 82px;
  height: 82px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .38), rgba(36, 66, 255, .30), rgba(8, 10, 14, .86));
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .14)
}

#empty-home .home-next-copy,
#empty-home .home-ranking-entry-copy {
  min-width: 0
}

#empty-home .home-next-title {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 760;
  color: rgba(255, 255, 255, .96);
  white-space: nowrap;
  text-overflow: ellipsis
}

#empty-home .home-next-sub {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .48);
  white-space: nowrap;
  text-overflow: ellipsis
}

#empty-home .home-next-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .68);
  font-size: 17px
}

#empty-home .home-ranking-entry {
  width: 100%;
  min-height: 94px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s
}

#empty-home .home-ranking-entry-title {
  display: block;
  margin-top: 7px;
  font-size: 18px;
  font-weight: 790;
  color: rgba(255, 255, 255, .97)
}

#empty-home .home-ranking-entry-sub {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .48);
  white-space: nowrap;
  text-overflow: ellipsis
}

#empty-home .home-ranking-entry-art {
  height: 52px;
  padding: 4px 8px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(var(--fc-accent-rgb), .14), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11)
}

#empty-home .home-ranking-entry-art i {
  display: block;
  width: 9px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(var(--fc-accent-rgb), .48));
  box-shadow: 0 0 14px rgba(var(--fc-accent-rgb), .16)
}

#empty-home .home-ranking-entry-art i:nth-child(1) {
  height: 22px;
  opacity: .58
}

#empty-home .home-ranking-entry-art i:nth-child(2) {
  height: 38px
}

#empty-home .home-ranking-entry-art i:nth-child(3) {
  height: 29px;
  opacity: .76
}

#empty-home .home-ranking-entry-art i:nth-child(4) {
  height: 44px;
  opacity: .92
}

#empty-home .home-ranking-entry-art i:nth-child(5) {
  height: 18px;
  opacity: .48
}

#empty-home .home-radio-entry {
  background: linear-gradient(142deg, rgba(21, 29, 36, .66), rgba(9, 10, 16, .76))
}

#empty-home .home-radio-entry-art {
  position: relative;
  width: 64px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--fc-accent-rgb), .23), transparent 60%), rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11)
}

#empty-home .home-radio-entry-art::before {
  content: '';
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(var(--fc-accent-rgb), .12), 0 0 22px rgba(var(--fc-accent-rgb), .24)
}

#empty-home .home-radio-entry-art i,
#empty-home .home-radio-entry-art i::before,
#empty-home .home-radio-entry-art i::after {
  content: '';
  position: absolute;
  display: block;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72)
}

#empty-home .home-radio-entry-art i {
  left: 10px;
  height: 13px
}

#empty-home .home-radio-entry-art i::before {
  top: -6px;
  left: 6px;
  height: 25px
}

#empty-home .home-radio-entry-art i::after {
  top: -3px;
  left: 12px;
  height: 19px
}

#empty-home .home-radio-entry-art i:last-child {
  right: 10px;
  left: auto;
  transform: scaleX(-1)
}

#empty-home .home-discovery-strip {
  grid-column: 1 / -1;
  min-height: 104px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(160px, .48fr) minmax(0, 1.52fr);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 21px;
  background: linear-gradient(120deg, rgba(16, 20, 27, .55), rgba(7, 9, 13, .66));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #fff;
  backdrop-filter: blur(25px) saturate(1.18);
  -webkit-backdrop-filter: blur(25px) saturate(1.18);
  contain: layout paint style;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s
}

#empty-home .home-discovery-copy {
  min-width: 0;
  padding-left: 4px
}

#empty-home .home-discovery-title {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  font-weight: 790;
  color: rgba(255, 255, 255, .96)
}

#empty-home .home-discovery-sub {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .43)
}

#empty-home .home-discovery-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px
}

#empty-home .home-discovery-list.is-empty {
  grid-template-columns: 1fr
}

#empty-home .home-discovery-song {
  min-width: 0;
  height: 78px;
  padding: 8px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s
}

#empty-home .home-discovery-song:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--fc-accent-rgb), .32);
  background: rgba(var(--fc-accent-rgb), .07)
}

#empty-home .home-discovery-cover {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .30), rgba(36, 66, 255, .24), rgba(8, 10, 14, .86));
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
}

#empty-home .home-discovery-song-copy {
  min-width: 0
}

#empty-home .home-discovery-song-name,
#empty-home .home-discovery-song-artist {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

#empty-home .home-discovery-song-name {
  font-size: 12px;
  font-weight: 760
}

#empty-home .home-discovery-song-artist {
  margin-top: 6px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .44)
}

#empty-home .home-discovery-empty {
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  color: rgba(255, 255, 255, .82);
  font-family: inherit;
  text-align: left;
  cursor: pointer
}

#empty-home .home-discovery-empty span {
  font-size: 10px;
  color: rgba(255, 255, 255, .43)
}

#empty-home .home-discovery-song:focus-visible,
#empty-home .home-discovery-empty:focus-visible {
  outline: 1px solid rgba(var(--fc-accent-rgb), .82);
  outline-offset: 2px
}

#empty-home .home-legacy-rail {
  display: none
}

@media (min-width:761px) and (max-width:1500px) {
  #empty-home .home-grid.home-quick-grid {
    grid-template-columns: minmax(250px, 1.55fr) repeat(3, minmax(110px, 1fr))
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured {
    grid-column: auto
  }

  #empty-home .home-grid.home-quick-grid .home-card-quick {
    min-height: 142px;
    padding: 16px
  }

  #empty-home .home-grid.home-quick-grid .home-card-quick .home-card-title {
    max-width: calc(100% - 62px);
    font-size: 16px
  }

  #empty-home .home-grid.home-quick-grid .home-card-quick .home-card-art {
    right: 11px;
    bottom: 11px;
    width: 58px;
    height: 58px;
    border-radius: 15px
  }

  #empty-home .home-insight-card,
  #empty-home .home-next-card {
    min-height: 118px
  }
}

@media (min-width:761px) and (max-width:1060px) {
  #empty-home .home-grid.home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured {
    grid-column: auto;
    min-height: 126px
  }

  #empty-home .home-grid.home-quick-grid .home-card {
    min-height: 116px;
    padding: 14px
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured .home-card-title {
    max-width: calc(100% - 104px);
    font-size: 20px
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured .home-card-sub {
    max-width: calc(100% - 104px)
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured .home-card-art {
    right: 14px;
    bottom: 14px;
    width: 92px;
    height: 92px;
    border-radius: 21px
  }
}

@media (min-width:761px) and (max-height:980px) {
  #empty-home .empty-home-shell {
    min-height: 0;
    contain: layout paint style;
    transform: translateZ(0)
  }

  #empty-home .home-grid.home-quick-grid {
    min-height: 0;
    height: auto
  }

  #empty-home .home-insight-rail {
    padding-right: 5px;
    padding-bottom: 18px;
    scrollbar-gutter: stable
  }

  #empty-home .home-card,
  #empty-home .home-insight-card,
  #empty-home .home-discovery-strip {
    contain: layout paint style;
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .065)
  }
}

@media (min-width:761px) {
  body.empty-home-active:not(.desktop-shell) #empty-home,
  body.empty-home-active:not(.desktop-shell).controls-visible #empty-home {
    bottom: 128px
  }

  body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active #empty-home,
  body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active.controls-visible #empty-home,
  html:fullscreen body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active #empty-home,
  html:fullscreen body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active.controls-visible #empty-home {
    bottom: 126px
  }
}

@media (min-width:761px) and (max-height:760px) {
  body.empty-home-active:not(.desktop-shell) #empty-home,
  body.empty-home-active:not(.desktop-shell).controls-visible #empty-home,
  body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active #empty-home,
  body.desktop-shell:not(.desktop-wallpaper-mode).empty-home-active.controls-visible #empty-home {
    bottom: 122px
  }
}

@media (max-width:760px) {
  #empty-home .empty-home-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 55vh) auto auto;
    overflow: auto
  }

  #empty-home .home-hero {
    grid-column: 1;
    grid-row: 1;
    height: auto
  }

  #empty-home .home-grid.home-quick-grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr
  }

  #empty-home .home-grid.home-quick-grid .home-card-featured {
    grid-column: auto
  }

  #empty-home .home-insight-rail {
    grid-column: 1;
    grid-row: 3;
    overflow: visible
  }

  #empty-home .home-insight-dock {
    grid-template-columns: 1fr
  }

  #empty-home .home-discovery-strip {
    grid-template-columns: 1fr
  }

  #empty-home .home-discovery-list {
    grid-template-columns: 1fr
  }

  #empty-home .home-discovery-song {
    height: 70px
  }

  #empty-home .home-listen-metrics {
    gap: 8px
  }

  #empty-home .home-listen-metric+.home-listen-metric {
    padding-left: 8px
  }

  #empty-home .home-listen-value {
    font-size: 18px
  }
}

.home-platform-recommend-modal {
  width: min(820px, 92vw);
  max-width: min(820px, 92vw);
  max-height: min(84vh, 760px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left
}

.home-platform-recommend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px
}

.home-platform-recommend-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 780
}

.home-platform-recommend-head p {
  margin: 0;
  color: rgba(255, 255, 255, .48);
  font-size: 11px;
  line-height: 1.55
}

.home-platform-recommend-close {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .72);
  font: 400 22px/1 inherit;
  cursor: pointer
}

.home-platform-recommend-tabs {
  display: flex;
  gap: 7px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none
}

.home-platform-recommend-tabs::-webkit-scrollbar {
  display: none
}

.home-platform-recommend-tabs button,
.home-platform-recommend-actions button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .63);
  font: 700 11px inherit;
  white-space: nowrap;
  cursor: pointer
}

.home-platform-recommend-tabs button.active,
.home-platform-recommend-tabs button[aria-selected="true"] {
  border-color: rgba(var(--fc-accent-rgb), .46);
  background: rgba(var(--fc-accent-rgb), .12);
  color: #fff
}

.home-platform-recommend-status {
  min-height: 17px;
  margin-top: 13px;
  color: rgba(255, 255, 255, .45);
  font-size: 10.5px
}

.home-platform-recommend-status.is-error {
  color: rgba(255, 190, 154, .82)
}

.home-platform-recommend-list {
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(56vh, 500px);
  margin-top: 8px;
  padding-right: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent
}

.home-platform-recommend-list section+section {
  margin-top: 18px
}

.home-platform-recommend-list h3 {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em
}

.home-platform-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.home-platform-recommend-card {
  min-width: 0;
  min-height: 76px;
  padding: 8px 10px 8px 8px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  background: rgba(255, 255, 255, .032);
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease
}

.home-platform-recommend-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--fc-accent-rgb), .34);
  background: rgba(var(--fc-accent-rgb), .065)
}

.home-platform-recommend-cover {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--fc-accent-rgb), .28), rgba(36, 66, 255, .22), rgba(8, 10, 14, .9));
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24)
}

.home-platform-recommend-copy {
  min-width: 0
}

.home-platform-recommend-copy>* {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.home-platform-recommend-label {
  color: rgba(var(--fc-accent-rgb), .72);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .05em
}

.home-platform-recommend-copy strong {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 760
}

.home-platform-recommend-copy small {
  margin-top: 5px;
  color: rgba(255, 255, 255, .42);
  font-size: 9.5px
}

.home-platform-recommend-arrow {
  color: rgba(255, 255, 255, .4);
  font-size: 19px
}

.home-platform-recommend-empty,
.home-platform-recommend-loading {
  min-height: 180px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(255, 255, 255, .11);
  border-radius: 16px;
  color: rgba(255, 255, 255, .67);
  text-align: center
}

.home-platform-recommend-empty span,
.home-platform-recommend-loading {
  color: rgba(255, 255, 255, .42);
  font-size: 10.5px;
  line-height: 1.6
}

.home-platform-recommend-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px
}

.home-platform-recommend-actions button:last-child {
  border-color: rgba(var(--fc-accent-rgb), .42);
  color: #fff
}

@media (max-width:640px) {
  .home-platform-recommend-modal {
    padding: 18px
  }

  .home-platform-recommend-grid {
    grid-template-columns: 1fr
  }

  .home-platform-recommend-list {
    max-height: 58vh
  }
}

/* Full-desktop work-area layout. These offsets are renderer DIPs supplied by
   Electron, so a bottom/side taskbar never covers desktop-mode controls. */
:root {
  --desktop-safe-top: 0px;
  --desktop-safe-right: 0px;
  --desktop-safe-bottom: 0px;
  --desktop-safe-left: 0px;
}

body.desktop-shell.desktop-wallpaper-mode #desktop-titlebar {
  display: none !important;
}

body.desktop-wallpaper-mode.desktop-wallpaper-interactive #desktop-mode-control-dock {
  top: calc(var(--desktop-safe-top) + 16px);
  right: calc(var(--desktop-safe-right) + 24px);
}

/* Explorer's layered colour-key host can be reported as fully occluded while
   the main HWND is being reparented. Chromium then freezes a newly started
   opacity transition at its transparent first frame even though the final
   class is already correct. Full desktop uses an immediate outer HUD state;
   the existing glass/filter contents and their own animations stay untouched. */
body.desktop-wallpaper-hud-prime.desktop-wallpaper-mode.desktop-wallpaper-interactive #bottom-bar,
body.desktop-wallpaper-hud-prime.desktop-wallpaper-mode.desktop-wallpaper-interactive #empty-home {
  transition: none !important;
}

/* The desktop renderer can be reported as occluded while Explorer reparents
   it. Keep the final functional surfaces explicit so an opacity transition
   cannot remain frozen on its transparent first sample. This only fixes the
   outer visibility state; the saved player glass/filter texture is untouched. */
body.desktop-wallpaper-mode.desktop-wallpaper-interactive.empty-home-active #empty-home {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body.desktop-wallpaper-mode.desktop-wallpaper-interactive:not(.empty-home-active):not(.home-controls-locked) #bottom-bar.visible:not(.soft-hidden) {
  opacity: .91 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
  top: calc(var(--desktop-safe-top) + 62px);
  right: calc(var(--desktop-safe-right) + 24px);
}

body.desktop-mode-controls-open.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
  top: calc(var(--desktop-safe-top) + 137px);
}

body.desktop-wallpaper-mode #bottom-handle {
  left: calc(50% + (var(--desktop-safe-left) - var(--desktop-safe-right)) / 2);
  bottom: calc(var(--desktop-safe-bottom) + 13px);
}

body.desktop-wallpaper-mode #bottom-bar,
body.desktop-wallpaper-mode #bottom-bar.stage-mode,
body.desktop-wallpaper-mode.simple-mode #bottom-bar,
body.desktop-wallpaper-mode.diy-mode #bottom-bar,
body.desktop-wallpaper-mode.diy-mode #bottom-bar.stage-mode,
body.desktop-shell.desktop-wallpaper-mode.diy-mode #bottom-bar,
body.desktop-shell.desktop-wallpaper-mode.diy-mode #bottom-bar.stage-mode {
  left: calc(50% + (var(--desktop-safe-left) - var(--desktop-safe-right)) / 2);
  bottom: calc(var(--desktop-safe-bottom) + 16px);
  width: min(1120px, calc(100vw - var(--desktop-safe-left) - var(--desktop-safe-right) - 48px));
}

@media (max-width:720px) {
  body.desktop-wallpaper-mode.desktop-wallpaper-interactive #desktop-mode-control-dock {
    right: calc(var(--desktop-safe-right) + 12px);
  }

  body.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
    top: calc(var(--desktop-safe-top) + 58px);
    right: calc(var(--desktop-safe-right) + 12px);
  }

  body.desktop-mode-controls-open.desktop-shell.desktop-wallpaper-mode.desktop-wallpaper-interactive #top-right {
    top: calc(var(--desktop-safe-top) + 133px);
  }

  body.desktop-wallpaper-mode #bottom-bar,
  body.desktop-wallpaper-mode #bottom-bar.stage-mode,
  body.desktop-wallpaper-mode.simple-mode #bottom-bar,
  body.desktop-wallpaper-mode.diy-mode #bottom-bar,
  body.desktop-wallpaper-mode.diy-mode #bottom-bar.stage-mode,
  body.desktop-shell.desktop-wallpaper-mode.diy-mode #bottom-bar,
  body.desktop-shell.desktop-wallpaper-mode.diy-mode #bottom-bar.stage-mode {
    width: calc(100vw - var(--desktop-safe-left) - var(--desktop-safe-right) - 24px);
  }
}