.color-picker{gap:var(--space-6);margin-top:var(--space-8);flex-direction:column;display:flex}.color-picker .empty{gap:var(--space-3);flex-direction:column;display:flex}.color-picker .dropzone{align-items:center;gap:var(--space-2);padding:var(--space-12) var(--space-6);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-2);cursor:pointer;text-align:center;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);flex-direction:column;display:flex}.color-picker .dropzone:hover,.color-picker .dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.color-picker .dropzone svg{color:var(--accent)}.color-picker .dropzone strong{color:var(--text)}.color-picker .dropzone span{font-size:var(--text-sm)}.color-picker .note{font-size:var(--text-sm);color:var(--text-2);max-width:65ch}.color-picker .note.warn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--warning-soft);color:var(--warning)}.color-picker .error-box{padding:var(--space-3) var(--space-4);border:1px solid var(--danger);border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);font-size:var(--text-sm)}.color-picker .file-bar{align-items:center;gap:var(--space-3);font-size:var(--text-sm);display:flex}.color-picker .file-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:550;overflow:hidden}.color-picker .file-dims{font-size:var(--text-xs);color:var(--text-3);flex-shrink:0}.color-picker .btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);flex-shrink:0}.color-picker .stage{border:1px solid var(--border);border-radius:var(--radius-md);background:repeating-conic-gradient(#e9e9ec 0% 25%,#fff 0% 50%) 0 0/20px 20px;justify-content:center;display:flex;position:relative;overflow:hidden}.color-picker .stage-image{cursor:crosshair;user-select:none;-webkit-user-drag:none;touch-action:pan-y;width:auto;max-width:100%;height:auto;max-height:55vh;display:block}.color-picker .loupe{z-index:2;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);width:134px;box-shadow:var(--shadow-overlay);pointer-events:none;flex-direction:column;display:flex;position:absolute;overflow:hidden}.color-picker .loupe[hidden]{display:none}.color-picker .loupe canvas{width:132px;height:132px;image-rendering:pixelated;display:block}.color-picker .loupe-hex{border-top:1px solid var(--border);text-align:center;height:24px;line-height:24px;font-size:var(--text-xs);color:var(--text-2)}.color-picker .block{gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);flex-direction:column;display:flex}.color-picker .block h2{font-size:var(--text-base);font-weight:600}.color-picker .block-head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.color-picker .picked-body{gap:var(--space-4);flex-wrap:wrap;display:flex}.color-picker .picked-swatch{border-radius:var(--radius-md);background:repeating-conic-gradient(#e9e9ec 0% 25%,#fff 0% 50%) 0 0/14px 14px;flex-shrink:0;place-items:center;width:116px;height:116px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000024}.color-picker .picked-fill{position:absolute;inset:0}.color-picker .picked-hex{font-size:var(--text-sm);font-weight:600;position:relative}.color-picker .rows{flex:1;min-width:240px}.color-picker .row{align-items:center;gap:var(--space-3);padding:var(--space-2) 0;grid-template-columns:52px minmax(0,1fr) auto;display:grid}.color-picker .row+.row{border-top:1px solid var(--border)}.color-picker .row-label{font-size:var(--text-xs);letter-spacing:var(--tracking-caps);color:var(--text-3);font-weight:600}.color-picker .row-value{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);overflow:hidden}.color-picker .copy{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--text-3);font-size:var(--text-xs);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);background:0 0;border:none}.color-picker .copy:hover{background:var(--surface-2);color:var(--text)}.color-picker .cmyk-note{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-3);max-width:60ch}.color-picker .counts{border:1px solid var(--border-strong);border-radius:var(--radius-sm);display:inline-flex;overflow:hidden}.color-picker .count{padding:var(--space-1) var(--space-3);color:var(--text-2);font-size:var(--text-xs);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);background:0 0;border:none}.color-picker .count+.count{border-left:1px solid var(--border)}.color-picker .count:hover{background:var(--surface-2);color:var(--text)}.color-picker .count[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}.color-picker .swatches{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(84px,1fr));margin:0;padding:0;list-style:none;display:grid}.color-picker .swatch{border-radius:var(--radius-sm);cursor:pointer;width:100%;height:56px;transition:box-shadow var(--dur-fast) var(--ease-out);border:none;display:block;box-shadow:inset 0 0 0 1px #00000024}.color-picker .swatch:hover{box-shadow:inset 0 0 0 1px #00000024, 0 0 0 2px var(--accent)}.color-picker .swatch-hex{margin-top:var(--space-1);text-align:center;font-size:var(--text-xs);color:var(--text-2);display:block}.color-picker .palette-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.color-picker .chips{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.color-picker .chip{border-radius:var(--radius-full);cursor:pointer;width:34px;height:34px;transition:box-shadow var(--dur-fast) var(--ease-out);border:none;display:block;box-shadow:inset 0 0 0 1px #00000024}.color-picker .chip:hover{box-shadow:inset 0 0 0 1px #00000024, 0 0 0 2px var(--accent)}@media (width<=520px){.color-picker .picked-swatch{width:100%;height:92px}.color-picker .rows{min-width:0}.color-picker .row{gap:var(--space-2);grid-template-columns:46px minmax(0,1fr) auto}}