.color-picker[data-v-60b18efc]{display:grid;gap:var(--spacing-lg);max-width:800px}.color-picker__main[data-v-60b18efc]{display:grid;gap:var(--spacing-md-lg)}.color-picker__preview[data-v-60b18efc]{height:200px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-border);transition:border-color var(--transition-fast)}.color-picker__preview-content[data-v-60b18efc]{text-align:center}.color-picker__color-name[data-v-60b18efc]{font-size:var(--font-size-display);font-weight:var(--font-weight-bold);font-family:Courier New,monospace;margin-bottom:var(--spacing-md)}.color-picker__actions[data-v-60b18efc]{display:flex;justify-content:center}.color-picker__picker-wrapper[data-v-60b18efc]{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.color-picker__picker[data-v-60b18efc]{width:120px;height:120px;border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;padding:0;transition:border-color var(--transition-fast)}.color-picker__picker[data-v-60b18efc]:hover{border-color:var(--color-primary)}.color-picker__picker[data-v-60b18efc]::-webkit-color-swatch-wrapper{padding:0}.color-picker__picker[data-v-60b18efc]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-lg) - 2px)}.color-picker__picker-label[data-v-60b18efc]{color:var(--color-text-secondary);font-size:var(--font-size-body)}.color-picker__alpha[data-v-60b18efc]{background:var(--color-bg);padding:var(--spacing-md);border-radius:var(--radius-lg);border:1px solid var(--color-border-light)}.color-picker__alpha-label[data-v-60b18efc]{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);font-size:var(--font-size-body);color:var(--color-text-secondary)}.color-picker__alpha-value[data-v-60b18efc]{font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.color-picker__alpha-slider[data-v-60b18efc]{margin:0}.color-picker__formats[data-v-60b18efc]{background:var(--color-bg-component);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--color-border-light)}.color-picker__section-title[data-v-60b18efc]{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md);color:var(--color-text-title)}.color-picker__format-grid[data-v-60b18efc]{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--spacing-md)}.color-picker__format-card[data-v-60b18efc]{background:var(--color-bg);border:2px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-fast)}.color-picker__format-card[data-v-60b18efc]:hover{border-color:var(--color-primary);background:var(--color-primary-bg)}.color-picker__format-card[data-v-60b18efc]:active{background:var(--color-primary-light)}.color-picker__format-label[data-v-60b18efc]{font-size:var(--font-size-caption);color:var(--color-text-tertiary);margin-bottom:var(--spacing-xs);text-transform:uppercase;font-weight:var(--font-weight-semibold);letter-spacing:.5px}.color-picker__format-value[data-v-60b18efc]{font-size:var(--font-size-body);font-family:Courier New,monospace;color:var(--color-text-primary);font-weight:var(--font-weight-medium);word-break:break-all}.color-picker__format-hint[data-v-60b18efc]{font-size:var(--font-size-caption-sm);color:var(--color-primary);margin-top:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast)}.color-picker__format-card:hover .color-picker__format-hint[data-v-60b18efc]{opacity:1}.color-picker__presets[data-v-60b18efc]{background:var(--color-bg-component);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--color-border-light)}.color-picker__preset-grid[data-v-60b18efc]{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:var(--spacing-sm)}.color-picker__preset-color[data-v-60b18efc]{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent}.color-picker__preset-color[data-v-60b18efc]:hover{border-color:var(--color-text-secondary)}.color-picker__preset-color--active[data-v-60b18efc]{border-color:var(--color-text-title)}.color-picker__history[data-v-60b18efc]{background:var(--color-bg-component);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--color-border-light)}.color-picker__history-grid[data-v-60b18efc]{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--spacing-sm)}.color-picker__history-color[data-v-60b18efc]{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent}.color-picker__history-color[data-v-60b18efc]:hover{border-color:var(--color-text-secondary)}@media (max-width: 768px){.color-picker__preview[data-v-60b18efc]{height:160px}.color-picker__color-name[data-v-60b18efc]{font-size:var(--font-size-h1)}.color-picker__picker[data-v-60b18efc]{width:100px;height:100px}.color-picker__format-grid[data-v-60b18efc]{grid-template-columns:1fr}}