/* Base overlay (runtime) */
:root, html, body { margin:0; padding:0; height:100%; width:100%; background:transparent; }
body { -ms-overflow-style:none; scrollbar-width:none; }
body::-webkit-scrollbar { display:none; }
.overlay-root { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; background:transparent; }
@media (min-aspect-ratio: 16/9) { .overlay-stage { height:100vh; width:calc(100vh * 16 / 9); } }
@media (max-aspect-ratio: 16/9) { .overlay-stage { width:100vw; height:calc(100vw * 9 / 16); } }
.overlay-stage { position:relative; background:transparent; overflow:hidden; font-smooth:always; -webkit-font-smoothing:antialiased; }
.overlay-stage { --scale: calc(var(--overlay-scale-base, 1) * ( (min(100vh, calc(100vw * 9 / 16))) / 1080 )); }
.overlay-stage.bg-transparent { background:transparent; }
.overlay-item { position:absolute; user-select:none; pointer-events:none; white-space:nowrap; line-height:1.2; }
.overlay-item.text-item { z-index:1000; padding:2px 4px; }
.overlay-item.shape-item { z-index:0;}
/* New masked background layer (for holes in live overlay) */
.overlay-masked-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Designer layout */
.overlay-layout { display:flex; height:100vh; width:100%; overflow:hidden; background:#121317; color:#e6e8ec; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.overlay-sidebar { width:270px; background:#1c1f26; color:#f1f3f7; padding:10px 12px 14px; overflow:auto; border-right:1px solid #30343d; font-size:.82rem; line-height:1.3; }
.overlay-sidebar h6, .overlay-sidebar strong { color:#fff; }
.overlay-sidebar .el-row { display:flex; gap:6px; align-items:center; padding:5px 6px; border:1px solid transparent; cursor:pointer; background:#262b34; border-radius:5px; transition:background .12s,border-color .12s; }
.overlay-sidebar .el-row:hover { background:#313844; }
.overlay-sidebar .el-row + .el-row { margin-top:5px; }
.overlay-sidebar .el-row.sel { border-color:#6da8ff; background:#344c6e; }
.overlay-sidebar .mini-preview { font-size:.7rem; opacity:.75; }
.overlay-main { flex:1; display:flex; flex-direction:column; overflow:hidden; padding:8px 12px 10px; background:#14171d; color:#e6e8ec; }
.element-toolbar { background:#1d2129; border:1px solid #2e343f; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.element-toolbar .card-body { background:transparent; }
.element-toolbar label, .overlay-sidebar label { font-weight:500; }
.element-toolbar input[type=color] { background:#2a3039; border:1px solid #3a424e; }
.element-toolbar input[type=range] { accent-color:#4d8dff; }
.design-surface-wrapper { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0c0f13; border:1px solid #22252c; border-radius:6px; box-shadow:inset 0 0 0 1px #181a20; }
.design-surface-wrapper .design-surface-host { position:absolute; width:1920px; height:1080px; transform-origin:top left; }
.design-surface-wrapper .overlay-root { position:static; inset:auto; display:block; width:100%; height:100%; }
.design-surface-wrapper .overlay-stage { width:100%; height:100%; background:#000; box-shadow:0 0 0 1px #333, 0 0 12px rgba(0,0,0,.8); }
.design-surface-wrapper .overlay-stage.with-grid { background:#000; /* remove previous faint grid background */ }
.design-surface-wrapper .overlay-stage.with-grid::after {
  /* replace previous overlay to draw crisp grid lines */
  --grid-x: 19.2px; /* 1% of 1920 */
  --grid-y: 10.8px; /* 1% of 1080 */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2000;
  background-image:
     linear-gradient(to right, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: var(--grid-x) 100%, 100% var(--grid-y);
  background-position: 0 0, 0 0;
  background-repeat: repeat;
  mix-blend-mode:normal;
  image-rendering:pixelated;
}
/* Optional thicker major lines every 10% (if desired) */
.design-surface-wrapper .overlay-stage.with-grid::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1999; /* just below fine grid */
  background-image:
     linear-gradient(to right, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 2px, transparent 2px),
     linear-gradient(to bottom, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 2px, transparent 2px);
  background-size: 192px 100%, 100% 108px; /* 10% spacings */
  background-repeat: repeat;
}
/* Selection + resize handles */
.overlay-item.selected { outline:2px solid #4d8dff; outline-offset:0; }
.overlay-item[data-oid] { pointer-events:auto; }
.resize-handle { position:absolute; width:14px; height:14px; background:#4d8dff; border:2px solid #fff; border-radius:3px; box-sizing:border-box; pointer-events:auto; box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 4px rgba(0,0,0,.5); }
.resize-handle.tl { top:-7px; left:-7px; cursor:nwse-resize; }
.resize-handle.tr { top:-7px; right:-7px; cursor:nesw-resize; }
.resize-handle.bl { bottom:-7px; left:-7px; cursor:nesw-resize; }
.resize-handle.br { bottom:-7px; right:-7px; cursor:nwse-resize; }
.rect-item, .circle-item, .image-item, .board-item { box-sizing:border-box; }
.rect-item:not(.selected), .circle-item:not(.selected) { box-shadow:0 0 0 1px rgba(255,255,255,0.15) inset; }
.board-item .board-fill { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.overlay-sidebar input.form-control, .overlay-sidebar select.form-select, .overlay-sidebar button.btn { font-size:.75rem; }
.overlay-sidebar .btn, .element-toolbar .btn { border-radius:4px; }
.overlay-sidebar .btn-group .btn { flex:1 0 auto; }
.overlay-item.text-item { display:flex; align-items:center; justify-content:center; }
.bg-dark-subtle { background:rgba(255,255,255,0.05)!important; }
/* Light text over dark backgrounds improvements */
.overlay-sidebar .form-check-label, .overlay-sidebar .label, .element-toolbar .form-label, .element-toolbar .form-check-label { color:#f0f2f5; }
.overlay-sidebar input, .overlay-sidebar select, .overlay-sidebar button, .element-toolbar input, .element-toolbar select { color:#f5f7fa; }
/* Explicit placeholder & input color fix for dark sidebar inputs */
.overlay-sidebar .form-control { background:#262c35; border:1px solid #3a424e; color:#f5f7fa; }
.overlay-sidebar .form-select { background:#262c35 !important; border:1px solid #3a424e !important; color:#f5f7fa !important; }
.overlay-sidebar .form-select option { background:#1c1f26; color:#f5f7fa; }
.overlay-sidebar .form-control::placeholder { color:#aab7c5; opacity:1; }
.overlay-sidebar .form-control:focus, .overlay-sidebar .form-select:focus { border-color:#4d8dff; box-shadow:0 0 0 2px rgba(77,141,255,.35); color:#ffffff; background:#262c35 !important; }
.element-toolbar select.form-select, .element-toolbar select { background:#262c35 !important; color:#f5f7fa !important; border:1px solid #3a424e !important; }
.element-toolbar select.form-select:focus, .element-toolbar select:focus { background:#262c35 !important; color:#ffffff !important; border-color:#4d8dff !important; box-shadow:0 0 0 2px rgba(77,141,255,.35) !important; }
/* Append additional design-mode interaction styles */
.overlay-item.selected[data-oid] { cursor:move; }
.overlay-item[data-oid] { cursor:default; }
.overlay-item.hole-item { background:rgba(255,255,255,0.05)!important; mix-blend-mode:normal; outline:1px dashed rgba(255,255,255,0.35); }
.overlay-item.hole-item.selected { outline:2px solid #ffb347; }
.element-toolbar, .element-toolbar .row, .element-toolbar .row * { color:#f5f7fa !important; }
.element-toolbar .form-label, .element-toolbar label, .element-toolbar strong { color:#ffffff !important; font-weight:600; }
.element-toolbar .form-check-label { color:#e9ecf1 !important; }
.element-toolbar .form-check-input { accent-color:#4d8dff; }
.element-toolbar input[type=range] + span { color:#dbe2ea !important; font-weight:500; }
/* Element toolbar number input styling (angle & corner radii) */
.element-toolbar input[type=number],
.element-toolbar input.form-control,
.element-toolbar input.form-control-sm {
  background:#262c35 !important;
  color:#f5f7fa !important;
  border:1px solid #3a424e !important;
  line-height:1.2;
}
.element-toolbar input[type=number]:focus,
.element-toolbar input.form-control:focus,
.element-toolbar input.form-control-sm:focus {
  border-color:#4d8dff !important;
  box-shadow:0 0 0 2px rgba(77,141,255,.35) !important;
  color:#ffffff !important;
}

/* Free text scrolling (unified + continuous distinction) */
.text-item { box-sizing:border-box; padding:4px; overflow:hidden; }
.text-item.scroll-text { position:relative; --scroll-speed:10s; --track-size:0px; --host-size:0px; --scroll-distance:0px; }
.text-item.scroll-text .scroll-track { display:flex; will-change:transform; animation-duration:var(--scroll-speed,10s); animation-timing-function:linear; }
.text-item.scroll-text.continuous .scroll-track { animation-iteration-count:infinite; }
.text-item.scroll-text.non-continuous .scroll-track { animation-iteration-count:1; animation-fill-mode:forwards; }
.text-item.scroll-text.scroll-h .scroll-track { flex-direction:row; gap:3rem; }
.text-item.scroll-text.scroll-v .scroll-track { flex-direction:column; gap:1rem; }
.text-item.scroll-text .scroll-seg { white-space:nowrap; flex-shrink:0; }
.text-item.scroll-text.scroll-h.start-on .scroll-track { animation-name:scroll-h-on-unified; }
.text-item.scroll-text.scroll-h.start-off .scroll-track { animation-name:scroll-h-off-unified; }
.text-item.scroll-text.scroll-v.start-on .scroll-track { animation-name:scroll-v-on-unified; }
.text-item.scroll-text.scroll-v.start-off .scroll-track { animation-name:scroll-v-off-unified; }
@keyframes scroll-h-on-unified { from { transform:translateX(0); } to { transform:translateX(calc(-1 * var(--scroll-distance))); } }
@keyframes scroll-h-off-unified { from { transform:translateX(var(--host-size)); } to { transform:translateX(calc(-1 * var(--track-size))); } }
@keyframes scroll-v-on-unified { from { transform:translateY(0); } to { transform:translateY(calc(-1 * var(--scroll-distance))); } }
@keyframes scroll-v-off-unified { from { transform:translateY(var(--host-size)); } to { transform:translateY(calc(-1 * var(--track-size))); } }
/* Message spacing ensures previous fully off-screen before next appears */
.text-item.scroll-text .scroll-track { position:relative; }
.text-item.scroll-text .scroll-track .message { /* message block */ }
/* Horizontal: add spacer after each message except last equal to host width */
.text-item.scroll-text.scroll-h .scroll-track .message { margin-right:var(--host-size); }
.text-item.scroll-text.scroll-v .scroll-track .message { margin-bottom:var(--host-size); }
.text-item.scroll-text.scroll-h .scroll-track .message:last-child { margin-right:0; }
.text-item.scroll-text.scroll-v .scroll-track .message:last-child { margin-bottom:0; }
/* Raise hole items above other shapes in design mode so they remain selectable */
.overlay-root.design-mode .hole-item { z-index: 700; }
/* Board item container normalization */
.overlay-item.board-item { position:absolute; }
.overlay-item.board-item > .board-fill { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.overlay-item.board-item .board-container { position:relative; }
/* free text editor dark styling */
.free-text-editor { background:#222; color:#fff; border:1px solid #444; resize:vertical; }
.free-text-editor:focus { background:#262626; color:#fff; border-color:#666; box-shadow:none; }
.overlay-fill { position:absolute; inset:0; width:100%; height:100%; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }