*{box-sizing:border-box}body{margin:0;color:#26344b;background:#f3f5f8;font:13px/1.45 system-ui}header{height:64px;display:flex;align-items:center;gap:24px;padding:12px 20px;border-bottom:1px solid #d4dce6}header a{color:#315dbd}h1{font-size:19px;margin:0}small{font-size:11px;background:#e5eaff;padding:3px 6px;border-radius:4px}header>span{margin-left:auto;color:#64748b}main{display:grid;grid-template-columns:230px minmax(320px,1fr) 255px;min-height:calc(100vh - 64px)}aside{padding:14px;border-right:1px solid #d4dce6}aside:last-child{border-left:1px solid #d4dce6;border-right:0}h2{font-size:14px;margin:8px 0}.hint,.legend{font-size:12px;color:#65728a}.workspace{padding:16px;min-width:0}button{font:inherit;background:white;color:#34435a;border:1px solid #cbd5e1;border-radius:4px;padding:4px 7px;cursor:pointer}button:disabled{opacity:.4;cursor:default}.tools{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.tools strong{margin-right:auto}#move,[draggable=true]{cursor:grab}#catalogue details{margin-bottom:8px}#catalogue .item{display:flex;align-items:center;justify-content:space-between;padding:4px 7px;margin:3px 0;border:1px solid #dce3ec;border-radius:4px;background:white}#catalogue .item span{pointer-events:none}#tree ul{list-style:none;margin:0;padding-left:12px}#tree>ul{padding:0}#tree button{width:100%;text-align:left;margin:2px 0;border-color:transparent;background:transparent;font-size:12px}#tree button[aria-current=true]{color:#1746ad;font-weight:700;background:#e8eeff}#canvas{position:relative;min-height:440px;margin-top:12px;background:white;border:2px solid #d7dfea;border-radius:6px;overflow:auto;padding:24px}#preview{min-height:370px}#outlines{position:absolute;inset:0;pointer-events:none}.outline{position:absolute;border:2px solid #91a7cf;border-radius:4px;pointer-events:none}.outline.allowed{border-color:#82d9a2;background:#b9f5ce18}.outline.forbidden{border-color:#ed8f93;background:#ffc9cd16}.outline.hover{border-width:3px;background:#b9f5ce40}.outline.selected{border-color:#315dbd}.green{color:#277946}.red{color:#b23c47}#canvas.drop-allowed{border-color:#82d9a2}#canvas.drop-forbidden{border-color:#ed8f93}#status{min-height:20px}#status[data-error=true]{color:#b23c47}#fields label{display:block;margin-bottom:8px;font-size:12px}#fields input,#fields select{display:block;width:100%;margin-top:3px;font:inherit;padding:5px;border:1px solid #ccd5e0;border-radius:3px}pre{font:11px/1.5 monospace;white-space:pre-wrap;overflow-wrap:anywhere}#preview .design-container{min-height:80px;border:1px dashed #c6d1df;border-radius:5px;padding:12px;margin:8px 0}#preview gnr-formlet{min-height:80px;border:1px dashed #c6d1df;margin:8px 0;font:13px/1.3 system-ui}#preview gnr-labledbox{min-height:80px;border:1px solid #c6d1df;border-radius:5px;margin:8px 0}#preview gnr-labledbox::part(label){background:#e7edf7;padding:4px 8px}#preview gnr-labledbox::part(content){padding:10px;min-height:65px}#preview h2{font-size:22px}#preview :is(gnr-textbox,gnr-numbertextbox,gnr-checkbox,gnr-colorpicker){margin:6px 0}#preview .gramlot-inspector-launcher{display:none}@media(max-width:900px){main{grid-template-columns:180px minmax(300px,1fr)}aside:last-child{grid-column:1/-1}header>span{display:none}}
#catalogue .item{padding:2px 6px;margin:2px 0;font-size:12px}#catalogue .item button{padding:2px 6px}#catalogue details{margin-bottom:5px}#tree{max-height:320px;overflow:auto}aside{align-self:start}button:focus-visible,input:focus-visible{outline:2px solid #315dbd;outline-offset:2px}

main{grid-template-columns:210px minmax(320px,1fr) 360px}.inspector-sidebar{padding:10px;min-width:0}#inspector{height:calc(100vh - 210px);min-height:440px;border:1px solid #cbd5e1;border-radius:5px;background:white;overflow:hidden}#inspector gramlot-inspector{display:block;height:100%}@media(max-width:1000px){main{grid-template-columns:180px minmax(300px,1fr)}.inspector-sidebar{grid-column:1/-1}}

#hover-edit{position:absolute;z-index:5;width:25px;height:25px;padding:0;background:#29384d;color:white;border:1px solid white;border-radius:5px;box-shadow:0 1px 5px #24344d30;font-size:19px;line-height:22px}#hover-edit[hidden]{display:none}#block-parameters{padding:0 10px 10px;width:min(450px,calc(100vw - 32px));max-height:85vh;border:1px solid #bcc8d8;border-radius:8px;box-shadow:0 8px 30px #17284030;color:#26344b;background:white}#block-parameters::backdrop{background:#17284018}#block-parameters header{height:30px;margin:0 -10px;padding:3px 9px;background:#29384d;color:white;gap:8px}#block-parameters header button{margin-left:auto;background:transparent;border:0;color:white;font-size:19px;padding:0 4px}#block-parameters .hint{margin:8px 0;font-size:11px}

/* Quiet catalogue rows; the whole row remains draggable. */
#catalogue .item{border:0;background:transparent;border-radius:6px;margin:1px 0;padding:3px 8px;min-height:28px;font-size:13px}
#catalogue .item:hover,#catalogue .item:focus-within{background:#e8ecf1}
#catalogue .item .catalogue-add{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid #8b96a5;border-radius:50%;background:transparent;color:#728093;font:16px/1 system-ui;opacity:0;pointer-events:none}
#catalogue .item:hover .catalogue-add,#catalogue .item:focus-within .catalogue-add{opacity:1;pointer-events:auto}
#catalogue .item .catalogue-add:hover{color:#244f9c;border-color:#244f9c;background:white}
#catalogue summary{font-size:12px;font-weight:600;color:#637086;padding:5px 4px}
@media(hover:none){#catalogue .item .catalogue-add{opacity:1;pointer-events:auto}}

main{grid-template-columns:var(--left-sidebar,210px) 6px minmax(320px,1fr) 6px var(--right-sidebar,360px)}
.sidebar-splitter{align-self:stretch;cursor:col-resize;position:relative;touch-action:none;background:transparent;outline:none}
.sidebar-splitter::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:2px;background:#d5dde7;border-radius:2px}
.sidebar-splitter:hover::after,.sidebar-splitter:focus-visible::after{background:#7795c2}
.resizing-sidebar,.resizing-sidebar *{cursor:col-resize!important;user-select:none!important}
#hover-edit{background:transparent;color:#7b8797;border:0;box-shadow:none;font:20px/25px system-ui;border-radius:3px;opacity:.85}
#hover-edit:hover,#hover-edit:focus-visible{color:#315dbd;background:#edf1f7;opacity:1}
@media(max-width:850px){main{grid-template-columns:180px minmax(300px,1fr)}.sidebar-splitter{display:none}.inspector-sidebar{grid-column:1/-1}}
@media(min-width:851px){.inspector-sidebar{grid-column:auto}}

#hover-edit{font-size:0;color:#858b90;display:flex;align-items:center;justify-content:center}#hover-edit::before{content:'';width:19px;height:19px;background:currentColor;mask:url('/shared/builder/edit.svg') center/contain no-repeat;-webkit-mask:url('/shared/builder/edit.svg') center/contain no-repeat}