/* ==========================================================================
   请柬网 · 画廊版（gallery）
   版式：左侧固定栏目栏 + 右侧主区（大搜索 / 横向滑动卡片行）
   配色：米白底 + 赤陶橘 + 墨黑字
   ========================================================================== */

:root {
    --bg: #FAF9F6;
    --surface: #FFFFFF;
    --surface-2: #F3F0F9;
    --ink: #1A1922;
    --ink-2: #55516A;
    --ink-3: #8A85A0;
    --ink-4: #B3AFC4;
    --line: #E8E4F0;
    --line-2: #F2EFF8;
    --brand: #534AB7;
    --brand-d: #443B9E;
    --brand-soft: #EEEDFE;
    --gold: #D99A3D;
    --gold-l: #F3DFAF;
    /* 价格 / 提示用的强调红（购买页等沿用 default 结构的页面会用到） */
    --red: #D0453F;
    --red-d: #B33A35;
    --red-l: #FDEDEC;
    --card: #FFFFFF;
    --shadow-h: 0 10px 28px rgba(60, 52, 120, .12);
    --rail: 76px;
    --rw: 1280px;
    --radius: 16px;
    --shadow: 0 2px 6px rgba(60, 52, 120, .05), 0 12px 30px rgba(60, 52, 120, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
input, textarea, select { font: inherit; }
::selection { background: var(--brand); color: #fff; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    padding: 10px 18px; background: var(--brand); color: #fff; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   骨架：左侧栏 + 主区
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.rail {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--rail);
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 0 14px;
    background: #FFFFFF;
    border-right: 1px solid var(--line);
    z-index: 60;
}
.rail-logo {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 13px; overflow: hidden;
    background: var(--brand); color: #fff;
    font-size: 18px; font-weight: 700;
    box-shadow: 0 8px 18px rgba(83, 74, 183, .25);
}
.rail-logo img { width: 100%; height: 100%; object-fit: cover; }
.rail-nav { margin-top: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rail-item {
    width: 62px; padding: 9px 0 8px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border-radius: 13px;
    color: var(--ink-3); font-size: 11.5px; line-height: 1.2; text-align: center;
    transition: color .18s, background .18s;
}
.rail-item:hover { color: var(--brand); background: var(--brand-soft); }
.rail-item.on { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.ri-ico svg { width: 21px; height: 21px; display: block; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }

.app-main { flex: 1; min-width: 0; margin-left: var(--rail); display: flex; flex-direction: column; }

/* 顶部窄条：面包屑 / 宣传语 + 快捷入口 */
.app-bar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 249, 246, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.ab-in {
    max-width: var(--rw); margin: 0 auto; padding: 0 32px;
    height: 60px; display: flex; align-items: center; gap: 18px;
}
.ab-brand { display: none; align-items: center; gap: 9px; min-width: 0; }
.ab-logo {
    display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 10px; overflow: hidden;
    background: var(--brand); color: #fff; font-size: 15px; font-weight: 700;
}
.ab-logo img { width: 100%; height: 100%; object-fit: cover; }
.ab-name {
    font-size: 15px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-crumb {
    display: flex; align-items: center; gap: 7px;
    min-width: 0; font-size: 13px; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-crumb a { color: var(--ink-2); }
.ab-crumb a:hover { color: var(--brand); }
.ab-crumb .cur { color: var(--ink); font-weight: 500; }
.ab-crumb .sep { color: var(--ink-4); }
.ab-slogan { margin: 0; }
.ab-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.ab-cta {
    display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
    border-radius: 10px; background: var(--brand); color: #fff;
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
    transition: background .18s;
}
.ab-cta:hover { background: var(--brand-d); }

/* 手机菜单按键 + 抽屉遮罩（桌面不显示） */
.nav-toggle {
    display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 42px; height: 42px; margin-left: 2px; padding: 0;
    border: 1px solid var(--line); border-radius: 11px;
    background: #fff; cursor: pointer;
}
.nav-toggle span {
    display: block; width: 18px; height: 1.8px; border-radius: 2px;
    background: var(--ink-2);
    transition: transform .22s, opacity .18s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.rail-cta { display: none; }
.bottom-bar { display: none; }
.rail-mask {
    position: fixed; inset: 0; z-index: 92;
    background: rgba(26, 22, 58, .44);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.rail-mask.show { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .rail-mask { display: none; } }

/* ==========================================================================
   首屏
   ========================================================================== */
.hero {
    padding: 26px 0 6px;
    background:
        radial-gradient(880px 400px at 50% -120px, #EEEDFE 0%, rgba(238, 237, 254, 0) 72%);
}
.hero-in { max-width: var(--rw); margin: 0 auto; padding: 0 32px; text-align: center; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 15px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    font-size: 12.5px; color: var(--brand);
}
.hero h1 {
    margin: 20px auto 14px;
    max-width: 900px;
    font-size: 46px; font-weight: 800; line-height: 1.24; letter-spacing: -1.2px;
    color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-sub { font-size: 15px; line-height: 1.75; color: var(--ink-3); }

.hero-search {
    display: flex; align-items: center; gap: 10px;
    max-width: 720px; height: 64px;
    margin: 26px auto 0; padding: 7px 7px 7px 24px;
    background: #fff; border: 1px solid #E9E5F3; border-radius: 999px;
    box-shadow: 0 14px 44px rgba(60, 52, 120, .10);
    transition: box-shadow .2s, border-color .2s;
}
.hero-search:focus-within { border-color: #CECBF6; box-shadow: 0 16px 48px rgba(83, 74, 183, .16); }
.hs-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ink-4); }
.hero-search input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: none;
    font-size: 16px; color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink-4); }
.hero-search button {
    height: 50px; padding: 0 36px; flex: 0 0 auto;
    border: 0; border-radius: 999px;
    background: var(--brand); color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .18s;
}
.hero-search button:hover { background: var(--brand-d); }

/* 全部分类 */
.cats-wrap { position: relative; margin-top: 22px; display: flex; justify-content: center; }
.cats-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 18px;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink-2);
    font-size: 13.5px; cursor: pointer;
    transition: .18s;
}
.cats-btn svg { width: 16px; height: 16px; }
.cats-btn:hover { border-color: #CECBF6; color: var(--brand); }
.cats-btn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.cats-caret {
    width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}
.cats-btn[aria-expanded="true"] .cats-caret { margin-top: 3px; transform: rotate(-135deg); }
.cats-panel {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%);
    width: min(780px, calc(100vw - 48px));
    padding: 18px 24px 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 26px 64px rgba(50, 42, 110, .16);
    text-align: left; z-index: 80;
}
.cats-group { padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.cats-group:first-child { padding-top: 2px; }
.cg-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cg-title:hover { color: var(--brand); }
.cg-title span { font-size: 11px; font-weight: 400; color: var(--ink-4); }
.cg-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cg-links a {
    padding: 6px 14px; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-2); font-size: 12.5px;
    transition: .16s;
}
.cg-links a:hover { background: var(--brand-soft); color: var(--brand); }
.cats-foot { display: flex; gap: 20px; padding-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.cats-foot a:hover { color: var(--brand); }

/* ==========================================================================
   快捷入口
   ========================================================================== */
.quick-sec { max-width: var(--rw); margin: 0 auto; padding: 34px 32px 0; }
.quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.quick-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 6px 16px; border-radius: 18px;
    transition: background .2s, box-shadow .2s, transform .2s;
}
.quick-item:hover { background: #fff; box-shadow: var(--shadow); transform: translateY(-2px); }
.q-ico {
    width: 52px; height: 52px; margin-bottom: 5px;
    display: grid; place-items: center;
    border-radius: 50%; background: #fff; border: 1px solid var(--line);
    color: var(--brand);
}
.q-ico svg { width: 23px; height: 23px; }
.quick-item:hover .q-ico { border-color: #CECBF6; background: var(--brand-soft); }
.quick-item b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.quick-item i { font-style: normal; font-size: 11.5px; color: var(--ink-4); }

/* ==========================================================================
   区块 + 横向滑动行
   ========================================================================== */
.sec { max-width: var(--rw); margin: 0 auto; padding: 48px 32px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sec-head h2 {
    display: flex; align-items: center; gap: 9px;
    font-size: 24px; font-weight: 800; letter-spacing: -.4px; color: var(--ink);
}
.h2-badge {
    padding: 3px 8px; border-radius: 6px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.sec-sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.more {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 12px; border-radius: 10px;
    font-size: 13px; color: var(--ink-3); white-space: nowrap;
    transition: .18s;
}
.more:hover { color: var(--brand); background: var(--brand-soft); }
.more svg { width: 14px; height: 14px; }

.row-wrap { position: relative; }
.row {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 6px 2px 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.row::-webkit-scrollbar { display: none; }
.row > * { flex: 0 0 auto; scroll-snap-align: start; }

.row-arrow {
    position: absolute; top: calc(50% - 24px);
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: #fff; color: var(--ink-2);
    box-shadow: 0 8px 24px rgba(50, 42, 110, .14);
    cursor: pointer; z-index: 6;
    opacity: 0; pointer-events: none;
    transition: opacity .2s, color .2s, border-color .2s;
}
.row-arrow svg { width: 18px; height: 18px; }
.row-arrow:hover { color: var(--brand); border-color: #CECBF6; }
.row-arrow.prev { left: -16px; }
.row-arrow.next { right: -16px; }
.row-wrap.can-prev .row-arrow.prev,
.row-wrap.can-next .row-arrow.next { opacity: 1; pointer-events: auto; }
.row-wrap.is-start .row-arrow.prev,
.row-wrap.is-end .row-arrow.next { opacity: 0 !important; pointer-events: none !important; }
.row-wrap.no-overflow .row-arrow { display: none; }
.row-wrap:hover .row-arrow { opacity: 1; pointer-events: auto; }

/* 模板卡片 */
.tpl-card { width: 196px; transition: transform .22s ease; }
.tpl-card:hover { transform: translateY(-3px); }
.row > .tpl-card { width: auto; min-width: 150px; }
.row > .tpl-card .tpl-info { width: 0; min-width: 100%; }
.row > .hot-card { min-width: 160px; }
/* 行内卡片：盒子收缩到图片实际宽度并在卡片内居中——竖图按高度适配比 150px 窄，
   盒子若固定 150 宽，左上角胶囊/右上角角标会悬在图片外的透明留白上显得错位 */
.row .tpl-thumb { aspect-ratio: auto; height: 250px; min-width: 0; width: fit-content; margin-inline: auto; background: transparent; }
.row .tpl-card.land .tpl-thumb { aspect-ratio: auto; }
.row > .hot-card .tpl-thumb { height: 264px; }
.tpl-thumb {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius); overflow: hidden;
    background: var(--surface-2);
}
.tpl-card.land .tpl-thumb { aspect-ratio: 4 / 3; }
.tpl-thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; }
/* default 卡片结构里封面内的板块标签（.tag）：固定到封面左上角，不参与 flex 排列 */
.tpl-thumb .tag, .video-thumb .tag { position: absolute; left: 9px; top: 9px; z-index: 2; }
.tpl-tag {
    position: absolute; left: 9px; top: 9px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .93); color: var(--ink-2);
    font-size: 11px; line-height: 1.5;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rank {
    position: absolute; right: 9px; top: 9px;
    width: 24px; height: 24px; border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(27, 25, 23, .55); color: #fff;
    font-size: 12px; font-weight: 700;
}
.rank.r1 { background: var(--brand); }
.rank.r2 { background: var(--gold); }
.rank.r3 { background: var(--ink-3); }
.tpl-hover {
    position: absolute; left: 50%; bottom: 14px;
    transform: translate(-50%, 8px);
    padding: 7px 16px; border-radius: 999px;
    background: rgba(27, 25, 23, .84); color: #fff;
    font-size: 12px; white-space: nowrap;
    opacity: 0; transition: .22s;
}
.tpl-card:hover .tpl-hover { opacity: 1; transform: translate(-50%, 0); }
.tpl-info { padding: 10px 2px 0; }
.tpl-info h3 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 42px;
    font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink);
}
.tpl-info h3 a { color: inherit; }
.tpl-card:hover .tpl-info h3 a { color: var(--brand); }
.tpl-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 5px; font-size: 11.5px; color: var(--ink-4);
    white-space: nowrap; overflow: hidden;
}
/* 模板编号：标题下方独立一行 */
.tpl-code-line {
    margin-top: 4px; font-size: 11.5px; line-height: 1.5;
    color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-code-line b { color: var(--ink-2); font-weight: 600; letter-spacing: .4px; }
.tpl-code {
    padding: 1px 7px; border-radius: 5px;
    background: var(--surface-2); color: var(--ink-3); font-size: 10.5px;
}
.tpl-btn, .tpl-views, .tpl-btns { display: none; }

/* 视频卡片 */
.row-video > .video-card { width: 272px; }
.video-card { display: flex; flex-direction: column; }
.video-thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius); overflow: hidden;
    background: var(--surface-2);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-ph {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 30px; color: #CECBF6;
    background: linear-gradient(150deg, #F5F3FC, #E9E6F7);
}
.video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .93); color: var(--brand);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: transform .2s;
}
.video-play svg { width: 22px; height: 22px; margin-left: 2px; }
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-time {
    position: absolute; right: 9px; bottom: 9px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px;
}
.video-info { padding: 10px 2px 0; }
.video-info h3 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 21px;
    font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink);
}
.video-info h3 a { color: inherit; }
.video-card:hover .video-info h3 a { color: var(--brand); }
.video-meta-line {
    display: flex; align-items: center; gap: 8px;
    margin-top: 5px; font-size: 11.5px; color: var(--ink-4);
}
.video-code, .video-views { font-size: 11.5px; color: var(--ink-4); }
.video-btns { display: none; }

/* 资讯卡片 */
.row-art > .art-card { width: 308px; }
.art-card { display: flex; flex-direction: column; }
.art-thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius); overflow: hidden;
    background: var(--surface-2);
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.art-card:hover .art-thumb img { transform: scale(1.04); }
.art-ph {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 28px; font-weight: 700; color: #CECBF6;
    background: linear-gradient(150deg, #F5F3FC, #E9E6F7);
}
.art-cat {
    position: absolute; left: 9px; top: 9px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .93); color: var(--ink-2); font-size: 11px;
}
.art-body { padding: 11px 2px 0; }
.art-body h3 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--ink);
}
.art-body h3 a { color: inherit; }
.art-card:hover .art-body h3 a { color: var(--brand); }
.art-body p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3);
}
.art-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--ink-4); }

.empty-tip { padding: 40px 0; text-align: center; color: var(--ink-3); }

/* ==========================================================================
   常见问题 / SEO 文案
   ========================================================================== */
.faq-sec { padding-top: 56px; }
.faq-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
.faq-intro h2 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.faq-intro p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--ink-3); }
.faq-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px; padding: 9px 16px; border-radius: 10px;
    background: #fff; border: 1px solid var(--line);
    font-size: 13px; color: var(--ink-2);
}
.faq-more:hover { border-color: var(--brand); color: var(--brand); }
.faq-more svg { width: 14px; height: 14px; }
.faq-item {
    margin-bottom: 10px; padding: 0 20px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    transition: border-color .18s;
}
.faq-item:hover { border-color: #CECBF6; }
.faq-item summary {
    position: relative; list-style: none; cursor: pointer;
    padding: 16px 30px 16px 0;
    font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
    position: absolute; right: 2px; top: 50%;
    width: 9px; height: 9px;
    border-right: 1.6px solid var(--ink-4); border-bottom: 1.6px solid var(--ink-4);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s;
}
.faq-item[open] summary i { transform: translateY(-30%) rotate(-135deg); border-color: var(--brand); }
.faq-item[open] summary { color: var(--brand); }
.faq-a { padding: 0 0 16px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }

.seo-sec { max-width: var(--rw); margin: 56px auto 0; padding: 0 32px; }
.seo-in { padding: 34px 0 10px; border-top: 1px solid var(--line); }
.seo-in h2 { font-size: 19px; font-weight: 700; color: var(--ink); }
.seo-in p { margin-top: 12px; font-size: 13px; line-height: 1.95; color: var(--ink-3); }

/* ==========================================================================
   页脚
   ========================================================================== */
.site-foot {
    margin: 56px 0 0 var(--rail);
    background: #F3F0F9;
    border-top: 1px solid var(--line);
}
.foot-in {
    max-width: var(--rw); margin: 0 auto;
    padding: 52px 32px 36px;
    display: grid; grid-template-columns: 1.3fr 1.35fr 1.1fr 1.2fr; gap: 40px;
}
.foot-logo { display: inline-flex; align-items: center; gap: 10px; }
.foot-logo span, .foot-logo img {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 11px; overflow: hidden;
    background: var(--brand); color: #fff; font-size: 16px; font-weight: 700;
}
.foot-logo b { font-size: 17px; font-weight: 700; color: var(--ink); }
.foot-desc { margin-top: 14px; max-width: 330px; font-size: 12.5px; line-height: 1.85; color: var(--ink-3); }
.foot-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.foot-tags li {
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .7); color: var(--ink-3); font-size: 11.5px;
}
.foot-col h4 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.foot-col ul { display: grid; gap: 9px; }
.foot-col li a { font-size: 12.5px; color: var(--ink-3); }
.foot-col li a:hover { color: var(--brand); }
.foot-col li.sub a { padding-left: 10px; font-size: 12px; color: var(--ink-4); }
/* 「用户须知」栏：正文摘要 + 帮助链接 */
.foot-notice .notice-txt { margin: -4px 0 14px; font-size: 12.5px; line-height: 1.95; color: var(--ink-3); }
/* 「模板栏目」：一级栏目一行加粗，旗下二级栏目一行「·」分隔，层级清晰且不拉长 */
.foot-cats .fc-groups { display: grid; gap: 14px; }
.foot-cats .fc-group { display: grid; gap: 6px; justify-items: start; }
.foot-cats .fc-root { font-size: 13px; font-weight: 700; color: var(--ink); }
.foot-cats .fc-root:hover, .foot-cats .fc-sub:hover { color: var(--brand); }
.foot-cats .fc-subs { display: block; }
.foot-cats .fc-sub { display: inline-block; font-size: 11.5px; color: var(--ink-4); }
.foot-cats .fc-sub + .fc-sub::before { content: '·'; margin: 0 7px; color: var(--ink-4); opacity: .55; }
.wx-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.wx-qr { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.wx-qr img { width: 100%; height: 100%; object-fit: cover; }
.wx-body { min-width: 0; display: grid; gap: 4px; }
.wx-body em { font-style: normal; font-size: 11.5px; color: var(--ink-4); }
.wx-body b { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .3px; word-break: break-all; }
.wx-copy {
    justify-self: start; margin-top: 4px;
    padding: 5px 12px; border: 1px solid #CECBF6; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 11.5px; cursor: pointer;
}
.wx-copy:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.wx-hint { font-size: 11.5px; color: var(--ink-4); }
.wx-card.no-qr .wx-body { padding: 6px 0; }
/* 客服弹窗：页脚「联系客服」、左侧栏「客服」点击后在当前页弹出 */
.wx-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.wx-modal[hidden] { display: none; }
.wx-mask { position: absolute; inset: 0; background: rgba(28, 24, 52, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wx-dialog {
    position: relative; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
    overflow: auto; padding: 26px 22px 22px; text-align: center;
    background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(40, 32, 90, .25);
}
.wx-dialog h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.wx-qr-big { width: 180px; height: 180px; margin: 16px auto 0; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.wx-qr-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-tip { margin-top: 12px; font-size: 12px; color: var(--ink-4); }
.wx-id { margin-top: 12px; display: grid; gap: 6px; justify-items: center; }
.wx-id em { font-style: normal; font-size: 11.5px; color: var(--ink-4); }
.wx-id b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .3px; word-break: break-all; }
.wx-id .wx-copy { justify-self: center; }
.wx-close {
    position: absolute; right: 10px; top: 10px; width: 30px; height: 30px;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: var(--surface-2); color: var(--ink-3); cursor: pointer;
}
.wx-close svg { width: 15px; height: 15px; }
.wx-close:hover { background: var(--brand-soft); color: var(--brand); }
.foot-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-4); }
.foot-bottom {
    max-width: var(--rw); margin: 0 auto; padding: 16px 32px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-top: 1px solid rgba(0, 0, 0, .05);
    font-size: 12px; color: var(--ink-4);
}
.foot-bottom .copy { margin: 0; }
/* 备案号链接：外观与普通文案一致，悬停加下划线提示可点 */
.foot-bottom .icp a { color: inherit; text-decoration: none; }
.foot-bottom .icp a:hover { text-decoration: underline; }

.to-top {
    position: fixed; right: 24px; bottom: 28px; z-index: 70;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 13px;
    background: #fff; color: var(--ink-2);
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: .22s; cursor: pointer;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--brand); border-color: #CECBF6; }

/* ==========================================================================
   内容页（模板列表 / 资讯 / 文章 / 视频列表 / 视频详情 / 单页 / 404）
   版心、卡片、胶囊与首页同一套，内页只多「页头 + 结果条 + 分页」骨架
   ========================================================================== */
.wrap { max-width: var(--rw); margin: 0 auto; padding: 0 32px; }
.pg { padding-bottom: 10px; }

/* ---------- 页头 ---------- */
.pg-head { padding: 36px 0 0; }
.pg-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .08em;
    color: var(--brand);
}
.pg-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pg-head h1 { margin-top: 12px; font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.35; color: var(--ink); }
.pg-desc { margin-top: 10px; max-width: 780px; font-size: 13.5px; line-height: 1.85; color: var(--ink-3); }
.pg-desc b { color: var(--brand); font-weight: 700; }
.pg-desc a { color: var(--brand); border-bottom: 1px solid rgba(83, 74, 183, .32); }
.pg-desc a:hover { border-bottom-color: var(--brand); }

/* 胶囊切换（子栏目 / 文章分类 / 标签） */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink-2); font-size: 13px; transition: .18s;
}
.chips a:hover { color: var(--brand); border-color: #CECBF6; }
.chips a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chips span { font-size: 11px; color: var(--ink-4); }
.chips a.on span { color: rgba(255, 255, 255, .72); }

/* ---------- 搜索条 ---------- */
.pg-search { display: flex; gap: 10px; max-width: 640px; margin-top: 20px; }
.ps-box {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    height: 50px; padding: 0 8px 0 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    transition: border-color .18s, box-shadow .18s;
}
.ps-box:focus-within { border-color: #C6C2F0; box-shadow: 0 0 0 3px rgba(83, 74, 183, .10); }
.ps-box > svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--ink-4); }
.ps-box input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; background: none; outline: none;
    font-size: 14px; color: var(--ink);
}
.ps-box input::placeholder { color: var(--ink-4); }
.ps-box button {
    flex: 0 0 auto; height: 38px; padding: 0 18px;
    border: 0; border-radius: 10px;
    background: var(--brand); color: #fff;
    font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.ps-box button:hover { background: var(--brand-d); }
.pg-search > .btn { height: 50px; border-radius: 14px; }

/* ---------- 结果条 ---------- */
.pg-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 26px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--ink-3);
}
.pg-bar b { color: var(--ink); font-weight: 700; }
.pg-bar .pb-side { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.pg-bar .pb-side a { color: var(--ink-3); }
.pg-bar .pb-side a:hover { color: var(--brand); }

/* ---------- 板块标题（搜索结果按栏目分块） ---------- */
.pg-sec { margin-top: 32px; scroll-margin-top: 76px; }
.pg-sec-head,
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pg-sec-head h2,
.section-head h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.pg-sec-head h2 small,
.section-head h2 small { font-size: 12.5px; font-weight: 400; color: var(--ink-4); }
.section-head { margin-top: 34px; }
.more {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 9px;
    font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
}
.more svg { width: 14px; height: 14px; }
.more:hover { color: var(--brand); background: var(--brand-soft); }

/* ---------- 通用面板 / 按钮 / 正文 ---------- */
.panel { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.panel + .panel { margin-top: 14px; }
.panel h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 18px; border-radius: 11px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-2);
    font-size: 13.5px; cursor: pointer; transition: .18s;
}
.btn:hover { border-color: #CECBF6; color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
.btn.block { display: flex; width: 100%; }
.muted { color: var(--ink-3); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 11.5px; }
.tag.code { background: var(--surface-2); color: var(--ink-3); }

.prose { font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 30px 0 12px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; }
.prose h3 { margin: 24px 0 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.prose h4 { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--brand); }
.prose img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: 12px; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
    margin: 18px 0; padding: 14px 18px;
    border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0;
    background: var(--brand-soft); color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 13.5px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.prose code { padding: 2px 6px; border-radius: 5px; background: var(--surface-2); font-size: .92em; }
.prose pre { margin: 18px 0; padding: 14px 16px; border-radius: 12px; background: #201D2E; color: #EDEBF7; overflow-x: auto; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose hr { margin: 26px 0; border: 0; border-top: 1px solid var(--line); }

/* ---------- 栅格 ---------- */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.grid-land { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.grid > .tpl-card,
.video-grid > .video-card { width: auto; }
/* 栅格缩略图不再垫底色：盒子比例直接对齐真实封面（竖版请柬 ≈1:2.16，取 1:2；横版栏目 16:9），
   图片按 contain 居中，几像素余量几乎看不出来，卡片边界交给圆角 + 图片本身 */
.grid .tpl-thumb { aspect-ratio: 1 / 2; background: transparent; }
.grid-land .tpl-card.land .tpl-thumb { aspect-ratio: 16 / 9; }
.grid .tpl-info h3 { min-height: 0; }
.grid .tpl-meta { flex-wrap: wrap; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 36px 0 4px; }
.pager a, .pager .cur {
    display: grid; place-items: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 11px; background: #fff; border: 1px solid var(--line);
    color: var(--ink-2); font-size: 13.5px;
}
.pager a:hover { color: var(--brand); border-color: #CECBF6; }
.pager .cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ---------- 资讯列表 / 文章页两栏 ---------- */
.art-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; margin-top: 24px; }
.art-main { min-width: 0; }
.art-list { display: grid; gap: 14px; }
.art-row {
    display: flex; gap: 18px; padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.art-row:hover { transform: translateY(-2px); border-color: #CECBF6; box-shadow: var(--shadow); }
.art-row-thumb {
    position: relative; display: block; flex: 0 0 232px;
    aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden;
    background: var(--surface-2);
}
.art-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.art-row:hover .art-row-thumb img { transform: scale(1.04); }
.art-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.art-row-body h2, .art-row-body h3 { font-size: 17px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.art-row-body h2 a, .art-row-body h3 a { color: inherit; }
.art-row-body h2 a:hover, .art-row-body h3 a:hover { color: var(--brand); }
.art-row-body > p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 7px 0 10px; font-size: 13px; line-height: 1.8; color: var(--ink-3);
}
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-4); }
.art-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.art-tags a { padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 11.5px; }
.art-tags a:hover { background: var(--brand); color: #fff; }

/* 侧栏 */
.art-side, .video-side { display: grid; gap: 14px; align-content: start; position: sticky; top: 84px; }
.side-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.side-card + .side-card { margin-top: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.side-head h2 { font-size: 15px; font-weight: 700; color: var(--ink); }
.side-head .more { padding: 4px 8px; }
.side-card > p { font-size: 12.5px; line-height: 1.8; color: var(--ink-3); }
.side-card .btn { width: 100%; margin-top: 12px; }

/* 排行榜（热门文章 / 最新文章） */
.rank-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.rank-list li {
    display: flex; gap: 10px; align-items: flex-start; min-width: 0;
    padding: 9px 0; border-bottom: 1px dashed var(--line-2);
    font-size: 13.5px; line-height: 1.6;
    counter-increment: rk;
}
.rank-list { counter-reset: rk; }
.rank-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-list li:first-child { padding-top: 0; }
.rank-list li::before {
    content: counter(rk);
    flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px;
    display: none; place-items: center; border-radius: 6px;
    background: var(--surface-2); color: var(--ink-3);
    font-size: 11.5px; font-weight: 700;
}
.rank-list.numbered li::before { display: grid; }
.rank-list.numbered li:nth-child(1)::before { background: var(--brand); color: #fff; }
.rank-list.numbered li:nth-child(2)::before { background: var(--gold); color: #fff; }
.rank-list.numbered li:nth-child(3)::before { background: #C7C2DE; color: #fff; }
.rank-list a {
    color: var(--ink); min-width: 0; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 恒一行，超长省略号截断 */
}
/* 单行截断的 nowrap 内容会把网格项的最小宽度撑爆轨道：侧栏所有子卡禁用 min-width */
.art-side > *, .video-side > * { min-width: 0; }
.rank-list a:hover { color: var(--brand); }
.rank-list a.on { color: var(--brand); font-weight: 600; }
.rank-list .muted { font-size: 13px; }

/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; }
.tag-cloud a:hover { background: var(--brand-soft); color: var(--brand); }
.tag-cloud a.on { background: var(--brand); color: #fff; }
.tag-cloud .n { margin-left: 3px; font-size: 11px; color: var(--ink-4); }
.tag-cloud a.on .n { color: rgba(255, 255, 255, .75); }

/* ---------- 文章详情 ---------- */
.art-detail { padding: 34px 38px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.art-head h1 { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.5; color: var(--ink); }
.art-head .art-meta { margin-top: 14px; font-size: 12px; }
.art-head .art-tags { margin: 12px 0 0; justify-content: flex-start; }
.art-cover { margin: 22px 0 6px; border-radius: 14px; overflow: hidden; }
.art-cover img { display: block; width: 100%; height: auto; }
.art-content { margin-top: 20px; }
.art-nav {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2);
    font-size: 13.5px;
}
/* 上一篇 / 下一篇：固定一行，标题过长省略号截断（不换行撑高导航） */
.art-nav a {
    min-width: 0; max-width: 48%; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-nav a:hover { color: var(--brand); }
.art-nav .prev { margin-right: auto; }
.art-nav .next { margin-left: auto; text-align: right; }

/* 相关文章 / 模板推荐 */
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }

/* ---------- 视频详情 ---------- */
.video-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; margin-top: 24px; }
.video-cols.is-solo { grid-template-columns: minmax(0, 1fr); }
.video-cols-main { min-width: 0; }
.video-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.5; color: var(--ink); }
.video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-4); }
.video-lead { margin-top: 14px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.video-stage { margin-top: 18px; border-radius: 18px; overflow: hidden; background: #14131A; }
.video-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-cover-only img { display: block; width: 100%; height: auto; }
.video-empty { padding: 60px 0; text-align: center; color: var(--ink-3); }
.video-desc { margin-top: 18px; }
.video-count { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.video-count b { color: var(--ink); font-weight: 700; }

/* 客服 CTA */
.cta-panel {
    margin-top: 18px; padding: 24px 26px;
    background: linear-gradient(135deg, #F4F2FF 0%, #FFFFFF 62%);
    border: 1px solid #E3DFF7; border-radius: 18px;
}
.cta-panel h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.cta-panel p { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--ink-2); }
.cta-panel p b { color: var(--ink); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.cta-wx {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line); font-size: 13px;
}
.cta-wx em { font-style: normal; font-size: 12px; color: var(--ink-4); }
.cta-wx b { color: var(--ink); letter-spacing: .3px; word-break: break-all; }

/* 侧栏模板卡：竖版一排 2 个（图上名下，左上角栏目名胶囊）；横版保持单列行卡 */
.side-tpl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.side-tpl-card { display: block; transition: transform .2s ease; }
.side-tpl-card:hover { transform: translateY(-2px); }
.side-tpl-thumb {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 2;   /* 封面 700×1515 ≈ 1:2.16，1:2 几乎贴合 */
    border-radius: 10px; overflow: hidden;
}
.side-tpl-thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; }
.side-tpl-cat {
    position: absolute; left: 6px; top: 6px; z-index: 2;
    padding: 2.5px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .93); color: var(--ink-2);
    font-size: 11px; line-height: 1.5;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.side-tpl-name {
    margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; font-weight: 500; line-height: 1.6; color: var(--ink);
}
.side-tpl-card:hover .side-tpl-name { color: var(--brand); }

.side-land { display: grid; gap: 10px; }
.side-land-card {
    display: flex; gap: 12px; align-items: center;
    padding: 8px; border-radius: 12px; border: 1px solid transparent;
    transition: background .18s, border-color .18s;
}
.side-land-card:hover { background: var(--surface-2); border-color: var(--line); }
.side-land-thumb {
    flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; overflow: hidden; background: #F6F5F2;
}
.side-land-thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 7px; }
.side-land-name {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink);
}
.side-land-btn {
    display: none; flex: 0 0 auto; margin-left: auto;
    padding: 5px 9px; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.side-land-card:hover .side-land-btn { display: inline-block; }

/* ---------- 单页 / 404 ---------- */
.pg-body { max-width: 880px; margin-top: 22px; padding: 30px 34px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
/* 单页（page.html）：窄正文列在内容区里水平居中，右侧不再空一大块 */
.pg-page > .pg-body, .pg-page > .cta-panel { margin-inline: auto; }
.pg-page > .cta-panel { max-width: 880px; }
.pg-page > .pg-cta { justify-content: center; }
.pg-body + .pg-side { margin-top: 20px; }
.pg-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.err-box { max-width: 620px; margin: 0 auto; padding: 68px 0 40px; text-align: center; }
.err-code {
    font-size: 72px; font-weight: 800; letter-spacing: -3px; line-height: 1;
    background: linear-gradient(135deg, #534AB7 10%, #9C93EE 90%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.err-box h1 { margin-top: 10px; font-size: 23px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.err-txt { margin-top: 12px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.err-txt p { margin-bottom: 8px; }
.err-txt a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.err-tip { margin-top: 26px; font-size: 12.5px; color: var(--ink-4); }
.err-tip a { color: var(--ink-3); }
.err-tip a:hover { color: var(--brand); }

/* 空状态 */
.empty-box { margin-top: 26px; padding: 44px 24px; text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: 18px; }
.empty-box p { font-size: 13.5px; line-height: 1.85; color: var(--ink-3); }
.empty-box p + p { margin-top: 10px; }
.empty-box .btn { margin: 8px 6px 0; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1180px) {
    .hero h1 { font-size: 40px; }
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-land { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-in { grid-template-columns: 1.35fr 1.15fr 1fr; gap: 32px; }
    .foot-contact { grid-column: 1 / -1; }
    .quick { gap: 2px; }
}

@media (max-width: 1024px) {
    .sec, .quick-sec, .seo-sec, .ab-in { padding-left: 24px; padding-right: 24px; }
    .wrap { padding: 0 24px; }
    .foot-in { padding-left: 24px; padding-right: 24px; }
    .foot-bottom { padding-left: 24px; padding-right: 24px; }
    .art-wrap, .video-cols { grid-template-columns: minmax(0, 1fr); }
    .art-side, .video-side { position: static; }
    .faq-wrap { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
}

/* 手机 / 平板：侧栏变底部标签栏 */
@media (max-width: 900px) {
    :root { --rail: 0px; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

    /* 底部常驻标签栏（与右上角抽屉并存） */
    .bottom-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
        display: flex; align-items: stretch;
        height: calc(58px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 22px rgba(50, 42, 110, .06);
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
    }
    .bottom-bar::-webkit-scrollbar { display: none; }
    .bottom-bar a {
        flex: 1 0 auto; min-width: 64px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 6px 2px; color: var(--ink-3); font-size: 10.5px; line-height: 1.2;
    }
    .bottom-bar a.on { color: var(--brand); font-weight: 600; }
    .bottom-bar .ri-ico svg { width: 20px; height: 20px; }

    /* 手机端：左侧栏改成右上角菜单打开的抽屉 */
    .rail {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(304px, 84vw); height: 100%;
        flex-direction: column; align-items: stretch;
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
        background: #fff;
        border-right: 0; border-left: 1px solid var(--line);
        box-shadow: -20px 0 50px rgba(40, 34, 90, .18);
        transform: translateX(103%);
        transition: transform .28s cubic-bezier(.32, .8, .3, 1);
        overflow-y: auto; z-index: 94;
    }
    .rail.open { transform: none; }
    .rail-logo { display: grid; margin: 0 0 16px 4px; }
    .rail-nav { margin: 0; align-items: stretch; gap: 2px; }
    .rail-item {
        width: auto; flex-direction: row; justify-content: flex-start; gap: 12px;
        padding: 12px; border-radius: 12px; font-size: 14.5px;
    }
    .ri-ico svg { width: 20px; height: 20px; }
    .rail-foot {
        margin-top: 12px; align-items: stretch; gap: 2px;
        padding-top: 10px; border-top: 1px solid var(--line-2);
    }
    .rail-cta {
        display: flex; align-items: center; justify-content: center;
        height: 44px; margin-top: 14px; border-radius: 12px;
        background: var(--brand); color: #fff; font-size: 14px; font-weight: 600;
    }

    .app-main { margin-left: 0; padding-top: 56px; }

    /* 顶栏改 fixed：页脚在 .app 容器之外，sticky 到页脚区会跟着滚走（拉到底部顶栏消失） */
    .app-bar { position: fixed; left: 0; right: 0; top: 0; }
    .ab-in { height: 56px; gap: 10px; }
    .ab-brand { display: flex; }
    .ab-crumb { display: none; }
    .ab-actions { gap: 8px; }
    .ab-cta { display: none; }
    .nav-toggle { display: flex; }

    .hero { padding: 20px 0 4px; }
    .hero h1 { margin: 16px auto 10px; font-size: 30px; letter-spacing: -.6px; }
    .hero-sub { font-size: 13px; line-height: 1.7; }
    .hero-search { height: 54px; margin-top: 20px; padding: 5px 5px 5px 16px; gap: 8px; }
    .hero-search input { font-size: 14px; }
    .hero-search button { height: 44px; padding: 0 20px; font-size: 14px; }
    .hs-icon { width: 18px; height: 18px; flex-basis: 18px; }
    .cats-wrap { margin-top: 18px; }
    .cats-btn { height: 36px; font-size: 12.5px; }
    .cats-panel {
        position: fixed; left: 12px; right: 12px; top: 50%;
        transform: translateY(-50%);
        width: auto; max-height: 74vh; overflow-y: auto;
        padding: 16px 18px 12px; border-radius: 18px;
    }
    .cg-links { gap: 6px; margin-top: 8px; }
    .cg-links a { padding: 5px 11px; font-size: 12px; }

    .quick-sec { padding-top: 26px; }
    .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .quick-item { padding: 10px 4px 12px; }
    .q-ico { width: 46px; height: 46px; }
    .q-ico svg { width: 21px; height: 21px; }
    .quick-item b { font-size: 12.5px; }
    .quick-item i { font-size: 10.5px; }

    .sec { padding-top: 34px; }
    .sec-head { margin-bottom: 12px; gap: 10px; }
    .sec-head h2 { font-size: 18px; gap: 7px; }
    .sec-sub { margin-top: 4px; font-size: 11.5px; }
    .more { padding: 6px 8px; font-size: 12px; }
    .h2-badge { font-size: 10px; padding: 2px 6px; }

    .row { gap: 12px; padding: 4px 0 12px; }
    .row > .tpl-card { min-width: 128px; }
    .row .tpl-thumb { height: 208px; }
    .row > .hot-card .tpl-thumb { height: 220px; }
    .tpl-thumb { border-radius: 13px; }
    .tpl-info { padding-top: 8px; }
    .tpl-info h3 { min-height: 38px; font-size: 12.5px; }
    .tpl-meta { font-size: 10.5px; }
    .tpl-code-line { font-size: 10.5px; margin-top: 3px; }
    .tpl-code { display: none; }
    .tpl-hover { display: none; }
    .rank { width: 21px; height: 21px; font-size: 11px; border-radius: 7px; }
    .tpl-tag { font-size: 10px; padding: 2px 7px; left: 7px; top: 7px; }

    .row-video > .video-card { width: 232px; }
    .video-thumb { border-radius: 13px; }
    .video-play { width: 40px; height: 40px; }
    .video-play svg { width: 19px; height: 19px; }
    .video-info h3 { font-size: 13px; }

    .row-art > .art-card { width: 268px; }
    .art-thumb { border-radius: 13px; }
    .art-body h3 { font-size: 13.5px; }

    .row-arrow { display: none; }

    .faq-sec { padding-top: 40px; }
    .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .faq-intro h2 { font-size: 20px; }
    .faq-more { margin-top: 12px; }
    .faq-item summary { padding: 14px 28px 14px 0; font-size: 14px; }

    .seo-sec { margin-top: 40px; }
    .seo-in { padding-top: 26px; }
    .seo-in h2 { font-size: 17px; }
    .seo-in p { font-size: 12.5px; line-height: 1.9; }

    .site-foot { margin-left: 0; margin-top: 40px; }
    .foot-in { grid-template-columns: 1fr 1fr; gap: 26px; padding: 36px 20px 26px; }
    .foot-brand { grid-column: 1 / -1; }
    .foot-contact { grid-column: 1 / -1; }
    /* 窄屏：模板栏目每组压成一行（一级栏目 + 二级栏目横排），更紧凑 */
    .foot-cats .fc-groups { gap: 12px; }
    .foot-cats .fc-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .foot-cats .fc-root { font-size: 12.5px; }
    /* 窄屏：版权 + 备案号压成一行居中（字号缩小，极窄屏自动换行兜底） */
    .foot-bottom {
        flex-direction: row; flex-wrap: wrap;
        align-items: center; justify-content: center;
        gap: 2px 10px; padding: 14px 20px 22px;
        font-size: 10.5px; line-height: 1.6; text-align: center;
    }
    .foot-bottom p { margin: 0; white-space: nowrap; }

    .to-top { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 40px; height: 40px; border-radius: 12px; }

    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .grid-land { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .page-head { padding: 20px 0 2px; }
    .page-head h1 { font-size: 22px; }
    .list-search { max-width: none; }
    .art-detail { padding: 20px 16px; border-radius: 14px; }
    .art-head h1 { font-size: 21px; }
    .art-row { flex-direction: column; }
    .art-row-thumb { flex-basis: auto; width: 100%; }
}

@media (max-width: 560px) {
    .sec, .quick-sec, .seo-sec, .ab-in { padding-left: 16px; padding-right: 16px; }
    .wrap { padding: 0 16px; }
    .hero-in { padding: 0 16px; }
    .foot-in, .foot-bottom { padding-left: 16px; padding-right: 16px; }
    .hero h1 { font-size: 26px; }
    .hero-sub { font-size: 12.5px; }
    .hero-search { height: 50px; padding-left: 14px; }
    .hero-search button { height: 40px; padding: 0 16px; font-size: 13.5px; }
    .row > .tpl-card { min-width: 118px; }
    .row .tpl-thumb { height: 190px; }
    .row > .hot-card .tpl-thumb { height: 202px; }
    .row-video > .video-card { width: 216px; }
    .row-art > .art-card { width: 252px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grid-land { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .foot-brand, .foot-notice, .foot-contact { grid-column: auto; }
    .foot-notice .notice-txt { margin-top: -6px; }

    /* 微信客服卡（手机端）：布局按参考稿（标题竖条 + 左码右文 + 通栏胶囊按钮），配色维持原样 */
    .foot-contact h4 { display: flex; align-items: center; gap: 8px; }
    .foot-contact h4::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: var(--brand); }
    .wx-card { border-radius: 16px; padding: 16px 14px; gap: 14px; }
    .wx-qr { flex: 0 0 108px; width: 108px; height: 108px; border-radius: 12px; padding: 5px; }
    .wx-qr img { border-radius: 8px; }
    .wx-body { gap: 6px; }
    .wx-body em { font-size: 12px; }
    .wx-body b { font-size: 20px; }
    .wx-card .wx-copy {
        justify-self: stretch; width: 100%; margin-top: 8px;
        padding: 10px 12px; border-radius: 999px;
        font-size: 13.5px; text-align: center;
    }
    .to-top { display: none; }
}

/* ==========================================================================
   内容页响应式（集中放在最后，覆盖上面的通用断点，避免同一选择器散落四处）
   ========================================================================== */
@media (max-width: 1180px) {
    .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pg-head { padding: 22px 0 0; }
    .pg-head h1 { font-size: 23px; }
    .pg-desc { margin-top: 8px; font-size: 12.5px; line-height: 1.8; }
    .chips { gap: 6px; margin-top: 14px; }
    .chips a { padding: 6px 13px; font-size: 12.5px; }
    .pg-search { max-width: none; margin-top: 16px; }
    .pg-search > .btn { height: 46px; }
    .ps-box { height: 46px; padding-left: 13px; }
    .ps-box input { font-size: 13.5px; }
    .ps-box button { height: 36px; padding: 0 15px; font-size: 13px; }
    .pg-bar { margin-top: 20px; font-size: 12.5px; }
    .pg-sec { margin-top: 26px; }
    .pg-sec-head h2, .section-head h2 { font-size: 17px; }
    .section-head { margin-top: 28px; }

    .grid { gap: 12px; margin-top: 16px; }
    .video-grid { gap: 12px; margin-top: 16px; }
    .grid .tpl-info h3 { font-size: 12.5px; }
    .grid .tpl-meta { font-size: 10.5px; }

    .pager { margin: 26px 0 4px; gap: 6px; }
    .pager a, .pager .cur { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; }

    .art-grid { gap: 12px; }
    .art-row { padding: 12px; gap: 14px; }
    .art-row-thumb { aspect-ratio: 16 / 9; }
    .art-row-body h2, .art-row-body h3 { font-size: 15px; }
    .art-row-body > p { font-size: 12.5px; -webkit-line-clamp: 2; }
    .art-tags { margin-left: 0; }

    .art-detail { padding: 20px 16px; border-radius: 16px; }
    .art-head h1 { font-size: 21px; }
    .art-cover { margin: 16px -4px 4px; }
    .art-nav { flex-direction: column; gap: 10px; font-size: 12.5px; }
    .art-nav a { max-width: none; }
    .art-nav .next { text-align: left; }

    .video-head h1 { font-size: 19px; }
    .video-lead { font-size: 13px; }
    .cta-panel { padding: 18px 16px; border-radius: 16px; }
    .cta-panel h2 { font-size: 16px; }
    .cta-panel p { font-size: 12.5px; }

    .side-land-btn { display: none !important; }

    .pg-body { padding: 20px 16px; border-radius: 16px; }
    .err-box { padding: 42px 0 30px; }
    .err-code { font-size: 56px; }
    .err-box h1 { font-size: 20px; }
}

@media (max-width: 560px) {
    .pg-head h1 { font-size: 20px; letter-spacing: -.4px; }
    .pg-eyebrow { font-size: 11.5px; }
    .ps-box { height: 44px; }
    .pg-search > .btn { height: 44px; padding: 0 14px; }
    .art-grid { grid-template-columns: minmax(0, 1fr); }
    .err-code { font-size: 48px; }
    .err-actions .btn { flex: 1 1 auto; }
    .video-meta { gap: 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}