/* 硬件加速优化 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 导出时的特殊样式 */
.exporting .canvas-element {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* 不要强制 color: inherit，否则会覆盖内联样式的颜色 */
    /* 不要强制 transform，让手机端的缩放保持生效 */
}

.exporting .canvas-element.is-selected {
    /* 导出时移除选中框 */
    outline: none !important;
    box-shadow: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 22px;
    /* 恢复深色背景 */
    background: #0f172a;
    color: #ffffff;
    /* 硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    /* 禁止缩放 */
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

/* 画布容器硬件加速 */
#export-container {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
}

/* 元素拖拽硬件加速 */
.canvas-element {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 确保文字特效有足够空间显示 */
    padding: 0.05em 0;
    min-height: 1.1em;
    /* 确保文字元素在背景图片上面 */
    position: relative;
    z-index: 1;
}

.canvas-element.is-selected {
    will-change: transform;
}

/* 导出时隐藏选中状态的边框 */
.exporting .canvas-element.is-selected {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* 导出时隐藏所有可能的选中状态 */
.exporting * {
    outline: none !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
}

/* 确保导出时文字元素没有额外的装饰 */
.exporting .canvas-element {
    text-decoration: none !important;
    /* 不要移除 text-shadow，否则发光类特效会失效 */
}

/* 动画元素硬件加速 */
.fx-glitch,
.fx-fire,
.fx-ice,
.fx-gold,
.fx-rainbow,
.fx-chrome,
.fx-3d,
.fx-electric,
.fx-laser,
.fx-retro,
.fx-glow,
.fx-neon,
.fx-hologram,
.fx-matrix,
.fx-plasma,
.fx-void,
.fx-quantum,
.fx-digital,
.fx-cyber {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
}

/* 霓虹边框硬件加速 */
.neon-border {
    will-change: transform;
    /* 移除transform冲突，让Vue的transform生效 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 按钮和交互元素硬件加速 */
button,
.color-preset,
.select-trigger,
input[type="range"] {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 关键CSS - 立即加载 */
:root { --glow: #00e5ff; }

/* 加载指示器样式 */
#loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top: 3px solid #00e5ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* 隐藏应用直到加载完成 */
#app { 
    display: none; 
    font-weight: 600;
    font-size: 22px;
}

/* 标题字体加粗 */
h3, h4, h5, h6 {
    font-weight: 600 !important;
}

.text-lg {
    font-size: 24px !important;
}

.text-sm {
    font-size: 20px !important;
}

/* 控制面板文字金色（按钮除外） */
.glass-panel {
    color: #ffd700 !important;
}

.glass-panel h3,
.glass-panel h4,
.glass-panel h5,
.glass-panel h6,
.glass-panel label,
.glass-panel .text-gray-300,
.glass-panel .text-gray-400,
.glass-panel .text-cyan-500 {
    color: #ffd700 !important;
}

/* 强制上移霓虹配色和背景颜色标题 */
.glass-panel h4[style*="霓虹配色"],
.glass-panel h4[style*="背景颜色"] {
    margin-top: -4px !important;
    padding-top: 0 !important;
    transform: translateY(-4px) !important;
    position: relative !important;
    top: -4px !important;
}

/* 按钮文字保持原色 */
.glass-panel button,
.glass-panel .btn-preset,
.glass-panel .fx-button,
.glass-panel .export-button {
    color: inherit !important;
}

.glass-panel .btn-preset {
    color: #00e5ff !important;
}

.glass-panel .fx-button {
    color: #00e5ff !important;
}

.glass-panel .export-button {
    color: white !important;
}

/* 玻璃面板样式 */
.glass-panel {
    background: linear-gradient(180deg, rgba(106, 17, 203, 0.3) 0%, rgba(37, 117, 252, 0.3) 25%, rgba(58, 134, 255, 0.3) 50%, rgba(103, 58, 183, 0.3) 75%, rgba(156, 39, 176, 0.3) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
}

.btn-preset {
    background: transparent;
    color: #00e5ff;
    border: 3px solid #22c55e;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    min-height: 44px;
    transition: all 0.2s;
}

.btn-preset.active {
    color: #9333ea !important;
    background: #ffd700 !important;
    border: 3px solid #22c55e !important;
}

.btn-preset:hover {
    background: #334155;
    border-color: #4ade80;
    color: #00e5ff;
}

/* 霓虹边框样式 */
.neon-border {
    /* 使用box-shadow而不是border，避免影响布局 */
    box-shadow: 
        0 0 0 8px transparent,
        0 0 20px rgba(255, 0, 128, 0.5),
        0 0 40px rgba(0, 255, 128, 0.3),
        0 0 60px rgba(0, 255, 255, 0.2);
    position: relative !important;
}

.neon-border::before {
    content: '' !important;
    position: absolute !important;
    top: -8px !important;
    left: -8px !important;
    right: -8px !important;
    bottom: -8px !important;
    background: linear-gradient(45deg, #ff0080, #00ff80, #00ffff, #ff0080) !important;
    border-radius: inherit !important;
    z-index: -1 !important;
    /* 移除动画，避免与画布缩放冲突 */
    animation: none !important;
}

.neon-border::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: inherit !important;
    border-radius: inherit !important;
    z-index: -1 !important;
}

/* 滚动容器硬件加速 */
main,
.glass-panel {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar { 
    width: 8px; 
}

.custom-scrollbar::-webkit-scrollbar-track { 
    background: transparent; 
}

.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 4px; 
}

/* 画布设置复选框显示在一排（电脑端） */
.canvas-checkboxes {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.canvas-checkboxes > label {
    flex: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* 电脑端隐藏字体选择区域的导出按钮 */
.original-export-btn {
    display: none !important;
}

/* 字体选择器样式 */
select {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffd700 !important;
    border: 2px solid #ffd700 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    direction: ltr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: -8px !important;
}

select optgroup { 
    text-align: center !important; 
    color: #ffd700; 
    font-weight: bold; 
    background: #1e293b !important; 
}

select option { 
    text-align: center !important; 
    color: #ffd700; 
    background: #1e293b !important; 
    text-align: center !important; 
}

select option:hover { 
    background: rgba(255, 215, 0, 0.3) !important; 
}

select option:checked { 
    background: rgba(255, 215, 0, 0.4) !important; 
}

/* 分组标题绿色 */
select optgroup::before { 
    color: #22c55e; 
    font-weight: bold; 
}

select:focus {
    outline: none !important;
    border-color: #facc15 !important;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2) !important;
}

/* 覆盖所有输入元素的focus样式 */
input:focus, 
textarea:focus, 
select:focus {
    outline: none !important;
    border-color: #facc15 !important;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2) !important;
}

/* 自定义下拉组件样式 */
.custom-select {
    position: relative;
    width: 100%;
}

.select-trigger {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffd700 !important;
    border: 2px solid #ffd700 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.select-trigger:hover {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: #facc15 !important;
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #ffd700 !important;
    border-radius: 8px !important;
    margin-top: 4px;
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    z-index: 9999 !important;
    display: none;
}

.select-options.show {
    display: block;
}

.option-group {
    color: #22c55e !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border-bottom: 1px solid #ffd700 !important;
    text-align: center !important;
}

.option-item {
    color: #ffd700 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    background: transparent !important;
}

.option-item:hover {
    background: rgba(255, 215, 0, 0.2) !important;
    color: #ffffff !important;
}

.option-item.selected {
    background: #ffd700 !important;
    color: #9333ea !important;
    font-weight: bold !important;
}

/* 确保下拉选项在最上层 */
.select-options {
    z-index: 9999 !important;
}

/* 字体大小进度条样式 */
.font-size-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 12px;
    border-radius: 6px;
}

.font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffd700;
}

.font-size-slider::-moz-range-thumb {
    background: #ffffff;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffd700;
}

/* 颜色预设样式 */
div.color-preset,
.grid div.color-preset,
.grid-cols-16 div.color-preset,
.neon-colors-section .color-preset,
.bg-colors-section .color-preset {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    transition: all 0.2s !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.color-preset:hover,
div.color-preset:hover,
.grid div.color-preset:hover,
.grid-cols-16 div.color-preset:hover,
.neon-colors-section .color-preset:hover,
.bg-colors-section .color-preset:hover {
    transform: scale(1.1) !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
}

.color-preset.active,
div.color-preset.active,
.grid div.color-preset.active,
.grid-cols-16 div.color-preset.active,
.neon-colors-section .color-preset.active,
.bg-colors-section .color-preset.active {
    border: 3px solid #ffffff !important;
    border-style: solid !important;
    border-width: 3px !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
    transform: scale(1.15) !important;
}

.color-preset:active {
    transform: scale(0.95);
}

/* 颜色输入框样式 */
input[type="color"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    height: 40px !important;
    padding: 2px !important;
}

input[type="text"][placeholder*="#"] {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffd700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 面板内容样式 */
.panel-content {
    padding: 16px;
    background: transparent;
}

/* 中心线样式 */
.guide-line {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    filter: blur(0.5px) brightness(1.5);
}

.guide-line.h-px {
    height: 3px !important;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ff0000, #ffff00, #00ff00, #ff8800, #ff8800, #ff00ff);
}

.guide-line.w-px {
    width: 3px !important;
    background: linear-gradient(180deg, #ff0000, #ff0000, #ff0000, #ffff00, #00ff00, #ff8800, #ff8800, #ff00ff);
}

/* 特效按钮样式 */
.fx-button {
    background: transparent;
    color: #00e5ff;
    border: 3px solid #22c55e;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    min-height: 44px;
    transition: all 0.2s;
}

.fx-button:hover {
    transform: scale(0.95);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.2);
    background: rgba(0, 229, 255, 0.1);
}

.fx-button.active {
    color: #9333ea !important;
    background: #ffd700 !important;
    border: 3px solid #22c55e !important;
}

/* 手机端优化 - 上下布局 */
@media (max-width: 768px) {
    /* 允许页面滚动 */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #0f172a !important;
    }
    
    #app {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
        margin: 0 !important;
        background: #0f172a !important;
    }
    

    
    /* 隐藏标题 */
    .panel-header {
        display: none !important;
    }
    
    /* 画布区域固定在顶部 */
    main {
        width: 100% !important;
        height: 45vh !important;
        min-height: 250px !important;
        max-height: 400px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        order: 1 !important;
        overflow: hidden !important;
        z-index: 50 !important;
        padding: 3px 0 !important;
        margin: 0 !important;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.3) 0%, rgba(37, 117, 252, 0.3) 25%, rgba(58, 134, 255, 0.3) 50%, rgba(103, 58, 183, 0.3) 75%, rgba(156, 39, 176, 0.3) 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 控制面板在画布下方，可滚动 */
    aside {
        width: 100% !important;
        height: 55vh !important;
        position: fixed !important;
        top: 45vh !important;
        left: 0 !important;
        bottom: 0 !important;
        order: 2 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .glass-panel {
        padding-top: 0 !important;
    }
    
    /* 确保标题在aside内部时也能正确显示 */
    aside .panel-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        z-index: 9999 !important;
    }
    
    .glass-panel {
        backdrop-filter: blur(8px) !important;
    }
    
    /* 画布容器居中并缩放 */
    main > div {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    #export-container {
        transform: scale(0.2) !important;
        transform-origin: center center !important;
        transition: transform 0s !important;
    }
    
    /* 竖屏画布使用更小的缩放比例 */
    #export-container[style*="width: 1080px"][style*="height: 1920px"],
    #export-container[style*="width: 1080px"][style*="height: 1350px"] {
        transform: scale(0.15) !important;
        transform-origin: center center !important;
        transition: transform 0s !important;
    }
    
    /* 横屏画布 */
    #export-container[style*="width: 1920px"][style*="height: 1080px"] {
        transform: scale(0.2) !important;
        transform-origin: center center !important;
        transition: transform 0s !important;
    }
    
    /* 正方形画布使用更大的缩放比例 */
    #export-container[style*="width: 1080px"][style*="height: 1080px"] {
        transform: scale(0.28) !important;
        transform-origin: center center !important;
        transition: transform 0s !important;
    }
    
    /* 横屏画布增大缩放比例，减少上下空白 */
    #export-container[style*="width: 1920px"][style*="height: 1080px"] {
        transform: scale(0.2) !important;
        transform-origin: center center !important;
    }
    
    /* 隐藏不需要的元素 */
    .layers-section {
        display: none !important;
    }
    
    /* 输入框优化 */
    input[type="text"][placeholder*="#"] {
        display: none !important;
    }
    
    /* 颜色预设显示为2排 */
    .neon-colors-section .grid,
    .bg-colors-section .grid {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 6px !important;
    }
    
    .color-preset {
        width: 100% !important;
        height: 40px !important;
        border-radius: 6px !important;
    }
    
    /* 功能按钮显示在一排（包含导出按钮） */
    .action-buttons-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .action-buttons-row > button {
        flex: 1 1 auto !important;
        min-width: 70px !important;
        font-size: 16px !important;
        padding: 8px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        height: 44px !important;
    }
    
    /* 手机端显示导出按钮 */
    .mobile-export-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 手机端隐藏原导出按钮和加粗按钮 */
    .original-export-btn,
    .font-bold-btn {
        display: none !important;
    }
    
    /* 字体选择框全屏显示 */
    .font-select-row {
        width: 100% !important;
    }
    
    .font-select-row .custom-select {
        width: 100% !important;
        flex: 1 !important;
    }
    
    .font-select-row .select-trigger {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        height: 44px !important;
    }
    
    /* 字体大小标签居中 */
    .font-size-section label,
    .font-size-label {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* 画布设置复选框显示在一排 */
    .canvas-checkboxes {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        margin-top: 12px !important;
    }
    
    .canvas-checkboxes > label {
        flex: 1 !important;
        margin: 0 !important;
        font-size: 15px !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    
    /* 复选框图标加大 */
    .canvas-checkboxes > label > input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    
    /* 所有按钮文字不换行 */
    button,
    .btn-preset,
    .fx-button {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 特效按钮布局 - 每行3个 */
    .text-effects-section .grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .fx-button {
        font-size: 14px !important;
        padding: 8px 4px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 画布尺寸按钮 */
    .btn-preset {
        font-size: 14px !important;
        padding: 8px 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0px !important;
        letter-spacing: -1px !important;
    }
    
    /* 手机端画布尺寸标题横向居中 */
    .space-y-4 > h4.text-gray-300 {
        text-align: center !important;
        transform: translateY(-10px) translateX(3px) !important;
    }
    
    /* 手机端文字内容和字体大小标题横向居中 */
    .text-content-title,
    .font-size-title {
        text-align: center !important;
        transform: translateY(-10px) translateX(3px) !important;
    }
    
    /* 手机端特效选择器标题横向居中 */
    .effect-title {
        text-align: center !important;
        transform: translateY(-10px) translateX(3px) !important;
    }
    
    /* 手机端颜色预设容器横向居中 */
    .color-presets-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: translateX(-3px) !important;
    }
    
    /* 手机端特效按钮容器横向居中 */
    .fx-button-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: translateX(-3px) !important;
    }
    
    /* 手机端导出按钮横向居中 */
    .export-button-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: translateX(-3px) !important;
    }
    
    /* 手机端导出按钮样式优化 */
    .export-button {
        width: 100% !important;
        max-width: 280px !important;
        height: 60px !important;
        font-size: 20px !important;
        font-weight: bold !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 15px !important;
        box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3) !important;
        background: linear-gradient(135deg, #00e5ff, #0099cc) !important;
        border: 3px solid #00e5ff !important;
        color: white !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
    }
    
    .export-button:hover {
        transform: scale(0.95) !important;
        box-shadow: 0 12px 35px rgba(0, 229, 255, 0.5) !important;
        background: linear-gradient(135deg, #00ffff, #00b3d9) !important;
    }
    
    .export-button:active {
        opacity: 0.8 !important;
    }
    
    /* 手机端特效按钮优化 - 每行3个 */
    .fx-button {
        min-height: 50px !important;
        height: auto !important;
        font-size: 15px !important;
        padding: 10px 6px !important;
        border-radius: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        position: relative !important;
        border: 2px solid currentColor !important;
        background: transparent !important;
        color: #00e5ff !important;
        transition: background 0.2s ease !important;
        box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2) !important;
    }
    
    .fx-button:hover {
        box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4) !important;
        background: rgba(0, 229, 255, 0.1) !important;
    }
    
    .fx-button.active {
        color: #9333ea !important;
        background: #ffd700 !important;
        border: 3px solid #22c55e !important;
    }
    
    .fx-button:active {
        opacity: 0.8 !important;
    }
    
    /* 手机端颜色预设按钮优化 */
    .color-preset {
        width: 40px !important;
        height: 40px !important;
        margin: 3px !important;
        border-radius: 8px !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .color-preset:hover {
        transform: scale(1.0) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .color-preset.active {
        transform: scale(1.1) !important;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 12px 35px rgba(0, 0, 0, 0.5) !important;
        border-color: #fff !important;
    }
    
    .color-preset:active {
        opacity: 0.8 !important;
    }
    
    /* 手机端滑块优化 */
    input[type="range"] {
        width: 100% !important;
        height: 40px !important;
        background: transparent !important;
        outline: none !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
        margin: 10px 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        touch-action: none !important;
    }
    
    input[type="range"]::-webkit-slider-track {
        width: 100% !important;
        height: 12px !important;
        border-radius: 6px !important;
    }
    
    input[type="range"]::-moz-range-track {
        width: 100% !important;
        height: 12px !important;
        border-radius: 6px !important;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 32px !important;
        height: 32px !important;
        background: #00e5ff !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        border: 3px solid #fff !important;
        box-shadow: 0 4px 15px rgba(0, 229, 255, 0.5) !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
        margin-top: -10px !important;
    }
    
    input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 8px 25px rgba(0, 229, 255, 0.8) !important;
    }
    
    input[type="range"]::-webkit-slider-thumb:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 4px rgba(0, 229, 255, 0.3) !important;
    }
    
    /* 手机端输入框优化 */
    input[type="text"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        height: 50px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        padding: 12px 16px !important;
        color: white !important;
        font-size: 18px !important;
        transform: scale(0.95) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        margin: 10px 0 !important;
    }
    
    input[type="text"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
        border-color: #00e5ff !important;
        box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4) !important;
        transform: scale(1.0) !important;
        outline: none !important;
    }
    
    /* 手机端标题优化 */
    h1, h2, h3, h4, h5, h6 {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 8px 0 !important;
        text-align: center !important;
        transform: scale(0.9) !important;
    }
    
    /* 手机端段落优化 */
    p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 6px 0 !important;
        text-align: center !important;
        transform: scale(0.9) !important;
    }
    
    /* 手机端标签优化 */
    label {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 6px 0 !important;
        text-align: center !important;
        transform: scale(0.9) !important;
    }
    
    /* 手机端间距优化 */
    .space-y-2 > * + * {
        margin-top: 8px !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 12px !important;
    }
    
    /* 手机端网格调整 */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    /* 手机端弹性布局调整 */
    .flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* 手机端容器内边距调整 */
    .p-4 {
        padding: 12px !important;
    }
    
    .p-6 {
        padding: 16px !important;
    }
    
    .p-8 {
        padding: 20px !important;
    }
    
    /* 手机端外边距调整 */
    .m-4 {
        margin: 12px !important;
    }
    
    .m-6 {
        margin: 16px !important;
    }
    
    .m-8 {
        margin: 20px !important;
    }
    
    /* 手机端性能优化 */
    .canvas-element {
        will-change: auto !important;
        transform: translate(-50%, -50%) translateZ(0) scale(0.85) !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* 手机端原子特效也需要缩小15% */
    .canvas-element.fx-atomic {
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
    
    /* 手机端正方形画布禁用所有动画 */
    body .canvas-element.fx-cyber,
    body .canvas-element.fx-rainbow,
    body .canvas-element.fx-hologram,
    body .canvas-element.fx-plasma,
    body .canvas-element.fx-vapor,
    body .canvas-element.fx-electric,
    body .canvas-element.fx-atomic,
    body .canvas-element.fx-synthwave,
    body .canvas-element.fx-neon-pulse {
        animation: none !important;
    }
    
    body .canvas-element.fx-glitch::before,
    body .canvas-element.fx-glitch::after {
        animation: none !important;
    }
    
    /* 正方形画布下禁用所有动画特效 - 使用更强的选择器 */
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-cyber,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-rainbow,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-hologram,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-plasma,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-vapor,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-electric,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-atomic,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-synthwave,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-neon-pulse,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-glitch::before,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-glitch::after,
    #export-container[style*="width: 1080px"][style*="height: 1080px"] .canvas-element.fx-electric::before {
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 0 !important;
        animation: none !important;
    }
    
    /* 手机端按钮通用优化 */
    button {
        min-height: 50px !important;
        height: auto !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        margin: 6px !important;
        transform: scale(0.9) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        white-space: normal !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    button:hover {
        transform: scale(0.95) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
    
    button:active {
        background: rgba(0, 255, 65, 0.3) !important;
        transform: scale(0.9) !important;
        box-shadow: 0 2px 4px rgba(0, 255, 65, 0.5) !important;
    }
    
    button.active {
        background: rgba(0, 255, 65, 0.7) !important;
        transform: scale(0.95) !important;
        box-shadow: 0 2px 4px rgba(0, 255, 65, 0.5) !important;
        color: #00ff41 !important;
        border-color: #00ff41 !important;
    }
}