*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100806;color:#f8eee6;font-family:"DM Sans",system-ui,sans-serif}body{overflow-x:hidden}.app{min-height:100vh;position:relative;isolation:isolate;overflow:hidden;padding:0 22px 28px}.app:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,rgba(150,72,33,.17),transparent 40%),#100806;z-index:-5}.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(11,7,6,.48),rgba(15,7,5,.2) 45%,rgba(10,5,4,.78));z-index:-2}.grain{position:fixed;inset:0;opacity:.055;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1320px;margin:auto;position:relative;z-index:10}.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none}.brandMark{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#f2ae3d;color:#18100b;font:700 17px "Space Grotesk";box-shadow:0 0 24px rgba(242,174,61,.22)}.brand b{display:block;font:700 16px "Space Grotesk";letter-spacing:.12em}.brand small{display:block;color:#8f8178;font-size:8px;letter-spacing:.15em;margin-top:2px}.clock{font:700 25px "Space Grotesk";letter-spacing:.02em}.clock small{font:500 10px DM Sans;color:#a89a91}.topRight{justify-self:end;display:flex;align-items:center;gap:16px}.online{font-size:9px;letter-spacing:.1em;color:#aaa099}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#30dc78;box-shadow:0 0 10px #30dc78;margin-right:6px}.driver{border:1px solid rgba(255,255,255,.15);background:rgba(15,10,8,.55);color:#eee;border-radius:999px;padding:9px 13px;display:flex;align-items:center;gap:7px;cursor:pointer}.deck{width:min(830px,92vw);height:526px;margin:2px auto 0;border:1px solid rgba(255,255,255,.15);border-radius:31px;background:linear-gradient(180deg,rgba(43,27,22,.84),rgba(35,17,11,.88));backdrop-filter:blur(24px);box-shadow:0 28px 90px rgba(0,0,0,.34);overflow:hidden}.tabs{display:flex;gap:28px;align-items:center;padding:18px 25px 8px;overflow:auto;white-space:nowrap;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{border:0;background:none;color:#9e928a;font:700 11px "Space Grotesk";letter-spacing:.14em;cursor:pointer;padding:5px 0}.tab.active{color:#e9a653}.listTop{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 25px}.eyebrow{display:inline-block;background:#6a4935;color:#ffd18d;border-radius:999px;padding:7px 13px;font:700 11px "Space Grotesk";letter-spacing:.15em}.trackCount{font-size:11px;color:#968a82;margin-left:14px}.listTools{display:flex;gap:9px;align-items:center}.iconBtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,166,59,.35);background:rgba(244,166,59,.12);color:#f4b35e;font-size:20px;cursor:pointer}.languagePill{display:flex;border-radius:999px;background:rgba(255,255,255,.07);padding:3px}.languagePill button{border:0;background:none;color:#8e8781;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;cursor:pointer}.languagePill .selectedLang{background:#eee7df;color:#37261e}.songs{height:365px;overflow:auto;padding:0 12px 8px;scrollbar-color:#806a5d transparent}.song{display:grid;grid-template-columns:38px 52px 1fr 35px;align-items:center;gap:10px;height:73px;border-radius:20px;padding:7px 12px;cursor:pointer;transition:background .2s,transform .2s}.song:hover{background:rgba(255,255,255,.045)}.song.active{background:rgba(133,111,98,.38)}.number{color:#766c66;font-size:13px;text-align:center}.song.active .number{color:#f1a34d;font-weight:800}.art{width:50px;height:50px;border-radius:11px;overflow:hidden;background:linear-gradient(145deg,#8c492e,#2a1811);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.art img{width:100%;height:100%;object-fit:cover}.songTitle{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.songArtist{display:block;color:#9b918a;font-size:11px;margin-top:3px}.playingBars{color:#f2a24a;font-weight:900;letter-spacing:-2px}.more{color:#8e837c}.deckFooter{height:65px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:12px;padding:10px 25px}.shareBtn{width:44px;height:44px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#ddd;border-radius:12px;font-size:20px}.deckFooter b{display:block;font-size:14px}.deckFooter small{display:block;color:#857a72;font-size:10px;margin-top:3px}.player{width:min(830px,92vw);margin:15px auto 0;border:1px solid rgba(255,255,255,.18);border-radius:32px;background:linear-gradient(100deg,rgba(27,14,9,.93),rgba(56,26,13,.86));backdrop-filter:blur(24px);padding:11px 13px;display:grid;grid-template-columns:75px 1fr auto;align-items:center;gap:14px;box-shadow:0 22px 70px rgba(0,0,0,.4);transition:.3s}.cover{width:66px;height:66px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#e4b071,#703a1f);display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 5px rgba(255,255,255,.04);font-size:28px}.cover img{width:100%;height:100%;object-fit:cover}.meta{min-width:0}.meta strong{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta>span{display:block;color:#b1a29a;font-size:11px;margin-top:2px}.progressRow{display:grid;grid-template-columns:32px 1fr 35px;gap:8px;align-items:center;color:#a59890;font-size:9px;margin-top:10px}.progressRow input{accent-color:#f2a24a;width:100%;height:3px}.controls{display:flex;align-items:center;gap:12px}.controls button{border:0;background:none;color:#ddd;font-size:15px;cursor:pointer;min-width:22px;transition:transform .15s,color .15s}.controls button:hover{transform:scale(1.12);color:#f2aa50}.controls .playBtn{width:58px;height:58px;border-radius:50%;background:#fff;color:#18110d;font-size:19px}.controls #closePlayer{width:50px;height:50px;border:2px solid #f0a24a;border-radius:50%;font-size:25px}.shortcutBar{width:min(830px,92vw);margin:14px auto 0;display:flex;justify-content:center;gap:13px;flex-wrap:wrap;color:#8f837b;font-size:10px;letter-spacing:.11em}.shortcutBar kbd{display:inline-grid;place-items:center;min-width:25px;height:23px;padding:0 7px;margin-right:5px;border:1px solid rgba(255,255,255,.15);border-radius:7px;background:rgba(255,255,255,.06);color:#ddd;font-weight:800;letter-spacing:0}.hiddenYoutube{position:fixed;left:-10000px;top:-10000px;width:320px;height:180px;overflow:hidden;opacity:.01;pointer-events:none}.hiddenYoutube iframe{width:320px;height:180px;border:0;pointer-events:none;display:block}#bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4;opacity:.62;filter:saturate(.75) contrast(1.04);transition:opacity .4s ease}
@media(max-width:800px){.app{padding:0 10px 20px}.topbar{height:62px;grid-template-columns:1fr auto}.clock{display:none}.topRight{gap:7px}.online{display:none}.driver span{display:none}.driver{padding:9px}.deck{width:96vw;height:515px;border-radius:24px}.tabs{gap:20px;padding:16px 17px 7px}.tab{font-size:10px}.listTop{padding:0 17px}.songs{height:362px}.song{grid-template-columns:25px 50px 1fr 22px;height:70px;padding:7px 8px}.songTitle{font-size:14px}.player{width:96vw;border-radius:24px;grid-template-columns:58px 1fr;gap:10px;padding:9px}.cover{width:54px;height:54px}.controls{grid-column:1/-1;justify-content:center;gap:17px;padding-bottom:2px}.controls .playBtn{width:52px;height:52px}.shortcutBar{display:none}.deckFooter{padding:9px 17px}}
@media(max-width:480px){.brand b{font-size:14px}.brandMark{width:31px;height:31px}.brand small{font-size:7px}.deck{height:505px}.trackCount{margin-left:8px;font-size:9px}.iconBtn{width:34px;height:34px}.languagePill button{padding:6px 8px}.song{grid-template-columns:20px 46px 1fr 15px;gap:7px}.art{width:46px;height:46px}.songTitle{font-size:13px}.songArtist{font-size:10px}.player{margin-top:11px}.meta strong{font-size:14px}.progressRow{margin-top:7px}}

/* Queue / library drawer — opens from the queue button like the supplied reference */
.deck{display:none}
.queueBackdrop{position:fixed;inset:0;background:rgba(5,3,2,.46);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:40}
.queueBackdrop.open{opacity:1;pointer-events:auto}
.queuePanel{position:fixed;left:50%;top:72px;transform:translate(-50%,-18px) scale(.985);width:min(830px,calc(100vw - 28px));height:min(535px,calc(100vh - 180px));border:1px solid rgba(255,255,255,.16);border-radius:31px;background:linear-gradient(180deg,rgba(48,30,24,.97),rgba(39,20,13,.98));box-shadow:0 30px 100px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(28px);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;overflow:hidden}
.queuePanel.open{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.queueHead{display:flex;align-items:center;justify-content:space-between;padding:20px 25px 7px}
.queueEyebrow{font:700 10px "Space Grotesk";letter-spacing:.2em;color:#b9a69c;text-transform:uppercase}
.queueHead h2{margin:6px 0 0;font:700 21px "Space Grotesk";letter-spacing:.01em}
.queueClose{width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,162,74,.4);background:rgba(242,162,74,.08);color:#f1dfd4;font-size:24px;cursor:pointer}
.queueTabs{display:flex;gap:25px;overflow:auto;white-space:nowrap;padding:8px 25px 7px;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.05)}
.queueTabs::-webkit-scrollbar{display:none}
.queueTabs button{border:0;background:none;color:#91857d;font:700 10px "Space Grotesk";letter-spacing:.13em;padding:6px 0;cursor:pointer}
.queueTabs button{transition:color .2s ease,transform .2s ease}.queueTabs button:hover{color:#e8b16c;transform:translateY(-1px)}.queueTabs button.active{color:#efad61}
.queueMeta{height:40px;padding:0 25px;display:flex;align-items:center;gap:12px;color:#958981;font-size:10px}
.queueMeta span:first-child{color:#f0c08b;font-weight:700}
.queueSongs{height:calc(100% - 184px);overflow:auto;padding:0 12px 8px;scrollbar-color:#806a5d transparent}
.queueSong{height:70px;border-radius:19px;display:grid;grid-template-columns:38px 50px 1fr 30px;gap:10px;align-items:center;padding:7px 12px;cursor:pointer;transition:.16s ease}
.queueSong:hover{background:rgba(255,255,255,.05);transform:translateX(2px)}
.queueSong.active{background:rgba(137,114,100,.38);box-shadow:inset 2px 0 #e9a451}
.qNum{font-size:12px;color:#756a64;text-align:center}
.queueSong.active .qNum{color:#efa04c;font-weight:900}
.queueSong img{width:50px;height:50px;border-radius:11px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.qText{min-width:0}.qText b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qText small{display:block;color:#968a82;font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qPlay{font-size:22px;color:#a99b93;text-align:center}.queueSong.active .qPlay{color:#f2a34e;font-size:13px}
.queueFoot{height:66px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:9px 20px}
.queueFoot button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#d8ccc4;border-radius:12px;padding:10px 14px;font-size:10px;font-weight:700;cursor:pointer}.queueFoot button:hover{border-color:rgba(242,164,76,.45);color:#f1ad5d}.queueFoot #queueBgm{border-color:rgba(242,164,76,.32);color:#f0b060;background:rgba(242,164,76,.08)}.queueFoot #queueBgm:hover{background:rgba(242,164,76,.14);transform:translateY(-1px)}
.controls #queue{font-size:18px}
@media(max-width:800px){.queuePanel{top:58px;width:96vw;height:min(560px,calc(100vh - 90px));border-radius:24px}.queueHead{padding:16px 17px 6px}.queueTabs{padding-left:17px;padding-right:17px;gap:19px}.queueMeta{padding:0 17px}.queueSongs{height:calc(100% - 180px);padding:0 8px 7px}.queueSong{height:67px;border-radius:17px;grid-template-columns:26px 46px 1fr 24px;padding:7px 8px;gap:7px}.queueSong img{width:46px;height:46px}.qText b{font-size:13px}.queueFoot{padding:9px 12px}.queueFoot button{padding:9px 11px}}
@media(max-width:480px){.queuePanel{top:55px;width:calc(100vw - 14px);height:calc(100vh - 70px)}.queueHead h2{font-size:18px}.queueTabs{gap:16px}.queueTabs button{font-size:9px}.queueMeta{font-size:9px}.queueSong{grid-template-columns:22px 44px 1fr 20px}.queueSong img{width:44px;height:44px}.qText b{font-size:12px}.qText small{font-size:9px}}