*{box-sizing:border-box}html,body,#app{margin:0;padding:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#fff;color:#0e1318;-webkit-font-smoothing:antialiased}button,input,select{font-family:inherit}.app-shell{display:grid;grid-template-rows:56px 1fr;grid-template-columns:72px 280px 1fr 280px;grid-template-areas:"topbar topbar topbar  topbar" "rail   panel  canvas  rightpanel";height:100vh}.topbar{grid-area:topbar;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border-bottom:1px solid #e6e6ec}.brand{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid #e6e6ec;height:100%}.brand-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#8b3dff,#ec4899)}.brand-name{font-size:14px;font-weight:700;letter-spacing:.2px}.file-name{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;font-size:14px;color:#0e1318;min-width:200px;outline:none;cursor:text}.file-name:hover{background:#f4f4f7}.file-name:focus{background:#fff;border-color:#8b3dff}.topbar-spacer{flex:1}.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;color:#0e1318;cursor:pointer;font-size:16px;transition:background .12s ease}.icon-btn:hover:not(:disabled){background:#f4f4f7}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.layer-pill{background:#f4f4f7;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:500;color:#5e6470}.download-btn{background:#8b3dff;color:#fff;border:none;border-radius:8px;padding:0 18px;height:38px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s ease}.download-btn:hover:not(:disabled){background:#7a2fef}.download-btn:disabled{opacity:.5;cursor:not-allowed}.rail{grid-area:rail;background:#fff;border-right:1px solid #e6e6ec;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px}.rail-btn{width:56px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent;border:none;border-radius:10px;cursor:pointer;color:#5e6470;font-size:11px;font-weight:500;transition:all .12s ease}.rail-btn:hover{background:#f4f4f7;color:#0e1318}.rail-btn.active{background:#f0e7ff;color:#8b3dff}.rail-btn .glyph{font-size:22px;line-height:1}.panel{grid-area:panel;background:#fff;border-right:1px solid #e6e6ec;overflow-y:auto;display:flex;flex-direction:column}.panel-header{padding:16px 20px 8px;font-size:16px;font-weight:700;color:#0e1318}.panel-section{padding:8px 20px 16px}.panel-section h4{font-size:12px;font-weight:600;color:#5e6470;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shape-btn{aspect-ratio:1;background:#f4f4f7;border:1px solid transparent;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0e1318;transition:all .12s ease}.shape-btn:hover{background:#fff;border-color:#8b3dff;transform:translateY(-1px)}.shape-btn svg{width:32px;height:32px}.text-stack{display:flex;flex-direction:column;gap:6px}.text-btn{background:#f4f4f7;border:1px solid transparent;border-radius:8px;padding:12px 14px;cursor:pointer;text-align:left;color:#0e1318;transition:all .12s ease}.text-btn:hover{background:#fff;border-color:#8b3dff}.text-btn.heading{font-size:22px;font-weight:800}.text-btn.subheading{font-size:16px;font-weight:600}.text-btn.body{font-size:13px;font-weight:400}.empty-state{padding:40px 20px;text-align:center;color:#9ca3af;font-size:13px}.canvas-area{grid-area:canvas;position:relative;overflow:hidden;background:repeating-conic-gradient(#f4f4f7,#f4f4f7 25%,#fff 0%,#fff 50%) 50% / 24px 24px}.canvas-host{position:absolute;top:0;right:0;bottom:0;left:0}.zoom-bar{position:absolute;bottom:16px;right:16px;background:#fff;border:1px solid #e6e6ec;border-radius:10px;display:flex;align-items:center;gap:4px;padding:4px;box-shadow:0 4px 12px #0000000f}.zoom-bar button{width:32px;height:32px;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#0e1318;font-size:16px;display:inline-flex;align-items:center;justify-content:center}.zoom-bar button:hover{background:#f4f4f7}.zoom-bar .zoom-value{min-width:48px;text-align:center;font-size:12px;font-weight:600;color:#5e6470}.rightpanel{grid-area:rightpanel;background:#fff;border-left:1px solid #e6e6ec;display:flex;flex-direction:column;overflow:hidden}.right-section{display:flex;flex-direction:column;border-bottom:1px solid #e6e6ec;min-height:0}.right-section.layers{flex:1;min-height:200px}.right-section.props{flex:0 0 auto;max-height:60%;overflow-y:auto}.right-section .section-head{padding:12px 16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#5e6470;display:flex;align-items:center;justify-content:space-between;background:#fafafc}.section-head .badge{background:#f0e7ff;color:#8b3dff;border-radius:999px;padding:2px 8px;font-size:11px}.layer-list{flex:1;overflow-y:auto;padding:4px 8px 8px}.layer-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .1s ease;margin-bottom:2px}.layer-row:hover{background:#f4f4f7}.layer-row.active{background:#f0e7ff}.layer-row .name{flex:1;font-size:13px;font-weight:500;color:#0e1318;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row .layer-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:14px;color:#0e1318;flex-shrink:0}.layer-row.active .layer-icon{background:#fff}.layer-row .toggle{background:transparent;border:none;width:26px;height:26px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#5e6470;font-size:14px}.layer-row .toggle:hover{background:#0000000f;color:#0e1318}.layer-row.hidden .name{opacity:.4}.prop-body{padding:12px 16px 16px}.prop-empty{padding:32px 16px;text-align:center;color:#9ca3af;font-size:12px}.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.prop-row label{width:56px;font-size:11px;font-weight:600;color:#5e6470;text-transform:uppercase}.prop-row input[type=number],.prop-row input[type=text]{flex:1;min-width:0;height:32px;border:1px solid #e6e6ec;border-radius:6px;padding:0 8px;font-size:13px;outline:none}.prop-row input[type=number]:focus,.prop-row input[type=text]:focus{border-color:#8b3dff}.prop-row input[type=color]{width:32px;height:32px;border:1px solid #e6e6ec;border-radius:6px;background:transparent;cursor:pointer;padding:2px}.prop-row input[type=range]{flex:1;min-width:0}.prop-row .pair{display:flex;gap:6px;flex:1}.prop-row .pair input{width:100%}.prop-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}.prop-actions button{background:#f4f4f7;border:1px solid transparent;border-radius:6px;padding:8px 4px;font-size:11px;font-weight:500;color:#0e1318;cursor:pointer;transition:all .1s ease}.prop-actions button:hover{background:#fff;border-color:#8b3dff}.prop-actions button.danger{color:#ef4444}.prop-actions button.danger:hover{border-color:#ef4444;background:#fef2f2}.icon-btn-active{background:#f0e7ff!important;color:#8b3dff!important}.text-btn.draw-active{background:#ec4899!important;color:#fff!important;border-color:#ec4899!important}.align-section{margin-top:12px;padding-top:12px;border-top:1px solid #e6e6ec}.align-label{font-size:11px;font-weight:600;color:#5e6470;text-transform:uppercase;letter-spacing:.5px;margin:8px 0 6px}.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.align-grid.two{grid-template-columns:repeat(2,1fr)}.align-grid button{background:#f4f4f7;border:1px solid transparent;border-radius:6px;padding:8px 4px;font-size:11px;font-weight:500;color:#0e1318;cursor:pointer}.align-grid button:hover{background:#fff;border-color:#8b3dff}.ungroup-btn{width:100%;background:#f4f4f7;border:1px solid transparent;border-radius:6px;padding:10px;font-size:12px;font-weight:600;color:#0e1318;cursor:pointer}.ungroup-btn:hover{background:#fff;border-color:#8b3dff}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e131880;display:flex;align-items:center;justify-content:center;z-index:100}.dialog{background:#fff;border-radius:16px;padding:24px;width:480px;max-width:calc(100vw - 32px);box-shadow:0 24px 48px #0003}.dialog h2{margin:0 0 4px;font-size:18px;font-weight:700}.dialog p{margin:0 0 16px;color:#5e6470;font-size:13px}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.format-card{padding:14px 6px;background:#f4f4f7;border:2px solid transparent;border-radius:10px;cursor:pointer;text-align:center;transition:all .1s ease}.format-card:hover{background:#fff;border-color:#d4b8ff}.format-card.active{background:#f0e7ff;border-color:#8b3dff}.format-card .fmt-name{font-size:13px;font-weight:700;color:#0e1318}.format-card .fmt-ext{font-size:11px;color:#5e6470;margin-top:2px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.dialog-actions button{background:#f4f4f7;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}.dialog-actions .primary{background:#8b3dff;color:#fff}.dialog-actions .primary:hover{background:#7a2fef}