.layout-editor { position:fixed; z-index:10000; left:18px; top:104px; width:276px; max-height:calc(100dvh - 120px); overflow:auto; color:#eaf2fd; background:rgba(10,20,35,.97); border:1px solid #3a506d; border-radius:14px; box-shadow:0 14px 45px #0008; font:13px/1.4 system-ui,sans-serif; }
.le-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #2b4059; cursor:move; touch-action:none; }
.le-header strong { font-size:16px; } .le-header small { display:block; color:#9db1cb; margin-top:2px; font-size:11px; }
.layout-editor button { font:inherit; cursor:pointer; border:1px solid #3a506d; border-radius:7px; background:#16273e; color:#eef5ff; min-height:34px; padding:6px 8px; }
.layout-editor button:hover { background:#25456a; } .layout-editor button:disabled { opacity:.4; cursor:default; }
.layout-editor :focus-visible { outline:2px solid #8fc5ff; outline-offset:3px; }
.le-header button { width:34px; font-size:19px; } .le-body { padding:12px 14px; }
.le-intro { color:#b7c9df; margin:0 0 12px; }
.le-field { display:block; margin-bottom:12px; color:#c6d6e9; }
.le-field select { display:block; margin-top:5px; width:100%; }
.layout-editor select,.layout-editor input[type=number] { color:#f2f7ff; background:#101f32; border:1px solid #3a506d; border-radius:6px; min-height:34px; padding:6px; font:inherit; }
.le-position { display:flex; gap:10px; margin-bottom:12px; } .le-position label { width:50%; color:#c6d6e9; } .le-position input { width:100%; margin-top:5px; box-sizing:border-box; }
.layout-editor input[type=range] { width:100%; margin:8px 0 0; accent-color:#80baff; cursor:ew-resize; }
.le-field output { float:right; color:#8fc5ff; }
.layout-editor #le-size-number { display:block; width:100%; box-sizing:border-box; margin-top:5px; }
.le-row { display:flex; gap:6px; margin:10px 0; } .le-row button { flex:1; font-size:11px; }
.layout-editor .le-primary { background:#32659a; }
.layout-editor details { border-top:1px solid #2b4059; border-bottom:1px solid #2b4059; margin-top:12px; padding:10px 0; }
.layout-editor summary { cursor:pointer; font-weight:600; } .layout-editor details p { color:#9db1cb; font-size:11px; }
.le-import { display:block; color:#b7c9df; margin:12px 0; font-size:11px; } .le-import input { display:block; width:100%; margin-top:5px; font-size:11px; }
.le-status { color:#a9d9c2; font-size:11px; margin:12px 0 6px; min-height:30px; } .le-foot { display:block; color:#8eabc9; font-size:10px; }
.le-collapsed { width:220px; } .le-collapsed .le-body { display:none; } .le-collapsed .le-header { border-bottom:0; }
.le-editing [data-overview-cell] { cursor:grab !important; touch-action:none; }
.le-editing [data-overview-cell]:active { cursor:grabbing !important; }
.le-editing [data-overview-cell].le-selected { outline:1px dashed #aad0ff; outline-offset:7px; border-radius:14px; }
@media(max-width:920px) { .layout-editor { left:8px; top:80px; width:250px; max-height:calc(100dvh - 96px); } }
/* Editor-only alignment and direct line manipulation. */
.le-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-bottom:10px; }
.le-tools button { flex:1; font-size:11px; min-height:38px; }
.le-tools button[aria-pressed=true] { background:#32659a; border-color:#90c4ff; }
.le-checks { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0; }
.le-checks label { font-size:12px; } .le-checks input { accent-color:#82bdff; }
.le-line-controls p,.le-anchor-controls p { color:#b7c9df; font-size:12px; }
.le-line-controls input[type=number] { width:100%; box-sizing:border-box; }
.le-scope { display:block; color:#8eabc9; margin:8px 0; }
.le-grid-overlay { position:fixed; left:0; right:0; bottom:0; z-index:70; pointer-events:none; --grid-size:24px; background-image:linear-gradient(to right,#b2d2f81c 1px,transparent 1px),linear-gradient(to bottom,#b2d2f81c 1px,transparent 1px); background-size:var(--grid-size) var(--grid-size); }
.le-grid-overlay[hidden],.layout-editor [hidden] { display:none !important; }
.le-handles { position:fixed; inset:0; z-index:9000; pointer-events:none; }
.le-run-hit { position:absolute; z-index:0; pointer-events:auto; touch-action:none; }
.le-canvas-handle { z-index:1; }
.le-canvas-handle { position:absolute; pointer-events:auto; transform:translate(-50%,-50%); width:28px; height:28px; padding:0; border:2px solid var(--handle-color,#a7d4ff); border-radius:7px; background:#0b182b; color:white; font:600 12px system-ui; box-shadow:0 0 0 3px #081321aa; touch-action:none; }
.le-canvas-handle:hover,.le-canvas-handle:focus-visible { background:#345b85; outline:2px solid #e3efff; outline-offset:3px; }
.le-run-h { cursor:ns-resize; } .le-run-v { cursor:ew-resize; }
.le-bend-handle { width:34px; height:34px; border-radius:50%; cursor:move; }
.le-canvas-handle[aria-pressed=true] { background:#345b85; box-shadow:0 0 0 3px #081321,0 0 0 5px var(--handle-color,#a7d4ff); }
.le-bend-controls { border:1px solid #3a506d; border-radius:7px; padding:10px; margin:12px 0; }
.le-bend-controls small { display:block; color:#b7c9df; font-size:11px; }
.le-bend-controls .le-position input { min-width:0; }
.le-anchor-handle { width:32px; height:32px; border-radius:50%; cursor:crosshair; font-size:24px; background:#091524aa; }

/* Guides mark the centre of the visible canvas below the site header. */
.le-centre-guides { position:fixed; inset:0; z-index:71; pointer-events:none; color:#ffe19a; }
.le-centre-guides[hidden] { display:none; }
.le-centre-v { position:absolute; top:0; bottom:0; left:50%; border-left:1px dashed #f8cf71cc; }
.le-centre-h { position:absolute; left:0; right:0; top:50%; border-top:1px dashed #f8cf71cc; }
.le-centre-guides b { position:absolute; font:10px/1.4 ui-monospace,monospace; font-weight:500; letter-spacing:.03em; white-space:nowrap; padding:3px 6px; border-radius:3px; background:#121d2eee; }
.le-centre-v b { top:8px; left:6px; }
.le-centre-h b { top:6px; right:12px; }

.le-match-controls { margin-top:12px; padding-top:10px; border-top:1px solid #33465d; display:grid; gap:8px; }

.le-offscreen-handle { border-style:dashed; }

.le-label-controls p { color:#b7c9df; font-size:12px; }
.le-label-editing .ex-wlabel { pointer-events:auto; cursor:grab; touch-action:none; outline:1px dashed #91bde5; outline-offset:3px; }
.le-label-editing .ex-wlabel.le-label-selected { outline:2px solid #ffe19a; }
.le-label-editing .ex-wlabel:active { cursor:grabbing; }

.le-add-products { border:1px solid #3a506d; border-radius:7px; padding:10px; margin-bottom:12px; }
.le-add-products p { margin:0; font-weight:600; }
.le-add-products small,.le-addition-help { display:block; color:#b7c9df; font-size:11px; }
.le-addition-controls { margin-bottom:12px; }
.le-editing [data-starter-addition] { cursor:grab; touch-action:none; }
.le-editing [data-starter-addition].le-selected { outline:1px dashed #aad0ff; outline-offset:7px; border-radius:14px; }
.layout-editor input[type=text] { display:block; box-sizing:border-box; width:100%; margin-top:5px; color:#f2f7ff; background:#101f32; border:1px solid #3a506d; border-radius:6px; min-height:34px; padding:6px; font:inherit; }
.le-appearance-controls { border-top:1px solid #2b4059; padding-top:12px; margin-top:12px; }
.le-appearance-controls small { display:block; margin-top:8px; color:#b7c9df; font-size:11px; }

.le-corner-handle { width:34px; height:34px; border-radius:5px; cursor:move; }
.le-corner-controls { margin:10px 0; }
.le-corner-controls small { display:block; color:#b7c9df; font-size:11px; }

/* Hold the artwork and all attached cable layers still against their edit handles.
   Pulse animations on the child paths continue; Preview restores artwork motion. */
.le-closeup-editing .ex-stage.ex-ready .ex-media,
.le-closeup-editing .ex-stage.ex-ready .ex-wires,
.le-closeup-editing .ex-stage.ex-ready .ex-wlabel,
.le-closeup-editing .ex-stage.ex-ready .le-starter-wires-focused {
  animation:none !important;
  translate:0 0;
}

.le-badge-controls p { color: var(--ex-text); margin-bottom: 6px; }
.le-badge-editable { pointer-events: auto !important; cursor: grab; touch-action: none; outline: 1px dashed #91bde5; outline-offset: 3px; }
.le-badge-editable:focus-visible { outline: 2px solid #ffe19a; }
.le-badge-editable:active { cursor: grabbing; }