*,
*::before,
*::after {
    box-sizing: border-box !important;
}
/* --- 移动端响应式极致适配 --- */

@media (max-width: 899px) {

    /* 1. 全局清理：解决左右边距不对称 */
    body {
        overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    a,
    span {
        overflow-wrap: break-word !important;
        /* 现代浏览器首选 */
        word-wrap: break-word !important;
        /* 兼容旧版 */
        word-break: break-word !important;
        /* 针对长单词和中文混排 */
    }

    /* 针对文章标题卡片的特殊处理 */
    .post-header h1,
    .article-card h2 a {
        display: block !important;
        white-space: normal !important;
        /* 确保不强制单行 */
        overflow: visible !important;
    }

    /* 移除所有系统默认控件外观，解决 Issue 1 的箭头等问题 */
    input,
    button,
    select,
    textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
    }

    main,
    .post-main-content,
    .article-card,
    .post-header {
        min-width: 0 !important;
        /* 关键：允许 Flex/Block 容器缩到比内容更窄 */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 解决可能存在的图片撑开 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 2. 头部导航：解决吸顶占用空间 & 错位 (Issue 1) */
    header {
        position: relative !important;
        /* 取消吸顶，随页面滑动消失 */
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        flex-direction: column !important;
        height: auto !important;
        box-sizing: border-box !important;
        background: var(--header-bg) !important;
        /* 手机端直接给背景，不依赖 ::before */
        border-radius: 20px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 15px var(--shadow-color) !important;
    }

    /* 隐藏可能导致布局偏移的伪元素 */
    header::before {
        display: none !important;
    }

    header h1 {
        margin: 0 0 15px 0 !important;
        width: 100%;
        text-align: center;
        font-size: 1.6rem !important;
    }

    /* --- 限制文章卡片大小，提高信息密度 --- */
    .article-card {
        padding: 1rem !important;
        /* 大幅缩小内边距 */
    }

    .article-card h2 {
        font-size: 1.1rem !important;
        /* 缩小标题字号 */
        margin-bottom: 8px !important;
    }

    .article-card .article-content div {
        font-size: 0.8em !important;
        /* 缩小日期和浏览量的字号 */
    }

    nav ul {
        justify-content: center !important;
        gap: 1.2rem 0.5rem !important;
        /* 增加行间距到 1.2rem，防止换行时上下误触 */
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    nav a {
        font-size: 1.1em !important;
        padding: 5px 6px !important;
        /* 核心：增加内边距，扩大手指点击范围 */
        display: inline-block !important;
        /* 必须设为 inline-block，padding 才会撑开点击区域 */
        white-space: nowrap !important;
        border-radius: 8px;
        /* 可选：增加一个轻微的圆角背景感，视觉上更清晰 */
    }

    /* 搜索框与顶部工具栏布局优化 */
    .header-right {
        width: 100% !important;
        margin: 0 !important;
        gap: 12px !important;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important; /* 关键：让内容整体居中 */
    }

    /* 语言选择器适配：与深色模式按钮同行显示，不再强制撑满 */
    #lang-select {
        flex: 0 1 auto !important; /* 取消 flex: 1，改为自适应 */
        width: auto !important;
        min-width: 120px !important; /* 保证最小宽度 */
        height: 40px !important;
        border-radius: 20px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--card-bg) !important;
        padding: 0 30px 0 15px !important;
        color: var(--main-text) !important;
        /* 还原下拉箭头 */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 16px !important;
    }

    /* 确保深色模式按钮不被压缩 */
    #theme-toggle {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* 强制搜索框和排序下拉框换行并占满全宽 */
    header form,
    .custom-select {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    header form {
        width: 100% !important;
        display: flex !important;
        /* 强制水平排列 */
        align-items: center !important;
        background: var(--sub-bg) !important;
        padding: 4px !important;
        border-radius: 25px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--border-color) !important;
    }

    header form>div {
        flex: 1 !important;
        /* 让输入框占据剩余空间 */
        overflow: visible !important;
    }

    header form input[type="search"] {
        width: 100% !important;
        background: transparent !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
        /* 防止 iOS 聚焦放大 */
    }

    header form button {
        flex-shrink: 0 !important;
        /* 防止按钮被挤压 */
        padding: 8px 18px !important;
        margin-left: 5px;
        white-space: nowrap;
    }

    /* 3. 解决目录侧边栏占用空间问题 (Issue 2) */
    .post-sidebar {
        display: none !important;
        /* 手机端屏幕太窄，直接隐藏侧边悬浮目录 */
    }

    .post-detail-wrapper {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .post-main-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. 页面主体与侧边栏对齐 */
        .page-layout {
            margin-left: 0 !important;
            /* 关键：取消桌面端的左边距 */
            padding: 10px !important;
            width: 100% !important;
            display: block !important;
        }

    .page-layout main {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .post-body-text pre,
    pre[class*="language-"] {
        max-width: 100% !important;
        /* 强制不超出父容器 */
        overflow-x: auto !important;
        /* 允许横向滚动 */
        box-sizing: border-box !important;
        word-wrap: normal !important;
        white-space: pre !important;
        /* 保持代码不换行，仅滚动 */
    }

    /* 针对 Prism 组件的特殊微调 */
    code[class*="language-"],
    pre[class*="language-"] {
        font-size: 0.85em !important;
        /* 手机端稍微缩小代码字体 */
        tab-size: 2 !important;
        /* 减小缩进占用的宽度 */
    }

    /* 热门排行：移动到内容上方 */
    .sidebar-left {
        margin-top: 10px !important;
        position: static !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .character {
        display: none !important;
    }

    .top-posts-card {
        margin-bottom: 20px !important;
    }

    .post-header {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        /* 确保它遵循标准文档流宽度 */
        top: 0 !important;
        /* 此时 header 的 padding 已经够大，不需要额外的 top 偏移 */
    }

    .post-meta-extra {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 0.85em;
    }

    /* 下拉选择框全宽 */
    .custom-select {
        width: 100% !important;
    }

    .select-trigger {
        width: 100% !important;
        box-sizing: border-box;
        justify-content: center;
    }

    /* 6. 评论列表与卡片左右对齐 */
    .article-card,
    .comment-card,
    .comment-list-section {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 15px 0 !important;
    }

    /* 评论表单昵称邮箱垂直排列 */
    .comment-form .input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .comment-area-flex {
        flex-direction: column !important;
        /* 强制纵向排列 */
        gap: 15px !important;
    }

    /* 确保评论卡片和相关文章卡片都占满宽度，不再并排 */
    .left-side,
    .right-side {
        width: 100% !important;
        max-height: none !important;
        /* 取消相关文章的高度限制，让其自然展开 */
    }

    /* 调整相关文章卡片的顺序，使其在评论框下方 */
    .right-side {
        order: 2;
        /* 确保在评论框之后 */
    }

    .left-side {
        order: 1;
    }

        .article-list {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            /* 强制双列 */
            gap: 10px !important;
            /* 紧凑间距 */
        }

    .pagination {
        gap: 5px;
    }

    .p-btn,
    .p-num {
        padding: 8px 12px;
        font-size: 0.8em;
    }
}

/* --- 中等分辨率适配全量优化 (Tablet / Small Laptop: 769px ~ 1100px) --- */
@media (min-width: 900px) and (max-width: 1250px) {

    /* 1. 全局布局优化 */
    .page-layout {
        margin-left: 240px !important;
        /* 进一步缩小侧边栏占位 */
        padding: 1.5rem !important;
        /* 减少四周留白 */
    }

    .sidebar-left {
        width: 210px !important;
        /* 缩小侧边栏宽度 */
        left: 15px !important;
        /* 靠近屏幕边缘 */
        top: 160px !important;
        /* 适配可能变高的 header */
    }

    /* 2. 首页文章列表优化 */
    .article-list {
        /* 强制保持 2 列布局，防止卡片被挤得太小或变成 1 列导致空间浪费 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .article-card {
        padding: 1.2rem !important;
        /* 提高信息密度 */
    }

    /* 3. 文章详情页优化 */
    .post-detail-wrapper {
        gap: 20px !important;
        /* 缩小正文与目录的间距 */
    }


    .post-main-content,
    .article-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        /* 允许 Flex 容器内部缩小 */
    }

    /* --- 修复标题与元数据拥挤问题 (769px - 1100px) --- */
/* --- 修复标题与元数据拥挤问题 (769px - 1100px) --- */
    .post-header {
        display: flex !important;
        flex-direction: column !important;
        /* 强制垂直排列：标题在上，元数据在下 */
        align-items: center !important;
        /* 内容居中 */
        top: 20px;
    }

    .post-title-top {
        width: 100% !important;
        margin-bottom: 15px !important;
        /* 给下方的元数据留出空间 */
        text-align: center !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        /* 确保长单词能正常换行 */
    }

    .post-meta-extra {
        display: flex !important;
        flex-wrap: wrap !important;
        /* 关键：如果元数据太长，它们自己内部也要能换行 */
        justify-content: center !important;
        gap: 10px 20px !important;
        /* 增加图标之间的间距 */
        width: 100% !important;
        margin-top: 0 !important;
        /* 移除桌面端的 margin */
        opacity: 0.8;
    }

    /* 确保元数据里的每一个小项在极窄情况下也不溢出 */
    .post-meta-extra span {
        white-space: nowrap !important;
        /* 保持“📅 日期”这类小项内部不换行 */
}

    .post-header h1 {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        font-size: 1.8rem !important;
        /* 稍微缩小标题大小，增加空间 */
    }

    /* 确保详情页整体容器不溢出 */
    .post-detail-wrapper {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* 这里的核心：原本 post.css 在 1200px 就隐藏了目录，
       我们在 769-1100px 范围内可以尝试让目录以更窄的形式存在，或者也隐藏它让正文更宽 */
        .post-sidebar {
            display: none !important;
        }

    .post-body-text {
        font-size: 1.1rem !important;
        /* 稍微缩小正文字号 */
        line-height: 1.8 !important;
    }

    /* 4. 评论区布局调整 (Issue 3 的中层适配) */
    .comment-area-flex {
        flex-direction: column !important;
        /* 在 1100px 以下，并排显示太挤了，改为上下排列 */
    }

    .left-side,
    .right-side {
        width: 100% !important;
        /* 占满宽度 */
        margin-bottom: 20px;
    }

    .right-side {
        max-height: none !important;
        /* 取消相关文章的高度限制 */
    }

    /* 5. 导航栏与搜索栏补全 (保持紧凑) */
    header {
        padding: 10px 20px !important;
    }

    header h1 {
        font-size: 1.6em !important;
    }

    nav ul {
        gap: 1.2rem !important;
    }

    /* 搜索框宽度自适应 */
    header form {
        max-width: 250px;
    }

    header form input[type="search"] {
        width: 120px !important;
    }

    header form input[type="search"]:focus {
        width: 160px !important;
    }
}