.color-tool-container[data-v-176bfac1]{min-height:100vh;display:flex;flex-direction:column;background:#f9fafb}.tool-header[data-v-176bfac1]{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}.header-left[data-v-176bfac1]{display:flex;align-items:center;gap:16px}.back-btn[data-v-176bfac1]{display:flex;align-items:center;gap:4px;color:#6b7280;text-decoration:none;font-size:14px;padding:6px 12px;border-radius:6px;transition:all .2s}.back-btn[data-v-176bfac1]:hover{background:#f3f4f6;color:#374151}.tool-title[data-v-176bfac1]{font-size:18px;font-weight:600;color:#111827;margin:0}.header-right[data-v-176bfac1]{display:flex;align-items:center;gap:8px}.tool-main[data-v-176bfac1]{flex:1;padding:24px;max-width:800px;margin:0 auto;width:100%}.color-preview-section[data-v-176bfac1]{display:flex;align-items:center;gap:24px;margin-bottom:32px}.color-preview[data-v-176bfac1]{width:200px;height:120px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:background-color .2s}.color-text[data-v-176bfac1]{font-family:SF Mono,Consolas,monospace;font-size:16px;font-weight:600}.color-picker-wrapper[data-v-176bfac1]{display:flex;flex-direction:column;align-items:center;gap:8px}.native-color-picker[data-v-176bfac1]{width:60px;height:60px;border:none;border-radius:8px;cursor:pointer;padding:0}.native-color-picker[data-v-176bfac1]::-webkit-color-swatch-wrapper{padding:0}.native-color-picker[data-v-176bfac1]::-webkit-color-swatch{border:2px solid #e5e7eb;border-radius:8px}.picker-label[data-v-176bfac1]{font-size:12px;color:#6b7280}.color-inputs[data-v-176bfac1]{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a}.color-input-group[data-v-176bfac1]{margin-bottom:20px}.color-input-group[data-v-176bfac1]:last-child{margin-bottom:0}.input-label[data-v-176bfac1]{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.input-row[data-v-176bfac1]{display:flex;align-items:center;gap:12px}.rgb-inputs[data-v-176bfac1],.hsl-inputs[data-v-176bfac1]{flex-wrap:wrap}.rgb-input[data-v-176bfac1],.hsl-input[data-v-176bfac1]{display:flex;align-items:center;gap:8px}.rgb-label[data-v-176bfac1],.hsl-label[data-v-176bfac1]{font-size:13px;font-weight:500;color:#6b7280;width:16px}.alpha-value[data-v-176bfac1]{font-size:14px;color:#374151;min-width:40px}.palette-section[data-v-176bfac1],.scheme-section[data-v-176bfac1],.history-section[data-v-176bfac1]{background:#fff;border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a}.section-title[data-v-176bfac1]{font-size:14px;font-weight:600;color:#374151;margin:0 0 16px;display:flex;align-items:center;justify-content:space-between}.color-palette[data-v-176bfac1]{display:flex;flex-wrap:wrap;gap:8px}.palette-color[data-v-176bfac1]{width:36px;height:36px;border-radius:6px;cursor:pointer;transition:transform .15s;box-shadow:0 1px 3px #0000001a}.palette-color[data-v-176bfac1]:hover{transform:scale(1.1)}.palette-dot[data-v-176bfac1]{display:block;width:100%;height:100%}.scheme-tabs[data-v-176bfac1]{margin-bottom:16px}.scheme-colors[data-v-176bfac1]{display:flex;gap:12px;flex-wrap:wrap}.scheme-color[data-v-176bfac1]{flex:1;min-width:100px;height:80px;border-radius:8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;cursor:pointer;transition:transform .15s;box-shadow:0 2px 6px #0000001a}.scheme-color[data-v-176bfac1]:hover{transform:scale(1.02)}.scheme-label[data-v-176bfac1]{font-family:SF Mono,Consolas,monospace;font-size:11px;background:#ffffffe6;padding:2px 6px;border-radius:4px}.history-colors[data-v-176bfac1]{display:flex;flex-wrap:wrap;gap:8px}.history-color[data-v-176bfac1]{width:32px;height:32px;border-radius:4px;cursor:pointer;transition:transform .15s;box-shadow:0 1px 2px #0000001a}.history-color[data-v-176bfac1]:hover{transform:scale(1.1)}.history-dot[data-v-176bfac1]{display:block;width:100%;height:100%}@media (max-width: 640px){.tool-main[data-v-176bfac1]{padding:16px}.color-preview-section[data-v-176bfac1]{flex-direction:column}.color-preview[data-v-176bfac1]{width:100%}.input-row[data-v-176bfac1]{flex-wrap:wrap}.scheme-color[data-v-176bfac1]{min-width:80px}}