.gth-color-converter .gth-color-input-row { display: flex; gap: var(--gth-space-2); margin-bottom: var(--gth-space-4); }
.gth-color-converter .gth-color-picker { width: 50px; height: 42px; padding: 0; border: none; cursor: pointer; border-radius: var(--gth-radius-md); }
.gth-color-converter .gth-color-text { flex: 1; font-family: monospace; text-transform: uppercase; }
.gth-color-converter .gth-color-preview { height: 80px; border-radius: var(--gth-radius-lg); margin-bottom: var(--gth-space-4); box-shadow: var(--gth-shadow-md); transition: background-color 0.2s; }
.gth-color-converter .gth-color-formats { display: grid; gap: var(--gth-space-3); }
.gth-color-converter .gth-format-group { }
.gth-color-converter .gth-input-copy { display: flex; gap: var(--gth-space-2); }
.gth-color-converter .gth-input-copy .gth-input { flex: 1; font-family: monospace; }
.gth-color-converter .gth-copy-btn { padding: var(--gth-space-2) var(--gth-space-3); background: var(--gth-bg-secondary); border: 1px solid var(--gth-border-color); border-radius: var(--gth-radius-md); cursor: pointer; font-size: var(--gth-text-sm); transition: all 0.2s; }
.gth-color-converter .gth-copy-btn:hover { background: var(--gth-primary); color: white; }
.gth-color-converter .gth-color-variations { margin-top: var(--gth-space-4); }
.gth-color-converter .gth-color-variations h4 { font-size: var(--gth-text-sm); color: var(--gth-text-secondary); margin-bottom: var(--gth-space-2); }
.gth-color-converter .gth-variation-row { display: flex; border-radius: var(--gth-radius-md); overflow: hidden; }
.gth-color-converter .gth-variation-swatch { flex: 1; height: 40px; cursor: pointer; transition: transform 0.1s; }
.gth-color-converter .gth-variation-swatch:hover { transform: scaleY(1.2); z-index: 1; }