:root{color:#18202a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f4f5f1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}:root{--accent:#fdae27;--accent-strong:#de8500;--accent-soft:#fdae2724;--ink:#17202b;--muted:#626b76;--page:#f5f6f8;--panel:#fff;--surface:#f2f4f7;--surface-strong:#e5e7eb;--line:#d0d5dd;--editor-surface:#f2f4f7;--editor-surface-strong:#e5e7eb;--editor-line:#d0d5dd;--canvas-a:#f7f8fa;--canvas-b:#e8ebef;--white:#fff}.app-shell{background:var(--page);height:100vh;min-height:100vh;color:var(--ink);grid-template-rows:auto auto minmax(0,1fr);display:grid}.topbar{border-bottom:1px solid var(--line);background:var(--panel);justify-content:space-between;align-items:center;gap:18px;min-height:72px;padding:14px 18px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand svg{color:var(--accent)}.brand h1{margin:0;font-size:20px;line-height:1.1}.brand p,.label-text,.source-strip,.export-info{color:var(--muted)}.brand p{margin:3px 0 0;font-size:13px}.topbar-actions{gap:10px;display:flex}.document-tabs{border-bottom:1px solid var(--editor-line);background:var(--editor-surface);align-items:center;gap:6px;min-width:0;padding:8px 12px;display:flex;overflow-x:auto}.tab-item{border:1px solid var(--editor-line);background:var(--editor-surface-strong);border-radius:7px;flex:0 0 220px;align-items:center;min-width:150px;max-width:220px;display:flex;overflow:hidden}.tab-item.active{border-color:var(--accent);background:var(--white)}.tab-select{min-width:0;min-height:34px;color:var(--ink);background:0 0;flex:auto;align-items:center;padding:0 9px 0 11px;display:flex;overflow:hidden}.tab-select span{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;display:block;overflow:hidden}.tab-close,.tab-add{color:#4f5964;background:0 0;min-height:34px}.tab-close{border-left:1px solid #17202b24;flex:0 0 32px;place-items:center;width:32px;padding:0;display:grid}.tab-close:hover{color:var(--ink);background:#17202b14}.tab-add{border:1px solid var(--editor-line);background:var(--editor-surface-strong);flex:none;width:34px}.tab-empty{color:var(--muted);flex:none;padding:0 4px;font-size:13px}.workspace{grid-template-columns:minmax(0,1fr) 360px;min-height:0;display:grid}.preview-panel{border-right:1px solid var(--editor-line);grid-template-rows:auto minmax(0,1fr) auto;min-width:0;display:grid}.preview-toolbar,.source-strip{background:var(--editor-surface);border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.preview-toolbar>div{align-items:baseline;gap:10px;display:flex}.label-text{letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:700}.canvas-stage{background:linear-gradient(45deg, var(--canvas-b) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-b) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-b) 75%);background-color:var(--canvas-a);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;place-items:center;min-height:0;padding:22px;display:grid;position:relative;overflow:hidden}.canvas-stage:after{content:"";pointer-events:none;border:2px dashed #0000;border-radius:10px;transition:border-color .15s,background-color .15s;position:absolute;inset:14px}.canvas-stage.drop-active:after{border-color:var(--accent);background:var(--accent-soft)}.preview-canvas{cursor:grab;touch-action:none;background:0 0;max-width:100%;max-height:100%;box-shadow:0 18px 45px #17202b33}.preview-canvas.dragging{cursor:grabbing}.drop-placeholder{aspect-ratio:1.35;color:#444c56;width:min(420px,100%);font:inherit;background:#ffffffdb;border:1px dashed #a8b0ba;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}.drop-placeholder svg{flex:none}.source-strip{border-top:1px solid var(--editor-line);border-bottom:0;min-height:42px;font-size:13px}.control-panel{background:var(--panel);min-width:0;overflow-y:auto}.control-group{border-bottom:1px solid var(--line);padding:18px}.control-group h2{margin:0 0 14px;font-size:15px;line-height:1.2}label{gap:7px;margin-bottom:14px;display:grid}label span{color:#4f5964;text-transform:uppercase;font-size:12px;font-weight:700}.compact-label{margin-bottom:0}select,input[type=number],input[type=text]{box-sizing:border-box;border:1px solid var(--line);background:var(--white);width:100%;color:var(--ink);font:inherit;border-radius:6px;padding:9px 10px}select:disabled,input[type=number]:disabled,input[type=text]:disabled{border-color:var(--surface-strong);background:var(--surface);color:var(--muted);cursor:not-allowed;opacity:.58}input[type=range]{width:100%;accent-color:var(--accent)}.size-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.ratio-toggle{border:1px solid var(--line);background:var(--surface);color:#4f5964;border-radius:7px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:36px;font-size:13px;font-weight:700;display:inline-flex}.ratio-toggle.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}.ratio-toggle:not(:disabled):hover{border-color:var(--accent);background:var(--surface-strong)}.size-limit-popover{color:#b42318;background:#fef2f2;border:1px solid #fecaca;border-radius:7px;margin:-5px 0 12px;padding:8px 10px;font-size:12px;font-weight:400;line-height:1.35}.range-row{grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:10px;display:grid}.range-row strong{text-align:right}button{font:inherit;cursor:pointer;border:0;border-radius:7px;font-weight:700}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #fdae2759}.primary-button,.secondary-button,.icon-button{justify-content:center;align-items:center;gap:8px;min-height:38px;display:inline-flex}.primary-button{background:var(--ink);color:var(--white);padding:0 14px}.secondary-button,.icon-button{background:var(--surface-strong);color:var(--ink)}.primary-button:not(:disabled):hover{background:#263242}.secondary-button:not(:disabled):hover,.icon-button:not(:disabled):hover,.tab-add:hover{border-color:var(--accent);background:var(--surface)}.secondary-button{padding:0 13px}.icon-button{width:38px;padding:0}.full-width{width:100%}.full-width+.full-width{margin-top:10px}.export-info{min-height:36px;margin:12px 0 0;font-size:13px;line-height:1.4}.file-input{display:none}.modal-backdrop{z-index:50;background:#17202b6b;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.confirm-dialog{background:var(--panel);border-radius:8px;width:min(360px,100%);padding:20px;box-shadow:0 24px 70px #17202b47}.confirm-dialog h2{margin:0;font-size:18px;line-height:1.2}.confirm-dialog p{color:#4f5964;margin:10px 0 18px;line-height:1.45}.confirm-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}@media (width<=880px){.app-shell{height:auto}.topbar{flex-direction:column;align-items:stretch}.topbar-actions{grid-template-columns:1fr 1fr;display:grid}.workspace{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 162px)}.preview-panel{border-right:0;min-height:62vh}}