/* 移动端模态框优化 - 统一预设和风格样式 */

@media (max-width: 768px) {
    /* 统一模态框网格布局 - 2列显示 */
    .style-grid,
    .preset-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 统一卡片基础样式 - 强制标准布局：图在上，标题在下 */
    .style-card,
    .preset-card,
    .modal-body .style-card,
    .modal-body .preset-card {
        aspect-ratio: 1 !important;
        display: flex !important;
        flex-direction: column !important; /* 正常布局：图片在上，文字在下 */
        align-items: stretch !important;
        justify-content: flex-start !important;
        border-radius: 12px !important;
        overflow: visible !important; /* 改为可见避免裁剪文字 */
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 2px solid transparent !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 强制标准化：所有卡片必须遵循 图片在上(70%) + 标题在下(30%) 的布局 */
    
    /* 重置所有可能影响布局的属性 */
    .style-card *,
    .preset-card * {
        box-sizing: border-box !important;
    }
    
    /* 确保第一个可见子元素（图片区域）占70%高度 */
    .style-card > :first-child:not(span),
    .preset-card > :first-child:not(.preset-card-name) {
        height: 70% !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }
    
    /* 确保最后一个文字元素占30%高度并在底部 */
    .style-card > span:last-child,
    .preset-card > .preset-card-name:last-child {
        height: 30% !important;
        flex-shrink: 0 !important;
        order: 2 !important;
        margin-top: auto !important;
    }
    
    /* 统一图片容器样式 - 覆盖所有可能的选择器 */
    .style-card img,
    .preset-card img,
    .style-img-container img,
    .preset-card-image img,
    .style-card .style-img-container img,
    .preset-card .preset-card-image img,
    .modal-body .style-card img,
    .modal-body .preset-card img,
    .modal-body .style-img-container img,
    .modal-body .preset-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* 确保图片容器占据正确比例 - 覆盖所有可能的选择器 */
    .style-img-container,
    .preset-card-image,
    .modal-body .style-img-container,
    .modal-body .preset-card-image,
    .style-card .style-img-container,
    .preset-card .preset-card-image {
        width: 100% !important;
        height: 70% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
        flex-shrink: 0 !important;
        background: #f8f9fa !important;
        order: 1 !important; /* 确保图片在上方 */
    }
    
    /* 统一文字标签样式 - 确保文字清晰可见 */
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name,
    .modal-body .style-card span,
    .modal-body .preset-card .preset-card-name,
    .modal-body .preset-card-name,
    .modal-body .preset-card-header .preset-card-name,
    .modal-body .preset-card .preset-card-header .preset-card-name,
    .style-card > span,
    .preset-card > .preset-card-name,
    .preset-card > .preset-card-header .preset-card-name {
        height: 30% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        padding: 10px 6px !important;
        margin: 0 !important;
        background: #ffffff !important;
        width: 100% !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        border-top: 1px solid #e5e7eb !important;
        min-height: 40px !important;
    }
    
    /* 悬停效果 */
    .style-card:hover,
    .preset-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border-color: #3b82f6 !important;
    }
    
    /* 选中状态 */
    .style-card.active,
    .preset-card.active {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        transform: translateY(-2px) !important;
    }
    
    /* 选中标记 */
    .style-card.active::after,
    .preset-card.active::after {
        content: '✓' !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        width: 20px !important;
        height: 20px !important;
        background: #22c55e !important;
        color: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: bold !important;
        z-index: 10 !important;
    }
    
    /* 选中状态文字颜色 - 覆盖所有可能的选择器 */
    .style-card.active span,
    .preset-card.active .preset-card-name,
    .preset-card.active .preset-card-header .preset-card-name,
    .modal-body .style-card.active span,
    .modal-body .preset-card.active .preset-card-name,
    .modal-body .preset-card.active .preset-card-header .preset-card-name,
    .style-card.active > span,
    .preset-card.active > .preset-card-name,
    .preset-card.active > .preset-card-header .preset-card-name {
        color: #1d4ed8 !important;
        font-weight: 700 !important;
        background: #eff6ff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 模态框标题优化 */
    .modal-header h3 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 模态框内容区域优化 */
    .modal-body {
        padding: 12px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    /* 修复可能的冲突样式 */
    .style-card .style-check,
    .preset-card .preset-check {
        display: none !important;
    }
    
    /* 预设头部区域强制显示 */
    .preset-card-header,
    .preset-card .preset-card-header,
    .modal .preset-card-header,
    .modal .preset-card .preset-card-header,
    #preset-modal .preset-card-header,
    #preset-modal .preset-card .preset-card-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 30% !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: #ffffff !important;
        border-top: 2px solid #e5e7eb !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 500 !important;
        min-height: 40px !important;
        overflow: visible !important;
    }
    
    /* 强制标准化卡片内部结构 - 确保图在上、标题在下的统一布局 */
    
    /* 强制卡片只包含两个主要部分：图片容器 + 文字标签 */
    .style-card > *:not(.style-img-container):not(span):not(img),
    .preset-card > *:not(.preset-card-image):not(.preset-card-name):not(img) {
        display: none !important;
    }
    
    /* 确保图片容器和文字标签按正确顺序排列 */
    .style-img-container,
    .preset-card-image {
        order: 1 !important;
    }
    
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-name {
        order: 2 !important;
    }
    
    /* 如果图片直接在卡片内（没有容器），也要正确排序 */
    .style-card > img,
    .preset-card > img {
        order: 1 !important;
        width: 100% !important;
        height: 70% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    /* 强制统一所有可能的边框和阴影 */
    .modal-body .style-card,
    .modal-body .preset-card {
        border: 2px solid transparent !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 强制统一悬停状态 */
    .modal-body .style-card:hover,
    .modal-body .preset-card:hover {
        border-color: #3b82f6 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px) !important;
    }
    
    /* 强制统一选中状态 */
    .modal-body .style-card.active,
    .modal-body .preset-card.active {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        transform: translateY(-2px) !important;
    }
    
    /* 确保模态框容器样式统一 */
    #style-modal .modal-body,
    #preset-modal .modal-body {
        padding: 12px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    /* 最终统一方案：强制所有卡片使用相同的视觉布局 */
    
    /* 方案A：如果存在图片容器，确保其占70%高度 */
    .style-card:has(.style-img-container) .style-img-container,
    .preset-card:has(.preset-card-image) .preset-card-image {
        height: 70% !important;
        order: 1 !important;
    }
    
    .style-card:has(.style-img-container) span,
    .preset-card:has(.preset-card-image) .preset-card-name {
        height: 30% !important;
        order: 2 !important;
        margin-top: auto !important;
    }
    
    /* 方案B：如果图片直接在卡片中，统一处理 */
    .style-card:has(> img) > img,
    .preset-card:has(> img) > img {
        height: 70% !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }
    
    .style-card:has(> img) > span,
    .preset-card:has(> img) > .preset-card-name {
        height: 30% !important;
        order: 2 !important;
        margin-top: auto !important;
    }
    
    /* 确保所有文字标签都在底部且样式一致 */
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name {
        margin-top: auto !important;
        flex-shrink: 0 !important;
        align-self: stretch !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .style-grid,
    .preset-grid,
    .modal-body .style-grid,
    .modal-body .preset-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name,
    .modal-body .style-card span,
    .modal-body .preset-card .preset-card-name,
    .modal-body .preset-card-header .preset-card-name,
    .modal-body .preset-card .preset-card-header .preset-card-name {
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 8px 4px !important;
        color: #1f2937 !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
    }
    
    .modal-body,
    #style-modal .modal-body,
    #preset-modal .modal-body {
        padding: 8px !important;
    }
    
    /* 超小屏幕选中标记调整 */
    .style-card.active::after,
    .preset-card.active::after {
        width: 18px !important;
        height: 18px !important;
        top: 6px !important;
        right: 6px !important;
        font-size: 10px !important;
    }
    
    /* 超小屏幕选中状态文字增强 */
    .style-card.active span,
    .preset-card.active .preset-card-name,
    .preset-card.active .preset-card-header .preset-card-name {
        color: #1d4ed8 !important;
        font-weight: 700 !important;
        background: #eff6ff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
}

/* 强制文字可见性修复 - 适用于所有屏幕尺寸 */
@media (max-width: 768px) {
    /* 确保文字不被图片覆盖 */
    .style-card,
    .preset-card {
        overflow: visible !important;
    }
    
    /* 强制文字区域始终可见 */
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(2px) !important;
        border-top: 2px solid #e5e7eb !important;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 悬停时文字更清晰 */
    .style-card:hover span,
    .preset-card:hover .preset-card-name,
    .preset-card:hover .preset-card-header .preset-card-name {
        background: rgba(255, 255, 255, 1) !important;
        color: #111827 !important;
    }
    
    /* 选中时文字突出显示 */
    .style-card.active span,
    .preset-card.active .preset-card-name,
    .preset-card.active .preset-card-header .preset-card-name {
        background: #dbeafe !important;
        color: #1e40af !important;
        border-top-color: #3b82f6 !important;
    }
    
    /* 确保图片不会覆盖文字 */
    .style-img-container,
    .preset-card-image {
        z-index: 1 !important;
    }
    
    .style-card span,
    .preset-card .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name {
        z-index: 20 !important;
    }
    
    /* 强制预设文字显示 - 纯CSS方案 */
    .preset-card .preset-card-name,
    .preset-card-header .preset-card-name,
    .preset-card .preset-card-header .preset-card-name,
    .modal .preset-card .preset-card-name,
    .modal .preset-card-header .preset-card-name,
    .modal .preset-card .preset-card-header .preset-card-name,
    #preset-modal .preset-card .preset-card-name,
    #preset-modal .preset-card-header .preset-card-name,
    #preset-modal .preset-card .preset-card-header .preset-card-name {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000000 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        background: #ffffff !important;
        border-top: 2px solid #e5e7eb !important;
        padding: 10px 6px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 999 !important;
        position: relative !important;
        height: 30% !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        overflow: visible !important;
    }
    
    /* 最高优先级 - 确保移动端显示 */
    body .modal-content .preset-card .preset-card-name,
    body .modal-content .preset-card-header .preset-card-name,
    body .modal-content .preset-card .preset-card-header .preset-card-name {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #111827 !important;
        background: #f9fafb !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        z-index: 9999 !important;
        border: 2px solid #d1d5db !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
}