:root{color-scheme:dark;--bg: #2c2c2c;--text: #f6f7f9;--muted: rgba(255, 255, 255, .55);--accent: #0d99ff;--float-bg: rgba(44, 44, 44, .94);--float-border: rgba(255, 255, 255, .08);--float-shadow: 0 4px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);--float-radius: 14px;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text)}.app{height:100%;position:relative}.floating-panel{background:var(--float-bg);border:1px solid var(--float-border);border-radius:var(--float-radius);box-shadow:var(--float-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto;z-index:40}.screen-list{display:none}.floating-layers{position:absolute;top:16px;left:16px;bottom:80px;width:260px;display:flex;flex-direction:column;padding:12px 10px 10px;min-height:0;overflow:hidden}.floating-props{position:absolute;top:16px;right:16px;bottom:80px;width:260px;display:flex;flex-direction:column;padding:0;min-height:0;overflow:auto}.floating-layers-brand{font-weight:800;font-size:15px;letter-spacing:.02em;padding:2px 6px 10px;flex:0 0 auto}.floating-layers-brand span{color:var(--accent)}.layers-panel{flex:1;min-height:0;display:flex;flex-direction:column}.layers-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 2px 8px 6px}.layers-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:transparent;color:#ffffff8c;cursor:pointer;flex:0 0 auto}.layers-collapse-btn:hover{background:#ffffff1a;color:#ffffffeb}.layers-tree{flex:1;overflow:auto;padding-bottom:4px;margin:0 -2px;padding-inline:2px}.layers-tree::-webkit-scrollbar{width:6px}.layers-tree::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:999px}.layer-branch{margin-bottom:2px}.layer-row{width:100%;display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--text);text-align:left;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:12px}.layer-row:hover{background:#ffffff1a}.layer-row.active{background:#0d99ff47}.layer-row.screen-selected:not(.active){background:#ffffff0f}.layer-chevron{width:14px;height:14px;flex:0 0 14px;display:inline-flex;align-items:center;justify-content:center;color:#ffffff73}.layer-chevron.spacer{visibility:hidden}.layer-icon{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:#ffffffe0;line-height:0}.layer-icon svg{display:block}.layer-icon.type-group{color:#8ab4f8}.layer-icon.type-text{color:#ffffffc7}.layer-row.active .layer-icon,.layer-row.active .layer-chevron{color:#fff}.group-outline{position:absolute;pointer-events:none;box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #70b0ff;z-index:20;box-sizing:border-box}.group-outline--component{box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #9747ff}.node-hover-outline{position:absolute;pointer-events:none;box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #70b0ff;z-index:20;box-sizing:border-box}.node-hover-ancestor{position:absolute;pointer-events:none;box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #70b0ff;z-index:19;box-sizing:border-box}.node-hover-sibling{position:absolute;pointer-events:none;outline:calc(1.5px / var(--canvas-zoom, 1)) dashed #70b0ff;outline-offset:0;z-index:19;box-sizing:border-box}.layer-row.hovered{background:#0d99ff29}.layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layers-empty{padding:8px;color:var(--muted);font-size:12px}.screen-item{display:none}.floating-header{position:absolute;top:16px;left:292px;right:292px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 14px;min-height:48px}.toolbar-left{display:flex;align-items:center;gap:12px;min-width:0}.toolbar-right{display:flex;align-items:center;gap:4px;padding:2px;border-radius:10px;background:#00000047;flex:0 0 auto}.floating-header h1{margin:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{font-size:12px;color:var(--muted);white-space:nowrap}.tool-btn{border:none;background:transparent;color:#ffffffe0;border-radius:8px;min-width:34px;height:32px;padding:0 10px;cursor:pointer;font-size:13px;font-weight:600}.tool-btn:hover{background:#ffffff1a}.tool-btn.active{background:#0d99ff;color:#fff}.zoom-label{min-width:44px;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#2c2c2c}.infinite-viewport{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none;background-color:#2c2c2c;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px}.infinite-viewport.tool-move,.infinite-viewport.tool-move *{cursor:url(/cursors/select.png) 3 3,url(/cursors/select.svg) 2 2,default!important}.infinite-viewport.tool-move .resize-handle.resize-nw,.infinite-viewport.tool-move .resize-handle.resize-se{cursor:nwse-resize!important}.infinite-viewport.tool-move .resize-handle.resize-ne,.infinite-viewport.tool-move .resize-handle.resize-sw{cursor:nesw-resize!important}.infinite-viewport.tool-move .resize-edge-n,.infinite-viewport.tool-move .resize-edge-s{cursor:ns-resize!important}.infinite-viewport.tool-move .resize-edge-e,.infinite-viewport.tool-move .resize-edge-w,html[data-figmashow-resize=ew-resize] .infinite-viewport.tool-move,html[data-figmashow-resize=ew-resize] .infinite-viewport.tool-move *{cursor:ew-resize!important}html[data-figmashow-resize=ns-resize] .infinite-viewport.tool-move,html[data-figmashow-resize=ns-resize] .infinite-viewport.tool-move *{cursor:ns-resize!important}html[data-figmashow-resize=nwse-resize] .infinite-viewport.tool-move,html[data-figmashow-resize=nwse-resize] .infinite-viewport.tool-move *{cursor:nwse-resize!important}html[data-figmashow-resize=nesw-resize] .infinite-viewport.tool-move,html[data-figmashow-resize=nesw-resize] .infinite-viewport.tool-move *{cursor:nesw-resize!important}.infinite-viewport.panning,.infinite-viewport.panning *{cursor:grab!important}.infinite-viewport.panning.is-panning,.infinite-viewport.panning.is-panning *{cursor:grabbing!important}.infinite-viewport.panning.is-panning .infinite-world,.infinite-viewport.is-panning .infinite-world{pointer-events:none}.infinite-world{--canvas-zoom: 1}.artboard{position:absolute;-webkit-user-select:none;user-select:none}.artboard-label{height:28px;display:flex;align-items:flex-end;padding-bottom:6px;font-size:12px;font-weight:600;color:#ffffffb8;letter-spacing:.01em}.artboard .phone{box-shadow:0 12px 40px #00000059}.artboard.selected .phone{box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #70b0ff,0 12px 40px #00000059}.artboard.selected .artboard-label{color:#a8d0ff}.phone{position:relative;width:390px;height:844px;border-radius:0;overflow:hidden;background:#fff}.alt-drag-proxy{z-index:18!important}.smart-guides-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:60;overflow:visible}.smart-guide{position:absolute;background:#f11ad6;pointer-events:none}.smart-guide-x{width:1.5px;transform:translate(-50%) scaleX(calc(1 / var(--canvas-zoom, 1)));transform-origin:center top}.smart-guide-y{height:1.5px;transform:translateY(-50%) scaleY(calc(1 / var(--canvas-zoom, 1)));transform-origin:left center}.smart-guide-mark{position:absolute;width:7px;height:7px;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));pointer-events:none}.smart-guide-mark:before,.smart-guide-mark:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:1.5px;background:#f11ad6}.smart-guide-mark:before{transform:translate(-50%,-50%) rotate(45deg)}.smart-guide-mark:after{transform:translate(-50%,-50%) rotate(-45deg)}.size-label{position:absolute;transform:translate(-50%) scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top center;padding:2px 6px;border-radius:4px;background:#0d99ff;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.4;pointer-events:none;box-shadow:0 1px 4px #00000040}.node{position:absolute;overflow:hidden;cursor:pointer}.phone.drag-enabled .node{cursor:url(/cursors/select.png) 3 3,default}.node-text{white-space:pre-wrap;word-break:break-word;overflow:visible}.node-icon{font-family:Material Icons,sans-serif;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:"liga";-webkit-user-select:none;user-select:none;overflow:visible}.node-button{display:flex;align-items:center;justify-content:center;text-align:center}.node-button-icon{width:20px;height:20px;flex:0 0 20px;object-fit:contain;background:#fff;border-radius:2px}.node-image{overflow:hidden;background:transparent}.empty{color:var(--muted);text-align:center;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}.empty p{margin:0}.empty-cta,.layers-add-screen-btn{border:none;border-radius:8px;padding:8px 14px;background:#0d99ff;color:#fff;font-size:13px;font-weight:600;cursor:pointer}.empty-cta:hover,.layers-add-screen-btn:hover{background:#0b8ae6}.layers-header-actions{display:flex;align-items:center;gap:2px}.layers-empty-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 6px}.figma-tools-bar{position:absolute;left:50%;bottom:16px;transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--float-radius);background:var(--float-bg);border:1px solid var(--float-border);box-shadow:var(--float-shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto}.figma-tools-group{display:flex;align-items:center;gap:2px}.figma-tools-group--inset{padding:2px;border-radius:10px;background:#00000047}.figma-tools-divider{width:1px;height:24px;margin:0 4px;background:#ffffff1f;flex:0 0 1px}.figma-tool-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1px;width:36px;height:36px;padding:0;border:none;border-radius:8px;background:transparent;color:#ffffffe0;cursor:pointer;transition:background .12s ease,color .12s ease}.figma-tool-btn.has-chevron{width:44px;padding-right:2px}.figma-tool-btn:hover{background:#ffffff1a}.figma-tool-btn.is-active{background:#0d99ff;color:#fff}.figma-tool-btn.is-active:hover{background:#0b8ae6}.figma-tool-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:0}.figma-tool-chevron{display:inline-flex;align-items:center;justify-content:center;width:8px;height:8px;opacity:.7;margin-left:1px}.figma-tool-btn.is-active .figma-tool-chevron{opacity:.95}.props-panel{--prop-input-bg: rgba(0, 0, 0, .28);--prop-divider: rgba(255, 255, 255, .08);--prop-radius: 6px;display:flex;flex-direction:column;gap:0;font-size:12px;padding:4px 0 12px}.props-empty{color:var(--muted);margin:16px 14px;font-size:12px}.prop-header{display:flex;align-items:center;gap:8px;padding:10px 12px 12px;min-width:0}.prop-header-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}.prop-name-input,.prop-name-static{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;padding:2px 0;outline:none}.prop-name-input:focus{color:#fff}.prop-name-static{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prop-type-badge{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.02em;white-space:nowrap}.prop-section{border-top:1px solid var(--prop-divider);padding:10px 12px}.prop-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;min-height:16px}.prop-section-title{font-size:11px;font-weight:600;color:#ffffffc7}.prop-section-body{display:flex;flex-direction:column;gap:6px}.prop-row{display:flex;gap:6px;align-items:center}.prop-row--gap{margin-top:2px}.prop-inline{display:flex;align-items:center;gap:4px;flex:1;min-width:0;height:28px;padding:0 8px;border-radius:var(--prop-radius);background:var(--prop-input-bg);border:1px solid transparent}.prop-inline:focus-within{border-color:#0d99ffb3;box-shadow:0 0 0 1px #0d99ff40}.prop-inline.is-disabled{opacity:.45}.prop-inline-label{color:var(--muted);font-size:11px;font-weight:500;flex:0 0 auto;min-width:10px}.prop-inline input{flex:1;min-width:0;width:100%;border:none;background:transparent;color:var(--text);font:inherit;font-size:12px;padding:0;outline:none;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.prop-inline input::-webkit-outer-spin-button,.prop-inline input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.prop-inline-suffix{color:var(--muted);font-size:11px;flex:0 0 auto}.prop-fill-row{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.prop-swatch{position:relative;width:20px;height:20px;flex:0 0 auto;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:linear-gradient(45deg,#777 25%,transparent 25%),linear-gradient(-45deg,#777 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#777 75%),linear-gradient(-45deg,transparent 75%,#777 75%),#bbb;background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.prop-swatch-chip{display:block;width:100%;height:100%}.prop-swatch.is-empty .prop-swatch-chip{opacity:0!important}.prop-swatch.is-empty:after{content:"";position:absolute;left:-3px;top:9px;width:26px;height:1px;background:#ff4d57;transform:rotate(-45deg);pointer-events:none;z-index:1}.prop-swatch input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;border:none;padding:0;width:100%;height:100%}.prop-hex{flex:1;min-width:0;height:28px;border:1px solid transparent;border-radius:var(--prop-radius);background:var(--prop-input-bg);color:var(--text);font:inherit;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:0 8px;outline:none}.prop-hex:focus{border-color:#0d99ffb3}.prop-fill-row .prop-inline{flex:0 0 64px}.prop-stroke-row{display:flex;flex-direction:column;gap:6px}.prop-align-row{display:flex;gap:2px}.prop-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#ffffffc7;cursor:pointer}.prop-icon-btn:hover:not(:disabled){background:#ffffff14;color:#fff}.prop-icon-btn.is-active{background:#0d99ff38;color:#7cc4ff}.prop-icon-btn:disabled{opacity:.35;cursor:default}.prop-layer-toggles{display:flex;align-items:center;gap:1px}.prop-chip-btn{flex:1;height:28px;border:none;border-radius:var(--prop-radius);background:var(--prop-input-bg);color:#fffc;font:inherit;font-size:11px;cursor:pointer}.prop-chip-btn:hover:not(:disabled){background:#ffffff1a}.prop-chip-btn:disabled{opacity:.35;cursor:default}.prop-textarea,.prop-select,.prop-text-full{width:100%;border:1px solid transparent;border-radius:var(--prop-radius);background:var(--prop-input-bg);color:var(--text);font:inherit;font-size:12px;padding:6px 8px;outline:none;resize:vertical}.prop-select{height:28px;padding-top:0;padding-bottom:0}.prop-textarea:focus,.prop-select:focus,.prop-text-full:focus{border-color:#0d99ffb3}.prop-mini-label{color:var(--muted);font-size:11px;flex:0 0 auto}.layer-row.is-hidden .layer-label{opacity:.45}.layer-row.is-locked .layer-label:after{content:" · lock";font-size:10px;opacity:.6}.layer-order-btns button{font-size:9px;letter-spacing:-.02em;text-transform:uppercase}.inline-text-editor{position:absolute;z-index:40;margin:0;padding:2px 4px;border:calc(1.5px / var(--canvas-zoom, 1)) solid #0d99ff;border-radius:calc(2px / var(--canvas-zoom, 1));background:#fffffff5;outline:none;resize:none;font-family:inherit;line-height:1.2;box-sizing:border-box;overflow:hidden}.node-locked{cursor:default}.resize-handles{position:absolute;pointer-events:none;z-index:30}.resize-handle{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid #70b0ff;border-radius:1px;padding:0;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:2}.resize-nw{left:0;top:0;cursor:nwse-resize}.resize-ne{left:100%;top:0;cursor:nesw-resize}.resize-se{left:100%;top:100%;cursor:nwse-resize}.resize-sw{left:0;top:100%;cursor:nesw-resize}.center-handle{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:0;padding:0;border:none;background:transparent;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:4;cursor:move}.center-handle:before,.center-handle:after{content:"";position:absolute;left:50%;top:50%;background:#70b0ff}.center-handle:before{width:9px;height:1px;transform:translate(-50%,-50%)}.center-handle:after{width:1px;height:9px;transform:translate(-50%,-50%)}.center-handle-label{position:absolute;left:60%;bottom:60%;color:#0d99ff;font-size:11px;font-weight:500;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s ease}.center-handle:hover .center-handle-label{opacity:1}.resize-edge{position:absolute;padding:0;margin:0;border:none;background:transparent;pointer-events:auto;z-index:1}.resize-edge-n{left:calc(8px / var(--canvas-zoom, 1));right:calc(8px / var(--canvas-zoom, 1));top:0;height:calc(10px / var(--canvas-zoom, 1));transform:translateY(-50%);cursor:ns-resize}.resize-edge-s{left:calc(8px / var(--canvas-zoom, 1));right:calc(8px / var(--canvas-zoom, 1));bottom:0;height:calc(10px / var(--canvas-zoom, 1));transform:translateY(50%);cursor:ns-resize}.resize-edge-w{top:calc(8px / var(--canvas-zoom, 1));bottom:calc(8px / var(--canvas-zoom, 1));left:0;width:calc(10px / var(--canvas-zoom, 1));transform:translate(-50%);cursor:ew-resize}.resize-edge-e{top:calc(8px / var(--canvas-zoom, 1));bottom:calc(8px / var(--canvas-zoom, 1));right:0;width:calc(10px / var(--canvas-zoom, 1));transform:translate(50%);cursor:ew-resize}.create-preview{position:absolute;pointer-events:none;box-shadow:0 0 0 calc(1.5px / var(--canvas-zoom, 1)) #70b0ff;background:#70b0ff1f;z-index:25}.radius-handle{position:absolute;width:9px;height:9px;margin:0;padding:0;border:1.5px solid #0d99ff;border-radius:50%;background:#fff;pointer-events:auto;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:3;box-sizing:border-box;cursor:url(/cursors/radius.svg) 12 12,crosshair}.rotate-zone{position:absolute;width:36px;height:36px;margin:0;padding:0;border:none;background:transparent;pointer-events:auto;z-index:0;cursor:url(/cursors/rotate.svg) 12 12,grab}.rotate-zone-nw{left:0;top:0;transform:translate(-100%,-100%) scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:bottom right}.rotate-zone-ne{left:100%;top:0;transform:translateY(-100%) scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:bottom left}.rotate-zone-se{left:100%;top:100%;transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left}.rotate-zone-sw{left:0;top:100%;transform:translate(-100%) scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top right}.infinite-viewport.tool-move .radius-handle{cursor:url(/cursors/radius.svg) 12 12,crosshair!important}.infinite-viewport.tool-move .rotate-zone{cursor:url(/cursors/rotate.svg) 12 12,grab!important}.chrome-drag-label{position:absolute;display:none;transform:translate(-50%,-100%) scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:bottom center;padding:2px 6px;border-radius:4px;background:#0d99ff;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.4;pointer-events:none;z-index:70;box-shadow:0 1px 4px #00000040}html[data-figmashow-resize=rotate] .infinite-viewport.tool-move,html[data-figmashow-resize=rotate] .infinite-viewport.tool-move *{cursor:url(/cursors/rotate.svg) 12 12,grab!important}html[data-figmashow-resize=radius] .infinite-viewport.tool-move,html[data-figmashow-resize=radius] .infinite-viewport.tool-move *{cursor:url(/cursors/radius.svg) 12 12,crosshair!important}.phone.create-tool{cursor:crosshair}.layer-rename{flex:1;min-width:0;background:#00000059;border:1px solid var(--accent);border-radius:4px;color:#fff;font:inherit;font-size:12px;padding:2px 4px}.layer-order-btns{display:inline-flex;gap:2px;margin-left:auto;padding-right:4px}.layer-order-btns button{background:transparent;border:none;color:#ffffffb3;cursor:pointer;padding:0 3px;font-size:11px;line-height:1}.layer-order-btns button:hover{color:#fff}.layer-row.node-row{display:flex;align-items:center;width:100%;gap:4px;cursor:pointer}.export-menu-wrap{position:relative;display:inline-flex}.export-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:120px;padding:4px;border-radius:8px;background:#1e1e1e;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px #00000073;z-index:200;display:flex;flex-direction:column;gap:2px}.export-dropdown button{background:transparent;border:none;color:#e8e8e8;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:12px}.export-dropdown button:hover{background:#ffffff14}.prop-constraint-row{display:flex;align-items:flex-start;gap:12px}.prop-constraint-labels{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;min-width:0}.constraint-pin{flex:1;min-width:0;padding:6px 0;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:#ffffff0a;color:#ffffffbf;font-size:11px;font-weight:600;cursor:pointer}.constraint-pin.is-active{background:#0d99ff40;border-color:#0d99ff;color:#fff}.constraint-help{margin:6px 0 0;font-size:11px;line-height:1.4;color:var(--muted)}.constraint-diagram{position:relative;width:56px;height:56px;flex:0 0 auto;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:#ffffff08}.constraint-edge{position:absolute;margin:0;padding:0;border:none;background:#ffffff38;cursor:pointer}.constraint-edge.is-active{background:#0d99ff;box-shadow:0 0 0 1px #0d99ff59}.constraint-edge-left{left:6px;top:14px;width:3px;height:28px;border-radius:2px}.constraint-edge-right{right:6px;top:14px;width:3px;height:28px;border-radius:2px}.constraint-edge-top{top:6px;left:14px;width:28px;height:3px;border-radius:2px}.constraint-edge-bottom{bottom:6px;left:14px;width:28px;height:3px;border-radius:2px}.constraint-diagram-inner{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.35);border-radius:2px;pointer-events:none}.constraint-guides{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:28;overflow:visible}.constraint-guide{position:absolute;background:#0d99ff;transform-origin:0 0;opacity:.95}.constraint-guide-h{height:1px;transform:translateY(-50%) scaleY(calc(1 / var(--canvas-zoom, 1)));background-image:repeating-linear-gradient(to right,#0d99ff 0,#0d99ff 4px,transparent 4px,transparent 7px);background-color:transparent}.constraint-guide-v{width:1px;transform:translate(-50%) scaleX(calc(1 / var(--canvas-zoom, 1)));background-image:repeating-linear-gradient(to bottom,#0d99ff 0,#0d99ff 4px,transparent 4px,transparent 7px);background-color:transparent}.constraint-guide-center{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));pointer-events:none}.constraint-guide-center:before,.constraint-guide-center:after{content:"";position:absolute;left:50%;top:50%;background:#0d99ff}.constraint-guide-center:before{width:10px;height:1px;transform:translate(-50%,-50%)}.constraint-guide-center:after{width:1px;height:10px;transform:translate(-50%,-50%)}.prop-row--stack{flex-direction:column;align-items:stretch;gap:8px}.prop-link-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.prop-link-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#fffc;padding:4px 6px;border-radius:4px;background:#ffffff0a}.prop-link-delete{background:transparent;border:none;color:#fff9;cursor:pointer;font-size:14px;line-height:1}.prop-chip-btn--danger{color:#fca5a5}.prop-hint{margin:0;font-size:11px;line-height:1.45;color:var(--muted)}.prop-hint strong{color:#cbd5e1;font-weight:600}.comment-pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:#f59e0b;box-shadow:0 2px 6px #00000059;cursor:pointer;z-index:55;padding:0}.comment-pin.is-resolved{background:#6b7280;opacity:.75}.comment-pin.is-active{outline:2px solid #0d99ff;outline-offset:2px}.phone.comment-mode{cursor:crosshair}.prototype-link{position:absolute;display:flex;align-items:center;gap:4px;pointer-events:none;z-index:50;transform:translate(-100%,-50%)}.prototype-link:before{content:"";width:14px;height:14px;border-radius:50%;background:#8b5cf6;border:2px solid #fff;box-shadow:0 1px 6px #00000059;flex:0 0 auto}.prototype-link-label{font-size:10px;font-weight:600;line-height:1;color:#fff;background:#8b5cf6f2;padding:3px 6px;border-radius:4px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px #00000040}.node-instance .instance-visual{position:absolute;overflow:visible}.layers-components{border-top:1px solid rgba(255,255,255,.08);padding:8px 0 4px}.layers-components .layers-header{padding:4px 10px 6px;font-size:11px;color:#ffffff8c;text-transform:uppercase;letter-spacing:.04em}.component-row{padding:4px 10px;display:flex;align-items:center;gap:6px}.layers-insert-btn{margin-left:auto;background:#ffffff14;border:none;color:#e8e8e8;font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer}.layers-insert-btn:hover{background:#0d99ff4d}.prototype-preview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.prototype-preview-chrome{display:flex;align-items:center;gap:12px;width:min(100%,480px);color:#fff}.prototype-preview-title{flex:1;text-align:center;font-weight:600}.prototype-preview-stage{transition:opacity .22s ease}.prototype-preview-stage.is-dissolving{opacity:0}.prototype-preview-phone{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #00000080}.prototype-preview-trigger{position:absolute;background:transparent;border:none;cursor:pointer;z-index:10;padding:0}.prototype-preview-modal{background:#1e1e1e;padding:24px;border-radius:12px;color:#fff}.home-shell{display:flex;min-height:100%;background:#1e1e1e;color:var(--text)}.home-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;padding:20px 12px;border-right:1px solid rgba(255,255,255,.08);background:#2c2c2c}.home-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;font-weight:800;font-size:18px}.home-brand-mark{color:var(--accent)}.home-nav{display:flex;flex-direction:column;gap:4px}.home-nav-item{display:flex;align-items:center;gap:10px;border:none;background:transparent;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.home-nav-item:hover{background:#ffffff0f}.home-nav-item.active{background:#0d99ff2e;color:#fff}.home-sidebar-foot{margin-top:auto;padding:12px;font-size:12px;color:var(--muted)}.home-main{flex:1;min-width:0;padding:28px 32px 48px;overflow:auto}.home-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}.home-title{margin:0 0 6px;font-size:28px;font-weight:700}.home-subtitle{margin:0;color:var(--muted);font-size:14px}.home-new-btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:8px;padding:10px 16px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.home-new-btn:disabled{opacity:.6;cursor:wait}.home-new-icon,.home-brand-icon{flex-shrink:0}.home-nav-icon{flex-shrink:0;opacity:.85}.home-nav-item.active .home-nav-icon{opacity:1}.home-error{margin-bottom:16px;padding:10px 12px;border-radius:8px;background:#ef444426;color:#fca5a5;font-size:13px}.home-grid-wrap{min-height:200px}.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.home-empty{margin-top:24px;color:var(--muted);font-size:14px}.project-card{display:flex;flex-direction:column;gap:10px;background:transparent;border:none;padding:0;text-align:left;color:inherit}.project-card--new{align-items:center;justify-content:center;min-height:180px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;cursor:pointer;color:var(--muted)}.project-card--new:hover:not(:disabled){border-color:var(--accent);color:var(--text)}.project-card-new-icon{color:var(--muted)}.project-card--new:hover:not(:disabled) .project-card-new-icon{color:var(--accent)}.project-card-new-label{font-size:13px}.project-card-open{border:none;background:transparent;padding:0;cursor:pointer;width:100%}.project-card-thumb{aspect-ratio:5 / 3;border-radius:10px;border:1px solid rgba(255,255,255,.08);overflow:hidden;background:#ececec;display:flex;align-items:center;justify-content:center}.board-mini-preview-wrap{position:relative;width:100%;height:100%;min-height:120px}.board-mini-preview-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;border-radius:inherit}.board-mini-preview-img.visible{opacity:1}.board-mini-preview--hidden{visibility:hidden;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.board-mini-preview{width:100%;height:100%;background:#ececec;position:relative;overflow:hidden}.board-mini-canvas{position:relative;width:100%;height:100%}.board-mini-preview--loading{display:flex;align-items:center;justify-content:center}.board-mini-preview-shimmer{width:60%;height:8px;border-radius:4px;background:linear-gradient(90deg,#0000000f,#0000001f,#0000000f);animation:home-shimmer 1.2s ease-in-out infinite}@keyframes home-shimmer{0%,to{opacity:.5}50%{opacity:1}}.board-mini-preview--empty{background:linear-gradient(160deg,#334155,#1e293b)}.project-card-phone{display:none}.project-card-meta{padding:0 2px}.project-card-row{display:flex;align-items:center;gap:8px}.project-card-sub{justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}.project-card-type{display:inline-flex;color:var(--accent)}.project-card-name{border:none;background:transparent;color:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0;text-align:left}.project-card-name:hover{color:var(--accent)}.project-card-menu,.project-card-trash,.project-card-actions button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px;display:inline-flex;align-items:center}.project-card-actions button.danger{color:#f87171}.home-back-link{display:inline-flex;align-items:center;margin-right:12px;padding:6px 10px;border-radius:8px;background:#ffffff0f;color:var(--text);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}.home-back-link:hover{background:#ffffff1a}