*,*:before,*:after{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:#0b0b0c;color:#e6e6e9;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}.container{max-width:1120px;margin:0 auto;padding:0 16px}.icon-btn,.controls-row .play-btn.lg,.row.controls .play-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:9999px;color:#e6e6e9;background:transparent;transition:background-color .15s ease,color .15s ease,transform .1s ease}.icon-btn:hover,.controls-row .play-btn.lg:hover,.row.controls .play-btn:hover{background:#1a1a1d}.icon-btn:active,.controls-row .play-btn.lg:active,.row.controls .play-btn:active{transform:translateY(1px)}.icon-btn lucide-icon,.controls-row .play-btn.lg lucide-icon,.row.controls .play-btn lucide-icon{width:18px;height:18px}lucide-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}lucide-icon svg{display:block}*{scrollbar-width:thin;scrollbar-color:#8b0f0f #1a1a1d}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#1a1a1d;border-radius:9999px}*::-webkit-scrollbar-thumb{background-color:#8b0f0f;border-radius:9999px;border:2px solid #1a1a1d}*::-webkit-scrollbar-thumb:hover{background-color:#a71212}*::-webkit-scrollbar-thumb:active{background-color:#6f0c0c}*::-webkit-scrollbar-corner{background:transparent}.player{position:fixed;left:0;right:0;bottom:0;background:#121214;border-top:1px solid #2a2a2e;padding:8px 12px;z-index:1000;display:grid;grid-template-columns:1fr;row-gap:8px}.row{display:flex;align-items:center;gap:8px}@media (min-width: 768px){.row{gap:12px}}.row.track-info{min-width:0}.row.track-info img{width:56px;height:56px;border-radius:10px;object-fit:cover}.row.track-info .text{min-width:0}.row.track-info .title{margin:0;color:#e6e6e9;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row.track-info .artist{color:#a9a9ad;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row.progress{margin-top:8px}.row.progress .time{color:#a9a9ad;font-size:12px}.row.controls{justify-content:center;gap:8px}.row.controls .play-btn{width:40px;height:40px;border-radius:9999px;background:#8b0f0f;color:#e6e6e9}.row.controls .play-btn:hover{background:#a71212}.left{display:flex;align-items:center;gap:12px;min-width:0}.left img{width:56px;height:56px;border-radius:10px;object-fit:cover}.left .title{margin:0;color:#e6e6e9}.left .artist{color:#a9a9ad;font-size:14px}.center{display:flex;flex-direction:column;align-items:center;gap:8px}.controls-row{display:inline-flex;align-items:center;gap:8px}@media (min-width: 768px){.controls-row{gap:12px}}.controls-row .play-btn.lg{width:44px;height:44px;background:#8b0f0f}.controls-row .play-btn.lg:hover{background:#a71212}.progress-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%}.progress-row .time{color:#a9a9ad;font-size:12px}.right{display:none;align-items:center;justify-content:flex-end;gap:-2}.right lucide-icon{width:16px;height:16px;color:#a9a9ad}.player input[type=range]{cursor:pointer;-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;border:none}.player input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(#8b0f0f,#8b0f0f) 0/var(--progress, 0%) 100% no-repeat,#000;border-radius:9999px}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#8b0f0f;border-radius:9999px;margin-top:-4px}.player input[type=range]::-moz-range-track{height:6px;background:#000;border-radius:9999px}.player input[type=range]::-moz-range-progress{height:6px;background:#8b0f0f;border-radius:9999px 0 0 9999px}.player input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#8b0f0f;border-radius:9999px}@media (min-width: -md){.player{grid-template-columns:1fr 1.2fr 1fr;align-items:center;column-gap:-4}.right{display:inline-flex}}.player-header{position:absolute;top:-40px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top-left-radius:8px;border-top-right-radius:8px}.player-header h4{margin:0;font-size:14px;font-weight:500;color:#ffffffb3}.player-header .header-actions{display:inline-flex;align-items:center;gap:8px}.player-header .close-btn,.player-header .expand-btn{background:none;border:none;color:#ffffffb3;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.player-header .close-btn:hover,.player-header .expand-btn:hover{color:#ffffffe6;background:#ffffff1a}.player-header .close-btn lucide-icon,.player-header .expand-btn lucide-icon{width:16px;height:16px}.default{color:#e6e6e9}.active{color:#8b0f0f}.player-overlay{position:fixed;inset:0;z-index:2000;background:#121214;color:#e6e6e9;display:flex;flex-direction:column;transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease}.player-overlay.open{transform:translateY(0);opacity:1}.player-overlay .overlay-header{display:flex;align-items:center;gap:8px;padding:12px 16px;position:sticky;top:0;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #2a2a2e}.player-overlay .overlay-header .spacer{flex:1 1 auto}.player-overlay .overlay-content{flex:1 1 auto;padding:16px;overflow:auto;display:grid;grid-template-columns:1fr;gap:24px}.player-overlay .overlay-controls{position:sticky;top:0;z-index:5;background:linear-gradient(#0009,#0006);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #2a2a2e;border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:center;flex-direction:column;height:auto}.player-overlay .cover{display:flex;align-items:center;justify-content:center}.player-overlay .cover img{width:min(80vw,360px);height:min(80vw,360px);max-width:100%;border-radius:14px;object-fit:cover;box-shadow:0 10px 30px #0006}.player-overlay .meta{max-width:900px;margin:0 auto;text-align:center}.player-overlay .meta .title{margin:0 0 4px;font-size:clamp(24px,4vw,36px)}.player-overlay .meta .artist{margin:0 0 12px;color:#a9a9ad}.player-overlay .meta .description{color:#e6e6e9}.player-overlay .lyrics{max-width:900px;margin:0 auto;padding:12px;background:#1a1a1d;border:1px solid #2a2a2e;border-radius:10px}.player-overlay .lyrics h3{margin-top:0}.player-overlay .lyrics-text{white-space:pre-wrap;line-height:1.8;font-size:clamp(14px,2.2vw,18px);letter-spacing:.2px;word-wrap:break-word;overflow-wrap:anywhere}@media (min-width: -md){.player-overlay .overlay-content{grid-template-columns:1fr 1.2fr;align-items:start}}.player-overlay input[type=range]{cursor:pointer;-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;border:none}.player-overlay input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(#8b0f0f,#8b0f0f) 0/var(--progress, 0%) 100% no-repeat,#000;border-radius:9999px}.player-overlay input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#8b0f0f;border-radius:9999px;margin-top:-4px}.player-overlay input[type=range]::-moz-range-track{height:6px;background:#000;border-radius:9999px}.player-overlay input[type=range]::-moz-range-progress{height:6px;background:#8b0f0f;border-radius:9999px 0 0 9999px}.player-overlay input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#8b0f0f;border-radius:9999px}
