/* =====================================================
   墨睿思引擎 · 响应式适配
   ===================================================== */

/* 平板 */
@media (max-width: 1024px) {
    .mode-grid { grid-template-columns: repeat(2, 1fr); }
    .community-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手机 */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 8px;
    }
    .nav-center {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        border-top: 1px solid #1a1810;
        padding-top: 10px;
    }
    .nav-center a { font-size: 13px; }
    .nav-right { gap: 12px; }
    
    .hero { padding: 100px 16px 40px; }
    .hero h1 { font-size: 40px; }
    .hero p { font-size: 15px; }
    
    .mode-grid { grid-template-columns: 1fr; }
    .community-grid { grid-template-columns: 1fr; }
    
    .badges { flex-direction: column; align-items: center; }
    .badge { font-size: 11px; }
    
    .hero-btns { flex-direction: column; align-items: center; }
    
    .container { padding: 0 12px; }
    
    #chatBox { height: 350px; }
}

/* 小屏手机 */
@media (max-width: 400px) {
    .hero h1 { font-size: 30px; }
    .logo-link { font-size: 18px; }
    .nav-center a { font-size: 11px; }
    .btn-nav { padding: 4px 12px; font-size: 12px; }
}

/* ===== 手机端代码块适配 ===== */
@media (max-width: 600px) {
    .code-block pre {
        font-size: 12px;
        padding: 8px 10px;
    }
    .code-block .code-header {
        font-size: 11px;
        padding: 4px 10px;
    }
    .code-block .code-header .code-actions button {
        font-size: 11px;
        padding: 2px 4px;
    }
}