.color-tool[data-v-21f8330d]{z-index:1;max-width:900px;margin:0 auto;padding:32px 24px 80px;position:relative}.page-header[data-v-21f8330d]{margin-bottom:28px}.page-header h1[data-v-21f8330d]{color:var(--vt-text);margin:0 0 8px;font-size:28px;font-weight:700;transition:color .3s}.page-header p[data-v-21f8330d]{color:var(--vt-text-secondary);margin:0;font-size:14px;transition:color .3s}.card[data-v-21f8330d]{background:var(--vt-bg-card);border:1px solid var(--vt-border);border-radius:14px;margin-bottom:20px;padding:24px;transition:background .3s,border-color .3s}.card h3[data-v-21f8330d]{color:var(--vt-text);margin:0 0 16px;font-size:16px;font-weight:600}.color-preview-row[data-v-21f8330d]{gap:20px;display:flex}.color-swatch[data-v-21f8330d]{border-radius:14px;flex-shrink:0;width:100px;height:100px;box-shadow:0 4px 16px #0000001a}.color-inputs[data-v-21f8330d]{flex-direction:column;flex:1;gap:16px;display:flex}.input-group[data-v-21f8330d]{flex-direction:column;gap:8px;display:flex}.input-group label[data-v-21f8330d]{color:var(--vt-text-secondary);font-size:13px;font-weight:600}.rgb-inputs[data-v-21f8330d]{align-items:center;gap:4px;display:flex}.sep[data-v-21f8330d]{color:var(--vt-text-muted);margin:0 2px;font-size:18px}.hex-input-row[data-v-21f8330d]{align-items:center;gap:8px;display:flex}.value-display[data-v-21f8330d]{color:var(--vt-primary);background:var(--vt-primary-light);border-radius:6px;padding:4px 10px;font-size:13px}.picker-row[data-v-21f8330d]{align-items:center;gap:20px;display:flex}.picker-values[data-v-21f8330d]{align-items:center;gap:12px;display:flex}.picker-hex[data-v-21f8330d]{color:var(--vt-text);font-family:Fira Code,monospace;font-size:18px;font-weight:700}.palette-controls[data-v-21f8330d]{color:var(--vt-text-secondary);align-items:center;gap:12px;margin-bottom:16px;font-size:14px;display:flex}.palette-row[data-v-21f8330d]{border-radius:10px;gap:4px;height:80px;display:flex;overflow:hidden}.palette-item[data-v-21f8330d]{cursor:pointer;flex:1;justify-content:center;align-items:flex-end;padding:8px;transition:transform .2s;display:flex}.palette-item[data-v-21f8330d]:hover{z-index:1;transform:scale(1.05)}.palette-label[data-v-21f8330d]{color:#fff;text-shadow:0 1px 3px #00000080;font-family:Fira Code,monospace;font-size:10px}.gradient-preview[data-v-21f8330d]{border-radius:12px;height:120px;margin-bottom:16px}.gradient-controls[data-v-21f8330d]{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.grad-row[data-v-21f8330d]{color:var(--vt-text-secondary);align-items:center;gap:10px;font-size:14px;display:flex}.css-output[data-v-21f8330d]{background:var(--vt-bg-hover);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.css-output code[data-v-21f8330d]{color:var(--vt-text);word-break:break-all;font-family:Fira Code,monospace;font-size:13px}@media (width<=768px){.color-tool[data-v-21f8330d]{padding:24px 16px 60px}.color-preview-row[data-v-21f8330d]{flex-direction:column;align-items:center}.css-output[data-v-21f8330d]{flex-direction:column;align-items:flex-start}}