/* QuickConvertify Online Image Editor ------------------------------------ */
.ucs-image-editor-app-open,
.ucs-image-editor-app-open body { overflow:hidden !important; }
.ucs-image-editor-app-open body { overscroll-behavior:none; }

.ucs-ie-intro { display:grid; gap:18px; }
.ucs-ie-drop {
  position:relative; display:grid; min-height:280px; place-items:center; align-content:center; gap:9px; padding:38px;
  border:1.5px dashed #b9c5d6; border-radius:18px; background:linear-gradient(180deg,#fff,#f8fafc); color:#334155; text-align:center; cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.ucs-ie-drop:hover,.ucs-ie-drop.is-dragging { border-color:#6366f1; background:#f5f7ff; box-shadow:0 14px 34px rgba(79,70,229,.08); transform:translateY(-1px); }
.ucs-ie-drop h3 { margin:4px 0 0; color:#0f172a; font-size:22px; }
.ucs-ie-drop p { max-width:650px; margin:0; color:#64748b; line-height:1.6; }
.ucs-ie-drop small { color:#94a3b8; font-weight:700; }
.ucs-ie-upload-icon { display:grid; width:56px; height:56px; place-items:center; border-radius:16px; background:#eef2ff; color:#4f46e5; }
.ucs-ie-upload-icon svg { width:28px; height:28px; }
.ucs-ie-feature-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; color:#475569; font-size:13px; font-weight:700; }
.ucs-ie-picker-error { margin:0 0 14px; padding:12px 14px; border:1px solid #fecaca; border-radius:10px; background:#fff1f2; color:#9f1239; }
.ucs-ie-loading { display:grid; min-height:260px; place-items:center; align-content:center; gap:9px; color:#475569; text-align:center; }
.ucs-ie-loading strong { color:#0f172a; font-size:19px; }
.ucs-ie-loading p { margin:0; color:#64748b; }
.ucs-ie-spinner { width:28px; height:28px; border:3px solid #e2e8f0; border-top-color:#4f46e5; border-radius:50%; animation:ucs-ie-spin .75s linear infinite; }
@keyframes ucs-ie-spin { to { transform:rotate(360deg); } }

.ucs-image-studio {
  position:fixed; z-index:100000; inset:0; display:grid; grid-template-rows:48px 88px minmax(0,1fr); width:100dvw; height:100dvh;
  background:#e7ebf1; color:#0f172a; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ucs-ie-topbar { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; padding:0 10px; border-bottom:1px solid #d5dbe5; background:#fff; }
.ucs-ie-top-left,.ucs-ie-top-actions { display:flex; min-width:0; align-items:center; gap:7px; }
.ucs-ie-top-actions { justify-content:flex-end; }
.ucs-ie-document-name { display:flex; min-width:0; align-items:center; gap:9px; }
.ucs-ie-document-copy { display:grid; min-width:0; line-height:1.15; }
.ucs-ie-document-copy strong { max-width:320px; overflow:hidden; color:#172033; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ucs-ie-document-copy small { margin-top:3px; color:#7c8799; font-size:9px; font-weight:700; }
.ucs-ie-badge { padding:4px 7px; border-radius:6px; background:#eef2ff; color:#4338ca; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.ucs-ie-compact,.ucs-ie-icon-button,.ucs-ie-status-button,.ucs-ie-small-icon { display:inline-grid; place-items:center; border:1px solid #d8dee8; border-radius:8px; background:#fff; color:#475569; cursor:pointer; font-weight:800; }
.ucs-ie-compact { min-height:32px; padding:0 10px; font-size:10px; }
.ucs-ie-icon-button { width:34px; height:34px; padding:0; }
.ucs-ie-icon-button svg,.ucs-ie-status-button svg,.ucs-ie-small-icon svg { width:17px; height:17px; }
.ucs-ie-icon-button:hover,.ucs-ie-compact:hover,.ucs-ie-status-button:hover,.ucs-ie-small-icon:hover { border-color:#a5b4fc; background:#f5f7ff; color:#4338ca; }
.ucs-ie-icon-button:disabled { opacity:.35; cursor:not-allowed; }
.ucs-ie-export { display:inline-flex !important; min-height:34px; align-items:center; gap:7px; padding:0 12px !important; }
.ucs-ie-export svg,.ucs-ie-export-download svg { width:16px; height:16px; }
.ucs-ie-layers-toggle,.ucs-ie-props-toggle { display:none; }

.ucs-ie-ribbon { display:flex; min-width:0; gap:2px; overflow-x:auto; overflow-y:hidden; padding:7px 8px 5px; border-bottom:1px solid #d5dbe5; background:#f9fafb; scrollbar-width:thin; }
.ucs-ie-ribbon-group { display:grid; flex:0 0 auto; grid-template-rows:minmax(0,1fr) 14px; padding:0 6px; border-right:1px solid #dfe4eb; }
.ucs-ie-ribbon-group:last-child { border-right:0; }
.ucs-ie-ribbon-tools { display:flex; align-items:stretch; gap:3px; }
.ucs-ie-ribbon-label { align-self:end; color:#7b8797; font-size:8px; font-weight:850; letter-spacing:.07em; text-align:center; text-transform:uppercase; }
.ucs-ie-tool { display:grid; min-width:60px; max-width:82px; min-height:61px; grid-template-rows:31px auto; place-items:center; gap:3px; padding:5px 7px 3px; border:1px solid transparent; border-radius:8px; background:transparent; color:#445166; cursor:pointer; }
.ucs-ie-tool:hover { border-color:#d5dbe5; background:#fff; color:#25324a; }
.ucs-ie-tool.is-active { border-color:#c7d2fe; background:#eef2ff; color:#3730a3; box-shadow:inset 0 0 0 1px rgba(99,102,241,.08); }
.ucs-ie-tool-icon { display:grid; width:31px; height:31px; place-items:center; }
.ucs-ie-tool-icon svg { width:23px; height:23px; }
.ucs-ie-tool-label { display:block; width:100%; overflow:visible; font-size:9px; font-weight:800; line-height:1.15; text-align:center; white-space:normal; }

.ucs-ie-body { display:grid; min-height:0; grid-template-columns:220px minmax(320px,1fr) 310px; overflow:hidden; }
.ucs-ie-layers-panel,.ucs-ie-properties { min-height:0; background:#fff; }
.ucs-ie-layers-panel { display:grid; grid-template-rows:44px minmax(0,1fr) auto; border-right:1px solid #d5dbe5; }
.ucs-ie-properties { display:grid; grid-template-rows:44px minmax(0,1fr); border-left:1px solid #d5dbe5; }
.ucs-ie-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 11px; border-bottom:1px solid #e2e8f0; }
.ucs-ie-panel-heading strong { font-size:11px; }
.ucs-ie-panel-close { display:none; width:28px; height:28px; border:0; border-radius:7px; background:transparent; color:#64748b; cursor:pointer; }

.ucs-ie-layer-list { min-height:0; overflow:auto; padding:7px; }
.ucs-ie-layer-row { display:grid; min-width:0; grid-template-columns:28px 34px minmax(0,1fr); align-items:center; gap:7px; margin-bottom:5px; padding:7px; border:1px solid transparent; border-radius:9px; background:#fff; cursor:pointer; }
.ucs-ie-layer-row:hover { border-color:#e2e8f0; background:#f8fafc; }
.ucs-ie-layer-row.is-active { border-color:#c7d2fe; background:#eef2ff; }
.ucs-ie-layer-eye { display:grid; width:26px; height:26px; place-items:center; padding:0; border:0; background:transparent; color:#64748b; cursor:pointer; }
.ucs-ie-layer-eye svg { width:15px; height:15px; }
.ucs-ie-layer-thumb { display:grid; width:32px; height:32px; place-items:center; border:1px solid #dce3ec; border-radius:7px; background:#fff; color:#4f46e5; }
.ucs-ie-layer-thumb svg { width:17px; height:17px; }
.ucs-ie-layer-copy { display:grid; min-width:0; }
.ucs-ie-layer-copy strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ucs-ie-layer-copy small { margin-top:3px; color:#94a3b8; font-size:8px; text-transform:capitalize; }
.ucs-ie-layer-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:8px; border-top:1px solid #e2e8f0; }
.ucs-ie-small-icon { width:100%; height:34px; padding:0; }
.ucs-ie-small-icon.is-danger { color:#be123c; }

.ucs-ie-center { display:grid; min-width:0; min-height:0; grid-template-rows:32px minmax(0,1fr) 36px; background:#dfe4ea; }
.ucs-ie-stage-status { display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #d2d9e2; background:#f6f8fa; color:#667085; font-size:9px; font-weight:750; }
.ucs-ie-stage-scroller { position:relative; min-width:0; min-height:0; overflow:auto; padding:36px; background-color:#dfe4ea; background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.22) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.22) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.22) 75%); background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.ucs-ie-stage { position:relative; margin:auto; background:transparent; box-shadow:0 10px 30px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.08); transform-origin:top left; }
.ucs-ie-canvas,.ucs-ie-interaction { position:absolute; inset:0; display:block; }
.ucs-ie-interaction { z-index:4; touch-action:none; }
.ucs-ie-interaction[data-tool="draw"] { cursor:crosshair; }
.ucs-ie-interaction[data-tool="crop"] { cursor:default; }
.ucs-ie-selection { position:absolute; box-sizing:border-box; border:2px solid #00a7d8; outline:1px solid #fff; outline-offset:2px; box-shadow:0 0 0 1px rgba(15,23,42,.22); cursor:move; transform-origin:center; touch-action:none; }
.ucs-ie-selection.is-dragging { cursor:grabbing; }
.ucs-ie-selection-tag { position:absolute; top:-25px; left:-3px; max-width:170px; overflow:hidden; padding:4px 7px; border-radius:6px; background:#0f172a; color:#fff; font-size:8px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.ucs-ie-resize-handle { position:absolute; right:-8px; bottom:-8px; width:15px; height:15px; border:2px solid #fff; border-radius:4px; background:#f97316; box-shadow:0 0 0 1px #c2410c,0 2px 7px rgba(15,23,42,.25); cursor:nwse-resize; touch-action:none; }
.ucs-ie-draw-draft { position:absolute; inset:0; z-index:20; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ucs-ie-crop-box { position:absolute; box-sizing:border-box; border:2px solid #6366f1; box-shadow:0 0 0 9999px rgba(15,23,42,.52),0 0 0 1px #fff inset; cursor:move; touch-action:none; }
.ucs-ie-crop-box::before,.ucs-ie-crop-box::after { position:absolute; content:""; pointer-events:none; }
.ucs-ie-crop-box::before { top:33.333%; left:0; width:100%; height:33.333%; border-top:1px dashed rgba(255,255,255,.65); border-bottom:1px dashed rgba(255,255,255,.65); }
.ucs-ie-crop-box::after { top:0; left:33.333%; width:33.333%; height:100%; border-left:1px dashed rgba(255,255,255,.65); border-right:1px dashed rgba(255,255,255,.65); }
.ucs-ie-crop-label { position:absolute; top:7px; left:7px; z-index:2; padding:4px 7px; border-radius:5px; background:rgba(15,23,42,.82); color:#fff; font-size:8px; font-weight:850; }
.ucs-ie-crop-handle { position:absolute; right:-8px; bottom:-8px; z-index:3; width:16px; height:16px; border:2px solid #fff; border-radius:4px; background:#6366f1; box-shadow:0 0 0 1px #4338ca; cursor:nwse-resize; }
.ucs-ie-statusbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 10px; border-top:1px solid #d5dbe5; background:#fff; color:#64748b; font-size:9px; font-weight:750; }
.ucs-ie-zoom { display:flex; align-items:center; gap:5px; }
.ucs-ie-status-button { width:27px; height:27px; padding:0; border-color:transparent; }
.ucs-ie-zoom strong { min-width:42px; color:#334155; font-size:9px; text-align:center; }

.ucs-ie-property-body { min-height:0; overflow:auto; padding:12px; }
.ucs-ie-property-body h3 { margin:0 0 4px; color:#172033; font-size:14px; }
.ucs-ie-property-body h4 { margin:15px 0 8px; padding-top:10px; border-top:1px solid #e5e7eb; color:#475569; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.ucs-ie-muted { margin:0 0 13px; color:#7c8799; font-size:9px; line-height:1.55; }
.ucs-ie-field { display:grid; gap:5px; margin-bottom:10px; color:#475569; font-size:9px; font-weight:800; }
.ucs-ie-field > span { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ucs-ie-field input:not([type="checkbox"]),.ucs-ie-field select,.ucs-ie-field textarea { width:100%; min-width:0; box-sizing:border-box; border:1px solid #d7dee8; border-radius:8px; background:#fff; color:#172033; font:inherit; font-weight:700; outline:0; }
.ucs-ie-field input:not([type="checkbox"]),.ucs-ie-field select { min-height:35px; padding:6px 8px; }
.ucs-ie-field textarea { min-height:88px; padding:8px; resize:vertical; line-height:1.45; }
.ucs-ie-field input:focus,.ucs-ie-field select:focus,.ucs-ie-field textarea:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ucs-ie-field input[type="color"] { min-height:36px; padding:3px; }
.ucs-ie-field input[type="range"] { min-height:25px; padding:0; accent-color:#4f46e5; }
.ucs-ie-check { display:flex; align-items:center; gap:8px; margin:8px 0 10px; color:#475569; font-size:9px; font-weight:800; }
.ucs-ie-check input { accent-color:#4f46e5; }
.ucs-ie-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ucs-ie-range-value { color:#64748b; font-size:8px; font-weight:850; }
.ucs-ie-property-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.ucs-ie-secondary,.ucs-ie-danger,.ucs-ie-filter { min-height:35px; padding:7px 9px; border:1px solid #d7dee8; border-radius:8px; background:#fff; color:#475569; cursor:pointer; font-size:9px; font-weight:850; }
.ucs-ie-secondary:hover,.ucs-ie-filter:hover { border-color:#a5b4fc; background:#f5f7ff; color:#3730a3; }
.ucs-ie-danger { border-color:#fecdd3; color:#be123c; }
.ucs-ie-danger:hover { background:#fff1f2; }
.ucs-ie-info-grid { display:grid; grid-template-columns:1fr; gap:7px; margin:10px 0 14px; }
.ucs-ie-info-card { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid #e2e8f0; border-radius:9px; background:#f8fafc; }
.ucs-ie-info-card small { color:#64748b; font-size:8px; font-weight:800; }
.ucs-ie-info-card strong { color:#172033; font-size:9px; }
.ucs-ie-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ucs-ie-filter { min-height:48px; }
.ucs-ie-export-download { display:flex !important; width:100%; min-height:40px; align-items:center; justify-content:center; gap:8px; margin-top:10px; }
.ucs-ie-export-note { padding:9px 10px; border:1px solid #dbeafe; border-radius:8px; background:#eff6ff; color:#1e40af; font-size:8px; line-height:1.5; }
.ucs-ie-toast { position:fixed; z-index:100020; right:20px; bottom:20px; max-width:360px; padding:10px 13px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; box-shadow:0 15px 36px rgba(15,23,42,.2); color:#334155; font-size:10px; font-weight:800; }
.ucs-ie-toast.is-success { border-color:#a7f3d0; color:#047857; }
.ucs-ie-toast.is-error { border-color:#fecaca; color:#b91c1c; }

@media (max-width:1240px) {
  .ucs-image-studio { grid-template-rows:46px 74px minmax(0,1fr); }
  .ucs-ie-body { grid-template-columns:minmax(0,1fr); }
  .ucs-ie-layers-panel,.ucs-ie-properties { position:fixed; z-index:100012; top:120px; bottom:0; width:min(320px,88vw); box-shadow:0 10px 30px rgba(15,23,42,.2); transition:transform .2s ease; }
  .ucs-ie-layers-panel { left:0; transform:translateX(-105%); }
  .ucs-ie-properties { right:0; transform:translateX(105%); }
  .ucs-image-studio.show-layers .ucs-ie-layers-panel { transform:translateX(0); }
  .ucs-image-studio.show-properties .ucs-ie-properties { transform:translateX(0); }
  .ucs-ie-panel-close,.ucs-ie-layers-toggle,.ucs-ie-props-toggle { display:grid; }
  .ucs-ie-ribbon { padding-top:5px; padding-bottom:3px; }
  .ucs-ie-tool { min-width:56px; min-height:49px; grid-template-rows:24px auto; padding:3px 5px 2px; }
  .ucs-ie-tool-icon { width:25px; height:25px; }
  .ucs-ie-tool-icon svg { width:19px; height:19px; }
  .ucs-ie-tool-label { font-size:8px; }
  .ucs-ie-ribbon-group { grid-template-rows:minmax(0,1fr) 11px; }
  .ucs-ie-ribbon-label { font-size:7px; }
}
@media (max-width:760px) {
  .ucs-image-studio { grid-template-rows:44px 66px minmax(0,1fr); }
  .ucs-ie-topbar { padding:0 6px; }
  .ucs-ie-document-copy small,.ucs-ie-badge { display:none; }
  .ucs-ie-document-copy strong { max-width:125px; font-size:10px; }
  .ucs-ie-top-actions { gap:3px; }
  .ucs-ie-icon-button { width:30px; height:30px; }
  .ucs-ie-export { min-width:34px; width:34px; padding:0 !important; justify-content:center; }
  .ucs-ie-export span { display:none; }
  .ucs-ie-compact { min-height:30px; padding:0 7px; font-size:9px; }
  .ucs-ie-layers-toggle { display:none; }
  .ucs-ie-ribbon { gap:0; padding-left:4px; padding-right:4px; }
  .ucs-ie-ribbon-group { padding:0 3px; }
  .ucs-ie-tool { min-width:51px; max-width:62px; }
  .ucs-ie-stage-scroller { padding:24px; }
  .ucs-ie-stage-status { padding:0 8px; font-size:8px; }
  .ucs-ie-statusbar { padding:0 7px; }
  .ucs-ie-statusbar > span { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ucs-ie-layers-panel,.ucs-ie-properties { top:110px; }
  .ucs-ie-toast { right:10px; bottom:45px; left:10px; max-width:none; text-align:center; }
}

/* Canvas-image model + smooth layer transforms — v3.12.1 ---------------- */
.ucs-ie-selection {
  transition: box-shadow .12s ease, border-color .12s ease;
  will-change: left, top, width, height, transform;
}
.ucs-ie-selection.is-canvas-image {
  border-color:#7c3aed;
  outline-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(124,58,237,.28),0 0 0 4px rgba(124,58,237,.08);
}
.ucs-ie-selection.is-canvas-image .ucs-ie-selection-tag { background:#5b21b6; }
.ucs-ie-resize-handle {
  width:16px;
  height:16px;
  right:auto;
  bottom:auto;
  border:2px solid #fff;
  border-radius:5px;
  background:#f97316;
  box-shadow:0 0 0 1px #c2410c,0 2px 8px rgba(15,23,42,.28);
  touch-action:none;
  z-index:4;
}
.ucs-ie-resize-handle.is-nw { left:-9px; top:-9px; cursor:nwse-resize; }
.ucs-ie-resize-handle.is-ne { right:-9px; top:-9px; cursor:nesw-resize; }
.ucs-ie-resize-handle.is-se { right:-9px; bottom:-9px; cursor:nwse-resize; }
.ucs-ie-resize-handle.is-sw { left:-9px; bottom:-9px; cursor:nesw-resize; }
.ucs-ie-resize-handle.is-resizing { background:#ea580c; transform:scale(1.12); }
.ucs-ie-attached-note {
  margin:2px 0 8px;
  padding:9px 10px;
  border:1px solid #ddd6fe;
  border-radius:8px;
  background:#f5f3ff;
  color:#5b21b6;
  font-size:9px;
  font-weight:700;
  line-height:1.45;
}
.ucs-ie-crop-box { transform-origin:center; }
.ucs-ie-crop-box.is-layer-crop { border-color:#f59e0b; }
.ucs-ie-crop-box.is-layer-crop .ucs-ie-crop-handle { background:#f59e0b; box-shadow:0 0 0 1px #b45309; }
.ucs-ie-crop-handle {
  right:auto;
  bottom:auto;
  width:16px;
  height:16px;
  touch-action:none;
}
.ucs-ie-crop-handle.is-nw { left:-8px; top:-8px; cursor:nwse-resize; }
.ucs-ie-crop-handle.is-ne { right:-8px; top:-8px; cursor:nesw-resize; }
.ucs-ie-crop-handle.is-se { right:-8px; bottom:-8px; cursor:nwse-resize; }
.ucs-ie-crop-handle.is-sw { left:-8px; bottom:-8px; cursor:nesw-resize; }
@media (max-width:760px) {
  .ucs-ie-resize-handle { width:18px; height:18px; }
  .ucs-ie-resize-handle.is-nw { left:-10px; top:-10px; }
  .ucs-ie-resize-handle.is-ne { right:-10px; top:-10px; }
  .ucs-ie-resize-handle.is-se { right:-10px; bottom:-10px; }
  .ucs-ie-resize-handle.is-sw { left:-10px; bottom:-10px; }
}

/* Stable canvas hit-testing + transform handles — v3.12.2 ---------------- */
.ucs-ie-selection-tag { pointer-events:none; }
.ucs-ie-selection { user-select:none; -webkit-user-select:none; }
.ucs-ie-resize-handle {
  width:18px;
  height:18px;
  z-index:12;
}
.ucs-ie-resize-handle.is-nw { left:-10px; top:-10px; }
.ucs-ie-resize-handle.is-ne { right:-10px; top:-10px; }
.ucs-ie-resize-handle.is-se { right:-10px; bottom:-10px; }
.ucs-ie-resize-handle.is-sw { left:-10px; bottom:-10px; }
.ucs-ie-interaction[data-tool="select"] { cursor:default; }
.ucs-ie-selection { cursor:move; }
@media (pointer:coarse) {
  .ucs-ie-resize-handle { width:22px; height:22px; }
  .ucs-ie-resize-handle.is-nw { left:-12px; top:-12px; }
  .ucs-ie-resize-handle.is-ne { right:-12px; top:-12px; }
  .ucs-ie-resize-handle.is-se { right:-12px; bottom:-12px; }
  .ucs-ie-resize-handle.is-sw { left:-12px; bottom:-12px; }
}

/* Pasteboard, smart guides and draggable layer stack — v3.12.3 ---------- */
.ucs-ie-center { background:#edf0f3; }
.ucs-ie-stage-scroller {
  background:#edf0f3;
  background-image:none;
}
.ucs-ie-stage {
  overflow:visible;
  background-color:#fff;
  background-image:repeating-conic-gradient(#f1f3f6 0 25%,#fff 0 50%);
  background-position:0 0;
  background-size:16px 16px;
  box-shadow:0 14px 38px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.12);
}
.ucs-ie-canvas { background:transparent; }

.ucs-ie-layer-row {
  position:relative;
  grid-template-columns:18px 28px 34px minmax(0,1fr);
  transition:background .12s ease,border-color .12s ease,opacity .12s ease,transform .12s ease;
}
.ucs-ie-layer-row[draggable="true"] { cursor:grab; }
.ucs-ie-layer-row.is-dragging-layer { opacity:.45; cursor:grabbing; }
.ucs-ie-layer-row.is-drop-before::before,
.ucs-ie-layer-row.is-drop-after::after {
  position:absolute;
  right:5px;
  left:5px;
  z-index:3;
  height:2px;
  border-radius:999px;
  background:#4f46e5;
  box-shadow:0 0 0 1px rgba(255,255,255,.85);
  content:"";
}
.ucs-ie-layer-row.is-drop-before::before { top:-4px; }
.ucs-ie-layer-row.is-drop-after::after { bottom:-4px; }
.ucs-ie-layer-grip {
  display:grid;
  width:18px;
  height:30px;
  place-items:center;
  color:#a0a8b5;
  cursor:grab;
}
.ucs-ie-layer-grip svg { width:16px; height:16px; }
.ucs-ie-layer-row:hover .ucs-ie-layer-grip,.ucs-ie-layer-row.is-active .ucs-ie-layer-grip { color:#6366f1; }

.ucs-ie-smart-guide {
  position:absolute;
  z-index:45;
  display:block;
  background:#ec4899;
  box-shadow:0 0 0 1px rgba(255,255,255,.72);
  pointer-events:none;
}
.ucs-ie-smart-guide.is-x { top:-18px; bottom:-18px; width:1px; transform:translateX(-.5px); }
.ucs-ie-smart-guide.is-y { right:-18px; left:-18px; height:1px; transform:translateY(-.5px); }
.ucs-ie-smart-guide.is-canvas-guide { background:#7c3aed; }

.ucs-ie-snap-toggle {
  display:inline-flex;
  min-height:27px;
  align-items:center;
  gap:5px;
  padding:0 7px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
}
.ucs-ie-snap-toggle svg { width:15px; height:15px; }
.ucs-ie-snap-toggle:hover { background:#f5f7ff; color:#4338ca; }
.ucs-ie-snap-toggle.is-active { border-color:#ddd6fe; background:#f5f3ff; color:#6d28d9; }

@media (max-width:760px) {
  .ucs-ie-stage-scroller { background:#edf0f3; }
  .ucs-ie-snap-toggle span { display:none; }
  .ucs-ie-snap-toggle { width:28px; padding:0; justify-content:center; }
}