:root{--tpm-primary:var(--main-primary);--tpm-primary-rgb:var(--main-primary-rgb);--tpm-text:var(--main-gray-800);--tpm-text-muted:var(--main-gray-500);--tpm-bg:var(--main-bg-primary);--tpm-bg-secondary:var(--main-gray-50);--tpm-border:var(--main-gray-200);--tpm-border-hover:var(--main-gray-300);--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:var(--main-error);--tpm-danger-rgb:var(--main-error-rgb);--tpm-success:var(--main-success);--tpm-checker-light:var(--main-bg-primary);--tpm-checker-dark:var(--main-gray-200);--tpm-btn-text-on-primary:#fff}._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:.75rem;padding-right:.75rem}._tpm-layout{gap:var(--main-space-3);flex-direction:column}._tpm-controls{gap:var(--main-space-3);width:100%;min-width:0}._tpm-toolbar{gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);margin-bottom:var(--main-space-3);flex-wrap:wrap}._tpm-toolbar-left,._tpm-toolbar-right{flex-wrap:wrap}._tpm-toolbar-right{flex:100%}._tpm-toolbar-right ._tpm-btn-primary{flex:1;justify-content:center}}@media (max-width:480px){._tpm-container{padding-left:.5rem;padding-right:.5rem}._tpm-toolbar{padding:var(--main-space-2)}}._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);-webkit-tap-highlight-color:transparent}._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}@media (max-width:768px){._tpm-upload-zone{padding:var(--main-space-8) var(--main-space-4)}._tpm-upload-content svg{width:40px;height:40px}._tpm-upload-title{font-size:var(--main-text-sm)}}._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);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-size:16px 16px;justify-content:center;align-items:center;display:flex;overflow:hidden}._tpm-canvas-wrapper canvas{touch-action:none;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{border-style:solid;border-width:2px;border-color:rgba(var(--tpm-primary-rgb), .8);pointer-events:none;z-index:9999;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;-webkit-tap-highlight-color:transparent;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:var(--tpm-btn-text-on-primary);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;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:28px;height:28px;color:var(--tpm-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;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:rgba(var(--tpm-danger-rgb), .08)}@media (max-width:768px){._tpm-canvas-wrapper{min-height:220px}._tpm-canvas-wrapper canvas{max-height:55vh}._tpm-btn-icon{width:40px;height:40px}._tpm-btn-primary{min-height:44px;font-size:var(--main-text-base);padding:.625rem 1rem}._tpm-card{padding:var(--main-space-3)}._tpm-slider{height:8px}._tpm-slider::-webkit-slider-thumb{width:24px;height:24px}._tpm-slider::-moz-range-thumb{width:24px;height:24px}._tpm-checkbox-label{padding:var(--main-space-1) 0;font-size:var(--main-text-base)}._tpm-checkbox-label input[type=checkbox]{width:20px;height:20px}._tpm-color-item{padding:var(--main-space-3)}._tpm-color-swatch{width:28px;height:28px}._tpm-color-hex{font-size:var(--main-text-sm)}._tpm-color-remove{width:36px;height:36px}._tpm-info-bar{gap:var(--main-space-1);flex-wrap:wrap}}@media (max-width:480px){._tpm-canvas-wrapper canvas{max-height:50vh}._tpm-btn-primary{font-size:var(--main-text-sm);padding:.5rem .75rem}}