:root{font-family:Inter,"Segoe UI",sans-serif;color:#20242c;background:#fff;font-size:14px;--accent:#273ce9;--border:#e6e8ed;--muted:#737b8b;--soft:#f5f6f9}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;border-radius:7px;min-height:32px;padding:6px 10px}button:hover{background:#eef0f7}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:#fff;padding:9px 17px;font-weight:600}.primary:hover{background:#1c2cbc}.secondary{background:#f1f2f6;border:1px solid #e1e4ea}.topbar{height:68px;padding:0 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:9px;padding:0}.brand strong{font-size:24px;letter-spacing:-1px}.mark{width:31px;height:31px;border-radius:9px;background:var(--accent);color:white;display:grid;place-items:center;font-weight:800;font-size:29px;line-height:1}.badge{font-size:10px;letter-spacing:1px;color:var(--muted);border:1px solid var(--border);padding:3px 5px;border-radius:4px;margin-left:5px}.divider{height:22px;width:1px;background:var(--border);flex-shrink:0}#document-name{width:255px;border:0;background:transparent;font-weight:600;padding:8px}#save-state{font-size:12px;color:var(--muted);white-space:nowrap}.top-actions{margin-left:auto;display:flex;gap:5px}.workspace{display:grid;grid-template-columns:234px minmax(280px,1fr) 270px;height:calc(100dvh - 68px);min-height:500px}.left-panel,.right-panel{overflow:auto;background:#fff}.left-panel{border-right:1px solid var(--border);display:flex;flex-direction:column}.right-panel{border-left:1px solid var(--border)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 16px 10px;min-height:48px}.panel-heading strong{font-weight:600}.panel-heading span{font-size:12px;color:var(--muted)}.page{display:flex;align-items:center;margin:4px 10px;padding:8px;border-radius:6px;gap:8px}.page.active{background:#eef0ff;color:var(--accent)}.page button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page button:last-child{font-size:12px;padding:3px 6px}.layer-heading{border-top:1px solid var(--border);margin-top:15px}.layer-actions{display:flex;gap:5px;padding:0 10px 12px}.layer-actions button{font-size:12px;background:var(--soft);flex:1}.layer{display:flex;align-items:center;min-height:35px;padding-right:7px;font-size:13px;gap:4px;border-left:2px solid transparent}.layer.selected{background:#edf0ff;border-left-color:var(--accent)}.layer-name{flex:1;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}.layer-icon{width:19px;color:#81899a;font-size:16px}.layer.component .layer-icon{color:#8257d6}.layer .tiny{padding:2px 4px;min-height:25px;font-size:12px;color:#6b7280}.layer.hidden .layer-name{opacity:.4}.local-note{margin-top:auto;padding:23px 16px;display:flex;gap:12px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}.note-icon{font-size:24px;color:var(--accent)}.local-note strong{font-size:12px;color:#4c5567}.local-note p{line-height:1.6;margin-bottom:0}.canvas-panel{position:relative;overflow:hidden;background:#edeff3;display:flex;flex-direction:column}.canvas-top{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;border-bottom:1px solid #dde1e7;background:#f8f9fb;z-index:1}.breadcrumb{display:flex;gap:12px;font-size:12px;color:#7c8493;min-width:0}.breadcrumb span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb span:first-child{color:#3e4758}.view-actions{display:flex;align-items:center;gap:1px;font-size:12px;flex-shrink:0}.view-actions button{padding:5px 7px;min-width:28px}#canvas{width:100%;flex:1;min-height:0;touch-action:none;user-select:none;outline:none}.toolbar{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:#252934;padding:7px;border-radius:13px;box-shadow:0 8px 24px #242b3b25;color:#cad0dd;z-index:1}.toolbar button{width:36px;height:36px;display:grid;place-items:center;padding:8px}.toolbar button:hover{background:#3b4252}.toolbar button.active{background:#5363f2;color:white}.toolbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool-divider{height:20px;width:1px;background:#4c5363;margin:0 3px}.canvas-bottom{height:33px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 16px;border-top:1px solid #dce0e7;color:#7b8392;font-size:11px}.section{padding:16px;border-top:1px solid var(--border)}.section-title{font-weight:600;margin-bottom:14px;display:flex;justify-content:space-between}.section-title span{color:#8a91a0}.field-row{display:flex;gap:8px;margin-bottom:10px}.field{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px;font-size:12px;color:#768091}.field.full{margin-bottom:12px}.field input,.field select,.field textarea{width:100%;border:1px solid #e5e7ed;border-radius:6px;padding:8px;background:#f9fafc;color:#252c39;min-width:0}.field textarea{resize:vertical;min-height:70px}.field input[type=color]{padding:3px;height:34px}.check{display:flex;align-items:center;gap:8px;font-size:12px;color:#60697a;margin:10px 0}.wide{width:100%;border:1px solid #dfe3ea;min-height:35px;font-size:12px}.wide.primary{border:0;font-size:14px}.empty-inspector{padding:16px}.empty-inspector h2{font-size:21px;letter-spacing:-.5px;font-weight:600;margin:14px 0 10px}.empty-inspector p{font-size:13px;line-height:1.7;color:var(--muted)}.empty-icon{width:52px;height:52px;border-radius:14px;background:#f0f2ff;color:var(--accent);font-size:30px;display:grid;place-items:center;margin:9px 0 20px}.swatches{display:flex;gap:7px;margin-bottom:10px}.swatch{width:24px;height:24px;min-height:24px;padding:0;border:1px solid #0001;border-radius:50%}.align-row{display:flex;gap:3px}.align-row button{flex:1;font-size:12px;border:1px solid var(--border);padding:4px}.component-item{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:#7651ba}.component-item button{min-width:0;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}.small-note{font-size:12px;color:var(--muted);line-height:1.6}.export-section{margin-top:8px}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);border-radius:9px;background:#222837;color:white;padding:12px 20px;max-width:90vw;box-shadow:0 4px 24px #0002;z-index:10;display:none}dialog{width:550px;max-width:calc(100vw - 30px);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:0 20px 80px #0003;color:#253044}dialog::backdrop{background:#15203355}.dialog-head{display:flex;align-items:center;gap:12px}.dialog-head h2{font-size:23px;letter-spacing:-.5px;margin:0}.dialog-head button{margin-left:auto}dialog p{line-height:1.7}.shortcut-grid{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;background:#f5f6fa;padding:18px;border-radius:10px}kbd{font:12px Consolas,monospace;color:#68728a}.muted{color:var(--muted);font-size:12px}.handle{cursor:nwse-resize}.object{cursor:default}.frame-label{fill:#657083;font-family:"Segoe UI",sans-serif;pointer-events:none}.marquee{fill:#273ce910;stroke:#273ce9;stroke-width:1}.inspector-actions{display:flex;gap:7px;margin-top:12px}.inspector-actions button{flex:1;font-size:12px;border:1px solid var(--border)}
.croqueta-mark{width:38px;height:38px;background:transparent;border-radius:0;object-fit:contain;flex-shrink:0}.exporting .workspace,.exporting .topbar{pointer-events:none;opacity:.85}.exporting{cursor:progress}#prototype-dialog{width:min(1100px,95vw);max-height:95dvh;padding:16px;background:#f5f6fa}#prototype-name{margin-left:auto}#prototype-view{margin-top:14px;display:grid;place-items:center;max-height:75dvh;overflow:auto}#prototype-view svg{max-width:100%;max-height:70dvh;background:white;box-shadow:0 4px 20px #2222}#prototype-view [data-node]{cursor:pointer}.align-row{margin-bottom:7px}#inspector .wide{margin-top:5px}#inspector .section button{max-width:100%}
@media(min-width:1700px){.workspace{grid-template-columns:250px minmax(280px,1fr) 290px}}@media(max-width:1100px){#save-state{display:none}.workspace{grid-template-columns:190px minmax(250px,1fr) 240px}.badge{display:none}#document-name{width:190px}.toolbar{gap:0;padding:5px}.toolbar button{width:32px}.breadcrumb{max-width:160px}}@media(max-width:800px){.workspace{grid-template-columns:minmax(230px,1fr) 220px}.left-panel{display:none}.topbar{padding:0 10px;gap:8px}.brand strong{display:none}.topbar>.divider{display:none}#document-name{width:150px}.top-actions{gap:0}.top-actions button{padding:6px;font-size:12px}.toolbar{flex-wrap:wrap;max-width:90%;width:max-content;justify-content:center}.breadcrumb{display:none}.canvas-top{justify-content:flex-end}.canvas-bottom #hint{display:none}}@media(max-width:520px){.workspace{grid-template-columns:minmax(210px,1fr) 165px}.section{padding:10px}.panel-heading{padding:12px 10px}.field-row{gap:4px}.field input,.field select{padding:6px 3px}.top-actions #new{display:none}#document-name{width:95px;font-size:12px}.topbar{height:58px}.workspace{height:calc(100dvh - 58px)}.toolbar{bottom:45px;max-width:180px}.empty-inspector{padding:10px}.empty-inspector h2{font-size:17px}}
@media(max-width:520px){.topbar{height:96px;flex-wrap:wrap;align-content:center;gap:4px}.topbar #document-name{flex:1;width:120px}.topbar .top-actions{width:100%;justify-content:space-between}.workspace{height:calc(100dvh - 96px)}.top-actions button{font-size:11px;padding:6px 4px}.top-actions #save{font-size:10px}.canvas-bottom #snap{font-size:11px;padding:2px}}
#variables-dialog{width:min(1000px,95vw);max-height:90dvh}#variables-content{max-height:70dvh;overflow:auto;padding:8px}.variable-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.variable-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(70px,1fr) minmax(100px,1fr) auto;gap:8px;align-items:center;border-bottom:1px solid var(--border);padding:10px 0}.variable-row input,.variable-row select,.variable-row textarea{min-width:0;width:100%;padding:7px;border:1px solid #dce0eb;border-radius:6px}.variable-row textarea{max-height:90px}.variable-row input[type=color]{height:36px;padding:2px}@media(max-width:600px){.variable-row{grid-template-columns:1fr 1fr}.variable-row button{font-size:11px}}
#prototype-stack{position:relative}#prototype-overlay:not([hidden]){position:absolute;inset:0;background:#141b3d66;display:grid;place-items:center;padding:20px;z-index:2}.prototype-overlay-card{position:relative;max-width:90%;max-height:90%;overflow:auto;background:white;box-shadow:0 10px 50px #0005;border-radius:10px}.prototype-overlay-card>button{position:absolute;right:5px;top:5px;z-index:1;background:white}.prototype-overlay-card svg{display:block;max-width:100%;max-height:65dvh}

.canvas-menu{position:fixed;z-index:1000;min-width:170px;padding:6px;background:#fff;border:1px solid #d8deea;border-radius:10px;box-shadow:0 8px 32px #15213b26}.canvas-menu button{display:block;width:100%;text-align:left;border:0;padding:8px 12px;background:transparent}.canvas-menu button:hover,.canvas-menu button:focus-visible{background:#edf0ff}.canvas-menu[hidden]{display:none}

.local-input-dialog{width:min(440px,90vw);max-height:85dvh;padding:22px}.local-input-dialog h2{margin:0 0 12px;font-size:20px}.local-input-dialog p{font-size:13px;line-height:1.5;color:var(--muted)}.local-input-dialog .field{margin:12px 0}.local-input-dialog input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--border);border-radius:7px}.local-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}#input-dialog-error{color:#b32525}

.appearance-entry{border:1px solid var(--border);border-radius:8px;padding:9px;margin:8px 0}.appearance-entry summary{cursor:pointer;font-size:12px;font-weight:600}.appearance-entry .field{margin-top:10px}.appearance-actions{display:flex;flex-wrap:wrap;gap:3px}.appearance-actions button{font-size:11px;border:1px solid var(--border);padding:4px 6px}.appearance-stop{display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--border);margin:8px 0}.appearance-stop .field{min-width:58px}.appearance-stop button{font-size:11px}

.canvas-text-host{position:fixed;z-index:4;overflow:hidden;pointer-events:none}.canvas-text-host[hidden]{display:none}.canvas-text-editor{position:absolute;left:0;top:0;transform-origin:0 0;white-space:pre-wrap;overflow-wrap:anywhere;outline:1px solid var(--accent);outline-offset:2px;background:#ffffffef;caret-color:#273ce9;pointer-events:auto;box-sizing:content-box;padding:0;min-width:1px}.canvas-text-format{position:absolute;display:flex;gap:2px;padding:3px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px #0002;pointer-events:auto}.canvas-text-format button{font-size:11px;padding:4px 6px}

#canvas{touch-action:none}.layer-name[tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.local-input-dialog textarea{min-height:140px}