/* ============================================================
   qq-pages.css — 奇趣声娱 · 首页与内页
   硬朗描边 + 偏移阴影的「贴纸」卡片风格
   ============================================================ */

/* ---------- 首页 ① 首屏 ---------- */
.qq_hero { padding: 56px 0 60px; background: var(--qq-cream) var(--qq-hero) right center / cover no-repeat; border-bottom: 2px solid var(--qq-ink); }
.qq_hero_in { display: grid; grid-template-columns: 1fr 520px; gap: 48px; align-items: center; }
.qq_hero_kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 16px; background: var(--qq-ink); color: var(--qq-sun); font-size: 13px; font-weight: 700; }
.qq_hero h1 { margin: 20px 0 16px; font-size: 48px; line-height: 1.22; font-weight: 900; color: var(--qq-ink); }
.qq_hero h1 em { font-style: normal; color: var(--qq-coral); position: relative; }
.qq_hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; background: var(--qq-sun); opacity: .45; z-index: -1; border-radius: 4px; }
.qq_hero_txt > p { max-width: 460px; margin: 0 0 26px; font-size: 15.5px; line-height: 1.9; color: var(--qq-text); }
.qq_hero_btns { display: flex; gap: 14px; flex-wrap: wrap; }
.qq_hero_cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qq_hcard { position: relative; display: flex; flex-direction: column; padding: 20px; border: 2px solid var(--qq-ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--qq-ink); transition: transform .2s, box-shadow .2s; }
.qq_hcard:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--qq-ink); }
.qq_hcard img { width: 58px; height: 58px; padding: 4px; margin-bottom: 10px; border-radius: 16px; background: #fff; }
.qq_hcard strong { font-size: 19px; color: var(--qq-ink); }
.qq_hcard small { font-size: 13px; color: var(--qq-text); }
.qq_hcard em { margin-top: 8px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--qq-ink); }
.qq_hcard > i { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 50%; background: var(--qq-ink); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.qq_hcard_coral { background: var(--qq-coral-s); } .qq_hcard_violet { background: var(--qq-violet-s); }
.qq_hcard_teal { background: var(--qq-teal-s); } .qq_hcard_sun { background: var(--qq-sun-s); }

/* ② 视频作品 */
.qq_vids { display: grid; grid-template-columns: 1.9fr 1fr; gap: 22px; }
.qq_vid { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--qq-ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--qq-ink); transition: transform .2s; }
.qq_vid:hover { transform: translate(-2px, -2px); }
.qq_vid_pic { position: relative; display: block; overflow: hidden; background: var(--qq-ink); border-bottom: 2px solid var(--qq-ink); }
.qq_vid_wide .qq_vid_pic { aspect-ratio: 16 / 9; }
.qq_vid_tall { flex-direction: row; }
.qq_vid_tall .qq_vid_pic { width: 46%; flex-shrink: 0; border-bottom: 0; border-right: 2px solid var(--qq-ink); }
.qq_vid_pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.qq_vid:hover .qq_vid_pic img { transform: scale(1.04); }
.qq_vid_pic > i { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; padding-left: 5px; border-radius: 50%; background: var(--qq-coral); color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.qq_vid_tall .qq_vid_pic > i { background: var(--qq-violet); width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 18px; }
.qq_vid_bd { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.qq_vid_bd .qq_tag { align-self: flex-start; }
.qq_vid_bd strong { font-size: 19px; color: var(--qq-ink); line-height: 1.4; }
.qq_vid_bd small { font-size: 13.5px; line-height: 1.8; color: var(--qq-text); }
.qq_vid_bd em { margin-top: auto; font-style: normal; font-size: 12.5px; color: var(--qq-muted); }

/* ③ 音乐歌单 */
.qq_playlist { display: grid; grid-template-columns: 330px 1fr; gap: 30px; align-items: center; padding: 26px; background: var(--qq-teal-s); border: 2px solid var(--qq-ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--qq-ink); }
.qq_vinyl { position: relative; width: 280px; height: 240px; }
.qq_vinyl img { position: relative; z-index: 2; width: 220px; height: 220px; object-fit: cover; border-radius: 16px; border: 2px solid var(--qq-ink); box-shadow: 4px 4px 0 var(--qq-ink); }
.qq_vinyl_disc { position: absolute; left: 70px; top: 10px; width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, var(--qq-teal) 0 18%, #111 19% 21%, #222 22% 100%); box-shadow: inset 0 0 0 6px #111, 0 6px 16px rgba(0, 0, 0, .25); }
.qq_tracks { list-style: none; margin: 0; padding: 0; }
.qq_tracks a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; transition: background .2s; }
.qq_tracks a:hover { background: #fff; }
.qq_tracks b { width: 26px; font-size: 14px; color: var(--qq-muted); }
.qq_tracks img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 2px solid var(--qq-ink); }
.qq_tracks span { flex: 1; min-width: 0; }
.qq_tracks strong { display: block; font-size: 16px; color: var(--qq-ink); }
.qq_tracks small { font-size: 12.5px; color: var(--qq-text); }
.qq_tracks em { font-style: normal; font-size: 13px; color: var(--qq-muted); }
.qq_tracks a > i { font-size: 28px; color: var(--qq-teal); }

/* ④ 动漫 */
.qq_comic { display: grid; grid-template-columns: 340px 1fr; overflow: hidden; background: var(--qq-sun-s); border: 2px solid var(--qq-ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--qq-ink); }
.qq_comic_txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 30px; background: linear-gradient(180deg, rgba(255, 241, 210, .92), rgba(255, 241, 210, .98)), var(--qq-kv) center / cover; border-right: 2px solid var(--qq-ink); }
.qq_comic_txt .qq_tag { align-self: flex-start; }
.qq_comic_txt h3 { margin: 0; font-size: 26px; font-weight: 900; color: var(--qq-ink); }
.qq_comic_txt p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--qq-text); }
.qq_comic_txt .qq_btn { align-self: flex-start; margin-top: 6px; }
.qq_panels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 22px; }
.qq_panels span { overflow: hidden; border: 2px solid var(--qq-ink); border-radius: 10px; background: #fff; }
.qq_panels span:nth-child(odd) { transform: rotate(-1.5deg); }
.qq_panels span:nth-child(even) { transform: rotate(1.5deg) translateY(8px); }
.qq_panels img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 392 / 520; }

/* ⑤ 保障 + 制度 */
.qq_trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qq_trust > div { display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; align-items: center; padding: 16px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 18px; }
.qq_trust img { grid-row: span 2; width: 54px; height: 54px; }
.qq_trust strong { font-size: 15.5px; color: var(--qq-ink); }
.qq_trust span { font-size: 12.5px; color: var(--qq-muted); }
.qq_rules { margin-top: 22px; padding: 22px 24px; background: var(--qq-ink); border-radius: 22px; color: #fff; }
.qq_rules h3 { margin: 0 0 14px; font-size: 18px; color: var(--qq-sun); }
.qq_rules > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 18px; }
.qq_rules a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: rgba(255, 255, 255, .82); }
.qq_rules a i { color: var(--qq-coral); }
.qq_rules a:hover { color: var(--qq-sun); }

/* ⑥ 关于 */
.qq_about { display: grid; grid-template-columns: 1fr 420px; gap: 50px; align-items: center; }
.qq_about_txt h2 { margin: 0 0 16px; font-size: 30px; font-weight: 900; color: var(--qq-ink); }
.qq_about_txt p { margin: 0 0 12px; font-size: 15px; line-height: 2; color: var(--qq-text); }
.qq_about_txt p strong { color: var(--qq-ink); }
.qq_about_txt ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 16px 0 0; border-top: 2px dashed var(--qq-line); font-size: 14px; color: var(--qq-text); }
.qq_about_txt ul i { color: var(--qq-coral); margin-right: 6px; }
.qq_about_pic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid var(--qq-ink); border-radius: 26px; box-shadow: -10px 10px 0 var(--qq-sun); }

/* ---------- 内页页头 ---------- */
.qq_crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--qq-muted); }
.qq_crumb a:hover { color: var(--qq-coral); }
.qq_crumb i { font-size: 10px; }
.qq_crumb span { color: var(--qq-ink); font-weight: 600; }
.qq_ph { padding: 34px 0; background: #fff; border-bottom: 2px solid var(--qq-ink); }
.qq_ph_coral { background: var(--qq-coral-s); } .qq_ph_violet { background: var(--qq-violet-s); } .qq_ph_teal { background: var(--qq-teal-s); } .qq_ph_sun { background: var(--qq-sun-s); }
.qq_ph_in { display: flex; align-items: center; gap: 22px; }
.qq_ph_ico { width: 84px; height: 84px; padding: 8px; flex-shrink: 0; border-radius: 22px; background: #fff; border: 2px solid var(--qq-ink); box-shadow: 4px 4px 0 var(--qq-ink); }
.qq_ph h1 { margin: 0 0 6px; font-size: 32px; font-weight: 900; color: var(--qq-ink); }
.qq_ph p { margin: 0; font-size: 14px; color: var(--qq-text); }
.qq_ph_search { display: flex; width: 320px; height: 46px; margin-left: auto; padding: 4px; border-radius: 23px; background: #fff; border: 2px solid var(--qq-ink); }
.qq_ph_search input { flex: 1; min-width: 0; padding: 0 14px; border: 0; outline: 0; font-size: 14px; }
.qq_ph_search button { width: 42px; border-radius: 19px; background: var(--qq-ink); color: #fff; }

/* 列表 */
.qq_list { padding-top: 30px; padding-bottom: 70px; }
.qq_list_note { margin: 0 0 16px; font-size: 14px; color: var(--qq-text); }
.qq_list_note a { color: var(--qq-coral); }
.qq_list_hd { margin: 10px 0 16px; font-size: 20px; color: var(--qq-ink); }
.qq_works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.qq_works_show { grid-template-columns: repeat(2, 1fr); }
.qq_work { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--qq-ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--qq-ink); transition: transform .2s; }
.qq_work:hover { transform: translate(-2px, -2px); }
.qq_work_pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--qq-ink); border-bottom: 2px solid var(--qq-ink); }
.qq_works_show .qq_work_pic { aspect-ratio: 16 / 9; }
.qq_work_pic img { width: 100%; height: 100%; object-fit: cover; }
.qq_work_play { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--qq-ink); border: 2px solid var(--qq-ink); display: flex; align-items: center; justify-content: center; }
.qq_work_pic .qq_tag { position: absolute; top: 12px; left: 12px; border: 2px solid var(--qq-ink); }
.qq_work_bd { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.qq_work_bd strong { font-size: 17px; color: var(--qq-ink); }
.qq_work_bd small { font-size: 12.5px; color: var(--qq-coral); font-weight: 600; }
.qq_work_bd p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--qq-text); }
.qq_work_bd em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 12px; color: var(--qq-muted); }
.qq_pager { margin-top: 28px; }
.qq_pager svg { width: 18px; }

/* 歌曲列表 */
.qq_songs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qq_song { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--qq-ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--qq-ink); transition: transform .2s; }
.qq_song:hover { transform: translate(-2px, -2px); }
.qq_song_cover { position: relative; display: block; aspect-ratio: 1 / 1; border-bottom: 2px solid var(--qq-ink); }
.qq_song_cover img { width: 100%; height: 100%; object-fit: cover; }
.qq_song_cover i { position: absolute; right: 14px; bottom: 14px; width: 50px; height: 50px; padding-left: 4px; border-radius: 50%; background: var(--qq-teal); color: #fff; border: 2px solid var(--qq-ink); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qq_song_bd { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.qq_song_bd strong { font-size: 18px; color: var(--qq-ink); }
.qq_song_bd small { font-size: 13px; color: var(--qq-teal); font-weight: 600; }
.qq_song_bd p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--qq-text); }
.qq_song_bd em { font-style: normal; font-size: 12.5px; color: var(--qq-muted); }
.qq_song_bd em i + i, .qq_song_bd em .fa-headphones { margin-left: 14px; }

/* 搜索结果 */
.qq_results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.qq_result { display: flex; gap: 14px; padding: 14px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 16px; }
.qq_result img { width: 88px; height: 88px; flex-shrink: 0; object-fit: cover; border-radius: 12px; }
.qq_result > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qq_result .qq_tag { align-self: flex-start; }
.qq_result strong { font-size: 16px; color: var(--qq-ink); }
.qq_result small { font-size: 12.5px; color: var(--qq-text); }

/* 详情 */
.qq_detail { padding: 30px 0 38px; border-bottom: 2px solid var(--qq-ink); }
.qq_detail_coral { background: var(--qq-coral-s); } .qq_detail_violet { background: var(--qq-violet-s); } .qq_detail_sun { background: var(--qq-sun-s); }
.qq_detail_in { display: flex; gap: 36px; align-items: center; margin-top: 10px; }
.qq_detail_pic { flex-shrink: 0; width: 260px; }
.qq_detail_pic.is_wide { width: 480px; }
.qq_detail_pic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--qq-ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--qq-ink); background: #fff; }
.qq_detail_pic.is_wide img { aspect-ratio: 16 / 9; }
.qq_detail_txt h1 { margin: 12px 0 10px; font-size: 34px; font-weight: 900; color: var(--qq-ink); line-height: 1.3; }
.qq_genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qq_genres span { padding: 2px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--qq-ink); font-size: 12.5px; font-weight: 600; }
.qq_facts { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 8px 28px; margin: 0 0 22px; }
.qq_facts div { display: flex; gap: 10px; font-size: 14px; }
.qq_facts dt { color: var(--qq-muted); white-space: nowrap; }
.qq_facts dd { margin: 0; color: var(--qq-ink); font-weight: 600; }
.qq_detail_btns { display: flex; gap: 12px; flex-wrap: wrap; }
.qq_detail_btns form { margin: 0; }
.qq_detail_body { display: grid; grid-template-columns: 1fr 320px; gap: 26px; padding-top: 30px; padding-bottom: 70px; }
.qq_detail_main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.qq_box_hd { margin: 0 0 18px; font-size: 20px; color: var(--qq-ink); }
.qq_eps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qq_eps.is_comic { grid-template-columns: repeat(2, 1fr); }
.qq_ep { display: block; }
.qq_ep_pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--qq-ink); border-radius: 12px; background: var(--qq-ink); margin-bottom: 8px; }
.qq_ep_pic img { width: 100%; height: 100%; object-fit: cover; }
.qq_ep_pic b { position: absolute; right: 6px; bottom: 6px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; font: 600 12px/20px Arial, sans-serif; }
.qq_ep strong { display: block; font-size: 15px; color: var(--qq-ink); }
.qq_ep small { font-size: 12px; color: var(--qq-muted); }
.qq_free, .qq_vipt { font-style: normal; font-weight: 700; }
.qq_free { color: var(--qq-teal); } .qq_vipt { color: var(--qq-coral); }
.qq_detail_side { display: flex; flex-direction: column; gap: 18px; }
.qq_side_card { padding: 20px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 18px; }
.qq_side_card > img { width: 46px; height: 46px; margin-bottom: 8px; }
.qq_side_card h3 { margin: 0 0 6px; font-size: 16px; color: var(--qq-ink); }
.qq_side_card p { margin: 0 0 8px; font-size: 13px; line-height: 1.85; color: var(--qq-text); }
.qq_side_card > a { font-size: 13px; color: var(--qq-coral); font-weight: 700; }
.qq_side_list a { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--qq-line); }
.qq_side_list img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.qq_side_list strong { display: block; font-size: 14px; color: var(--qq-ink); }
.qq_side_list small { font-size: 12px; color: var(--qq-muted); }

/* 播放 / 阅读 */
body.qq_watching { background: #15132B; }
body.qq_watching .qq_crumb span, body.qq_watching .qq_play_head h1 { color: #fff; }
.qq_play { padding: 24px 0 64px; }
.qq_play_head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.qq_play_head h1 { margin: 0; font-size: 24px; font-weight: 900; color: var(--qq-ink); }
.qq_play_head h1 span { margin-left: 12px; font-size: 16px; font-weight: 600; color: var(--qq-coral); }
.qq_play_nav { display: flex; gap: 10px; }
.qq_play_nav a { padding: 8px 16px; border-radius: 18px; border: 2px solid var(--qq-ink); background: #fff; color: var(--qq-ink); font-size: 13.5px; font-weight: 700; }
.qq_play_nav a.next { background: var(--qq-coral); color: #fff; }
.qq_play_grid { display: grid; grid-template-columns: 1fr 330px; gap: 24px; }
.qq_play_grid.is_comic { grid-template-columns: minmax(0, 760px) 300px; justify-content: center; }
.qq_player { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; border: 3px solid #fff; }
.qq_player.is_tall { aspect-ratio: 9 / 16; width: min(100%, 440px); max-height: 82vh; margin: 0 auto; }
.qq_watching .qq_play_grid:has(.is_tall) .qq_play_main { background: rgba(255, 255, 255, .04); border-radius: 22px; padding: 20px; }
.qq_player video { width: 100%; height: 100%; display: block; background: #000; }
.qq_lock { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 30px; text-align: center; background: #fff; border: 2px solid var(--qq-ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--qq-ink); }
.qq_lock > i { font-size: 40px; color: var(--qq-sun); }
.qq_lock h2 { margin: 0; color: var(--qq-ink); }
.qq_lock p { margin: 0 0 8px; color: var(--qq-text); }
.qq_lock small { font-size: 12px; color: var(--qq-muted); }
.qq_reader { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 20px; }
.qq_reader img { width: 100%; border-radius: 10px; border: 2px solid var(--qq-ink); }
.qq_reader_end { margin-top: 18px; text-align: center; color: var(--qq-muted); }
.qq_play_tip { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 13px; color: var(--qq-muted); }
body.qq_reading .qq_play_tip { background: #fff; border: 2px dashed var(--qq-line); }
.qq_play_tip i { color: var(--qq-coral); margin-right: 6px; }
.qq_play_side { align-self: start; padding: 18px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 20px; }
.qq_play_info { display: flex; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 2px dashed var(--qq-line); }
.qq_play_info img { width: 56px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 2px solid var(--qq-ink); }
.qq_play_info strong { display: block; font-size: 15px; color: var(--qq-ink); }
.qq_play_info small { font-size: 12.5px; color: var(--qq-muted); }
.qq_play_list { display: flex; flex-direction: column; gap: 8px; }
.qq_play_list a { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.qq_play_list a:hover { background: var(--qq-cream); }
.qq_play_list a.on { background: var(--qq-coral-s); }
.qq_play_list .qq_ep_pic { width: 110px; margin: 0; flex-shrink: 0; }
.qq_play_list strong { display: block; font-size: 14px; color: var(--qq-ink); }
.qq_play_list em { font-style: normal; font-size: 12px; color: var(--qq-teal); font-weight: 700; }
.qq_play_list em.vip { color: var(--qq-coral); }
.qq_play_list em.now { color: var(--qq-violet); }
.qq_play_more { display: block; margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--qq-line); text-align: center; font-size: 13.5px; font-weight: 700; color: var(--qq-ink); }

/* 音乐详情 */
.qq_mplay { position: relative; padding: 30px 0 44px; background: var(--qq-teal-s); border-bottom: 2px solid var(--qq-ink); overflow: hidden; }
.qq_mplay_in { display: flex; gap: 46px; align-items: center; margin-top: 12px; }
.qq_disc { flex-shrink: 0; width: 300px; height: 300px; border-radius: 50%; padding: 34px; background: radial-gradient(circle, #222 0 60%, #111 61% 62%, #222 63% 100%);
    border: 3px solid var(--qq-ink); box-shadow: 8px 8px 0 var(--qq-ink); }
.qq_disc_rec { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 4px solid #111; }
.qq_disc_rec img { width: 100%; height: 100%; object-fit: cover; }
.qq_disc.spin .qq_disc_rec { animation: qqSpin 12s linear infinite; }
@keyframes qqSpin { to { transform: rotate(360deg); } }
.qq_mplay_txt { flex: 1; min-width: 0; }
.qq_mplay_txt h1 { margin: 12px 0 14px; font-size: 38px; font-weight: 900; color: var(--qq-ink); }
.qq_audio { padding: 14px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 18px; }
.qq_audio audio { width: 100%; display: block; }
.qq_audio_tip { margin: 10px 4px 0; font-size: 13px; color: var(--qq-text); }
.qq_audio_tip i { color: var(--qq-sun); margin-right: 4px; }
.qq_audio_tip a { color: var(--qq-coral); font-weight: 700; }
.qq_audio_tip.hit { color: var(--qq-coral); font-weight: 700; }
.qq_mplay_desc { margin: 16px 0 0; font-size: 14.5px; line-height: 1.9; color: var(--qq-text); }
.qq_lyrics { columns: 2; column-gap: 40px; font-size: 15px; line-height: 2.1; color: var(--qq-text); }
.qq_lyrics p { margin: 0; break-inside: avoid; }

/* 制度 */
.qq_doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding-top: 30px; padding-bottom: 70px; }
.qq_doc_nav { align-self: start; position: sticky; top: 150px; display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #fff; border: 2px solid var(--qq-ink); border-radius: 18px; }
.qq_doc_nav a { padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--qq-text); line-height: 1.5; }
.qq_doc_nav a:hover { color: var(--qq-coral); }
.qq_doc_nav a.on { background: var(--qq-ink); color: #fff; font-weight: 700; }
.qq_flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 16px; border-radius: 14px; background: var(--qq-cream); border: 2px dashed var(--qq-line); }
.qq_flow span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 18px; background: #fff; border: 2px solid var(--qq-ink); font-size: 13.5px; color: var(--qq-ink); }
.qq_flow span b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--qq-coral); color: #fff; font-size: 12px; }
.qq_flow > i { color: var(--qq-coral); }

@media (max-width: 1100px) {
    .qq_hero_in, .qq_about, .qq_playlist, .qq_comic, .qq_detail_body, .qq_play_grid, .qq_play_grid.is_comic { grid-template-columns: 1fr; }
    .qq_hero_cards { max-width: 560px; }
    .qq_works { grid-template-columns: repeat(3, 1fr); }
    .qq_comic_txt { border-right: 0; border-bottom: 2px solid var(--qq-ink); }
    .qq_rules > div { grid-template-columns: repeat(2, 1fr); }
    .qq_detail_pic.is_wide { width: 360px; }
}
@media (max-width: 860px) {
    .qq_hero { background-image: none; }
    .qq_hero h1 { font-size: 34px; }
    .qq_vids, .qq_works_show, .qq_songs, .qq_results, .qq_trust { grid-template-columns: 1fr 1fr; }
    .qq_vid_tall { flex-direction: column; }
    .qq_vid_tall .qq_vid_pic { width: 100%; border-right: 0; border-bottom: 2px solid var(--qq-ink); aspect-ratio: 3 / 4; }
    .qq_panels { grid-template-columns: repeat(3, 1fr); }
    .qq_panels span:nth-child(n+4) { display: none; }
    .qq_ph_in { flex-wrap: wrap; }
    .qq_ph_search { width: 100%; margin-left: 0; }
    .qq_detail_in, .qq_mplay_in { flex-direction: column; align-items: flex-start; }
    .qq_detail_pic, .qq_detail_pic.is_wide { width: 220px; }
    .qq_doc { grid-template-columns: 1fr; }
    .qq_doc_nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .qq_lyrics { columns: 1; }
    .qq_disc { width: 220px; height: 220px; padding: 24px; }
}
@media (max-width: 560px) {
    .qq_hero_cards, .qq_vids, .qq_works, .qq_works_show, .qq_songs, .qq_results, .qq_trust, .qq_eps, .qq_rules > div { grid-template-columns: 1fr; }
    .qq_works { grid-template-columns: 1fr 1fr; gap: 14px; }
    .qq_facts { grid-template-columns: 1fr; }
    .qq_playlist { padding: 16px; }
    .qq_vinyl { display: none; }
}