@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");:root{--ink:#18332d;--muted:#71807a;--paper:#f7f5ef;--panel:#fbfaf6;--line:#dedbd2;--accent:#ef6d43;--green:#2f6b5b}*{box-sizing:border-box}body,html{margin:0;height:100%;color:var(--ink);background:var(--paper);font-family:DM Sans,sans-serif}body{overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}.topbar{height:72px;flex:0 0 72px;display:grid;grid-template-columns:310px 1fr auto;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(251,250,246,.97);z-index:20}.brand,.topbar{align-items:center}.brand{display:flex;gap:11px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;color:#fff;border-radius:12px;background:var(--green)}.brand strong{display:block;font:800 16px/1.1 Manrope}.brand span:last-child{display:block;margin-top:3px;color:var(--muted);font-size:11px;letter-spacing:.04em}.project-title{justify-self:center;text-align:center}.project-title>span{display:block;color:#909993;font-size:8px;letter-spacing:.17em;font-weight:800}.project-title input{width:min(300px,30vw);border:0;border-bottom:1px solid transparent;background:transparent;text-align:center;padding:5px;font-weight:700;outline:none}.project-title input:focus{border-bottom-color:#aaa}.canvas-actions,.tool-switch,.top-actions{display:flex;align-items:center;gap:8px}.button{height:40px;padding:0 15px;border-radius:9px;border:0;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.button.secondary{background:#fff;border:1px solid #d8d5cc}.button.primary{background:var(--accent);color:#fff;box-shadow:0 5px 15px rgba(239,109,67,.22)}.icon-button{width:35px;height:35px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff}.workspace{flex:1 1;min-height:0;display:grid;grid-template-columns:292px minmax(470px,1fr) 270px}.left-panel,.right-panel{min-height:0;background:var(--panel);z-index:4}.left-panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)}.right-panel{overflow:auto;border-left:1px solid var(--line)}.panel-tabs{height:52px;flex:0 0 52px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.panel-tabs button{position:relative;border:0;background:transparent;color:#84908a;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:700}.panel-tabs button.active{color:var(--ink)}.panel-tabs button.active:after{content:"";position:absolute;height:2px;left:20px;right:20px;bottom:-1px;background:var(--accent)}.panel-scroll{flex:1 1;min-height:0;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;padding:22px 18px 30px}.panel-scroll::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:8px}.panel-scroll::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:#bcc4bf;border:2px solid transparent;border-radius:99px;background-clip:padding-box}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{color:#9b795f;text-transform:uppercase;font-size:8px;letter-spacing:.16em;font-weight:800}.panel-heading h2{margin:6px 0 0;font:800 19px/1.2 Manrope;letter-spacing:-.5px}.panel-heading>svg{color:#94a099}.hint{margin:8px 0 16px;color:var(--muted);font-size:11px;line-height:1.5}.block-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:9px;gap:9px}.block-grid button{min-height:82px;padding:11px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;border:1px solid #e1ded5;border-radius:11px;background:#fff}.block-grid button:hover{transform:translateY(-2px);border-color:#aac0b6;box-shadow:0 6px 16px rgba(35,55,48,.07)}.block-grid button>span{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#edf1eb;color:var(--green)}.block-grid strong{font-size:10px}.block-grid .plus{position:absolute;top:10px;right:10px;color:#9ca6a1}.section-title{margin:22px 2px 11px}.section-title p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.4}.tip{display:flex;gap:9px;margin-top:18px;padding:12px;border:1px solid #dae4d3;border-radius:11px;background:#eef3e7;color:#5d7961}.tip strong{font-size:10px}.tip p{margin:3px 0 0;font-size:9px;line-height:1.4}.panel-footer{flex:0 0 auto;padding:13px 18px 15px;border-top:1px solid var(--line);background:var(--panel)}.panel-footer>div:first-child{display:flex;justify-content:space-between;color:#75817c;font-size:9px}.panel-footer strong{color:var(--green)}.progress{height:4px;margin:7px 0 11px;border-radius:99px;background:#e3e3dc;overflow:hidden}.progress i{display:block;height:100%;background:var(--green)}.panel-footer button{width:100%;height:36px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:#fff;font-size:10px;font-weight:700}.note-field{display:block;margin:18px 0}.note-field span{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700}.note-field b{color:var(--accent);font-size:8px}.note-field textarea{width:100%;min-height:82px;resize:vertical;margin-top:7px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:10px;line-height:1.45;outline:none}.stage{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:#e8e5dc;overflow:hidden}.stage-toolbar{height:52px;flex:0 0 52px;padding:0 13px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #d5d2c9;background:rgba(247,245,239,.95);z-index:3}.stage-title{display:flex;align-items:center;gap:7px;font-size:10px}.stage-title span:last-child{color:#89938e}.status-dot{width:7px;height:7px;border-radius:50%;background:#73a66c;box-shadow:0 0 0 3px #dce8d7}.tool-switch{padding:3px;border-radius:8px;background:#e7e4dc}.tool-switch button{height:28px;padding:0 10px;border:0;border-radius:6px;display:flex;align-items:center;gap:5px;background:transparent;color:#7a8580;font-size:9px;font-weight:700}.tool-switch button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}.canvas-actions{justify-self:end}.canvas-actions>button:first-child{height:34px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:9px;font-weight:700}.canvas-viewport{flex:1 1;min-height:0;position:relative;overflow:hidden;touch-action:none}.canvas-viewport.panning{cursor:-webkit-grab;cursor:grab}.canvas-viewport.panning:active{cursor:-webkit-grabbing;cursor:grabbing}.canvas-scene{position:absolute;left:0;top:0;transform-origin:0 0;border:1px solid #c9c6bd;border-radius:14px;background-color:#fbfaf6;background-image:radial-gradient(#c7c8c0 1.1px,transparent 0);background-size:24px 24px;box-shadow:0 25px 70px rgba(42,55,49,.14)}.flow-item{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;cursor:-webkit-grab;cursor:grab;color:var(--ink)}.flow-item:active{cursor:-webkit-grabbing;cursor:grabbing}.flow-item.selected{outline:3px solid var(--accent);outline-offset:5px;border-radius:9px}.shape-item>.solid-shape,.shape-item>svg{position:absolute;inset:0;width:100%;height:100%}.solid-shape{border-radius:12px;background:var(--item)}.shape-item.start .solid-shape{border-radius:999px}.shape-item.connector .solid-shape{border-radius:50%}.shape-item span{position:absolute;inset:12px;display:grid;place-items:center;text-align:center;font:700 16px/1.25 Manrope;pointer-events:none}.shape-item.subprocess .solid-shape{border-radius:8px}.shape-item.subprocess i{position:absolute;top:0;bottom:0;width:5px;border-left:2px solid rgba(24,51,45,.3);border-right:2px solid rgba(24,51,45,.3);z-index:2}.sub-left{left:12px}.sub-right{right:12px}.arrow-item svg{width:100%;height:100%;overflow:visible}.arrow-item span{position:absolute;left:50%;top:-7px;transform:translate(-50%,-100%);padding:4px 7px;border-radius:5px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);font-size:12px;font-weight:700}.ui-item{overflow:hidden;border-radius:12px}.ui-item h2,.ui-item p{margin:0}.ui-item h2{font:800 30px/1.05 Manrope}.ui-item p{color:#64736e;font-size:16px}.ui-item.button button{padding:0 18px;border:0;border-radius:12px;justify-content:space-between;color:#fff;background:var(--item);font-weight:700}.ui-item.button button,.ui-item.field>div{width:100%;height:100%;display:flex;align-items:center}.ui-item.field>div{padding:0 15px;gap:10px;border:1px solid #d9d5cb;border-radius:11px;color:#73807b;background:#f5f2ea}.ui-item.image{background:var(--item)}.ui-item.image img{width:100%;height:100%;object-fit:cover}.image-placeholder{width:100%;height:100%;display:grid;place-items:center;align-content:center;grid-gap:8px;gap:8px;color:#47665d;background:linear-gradient(135deg,var(--item),#eef0d6)}.card-preview{width:100%;height:100%;padding:16px;display:flex;flex-direction:column;background:var(--item)}.card-preview small{font-size:9px;letter-spacing:.12em}.card-preview strong{margin-top:9px}.card-preview span{margin-top:auto;font-size:11px}.nav-preview{width:100%;height:100%;padding:0 14px;display:flex;align-items:center;gap:9px;background:var(--item)}.nav-preview svg:last-child{margin-left:auto}.zoom-controls{position:absolute;right:18px;bottom:18px;height:38px;display:flex;overflow:hidden;border:1px solid #d5d2ca;border-radius:9px;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.1)}.zoom-controls button{min-width:38px;border:0;border-right:1px solid #e4e1d9;display:grid;place-items:center;background:#fff}.zoom-controls .zoom-value{width:58px;font-size:9px;font-weight:700}.canvas-help{position:absolute;left:18px;bottom:18px;padding:9px 12px;gap:6px;border-radius:8px;background:rgba(251,250,246,.92);color:#6f7b76;font-size:9px;box-shadow:0 4px 14px rgba(0,0,0,.07)}.canvas-help,.inspector-title{display:flex;align-items:center}.inspector-title{height:52px;padding:0 14px;border-bottom:1px solid var(--line)}.inspector-title>div{display:flex;align-items:center;gap:8px;font-size:11px}.selected-type{padding:16px 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.selected-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--green);background:#edf1eb}.selected-type small{display:block;color:#919b96;font-size:7px;letter-spacing:.14em;font-weight:800}.selected-type strong{display:block;margin-top:4px;font-size:11px}.property{display:block;padding:13px 15px 0;color:#7d8983;font-size:8px;font-weight:700;letter-spacing:.04em}.color-field>input:last-child,.property>input{width:100%;height:34px;margin-top:6px;padding:0 9px;border:1px solid #dcd9d0;border-radius:7px;background:#fff;color:var(--ink);font-size:10px;outline:none}.color-field{display:grid;grid-template-columns:35px 1fr;grid-gap:7px;gap:7px}.color-field input[type=color]{width:35px;height:34px;margin-top:6px;padding:3px;border:1px solid var(--line);border-radius:7px;background:#fff}.two-properties{display:grid;grid-template-columns:1fr 1fr}.upload{height:40px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px dashed #b7c4be;border-radius:8px;color:var(--green);background:#f5f8f4}.upload input{display:none}.delete-button{width:calc(100% - 30px);height:38px;margin:18px 15px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #efd7cf;border-radius:8px;background:#fff8f5;color:#bd5b3d;font-size:9px;font-weight:700}.checklist{margin:0 15px 20px;padding-top:15px;border-top:1px solid var(--line)}.checklist p{margin:9px 0 0;color:#66746f;font-size:9px}.empty-inspector{padding:60px 25px;text-align:center;color:#89948e}.empty-inspector strong{display:block;margin-top:10px;color:var(--ink);font-size:12px}.empty-inspector p{font-size:9px;line-height:1.5}.canvas-expanded .stage{position:fixed;inset:0;z-index:100}.canvas-expanded .stage-toolbar{height:58px;flex-basis:58px}.toast{position:fixed;left:50%;bottom:25px;z-index:200;transform:translateX(-50%);padding:11px 16px;border-radius:9px;background:var(--ink);color:#fff;font-size:10px;box-shadow:0 8px 30px rgba(0,0,0,.22)}.modal-backdrop{position:fixed;inset:0;z-index:150;padding:24px;display:grid;place-items:center;background:rgba(20,40,34,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal{width:min(1180px,calc(100vw - 48px));height:min(760px,calc(100vh - 48px));position:relative;overflow:hidden;border-radius:22px;background:#f6f2e8;box-shadow:0 35px 100px rgba(0,0,0,.3)}.modal-close{position:absolute;top:17px;right:17px;z-index:5;width:38px;height:38px;border:1px solid rgba(0,0,0,.1);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92)}.export-actions{position:absolute;top:17px;right:68px;z-index:5;display:flex;gap:7px}.export-actions button{height:38px;padding:0 12px;border:1px solid rgba(0,0,0,.1);border-radius:9px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);font-size:9px;font-weight:700}.preview-layout{width:100%;height:100%;display:grid;grid-template-columns:280px 1fr;grid-gap:30px;gap:30px;align-items:center;padding:65px;background-image:radial-gradient(#d4d0c6 .8px,transparent 0);background-size:18px 18px}.preview-layout h2{margin:10px 0 15px;font:800 42px/.98 Manrope;letter-spacing:-1.8px}.preview-layout p{color:var(--muted);font-size:13px;line-height:1.6}.preview-board{width:100%;height:100%;min-height:500px;position:relative;overflow:hidden;border-radius:18px;background:#fbfaf6;box-shadow:0 22px 60px rgba(37,55,48,.16)}.preview-scene{position:absolute;left:50%;top:50%;transform-origin:0 0}.presentation-layout{width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr}.presentation-layout article{padding:58px 48px 45px 58px;overflow:auto}.presentation-layout h2{margin:10px 0 15px;font:800 45px/.98 Manrope;letter-spacing:-2px}.lede{color:#64736e;font-size:13px;line-height:1.6}.talking-point{max-width:490px;padding:14px 0;display:grid;grid-template-columns:38px 1fr;grid-gap:10px;gap:10px;border-top:1px solid #dcd7ca}.talking-point>b{color:var(--accent);font:800 10px Manrope}.talking-point strong{font-size:10px}.talking-point p{margin:4px 0 0;color:#6d7974;font-size:10px;line-height:1.45}.presentation-visual{min-width:0;position:relative;padding:36px;display:grid;place-items:center;background:var(--green)}.presentation-visual .preview-board{height:86%;min-height:0;transform:rotate(2deg)}.logic-badge{position:absolute;left:30px;bottom:30px;padding:10px 13px;display:flex;align-items:center;gap:7px;border-radius:9px;background:#fff;font-size:10px;font-weight:700;box-shadow:0 8px 25px rgba(0,0,0,.18)}@media(max-width:1100px){.workspace{grid-template-columns:270px minmax(430px,1fr)}.right-panel{display:none}.topbar{grid-template-columns:290px 1fr auto}}@media(max-width:760px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible}.topbar{height:64px;grid-template-columns:1fr auto;padding:0 14px}.project-title,.top-actions .secondary{display:none}.workspace{display:flex;flex-direction:column}.stage{height:72vh;min-height:580px;order:1}.left-panel{height:760px;order:2;border:0}.stage-toolbar{grid-template-columns:1fr auto}.canvas-actions>button:first-child,.canvas-help,.tool-switch{display:none}.preview-layout{grid-template-columns:1fr;padding:55px 24px 24px}.preview-layout>div:first-child{display:none}.presentation-layout{grid-template-columns:1fr;overflow:auto}.presentation-layout article{padding:55px 28px 28px}.presentation-visual{min-height:560px}}