.cp-root{--cp-bg: #ffffff;--cp-bg-subtle: #f5f5f7;--cp-border: rgba(0, 0, 0, .1);--cp-border-hover:rgba(0, 0, 0, .22);--cp-text: #111111;--cp-text-muted: #888888;--cp-accent: var(--accent-primary, #6366f1);--cp-accent-rgb: 99, 102, 241;--cp-danger: #ff3b30;--cp-success: #34c759;--cp-radius: 14px;--cp-radius-sm: 8px;--cp-radius-xs: 5px;--cp-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .06), 0 8px 16px rgba(0, 0, 0, .1), 0 20px 40px rgba(0, 0, 0, .12), 0 40px 80px rgba(0, 0, 0, .08);--cp-transition: .15s ease;display:inline-flex;position:relative}.cp-root.cp-dark{--cp-bg: #1c1c1e;--cp-bg-subtle: #2c2c2e;--cp-border: rgba(255, 255, 255, .1);--cp-border-hover:rgba(255, 255, 255, .25);--cp-text: #f5f5f7;--cp-text-muted: #8e8e93;--cp-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .5), 0 24px 50px rgba(0, 0, 0, .45), 0 50px 100px rgba(0, 0, 0, .3)}.cp-trigger{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;background:var(--cp-bg);border:1px solid var(--cp-border);border-radius:999px;cursor:pointer;font-size:12px;font-family:inherit;color:var(--cp-text);transition:border-color var(--cp-transition),box-shadow var(--cp-transition),background var(--cp-transition);white-space:nowrap;user-select:none}.cp-trigger:hover{border-color:var(--cp-border-hover);box-shadow:0 1px 4px #00000014}.cp-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--cp-accent-rgb),.35)}.cp-trigger-swatch{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--cp-border);flex-shrink:0;box-shadow:inset 0 1px 2px #00000026;transition:transform .1s ease}.cp-trigger:hover .cp-trigger-swatch{transform:scale(1.1)}.cp-trigger-label{font-weight:500;color:var(--cp-text)}.cp-trigger-hex{font-family:SF Mono,Fira Code,Consolas,monospace;font-size:11px;letter-spacing:.03em;color:var(--cp-text-muted)}.cp-trigger-chevron{color:var(--cp-text-muted);margin-left:-2px;transition:transform var(--cp-transition);display:flex;align-items:center}[aria-expanded=true] .cp-trigger-chevron{transform:rotate(180deg)}.cp-popover{--cp-bg: #ffffff;--cp-bg-subtle: #f5f5f7;--cp-border: rgba(0, 0, 0, .1);--cp-border-hover:rgba(0, 0, 0, .22);--cp-text: #111111;--cp-text-muted: #888888;--cp-accent: var(--accent-primary, #6366f1);--cp-accent-rgb: 99, 102, 241;--cp-danger: #ff3b30;--cp-success: #34c759;--cp-radius: 14px;--cp-radius-sm: 8px;--cp-radius-xs: 5px;--cp-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .06), 0 8px 16px rgba(0, 0, 0, .1), 0 20px 40px rgba(0, 0, 0, .12), 0 40px 80px rgba(0, 0, 0, .08);background:var(--cp-bg);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow);padding:14px;display:flex;flex-direction:column;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;isolation:isolate;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}.cp-popover.cp-dark{--cp-bg: rgba(28, 28, 30, .92);--cp-bg-subtle: rgba(44, 44, 46, .85);--cp-border: rgba(255, 255, 255, .1);--cp-border-hover:rgba(255, 255, 255, .25);--cp-text: #f5f5f7;--cp-text-muted: #8e8e93;--cp-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .5), 0 24px 50px rgba(0, 0, 0, .45), 0 50px 100px rgba(0, 0, 0, .3)}.cp-header{display:flex;align-items:center;justify-content:space-between;padding:0 2px}.cp-header-title{font-size:12px;font-weight:600;color:var(--cp-text);letter-spacing:.01em;opacity:.8;flex:1}.cp-header-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}.cp-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:none;background:var(--cp-bg-subtle);cursor:pointer;padding:0;transition:background var(--cp-transition),color var(--cp-transition),transform .1s ease;flex-shrink:0}.cp-action-btn:active{transform:scale(.88)}.cp-action-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--cp-accent-rgb),.3)}.cp-btn-cancel{color:var(--cp-text-muted)}.cp-btn-cancel:hover{background:#ff3b301f;color:var(--cp-danger)}.cp-btn-apply{color:var(--cp-text-muted)}.cp-btn-apply:hover{background:#34c75924;color:var(--cp-success)}.cp-canvas-wrap{border-radius:var(--cp-radius-sm)}.cp-canvas-wrap .react-colorful__saturation{border-radius:var(--cp-radius-sm) var(--cp-radius-sm) 0 0;height:170px;border-bottom:none;flex-shrink:0}.cp-canvas-wrap .react-colorful{width:100%!important;height:auto;gap:10px}.cp-canvas-wrap .react-colorful__hue{height:14px;border-radius:999px;margin:0;overflow:visible}.cp-canvas-wrap .react-colorful__pointer{width:20px;height:20px;border-width:2.5px;box-shadow:0 1px 4px #00000040,0 0 0 1px #0000000d;cursor:grab;transition:transform .1s ease}.cp-canvas-wrap .react-colorful__pointer:active{cursor:grabbing;transform:scale(1.15)}.cp-canvas-wrap .react-colorful__saturation-pointer{background:transparent}.cp-strip{display:flex;gap:6px;height:28px;border-radius:var(--cp-radius-sm);padding:2px;margin:-2px}.cp-strip-swatch{flex:1;border:none;padding:0;cursor:default;border-radius:var(--cp-radius-xs);transition:box-shadow var(--cp-transition),transform .1s ease;outline:1.5px solid var(--cp-border);outline-offset:-1.5px;position:relative}button.cp-strip-swatch{cursor:pointer}button.cp-strip-swatch:after{content:"";position:absolute;inset:0;background:#0000;border-radius:inherit;transition:background .12s ease}button.cp-strip-swatch:hover:after{background:#0000001f}button.cp-strip-swatch:hover{box-shadow:0 0 0 2px var(--cp-accent)}.cp-inputs-row{display:flex;align-items:flex-start;gap:6px}.cp-inputs-col{display:flex;flex-direction:column;flex-shrink:0}.cp-fmt-badge{flex-shrink:0;height:30px;min-width:44px;padding:0 9px;border-radius:var(--cp-radius-xs);border:1px solid var(--cp-border);background:var(--cp-bg-subtle);color:var(--cp-text-muted);font-size:10px;font-weight:700;letter-spacing:.07em;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase;cursor:pointer;transition:border-color var(--cp-transition),color var(--cp-transition),background var(--cp-transition);user-select:none}.cp-fmt-badge:hover{border-color:var(--cp-accent);color:var(--cp-accent);background:var(--cp-bg)}.cp-fmt-badge:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--cp-accent-rgb),.3)}.cp-channels{display:flex;gap:4px;flex:1;min-width:0}.cp-ch{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0}.cp-ch-input{width:100%;height:30px;padding:0 6px;border-radius:var(--cp-radius-xs);border:1px solid var(--cp-border);background:var(--cp-bg-subtle);color:var(--cp-text);font-size:12px;font-family:SF Mono,Fira Code,Consolas,monospace;letter-spacing:.03em;text-align:center;outline:none;transition:border-color var(--cp-transition),box-shadow var(--cp-transition);min-width:0}.cp-ch-input:focus{border-color:var(--cp-accent);box-shadow:0 0 0 2.5px rgba(var(--cp-accent-rgb),.22);background:var(--cp-bg)}.cp-ch-input:hover:not(:focus){border-color:var(--cp-border-hover)}.cp-ch-label{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--cp-text-muted);text-transform:uppercase;user-select:none;line-height:1}.cp-eyedropper{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:var(--cp-radius-xs);border:1px solid var(--cp-border);background:var(--cp-bg-subtle);color:var(--cp-text-muted);cursor:pointer;padding:0;transition:border-color var(--cp-transition),color var(--cp-transition),background var(--cp-transition),transform .1s ease}.cp-eyedropper:hover{border-color:var(--cp-accent);color:var(--cp-accent);background:var(--cp-bg)}.cp-eyedropper:active{transform:scale(.92)}.cp-eyedropper:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--cp-accent-rgb),.3)}@media (max-width: 400px){.cp-popover{border-radius:var(--cp-radius-sm)}}@media (prefers-reduced-motion: reduce){.cp-canvas-wrap .react-colorful__pointer,.cp-trigger-chevron{transition:none}}