.main-container[data-v-3ff9e70a]{max-width:1200px;margin:0 auto;padding:20px}.tool-header[data-v-3ff9e70a]{text-align:center;margin-bottom:30px}.tool-header h1[data-v-3ff9e70a]{color:#2c3e50;margin-bottom:10px}.tool-header p[data-v-3ff9e70a]{color:#7f8c8d;font-size:16px}.color-picker-section[data-v-3ff9e70a]{display:flex;align-items:center;gap:20px;margin-bottom:20px}.color-display[data-v-3ff9e70a]{width:100px;height:50px;border:1px solid #dcdfe6;border-radius:4px}.preset-colors[data-v-3ff9e70a]{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:20px}.preset-color[data-v-3ff9e70a]{width:30px;height:30px;border-radius:4px;cursor:pointer;border:1px solid #dcdfe6;transition:transform .2s}.preset-color[data-v-3ff9e70a]:hover{transform:scale(1.1)}.color-value[data-v-3ff9e70a]{font-family:monospace;margin-right:10px}.palette-section[data-v-3ff9e70a]{margin-bottom:20px}.palette-section h4[data-v-3ff9e70a]{margin:0 0 10px 0;color:#606266}.color-palette[data-v-3ff9e70a]{display:flex;gap:8px}.palette-color[data-v-3ff9e70a]{width:40px;height:40px;border-radius:4px;cursor:pointer;border:1px solid #dcdfe6;transition:transform .2s}.palette-color[data-v-3ff9e70a]:hover{transform:scale(1.1)}.mobile-view-toggle[data-v-3ff9e70a]{text-align:center;margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:8px;border:1px solid #e1e8ed}.mobile-hidden[data-v-3ff9e70a]{display:none!important}@media (max-width:768px){.main-container[data-v-3ff9e70a]{padding:10px}.tool-header h1[data-v-3ff9e70a]{font-size:24px;margin-bottom:10px}.tool-header p[data-v-3ff9e70a]{font-size:14px;margin-bottom:15px}.mobile-view-toggle[data-v-3ff9e70a]{margin-bottom:15px;padding:12px}.mobile-view-toggle .el-radio-button__inner[data-v-3ff9e70a]{font-size:12px;padding:6px 8px}.formats-card[data-v-3ff9e70a],.palette-card[data-v-3ff9e70a],.picker-card[data-v-3ff9e70a]{margin-bottom:15px}.color-picker-section[data-v-3ff9e70a]{flex-direction:column;align-items:center;gap:15px}.color-display[data-v-3ff9e70a]{width:120px;height:120px}.preset-colors[data-v-3ff9e70a]{grid-template-columns:repeat(6,1fr);gap:8px}.preset-color[data-v-3ff9e70a]{width:35px;height:35px}.format-item[data-v-3ff9e70a]{margin-bottom:12px}.format-item label[data-v-3ff9e70a]{font-size:14px;margin-bottom:5px}.palette-section[data-v-3ff9e70a]{margin-bottom:20px}.palette-section h4[data-v-3ff9e70a]{font-size:16px;margin-bottom:10px}.color-palette[data-v-3ff9e70a]{gap:6px}.palette-color[data-v-3ff9e70a]{width:35px;height:35px}}