/* Copyright mujic@royverse69 */
:root {
            color-scheme: dark;
            --bg-base: #000000;
            --bg-surface: #0a0a0a;
            --bg-elevated: #141414;
            --bg-hover: rgba(255, 255, 255, 0.05);
            --bg-active: rgba(255, 255, 255, 0.08);

            --text-primary: #ffffff;
            --text-secondary: #a0a0a0;
            --text-tertiary: #666666;

            --border-subtle: rgba(255, 255, 255, 0.06);
            --accent-color: #ffffff;

            --space-2: 2px; --space-4: 4px; --space-8: 8px;
            --space-12: 12px; --space-16: 16px; --space-24: 24px;
            --space-32: 32px; --space-48: 48px; --space-64: 64px;

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-hero: 20px;
            --radius-full: 9999px;

            --glass-bg: rgba(10, 10, 10, 0.65);
            --glass-blur: blur(24px);
            --glass-border: 1px solid rgba(255, 255, 255, 0.08);
            --glass-panel-bg: rgba(12, 12, 12, 0.62);
            --glass-panel-border: 1px solid rgba(255, 255, 255, 0.09);
            --glass-panel-shadow: 0 24px 70px rgba(0,0,0,.42);

            --nav-height: 64px;
            --sidebar-width: 260px;
            --mini-player-height: 64px;
            --safe-top: env(safe-area-inset-top, 12px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);

            --font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        body.theme-light {
            color-scheme: light;
            --bg-base: #f5f5f7;
            --bg-surface: #ffffff;
            --bg-elevated: #ffffff;
            --text-primary: #000000;
            --text-secondary: #6e6e73;
            --text-tertiary: #86868b;
            --bg-hover: rgba(0, 0, 0, 0.04);
            --bg-active: rgba(0, 0, 0, 0.08);
            --border-subtle: rgba(0, 0, 0, 0.06);
            --glass-bg: rgba(255, 255, 255, 0.75);
            --glass-border: 1px solid rgba(0, 0, 0, 0.08);
            --accent-color: #000000;
        }

        body.reduced-motion * { transition: none !important; animation: none !important; }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        html,body,*{ scrollbar-width: none !important; -ms-overflow-style: none !important; }
        *::-webkit-scrollbar { display: none !important; }

        body {
            font-family: var(--font-family); background-color: var(--bg-base); color: var(--text-primary);
            overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            width: 100vw; height: 100dvh;
        }

        #app-layout {
            position: relative; isolation: isolate; z-index: 1; display: flex; flex-direction: column;
            height: 100%; width: 100%; overflow-x: hidden;
            padding-left: var(--safe-left); padding-right: var(--safe-right);
        }

        #main-content {
            flex: 1; overflow-y: auto; overflow-x: hidden;
            padding: calc(var(--safe-top) + 12px) var(--space-24) calc(var(--nav-height) + var(--mini-player-height) + 32px + var(--safe-bottom)) var(--space-24);
            scroll-behavior: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }

        .glass-surface { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); }
        .settings-section,.search-container{ background:var(--glass-panel-bg); backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); border:var(--glass-panel-border); box-shadow:inset 0 1px rgba(255,255,255,.035), var(--glass-panel-shadow); }
        .track-row { background:rgba(255,255,255,.018); border:1px solid rgba(255,255,255,.035); }
        body.theme-light .track-row { background:rgba(0,0,0,.018); border-color:rgba(0,0,0,.045); }
        .bottom-sheet { background:var(--glass-panel-bg) !important; backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); border:var(--glass-panel-border); box-shadow:var(--glass-panel-shadow), inset 0 1px rgba(255,255,255,.045); }
        h1,h2,h3,h4{ font-weight: 500; letter-spacing: -0.02em; }
        .display-text { font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -0.03em; margin-bottom: var(--space-32); line-height: 1.2; transition: opacity 0.5s ease; }
        .display-text.hidden { opacity: 0; pointer-events: none; height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: hidden; visibility: hidden; }
        .section-title { font-size: 18px; margin-bottom: var(--space-16); color: var(--text-primary); font-weight: 600; }
        .item-title { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
        .item-subtitle { font-size: 13px; font-weight: 400; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

        .editorial-section { margin-bottom: var(--space-48); }
        .editorial-divider { border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-16); padding-bottom: var(--space-8); }

        .horizontal-rail { display: flex; overflow-x: auto; gap: var(--space-16); padding-bottom: var(--space-16); margin-right: calc(var(--space-24) * -1); padding-right: var(--space-24); scroll-snap-type: x mandatory; }
        .art-card { min-width: 140px; max-width: 140px; scroll-snap-align: start; cursor: pointer; }
        .art-wrapper { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-12); background-color: var(--bg-elevated); position: relative; flex-shrink: 0; }
        .art-wrapper::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.05); border-radius: inherit; pointer-events: none; }
        .art-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease, filter 0.3s ease; }
        @media (hover: hover) { .art-card:hover .art-wrapper img { transform: scale(1.03); filter: brightness(1.1); } }
        .art-card:active .art-wrapper img { transform: scale(0.97); }

        .track-list { display: flex; flex-direction: column; gap: var(--space-2); }
        .track-row { display: flex; align-items: center; padding: var(--space-8) var(--space-8); margin: 0; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; border-radius: var(--radius-sm); min-height: 60px; }
        @media (hover: hover) { .track-row:hover { background: var(--bg-hover); } }
        .track-row:active { background: var(--bg-active); transform: scale(0.99); }
        .track-row.dragging { opacity: 0.5; background: var(--bg-elevated); border: 1px dashed var(--accent-color); }
        .track-row.drag-over { border-top: 2px solid var(--accent-color); }
        .track-art-small { width: 48px; height: 48px; min-width: 48px; aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; margin-right: var(--space-16); background-color: var(--bg-elevated); flex-shrink: 0; overflow: hidden; }
        .track-meta { flex: 1; min-width: 0; padding-right: var(--space-12); display: flex; flex-direction: column; justify-content: center; }

        .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: var(--space-12) var(--space-24); border-radius: var(--radius-full); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.2s ease; min-height: 44px; min-width: 44px; }
        @media (hover: hover) { .btn:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.1); } }
        .btn:active { transform: scale(0.96); }
        .btn-primary { background: var(--accent-color); color: var(--bg-base); border: none; }
        @media (hover: hover) { .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.15); } }

        .icon-btn { background: transparent; border: none; color: var(--text-secondary); width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, background 0.2s, transform 0.2s; flex-shrink: 0; }
        @media (hover: hover) { .icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); } }
        .icon-btn:active { opacity: 0.6; transform: scale(0.92); }
        .icon-btn.active-state { color: var(--accent-color); }

        #bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + var(--safe-bottom)); display: flex; justify-content: space-around; align-items: center; padding-bottom: var(--safe-bottom); z-index: 1200; border-top: var(--glass-border); pointer-events: auto; touch-action: manipulation; isolation: isolate; }
        .brand-header { display: none; font-size: 20px; font-weight:600; margin: 0 var(--space-16) var(--space-32) var(--space-16); color: var(--text-primary); }
        .nav-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--text-tertiary); cursor: pointer; padding: var(--space-8); transition: all 0.2s ease; min-height: 44px; min-width: 60px; }
        .nav-item.active { color: var(--accent-color); transform: translateY(-2px); }
        @media(hover:hover){ .nav-item:hover { color: var(--text-primary); } }
        .nav-item .material-symbols-rounded { font-variation-settings: 'FILL' 0; transition: font-variation-settings 0.2s; }
        .nav-item.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
        .nav-item span:last-child { font-size: 11px; font-weight: 500; }

        #mini-player { position: fixed; bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--space-8)); left: var(--space-8); right: var(--space-8); height: var(--mini-player-height); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; align-items: center; padding: 0 var(--space-8) 0 var(--space-12); z-index: 1050; cursor: pointer; transform: translateY(200%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 4px 20px rgba(0,0,0,0.3); overflow: hidden; touch-action: manipulation; pointer-events: auto; user-select:none; -webkit-user-select:none; }
        #mini-player.visible { transform: translateY(0); }
        #mini-art { width: 44px; height: 44px; min-width: 44px; max-width: 44px; border-radius: var(--radius-sm); object-fit: cover; margin-right: var(--space-12); flex-shrink: 0; }
        .mini-meta { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
        .mini-controls { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
        .mini-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; overflow: hidden; pointer-events:none !important; touch-action:none; }
        .mini-progress-fill { height: 100%; background: var(--accent-color); width: 0%; transition: width 0.1s linear; pointer-events:none !important; }

        #full-player { position: fixed; inset: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; background: var(--bg-base); z-index: 2000; isolation: isolate; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); overflow: hidden; }
        #full-player:not(.active) * { pointer-events:none !important; }
        #full-player.active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
        .player-bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; pointer-events: none; opacity: .35; filter: blur(50px) saturate(1.15); transform: scale(1.08); overflow: hidden; transition: background-image 0.5s ease; }
        .player-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.56); }

        .player-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) var(--space-16); flex-shrink: 0; }
        .player-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 500px; margin: 0 auto; min-height: 0; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

        .player-art-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-16) var(--space-32); min-height: 0; width: 100%; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .player-art-container img { width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: var(--radius-lg); object-fit: cover; display: block; box-shadow: 0 20px 40px rgba(0,0,0,0.4); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.4s ease; }
        .player-art-container.paused img { transform: scale(0.92); opacity: 0.9; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
        .player-art-container.contained img { object-fit: contain; background: rgba(0,0,0,0.2); box-shadow: none; }

        .player-controls-section { padding: var(--space-8) var(--space-32) var(--space-24) var(--space-32); flex-shrink: 0; display: flex; flex-direction: column; width: 100%; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

        .player-metadata-row { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-24); width: 100%; transition: margin 0.4s ease; }
        .main-playback-controls { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; margin-bottom: var(--space-16); width: 100%; }
        .secondary-playback-controls { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; margin-top: var(--space-8); width: 100%; }
        .time-labels { display: flex !important; flex-direction: row !important; justify-content: space-between; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 4px; width: 100%; }

        .player-title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
        .player-artist { font-size: 16px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .scrubber-wrap { margin-bottom: var(--space-24); touch-action: none; padding: var(--space-8) 0; transition: margin 0.4s ease; width: 100%; }
        .scrubber-track { width: 100%; height: 24px; display: flex; align-items: center; cursor: pointer; position: relative; }
        .scrubber-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
        .scrubber-fill { height: 100%; background: var(--accent-color); width: 0%; position: absolute; left: 0; pointer-events: none; }
        .scrubber-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
        .scrubber-track { overflow: hidden; border-radius: 999px; }
        .scrubber-visualizer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.85; mix-blend-mode:screen; }
        .scrubber-bg { z-index:1; }
        .scrubber-fill { z-index:2; }
        .scrubber-thumb { z-index:3; }
        .scrubber-visualizer + .scrubber-bg { background: rgba(255,255,255,.07); }

        .drag-handle { touch-action: none; user-select: none; -webkit-user-select: none; flex:0 0 auto; }
        .queue-mobile-controls { display:flex; align-items:center; gap:2px; flex:0 0 auto; }
        .queue-mobile-controls .icon-btn { width:36px; height:36px; min-width:36px; }
        @media (min-width:768px){ .queue-mobile-controls .icon-btn[data-action='move-queue'] { display:none; } }
        body.ios #volume-sheet,body.ios #player-more-sheet [data-target="volume-sheet"]{ display: none !important; }

        .main-playback-controls .icon-btn { width: 48px; height: 48px; }
        .btn-play-pause { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-color); color: var(--bg-base); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform 0.2s; }
        .btn-play-pause:active { transform: scale(0.94); }
        .btn-play-pause .material-symbols-rounded { font-size: 36px; font-variation-settings: 'FILL' 1; pointer-events: none; }

        .player-lyrics-container {
            position: absolute; top: 10vh; left: 0; right: 0; bottom: 0; z-index: 0;
            opacity: 0; visibility: hidden; pointer-events: none;
            display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
            padding: 20px 24px calc(45vh + var(--safe-bottom)) 24px; text-align: center;
            align-items: center;
            scroll-behavior: smooth; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            mask-image: none;
            -webkit-mask-image: none;
        }

        body.lyrics-mode #full-player .player-art-container { display: none !important; }
        body.lyrics-mode #full-player .player-controls-section {
            position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
            background: rgba(0,0,0,.90);
            padding-top: 48px; padding-bottom: calc(var(--space-24) + var(--safe-bottom));
        }
        body.lyrics-mode .player-lyrics-container { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }

        body.lyrics-mode.immersive-lyrics #full-player .player-art-container,body.lyrics-mode.immersive-lyrics #full-player .player-controls-section,body.lyrics-mode.immersive-lyrics .player-header{ display: none !important; }
        body.lyrics-mode.immersive-lyrics .player-lyrics-container {
            position: absolute; inset: 0; z-index: 10; height: 100dvh; max-width: 800px; margin: 0 auto;
            padding: 25vh 24px; top: 0; flex: 1; align-items: center; justify-content: flex-start;
            mask-image: none;
            -webkit-mask-image: none;
        }

        .lyric-line { cursor: pointer; text-align: center; font-size: clamp(24px, 5vw, 36px); font-weight: 700; line-height: 1.3; width: 100%; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .lyrics-style-apple .lyric-line { opacity: 0.3; filter: blur(2px); margin-bottom: 24px; color: var(--text-primary); }
        .lyrics-style-apple .lyric-line.active { opacity: 1; filter: blur(0px); transform: scale(1.05); }

        .lyrics-style-spotify .lyric-line { opacity: 0.4; transition: opacity 0.3s ease; margin-bottom: 20px; color: var(--text-primary); }
        .lyrics-style-spotify .lyric-line.active { opacity: 1; color: var(--text-primary); }

        .lyrics-style-neon .lyric-line { opacity: 0.3; transform: scale(0.95); font-family: 'Inter', sans-serif; margin-bottom: 24px; color: var(--text-primary); }
        @media (hover: hover) { .lyrics-style-neon .lyric-line:hover { opacity: 0.8; } }
        .lyrics-style-neon .lyric-line.active {
            opacity: 1; transform: scale(1.05) rotate(-1deg); color: var(--accent-ink, #000); font-weight: 900;
            background: var(--accent-color); display: inline-block; padding: 4px 12px;
            border: 2px solid #000; box-shadow: 4px 4px 0px rgba(255,255,255,0.22); border-radius: 6px; width: auto;
        }

        .player-lyrics-container.un-synced { white-space: pre-wrap; font-size: 16px; line-height: 1.8; color: var(--text-primary); text-align: center; overflow-y: auto; align-items: center; justify-content: center; }

        .lyrics-unavailable-card { width:min(100%,560px); margin:auto; padding:24px; text-align:center; border:1px solid var(--border-subtle); border-radius:18px; background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 16px 50px rgba(0,0,0,.22); }
        .lyrics-unavailable-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
        .lyrics-unavailable-text { font-size:13px; line-height:1.5; color:var(--text-secondary); }
        .lyrics-unavailable-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
        .lyrics-unavailable-actions .btn { text-decoration:none; white-space:nowrap; }
        .search-container { display: flex; align-items: center; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); padding: var(--space-12) var(--space-16); margin-bottom: var(--space-24); border-radius: var(--radius-md); transition: border-color 0.2s; }
        .search-container:focus-within { border-bottom-color: var(--accent-color); }
        .search-container input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 16px; flex: 1; margin-left: var(--space-12); font-family: var(--font-family); width: 100%; -webkit-user-select:text; user-select:text; }

        .settings-section { margin-bottom: 24px; background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); overflow: hidden; }
        .settings-section .section-title { padding: 18px 20px 12px; margin: 0; font-size: 13px; font-weight:600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-color); border-bottom: 1px solid var(--border-subtle); }
        .settings-row { min-height: 68px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); gap: 24px; transition: background 0.2s; }
        .settings-row:last-child { border-bottom: none; }
        @media (hover: hover) { .settings-row.clickable:hover { background: var(--bg-hover); } }
        .settings-row.clickable:active { background: var(--bg-active); }
        .settings-text { flex: 1; min-width: 0; }
        .settings-label { font-size: 15px; color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 8px;}
        .settings-desc { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
        .settings-control-group { flex-shrink: 0; display: flex; align-items: center; gap: 12px;}

        .apple-select-wrapper { position: relative; display: inline-block; min-width: 150px; }
        .apple-select-wrapper::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: var(--text-secondary); clip-path: polygon(100% 0, 0 0, 50% 100%); pointer-events: none; }

        select.settings-control { appearance: none; -webkit-appearance: none; background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle); outline: none; font-size: 14px; padding: 0 32px 0 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 500; width: 100%; height: 36px; transition: background-color 0.2s, box-shadow 0.2s; }
        select.settings-control option { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; }
        @media (prefers-color-scheme: dark) { select.settings-control option { background-color: #1a1a1a !important; color: white !important; } }
        body.theme-light select.settings-control option { background-color: white !important; color: black !important; }
        select.settings-control:focus { box-shadow: 0 0 0 2px var(--accent-color); }

        input[type="color"].settings-control { -webkit-appearance: none; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; overflow: hidden; padding: 0; background: none; transition: transform 0.2s;}
        input[type="color"].settings-control::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"].settings-control::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; }
        input[type="checkbox"].settings-control { width: 22px; height: 22px; accent-color: var(--accent-color); cursor: pointer; margin: 0; flex: 0 0 auto; vertical-align: middle; }
        .settings-control-group { align-items: center; justify-content: center; }
        .mini-controls { position:relative; z-index:4; display:flex; align-items:center; gap:2px; flex-shrink:0; }
        #mini-player .mini-action { width:42px; height:42px; flex:0 0 42px; position:relative; z-index:5; pointer-events:auto; }
        #mini-player .mini-action .material-symbols-rounded { pointer-events:none; }
        #mini-player .mini-progress-bar { pointer-events:none; }
        @media (max-width: 560px) {
            .settings-row { align-items:center; gap:12px; }
            .settings-control-group { flex:0 0 auto; width:auto !important; align-self:center !important; }
            .settings-control-group input[type="checkbox"] { margin:0; transform:translateY(0); }
            .settings-text { min-width:0; }
            .settings-label { line-height:1.25; }
            .settings-desc { line-height:1.35; }
            #mini-player { height:60px; }
            #mini-player .mini-action { width:40px; height:40px; }
        }

        .tab-bar { display: flex; gap: var(--space-24); margin-bottom: var(--space-24); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: 2px; }
        .tab-item { padding: var(--space-8) 0; font-size: 15px; font-weight: 500; color: var(--text-secondary); cursor: pointer; position: relative; white-space: nowrap; min-height: 44px; display: flex; align-items: center; transition: color 0.2s;}
        .tab-item.active { color: var(--text-primary); }
        .tab-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--accent-color); border-radius: 2px;}

        .empty-state { padding: var(--space-48) 0; text-align: left; }
        .empty-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-8); }
        .empty-desc { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--space-24); line-height: 1.5; max-width: 300px; }

        .toast { position: fixed; top: calc(var(--safe-top) + 16px); left: 50%; transform: translate(-50%, -140%); min-height: 46px; max-width: min(90vw, 380px); padding: 10px 16px; display: flex; align-items: center; gap: 10px; border-radius: 16px; background: rgba(34,34,34,.96); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 12px 40px rgba(0,0,0,0.30), inset 0 1px rgba(255,255,255,0.16); color: #ffffff; font-weight: 500; font-size: 14px; z-index: 2000; opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; white-space: nowrap; }
        body.theme-light .toast { background: rgba(245,245,247,.98); color:#111; border: 1px solid rgba(0,0,0,.1); }
        .toast.show { transform: translate(-50%, 0); opacity: 1; }
        #toast-message { overflow:hidden; text-overflow:ellipsis; }

        .view { display: none; }
        .view.active { display: block; animation: fadeIn 0.2s ease; }
        #view-settings,#view-search,#view-library{ max-width: 760px; margin: 0 auto; width: 100%; }
        .lib-tab-content { display: none; }
        .lib-tab-content.active { display: block; }
        .lib-tab-content.active.grid-view { display: grid; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .bottom-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 5000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .bottom-sheet-overlay.active { opacity: 1; pointer-events: auto; }
        .bottom-sheet { position: fixed; bottom: 0; left: 0; width: 100%; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); padding: var(--space-16) var(--space-16) calc(var(--space-24) + var(--safe-bottom)) var(--space-16); transform: translateY(100%); z-index: 5001; display: flex; flex-direction: column; max-height: 85dvh; overflow-y: auto; visibility: hidden; background-color: var(--bg-surface); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.3s; }
        .bottom-sheet.active { transform: translateY(0); visibility: visible; transition: transform 0.3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
        .sheet-handle { width: 36px; height: 4px; background: var(--border-subtle); border-radius: 2px; margin: 0 auto var(--space-16) auto; }
        .sheet-header { display: flex; align-items: center; margin-bottom: var(--space-16); padding-bottom: var(--space-16); border-bottom: 1px solid var(--border-subtle); }
        .sheet-title-area { flex: 1; min-width: 0; }
        .sheet-title { font-size: 16px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sheet-subtitle { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        .sheet-option { padding: var(--space-12) var(--space-8); font-size: 15px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: var(--space-16); border-radius: var(--radius-sm); min-height: 48px; }
        @media (hover:hover){ .sheet-option:hover { background: var(--bg-hover); } }
        .sheet-option:active { background: var(--bg-active); }
        .sheet-option.destructive { color: #ff453a; }
        .sheet-option .material-symbols-rounded { color: var(--text-secondary); pointer-events: none;}
        .sheet-option.destructive .material-symbols-rounded { color: #ff453a; pointer-events: none;}
        .sheet-option-right { margin-left: auto; color: var(--text-secondary); font-size: 13px; pointer-events: none;}

        .grid-view { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-16); }
        .volume-container { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8); width: 100%; touch-action: none; }
        .volume-slider { flex: 1; height: 24px; position: relative; cursor: pointer; display: flex; align-items: center; }
        .volume-bg { width: 100%; height: 4px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 2px; position: absolute; }
        .volume-fill { height: 4px; background: var(--accent-color); border-radius: 2px; position: absolute; left: 0; pointer-events: none; width: 100%; }

        .eq-presets { display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px; }
        .eq-preset { position:relative; flex:0 0 auto; min-height:38px; padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:var(--text-secondary); font:600 13px var(--font-family); cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
        .eq-preset:hover { background:rgba(255,255,255,.08); color:var(--text-primary); }
        .eq-preset:active { transform:scale(.97); }
        .eq-preset.active { background:var(--accent-color); color:var(--bg-base); border-color:var(--accent-color); box-shadow:0 0 0 1px rgba(255,255,255,.06),0 5px 16px rgba(0,0,0,.20); }
        .eq-preset.active::after { content:'✓'; display:inline-block; margin-left:7px; font-weight:700; }
        .eq-preset.custom-active { border-color:var(--accent-color); color:var(--text-primary); background:rgba(255,255,255,.08); }

        .player-header,.player-body,.immersive-btn{ z-index:4; }
        .player-lyrics-container { z-index:5; }
        .player-controls-section { z-index:6; }
        .eq-layout { border:1px solid var(--border-subtle); border-radius:16px; background:var(--bg-surface); padding:16px 14px 12px; }
        .eq-scale { display:flex; justify-content:space-between; align-items:center; color:var(--text-tertiary); font-size:10px; margin:0 2px 6px; }
        .eq-bands { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:8px; align-items:stretch; padding:4px 0 2px; }
        .eq-band { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
        .eq-band .eq-value { min-height:15px; font-size:11px; font-weight:600; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
        .eq-band .eq-frequency { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
        .eq-band input[type="range"] { -webkit-appearance:none; appearance:none; writing-mode:vertical-lr; direction:rtl; width:32px; height:172px; max-width:none; margin:0; padding:0; background:transparent; accent-color:var(--accent-color); cursor:pointer; touch-action:none; }
        .eq-band input[type="range"]::-webkit-slider-runnable-track { width:4px; height:160px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.08); border-radius:999px; }
        .eq-band input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:17px; height:17px; margin-left:-6px; margin-right:-6px; border-radius:50%; background:var(--accent-color); border:3px solid rgba(0,0,0,.45); box-shadow:0 2px 8px rgba(0,0,0,.38); }
        .eq-band input[type="range"]::-moz-range-track { width:4px; height:160px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.08); border-radius:999px; }
        .eq-band input[type="range"]::-moz-range-thumb { width:17px; height:17px; border-radius:50%; background:var(--accent-color); border:3px solid rgba(0,0,0,.45); box-shadow:0 2px 8px rgba(0,0,0,.38); }
        @media (max-width:520px){ .eq-layout{padding:14px 8px 10px;} .eq-bands { gap:3px; grid-template-columns:repeat(5,minmax(38px,1fr)); } .eq-band input[type="range"] { height:150px; width:30px; } .eq-band input[type="range"]::-webkit-slider-runnable-track { height:138px; } .eq-band input[type="range"]::-moz-range-track { height:138px; } }

        .dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 6000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .dialog-overlay.active { opacity: 1; pointer-events: auto; }
        .dialog-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 90%; max-width: 360px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); z-index: 6001; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 24px 48px rgba(0,0,0,0.4); display: flex; flex-direction: column; overflow: hidden; }
        .dialog-box.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
        .dialog-header { padding: 20px 20px 10px; font-size: 18px; font-weight: 600; color: var(--text-primary); text-align: center; }
        .dialog-body { padding: 0 20px 20px; font-size: 15px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
        .dialog-input { width: calc(100% - 40px); margin: 0 20px 20px; padding: 12px; background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 15px; outline: none; }
        .dialog-input:focus { border-color: var(--accent-color); }
        .dialog-footer { display: flex; border-top: 1px solid var(--border-subtle); }
        .dialog-btn { flex: 1; padding: 16px; background: transparent; border: none; font-size: 16px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background 0.2s; font-family: inherit; }
        .dialog-btn:active { background: var(--bg-hover); }
        .dialog-btn:first-child { border-right: 1px solid var(--border-subtle); font-weight: 400; }
        .dialog-btn.destructive { color: #ff453a; }
        .dialog-btn.primary { color: var(--accent-color); font-weight: 600; }

        .lib-tab-content.active.track-list { display: flex; }
        .grid-view .art-card { min-width: 0; }

        #full-player { --bg-base: #000; --bg-surface: #0a0a0a; --bg-elevated: #141414; --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(255,255,255,0.08); --text-primary: #fff; --text-secondary: #a0a0a0; --text-tertiary: #666; --border-subtle: rgba(255,255,255,0.06); }
        body.theme-light.accent-default #full-player { --accent-color: #fff; }

        .immersive-btn { position: absolute; top: calc(var(--safe-top) + 16px); right: 68px; z-index: 20; display: none !important; }
        @media (min-width: 768px) { body.lyrics-mode .immersive-btn { display: flex !important; } }
        body.lyrics-mode.immersive-lyrics .immersive-btn { display: flex !important; right: 16px; }
        @media (max-width: 767px) {
            #full-player .player-art-container { container-type: size; }
            #full-player .player-art-container img { width: min(100cqw, 100cqh, 420px); height: auto; }
            body.lyrics-mode .player-lyrics-container {
                top: 0; left: 0; right: 0; width: 100%; max-width: 520px; margin: 0 auto;
                padding: 10vh 14px calc(43vh + var(--safe-bottom)) 14px;
                align-items: center; justify-content: flex-start; text-align: center;
                transform: translateY(-6vh);
            }
            body.lyrics-mode.immersive-lyrics .player-lyrics-container {
                padding: 13vh 14px calc(29vh + var(--safe-bottom)) 14px;
                max-width: 520px; margin: 0 auto; transform: translateY(-4vh);
                align-items: center; justify-content: flex-start; text-align: center;
            }
            body.lyrics-mode .player-lyrics-container .lyric-line,body.lyrics-mode.immersive-lyrics .player-lyrics-container .lyric-line{
                text-align: center; transform-origin: center center;
                width: 100%; max-width: 94%; margin-left: auto; margin-right: auto;
            }
            body.lyrics-mode .lyrics-style-neon .lyric-line.active,body.lyrics-mode.immersive-lyrics .lyrics-style-neon .lyric-line.active{
                width: fit-content; max-width: 94%; display: block; margin-left: auto; margin-right: auto;
            }
        }
        @media (min-width: 768px) { .nav-item.active { transform: none; } }

        @media (min-width: 768px) {
            #app-layout { flex-direction: row; }
            #bottom-nav { position: relative; width: var(--sidebar-width); height: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: var(--space-32) var(--space-16); border-top: none; border-right: 1px solid var(--border-subtle); background: var(--bg-surface); backdrop-filter: none; z-index: 50; }
            .nav-item { flex-direction: row; width: 100%; padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); justify-content: flex-start; }
            .nav-item span:last-child { font-size: 15px; margin-left: var(--space-16); display: inline; }
            #main-content { padding: var(--space-48); max-width: 1200px; margin: 0 auto; padding-bottom: calc(var(--mini-player-height) + var(--space-64)); }
            #mini-player { left: calc(var(--sidebar-width) + var(--space-24)); right: auto; bottom: var(--space-24); width: calc(100% - var(--sidebar-width) - var(--space-48)); max-width: 600px; margin: 0; }
            .brand-header { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; margin: 0 var(--space-16) var(--space-32) var(--space-16); color: var(--text-primary); }

            #full-player .player-body { flex-direction: row; max-width: 1180px; width: min(1180px, calc(100vw - 96px)); align-items: center; gap: 72px; padding: 0; }
            #full-player .player-art-container { flex: 1; height: 100%; padding: 0; display: flex; align-items: center; justify-content: flex-end;}
            #full-player .player-art-container img { max-width: 420px; max-height: 420px; width: 100%; height: auto;}
            #full-player .player-controls-section { flex:1; max-width:450px; padding:28px; display:flex; flex-direction:column; justify-content:center; position:relative; inset:auto; border:1px solid rgba(255,255,255,.075); border-radius:24px; background:rgba(9,9,9,.48); backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow:0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035); }

            body.lyrics-mode #full-player .player-body { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:64px; justify-content:center; align-items:center; max-width:1180px; width:min(1180px,calc(100vw - 96px)); padding:0; margin:0 auto; height:calc(100dvh - 92px); }
            body.lyrics-mode .player-controls-section { order:2; position:relative !important; inset:auto !important; flex:none !important; width:420px; max-width:420px; height:auto; align-self:center; padding:28px; border-radius:24px; border:1px solid rgba(255,255,255,.085); background:rgba(9,9,9,.50); backdrop-filter:blur(26px) saturate(135%); -webkit-backdrop-filter:blur(26px) saturate(135%); box-shadow:0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.035); }
            body.lyrics-mode .player-lyrics-container { order:1; flex:none; width:100%; max-width:none; min-width:0; position:relative !important; top:auto; left:auto; right:auto; bottom:auto; height:76vh; padding:0 12px; margin:0; display:flex; align-items:center; justify-content:flex-start; text-align:center; mask-image:none; -webkit-mask-image:none; }
            body.lyrics-mode #full-player .player-art-container { display: none !important; }
            .desktop-lyrics-art { display: none; width: 64px; height: 64px; border-radius: 8px; margin-bottom: 16px; object-fit: cover; box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
            body.lyrics-mode .desktop-lyrics-art { display: block; }
            body.lyrics-mode .player-lyrics-container .lyric-line { text-align: center; transform-origin: center center; width: 100%; }

            .bottom-sheet { width: 390px; max-height: min(78dvh, 720px); left: auto; right: 24px; top: 76px; bottom: auto; transform: translateY(-10px) scale(.98); border-radius: 16px; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 24px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.03); visibility: hidden; pointer-events: none; }
            .bottom-sheet.active { transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; }
            #player-more-sheet { width: 360px; }
            #eq-sheet { width: min(520px, calc(100vw - 48px)); }
        }

        @media (min-width: 768px) and (max-width: 1100px) { #view-settings,#view-search,#view-library{ max-width: 680px; } }
        @media (max-width: 767px) {
            #bottom-nav { position: fixed; z-index: 1200; }
            #mini-player { z-index:1050; bottom:calc(var(--nav-height) + var(--safe-bottom) + 10px); pointer-events:auto; }
            #mini-player .mini-action { position:relative; z-index:2; pointer-events:auto; }
            body:not(.player-open) #full-player { pointer-events:none !important; }
            #view-settings,#view-search,#view-library{ width: 100%; max-width: none; }
            .brand-header { display: none; }
            #bottom-nav { background: var(--glass-bg); }
            .nav-item span:last-child { display: none; }
            .desktop-lyrics-art { display: none !important; }
        }
        @media (max-width: 520px) {
            .settings-row { gap: 16px; align-items: flex-start; flex-direction: column;}
            .settings-control-group { align-self: flex-start; width: 100%;}
            .apple-select-wrapper { width: 100%; }
            .settings-desc { max-width: none; }
        }
        @media (min-width: 480px) and (max-height: 500px) and (orientation: landscape) {
            .player-body { flex-direction: row; align-items: center; gap: var(--space-32); padding-top: var(--space-16); padding-bottom: var(--space-16); }
            .player-art-container { margin-bottom: 0; height: 100%; max-height: 240px; flex: 0 0 240px; }
            .player-controls-section { flex: 1; margin: 0; max-width: none; }
            .scrubber-wrap { margin-bottom: var(--space-16); }
        }
        @media (max-width: 350px) {
            .main-playback-controls .icon-btn { width: 40px; height: 40px; }
            .btn-play-pause { width: 56px; height: 56px; }
            .player-title { font-size: 18px; }
        }

        .glass-surface,.settings-section,.search-container,.bottom-sheet,.dialog-box,.eq-layout{
            -webkit-backdrop-filter: blur(18px) saturate(125%);
            backdrop-filter: blur(18px) saturate(125%);
        }
        .track-row,.art-wrapper,.btn,.icon-btn{ -webkit-backdrop-filter:none; backdrop-filter:none; }
        .settings-section { background: var(--glass-panel-bg); border-color: var(--border-subtle); }
        .track-row { background: rgba(255,255,255,.012); border:1px solid transparent; }
        .track-row:hover { border-color: var(--border-subtle); }
        .bottom-sheet { background: var(--glass-panel-bg); border:1px solid rgba(255,255,255,.09); box-shadow:0 24px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.05); }
        .dialog-box { background: var(--glass-panel-bg); }
        .nav-item,.settings-row,.sheet-option,.btn,.icon-btn{ touch-action: manipulation; }

        .settings-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 20px 16px; }
        .settings-stat-card { min-width:0; padding:14px 12px; border:1px solid var(--border-subtle); border-radius:14px; background:rgba(255,255,255,.025); }
        .settings-stat-card .stat-kicker { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:6px; }
        .settings-stat-card strong { display:block; font-size:20px; line-height:1.15; font-variant-numeric:tabular-nums; }
        .settings-stat-card span:last-child { display:block; margin-top:4px; font-size:11px; color:var(--text-secondary); }
        .settings-top-list { margin:0 20px 18px; border:1px solid var(--border-subtle); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.018); }
        .settings-top-list-title { padding:12px 14px 9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--text-secondary); }
        .settings-top-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:42px; padding:0 14px; border-top:1px solid var(--border-subtle); }
        .settings-top-rank { color:var(--accent-color); font-size:12px; font-weight:700; }
        .settings-top-song { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
        .settings-top-count { font-size:11px; color:var(--text-secondary); }

        .stat-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--accent-color); }

         .setting-inline-value { font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }

        .settings-control-group .btn { min-height:38px; }
        select.settings-control { background:rgba(255,255,255,.045) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
        .art-placeholder { background-size:cover; background-position:center; color:#fff; position:relative; overflow:hidden; }
        .art-placeholder::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.04); pointer-events:none; }
        .art-placeholder .material-symbols-rounded { position:relative; z-index:1; text-shadow:0 2px 8px rgba(0,0,0,.35); }
        .player-lyrics-container { scrollbar-gutter:stable; }
        .player-lyrics-container .lyric-line { isolation:isolate; }
        #close-player-btn { z-index:50; }
        @media (min-width:768px) {
            #bottom-nav { background:var(--glass-bg) !important; -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); }
            #full-player .player-lyrics-container { max-width:680px; }

        }
        @media (max-width:767px) {

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

            #close-player-btn { position:relative; z-index:100; }
            body.player-open #full-player .player-header { pointer-events:auto; }
        }

        @media (max-width:767px) {
            body.lyrics-mode #full-player .player-header { position:relative; z-index:100; }
            body.lyrics-mode .player-lyrics-container { z-index:2; padding-top:8vh; padding-bottom:44vh; transform:translateY(-4vh); }
            body.lyrics-mode .player-lyrics-container .lyric-line { max-width:92%; margin-left:auto; margin-right:auto; }
            body.lyrics-mode.immersive-lyrics .player-lyrics-container { z-index:2; padding-top:11vh; padding-bottom:30vh; transform:none; }
        }

        :root {
            --content-max: 1240px;
            --page-gutter: clamp(14px, 3vw, 48px);
            --panel-radius: clamp(14px, 1.4vw, 20px);
            --control-height: 44px;
        }
        body { min-width: 0; }
        #main-content { width: 100%; min-width: 0; }
        .view { width: 100%; min-width: 0; }
        .section-title { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.25; }
        .display-text { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; overflow-wrap:anywhere; }
        .item-title,.item-subtitle,.settings-label,.settings-desc,.sheet-title,.sheet-subtitle,.player-title,.player-artist{ max-width: 100%; min-width: 0; }
        .item-title { font-size: clamp(13px, 1vw, 15px); }
        .item-subtitle { font-size: clamp(11px, .9vw, 13px); }
        .settings-label { font-size: clamp(14px, 1vw, 15px); line-height:1.3; }
        .settings-desc { font-size: clamp(11px, .9vw, 13px); }
        .track-row { min-height: clamp(56px, 5vw, 68px); }
        .track-art-small { width: clamp(44px, 4vw, 52px); height: clamp(44px, 4vw, 52px); min-width: clamp(44px, 4vw, 52px); }
        .settings-section,.search-container,.bottom-sheet,.dialog-box,.eq-layout{ border-radius: var(--panel-radius); }
        .settings-row { min-height: clamp(62px, 5.5vw, 72px); padding: clamp(12px, 1.3vw, 18px) clamp(14px, 1.7vw, 20px); }
        .settings-control-group { min-width: 0; }
        select.settings-control { max-width: 100%; }
        .glass-surface,.settings-section,.search-container,.bottom-sheet,.dialog-box,.track-row,.eq-layout{ box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 60px rgba(0,0,0,.18); }
        .sheet-option { min-height: 48px; padding: 10px 10px; gap: 12px; }
        .sheet-option-right { flex: 0 0 auto; white-space: nowrap; }
        .btn,.icon-btn{ min-height: var(--control-height); }

        .home-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; margin-bottom:28px; }
        .home-header-copy { min-width:0; }
        .home-title { margin:0; font-size:clamp(28px, 3.2vw, 40px); line-height:1.08; letter-spacing:-.035em; font-weight:600; }
        .home-greeting { margin-top:6px; font-size:clamp(12px, 1vw, 14px); color:var(--text-secondary); }
        .home-actions { display:none; align-items:center; gap:6px; flex:0 0 auto; }
        .home-action-btn { width:42px; height:42px; min-width:42px; border:1px solid var(--border-subtle); border-radius:50%; background:rgba(255,255,255,.05); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
        .home-action-btn:hover { background:rgba(255,255,255,.08); }
        .top-picks-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
        .top-picks-caption { font-size:12px; color:var(--text-secondary); }
        .top-pick-card .art-wrapper { position:relative; }
        .top-pick-rank { position:absolute; left:8px; bottom:8px; z-index:2; min-width:26px; height:26px; padding:0 8px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(0,0,0,.58); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:11px; font-weight:700; backdrop-filter:blur(14px); }
        .playlist-longpress-target { touch-action:pan-x pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
        .playlist-action-sheet .sheet-option { min-height:52px; }

        .playlist-header-actions { display:flex; flex-wrap:wrap; gap:10px; }
        .playlist-header-actions .btn { min-height:40px; }
        .scrubber-track { position:relative; overflow:hidden; border-radius:999px; }
        .scrubber-visualizer { z-index:2 !important; opacity:1 !important; }
        .scrubber-bg { z-index:1 !important; }
        .scrubber-fill { z-index:3 !important; background:var(--accent-color) !important; opacity:.72; box-shadow:none !important; filter:none !important; }
        .scrubber-thumb { z-index:3 !important; }
        @media (max-width:767px) {
            .home-actions { display:flex; }
            .home-header { margin-top:8px; margin-bottom:24px; }
            .top-pick-card { min-width:clamp(124px, 36vw, 156px); max-width:clamp(124px, 36vw, 156px); }
            .playlist-header-actions { width:100%; }
            .playlist-header-actions .btn { flex:1 1 auto; }
        }
        @media (min-width:768px) {
            .home-header { margin-top:0; margin-bottom:36px; }
            .home-actions { display:flex; }
            .top-pick-card { min-width:160px; max-width:160px; }
            #home-playlists-rail,#home-top-picks-rail{ gap:18px; }
        }
        @media (min-width:1200px) {
            .home-header { margin-bottom:42px; }
            .top-pick-card { min-width:176px; max-width:176px; }
            .top-pick-card .item-title { font-size:14px; }
        }

        .scrubber-track { isolation:isolate; background:rgba(255,255,255,.045); }
        .scrubber-visualizer { opacity:1; mix-blend-mode:normal; z-index:2; }
        .scrubber-bg { background:rgba(255,255,255,.055); }
        .scrubber-fill { box-shadow:none !important; }

        #view-context-detail > div:nth-of-type(1) {
            position:relative; padding:clamp(18px, 3vw, 30px); margin-bottom:clamp(22px, 3vw, 34px);
            border:1px solid var(--glass-panel-border, var(--border-subtle)); border-radius:clamp(18px, 2vw, 26px);
            background:var(--glass-panel-bg);
            box-shadow:inset 0 1px rgba(255,255,255,.04), 0 24px 80px rgba(0,0,0,.2);
        }
        #view-context-detail.context-artist #detail-art { border-radius:50% !important; }
        #view-context-detail.context-artist #detail-title { font-size:clamp(30px, 4vw, 48px); }
        #view-context-detail #detail-title { max-width:min(100%, 900px); }
        #view-context-detail #detail-subtitle { max-width:90vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        #view-context-detail #detail-tracks { max-width:100%; }

        @media (max-width: 767px) {
            #main-content { padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
            .editorial-section { margin-bottom:clamp(28px, 8vw, 48px); }
            .horizontal-rail { gap:12px; }
            .art-card { min-width:clamp(118px, 35vw, 150px); max-width:clamp(118px, 35vw, 150px); }
            .settings-row { align-items:center; flex-direction:row; gap:12px; }
            .settings-control-group { width:auto; align-self:center; }
            .apple-select-wrapper { min-width:min(42vw, 180px); }
            .settings-desc { line-height:1.35; }
            .player-title { font-size:clamp(19px, 5vw, 24px); }
            .player-artist { font-size:clamp(13px, 4vw, 16px); }
            #view-context-detail > div:nth-of-type(1) { align-items:center !important; text-align:center; }
            #view-context-detail > div:nth-of-type(1) > div:last-child { justify-content:center; flex-wrap:wrap; }
            #detail-title { justify-content:center; text-align:center; }
            #detail-subtitle { text-align:center; }
        }
        @media (max-width: 520px) {
            .settings-row { align-items:flex-start; flex-direction:column; }
            .settings-control-group { width:100%; align-self:stretch; }
            .apple-select-wrapper { width:100%; min-width:0; }
            .settings-section .settings-control-group > .btn { width:100%; }
            .settings-stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); padding-left:14px; padding-right:14px; }
            .settings-stat-card strong { font-size:clamp(18px, 7vw, 24px); }
            .settings-top-list { margin-left:14px; margin-right:14px; }
        }
        @media (min-width: 768px) {
            #view-home,#view-library,#view-search,#view-settings,#view-context-detail{ max-width:var(--content-max); }
            #main-content { padding-left:clamp(32px, 4vw, 56px); padding-right:clamp(32px, 4vw, 56px); }
            #view-context-detail > div:nth-of-type(1) { display:flex; align-items:flex-end !important; gap:28px; }
            #view-context-detail > div:nth-of-type(1) #detail-art { flex:0 0 clamp(160px, 19vw, 240px); width:clamp(160px, 19vw, 240px) !important; height:clamp(160px, 19vw, 240px) !important; min-height:0 !important; margin:0 !important; }
            #view-context-detail > div:nth-of-type(1) { flex-wrap:wrap; }
            #view-context-detail > div:nth-of-type(1) > *:not(#detail-art) { min-width:0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .scrubber-visualizer { opacity:.55; }
        }

        .settings-chevron { font-size:20px; color:var(--text-tertiary); flex:0 0 auto; }
        .home-track-longpress-target { touch-action:pan-y; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
        @media (max-width:767px) {
            :root { --page-gutter:14px; --control-height:40px; --panel-radius:15px; }
            #main-content { padding-left:14px; padding-right:14px; padding-top:calc(var(--safe-top) + 6px); padding-bottom:calc(var(--nav-height) + var(--mini-player-height) + 22px + var(--safe-bottom)); }
            .home-header { margin-top:4px; margin-bottom:18px; gap:8px; }
            .home-title { font-size:clamp(24px,7vw,29px); line-height:1.05; }
            .home-greeting { font-size:12px; margin-top:3px; }
            .home-actions { gap:3px; }
            .home-action-btn { width:38px; height:38px; min-width:38px; }
            .section-title { font-size:15px; line-height:1.2; }
            .editorial-section { margin-bottom:28px; }
            .horizontal-rail { gap:10px; padding-bottom:8px; }
            .art-card,.top-pick-card{ min-width:108px; max-width:108px; }
            .art-wrapper { margin-bottom:8px; border-radius:10px; }
            .track-row { min-height:54px; padding:6px 6px; }
            .track-art-small { width:42px; height:42px; min-width:42px; margin-right:10px; }
            .item-title { font-size:13px; line-height:1.25; }
            .item-subtitle { font-size:11px; line-height:1.2; }
            .icon-btn { width:40px; height:40px; min-width:40px; }
            .btn { min-height:40px; }
            .settings-row { flex-direction:row !important; align-items:center !important; min-height:56px; padding:9px 14px; gap:10px; }
            .settings-text { flex:1 1 auto; min-width:0; }
            .settings-control-group { flex:0 0 auto; width:auto !important; align-self:center !important; display:flex; align-items:center; justify-content:flex-end; }
            .settings-row .apple-select-wrapper { width:min(43vw,168px); min-width:0; }
            .settings-label { font-size:13px; line-height:1.2; }
            .settings-desc { font-size:11px; line-height:1.25; margin-top:3px; }
            .settings-control-group input[type=checkbox].settings-control { width:20px; height:20px; margin:0; }
            .settings-section .settings-control-group > .btn { width:auto; min-width:0; }
        }
        @media (max-width:380px) {
            .home-title { font-size:24px; }
            .home-action-btn { width:36px; height:36px; min-width:36px; }
            .art-card,.top-pick-card{ min-width:102px; max-width:102px; }
            .settings-row .apple-select-wrapper { width:41vw; }
            .settings-label { font-size:12px; }
            .settings-desc { font-size:10px; }
        }
        @media (min-width:768px) {
            #view-home { max-width:1240px; }
            #home-playlists-rail,#home-top-picks-rail{ gap:16px; }
            #home-tracks { max-width:980px; }
        }

        @media (max-width:767px) {
            .display-text { font-size:clamp(24px,6.5vw,28px); line-height:1.08; margin-bottom:20px; }
            #view-home .display-text { margin-bottom:12px; }
            .search-container { min-height:46px; padding:8px 12px; }
            .search-container input { font-size:15px; }
            .tab-item { font-size:14px; min-height:40px; }
            .lib-tab-content { min-width:0; }
            #view-context-detail > div:nth-of-type(1) { padding:16px 12px; }
            #detail-art { width:132px !important; height:132px !important; min-height:132px !important; }
            .playlist-header-actions { gap:8px; }
        }

.settings-row { align-items: center; }
.settings-control-group { align-items: center; justify-content: flex-end; }
.settings-control-group input[type="checkbox"] { align-self: center; margin: 0; }
.settings-control-group .apple-select-wrapper { min-width: 120px; width: min(160px, 44vw); }
@media (max-width: 520px) {
  .settings-row { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 13px 14px; }
  .settings-text { flex: 1 1 auto; width: auto; min-width: 0; }
  .settings-control-group { flex: 0 0 auto; width: auto !important; align-self: center !important; margin-left: auto; }
  .settings-control-group .apple-select-wrapper { width: min(138px, 38vw); min-width: 110px; }
  .settings-label { overflow-wrap: anywhere; }
  .settings-desc { max-width: none; }
}
@media (max-width: 360px) { .settings-section { border-radius: 13px; } .settings-section .section-title { padding: 15px 14px 10px; } .settings-row { padding: 12px; } .settings-label { font-size: 14px; } .settings-desc { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .settings-row,.btn,.icon-btn,.track-row{ transition: none !important; } }

.waveform-style-option{display:grid;grid-template-columns:minmax(110px,1fr) minmax(72px,auto) 20px;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 12px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.025);color:var(--text-primary);font:500 14px var(--font-family);text-align:left;cursor:pointer;touch-action:manipulation}
.waveform-style-option:active{background:var(--bg-active)}
.waveform-style-option.active-state{background:rgba(255,255,255,.075);border-color:var(--accent-color)}
.waveform-style-option .style-check{opacity:0;color:var(--accent-color);font-size:20px}
.waveform-style-option.active-state .style-check{opacity:1}
.waveform-style-preview{height:32px;display:block;border-radius:8px;position:relative;overflow:hidden;background:rgba(255,255,255,.035)}
.waveform-style-preview svg{display:block;width:100%;height:100%;overflow:visible}
.waveform-style-preview .preview-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:3;stroke-linecap:round}
.waveform-style-preview .preview-active{fill:none;stroke:var(--accent-color);stroke-width:4;stroke-linecap:round}
.waveform-style-preview .preview-thumb{fill:none;stroke:var(--accent-color);stroke-width:3.5;stroke-linecap:round}
.waveform-style-preview .preview-wave{fill:none;stroke:var(--accent-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.waveform-style-preview.slim .preview-active{stroke-width:2}
.waveform-style-preview.squiggly .preview-wave{stroke-width:3.8}
@media(max-width:420px){.waveform-style-option{grid-template-columns:minmax(90px,1fr) minmax(62px,auto) 18px;min-height:58px;gap:10px;padding:8px}.waveform-style-preview{height:26px}}
@media(prefers-reduced-motion:reduce){.waveform-style-option{transition:none!important}}

.settings-overview { display:grid; grid-template-columns:1fr; gap:10px; }
.settings-overview-intro { padding:4px 2px 10px; }
.settings-overview-kicker { color:var(--text-tertiary); font-size:10px; font-weight:700; letter-spacing:.14em; margin-bottom:7px; }
.settings-overview-copy { color:var(--text-secondary); font-size:13px; line-height:1.5; max-width:560px; }
.settings-category-card { display:flex; align-items:center; width:100%; gap:14px; min-width:0; min-height:84px; padding:16px; border:1px solid var(--glass-panel-border, var(--border-subtle)); border-radius:16px; color:var(--text-primary); background:var(--glass-panel-bg, var(--bg-surface)); box-shadow:inset 0 1px rgba(255,255,255,.035); text-align:left; cursor:pointer; font:inherit; touch-action:manipulation; }
.settings-category-card:active { transform:scale(.995); background:var(--bg-active); }
.settings-category-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:13px; color:var(--accent-color); background:color-mix(in srgb, var(--accent-color) 12%, var(--bg-elevated)); font-size:23px; }
.settings-category-copy { display:flex; flex:1; flex-direction:column; min-width:0; gap:4px; }
.settings-category-copy strong { font-size:15px; font-weight:600; letter-spacing:-.02em; }
.settings-category-copy small { font-size:12px; line-height:1.4; color:var(--text-secondary); font-weight:400; }
.settings-category-chevron { color:var(--text-tertiary); flex:0 0 auto; }
.settings-subpage { display:none; }
.settings-subpage.active { display:block; animation:settingsPageIn .18s ease-out; }
.settings-subpage-header { display:flex; align-items:center; gap:10px; margin:2px 0 22px; }
.settings-subpage-header > div { min-width:0; }
.settings-subpage-header h2 { font-size:clamp(20px,4vw,26px); font-weight:600; letter-spacing:-.035em; margin:0; }
.settings-subpage-header p { color:var(--text-secondary); font-size:12px; line-height:1.4; margin-top:4px; }
.settings-back-btn { border:1px solid var(--border-subtle); background:var(--bg-elevated); }

body.surface-graphite:not(.theme-light) { --bg-base:#0b0c0e; --bg-surface:#121417; --bg-elevated:#1b1e22; --glass-bg:rgba(18,20,23,.76); --glass-panel-bg:rgba(17,19,22,.82); --glass-panel-border:1px solid rgba(255,255,255,.085); }
body.surface-midnight:not(.theme-light) { --bg-base:#070b16; --bg-surface:#0c1324; --bg-elevated:#141e34; --glass-bg:rgba(10,16,31,.78); --glass-panel-bg:rgba(11,17,32,.82); --glass-panel-border:1px solid rgba(154,183,255,.13); }
body.surface-warm:not(.theme-light) { --bg-base:#100a09; --bg-surface:#1a100f; --bg-elevated:#251715; --glass-bg:rgba(25,15,14,.80); --glass-panel-bg:rgba(25,15,14,.82); --glass-panel-border:1px solid rgba(255,190,157,.12); }
body.surface-forest:not(.theme-light) { --bg-base:#06110d; --bg-surface:#0b1a14; --bg-elevated:#13281e; --glass-bg:rgba(8,24,17,.8); --glass-panel-bg:rgba(8,24,17,.82); --glass-panel-border:1px solid rgba(145,224,174,.12); }
@keyframes settingsPageIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:768px) {
  .settings-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .settings-overview-intro { grid-column:1/-1; }
  .settings-category-card { min-height:102px; padding:18px; }
  .settings-category-copy strong { font-size:16px; }
  .settings-category-copy small { font-size:13px; }
  .settings-subpage-header { margin-bottom:28px; }
}
@media (max-width:420px) {
  .settings-category-card { min-height:76px; padding:12px; gap:10px; border-radius:13px; }
  .settings-category-icon { width:38px; height:38px; flex-basis:38px; font-size:21px; }
  .settings-category-copy strong { font-size:14px; }
  .settings-category-copy small { font-size:11px; }
  .settings-overview { gap:8px; }
}
@media (prefers-reduced-motion:reduce) { .settings-subpage.active { animation:none; } .settings-category-card:active { transform:none; } }
#settings-overview.hidden { display:none !important; }

.scrubber-fill { box-shadow:none !important; }
.scrubber-visualizer { mix-blend-mode:normal !important; opacity:1 !important; filter:none !important; }

body.text-scale-compact .display-text { font-size:clamp(23px,2.7vw,31px); }
body.text-scale-compact .section-title { font-size:16px; }
body.text-scale-compact .item-title,body.text-scale-compact .settings-label{ font-size:14px; }
body.text-scale-compact .item-subtitle,body.text-scale-compact .settings-desc{ font-size:12px; }
body.text-scale-compact .player-title { font-size:21px; }
body.text-scale-compact .player-artist { font-size:14px; }
body.text-scale-compact .lyric-line { font-size:clamp(20px,4.4vw,32px); }
body.text-scale-large .display-text { font-size:clamp(31px,3.5vw,42px); }
body.text-scale-large .section-title { font-size:20px; }
body.text-scale-large .item-title,body.text-scale-large .settings-label{ font-size:17px; }
body.text-scale-large .item-subtitle,body.text-scale-large .settings-desc{ font-size:14px; }
body.text-scale-large .player-title { font-size:27px; }
body.text-scale-large .player-artist { font-size:18px; }
body.text-scale-large .lyric-line { font-size:clamp(26px,5.5vw,40px); }
body.layout-compact .track-row { min-height:50px; padding-top:4px; padding-bottom:4px; }
body.layout-compact .track-art-small { width:40px; height:40px; min-width:40px; margin-right:10px; }
body.layout-compact .settings-row { min-height:56px; padding-top:10px; padding-bottom:10px; }
body.layout-compact .editorial-section { margin-bottom:28px; }
body.layout-spacious .track-row { min-height:68px; padding-top:12px; padding-bottom:12px; }
body.layout-spacious .track-art-small { width:52px; height:52px; min-width:52px; margin-right:18px; }
body.layout-spacious .settings-row { min-height:76px; padding-top:18px; padding-bottom:18px; }
body.layout-spacious .editorial-section { margin-bottom:56px; }
@media(max-width:520px){ body.layout-spacious .settings-row{gap:12px;} body.text-scale-large .settings-row{align-items:center;} }

.scrubber-track { height:24px !important; min-height:24px; overflow:hidden !important; position:relative; isolation:isolate; }
.scrubber-visualizer { position:absolute !important; top:50% !important; left:0 !important; right:0 !important; bottom:auto !important; transform:translateY(-50%) !important; display:block; width:100% !important; height:18px !important; max-height:18px !important; min-height:18px !important; object-fit:fill; pointer-events:none !important; z-index:4 !important; opacity:1 !important; mix-blend-mode:normal !important; filter:none !important; }
.scrubber-bg { z-index:1 !important; }
.scrubber-fill { z-index:2 !important; box-shadow:none !important; }
.scrubber-thumb { z-index:5 !important; }
.scrubber-track.visualizer-active { background:transparent !important; }
.scrubber-track.visualizer-active .scrubber-bg { background:transparent !important; border-color:transparent !important; overflow:hidden; }
.scrubber-track.visualizer-active .scrubber-fill { background:transparent !important; box-shadow:none !important; }

.lyric-line { max-width:100%; overflow-wrap:anywhere; text-wrap:pretty; }
.lyrics-size-compact .lyric-line { font-size:clamp(17px, 3.8vw, 24px) !important; }
.lyrics-size-normal .lyric-line { font-size:clamp(20px, 4.5vw, 30px) !important; }
.lyrics-size-large .lyric-line { font-size:clamp(23px, 5vw, 34px) !important; }
.lyrics-size-extra-large .lyric-line { font-size:clamp(25px, 5.4vw, 38px) !important; }
.lyrics-spacing-compact .lyrics-style-apple .lyric-line,.lyrics-spacing-compact .lyrics-style-neon .lyric-line{ margin-bottom:10px !important; }
.lyrics-spacing-compact .lyrics-style-spotify .lyric-line { margin-bottom:8px !important; }
.lyrics-spacing-normal .lyrics-style-apple .lyric-line,.lyrics-spacing-normal .lyrics-style-neon .lyric-line{ margin-bottom:18px !important; }
.lyrics-spacing-normal .lyrics-style-spotify .lyric-line { margin-bottom:16px !important; }
.lyrics-spacing-relaxed .lyrics-style-apple .lyric-line,.lyrics-spacing-relaxed .lyrics-style-neon .lyric-line{ margin-bottom:28px !important; }
.lyrics-spacing-relaxed .lyrics-style-spotify .lyric-line { margin-bottom:24px !important; }
.lyrics-width-narrow .player-lyrics-container .lyric-line { max-width:72% !important; margin-left:auto !important; margin-right:auto !important; }
.lyrics-width-standard .player-lyrics-container .lyric-line { max-width:92% !important; margin-left:auto !important; margin-right:auto !important; }
.lyrics-width-wide .player-lyrics-container .lyric-line { max-width:100% !important; }
.lyrics-emphasis-off .lyrics-style-apple .lyric-line.active,.lyrics-emphasis-off .lyrics-style-spotify .lyric-line.active,.lyrics-emphasis-off .lyrics-style-neon .lyric-line.active{ opacity:.9 !important; filter:none !important; color:var(--text-primary) !important; background:transparent !important; border-color:transparent !important; box-shadow:none !important; transform:none !important; font-weight:600 !important; }
.lyrics-emphasis-soft .lyrics-style-neon .lyric-line.active { background:var(--accent-color) !important; color:var(--accent-ink, #000) !important; box-shadow:none !important; transform:scale(1.01) !important; border:1px solid var(--border-subtle) !important; }
.lyrics-emphasis-standard .lyrics-style-apple .lyric-line.active,.lyrics-emphasis-standard .lyrics-style-spotify .lyric-line.active{ opacity:1 !important; filter:none !important; transform:scale(1.015) !important; }
.lyrics-emphasis-strong .lyrics-style-apple .lyric-line.active,.lyrics-emphasis-strong .lyrics-style-spotify .lyric-line.active{ opacity:1 !important; filter:none !important; transform:scale(1.04) !important; font-weight:700 !important; }

.lyrics-position-upper { --lyrics-position-base:-4vh; }
.lyrics-position-center { --lyrics-position-base:0vh; }
.lyrics-position-lower { --lyrics-position-base:4vh; }
.lyrics-offset-control { display:flex; align-items:center; gap:8px; min-width:min(220px,100%); }
.lyrics-offset-range { width:clamp(110px,25vw,180px); max-width:100%; accent-color:var(--accent-color); }

@media (max-width:767px) {
  body.lyrics-mode #full-player { overflow:hidden; }
  body.lyrics-mode #full-player .player-header { flex:0 0 auto; min-height:52px; padding:6px 12px; position:relative; z-index:20; }
  body.lyrics-mode #full-player .player-body { position:relative; flex:1 1 auto; min-height:0; width:100%; max-width:none; overflow:hidden; }
  body.lyrics-mode #full-player .player-controls-section { position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; max-width:none !important; z-index:8 !important; padding:22px 22px calc(10px + var(--safe-bottom)) !important; background:#000 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  body.lyrics-mode .player-metadata-row { margin-bottom:12px !important; }
  body.lyrics-mode .player-title { font-size:clamp(17px,4.8vw,22px) !important; line-height:1.25; }
  body.lyrics-mode .player-artist { font-size:clamp(12px,3.7vw,14px) !important; }
  body.lyrics-mode .scrubber-wrap { margin-bottom:10px !important; padding:4px 0 !important; }
  body.lyrics-mode .main-playback-controls { margin-bottom:4px !important; }
  body.lyrics-mode .secondary-playback-controls { margin-top:0 !important; }
  body.lyrics-mode .player-lyrics-container { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:clamp(280px,38vh,344px) !important; width:100% !important; height:auto !important; max-width:520px !important; margin:0 auto !important; padding:12px 12px 18px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; display:flex !important; flex-direction:column; align-items:center !important; justify-content:flex-start !important; text-align:center !important; transform:translateY(calc(var(--lyrics-position-base, 0vh) + var(--lyrics-offset, 0vh))) !important; translate:none !important; mask-image:none !important; -webkit-mask-image:none !important; z-index:4 !important; scrollbar-gutter:auto !important; }
  body.lyrics-mode .player-lyrics-container.un-synced { justify-content:center !important; padding:16px 16px 24px !important; white-space:pre-wrap; overflow-wrap:anywhere; }
  body.lyrics-mode .player-lyrics-container .lyric-line { width:100% !important; max-width:var(--lyrics-line-width, 92%) !important; margin-left:auto !important; margin-right:auto !important; line-height:1.28 !important; }
  body.lyrics-mode .lyrics-style-neon .lyric-line.active { display:block !important; width:fit-content !important; max-width:var(--lyrics-line-width, 92%) !important; margin:0 auto 14px !important; padding:5px 10px !important; transform:none !important; white-space:normal; overflow-wrap:anywhere; }
  .lyrics-offset-range { width:clamp(100px,35vw,160px); }
}
@media (min-width:768px) {
  body.lyrics-mode #full-player .player-body { min-height:0; overflow:hidden; }
  body.lyrics-mode .player-lyrics-container { height:min(74vh,calc(100dvh - 132px)) !important; max-height:calc(100dvh - 132px); min-height:0; overflow-x:hidden; overflow-y:auto; padding:10px 16px 20px !important; justify-content:flex-start; transform:translateY(calc(var(--lyrics-position-base, 0vh) + var(--lyrics-offset, 0vh))) !important; translate:none !important; }
  body.lyrics-mode .player-controls-section { max-height:calc(100dvh - 112px); overflow-y:auto; }
}
@media (max-height:620px) and (max-width:767px) {
  body.lyrics-mode #full-player .player-controls-section { padding-top:12px !important; padding-bottom:6px !important; }
  body.lyrics-mode .player-metadata-row { margin-bottom:6px !important; }
  body.lyrics-mode .player-title { font-size:17px !important; }
  body.lyrics-mode .player-lyrics-container { bottom:clamp(245px,42vh,280px) !important; }
}
@media (prefers-reduced-motion:reduce) { .scrubber-visualizer { transition:none !important; } }

@media (max-width:767px) {
  body.lyrics-mode.immersive-lyrics .player-lyrics-container { position:absolute !important; inset:0 !important; top:0 !important; bottom:0 !important; width:100% !important; height:100% !important; max-width:520px !important; max-height:none !important; padding:clamp(28px,8vh,72px) 14px calc(24px + var(--safe-bottom)) !important; transform:translateY(calc(var(--lyrics-position-base, 0vh) + var(--lyrics-offset, 0vh))) !important; translate:none !important; }
}
@media (min-width:768px) {
  body.lyrics-mode.immersive-lyrics .player-lyrics-container { position:absolute !important; inset:0 !important; top:0 !important; bottom:0 !important; width:min(920px,100%) !important; height:100dvh !important; max-height:none !important; margin:0 auto !important; padding:12vh 30px !important; transform:translateY(calc(var(--lyrics-position-base, 0vh) + var(--lyrics-offset, 0vh))) !important; translate:none !important; }
}

body.low-end-mode *,body.low-end-mode *::before,body.low-end-mode *::after{
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
body.low-end-mode .glass-surface,body.low-end-mode .settings-section,body.low-end-mode .search-container,body.low-end-mode .bottom-sheet,body.low-end-mode .dialog-box,body.low-end-mode .eq-layout{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.low-end-mode .player-bg { filter: none !important; transform: none !important; opacity: .08 !important; }
body.low-end-mode .art-wrapper img { transition: none !important; }
body.low-end-mode .track-row,body.low-end-mode .art-card,body.low-end-mode .btn{ transition: none !important; }

.home-collection-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; min-width:0; }
.home-collection-section { min-width:0; }
.home-collection-section .horizontal-rail { min-width:0; }
.favorite-artist-card .art-wrapper { position:relative; }
.favorite-artist-card .favorite-artist-mark { position:absolute; right:7px; bottom:7px; width:25px; height:25px; display:flex; align-items:center; justify-content:center; font-size:15px; border-radius:50%; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-subtle); }
@media (min-width:1024px) {
  .home-collection-grid.has-favorite-artists { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .home-collection-grid.has-favorite-artists .horizontal-rail { gap:12px; }
  .home-collection-grid.has-favorite-artists .art-card { min-width:clamp(110px,10vw,150px); max-width:clamp(110px,10vw,150px); }
}
#main-content { touch-action:pan-y; overscroll-behavior-x:contain; }
.app-footer { padding:18px 20px calc(28px + var(--safe-bottom)); text-align:center; color:var(--text-secondary); font-size:12px; letter-spacing:.01em; }
.app-footer span { color:var(--accent-color); padding:0 2px; }
.scrubber-track:not(.visualizer-active) .scrubber-visualizer { display:none !important; }
.scrubber-track:not(.visualizer-active) { box-shadow:none !important; filter:none !important; }
.scrubber-track:not(.visualizer-active) .scrubber-bg { background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.04) !important; box-shadow:none !important; }
.scrubber-track:not(.visualizer-active) .scrubber-fill { background:var(--text-secondary) !important; opacity:.48; box-shadow:none !important; filter:none !important; }
@media (max-width:520px) {
  .home-collection-grid { gap:0; }
}

.bottom-sheet,.bottom-sheet.glass-surface{
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.5) !important;
}
.bottom-sheet-overlay { background: rgba(0,0,0,.66) !important; }
#mini-player .mini-progress-bar { height: 2px; transition: height .14s ease; }
#mini-player.waveform-active .mini-progress-bar { height: 9px; background: transparent; }
#mini-player.waveform-active .mini-progress-fill { opacity: 0; }
.mini-visualizer { position:absolute; left:0; bottom:0; width:100%; height:9px; display:none; pointer-events:none; z-index:2; opacity:1; }
#mini-player.waveform-active .mini-visualizer { display:block !important; }
.waveform-style-option.active-state { background: var(--bg-active) !important; border-color: var(--accent-color) !important; }

#main-content { touch-action: auto !important; }
.horizontal-rail {
  display:flex; flex-direction:row; flex-wrap:nowrap;
  overflow-x:auto !important; overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  touch-action:pan-x !important; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.horizontal-rail > .art-card { flex:0 0 140px; min-width:140px; max-width:140px; }
.horizontal-rail > .top-pick-card { flex:0 0 156px; }
.home-collection-section,.home-collection-section .horizontal-rail{ width:100%; max-width:100%; min-width:0; }
@media (max-width:767px) {
  .horizontal-rail { gap:10px; }
  .horizontal-rail > .art-card { flex:0 0 108px; min-width:108px; max-width:108px; }
  .horizontal-rail > .top-pick-card { flex:0 0 108px; min-width:108px; max-width:108px; }
}
@media (max-width:380px) {
  .horizontal-rail > .art-card,.horizontal-rail > .top-pick-card{ flex-basis:102px; min-width:102px; max-width:102px; }
}
@media (min-width:768px) {
  .horizontal-rail > .art-card { flex-basis:140px; min-width:140px; max-width:140px; }
}

.settings-row .setting-inline-value {
  display:inline-flex; align-items:center; justify-content:center; min-height:32px; max-width:132px;
  padding:5px 10px; border:1px solid var(--border-subtle); border-radius:999px;
  background:var(--bg-hover); color:var(--text-primary); font-size:12px; font-weight:600;
  line-height:1.2; text-align:center; white-space:nowrap;
}
.waveform-style-option { transition:background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.waveform-style-option.active-state { background:color-mix(in srgb,var(--accent-color) 13%,var(--bg-elevated)) !important; border-color:var(--accent-color) !important; box-shadow:inset 3px 0 0 var(--accent-color),0 0 0 1px color-mix(in srgb,var(--accent-color) 14%,transparent); }
.waveform-style-option.active-state > span:nth-child(2) { color:var(--text-primary); font-weight:700; }
.waveform-style-option.active-state .style-check { opacity:1; color:var(--accent-color); font-variation-settings:'FILL' 1; }
.about-mujic-copy { padding:0 20px 18px; color:var(--text-secondary); font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.about-project-links { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:0 20px 20px; }
.about-project-links .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; flex:0 1 auto; white-space:nowrap; }
.github-brand-icon { width:19px; height:19px; display:block; flex:0 0 19px; }
.search-no-results { padding:20px 4px 28px; }
.search-download-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; text-decoration:none !important; -webkit-appearance:none; appearance:none; }
.search-download-cta .material-symbols-rounded { pointer-events:none; }
.playlist-track-picker-sheet { gap:8px; }
.playlist-track-picker-header { margin-bottom:4px; }
.playlist-track-picker-search-wrap { margin:0 0 4px; flex:0 0 auto; }
.playlist-track-picker-list { display:flex; flex-direction:column; gap:3px; min-height:80px; max-height:min(48dvh,480px); overflow:auto; overscroll-behavior:contain; }
.playlist-select-row { display:flex; align-items:center; gap:12px; min-height:58px; padding:7px 9px; border:1px solid transparent; border-radius:10px; cursor:pointer; }
.playlist-select-row:has(input:checked) { background:color-mix(in srgb,var(--accent-color) 10%,var(--bg-elevated)); border-color:color-mix(in srgb,var(--accent-color) 35%,var(--border-subtle)); }
.playlist-track-checkbox { flex:0 0 auto; width:20px; height:20px; accent-color:var(--accent-color); }
.playlist-picker-note { display:flex; flex:0 0 38px; width:38px; height:38px; align-items:center; justify-content:center; background:var(--bg-hover); border-radius:9px; color:var(--text-secondary); }
.playlist-select-row .track-meta { min-width:0; }
.playlist-track-picker-actions { display:flex; justify-content:flex-end; gap:10px; flex:0 0 auto; padding-top:8px; border-top:1px solid var(--border-subtle); }
.playlist-picker-empty { padding:22px 10px; }
@media (max-width:520px) {
  .about-mujic-copy { padding:0 14px 14px; font-size:13px; }
  .about-project-links { padding:0 14px 16px; gap:8px; }
  .about-project-links .btn { flex:1 1 auto; min-width:0; padding:10px 12px; font-size:13px; }
  .settings-row .setting-inline-value { max-width:108px; padding:5px 8px; }
  .playlist-track-picker-list { max-height:45dvh; }
}

:root { --accent-ink: #000; }
body.theme-light { --accent-ink: #fff; }
.scrubber-track.wave-live .scrubber-thumb { opacity: 0; }
body.theme-light .lyrics-style-neon .lyric-line.active { border-color: #000; box-shadow: 4px 4px 0 rgba(0,0,0,.85); }

@media (hover: hover) and (min-width: 768px) {
  .horizontal-rail { cursor: grab; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .horizontal-rail:hover { scrollbar-color: rgba(255,255,255,.24) transparent; }
  .horizontal-rail:active { cursor: grabbing; }
  .horizontal-rail::-webkit-scrollbar { height: 6px; }
  .horizontal-rail::-webkit-scrollbar-track { background: transparent; }
  .horizontal-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
  .horizontal-rail:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); }
}
body.lyrics-mode .lyrics-style-neon .lyric-line.active,body.lyrics-mode.immersive-lyrics .lyrics-style-neon .lyric-line.active{
  border: 2px solid #080808 !important;
  box-shadow: 6px 6px 0 rgba(78,78,78,.96), 0 12px 24px rgba(0,0,0,.26) !important;
}
.scrubber-track { height: 30px; }
.scrubber-visualizer { border-radius: inherit; }
.scrubber-track.visualizer-active .scrubber-fill { opacity: 0 !important; }

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", 'Inter', system-ui, sans-serif;
  --sep: rgba(255,255,255,.08);
  --fill: rgba(255,255,255,.09);
}
body.theme-light { --sep: rgba(0,0,0,.09); --fill: rgba(0,0,0,.06); }

h1 { font-weight: 700; }
.display-text { font-size: clamp(30px, 4vw, 36px); font-weight: 700; letter-spacing: -0.035em; margin-bottom: var(--space-24); }
.section-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-12); }
.item-title { font-size: 16px; font-weight: 500; }
.item-subtitle { font-size: 14px; }

.editorial-divider { display: none; }
.editorial-section { margin-bottom: 36px; }

.track-list { gap: 0; }
.track-row { position: relative; background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 10px; padding: 6px 8px; }
body.theme-light .track-row { background: transparent; border-color: transparent; }
.track-row:hover { border-color: transparent; }
.track-row::after { content: ''; position: absolute; left: calc(clamp(44px, 4vw, 52px) + 24px); right: 8px; bottom: 0; height: 1px; background: var(--sep); pointer-events: none; }
.track-row:last-child::after,.track-row.dragging::after{ display: none; }
.track-art-small { border-radius: 6px; }
.art-wrapper { border-radius: 10px; }
.art-wrapper::after { border-color: rgba(255,255,255,.04); }

.settings-section,.search-container{
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  background: var(--bg-elevated); border-color: transparent;
}
.settings-section { border-radius: 14px; }
.settings-category-card { box-shadow: none; background: var(--bg-elevated); border-color: transparent; border-radius: 14px; min-height: 72px; }
.settings-category-icon { border-radius: 10px; }
.settings-back-btn { border-color: transparent; }

.settings-section .section-title { border-bottom: 0; padding: 18px 16px 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.settings-row { min-height: 52px; padding: 10px 16px; border-bottom-color: var(--sep); }
.settings-desc { font-size: 12.5px; margin-top: 2px; }
.settings-stat-card{ border-color: transparent; background: var(--fill); }

.search-container { border: 0; border-radius: 12px; padding: 9px 14px; background: var(--fill); }
.search-container:focus-within { border: 0; }

.tab-bar { border-bottom: 0; gap: 8px; padding-bottom: 0; }
.tab-item { min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 600; }
.tab-item.active { background: var(--text-primary); color: var(--bg-base); }
.tab-item.active::after { display: none; }

.nav-item.active { transform: none; }
.nav-item span:last-child { font-size: 10px; font-weight: 500; }
@media (max-width: 767px) {
  .nav-item span:last-child { display: block; }
  #bottom-nav { background: color-mix(in srgb, var(--bg-base) 80%, transparent); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-top: 1px solid var(--sep); }
}

#mini-player { background: color-mix(in srgb, var(--bg-elevated) 84%, transparent); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border-color: transparent; box-shadow: 0 8px 28px rgba(0,0,0,.3); }
body.low-end-mode #mini-player,body.low-end-mode #bottom-nav{ -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-elevated); }

#view-context-detail > div[style*="flex-direction: column"] { align-items: center !important; text-align: center; }
#detail-art { width: min(62vw, 240px) !important; height: min(62vw, 240px) !important; min-height: 0 !important; border-radius: 10px !important; box-shadow: 0 16px 40px rgba(0,0,0,.35) !important; }
#view-context-detail .display-text { justify-content: center; }
.playlist-header-actions { display: flex; gap: 12px; width: 100%; max-width: 420px; justify-content: center; }
.playlist-header-actions .btn,.playlist-header-actions .btn.btn-primary{ flex: 1; min-height: 46px; border: 0; border-radius: 10px; background: var(--fill); color: var(--accent-color); font-size: 16px; font-weight: 600; box-shadow: none; transform: none; }

.player-bg { opacity: .85; filter: blur(64px) saturate(1.6); transform: scale(1.25); }
.player-bg::after { background: rgba(0,0,0,.34); }
.player-header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(255,255,255,.3); pointer-events: none; }
.player-header span[style*="uppercase"] { display: none !important; }
.player-art-container img { border-radius: 10px; box-shadow: 0 26px 52px rgba(0,0,0,.45); }
.player-title { font-weight: 700; }
.main-playback-controls .icon-btn:not(.active-state) { color: var(--text-primary); }
.btn-play-pause { width: 72px; height: 72px; background: transparent; color: var(--text-primary); }
.btn-play-pause .material-symbols-rounded { font-size: 56px; }
.btn-play-pause:active { transform: scale(.9); }
.scrubber-bg { border: 0; background: rgba(255,255,255,.16); transition: height .15s ease; }
.scrubber-thumb { width: 12px; height: 12px; opacity: 0; transform: translate(-50%, -50%) scale(.4); transition: opacity .15s ease, transform .15s ease; box-shadow: none; }
.scrubber-wrap:active .scrubber-thumb,.scrubber-wrap:hover .scrubber-thumb{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.scrubber-wrap:active .scrubber-bg { height: 8px; }
.scrubber-wrap .scrubber-track.wave-live .scrubber-thumb { opacity: 0 !important; }
.scrubber-track:not(.visualizer-active) .scrubber-fill { background: var(--text-primary) !important; opacity: .9; }
.scrubber-track:not(.visualizer-active) .scrubber-bg { background: rgba(255,255,255,.16) !important; }

.lyrics-style-apple .lyric-line { text-align: left; transform-origin: left center; }
.player-lyrics-container { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 100%); }
body.lyrics-mode.immersive-lyrics .player-lyrics-container { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
body.lyrics-mode #full-player .player-controls-section { background: linear-gradient(to top, rgba(0,0,0,.62) 58%, transparent); }

:root {
  --spring: cubic-bezier(.32, .72, 0, 1);
  --radius-md: 10px; --radius-lg: 14px; --radius-hero: 18px;
  --text-tertiary: #8a8a8f;
}
body.theme-light { --text-secondary: #5f5f66; --text-tertiary: #77777d; }
[hidden] { display: none !important; }

.material-symbols-rounded { display: inline-block; width: 1em; height: 1em; line-height: 1; font-size: 24px; overflow: hidden; white-space: nowrap; vertical-align: middle; flex-shrink: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 8px; }
.track-row:focus-visible,.art-card:focus-visible,.nav-item:focus-visible,.tab-item:focus-visible{ outline-offset: -2px; }
.track-art-small,.art-wrapper{ background-color: var(--fill); }
.toast { border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 28px rgba(0,0,0,.35); }

.settings-label { font-size: 16px; font-weight: 500; }
.settings-row:not(.keep-desc) .settings-desc { display: none; }
.settings-advanced .settings-row .settings-desc { display: block; }
.settings-advanced { border-top: 1px solid var(--sep); }
.settings-advanced-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 10px 16px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text-primary); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.settings-advanced-summary::-webkit-details-marker { display: none; }
.settings-advanced-summary:active { background: var(--bg-active); }
.adv-chevron { width: 8px; height: 8px; border-right: 2px solid var(--text-tertiary); border-bottom: 2px solid var(--text-tertiary); transform: rotate(-45deg); transition: transform .25s var(--spring); margin-right: 4px; }
.settings-advanced[open] .adv-chevron { transform: rotate(45deg); }
.settings-advanced[open] > .settings-advanced-summary { border-bottom: 1px solid var(--sep); }
.settings-advanced > .settings-row:last-child { border-bottom: none; }
.danger-row .settings-label { color: #ff453a; }
.btn.btn-danger { color: #ff453a; background: rgba(255,69,58,.12); border: 0; font-weight: 600; }
.btn.btn-danger:active { background: rgba(255,69,58,.22); }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 24px 48px; }
.empty-state .empty-icon { color: var(--text-tertiary); margin-bottom: 20px; opacity: .8; }
.empty-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.empty-desc { max-width: 320px; margin-left: auto; margin-right: auto; }
.empty-note { margin-top: 18px; font-size: 12.5px; color: var(--text-tertiary); }
.search-no-results { text-align: center; }

#full-player { transition: opacity .35s ease, transform .5s var(--spring), visibility 0s linear .5s; }
#full-player.active { transition: opacity .35s ease, transform .5s var(--spring); }
#mini-player { transition: transform .45s var(--spring); }
.player-art-container img { transition: transform .5s var(--spring), border-radius .4s ease, box-shadow .4s ease; }
.player-title,.player-artist{ text-shadow: 0 1px 14px rgba(0,0,0,.25); }

.track-row { content-visibility: auto; contain-intrinsic-size: auto 60px; }

#library-stats { font-size: 13px; }
#lib-songs .btn[data-action="shuffle-all"] { background: var(--fill); border: 0; color: var(--accent-color); font-weight: 600; border-radius: 999px; }

@media (min-width: 768px) {
  .nav-item { transition: background .2s ease, color .2s ease; }
  .nav-item:hover { background: var(--bg-hover); }
  .nav-item.active { background: var(--fill); color: var(--text-primary); }
  #mini-player { left: var(--sidebar-width); right: 0; bottom: 0; width: auto; max-width: none; height: 76px; margin: 0; border-radius: 0; padding: 0 28px; border: 0; border-top: 1px solid var(--sep); box-shadow: none; background: color-mix(in srgb, var(--bg-surface) 90%, transparent); }
  #mini-player .mini-meta { max-width: 560px; }
  #main-content { padding-bottom: calc(76px + 40px); }
}
@media (hover: hover) and (min-width: 768px) {
  #main-content { scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.22) transparent !important; }
  #main-content::-webkit-scrollbar { display: block !important; width: 8px; }
  #main-content::-webkit-scrollbar-track { background: transparent; }
  #main-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 8px; }
  body.theme-light #main-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
}
body.low-end-mode .track-row { content-visibility: auto; }

#mini-player:not(.visible) { visibility: hidden; opacity: 0; pointer-events: none; transition: transform .45s var(--spring), opacity .2s ease, visibility 0s linear .45s; }
#mini-player.visible { visibility: visible; opacity: 1; }
@media (min-width: 768px) { .nav-item span:last-child { font-size: 15px; font-weight: 500; } }

#keyboard-shortcuts-list { display:contents; }
.kb-key { min-width:84px; padding:8px 14px; border-radius:9px; border:1px solid var(--border-subtle); border-bottom-width:2px; background:var(--bg-hover); color:var(--text-primary); font-weight:600; font-size:13px; line-height:1; font-family:inherit; text-align:center; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.kb-key.empty { color:var(--text-secondary); font-weight:500; }
@media (hover:hover) { .kb-key:hover { border-color:var(--accent-color); } }
.kb-key.capturing { border-color:var(--accent-color); color:var(--accent-color); }
.kb-key.conflict { border-color:#ff453a; }
body.mujic-drop-active::after { content:'Drop audio files to add them'; position:fixed; inset:12px; z-index:9999; display:flex; align-items:center; justify-content:center; border:2px dashed var(--accent-color); border-radius:18px; background:rgba(0,0,0,.55); color:#fff; font-size:20px; font-weight:600; pointer-events:none; }

.playback-mode-hint { margin-top: 9px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.online-beta-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid rgba(240,173,78,.25); background: rgba(240,173,78,.08); color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.online-beta-note[hidden] { display: none !important; }
.online-beta-note .material-symbols-rounded { color: #f0ad4e; font-size: 19px; flex: 0 0 auto; }
.online-beta-note strong { color: var(--text-primary); }

.online-network-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; min-height: 260px; padding: 32px 22px; margin: 16px;
    text-align: center; border: 1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: 22px; background: var(--surface-1, rgba(255,255,255,.035));
}
.online-network-state > .material-symbols-rounded { font-size: 34px; color: var(--text-secondary); margin-bottom: 3px; }
.online-network-state .empty-title { font-size: 17px; font-weight: 650; }
.online-network-state .empty-desc { max-width: 340px; line-height: 1.55; color: var(--text-secondary); }
.online-network-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#ctx-download[hidden],.sheet-option[hidden],[hidden]{ display: none !important; }

[hidden] { display: none !important; }

.workspace-online-pill { vertical-align: middle; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #ff453a; background: rgba(255,69,58,.1); border: 1px solid rgba(255,69,58,.35); border-radius: 7px; padding: 4px 6px; margin-left: 5px; white-space: nowrap; }
.workspace-online-pill.disconnected { color: #f0ad4e; border-color: rgba(240,173,78,.45); background: rgba(240,173,78,.1); }

body.online-mode { --online-accent: #ff453a; }
body.online-mode #bottom-nav .brand-header { color: #ff453a; }
body.online-mode .nav-item.active { color: #ff453a; }
body.online-mode .nav-item.active { background: rgba(255,69,58,.09); }
body.online-mode .nav-item.active::before { background: #ff453a; }

.online-workspace-view { max-width: 1050px; margin: 0 auto; }
.online-workspace-view h1,.online-workspace-view h2{ letter-spacing: -.035em; }

.online-action-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; }

.online-panel { min-width:0; margin:0 0 18px; padding:clamp(14px,2vw,22px); border:1px solid var(--border-subtle); background:var(--glass-panel-bg); border-radius:22px; box-shadow:inset 0 1px rgba(255,255,255,.035); }

.online-search-box { display:flex; align-items:center; gap:10px; padding:7px 8px 7px 17px; border-radius:18px; background:var(--bg-surface); border:1px solid var(--border-subtle); box-shadow:0 6px 22px rgba(0,0,0,.08); }
.online-search-box:focus-within { border-color:rgba(255,69,58,.65); box-shadow:0 0 0 3px rgba(255,69,58,.08); }
.online-search-box > .material-symbols-rounded { color:#ff6258; }
.online-search-box input { min-width:0; flex:1; height:43px; color:var(--text-primary); background:transparent; border:0; outline:0; font:inherit; }
.online-search-box .btn { min-height:42px; padding:9px 20px; }
body.online-mode .online-search-box .btn-primary { background:#ff453a; color:#fff; }

.online-results-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px; padding:0 4px; color:var(--text-secondary); font-size:12px; }
.online-results-toolbar strong { display:block; color:var(--text-primary); margin-top:4px; }
 .online-empty-inline { display:flex; align-items:center; justify-content:center; gap:10px; min-height:105px; padding:26px; text-align:center; color:var(--text-secondary); font-size:13px; }

@keyframes online-spin { to { transform:rotate(360deg); } }
.online-load-more-wrap { display:flex; justify-content:center; padding:20px 0 26px; }
.online-load-more-wrap .btn { min-width:200px; }

.online-search-start { padding:26px 22px; margin-top:14px; border:1px solid var(--border-subtle); border-radius:24px; background:var(--glass-panel-bg); }
.online-search-start h2 { font-size:28px; margin:12px 0 8px; }
.online-search-start p { color:var(--text-secondary); max-width:540px; line-height:1.6; }
.online-chip-list { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.online-chip{ border:1px solid var(--border-subtle); border-radius:999px; padding:8px 12px; color:var(--text-secondary); background:var(--bg-surface); font-size:12px; cursor:pointer; }
.online-chip:hover { border-color:rgba(255,69,58,.4); color:var(--text-primary); }

.online-current-track { display:flex; gap:12px; align-items:center; padding:13px 15px; margin:8px 0 14px; border-radius:14px; background:rgba(255,69,58,.07); border:1px solid rgba(255,69,58,.16); }
.online-current-track > .material-symbols-rounded { color:#ff6258; }
.online-current-track div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.online-current-track small { font-size:9px; font-weight:800; letter-spacing:.12em; color:#ff6258; }
.online-current-track strong,.online-current-track span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-current-track span { color:var(--text-secondary); font-size:12px; }
.online-linked-panel { border-color:rgba(255,69,58,.2); }

.settings-switch { display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.settings-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.settings-switch span { width:48px; height:28px; border-radius:999px; display:block; position:relative; background:var(--bg-hover); border:1px solid var(--border-subtle); transition:background .2s ease; }
.settings-switch span::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--text-secondary); transition:transform .2s ease,background .2s ease; }
.settings-switch input:checked + span { background:#ff453a; border-color:#ff453a; }
.settings-switch input:checked + span::after { transform:translateX(20px); background:#fff; }
.settings-switch input:focus-visible + span { outline:2px solid var(--accent-color); outline-offset:3px; }
@media (max-width:767px) {

  #bottom-nav .nav-item[data-workspace="online"] { min-width:52px; }

  #main-content { padding-top:calc(var(--safe-top) + 66px); }

  .online-panel { border-radius:18px; }

  .online-search-box { gap:6px; padding-left:12px; }
  .online-search-box .btn { padding:8px 12px; }

}

.home-title-row{display:flex;align-items:center;gap:7px;min-width:0}
.home-title-row .home-title{margin:0}
.home-title-row .workspace-toggle-mini{margin:0;transform:translateY(1px)}
.home-header-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
@media(max-width:767px){
  #main-content{padding-top:calc(var(--safe-top) + 6px)!important}
  .home-header{margin-top:3px!important}
  .home-title-row{gap:6px}
  .home-title-row .workspace-toggle-mini{width:36px;min-width:36px;height:31px}
}

#mini-player {
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
  backdrop-filter: blur(15px) saturate(125%);
  border-color: color-mix(in srgb, var(--border-subtle) 75%, transparent);
  box-shadow: 0 5px 20px rgba(0,0,0,.22);
  transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .16s ease;
}
#mini-art { width:42px; height:42px; min-width:42px; max-width:42px; border-radius:8px; margin-right:10px; }
#mini-player .mini-meta { padding:1px 5px 1px 0; }
#mini-title { font-size:13.5px; line-height:1.25; font-weight:650; letter-spacing:-.015em; }
#mini-artist { font-size:11.5px; line-height:1.25; opacity:.78; }
#mini-player .mini-controls { gap:1px; }
#mini-player .mini-action { width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:transparent; border-color:transparent; color:var(--text-secondary); transition:color .12s ease, background-color .12s ease; }
#mini-player .mini-action:hover,#mini-player .mini-action:focus-visible{ color:var(--text-primary); background:var(--bg-hover); }
#mini-player .mini-action .material-symbols-rounded { font-size:21px; }

#mini-player .mini-progress-bar { height:2px; background:rgba(128,128,128,.13); }
#mini-player .mini-progress-fill { transition:width .08s linear; }
#main-content { scroll-behavior:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:560px) {
  #mini-player { height:64px; padding-left:8px; padding-right:5px; border-radius:13px; }
  #mini-art { width:38px; height:38px; min-width:38px; max-width:38px; margin-right:8px; }
  #mini-player .mini-action { width:33px; height:33px; flex-basis:33px; }
  #mini-title { font-size:12.5px; }
  #mini-artist { font-size:10.8px; }
}
@media (prefers-reduced-motion:reduce) {
  #mini-player,#mini-player .mini-action,#mini-player .mini-progress-fill{ transition:none!important; }
}

/* Machhar Beta v1: keep horizontal artwork gestures responsive without blocking vertical scroll. */
#player-art-container{touch-action:pan-y;user-select:none;-webkit-user-select:none}
#player-art-container img{user-select:none;-webkit-user-drag:none;will-change:transform}
@media(prefers-reduced-motion:reduce){#player-art-container img,#full-player,.online-artist-directory-card{transition:none!important;animation:none!important}}

/* Motion and paint containment tuned for high-refresh displays without forcing GPU layers everywhere. */
.track-row,.online-card,.online-compact-row{contain:layout style}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){.online-artist-directory-card,.online-artist-directory-orb,.player-art-container img{transition-duration:.16s}}

/* Machhar Beta v1.2: appearance controls must win over legacy surface overrides. */
.settings-section,
.search-container {
  background: var(--glass-panel-bg) !important;
  border: var(--glass-panel-border) !important;
  box-shadow: var(--glass-panel-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-radius: var(--panel-radius) !important;
}
body[data-interface-style="off"] :is(.glass-surface,.settings-section,.search-container,.bottom-sheet,.dialog-box,.eq-layout,#bottom-nav) {
  background: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-interface-style="strong"]:not(.low-end-mode) :is(.glass-surface,.settings-section,.search-container,.bottom-sheet,.dialog-box,.eq-layout,#bottom-nav) {
  background: var(--glass-panel-bg) !important;
  border-color: var(--glass-panel-border-color, rgba(255,255,255,.14)) !important;
  box-shadow: var(--glass-panel-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}
body[data-interface-style="subtle"]:not(.low-end-mode) :is(.glass-surface,.settings-section,.search-container,.bottom-sheet,.dialog-box,.eq-layout,#bottom-nav) {
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}
body[data-corner-radius="sharp"] :is(.settings-section,.settings-category-card,.search-container,.track-row,.art-wrapper,.track-art-small,.online-search-box,.online-search-tab,.online-media-art,.online-entity-art,.online-category-card,.online-reference-heading,.bottom-sheet,.dialog-box,.eq-layout,#mini-player,.btn,.icon-btn,.settings-control,.apple-select-wrapper,.online-back-top) { border-radius: 0 !important; }
body[data-corner-radius="medium"] :is(.settings-section,.settings-category-card,.bottom-sheet,.dialog-box,.eq-layout,.online-reference-heading) { border-radius: var(--panel-radius) !important; }
body[data-corner-radius="medium"] :is(.search-container,.track-row,.art-wrapper,.track-art-small,.online-search-box,.online-search-tab,.online-media-art,.online-entity-art,.online-category-card,#mini-player) { border-radius: var(--radius-md) !important; }
body[data-corner-radius="medium"] :is(.btn,.icon-btn,.settings-control,.apple-select-wrapper,.online-back-top) { border-radius: var(--radius-action) !important; }
body[data-corner-radius="rounded"] :is(.settings-section,.settings-category-card,.bottom-sheet,.dialog-box,.eq-layout,.online-reference-heading) { border-radius: var(--panel-radius) !important; }
body[data-corner-radius="rounded"] :is(.search-container,.track-row,.art-wrapper,.track-art-small,.online-search-box,.online-search-tab,.online-media-art,.online-entity-art,.online-category-card,#mini-player) { border-radius: var(--radius-md) !important; }
body[data-corner-radius="rounded"] :is(.btn,.icon-btn,.settings-control,.apple-select-wrapper,.online-back-top) { border-radius: var(--radius-action) !important; }
body[data-corner-radius="extra"] :is(.settings-section,.settings-category-card,.bottom-sheet,.dialog-box,.eq-layout,.online-reference-heading) { border-radius: var(--panel-radius) !important; }
body[data-corner-radius="extra"] :is(.search-container,.track-row,.art-wrapper,.track-art-small,.online-search-box,.online-search-tab,.online-media-art,.online-entity-art,.online-category-card,#mini-player) { border-radius: var(--radius-lg) !important; }
body[data-corner-radius="extra"] :is(.btn,.icon-btn,.settings-control,.apple-select-wrapper,.online-back-top) { border-radius: var(--radius-action) !important; }


/* Machhar Beta v1.3: cleaner glass, balanced player geometry, restrained native-like motion. */
body[data-interface-style="subtle"] .glass-surface,
body[data-interface-style="strong"] .glass-surface { border:1px solid transparent !important; }
#mini-player { border-color:transparent !important; }
#full-player .player-header { display:grid !important; grid-template-columns:44px minmax(0,1fr) 88px; align-items:center; gap:8px; padding-inline:clamp(16px,4vw,28px); }
#full-player .player-header > button:first-child { justify-self:start; }
#full-player .player-header > div:nth-child(2) { justify-self:center; width:100%; min-width:0; text-align:center; }
#full-player .player-header > div:last-child { justify-self:end; display:flex; align-items:center; justify-content:flex-end; gap:2px; min-width:0; }
#player-context-label { display:block; max-width:min(58vw,420px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:13px !important; font-weight:600 !important; letter-spacing:-.015em; }
.player-artist-link { display:inline-block; padding:0; margin:4px 0 0; max-width:100%; border:0; border-radius:5px; background:transparent; color:var(--text-secondary); font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.player-artist-link:focus-visible { outline:2px solid var(--accent-color); outline-offset:3px; }
.player-artist-link:active { opacity:.72; }
#full-player .player-metadata-row { align-items:center; gap:16px; }
#full-player .player-metadata-row > div:first-child { min-width:0; }
#full-player .player-title { overflow-wrap:anywhere; line-height:1.16; }
#full-player .player-art-container { flex-shrink:1; }
#full-player .player-art-container img { object-fit:cover; aspect-ratio:1; }
button,.btn,.icon-btn,.online-card,.online-artist-card,.online-entity-card,.online-media-card { -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:no-preference) {
  button,.btn,.icon-btn { transition:background-color .16s ease,color .16s ease,opacity .16s ease,transform .16s cubic-bezier(.2,.75,.25,1),border-color .16s ease; }
  button:active,.btn:active,.icon-btn:active { transform:scale(.97); }
  #full-player .player-art-container img { transition:transform .22s cubic-bezier(.2,.75,.25,1),border-radius .22s ease; }
  #mini-player { transition:opacity .18s ease,background-color .18s ease,transform .18s cubic-bezier(.2,.75,.25,1); }
}
.lyric-wordwise .lyric-word { display:inline-block; opacity:.3; transform:translateY(1px); transition:opacity .12s linear,transform .12s linear; }
.lyric-wordwise .lyric-word.is-revealed { opacity:1; transform:translateY(0); }
.player-artist-link { display:block; min-width:0; max-width:100%; overflow:hidden; white-space:nowrap; }
.player-artist-marquee { display:inline-flex; align-items:center; gap:.35em; width:max-content; max-width:100%; white-space:nowrap; }
.player-artist-marquee.is-overflowing { max-width:none; animation:artist-marquee 13s linear infinite; }
.player-artist-marquee a { color:inherit; text-decoration:none; flex:none; }
.player-artist-marquee a:hover { color:var(--text-primary); text-decoration:underline; }
.player-artist-separator { opacity:.65; }
@keyframes artist-marquee { 0%,8% { transform:translateX(0); } 92%,100% { transform:translateX(var(--marquee-distance, -20%)); } }
.online-artist-bio { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.online-artist-bio.is-expanded { display:block; overflow:visible; }
.online-bio-more { border:0; padding:2px 0; background:transparent; color:var(--text-secondary); font:inherit; font-size:12px; cursor:pointer; }
@media(max-width:767px) {
  #full-player .player-header { grid-template-columns:40px minmax(0,1fr) 80px; gap:4px; padding:12px 14px 8px; }
  #full-player .player-header > div:last-child .icon-btn { width:38px; min-width:38px; height:38px; }
  #player-context-label { max-width:52vw; font-size:12px !important; }
  #full-player .player-body { gap:0; }
  #full-player .player-art-container { width:100%; padding:clamp(16px,5vw,26px) clamp(22px,8vw,38px); }
  #full-player .player-controls-section { padding-inline:clamp(20px,6vw,30px); }
  #full-player .player-metadata-row { gap:10px; padding-bottom:4px; }
  #full-player .player-title { font-size:clamp(19px,5vw,24px); }
  #full-player .player-artist { max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
  .online-detail-hero.online-artist-detail-hero { grid-template-columns:clamp(82px,28vw,116px) minmax(0,1fr) !important; align-items:start !important; gap:14px !important; }
  .online-detail-hero.online-artist-detail-hero > img { width:100%; height:auto; }
  .online-detail-hero .online-detail-copy { min-width:0; max-width:100%; overflow:visible; }
  .online-detail-hero .online-detail-copy h2 { max-width:100%; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:normal; text-overflow:clip; line-height:1.1; }
  .online-detail-hero .online-entity-subtitle { max-width:100%; min-width:0; display:block; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:normal; text-overflow:clip; line-height:1.4; }
  .online-detail-hero .online-action-row { flex-wrap:wrap; }
}
@media(max-width:360px) {
  #full-player .player-header { grid-template-columns:36px minmax(0,1fr) 72px; padding-inline:10px; }
  #full-player .player-header > div:last-child .icon-btn { width:34px; min-width:34px; height:34px; }
  .online-detail-hero.online-artist-detail-hero { grid-template-columns:78px minmax(0,1fr) !important; gap:11px !important; }
}
@media(prefers-reduced-motion:reduce) {
  button,.btn,.icon-btn,#mini-player,#full-player .player-art-container img,.lyric-wordwise .lyric-word,.player-artist-marquee.is-overflowing { animation:none!important; transition:none!important; }
  button:active,.btn:active,.icon-btn:active { transform:none!important; }
}

.online-search-suggestions { display:flex; gap:8px; overflow-x:auto; padding:10px 0 4px; scrollbar-width:none; }
.online-search-suggestions::-webkit-scrollbar { display:none; }
.online-search-suggestions .online-chip { flex:none; white-space:nowrap; }

/* Machhar Beta v1.5 — resilient lyric wrapping and a balanced full-screen player. */
#full-player .player-header { grid-template-columns:44px minmax(0,1fr) auto !important; gap:clamp(4px,.7vw,10px) !important; }
#full-player .player-header .player-header-actions { display:flex !important; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:4px; min-width:0; }
#full-player .player-header .player-header-actions > .icon-btn { display:flex; flex:0 0 40px; width:40px; min-width:40px; height:40px; align-items:center; justify-content:center; }
#full-player .player-header .player-header-actions > .immersive-btn { position:static !important; inset:auto !important; top:auto !important; right:auto !important; z-index:auto !important; display:none !important; }
@media(min-width:768px) { body.lyrics-mode #full-player .player-header .player-header-actions > .immersive-btn { display:flex !important; } }
body.lyrics-mode.immersive-lyrics #full-player .player-header .player-header-actions > .immersive-btn { display:flex !important; }
#full-player .player-header > div:nth-child(2) { min-width:0; }
#full-player .player-header > div:nth-child(2) > span:last-child { max-width:clamp(100px,42vw,440px); min-width:0; }
.player-lyrics-container { box-sizing:border-box; min-width:0; overflow-x:hidden !important; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:30%; }
.player-lyrics-container .lyric-line { box-sizing:border-box; width:100%; min-width:0; max-width:100%; padding-inline:clamp(2px,.35em,8px); white-space:normal; word-break:normal; overflow-wrap:anywhere; text-wrap:pretty; transform:none !important; }
.player-lyrics-container .lyric-line.active { transform:none !important; filter:none; }
.lyric-wordwise .lyric-word { display:inline; position:relative; opacity:.34; transform:none; white-space:normal; overflow-wrap:anywhere; transition:opacity .14s linear,color .14s linear; }
.lyric-wordwise .lyric-word.is-revealed { opacity:1; transform:none; }
.player-lyrics-container .lyric-line:last-child { margin-bottom:clamp(44px,12vh,120px); }
body.lyrics-mode.immersive-lyrics .player-lyrics-container { padding-bottom:calc(15vh + var(--safe-bottom,0px)) !important; scroll-padding-block:24% 32%; }
@media(min-width:900px) {
  body:not(.lyrics-mode) #full-player .player-body { display:grid !important; grid-template-columns:minmax(280px,min(39vw,500px)) minmax(360px,530px); align-items:center; justify-content:center; gap:clamp(36px,6vw,92px); width:100%; max-width:min(1320px,100vw) !important; margin:0 auto; padding:clamp(24px,4vw,58px) clamp(32px,5vw,76px); box-sizing:border-box; }
  body:not(.lyrics-mode) #full-player .player-art-container { width:100%; max-width:500px; min-width:0; flex:none; padding:0; justify-self:center; }
  body:not(.lyrics-mode) #full-player #full-art { display:block; width:100%; height:auto; max-height:min(64vh,500px); aspect-ratio:1; object-fit:cover; border-radius:clamp(14px,1.7vw,24px); box-shadow:0 24px 70px rgba(0,0,0,.28); }
  body:not(.lyrics-mode) #full-player .player-controls-section { box-sizing:border-box; width:100%; min-width:0; max-width:530px; justify-self:center; padding:clamp(24px,2.4vw,34px); align-self:center; }
  body:not(.lyrics-mode) #full-player .player-metadata-row { margin-bottom:clamp(18px,3vh,34px); align-items:center; }
  body:not(.lyrics-mode) #full-player .player-title { font-size:clamp(26px,2.7vw,38px); line-height:1.12; letter-spacing:-.045em; }
  body:not(.lyrics-mode) #full-player .player-artist { font-size:16px; line-height:1.4; }
  body:not(.lyrics-mode) #full-player .btn-play-pause { width:64px; height:64px; }
}
@media(max-width:767px) {
  #full-player .player-header { grid-template-columns:38px minmax(0,1fr) auto !important; gap:2px !important; padding-inline:12px !important; }
  #full-player .player-header .player-header-actions { gap:1px; }
  #full-player .player-header .player-header-actions > .icon-btn { flex-basis:36px; width:36px; min-width:36px; height:36px; }
  #full-player .player-header > div:nth-child(2) > span:last-child { max-width:48vw; }
  .player-lyrics-container .lyric-line { line-height:1.28; }
}
@media(max-width:380px) {
  #full-player .player-header { grid-template-columns:32px minmax(0,1fr) auto !important; padding-inline:8px !important; }
  #full-player .player-header .player-header-actions > .icon-btn { flex-basis:31px; width:31px; min-width:31px; height:32px; }
  #full-player .player-header .player-header-actions > .icon-btn .material-symbols-rounded { font-size:20px; }
  #full-player .player-header > div:nth-child(2) > span:last-child { max-width:43vw; font-size:11px !important; }
}

/* PiP is intentionally a desktop-only tool in Machhar Beta. */
@media (max-width: 767px), (pointer: coarse) { #full-player [data-action="picture-in-picture"], .mini-player [data-action="picture-in-picture"] { display:none !important; } }

/* v1.8: consistent now-playing state in queue and playlist rows, independent of the full-screen player. */
.track-row.is-now-playing {
  position:relative;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent-color) 8%,transparent),transparent 78%);
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--accent-color) 82%,transparent);
  border-radius:10px;
}
.track-row.is-now-playing .item-title { color:var(--accent-color); font-weight:700; }
.track-now-playing-status {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:max-content;
  margin-inline:7px 2px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--accent-color) 24%,transparent);
  border-radius:999px;
  color:var(--accent-color);
  background:color-mix(in srgb,var(--accent-color) 9%,var(--bg-surface));
  line-height:1;
}
.track-now-playing-status .online-now-playing-bars { width:12px; height:13px; gap:2px; }
.track-now-playing-status .online-now-playing-bars i { width:2px; }
.track-now-playing-label { font-size:8px; font-weight:850; letter-spacing:.09em; white-space:nowrap; }
@media(max-width:767px) {
  .track-now-playing-status { gap:0; margin-inline:4px 1px; padding:5px; border-color:transparent; background:transparent; }
  .track-now-playing-label { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .track-now-playing-status .online-now-playing-bars i { animation:none!important; transform:none!important; }
}


/* Machhar Beta v1.9: restore high-contrast artwork ambience without changing player layout. */
#full-player {
  background: #08080a !important;
}
#full-player .player-bg {
  opacity: .58 !important;
  filter: blur(68px) saturate(1.28) brightness(.52) !important;
  transform: scale(1.2) !important;
}
#full-player .player-bg::after {
  background: linear-gradient(115deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.48) 48%, rgba(0,0,0,.66) 100%) !important;
}
@media (min-width: 900px) {
  body:not(.lyrics-mode) #full-player .player-controls-section {
    background: rgba(8,8,11,.72) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035) !important;
    -webkit-backdrop-filter: blur(28px) saturate(110%);
    backdrop-filter: blur(28px) saturate(110%);
  }
}

/* v13.0.10 — selected lyric lines and an export-ready, app-branded share card. */
.player-lyrics-container .lyric-line { position:relative; }
.player-lyrics-container.is-lyrics-selecting .lyric-line { padding-right:44px !important; cursor:pointer; }
.player-lyrics-container.is-lyrics-selecting .lyric-line.is-share-selected {
  color:#fff !important;
  background:linear-gradient(90deg,rgba(255,77,85,.17),rgba(255,77,85,.055) 74%,transparent);
  border-radius:12px;
  box-shadow:inset 3px 0 0 #ff4d55;
}
.lyric-share-check {
  position:absolute;
  top:50%;
  right:9px;
  display:inline-flex;
  width:27px;
  height:27px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#ff4d55;
  box-shadow:0 3px 14px rgba(255,77,85,.28);
  font-size:17px !important;
  line-height:1;
  transform:translateY(-50%);
  pointer-events:none;
}
.lyrics-share-selection-bar {
  position:fixed;
  z-index:3190;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  display:flex;
  width:min(520px, calc(100vw - 24px));
  min-height:60px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 10px 9px 17px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  color:#f8f8fb;
  background:rgba(19,19,23,.91);
  box-shadow:0 18px 52px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(30px) saturate(145%);
  -webkit-backdrop-filter:blur(30px) saturate(145%);
  transform:translateX(-50%);
}
.lyrics-share-selection-bar[hidden] { display:none !important; }
.lyrics-share-selection-copy { display:flex; min-width:0; align-items:center; gap:10px; font-size:13px; font-weight:650; letter-spacing:.005em; white-space:nowrap; }
.lyrics-share-selection-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#8aa9bf; box-shadow:0 0 0 4px rgba(138,169,191,.13); }
.lyrics-share-selection-actions { display:flex; align-items:center; gap:7px; }
.lyrics-share-selection-actions button,.lyrics-share-dialog-actions button {
  display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:7px;
  padding:0 14px; border:1px solid transparent; border-radius:14px; font:650 13px/1 Inter,system-ui,sans-serif;
  white-space:nowrap; cursor:pointer; transition:background .16s ease,transform .16s ease,border-color .16s ease;
}
.lyrics-share-cancel { color:#d0d0d8; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.08) !important; }
.lyrics-share-open,.lyrics-share-send { color:#fff; background:#f34b54; box-shadow:0 5px 18px rgba(243,75,84,.18); }
.lyrics-share-selection-actions button:disabled,.lyrics-share-dialog-actions button:disabled { opacity:.45; cursor:wait; }
.lyrics-share-selection-actions button:active,.lyrics-share-dialog-actions button:active { transform:scale(.98); }
.lyrics-share-selection-actions .material-symbols-rounded,.lyrics-share-dialog-actions .material-symbols-rounded { font-size:18px; }
.lyrics-share-overlay[hidden] { display:none !important; }
.lyrics-share-overlay {
  position:fixed; inset:0; z-index:3200; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; padding:clamp(10px,2.5vh,28px) 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(3,3,6,.78); backdrop-filter:blur(22px) saturate(115%); -webkit-backdrop-filter:blur(22px) saturate(115%);
}
.lyrics-share-dialog {
  position:relative; display:flex; flex-direction:column; gap:12px; width:min(448px,100%); max-height:100%; min-height:0; box-sizing:border-box;
  overflow:auto; padding:16px; border:1px solid rgba(255,255,255,.115); border-radius:28px;
  color:#f7f7fb; background:linear-gradient(150deg,rgba(32,32,38,.97),rgba(13,13,17,.98) 58%);
  box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06); overscroll-behavior:contain;
}
.lyrics-share-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.lyrics-share-dialog-heading { min-width:0; }
.lyrics-share-dialog-eyebrow { display:block; margin-bottom:5px; color:#ff757c; font-size:9px; font-weight:850; letter-spacing:.17em; }
.lyrics-share-dialog-heading h2 { margin:0; color:#fff; font-size:21px; font-weight:760; letter-spacing:-.045em; line-height:1.15; }
.lyrics-share-dialog-heading p { margin:7px 0 0; color:#a7a7b3; font-size:12px; line-height:1.45; }
.lyrics-share-close { display:inline-flex; width:36px; height:36px; flex:0 0 36px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.1); border-radius:50%; color:#d9d9e0; background:rgba(255,255,255,.055); cursor:pointer; }
.lyrics-share-close .material-symbols-rounded { font-size:20px; }
.lyrics-share-canvas-wrap { position:relative; width:min(100%,360px); align-self:center; margin:0 auto; line-height:0; flex:none; }
.lyrics-share-card-canvas { display:block; width:100%; height:auto; aspect-ratio:1/1; border-radius:15px; background:#101014; box-shadow:0 8px 22px rgba(0,0,0,.22); }
.lyrics-share-rendering { position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:11px; border-radius:15px; color:#dddde5; background:rgba(8,8,11,.72); font-size:13px; line-height:1.4; backdrop-filter:blur(10px); }
.lyrics-share-overlay.is-rendering .lyrics-share-rendering { display:flex; }
.lyrics-share-spinner { width:19px; height:19px; border:2px solid rgba(255,255,255,.22); border-top-color:#ff6068; border-radius:50%; animation:lyrics-share-spin .8s linear infinite; }
@keyframes lyrics-share-spin { to { transform:rotate(360deg); } }
.lyrics-share-caption { margin:0; color:#9999a6; font-size:11px; line-height:1.4; text-align:center; }
.lyrics-share-dialog-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:9px; }
.lyrics-share-save { color:#ececf2; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.1) !important; }
.lyrics-share-send { min-width:0; }
body.lyrics-share-open { overflow:hidden; }
@media(max-width:480px) {
  .lyrics-share-dialog { gap:12px; padding:14px; border-radius:24px; }
  .lyrics-share-dialog-heading h2 { font-size:19px; }
  .lyrics-share-dialog-heading p { font-size:11px; }
  .lyrics-share-canvas-wrap { width:min(100%, 360px, calc(100vw - 56px), calc(100dvh - 210px)); }
  .lyrics-share-selection-bar { bottom:calc(84px + env(safe-area-inset-bottom, 0px)); gap:8px; min-height:56px; padding:7px 8px 7px 13px; border-radius:18px; }
  .lyrics-share-selection-copy { gap:8px; font-size:12px; }
  .lyrics-share-selection-actions { gap:5px; }
  .lyrics-share-selection-actions button { min-height:39px; padding-inline:11px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .lyrics-share-spinner { animation:none; }
  .lyrics-share-selection-actions button,.lyrics-share-dialog-actions button { transition:none; }
}


/* v13.0.15: lyric picking is a calm editing state, independent of the user's display effects. */
.player-lyrics-container.is-lyrics-selecting,
.player-lyrics-container.is-lyrics-selecting * {
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-shadow:none !important;
  animation:none !important;
  transition:none !important;
}
.player-lyrics-container.is-lyrics-selecting .lyric-line,
.player-lyrics-container.is-lyrics-selecting .lyric-line.active,
.player-lyrics-container.is-lyrics-selecting .lyric-line.is-share-selected,
.player-lyrics-container.is-lyrics-selecting .lyric-word,
.player-lyrics-container.is-lyrics-selecting .lyric-word.is-revealed,
.player-lyrics-container.is-lyrics-selecting .lyric-line::before,
.player-lyrics-container.is-lyrics-selecting .lyric-line::after {
  filter:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}
.player-lyrics-container.is-lyrics-selecting .lyric-line.active { opacity:1 !important; color:var(--text-primary) !important; background:transparent !important; border-color:transparent !important; }
.player-lyrics-container.is-lyrics-selecting .lyric-line.is-share-selected {
  opacity:1 !important;
  color:var(--text-primary) !important;
  background:rgba(255,255,255,.075) !important;
  border-left:3px solid var(--accent-color) !important;
  border-radius:10px !important;
  outline:1px solid rgba(255,255,255,.11) !important;
}
.player-lyrics-container.is-lyrics-selecting .lyric-word,
.player-lyrics-container.is-lyrics-selecting .lyric-word.is-revealed { opacity:1 !important; color:inherit !important; }
.player-lyrics-container.is-lyrics-selecting .lyric-share-check { filter:none !important; text-shadow:none !important; box-shadow:none !important; }
.lyrics-share-selection-bar { padding:12px 16px calc(12px + var(--safe-bottom,0px)) !important; gap:14px !important; }
.lyrics-share-selection-copy { gap:10px !important; }
.lyrics-share-selection-actions { gap:10px !important; }
.lyrics-share-selection-actions button { min-height:42px; padding:10px 16px !important; }


/* v13.0.16 — low-jank surfaces on narrow and constrained devices. */
@media (max-width: 680px) {
  .glass-surface,
  .settings-section,
  .search-container,
  .bottom-sheet,
  .lyrics-share-overlay,
  .lyrics-share-dialog,
  .lyrics-share-selection-bar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .player-bg {
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    opacity: .18 !important;
    transition: none !important;
  }
  .lyrics-share-overlay { background: rgba(3,3,6,.88); }
  .lyrics-share-dialog { gap: 10px; padding: 12px; border-radius: 20px; box-shadow: 0 14px 42px rgba(0,0,0,.42); }
  .lyrics-share-canvas-wrap { width: min(100%, 360px, calc(100vw - 48px), calc(100dvh - 180px)); }
  .lyrics-share-card-canvas { box-shadow: 0 5px 14px rgba(0,0,0,.18); }
  .lyrics-share-dialog-actions { gap: 8px; }
  .lyrics-share-dialog-actions button { min-width: 0; padding-inline: 10px; min-height: 42px; }
  button, [role="button"], .icon-btn, .nav-item { touch-action: manipulation; }
}
body.low-end-mode .glass-surface,
body.low-end-mode .settings-section,
body.low-end-mode .search-container,
body.low-end-mode .bottom-sheet,
body.low-end-mode .lyrics-share-overlay,
body.low-end-mode .lyrics-share-dialog,
body.low-end-mode .lyrics-share-selection-bar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.low-end-mode .player-bg { filter:none !important; -webkit-filter:none !important; transform:none !important; }
body.low-end-mode .lyrics-share-dialog,
body.low-end-mode .lyrics-share-card-canvas { box-shadow:none !important; }
body.low-end-mode .lyrics-share-spinner { animation:none !important; }
@media (max-width: 380px) {
  .lyrics-share-dialog { padding:10px; gap:9px; border-radius:17px; }
  .lyrics-share-dialog-heading h2 { font-size:18px; }
  .lyrics-share-canvas-wrap { width:min(100%, calc(100vw - 42px), calc(100dvh - 170px)); }
  .lyrics-share-dialog-actions button { font-size:12px; gap:5px; }
}


/* ===== Onboarding: Home-only install banner + first-run guide (v13.0.20) ===== */
.install-banner { display:flex; align-items:center; gap:12px; margin:4px 0 16px; padding:10px 10px 10px 12px; border-radius:var(--radius-lg); background:var(--bg-elevated); border:1px solid var(--border-subtle); animation:ob-rise .35s cubic-bezier(.2,.8,.2,1) both; }
.install-banner[hidden] { display:none; }
.install-banner-icon { width:40px; height:40px; border-radius:10px; flex:none; object-fit:cover; }
.install-banner-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.install-banner-copy strong { font-size:14px; font-weight:700; color:var(--text-primary); }
.install-banner-copy span { font-size:12px; line-height:1.35; color:var(--text-secondary); }
.install-banner-btn { flex:none; border:0; cursor:pointer; padding:8px 16px; border-radius:var(--radius-full); background:var(--text-primary); color:var(--bg-base); font:inherit; font-size:13px; font-weight:700; }
.install-banner-btn:active { transform:scale(.96); }
.install-banner-close { flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; border-radius:50%; background:transparent; color:var(--text-secondary); }
.install-banner-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.install-banner-close .material-symbols-rounded { font-size:20px; }

.ob-overlay { position:fixed; inset:0; z-index:6500; display:flex; align-items:center; justify-content:center; padding:max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom)); background:rgba(0,0,0,.66); opacity:0; transition:opacity .25s ease; }
.ob-overlay.visible { opacity:1; }
.ob-card { width:100%; max-width:420px; max-height:min(640px, 100%); display:flex; flex-direction:column; border-radius:var(--radius-hero); background:var(--bg-elevated); border:1px solid var(--border-subtle); box-shadow:0 24px 70px rgba(0,0,0,.5); overflow:hidden; transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.ob-overlay.visible .ob-card { transform:none; }
.ob-top { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0; }
.ob-count { font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--text-tertiary); }
.ob-skip { border:0; background:transparent; cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm); color:var(--text-secondary); font:inherit; font-size:13px; font-weight:600; }
.ob-skip:hover { color:var(--text-primary); background:var(--bg-hover); }
.ob-skip[hidden], .ob-btn[hidden] { visibility:hidden; display:block; }
.ob-stage { flex:1; min-height:0; overflow-y:auto; padding:10px 24px 6px; display:flex; flex-direction:column; align-items:center; text-align:center; animation:ob-fade .3s ease both; }
.ob-icon { width:56px; height:56px; margin:6px 0 14px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:var(--bg-active); color:var(--accent-color); flex:none; }
.ob-icon .material-symbols-rounded { font-size:30px; }
.ob-title { margin:0 0 8px; font-size:21px; line-height:1.2; font-weight:800; color:var(--text-primary); }
.ob-body { margin:0; font-size:14px; line-height:1.55; color:var(--text-secondary); }
.ob-art { margin:2px 0 16px; }
.ob-art-brand img { width:84px; height:84px; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.ob-art-toggle { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-full); background:var(--bg-surface); border:1px solid var(--border-subtle); }
.ob-pill { font-size:12px; font-weight:700; color:var(--text-tertiary); }
.ob-pill.is-on { color:var(--text-primary); }
.ob-switch { position:relative; width:42px; height:24px; border-radius:var(--radius-full); background:var(--bg-active); }
.ob-switch span { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-primary); animation:ob-slide 2.4s ease-in-out infinite; }
.ob-list { list-style:none; margin:14px 0 4px; padding:0; width:100%; display:flex; flex-direction:column; gap:8px; text-align:left; }
.ob-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border-subtle); }
.ob-list li > .material-symbols-rounded { font-size:22px; color:var(--accent-color); margin-top:1px; flex:none; }
.ob-list strong { display:block; font-size:13.5px; font-weight:700; color:var(--text-primary); }
.ob-list small { display:block; margin-top:1px; font-size:12px; line-height:1.4; color:var(--text-secondary); }
.ob-dots { display:flex; justify-content:center; gap:6px; padding:12px 0 6px; }
.ob-dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--bg-active); transition:width .25s ease, background .25s ease; }
.ob-dot.active { width:20px; background:var(--text-primary); }
.ob-actions { display:flex; gap:10px; padding:10px 18px 18px; }
.ob-btn { flex:1; border:1px solid var(--border-subtle); cursor:pointer; padding:12px 16px; border-radius:var(--radius-full); background:var(--bg-surface); color:var(--text-primary); font:inherit; font-size:14px; font-weight:700; }
.ob-btn-primary { flex:2; border-color:transparent; background:var(--text-primary); color:var(--bg-base); }
.ob-btn:active { transform:scale(.97); }
.ob-btn:focus-visible, .ob-skip:focus-visible, .install-banner-btn:focus-visible, .install-banner-close:focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }
@keyframes ob-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes ob-fade { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
@keyframes ob-slide { 0%,35% { transform:translateX(0); } 55%,90% { transform:translateX(18px); } 100% { transform:translateX(0); } }
@media (min-width: 900px) { .install-banner { max-width:560px; } }
@media (prefers-reduced-motion: reduce) { .install-banner, .ob-stage, .ob-switch span, .ob-card, .ob-overlay { animation:none !important; transition:none !important; } }
body.reduced-motion .install-banner, body.reduced-motion .ob-stage, body.reduced-motion .ob-switch span { animation:none !important; }


/* Performance, focus and touch-target refinements (v13.1.1). */
.track-list > .track-row, #library-list > .track-row, #home-tracks > .track-row,
#detail-tracks > .track-row, #queue-list > .track-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 66px;
}
.material-symbols-rounded { font-feature-settings: 'liga'; font-variant-ligatures: common-ligatures; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-color, #7aa2ff) !important;
  outline-offset: 3px;
}
.btn-primary, .btn-play-pause, .eq-preset.active { color: var(--accent-ink, #000); }
#mini-player.is-buffering #mini-title::after {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 7px;
  vertical-align: 1px; border: 1.5px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: mujic-buffer-spin .7s linear infinite;
}
.mini-buffering-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mini-next-up { max-width:100%; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--text-tertiary); font-size:10px; line-height:1.1; }
.mini-next-up[hidden] { display:none !important; }
@keyframes mujic-buffer-spin { to { transform: rotate(360deg); } }
.settings-search-bar { position:sticky; top:0; z-index:15; padding:8px 0 12px; background:var(--bg-base); }
.settings-search-input { display:block; width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); color:var(--text-primary); background:var(--bg-elevated); font:inherit; }
.settings-search-input::placeholder { color:var(--text-tertiary); }
.online-search-loading-status { position:sticky; top:0; z-index:3; margin:0 0 10px; padding:9px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:color-mix(in srgb,var(--bg-elevated) 90%,transparent); color:var(--text-secondary); font-size:12px; }
#online-search-results.is-refreshing > :not(.online-search-loading-status) { opacity:.58; transition:opacity .12s ease; }
.online-network-description { max-width:520px; margin:0; color:var(--text-secondary); font-size:13px; line-height:1.55; }
@media (pointer: coarse) {
  .icon-btn, #mini-player .mini-action, .nav-item, .tab-item, .online-search-tab,
  .text-action, .settings-switch { min-height:44px; }
  .icon-btn, #mini-player .mini-action { min-width:44px; }
}
@media (prefers-reduced-motion: reduce) {
  #mini-player.is-buffering #mini-title::after { animation:none; }
  #online-search-results.is-refreshing > :not(.online-search-loading-status) { transition:none; }
}

/* v13.1.2 scoped UI fixes */
#mini-art { border-radius:var(--radius-lg); }
body[data-corner-radius="sharp"] #mini-art { border-radius:0 !important; }
body[data-corner-radius="medium"] #mini-art { border-radius:var(--radius-md) !important; }
body[data-corner-radius="rounded"] #mini-art { border-radius:var(--radius-lg) !important; }
body[data-corner-radius="extra"] #mini-art { border-radius:50% !important; }

/* A single, predictable focus indicator for each search field. */
.online-search-box:focus-within { border-color:var(--accent-color) !important; box-shadow:none !important; }
.online-search-box input:focus, .online-search-box input:focus-visible { outline:none !important; box-shadow:none !important; }
#view-settings .settings-search-input:focus, #view-settings .settings-search-input:focus-visible { outline:none !important; outline-offset:0 !important; border-color:var(--accent-color) !important; box-shadow:none !important; }
.settings-search-bar { background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.online-search-history-chip { display:inline-flex; align-items:center; gap:3px; max-width:100%; }
.online-search-history-chip .online-chip { max-width:min(70vw,340px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-search-history-remove { display:inline-flex; flex:0 0 28px; width:28px; min-width:28px; height:28px; align-items:center; justify-content:center; padding:0; border:1px solid var(--border-subtle); border-radius:50%; color:var(--text-tertiary); background:transparent; cursor:pointer; }
.online-search-history-remove:hover { color:var(--text-primary); border-color:var(--text-secondary); background:var(--bg-hover); }
.online-search-history-remove .material-symbols-rounded { font-size:16px; }
@media (orientation:landscape) and (max-height:600px) and (max-width:1024px) {
  #full-player { height:100dvh; min-height:0; overflow:hidden; }
  #full-player .player-header { box-sizing:border-box; flex:0 0 44px; min-height:44px; padding:3px 10px !important; }
  body:not(.lyrics-mode) #full-player .player-body { display:grid !important; grid-template-columns:minmax(0,41%) minmax(0,1fr) !important; align-items:center; justify-content:stretch; gap:clamp(8px,1.8vw,18px); width:100%; max-width:none !important; height:auto; min-height:0; flex:1 1 auto; margin:0; padding:4px 10px calc(4px + var(--safe-bottom)); box-sizing:border-box; overflow:hidden; }
  body:not(.lyrics-mode) #full-player .player-art-container { display:flex; box-sizing:border-box; width:100%; min-width:0; height:auto !important; min-height:0; max-height:100%; flex:none; margin:0; padding:0 !important; align-items:center; justify-content:center; }
  body:not(.lyrics-mode) #full-player #full-art { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 58px - var(--safe-bottom)); aspect-ratio:1; object-fit:cover; margin:auto; }
  body:not(.lyrics-mode) #full-player .player-controls-section { box-sizing:border-box; width:100%; min-width:0; max-width:none !important; max-height:100%; min-height:0; flex:none; align-self:center; justify-self:stretch; margin:0 !important; padding:clamp(6px,1.5vh,11px) clamp(8px,1.6vw,16px) !important; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; justify-content:center; gap:0; }
  body:not(.lyrics-mode) #full-player .player-metadata-row { min-width:0; gap:8px; margin-bottom:clamp(5px,1.2vh,10px) !important; padding-bottom:0; }
  body:not(.lyrics-mode) #full-player .player-title { font-size:clamp(16px,2.2vw,23px) !important; line-height:1.12; }
  body:not(.lyrics-mode) #full-player .player-artist { font-size:clamp(10px,1.35vw,13px) !important; line-height:1.25; }
  body:not(.lyrics-mode) #full-player .scrubber-wrap { margin-bottom:clamp(4px,1vh,9px) !important; padding:4px 0; }
  body:not(.lyrics-mode) #full-player .main-playback-controls { gap:clamp(4px,1vw,12px); min-width:0; }
  body:not(.lyrics-mode) #full-player .main-playback-controls .icon-btn { width:clamp(30px,5vh,42px); min-width:clamp(30px,5vh,42px); height:clamp(30px,5vh,42px); }
  body:not(.lyrics-mode) #full-player .btn-play-pause { width:clamp(42px,7vh,54px); height:clamp(42px,7vh,54px); }
  body:not(.lyrics-mode) #full-player .btn-play-pause .material-symbols-rounded { font-size:clamp(24px,4vh,30px); }
  body:not(.lyrics-mode) #full-player .secondary-playback-controls { margin-top:clamp(3px,.8vh,7px); }
}
@media (orientation:landscape) and (max-height:460px) and (max-width:900px) {
  #full-player .player-header { flex-basis:38px; min-height:38px; padding-block:0 !important; }
  body:not(.lyrics-mode) #full-player .player-body { grid-template-columns:minmax(0,38%) minmax(0,1fr) !important; padding-top:2px; padding-bottom:2px; gap:7px; }
  body:not(.lyrics-mode) #full-player .player-controls-section { padding:4px 7px !important; }
  body:not(.lyrics-mode) #full-player .player-metadata-row { margin-bottom:4px !important; }
  body:not(.lyrics-mode) #full-player .scrubber-wrap { margin-bottom:3px !important; }
}


/* v13.1.3: shared UI styles must remain available when online CSS is lazy-loaded. */
.workspace-toggle-mini {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; width: 38px; height: 34px; padding: 0; border: 0;
  background: transparent; color: var(--text-secondary); border-radius: var(--radius-full);
  cursor: pointer; flex: none; outline-offset: 3px;
}
.workspace-toggle-track {
  position: relative; display: block; width: 30px; height: 18px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  background: var(--bg-elevated); transition: background .2s ease, border-color .2s ease;
}
.workspace-toggle-thumb {
  position: absolute; left: 2px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text-secondary);
  transition: transform .2s ease, background .2s ease; box-shadow: 0 1px 2px #0003;
}
.workspace-toggle-beta {
  position: absolute; right: 0; top: 2px; width: 5px; height: 5px;
  border: 1px solid var(--bg-base); border-radius: 50%; background: #f5b544; opacity: .78;
}
.workspace-toggle-mini.is-online .workspace-toggle-track { background: rgba(255,69,58,.19); border-color: rgba(255,69,58,.55); }
.workspace-toggle-mini.is-online .workspace-toggle-thumb { transform: translateX(12px); background: #ff453a; }
.workspace-toggle-mini.is-online .workspace-toggle-beta { opacity: 1; }
.workspace-toggle-mini:focus-visible { outline: 2px solid var(--accent-color); }
.home-actions .workspace-toggle-mini { margin: 0 -3px 0 -5px; }

/* The home watermark is shared by offline and streaming home. Keep its design
   in the critical stylesheet instead of relying on the deferred streaming CSS. */
.online-brand-footer {
  display: block; margin: clamp(56px,9vw,120px) 0 6px;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom,0px));
  overflow: hidden; text-align: center; content-visibility: visible; contain: none;
}
.online-brand-wordmark {
  display: inline-block; padding: .02em .22em .26em .08em;
  font-size: clamp(84px,27vw,250px); font-weight: 800; letter-spacing: -.03em;
  line-height: .95; white-space: nowrap; user-select: none; pointer-events: none;
  color: transparent;
  background: linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 88%);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .online-brand-wordmark {
  background: linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.04) 88%);
  -webkit-background-clip: text; background-clip: text;
}

/* The online-only back-to-top control has no place in the offline workspace.
   It is styled and enabled by online-workspace.css after online mode is opened. */
body:not(.online-mode) #online-back-top { display: none !important; }


/* v13.2.0 — restrained native-feeling motion. Animates opacity/transform only. */
:root { --mujic-motion-fast: 150ms; --mujic-motion-standard: 230ms; --mujic-motion-spring: cubic-bezier(.2,.78,.22,1); }
.view.active { animation: mujic-view-enter 220ms var(--mujic-motion-spring) both; }
@keyframes mujic-view-enter { from { opacity: .88; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.btn,.icon-btn,.nav-item,.settings-category-card,.online-media-card,.online-category-card,.online-radio-card,.online-entity-card,.online-artist-card,.track-row,.online-compact-row { transition-duration: var(--mujic-motion-standard); transition-timing-function: var(--mujic-motion-spring); }
@media (hover: hover) {
  .online-media-card:hover,.online-category-card:hover,.online-entity-card:hover,.online-radio-card:hover { transform: translateY(-2px); }
}
.btn:active,.icon-btn:active,.online-card-play:active,.online-radio-play:active { transform: scale(.965); }
#mini-player { transition: transform 320ms var(--mujic-motion-spring), opacity 180ms ease, background-color 220ms ease; will-change: transform; }
#mini-player.scroll-hidden { transform: translate3d(0,calc(100% + 26px),0) !important; opacity: .2; pointer-events: none !important; }
.lyrics-loading-state { display:flex; min-height:40vh; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--text-secondary); text-align:center; animation:mujic-fade-up 220ms var(--mujic-motion-spring) both; }
.lyrics-loading-orb { width:22px; height:22px; border-radius:50%; border:2px solid color-mix(in srgb,var(--accent-color) 22%,transparent); border-top-color:var(--accent-color); animation:mujic-lyrics-spin 850ms linear infinite; }
@keyframes mujic-fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes mujic-lyrics-spin { to { transform:rotate(360deg); } }
.player-lyrics-container .lyric-line { transition: opacity 220ms ease, filter 220ms ease, color 220ms ease, background-color 220ms ease; }
.player-lyrics-container .lyric-line.active { animation: mujic-lyric-focus 250ms var(--mujic-motion-spring) both; }
@keyframes mujic-lyric-focus { from { opacity:.76; } to { opacity:1; } }
.lyrics-unavailable-card { animation:mujic-fade-up 240ms var(--mujic-motion-spring) both; }
body.low-end-mode .lyrics-loading-orb { animation:none; border-top-color:var(--accent-color); }
body.reduced-motion .view.active,body.reduced-motion .lyrics-loading-state,body.reduced-motion .lyrics-unavailable-card,body.reduced-motion .player-lyrics-container .lyric-line.active { animation:none !important; }
body.reduced-motion #mini-player { will-change:auto; }
@media (prefers-reduced-motion: reduce) {
  .view.active,.lyrics-loading-state,.lyrics-unavailable-card,.player-lyrics-container .lyric-line.active { animation:none !important; }
  #mini-player { transition:opacity 120ms ease !important; }
}
@media (max-width: 767px) {
  #mini-player.scroll-hidden { transform:translate3d(0,calc(100% + 22px),0) !important; }
  .online-media-card:active,.online-category-card:active,.online-entity-card:active { transform:scale(.985); }
}


/* v13.2.2 — scroll-aware dock and corner-aware active navigation chip. */
#bottom-nav { transition: transform 360ms var(--mujic-motion-spring, cubic-bezier(.2,.78,.22,1)), opacity 200ms ease; }
#bottom-nav .nav-item { border-radius: var(--radius-md); transition: background-color 220ms ease, color 180ms ease, transform 260ms var(--mujic-motion-spring, cubic-bezier(.2,.78,.22,1)); }
body[data-corner-radius="sharp"] #bottom-nav .nav-item.active { border-radius: 0 !important; }
body[data-corner-radius="medium"] #bottom-nav .nav-item.active { border-radius: 8px !important; }
body[data-corner-radius="rounded"] #bottom-nav .nav-item.active { border-radius: 14px !important; }
body[data-corner-radius="extra"] #bottom-nav .nav-item.active { border-radius: 999px !important; }
@media (max-width: 767px) {
  #bottom-nav { transform: translate3d(0,0,0); will-change: transform; }
  #bottom-nav.scroll-hidden { transform: translate3d(0,calc(100% + 18px),0) !important; opacity: 0; pointer-events: none !important; }
  #mini-player { transition: transform 320ms var(--mujic-motion-spring, cubic-bezier(.2,.78,.22,1)), bottom 360ms var(--mujic-motion-spring, cubic-bezier(.2,.78,.22,1)), opacity 180ms ease, background-color 220ms ease; }
  body.nav-scroll-hidden #mini-player.visible { bottom: calc(8px + var(--safe-bottom)); }
  body.nav-scroll-hidden #mini-player.scroll-hidden { transform: translateY(0) !important; opacity: 1; pointer-events: auto !important; }
}
@media (min-width: 768px) { #bottom-nav { transition:none; } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  body:not(.low-end-mode):not(.reduced-motion) .view.active { animation: mujic-view-morph 340ms var(--mujic-motion-spring, cubic-bezier(.2,.78,.22,1)) both; }
  @keyframes mujic-view-morph {
    from { opacity: 0; transform: translateY(7px) scale(.992); clip-path: inset(0 round 28px); }
    to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 round 0); }
  }
}
body.low-end-mode #bottom-nav { transition: transform 180ms ease, opacity 120ms ease; }
body.reduced-motion #bottom-nav { transition: opacity 120ms ease; }
@media (prefers-reduced-motion: reduce) {
  #bottom-nav, #bottom-nav .nav-item, #mini-player { transition-duration: 120ms !important; animation:none !important; }
  body.nav-scroll-hidden #mini-player.visible { bottom: calc(8px + var(--safe-bottom)); }
}


/* v13.2.4: centered desktop play control and timestamp-first lyrics fix. */
#mini-player { --mini-art-size:42px; align-items:center; }
#mini-player #mini-art { flex:0 0 var(--mini-art-size); width:var(--mini-art-size); height:var(--mini-art-size); min-width:var(--mini-art-size); max-width:var(--mini-art-size); object-fit:cover; align-self:center; }
#mini-player .mini-meta { align-self:stretch; justify-content:center; min-height:0; padding-top:0; padding-bottom:0; line-height:1.2; }
#mini-player .mini-title, #mini-player .item-title { line-height:1.22; }
#mini-player .mini-controls { height:100%; align-items:center; }
#mini-player .mini-action { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
#mini-player .mini-action .material-symbols-rounded { display:block; font-size:23px; line-height:1; }
#mini-player .mini-desktop-tools { display:none; }
@media (max-width:767px) {
  #mini-player { height:64px; padding:0 7px 0 10px; gap:0; }
  #mini-player #mini-art { --mini-art-size:40px; margin:0 10px 0 0; }
  #mini-player .mini-meta { padding:0 4px 0 0; }
  #mini-player .mini-controls { margin-left:auto; gap:2px; }
  #mini-player .mini-action { width:40px; height:40px; flex:0 0 40px; }
  #mini-player .mini-action .material-symbols-rounded { font-size:24px; }
  #mini-player .mini-desktop-tools { display:none !important; }
  #mini-player #mini-title { font-size:12.5px; line-height:1.2; }
  #mini-player #mini-artist { font-size:10.8px; line-height:1.2; margin-top:3px; }
}
@media (min-width:768px) {
  #mini-player { display:flex; padding:0 24px; gap:0; }
  #mini-player #mini-art { --mini-art-size:44px; margin:0 12px 0 0; }
  #mini-player .mini-meta { flex:0 1 32%; max-width:360px; }
  /* The play/pause control itself is centered on the player, not the whole control group. */
  #mini-player .mini-controls { position:absolute; left:50%; top:50%; width:0; height:42px; transform:translateY(-50%); display:block; z-index:5; }
  #mini-player .mini-action { position:absolute; top:0; width:42px; height:42px; flex:0 0 42px; }
  #mini-player .mini-action[data-action="toggle-play"] { left:-21px; }
  #mini-player .mini-action[data-action="next-track"] { left:29px; }
  #mini-player .mini-action .material-symbols-rounded { font-size:23px; }
  #mini-player .mini-desktop-tools { display:flex; align-items:center; gap:8px; margin-left:auto; z-index:6; }
  #mini-player .mini-desktop-tool { width:42px; height:42px; min-width:42px; border:0; background:transparent; color:var(--text-secondary); }
  #mini-player .mini-desktop-tool .material-symbols-rounded { font-size:22px; line-height:1; }
  #mini-player .mini-desktop-tool:hover,#mini-player .mini-desktop-tool:focus-visible { background:var(--bg-hover); color:var(--text-primary); }
}
body[data-corner-radius="sharp"] #mini-player { border-radius:0 !important; }
body[data-corner-radius="medium"] #mini-player { border-radius:var(--radius-md) !important; }
body[data-corner-radius="rounded"] #mini-player { border-radius:var(--radius-md) !important; }
body[data-corner-radius="extra"] #mini-player { border-radius:var(--radius-lg) !important; }


/* v13.2.5 — aligned mini-player tools, immersive artwork ambience and track-swipe motion. */
#mini-player { --mini-art-size:54px; }
#mini-player #mini-art {
  flex:0 0 var(--mini-art-size) !important;
  width:var(--mini-art-size) !important;
  height:var(--mini-art-size) !important;
  min-width:var(--mini-art-size) !important;
  max-width:var(--mini-art-size) !important;
  object-fit:cover;
  object-position:center;
  align-self:center;
}
#mini-player .mini-desktop-tools {
  display:none;
  flex-wrap:nowrap;
  flex-direction:row;
  white-space:nowrap;
}
@media (max-width:767px) {
  #mini-player { height:64px; padding:0 7px 0 10px; gap:0; }
  #mini-player #mini-art { --mini-art-size:48px; margin:0 10px 0 0; }
  #mini-player .mini-meta { padding:0 4px 0 0; }
  #mini-player .mini-controls { margin-left:auto; gap:2px; }
  #mini-player .mini-action { width:38px; height:40px; flex:0 0 38px; }
  /* Volume and PiP are desktop-only. Never let a stale style expose them on touch layouts. */
  #mini-player .mini-desktop-tools,
  #mini-player .mini-desktop-tools [data-action="show-sheet"][data-target="volume-sheet"],
  #mini-player .mini-desktop-tools [data-action="picture-in-picture"] {
    display:none !important;
    visibility:hidden !important;
  }
}
@media (min-width:768px) {
  #mini-player { padding-left:24px; padding-right:24px; }
  #mini-player #mini-art { --mini-art-size:54px; margin:0 14px 0 0; }
  #mini-player .mini-meta { flex:0 1 32%; max-width:360px; }
  #mini-player .mini-controls {
    position:absolute;
    left:50%; top:50%; width:0; height:44px;
    transform:translateY(-50%); display:block; z-index:5;
  }
  #mini-player .mini-action { position:absolute; top:1px; width:42px; height:42px; flex:0 0 42px; }
  #mini-player .mini-action[data-action="toggle-play"] { left:-21px; }
  #mini-player .mini-action[data-action="next-track"] { left:31px; }
  #mini-player .mini-desktop-tools {
    position:absolute;
    right:22px; top:50%;
    display:flex !important;
    align-items:center; justify-content:flex-end; gap:8px;
    width:max-content; height:44px; margin:0 !important; padding:0;
    transform:translateY(-50%);
    flex:0 0 auto; flex-wrap:nowrap; flex-direction:row;
    white-space:nowrap; z-index:6;
  }
  #mini-player .mini-desktop-tool {
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 42px; width:42px; height:42px; min-width:42px; max-width:42px;
    margin:0; padding:0; border:0; border-radius:50%;
    background:transparent; color:var(--text-secondary);
  }
  #mini-player .mini-desktop-tool .material-symbols-rounded { font-size:22px; line-height:1; }
  #mini-player .mini-desktop-tool:hover,#mini-player .mini-desktop-tool:focus-visible { background:var(--bg-hover); color:var(--text-primary); }
}
body[data-corner-radius="sharp"] #mini-player #mini-art { border-radius:0 !important; }
body[data-corner-radius="medium"] #mini-player #mini-art { border-radius:max(3px,calc(var(--radius-md) - 3px)) !important; }
body[data-corner-radius="rounded"] #mini-player #mini-art { border-radius:max(5px,calc(var(--radius-md) - 1px)) !important; }
body[data-corner-radius="extra"] #mini-player #mini-art { border-radius:50% !important; }

/* v13.2.6 — lower-cost swipe motion and a clearer, colour-led player ambience. */
@keyframes mujic-artwork-ambience-drift {
  from { transform:translate3d(-.8%,-.35%,0) scale(1.18); }
  to { transform:translate3d(.8%,.45%,0) scale(1.24); }
}
@keyframes mujic-artwork-ambience-glow {
  from { opacity:.28; transform:translate3d(-.5%,0,0); }
  to { opacity:.48; transform:translate3d(.5%,.4%,0); }
}
#full-player .player-bg {
  opacity:.43 !important;
  filter:blur(76px) saturate(1.5) brightness(.52) !important;
  -webkit-filter:blur(76px) saturate(1.5) brightness(.52) !important;
  transform:scale(1.22);
  transition:opacity .18s ease;
}
#full-player .player-bg::before {
  content:""; position:absolute; inset:-10%; pointer-events:none;
  background:
    radial-gradient(ellipse at 22% 25%,color-mix(in srgb,var(--accent-color) 62%,transparent),transparent 48%),
    radial-gradient(ellipse at 80% 76%,rgba(111,145,255,.22),transparent 45%),
    radial-gradient(ellipse at 48% 95%,rgba(39,194,148,.12),transparent 50%);
  opacity:.42; mix-blend-mode:screen;
}
#full-player .player-bg::after {
  background:linear-gradient(116deg,rgba(0,0,0,.43),rgba(0,0,0,.34) 52%,rgba(0,0,0,.48)) !important;
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px) {
  body:not(.low-end-mode):not(.reduced-motion) #full-player.active .player-bg {
    animation:mujic-artwork-ambience-drift 34s ease-in-out infinite alternate;
    will-change:transform;
  }
  body:not(.low-end-mode):not(.reduced-motion) #full-player.active .player-bg::before {
    animation:mujic-artwork-ambience-glow 28s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:767px) {
  body:not(.low-end-mode):not(.reduced-motion) #full-player.active .player-bg {
    opacity:.37 !important;
    filter:blur(54px) saturate(1.42) brightness(.48) !important;
    -webkit-filter:blur(54px) saturate(1.42) brightness(.48) !important;
    animation:mujic-artwork-ambience-drift 38s ease-in-out infinite alternate;
    will-change:transform;
  }
}
#full-player:not(.active) .player-bg,
#full-player:not(.active) .player-bg::before { animation:none !important; will-change:auto !important; }
body.low-end-mode #full-player .player-bg,
body.reduced-motion #full-player .player-bg,
body.low-end-mode #full-player .player-bg::before,
body.reduced-motion #full-player .player-bg::before {
  animation:none !important; will-change:auto !important;
}
/* Low-end mode keeps a clear colour wash but avoids expensive image blur and motion. */
body.low-end-mode #full-player .player-bg {
  filter:none !important; -webkit-filter:none !important; transform:none !important; opacity:.22 !important;
}
/* When artwork ambience is selected, use a clean CSS colour wash on low-end devices
   instead of a sharp, unblurred cover image. Solid/black background choices remain intact. */
body.low-end-mode #full-player .player-bg[data-background-mode="artwork"] {
  background-image:
    radial-gradient(ellipse at 18% 25%,color-mix(in srgb,var(--accent-color) 62%,#121326) 0%,transparent 52%),
    radial-gradient(ellipse at 82% 72%,rgba(72,108,188,.34) 0%,transparent 49%),
    linear-gradient(135deg,#071116,#15101c 58%,#07080d) !important;
  opacity:1 !important;
}
body.low-end-mode #full-player .player-bg::before { opacity:.78 !important; mix-blend-mode:normal; }
body.low-end-mode #full-player .player-bg::after {
  background:linear-gradient(116deg,rgba(0,0,0,.20),rgba(0,0,0,.13) 52%,rgba(0,0,0,.24)) !important;
}
body.reduced-motion #full-player .player-bg { animation:none!important; }
@media (prefers-reduced-motion:reduce) {
  #full-player .player-bg,#full-player .player-bg::before { animation:none!important; }
}

/* Swipe only animates compositor-friendly transforms; avoid rotating/scaling a large image. */
@keyframes mujic-swipe-art-out-left {
  from { opacity:1; transform:translate3d(0,0,0); }
  to { opacity:.78; transform:translate3d(-26px,0,0); }
}
@keyframes mujic-swipe-art-out-right {
  from { opacity:1; transform:translate3d(0,0,0); }
  to { opacity:.78; transform:translate3d(26px,0,0); }
}
@keyframes mujic-swipe-art-in-from-right {
  from { opacity:.76; transform:translate3d(20px,0,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes mujic-swipe-art-in-from-left {
  from { opacity:.76; transform:translate3d(-20px,0,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
#player-art-container.mujic-swipe-out-next img { animation:mujic-swipe-art-out-left 145ms cubic-bezier(.22,.68,.2,1) both !important; }
#player-art-container.mujic-swipe-out-previous img { animation:mujic-swipe-art-out-right 145ms cubic-bezier(.22,.68,.2,1) both !important; }
#full-art.mujic-swipe-in-from-right { animation:mujic-swipe-art-in-from-right 225ms cubic-bezier(.22,.68,.2,1) both !important; }
#full-art.mujic-swipe-in-from-left { animation:mujic-swipe-art-in-from-left 225ms cubic-bezier(.22,.68,.2,1) both !important; }
#player-art-container img { will-change:auto; }
#player-art-container.mujic-swipe-out-next img,
#player-art-container.mujic-swipe-out-previous img,
#full-art.mujic-swipe-in-from-right,
#full-art.mujic-swipe-in-from-left { will-change:transform,opacity; }
/* Keep a short, straight slide on constrained devices instead of disabling swipe feedback entirely. */
body.low-end-mode #player-art-container.mujic-swipe-out-next img { animation-duration:150ms !important; animation-timing-function:cubic-bezier(.2,.68,.2,1) !important; }
body.low-end-mode #player-art-container.mujic-swipe-out-previous img { animation-duration:150ms !important; animation-timing-function:cubic-bezier(.2,.68,.2,1) !important; }
body.low-end-mode #full-art.mujic-swipe-in-from-right,
body.low-end-mode #full-art.mujic-swipe-in-from-left { animation-duration:190ms !important; animation-timing-function:cubic-bezier(.2,.68,.2,1) !important; }
@media (prefers-reduced-motion:reduce), body.reduced-motion {
  #player-art-container.mujic-swipe-out-next img,
  #player-art-container.mujic-swipe-out-previous img,
  #full-art.mujic-swipe-in-from-right,
  #full-art.mujic-swipe-in-from-left { animation:none !important; will-change:auto !important; }
}