:root{--tpm-primary:var(--main-primary);--tpm-primary-rgb:99, 102, 241;--tpm-text:#1e293b;--tpm-text-muted:#64748b;--tpm-bg:#fff;--tpm-bg-secondary:#f8fafc;--tpm-border:#e2e8f0;--tpm-border-hover:#cbd5e1;--tpm-radius:var(--main-radius);--tpm-radius-lg:var(--main-radius-lg);--tpm-shadow:0 1px 3px #00000014;--tpm-shadow-md:0 4px 12px #0000001a;--tpm-danger:#ef4444;--tpm-success:#10b981;--tpm-checker-light:#fff;--tpm-checker-dark:#e2e8f0}._tpm-container{min-height:400px}._tpm-toolbar{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-3) var(--main-space-4);background:var(--tpm-bg);border-radius:var(--tpm-radius-lg);box-shadow:var(--tpm-shadow);margin-bottom:var(--main-space-4);display:flex}._tpm-toolbar-left,._tpm-toolbar-right{align-items:center;gap:var(--main-space-2);display:flex}._tpm-separator{background:var(--tpm-border);width:1px;height:20px;margin:0 var(--main-space-1)}._tpm-layout{gap:var(--main-space-5);align-items:flex-start;display:flex}._tpm-preview-area{gap:var(--main-space-2);flex-direction:column;flex:1;min-width:0;display:flex}._tpm-controls{gap:var(--main-space-4);flex-direction:column;width:280px;min-width:280px;display:flex}@media (max-width:768px){._tpm-container{padding-left:1rem;padding-right:1rem}._tpm-layout{flex-direction:column}._tpm-controls{width:100%;min-width:0}._tpm-toolbar{flex-wrap:wrap}}._tpm-upload-zone{background:var(--tpm-bg);border-style:dashed;border-width:2px;border-color:var(--tpm-border);border-radius:var(--tpm-radius-lg);padding:var(--main-space-12) var(--main-space-6);text-align:center;cursor:pointer;box-shadow:var(--tpm-shadow)}._tpm-upload-zone:hover{border-color:var(--tpm-primary);background:rgba(var(--tpm-primary-rgb), .02)}._tpm-upload-zone._tpm-dragover{border-color:var(--tpm-primary);background:rgba(var(--tpm-primary-rgb), .05)}._tpm-upload-content{align-items:center;gap:var(--main-space-3);color:var(--tpm-text-muted);flex-direction:column;display:flex}._tpm-upload-content svg{color:var(--tpm-border-hover)}._tpm-upload-title{font-size:var(--main-text-base);color:var(--tpm-text);margin:0;font-weight:500}._tpm-upload-hint{font-size:var(--main-text-xs);color:var(--tpm-text-muted);margin:0}._tpm-canvas-wrapper{background-image:repeating-conic-gradient(var(--tpm-checker-light) 0% 25%, var(--tpm-checker-dark) 0% 50%);border-radius:var(--tpm-radius-lg);min-height:300px;box-shadow:var(--tpm-shadow);border-style:solid;border-width:1px;border-color:var(--tpm-border);background-size:16px 16px;justify-content:center;align-items:center;display:flex;overflow:hidden}._tpm-canvas-wrapper canvas{max-width:100%;max-height:70vh;display:block}._tpm-canvas-wrapper._tpm-eyedropper-active{cursor:crosshair}._tpm-canvas-wrapper._tpm-eraser-active{cursor:none}._tpm-eraser-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}._tpm-info-bar{font-size:var(--main-text-xs);color:var(--tpm-text-muted);padding:0 var(--main-space-1);justify-content:space-between;align-items:center;min-height:20px;display:flex}._tpm-btn-icon{border-radius:var(--tpm-radius);width:34px;height:34px;color:var(--tpm-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._tpm-btn-icon:hover{background:var(--tpm-bg-secondary);color:var(--tpm-text)}._tpm-btn-icon._tpm-active{background:rgba(var(--tpm-primary-rgb), .1);color:var(--tpm-primary)}._tpm-btn-primary{align-items:center;gap:var(--main-space-2);border-radius:var(--tpm-radius);background:var(--tpm-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}._tpm-btn-primary:hover{opacity:.9}._tpm-card{background:var(--tpm-bg);border-radius:var(--tpm-radius-lg);padding:var(--main-space-4);box-shadow:var(--tpm-shadow);border-style:solid;border-width:1px;border-color:var(--tpm-border)}._tpm-card-title{font-size:var(--main-text-sm);color:var(--tpm-text);margin-bottom:var(--main-space-3);font-weight:600}._tpm-tolerance-section{margin-bottom:var(--main-space-3)}._tpm-tolerance-header{font-size:var(--main-text-xs);color:var(--tpm-text-muted);margin-bottom:var(--main-space-2);justify-content:space-between;align-items:center;display:flex}._tpm-tolerance-value{color:var(--tpm-primary);font-weight:600;font-size:var(--main-text-xs)}._tpm-slider{-webkit-appearance:none;appearance:none;background:var(--tpm-border);border-radius:3px;outline:none;width:100%;height:6px}._tpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--tpm-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--tpm-primary-rgb), .3);border-radius:50%}._tpm-slider::-moz-range-thumb{background:var(--tpm-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--tpm-primary-rgb), .3);border:none;border-radius:50%}._tpm-option-row{align-items:center;display:flex}._tpm-checkbox-label{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--tpm-text);cursor:pointer;display:flex}._tpm-checkbox-label input[type=checkbox]{accent-color:var(--tpm-primary);width:16px;height:16px}._tpm-color-list{gap:var(--main-space-2);flex-direction:column;min-height:40px;display:flex}._tpm-color-empty{font-size:var(--main-text-xs);color:var(--tpm-text-muted);text-align:center;padding:var(--main-space-3) 0}._tpm-color-item{align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);background:var(--tpm-bg-secondary);border-radius:var(--tpm-radius);font-size:var(--main-text-sm);display:flex}._tpm-color-swatch{border-style:solid;border-width:1px;border-color:var(--tpm-border);border-radius:4px;flex-shrink:0;width:24px;height:24px}._tpm-color-hex{color:var(--tpm-text);font-family:var(--main-font-mono);font-size:var(--main-text-xs);flex:1}._tpm-color-remove{width:22px;height:22px;color:var(--tpm-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}._tpm-color-remove:hover{color:var(--tpm-danger);background:#ef444414}@media (max-width:768px){._tpm-canvas-wrapper{min-height:200px}._tpm-canvas-wrapper canvas{max-height:50vh}}