:root{--bg:#ffffff;--panel:#ffffff;--panel-2:#f5f3ee;--border:#e4e0d8;--text:#221f1c;--text-muted:#8b8477;--accent:#c8752f;--accent-hi:#b5651f;--safe:#3f8f6d;--danger:#c0402f;--radius:10px;--hud-bg:rgba(255,255,255,.92)}[data-theme=dark]{--bg:#18160f;--panel:#211e17;--panel-2:#2a271e;--border:#3c382c;--text:#f0ece3;--text-muted:#a49b87;--hud-bg:rgba(33,30,23,.88)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;transition:background .15s,color .15s}:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}.app{display:flex;flex-direction:column;height:100vh;min-height:680px}header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:26px;height:26px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:500;color:#fff}.brand h1{font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:600;margin:0;letter-spacing:.2px}.brand span.tag{display:block;font-size:11px;color:var(--text-muted);font-family:IBM Plex Mono,monospace;margin-top:1px}header .step{font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}.header-right{display:flex;align-items:center;gap:18px}.theme-toggle{width:42px;height:23px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);position:relative;cursor:pointer;padding:0;flex-shrink:0;transition:background .15s,border-color .15s}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--accent);transition:transform .18s ease}.theme-toggle.dark .theme-toggle-thumb{transform:translate(19px)}.layout{flex:1;display:grid;grid-template-columns:220px 1fr 280px;min-height:0}aside{background:var(--panel);padding:18px 14px;overflow-y:auto}aside.products{border-right:1px solid var(--border)}aside.library{border-left:1px solid var(--border)}.section-label{font-family:IBM Plex Mono,monospace;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin:18px 0 10px 2px}.section-label:first-child{margin-top:0}.product-btn{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:9px 10px;margin-bottom:8px;cursor:pointer;color:var(--text);font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:border-color .15s,background .15s}.product-btn:hover{border-color:var(--accent)}.product-btn.active{border-color:var(--accent);background:#c8752f14}.product-icon{width:28px;height:28px;flex-shrink:0;border-radius:6px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--accent)}.product-icon svg{width:16px;height:16px}.pill-row{display:flex;flex-wrap:wrap;gap:6px}.style-pill{padding:6px 11px;border:1px solid var(--border);border-radius:999px;font-size:11.5px;font-weight:500;cursor:pointer;color:var(--text);background:var(--panel);transition:border-color .15s,background .15s,color .15s}.style-pill:hover{border-color:var(--accent)}.style-pill.active{border-color:var(--accent);background:var(--accent);color:#fff}.swatch-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.color-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:border-color .15s,transform .1s;padding:0}.color-swatch:hover{transform:translateY(-1px)}.color-swatch.active{border-color:var(--accent-hi);box-shadow:0 0 0 2px #c8752f38}.color-name{font-size:11px;color:var(--text-muted);margin-top:10px;font-family:IBM Plex Mono,monospace}.color-name b{color:var(--text);font-weight:500}.canvas-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px;overflow:auto;background:radial-gradient(circle at 1px 1px,var(--border) 1px,transparent 0) 0 0/22px 22px}.view-toggle{display:flex;gap:4px;margin-bottom:10px;background:var(--panel-2);border-radius:8px;padding:3px}.view-toggle.hidden{display:none}.view-tab{padding:6px 22px;font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;color:var(--text-muted)}.view-tab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0000000f}.view-tab .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:6px;opacity:0;position:relative;top:-1px}.view-tab .dot.show{opacity:1}.area-toggle{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;justify-content:center;max-width:100%}.area-tab{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:500;cursor:pointer;color:var(--text-muted);background:var(--panel-2);border:1px solid var(--border);transition:border-color .15s,background .15s,color .15s}.area-tab:hover{border-color:var(--safe)}.area-tab.active{border-color:var(--safe);background:#3f8f6d1a;color:var(--text);font-weight:600}.area-tab-x{font-size:12px;line-height:1;color:var(--text-muted)}.area-tab-x:hover{color:var(--danger)}.area-tab-add{padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:500;cursor:pointer;color:var(--accent);background:transparent;border:1px dashed var(--accent);font-family:Inter,sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}.area-tab-add:hover{background:#c8752f14}.canvas-frame{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px;position:relative;box-shadow:0 2px 14px #1e190f0f}#canvas-holder{position:relative}canvas{border-radius:4px}.hud{position:absolute;top:24px;left:24px;background:var(--hud-bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--text-muted);line-height:1.7;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);min-width:128px}.hud b{color:var(--text);font-weight:500}.hud .hud-title{color:var(--safe);text-transform:uppercase;letter-spacing:.6px;font-size:9.5px;margin-bottom:4px;display:block}.toolbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}.btn{font-family:Inter,sans-serif;font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn.primary:hover{background:var(--accent-hi)}.btn.editing,.btn.preview-active{background:var(--safe);border-color:var(--safe);color:#fff;font-weight:600}.btn.danger:hover{border-color:var(--danger);color:var(--danger)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{border-color:var(--border)}.check-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-muted);margin-top:12px;cursor:pointer;font-family:Inter,sans-serif}.check-row input{accent-color:var(--accent);cursor:pointer}.toggle-btns{display:flex;gap:4px}.toggle-btn{padding:8px 12px;min-width:34px;text-align:center}.toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.text-props{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);transition:opacity .15s}.text-props.disabled{opacity:.4;pointer-events:none}.text-props-row{display:flex;gap:8px;align-items:center;margin-top:8px}.text-props-row .text-field{margin-top:0;width:70px;flex-shrink:0}.text-props-row .toggle-btns,.text-props-row .toggle-btn{flex:1}#txt-font{margin-top:0}input[type=color]{width:36px;height:34px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--panel);cursor:pointer;flex-shrink:0}.slider-label{display:block;font-size:11px;color:var(--text-muted);margin-top:12px;font-family:IBM Plex Mono,monospace}.slider-label span{color:var(--text);font-weight:500}.slider-label input[type=range]{width:100%;margin-top:5px;accent-color:var(--accent)}.tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--panel-2);border-radius:8px;padding:3px}.tab{flex:1;text-align:center;padding:6px 4px;font-size:12px;font-weight:500;border-radius:6px;cursor:pointer;color:var(--text-muted)}.tab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0000000f}.swatch-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.swatch{aspect-ratio:1;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .1s}.swatch:hover{border-color:var(--accent);transform:translateY(-1px)}.swatch img{width:70%;height:70%;object-fit:contain}.swatch-label{font-size:10px;color:var(--text-muted);text-align:center;margin-top:4px;font-family:IBM Plex Mono,monospace}.lib-subtabs{display:flex;gap:4px;margin-bottom:10px;background:var(--panel-2);border-radius:8px;padding:3px}.lib-subtab{flex:1;text-align:center;padding:6px 4px;font-size:12px;font-weight:500;border-radius:6px;cursor:pointer;color:var(--text-muted)}.lib-subtab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0000000f}.lib-search-row{display:flex;gap:6px;margin-bottom:12px}.lib-search-row .text-field{flex:1}.lib-search-row .btn{flex-shrink:0}.stock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stock-grid.icons{grid-template-columns:repeat(4,1fr)}.stock-item{position:relative;aspect-ratio:1;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);cursor:grab;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .1s}.stock-item:active{cursor:grabbing}.stock-item:hover{border-color:var(--accent);transform:translateY(-1px)}.stock-item img{width:100%;height:100%;object-fit:cover}.stock-grid.icons .stock-item img{width:60%;height:60%;object-fit:contain}.stock-item .stock-credit{position:absolute;left:0;right:0;bottom:0;padding:3px 5px;background:linear-gradient(transparent,#000000a6);color:#fff;font-size:8.5px;line-height:1.2;font-family:IBM Plex Mono,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-grid.icons .stock-item .stock-credit{display:none}.stock-item.loading{opacity:.5;pointer-events:none}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed var(--border);border-radius:var(--radius);padding:26px 12px;text-align:center;cursor:pointer;color:var(--text-muted);font-size:12.5px;transition:border-color .15s,color .15s}.upload-zone:hover{border-color:var(--accent);color:var(--text)}input[type=file]{display:none}.note{font-size:11px;color:var(--text-muted);line-height:1.6;margin-top:16px;padding:10px;background:var(--panel-2);border-radius:8px}.note b{color:var(--text)}.text-field{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-family:Inter,sans-serif;font-size:13px;color:var(--text);background:var(--panel)}.text-field:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px}#layer-list{display:flex;flex-direction:column;gap:6px}.layer-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--panel);transition:border-color .15s,background .15s}.layer-row:hover{border-color:var(--accent)}.layer-row.dragging{opacity:.4}.layer-row.drag-over{border-color:var(--safe);box-shadow:0 0 0 2px #3f8f6d2e}.layer-drag{cursor:grab;color:var(--text-muted);font-size:11px;letter-spacing:-1px;flex-shrink:0;line-height:1}.layer-drag:active{cursor:grabbing}.layer-row.active{border-color:var(--accent);background:#c8752f14}.layer-icon{font-size:13px;color:var(--accent);width:16px;text-align:center;flex-shrink:0}.layer-name{flex:1;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-btns{display:flex;gap:2px;flex-shrink:0}.layer-btn{width:20px;height:20px;border:none;background:transparent;color:var(--text-muted);font-size:11px;border-radius:5px;cursor:pointer;line-height:1}.layer-btn:hover{background:var(--panel-2);color:var(--text)}.layer-btn.danger:hover{background:#c0402f1f;color:var(--danger)}.preview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center}.preview-overlay.hidden{display:none}.preview-overlay-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px}.preview-overlay-bar .view-toggle{margin:0}.preview-overlay-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.preview-overlay-stage #canvas-holder{position:relative}@media (max-width:880px){.layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}aside.products{border-right:none;border-bottom:1px solid var(--border)}aside.library{border-left:none;border-top:1px solid var(--border)}}