.vial-color-picker{display:none;position:absolute;z-index:10000}.vial-color-picker.open{display:block}.vcp-backdrop{display:none}.vcp-container{position:relative;width:220px;background:#121216fa;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px;box-shadow:0 8px 32px #0006;animation:vcpSlideIn .12s ease-out}@keyframes vcpSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.vcp-gradient-area{position:relative;height:100px;border-radius:6px;overflow:hidden;margin-bottom:8px}.vcp-saturation{position:absolute;inset:0;cursor:crosshair}.vcp-brightness{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,#000 100%)}.vcp-cursor{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px #00000080;transform:translate(-50%,-50%);pointer-events:none}.vcp-controls{display:flex;gap:8px;margin-bottom:8px;align-items:center}.vcp-preview-box{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.15);flex-shrink:0}.vcp-sliders{flex:1}.vcp-hue-slider{position:relative;height:12px;border-radius:6px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}.vcp-hue-cursor{position:absolute;top:50%;width:8px;height:16px;background:#fff;border-radius:3px;box-shadow:0 1px 4px #0006;transform:translate(-50%,-50%);pointer-events:none}.vcp-swatches{display:flex;gap:4px;margin-bottom:8px}.vcp-swatch{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .1s ease,border-color .1s ease;flex-shrink:0}.vcp-swatch:hover{transform:scale(1.08);border-color:#fff6}.vcp-swatch.active{border-color:#fff}.vcp-input-row{display:flex;gap:6px}.vcp-hex-input{flex:1;padding:6px 8px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-family:var(--font-mono, monospace);font-size:.8rem;text-transform:uppercase}.vcp-hex-input:focus{outline:none;border-color:var(--vial-500, #ec2913)}