:root{--cpg-primary:var(--main-primary);--cpg-primary-bg:var(--main-primary-bg,#6366f10d);--cpg-focus-ring:var(--main-primary-bg,#6366f126);--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%;min-width:0;max-width:900px;margin:0 auto;display:flex}@media (max-width:768px){._cpg-container{gap:var(--main-space-4)}}@media (max-width:480px){._cpg-container{gap:var(--main-space-3)}}._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);min-height:44px;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:768px){._cpg-tab-content{padding:var(--main-space-4)}}@media (max-width:480px){._cpg-tab span{display:none}._cpg-tab,._cpg-tab-content{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;flex-shrink:0;width:44px;height:44px;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:110px;min-height:44px;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;flex:1;min-width:0}._cpg-hex-input:focus{border-color:var(--cpg-primary);box-shadow:0 0 0 3px var(--cpg-focus-ring);outline:none}._cpg-select{min-height:44px;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);box-shadow:0 0 0 3px var(--cpg-focus-ring);outline:none}._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);min-height:44px;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:var(--cpg-primary-bg)}._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);width:100%;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:36px;height:36px;transition:background-color .15s;display:flex;position:absolute}._cpg-remove-image:hover{background:#000c}._cpg-color-count-group{width:100%;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);flex-wrap:wrap;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{align-items:center;gap:var(--main-space-2);width:100%;min-height:40px;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:flex}._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-color-input-wrapper{width:100%}._cpg-hex-input{flex:1;width:auto;font-size:16px}._cpg-select{width:100%;font-size:16px}._cpg-btn-primary{width:100%}._cpg-upload-zone{min-height:140px}._cpg-export-dropdown{min-width:180px;left:0;right:auto}}@media (max-width:480px){._cpg-actions{flex-direction:column;align-items:stretch}._cpg-export-wrapper,._cpg-export-wrapper ._cpg-btn{width:100%}._cpg-export-dropdown{min-width:0;left:0;right:0}._cpg-upload-zone{min-height:120px}._cpg-upload-text{text-align:center}}._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:32px;height:32px;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:110px}._cpg-swatch-actions{opacity:1}._cpg-swatch-btn{width:36px;height:36px}._cpg-swatch-info{padding:var(--main-space-2) var(--main-space-3)}}@media (max-width:480px){._cpg-color-swatch{flex:100%;min-width:100%}._cpg-swatch-bg{min-height:88px}._cpg-swatch-actions{gap:var(--main-space-2)}._cpg-swatch-btn{width:40px;height:40px}}._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:36px;height:36px;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);-webkit-overflow-scrolling:touch;flex-wrap:wrap;max-height:160px;display:flex;overflow-y:auto}._cpg-history-item{border-radius:var(--cpg-radius);cursor:pointer;height:36px;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}@media (max-width:768px){._cpg-history-section{padding:var(--main-space-3)}._cpg-history-grid{max-height:200px}._cpg-history-color{width:28px}}@media (max-width:480px){._cpg-history-color{width:32px}._cpg-history-item{height:40px}}