:root {
            color-scheme: dark;
            --bg: #080b11; --surface: #101722; --card: #151e2a; --card-hover: #1d2a38;
            --accent: #bb9cff; --accent-2: #75f0d5; --text: #f7f8fc; --muted: #a2adbf;
            --line: rgba(223,234,255,.1); --green: #8be28b;
            --glass: rgba(15,22,32,.82); --shadow: 0 24px 70px rgba(0,0,0,.38);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; scrollbar-color:rgba(187,156,255,.55) rgba(255,255,255,.035); scrollbar-width:thin; }
        *::-webkit-scrollbar { width:10px; height:10px; }
        *::-webkit-scrollbar-track { border:3px solid transparent; border-radius:99px; background:rgba(255,255,255,.035); background-clip:padding-box; }
        *::-webkit-scrollbar-thumb { min-height:34px; border:3px solid transparent; border-radius:99px; background:linear-gradient(145deg,#75f0d5,#bb9cff) border-box; background-clip:padding-box; }
        *::-webkit-scrollbar-thumb:hover { background:linear-gradient(145deg,#a0ffe9,#d1baff) border-box; background-clip:padding-box; }
        *::-webkit-scrollbar-corner { background:transparent; }
        body { min-height: 100vh; overflow-x:clip; color: var(--text); background: radial-gradient(ellipse at 88% -15%, #392960 0, transparent 34%), radial-gradient(ellipse at 0 55%, #10332e44 0, transparent 34%), var(--bg); font-family: "Segoe UI", system-ui, sans-serif; padding: 0 24px 35px; }
        button, input { font: inherit; }
        button { color: inherit; cursor: pointer; }
        .app-shell { width: min(1320px,100%); margin: auto; }
        header { position: sticky; z-index: 12; top: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(8,11,17,.76); backdrop-filter: blur(18px); }
        .brand { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 850; letter-spacing: -.4px; }
        .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #161225; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 8px 28px #a78bfa33; }
        nav { display: flex; gap: 7px; }
        .nav-btn,.icon-btn,.subtle-btn { border: 1px solid transparent; border-radius: 11px; padding: 10px 14px; color: var(--muted); background: transparent; transition: .18s; }
        button:focus-visible,input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
        .nav-btn:hover,.nav-btn.active,.icon-btn:hover,.subtle-btn:hover { color: var(--text); background: #ffffff0b; border-color: var(--line); }
        .nav-btn.active { color: var(--accent-2); }
        .search-wrap { position: relative; z-index: 10; display: flex; align-items: center; gap: 12px; width: min(720px,100%); margin: 24px auto; }
        .search-box { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 17px; border-radius: 17px; background: #141923eF; border: 1px solid var(--line); box-shadow: 0 12px 34px #0003; flex: 1; }
        .search-box:focus-within { border-color: #a78bfa88; box-shadow: 0 0 0 3px #a78bfa18; }
        .search-box input { width: 100%; color: var(--text); border: 0; outline: 0; background: transparent; }
        .search-box input::placeholder { color: #818b9c; }
        .search-submit,.primary-btn { border: 0; color: #171125; border-radius: 14px; padding: 13px 20px; font-weight: 750; background: linear-gradient(135deg,var(--accent),#c4b5fd); }
        .search-submit:hover,.primary-btn:hover { filter: brightness(1.08); }
        .suggestions { position: absolute; display: none; top: 60px; right: 0; left: 90px; max-height: 390px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: #151a24; box-shadow: 0 20px 50px #0009; }
        .suggestions.open { display: block; }
        .suggestion-heading { padding: 8px 10px; color: var(--muted); font-size: 12px; }
        .suggestion-row { width:100%; display:flex; align-items:center; gap:11px; padding:10px 12px; border:0; border-radius:11px; color:var(--text); background:transparent; text-align:start; cursor:pointer; }
        .suggestion-row:hover,.suggestion-row[aria-selected="true"] { background:#ffffff0b; }
        .suggestion-row .suggestion-icon { width:24px; color:var(--muted); text-align:center; }
        .suggestion-row b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:600; }
        .view { display: none; }.view.active { display: block; }
        .welcome { position: relative; overflow: hidden; min-height: 260px; padding: 38px 42px; border: 1px solid #ffffff15; border-radius: 30px; background: linear-gradient(112deg,#30234b 0,#191b2c 52%,#102a2c 100%); box-shadow: var(--shadow); }
        .welcome:before { content:""; position:absolute; width:340px; height:340px; left:8%; top:-150px; border:1px solid #ffffff12; border-radius:50%; box-shadow:0 0 0 28px #ffffff05,0 0 0 58px #ffffff03; }
        .welcome:after { content: "♫"; position: absolute; left: 7%; top: -60px; color: #ffffff0a; font-size: 290px; line-height: 1; transform: rotate(-13deg); pointer-events: none; }
        .eyebrow { color: var(--accent-2); font-size: 12px; font-weight: 750; letter-spacing: 1.5px; }
        .welcome h2 { max-width: 630px; margin-top: 12px; font-size: clamp(27px,4vw,42px); line-height: 1.25; }
        .welcome p { max-width: 540px; margin-top: 12px; color: #c0c3d2; line-height: 1.8; }
        .welcome .primary-btn { margin-top: 20px; }
        .section { margin-top: 35px; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
        .section-head h2 { font-size: 21px; }.section-head p { color: var(--muted); font-size: 13px; margin-top: 5px; }
        .track-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
        .home-shortcuts { display:flex; gap:9px; margin:18px 0 4px; overflow-x:auto; padding:2px 1px 7px; scrollbar-width:thin; scrollbar-color:transparent transparent; }
        .home-shortcuts::-webkit-scrollbar { height:4px; }.home-shortcuts::-webkit-scrollbar-thumb { opacity:0; }
        .home-shortcuts:hover,.home-shortcuts:focus-within { scrollbar-color:rgba(187,156,255,.55) rgba(255,255,255,.035); }
        .home-shortcuts:hover::-webkit-scrollbar-thumb,.home-shortcuts:focus-within::-webkit-scrollbar-thumb { opacity:1; }
        .home-shortcut { flex:0 0 auto; padding:9px 14px; border:1px solid var(--line); border-radius:999px; color:#d8d9e6; background:#ffffff08; transition:transform .2s,border-color .2s,background .2s; }
        .home-shortcut:hover { transform:translateY(-2px); border-color:#bb9cff77; background:#bb9cff12; }
        .home-section { padding:18px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,#121925bb,#0e141dbb); }
        .home-section--feature { border-color:#bb9cff24; background:linear-gradient(120deg,#211a34cc,#111b22dd); }
        .home-shelf { display:flex; gap:13px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:rgba(187,156,255,.55) transparent; }
        .home-shelf::-webkit-scrollbar,.results-list::-webkit-scrollbar,.playlist-list::-webkit-scrollbar,.lyrics-box::-webkit-scrollbar,.suggestions::-webkit-scrollbar { width:8px; height:8px; }
        .home-shelf::-webkit-scrollbar-track,.results-list::-webkit-scrollbar-track,.playlist-list::-webkit-scrollbar-track,.lyrics-box::-webkit-scrollbar-track,.suggestions::-webkit-scrollbar-track { background:transparent; }
        .home-shelf::-webkit-scrollbar-thumb,.results-list::-webkit-scrollbar-thumb,.playlist-list::-webkit-scrollbar-thumb,.lyrics-box::-webkit-scrollbar-thumb,.suggestions::-webkit-scrollbar-thumb { min-width:38px; border:2px solid transparent; border-radius:99px; background:linear-gradient(90deg,#75f0d5,#bb9cff) border-box; background-clip:padding-box; }
        .home-shelf .empty-card { flex:1 0 100%; }
        .home-shelf .track-card { flex:0 0 218px; scroll-snap-align:start; }
        .home-shelf--new .track-card { flex-basis:190px; border-radius:22px 22px 14px 14px; }
        .home-shelf--new .track-card img { aspect-ratio:1; border-radius:50%; }
        .home-favorite-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
        .home-favorite-list .song-item { min-width:0; margin:0; background:#ff8eaa09; }
        .home-favorite-list .song-item img { width:76px; }
        .home-action { flex:0 0 auto; border:1px solid var(--line); border-radius:10px; padding:8px 11px; color:var(--accent-2); background:#ffffff08; font-size:12px; }
        .home-action-label { display:inline-flex; align-items:center; cursor:pointer; }
        .home-action:hover { border-color:#75f0d566; background:#75f0d50c; }
        .offline-summary { color:var(--muted); font-size:12px; }
        .offline-home-note { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px; border:1px dashed #75f0d844; border-radius:16px; color:var(--muted); line-height:1.7; }
        .offline-home-note strong { display:block; color:var(--text); }
        .install-overlay { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom)); background:#03050bcc; backdrop-filter:blur(12px); animation:fade-in .2s ease both; }
        .install-overlay[hidden] { display:none; }
        .install-sheet { position:relative; width:min(460px,100%); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; padding:30px; border:1px solid #ffffff20; border-radius:28px; background:radial-gradient(ellipse at 5% 0,#9a73ef25,transparent 48%),linear-gradient(145deg,#171d2a,#0e131d); box-shadow:0 28px 90px #000b; animation:rise-in .25s ease both; }
        .install-dismiss { position:absolute; top:14px; left:14px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#ffffff08; font-size:20px; }
        .install-art { width:64px; height:64px; display:grid; place-items:center; margin-bottom:17px; border-radius:21px; color:#171225; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 10px 34px #a78bfa44; font-size:30px; }
        .install-sheet h2 { margin:0 38px 9px 0; font-size:23px; }
        .install-sheet p { color:var(--muted); font-size:13px; line-height:1.8; }
        .install-benefits { display:grid; gap:10px; margin:19px 0; padding:0; list-style:none; color:#dce2ee; font-size:13px; }
        .install-benefits li { display:flex; gap:9px; align-items:center; }
        .install-benefits li:before { content:"✓"; color:var(--accent-2); font-weight:800; }
        .install-actions { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:20px; }
        .install-actions .primary-btn { min-height:46px; }
        .install-help { border:0; padding:4px 2px; color:var(--muted); background:transparent; text-decoration:underline; text-underline-offset:3px; font-size:12px; }
        .install-help:hover { color:var(--accent-2); }
        .install-later { min-width:92px; border:1px solid var(--line); border-radius:13px; color:var(--muted); background:#ffffff08; }
        .install-instructions { margin-top:16px; padding:14px 17px; border:1px solid var(--line); border-radius:14px; color:#dce2ee; background:#ffffff06; font-size:13px; line-height:1.9; }
        .install-instructions[hidden] { display:none; }
        .install-instructions ol { padding-inline-start:22px; }
        @keyframes fade-in { from { opacity:0; } to { opacity:1; } }
        .track-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#151c27,#10151e); cursor: pointer; animation:fade-in .32s ease both; transition: transform .24s,border-color .24s,background .24s; }
        .track-card:hover { transform: translateY(-5px); background: var(--card-hover); border-color: #bb9cff66; }
        .track-card img { width: 100%; aspect-ratio: 16/10; display: block; object-fit: cover; border-radius: 12px; background: linear-gradient(110deg,#1a2330 8%,#283448 18%,#1a2330 33%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; transition: opacity .3s; }
        .track-card strong,.track-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .track-card strong { margin-top: 10px; font-size: 13px; }.track-card span { margin-top: 5px; color: var(--muted); font-size: 12px; }
        .empty-card { grid-column: 1/-1; padding: 25px; color: var(--muted); border: 1px dashed var(--line); border-radius: 15px; line-height: 1.8; text-align: center; }
        .channel-row { display: flex; flex-wrap: wrap; gap: 9px; }
        .channel-chip { padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; background: #ffffff08; color: var(--text); }
        .channel-chip:hover { border-color: var(--accent-2); }
        .search-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
        .player-section { max-width:980px; margin-inline:auto; }
        .panel { min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg,rgba(18,25,36,.96),rgba(13,18,27,.94)); padding: 20px; box-shadow: 0 18px 55px #0002; }
        .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
        .panel-title h2 { font-size: 18px; }.panel-title span { color: var(--muted); font-size: 12px; }
        .results-list { max-height: 720px; overflow: auto; padding-inline-end: 3px; }
        .song-item { display: flex; align-items: center; gap: 13px; padding: 10px; margin-bottom: 8px; border: 1px solid transparent; border-radius: 15px; background: #ffffff05; cursor: pointer; transition: background .2s,border-color .2s,transform .2s; animation: rise-in .32s ease both; }
        .song-item:hover { background: #ffffff0b; }.song-item.playing { border-color: #a78bfa88; background: #a78bfa14; }
        .song-item img { width: 88px; aspect-ratio: 16/9; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
        .song-info { min-width: 0; flex: 1; }.song-name { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.song-details { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .queue-add { flex:0 0 auto; width:32px; height:32px; border:1px solid var(--line); border-radius:10px; color:var(--accent-2); background:#ffffff06; }
        .list-footer { padding: 15px 0; color: var(--muted); font-size: 12px; text-align: center; }
        .player-section { position: sticky; top: 16px; }
        #currentPlayingText { overflow: hidden; margin-bottom: 4px; color: var(--text); font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
        #currentArtistText { color: var(--muted); font-size: 12px; }
        .player-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .player-actions { display: flex; gap: 5px; }.icon-btn { padding: 8px 10px; font-size: 14px; }.icon-btn.selected { color: #ff8eaa; }
        .visualizer-wrap { position: relative; overflow: hidden; height: 150px; margin: 15px 0 9px; border: 1px solid #ffffff12; border-radius: 18px; background: radial-gradient(ellipse at 50% 110%,#45326999,transparent 60%),linear-gradient(135deg,#111722,#161522 55%,#101d20); }
        .visualizer-wrap:after { content:""; position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(90deg,transparent 0 20px,#ffffff08 21px,transparent 22px); pointer-events:none; }
        #visualizer { position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 18px; }
        .wave-bar { width:5px; height:var(--wave-height); border-radius:9px; opacity:.65; background:linear-gradient(180deg,#6ee7d8,#a78bfa 55%,#f0abfc); transform:scaleY(.2); transition:transform .25s ease,opacity .25s ease; }
        .visualizer-wrap.playing .wave-bar { opacity:.95; animation:wave-breathe var(--wave-speed) ease-in-out infinite alternate; animation-delay:var(--wave-delay); }
        @keyframes wave-breathe { from { transform:scaleY(.24); } to { transform:scaleY(1); } }
        .video-wrap { position:relative; display:none; overflow:hidden; margin:15px 0 9px; border:1px solid #ffffff1a; border-radius:20px; background:radial-gradient(ellipse at 50% 35%,#202b3b,#05070a 74%); aspect-ratio:16/9; box-shadow:0 20px 50px #0007; isolation:isolate; }
        .video-wrap.visible { display:block; animation:rise-in .35s ease both; }
        .video-wrap video { width:100%; height:100%; display:block; object-fit:contain; background:#050609; }
        .video-loading { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#e5e8f2; background:linear-gradient(135deg,#101722dd,#090b10eF); transition:opacity .25s; }
        .video-loading.hidden { visibility:hidden; opacity:0; pointer-events:none; }
        .loading-ring { width:48px; height:48px; border:3px solid #ffffff20; border-top-color:var(--accent-2); border-left-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; box-shadow:0 0 28px #75f0d533; }
        .video-loading small { color:var(--muted); }
        .video-brand { position:absolute; z-index:3; top:13px; right:14px; display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid #ffffff24; border-radius:30px; background:#090c12b8; backdrop-filter:blur(12px); font-size:11px; }
        .video-brand i { width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 12px var(--accent-2); }
        .video-title { position:absolute; z-index:3; top:13px; left:14px; max-width:65%; overflow:hidden; padding:8px 12px; border:1px solid #ffffff20; border-radius:24px; color:#f3f3f8; background:#090c12a8; backdrop-filter:blur(12px); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
        .video-controls { position:absolute; z-index:3; right:0; bottom:0; left:0; display:flex; align-items:center; gap:10px; padding:42px 14px 12px; direction:ltr; background:linear-gradient(transparent,#050609eF); opacity:0; transform:translateY(5px); transition:opacity .2s,transform .2s; }
        .video-wrap:hover .video-controls,.video-wrap:focus-within .video-controls,.video-wrap:fullscreen .video-controls { opacity:1; transform:translateY(0); }
        .video-controls button { width:34px; height:34px; flex:0 0 auto; border:1px solid #ffffff35; border-radius:50%; background:#111722c9; backdrop-filter:blur(8px); }
        .video-controls button:hover { color:var(--accent-2); border-color:#75f0d5aa; }
        .video-controls span { min-width:38px; color:#f5f5f7; font-size:10px; direction:ltr; text-align:center; }
        .video-progress { flex:1; width:100%; }
        .video-wrap:fullscreen { width:100vw; height:100vh; max-height:none; aspect-ratio:auto; border:0; border-radius:0; }
        .video-wrap:fullscreen video { width:100%; height:100%; }
        .video-big-play { position:absolute; z-index:3; inset:50% auto auto 50%; width:68px; height:68px; display:grid; place-items:center; border:1px solid #ffffff50; border-radius:50%; color:#151322; background:linear-gradient(135deg,var(--accent-2),#b9a0ff); box-shadow:0 12px 40px #0009; font-size:25px; transform:translate(-50%,-50%); transition:transform .2s,opacity .2s; }
        .video-big-play:hover { transform:translate(-50%,-50%) scale(1.08); }.video-big-play.hidden { visibility:hidden; opacity:0; pointer-events:none; }
        .video-error { position:absolute; z-index:4; inset:0; display:none; align-items:center; justify-content:center; padding:24px; color:#ffb7bd; background:#090b10eF; text-align:center; line-height:1.8; }
        .video-error.visible { display:flex; }
        .mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
        .mode-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff06; }
        .mode-switch button { padding: 7px 10px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; }
        .mode-switch button.active { color: var(--text); background: #ffffff14; }
        .follow-btn { border: 1px solid #6ee7d855; border-radius: 10px; padding: 8px 11px; color: var(--accent-2); background: #6ee7d80c; font-size: 12px; }
        .follow-btn.following { color: var(--muted); border-color: var(--line); background: transparent; }
        .autoplay-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
        .autoplay-toggle input { accent-color: var(--accent); }
        audio { width: 100%; height: 38px; margin: 5px 0 8px; }
        .lyrics-heading { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 10px; color: var(--muted); font-size: 12px; }
        .lyrics-box { height: 300px; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 18px; border: 1px solid #ffffff0d; border-radius: 16px; background: radial-gradient(ellipse at top,#141a25,#090c11 65%); scroll-behavior: smooth; scrollbar-width:thin; scrollbar-color:#514670 transparent; }
        .lyrics-source { width: 100%; margin-bottom: 8px; color: var(--muted); font-size: 11px; text-align: center; }
        .lyric-line { width: 100%; margin: 10px 0; color: #687082; font-size: 14px; text-align: center; transition: .25s; }
        .lyric-line.clickable { cursor: pointer; }.lyric-line.clickable:hover { color: #c7c0dc; }
        .active-lyric,.lyric-line.active-lyric:hover { color: var(--accent-2); font-size: 18px; font-weight: 800; }
        .lyric-plain { width: 100%; color: #c6c7d0; font-size: 14px; line-height: 2; white-space: pre-wrap; text-align: center; }.lyric-badge { margin-bottom: 9px; color: #f4ca84; font-size: 11px; }
        .status-msg { padding: 35px 12px; color: var(--muted); font-size: 14px; line-height: 1.8; text-align: center; }.status-msg pre { overflow: auto; margin-top: 10px; padding: 10px; border-radius: 8px; color: #ff9999; background: #0d0d0d; direction: ltr; text-align: left; white-space: pre-wrap; }
        .library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
        .library-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
        .library-tools input[type=file] { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
        .secondary-btn,.player-control { border:1px solid var(--line); border-radius:11px; padding:9px 12px; color:var(--text); background:#ffffff08; }
        .secondary-btn:hover,.player-control:hover { border-color:#a78bfa66; background:#a78bfa16; }
        .playlist-list { max-height:360px; overflow:auto; }
        .playlist-row { display:flex; align-items:center; gap:10px; padding:9px; border-bottom:1px solid var(--line); }
        .playlist-row.current { background:#a78bfa12; }.playlist-row .song-info { cursor:pointer; }
        .playlist-remove { border:0; padding:7px; color:#ff9cac; background:transparent; }
        .player-transport { display:flex; align-items:center; justify-content:center; gap:10px; margin:5px 0 3px; }
        .player-control { min-width:40px; padding:8px 11px; }.player-control.active { color:var(--accent-2); border-color:#6ee7d866; }
        .player-control.primary { width:42px; height:42px; border:0; border-radius:50%; color:#161225; background:linear-gradient(135deg,var(--accent),#c4b5fd); font-size:17px; }
        .progress-row { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; margin:5px 0; color:var(--muted); font-size:10px; direction:ltr; }
        .progress-row input,.volume-control { width:100%; height:4px; direction:ltr; accent-color:var(--accent-2); cursor:pointer; }
        .player-extra { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 8px; }
        .volume-control { width:90px; }
        .offline-note { margin:18px 0; padding:12px 15px; border:1px solid #6ee7d833; border-radius:12px; color:var(--muted); background:#6ee7d809; font-size:12px; line-height:1.8; }
        .offline-note strong { color:var(--accent-2); }
        .connection-pill { display:flex; align-items:center; gap:7px; border-radius:99px; color:var(--muted); font-size:11px; }
        .connection-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px #8be28b77; }
        .connection-pill.offline .connection-dot { background:#ff9b72; box-shadow:0 0 10px #ff9b7277; }
        .ad-slot { min-height:76px; display:flex; align-items:center; justify-content:center; margin:26px 0 8px; border:1px dashed #ffffff16; border-radius:15px; color:#667082; background:#ffffff03; font-size:11px; letter-spacing:.4px; }
        .toast { position:fixed; z-index:30; right:50%; bottom:110px; max-width:min(90vw,520px); padding:12px 16px; border:1px solid #6ee7d855; border-radius:13px; color:var(--text); background:#17212a; box-shadow:0 12px 35px #0008; opacity:0; transform:translate(50%,12px); pointer-events:none; transition:.2s; font-size:13px; }
        .toast.visible { opacity:1; transform:translate(50%,0); }
        .debug-wrap { margin: 30px 0; color: var(--muted); }.debug-wrap summary { padding: 8px 0; cursor: pointer; font-size: 12px; }
        #debugPanel { height: 180px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: #9be39b; background: #050608; direction: ltr; text-align: left; font: 11px Consolas,monospace; white-space: pre-wrap; }
        .dbg-warn { color: #ffcc66; }.dbg-error { color: #ff7777; }.debug-actions { display:flex; gap:8px; margin-top:8px; }.debug-actions button { padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:11px; }
        .mini-player { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(180px,1fr) minmax(300px,1.5fr) minmax(190px,1fr); align-items: center; gap: 18px; padding: 11px max(24px,calc((100vw - 1320px)/2)) calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff1a; background: rgba(9,13,20,.9); backdrop-filter: blur(24px) saturate(150%); box-shadow:0 -18px 60px #0005; opacity:0; visibility:hidden; transform:translateY(115%); pointer-events:none; transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility .25s; touch-action:pan-x; }
        .mini-player.visible { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
        body.has-mini-player { padding-bottom:190px; }
        body.has-mini-player .app-shell { padding-bottom:6px; }
        .mini-player.video-mode { grid-template-columns: minmax(180px,1fr) minmax(300px,1.5fr) minmax(190px,1fr); }
        .mini-track { min-width:0; display:flex; align-items:center; gap:11px; border:0; padding:0; color:inherit; background:transparent; font:inherit; text-align:start; cursor:pointer; }.mini-track img { width:48px; height:42px; object-fit:cover; border-radius:8px; background:var(--card); }.mini-track strong,.mini-track span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mini-track strong { font-size:12px; }.mini-track span { margin-top:4px; color:var(--muted); font-size:10px; }
        .mini-actions { display:flex; justify-content:flex-end; gap:6px; }
        .mini-expand { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent-2); background:#ffffff08; font-size:16px; }
        .mini-expand:hover { border-color:#75f0d566; background:#75f0d513; }
        .custom-controls { min-width:0; }.mini-player audio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
        .custom-controls .player-transport { margin:0 0 4px; }.custom-controls .progress-row { grid-template-columns:35px 1fr 35px; margin:0; }
        .progress-row input,.volume-control { appearance:none; -webkit-appearance:none; height:5px; border-radius:99px; background:linear-gradient(90deg,#75f0d5,#bb9cff); outline:none; }
        .progress-row input::-webkit-slider-thumb,.volume-control::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:13px; height:13px; border:2px solid #f8f7ff; border-radius:50%; background:#9c8cff; box-shadow:0 0 0 4px #bb9cff22,0 2px 8px #0008; }
        .progress-row input::-moz-range-thumb,.volume-control::-moz-range-thumb { width:10px; height:10px; border:2px solid #f8f7ff; border-radius:50%; background:#9c8cff; box-shadow:0 0 0 4px #bb9cff22; }
        .player-control { transition:transform .18s,border-color .18s,background .18s; }
        .player-control:active { transform:scale(.92); }.player-control.primary { box-shadow:0 6px 20px #bb9cff44; }
        .mini-track img { box-shadow:0 4px 18px #0008; }.mini-track strong { max-width:30vw; }
        @keyframes spin { to { transform:rotate(360deg); } }
        @keyframes shimmer { to { background-position-x:-200%; } }
        @keyframes rise-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @media(max-width:950px) { .track-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.search-layout { grid-template-columns:1fr; }.player-section { position:static; }.results-list { max-height:540px; }.home-favorite-list { grid-template-columns:1fr; } }
        @media(max-width:950px) { .mini-player,.mini-player.video-mode { grid-template-columns:minmax(140px,1fr) minmax(250px,1.5fr); }.mini-actions { display:none; } }
        .settings-panel { margin-top:16px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }.setting-row h3 { font-size:16px; }.setting-row p,.setting-hint { margin-top:7px; color:var(--muted); font-size:13px; line-height:1.7; }.language-select-wrap { display:grid; gap:7px; min-width:min(240px,45%); color:var(--muted); font-size:12px; }.language-select-wrap select { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#171d29; }
        @media(max-width:620px) { body { padding:0 14px 25px; }.brand { font-size:17px; }header { height:65px; gap:8px; }.brand-mark { width:34px;height:34px; }nav { gap:0; }.nav-btn { padding:8px 7px; font-size:12px; }.search-wrap { margin:17px auto; gap:7px; }.search-submit { padding:12px 14px; }.suggestions { left:70px; }.welcome { min-height:215px; padding:25px 22px; border-radius:24px; }.track-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.home-section { padding:14px; border-radius:18px; }.home-shelf .track-card { flex-basis:68vw; max-width:245px; }.home-shelf--new .track-card { flex-basis:58vw; }.home-favorite-list { grid-template-columns:1fr; }.home-favorite-list .song-item img { width:66px; }.offline-home-note { align-items:flex-start; flex-direction:column; }.install-sheet { padding:25px 21px 21px; border-radius:23px; }.panel { padding:14px; }.song-item img { width:72px; }.library-grid { grid-template-columns:1fr; }.mini-player,.mini-player.video-mode { grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:7px 12px calc(8px + env(safe-area-inset-bottom)); }.mini-player .custom-controls { grid-column:1/-1; grid-row:2; }.mini-track img { width:39px; height:34px; }.mini-actions { display:flex; grid-column:2; grid-row:1; }.mini-actions .autoplay-toggle,.mini-actions .volume-control { display:none; }.mini-track strong { max-width:58vw; }.player-transport { gap:8px; }.visualizer-wrap { height:105px; }.video-wrap { border-radius:16px; }.video-controls { opacity:1; transform:none; gap:6px; padding-inline:8px; }.video-controls span { min-width:32px; font-size:9px; }.video-controls button { width:31px;height:31px; }.video-big-play { width:58px;height:58px; }.video-brand { top:9px;right:9px; }.connection-pill { display:none; }.setting-row { align-items:stretch; flex-direction:column; gap:14px; }.language-select-wrap { min-width:0; }.mini-player.visible { bottom:0; } }
        @media(max-width:420px) { header { height:auto; min-height:88px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:38px 36px; gap:3px 8px; padding:7px 0; }.brand { grid-area:1/1/2/2; }.library-tools { grid-area:1/2/2/3; justify-self:end; }.library-tools .secondary-btn { padding:8px 9px; font-size:11px; }nav { grid-area:2/1/3/3; width:100%; justify-content:space-between; }.nav-btn { flex:1; min-width:0; padding-inline:4px; text-align:center; }.mini-actions { gap:4px; }.mini-expand { width:34px;height:34px; } }
        @media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }