.color-explorer{ position: relative; margin: 3px 0 14px; }
.color-picker-compact{ display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 7px; }
.color-picker-current,
.color-picker-eyedropper{ min-height: 42px; border: 1px solid rgba(7,22,40,.15); border-radius: 9px; background: #fff; color: #102033; cursor: pointer; transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.color-picker-current:hover,
.color-picker-eyedropper:hover{ border-color: rgba(36,152,237,.68); box-shadow: 0 5px 15px rgba(7,22,40,.08); transform: translateY(-1px); }
.color-picker-current:focus-visible,
.color-picker-eyedropper:focus-visible,
.color-picker-dialog button:focus-visible,
.color-picker-dialog input:focus-visible,
.color-picker-saturation:focus-visible{ outline: 2px solid #2498ed; outline-offset: 2px; }
.color-picker-current{ min-width: 0; padding: 5px 11px 5px 6px; display: flex; align-items: center; gap: 10px; text-align: left; }
.color-picker-current-swatch{ width: 30px; height: 30px; flex: 0 0 30px; border: 3px solid #fff; border-radius: 7px; background: var(--picker-color); box-shadow: 0 0 0 1px rgba(7,22,40,.18),0 3px 8px rgba(7,22,40,.11); }
.color-picker-current strong{ overflow: hidden; color: #526174; font: 800 10px/1 Arial,sans-serif; letter-spacing: .06em; text-overflow: ellipsis; }
.color-picker-eyedropper{ padding: 0; display: grid; place-items: center; }
.color-picker-eyedropper svg{ width: 20px; height: 20px; fill: none; stroke: #087dce; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.color-picker-overlay[hidden]{ display: none; }
.color-picker-overlay{ position: fixed; z-index: 120; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; display: grid; place-items: center; padding: 18px; isolation: isolate; animation: color-picker-overlay-in .18s ease-out both; }
.color-picker-overlay::backdrop{ background: transparent; }
.color-picker-backdrop{ position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,18,32,.55); -webkit-backdrop-filter: blur(8px) saturate(.78); backdrop-filter: blur(8px) saturate(.78); cursor: default; }
.color-picker-dialog{ width: min(326px,calc(100% - 8px)); max-height: calc(100% - 20px); padding: 14px; overflow: auto; border: 1px solid rgba(255,255,255,.86); border-radius: 20px; background: rgba(255,255,255,.97); color: #102033; box-shadow: 0 24px 64px rgba(2,9,18,.42),0 0 0 5px rgba(255,255,255,.16); animation: color-picker-dialog-in .24s cubic-bezier(.2,.82,.24,1.08) both; }
.color-picker-dialog > header{ min-height: 42px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.color-picker-dialog > header > div{ display: grid; gap: 4px; }
.color-picker-dialog > header span{ color: #087dce; font: 800 8px/1 Arial,sans-serif; letter-spacing: .16em; }
.color-picker-dialog > header strong{ font: 800 16px/1.1 'EventSans',Arial,sans-serif; }
.color-picker-dialog > header button{ width: 34px; height: 34px; padding: 0; border: 1px solid rgba(7,22,40,.14); border-radius: 50%; background: #f3f6f8; color: #526174; font: 300 22px/1 Arial,sans-serif; cursor: pointer; }
.color-picker-saturation{ position: relative; width: 100%; aspect-ratio: 1.22; overflow: hidden; border: 5px solid #fff; border-radius: 12px; background-color: hsl(var(--picker-hue) 100% 50%); background-image: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0)); box-shadow: 0 0 0 1px rgba(7,22,40,.2),inset 0 0 22px rgba(0,0,0,.08); cursor: crosshair; touch-action: none; }
.color-picker-saturation [data-color-picker-saturation-handle]{ position: absolute; left: var(--picker-saturation); top: var(--picker-value); width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(7,22,40,.58),0 2px 8px rgba(2,9,18,.35); transform: translate(-50%,-50%); pointer-events: none; }
.color-picker-hue-label{ margin: 13px 0 0; display: grid; gap: 6px; }
.color-picker-hue-label > span,
.color-picker-value-row label > span{ color: #708091; font: 800 8px/1 Arial,sans-serif; letter-spacing: .13em; }
.color-picker-hue-label input{ width: 100%; height: 16px; margin: 0; appearance: none; border: 3px solid #fff; border-radius: 999px; background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); box-shadow: 0 0 0 1px rgba(7,22,40,.16); cursor: pointer; }
.color-picker-hue-label input::-webkit-slider-thumb{ width: 18px; height: 18px; appearance: none; border: 3px solid #fff; border-radius: 50%; background: hsl(var(--picker-hue) 100% 50%); box-shadow: 0 0 0 1px rgba(7,22,40,.48),0 2px 6px rgba(2,9,18,.25); }
.color-picker-hue-label input::-moz-range-thumb{ width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: hsl(var(--picker-hue) 100% 50%); box-shadow: 0 0 0 1px rgba(7,22,40,.48),0 2px 6px rgba(2,9,18,.25); }
.color-picker-value-row{ margin-top: 13px; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: end; gap: 10px; }
.color-picker-preview{ width: 46px; height: 46px; border: 4px solid #fff; border-radius: 10px; background: var(--picker-color); box-shadow: 0 0 0 1px rgba(7,22,40,.18),0 4px 12px rgba(7,22,40,.11); }
.color-picker-value-row label{ min-width: 0; display: grid; gap: 5px; }
.color-picker-hex-shell{ min-height: 46px; padding: 0 11px; border: 1px solid rgba(7,22,40,.16); border-radius: 10px; background: #fff; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; }
.color-picker-hex-shell b{ color: #8794a1; font: 400 22px/1 Arial,sans-serif; }
.color-picker-hex-shell input{ width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #102033; font: 800 20px/1 'EventSans',Arial,sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.color-picker-preview-note{ margin: 10px 2px 0; color: #68798a; font: 11px/1.35 Georgia,serif; text-align: center; }
.color-picker-apply{ width: 100%; min-height: 42px; margin-top: 10px; padding: 0 16px; border: 0; border-radius: 10px; background: #1599e5; color: #fff; cursor: pointer; font: 800 10px/1 Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(21,153,229,.24); }
@media (max-height: 560px) {
  .color-picker-overlay{ padding: 12px; }
  .color-picker-dialog{ max-height: 100%; padding: 12px; }
  .color-picker-dialog > header{ min-height: 34px; margin-bottom: 8px; }
  .color-picker-saturation{ aspect-ratio: 2.6; }
  .color-picker-hue-label,.color-picker-value-row{ margin-top: 8px; }
  .color-picker-preview-note{ margin-top: 6px; }
}
@keyframes color-picker-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes color-picker-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce) { .color-picker-overlay,
.color-picker-dialog{ animation: none; } }