:root{--bg: #05080f;--card: #0c1220;--border: #1b2338;--purple: #a855f7;--purple-dark: #6d28d9;--text: #e5e7eb;--muted: #94a3b8;--playlist-width: 280px}*{box-sizing:border-box;font-family:Inter,system-ui,sans-serif;color:#fff}body{display:flex;flex-direction:column;background:radial-gradient(circle at top,#0b1020,#02040a)}.app{flex:1;display:flex;flex-direction:column;width:100%;padding:16px 12px;box-sizing:border-box;min-height:100vh}.top-header{text-align:center;margin-bottom:24px;flex-shrink:0}.logo-circle{width:56px;height:56px;background:linear-gradient(135deg,#9333ea,#d946ef);border-radius:50%;margin:auto;display:grid;place-items:center;font-size:24px}.logo h1{margin:12px 0 4px;color:#fff}.logo span{color:var(--muted);font-size:14px}.layout{flex:1;display:grid;grid-template-columns:1fr 360px;gap:24px;width:100%;overflow:hidden;max-width:none}.player-card{flex-shrink:0;margin-bottom:32px;position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#22134a,#0c1022);border-radius:16px;padding:24px;border:1px solid var(--border);box-shadow:0 8px 32px #00000080}.side-panel{flex:1;display:flex;flex-direction:column;gap:24px;min-height:0}.artwork{width:250px;height:250px;margin:0 auto 24px;border-radius:16px;background:url(/artwork.jpg) center/cover no-repeat;background-size:cover;background-position:center center;background-repeat:no-repeat;box-shadow:0 8px 24px #0006;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;transition:transform .3s ease}.artwork:hover{transform:scale(1.02)}.artwork[style*=backgroundImage]{background-size:cover!important;background-position:center center!important}.artwork img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.artwork:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.3));border-radius:16px;pointer-events:none}.player-card h2{color:#fff;margin:-16px 0 10px;font-size:1em;text-align:center}.player-card p{margin:4px 0 8px;color:var(--muted)}.tag{background:#2e1065;padding:4px 10px;border-radius:999px;font-size:12px}.timeline{display:flex;align-items:center;gap:12px;margin:0 22px;color:var(--muted)}.progress-bar{flex:1;height:4px;background:#1e293b;border-radius:999px}.controls button{background:none;border:none;color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:all .2s ease;opacity:.9}.controls button:hover{opacity:1;transform:scale(1.1);background:#a855f726}.controls .play{width:80px;height:80px;font-size:36px;background:linear-gradient(135deg,var(--purple),var(--purple-dark));box-shadow:0 6px 20px #a855f766;border-radius:50%}.controls .play:hover{transform:scale(1.08);box-shadow:0 8px 25px #a855f780}.controls button:not(.play){width:56px;height:56px;font-size:28px;background:#ffffff0d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%}.volume{display:flex;gap:10px;margin-top:24px;color:var(--muted);justify-content:center}.side-panel{gap:5px}.playlist{flex:1;overflow-y:auto;padding-right:8px}.track{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:8px;margin-top:8px}.track.active{background:#2e1065}.track-play{background:var(--purple);width:28px;height:28px;display:grid;place-items:center;border-radius:6px}.track small{color:var(--muted)}.duration{color:#666;font-size:1.3em;font-family:monospace;margin-left:16px;min-width:80px;text-align:right}.refresh{background:none;border:none;color:var(--muted);text-align:left}.title{margin-top:5px;font-size:17px;text-align:center}.filter,.playlist{width:var(--playlist-width);max-width:var(--playlist-width);margin:0 auto 24px}.filter h3{font-size:16px;margin:0 0 8px;color:var(--text);opacity:.9}.filter select{-webkit-appearance:base-select;appearance:base-select;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 40px 12px 16px;font-size:15px;width:100%;max-width:280px;box-shadow:0 2px 8px #0000004d;cursor:pointer}.filter select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.filter select::picker(select){background:var(--card);color:var(--text);border-radius:12px;box-shadow:0 8px 32px #00000080;padding:8px 0}.filter select option:hover,.filter select option:active{background:#a855f726}.filter select option{background:var(--card);color:var(--text);padding:12px 16px}@supports not (appearance: base-select){.filter select{-webkit-appearance:none;appearance:none}}#root{min-height:100vh;display:flex;flex-direction:column}.playlist .track{width:100%;padding:4px 0;margin:2px 0;border-radius:12px;background:#ffffff08;border:1px solid var(--border);display:flex;align-items:center;gap:14px;transition:all .2s ease}.playlist .track:hover{background:#a855f714;border-color:var(--purple)}.playlist .track.active{background:#2e1065;border-color:var(--purple);box-shadow:0 0 12px #a855f733}.playlist .track-play{width:38px;height:38px;background:var(--purple);border-radius:50%;display:grid;place-items:center;font-size:15px;flex-shrink:0}@media(max-width:968px){.layout{grid-template-columns:1fr;gap:0}.player-card{margin-bottom:24px;border-radius:16px;position:relative;top:auto}.app{padding:12px 8px}.controls{gap:50px;display:flex;align-items:center;justify-content:center}.controls button:not(.play){width:50px;height:50px;font-size:20px}.controls .play{width:68px;height:68px;font-size:30px}.filter select{max-width:240px;font-size:15px;padding:12px 16px}.player-card,.side-panel,.playlist{width:100%!important;max-width:none!important;margin-left:auto;margin-right:auto}html,body{height:auto;min-height:100vh;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;background:radial-gradient(circle at top,#0b1020,#02040a);width:100%;max-width:100%}.player-card{box-shadow:0 4px 16px #0000004d}}@media(max-width:480px){.app{padding:16px}.top-header{margin-bottom:24px}.logo-circle{width:48px;height:48px;font-size:20px}h1{font-size:28px}.artwork{width:220px;height:220px;margin:0 auto 20px}}.player-card,.filter,.playlist{margin-left:0;margin-right:0;padding-left:10px;padding-right:10px;width:calc(100% + 16px)}.custom-select-wrapper{position:relative;width:100%;max-width:280px;margin:0 auto}.custom-select-button{width:100%;padding:12px 40px 12px 16px;background:#8307fabf;color:var(--text);border:1px solid var(--border);border-radius:12px;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.custom-select-button:hover{border-color:var(--purple);box-shadow:0 4px 12px #a855f733}.arrow{font-size:12px;opacity:.7}.custom-select-options{background:#6308bf;border:1px solid var(--border);border-radius:12px;box-shadow:0 -8px 32px #00000080;list-style:none;padding:8px 0;overflow-y:auto}.custom-select-button.open .arrow{transform:rotate(180deg)}.custom-select-button.open{border-bottom-left-radius:0;border-bottom-right-radius:0}.option{padding:12px 16px;cursor:pointer;color:var(--text)}.option:hover,.option.selected{background:#a855f726}.favorite-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 20px}.favorite-controls button{font-size:1.6rem;transition:transform .2s}.favorite-controls button:hover{transform:scale(1.15)}