/* Shared glass surfaces inherit the live appearance settings. */
body.web-adapter {
  --surface-accent: var(--fc-accent-rgb, 255, 255, 255);
  --surface-glass: var(--glass-bg, linear-gradient(135deg, #34383dbb, #080c11e0));
  --surface-edge: rgba(var(--surface-accent), .19);
  --surface-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 1px 1px rgba(255, 255, 255, .12), 0 18px 50px rgba(0, 0, 0, .25);
  --surface-button-shadow: var(--saved-button-glass-shadow, inset 0 1px 0 #ffffff30, 0 8px 20px #0003);
}

/* The chart browser uses the same live glass material as the music library. */
body.web-adapter #home-platform-recommend-mask {
  box-sizing: border-box;
  padding: 20px;
  background: rgba(0, 0, 0, .50);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
body.web-adapter .home-platform-recommend-modal {
  width: min(820px, 100%);
  max-width: min(820px, 100%);
  height: min(84dvh, 760px);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--surface-edge) !important;
  border-radius: 28px;
  background: var(--surface-glass) !important;
  box-shadow: var(--surface-shadow) !important;
  backdrop-filter: var(--panel-glass-filter, blur(22px) saturate(1.12)) !important;
  -webkit-backdrop-filter: var(--panel-glass-filter, blur(22px) saturate(1.12)) !important;
  font-family: var(--font-sans, Inter, "Noto Sans SC", sans-serif);
}
body.web-adapter .home-platform-recommend-head h2 { font-size: 24px; font-weight: 650; letter-spacing: .5px; }
body.web-adapter .home-platform-recommend-head p { color: rgba(255, 255, 255, .57); font-size: 11px; }
body.web-adapter .home-platform-recommend-tabs { gap: 8px; margin-top: 20px; min-height: 46px; padding: 3px 2px; }
body.web-adapter .home-platform-recommend-tabs button,
body.web-adapter .home-platform-recommend-actions button,
body.web-adapter .home-platform-recommend-close {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--saved-button-glass-bg, rgba(0, 0, 0, .10));
  box-shadow: var(--surface-button-shadow);
  color: rgba(255, 255, 255, .67);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
body.web-adapter .home-platform-recommend-close { width: 38px; padding: 0; font-size: 23px; font-weight: 300; }
body.web-adapter .home-platform-recommend-tabs button.active,
body.web-adapter .home-platform-recommend-tabs button[aria-selected="true"],
body.web-adapter .home-platform-recommend-actions button:last-child {
  color: rgba(var(--surface-accent), 1);
  border-color: rgba(var(--surface-accent), .38);
  background: rgba(var(--surface-accent), .12);
}
body.web-adapter .home-platform-recommend-status { margin-top: 12px; color: rgba(255, 255, 255, .58); font-size: 11px; line-height: 1.6; }
body.web-adapter #home-platform-recommend-list { align-content: start; gap: 12px; margin-top: 12px; padding: 3px 5px 5px 2px; scrollbar-color: rgba(var(--surface-accent), .28) transparent; }
body.web-adapter #home-platform-recommend-list .home-platform-recommend-card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 15px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 19px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 7px 18px rgba(0, 0, 0, .10);
}
body.web-adapter .home-platform-recommend-cover { width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; box-sizing: border-box; }
body.web-adapter .home-platform-recommend-label { color: rgba(var(--surface-accent), .73); font-size: 10px; font-weight: 600; }
body.web-adapter .home-platform-recommend-copy strong { margin-top: 5px; font-size: 14px; font-weight: 650; line-height: 1.5; }
body.web-adapter .home-platform-recommend-copy small { color: rgba(255, 255, 255, .55); font-size: 11px; }
body.web-adapter .home-platform-recommend-actions { margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .07); }
body.web-adapter .home-platform-recommend-modal button:focus-visible { outline: 2px solid rgba(var(--surface-accent), .85); outline-offset: 2px; }
body.web-adapter .home-platform-recommend-modal button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  body.web-adapter .home-platform-recommend-modal button:hover { border-color: rgba(var(--surface-accent), .40); background-color: rgba(var(--surface-accent), .08); color: #fff; }
  body.web-adapter #home-platform-recommend-list .home-platform-recommend-card:hover { border-color: rgba(var(--surface-accent), .33); background: linear-gradient(140deg, rgba(var(--surface-accent), .10), rgba(0, 0, 0, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px rgba(0, 0, 0, .16); }
}
@media (max-width: 720px), (max-height: 550px) {
  body.web-adapter #home-platform-recommend-mask { padding: 12px; }
  body.web-adapter .home-platform-recommend-modal { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); padding: 18px; border-radius: 24px; }
  body.web-adapter .home-platform-recommend-head h2 { font-size: 21px; }
  body.web-adapter .home-platform-recommend-tabs { margin-top: 14px; min-height: 50px; }
  body.web-adapter .home-platform-recommend-tabs button,
  body.web-adapter .home-platform-recommend-actions button { min-height: 44px; padding-inline: 14px; }
  body.web-adapter #home-platform-recommend-list .home-platform-recommend-card { min-height: 94px; padding: 13px; gap: 13px; grid-template-columns: 58px minmax(0, 1fr); }
  body.web-adapter .home-platform-recommend-cover { width: 58px; height: 58px; }
  body.web-adapter .home-platform-recommend-actions { margin-top: 12px; padding-top: 12px; }
}

body.web-adapter .web-library-mask {
  font-family: var(--font-sans, Inter, "Noto Sans SC", sans-serif);
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
body.web-adapter .web-library {
  isolation: isolate;
  background: var(--surface-glass);
  border: 1px solid var(--surface-edge);
  border-radius: 28px;
  box-shadow: var(--surface-shadow);
  color: rgba(255, 255, 255, .94);
}
body.web-adapter .web-library-head { align-items: center; gap: 16px; }
body.web-adapter .web-library-head > div:first-child { flex: 1; min-width: 0; }
body.web-adapter .web-library-kicker { color: rgba(var(--surface-accent), .62); font-size: 9px; font-weight: 750; letter-spacing: 2.2px; }
body.web-adapter .web-library-head h2 { margin: 9px 0; font-size: 26px; font-weight: 760; letter-spacing: .6px; }
body.web-adapter .web-library-head p { color: rgba(255, 255, 255, .57); font-size: 11px; line-height: 1.6; }
.web-library-emblem {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(var(--surface-accent), .20);
  background: radial-gradient(circle at 32% 20%, rgba(var(--surface-accent), .17), transparent 65%), rgba(0, 0, 0, .12);
  box-shadow: var(--surface-button-shadow);
  color: rgba(var(--surface-accent), .84);
}
.web-library-emblem i { display: block; width: 3px; height: 13px; border-radius: 4px; background: currentColor; }
.web-library-emblem i:nth-child(2) { height: 25px; }
.web-library-emblem i:nth-child(3) { height: 19px; }
.web-library-emblem i:nth-child(4) { height: 9px; }
body.web-adapter .web-library-toolbar { border-color: rgba(255, 255, 255, .065); background: rgba(0, 0, 0, .09); gap: 12px; }
body.web-adapter .web-library button {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s, border-color .22s, color .22s, box-shadow .22s, transform .22s cubic-bezier(.16, 1, .3, 1);
}
body.web-adapter .web-library-tabs button,
body.web-adapter .web-library-actions button,
body.web-adapter .web-library-platform-toggle,
body.web-adapter .web-library-provider-notice button,
body.web-adapter .web-library-restore,
body.web-adapter .web-library-import {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: var(--saved-button-glass-bg, rgba(0, 0, 0, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 5px 14px rgba(0, 0, 0, .12);
  color: rgba(255, 255, 255, .65);
  font-weight: 650;
  white-space: nowrap;
}
body.web-adapter .web-library-tabs button.active,
body.web-adapter .web-library-actions button[aria-pressed="true"] {
  color: rgba(var(--surface-accent), 1);
  background: rgba(var(--surface-accent), .13);
  border-color: rgba(var(--surface-accent), .38);
  box-shadow: var(--surface-button-shadow), 0 0 20px rgba(var(--surface-accent), .055);
}
body.web-adapter .web-library-icon { width: 40px; height: 40px; background: rgba(0, 0, 0, .15); box-shadow: var(--surface-button-shadow); color: #ffffffb0; }
body.web-adapter .web-library button:focus-visible { outline: 2px solid rgba(var(--surface-accent), .85); outline-offset: 3px; }
body.web-adapter .web-library button:disabled { opacity: .48; cursor: default; }
body.web-adapter .web-library-status { color: rgba(255, 255, 255, .58); font-size: 11px; }
body.web-adapter .web-library-status[data-error="true"],
body.web-adapter .web-library-warning { color: #e5bdb0; }
body.web-adapter .web-library-content { scrollbar-color: rgba(var(--surface-accent), .23) transparent; scroll-padding-block: 12px; }
body.web-adapter .web-library-merged { margin-bottom: 16px; }
body.web-adapter .web-library-card {
  background: linear-gradient(140deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .20));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .12);
  transition: background .24s, border-color .24s, box-shadow .24s, transform .24s cubic-bezier(.16, 1, .3, 1);
}
body.web-adapter .web-library-card.is-merged {
  background: radial-gradient(ellipse at 10% 0%, rgba(var(--surface-accent), .14), transparent 65%), linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .32));
  border-color: rgba(var(--surface-accent), .23);
  box-shadow: var(--surface-shadow);
}
body.web-adapter .web-library-card-open { padding: 14px 12px; gap: 12px; border-radius: inherit; }
body.web-adapter .web-library-cover {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  color: rgba(var(--surface-accent), .84);
  background: radial-gradient(circle at 30% 20%, rgba(var(--surface-accent), .13), transparent 70%), rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px rgba(0, 0, 0, .18);
}
body.web-adapter .is-merged .web-library-cover { width: 56px; height: 56px; border-radius: 50%; background-color: rgba(var(--surface-accent), .05); font-size: 33px; }
body.web-adapter .web-library-copy strong { font-weight: 650; }
body.web-adapter .web-library-copy small { color: rgba(255, 255, 255, .57); }
body.web-adapter .is-merged .web-library-copy strong { white-space: normal; font-size: 16px; line-height: 1.5; }
body.web-adapter .web-library-hide,
body.web-adapter .web-library-platform-toggle { color: rgba(255, 255, 255, .62) !important; }
body.web-adapter .web-library-import { color: rgba(var(--surface-accent), .78) !important; border-color: rgba(var(--surface-accent), .20); }
body.web-adapter .web-library-platform {
  padding: 15px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 22px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .20));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 26px rgba(0, 0, 0, .12);
}
body.web-adapter .web-library-platform-head { gap: 8px; margin-bottom: 4px; }
body.web-adapter .web-library-platform-head h3 { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14px; }
body.web-adapter .web-library-platform-head h3::before {
  content: ""; display: grid; place-items: center;
  flex: 0 0 30px; width: 30px; height: 30px; font: 750 9px/1 var(--font-sans, sans-serif);
  border: 1px solid rgba(var(--surface-accent), .19); border-radius: 10px;
  background: rgba(var(--surface-accent), .065) var(--library-provider-icon) center / 25px 25px no-repeat;
  color: rgba(var(--surface-accent), .8);
}
.web-library-platform[data-library-provider="netease"],
.web-library-cover[data-library-provider="netease"] { --library-provider-icon: url("/assets/platforms/netease.png"); }
.web-library-platform[data-library-provider="qq"],
.web-library-cover[data-library-provider="qq"] { --library-provider-icon: url("/assets/platforms/qq.png"); }
.web-library-platform[data-library-provider="kugou"],
.web-library-cover[data-library-provider="kugou"] { --library-provider-icon: url("/assets/platforms/kugou.png"); }
.web-library-platform[data-library-provider="qishui"],
.web-library-cover[data-library-provider="qishui"] { --library-provider-icon: url("/assets/platforms/qishui.png"); }
body.web-adapter .web-library-platform[data-library-provider="qishui"] h3::before {
  background-color: #050808;
}
body.web-adapter .web-library-cover.is-fallback {
  background: rgba(0, 0, 0, .12) var(--library-provider-icon, none) center / 78% 78% no-repeat;
}
body.web-adapter .web-library-platform h4 { color: rgba(var(--surface-accent), .65); }
body.web-adapter .web-library-provider-notice { border: 0; border-radius: 0; padding: 12px 0 0; background: none; color: rgba(255, 255, 255, .58); gap: 12px; }
body.web-adapter .web-library-provider-notice button { color: rgba(var(--surface-accent), .87); border-color: rgba(var(--surface-accent), .21); }
body.web-adapter .web-library-empty { color: rgba(255, 255, 255, .58); padding: 12px 0 4px; }
body.web-adapter .web-library-manage-hint { border: 1px solid rgba(var(--surface-accent), .13); background: rgba(var(--surface-accent), .045); color: #ffffffa3; }
body.web-adapter .web-library-foot { color: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .06); }
body.web-adapter #web-library-refresh:disabled::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid #ffffff33; border-top-color: currentColor; border-radius: 50%; animation: surface-refresh-spin .8s linear infinite; vertical-align: -1px; }
@keyframes surface-refresh-spin { to { transform: rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
  body.web-adapter .web-library button:not(:disabled):hover { border-color: rgba(var(--surface-accent), .36); background-color: rgba(var(--surface-accent), .08); }
  body.web-adapter .web-library-card:hover { transform: translateY(-3px); border-color: rgba(var(--surface-accent), .33); box-shadow: var(--surface-shadow), 0 0 24px rgba(var(--surface-accent), .055); }
  body.web-adapter .web-library-card-open:hover { background: transparent !important; }
}
body.web-adapter .web-library button:not(:disabled):active { transform: scale(.97); }

@media (max-width: 900px) {
  body.web-adapter.web-mobile-active[data-mobile-page="library"] #web-library-mask { background: transparent !important; padding-inline: var(--web-safe-left) var(--web-safe-right); }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library { border: 1px solid var(--surface-edge); border-radius: 24px; background: var(--surface-glass); box-shadow: var(--surface-shadow); }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-head { padding: 18px 14px 16px; gap: 10px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-head h2 { font-size: 22px; margin: 7px 0; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-toolbar { padding: 12px; gap: 10px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-tabs { gap: 6px; padding: 2px 1px 5px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-tabs button { padding-inline: 12px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-actions { gap: 7px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-actions button { min-width: 0; padding-inline: 7px; font-size: 10px !important; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-status { padding: 10px 14px 0; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-content { padding: 12px 12px 20px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-emblem { flex-basis: 44px; width: 44px; height: 44px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-platform { padding: 13px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-platform-toggle { min-height: 44px; padding: 6px 9px; font-size: 10px !important; }
  body.web-adapter.web-mobile-active .web-mobile-brand { color: rgba(var(--surface-accent), .60); }
  body.web-adapter.web-mobile-active #web-mobile-nav button[aria-current="page"] { color: rgba(var(--surface-accent), .95); background: linear-gradient(rgba(var(--surface-accent), .10), transparent); }

  /* Full player, mini player and lyric page share the same glass material. */
  body.web-adapter.web-mobile-active #bottom-bar.visible:not(.soft-hidden) {
    background: var(--surface-glass);
    border: 1px solid var(--surface-edge);
    box-shadow: var(--surface-shadow);
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
  }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #bottom-bar { border-radius: 28px; gap: 14px; padding: 22px 16px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cluster.actions { margin-top: auto; gap: 12px 22px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-track { gap: 22px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cover {
    position: relative; isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .27); border-radius: 25px;
    box-shadow: 0 24px 44px rgba(0, 0, 0, .40), 0 0 28px rgba(var(--surface-accent), .07), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: box-shadow .5s, border-color .5s;
  }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 30%, transparent 75%, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
  body.web-adapter.web-mobile-active.web-player-playing[data-mobile-page="player"] .control-cover { border-color: rgba(var(--surface-accent), .48); box-shadow: 0 28px 54px rgba(0, 0, 0, .45), 0 0 42px rgba(var(--surface-accent), .16), inset 0 1px 0 rgba(255, 255, 255, .28); }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-meta { gap: 8px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-title { font-size: 21px; letter-spacing: .3px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-artist { color: rgba(255, 255, 255, .60); font-size: 12px; line-height: 1.6; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #quality-btn.quality-pill { color: rgba(var(--surface-accent), .84); border-color: rgba(var(--surface-accent), .23); background: rgba(var(--surface-accent), .07); }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .ctrl-btn { border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; background: rgba(0, 0, 0, .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 16px rgba(0, 0, 0, .12); transition: background .2s, box-shadow .2s, border-color .2s; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cluster.transport { align-items: center; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #play-btn { width: 60px; height: 60px; background: rgba(var(--surface-accent), .10) !important; border: 1px solid rgba(var(--surface-accent), .25) !important; box-shadow: var(--surface-button-shadow), 0 0 24px rgba(var(--surface-accent), .075) !important; }
  body.web-adapter.web-mobile-active.web-player-playing[data-mobile-page="player"] #play-btn { background: rgba(var(--surface-accent), .18) !important; border-color: rgba(var(--surface-accent), .43) !important; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #progress-bar { height: 4px; flex-basis: 4px; margin-block: 8px 12px; background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2); }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #progress-bar::before { content: ''; position: absolute; inset: -20px 0; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #progress-fill { background: linear-gradient(90deg, rgba(var(--surface-accent), .52), rgba(var(--surface-accent), 1)); box-shadow: 0 0 14px rgba(var(--surface-accent), .23); }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #progress-thumb { background: rgba(var(--surface-accent), 1); box-shadow: 0 0 0 3px rgba(var(--surface-accent), .13), 0 0 14px rgba(var(--surface-accent), .18); }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cluster.modes { margin-bottom: auto; gap: 10px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #time-display { color: rgba(255, 255, 255, .60); font-size: 11px; letter-spacing: .6px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .volume-popover,
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .mini-queue-popover,
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .lyric-timing-popover { background: var(--surface-glass); border: 1px solid var(--surface-edge); box-shadow: var(--surface-shadow); border-radius: 20px; }
  body.web-adapter.web-mobile-active #web-mobile-lyrics button { color: rgba(var(--surface-accent), .9); border-radius: 999px; border-color: rgba(var(--surface-accent), .22); background: rgba(var(--surface-accent), .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
  body.web-adapter.web-mobile-active .web-mobile-lyric-line { color: rgba(255, 255, 255, .58); }
  body.web-adapter.web-mobile-active .web-mobile-lyric-line.current { color: rgba(var(--surface-accent), 1); text-shadow: 0 0 22px rgba(var(--surface-accent), .12); }
  body.web-adapter.web-mobile-active .web-mobile-lyric-empty { color: rgba(255, 255, 255, .58); }
}

@media (max-width: 900px) and (max-height: 650px) {
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library { display: block; overflow-x: hidden; overflow-y: auto; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-content { overflow-y: visible; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-head { padding-block: 14px; }
  body.web-adapter.web-mobile-active[data-mobile-page="library"] .web-library-head p { display: none; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #bottom-bar { padding: 12px; gap: 8px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-track { gap: 10px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-cluster.actions { gap: 6px 20px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] .control-title { font-size: 18px; }
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #play-btn { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  body.web-adapter .web-library,
  body.web-adapter .web-library *,
  body.web-adapter .web-library *::before,
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #bottom-bar,
  body.web-adapter.web-mobile-active[data-mobile-page="player"] #bottom-bar *,
  body.web-adapter.web-mobile-active #web-mobile-lyrics { animation: none !important; transition: none !important; }
}