@charset "utf-8";
/** 本文件仅保留：1) 页面主题变量（.template-page 变量块） 2) 页面专属样式 3) 与公共层不同的覆盖规则。
 * 其余公共样式已统一抽取至 inc_style.css（全站公共样式表，先于本文件加载）。*/
.template-page { overflow-x: clip; --template-blue: #246bfd; --template-blue-dark: color-mix(in srgb, var(--template-blue) 78%, #071b50 22%); --template-cyan: color-mix(in srgb, var(--template-blue) 62%, #fff 38%); --template-ink: #17233b; --template-muted: #6b778c; --template-line: #e6edf7; --template-surface: #f5f7fb; --template-shadow: 0 1.25rem 3.5rem rgba(38, 68, 119, .09); background: radial-gradient(circle at 8% 30%, rgba(36, 107, 253, .045), transparent 24rem),
    radial-gradient(circle at 94% 66%, rgba(19, 191, 229, .04), transparent 28rem),
    var(--template-surface); color: var(--template-ink); }
.template-search-hero { position: relative; z-index: 20; min-height: 25.5rem; overflow: visible; background: radial-gradient(ellipse at 8% 0%, rgba(107, 190, 255, .48) 0%, transparent 45%),
    radial-gradient(ellipse at 92% 100%, rgba(94, 224, 220, .2) 0%, transparent 38%),
    linear-gradient(135deg, #eef7ff 0%, #f7fbff 54%, #f1f8ff 100%); color: var(--template-ink); border-bottom: 1px solid rgba(208, 226, 247, .9); isolation: isolate; }
.template-search-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; background-image: linear-gradient(rgba(36, 107, 253, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 107, 253, .045) 1px, transparent 1px); background-size: 6rem 6rem; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .58), transparent 92%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .58), transparent 92%); animation: template-grid-flow 24s linear infinite; pointer-events: none; }
.template-search-hero::after { content: ""; position: absolute; z-index: 0; top: -10rem; left: 50%; width: 42rem; height: 26rem; border-radius: 50%; background: rgba(73, 172, 255, .2); filter: blur(70px); transform: translateX(-50%); animation: template-aurora 9s ease-in-out infinite alternate; pointer-events: none; }
/*---------- 模板主题装饰层：光束 / 地平线 / 十字光标 / 线框窗口 ----------*/
.template-hero-deco { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
/*斜切光束：缓慢扫掠的柔光柱，营造纵深*/
.template-hero-beam { position: absolute; top: -32%; height: 164%; width: 9rem; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(36, 107, 253, .08) 50%, transparent); filter: blur(6px); animation: template-beam-sweep 9s ease-in-out infinite; }
.template-hero-beam-a { left: 24%; }
.template-hero-beam-b { left: 64%; width: 13rem; background: linear-gradient(90deg, transparent, rgba(19, 191, 229, .11) 50%, transparent); animation-delay: -4.5s; }
/*地平线光带：底部居中渐变光刃，替代平板分隔线*/
.template-hero-horizon { position: absolute; left: 50%; bottom: 0; width: min(64rem, 86%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(36, 107, 253, .24) 38%, rgba(19, 191, 229, .3) 62%, transparent); box-shadow: 0 0 1.4rem rgba(115, 191, 255, .4), 0 -1.2rem 3.5rem rgba(255, 255, 255, .8); }
/*十字光标：精密定位标记*/
.template-hero-cross { position: absolute; width: 1rem; height: 1rem; opacity: .55; animation: template-cross-blink 4.5s ease-in-out infinite; }
.template-hero-cross::before,
.template-hero-cross::after { content: ""; position: absolute; background: linear-gradient(135deg, #246bfd, #61c9dc); border-radius: 1px; }
.template-hero-cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.template-hero-cross::after { left: 0; top: 50%; width: 100%; height: 1px; }
.template-hero-cross-a { left: 38%; top: 16%; }
.template-hero-cross-b { right: 34%; bottom: 24%; animation-delay: -2.2s; }
/*悬浮浏览器线框窗口：毛玻璃骨架，呼应「模板/页面搭建」主题*/
.template-hero-window { position: absolute; width: 12.5rem; padding: .55rem .6rem .7rem; border: 1px solid rgba(157, 194, 234, .7); border-radius: .8rem; background: rgba(255, 255, 255, .52); box-shadow: 0 1.2rem 2.6rem rgba(43, 91, 153, .14); backdrop-filter: blur(6px); animation: template-window-float 7s ease-in-out infinite; }
.template-hero-window-a { left: 2%; top: 50%; transform: translateY(-50%) rotate(-5deg); }
.template-hero-window-b { right: 6%; top: 13%; width: 10.5rem; transform: rotate(4.5deg); animation-delay: -2.8s; }
.template-window-bar { display: flex; gap: .28rem; margin-bottom: .5rem; }
.template-window-bar i { width: .42rem; height: .42rem; border-radius: 50%; background: rgba(91, 130, 176, .35); }
.template-window-bar i:first-child { background: #ffa3b0; }
.template-window-bar i:nth-child(2) { background: #ffd591; }
.template-window-bar i:nth-child(3) { background: #95e6c0; }
.template-window-body { display: flex; gap: .5rem; }
.template-window-side { flex: 0 0 22%; border-radius: .4rem; background: rgba(36, 107, 253, .08); border: 1px solid rgba(113, 163, 218, .25); }
.template-window-main { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.template-window-line { height: .42rem; border-radius: 999px; background: rgba(84, 133, 191, .22); }
.template-window-line.line-lg { width: 88%; height: .5rem; background: linear-gradient(90deg, #246bfd, #67cce4); box-shadow: 0 .2rem .5rem rgba(36, 107, 253, .18); }
.template-window-line.line-md { width: 64%; }
.template-window-blocks { display: flex; gap: .35rem; margin-top: .1rem; }
.template-window-blocks i { flex: 1; height: 1.9rem; border-radius: .4rem; background: rgba(36, 107, 253, .08); border: 1px solid rgba(113, 163, 218, .25); }
/*悬浮手机线框：呼应 APP/小程序模板*/
.template-hero-phone { position: absolute; right: 17%; bottom: -2.2rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 5.4rem; padding: .7rem .55rem .9rem; border: 1px solid rgba(157, 194, 234, .7); border-radius: 1rem; background: rgba(255, 255, 255, .52); box-shadow: 0 1.2rem 2.6rem rgba(43, 91, 153, .14); backdrop-filter: blur(6px); transform: rotate(6deg); animation: template-window-float 8s ease-in-out infinite; animation-delay: -4s; }
.template-phone-notch { width: 1.6rem; height: .28rem; border-radius: 999px; background: rgba(91, 130, 176, .35); }
.template-phone-line { height: .34rem; border-radius: 999px; background: rgba(84, 133, 191, .22); }
.template-phone-line.line-lg { width: 82%; background: linear-gradient(90deg, #246bfd, #67cce4); box-shadow: 0 .2rem .5rem rgba(36, 107, 253, .18); }
.template-phone-line.line-md { width: 64%; }
.template-phone-line.line-sm { width: 44%; }
.template-phone-block { width: 100%; height: 2.6rem; border-radius: .5rem; background: rgba(36, 107, 253, .08); border: 1px solid rgba(113, 163, 218, .25); }
.template-hero-shape { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.template-hero-shape::before { content: ""; position: absolute; width: 34rem; height: 24rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(93, 184, 255, .18), rgba(255, 255, 255, .24) 48%, transparent 72%); filter: blur(8px); animation: template-panel-drift 12s ease-in-out infinite alternate; }
.template-hero-shape::after { content: ""; position: absolute; width: 15rem; height: 15rem; border: 1px solid rgba(105, 168, 224, .2); border-top-color: rgba(36, 107, 253, .4); border-radius: 50%; box-shadow: inset 0 0 0 1.5rem rgba(36, 107, 253, .045), 0 0 4rem rgba(110, 191, 255, .18); animation: template-orbit-float 8s ease-in-out infinite; }
.template-hero-shape-one::before { left: -12rem; top: -10rem; }
.template-hero-shape-two::before { right: -12rem; bottom: -11rem; background: radial-gradient(ellipse at center, rgba(150, 230, 255, .16), rgba(255, 255, 255, .04) 50%, transparent 72%); }
.template-hero-shape-one::after { top: calc(50% - 7.5rem); left: 4.5%; }
.template-hero-shape-two::after { right: 6%; bottom: -5rem; animation-delay: -3s; }
.template-search-shell { position: relative; z-index: 1; padding-top: 1.5rem; }
.template-hero-copy { position: relative; z-index: 2; margin: 0 auto; color: var(--template-ink); text-align: center; }
.template-hero-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .8rem; padding: .42rem .8rem; border: 1px solid rgba(36, 107, 253, .16); border-radius: 999px; background: rgba(255, 255, 255, .66); color: var(--template-blue); font-size: .78rem; font-weight: 600; letter-spacing: .08em; box-shadow: 0 .35rem 1rem rgba(36, 107, 253, .1); backdrop-filter: blur(6px); }
.template-hero-copy h1 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 780; line-height: 1.22; letter-spacing: -.03em; filter: drop-shadow(0 .35rem 1rem rgba(52, 110, 177, .12)); }
.template-hero-copy h1 span { color: var(--template-blue); background: linear-gradient(105deg, #246bfd 10%, #13bfe5 75%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.template-hero-kicker i { animation: template-icon-pulse 2.8s ease-in-out infinite; }
.template-hero-copy p { margin: .8rem 0 0; color: var(--template-muted); font-size: .98rem; line-height: 1.8; }
.template-search-stage { position: relative; z-index: 2; width: 100%; margin-top: 1.65rem; }
.template-search-form { position: relative; z-index: 2; display: flex; width: min(52rem, calc(100% - 2rem)); height: 3.625rem; align-items: center; margin: 0 auto; padding: .32rem; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, rgba(255, 255, 255, .85), rgba(186, 235, 255, .6) 52%, rgba(255, 255, 255, .8)) border-box; box-shadow: 0 1.25rem 3rem rgba(8, 42, 110, .3), 0 .3rem .9rem rgba(8, 42, 110, .14); transition: box-shadow .2s ease; animation: template-search-breathe 5s ease-in-out infinite; }
.template-search-form:focus-within { box-shadow: 0 1.25rem 3.2rem rgba(8, 42, 110, .34), 0 0 0 .25rem rgba(255, 255, 255, .22); animation: none; }
@keyframes template-grid-flow {
  to { background-position: 6rem 6rem; }
}
@keyframes template-aurora {
  from { opacity: .55; transform: translateX(-56%) scale(.92); }
  to { opacity: 1; transform: translateX(-44%) scale(1.08); }
}
@keyframes template-panel-drift {
  from { translate: 0 0; }
  to { translate: 1.5rem .8rem; }
}
@keyframes template-orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -1rem, 0) rotate(8deg); }
}
@keyframes template-icon-pulse {
  0%, 100% { opacity: .72; transform: scale(.92) rotate(-5deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(5deg); }
}
@keyframes template-search-breathe {
  0%, 100% { box-shadow: 0 1.25rem 3rem rgba(8, 42, 110, .3), 0 .3rem .9rem rgba(8, 42, 110, .14); }
  50% { box-shadow: 0 1.35rem 3.4rem rgba(8, 42, 110, .36), 0 0 2rem rgba(255, 255, 255, .18); }
}
@keyframes template-beam-sweep {
  0%, 100% { transform: rotate(18deg) translateX(-3rem); opacity: .45; }
  50% { transform: rotate(18deg) translateX(3rem); opacity: 1; }
}
@keyframes template-cross-blink {
  0%, 100% { opacity: .22; transform: scale(.85) rotate(0deg); }
  50% { opacity: .6; transform: scale(1.08) rotate(90deg); }
}
@keyframes template-window-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -.9rem; }
}
.template-search-leading { flex: 0 0 auto; margin-left: 1.15rem; color: #7d8ba1; font-size: 1.05rem; }
.template-search-form input[type="search"] { min-width: 0; flex: 1; height: 100%; padding: 0 .85rem; border: 0; outline: 0; background: transparent; color: #26364e; font-size: 1rem; }
.template-search-form input[type="search"]::-webkit-search-cancel-button,
.template-search-form input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; }
.template-search-form input[type="search"]::-ms-clear,
.template-search-form input[type="search"]::-ms-reveal { display: none; }
.template-search-form input[type="search"]::placeholder { color: #aeb8c8; }
.template-search-clear { align-self: center; display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #a4adba; line-height: 1; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.template-search-clear svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }
.template-search-clear[hidden] { display: none; }
.template-search-clear:hover { background: #eff4fb; color: #3978e9; transform: scale(1.06); }
.template-search-clear:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(59, 131, 246, .2); }
.template-search-clear:active { transform: scale(.96); }
.template-search-divider { width: 1px; height: 1.45rem; flex: 0 0 1px; margin: 0 .45rem; background: #e4e9f1; }
.template-search-submit { display: inline-flex; height: 2.75rem; min-width: 7.25rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .45rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #3d8bff 0%, #245ef0 55%, #1f46d8 100%); color: #fff; font-size: .95rem; font-weight: 650; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 .5rem 1.2rem rgba(39, 90, 240, .32); transition: box-shadow .2s ease, transform .2s ease, filter .2s ease; }
.template-search-submit i { display: none; }
.template-search-submit:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 .55rem 1.25rem rgba(39, 103, 235, .3); transform: translateY(-1px); }
.template-hot-searches { display: flex; width: min(52rem, calc(100% - 2rem)); min-height: 1.75rem; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem .5rem; margin: 1rem auto 0; }
.template-hot-label { display: inline-flex; min-height: 1.75rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .32rem; color: #60718b; font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.template-hot-label i { display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #ffad4d, #ff5c3a); color: #fff; font-size: .58rem; line-height: 1; box-shadow: 0 .15rem .38rem rgba(242, 96, 48, .22); }
.template-hot-label i::before,
.template-hot-label span { line-height: 1; }
.template-hot-searches button,
.template-hot-searches a { display: inline-flex; min-height: 1.75rem; flex: 0 0 auto; align-items: center; justify-content: center; padding: .27rem .72rem; border: 1px solid rgba(36, 107, 253, .16); border-radius: 999px; background: rgba(255, 255, 255, .7); color: #42618e; text-decoration: none; font-size: .75rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.template-hot-searches button:hover,
.template-hot-searches button:focus-visible,
.template-hot-searches a:hover,
.template-hot-searches a:focus-visible { outline: 0; color: var(--template-blue); border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .94); box-shadow: 0 .4rem 1rem rgba(8, 42, 110, .22); transform: translateY(-1px); }
.template-advanced-filter { position: absolute; z-index: 30; top: calc(100% + .65rem); left: 50%; display: block; width: min(58rem, calc(100% - 2rem)); max-height: min(23rem, calc(100vh - 8rem)); overflow: hidden; border: 1px solid rgba(213, 225, 242, .92); border-radius: 1rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(18, 43, 87, .22); opacity: 0; visibility: hidden; transform: translate(-50%, -.6rem); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.template-advanced-filter.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.template-filter-browser { display: grid; grid-template-columns: 11rem minmax(0, 1fr); }
.template-advanced-nav { padding: 1rem 0; border-right: 1px solid #edf1f7; background: #f7f9fd; }
.template-advanced-nav button { position: relative; display: flex; width: 100%; min-height: 5.5rem; align-items: center; justify-content: center; gap: .8rem; padding: .8rem 1.2rem; border: 0; background: transparent; color: #69758a; text-align: left; }
.template-advanced-nav button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--template-blue); opacity: 0; }
.template-advanced-nav button.active { background: #fff; color: var(--template-blue); }
.template-advanced-nav button.active::before { opacity: 1; }
.template-advanced-nav button > i { flex: 0 0 auto; font-size: 1.1rem; }
.template-advanced-nav button > span { display: flex; min-width: 0; flex-direction: column; gap: .25rem; }
.template-advanced-nav strong { font-size: 1rem; font-weight: 650; }
.template-advanced-nav small { color: #8c98aa; font-size: .7rem; white-space: nowrap; }
.template-advanced-content { max-height: min(23rem, calc(100vh - 8rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c5cedb transparent; scrollbar-width: thin; }
.template-advanced-panel { display: none; padding: 1.5rem; }
.template-advanced-panel.active { display: block; }
.template-advanced-panel[data-advanced-panel="industry"] { height: min(23rem, calc(100vh - 8rem)); padding: 0; }
.advanced-industry-selector { display: grid; height: 100%; grid-template-columns: minmax(17rem, 38%) minmax(0, 1fr); }
.template-search-suggestions { max-height: min(22rem, calc(100vh - 9rem)); overflow-y: auto; padding: .55rem 0 .7rem; scrollbar-color: #c5cedb transparent; scrollbar-width: thin; }
.template-search-suggestions[hidden] { display: none; }
.template-suggestion-item { display: flex; width: 100%; min-height: 3.15rem; align-items: center; gap: .85rem; padding: .65rem 1.35rem; border: 0; background: #fff; color: #26364e; text-align: left; cursor: pointer; }
.template-suggestion-item > i { flex: 0 0 auto; color: #8b97a9; font-size: 1rem; }
.template-suggestion-item span { min-width: 0; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.template-suggestion-item mark { padding: 0; background: transparent; color: var(--template-blue); font-weight: 650; }
.template-suggestion-item.active,
.template-suggestion-item:hover { background: #f1f5ff; color: #1e64dd; }
.template-suggestion-item.active > i,
.template-suggestion-item:hover > i { color: #3c78ed; }
.template-suggestion-tip { display: flex; align-items: center; justify-content: space-between; padding: .35rem 1.35rem .5rem; color: #99a4b4; font-size: .72rem; }
.advanced-group-list,
.advanced-industry-detail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c5cedb transparent; scrollbar-width: thin; }
.advanced-group-link,
.advanced-industry-links button { border: 0; background: transparent; color: #657087; text-align: left; }
.advanced-group-link { display: flex; width: 100%; min-height: 3.55rem; align-items: center; justify-content: space-between; padding: .75rem 1.65rem; color: #2d374a; font-size: .95rem; font-weight: 600; }
.advanced-group-link[hidden] { display: none; }
.advanced-group-link i { color: #a8b2c1; font-size: .78rem; }
.advanced-group-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advanced-group-link:hover,
.advanced-group-link.active { background: #f5f8fe; color: var(--template-blue); }
.advanced-industry-links { display: none; padding: 1.4rem 2rem 2rem; }
.advanced-industry-links.active { display: block; }
.advanced-industry-links[hidden] { display: none; }
.advanced-industry-links h3 { margin: 0 0 1.15rem; color: #2c3950; font-size: 1rem; font-weight: 650; }
.advanced-industry-links > div { display: flex; flex-wrap: wrap; gap: .7rem 2rem; }
.advanced-industry-links button { min-width: 5rem; padding: .45rem 0; font-size: .9rem; white-space: nowrap; }
.advanced-industry-links button:hover,
.advanced-industry-links button.active { color: var(--template-blue); }
.advanced-industry-links button.disabled,
.advanced-industry-links button.disabled:hover { color: #b4bcc9; cursor: default; }
.advanced-type-options { display: flex; flex-direction: column; gap: .65rem; }
.advanced-type-options > button { display: flex; min-height: 5rem; align-items: center; gap: .65rem; padding: .85rem; border: 1px solid #e2eaf5; border-radius: .8rem; background: #fff; color: #526078; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.advanced-type-options > button:hover,
.advanced-type-options > button.active { border-color: #8db8ff; box-shadow: 0 .75rem 1.8rem rgba(36, 107, 253, .11); color: var(--template-blue); transform: translateY(-2px); }
.advanced-type-options > button > i { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .65rem; background: #edf4ff; font-size: 1.15rem; }
.advanced-type-options span { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.advanced-type-options strong { color: #26364e; font-size: .84rem; white-space: nowrap; }
.advanced-type-options small { color: #8a96a9; font-size: .7rem; line-height: 1.4; }
/*首屏区块内面包屑（结构由全站统一 .common-breadcrumb 提供；浅色首屏使用蓝灰色层级）*/
.template-search-shell .common-breadcrumb { margin-bottom: 1rem; padding-top: 0.25rem; }
.template-search-shell .breadcrumb-item,
.template-search-shell .breadcrumb-item a,
.template-search-shell .breadcrumb-item::before { color: #54708f !important; opacity: .85; }
.template-search-shell .breadcrumb-item a:hover { opacity: 1; }
.template-catalog { padding-bottom: 5.5rem; background: #fff; }
.template-filter-panel { position: relative; z-index: 8; padding: 1.35rem 0 2rem; background: transparent; }
.template-filter-panel::before { content: none; }
.template-filter-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.template-filter-heading h2 { margin: 0; color: #21304a; font-size: 1.3rem; font-weight: 700; }
.template-filter-heading p { margin: 0 0 .1rem; color: #8490a3; font-size: .78rem; }
.template-filter-heading .template-total-count { display: flex; align-items: baseline; gap: .25rem; font-size: .82rem; }
.template-results-summary { align-items: center; min-height: 4.25rem; padding: .7rem 0 .85rem; border-bottom: 1px solid #e8edf4; }
.template-results-summary h2 { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .65rem; margin: 0; color: #1e2f4a; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.template-results-summary .template-total-count { display: inline-flex; align-items: baseline; gap: .28rem; margin: 0; padding: .42rem .68rem; border: 1px solid #e7edf7; border-radius: 999px; background: #f8faff; color: #7d8ba1; font-size: .8rem; line-height: 1; }
.template-results-summary .template-total-count strong { color: var(--template-blue); font-size: 1rem; }
.template-results-title-icon { display: inline-grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid #dce9ff; border-radius: .62rem; background: linear-gradient(135deg, #eff5ff, #e0ecff); box-shadow: 0 .35rem .9rem rgba(43, 104, 220, .12); color: var(--template-blue); font-size: 1rem; }
.template-total-count strong { color: var(--template-blue); font-size: 1.05rem; font-weight: 700; }
.template-filter-controls { overflow: visible; padding: 0; border-top: 0; border-bottom: 1px solid #e8edf4; background: transparent; }
.template-type-bar { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: start; margin-bottom: 0; background: transparent; }
/*多行换行时，左侧标签与右侧总数靠上对齐第一行选项*/
.template-type-bar > .template-filter-label { padding-top: 1.05rem; }
.template-type-bar .template-total-count { display: flex; align-items: baseline; gap: .25rem; margin: 0; padding: 1.1rem .15rem 0 1rem; color: #8490a3; font-size: .82rem; white-space: nowrap; }
.template-filter-label { display: block; padding-left: .15rem; color: #3e4b60; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.template-filter-level-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.template-filter-level-heading > span { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; place-items: center; border-radius: .55rem; background: #eaf2ff; color: var(--template-blue); font-size: .68rem; font-weight: 750; }
.template-filter-level-heading > div { display: flex; min-width: 0; align-items: baseline; gap: .65rem; }
.template-filter-level-heading strong { color: #26354c; font-size: .92rem; font-weight: 700; }
.template-filter-level-heading small { color: #98a3b3; font-size: .72rem; }
.template-type-tabs { display: flex; min-height: 3.8rem; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; padding: .55rem 0; background: transparent; }
.template-type-tab { position: relative; display: inline-flex; min-width: auto; min-height: 2.4rem; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 .9rem; border: 0; border-radius: .3rem; background: transparent; color: #556174; font-size: .88rem; font-weight: 500; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
.template-type-tab::before { content: none; }
.template-type-tab > i { display: none; }
.template-type-tab:hover { background: #f3f7fd; color: var(--template-blue); }
.template-type-tab.active { background: #edf4ff; color: var(--template-blue); font-weight: 600; }
.template-industry-section { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: start; margin-top: 0; padding: .75rem 0; border-top: 1px solid #eef2f7; }
.template-industry-section > .template-filter-label { padding-top: .65rem; }
.template-category-grid { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .15rem .35rem; padding: 0; }
.template-category-item { position: relative; min-width: 0; }
.template-category-item[hidden] { display: none; }
.template-category-item.disabled .template-category-link,
.template-category-item.disabled:hover .template-category-link,
.template-category-item.disabled:focus-within .template-category-link { border-color: transparent; background: transparent; box-shadow: none; color: #b4bcc9; cursor: default; }
.template-category-item.disabled .template-category-link i { opacity: .45; transform: none; }
.template-category-link { display: flex; width: 100%; min-height: 2.8rem; align-items: center; justify-content: space-between; gap: .4rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: #68758a; font-size: .84rem; white-space: nowrap; transition: border-color .18s ease, border-radius .18s ease,
    background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.template-category-link i { margin-right: .2rem; color: #b3bdcb; font-size: .7rem; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.template-category-item:hover .template-category-link,
.template-category-item.active .template-category-link { background: #edf4ff; border-color: #dce8fb; color: var(--template-blue); }
.template-category-item:hover .template-category-link,
.template-category-item:focus-within .template-category-link,
.template-category-item.mobile-open .template-category-link { position: relative; z-index: 21; border-bottom-color: #fff; border-radius: .5rem .5rem 0 0; background: #f4f8ff; box-shadow: 0 .35rem .9rem rgba(36, 91, 174, .06); }
.template-category-item:hover .template-category-link i,
.template-category-item.active .template-category-link i { opacity: 1; }
.template-category-item:hover .template-category-link i { transform: rotate(180deg); }
.template-category-popover { position: absolute; z-index: 20; top: calc(100% - 1px); left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; gap: .2rem; padding: .55rem; border: 1px solid #dce8fb; border-radius: 0 0 .55rem .55rem; background: #fff; box-shadow: 0 .75rem 1.8rem rgba(31, 65, 120, .14); opacity: 0; visibility: hidden; transform: translateY(-.2rem); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.template-category-item:nth-child(5n+4) .template-category-popover,
.template-category-item:nth-child(5n+5) .template-category-popover { right: 0; left: auto; }
.template-category-item:hover .template-category-popover,
.template-category-item:focus-within .template-category-popover,
.template-category-item.mobile-open .template-category-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.template-category-popover a { display: flex; min-width: 0; min-height: 2.1rem; align-items: center; padding: .35rem .5rem; border-radius: .35rem; color: #687386; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color .16s ease, color .16s ease; }
.template-category-popover a:hover,
.template-category-popover a.active { background: #edf4ff; color: var(--template-blue); }
.template-category-popover a.disabled,
.template-category-popover a.disabled:hover { background: transparent; color: #b4bcc9; cursor: default; }
.advanced-group-link.empty { color: #aeb7c5; }
.advanced-group-link.empty::after { content: "暂无模板"; margin-left: auto; color: #c0c7d2; font-size: .68rem; }
.template-subcategory-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .25rem .55rem; margin: 0; padding: .75rem 0; border-top: 1px solid #eef2f7; background: transparent; }
.template-subcategory-row > .template-filter-label { width: auto; flex: 0 0 auto; }
.template-subcategory-row button { display: inline-flex; min-width: auto; min-height: 2.35rem; flex: 0 0 auto; align-items: center; justify-content: center; padding: .35rem .85rem; border: 0; border-radius: .3rem; background: transparent; color: #5d697c; font-size: .84rem; line-height: 1.35; text-align: center; transition: background-color .18s ease, color .18s ease; }
.template-subcategory-row button:hover,
.template-subcategory-row button.active { background: #edf4ff; color: var(--template-blue); }
.template-subcategory-row button.active { font-weight: 600; }
.template-subcategory-row button.active::before { content: none; }
.template-subcategory-row button[hidden] { display: none; }
.template-subcategory-row button.disabled,
.template-subcategory-row button.disabled:hover { background: transparent; color: #b4bcc9; cursor: default; }
.template-results-section { margin-top: 2rem; }
.template-list-wrapper { position: relative; min-height: 20rem; }
.template-list-wrapper.template-loading { pointer-events: none; }
.template-list-wrapper.template-loading::before { content: ""; position: absolute; z-index: 8; inset: 0; background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px); }
.template-list-wrapper.template-loading::after { content: ""; position: absolute; z-index: 9; top: 8rem; left: 50%; width: 2.4rem; height: 2.4rem; margin-left: -1.2rem; border: .2rem solid #dce9ff; border-top-color: var(--template-blue); border-radius: 50%; animation: template-spin .7s linear infinite; }
@keyframes template-spin {
  to { transform: rotate(360deg); }
}
.template-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.template-device-grid-pc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-device-grid-tv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
/*搜索/筛选结果为混合类型时，按类型分组展示，每组使用各自的网格*/
.template-group + .template-group { margin-top: 2.4rem; }
.template-group-header { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.2rem; padding-bottom: .55rem; border-bottom: 1px solid #e6ecf5; }
.template-group-header h3 { margin: 0; color: #23364f; font-size: 1.05rem; font-weight: 600; }
.template-group-title-icon { display: inline-grid; width: 1.75rem; height: 1.75rem; margin-right: .5rem; place-items: center; border-radius: .48rem; background: #edf4ff; color: var(--template-blue); font-size: .85rem; vertical-align: middle; }
.template-group-header .template-group-count { color: #8593aa; font-size: .8rem; }
.template-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(221, 229, 240, .86); border-radius: .9rem; background: #fff; box-shadow: 0 .55rem 1.6rem rgba(40, 57, 84, .06); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.template-card:hover { border-color: #c9dcfa; box-shadow: 0 1rem 2.3rem rgba(33, 70, 137, .14); transform: translateY(-.35rem); }
.template-card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef3f9; }
.template-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.template-card:hover .template-card-cover img { transform: scale(1.025); }
.template-card-device { position: absolute; z-index: 3; top: .75rem; right: .75rem; display: inline-flex; min-height: 1.7rem; align-items: center; gap: .3rem; padding: 0 .55rem; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(255, 255, 255, .88); color: #53647d; font-size: .62rem; font-weight: 700; letter-spacing: .04em; box-shadow: 0 .25rem .75rem rgba(28, 46, 78, .1); backdrop-filter: blur(8px); }
.template-card-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .75rem; background: rgba(16, 32, 60, .66); opacity: 0; transition: opacity .24s ease; }
.template-card:hover .template-card-actions,
.template-card:focus-within .template-card-actions { opacity: 1; }
.template-card-actions a { display: inline-flex; min-width: 6.3rem; height: 2.5rem; align-items: center; justify-content: center; gap: .35rem; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: .25rem; color: #fff; font-size: .85rem; font-weight: 600; }
.template-card-actions .template-use-btn { border-color: var(--template-blue); background: var(--template-blue); }
.template-card-actions .template-use-btn:hover { border-color: #155bd8; background: #155bd8; }
.template-card-actions .template-preview-btn:hover { background: #fff; color: #253652; }
.template-card-body { padding: 1.05rem 1.15rem 1rem; }
.template-card-body h2 { margin: 0 0 .5rem; color: #23314a; font-size: 1rem; font-weight: 650; }
.template-card-description { display: -webkit-box; overflow: hidden; margin: 0 0 .45rem; color: #71809a; font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-card-meta { display: inline-flex; align-items: center; gap: .3rem; color: #8a98ad; font-size: .68rem; }
.template-card-meta i { color: #3975dc; font-size: .72rem; }
.template-card-body p { display: -webkit-box; min-height: 2.55rem; overflow: hidden; margin: 0 0 .75rem; color: #7b8798; font-size: .8rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-card-meta { display: flex; align-items: center; gap: .55rem; }
.template-card-meta span { padding: .16rem .45rem; border-radius: .25rem; background: #f1f5fa; color: #778398; font-size: .7rem; }
/*APP / 小程序：竖屏设备作品墙*/
.template-device-mobile .template-card-cover::before { content: ""; position: absolute; z-index: 2; top: .55rem; left: 50%; width: 2.8rem; height: .28rem; border-radius: 999px; background: rgba(45, 58, 91, .16); transform: translateX(-50%); }
.template-device-mobile .template-card-cover img { object-fit: cover; }
.template-device-mobile .template-card-body { padding: .9rem .9rem 1rem; text-align: center; }
.template-device-mobile .template-card-body p { min-height: 2.4rem; font-size: .75rem; }
.template-device-mobile .template-card-meta { justify-content: center; }
.template-device-mobile .template-card-meta span:first-child { background: #edf0ff; color: #596bd1; }
/*PC：横向浏览器官网画布*/
.template-device-pc { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.template-device-pc:hover { border-color: transparent; box-shadow: none; }
.template-device-pc .template-card-cover::before { content: ""; position: absolute; z-index: 7; top: .55rem; left: .7rem; width: .34rem; height: .34rem; border-radius: 50%; background: #2875f6; box-shadow: .55rem 0 #13bfe5, 1.1rem 0 #8db9ff; }
.template-device-pc .template-card-body { padding: .95rem .3rem .45rem; text-align: center; }
.template-device-pc .template-card-body h2 { font-size: .96rem; }
.template-device-pc .template-card-body p { min-height: 0; margin-bottom: .55rem; -webkit-line-clamp: 1; }
.template-device-pc .template-card-meta { justify-content: center; }
.template-device-pc .template-card-meta span:first-child { background: #eaf3ff; color: #2872d8; }
/*TV 大屏：16:9 深色数据看板*/
.template-device-tv::before { top: .45rem; left: .45rem; border-top: 2px solid #38c6ff; border-left: 2px solid #38c6ff; }
.template-device-tv::after { right: .45rem; bottom: .45rem; border-right: 2px solid #38c6ff; border-bottom: 2px solid #38c6ff; }
.template-device-tv .template-card-cover { aspect-ratio: 16 / 9; border-bottom: 1px solid rgba(65, 175, 234, .22); background: #06172d; }
.template-device-tv .template-card-cover::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 68%, rgba(5, 24, 49, .34)); pointer-events: none; }
.template-device-tv .template-card-device { border-color: rgba(70, 205, 255, .32); background: rgba(7, 34, 65, .78); color: #6ed8ff; }
.template-device-tv .template-card-body p { color: #8fa8c6; }
.template-device-tv .template-card-meta span { background: rgba(50, 157, 219, .12); color: #74caef; }
.template-card-description { display: -webkit-box !important; min-height: 2.4rem; overflow: hidden; margin: 0 0 .7rem; color: #71809a; font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-card-meta { display: flex !important; align-items: center; gap: .55rem; }
.template-card-meta span { display: inline-flex; align-items: center; gap: .25rem; padding: .16rem .45rem; border-radius: .25rem; background: #f1f5fa; color: #778398; font-size: .7rem; }
.template-card-meta span i { color: #3975dc; font-size: .72rem; }
/*参考商城模板页：预览图 + 标题的极简卡片*/
.template-card,
.template-device-mobile,
.template-device-pc { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.template-card:hover,
.template-device-mobile:hover,
.template-device-pc:hover { border-color: transparent; box-shadow: none; transform: none; }
.template-card-body,
.template-device-mobile .template-card-body,
.template-device-pc .template-card-body { padding: 1.15rem .25rem .35rem; text-align: center; }
.template-card-body h2,
.template-device-mobile .template-card-body h2,
.template-device-pc .template-card-body h2 { margin: 0; color: #273142; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.template-card-body p,
.template-card-meta,
.template-card-device,
.template-card-badge { display: none; }
/*APP：9:16 小程序画布，悬停显示可扫码二维码*/
.template-device-mobile .template-card-cover::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  width: auto;
  height: auto;
  /*与设备内框/预览内容同为 1.5rem：遮罩精确覆盖屏幕区，四角不留未覆盖的亮角*/
  border-radius: 1.5rem;
  background: rgba(16, 19, 25, .62);
  opacity: 0;
  transform: none;
  transition: opacity .22s ease;
}
/*悬停蒙层：与首页「海量模板」手机面板一致，暗遮罩浮出后二维码与按钮叠在其上*/
.template-device-mobile:hover .template-card-cover::before,
.template-device-mobile:focus-within .template-card-cover::before { opacity: 1; }
.template-device-mobile .template-card-cover > img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.template-device-mobile:hover .template-card-cover > img { transform: none; }
.template-card-qr { position: absolute; z-index: 4; top: 16%; left: 50%; display: flex; width: 78%; max-width: 12rem; flex-direction: column; align-items: center; gap: .35rem; padding: .55rem; border-radius: .55rem; background: #fff; opacity: 0; transform: translate(-50%, .5rem); transition: opacity .22s ease, transform .22s ease; }
.template-card-qr img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.template-card-qr span { color: #596475; font-size: .7rem; }
.template-device-mobile:hover .template-card-qr,
.template-device-mobile:focus-within .template-card-qr { opacity: 1; transform: translate(-50%, 0); }
.template-device-mobile .template-card-actions {
  z-index: 4;
  inset: auto 11% 6%;
  min-height: 0;
  flex-direction: column;
  gap: .5rem;
  padding: 0;
  /*与首页「海量模板」手机面板一致：按钮直接叠在暗遮罩上，不加承托条*/
  background: transparent;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .22s ease, transform .22s ease;
}
.template-device-mobile:hover .template-card-actions,
.template-device-mobile:focus-within .template-card-actions { transform: translateY(0); }
.template-device-mobile .template-card-actions a { width: 100%; height: 2.45rem; border-radius: 999px; }
/*与首页一致：主按钮橙红实心、次按钮白底橙字，暗遮罩上对比清晰*/
.template-device-mobile .template-card-actions .template-use-btn { border-color: #ff6847; background: #ff6847; }
.template-device-mobile .template-card-actions .template-use-btn:hover { border-color: #ff7a5e; background: #ff7a5e; }
.template-device-mobile .template-card-actions .template-preview-btn { border-color: #fff; background: #fff; color: #ff6847; }
.template-device-mobile .template-card-actions .template-preview-btn:hover { border-color: #fff; background: #fff; color: #e5532f; }
/*PC：横向商城预览，悬停自动从页面顶部滚动到底部*/
.template-device-pc .template-card-cover img { width: 100%; height: 190%; object-fit: cover; object-position: top center; transform: translateY(0); transition: transform 4.5s cubic-bezier(.2, .65, .25, 1); }
.template-device-pc:hover .template-card-cover img,
.template-device-pc:focus-within .template-card-cover img { transform: translateY(-47.37%); }
/*TV：保留宽屏画布，标题之外只在悬停时出现操作*/
.template-device-tv .template-card-body p,
.template-device-tv .template-card-meta { display: none; }
.template-empty { display: flex; min-height: 23rem; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; border: 0; border-radius: 0; background: transparent; text-align: center; }
.template-empty > i { margin-bottom: .9rem; color: #a9bddd; font-size: 3rem; }
.template-empty h2 { margin-bottom: .45rem; color: #34445d; font-size: 1.2rem; }
.template-empty p { margin-bottom: 1.2rem; color: #8793a5; font-size: .88rem; }
.template-list-wrapper .pagination { gap: .35rem; }
.template-list-wrapper .page-link { min-width: 2.25rem; border-color: #e1e8f1; border-radius: .3rem !important; color: #5f6b7c; text-align: center; }
.template-list-wrapper .page-item.active .page-link { border-color: var(--template-blue); background: var(--template-blue); }
.template-final-cta { position: relative; overflow: hidden; padding: 4.5rem 0; background: linear-gradient(115deg, #1857d5, #2879f1 55%, #18a6dc); color: #fff; text-align: center; }
.template-final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -70%, rgba(255,255,255,.28), transparent 50%); }
.template-final-cta .container { position: relative; }
.template-final-cta h2 { margin-bottom: .6rem; font-size: 2rem; }
.template-final-cta p { margin-bottom: 1.5rem; color: rgba(255,255,255,.76); }
.template-final-cta .btn { min-width: 9.5rem; padding: .75rem 1.6rem; border-radius: 999px; background: #fff; color: #1d66df; font-weight: 650; }
.template-final-cta .btn:hover { box-shadow: 0 .7rem 1.6rem rgba(15,49,118,.2); transform: translateY(-2px); }
@media (min-width: 1200px) {
  .template-page .container { max-width: 78rem; }
}
@media (max-width: 1199.98px) {
  .template-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem; }
  /*窄桌面下左侧装饰半隐出画，避免压住居中的搜索框*/
  .template-hero-window-a { left: -4rem; }
  .template-hero-shape-one::after { left: -3rem; }
  .template-category-item:nth-child(5n+4) .template-category-popover { right: auto; left: 0; }
  .template-category-item:nth-child(4n+3) .template-category-popover,
  .template-category-item:nth-child(4n+4) .template-category-popover { right: 0; left: auto; }
  .template-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .template-search-hero { min-height: 21.5rem; }
  .template-search-shell { padding-top: 2.8rem; }
  .template-hero-window, .template-hero-phone, .template-hero-beam, .template-hero-cross { display: none; }
  .template-filter-browser { grid-template-columns: 10rem minmax(0,1fr); }
  .template-advanced-panel { padding: 1.6rem; }
  .advanced-industry-selector { grid-template-columns: minmax(15.5rem, 42%) minmax(0,1fr); }
  .template-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .template-category-item:nth-child(4n+3) .template-category-popover { right: auto; left: 0; }
  .template-category-item:nth-child(3n+3) .template-category-popover { right: 0; left: auto; }
  .template-filter-panel { padding: 1.4rem 0 1.75rem; }
  .template-device-grid-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .template-search-hero { min-height: 19rem; }
  .template-search-shell { padding: 2rem 0 1rem; }
  .template-hero-kicker { margin-bottom: .6rem; font-size: .66rem; }
  .template-hero-copy h1 { font-size: 1.85rem; }
  .template-hero-copy p { max-width: 24rem; margin: .55rem auto 0; font-size: .82rem; line-height: 1.65; }
  .template-search-stage { margin-top: 1.15rem; }
  .template-search-form { width: 100%; height: 3.2rem; padding: .25rem; }
  .template-search-leading { margin-left: .8rem; font-size: .95rem; }
  .template-search-form input[type="search"] { padding: 0 .6rem; font-size: .88rem; }
  .template-search-clear { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
  .template-search-divider { margin: 0 .25rem; }
  .template-search-submit { min-width: 3rem; height: 2.45rem; padding: 0; flex-basis: 3rem; font-size: 1.05rem; }
  .template-search-submit span { display: none; }
  .template-search-submit i { display: inline-block; }
  .template-hot-searches { width: 100%; flex-wrap: wrap; justify-content: center; gap: .45rem .5rem; margin-top: .7rem; overflow: visible; }
  .template-hot-searches button,
  .template-hot-searches a { min-height: 1.75rem; padding: .28rem .68rem; font-size: .72rem; }
  .template-advanced-filter { position: absolute; top: calc(100% + .45rem); bottom: auto; left: 50%; display: flex; width: 100%; max-height: min(30rem, calc(100vh - var(--tncms-header-height) - 5rem)); flex-direction: column; transform: translate(-50%, -.5rem); }
  .template-filter-browser { display: flex; height: min(30rem, calc(100vh - var(--tncms-header-height) - 5rem)); min-height: 0; flex-direction: column; }
  .template-advanced-filter.show { transform: translate(-50%, 0); }
  .template-advanced-nav { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .template-advanced-nav button { min-height: 4.5rem; align-items: center; padding: .7rem; text-align: left; }
  .template-advanced-nav button::before { inset: auto 0 0; width: auto; height: .2rem; }
  .template-advanced-nav strong { font-size: 1rem; }
  .template-advanced-nav small { font-size: .68rem; }
  .template-search-suggestions { max-height: none; flex: 1; }
  .template-suggestion-item { min-height: 3.3rem; padding: .7rem 1rem; }
  .template-advanced-content { min-height: 0; max-height: none; flex: 1; }
  .template-advanced-panel { padding: 1.15rem; }
  .template-advanced-panel[data-advanced-panel="industry"] { height: 100%; padding: 0; }
  .advanced-industry-selector { grid-template-columns: 52% minmax(0, 1fr); }
  .advanced-group-link { min-height: 3.25rem; padding: .65rem .8rem; font-size: .82rem; }
  .advanced-industry-links { padding: 1rem .85rem; }
  .advanced-industry-links h3 { font-size: .9rem; }
  .advanced-industry-links > div { display: grid; grid-template-columns: 1fr; gap: .35rem; }
  .advanced-industry-links button { min-width: 0; font-size: .82rem; }
  .advanced-type-options > button { min-height: 6.3rem; }
  .template-search-shell .common-breadcrumb { overflow: hidden; font-size: .75rem; white-space: nowrap; }
  .template-filter-panel { padding: 1.15rem 0 1rem; }
  .template-filter-heading { align-items: flex-start; margin-bottom: 1rem; }
  .template-filter-heading h2 { font-size: 1.08rem; }
  .template-results-summary { padding-bottom: .65rem; }
  .template-filter-controls { padding: 0; }
  .template-type-bar { display: grid; grid-template-columns: 1fr auto; margin-bottom: 0; }
  .template-type-bar > .template-filter-label { grid-column: 1; grid-row: 1; padding: .8rem .15rem .35rem; }
  .template-type-bar .template-total-count { grid-column: 2; grid-row: 1; padding: .8rem .15rem .35rem .5rem; }
  .template-type-tabs { grid-column: 1 / -1; grid-row: 2; min-height: 3.2rem; gap: .1rem; overflow-x: auto; padding: .15rem 0 .6rem; scrollbar-width: none; }
  .template-type-tabs::-webkit-scrollbar { display: none; }
  .template-type-tab { min-width: max-content; min-height: 2.35rem; flex: 0 0 auto; padding: 0 .7rem; font-size: .82rem; }
  .template-industry-section { display: block; margin-top: 0; padding: .5rem 0 .65rem; }
  .template-industry-section > .template-filter-label { padding: .4rem .15rem .35rem; }
  .template-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .35rem; padding-top: 0; }
  .template-category-link { min-height: 2.8rem; overflow: hidden; font-size: .84rem; text-overflow: ellipsis; }
  .template-category-link i { opacity: 1; }
  .template-category-popover { position: fixed; z-index: 25; right: .75rem !important; bottom: 1rem; left: .75rem !important; top: auto; grid-template-columns: repeat(2, minmax(0,1fr)); width: auto; max-height: 50vh; overflow-y: auto; padding: 1rem; border-radius: .65rem; box-shadow: 0 1rem 3rem rgba(21,40,74,.25); }
  .template-category-item:hover:not(.mobile-open) .template-category-popover,
  .template-category-item:focus-within:not(.mobile-open) .template-category-popover { opacity: 0; visibility: hidden; }
  .template-category-item.mobile-open .template-category-popover { opacity: 1; visibility: visible; }
  .template-subcategory-row { display: flex; gap: .2rem .35rem; padding: .65rem 0; }
  .template-subcategory-row > .template-filter-label { width: 100%; flex-basis: 100%; padding: .15rem .15rem .3rem; }
  .template-subcategory-row button { min-width: 0; min-height: 2.3rem; padding: .35rem .65rem; font-size: .78rem; }
  .template-card-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .template-card-actions { position: static; min-height: 3.4rem; background: #f5f8fc; opacity: 1; transform: none; }
  .template-card-actions a { min-width: 7rem; height: 2.25rem; }
  .template-card-actions .template-preview-btn { border-color: #bad0ee; color: #3b5b85; }
  .template-device-mobile .template-card-actions { position: absolute; inset: auto 10% 5%; min-height: 0; opacity: 0; }
  .template-device-mobile:hover .template-card-actions,
  .template-device-mobile:focus-within .template-card-actions { opacity: 1; }
  .template-device-pc .template-card-actions { position: absolute; inset: auto .6rem .6rem; min-height: 0; background: rgba(255, 255, 255, .88); opacity: 1; transform: none; }
  .template-device-pc .template-card-cover img,
  .template-device-pc:hover .template-card-cover img,
  .template-device-pc:focus-within .template-card-cover img { height: 100%; transform: none; }
  .template-device-tv .template-card-actions { position: absolute; inset: auto .6rem .6rem; min-height: 0; background: rgba(255, 255, 255, .88); opacity: 1; transform: none; }
  .template-card-body { padding-top: 1rem; }
  .template-final-cta { padding: 3.5rem 0; }
  .template-final-cta h2 { font-size: 1.55rem; }
}
@media (max-width: 399.98px) {
  .template-category-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .template-page *, .template-page *::before, .template-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/*真实案例预览：三端使用独立、可运行的 index.html*/
.template-live-preview { display: block; width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; }
.template-preview-placeholder { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; border-radius: inherit; background: linear-gradient(145deg, #f4f7fc, #e8eff8); color: #8294ad; font-size: .8rem; pointer-events: none; }
.template-preview-placeholder i { color: #9aadc6; font-size: 2rem; }
.template-device-pc .template-preview-placeholder { top: 2.125rem; border-radius: 0 0 .75rem .75rem; }
.template-device-mobile .template-preview-placeholder { border-radius: 1.5rem; }
.template-preview-ready .template-preview-placeholder { display: none; }
.template-card-badge { position: absolute; top: .8rem; left: .8rem; background: linear-gradient(100deg, #ff6a4d, #ff3d65); z-index: 8; display: inline-flex; min-width: 2.85rem; min-height: 1.8rem; align-items: center; justify-content: center; padding: 0 .65rem; border-radius: .42rem; color: #fff; font-size: .78rem; font-weight: 600; line-height: 1; box-shadow: 0 .35rem 1rem rgba(30, 43, 65, .12); }
.template-card-badge-hot { background: linear-gradient(135deg, #ff563f, #f92f56); box-shadow: 0 .35rem 1rem rgba(240, 61, 80, .22); }
/*APP：去除装饰背景，以更宽的仿真手机外框直接呈现真实小程序页面*/
.template-device-grid-mobile { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.2rem; }
.template-device-mobile { width: min(100%, 18.5rem); justify-self: center; }
.template-device-mobile .template-card-cover { position: relative; aspect-ratio: 9 / 16; margin: 0; overflow: visible; border: .5rem solid #151b26; border-radius: 2rem; background: #151b26; box-shadow: 0 1.1rem 2.35rem rgba(24, 39, 68, .24), 0 0 0 1px rgba(255, 255, 255, .72); transition: border-color .22s ease, box-shadow .22s ease; }
/*边框美化：悬停时封面边框高亮*/
.template-device-mobile:hover .template-card-cover,
.template-device-mobile:focus-within .template-card-cover { border-color: #27334a; box-shadow: 0 1.25rem 2.7rem rgba(24, 39, 68, .28), 0 0 0 1px rgba(255, 255, 255, .76); }
/*头部优化：移除"听筒"装饰条，模板内容顶格满屏展示*/
.template-device-mobile .template-card-cover::after { display: none; }
.template-device-mobile .template-card-cover::before { z-index: 3; border-radius: 1.5rem; }
.template-device-mobile .template-live-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*圆角精确贴合设备内框：内容自裁剪，悬停放遮罩时四角不再露出白角*/
  border-radius: 1.5rem;
  clip-path: inset(0 round 1.5rem);
}
.template-device-mobile .template-card-badge { top: 1.1rem; right: 0; left: auto; min-height: 1.3rem; padding: 0 .4rem; border-radius: .25rem; font-size: .65rem; transform: translateX(50%); box-shadow: 0 .15rem .45rem rgba(30, 43, 65, .18); }
.template-device-mobile .template-card-body { padding-top: 1.05rem; }
.template-device-mobile .template-card-body h2 { font-size: 1rem; font-weight: 550; }
/*PC：横向商城预览，悬停自动从页面顶部滚动到底部*/
.template-device-pc .template-card-cover { aspect-ratio: 16 / 11.5; min-height: 0; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(142, 158, 184, .48); border-radius: .75rem; background: #f8faff; box-shadow: 0 1.75rem 3.75rem rgba(35, 62, 105, .2), 0 .35rem 1rem rgba(35, 62, 105, .1), inset 0 1px 0 rgba(255, 255, 255, .92); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.template-device-pc .template-card-cover::before { display: none; }
.template-device-pc:hover .template-card-cover,
.template-device-pc:focus-within .template-card-cover { border-color: rgba(104, 128, 166, .62); box-shadow: 0 2rem 4rem rgba(35, 62, 105, .24), 0 .45rem 1.2rem rgba(35, 62, 105, .12), inset 0 1px 0 rgba(255, 255, 255, .96); transform: translateY(-.12rem); }
.template-pc-browser-bar { position: absolute; z-index: 4; top: 0; right: 0; left: 0; display: flex; height: 2.125rem; align-items: center; gap: .375rem; padding: 0 .75rem; border-bottom: 1px solid #e6ebf2; border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0; background: linear-gradient(180deg, #fbfcff 0%, #f3f6fb 100%); color: #98a4b5; font-size: .625rem; letter-spacing: .04em; }
.template-pc-browser-bar span { display: inline-flex; width: min(62%, 12rem); height: 1.35rem; align-items: center; justify-content: center; margin: 0 auto; padding: 0 .8rem; overflow: hidden; border: 1px solid #e4e9f1; border-radius: 999px; background: #fff; text-overflow: ellipsis; white-space: nowrap; }
.template-device-pc .template-live-preview { position: absolute; top: 2.125rem; right: auto; bottom: auto; left: 0; background: #fff; border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px); transform-origin: top left; will-change: transform; }
.template-device-pc .template-card-badge { position: absolute; top: 1.05rem; right: 0; z-index: 6; left: auto; min-height: 1.3rem; padding: 0 .4rem; border-radius: .25rem; font-size: .65rem; transform: translateX(50%); box-shadow: 0 .15rem .45rem rgba(30, 43, 65, .18); }
/*底部按钮：封面内的悬浮式胶囊条，不占文档流、不遮挡标题，不影响预览自动滚动*/
.template-device-pc .template-card-actions { position: absolute; z-index: 5; inset: auto .8rem .8rem; display: flex; min-height: 0; align-items: center; justify-content: center; gap: .6rem; padding: .45rem .55rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); backdrop-filter: blur(12px); box-shadow: 0 .6rem 1.6rem rgba(30, 43, 65, .2); opacity: 0; transform: translateY(.5rem); transition: opacity .22s ease, transform .22s ease; }
.template-device-pc .template-card-actions a { display: inline-flex; height: 2.05rem; min-width: 5.8rem; align-items: center; justify-content: center; gap: .35rem; padding: 0 .95rem; border: 0; border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 600; text-align: center; }
/*TV：规整的 16:9 大屏，不再使用上下对角装饰，标题允许完整展示*/
.template-device-tv { border-color: rgba(46, 119, 184, .42); overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.template-device-tv:hover { border-color: transparent; box-shadow: none; transform: none; }
.template-device-tv::before,
.template-device-tv::after { content: ""; position: absolute; z-index: 4; width: 1.8rem; height: 1.8rem; pointer-events: none; display: none; }
.template-device-tv .template-card-cover {
  /*封面亲自裁剪圆角：iframe 经 transform 缩放后自身圆角会同步缩小导致毛边，必须由封面裁剪*/
  overflow: hidden;
  border: 1px solid #173f68;
  border-radius: .65rem;
  box-shadow: 0 .75rem 2rem rgba(4, 25, 53, .18);
}
.template-device-tv .template-card-cover::after { display: none; }
.template-device-tv .template-live-preview { position: absolute; top: 0; left: 0; transform-origin: top left; }
/*底部按钮：与 PC 一致的封面内悬浮胶囊条，hover 浮出、不遮挡标题与预览*/
.template-device-tv .template-card-actions { position: absolute; z-index: 5; inset: auto .8rem .8rem; display: flex; min-height: 0; align-items: center; justify-content: center; gap: .6rem; padding: .45rem .55rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); backdrop-filter: blur(12px); box-shadow: 0 .6rem 1.6rem rgba(30, 43, 65, .2); opacity: 0; transform: translateY(.5rem); transition: opacity .22s ease, transform .22s ease; }
.template-device-tv:hover .template-card-actions,
.template-device-tv:focus-within .template-card-actions { opacity: 1; transform: translateY(0); }
.template-device-tv .template-card-actions a { display: inline-flex; height: 2.05rem; min-width: 5.8rem; align-items: center; justify-content: center; gap: .35rem; padding: 0 .95rem; border: 0; border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 600; text-align: center; }
.template-device-tv .template-card-actions .template-use-btn { background: #ff5a3c; }
.template-device-tv .template-card-actions .template-use-btn:hover { background: #ff6d52; }
.template-device-tv .template-card-actions .template-preview-btn { background: #2f82ff; }
.template-device-tv .template-card-actions .template-preview-btn:hover { background: #448fff; }
.template-device-tv .template-card-actions .template-preview-btn i { display: none; }
/*多屏翻页：封面左右边缘的圆形按钮。深色水晶毛玻璃（与大屏内置翻屏按钮同色系），仅对声明支持多屏的大屏（template-screen-capable）在 hover 时出现*/
.template-screen-btn { position: absolute; z-index: 5; top: 50%; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(96, 180, 255, .45); border-radius: 50%; background: linear-gradient(135deg, rgba(18, 48, 86, .68) 0%, rgba(8, 26, 50, .52) 100%); box-shadow: 0 .35rem 1rem rgba(4, 20, 45, .5), inset 0 1px 0 rgba(160, 215, 255, .3), inset 0 -1px 0 rgba(160, 215, 255, .08); color: #9fdcff; font-size: .95rem; text-shadow: 0 0 .45rem rgba(80, 190, 255, .55); opacity: 0; transform: translateY(-50%) scale(.85); transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); overflow: hidden; }
/*上半部水晶高光，增强玻璃质感*/
.template-screen-btn::before { content: ""; position: absolute; top: 6%; left: 14%; right: 14%; height: 44%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
/*箭头图标保持在高光层之上*/
.template-screen-btn i { position: relative; z-index: 1; }
.template-screen-prev { left: .7rem; }
.template-screen-next { right: .7rem; }
.template-device-tv.template-screen-capable:hover .template-screen-btn,
.template-device-tv.template-screen-capable:focus-within .template-screen-btn { opacity: 1; transform: translateY(-50%) scale(1); }
.template-device-tv.template-screen-capable .template-screen-btn:hover { border-color: rgba(140, 210, 255, .85); background: linear-gradient(135deg, rgba(30, 72, 124, .78) 0%, rgba(12, 36, 68, .6) 100%); box-shadow: 0 .5rem 1.4rem rgba(4, 20, 45, .55), 0 0 1rem rgba(64, 170, 255, .45), inset 0 1px 0 rgba(180, 225, 255, .4); color: #fff; transform: translateY(-50%) scale(1.08); }
.template-device-tv .template-card-badge { position: absolute; top: 1.05rem; right: 0; z-index: 6; left: auto; min-height: 1.3rem; padding: 0 .4rem; border-radius: .25rem; font-size: .65rem; transform: translateX(50%); box-shadow: 0 .15rem .45rem rgba(30, 43, 65, .18); }
.template-device-tv .template-card-body { text-align: center; padding: 1rem .35rem .45rem; }
.template-device-tv .template-card-body h2 { display: block; overflow: visible; color: #26374f; font-size: 1rem; font-weight: 550; line-height: 1.55; text-align: center; white-space: normal; text-overflow: clip; }
/*Watch：方形小屏手表外框，内容按卡片实际宽度原尺寸渲染（与手机类一致，不缩放）*/
.template-device-grid-watch { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem 1.8rem; }
.template-device-watch { width: min(100%, 12.5rem); justify-self: center; }
.template-device-watch .template-card-cover { aspect-ratio: 5 / 6; margin: 0; overflow: visible; border: .45rem solid #151b26; border-radius: 2.4rem; background: #151b26; box-shadow: 0 .9rem 2rem rgba(24, 39, 68, .22), 0 0 0 1px rgba(255, 255, 255, .72); transition: border-color .22s ease, box-shadow .22s ease; }
.template-device-watch:hover .template-card-cover,
.template-device-watch:focus-within .template-card-cover { border-color: #27334a; box-shadow: 0 1.05rem 2.3rem rgba(24, 39, 68, .26), 0 0 0 1px rgba(255, 255, 255, .76); }
.template-device-watch .template-live-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1.95rem; clip-path: inset(0 round 1.95rem); }
/*Glass：超宽短幅眼镜显示框，1280 基准等比缩放，不做悬停滚动*/
.template-device-grid-glass { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
.template-device-glass .template-card-cover { aspect-ratio: 21 / 9; overflow: hidden; border: .4rem solid #151b26; border-radius: 1.1rem; background: #151b26; box-shadow: 0 .9rem 2.1rem rgba(24, 39, 68, .2), 0 0 0 1px rgba(255, 255, 255, .72); transition: border-color .22s ease, box-shadow .22s ease; }
.template-device-glass:hover .template-card-cover,
.template-device-glass:focus-within .template-card-cover { border-color: #27334a; box-shadow: 0 1.05rem 2.4rem rgba(24, 39, 68, .24), 0 0 0 1px rgba(255, 255, 255, .76); }
.template-device-glass .template-live-preview,
.template-device-iot .template-live-preview { position: absolute; top: 0; left: 0; transform-origin: top left; will-change: transform; }
/*IoT / 车载 / 未知终端：4:3 设备面板外框（新增终端的默认外形），1280 基准等比缩放*/
.template-device-grid-iot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-device-iot .template-card-cover { aspect-ratio: 4 / 3; overflow: hidden; border: .5rem solid #1a2432; border-radius: .9rem; background: #1a2432; box-shadow: 0 .9rem 2.1rem rgba(24, 39, 68, .18), 0 0 0 1px rgba(255, 255, 255, .7); transition: border-color .22s ease, box-shadow .22s ease; }
.template-device-iot:hover .template-card-cover,
.template-device-iot:focus-within .template-card-cover { border-color: #2a3a52; box-shadow: 0 1.05rem 2.4rem rgba(24, 39, 68, .22), 0 0 0 1px rgba(255, 255, 255, .74); }
/*Watch/Glass/IoT 角标与标题与 TV 一致：角标贴卡片右上角，标题居中*/
.template-device-watch .template-card-badge,
.template-device-glass .template-card-badge,
.template-device-iot .template-card-badge { position: absolute; top: 1.05rem; right: 0; z-index: 6; left: auto; min-height: 1.3rem; padding: 0 .4rem; border-radius: .25rem; font-size: .65rem; transform: translateX(50%); box-shadow: 0 .15rem .45rem rgba(30, 43, 65, .18); }
.template-device-watch .template-card-body,
.template-device-glass .template-card-body,
.template-device-iot .template-card-body { text-align: center; }
@media (max-width: 1199.98px) {
  .template-device-grid-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
  .template-device-mobile { width: min(100%, 18.5rem); }
  .template-device-grid-watch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .template-device-grid-iot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-device-pc .template-card-cover { min-height: 0; }
}
@media (max-width: 767.98px) {
  .template-device-grid-mobile { grid-template-columns: 1fr; }
  .template-device-mobile { margin-right: auto; margin-left: auto; width: min(100%, 21rem); max-width: none; }
  .template-device-grid-watch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-device-grid-glass,
  .template-device-grid-iot { grid-template-columns: 1fr; }
  .template-device-pc .template-card-cover { min-height: 0; }
  .template-card-grid .template-card-badge { top: 2.3rem; right: .65rem; left: auto; transform: none; }
}
/** 大屏适配（原 channel_highres.css 本页专属部分；置于文件末尾以保持最后的覆盖顺序）*/
@media (min-width: 1400px) {
  .template-page .container { width: calc(100% - (var(--tncms-channel-gutter) * 2)); max-width: var(--tncms-channel-wide); }
  /** 超宽屏只放大卡片与留白，不继续增加列数：
   * APP/Mini 最多 4 列、PC 最多 3 列、TV 最多 2 列。
   * 类型选择与搜索后的动态渲染均复用这三类网格。*/
  .template-device-grid-mobile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .template-device-grid-pc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .template-device-grid-tv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/*---------- 栏目主题色覆盖 ----------
   放在文件末尾，确保覆盖首屏原有的静态装饰色；不支持 color-mix 时保留原样式。*/
.template-search-hero { background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--template-blue) 42%, #fff 58%) 0%, transparent 45%),
    radial-gradient(ellipse at 92% 100%, color-mix(in srgb, var(--template-blue) 22%, #fff 78%) 0%, transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--template-blue) 8%, #fff 92%) 0%,
      color-mix(in srgb, var(--template-blue) 3%, #fff 97%) 54%,
      color-mix(in srgb, var(--template-blue) 7%, #fff 93%) 100%); }
.template-search-hero::before { background-image: linear-gradient(color-mix(in srgb, var(--template-blue) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--template-blue) 9%, transparent) 1px, transparent 1px); }
.template-search-hero::after { background: color-mix(in srgb, var(--template-blue) 20%, transparent); }
.template-hero-beam { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--template-blue) 16%, transparent) 50%, transparent); }
.template-hero-beam-b { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--template-blue) 22%, transparent) 50%, transparent); }
.template-hero-horizon { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--template-blue) 42%, transparent) 38%, color-mix(in srgb, var(--template-blue) 28%, #fff 72%) 62%, transparent); }
.template-hero-cross::before,
.template-hero-cross::after { background: linear-gradient(135deg, var(--template-blue), var(--template-cyan)); }
/*---------- 网站模板首屏：与腾数学院首屏统一视觉 ----------*/
.template-search-hero { color: #fff; background: radial-gradient(ellipse at 5% 0%, color-mix(in srgb, var(--template-blue) 58%, #fff 42%) 0%, transparent 60%),
    linear-gradient(125deg, var(--template-blue), var(--template-blue-dark)); border-bottom: 0; }
.template-search-hero::before { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 92%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 92%); }
.template-search-hero::after { top: auto; right: -12rem; bottom: -11rem; left: auto; width: 34rem; height: 24rem; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--template-blue) 45%, #fff 55%), rgba(255, 255, 255, .04) 50%, transparent 72%); filter: blur(8px); }
.template-search-shell .common-breadcrumb { margin-bottom: 1.25rem; }
.template-search-shell .breadcrumb-item,
.template-search-shell .breadcrumb-item a,
.template-search-shell .breadcrumb-item::before { color: #fff !important; opacity: .85; }
.template-search-shell .breadcrumb-item a:hover { opacity: 1; }
.template-hero-shape::before { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 48%, transparent 72%); }
.template-hero-shape::after { border-color: rgba(255, 255, 255, .16); border-top-color: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5rem rgba(255, 255, 255, .08), 0 0 4rem rgba(255, 255, 255, .1); }
.template-hero-window,
.template-hero-phone { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .16); box-shadow: 0 1rem 2.2rem rgba(10, 50, 130, .28); }
.template-window-side,
.template-window-blocks i,
.template-phone-block { background: rgba(255, 255, 255, .08); }
.template-window-line.line-lg,
.template-phone-line.line-lg { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--template-blue) 35%, #fff 65%)); box-shadow: 0 .2rem .5rem rgba(255, 255, 255, .28); }
.template-hero-copy { color: #fff; }
.template-hero-kicker { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); box-shadow: 0 .35rem 1rem rgba(10, 50, 130, .16); }
.template-hero-copy h1 { background: linear-gradient(105deg, #fff 6%, #d9f2ff 52%, #a5e8ff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .4rem 1.1rem rgba(8, 45, 120, .3)); }
.template-hero-copy h1 span { color: transparent; background: linear-gradient(105deg, #fff 6%, #d9f2ff 52%, #a5e8ff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.template-hero-copy p { color: rgba(232, 243, 255, .88); }
.template-search-form { animation: template-search-breathe 5s ease-in-out infinite; }
.template-hot-label { color: rgba(255, 255, 255, .85); }
.template-hot-searches button,
.template-hot-searches a { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(6px); }
.template-hot-searches button:hover,
.template-hot-searches button:focus-visible,
.template-hot-searches a:hover,
.template-hot-searches a:focus-visible { color: var(--template-blue); border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .94); }
/*---------- 按钮、底部 CTA 与腾数学院风格统一 ----------*/
.template-page .btn-primary,
.template-card-actions .template-use-btn,
.template-device-tv .template-card-actions .template-use-btn { border-color: var(--template-blue); background: linear-gradient(135deg, color-mix(in srgb, var(--template-blue) 72%, #fff 28%), var(--template-blue) 58%, var(--template-blue-dark)); box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--template-blue) 24%, transparent); }
.template-page .btn-primary:hover,
.template-card-actions .template-use-btn:hover,
.template-device-tv .template-card-actions .template-use-btn:hover { border-color: var(--template-blue-dark); background: linear-gradient(135deg, color-mix(in srgb, var(--template-blue) 62%, #fff 38%), var(--template-blue)); filter: brightness(1.05); }
.template-card-actions .template-preview-btn,
.template-device-tv .template-card-actions .template-preview-btn { border-color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(5px); }
.template-card-actions .template-preview-btn:hover,
.template-device-tv .template-card-actions .template-preview-btn:hover { border-color: #fff; background: #fff; color: var(--template-blue); }
.template-final-cta { background: radial-gradient(ellipse at 5% 0%, color-mix(in srgb, var(--template-blue) 58%, #fff 42%) 0%, transparent 60%),
    linear-gradient(125deg, var(--template-blue), var(--template-blue-dark)); }
.template-final-cta::before { background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 6rem 6rem; opacity: .75; }
.template-final-cta .btn { color: var(--template-blue); box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--template-blue-dark) 28%, transparent); }
.template-final-cta .btn:hover { color: var(--template-blue-dark); box-shadow: 0 .7rem 1.6rem color-mix(in srgb, var(--template-blue-dark) 35%, transparent); }
/*页面级主题色传递给公共底部：底部仍保持腾数学院相同的深色风格，
   仅强调色、焦点框和背景光晕随栏目配置变化。*/
/*---------- 分页选中态优化 ----------*/
.template-list-wrapper > nav[aria-label="模板分页"] { margin-top: 2rem; margin-bottom: .5rem; }
.template-list-wrapper > nav[aria-label="模板分页"] .pagination { align-items: center; gap: .5rem; }
.template-list-wrapper > nav[aria-label="模板分页"] .page-link { display: inline-flex; min-width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0 .7rem; border: 1px solid color-mix(in srgb, var(--template-blue) 16%, #dfe7f2 84%); border-radius: .75rem !important; background: #fff; color: #5f6b7c; font-size: .875rem; font-weight: 600; line-height: 1; box-shadow: 0 .25rem .75rem rgba(39, 66, 113, .045); transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.template-list-wrapper > nav[aria-label="模板分页"] .page-item:not(.active):not(.disabled) .page-link:hover { border-color: color-mix(in srgb, var(--template-blue) 48%, #dfe7f2 52%); background: color-mix(in srgb, var(--template-blue) 6%, #fff 94%); color: var(--template-blue-dark); box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--template-blue) 14%, transparent); transform: translateY(-1px); }
.template-list-wrapper > nav[aria-label="模板分页"] .page-item.active .page-link { position: relative; border-color: var(--template-blue); background: linear-gradient(135deg,
    color-mix(in srgb, var(--template-blue) 72%, #fff 28%) 0%,
    var(--template-blue) 58%,
    var(--template-blue-dark) 100%); color: #fff; font-weight: 700; box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--template-blue) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-1px); }
.template-list-wrapper > nav[aria-label="模板分页"] .page-item.active .page-link::after { content: ""; position: absolute; inset: .2rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: .58rem; pointer-events: none; }
.template-list-wrapper > nav[aria-label="模板分页"] .page-item.disabled .page-link { border-color: #edf1f6; background: #f7f9fc; color: #b8c1cf; box-shadow: none; opacity: 1; }
.template-list-wrapper > nav[aria-label="模板分页"] .page-item.disabled .page-link:hover { transform: none; }
/*搜索框主按钮必须直接使用栏目主题色，避免旧版固定蓝色规则覆盖。*/
.template-page .template-search-form:focus-within { box-shadow: 0 1.25rem 3.2rem color-mix(in srgb, var(--template-blue) 32%, transparent),
    0 0 0 .25rem color-mix(in srgb, var(--template-blue) 18%, transparent); animation: none; }
.template-page .template-search-leading,
.template-page .template-search-clear:hover,
.template-page .template-search-clear:focus-visible { color: var(--template-blue); }
.template-page .template-search-submit { border: 0; background: linear-gradient(135deg,
    color-mix(in srgb, var(--template-blue) 72%, #fff 28%) 0%,
    var(--template-blue) 58%,
    var(--template-blue-dark) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
    0 .5rem 1.2rem color-mix(in srgb, var(--template-blue) 32%, transparent); }
.template-page .template-search-submit:hover,
.template-page .template-search-submit:focus-visible { color: #fff; background: linear-gradient(135deg,
    color-mix(in srgb, var(--template-blue) 62%, #fff 38%),
    var(--template-blue)); box-shadow: 0 .65rem 1.35rem color-mix(in srgb, var(--template-blue) 35%, transparent),
    0 0 0 .2rem color-mix(in srgb, var(--template-blue) 18%, transparent); filter: none; outline: 0; transform: translateY(-1px); }
.template-page .template-hot-searches button:hover,
.template-page .template-hot-searches button:focus-visible,
.template-page .template-hot-searches a:hover,
.template-page .template-hot-searches a:focus-visible { border-color: color-mix(in srgb, var(--template-blue) 54%, #fff 46%); background: color-mix(in srgb, var(--template-blue) 18%, rgba(255, 255, 255, .94) 82%); color: var(--template-blue-dark); }
/*模板预览列表信息层：覆盖旧版“只显示标题”的卡片规则，确保列表与实际预览保持同一信息口径。*/
.template-page .template-card-description { display: -webkit-box !important; min-height: 2.4rem; overflow: hidden; margin: 0 0 .7rem; color: #71809a; font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-page .template-card-meta { display: flex !important; align-items: center; gap: .55rem; }
.template-page .template-card-meta span { display: inline-flex; align-items: center; gap: .25rem; padding: .16rem .45rem; border-radius: .25rem; background: #f1f5fa; color: #778398; font-size: .7rem; }
.template-page .template-card-meta span i { color: #3975dc; font-size: .72rem; }
/*模板卡片操作统一：主操作红色，预览操作白色。*/
.template-page .template-card-actions .template-use-btn { border-color: #f0523d; background: #f0523d; color: #fff; box-shadow: 0 .45rem 1.1rem rgba(240, 82, 61, .28); }
.template-page .template-card-actions .template-use-btn:hover,
.template-page .template-card-actions .template-use-btn:focus-visible { border-color: #dc402e; background: #dc402e; color: #fff; filter: none; }
.template-page .template-card-actions .template-preview-btn { border-color: #fff; background: #fff; color: #f0523d; box-shadow: 0 .35rem .9rem rgba(26, 39, 63, .16); backdrop-filter: none; }
.template-page .template-card-actions .template-preview-btn:hover,
.template-page .template-card-actions .template-preview-btn:focus-visible { border-color: #fff; background: #fff; color: #dc402e; }
.template-page .template-card-actions a { gap: .35rem; }
.template-page .template-card-actions .template-use-btn i,
.template-page .template-card-actions .template-preview-btn i { display: inline-flex; color: inherit; font-size: .9em; }
/*移动首屏压缩重复提示，把热门词收进单行可滑动轨道，减轻首屏信息密度。*/
@media (max-width: 767.98px) {
  .template-page .template-search-shell { padding: 1.65rem 1rem 1.25rem; }
  .template-page .container { width: 100%; max-width: 100%; padding-inline: 1rem; }
  .template-page .template-search-shell .common-breadcrumb { margin-bottom: 1.4rem; }
  .template-page .template-hero-kicker { display: none; }
  .template-page .template-hero-copy h1 { font-size: 1.75rem; line-height: 1.3; }
  .template-page .template-hero-copy p { max-width: 22rem; margin-top: .7rem; font-size: .8rem; line-height: 1.7; }
  .template-page .template-search-stage { margin-top: 1.4rem; }
  .template-page .template-hot-searches { flex-wrap: wrap; justify-content: center; gap: .45rem .5rem; margin-top: .85rem; padding: .1rem 0 .2rem; overflow: visible; }
  .template-page .template-hot-label { flex: 0 0 auto; }
}