/* ==========================================================
   视频模板卡片 + 封面画面（首页与站内共用）
   ========================================================== */
.mbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.mcats { display: flex; gap: 6px; flex-wrap: wrap; }
.mcats a.category-link { display: inline-flex; align-items: center; }
.mcats :is(button, a.category-link) { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--muted); border: 1px solid var(--border-muted); transition: all .2s; }
.mcats :is(button, a.category-link):hover { color: var(--fg); border-color: var(--border); }
.mcats :is(button, a.category-link).on { color: #0d1117; background: var(--fg); border-color: var(--fg); }
.mtabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--hair); }
.mtabs button { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--muted); }
.mtabs button.on { background: var(--bg-3); color: var(--fg); }
/* Homepage toolbar: categories on the left; type + sort together on the right (one row on desktop, one scroll row + one tool row on phones).
   创新区 / 待认领 open the template center, so they sit after a divider and carry an arrow. */
.mtools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mtools .mtype .mtabs { margin: 0; }
.mtools .mtabs button { white-space: nowrap; flex: 0 0 auto; }
.msort { display: none; height: 34px; padding: 0 28px 0 12px; border-radius: 999px; border: 1px solid var(--border-muted); background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238b949e' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; color: var(--fg); font: inherit; font-size: 13px; appearance: none; -webkit-appearance: none; }
.mcats button + a.category-link { position: relative; margin-left: 13px; }
.mcats button + a.category-link::before { content: ''; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 1px; background: var(--border-muted); pointer-events: none; }
.mcats a.category-link::after { content: '↗'; margin-left: 4px; font-size: .82em; opacity: .55; }

.art-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.vcard { min-width: 0; }
.vthumb { aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--hair); transition: box-shadow .3s, transform .4s var(--ease); }
.vcard:hover .vthumb { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(240,246,252,.16), 0 24px 50px -24px rgba(0,0,0,.9); }
.vthumb .motion-art { transition: filter .3s; }
.vthumb .art-micro, .vthumb .art-bottom { display: none; }
.vthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 6; opacity: 0; transition: opacity .3s; }
.vthumb video.ready { opacity: 1; }
.vcard { position: relative; }
.vpreview-play { position: absolute; top: 10px; right: 10px; z-index: 10; display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid rgba(240,246,252,.35); border-radius: 50%; color: #fff; background: rgba(1,4,9,.8); cursor: pointer; }
.vpreview-play[hidden] { display: none; }
.vpreview-play:hover { border-color: var(--accent); }
.vpreview-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vbadge { position: absolute; z-index: 8; left: 10px; top: 10px; display: flex; gap: 4px; }
.vbadge span { font-family: var(--mono); font-size: 10.5px; color: #fff; background: rgba(1,4,9,.55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 999px; }
.vbadge span.ref { background: #1f6feb; }
.vtc { position: absolute; z-index: 8; right: 10px; bottom: 12px; font-family: var(--mono); font-size: 10.5px; color: #fff; background: rgba(1,4,9,.55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 999px; }
.vscrub { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
.vscrub i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.9); }
.vuse { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.vuse span { font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: #fff; color: #0d1117; transform: translateY(6px); transition: transform .3s var(--ease); }
.vcard:hover .vuse, .vthumb:focus-visible .vuse { opacity: 1; }
.vcard:hover .vuse span { transform: none; }
.vcard:hover .motion-art { filter: brightness(.6) saturate(.9); }
.vmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.vmeta h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; min-height: 2.8em; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vprice { flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.vprice.updating { max-width: 52%; white-space: normal; text-align: right; line-height: 1.4; }
.vprice.free { color: var(--green); }
.vsub { margin-top: 4px; font-size: 13px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--muted); }
.market-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--subtle); flex-wrap: wrap; }
/* ---- 封面画面：原创图形，按帧进度 --p 驱动 ---- */
.motion-art {
  --p: .62;
  aspect-ratio: 1.38; position: relative; overflow: hidden; isolation: isolate;
  container-type: inline-size; text-align: left; color: #111; background: #eee;
  font-family: "Mona Sans", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
}
.art-micro { position: absolute; z-index: 5; top: 7%; left: 7%; right: 7%; display: flex; justify-content: space-between; font: 1.75cqw/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.art-bottom { position: absolute; z-index: 5; bottom: 7%; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: flex-end; font: 1.65cqw/1.55 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.art-display { position: absolute; font-weight: 600; line-height: .9; letter-spacing: -0.065em; }
.art-in { --k: clamp(0, calc((var(--p) - var(--d, 0)) * 5), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 30%)); display: inline-block; }

/* 1 标题动画 · Prism */
.art-prism { background: #e9eadf; color: #1b231a; }
.art-prism .art-display { left: 7%; top: 22%; font-size: 17cqw; z-index: 3; }
.art-prism .art-display em { font-style: normal; color: var(--em, #596653); }
.prism-star { position: absolute; right: -12%; top: 6%; width: 74%; aspect-ratio: 1; z-index: 1; transform: rotate(calc(var(--p) * 120deg)); filter: drop-shadow(6px 14px 10px rgba(80,90,60,.25)); }

/* 2 产品发布 · Noir */
.art-noir { background: radial-gradient(ellipse at 56% 36%, #4a4e57, #1f2229 60%, #121419); color: #f1f4fb; }
.art-noir .art-display { left: 7%; top: 20%; font-size: 13cqw; font-weight: 400; z-index: 3; }
.noir-render { position: absolute; right: -2%; bottom: -4%; width: 62%; z-index: 2; transform: rotate(calc(-14deg + var(--p) * 10deg)) translateY(calc((1 - var(--p)) * 8%)); filter: drop-shadow(8px 18px 14px rgba(0,0,0,.6)); }
.noir-sweep { position: absolute; inset: 0; z-index: 4; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(calc((var(--p) * 2 - 1) * 100%)); mix-blend-mode: screen; }

/* 3 数据短片 · Bloom */
.art-data { background: #f0bd9e; color: #4f2316; }
.art-data .art-display { left: 7%; top: 21%; font-size: 10.6cqw; line-height: 1.02; font-weight: 500; z-index: 3; }
.art-data .data-num { position: absolute; right: 8%; top: 20%; font-size: 5cqw; font-weight: 500; letter-spacing: -0.04em; z-index: 3; }
.data-bars { position: absolute; right: 5%; bottom: 17%; width: 62%; height: 60%; display: flex; align-items: flex-end; gap: 6%; }
.data-bars i { flex: 1; height: var(--h); border-radius: 60% 60% 0 0; background: #c75f43; transform-origin: bottom; transform: scaleY(clamp(.05, calc((var(--p) - var(--d)) * 3), 1)); }
.data-bars i:nth-child(2) { background: #a3402e; } .data-bars i:nth-child(3) { background: #7a2d25; } .data-bars i:nth-child(4) { background: #5c2620; }

/* 4 片头片尾 · Afterhours */
.art-after { background: #121413; color: #d2ff72; }
.art-after .art-display { left: -4%; top: 24%; font-size: 28cqw; font-weight: 800; line-height: .8; letter-spacing: -0.075em; transform: rotate(-9deg) translateX(calc(var(--p) * -6%)); }
.art-after .art-display span { display: block; margin-left: 11%; color: transparent; -webkit-text-stroke: .25cqw #d2ff72; }
.after-stripe { position: absolute; z-index: 4; width: 190%; height: 10%; left: -45%; top: 46%; background: #d2ff72; color: #13200f; transform: rotate(27deg) translateX(calc(var(--p) * -12%)); display: flex; align-items: center; justify-content: center; font: 600 1.9cqw var(--mono); letter-spacing: 1.2cqw; white-space: nowrap; }

/* 5 口播字幕 · 竖屏 */
.art-caption { background: linear-gradient(140deg, #2a1d3d, #120d1d 70%); color: #fff; }
.cap-phone { position: absolute; left: 50%; top: 7%; bottom: 7%; aspect-ratio: 9 / 16; transform: translateX(-50%); border-radius: 3cqw; overflow: hidden; border: .3cqw solid rgba(255,255,255,.18); background: linear-gradient(180deg, #6f4d8f, #2b1f42 55%, #17111f); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.5); }
.cap-phone::before { content: ""; position: absolute; left: 22%; right: 22%; top: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f7c7a8, #b6788f 60%, transparent 62%); opacity: .8; }
.cap-phone::after { content: ""; position: absolute; left: 12%; right: 12%; top: 46%; height: 34%; border-radius: 40% 40% 0 0; background: #24193a; }
.cap-lines { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 13%; text-align: center; font-size: 3.5cqw; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cap-lines span { color: rgba(255,255,255,.45); }
.cap-lines span.on { color: #fff; }
.cap-lines span.hl { color: #1b1426; background: #ffd84d; border-radius: .6cqw; padding: 0 .6cqw; }
.cap-side { position: absolute; z-index: 3; right: 7%; top: 30%; display: flex; flex-direction: column; gap: 1.6cqw; }
.cap-side i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: rgba(255,255,255,.22); }
.art-caption .cap-tag { position: absolute; z-index: 5; left: 7%; top: 44%; font: 600 4.6cqw/1.05 var(--font); letter-spacing: -0.04em; color: #fff; }
.art-caption .cap-tag small { display: block; font: 1.7cqw var(--mono); letter-spacing: .08em; color: #c7b3e6; margin-top: 2cqw; }

/* 6 转场 · Shift */
.art-wipe { background: #0e1a2b; color: #eaf2ff; }
.wipe-a, .wipe-b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15cqw; letter-spacing: -0.07em; }
.wipe-a { background: #0e1a2b; color: #dbe8ff; }
.wipe-b { background: #ff6a3d; color: #1c0d06; clip-path: polygon(calc(var(--p) * 160% - 30%) 0, 160% 0, 160% 100%, calc(var(--p) * 160% - 60%) 100%); }
.wipe-bar { position: absolute; top: -10%; bottom: -10%; width: 5%; background: #ffd84d; left: calc(var(--p) * 160% - 47%); transform: skewX(-17deg); z-index: 3; box-shadow: 0 0 3cqw rgba(255,216,77,.6); }
.art-wipe .art-micro, .art-wipe .art-bottom { color: #fff; mix-blend-mode: difference; }

/* 7 音乐可视化 · Pulse */
.art-wave { background: radial-gradient(circle at 50% 50%, #18233a, #070b14 70%); color: #bfe3ff; }
.wave-ring { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.wave-ring i { position: absolute; left: 50%; top: 50%; width: 1.1cqw; height: calc(4cqw + var(--a) * 9cqw); margin-left: -.55cqw; border-radius: 1cqw; transform-origin: 50% 0; transform: rotate(var(--r)) translateY(14cqw); background: linear-gradient(180deg, #79c0ff, #a371f7 60%, #f778ba); }
.wave-core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.92 + var(--beat, 0) * .12)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #79c0ff 40%, #1f6feb 75%); box-shadow: 0 0 6cqw rgba(88,166,255,.55); display: grid; place-items: center; color: #08111f; font: 700 2.4cqw var(--mono); }

/* 8 产品发布 · Still */
.art-still { background: radial-gradient(ellipse at 70% 28%, #e6d9c2, #c8b392); color: #524631; }
.art-still::before { content: ""; position: absolute; width: 90%; height: 140%; left: 55%; top: -10%; background: linear-gradient(90deg, transparent, rgba(74,57,38,.18), transparent); transform: rotate(35deg) translateX(calc(var(--p) * 10%)); filter: blur(6px); }
.art-still .art-display { left: 8%; top: 22%; font-family: Georgia, "Songti SC", serif; font-weight: 400; font-size: 18.5cqw; z-index: 3; }
.still-bottle { position: absolute; z-index: 2; right: 12%; bottom: 10%; width: 25%; height: 62%; border-radius: 12% 12% 18% 18% / 6% 6% 10% 10%; background: linear-gradient(90deg, #6b3f1e, #b8763c 35%, #e2a565 48%, #94562a 70%, #4c2a12); box-shadow: 2cqw 3cqw 4cqw rgba(60,40,20,.35); transform: translateY(calc((1 - var(--p)) * 6%)); }
.still-bottle::before { content: ""; position: absolute; left: 14%; right: 14%; top: -18%; height: 20%; border-radius: 6% 6% 0 0; background: linear-gradient(90deg, #c9c3b6, #f5f1e8 45%, #a8a196); }
.still-bottle::after { content: "STILL."; position: absolute; left: 0; right: 0; top: 34%; height: 30%; background: #f2ece0; display: grid; place-items: center; font: 600 1.6cqw var(--mono); letter-spacing: .1em; color: #6b5a3f; }

/* 9 年度报告 · Signal */
.art-signal { background: #d6e8f1; color: #183a58; }
.art-signal .art-display { left: 7%; top: 22%; font-size: 27cqw; font-weight: 600; letter-spacing: -0.09em; z-index: 3; }
.art-signal .art-display small { font-size: 8.5cqw; vertical-align: top; letter-spacing: -0.05em; margin-left: 1%; }
.signal-waves { position: absolute; right: -16%; top: 50%; width: 78%; aspect-ratio: 1; transform: translateY(-50%); }
.signal-waves i { position: absolute; inset: calc(var(--n) * 3%); border: .22cqw solid rgba(24,58,88,.5); border-radius: 50%; transform: scale(calc(.94 + var(--p) * .06)) rotate(calc(var(--n) * 4deg)); }



.vbadge { top: auto; bottom: 12px; }
.vtc { bottom: 12px; }
.vthumb .art-prism .art-display { font-size: 15cqw; }
@media (max-width: 1180px) { .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .mcats::-webkit-scrollbar { display: none; }
  .mcats :is(button, a.category-link) { flex: 0 0 auto; }
  .mbar { gap: 12px; }
  .mtools { width: 100%; margin-left: 0; justify-content: space-between; }
}
@media (max-width: 480px) {
  .mtools { gap: 8px; flex-wrap: wrap; }
  .mtools .mtabs { gap: 0; }
  .mtools .mtabs button { padding: 0 9px; font-size: 13px; }
  .mtools #mTabs { display: none; }
  .mtools .msort { display: block; margin-left: auto; }
}
@media (max-width: 640px) { .art-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1680px) {
  .mcats :is(button, a.category-link) { height: 38px; padding: 0 16px; font-size: 15px; }
  .mtabs button { height: 32px; font-size: 14.5px; }
  .art-grid { gap: 48px 28px; }
  .vmeta h3 { font-size: 17px; } .vprice { font-size: 13px; } .vsub { font-size: 14.5px; }
  .vbadge span, .vtc { font-size: 12px; }
  .market-bottom { font-size: 14px; }
}
@media (min-width: 2200px) { .vmeta h3 { font-size: 19px; } .vsub { font-size: 15.5px; } }
@media (max-width: 640px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } }

/* Media retains its entire frame in the shared landscape card. */
.vthumb > .template-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.vthumb > .motion-art { height:100%; aspect-ratio:auto; }

/* Home loads base.css without app.css; progress paint must use a shared token. */
.vsupport-progress{display:flex;align-items:center;gap:8px;height:16px;margin-top:5px;color:var(--subtle);font:10px/16px var(--mono);text-decoration:none;min-width:0}.vsupport-progress progress{display:block;flex:1 1 0%;min-width:24px;width:100%;height:5px;border:0;border-radius:999px;overflow:hidden;-webkit-appearance:none;appearance:none;background:var(--border,#30363d);color:var(--purple,#a371f7);accent-color:var(--purple,#a371f7)}.vsupport-progress progress::-webkit-progress-bar{background:var(--border,#30363d);border-radius:999px}.vsupport-progress progress::-webkit-progress-value{background:var(--purple,#a371f7);border-radius:999px}.vsupport-progress progress::-moz-progress-bar{background:var(--purple,#a371f7);border-radius:999px}.vsupport-progress>span{flex:0 1 auto;max-width:65%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vsupport-progress:hover{color:var(--fg)}.vsupport-progress:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:3px}
.vcard[data-support-pending="true"] .vprice{max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;line-height:1.5}

@media(max-width:560px){.idx-tools{min-width:0;max-width:100%}.idx-tools .mtabs{max-width:100%;flex-wrap:wrap;border-radius:16px}.idx-tools .mtabs a{min-height:32px}}