/**
 * Gsage Theme - Modern Tech Design
 * Based on user design: Blue tech gradient style
 */

/* === 颜色系统 - 渐变配色 === */
:root {
    /* 背景渐变系 - 正常模式 */
    --bg-page-start: #F4FBFF;
    --bg-page-mid: #EAF7FF;
    --bg-page-end: #D8F0FF;
    --bg-white: #FFFFFF;
    --bg-card: #FFFFFF;
    
    /* 浅蓝装饰卡 */
    --bg-light-blue-1: #CFEFFF;
    --bg-light-blue-2: #BFE7FF;
    
    /* 浅青装饰卡 */
    --bg-light-cyan: #BDEFEA;
    
    /* 浅紫装饰卡 */
    --bg-light-purple-1: #D9D0FF;
    --bg-light-purple-2: #CFC7FF;
    
    /* Hero 渐变色 */
    --hero-gradient-left: #5E7BFF;
    --hero-gradient-mid: #6CCBFF;
    --hero-gradient-right: #CFF9C8;
    
    /* 强调色 - 蓝色系 */
    --primary-blue: #4FB3FF;
    --primary-blue-dark: #4DBBFF;
    --primary-blue-light: #56C8FF;
    
    /* 文字颜色 */
    --text-dark: #1F2A37;
    --text-primary: #2B3340;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-white: #FFFFFF;
    
    /* 标签底色 */
    --tag-blue-bg: #E7F7FF;
    --tag-purple-bg: #F0E9FF;
    
    /* 边框/分割线 */
    --border-light: #E6F2FA;
    --border-lighter: #DCECF7;
    
    /* 阴影 */
    --shadow-card: 0 8px 24px rgba(80, 140, 220, 0.12);
    --shadow-card-hover: 0 12px 32px rgba(70, 120, 200, 0.16);
    --shadow-hero: 0 16px 48px rgba(94, 123, 255, 0.2);
    
    /* 圆角系统 */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 999px;
    
    /* 间距系统 */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    --spacing-4xl: 64px;
    
    /* 容器 */
    --container-max: 1400px;
    --container-narrow: 960px;
    
    /* 字体 */
    --font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-hero: 64px;
    
    /* 字重 */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    
    /* 导航 */
    --header-height: 80px;
}

/* 暗黑模式 - 保持科技感 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page-start: #0a0e1a;
        --bg-page-mid: #0f1623;
        --bg-page-end: #141b2d;
        --bg-card: #1a2235;
        --text-dark: #f0f4f8;
        --text-primary: #d0d8e0;
        --text-secondary: #90a0b0;
        --text-muted: #607080;
        --border-light: #2a3550;
        --border-lighter: #202a40;
    }
}

/* === 基础重置 === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: linear-gradient(180deg, var(--bg-page-start) 0%, var(--bg-page-mid) 50%, var(--bg-page-end) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 头部导航 === */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    background: var(--bg-white);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(80, 140, 220, 0.08);
}

/* === 顶部展示模块 === */
.top-display-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* 幻灯片轮播 */
.top-slider {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-hero);
    height: 400px;
}

.slider-container {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slider-item {
    min-width: 100%;
    position: relative;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--text-white);
}

.slider-item-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.slider-dots {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

/* 底部 Hero 区域 */
.bottom-hero {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
}

.hero-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, 
        rgba(94, 123, 255, 0.2) 0%, 
        rgba(108, 203, 255, 0.15) 50%, 
        rgba(207, 249, 200, 0.1) 100%
    );
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    border: 2px dashed var(--border-light);
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.2s;
}

.slider-dot.active {
    background: var(--bg-white);
}

/* 搜索栏板块 */
.top-search-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3xl);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.top-search-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.top-search-form {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    gap: var(--spacing-md);
}

.top-search-input {
    flex: 1;
    padding: 16px 24px;
    background: var(--bg-page-start);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    transition: all 0.2s;
}

.top-search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(79, 179, 255, 0.15);
}

.top-search-button {
    padding: 16px 32px;
    background: var(--primary-blue);
    border: none;
    border-radius: var(--radius-full);
    color: var(--bg-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.2s;
}

.top-search-button:hover {
    background: var(--primary-blue-dark);
}

.search-categories {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.search-category {
    padding: 8px 16px;
    background: var(--bg-page-start);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.search-category:hover {
    background: var(--primary-blue);
    color: var(--bg-white);
}

/* 内容轮播 */
.top-posts-section {
    overflow: hidden;
}

.posts-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    transition: transform 0.5s ease-in-out;
}

.posts-carousel-item {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.posts-carousel-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.carousel-post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.carousel-post-content {
    padding: var(--spacing-md);
}

.carousel-post-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.carousel-post-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--border-light);
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-dot.active {
    background: var(--primary-blue);
}

/* 静态横幅 */
.top-banner {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-hero);
}

.top-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 电脑端：横幅高度压缩为原来的一半左右（手机端保持原样） */
@media (min-width: 769px) {
    .top-banner {
        height: 380px;
    }

    .top-banner img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

.header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.site-logo img {
    max-height: 40px;
    width: auto;
    transition: opacity 0.3s ease;
}

.site-logo .logo-light {
    display: block;
}

.site-logo .logo-dark {
    display: none;
}

/* 暗黑模式 Logo */
@media (prefers-color-scheme: dark) {
    .site-logo .logo-light {
        display: none;
    }
    
    .site-logo .logo-dark {
        display: block;
    }
}

/* 导航菜单 */
.main-navigation {
    display: flex;
    gap: var(--spacing-3xl);
}

.main-navigation a {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    transition: color 0.2s;
    position: relative;
}

.main-navigation a:hover {
    color: var(--primary-blue);
}

/* 搜索框 */
.header-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-input {
    width: 240px;
    padding: 10px 16px;
    background: var(--bg-page-start);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(79, 179, 255, 0.15);
}

.search-button {
    width: 40px;
    height: 40px;
    background: var(--primary-blue);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-white);
    cursor: pointer;
    transition: background 0.2s;
}

.search-button:hover {
    background: var(--primary-blue-dark);
}

/* === Hero 区域 === */
.hero-section {
    max-width: var(--container-max);
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-xl);
}

.hero-banner {
    background: linear-gradient(135deg, 
        var(--hero-gradient-left) 0%,
        var(--hero-gradient-mid) 50%,
        var(--hero-gradient-right) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4xl);
    box-shadow: var(--shadow-hero);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.hero-content {
    color: var(--bg-white);
}

.hero-title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    opacity: 0.95;
    margin-bottom: var(--spacing-xl);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 14px 32px;
    background: var(--bg-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-blue);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: var(--primary-blue-dark);
}

.hero-cta .arrow-icon {
    width: 20px;
    height: 20px;
    background: var(--primary-blue);
    border-radius: var(--radius-sm);
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

/* === 卡片导航 === */
.quick-access {
    max-width: var(--container-max);
    margin: var(--spacing-2xl) auto;
    padding: 0 var(--spacing-xl);
}

.quick-access-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.quick-access-grid::-webkit-scrollbar {
    display: none;
}
.quick-access-grid > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.quick-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    background: linear-gradient(135deg, #4FB3FF, #5E7BFF);
    background-size: cover;
    background-position: center;
    min-width: 170px;
    position: relative;
    overflow: hidden;
}

.quick-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: inherit;
    transition: background 0.2s;
}

.quick-card:hover::before {
    background: rgba(0, 0, 0, 0.35);
}

.quick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.quick-card--default {
    background: linear-gradient(135deg, #4FB3FF, #5E7BFF) !important;
}

.quick-card--default::before {
    background: rgba(0, 0, 0, 0.15);
}

.quick-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.quick-card-icon i {
    font-size: 32px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.quick-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #fff;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* === 主要内容区 === */
.main-content {
    max-width: var(--container-max);
    margin: var(--spacing-2xl) auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
}

/* 左侧精选栏 */
.featured-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.featured-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.featured-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.featured-content {
    padding: var(--spacing-md);
}

.featured-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.featured-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* 右侧卡片网格 */
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.content-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.card-cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-body {
    padding: var(--spacing-md);
}

.card-tags {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.card-tag {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.card-tag.blue {
    background: var(--tag-blue-bg);
    color: var(--primary-blue);
}

.card-tag.purple {
    background: var(--tag-purple-bg);
    color: #7c5ddb;
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* === 侧边悬浮窗（仅电脑端） === */
.sidebar-float {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sidebar-float--right {
    right: 24px;
}

.sidebar-float--left {
    left: 24px;
}

/* 样式一：悬浮导航 */
.sidebar-float-nav {
    background: #fff;
    border-radius: 24px;
    padding: 8px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    transition: box-shadow 0.3s;
}

.sidebar-float-nav:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.15);
}

.sidebar-float-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-float-nav__item {
    position: relative;
}

.sidebar-float-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.2s, transform 0.2s;
    position: relative;
}

.sidebar-float-nav__link:hover {
    background-color: #f5f7fa;
    transform: scale(1.05);
}

.sidebar-float-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #5a6b7a;
    transition: color 0.2s;
}

.sidebar-float-nav__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.sidebar-float-nav__icon i {
    font-size: 24px;
    line-height: 1;
    color: inherit;
}

.sidebar-float-nav__link:hover .sidebar-float-nav__icon {
    color: #4FB3FF;
}

/* 文字标签 - 淡入淡出 */
.sidebar-float-nav__label {
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* 右侧：标签在左侧显示 */
.sidebar-float--right .sidebar-float-nav__label {
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
}

.sidebar-float--right .sidebar-float-nav__item:hover .sidebar-float-nav__label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 左侧：标签在右侧显示 */
.sidebar-float--left .sidebar-float-nav__label {
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
}

.sidebar-float--left .sidebar-float-nav__item:hover .sidebar-float-nav__label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 分隔线 */
.sidebar-float-nav__item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 1px;
    background: #e8ebef;
}

/* 返回顶部图标特殊样式 */
.sidebar-float-nav__item--backtop .sidebar-float-nav__icon {
    color: #4FB3FF;
}

.sidebar-float-nav__item--backtop .sidebar-float-nav__link:hover .sidebar-float-nav__icon {
    color: #5E7BFF;
    transform: scale(1.1);
    transition: transform 0.2s, color 0.2s;
}

/* 样式二：悬浮图片 */
.sidebar-float-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.sidebar-float-image:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.15);
}

.sidebar-float-image img {
    display: block;
    max-width: 140px;
    border-radius: 8px;
}

.sidebar-float-image__backtop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 8px;
    border: none;
    background: #f5f7fa;
    border-radius: 50%;
    cursor: pointer;
    color: #5a6b7a;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.sidebar-float-image__backtop:hover {
    background: #4FB3FF;
    color: #fff;
    transform: scale(1.1);
}

.sidebar-float-image__backtop svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* 移动端隐藏悬浮窗 */
@media (max-width: 768px) {
    .sidebar-float {
        display: none !important;
    }
}

/* === 响应式 === */
@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .hero-banner {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        grid-template-columns: 1fr;
    }
    
    .quick-access-grid {
        gap: var(--spacing-sm);
    }
    .quick-card {
        min-width: 140px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .quick-card-icon i {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .main-navigation {
        display: none;
    }
    
    .quick-access-grid {
        gap: var(--spacing-xs);
    }
    .quick-card {
        min-width: 120px;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .quick-card-icon i {
        font-size: 24px;
    }
    .quick-card-title {
        font-size: 12px;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* === 宽栏模式（全局设置-布局设置-页面宽度模式=宽栏） === */
/* 内容区整体铺满：左右贴住两侧边框（保留内边距作为呼吸空间） */
body.gsage-wide {
    --container-max: 100%;
}
body.gsage-wide .container,
body.gsage-wide .header-container,
body.gsage-wide .header-inner,
body.gsage-wide .top-display-section,
body.gsage-wide .quick-access,
body.gsage-wide .main-content,
body.gsage-wide .hero-section {
    max-width: 100%;
}
/* 瀑布流页面（推荐/归档/关注流/查看更多） */
body.gsage-wide .xhs-container {
    max-width: 100%;
}
/* === 标准栏模式（默认）===
   桌面端按视口保留约 4% 侧边距（min(自定义宽度, 92vw)），
   避免在 MacBook 等视口宽≈1400 的设备上与宽栏模式视觉无差异。
   移动端/平板（≤1024）不受影响，保持原有铺满行为。 */
@media (min-width: 1025px) {
    body:not(.gsage-wide) {
        --container-max: min(var(--container-width, 1400px), 92vw);
    }
}
/* 隐私：不放大文章正文阅读宽度，保持可读性 */