:root{color:#f7f7f8;background:#090a0d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button{font:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#app{min-height:100vh;position:relative;isolation:isolate;background:radial-gradient(circle at 10% 0%,#252834 0,#0d0e13 36%,#07080a 75%)}.ambient{position:fixed;inset:-25%;z-index:-1;background-position:15% 20%;background-size:48%;background-repeat:no-repeat;filter:blur(90px) saturate(1.25);opacity:.18;transition:background-image .5s ease}.layout{width:min(1240px,100%);min-height:100vh;margin:auto;padding:26px 34px 34px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);grid-template-rows:auto 1fr;gap:28px}header{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;min-height:22px}.connection{display:flex;gap:8px;align-items:center;color:#8b8e99;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.connection i{width:7px;height:7px;border-radius:50%;background:#585b65;box-shadow:0 0 0 4px #585b651f}.connection i.online{background:#c7ff4a;box-shadow:0 0 0 4px #c7ff4a1f,0 0 18px #c7ff4a73}.player-card{min-width:0;min-height:590px;overflow:hidden;display:grid;grid-template-columns:minmax(270px,.85fr) minmax(300px,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(20px,4vw,56px);border:1px solid rgba(255,255,255,.075);border-radius:30px;background:linear-gradient(145deg,#fff1,#ffffff05);box-shadow:0 34px 80px #00000047;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}.cover-wrap{width:100%;aspect-ratio:1;position:relative;overflow:hidden;border-radius:22px;background:#15171d;box-shadow:0 30px 65px #00000073}.cover-wrap img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .35s ease}.cover-wrap img.visible{opacity:1}.cover-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#3e424c;background:radial-gradient(circle at 35% 25%,#272a34,#121318 70%)}.cover-placeholder svg{width:25%;height:25%}.cache-badge{position:absolute;right:13px;bottom:13px;z-index:2;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:99px;color:#dfe2e7;background:#050608a8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:0;transform:translateY(5px);transition:.25s ease}.cache-badge.visible{opacity:1;transform:none}.track-panel{width:100%;max-width:100%;min-width:0;overflow:hidden}.eyebrow{margin-bottom:15px;color:#c7ff4a;font-size:11px;font-weight:700;letter-spacing:.18em}h1{max-width:12ch;margin:0 0 12px;font-size:clamp(31px,4vw,58px);line-height:.98;letter-spacing:-.055em;overflow-wrap:anywhere}.artist{margin:0 0 5px;color:#c7c9cf;font-size:clamp(16px,1.6vw,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album{min-height:20px;margin:0;color:#6f727c;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-block{width:100%;max-width:100%;min-width:0;margin-top:46px;overflow:hidden}.progress-track{width:100%;max-width:100%;height:4px;overflow:hidden;background:#ffffff1f;border-radius:9px}.progress-fill{height:100%;width:0;background:#c7ff4a;border-radius:inherit;box-shadow:0 0 14px #c7ff4a73}.times{display:flex;justify-content:space-between;margin-top:9px;color:#696c76;font-variant-numeric:tabular-nums;font-size:11px}.controls{display:grid;grid-template-columns:repeat(5,52px);gap:9px;align-items:center;justify-content:center;margin-top:25px}.controls button{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;color:#b8bbc2;background:transparent;cursor:pointer;transition:color .18s,background .18s,transform .18s}.controls button:hover{color:#fff;background:#ffffff12;transform:translateY(-2px)}.controls button:active{transform:scale(.94)}.controls button.primary{width:58px;height:58px;margin:0 -3px;color:#0a0b0d;background:#f5f5f6;box-shadow:0 13px 30px #0000004d}.controls button.primary:hover{color:#0a0b0d;background:#c7ff4a}.controls button:first-child{color:#c7ff4a}.queue-panel{min-height:0;padding:25px 10px 15px 4px}.queue-heading{display:flex;justify-content:space-between;align-items:end;padding:0 11px 18px;border-bottom:1px solid rgba(255,255,255,.07)}.queue-heading span{color:#6d707a;font-size:10px;letter-spacing:.16em}.queue-heading>span{padding-bottom:2px;letter-spacing:.06em;font-variant-numeric:tabular-nums}h2{margin:3px 0 0;font-size:23px;letter-spacing:-.035em}.queue{max-height:540px;overflow:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:#383b44 transparent}.queue-item{display:grid;grid-template-columns:24px 43px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:64px;padding:8px 10px;border-radius:13px;transition:background .15s}.queue-item:hover{background:#ffffff0b}.queue-number{color:#555862;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}.mini-cover{display:grid;place-items:center;width:43px;height:43px;overflow:hidden;border-radius:8px;color:#555963;background:#191b21}.mini-cover img{width:100%;height:100%;object-fit:cover}.mini-cover svg{width:18px}.queue-meta{min-width:0;display:flex;flex-direction:column;gap:3px}.queue-meta strong,.queue-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-meta strong{color:#dddfe3;font-size:13px;font-weight:600}.queue-meta span{color:#6e717a;font-size:11px}.queue-time{display:flex;align-items:center;gap:7px;color:#646771;font-size:10px;font-variant-numeric:tabular-nums}.queue-time i{width:5px;height:5px;background:#c7ff4a;border-radius:50%}.empty{padding:34px 14px;color:#666974;text-align:center;font-size:13px;line-height:1.5}#toast{position:fixed;z-index:10;left:50%;bottom:28px;max-width:min(440px,calc(100% - 30px));padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:11px;color:#e7e8eb;background:#191b22f5;box-shadow:0 15px 45px #00000059;font-size:13px;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:.2s ease}#toast.visible{opacity:1;transform:translate(-50%)}.loading-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;color:#8d9099;font-size:13px}.loader{width:26px;height:26px;border:2px solid #30333b;border-top-color:#c7ff4a;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding:18px;gap:18px}.player-card{min-height:auto;grid-template-columns:minmax(0,1fr);gap:28px;padding:24px;border-radius:24px}.cover-wrap{width:min(100%,360px);margin:auto}.track-panel{width:min(100%,560px);margin:auto}h1{max-width:none;font-size:clamp(32px,7vw,46px)}.progress-block{margin-top:30px}.controls{grid-template-columns:repeat(4,55px)}.control-spacer{display:none}.queue-panel{padding:10px 0}.queue{max-height:360px}}@media(max-width:610px){.layout{padding:12px;gap:12px}header{min-height:18px;padding-right:4px}.player-card{gap:22px;padding:16px;border-radius:20px}.cover-wrap{width:min(100%,310px);border-radius:17px}h1{max-width:none;font-size:34px}.artist{font-size:16px}.queue-panel{min-height:280px}}@media(max-width:390px){.layout{padding:9px}.player-card{padding:13px}h1{font-size:29px}.controls{grid-template-columns:repeat(4,48px);gap:5px}.controls button{width:48px;height:48px}.controls button.primary{width:52px;height:52px;margin:0 -2px}.queue-item{grid-template-columns:18px 39px minmax(0,1fr) auto;gap:8px;padding-inline:5px}.mini-cover{width:39px;height:39px}}