.patch-shape-item.selected::after,.patch-texture-item.selected::after{content:'\f00c';font-family:'Font Awesome 5 Free';font-weight:900;right:7px}.patch-builder-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:2500;backdrop-filter:blur(4px)}.patch-builder-modal.show{display:flex!important}.patch-builder-content{background:#fff;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.45);width:960px;max-width:96vw;height:88vh;max-height:800px;display:flex;flex-direction:column;overflow:hidden}.patch-builder-header{background:#593921;color:#fff;padding:.875rem 1.5rem;display:flex;align-items:center;gap:1rem;flex-shrink:0}.patch-builder-header h5{margin:0;font-size:1rem;font-weight:700}.patch-builder-close{margin-left:auto;background:0 0;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background .2s;line-height:1}.patch-builder-close:hover{background:rgba(255,255,255,.15)}.patch-progress-bar{display:flex;align-items:center;padding:.875rem 1.5rem;background:#faf7f4;border-bottom:1px solid #e5e7eb;flex-shrink:0}.patch-footer-right,.patch-progress-step,.patch-range-row{display:flex;align-items:center;gap:.5rem}.patch-progress-step:not(:last-child){flex:1}.patch-progress-dot{width:30px;height:30px;border-radius:50%;border:2px solid #d1d5db;background:#fff;color:#9ca3af;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s}.patch-progress-dot.active{border-color:#593921;background:#593921;color:#fff}.patch-progress-dot.done{border-color:#10b981;background:#10b981;color:#fff}.patch-progress-label{font-size:.78rem;font-weight:600;color:#9ca3af;white-space:nowrap;transition:color .25s}.patch-grid-loading,.patch-grid-loading-center{font-size:.85rem;color:#9ca3af;text-align:center}.patch-progress-label.active{color:#593921}.patch-progress-label.done{color:#10b981}.patch-progress-line{flex:1;height:2px;background:#e5e7eb;margin:0 .75rem;transition:background .3s}.patch-progress-line.done{background:#10b981}.patch-steps-wrap{flex:1;min-height:0;position:relative;overflow:hidden}.patch-step-panel{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}.patch-step-panel.active{display:flex}.patch-step-heading{padding:1rem 1.5rem .5rem;flex-shrink:0}.patch-step-heading h6{margin:0 0 .2rem;font-size:1rem;font-weight:700;color:#1f2937}.patch-step-heading p{margin:0;font-size:.8rem;color:#6b7280}.patch-grid-scroll{flex:1;overflow-y:auto;padding:.75rem 1.5rem 1.25rem;position:relative}.patch-grid-scroll::-webkit-scrollbar{width:6px}.patch-grid-scroll::-webkit-scrollbar-track{background:0 0}.patch-grid-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.patch-grid-scroll::-webkit-scrollbar-thumb:hover{background:#9ca3af}.patch-grid-loading-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:.75rem;min-height:180px;width:100%;position:absolute;top:0;bottom:0;height:fit-content;margin:auto}.patch-shape-item,.patch-texture-item{height:100px;transition:.2s;cursor:pointer;position:relative}.patch-grid-loading-center i{color:#593921;opacity:.75}.patch-grid-loading{padding:2rem}.patch-shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.patch-shape-item{border:2px solid #e5e7eb;border-radius:8px;padding:.5rem;background:#f9fafb;display:flex;align-items:center;justify-content:center}.patch-shape-item:hover{border-color:#593921;background:#fff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(89,57,33,.15)}.patch-shape-item.selected{border-color:#593921;background:rgba(89,57,33,.05);box-shadow:0 0 0 3px rgba(89,57,33,.18)}.patch-shape-item.selected::after{position:absolute;top:5px;font-size:.6rem;color:#593921}.patch-shape-item img{max-width:100%;max-height:88px;object-fit:contain}.patch-texture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem}.patch-texture-item{border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.patch-texture-item:hover{border-color:#593921;transform:translateY(-2px);box-shadow:0 4px 14px rgba(89,57,33,.15)}.patch-texture-item.selected{border-color:#593921;box-shadow:0 0 0 3px rgba(89,57,33,.18)}.patch-texture-item.selected::after{position:absolute;top:6px;font-size:.65rem;color:#fff;background:#593921;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:18px;text-align:center}.patch-texture-img{flex:1;min-height:0}.patch-texture-img img{width:100%;height:100%;object-fit:cover;display:block}.patch-step3-body{flex:1;min-height:0;display:flex;overflow:hidden}.patch-text-col{width:300px;flex-shrink:0;border-right:1px solid #e5e7eb;overflow-y:auto;padding:.75rem .875rem;display:flex;flex-direction:column;gap:.5rem;background:#fafafa;position:relative;z-index:10;pointer-events:all}.patch-text-col::-webkit-scrollbar{width:5px}.patch-text-col::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.patch-preview-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f0ede8;gap:.5rem;padding:1rem;position:relative;z-index:1;pointer-events:all}.patch-preview-title{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af}.patch-preview-hint{font-size:.67rem;color:#b3a89a;text-align:center;max-width:300px}.patch-canvas-wrap{background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.13);padding:.625rem;position:relative;display:flex;align-items:center;justify-content:center;overflow:auto}#patchPreviewCanvas{display:block;border-radius:4px;max-width:100%;max-height:100%;cursor:grab;transform-origin:center center;transition:transform .15s}#patchPreviewCanvas:active{cursor:grabbing}.patch-saving-overlay{position:absolute;inset:0;background:rgba(255,255,255,.88);display:none;align-items:center;justify-content:center;border-radius:8px;flex-direction:column;gap:.5rem;z-index:10;pointer-events:none}.patch-saving-overlay.show{display:flex;pointer-events:all}.patch-saving-overlay span{font-size:.8rem;color:#593921;font-weight:600}.patch-zoom-controls{display:flex;gap:.25rem;background:rgba(255,255,255,.9);padding:.3rem;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.patch-btn-add-text,.patch-element-buttons{gap:.375rem;display:flex}.patch-zoom-btn{padding:.3rem .55rem;border:1px solid #e5e7eb;background:#fff;border-radius:4px;cursor:pointer;font-size:.72rem;font-weight:600;transition:.2s;min-width:32px;display:flex;align-items:center;justify-content:center;color:#374151}.patch-zoom-btn:hover{background:#f9fafb;border-color:#593921;transform:translateY(-1px)}.patch-btn-add-text{flex:1;padding:.5rem .375rem;border:1px solid #593921;background:#fff;color:#593921;border-radius:6px;font-weight:600;cursor:pointer;transition:.2s;align-items:center;justify-content:center;font-size:.8rem}.patch-btn-add-text:hover,.patch-btn-next,.patch-btn-save{background:#593921;color:#fff}.patch-accordion-item{border:1px solid #e5e7eb;border-radius:5px;overflow:visible}.patch-accordion-header{background:#f9fafb;color:#374151;font-weight:600;padding:.45rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;gap:.25rem;border-radius:4px;user-select:none;transition:background .15s}.patch-accordion-header:hover,.patch-btn-back:hover,.patch-btn-cancel:hover,.patch-element-item:hover{background:#f3f4f6}.patch-acc-arrow{margin-left:auto;font-size:.65rem;transition:transform .2s}.patch-accordion-body{padding:.625rem .75rem;display:block}.patch-ctrl-group{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.6rem}.patch-ctrl-group:last-child{margin-bottom:0}.patch-ctrl-label{font-size:.72rem;font-weight:600;color:#374151}.patch-text-col input[type=text],.patch-text-col select,.patch-text-col textarea{width:100%;padding:.38rem .55rem;border:1px solid #d1d5db;border-radius:5px;font-size:.8rem;background:#fff;transition:border-color .2s;position:relative;z-index:11;pointer-events:all;-webkit-appearance:auto;appearance:auto;box-sizing:border-box}.patch-text-col textarea{resize:vertical;min-height:48px;font-family:inherit}.patch-text-col input:focus,.patch-text-col select:focus,.patch-text-col textarea:focus{outline:0;border-color:#593921;box-shadow:0 0 0 2px rgba(89,57,33,.1)}.patch-char-counter{font-size:.65rem;color:#9ca3af;text-align:right;margin-top:.15rem}.patch-char-counter.warning{color:#e67e22}.patch-btn-add-canvas{width:100%;padding:.45rem .75rem;border:none;background:#593921;color:#fff;border-radius:6px;font-weight:600;cursor:pointer;font-size:.78rem;transition:.2s;margin-top:.4rem}.patch-align-btn,.patch-style-btn{padding:.35rem;background:#fff;transition:.2s;position:relative;z-index:11;pointer-events:all;cursor:pointer}.patch-btn-add-canvas:hover{background:#7a4e2c;transform:translateY(-1px)}.patch-style-row{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}.patch-style-btn{border:1px solid #e5e7eb;border-radius:5px;font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.2rem}.patch-align-btn:hover,.patch-style-btn:hover{background:#f9fafb}.patch-align-btn.active,.patch-style-btn.active{background:#593921;color:#fff;border-color:#593921}.patch-align-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}.patch-align-btn{border:1px solid #e5e7eb;border-radius:4px;font-size:.78rem;display:flex;align-items:center;justify-content:center}.patch-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:.3rem}.patch-color-swatch{width:24px;height:24px;border-radius:4px;border:2px solid #e5e7eb;cursor:pointer;transition:.2s;position:relative;z-index:11;pointer-events:all}.patch-color-swatch.selected{border-color:#593921;box-shadow:0 0 0 2px rgba(89,57,33,.3);transform:scale(1.15)}.patch-range-row label{font-size:.71rem;color:#6b7280;white-space:nowrap;min-width:55px;margin:0}.patch-range-row input[type=range]{flex:1;height:4px;accent-color:#593921;position:relative;z-index:11;pointer-events:all;margin:0}.patch-range-val{font-size:.71rem;font-weight:700;color:#593921;min-width:36px;text-align:right}.patch-elements-list{max-height:150px;overflow-y:auto}.patch-element-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .5rem;background:#f9fafb;border-radius:4px;margin-bottom:.25rem;border:1px solid transparent;cursor:pointer;font-size:.78rem;transition:.15s}.patch-badge,.patch-btn{cursor:pointer;transition:.2s}.patch-element-item.active{background:rgba(89,57,33,.08);border-color:#593921}.patch-element-info{display:flex;align-items:center;gap:.375rem;font-size:.78rem;color:#374151}.patch-element-item button{background:0 0;border:none;cursor:pointer;padding:.15rem .25rem}.patch-divider{height:1px;background:#e5e7eb;margin:.1rem 0}.patch-selection-summary{padding:.5rem 1.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0}.patch-badge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(89,57,33,.08);border:1px solid rgba(89,57,33,.2);color:#593921;font-size:.7rem;font-weight:600;padding:.22rem .6rem;border-radius:20px;user-select:none}.patch-badge:hover{background:rgba(89,57,33,.15)}.patch-badge i{font-size:.6rem;opacity:.7}.patch-builder-footer{padding:.75rem 1.5rem;border-top:1px solid #e5e7eb;background:#faf7f4;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:1rem}.patch-step-indicator{font-size:.75rem;color:#9ca3af;font-weight:500}.patch-btn{padding:.5rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:600;border:none;display:inline-flex;align-items:center;gap:.375rem}.patch-btn-back,.patch-btn-cancel{background:#fff;border:1px solid #d1d5db;color:#374151}.patch-btn-next:hover,.patch-btn-save:hover{background:#7a4e2c;transform:translateY(-1px);box-shadow:0 2px 8px rgba(89,57,33,.3)}.patch-btn-next:disabled,.patch-btn-save:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width:768px){.patch-builder-content{height:96vh;max-height:none;border-radius:8px}.patch-shape-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.patch-texture-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.patch-step3-body{flex-direction:column}.patch-text-col{width:100%;max-height:45%;border-right:none;border-bottom:1px solid #e5e7eb}.patch-preview-col{padding:.75rem;min-height:250px}.patch-progress-label{display:none}}#patchBuilderModal button,#patchBuilderModal input,#patchBuilderModal select,#patchBuilderModal textarea{pointer-events:all!important;position:relative!important}