/* 通用移动端布局修复 */
@media (max-width: 768px) {
    /* 确保所有页面的基础布局 */
    body {
        font-size: 14px !important;
        overflow-x: hidden !important;
    }
    
    .layout {
        flex-direction: column !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 20px !important;
        margin-top: 0 !important;
        padding: 15px !important;
        height: auto !important;
        margin-left: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .sidebar nav {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 10px !important;
        scrollbar-width: thin !important;
        white-space: nowrap !important;
    }

    .sidebar nav::-webkit-scrollbar {
        height: 6px !important;
    }

    .sidebar nav::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 3px !important;
    }

    .sidebar nav::-webkit-scrollbar-thumb {
        background: #007bff !important;
        border-radius: 3px !important;
    }

    .sidebar a {
        min-width: 120px !important;
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* 主内容区域 */
    main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .section {
        padding: 20px 15px !important;
        margin: 10px 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
    }

    .section p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }

    /* Banner 优化 */
    .banner {
        height: 250px !important;
        padding: 20px !important;
    }

    .banner h1 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .banner p {
        font-size: 1.1rem !important;
    }

    /* 回到顶部按钮 */
    #back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    /* 时间线移动端优化 */
    .timeline {
        padding-left: 20px !important;
        margin: 15px 0 !important;
    }

    .timeline::before {
        left: 5px !important;
        width: 2px !important;
    }

    .timeline-item {
        margin-bottom: 20px !important;
    }

    .timeline-item::before {
        left: -20px !important;
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }

    .timeline-title {
        font-size: 1rem !important;
        margin-bottom: 5px !important;
    }

    /* 高亮框移动端优化 */
    .version-highlight {
        padding: 12px !important;
        margin: 12px 0 !important;
        font-size: 0.9rem !important;
        border-left-width: 3px !important;
    }

    /* 间隔优化 */
    .spacer {
        height: 10px !important;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .layout {
        padding: 5px !important;
    }

    .sidebar {
        padding: 10px !important;
    }

    .sidebar a {
        min-width: 100px !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    .section {
        padding: 15px 10px !important;
    }

    .banner h1 {
        font-size: 1.8rem !important;
    }

    .timeline {
        padding-left: 15px !important;
    }

    .timeline-item::before {
        left: -15px !important;
        width: 10px !important;
        height: 10px !important;
    }

    /* 确保内容不会超出屏幕 */
    .section h2 {
        font-size: 1.5rem !important;
        word-wrap: break-word !important;
    }

    .section p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* 针对横屏手机的特殊处理 */
@media (max-width: 768px) and (orientation: landscape) {
    .banner {
        height: 200px !important;
    }
    
    .banner h1 {
        font-size: 1.8rem !important;
    }
    
    .banner p {
        font-size: 1rem !important;
    }
}

/* 确保导航栏在移动端正常工作 */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 1rem !important;
    }
    
    .navbar-brand {
        font-size: 1.2rem !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
}