/**
 * 色彩韵设计 - 移动端响应式增强样式
 * 适用于所有页面的移动端适配
 * 断点：768px (平板), 480px (手机)
 */

/* ========== 通用基础样式 ========== */
@media (max-width: 768px) {
    /* 容器调整 */
    .container {
        padding: 0 15px !important;
    }
    
    /* 字体大小调整 */
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    p { font-size: 0.95rem; }
}

@media (max-width: 480px) {
    body {
        font-size: 13px;
    }
    
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.1rem !important; }
}

/* ========== 导航栏适配 ========== */
@media (max-width: 768px) {
    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }
    
    .mobile-menu-btn:hover {
        opacity: 0.8;
    }
    
    /* 移动端导航菜单 */
    .mobile-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 20px;
        z-index: 999;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    .mobile-nav.active {
        display: block;
    }
    
    .mobile-nav a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 12px 15px;
        margin: 5px 0;
        border-radius: 8px;
        transition: background 0.3s;
    }
    
    .mobile-nav a:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* 隐藏桌面导航 */
    .nav-links, nav ul {
        display: none !important;
    }
    
    /* 显示汉堡菜单时的导航 */
    body.mobile-nav-open .mobile-nav {
        display: block;
    }
}

/* ========== 头部区域适配 ========== */
@media (max-width: 768px) {
    header {
        padding: 0.8rem 0 !important;
    }
    
    .logo {
        font-size: 1.4rem !important;
    }
    
    .logo-icon, .logo img {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
    }
    
    .hero {
        padding: 40px 0 !important;
    }
    
    .hero h1 {
        font-size: 1.8rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .hero p {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 30px 0 !important;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
    }
    
    .hero p {
        font-size: 0.9rem !important;
    }
}

/* ========== 按钮适配 ========== */
@media (max-width: 480px) {
    button, .btn, input[type="submit"], .action-btn {
        min-height: 44px !important; /* 触摸区域最小尺寸 */
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }
    
    /* 按钮组改为垂直排列 */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
    }
}

/* ========== 卡片网格适配 ========== */
@media (max-width: 768px) {
    .tools-grid, .design-grid, .products-grid, .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .tool-card, .design-card, .product-card {
        padding: 1rem !important;
    }
    
    .tool-icon, .category-icon {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {
    .tools-grid, .design-grid, .products-grid, .cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 表单适配 ========== */
@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* 防止 iOS 自动缩放 */
        padding: 12px !important;
        min-height: 44px !important;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* ========== 图片适配 ========== */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== 表格适配 ========== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table::-webkit-scrollbar {
        height: 8px;
    }
    
    table::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }
}

/* ========== 侧边栏/布局适配 ========== */
@media (max-width: 768px) {
    /* 双列布局改为单列 */
    .container {
        display: block !important;
    }
    
    .sidebar {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    .main-content {
        width: 100% !important;
    }
    
    /* 用户中心侧边栏改为顶部标签 */
    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        background: white;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    
    .sidebar-menu .menu-item {
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid #f0f0f0;
        padding: 8px 15px;
    }
    
    .sidebar-menu .menu-item:last-child {
        border-right: none;
    }
}

/* ========== 工具页面特殊适配 ========== */
@media (max-width: 480px) {
    /* 工具选项卡可横向滚动 */
    .category-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }
    
    .category-tab {
        min-width: max-content;
    }
    
    /* 规格选择网格调整 */
    .spec-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .spec-item {
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        padding: 10px;
    }
    
    /* 颜色选择调整 */
    .color-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* 上传区域调整 */
    .upload-area {
        padding: 20px 10px !important;
        min-height: 150px !important;
    }
    
    .upload-area p {
        font-size: 0.9rem;
    }
}

/* ========== 结果展示区适配 ========== */
@media (max-width: 768px) {
    .result-container {
        flex-direction: column;
    }
    
    .result-image, .original-image {
        width: 100% !important;
        max-width: none !important;
    }
    
    .compare-slider {
        width: 100% !important;
    }
}

/* ========== 底部适配 ========== */
@media (max-width: 768px) {
    footer {
        padding: 30px 0 !important;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-links a {
        display: block;
        padding: 5px 0;
    }
}

/* ========== Toast 提示适配 ========== */
@media (max-width: 480px) {
    .toast {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        min-width: auto !important;
    }
}

/* ========== Loading 适配 ========== */
@media (max-width: 480px) {
    #global-loading .loading-content {
        padding: 30px 20px !important;
        margin: 0 15px;
    }
    
    #global-loading .loading-text {
        font-size: 14px !important;
    }
}

/* ========== 模态框/弹窗适配 ========== */
@media (max-width: 480px) {
    .modal-content, .dialog-box {
        width: 90% !important;
        max-width: none !important;
        margin: 10px auto;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .modal-header, .dialog-header {
        padding: 15px !important;
    }
    
    .modal-body, .dialog-body {
        padding: 15px !important;
    }
    
    .modal-footer, .dialog-footer {
        padding: 15px !important;
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer button, .dialog-footer button {
        width: 100%;
    }
}

/* ========== 积分商城适配 ========== */
@media (max-width: 768px) {
    .points-display {
        grid-template-columns: 1fr !important;
    }
    
    .gift-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .gift-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 订单列表适配 ========== */
@media (max-width: 480px) {
    .order-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .order-status {
        width: 100%;
        text-align: center;
    }
    
    .order-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .order-actions button {
        width: 100%;
    }
}

/* ========== 文档/文章页面适配 ========== */
@media (max-width: 768px) {
    .article-content {
        padding: 15px !important;
    }
    
    .article-content img {
        max-width: 100%;
        height: auto;
    }
    
    .article-content pre, .article-content code {
        font-size: 12px;
        overflow-x: auto;
    }
}

/* ========== 触摸优化 ========== */
@media (max-width: 768px) {
    /* 增加可点击元素的最小触摸区域 */
    a, button, .clickable {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 移除 hover 效果，改用 active */
    .tool-card:hover, .product-card:hover {
        transform: none;
    }
    
    .tool-card:active, .product-card:active {
        transform: scale(0.98);
    }
}

/* ========== 性能优化 ========== */
@media (max-width: 768px) {
    /* 减少动画复杂度 */
    * {
        animation-duration: 0.2s !important;
    }
    
    /* 禁用视差滚动等复杂效果 */
    .parallax {
        transform: none !important;
    }
}