:root{--bg:#0f1115;--panel:#181b22;--panel2:#20242d;--line:#2b303b;--text:#eef0f4;--dim:#9aa3b2;--acc:#ff4d5e;--acc2:#ffb020;--ok:#35c486;--devil:#ff3b3b;--r:14px;
  --safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding-bottom:calc(64px + var(--safe))}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:var(--panel2);border-radius:10px;padding:10px 14px;min-height:42px}
button:active{filter:brightness(1.25)}
button.pri{background:var(--acc);color:#fff;font-weight:600}
button.ghost{background:transparent;border:1px solid var(--line)}
button.ok{background:var(--ok);color:#06251a;font-weight:600}
button:disabled{opacity:.45}
input[type=search],input[type=text],input[type=password],input[type=number],select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:42px;width:100%}
header.top{position:sticky;top:0;z-index:20;background:rgba(15,17,21,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 12px 8px}
.hrow{display:flex;align-items:center;gap:8px}
.party{font-weight:700;font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{background:var(--panel2);border-radius:999px;padding:6px 12px;font-size:14px;min-height:0;white-space:nowrap}
.searchrow{display:flex;gap:8px;margin-top:8px}
.searchrow input{flex:1}
.badge{background:var(--acc);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;margin-left:6px}
.meta{color:var(--dim);font-size:13px;padding:8px 14px}
.banner{margin:10px 12px;padding:10px 12px;border-radius:12px;background:#3a2a10;color:#ffd58a;font-size:14px}
.banner.err{background:#3b1519;color:#ffb3ba}
main{max-width:760px;margin:0 auto}
.song{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:8px 10px;padding:10px 12px}
.song .top{display:flex;gap:10px;align-items:flex-start}
.song .info{flex:1;min-width:0;cursor:pointer}
.song .title{font-weight:650;font-size:16px;overflow-wrap:anywhere}
.song .sub{color:var(--dim);font-size:13px;overflow-wrap:anywhere}
.song .acts{display:flex;gap:6px;flex-shrink:0}
.song .acts button{padding:0;width:44px;height:44px;font-size:20px}
.song .acts .fav.on{color:var(--acc)}
.song .acts .add{width:auto;padding:0 12px;font-size:15px;font-weight:650;background:var(--acc);color:#fff}
.song .acts .add.in{background:var(--panel2);color:var(--dim);font-weight:500}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.tag{font-size:11.5px;background:var(--panel2);color:var(--dim);padding:2px 8px;border-radius:10px;overflow-wrap:anywhere}
.tag.src{color:var(--acc2)}
.inst{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}
.inst div{text-align:center;font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.dots{display:flex;justify-content:center;gap:2px;margin-top:2px}
.dots i{width:7px;height:7px;border-radius:50%;background:#3a4050;display:block}
.dots i.f{background:#e9ecf2}
.devil .dots i.f{background:var(--devil)}
.na .dots i{background:transparent;border:1px solid #2a2f3a}
.pro{display:flex;gap:8px;margin-top:4px;font-size:11px;color:var(--dim)}
.preview{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.ptabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.ptabs button{padding:6px 12px;min-height:34px;font-size:14px}
.ptabs button.on{background:var(--acc);color:#fff}
.preview iframe{width:100%;border:0;border-radius:12px;display:block}
.preview audio{width:100%}
.plinks{display:flex;gap:12px;margin-top:8px;font-size:13px;flex-wrap:wrap}
.plinks a{color:var(--acc2)}
.spin{color:var(--dim);font-size:14px}
nav.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(24,27,34,.97);border-top:1px solid var(--line);display:flex;padding-bottom:var(--safe)}
nav.bar button{flex:1;background:transparent;border-radius:0;min-height:58px;color:var(--dim);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:2px}
nav.bar button b{font-size:20px;font-weight:400}
nav.bar button.on{color:var(--text)}
nav.bar button.on b{color:var(--acc)}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:none}
.sheet.show{display:block}
.sheet .card{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;padding:16px 16px calc(24px + var(--safe));max-width:760px;margin:0 auto}
.card h3{margin:14px 0 6px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts label{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer;user-select:none}
.opts label.on{background:var(--acc);border-color:var(--acc);color:#fff}
.opts input{display:none}
.irow{display:flex;align-items:center;gap:10px;margin:6px 0}.irow span{width:92px;font-size:14px}
.card .foot{position:sticky;bottom:-24px;display:flex;gap:10px;background:var(--bg);padding:12px 0 0;margin-top:12px}
.card .foot button{flex:1}
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal .box{background:var(--panel);border-radius:18px;padding:22px;width:100%;max-width:380px}
.modal h2{margin:0 0 6px}.modal p{margin:0 0 14px;color:var(--dim)}
.err{color:#ff8c96;font-size:14px;min-height:20px;margin-top:6px}
.now{margin:10px;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,#3a1218,#1a1d27);border:1px solid #5a2028}
.now .lbl{font-size:12px;color:var(--acc2);letter-spacing:.1em;text-transform:uppercase}
.now .t{font-size:22px;font-weight:700;margin-top:4px}.now .a{color:var(--dim)}
.qi{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:8px 10px;padding:10px 12px}
.qi.mine{border-color:var(--acc)}
.qi .n{font-size:20px;font-weight:700;color:var(--dim);width:30px;text-align:center}
.qi .m{flex:1;min-width:0}.qi .t{font-weight:600;overflow-wrap:anywhere}.qi .s{color:var(--dim);font-size:13px}
.qi .eta{font-size:12px;color:var(--acc2);white-space:nowrap}
.qi button{padding:0 10px;min-height:40px}
.empty{text-align:center;color:var(--dim);padding:40px 20px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--safe));background:#000;border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:90;max-width:90vw;font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.sec{margin:18px 12px 6px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.row{display:flex;gap:8px;align-items:center;margin:8px 12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:10px;padding:14px}
.panel h3{margin:0 0 8px}
.big{display:flex;gap:10px;margin:10px}.big button{flex:1;min-height:56px;font-size:18px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.drop{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--dim)}
.drop.over{border-color:var(--acc);color:var(--text)}