/* ============================================
   style-mobile.css - 响应式/移动端样式
   ============================================ */

@media (max-width: 768px) {
    header {
        padding: 5px 10px;
    }
    
    .logo {
        font-size: 14px;
    }
    
    .tools {
        gap: 4px;
        margin-left: 10px;
    }
    
    .tools button {
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 12px;
    }
    
    .tools button i,
    .tools button span {
        font-size: 12px;
    }
    
    .export-main {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    main {
        flex-direction: column;
        height: auto;
    }
    
    .editor-container,
    .preview-container {
        height: 50vh;
        min-height: 300px;
    }
    
    .editor-container {
        border-right: none;
        border-bottom: 2px solid #ddd;
    }
    
    .section-header {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .word-count {
        font-size: 10px;
    }
    
    .editor-container #editor {
        padding: 15px;
        font-size: 13px;
    }
    
    .preview-container #preview {
        padding: 15px;
    }
    
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 15px;
    }
    
    .preview-container #preview h1 { font-size: 1.5em; }
    .preview-container #preview h2 { font-size: 1.25em; }
    .preview-container #preview h3 { font-size: 1.1em; }
}