:root{--bg:#0a0713;--bg2:#120b21;--panel:#170f2b;--panel2:#1e1436;--border:#2c1f4d;--border2:#3a2a63;--txt:#f3edff;--muted:#a99fc7;--dim:#7a6f9c;--primary:#b026ff;--primary2:#7b2ff7;--accent:#ff2d92;--accent2:#00e5ff;--gold:#ffd23f;--good:#2ee6a0;--warn:#ffb02e;--bad:#ff4d6d;--grad:linear-gradient(135deg,#b026ff 0%,#ff2d92 55%,#ff8a3d 100%);--grad2:linear-gradient(135deg,#7b2ff7,#00e5ff);--glow:0 0 40px rgba(176,38,255,.35);--radius:18px;--radius-sm:12px;--safe-b:env(safe-area-inset-bottom,0px);--font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:var(--font);color:var(--txt);background:radial-gradient(1200px 600px at 80% -10%,rgba(176,38,255,.18),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(255,45,146,.16),transparent 55%),var(--bg);min-height:100dvh;overflow-x:hidden;line-height:1.5}img{max-width:100%;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{color:var(--accent2);text-decoration:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}#root{display:flex;flex-direction:column;min-height:100dvh}.screen{flex:1;padding:16px 16px calc(96px + var(--safe-b));max-width:1180px;margin:0 auto;width:100%;animation:fade .35s ease}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.4}}@keyframes slideup{0%{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}.hidden{display:none!important}.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(180deg,#0a0713eb,#0a07138c);border-bottom:1px solid var(--border)}.logo{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer}.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--glow);font-size:18px}.logo b{font-size:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.logo small{display:block;font-size:10px;color:var(--dim);font-weight:600;letter-spacing:2px;margin-top:-2px}.topbar .spacer{flex:1}.userchip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--border);border-radius:999px;background:var(--panel);cursor:pointer;transition:.2s}.userchip:hover{border-color:var(--primary)}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}.userchip small{color:var(--muted);font-size:12px}.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;justify-content:space-around;padding:8px 6px calc(8px + var(--safe-b));gap:2px;background:linear-gradient(0deg,#0a0713fa,#0a0713d1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border)}.navbtn{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:14px;color:var(--dim);font-size:10.5px;font-weight:600;transition:.18s}.navbtn .ic{font-size:20px;line-height:1}.navbtn.active{color:var(--txt);background:#b026ff24}.navbtn.active .ic{filter:drop-shadow(0 0 10px rgba(176,38,255,.7))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;background:var(--panel2);border:1px solid var(--border2);transition:.18s;color:var(--txt);white-space:nowrap}.btn:hover{border-color:var(--primary);transform:translateY(-1px)}.btn.primary{background:var(--grad);border:none;box-shadow:0 6px 24px #b026ff59}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{background:transparent}.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}.btn.icon{padding:10px;width:44px;height:44px;border-radius:12px}.btn.block{width:100%}.btn.danger{border-color:var(--bad);color:var(--bad)}.btn.danger:hover{background:#ff4d6d1f}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.panel{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--border);border-radius:var(--radius);padding:18px}.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:15px;font-weight:800;color:var(--txt)}.section-title .line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#b026ff29;color:#e6cbff;border:1px solid var(--border2)}.pill.g{background:#2ee6a024;color:#8ff5cf;border-color:#215c48}.pill.gold{background:#ffd23f24;color:var(--gold);border-color:#6b5a1e}.hero{position:relative;border-radius:var(--radius);overflow:hidden;padding:30px 22px;background:radial-gradient(600px 300px at 100% 0,rgba(255,45,146,.3),transparent 60%),linear-gradient(150deg,#231147,#12091f);border:1px solid var(--border2)}.hero h1{font-size:clamp(24px,6vw,40px);line-height:1.05;margin:12px 0 8px}.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);max-width:560px}.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.mode-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}.mode-card{position:relative;padding:20px;border-radius:var(--radius);cursor:pointer;overflow:hidden;border:1px solid var(--border);background:linear-gradient(160deg,var(--panel2),var(--bg2));transition:.2s}.mode-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--glow)}.mode-card .emoji{font-size:34px;margin-bottom:8px}.mode-card h3{font-size:18px;margin-bottom:4px}.mode-card p{color:var(--muted);font-size:13px}.mode-card .go{position:absolute;top:18px;right:18px;color:var(--dim);font-size:20px;transition:.2s}.mode-card:hover .go{color:var(--accent);transform:translate(3px)}.searchbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}.input{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--border)}.input input{background:transparent;border:none;outline:none;width:100%}.input input::placeholder{color:var(--dim)}select.sel,.field select{padding:11px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--border);outline:none}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.chip{padding:7px 13px;border-radius:999px;background:var(--panel);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--muted);transition:.15s}.chip.active{background:var(--grad);color:#fff;border:none}.songlist{display:grid;gap:10px}.song{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--border);transition:.15s;cursor:pointer}.song:hover{border-color:var(--primary);background:var(--panel2)}.cover{width:52px;height:52px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:22px;color:#fff;font-weight:800}.song .meta{flex:1;min-width:0}.song .meta b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song .meta small{color:var(--muted);font-size:12px}.song .tags{display:flex;gap:6px;margin-top:3px;flex-wrap:wrap}.tag{font-size:10px;padding:2px 7px;border-radius:6px;background:var(--panel2);color:var(--dim);border:1px solid var(--border)}.song .actions{display:flex;gap:6px;flex:none;align-items:center}.dur{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}.empty{text-align:center;padding:48px 20px;color:var(--muted)}.empty .big{font-size:46px;margin-bottom:10px;opacity:.8}.empty b{font-size:16px;color:var(--txt)}.loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--muted)}.spinner{width:26px;height:26px;border:3px solid var(--border2);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.player-two{display:grid;grid-template-columns:1fr;gap:16px}.stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--border2);aspect-ratio:16/9;display:grid;place-items:center}.stage video{width:100%;height:100%;object-fit:contain;background:#000}.stage .audio-visual{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(500px 300px at 50% 30%,rgba(176,38,255,.35),transparent 70%),#0a0713}.stage.hasvideo .audio-visual{display:none}.disc{width:150px;height:150px;border-radius:50%;background:conic-gradient(from 0deg,#2a1c4d,#4a2c7a,#2a1c4d);display:grid;place-items:center;position:relative;box-shadow:var(--glow);animation:spin 6s linear infinite}.disc.paused{animation-play-state:paused}.disc .hole{width:40px;height:40px;border-radius:50%;background:var(--bg);border:6px solid #1a1030}.disc .emj{position:absolute;font-size:40px}canvas.viz{position:absolute;bottom:0;left:0;width:100%;height:60px;opacity:.85}.live-score{position:absolute;top:12px;right:12px;background:#0a0713b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:14px;padding:8px 14px;text-align:center;min-width:96px}.live-score .n{font-size:26px;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.live-score small{font-size:9.5px;letter-spacing:2px;color:var(--muted)}.mic-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;background:#0a0713b3;border:1px solid var(--border2);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700}.mic-dot{width:9px;height:9px;border-radius:50%;background:var(--bad)}.mic-dot.on{background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 1.4s infinite}.lyrics{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--border);border-radius:var(--radius);padding:18px;height:280px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}.lyrics.empty-lrc{display:grid;place-items:center}.lyrics .inner{transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform}.lyline{text-align:center;padding:8px 6px;font-size:17px;font-weight:600;color:var(--dim);transition:.35s;line-height:1.35}.lyline.active{color:var(--txt);font-size:23px;font-weight:800;transform:scale(1.02);text-shadow:0 0 22px rgba(176,38,255,.55)}.lyline.next{color:var(--muted)}.controls{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.nowtitle{display:flex;align-items:center;gap:12px;margin-bottom:12px}.nowtitle .cover{width:44px;height:44px;font-size:18px}.nowtitle b{font-size:16px}.nowtitle small{color:var(--muted);font-size:12.5px}.seek{display:flex;align-items:center;gap:10px;margin-bottom:8px}.seek .t{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:38px;text-align:center}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:6px;flex:1;background:linear-gradient(90deg,var(--primary) var(--p,0%),var(--border) var(--p,0%));outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 10px #b026ffcc;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;cursor:pointer}.transport{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}.play-big{width:64px;height:64px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:0 8px 30px #b026ff73;transition:.15s}.play-big:hover{transform:scale(1.06)}.ctl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}.vol{display:flex;align-items:center;gap:8px;min-width:130px}.result-hero{text-align:center;padding:30px 20px;border-radius:var(--radius);background:radial-gradient(500px 300px at 50% 0,rgba(255,210,63,.18),transparent 60%),linear-gradient(160deg,#231147,#12091f);border:1px solid var(--border2)}.ring{--v:0;width:150px;height:150px;border-radius:50%;margin:16px auto 0;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--v)*1%),var(--border) 0);position:relative}.ring:before{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;background:var(--bg2)}.ring b{position:relative;font-size:34px;font-weight:900}.grade{font-size:22px;font-weight:800;margin-top:12px}.queue-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--border);margin-bottom:8px;animation:pop .3s}.queue-item.current{border-color:var(--primary);box-shadow:var(--glow);background:var(--panel2)}.q-num{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;background:var(--panel2);color:var(--muted);flex:none}.queue-item.current .q-num{background:var(--grad);color:#fff}.q-info{flex:1;min-width:0}.q-info b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-info small{color:var(--muted);font-size:12px}.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:8px;background:var(--panel);border:1px solid var(--border)}.lb-row.top1{background:linear-gradient(120deg,rgba(255,210,63,.16),var(--panel));border-color:#6b5a1e}.lb-rank{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900;flex:none;background:var(--panel2)}.lb-row.top1 .lb-rank{background:var(--gold);color:#3a2e00}.lb-score{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;background:#05030ab8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}.modal{background:var(--panel);border:1px solid var(--border2);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:92dvh;overflow:auto;padding:20px 18px calc(24px + var(--safe-b));animation:slideup .3s cubic-bezier(.22,1,.36,1)}.modal h3{margin-bottom:14px;display:flex;align-items:center;gap:10px}.grabber{width:44px;height:5px;border-radius:5px;background:var(--border2);margin:0 auto 14px}.field{margin-bottom:14px}.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}.field input,.field select,.field textarea{width:100%;padding:11px 13px;border-radius:11px;background:var(--bg2);border:1px solid var(--border);outline:none;color:var(--txt)}.field textarea{min-height:90px;resize:vertical;font-family:ui-monospace,monospace;font-size:12.5px}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary)}.field .hint{font-size:11px;color:var(--dim);margin-top:5px}.filebox{border:1.5px dashed var(--border2);border-radius:12px;padding:16px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s}.filebox:hover{border-color:var(--primary);color:var(--txt)}.filebox.has{border-style:solid;border-color:var(--good);color:var(--good)}.toasts{position:fixed;bottom:calc(90px + var(--safe-b));left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:92%;max-width:420px}.toast{background:var(--panel2);border:1px solid var(--border2);border-radius:12px;padding:11px 16px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px #00000080;animation:pop .25s}.toast.ok{border-color:#215c48}.toast.err{border-color:var(--bad)}.toast.warn{border-color:#6b5a1e}.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:16px;overflow-x:auto}.tab{padding:9px 15px;border-radius:10px;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap;transition:.15s}.tab.active{background:var(--grad);color:#fff}table.tbl{width:100%;border-collapse:collapse;font-size:13px}table.tbl th{text-align:left;color:var(--dim);font-weight:700;font-size:11px;letter-spacing:1px;padding:8px;border-bottom:1px solid var(--border)}table.tbl td{padding:10px 8px;border-bottom:1px solid var(--border)}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}.stat{padding:16px;border-radius:14px;background:linear-gradient(160deg,var(--panel2),var(--bg2));border:1px solid var(--border)}.stat .n{font-size:28px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stat small{color:var(--muted);font-size:12px}.prof-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.prof-head .avatar{width:76px;height:76px;font-size:32px}.hist-row{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;background:var(--panel);border:1px solid var(--border);margin-bottom:8px}.fs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:radial-gradient(900px 500px at 50% -10%,rgba(176,38,255,.28),transparent 60%),var(--bg);display:flex;flex-direction:column;animation:fade .3s}.fs-top{display:flex;align-items:center;gap:12px;padding:16px 20px}.fs-stage{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:0 20px 20px;min-height:0}.fs-lyrics{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:0;overflow:hidden}.fs-lyrics .cur{font-size:clamp(26px,6vw,54px);font-weight:900;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(176,38,255,.3);line-height:1.1}.fs-lyrics .nxt{font-size:clamp(16px,3vw,26px);color:var(--muted);text-align:center;font-weight:600}.fs-lyrics .prev{font-size:clamp(14px,2.4vw,20px);color:var(--dim);text-align:center;opacity:.6}.fs-score{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.fs-score .big{font-size:52px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.subscores{display:flex;gap:14px;flex-wrap:wrap}.subscore{text-align:center}.subscore .bar{width:70px;height:6px;border-radius:6px;background:var(--border);overflow:hidden;margin-top:4px}.subscore .bar i{display:block;height:100%;background:var(--grad2);transition:width .4s}.subscore small{font-size:10px;color:var(--muted);letter-spacing:1px}.desk-nav{display:none;align-items:center;gap:4px}.desk-nav .navbtn{flex-direction:row;max-width:none;font-size:13px;padding:9px 14px;gap:7px}.desk-nav .navbtn .ic{font-size:17px}@media (min-width:720px){.mode-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(4,1fr)}.lyrics{height:320px}.modal-bg{align-items:center;padding:20px}.modal{border-radius:22px}}@media (min-width:1000px){.bottomnav{display:none}.screen{padding-bottom:32px}.desk-nav{display:flex}.player-two{grid-template-columns:1.4fr 1fr;align-items:start}.lyrics{height:420px}}