body{margin:0}*,:before,:after{box-sizing:border-box}body{color:#e2e8f0;background:#0f172a;min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:#1e293b;border-bottom:1px solid #334155;padding:.75rem 1.5rem}.brand h1{margin:0;font-size:1.25rem;font-weight:600}.subtitle{color:#94a3b8;font-size:.8rem}.app-main{flex:1;grid-template-columns:240px 1fr 260px;gap:0;min-height:0;display:grid}.toolbar,.layer-panel{background:#1e293b;padding:1rem;overflow-y:auto}.toolbar{border-right:1px solid #334155}.layer-panel{border-left:1px solid #334155}.toolbar h2,.layer-panel h2,.layer-panel h3{text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin:0 0 .75rem;font-size:.85rem}.tool-grid{grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1rem;display:grid}.tool-btn{color:#e2e8f0;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:6px;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem;font-size:.7rem;transition:border-color .15s,background .15s;display:flex}.tool-btn:hover{border-color:#64748b}.tool-btn.active{background:#1e3a5f;border-color:#3b82f6}.tool-icon{font-size:1.1rem}.tool-label{align-items:center;gap:.25rem;font-size:.7rem;display:flex}.tool-shortcut{color:#64748b;letter-spacing:.03em;font-size:.6rem;font-weight:600}.tool-panel{background:#0f172a;border:1px solid #334155;border-radius:6px;margin-bottom:1rem;padding:.75rem}.tool-panel label{color:#94a3b8;margin-bottom:.5rem;font-size:.75rem;display:block}.tool-panel select{color:#e2e8f0;background:#1e293b;border:1px solid #334155;border-radius:4px;width:100%;margin-top:.25rem;padding:.4rem .5rem;font-size:.8rem}.tool-panel input[type=text],.tool-panel input[type=number]{color:#e2e8f0;background:#1e293b;border:1px solid #334155;border-radius:4px;width:100%;margin-top:.25rem;padding:.4rem .5rem}.tool-panel-title{color:#cbd5e1;margin:0 0 .75rem;font-size:.8rem}.font-picker-label{color:#94a3b8;margin:.5rem 0 .35rem;font-size:.75rem}.font-picker{background:#1e293b;border:1px solid #334155;border-radius:6px;max-height:220px;margin-bottom:.75rem;overflow-y:auto}.font-picker-category+.font-picker-category{border-top:1px solid #334155}.font-picker-category-label{z-index:1;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#1e293b;border-bottom:1px solid #334155;padding:.35rem .6rem;font-size:.65rem;position:sticky;top:0}.font-picker-item{color:#e2e8f0;cursor:pointer;text-align:left;background:0 0;border:none;border-bottom:1px solid #0f172a;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;padding:.45rem .6rem;display:flex}.font-picker-item:hover{background:#0f172a}.font-picker-item.selected{background:#1e3a5f;box-shadow:inset 3px 0 #3b82f6}.font-picker-preview{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:1.05rem;line-height:1.2;overflow:hidden}.font-picker-meta{color:#64748b;font-family:system-ui,sans-serif;font-size:.65rem}.style-row{flex-direction:column;gap:.5rem;display:flex}.style-row label{color:#cbd5e1;justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.style-row input[type=color]{cursor:pointer;background:0 0;border:none;width:2rem;height:1.5rem}.style-row input[type=number]{color:#e2e8f0;background:#0f172a;border:1px solid #334155;border-radius:4px;width:4rem;padding:.25rem}.checkbox-label{color:#cbd5e1;cursor:pointer;align-items:center;gap:.5rem;margin:.75rem 0;font-size:.8rem;display:flex}.template-select-label{color:#94a3b8;margin:0 0 1rem;font-size:.75rem;display:block}.template-select-label select{color:#e2e8f0;background:#0f172a;border:1px solid #334155;border-radius:4px;width:100%;margin-top:.25rem;padding:.4rem .5rem;font-size:.8rem}.vector-upload-error{color:#f87171;margin:.5rem 0 0;font-size:.75rem}.vector-upload-warning{color:#fbbf24;margin:0 0 .75rem;font-size:.75rem;line-height:1.4}.action-btn,.export-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;width:100%;padding:.5rem 1rem;font-size:.85rem;font-weight:500}.action-btn:hover,.export-btn:hover:not(:disabled){background:#2563eb}.secondary-btn{color:#cbd5e1;cursor:pointer;background:0 0;border:1px solid #334155;border-radius:6px;width:100%;padding:.5rem 1rem;font-size:.85rem}.secondary-btn:hover{color:#e2e8f0;border-color:#64748b}.image-trace-panel .image-trace-mode{color:#3b82f6;margin:0 0 .5rem;font-size:.75rem;font-weight:500}.selection-actions{flex-direction:column;gap:.4rem;margin-bottom:.5rem;display:flex}.image-trace-panel .image-trace-name{color:#94a3b8;text-overflow:ellipsis;white-space:nowrap;margin:0 0 .5rem;font-size:.75rem;overflow:hidden}.image-preview{object-fit:contain;cursor:default;background-color:#1e293b;background-image:linear-gradient(45deg,#334155 25%,#0000 25%),linear-gradient(-45deg,#334155 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#334155 75%),linear-gradient(-45deg,#0000 75%,#334155 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:12px 12px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #334155;border-radius:4px;width:100%;max-height:160px;margin-bottom:.75rem}.image-preview.picking{cursor:crosshair;outline-offset:1px;outline:2px solid #3b82f6}.bg-picker-row{align-items:flex-end;gap:.5rem;margin-bottom:.5rem;display:flex}.bg-picker-row label{color:#94a3b8;flex:none;font-size:.75rem}.pick-btn{color:#cbd5e1;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:4px;flex:1;padding:.35rem .5rem;font-size:.75rem}.pick-btn.active,.pick-btn:hover{color:#e2e8f0;border-color:#3b82f6}.range-label{color:#94a3b8;margin-bottom:.5rem;font-size:.75rem;display:block}.range-row{align-items:center;gap:.5rem;margin-top:.25rem;display:flex}.range-row input[type=range]{flex:1}.range-value{color:#cbd5e1;text-align:right;min-width:1.5rem;font-size:.75rem}.image-trace-actions{flex-direction:column;gap:.4rem;margin-top:.75rem;display:flex}.export-btn:disabled{opacity:.4;cursor:not-allowed}.danger-btn{color:#ef4444;cursor:pointer;background:0 0;border:1px solid #ef4444;border-radius:6px;width:100%;margin-top:.5rem;padding:.5rem;font-size:.8rem}.danger-btn:hover{background:#7f1d1d33}.hint{color:#64748b;margin:.5rem 0 0;font-size:.7rem;line-height:1.4}hr{border:none;border-top:1px solid #334155;margin:1rem 0}.canvas-wrapper{background:#0f172a;flex-direction:column;justify-content:safe center;align-items:safe center;gap:1rem;padding:2rem;display:flex;position:relative;overflow:auto}.design-canvas{touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #334155;border-radius:4px;flex:none;box-shadow:0 8px 32px #0006}.zoom-controls{background:#1e293b;border:1px solid #334155;border-radius:8px;align-items:center;gap:.25rem;padding:.3rem;display:flex;position:sticky;bottom:0;box-shadow:0 4px 16px #0006}.zoom-controls button{color:#e2e8f0;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:6px;min-width:2rem;height:2rem;padding:0 .6rem;font-size:1rem;line-height:1}.zoom-controls button:hover{border-color:#3b82f6}.zoom-controls .zoom-level{font-variant-numeric:tabular-nums;min-width:3.5rem;font-size:.8rem}.zoom-controls .zoom-fit{font-size:.8rem}.resize-handle{pointer-events:all}.resize-handle-nw,.resize-handle-se{cursor:nwse-resize}.resize-handle-ne,.resize-handle-sw{cursor:nesw-resize}.resize-handle-n,.resize-handle-s{cursor:ns-resize}.resize-handle-e,.resize-handle-w{cursor:ew-resize}.canvas-hint{color:#64748b;margin:1rem 0 0;font-size:.75rem}.panel-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.panel-header h2{margin:0}.panel-header .export-btn{width:auto;padding:.35rem .75rem;font-size:.75rem}.empty-state{color:#64748b;font-size:.8rem;line-height:1.5}.layer-list{margin:0;padding:0;list-style:none}.layer-item{cursor:pointer;border:1px solid #0000;border-radius:4px;grid-template-rows:auto auto;grid-template-columns:1fr auto;gap:.15rem .5rem;padding:.5rem;font-size:.8rem;display:grid}.layer-item:hover{background:#0f172a}.layer-item.selected{background:#1e3a5f;border-color:#3b82f6}.layer-name{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.layer-type{color:#64748b;text-transform:uppercase;font-size:.65rem}.layer-actions{grid-area:1/2/3;gap:.15rem;display:flex}.layer-actions button{color:#94a3b8;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:3px;padding:.15rem .35rem;font-size:.7rem}.layer-actions button:hover{color:#e2e8f0}.export-info{border-top:1px solid #334155;margin-top:1.5rem;padding-top:1rem}.export-info p{color:#64748b;margin:0;font-size:.75rem;line-height:1.5}.export-modal-backdrop{z-index:1000;background:#0f172ad9;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.export-modal{background:#1e293b;border:1px solid #334155;border-radius:10px;width:min(520px,100%);max-height:90vh;padding:1.25rem;overflow-y:auto;box-shadow:0 24px 48px #00000080}.export-modal h2{margin:0 0 .75rem;font-size:1.1rem}.export-alert{color:#fde68a;background:#422006;border:1px solid #f59e0b;border-radius:6px;margin-bottom:1rem;padding:.75rem;font-size:.8rem;line-height:1.5}.export-alert strong{color:#fbbf24;margin-bottom:.25rem;display:block}.export-alert-detail{color:#fcd34d;margin-top:.35rem;font-size:.75rem;display:block}.export-review-text{color:#94a3b8;margin:0 0 1rem;font-size:.8rem;line-height:1.5}.export-preview-frame{background:#fff;border:1px solid #334155;border-radius:6px;justify-content:center;align-items:center;padding:.5rem;display:flex}.export-preview-frame img,.export-preview-frame svg{width:100%;height:auto;max-height:320px;display:block}.export-preview-caption{color:#64748b;text-align:center;margin:.5rem 0 1rem;font-size:.7rem}.export-modal-actions{flex-wrap:wrap;gap:.5rem;display:flex}.export-modal-actions .secondary-btn,.export-modal-actions .action-btn{flex:1;min-width:7rem}.export-side-fieldset{border:1px solid #334155;border-radius:6px;margin:0 0 1rem;padding:.65rem .75rem}.export-side-fieldset legend{color:#94a3b8;padding:0 .25rem;font-size:.75rem}.export-side-options{flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.5rem;display:flex}.export-side-label{color:#e2e8f0;cursor:pointer;align-items:center;gap:.35rem;font-size:.8rem;display:flex}.export-filename-hint{color:#64748b;margin:0;font-size:.7rem;line-height:1.5}.export-filename-hint code{color:#cbd5e1;font-size:.68rem}.export-preview-toggle{gap:.35rem;margin-bottom:.65rem;display:flex}.export-preview-toggle button{color:#94a3b8;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:4px;flex:1;padding:.4rem .5rem;font-size:.75rem}.export-preview-toggle button.active{color:#e2e8f0;background:#1e3a5f;border-color:#3b82f6}.export-preview-loading{color:#64748b;text-align:center;margin:2rem 0;font-size:.8rem}.export-proof-error{color:#fca5a5;margin:0 0 .75rem;font-size:.75rem}@media (width<=900px){.app-main{grid-template-rows:auto 1fr auto;grid-template-columns:1fr}.toolbar{border-bottom:1px solid #334155;border-right:none}.layer-panel{border-top:1px solid #334155;border-left:none}}