/* 捷特王 · 前台设计系统 pages —— 首页四板块 / 列表页 / 文章页 / 正文排版
   依赖 jetwong-chrome.css 的令牌，加载顺序必须在其后。
   深色是默认形态（黑曜石 + 数据层），浅色只换令牌：结构、类名一套到底。 */

/* ---------- 版心 ---------- */
.jw-main,
.jw-pad {
    max-width: var(--jw-maxw);
    margin: 0 auto;
    padding-inline: var(--jw-gut);
}

.jw-main {
    padding-bottom: clamp(12px, 2vw, 20px);
}

/* ---------- 00 轮播封面：大画报 ---------- */
.jw-hero {
    position: relative;
    max-width: var(--jw-maxw);
    margin: 0 auto;
    padding: clamp(12px, 2.2vw, 26px) var(--jw-gut) 0;
}

.jw-hero-stage {
    position: relative;
    display: grid;
    min-height: clamp(450px, 38vw, 560px);
}

/* 所有帧叠在同一格里：舞台高度取最高的一帧，不写死像素 */
.jw-slide {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .7s ease, visibility .7s;
}

.jw-slide.jw-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 封面雾化层：放大 + 高斯模糊，只负责把封面的颜色渗进背景 */
.jw-slide-aura {
    position: absolute;
    inset: -6% 0 -8% 24%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(72px) saturate(150%);
    opacity: .38;
    transform: scale(1.03);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 55% 62% at 55% 48%, #000 10%, transparent 80%);
    mask-image: radial-gradient(ellipse 55% 62% at 55% 48%, #000 10%, transparent 80%);
}

html[data-theme="light"] .jw-slide-aura {
    opacity: .14;
}

/* 大画报本体：横向与纵向两道蒙版取交集，四周长距离淡出，
   没有可辨认的圆环或矩形边，边缘直接化进背景。
   图片贴住版心右缘，实心区尽量向右延伸，视觉重心落在右半页 */
.jw-slide-fig {
    position: absolute;
    top: -2%;
    right: 0;
    bottom: -2%;
    width: 72%;
    z-index: 1;
    display: block;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .48) 10%, #000 27%, #000 90%, rgba(0, 0, 0, .62) 96%, transparent 100%),
        linear-gradient(0deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .48) 10%, #000 27%, #000 90%, rgba(0, 0, 0, .62) 96%, transparent 100%),
        linear-gradient(0deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

.jw-slide-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左缘只压很窄的一条暗带，让封面主体尽量完整露出 */
.jw-slide-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--jw-bg) 86%, transparent) 0%, color-mix(in srgb, var(--jw-bg) 48%, transparent) 12%, color-mix(in srgb, var(--jw-bg) 16%, transparent) 26%, transparent 42%);
    pointer-events: none;
}

.jw-slide-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: grid;
    gap: clamp(18px, 2vw, 26px);
    align-content: center;
    padding-bottom: clamp(46px, 6vw, 64px);
    transition: opacity .34s ease, transform .34s ease;
}

/* 文案背后一团同色柔光，压住封面亮部，标题压图时也清楚；
   范围收窄，不再大面积盖住右侧封面 */
.jw-slide-copy::before {
    content: "";
    position: absolute;
    inset: -8% -6% -12% -12%;
    z-index: -1;
    background: radial-gradient(58% 68% at 28% 50%, color-mix(in srgb, var(--jw-bg) 84%, transparent), transparent 78%);
    pointer-events: none;
}

/* 旧页文案先退场，再让新页文案进场，避免大标题叠字 */
.jw-slide:not(.jw-on) .jw-slide-copy {
    opacity: 0;
    transform: translateY(8px);
    transition-duration: .18s;
}

.jw-slide.jw-on .jw-slide-copy {
    transition-delay: .16s;
}

/* 没有封面图的轮播项：文案占满整行，不吐破图 */
.jw-slide:not(:has(.jw-slide-aura)) .jw-slide-copy {
    grid-column: 1 / -1;
    max-width: 720px;
}

.jw-slide-title {
    margin: 0;
    font-family: var(--jw-fd);
    font-size: clamp(2.1rem, 4.2vw, 3.5rem);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.052em;
    text-wrap: balance;
}

/* 标题本身就是整页最强的视觉元素，悬停再加一条扫过的下划线只会抢戏 */
.jw-slide-title a {
    color: var(--jw-fg);
    text-decoration: none;
}

.jw-slide-cta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* 只有标题和按钮，按钮给足体量，别缩成一小颗 */
.jw-slide-cta .jw-btn {
    padding: 11px 24px;
    font-size: 14.5px;
}

/* 指示条 / 计数器 / 换页 —— 首屏画报与广告轮播共用同一套控件 */
.jw-sl-ui {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jw-hero .jw-sl-ui {
    position: absolute;
    left: var(--jw-gut);
    right: var(--jw-gut);
    bottom: clamp(2px, 1vw, 10px);
    z-index: 4;
}

.jw-sl-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jw-sl-dots button {
    appearance: none;
    width: 34px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--jw-line2);
    cursor: pointer;
    transition: background .25s, width .25s;
}

.jw-sl-dots button:hover {
    background: var(--jw-fg2);
}

.jw-sl-dots button.jw-on {
    width: 52px;
    background: linear-gradient(90deg, var(--jw-ac), var(--jw-sig));
}

.jw-sl-count {
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--jw-mut);
}

.jw-sl-count b {
    font-weight: 500;
    color: var(--jw-fg);
}

.jw-sl-count i {
    font-style: normal;
    opacity: .5;
    margin: 0 3px;
}

.jw-sl-count em {
    font-style: normal;
}

.jw-sl-arrows {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.jw-sl-arrows button {
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 0;
    border: 1px solid var(--jw-line);
    background: color-mix(in srgb, var(--jw-panel) 55%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--jw-fg2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}

.jw-sl-arrows button:hover {
    color: var(--jw-fg);
    border-color: var(--jw-line2);
    background: var(--jw-panel);
}

.jw-sl-arrows svg {
    width: 16px;
    height: 16px;
}

.jw-slider.jw-sl-solo .jw-sl-ui {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .jw-slide.jw-on .jw-slide-fig img {
        animation: jw-poster 9s cubic-bezier(.2, .6, .3, 1) both;
    }

    .jw-slide.jw-on .jw-slide-copy > * {
        animation: jw-rise .62s cubic-bezier(.2, .7, .3, 1) both;
    }

    .jw-slide.jw-on .jw-slide-copy > :nth-child(2) {
        animation-delay: .05s;
    }
}

@keyframes jw-poster {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

@keyframes jw-rise {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 图像：原色呈现，只做裁切与 hover 微动 ---------- */
.jw-fig {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--jw-bg2);
    border-radius: var(--jw-radius);
    aspect-ratio: 16 / 9;
    margin: 0;
}

.jw-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.jw-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--jw-line);
    border-radius: inherit;
    pointer-events: none;
}

a:hover > .jw-fig img {
    transform: scale(1.03);
}

.jw-sum {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--jw-fg2);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jw-sum:empty {
    display: none;
}

/* ---------- 02 最新视频 ---------- */
.jw-vgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

.jw-vcard {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.jw-vfig {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
}

/* 日期与播放量压在封面右下角：深色半透明底保证任何画面上都清晰 */
.jw-vmeta {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    background: rgba(6, 10, 16, .66);
    color: #F2F5FA;
    font-family: var(--jw-fm);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
}

.jw-vmeta i {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, .32);
}

.jw-vcard h3 {
    margin: 0;
    font-family: var(--jw-fd);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.03em;
    color: var(--jw-fg);
    text-wrap: pretty;
    transition: color .18s;
}

.jw-vcard:hover h3 {
    color: var(--jw-ac);
}

/* ---------- 03 最新文章 ---------- */
.jw-posts {
    display: grid;
}

.jw-post {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 26px);
    padding: 20px 0;
    border-bottom: 1px solid var(--jw-line);
}

.jw-post:first-child {
    padding-top: 4px;
}

.jw-post:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.jw-post:not(:has(.jw-post-fig)) {
    grid-template-columns: minmax(0, 1fr);
}

.jw-post-fig {
    display: block;
    aspect-ratio: 16 / 10;
}

.jw-post-bd {
    min-width: 0;
    display: grid;
    gap: 9px;
    align-content: start;
}

.jw-post-bd h3 {
    margin: 0;
    font-family: var(--jw-fd);
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.032em;
    text-wrap: pretty;
}

.jw-post-bd h3 a {
    color: var(--jw-fg);
    text-decoration: none;
}

.jw-post-bd h3 a:hover {
    color: var(--jw-ac);
}

/* 文章卡的元信息比通用 .jw-meta 大一档，日期与阅读量之间加间隔点 */
.jw-post-meta {
    font-family: var(--jw-fb);
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--jw-fg2);
    gap: 6px;
}

.jw-post-meta span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--jw-mut);
}

/* ---------- 首页主栏 + 侧栏 ---------- */
.jw-cols {
    max-width: var(--jw-maxw);
    margin: var(--jw-gap-mod) auto 0;
    padding: 0 var(--jw-gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: var(--jw-gap-mod);
    align-items: start;
}

.jw-col-main {
    min-width: 0;
}

.jw-col-side {
    position: sticky;
    top: calc(var(--jw-bar-h) + 18px);
    display: grid;
    gap: var(--jw-gap-mod);
    min-width: 0;
}

/* 每个模块都是一块独立面板：底色 + 描边 + 内高光，内容不再直接浮在全局背景上 */
.jw-cols .jw-sec,
.jw-cols .jw-widget {
    position: relative;
    background-color: var(--jw-panel);
    background-image: linear-gradient(180deg, var(--jw-card-hib), transparent 140px);
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius-lg);
    box-shadow: inset 0 1px 0 var(--jw-card-edge), var(--jw-shadow);
}

.jw-cols .jw-sec {
    padding: clamp(18px, 2vw, 24px);
    margin: 0 0 var(--jw-gap-mod);
}

.jw-cols .jw-sec:last-child {
    margin-bottom: 0;
}

.jw-cols .jw-sec-hd {
    max-width: none;
    margin: 0 0 14px;
    padding: 0 0 9px;
}

.jw-cols .jw-sec-hd::after {
    left: 0;
}

.jw-cols .jw-pad {
    max-width: none;
    padding-inline: 0;
}

.jw-cols .jw-widget {
    padding: clamp(15px, 1.7vw, 19px);
}

/* 直播预告原先自带一层边框底，嵌进面板后去掉它，只留信号条 */
.jw-cols .jw-widget .jw-live-box {
    border: 0;
    border-left: 2px solid color-mix(in srgb, var(--jw-sig) 50%, transparent);
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 2px 0 0 14px;
}

@media (max-width: 1080px) {
    .jw-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-col-side {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        align-items: start;
    }
}

/* ---------- 侧栏挂件 ---------- */

.jw-widget {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.jw-widget-hd {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid var(--jw-line);
    padding-bottom: 8px;
}

.jw-widget-hd h3 {
    margin: 0;
    font-family: var(--jw-fd);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.028em;
    color: var(--jw-fg);
}

.jw-widget-hd .jw-h-en {
    font-size: 12px;
    letter-spacing: .1em;
}

.jw-widget-hd .jw-more {
    margin-left: auto;
}

.jw-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.jw-rank li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--jw-line);
}

.jw-rank li:last-child {
    border-bottom: 0;
}

.jw-rank i {
    font-family: var(--jw-fm);
    font-style: normal;
    font-size: 12px;
    color: var(--jw-mut);
}

.jw-rank li:nth-child(-n+3) i {
    color: var(--jw-sig);
}

.jw-rank a {
    font-size: 14.5px;
    line-height: 1.45;
    letter-spacing: -0.018em;
    color: var(--jw-fg);
    text-decoration: none;
    text-wrap: pretty;
}

.jw-rank a:hover {
    color: var(--jw-ac);
}

.jw-rank span {
    font-family: var(--jw-fm);
    font-size: 11px;
    color: var(--jw-mut);
    white-space: nowrap;
}

.jw-wlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 13px;
}

.jw-wlist li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.jw-wlist li:not(:has(.jw-th)) {
    grid-template-columns: minmax(0, 1fr);
}

.jw-wlist .jw-th {
    display: block;
    border-radius: var(--jw-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--jw-bg2);
}

.jw-wlist .jw-th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.jw-wlist li:hover .jw-th img {
    transform: scale(1.05);
}

.jw-wlist a:not(.jw-th) {
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--jw-fg);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jw-wlist a:hover {
    color: var(--jw-ac);
}

/* ---------- 直播预告（侧栏） ---------- */
.jw-live-box {
    border: 1px solid var(--jw-line);
    border-left: 2px solid var(--jw-sig);
    border-radius: var(--jw-radius);
    background: color-mix(in srgb, var(--jw-panel) 72%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 4px 14px 14px;
}

.jw-live-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.jw-live-tbl tr + tr {
    border-top: 1px solid var(--jw-line);
}

.jw-live-tbl td {
    padding: 9px 0;
    vertical-align: top;
}

.jw-live-k {
    font-family: var(--jw-fm);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--jw-mut);
    white-space: nowrap;
    width: 1%;
    padding-right: 14px;
}

.jw-live-v {
    color: var(--jw-fg);
    font-weight: 500;
    line-height: 1.5;
}

.jw-live-cta {
    margin-top: 12px;
    display: flex;
}

.jw-live-cta .jw-btn {
    width: 100%;
    justify-content: center;
}

/* 后台自定义字段全空时（模板里 td 内不留空白），整节直播预告收起 */
.jw-live-sec:not(:has(.jw-live-v:not(:empty))) {
    display: none;
}

/* ---------- 通用小件 ---------- */
.jw-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--jw-fg2);
    border: 1px solid var(--jw-line2);
    border-radius: 0;
    padding: 4px 11px;
    background: var(--jw-panel2);
    text-decoration: none;
    transition: color .18s, border-color .18s, background .18s;
}

a.jw-chip:hover,
.jw-chip:hover {
    color: var(--jw-ac);
    border-color: var(--jw-ac);
}

.jw-btn svg {
    width: 16px;
    height: 16px;
}

/* ---------- 广告位：整幅轮播 ----------
   一次只出一张 banner，宽度跟版心、高度按图自身比例走（不裁切），
   纯淡入淡出，自动轮播但不给任何控件。
   类名刻意用 belt 而不含 ad 字样：去广告插件按 [class*="-ad"] / [class*="ad-"]
   这类通用选择器整块隐藏容器，默认模板能显示正是因为它的类名是 flexslider/slides。 */
.jw-belt {
    max-width: var(--jw-maxw);
    margin: var(--jw-gap-mod) auto 0;
    padding: 0 var(--jw-gut);
}

/* 所有帧叠在同一格：舞台高度取最高的那张，切换时页面不跳 */
.jw-belt-stage {
    position: relative;
    display: grid;
}

.jw-belt .jw-slide {
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    /* 退场帧不淡出，只是被盖住：等上面那帧淡到位再瞬间收走。
       两帧同时半透明的话，页面底色会从它们中间透出来，切换像闪一下。 */
    transition: opacity 0s .8s, visibility 0s .8s;
}

.jw-belt .jw-slide.jw-on {
    z-index: 2;
    transition: opacity .8s ease, visibility 0s;
}

.jw-belt-slide > a,
.jw-belt-slide > span {
    display: block;
}

.jw-belt-slide img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius);
}

/* 底部那条 banner 贴着页脚走，中间只留一个模块间距 */
.jw-belt + .jw-ft {
    margin-top: var(--jw-gap-mod);
}

/* ---------- 列表页 ---------- */
.jw-plist {
    max-width: var(--jw-maxw);
    margin: 0 auto;
    padding-inline: var(--jw-gut);
}

.jw-phead {
    padding: clamp(26px, 4vw, 46px) 0 clamp(16px, 2.2vw, 24px);
    border-bottom: 1px solid var(--jw-line);
    margin-bottom: clamp(20px, 3vw, 32px);
}

.jw-phead h1 {
    margin: 0 0 12px;
    font-family: var(--jw-fd);
    font-size: clamp(1.75rem, 3.8vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.06;
}

/* 面包屑是定位用的，不是装饰：11px + 0.08em 字距在中文下发虚看不清，
   提到接近正文的字号、收掉字距、颜色从 --jw-mut 提到 --jw-fg2。 */
.jw-crumb {
    font-family: var(--jw-fm);
    font-size: 13.5px;
    letter-spacing: .01em;
    color: var(--jw-fg2);
    margin: 0 0 14px;
}

.jw-crumb a {
    color: var(--jw-fg2);
    text-decoration: none;
}

.jw-crumb a:hover {
    color: var(--jw-ac);
}

/* 最后一级就是当前所在栏目，用正文字色挑出来 */
.jw-crumb a:last-of-type {
    color: var(--jw-fg);
}

.jw-phead p:last-child {
    margin: 0;
    color: var(--jw-fg2);
    font-size: 14.5px;
    max-width: 68ch;
    text-wrap: pretty;
}

/* 列表流：图 + 文，行式 */
.jw-flow {
    display: grid;
    gap: clamp(16px, 2.2vw, 24px);
}

.jw-row {
    display: grid;
    grid-template-columns: clamp(130px, 17vw, 200px) minmax(0, 1fr);
    gap: clamp(15px, 2.2vw, 26px);
    align-items: start;
    padding-bottom: clamp(16px, 2.2vw, 24px);
    border-bottom: 1px solid var(--jw-line);
    container-type: inline-size;
}

.jw-row:last-child {
    border-bottom: 0;
}

/* 无图条目不开第一列，文字不缩进 */
.jw-row:not(:has(.jw-fig)) {
    grid-template-columns: minmax(0, 1fr);
}

.jw-row .jw-fig {
    aspect-ratio: 4 / 3;
}

.jw-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
}

.jw-row h2 {
    margin: 0;
    font-family: var(--jw-fd);
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.jw-row h2 a {
    color: var(--jw-fg);
    text-decoration: none;
}

.jw-row h2 a:hover {
    color: var(--jw-ac);
}

.jw-row .jw-meta {
    margin-top: auto;
}

@container (max-width: 420px) {
    .jw-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-row .jw-fig {
        aspect-ratio: 16 / 9;
    }
}

/* 分页 */
.jw-pagi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: clamp(26px, 4vw, 44px) 0 0;
    font-family: var(--jw-fm);
    font-size: 12.5px;
}

.jw-pagi a,
.jw-pagi span {
    min-width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius);
    color: var(--jw-fg2);
    text-decoration: none;
    background: var(--jw-panel);
    transition: color .16s, border-color .16s, background .16s;
}

.jw-pagi a:hover {
    color: var(--jw-ac);
    border-color: var(--jw-ac);
}

/* 分页：pagelist 输出的是扁平的 <a>/<span>
   （带 href 的 a=页码，不带 href 的 a=禁用与省略号，span=当前页） */
.jw-pagi a:not([href]),
.jw-pagi .disabled,
.jw-pagi .notpage {
    opacity: .38;
}

.jw-pagi span,
.jw-pagi .current,
.jw-pagi .thispage {
    background: var(--jw-btn);
    border-color: var(--jw-btn);
    color: var(--jw-ac-ink);
    font-weight: 500;
}

/* 空态兜底：栏目一条数据都没有时不留空白节（纯 CSS，模板里不写判断） */
.jw-flow:not(:has(.jw-row))::before {
    content: "这个栏目还没有内容。去首页看看最新一期，或点右上角搜索。";
    grid-column: 1 / -1;
    display: block;
    border: 1px dashed var(--jw-line2);
    border-radius: var(--jw-radius-lg);
    padding: clamp(30px, 5vw, 52px) clamp(16px, 3vw, 30px);
    text-align: center;
    color: var(--jw-mut);
    font-size: 14px;
}

/* ---------- 文章页 ---------- */
.jw-art {
    max-width: var(--jw-maxw);
    margin: 0 auto;
    padding-inline: var(--jw-gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: clamp(24px, 3.6vw, 54px);
    align-items: start;
}

.jw-art-body {
    min-width: 0;
    max-width: 74ch;
}

.jw-art-hd {
    padding: clamp(22px, 3.4vw, 40px) 0 clamp(15px, 2.2vw, 22px);
    border-bottom: 1px solid var(--jw-line);
    margin-bottom: clamp(22px, 3vw, 34px);
}

.jw-art-hd h1 {
    margin: 0 0 15px;
    font-family: var(--jw-fd);
    font-size: clamp(1.6rem, 3.6vw, 2.45rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.048em;
    text-wrap: balance;
}

/* 右侧栏：目录 + 推荐 + 打赏
   margin-top 抄正文头部 .jw-art-hd 的 padding-top：两栏首行（面包屑 / 目录）齐平。
   不写这一段的话侧栏会一直顶到上方 banner 的下边缘，看着像整块错位。 */
.jw-art-rail {
    position: sticky;
    top: calc(var(--jw-hdr-h) + 22px);
    margin-top: clamp(22px, 3.4vw, 40px);
    display: grid;
    gap: 24px;
    align-self: start;
    max-height: calc(100vh - var(--jw-hdr-h) - 44px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--jw-line2) transparent;
    padding-bottom: 8px;
}

.jw-toc {
    border-left: 1px solid var(--jw-line);
    padding-left: 15px;
    display: grid;
    gap: 1px;
}

.jw-toc-t {
    font-family: var(--jw-fm);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jw-mut);
    margin: 0 0 9px;
}

.jw-toc a {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--jw-fg2);
    text-decoration: none;
    margin-left: -16px;
    padding: 5px 8px 5px 15px;
    border-left: 2px solid transparent;
    transition: color .16s, border-color .16s;
}

.jw-toc a:hover {
    color: var(--jw-fg);
}

.jw-toc a.jw-toc-on {
    color: var(--jw-ac);
    border-left-color: var(--jw-ac);
    font-weight: 500;
}

.jw-toc a.jw-toc-h3 {
    padding-left: 30px;
    font-size: 13.5px;
    color: var(--jw-mut);
}

/* 标题不足两个时不显示目录 */
.jw-toc:not(:has(a)) {
    display: none;
}

/* 打赏 */
.jw-tip {
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius-lg);
    padding: 15px;
    background: var(--jw-panel);
    display: grid;
    gap: 12px;
}

.jw-tip-btns {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.jw-tip-btns .jw-chip {
    cursor: pointer;
}

.jw-tip-btns .jw-chip.jw-on {
    border-color: var(--jw-ac);
    color: var(--jw-ac);
    background: var(--jw-ac-soft);
}

.jw-tip-qr {
    display: none;
}

.jw-tip-qr.jw-on {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.jw-tip-qr img {
    width: 100%;
    max-width: 180px;
    border-radius: var(--jw-radius);
    border: 1px solid var(--jw-line);
}

.jw-tip-qr p {
    margin: 0;
    font-size: 12.5px;
    color: var(--jw-mut);
}

/* 标签 / 上下篇 */
.jw-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: clamp(22px, 3vw, 32px) 0 0;
}

.jw-pn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: clamp(20px, 3vw, 28px) 0 0;
    border-top: 1px solid var(--jw-line);
    margin-top: clamp(20px, 3vw, 28px);
}

.jw-pn a {
    display: grid;
    gap: 6px;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius);
    padding: 13px 15px;
    text-decoration: none;
    background: var(--jw-panel);
    transition: border-color .18s, transform .18s;
}

.jw-pn a:hover {
    border-color: var(--jw-ac);
    transform: translateY(-2px);
}

.jw-pn a.jw-off {
    opacity: .42;
    pointer-events: none;
}

.jw-pn em {
    font-family: var(--jw-fm);
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jw-mut);
}

.jw-pn b {
    font-family: var(--jw-fd);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.35;
    letter-spacing: -0.028em;
    color: var(--jw-fg);
}

.jw-pn .jw-next {
    text-align: right;
}

/* 评论区外框 */
.jw-cbox {
    padding: clamp(26px, 4vw, 40px) 0 0;
    margin-top: clamp(26px, 4vw, 40px);
    border-top: 1px solid var(--jw-line);
}

/* ---------- 正文排版 ---------- */
.jw-prose {
    font-size: clamp(16px, 1.05vw, 17.5px);
    line-height: 1.8;
    color: var(--jw-fg);
    letter-spacing: -0.004em;
    word-break: break-word;
}

.jw-prose > *:first-child {
    margin-top: 0;
}

.jw-prose p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

.jw-prose h2,
.jw-prose h3,
.jw-prose h4 {
    font-family: var(--jw-fd);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.24;
    margin: 2em 0 .7em;
    scroll-margin-top: calc(var(--jw-hdr-h) + 22px);
}

.jw-prose h2 {
    font-size: clamp(1.26rem, 2.1vw, 1.55rem);
    padding-left: 13px;
    border-left: 3px solid var(--jw-sig);
}

.jw-prose h3 {
    font-size: clamp(1.08rem, 1.6vw, 1.26rem);
}

.jw-prose h4 {
    font-size: 1.02rem;
    color: var(--jw-fg2);
}

.jw-prose a {
    color: var(--jw-ac);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--jw-ac) 38%, transparent);
    text-underline-offset: 3px;
}

.jw-prose a:hover {
    color: var(--jw-sig);
    border-bottom-color: var(--jw-sig);
}

.jw-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jw-radius);
    margin: 6px 0;
}

.jw-prose figure {
    margin: 1.6em 0;
}

.jw-prose figcaption {
    font-family: var(--jw-fm);
    font-size: 12px;
    color: var(--jw-mut);
    margin-top: 9px;
    text-align: center;
}

.jw-prose blockquote {
    margin: 1.6em 0;
    padding: 12px 16px 12px 18px;
    border-left: 3px solid var(--jw-ac);
    background: var(--jw-panel2);
    border-radius: 0 var(--jw-radius) var(--jw-radius) 0;
    color: var(--jw-fg2);
}

.jw-prose blockquote p:last-child {
    margin-bottom: 0;
}

.jw-prose ul,
.jw-prose ol {
    margin: 0 0 1.15em;
    padding-left: 1.5em;
}

.jw-prose li {
    margin: .34em 0;
    padding-left: .2em;
}

.jw-prose li::marker {
    color: var(--jw-sig);
    font-family: var(--jw-fm);
    font-size: .9em;
}

.jw-prose code {
    font-family: var(--jw-fm);
    font-size: .87em;
    background: var(--jw-ac-soft);
    color: var(--jw-ac);
    padding: .12em .42em;
    border-radius: var(--jw-radius);
}

/* 代码块两种主题下都用深墨底，保持"终端"的辨识度 */
.jw-prose pre {
    margin: 1.5em 0;
    padding: 15px 17px;
    background: #080C14;
    color: #DCE6F5;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius);
    overflow-x: auto;
    font-family: var(--jw-fm);
    font-size: 13.5px;
    line-height: 1.62;
}

.jw-prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.jw-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}

.jw-prose th,
.jw-prose td {
    border: 1px solid var(--jw-line);
    padding: 9px 12px;
    text-align: left;
}

.jw-prose th {
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jw-mut);
    background: var(--jw-panel2);
    font-weight: 500;
}

.jw-prose hr {
    border: 0;
    border-top: 1px solid var(--jw-line);
    margin: 2.4em 0;
}

.jw-prose iframe,
.jw-prose video {
    max-width: 100%;
    border-radius: var(--jw-radius);
}

/* CMS 老文章里的 float/div 残留不再破坏版式 */
.jw-prose .clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .jw-art {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-art-rail {
        position: static;
        margin-top: 0;
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--jw-line);
        padding-top: 22px;
    }
}

@media (max-width: 900px) {
    .jw-hero-stage {
        min-height: 0;
    }

    .jw-slide {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: start;
        min-height: 0;
    }

    .jw-slide-copy {
        grid-row: 1;
        align-content: start;
        padding-bottom: clamp(18px, 3vw, 28px);
    }

    .jw-slide-copy::before {
        inset: -8% 0 -10% 0;
    }

    .jw-slide-fig {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        grid-row: 2;
        width: 100%;
        height: clamp(240px, 46vw, 380px);
        -webkit-mask-image:
            linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%),
            linear-gradient(90deg, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, .55) 90%, transparent 98%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%),
            linear-gradient(90deg, transparent 0%, #000 7%, #000 82%, rgba(0, 0, 0, .55) 90%, transparent 98%);
        mask-composite: intersect;
    }

    .jw-slide-fig::after {
        display: none;
    }

    .jw-slide-aura {
        inset: 30% 2% 0 2%;
    }
}

@media (max-width: 640px) {
    .jw-sl-dots button {
        width: 26px;
    }

    .jw-sl-dots button.jw-on {
        width: 40px;
    }

    .jw-vgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-post-fig {
        aspect-ratio: 16 / 9;
    }

    .jw-art-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-pn {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .jw-row .jw-fig {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- 分类筛选条 ---------- */
.jw-fbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: clamp(16px, 2.2vw, 24px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jw-line);
}

.jw-fbar-lb {
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--jw-mut);
    white-space: nowrap;
}

.jw-fbar-i {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jw-fchip {
    font-size: 12.5px;
    line-height: 1;
    color: var(--jw-fg2);
    text-decoration: none;
    border: 1px solid var(--jw-line2);
    border-radius: 0;
    padding: 7px 13px;
    white-space: nowrap;
    transition: color .18s, border-color .18s, background .18s;
}

.jw-fchip:hover {
    color: var(--jw-fg);
    border-color: var(--jw-fg2);
}

.jw-fchip.on {
    color: var(--jw-ac-ink);
    background: var(--jw-btn);
    border-color: var(--jw-btn);
    font-weight: 500;
}

/* ---------- 媒体栅格：视频 / 播客 / 图集 ---------- */
.jw-mgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    margin-bottom: clamp(22px, 3vw, 32px);
}

/* 筛选后这一页可能一张都不剩，栅格自己给出空态 */
.jw-mgrid:not(:has(.jw-it))::after {
    content: "该分类下暂无视频";
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    font-family: var(--jw-fm);
    font-size: 12.5px;
    color: var(--jw-mut);
    border: 1px dashed var(--jw-line);
    border-radius: var(--jw-radius-lg);
}

.jw-mcard,
.jw-good {
    display: grid;
    align-content: start;
    padding-bottom: 14px;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius-lg);
    background: var(--jw-panel);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s, transform .2s, box-shadow .3s;
}

.jw-mcard:hover,
.jw-good:hover {
    border-color: var(--jw-sig);
    transform: translateY(-3px);
    box-shadow: var(--jw-shadow);
}

.jw-mfig,
.jw-good-fig {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--jw-bg2);
}

.jw-mfig {
    aspect-ratio: 16 / 9;
}

.jw-good-fig {
    aspect-ratio: 1 / 1;
}

.jw-mfig img,
.jw-good-fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.jw-mcard:hover .jw-mfig img,
.jw-good:hover .jw-good-fig img {
    transform: scale(1.045);
}

.jw-mplay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .25s;
}

.jw-mplay svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
}

.jw-mcard:hover .jw-mplay {
    opacity: 1;
}

/* 时长/编号浮在封面上，必须压住任意底色的图 */
.jw-mdur,
.jw-th-dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-family: var(--jw-fm);
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 0;
    background: rgba(5, 8, 13, .78);
    color: #E8EEF7;
}

.jw-mdur:empty,
.jw-th-dur:empty {
    display: none;
}

.jw-mbody,
.jw-good-bd {
    display: grid;
    gap: 9px;
    padding: 12px 14px 0;
    min-width: 0;
}

.jw-mti,
.jw-good-ti {
    font-family: var(--jw-fd);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.02em;
    color: var(--jw-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jw-mcard:hover .jw-mti,
.jw-good:hover .jw-good-ti {
    color: var(--jw-ac);
}

/* 播放器外框：tcplayer 的运行时由 $video.hidden 注入，这里只保证 16:9 不塌陷 */
.jw-player {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius-lg);
    background: #05080D;
    margin-bottom: clamp(18px, 2.4vw, 26px);
}

.jw-player video {
    display: block;
    width: 100%;
    height: 100%;
    background: #05080D;
}

/* 没有片源时 videoplay 整块不输出，别让 16:9 空壳占版面 */
.jw-player:not(:has(video)) {
    display: none;
}

.jw-serial {
    color: var(--jw-sig);
}

.jw-wlist .jw-th {
    position: relative;
}

.jw-wlist .jw-th-dur {
    right: 4px;
    bottom: 4px;
    font-size: 9.5px;
    padding: 2px 5px;
}

/* ---------- 下载页 ---------- */
.jw-lbl {
    position: relative;
    margin: 0 0 10px;
    padding-left: 12px;
    font-family: var(--jw-fm);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jw-mut);
}

.jw-lbl::before {
    content: "";
    position: absolute;
    left: 0;
    top: .56em;
    width: 6px;
    height: 1px;
    background: var(--jw-sig);
}

.jw-dl {
    display: grid;
    gap: 14px;
    padding: clamp(16px, 2.2vw, 22px);
    margin-bottom: clamp(20px, 2.6vw, 28px);
    border: 1px solid var(--jw-line);
    border-left: 3px solid var(--jw-sig);
    border-radius: var(--jw-radius);
    background: var(--jw-panel);
}

.jw-dl-list {
    display: grid;
    gap: 10px;
}

.jw-dl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.jw-dl-btn {
    min-width: 148px;
    justify-content: center;
}

.jw-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--jw-line2);
    border-radius: var(--jw-radius);
    background: var(--jw-panel2);
    font-family: var(--jw-fm);
    font-size: 12.5px;
    color: var(--jw-fg);
}

.jw-code b {
    font-weight: 500;
    letter-spacing: .06em;
}

.jw-copy {
    appearance: none;
    padding: 3px 9px;
    border: 1px solid var(--jw-line2);
    border-radius: 0;
    background: transparent;
    color: var(--jw-mut);
    font-family: var(--jw-fm);
    font-size: 10.5px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.jw-copy:hover {
    color: var(--jw-ac);
    border-color: var(--jw-ac);
}

.jw-file {
    font-family: var(--jw-fm);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--jw-mut);
}

.jw-fine {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--jw-mut);
}

.jw-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jw-spec span {
    padding: 4px 11px;
    border: 1px solid var(--jw-line);
    border-radius: 0;
    background: var(--jw-panel2);
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--jw-fg2);
}

.jw-tuto {
    margin: 0 0 clamp(18px, 2.4vw, 24px);
}

/* ---------- 参数表 ---------- */
.jw-kv {
    margin: 0 0 clamp(20px, 2.6vw, 28px);
    border-top: 1px solid var(--jw-line);
}

.jw-kv-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--jw-line);
}

.jw-kv-k {
    margin: 0;
    padding-top: 2px;
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--jw-mut);
}

.jw-kv-v {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--jw-fg);
    word-break: break-word;
}

/* ---------- 截图 / 相册 ---------- */
.jw-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 12px;
    margin-bottom: clamp(20px, 2.6vw, 28px);
}

.jw-shots > .jw-lbl {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

.jw-shots-wide {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.jw-shot {
    display: block;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius);
    overflow: hidden;
    background: var(--jw-bg2);
}

.jw-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.jw-shot figcaption {
    padding: 7px 10px;
    border-top: 1px solid var(--jw-line);
    font-family: var(--jw-fm);
    font-size: 11px;
    color: var(--jw-mut);
}

/* ---------- 小店 ---------- */
.jw-shop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    margin-bottom: clamp(22px, 3vw, 32px);
}

.jw-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.jw-price {
    font-family: var(--jw-fd);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--jw-sig);
}

.jw-price-lg .jw-price {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.jw-old {
    font-family: var(--jw-fm);
    font-size: 12px;
    color: var(--jw-mut);
}

.jw-noprice {
    font-size: 15px;
    font-weight: 500;
    color: var(--jw-mut);
}

.jw-buy {
    display: grid;
    gap: 12px;
    padding: clamp(14px, 2vw, 20px);
    margin-bottom: clamp(20px, 2.6vw, 28px);
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius-lg);
    background: var(--jw-panel);
}

.jw-wprice,
.jw-wdate {
    grid-column: 2;
    font-family: var(--jw-fm);
    font-size: 10.5px;
    letter-spacing: .04em;
}

.jw-wprice {
    font-size: 11.5px;
    color: var(--jw-sig);
}

.jw-wdate {
    color: var(--jw-mut);
}

/* 缩略图缺席时侧栏只有一列，价格/日期不能顶到隐式列里去 */
.jw-wlist li:not(:has(.jw-th))>.jw-wprice,
.jw-wlist li:not(:has(.jw-th))>.jw-wdate {
    grid-column: 1;
}

/* ---------- 分类筛选 / 计数 / 标签云 / 站内搜索 ---------- */
.jw-fil {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(18px, 2.4vw, 26px);
}

.jw-fil .jw-chip.jw-on {
    background: var(--jw-btn);
    border-color: var(--jw-btn);
    color: var(--jw-ac-ink);
}

.jw-phead .jw-count {
    max-width: none;
    margin: 14px 0 0;
    font-family: var(--jw-fm);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--jw-mut);
}

.jw-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: clamp(22px, 3vw, 32px);
}

.jw-cloud > .jw-lbl {
    width: 100%;
    margin-bottom: 2px;
}

.jw-cloud .jw-chip i {
    margin-left: 7px;
    font-size: 10px;
    font-style: normal;
    color: var(--jw-mut);
}

.jw-qbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

.jw-qin {
    flex: 1 1 220px;
    min-width: 0;
    appearance: none;
    padding: 9px 16px;
    border: 1px solid var(--jw-line2);
    border-radius: 0;
    background: var(--jw-panel2);
    color: var(--jw-fg);
    font-family: var(--jw-fb);
    font-size: 14px;
}

.jw-qin:focus-visible {
    outline: none;
    border-color: var(--jw-ac);
    box-shadow: 0 0 0 3px var(--jw-ac-soft);
}

.jw-plist-solo {
    max-width: 820px;
}

/* 新栅格同样要有空态，栏目没内容时不留一片空白 */
.jw-mgrid:not(:has(.jw-mcard))::before,
.jw-shop:not(:has(.jw-good))::before,
.jw-cloud:not(:has(.jw-chip))::before {
    content: "这里还没有内容。去首页看看最新一期，或点右上角搜索。";
    grid-column: 1 / -1;
    display: block;
    border: 1px dashed var(--jw-line2);
    border-radius: var(--jw-radius-lg);
    padding: clamp(30px, 5vw, 52px) clamp(16px, 3vw, 30px);
    text-align: center;
    color: var(--jw-mut);
    font-size: 14px;
}

@media (max-width: 640px) {

    .jw-mgrid,
    .jw-shop,
    .jw-shots {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    }

    .jw-kv-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .jw-dl-btn {
        flex: 1 1 100%;
    }
}

