.grid-modes{display:inline-flex;gap:2px;margin:0 9px 0 2px;padding:2px;background:#e9edf4;border-radius:6px;flex-shrink:0}
.main-toolbar .grid-modes button{width:auto;padding:0 10px;font:600 11px/23px Arial,sans-serif;height:23px;border:0;border-radius:4px;background:transparent;color:#626b7b}
.main-toolbar .grid-modes button[aria-pressed=true]{background:#fff;color:#244eac;box-shadow:0 1px 3px #18294720}
.grid-pane,.grid-palette,.grid-inspector{display:none}
.grid-mode .top-docks,.grid-mode [data-split=top],.grid-mode #palette,.grid-mode .right-panel>:not(.grid-inspector){display:none!important}
.grid-mode .grid-pane{display:flex}
.grid-mode .grid-palette,.grid-mode .grid-inspector{display:block}
.grid-mode .left-panel{width:212px;background:#fff}
.grid-mode .right-panel{width:248px}
.grid-mode .main-toolbar{min-height:36px;height:auto}
.grid-mode .main-toolbar .tools{flex-wrap:wrap}
.grid-pane{flex:1;min-height:0;flex-direction:column;background:#f5f7fb;font:13px/1.5 Arial,sans-serif;color:#26334b}
.grid-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 8px;gap:16px}
.grid-eyebrow{display:block;font:700 10px/1.5 Arial,sans-serif;letter-spacing:1.5px;color:#8792a5}
.grid-heading h2,.grid-palette h2,.grid-inspector h2{margin:4px 0 12px;font:600 20px/1.3 Arial,sans-serif;color:#23334d}
.grid-heading h2{margin-bottom:0}
.grid-pane button,.grid-inspector button{cursor:pointer;border:1px solid #dbe1ec;border-radius:6px;background:#fff;padding:7px 10px;color:#32558b;font:12px Arial,sans-serif}
.grid-pane button:hover,.grid-inspector button:hover{border-color:#648ce8;background:#f1f5ff}
.grid-breadcrumbs{display:flex;align-items:center;gap:7px;padding:6px 24px 12px;flex-wrap:wrap}
.grid-breadcrumbs button{border:0;background:transparent;padding:3px 0;color:#4b6489}
.grid-breadcrumbs button:last-child{font-weight:bold;color:#23334d}
.grid-breadcrumbs span{color:#a7b2c5}
.grid-board{position:relative;min-width:600px;width:100%;background-color:#fff;background-image:linear-gradient(to right,#e5eaf3 1px,transparent 1px),linear-gradient(to bottom,#e5eaf3 1px,transparent 1px);background-size:8.333333% 60px;border:1px solid #dbe2ef;box-shadow:0 4px 18px #29395d05;outline:none;border-radius:7px;overflow:hidden;touch-action:none}
.grid-board.drag-over{box-shadow:inset 0 0 0 2px #5b84e1}
.grid-card{position:absolute;padding:5px;box-sizing:border-box;cursor:grab;outline:none;touch-action:none}
.grid-card.moving{z-index:5;opacity:.85;cursor:grabbing}
.grid-card.locked{cursor:pointer}
.grid-enter{position:absolute;right:12px;top:10px;padding:1px 5px!important;border:0!important;background:transparent!important}
.grid-resize{position:absolute;bottom:6px;right:6px;min-width:14px;width:14px;height:14px;padding:0!important;border:0!important;border-right:3px solid #497ce7!important;border-bottom:3px solid #497ce7!important;border-radius:0!important;background:transparent!important;cursor:nwse-resize;opacity:0}
.grid-card:hover .grid-resize,.grid-card.selected .grid-resize{opacity:1}
.grid-help{padding:10px 24px;border-top:1px solid #e3e8f0;color:#7e8da5;font-size:11px;background:#fff}
.grid-palette,.grid-inspector{padding:24px 16px;overflow:auto;font:12px/1.5 Arial,sans-serif;color:#8390a5}
.grid-palette h2,.grid-inspector h2{font-size:17px;margin-top:5px}
.grid-palette p{margin:8px 0 18px}
.grid-palette-list{display:grid;gap:7px}
.grid-palette-list button{display:flex;align-items:center;gap:12px;border:1px solid #e0e6ef;border-radius:6px;background:#fff;padding:9px 12px;text-align:left;color:#435570;font:12px Arial,sans-serif;cursor:grab}
.grid-palette-list button:hover:not(:disabled){border-color:#759bed;background:#f5f8ff}
.grid-palette-list i{font-style:normal;font-size:18px;width:22px;text-align:center;color:#6184bd}
.grid-palette-list button:disabled{opacity:.35;cursor:default}
.grid-palette-note{border-top:1px solid #e3e8f0;padding-top:18px}
.grid-inspector label{display:block;color:#7e8ca2;font-size:11px;margin:14px 0}
.grid-inspector input{box-sizing:border-box;width:100%;padding:8px;border:1px solid #d9e1ef;border-radius:5px;margin-top:5px;font:13px Arial,sans-serif;color:#334763;background:#fff}
.grid-inspector input:focus{outline:2px solid #c7d8fd;border-color:#789de9}
.grid-inspector input:disabled{background:#f1f3f7;color:#94a0b2}
.grid-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid-inspector button{width:100%;margin-top:10px;line-height:1.5}
.grid-inspector .grid-delete{color:#b36565;border-color:#ecdede}
.grid-inspector button:disabled{opacity:.45;cursor:default}
.grid-node-name{word-break:break-all;color:#9aa5b6;font-size:11px}
.grid-info{margin-top:24px;padding:14px 10px;border-radius:6px;background:#f4f7fc;color:#8191ac;font-size:11px}
.grid-mode #zoom{display:none}
@media(max-width:1050px){.grid-mode .left-panel{width:168px}
.grid-mode .right-panel{width:205px}
.grid-palette,.grid-inspector{padding:18px 12px}
.grid-heading{padding:16px 16px 8px}
}

.grid-mode .right-panel{background:#fff}
.grid-mode .left-panel{border-right:0}
.grid-mode .grid-inspector{flex:1;min-height:0}

/* The same live #form-window/#canvas is used in both modes. */
.grid-mode .grid-pane{flex:none}
.grid-mode #design-pane{position:relative}
.grid-mode #zoom{display:block}

.grid-heading{padding:12px 20px 4px}
.grid-breadcrumbs{padding:4px 20px}
.grid-help{padding:6px 20px}

.grid-board{display:none;position:absolute;z-index:2;min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.grid-mode #canvas{background-image:radial-gradient(circle at 1px 1px,#6184bd45 1px,transparent 1.2px);background-size:12px 11px;background-position:var(--grid-origin-x,0px) var(--grid-origin-y,0px)}

.grid-mode .grid-board{display:block}
.grid-board.drag-over{outline:1px dashed #5b84e1;box-shadow:none}

.grid-card{padding:0;outline:1px solid transparent;background:transparent}
.grid-card:hover,.grid-card.selected,.grid-card:focus-visible{outline:1px solid #3e70de}

.grid-card.moving{outline:2px dashed #3e70de;background:#3e70de15;opacity:1}

.grid-enter{right:3px;top:2px;width:20px;height:18px;padding:0!important;border:1px solid #b8c9e6!important;border-radius:2px;background:#f4f7ff!important;color:#345eae;cursor:pointer;font:13px Arial,sans-serif;opacity:0}

.grid-card:hover .grid-enter,.grid-card.selected .grid-enter,.grid-card:focus-within .grid-enter{opacity:1}

.grid-resize{bottom:0;right:0;min-width:12px;width:12px;height:12px}

.grid-breadcrumbs select{margin-left:auto;max-width:200px;padding:4px;border:1px solid #dbe1ec;background:#fff;color:#4b6489;font:12px Arial,sans-serif}

/* Contextual tools surround the shared native form preview. */
.grid-mode .left-panel{width:238px;min-width:190px}
.grid-mode .right-panel{width:280px;min-width:230px}
.grid-palette,.grid-inspector{padding:16px;color:#67788d}
.grid-palette-tabs{display:flex;padding:3px;background:#eef2f8;border-radius:7px;gap:3px;margin-bottom:12px}
.grid-palette-tabs button{flex:1;border:0;border-radius:5px;padding:8px;background:transparent;color:#6b7c94;cursor:pointer;font:600 12px Arial}
.grid-palette-tabs button[aria-pressed=true]{background:white;color:#315fad;box-shadow:0 1px 4px #23334d15}
.grid-search{width:100%;box-sizing:border-box;border:1px solid #dce3ed;border-radius:6px;padding:9px 10px;font:12px Arial;color:#334763;background:#fafbfd}
.grid-palette-body h3{font:600 11px Arial;color:#738298;margin:20px 0 8px}
.grid-palette-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.grid-palette-list button{min-width:0;flex-direction:column;justify-content:center;gap:7px;text-align:center;min-height:68px;padding:8px 5px;font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.grid-palette-list i{font-size:19px;color:#4e75b4}
.grid-layer{display:flex;gap:8px;align-items:center;width:100%;border:1px solid transparent;background:transparent;border-radius:5px;padding:9px 6px;text-align:left;color:#405572;cursor:pointer}
.grid-layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.grid-layer i{font-style:normal;color:#6388b9}
.grid-layer small{color:#8d9bb0}
.grid-layer:hover,.grid-layer.active{background:#eef4ff;border-color:#cedef8}
.grid-options{display:flex;align-items:center;gap:18px;padding:4px 20px 8px;font:11px Arial;color:#77869a}
.grid-options label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.grid-options input{margin:0;accent-color:#4876cc}
.grid-options select{border:1px solid #d8e0ec;border-radius:4px;padding:4px;background:white;color:#45618b;font:11px Arial}
.grid-options>span{margin-left:auto}
.grid-board.no-dots{background-image:none}
.grid-inspector details{border-top:1px solid #e6ebf2;padding:12px 0 2px;margin-top:12px}
.grid-inspector summary{font:600 12px Arial;color:#405572;cursor:pointer}
.grid-inspector label{margin:12px 0;color:#687b94}
.grid-inspector select,.grid-inspector textarea{display:block;box-sizing:border-box;width:100%;margin-top:5px;padding:7px;border:1px solid #d9e1ef;border-radius:5px;background:white;color:#334763;font:12px Arial}
.grid-inspector textarea{resize:vertical;min-height:48px}
.grid-inspector select:disabled,.grid-inspector textarea:disabled{background:#f1f3f7;color:#94a0b2}
.grid-inspector .grid-switch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid-switch input{width:16px;height:16px;flex-shrink:0;margin:0;accent-color:#4b79cc}
.grid-inspector .grid-actions{display:flex;gap:5px;align-items:center}
.grid-actions button{flex:1;width:auto;white-space:nowrap;padding:5px;font-size:11px;margin:0}
.grid-dimensions label{margin:10px 0}
.grid-color{display:flex;gap:4px;align-items:center}
.grid-color input[type=text]{min-width:0;font-size:11px}
.grid-color input[type=color]{flex:0 0 26px;width:26px;height:30px;padding:2px}
.grid-color button{flex:0 0 26px;width:26px;padding:2px;margin-top:5px}
.grid-inline-title{position:absolute!important;z-index:8!important;left:0;top:0;min-width:180px;width:100%;height:32px;box-sizing:border-box;border:2px solid #4b79cc!important;background:white!important;color:#23334d!important;padding:5px 7px!important;font:13px Arial!important;box-shadow:0 3px 14px #25498230}
@media(max-width:1100px){.grid-mode .left-panel{width:195px;min-width:175px}.grid-mode .right-panel{width:240px;min-width:210px}.grid-options>span{display:none}.grid-palette,.grid-inspector{padding:12px}}

.grid-sample{display:flex;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box;width:80px;max-width:100%;height:28px;color:#555;font:11px Arial,sans-serif}
.sample-input{background:#fff;border:1px solid #bcbcbc;border-radius:2px;justify-content:space-between;padding-left:5px;box-shadow:inset 0 1px 2px #00000008}
.sample-input b{font-weight:400;border-left:1px solid #ccc;padding:6px 4px;background:#f7f7f7}
.sample-multiline{height:32px;align-items:flex-end;background:repeating-linear-gradient(#fff 0 9px,#eeeeee 10px,#fff 11px)}
.sample-button{background:#ffe600;border:1px solid #ccba00;border-radius:2px;box-shadow:0 1px 1px #00000018}
.sample-check{gap:6px}.sample-check b{color:#599b4d;font-size:18px}
.sample-progress{height:15px;border:1px solid #bcbcbc;background:#fff;justify-content:flex-start}.sample-progress b{height:100%;width:60%;background:#ffe600}
.sample-toggle{width:40px;height:20px;border-radius:12px;background:#72b16a;justify-content:flex-end;padding:2px}.sample-toggle b{width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003}
.sample-table{display:grid;grid-template-columns:1fr 1fr;border:1px solid #bcbcbc;background:#fff}.sample-table b{grid-column:span 2;height:8px;background:#eee;border-bottom:1px solid #bcbcbc}.sample-table i{height:15px;width:auto;border-right:1px solid #ccc;background:linear-gradient(transparent 7px,#ddd 8px,transparent 9px)}
.sample-group{border:1px solid #bcbcbc;justify-content:flex-start;align-items:flex-start;margin-top:4px;height:25px}.sample-group b{font-weight:400;margin:-7px 5px 0;padding:0 3px;background:#fff}
.sample-picture{font-size:26px;color:#729baf}.sample-text{font-size:15px;justify-content:flex-start}.sample-link{color:#2864ac;text-decoration:underline}

.creation-code-text{display:block;box-sizing:border-box;width:100%;height:55vh;min-height:240px;font:13px/1.5 Consolas,monospace;white-space:pre;tab-size:4;resize:vertical}
.grid-drop-preview{position:absolute;pointer-events:none;box-sizing:border-box;border:1px dashed #386ed4;background:#386ed415;color:#315fad;padding:4px;font:12px Arial;overflow:hidden;z-index:10}

/* The form itself uses the same native styles and dimensions in both modes. */
.grid-mode .left-panel{width:var(--grid-left-width,238px);min-width:0;border-right:1px solid var(--c-border)}
.grid-mode .right-panel{width:var(--grid-right-width,292px);min-width:0}
.grid-mode #design-pane{overscroll-behavior:contain}
.grid-mode .grid-board{background-image:radial-gradient(circle at 1px 1px,#70839750 1px,transparent 1.2px);outline:none;pointer-events:none}
.grid-card{pointer-events:auto}
.grid-board.drag-over{outline:none}
/* Generated spacers are geometric helpers, not text. Keep this shared in both modes. */
.formych-web #canvas .grid-layout-spacer{padding:0;border:0}
.formych-web #canvas .grid-layout-spacer>.node-content{display:none}
.formych-web #canvas .grid-layout-row{padding:0;border:0}
.formych-web #canvas .grid-layout-row>.node-content>.g1c>.g1c-body>.layout{margin:0;gap:0}
.grid-palette-list button{min-height:64px}
.grid-palette-body h3{margin-top:14px}
.grid-inspector .grid-info{margin-top:14px;padding:10px;font-size:11px}
.grid-inspector .grid-position{margin-top:12px}
.grid-inspector .grid-position summary{font-size:11px;font-weight:normal}
.grid-form-size{color:#77869a;margin:0 0 14px;font:12px Arial}
.grid-card.moving{outline:2px solid #3e70de;background:#3e70de08}
.sample-button{background:linear-gradient(#fff,#ececec);border-color:#bcbcbc}
.sample-segment{height:24px;border:1px solid #999;background:#fff}
.sample-segment b{font-weight:normal;flex:1;text-align:center}
.sample-segment b+b{height:100%;line-height:22px;border-left:1px solid #aaa;background:#ddd}