/**
 * RTB 模板样式（hy1.cn）
 * 规范：/www/wwwroot/zhan.com/docs/rtb_STYLE.md
 * 结构：1 变量 → 2 基础 → 3 布局 → 4 组件 → 5 页面 → 6 响应式 → 7 动效开关
 * 断点（媒体查询不能用变量，统一只用这 5 个值）：1439 / 1199 / 991 / 767 / 575
 */

/* ==================== 1. 变量 ==================== */
:root {
    /* 品牌 */
    --c-primary: #3071F2;
    --c-primary-hover: #2862D9;
    --c-primary-active: #1F52BF;
    --c-primary-light: #E1E9F8;
    --c-primary-fade: rgba(48, 113, 242, 0.10);
    --c-accent: #E8B842;
    --c-link: #2862D9;            /* 白底上的橙色文字（对比度 ≥4.5:1），纯橙只用在大字、按钮和深色底 */
    --c-code-cell-bg: #EEF3FE;
    --c-code-cell-border: #A9C3F8;

    /* 状态 */
    --c-success: #00B42A;
    --c-success-light: #E8FFEA;
    --c-danger: #F53F3F;
    --c-danger-light: #FFECE8;
    --c-info: #165DFF;

    /* 文字 */
    --c-text-1: #333333;
    --c-text-2: #666666;
    --c-text-3: #999999;
    --c-text-4: #C9CDD4;
    --c-text-inverse: #FFFFFF;
    --c-text-inverse-2: rgba(255, 255, 255, 0.72);

    /* 边框 */
    --c-border: #EEEEEE;
    --c-border-light: #F2F2F2;
    --c-border-dark: rgba(255, 255, 255, 0.12);

    /* 背景 */
    --c-bg-page: #F9F9FA;
    --c-bg-card: #FFFFFF;
    --c-bg-muted: #F9F9F9;
    --c-bg-dark: #1D2129;
    --c-bg-dark-2: #4E5969;
    --c-header-bg: #FFFFFF;
    --c-logo-ink: #1A1A1A;
    --c-slider-dot: rgba(255, 255, 255, 0.55);
    --c-skeleton-bg: linear-gradient(90deg, #EEF1F6 25%, #F8FAFD 50%, #EEF1F6 75%);
    --c-signup-bg: linear-gradient(160deg, #EAF1FF 0%, #FFFFFF 72%);
    --c-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    --c-bg-toast: rgba(29, 33, 41, 0.92);
    --c-topbar-from: #9C4DFF;
    --c-topbar-to: #197DFF;

    /* 间距 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* 字号 */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-code: 40px;
    --fs-code-sm: 28px;

    --lh-tight: 1.3;
    --lh-base: 1.6;
    --lh-loose: 1.8;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;
    --fw-heavy: 700;

    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-num: "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
    --ls-code: 3px;
    --code-cell-w: 44px;
    --code-cell-h: 52px;
    --code-cell-fs: 28px;
    --code-cell-gap: 6px;
    --prose-w: 100%;

    /* 圆角 */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-full: 999px;

    /* 阴影 */
    --sh-card: 0 0 2px rgba(130, 155, 214, 0.12);
    --sh-hover: 0 4px 10px rgba(0, 0, 0, 0.10);
    --sh-pop: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sh-primary: 0 4px 12px rgba(48, 113, 242, 0.30);

    /* 布局 */
    --container: 1430px;
    --container-pad: 15px;
    --header-h: 70px;
    --topbar-h: 40px;
    --tabbar-h: 58px;
    --nav-pill-h: 28px;
    --nav-fs: 15px;
    --nav-pad-x: 16px;
    --nav-gap: 12px;
    --tag-outline-h: 30px;
    --nav-arr: 6px;
    --signup-cell-w: 38px;
    --signup-cell-h: 46px;
    --signup-cell-fs: 26px;
    --signup-cell-gap: 6px;
    --signup-check-top: 3px;
    --footer-desc-w: 360px;
    --focus-h: 388px;
    --floor-min-w: 320px;
    --slider-interval: 5000;
    --slider-arrow: 40px;
    --slider-dot: 8px;
    --slider-dot-active: 20px;
    --slider-dot-hit: 24px;
    --slider-caption-gap: 120px;
    --nav-arr-line: 1.5px;
    --nav-arr-up: -2px;
    --nav-arr-down: 1px;
    --nav-sub-w: 150px;
    --focus-img-pos: center 20%;
    --header-btn-h: 34px;
    --logo-mark: 44px;
    --logo-word-h: 23px;
    --logo-nav-gap: 56px;
    --logo-name-fs: 22px;
    --logo-domain-fs: 10px;
    --focus-side-w: 330px;
    --sidebar-w: 300px;
    --article-img-max: 800px;
    --gap-layout: var(--sp-5);
    --gap-block: var(--sp-8);
    --tap-min: 44px;
    --z-header: 100;
    --z-drawer: 1000;
    --z-float: 999;

    /* 基础过渡（所有组件共用） */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --transition-base: color var(--dur-base) var(--ease),
                       background-color var(--dur-base) var(--ease),
                       border-color var(--dur-base) var(--ease),
                       box-shadow var(--dur-base) var(--ease),
                       opacity var(--dur-base) var(--ease),
                       transform var(--dur-base) var(--ease);

    /* 额外动效（各自独立，组件按需引用） */
    --anim-card-lift: translateY(-2px);
    --anim-press: scale(0.97);
    --anim-float-lift: translateY(-3px);
    --anim-copy-dur: 1600ms;
    --anim-slide-dur: 500ms;
    --anim-shimmer: rtb-shimmer 1.4s linear infinite;
    --anim-toast-in: translateY(var(--sp-5));
    --anim-skeleton: rtb-skeleton 1.2s ease-in-out infinite;
}

/* ==================== 2. 基础 ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text-1);
    background-color: var(--c-bg-page);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--c-link);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    background-color: var(--c-bg-muted);
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

h1, h2, h3, h4 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--c-text-1);
}

address {
    font-style: normal;
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.u-hidden {
    display: none !important;
}

/* ==================== 3. 布局 ==================== */
.l-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.l-page {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-12);
}

.l-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: var(--gap-layout);
    align-items: start;
}

.l-layout > * {
    min-width: 0;
}

.l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-layout);
}

.l-block {
    margin-bottom: var(--gap-block);
}

.l-block:last-child {
    margin-bottom: 0;
}

.l-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
}

.l-grid-3 > * {
    min-width: 0;
}

/* ==================== 4. 组件 ==================== */

/* ---------- 4.1 图标 c-icon ---------- */
.c-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: currentColor;
    vertical-align: -0.15em;
}

.c-icon--sm { width: 14px; height: 14px; }
.c-icon--flip { transform: scaleX(-1); }
.c-icon--lg { width: 24px; height: 24px; }
.c-icon--xl { width: 32px; height: 32px; }

/* ---------- 4.2 按钮 c-btn ---------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    height: 40px;
    padding: 0 var(--sp-5);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: var(--transition-base);
    user-select: none;
}

.c-btn:active {
    transform: var(--anim-press);
}

.c-btn--primary {
    color: var(--c-text-inverse);
    background: var(--c-primary);
}

.c-btn--primary:hover {
    color: var(--c-text-inverse);
    background: var(--c-primary-hover);
}

.c-btn--primary:active {
    background: var(--c-primary-active);
}

.c-btn--outline {
    color: var(--c-link);
    background: var(--c-bg-card);
    border-color: var(--c-primary);
}

.c-btn--outline:hover {
    color: var(--c-link);
    background: var(--c-primary-light);
}

.c-btn--text {
    height: auto;
    padding: 0;
    color: var(--c-link);
}

.c-btn--text:hover {
    color: var(--c-link);
}

.c-btn--sm {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
}

.c-btn--lg {
    height: 48px;
    padding: 0 var(--sp-6);
    font-size: var(--fs-md);
}

.c-btn--block {
    display: flex;
    width: 100%;
}

.c-btn.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

.c-btn.is-copied {
    color: var(--c-text-inverse);
    background: var(--c-success);
    border-color: var(--c-success);
}

.c-btn.is-failed {
    color: var(--c-danger);
    background: var(--c-danger-light);
    border-color: var(--c-danger);
}

/* ---------- 4.3 卡片 c-card ---------- */
.c-card {
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-md);
}

.c-card__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border-light);
}

.c-card__body {
    padding: var(--sp-4) var(--sp-5);
}

.c-card--pad {
    padding: var(--sp-5);
}

.c-card--hover:hover {
    transform: var(--anim-card-lift);
    box-shadow: var(--sh-hover);
}

.c-card--hover {
    transition: var(--transition-base);
}

/* ---------- 4.4 区块标题 c-section-title ---------- */
.c-section-title {
    position: relative;
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
}

.c-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: var(--r-sm);
    background: var(--c-primary);
}

.c-card__header .c-section-title {
    margin-bottom: 0;
}

.c-section-title--sm {
    margin-bottom: 0;
    font-size: var(--fs-md);
}

/* ---------- 4.5 标签 c-tag / 徽标 c-badge ---------- */
.c-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 24px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-2);
    background: var(--c-bg-muted);
    border-radius: var(--r-sm);
    transition: var(--transition-base);
}

.c-tag:hover {
    color: var(--c-link);
    background: var(--c-primary-light);
}

.c-tag:empty {
    display: none;
}

.c-tag--primary {
    color: var(--c-link);
    background: var(--c-primary-light);
}

.c-tag--primary:hover {
    color: var(--c-text-inverse);
    background: var(--c-primary);
}

.c-tag--outline {
    height: var(--tag-outline-h);
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
}

.c-tag--outline .c-icon {
    color: var(--c-text-3);
}

.c-tag--plain,
.c-tag--plain:hover {
    color: var(--c-text-3);
    background: var(--c-bg-card);
    border-color: var(--c-border);
    cursor: default;
}

.c-tag--plain .c-icon,
.c-tag--plain:hover .c-icon {
    color: var(--c-text-3);
}

.c-tag--outline:not(.c-tag--plain):hover {
    color: var(--c-link);
    background: var(--c-primary-light);
    border-color: var(--c-primary);
}

.c-tag--outline:not(.c-tag--plain):hover .c-icon {
    color: var(--c-primary);
}

.c-tag--lg {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
}

.c-tag__count {
    margin-left: var(--sp-1);
    color: var(--c-text-3);
}

.c-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* 文章底部标签：与上方邀请码条、下方上下篇拉开距离 */
.c-tag-group--article {
    margin-top: var(--sp-6);
}

.c-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    border-radius: var(--r-sm);
    vertical-align: middle;
}

.c-badge--primary { color: var(--c-text-inverse); background: var(--c-primary); }
.c-badge--accent  { color: var(--c-text-1); background: var(--c-accent); }
.c-badge--danger  { color: var(--c-text-inverse); background: var(--c-danger); }

/* ---------- 4.6 站点头部 c-site-header ---------- */
.c-site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--c-border);
}

.c-site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--logo-nav-gap);
    height: var(--header-h);
}

.c-site-header__logo {
    flex-shrink: 0;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-heavy);
    color: var(--c-primary);
}

.c-site-header__logo:hover {
    color: var(--c-primary-hover);
}

.c-site-header__logo img {
    max-height: var(--logo-mark);
    width: auto;
    background: none;
}

.c-site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
}

.c-site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    color: var(--c-text-1);
}

.c-site-header__menu-icon,
.c-site-header__menu-icon::before,
.c-site-header__menu-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: var(--r-sm);
    transition: var(--transition-base);
}

.c-site-header__menu-icon {
    position: relative;
}

.c-site-header__menu-icon::before,
.c-site-header__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.c-site-header__menu-icon::before { top: -6px; }
.c-site-header__menu-icon::after  { top: 6px; }

.c-site-header__menu-btn.is-open .c-site-header__menu-icon { background: transparent; }
.c-site-header__menu-btn.is-open .c-site-header__menu-icon::before { top: 0; transform: rotate(45deg); }
.c-site-header__menu-btn.is-open .c-site-header__menu-icon::after  { top: 0; transform: rotate(-45deg); }

/* 主导航：<li> 由引擎 {menu:top format="justnews"} 输出，高亮类名固定为 current（引擎写死） */
.c-site-nav__list {
    display: flex;
    align-items: center;
    height: var(--header-h);
    margin: 0 calc(var(--nav-gap) / -2);
}

/* 间距放在 li 内边距里、高亮由整列 li:hover 触发：项与项之间没有空白缝，鼠标横扫时高亮不会一灭一亮 */
.c-site-nav__list > li {
    position: relative;
    height: 100%;
    padding: 0 calc(var(--nav-gap) / 2);
}

.c-site-nav__list > li > a {
    display: flex;
    align-items: center;
    height: var(--nav-pill-h);
    padding: 0 var(--nav-pad-x);
    font-size: var(--nav-fs);
    color: var(--c-text-1);
    border-radius: var(--r-md);
}

.c-site-nav__list > li:hover > a,
.c-site-nav__list > li > a:hover {
    color: var(--c-primary);
    background: var(--c-primary-light);
}

.c-site-nav__list > li.current > a,
.c-site-nav__list > li.current > a:hover,
.page--home .c-site-nav__list > li:first-child > a {
    color: var(--c-text-inverse);
    font-weight: var(--fw-regular);
    background: var(--c-primary);
}

.c-site-nav__list > li {
    display: flex;
    align-items: center;
}

/* “关于”只放页脚：顶部菜单隐藏该项（栏目仍启用，/guanyu/ 页面照常可访问） */
.c-site-nav__list > li:has(> a[href$="/guanyu/"]) {
    display: none;
}

.c-site-nav__list .arr {
    width: var(--nav-arr);
    height: var(--nav-arr);
    margin-left: var(--sp-1);
    border-right: var(--nav-arr-line) solid currentColor;
    border-bottom: var(--nav-arr-line) solid currentColor;
    transform: translateY(var(--nav-arr-up)) rotate(45deg);
    transition: var(--transition-base);
}

.c-site-nav__list > li:hover .arr {
    transform: translateY(var(--nav-arr-down)) rotate(225deg);
}

.c-site-nav__list .sub {
    position: absolute;
    top: calc(100% - var(--sp-2));
    left: calc(var(--nav-gap) / 2);
    z-index: var(--z-drawer);
    min-width: var(--nav-sub-w);
    padding: var(--sp-2);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.c-site-nav__list > li:hover > .sub {
    opacity: 1;
    visibility: visible;
}

.c-site-nav__list .sub a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-base);
    color: var(--c-text-1);
    white-space: nowrap;
    border-radius: var(--r-sm);
}

.c-site-nav__list .sub a:hover,
.c-site-nav__list .sub a.is-active {
    color: var(--c-link);
    background: var(--c-primary-light);
}

/* ---------- 子栏目导航条 c-subcat（列表页标题下方） ---------- */
.c-subcat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.c-subcat:empty {
    display: none;
}

.c-subcat__item {
    display: inline-flex;
    align-items: center;
    height: var(--tag-outline-h);
    padding: 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
}

.c-subcat__item:hover,
.c-subcat__item.is-active {
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-color: var(--c-primary);
}

/* 抽屉内搜索框只在手机端显示 */
.c-site-nav__search {
    display: none;
}

/* ---------- 4.7 搜索框 c-search-box ---------- */
.c-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
}

.c-search-box__input {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 var(--sp-4);
    font-size: var(--fs-base);
    background: var(--c-bg-muted);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    outline: none;
    transition: var(--transition-base);
}

.c-search-box__input::placeholder {
    color: var(--c-text-3);
}

.c-search-box__input:focus {
    background: var(--c-bg-card);
    border-color: var(--c-primary);
}

.c-search-box__btn {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    color: var(--c-text-3);
}

.c-search-box__btn:hover {
    color: var(--c-link);
}

/* 页头搜索：电脑端直接显示输入框；平板换成图标；手机收进菜单抽屉 */
.c-site-header__tools .c-site-header__search-icon {
    display: none;
}

.c-search-box--lg {
    width: 100%;
    max-width: 600px;
}

.c-search-box--lg .c-search-box__input {
    height: 48px;
    padding-right: 96px;
    font-size: var(--fs-md);
    background: var(--c-bg-card);
    border-color: var(--c-border);
}

.c-search-box--lg .c-search-box__btn {
    top: 4px;
    right: 4px;
    width: auto;
    height: 40px;
    padding: 0 var(--sp-5);
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-radius: var(--r-full);
}

.c-search-box--lg .c-search-box__btn:hover {
    color: var(--c-text-inverse);
    background: var(--c-primary-hover);
}

/* ---------- 4.8 面包屑 c-breadcrumb ---------- */
.c-breadcrumb {
    margin-bottom: var(--sp-5);
}

.c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
    content: "/";
    margin-right: var(--sp-2);
    color: var(--c-text-4);
}

.c-breadcrumb__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--c-text-2);
}

.c-breadcrumb__item a:hover {
    color: var(--c-link);
}

.c-breadcrumb__item[aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text-1);
}

/* ---------- 4.9 页面标题 c-page-header ---------- */
.c-page-header {
    margin-bottom: var(--sp-5);
}

.c-page-header__title {
    font-size: var(--fs-2xl);
}

.c-page-header__desc {
    margin-top: var(--sp-2);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--c-text-2);
}

.c-page-header__meta {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-page-header__meta strong {
    color: var(--c-link);
}

/* ---------- 4.10 筛选条 c-chip ---------- */
.c-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.c-chip-group__label {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
}

.c-chip:hover,
.c-chip.is-active {
    color: var(--c-link);
    background: var(--c-primary-light);
    border-color: var(--c-primary);
}

/* ---------- 4.11 邀请码卡 c-invite-code（三种场景靠修饰类） ---------- */
.c-invite-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-lg);
}

.c-invite-code__main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-right: auto;
    min-width: 0;
}

.c-invite-code__label {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-invite-code__num {
    margin-top: var(--sp-1);
    user-select: all;
}

.c-invite-code__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* 首屏：大号 */
.c-invite-code--hero {
    padding: var(--sp-5) var(--sp-6);
}

/* 文章内：浅橙底，数字略小 */
.c-invite-code--inline {
    margin: var(--sp-6) 0;
    background: var(--c-primary-light);
    border-color: var(--c-primary-fade);
}

.c-invite-code--inline .c-code-cells {
    --code-cell-w: 34px;
    --code-cell-h: 40px;
    --code-cell-fs: var(--fs-xl);
    --code-cell-gap: 4px;
}

/* 侧栏：竖排居中，按钮通栏 */
.c-invite-code--side {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: 0;
    text-align: center;
    border: 0;
}

.c-invite-code--side .c-invite-code__main {
    margin-right: 0;
    align-items: center;
}

.c-invite-code--side .c-invite-code__label {
    display: none;
}

.c-invite-code--side .c-code-cells {
    --code-cell-w: 34px;
    --code-cell-h: 40px;
    --code-cell-fs: var(--fs-xl);
    --code-cell-gap: 4px;
}

.c-invite-code--side .c-invite-code__actions {
    flex-direction: column;
    gap: var(--sp-2);
}

/* 文章页首屏：紧凑一行条，只留复制按钮 */
.c-invite-code--bar {
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-4) 0;
    background: var(--c-primary-light);
    border-color: var(--c-primary-fade);
}

.c-invite-code--bar .c-invite-code__main {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
}

.c-invite-code--bar .c-code-cells {
    --code-cell-w: 28px;
    --code-cell-h: 34px;
    --code-cell-fs: var(--fs-lg);
    --code-cell-gap: 4px;
}

.c-invite-code--bar .c-invite-code__actions .c-btn--outline {
    display: none;
}

/* ---------- 4.12 文章卡片 c-article-card ---------- */
.c-article-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.c-article-card {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-md);
    transition: var(--transition-base);
}

.c-article-card:hover {
    transform: var(--anim-card-lift);
    box-shadow: var(--sh-hover);
}

.c-article-card__thumb {
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-md);
}

.c-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-article-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}

.c-article-card__title {
    font-size: var(--fs-lg);
    line-height: 1.4;
}

.c-article-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-article-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-base);
    color: var(--c-text-2);
}

.c-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-top: auto;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.c-article-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* 阅读数为 0 时不显示：引擎 if 标签比 foreach 循环先编译，取不到循环变量恒为假，
   只能用 data 属性 + CSS 选择器判断（见 rtb_STYLE.md 补充说明） */
.c-article-card__meta-item[data-views="0"] {
    display: none;
}

/* ---------- 4.13 链接列表 c-link-list（最新更新 / 热门 / 相关） ---------- */
.c-link-list__item {
    border-bottom: 1px solid var(--c-border-light);
}

.c-link-list__item:last-child {
    border-bottom: 0;
}

.c-link-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    color: var(--c-text-1);
}

.c-link-list__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-link-list__meta {
    display: flex;
    gap: var(--sp-3);
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.c-link-list__cat {
    color: var(--c-link);
}

/* 卡片内的行：左右留白、整行 hover */
.c-link-list--boxed {
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-md);
    overflow: hidden;
}

.c-link-list--boxed .c-link-list__link {
    padding: var(--sp-3) var(--sp-5);
}

.c-link-list--boxed .c-link-list__link:hover {
    color: var(--c-link);
    background: var(--c-primary-light);
}

/* 紧凑两行标题（侧栏热门） */
.c-link-list--compact .c-link-list__link {
    padding: var(--sp-2) 0;
}

.c-link-list--compact .c-link-list__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* ---------- 4.14 分页 c-pager（引擎输出 div.pager > a.prev / span.current / a / a.next） ---------- */
.c-pager {
    margin-top: var(--sp-6);
}

.c-pager .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.c-pager .pager > a,
.c-pager .pager > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-base);
    color: var(--c-text-2);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.c-pager .pager > a:hover {
    color: var(--c-link);
    border-color: var(--c-primary);
}

.c-pager .pager > .current {
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-color: var(--c-primary);
}

.c-pager:not(:has(a, span)) {
    display: none;
}

/* ---------- 4.15 空状态 c-empty ---------- */
.c-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-5);
    text-align: center;
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-md);
}

.c-empty__icon {
    width: 48px;
    height: 48px;
    color: var(--c-text-4);
    fill: currentColor;
}

.c-empty__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
}

.c-empty__desc {
    max-width: 420px;
    font-size: var(--fs-base);
    color: var(--c-text-3);
}

.c-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

/* ---------- 4.16 错误状态 c-error ---------- */
.c-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-5);
    text-align: center;
}

.c-error__code {
    font-family: var(--font-num);
    font-size: 96px;
    font-weight: var(--fw-heavy);
    line-height: 1;
    color: var(--c-primary);
}

.c-error__title {
    font-size: var(--fs-2xl);
}

.c-error__desc {
    max-width: 480px;
    color: var(--c-text-2);
}

.c-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.c-error__extra {
    width: 100%;
    max-width: 640px;
    margin-top: var(--sp-6);
    text-align: left;
}

/* ---------- 4.17 三步注册 c-steps ---------- */
.c-steps {
    counter-reset: step;
}

.c-steps.l-grid-3 {
    gap: var(--sp-6);
}

.c-steps__item {
    position: relative;
}

.c-steps__item {
    padding: var(--sp-5);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.c-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--sp-3);
    font-family: var(--font-num);
    font-weight: var(--fw-heavy);
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-radius: var(--r-full);
}

.c-steps__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
}

.c-steps__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-block-more {
    margin-top: var(--sp-4);
    text-align: center;
}

/* ---------- 4.18 常见问题 c-faq（details/summary，无 JS 也能展开） ---------- */
.c-faq {
    padding: 0 var(--sp-5);
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-md);
}

.c-faq__item {
    border-bottom: 1px solid var(--c-border-light);
}

.c-faq__item:last-child {
    border-bottom: 0;
}

.c-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--tap-min);
    padding: var(--sp-3) 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    list-style: none;
    cursor: pointer;
}

.c-faq__q::-webkit-details-marker {
    display: none;
}

.c-faq__q::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: var(--c-text-3);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--ease);
}

.c-faq__item[open] .c-faq__q::after {
    transform: rotate(225deg);
}

.c-faq__a {
    padding-bottom: var(--sp-4);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--c-text-2);
}

/* ---------- 4.19 推广横幅 c-promo ---------- */
.c-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-6);
    color: var(--c-text-inverse);
    background: linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-bg-dark-2) 100%);
    border-radius: var(--r-lg);
}

.c-promo:hover {
    color: var(--c-text-inverse);
}

.c-promo__title,
.c-promo__desc {
    display: block;
}

.c-promo__title {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-lg);
    color: var(--c-text-inverse);
}

.c-promo__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-inverse-2);
}

.c-promo__arrow {
    width: 28px;
    height: 28px;
    fill: currentColor;
    opacity: 0.7;
    transition: var(--transition-base);
}

.c-promo:hover .c-promo__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ---------- 4.20 侧栏 / 小组件 ---------- */
.c-widget__list {
    display: flex;
    flex-direction: column;
}

/* 空组件整块不显示（引擎列表标签没有可判断的变量，用 :has 兜底） */
.c-widget:has(.js-widget-list):not(:has(.js-widget-list > *)) {
    display: none;
}

.c-thumb-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.c-thumb-item__img {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.c-thumb-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-thumb-item__title {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-sm);
    color: var(--c-text-1);
}

/* ---------- 4.21 文章详情 ---------- */
.c-article-head {
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-border-light);
}

.c-article-head__title {
    font-size: 28px;
    line-height: 1.4;
}

.c-article-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-article-head__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.c-lead {
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--c-text-2);
    background: var(--c-bg-muted);
    border-left: 4px solid var(--c-primary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

.c-toc {
    max-width: var(--prose-w);
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg-muted);
    border-radius: var(--r-md);
}

.c-toc__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}

.c-toc__list {
    list-style: decimal inside;
    color: var(--c-text-3);
}

.c-toc__list a {
    display: inline-block;
    padding: var(--sp-1) 0;
    color: var(--c-text-2);
}

/* 富文本正文（后台编辑器输出，只能按标签写） */
.c-prose {
    max-width: var(--prose-w);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--c-text-1);
    word-wrap: break-word;
}

.c-prose > * + * {
    margin-top: var(--sp-4);
}

.c-prose h2 {
    margin-top: var(--sp-8);
    font-size: var(--fs-xl);
    scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.c-prose h3 {
    margin-top: var(--sp-6);
    font-size: var(--fs-lg);
}

.c-prose a {
    color: var(--c-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.c-prose img {
    display: block;
    max-width: var(--article-img-max);
    width: 100%;
    margin: var(--sp-4) auto;
    border-radius: var(--r-md);
}

.c-prose ul { list-style: disc; padding-left: var(--sp-6); }
.c-prose ol { list-style: decimal; padding-left: var(--sp-6); }
.c-prose li + li { margin-top: var(--sp-1); }

.c-prose blockquote {
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-text-2);
    background: var(--c-bg-muted);
    border-left: 4px solid var(--c-border);
}

.c-prose strong {
    color: var(--c-text-1);
}

.c-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    display: block;
    overflow-x: auto;
}

.c-prose th,
.c-prose td {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
}

.c-prose th {
    background: var(--c-bg-muted);
    font-weight: var(--fw-medium);
}

.c-post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-6) 0 var(--sp-8);
}

.c-post-nav__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
    padding: var(--sp-4) var(--sp-5);
    color: var(--c-text-1);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
}

.c-post-nav__item:hover {
    color: var(--c-link);
    border-color: var(--c-primary);
    box-shadow: var(--sh-hover);
}

.c-post-nav__item--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.c-post-nav__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.c-post-nav__item:hover .c-post-nav__label {
    color: var(--c-primary);
}

.c-post-nav__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
}

.c-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

/* ---------- 4.22 友情链接 ---------- */
.c-link-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.c-link-pills a {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    background: var(--c-bg-muted);
    border-radius: var(--r-sm);
}

.c-link-pills a:hover {
    color: var(--c-text-inverse);
    background: var(--c-primary);
}

/* ---------- 4.23 站点页脚 c-site-footer ---------- */
.c-site-footer {
    margin-top: var(--sp-12);
    padding: var(--sp-12) 0 var(--sp-6);
    color: var(--c-text-inverse-2);
    background: var(--c-bg-dark);
}

.c-site-footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--c-border-dark);
}

.c-site-footer__grid > * {
    min-width: 0;
}

.c-site-footer__brand {
    margin-bottom: var(--sp-4);
}

.c-site-footer__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}

.c-site-footer__title {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--c-text-inverse);
}

.c-site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.c-site-footer__list a:hover {
    color: var(--c-primary);
}

.c-site-footer__contact {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* 页脚空栏整列不显示 */
.c-site-footer__col:has(.js-widget-list):not(:has(.js-widget-list > *)) {
    display: none;
}

.c-site-footer__desc {
    max-width: var(--footer-desc-w);
}

/* 快速链接里不列单页栏目（“关于”已在“关于本站”栏） */
.c-site-footer__list li[data-type="2"] {
    display: none;
}

/* 友情链接：首页一行文字链，没有友链时整块隐藏 */
.c-site-footer__friends {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-5) 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--c-border-dark);
}

.c-site-footer__friends:has(.js-widget-list:empty) {
    display: none;
}

.c-site-footer__friends-title {
    font-size: var(--fs-sm);
    color: var(--c-text-inverse);
}

.c-site-footer__friends-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
}

.c-site-footer__friends-list a:hover {
    color: var(--c-primary);
}

.c-site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding-top: var(--sp-6);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    text-align: center;
}

.c-site-footer__maps {
    display: flex;
    gap: var(--sp-4);
}

/* ---------- 4.24 返回顶部 c-back-top ---------- */
.c-back-top {
    position: fixed;
    right: var(--sp-8);
    bottom: var(--sp-8);
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-radius: var(--r-full);
    box-shadow: var(--sh-primary);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.c-back-top:hover {
    background: var(--c-primary-hover);
    transform: var(--anim-float-lift);
}

.c-back-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ---------- 4.26 邀请码格子 c-code-cells（JS 把纯文本拆成格子；无 JS 时显示原文） ---------- */
.c-code-cells {
    display: inline-flex;
    gap: var(--code-cell-gap);
    font-family: var(--font-num);
    font-size: var(--code-cell-fs);
    font-weight: var(--fw-heavy);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--c-text-1);
    letter-spacing: var(--ls-code);
}

.c-code-cells.is-split {
    letter-spacing: 0;
}

.c-code-cells__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--code-cell-w);
    height: var(--code-cell-h);
    background: var(--c-code-cell-bg);
    border: 1px solid var(--c-code-cell-border);
    border-radius: var(--r-md);
}

/* 可点击复制的数字格：悬停描主色边，复制成功描成功色边 */
.c-code-cells.is-copyable {
    cursor: pointer;
    border-radius: var(--r-md);
}

.c-code-cells.is-copyable .c-code-cells__cell {
    transition: var(--transition-base);
}

.c-code-cells.is-copyable:hover .c-code-cells__cell,
.c-code-cells.is-copyable:focus-visible .c-code-cells__cell {
    border-color: var(--c-primary);
}

.c-code-cells.is-copyable:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: var(--sp-1);
}

.c-code-cells.is-copied .c-code-cells__cell {
    color: var(--c-success);
    border-color: var(--c-success);
}
.c-code-cells--sm {
    --code-cell-w: 32px;
    --code-cell-h: 38px;
    --code-cell-fs: var(--fs-xl);
    --code-cell-gap: 4px;
}

/* ---------- 4.27 注册页示意 c-signup-mock（说明性插图，不可交互） ---------- */
.c-signup-mock {
    padding: var(--sp-6);
    background: var(--c-bg-page);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

.c-signup-mock__title {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-align: center;
}

.c-signup-mock__field {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--c-text-3);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.c-signup-mock__label {
    flex-shrink: 0;
    width: 4em;
    color: var(--c-text-2);
}

.c-signup-mock__field--code {
    flex-wrap: wrap;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-fade);
}

.c-signup-mock__field--code .c-signup-mock__label {
    color: var(--c-text-1);
    font-weight: var(--fw-bold);
}

.c-signup-mock__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-top: var(--sp-4);
    font-weight: var(--fw-bold);
    color: var(--c-text-inverse);
    background: var(--c-text-4);
    border-radius: var(--r-md);
}

.c-signup-mock__caption {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
    text-align: center;
}

/* ---------- 4.28 关键事实 c-facts（dl） ---------- */
.c-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border-light);
}

.c-facts__item dt {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-facts__item dd {
    margin-top: var(--sp-1);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
}

/* ---------- 4.29 头条文章 c-feature ---------- */
.c-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-lg);
}

.c-feature__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-md);
}

.c-feature__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
}

.c-feature__title {
    font-size: var(--fs-2xl);
    line-height: 1.4;
}

.c-feature__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--c-text-2);
    line-height: var(--lh-loose);
}

.c-feature__meta {
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

/* 带缩略图的紧凑列表 */
.c-thumb-list {
    background: var(--c-bg-card);
    border: 0;
    box-shadow: var(--sh-card);
    border-radius: var(--r-lg);
}

.c-thumb-list__item + .c-thumb-list__item {
    border-top: 1px solid var(--c-border-light);
}

.c-thumb-list__link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
}

.c-thumb-list__img {
    flex-shrink: 0;
    width: 112px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.c-thumb-list__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-thumb-list__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.c-thumb-list__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--c-text-1);
    font-weight: var(--fw-medium);
}

.c-thumb-list__link:hover .c-thumb-list__title {
    color: var(--c-link);
}

.c-thumb-list__meta {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

/* 按栏目找 */
.c-cat-list__item[data-type="2"] {
    display: none;
}

.c-cat-list__item + .c-cat-list__item {
    border-top: 1px solid var(--c-border-light);
}

.c-cat-list__link {
    display: block;
    padding: var(--sp-3) 0;
}

.c-cat-list__name {
    display: block;
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
}

.c-cat-list__link:hover .c-cat-list__name {
    color: var(--c-link);
}

.c-cat-list__desc {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-cat-list__desc:empty {
    display: none;
}

/* ---------- 4.33 站点标志 c-logo（图标 + 字标 + 域名，参考 comiis 样式） ---------- */
.c-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    min-width: 0;
}

.c-logo__mark {
    height: var(--logo-mark);
    width: auto;
    flex-shrink: 0;
    background: none;
}

.c-logo__word {
    height: var(--logo-word-h);
    width: auto;
    background: none;
}

/* 后台上传的 LOGO（站点设置 → LOGO）：整张横版图，高度与默认图标一致 */
.c-logo__img {
    height: var(--logo-mark);
    width: auto;
}

/* ---------- 4.30 顶部细条 c-topbar ---------- */
.c-topbar {
    font-size: var(--fs-xs);
    color: var(--c-text-inverse);
    background: linear-gradient(90deg, var(--c-topbar-from), var(--c-topbar-to));
}

.c-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: var(--topbar-h);
}

.c-topbar__note strong {
    font-family: var(--font-num);
    letter-spacing: 1px;
}

.c-topbar__links {
    display: flex;
    gap: var(--sp-5);
}

.c-topbar__links a:hover {
    color: var(--c-text-inverse);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- 4.31 图标按钮 c-icon-btn / 胶囊按钮 ---------- */
.c-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--header-btn-h);
    height: var(--header-btn-h);
    color: var(--c-text-2);
    background: var(--c-bg-muted);
    border-radius: var(--r-md);
    transition: var(--transition-base);
}

.c-icon-btn:hover {
    color: var(--c-text-inverse);
    background: var(--c-primary);
}

.c-btn--pill {
    border-radius: var(--r-full);
}

.c-site-header__tools .c-btn--pill {
    height: var(--header-btn-h);
    padding: 0 var(--nav-pad-x);
    font-weight: var(--fw-regular);
}

/* ---------- 4.32 手机底部标签栏 c-tabbar（仅手机） ---------- */
.c-tabbar {
    display: none;
}

.c-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}

.c-tabbar__item.is-active {
    color: var(--c-link);
}

.c-tabbar__item--main {
    color: var(--c-text-2);
}

.c-tabbar__main-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -18px;
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border: 3px solid var(--c-bg-card);
    border-radius: var(--r-full);
    box-shadow: var(--sh-primary);
}

.c-tabbar__item--main.is-copied .c-tabbar__main-icon {
    background: var(--c-success);
}

/* ---------- 4.35 焦点图 c-focus（左侧轮播 + 右侧 2 小图） ---------- */
.c-focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--focus-side-w);
    grid-template-rows: minmax(var(--focus-h), auto);
    gap: var(--sp-4);
}

.c-focus__item {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    aspect-ratio: 16 / 9;
}

.c-focus__item--main {
    aspect-ratio: auto;
}

.c-focus__item--main img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.c-focus__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus-img-pos);
    transition: var(--transition-base);
}

.c-focus__item:hover img {
    transform: scale(1.03);
}

.c-focus__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-8) var(--sp-4) var(--sp-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-base);
    color: var(--c-text-inverse);
    background: var(--c-overlay);
}

.c-focus__item--main .c-focus__caption {
    padding: var(--sp-12) var(--sp-5) var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

/* ---------- 4.35b 轮播 c-slider（焦点图左侧大图；无脚本时只显示第 1 张） ---------- */
.c-slider {
    background: var(--c-bg-muted);
}

.c-slider__track {
    display: flex;
    height: 100%;
    transform: translateX(calc(var(--slide-index, 0) * -100%));
    transition: transform var(--anim-slide-dur) var(--ease);
}

.c-slider__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}

.c-slider__slide:hover img {
    transform: scale(1.03);
}

/* 后两张图片还没请求时不显示破图，只露底色 */
.c-slider__slide img:not([src]) {
    visibility: hidden;
}

.c-slider .c-focus__caption {
    padding-right: var(--slider-caption-gap);
}

.c-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--slider-arrow);
    height: var(--slider-arrow);
    color: var(--c-text-1);
    background: var(--c-bg-card);
    border: 0;
    border-radius: var(--r-full);
    box-shadow: var(--sh-hover);
    opacity: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: var(--transition-base);
}

.c-slider__arrow--prev { left: var(--sp-4); }
.c-slider__arrow--next { right: var(--sp-4); }

.c-slider:hover .c-slider__arrow,
.c-slider__arrow:focus-visible {
    opacity: 1;
}

.c-slider__arrow:hover {
    color: var(--c-primary);
}

.c-slider__dots {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 2;
    display: flex;
    gap: var(--sp-1);
}

.c-slider__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--slider-dot-hit);
    height: var(--slider-dot-hit);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.c-slider__dot::before {
    content: "";
    width: var(--slider-dot);
    height: var(--slider-dot);
    background: var(--c-slider-dot);
    border-radius: var(--r-full);
    transition: var(--transition-base);
}

.c-slider__dot.is-active::before {
    width: var(--slider-dot-active);
    background: var(--c-text-inverse);
}

.c-slider.is-single .c-slider__arrow,
.c-slider.is-single .c-slider__dots,
.c-slider:not(.is-ready) .c-slider__arrow {
    display: none;
}

/* ---------- 4.36 面板 c-panel（卡片 + 统一标题栏，首页各区块共用） ---------- */
.c-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.c-panel__more {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.c-panel__more:hover {
    color: var(--c-link);
}

/* 放进面板里的列表：去掉自身的底、边和阴影 */
.c-thumb-list--flush {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- 图片加载占位：骨架闪光（纯样式，零请求；图片到了直接盖住，rtb.js 加 is-loaded 后停动画省电） ---------- */
.c-slider__slide,
.c-tile__img,
.c-article-card__thumb,
.c-thumb-item__img {
    background: var(--c-skeleton-bg);
    background-size: 200% 100%;
    animation: var(--anim-shimmer);
}

.c-slider__slide.is-loaded,
.c-tile__img.is-loaded,
.c-article-card__thumb.is-loaded,
.c-thumb-item__img.is-loaded {
    animation: none;
}

@keyframes rtb-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ---------- 旧浏览器兜底 ----------
   1. [hidden] 一律不显示（rtb.js 在不支持 :has() 的浏览器里用 hidden 隐藏空区块）
   2. 不支持 aspect-ratio（iOS 14 及更早、Chrome 88 以下）：图片框改用内边距撑出 16:9，手机轮播用视口宽度算高度 */
[hidden] {
    display: none !important;
}

@supports not (aspect-ratio: 1 / 1) {
    .c-tile__img,
    .c-thumb-item__img {
        position: relative;
        height: 0;
        padding-top: 56.25%;
    }

    .c-article-card__thumb {
        position: relative;
        height: 0;
        padding-top: 75%;
    }

    .c-tile__img img,
    .c-thumb-item__img img,
    .c-article-card__thumb img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (max-width: 991px) {
    @supports not (aspect-ratio: 1 / 1) {
        .c-focus__item--main { height: calc((100vw - var(--container-pad) * 2) * 0.5625); }
    }
}

/* ---------- 4.25 骨架占位 ---------- */
.c-skeleton {
    background: var(--c-bg-muted);
    border-radius: var(--r-sm);
    animation: var(--anim-skeleton);
}

@keyframes rtb-skeleton {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==================== 5. 页面 ==================== */

/* ---------- 首页 ---------- */
.p-home-top {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

.p-home-top .l-block {
    margin-bottom: var(--sp-4);
}

.p-home-top .l-block:last-child {
    margin-bottom: 0;
}






/* 首页"最新更新 + 按栏目找"两栏 */
/* 首屏注册卡片（焦点区右侧，与轮播等高） */
.p-home-signup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-6);
    background: var(--c-signup-bg);
    border: 1px solid var(--c-primary-fade);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
}

.p-home-signup__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    font-weight: var(--fw-heavy);
}

.p-home-signup__label {
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    color: var(--c-text-1);
}

.p-home-signup__code {
    --code-cell-w: var(--signup-cell-w);
    --code-cell-h: var(--signup-cell-h);
    --code-cell-fs: var(--signup-cell-fs);
    --code-cell-gap: var(--signup-cell-gap);
    color: var(--c-primary);
}

.p-home-signup__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.p-home-signup__points {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-text-2);
}

.p-home-signup__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.p-home-signup__points .c-icon {
    flex-shrink: 0;
    margin-top: var(--signup-check-top);
    color: var(--c-success);
}

.p-home-signup__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}

.p-home-signup__sub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

/* 最新更新：图文卡片网格（每行 4 张，固定 8 篇两行满格） */
.p-home-latest__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
    padding: var(--sp-5);
}

/* ---------- 图文小卡 c-tile（封面 + 两行标题 + 栏目日期） ---------- */
.c-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.c-tile__link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    color: var(--c-text-1);
}

.c-tile__img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-md);
}

.c-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

.c-tile__link:hover .c-tile__img img {
    transform: scale(1.04);
}

.c-tile__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
    transition: var(--transition-base);
}

.c-tile__link:hover .c-tile__title {
    color: var(--c-link);
}

.c-tile__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
}



/* 栏目楼层：自动铺列，空栏目 / 单页栏目整块隐藏 */
.p-home-floors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--floor-min-w), 1fr));
    gap: var(--gap-layout);
}

.p-home-floor:has(.p-home-floor__list:empty) {
    display: none;
}

.p-home-floor .c-section-title a {
    color: inherit;
}

.p-home-floor .c-section-title a:hover {
    color: var(--c-link);
}

.p-home-floor__list {
    padding: var(--sp-1) var(--sp-5) var(--sp-3);
}

.p-home-faq .c-faq {
    column-count: 2;
    column-gap: var(--sp-8);
}

.p-home-faq .c-faq__item {
    break-inside: avoid;
}

/* ---------- 关键词页：相关搜索词条 ---------- */
.p-related-keywords {
    margin-bottom: var(--sp-5);
}

/* ---------- 网站地图 ---------- */
.p-sitemap-page-item {
    display: inline-block;
    margin: 0 var(--sp-2) var(--sp-2) 0;
}

.p-sitemap-formats {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

.p-sitemap-formats a {
    padding: var(--sp-1) var(--sp-3);
    background: var(--c-bg-muted);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
}

.p-sitemap-formats a:hover {
    background: var(--c-primary);
    color: var(--c-text-inverse);
}

.p-sitemap-section {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px dashed var(--c-border);
}

.p-sitemap-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.p-sitemap-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.p-sitemap-sub {
    margin: 0 0 var(--sp-4) var(--sp-4);
    padding-left: var(--sp-4);
    border-left: 2px solid var(--c-border);
}

.p-sitemap-sub__item {
    margin-bottom: var(--sp-3);
}

.p-sitemap-sub__item:last-child {
    margin-bottom: 0;
}

.p-sitemap-sub__title {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-2);
}

.p-sitemap-links {
    display: grid;
    --link-min-w: 240px;
    grid-template-columns: repeat(auto-fill, minmax(var(--link-min-w), 1fr));
    gap: var(--sp-1) var(--sp-5);
}

.p-sitemap-links a {
    display: block;
    font-size: var(--fs-base);
    color: var(--c-text-2);
    line-height: var(--lh-loose);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-sitemap-links a:hover {
    color: var(--c-link);
}

/* ---------- 留言表单 c-form（组件，form_message 片段用） ---------- */
.c-form {
    --form-w: 640px;
    max-width: var(--form-w);
    margin: 0 auto;
    padding: var(--sp-6);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

.c-form__intro {
    margin: 0 0 var(--sp-5);
    padding-bottom: var(--sp-4);
    color: var(--c-text-2);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    border-bottom: 1px dashed var(--c-border);
}

.c-form__intro strong {
    color: var(--c-danger);
}

.c-form__row {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.c-form__row .c-form__field {
    flex: 1;
    margin-bottom: 0;
}

.c-form__field {
    margin-bottom: var(--sp-4);
}

.c-form__field label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-2);
}

.c-form__req {
    margin-left: var(--sp-1);
    color: var(--c-danger);
}

.c-form__field input,
.c-form__field textarea {
    width: 100%;
    padding: var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--c-text-1);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    outline: none;
    transition: var(--transition-base);
}

.c-form__field input:focus,
.c-form__field textarea:focus {
    border-color: var(--c-primary);
}

.c-form__field textarea {
    --textarea-min-h: 120px;
    min-height: var(--textarea-min-h);
    line-height: var(--lh-base);
    resize: vertical;
}

.c-form__actions {
    margin-top: var(--sp-2);
    text-align: center;
}

.c-form__toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-12) + var(--sp-3));
    max-width: 80vw;
    padding: var(--sp-3) var(--sp-6);
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-text-inverse);
    background: var(--c-bg-toast);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) var(--anim-toast-in);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
    z-index: var(--z-float);
}

.c-form__toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s;
}

/* ==================== 6. 响应式 ==================== */

/* PC 小屏 1200–1439：版心随窗口，已由 max-width 自适应 */

/* 平板横 992–1199 */
@media (max-width: 1199px) {
    :root {
        --sidebar-w: 260px;
    }
    .c-site-header__inner { gap: var(--sp-8); }
    .c-site-nav__list { --nav-gap: var(--sp-1); }
    .c-site-nav__list > li > a { padding: 0 var(--sp-3); font-size: var(--fs-base); }
    .c-search-box { width: 200px; }
}

/* 平板竖 768–991：侧栏落到正文下方 */
@media (max-width: 991px) {
    .c-signup-mock { max-width: 440px; }
    .p-home-signup { grid-column: 1 / -1; padding: var(--sp-5); }
    .c-focus { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .c-focus__item--main { aspect-ratio: 16 / 9; }
    .l-layout { grid-template-columns: minmax(0, 1fr); }
    .c-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-site-footer__col--brand { grid-column: 1 / -1; }
    .page--article .c-sidebar-invite { display: none; }
    .c-site-header__search { display: none; }
    .c-site-header__tools .c-site-header__search-icon { display: flex; }
    .l-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 手机 <768 */
@media (max-width: 767px) {
    .p-home-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); padding: var(--sp-4); }
    .c-tile__title { font-size: var(--fs-sm); }
    .p-home-latest__grid .c-tile:last-child:nth-child(odd) { display: none; }
    :root {
        --header-h: 56px;
        --gap-block: var(--sp-6);
        --fs-code: 32px;
        --fs-code-sm: 26px;
    }

    .l-page { padding-top: var(--sp-4); }
    .l-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .l-grid-3 > :last-child:nth-child(odd) { grid-column: auto; }

    /* 导航改抽屉 */
    .c-site-header__menu-btn { display: flex; }
    .c-site-header__tools { gap: 0; }
    .c-topbar { display: none; }
    .c-site-header__inner { gap: var(--sp-3); }
    .c-site-header__logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xl); }
    .c-site-header__tools { flex-shrink: 0; }
    .c-logo { flex-shrink: 1; min-width: 0; --logo-mark: 36px; --logo-word-h: 19px; }
    .c-site-header__tools { gap: var(--sp-2); }
    .c-site-header__tools .c-icon-btn { display: none; }
    .c-site-header__tools .c-btn { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
    .c-site-header__menu-btn { color: var(--c-text-inverse); background: var(--c-text-1); border-radius: var(--r-md); width: 36px; height: 36px; }
    .c-site-nav__list > li > a { border-radius: 0; }
    .c-site-nav__list > li.current > a,
    .page--home .c-site-nav__list > li:first-child > a { color: var(--c-link); background: var(--c-primary-light); }
    .c-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-header);
        display: flex;
        align-items: stretch;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--c-bg-card);
        border-top: 1px solid var(--c-border);
    }
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .c-back-top { bottom: calc(var(--tabbar-h) + var(--sp-4)); }
    .c-site-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: var(--z-drawer);
        display: none;
        padding: var(--sp-2) 0 var(--sp-4);
        background: var(--c-bg-card);
        border-bottom: 1px solid var(--c-border);
        box-shadow: var(--sh-pop);
    }
    .c-site-nav.is-open { display: block; }
    .c-site-nav__list { --nav-gap: 0px; flex-direction: column; align-items: stretch; height: auto; }
    .c-site-nav__list > li > a { flex: 1; height: var(--tap-min); padding: 0 var(--sp-5); }
    .c-site-nav__list > li.current > a { background: var(--c-primary-light); }
    .c-site-nav__list > li { flex-wrap: wrap; }
    .c-site-nav__list .arr { display: none; }
    .c-site-nav__list .sub { position: static; display: flex; flex-wrap: wrap; gap: var(--sp-2); flex-basis: 100%; min-width: 0; padding: 0 var(--sp-5) var(--sp-3); opacity: 1; visibility: visible; border: 0; box-shadow: none; background: transparent; }
    .c-site-nav__list .sub a { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); background: var(--c-bg-muted); }
    .c-site-nav__search { display: block; padding: var(--sp-3) var(--sp-5) 0; }
    .c-site-nav__search .c-search-box { width: 100%; }

    .c-page-header__title { font-size: var(--fs-xl); }
    .c-section-title { font-size: var(--fs-lg); }
    .c-article-head__title { font-size: var(--fs-xl); }

    .c-invite-code { flex-direction: column; align-items: stretch; }
    .c-invite-code__main { margin-right: 0; }
    .c-invite-code__actions { flex-direction: column; }
    .c-invite-code__actions .c-btn { width: 100%; }

    /* 紧凑条：手机也保持一行，保证首屏可见 */
    .c-invite-code--bar { flex-direction: row; align-items: center; }
    .c-invite-code--bar .c-invite-code__main { margin-right: auto; }
    .c-invite-code--bar .c-invite-code__actions { flex-direction: row; }
    .c-invite-code--bar .c-invite-code__actions .c-btn { width: auto; }

    .c-article-card { flex-direction: row-reverse; gap: var(--sp-3); padding: var(--sp-4); }
    .c-article-card__thumb { width: 96px; height: 72px; aspect-ratio: auto; }
    .c-article-card__title { font-size: var(--fs-md); }
    .c-article-card__excerpt { display: none; }

    .c-link-list__link { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
    .c-link-list__title { width: 100%; }
    .c-link-list--compact .c-link-list__link { flex-direction: row; }

    .c-promo { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
    .c-post-nav { grid-template-columns: minmax(0, 1fr); }
    .c-post-nav__item--next { grid-column: auto; align-items: flex-start; text-align: left; }

    .c-site-footer { padding-top: var(--sp-8); }
    .c-site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .c-site-footer__col--nav { display: none; }
    .c-back-top { right: var(--sp-4); bottom: var(--sp-4); }

    .c-error__code { font-size: 72px; }

    .c-facts { gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); }
    .c-code-cells { --code-cell-w: 40px; --code-cell-h: 48px; --code-cell-fs: 24px; }
    .c-code-cells--sm { --code-cell-w: 28px; --code-cell-h: 34px; --code-cell-fs: var(--fs-lg); }
    .c-feature { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
    .c-feature__title { font-size: var(--fs-xl); }
    .c-thumb-list__link { padding: var(--sp-3) var(--sp-4); }
    .c-thumb-list__img { width: 96px; }
    .p-home-faq .c-faq { column-count: 1; }
    .c-focus { gap: var(--sp-3); }
    .c-focus__item--main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
    .c-focus__item--main img { position: static; }
    .c-slider__arrow { display: none; }
    .c-slider .c-focus__caption { padding-right: var(--sp-12); }
    .c-slider__dots { right: var(--sp-2); bottom: var(--sp-1); }
    .c-focus__caption { padding: var(--sp-6) var(--sp-3) var(--sp-2); font-size: var(--fs-sm); }
    .c-steps.l-grid-3 { gap: var(--sp-3); }
    .c-steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-4); }
    .c-steps__num { grid-row: span 2; margin-bottom: 0; }
    .c-steps__title { margin-bottom: var(--sp-1); }
    .c-signup-mock { padding: var(--sp-4); }
}

/* 手机小 <576 */
@media (max-width: 575px) {
    :root {
        --container-pad: 12px;
    }
    .c-card__body,
    .c-card__header { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .c-faq { padding: 0 var(--sp-4); }
    .c-pager .pager > a:not(.prev):not(.next) { display: none; }
}

/* 留言表单、404、网站地图：手机小屏 */
@media (max-width: 575px) {
    .c-form {
        padding: var(--sp-4);
    }
    .c-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* 移动端没有 hover，关掉上浮 */
@media (hover: none) {
    .c-article-card:hover,
    .c-card--hover:hover { transform: none; box-shadow: none; }
}

/* ==================== 7. 动效开关 ==================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --anim-card-lift: none;
        --anim-press: none;
        --anim-float-lift: none;
        --anim-skeleton: none;
        --anim-slide-dur: 0ms;
        --anim-shimmer: none;
    }
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}