.dg-color-row { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dg-color-row input.dg-color-native { display: none !important; }
.dg-color-row .dg-color-hex { flex: 0 1 132px; width: 132px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; text-transform: lowercase; }

.dg-color-trigger { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 40px; padding: 3px; border: 1px solid color-mix(in srgb, var(--dg-highlight) 22%, transparent); border-radius: var(--dg-r-sm); background: rgba(255, 255, 255, .045); cursor: pointer; box-shadow: none; transition: border-color .15s ease, background-color .15s ease; }
.dg-color-trigger:hover { border-color: color-mix(in srgb, var(--dg-highlight) 50%, transparent); background: rgba(15, 20, 28, .85); }
.dg-color-row.is-open .dg-color-trigger, .dg-color-trigger:focus-visible { border-color: var(--dg-highlight); outline: none; }
.dg-color-trigger:disabled { cursor: not-allowed; opacity: .45; }
.dg-color-swatch { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; }

.dg-color-panel, .dg-color-panel * { box-sizing: border-box; }
.dg-color-panel { position: fixed; z-index: 25000; width: 320px; max-width: calc(100vw - 20px); padding: 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg); background: linear-gradient(135deg, rgba(11, 15, 20, .97), rgba(16, 22, 30, .96)); box-shadow: none; animation: dgColorPickerIn .15s ease-out; }
.dg-color-panel[hidden] { display: none; }
@keyframes dgColorPickerIn { from { opacity: 0; } to { opacity: 1; } }

.dg-color-sv { position: relative; width: 100%; height: 180px; overflow: hidden; border-radius: 10px; cursor: crosshair; outline: none; touch-action: none; user-select: none; }
.dg-color-sv:focus-visible { outline: 2px solid color-mix(in srgb, var(--dg-highlight) 60%, transparent); outline-offset: 2px; }
.dg-color-sv-canvas { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.dg-color-sv-thumb { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.dg-color-hue-wrap { position: relative; display: flex; align-items: center; width: 100%; height: 22px; margin-top: 12px; padding: 0; cursor: pointer; outline: none; touch-action: none; user-select: none; }
.dg-color-hue-wrap:focus-visible { border-radius: 999px; outline: 2px solid color-mix(in srgb, var(--dg-highlight) 60%, transparent); outline-offset: 2px; }
.dg-color-hue-track { width: 100%; height: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%); pointer-events: none; }
.dg-color-hue-thumb { position: absolute; top: 50%; width: 18px; height: 18px; border: 2px solid #0e1726; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); pointer-events: none; transition: transform .08s ease; }
.dg-color-hue-wrap:active .dg-color-hue-thumb { transform: translate(-50%, -50%) scale(1.15); }

.dg-color-hex-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin-top: 12px; padding: 6px 8px; border: 1px solid var(--dg-line); border-radius: var(--dg-r-sm); background: rgba(11, 15, 20, .7); }
.dg-color-preview { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; }
.dg-color-hex-label { flex-shrink: 0; color: var(--dg-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dg-color-panel .dg-color-hex-input { flex: 1 1 0%; width: 100%; min-width: 0; height: 32px; min-height: 0; padding: 4px 8px; border: 1px solid var(--dg-line); border-radius: 6px; background: rgba(16, 22, 30, .8); color: var(--dg-text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; font-weight: 600; text-transform: lowercase; outline: none; box-shadow: none; transition: border-color .15s ease; }
.dg-color-panel .dg-color-hex-input:focus { border-color: color-mix(in srgb, var(--dg-highlight) 50%, transparent); background: rgba(16, 22, 30, .8); }

.dg-color-rgb-row { display: flex; gap: 6px; width: 100%; margin-top: 8px; }
.dg-color-rgb-group { display: flex; flex: 1 1 0%; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.dg-color-rgb-label { color: var(--dg-text-dim); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dg-color-panel .dg-color-rgb-input { width: 100%; min-width: 0; height: 30px; min-height: 0; padding: 4px 6px; border: 1px solid var(--dg-line); border-radius: 6px; background: rgba(16, 22, 30, .8); color: var(--dg-text); font-size: .8rem; font-weight: 600; text-align: center; outline: none; box-shadow: none; -moz-appearance: textfield; transition: border-color .15s ease; }
.dg-color-panel .dg-color-rgb-input::-webkit-outer-spin-button, .dg-color-panel .dg-color-rgb-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.dg-color-panel .dg-color-rgb-input:focus { border-color: color-mix(in srgb, var(--dg-highlight) 50%, transparent); background: rgba(16, 22, 30, .8); }

.dg-color-presets { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 10px; }
.dg-color-preset { width: 100%; min-width: 0; margin: 0; padding: 0; aspect-ratio: 1 / 1; border: 1px solid var(--dg-line); border-radius: 6px; cursor: pointer; box-shadow: none; transition: transform .12s ease, border-color .12s ease; }
.dg-color-preset:hover, .dg-color-preset:focus-visible { border-color: rgba(255, 255, 255, .4); outline: none; transform: scale(1.08); }
.dg-color-preset:disabled { cursor: not-allowed; opacity: .45; }