/* ==========================================================================   
   移动端体验优化样式   
   ========================================================================== */

/* 基础设置 - 移动优先 */
@media (max-width: 768px) {

    /* 防止页面缩放和滚动时的闪烁 */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        /* 移除点击高亮 */
    }

    /* 全局触摸优化 */
    * {
        -webkit-touch-callout: none;
        /* 禁用长按菜单 */
        -webkit-user-select: none;
        /* 禁用文本选择 */
        user-select: none;
        box-sizing: border-box;
        /* 统一盒模型 */
    }

    /* 允许输入框文本选择 */
    input,
    textarea,
    [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }

    /* 移动端禁用除侧边栏外所有链接的hover效果 */
    a:not(.sidebar-nav-item > a):not(.sidebar-droplist li a) {
        -webkit-tap-highlight-color: transparent;
    }
    
    a:not(.sidebar-nav-item > a):not(.sidebar-droplist li a):hover {
        background-color: transparent !important;
        color: inherit !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* 优化滚动体验 */
    body {
        -webkit-overflow-scrolling: touch;
        /* iOS平滑滚动 */
        overflow-x: hidden;
        /* 防止横向滚动条 */
        margin: 0;
        padding: 0;
        width: 100%;
        /* 确保body占满屏幕 */
        min-width: 320px;
        /* 设置最小宽度 */
    }

    /* ==========================================================================
       移动端黑夜模式样式优化
       ========================================================================== */

    /* 移动端黑夜模式基础样式 */
    [data-dark-mode="true"] body {
        background-color: #1a1a1a !important;
        /* 强制设置深色背景 */
        background-image: none !important;
        /* 确保移除背景图片 */
        color: #e0e0e0;
        /* 设置文字颜色 */
    }

    /* 移动端黑夜模式主内容区域样式 */
    [data-dark-mode="true"] .main-content {
        background-color: rgba(30, 30, 30, 0.8) !important;
        /* 设置半透明深色背景 */
        color: #e0e0e0 !important;
        /* 设置文字颜色 */
    }

    /* 移动端黑夜模式头部容器样式 */
    [data-dark-mode="true"] #header-container {
        background-color: rgba(30, 30, 30, 0.95) !important;
        /* 设置深色头部背景 */
        border-bottom: 1px solid #404040 !important;
        /* 设置边框颜色 */
    }

    /* 移动端黑夜模式导航链接样式 */
    [data-dark-mode="true"] .navbar a {
        color: #e0e0e0 !important;
        /* 设置导航链接文字颜色 */
    }

    /* 移动端黑夜模式卡片样式 */
    [data-dark-mode="true"] section li {
        background-color: rgba(30, 30, 30, 0.8) !important;
        /* 设置卡片深色背景 */
        border: 1px solid #404040 !important;
        /* 设置卡片边框颜色 */
    }

    /* 移动端黑夜模式卡片链接样式 */
    [data-dark-mode="true"] section li a {
        color: #e0e0e0 !important;
        /* 设置卡片链接文字颜色 */
    }

    /* 移动端黑夜模式二级菜单样式 */
    [data-dark-mode="true"] .droplist {
        background-color: rgba(45, 45, 45, 0.95) !important;
        /* 设置二级菜单深色背景 */
        border: 1px solid #404040 !important;
        /* 设置二级菜单边框 */
    }

    /* 移动端黑夜模式二级菜单链接样式 */
    [data-dark-mode="true"] .droplist a {
        color: #e0e0e0 !important;
        /* 设置二级菜单链接文字颜色 */
    }

    /* 移动端黑夜模式底部按钮样式 */
    [data-dark-mode="true"] .settings-button {
        background-color: rgba(60, 60, 60, 0.8) !important;
        /* 设置按钮深色背景 */
        color: #e0e0e0 !important;
        /* 设置按钮文字颜色 */
        border-color: #404040 !important;
        /* 设置按钮边框颜色 */
    }

    /* ==========================================================================
       头部导航优化 - 修复导航显示不完全问题
       ========================================================================== */

    /* 头部容器优化 */
    #header-container {
        height: 56px;
        /* 更适合触摸的高度 */
        padding: 0 8px;
        /* 增加内边距避免内容紧贴边缘 */
        display: flex !important;
        /* 强制使用flex布局 */
        align-items: center;
        /* 垂直居中 */
        overflow: hidden;
        /* 防止内容溢出 */
        width: 100% !important;
        /* 确保宽度100% */
        box-sizing: border-box;
        /* 包含内边距和边框 */
        position: fixed !important;
        /* 确保固定定位 */
        top: 0 !important;
        /* 固定在顶部 */
        left: 0 !important;
        /* 固定在左侧 */
        z-index: 9999 !important;
        /* 确保在最上层 */
    }

    /* Logo样式优化 */
    #text-logo {
        padding-left: 0 !important;
        /* 强制移除左侧内边距 */
        margin-right: 8px;
        /* 调整右侧间距 */
        flex-shrink: 0;
        /* 防止Logo被压缩 */
        display: flex;
        align-items: center;
    }

    #text-logo a {
        font-size: 24px;
        /* 增大字体大小，提升可读性 */
        padding: 0 8px;
        /* 调整内边距 */
        white-space: nowrap;
        /* 防止文字换行 */
        font-weight: bold;
        /* 增加字体粗细，提升可读性 */
    }

    /* 导航栏优化 - 在移动端隐藏原有导航，显示汉堡菜单 */
    .navbar {
        display: none;
        /* 隐藏原有导航栏 */
    }

    /* 确保汉堡菜单在移动端可见 */
    .mobile-menu-toggle {
        display: flex !important;
    }

    /* ==========================================================================
       内容区域优化 - 修复主内容区域未占满屏幕问题
       ========================================================================== */

    /* 为带 id 的锚点区块预留固定头部高度，防止直接通过 URL 访问锚点时标题被遮挡 */
    section[id] {
        scroll-margin-top: 76px;
    }

    /* 主内容容器优化 - 确保占满屏幕 */
    .main-content {
        padding: 12px;
        /* 调整内边距 */
        width: 100% !important;
        /* 强制宽度100% */
        box-sizing: border-box !important;
        /* 包含内边距和边框 */
        margin: 0 !important;
        /* 移除外边距 */
        position: relative;
        /* 设置相对定位 */
        z-index: 1;
        /* 确保层级正确 */
        background-color: rgba(241, 241, 241, 0.8) !important;
        /* 保留半透明背景 */
        padding-top: 70px !important;
        /* 为固定头部留出空间 */
        min-height: 100vh !important;
        /* 确保最小高度为视口高度 */
    }

    /* 卡片容器优化 */
    section {
        padding: 0 10px 30px 10px;
        /* 调整内边距 */
        margin: 0 auto !important;
        /* 水平居中且无垂直外边距 */
        width: 100% !important;
        /* 确保宽度100% */
        box-sizing: border-box !important;
        /* 包含内边距和边框 */
        display: block !important;
        /* 确保为块级元素 */
    }

    /* 确保section下的ul占满宽度 */
    section ul {
        width: 100% !important;
        /* 确保宽度100% */
        justify-content: space-around !important;
        /* 均匀分布 */
        padding: 0 !important;
        /* 移除内边距 */
        margin: 0 !important;
        /* 移除外边距 */
        display: flex !important;
        /* 强制使用flex布局 */
        flex-wrap: wrap !important;
        /* 强制换行 */
    }

    /* 优化链接卡片布局 */
    section li {
        flex: 1 1 calc(50% - 8px) !important;
        /* 强制2列布局 */
        max-width: calc(50% - 8px) !important;
        /* 最大宽度控制 */
        margin: 4px !important;
        /* 设置统一外边距 */
        padding: 12px !important;
        /* 调整内边距 */
        height: auto !important;
        /* 自动高度 */
    }

    /* 卡片内部链接样式优化 */
    section li a {
        white-space: normal !important;
        /* 允许文字换行 */
        word-wrap: break-word !important;
        /* 允许长单词换行 */
        text-align: center !important;
        /* 文字居中 */
        font-size: 14px !important;
        /* 调整字体大小 */
        line-height: 1.4 !important;
        /* 调整行高 */
        height: auto !important;
        /* 自动高度 */
        display: block !important;
        /* 确保为块级元素 */
    }

    /* 移动端个性化面板居中显示 */
    .settings-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 320px !important;
        height: auto !important;
        max-height: 70vh !important;
        border-radius: 15px !important;
        z-index: 2999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 移动端个性化面板显示时的动画 */
    .settings-panel.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* 移动端个性化面板隐藏时的状态 */
    .settings-panel:not(.show) {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
    }

    /* 移动端个性化面板遮罩层 */
    .settings-panel-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .settings-panel-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 移动端个性化面板头部样式优化 */
    .settings-panel h3 {
        cursor: default !important;
        /* 移动端禁用拖动 */
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    /* 时间显示区域优化 */
    #header-end {
        text-align: center;
        margin: 10px 0;
    }

    .time-display {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 10px 0;
    }

    .time-display p {
        margin: 0 !important;
        padding: 0;
    }

    #start-time,
    #end-time {
        display: inline-block;
        text-align: center;
        padding: 3px 10px;
        font-size: 14px;
    }

    /* 移动端通知窗口样式优化 */
    #popup {
        width: 85vw !important;
        /* 使用视口宽度的85% */
        max-width: 320px !important;
        /* 设置最大宽度 */
        height: auto !important;
        /* 自动高度 */
        max-height: 70vh !important;
        /* 设置最大高度为视口高度的70% */
        top: 50% !important;
        /* 垂直居中 */
        left: 50% !important;
        /* 水平居中 */
        transform: translate(-50%, -50%) !important;
        /* 确保居中 */
        padding: 15px !important;
        /* 减小内边距 */
        font-size: 14px !important;
        /* 减小字体大小 */
        overflow-y: auto !important;
        /* 允许垂直滚动 */
        -webkit-overflow-scrolling: touch !important;
        /* iOS平滑滚动 */
    }

    /* 移动端通知窗口文字样式 */
    #popup p {
        font-size: 14px !important;
        /* 减小字体大小 */
        margin: 8px 0 !important;
        /* 减小外边距 */
        line-height: 1.4 !important;
        /* 调整行高 */
    }

    /* 移动端通知窗口按钮样式 */
    #notice-button {
        padding: 10px 20px !important;
        /* 减小按钮内边距 */
        font-size: 14px !important;
        /* 减小按钮字体大小 */
        margin-top: 10px !important;
        /* 减小顶部外边距 */
    }

    /* 滚动文本容器样式 */
.scroll-container {
    width: 100% !important;
    margin: 0 auto;
    /* 确保在移动设备上也能正确显示 */
    max-width: 100%;
}
}

/* 桌面端样式 - 隐藏移动端特有元素 */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }

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

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

    .settings-panel-overlay {
        display: none !important;
    }

    /* 确保桌面端显示原有导航栏 */
    .navbar {
        display: block !important;
    }
}

/* ==========================================================================
   小屏幕设备优化 (480px 以下)
   ========================================================================== */

@media (max-width: 480px) {

    /* Logo样式进一步优化 */
    #text-logo a {
        font-size: 22px;
        /* 增大字体大小，提升小屏幕可读性 */
        font-weight: bold;
        /* 增加字体粗细，提升可读性 */
    }

    /* 主内容容器进一步优化 */
    .main-content {
        padding: 10px !important;
        /* 调整内边距 */
        padding-top: 65px !important;
        /* 调整顶部内边距 */
        width: 100vw !important;
        /* 使用视口宽度确保占满 */
        max-width: 100% !important;
        /* 确保最大宽度100% */
        margin: 0 !important;
        /* 强制所有外边距为0 */
    }

    /* 调整卡片布局 */
    section li {
        flex: 1 1 calc(50% - 6px) !important;
        /* 调整2列布局 */
        max-width: calc(50% - 6px) !important;
        margin: 3px !important;
        /* 调整外边距 */
        padding: 10px !important;
        /* 调整内边距 */
    }

    /* 卡片内部链接样式 */
    section li a {
        font-size: 13px !important;
        /* 调整字体大小 */
    }

    /* 小屏幕设备通知窗口样式优化 */
    #popup {
        width: 90vw !important;
        /* 使用视口宽度的90% */
        max-width: 280px !important;
        /* 设置更小的最大宽度 */
        padding: 12px !important;
        /* 进一步减小内边距 */
    }

    /* 小屏幕设备通知窗口文字样式 */
    #popup p {
        font-size: 13px !important;
        /* 进一步减小字体大小 */
        margin: 6px 0 !important;
        /* 进一步减小外边距 */
    }

    /* 小屏幕设备通知窗口按钮样式 */
    #notice-button {
        padding: 8px 16px !important;
        /* 进一步减小按钮内边距 */
        font-size: 13px !important;
        /* 进一步减小按钮字体大小 */
    }
}

/* ==========================================================================
   超小屏幕设备优化 (360px 以下) - 针对320px屏幕的专门优化
   ========================================================================== */

@media (max-width: 360px) {

    /* Logo样式优化 */
    #text-logo a {
        font-size: 20px !important;
        /* 增大字体大小，提升超小屏幕可读性 */
        padding: 0 4px !important;
        /* 调整内边距 */
        font-weight: bold !important;
        /* 增加字体粗细，提升可读性 */
    }

    /* 导航链接样式优化 */
    .navbar a {
        font-size: 12px !important;
        /* 进一步调整字体大小 */
        padding: 0 6px !important;
        /* 调整内边距 */
    }

    /* 超小屏幕设备通知窗口样式优化 */
    #popup {
        width: 95vw !important;
        /* 使用视口宽度的95% */
        max-width: 260px !important;
        /* 设置最小的最大宽度 */
        padding: 10px !important;
        /* 最小化内边距 */
    }

    /* 超小屏幕设备通知窗口文字样式 */
    #popup p {
        font-size: 12px !important;
        /* 最小化字体大小 */
        margin: 5px 0 !important;
        /* 最小化外边距 */
        line-height: 1.3 !important;
        /* 调整行高 */
    }

    /* 超小屏幕设备通知窗口按钮样式 */
    #notice-button {
        padding: 8px 14px !important;
        /* 最小化按钮内边距 */
        font-size: 12px !important;
        /* 最小化按钮字体大小 */
    }
}

/* ==========================================================================
   平板 / 小屏桌面端响应式优化（769px - 1279px）
   说明：补齐 768px 移动端断点与桌面端之间的中间档位，
   使平板与窄桌面在保留顶部导航栏的同时不出现换行溢出、卡片过挤等问题。
   桌面端 20px 字号的导航约需 1230px 才放得下单行，故 1280px 以下均做压缩。

   卡片列数只使用 4 列（≥900px）与 2 列（<900px）两档：
   因为站内绝大多数分组是「4 个链接一组」，4 与 2 都能整除 4，不会拆出落单卡片；
   同时所有卡片统一 flex-grow: 0 保持等宽，落单时也不会被拉伸占满整行。
   ========================================================================== */

/* 1025px - 1279px：小屏笔记本 —— 适当压缩导航 */
@media (min-width: 1025px) and (max-width: 1279px) {
    #text-logo {
        padding-left: 24px;
    }

    #text-logo a {
        font-size: 20px;
        padding: 0 10px;
    }

    .navbar a {
        font-size: 18px;
        padding: 0 10px;
    }
}

/* 769px - 1024px：平板 —— 进一步压缩导航以保证单行显示 */
@media (min-width: 769px) and (max-width: 1024px) {
    #text-logo {
        padding-left: 12px;
    }

    #text-logo a {
        font-size: 20px;
        padding: 0 6px;
    }

    .navbar a {
        font-size: 14px;
        padding: 0 7px;
    }
}

/* 769px - 1279px：平板与窄桌面统一收紧卡片间距，保持 4 列并给文字留出更多空间 */
@media (min-width: 769px) and (max-width: 1279px) {
    section li {
        flex: 0 1 calc(25% - 24px);
        margin: 12px;
        padding: 14px;
    }
}

/* 769px - 899px：小屏平板 / 竖屏 —— 卡片改为 2 列，避免 4 列过窄 */
@media (min-width: 769px) and (max-width: 899px) {
    section li {
        flex: 0 1 calc(50% - 20px);
        margin: 10px;
    }
}