/* Display Settings Slider */
#display-setting input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.5rem;
    background-image: var(--color-selection-bar);
    background-color: transparent;
    border-radius: 0.25rem;
    border: none;
    outline: none;
    transition: background-image 0.15s ease-in-out;
    cursor: pointer;
}

/* Remove default track styles for Firefox */
#display-setting input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
}

/* Input Thumb */
#display-setting input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 1rem;
    width: 0.5rem;
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: none;
    cursor: pointer;
    margin-top: 0; /* Align center if needed */
}
#display-setting input[type="range"]::-webkit-slider-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}
#display-setting input[type="range"]::-webkit-slider-thumb:active {
    background: rgba(255, 255, 255, 0.6);
}

#display-setting input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 0.5rem;
    border-radius: 0.125rem;
    border-width: 0;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}
#display-setting input[type="range"]::-moz-range-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}
#display-setting input[type="range"]::-moz-range-thumb:active {
    background: rgba(255, 255, 255, 0.6);
}

#display-setting input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 0.5rem;
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}
#display-setting input[type="range"]::-ms-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}
#display-setting input[type="range"]::-ms-thumb:active {
    background: rgba(255, 255, 255, 0.6);
}
/* Floating TOC Styles */
.floating-toc-wrapper {
    position: fixed;
    bottom: 6rem; /* Above back-to-top */
    right: 2rem;
    z-index: 99;
}

.floating-toc-panel {
    position: absolute;
    bottom: calc(100% + 1rem);
    right: 0;
    transition: all 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1001;
}

.floating-toc-panel.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.floating-toc-panel.hide {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
}

/* Global Utility Classes matching Astro */
.card-base {
    border-radius: var(--radius-large);
    overflow: hidden;
    background-color: var(--card-bg);
    transition: background-color 0.15s, color 0.15s;
}

.enable-card-border .card-base {
    transition: all 0.3s;
    border: 1px solid var(--line-divider);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.wallpaper-transparent .card-base {
    background-color: var(--card-bg-transparent) !important;
}

/* Widget Layout - Collapsed State */
widget-layout .collapsed {
    height: var(--collapsed-height, 7.5rem);
}

widget-layout {
    display: block;
}

/* Mobile Menu Styles (Sync with Astro) */
#mobile-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding-left: 1.5rem; /* Indent submenus */
}

#mobile-menu .menu-item-has-children.expanded > .sub-menu {
    max-height: 24rem; /* 96 * 0.25rem = 24rem approx, or enough for content */
}

#mobile-menu .dropdown-arrow {
    transition: transform 0.2s;
}

#mobile-menu .menu-item-has-children.expanded > div > .dropdown-arrow {
    transform: rotate(180deg);
}

body {
    font-family: 'Roboto', sans-serif, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* =========================================
   Astro Layout Styles (Banner & Mobile Opt)
   ========================================= */

/* Banner text styles */
.banner-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    animation: banner-fadeInUp 1s ease-out;
    font-weight: bold;
}

.banner-subtitle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    animation: banner-fadeInUp 1s ease-out 0.3s both;
}

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

/* 移动端无侧边栏布局优化 */
@media (max-width: 768px) {
    .mobile-no-sidebar {
        display: block !important;
        width: 100% !important;
    }
    
    .mobile-no-sidebar main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .mobile-no-sidebar #content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
    }
}

/* 移动端横幅优化 - 小屏手机 (320px - 480px) */
@media (max-width: 480px) {
    /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 70vh !important; /* 保持较大高度优先显示banner */
        min-height: 450px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 35vh !important; /* 小屏手机，提升至与波浪平行 */
        min-height: calc(100vh - 35vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 95% !important; /* 增加文本宽度利用率 */
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.2rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important; /* 增强阴影 */
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 13vh !important;
        min-height: 100px !important;
        max-height: 176px !important;
    }
}

/* 确保平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 页面顶部渐变高光效果 */
.top-gradient-highlight {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
    pointer-events: none;
    z-index: 20;
    transition: all var(--duration-medium) var(--ease-standard);
}

/* 暗色主题下的渐变高光效果 */
:root.dark .top-gradient-highlight {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.05) 80%, transparent 100%);
}

/* 移动端横幅优化 - 大屏手机 (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 75vh !important;
        min-height: 500px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 38vh !important; /* 大屏手机，提升至与波浪平行 */
        min-height: calc(100vh - 38vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1.5rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 90% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 15vh !important;
        min-height: 110px !important;
        max-height: 166px !important;
    }
}

/* 移动端横幅优化 - 超大屏手机/小平板 (641px - 767px) */
@media (min-width: 641px) and (max-width: 767px) {
    /* Banner wrapper 高度优化 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 72vh !important;
        min-height: 520px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 36vh !important; /* 小平板，提升至与波浪平行 */
        min-height: calc(100vh - 36vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1.75rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 88% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.9rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.85rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 16vh !important;
        min-height: 115px !important;
        max-height: 190px !important;
    }
}

/* 平板设备横幅优化 (768px - 1023px) - Tailwind md 断点 */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Banner wrapper 高度优化 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 70vh !important;
        min-height: 500px;
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 33vh !important; /* 平板端，提升至与波浪平行 */
        min-height: calc(100vh - 33vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 2rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 85% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 4rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 17vh !important;
        min-height: 120px !important;
        max-height: 216px !important;
    }
}

/* 桌面端保持居中 (1024px+) - Tailwind lg 断点 */
@media (min-width: 1024px) {
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 2rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-text-overlay > div {
        margin-bottom: 0 !important;
        width: 75% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 背景图片优化 */
    #banner img {
        transition: transform 1s ease-out !important;
    }
    
    /* 波浪效果恢复默认 */
    .waves {
        height: 15vh !important;
        min-height: 80px !important;
        max-height: 150px !important;
    }
}

/* 移动端图片优化 */
@media (max-width: 1023px) {
    /* 移动端背景图片优化 */
    #banner img {
        transition: transform 0.5s ease-out !important;
    }
}

/* 平板和手机端非首页隐藏banner - 改进的分阶段动画 (1024px以下) */
@media (max-width: 1023px) {
    #banner-wrapper {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-out;
        transform-origin: top center;
        /* 硬件加速优化 */
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    .mobile-hide-banner {
        transform: translateY(-100%) translateZ(0) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        /* 快速消失 */
        transition: transform 0.3s ease-in, opacity 0.2s ease-in !important;
    }
    
    /* 手机端非首页时主内容区域从顶部开始 - 延迟出现的动画 */
    .absolute.w-full.z-30 {
        transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
        /* 硬件加速优化 */
        will-change: top;
        /* 禁用transform以保证back to top 按钮可以显示
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        */
    }
    
    .absolute.w-full.z-30.mobile-main-no-banner {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        /* 内容区域快速上移 */
        transition: top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s !important;
    }
}

/* 移动端banner性能优化 */
@media (max-width: 1023px) {
    .banner-container {
        /* 启用硬件加速 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform, opacity;
        
        /* 优化渲染性能 */
        contain: layout style paint;
        
        /* 减少重绘 */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .carousel-item {
        /* 硬件加速 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform, opacity;
        
        /* 优化触摸响应 */
        touch-action: pan-y;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .banner-text-overlay {
        /* 文字渲染优化 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        
        /* 减少重排 */
        contain: layout style;
    }

    /* 移动端图片优化 - 只针对装饰性图片 */
    .banner-container img:not(.interactive):not([onclick]):not([data-clickable]) {
        /* 图片渲染优化 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        
        /* 防止图片拖拽 */
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        
        /* 触摸优化 - 只针对装饰性图片 */
        pointer-events: none;
    }
    
    /* 交互式图片保持可点击 */
    .banner-container img.interactive,
    .banner-container img[onclick],
    .banner-container img[data-clickable] {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* 当banner被禁用时的布局样式 */
.no-banner-layout {
    top: 5.5rem !important;
    min-height: calc(100vh - 5.5rem) !important;
}

/* 移动端当banner被禁用时的布局样式 */
@media (max-width: 1023px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important; /* 移除过渡动画，立即应用位置 */
    }
}

/* 小屏手机当banner被禁用时的布局样式 */
@media (max-width: 480px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important;
    }
}

/* 平板设备当banner被禁用时的布局样式 */
@media (min-width: 768px) and (max-width: 1023px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important;
    }
}

/* 移动端横屏优化 */
@media (max-width: 1023px) and (orientation: landscape) {
    #banner-wrapper:not(.mobile-hide-banner) {
        top: 0 !important; /* 横屏模式从顶部开始，避免被导航栏覆盖 */
        height: 60vh !important;
    }
    
    /* 主内容区域位置调整 - 确保在banner下面，但不影响非首页 */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.mobile-main-no-banner):not(.no-banner-layout) {
        top: 32vh !important; /* 横屏模式，提升至与波浪平行 */
        min-height: calc(100vh - 32vh) !important;
    }
    
    .banner-container {
        height: 60vh;
        min-height: 300px;
    }

    .banner-text-overlay {
        padding: 1rem 1.5rem;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }

    .banner-title {
        font-size: 2.2rem !important; /* 增大字体大小 */
        line-height: 1.3;
    }

    .banner-subtitle {
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }
}

/* 移动端暗色模式优化 */
@media (max-width: 1023px) and (prefers-color-scheme: dark) {
    .banner-text-overlay {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            transparent 100%
        );
    }

    .banner-title {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    }

    .banner-subtitle {
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    }
}

/* 水波纹显示优化 */
.waves {
    /* 确保水波纹完整显示 */
    overflow: visible;
    z-index: 5;
    /* 硬件加速，确保与背景同步渲染 */
    transform: translateZ(0);
    will-change: transform;
    /* 移除contain属性，避免限制动画渲染范围 */
    contain: none;
}

.waves svg {
    /* 确保SVG完整渲染 */
    width: 100%;
    height: 100%;
    display: block;
    /* SVG硬件加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 波浪填充色主题切换优化 */
.waves use {
    /* 确保填充色与页面背景同步更新 */
    will-change: fill;
}

/* 波浪与背景同步切换优化 - 解决交界线闪烁 */
#header-waves {
    /* 确保波浪容器与页面背景在同一合成层 */
    isolation: isolate;
    /* 移除contain属性，避免限制波浪动画 */
    contain: none;
    /* 精确对齐 */
    margin-bottom: -1px;
}

/* 主题切换时的额外保护 */
.theme-changing #header-waves,
.theme-changing #header-waves svg,
.theme-changing #header-waves use {
    /* 在主题切换期间禁用所有可能的渲染延迟 */
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 移动端水波纹特殊优化 */
@media (max-width: 1023px) {
    #header-waves {
        /* 确保水波纹容器不被裁剪 */
        overflow: visible;
        z-index: 5;
        /* 水波纹快速消失动画 */
        transition: transform 0.3s ease-in, opacity 0.2s ease-in;
    }
    
    /* 当banner隐藏时，水波纹也隐藏 */
    .mobile-hide-banner #header-waves {
        display: none !important;
        transform: translateY(-100%);
        opacity: 0;
        /* 水波纹比banner更快消失 */
        transition: transform 0.25s ease-in, opacity 0.15s ease-in;
    }
    
    .waves svg {
        /* 移动端SVG优化 */
        min-height: 60px;
    }
    
    /* 确保水波纹在banner底部正确定位 */
    .waves {
        bottom: -1px !important;
        position: absolute !important;
    }
}

/* 超小屏幕水波纹优化 */
@media (max-width: 360px) {
    .waves {
        height: 6vh !important;
        min-height: 50px !important;
        max-height: 70px !important;
    }
}

/* 基于屏幕高度的banner优化 - 优先显示banner */
/* 极小高度屏幕 (高度 ≤ 500px) */
@media (max-height: 500px) {
    #banner-wrapper {
        height: 85vh !important; /* 占用更多高度确保banner显示 */
        min-height: 350px !important;
    }
    
    .banner-text-overlay {
        padding: 1rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 2.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .banner-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    .waves {
        height: 10vh !important;
        min-height: 60px !important;
    }
}

/* 小高度屏幕 (高度 501px - 600px) */
@media (min-height: 501px) and (max-height: 600px) {
    #banner-wrapper {
        height: 80vh !important;
        min-height: 400px !important;
    }
    
    .banner-text-overlay {
        padding: 1.5rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 3.2rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .waves {
        height: 17vh !important;
        min-height: 250px !important;
    }
}

/* 中等高度屏幕 (高度 601px - 700px) */
@media (min-height: 601px) and (max-height: 700px) {
    #banner-wrapper {
        height: 75vh !important;
        min-height: 450px !important;
    }
    
    .banner-text-overlay {
        padding: 2rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 3.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .banner-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    .waves {
        height: 15vh !important;
        min-height: 200px !important;
    }
}

/* 横屏模式特殊处理 - 优先显示banner */
@media (orientation: landscape) and (max-height: 500px) {
    #banner-wrapper {
        height: 90vh !important; /* 横屏时占用更多高度 */
        min-height: 300px !important;
    }
    
    .banner-text-overlay {
        padding: 1rem 2rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 2.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .waves {
        height: 10vh !important;
        min-height: 50px !important;
    }
}

/* Timeline Dash Line */
.dash-line {
    position: relative;
}

.dash-line::before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    left: calc(50% - 1px);
    border-left: 2px dashed var(--line-color);
    pointer-events: none;
    transition: all 0.3s;
    transform: translateY(-50%);
}

/* Grid Mode Styles */
.grid-mode .post-card-wrapper {
    flex-direction: column-reverse !important;
    height: 100% !important;
    justify-content: flex-end !important;
}

.grid-mode .post-card-content {
    width: 100% !important;
    height: auto !important;
    flex-grow: 1 !important;
}

.grid-mode .post-card-image {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-large) var(--radius-large) 0 0 !important;
    max-height: none !important;
    aspect-ratio: 2/1 !important;
}

.grid-mode .description {
    flex-grow: 0 !important;
}

.grid-mode .stats {
    margin-top: auto !important;
}

.grid-mode .has-cover .post-card-content {
    padding-top: 0.8rem !important;
}

.grid-mode .has-cover .post-card-title::before {
    top: 1.3rem !important;
}