.hp-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.hp-state{padding:40px 0}.hp-grid{border:0;display:grid;gap:18px;max-width:940px;margin-inline:auto}.song{position:relative;display:grid;gap:12px}@media(min-width:760px){.song{grid-template-columns:clamp(240px,27vw,320px) minmax(0,1fr);gap:18px;align-items:stretch}}.song__media{min-width:0}.song__player{display:flex;flex-direction:column;gap:8px}.song__frame{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--r);background:#05070c;border:1px solid var(--line-strong);transition:border-color .16s}.song__frame img,.song__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}.song__frame iframe{background:#000}.song__frame img{filter:saturate(.9) brightness(.82);transition:transform .3s var(--ease),filter .2s}.song:hover .song__frame img{transform:scale(1.04);filter:none}.song--chosen .song__frame{border-color:var(--red)}.song__start{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:pointer;color:#fff}.song__start:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,#0000002e,#00000080);transition:opacity .2s}.song__start:hover:before{opacity:.55}.song__disc{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#d81818eb;box-shadow:0 8px 26px #00000080;transition:transform .18s var(--ease)}.song__start:hover .song__disc{transform:scale(1.08)}.song__disc svg{width:24px;height:24px;margin-left:3px}.song__media.is-playing .song__frame img,.song__media.is-playing .song__start{display:none}.song__bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.song__bar-title{display:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.95rem;color:#fff}.song__btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:10px;background:#080a0ec7;border:1px solid var(--line-strong);color:var(--fg);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.song__btn:hover,.song__btn:focus-visible{background:var(--red);border-color:var(--red);color:#fff}.song__btn svg{width:16px;height:16px;flex:none}html.no-fs .song__btn[data-full]{display:none}.song__player:fullscreen{gap:0;background:#000}.song__player:-webkit-full-screen{gap:0;background:#000}.song__player:fullscreen .song__bar{order:-1;padding:10px 14px;background:#0b0d12;border-bottom:1px solid rgba(255,255,255,.1)}.song__player:-webkit-full-screen .song__bar{order:-1;padding:10px 14px;background:#0b0d12;border-bottom:1px solid rgba(255,255,255,.1)}.song__player:fullscreen .song__bar-title{display:block}.song__player:-webkit-full-screen .song__bar-title{display:block}.song__player:fullscreen .song__frame{flex:1;aspect-ratio:auto;border:0;border-radius:0}.song__player:-webkit-full-screen .song__frame{flex:1;aspect-ratio:auto;border:0;border-radius:0}.song__frame--empty{display:grid;place-items:center}.song__frame--empty span{font-size:.82rem;color:var(--fg-muted);text-align:center;padding:0 16px}.song__pick{position:relative;display:block;min-width:0}.song input{position:absolute;inset:0;opacity:0;cursor:pointer}.song input:focus-visible+.song__box{outline:2px solid var(--red-bright);outline-offset:3px}.song__box{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;height:100%;padding:14px 16px;border-radius:var(--r);background:var(--panel-bg);border:1px solid var(--line-strong);transition:border-color .16s,background .16s,transform .16s var(--ease);cursor:pointer;min-height:74px}.song:hover .song__box{border-color:#d8181873;background:linear-gradient(180deg,#1f2430f0,#0f1219e6)}.song input:checked+.song__box{border-color:var(--red);background:#d8181824;box-shadow:0 0 0 1px var(--red),0 10px 30px #d818182e}.song__num{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#ffffff12;font-family:var(--font-num);font-size:1rem;font-weight:700;color:var(--fg-soft)}.song--flat .song__num{color:var(--fg-muted);font-weight:600}.song--lead .song__num{background:var(--red);color:#fff}.song--top .song__num{background:#d818184d;color:#ffc9c9}.song input:checked+.song__box .song__num{background:var(--red);color:#fff}.song__text{min-width:0}.song__title{display:block;font-weight:700;font-size:1.02rem;line-height:1.25}.song__artist{display:block;margin-top:2px;font-size:.88rem;color:var(--fg-muted)}.song__mine{display:inline-block;margin-top:6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-bright);font-weight:700}.song__cue{display:block;margin-top:10px;font-size:.78rem;color:var(--fg-muted)}.song--disabled .song__cue,.song--chosen .song__cue{display:none}.song:hover .song__cue{color:var(--fg-soft)}.song__mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);flex:none}.song input:checked+.song__box .song__mark{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px var(--bg)}.song--disabled .song__box{cursor:default}.song--disabled .song__mark{display:none}.hp-actions{position:sticky;bottom:0;z-index:10;margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 0 18px;background:linear-gradient(0deg,rgba(7,8,12,.98) 64%,rgba(7,8,12,.82) 86%,transparent);backdrop-filter:blur(4px)}@media(max-width:719px){.hp-actions{gap:6px;padding:10px 0 12px}.hp-actions .btn{width:100%}.hp-hint{flex:1 1 100%;text-align:center;font-size:.8rem}}.hp-hint{font-size:.86rem;color:var(--fg-muted)}.hp-hint[data-error]{color:#ff9e9e}.faq-box{background:var(--panel-bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:6px clamp(18px,2.6vw,30px) 10px}.faq{border-bottom:1px solid var(--line);padding:16px 0}.faq:last-child{border-bottom:0}.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}.faq summary:after{content:"+";color:var(--red-bright);font-size:1.2rem;line-height:1}.faq[open] summary:after{content:"–"}.faq p{margin-top:12px;color:var(--fg-soft);font-size:.93rem}.faq a{color:var(--red-bright);text-decoration:underline;text-underline-offset:3px}
