.gth-color-picker .gth-picker-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gth-space-4); margin-bottom: var(--gth-space-4); }
.gth-color-picker .gth-color-area { position: relative; }
.gth-color-picker .gth-color-input-native { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gth-color-picker .gth-color-preview { width: 100%; height: 150px; border-radius: var(--gth-radius-lg); background: #3B82F6; border: 2px solid var(--gth-border); }
.gth-color-picker .gth-color-values { display: flex; flex-direction: column; gap: var(--gth-space-3); }
.gth-color-picker .gth-color-value-row { display: flex; flex-direction: column; gap: var(--gth-space-1); }
.gth-color-picker .gth-value-input { display: flex; gap: var(--gth-space-2); }
.gth-color-picker .gth-value-input .gth-input { flex: 1; font-family: var(--gth-font-mono); font-size: var(--gth-text-sm); }
.gth-color-picker .gth-copy-btn { padding: var(--gth-space-2) var(--gth-space-3); background: var(--gth-bg-secondary); border: 1px solid var(--gth-border); border-radius: var(--gth-radius-sm); cursor: pointer; font-size: var(--gth-text-xs); }
.gth-color-picker .gth-copy-btn:hover { background: var(--gth-primary); color: white; border-color: var(--gth-primary); }
.gth-color-picker .gth-color-sliders { display: flex; flex-direction: column; gap: var(--gth-space-3); }
.gth-color-picker .gth-slider-group { display: flex; flex-direction: column; gap: var(--gth-space-1); }
.gth-color-picker .gth-slider-group .gth-label { font-size: var(--gth-text-sm); font-family: var(--gth-font-mono); }
.gth-color-picker .gth-slider { width: 100%; height: 8px; border-radius: 4px; -webkit-appearance: none; background: var(--gth-bg-secondary); }
.gth-color-picker .gth-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gth-primary); cursor: pointer; }
@media (max-width: 480px) { .gth-color-picker .gth-picker-container { grid-template-columns: 1fr; } }