:root{--csg-primary:var(--main-primary);--csg-text:#1f2937;--csg-text-muted:#6b7280;--csg-bg:#fff;--csg-bg-hover:#f9fafb;--csg-border:#e5e7eb;--csg-border-hover:#d1d5db;--csg-shadow:0 1px 3px #0000001a;--csg-shadow-lg:0 4px 12px #00000026;--csg-radius:.5rem;--csg-radius-lg:.75rem}._csg-container{gap:var(--main-space-5);flex-direction:column;width:100%;max-width:1000px;margin:0 auto;display:flex}@media (max-width:768px){._csg-container{padding-left:1rem;padding-right:1rem}}._csg-input-section{gap:var(--main-space-4);background:var(--csg-bg);padding:var(--main-space-5);border-radius:var(--csg-radius-lg);box-shadow:var(--csg-shadow);border-style:solid;border-width:1px;border-color:var(--csg-border);flex-direction:column;display:flex}._csg-color-input-wrapper{align-items:center;gap:var(--main-space-3);display:flex}._csg-color-picker{border-radius:var(--csg-radius);cursor:pointer;background:0 0;border:none;flex-shrink:0;width:56px;height:56px;padding:0}._csg-color-picker::-webkit-color-swatch-wrapper{padding:0}._csg-color-picker::-webkit-color-swatch{border-radius:var(--csg-radius);box-shadow:var(--csg-shadow), inset 0 0 0 1px #0000001a;border:none}._csg-color-picker::-moz-color-swatch{border-radius:var(--csg-radius);box-shadow:var(--csg-shadow), inset 0 0 0 1px #0000001a;border:none}._csg-hex-input{max-width:140px;padding:var(--main-space-3) var(--main-space-4);font-size:var(--main-text-base);font-family:var(--main-font-mono);text-transform:uppercase;color:var(--csg-text);background:var(--csg-bg);border-style:solid;border-width:2px;border-color:var(--csg-border);border-radius:var(--csg-radius);flex:1;font-weight:600;transition:border-color .15s,box-shadow .15s}._csg-hex-input:focus{border-color:var(--csg-primary);outline:none;box-shadow:0 0 0 3px #6366f126}._csg-controls{gap:var(--main-space-4);flex-wrap:wrap;display:flex}._csg-control-group{align-items:center;gap:var(--main-space-2);display:flex}._csg-label{font-size:var(--main-text-sm);color:var(--csg-text-muted);font-weight:500}._csg-select{padding:var(--main-space-2) var(--main-space-8) var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm);color:var(--csg-text);background-color:var(--csg-bg);border-style:solid;border-width:1px;border-color:var(--csg-border);border-radius:var(--csg-radius);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 .5rem center;background-repeat:no-repeat;transition:border-color .15s}._csg-select:hover{border-color:var(--csg-border-hover)}._csg-select:focus{border-color:var(--csg-primary);outline:none}._csg-btn{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-4);font-size:var(--main-text-sm);border-radius:var(--csg-radius);cursor:pointer;border:none;font-weight:500;transition:opacity .15s,background-color .15s;display:inline-flex}._csg-btn-icon{background:var(--csg-bg-hover);width:44px;height:44px;color:var(--csg-text-muted);border-style:solid;border-width:1px;border-color:var(--csg-border);padding:0}._csg-btn-icon:hover{background:var(--csg-border);color:var(--csg-text)}._csg-btn-primary{background:var(--csg-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._csg-btn-primary:hover{opacity:.9}@media (max-width:480px){._csg-color-input-wrapper{flex-wrap:wrap}._csg-hex-input{flex:1;min-width:100px}}._csg-palette-wrapper{gap:var(--main-space-4);flex-direction:column;display:flex}._csg-palette-section{background:var(--csg-bg);border-radius:var(--csg-radius-lg);box-shadow:var(--csg-shadow);border-style:solid;border-width:1px;border-color:var(--csg-border);overflow:hidden}._csg-section-header{padding:var(--main-space-3) var(--main-space-4);background:var(--csg-bg-hover);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--csg-border);justify-content:space-between;align-items:center;display:flex}._csg-section-title{font-size:var(--main-text-sm);color:var(--csg-text);font-weight:600}._csg-section-hint{font-size:var(--main-text-xs);color:var(--csg-text-muted)}._csg-palette-row{min-height:80px;display:flex;overflow-x:auto}._csg-swatch{cursor:pointer;flex-direction:column;flex:1;min-width:60px;display:flex;position:relative}._csg-swatch-color{flex:1;min-height:60px;position:relative}._csg-swatch-info{padding:var(--main-space-2);text-align:center;background:var(--csg-bg);border-top-style:solid;border-top-width:1px;border-top-color:var(--csg-border)}._csg-swatch-hex{font-size:var(--main-text-xs);font-family:var(--main-font-mono);color:var(--csg-text);font-weight:500;display:block}._csg-swatch-percent{color:var(--csg-text-muted);margin-top:2px;font-size:10px;display:block}._csg-copy-indicator{color:var(--csg-text);padding:var(--main-space-2) var(--main-space-3);border-radius:var(--csg-radius);font-size:var(--main-text-xs);align-items:center;gap:var(--main-space-1);box-shadow:var(--csg-shadow-lg);pointer-events:none;background:#fffffff2;font-weight:500;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._csg-swatch._csg-copied ._csg-copy-indicator{display:flex}._csg-base-section{justify-content:center;display:flex}._csg-base-color{align-items:center;gap:var(--main-space-4);background:var(--csg-bg);padding:var(--main-space-4);border-radius:var(--csg-radius-lg);box-shadow:var(--csg-shadow-lg);border-style:solid;border-width:2px;border-color:var(--csg-primary);display:flex}._csg-base-swatch{border-radius:var(--csg-radius);width:64px;height:64px;box-shadow:var(--csg-shadow)}._csg-base-info{gap:var(--main-space-1);flex-direction:column;display:flex}._csg-base-label{font-size:var(--main-text-xs);color:var(--csg-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}._csg-base-hex{font-size:var(--main-text-lg);font-family:var(--main-font-mono);color:var(--csg-text);font-weight:700}@media (max-width:768px){._csg-palette-row{flex-wrap:wrap}._csg-swatch{flex:0 0 20%;min-width:20%}._csg-section-header{align-items:flex-start;gap:var(--main-space-1);flex-direction:column}}@media (max-width:480px){._csg-swatch{flex:0 0 25%;min-width:25%}._csg-base-color{text-align:center;flex-direction:column}._csg-base-info{align-items:center}}._csg-export-section{justify-content:center;display:flex}._csg-export-wrapper{position:relative}._csg-export-dropdown{top:calc(100% + var(--main-space-2));background:var(--csg-bg);border-radius:var(--csg-radius);min-width:180px;box-shadow:var(--csg-shadow-lg);border-style:solid;border-width:1px;border-color:var(--csg-border);padding:var(--main-space-2);z-index:100;display:none;position:absolute;left:50%;transform:translate(-50%)}._csg-export-dropdown._csg-open{display:block}._csg-export-option{align-items:center;gap:var(--main-space-2);width:100%;padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-sm);color:var(--csg-text);border-radius:var(--main-radius);cursor:pointer;text-align:left;background:0 0;border:none;transition:background-color .15s;display:flex}._csg-export-option:hover{background:var(--csg-bg-hover)}