/* 移动端样式 */
@media (max-width: 1024px) {
    .main-layout {
        flex-direction: column;
    }
    
    .controls-panel {
        flex: 0 0 auto;
        width: 100%;
        order: 2;
    }
    
    .canvas-area {
        width: 100%;
        order: 1;
    }
}

@media (max-width: 768px) {
    .main-layout {
        gap: 20px;
    }
    
    .controls-panel {
        gap: 15px;
    }
    
    .control-section {
        padding: 18px;
    }
    
    .control-section-title {
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .upload-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    .toggle-group {
        gap: 8px;
    }
    
    .toggle-btn {
        min-width: 80px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .action-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    .canvas-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .canvas-wrapper {
        width: 100%;
        min-width: 100%;
        padding: 20px;
    }
    
    .canvas-wrapper h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .canvas-placeholder {
        height: 200px;
    }
    
    .placeholder-icon {
        font-size: 30px;
        margin-bottom: 10px;
    }
    
    .placeholder-text {
        font-size: 14px;
    }
    
    .placeholder-subtext {
        font-size: 12px;
    }
    
    canvas {
        max-width: 100%;
    }
    
    #original-canvas {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* 隐藏移动端的拼豆图纸展示栏目 */
    .canvas-wrapper:nth-child(2) {
        display: none;
    }
    
    /* 隐藏移动端的统计信息 */
    .stats-panel {
        display: none;
    }
    
    /* 隐藏移动端的像素设置功能 */
    .control-section:nth-child(1) {
        display: none;
    }
    
    /* 隐藏移动端的显示选项功能 */
    .control-section:nth-child(2) {
        display: none;
    }
    
    .stats-panel {
        padding: 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stats-item {
        padding: 15px 10px;
    }
    
    .stats-value {
        font-size: 16px;
    }
    
    .color-list-wrapper {
        margin-top: 20px;
        padding: 15px;
    }
    
    .color-list {
        max-height: 150px;
        padding: 8px;
    }
    
    .color-item {
        padding: 6px 8px;
        gap: 8px;
    }
    
    .color-swatch {
        width: 20px;
        height: 20px;
    }
    
    .color-info {
        font-size: 13px;
    }
    
    .modal-content {
        padding: 15px;
        max-width: 98%;
        max-height: 98%;
    }
    
    .modal-close {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}