:root{--cs-primary:var(--main-primary);--cs-primary-rgb:99, 102, 241;--cs-text:#1e293b;--cs-text-muted:#64748b;--cs-bg:#fff;--cs-bg-secondary:#f8fafc;--cs-border:#e2e8f0;--cs-border-hover:#cbd5e1;--cs-radius:var(--main-radius);--cs-radius-lg:var(--main-radius-lg);--cs-shadow:0 1px 3px #00000014;--cs-shadow-md:0 4px 12px #0000001a;--cs-danger:#ef4444;--cs-success:#10b981}._cs-container{min-height:400px}._cs-toolbar{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-3) var(--main-space-4);background:var(--cs-bg);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow);margin-bottom:var(--main-space-4);display:flex}._cs-toolbar-left,._cs-toolbar-right{align-items:center;gap:var(--main-space-2);display:flex}._cs-separator{background:var(--cs-border);width:1px;height:20px;margin:0 var(--main-space-1)}._cs-layout{gap:var(--main-space-5);align-items:flex-start;display:flex}._cs-preview-area{gap:var(--main-space-2);flex-direction:column;flex:1;min-width:0;display:flex}._cs-controls{gap:var(--main-space-4);flex-direction:column;width:280px;min-width:280px;display:flex}@media (max-width:768px){._cs-container{padding-left:1rem;padding-right:1rem}._cs-layout{flex-direction:column}._cs-controls{width:100%;min-width:0}._cs-toolbar{flex-wrap:wrap}}._cs-upload-zone{background:var(--cs-bg);border-style:dashed;border-width:2px;border-color:var(--cs-border);border-radius:var(--cs-radius-lg);padding:var(--main-space-12) var(--main-space-6);text-align:center;cursor:pointer;box-shadow:var(--cs-shadow)}._cs-upload-zone:hover{border-color:var(--cs-primary);background:rgba(var(--cs-primary-rgb), .02)}._cs-upload-zone._cs-dragover{border-color:var(--cs-primary);background:rgba(var(--cs-primary-rgb), .05)}._cs-upload-content{align-items:center;gap:var(--main-space-3);color:var(--cs-text-muted);flex-direction:column;display:flex}._cs-upload-content svg{color:var(--cs-border-hover)}._cs-upload-title{font-size:var(--main-text-base);color:var(--cs-text);margin:0;font-weight:500}._cs-upload-hint{font-size:var(--main-text-xs);color:var(--cs-text-muted);margin:0}._cs-canvas-wrapper{background:var(--cs-bg-secondary);border-radius:var(--cs-radius-lg);min-height:300px;box-shadow:var(--cs-shadow);border-style:solid;border-width:1px;border-color:var(--cs-border);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}._cs-canvas-wrapper canvas{max-width:100%;max-height:70vh;display:block}._cs-canvas-wrapper._cs-pick-active{cursor:crosshair}._cs-canvas-wrapper._cs-brush-active{cursor:none}._cs-brush-cursor{pointer-events:none;z-index:9999;border:2px solid #6366f1cc;border-radius:50%;display:none;position:fixed;box-shadow:0 0 0 1px #ffffff80}._cs-info-bar{font-size:var(--main-text-xs);color:var(--cs-text-muted);padding:0 var(--main-space-1);justify-content:space-between;align-items:center;min-height:20px;display:flex}._cs-btn-icon{border-radius:var(--cs-radius);width:34px;height:34px;color:var(--cs-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._cs-btn-icon:hover{background:var(--cs-bg-secondary);color:var(--cs-text)}._cs-btn-icon._cs-active{background:rgba(var(--cs-primary-rgb), .1);color:var(--cs-primary)}._cs-btn-primary{align-items:center;gap:var(--main-space-2);border-radius:var(--cs-radius);background:var(--cs-primary);color:#fff;font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;border:none;padding:.5rem 1rem;font-weight:500;display:inline-flex}._cs-btn-primary:hover{opacity:.9}._cs-card{background:var(--cs-bg);border-radius:var(--cs-radius-lg);padding:var(--main-space-4);box-shadow:var(--cs-shadow);border-style:solid;border-width:1px;border-color:var(--cs-border)}._cs-card-title{font-size:var(--main-text-sm);color:var(--cs-text);margin-bottom:var(--main-space-3);font-weight:600}._cs-slider-section{margin-bottom:var(--main-space-3)}._cs-slider-section:last-child{margin-bottom:0}._cs-slider-header{font-size:var(--main-text-xs);color:var(--cs-text-muted);margin-bottom:var(--main-space-2);justify-content:space-between;align-items:center;display:flex}._cs-slider-value{color:var(--cs-primary);font-weight:600;font-size:var(--main-text-xs)}._cs-slider{-webkit-appearance:none;appearance:none;background:var(--cs-border);border-radius:3px;outline:none;width:100%;height:6px}._cs-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--cs-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--cs-primary-rgb), .3);border-radius:50%}._cs-slider::-moz-range-thumb{background:var(--cs-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--cs-primary-rgb), .3);border:none;border-radius:50%}._cs-color-list{gap:var(--main-space-2);flex-direction:column;min-height:40px;display:flex}._cs-color-empty{font-size:var(--main-text-xs);color:var(--cs-text-muted);text-align:center;padding:var(--main-space-3) 0}._cs-color-item{align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);background:var(--cs-bg-secondary);border-radius:var(--cs-radius);font-size:var(--main-text-sm);display:flex}._cs-color-swatch{border-style:solid;border-width:1px;border-color:var(--cs-border);border-radius:4px;flex-shrink:0;width:24px;height:24px}._cs-color-hex{color:var(--cs-text);font-family:var(--main-font-mono);font-size:var(--main-text-xs);flex:1}._cs-color-remove{width:22px;height:22px;color:var(--cs-text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._cs-color-remove:hover{color:var(--cs-danger);background:#ef444414}._cs-output-row{gap:var(--main-space-3);flex-direction:column;display:flex}._cs-select{border-radius:var(--cs-radius);border-style:solid;border-width:1px;border-color:var(--cs-border);background:var(--cs-bg);width:100%;color:var(--cs-text);font-size:var(--main-text-sm);cursor:pointer;outline:none;padding:.5rem .75rem}._cs-select:focus{border-color:var(--cs-primary);box-shadow:0 0 0 2px rgba(var(--cs-primary-rgb), .15)}@media (max-width:768px){._cs-canvas-wrapper{min-height:200px}._cs-canvas-wrapper canvas{max-height:50vh}}