/* ============ 🎨 3.0 极致力学配色系统 ============ */
:root {
    /* --- ☀️ 浅色模式：【晨曦微光】(Cozy Morning) --- */
    /* 核心理念：去工业味，回归纸张的温度 */

    /* 核心色：陶土橙 (比之前的亮橙更沉稳、高级) */
    --primary: #ea580c;
    /* 渐变：由橙入金，像清晨洒在桌面的阳光 */
    --primary-gradient: linear-gradient(135deg, #ea580c 0%, #d97706 100%);

    /* 背景：不再是冰冷的灰白，而是带有温度的“云峰白” (Warm Paper) */
    /* 这种颜色在强光下不刺眼，弱光下显温馨 */
    --bg-body: #fdfcfb;

    /* 玻璃：高透光磨砂，像一张雾面纸 */
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(0, 0, 0, 0.05); /* 边框极淡，若有若无 */
    --glass-blur: blur(25px);

    /* 文字：使用深岩灰，避免纯黑(#000)对眼睛的锐利刺激 */
    --text-main: #334155;
    --text-muted: #94a3b8;

    /* 卡片：纯白，配合极柔和的阴影 */
    --card-bg: #ffffff;
    --shadow-sm: 0 10px 40px -10px rgba(0, 0, 0, 0.03); /* 阴影似有似无 */

    /* 布局变量保持不变 */
    --radius-box: 24px;
    --radius-pill: 9999px;
    --layout-gap: 2rem;
    --layout-padding: 2rem;
    --nav-height: 60px;
    --content-top-gap: 1rem;
}

[data-theme="dark"] {
    /* --- 🌙 深色模式：【午夜柔光】(Soft Midnight) --- */
    /* 核心理念：放弃纯黑，使用带一点点色相的深灰，更有呼吸感 */

    /* 核心色：保持荧光橘，作为暗夜里的点缀 */
    --primary: #fb923c;
    --primary-gradient: linear-gradient(135deg, #f97316 0%, #db2777 100%);

    /* 背景：改为深岩灰 (Zinc-950)，比纯黑更柔和，像深夜的沥青路面 */
    /* 这种颜色能减少 OLED 屏幕上的拖影，也更护眼 */
    --bg-body: #18181b;

    /* 玻璃：半透明的深灰，而不是死黑 */
    --glass-bg: rgba(39, 39, 42, 0.75);

    /* 边框：稍微明显一点的柔边，增加精致感 */
    --glass-border: rgba(255, 255, 255, 0.08);

    /* 卡片：比背景稍亮，形成自然的层级 */
    /* 使用 Zinc-900，营造一种“浮在背景上”的感觉 */
    --card-bg: #27272a;

    /* 阴影：柔和的扩散阴影，不用太黑 */
    --shadow-sm: 0 10px 40px -10px rgba(0, 0, 0, 0.6);

    /* 文字：保持高亮灰白 */
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
}

/* ============ 🌊 氛围流体背景 (Atmosphere) ============ */
body::before {
    content: "";
    position: fixed;
    top: -20%; left: -20%; width: 140%; height: 140%; z-index: -2;
    background-color: var(--bg-body);
    transition: background-color 0.5s ease;

    /* ☀️ 浅色模式下的氛围光：极淡，几乎看不见，只提供润色 */
    background-image:
            radial-gradient(at 10% 10%, rgba(234, 88, 12, 0.03) 0px, transparent 50%), /* 极淡橙 */
            radial-gradient(at 90% 10%, rgba(14, 165, 233, 0.03) 0px, transparent 50%), /* 极淡蓝 */
            radial-gradient(at 90% 90%, rgba(236, 72, 153, 0.02) 0px, transparent 50%); /* 极淡粉 */

    background-size: cover;
    animation: flow-simple 20s ease-in-out infinite alternate;
}

/* 🌙 深色模式下的氛围光：强烈的极光感 */
[data-theme="dark"] body::before {
    background-image:
            radial-gradient(at 20% 20%, rgba(249, 115, 22, 0.08) 0px, transparent 50%), /* 橙光 (调淡) */
            radial-gradient(at 80% 0%, rgba(139, 92, 246, 0.1) 0px, transparent 40%),  /* 紫光 (调淡) */
            radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%); /* 绿光 (调淡) */

    filter: blur(80px); /* 模糊度拉大，让光晕更柔和 */
    opacity: 1; /* 既然光调淡了，不透明度可以拉满，保证色彩可见 */
}
/* 3. 动画：只平移，不旋转 (解决毛玻璃闪烁和卡顿的关键) */
@keyframes flow-simple {
    0% {
        transform: translate(0, 0);
    }
    100% {
        /* 只移动 5%，既有流动感，又不会露馅 */
        transform: translate(-5%, -5%);
    }
}

/* ============ 📐 主布局 (修复内容被遮挡) ============ */
.layout-container {
    flex-grow: 1;
    height: 100vh;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--layout-gap);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
    padding-bottom: var(--layout-padding);
    box-sizing: border-box;

    /* ✨ 关键修改 3：内容顶部的留白也要加上灵动岛的高度，防止刚进去就被导航栏挡住 */
    padding-top: calc(var(--nav-height) + var(--content-top-gap) + env(safe-area-inset-top));

    transition: padding-top 0.3s ease-in-out;
}

body > nav.nav-hidden ~ .layout-container {
    padding-top: calc(var(--content-top-gap) + env(safe-area-inset-top));
}

/* 移动端适配部分也要同步更新 padding-top */
@media (max-width: 992px) {
    .layout-container {
        /* ...之前的样式... */
        grid-template-columns: 1fr;
        overflow-y: auto;
        display: block;
        height: auto;
        padding: 1rem;
        gap: 1rem;
        min-height: 100vh;

        /* ✨ 同步更新移动端 padding */
        padding-top: calc(var(--nav-height) + var(--content-top-gap) + env(safe-area-inset-top));
    }

    body > nav.nav-hidden ~ .layout-container {
        /* 导航栏收起时，padding 不变 */
        padding-top: calc(var(--nav-height) + var(--content-top-gap) + env(safe-area-inset-top));
    }
}

#posts-container {
    min-height: 80vh;
}

/* ============ 📱 移动端布局适配 ============ */
@media (max-width: 992px) {
    .layout-container {
        grid-template-columns: 1fr;
        overflow-y: auto;
        display: block;
        height: auto;
        padding: 1rem;
        gap: 1rem;
        padding-top: calc(var(--nav-height) + var(--content-top-gap) + env(safe-area-inset-top));
        min-height: 100vh;
    }

    body > nav.nav-hidden ~ .layout-container {
        padding-top: calc(var(--nav-height) + var(--content-top-gap) + env(safe-area-inset-top));
    }

    html, body {
        width: 100%;
        overflow-x: hidden !important; /* 🚫 强制禁止横向滚动，这是关键 */
        max-width: 100vw;              /* 确保不超过屏幕宽 */
        margin: 0;
        padding: 0;
    }

    .sidebar {
        height: auto;
        border-right: none;
        border: 1px solid var(--glass-border);
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 0.8rem !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .content-area {
        padding: 0;
        overflow: visible;
        height: auto;
    }

    #sidebar-toc {
        display: none !important;
    }

    #sidebar-main {
        display: block !important;
    }

    .search-box {
        margin-bottom: 1rem !important;
    }

    .search-box input {
        background: var(--card-bg) !important;
        height: 3.2rem !important;
        font-size: 1rem !important;
    }

    .search-icon {
        top: 50% !important;
    }

    .category-nav {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        padding-left: 2px;
        padding-right: 2px;
    }

    .category-nav::-webkit-scrollbar {
        display: none;
    }

    .category-nav h6 {
        display: none;
    }

    .category-nav button {
        width: auto !important;
        flex-shrink: 0;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        padding: 12px 24px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--glass-border) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        color: var(--text-muted);
    }

    .category-nav button span:first-child {
        gap: 8px;
    }

    .category-nav button.active {
        background: var(--primary) !important;
        color: white !important;
        border-color: var(--primary) !important;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
        transform: translateY(-1px);
    }

    .category-nav button .cat-count {
        display: none !important;
    }

    .sidebar-tags {
        display: none !important;
    }

    .post-card {
        padding: 1.5rem !important;
        border-radius: 20px !important;
        margin-bottom: 1.5rem !important;
    }

    .post-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.35;
    }

    .post-summary {
        font-size: 1rem !important;
        margin-bottom: 1.2rem !important;
        -webkit-line-clamp: 3;
    }

    #list-heading {
        font-size: 1.8rem !important;
        margin-top: 0.5rem;
    }

    #list-subheading {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
}

body > nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    max-width: 1600px;
    height: 100%;
}

body > nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

body > nav li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

body > nav ul li strong {
    font-size: 1.3rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-right: 1.5rem;
}

body > nav button, body > nav a[role="button"] {
    font-size: 0.9rem;
    padding: 0 1rem;
    height: 2.5rem;
    line-height: normal;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    transition: all 0.2s;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle {
    font-size: 1.2rem;
    padding: 0 0.8rem;
}

body > nav button:hover, body > nav a[role="button"]:hover {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
}

body > nav a[role="button"].contrast, body > nav a[role="button"].secondary {
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ============ 🧱 侧边栏分块重构 (Bento Style) ============ */
.sidebar {
    height: 100%;
    overflow-y: auto;
    position: relative;
    /* ✨ 关键修改：侧边栏容器本身透明，不再有边框和背景 */
    background: transparent !important;
    border-right: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none;
    box-shadow: none !important;
    padding: 2.5rem 0; /* 只留上下间距，不需要左右内边距，卡片自己有 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 卡片之间的间距 */
    z-index: 10;
    padding-top: 0 !important;
    padding-bottom: 40px;
}

.sidebar::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* ✨ 新增：通用的侧边栏卡片样式 (Glass Card) */
.sidebar-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-box);
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

/* 鼠标悬停卡片上浮 */
.sidebar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(79, 70, 229, 0.3);
}

/* ============ ⏰ 程序钟 v3.0 (Bento Widget 独立样式) ============ */
.clock-card {
    /* 继承基础卡片样式，但额外增加一些 Widget 特有的质感 */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    padding: 1.5rem !important; /* Widget 稍微紧凑一点 */
}

[data-theme="dark"] .clock-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.4) 100%);
}

/* 顶部：问候语 */
.clock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.clock-greeting {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* 中部：时间 */
.clock-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0 1.5rem 0;
}

.clock-time {
    font-family: 'Inter', system-ui, sans-serif; /* 用非等宽字体看起来更现代 */
    font-variant-numeric: tabular-nums; /* 保持数字等宽防止跳动 */
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -1px;
    cursor: pointer;
    text-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
    transition: transform 0.2s;
}

.clock-time:active {
    transform: scale(0.95);
}

.mode-badge {
    margin-top: 4px;
    font-size: 0.6rem;
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
    opacity: 0.8;
}

/* 底部：进度条 */
.clock-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}


.progress-track {
    flex-grow: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 99px;
    overflow: hidden;
}

[data-theme="dark"] .progress-track {
    background: rgba(255, 255, 255, 0.1);
}

.progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 针对不同时间的颜色定义 */
.fill-day {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.fill-year {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

/* 修改 Profile Card 去掉下边框虚线，因为现在是独立卡片了 */
.profile-card {
    text-align: center;
    /* 移除原来的 border-bottom */
    border-bottom: none;
    margin-bottom: 0; /* 这里的margin由 sidebar gap控制 */
    padding: 2rem 1.5rem; /* 稍微加大内边距 */
}

/* ============ 👤 个人资料卡片样式 (优化版) ============ */
.profile-card {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1rem;
    border-bottom: 1px dashed var(--glass-border);
    transition: all 0.3s ease;
}

.profile-avatar-container {
    margin-bottom: 0.8rem;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--card-bg);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    object-fit: cover;
}

.profile-avatar:hover {
    transform: scale(1.08) rotate(3deg);
}

.profile-info {
    flex-grow: 1;
    min-width: 0;
}

.profile-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.profile-bio {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
    padding: 0;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-social {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 99px;
    text-decoration: none;
    background: rgba(79, 70, 229, 0.06);
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all 0.2s;
    font-weight: 700;
}

.social-btn:hover {
    background: var(--primary);
    color: white;
}

/* ============ 📱 移动端名片优化 ============ */
@media (max-width: 992px) {
    .profile-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1rem 1.2rem;
        margin-bottom: 1rem !important;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-box);
    }

    .profile-avatar-container {
        margin-bottom: 0;
    }

    .profile-avatar {
        width: 52px;
        height: 52px;
        border-width: 2px;
        box-shadow: none;
    }

    .profile-name {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    .profile-bio {
        margin: 0;
        font-size: 0.75rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 1;
        display: block;
    }

    .profile-social {
        display: none;
    }
}


/* ============ 📖 目录 (TOC) 样式 ============ */
#toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#toc-list li {
    margin-bottom: 0.4rem;
}

.toc-link {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
}

.toc-h1 {
    font-weight: 700;
    margin-top: 1rem;
    color: var(--text-main);
}

.toc-h2 {
    padding-left: 12px;
}

.toc-h3 {
    padding-left: 24px;
    font-size: 0.85rem;
}

.toc-link:hover {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.05);
}

.toc-link.active {
    color: var(--primary);
    border-left-color: var(--primary);
    background: linear-gradient(to right, rgba(79, 70, 229, 0.1), transparent);
    font-weight: 600;
}

.search-box {
    margin-bottom: 2.5rem;
    position: relative;
}

.search-box input {
    padding-left: 2.8rem;
    border-radius: var(--radius-pill);
    height: 3.2rem;
    font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    color: var(--text-main);
}

[data-theme="dark"] .search-box input {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

.search-box input:focus {
    background-color: var(--card-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    opacity: 0.8;
}

.category-nav h6, .sidebar-tags h6, .sidebar-toc-header {
    padding-left: 1rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    opacity: 0.6;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.category-nav button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
}

.category-nav button span:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-nav button:hover {
    background: rgba(79, 70, 229, 0.08);
    color: var(--text-main);
}

.category-nav button.active {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.4);
    border-color: transparent;
}

.cat-count {
    font-size: 0.75rem;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
    font-weight: 700;
    transition: all 0.2s;
}

[data-theme="dark"] .cat-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.active .cat-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: none;
}

.sidebar-tags {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    animation: fadeIn 0.5s ease-out;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0.5rem;
}

.tag-cloud .tag-pill {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    padding: 4px 10px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

[data-theme="dark"] .tag-cloud .tag-pill {
    background: rgba(255, 255, 255, 0.05);
}

.tag-cloud .tag-pill:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.content-area {
    height: 100%;
    overflow-y: auto;
    padding: 0 2.5rem;
    scroll-behavior: smooth;
}

.content-area::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#list-heading {
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, var(--text-main), var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.post-card {
    background: var(--card-bg);
    border-radius: var(--radius-box);
    padding: 2.2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
}

/* ✨ 新增：让卡片内部元素分层悬浮 */
.post-card h3 {
    transform: translateZ(50px); /* 标题浮得最高 */
}

.post-card .post-summary {
    transform: translateZ(35px); /* 摘要在中间 */
}

.post-card .badge,
.post-card .read-more {
    transform: translateZ(30px); /* 标签和按钮也浮起来 */
}

.post-card .post-meta {
    transform: translateZ(10px); /* 底部元数据稍微浮起 */
}

.post-card:hover {
    transform: translateY(-8px) scale(1.01); /* 稍微放大一点点 */
    box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.15), /* 主阴影 */ 0 0 0 1px rgba(79, 70, 229, 0.4); /* 边框高亮发光 */
    border-color: transparent; /* 边框交给 box-shadow 处理 */
}

/* 给标题加一个颜色过渡 */
.post-card:hover h3 {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s;
}

.post-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.post-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: monospace;
    opacity: 0.8;
}

.post-card h3 {
    margin: 0.5rem 0 0.8rem 0;
    font-size: 1.6rem;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.post-summary {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.post-meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-meta .tags-container {
    margin-right: auto;
}

.read-more {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s;
    white-space: nowrap;
}

.post-card:hover .read-more {
    gap: 8px;
}

.badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-tech {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
}

.badge-life {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-share {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.tags-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 修改标签样式：模仿截图里的 Gear 标签 (深底白字) */
.tag-pill {
    /* 截图里是深蓝灰背景 */
    background: #334155;
    border: 1px solid transparent;
    padding: 4px 12px;
    border-radius: 6px; /* 稍微方一点，像截图里的 */
    font-size: 0.8rem;
    color: #ffffff !important; /* 强制白字 */
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tag-pill:hover {
    background: var(--primary); /* 悬停变橙色 */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(230, 126, 34, 0.3);
}

/* 深色模式下标签微调 */
[data-theme="dark"] .tag-pill {
    background: #475569; /* 稍微亮一点的灰，区分背景 */
    border: 1px solid rgba(255,255,255,0.1);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
}

.pagination button {
    width: auto;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: transparent;
    box-shadow: none;
}

.pagination button:not(:disabled):hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.pagination span {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 1rem;
}

#view-detail article {
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-box);
    padding: 4rem 5rem;
    border: 1px solid var(--glass-border);
    animation: fadeUp 0.5s ease-out;
}

@media (max-width: 768px) {
    #view-detail article {
        padding: 2rem 1.5rem;
    }
}

#detail-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

.markdown-body {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-main);
    margin-top: 2rem;
}

.markdown-body pre {
    background: #282c34;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.markdown-body code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.markdown-body p code, .markdown-body li code {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;

    /* ✨ 强制长单词（如包名）换行，防止截断 */
    word-break: break-all;
    white-space: normal;
}

[data-theme="dark"] .markdown-body p code, [data-theme="dark"] .markdown-body li code {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    scroll-margin-top: 100px;
}

/* ============ 📱 移动端表格适配修复 ============ */
.markdown-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.markdown-body table th,
.markdown-body table td {
    white-space: nowrap;
    min-width: 100px;
    padding: 0.8rem;
}

.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

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

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

dialog article {
    border-radius: var(--radius-box);
    border-top: 6px solid var(--primary);
    background: var(--card-bg);
}

/* ============ 🟢 进度条与悬浮球样式 ============ */
#scroll-progress {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#scroll-progress.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

#scroll-progress:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

#btn-back-fab {
    position: fixed;
    bottom: calc(92px + env(safe-area-inset-bottom));
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0 !important;
}

#btn-back-fab:hover {
    color: var(--primary);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
}

body.is-reading #btn-back-fab {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

/* ============ 🔥 Toast 提示样式 ============ */
#swipe-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 10px);
    background: var(--glass-bg);
    color: var(--primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#swipe-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    box-shadow: 0 12px 40px rgba(79, 70, 229, 0.25);
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.1s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#scroll-val {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: monospace;
}

#scroll-icon {
    position: absolute;
    font-size: 1.2rem;
    color: var(--primary);
    display: none;
    animation: bounce 2s infinite;
}

#scroll-progress.is-bottom #scroll-val {
    display: none;
}

#scroll-progress.is-bottom #scroll-icon {
    display: block;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* ============ 🆕 移动端目录悬浮组件 (Mobile TOC) ============ */
#mobile-toc-fab {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 30px;
    z-index: 1001;
    display: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    #mobile-toc-fab.visible {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

#mobile-toc-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s;
    padding: 0;
    margin-bottom: 0 !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#mobile-toc-btn:hover {
    color: var(--primary);
    transform: scale(1.05);
}

#mobile-toc-popup {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 260px;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform-origin: bottom left;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    pointer-events: none;
    visibility: hidden;
}

#mobile-toc-popup.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
    visibility: visible;
}

#mobile-toc-list {
    padding-left: 1.5rem;
    margin: 0;
}

#mobile-toc-list li {
    margin-bottom: 4px;
}

#mobile-toc-list .toc-link {
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 8px;
}

#mobile-toc-popup::-webkit-scrollbar {
    width: 4px;
}

#mobile-toc-popup::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

#mobile-toc-popup::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

[data-theme="dark"] #mobile-toc-popup::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

#mobile-toc-list .toc-link.active {
    background: var(--primary);
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

/* ============ 📖 🆕 阅读模式优化 (针对 PC 端) ============ */
@media (min-width: 992px) {
    body.is-reading .layout-container {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 4rem;
        max-width: 1400px;
    }

    /* 1. 侧边栏容器：透明、固定定位 */
    body.is-reading .sidebar {
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 1rem 0 0 0;
        height: auto;
        position: sticky;
        top: 100px;
        max-height: calc(100vh - 120px);
        transition: top 0.3s ease-in-out;
    }

    /* 2. ✨✨✨ 关键修改：让目录卡片本身变透明 ✨✨✨ */
    body.is-reading #sidebar-toc {
        background: transparent !important; /* 去掉卡片背景 */
        box-shadow: none !important; /* 去掉阴影 */
        border: none !important; /* 去掉边框 */
        backdrop-filter: none !important; /* 去掉模糊 */
        padding: 0 !important; /* 去掉内边距，紧凑一点 */
    }

    body.is-reading nav.nav-hidden ~ .layout-container .sidebar {
        top: 40px;
    }

    /* 3. 目录左侧加一条细线，增加排版质感 */
    body.is-reading #toc-list {
        border-left: 2px solid var(--glass-border);
        margin-left: 10px; /* 稍微缩进一点 */
    }

    body.is-reading .toc-link {
        font-size: 0.85rem;
        padding: 4px 12px;
        border-radius: 0 4px 4px 0;
        border-left: none;
        opacity: 0.7;
        transition: all 0.2s;
    }

    body.is-reading .toc-link:hover,
    body.is-reading .toc-link.active {
        opacity: 1;
        background: rgba(79, 70, 229, 0.08); /* 悬停时淡淡的背景 */
        color: var(--primary);
    }

    body.is-reading .toc-link.active {
        border-left: 3px solid var(--primary);
        margin-left: -2px; /* 盖住左侧的细线 */
        font-weight: 700;
    }

    /* 隐藏其他组件 */
    body.is-reading #sidebar-main {
        display: none !important;
    }

    /* 返回列表按钮微调 */
    body.is-reading #sidebar-toc button {
        background: transparent;
        border: 1px dashed var(--glass-border);
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-top: 1rem;
        margin-left: 10px; /* 对齐左侧细线 */
        width: calc(100% - 10px);
    }

    body.is-reading #sidebar-toc button:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: rgba(79, 70, 229, 0.05);
    }

    body.is-reading #view-detail article {
        padding: 3rem 4rem;
    }
}

/* 🔥 文章底部导航栏样式 (FIXED: 左右等宽) */
.article-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    gap: 1rem;
}

.article-nav-btn {
    /* ✨ 关键修复：强制左右按钮等分宽度 */
    display: flex;
    flex: 1;
    width: 0;
    align-items: center;

    padding: 10px 20px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* 确保内部文字容器处理溢出 */
.article-nav-btn > div {
    width: 100%;
    overflow: hidden;
}

.article-nav-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.article-nav-title {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============ 📱 移动端超边界修复补丁 (折中优化版) ============ */
@media (max-width: 768px) {

    /* 1. 外层容器：左右只留 10px 的缝隙 (比原来的 16px 窄，但比 0 宽) */
    .layout-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .content-area {
        padding: 0 !important;
    }

    /* 2. 卡片本体 */
    #view-detail article {
        /* 宽度自动填满剩下的空间 */
        width: 100% !important;

        /* 恢复圆角，保持卡片质感 */
        border-radius: 16px !important;

        /* 内边距：上下 1.5rem，左右 1rem (约16px) */
        padding: 1.5rem 1rem !important;

        /* 确保文字不会贴到卡片边缘太近 */
        box-sizing: border-box;
    }

    /* 3. 标题区域微调 */
    .article-header {
        margin-bottom: 1.2rem !important;
        padding-bottom: 1rem !important;
    }

    #detail-title {
        font-size: 1.7rem !important;
        margin-bottom: 0.8rem !important;
        /* 标题稍微往里缩一点点，防止视觉压迫 */
        padding: 0 4px;
    }

    /* 4. 正文内容 */
    .markdown-body {
        overflow-x: hidden;
    }

    .markdown-body h1 {
        font-size: 1.6rem;
    }

    .markdown-body h2 {
        font-size: 1.35rem;
    }

    /* 代码块微调：稍微撑出去一点，增加层次感 */
    .markdown-body pre {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        width: calc(100% + 1rem);
        border-radius: 8px;
    }

    .article-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .article-nav-btn {
        width: 100%;
        text-align: center !important;
    }

    .article-nav-btn > div {
        text-align: center !important;
        max-width: none !important;
    }
}

/* PC端默认样式（配合下一步的 HTML 修改） */
.article-header {
    text-align: center;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 2rem;
}

/* ============ 🚀 滑动切换动画系统 ============ */
#posts-container {
    /* 确保动画期间布局稳定 */
    will-change: transform, opacity;
}

/* 1. 向左滑动 (进入下一个分类): 旧内容左移消失，新内容右侧进入 */
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-30px);
        opacity: 0;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 2. 向右滑动 (返回上一个分类): 旧内容右移消失，新内容左侧进入 */
@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(30px);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 应用动画的辅助类 */
.anim-out-left {
    animation: slideOutLeft 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

.anim-out-right {
    animation: slideOutRight 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-in-left {
    animation: slideInLeft 0.3s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

/* ============ 🚀 启动页：纯净数字地球 ============ */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 深蓝黑色背景，营造深邃感 */
    background-color: #0f172a;
    z-index: 9999;
    /* 居中设置其实不需要了，但留着也无妨 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 页面上滑消失的过渡动画 */
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.3s ease 0.5s; /* 增加一个透明度消失，更柔和 */
    transform-origin: top center;
    overflow: hidden;
}

/* 隐藏状态：向上滑动并消失 */
#splash-screen.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Canvas 画布铺满全屏 */
#globe-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 不需要 z-index 了，因为没有文字挡在上面 */
}

/* ============ 💀 骨架屏动画 ============ */
.skeleton {
    background: #e5e7eb;
    background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0.6) 60%,
            rgba(255, 255, 255, 0)
    );
    background-size: 200% 100%;
    background-position: -150% 0;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

[data-theme="dark"] .skeleton {
    background: #1e293b;
    background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.03) 20%,
            rgba(255, 255, 255, 0.05) 60%,
            rgba(255, 255, 255, 0)
    );
}

@keyframes shimmer {
    to {
        background-position: 150% 0;
    }
}

.skeleton-card {
    background: var(--card-bg);
    border-radius: var(--radius-box);
    padding: 2.2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--glass-border);
}

.s-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.s-badge {
    width: 60px;
    height: 24px;
}

.s-date {
    width: 100px;
    height: 20px;
}

.s-title {
    width: 70%;
    height: 32px;
    margin-bottom: 1rem;
}

.s-line {
    width: 100%;
    height: 16px;
    margin-bottom: 0.8rem;
}

.s-line.short {
    width: 60%;
}

/* ============ 🎭 滚动显现 ============ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ 🖱️ PC端滚动条美化 ============ */
@media (min-width: 993px) {
    /* 整个滚动条宽度 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* 滚动槽 (轨道) - 透明 */
    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* 滚动滑块 - 半透明灰色圆角 */
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        border: 2px solid transparent; /* 制造内缩效果 */
        background-clip: content-box;
    }

    /* 鼠标悬停时变深 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }

    /* 深色模式适配 */
    [data-theme="dark"] ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }
}

/* ============ 🪜 侧边栏阶梯动画 (PC) ============ */
@media (min-width: 993px) {
    /* 初始状态：隐形且下移 */
    #sidebar-main > * {
        opacity: 0;
        transform: translateY(20px);
        animation: sidebarSlideIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* 依次延迟执行动画 */
    #sidebar-main > *:nth-child(1) {
        animation-delay: 0.1s;
    }

    /* 头像 */
    #sidebar-main > *:nth-child(2) {
        animation-delay: 0.2s;
    }

    /* 搜索 */
    #sidebar-main > *:nth-child(3) {
        animation-delay: 0.3s;
    }

    /* 分类 */
    #sidebar-main > *:nth-child(4) {
        animation-delay: 0.4s;
    }

    /* 标签 */
    @keyframes sidebarSlideIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.cursor {
    display: inline-block;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ============ 👆 移动端 Q 弹触摸反馈 ============ */
@media (max-width: 992px) {
    /* 卡片按压效果 */
    .post-card:active {
        transform: scale(0.96) !important; /* 覆盖原本的 hover 效果 */
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: rgba(255, 255, 255, 0.95); /* 按下稍微变亮 */
    }

    [data-theme="dark"] .post-card:active {
        background-color: rgba(30, 41, 59, 0.95);
    }

    /* 标签和按钮按压 */
    .category-nav button:active,
    .tag-pill:active,
    .article-nav-btn:active {
        transform: scale(0.92);
        transition: transform 0.1s;
    }

    .reveal-on-scroll {
        /* 增加一点弹簧效果 */
        transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* 让正在加载的卡片也有呼吸灯效果 */
    .skeleton-card {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
}

#view-list {
    /* 关键修复：告诉浏览器允许垂直滚动，只把水平手势留给 JS */
    touch-action: pan-y;

    /* 之前的样式保持不变 */
    min-height: 80vh;
}

/* ============ 🛡️ 底部备案信息样式 (全端统一：名片在上，备案在下) ============ */
.site-footer {
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    text-align: center;
    border-top: 1px dashed var(--glass-border);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: system-ui, -apple-system, sans-serif;
    opacity: 0.9;

    /* 关键布局：垂直排列，让网站名自然占据第一行 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 第一行和第二行的间距 */
}

/* 网站名称样式 */
.site-footer .copyright {
    font-weight: 500;
    opacity: 0.9;
}

/* 第二行备案信息的容器：让内部元素横向排列 */
.site-footer .beian-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 移动端屏幕太窄时允许内部换行 */
    gap: 10px; /* 备案号之间的间距 */
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
}

.site-footer a:hover {
    color: var(--primary);
    opacity: 1;
}

.site-footer img {
    width: 16px;
    height: 16px;
    vertical-align: text-top;
}

.site-footer .separator {
    color: var(--glass-border);
    font-size: 0.8rem;
}

/* ============ ✨ PC端视差与高级质感升级 ============ */

/* 1. 噪点遮罩：让背景更有质感，消除渐变的“波纹” */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.06; /* 调节噪点浓度 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    display: none !important;
}

/* ============ 🌊 动态流体视差背景 (PC Only) ============ */
#parallax-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;

    background-color: transparent !important; /* 或者直接改为 transparent */

    transition: background-color 0.5s ease;
}

/* 噪点层保持不变 */
.noise-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    z-index: 10;
    display: none !important;
}

/* 通用光斑：减少模糊，增加不透明度 */
.orb {
    position: absolute;
    border-radius: 50%;
    /* 之前的 blur(80px) 太糊了，看不清移动，现在改为 40-50px */
    filter: blur(45px);
    opacity: 0.7; /* 提高可见度 */
    will-change: transform;
    z-index: 1;
}

/* ☀️ 浅色模式光斑：使用混合模式让重叠处更鲜艳 */
[data-theme="light"] .orb {
    mix-blend-mode: multiply; /* 正片叠底，重叠变深 */
}

/* 🌙 深色模式光斑：使用滤色，重叠变亮 */
[data-theme="dark"] .orb {
    mix-blend-mode: screen;
    opacity: 0.5;
}

/* 光斑 1：左上 (主橙色) - 变得更大 */
.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #ea580c 0%, rgba(234, 88, 12, 0) 70%);
    top: -100px;
    left: -100px;
}

/* 光斑 2：右侧 (紫色) - 颜色更深 */
.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #7c3aed 0%, rgba(124, 58, 237, 0) 70%);
    top: 20%;
    right: -50px;
}

/* 光斑 3：底部 (粉/青) - 作为一个托底色 */
.orb-3 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #db2777 0%, rgba(219, 39, 119, 0) 70%);
    bottom: -200px;
    left: 20%;
}

/* 📱 移动端隐藏 */
@media (max-width: 992px) {
    #parallax-bg { display: none !important; }
}

/* ============ 📱 移动端适配 ============ */
@media (max-width: 768px) {
    .site-footer {
        /* 移动端底部避让悬浮按钮 */
        padding-bottom: calc(85px + env(safe-area-inset-bottom));
        font-size: 0.75rem;
        gap: 6px;
    }

    /* 如果移动端屏幕非常窄（例如折叠屏外屏），允许备案号掉下来 */
    .site-footer .beian-info {
        gap: 6px 12px; /* 稍微调整间距 */
    }

    /* 移动端如果发生换行，隐藏竖线分隔符会更好看；不换行则显示 */
    /* 这里保持显示竖线，保持和PC一致的精致感，除非屏幕挤不下 */
}

/* ============ 💻 Mac 风格代码块增强 ============ */
.markdown-body pre {
    position: relative;
    padding-top: 2.5rem !important; /* 给顶部留出空间放圆点 */
    background: #1e1e1e !important; /* 更深邃的黑 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* 悬浮感阴影 */
}

/* 红黄绿三个圆点 */
.markdown-body pre::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5f56; /* 红 */
    box-shadow: 20px 0 0 #ffbd2e, /* 黄 */ 40px 0 0 #27c93f; /* 绿 */
    opacity: 0.8;
}

/* 可选：右上角显示语言名称（如 Java） */
.markdown-body pre::after {
    content: "Code"; /* 默认文字，JS可以动态修改 */
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 0.75rem;
    color: #666;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* 针对不同语言显示不同文字 (需要 highlight.js 配合类名) */
.markdown-body pre code.language-java ~ ::after {
    content: "Java";
    color: #b07219;
}

.markdown-body pre code.language-javascript ~ ::after {
    content: "JS";
    color: #f7df1e;
}

.markdown-body pre code.language-html ~ ::after {
    content: "HTML";
    color: #e34c26;
}

/* ============ 🌊 底部波浪 ============ */
.site-footer {
    position: relative;
    margin-top: 5rem; /* 拉大与文章的距离 */
    padding-top: 80px; /* 给波浪留空间 */
    border-top: none; /* 去掉原来的虚线 */
    background: transparent;
}

.waves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 波浪高度 */
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); /* 翻转让波浪在上面 */
}

.waves {
    width: 100%;
    height: 100%;
}

/* 动起来 */
.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}


/* ============ ⏰ 程序钟 v3.0 (Bento Widget 风格) ============ */
.clock-card {
    /* 容器基础 */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px; /* 更圆润的角 */
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5); /* 内部高光 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px; /* 保证小组件高度 */
}

/* 深色模式适配 */
[data-theme="dark"] .clock-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.clock-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 顶部布局：左右分布 */
.clock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clock-greeting {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* 中部：时间展示 */
.clock-body {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.clock-time {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    /* ✨ 关键：字体改小一点，适应 Sidebar 宽度 */
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -2px; /* 收紧字间距 */
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 2px 10px rgba(79, 70, 229, 0.15);
    white-space: nowrap; /* 禁止换行 */
}

.clock-time:hover {
    transform: scale(1.05);
    color: var(--primary);
}

.clock-time:active {
    transform: scale(0.95);
}

.mode-badge {
    margin-top: 6px;
    font-size: 0.65rem;
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
    opacity: 0; /* 默认隐藏 */
    transform: translateY(5px);
    transition: all 0.3s;
}

.clock-card:hover .mode-badge {
    opacity: 1;
    transform: translateY(0);
}

/* ============ 🟢 精致版进度条 (In-Bar Text) ============ */

.clock-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 1rem;
    border-top: 1px dashed var(--glass-border);
    margin-top: auto;
}

/* 1. 轨道：加高、圆润、内阴影 */
.progress-track.thick-bar {
    width: 100%;
    height: 24px; /* PC端高度，给文字留足空间 */
    background: rgba(0, 0, 0, 0.06); /* 浅灰色底，更干净 */
    border-radius: 99px; /* 胶囊形状 */
    position: relative;
    overflow: hidden;
    /* 内部发光效果，增加凹陷质感 */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); /* 极细的高光边框 */
}

/* 深色模式轨道适配 */
[data-theme="dark"] .progress-track.thick-bar {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

/* 2. 进度填充：平滑过渡 */
.progress-fill {
    height: 100%;
    border-radius: 99px; /* 保持圆角 */
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* 有弹性的动画 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 3. ✨ 嵌入文字：核心美化 ✨ */
.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    /* 强制垂直居中 */
    display: flex;
    align-items: center;
    padding-left: 10px;

    /* 字体设置 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-variant-numeric: tabular-nums;

    /* ✨ 修改点：字体改小，字重减一级 */
    font-size: 0.65rem; /* 调小到约 10.5px */
    font-weight: 700; /* 从 800 改为 700 */

    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    user-select: none;
    pointer-events: none;
}

/* ============ 📱 移动端专属优化 ============ */
@media (max-width: 992px) {
    /* ...前面的代码保持不变... */
    .clock-footer {
        gap: 10px !important;
        padding-top: 0.8rem !important;
    }

    .progress-track.thick-bar {
        height: 20px !important;
    }

    .progress-text {
        /* ✨ 修改点：移动端进一步缩小，防止太挤 */
        font-size: 10px !important;
        padding-left: 8px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important; /*稍微收紧一点间距*/
    }
}

/* ============ 📱 移动端专属优化 (最终修正版) ============ */
@media (max-width: 992px) {
    /* 1. 修复间距问题的核心：开启内部容器的 Flex 布局 */
    #sidebar-main {
        display: flex !important;
        flex-direction: column !important;
        /* ✨ 这里控制名片、时钟、搜索栏之间的垂直距离，改为 1.5rem (约24px) */
        gap: 1.5rem !important;
        padding-bottom: 1rem;
    }

    /* 2. 外层容器重置 */
    .sidebar {
        padding: 1rem !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        height: auto !important;
    }

    /* 3. 强制显示名片和时钟 */
    .clock-card,
    .profile-card {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0 !important; /* 间距全权交给 gap 控制 */
    }

    /* 4. 名片优化：横向排列 */
    .profile-card {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 1rem !important;
        gap: 1rem;
        background: var(--glass-bg); /* 确保背景色可见 */
    }

    .profile-avatar {
        width: 50px !important; /* 头像缩小 */
        height: 50px !important;
        border-width: 2px !important;
        margin-bottom: 0 !important;
    }

    .profile-info {
        width: 100%;
    }

    .profile-name {
        font-size: 1.1rem !important;
        margin-bottom: 0 !important;
    }

    .profile-bio {
        margin: 0 !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
        opacity: 0.7;
    }

    #btn-edit-profile {
        display: none !important;
    }

    /* 5. 程序钟：✨ 极简压缩模式 (变小变精致) */
    .clock-card {
        min-height: auto !important;
        /* 减少内边距 */
        padding: 0.8rem 1rem !important;
        gap: 0.5rem !important;
    }

    .clock-header {
        font-size: 0.6rem !important;
        margin-bottom: 0 !important;
        opacity: 0.6;
    }

    .clock-body {
        padding: 0 !important;
        margin: 0 !important;
        flex-grow: 0 !important;
    }

    .clock-time {
        /* ✨ 字体改小，行高收紧 */
        font-size: 1.8rem !important;
        line-height: 1.1 !important;
    }

    /* 手机上隐藏 "Local Time" 标签 */
    .mode-badge {
        display: none !important;
    }

    .clock-footer {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
        gap: 0.5rem !important;
    }

    /* 进度条变细 */
    .progress-track {
        height: 4px !important;
    }

    /* 6. 搜索栏区域：去边框，纯净显示 */
    .sidebar-card:not(.clock-card):not(.profile-card) {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 强制覆盖 HTML 内联样式的 padding-top */
    .sidebar-card[style] {
        padding-top: 0 !important;
    }

    .search-box {
        margin-bottom: 1rem !important;
    }

    .search-box input {
        height: 2.8rem !important;
        font-size: 0.9rem !important;
    }

    /* 7. 分类导航胶囊 */
    .category-nav {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 2px;
        margin-bottom: 0 !important;
        scrollbar-width: none;
    }

    .category-nav::-webkit-scrollbar {
        display: none;
    }

    .category-nav h6, .sidebar-tags {
        display: none !important;
    }

    .category-nav button {
        width: auto !important;
        flex-shrink: 0;
        padding: 6px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 99px !important;
        margin: 0 !important;
    }

    .category-nav button .cat-count {
        display: none !important;
    }

    /* 8. 正文布局调整 */
    .layout-container {
        display: flex;
        flex-direction: column;
        padding: 1rem !important;
        padding-top: calc(var(--nav-height) + env(safe-area-inset-top) + 0.5rem) !important;
        gap: 0 !important;
    }

    #list-heading {
        font-size: 1.6rem !important;
        margin-top: 0.5rem !important;
    }
}

/* ============ 📱 移动端沉浸式阅读：强制移除顶部组件 ============ */
@media (max-width: 992px) {
    /* 1. 当进入阅读模式时，直接“删掉”顶部的大组件容器 */
    body.is-reading #sidebar-main {
        display: none !important;
    }

    /* 2. 调整布局间距 */
    /* 因为顶部的大组件没了，我们需要调整一下容器的顶部间距，
               否则文章会因为原本预留的空间而出现大片空白，或者被导航栏挡住 */
    body.is-reading .layout-container {
        /* 导航栏高度 + 状态栏高度 + 少量呼吸空隙 */
        padding-top: calc(var(--nav-height) + env(safe-area-inset-top) + 1.5rem) !important;

        /* 变为单栏布局，防止任何 grid 残留 */
        display: block !important;
    }

    /* 3. 确保浮动按钮一定可见 */
    body.is-reading #btn-back-fab,
    body.is-reading #mobile-toc-fab,
    body.is-reading #scroll-progress {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: all !important;
        z-index: 9999; /* 层级最高 */
    }

    /* 4. 确保在阅读模式下，侧边栏容器本身不占空间 */
    body.is-reading .sidebar {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
}

/* ============ 👍 3.0 修复增强版点赞样式 ============ */
.like-wrapper {
    display: flex;
    justify-content: center;
    margin: 4rem 0 3rem 0; /* 调整间距 */
    width: 100%;
}

.like-btn {
    /* ✨ 关键修复 1：必须加 relative，让内部元素以我为准 */
    position: relative;

    /* 布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;  /* 稍微大一点点 */
    height: 86px;
    border-radius: 50% !important;

    /* 玻璃拟态 + 渐变边框感 */
    background: var(--card-bg);
    border: 2px solid rgba(79, 70, 229, 0.1); /* 边框淡一点，更有质感 */
    color: var(--text-muted); /* 默认灰色，更有高级感 */

    /* 阴影与过渡 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 更有弹性的动画 */
    cursor: pointer;
    padding: 0 !important;
    overflow: visible; /* 允许数字标签稍微凸出去一点 */
    -webkit-tap-highlight-color: transparent; /* 去除手机点击蓝框 */
}

/* 深色模式微调 */
[data-theme="dark"] .like-btn {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 悬停效果 */
.like-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.2);
    border-color: var(--primary); /* 悬停变色 */
    color: var(--primary);
}

/* 点击瞬间 */
.like-btn:active {
    transform: scale(0.95);
}

/* 图标 */
.like-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
    filter: grayscale(100%); /* 默认黑白，更有反差感 */
    opacity: 0.6;
}

.like-btn:hover .like-icon {
    transform: scale(1.1) rotate(-10deg);
    filter: grayscale(0%); /* 悬停变彩色 */
    opacity: 1;
}

/* 文字标签 */
.like-text {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.8;
    letter-spacing: 1px;
}

/* ✨ 关键修复 2：数字计数器 (改为胶囊气泡风格) */
.like-count {
    position: absolute;
    top: -6px;
    right: -6px;

    /* 胶囊样式 */
    background: var(--card-bg);
    color: var(--primary);
    border: 2px solid var(--primary);

    font-size: 0.75rem;
    font-weight: 800;
    font-family: monospace; /* 数字等宽更好看 */

    min-width: 28px;
    height: 28px;
    padding: 0 6px; /* 如果数字很大，允许变宽 */

    /* 居中三件套 */
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 99px; /* 胶囊圆角 */
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
    z-index: 2;
    transition: all 0.3s;
}

/* 📱 移动端适配：防止数字太靠边被切掉 */
@media (max-width: 768px) {
    .like-btn {
        width: 76px;
        height: 76px;
    }
    .like-icon {
        font-size: 1.6rem;
    }
}

/* ✨✨✨ 已点赞状态 (激活态) ✨✨✨ */
.like-btn.liked {
    background: var(--primary-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.4);
    animation: jelly 0.6s; /* 果冻弹跳动画 */
    cursor: default;
}

.like-btn.liked .like-icon {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.like-btn.liked .like-text {
    color: rgba(255,255,255,0.9);
}

/* 点赞后，数字变成白色背景，紫色字，形成反差 */
.like-btn.liked .like-count {
    background: white;
    color: var(--primary);
    border-color: white;
    transform: scale(1.1); /* 数字稍微变大一点 */
}

/* 果冻动画关键帧 */
@keyframes jelly {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1, 1); }
}
/* ==============================================
     🍎 iOS Design System Overrides (修复版)
     请替换掉刚才添加在最后的 @media (max-width: 992px) ... 整段代码
     ============================================== */
@media (max-width: 992px) {

    /* 1. 核心基础：字体与背景 (修复深色模式冲突) */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        background-color: #F2F2F7 !important; /* 浅色模式背景：浅灰 */
    }

    /* ✨ 关键修复：强制深色模式下背景变黑 */
    [data-theme="dark"] body {
        background-color: #181719 !important;/* 深色模式背景：纯黑 */
    }

    body::before {
        opacity: 0.6;
    }

    /* 2. 导航栏：iOS 高级磨砂玻璃 */
    body > nav {
        background: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.15) !important;
        /* ✨ 修复：去除强制高度，防止布局错乱 */
        height: auto !important;
        min-height: 50px;
    }

    [data-theme="dark"] body > nav {
        background: rgba(28, 28, 30, 0.75) !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* ✨ 3. 导航栏标题：回归左侧 (删除了居中代码) */
    body > nav .container strong {
        font-size: 1.2rem !important; /* 稍微大一点 */
        font-weight: 700 !important;
        /* 保持渐变色或跟随主题色 */
        position: static !important; /* 恢复默认定位 */
        transform: none !important;  /* 移除位移 */
    }

    /* 4. 大标题区域 */
    #list-heading {
        font-size: 2.1rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        margin-left: 0.5rem !important;
        margin-bottom: 0.2rem !important;
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }

    #list-subheading {
        margin-left: 0.5rem !important;
        font-size: 0.95rem !important;
        color: #8E8E93 !important;
    }

    /* ✨ 修复：深色模式下大标题变白 */
    [data-theme="dark"] #list-heading { color: #FFF !important; }

    /* 5. 卡片风格 */
    .post-card {
        background: #FFFFFF !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        border: none !important;
        margin-bottom: 1rem !important;
        padding: 1.2rem !important;
    }

    /* 修复：文章卡片 - 提亮并增加质感边框 */
    [data-theme="dark"] .post-card {
        /* 1. 背景色：比背景 #181719 明显亮一度，带一点点灰紫 */
        background: #252426 !important;

        /* 2. 关键：增加 1px 的半透明微光边框，划清界限 */
        border: 1px solid rgba(255, 255, 255, 0.08) !important;

        /* 3. 阴影：加深阴影，增加悬浮感 */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* 按下状态也稍微调亮一点 */
    [data-theme="dark"] .post-card:active {
        background: #2F2E30 !important;
    }

    .post-card:active {
        transform: scale(0.96) !important;
        background: #F2F2F7 !important;
        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    [data-theme="dark"] .post-card:active {
        background: #2C2C2E !important;
    }

    .post-card h3 {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #000 !important;
    }
    [data-theme="dark"] .post-card h3 { color: #FFF !important; }

    /* 6. 搜索框 */
    .search-box input {
        background-color: rgba(118, 118, 128, 0.12) !important;
        border: none !important;
        border-radius: 10px !important;
        text-align: left;
        padding-left: 2.5rem !important;
        font-size: 17px !important;
        color: var(--text-main) !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .search-box input {
        background-color: rgba(118, 118, 128, 0.24) !important;
        color: #FFF !important;
    }

    .search-icon {
        left: 0.8rem !important;
        opacity: 0.5 !important;
    }

    /* 7. 分类胶囊 */
    .category-nav button {
        background: rgba(118, 118, 128, 0.08) !important;
        color: #000 !important;
        font-weight: 500 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px 16px !important;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 增加过渡动画 */
    }

    /* 深色模式下的普通按钮背景 */
    [data-theme="dark"] .category-nav button {
        color: #fff !important;
        background: rgba(118, 118, 128, 0.24) !important;
    }

    /* ✨ 关键修复：把 active 样式放在最后，并增加权重，确保覆盖掉上面的普通样式 */
    .category-nav button.active {
        background: #007AFF !important; /* iOS 蓝 */
        color: #fff !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3) !important; /* 增加投影让它跳出来 */
        transform: scale(1.02); /* 稍微放大一点 */
    }

    /* 深色模式下的 active 样式 (确保不被深色普通样式覆盖) */
    [data-theme="dark"] .category-nav button.active {
        background: #0A84FF !important; /* 深色模式下稍微亮一点的蓝 */
        color: #fff !important;
        background-image: none !important;
    }

    /* 8. 组件透明度修复 */
    .profile-card, .clock-card {
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(25px) !important;
        border: none !important;
    }

    /* 修复：顶部名片与时钟 - 增加通透感 */
    [data-theme="dark"] .profile-card,
    [data-theme="dark"] .clock-card {
        /* 背景：使用稍微不透明一点的深色，防止透出底下的杂色 */
        background: rgba(40, 40, 42, 0.75) !important;

        /* 边框：稍微亮一点，让组件看起来更精致 */
        border: 1px solid rgba(255, 255, 255, 0.12) !important;

        /* 阴影 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    /* 9. 详情页标题 */
    #detail-title {
        text-align: center !important; /* ✨ 改为 center */
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        padding: 0 10px;
    }

    /* 10. 底部按钮适配 */
    #mobile-toc-btn, #btn-back-fab, #scroll-progress {
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        border: none !important;
    }

    [data-theme="dark"] #mobile-toc-btn,
    [data-theme="dark"] #btn-back-fab,
    [data-theme="dark"] #scroll-progress {
        /* 按钮用更亮的颜色，方便点击 */
        background: #323234 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #FFF !important;
    }

    .site-footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 1rem) !important;
    }

    /* ============ 修复移动端目录浮窗 (TOC Popup) ============ */

    /* 1. 默认状态（浅色模式） */
    #mobile-toc-popup {
        /* 纯白背景 + 高斯模糊 */
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: saturate(180%) blur(25px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(25px) !important;

        /* 浅色边框和阴影 */
        border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
        border-radius: 18px !important;
    }

    /* 修正浅色模式下的文字颜色（防止文字变白看不见） */
    #mobile-toc-list .toc-link {
        color: #333333 !important;
    }

    /* 2. 深色模式（强制覆盖） */
    html[data-theme="dark"] #mobile-toc-popup {
        /* ✨ 关键修复：深灰色背景 (iOS 风格) */
        background: rgba(28, 28, 30, 0.9) !important;

        /* 深色边框和阴影 */
        border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    }

    /* 3. 深色模式下的文字颜色 */
    html[data-theme="dark"] #mobile-toc-list .toc-link {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* 4. 选中项样式 (紫色高亮) */
    /* 浅色模式下的选中状态 */
    #mobile-toc-list .toc-link.active {
        background: var(--primary) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
        font-weight: 600 !important;
    }

    /* 深色模式下的选中状态 (保持一致) */
    html[data-theme="dark"] #mobile-toc-list .toc-link.active {
        background: var(--primary) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 15px rgba(129, 140, 248, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ============ 📂 PC端侧边栏：文件堆叠特效 (Stacking Files) ============ */
@media (min-width: 993px) {
    .sidebar {
        /* 1. 恢复基础滚动容器 */
        overflow-y: auto;
        overflow-x: hidden;
        perspective: none; /* 移除之前的透视 */
        padding-bottom: 100px; /* 底部多留点空间，方便最后一张卡片展示 */
        /* 隐藏滚动条 */
        scrollbar-width: none;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    #sidebar-main {
        /* 移除 3D 相关属性 */
        transform-style: flat;
        display: flex;
        flex-direction: column;
        gap: 0; /* 移除间距，由 top 偏移量控制 */
    }

    .sidebar-card {
        /* 2. 核心：粘性定位 */
        position: sticky;

        /* 默认变换原点在顶部中心，这样缩小时会产生“向后倒”的感觉 */
        transform-origin: center top;

        /* 增加阴影，增强层级感 */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.05);

        /* 必须有背景色，否则文字重叠时会透视 */
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        /* 稍微加一点下边距，保证自然流 */
        margin-bottom: 2rem;

        /* 平滑过渡 */
        will-change: transform, filter;
        transition: transform 0.1s linear, filter 0.1s linear;
    }

    /* 深色模式下阴影调整 */
    [data-theme="dark"] .sidebar-card {
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    }
}

/* ============ 🛠️ 修复：侧边栏热门标签可见性 ============ */

/* 强制覆盖侧边栏原本的浅色背景设置 */
.tag-cloud .tag-pill {
    /* 截图风格：深色背景 (深蓝灰) */
    background-color: #334155 !important;

    /* 强制白字 */
    color: #ffffff !important;

    /* 去掉原本的浅色边框 */
    border: none !important;

    /* 增加一点阴影让它浮起来 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;

    /* 稍微加粗字体 */
    font-weight: 600;
}

/* 悬停效果：变橙色 */
.tag-cloud .tag-pill:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.4) !important;
}

/* 深色模式下的微调 (保持深灰背景，稍微亮一点区分底色) */
[data-theme="dark"] .tag-cloud .tag-pill {
    background-color: #475569 !important;
}

/* ============ 💎 3.0 终极导航系统 (全景磨砂版) ============ */

:root {
    /* ☀️ 浅色模式 */
    --nav-bg: rgba(255, 255, 255, 0.85);  /* Dock 模式：高浓度白 */
    /* ✨ 新增：PC顶栏初始背景 (低浓度白，带模糊) */
    --nav-bg-top: rgba(255, 255, 255, 0.3);

    --nav-border: rgba(0, 0, 0, 0.05);
    --nav-text: #52525b;
    --nav-text-hover: #000000;
    --nav-text-active: #000000;
    --nav-accent: #ea580c;
    --nav-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --nav-links-bg: transparent;
    --nav-icon-btn-bg: rgba(0, 0, 0, 0.03);
    --nav-icon-btn-border: rgba(0, 0, 0, 0.06);

    /* ✨✨✨ 定义 Q 弹物理曲线 ✨✨✨ */
    /* 这种曲线会快速冲到 100% 甚至 110%，然后回弹，像果冻一样 */
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
    /* 这种曲线用于颜色变化，不需要回弹，只需要丝滑 */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    /* 🌙 深色模式 */
    --nav-bg: rgba(20, 20, 23, 0.8);     /* Dock 模式：高浓度黑 */
    /* ✨ 新增：PC顶栏初始背景 (低浓度黑) */
    --nav-bg-top: rgba(0, 0, 0, 0.2);

    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text: #a1a1aa;
    --nav-text-hover: #ffffff;
    --nav-text-active: #ffffff;
    --nav-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    --nav-links-bg: rgba(255, 255, 255, 0.05);
    --nav-icon-btn-bg: rgba(255, 255, 255, 0.05);
    --nav-icon-btn-border: rgba(255, 255, 255, 0.1);
}

/* [PC端] 初始全宽状态 */
.nav-island-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;

    transition: top 0.7s var(--ease-spring);
}

.nav-island {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;

    padding: 0 2rem;

    /* ✨✨✨ 修改：初始状态增加轻微磨砂效果 ✨✨✨ */
    background: var(--nav-bg-top); /* 使用低透明度背景 */
    border-bottom: 1px solid var(--nav-border);

    /* 增加模糊 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* ✨ 动画 2: 核心属性分离控制，打造极致丝滑 */
    transition:
            max-width 0.8s var(--ease-spring),      /* 宽度收缩最Q弹 */
            border-radius 0.8s var(--ease-spring),  /* 圆角变化也Q弹 */
            background 0.4s var(--ease-smooth),     /* 背景色平滑过渡 */
            box-shadow 0.4s var(--ease-smooth),
            padding 0.6s var(--ease-spring),
            height 0.6s var(--ease-spring),
            border 0.4s ease;

    /* 关键：防止文字换行导致的动画抖动 */
    white-space: nowrap;
}

/* [PC端] 滚动后 -> 变形为灵动岛 Dock */
.nav-island-wrapper.dock-mode {
    top: 24px;
}

.nav-island-wrapper.dock-mode .nav-island {
    max-width: 720px;

    height: 56px; /* 稍微变矮一点，更精致 */
    padding: 0 16px; /* 内边距收缩 */

    /* 变成圆角胶囊 */
    border-radius: 28px;

    /* 切换回高浓度背景 */
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    /* 增加投影，产生悬浮感 */
    box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Logo */
.nav-logo {
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--nav-text-active);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    margin-top: -2px;
}

/* 中间链接区域 */
.nav-links {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    background: var(--nav-links-bg);
    padding: 0 4px;
    border-radius: 99px;
}

.nav-link {
    color: var(--nav-text);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.nav-link:hover {
    color: var(--nav-text-hover);
    background: rgba(125, 125, 125, 0.08);
}

.nav-link.active {
    color: var(--nav-text-active);
    background: rgba(125, 125, 125, 0.15);
    font-weight: 600;
}

[data-theme="dark"] .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
}

.mobile-only { display: none !important; }

/* 右侧按钮区 */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

/* 主题按钮 */
.nav-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--nav-icon-btn-border);
    background: var(--nav-icon-btn-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    color: var(--nav-text);
    margin: 0;
    padding: 0;
    line-height: 1;
}
.nav-icon-btn:hover {
    background: rgba(125, 125, 125, 0.15);
    color: var(--nav-text-hover);
    transform: scale(1.05);
}

/* 登录按钮 */
.nav-cta {
    height: 40px;
    padding: 0 22px;
    border-radius: 99px;
    background: var(--nav-text-active);
    color: var(--card-bg);
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.nav-cta:hover { transform: scale(1.05); }

@media (max-width: 768px) {
    .nav-island-wrapper {
        transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .nav-island {
        max-width: 100% !important; /* 移动端始终全宽 */
        border-radius: 24px !important;
        transition: transform 0.3s ease; /* 简单的位移过渡 */
    }

    .nav-island-wrapper.dock-mode .nav-island {
        max-width: 100% !important;
        padding: 0 12px !important;
    }
}

/* ============ ⏪ 布局还原补丁 (顶部导航 + 宽松间距) ============ */
@media (max-width: 992px) {

    /* --- 1. 导航栏：回归顶部固定 --- */
    .nav-island-wrapper {
        top: 0 !important;
        bottom: auto !important; /* 取消底部定位 */
        left: 0 !important;
        width: 100% !important;
        padding: 0 !important;   /* 移除悬浮岛的边距 */
        transform: none !important;

        /* 确保背景不透明，遮挡滚动内容 */
        background: var(--nav-bg) !important;
        border-bottom: 1px solid var(--nav-border) !important;

        /* 确保层级最高 */
        z-index: 9999 !important;
    }

    /* 还原成通栏样式 (长条形)，不再是圆角胶囊 */
    .nav-island {
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 16px !important; /* 标准内边距 */
        height: 56px !important;    /* 标准高度 */
        background: transparent !important; /* 背景由 wrapper 接管 */
    }

    /* --- 2. 布局间距：改回原来的宽松感 --- */
    #sidebar-main {
        gap: 1.5rem !important; /* 恢复之前的 1.5rem 间距 */
        margin-bottom: 1.5rem !important;
    }

    /* 恢复卡片内部的舒适内边距 */
    .profile-card, .clock-card {
        padding: 1.2rem 1rem !important;
    }

    /* --- 3. 页面容器调整 --- */
    .layout-container {
        /* 顶部留出导航栏的高度，防止内容被遮挡 */
        padding-top: calc(56px + env(safe-area-inset-top) + 1rem) !important;
    }

    /* 底部不再需要防遮挡的巨大留白 */
    .site-footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 2rem) !important;
    }

    /* --- 4. 彻底禁用“阅读模式”下的特殊位移 --- */
    /* 无论是否在阅读，导航栏都稳稳地在顶部，不动 */
    body.is-reading .nav-island-wrapper {
        top: 0 !important;
        transform: none !important;
    }

    body.is-reading .layout-container {
        padding-top: calc(56px + env(safe-area-inset-top) + 1rem) !important;
    }
}

@media (max-width: 992px) {
    /* 搜索框下方的分类导航容器 */
    .category-nav {
        display: flex !important; /* 强制显示 */
        overflow-x: auto;         /* 允许横向滚动 */
        gap: 10px;                /* 按钮间距 */
        margin-top: 1rem;         /* 距离上方搜索框的距离 */
        margin-bottom: 0.5rem;
        padding-bottom: 5px;      /* 预留滚动条空间（虽然隐藏了） */
    }

    /* 按钮样式微调：还原截图里的胶囊质感 */
    .category-nav button {
        flex-shrink: 0;           /* 防止被压缩 */
        border-radius: 20px !important;
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 激活状态：蓝色背景 */
    .category-nav button.active {
        background: #007AFF !important; /* iOS 蓝 */
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3) !important;
    }
}

/* ============ 📱 移动端顶栏精简补丁 ============ */
@media (max-width: 992px) {
    /* 1. 隐藏顶栏的分类链接 (Tech/Life/Share) */
    /* 也就是 id 为 nav-tech, nav-life, nav-share 的元素 */
    #nav-tech, #nav-life, #nav-share {
        display: none !important;
    }

    /* 2. 既然分类没了，我们把剩下的元素（Logo、Home图标、右侧按钮）调整一下对齐 */
    /* 让 Logo 稍微靠左，Home 图标稍微靠右，保持平衡 */
    .nav-links {
        flex-grow: 0 !important; /* 不再占据中间所有空间 */
        margin-right: auto;      /* 靠左排列 */
        padding-left: 10px !important;
    }

    /* 稍微调整一下 Home 图标的大小和间距，防止太挤 */
    #nav-home {
        padding: 0 8px !important;
    }
}

/* ============ 🧹 顶栏去色块修复补丁 ============ */
@media (max-width: 992px) {
    /* 1. 核心修复：去掉中间 .nav-links 容器的背景色 */
    /* 那个奇怪的竖条就是它！之前是圆角胶囊背景，现在要变透明 */
    .nav-links {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 2. 确保右侧按钮组也没有背景色块 */
    .nav-actions {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. 确保岛屿本体完全透明，只由 wrapper 负责背景 */
    .nav-island {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 4. 再次确认 Wrapper 是唯一的背景源，且铺满 */
    .nav-island-wrapper {
        background: var(--nav-bg) !important;
        /* 加上毛玻璃效果，让它看起来更高级 */
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid var(--nav-border) !important;
    }
}

/* ============ 💻 PC端修复补丁 ============ */
@media (min-width: 993px) {
    /* 1. 核心修复：在 PC 端隐藏侧边栏里的胶囊分类按钮 */
    .category-nav {
        display: none !important;
    }
}

/* ============ 💎 移动端 SVG 图标美化 ============ */
@media (max-width: 992px) {
    /* 1. 让按钮变成 Flex 布局，垂直水平居中 */
    .category-nav button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* 图标和文字的间距 */
        padding: 8px 14px !important; /* 稍微缩小一点内边距，更紧凑 */
    }

    /* 2. SVG 图标通用样式 */
    .category-nav button svg {
        width: 16px;      /* 这种小图标 16px 最精致 */
        height: 16px;
        opacity: 0.8;     /* 稍微淡一点，不要纯黑 */
        transition: all 0.2s;
    }

    /* 3. 激活状态：图标变亮变白 */
    .category-nav button.active svg {
        opacity: 1;
        stroke: #fff; /* 确保选中时是白色线条 */
    }

    /* 4. 微调文字大小 */
    .category-nav button span {
        font-weight: 600;
        letter-spacing: 0.5px;
    }
}

/* ============ 🏷️ 标签精致化重构 (Premium Tags) ============ */

/* 1. 通用标签样式 (侧边栏 + 文章卡片) */
.tag-pill {
    /* 🎨 去掉“补丁感”：背景变透明 */
    background: transparent !important;

    /* ✒️ 线条感：加上极细的半透明边框 */
    border: 1px solid rgba(0, 0, 0, 0.12) !important;

    /* 🔡 文字：使用低调的高级灰，而不是刺眼的纯白 */
    color: var(--text-muted) !important;

    /* 💊 形状：完全的圆角胶囊 */
    border-radius: 99px !important;

    /* 📏 间距：稍微宽一点，更有呼吸感 */
    padding: 4px 12px !important;

    /* 🔠 字体：精致小巧，加粗一点点 */
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;

    /* 🌑 阴影：去掉之前的重阴影，要扁平化 */
    box-shadow: none !important;

    /* ⚡️ 丝滑过渡 */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* 确保文字垂直居中 */
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 🌙 深色模式适配 */
[data-theme="dark"] .tag-pill {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.02) !important; /* 极淡的背景 */
}

/* 🖱️ 悬停效果：边框和文字变主色 (橙色) */
.tag-pill:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(230, 126, 34, 0.08) !important; /* 悬停时淡淡的主色背景 */
    transform: translateY(-1px); /* 轻微上浮 */
}

/* 📱 侧边栏热门标签专属优化 */
#sidebar-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important; /* 标签之间的间距 */
}

/* 🃏 文章卡片里的小标签专属优化 */
.post-meta .tag-pill {
    /* 给卡片里的标签前面加个 # 号，更有社交媒体的感觉 */
    padding-left: 10px !important;
}

.post-meta .tag-pill::before {
    content: "#";
    margin-right: 2px;
    opacity: 0.4;
    font-weight: 400;
    font-size: 0.9em;
}

/* ============ 💧 移动端顶栏毛玻璃特效 ============ */
@media (max-width: 992px) {
    .nav-island-wrapper {
        /* 1. 背景调得更透 (0.6 的透明度)，让底下的内容能透出来 */
        background: rgba(255, 255, 255, 0.6) !important;

        /* 2. 核心：高强度毛玻璃滤镜 (饱和度+模糊) */
        /* saturate(180%) 能让透出来的颜色更鲜艳，像 iOS 一样 */
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;

        /* 3. 底部加一条极细的半透明分割线，增加层次感 */
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* 🌙 深色模式适配 */
    [data-theme="dark"] .nav-island-wrapper {
        /* 深色模式下用半透明黑 */
        background: rgba(20, 20, 20, 0.6) !important;

        /* 分割线变亮一点 */
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ============ 🛠️ 侧边栏视觉统一修复补丁 ============ */

/* 1. 修复时间组件 (Clock Widget) 颜色不一致 */
.clock-card {
    /* ✨ 关键：强制使用全局统一的玻璃背景和边框变量 */
    /* 这样无论浅色还是深色模式，它都会和 Profile 卡片保持完全一致 */
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;

    /* 保持圆角和阴影一致 */
    box-shadow: var(--shadow-sm) !important;
}

/* 深色模式下的强制统一 */
[data-theme="dark"] .clock-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}


/* 2. 优化搜索和标签组件 (PC端) */
@media (min-width: 993px) {

    /* 搜索框美化：让它看起来更像一个输入区域，而不是浮在空中的框 */
    .search-box input {
        background-color: rgba(0, 0, 0, 0.04) !important; /* 极淡的灰色背景 */
        border: 1px solid transparent !important; /* 默认无边框 */
        transition: all 0.3s ease;
    }

    /* 深色模式适配 */
    [data-theme="dark"] .search-box input {
        background-color: rgba(255, 255, 255, 0.06) !important;
    }

    /* 聚焦时的高级感 */
    .search-box input:focus {
        background-color: var(--card-bg) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15) !important; /* 橙色柔光 */
    }

    /* 调整布局：因为中间的分类导航隐藏了，我们要消除那个巨大的空隙 */
    .sidebar-tags {
        margin-top: 0 !important;          /* 去掉原来巨大的上边距 */
        padding-top: 1.5rem !important;    /* 内部留出空间 */
        border-top: 1px dashed var(--glass-border) !important; /* ✨ 加一条虚线分割，更有层次感 */
    }

    /* 热门标签标题微调 */
    .sidebar-tags h6 {
        margin-bottom: 1rem !important;
        padding-left: 0 !important; /* 对齐左边 */
        font-size: 0.85rem !important;
        opacity: 0.8;
    }
}

/* ============ 🎨 浅色模式配色修正 (去蓝化/暖色调和) ============ */

/* 1. 📱 移动端分类按钮：蓝色 -> 橙色 */
/* 之前的 #007AFF 是 iOS 原生蓝，和我们的陶土橙不搭 */
@media (max-width: 992px) {
    .category-nav button.active {
        background: var(--primary) !important; /* 统一用主色橙 */
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4) !important; /* 橙色投影 */
        border-color: transparent !important;
    }

    /* 图标颜色也强制变白 */
    .category-nav button.active svg {
        stroke: #ffffff !important;
        opacity: 1 !important;
    }
}

/* 2. ⏰ 时钟组件进度条：蓝青渐变 -> 晨曦金渐变 */
/* 之前的蓝色条在暖白背景上太刺眼了 */
.fill-day {
    /* 改为：琥珀金 -> 热橙色 */
    background: linear-gradient(90deg, #fbbf24, #ea580c) !important;
}

/* 年份进度条保持紫色/粉色没问题，或者也改成暖色 */
.fill-year {
    /* 改为：暖紫 -> 玫瑰红 (Sunset Vibe) */
    background: linear-gradient(90deg, #d946ef, #e11d48) !important;
}

/* 3. 🔮 背景流体球：科技蓝 -> 柔和紫/暖金 */
/* 那个蓝色的球 (orb-2) 是造成背景"脏"的主要原因 */
.orb-2 {
    /* 换成浅紫色，和橙色能融合出好看的"晚霞色" */
    background: #c084fc !important;
    opacity: 0.2 !important; /* 稍微淡一点 */
}

/* 4. 👤 个人名片里的链接悬停：蓝色 -> 橙色 */
.meta-link:hover {
    color: var(--primary) !important;
}

.meta-link:hover .meta-icon {
    stroke: var(--primary) !important;
}

/* 5. 🛠️ PC端搜索框聚焦：去掉默认的蓝色光晕，改用橙色 */
.search-box input:focus {
    border-color: var(--primary) !important;
    /* 极淡的橙色光晕 */
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.1) !important;
    background-color: #fff !important;
}

/* 6. 文章详情页：链接和按钮去蓝 */
/* 底部导航按钮悬停 */
.article-nav-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* 目录链接激活状态 */
.toc-link.active {
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
    /* 背景改为极淡的橙色 */
    background: linear-gradient(to right, rgba(234, 88, 12, 0.06), transparent) !important;
}

/* ============ 🌙 深色模式搜索框聚焦修复 ============ */
[data-theme="dark"] .search-box input:focus {
    /* 1. 背景改回深灰 (和卡片颜色一致) */
    background-color: var(--card-bg) !important;

    /* 2. 确保文字颜色是亮的 */
    color: var(--text-main) !important;

    /* 3. 边框保持橙色，光晕稍微亮一点 */
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.15) !important;
}

/* ============ 🍱 PC端 Bento 仪表盘布局 (Dashboard) ============ */

/* 默认隐藏首页视图 */
#view-home { display: none; }

@media (min-width: 993px) {

    /* 1. 布局切换逻辑 */

    /* 当显示 view-home 时，隐藏原来的侧边栏和列表容器 */
    body.is-home .sidebar { display: none !important; }
    body.is-home #view-list { display: none !important; }

    /* 显示 view-home */
    body.is-home #view-home { display: block !important; }

    /* 调整主容器，去掉 grid，变为单栏居中 */
    body.is-home .layout-container {
        display: block;
        max-width: 1100px; /* 限制最大宽度，更精致 */
        margin: 0 auto;
        padding-top: 100px; /* 给顶栏留空 */
    }

    /* 2. Bento Grid 网格系统 */
    .bento-grid {
        display: grid;
        grid-template-columns: 2fr 1.2fr; /* 左边宽，右边窄 */
        grid-template-rows: 180px 180px;  /* 两行，定高 */
        gap: 1.5rem;
        margin-bottom: 4rem;
    }

    /* 卡片通用样式 */
    .bento-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 32px; /* 更大的圆角 */
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
        position: relative;
    }

    .bento-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        border-color: rgba(var(--primary), 0.2);
    }

    /* --- 左侧：个人名片 (占据左侧两行) --- */
    .bento-profile {
        grid-column: 1 / 2;
        grid-row: 1 / 3; /* 跨两行 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(255,255,255,0.5) 100%);
    }

    [data-theme="dark"] .bento-profile {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(30,30,30,0.5) 100%);
    }

    .bento-profile-content {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    .bento-avatar {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 4px solid var(--bg-body);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        object-fit: cover;
    }

    .bento-name {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .bento-bio {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 1rem;
        opacity: 0.9;
    }

    .bento-desc {
        color: var(--text-muted);
        line-height: 1.6;
        max-width: 400px;
        font-size: 0.95rem;
    }

    .bento-social {
        margin-top: 1.5rem;
        display: flex;
        gap: 10px;
    }

    /* --- 右上：时钟 --- */
    .bento-clock {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem 2rem;
    }

    #bento-time {
        font-size: 3rem;
        font-weight: 800;
        font-family: monospace;
        letter-spacing: -2px;
        color: var(--text-main);
        line-height: 1;
    }

    /* --- 右下：统计 --- */
    .bento-stats {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: var(--primary-gradient); /* 醒目的彩色卡片 */
        color: white;
        border: none;
    }

    .stat-item {
        text-align: center;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .stat-item:hover { transform: scale(1.1); }

    .stat-num {
        display: block;
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1;
    }

    .stat-label {
        font-size: 0.8rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .stat-icon-decor {
        font-size: 4rem;
        opacity: 0.2;
        position: absolute;
        right: -10px;
        bottom: -10px;
        transform: rotate(-15deg);
    }

    /* 3. 首页文章列表 */
    .home-posts-section {
        padding-bottom: 4rem;
        scroll-margin-top: 100px; /* 锚点定位偏移 */
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 2rem;
        border-bottom: 1px dashed var(--glass-border);
        padding-bottom: 1rem;
    }

    .section-title {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-main);
        margin: 0;
    }

    .view-all-btn {
        background: transparent;
        color: var(--text-muted);
        border: 1px solid var(--glass-border);
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .view-all-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: rgba(var(--primary), 0.05);
    }

    .view-all-btn.large {
        padding: 12px 30px;
        font-size: 1rem;
        font-weight: 600;
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
    }

    .home-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        gap: 2rem;
    }

    /* 首页的文章卡片样式微调 */
    .home-posts-grid .post-card {
        margin-bottom: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .home-posts-grid .post-card h3 {
        font-size: 1.4rem;
    }

    .home-posts-grid .post-summary {
        flex-grow: 1; /* 让内容撑开 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* ============ 📂 列表页重构 (无侧边栏沉浸式) ============ */

/* 默认隐藏顶部工具栏 */
.pc-list-toolbar { display: none; }

@media (min-width: 993px) {

    /* 当处于“列表模式”时 */
    body.is-list-view .sidebar {
        display: none !important; /* ❌ 隐藏侧边栏 */
    }

    /* 内容区域变为单栏居中 */
    body.is-list-view .layout-container {
        display: block;
        max-width: 900px; /* 限制宽度，阅读更舒适 */
        margin: 0 auto;
        padding-top: 100px;
    }

    /* 显示顶部工具栏 */
    body.is-list-view .pc-list-toolbar {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 3rem;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        padding: 1rem 1.5rem;
        border-radius: 20px;
        box-shadow: var(--shadow-sm);
        animation: fadeIn 0.5s ease;
    }

    /* 工具栏：搜索框 */
    .toolbar-search {
        position: relative;
        flex-shrink: 0;
        width: 240px;
    }

    .toolbar-search input {
        width: 100%;
        padding-left: 2.5rem;
        height: 40px;
        border-radius: 99px;
        background: rgba(0,0,0,0.04);
        border: 1px solid transparent;
        font-size: 0.9rem;
        transition: all 0.2s;
    }

    [data-theme="dark"] .toolbar-search input {
        background: rgba(255,255,255,0.06);
    }

    .toolbar-search input:focus {
        background: var(--card-bg);
        box-shadow: 0 0 0 3px rgba(var(--primary), 0.1);
        border-color: var(--primary);
    }

    .toolbar-search .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.5;
        font-size: 0.9rem;
    }

    /* 工具栏：标签区域 */
    .toolbar-tags {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-left: 1px solid var(--glass-border);
        padding-left: 1.5rem;
    }

    /* 调整一下标题的间距 */
    body.is-list-view #view-list hgroup {
        text-align: center;
        margin-bottom: 3rem;
    }

    body.is-list-view #list-heading {
        font-size: 2.5rem !important;
    }
}
/* ============ 🏠 列表工具栏回首页按钮 ============ */
@media (min-width: 993px) {
    .toolbar-home-btn {
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        color: var(--text-muted);
        box-shadow: var(--shadow-sm);
        margin-right: 0.5rem;
    }

    .toolbar-home-btn:hover {
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary);
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }

    .toolbar-home-btn .btn-icon {
        font-size: 1.1rem;
        line-height: 1;
    }
}

/* ============ 🛠️ 列表页工具栏 (V4.0 终极居中胶囊版) ============ */
@media (min-width: 993px) {
    /* 1. 工具栏容器：变为居中的胶囊 */
    body.is-list-view .pc-list-toolbar {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: fit-content !important; /* ✨ 关键：宽度随内容自适应，不再空荡荡 */
        margin: 0 auto 3rem auto;      /* 水平居中 */

        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
        border-radius: 99px; /* 完美圆角 */
        padding: 6px;        /* 紧凑内边距 */
        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1); /* 悬浮投影 */
        gap: 4px;
    }

    /* 2. 按钮样式：图标 + 文字的胶囊 */
    .toolbar-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 18px; /* 宽一点，舒服 */
        height: 40px;    /* 统一高度 */
        border-radius: 99px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* SVG 图标尺寸 */
    .btn-svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2;
        transition: stroke 0.2s;
    }

    /* 悬停通用 */
    .toolbar-btn:hover {
        background: rgba(0,0,0,0.04);
        color: var(--text-main);
    }

    /* 深色模式悬停 */
    [data-theme="dark"] .toolbar-btn:hover {
        background: rgba(255,255,255,0.08);
    }

    /* Home 按钮特有悬停：橙色 */
    .home-btn:hover {
        background: rgba(234, 88, 12, 0.1);
        color: var(--primary);
    }

    /* 3. 分割线 */
    .toolbar-divider {
        width: 1px;
        height: 20px;
        background: var(--glass-border);
        margin: 0 4px;
    }

    /* 4. 搜索框：融合在胶囊里 */
    .toolbar-search {
        position: relative;
        margin-left: 4px;
    }

    .toolbar-search input {
        width: 220px;
        height: 40px !important;
        border-radius: 99px !important;
        background: rgba(0,0,0,0.03) !important;
        border: 1px solid transparent !important;
        padding-left: 38px !important; /* 给图标留位 */
        font-size: 0.9rem;
        transition: all 0.3s;
        color: var(--text-main);
        box-shadow: none !important;
    }

    [data-theme="dark"] .toolbar-search input {
        background: rgba(255,255,255,0.06) !important;
    }

    /* 聚焦时伸长一点点 */
    .toolbar-search input:focus {
        width: 260px;
        background: var(--card-bg) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    }

    /* SVG 搜索图标 */
    .search-icon-svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        stroke: var(--text-muted);
        opacity: 0.6;
        pointer-events: none;
        transition: all 0.2s;
    }

    /* 聚焦时图标变色 */
    .toolbar-search:focus-within .search-icon-svg {
        stroke: var(--primary);
        opacity: 1;
    }
}

/* ============ 🛠️ SVG 图标按钮专属样式 ============ */
@media (min-width: 993px) {
    /* 定义 SVG 图标尺寸和颜色 */
    .btn-svg {
        width: 20px;
        height: 20px;
        stroke: var(--text-muted); /* 默认灰色 */
        transition: all 0.3s ease;
    }

    /* 悬停时：首页图标变白（配合背景色） */
    .home-btn:hover .btn-svg {
        stroke: #ffffff;
    }

    /* 悬停时：全部按钮图标变深色 */
    .all-btn:hover .btn-svg {
        stroke: var(--primary);
    }

    /* 搜索框里的放大镜也建议换成 SVG，或者调整一下 Emoji 大小 */
    .search-icon {
        font-size: 1rem !important; /* 调小一点，不要那么像卡通 */
        opacity: 0.4 !important;
    }
}

/* ============ 📏 视觉对齐终极修正 ============ */

/* 1. 修复顶栏分类不居中问题 */
/* 原理：不再让它挤在中间，而是用绝对定位强制锁定在屏幕正中央 */
@media (min-width: 993px) {
    .nav-island {
        position: relative !important; /* 给绝对定位提供锚点 */
        justify-content: space-between !important;
    }

    .nav-links {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* 完美的物理居中 */

        /* 确保不会覆盖两边的点击 */
        z-index: 10;

        /* 防止宽度太宽覆盖到 Logo */
        max-width: 60%;
        justify-content: center;
    }
}

/* 2. 修复列表页胶囊按钮偏上/不对齐问题 */
@media (min-width: 993px) {
    /* 胶囊容器：强制垂直居中对齐 */
    body.is-list-view .pc-list-toolbar {
        align-items: center !important;
        /* 如果觉得整体太高或太低，微调这里的 padding-top/bottom */
        padding: 5px !important;
        height: 52px !important; /* 固定容器高度，避免被撑开 */
        box-sizing: border-box !important;
    }

    /* 按钮本体：强制内部元素居中 */
    .toolbar-btn {
        height: 40px !important; /* 锁死高度 */
        display: flex !important;
        align-items: center !important; /* 垂直居中核心 */
        justify-content: center !important;
        margin: 0 !important; /* 清除可能的外边距 */
        border: 1px solid transparent; /* 预留边框位置防止抖动 */
    }

    /* 搜索框：锁死高度与按钮一致 */
    .toolbar-search input {
        height: 40px !important;
        margin: 0 !important;
        /* 确保文字垂直居中 */
        line-height: normal !important;
        display: flex;
        align-items: center;
    }

    /* 修复 SVG 图标的垂直对齐 */
    .btn-svg, .search-icon-svg {
        display: block !important; /* 消除 inline 元素的基线偏移 */
        vertical-align: middle !important;
    }

    /* 微调文字的位置，有时文字字形自带下沉 */
    .toolbar-btn span {
        position: relative;
        top: 1px; /* 稍微往下压 1px，视觉上更平衡 */
        line-height: 1;
    }
}

/* ============ 🔧 搜索框溢出完美修复补丁 ============ */
@media (min-width: 993px) {

    /* 1. 锁定搜索框宽度，禁止伸缩 */
    .toolbar-search input {
        width: 240px !important;  /* 设定一个舒适的固定宽度 */

        /* 移除 width 动画，只保留颜色和阴影的过渡 */
        transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s !important;
    }

    /* 2. 聚焦状态：宽度不变，只变质感 */
    .toolbar-search input:focus {
        width: 240px !important;  /* 保持宽度不变，防止撑破胶囊 */

        background: var(--card-bg) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
        border-color: var(--primary) !important;
    }

    /* 3. 给胶囊容器加个保险，防止内容太挤 */
    body.is-list-view .pc-list-toolbar {
        padding-right: 8px !important; /* 确保右侧留白 */
        justify-content: center !important; /* 确保整体居中 */
    }
}

/* ============ 🔧 布局与滚动修复补丁 ============ */

/* 1. 核心修复：解除高度锁定，让页面自然撑开 */
.layout-container {
    height: auto !important;      /* ❌ 之前的 100vh 会导致滚动条计算错误 */
    min-height: 100vh !important; /* ✅ 只有内容少时才占满屏幕，内容多时自动伸长 */
    overflow: visible !important; /* 允许内容自然溢出，交给 body 滚动 */
}

/* 2. 收紧首页底部间距 (解决"滚动范围太大") */
.home-posts-section {
    padding-bottom: 1rem !important; /* 从 4rem 减小到 1rem */
}

/* 3. 调整页脚间距 */
.site-footer {
    margin-top: 3rem !important;    /* 稍微拉近一点 */
    padding-bottom: 2rem !important; /* 底部留白适中 */
}

/* 4. 确保首页 Bento Grid 下方也不会空太多 */
.bento-grid {
    margin-bottom: 3rem !important;
}

/* ============ 🪐 3D 核心容器 ============ */
#hero-card-scene {
    position: relative;
    /* 必须设置透视，才有 3D 效果 */
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 跨两行 */
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    z-index: 5; /* 保证在最上层 */
}

/* ============ 🃏 3D 卡片本体 ============ */
.hero-3d-card {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 2.5rem 2rem 2.5rem 4rem; /* 左侧留宽给头像 */

    /* 玻璃拟态 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
            0 20px 50px rgba(0,0,0,0.1),
            0 0 0 1px rgba(255,255,255,0.5) inset;

    transform-style: preserve-3d; /* 关键：保留内部 3D 关系 */
    will-change: transform;       /* 性能优化 */

    /* 默认有个轻微的倾斜，等待 JS 接管 */
    transform: rotateY(-5deg) rotateX(5deg);
    transition: transform 0.1s linear; /* JS驱动时设为极短或none，这里给个平滑底 */
}

[data-theme="dark"] .hero-3d-card {
    background: rgba(30, 30, 35, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

/* ============ 👤 破格头像 (悬浮) ============ */
.hero-avatar-wrapper {
    position: absolute;
    top: 50%;
    left: -40px; /* 让头像飞出卡片左边界 */
    transform: translateY(-50%) translateZ(40px); /* Z轴浮起 40px */
    width: 130px;
    height: 130px;
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-body); /* 与背景融合的边框 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-3d-card:hover .hero-avatar-img {
    transform: scale(1.1) rotate(-5deg); /* 悬停微动 */
}

/* ============ 📝 内容排版 ============ */
.hero-content {
    /* 内容也在 Z 轴上稍微浮起，产生层级感 */
    transform: translateZ(20px);
    margin-left: 20px;
}

.hero-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.hero-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.hero-divider {
    width: 40px;
    height: 4px;
    background: var(--text-main);
    margin: 1.5rem 0;
    border-radius: 2px;
    opacity: 0.1;
}

.hero-roles {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right; /* 对齐右侧，更有设计感 */
}

.hero-roles li {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.9;
    /* 每一行在 Z 轴递增，形成阶梯感 */
    transform: translateZ(10px);
    transition: all 0.2s;
}

.hero-roles li:hover {
    color: var(--primary);
    transform: translateZ(15px) translateX(-5px);
}

/* 社交按钮 */
.hero-social-row {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end; /* 靠右 */
    gap: 10px;
    transform: translateZ(25px);
}

.hero-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
    font-size: 1.2rem;
    text-decoration: none;
}

[data-theme="dark"] .hero-social-btn { background: rgba(255,255,255,0.1); }

.hero-social-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
}

/* ============ 🪐 轨道系统 (Orbit System) ============ */
.orbit-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-50px); /* 放在卡片后面 */
    width: 600px;
    height: 600px;
    pointer-events: none; /* 不阻挡鼠标 */
    z-index: -1;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(0,0,0,0.08);
}
[data-theme="dark"] .orbit-ring { border-color: rgba(255,255,255,0.08); }

.ring-1 { width: 300px; height: 300px; }
.ring-2 { width: 450px; height: 450px; opacity: 0.6; }
.ring-3 { width: 600px; height: 600px; opacity: 0.3; }

/* 旋转容器 */
.planet-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    animation: orbit-rotate linear infinite;
}

/* 具体的行星轨道修正 */
.p-1 { width: 300px; height: 300px; animation-duration: 20s; } /* 内圈 */
.p-2 { width: 450px; height: 450px; animation-duration: 35s; animation-direction: reverse; } /* 中圈反转 */
.p-3 { width: 600px; height: 600px; animation-duration: 50s; } /* 外圈 */

/* 行星图标本体 */
.planet-icon {
    position: absolute;
    top: 0;
    left: 50%;
    /* 修正位置到轨道线上 */
    transform: translate(-50%, -50%);

    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;

    /* 关键：让图标自己反向旋转，保持直立，不随轨道倒立 */
    animation: counter-rotate linear infinite;
}

.p-1 .planet-icon { animation-duration: 20s; }
.p-2 .planet-icon { animation-duration: 35s; animation-direction: reverse; }
.p-3 .planet-icon { animation-duration: 50s; }

/* 动画定义 */
@keyframes orbit-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes counter-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ============ ✨ 光泽特效 ============ */
.card-shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
    border-radius: 24px;
    pointer-events: none;
    z-index: 10;
}

/* ============ 📱 移动端回退 ============ */
@media (max-width: 992px) {
    #hero-card-scene {
        display: block; /* 取消 grid */
        height: auto;
        padding: 1rem;
    }

    .orbit-system { display: none; } /* 移动端隐藏复杂轨道 */

    .hero-3d-card {
        width: 100%;
        max-width: none;
        padding: 2rem;
        transform: none !important; /* 禁用 3D */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-avatar-wrapper {
        position: relative;
        top: auto; left: auto;
        transform: none !important;
        margin-bottom: 1.5rem;
    }

    .hero-content {
        margin-left: 0;
        transform: none !important;
    }

    .hero-roles { text-align: center; }
    .hero-social-row { justify-content: center; }
}
/* ============ 🎛️ 核心布局控制 (PC/Mobile 切换) ============ */

/* 1. 默认容器设置 (PC优先) */
.about-section-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem; /* PC端名片和组件的间距 */
    margin-bottom: 4rem;
}

/* 组件容器 (PC端双列) */
.widgets-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PC端左右并排 */
    gap: 2rem;
    width: 100%;
    max-width: 900px;
    grid-template-rows: auto auto !important;
}

/* 显隐控制 */
#pc-hero-view { display: block; width: 100%; max-width: 800px; }
#mobile-hero-view { display: none; } /* PC端隐藏旧名片 */

/* ============ 📱 移动端强制还原 (一点不改!) ============ */
@media (max-width: 992px) {

    /* 1. 还原外层容器间距 */
    .about-section-container {
        display: block; /* 取消 flex，恢复默认流式布局 */
        gap: 0;
        margin-bottom: 1.5rem; /* 恢复原来的底部间距 */
    }

    /* 2. 隐藏 PC 新特性，显示 Mobile 旧名片 */
    #pc-hero-view { display: none !important; }
    #mobile-hero-view { display: block !important; }

    /* 3. 还原旧名片样式细节 */
    #mobile-hero-view .bento-profile {
        margin-bottom: 1.5rem; /* 恢复名片到底下组件的间距 */
        /* 确保原来样式生效 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(255,255,255,0.5) 100%);
        padding: 1.5rem;
    }

    [data-theme="dark"] #mobile-hero-view .bento-profile {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(30,30,30,0.5) 100%);
    }

    /* 4. 还原组件区布局 (变成单列堆叠) */
    .widgets-container {
        display: grid;
        grid-template-columns: 1fr !important; /* 强制单列 */
        gap: 1.5rem !important; /* 恢复原来的间距 */
        max-width: none;
    }

    /* 移除 PC 端特有的 margin */
    .widgets-container .bento-card {
        margin: 0;
    }
}

/* ============ 🛠️ 布局修正补丁 ============ */

/* 1. 修复顶部被导航栏遮挡的问题 */
.about-section-container {
    /* 增加顶部内边距，把整个区域往下推 */
    padding-top: 100px !important;

    /* 2. 修复名片和下面组件挨得太近的问题 */
    /* 增加 Flex 间距，从 4rem 增加到 6rem */
    gap: 6rem !important;

    /* 确保底部有空间给备案信息 */
    padding-bottom: 4rem !important;
}

/* 3. 增加 3D 名片容器的“物理高度” */
/* 之前的 320px 太矮了，导致名片旋转时视觉上占位不够，和下面重叠 */
#hero-card-scene {
    height: 400px !important;
}

/* 移动端适配：手机上不需要那么大的间距 */
@media (max-width: 992px) {
    .about-section-container {
        padding-top: 20px !important; /* 手机上原本就有导航栏间距处理，这里稍微加一点即可 */
        gap: 2rem !important;
    }
    #hero-card-scene {
        height: auto !important; /* 手机上自动高度 */
    }
}
/* ============ 🚀 视觉优化补丁：大间距 & 上浮动效 ============ */

/* 1. 加大板块之间的垂直间距 (PC端) */
@media (min-width: 993px) {
    /* 个人名片区域 (About) 与 文章列表区域 (Posts) 之间的距离 */
    .about-section-container {
        /* 从原来的 4rem 大幅增加到 10rem，创造呼吸感 */
        margin-bottom: 10rem !important;
    }

    /* 也可以给文章列表区加一点顶部内边距 */
    .home-posts-section {
        padding-top: 2rem;
    }
}

/* 2. 移动端间距也稍微拉大一点 */
@media (max-width: 992px) {
    .about-section-container {
        margin-bottom: 4rem !important;
    }
}

/* ============ 🌊 3D 沉浸式浮出动效 (可重复触发) ============ */

/* 1. 初始状态：板块“沉”在屏幕深处 */
.reveal-on-scroll {
    opacity: 0;
    /* translateY(60px): 初始位置在下方
               scale(0.9): 初始大小稍微缩小，制造“远”的感觉
               perspective(1000px): 开启 3D 透视
            */
    transform: perspective(1000px) translateY(60px) scale(0.9);

    /* 过渡效果：
               当添加 .is-visible 类时 (进入视野)，播放 1.2s 的丝滑浮出动画
               当移除 .is-visible 类时 (离开视野)，播放 0.6s 的快速消退动画
            */
    transition:
            opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 性能优化 */
    will-change: transform, opacity;
}

/* 2. 激活状态：板块“浮”出水面 */
.reveal-on-scroll.is-visible {
    opacity: 1;
    /* 恢复正常大小和位置 */
    transform: perspective(1000px) translateY(0) scale(1);
}

/* PC 端增加一点高斯模糊，模拟景深变化，质感拉满 */
@media (min-width: 993px) {
    .reveal-on-scroll {
        filter: blur(8px);
        transition:
                opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 1s ease-out;
    }
    .reveal-on-scroll.is-visible {
        filter: blur(0);
    }
}

/* ============ 📐 PC端首屏沉浸式调整 (名片独占一屏) ============ */
@media (min-width: 993px) {
    .about-section-container {
        /* 1. 垂直居中名片： */
        /* 设置顶部内边距为屏幕高度的 22%，让名片视觉上处于屏幕中心偏上 */
        padding-top: 22vh !important;

        /* 2. 把组件推到“下一屏”： */
        /* 设置间距为屏幕高度的 35% (约 300-400px)，确保第一眼看不到下面的组件 */
        gap: 35vh !important;

        /* 底部留白 */
        padding-bottom: 5rem !important;
    }

    /* 3. 调整名片场景容器 */
    #hero-card-scene {
        /* 稍微增加高度，给轨道旋转留出更多安全空间，防止被切断 */
        height: 500px !important;

        /* 确保内容垂直居中 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============ 📱 移动端保持原样 (防止受到影响) ============ */
@media (max-width: 992px) {
    .about-section-container {
        padding-top: 20px !important;
        gap: 2rem !important;
    }
    #hero-card-scene {
        height: auto !important;
    }
}
/* ============ 🛠️ 阅读模式侧边栏锁定修复补丁 ============ */
@media (min-width: 993px) {
    /* 1. 强制重置侧边栏容器：让它相对于屏幕锁定 */
    body.is-reading .sidebar {
        position: sticky !important;
        top: 80px !important;       /* 距离顶部 80px */
        height: auto !important;    /* 高度自动 */
        max-height: 85vh !important;/* 最大高度为屏幕的 85%，防止太长 */
        overflow-y: auto !important;/* 如果目录太长，允许内部滚动 */
        scrollbar-width: none !important; /* 隐藏滚动条 */

        /* 关键：移除堆叠特效的干扰 */
        transform: none !important;
        perspective: none !important;
        padding-bottom: 0 !important;
    }

    /* 2. 强制重置内部卡片：取消它的 sticky，防止双重锁定导致乱跳 */
    body.is-reading .sidebar-card {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* 3. 确保目录列表左侧的线条显示正确 */
    body.is-reading #toc-list {
        border-left: 2px solid var(--glass-border) !important;
    }
}

/* ============ 🚀 底部“查看全部”按钮美化 (Premium CTA) ============ */
.view-all-btn.large {
    /* 1. 布局与尺寸 */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 文字和箭头间距 */
    padding: 14px 36px; /* 宽敞的点击区域 */

    /* 2. 字体样式 */
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-main);

    /* 3. 初始外观 (玻璃质感) */
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 99px; /* 完美胶囊圆角 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);

    /* 4. 动画过渡 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    z-index: 1; /* 确保内容在伪元素之上 */
}

/* 深色模式下的初始背景微调 */
[data-theme="dark"] .view-all-btn.large {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

/* 悬停时的渐变背景层 (使用伪元素实现平滑淡入) */
.view-all-btn.large::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--primary-gradient); /* 你的主题渐变色 */
    opacity: 0; /* 默认隐藏 */
    z-index: -1; /* 放在文字后面 */
    transition: opacity 0.3s ease;
}

/* 箭头图标样式 */
.btn-arrow {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted); /* 默认灰色 */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ✨✨✨ 悬停交互 (Hover State) ✨✨✨ */
.view-all-btn.large:hover {
    color: #ffffff; /* 文字变白 */
    border-color: transparent; /* 边框隐形 */
    transform: translateY(-3px); /* 整体上浮 */
    /* 投射橙色光晕 */
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3);
}

/* 显示渐变背景 */
.view-all-btn.large:hover::before {
    opacity: 1;
}

/* 箭头变白并向右飞 */
.view-all-btn.large:hover .btn-arrow {
    stroke: #ffffff;
    transform: translateX(5px);
}

/* 点击时的 Q 弹反馈 */
.view-all-btn.large:active {
    transform: scale(0.96) translateY(-1px);
    box-shadow: 0 5px 15px rgba(234, 88, 12, 0.2);
}

/* ============ ✨ 核心交互：悬停显示摘要动画 ============ */

/* 4. 默认状态：摘要隐藏在卡片底部下面 */
.home-posts-grid .post-card .post-summary {
    position: absolute; /* 绝对定位 */
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1.2rem;

    /* 视觉风格：带有模糊背景的玻璃层，覆盖在文字上方 */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);

    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.4;

    /* 关键动画初始状态：透明且位于下方 100% 的位置 */
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 丝滑的贝塞尔曲线 */
    z-index: 2;

    /* 限制摘要高度，防止太长溢出 */
    max-height: 60%;
    overflow: hidden;
    /* 摘要末尾显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 深色模式摘要背景 */
[data-theme="dark"] .home-posts-grid .post-card .post-summary {
    background: rgba(30, 30, 35, 0.95);
    border-top-color: rgba(255,255,255,0.05);
}

/* 5. 悬停状态：摘要滑出 */
.home-posts-grid .post-card:hover .post-summary {
    opacity: 1;
    transform: translateY(0); /* 滑动到正常位置 */
}

/* 悬停时卡片本身的反馈 */
.home-posts-grid .post-card:hover {
    transform: translateY(-3px);
    background: var(--card-bg); /* 悬停时背景变实 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: transparent;
}

/* ============ 🍱 首页文章板块：托盘嵌套风格 (Tray & Blocks) ============ */

/* 1. 布局容器 */
.home-posts-grid {
    display: grid;
    /* 保持单列，让托盘铺满 */
    grid-template-columns: 1fr;
    gap: 3rem; /* 托盘之间的间距 */
    max-width: 1000px; /* 稍微限制宽度，防止太扁 */
    margin: 0 auto;
}

/* 2. ✨ 大托盘 (Base Tray) */
.bento-base-tray {
    /* 核心外观：浅色底座，包裹着小卡片 */
    background: #f0f0f2; /* 类似图片里的灰白色底座 */
    border-radius: 40px; /* 极大的外圆角 */
    padding: 1.5rem; /* 托盘的内边距，给小卡片留出空隙 */

    /* 布局：让里面的小卡片左右并排 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右各一个 */
    gap: 1.5rem; /* 小卡片之间的间隙 */

    /* 阴影与质感 */
    box-shadow:
            0 10px 30px -10px rgba(0,0,0,0.05),
            inset 0 1px 0 rgba(255,255,255,0.8); /* 顶部高光 */

    transition: transform 0.3s ease;
}

/* 深色模式下的托盘 */
[data-theme="dark"] .bento-base-tray {
    background: rgba(255,255,255,0.03); /* 深色下改为微透的深灰 */
    border: 1px solid rgba(255,255,255,0.05);
}

.bento-base-tray:hover {
    transform: translateY(-5px); /* 整体微微上浮 */
}

/* 3. ✨ 内部小卡片 (Mini Cards) */
/* 3. ✨ 内部小卡片 (Mini Cards) - 质感升级版 */
.bento-mini-card {
    position: relative;
    height: 260px;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden;

    /* 🔥 核心修改：不再是纯黑，而是带有光感的深灰渐变 */
    /* 从左上角的亮灰 (#3f3f46) 渐变到右下角的深灰 (#18181b) */
    background: linear-gradient(145deg, #323238 0%, #161618 100%);

    /* 增加 1px 的半透明边框，提升精致度 */
    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;

    /* 优化阴影：让卡片浮起来，而不是贴在底座上 */
    box-shadow:
            0 8px 20px -5px rgba(0,0,0,0.3), /* 投影 */
            inset 0 1px 0 rgba(255,255,255,0.15); /* 顶部那一抹反光 (关键!) */
}

/* 深色模式下，稍微再暗一点点，但保持质感 */
[data-theme="dark"] .bento-mini-card {
    background: linear-gradient(145deg, #27272a 0%, #09090b 100%);
    border-color: rgba(255,255,255,0.1);
}

/* 悬停效果保持不变 */
.bento-mini-card:hover {
    transform: scale(1.02) translateY(-2px);
    z-index: 2;
    /* 悬停时阴影加深 */
    box-shadow:
            0 15px 30px -10px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.2);
}

/* 4. 内容排版：大标题 */
.mini-card-content h3 {
    font-size: 2.2rem; /* 🔥 超大标题，填满空间 */
    font-weight: 800;
    line-height: 1.1;
    margin: 0;

    /* 渐变字 */
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 限制行数 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 背景装饰大字 (如 "Code") */
.card-bg-text {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255,255,255,0.03); /* 极淡的背景纹理 */
    pointer-events: none;
    text-transform: uppercase;
}

/* 底部栏 */
.mini-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.4);
    font-family: monospace;
    font-size: 0.9rem;
}

.icon-arrow {
    font-size: 1.2rem;
    color: var(--primary);
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: all 0.3s;
}

.bento-mini-card:hover .icon-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ============ 5. 遮罩动画 (你喜欢的那个) ============ */
.bento-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.95); /* 极深遮罩 */
    backdrop-filter: blur(10px);
    padding: 2rem;

    display: flex;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transform: scale(1.1) rotate(2deg);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-mini-card:hover .bento-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) rotate(0deg);
}

.overlay-text {
    color: #e4e4e7;
    font-size: 1.05rem;
    line-height: 1.7; /* 稍微增加行高，阅读更舒适 */
    font-weight: 500;

    /* 🔥 核心修改：允许滚动 */
    width: 100%;
    max-height: 100%; /* 限制最大高度为父容器高度 */
    overflow-y: auto; /* 内容超出时显示滚动条 */
    padding-right: 10px; /* 给滚动条留点位置，防止文字贴边 */

    /* 移除之前的省略号截断代码 */
    display: block;
}

.overlay-text::-webkit-scrollbar {
    width: 4px; /* 极细 */
}

/* 滚动条轨道 (透明) */
.overlay-text::-webkit-scrollbar-track {
    background: transparent;
}

/* 滚动条滑块 (半透明白) */
.overlay-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* 鼠标放上去时滑块变亮 */
.overlay-text::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ============ 📱 移动端适配 ============ */
@media (max-width: 992px) {
    .bento-base-tray {
        grid-template-columns: 1fr; /* 移动端托盘里上下排 */
        padding: 1rem;
        border-radius: 24px;
    }
    .bento-mini-card {
        height: 200px;
        padding: 1.5rem;
    }
    .mini-card-content h3 {
        font-size: 1.8rem;
    }
}

/* ============ 🪟 Zen Preview (True Zen Style) ============ */
#zen-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* 背景稍微深一点，突出主体 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

#zen-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 窗口本体：改为横向布局 (左边内容，右边工具栏) */
.zen-window {
    width: 90vw;
    max-width: 1100px;
    height: 85vh;

    background: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: row; /* ✨ 关键：横向排列 */
    overflow: hidden;
    position: relative;

    /* 初始动画状态 */
    transform: scale(0.96) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#zen-modal-overlay.active .zen-window {
    transform: scale(1) translateY(0);
}

/* 左侧：内容区域 (占据绝大部分空间) */
.zen-content-wrapper {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto; /* 内容在这里滚动 */
    padding: 3rem 4rem; /* 宽敞的阅读空间 */
    background: transparent;
    scroll-behavior: smooth;

    /* 隐藏滚动条但保留功能 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.zen-content-wrapper::-webkit-scrollbar { display: none; }

/* 右侧：垂直工具栏 (Vertical Toolbar) */
.zen-sidebar-actions {
    width: 60px;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    border-left: 1px solid var(--glass-border);

    display: flex;
    flex-direction: column;
    align-items: center;

    /* ✨ 修复 1：加大顶部间距，防止被圆角切掉，位置下移 */
    padding-top: 2.5rem !important;
    gap: 1.5rem;

    flex-shrink: 0;
    z-index: 20; /* ✨ 修复 2：提高层级，确保能点到 */
    position: relative; /* 确保 z-index 生效 */
}

[data-theme="dark"] .zen-sidebar-actions {
    background: rgba(255, 255, 255, 0.03);
}

/* 工具栏按钮样式 */
.zen-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%; /* 圆形按钮 */
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.zen-action-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* 悬停效果 */
.zen-action-btn:hover {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: scale(1.1);
}

/* 关闭按钮特别样式 (顶部的 X) */
.zen-action-btn.close-btn:hover {
    background: #ef4444; /* 红色 */
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .zen-window {
        flex-direction: column-reverse; /* 手机上工具栏在底部，或者直接改为顶部 */
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .zen-sidebar-actions {
        /* 移动端横向排列，不需要 padding-top，而是居中 */
        padding-top: 0 !important;
        justify-content: space-evenly; /* 分散对齐 */
        align-items: center;
    }

    .zen-content-wrapper {
        padding: 1.5rem;
    }
}

/* ============ 🪟 Zen TOC Sidebar (新功能: 目录栏) ============ */
.zen-toc-container {
    width: 0; /* 默认收起 */
    background: rgba(0, 0, 0, 0.02); /* 极淡的背景 */
    border-right: 1px solid transparent;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Q弹动画 */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* 激活状态：展开 */
.zen-toc-container.open {
    width: 260px;
    border-right-color: var(--glass-border);
}

.zen-toc-content {
    width: 260px; /* 固定宽度防止内容重排 */
    padding: 2rem 1.5rem;
    height: 100%;
    overflow-y: auto;
}

/* 目录标题 */
.zen-toc-header {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

/* 目录链接 */
.zen-toc-link {
    display: block;
    padding: 6px 0;
    padding-left: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    margin-bottom: 4px;
}

.zen-toc-link:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.03);
    border-radius: 0 4px 4px 0;
}

/* 缩进层级 */
.zen-toc-h3 { margin-left: 15px; font-size: 0.85rem; }

/* 移动端适配 */
@media (max-width: 768px) {
    .zen-toc-container.open {
        position: absolute; /* 手机上改为浮动覆盖，不挤压内容 */
        z-index: 20;
        height: 100%;
        background: var(--card-bg);
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    }
}

/* ============ 🩹 字体遮挡修复补丁 ============ */

/* 1. 修复个人名片 "Ethan Wang" 中 'g' 底部被切掉的问题 */
.hero-title,
.bento-name {
    /* 原来是 1.1，太挤了导致渐变渲染不全 */
    line-height: 1.3 !important;

    /* 增加底部内边距，强制撑开渲染区域 */
    padding-bottom: 8px !important;

    /* 因为加了 padding，用负 margin 抵消，保持排版位置不变 */
    margin-bottom: -8px !important;
}

/* 2. 修复文章卡片 "spring" 中 'g' 底部被切掉的问题 */
.mini-card-content h3 {
    /* 同样调大行高，给字母尾巴留出空间 */
    line-height: 1.35 !important;

    /* 增加渲染高度 */
    padding-bottom: 6px !important;
}

/* (可选) 微调文章卡片背景大字 "CODE" 的位置，防止它视觉上压得太低 */
.card-bg-text {
    top: 1.2rem !important; /* 稍微往下移一点点，让出空间 */
}

/* ============ 🍱 2. Bento 布局优化 (左1右2结构) ============ */
/* PC端：左侧是大时钟，右侧是上下两个小卡片 */
@media (min-width: 993px) {
    .widgets-container {
        display: grid;
        /* 左侧占 1.4份，右侧占 1份 */
        grid-template-columns: 1.4fr 1fr !important;
        grid-template-rows: auto !important; /* 只有一行，高度由内容撑开 */
        gap: 1.5rem !important;
        align-items: stretch; /* 强制拉伸，使左右等高 */
    }

    /* 右侧垂直堆叠容器 */
    .bento-right-stack {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        height: 100%;
    }

    /* 让右侧两个卡片高度平分，或者自适应 */
    .bento-right-stack > .bento-card {
        flex: 1; /* 平分高度 */
        margin: 0 !important; /* 清除默认 margin */
    }

    /* 让时钟卡片占满左侧高度 */
    .bento-clock {
        height: 100%;
        min-height: 340px; /* 保证最少高度，防止太扁 */
        margin: 0 !important;
    }
}


/* ============ 🚀 3. 新组件：纯净技能传送带 (No Emoji) ============ */
.tech-marquee-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 6rem auto 2rem auto; /* 上间距加大，与上面分开 */
    position: relative;
    overflow: hidden;
    /* 两侧渐变遮罩 */
    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;
    width: max-content;
    gap: 4rem; /* 增加间距，更显高级 */
    animation: scroll-left 40s linear infinite; /* 稍微调慢一点 */
}

/* 鼠标放上去暂停 */
.tech-marquee-wrapper:hover .tech-track {
    animation-play-state: paused;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif; /* 使用英文字体 */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.5; /* 默认稍微淡一点 */
    transition: all 0.3s ease;
    cursor: default;
    user-select: none;
    text-transform: uppercase; /* 全大写更像 Logo */
    letter-spacing: 1px;
}

/* 悬停高亮 */
.tech-item:hover {
    opacity: 1;
    color: var(--primary);
    transform: translateY(-2px);
    text-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

/* SVG 图标样式 */
.tech-icon-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform 0.3s;
}

.tech-item:hover .tech-icon-svg {
    transform: scale(1.1);
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ============ 📟 终端运行时间 ============ */
.bento-terminal {
    background: #0f172a; /* 终端黑 */
    color: #38bdf8; /* 终端蓝/绿 */
    font-family: 'JetBrains Mono', 'Fira Code', monospace; /* 代码字体 */
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #1e293b !important;
    position: relative;
    overflow: hidden;
}

/* 扫描线效果 */
.bento-terminal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 10;
}

.terminal-header {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.yellow { background: #f59e0b; }
.dot.green { background: #22c55e; }

.runtime-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.blink-cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============ 🚀 技能传送带：高对比度修正 ============ */
.tech-item {
    opacity: 1 !important; /* 强制不透明，原来是0.5 */
    color: var(--text-main) !important; /* 使用深色文字，原来是浅灰 */
    font-weight: 800 !important; /* 字体加粗 */
}

/* 让图标保持原本的颜色（或者你想让图标也变成深色，可以删掉下面这行） */
.tech-item .tech-icon-svg {
    opacity: 1 !important;
}

/* 只有鼠标悬停时，才变成主题色（橙色） */
.tech-item:hover {
    color: var(--primary) !important;
}

/* ============ 📟 终端卡片优化 ============ */
.bento-terminal {
    /* 确保内容垂直分布均匀 */
    justify-content: flex-start !important;
    gap: 10px;
}

.runtime-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace; /* 必须用等宽字体 */
    font-variant-numeric: tabular-nums; /* 强制数字等宽，防止跳动 */
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: auto; /* 把时间往下推 */
    margin-bottom: auto;
}

/* 优化底部状态栏，防止被切断 */
.terminal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #22c55e;
    margin-top: 4px;
}

/* ============ 🩹 终端卡片布局终极修复 ============ */

/* 1. 调整内部容器：使用 space-between 确保头尾分开 */
.bento-terminal > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    /* 关键：不再强制居中，而是撑满空间 */
    flex-grow: 1 !important;
    justify-content: space-between !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

/* 2. 调整时间文字：去掉可能导致溢出的 margin */
.runtime-text {
    font-variant-numeric: tabular-nums;
    font-size: 1.8rem;
    line-height: 1.1;
    /* 上下自动 margin 实现垂直居中，但留出空间给底部 */
    margin: auto 0 !important;
    padding: 0 !important;
}

/* 3. 底部状态栏：确保可见性 */
.terminal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #22c55e;
    /* 确保不被压缩 */
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    min-height: 20px;
}

/* 4. 确保绿点一定有颜色 */
.terminal-footer span:first-child {
    background-color: #22c55e !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

/* ============ 🕰️ 2. 极光指针时钟 (全屏+发光) ============ */
.analog-clock-face {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none !important; /* 去掉圆圈边框 */
    background: transparent !important;
    box-shadow: none !important;
    z-index: 10;
}

/* 中心发光点 */
.analog-clock-face::after {
    width: 12px; height: 12px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px var(--primary);
    z-index: 20;
}

/* 通用指针样式：带光晕 */
.hand {
    border-radius: 99px;
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom center;
    box-shadow: 0 0 8px rgba(0,0,0,0.2); /* 基础阴影 */
    transition: transform 0.1s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}

/* 时针：短粗，深色 */
.hand.hour {
    width: 8px;
    height: 25%; /* 使用百分比，适应卡片大小 */
    background: var(--text-main);
    z-index: 5;
}

/* 分针：细长，深色 */
.hand.minute {
    width: 6px;
    height: 38%;
    background: var(--text-main);
    opacity: 0.8;
    z-index: 6;
}

/* 秒针：超长，亮色，强发光 */
.hand.second {
    width: 3px;
    height: 45%;
    background: #ef4444; /* 醒目的红色或橙色 */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); /* 霓虹光晕 */
    z-index: 7;
}

/* 刻度装饰 (可选，让它看起来更像表) */
.clock-mark {
    position: absolute;
    background: var(--text-muted);
    opacity: 0.3;
    border-radius: 99px;
}
.mark-12 { top: 10px; left: 50%; width: 4px; height: 12px; transform: translateX(-50%); }
.mark-6  { bottom: 10px; left: 50%; width: 4px; height: 12px; transform: translateX(-50%); }
.mark-3  { right: 10px; top: 50%; width: 12px; height: 4px; transform: translateY(-50%); }
.mark-9  { left: 10px; top: 50%; width: 12px; height: 4px; transform: translateY(-50%); }

/* 数字模式隐藏 */
#clock-digital.hidden { display: none !important; }
#clock-analog.hidden { display: none !important; }

/* 1. 头部：减小下边距，让第一行($ uptime)往上提 */
.terminal-header {
    margin-bottom: 0.5rem !important;
}

/* 2. 内容容器：取消两端对齐，改为居中+底部垫高 */
.bento-terminal > div:last-child {
    /* 不再把内容推到两头，而是聚拢 */
    justify-content: center !important;

    /* ✨ 关键：给底部加个厚垫子，把视觉重心往上顶 */
    padding-bottom: 1.5rem !important;

    /* 控制三行文字之间的紧凑度 */
    gap: 0.5rem !important;
}

/* 3. 时间大字：去掉原本用来撑开空间的 margin */
.runtime-text {
    margin: 0 !important;
    line-height: 1.1 !important;
    padding: 0 !important;
}

/* 4. 底部状态栏：紧跟在时间后面 */
.terminal-footer {
    margin-top: 0.2rem !important; /* 稍微留一点缝隙即可 */
    flex-shrink: 0 !important;     /* 防止被压缩 */
}

/* ============ ☁️ 新增：Bento 卡片持续漂浮效果 ============ */

/* 1. 定义漂浮关键帧动画 */
/* 这种轻微的上下浮动能制造出“悬浮在空中”的感觉 */
@keyframes continuous-float {
    0%, 100% {
        transform: translateY(0); /* 原点 */
    }
    50% {
        transform: translateY(-10px); /* 向上浮动 10px */
    }
}

/* 2. 将动画应用于所有 Bento 卡片 */
.bento-card {
    /* 应用动画：名称 | 时长 | 缓动函数 | 无限循环 */
    /* 默认设置为 5秒完成一次浮动循环 */
    animation: continuous-float 5s ease-in-out infinite;
    /* 告诉浏览器此元素即将发生变化，优化性能 */
    will-change: transform;
}

/* 3. 【重要】解决 Hover 冲突 */
/* 当鼠标悬停时，必须暂停原有的漂浮动画，否则会和 hover 的 transform 样式打架出现闪烁 */
.bento-card:hover {
    animation-play-state: paused;
    /* 这里不需要写其他样式，因为 CSS 上方已经定义了 .bento-card:hover 的样式，会自动生效 */
}


/* ============ 🎲 制造随机感 (关键步骤) ============ */
.bento-grid > .bento-card:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 6s; /* 面积大，动慢点显得稳重 */
}
/* 统计卡片 */
.bento-stats {
    animation-delay: -1.5s;
    animation-duration: 4.8s;
}

/* --- 中部的 Widgets 区域 --- */
/* 时钟卡片 */
.bento-clock {
    animation-delay: -3s;
    animation-duration: 5.2s;
}
/* 终端/运行时间卡片 */
.bento-terminal {
    animation-delay: -0.5s;
    animation-duration: 4.5s;
}
/* 社交/联系卡片 */
.bento-social {
    animation-delay: -2.5s;
    animation-duration: 5s;
}

/* --- 移动端适配 --- */
/* 手机屏幕较小，太多动态可能会晕，适当减弱幅度 */
@media (max-width: 768px) {
    @keyframes continuous-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); /* 移动端减小浮动距离 */ }
    }
    /* 或者如果你想在手机上完全关闭漂浮，解注下面这行 */
    /* .bento-card { animation: none !important; } */
}