/* ===== ROOT THEME VARIABLES ===== */
        :root {
            --bg-primary: #0d0d1a;
            --bg-secondary: #141425;
            --bg-card: #1a1a2e;
            --bg-input: #0d0d1a;
            --border-color: #2a2a3e;
            --text-primary: #eee;
            --text-secondary: #aaa;
            --text-muted: #555;
            --accent: #ff6b35;
            --accent-hover: #e55a2b;
            --swatch-border: #444;
            --brand-card-bg: #0d0d1a;
            --brand-header-bg: #12121f;
            --badge-bg: #2a2a3e;
            --badge-text: #aaa;
            --tip-bg: rgba(255,107,53,0.06);
            --tip-border: rgba(255,107,53,0.08);
            --panel-bg: #1a1a2e;
        }
        [data-theme="light"] {
            --bg-primary: #f0f2f5;
            --bg-secondary: #ffffff;
            --bg-card: #e9ecef;
            --bg-input: #f8f9fa;
            --border-color: #d0d4d8;
            --text-primary: #1a1a2e;
            --text-secondary: #333;
            --text-muted: #777;
            --accent: #d45a2a;
            --accent-hover: #b84a20;
            --swatch-border: #bbb;
            --brand-card-bg: #f8f9fa;
            --brand-header-bg: #eef0f2;
            --badge-bg: #d0d4d8;
            --badge-text: #333;
            --tip-bg: rgba(212,90,42,0.08);
            --tip-border: rgba(212,90,42,0.12);
            --panel-bg: #e9ecef;
        }

        *{box-sizing:border-box;margin:0;padding:0}
        html,body{height:100%;overflow:hidden;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary)}
        .app-container{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--bg-primary);transition:background .25s}

        /* ===== VERTICAL TAB SIDEBAR ===== */
        #left-panel{display:flex;flex-direction:row;height:100%;flex-shrink:0;border-right:1px solid var(--border-color)}

        #vtab-rail{width:58px;min-width:58px;height:100%;background:var(--bg-card);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;flex-shrink:0}
        .vtab-btn{width:46px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;transition:all .18s;padding:0 2px}
        .vtab-btn i{font-size:17px;line-height:1}
        .vtab-btn:hover{background:rgba(255,107,53,0.08);color:var(--text-secondary)}
        .vtab-btn.active{background:rgba(255,107,53,0.14);color:var(--accent)}
        .vtab-btn.active i{color:var(--accent)}
        #vtab-utils{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border-color);width:100%}
        .vtab-util-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;transition:all .18s}
        .vtab-util-btn:hover{border-color:var(--accent);color:var(--accent)}

        #vtab-content{width:300px;min-width:300px;height:100%;background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden}
        #vtab-content-header{padding:7px 10px;background:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:6px;flex-shrink:0}
        #vtab-content-header h6{margin:0;font-size:12px;font-weight:600;color:var(--text-primary);flex:1}
        .vtab-pane{display:none;flex:1;overflow-y:auto;padding:8px 10px 12px}
        .vtab-pane.active{display:block}
        .vtab-pane::-webkit-scrollbar{width:4px}
        .vtab-pane::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
        .vtab-pane::-webkit-scrollbar-track{background:var(--bg-card)}

        /* ===== SINGLE PRODUCT MODE - HIDE GALLERY ===== */
        body.single-mode #productSelector,
        body.single-mode .mob-prod-btn,
        body.single-mode #mob-product-bar,
        body.single-mode .vtab-btn[data-vtab="gallery"],
        body.single-mode #vtab-pane-gallery,
        body.single-mode [onclick*="openFullGallery"] {
            display: none !important;
        }

        /* ===== PRODUCT GALLERY ===== */
        .product-gallery-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            padding: 4px 0;
        }
        .product-gallery-card {
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all .2s;
            position: relative;
        }
        .product-gallery-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(255,107,53,0.15);
        }
        .product-gallery-card.active {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent);
        }
        .product-gallery-card .thumb-wrap {
            position: relative;
            padding-top: 100%;
            background: var(--bg-input);
            overflow: hidden;
        }
        .product-gallery-card .thumb-wrap img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-gallery-card .product-label {
            padding: 4px 6px;
            font-size: 8px;
            font-weight: 600;
            color: var(--text-secondary);
            text-align: center;
            background: var(--bg-input);
            border-top: 1px solid var(--border-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .product-gallery-card .variant-badge {
            position: absolute;
            top: 4px;
            right: 4px;
            background: var(--accent);
            color: #fff;
            font-size: 6px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            letter-spacing: .5px;
        }
        .product-gallery-card .loaded-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            background: #2d8a4e;
            color: #fff;
            font-size: 6px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 8px;
            letter-spacing: .5px;
            display: none;
        }
        .product-gallery-card.active .loaded-badge {
            display: block;
        }
        .gallery-section-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .5px;
            margin: 8px 0 4px;
            padding: 0 2px;
        }
        .gallery-section-title:first-child { margin-top: 0; }

        /* ===== VIEW ALL PRODUCTS OVERLAY ===== */
        .view-all-products-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: var(--bg-primary);
            overflow-y: auto;
            padding: 20px;
            display: none;
        }
        .view-all-products-overlay.open { display: block; }
        .view-all-products-overlay .close-btn {
            position: fixed;
            top: 16px;
            right: 20px;
            font-size: 28px;
            color: var(--text-primary);
            cursor: pointer;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        .view-all-products-overlay .close-btn:hover {
            background: var(--accent);
            color: #fff;
        }
        .product-grid-full {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
            max-width: 1200px;
            margin: 60px auto 20px;
        }
        .product-grid-full .product-card {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid var(--border-color);
            transition: all .25s;
            cursor: pointer;
        }
        .product-grid-full .product-card:hover {
            transform: translateY(-4px);
            border-color: var(--accent);
            box-shadow: 0 8px 30px rgba(255,107,53,0.2);
        }
        .product-grid-full .product-card .thumb-wrap {
            padding-top: 100%;
            position: relative;
            background: var(--bg-input);
            overflow: hidden;
        }
        .product-grid-full .product-card .thumb-wrap img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-grid-full .product-card .info {
            padding: 10px 12px;
        }
        .product-grid-full .product-card .info .name {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .product-grid-full .product-card .info .variant {
            font-size: 10px;
            color: var(--text-muted);
        }
        .product-grid-full .product-card .info .customize-btn {
            margin-top: 6px;
            padding: 4px 12px;
            font-size: 10px;
            font-weight: 600;
            border: none;
            border-radius: 4px;
            background: var(--accent);
            color: #fff;
            cursor: pointer;
            transition: all .2s;
        }
        .product-grid-full .product-card .info .customize-btn:hover {
            background: var(--accent-hover);
        }

        .panel-body{flex:1;overflow-y:auto;padding:8px 10px 12px;background:var(--bg-secondary)}
        .panel-body::-webkit-scrollbar{width:4px}
        .panel-body::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
        .panel-body::-webkit-scrollbar-track{background:var(--bg-card)}
        #partsAccordion::-webkit-scrollbar{width:3px}
        #partsAccordion::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
        #partsAccordion::-webkit-scrollbar-track{transparent}

        .qbtn{font-size:10px;padding:4px 6px;border:none;border-radius:5px;font-weight:500;cursor:pointer;transition:all .2s;color:#fff}
        .qbtn i{font-size:12px;margin-right:3px}
        .qbtn-all{background:var(--accent)}
        .qbtn-all:hover{background:var(--accent-hover)}
        .qbtn-reset{background:#2a2a3e;color:var(--text-secondary)}
        .qbtn-reset:hover{background:#3a3a4e;color:#fff}
        .qbtn-save{background:#2d8a4e}
        .qbtn-save:hover{background:#237a42}
        .qbtn-copy{background:#f59e0b;color:#000}
        .qbtn-copy:hover{background:#d97706}

        .section-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:6px 0 3px}
        #partsAccordion{max-height:140px;overflow-y:auto;margin:4px 0 6px;border-radius:6px;background:var(--bg-input);padding:3px}
        .accordion-item{border:none;border-bottom:1px solid var(--border-color);background:transparent}
        .accordion-item:last-child{border-bottom:none}
        .accordion-button{background:transparent!important;padding:3px 6px;font-size:10px;font-weight:500;color:var(--text-secondary);box-shadow:none!important;border:none;border-radius:0!important;min-height:24px}
        .accordion-button:hover{background:rgba(255,107,53,0.05)!important}
        .accordion-button:focus{box-shadow:none!important}
        .accordion-button:not(.collapsed){color:var(--accent)!important}
        .accordion-button::after{background-size:.5rem;width:.5rem;height:.5rem}
        .accordion-body{padding:2px 4px 4px}
        .color-indicator{display:inline-block;width:14px;height:14px;border-radius:3px;border:2px solid var(--border-color);flex-shrink:0;margin-right:4px}
        .part-count{font-size:7px;color:var(--text-muted);margin-left:auto;background:var(--bg-card);padding:0 6px;border-radius:8px}

        .color-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:2px;width:100%;padding:2px 0}
        .color-swatch{width:100%;aspect-ratio:1/1;max-width:28px;max-height:28px;min-width:20px;min-height:20px;border-radius:50%;border:2px solid var(--swatch-border);cursor:pointer;transition:all .15s;position:relative;margin:0 auto}
        .color-swatch:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
        .color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:scale(1.08)}
        .color-swatch .check-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:8px;text-shadow:0 1px 3px rgba(0,0,0,0.6);display:none}
        .color-swatch.active .check-mark{display:block}
        .custom-color-wrap{display:flex;align-items:center;gap:4px;margin-top:3px}
        .custom-color-wrap input[type=color]{width:22px;height:22px;padding:1px;border-radius:3px;border:1px solid var(--border-color);background:transparent;cursor:pointer}
        .custom-color-wrap .custom-label{font-size:8px;color:var(--text-muted)}

        .ea-part-row{display:flex;align-items:center;gap:8px;padding:4px 2px 8px;border-bottom:1px solid var(--border-color);margin-bottom:6px}
        .ea-part-thumb{width:40px;height:40px;flex-shrink:0;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-input);display:flex;align-items:center;justify-content:center;overflow:hidden}
        .ea-part-thumb img{width:100%;height:100%;object-fit:contain}
        .ea-thumb-fallback{font-size:12px;color:var(--text-muted)}
        .ea-thumb-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-color);border-top-color:var(--accent);animation:ea-spin .7s linear infinite}
        @keyframes ea-spin{to{transform:rotate(360deg)}}
        .ea-part-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
        .ea-swatch-row{display:flex;align-items:center;gap:6px}
        .ea-current-swatch{width:16px;height:16px;border-radius:50%;border:2px solid var(--swatch-border);flex-shrink:0;cursor:default}
        .ea-swatch-label{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
        .ea-pattern-toggle{display:inline-flex;align-items:center;gap:5px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:20px;padding:2px 8px 2px 3px;cursor:pointer;transition:all .15s;align-self:flex-start}
        .ea-toggle-dot{width:14px;height:14px;border-radius:50%;background:var(--text-muted);transition:all .15s}
        .ea-toggle-text{font-size:8px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px}
        .ea-pattern-toggle.on{background:var(--accent);border-color:var(--accent)}
        .ea-pattern-toggle.on .ea-toggle-dot{background:#fff;transform:translateX(2px)}
        .ea-pattern-toggle.on .ea-toggle-text{color:#fff}


        /* Patterns tab */
        #patternsAccordion-desktop{max-height:none;overflow-y:auto;margin:4px 0 6px;border-radius:6px;background:var(--bg-input);padding:3px}
        .pattern-card{border-bottom:1px solid var(--border-color);padding:6px 4px 10px;margin-bottom:2px}
        .pattern-card:last-child{border-bottom:none}
        .pattern-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
        .pattern-card-head .ea-part-thumb{width:32px;height:32px}
        .pattern-card-title{flex:1;min-width:0;font-size:10px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .pattern-card-body{display:none}
        .pattern-card.on .pattern-card-body{display:block}
        .pattern-sublabel{font-size:8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;margin:6px 0 3px}
        .pattern-thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:5px;width:100%}
        .pattern-thumb{position:relative;aspect-ratio:1/1;border-radius:6px;border:2px solid var(--border-color);overflow:hidden;cursor:pointer;transition:all .15s;background:var(--bg-card)}
        .pattern-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
        .pattern-thumb:hover{transform:scale(1.06);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
        .pattern-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
        .pattern-thumb .pattern-check{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--accent);color:#fff;font-size:7px;align-items:center;justify-content:center;display:none}
        .pattern-thumb.active .pattern-check{display:flex}
        .pattern-empty{font-size:9px;color:var(--text-muted);padding:6px 2px}
        .pattern-scale-input{width:100%;accent-color:var(--accent);cursor:pointer;margin:2px 0 4px}
        .pattern-busy{margin-left:4px;display:inline-flex;vertical-align:middle}

        /* Chosen-design row (opens the pattern picker popup) */
        .pattern-chosen-row{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:6px;cursor:pointer;transition:border-color .15s}
        .pattern-chosen-row:hover{border-color:var(--accent)}
        .pattern-chosen-thumb{width:34px;height:34px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--bg-input);border:1px solid var(--border-color)}
        .pattern-chosen-thumb img{width:100%;height:100%;object-fit:cover;display:block}
        .pattern-chosen-label{flex:1;min-width:0;font-size:10px;font-weight:600;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .pattern-chosen-cta{font-size:9px;font-weight:600;color:var(--accent);white-space:nowrap;display:flex;align-items:center;gap:3px}

        /* ===== PATTERN PICKER POPUP (paginated, 50 per page) ===== */
        .ea-pattern-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:16px}
        .ea-pattern-modal.open{display:flex}
        .ea-pattern-modal-panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
        .ea-pattern-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-color);flex-shrink:0}
        .ea-pattern-modal-title{font-size:13px;font-weight:700;color:var(--text-primary)}
        .ea-pattern-modal-close{cursor:pointer;background:var(--bg-card);border:1px solid var(--border-color);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:16px}
        .ea-pattern-modal-close:hover{background:var(--accent);color:#fff}
        .ea-pattern-modal-body{padding:12px 14px;overflow-y:auto;flex:1}
        .ea-pattern-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
        .ea-pattern-modal-grid .pattern-thumb{aspect-ratio:1/1}
        .ea-pattern-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid var(--border-color);flex-shrink:0}
        .ea-pattern-page-info{font-size:10px;color:var(--text-muted);white-space:nowrap}
        .ea-pattern-page-btn{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:6px;padding:5px 10px;font-size:10px;font-weight:600;cursor:pointer}
        .ea-pattern-page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
        .ea-pattern-page-btn:disabled{opacity:.4;cursor:not-allowed}
        .tip{font-size:8px;color:var(--text-muted);margin-top:4px;padding:3px 6px;background:var(--tip-bg);border-radius:4px;border:1px solid var(--tip-border)}
        .tip i{color:var(--accent);margin-right:3px}

        #center-panel{flex:1;height:100%;background:var(--bg-primary);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
        #canvas-container{width:100%;height:100%;background:var(--bg-primary);position:relative;display:flex;align-items:center;justify-content:center}
        #loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-primary);background:rgba(0,0,0,0.7);padding:20px 30px;border-radius:10px;text-align:center;z-index:10;min-width:160px}
        #loading .spinner-border{width:1.5rem;height:1.5rem}

        .zone-tabs{display:flex;gap:3px;margin-bottom:8px;background:var(--bg-input);padding:3px;border-radius:6px;flex-wrap:wrap}
        .zone-tab{flex:1;text-align:center;padding:4px 6px;font-size:9px;font-weight:500;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:all .2s;min-width:40px}
        .zone-tab:hover{color:var(--text-secondary);background:var(--bg-card)}
        .zone-tab.active{color:#fff;background:var(--accent)}
        .zone-panel{display:none}
        .zone-panel.active{display:block}

        .brand-card{background:var(--brand-card-bg);border-radius:6px;margin-bottom:5px;border:1px solid var(--border-color);overflow:hidden}
        .brand-card-header{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;font-size:10px;font-weight:500;color:var(--text-secondary);background:var(--brand-header-bg)}
        .brand-card-header:hover{background:var(--bg-card)}
        .brand-card-header span{flex:1}
        .brand-card-toggle{font-size:8px;padding:1px 8px;border-radius:8px;border:none;cursor:pointer;font-weight:600;background:var(--badge-bg);color:var(--badge-text)}
        .brand-card-toggle.on{background:var(--accent);color:#fff}
        .brand-content{padding:6px 8px;background:var(--brand-card-bg)}

        .brand-type-tabs{display:flex;gap:3px;margin-bottom:6px;flex-wrap:wrap}
        .brand-type-tab{padding:2px 8px;font-size:8px;font-weight:500;color:var(--text-muted);cursor:pointer;border-radius:3px;background:var(--bg-input)}
        .brand-type-tab.active{color:#fff;background:var(--accent)}
        .brand-type-tab.multi-active{color:#fff;background:#2d8a4e}

        .logo-upload-area{position:relative;border:1px dashed var(--border-color);border-radius:4px;padding:6px;text-align:center;cursor:pointer;min-height:30px}
        .logo-upload-area label{font-size:8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px}
        .logo-upload-area label i{font-size:12px}
        .logo-upload-area input[type=file]{display:none}
        .logo-preview-img{max-height:30px;max-width:100%;margin-top:3px;border-radius:3px}
        .remove-btn{font-size:7px;padding:1px 6px;border:none;border-radius:3px;background:#ff4444;color:#fff;cursor:pointer;margin-top:3px}

        .text-input-group{display:flex;flex-direction:column;gap:3px}
        .text-input-group input[type=text],.text-input-group input[type=number]{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:10px;border-radius:3px;padding:3px 6px;width:100%}
        .text-input-group input:focus{border-color:var(--accent);outline:none}
        .font-row{display:flex;gap:3px;flex-wrap:wrap}
        .font-row select{flex:1;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:9px;border-radius:3px;padding:2px 4px}
        .font-row select:focus{border-color:var(--accent);outline:none}
        .font-row input[type=number]{width:60px;flex-shrink:0}
        .color-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
        .color-row input[type=color]{width:22px;height:22px;padding:1px;border-radius:3px;border:1px solid var(--border-color);background:transparent;cursor:pointer}
        .color-row label{font-size:8px;color:var(--text-muted)}

        .pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;margin-top:3px}
        .pos-field label{font-size:7px;color:var(--text-muted);display:block}
        .pos-field input[type=number]{width:100%;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:9px;border-radius:3px;padding:2px 4px}
        .pos-field .slider-wrap{margin-top:2px}
        .pos-field .slider-wrap input[type=range]{width:100%;height:2px;background:#444;border-radius:2px;outline:none;cursor:pointer}
        .pos-field .slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);cursor:pointer;border:1px solid var(--bg-card)}
        .pos-field .slider-wrap input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--accent);cursor:pointer}

        .apply-btn{width:100%;margin-top:4px;padding:3px;font-size:9px;font-weight:500;border:none;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
        .apply-btn:hover{background:var(--accent-hover)}
        .apply-btn.applied{background:#2d8a4e}

        .brand-controls{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
        .brand-controls .lock-btn{font-size:7px;padding:1px 6px;border-radius:3px;border:none;cursor:pointer;font-weight:600;background:var(--badge-bg);color:var(--badge-text)}
        .brand-controls .lock-btn.on{background:var(--accent);color:#fff}
        .brand-controls .combine-btn{font-size:7px;padding:1px 6px;border-radius:3px;border:none;cursor:pointer;font-weight:600;background:var(--badge-bg);color:var(--badge-text)}
        .brand-controls .combine-btn.on{background:#2d8a4e;color:#fff}
        .locked .pos-field input,.locked .pos-field .slider-wrap input,.locked .text-input-group input,.locked .font-row select,.locked .color-row input{opacity:0.4;pointer-events:none}
        .fixed-info{font-size:7px;color:var(--text-muted);padding:1px 4px;background:var(--bg-input);border-radius:2px;display:inline-block}
        .multi-select-hint{font-size:6px;color:#888;padding:1px 4px;background:#1a2a1a;border-radius:3px;border:1px solid #2d8a4e}
        .arc-control{display:flex;align-items:center;gap:4px;margin-top:3px;flex-wrap:wrap}
        .arc-toggle{font-size:7px;padding:1px 6px;border-radius:3px;border:none;cursor:pointer;font-weight:600;background:var(--badge-bg);color:var(--badge-text)}
        .arc-toggle.on{background:#2d8a4e;color:#fff}
        .arc-info{font-size:7px;color:var(--text-muted);margin-left:4px}


        .theme-toggle{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);border-radius:16px;padding:2px 8px;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:3px}
        .theme-toggle:hover{background:var(--border-color)}

        @media(max-width:768px){#calib-fab{position:fixed;bottom:78px;right:12px;width:42px;height:42px;font-size:18px;z-index:3999}#calib-panel{position:fixed;top:0;right:0;height:100vh;width:88vw;z-index:4000;box-shadow:-6px 0 24px rgba(0,0,0,0.7)}}
        @media(max-width:1200px){#left-panel{width:260px;min-width:260px}#right-panel{width:340px;min-width:340px}}
        
        /* Calibration panel */
        #calib-fab{position:absolute;bottom:18px;right:18px;z-index:20;width:46px;height:46px;border-radius:50%;background:#e67e22;color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;}
        #calib-fab:hover{background:#cf6f1b;}
        #calib-panel{position:relative;flex-shrink:0;height:100%;z-index:20;background:#12121f;border-left:2px solid #e67e22;padding:14px;width:300px;display:none;flex-direction:column;gap:8px;box-shadow:-6px 0 24px rgba(0,0,0,0.35);overflow-y:auto;}
        #calib-panel h4{margin:0;color:#e67e22;font-size:12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
        #calib-panel label{color:#aaa;font-size:10px;display:block;margin-bottom:2px;}
        #calib-panel select{width:100%;background:#0d0d1a;color:#eee;border:1px solid #333;border-radius:5px;padding:5px 6px;font-size:11px;}
        #calib-panel input[type=number]{width:100%;background:#0d0d1a;color:#fff;border:1px solid #333;border-radius:5px;padding:6px 7px;font-size:12px;font-family:monospace;}
        #calib-panel input[type=number]:focus{outline:none;border-color:#e67e22;}
        .calib-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:6px;}
        .calib-val{font-size:11px;color:#fff;font-weight:600;text-align:right;font-family:monospace;}
        #calib-output{background:#0d0d1a;border-radius:6px;padding:8px;font-size:9px;font-family:monospace;color:#4ade80;white-space:pre;cursor:pointer;border:1px solid #333;}
        #calib-output:hover{border-color:#e67e22;}
        .calib-copy-hint{font-size:9px;color:#666;text-align:right;}
        #calib-card-select{background:#0d0d1a;color:#fff;border:1px solid #444;border-radius:4px;padding:2px 4px;font-size:11px;width:100%;}
        .calib-inline-btn{font-size:8px;padding:1px 7px;border:1px solid #e67e22;border-radius:3px;background:transparent;color:#e67e22;cursor:pointer;font-weight:600;margin-left:auto;}
        .calib-inline-btn:hover{background:#e67e22;color:#fff;}
        #calib-live-preview{background:#1a1a2e;border:1px solid #333;border-radius:6px;padding:6px;font-size:9px;color:#aaa;flex-shrink:0;}

        /* ===== STAMP NUMBER SYSTEM ===== */
        #stamp-toggle-bar, #text-stamp-toggle-bar, #logo-stamp-toggle-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-card);border-bottom:1px solid var(--border-color);flex-wrap:wrap}
        #stamp-toggle-btn, #text-stamp-toggle-btn, #logo-stamp-toggle-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:2px solid var(--border-color);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
        #stamp-toggle-btn.active, #text-stamp-toggle-btn.active, #logo-stamp-toggle-btn.active{border-color:#f59e0b;color:#f59e0b;background:rgba(245,158,11,0.08)}
        #stamp-toggle-btn .dot, #text-stamp-toggle-btn .dot, #logo-stamp-toggle-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--border-color);transition:background .2s}
        #stamp-toggle-btn.active .dot, #text-stamp-toggle-btn.active .dot, #logo-stamp-toggle-btn.active .dot{background:#f59e0b}
        #stamp-controls, #text-stamp-controls, #logo-stamp-controls{display:none;align-items:center;gap:8px;flex-wrap:wrap}
        #stamp-controls.visible, #text-stamp-controls.visible, #logo-stamp-controls.visible{display:flex}
        #stamp-number-input, #text-stamp-input{width:52px;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:13px;font-weight:700;border-radius:6px;padding:3px 6px;text-align:center}
        #text-stamp-input{width:110px;text-align:left}
        #stamp-color-input, #text-stamp-color-input{width:30px;height:28px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;padding:0}
        .stamp-font-sel{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:10px;border-radius:4px;padding:2px 4px}
        #stamp-size-input, #text-stamp-size-input{width:52px;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:10px;border-radius:4px;padding:3px 4px;text-align:center}
        #stamp-add-btn, #text-stamp-add-btn, #logo-stamp-add-btn{padding:4px 10px;background:#f59e0b;color:#000;border:none;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer}
        #stamp-add-btn:hover, #text-stamp-add-btn:hover, #logo-stamp-add-btn:hover{background:#d97706}
        #stamp-clear-btn, #text-stamp-clear-btn, #logo-stamp-clear-btn{padding:4px 8px;background:transparent;color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;font-size:10px;cursor:pointer}
        #stamp-clear-btn:hover, #text-stamp-clear-btn:hover, #logo-stamp-clear-btn:hover{border-color:var(--accent);color:var(--accent)}
        #stamp-list, #text-stamp-list, #logo-stamp-list{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
        .stamp-item{display:flex;align-items:center;gap:3px;background:var(--badge-bg);border-radius:10px;padding:2px 8px;font-size:10px;color:var(--text-primary)}
        .stamp-item{flex-direction:column;align-items:stretch;border-radius:8px;padding:6px 8px;gap:4px}
        .stamp-item-top{display:flex;align-items:center;gap:4px}
        .stamp-item-edit{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
        .stamp-item-edit input[type=text]{width:44px;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:12px;font-weight:700;border-radius:4px;padding:2px 4px;text-align:center}
        .stamp-item-edit input[type=color]{width:26px;height:22px;border:1px solid var(--border-color);border-radius:3px;cursor:pointer;padding:0}
        .stamp-item-edit select{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:9px;border-radius:3px;padding:1px 3px}
        .stamp-item-edit input[type=number]{width:44px;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:9px;border-radius:3px;padding:1px 4px}
        .stamp-item-edit .si-apply{padding:2px 7px;background:var(--accent);color:#fff;border:none;border-radius:4px;font-size:9px;font-weight:600;cursor:pointer}
        .stamp-item .si-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:0;line-height:1;margin-left:auto}
        .stamp-item .si-del:hover{color:var(--accent)}
        #stamp-cursor-hint, #text-stamp-cursor-hint, #logo-stamp-cursor-hint{font-size:9px;color:#f59e0b;animation:pulse 1s infinite alternate}
        @keyframes pulse{from{opacity:.6}to{opacity:1}}
        body.stamp-mode #canvas-container{cursor:crosshair!important}
        body.stamp-mode #canvas-container *{cursor:crosshair!important}

        /* ---- Text stamp selection box + corner handles ---- */
        #text-select-box{position:absolute;display:none;border:1.5px solid #00e5ff;border-radius:2px;pointer-events:none;z-index:20;box-sizing:border-box}
        .text-handle{position:absolute;width:20px;height:20px;border-radius:50%;background:#111827;border:1.5px solid #00e5ff;color:#00e5ff;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.4)}
        .text-handle:hover{background:#00e5ff;color:#111827}
        .text-handle.th-edit{top:0;left:0}
        .text-handle.th-delete{top:0;left:100%}
        .text-handle.th-rotate{top:100%;left:0}
        .text-handle.th-resize{top:100%;left:100%}
        #text-edit-popover{position:absolute;display:none;z-index:21;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;padding:8px;gap:6px;flex-direction:column;min-width:150px;box-shadow:0 4px 16px rgba(0,0,0,.4)}
        #text-edit-popover.visible{display:flex}
        #text-edit-popover input[type=text]{width:100%;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:12px;border-radius:4px;padding:4px 6px}
        #text-edit-popover .ep-row{display:flex;gap:6px;align-items:center}
        #text-edit-popover select{flex:1;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:10px;border-radius:4px;padding:2px 4px}
        #text-edit-popover input[type=color]{width:26px;height:24px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;padding:0}
        body.stamp-dragging #canvas-container canvas{pointer-events:none!important}
        body.stamp-dragging #stamp-drag-overlay{pointer-events:auto!important;cursor:move!important}

        /* ---- Logo stamp specific ---- */
        .logo-preview-stamp{max-height:40px;max-width:80px;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-input)}
        .stamp-item .stamp-preview-img{max-height:30px;max-width:60px;border-radius:3px;border:1px solid var(--border-color);background:var(--bg-input)}
        .logo-stamp-upload-area{position:relative;border:1px dashed var(--border-color);border-radius:4px;padding:4px;text-align:center;cursor:pointer;min-height:24px}
        .logo-stamp-upload-area label{font-size:8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px}
        .logo-stamp-upload-area label i{font-size:10px}
        .logo-stamp-upload-area input[type=file]{display:none}

        #mob-product-bar{display:none}
        @media(max-width:768px){
            #left-panel{display:none!important}
            #right-panel{display:none!important}
            .app-container{flex-direction:column;height:100dvh;overflow:hidden}
            #center-panel{flex:1;height:calc(100dvh - 64px);min-height:0}
            #canvas-container{width:100%;height:100%}
            #mobile-bottom-bar{display:flex!important}
            #mob-product-bar{display:flex!important}
        }
        #mobile-bottom-bar{
            display:none;
            position:fixed;bottom:0;left:0;right:0;
            height:64px;
            background:var(--bg-secondary);
            border-top:1px solid var(--border-color);
            z-index:100;
            align-items:center;
            justify-content:space-around;
            padding:0 4px;
            gap:2px;
        }
        .mob-tab{
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            flex:1;height:56px;border-radius:8px;cursor:pointer;
            font-size:9px;font-weight:600;color:#ffffff;
            gap:3px;transition:all .2s;border:none;background:transparent;
            padding:4px 2px;
        }
        .mob-tab i{font-size:18px;line-height:1}
        .mob-tab span{font-size:8px;line-height:1}
        .mob-tab.active{color:var(--accent);background:rgba(255,107,53,0.08);border-radius:8px}
        #mobile-sheet{
            display:none;
            position:fixed;bottom:64px;left:0;right:0;
            background:var(--bg-secondary);
            border-top:2px solid var(--border-color);
            border-radius:16px 16px 0 0;
            z-index:99;
            max-height:72dvh;
            overflow:hidden;
            flex-direction:column;
            box-shadow:0 -8px 32px rgba(0,0,0,0.4);
        }
        #mobile-sheet.open{display:flex}
        .sheet-handle{width:36px;height:4px;background:var(--border-color);border-radius:2px;margin:8px auto 4px;flex-shrink:0}
        .sheet-header{display:flex;align-items:center;gap:8px;padding:4px 14px 8px;flex-shrink:0;border-bottom:1px solid var(--border-color)}
        .sheet-header h6{margin:0;font-size:13px;font-weight:600;color:var(--text-primary);flex:1}
        .sheet-close{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
        .sheet-body{flex:1;overflow-y:auto;padding:10px 12px 16px;-webkit-overflow-scrolling:touch}
        .mob-place-btn{
            display:flex;align-items:center;gap:10px;
            width:100%;padding:10px 12px;margin-bottom:6px;
            background:var(--bg-card);border:1px solid var(--border-color);
            border-radius:8px;cursor:pointer;color:var(--text-primary);
            font-size:12px;font-weight:500;text-align:left;
        }
        .mob-place-btn.active{border-color:var(--accent);background:rgba(255,107,53,0.07)}
        .mob-place-btn i{font-size:16px;color:var(--text-muted);flex-shrink:0}
        .mob-place-btn .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
        .mob-place-content{display:none;padding:8px 4px 4px}
        .mob-place-content.open{display:block}
        .mob-apply-btn{
            width:100%;margin-top:6px;padding:8px;font-size:12px;font-weight:600;
            border:none;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer
        }
        .mob-apply-btn.applied{background:#2d8a4e}
        .mob-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:6px}
        .mob-toggle{padding:3px 10px;font-size:10px;font-weight:600;border:none;border-radius:4px;cursor:pointer;background:var(--badge-bg);color:var(--badge-text)}
        .mob-toggle.on{background:var(--accent);color:#fff}
        @media(max-width:768px){
            .sheet-body input[type=text],
            .sheet-body input[type=number],
            .sheet-body select{font-size:13px!important;padding:6px 8px!important;border-radius:6px!important}
            .sheet-body .color-row input[type=color]{width:32px!important;height:32px!important}
            .sheet-body .logo-upload-area{padding:10px!important;min-height:44px!important}
            .sheet-body .logo-upload-area label{font-size:12px!important}
            .sheet-body .logo-preview-img{max-height:50px!important}
            .sheet-body .section-label{font-size:11px!important;margin:8px 0 4px!important}
            .sheet-body #partsAccordion{max-height:none;overflow:visible}
            .sheet-body .accordion-button{font-size:12px;padding:6px 8px}
            .sheet-body .color-palette{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px}
            .sheet-body .color-swatch{max-width:36px;max-height:36px;min-width:26px;min-height:26px}
        }