:root{--cpg-primary:var(--main-primary);--cpg-text:#1f2937;--cpg-text-muted:#6b7280;--cpg-bg:#fff;--cpg-bg-hover:#f9fafb;--cpg-border:#e5e7eb;--cpg-border-hover:#d1d5db;--cpg-shadow:0 1px 3px #0000001a;--cpg-shadow-lg:0 4px 12px #00000026;--cpg-radius:.5rem;--cpg-radius-lg:.75rem;--cpg-checkerboard:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 12px 12px}._cpg-container{gap:var(--main-space-5);flex-direction:column;width:100%;max-width:900px;margin:0 auto;display:flex}@media (max-width:768px){._cpg-container{padding-left:1rem;padding-right:1rem}}._cpg-tabs{gap:var(--main-space-2);background:var(--cpg-bg);padding:var(--main-space-1);border-radius:var(--cpg-radius-lg);box-shadow:var(--cpg-shadow);border-style:solid;border-width:1px;border-color:var(--cpg-border);display:flex}._cpg-tab{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-3) var(--main-space-4);border-radius:var(--cpg-radius);color:var(--cpg-text-muted);font-size:var(--main-text-sm);cursor:pointer;background:0 0;border:none;flex:1;font-weight:500;transition:background-color .15s,color .15s;display:flex}._cpg-tab:hover{background:var(--cpg-bg-hover);color:var(--cpg-text)}._cpg-tab-active{background:var(--cpg-primary);color:#fff}._cpg-tab-active:hover{background:var(--cpg-primary);color:#fff;opacity:.9}._cpg-tab svg{flex-shrink:0}._cpg-tab-contents{background:var(--cpg-bg);border-radius:var(--cpg-radius-lg);box-shadow:var(--cpg-shadow);border-style:solid;border-width:1px;border-color:var(--cpg-border);overflow:hidden}._cpg-tab-content{padding:var(--main-space-5);display:none}._cpg-tab-content-active{display:block}@media (max-width:480px){._cpg-tab span{display:none}._cpg-tab{padding:var(--main-space-3)}}._cpg-theory-controls{align-items:flex-end;gap:var(--main-space-4);flex-wrap:wrap;display:flex}._cpg-control-group{gap:var(--main-space-2);flex-direction:column;display:flex}._cpg-label{font-size:var(--main-text-sm);color:var(--cpg-text);font-weight:500}._cpg-color-input-wrapper{align-items:center;gap:var(--main-space-2);display:flex}._cpg-color-picker{border-radius:var(--cpg-radius);cursor:pointer;background:0 0;border:none;width:40px;height:40px;padding:0}._cpg-color-picker::-webkit-color-swatch-wrapper{padding:0}._cpg-color-picker::-webkit-color-swatch{border:2px solid var(--cpg-border);border-radius:var(--cpg-radius)}._cpg-hex-input{width:90px;padding:var(--main-space-2) var(--main-space-3);border-style:solid;border-width:1.5px;border-color:var(--cpg-border);border-radius:var(--cpg-radius);font-size:var(--main-text-sm);font-family:var(--main-font-mono);color:var(--cpg-text);background:var(--cpg-bg);text-transform:uppercase}._cpg-hex-input:focus{border-color:var(--cpg-primary);outline:none;box-shadow:0 0 0 3px #6366f11a}._cpg-select{padding:var(--main-space-2) var(--main-space-3);padding-right:var(--main-space-8);border-style:solid;border-width:1.5px;border-color:var(--cpg-border);border-radius:var(--cpg-radius);font-size:var(--main-text-sm);color:var(--cpg-text);background:var(--cpg-bg);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat}._cpg-select:focus{border-color:var(--cpg-primary);outline:none;box-shadow:0 0 0 3px #6366f11a}._cpg-btn{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-4);border-radius:var(--cpg-radius);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;border:none;font-weight:500;transition:opacity .15s,background-color .15s;display:inline-flex}._cpg-btn-primary{background:var(--cpg-primary);color:#fff}._cpg-btn-primary:hover{opacity:.9}._cpg-btn-secondary{background:var(--cpg-bg);color:var(--cpg-text);border-style:solid;border-width:1.5px;border-color:var(--cpg-border)}._cpg-btn-secondary:hover{background:var(--cpg-bg-hover);border-color:var(--cpg-border-hover)}._cpg-image-controls{gap:var(--main-space-4);flex-direction:column;display:flex}._cpg-upload-zone{border-style:dashed;border-width:2px;border-color:var(--cpg-border);border-radius:var(--cpg-radius-lg);background:var(--cpg-bg-hover);cursor:pointer;justify-content:center;align-items:center;min-height:160px;transition:border-color .15s,background-color .15s;display:flex}._cpg-upload-zone:hover,._cpg-upload-zone._cpg-dragover{border-color:var(--cpg-primary);background:#6366f10d}._cpg-upload-content{align-items:center;gap:var(--main-space-2);color:var(--cpg-text-muted);flex-direction:column;display:flex}._cpg-upload-content svg{color:var(--cpg-border-hover)}._cpg-upload-text{font-size:var(--main-text-sm);margin:0;font-weight:500}._cpg-upload-hint{font-size:var(--main-text-xs);margin:0}._cpg-image-preview{border-radius:var(--cpg-radius-lg);max-width:300px;box-shadow:var(--cpg-shadow);position:relative;overflow:hidden}._cpg-image-preview img{width:100%;height:auto;display:block}._cpg-remove-image{top:var(--main-space-2);right:var(--main-space-2);color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s;display:flex;position:absolute}._cpg-remove-image:hover{background:#000c}._cpg-color-count-group{max-width:200px}._cpg-range{background:var(--cpg-border);-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:3px;width:100%;height:6px}._cpg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cpg-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #0003}._cpg-range::-moz-range-thumb{background:var(--cpg-primary);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #0003}._cpg-actions{justify-content:center;gap:var(--main-space-3);display:flex}._cpg-export-wrapper{position:relative}._cpg-export-dropdown{top:calc(100% + var(--main-space-2));background:var(--cpg-bg);border-style:solid;border-width:1px;border-color:var(--cpg-border);border-radius:var(--cpg-radius);min-width:160px;box-shadow:var(--cpg-shadow-lg);z-index:100;display:none;position:absolute;right:0}._cpg-export-dropdown._cpg-show{display:block}._cpg-export-option{width:100%;padding:var(--main-space-2) var(--main-space-3);text-align:left;font-size:var(--main-text-sm);color:var(--cpg-text);cursor:pointer;background:0 0;border:none;transition:background-color .15s;display:block}._cpg-export-option:hover{background:var(--cpg-bg-hover)}._cpg-export-option:first-child{border-radius:var(--cpg-radius) var(--cpg-radius) 0 0}._cpg-export-option:last-child{border-radius:0 0 var(--cpg-radius) var(--cpg-radius)}@media (max-width:768px){._cpg-theory-controls{flex-direction:column;align-items:stretch}._cpg-control-group,._cpg-select,._cpg-btn-primary{width:100%}}._cpg-palette-section{background:var(--cpg-bg);border-radius:var(--cpg-radius-lg);box-shadow:var(--cpg-shadow);border-style:solid;border-width:1px;border-color:var(--cpg-border);overflow:hidden}._cpg-palette{min-height:200px;display:flex}._cpg-color-swatch{cursor:pointer;flex-direction:column;flex:1;display:flex;position:relative}._cpg-swatch-bg{flex:1;position:relative}._cpg-swatch-actions{top:var(--main-space-2);right:var(--main-space-2);gap:var(--main-space-1);opacity:0;transition:opacity .15s;display:flex;position:absolute}._cpg-color-swatch:hover ._cpg-swatch-actions{opacity:1}._cpg-swatch-btn{color:#374151;border-radius:var(--cpg-radius);cursor:pointer;background:#ffffffe6;border:none;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s;display:flex;box-shadow:0 1px 3px #0000001a}._cpg-swatch-btn:hover{background:#fff}._cpg-swatch-btn._cpg-locked{background:var(--cpg-primary);color:#fff}._cpg-swatch-info{padding:var(--main-space-3);background:var(--cpg-bg);border-top-style:solid;border-top-width:1px;border-top-color:var(--cpg-border)}._cpg-swatch-hex{font-size:var(--main-text-sm);font-weight:600;font-family:var(--main-font-mono);color:var(--cpg-text);margin:0 0 var(--main-space-1) 0}._cpg-swatch-name{font-size:var(--main-text-xs);color:var(--cpg-text-muted);white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}._cpg-palette-empty{justify-content:center;align-items:center;gap:var(--main-space-2);color:var(--cpg-text-muted);padding:var(--main-space-6);flex-direction:column;flex:1;display:flex}._cpg-palette-empty svg{color:var(--cpg-border)}._cpg-palette-empty p{font-size:var(--main-text-sm);margin:0}@media (max-width:640px){._cpg-palette{flex-wrap:wrap;min-height:auto}._cpg-color-swatch{flex:calc(50% - 1px);min-width:calc(50% - 1px)}._cpg-swatch-bg{min-height:100px}._cpg-swatch-actions{opacity:1}}@media (max-width:480px){._cpg-color-swatch{flex:100%;min-width:100%}._cpg-swatch-bg{min-height:80px}}._cpg-history-section{background:var(--cpg-bg);border-radius:var(--cpg-radius-lg);box-shadow:var(--cpg-shadow);border-style:solid;border-width:1px;border-color:var(--cpg-border);padding:var(--main-space-4)}._cpg-history-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cpg-history-title{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--cpg-text);font-weight:600;display:flex}._cpg-clear-btn{width:28px;height:28px;color:var(--cpg-text-muted);border-radius:var(--cpg-radius);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}._cpg-clear-btn:hover{background:var(--cpg-bg-hover);color:var(--main-error)}._cpg-history-grid{gap:var(--main-space-2);flex-wrap:wrap;height:76px;display:flex;overflow-y:auto}._cpg-history-item{border-radius:var(--cpg-radius);cursor:pointer;height:32px;transition:box-shadow .15s;display:flex;overflow:hidden;box-shadow:0 1px 2px #0000001a}._cpg-history-item:hover{box-shadow:0 2px 6px #00000026}._cpg-history-color{width:24px;height:100%}._cpg-empty-hint{width:100%;padding:var(--main-space-3);font-size:var(--main-text-sm);color:var(--cpg-text-muted);justify-content:center;align-items:center;display:flex}