.design-page{--control-width:340px}.design-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:#FFFDF8;border-bottom:1px solid #D6C9B3}.design-top>div{display:flex;gap:10px;flex-wrap:wrap}.design-page button{min-height:40px;border:1px solid #D6C9B3;border-radius:8px;padding:8px 12px;background:#FFFDF8;color:#426B2A}.design-page .btn{background:#7FAE4D;color:#243719}.design-page>p{margin:0;padding:8px 20px;background:#DFF0D6;min-height:40px}.design-workspace{display:grid;grid-template-columns:var(--control-width) minmax(0,1fr);min-height:85vh}.design-controls{padding:16px 20px;border-right:1px solid #D6C9B3;max-height:calc(100vh - 120px);overflow:auto;position:sticky;top:115px}.design-controls h2{font-size:22px}.design-controls details{border-bottom:1px solid #D6C9B3;padding:14px 0}.design-controls summary{cursor:pointer;font-weight:700}.design-controls label{font-size:13px;margin:12px 0}.design-controls input[type=color]{padding:3px;height:40px}.design-controls input[type=range]{padding:0;min-height:32px}.design-controls .portal-tabs{margin:0;padding-top:0}.design-controls .portal-tabs button[aria-current=page]{background:#DFF0D6;border-color:#426B2A}.design-help{font-size:12px;color:#655A4D;line-height:1.6}.design-preview{min-width:0;padding:16px;background:#EAE5DA;overflow:hidden}.design-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.design-preview-heading>div{display:flex;gap:8px}.design-preview iframe{display:block;border:1px solid #D6C9B3;background:#FFFDF8;width:100%;height:calc(100vh - 180px);min-height:600px;margin:auto}.design-preview iframe.mobile{max-width:390px}.design-button-row{display:flex;flex-wrap:wrap;gap:6px}.design-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.design-fields-grid>.wide{grid-column:1/-1}#canvas-host{position:relative;max-width:620px;margin:auto;line-height:0;touch-action:none}#canvas-host canvas{width:100%;height:auto;box-shadow:0 4px 24px #35271730;cursor:move}#canvas-host .block-selection{position:absolute;outline:2px dashed #1478C4;pointer-events:none;background:#1478C410}#art-preview-note{font-size:13px;text-align:center}@media(max-width:900px){.design-workspace{grid-template-columns:290px minmax(0,1fr)}.design-controls{padding:12px}.design-top{align-items:flex-start;flex-wrap:wrap}}@media(max-width:650px){.design-workspace{display:flex;flex-direction:column}.design-controls{position:static;max-height:65vh;border-right:0;border-bottom:1px solid #D6C9B3}.design-preview{padding:12px}.design-top{position:static;padding:12px}.design-top>strong{font-size:14px}.design-top>div{width:100%}.design-top button{font-size:12px}.design-preview-heading{font-size:13px}.design-preview iframe{height:650px;min-height:500px}}
#canvas-host{margin:48px auto;max-width:min(620px,calc(100% - 52px))}#canvas-host .block-selection{outline:1px solid #1478C4;background:transparent;transform-origin:center;pointer-events:none}#canvas-host .transform-handle{position:absolute;width:24px;height:24px;min-height:24px;padding:0;border:0;background:transparent;border-radius:0;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;z-index:2}#canvas-host .transform-handle:after{content:'';position:absolute;inset:7px;background:#FFF;border:1.5px solid #1478C4;box-shadow:0 1px 3px #0003}#canvas-host .handle-rotate{cursor:grab}#canvas-host .handle-rotate:after{inset:5px;border-radius:50%;background:#DFF0D6}#canvas-host .handle-nw,#canvas-host .handle-se{cursor:nwse-resize}#canvas-host .handle-ne,#canvas-host .handle-sw{cursor:nesw-resize}#canvas-host .handle-n,#canvas-host .handle-s{cursor:ns-resize}#canvas-host .handle-e,#canvas-host .handle-w{cursor:ew-resize}#canvas-host .transform-handle:focus-visible{outline:2px solid #1478C4;outline-offset:1px}#canvas-host .rotation-stem{position:absolute;left:50%;top:-36px;width:1px;height:36px;background:#1478C4;pointer-events:none}
