*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{color:#e0e0e0;background:#112;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#root{width:100%;height:100vh}:root{--bg-app:#1a1a2e;--bg-panel:#16213e;--bg-input:#0f1a3a;--bg-viewport:#112;--bg-overlay:#0a0a1ed9;--text-primary:#e0e0e0;--text-heading:#fff;--text-secondary:#ccc;--text-muted:#888;--text-hint:#777;--border-subtle:#2a2a4a;--border-hover:#57c;--accent:#e1b724;--accent-hover:#f0c83a;--accent-secondary:#ee3e25;--btn-bg:#ee3e25;--btn-bg-hover:#ff5540;--btn-text:#fff;--btn-secondary-bg:#333;--btn-secondary-hover:#444;--btn-primary-bg:#2a5;--btn-primary-hover:#3b6;--selected-color:#e1b724;--palette-active-bg:#2a2500;--palette-active-border:#e1b724;--error-color:#f44;--error-text:#f66;--swatch-active-border:#fff;--spinner-track:#2a2a4a;--spinner-color:#e1b724}[data-theme=light]{--bg-app:#f5f5f0;--bg-panel:#fff;--bg-input:#f0f0ea;--bg-viewport:#e8e8e0;--bg-overlay:#f5f5f0e6;--text-primary:#333;--text-heading:#1a1a1a;--text-secondary:#555;--text-muted:#888;--text-hint:#999;--border-subtle:#ddd;--border-hover:#e1b724;--btn-bg:#e1b724;--btn-bg-hover:#f0c83a;--btn-text:#fff;--btn-secondary-bg:#e0e0e0;--btn-secondary-hover:#d0d0d0;--selected-color:#e1b724;--palette-active-bg:#fdf6dc;--palette-active-border:#e1b724;--error-color:#ee3e25;--error-text:#ee3e25;--swatch-active-border:#333;--spinner-track:#ddd;--spinner-color:#e1b724}.loading-overlay{z-index:9999;background:var(--bg-overlay);color:var(--text-primary);pointer-events:all;flex-direction:column;justify-content:center;align-items:center;font-size:16px;display:flex;position:fixed;inset:0}.loading-spinner{border:3px solid var(--spinner-track);border-top-color:var(--spinner-color);border-radius:50%;width:40px;height:40px;margin-bottom:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn-delete-3d{background:var(--accent-secondary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;line-height:1;transition:background .15s;display:flex;box-shadow:0 1px 4px #0006}.btn-delete-3d:hover{background:#ff6040}.btn-cancel-3d{color:#fff;cursor:pointer;background:#888;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;line-height:1;transition:background .15s;display:flex;box-shadow:0 1px 4px #0000004d}.btn-cancel-3d:hover{background:#666}.btn-copy-3d{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:16px;font-weight:700;line-height:1;transition:background .15s;display:flex;box-shadow:0 1px 4px #0006}.btn-copy-3d:hover{background:var(--accent-hover)}.app-layout{height:100dvh;display:flex;overflow:hidden}body.embed .mobile-topbar{display:none!important}body.embed .app-layout{height:100dvh}body.embed .mode-hint{top:8px}@media (width<=768px){body.embed .app-layout{padding-top:0}body.embed .viewport{height:67dvh}body.embed .mode-hint{top:auto;bottom:33dvh}}.sidebar{background:var(--bg-app);width:320px;min-width:320px;color:var(--text-primary);flex-direction:column;gap:12px;padding:16px;display:flex;overflow-y:auto}.sidebar h2{color:var(--text-heading);margin:0 0 4px;font-size:20px}.viewport{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;flex:1;position:relative}.panel{background:var(--bg-panel);border-radius:8px;padding:12px}.panel h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;font-size:14px}.panel h4{color:var(--text-muted);margin:8px 0 4px;font-size:12px}.panel label{color:var(--text-muted);margin:8px 0 4px;font-size:12px;display:block}.selected-label{color:var(--selected-color)}.panel-error{border:1px solid var(--error-color)}.panel-error ul{margin:0;padding:0;list-style:none}.panel-error li{color:var(--error-text);padding:2px 0;font-size:13px}.hint{color:var(--text-hint);margin:4px 0;font-size:12px}.palette-grid{flex-wrap:wrap;gap:6px;display:flex}.palette-item{text-align:left;border:1px solid var(--border-subtle);background:var(--bg-input);color:var(--text-primary);cursor:pointer;border-radius:6px;flex-direction:column;flex:none;align-items:flex-start;width:fit-content;padding:8px;font-size:13px;transition:border-color .15s;display:flex}@media (hover:hover){.palette-item:hover{border-color:var(--accent);background:var(--accent);color:var(--btn-text)}}.palette-item.active{border-color:var(--accent);background:var(--accent);color:var(--btn-text)}.placement-hint{color:var(--accent);font-weight:600}.palette-icon{object-fit:contain;align-self:flex-start;width:auto;margin-bottom:4px}.palette-tooltip{color:#fff;white-space:pre-line;pointer-events:none;z-index:100;box-sizing:border-box;background:#000000d9;border-radius:6px;padding:6px 10px;font-size:12px;line-height:1.4;position:absolute;left:12px;right:12px}.palette-tooltip.compact{white-space:nowrap;width:auto;left:auto;right:auto}.palette-tooltip-arrow{border-top:6px solid #000000d9;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:-6px;transform:translate(-50%)}[data-theme=dark] .palette-icon{filter:invert(.8)}.palette-label{font-weight:600}.palette-meta{color:var(--text-muted);margin-top:2px;font-size:11px;display:block}.btn{background:var(--btn-bg);color:var(--btn-text);cursor:pointer;border:none;border-radius:6px;margin-top:8px;padding:8px 14px;font-size:13px;font-weight:600;transition:background .15s;display:inline-block}.btn:hover:not(:disabled){background:var(--btn-bg-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{margin:2px;padding:4px 10px;font-size:12px}.btn-secondary{background:var(--btn-secondary-bg);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--btn-secondary-hover)}.btn-primary{background:var(--btn-primary-bg)}.btn-primary:hover:not(:disabled){background:var(--btn-primary-hover)}.btn-remove{color:var(--error-text);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1}.block-list{margin:0;padding:0;list-style:none}.block-list-item{cursor:pointer;border-radius:4px;justify-content:space-between;align-items:center;padding:6px 8px;font-size:13px;transition:background .1s;display:flex}.block-list-item:hover{background:var(--bg-input)}.block-list-item.selected{background:var(--palette-active-bg);outline:1px solid var(--palette-active-border)}.color-swatches{flex-wrap:wrap;gap:4px;margin:4px 0;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:4px;width:28px;height:28px;transition:border-color .15s}.swatch:hover{border-color:var(--text-muted)}.swatch.active{border-color:var(--swatch-active-border)}.swatch.disabled{opacity:.25;cursor:not-allowed}.position-list{flex-wrap:wrap;gap:4px;display:flex}.cart-floating{z-index:50;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;top:16px;right:16px}.cart-toggle{display:none}.cart-panel{width:320px}.cart-panel .panel{box-shadow:0 2px 12px #00000026}.cart-badge{background:var(--accent-secondary);color:#fff;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.mobile-topbar{background:var(--bg-panel);border-bottom:1px solid var(--border-subtle);z-index:200;align-items:center;gap:4px;height:44px;padding:0 8px;display:none;position:fixed;top:0;left:0;right:0}.mobile-topbar-spacer{flex:1}.mobile-cart-dropdown{z-index:200;width:280px;position:absolute;top:44px;right:8px}.mobile-cart-dropdown .panel{box-shadow:0 4px 16px #0003}.mobile-menu{display:none}@media (width<=768px){.sidebar{display:none!important}.mobile-menu{z-index:150;background:var(--bg-app);flex-direction:column;height:33dvh;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.mobile-tabs{background:var(--bg-panel);border-top:1px solid var(--border-subtle);flex-shrink:0;display:flex}.mobile-tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 0;font-size:10px;display:flex}.mobile-tab.active{color:var(--accent)}.mobile-panel{background:var(--bg-app);scrollbar-width:thin;flex:1;min-height:0;padding:12px;overflow-y:auto}.mobile-panel::-webkit-scrollbar{width:4px}.mobile-panel::-webkit-scrollbar-track{background:0 0}.mobile-panel::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}.mobile-panel>*+*{margin-top:12px}.viewport{flex:none;height:calc(67dvh - 44px)}.toolbar,.cart-floating{display:none}.mobile-topbar{display:flex}.app-layout{flex-direction:column;padding-top:44px}.cart-toggle{background:var(--bg-panel);width:42px;height:42px;color:var(--text-primary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:0 2px 12px #00000026}.cart-panel{width:280px;display:none}.cart-panel-open{display:block}.toolbar,.cart-floating{display:none!important}}.cart-table{border-collapse:collapse;width:100%;font-size:13px}.cart-table th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);padding:4px 0;font-weight:400}.cart-table td{padding:4px 0}.cart-sku{color:var(--text-muted);font-family:ui-monospace,Consolas,monospace;font-size:11px}.cart-total{color:var(--text-heading);margin-top:8px;font-size:15px;font-weight:600}.panel textarea{box-sizing:border-box;background:var(--bg-input);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);resize:vertical;border-radius:6px;padding:8px;font-family:inherit;font-size:16px}.panel input[type=number]{background:var(--bg-input);border:1px solid var(--border-subtle);width:80px;color:var(--text-primary);border-radius:4px;padding:4px 8px;font-size:13px}.mode-hint{background:var(--bg-panel);color:var(--text-muted);border:1px solid var(--border-subtle);pointer-events:none;z-index:300;white-space:nowrap;border-radius:8px;padding:6px 16px;font-size:13px;position:fixed;top:16px;left:calc(50vw - 8px);transform:translate(-50%);box-shadow:0 2px 8px #0000001a}@media (width<=768px){.mode-hint{text-align:center;z-index:160;border-left:none;border-right:none;border-radius:0;inset:44px 0 auto;transform:none}}.toolbar{background:var(--bg-panel);border:1px solid var(--border-subtle);z-index:100;border-radius:10px;align-items:center;gap:8px;padding:6px 12px;display:flex;position:fixed;bottom:16px;left:calc(50vw + 160px);transform:translate(-50%);box-shadow:0 2px 12px #00000026}.toolbar-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:18px;transition:background .15s}.toolbar-btn:hover:not(:disabled){background:var(--accent);color:var(--btn-text)}.toolbar-btn-danger{color:var(--accent-secondary)}.toolbar-btn-danger:hover:not(:disabled){background:var(--accent-secondary);color:#fff}.toolbar-btn:disabled{opacity:.35;cursor:not-allowed}.toolbar-btn[data-tip]{position:relative}.toolbar-btn[data-tip]:hover:after{content:attr(data-tip);color:#fff;white-space:nowrap;pointer-events:none;z-index:200;background:#000000d9;border-radius:6px;padding:4px 8px;font-size:12px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.toolbar-btn[data-tip]:hover:before{content:"";pointer-events:none;z-index:200;border-top:6px solid #000000d9;border-left:6px solid #0000;border-right:6px solid #0000;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}@media (width<=768px){.toolbar-btn[data-tip]:hover:after{top:calc(100% + 8px);bottom:auto}.toolbar-btn[data-tip]:hover:before{border-top:none;border-bottom:6px solid #000000d9;top:calc(100% + 2px);bottom:auto}}.help-overlay{z-index:1000;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.help-dialog{background:var(--bg-panel);color:var(--text-primary);border-radius:12px;width:90%;max-width:420px;padding:24px;box-shadow:0 4px 24px #0000004d}.help-dialog h3{color:var(--text-heading);margin:0 0 16px;font-size:18px}.help-table{border-collapse:collapse;width:100%;margin-bottom:16px;font-size:13px}.help-table td{border-bottom:1px solid var(--border-subtle);vertical-align:top;padding:6px 8px}.help-table td.help-icon{text-align:center;vertical-align:top;width:20px}.help-table td:nth-child(2){white-space:nowrap;width:50px;font-weight:700}.toolbar-divider{background:var(--border-subtle);width:1px;height:20px}.welcome-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.welcome-dialog{background:var(--bg-panel);color:var(--text-primary);border-radius:12px;width:90%;max-width:460px;padding:32px;box-shadow:0 8px 32px #0006}.welcome-dialog h2{color:var(--text-heading);margin:0 0 8px;font-size:20px}.welcome-subtitle{color:var(--text-secondary);margin:0 0 16px;font-size:14px;line-height:1.4}.welcome-textarea{box-sizing:border-box;background:var(--bg-input);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);resize:none;border-radius:6px;padding:10px;font-family:inherit;font-size:14px;transition:border-color .15s}.welcome-textarea:focus{border-color:var(--accent);outline:none}.welcome-error{color:var(--error-text);margin:8px 0 0;font-size:13px}.welcome-actions{gap:8px;margin-top:16px;display:flex}.welcome-actions .btn{text-align:center;flex:1;margin-top:0}@media (width<=480px){.welcome-dialog{padding:24px 20px}.welcome-actions{flex-direction:column}}
