@media (max-width: 900px) {
    .upload-card { padding: 40px 30px; }
    .upload-features { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .palette-showcase { grid-template-columns: 1fr; }
    .steps-wrap { flex-direction: column; gap: 30px; }
    .step-line { display: none; }
    .blob-1, .blob-2, .blob-3 { display: none; }
}
@media (max-width: 600px) {
    .upload-card h1 { font-size: 24px; }
    .upload-btn-main { padding: 14px 44px; font-size: 14px; }
    .upload-card .subtitle { font-size: 12px; }
    .features-grid { grid-template-columns: 1fr; }
    .section-heading h2 { font-size: 20px; }
}
@media (max-width: 767px) {
    html, body {
        height: 100%;
        /* overflow: hidden;  已移除：modern-editor.css 使用可滚动长页面布局 */
    }
    
    /* ===== 以下旧抽屉式布局已被 modern-editor.css 的长页面布局取代 =====
       保留注释供参考，实际布局以 modern-editor.css 为准
    .editor-page {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }
    .canvas-area {
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    .panel-left, .panel-right {
        position: fixed;
        bottom: 52px;
        left: 0;
        width: 100%;
        height: 60vh;
        border: none;
        border-top: 1px solid var(--border-color);
        z-index: 50;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }
    .panel-left.active, .panel-right.active {
        transform: translateY(0);
    }
    */
    
    /* 隐藏桌面端折叠/拖拽手柄 */
    .panel-float-toggle,
    .panel-resize-handle {
        display: none;
    }
    
    /* ===== 底部Tab导航栏（modern-editor.css有更详细的浮动胶囊样式，这里保留基础样式） ===== */
    .mobile-tab-bar {
        display: flex;
    }
    
    .mobile-tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 10px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-tab-btn span {
        font-size: 20px;
        line-height: 1;
    }
    
    .mobile-tab-btn.active {
        color: var(--accent);
    }
    
    /* 面板内边距适配 */
    .panel-content {
        padding-bottom: 20px;
    }
    
    /* 色板网格放大，减少列数方便触控（modern-editor.css覆盖为6列） */
    .palette-grid {
        grid-template-columns: repeat(8, 1fr);
        max-height: 300px;
    }
    
    .color-swatch {
        min-height: 32px;
    }
    
    /* 按钮/输入框放大 */
    .btn {
        padding: 10px 6px;
        font-size: 12px;
        min-height: 36px;
    }
    
    .input-row input[type="number"] {
        padding: 10px;
        font-size: 14px;
        min-height: 36px;
    }
    
    /* ===== 底部用料统计（旧绝对定位已被 modern-editor.css 的相对定位取代） =====
    .bottom-area {
        position: absolute;
        bottom: 52px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        max-height: 120px;
        padding: 10px 16px;
        z-index: 40;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }
    .bottom-area.expanded {
        transform: translateY(0);
    }
    */
    .bottom-area.collapsed {
        max-height: 44px !important;
    }
    
    .stat-item {
        padding: 8px 2px;
    }
    
    .stat-value {
        font-size: 16px;
    }
    
    /* 画布标尺缩小适配 */
    .ruler-top { height: 20px; }
    .ruler-left { width: 22px; }
    
    /* 右上角按钮缩小（modern-editor.css有更详细样式） */
    .view-toggle-btn {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* 手绘模式手机端适配 */
    body.hand-draw-mode .panel-left,
    body.hand-draw-mode .panel-right {
        width: 100%;
    }

    /* ===== 手机端bug修复 ===== */
    /* 确保编辑器页面可滚动，内容不被底部tab栏遮挡 */
    body.douTu-editor-active .editor-page {
        padding-bottom: 90px !important;
    }
    /* 色板弹窗在移动端可滚动 */
    .floating-palette-popup {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    /* 画布区域在移动端不溢出 */
    .canvas-wrapper {
        overflow: hidden !important;
    }
    /* 确保底部tab栏在最上层 */
    .mobile-tab-bar {
        z-index: 500 !important;
    }
}