@charset "utf-8";

/* PULSE · 强对比色块风 —— 实心色块标题、超大描边序号、方角高反差 */

:root {
    --pop: #e11d48;
    --pop-w: #fdeaef;
    --white: #ffffff;
    --smoke: #f3f4f6;
    --edge: #dfe2e7;
    --jet: #0e1013;
    --slate: #545c68;
    --ash: #949ba6;
    --m: 14px;
}

:is([data-v="b" i],[data-v="f" i],[data-v="j" i],[data-v="n" i],[data-v="r" i],[data-v="v" i]) { --pop: #0d9488; --pop-w: #e6f5f3; }
:is([data-v="c" i],[data-v="g" i],[data-v="k" i],[data-v="o" i],[data-v="s" i],[data-v="w" i]) { --pop: #4338ca; --pop-w: #ecebfa; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--smoke); }

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, Arial, sans-serif;
    font-size: 14px; line-height: 1.6; color: var(--jet);
    background: var(--white); max-width: 840px; margin: 0 auto;
}

img { display: block; border: 0; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.sink { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* 骨架：源码 main → nav → cap → end */
.wave { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "cap" "nav" "main" "end"; min-height: 100vh; }
.wave-cap { grid-area: cap; }
.wave-nav { grid-area: nav; }
.wave-main { grid-area: main; }
.wave-end { grid-area: end; }

.wave-cap { display: flex; align-items: center; gap: 11px; padding: 12px var(--m); background: var(--smoke); border-bottom: 3px solid var(--jet); }
.cap-brand img { height: 32px; width: auto; }
.sift { flex: 1 1 auto; display: flex; min-width: 0; height: 34px; background: var(--white); border: 1px solid var(--edge); }
.sift-i { flex: 1 1 auto; min-width: 0; padding: 0 11px; font-size: 13px; color: var(--jet); background: transparent; border: 0; outline: 0; }
.sift-i::placeholder { color: var(--ash); }
.sift-b { flex: 0 0 auto; padding: 0 15px; font-size: 13px; font-weight: 800; color: #fff; background: var(--pop); }

.wave-nav { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 3px solid var(--jet); }
.nav-blk { flex: 1 0 auto; min-width: 76px; padding: 9px 8px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--slate); border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-blk:hover { color: #fff; background: var(--pop); }
.nav-blk--hot { color: #fff; background: var(--jet); }

/* 色块标题 */
.blockhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px var(--m) 10px; }
.bh-txt { padding: 5px 14px; font-size: 15px; font-weight: 900; letter-spacing: 1px; color: #fff; background: var(--pop); }
.bh-lnk { font-size: 12px; font-weight: 700; color: var(--jet); border-bottom: 2px solid var(--pop); }

/* 卡片：超大描边序号压角 */
.beats { counter-reset: bt; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 10px; padding: 0 var(--m) 8px; }
@media (min-width: 601px) { .beats { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.beat { counter-increment: bt; position: relative; min-width: 0; }
.beat-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--smoke) url("../img/load.gif") center / 34px 34px no-repeat; }
.beat-img { width: 100%; height: 100%; object-fit: cover; }
.beat-num {
    position: absolute; left: -3px; top: -8px; z-index: 2;
    font-size: 34px; font-weight: 900; font-style: italic; line-height: 1;
    color: transparent; -webkit-text-stroke: 2px var(--pop);
    pointer-events: none;
}
.beat-num::before { content: counter(bt); }
.beat-tag { position: absolute; right: 0; bottom: 0; padding: 1px 7px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--jet); }
.beat-t { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beat-s { display: block; font-size: 11px; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.march { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 14px var(--m) 20px; }
.march-k { min-width: 36px; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--jet); background: var(--smoke); }
.march-k:hover, .march-k--lead { color: #fff; background: var(--pop); }

/* 详情 */
.burst { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "grid" "go" "word"; }
.burst-top { grid-area: top; display: flex; gap: 13px; padding: 16px var(--m); background: var(--jet); color: #fff; }
.bt-art { flex: 0 0 110px; aspect-ratio: 2 / 3; overflow: hidden; background: #22262d url("../img/load.gif") center / 34px 34px no-repeat; }
.bt-art img { width: 100%; height: 100%; object-fit: cover; }
.bt-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.burst-h1 { font-size: clamp(19px, 5.4vw, 26px); font-weight: 900; line-height: 1.24; }
.burst-score { margin-top: 6px; font-size: 30px; font-weight: 900; font-style: italic; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--pop); }
.burst-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.btag { padding: 2px 9px; font-size: 11.5px; color: #fff; background: rgba(255,255,255,.16); }
.btag--go { background: var(--pop); font-weight: 700; }

.burst-grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; border-bottom: 1px solid var(--edge); }
.bg-cell { display: flex; gap: 7px; padding: 9px 12px; font-size: 12.5px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.bg-cell--wide { grid-column: 1 / -1; }
.bg-k { flex: 0 0 auto; font-weight: 700; color: var(--jet); }
.bg-v { flex: 1 1 auto; min-width: 0; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-cell--wide .bg-v { white-space: normal; }
.bg-v a { color: var(--pop); }

.burst-go { grid-area: go; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.go-1, .go-2 { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.go-1 { color: #fff; background: var(--pop); }
.go-2 { color: #fff; background: var(--jet); }

.burst-word { grid-area: word; padding: 16px var(--m) 4px; }
.bw-h { display: inline-block; margin-bottom: 9px; padding: 4px 12px; font-size: 14px; font-weight: 900; color: #fff; background: var(--jet); }
.bw-p { margin-bottom: 9px; font-size: 13.5px; line-height: 1.9; color: var(--slate); }
.bw-p strong { color: var(--jet); }

.chain { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px var(--m) 16px; }
.chain-a { max-width: 100%; padding: 4px 9px; font-size: 12px; color: var(--slate); background: var(--smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-a:hover { color: #fff; background: var(--pop); }

.wave-end { margin-top: 14px; padding: 16px var(--m) 22px; background: var(--jet); color: rgba(255,255,255,.55); }
.we-fr { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 12px; text-align: center; }
.we-fr b { display: block; margin-bottom: 6px; font-size: 13px; color: #fff; }
.we-fr a { display: inline-block; margin: 2px 7px; color: rgba(255,255,255,.7); }
.we-fr a:hover { color: var(--pop); }
.we-tx { font-size: 11.5px; line-height: 1.85; text-align: center; }
.we-cp { margin-top: 10px; font-size: 11.5px; text-align: center; }
.we-cp a { margin: 0 5px; color: rgba(255,255,255,.75); }
.we-cp a:hover { color: var(--pop); }