/*!
 * ColorPickUp Layout & Styling System
 * Optimized CSS Grid layout for professional visual harmony.
 * Released under the MIT License.
 */:root{--cpu-bg:#ffffff;--cpu-card-bg:#f5f6f8;--cpu-text:#1a1f36;--cpu-text-muted:#5a607f;--cpu-border:#e3e8fc;--cpu-accent:#1e90ff;--cpu-accent-hover:#0076e4;--cpu-accent-text:#ffffff;--cpu-contrast-fail:#ff4d4f;--cpu-contrast-pass-aa:#faad14;--cpu-contrast-pass-aaa:#52c41a;--cpu-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--cpu-width:280px;--cpu-padding:14px;--cpu-radius:10px;--cpu-spacing:12px;--cpu-shadow:0 4px 20px rgba(0, 0, 0, 0.08),0 1px 3px rgba(0, 0, 0, 0.02);--cpu-border-width:1px;--cpu-border-style:solid;--cpu-gradient-height:120px;--cpu-marker-size:14px;--cpu-slider-height:8px;--cpu-slider-handle-size:14px;--cpu-transition:200ms cubic-bezier(0.4, 0, 0.2, 1)}.cpu-picker{display:none;grid-template-columns:repeat(4,1fr);grid-gap:var(--cpu-spacing);width:var(--cpu-width);padding:var(--cpu-padding);box-sizing:border-box;background-color:var(--cpu-bg);border:var(--cpu-border-width) var(--cpu-border-style) var(--cpu-border);border-radius:var(--cpu-radius);box-shadow:var(--cpu-shadow);color:var(--cpu-text);font-family:var(--cpu-font);font-size:13px;z-index:1000;position:absolute;direction:ltr;user-select:none;-webkit-user-select:none;will-change:transform,opacity;transition:opacity var(--cpu-transition),transform var(--cpu-transition)}.cpu-picker.cpu-open,.cpu-picker[data-inline=true]{display:grid}.cpu-picker[data-inline=true]{position:relative;box-shadow:none}.cpu-row{grid-column:span 4}.cpu-row-1{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;width:100%}.cpu-btn{height:28px;border:1px solid var(--cpu-border);border-radius:calc(var(--cpu-radius) - 4px);background-color:var(--cpu-bg);background-size:14px;background-position:center;background-repeat:no-repeat;cursor:pointer;outline:0;transition:background-color var(--cpu-transition),border-color var(--cpu-transition),box-shadow var(--cpu-transition)}.cpu-btn:hover{background-color:var(--cpu-card-bg);border-color:var(--cpu-accent)}.cpu-btn:focus-visible{box-shadow:0 0 0 2px var(--cpu-bg),0 0 0 4px var(--cpu-accent)}.cpu-copy-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235a607f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E")}.cpu-copy-btn.cpu-copy-success{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352c41a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");border-color:var(--cpu-contrast-pass-aaa)}.cpu-paste-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235a607f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E")}.cpu-eyedropper-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235a607f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22l-1.5-1.5L16.5 14 18 15.5zm8.5-8.5a2.121 2.121 0 0 1 0 3l-2.5-2.5a2.121 2.121 0 0 1 3 0zM2 22l5-5M11 7l3 3'%3E%3C/path%3E%3C/svg%3E")}.cpu-clear{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");border-color:rgba(255,77,79,.2)}.cpu-clear:hover{background-color:rgba(255,77,79,.05);border-color:var(--cpu-contrast-fail)}.cpu-row-2{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--cpu-spacing)}.cpu-gradient{grid-column:span 3;position:relative;height:var(--cpu-gradient-height);border-radius:calc(var(--cpu-radius) - 4px);background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer;overflow:hidden}.cpu-marker{position:absolute;width:var(--cpu-marker-size);height:var(--cpu-marker-size);margin-left:calc(var(--cpu-marker-size)/ -2);margin-top:calc(var(--cpu-marker-size)/ -2);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 3px rgba(0,0,0,.35);cursor:pointer;box-sizing:border-box}.cpu-preview{grid-column:span 1;position:relative;border-radius:calc(var(--cpu-radius) - 4px);border:1px solid var(--cpu-border);overflow:hidden;box-sizing:border-box}.cpu-preview:before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),repeating-linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%,#ccc);background-position:0 0,4px 4px;background-size:8px 8px;z-index:1}.cpu-preview:after{content:'';position:absolute;inset:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);z-index:2}.cpu-close{position:absolute;inset:0;z-index:5;background-color:transparent;border:none;cursor:pointer;outline:0}.cpu-contrast-overlay{position:absolute;bottom:0;left:0;right:0;z-index:4;background-color:rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;padding:4px 0;font-size:9px;font-weight:700;color:#fff;pointer-events:none}#cpu-contrast-rating{font-size:8px;opacity:.85}.cpu-row-3{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--cpu-spacing)}input.cpu-color{grid-column:span 3;height:28px;padding:0 8px;border:1px solid var(--cpu-border);border-radius:calc(var(--cpu-radius) - 4px);color:var(--cpu-text);background-color:var(--cpu-bg);font-family:var(--cpu-font);font-size:12px;text-align:center;box-sizing:border-box;outline:0;transition:border-color var(--cpu-transition)}input.cpu-color:focus{border-color:var(--cpu-accent)}.cpu-select{appearance:none;-webkit-appearance:none;border:1px solid var(--cpu-border);border-radius:calc(var(--cpu-radius) - 4px);background-color:var(--cpu-bg);color:var(--cpu-text);font-family:var(--cpu-font);font-size:11px;font-weight:600;padding:0 16px 0 8px;height:28px;box-sizing:border-box;outline:0;cursor:pointer;transition:border-color var(--cpu-transition);background-repeat:no-repeat;background-position:right 6px center;background-size:10px}.cpu-select:focus{border-color:var(--cpu-accent)}.cpu-format-select,.cpu-palette-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235a607f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.cpu-format-select{grid-column:span 1}.cpu-row-3 input.cpu-color.cpu-span-4,.cpu-row-7 #cpu-swatches.cpu-span-4{grid-column:span 4}.cpu-hue{position:relative;width:100%;height:var(--cpu-slider-height);border-radius:calc(var(--cpu-slider-height)/ 2);background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.cpu-alpha input[type=range],.cpu-hue input[type=range]{position:absolute;width:100%;height:calc(var(--cpu-slider-height) + 8px);left:0;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;z-index:2}.cpu-alpha input[type=range]::-webkit-slider-runnable-track,.cpu-hue input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%}.cpu-alpha input[type=range]::-webkit-slider-thumb,.cpu-hue input[type=range]::-webkit-slider-thumb{width:var(--cpu-slider-handle-size);height:var(--cpu-slider-handle-size);-webkit-appearance:none}.cpu-alpha div,.cpu-hue div{position:absolute;width:var(--cpu-slider-handle-size);height:var(--cpu-slider-handle-size);left:0;top:50%;margin-left:calc(var(--cpu-slider-handle-size)/ -2);transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 2px rgba(0,0,0,.35);pointer-events:none;z-index:1}.cpu-alpha{position:relative;width:100%;height:var(--cpu-slider-height);border-radius:calc(var(--cpu-slider-height)/ 2);background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),repeating-linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%,#ccc);background-position:0 0,4px 4px;background-size:8px 8px}.cpu-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.cpu-accordion{border:1px solid var(--cpu-border);border-radius:calc(var(--cpu-radius) - 4px);background-color:var(--cpu-card-bg);overflow:hidden}.cpu-accordion-summary{list-style:none;outline:0;cursor:pointer;font-weight:700;font-size:11px;color:var(--cpu-text-muted);display:flex;align-items:center;justify-content:space-between;padding:6px 10px;user-select:none}.cpu-accordion-summary::-webkit-details-marker{display:none}.cpu-accordion-summary::after{content:'';display:inline-block;width:5px;height:5px;border-right:2px solid var(--cpu-text-muted);border-bottom:2px solid var(--cpu-text-muted);transform:rotate(45deg);transition:transform var(--cpu-transition);margin-right:2px}.cpu-accordion[open] .cpu-accordion-summary::after{transform:rotate(-135deg)}.cpu-harmony-panel,.cpu-history-panel{padding:8px 10px;border-top:1px solid var(--cpu-border);background-color:var(--cpu-bg)}.cpu-history-grid{display:flex;flex-wrap:wrap;gap:5px}.cpu-history-swatch{width:18px;height:18px;border-radius:3px;cursor:pointer;border:none;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform var(--cpu-transition)}.cpu-history-swatch:hover{transform:scale(1.15)}.cpu-row-7{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--cpu-spacing);align-items:center}.cpu-swatches{grid-column:span 3}.cpu-swatches-grid{display:flex;flex-wrap:wrap;gap:5px}.cpu-swatches button{position:relative;width:18px;height:18px;border:none;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.cpu-swatches button:after{content:'';position:absolute;inset:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform var(--cpu-transition)}.cpu-swatches button:hover:after{transform:scale(1.15)}.cpu-palette-select{grid-column:span 1}.cpu-harmony-panel{display:flex;flex-direction:column;gap:6px}.cpu-harmony-group{display:flex;align-items:center;justify-content:space-between}.cpu-harmony-label{font-size:10px;font-weight:700;color:var(--cpu-text-muted)}.cpu-harmony-grid{display:flex;gap:4px}.cpu-harmony-swatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:none;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform var(--cpu-transition)}.cpu-harmony-swatch:hover{transform:scale(1.15)}.cpu-field{display:inline-block;position:relative}.cpu-field input{margin:0;direction:ltr}.cpu-field.cpu-rtl input{text-align:right}.cpu-field:not(.cpu-mode-color) input{padding-right:36px}.cpu-field.cpu-rtl:not(.cpu-mode-color) input{padding-right:initial;padding-left:36px}.cpu-field.cpu-mode-color{display:inline-flex;vertical-align:middle}.cpu-field.cpu-mode-color input{position:absolute!important;width:0!important;height:0!important;padding:0!important;border:0!important;margin:0!important;opacity:0!important;pointer-events:none!important}.cpu-field.cpu-mode-color button{position:relative;display:block;width:30px;height:30px;top:auto;right:auto;left:auto;transform:none;pointer-events:auto;cursor:pointer}.cpu-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),repeating-linear-gradient(45deg,#ccc 25%,#fff 25%,#fff 75%,#ccc 75%,#ccc);background-position:0 0,4px 4px;background-size:8px 8px;box-sizing:border-box}.cpu-field.cpu-rtl button{right:auto;left:0;border-radius:calc(var(--cpu-radius,4px) - 1px) 0 0 calc(var(--cpu-radius,4px) - 1px)}.cpu-field button:after{content:'';display:block;position:absolute;inset:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.cpu-marker:focus{outline:0}.cpu-keyboard-nav .cpu-alpha input:focus+div,.cpu-keyboard-nav .cpu-hue input:focus+div,.cpu-keyboard-nav .cpu-marker:focus{outline:0;box-shadow:0 0 0 2px var(--cpu-accent),0 0 2px 2px #fff}.cpu-picker.cpu-theme-light{--cpu-bg:#ffffff;--cpu-card-bg:#f5f6f8;--cpu-text:#1a1f36;--cpu-text-muted:#5a607f;--cpu-border:#e3e8fc;--cpu-accent:#1e90ff}.cpu-picker.cpu-theme-dark{--cpu-bg:#2d2d30;--cpu-card-bg:#212124;--cpu-text:#f5f5f5;--cpu-text-muted:#aaaaaa;--cpu-border:#4a4a4d;--cpu-accent:#007acc}.cpu-picker.cpu-theme-amoled{--cpu-bg:#000000;--cpu-card-bg:#111111;--cpu-text:#ffffff;--cpu-text-muted:#888888;--cpu-border:#222222;--cpu-accent:#ff0055}.cpu-picker.cpu-theme-github{--cpu-bg:#0d1117;--cpu-card-bg:#161b22;--cpu-text:#c9d1d9;--cpu-text-muted:#8b949e;--cpu-border:#30363d;--cpu-accent:#1f6feb}.cpu-picker.cpu-theme-dracula{--cpu-bg:#282a36;--cpu-card-bg:#1d1f27;--cpu-text:#f8f8f2;--cpu-text-muted:#6272a4;--cpu-border:#44475a;--cpu-accent:#ff79c6}.cpu-picker.cpu-theme-nord{--cpu-bg:#2e3440;--cpu-card-bg:#242933;--cpu-text:#d8dee9;--cpu-text-muted:#4c566a;--cpu-border:#3b4252;--cpu-accent:#88c0d0}.cpu-picker.cpu-theme-solarized{--cpu-bg:#fdf6e3;--cpu-card-bg:#eee8d5;--cpu-text:#657b83;--cpu-text-muted:#93a1a1;--cpu-border:#dfdbcb;--cpu-accent:#b58900}.cpu-picker.cpu-theme-catppuccin{--cpu-bg:#1e1e2e;--cpu-card-bg:#11111b;--cpu-text:#cdd6f4;--cpu-text-muted:#6c7086;--cpu-border:#313244;--cpu-accent:#f5c2e7}.cpu-picker.cpu-theme-tokyo-night{--cpu-bg:#1a1b26;--cpu-card-bg:#12131a;--cpu-text:#a9b1d6;--cpu-text-muted:#565f89;--cpu-border:#383e56;--cpu-accent:#7aa2f7}.cpu-picker.cpu-theme-gruvbox{--cpu-bg:#282828;--cpu-card-bg:#1d2021;--cpu-text:#ebdbb2;--cpu-text-muted:#928374;--cpu-border:#3c3836;--cpu-accent:#fe8019}.cpu-picker.cpu-theme-material{--cpu-bg:#263238;--cpu-card-bg:#1a2327;--cpu-text:#eceff1;--cpu-text-muted:#78909c;--cpu-border:#37474f;--cpu-accent:#00e676}.cpu-picker.cpu-theme-one-dark{--cpu-bg:#282c34;--cpu-card-bg:#1e2227;--cpu-text:#abb2bf;--cpu-text-muted:#5c6370;--cpu-border:#3e4451;--cpu-accent:#61afef}.cpu-picker.cpu-theme-high-contrast{--cpu-bg:#000000;--cpu-card-bg:#111111;--cpu-text:#ffffff;--cpu-text-muted:#ffffff;--cpu-border:#ffffff;--cpu-border-width:2px;--cpu-accent:#ffff00;--cpu-accent-text:#000000}.cpu-picker.cpu-style-classic{--cpu-radius:0px;--cpu-padding:8px;--cpu-spacing:8px;--cpu-shadow:none;--cpu-border-width:1px}.cpu-picker.cpu-style-modern{--cpu-radius:10px;--cpu-padding:14px;--cpu-spacing:12px}.cpu-picker.cpu-style-rounded{--cpu-radius:20px}.cpu-picker.cpu-style-terminal{--cpu-radius:0px;--cpu-font:"Courier New",Courier,monospace}.cpu-picker.cpu-style-retro{--cpu-radius:0px;--cpu-border-width:3px;--cpu-border-style:outset;--cpu-shadow:2px 2px 0px rgba(0, 0, 0, 1)}.cpu-picker.cpu-style-neon{--cpu-shadow:0 0 15px var(--cpu-accent)}.cpu-picker.cpu-style-chrome{--cpu-radius:2px;--cpu-padding:10px;--cpu-spacing:8px;--cpu-font:"Segoe UI",Tahoma,sans-serif}.cpu-picker.cpu-style-firefox{--cpu-radius:4px}.cpu-picker.cpu-style-adobe{--cpu-radius:0px;--cpu-padding:12px;--cpu-spacing:10px;--cpu-bg:#323232;--cpu-card-bg:#222222;--cpu-text:#e1e1e1;--cpu-border:#1a1a1a}.cpu-picker.cpu-style-figma{--cpu-radius:6px;--cpu-border:#e6e6e6;--cpu-shadow:0 1px 4px rgba(0, 0, 0, 0.15)}.cpu-picker.cpu-style-windows11{--cpu-radius:8px;backdrop-filter:blur(20px) saturate(120%);background-color:rgba(255,255,255,.85)}.cpu-picker.cpu-theme-dark.cpu-style-windows11{background-color:rgba(45,45,48,.85)}.cpu-picker.cpu-style-macos{--cpu-radius:12px;--cpu-shadow:0 10px 30px rgba(0, 0, 0, 0.2)}.cpu-picker.cpu-style-fluent{--cpu-radius:4px;--cpu-border:rgba(255, 255, 255, 0.1)}.cpu-picker.cpu-style-glass{--cpu-radius:16px;background-color:rgba(255,255,255,.25);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}.cpu-picker.cpu-theme-dark.cpu-style-glass{background-color:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15)}.cpu-picker.cpu-style-minimal{--cpu-border-width:0px;--cpu-shadow:0 8px 24px rgba(0, 0, 0, 0.05)}.cpu-picker.cpu-style-compact{--cpu-width:220px;--cpu-padding:8px;--cpu-spacing:8px}.cpu-anim-fade{opacity:0;transition:opacity var(--cpu-transition) ease-out}.cpu-anim-fade.cpu-open{opacity:1}.cpu-anim-scale{opacity:0;transform:scale(.92);transition:opacity var(--cpu-transition) ease-out,transform var(--cpu-transition) cubic-bezier(.34,1.56,.64,1)}.cpu-anim-scale.cpu-open{opacity:1;transform:scale(1)}.cpu-anim-zoom{opacity:0;transform:scale(.6);transition:opacity var(--cpu-transition) ease-out,transform var(--cpu-transition) cubic-bezier(.175,.885,.32,1.275)}.cpu-anim-zoom.cpu-open{opacity:1;transform:scale(1)}.cpu-anim-slide{opacity:0;transform:translateY(12px);transition:opacity var(--cpu-transition) ease-out,transform var(--cpu-transition) ease-out}.cpu-anim-slide.cpu-open{opacity:1;transform:translateY(0)}.cpu-anim-bounce{opacity:0;transform:translateY(-20px);transition:opacity 250ms ease-out,transform 250ms cubic-bezier(.18,.89,.32,1.28)}.cpu-anim-bounce.cpu-open{opacity:1;transform:translateY(0)}.cpu-anim-none{transition:none!important}