/* Color Picker — Theme: Dynamic Rainbow */
:root { --accent: #EC4899; --accent-dim: rgba(236,72,153,0.15); --accent-glow: rgba(236,72,153,0.3); }
.accent-text { background: linear-gradient(90deg, #f43f5e, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #22c55e, #eab308); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.picker-layout { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.picker-visual { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.big-picker { width: 200px; height: 200px; border: none; cursor: pointer; border-radius: var(--radius-lg); background: none; padding: 0; }
.big-picker::-webkit-color-swatch-wrapper { padding: 0; }
.big-picker::-webkit-color-swatch { border-radius: var(--radius-lg); border: 2px solid var(--border-medium); }
.color-preview { width: 200px; height: 60px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.picker-values { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: var(--space-3); }
.value-row { display: flex; align-items: center; gap: var(--space-2); }
.value-row label { width: 40px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.value-row .input-field { flex: 1; font-family: var(--font-mono); }
.value-row .copy-btn { background: none; border: none; cursor: pointer; font-size: var(--text-sm); opacity: 0.5; transition: opacity var(--duration-fast); }
.value-row .copy-btn:hover { opacity: 1; }

.palette-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.palette-modes { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.palette-mode { padding: var(--space-2) var(--space-3); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; transition: all var(--duration-fast); }
.palette-mode:hover { border-color: var(--accent); color: var(--accent); }
.palette-mode.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.palette-display { display: flex; gap: var(--space-2); min-height: 80px; border-radius: var(--radius-md); overflow: hidden; }
.palette-swatch { flex: 1; min-height: 80px; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-2); cursor: pointer; transition: flex var(--duration-fast); position: relative; }
.palette-swatch:hover { flex: 1.5; }
.palette-swatch span { font-family: var(--font-mono); font-size: var(--text-xs); background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 3px; color: #fff; }

.contrast-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.contrast-layout { display: flex; flex-direction: column; gap: var(--space-4); }
.contrast-inputs { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.color-pick { display: flex; align-items: center; gap: var(--space-2); }
.color-pick input[type="color"] { width: 36px; height: 36px; border: 2px solid var(--border-medium); border-radius: var(--radius-sm); cursor: pointer; background: none; padding: 0; }
.color-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-pick input[type="color"]::-webkit-color-swatch { border-radius: 3px; border: none; }
.color-pick span { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.contrast-preview { padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.contrast-sample-lg { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.contrast-sample-sm { font-size: var(--text-sm); }
.contrast-results { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.contrast-badge { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.contrast-pass { background: rgba(34,197,94,0.15); color: #22C55E; border: 1px solid rgba(34,197,94,0.3); }
.contrast-fail { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); }

@media (max-width: 768px) { .picker-layout { flex-direction: column; align-items: stretch; } .big-picker, .color-preview { width: 100%; } }