.color-picker-tool[data-v-4dd776b5]{width:100%;margin:0 auto}.tool-layout[data-v-4dd776b5]{display:grid;grid-template-columns:300px 1fr;gap:24px;margin-bottom:24px}.left-panel[data-v-4dd776b5],.right-panel[data-v-4dd776b5]{background:#fff;border-radius:6px;padding:24px;box-shadow:0 2px 8px #0000000f}.upload-area[data-v-4dd776b5]{border:2px dashed #dcdfe6;border-radius:6px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .3s}.upload-area[data-v-4dd776b5]:hover{border-color:#23a894;background:#f0fdfa}.hidden[data-v-4dd776b5]{display:none}.text-4xl[data-v-4dd776b5]{font-size:2.25rem;color:#23a894}.mb-3[data-v-4dd776b5]{margin-bottom:.75rem}.text-base[data-v-4dd776b5]{font-size:1rem;color:#374151}.font-medium[data-v-4dd776b5]{font-weight:500}.text-xs[data-v-4dd776b5]{font-size:.75rem;color:#9ca3af}.control-panel[data-v-4dd776b5]{display:flex;flex-direction:column;gap:16px}.panel-header[data-v-4dd776b5]{display:flex;justify-content:space-between;align-items:center}.panel-title[data-v-4dd776b5]{font-size:18px;font-weight:600;color:#374151}.btn[data-v-4dd776b5]{padding:8px 16px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;color:#606266;cursor:pointer;font-size:14px;transition:all .3s;display:inline-flex;align-items:center;gap:6px}.btn[data-v-4dd776b5]:hover{color:#23a894;border-color:#23a894}.btn-sm[data-v-4dd776b5]{padding:6px 12px;font-size:12px}.mr-1[data-v-4dd776b5]{margin-right:4px}.current-color-section[data-v-4dd776b5]{display:flex;flex-direction:column;gap:12px}.color-preview-small[data-v-4dd776b5]{width:100%;height:80px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}.preview-text-small[data-v-4dd776b5]{font-size:16px;font-weight:600;color:#1f2937}.preview-text-small.text-light[data-v-4dd776b5]{color:#fff}.color-values-list[data-v-4dd776b5]{display:flex;flex-direction:column;gap:8px}.value-item-small[data-v-4dd776b5]{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f9fafb;border-radius:6px;cursor:pointer;transition:all .2s}.value-item-small[data-v-4dd776b5]:hover{background:#f3f4f6}.value-label[data-v-4dd776b5]{font-size:12px;font-weight:600;color:#6b7280;min-width:40px}.value-text[data-v-4dd776b5]{font-size:13px;color:#1f2937;font-family:monospace;flex:1}.copy-icon[data-v-4dd776b5]{color:#9ca3af;font-size:12px}.tip-box[data-v-4dd776b5]{padding:12px;background:#f0fdfa;border-radius:3px;color:#23a894;font-size:14px;display:flex;align-items:center}.empty-preview[data-v-4dd776b5]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:#9ca3af}.text-6xl[data-v-4dd776b5]{font-size:3.75rem;color:#d1d5db}.canvas-container[data-v-4dd776b5]{position:relative}.color-canvas[data-v-4dd776b5]{width:100%;border-radius:6px;cursor:crosshair;display:block}.palette-section[data-v-4dd776b5]{background:#fff;border-radius:6px;padding:24px;box-shadow:0 2px 8px #0000000f}.section-title[data-v-4dd776b5]{font-size:18px;font-weight:600;color:#374151;margin-bottom:20px;display:flex;align-items:center}.section-title i[data-v-4dd776b5]{color:#23a894}.palette-grid[data-v-4dd776b5]{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.palette-item[data-v-4dd776b5]{aspect-ratio:1;border-radius:6px;cursor:pointer;position:relative;transition:transform .2s;border:1px solid #e5e7eb}.palette-item[data-v-4dd776b5]:hover{transform:scale(1.05)}.palette-tooltip[data-v-4dd776b5]{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;opacity:0;transition:opacity .2s;white-space:nowrap}.palette-item:hover .palette-tooltip[data-v-4dd776b5]{opacity:1}@media (max-width: 768px){.tool-layout[data-v-4dd776b5]{grid-template-columns:1fr}}.help-section[data-v-4dd776b5]{background:#fff;border-radius:6px;padding:24px;margin-top:24px;box-shadow:0 2px 8px #0000000f}.help-content[data-v-4dd776b5]{display:grid;gap:12px}.help-item[data-v-4dd776b5]{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#f9fafb;border-radius:6px}.help-item i[data-v-4dd776b5]{color:#10b981;margin-top:2px}.help-item div[data-v-4dd776b5]{font-size:14px;color:#6b7280}.mr-2[data-v-4dd776b5]{margin-right:8px}