/* round 8: player tabs, queue popover, stories, progress, gallery */
.fptabs{display:flex;gap:4px;margin:22px 0 10px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.fptabs button{flex:1;border:0;background:none;color:var(--mute);font:inherit;font-weight:600;padding:9px 0;border-radius:10px}
.fptabs button.on{background:var(--saf);color:#fff}
.fppane{min-height:200px}
.qnow{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--soft);margin-bottom:8px}.qnow span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.qlist,.qpop ul{list-style:none;margin:0;padding:0}
.qlist li,.qpop li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.qlist li div,.qpop li div{flex:1;min-width:0}.qlist b,.qpop li b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qlist small,.qpop small{color:var(--mute);font-size:.78rem}.qn{width:22px;text-align:center;color:var(--mute);font-variant-numeric:tabular-nums}
.trlive{max-height:46vh;overflow:auto;padding-right:4px;scroll-behavior:smooth}
.trlive p{margin:0;padding:8px 10px;border-radius:10px;line-height:1.55;color:var(--mute);transition:background .2s,color .2s;cursor:pointer}
.trlive p.cur{background:var(--soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--saf)}
.trlive .ts{border:0;background:none;color:var(--saf);font:inherit;font-size:.78rem;padding:0;margin-right:4px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.facts dt{color:var(--mute)}.facts dd{margin:0}.sumx{line-height:1.6}
.qbtn{position:relative;border:0;background:none;color:var(--ink);padding:6px;margin-left:2px}.qbtn span{position:absolute;top:0;right:-2px;min-width:16px;height:16px;border-radius:8px;background:var(--saf);color:#fff;font-size:.65rem;line-height:16px;text-align:center}
.qpop{position:fixed;left:10px;right:10px;z-index:40;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px 12px 10px;animation:qup .18s ease-out}
@keyframes qup{from{opacity:0;transform:translateY(8px)}}
.qph{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.qmore{width:100%;margin-top:8px;border:0;border-radius:10px;padding:9px;background:var(--soft);color:var(--saf);font:inherit;font-weight:600}
.dstories{margin:0 -4px 10px}.dstories .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 6px 6px}
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:70px;border:0;background:none;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;font:inherit}
.story .ring{width:66px;height:66px;border-radius:50%;padding:3px;background:conic-gradient(var(--saf),var(--saf2),var(--saf))}
.story.seen .ring{background:var(--line)}
.story img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--bg);display:block}
.story small{font-size:.7rem;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mute)}
.storyv{position:fixed;inset:0;z-index:80;background:#000;color:#fff;display:flex;flex-direction:column}
.sbars{display:flex;gap:4px;padding:calc(10px + env(safe-area-inset-top)) 10px 0}.sbars i{flex:1;height:3px;background:#ffffff40;border-radius:2px;overflow:hidden}.sbars i b{display:block;height:100%;width:0;background:#fff}
.sbars i.done b{width:100%}.sbars i.run b{animation:sbar 5s linear forwards}@keyframes sbar{to{width:100%}}
.shead{display:flex;align-items:center;gap:10px;padding:10px 12px}.shead img{width:34px;height:34px;border-radius:50%}.shead div{flex:1}.shead small{display:block;opacity:.7;font-size:.75rem}.shead .cbtn{color:#fff}
.simg{flex:1;min-height:0;width:100%;object-fit:contain}.scap{padding:14px 18px calc(22px + env(safe-area-inset-bottom));text-align:center;font-size:.95rem}
.snav{position:absolute;inset:80px 0 70px;display:flex}.snav span{flex:1}
.albums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.album{display:block;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.album img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.album div{padding:8px 10px 10px}.album b{display:block;font-size:.9rem}.album small{color:var(--mute);font-size:.75rem}
#gq{margin-top:6px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}.pgrid button{border:0;padding:0;background:none}.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.flame{display:flex;align-items:center;gap:14px;margin-bottom:10px}.flame b{display:block;font-size:1.3rem}.fl{font-size:2.4rem;filter:grayscale(1) opacity(.5)}.fl.lit{filter:none;animation:flk 2.4s ease-in-out infinite}@keyframes flk{50%{transform:scale(1.08) rotate(-3deg)}}
.seg2{display:flex;background:var(--soft);border-radius:10px;padding:3px}.seg2 a{padding:6px 14px;border-radius:8px;color:var(--mute);text-decoration:none;font-weight:600;font-size:.85rem}.seg2 a.on{background:var(--saf);color:#fff}
.bchart{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:14px}.bchart.month{gap:2px}
.bc{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}.bc i{width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--saf) 45%,transparent)}.bc.on i{background:var(--saf)}
.bc span{font-size:.65rem;color:var(--mute);height:12px}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ringc{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px}
.ringc svg{width:64px;height:64px;transform:rotate(-90deg)}.rbg{fill:none;stroke:var(--line);stroke-width:6}.rfg{fill:none;stroke:var(--saf);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s}
.rc-sb{stroke:#4b6cd1}.rc-cc{stroke:#b06ad9}.rc-sem{stroke:#c79566}.rc-oth{stroke:#3fbf8f}
.ringc b{position:absolute;top:31px;font-size:.8rem}.ringc span{font-weight:600;font-size:.85rem;margin-top:4px}.ringc small{color:var(--mute);font-size:.72rem}