:root{--bg:#000;--card:#1c1c1e;--card2:#2c2c2e;--tx:#fff;--sub:#8e8e93;--acc:#38A8F5;--sep:#38383a;--blur:rgba(30,30,30,.8)}
body.light{--bg:#f2f2f7;--card:#fff;--card2:#e5e5ea;--tx:#000;--sub:#6c6c70;--sep:#c6c6c8;--blur:rgba(250,250,250,.85)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;-webkit-font-smoothing:antialiased}
main{padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 160px)}
h1{font-size:34px;font-weight:700;margin:8px 0 12px;letter-spacing:.3px}h2{font-size:21px;margin:22px 0 10px;display:flex;justify-content:space-between;align-items:baseline}h2 small{font-size:15px;color:var(--acc);font-weight:400;cursor:pointer}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.ic{min-width:44px;min-height:44px;font-size:22px;color:var(--tx)}
.row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:.5px solid var(--sep);min-height:60px}
.row img,.ph{width:50px;height:50px;border-radius:8px;object-fit:cover;background:var(--card2);flex:none;display:flex;align-items:center;justify-content:center;font-size:22px}
.row .m{flex:1;min-width:0}.t{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s{font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.row.on .t{color:var(--acc)}.row button{color:var(--acc);font-size:20px;min-width:36px;min-height:44px}
.hs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin:0 -16px;padding-left:16px}.hs::-webkit-scrollbar{display:none}
.tile{flex:none;width:150px;scroll-snap-align:start;cursor:pointer}.tile .cv{width:150px;height:150px;border-radius:10px;background:var(--card2) center/cover;display:flex;align-items:flex-end;padding:10px;font-weight:700;font-size:17px;color:#fff;text-shadow:0 1px 4px #0008}
.tile .t{font-size:14px;margin-top:6px}.tile .s{font-size:12px}
.sb{display:flex;gap:8px;align-items:center;background:var(--card2);border-radius:10px;padding:0 10px;height:40px;margin-bottom:10px}.sb input{flex:1;border:0;background:none;color:var(--tx);font-size:17px;outline:0}
.seg{display:flex;background:var(--card2);border-radius:9px;padding:2px;margin:6px 0 12px}.seg button{flex:1;padding:7px 0;border-radius:7px;font-size:13px}.seg button.on{background:var(--card);box-shadow:0 1px 3px #0003;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.chip{background:var(--card2);border-radius:16px;padding:7px 12px;font-size:14px}
.grp{background:var(--card);border-radius:12px;padding:0 14px;margin-bottom:18px}.grp .row:last-child{border:0}.grp .row{min-height:48px}
input.f{width:100%;padding:10px;border-radius:10px;border:0;background:var(--card2);color:var(--tx);font-size:16px}
.msg{color:var(--sub);text-align:center;padding:30px 0}
#mini{position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 58px);height:62px;border-radius:14px;background:var(--blur);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);display:flex;align-items:center;gap:10px;padding:0 6px 0 8px;box-shadow:0 4px 20px #0004;z-index:5;overflow:hidden}
#mArt{width:46px;height:46px;border-radius:7px;object-fit:cover;background:var(--card2)}.mm{flex:1;min-width:0}#mT{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#mS{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mProg{position:absolute;left:0;bottom:0;height:2px;background:var(--acc);width:0}
#tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;padding-bottom:env(safe-area-inset-bottom);background:var(--blur);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:.5px solid var(--sep);z-index:6}
#tabbar button{flex:1;height:54px;font-size:10px;color:var(--sub);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}#tabbar i{font-style:normal;font-size:22px}#tabbar .on{color:var(--acc)}
#sheet{position:fixed;inset:0;background:#111;z-index:10;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow:hidden;color:#fff}#sheet.open{transform:none}
#bg{position:absolute;inset:-60px;background:#333 center/cover;filter:blur(50px) brightness(.55) saturate(1.4)}
.sh{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 8px) 28px calc(env(safe-area-inset-bottom) + 14px)}
.grab{width:40px;height:5px;border-radius:3px;background:#fff6;margin:4px auto 18px;padding:0;cursor:pointer;flex:none}
#artWrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}#nArt{width:min(82vw,340px);aspect-ratio:1;border-radius:12px;object-fit:cover;background:#555;box-shadow:0 18px 50px #0009;transition:transform .3s}
body.paused #nArt{transform:scale(.82)}
#lyr{flex:1;overflow-y:auto;min-height:0;font-size:22px;font-weight:700;line-height:1.5;mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);padding:40% 0}
#lyr p{margin:10px 0;color:#fff6;transition:color .2s}#lyr p.cur{color:#fff}
.nt{display:flex;align-items:center;margin-top:20px}.nt>div{flex:1;min-width:0}#nT{font-size:21px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#nS{font-size:17px;color:#fffa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#nFav{color:#fff}
.sh input[type=range]{width:100%;accent-color:#fff;margin-top:14px}.tm{display:flex;justify-content:space-between;font-size:12px;color:#fffa}
.ctl{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.ctl .ic{color:#fff}.big{font-size:32px!important}.huge{font-size:46px!important;min-width:70px}.sm{font-size:20px!important;opacity:.5}.sm.on{opacity:1;color:var(--acc)!important}
.volr{display:flex;align-items:center;gap:8px;font-size:13px}.volr input{margin:0!important}
.tools{display:flex;justify-content:space-around;margin-top:12px}.tools button{font-size:13px;color:#fffc;background:#fff2;border-radius:14px;padding:7px 11px}.tools .on{background:#fff;color:#000}
#modal{position:fixed;inset:0;z-index:20;background:#0007;display:flex;align-items:flex-end}#modal .box{width:100%;background:var(--card);color:var(--tx);border-radius:14px 14px 0 0;padding:16px 16px calc(env(safe-area-inset-bottom) + 16px);max-height:75vh;overflow-y:auto}
#modal .box h3{margin:0 0 10px;text-align:center;font-size:17px}#modal .opt{display:block;width:100%;padding:14px;text-align:center;border-bottom:.5px solid var(--sep);color:var(--acc);font-size:17px}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 14px);transform:translateX(-50%);background:var(--blur);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:opacity .3s;z-index:30;pointer-events:none}#toast.on{opacity:1}
body.light{--acc:#1E95E8}.grad{background:linear-gradient(135deg,#38A8F5,#7CC8FF)}
[hidden]{display:none!important}
body{min-height:100vh}