/*
 * Cloudflare Pages stability layer.
 * Loaded after modern.css so the deployed UI does not depend on optional
 * scrollbar, blur or sprite libraries.
 */

:root {
    color-scheme: light;

    /* Complete the legacy token set and keep all foregrounds explicit. */
    --color-primary: #c92f32;
    --color-primary-hover: #a92024;
    --color-primary-rgb: 201, 47, 50;
    --color-primary-solid: #c92f32;
    --color-primary-text: #b4232d;
    --color-background: #f2f5f7;
    --color-surface: #ffffff;
    --color-surface-dim: #e3e8ec;
    --color-surface-container: #eef2f5;
    --color-surface-elevated: #ffffff;
    --color-on-surface: #171a1f;
    --color-foreground: #171a1f;
    --color-text-muted: #59636f;
    --color-neutral: #59636f;
    --color-border: #d5dce2;
    --color-shadow: rgba(18, 24, 31, 0.14);
    --color-info: #2563a6;
    --color-success: #18794e;
    --color-warning: #a44f08;
    --color-danger: #b4232d;

    --cf-page-overlay: rgba(242, 245, 247, 0.82);
    --cf-panel: rgba(255, 255, 255, 0.94);
    --cf-panel-solid: #ffffff;
    --cf-panel-alt: #edf2f5;
    --cf-row-hover: #eaf3f5;
    --cf-playing-bg: #fff0f0;
    --cf-playing-border: #c92f32;
    --cf-focus: #087f78;
    --cf-download: #176f8c;
    --cf-favorite: #9b3d72;
    --cf-safe-top: env(safe-area-inset-top, 0px);
    --cf-safe-right: env(safe-area-inset-right, 0px);
    --cf-safe-bottom: env(safe-area-inset-bottom, 0px);
    --cf-safe-left: env(safe-area-inset-left, 0px);

    /* Cards and framed tools stay at 8px or less. */
    --rounded-sm: 4px;
    --rounded-default: 6px;
    --rounded-md: 8px;
    --rounded-lg: 8px;
    --rounded-xl: 8px;
}

html {
    min-width: 280px;
    background: var(--color-background);
    scrollbar-color: #8b98a4 transparent;
    scrollbar-width: thin;
}

body {
    min-width: 280px;
    background: var(--color-background);
    color: var(--color-on-surface);
}

button,
input,
textarea,
select {
    color: inherit;
    font: inherit;
    letter-spacing: 0;
}

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid var(--cf-focus) !important;
    outline-offset: 2px;
}

/* Native scrolling replaces the optional mCustomScrollbar dependency. */
#main-list,
#sheet,
.player-details,
.layui-layer-content {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #8b98a4 transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

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

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

::-webkit-scrollbar-thumb {
    min-height: 32px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #8b98a4;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #65727e;
    background-clip: padding-box;
}

/* The cover is now applied directly by JavaScript as a CSS background. */
#blur-img {
    background-color: #dce5e8;
    background-position: center;
    background-size: cover;
}

.blur-mask {
    background: var(--cf-page-overlay) !important;
}

.sidebar,
.player-details,
.data-area-container,
.footer-player {
    border-color: var(--color-border) !important;
}

.sidebar {
    background: var(--cf-panel) !important;
    color: var(--color-on-surface);
}

.sidebar-menu .nav-item {
    min-width: 0;
    border-radius: 8px;
    color: var(--color-on-surface);
}

.sidebar-menu .nav-item:hover {
    background: #e7f1f2;
    color: #126b70;
}

.sidebar-menu .nav-item.active {
    background: var(--color-primary);
    color: #ffffff;
}

.main-content {
    min-width: 0;
}

.main-header {
    min-width: 0;
    min-height: 44px;
    gap: 12px;
}

.main-header h1,
.main-header-leading,
.main-header-leading h1 {
    min-width: 0;
}

.main-header h1,
.main-header-leading h1 {
    overflow: hidden;
    color: var(--color-on-surface);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-area-container {
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    background: var(--cf-panel) !important;
    box-shadow: 0 10px 30px var(--color-shadow);
}

#sheet,
#main-list {
    scrollbar-gutter: stable;
}

.sheet-item,
.sheet-cover,
.player-details .cover-wrapper,
.sync-banner-card,
.sidebar-user-card {
    border-radius: 8px !important;
}

.sheet-name,
.recommend-user-title,
.sync-banner-text,
.sync-banner-user {
    color: var(--color-on-surface) !important;
}

/* The sidebar sync card intentionally remains a dark utility surface. */
.sidebar-user-card .avatar-name,
.sidebar-user-card .user-name,
.sidebar-user-card .user-status,
.sidebar-user-card .sync-label-text {
    color: #e8eef2 !important;
}

.recommend-user-btn,
.sync-banner-card,
.sheet-title-bar {
    border-color: var(--color-border) !important;
    background: var(--cf-panel-alt) !important;
    color: var(--color-on-surface) !important;
}

/* Header actions keep their command labels on desktop and collapse cleanly. */
.list-action-group {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.list-action-group::-webkit-scrollbar {
    display: none;
}

.list-action-group[style*="display: none"],
.list-action-group[style*="display:none"] {
    display: none !important;
}

.action-btn {
    min-width: 0;
    min-height: 36px;
    flex: 0 0 auto;
    border-radius: 8px !important;
    white-space: nowrap;
}

.action-btn svg,
.action-btn .action-label {
    flex: 0 0 auto;
}

.action-btn-primary {
    border: 1px solid var(--color-primary-solid, var(--color-primary)) !important;
    background: var(--color-primary-solid, var(--color-primary)) !important;
    color: #ffffff !important;
}

.action-btn-primary:hover:not(:disabled) {
    border-color: var(--color-primary-hover) !important;
    background: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

.action-btn-secondary {
    border: 1px solid #b9c3cb !important;
    background: var(--cf-panel-solid) !important;
    color: #27313a !important;
}

.action-btn-secondary:hover:not(:disabled) {
    border-color: #739098 !important;
    background: #e7f1f2 !important;
    color: #185d63 !important;
}

.action-btn-danger {
    border: 1px solid #e5a3a9 !important;
    background: #fff0f1 !important;
    color: #9e202a !important;
}

.action-btn-danger:hover:not(:disabled) {
    border-color: var(--color-danger) !important;
    background: var(--color-danger) !important;
    color: #ffffff !important;
}

.action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none !important;
}

/* Song list: predictable desktop columns and readable state rendering. */
.list-item {
    min-width: 0;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-on-surface);
}

.list-item:hover:not(.list-head):not(#list-foot) {
    background: var(--cf-row-hover) !important;
    color: var(--color-on-surface) !important;
}

.list-head {
    color: var(--color-text-muted) !important;
    background: var(--cf-panel-alt) !important;
}

.list-num,
.music-name,
.music-name-text,
.auth-name,
.music-album,
.list-menu {
    min-width: 0;
}

.music-name {
    max-width: none !important;
    color: var(--color-on-surface) !important;
}

.music-name-text {
    overflow: hidden;
    color: var(--color-on-surface) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-name,
.music-album {
    overflow: hidden;
    color: var(--color-text-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-menu,
.list-menu-head {
    width: 184px !important;
    flex: 0 0 184px;
}

.list-menu {
    gap: 4px;
}

/* Inline SVG actions fully replace sprite-sheet icons. */
.list-menu .list-icon,
.list-icon {
    position: relative !important;
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    min-height: 40px;
    display: inline-grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    color: var(--color-text-muted);
    opacity: 1 !important;
    cursor: pointer;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
}

/* Kill every legacy sprite/pseudo icon path. */
.list-icon::before,
.list-icon::after,
.icon-play::before,
.icon-play::after,
.icon-download::before,
.icon-download::after,
.icon-addlist::before,
.icon-addlist::after,
.icon-dellist::before,
.icon-dellist::after,
.list-playing .icon-play::before,
.list-playing .icon-play::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

.list-action-svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.list-action-svg.icon-filled,
.list-action-svg .icon-fill {
    fill: currentColor;
    stroke: none;
}

/* Default: show play triangle, hide pause bars. */
.list-icon.icon-play .icon-state-play {
    display: block !important;
}

.list-icon.icon-play .icon-state-pause {
    display: none !important;
}

.list-icon:hover {
    border-color: #b8c7cd !important;
    background: #e7f1f2 !important;
    color: #126b70 !important;
    transform: none !important;
}

.list-icon:active {
    background: #dcebed !important;
}

.list-icon.icon-play {
    color: var(--color-primary-text, var(--color-primary));
}

.list-icon.icon-download {
    color: var(--cf-download);
}

.list-icon.icon-addlist {
    color: var(--cf-favorite);
}

.list-icon.icon-dellist {
    color: var(--color-danger);
}

.list-playing {
    box-shadow: inset 4px 0 0 var(--cf-playing-border);
    background: var(--cf-playing-bg) !important;
    color: var(--color-on-surface) !important;
}

.list-playing .list-num {
    background: none !important;
    color: var(--color-primary-text, var(--color-primary)) !important;
    text-indent: 0 !important;
}

.list-playing .music-name,
.list-playing .music-name-text {
    color: var(--color-primary-text, var(--color-primary)) !important;
    text-shadow: none !important;
}

.list-playing .auth-name,
.list-playing .music-album {
    color: #7e3438 !important;
}

/* Playing row: filled red control with pause bars. */
.list-playing .list-icon.icon-play {
    border-color: var(--color-primary-solid, var(--color-primary)) !important;
    background: var(--color-primary-solid, var(--color-primary)) !important;
    color: #ffffff !important;
}

.list-playing .list-icon.icon-play .icon-state-play {
    display: none !important;
}

.list-playing .list-icon.icon-play .icon-state-pause {
    display: block !important;
}

.song-checkbox,
#select-all-songs {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--color-primary);
}

#list-foot,
#list-foot.list-item {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 16px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.45 !important;
    text-align: center;
    white-space: normal !important;
}

#list-foot.list-clickable {
    color: #126b70 !important;
}

/* Status messages sit between header and data area without covering song rows. */
.app-status {
    position: static;
    z-index: 2;
    width: 100%;
    max-width: none;
    min-height: 0;
    display: none;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--cf-panel-solid);
    box-shadow: none;
    color: var(--color-on-surface);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    transform: none;
    pointer-events: none;
}

.app-status.is-visible {
    display: flex;
}

.app-status.is-loading {
    border-color: #8db2cf;
    color: var(--color-info);
}

.app-status.is-empty {
    border-color: #d5b37c;
    background: #fff8e8;
    color: #7a4609;
}

.app-status.is-error {
    border-color: #e5a3a9;
    background: #fff0f1;
    color: #9e202a;
}

.app-status.is-success {
    border-color: #8dc6a8;
    background: #ebf8f1;
    color: var(--color-success);
}

/* Search and remote playlists always render on an opaque, contrasting surface. */
.music-list-drawer {
    right: 0 !important;
    left: auto !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid #21858a !important;
    border-radius: 8px !important;
    background: var(--cf-panel-solid) !important;
    box-shadow: -16px 0 36px var(--color-shadow);
    color: var(--color-on-surface) !important;
}

.music-list-drawer .list-item,
.music-list-drawer .music-name,
.music-list-drawer .music-name-text {
    color: var(--color-on-surface) !important;
}

.music-list-drawer .auth-name,
.music-list-drawer .music-album {
    color: var(--color-text-muted) !important;
}

.music-list-drawer .list-playing .music-name,
.music-list-drawer .list-playing .music-name-text {
    color: var(--color-primary) !important;
}

/* Right detail panel and lyrics. */
.player-details {
    background: var(--cf-panel) !important;
    color: var(--color-on-surface);
}

.player-details .cover-wrapper {
    background: var(--color-surface-container);
}

.player-details #lyric li {
    color: var(--color-text-muted) !important;
    opacity: 1;
}

.player-details #lyric .lplaying {
    color: var(--color-primary) !important;
}

/* Footer controls use the inline SVGs from index.html. */
.footer-player {
    bottom: calc(20px + var(--cf-safe-bottom));
    left: calc(264px + var(--cf-safe-left));
    right: calc(343px + var(--cf-safe-right));
    min-width: 0;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: var(--cf-panel) !important;
    box-shadow: 0 12px 36px var(--color-shadow);
}

.footer-player .con-btn {
    min-width: 0;
    gap: 6px;
}

.footer-player .player-btn,
.player-btn {
    position: static !important;
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    min-height: 44px;
    display: inline-grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    color: var(--color-on-surface) !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
}

.footer-player .player-btn:hover,
.player-btn:hover {
    border-color: #b8c7cd !important;
    background: #e7f1f2 !important;
    color: #126b70 !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.footer-player .player-btn:active,
.player-btn:active {
    background: #dcebed !important;
}

/* Never let modern.css sprite metrics shrink/crop the SVG buttons. */
.footer-player .btn-prev,
.footer-player .btn-play,
.footer-player .btn-next,
.footer-player .btn-order,
.footer-player .btn-quiet,
.btn-prev,
.btn-play,
.btn-next,
.btn-order,
.btn-quiet,
.btn-order-list,
.btn-order-single,
.btn-order-random,
.btn-state-paused {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    filter: none !important;
}

.player-icon {
    width: 22px !important;
    height: 22px !important;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.player-icon.player-icon-filled,
.player-icon .icon-fill {
    fill: currentColor;
    stroke: none;
}

/* Play / pause */
.btn-play .player-icon-play {
    display: block !important;
}

.btn-play .player-icon-pause {
    display: none !important;
}

.footer-player .btn-play,
.btn-play {
    border-color: var(--color-primary-solid, var(--color-primary)) !important;
    background: var(--color-primary-solid, var(--color-primary)) !important;
    color: #ffffff !important;
}

.footer-player .btn-play:hover,
.btn-play:hover {
    border-color: var(--color-primary-hover) !important;
    background: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

.btn-play.btn-state-paused .player-icon-play {
    display: none !important;
}

.btn-play.btn-state-paused .player-icon-pause {
    display: block !important;
}

/* Volume / mute */
.btn-quiet .player-icon-volume {
    display: block !important;
}

.btn-quiet .player-icon-muted {
    display: none !important;
}

.btn-quiet.btn-state-quiet {
    border-color: #d3979e !important;
    background: #fff0f1 !important;
    color: var(--color-danger) !important;
}

.btn-quiet.btn-state-quiet .player-icon-volume {
    display: none !important;
}

.btn-quiet.btn-state-quiet .player-icon-muted {
    display: block !important;
}

/* Loop mode icons */
.btn-order .player-icon-order,
.btn-order .player-icon-order-one,
.btn-order .player-icon-shuffle {
    display: none !important;
}

.btn-order.btn-order-list .player-icon-order,
.btn-order.btn-order-single .player-icon-order-one,
.btn-order.btn-order-random .player-icon-shuffle {
    display: block !important;
}

.footer-player .btn-order-list,
.btn-order-list {
    color: #176f8c !important;
}

.footer-player .btn-order-single,
.btn-order-single {
    color: #9a560a !important;
}

.footer-player .btn-order-random,
.btn-order-random {
    color: #3d5fa8 !important;
}

.progress-container,
.volume-container,
.progress-box,
.volume-box {
    min-width: 0;
}

.mkpgb-area {
    min-height: 32px;
}

.mkpgb-bar {
    background: #cbd3da;
}

.mkpgb-cur,
.mkpgb-dot {
    background: var(--color-primary);
}

/* Layer dialogs, including search, must not inherit unreadable text colors. */
.layui-layer {
    max-width: calc(100vw - 24px);
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: var(--cf-panel-solid) !important;
    box-shadow: 0 20px 56px rgba(15, 21, 28, 0.24) !important;
    color: var(--color-on-surface) !important;
}

.layui-layer-content,
.layui-layer-title {
    color: var(--color-on-surface) !important;
}

.layui-layer-title {
    border-bottom-color: var(--color-border) !important;
    background: var(--cf-panel-alt) !important;
}

.layui-layer-msg {
    background: var(--cf-panel-solid) !important;
}

.layui-layer-msg .layui-layer-content {
    color: var(--color-on-surface) !important;
}

.layui-layer-close1,
.layui-layer-close2 {
    border-radius: 8px !important;
    background-color: var(--cf-panel-alt) !important;
}

.layui-layer-close1::before,
.layui-layer-close1::after,
.layui-layer-close2::before,
.layui-layer-close2::after {
    background-color: var(--color-on-surface) !important;
}

#search-area {
    width: min(460px, calc(100vw - 32px));
    min-width: 0 !important;
    max-width: 100%;
    padding: 16px 18px 18px !important;
    background: var(--cf-panel-solid);
    color: var(--color-on-surface);
}

.layui-layer-page:has(#search-area),
.layui-layer.search-dialog {
    width: min(460px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    overflow: visible !important;
}

.layui-layer-page:has(#search-area) .layui-layer-content,
.layui-layer.search-dialog .layui-layer-content {
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Title bar owns the close control; never float X over the "??" submit button. */
.layui-layer.search-dialog .layui-layer-title,
.layui-layer-page:has(#search-area) .layui-layer-title {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 52px 0 18px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: var(--cf-panel-alt) !important;
    color: var(--color-on-surface) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.layui-layer.search-dialog .layui-layer-setwin,
.layui-layer-page:has(#search-area) .layui-layer-setwin {
    top: 12px !important;
    right: 12px !important;
    z-index: 20 !important;
}

.layui-layer.search-dialog .layui-layer-close1,
.layui-layer.search-dialog .layui-layer-close2,
.layui-layer-page:has(#search-area) .layui-layer-close1,
.layui-layer-page:has(#search-area) .layui-layer-close2 {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--color-on-surface) !important;
}

.layui-layer.search-dialog .layui-layer-close1:hover,
.layui-layer.search-dialog .layui-layer-close2:hover,
.layui-layer-page:has(#search-area) .layui-layer-close1:hover,
.layui-layer-page:has(#search-area) .layui-layer-close2:hover {
    background: rgba(201, 47, 50, 0.12) !important;
    transform: none !important;
}

.search-group {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 0 !important;
}

.search-submit {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
}

#search-wd {
    min-width: 0;
    border: 1px solid #aeb9c2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #171a1f !important;
}

#search-wd::placeholder {
    color: #6a7580;
    opacity: 1;
}

#search-wd:focus {
    border-color: var(--cf-focus) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(8, 127, 120, 0.2) !important;
}

.search-submit {
    width: 80px !important;
    min-width: 80px;
    border-radius: 8px !important;
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

.search-submit:hover {
    background: var(--color-primary-hover) !important;
}

.layui-layer-prompt .layui-layer-input,
.share-url {
    border-color: #aeb9c2 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #171a1f !important;
}

.layui-layer-btn a {
    border-radius: 8px !important;
}

@media (max-width: 1260px) and (min-width: 901px) {
    .sidebar {
        width: 216px;
        padding-inline: 18px;
    }

    .player-details {
        width: 284px;
        padding-inline: 20px;
    }

    .main-content {
        padding-inline: 18px;
    }

    .music-album {
        display: none !important;
    }

    .footer-player {
        left: calc(234px + var(--cf-safe-left));
    }
}

@media (max-width: 900px) {
    html,
    body {
        background: var(--color-background) !important;
    }

    #blur-img {
        opacity: 0.28;
        filter: blur(64px) saturate(1.15);
    }

    .blur-mask {
        background: var(--cf-page-overlay) !important;
    }

    .main-content {
        width: 100%;
        padding: calc(10px + var(--cf-safe-top)) calc(10px + var(--cf-safe-right)) calc(154px + var(--cf-safe-bottom)) calc(10px + var(--cf-safe-left)) !important;
    }

    .main-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 48px;
        margin-bottom: 10px;
        gap: 8px;
    }

    .main-header h1 {
        font-size: 19px;
        line-height: 1.25;
    }

    .list-action-group {
        width: max-content;
        max-width: calc(100vw - 108px - var(--cf-safe-left) - var(--cf-safe-right));
        gap: 4px;
    }

    .action-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        gap: 0;
    }

    .action-btn svg {
        width: 18px;
        height: 18px;
    }

    .action-btn .action-label {
        display: none;
    }

    .data-area-container {
        padding: 6px;
        border: 1px solid var(--color-border) !important;
        background: var(--cf-panel-solid) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #sheet,
    #sheet.mCustomScrollbar .mCSB_container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 4px;
    }

    .sheet-item {
        min-width: 0;
        padding: 4px;
    }

    .sheet-cover {
        margin-bottom: 8px !important;
    }

    .sheet-name {
        font-size: 12px !important;
    }

    .list-head {
        display: none !important;
    }

    /* Explicit number / content / actions columns. No implicit grid tracks. */
    .list-item:not(.list-head):not(#list-foot) {
        width: 100%;
        min-width: 0;
        height: 60px !important;
        min-height: 60px;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) max-content !important;
        grid-template-rows: 26px 20px !important;
        align-items: center;
        gap: 0 8px;
        padding: 7px 4px !important;
        line-height: normal !important;
        overflow: hidden;
    }

    .list-item:not(.list-head):not(#list-foot) > .list-num {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 40px !important;
        max-width: 40px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        margin: 0 !important;
        padding: 0;
        font-size: 11px;
        line-height: 1;
    }

    .list-item:not(.list-head):not(#list-foot) > .music-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        margin: 0 !important;
        padding: 0;
        color: var(--color-on-surface) !important;
        font-size: 13px !important;
        font-weight: 650;
        line-height: 22px;
        text-align: left !important;
    }

    .list-item:not(.list-head):not(#list-foot) > .auth-name {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start;
        width: 100% !important;
        max-width: 100%;
        display: block !important;
        margin: 0 !important;
        padding: 0;
        color: var(--color-text-muted) !important;
        font-size: 11px !important;
        line-height: 18px;
        text-align: left !important;
    }

    .list-item:not(.list-head):not(#list-foot) > .music-album,
    .list-mobile-menu,
    .list-menu-head {
        display: none !important;
    }

    .list-item:not(.list-head):not(#list-foot) > .list-menu {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center;
        width: max-content !important;
        max-width: none;
        height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0;
        overflow: visible;
    }

    .list-menu .list-icon,
    .list-icon {
        width: 44px !important;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px;
        border-color: transparent !important;
        border-radius: 8px !important;
        background-image: none !important;
    }

    .list-action-svg {
        width: 19px;
        height: 19px;
    }

    .list-playing {
        box-shadow: inset 4px 0 0 var(--cf-playing-border);
    }

    .list-playing .music-name,
    .list-playing .music-name-text {
        color: var(--color-primary) !important;
        text-shadow: none !important;
    }

    .list-playing .auth-name {
        color: #7e3438 !important;
    }

    #list-foot,
    #list-foot.list-item {
        min-height: 48px !important;
        margin: 0;
        padding: 10px 12px !important;
        font-size: 13px;
    }

    .app-status {
        top: 8px;
        max-width: calc(100% - 20px);
        font-size: 12px;
    }

    .music-list-drawer {
        width: 100% !important;
        padding: 6px !important;
        border-top: 3px solid #21858a !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
        background: var(--cf-panel-solid) !important;
        color: var(--color-on-surface) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .music-list-drawer .list-item:not(.list-head) {
        border-bottom-color: var(--color-border) !important;
        background: var(--cf-panel-solid) !important;
    }

    .music-list-drawer .list-item:not(.list-head):nth-child(odd) {
        background: var(--cf-panel-alt) !important;
    }

    .music-list-drawer .list-item:not(.list-head):hover {
        background: var(--cf-row-hover) !important;
    }

    .music-list-drawer .music-name,
    .music-list-drawer .music-name-text {
        color: var(--color-on-surface) !important;
    }

    .music-list-drawer .auth-name {
        color: var(--color-text-muted) !important;
    }

    .player-details {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: calc(144px + var(--cf-safe-bottom)) !important;
        left: 0 !important;
        width: 100% !important;
        padding: calc(14px + var(--cf-safe-top)) 18px 10px !important;
        border: 0 !important;
        background: var(--cf-panel-solid) !important;
        color: var(--color-on-surface) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 99 !important;
    }

    .player-details .cover-wrapper {
        width: clamp(112px, min(44vw, 28dvh), 180px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 0 auto 12px !important;
    }

    .player-details .lyric-container {
        min-height: 80px;
        margin-top: 4px !important;
    }

    .player-details #lyric li {
        color: var(--color-text-muted) !important;
    }

    .footer-player {
        left: calc(8px + var(--cf-safe-left)) !important;
        right: calc(8px + var(--cf-safe-right)) !important;
        bottom: calc(68px + var(--cf-safe-bottom)) !important;
        width: auto;
        height: 68px;
        min-height: 68px;
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 6px !important;
        border-radius: 8px !important;
        background: var(--cf-panel-solid) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .footer-player .con-btn {
        flex: 0 0 auto;
        gap: 0 !important;
    }

    .footer-player .player-btn {
        width: 44px !important;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px;
    }

    .footer-player .progress-container {
        min-width: 28px;
        flex: 1 1 auto;
        margin: 0 6px !important;
    }

    .footer-player .volume-container {
        display: none !important;
    }

    .mkpgb-area {
        min-height: 44px;
    }

    .mobile-tabbar {
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(60px + var(--cf-safe-bottom));
        min-height: calc(60px + var(--cf-safe-bottom));
        display: flex !important;
        align-items: flex-start;
        justify-content: stretch;
        padding: 4px var(--cf-safe-right) var(--cf-safe-bottom) var(--cf-safe-left);
        border-top: 1px solid var(--color-border) !important;
        background: var(--cf-panel-solid) !important;
        color: var(--color-text-muted);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-tabbar .tab-item {
        min-width: 0;
        min-height: 52px;
        flex: 1 1 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 2px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--color-text-muted) !important;
        appearance: none;
        line-height: 1.15;
    }

    .mobile-tabbar .tab-item svg {
        flex: 0 0 20px;
    }

    .mobile-tabbar .tab-item span {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-tabbar .tab-item.active {
        background: #fff0f0;
        color: var(--color-primary) !important;
    }

    #search-area {
        width: min(460px, calc(100vw - 24px));
        padding: 24px 14px 16px !important;
    }

    .layui-layer-page:has(#search-area),
    .layui-layer.search-dialog {
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .search-submit {
        width: 72px !important;
        min-width: 72px;
    }
}

@media (max-width: 360px) {
    .main-content {
        padding-right: calc(6px + var(--cf-safe-right)) !important;
        padding-left: calc(6px + var(--cf-safe-left)) !important;
    }

    .data-area-container {
        padding: 3px;
    }

    .list-item:not(.list-head):not(#list-foot) {
        grid-template-columns: 36px minmax(0, 1fr) max-content !important;
        gap: 0 3px;
        padding-inline: 2px !important;
    }

    .list-item:not(.list-head):not(#list-foot) > .list-num {
        width: 36px !important;
        max-width: 36px;
        gap: 2px;
    }

    .song-checkbox {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .footer-player {
        left: calc(5px + var(--cf-safe-left)) !important;
        right: calc(5px + var(--cf-safe-right)) !important;
        gap: 2px;
        padding-inline: 3px !important;
    }

    .footer-player .progress-container {
        margin-inline: 3px !important;
    }

    .main-header h1 {
        font-size: 17px;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
    .mobile-tabbar {
        display: none !important;
    }

    .main-content {
        padding-bottom: calc(84px + var(--cf-safe-bottom)) !important;
    }

    .footer-player {
        bottom: calc(8px + var(--cf-safe-bottom)) !important;
    }

    .player-details {
        bottom: calc(84px + var(--cf-safe-bottom)) !important;
        display: grid !important;
        grid-template-columns: minmax(112px, 30vw) minmax(0, 1fr);
        gap: 16px;
    }

    .player-details[style*="display: none"],
    .player-details[style*="display:none"] {
        display: none !important;
    }

    .player-details .cover-wrapper {
        width: min(30vw, 44dvh) !important;
        margin: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-primary: #ff6b70;
        --color-primary-hover: #ff8589;
        --color-primary-rgb: 255, 107, 112;
        --color-primary-solid: #e03f3c;
        --color-primary-text: #ff9aa0;
        --color-background: #11151a;
        --color-surface: #1b2027;
        --color-surface-dim: #252c34;
        --color-surface-container: #252c34;
        --color-surface-elevated: #222931;
        --color-on-surface: #f3f6f8;
        --color-foreground: #f3f6f8;
        --color-text-muted: #c4ced8;
        --color-neutral: #c4ced8;
        --color-border: #3d4752;
        --color-shadow: rgba(0, 0, 0, 0.42);
        --color-info: #87bff0;
        --color-success: #70d5a3;
        --color-warning: #f0b462;
        --color-danger: #ff8993;
        --cf-page-overlay: rgba(17, 21, 26, 0.84);
        --cf-panel: rgba(27, 32, 39, 0.96);
        --cf-panel-solid: #1b2027;
        --cf-panel-alt: #252c34;
        --cf-row-hover: #26373b;
        --cf-playing-bg: #382326;
        --cf-playing-border: #ff6b70;
        --cf-focus: #55d3ca;
        --cf-download: #77c5df;
        --cf-favorite: #ee9bca;
    }

    html {
        scrollbar-color: #758391 transparent;
    }

    #blur-img {
        background-color: #111a20;
        opacity: 0.46;
        filter: blur(70px) saturate(1.15) brightness(0.55);
    }

    .sidebar-menu .nav-item:hover,
    .list-icon:hover,
    .footer-player .player-btn:hover {
        border-color: #52616d !important;
        background: #26373b !important;
        color: #85ded7;
    }

    .action-btn-secondary {
        border-color: #66727d !important;
        background: #252c34 !important;
        color: #f3f6f8 !important;
    }

    .action-btn-secondary:hover:not(:disabled) {
        border-color: #75aaa8 !important;
        background: #26373b !important;
        color: #a2e2dd !important;
    }

    .action-btn-danger,
    .btn-quiet.btn-state-quiet {
        border-color: #8f4a51 !important;
        background: #382326 !important;
        color: #ff9da5 !important;
    }

    .list-playing .auth-name,
    .list-playing .music-album {
        color: #e8aeb2 !important;
    }

    .app-status.is-empty {
        border-color: #806638;
        background: #322a1d;
        color: #f2c879;
    }

    .app-status.is-error {
        border-color: #8f4a51;
        background: #382326;
        color: #ff9da5;
    }

    .app-status.is-success {
        border-color: #37775a;
        background: #1c3227;
        color: #8ce0b3;
    }

    .music-list-drawer {
        background: var(--cf-panel-solid) !important;
    }

    .mobile-tabbar .tab-item.active {
        background: #382326;
    }

    .mkpgb-bar {
        background: #56616c;
    }

    #search-wd,
    .layui-layer-prompt .layui-layer-input,
    .share-url {
        border-color: #66727d !important;
        background: #12171d !important;
        color: #f3f6f8 !important;
    }

    #search-wd::placeholder {
        color: #a7b1bb;
    }

    #search-wd:focus {
        background: #12171d !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --color-border: #76828d;
        --cf-panel: var(--cf-panel-solid);
    }

    .list-item,
    .footer-player,
    .data-area-container,
    .layui-layer {
        border-width: 2px !important;
    }

    .music-name-text,
    .auth-name,
    .music-album {
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pulse-playing,
    .dot-move,
    .sheet-cover[src*="player_cover.png"] {
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .list-action-svg,
    .player-icon {
        forced-color-adjust: auto;
    }

    .list-playing,
    .mobile-tabbar .tab-item.active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}


/* Solid button color vs text emphasis color split. */
.list-playing .list-num,
.list-playing .music-name,
.list-playing .auth-name,
.list-playing .music-album,
#list-foot,
.music-list-drawer .list-item:hover .music-name,
.sidebar-menu .nav-item.active,
.mobile-tabbar .tab-item.active {
    color: var(--color-primary-text, var(--color-primary)) !important;
}

.footer-player .btn-play,
.action-btn-primary,
.mkpgb-cur,
.mkpgb-dot {
    /* filled controls keep solid brand red for contrast on light/dark surfaces */
}

.mkpgb-area {
    touch-action: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.mkpgb-area.mkpgb-locked {
    cursor: not-allowed;
}

.mkpgb-dot {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.16);
}

/* Layer primary/secondary buttons for light and dark themes. */
.layui-layer-btn {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px !important;
    background: transparent !important;
}

.layui-layer-btn a {
    min-width: 76px !important;
    height: 36px !important;
    line-height: 34px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: var(--cf-panel-solid) !important;
    color: var(--color-on-surface) !important;
    font-weight: 600 !important;
    text-align: center;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--color-primary-solid, var(--color-primary)) !important;
    background: var(--color-primary-solid, var(--color-primary)) !important;
    color: #ffffff !important;
}

.layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--color-primary-hover) !important;
    background: var(--color-primary-hover) !important;
    color: #ffffff !important;
}

.layui-layer-btn .layui-layer-btn1,
.layui-layer-btn .layui-layer-btn2 {
    border-color: #b9c3cb !important;
    background: var(--cf-panel-alt) !important;
    color: var(--color-on-surface) !important;
}

@media (prefers-color-scheme: dark) {
    .layui-layer-btn .layui-layer-btn1,
    .layui-layer-btn .layui-layer-btn2 {
        border-color: #66727d !important;
        background: #252c34 !important;
        color: #f3f6f8 !important;
    }

    .list-playing {
        background: var(--cf-playing-bg) !important;
        border-color: var(--cf-playing-border) !important;
    }

    .list-playing .list-num,
    .list-playing .music-name,
    .list-playing .auth-name,
    .list-playing .music-album {
        color: var(--color-primary-text) !important;
    }

    .list-playing .list-icon.icon-play {
        border-color: var(--color-primary-solid, var(--color-primary)) !important;
        background: var(--color-primary-solid, var(--color-primary)) !important;
        color: #ffffff !important;
    }

    .list-icon:hover {
        background: #26373b !important;
        border-color: #52616d !important;
        color: #85ded7 !important;
    }
}


/* Keep blur transitions in CSS so theme filters are not overridden by JS. */
#blur-img {
    transition: background-image 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease, opacity 0.5s ease;
}


/* Final icon contract: SVG only, never sprite sheets or pseudo bars. */
.list-menu .list-icon,
.list-icon,
.list-menu .icon-play,
.list-menu .icon-download,
.list-menu .icon-addlist,
.list-menu .icon-dellist,
.icon-play,
.icon-download,
.icon-addlist,
.icon-dellist {
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    filter: none !important;
}

.list-icon.icon-play .icon-state-play { display: block !important; }
.list-icon.icon-play .icon-state-pause { display: none !important; }
.list-playing .list-icon.icon-play .icon-state-play { display: none !important; }
.list-playing .list-icon.icon-play .icon-state-pause { display: block !important; color: #ffffff !important; fill: currentColor !important; }

.btn-play .player-icon-play { display: block !important; }
.btn-play .player-icon-pause { display: none !important; }
.btn-play.btn-state-paused .player-icon-play { display: none !important; }
.btn-play.btn-state-paused .player-icon-pause { display: block !important; }

.btn-quiet .player-icon-volume { display: block !important; }
.btn-quiet .player-icon-muted { display: none !important; }
.btn-quiet.btn-state-quiet .player-icon-volume { display: none !important; }
.btn-quiet.btn-state-quiet .player-icon-muted { display: block !important; }

.btn-order .player-icon-order,
.btn-order .player-icon-order-one,
.btn-order .player-icon-shuffle { display: none !important; }
.btn-order.btn-order-list .player-icon-order,
.btn-order.btn-order-single .player-icon-order-one,
.btn-order.btn-order-random .player-icon-shuffle { display: block !important; }

@media (max-width: 900px) {
    .list-menu .list-icon,
    .list-icon {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        background-image: none !important;
        background-position: 0 0 !important;
        background-size: auto !important;
        transform: none !important;
    }

    .list-action-svg,
    .player-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .list-playing .icon-play::before,
    .list-playing .icon-play::after,
    .icon-play::before,
    .icon-play::after {
        content: none !important;
        display: none !important;
    }
}


/* Search dialog close button must never cover the submit label "??". */
.layui-layer.search-dialog,
.layui-layer-page:has(#search-area) {
    padding-top: 0 !important;
}

.layui-layer.search-dialog #search-area,
.layui-layer-page:has(#search-area) #search-area {
    padding: 16px 18px 18px !important;
}

.layui-layer.search-dialog .layui-layer-setwin a,
.layui-layer-page:has(#search-area) .layui-layer-setwin a {
    background-image: none !important;
}

/* Ensure custom X pseudo lines stay centered inside the 28px hit target. */
.layui-layer.search-dialog .layui-layer-close1::before,
.layui-layer.search-dialog .layui-layer-close1::after,
.layui-layer.search-dialog .layui-layer-close2::before,
.layui-layer.search-dialog .layui-layer-close2::after,
.layui-layer-page:has(#search-area) .layui-layer-close1::before,
.layui-layer-page:has(#search-area) .layui-layer-close1::after,
.layui-layer-page:has(#search-area) .layui-layer-close2::before,
.layui-layer-page:has(#search-area) .layui-layer-close2::after {
    left: 50% !important;
    top: 50% !important;
    width: 12px !important;
    height: 2px !important;
    margin: 0 !important;
}

.layui-layer.search-dialog .layui-layer-close1::before,
.layui-layer.search-dialog .layui-layer-close2::before,
.layui-layer-page:has(#search-area) .layui-layer-close1::before,
.layui-layer-page:has(#search-area) .layui-layer-close2::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.layui-layer.search-dialog .layui-layer-close1::after,
.layui-layer.search-dialog .layui-layer-close2::after,
.layui-layer-page:has(#search-area) .layui-layer-close1::after,
.layui-layer-page:has(#search-area) .layui-layer-close2::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

@media (max-width: 900px) {
    .layui-layer.search-dialog .layui-layer-title,
    .layui-layer-page:has(#search-area) .layui-layer-title {
        height: 46px !important;
        line-height: 46px !important;
        padding: 0 48px 0 14px !important;
    }

    .layui-layer.search-dialog #search-area,
    .layui-layer-page:has(#search-area) #search-area {
        padding: 14px !important;
    }
}

/* --- Premium V1.0 Compatibility Layer --- */

/* Cover section: override old cover-wrapper margin, section controls spacing. */
.player-details .cover-wrapper {
    margin-bottom: 0 !important;
}

/* 覆盖 cloudflare 的 border-radius: 8px，封面保持正圆形 */
.cover-section .cover-wrapper {
    border-radius: 50% !important;
}

.cover-section {
    margin-bottom: 24px;
}

/* Vinyl disc: override any inherited backgrounds. */
.vinyl-disc {
    background: radial-gradient(
        circle at center,
        #c8c8c8 0%,
        #aaa 2%,
        #2a2a2a 4%,
        #1a1a1a 7%,
        #111111 13%,
        #0d0d0d 25%,
        #0a0a0a 45%,
        #070707 65%,
        #040404 85%,
        #020202 100%
    ) !important;
}

.vinyl-disc .center-hole {
    background: #050505 !important;
}

@media (prefers-color-scheme: dark) {
    .vinyl-disc {
        background: radial-gradient(
            circle at center,
            #7a7a7a 0%,
            #555 2%,
            #1a1a1a 5%,
            #111111 10%,
            #0d0d0d 25%,
            #0a0a0a 45%,
            #070707 65%,
            #040404 85%,
            #020202 100%
        ) !important;
    }
}

/* Noise & glow: never block clicks. */
.noise-overlay,
.dynamic-glow {
    pointer-events: none !important;
}

/* Premium scrollbar: thinner, more elegant. */
::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.12) !important;
    min-height: 24px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22) !important;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* Progress bar: gradient & dot for cloudflare theme. */
.mkpgb-cur {
    background: linear-gradient(90deg, var(--color-primary), #ff7a4a) !important;
}

.mkpgb-dot {
    background: radial-gradient(circle at 35% 35%, #ff8888, var(--color-primary)) !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.5), 0 0 0 4px rgba(var(--color-primary-rgb), 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .cover-section {
        margin: 0 auto 16px !important;
    }

    .cover-section .cover-wrapper {
        width: 84% !important;
        height: 84% !important;
    }

    .player-details .cover-wrapper {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width: 480px) {
    .cover-section .cover-wrapper {
        width: 82% !important;
        height: 82% !important;
    }
}

/* Remove any stale pulse-playing animation. */
.pulse-playing {
    animation: none;
}

/* Playing song: standard color, no gradient. */
.list-playing .music-name-text {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    color: var(--color-primary-text, var(--color-primary)) !important;
}

/* Sidebar active item: force white text + icons. */
.sidebar-menu .nav-item.active {
    color: #ffffff !important;
}

.sidebar-menu .nav-item.active svg {
    stroke: #ffffff !important;
}