@charset "utf-8";

/* CUBE · 拼贴风 —— grid dense 不规则跨格，图上叠字，无文字行 */

:root {
    --spark: #4f46e5;
    --spark-w: #eeecfd;
    --card: #ffffff;
    --fog: #f4f5f7;
    --seam: #e3e5ea;
    --coal: #14161b;
    --stone: #5b6270;
    --haze: #969dab;
    --pd: 13px;
}

: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]) { --spark: #be123c; --spark-w: #fdecef; }
: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]) { --spark: #0f766e; --spark-w: #e6f4f2; }

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

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, Arial, sans-serif;
    font-size: 14px; line-height: 1.6; color: var(--coal);
    background: var(--card); max-width: 880px; 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; }
.vanish { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

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

.plate-hd { display: flex; align-items: center; gap: 11px; padding: 13px var(--pd); background: var(--fog); border-bottom: 1px solid var(--seam); }
.hd-badge img { height: 33px; width: auto; }
.scan { flex: 1 1 auto; display: flex; min-width: 0; height: 36px; background: var(--fog); border-radius: 6px; overflow: hidden; }
.scan-i { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 13px; color: var(--coal); background: transparent; border: 0; outline: 0; }
.scan-i::placeholder { color: var(--haze); }
.scan-s { flex: 0 0 auto; padding: 0 15px; font-size: 13px; font-weight: 600; color: #fff; background: var(--spark); }

.plate-cats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; padding: 11px var(--pd); border-bottom: 1px solid var(--seam); }
@media (min-width: 561px) { .plate-cats { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.cat-b { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 3px 5px; font-size: 12.5px; color: var(--stone); background: var(--fog); border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-b:hover { color: var(--spark); background: var(--spark-w); }
.cat-b--pin { color: #fff; background: var(--spark); }

.slab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px var(--pd) 9px; }
.slab-t { position: relative; padding-left: 13px; font-size: 16px; font-weight: 800; }
.slab-t::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; background: var(--spark); transform: rotate(45deg); }
.slab-a { font-size: 12px; color: var(--haze); }
.slab-a:hover { color: var(--spark); }

/* 拼贴：每 7 块中的第 1 块跨 2×2 */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-flow: dense; gap: 8px; padding: 0 var(--pd) 8px; }
@media (min-width: 481px) { .mosaic { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 721px) { .mosaic { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.brick { position: relative; min-width: 0; min-height: 0; }
.brick-face { position: relative; height: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; background: var(--fog) url("../img/load.gif") center / 34px 34px no-repeat; }
.brick-img { width: 100%; height: 100%; object-fit: cover; }
.brick-veil { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 8px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.brick-t { display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brick-m { display: block; font-size: 11px; color: rgba(255,255,255,.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brick-dot { position: absolute; right: 7px; top: 7px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #fff; background: var(--spark); border-radius: 4px; }

.brick:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.brick:nth-child(7n+1) .brick-face { aspect-ratio: auto; }
.brick:nth-child(7n+1) .brick-t { font-size: 16px; white-space: normal; }
.brick:nth-child(7n+1) .brick-veil { padding: 34px 12px 11px; }

.hop { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px var(--pd) 20px; }
.hop-b { min-width: 38px; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--stone); background: var(--fog); border-radius: 6px; }
.hop-b:hover, .hop-b--set { color: #fff; background: var(--spark); }

/* 详情 */
.panel { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "specs" "do" "copy"; }
.panel-top { grid-area: top; position: relative; display: flex; gap: 13px; padding: 16px var(--pd) 13px; overflow: hidden; isolation: isolate; }
.top-blur { position: absolute; inset: -16%; z-index: -2; background-image: var(--face); background-size: cover; background-position: center 30%; filter: blur(24px) saturate(1.25); opacity: .42; transform: scale(1.1); }
.top-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.93) 72%, var(--card)); }
.top-art { flex: 0 0 112px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--fog) url("../img/load.gif") center / 34px 34px no-repeat; box-shadow: 0 8px 20px rgba(20,22,27,.2); }
.top-art img { width: 100%; height: 100%; object-fit: cover; }
.top-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.panel-h1 { font-size: clamp(18px, 5.2vw, 25px); font-weight: 800; line-height: 1.28; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ptag { padding: 2px 9px; font-size: 11.5px; color: var(--stone); background: rgba(255,255,255,.86); border: 1px solid var(--seam); border-radius: 4px; }
.ptag--go { color: #fff; background: var(--spark); border-color: transparent; }

.panel-specs { grid-area: specs; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 12px var(--pd) 0; }
.spec { display: flex; gap: 7px; padding: 7px 10px; font-size: 12.5px; background: var(--fog); border-radius: 6px; }
.spec--w { grid-column: 1 / -1; }
.spec-k { flex: 0 0 auto; color: var(--haze); }
.spec-v { flex: 1 1 auto; min-width: 0; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec--w .spec-v { white-space: normal; }
.spec-v a { color: var(--spark); }

.panel-do { grid-area: do; display: flex; gap: 10px; padding: 13px var(--pd) 0; }
.do-1, .do-2 { flex: 1 1 0; min-height: 45px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; border-radius: 8px; }
.do-1 { color: #fff; background: var(--spark); }
.do-2 { color: var(--spark); background: var(--spark-w); }

.panel-copy { grid-area: copy; padding: 16px var(--pd) 4px; }
.copy-h { margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.copy-p { margin-bottom: 9px; font-size: 13.5px; line-height: 1.9; color: var(--stone); }
.copy-p strong { color: var(--coal); }

.roll { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px var(--pd) 16px; }
.roll-a { max-width: 100%; padding: 4px 9px; font-size: 12px; color: var(--stone); background: var(--fog); border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roll-a:hover { color: var(--spark); background: var(--spark-w); }

.plate-end { margin-top: 12px; padding: 16px var(--pd) 22px; background: var(--fog); border-top: 1px solid var(--seam); }
.end-fri { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--seam); font-size: 12px; text-align: center; color: var(--haze); }
.end-fri b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--coal); }
.end-fri a { display: inline-block; margin: 2px 7px; color: var(--stone); }
.end-fri a:hover { color: var(--spark); }
.end-leg { font-size: 11.5px; line-height: 1.85; color: var(--haze); text-align: center; }
.end-sig { margin-top: 10px; font-size: 11.5px; color: var(--haze); text-align: center; }
.end-sig a { margin: 0 5px; }
.end-sig a:hover { color: var(--spark); }