:root{--ink:#17201c;--muted:#6f7873;--line:#dfe4e1;--panel:#f8faf8;--paper:#fff;--green:#1f7a52;--green-dark:#155c3d;--green-pale:#e8f3ed;--orange:#d56732;--shadow:0 12px 32px rgba(28,42,35,.09);font-family:"DM Sans",sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:#edf0ed;overflow:hidden}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}.topbar{height:64px;background:#17201c;color:white;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #303a35;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;width:218px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:#d7f06d;color:#17201c;border-radius:8px;font-family:"IBM Plex Mono"}.doc-title{display:flex;align-items:center;gap:9px;flex:1}.status-dot{width:7px;height:7px;background:#78ce93;border-radius:50%}.doc-title input{background:transparent;border:0;color:#e8ecea;width:340px;font-weight:500;outline:none}.top-actions{display:flex;align-items:center;gap:8px}.btn,.icon-btn,.mini-btn{border:1px solid transparent;border-radius:8px;background:transparent}.btn{padding:8px 14px;font-weight:600}.btn.subtle{border-color:#45504b;color:#f3f5f4}.btn.primary{background:#d7f06d;color:#17201c}.icon-btn{width:36px;height:36px;color:white;font-size:20px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#617168;font-size:11px;font-weight:700;margin-left:6px}.app-shell{display:grid;grid-template-columns:72px 248px 1fr 276px;height:calc(100vh - 64px)}.tool-rail{background:#202a25;border-right:1px solid #303b35;padding:12px 9px;display:flex;flex-direction:column;align-items:center;gap:6px}.tool{width:52px;min-height:51px;border:0;border-radius:9px;background:transparent;color:#9ba8a1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tool span{font-size:20px}.tool small{font-size:10px}.tool:hover,.tool.active{background:#35423b;color:#d7f06d}.rail-divider{height:1px;width:38px;background:#39453f;margin:4px}.library-panel,.properties-panel{background:var(--panel);overflow:auto}.library-panel{border-right:1px solid var(--line);padding:18px 16px}.properties-panel{border-left:1px solid var(--line);padding-bottom:16px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel-heading h2{font-size:18px;margin:2px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:#8a938e;font-weight:700}.mini-btn{width:30px;height:30px;border-color:var(--line);background:white}.search{height:38px;background:white;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:0 10px;gap:7px}.search input{border:0;outline:0;width:100%;font-size:12px}.library-section{margin-top:18px}.section-title{width:100%;border:0;background:transparent;padding:0 1px 9px;display:flex;justify-content:space-between;font-size:12px;font-weight:700}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.component-card{height:88px;border:1px solid var(--line);background:#fff;border-radius:9px;display:flex;flex-direction:column;align-items:flex-start;padding:10px;transition:.15s}.component-card:hover{border-color:#7ead94;box-shadow:0 3px 12px rgba(31,122,82,.08);transform:translateY(-1px)}.component-card span:nth-child(2){font-size:11px;font-weight:600;margin-top:auto}.component-card small,.template-card small,.standards small,.validation small,.selected-summary small{font-size:9px;color:var(--muted);display:block}.symbol{font-family:"IBM Plex Mono";font-size:22px;color:#1f6045;height:28px}.circle-symbol{border:1.5px solid;border-radius:50%;font-size:11px;width:27px;display:grid;place-items:center}.box-symbol{width:27px;height:21px;border:1.5px solid}.templates{margin-top:20px}.template-card{width:100%;border:1px dashed #9eb5a9;background:#f3f8f5;border-radius:9px;padding:10px;display:flex;text-align:left;align-items:center;gap:10px}.template-icon{width:29px;height:29px;border-radius:7px;background:var(--green);color:white;display:grid;place-items:center;font-size:20px}.template-card strong{font-size:10px}.standards,.validation{display:flex;gap:9px;align-items:center;background:var(--green-pale);border:1px solid #cee1d6;border-radius:9px;padding:10px;margin-top:18px}.standards>span,.validation>span{width:22px;height:22px;background:#cae5d5;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:11px}.standards strong,.validation strong{font-size:10px}.workspace{min-width:0;display:flex;flex-direction:column}.workspace-toolbar{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 14px}.crumb{font-size:11px;color:#7d8781;display:flex;gap:8px}.crumb strong{color:#2a342f}.view-actions{display:flex;align-items:center;gap:7px}.zoom-control{display:flex;border:1px solid var(--line);border-radius:7px;background:white;height:30px}.zoom-control button{border:0;background:transparent;width:28px}.zoom-control span{font-size:10px;min-width:42px;display:grid;place-items:center;border-inline:1px solid var(--line)}.canvas-wrap{position:relative;flex:1;overflow:auto;padding:38px;background-color:#e9edea;background-image:radial-gradient(#c8cec9 1px,transparent 1px);background-size:20px 20px}.canvas-wrap.grid-off{background-image:none}.page{width:1080px;height:700px;background:var(--paper);box-shadow:var(--shadow);margin:auto;transform-origin:top center;border:1px solid #dce0dd}.page svg{width:100%;height:100%;display:block}.canvas-hint{position:fixed;bottom:14px;left:50%;transform:translateX(-30%);background:rgba(23,32,28,.86);color:white;font-size:10px;padding:7px 12px;border-radius:16px;pointer-events:none}.props-heading{padding:18px 16px 0}.prop-section{padding:15px 16px;border-top:1px solid var(--line)}.prop-section h3{font-size:10px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 12px;color:#6e7973}.prop-section label{font-size:10px;color:#66716b;display:block;margin-top:10px}.prop-section input,.prop-section textarea,.prop-section select{margin-top:5px;width:100%;border:1px solid #d9dfdb;background:white;border-radius:7px;padding:8px;font-size:11px;outline:none;resize:none}.prop-section input:focus,.prop-section textarea:focus,.prop-section select:focus{border-color:#4b9671;box-shadow:0 0 0 2px #dcece4}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle-row{display:flex!important;align-items:center;justify-content:space-between}.toggle-row input{display:none}.toggle-row i{width:32px;height:18px;background:#cbd2ce;border-radius:10px;position:relative}.toggle-row i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:white;top:2px;left:2px;box-shadow:0 1px 3px #777}.toggle-row input:checked+i{background:var(--green)}.toggle-row input:checked+i:after{left:16px}.selected-summary{display:flex;gap:10px;align-items:center}.summary-symbol{width:34px;height:34px;background:var(--green-pale);border-radius:8px;color:var(--green);font-size:22px;display:grid;place-items:center}.selected-summary strong{font-size:12px}.danger-zone{display:grid;grid-template-columns:1fr 1fr;gap:8px}.danger-zone button{font-size:10px;padding:8px;border:1px solid var(--line);background:white;border-radius:7px}.danger-zone button:last-child{color:#aa402f;border-color:#eccfc9}.validation{margin:18px 16px 0}.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17201c;color:white;padding:10px 16px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.page{transform:none!important}.field-label{font-size:10px;color:#66716b}.logo-uploader{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px;border:1px dashed #bdc9c2;background:#fff;border-radius:8px}.logo-preview{width:50px;height:42px;border:1px solid var(--line);background:#f5f7f5;border-radius:6px;display:grid;place-items:center;overflow:hidden;flex:none}.logo-preview span{font-family:"IBM Plex Mono";font-weight:600;color:#547162}.logo-preview img{width:100%;height:100%;object-fit:contain}.logo-actions{min-width:0}.logo-actions button{border:0;background:var(--green-pale);color:var(--green-dark);border-radius:6px;padding:6px 8px;font-size:9px;font-weight:700}.logo-actions .text-action{background:transparent;color:#a34b38;padding-inline:5px}.logo-actions small{display:block;margin-top:5px;color:#89928d;font-size:8px}.logo-uploader.dragging{border-color:var(--green);background:var(--green-pale)}.connection-help p{font-size:10px;line-height:1.55;color:var(--muted);margin:0}.new-blank{white-space:nowrap}.blank-badge{background:#d7f06d;color:#17201c;border-radius:10px;padding:2px 7px;font-size:9px;margin-left:5px}.free-node{cursor:grab}.free-node:active{cursor:grabbing}.free-node .selection{fill:transparent;stroke:transparent;stroke-width:1.5;stroke-dasharray:5 3}.free-node:hover .selection{stroke:#8ab49d}.free-node.selected .selection{fill:#eef8f2;stroke:#1f7a52}.free-node.wire-source .selection{fill:#fff6df;stroke:#d89933}.port{fill:#fff;stroke:#1f7a52;stroke-width:1.5}.empty-card{pointer-events:none}.workspace.wiring .page{cursor:crosshair}.tool[data-tool="wire"].active{color:#ffe28a;background:#4c4530}.modal-backdrop{position:fixed;inset:0;z-index:40;background:rgba(11,17,14,.62);display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.template-modal{width:min(820px,94vw);max-height:92vh;overflow:auto;background:#f8faf8;border-radius:14px;padding:22px;box-shadow:0 26px 70px rgba(0,0,0,.28)}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start}.modal-heading h2{margin:4px 0 3px;font-size:22px}.modal-heading p{margin:0;color:var(--muted);font-size:11px}.template-save-panel{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:14px;align-items:center;margin-top:18px;padding:13px;border:1px solid #cfe0d6;background:#eef8f2;border-radius:11px}.template-save-panel strong{display:block;font-size:12px}.template-save-panel small{display:block;margin-top:3px;font-size:9px;color:var(--muted)}.template-save-actions{display:flex;gap:8px}.template-save-actions input{min-width:0;flex:1;border:1px solid #c9d8cf;border-radius:8px;background:white;padding:8px 10px;font-size:11px}.template-save-actions .btn{white-space:nowrap}.template-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.gallery-card{border:1px solid var(--line);background:white;border-radius:10px;padding:12px;text-align:left;display:grid;grid-template-columns:112px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;transition:.15s}.gallery-card:hover{border-color:#78a88f;transform:translateY(-1px);box-shadow:0 6px 18px rgba(31,122,82,.09)}.gallery-card strong{font-size:12px;align-self:end}.gallery-card small{font-size:9px;color:var(--muted)}.gallery-preview{grid-row:1/3;width:112px;height:68px;border:1px solid #dfe4e1;border-radius:7px;background:#f8faf8;display:flex;align-items:center;justify-content:center;color:var(--green);font-family:"IBM Plex Mono";overflow:hidden}.gallery-preview img{width:100%;height:100%;object-fit:cover}.custom-template-section{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.custom-template-heading{display:flex;align-items:center;justify-content:space-between}.custom-template-heading small{font-size:9px;color:var(--muted)}.custom-template-gallery{margin-top:10px}.custom-template-card{position:relative;padding:0;display:block;overflow:hidden}.custom-template-open{width:100%;height:100%;border:0;background:transparent;text-align:left;display:grid;grid-template-columns:112px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;padding:12px}.delete-template-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border:1px solid #efd0c8;background:#fff8f6;color:#a44a38;border-radius:50%;font-weight:700}.custom-template-empty{grid-column:1/-1;border:1px dashed #bdc9c2;border-radius:10px;background:#fff;padding:18px;text-align:center;font-size:10px;color:var(--muted)}.blank-preview{font-size:28px;color:#8aa397}.sixway-preview{gap:7px;align-items:center}.sixway-preview:before{content:"";position:absolute;width:88px;border-top:1px solid #65716a}.sixway-preview i{width:5px;height:5px;background:var(--green);border-radius:50%;z-index:1}.flow-preview{gap:5px}.flow-preview i{font-style:normal;border:1px solid #829289;width:22px;height:22px;display:grid;place-items:center;border-radius:3px;font-size:10px}.flow-preview b{font-size:9px;color:#9aa49f}.branch-preview{position:relative;gap:12px;padding-top:18px}.branch-preview b{position:absolute;top:29px;width:75px;border-top:1px solid #65716a}.branch-preview i{font-style:normal;border:1px solid #829289;background:white;width:20px;height:20px;display:grid;place-items:center;z-index:1;font-size:9px}.branch-preview i:first-child{position:absolute;top:3px}.sixway-preview{position:relative}
@media(max-width:1100px){.app-shell{grid-template-columns:54px 180px minmax(260px,1fr) 230px}.library-panel,.properties-panel{display:block}.library-panel{padding-inline:10px}.component-grid{grid-template-columns:1fr}.topbar{gap:8px}.brand{width:36px}.brand span:last-child,.avatar{display:none}.doc-title input{width:180px}.top-actions{gap:5px}.top-actions .btn{padding:7px 9px;font-size:11px}.canvas-wrap{padding:20px}}
@media(max-width:720px){.app-shell{grid-template-columns:54px minmax(260px,1fr)}.library-panel{display:none}.properties-panel{position:fixed;right:0;top:64px;bottom:0;width:270px;z-index:8;box-shadow:-10px 0 30px rgba(23,32,28,.15)}.properties-panel.inspector-closed{display:none}.tool-rail{padding-inline:4px}.brand{width:auto}.doc-title{display:none}.top-actions .new-blank{display:none}.template-gallery{grid-template-columns:1fr}.template-modal{max-height:90vh;overflow:auto}}
.symbol-preview{width:42px;height:32px;display:block;color:#183f2f}.symbol-preview svg{width:100%;height:100%;overflow:visible}.symbol-preview .wire,.summary-symbol .wire{stroke:#183f2f;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.symbol-preview .label,.summary-symbol .label{font-family:"IBM Plex Mono";fill:#183f2f}.symbol-preview .tiny,.summary-symbol .tiny{font-size:9px}.summary-symbol svg{width:28px;height:28px}.revision-button{background:#2d3b34;color:#d7f06d;border:1px solid #49574f;white-space:nowrap}.revision-button:hover{background:#394941}.revision-modal{width:min(820px,95vw)}.revision-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:20px}.revision-form{border:1px solid var(--line);background:white;border-radius:10px;padding:15px}.revision-form h3,.history-heading h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}.revision-form label{display:block;font-size:10px;color:var(--muted);margin-top:10px}.revision-form input,.revision-form textarea{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:7px;padding:9px;font-size:11px;resize:none}.revision-form input{font-family:"IBM Plex Mono";font-weight:600;background:#f5f7f5}.revision-form .btn{width:100%;margin-top:12px}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-heading span{font-size:9px;color:var(--muted)}.revision-history{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}.revision-empty{border:1px dashed #bdc9c2;border-radius:9px;padding:34px 15px;text-align:center;color:var(--muted);font-size:10px}.revision-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:white;border-radius:9px;padding:10px}.revision-row.current{border-color:#7cab92;background:#f3f9f5}.revision-mark{width:38px;height:38px;border-radius:7px;background:#233129;color:#d7f06d;display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:11px;font-weight:600}.revision-copy strong{font-size:11px}.revision-copy p{font-size:10px;color:#4d5953;margin:2px 0}.revision-copy small{font-size:8px;color:#8a938e}.restore-revision{border:1px solid var(--line);background:white;border-radius:6px;padding:6px 8px;font-size:9px}.current-pill{font-size:8px;color:var(--green);font-weight:700}@media(max-width:720px){.revision-layout{grid-template-columns:1fr}.revision-history{max-height:220px}.revision-button{padding-inline:7px!important}}
.delete-template-btn.confirm{background:#a44a38!important;color:#fff!important;border-color:#a44a38!important}
.zoom-slider{width:120px;accent-color:var(--green)}
.prop-section input[type="color"]{height:34px;padding:3px;cursor:pointer}
.colour-row label{min-width:0}
.canvas-wrap{overscroll-behavior:contain;scrollbar-gutter:stable both-edges;-webkit-overflow-scrolling:touch;touch-action:none}
.page{max-width:none;max-height:none}
.canvas-wrap.pan-ready{cursor:grab}
.canvas-wrap.is-panning{cursor:grabbing}
.workspace.panning .canvas-wrap{cursor:grab}
.canvas-stage{position:relative;min-width:100%;min-height:100%}
.canvas-stage .page{position:absolute;margin:0!important;width:var(--page-width,1080px)!important;height:var(--page-height,700px)!important;left:180px;top:180px;transform:none!important;transform-origin:top left!important}
.pan-pad{display:grid;grid-template-columns:repeat(4,28px);gap:3px}
.pan-pad .mini-btn{width:28px;height:30px}
.app-shell,.workspace,.canvas-wrap,.canvas-stage{min-height:0;min-width:0}
.workspace{overflow:hidden}
.canvas-wrap{flex:1 1 0;height:100%;max-height:100%;overflow:scroll!important}
.tool-rail,.library-panel,.properties-panel{min-height:0}
#logoInput{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.top-actions{min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:auto;max-width:calc(100vw - 260px)}
.top-actions .btn,.top-actions .icon-btn{flex:0 0 auto}
.quick-export{position:sticky;top:0;z-index:2;background:var(--panel);box-shadow:0 6px 14px rgba(23,32,28,.06)}
.quick-export .btn{width:100%;margin-top:8px}
.inspector-toggle{height:30px;padding:0 10px!important;font-size:10px;color:#314039!important;border-color:var(--line)!important;background:#fff!important;white-space:nowrap}
@media(min-width:721px){.app-shell.inspector-hidden{grid-template-columns:72px 248px minmax(0,1fr) 0}.app-shell.inspector-hidden .properties-panel{display:none}.app-shell.inspector-hidden .workspace{grid-column:auto}.app-shell.inspector-hidden .canvas-hint{transform:translateX(-50%)}}
@media(max-width:1100px) and (min-width:721px){.app-shell.inspector-hidden{grid-template-columns:54px 180px minmax(260px,1fr) 0}}
@media(max-width:720px){.inspector-toggle{display:none}}
.environment-badge{position:fixed;top:8px;right:8px;z-index:250;padding:5px 8px;border:1px solid #7d261d;border-radius:6px;background:#b7372a;color:#fff;font:700 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;box-shadow:0 3px 10px rgba(0,0,0,.2)}