/* ============================================================
   Category Page V2 — All-In-One Stylesheet
   ------------------------------------------------------------
   Scope:   body.zhaod-cat-v2 (only on category archives)
   Themes:  Claude (light, default) / Binance (dark, [data-bs-theme="dark"])
   Tokens:  References --bn-* tokens from design-system.css
   ============================================================ */


/* ============================================================
   1. Local tokens (scoped, never global)
   ============================================================ */

.zhaod-cat-v2 {
    --cat-hero-pad-y: clamp(2rem, 4vw, 3.5rem);
    --cat-icon-size:  clamp(56px, 7vw, 88px);
    --cat-grid-gap:   clamp(16px, 2vw, 28px);
    --cat-card-radius: var(--bn-radius-xl, 16px);
    --cat-section-pad: clamp(1.5rem, 3vw, 2.5rem);
    --cat-anim-stagger: 38ms;
    --cat-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cat-toolbar-h: 56px;
    --cat-header-offset: 64px;
}

/* Tone palette — decorative only (icon tile, glow, hover ring).
   Never replaces --bn-primary / --bn-canvas-* / --bn-ink. */

.zhaod-cat-v2 [data-tone="orange"] { --cat-tone:#c96442; --cat-tone-rgb:201,100,66;  --cat-tone-soft:#fff1ec; --cat-tone-deep:#a44e30; }
.zhaod-cat-v2 [data-tone="blue"]   { --cat-tone:#3b82f6; --cat-tone-rgb:59,130,246;  --cat-tone-soft:#eff6ff; --cat-tone-deep:#2563eb; }
.zhaod-cat-v2 [data-tone="purple"] { --cat-tone:#8b5cf6; --cat-tone-rgb:139,92,246;  --cat-tone-soft:#f3effe; --cat-tone-deep:#7c3aed; }
.zhaod-cat-v2 [data-tone="rose"]   { --cat-tone:#e11d48; --cat-tone-rgb:225,29,72;   --cat-tone-soft:#ffe9ee; --cat-tone-deep:#be123c; }
.zhaod-cat-v2 [data-tone="teal"]   { --cat-tone:#0d9488; --cat-tone-rgb:13,148,136;  --cat-tone-soft:#e6f7f5; --cat-tone-deep:#0f766e; }
.zhaod-cat-v2 [data-tone="amber"]  { --cat-tone:#d97706; --cat-tone-rgb:217,119,6;   --cat-tone-soft:#fff5e0; --cat-tone-deep:#b45309; }
.zhaod-cat-v2 [data-tone="pink"]   { --cat-tone:#ec4899; --cat-tone-rgb:236,72,153;  --cat-tone-soft:#ffedf6; --cat-tone-deep:#db2777; }
.zhaod-cat-v2 [data-tone="green"]  { --cat-tone:#10b981; --cat-tone-rgb:16,185,129;  --cat-tone-soft:#e6f9f1; --cat-tone-deep:#059669; }

/* Dark mode tone soft → translucent overlay (Binance accent yellow as glow base) */
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="orange"] { --cat-tone-soft: rgba(252,213,53,0.08); --cat-tone:#fcd535; --cat-tone-rgb:252,213,53; }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="blue"]   { --cat-tone-soft: rgba(59,130,246,0.10); }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="purple"] { --cat-tone-soft: rgba(139,92,246,0.10); }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="rose"]   { --cat-tone-soft: rgba(225,29,72,0.10); }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="teal"]   { --cat-tone-soft: rgba(13,148,136,0.12); }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="amber"]  { --cat-tone-soft: rgba(252,213,53,0.10); --cat-tone:#fcd535; --cat-tone-rgb:252,213,53; }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="pink"]   { --cat-tone-soft: rgba(236,72,153,0.10); }
[data-bs-theme="dark"] .zhaod-cat-v2 [data-tone="green"]  { --cat-tone-soft: rgba(16,185,129,0.12); }


/* ============================================================
   2. Hide legacy clean-archive-hero on V2 — we own the hero now
   ============================================================ */

body.zhaod-cat-v2 .archive-hero,
body.zhaod-cat-v2 .archive-hero--clean,
body.zhaod-cat-v2 .filter-warp {
    display: none !important;
}


/* ============================================================
   3. Cat-Hero — two-column hero with icon tile + stats
   ============================================================ */

.zhaod-cat-v2 .cat-hero {
    position: relative;
    padding: var(--cat-hero-pad-y) 0 0;
    overflow: hidden;
    border-bottom: 1px solid var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero {
    border-bottom-color: var(--bn-hairline-on-dark, #1e2329);
}

.zhaod-cat-v2 .cat-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 92% 88%, rgba(var(--cat-tone-rgb, 201, 100, 66), 0.16), transparent 55%),
        radial-gradient(circle at 4% 12%, rgba(var(--cat-tone-rgb, 201, 100, 66), 0.06), transparent 50%);
    filter: blur(0px);
    opacity: 1;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__bg {
    background:
        radial-gradient(circle at 92% 88%, rgba(var(--cat-tone-rgb, 252, 213, 53), 0.10), transparent 55%),
        radial-gradient(circle at 4% 12%, rgba(var(--cat-tone-rgb, 252, 213, 53), 0.04), transparent 50%);
}

.zhaod-cat-v2 .cat-hero > .container {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.zhaod-cat-v2 .cat-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-caption, 12px);
    color: var(--bn-muted, #6b6b6b);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.4;
    animation: cat-rise 0.4s var(--cat-ease) both;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-breadcrumb {
    color: var(--bn-muted-strong, #848e9c);
}

.zhaod-cat-v2 .cat-breadcrumb a {
    color: inherit;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.zhaod-cat-v2 .cat-breadcrumb a:hover {
    color: var(--bn-ink, #141413);
    background-color: var(--bn-surface-soft-light, #faf9f5);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-breadcrumb a:hover {
    color: var(--bn-on-dark, #eaecef);
    background-color: rgba(255, 255, 255, 0.05);
}

.zhaod-cat-v2 .cat-breadcrumb .sep {
    opacity: 0.4;
    margin: 0 2px;
    user-select: none;
}

.zhaod-cat-v2 .cat-breadcrumb .current {
    color: var(--bn-ink, #141413);
    font-weight: 500;
    padding: 2px 6px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-breadcrumb .current {
    color: var(--bn-on-dark, #eaecef);
}

/* Hero head — two-column responsive grid */
.zhaod-cat-v2 .cat-hero__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 2.4vw, 28px);
    align-items: center;
    animation: cat-rise 0.5s var(--cat-ease) both;
    animation-delay: 60ms;
}

.zhaod-cat-v2 .cat-hero__icon {
    width: var(--cat-icon-size);
    height: var(--cat-icon-size);
    border-radius: clamp(12px, 1.6vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cat-tone-soft);
    color: var(--cat-tone);
    font-size: clamp(22px, 2.6vw, 36px);
    box-shadow: 0 0 0 1px rgba(var(--cat-tone-rgb), 0.10) inset;
    flex-shrink: 0;
    transition: transform 0.3s var(--cat-ease);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__icon {
    background: var(--cat-tone-soft);
    color: var(--cat-tone);
    box-shadow: 0 0 0 1px rgba(var(--cat-tone-rgb), 0.15) inset;
}

.zhaod-cat-v2 .cat-hero:hover .cat-hero__icon {
    transform: rotate(-4deg) scale(1.04);
}

.zhaod-cat-v2 .cat-hero__body {
    min-width: 0;
}

.zhaod-cat-v2 .cat-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-caption, 12px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cat-tone);
    margin-bottom: 8px;
}

.zhaod-cat-v2 .cat-hero__eyebrow::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: currentColor;
}

.zhaod-cat-v2 .cat-hero__title {
    font-family: var(--bn-font-display, inherit);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--bn-ink, #141413);
    margin: 0 0 8px;
    word-break: break-word;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__title {
    color: var(--bn-on-dark, #eaecef);
}

.zhaod-cat-v2 .cat-hero__desc {
    font-family: var(--bn-font-body, inherit);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.6;
    color: var(--bn-muted-strong, #4b5563);
    margin: 0;
    max-width: 720px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__desc {
    color: var(--bn-muted-strong, #b0b8c1);
}

.zhaod-cat-v2 .cat-hero__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 14px;
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-body-sm, 14px);
    color: var(--bn-muted, #6b6b6b);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__stats {
    color: var(--bn-muted-strong, #848e9c);
}

.zhaod-cat-v2 .cat-hero__stats .stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.zhaod-cat-v2 .cat-hero__stats .stat b {
    font-family: var(--bn-font-number, "IBM Plex Sans", inherit);
    font-weight: 600;
    color: var(--bn-ink, #141413);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__stats .stat b {
    color: var(--bn-on-dark, #eaecef);
}

.zhaod-cat-v2 .cat-hero__stats .stat__sep {
    color: rgba(0, 0, 0, 0.18);
    user-select: none;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-hero__stats .stat__sep {
    color: rgba(255, 255, 255, 0.18);
}


/* ============================================================
   4. SubCat-Chips — sub-category quick switcher
   ============================================================ */

.zhaod-cat-v2 .subcat-chips-wrap {
    position: relative;
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    padding-bottom: 4px;
    animation: cat-rise 0.5s var(--cat-ease) both;
    animation-delay: 120ms;
}

.zhaod-cat-v2 .subcat-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
    margin-bottom: -6px;
    -webkit-overflow-scrolling: touch;
}

.zhaod-cat-v2 .subcat-chips::-webkit-scrollbar {
    display: none;
}

.zhaod-cat-v2 .subcat-chips .chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-body-sm, 13px);
    font-weight: 500;
    color: var(--bn-muted-strong, #4b5563);
    background: var(--bn-surface-soft-light, #faf9f5);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    text-decoration: none;
    transition: color 0.18s var(--cat-ease),
                background-color 0.18s var(--cat-ease),
                border-color 0.18s var(--cat-ease),
                transform 0.18s var(--cat-ease);
    white-space: nowrap;
}

.zhaod-cat-v2 .subcat-chips .chip:hover {
    color: var(--cat-tone);
    background: var(--cat-tone-soft);
    border-color: rgba(var(--cat-tone-rgb), 0.20);
    transform: translateY(-1px);
}

.zhaod-cat-v2 .subcat-chips .chip.is-active {
    color: #fff;
    background: var(--cat-tone);
    border-color: var(--cat-tone);
}

.zhaod-cat-v2 .subcat-chips .chip__count {
    font-family: var(--bn-font-number, "IBM Plex Sans", inherit);
    font-size: 11px;
    font-weight: 600;
    opacity: 0.6;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .subcat-chips .chip {
    color: var(--bn-muted-strong, #b0b8c1);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--bn-hairline-on-dark, #1e2329);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .subcat-chips .chip:hover {
    color: var(--cat-tone);
    background: var(--cat-tone-soft);
    border-color: rgba(var(--cat-tone-rgb), 0.30);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .subcat-chips .chip.is-active {
    color: #0b0e11;
    background: var(--cat-tone);
    border-color: var(--cat-tone);
}

/* Edge fade masks (only when overflow exists) */
.zhaod-cat-v2 .subcat-chips-wrap.has-overflow::before,
.zhaod-cat-v2 .subcat-chips-wrap.has-overflow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 6px;
    width: 36px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.zhaod-cat-v2 .subcat-chips-wrap.has-overflow::before {
    left: 0;
    background: linear-gradient(to right, var(--bn-canvas-light, #f5f4ed) 0%, transparent 100%);
    opacity: 0;
}

.zhaod-cat-v2 .subcat-chips-wrap.has-overflow::after {
    right: 0;
    background: linear-gradient(to left, var(--bn-canvas-light, #f5f4ed) 0%, transparent 100%);
    opacity: 1;
}

.zhaod-cat-v2 .subcat-chips-wrap.scrolled::before { opacity: 1; }
.zhaod-cat-v2 .subcat-chips-wrap.at-end::after    { opacity: 0; }

[data-bs-theme="dark"] .zhaod-cat-v2 .subcat-chips-wrap.has-overflow::before {
    background: linear-gradient(to right, var(--bn-canvas-dark, #0b0e11) 0%, transparent 100%);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .subcat-chips-wrap.has-overflow::after {
    background: linear-gradient(to left, var(--bn-canvas-dark, #0b0e11) 0%, transparent 100%);
}


/* ============================================================
   5. Featured pin — 1 large + 2 small editor's picks
   ============================================================ */

.zhaod-cat-v2 .cat-featured {
    padding: var(--cat-section-pad) 0 0;
}

.zhaod-cat-v2 .cat-featured__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.zhaod-cat-v2 .cat-featured__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zhaod-cat-v2 .cat-featured__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-caption, 12px);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cat-tone);
}

.zhaod-cat-v2 .cat-featured__eyebrow i {
    font-size: 11px;
}

.zhaod-cat-v2 .cat-featured__title {
    font-family: var(--bn-font-display, inherit);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 600;
    color: var(--bn-ink, #141413);
    margin: 0;
    line-height: 1.3;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-featured__title {
    color: var(--bn-on-dark, #eaecef);
}

.zhaod-cat-v2 .cat-featured__more {
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-body-sm, 13px);
    color: var(--bn-muted-strong, #4b5563);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.zhaod-cat-v2 .cat-featured__more:hover {
    color: var(--cat-tone);
    background: var(--cat-tone-soft);
}

.zhaod-cat-v2 .cat-featured__more i {
    transition: transform 0.18s var(--cat-ease);
}

.zhaod-cat-v2 .cat-featured__more:hover i {
    transform: translateX(2px);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-featured__more {
    color: var(--bn-muted-strong, #b0b8c1);
}

.zhaod-cat-v2 .cat-featured__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--cat-grid-gap);
    min-height: 360px;
}

.zhaod-cat-v2 .featured-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--cat-card-radius);
    isolation: isolate;
    text-decoration: none;
    display: block;
    transition: transform 0.3s var(--cat-ease),
                box-shadow 0.3s var(--cat-ease);
}

.zhaod-cat-v2 .featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(20, 20, 19, 0.08);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .featured-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.zhaod-cat-v2 .featured-card--lg {
    grid-row: span 2;
    grid-column: 1;
}

.zhaod-cat-v2 .featured-card__img {
    position: absolute;
    inset: 0;
    background-size: 0;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

.zhaod-cat-v2 .featured-card__img::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(36px) saturate(1.2) brightness(0.85);
    z-index: 0;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .featured-card__img::before {
    filter: blur(36px) saturate(1.05) brightness(0.55);
}

.zhaod-cat-v2 .featured-card__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.zhaod-cat-v2 .featured-card:hover .featured-card__img {
    transform: scale(1.05);
}

.zhaod-cat-v2 .featured-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 20, 19, 0) 0%,
        rgba(20, 20, 19, 0.10) 35%,
        rgba(20, 20, 19, 0.78) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.zhaod-cat-v2 .featured-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(14px, 1.6vw, 22px);
    z-index: 2;
    color: #fff;
}

.zhaod-cat-v2 .featured-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--bn-font-body, inherit);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    background: rgba(var(--cat-tone-rgb), 0.95);
    color: #fff;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
}

.zhaod-cat-v2 .featured-card__title {
    font-family: var(--bn-font-display, inherit);
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zhaod-cat-v2 .featured-card--lg .featured-card__title {
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}

.zhaod-cat-v2 .featured-card .featured-card__title {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.zhaod-cat-v2 .featured-card__desc {
    font-family: var(--bn-font-body, inherit);
    font-size: var(--bn-fs-body-sm, 13px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zhaod-cat-v2 .featured-card .featured-card__desc {
    display: none;
}

.zhaod-cat-v2 .featured-card--lg .featured-card__desc {
    display: -webkit-box;
}

.zhaod-cat-v2 .featured-card__meta {
    display: flex;
    gap: 12px;
    font-family: var(--bn-font-body, inherit);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.zhaod-cat-v2 .featured-card__meta i {
    margin-right: 3px;
    opacity: 0.8;
}

.zhaod-cat-v2 .featured-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.zhaod-cat-v2 .featured-card__meta svg {
    flex-shrink: 0;
    opacity: 0.8;
}


/* ============================================================
   6. Toolbar — Filter wrapper + view toggle + sticky behaviour
   ============================================================ */

.zhaod-cat-v2 .cat-toolbar-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

.zhaod-cat-v2 .cat-toolbar {
    position: relative;
    margin-top: var(--cat-section-pad);
    border-top: 1px solid var(--bn-hairline-on-light, #f0eee6);
    border-bottom: 1px solid var(--bn-hairline-on-light, #f0eee6);
    background: var(--bn-canvas-light, #f5f4ed);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 40;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar {
    border-top-color: var(--bn-hairline-on-dark, #1e2329);
    border-bottom-color: var(--bn-hairline-on-dark, #1e2329);
    background: var(--bn-canvas-dark, #0b0e11);
}

.zhaod-cat-v2 .cat-toolbar.is-stuck {
    position: sticky;
    top: var(--cat-header-offset, 64px);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 1px 0 0 var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar.is-stuck {
    background: rgba(11, 14, 17, 0.78);
    box-shadow: 0 1px 0 0 var(--bn-hairline-on-dark, #1e2329);
}

.zhaod-cat-v2 .cat-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--cat-toolbar-h);
    padding: 8px 0;
}

.zhaod-cat-v2 .cat-toolbar__filters {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zhaod-cat-v2 .cat-toolbar__filters::-webkit-scrollbar {
    display: none;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-warp {
    display: block !important;
    margin: 0;
    padding: 0;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-warp > .container {
    padding: 0;
    max-width: none;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-item {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 16px 0 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-item:last-child {
    margin-right: 0;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-name {
    font-family: var(--bn-font-body, inherit);
    font-size: 12px;
    font-weight: 500;
    color: var(--bn-muted, #6b6b6b);
    white-space: nowrap;
    margin-right: 4px;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-name i {
    margin-right: 4px;
    opacity: 0.7;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-link a {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--bn-font-body, inherit);
    font-size: 13px;
    color: var(--bn-muted-strong, #4b5563);
    text-decoration: none;
    background: transparent;
    transition: color 0.18s ease, background-color 0.18s ease;
    white-space: nowrap;
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-link a:hover {
    color: var(--bn-ink, #141413);
    background: var(--bn-surface-soft-light, #faf9f5);
}

.zhaod-cat-v2 .cat-toolbar__filters .filter-link.active a {
    color: #fff;
    background: var(--cat-tone);
    font-weight: 500;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar__filters .filter-link a {
    color: var(--bn-muted-strong, #b0b8c1);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar__filters .filter-link a:hover {
    color: var(--bn-on-dark, #eaecef);
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar__filters .filter-link.active a {
    color: #0b0e11;
    background: var(--cat-tone);
}

.zhaod-cat-v2 .cat-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.zhaod-cat-v2 .cat-toolbar .result-count {
    font-family: var(--bn-font-body, inherit);
    font-size: 12px;
    color: var(--bn-muted, #6b6b6b);
    white-space: nowrap;
}

.zhaod-cat-v2 .cat-toolbar .result-count b {
    font-family: var(--bn-font-number, inherit);
    font-weight: 600;
    color: var(--bn-ink, #141413);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-toolbar .result-count b {
    color: var(--bn-on-dark, #eaecef);
}

.zhaod-cat-v2 .view-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bn-surface-soft-light, #faf9f5);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    border-radius: 8px;
    padding: 2px;
    gap: 1px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .view-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--bn-hairline-on-dark, #1e2329);
}

.zhaod-cat-v2 .view-toggle button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 9px;
    border-radius: 6px;
    color: var(--bn-muted, #6b6b6b);
    cursor: pointer;
    line-height: 1;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.zhaod-cat-v2 .view-toggle button:hover {
    color: var(--bn-ink, #141413);
}

.zhaod-cat-v2 .view-toggle button.is-active {
    color: var(--bn-ink, #141413);
    background: var(--bn-on-dark, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .view-toggle button:hover {
    color: var(--bn-on-dark, #eaecef);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .view-toggle button.is-active {
    color: var(--bn-on-dark, #eaecef);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

.zhaod-cat-v2 .view-toggle button i {
    font-size: 13px;
}


/* ============================================================
   7. Posts container — body padding for V2 layout
   ============================================================ */

.zhaod-cat-v2 main,
.zhaod-cat-v2 .site-main {
    background: var(--bn-canvas-light, #f5f4ed);
}

[data-bs-theme="dark"] .zhaod-cat-v2 main,
[data-bs-theme="dark"] .zhaod-cat-v2 .site-main {
    background: var(--bn-canvas-dark, #0b0e11);
}

.zhaod-cat-v2 .cat-posts-section {
    padding: var(--cat-section-pad) 0;
}

.zhaod-cat-v2 .posts-warp {
    gap: var(--cat-grid-gap);
    margin: 0;
}

/* ============================================================
   8. View modes — grid (default), list, compact
   ============================================================ */

/* GRID view — default 4 columns at xl, scaling down via Bootstrap row-cols-* */
.zhaod-cat-v2 .posts-warp[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--cat-grid-gap);
}

.zhaod-cat-v2 .posts-warp[data-view="grid"] .col {
    width: 100% !important;
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
}

/* LIST view — 1/3 image + 2/3 text */
.zhaod-cat-v2 .posts-warp[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .col {
    width: 100% !important;
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .posts-warp[data-view="list"] .col {
    border-bottom-color: var(--bn-hairline-on-dark, #1e2329);
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .col:last-child {
    border-bottom: 0;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal {
    display: grid !important;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 20px;
    padding: 18px 0;
    align-items: center;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-media-wrap {
    grid-column: 1;
    aspect-ratio: 16 / 10;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-media-wrap img {
    aspect-ratio: 16 / 10 !important;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-wrapper {
    grid-column: 2;
    padding: 0 !important;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-title {
    font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 6px !important;
}

.zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-desc-list {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--bn-muted-strong, #4b5563);
    font-size: 13px;
    line-height: 1.55;
    margin: 4px 0 8px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-desc-list {
    color: var(--bn-muted-strong, #b0b8c1);
}

/* COMPACT view — single line per post */
.zhaod-cat-v2 .posts-warp[data-view="compact"] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .col {
    width: 100% !important;
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .posts-warp[data-view="compact"] .col {
    border-bottom-color: var(--bn-hairline-on-dark, #1e2329);
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .col:last-child {
    border-bottom: 0;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal {
    display: grid !important;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .entry-media-wrap,
.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .post-num,
.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .entry-cat-dot,
.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .time-pulse {
    display: none !important;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal::before {
    content: counter(post-counter, decimal-leading-zero);
    counter-increment: post-counter;
    display: block;
    font-family: var(--bn-font-number, inherit);
    font-size: 13px;
    font-weight: 500;
    color: var(--bn-muted, #6b6b6b);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] {
    counter-reset: post-counter;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .entry-wrapper {
    padding: 0 !important;
    min-width: 0;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .entry-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 1 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
}

.zhaod-cat-v2 .posts-warp[data-view="compact"] .post-item.grid-minimal .entry-meta-inline {
    grid-column: 3;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: 12px;
    font-size: 12px;
}


/* ============================================================
   9. Card meta upgrades (number, time-pulse, read-time)
   ============================================================ */

.zhaod-cat-v2 .post-item.grid-minimal {
    position: relative;
    --i: 0;
    animation: cat-card-rise 0.45s var(--cat-ease) both;
    animation-delay: calc(var(--i) * var(--cat-anim-stagger));
}

.zhaod-cat-v2 .post-item.grid-minimal .post-num {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    font-family: var(--bn-font-number, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(20, 20, 19, 0.5);
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.zhaod-cat-v2 .post-item.grid-minimal .time-pulse {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    pointer-events: none;
}

.zhaod-cat-v2 .post-item.grid-minimal[data-time-group="today"] .time-pulse {
    background: var(--cat-tone);
    box-shadow: 0 0 0 3px rgba(var(--cat-tone-rgb), 0.25);
    animation: cat-pulse 2s ease-in-out infinite;
}

.zhaod-cat-v2 .post-item.grid-minimal[data-time-group="week"] .time-pulse {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}

.zhaod-cat-v2 .post-item.grid-minimal[data-time-group="month"] .time-pulse {
    display: none;
}

.zhaod-cat-v2 .post-item.grid-minimal[data-time-group="older"] .time-pulse {
    display: none;
}

.zhaod-cat-v2 .post-item.grid-minimal .meta-read i {
    margin-right: 3px;
}

.zhaod-cat-v2 .post-item.grid-minimal .entry-meta-inline span svg,
.zhaod-cat-v2 .post-item.grid-minimal .meta-read svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    flex-shrink: 0;
}

/* Optional: hover ring uses tone color (only on grid view) */
.zhaod-cat-v2 .posts-warp[data-view="grid"] .post-item.grid-minimal:hover .entry-media-wrap {
    box-shadow: 0 0 0 1px var(--cat-tone);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .posts-warp[data-view="grid"] .post-item.grid-minimal:hover .entry-media-wrap {
    box-shadow: 0 0 0 1px var(--cat-tone);
}

.zhaod-cat-v2 .posts-warp[data-view="grid"] .post-item.grid-minimal:hover .entry-title a {
    color: var(--cat-tone);
}


/* ============================================================
   10. Empty state + skeleton + load-more
   ============================================================ */

.zhaod-cat-v2 .cat-empty {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
    border: 1px dashed var(--bn-hairline-on-light, #f0eee6);
    border-radius: var(--cat-card-radius);
    background: var(--bn-surface-soft-light, #faf9f5);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-empty {
    border-color: var(--bn-hairline-on-dark, #1e2329);
    background: rgba(255, 255, 255, 0.02);
}

.zhaod-cat-v2 .cat-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--cat-tone-soft);
    color: var(--cat-tone);
    font-size: 28px;
}

.zhaod-cat-v2 .cat-empty__title {
    font-family: var(--bn-font-display, inherit);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bn-ink, #141413);
    margin: 0 0 8px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-empty__title {
    color: var(--bn-on-dark, #eaecef);
}

.zhaod-cat-v2 .cat-empty__desc {
    font-size: 14px;
    color: var(--bn-muted, #6b6b6b);
    margin: 0 0 18px;
}

.zhaod-cat-v2 .cat-empty__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.zhaod-cat-v2 .cat-empty__chips a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bn-on-dark, #fff);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    font-size: 13px;
    color: var(--bn-ink, #141413);
    text-decoration: none;
    transition: all 0.18s ease;
}

.zhaod-cat-v2 .cat-empty__chips a:hover {
    border-color: var(--cat-tone);
    color: var(--cat-tone);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .cat-empty__chips a {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--bn-hairline-on-dark, #1e2329);
    color: var(--bn-on-dark, #eaecef);
}

/* Skeleton card */
.zhaod-cat-v2 .skeleton-card {
    border-radius: var(--cat-card-radius);
    overflow: hidden;
}

.zhaod-cat-v2 .skeleton-card__media,
.zhaod-cat-v2 .skeleton-card__line {
    background: linear-gradient(
        90deg,
        var(--bn-hairline-on-light, #f0eee6) 0%,
        var(--bn-surface-soft-light, #faf9f5) 50%,
        var(--bn-hairline-on-light, #f0eee6) 100%
    );
    background-size: 200% 100%;
    animation: cat-shimmer 1.4s linear infinite;
    border-radius: 8px;
}

[data-bs-theme="dark"] .zhaod-cat-v2 .skeleton-card__media,
[data-bs-theme="dark"] .zhaod-cat-v2 .skeleton-card__line {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
}

.zhaod-cat-v2 .skeleton-card__media {
    aspect-ratio: 4 / 3;
    margin-bottom: 12px;
}

.zhaod-cat-v2 .skeleton-card__line {
    height: 12px;
    margin-bottom: 8px;
}

.zhaod-cat-v2 .skeleton-card__line--w70 { width: 70%; }
.zhaod-cat-v2 .skeleton-card__line--w50 { width: 50%; }

/* Skeleton column wraps a grid cell — collapse it gracefully in list/compact views */
.zhaod-cat-v2 .posts-warp[data-view="list"] .cat-skel-col,
.zhaod-cat-v2 .posts-warp[data-view="compact"] .cat-skel-col {
    display: none;
}


/* ============================================================
   11. Load more button + pagination wrapper
   ============================================================ */

.zhaod-cat-v2 .cat-pager-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.zhaod-cat-v2 .load-more {
    appearance: none;
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
    background: var(--bn-on-dark, #fff);
    color: var(--bn-ink, #141413);
    font-family: var(--bn-font-body, inherit);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s var(--cat-ease);
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.zhaod-cat-v2 .load-more:hover:not(:disabled) {
    color: var(--cat-tone);
    border-color: var(--cat-tone);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--cat-tone-rgb), 0.15);
}

.zhaod-cat-v2 .load-more:active:not(:disabled) {
    transform: translateY(0);
}

.zhaod-cat-v2 .load-more.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.zhaod-cat-v2 .load-more.is-loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 100%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: cat-spin 0.7s linear infinite;
}

.zhaod-cat-v2 .load-more.is-end {
    pointer-events: none;
    opacity: 0.55;
    color: var(--bn-muted, #6b6b6b);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .load-more {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--bn-hairline-on-dark, #1e2329);
    color: var(--bn-on-dark, #eaecef);
}

[data-bs-theme="dark"] .zhaod-cat-v2 .load-more:hover:not(:disabled) {
    color: var(--cat-tone);
    border-color: var(--cat-tone);
    box-shadow: 0 4px 12px rgba(var(--cat-tone-rgb), 0.20);
}


/* ============================================================
   12. Animations
   ============================================================ */

@keyframes cat-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cat-card-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cat-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(var(--cat-tone-rgb), 0.25);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(var(--cat-tone-rgb), 0.05);
    }
}

@keyframes cat-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes cat-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .zhaod-cat-v2 *,
    .zhaod-cat-v2 *::before,
    .zhaod-cat-v2 *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   13. Touch / hover-less devices
   ============================================================ */

@media (hover: none) {
    .zhaod-cat-v2 .cat-hero:hover .cat-hero__icon {
        transform: none;
    }
    .zhaod-cat-v2 .featured-card:hover {
        transform: none;
    }
    .zhaod-cat-v2 .featured-card:hover .featured-card__img {
        transform: none;
    }
}


/* ============================================================
   14. Responsive breakpoints
   ============================================================ */

/* ≥ 1400px — XL: keep max grid cap */
@media (min-width: 1400px) {
    .zhaod-cat-v2 .posts-warp[data-view="grid"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 992-1399.98px — LG */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .zhaod-cat-v2 .posts-warp[data-view="grid"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 768-991.98px — MD: featured 2+1 instead of 1+2 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .zhaod-cat-v2 .posts-warp[data-view="grid"] {
        grid-template-columns: repeat(3, 1fr);
    }
    .zhaod-cat-v2 .cat-featured__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
    }
    .zhaod-cat-v2 .featured-card--lg {
        grid-row: 1;
        grid-column: span 2;
        aspect-ratio: 21 / 9;
    }
    .zhaod-cat-v2 .featured-card:not(.featured-card--lg) {
        aspect-ratio: 4 / 3;
    }
    .zhaod-cat-v2 .cat-toolbar__filters .filter-name {
        display: none;
    }
}

/* 480-767.98px — SM */
@media (max-width: 767.98px) {
    .zhaod-cat-v2 .cat-hero {
        padding-top: clamp(1.25rem, 4vw, 2rem);
    }
    .zhaod-cat-v2 .cat-hero__head {
        grid-template-columns: 56px 1fr;
        gap: 14px;
    }
    .zhaod-cat-v2 .cat-hero__icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
    .zhaod-cat-v2 .cat-hero__title {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }
    .zhaod-cat-v2 .cat-hero__desc {
        font-size: 14px;
    }
    .zhaod-cat-v2 .cat-hero__stats {
        font-size: 12px;
    }

    .zhaod-cat-v2 .posts-warp[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .zhaod-cat-v2 .cat-featured__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        scrollbar-width: none;
        padding-bottom: 4px;
        min-height: auto;
    }
    .zhaod-cat-v2 .cat-featured__grid::-webkit-scrollbar {
        display: none;
    }
    .zhaod-cat-v2 .featured-card,
    .zhaod-cat-v2 .featured-card--lg {
        flex-shrink: 0;
        width: 78%;
        aspect-ratio: 16 / 10;
        scroll-snap-align: start;
        grid-row: auto;
        grid-column: auto;
    }

    .zhaod-cat-v2 .view-toggle button[data-view="compact"] {
        display: none;
    }

    .zhaod-cat-v2 .cat-toolbar__filters .filter-name {
        display: none;
    }

    .zhaod-cat-v2 .cat-toolbar.is-stuck {
        top: 0;
    }

    .zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal {
        grid-template-columns: 110px 1fr;
        gap: 12px;
        padding: 14px 0;
    }

    .zhaod-cat-v2 .posts-warp[data-view="list"] .post-item.grid-minimal .entry-desc-list {
        -webkit-line-clamp: 1;
    }
}

/* < 480px — XS: ultra-compact */
@media (max-width: 479.98px) {
    .zhaod-cat-v2 .posts-warp[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .zhaod-cat-v2 .cat-hero__head {
        grid-template-columns: 1fr;
    }
    .zhaod-cat-v2 .cat-hero__icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    .zhaod-cat-v2 .cat-toolbar .result-count {
        display: none;
    }
    .zhaod-cat-v2 .featured-card,
    .zhaod-cat-v2 .featured-card--lg {
        width: 88%;
    }
}