/* 从 home-dimension-tabs.ejs 内联 <style> 抽出，供首页缓存与按需加载 */
/* 凡输出本块的页面（含首页分页）：主栏链透明，banner/Tab 外侧不叠一层实色；html/body 单独铺纸色，避免 transparent 透出默认白 */
html:has(#home-dimension-tabs) {
    background-color: #f5f0e6 !important;
}
body:has(#home-dimension-tabs) {
    background-color: #f5f0e6 !important;
}
body:has(#home-dimension-tabs) .material-layout,
body:has(#home-dimension-tabs) .mdl-js-layout,
body:has(#home-dimension-tabs) #main,
body:has(#home-dimension-tabs) #main.material-layout__content,
body:has(#home-dimension-tabs) .material-layout__content {
    background: transparent !important;
    background-color: transparent !important;
}
/* 首页维度区：清除主题默认 165px 顶部内边距，否则 PC 端吸顶参照面下移，表现为「无法吸顶」 */
body:has(#home-dimension-tabs) #main.material-layout__content {
    padding-top: 0 !important;
}
body:has(#home-dimension-tabs) .material-index.mdl-grid,
body:has(#home-dimension-tabs) .home-index-bleed {
    background: transparent !important;
    background-color: transparent !important;
}
/* 顶栏由 masthead 负边距上提，此处不再加 margin-top，避免与 #main 顶缝叠加 */
.home-dim-tabs { margin: 0 0 15px; padding: 0 8px; box-sizing: border-box; }
/*
 * 公告与一级 Tab 缝：见 site-marquee-announce.ejs（body.site-marquee-dim-tabs 由脚本写入）。
 * 此处再盖一层（加载顺序更晚），选择器须正确：勿用「body … #scheme-Paradox」后代写法。
 */
body#scheme-Paradox.site-marquee-active.site-marquee-dim-tabs .material-layout .material-index.mdl-grid,
body#scheme-Isolation.site-marquee-active.site-marquee-dim-tabs .material-layout .material-index.mdl-grid,
body.site-marquee-active.site-marquee-dim-tabs .material-index.mdl-grid {
    padding-top: 0 !important;
}
body#scheme-Paradox.site-marquee-active.site-marquee-dim-tabs .material-index,
body#scheme-Isolation.site-marquee-active.site-marquee-dim-tabs .material-index {
    padding-top: 0 !important;
}
body.site-marquee-active.site-marquee-dim-tabs #home-dimension-tabs.home-dim-tabs.mdl-cell,
body.site-marquee-active.site-marquee-dim-tabs #home-dimension-tabs {
    margin-top: 0 !important;
}
body.site-marquee-active.site-marquee-dim-tabs #main.material-layout__content {
    padding-top: 0 !important;
}
body.site-marquee-active.site-marquee-dim-tabs #top {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* MDL .mdl-cell 常有浅灰底；时间轴在子面板内滚动时顶区（banner+Tab）固定在上，外侧会露灰条，改为透明与下方米色区衔接 */
#home-dimension-tabs.home-dim-tabs.mdl-cell,
#home-dimension-tabs.home-dim-tabs.mdl-cell--12-col {
    background: transparent !important;
    background-color: transparent !important;
}

.home-dim-tabs__masthead {
    display: none !important;
}
/* 兜底：若仍存在空首块（如旧缓存输出的 masthead），强制折叠避免顶部留白 */
#home-dimension-tabs > div:first-child:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
.home-dim-tabs__inputs { position: absolute; opacity: 0; pointer-events: none; }
/* 首页维度区展示时隐藏左上角菜单按钮，避免与一级导航重叠 */
body:has(#home-dimension-tabs) .mdl-layout__drawer-button {
    display: none !important;
}
/* 桌面端：Tab 栏轻量纸色底，避免飘在素底上 */
.home-dim-tabs__bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px;
    border-radius: 16px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f1ebe0 0%, #e9e2d6 100%);
    border: 1px solid rgba(137, 111, 77, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
    position: sticky;
    top: calc(var(--home-dim-sticky-base-top, 56px) + env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px));
    z-index: 35;
    backdrop-filter: saturate(112%) blur(8px);
}
.home-dim-tabs__bar label,
.home-dim-tabs__bar .home-dim-tabs__home,
.home-dim-tabs__bar .home-dim-tabs__era-link {
    cursor: pointer;
    flex: 1 1 0;
    text-align: center;
    padding: 11px 14px;
    border-radius: 999px;
    font-size: 16px;
    color: #7a6a57;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
    text-decoration: none;
}
#home-dim-tab-stories:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-stories"],
#home-dim-tab-figures:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-figures"],
#home-dim-tab-principles:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-principles"] {
    background: #fff;
    border-color: rgba(197, 156, 94, 0.45);
    color: #5b4631;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(120, 90, 58, 0.18);
}
/* 「传统文化故事」：一级导航同样贴顶，去掉顶部预留空区 */
#home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) .home-dim-tabs__bar {
    top: calc(env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px));
}
/* 「百家名理」：隐藏首页维度区顶部横幅（daily_pic 条），避免与 baijia 顶图重复占屏 */

/* 「历史人物」：同百家名理，隐藏维度区顶部横幅，全宽沉浸 */

/* Tab 栏底缘透明淡出，再接到 baijia-bg-top，减轻硬切 */

/* 「历史人物」：Tab 栏半透明叠在星野之上，z-index 高于下方面板延伸的背景层。
 * 勿对此栏用 backdrop-filter：在 scroll=0 时背后是纯黑 html/body，模糊会糊成实黑块；
 * 下滑后背后变成星野才「变透明」。关闭 blur，并让下面板负 margin + --figure-cosmic-top-bleed 把星野铺到栏后。 */



.home-dim-tabs__panel { display: none; }
#home-dim-tab-stories:checked ~ .home-dim-tabs__panels .home-dim-tabs__panel--stories,
#home-dim-tab-figures:checked ~ .home-dim-tabs__panels .home-dim-tabs__panel--figures,
#home-dim-tab-principles:checked ~ .home-dim-tabs__panels .home-dim-tabs__panel--principles {
    display: block;
}
.home-dim-tabs details {
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fafafa;
}
.home-dim-tabs summary {
    cursor: pointer;
    font-weight: 600;
    color: #444;
}
.home-dim-tabs ul { margin: 8px 0 0 1.1em; padding: 0; }
.home-dim-tabs li { margin: 4px 0; font-size: 13px; }
.home-dim-tabs__empty { color: #888; font-size: 13px; padding: 12px 0; }
.home-dim-tabs__stories-grid {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* 历史人物时间轴：仅此层横向滚动；星野 absolute 可穿出面板顶缘而不被 clip */

/* 历史人物：主螺旋 50vw + 4 枚小螺旋（同图），纯黑底 + screen 去黑边；等比 + 旋转 */

/* 繁星成簇：构建期生成的单层 SVG（多团状聚集 + 少量稀疏星），z-index 在星系+scrim 之上、时间轴之下 */




/* 主螺旋：视口宽度 1/2，居中偏上（与源图 1022×816 等比） */


/* 小螺旋 4 枚：约 12–14vw，错落分布 */






/* 螺旋层：地球区域挖空（该处无 spiral，由独立 earth 图层填充） */

/* 繁星：同位置挖空，地球周围无星点 */

/* 地球：仅一枚，宽 50vw，与 spiral 相同 shard 羽化；由脚本在时间轴就绪后再赋 src */





/* 触摸快速滑动：screen 混合 + 大图在滚动时合成代价高，改为 normal 并略降不透明度以减轻顿挫 */



/*
 * 旧横向轴 chrome 吸顶样式（figure-era 已改用 .figure-era__sticky）。
 * overflow-x:auto 会使原生 position:sticky 相对错误滚动盒而失效。
 */





/* 历史人物 Tab：整页纯色底，无渐变（避免滚动时出现多道浅色过渡） */


/*
 * 全屏宽 breakout：必须在 #home-dimension-tabs（mdl-cell）根结点做 calc(50% - 50vw)，
 * 仅拉内层 .home-dim-tabs__panel 会被外层 cell / #main.home-revamp-active{overflow-x:hidden} / body overflow 裁切，
 * 视觉上仍像卡在 max-width 主栏内。
 */

/* 「历史人物」：内层不再重复负边距，铺满外层已 breakout 的 cell */


/* 「百家名理」：同上 */

/*
 * 历史人物 / 百家名理：全宽 cell 已用 100vw；html/body 若 overflow-x:visible 会暴露 100vw 大于「去竖滚动条后的
 * 可视宽」的差值，整页出现横向条、时间轴整块滑出屏右。clip 裁掉该条带，竖向滚动不受影响；时间轴横向仍靠 .figure-timeline-panel__hscroll。
 */





/* 百家哲思样式已迁到 /css/baijia-page.css，由 /principles/ 加载 */
/* 首页改版 #main 曾设 overflow-x:hidden，历史人物/百家名理全宽时需放行 */





/* 历史人物 Tab：整条轴随容器变窄，与吸顶 fixed 条使用同一 hscroll.clientWidth 逻辑 */










/* 悬停对准线：路径 y1(头像)→y2(时间轴)；实测正向 offset 朝头像，故 keyframes 用负值使虚线朝轴端流动 */



/* 同路径上层：一段更宽的高亮沿轴向扫过（screen 叠色 + 光晕） */






/* 大事火焰：悬停时提到 svg 末层（脚本）+ 高亮、标签放大、轮廓跑马灯扫光 */






/* 事件名：文字轮廓为 mask，渐变层横向扫过（高管风金属字扫光，非糊块平移） */






/* 二级页（窄屏）：顶部用与首页 daily_pic 相同的 banner 填留白；Tab 栏加强背景 */
@media (max-width: 991px) {
    .home-dim-tabs__masthead {
        display: block;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: calc(-56px - env(safe-area-inset-top, 0px));
        margin-bottom: 16px;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        /* 总高度含顶栏留白（较上一版约减 1/3） */
        min-height: clamp(133px, 35vw, 187px);
        box-sizing: border-box;
        border-radius: 0 0 16px 16px;
        background:
            linear-gradient(180deg, rgba(45, 35, 28, 0.35) 0%, rgba(245, 240, 230, 0.55) 55%, rgba(250, 248, 242, 0.9) 100%),
            url('<%= _dimBannerUrl %>') center center / cover no-repeat;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
        pointer-events: none;
    }
    .home-dim-tabs__bar {
        padding: 8px;
        border-radius: 16px;
        border: 1px solid rgba(137, 111, 77, 0.16);
        background: linear-gradient(180deg, #f1ebe0 0%, #e9e2d6 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
        margin-bottom: 16px;
    }
    .home-dim-tabs__bar label,
    .home-dim-tabs__bar .home-dim-tabs__home {
        background: transparent;
        border: 1px solid transparent;
    }
    .home-dim-tabs__bar .stories-label-mobile {
        display: inline !important;
    }
    .home-dim-tabs__bar .stories-label-pc {
        display: none !important;
    }
    .home-dim-tabs__bar .home-dim-tabs__home {
        display: none;
    }
    #home-dim-tab-stories:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-stories"],
    #home-dim-tab-figures:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-figures"],
    #home-dim-tab-principles:checked ~ .home-dim-tabs__bar label[for="home-dim-tab-principles"] {
        background: #fff;
        border-color: rgba(197, 156, 94, 0.45);
        box-shadow: 0 2px 8px rgba(120, 90, 58, 0.18);
    }
}
/* 历史人物时间轴：窄屏横向划到底（iOS/WebKit 对 overflow:auto 的横向滚动层不稳定） */

/* 桌面端：同样展示与 daily_pic 一致的顶部 banner（此前误设为 display:none 导致 PC 留白） */
@media (min-width: 992px) {
    .home-dim-tabs__masthead {
        display: block;
        width: calc(100% + 16px);
        margin-left: -8px;
        margin-right: -8px;
        margin-top: calc(-56px - env(safe-area-inset-top, 0px));
        margin-bottom: 20px;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        /* clamp / max-height 较上一版约减 1/3 */
        min-height: clamp(173px, 17vw, 253px);
        max-height: min(280px, 28vh);
        box-sizing: border-box;
        border-radius: 0 0 14px 14px;
        background:
            linear-gradient(180deg, rgba(45, 35, 28, 0.26) 0%, rgba(245, 240, 230, 0.48) 55%, rgba(250, 248, 242, 0.94) 100%),
            url('<%= _dimBannerUrl %>') center center / cover no-repeat;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
        pointer-events: none;
    }
}
/*
 * PC +「历史人物」「百家名理」：页脚上方大块米色空区，
 * 实为 #main 在 MDL 下纵向拉伸，分页 nav 与「回顶」之间被撑开；主栏顶对齐并取消主网格吃满剩余高度。
 */

@media (max-width: 900px) {
    .baijia-virtues {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .baijia-virtue {
        border-left: none;
        border-top: 1px solid rgba(176, 140, 80, 0.34);
    }
    .baijia-virtue:nth-child(-n+2) {
        border-top: none;
    }
}
@media (max-width: 640px) {
    .baijia-top {
        grid-template-columns: 1fr;
    }
    .baijia-virtues {
        grid-template-columns: 1fr;
    }
    .baijia-virtue {
        border-top: 1px solid rgba(176, 140, 80, 0.34);
        padding-top: 10px;
    }
    .baijia-virtue:first-child {
        border-top: none;
    }
}
/* 故事页改版：二级导航 + 榜单 + 双列瀑布流 */
/* 榜单骨架替换、瀑布流滚动中批量插卡会改变文档高度；禁用滚动锚定，避免惯性末尾视口被浏览器再「补偿」一截 */
#stories-hub,
#stories-waterfall-wrap,
.stories-comic-spotlight,
.stories-rank-wrap {
    overflow-anchor: none;
}
/* 仅关子树不够：根视口（html/body）与主区仍会参与滚动锚定，手势结束后异步插卡/回填易触发「自己又滑一截」 */
html:has(#home-dimension-tabs #home-dim-tab-stories:checked),
body:has(#home-dimension-tabs #home-dim-tab-stories:checked),
body.home-revamp-active:has(#home-dimension-tabs #home-dim-tab-stories:checked) #main,
body.home-revamp-active:has(#home-dimension-tabs #home-dim-tab-stories:checked) .mdl-layout__content {
    overflow-anchor: none;
}
.stories-hub {
    width: 100%;
    box-sizing: border-box;
}
.stories-legacy-list {
    display: none;
}
.stories-subnav--hidden,
.stories-subnav[hidden] {
    display: none !important;
}
.stories-subnav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 0 0 12px;
    min-height: 96px;
    border: 1px solid rgba(152, 123, 86, 0.2);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(90, 70, 50, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    position: sticky;
    top: calc(
        env(safe-area-inset-top, 0px) +
        var(--site-marquee-height, 0px) +
        var(--home-dim-primary-bar-h, 52px) +
        6px
    );
    z-index: 34;
    backdrop-filter: saturate(110%) blur(6px);
}
.stories-subnav__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    text-align: center;
    border-right: none;
    background: transparent;
    color: #7b6b57;
    min-height: 96px;
    padding: 0 10px;
    line-height: 1.2;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    transition: color .18s ease;
}
.stories-subnav__btn:last-child {
    border-right: none;
}
.stories-subnav__btn:hover {
    color: #5f4b36;
}
.stories-subnav__btn:active {
    color: #4f3b27;
}
.stories-subnav__btn.is-active {
    background: transparent;
    color: #5b4631;
    font-weight: 700;
}
.stories-subnav__btn.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: clamp(56px, 5vw, 84px);
    height: 4px;
    border-radius: 2px;
    background: #c8a76b;
}
/*
 * 榜单外层不再铺整块白底：PC 双列时右侧「最喜爱的人物」更高，
 * 若 wrap 白底+圆角包住整块，左下会留下「假空白面板」（红框问题）。
 * 白底只给「今日热榜」抽屉与各 .stories-rank-card。
 */
.stories-rank-wrap {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 14px;
}
/* 倾情演绎：漫画封面轮播（推荐故事 · 今日热榜上方） */
.stories-comic-spotlight {
    position: relative;
    display: block;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(90, 70, 50, 0.14);
    border-radius: 12px;
    padding: 12px 12px 14px;
    margin-bottom: 14px;
}
.stories-comic-spotlight__title {
    position: static;
    margin: 0 0 10px 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #5d4037;
    letter-spacing: 0.06em;
    pointer-events: none;
}
.stories-comic-spotlight__viewport {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* 允许纵向滚页面，横向由 JS 识别为切页 */
    touch-action: pan-y;
}
.stories-comic-spotlight__track {
    position: relative;
    min-height: 0;
}
.stories-comic-spotlight__slide {
    display: none;
    width: 100%;
}
.stories-comic-spotlight__slide.is-active,
.stories-comic-spotlight__slide.is-leave {
    display: block;
}
.stories-comic-spotlight__slide.is-leave {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
}
.stories-comic-spotlight__slide.is-enter {
    animation: spotlight-blinds-fade-in 0.82s ease both;
}
@keyframes spotlight-blinds-fade-in {
    0% { opacity: 0; }
    28% { opacity: 0.22; }
    100% { opacity: 1; }
}
.stories-comic-spotlight__blinds {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.stories-comic-spotlight__slat {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, opacity;
    background: #ece6dc;
}
.stories-comic-spotlight__slat img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--slat-n, 10) * 100%);
    max-width: none;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: translateX(calc(var(--slat-i, 0) * -100% / var(--slat-n, 10)));
}
.stories-comic-spotlight__blinds.is-play .stories-comic-spotlight__slat {
    animation: spotlight-slat-out 0.58s cubic-bezier(0.42, 0, 0.18, 1) forwards;
}
@keyframes spotlight-slat-out {
    0% {
        transform: scaleX(1);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: scaleX(0.04);
        opacity: 0;
        filter: brightness(1.12);
    }
}
@media (prefers-reduced-motion: reduce) {
    .stories-comic-spotlight__slide.is-enter {
        animation: none;
    }
    .stories-comic-spotlight__blinds {
        display: none !important;
    }
}
.stories-comic-spotlight__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.stories-comic-spotlight__cover-shell {
    position: relative;
    display: block;
    width: 100%;
    max-width: min(100%, 768px);
    margin: 0 auto;
    aspect-ratio: 1536 / 1024;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(110deg, #ece6dc 8%, #f7f3ec 18%, #ece6dc 33%);
    background-size: 200% 100%;
    box-shadow: 0 8px 24px rgba(70, 50, 30, 0.14);
}
.stories-comic-spotlight__cover-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: inherit;
    animation: stories-comic-spotlight-shimmer 1.2s ease-in-out infinite;
    z-index: 0;
}
.stories-comic-spotlight__cover-shell.is-loaded::before {
    display: none;
}
@keyframes stories-comic-spotlight-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.stories-comic-spotlight__cover-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}
.stories-comic-spotlight__cover-img.is-preview {
    opacity: 0.88;
    filter: blur(8px);
    transform: none;
}
.stories-comic-spotlight__cover-img.is-loaded {
    opacity: 1;
    filter: none;
    transform: none;
    visibility: visible;
}
.stories-comic-spotlight__cover-shell.is-loaded {
    background-image: none !important;
}
.stories-comic-spotlight__cover-img:not(.is-loaded):not(.is-preview) {
    visibility: hidden;
}
.stories-comic-spotlight__caption {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #5d4037;
    line-height: 1.35;
}
.stories-comic-spotlight__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #5d4037;
    box-shadow: 0 2px 10px rgba(60, 45, 30, 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transition: background 0.18s ease, transform 0.18s ease;
}
.stories-comic-spotlight__nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.04);
}
.stories-comic-spotlight__nav--prev {
    left: 6px;
}
.stories-comic-spotlight__nav--next {
    right: 6px;
}
.stories-comic-spotlight__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.stories-comic-spotlight__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(93, 64, 55, 0.28);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.stories-comic-spotlight__dot.is-active {
    background: #c8a76b;
    transform: scale(1.15);
}
/* 子 Tab 切换：今日热榜随推荐故事显示；倾情演绎始终展示 */
#stories-subtab-recommend:checked ~ .stories-rank-wrap {
    display: block;
}
#stories-subtab-rank:checked ~ .stories-rank-wrap {
    display: none;
}
.stories-rank-drawer {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(90, 70, 50, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    /* 顶部留给「今日热榜」标题（原在 wrap::before） */
    padding: 36px 12px 12px;
    margin-bottom: 10px;
    --drawer-gap: 8px;
    --drawer-collapsed-w: 44px;
    --drawer-count: 5;
    --skel-drawer-count: 5;
}
.stories-rank-drawer::before {
    content: "今日热榜";
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 8;
    font-size: 14px;
    font-weight: 700;
    color: #5d4037;
    letter-spacing: 0.06em;
    pointer-events: none;
}
.stories-rank-drawer__track {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: var(--drawer-gap);
    min-height: 360px;
}
.stories-rank-drawer__card {
    width: var(--drawer-collapsed-w);
    height: 360px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: width .55s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow .22s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    background: #ddd;
}
.stories-rank-drawer__card.is-active {
    width: calc(
      100% -
      (var(--drawer-count) - 1) * var(--drawer-collapsed-w) -
      (var(--drawer-count) - 1) * var(--drawer-gap)
    );
    box-shadow: 0 8px 22px rgba(50, 35, 20, 0.2);
}
.stories-rank-drawer__cover,
.stories-rank-drawer__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.stories-rank-drawer__cover img {
    object-fit: cover;
    filter: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.38s ease;
}
.stories-rank-drawer__cover.stories-hub-media-ph--pending img {
    opacity: 0;
}
.stories-rank-drawer__cover.stories-hub-media-ph--loaded img {
    opacity: 1;
}
@keyframes stories-hub-media-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.stories-rank-drawer__cover.stories-hub-media-ph--pending::before,
.stories-rank-vcard__cover.stories-hub-media-ph--pending::before,
.story-card__cover.stories-hub-media-ph--pending::before,
.stories-rank-figure-item__avatar-ring.stories-hub-media-ph--pending::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(110deg, #ece7dc 0%, #f5f0e6 42%, #ebe4d6 58%, #ece7dc 100%);
    background-size: 200% 100%;
    animation: stories-hub-media-shimmer 1.35s ease-in-out infinite;
}
.stories-rank-figure-item__avatar-ring.stories-hub-media-ph--pending::before {
    border-radius: 50%;
}
.stories-rank-drawer__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(0, 0, 0, 0.3) 35%,
        rgba(0, 0, 0, 0.12) 62%,
        rgba(255, 255, 255, 0.1) 82%,
        rgba(255, 255, 255, 0.2) 100%
    );
}
.stories-rank-drawer__card.is-active .stories-rank-drawer__cover::after {
    background: none;
}
.stories-rank-drawer__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .4px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    z-index: 4;
    white-space: nowrap;
    overflow: hidden;
}
.stories-rank-drawer__top .badge-mini {
    display: inline;
    line-height: 1;
}
.stories-rank-drawer__top .badge-full {
    display: none;
    line-height: 1;
}
.stories-rank-drawer__card.is-active .stories-rank-drawer__top .badge-mini {
    display: none;
}
.stories-rank-drawer__card.is-active .stories-rank-drawer__top .badge-full {
    display: inline;
}
.stories-rank-vcard.is-active .stories-rank-drawer__top .badge-mini {
    display: none;
}
.stories-rank-vcard.is-active .stories-rank-drawer__top .badge-full {
    display: inline;
}
.stories-rank-vcard .stories-rank-drawer__top .badge-mini {
    display: none !important;
}
.stories-rank-vcard .stories-rank-drawer__top .badge-full {
    display: inline !important;
}
.stories-rank-drawer__top.rank-1 { background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%); } /* 冠军常用红色 */
.stories-rank-drawer__top.rank-2 { background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%); } /* 亚军常用橙色 */
.stories-rank-drawer__top.rank-3 { background: linear-gradient(135deg, #ffd54f 0%, #fbc02d 100%); color: #4e342e; } /* 季军常用金黄 */
.stories-rank-drawer__top.rank-4 { background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%); } /* 第四常用蓝色 */
.stories-rank-drawer__top.rank-5 { background: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%); } /* 第五常用青绿色 */
.stories-rank-drawer__top.rank-6 { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); } /* 兜底灰蓝 */
.stories-rank-drawer__top.rank-7 { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); }
.stories-rank-drawer__top.rank-8 { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); }
.stories-rank-drawer__top.rank-9 { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); }
.stories-rank-drawer__top.rank-10 { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); }
.stories-rank-drawer__top.rank-default { background: linear-gradient(135deg, #90a4ae 0%, #78909c 100%); }
.stories-rank-drawer__card.is-active .stories-rank-drawer__top {
    left: 10px;
    right: auto;
    min-width: 74px;
    padding: 0 8px;
    border-radius: 0 0 10px 10px;
}
.stories-rank-vcard.is-active .stories-rank-drawer__top {
    left: 10px;
    right: auto;
    min-width: 74px;
    padding: 0 8px;
    border-radius: 0 0 10px 10px;
}
.stories-rank-vcard .stories-rank-drawer__top {
    left: 10px;
    right: auto;
    min-width: 74px;
    padding: 0 8px;
    border-radius: 0 0 10px 10px;
}
.stories-rank-drawer__vert-title {
    position: absolute;
    z-index: 2;
    top: 52px;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.24);
    opacity: 1;
    transition: opacity .24s ease;
}
.stories-rank-drawer__card.is-active .stories-rank-drawer__vert-title {
    opacity: 0;
}
.stories-rank-drawer__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 16px 14px 14px;
    background: linear-gradient(to top, #fff 58%, transparent 100%);
    opacity: 0;
    transition: opacity .3s ease;
}
.stories-rank-drawer__card.is-active .stories-rank-drawer__info {
    opacity: 1;
}
.stories-rank-drawer__avatars {
    display: flex;
    align-items: center;
    min-height: 36px;
}
.stories-rank-drawer__avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -9px;
    background: #f3efe5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.stories-rank-drawer__avatars img:first-child {
    margin-left: 0;
}
.stories-rank-drawer__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.stories-rank-drawer__right-meta {
    min-width: 0;
    text-align: right;
}
.stories-rank-drawer__tags {
    color: #6f6254;
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}
.stories-rank-drawer__title {
    margin: 0 0 6px;
    font-size: 16px;
    color: #1f2937;
    line-height: 1.34;
}
.stories-rank-drawer__desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.58;
    color: #5f6368;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.stories-rank-drawer__meta {
    font-size: 12px;
    color: #8a7b68;
}
.stories-rank-drawer__meta-num {
    font-size: 20px;
    font-weight: 800;
    color: #c65f16;
    margin-left: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.stories-rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start !important;
    background: transparent;
}
.stories-rank-grid > .stories-rank-card {
    border: 1px solid rgba(90, 70, 50, 0.18);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    height: fit-content !important;
    max-height: none !important;
    align-self: start !important;
}
.stories-rank-card {
    border: 1px solid rgba(90, 70, 50, 0.18);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    height: fit-content;
    align-self: start;
}
.stories-rank-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}
.stories-rank-card__title {
    margin: 0;
    font-size: 16px;
    color: #3f3024;
}
.stories-rank-card__more {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #8a735a;
    text-decoration: none;
    padding: 2px 0;
}
.stories-rank-card__more:hover {
    color: #5d4037;
    text-decoration: underline;
}
.stories-rank-list--figures .stories-rank-figure-item--more {
    --rank-color: #8a735a;
    --rank-bg: rgba(138, 115, 90, 0.06);
    --rank-bg-hover: rgba(138, 115, 90, 0.14);
    --rank-border: rgba(138, 115, 90, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    grid-template-columns: none;
    gap: 8px;
    min-height: 72px;
    font-size: 15px;
    font-weight: 700;
    color: #5d4037;
    text-decoration: none;
}
/* PC：标题「更多」已够用，隐藏列表尾入口（若缓存旧 DOM） */
@media (min-width: 992px) {
    .stories-rank-list--figures .stories-rank-figure-item--more {
        display: none !important;
    }
}
.stories-rank-list--figures .stories-rank-figure-item--more .stories-rank-figure-item__more-label {
    letter-spacing: 0.04em;
}
.stories-rank-list--figures .stories-rank-figure-item--more .stories-rank-figure-item__more-arrow {
    font-size: 16px;
    line-height: 1;
    opacity: 0.75;
}
.stories-rank-card__body {
    position: relative;
}
/* 热度总榜：禁止用固定 min-height 预留「展开态」高度，否则折叠后底部必留白 */
.stories-rank-card__body--vertical {
    min-height: 0 !important;
    height: auto;
}
/* 热度总榜骨架：撑开高度并裁剪，避免 absolute 骨架盖住下方「最喜爱的人物」标题 */
.stories-rank-card__body--vertical:has(.stories-hub-skel-layer:not(.is-hidden)) {
    min-height: 300px !important;
    overflow: hidden;
}
.stories-rank-card__body--figures {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
}
.stories-rank-card__body--figures:has(.stories-hub-skel-layer:not(.is-hidden)) {
    min-height: 560px;
}
/* 仅桌面：数据就位后取消人物榜预留高度；手机端仍用下方 media 的 100px 横滑高度 */
@media (min-width: 641px) {
    .stories-rank-card__body--figures.is-rank-figures-ready {
        min-height: 0 !important;
    }
}
.stories-rank-figures-wrap {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 1;
}
.stories-rank-figures-wrap > .stories-hub-skel-layer {
    height: auto;
    display: block;
}
.stories-rank-figures-scroll {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
}
.stories-rank-figures-scroll--skel {
    pointer-events: none;
}
.stories-rank-figures-scroll > .stories-rank-list--figures {
    width: 100%;
    min-width: 0;
}
.stories-rank-list--figures {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}
.stories-rank-list--figures .stories-rank-figure-item {
    --rank-color: #7b6a56;
    --rank-bg: rgba(140, 125, 105, 0.08);
    --rank-bg-hover: rgba(140, 125, 105, 0.18);
    --rank-border: rgba(140, 125, 105, 0.28);
    position: relative;
    cursor: pointer;
    display: grid;
    grid-template-columns: 48px 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 14px 12px;
    border-radius: 14px;
    border: 1px solid var(--rank-border);
    background: var(--rank-bg);
    box-shadow: none;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stories-rank-list--figures .stories-rank-figure-item:hover {
    background: var(--rank-bg-hover);
    border-color: color-mix(in srgb, var(--rank-color) 45%, #ffffff);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--rank-color) 24%, transparent);
}
.stories-rank-figure-item__idx {
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--rank-color);
    text-align: right;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}
.stories-rank-list--figures .stories-rank-figure-item:nth-child(1) { --rank-color: #d32f2f; --rank-bg: rgba(239, 83, 80, 0.10); --rank-bg-hover: rgba(239, 83, 80, 0.20); --rank-border: rgba(211, 47, 47, 0.34); }
.stories-rank-list--figures .stories-rank-figure-item:nth-child(2) { --rank-color: #ef6c00; --rank-bg: rgba(255, 167, 38, 0.10); --rank-bg-hover: rgba(255, 167, 38, 0.20); --rank-border: rgba(251, 140, 0, 0.34); }
.stories-rank-list--figures .stories-rank-figure-item:nth-child(3) { --rank-color: #c99700; --rank-bg: rgba(255, 213, 79, 0.12); --rank-bg-hover: rgba(255, 213, 79, 0.24); --rank-border: rgba(251, 192, 45, 0.36); }
.stories-rank-list--figures .stories-rank-figure-item:nth-child(4) { --rank-color: #42a5f5; --rank-bg: rgba(100, 181, 246, 0.10); --rank-bg-hover: rgba(100, 181, 246, 0.20); --rank-border: rgba(66, 165, 245, 0.34); }
.stories-rank-list--figures .stories-rank-figure-item:nth-child(5) { --rank-color: #26a69a; --rank-bg: rgba(77, 182, 172, 0.10); --rank-bg-hover: rgba(77, 182, 172, 0.20); --rank-border: rgba(38, 166, 154, 0.34); }
.stories-rank-list--figures .stories-rank-figure-item:nth-child(n+6) { --rank-color: #7b6a56; --rank-bg: rgba(123, 106, 86, 0.08); --rank-bg-hover: rgba(123, 106, 86, 0.16); --rank-border: rgba(123, 106, 86, 0.28); }
@keyframes stories-skel-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.95; }
}
.stories-hub-skel-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    pointer-events: none;
}
.stories-hub-skel-layer.is-hidden {
    display: none !important;
}
.stories-hub-skel-layer--drawer {
    left: 10px;
    right: 10px;
    /* 避开「今日热榜」标题行，避免骨架盖住标题 */
    top: 36px;
}
.stories-hub-skel-bone {
    display: block;
    background: #d5cdc0;
    border-radius: 6px;
    animation: stories-skel-pulse 1.15s ease-in-out infinite;
}
.stories-hub-skel-drawer-track {
    display: flex;
    gap: var(--drawer-gap);
    width: 100%;
    min-height: 360px;
    align-items: stretch;
}
.stories-hub-skel-drawer-card {
    flex-shrink: 0;
    width: var(--drawer-collapsed-w);
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, #e5dfd4 0%, #dcd4c6 100%);
}
.stories-hub-skel-drawer-card.is-skel-active {
    width: calc(
        100% -
        (var(--skel-drawer-count) - 1) * var(--drawer-collapsed-w) -
        (var(--skel-drawer-count) - 1) * var(--drawer-gap)
    );
    display: flex;
    flex-direction: column;
    background: #f2ede4;
}
.stories-hub-skel-drawer-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 22px;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}
.stories-hub-skel-drawer-card.is-skel-active .stories-hub-skel-drawer-card__badge {
    left: 10px;
    transform: none;
    width: 72px;
}
.stories-hub-skel-drawer-card__badge .stories-hub-skel-bone {
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
    animation-delay: 0.08s;
}
.stories-hub-skel-drawer-card__stripes {
    position: absolute;
    top: 48px;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.stories-hub-skel-drawer-card.is-skel-active .stories-hub-skel-drawer-card__stripes {
    display: none;
}
.stories-hub-skel-drawer-card__stripes .stories-hub-skel-bone {
    width: 8px;
    flex: 1;
    max-height: 48px;
    border-radius: 4px;
    animation-delay: calc(var(--skel-i, 0) * 0.09s);
}
.stories-hub-skel-drawer-card__hero {
    display: none;
    flex: 1;
    min-height: 0;
    margin: 36px 10px 10px;
    border-radius: 10px;
    overflow: hidden;
}
.stories-hub-skel-drawer-card.is-skel-active .stories-hub-skel-drawer-card__hero {
    display: block;
}
.stories-hub-skel-drawer-card__hero .stories-hub-skel-bone {
    width: 100%;
    height: 100%;
    min-height: 120px;
    border-radius: 10px;
    animation-delay: 0.12s;
}
.stories-hub-skel-drawer-card__panel {
    display: none;
    padding: 12px 12px 14px;
    background: linear-gradient(to top, #fff 72%, transparent 100%);
}
.stories-hub-skel-drawer-card.is-skel-active .stories-hub-skel-drawer-card__panel {
    display: block;
    flex-shrink: 0;
}
.stories-hub-skel-drawer-card__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.stories-hub-skel-drawer-card__lines .stories-hub-skel-bone:nth-child(1) {
    width: 88%;
    height: 14px;
    animation-delay: 0.05s;
}
.stories-hub-skel-drawer-card__lines .stories-hub-skel-bone:nth-child(2) {
    width: 100%;
    height: 11px;
    animation-delay: 0.1s;
}
.stories-hub-skel-drawer-card__lines .stories-hub-skel-bone:nth-child(3) {
    width: 72%;
    height: 11px;
    animation-delay: 0.15s;
}
.stories-hub-skel-drawer-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
/* 与 .stories-rank-drawer__avatars 一致：多头像层叠占位 */
.stories-hub-skel-avatar-stack {
    display: flex;
    align-items: center;
    min-height: 36px;
    flex-shrink: 0;
}
.stories-hub-skel-bone--avatar-ring {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    margin-left: -8px;
    flex-shrink: 0;
    animation-delay: 0.18s;
}
.stories-hub-skel-bone--avatar-ring:first-child {
    margin-left: 0;
}
.stories-hub-skel-avatar-stack .stories-hub-skel-bone--avatar-ring:nth-child(2) {
    animation-delay: 0.22s;
}
.stories-hub-skel-avatar-stack .stories-hub-skel-bone--avatar-ring:nth-child(3) {
    animation-delay: 0.26s;
}
.stories-hub-skel-drawer-card__foot-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}
.stories-hub-skel-drawer-card__foot-meta .stories-hub-skel-bone:nth-child(1) {
    width: 120px;
    height: 10px;
    animation-delay: 0.2s;
}
.stories-hub-skel-drawer-card__foot-meta .stories-hub-skel-bone:nth-child(2) {
    width: 96px;
    height: 12px;
    animation-delay: 0.24s;
}
.stories-hub-skel-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stories-hub-skel-vcard {
    position: relative;
    width: 100%;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(90, 70, 50, 0.16);
    background: linear-gradient(90deg, #e8e2d8 0%, #f0ebe3 55%, #faf7f2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.stories-hub-skel-vcard.is-skel-active {
    height: 420px;
    box-shadow: 0 6px 18px rgba(60, 40, 20, 0.12);
}
.stories-hub-skel-vcard__badge {
    position: absolute;
    top: 0;
    left: 10px;
    width: 72px;
    height: 24px;
    z-index: 2;
}
.stories-hub-skel-vcard__badge .stories-hub-skel-bone {
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
}
.stories-hub-skel-vcard__hero {
    position: absolute;
    inset: 0;
    padding: 36px 12px 0;
}
.stories-hub-skel-vcard__hero .stories-hub-skel-bone {
    width: 100%;
    height: 100%;
    min-height: 160px;
    border-radius: 10px;
}
.stories-hub-skel-vcard:not(.is-skel-active) .stories-hub-skel-vcard__hero {
    opacity: 0.55;
}
.stories-hub-skel-vcard:not(.is-skel-active) .stories-hub-skel-vcard__hero .stories-hub-skel-bone {
    min-height: 100%;
}
.stories-hub-skel-vcard__mini {
    position: absolute;
    top: 14px;
    right: 14px;
    left: 92px;
    height: 14px;
    z-index: 3;
}
.stories-hub-skel-vcard.is-skel-active .stories-hub-skel-vcard__mini {
    display: none;
}
.stories-hub-skel-vcard__mini .stories-hub-skel-bone {
    width: 70%;
    height: 100%;
    margin-left: auto;
}
.stories-hub-skel-vcard__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 16px 16px;
    background: linear-gradient(to top, #fff 60%, transparent 100%);
    z-index: 4;
}
.stories-hub-skel-vcard.is-skel-active .stories-hub-skel-vcard__panel {
    display: block;
}
.stories-hub-skel-vcard__panel > .stories-hub-skel-bone:nth-child(1) {
    width: 85%;
    height: 18px;
    margin-bottom: 10px;
}
.stories-hub-skel-vcard__panel > .stories-hub-skel-bone:nth-child(2) {
    width: 100%;
    height: 11px;
    margin-bottom: 6px;
}
.stories-hub-skel-vcard__panel > .stories-hub-skel-bone:nth-child(3) {
    width: 92%;
    height: 11px;
    margin-bottom: 6px;
}
.stories-hub-skel-vcard__panel > .stories-hub-skel-bone:nth-child(4) {
    width: 60%;
    height: 11px;
    margin-bottom: 12px;
}
.stories-hub-skel-vcard__panel-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}
.stories-hub-skel-vcard__panel-foot .stories-hub-skel-avatar-stack {
    margin-top: 2px;
}
.stories-hub-skel-vcard__panel-foot-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.stories-hub-skel-vcard__panel-foot-meta .stories-hub-skel-bone:nth-child(1) {
    width: 110px;
    height: 10px;
}
.stories-hub-skel-vcard__panel-foot-meta .stories-hub-skel-bone:nth-child(2) {
    width: 88px;
    height: 12px;
}
.stories-hub-skel-figure-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(140, 125, 105, 0.22);
    background: rgba(140, 125, 105, 0.06);
    margin-bottom: 10px;
}
.stories-hub-skel-figure-row:last-child {
    margin-bottom: 0;
}
.stories-hub-skel-figure-row .stories-hub-skel-bone--idx {
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: 8px;
    flex-shrink: 0;
}
.stories-hub-skel-figure-row .stories-hub-skel-bone--avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stories-hub-skel-figure-row__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.stories-hub-skel-figure-row__text .stories-hub-skel-bone:nth-child(1) {
    width: 55%;
    height: 14px;
}
.stories-hub-skel-figure-row__text .stories-hub-skel-bone:nth-child(2) {
    width: 92%;
    height: 11px;
}
.stories-hub-skel-figure-row__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.stories-hub-skel-figure-row__tags .stories-hub-skel-bone:nth-child(1) {
    width: 36px;
    height: 14px;
    border-radius: 8px;
}
.stories-hub-skel-figure-row__tags .stories-hub-skel-bone:nth-child(2) {
    width: 92px;
    height: 22px;
    border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
    .stories-hub-skel-bone {
        animation: none;
        opacity: 0.72;
    }
}
.stories-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stories-rank-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(90, 70, 50, 0.14);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.86);
}
.stories-rank-list li.rank-top1,
.stories-rank-list li.rank-top2,
.stories-rank-list li.rank-top3 {
    grid-template-columns: 32px 1fr auto;
    padding: 8px 10px;
    border-width: 2px;
}
.stories-rank-list li.rank-top1 {
    background: linear-gradient(90deg, rgba(255, 245, 208, 0.95) 0%, rgba(255, 255, 255, 0.9) 65%);
    border-color: rgba(205, 159, 58, 0.55);
    box-shadow: 0 3px 10px rgba(160, 110, 30, 0.18);
}
.stories-rank-list li.rank-top2 {
    background: linear-gradient(90deg, rgba(238, 243, 249, 0.96) 0%, rgba(255, 255, 255, 0.9) 65%);
    border-color: rgba(120, 132, 150, 0.46);
}
.stories-rank-list li.rank-top3 {
    background: linear-gradient(90deg, rgba(245, 228, 212, 0.96) 0%, rgba(255, 255, 255, 0.9) 65%);
    border-color: rgba(164, 112, 74, 0.42);
}
.stories-rank-list li:last-child {
    margin-bottom: 0;
}
.stories-rank-list__idx {
    font-weight: 700;
    color: #5d4037;
    text-align: center;
}
.stories-rank-list li.rank-top1 .stories-rank-list__idx,
.stories-rank-list li.rank-top2 .stories-rank-list__idx,
.stories-rank-list li.rank-top3 .stories-rank-list__idx {
    font-size: 20px;
    line-height: 1;
}
.stories-rank-list li.rank-top1 .stories-rank-list__idx { color: #a66c00; }
.stories-rank-list li.rank-top2 .stories-rank-list__idx { color: #5e6a79; }
.stories-rank-list li.rank-top3 .stories-rank-list__idx { color: #8a4f24; }
.stories-rank-list__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2f2a26;
    text-decoration: none;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.stories-rank-list__name:hover {
    color: #7c2d12;
    text-decoration: underline;
    text-decoration-color: rgba(124, 45, 18, 0.35);
}
.stories-rank-list li.rank-top1 .stories-rank-list__name,
.stories-rank-list li.rank-top2 .stories-rank-list__name,
.stories-rank-list li.rank-top3 .stories-rank-list__name {
    font-weight: 600;
}
.stories-rank-list__uv {
    font-size: 12px;
    color: #6d5d4c;
    font-variant-numeric: tabular-nums;
}
.stories-rank-list li.rank-top1 .stories-rank-list__uv,
.stories-rank-list li.rank-top2 .stories-rank-list__uv,
.stories-rank-list li.rank-top3 .stories-rank-list__uv {
    font-weight: 600;
}
.stories-rank-figure-item__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
    overflow: visible;
    text-decoration: none;
}
.stories-rank-figure-item__avatar-ring {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    flex: 0 0 56px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #efe8da;
    border: 2px solid rgba(231, 224, 212, 0.95);
    display: block;
}
.stories-rank-figure-item__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 1;
    transition: opacity 0.38s ease;
}
.stories-rank-figure-item__avatar-ring.stories-hub-media-ph--pending img {
    opacity: 0;
}
.stories-rank-figure-item__avatar-ring.stories-hub-media-ph--loaded img {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .stories-rank-drawer__cover.stories-hub-media-ph--pending::before,
    .stories-rank-vcard__cover.stories-hub-media-ph--pending::before,
    .story-card__cover.stories-hub-media-ph--pending::before,
    .stories-rank-figure-item__avatar-ring.stories-hub-media-ph--pending::before {
        animation: none;
        background: #ece7dc;
    }
}
.stories-rank-figure-item__crown {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    padding: 2px 5px;
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.stories-rank-figure-item__crown::after {
    content: '';
    position: absolute;
    top: -55%;
    left: -70%;
    width: 44%;
    height: 210%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.68) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: stories-crown-sheen 2.4s ease-in-out infinite;
}
.stories-rank-figure-item__crown--dominance {
    top: -5px;
    right: -2px;
    background: linear-gradient(165deg, #ffe082 0%, #ffb300 100%);
    color: #4e342e;
    border: 1px solid rgba(183, 138, 32, 0.55);
}
.stories-rank-figure-item__crown--rising {
    top: -5px;
    right: -2px;
    background: linear-gradient(165deg, #ce93d8 0%, #7b1fa2 100%);
    color: #fff;
    border: 1px solid rgba(74, 20, 140, 0.4);
}
@keyframes stories-crown-sheen {
    0% { left: -70%; }
    45% { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .stories-rank-figure-item__crown::after {
        animation: none;
    }
}
.stories-rank-figure-item__main {
    min-width: 0;
    margin-left: 14px;
}
.stories-rank-figure-item__name {
    display: inline-block;
    margin: 0 0 4px;
    color: #5a4a36;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.stories-rank-figure-item__name-badge {
    font-size: 10px;
    font-weight: 700;
    color: #f59e0b;
    margin-left: 2px;
}
.stories-rank-list--figures .stories-rank-figure-item:focus-visible {
    outline: 2px solid rgba(38, 166, 154, 0.5);
    outline-offset: 2px;
}
.stories-rank-list--figures .stories-rank-figure-item:hover .stories-rank-figure-item__name,
.stories-rank-list--figures .stories-rank-figure-item:focus-visible .stories-rank-figure-item__name {
    color: #7c2d12;
    text-decoration: underline;
    text-decoration-color: rgba(124, 45, 18, 0.35);
}
.stories-rank-figure-item__desc {
    margin: 0;
    color: #827361;
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}
.stories-rank-figure-item__heat-wrap {
    position: absolute;
    top: 8px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 88px);
    margin-left: 0;
}
.stories-rank-figure-item__heat-delta {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.stories-rank-figure-item__heat-delta--up {
    color: #2e7d32;
}
.stories-rank-figure-item__heat-delta--down {
    color: #c62828;
}
.stories-rank-figure-item__heat {
    margin-left: 0;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(160, 146, 127, 0.36);
    color: #6f6458;
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
}
.stories-rank-figure-item__heat--today {
    border-color: color-mix(in srgb, var(--rank-color) 35%, #ffffff);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--rank-color) 26%, #ffffff) 0%,
        color-mix(in srgb, var(--rank-color) 14%, #ffffff) 100%
    );
    color: color-mix(in srgb, var(--rank-color) 72%, #3a2f23);
}
.stories-rank-figure-item__heat--month {
    border-color: rgba(160, 146, 127, 0.36);
    background: rgba(255, 255, 255, 0.92);
    color: #6f6458;
}
.stories-rank-figure-item__heat-main {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: none;
    font-weight: 600;
}
.stories-rank-list--figures .stories-rank-figure-item:nth-child(1) .stories-rank-figure-item__heat {
    border-color: rgba(205, 159, 58, 0.45);
    background: rgba(255, 245, 208, 0.88);
    color: #7a5b22;
}
.stories-rank-list--figures .stories-rank-figure-item:nth-child(2) .stories-rank-figure-item__heat {
    border-color: rgba(120, 132, 150, 0.42);
    background: rgba(238, 243, 249, 0.9);
    color: #4f5c6d;
}
.stories-rank-list--figures .stories-rank-figure-item:nth-child(3) .stories-rank-figure-item__heat {
    border-color: rgba(164, 112, 74, 0.4);
    background: rgba(245, 228, 212, 0.9);
    color: #7a4a2b;
}
.stories-rank-list--figures .stories-rank-figure-item .stories-rank-figure-item__heat--today {
    border-color: color-mix(in srgb, var(--rank-color) 35%, #ffffff);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--rank-color) 26%, #ffffff) 0%,
        color-mix(in srgb, var(--rank-color) 14%, #ffffff) 100%
    );
    color: color-mix(in srgb, var(--rank-color) 72%, #3a2f23);
}
.stories-rank-list--figures .stories-rank-list__uv {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
}
.stories-rank-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stories-rank-vcard {
    position: relative;
    width: 100%;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(90, 70, 50, 0.18);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transition: height 0.6s ease, box-shadow 0.2s ease;
    cursor: pointer;
    contain: layout style paint;
    isolation: isolate;
}
.stories-rank-vcard.is-active {
    height: 420px;
    box-shadow: 0 8px 22px rgba(60, 40, 20, 0.2);
}
.stories-rank-vcard__cover,
.stories-rank-vcard__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.stories-rank-vcard__cover {
    background-color: #ece7dc;
}
.stories-rank-vcard__cover img {
    object-fit: cover;
    filter: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.38s ease;
}
/* 折叠态可暂隐图；展开态勿 opacity:0，否则 420px 高卡片只剩白渐变像整页闪白 */
.stories-rank-vcard:not(.is-active) .stories-rank-vcard__cover.stories-hub-media-ph--pending img {
    opacity: 0;
}
.stories-rank-vcard.is-active .stories-rank-vcard__cover.stories-hub-media-ph--pending img,
.stories-rank-vcard__cover.stories-hub-media-ph--loaded img {
    opacity: 1;
}
.stories-rank-vcard__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(250, 246, 239, 0.45) 58%,
        rgba(250, 246, 239, 0.82) 78%,
        rgba(250, 246, 239, 0.94) 100%
    );
}
.stories-rank-vcard:not(.is-active) .stories-rank-vcard__cover::after {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.62) 45%,
        #ffffff 60%,
        #ffffff 100%
    );
}
.stories-rank-vcard__title-mini {
    position: absolute;
    top: 14px;
    left: 92px;
    right: 14px;
    font-size: 15px;
    color: #fff;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stories-rank-vcard:not(.is-active) .stories-rank-vcard__title-mini {
    color: #1f2937;
    font-weight: 700;
    text-shadow: none;
    text-align: right;
}
.stories-rank-vcard.is-active .stories-rank-vcard__title-mini {
    display: none;
}
.stories-rank-vcard__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 18px 16px;
    background: linear-gradient(to top, #faf6ef 55%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 6;
}
.stories-rank-vcard.is-active .stories-rank-vcard__info {
    opacity: 1;
}
.stories-rank-vcard__title {
    font-size: 24px;
    font-weight: 600;
    color: #222;
    margin: 0 0 8px;
}
.stories-rank-vcard__desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stories-fav-figures {
    margin-top: 10px;
    border-top: 1px solid rgba(90, 70, 50, 0.12);
    padding-top: 10px;
}
.stories-fav-figures__title {
    margin: 0 0 8px;
    font-size: 13px;
    color: #5d4037;
}
.stories-fav-figures__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stories-fav-figures__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(90, 70, 50, 0.16);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    color: #4e342e;
    background: rgba(255, 255, 255, 0.82);
}
/*
 * 「草庐来访人数」：PC 上由 index 脚本迁入 #desktop-stats-mount，须保留。
 * 仅隐藏仍留在 .home-classic-home 主栏文档流内的统计卡（推荐故事瀑布流下方的重复/窄屏占位）。
 */
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) .home-classic-home .home-stats-bar-wrap {
    display: none !important;
}
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) #desktop-stats-mount .home-stats-bar-wrap .stats-dash-panel {
    background: linear-gradient(180deg, #f8f3e9 0%, #f1e8d8 55%, #e8dcc8 100%) !important;
    border: 1px solid rgba(120, 90, 58, 0.24) !important;
    box-shadow: 0 4px 16px rgba(80, 58, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) #desktop-stats-mount .home-stats-bar-wrap .stats-dash-panel::before {
    background-image:
      linear-gradient(rgba(110, 85, 60, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(110, 85, 60, 0.08) 1px, transparent 1px) !important;
}
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) #desktop-stats-mount .home-stats-bar-wrap .stats-dash-panel__head,
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) #desktop-stats-mount .home-stats-bar-wrap .stats-dash-title {
    color: #4e342e !important;
}
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked) #desktop-stats-mount .home-stats-bar-wrap .stats-dash-kpi {
    background: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(120, 90, 58, 0.2) !important;
}
/* 历史人物 / 百家名理 / 故事·榜单：整段隐藏统计面板 */
body:has(#home-dimension-tabs):has(#home-dim-tab-figures:checked) .home-stats-bar-wrap,
body:has(#home-dimension-tabs):has(#home-dim-tab-principles:checked) .home-stats-bar-wrap,
body:has(#home-dimension-tabs):has(#home-dim-tab-stories:checked):has(#stories-subtab-rank:checked) .home-stats-bar-wrap {
    display: none !important;
}
.stories-waterfall-wrap {
    display: grid;
    /* PC：双列瀑布流（第三列 DOM 保留供脚本兼容，不参与布局） */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    /* 避免子项 min-content 撑破列宽，加载/图片未定宽时整栅格抖动、列不对齐 */
    min-width: 0;
}
#stories-col-c {
    display: none !important;
}
.stories-waterfall__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.story-card {
    position: relative;
    height: 420px;
    border: 1px solid rgba(90, 70, 50, 0.12);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 3px 12px rgba(60, 40, 20, 0.1);
}
.story-card__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.story-card__cover {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
}
.story-card__banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #ece6d8;
    filter: none;
}
.story-card__gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: none;
}
.story-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 16px 14px 12px;
    background: linear-gradient(to top, #fff 55%, transparent 100%);
    /* 与 .story-card / .story-card__cover 的 12px 圆角一致，避免底栏白底把两下角切成直角 */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.story-card__sub-title {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
}
.story-card__excerpt {
    margin: 0 0 10px;
    color: #666;
    line-height: 1.6;
    font-size: 13px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story-card__meta {
    margin-top: 0;
    border-top: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.story-card__figures {
    display: inline-flex;
    align-items: center;
}
.story-card__fig {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    margin-left: -8px;
    background: #f4f1e8;
}
.story-card__fig:first-child {
    margin-left: 0;
}
.story-card__fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-card__right {
    min-width: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.story-card__tags {
    color: #8c7f70;
    font-size: 12px;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.story-card__stats {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.story-card__views,
.story-card__likes {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    color: #9a8f84;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin: 0;
}
.story-card__views svg,
.story-card__likes svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
    fill: currentColor;
}
.story-card__likes {
    color: #c45c4a;
}
.story-card__stat-num {
    font-weight: 600;
    color: inherit;
    min-width: 1ch;
}
.stories-waterfall__end {
    grid-column: 1 / -1;
    text-align: center;
    color: #7a6f64;
    font-size: 12px;
    padding: 4px 0 2px;
}
#stories-subtab-rank:checked ~ .stories-filter-wrap {
    display: none;
}
#stories-subtab-rank:checked ~ .stories-waterfall-wrap {
    display: none;
}
.stories-filter-wrap--search-nav {
    --sn-module-bg: #ffffff;
    --sn-page-bg: #f7f3eb;
    --sn-card: #ffffff;
    --sn-input-bg: #fcfaf7;
    --sn-text: #5c4b3c;
    --sn-muted: #b8a996;
    --sn-muted-title: #8c7a66;
    --sn-hot-title: #9c8b76;
    --sn-hot-tag-text: #7d6a57;
    --sn-accent: #95785d;
    --sn-accent-hover: #7d644d;
    --sn-border: #e6dccc;
    --sn-input-border: #e0d6c8;
    --sn-border-soft: #f0e9dd;
    --sn-focus-ring: #c8aa8e;
    --sn-highlight: #e53e3e;
    --sn-fire: #f27b4f;
    --sn-hot-tag-bg: #faf6f0;
    --sn-hot-tag-hover-bg: #fff0e6;
    --sn-hot-tag-hover-border: #f2a77d;
    --sn-hot-tag-hover-text: #d46b3a;
    --sn-bg: #f2ebe0;
    margin: 12px 0 22px;
    padding: 0;
    background: var(--sn-page-bg);
    border-radius: 18px;
    overflow: visible;
    /* 吸顶：跑马 + 一级栏 + 二级栏高；二级隐藏时见下方 :has 覆盖 */
    position: sticky;
    top: calc(
        env(safe-area-inset-top, 0px) +
        var(--site-marquee-height, 0px) +
        var(--home-dim-primary-bar-h, 52px) +
        0px +
        64px
    );
    z-index: 33;
    box-shadow: 0 4px 14px rgba(76, 58, 37, 0.06);
    -webkit-backdrop-filter: saturate(120%) blur(8px);
    backdrop-filter: saturate(120%) blur(8px);
}
/* 故事榜单入口已迁走、二级 subnav 隐藏时：吸顶不再预留 64px，避免顶部留白 */
#stories-hub:has(.stories-subnav--hidden) .stories-filter-wrap--search-nav,
#stories-hub:has(.stories-subnav[hidden]) .stories-filter-wrap--search-nav {
    top: calc(
        env(safe-area-inset-top, 0px) +
        var(--site-marquee-height, 0px) +
        var(--home-dim-primary-bar-h, 52px)
    );
}
/* 筛选抽屉 / PC 筛选下拉 / 排序菜单打开时：整段搜索区抬到最上层；取消 overflow 与 backdrop-filter，避免 fixed 子元素被裁切、且 blur 会把 fixed 钉在父块上导致抽屉高度撑不满视口 */
.stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active {
    z-index: 150000;
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.stories-filter-wrap--overlay-active .stories-search-nav__sort-menu {
    z-index: 150020;
}
.stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__backdrop {
    z-index: 150005;
}
.stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__panel {
    z-index: 150006;
}
.stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__drawer-mask {
    z-index: 150008;
}
.stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__drawer {
    z-index: 150009;
}
.stories-search-nav {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sn-module-bg);
    border: 1px solid var(--sn-border-soft);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 2px 12px rgba(140, 117, 92, 0.06);
    color: var(--sn-text);
    font-size: 15px;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    transition:
        opacity 0.3s ease,
        padding-bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}
.stories-search-nav__row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    transition: margin-bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.stories-search-nav--folded .stories-search-nav__row1 {
    margin-bottom: 0;
}
.stories-search-nav--folded {
    padding-bottom: 22px;
}
/* 热门/已选条件：高度折叠动画；筛选图标仍留在搜索行 */
.stories-search-nav__fold-body {
    overflow: hidden;
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, opacity;
}
.stories-search-nav--folded .stories-search-nav__fold-body {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.stories-search-nav--folded .stories-search-nav__filter-anchor {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.stories-search-nav__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    overflow: visible;
}
.stories-search-nav__tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid var(--sn-border);
    border-radius: 12px;
    background: #fff;
    color: var(--sn-muted-title);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}
.stories-search-nav__tool--filter {
    width: 54px;
    padding: 0;
    overflow: visible;
}
.stories-search-nav__tool--sort {
    min-width: 70px;
    padding: 0 10px;
}
.stories-search-nav__tool:hover {
    background: #f9f5ed;
    color: var(--sn-text);
    border-color: #e0d6c8;
}
.stories-search-nav__tool.is-active {
    border-color: var(--sn-accent);
    color: var(--sn-accent);
    background: rgba(149, 120, 93, 0.1);
    box-shadow: inset 0 0 0 1px rgba(149, 120, 93, 0.18);
}
.stories-search-nav__tool-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.stories-search-nav__tool-label {
    line-height: 1;
    white-space: nowrap;
}
.stories-search-nav__tool-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sn-fire);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(242, 123, 79, 0.4);
}
/* 底部居中拉手：收起时箭头向下（展开），展开时箭头向上（收起）；参考半圆小舌片贴底 */
.stories-search-nav__pull {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -1px);
    z-index: 4;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.stories-search-nav__pull-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 22px;
    box-sizing: border-box;
    background: var(--sn-module-bg);
    border: 1px solid var(--sn-border-soft);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 6px 14px rgba(140, 117, 92, 0.1);
}
.stories-search-nav__pull:hover .stories-search-nav__pull-tab,
.stories-search-nav__pull:focus-visible .stories-search-nav__pull-tab {
    background: #fffbf7;
    border-color: #e0d6c8;
}
.stories-search-nav__pull:focus-visible {
    outline: none;
}
.stories-search-nav__pull:focus-visible .stories-search-nav__pull-tab {
    box-shadow: 0 0 0 2px rgba(149, 120, 93, 0.35), 0 6px 14px rgba(140, 117, 92, 0.1);
}
.stories-search-nav__pull-icon {
    display: block;
    width: 14px;
    height: 14px;
    color: var(--sn-muted-title);
    transition: transform 0.22s ease;
    transform: rotate(180deg);
}
.stories-search-nav--folded .stories-search-nav__pull-icon {
    transform: rotate(0deg);
}
.stories-search-nav__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
/* 打字机推荐词 + 光标（非 placeholder：便于逐字与闪烁动画） */
.stories-search-nav__type-ph {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 0;
    pointer-events: none;
    color: var(--sn-muted);
    font-size: 16px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}
.stories-search-nav__input-wrap.stories-search-nav__input-wrap--type-on .stories-search-nav__type-ph {
    display: inline-flex;
}
.stories-search-nav__type-ph-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.stories-search-nav__type-caret {
    display: inline-block;
    flex-shrink: 0;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    border-radius: 1px;
    background: var(--sn-accent);
    vertical-align: -0.14em;
    animation: stories-type-caret-blink 1.05s steps(1, end) infinite;
}
@keyframes stories-type-caret-blink {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.stories-search-nav__input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 16px 20px;
    border: 1px solid var(--sn-input-border);
    border-radius: 12px;
    background: var(--sn-input-bg);
    color: var(--sn-text);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stories-search-nav__input::placeholder {
    color: var(--sn-muted);
}
.stories-search-nav__input:focus {
    border-color: var(--sn-focus-ring);
    background: #fff;
    outline: none;
}
.stories-search-nav__search-btn {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 0 36px;
    height: 54px;
    box-sizing: border-box;
    border: none;
    border-radius: 12px;
    background: var(--sn-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.stories-search-nav__search-btn:hover {
    background: var(--sn-accent-hover);
}
.stories-search-nav__search-btn:active {
    background: var(--sn-accent-hover);
}
.stories-search-nav__suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--sn-card);
    border: 1px solid var(--sn-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(60, 48, 36, 0.12);
    z-index: 30;
}
.stories-search-nav__suggest-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid rgba(232, 224, 210, 0.9);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease;
}
.stories-search-nav__suggest-item:last-child {
    border-bottom: none;
}
.stories-search-nav__suggest-item:hover {
    background: rgba(232, 224, 210, 0.45);
}
.stories-search-nav__suggest-title {
    font-size: 14px;
    color: var(--sn-text);
    line-height: 1.45;
}
.stories-search-nav__suggest-snippet {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sn-muted);
    line-height: 1.4;
}
.stories-search-nav__hl {
    color: var(--sn-highlight);
    font-weight: 600;
}
.stories-search-nav__filter-anchor {
    position: relative;
    margin-bottom: 0;
}
.stories-search-nav__sort {
    position: relative;
}
.stories-search-nav__ripple {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
    background: rgba(149, 120, 93, 0.2);
    border-radius: 50%;
    transform: scale(0);
    animation: stories-search-nav-ripple 0.6s linear forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes stories-search-nav-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
.stories-search-nav__sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 132px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--sn-card);
    border: 1px solid var(--sn-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(60, 48, 36, 0.1);
    z-index: 25;
}
.stories-search-nav__sort-menu li {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sn-text);
    transition: background 0.25s ease;
}
.stories-search-nav__sort-menu li:hover {
    background: rgba(232, 224, 210, 0.55);
}
.stories-search-nav__sort-menu li.is-active {
    color: var(--sn-accent);
    font-weight: 600;
}
.stories-search-nav__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 0;
}
.stories-search-nav__chips:empty {
    display: none;
}
.stories-search-nav__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 16px;
    border: 1px solid var(--sn-border);
    background: var(--sn-card);
    color: var(--sn-text);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(139, 115, 85, 0.06);
}
.stories-search-nav__chip-x {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: rgba(92, 75, 60, 0.1);
    color: var(--sn-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s ease;
}
.stories-search-nav__chip-x:hover {
    background: rgba(92, 75, 60, 0.18);
}
.stories-search-nav__row3 {
    margin-top: 0;
}
.stories-search-nav__hot-title {
    font-size: 15px;
    font-weight: 400;
    color: var(--sn-hot-title);
    margin-bottom: 12px;
}
.stories-search-nav__hot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.stories-search-nav__hot-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: var(--sn-hot-tag-text);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.stories-search-nav__hot-item:hover {
    background: var(--sn-hot-tag-hover-bg);
    color: var(--sn-hot-tag-hover-text);
}
.stories-search-nav__hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--sn-fire);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.stories-search-nav__hot-empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(90, 72, 52, 0.68);
}
.stories-search-nav__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(40, 32, 24, 0.35);
    z-index: 40;
}
.stories-search-nav__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 45;
    background: var(--sn-card);
    border: 1px solid var(--sn-border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(60, 48, 36, 0.14);
    padding: 14px 16px 16px;
}
.stories-search-nav__panel-inner {
    max-height: min(70vh, 520px);
    overflow-y: auto;
}
.stories-search-nav__section {
    margin-bottom: 14px;
}
.stories-search-nav__section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sn-accent);
    margin-bottom: 8px;
}
.stories-search-nav__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stories-search-nav__opts-collapsible-wrap {
    position: relative;
}
/* 人物等：约 3 行后收起 */
.stories-search-nav__opts--collapsible.is-collapsed {
    max-height: calc(3 * (36px + 8px) - 8px);
    overflow: hidden;
}
/* 标签：只露一行，超出点「更多」展开 */
#stories-nav-draft-tags.stories-search-nav__opts--collapsible.is-collapsed {
    max-height: 36px;
    overflow: hidden;
}
.stories-search-nav__opts--collapsible.is-expanded {
    max-height: none;
    overflow: visible;
}
.stories-search-nav__opts-more-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(166, 139, 108, 0.12);
    color: var(--sn-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.stories-search-nav__opts-more-btn:hover {
    background: rgba(166, 139, 108, 0.22);
}
.stories-search-nav__opts-more-btn[hidden] {
    display: none !important;
}
.stories-search-nav__opt {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--sn-border);
    background: var(--sn-bg);
    color: var(--sn-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.stories-search-nav__opt:hover {
    border-color: var(--sn-accent);
}
.stories-search-nav__opt.is-on {
    background: var(--sn-accent);
    border-color: var(--sn-accent);
    color: #fff;
}
.stories-search-nav__panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sn-border);
}
.stories-search-nav__btn-primary,
.stories-search-nav__btn-secondary {
    min-width: 88px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--sn-border);
    transition: opacity 0.25s ease, background 0.25s ease;
}
.stories-search-nav__btn-primary {
    background: var(--sn-accent);
    border-color: var(--sn-accent);
    color: #fff;
}
.stories-search-nav__btn-secondary {
    background: var(--sn-card);
    color: var(--sn-accent);
}
.stories-search-nav__drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(40, 32, 24, 0.4);
    z-index: 48;
}
.stories-search-nav__drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 82vw;
    max-width: 360px;
    height: 100%;
    background: var(--sn-card);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(40, 32, 24, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.stories-search-nav__drawer.is-open {
    transform: translateX(0);
}
.stories-search-nav__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--sn-accent);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.stories-search-nav__drawer-close {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.stories-search-nav__drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.stories-search-nav__drawer-foot {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--sn-border);
    background: var(--sn-bg);
}
@media (max-width: 767px) {
    .stories-filter-wrap--search-nav {
        border-radius: 16px;
    }
    .stories-search-nav {
        padding: 16px 16px 20px;
        border-radius: 16px;
    }
    .stories-search-nav__row1 {
        gap: 8px;
        margin-bottom: 14px;
    }
    .stories-search-nav__tool {
        height: 48px;
    }
    .stories-search-nav__tool--filter {
        width: 48px;
    }
    .stories-search-nav__tool--sort {
        min-width: 60px;
        padding: 0 8px;
        font-size: 12px;
    }
    .stories-search-nav__tool-icon {
        width: 18px;
        height: 18px;
    }
    .stories-search-nav__pull {
        transform: translate(-50%, -1px);
    }
    .stories-search-nav__pull-tab {
        width: 48px;
        height: 20px;
        border-radius: 0 0 14px 14px;
    }
    .stories-search-nav__input {
        height: 48px;
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 12px;
    }
    .stories-search-nav__type-ph {
        left: 16px;
        right: 16px;
        font-size: 15px;
    }
    .stories-search-nav__search-btn {
        flex-basis: 72px;
        min-width: 72px;
        padding: 0 16px;
        height: 48px;
        font-size: 15px;
        border-radius: 12px;
    }
    .stories-search-nav__sort-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        min-width: 0;
        border-radius: 12px;
        z-index: 60;
    }
    .stories-search-nav__hot-item {
        font-size: 13px;
    }
    .stories-search-nav__hot-badge {
        font-size: 11px;
    }
    .stories-search-nav__hot {
        gap: 10px 12px;
    }
    .stories-search-nav__panel {
        display: none !important;
    }
    /* 筛选抽屉内 panel-inner 与底部 drawer-foot 各有一套「重置/确认」，移动端只保留底部固定栏 */
    .stories-search-nav__panel-inner .stories-search-nav__panel-actions {
        display: none !important;
    }
    /* 移动端筛选抽屉：遮罩铺满视口、抽屉顶到底贴右侧，盖过一级/二级吸顶栏（fixed 相对视口须无祖先 backdrop-filter） */
    .stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__drawer-mask {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 150008 !important;
    }
    .stories-filter-wrap--search-nav.stories-filter-wrap--overlay-active .stories-search-nav__drawer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(86vw, 380px) !important;
        max-width: 380px !important;
        /* 贴满 WebView 可视高度；勿用过大 min-height:100vh，App 内易高于可视区 */
        height: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100% !important;
        max-height: 100dvh !important;
        z-index: 150009 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box !important;
    }
    /*
     * 根因：PC 下拉用的 panel-inner 带 max-height:min(70vh,520px)。
     * 移入右侧抽屉后仍生效 → 内容区被截断，抽屉下半截露出白底，像「一块遮挡」。
     */
    .stories-search-nav__drawer-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .stories-search-nav__drawer-body .stories-search-nav__panel-inner {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    .stories-search-nav__drawer-foot {
        flex: 0 0 auto !important;
    }
    .stories-search-nav__drawer-head {
        flex: 0 0 auto !important;
    }
}
@media (min-width: 768px) {
    .stories-search-nav__drawer,
    .stories-search-nav__drawer-mask {
        display: none !important;
    }
}
.stories-filter-wrap {
    --stf-bg: #f8f5f0;
    --stf-main: #a67c52;
    --stf-border: #d4c7b8;
    --stf-text: #5a4a3a;
}
.stories-filter-module {
    color: var(--stf-text);
}
.stories-filter-module__search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}
.stories-filter-module__input {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    border: 1px solid var(--stf-border);
    border-radius: 8px;
    background: #fff;
    color: var(--stf-text);
    font-size: 14px;
}
.stories-filter-module__toggle,
.stories-filter-module__reset {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.stories-filter-module__toggle {
    background: var(--stf-main);
    color: #fff;
}
.stories-filter-module__reset {
    background: #fff;
    color: var(--stf-main);
    border: 1px solid var(--stf-border);
}
.stories-filter-module__panel {
    display: none;
    background: #fff;
    border: 1px solid var(--stf-border);
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 12px;
}
.stories-filter-module__panel.is-open {
    display: block;
}
.stories-filter-module .filter-group {
    margin-bottom: 14px;
}
.stories-filter-module .filter-group:last-child {
    margin-bottom: 0;
}
.stories-filter-module .filter-group label {
    font-size: 14px;
    color: var(--stf-main);
    margin-bottom: 6px;
    display: inline-block;
    font-weight: 600;
}
.stories-filter-module .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stories-filter-module .tags button {
    padding: 6px 12px;
    border: 1px solid var(--stf-border);
    border-radius: 20px;
    background: var(--stf-bg);
    color: var(--stf-text);
    cursor: pointer;
    font-size: 13px;
}
.stories-filter-module .tags button.is-active {
    background: var(--stf-main);
    color: #fff;
    border-color: var(--stf-main);
}
.stories-filter-tags-shell {
    min-width: 0;
}
.stories-filter-tags-clip {
    min-width: 0;
}
.stories-filter-tags-clip > .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stories-filter-tags-shell.is-expanded .stories-filter-tags-clip {
    display: none;
}
.stories-filter-tags-expanded {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}
.stories-filter-tags-expanded:not([hidden]) {
    display: flex;
}
.stories-filter-tags-block {
    border: 1px solid rgba(166, 124, 82, 0.22);
    border-radius: 10px;
    padding: 10px 12px 12px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.stories-filter-tags-block__title {
    font-size: 12px;
    color: var(--stf-main);
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.stories-filter-more {
    margin-top: 8px;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--stf-main);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.stories-filter-more:hover {
    color: #8a6239;
}
.stories-filter-module__selected {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    min-height: 8px;
}
.stories-filter-module__selected:empty {
    display: none;
}
.stories-filter-module__chip {
    background: var(--stf-main);
    color: #fff;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
}
#stories-subtab-rank:checked ~ .stories-stats-board {
    display: block;
}
#stories-subtab-recommend:checked ~ .stories-stats-board {
    display: none;
}
.stories-stats-board {
    display: none;
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid rgba(146, 126, 110, 0.22);
    border-radius: 18px;
    background:
      radial-gradient(circle at 8% 6%, rgba(205, 195, 180, 0.18), transparent 48%),
      linear-gradient(180deg, #f4f1ea 0%, #eee7dc 58%, #e7ddcf 100%);
}
.stories-stats-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 2px 14px;
}
.stories-stats-board__title {
    margin: 0;
    font-size: 16px;
    color: #5f5144;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.stories-stats-board__meta {
    margin: 0;
    font-size: 12px;
    color: #8d7b6a;
}
.stories-stats-gauge-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fdfbf7 0%, #f5efe4 100%);
    border-radius: 16px;
    border: 1px solid rgba(141, 123, 104, 0.2);
    box-shadow: 0 2px 8px rgba(85, 66, 45, 0.05);
}
.stories-stats-gauge-row__text {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.stories-stats-gauge-row__totals {
    margin: 0 0 6px;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #5c4b3c;
}
.stories-stats-gauge-row__totals strong {
    color: #7d5a44;
    font-weight: 700;
}
.stories-stats-gauge-row__note {
    max-width: 100%;
}
.stories-stats-gauge-row__chart {
    flex: 0 0 auto;
    width: 100%;
    min-height: 200px;
    height: 200px;
}
.stories-stats-chart--barh {
    min-height: 280px;
    height: 320px;
}
.stories-stats-grid-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.stories-stats-grid-top--likes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stories-stats-grid-top--users {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 520px) {
    .stories-stats-grid-top--likes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .stories-stats-grid-top--likes .stories-stats-label {
        font-size: 12px;
    }
    .stories-stats-grid-top--likes .stories-stats-value {
        font-size: 22px;
    }
    .stories-stats-grid-top--likes .stories-stats-rate {
        font-size: 11px;
    }
}
/* App「我的 → 站内数据」全屏嵌入时收起首页维度条 */
html.is-in-app.is-site-stats .home-dim-tabs__bar {
    display: none !important;
}
/* 站内数据页不展示「倾情演绎」 */
#stories-subtab-rank:checked ~ .stories-comic-spotlight,
html.is-site-stats .stories-comic-spotlight {
    display: none !important;
}
.stories-stats-card {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(85, 66, 45, 0.06);
    border: 1px solid rgba(170, 145, 111, 0.2);
    transition: transform .25s ease, box-shadow .25s ease;
}
.stories-stats-card:hover,
.stories-stats-card:focus-within {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 22px rgba(85, 66, 45, 0.12);
}
.stories-stats-label {
    font-size: 14px;
    color: #7f7063;
    margin-bottom: 8px;
}
.stories-stats-value {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: #5a4b3f;
}
.stories-stats-rate {
    margin-top: 6px;
    font-size: 13px;
}
.stories-stats-rate.up { color: #52b852; }
.stories-stats-rate.down { color: #e06666; }
.stories-stats-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(85, 66, 45, 0.06);
    border: 1px solid rgba(170, 145, 111, 0.2);
    margin-bottom: 14px;
    position: relative;
    overflow: visible;
}
.stories-stats-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #5a4b3f;
}
.stories-stats-title--rank {
    display: block;
    width: 100%;
    text-align: left !important;
    padding-right: 0;
    position: relative;
    z-index: 2;
}
.stories-stats-day-visit-total {
    margin: 0 0 10px;
    font-size: 13px;
    color: #7f7063;
    font-variant-numeric: tabular-nums;
}
.stories-stats-day-visit-total span {
    font-weight: 600;
    color: #5a4b3f;
}
.stories-stats-chart {
    width: 100%;
    height: 300px;
}
.stories-stats-rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    overflow: visible;
}
.stories-stats-rank-empty {
    margin: 4px 2px 0;
    padding: 14px 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #8f7d6b;
    background: rgba(255, 252, 247, 0.72);
    border: 1px dashed rgba(141, 110, 99, 0.28);
    border-radius: 10px;
}
.stories-stats-rank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.stories-stats-rank-grid > .stories-stats-section {
    margin-bottom: 0;
}
.stories-stats-rank-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 180px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(164, 142, 120, 0.26);
    transform: translateY(10px);
    opacity: 0;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, background-color .25s ease, opacity .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: visible;
}
.stories-stats-rank-item.show {
    transform: translateY(0);
    opacity: 1;
}
.stories-stats-rank-item:hover {
    transform: translateX(3px);
    background: rgba(245, 237, 226, 0.92);
    border-color: rgba(145, 122, 102, 0.44);
    box-shadow: 0 8px 14px rgba(102, 79, 56, 0.1);
}
.stories-stats-rank-item.top1 {
    background: linear-gradient(90deg, rgba(184, 92, 83, 0.22) 0%, rgba(255, 255, 255, 0.9) 62%);
    border-color: rgba(184, 92, 83, 0.42);
}
.stories-stats-rank-item.top2 {
    background: linear-gradient(90deg, rgba(201, 145, 89, 0.2) 0%, rgba(255, 255, 255, 0.9) 62%);
    border-color: rgba(186, 132, 80, 0.38);
}
.stories-stats-rank-item.top3 {
    background: linear-gradient(90deg, rgba(169, 136, 92, 0.2) 0%, rgba(255, 255, 255, 0.9) 62%);
    border-color: rgba(154, 122, 81, 0.36);
}
.stories-stats-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 10px;
    min-width: 74px;
    height: 26px;
    padding: 0 8px;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .4px;
    background: #8b7a69;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.stories-stats-rank-badge.t1 { background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%); }
.stories-stats-rank-badge.t2 { background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%); }
.stories-stats-rank-badge.t3 { background: linear-gradient(135deg, #ffd54f 0%, #fbc02d 100%); color: #4e342e; }
.stories-stats-rank-name {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #5a4b3f;
    text-align: right;
    justify-self: stretch;
}
.stories-stats-rank-uv {
    font-size: 13px;
    color: #8a7a6b;
    font-variant-numeric: tabular-nums;
}
.stories-stats-rank-uv-num {
    font-weight: 700;
    color: #5a4b3f;
}
.stories-stats-rank-item.top1 .stories-stats-rank-uv-num { color: #d32f2f; }
.stories-stats-rank-item.top2 .stories-stats-rank-uv-num { color: #fb8c00; }
.stories-stats-rank-item.top3 .stories-stats-rank-uv-num { color: #b8860b; }
.stories-stats-data-note {
    margin: 10px 2px 2px;
    font-size: 12px;
    color: #8f7d6b;
}
.stories-stats-gauge-row .stories-stats-data-note {
    margin: 6px 0 0;
}
.stories-stats-data-note code {
    padding: 1px 6px;
    border-radius: 6px;
    color: #5f4f3f;
    background: rgba(126, 106, 86, 0.12);
}
@media (max-width: 991px) {
    .home-dim-tabs__bar {
        top: calc(env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px));
    }
    /* 移动端故事 Tab：一级与二级无缝衔接 */
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) .home-dim-tabs__bar {
        margin-bottom: 0 !important;
    }
    .stories-subnav {
        margin-top: 0;
        min-height: 64px;
        top: calc(
            env(safe-area-inset-top, 0px) +
            var(--site-marquee-height, 0px) +
            var(--home-dim-primary-bar-h, 52px) +
            0px
        );
    }
    .stories-subnav__btn {
        min-height: 64px;
    }
    .stories-rank-grid {
        grid-template-columns: 1fr;
    }
    .stories-stats-rank-grid {
        grid-template-columns: 1fr;
    }
    .stories-stats-chart {
        height: 250px;
    }
    .stories-stats-rank-item {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-left: 124px;
    }
    .stories-stats-rank-name {
        font-size: 14px;
    }
    .stories-stats-board__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .stories-rank-vcard {
        height: 50px;
    }
    .stories-rank-vcard.is-active {
        height: 252px;
    }
    .stories-rank-vcard__title {
        font-size: 20px;
    }
    /* 移动端：最喜爱人物单行横向滚动 */
    .stories-rank-card {
        min-width: 0;
    }
    .stories-rank-card__body--figures {
        height: 100px;
        min-height: 100px;
        max-height: 100px;
        min-width: 0;
        overflow: hidden;
    }
    /* 覆盖桌面骨架 min-height:560px（:has 特异性更高，移动端必须再压回去） */
    .stories-rank-card__body--figures:has(.stories-hub-skel-layer:not(.is-hidden)) {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        overflow: hidden;
    }
    .stories-rank-figures-wrap {
        height: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .stories-rank-figures-wrap > .stories-hub-skel-layer {
        position: absolute;
        inset: 0;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    .stories-rank-figures-scroll {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 4px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .stories-rank-figures-scroll::-webkit-scrollbar {
        display: none;
    }
    .stories-rank-figures-scroll--skel {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        width: max-content;
        max-width: none;
        height: 70px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .stories-rank-figures-scroll > .stories-rank-list--figures {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .stories-rank-list--figures {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }
    .stories-rank-list--figures .stories-rank-figure-item {
        --rank-bg: #ffffff;
        --rank-bg-hover: #ffffff;
        --rank-border: #eeeeee;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        width: auto;
        min-width: 200px;
        max-width: 260px;
        height: 70px;
        padding: 10px 14px;
        border-radius: 12px;
        background: var(--rank-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    .stories-rank-list--figures .stories-rank-figure-item--more {
        min-width: 96px;
        max-width: 110px;
        width: 96px;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        color: #6b7280;
        font-size: 14px;
        background: #ffffff;
        border: 1px dashed #d1d5db;
        box-shadow: none;
    }
    .stories-rank-list--figures .stories-rank-figure-item--more:hover {
        background: #f9fafb;
        border-color: #9ca3af;
        box-shadow: none;
    }
    .stories-rank-list--figures .stories-rank-figure-item:hover {
        border-color: color-mix(in srgb, var(--rank-color) 28%, #eeeeee);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }
    .stories-rank-figure-item__idx {
        flex: 0 0 auto;
        width: 24px;
        font-size: 18px;
        text-align: center;
        padding-right: 0;
    }
    .stories-rank-figure-item__avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
    }
    .stories-rank-figure-item__avatar-ring {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        flex: 0 0 44px;
        background: #f3f4f6;
        border-color: #f3f4f6;
    }
    .stories-rank-figure-item__main {
        flex: 1 1 auto;
        max-width: 120px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-left: 0;
    }
    .stories-rank-figure-item__name {
        display: block;
        margin: 0;
        color: #1f2937;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stories-rank-list--figures .stories-rank-figure-item:hover .stories-rank-figure-item__name,
    .stories-rank-list--figures .stories-rank-figure-item:focus-visible .stories-rank-figure-item__name {
        color: #111827;
        text-decoration: none;
    }
    .stories-rank-figure-item__desc {
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.35;
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        white-space: nowrap;
    }
    .stories-rank-figure-item__heat-wrap {
        position: static;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-left: 6px;
        max-width: none;
    }
    .stories-rank-figure-item__heat-delta {
        font-weight: 600;
        font-size: 12px;
    }
    .stories-rank-figure-item__heat-delta--up {
        color: #10b981;
    }
    .stories-rank-figure-item__heat-delta--down {
        color: #ef4444;
    }
    .stories-rank-figure-item__heat {
        padding: 2px 6px;
        border-radius: 6px;
        border: 0;
        background: #f3f4f6;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.3;
    }
    .stories-rank-figure-item__heat--today,
    .stories-rank-figure-item__heat--month {
        border: 0;
        background: #f3f4f6;
        color: #6b7280;
    }
    .stories-rank-figure-item__heat-main {
        max-width: 72px;
        font-weight: 500;
    }
    .stories-rank-list--figures .stories-rank-figure-item:nth-child(n) .stories-rank-figure-item__heat {
        border: 0;
        background: #f3f4f6;
        color: #6b7280;
    }
    .stories-rank-list--figures .stories-rank-figure-item .stories-rank-figure-item__heat--today {
        border: 0;
        background: #f3f4f6;
        color: #6b7280;
    }
    .stories-hub-skel-figure-row {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 200px;
        height: 70px;
        min-height: 70px;
        max-height: 70px;
        padding: 8px 12px;
        margin-bottom: 0;
        grid-template-columns: none;
        box-sizing: border-box;
        overflow: hidden;
    }
    .stories-hub-skel-figure-row .stories-hub-skel-bone--idx {
        width: 24px;
        height: 24px;
        margin-left: 0;
        border-radius: 6px;
        flex: 0 0 24px;
    }
    .stories-hub-skel-figure-row .stories-hub-skel-bone--avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
    .stories-hub-skel-figure-row__text {
        flex: 1 1 auto;
        min-width: 0;
        gap: 4px;
        justify-content: center;
    }
    .stories-hub-skel-figure-row__text .stories-hub-skel-bone:nth-child(1) {
        width: 72%;
        height: 12px;
    }
    .stories-hub-skel-figure-row__text .stories-hub-skel-bone:nth-child(2) {
        width: 48%;
        height: 10px;
    }
    .stories-hub-skel-figure-row__tags {
        display: none;
    }
    .stories-hub-skel-figure-row:nth-child(n+4) {
        display: none !important;
    }
    .stories-rank-drawer {
        padding: 34px 8px 8px;
        --drawer-collapsed-w: 36px;
        --drawer-gap: 6px;
        --skel-drawer-count: 3;
    }
    .stories-hub-skel-layer--drawer {
        left: 8px;
        right: 8px;
        top: 34px;
    }
    .stories-hub-skel-drawer-track {
        min-height: 220px;
    }
    .stories-hub-skel-drawer-card {
        height: 220px;
    }
    .stories-hub-skel-drawer-card:nth-child(n+4) {
        display: none !important;
    }
    .stories-rank-card__body--vertical {
        min-height: 0 !important;
    }
    .stories-rank-card__body--vertical:has(.stories-hub-skel-layer:not(.is-hidden)) {
        min-height: 280px !important;
        overflow: hidden;
    }
    .stories-hub-skel-vcard {
        height: 50px;
    }
    .stories-hub-skel-vcard.is-skel-active {
        height: 252px;
    }
    .stories-hub-skel-bone--avatar-ring {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        margin-left: -7px;
    }
    .stories-hub-skel-vcard__mini {
        left: 72px;
    }
    .stories-rank-drawer__track {
        min-height: 220px;
    }
    .stories-rank-drawer__card {
        width: var(--drawer-collapsed-w);
        height: 220px;
    }
    .stories-rank-drawer__vert-title {
        top: 40px;
        bottom: 10px;
        font-size: 13px;
    }
    .stories-rank-drawer__title,
    .stories-rank-vcard__title {
        font-size: 16px;
    }
    .stories-rank-drawer__desc,
    .stories-rank-vcard__desc {
        font-size: 12px;
    }
    .stories-rank-vcard__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stories-waterfall-wrap {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .stories-waterfall__col {
        gap: 15px;
    }
    .story-card {
        height: 252px;
    }
    .story-card__sub-title {
        font-size: 15px;
    }
    .story-card__fig {
        width: 30px;
        height: 30px;
    }
}
@media (hover: none) and (pointer: coarse) {
    .stories-stats-card:active,
    .stories-stats-rank-item:active {
        transform: scale(0.985);
        box-shadow: 0 4px 10px rgba(102, 79, 56, 0.12);
    }
    .stories-stats-rank-item:hover {
        transform: none;
    }
}
@media (max-width: 640px) {
    .stories-rank-drawer {
        padding-left: 8px;
        padding-right: 8px;
        /* 保留顶部标题行，勿把 padding-top 打回 0 */
        padding-top: 34px;
    }
    .stories-waterfall-wrap { gap: 12px; }
    .stories-waterfall__col { gap: 12px; }
}
/* PC 端兜底：强制一级/二级导航吸顶（避免被上层滚动容器或 overflow 影响） */
@media (min-width: 992px) {
    /* PC 吸顶切 fixed + padding 预留时，避免滚动锚定与布局切换叠加造成视口突跳 */
    #home-dimension-tabs {
        overflow-anchor: none;
    }
    #home-dimension-tabs,
    #home-dimension-tabs .home-dim-tabs__panels,
    #home-dimension-tabs .home-dim-tabs__panel--stories,
    #home-dimension-tabs .home-dim-tabs__panel--figures,
    #home-dimension-tabs .home-dim-tabs__panel--figures .figure-timeline-panel__hscroll,
    #home-dimension-tabs #stories-hub,
    #home-dimension-tabs .stories-hub {
        overflow: visible !important;
    }
    #home-dimension-tabs .home-dim-tabs__bar {
        position: sticky !important;
        top: calc(env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px)) !important;
        z-index: 60 !important;
    }
    #home-dimension-tabs .home-dim-tabs__bar .stories-label-mobile {
        display: none !important;
    }
    #home-dimension-tabs .home-dim-tabs__bar .stories-label-pc {
        display: inline !important;
    }
    #home-dimension-tabs .stories-subnav {
        position: sticky !important;
        top: calc(
            env(safe-area-inset-top, 0px) +
            var(--site-marquee-height, 0px) +
            var(--home-dim-primary-bar-h, 52px) +
            2px
        ) !important;
        z-index: 59 !important;
    }
    /* PC：二级导航高度下调，贴近常规导航密度 */
    #home-dimension-tabs .stories-subnav {
        min-height: 72px;
        margin-top: 0;
    }
    #home-dimension-tabs .stories-subnav__btn {
        min-height: 72px;
    }
    /* PC 首次加载（未进入 fixed 前）：去掉一级与二级之间的静态流间隙 */
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) .home-dim-tabs__bar {
        margin-bottom: 0 !important;
    }
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) .home-dim-tabs__panel--stories {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* PC：搜索条在文档流里待到一级栏下沿，再吸顶；二级栏已隐藏，勿预留 72px */
    #home-dimension-tabs .stories-filter-wrap--search-nav {
        position: sticky !important;
        top: calc(
            env(safe-area-inset-top, 0px) +
            var(--site-marquee-height, 0px) +
            var(--home-dim-primary-bar-h, 52px)
        );
        z-index: 58;
    }
    #home-dimension-tabs:has(.stories-subnav--hidden) .stories-filter-wrap--search-nav,
    #home-dimension-tabs:has(.stories-subnav[hidden]) .stories-filter-wrap--search-nav {
        top: calc(
            env(safe-area-inset-top, 0px) +
            var(--site-marquee-height, 0px) +
            var(--home-dim-primary-bar-h, 52px)
        );
    }
    #home-dimension-tabs.home-dim-tabs--pc-fixed-active .stories-filter-wrap--search-nav:not(.stories-filter-wrap--pc-fixed) {
        top: calc(
            env(safe-area-inset-top, 0px) +
            var(--site-marquee-height, 0px) +
            var(--pc-fixed-reserve-h, 52px)
        );
        z-index: 58;
    }
    /* JS 兜底：当 sticky 在主题滚动容器内失效时，切 fixed 保证 PC 吸顶 */
    #home-dimension-tabs.home-dim-tabs--pc-fixed-active {
        padding-top: var(--pc-fixed-reserve-h, 0px);
    }
    #home-dimension-tabs .home-dim-tabs__bar.home-dim-tabs__bar--pc-fixed {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + var(--site-marquee-height, 0px)) !important;
        z-index: 80 !important;
        background: rgba(244, 240, 231, 0.72) !important;
        border-color: rgba(137, 111, 77, 0.22) !important;
        box-shadow: 0 8px 24px rgba(76, 58, 37, 0.16) !important;
        -webkit-backdrop-filter: saturate(130%) blur(12px);
        backdrop-filter: saturate(130%) blur(12px);
    }
    #home-dimension-tabs .stories-subnav.stories-subnav--pc-fixed {
        position: fixed !important;
        z-index: 79 !important;
        min-height: 72px !important;
        height: 72px !important;
        background: rgba(255, 255, 255, 0.68) !important;
        -webkit-backdrop-filter: saturate(130%) blur(10px);
        backdrop-filter: saturate(130%) blur(10px);
    }
    #home-dimension-tabs .stories-subnav.stories-subnav--pc-fixed .stories-subnav__btn {
        min-height: 72px !important;
        height: 72px !important;
        align-items: center;
        padding-top: 4px;
        padding-bottom: 0;
    }
    #home-dimension-tabs .stories-filter-wrap--search-nav.stories-filter-wrap--pc-fixed {
        position: fixed !important;
        z-index: 78 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .stories-filter-wrap--pc-fixed-pad {
        display: block;
        width: 100%;
        pointer-events: none;
    }
}
/* 移动端「传统文化故事」：清除顶部遗留留白（旧 masthead 规则兜底归零） */
@media (max-width: 991px) {
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box;
    }
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) .home-dim-tabs__masthead {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    #home-dimension-tabs.home-dim-tabs:has(#home-dim-tab-stories:checked) > div:first-child:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}