:root{--bg0:#070a0f;--bg1:#0b1220;--card1:rgba(255,255,255,.06);--card2:rgba(255,255,255,.085);--border:rgba(255,255,255,.11);--text:rgba(255,255,255,.93);--muted:rgba(255,255,255,.62);--green:#1DB954;--green2:#22C55E;--danger:#ff4d6d;--warn:#fbbf24;--ok:#22c55e;--shadow: 0 24px 90px rgba(0,0,0,.58);--radius: 22px;--focus: rgba(29,185,84,.22)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:radial-gradient(1100px 720px at 25% 0%,rgba(29,185,84,.2),transparent 55%),radial-gradient(900px 640px at 85% 12%,rgba(34,197,94,.12),transparent 55%),linear-gradient(180deg,var(--bg0),var(--bg1));overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:#1db95440}.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 14px}.shell{width:100%;max-width:1020px}.w100{width:100%}.center{text-align:center}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.justifyBetween{justify-content:space-between}.topbar{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.logo{width:40px;height:40px;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#1db954f2,#22c55ea6);box-shadow:0 0 0 6px #1db9541a,0 18px 70px #0000008c}.brand h1{font-size:18px;margin:0;letter-spacing:.2px}.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}.card{background:linear-gradient(180deg,var(--card2),var(--card1));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:-2px;background:radial-gradient(600px 220px at 30% -10%,rgba(29,185,84,.12),transparent 60%);pointer-events:none}.cardInner{padding:18px;position:relative}.h2{font-size:22px;margin:0 0 8px;letter-spacing:.2px}.muted{color:var(--muted);font-size:14px;margin:0}.hr{height:1px;background:#ffffff1a;border:none;margin:16px 0}.stack{display:grid;gap:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.label{font-size:12px;color:var(--muted);margin-bottom:6px}.input{width:100%;padding:13px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:#00000038;color:var(--text);outline:none;transition:box-shadow .15s ease,border-color .15s ease,transform .08s ease}.input:focus{border-color:#1db9548c;box-shadow:0 0 0 4px var(--focus)}.input:active{transform:translateY(1px)}.btn{padding:12px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;color:var(--text);cursor:pointer;transition:transform .06s ease,filter .15s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:hover{background:#ffffff1f;box-shadow:0 10px 30px #00000038}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.btnBlock{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btnPrimary{border:none;color:#041007;font-weight:800;letter-spacing:.2px;background:linear-gradient(135deg,var(--green),var(--green2))}.btnPrimary:hover{filter:brightness(1.03)}.btnGhost{background:transparent;border:1px solid rgba(255,255,255,.14)}.btnDanger{border:none;background:linear-gradient(135deg,#ff3b6a,#ff8a5b);font-weight:800}.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0000002e;color:var(--muted);font-size:12px}.dotOk,.dotWarn{width:9px;height:9px;border-radius:999px}.dotOk{background:var(--ok);box-shadow:0 0 0 6px #22c55e1f}.dotWarn{background:var(--danger);box-shadow:0 0 0 6px #ff4d6d1f}.list{display:grid;gap:12px}.item{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0000002e;transition:transform .12s ease,border-color .15s ease}.item:hover{transform:translateY(-2px);border-color:#1db95438}.itemTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}.itemTitle b{font-size:15px;letter-spacing:.2px}.itemMeta{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}.spinner{width:18px;height:18px;border-radius:999px;border:2px solid rgba(0,0,0,.2);border-top-color:#0000008c;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.skel{background:linear-gradient(90deg,#ffffff0f,#ffffff1f,#ffffff0f);background-size:200% 100%;animation:shimmer 1.1s ease-in-out infinite;border-radius:12px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.footer{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12.5px}.badgeMini{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0000002e}.toastWrap{position:fixed;left:14px;right:14px;bottom:14px;display:grid;gap:10px;z-index:9999;width:auto}.toast{border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#0006;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 70px #0000008c;overflow:hidden;animation:toastIn .18s ease-out both}@keyframes toastIn{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.toastInner{display:flex;gap:10px;padding:12px;align-items:flex-start}.toastContent{flex:1}.toastTitle{font-weight:800;font-size:13px;letter-spacing:.2px}.toastMsg{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35}.toastBar{height:3px;background:#ffffff1a}.toastBarFill{height:100%;width:100%;transform-origin:left;animation:toastTimer linear forwards}@keyframes toastTimer{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.toastDot{width:10px;height:10px;border-radius:999px;margin-top:3px;flex:0 0 auto}.toast--success .toastDot{background:var(--ok);box-shadow:0 0 0 6px #22c55e1f}.toast--error .toastDot{background:var(--danger);box-shadow:0 0 0 6px #ff4d6d1f}.toast--info .toastDot{background:var(--warn);box-shadow:0 0 0 6px #fbbf241f}.toast--success .toastBarFill{background:#22c55ed9}.toast--error .toastBarFill{background:#ff4d6dd9}.toast--info .toastBarFill{background:#fbbf24d9}.homeShell{width:100%}.homeHeader{display:grid;gap:12px;margin-bottom:14px}.homeTitle{min-width:0}.homeKicker{display:none}.homeH1{margin:0;font-size:18px;letter-spacing:.2px}.homeHeaderActions{width:100%}.homeGrid{display:grid;gap:14px}@media(min-width:980px){.homeHeader{grid-template-columns:1fr 280px;align-items:end}.homeGrid{grid-template-columns:1.2fr .9fr;align-items:start}}.npCover{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0000002e}.npCover--empty{display:block}.npInfo{margin-top:12px;min-width:0}.npName{font-weight:900;font-size:18px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.npArtists{margin-top:4px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.npProgress{margin-top:14px}.npBar{height:10px;border-radius:999px;background:#ffffff1a;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.npBarFill{height:100%;background:#1db954f2;width:0%;transition:width .16s linear}.npTimes{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#ffffffb3;font-variant-numeric:tabular-nums}.npState{margin-top:8px;font-size:12px;color:#ffffffb3}.npControls{margin-top:14px;display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:center}.npIcon{width:20px;height:20px;display:block}.npIconBtn{width:52px;height:46px;padding:0;justify-content:center;display:inline-flex;align-items:center}.npPlayBtn{width:100%;height:46px;justify-content:center;display:inline-flex;align-items:center;gap:10px}.npError{margin-top:10px;font-size:12px;color:#ff8a5b}.npHint{margin-top:12px}.queueHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.queueTitle{font-weight:900;font-size:16px;letter-spacing:.2px}.queueAdd{margin:10px 0 12px}.queueAddRow{display:grid;grid-template-columns:1fr;gap:10px}.queueAddInput{width:100%}.queueAddBtn{width:100%;justify-content:center}.queueList{display:grid;gap:10px;width:100%;max-width:100%}.queueItem{width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;display:grid;grid-template-columns:46px minmax(0,1fr) 56px;gap:10px;align-items:center;padding:12px;border-radius:16px;background:#0000002e;border:1px solid rgba(255,255,255,.12)}.queueImg{width:46px;height:46px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.1);background:#ffffff14}.queueImg--empty{background:#ffffff14}.queueText{min-width:0;max-width:100%}.queueName{font-weight:800;font-size:13.5px;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queueArtists{margin-top:3px;font-size:12px;color:var(--muted);min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queueDur{width:56px;text-align:right;font-size:12px;color:#ffffffb8;font-variant-numeric:tabular-nums}.queueNote{font-size:12px}.queueSearch{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#00000024}.queueSearchLabel{font-size:12px;color:var(--muted);margin-bottom:8px}.queueSearchRow{display:grid;grid-template-columns:1fr 140px;gap:10px;align-items:center}.queueSearchInput{width:100%}.queueSearchBtn{width:100%;height:46px;border-radius:14px;justify-content:center}@media(max-width:420px){.queueSearchRow{grid-template-columns:1fr}}.queueMsg{margin-top:10px;font-size:12px}.queueMsg--error{color:#ff8a5b}.queueSearchResults{margin-top:10px;display:grid;gap:10px}.queueSearchItem{grid-template-columns:46px minmax(0,1fr) 92px}.queueAddBtn{height:36px;padding:0 12px;border-radius:12px;justify-content:center;font-size:12.5px;font-weight:900}@media(min-width:900px){.wrap{padding:26px 16px}.topbar{flex-direction:row;align-items:center;gap:12px;margin-bottom:18px}.logo{width:42px;height:42px}.cardInner{padding:22px}.h2{font-size:26px}.toastWrap{left:auto;right:14px;width:min(360px,calc(100vw - 28px))}}@media(min-width:900px){.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.queueAdd{margin:10px 0 12px}.queueAddRow{display:grid;grid-template-columns:1fr 140px;gap:10px;align-items:center}.queueAddInput{width:100%}.queueAddBtn{width:100%;justify-content:center}}.queueAddOk{margin-top:8px;font-size:12px;color:#22c55ef2}.home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px 14px;text-align:center}.homeShell{width:100%;max-width:520px}.homeHeader{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:16px}.homeTitle{margin:0;font-size:18px;letter-spacing:.2px}.homeSub{margin:0;color:var(--muted);font-size:13px}.nowCard{background:linear-gradient(180deg,var(--card2),var(--card1));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;text-align:left}.nowInner{padding:16px}.cover{width:100%;aspect-ratio:1 / 1;border-radius:18px;object-fit:cover;display:block;background:#ffffff0f;box-shadow:0 10px 30px #00000073}.trackTitle{margin:12px 0 4px;font-size:18px;font-weight:900;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trackArtists{margin:0 0 12px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{width:100%;height:10px;border-radius:999px;background:#ffffff1f;overflow:hidden}.progressFill{height:100%;width:0%;background:#1db954f2;transition:width .15s linear}.timeRow{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}.playState{margin-top:10px;font-size:12px;color:var(--muted)}.controls{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.iconBtn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;color:var(--text);cursor:pointer;transition:transform .06s ease,background .2s ease,box-shadow .2s ease,opacity .15s ease;-webkit-user-select:none;user-select:none}.iconBtn:hover{background:#ffffff1f;box-shadow:0 10px 30px #00000038}.iconBtn:active{transform:translateY(1px)}.iconBtn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.playBtn{height:46px;padding:0 16px;border-radius:14px;border:none;font-weight:900;letter-spacing:.2px;background:linear-gradient(135deg,var(--green),var(--green2));color:#041007;cursor:pointer;transition:transform .06s ease,filter .15s ease,opacity .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px}.playBtn:hover{filter:brightness(1.03)}.playBtn:active{transform:translateY(1px)}.playBtn:disabled{opacity:.55;cursor:not-allowed}.homeError{margin-top:10px;font-size:12px;color:#ff8a5b}.queue{margin-top:16px;text-align:left}.queueHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.queueTitle{margin:0;font-size:16px;letter-spacing:.2px}.queueList{display:grid;gap:10px}.queueItem{display:flex;gap:10px;align-items:center;padding:10px;border-radius:16px;background:#0000002e;border:1px solid rgba(255,255,255,.1)}.queueCover{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#ffffff1a}.queueMain{flex:1;min-width:0}.queueName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}.queueArtists{opacity:.75;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queueDur{opacity:.75;font-size:12px;flex:0 0 auto}.homeActions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media(min-width:900px){.homeShell{max-width:980px}.homeGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}.nowInner{padding:18px}.trackTitle{font-size:20px}.queue{margin-top:0}.queuePanel{background:linear-gradient(180deg,var(--card2),var(--card1));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}.queuePanelInner{padding:16px}}