@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #f7f9fe;
    --surface: #ffffff;
    --surface-alt: #f1f3f8;
    --text: #363636;
    --text-secondary: rgba(60,60,67,0.8);
    --text-muted: #8c8c8c;
    --accent: #163bf2;
    --accent-dark: #1230cc;
    --accent-light: rgba(22,59,242,0.08);
    --accent-shadow: rgba(22,59,242,0.14);
    --primary: #163bf2;
    --primary-foreground: #ffffff;
    --border: #e3e8f7;
    --border-light: #e3e8f7;
    --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.05);
    --shadow: 0 8px 16px -4px rgba(44,45,48,0.05);
    --shadow-md: 0 8px 16px -4px rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.1);
    --shadow-primary: 0 8px 12px -3px rgba(22,59,242,0.14);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;
    --max-width: 1400px;
    --sidebar-width: 300px;
    --transition: 0.3s ease-in-out;

    /* anheyu token aliases — values copied verbatim from blog.anheyu.com :root */
    --background: #f7f9fe;
    --card: #ffffff;
    --muted: #f1f3f8;
    --foreground: #363636;
    --muted-foreground: #3c3c43cc;
    --anzhiyu-background: #f7f9fe;
    --anzhiyu-secondbg: #f1f3f8;
    --anzhiyu-card-bg: #ffffff;
    --anzhiyu-card-bg-grey: #f0f2f5;
    --anzhiyu-card-border: #e3e8f7;
    --anzhiyu-card-btn-bg: #edf0f7;
    --anzhiyu-fontcolor: #363636;
    --anzhiyu-secondtext: #3c3c43cc;
    --anzhiyu-white: #ffffff;
    --anzhiyu-white-op: #fff3;
    --anzhiyu-black-op: #0003;
    --anzhiyu-theme: var(--primary);
    --anzhiyu-main: var(--primary);
    --anzhiyu-main-op: #163bf224;
    --anzhiyu-main-op-deep: #163bf2de;
    --anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
    --anzhiyu-lighttext: var(--anzhiyu-main);
    --anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
    --anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
    --anzhiyu-border-color: #0505050f;
    --anzhiyu-scrollbar: #c8c8df66;
    --anzhiyu-maskbg: #fff9;
    --anzhiyu-ahoverbg: #f7f7fa;
    --anzhiyu-post-blockquote-bg: #fafcff;
    --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
    --anzhiyu-blue: #3e86f6;
    --anzhiyu-green: #57bd6a;
    --anzhiyu-orange: #ff953e;
    --anzhiyu-pink: #ff7c7c;
    --anzhiyu-purple: #7a60d2;
    --anzhiyu-red: #ff3842;
    --anzhiyu-gray: #999;
    --anzhiyu-gray-op: #9999992b;
    --anzhiyu-code-stress: var(--anzhiyu-main);
    --style-border: 1px solid var(--anzhiyu-card-border);
    --style-border-always: 1px solid var(--anzhiyu-card-border);
    --style-border-hover: 1px solid var(--anzhiyu-main);
    --style-border-dashed: 1px dashed var(--anzhiyu-main-op);
    --primary-op-light: #163bf20d;
    --anzhiyu-theme-op: var(--anzhiyu-main-op);
    --scrollbar: #c8c8df66;
    --scrollbar-hover: #c8c8df99;
    --hlnumber-color: #90a4ae80;
    --hltools-color: #90a4ae;
    --hltools-bg: var(--anzhiyu-secondbg);
    --md-theme-code-block-color: #a9b7c6;
}

html {
    scroll-behavior: smooth;
    /* Root scroller only: stops the rubber-band reveal of the light canvas above the dark article hero */
    overscroll-behavior-y: none;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Staggered animation delays for article cards */
.article-card:nth-child(1) { transition-delay: 0.05s; }
.article-card:nth-child(2) { transition-delay: 0.1s; }
.article-card:nth-child(3) { transition-delay: 0.15s; }
.article-card:nth-child(4) { transition-delay: 0.2s; }
.article-card:nth-child(5) { transition-delay: 0.25s; }
.article-card:nth-child(6) { transition-delay: 0.3s; }

a { color: var(--accent-dark); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

/* ===== HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1000;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.site-header.is-transparent {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Left section */
.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Logo icon button */
.logo-icon-wrapper {
    position: relative;
}

.logo-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    text-decoration: none;
    color: var(--text);
    position: relative;
    transition: all 0.3s ease;
    position: relative;
}

.logo-icon-btn .logo-default-icon {
    width: 22px;
    height: 22px;
    position: absolute;
    transition: opacity 0.3s ease;
}

.logo-icon-btn .logo-home-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #ffffff;
}

.logo-icon-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

.logo-icon-btn:hover .logo-default-icon {
    opacity: 0;
}

.logo-icon-btn:hover .logo-home-icon {
    opacity: 1;
}

/* Logo dropdown - show on hover */
.logo-icon-wrapper:hover .logo-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Logo text button */
.logo-text-btn {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    padding: 0 12px;
    height: 35px;
    line-height: 35px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.logo-text-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

/* Logo dropdown */
.logo-dropdown {
    position: absolute;
    top: 45px;
    left: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    min-width: 420px;
}

/* 触屏没有 hover、键盘也踩不到 :hover，这两个选择器让同一个下拉能被聚焦或点开 */
.logo-icon-wrapper:focus-within .logo-dropdown,
.logo-icon-wrapper.active .logo-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 420px 的固定宽度在窄屏上会从 left:0 直接顶穿视口，产生横向滚动 */
@media (max-width: 768px) {
    .logo-dropdown {
        min-width: 0;
        width: min(420px, calc(100vw - 24px));
    }
}

.logo-dropdown-section {
    margin-bottom: 16px;
}

.logo-dropdown-section:last-child {
    margin-bottom: 0;
}

.logo-dropdown-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 0 4px;
    font-weight: 500;
}

.logo-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.logo-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.logo-dropdown-item:hover {
    background: var(--accent);
    color: #ffffff;
}

.logo-dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Center nav */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 35px;
}

.header-article-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.site-header.is-article.is-scrolled .header-nav {
    opacity: 0;
    visibility: hidden;
}

.site-header.is-article.is-scrolled .header-article-title {
    opacity: 1;
    visibility: visible;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 35px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.nav-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px 8px;
    border-radius: 30px;
}

.nav-menu-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 1.5px;
    padding: 0 14px;
    border-radius: 50px;
    transition: all 0.25s ease;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.nav-menu-title:hover {
    color: var(--primary-foreground);
    background: var(--accent);
}

/* Dropdown menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--accent);
    border-radius: 50px;
    padding: 6px 8px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px 0px;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-menu-item:hover .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* 同上：键盘 Tab 到栏目名、或触屏点开时也能展开 */
.nav-menu-item:focus-within .nav-dropdown,
.nav-menu-item.active .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.nav-menu-title:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 触屏上 hover 不再顺手展开，交给点击状态 */
@media (hover: none) {
    .logo-icon-wrapper:hover .logo-dropdown,
    .nav-menu-item:hover .nav-dropdown {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* 下拉是 356px 宽、以栏目名为中心展开的：在 375 屏上第一个菜单往左超出 35px、第二个往右超出 20px，
   最左边那个链接根本点不到。窄屏改成贴着导航条居中的竖排菜单卡片 */
@media (max-width: 768px) {
    .nav-menu-item {
        position: static;
    }
    .nav-dropdown {
        left: 50%;
        right: auto;
        width: min(240px, calc(100vw - 24px));
        transform: translateX(-50%);
        flex-direction: column;
        align-items: stretch;
        border-radius: 20px;
        padding: 8px;
        gap: 2px;
    }
    .nav-dropdown a {
        justify-content: center;
    }
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.2s ease;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a.active {
    background: var(--accent);
    color: #ffffff;
}

.nav-dropdown a svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* Right section */
.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-btn {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    color: #ffffff;
    background: var(--accent);
}

.nav-btn svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Transparent state - white text */
.site-header.is-transparent .back-home-btn,
.site-header.is-transparent .site-logo,
.site-header.is-transparent .logo-icon-btn,
.site-header.is-transparent .logo-text-btn,
.site-header.is-transparent .nav-menu-title,
.site-header.is-transparent .nav-btn {
    color: #ffffff;
}

.site-header.is-transparent .console-icon {
    background: #ffffff;
}

.site-header.is-transparent .back-home-btn:hover,
.site-header.is-transparent .logo-icon-btn:hover,
.site-header.is-transparent .logo-text-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.site-header.is-transparent .nav-menu-title:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.site-header.is-transparent .nav-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

/* Body padding for fixed header */
body {
    padding-top: 60px;
}

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #163bf2, #4584ff);
    z-index: 1001;
    transition: width 0.1s;
    width: 0%;
}

/* ===== NOTICE BAR (1:1 EssayBar) ===== */
.notice-bar {
    display: block;
    max-width: var(--max-width);
    margin: 0.5rem auto 0;
    padding: 0 24px;
    color: inherit;
    text-decoration: none;
}

.notice-inner {
    height: 50px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 16px -4px rgba(0,0,0,0.05);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--text);
    transition: all 0.3s;
}

.notice-bar:hover .notice-inner,
.notice-bar:focus-visible .notice-inner {
    border-color: var(--accent-dark);
    box-shadow: 0 8px 20px -4px var(--accent-shadow);
}

.notice-label {
    color: var(--text);
    align-items: center;
    margin-right: 1rem;
    font-size: 2rem;
    line-height: 1;
    display: flex;
    text-decoration: none;
    transition: all .3s;
}

.notice-label-icon {
    stroke: currentColor;
    stroke-width: 20px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

.notice-carousel {
    flex: 1;
    min-width: 0;
    height: 30px;
    overflow: hidden;
}

.notice-text {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: var(--text);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    transition: color .3s;
}

.notice-text:hover { color: var(--accent); }

.notice-arrow-btn {
    color: var(--text);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    display: flex;
}

.notice-bar:hover .notice-text,
.notice-bar:hover .notice-label,
.notice-bar:hover .notice-arrow-btn { color: var(--accent-dark); }

/* ===== NEW HERO - Reference: two row layout ===== */
.hero-new {
    max-width: var(--max-width);
    margin: 0.5rem auto 0;
    padding: 0 24px;
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.hero-left {
    flex: 1;
    min-width: 0;
    height: 340px;
    display: flex;
    flex-direction: column;
}

.hero-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 16px -4px rgba(0,0,0,0.05);
    width: 100%;
    height: 76%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

/* Hover overlay card - independent blue card that slides in on hover */
.hero-hover-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    padding-left: 3.5rem;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.hero-banner:hover .hero-hover-card {
    opacity: 1;
    transform: translateX(0);
}

.card-icon {
    stroke: #fff;
    stroke-width: 2.5;
    width: 90px;
    height: 90px;
    margin-right: 1.5rem;
}

.card-text {
    font-size: 3.25rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    letter-spacing: 0.03em;
}

.card-arrow {
    font-size: 4.5rem;
    font-weight: 800;
}

.hero-title {
    position: absolute;
    top: 2.9rem;
    left: 3rem;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.hero-title-big {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.hero-title-small {
    color: var(--text-muted);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 12px;
    line-height: 1;
}

/* Scrolling icons strip - reference .skillsTagsGroupAll: rotated -30deg, 60s infinite scroll */
.hero-icons-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 7rem;
    display: flex;
    transform: rotate(-30deg) scale(1);
    z-index: 1;
    transition: all 0.3s;
}

.hero-icons-track {
    display: flex;
    flex-wrap: nowrap;
    animation: 60s linear infinite heroRowUp;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes heroRowUp {
    0% { transform: translate(0); }
    100% { transform: translate(-50%); }
}

.hero-icon-pair {
    flex-shrink: 0;
    margin-left: 1rem;
}

.hero-icon {
    color: #fff;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    font-size: 66px;
    font-weight: 700;
    display: flex;
    box-shadow: 0 2px 16px -3px rgba(0,0,0,0.15);
}

.hero-icon svg {
    object-fit: contain;
    width: 60px;
    height: 60px;
}

.hero-icon-offset {
    margin-top: 1rem;
    transform: translate(-60px);
}

/* 与参考站一致：窄屏时图标墙虚化退到背景 */
@media (max-width: 768px) {
    .hero-icons-strip { opacity: .1; filter: blur(8px); }
}

/* Category buttons inside left section (below banner) */
.hero-categories {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cat-item {
    flex: 1;
    border-radius: 12px;
    padding: 1.5rem 1.2rem;
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: 200% !important;
    transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
    position: relative;
    overflow: hidden;
}

.cat-item:hover {
    flex: 2;
}

.cat-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.cat-watermark {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) scale(1.3);
    width: 55px;
    height: 55px;
    opacity: 0.08;
    filter: blur(2px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    fill: rgba(255, 255, 255, 0.9);
}

.cat-item:hover .cat-watermark {
    opacity: 0.35;
    filter: blur(0);
    transform: translateY(-50%) scale(1.0);
}

.cat-item.blue { background: linear-gradient(to right, #358BFF, #15C6FF); }
.cat-item.orange { background: linear-gradient(to right, #FF6655, #FFBF37); }
.cat-item.teal { background: linear-gradient(to right, #18E7AE, #1EEBEB); }

/* Right card - Theme-AnZhiYu recommendation + hello Lottie stroke */
.hero-right {
    flex: 1;
    min-width: 0;
    height: 340px;
}

.home-top-right {
    flex: 1;
    min-width: 0;
    height: 340px;
}

.top-group {
    display: flex;
    flex-wrap: wrap;
    height: 340px;
    position: relative;
}

.today-card {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    text-decoration: none;
}

.today-card-info {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
    max-width: 60%;
    color: rgba(0, 0, 0, 0.8);
    transition: 0.3s;
}

.today-card-tips {
    font-size: 12px;
    line-height: 1.375;
    opacity: 0.8;
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
}

.today-card-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    color: rgba(3, 145, 150, 0.82);
    transition: all 0.3s;
}

.hello-lottie-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    overflow: visible;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background-image: linear-gradient(90deg,
        rgba(224, 245, 240, 0.85) 0%, rgba(226, 245, 242, 0.85) 5%, rgba(228, 245, 244, 0.85) 10%,
        rgba(230, 245, 246, 0.85) 15%, rgba(232, 245, 248, 0.85) 20%, rgba(234, 245, 250, 0.85) 25%,
        rgba(236, 245, 252, 0.85) 30%, rgba(238, 245, 254, 0.85) 35%, rgba(240, 245, 255, 0.85) 40%,
        rgba(242, 245, 255, 0.85) 45%, rgba(244, 245, 255, 0.85) 50%, rgba(246, 245, 255, 0.85) 55%,
        rgba(248, 245, 255, 0.85) 60%, rgba(250, 245, 255, 0.85) 65%, rgba(252, 245, 255, 0.85) 70%,
        rgba(254, 245, 255, 0.85) 75%, rgba(255, 245, 255, 0.85) 80%, rgba(255, 245, 253, 0.85) 85%,
        rgba(255, 245, 251, 0.85) 90%, rgba(255, 245, 249, 0.85) 95%, rgba(255, 245, 247, 0.85) 100%);
}

.hello-lottie-animation {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.hello-lottie-animation svg {
    width: 100%;
    height: 100%;
}

.hello-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
        helloTrim 2.29s cubic-bezier(0.302, 0.14, 0.665, 1) 0.21s forwards,
        helloStrokeWidth 2.29s linear 0.21s forwards;
}

@keyframes helloTrim {
    to { stroke-dashoffset: 0; }
}

@keyframes helloStrokeWidth {
    0% { stroke-width: 9; }
    17.5% { stroke-width: 10; }
    100% { stroke-width: 9; }
}

.banner-button-group {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 5;
    display: flex;
    transition: 0.3s;
}

.banner-button {
    width: 125px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: rgba(0, 0, 0, 0.05) 0 8px 16px -4px;
    color: rgb(215, 83, 126);
    transform: translateZ(0);
    transition: 0.3s;
    cursor: pointer;
}

.banner-button svg {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.banner-button-text {
    font-size: 16px;
}

.banner-button:hover {
    color: rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.1);
}

/* ===== CATEGORY NAV (1:1 categoryBar/catalogBar) ===== */
.categoryBarContainer { width: 100%; margin-bottom: .5rem; display: flex; }
.categoryBar { white-space: nowrap; background: var(--anzhiyu-card-bg); border: var(--style-border); opacity: 1; visibility: visible; border-radius: 12px; align-items: center; width: 100%; height: 50px; padding: .5rem 10px; transition: all .3s; display: flex; overflow: hidden; }
.catalogBar { scrollbar-width: none; flex-grow: 1; align-items: center; display: flex; overflow-x: auto; transform: translate(-1px); }
.catalogBar::-webkit-scrollbar { display: none; }
.catalogList { gap: 5px; display: flex; }
.catalogListItem { cursor: pointer; color: var(--anzhiyu-fontcolor); font-weight: 600; text-decoration: none; }
.catalogListItem span { border-radius: 8px; padding: 2px 12px; transition: all .3s; display: block; }
.catalogListItem:hover span { background: var(--anzhiyu-secondbg); }
.catalogListItem.select span { color: var(--anzhiyu-white); background: var(--anzhiyu-main); }
.catalogMore { color: var(--anzhiyu-fontcolor); white-space: nowrap; border-radius: 8px; margin-left: 1rem; padding: 2px 12px; font-weight: 700; text-decoration: none; transition: all .3s; }
.catalogMore:hover { color: var(--anzhiyu-main); background: var(--anzhiyu-secondbg); }
@media (max-width: 768px) {
    .catalogMore { display: none; }
    .categoryBar { background: 0 0; border: none; padding: 0 2px; }
    .categoryBar .catalogBar, .categoryBar .catalogBar .catalogList { height: 100%; }
    .categoryBar .catalogBar .catalogListItem { justify-content: center; align-items: center; display: flex; }
    .categoryBar .catalogBar .catalogListItem span { background: var(--anzhiyu-card-bg); border: var(--style-border-always); border-radius: 30px; align-items: center; height: 80%; padding: 0 19px; font-size: 14px; display: flex; }
    .categoryBar .catalogBar .catalogListItem.select span { background: var(--anzhiyu-main); }
    .categoryBar .catalogBar .catalogListItem span:hover { background: var(--anzhiyu-main); color: var(--anzhiyu-white); }
}


/* ===== HOME MAIN FULL WIDTH ===== */
.home-main-full {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ===== FULL WIDTH ARTICLE CARD ===== */
.article-card-full {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.article-card-full.revealed {
    opacity: 1;
    transform: translateY(0);
}

.article-card-full:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.article-card-full:hover .card-cover-img {
    transform: scale(1.03);
}

.card-full-cover {
    height: 280px;
    overflow: hidden;
    background: #0066ff;
}

.card-full-cover .card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-full-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.card-full-status {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.status-new {
    color: #0066ff;
    font-weight: 600;
}

.status-unread {
    color: var(--text-muted);
}

.card-full-body h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.card-full-body h3 a {
    color: var(--text);
}

.card-full-body h3 a:hover {
    color: #0066ff;
    text-decoration: none;
}

.card-full-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
}

/* Staggered animation delays */
.article-card-full:nth-child(1) { transition-delay: 0.05s; }
.article-card-full:nth-child(2) { transition-delay: 0.1s; }
.article-card-full:nth-child(3) { transition-delay: 0.15s; }
.article-card-full:nth-child(4) { transition-delay: 0.2s; }
.article-card-full:nth-child(5) { transition-delay: 0.25s; }
.article-card-full:nth-child(6) { transition-delay: 0.3s; }

/* ===== HOME LAYOUT (with sidebar) ===== */
.home-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: .5rem 1.5rem 1rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: .625rem;
    align-items: start;
}

.home-main {
    min-width: 0;
}

/* ===== HOME ARTICLE CARDS (1:1 FeedArticleCard recentPostItem) ===== */
.article-grid-new {
    flex-flow: wrap;
    justify-content: space-between;
    gap: .625rem;
    display: flex;
}

.recentPostItem {
    cursor: pointer;
    background: var(--anzhiyu-card-bg);
    border: var(--style-border);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 12px;
    flex-direction: row;
    align-items: stretch;
    margin: 1rem 0;
    transition: all .3s ease-in-out;
    display: flex;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: .6s cubic-bezier(.25,.46,.45,.94) forwards fadeInCard;
    animation-delay: calc(var(--animation-order, 0) * .1s);
}

.recentPostItem:active { transform: scale(.97); }
.recentPostItem:hover { border: var(--style-border-hover); box-shadow: var(--anzhiyu-shadow-main); }
.recentPostItem:hover .postBg { filter: brightness(.82); transform: scale(1.03); }
.recentPostItem:hover .articleTitle { color: var(--anzhiyu-main); }

.postCover { flex-shrink: 0; width: 45%; min-height: 180px; position: relative; overflow: hidden; }
.coverWrapper { display: block; position: absolute; inset: 0; }
.postBg { object-fit: cover; opacity: 0; border-radius: 0; width: 100%; height: 100%; transition: opacity .6s, transform .6s, filter .6s; position: absolute; top: 0; left: 0; }
.postBg.lazyLoaded { opacity: 1; }
.card-thumb-placeholder { background: linear-gradient(135deg, #4584ff 0%, #cf0db9 100%); }

.recentPostInfo { flex-direction: column; flex-grow: 1; width: 55%; min-width: 0; padding: 2rem; display: flex; }

.articleTitle {
    color: var(--anzhiyu-fontcolor);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: all .3s;
    display: -webkit-box;
    overflow: hidden;
}
.articleTitle a { color: inherit; text-decoration: none; }

.recentPostItem.doubleColumnItem { flex-direction: column; align-items: flex-start; width: calc(50% - .3125rem); height: auto; margin: 0; }
.recentPostItem.doubleColumnItem .postCover { border-radius: 8px 8px 0 0; width: 100%; height: 225px; }
.recentPostItem.doubleColumnItem .recentPostInfo { flex-direction: column; flex-grow: 1; width: 100%; padding: 18px 32px; display: flex; }
.recentPostItem.doubleColumnItem .recentPostInfoTop .articleTitle { margin-top: .5rem; font-size: 1.3rem; }

.recentPostInfoTopTips { flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; margin-bottom: .5rem; display: flex; overflow: hidden; }
.recentPostInfoTopTips.legacy { height: 20px; color: var(--anzhiyu-secondtext); text-overflow: ellipsis; white-space: nowrap; gap: 0; font-size: .75rem; display: block; }
.categoryTip { color: var(--anzhiyu-secondtext); cursor: pointer; margin-right: 4px; font-size: .75rem; transition: color .3s; display: inline; }
.categoryTip:hover { color: var(--anzhiyu-main); }
.unvisitedPost, .newPost { color: var(--anzhiyu-secondtext); margin-right: 4px; font-size: .75rem; display: inline; position: relative; }

.articleMetaWrap { width: 100%; color: var(--anzhiyu-secondtext); justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; font-size: .8rem; display: flex; }
.tags { text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; margin-left: -6px; padding: 4px 0; display: block; overflow: hidden; }
.articleMetaTags { color: var(--anzhiyu-secondtext); cursor: pointer; border-radius: 4px; align-items: center; gap: 2px; margin: 0 2px; padding: 3px 6px; text-decoration: none; transition: all .2s; display: inline-flex; overflow: hidden; }
.articleMetaTags:hover { color: var(--anzhiyu-white); background-color: var(--anzhiyu-main); }
.tagIcon { flex-shrink: 0; font-size: .75rem; }
.postMetaDate { white-space: nowrap; flex-shrink: 0; }

@media screen and (min-width:769px) and (max-width:992px) {
    .recentPostItem, .recentPostItem.doubleColumnItem { flex-direction: row; align-items: stretch; width: 100%; }
    .recentPostItem .postCover, .recentPostItem.doubleColumnItem .postCover { border-radius: 0; width: 40%; height: auto; min-height: 180px; }
    .recentPostItem .recentPostInfo, .recentPostItem.doubleColumnItem .recentPostInfo { width: 60%; height: 100%; padding: 2rem; }
    .recentPostItem.doubleColumnItem .recentPostInfoTop .articleTitle { font-size: 1.5rem; }
}

@media (max-width:768px) {
    .recentPostItem, .recentPostItem.doubleColumnItem { flex-direction: column; width: 100%; height: auto; }
    .recentPostItem .postCover, .recentPostItem.doubleColumnItem .postCover { width: 100%; height: 200px; }
    .recentPostItem .recentPostInfo, .recentPostItem.doubleColumnItem .recentPostInfo { width: 100%; padding: 1rem; }
    .recentPostItem .articleTitle, .recentPostItem.doubleColumnItem .articleTitle { font-size: 1.2rem; }
    .recentPostInfoTopTips { gap: 4px; }
}

/* ===== HOME SIDEBAR ===== */
.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-width: 0;
    /* .home-layout 用 align-items:start 让主栏不被拉伸，但侧栏必须占满整行高度，
       否则 .stickyContainer 没有滚动余量，position:sticky 永远不会吸住 */
    align-self: stretch;
}

.sidebar-profile, .card-info {
    contain: layout;
    border: none;
    border-radius: 12px;
    padding: 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
}

.sidebar-profile::before, .card-info::before {
    content: "";
    background-image: linear-gradient(-25deg, #163bf2, rgba(22, 59, 242, 0.87), #163bf2, rgba(22, 59, 242, 0.87));
    background-position: 50% center;
    background-repeat: no-repeat;
    will-change: background-position;
    background-size: 400%;
    width: 100%;
    height: 100%;
    animation: profileGradient 15s ease infinite;
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes profileGradient {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.profile-content {
    height: 320px;
    min-height: 320px;
    padding: 1rem 1.2rem;
    position: relative;
}

.profile-welcome {
    width: fit-content;
    color: #fff;
    text-align: left;
    background: #fff3;
    border-radius: 12px;
    margin: auto;
    padding: 2px 8px;
    font-size: 12px;
    transition: 0.3s;
}

.profile-welcome:hover {
    color: #363636;
    background: #fff;
    transform: scale(1.15);
}

.profile-welcome:active {
    opacity: 0.8;
    transform: scale(0.8);
}

.profile-avatar-img {
    user-select: none;
    transform-origin: center bottom;
    justify-content: center;
    width: 118px;
    height: 118px;
    margin: 45px auto;
    transition: 0.3s cubic-bezier(0.69, 0.39, 0, 1.21);
    display: flex;
    position: relative;
}

.profile-avatar-img img {
    object-fit: cover;
    border: 5px solid #fff;
    opacity: 0;
    background: #f1f3f8;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: opacity 0.6s;
    animation: avatarFadeIn 0.6s ease forwards;
}

@keyframes avatarFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.profile-status {
    background-color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    transition: 0.3s 0.2s;
    display: flex;
    position: absolute;
    bottom: 2px;
    right: 2px;
    overflow: hidden;
    transform: scale(1);
}

.profile-status img {
    opacity: 0;
    border-radius: 0;
    width: 26px;
    height: 26px;
    transition: opacity 0.6s;
    animation: statusFadeIn 0.6s ease 0.2s forwards;
}

@keyframes statusFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.sidebar-profile:hover .profile-avatar-img,
.sidebar-profile:hover .profile-status,
.card-info:hover .profile-avatar-img,
.card-info:hover .profile-status {
    opacity: 0;
    transform: scale(0);
}

.profile-desc {
    width: 100%;
    color: #fff;
    opacity: 0;
    padding: 1rem 1.2rem;
    transition: 0.3s;
    position: absolute;
    top: 50px;
    left: 0;
}

.profile-desc div {
    color: rgba(255, 255, 255, 0.8);
    text-align: justify;
    margin: 0.6rem 0;
    line-height: 1.38;
}

.profile-desc b {
    color: #fff;
}

.sidebar-profile:hover .profile-desc,
.card-info:hover .profile-desc {
    opacity: 1;
}

.profile-bottom-group {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
}

.profile-bottom-left {
    text-decoration: none;
    color: inherit;
}

.profile-name {
    color: #fff;
    text-align: left;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.profile-subtitle {
    color: #fff;
    opacity: 0.6;
    font-size: 12px;
    line-height: 1;
    text-align: left;
}

.sidebar-wechat {
    position: relative;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #57bd6a;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.3s;
}

.sidebar-wechat::before {
    content: "";
    background-image: var(--blur-background);
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    transition: 0.2s cubic-bezier(0.45, 0.04, 0.43, 1.21);
    position: absolute;
    top: 0;
    left: 0;
}

.sidebar-wechat:hover::before {
    opacity: 0;
    transition: 0.3s ease-out;
    top: 100%;
}

.wechat-flip-wrapper {
    z-index: 1;
    perspective: 1000px;
    width: 235px;
    height: 110px;
    position: relative;
}

.wechat-flip-wrapper:hover .wechat-flip-content {
    transform: rotateY(180deg);
}

.wechat-flip-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 0.3s cubic-bezier(0, 0, 0, 1.29);
}

.wechat-face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wechat-face-back {
    transform: rotateY(180deg);
    box-sizing: border-box;
}

.wechat-desc {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ===== HOME SIDEBAR WIDGETS (1:1 Sidebar/StickyCards modules) ===== */
.stickyContainer { flex-direction: column; gap: 1rem; display: flex; position: sticky; top: calc(60px + .625rem); }
.cardWidget { background: var(--anzhiyu-card-bg); border: var(--style-border); border-radius: 12px; padding: 1rem; transition: border-color .3s; position: relative; overflow: hidden; }
.cardWidget:hover { border: var(--style-border-hover); }
.divider { background: none; border: 1px dashed var(--anzhiyu-main-op); height: 0; margin: 1rem 10px; display: flex; }
.cardTags, .cardContent { width: 100%; }
.cardTagCloud { flex-flow: wrap; gap: 4px; max-height: 360px; display: flex; position: relative; overflow: hidden; }
.cardTagCloud.isOverflow:after { background-image: linear-gradient(to top, var(--anzhiyu-card-bg), transparent); pointer-events: none; content: ""; height: 150px; position: absolute; bottom: 0; left: 0; right: 0; }
.tagLink { cursor: pointer; color: var(--anzhiyu-fontcolor); border-radius: 8px; padding: 0 .375rem; font-size: 1rem; line-height: normal; text-decoration: none; transition: all .2s; }
.tagLink.isHighlight { color: var(--anzhiyu-theme); font-weight: 700; }
.tagLink:hover { color: var(--anzhiyu-card-bg); background: var(--anzhiyu-lighttext); border-radius: 4px; box-shadow: var(--anzhiyu-shadow-theme); }
.tagLink sup { opacity: .6; margin-left: 2px; font-size: .7em; }
.cardArchives { width: 100%; }
.archiveList { flex-flow: wrap; justify-content: space-between; margin: 0; padding: 0; list-style: none; display: flex; }
.archiveItem { flex: 0 0 48%; width: 100%; }
.archiveLink { color: var(--anzhiyu-fontcolor); border: var(--style-border); border-radius: 8px; flex-direction: column; margin: 4px 0; padding: 3px 10px; text-decoration: none; transition: all .2s; display: flex; }
.archiveLink:hover { color: var(--anzhiyu-white); background-color: var(--anzhiyu-main); }
.archiveDate { flex: inherit; text-overflow: ellipsis; white-space: nowrap; opacity: .6; width: auto; font-size: 13px; line-height: normal; overflow: hidden; }
.archiveCountGroup { align-items: baseline; display: flex; }
.archiveCountGroup span:last-child { text-overflow: ellipsis; white-space: nowrap; width: fit-content; margin-left: 4px; overflow: hidden; }
.archiveCount { text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; font-weight: 700; line-height: 2; overflow: hidden; }
.cardWebinfo { width: 100%; padding-left: 10px; }
.webinfo { min-height: 3rem; padding: .2rem 0; }
.webinfoItem { justify-content: space-between; align-items: center; padding: 4px 0; font-size: .9rem; line-height: normal; display: flex; }
.webinfoItemTitle { color: var(--anzhiyu-fontcolor); align-items: center; gap: 8px; display: flex; }
.webinfoItemTitle svg { flex-shrink: 0; font-size: 1rem; }
.itemName { font-size: .9rem; }
.itemCount { color: var(--anzhiyu-fontcolor); font-weight: 600; }

/* ===== HERO (old) ===== */
.hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto 1rem;
}

.hero-title {
    opacity: 0;
    transform: translateY(20px);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    opacity: 0;
    animation: fadeInUp 0.8s 0.3s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tech Carousel */
.tech-carousel {
    overflow: hidden;
    margin: 2rem auto 0;
    max-width: 800px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tech-track {
    display: flex;
    gap: 2rem;
    width: max-content;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.tech-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.hero h1 .accent { color: var(--accent); }

.hero p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    max-width: 400px;
    margin: 0 auto;
}

.hero-stat .num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}

.hero-stat .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ===== MAIN LAYOUT ===== */
.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ===== ARTICLE GRID ===== */
.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.article-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
}

.article-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
    border-color: transparent;
}

.article-card:hover .card-cover-img {
    transform: scale(1.08);
}

.card-thumb-wrap {
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.card-thumb-wrap.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.card-thumb-wrap.blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.card-thumb-wrap.orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.card-thumb-wrap.pink { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.card-thumb-wrap.dark { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.card-thumb-wrap.teal { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }

.card-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-body { padding: 1.25rem 1.5rem 1.5rem; }

.card-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.card-body h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--accent-dark); text-decoration: none; }

.card-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ===== ARTICLE PAGE (1:1 blog.anheyu.com PostHeader / PostDetail / PostContent /
   PostCopyright / PostTagBar / PostPagination / PostPaginationFloat / PostSidebar /
   CardWechat / CardRecentPost / CardToc) ===== */

/* ---- content container + markdown typography ---- */
.post-content{color:var(--foreground);word-wrap:break-word;font-size:1rem;line-height:1.8}
:is(.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6){margin:1.5em 0 .8em;font-weight:700;line-height:1.4}
.post-content h1{font-size:1.75rem}
.post-content h2{padding-bottom:.5rem;font-size:1.5rem}
.post-content h3{font-size:1.25rem}
.post-content h4{font-size:1.125rem}
:is(.post-content h5,.post-content h6){font-size:1rem}
.post-content p{color:var(--anzhiyu-fontcolor,var(--foreground));text-align:left;letter-spacing:.6px;margin:24px 0;font-size:17px;font-weight:400;line-height:1.7}
.post-content a{border-bottom:dotted 2px var(--primary);font-family:inherit;font-weight:500;line-height:1.25rem;color:var(--anzhiyu-fontcolor,var(--foreground))!important;padding:0 .2rem!important;text-decoration:none!important;transition:all .2s!important}
.post-content a:hover:not(.btn-anzhiyu):not(.btn-item):not(.anzhiyu-tag-link){background:var(--primary);border-bottom-color:#0000;border-radius:.25rem;box-shadow:0 2px 8px #00000026;color:var(--anzhiyu-white,#fff)!important;text-decoration:none!important}
.post-content img{border-radius:8px;max-width:100%;height:auto;margin:1em 0;box-shadow:0 4px 12px #0000001a}
.post-content figure{text-align:center;width:100%;margin:20px auto}
.post-content figure img{border-radius:8px;max-width:100%;margin:0 auto;transition:all .3s;display:block}
.post-content figure figcaption{color:var(--muted-foreground);text-align:center;margin:0;padding:8px 16px;font-size:12px;line-height:1.6;transition:all .3s}
.post-content figure figcaption:empty{display:none}
.post-content figure:hover figcaption{color:var(--foreground);background:var(--card);border-color:var(--primary)}
.post-content img[class*=article-image]{max-width:100%;height:auto;box-shadow:none;border-radius:8px;display:block}
.post-content img[class*=image-align-left]{margin-left:0;margin-right:auto}
.post-content img[class*=image-align-center]{margin-left:auto;margin-right:auto}
.post-content img[class*=image-align-right]{margin-left:auto;margin-right:0}
.post-content pre{background-color:var(--muted);border-radius:8px;margin:1em 0;padding:1rem;font-size:.9rem;line-height:1.6;overflow-x:auto}
.post-content pre code{background-color:#0000;padding:0}
.post-content .md-editor-code{color:var(--md-theme-code-block-color);border:1px solid var(--border);border-radius:10px;margin:20px 0;font-size:12px;line-height:1;position:relative;overflow:hidden}
.post-content .md-editor-code.is-collapsed{overflow:hidden}
.post-content .md-editor-code.is-collapsed .code-expand-btn i{animation:1.2s infinite code-expand-key}
.post-content .md-editor-code.is-collapsed pre{padding-bottom:0!important}
@keyframes code-expand-key{0%{opacity:.6}50%{opacity:.1}to{opacity:.6}}
.post-content .md-editor-code .code-expand-btn{z-index:10;text-align:center;cursor:pointer;background:var(--muted);justify-content:center;align-items:center;width:100%;height:32px;font-size:16px;transition:all .3s;display:flex;position:absolute;bottom:0;transform:translateZ(0)}
.post-content .md-editor-code .code-expand-btn i{color:var(--foreground);transition:transform .3s}
.post-content .md-editor-code .code-expand-btn:hover{background:var(--primary);transition:all .3s}
.post-content .md-editor-code .code-expand-btn:hover i{color:#fff}
.post-content .md-editor-code .code-expand-btn.is-expanded i{transform:rotate(180deg)}
.post-content .md-editor-code.is-collapsible:not(.is-collapsed) pre{padding-bottom:32px!important}
.post-content .md-editor-code[open]{display:block}
.post-content .md-editor-code[open] .md-editor-code-head{border-bottom:1px solid var(--border)}
.post-content .md-editor-code[open] .md-editor-code-head .expand{transform:translateY(-50%)rotate(0)}
.post-content .md-editor-code[open] pre{max-height:50000px;transition:max-height .35s ease-in-out}
.post-content .md-editor-code pre{background-color:#0000;border-radius:0;max-height:0;margin:0;padding:0;line-height:1.6;transition:max-height .35s ease-in-out;position:relative;overflow:hidden}
.post-content .md-editor-code pre code{color:var(--hlnumber-color);background:var(--card);border-radius:0;flex-direction:row-reverse;margin:0;padding:0;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:16px;line-height:1.6;display:flex;position:relative;overflow:auto}
.post-content .md-editor-code .md-editor-code-block{white-space:pre;word-break:normal;color:#a9b7c6;vertical-align:bottom;flex:1;min-width:0;padding:10px 0;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.6;overflow-x:auto;padding-left:8px!important;font-size:16px!important}
.post-content .md-editor-code span[rn-wrapper]{background:var(--muted);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;align-items:flex-end;min-width:fit-content;padding:10px 8px 10px 12px;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:16px;display:flex;width:auto!important;position:relative!important;top:auto!important;left:auto!important}
.post-content .md-editor-code span[rn-wrapper] span{color:var(--hlnumber-color);white-space:nowrap;pointer-events:none;counter-increment:linenumber;line-height:1.6;display:block}
.post-content .md-editor-code span[rn-wrapper] span:before{color:#999;text-align:right;content:counter(linenumber);padding-right:.5em;display:block}
.post-content .md-editor-code .md-editor-code-head{width:100%;height:2.15em;min-height:24px;color:var(--hltools-color);cursor:pointer;background:var(--hltools-bg);align-items:center;margin:0;padding:0;font-size:1rem;list-style:none;display:flex;position:sticky;top:0;overflow:hidden}
.post-content .md-editor-code .md-editor-code-head::marker{content:"";display:none}
.post-content .md-editor-code .md-editor-code-head::-webkit-details-marker{display:none}
.post-content .md-editor-code .md-editor-code-head .expand{z-index:2;color:var(--hltools-color);cursor:pointer;justify-content:center;align-items:center;padding:.57rem .5rem;font-size:14px;transition:transform .3s;display:flex;position:absolute;top:50%;left:0;transform:translateY(-50%)rotate(-90deg)}
.post-content .md-editor-code .md-editor-code-head .expand svg{width:1rem;height:1rem}
.post-content .md-editor-code .md-editor-code-head .mac-dots{z-index:1;gap:6px;display:flex;position:absolute;top:50%;left:2.2rem;transform:translateY(-50%)}
.post-content .md-editor-code .md-editor-code-head .mac-dots .mac-dot{border-radius:50%;width:12px;height:12px;transition:all .3s}
.post-content .md-editor-code .md-editor-code-head .mac-dots .mac-dot.red{background:linear-gradient(135deg,#ff6159,#ff5f52);box-shadow:0 1px 3px #ff615966}
.post-content .md-editor-code .md-editor-code-head .mac-dots .mac-dot.yellow{background:linear-gradient(135deg,#ffbd2e,#ffbb28);box-shadow:0 1px 3px #ffbd2e66}
.post-content .md-editor-code .md-editor-code-head .mac-dots .mac-dot.green{background:linear-gradient(135deg,#28ca42,#27c93f);box-shadow:0 1px 3px #28ca4266}
.post-content .md-editor-code .md-editor-code-head .mac-dots:hover .mac-dot{transform:scale(1.1)}
.post-content .md-editor-code .md-editor-code-head.has-mac-dots .code-lang{left:5.5rem}
.post-content .md-editor-code .md-editor-code-head .code-lang{text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:1.15em;font-weight:700;position:absolute;left:2.5rem}
.post-content .md-editor-code .md-editor-code-head .copy-button{font:inherit;color:inherit;cursor:pointer;appearance:none;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:color .2s;display:flex;position:absolute;right:14px}
.post-content .md-editor-code .md-editor-code-head .copy-button:hover{color:var(--primary)}
.post-content .md-editor-code .md-editor-code-head .copy-button svg{width:16px;height:16px}
:is(.post-content b,.post-content strong){color:var(--primary);font-weight:700}
:is(.post-content span[style^=color\:] b,.post-content span[style^=color\:] strong,.post-content span[style*="; color:"] b,.post-content span[style*="; color:"] strong,.post-content span[style*=";color:"] b,.post-content span[style*=";color:"] strong){color:inherit}
.post-content :not(pre)>code{color:#fff;background:var(--anzhiyu-code-stress,var(--primary));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:4px;margin:0 4px;padding:2px 4px;font-weight:500;line-height:2;box-shadow:0 8px 16px -4px #2c2d300d}
.post-content blockquote{color:var(--muted-foreground);background-color:var(--muted);border:1px solid var(--border);border-radius:8px;margin:1rem 0;padding:.5rem .8rem}
.post-content blockquote p{margin:.5rem}
.post-content input[type=checkbox]{box-sizing:border-box;appearance:none;pointer-events:none;cursor:pointer;border:2px solid var(--primary);vertical-align:middle;background:0 0;border-radius:4px;outline:0;flex-shrink:0;width:18px;height:18px;margin-right:8px;padding:0;transition:all .15s ease-out;display:inline-block;position:relative}
.post-content input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}
.post-content input[type=checkbox]:checked:before{content:"";border:2px solid #fff;border-top:none;border-left:none;width:5px;height:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%)rotate(45deg)}
.post-content input[type=checkbox]:checked:after{display:none}
.post-content .task-list-item{list-style:none}
.post-content .task-list-item:before{display:none}
.post-content ul:not([data-type=taskList]):not(:has(li.task-list-item)){margin:1em 0;padding-left:0;list-style:none}
.post-content ul:not([data-type=taskList]):not(:has(li.task-list-item)) li{padding-left:1.2em;position:relative}
.post-content ul:not([data-type=taskList]):not(:has(li.task-list-item)) li:before{content:"";border:2px solid var(--primary);background:0 0;border-radius:50%;width:.6em;height:.6em;margin-top:-.3em;position:absolute;top:.85em;left:0}
.post-content ol{counter-reset:ol-counter;margin:1em 0;padding-left:0;list-style:none}
.post-content ol li{counter-increment:ol-counter;padding-left:1.75em;position:relative}
.post-content ol li:before{content:counter(ol-counter);font-variant-numeric:tabular-nums;color:#fff;background:var(--primary);border-radius:50%;justify-content:center;align-items:center;width:1.35em;height:1.35em;margin-top:-.675em;font-size:.8em;font-weight:600;display:inline-flex;position:absolute;top:1.05em;left:.05em}
.post-content ol ol{counter-reset:ol-counter}
.post-content li{margin:.5em 0;line-height:1.7}
.post-content .table-container{border:1px solid var(--border);border-radius:8px;margin:1rem 0;overflow:auto hidden}
.post-content .table-container p{margin:4px 0}
.post-content table{empty-cells:show;border-spacing:0;border-collapse:collapse;border:none;width:100%;margin:0;display:table}
.post-content thead{background:var(--muted)}
:is(.post-content th,.post-content td){vertical-align:middle;text-align:left;border:1px solid var(--border);min-width:80px;padding:.5rem .75rem;font-size:14px;line-height:1.5}
.post-content th{background:var(--muted);font-weight:600}
.post-content td{background:var(--background)}
:is(.post-content th p,.post-content td p){margin:4px 0;font-size:14px}
.post-content .table-container tr>:first-child{border-left:none}
.post-content .table-container tr>:last-child{border-right:none}
.post-content .table-container tbody tr:last-child>*{border-bottom:none}
.post-content .table-container table tr:first-child>*{border-top:none!important}
.post-content>table{border:1px solid var(--border);border-radius:8px;margin:1rem 0;overflow:hidden}
.post-content>table thead{background:var(--muted)}
.post-content>table tr>:first-child{border-left:none}
.post-content>table tr>:last-child{border-right:none}
.post-content>table tbody tr:last-child>*{border-bottom:none}
.post-content>table tr:first-child>*{border-top:none!important}
.post-content hr{border:1px dashed var(--anzhiyu-theme-op,#4259ef23);margin:1rem 0;display:flex;position:relative}
.post-content ::selection{color:#fff;background-color:var(--primary)}
.post-content .md-editor-katex-inline[data-processed]{display:initial}
.post-content .md-editor-katex-block[data-processed]{margin:1em 0;padding:.5em 0;display:block;overflow-x:auto}

/* ---- hero, layout, footer modules ---- */
.post-header-container{color:#fff;justify-content:center;width:100%;height:calc(30rem + 60px);min-height:360px;margin-top:-60px;padding-top:60px;display:flex;position:relative;overflow:hidden}
.post-header-container:before{content:"";background-color:var(--primary-color,var(--primary));opacity:1;width:100%;height:100%;transition:all;display:block;position:absolute;top:0;left:0}
.post-info-wrapper{z-index:10;transform-origin:0 0;will-change:transform;width:100%;max-width:1400px;height:calc(100% - 60px);margin:0 auto;position:absolute;top:60px}
.post-info{color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;width:100%;height:100%;padding:0 3.75rem;animation:.6s backwards az-post-header-slide-in;display:flex}
.post-top-cover{filter:blur(30px);opacity:.5;width:70%;height:100%;margin:0 -20% 0 auto;position:relative;overflow:hidden}
.post-top-bg{object-fit:cover;opacity:0;width:100%;min-width:50vw;height:100%;min-height:25rem;transition:opacity .5s ease-out;position:relative}
.post-top-bg.is-loaded{opacity:.8}
.post-firstinfo .meta-firstline-top{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:1rem;display:flex}
.post-meta-original,.post-meta-category{white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:12px;align-items:center;height:32px;padding:0 12px;font-size:1rem;font-weight:600;transition:all .3s;display:flex}
.post-meta-category:hover{color:var(--primary-color,var(--primary));background:#fff}
.tag-share .post-meta-tag-list{flex-wrap:wrap;gap:8px;display:flex}
.post-meta-tag{white-space:nowrap;opacity:.8;border-radius:12px;align-items:center;height:32px;padding:0 12px 0 8px;font-size:1rem;transition:all .3s;display:inline-flex}
.post-meta-tag:hover{color:#fff;opacity:1;background:#fff3}
.tag-icon{opacity:.6}
.tag-name{color:#fff;margin-left:4px;font-size:1rem;transition:color .3s}
.post-title{text-align:left;margin:0;font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2}
.post-meta{opacity:.9;flex-direction:column;align-items:flex-start;font-size:1rem;display:flex}
.meta-secondline{flex-wrap:wrap;align-items:center;gap:.5rem 0;display:flex}
.meta-item{opacity:.6;cursor:default;border-radius:12px;align-items:center;padding:2px 8px;transition:all .3s;display:inline-flex}
.meta-item:hover{opacity:1}
.meta-clickable{cursor:pointer;font-weight:800}
.meta-clickable:hover{opacity:1;background:#fff3}
.meta-icon{flex-shrink:0;margin-right:.4rem}
.meta-separator{margin:0 .15rem;display:inline-block}
.waves-area{z-index:5;pointer-events:none;width:100%;position:absolute;bottom:-11px;left:0}
.waves-svg{width:100%;height:3.75rem}
.parallax>use{will-change:transform;animation:25s cubic-bezier(.55,.5,.45,.5) infinite az-post-header-move-forever}
.parallax>use:first-child{fill:color-mix(in srgb, var(--background) 74%, transparent);animation-duration:7s;animation-delay:-2s}
.parallax>use:nth-child(2){fill:color-mix(in srgb, var(--background) 51%, transparent);animation-duration:10s;animation-delay:-3s}
.parallax>use:nth-child(3){fill:color-mix(in srgb, var(--background) 21%, transparent);animation-duration:13s;animation-delay:-4s}
.parallax>use:nth-child(4){fill:var(--background);animation-duration:20s;animation-delay:-5s}
.post-copyright{background:var(--muted);border:1px solid var(--border);text-align:center;border-radius:12px;margin:80px 0 30px;padding:34px 12px 20px;transition:all .3s;position:relative}
.pc-avatar{cursor:pointer;background:var(--primary);border:1px solid var(--border);width:66px;height:66px;box-shadow:0 8px 12px -3px color-mix(in srgb, var(--primary) 30%, transparent);border-radius:66px;margin:auto;transition:all .2s;position:absolute;top:-33px;left:calc(50% - 33px);overflow:hidden}
.pc-avatar-img{object-fit:cover;width:100%;height:100%;transition:all .2s}
.pc-avatar:hover{box-shadow:inset 0 0 0 10px var(--primary);transform:scale(1.05)}
.pc-avatar:hover .pc-avatar-img{border-radius:66px;overflow:hidden;transform:scale(.8)}
.pc-name{color:var(--foreground);text-align:center;margin-top:16px;font-size:20px;font-weight:700;line-height:1}
.pc-desc{color:var(--muted-foreground);text-align:center;margin-top:4px;font-size:14px}
.pc-buttons{-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;margin-top:8px;display:flex}
.pc-buttons button{color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;height:40px;padding:.6rem 1.5rem;font-size:14px;font-weight:700;transition:all .4s;display:flex}
.pc-share{background:#3e86f6}
.pc-share:hover:not(:disabled){background:var(--primary);box-shadow:none}
.pc-notice{color:var(--muted-foreground);text-align:center;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;margin:1rem 0 .5rem;padding-left:0;font-size:12px;overflow:hidden}
.pc-notice a{color:var(--anzhiyu-fontcolor,var(--foreground));border-bottom:dotted 2px var(--primary);padding:0 .2rem;font-weight:500;line-height:1.25rem;text-decoration:none;transition:all .2s}
.pc-notice a:hover{color:var(--anzhiyu-white,#fff);background:var(--primary);border-bottom-color:#0000;border-radius:.25rem;text-decoration:none;box-shadow:0 2px 8px #00000026}
.pc-buttons button svg{font-size:18px;line-height:1}
.pc-reward{justify-content:center;display:flex;position:relative}
.pc-reward-btn{background:#d80020}
.pc-subscribe-btn{background:#57bd6a}
.pc-reward-btn:hover:not(:disabled),.pc-subscribe-btn:hover:not(:disabled){background:var(--primary);box-shadow:none}
.pc-reward-btn:disabled,.pc-subscribe-btn:disabled,.pc-share:disabled,.pc-share.pc-loading{cursor:not-allowed;opacity:.7}
.pc-reward-main{z-index:102;width:-moz-fit-content;width:fit-content;padding:0 0 15px;animation:.3s pc-slide-in;display:flex;position:absolute;bottom:50px;left:50%;transform:translate(-50%);text-align:center;line-height:normal}
.pc-reward-all{z-index:999;background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;margin:0;padding:1rem;display:flex;box-shadow:0 8px 16px -4px #0000001a}
.pc-reward-title{color:#d80020;font-weight:700}
.pc-reward-group{margin-top:.625rem;padding:0;list-style:none;display:flex}
.pc-reward-item{text-align:center;vertical-align:top;padding:0 8px;list-style-type:none;display:inline-block}
.pc-reward-item:first-child .pc-qr-code{border-color:#57bd6a}
.pc-reward-item:last-child .pc-qr-code{border-color:#3e86f6}
.pc-qr-code{border:2px solid var(--border);border-radius:8px;width:130px;height:130px;box-shadow:0 2px 8px #0000001a}
.pc-qr-desc{width:130px;color:var(--muted-foreground);margin:4px 0 8px;padding-top:0;font-size:14px}
.pc-reward-main-btn{width:calc(100% - 16px);color:var(--foreground);text-align:center;cursor:pointer;background:var(--muted);border:1px solid var(--border);border-radius:12px;flex-direction:column;margin:8px;padding:8px 0;text-decoration:none;transition:all .3s;display:flex}
.pc-reward-main-btn:hover{color:#fff;background-color:#d80020;background-image:url(https://upload-bbs.miyoushe.com/upload/2025-08-10/125766904/dfc8878f7e65451f068d69830a4ff39c_2744970941687453951.gif);background-position:50%;background-size:cover;border-color:#d80020;box-shadow:0 8px 12px -3px #d800204d}
.pc-reward-text{margin-bottom:0;font-weight:700}
.pc-reward-dec{opacity:.8;font-size:.75rem}
.pc-quit-box{z-index:101;background:#0003;width:100vw;height:100vh;margin:0;animation:.3s pc-fade-in;display:flex;position:fixed;top:0;left:0}
@keyframes pc-slide-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}
@keyframes pc-slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes pc-fade-in{0%{opacity:0}to{opacity:1}}
@keyframes pc-dialog-slide-in{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.pc-dialog-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s pc-fade-in;display:flex;position:fixed;inset:0}
.pc-dialog{background:var(--card);border:1px solid var(--border);border-radius:12px;width:90%;max-width:500px;max-height:90vh;animation:.3s pc-dialog-slide-in;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a;font-family:"PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,"Microsoft YaHei",微软雅黑,Arial,sans-serif;line-height:normal}
.pc-dialog input,.pc-dialog button{font-family:inherit}
.pc-dialog-poster{max-width:720px}
.pc-dialog-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}
.pc-dialog-header h3{color:var(--foreground);margin:0;font-size:18px;font-weight:600}
.pc-dialog-close{width:32px;height:32px;color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}
.pc-dialog-close:hover{color:var(--foreground);background:var(--muted)}
.pc-dialog-content{max-height:calc(90vh - 60px);padding:1.5rem;overflow-y:auto}
.pc-action-section{margin-bottom:1.5rem}
.pc-action-section:last-child{margin-bottom:0}
.pc-section-label{color:var(--foreground);margin-bottom:.6rem;font-size:14px;font-weight:500}
.pc-url-input{width:100%;color:var(--foreground);cursor:pointer;background:var(--muted);border:1px solid var(--border);border-radius:6px;outline:none;padding:10px 12px;font-size:13px;transition:all .3s}
.pc-url-input:hover{border-color:var(--primary)}
.pc-share-buttons{flex-direction:column;gap:.6rem;display:flex}
.pc-share-btn{color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex}
.pc-share-btn:hover{opacity:.9;transform:translateY(-1px)}
.pc-share-btn svg{font-size:18px}
.pc-share-weibo{background:#e6162d}
.pc-share-weibo:hover{background:#d1142a}
.pc-share-qq{background:#12b7f5}
.pc-share-qq:hover{background:#0fa5db}
.pc-share-qzone{color:#333;background:#fcee21}
.pc-share-qzone:hover{background:#f5e31a}
.pc-sub-content{text-align:center;flex-direction:column;align-items:center;padding:1rem 1.5rem 1.5rem;display:flex}
.pc-sub-desc{color:var(--muted-foreground);margin:0 0 1.5rem;font-size:15px;line-height:1.6}
.pc-sub-input{width:100%;max-width:300px;color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:8px;outline:none;padding:12px 14px;font-size:14px;transition:all .3s}
.pc-sub-input:hover,.pc-sub-input:focus{border-color:var(--primary)}
.pc-sub-input:disabled{opacity:.6;cursor:not-allowed}
.pc-code-row{gap:12px;width:100%;max-width:300px;margin-top:1rem;display:flex}
.pc-code-row .pc-sub-input{flex:1 1 0%;width:auto;max-width:none}
.pc-send-code{color:#fff;cursor:pointer;background:var(--primary);border:none;border-radius:8px;flex-shrink:0;width:110px;padding:12px 8px;font-size:14px;font-weight:600;transition:all .2s}
.pc-send-code:hover:not(:disabled){opacity:.9}
.pc-send-code:disabled{opacity:.6;cursor:not-allowed}
.pc-sub-actions{width:100%;max-width:300px;margin-top:1.5rem}
.pc-sub-submit{color:#fff;cursor:pointer;background:var(--primary);border:none;border-radius:8px;width:100%;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}
.pc-sub-submit:hover:not(:disabled){opacity:.9}
.pc-sub-submit:disabled{opacity:.6;cursor:not-allowed}
.pc-sub-tips{color:var(--muted-foreground);opacity:.7;margin:1rem 0 0;font-size:12px}
.pc-poster-content{gap:1.5rem;padding:1rem;display:flex}
.pc-poster-side{flex-direction:column;flex:0 0 320px;justify-content:flex-start;align-items:center;display:flex}
.pc-poster-wrap{border:1px solid var(--border);background:#fff;border-radius:8px;justify-content:center;align-items:flex-start;width:100%;max-width:320px;display:flex;overflow:hidden;box-shadow:0 2px 12px #00000014}
.pc-poster-img{width:100%;height:auto;display:block}
.pc-poster-loading{text-align:center;color:var(--muted-foreground);padding:3rem;font-size:14px}
.pc-poster-actions{flex-direction:column;flex:1 1 0%;justify-content:center;gap:1.25rem;padding:.5rem 0;display:flex}
.pc-download-btn{color:#fff;cursor:pointer;background:#4a4a4a;border:none;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex}
.pc-download-btn:hover:not(:disabled){background:#3a3a3a}
.pc-download-btn:disabled{opacity:.6;cursor:not-allowed}
@media (max-width:768px){
.pc-reward-main{width:100%;padding:0;animation:.3s pc-slide-up;position:fixed;bottom:0;left:0;right:0;transform:none}
.pc-reward-all{border-radius:16px 16px 0 0;width:100%;max-height:80vh;padding:1.5rem 1rem;overflow-y:auto;box-shadow:0 -4px 20px #0003}
.pc-qr-code{width:140px;height:140px}
.pc-qr-desc{width:140px}
.pc-poster-content{flex-direction:column;gap:1.2rem}
.pc-poster-side{flex:1 1 0%;width:100%}
}
/* 默认隐藏，由 JS 加 .pc-show 展开（0,2,0 特异性盖过上面的基础规则） */
.pc-reward-main:not(.pc-show),.pc-quit-box:not(.pc-show),.pc-dialog-overlay:not(.pc-show){display:none}
.pagination-post{cursor:pointer;border:1px solid var(--border);background:0 0;border-radius:12px;width:100%;margin:0 0 1rem;display:flex;position:relative;overflow:hidden}
.pagination-post:has(.pagination-item:nth-child(2)):before{z-index:1;content:"";background:var(--border);width:1px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}
.pagination-item{background:var(--anzhiyu-secondbg,var(--muted));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:none;flex:1;align-items:flex-start;height:150px;padding:.5rem 0;text-decoration:none;transition:background .3s;display:flex;transform:translateZ(0)}
.pagination-item.right .pagination-info{text-align:right}
.pagination-item:hover{background:var(--anzhiyu-main,var(--primary))}
.pagination-item:hover .pg-label,.pagination-item:hover .pg-title{color:#fff}
.pagination-info{text-align:left;flex-direction:column;flex:1;justify-content:center;width:100%;height:100%;margin:auto;padding:.625rem 1.25rem;display:flex;position:relative;top:0;transform:none}
.pg-label{color:var(--anzhiyu-fontcolor,var(--foreground));margin-bottom:.625rem;padding-bottom:.625rem;font-size:.875rem;line-height:1;transition:color .3s}
.pg-title{color:var(--anzhiyu-fontcolor,var(--foreground));-webkit-line-clamp:2;line-clamp:2;white-space:normal;-webkit-box-orient:vertical;margin-bottom:0;font-size:1.125rem;font-weight:700;line-height:1.3;transition:color .3s;display:-webkit-box;overflow:hidden}
.post-float-wrap{z-index:998;pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:0 0 20px 10px;transition:transform .5s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:0;right:60px;transform:translateY(0)}
.post-float-wrap[data-visible=false]{pointer-events:none;transform:translateY(100%)}
.post-float-wrap[data-visible=true]{pointer-events:auto;transform:translateY(0)}
.post-float-card{pointer-events:auto;width:100%;min-width:300px;max-width:300px;min-height:84px;color:var(--anzhiyu-fontcolor,var(--foreground));-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);border:var(--style-border);box-shadow:var(--anzhiyu-shadow-border);background:#ffffffd9;border-radius:8px;align-items:flex-start;margin:4px;padding:8px 0;text-decoration:none;transition:background .2s,color .2s,border .2s,box-shadow .2s;display:flex}
.post-float-text{flex-direction:column;justify-content:center;width:100%;min-width:0;height:100%;padding:.625rem 1.25rem;display:flex}
.post-float-card:hover{background:var(--anzhiyu-main,var(--primary));color:#fff;border:var(--style-border-hover);box-shadow:var(--anzhiyu-shadow-main)}
.post-float-card:hover .post-float-label,.post-float-card:hover .post-float-title{color:#fff}
.post-float-card:hover .post-float-label{border-bottom-color:#ffffff4d}
.post-float-label{color:var(--anzhiyu-fontcolor,var(--foreground));border-bottom:var(--style-border);margin-bottom:.625rem;padding-bottom:.625rem;font-size:12px;font-weight:700;line-height:1;transition:color .2s,border .2s}
.post-float-title{color:var(--anzhiyu-fontcolor,var(--foreground));-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:400;line-height:1.3;transition:color .2s;display:-webkit-box;overflow:hidden}
:is(html.dark .post-float-card,[data-theme=dark] .post-float-card){background:#1e1e1ecc}
.card-wechat{cursor:pointer;border:var(--style-border);background:#57bd6a;border-radius:12px;justify-content:center;align-items:center;height:110px;padding:0;transition:border-color .3s;display:flex;position:relative;overflow:hidden}
.card-wechat:hover{border:var(--style-border-hover)}
.card-wechat:hover:before{opacity:0;transition:all .3s ease-out;top:100%}
.card-wechat:before{content:"";background-image:var(--blur-background);background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:all .2s cubic-bezier(.45,.04,.43,1.21);position:absolute;top:0;left:0}
:is(html.dark .card-wechat,[data-theme=dark] .card-wechat){background-color:#121121}
html.dark .card-wechat:before{filter:brightness(.5)saturate(.6)}
[data-theme=dark] .card-wechat:before{filter:brightness(.5)saturate(.6)}
:is(html.dark .card-wechat .wechat-face,[data-theme=dark] .card-wechat .wechat-face){filter:brightness(.85)saturate(.9)}
.wechat-flip-wrapper{z-index:1;perspective:1000px;width:235px;height:110px;position:relative}
.wechat-flip-content{width:100%;height:100%;transform-style:preserve-3d;transition:all .3s cubic-bezier(0,0,0,1.29)}
.wechat-face{backface-visibility:hidden;background-position:50%;background-repeat:no-repeat;background-size:100%;width:100%;height:100%;position:absolute}
.wechat-face.wechat-face-back{box-sizing:border-box;background-size:100%;display:block;transform:rotateY(180deg)}
.wechat-flip-wrapper:hover .wechat-flip-content{transform:rotateY(180deg)}
.post-detail-container{width:100%;min-height:100vh}
.article-lead-wrap{box-sizing:border-box;max-width:1400px;margin:0 auto;padding:.5rem 1.5rem 0}
.post-layout{gap:.625rem;max-width:1400px;margin:0 auto;padding:1rem 1.5rem;display:flex}
.post-content-inner{width:calc(100% - 300px);transition:width .3s}
.post-content-inner::selection{color:#fff;background-color:var(--primary)}
.post-content-inner.post-full-width{width:100%}
.post-detail-content{background:var(--card);border:1px solid var(--border);--comment-form-bg:var(--anzhiyu-secondbg);--comment-form-quote-bg:var(--muted);--comment-item-bg:transparent;--comment-item-border:none;--comment-item-radius:0;--comment-item-padding:0;--comment-item-gap:1.5rem;--comment-divider-display:block;border-radius:12px;flex-direction:column;align-self:flex-start;gap:.625rem;width:100%;padding:1.25rem 2.5rem;transition:all .3s;animation:.6s .1s backwards az-post-detail-slide-in;display:flex;position:relative;box-shadow:0 1px 3px #0000000d}
.pagination-inline-wrap{display:block}
.pagination-inline-wrap[hidden],.post-footer-bar[hidden]{display:none}
.post-tag-bar{border-radius:12px;flex-wrap:wrap;gap:.6rem .8rem;margin-top:.125rem;margin-bottom:.25rem;display:flex}
.post-tag-item{color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:8px;align-items:center;gap:4px;padding:4px 10px;font-size:.875rem;line-height:1.5;text-decoration:none;transition:all .2s ease-in-out;display:inline-flex}
.post-tag-item:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
.post-tag-item:hover .post-tag-icon{color:#fff}
.post-tag-item:hover .post-tag-count{color:var(--primary);background:#fff}
.post-tag-icon{color:var(--muted-foreground);font-size:.9rem}
.post-tag-name{font-weight:500}
.post-tag-count{color:var(--foreground);background:var(--muted);border-radius:5px;margin-left:6px;padding:0 6px;font-size:.75rem;font-weight:500;transition:all .2s ease-in-out}
.post-footer-bar{flex-direction:column;justify-content:center;align-items:center;height:140px;margin-top:16px;display:flex}
.pfb-logo{letter-spacing:normal;padding:0 5px;font-size:1.6rem;font-weight:900;line-height:3rem;transition:all .3s}
.pfb-desc{color:var(--muted-foreground);font-weight:700}
.pfb-link{color:inherit;cursor:pointer;background:var(--muted);border:1px solid var(--border);border-radius:20px;margin-top:8px;padding:4px 16px;font-size:14px;text-decoration:none;transition:all .3s ease-out;display:inline-block}
.pfb-link:hover{color:#fff;background:var(--primary);border-color:var(--primary);transform:scale(1.1)}
.article-lead{background:var(--anzhiyu-secondbg);border:1px solid var(--border);border-radius:12px;margin:0 0 .75rem;padding:.75rem 1rem}
.article-lead-title{color:var(--muted-foreground);align-items:center;gap:5px;margin-bottom:.5rem;font-size:.9rem;line-height:1.3;display:flex}
.article-lead-icon{width:19px;height:19px;color:var(--primary);flex-shrink:0;transform:translateY(1px)}
.article-lead-title-text{color:var(--primary);font-weight:700}
.article-lead-text{color:var(--foreground);font-size:.95rem;line-height:1.6}
.sidebar-toc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem}
.sidebar-card-title{color:var(--foreground);align-items:center;margin-bottom:.5rem;padding-left:.25rem;font-size:1.1rem;font-weight:600;display:flex}
.sidebar-card-title svg{margin-right:.5rem;font-size:1.2rem}
.toc-count{color:var(--muted-foreground);background:var(--muted);border-radius:9999px;margin-left:auto;padding:.125rem .5rem;font-size:.75rem;font-weight:500}
.toc-container{max-height:calc(100vh - 200px);position:relative;overflow:hidden auto}
.toc-container::-webkit-scrollbar{width:6px;height:6px}
.toc-container::-webkit-scrollbar-track{background:0 0}
.toc-container::-webkit-scrollbar-thumb{background:var(--scrollbar,#3c3c4333);border-radius:3px}
.toc-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover,#3c3c4366)}
.toc-container:hover .toc-item{filter:blur();opacity:1}
.toc-list{z-index:1;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex;position:relative}
.toc-item{color:var(--muted-foreground);cursor:pointer;border-radius:8px;align-items:center;padding:8px 8px 8px 12px;line-height:1.5;transition:color .2s ease-out,background-color .2s ease-out,font-size .2s ease-out,filter .2s ease-out,opacity .2s ease-out;display:flex;position:relative;overflow:hidden}
.toc-item:not(.toc-active){cursor:pointer;filter:blur(1px);opacity:.6;width:100%}
.toc-item:hover{color:var(--primary);background-color:var(--primary-op-light)}
.toc-item.toc-active{color:var(--primary);background-color:var(--primary-op-light);font-weight:600}
.toc-text{text-overflow:ellipsis;white-space:nowrap;transition:transform .2s ease-out;display:block;overflow:hidden}
.toc-indicator{z-index:2;background-color:var(--primary);opacity:0;pointer-events:none;border-radius:4px;width:4px;transition:top .2s cubic-bezier(0,1,.5,1),height .2s cubic-bezier(0,1,.5,1),opacity .2s ease-in-out;position:absolute;top:0;left:0}
.toc-item[data-level="1"]{padding-left:.8rem;font-size:.95rem}
.toc-item[data-level="1"].toc-active{font-size:1.1rem}
.toc-item[data-level="2"]{padding-left:1.6rem;font-size:.9rem}
.toc-item[data-level="2"].toc-active{font-size:1.05rem}
.toc-item[data-level="3"]{padding-left:2.4rem;font-size:.85rem}
.toc-item[data-level="3"].toc-active{font-size:1rem}
.toc-item[data-level="4"]{padding-left:3.2rem;font-size:.8rem}
.toc-item[data-level="4"].toc-active{font-size:.95rem}
.toc-item[data-level="5"]{padding-left:4rem;font-size:.75rem}
.toc-item[data-level="5"].toc-active{font-size:.9rem}
.toc-item[data-level="6"]{padding-left:4.8rem;font-size:.7rem}
.toc-item[data-level="6"].toc-active{font-size:.85rem}
.card-recent-post{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:0 1px 3px #0000000d}
.crp-title{color:var(--foreground);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.875rem;font-weight:600;display:flex}
.crp-title svg{color:var(--primary);font-size:1rem}
.crp-list{flex-direction:column;gap:.75rem;display:flex}
.crp-item{background:0 0;border-radius:8px;gap:.75rem;padding:.5rem;text-decoration:none;transition:all .2s;display:flex}
.crp-item:hover{background:var(--muted)}
.crp-item:hover .crp-img{transform:scale(1.1)}
.crp-cover{border-radius:8px;flex-shrink:0;width:4rem;height:4rem;position:relative;overflow:hidden}
.crp-img{object-fit:cover;width:100%;height:100%;transition:transform .3s}
.crp-info{flex-direction:column;flex:1;justify-content:center;gap:.25rem;min-width:0;display:flex}
.crp-name{color:var(--foreground);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.875rem;font-weight:500;line-height:1.4;display:-webkit-box;overflow:hidden}
.crp-date{color:var(--muted-foreground);font-size:.75rem}
.post-sidebar{flex-direction:column;gap:.625rem;width:300px;min-width:300px;animation:.6s .1s backwards az-post-sidebar-slide-in;display:flex}
.sticky-container{flex-direction:column;gap:.625rem;display:flex;position:sticky;top:calc(60px + .625rem)}
@media (max-width:768px){
    .waves-area{visibility:hidden;display:none}
    .post-info-wrapper{height:fit-content;position:absolute;top:auto;bottom:0;left:0}
    .post-info{background-image:linear-gradient(to bottom, transparent, var(--primary-color,var(--primary)));justify-content:normal;align-items:center;gap:0;height:fit-content;padding:11rem 6% 1rem}
    .post-info .tag-share{display:none}
    .post-meta{align-items:center;margin-top:1rem}
    .meta-secondline{justify-content:center;font-size:.75rem}
    .post-top-cover{z-index:1;filter:blur();opacity:1;width:100%;height:30rem;margin:0;position:fixed;top:0;left:0;right:0;transform:none!important}
    .post-top-cover:after{z-index:1;content:"";background:linear-gradient(to bottom, color-mix(in srgb, var(--primary-color,var(--primary)) 30%, transparent) 0%, color-mix(in srgb, var(--primary-color,var(--primary)) 50%, transparent) 30%, color-mix(in srgb, var(--primary-color,var(--primary)) 80%, transparent) 55%, var(--primary-color,var(--primary)) 70%);width:100%;height:100%;position:absolute;top:0;left:0}
    .post-top-bg{filter:none;opacity:1;border-radius:0;height:75%;min-height:18.75rem}
    .post-header-container{z-index:1;background-color:var(--primary-color,var(--primary));height:30rem}
    .post-header-container:before{display:none}
    .pagination-post{flex-direction:column}
    .pagination-post:has(.pagination-item:nth-child(2)):before{width:100%;height:1px;inset:50% 0 auto;transform:translateY(-50%)}
    .pagination-item{height:100px}
    .pagination-item.right .pagination-info{text-align:left}
    .article-lead-wrap{padding-left:1rem;padding-right:1rem}
    .post-layout{z-index:3;background-color:var(--primary);padding:0;position:relative}
    .post-detail-content{z-index:1;border:none;border-radius:12px 12px 0 0;padding:1rem}
    .post-content-inner{touch-action:pan-y;width:100%;max-width:100%;overflow-x:hidden}
    .post-tag-bar{gap:.5rem .625rem}
    .post-tag-item{padding:3px 9px;font-size:.8125rem}
    .post-tag-count{margin-left:4px;font-size:.6875rem}
    .post-footer-bar{z-index:2;background:var(--card);justify-content:center;align-items:center;margin-top:0;display:flex;position:relative}
}
@media screen and (max-width:1399px){
    .post-float-wrap{display:none!important}
}
@media screen and (max-width:768px){
    .post-float-wrap{display:none!important}
}
@media (min-width:1400px){
    .pagination-inline-wrap{display:none!important}
}
@media (max-width:992px){
    .post-content-inner{width:100%}
    .sidebar-toc{display:none}
    .card-recent-post{display:none}
    .post-sidebar{display:none}
}
@media print{
    .post-detail-container{min-height:unset}
    .post-layout{gap:0;max-width:100%;margin:0;padding:0;display:block}
    .post-content-inner{width:100%!important}
    .post-detail-content{box-shadow:none;background:0 0;border:none;border-radius:0;gap:0;padding:0;animation:none}
    .post-tag-bar,.pagination-inline-wrap,.post-footer-bar{display:none!important}
}
@keyframes az-post-header-slide-in{0%{opacity:0;transform:translateY(20px)}to{filter:none;opacity:1;transform:translateY(0)}}
@keyframes az-post-header-move-forever{0%{transform:translate(-90px)}to{transform:translate(85px)}}
@keyframes az-post-detail-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes az-post-sidebar-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all var(--transition);
}

.sidebar-card:hover {
    border-color: var(--accent);
}

.sidebar-card h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-post {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-post:last-child { border-bottom: none; }

.sidebar-post-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #10b981, #059669);
}

.sidebar-post-info h5 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.sidebar-post-info h5 a { color: var(--text); }
.sidebar-post-info h5 a:hover { color: var(--accent-dark); text-decoration: none; }

.sidebar-post-info span { font-size: 0.75rem; color: var(--text-muted); }

.newsletter-form { display: flex; gap: 0.5rem; }

.newsletter-form input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-sans);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.newsletter-form button {
    padding: 0.6rem 1rem;
    background: var(--text);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.newsletter-form button:hover { background: var(--accent-dark); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag-cloud a {
    padding: 0.3rem 0.7rem;
    background: var(--surface-alt);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.tag-cloud a:hover {
    background: var(--accent-light);
    color: var(--accent-dark);
    text-decoration: none;
}

/* ===== PAGINATION ===== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 3rem;
}

.pagination a, .pagination span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    text-decoration: none;
}

.pagination .active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 5rem 2rem;
}

.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state p { font-size: 1.1rem; color: var(--text-secondary); }
.empty-state a { font-weight: 600; }

/* ===== SITE FOOTER (1:1 blog.anheyu.com Footer module) ===== */
.footer-container{width:100%;max-width:100%;color:var(--anzhiyu-fontcolor);background:linear-gradient(180deg, transparent 0, var(--anzhiyu-card-bg) 25%);margin-top:1rem;position:relative;overflow-x:hidden}
.footer-wrap{width:100%;max-width:100%;min-height:17.875rem;position:relative}
.footer-social-bar,.footer-link-grid,.footer-runtime-board,.footer-bottom{max-width:1200px;margin-left:auto;margin-right:auto}
.footer-social-bar{flex-wrap:wrap;justify-content:center;align-items:center;padding:1rem 0;display:flex}
.footer-social-link{width:32px;height:32px;color:var(--anzhiyu-card-bg);background:var(--anzhiyu-fontcolor);border-radius:3rem;justify-content:center;align-items:center;margin:1rem 27px;font-size:1.5rem;text-decoration:none;transition:all .3s;display:flex}
.footer-social-link:hover{color:var(--anzhiyu-white);background:var(--anzhiyu-main);transform:scale(1.2)}
.social-icon-img{object-fit:cover;border-radius:50%;width:1.2rem;height:1.2rem}
.social-icon{width:1.2rem;height:1.2rem}
.footer-back-to-top{cursor:pointer;-webkit-user-select:none;user-select:none;object-fit:cover;border-radius:50%;width:50px;height:50px;margin:0 1rem;transition:all .5s cubic-bezier(0,0,0,1.29)}
.footer-back-to-top:hover{backface-visibility:hidden;transform-style:preserve-3d;transform:scale(1.2)}
.footer-link-grid{flex-wrap:wrap;justify-content:space-around;gap:1.5rem 0;padding:0 2rem;display:flex}
.footer-group{text-align:left;min-width:130px}
.footer-title-group{align-items:center;display:flex}
.footer-group-title{color:var(--anzhiyu-secondtext);margin-bottom:.8rem;margin-left:4px;font-size:1.1rem;font-weight:700}
.random-friends-btn{cursor:pointer;color:var(--anzhiyu-fontcolor);background:0 0;border:none;align-items:center;margin-bottom:.8rem;margin-left:.5rem;font-size:1.1rem;transition:color .3s;display:flex}
.random-friends-btn:hover{color:var(--anzhiyu-main)}
.random-friends-btn svg{transition:transform .3s ease-out,opacity .3s ease-out;display:inline-block}
.random-friends-btn .is-animating{opacity:.2}
.footer-links-group{flex-direction:column;display:flex}
.footer-item{width:fit-content;max-width:120px;color:var(--anzhiyu-fontcolor);text-overflow:ellipsis;white-space:nowrap;border-radius:7px;margin-bottom:.5rem;margin-right:10px;padding:0 4px;font-size:.95rem;text-decoration:none;transition:all .2s;display:block;overflow:hidden}
.footer-item:hover{color:#fff;background:var(--anzhiyu-main)}
.footer-badges{text-align:center;margin:0;padding:1.5rem 0}
.badge-link{margin:5px;display:inline-block}
.badge-link img{vertical-align:middle;height:20px}
.footer-runtime-board{color:var(--anzhiyu-fontcolor);flex-direction:column;align-items:center;gap:.75rem;margin:1rem auto;padding:1rem 2rem;font-size:12px;display:flex}
.status-img-row{justify-content:center;display:flex}
.uptime-badge{border-radius:0;width:100%;max-width:130px;height:auto}
.runtime-info-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}
.runtime-text{font-weight:500;line-height:1.5}
.runtime-time-text{text-align:center;border-radius:10px;font-weight:600;display:inline-block}
.heartbeat-icon{align-items:center;font-size:16px;animation:1.3s ease-in-out infinite az-footer-heartbeat;display:inline-flex}
.footer-bottom-bar{color:var(--anzhiyu-fontcolor);background:var(--anzhiyu-secondbg);margin-top:1rem;padding:1.5rem 1rem;transition:all .3s;display:flex;overflow:hidden}
.bar-content{flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;max-width:1400px;margin:0 auto;line-height:1;display:flex}
.bar-left{flex-direction:column;align-items:flex-start;gap:.5rem;min-height:32px;display:flex}
.bar-right{flex-wrap:wrap;align-items:center;gap:1rem;min-height:32px;display:flex}
.copyright-info{font-size:.9rem}
.copyright-info a:hover{color:var(--anzhiyu-main)}
.bar-link{color:var(--anzhiyu-fontcolor);white-space:nowrap;margin-top:8px;margin-bottom:8px;font-size:1rem;font-weight:700;text-decoration:none;transition:color .3s}
.bar-link:hover{color:var(--anzhiyu-main)}
.record-info{flex-wrap:wrap;align-items:center;gap:1rem;font-size:.8rem;display:flex}
.record-link{color:var(--anzhiyu-secondtext);align-items:center;gap:4px;text-decoration:none;transition:color .3s;display:inline-flex}
.record-link:hover{color:var(--anzhiyu-main)}
.police-record-link{align-items:center;gap:4px;display:inline-flex}
.police-record-icon{object-fit:contain;width:14px;height:14px}
.cc-link{align-items:center;gap:2px;display:flex}
.cc-link svg{width:1.2rem;height:1.2rem}
.uptime-status{cursor:pointer;align-items:center;gap:.35rem;font-size:.8rem;text-decoration:none;transition:transform .2s;display:inline-flex}
.uptime-status:hover{transform:scale(1.05)}
.uptime-status:hover .uptime-dot{transform:scale(1.2)}
.uptime-dot{border-radius:50%;width:8px;height:8px;transition:background-color .3s,transform .2s,box-shadow .3s;position:relative}
.uptime-text{color:var(--anzhiyu-secondtext);transition:color .3s}
.uptime-loading .uptime-dot{background-color:#9ca3af;animation:2s cubic-bezier(.4,0,.6,1) infinite az-footer-status-pulse}
.uptime-ok .uptime-dot{background-color:#10b981;animation:2s ease-in-out infinite az-footer-status-glow;box-shadow:0 0 8px #10b98199}
.uptime-ok .uptime-text{color:#10b981}
.uptime-ok:hover .uptime-dot{box-shadow:0 0 12px #10b981cc}
.uptime-partial .uptime-dot{background-color:#f59e0b;animation:1.5s ease-in-out infinite az-footer-status-blink;box-shadow:0 0 8px #f59e0b99}
.uptime-partial .uptime-text{color:#f59e0b}
.uptime-partial:hover .uptime-dot{box-shadow:0 0 12px #f59e0bcc}
.uptime-error .uptime-dot{background-color:#ef4444;animation:1s ease-in-out infinite az-footer-status-blink;box-shadow:0 0 8px #ef444499}
.uptime-error .uptime-text{color:#ef4444}
.uptime-error:hover .uptime-dot{box-shadow:0 0 12px #ef4444cc}
@media (min-width:992px){
    .footer-link-grid{flex-wrap:nowrap;justify-content:space-between}
}
@media (min-width:1200px){
    .footer-link-grid{gap:0}
}
@media (max-width:768px){
    .footer-back-to-top{display:none}
    .footer-container{z-index:99;background:linear-gradient(180deg, transparent 0, var(--anzhiyu-card-bg) 25%);width:100%;max-width:100%;margin-top:1rem;overflow-x:hidden}
    .footer-container-post-detail{background:var(--anzhiyu-card-bg);touch-action:pan-y;margin-top:-1px}
    .footer-link-grid{gap:1.5rem 2rem;padding:0 1rem}
    .footer-group{min-width:100px}
    .footer-bottom-bar .bar-content{flex-direction:column;justify-content:center;align-items:center;gap:.75rem}
    .footer-bottom-bar .bar-left{text-align:center;align-items:center}
    .footer-bottom-bar .bar-right,.footer-bottom-bar .record-info{justify-content:center}
}
@keyframes az-footer-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}
@keyframes az-footer-status-glow{0%,to{opacity:1;box-shadow:0 0 6px #10b98180}50%{opacity:.9;box-shadow:0 0 10px #10b981cc}}
@keyframes az-footer-status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}
@keyframes az-footer-status-blink{0%,to{opacity:1}50%{opacity:.4}}

/* footer on the article page sits on the card background, no gradient */
.footer-container-post-detail { background: var(--anzhiyu-card-bg); touch-action: pan-y; margin-top: -1px; }

/* ===== CODE BLOCK (1:1 md-editor-v3 + atom-one-dark tokens) ===== */
.post-content .md-editor-code span[rn-wrapper] { counter-reset: linenumber; }
.hljs { color: #abb2bf; background: transparent; }
.hljs-comment, .hljs-quote { color: #5c6370; font-style: italic; }
.hljs-doctag, .hljs-formula, .hljs-keyword { color: #c678dd; }
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: #e06c75; }
.hljs-literal, .hljs-operator { color: #56b6c2; }
.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string, .hljs-code { color: #98c379; }
.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-template-variable, .hljs-variable, .hljs-selector-pseudo { color: #d19a66; }
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #61aeee; }
.hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_, .hljs-selector-class, .hljs-type { color: #e6c07b; }
.hljs-title.function_ { color: #61afef; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-link { text-decoration: underline; }
.hljs-params, .hljs-punctuation { color: #abb2bf; }
.hljs-property, .hljs-tag, .hljs-variable.language_ { color: #e06c75; }
.hljs-tag .hljs-attr { color: #d19a66; }
.hljs-tag .hljs-string { color: #98c379; }
.hljs-template-tag { color: #c678dd; }
.hljs-addition { background-color: #98c3791a; }
.hljs-deletion { background-color: #e06c751a; }
.post-content .md-editor-code .copy-button.is-done { color: var(--primary); }

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--text);
    color: white;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary);
}

.back-to-top.over-footer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* ===== BACK LINK ===== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.back-link:hover { color: var(--accent-dark); text-decoration: none; }

/* Responsive */
@media (max-width: 900px) {
    .article-layout {
        flex-direction: column;
    }
    .sidebar, .article-sidebar { position: static; }
    .article-grid { grid-template-columns: 1fr; }
    .home-layout { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
}

/* 与参考站 StickyCards 一致：≤992px 隐藏侧栏；homeTopContainer 改为纵向堆叠 */
@media (max-width: 992px) {
    .home-sidebar { display: none; }
    .hero-new { flex-flow: column; }
    /* 纵向堆叠后 flex-basis:0 会让 340px 高度失效，需退回 auto */
    .hero-left { flex: 0 0 auto; }
    .hero-right { flex: 0 0 auto; height: auto; }
}

@media (max-width: 640px) {
    .header-inner { padding: 0 1rem; }
    .hero { padding: 2.5rem 1rem 2rem; }
    .hero-new { padding: 1rem; }
    .main-content { padding: 0 1rem 3rem; }
}

/* ===== CONSOLE TOGGLE + DRAWER (1:1 anheyu styles-module b9M_Xa / RKESaa) ===== */
.console-label {
    --icon-size: 1.375rem;
    width: var(--icon-size);
    height: var(--icon-size);
    cursor: pointer;
    margin-left: 1rem;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
}

.console-icon {
    width: calc(var(--icon-size) / 3);
    height: calc(var(--icon-size) / 3);
    background: var(--text);
    border-radius: calc(var(--icon-size) * 0.15);
    transform: translateY(calc(var(--icon-size) / 4));
    margin: auto;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    inset: 0 auto 0 0;
}

.console-icon.left {
    width: 100%;
    transform: translateY(calc(var(--icon-size) / -4));
}

.console-icon.right {
    width: calc(var(--icon-size) / 2);
    left: auto;
    right: 0;
}

.console-label:hover .console-icon.left {
    width: calc(var(--icon-size) / 2.5);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.console-label:hover .console-icon.center {
    width: calc(var(--icon-size) / 2.5);
    opacity: 0.5;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.console-label:hover .console-icon.right {
    width: calc(var(--icon-size) / 2.5);
    height: calc(var(--icon-size) / 1.15);
    transform: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.console-label-active {
    z-index: 99999;
    top: 0;
    right: 0;
}

.console-label-active::after {
    z-index: -1;
    content: "";
    border-radius: 50px;
    width: 35px;
    height: 35px;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--text) !important;
}

.console-label-active:hover::after {
    background: var(--primary) !important;
}

.console-label-active .console-icon {
    height: 5px;
    background: var(--bg) !important;
}

.console-label-active .console-icon.left {
    width: 100% !important;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) rotate(-45deg) !important;
}

.console-label-active .console-icon.center {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
}

.console-label-active .console-icon.right {
    width: 100% !important;
    left: 0 !important;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) rotate(45deg) !important;
}

.console-label-active:hover .console-icon.left,
.console-label-active:hover .console-icon.right {
    width: 100% !important;
    height: 5px !important;
}

.console-label-active:hover .console-icon.center {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.console-label-active:hover .console-icon.left {
    transform: translateY(0) rotate(-45deg) !important;
}

.console-label-active:hover .console-icon.right {
    transform: translateY(0) rotate(45deg) !important;
}

/* Drawer */
.console {
    z-index: 10010;
    pointer-events: none;
    opacity: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100dvh;
    transition: opacity 0.3s ease-out;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
}

.console.show {
    pointer-events: all;
    opacity: 1;
}

.console-mask {
    z-index: 1;
    backface-visibility: hidden;
    width: 100vw;
    height: 100dvh;
    transform-style: preserve-3d;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    position: fixed;
    top: 0;
    left: 0;
    transform: translateZ(0);
}

.console.show .console-mask {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    animation: consoleToShow 0.6s ease 0s 1 normal none;
    transform: translateZ(0);
}

@keyframes consoleToShow {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.console-content {
    z-index: 2;
    width: 100dvw;
    max-height: 800px;
    color: var(--text);
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 30px;
    display: flex;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    max-width: 1400px;
    transition: 0.3s !important;
}

.console.show .console-content > * {
    pointer-events: auto;
}

.console-card-group {
    opacity: 0;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: calc(100% - 64px);
    height: 800px;
    max-height: calc(-180px + 100dvh);
    transition: 0.3s;
    display: flex;
    transform: translateY(20px);
}

.console.show .console-card-group {
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0.1s;
    transform: translateY(0);
}

.console-card-group-left {
    width: 40%;
    min-width: 300px;
    max-width: 550px;
    height: 100%;
}

.console-card-group-right {
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
    min-width: 500px;
    max-width: 900px;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.console-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-direction: column;
    gap: 24px;
    padding: 32px 36px 36px;
    display: flex;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.05) 0 8px 16px -4px;
}

.card-newest-comments {
    height: 100%;
}

.console-card.tags {
    flex: 1 1 0%;
    min-height: 0;
}

.console-card.history {
    box-shadow: none;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    margin-top: 8px;
    padding: 0;
    overflow: hidden;
}

.author-content-item-tips {
    opacity: 0.8;
    color: inherit;
    margin-bottom: 0.625rem;
    font-size: 0.75rem;
    transition: 0.3s !important;
}

.author-content-item-title {
    color: inherit;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    transition: none !important;
}

.card-hor-content {
    align-items: center;
    width: 100%;
    display: flex;
}

.go-to-recent-comments {
    margin-left: auto;
    color: var(--text) !important;
    display: flex;
}

.console-recent-comments {
    flex-wrap: wrap;
    flex: 1 0 0%;
    align-content: flex-start;
    gap: 8px;
    display: flex;
    overflow-y: scroll;
}

.console-recent-comments::-webkit-scrollbar {
    display: none;
}

.console-empty {
    color: var(--anzhiyu-secondtext);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    display: flex;
}

/* 抽屉里的最近留言卡：尺寸/配色逐条照抄参考站 commentCard 一组规则，
   变量两边等价（--anzhiyu-background=#f7f9fe↔rgb(247,249,254)、--border=#e3e8f7、--anzhiyu-secondtext=#3c3c43cc） */
.comment-card {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    background: var(--anzhiyu-background);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    width: calc(50% - 4px);
    padding: 14px;
    display: flex;
    position: relative;
    overflow: hidden;
    transition: border-color .3s;
}

.comment-card:hover {
    border-color: var(--anzhiyu-main);
}

.comment-info {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 100%;
    min-height: 40px;
    padding-bottom: 8px;
    display: flex;
}

.comment-info .comment-avatar {
    object-fit: cover;
    border-radius: 30px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
}

.comment-info .comment-avatar-text {
    color: #fff;
    background: var(--anzhiyu-logo-color);
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    display: flex;
}

.comment-info > div {
    flex-direction: column;
    line-height: 1.5;
    display: flex;
}

.comment-user {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    overflow: hidden;
}

.comment-time {
    color: var(--anzhiyu-secondtext);
    margin-left: auto;
    font-size: 12px;
}

.comment-content {
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex-shrink: 0;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.7;
    transition: .3s;
    display: -webkit-box;
    overflow: hidden;
}

.comment-content p {
    margin: 0;
}

/* 卡片只有两行高，留言表情的 3rem 会顶破，抽屉里缩到行内大小 */
.comment-content img.msg-emoji-img {
    vertical-align: -4px;
    width: 1.25rem;
    height: 1.25rem;
}

.comment-title {
    color: var(--anzhiyu-secondtext);
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .6;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: auto;
    min-height: 20px;
    padding-top: 8px;
    font-size: 12px;
    line-height: 1;
    transition: .3s;
    display: flex;
    overflow: hidden;
}

.comment-title svg {
    flex-shrink: 0;
}

.card-tag-cloud {
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
    transition: all;
    display: flex;
    overflow-y: scroll;
}

.card-tag-cloud::-webkit-scrollbar {
    width: 8px;
}

.card-tag-cloud::-webkit-scrollbar-track {
    background-color: transparent;
}

.card-tag-cloud::-webkit-scrollbar-thumb {
    background-color: var(--accent-shadow);
}

.console-tag-item {
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 700;
    transition: color 0.3s, background 0.3s;
}

.console-tag-item:hover {
    background: var(--primary);
    box-shadow: 0 8px 12px -3px var(--accent-shadow);
    color: var(--primary-foreground) !important;
}

.console-tag-item sup {
    vertical-align: baseline;
    opacity: 0.6;
    font-size: 75%;
    line-height: 0;
    position: relative;
    top: -0.4rem;
}

.card-archive-list {
    flex-flow: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.card-archive-list-item {
    cursor: pointer;
    border-radius: 12px;
    flex: 0 0 calc(25% - 6px);
    height: 82px;
    transition: 0.3s;
}

.card-archive-list-item:hover .card-archive-list-link {
    color: var(--primary-foreground);
    background: var(--primary);
}

.card-archive-list-link {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 12px 16px;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.05) 0 8px 16px -4px;
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

.card-archive-list-date {
    opacity: 0.6;
    font-size: 14px;
}

.card-archive-list-count-group {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    display: flex;
}

.card-archive-list-count {
    text-align: left;
    width: auto;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 0.9;
}

.card-archive-list-count-unit {
    text-align: left;
    width: auto;
    font-size: 14px;
    font-weight: 700;
}

.button-group {
    opacity: 0;
    justify-content: center;
    width: fit-content;
    transition: 0.3s;
    display: flex;
    transform: translateY(20px);
}

.console.show .button-group {
    opacity: 1;
    transition-delay: 0.2s;
    transform: translateY(0);
}

.console-btn-item {
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.console-btn-item:not(:last-child) {
    margin-right: 0.5rem;
}

.console-btn-item button,
.console-btn-item a {
    width: 100%;
    height: 100%;
    color: var(--text);
    cursor: pointer;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 60px;
    outline: none;
    justify-content: center;
    align-items: center;
    transition: color 0.3s, background 0.3s, filter 0.3s;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.05) 0 8px 16px -4px;
    text-decoration: none;
}

.console-btn-item button:hover,
.console-btn-item a:hover {
    color: var(--primary-foreground);
    background: var(--primary);
}

.console-btn-item button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Drawer lives inside <header>; a non-none backdrop-filter there would become its containing block */
.site-header.console-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-right.console-open .nav-btn {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.header-right.console-open .console-label {
    pointer-events: auto;
}

@media (max-width: 1024px) {
    .console-card-group-right {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        /* 基类的 min-width:500px 会把面板撑破视口，这里必须清掉 */
        min-width: 0;
        max-width: 900px;
        height: 100%;
        display: flex;
        overflow: hidden;
    }
    .console-card-group {
        width: 100%;
    }
    .console-card-group-left {
        display: none;
    }
    .card-archive-list-item {
        flex: 0 0 calc(50% - 4px);
        height: 82px;
    }
}

@media (max-width: 768px) {
    .console-card {
        padding: 24px;
    }
    .author-content-item-title {
        font-size: 24px;
    }
    .card-archive-list-item {
        flex: 0 0 100%;
        height: 82px;
    }
}

/* ===== ARCHIVE LIST + CATEGORY/TAG CLOUD (1:1 anheyu ArchiveList KsbRmq / TagCloud) ===== */
.home-layout-padded {
    padding-top: 16px;
}

.archive-page {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-direction: column;
    gap: 10px;
    padding: 20px 40px;
    display: flex;
    box-shadow: var(--shadow);
}

.article-sort-title {
    color: var(--text);
    font-size: 2rem;
    font-weight: 700;
}

.article-sort-title sup {
    opacity: 0.4;
    margin-left: 4px;
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    top: -0.625rem;
}

.article-sort-group {
    flex-direction: column;
    gap: 0.5rem;
    display: flex;
}

.article-sort-item-year {
    padding-left: 1rem;
    font-size: 1rem;
    font-weight: 700;
    position: relative;
}

.article-sort-item-year::before {
    content: "";
    background: var(--primary);
    border-radius: 4px;
    width: 6px;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.article-sort-item {
    cursor: pointer;
    border-radius: 12px;
    align-items: center;
    transition: all 0.2s ease-in-out;
    display: flex;
    position: relative;
    overflow: hidden;
}

.archive-item-img {
    background: var(--surface-alt);
    border-radius: 12px;
    width: 151px;
    min-width: 151px;
    height: 80px;
    min-height: 80px;
    display: block;
    overflow: hidden;
}

.archive-item-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transition: all 0.6s;
}

.article-sort-item:hover .archive-item-img img {
    transform: scale(1.05);
}

.archive-item-cover-bg {
    width: 100%;
    height: 100%;
}

.archive-item-info {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0 1rem;
    display: flex;
}

.archive-item-title {
    width: fit-content;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s;
}

.archive-item-title:hover {
    color: var(--primary);
}

.archive-item-tags {
    white-space: nowrap;
    text-overflow: ellipsis;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    font-size: 0.7rem;
    display: flex;
    overflow: hidden;
}

.archive-item-tags a {
    color: var(--text-secondary);
    background: var(--surface-alt);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11.2px;
    line-height: 11.2px;
    transition: all 0.2s;
}

.archive-item-tags a:hover {
    color: var(--primary-foreground);
    background: var(--primary);
}

.archive-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 0;
}

.cloud-page {
    max-width: var(--max-width);
    min-height: 400px;
    color: var(--text);
    margin: 0.5rem auto 0;
    padding: 0 24px 4rem;
}

.cloud-page-title {
    text-align: center;
    margin: 2rem 0 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.cloud-list {
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeInUp 0.6s 0.2s backwards;
    display: flex;
}

.cloud-item {
    width: fit-content;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 12px;
    align-items: center;
    gap: 6px;
    margin: 0.7rem;
    padding: 0.6rem 0.9rem;
    font-size: 1.4rem;
    transition: all 0.2s;
    display: flex;
}

.cloud-item:hover {
    color: var(--primary-foreground);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
}

.cloud-item svg {
    opacity: 0.4;
    font-size: 1.2rem;
}

.cloud-item sup {
    opacity: 0.6;
    font-size: 0.75rem;
    position: relative;
    top: -0.5rem;
}

@media (max-width: 768px) {
    .archive-page { padding: 16px; }
    .article-sort-item { flex-direction: column; align-items: flex-start; }
    .archive-item-img { width: 100%; min-width: 0; height: 160px; }
    .archive-item-info { padding: 0.75rem 0; }
    .archive-item-title { -webkit-line-clamp: 2; }
    .archive-item-tags { white-space: normal; flex-wrap: wrap; }
}

/* ===== SEARCH MODAL (1:1 anheyu searchModal) ===== */
.search-modal {
    z-index: 100000;
    pointer-events: none;
    position: fixed;
    inset: 0;
}

.search-modal.show {
    pointer-events: auto;
}

.search-mask {
    z-index: 100000;
    opacity: 0;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    position: fixed;
    inset: 0;
    transform: translateZ(0);
    transition: opacity 0.3s ease;
}

.search-dialog {
    z-index: 100001;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 40rem;
    max-width: 90vw;
    height: fit-content;
    max-height: 80dvh;
    opacity: 0;
    will-change: transform, opacity;
    flex-direction: column;
    margin: 5rem auto;
    padding: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    transform: scale(0.96);
}

.search-modal.show .search-mask {
    opacity: 1;
    display: block;
}

.search-modal.show .search-dialog {
    opacity: 1;
    display: flex;
    transform: scale(1);
}

.search-nav {
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    display: flex;
}

.search-dialog-title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
}

.search-close-button {
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
}

.search-close-button:hover {
    color: var(--primary-foreground);
    background: var(--primary);
}

.search-wrap {
    border-radius: 0 0 16px 16px;
    flex-direction: column;
    width: 100%;
    padding: 1.25rem;
    display: flex;
    overflow-y: auto;
}

.search-input-container {
    align-items: center;
    display: flex;
    position: relative;
}

.search-icon {
    color: var(--text-secondary);
    pointer-events: none;
    position: absolute;
    left: 0.875rem;
}

.search-input {
    width: 100%;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    padding: 0.25rem 1rem 0.25rem 2.5rem;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    background-color: var(--surface);
    border-color: var(--primary);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-tips {
    color: var(--text-secondary);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    display: flex;
}

.search-results {
    flex-direction: column;
    margin-top: 1.5rem;
    display: flex;
}

.search-results:empty {
    display: none;
}

.search-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

.search-result-item {
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    display: flex;
    color: inherit;
    transition: background-color 0.2s;
}

.search-result-item.selected,
.search-result-item:hover {
    background: var(--surface-alt);
}

.search-result-cover {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 64px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
}

.search-result-cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.search-result-cover-blank {
    background: linear-gradient(135deg, #4584ff 0%, #cf0db9 100%);
    width: 100%;
    height: 100%;
}

.search-result-info {
    flex-direction: column;
    min-width: 0;
    flex: 1;
    display: flex;
}

.search-result-title {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-desc {
    color: var(--text-secondary);
    margin-top: 2px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    color: var(--text-muted);
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
    display: flex;
}

.search-result-item mark,
.search-input mark {
    color: var(--primary);
    background: transparent;
    font-weight: 700;
}

/* ===== THEME SWITCH (1:1 anheyu darkmodeSwitch) ===== */
.theme-switch {
    position: relative;
}

.theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

.sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

.sun-icon.active {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.moon-icon.active {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ===== DARK MODE (1:1 anheyu .dark tokens) ===== */
html.dark {
    color-scheme: dark;
    --bg: #18171d;
    --surface: #1d1e22;
    --surface-alt: #21232a;
    --text: #f7f7fa;
    --text-secondary: #a1a2b8;
    --text-muted: #8a8c9e;
    --accent-dark: #5b74f7;
    --accent-light: rgba(22, 59, 242, 0.18);
    --accent-shadow: rgba(22, 59, 242, 0.3);
    --primary-foreground: #f7f7fa;
    --border: #3d3d3f;
    --border-light: #3d3d3f;
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.31);
    --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.45);
    --shadow-primary: 0 8px 12px -3px rgba(22, 59, 242, 0.3);

    --background: #18171d;
    --card: #1d1e22;
    --muted: #21232a;
    --foreground: #f7f7fa;
    --muted-foreground: #a1a2b8;
    --anzhiyu-background: #18171d;
    --anzhiyu-secondbg: #21232a;
    --anzhiyu-card-bg: #1d1e22;
    --anzhiyu-card-bg-grey: #27282a;
    --anzhiyu-card-border: #3d3d3f;
    --anzhiyu-card-btn-bg: #30343f;
    --anzhiyu-fontcolor: #f7f7fa;
    --anzhiyu-secondtext: #a1a2b8;
    --anzhiyu-white: #f7f7fa;
    --anzhiyu-white-op: #f7f7fa33;
    --anzhiyu-shadow-border: 0 8px 16px -4px #00000050;
    --anzhiyu-border-color: #fdfdfd1f;
    --anzhiyu-scrollbar: #3c3c4366;
    --anzhiyu-maskbg: #0009;
    --anzhiyu-ahoverbg: #ffffff;
    --anzhiyu-post-blockquote-bg: #000000;
    --anzhiyu-blue: #0084ff;
    --anzhiyu-green: #3e9f50;
    --anzhiyu-orange: #e38100;
    --anzhiyu-pink: #d44040;
    --anzhiyu-red: #d80020;
    --primary-op-light: #f7f7fa12;
    --scrollbar: #3c3c4366;
    --scrollbar-hover: #3c3c4399;
    --hlnumber-color: #636d83;
    --hltools-color: var(--anzhiyu-fontcolor);
}

html.dark .site-header {
    background: rgba(24, 23, 29, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark .site-header.is-scrolled {
    background: rgba(29, 30, 34, 0.75);
}

/* 暗色下文章页顶部同样要全透明，否则 html.dark .site-header 的特异性会盖掉 .is-transparent */
html.dark .site-header.is-transparent {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

html.dark .logo-dropdown,
html.dark .nav-dropdown {
    background: var(--surface);
}

html.dark .categoryBar {
    background: var(--anzhiyu-card-bg);
    border-color: var(--anzhiyu-card-border);
}

html.dark .catalogListItem,
html.dark .catalogMore {
    color: var(--anzhiyu-fontcolor);
}

html.dark .console-mask,
html.dark .search-mask {
    background: rgba(0, 0, 0, 0.6);
}

html.dark .back-to-top {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

html.dark ::selection {
    background: var(--primary);
    color: #ffffff;
}

html.dark .copyright-link a {
    color: var(--accent-dark);
}

/* ===== 即刻页 /essay（结构 1:1 对齐 blog.anheyu.com/essay） ===== */
.essay-page { isolation: isolate; width: 100%; max-width: 1400px; margin: 0 auto; padding: 1.5rem; position: relative; animation: .55s cubic-bezier(.22, 1, .36, 1) both essay-page-enter; }
.essay-page > * { opacity: 0; animation: .48s cubic-bezier(.22, 1, .36, 1) both essay-section-enter; }
.essay-page > *:nth-child(1) { animation-delay: 40ms; }
.essay-page > *:nth-child(2) { animation-delay: .12s; }
.essay-page > *:nth-child(3) { animation-delay: .2s; }
@keyframes essay-page-enter { 0% { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes essay-section-enter { 0% { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 顶部头图卡 */
.essay-banner { color: #fff; background-color: var(--anzhiyu-main); background-image: linear-gradient(-45deg, var(--anzhiyu-main), #0f4667, #2a6973 150%, #67044d); background-position: 0 28%; background-repeat: no-repeat; background-size: 400%; border-radius: 12px; width: 100%; height: 300px; position: relative; overflow: hidden; }
.essay-banner-inner { width: 100%; height: 100%; padding: 2rem; display: flex; position: relative; }
.essay-banner-inner::before { z-index: 1; content: ""; background: #0006; position: absolute; inset: 0; }
.essay-banner-content { z-index: 2; text-align: left; flex-direction: column; justify-content: space-between; width: 100%; display: flex; position: relative; }
.essay-banner-tips { opacity: .8; margin-bottom: .5rem; font-size: .75rem; font-weight: 500; }
.essay-banner-title { margin-bottom: 1rem; font-size: 2.25rem; font-weight: 700; line-height: 1.2; display: block; }
.essay-banner-bottom { justify-content: space-between; align-items: center; display: flex; }
.essay-banner-desc { opacity: .9; font-size: .875rem; line-height: 1.5; }
.essay-banner-btn { color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: #fff3; border: 1px solid #ffffff4d; border-radius: 25px; align-items: center; gap: .5rem; padding: .625rem 1.5rem; font-size: .875rem; font-weight: 600; text-decoration: none; transition: all .3s; display: inline-flex; }
.essay-banner-btn svg { flex-shrink: 0; }
.essay-banner-btn:hover { background: #ffffff4d; box-shadow: 0 4px 12px #0003; }

/* 即刻瀑布流 */
.essay-list-container { width: 100%; margin-top: 1rem; }
.essay-content-wrapper { width: 100%; position: relative; }
.essay-page .timeline { visibility: visible; opacity: 1; width: 100%; }
.essay-page .bber-list { margin: 0; padding: 0; list-style: none; }
.essay-page .bber-list:not(.is-masonry) { grid-template-columns: repeat(2, 1fr); gap: 16px; display: grid; }
.essay-page .bber-list.is-masonry { position: relative; transition: height .3s; }
.essay-page .bber-list.is-masonry .bber-item { position: absolute; top: 0; left: 0; transition: left .3s, top .3s, width .3s; }
.bber-item { background: var(--anzhiyu-card-bg); border: var(--style-border-always); box-shadow: var(--anzhiyu-shadow-border); border-radius: 12px; flex-flow: column; justify-content: space-between; align-items: flex-start; padding: 1rem 1rem .5rem; transition: all .3s; display: flex; }
.bber-item hr { border: none; border-top: 1px dashed var(--anzhiyu-card-border); width: 100%; margin: 1rem 0; }
.bber-content { width: 100%; }
.bber-content .datacont { width: 100%; color: var(--anzhiyu-fontcolor); text-align: justify; border-radius: 12px; flex-direction: column; margin-bottom: .5rem; font-size: .8rem; font-weight: 700; line-height: 1.38; display: flex; overflow-wrap: anywhere; word-break: break-word; }
.bber-container-img { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; display: grid; }
.bber-container-img .bber-content-img { cursor: pointer; background: var(--anzhiyu-secondbg); border-radius: 8px; width: 100%; padding-bottom: 100%; text-decoration: none; display: block; position: relative; overflow: hidden; }
.bber-container-img .bber-content-img img { object-fit: cover; width: 100%; height: 100%; transition: transform .3s; position: absolute; top: 0; left: 0; }
.bber-container-img .bber-content-img:hover img { transform: scale(1.03); }
.bber-bottom { justify-content: space-between; align-items: center; width: 100%; display: flex; }
.bber-info { flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .8125rem; display: flex; }
.bber-info .bber-info-time, .bber-info .bber-info-from, .bber-info .bber-content-link { color: var(--anzhiyu-fontcolor); cursor: default; background-color: var(--anzhiyu-gray-op); border-radius: 20px; align-items: center; gap: .2rem; padding: .25rem .5rem; font-size: .7rem; display: flex; }
.bber-info .bber-info-time .datatime, .bber-info .bber-info-from .datatime { font-size: .75rem; }
.bber-info .bber-content-link { color: #f56c6c; cursor: pointer; background-color: #f56c6c21; text-decoration: none; transition: opacity .3s; }
.bber-info .bber-content-link:hover { opacity: .7; }
.bber-reply { width: 32px; height: 32px; color: var(--anzhiyu-secondtext); border-radius: 8px; justify-content: center; align-items: center; transition: all .3s; display: flex; }
.bber-reply svg { width: 1.125rem; height: 1.125rem; }
.bber-reply:hover { color: var(--anzhiyu-main); background: var(--anzhiyu-main-op); }
.essay-empty { color: var(--anzhiyu-secondtext); flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 3rem 0; display: flex; }

/* 留言板 */
.msg-section { background: var(--anzhiyu-card-bg); border: var(--style-border-always); box-shadow: var(--anzhiyu-shadow-border); border-radius: 12px; margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.msg-head-row { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; display: flex; }
.msg-title { color: var(--anzhiyu-fontcolor); align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; display: flex; }
.msg-title svg { color: var(--anzhiyu-main); }
.msg-title sup { color: var(--anzhiyu-main); margin-left: 2px; font-size: .7rem; font-weight: 700; }
.msg-tip { color: var(--anzhiyu-secondtext); font-size: .75rem; }
.msg-flash { border-radius: 8px; margin-top: 1rem; padding: .5rem .75rem; font-size: .8rem; }
.msg-flash.ok { color: var(--anzhiyu-main); background: var(--anzhiyu-main-op); }
.msg-flash.warn { color: #f56c6c; background: #f56c6c21; }
.msg-form { margin-top: 1rem; }
.msg-box { position: relative; }
.msg-box textarea { resize: vertical; min-height: 96px; color: var(--anzhiyu-fontcolor); background: var(--anzhiyu-card-bg); border: var(--style-border); border-radius: 12px; outline: none; width: 100%; padding: .75rem 1rem; font-size: .85rem; font-family: inherit; transition: all .3s; }
.msg-box textarea:hover, .msg-box textarea:focus { border-color: var(--anzhiyu-main); box-shadow: var(--anzhiyu-shadow-main); }
.msg-count { color: var(--anzhiyu-secondtext); pointer-events: none; font-size: .7rem; position: absolute; bottom: .5rem; right: .75rem; }
.msg-meta { flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; display: flex; }
.msg-meta .msg-send { flex: 0 0 auto; }
.msg-field { color: var(--anzhiyu-secondtext); flex: 1 1 180px; align-items: center; gap: .4rem; min-width: 0; font-size: .8rem; display: flex; }
.msg-field input { color: var(--anzhiyu-fontcolor); background: var(--anzhiyu-card-bg); border: var(--style-border); border-radius: 8px; outline: none; flex: 1; min-width: 0; padding: .4rem .6rem; font-size: .8rem; font-family: inherit; transition: all .3s; }
.msg-field input:focus { border-color: var(--anzhiyu-main); background: var(--anzhiyu-card-bg); }
.msg-hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msg-send { color: var(--anzhiyu-white); cursor: pointer; background: var(--anzhiyu-main); border: none; border-radius: 20px; padding: .5rem 1.5rem; font-size: .85rem; font-weight: 600; transition: all .3s; }
.msg-send:hover { background: var(--accent-dark); box-shadow: var(--anzhiyu-shadow-main); }
.msg-list { flex-direction: column; gap: 1rem; margin-top: 1.25rem; display: flex; }
.msg-item { border-bottom: 1px dashed var(--anzhiyu-card-border); align-items: flex-start; gap: .75rem; padding-bottom: 1rem; display: flex; }
.msg-item:last-child { border-bottom: none; padding-bottom: 0; }
.msg-avatar { object-fit: cover; background: var(--anzhiyu-secondbg); border-radius: 50%; flex-shrink: 0; width: 40px; height: 40px; }
.msg-avatar-fallback { color: #fff; justify-content: center; align-items: center; font-size: 1rem; font-weight: 700; display: flex; background: var(--anzhiyu-logo-color); }
.msg-main { flex: 1; min-width: 0; padding: .1rem 0 .2rem; }
.msg-head { flex-wrap: wrap; align-items: baseline; gap: .6rem; display: flex; }
.msg-name { color: var(--anzhiyu-fontcolor); font-size: .82rem; font-weight: 700; text-decoration: none; }
a.msg-name:hover { color: var(--anzhiyu-main); }
.msg-time { color: var(--anzhiyu-secondtext); font-size: .7rem; }
.msg-text { color: var(--anzhiyu-fontcolor); margin-top: .3rem; font-size: .85rem; line-height: 1.6; word-break: break-word; text-align: justify; }
.msg-empty { text-align: center; color: var(--anzhiyu-secondtext); padding: 1.5rem 0; font-size: .8rem; }

/* 留言输入工具条：表情 / 配图 / Markdown 预览 */
.msg-bar { align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem 0; display: flex; }
.msg-tools { align-items: center; gap: .15rem; display: flex; }
.msg-tool { background: none; border: none; cursor: pointer; color: var(--anzhiyu-secondtext); border-radius: 8px; justify-content: center; align-items: center; width: 32px; height: 32px; display: flex; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.msg-tool:hover { color: var(--anzhiyu-main); background: var(--anzhiyu-secondbg); }
.msg-tool.on { color: var(--anzhiyu-main); background: var(--anzhiyu-card-bg); box-shadow: var(--style-border-hover, var(--anzhiyu-shadow-border)); }
.msg-tool-md { color: var(--anzhiyu-main); }
.msg-tool.busy { opacity: .45; pointer-events: none; }
/* OwO 图标是 1em，不写死会继承表单的 13.3px；参考站实测 16px */
.msg-tool[data-act="emoji"] { font-size: 16px; }
.msg-hint { color: var(--anzhiyu-secondtext); margin-left: .25rem; font-size: .7rem; }
.msg-count { position: static; }
/* Sticker-Heo 表情面板：尺寸、配色、动画逐项对齐参考站的 OwO 面板 */
.owo-portal { pointer-events: none; inset: 0; z-index: 1998; position: fixed; }
.owo-portal > * { pointer-events: auto; }
.owo-mask { background: none; inset: 0; z-index: 1999; position: fixed; transition: opacity .15s; }
.owo-panel {
    --owo-top: auto; --owo-left: 0;
    background-color: var(--anzhiyu-card-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border: var(--style-border-always);
    box-shadow: rgba(0, 0, 0, .12) 0 8px 24px -4px;
    border-radius: 8px;
    min-width: 31.25rem;
    max-width: 500px;
    top: var(--owo-top);
    left: var(--owo-left);
    z-index: 2000;
    overflow: hidden;
    position: fixed;
    animation: .2s ease-out owoPanelIn;
}
.owo-closing .owo-mask, .owo-portal.closing .owo-mask { opacity: 0; }
.owo-portal.closing .owo-panel { animation: .15s ease-in owoPanelOut forwards; }
.owo-items { list-style: none; max-height: 200px; margin: 0; padding: 10px; overflow-y: auto; }
/* 参考站面板滚动条实测 10px；留着浏览器默认的 15px，每格宽度会差 0.7px，七列就跟着错位 */
.owo-items::-webkit-scrollbar { width: 10px; }
.owo-items::-webkit-scrollbar-track { background: none; }
.owo-items::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 5px; }
.owo-items::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
.owo-items li {
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    width: 14%;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 14px;
    list-style: none;
    display: inline-block;
    transition: background-color .3s, transform .15s;
    animation: .3s ease-out owoItemIn both;
}
.owo-items li:nth-child(-n+7) { animation-delay: 50ms; }
.owo-items li:nth-child(n+8):nth-child(-n+14) { animation-delay: .1s; }
.owo-items li:nth-child(n+15):nth-child(-n+21) { animation-delay: .15s; }
.owo-items li:nth-child(n+22):nth-child(-n+28) { animation-delay: .2s; }
.owo-items li:nth-child(n+29) { animation-delay: .22s; }
.owo-items li:hover { background-color: rgba(144, 147, 153, .13); transform: scale(1.1); }
.owo-items li:active { transform: scale(.95); }
.owo-items img { object-fit: contain; width: 2.25rem; max-width: 100%; height: 2.25rem; }
.owo-bar { border-top: 1px solid rgba(144, 147, 153, .31); border-radius: 0 0 4px 4px; width: 100%; }
.owo-packages { white-space: nowrap; text-align: left; background: var(--anzhiyu-background); height: 48px; margin: 0; padding: 0; font-size: 0; list-style: none; overflow-x: auto; }
.owo-packages li { justify-content: center; align-items: center; display: inline-flex; width: 50px; height: 48px; padding: 0 10px; font-size: 28px; line-height: 48px; list-style: none; overflow: hidden; cursor: pointer; transition: .3s; }
.owo-packages li img { object-fit: contain; width: 28px; height: 28px; }
.owo-packages li:first-child { border-radius: 0 0 0 3px; }
.owo-packages li.active { background: var(--anzhiyu-card-bg); }
@keyframes owoPanelIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes owoPanelOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95) translateY(4px); } }
@keyframes owoItemIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
/* 留言正文里的行内表情：照抄参考站 .anzhiyu-owo-emotion，不能被 .msg-text img 的块级配图样式接管 */
.msg-text img.msg-emoji-img, .msg-preview-body img.msg-emoji-img { object-fit: contain; border-radius: 0; margin: 0; width: 3rem; height: auto; max-height: none; display: inline; }
.msg-preview { animation: msg-fade-in .22s ease; background: var(--anzhiyu-card-bg); border: var(--style-border); border-radius: 12px; margin-top: .75rem; padding: .75rem 1rem; }
.msg-preview[hidden] { display: none; }
.msg-preview-label { color: var(--anzhiyu-secondtext); border-bottom: 1px dashed var(--anzhiyu-card-border); margin-bottom: .6rem; padding-bottom: .5rem; font-size: .75rem; }
.msg-preview-empty { color: var(--anzhiyu-secondtext); font-size: .8rem; }
.msg-preview-body { color: var(--anzhiyu-fontcolor); font-size: .85rem; line-height: 1.6; word-break: break-word; }
.msg-text img, .msg-preview-body img { object-fit: cover; border-radius: 12px; margin: .5rem 0; max-width: 100%; max-height: 320px; display: block; }
.msg-text a, .msg-preview-body a { color: var(--anzhiyu-main); text-decoration: none; }
.msg-text a:hover, .msg-preview-body a:hover { text-decoration: underline; }
.msg-text code, .msg-preview-body code { background: var(--anzhiyu-secondbg); border-radius: 4px; padding: .1rem .3rem; font-size: .8em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 768px) {
    .essay-page { padding: 1rem; }
    .essay-banner { height: 220px; }
    .essay-banner-inner { padding: 1.5rem; }
    .essay-banner-title { font-size: 1.5rem; }
    .essay-banner-bottom { flex-wrap: wrap; gap: .75rem; }
    .bber-item { padding: 1rem 1rem .5rem; }
    .bber-content .datacont { font-size: .875rem; }
    .bber-info { font-size: .75rem; }
    .bber-container-img { gap: .375rem; }
    .msg-section { padding: 1rem; }
    .msg-meta { flex-direction: column; align-items: stretch; }
    .msg-field { flex: 0 0 auto; justify-content: space-between; }
    .msg-field input, .msg-field:nth-child(1) input, .msg-field:nth-child(2) input, .msg-field:nth-child(3) input { flex: 1; width: auto; min-width: 0; }
    .msg-send { width: 100%; }
    .owo-panel { min-width: 0; width: calc(100vw - 16px); }
}

/* 减弱动效：这些元素的初始状态是 opacity:0，动画一停就必须直接落到可见值，否则整页空白 */
@media (prefers-reduced-motion: reduce) {
    .essay-page, .essay-page > * { transition: none !important; animation: none !important; opacity: 1 !important; }
    .owo-portal *, .msg-preview { animation: none !important; }
    .reveal, .reveal.revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ===== 文字光标 =====
   只有正文类文字（留言内容）挂文本光标；标题、标签、日期、篇数这类不显示光标，
   选中能力由 user-select 保证，不靠光标提示。 */
.comment-card .comment-content { cursor: text; }