/* ====================================================================
   editork.css — fully self-contained stylesheet for the new "Copilot
   Editor" shell. NO dependency on editorh.css — once editorh.html is
   retired we can delete editorh.css without touching editork.
   Includes:
     1. CSS variables (both --ek-* layout vars and --editor-* legacy
        vars used by .mkt-* widgets)
     2. Page-level layout (header, left toolbar, canvas area, right panel)
     3. AI prompt / tabs / variants dock chrome
     4. Editor widget styles ported from editorh.css (.mkt-section,
        .mkt-prop-row, .mkt-selection-toolbar, .mkt-editor-canvas-zoom-*,
        .moveable-*, .mkt-imggen-*, etc.) — these match the IDs / classes
        editorh.js creates at runtime, so the inspector, selection
        toolbar, zoom controls, and image-generation modal all work.
     5. Inspector skin overrides for `.ek-right-panel .mkt-section` so the
        sections look at home in the new dark right panel.
   ==================================================================== */

:root {
  /* Layout / chrome variables (editork-specific) */
  --ek-bg-page: #0a0a0c;
  --ek-bg-panel: #15151a;
  --ek-bg-panel-2: #1a1a1f;
  --ek-bg-canvas: #0a0a0c;
  --ek-border: rgba(255, 255, 255, 0.07);
  --ek-border-strong: rgba(255, 255, 255, 0.14);
  --ek-text: #f4f7ff;
  --ek-text-muted: #9d9da5;
  --ek-text-dim: #5e5e68;
  --ek-accent: #00e5a0;
  --ek-accent-soft: rgba(0, 173, 192, 0.18);
  --ek-accent-glow: 0 0 16px rgba(0, 173, 192, 0.25);
  --ek-header-h: 56px;
  /* Moveable selection UI constants.
     Tune these in one place:
     - fine pointer = desktop mouse/trackpad, precise small handles;
     - coarse pointer = touch/mobile, larger finger-friendly handles. */
  --ek-moveable-handle-size-fine: 10px;
  --ek-moveable-handle-border-fine: 1.5px;
  --ek-moveable-text-width-handle-size-fine: 12px;
  --ek-moveable-handle-size-coarse: 18px;
  --ek-moveable-handle-border-coarse: 2px;
  --ek-moveable-text-width-handle-size-coarse: 20px;
  --ek-moveable-handle-size: var(--ek-moveable-handle-size-fine);
  --ek-moveable-handle-border: var(--ek-moveable-handle-border-fine);
  --ek-moveable-text-width-handle-size: var(
    --ek-moveable-text-width-handle-size-fine
  );

  /* Legacy widget variables — read by every .mkt-* rule below. Kept as
     separate names so we can re-skin the new chrome (--ek-*) without
     also retuning the inspector / selection toolbar. */
  --editor-bg-main: #09090b;
  --editor-bg-surface: rgba(32, 35, 39, 0.82);
  --editor-bg-surface-strong: rgba(18, 18, 22, 0.95);
  --editor-border: #4d4d53;
  --editor-border-soft: rgba(255, 255, 255, 0.12);
  --editor-text-main: #f4f7ff;
  --editor-text-secondary: #a1a1aa;
  --editor-text-secondary-2: #909099;
  --editor-accent: #00e5a0;
  --editor-accent-success: #00b637;
  --accent2-color: #00adc0;
}

/* ====================================================================
   1. Design canvas reset
   The editor host page loads bootstrap (and previously editorh.css)
   which apply reboot rules that bleed into the design canvas — most
   commonly h1-h6 weight, line-height, font-family, and box-sizing.
   These rules restore the spec defaults inside .design-canvas so any
   user design renders identically to opening its source HTML directly.
   :where() keeps specificity at 0 so the design's own rules always win.
   ==================================================================== */
.design-canvas :where(h1, h2, h3, h4, h5, h6) {
  font-weight: bold;
  line-height: normal;
}
.design-canvas :where(b, strong) {
  font-weight: bolder;
}
.design-canvas {
  line-height: normal;
  font-family: initial;
  font-size: initial;
  font-weight: initial;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
}
.design-canvas,
.design-canvas *,
.design-canvas *::before,
.design-canvas *::after {
  box-sizing: content-box;
}
/* Disable native text selection on the canvas — drags should start a
   marquee selection, not highlight text. Reverted on contenteditable
   below so text editing still works. */
.design-canvas,
.design-canvas * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.design-canvas .draggable-item {
  pointer-events: auto !important;
  cursor: default;
}
.design-canvas > .draggable-item:hover {
  outline: 1px dashed rgba(13, 110, 253, 0.3);
  outline-offset: 2px;
}
body.ek-canvas-moving .design-canvas > .draggable-item:hover {
  outline: none !important;
}
.design-canvas .editable-text[contenteditable="true"] {
  cursor: text;
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  caret-color: #0d6efd;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.design-canvas [contenteditable="true"],
.design-canvas [contenteditable="true"] * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.mkt-text-edit-caret {
  position: fixed;
  z-index: 13000;
  width: 3px;
  min-height: 1em;
  background: #0d6efd;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform: translateX(-1px);
  animation: mkt-text-edit-caret-blink 1s steps(2, start) infinite;
}
@keyframes mkt-text-edit-caret-blink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}
.mkt-page-shadow {
  box-shadow: 0 20px 42px -20px rgba(0, 0, 0, 0.8);
}
.page-selected {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.69) !important;
  outline: 1px solid #b0b0b0;
}

/* ── Reset Bootstrap container assumptions ──────────────────────────── */

html,
body.ek-body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ek-bg-page);
  color: var(--ek-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  overflow: hidden;
}

body.ek-body {
  display: flex;
  flex-direction: column;
}

/* The original editorh.html had a fixed Bootstrap header + an
   in-document container. We hide whatever might still get injected and
   build the new shell from scratch. */
body.ek-body #mkt-header,
body.ek-body .container-xl {
  display: none !important;
}

/* ── Top header ─────────────────────────────────────────────────────── */

.ek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ek-header-h);
  padding: 0 16px;
  background: var(--ek-bg-panel);
  border-bottom: 1px solid var(--ek-border);
  /* Sits above Moveable's control-box (z-index 10000) so a big
     selection's frame can't visually cover header controls and
     swallow their clicks on zoomed canvases. */
  position: relative;
  z-index: 10250;
  flex-shrink: 0;
  overflow: visible;
}

.ek-header-left,
.ek-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ek-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

body.ek-demo-mode .ek-right-panel {
  display: none;
}

body.ek-demo-mode #mkt-col_maketcontainer.ek-canvas-area {
  flex-basis: 0;
}

.ek-header-history {
  display: none;
}

.ek-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--ek-border-strong);
  border-radius: 10px;
  color: var(--ek-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.ek-header-back:hover {
  color: var(--ek-text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
}

.ek-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  user-select: none;
}

.ek-brand-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ek-brand-text {
  font-family: "PT Serif", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: rgba(244, 247, 255, 0.92);
  letter-spacing: 0.2px;
}

.ek-brand-dot {
  color: var(--ek-accent);
}

.ek-old-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ek-border);
  border-radius: 6px;
  color: var(--ek-text-muted);
  font-size: 14px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.ek-old-editor-btn:hover {
  color: var(--ek-text);
  border-color: rgba(0, 173, 192, 0.5);
  background: rgba(0, 173, 192, 0.08);
}

/* The zoom-host gets injected by editorh.js. Style its container so it
   sits centered in the header bar. */
.ek-header-center #mkt-editor-canvas-zoom-host {
  display: flex;
  align-items: center;
}

/* Tweak the zoom-controls positioning when sitting inside the top bar
   (the standalone widget styling lives further down in this file). */
.ek-header-center .mkt-editor-canvas-zoom-controls {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

.ek-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ek-text);
  transition: background 0.15s;
}

.ek-icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ek-icon-btn img {
  width: 32px;
  height: 32px;
  filter: invert(1) brightness(0.9);
  opacity: 0.85;
}

.ek-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgb(0 229 160 / 0.4);
  border-radius: 10px;
  color: var(--ek-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.ek-pdf-btn:hover {
  background: var(--ek-accent-soft);
}

.ek-duplex-controls {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
}

.ek-duplex-controls[hidden] {
  display: none;
}

.ek-duplex-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.ek-duplex-segment button,
.ek-duplex-add {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: #475569;
  font: 600 12px/1 var(--ek-font-ui, system-ui, sans-serif);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.ek-duplex-segment button:hover,
.ek-duplex-segment button.active,
.ek-duplex-add:hover {
  background: #0f172a;
  color: #fff;
}

.ek-duplex-add {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Icon inside the PDF button: uses the SVG file as an alpha mask and
   paints it with the button's accent color via `background-color`.
   • SVG file stays untouched — masking only uses its alpha channel.
   • To re-tint, change `background-color` to any CSS color.
   • An <img> element renders its own bitmap content, so the same
     trick wouldn't work on <img>: only filter() can recolor that.
     Hence the HTML uses a <span class="ek-pdf-icon">. */
.ek-pdf-btn .ek-pdf-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--editor-accent);
  -webkit-mask: url(images/icon_download_pdf.svg) center / contain no-repeat;
  mask: url(images/icon_download_pdf.svg) center / contain no-repeat;
}

/* ── Spinner (initial load) ─────────────────────────────────────────── */

#mkt-spinner.ek-spinner {
  margin: 0;
}

/* ── Workspace: 3-column layout ─────────────────────────────────────── */

#mkt-editor_workspace.ek-workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  gap: 0 !important;
  padding: 0;
  background: var(--ek-bg-canvas);
  align-items: stretch;
}

/* Left thin toolbar (icons only) */
.ek-left-toolbar {
  width: 60px;
  flex-shrink: 0;
  background: var(--ek-bg-panel);
  border-right: 1px solid var(--ek-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 6px;
  position: relative;
  /* Beats Moveable's control-box (z-index 10000) so a big selection
     can't visually overlay these buttons and intercept their clicks. */
  z-index: 10001;
}

.ek-tool-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  padding: 0;
}

.ek-tool-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ek-border-strong);
}

.ek-left-toolbar .ek-tool-btn[hidden] {
  display: none;
}

.ek-toolbar-separator {
  width: 28px;
  height: 1px;
  margin: 5px 0;
  background: var(--ek-border-strong);
  opacity: 0.72;
}

.ek-toolbar-separator[hidden] {
  display: none;
}

.ek-tool-icon {
  width: 22px;
  height: 22px;
  filter: invert(1) brightness(0.9);
  opacity: 0.85;
}

.ek-duplex-add-toolbar-btn {
  color: rgba(244, 247, 255, 0.9);
}

.ek-duplex-add-toolbar-btn:hover {
  color: #fff;
}

.ek-duplex-add-icon {
  width: 21px;
  height: 21px;
  filter: none;
  opacity: 0.6;
  transform: scaleY(1.05);
}

.ek-duplex-add-toolbar-btn.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.ek-tool-dropdown .dropdown-menu {
  margin-left: 4px;
}

/* Canvas area (center) */
#mkt-col_maketcontainer.ek-canvas-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  background: var(--ek-bg-canvas);
  overflow: hidden;
  padding: 0;
}

/* If a stray .editor-canvas-stack wrapper is ever injected, force it to
   fill the canvas area cleanly. */
#mkt-col_maketcontainer.ek-canvas-area .editor-canvas-stack {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

#mkt-editor-canvas-viewport.ek-canvas-viewport {
  position: absolute;
  inset: 0;
  /* `place-content: safe center` keeps the canvas centered when it fits and
     falls back to start-alignment when it overflows — plain flex centering
     clips the start side once content is larger than the viewport, which
     manifests as phantom scrollable area on the opposite side. */
  display: grid;
  place-content: safe center;
  overflow: auto;
  /* This padding is also the visual breathing gap around the page — editorh.js
     `fitCanvasToViewport` reads padding-* from this element and subtracts it
     from the available area, so the fit-to-viewport scale already accounts
     for it (no double margin, no micro-scrollbar). */
  padding: 15px;
  background: var(--ek-bg-canvas);
}

/* editork.js relocates the canvas-zoom `transform: scale(z)` from this host
   onto its `.design-canvas` child (see the MutationObserver in editork.js)
   so layout = visual = naturalSize · z on the host (matching editorh.js's
   inline width/height pin) and the canvas's transformed visual fills that
   box exactly — no double-scale phantom area, no layout-vs-visual mismatch
   in either zoom direction. transform-origin here is just defensive for
   any leftover frame before the observer fires. */
#mkt-editor-canvas-zoom-content {
  position: relative;
  transform-origin: top left;
}
.design-canvas {
  transform-origin: top left;
}

/* ── Direct editor entry: demo picker ──────────────────────────────── */
.ek-demo-start {
  min-width: min(880px, calc(100vw - 140px));
  max-width: 960px;
  padding: 32px;
  color: var(--ek-text);
}

.ek-demo-start-inner {
  --ek-demo-inner-pad: 30px;
  padding: 30px;
  border: 1px solid var(--ek-border-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 173, 192, 0.16), transparent 34%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    ),
    rgba(18, 18, 24, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

.ek-demo-start-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.ek-demo-start h1 {
  max-width: 700px;
  margin: 0;
  color: var(--ek-text);
  font-size: clamp(22px, 2.7vw, 36px);
  font-weight: 850;
  line-height: 1.08;
}

.ek-demo-start h1 span {
  display: block;
}

.ek-demo-start h1 mark {
  padding: 0;
  color: var(--accent2-color);
  background: transparent;
}

.ek-demo-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 42px;
  padding: 0 26px;
  color: #071113;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgba(57, 245, 255, 0.18);
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent2-color), #39f5ff);
  box-shadow: 0 12px 28px rgba(0, 173, 192, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.ek-demo-create:hover,
.ek-demo-create:focus-visible {
  color: #071113;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 173, 192, 0.28);
  outline: none;
}

.ek-demo-create-desktop {
  flex: 0 0 auto;
  margin-top: 10px;
  width: 176px;
  min-height: 65px;
}

.ek-demo-create-mobile {
  display: none;
}

.ek-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ek-demo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--ek-border-strong);
  border-radius: 12px;
  background: rgba(10, 10, 12, 0.72);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ek-demo-card:hover,
.ek-demo-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 173, 192, 0.75);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(0, 173, 192, 0.12);
  outline: none;
}

.ek-demo-card-preview {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111115;
}

.ek-demo-card-bg {
  position: absolute;
  inset: -20px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(1.5) brightness(0.95);
  transform: scale(1.3);
  z-index: 0;
}

.ek-demo-card-img {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  width: auto;
  height: auto;
  margin: auto;
  z-index: 1;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 7px 18px rgba(0, 0, 0, 0.48);
  pointer-events: none;
  user-select: none;
}

.ek-demo-card-body {
  display: block;
  padding: 10px 11px 12px;
}

.ek-demo-card-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ek-text-muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.ek-demo-empty {
  padding: 18px;
  color: var(--ek-text-muted);
  border: 1px dashed var(--ek-border-strong);
  border-radius: 12px;
}

@media (max-width: 900px) {
  .ek-demo-start {
    min-width: min(620px, calc(100vw - 92px));
    padding: 18px;
  }

  .ek-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ek-demo-start-head {
    display: block;
  }

  .ek-demo-create-desktop {
    display: none;
  }

  .ek-demo-create-mobile {
    display: inline-flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 18px;
  }
}

@media (max-width: 560px) {
  .ek-demo-start {
    min-width: calc(100vw - 44px);
    padding: 10px;
  }

  .ek-demo-start-inner {
    --ek-demo-inner-pad: 18px;
    padding: 18px;
  }

  .ek-demo-grid {
    gap: 10px;
  }
}

@media (max-width: 430px) {
  .ek-demo-start h1 {
    font-size: 15px;
    line-height: 1.06;
  }

  .ek-demo-card-body {
    display: none;
  }
}

/* Notes tool lives in the left toolbar and is pinned to its bottom edge. */
.ek-left-toolbar .ek-notes-fab.mkt-notes-fab {
  margin-top: auto;
}

.ek-left-toolbar .ek-notes-fab.mkt-notes-fab svg {
  width: 18px;
  height: 18px;
}

.mkt-notes-popover {
  position: fixed;
  z-index: 10280;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  background: rgba(28, 29, 35, 0.98);
  border: 1px solid var(--ek-border-strong);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  color: var(--ek-text);
}

.mkt-notes-popover[hidden] {
  display: none !important;
}

.mkt-notes-popover-header {
  margin-bottom: 8px;
  color: var(--ek-text);
  font-size: 13px;
  font-weight: 700;
}

.mkt-notes-popover textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  background: rgba(12, 13, 18, 0.92);
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  color: var(--ek-text);
  font-size: 13px;
  line-height: 1.45;
}

.mkt-notes-popover textarea:focus {
  background: rgba(12, 13, 18, 0.98);
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 245, 196, 0.16);
  color: var(--ek-text);
}

/* Right smart panel — widened ~30% (330 → 430px) for the Art-Director
   chat which needs comfortable reading width for empathic dialogue. */
.ek-right-panel {
  width: 430px;
  --ek-right-panel-expanded-w: 430px;
  --ek-right-panel-collapsed-w: 42px;
  flex-shrink: 0;
  background: var(--ek-bg-panel-2);
  border-left: 1px solid var(--ek-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  /* Beats Moveable's control-box (z-index 10000) so a big selection
     can't visually overlay the tabs and inspector and intercept clicks. */
  z-index: 10001;
  transition: width 0.22s ease;
  will-change: width;
}

.ek-right-panel-toggle {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--ek-bg-panel);
  border: 1px solid var(--ek-border-strong);
  border-radius: 8px;
  color: var(--ek-text-muted);
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.9);
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s,
    transform 0.22s ease;
}

.ek-right-panel-collapsed-dock {
  display: none;
}

.ek-right-panel-toggle:hover {
  color: var(--ek-accent);
  border-color: rgba(0, 229, 160, 0.45);
  background: #101014;
}

.ek-right-panel-toggle-icon {
  transition: transform 0.22s ease;
}

.ek-right-panel.ek-right-panel-collapsed {
  width: var(--ek-right-panel-collapsed-w);
  min-width: var(--ek-right-panel-collapsed-w);
  overflow: visible;
}

.ek-right-panel.ek-right-panel-collapsed
  > :not(.ek-right-panel-toggle):not(.ek-right-panel-collapsed-dock) {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.ek-right-panel.ek-right-panel-collapsed .ek-right-panel-toggle {
  left: 4px;
  top: 8px;
  width: 32px;
  height: 32px;
  transform: none;
  border-radius: 8px;
  border-right: 1px solid var(--ek-border-strong);
  box-shadow: none;
}

.ek-right-panel.ek-right-panel-collapsed .ek-right-panel-toggle-icon {
  transform: rotate(180deg);
}

.ek-right-panel.ek-right-panel-collapsed .ek-right-panel-collapsed-dock {
  position: absolute;
  top: 48px;
  left: 4px;
  z-index: 3;
  display: flex;
  width: 32px;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ek-right-panel-dock-tab {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  background: rgba(18, 18, 24, 0.92);
  color: var(--ek-text-muted);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.ek-right-panel-dock-tab:hover,
.ek-right-panel-dock-tab:focus-visible {
  color: var(--ek-accent);
  border-color: rgba(0, 229, 160, 0.45);
  background: #101014;
}

/* ── Tabs header (Арт-директор / ИИ-стили / Свойства) ──────────────── */
.ek-tabs {
  display: flex;
  padding-left: 46px;
  border-bottom: 1px solid var(--ek-border);
  background: var(--ek-bg-panel);
  flex-shrink: 0;
}
.ek-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ek-text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.ek-tab svg {
  flex-shrink: 0;
  opacity: 0.85;
}
/* .ek-tab sets display:inline-flex which would override the HTML
   `hidden` attribute. Reassert hiding via an attribute selector
   (higher specificity than the plain class rule). */
.ek-tab[hidden] {
  display: none;
}
.ek-tab:hover {
  color: var(--ek-text);
}
.ek-tab-active {
  color: var(--ek-text);
  border-bottom-color: var(--ek-accent);
}
.ek-tab-active svg {
  opacity: 1;
  color: var(--ek-accent);
}

/* ── Tab panes ───────────────────────────────────────────────────────── */
.ek-tab-pane {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.ek-tab-pane-active {
  display: flex;
}
.ek-tab-pane-art {
  background: rgba(10, 10, 12, 0.4);
  /* Breathing room between the tab strip and the first chat bubble.
     Placed on the pane (not on the scroll-container .ek-art-chat) so
     it never scrolls away with the content. */
  padding-top: 12px;
}
.ek-tab-pane-props {
  overflow-y: auto;
  overflow-x: hidden;
}
.ek-tab-pane-vibe {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  gap: 12px;
}
.ek-right-panel-effects-host {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  background: rgba(10, 10, 12, 0.4);
}
.ek-right-panel.ek-right-panel-effects-mode .ek-tabs,
.ek-right-panel.ek-right-panel-effects-mode .ek-tab-pane,
.ek-right-panel.ek-right-panel-effects-mode #ek-block-genetic {
  display: none !important;
}
.ek-right-panel.ek-right-panel-effects-mode .ek-right-panel-toggle {
  display: none;
}
.ek-right-panel.ek-right-panel-effects-mode .ek-right-panel-effects-host {
  display: block;
}
.ek-effects-panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -14px -14px 14px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--ek-border);
  background: var(--ek-bg-panel);
  color: var(--ek-text);
  font-size: 14px;
  font-weight: 500;
}
.ek-effects-panel-title svg {
  flex-shrink: 0;
  color: var(--ek-accent);
}
.ek-right-panel-effects-host #mkt-section-effects {
  display: block !important;
  width: 100%;
}
.ek-right-panel-effects-host #mkt-section-effects[open] {
  background: transparent;
}
.ek-right-panel-effects-host #mkt-section-effects > .mkt-section-summary {
  display: none;
}
.ek-right-panel-effects-host #mkt-section-effects > .mkt-section-body {
  padding: 0;
}
.ek-right-panel-effects-host .mkt-fx-preset-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ek-right-panel-effects-host .mkt-fx-preset {
  min-height: 82px;
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 0;
  background: var(--ek-accent);
  border: 0;
  color: transparent;
  transform: none;
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-none {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-drop {
  box-shadow: 6px 7px 0 color-mix(in srgb, var(--ek-accent) 34%, transparent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-glow,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-neon {
  background: color-mix(in srgb, var(--ek-accent) 76%, white);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--ek-accent) 74%, white),
    0 0 26px var(--ek-accent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-echo {
  box-shadow:
    6px 6px 0 color-mix(in srgb, var(--ek-accent) 44%, transparent),
    12px 12px 0 color-mix(in srgb, var(--ek-accent) 20%, transparent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-outline,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-hollow {
  background: transparent;
  box-shadow: inset 0 0 0 4px var(--ek-accent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-bg {
  background: color-mix(in srgb, var(--ek-accent) 24%, transparent);
  box-shadow: inset 0 0 0 2px
    color-mix(in srgb, var(--ek-accent) 60%, transparent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-splice {
  background: transparent;
  box-shadow:
    inset 0 0 0 3px var(--ek-accent),
    7px 7px 0 color-mix(in srgb, var(--ek-accent) 50%, transparent);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-glitch,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-tv-static,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-arcade,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-pixel {
  background:
    linear-gradient(
      90deg,
      #00e5ff 0 32%,
      #ff2bbd 32% 66%,
      var(--ek-accent) 66%
    ),
    var(--ek-accent);
  box-shadow:
    -4px 0 0 rgba(0, 229, 255, 0.55),
    4px 0 0 rgba(255, 43, 189, 0.55);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-retro,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-western {
  background: #ffd05a;
  box-shadow:
    3px 3px 0 var(--ek-accent),
    7px 7px 0 #1a1a1f;
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-neon-lights,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-aerobics,
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-cosmic {
  background: color-mix(in srgb, var(--ek-accent) 58%, #ff6ee7);
  box-shadow:
    0 0 8px #fff,
    0 0 18px var(--ek-accent),
    0 0 32px color-mix(in srgb, var(--ek-accent) 60%, #ff37d0);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-sci-fi {
  background: #dffcff;
  box-shadow:
    0 0 14px var(--ek-accent),
    4px 0 0 rgba(0, 229, 255, 0.55);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-screenprint {
  background: #fff;
  box-shadow:
    4px 4px 0 #ff5fae,
    -3px -2px 0 color-mix(in srgb, var(--ek-accent) 70%, white);
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-graffiti {
  background: #ecfff8;
  box-shadow:
    inset 0 0 0 3px #173d2f,
    4px 4px 0 var(--ek-accent),
    -3px 2px 0 #173d2f;
}
.ek-right-panel.ek-effects-circle-mode .mkt-fx-preview-bubble {
  background: radial-gradient(
    circle at 35% 28%,
    #fff 0 13%,
    color-mix(in srgb, var(--ek-accent) 48%, white) 14% 100%
  );
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--ek-accent) 60%, #003b55),
    0 6px 0 rgba(0, 0, 0, 0.22);
}

/* ── Арт-директор: Vibe Cards (moodboards) ─────────────────────────── */
.ek-vibe-intro {
  font-size: 13px;
  color: var(--ek-text-muted);
  line-height: 1.4;
  padding: 4px 2px 8px;
  text-align: center;
}
.ek-vibe-intro span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 500;
}
.ek-vibe-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 220px);
  gap: 30px;
  min-height: calc(440px + 30px);
}
.ek-vibe-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 16px;
  color: var(--ek-text);
  font-size: 13px;
}
.ek-vibe-empty-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--ek-accent);
  border-radius: 50%;
  animation: ek-spin 0.9s linear infinite;
}

.ek-vibe-loading-note {
  grid-column: 1 / -1;
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(228px, calc(100% - 24px));
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 160, 0.18);
  background:
    linear-gradient(135deg, rgba(0, 229, 160, 0.1), transparent 44%),
    rgba(16, 18, 22, 0.9);
  color: var(--ek-text);
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ek-vibe-loading-text {
  position: relative;
  z-index: 1;
}
.ek-vibe-loading-note::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 42%,
    transparent 72%
  );
  transform: translateX(-100%);
  animation: ek-vibe-note-sheen 2.4s ease-in-out infinite;
}
.ek-vibe-loading-orbit {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 160, 0.32);
  background:
    radial-gradient(circle at 65% 35%, var(--ek-accent) 0 2px, transparent 3px),
    rgba(0, 229, 160, 0.08);
  box-shadow: 0 0 18px rgba(0, 229, 160, 0.16);
  animation: ek-spin 1.8s linear infinite;
}
@keyframes ek-vibe-note-sheen {
  0% {
    transform: translateX(-100%);
  }
  55%,
  100% {
    transform: translateX(100%);
  }
}

.ek-vibe-card {
  background: #111115;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  min-height: 220px;
  /* Anchor for the absolutely-positioned palette ribbon on the left
     edge (see .ek-vibe-palette below). */
  position: relative;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.ek-vibe-card:hover {
  border-color: var(--vibe-accent, var(--ek-accent));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.ek-vibe-card:focus-visible {
  outline: 2px solid var(--vibe-accent, var(--ek-accent));
  outline-offset: 2px;
}

.ek-vibe-wireframe {
  /* Background + currentColor are set inline from the vibe palette so
     the SVG renders in the card's accent colour automatically. Height
     is fixed (was 116 px → +15 % = 134 px) so the SVG can fill it
     consistently regardless of which aspect ratio the LLM emitted.
     sizeWireframeSvg() reads this panel's inner box and stretches the
     SVG to fit, preserving its viewBox aspect.
     `position: relative` anchors the description-on-hover overlay. */
  padding: 14px;
  height: 134px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Hover-only description overlay. Lives inside .ek-vibe-wireframe, so
   it inherits the card's accent colour via the inline `color` set on
   the panel — meaning the accent peeks through as a thin top border. */
.ek-vibe-desc {
  position: absolute;
  inset: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #f4f7ff;
  background: rgba(10, 10, 14, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}
.ek-vibe-card:hover .ek-vibe-desc,
.ek-vibe-card:focus-visible .ek-vibe-desc {
  opacity: 1;
  transform: translateY(0);
}
.ek-vibe-wireframe svg {
  display: block;
  /* width/height are set inline by sizeWireframeSvg(). The max bounds
     guard against an unexpectedly large viewBox. */
  max-width: 100%;
  max-height: 100%;
}

.ek-vibe-card-body {
  padding: 14px 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  /* Anchor for the 2-px palette ribbon on the left edge of the body. */
  position: relative;
}
/* Title doubles as the font specimen — bigger size, tight leading so
   the user can read the typographic vibe at a glance. font-family is
   set inline per card. */
.ek-vibe-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ek-text);
  line-height: 1.15;
  /* Forced single line — fitTitleToWidth() shrinks the font-size to
     fit. Overflow + ellipsis are a fallback for extreme cases where
     even the minPx floor (11 px) wouldn't fit. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vibe tags — plain comma-separated text under the title.
   No pill background, no border — just dim uppercase inline text.
   The renderer joins the tags array with ", " into the
   .ek-vibe-tags element's textContent (single text node). */
.ek-vibe-tags {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ek-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Palette ribbon — vertical 2-px strip pinned to the LEFT edge of the
   card body (NOT the whole card), full body height, 3 equal segments
   stacked top→bottom (bg / accent / text). Absolutely positioned
   inside .ek-vibe-card-body so it overlays without consuming layout;
   the body already has 14 px of left padding, so the 2-px ribbon never
   collides with title/tags content. */
.ek-vibe-palette {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  pointer-events: none;
  z-index: 1;
}
.ek-vibe-palette span {
  flex: 1;
  display: block;
}

body.ek-generating .ek-vibe-card {
  pointer-events: none;
  opacity: 0.55;
}

/* ── Skeleton cards (shown while vibe cards are loading) ─────────────
   Same outer dimensions as a real .ek-vibe-card so the grid layout is
   pre-allocated; nothing in the side panel shifts when real cards
   replace the skeletons. Matches the EvolutionPanel skeletons in the
   main app (src/index.css). */
.ek-vibe-card-skeleton {
  cursor: default;
  pointer-events: none;
  background: #0e0e12;
  border-color: rgba(255, 255, 255, 0.05);
}
.ek-vibe-card-skeleton .ek-vibe-palette span {
  background: rgba(255, 255, 255, 0.06);
}
.ek-vibe-skel-wireframe {
  background: rgba(255, 255, 255, 0.03);
}
.ek-vibe-skel-wireframe::after {
  content: "";
  display: block;
  width: 70%;
  height: 50%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.ek-vibe-skel-title {
  height: 14px;
  width: 70%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.ek-vibe-skel-tags {
  height: 8px;
  width: 50%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
.ek-vibe-card-skeleton .ek-vibe-skel-wireframe::after,
.ek-vibe-card-skeleton .ek-vibe-skel-title,
.ek-vibe-card-skeleton .ek-vibe-skel-tags,
.ek-vibe-card-skeleton .ek-vibe-palette span {
  animation: ek-skel-pulse 1.6s ease-in-out infinite;
}
.ek-vibe-card-skeleton .ek-vibe-skel-title {
  animation-delay: 0.1s;
}
.ek-vibe-card-skeleton .ek-vibe-skel-tags {
  animation-delay: 0.2s;
}
.ek-vibe-card-skeleton .ek-vibe-palette span:nth-child(2) {
  animation-delay: 0.15s;
}
.ek-vibe-card-skeleton .ek-vibe-palette span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ek-skel-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* ── Vibe-card undo / redo toggle ─────────────────────────────────── */
.ek-vibe-undo {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.ek-vibe-undo[hidden] {
  display: none;
}

.ek-vibe-undo-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--ek-accent-soft);
  border: 1px solid var(--ek-accent);
  border-radius: 10px;
  color: var(--ek-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(0, 229, 160, 0);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.18s ease,
    transform 0.05s ease;
}
.ek-vibe-undo-btn:hover {
  background: var(--ek-accent);
  color: #0a0a0c;
  box-shadow: 0 4px 14px rgba(0, 229, 160, 0.22);
}
.ek-vibe-undo-btn:active {
  transform: translateY(1px);
}

.ek-vibe-undo-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  /* The inline SVG uses fill='currentColor', so it tracks the button's
     text colour automatically — no filter magic needed. The renderer
     applies inline `transform: scale(-1, 1)` for the "redo" variant. */
}
.ek-vibe-undo-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ek-vibe-undo-label {
  display: inline-block;
}

body.ek-generating .ek-vibe-undo-btn {
  pointer-events: none;
  opacity: 0.55;
}

/* ── Art-Director chat ───────────────────────────────────────────────── */
.ek-art-chat {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
/* Sticky-to-bottom: when the chat is short, push messages down so the
   newest sits right above the chip zone (standard messenger feel). When
   the chat overflows, this auto margin collapses to 0 and the natural
   scroll takes over. */
.ek-art-chat > *:first-child {
  margin-top: auto;
}
/* Visible chat scrollbar — the panel-level rule is intentionally very
   faint (rgba 0.08) for inspector/vibe panes, but the chat needs to
   read as a scrollable list, so we bump the thumb here. Chromium-only
   via ::-webkit-scrollbar — setting `scrollbar-width` or `scrollbar-color`
   here makes Chromium switch to its overlay variant which ignores the
   webkit width and ends up invisible against the dark panel. NO
   `scrollbar-gutter: stable` either: the bar should only appear when
   the chat actually overflows, not reserve empty space on short chats. */
/* Selectors prefixed with .ek-right-panel so they OUT-WIN the later
   `.ek-right-panel ::-webkit-scrollbar { width: 6px; opacity 0.08 }`
   rule (same specificity 0,1,1, but source-order would otherwise apply
   the faint 6px bar to the chat). */
.ek-right-panel .ek-art-chat::-webkit-scrollbar {
  width: 8px;
}
.ek-right-panel .ek-art-chat::-webkit-scrollbar-track {
  background: transparent;
}
.ek-right-panel .ek-art-chat::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 4px;
}
.ek-right-panel .ek-art-chat::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
.ek-art-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--ek-text);
  font-size: 13px;
}
.ek-art-chat-loading {
  justify-content: flex-start;
  padding: 18px 0 8px;
}
.ek-art-loading-note.ek-vibe-loading-note {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
}
.ek-art-loading-skeleton {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.ek-art-loading-skeleton span {
  display: block;
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.045),
      transparent
    ),
    rgba(255, 255, 255, 0.025);
  background-size: 220% 100%;
  animation: ek-art-skel-sheen 1.8s ease-in-out infinite;
}
.ek-art-loading-skeleton span:nth-child(2) {
  animation-delay: 0.12s;
}
.ek-art-loading-skeleton span:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes ek-art-skel-sheen {
  0% {
    background-position: 180% 0;
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -80% 0;
    opacity: 0.55;
  }
}
.ek-art-chat-empty-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--ek-accent);
  border-radius: 50%;
  animation: ek-spin 0.9s linear infinite;
}
@keyframes ek-spin {
  to {
    transform: rotate(360deg);
  }
}

/* AI message (assistant) */
.ek-art-msg-ai {
  display: flex;
  gap: 10px;
}
.ek-art-msg-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ek-accent-soft);
  color: var(--ek-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 11px;
}
.ek-art-msg-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ek-art-msg-bubble {
  background: #222228;
  border: 1px solid var(--ek-border);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.ek-art-msg-bubble.ek-art-msg-bubble-action {
  border-color: rgba(0, 229, 160, 0.32);
  position: relative;
  overflow: hidden;
}
.ek-art-msg-bubble.ek-art-msg-bubble-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--ek-accent);
}

/* Chip / option buttons */
.ek-art-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ek-art-option {
  text-align: left;
  background: transparent;
  border: 1px solid var(--ek-border);
  color: var(--ek-text);
  font-size: 13px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.ek-art-option:hover {
  border-color: var(--ek-accent);
  background: var(--ek-accent-soft);
  color: var(--ek-accent);
}
/* Category icon next to chip text. SVG strokes inherit from
   currentColor so the icon picks up the chip's hover/active colour
   automatically. */
.ek-art-option-icon {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ek-text);
  transition: color 0.15s;
}
.ek-art-option-icon svg {
  width: 38px;
  height: 38px;
  display: block;
}
.ek-art-option:hover .ek-art-option-icon {
  color: var(--ek-accent);
}
.ek-art-option-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  /* Cap at 2 lines — keeps the chip tidy when an option happens to
     be longer than 5–6 words; the icon cell is sized to match. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* User message (right-aligned bubble) */
.ek-art-msg-user {
  display: flex;
  justify-content: flex-end;
  padding-left: 40px;
}
.ek-art-msg-user-bubble {
  background: var(--ek-accent);
  color: #0a0a0c;
  font-weight: 500;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 12px;
  font-size: 13px;
  max-width: 90%;
  word-wrap: break-word;
  box-shadow: 0 4px 15px rgba(0, 229, 160, 0.15);
}

/* Loading-while-thinking dots */
.ek-art-msg-loading-dots {
  display: inline-flex;
  gap: 3px;
}
.ek-art-msg-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ek-accent);
  opacity: 0.45;
  animation: ek-dot 1.2s infinite;
}
.ek-art-msg-loading-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.ek-art-msg-loading-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ek-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Quick-reply chip zone — sits right above the composer so the user
   immediately sees "suggestions vs. own input" (ChatGPT-style layout).
   Populated by renderQuickChips() with the latest AI-message options;
   cleared on user submit. Hidden when empty so the composer hugs the
   chat history. */
.ek-art-quick-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 6px;
  background: var(--ek-bg-panel);
  border-top: 1px solid var(--ek-border);
  flex-shrink: 0;
}
.ek-art-quick-chips[hidden] {
  display: none;
}
.ek-art-quick-chips .ek-art-quick-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  margin-bottom: 2px;
}
/* Avoid the double divider when both zones are visible (quick-chips
   already has a top border, composer's top border becomes redundant). */
.ek-art-quick-chips + .ek-art-composer {
  border-top: 0;
}

/* Composer (textarea + send button) */
.ek-art-composer {
  padding: 14px;
  border-top: 1px solid var(--ek-border);
  background: var(--ek-bg-panel);
  flex-shrink: 0;
}
.ek-art-composer-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--ek-bg-page);
  /* Stronger border + accent left edge so the prompt box reads as a
     primary control, not a passive footer. The accent stripe doubles
     as a visual anchor — the user knows "this is where I talk to the
     AI" at a glance, no caption needed. */
  border: 1.5px solid var(--ek-border-strong);
  border-left-width: 3px;
  border-left-color: var(--ek-accent);
  border-radius: 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ek-art-composer-inner:focus-within {
  border-color: rgba(0, 229, 160, 0.65);
  border-left-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.22);
}
.ek-art-composer-input {
  flex: 1;
  background: transparent;
  border: 0;
  /* Bottom padding leaves room for the absolutely-positioned send
     button (40 px tall + 8 px gap). */
  padding: 14px 18px 56px 16px;
  color: var(--ek-text);
  font-size: 15px;
  font-family: inherit;
  resize: none;
  /* 8 rows: 8 × (15 × 1.5 = 22.5) ≈ 180 px text + 14 + 56 padding. */
  min-height: 250px;
  max-height: 420px;
  line-height: 1.5;
  outline: none;
}
.ek-art-composer-input::placeholder {
  color: var(--ek-text);
  opacity: 0.55;
}
/* Flash the freshly-inserted chip text in the accent colour so the user
   sees that the click actually populated the composer (otherwise the
   silent value swap reads as a no-op). */
@keyframes ek-art-input-flash {
  0% {
    color: var(--ek-accent);
    background-color: var(--ek-accent-soft);
  }
  100% {
    color: var(--ek-text);
    background-color: transparent;
  }
}
.ek-art-composer-input.ek-flash-insert {
  animation: ek-art-input-flash 2s ease-out;
}
/* Transient "Можно уточнить и отправить" hint, shown for a few seconds
   after a chip click so the user understands that inserting (not
   sending) the chip text is intentional. Sits at the bottom-left of the
   composer (the same dead zone the send button occupies on the right);
   pointer-events:none so clicks fall through to the textarea below.
   Resting style is plain white text on transparent background — the
   accent colour only flashes through on appear (see .ek-hint-flash). */
.ek-art-composer-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ek-text);
  background: transparent;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  /* Hide direction (class removed → back to base): slow 2s fade-out so
     the hint lingers and is easy to read on its way out. `linear` (not
     `ease`) so opacity drops uniformly — `ease` dumps ~80% of the fade
     in the first second and undermines the lingering feel. */
  transition:
    opacity 2s linear,
    transform 2s linear;
}
.ek-art-composer-hint::before {
  content: "✎";
  font-size: 13px;
  line-height: 1;
}
.ek-art-composer-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* Show direction (class added): snappy 0.5s fade-in so the hint
     reads as a deliberate response to the chip click. */
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
/* Reuse the textarea's `ek-art-input-flash` keyframe so the hint pulses
   accent → white in exact sync with the chip text inside the textarea
   — one coordinated gesture, not two independent animations. */
.ek-art-composer-hint.ek-hint-flash {
  animation: ek-art-input-flash 2s ease-out;
}
.ek-art-composer-send {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-accent);
  border: 0;
  border-radius: 10px;
  color: #0a0a0c;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s ease;
}
.ek-art-composer-send:hover {
  background: var(--ek-accent);
  transform: translateY(-1px);
}
.ek-art-composer-send svg {
  width: 18px;
  height: 18px;
}

/* Disable composer + options while a generation is in flight (mirrors
   the existing body.ek-generating gating used by other AI buttons). */
body.ek-generating .ek-art-option,
body.ek-generating .ek-art-composer-send {
  pointer-events: none;
  opacity: 0.5;
}

/* Highlight currently focused canvas element so the user sees which
   element produced the chat context. Soft halo, no shift. */
.design-canvas [data-ek-art-focus="1"] {
  outline: 1px dashed rgba(0, 229, 160, 0.7);
  outline-offset: 2px;
}

/* AI section (top) */
.ek-ai-section {
  padding: 14px;
  border-bottom: 1px solid var(--ek-border);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025),
    transparent
  );
}

.ek-ai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ek-accent);
  margin-bottom: 10px;
}

.ek-ai-input-wrap {
  position: relative;
}

.ek-ai-prompt {
  width: 100%;
  height: 76px;
  padding: 10px 36px 10px 12px;
  background: var(--ek-bg-page);
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  color: var(--ek-text);
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ek-ai-prompt::placeholder {
  color: var(--ek-text-dim);
}

.ek-ai-prompt:focus {
  outline: none;
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 1px rgba(0, 173, 192, 0.4);
}

.ek-ai-send {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-accent-soft);
  border: 0;
  border-radius: 6px;
  color: var(--ek-accent);
  cursor: pointer;
  transition: background 0.15s;
}

.ek-ai-send:hover {
  background: rgba(0, 173, 192, 0.32);
}

/* ── Collapsible blocks (Генетические вариации + Настройки) ─────────
   Replaces the previous tabs UI. Each block is a native <details>
   element so the disclosure state is controlled by CSS / a single
   `.open` attribute — editork.js flips it based on canvas selection
   (see syncRightPanel). The chevron rotates via the `[open]` selector. */
.ek-right-panel {
  /* Allow the right panel to scroll vertically when both blocks are
     open with a long inspector — the AI prompt section stays pinned
     at the top; the blocks below scroll. */
}

.ek-block {
  border-bottom: 1px solid var(--ek-border);
  background: transparent;
}
.ek-block[open] {
  background: rgba(255, 255, 255, 0.015);
}

.ek-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ek-accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ek-block-header::-webkit-details-marker {
  display: none;
}
.ek-block-header:hover .ek-block-title {
  filter: brightness(1.1);
}

.ek-block-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ek-accent);
}
.ek-block-title svg {
  flex-shrink: 0;
  color: var(--ek-accent);
}

.ek-block-chevron {
  font-size: 12px;
  color: var(--ek-text-dim);
  transition: transform 0.2s;
}
.ek-block[open] > .ek-block-header .ek-block-chevron {
  transform: rotate(180deg);
}

.ek-block-body {
  padding: 4px 14px 14px;
}

/* The right panel scrolls as one unit when both blocks together are
   taller than the viewport. */
.ek-right-panel {
  overflow-y: auto;
  overflow-x: hidden;
}

.ek-right-panel.ek-right-panel-collapsed {
  overflow: visible;
}

.ek-style-card {
  padding: 12px;
  background: var(--ek-bg-page);
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  margin-bottom: 8px;
}

.ek-style-card:hover {
  border-color: rgba(0, 173, 192, 0.5);
}

.ek-style-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ek-text);
  margin-bottom: 4px;
  transition: color 0.15s;
}

.ek-style-card:hover .ek-style-card-name {
  color: var(--ek-accent);
}

.ek-style-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ek-text-muted);
}

.ek-style-card {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.ek-style-card-loading {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}

.ek-style-card-loading .ek-style-card-name {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: ek-shimmer 1.4s ease-in-out infinite;
  color: transparent;
  border-radius: 4px;
  height: 14px;
  margin-bottom: 8px;
}

@keyframes ek-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ek-styles-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ek-palette-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--ek-bg-page);
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ek-palette-card:hover {
  border-color: rgba(0, 173, 192, 0.5);
}

.ek-palette-swatches {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.ek-palette-swatches span {
  display: block;
  width: 16px;
  height: 16px;
}

.ek-palette-name {
  font-size: 14px;
  color: var(--ek-text);
}

.ek-styles-hint {
  margin-top: 18px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ek-text-dim);
  text-align: center;
}

/* ── AI variants dock (floating below canvas after generation) ──────── */

.ek-variants-dock {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 20px;
  width: min(72vw, 760px);
  max-width: 760px;
  background: rgba(26, 26, 31, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ek-border-strong);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  /* Beats Moveable's control-box (z-index 10000) so the floating
     variants dock at the bottom of the canvas stays clickable when a
     large selection's frame extends over it. */
  z-index: 10001;
  /* Only `bottom` + `transform` animate between expanded (centered)
     and post-generation (bottom) states. Size stays the same so the
     iframe previews don't reflow during the slide-down transition. */
  transition:
    bottom 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ek-variants-dock[hidden] {
  display: none;
}

.ek-variants-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-right: 0;
}

.ek-variants-status-tag {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ek-accent);
}

.ek-variants-status-sub {
  font-size: 14px;
  color: var(--ek-text-muted);
}

.ek-variants-thumbs {
  display: flex;
  gap: 16px;
  justify-content: center;
  border-right: 0;
  padding-right: 0;
}

.ek-variants-thumb {
  position: relative;
  width: clamp(220px, 30vw, 320px);
  height: clamp(150px, 22vw, 220px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ek-border-strong);
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.85;
  overflow: hidden;
  transition:
    opacity 0.15s,
    border-color 0.15s;
}

.ek-variants-thumb:hover {
  opacity: 1;
}

.ek-variants-thumb-active {
  opacity: 1;
  border: 2px solid var(--ek-accent);
  box-shadow: 0 0 12px rgba(0, 173, 192, 0.35);
}

/* The "Исходник" thumb stays hidden in both states. The user can
   always cancel via the "Отменить" button to revert to the original. */
.ek-variants-thumb-original {
  display: none;
}

.ek-variants-thumb-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(0, 173, 192, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: ek-shimmer 1.2s ease-in-out infinite;
}

.ek-variants-thumb-error {
  background: rgba(255, 90, 90, 0.18);
  border-color: rgba(255, 90, 90, 0.5);
  color: rgba(255, 200, 200, 0.85);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ek-variants-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.ek-variants-cancel,
.ek-variants-ok {
  height: 32px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ek-variants-cancel {
  background: transparent;
  color: var(--ek-text-muted);
}

.ek-variants-cancel:hover {
  color: var(--ek-text);
  background: rgba(255, 255, 255, 0.05);
}

.ek-variants-ok {
  background: var(--ek-accent);
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(0, 173, 192, 0.25);
}

.ek-variants-ok:hover {
  background: #1ad3e6;
}

.ek-variants-cancel:disabled,
.ek-variants-ok:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Expanded dock (during generation) ───────────────────────────────
   While generation is in progress we float the dock centered over the
   canvas. The dock keeps the SAME size in both states so the iframe
   previews don't reflow during the slide-down — only `bottom` and
   `transform` animate. */
.ek-variants-dock.ek-expanded {
  bottom: 50%;
  transform: translate(-50%, 50%);
}

/* Suppress the shimmer ::after on loading thumbs while the overlay
   preloader (rings + icon) is rendered — they would otherwise fight
   for the same visual layer. */
.ek-variants-thumb-loading .ek-generating-overlay + ::after,
.ek-variants-thumb-loading:has(.ek-generating-overlay)::after {
  display: none;
}

/* The .ek-generating-overlay markup lives inside every loading thumb
   (injected by editork.js). Visible whenever the thumb is in loading
   state — both during expanded centered mode and any subsequent
   loading state. */
.ek-variants-thumb-loading .ek-generating-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(20, 30, 40, 0.95),
    rgba(9, 9, 11, 0.98)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  border-radius: inherit;
}

.ek-generation-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.ek-generation-status-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 40px + 24px);
  transform: translateX(-50%);
  z-index: 11;
  max-width: 84%;
  min-height: 1.35em;
  margin-top: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.42);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ek-generation-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.ek-generation-ring.ek-ring-1 {
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-top-color: var(--ek-accent);
  box-shadow: 0 0 15px rgba(0, 173, 192, 0.4);
  animation: ek-spin 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  opacity: 0.9;
}

.ek-generation-ring.ek-ring-2 {
  width: 70%;
  height: 70%;
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: ek-spin 2.6s linear infinite reverse;
  opacity: 0.7;
}

.ek-generation-ring.ek-ring-3 {
  width: 140%;
  height: 140%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: ek-spin 11s linear infinite;
  z-index: -1;
}

.ek-generation-icon {
  font-size: 26px;
  color: var(--ek-accent);
  filter: drop-shadow(0 0 10px var(--ek-accent));
  animation: ek-iconpulse 2s ease-in-out infinite;
  line-height: 1;
}

@keyframes ek-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ek-iconpulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

/* ── Iframe preview inside a ready thumb ─────────────────────────────
   editork.js mounts an iframe with sandbox="allow-same-origin" and
   the sanitised design HTML. mountPreviewIframe sets the inline
   transform after the iframe loads to scale .design-canvas to fit. */
.ek-thumb-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  border-radius: inherit;
}

.ek-thumb-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 2400px;
  height: 1800px;
  border: 0;
  pointer-events: none;
  background: #fff;
  transform-origin: 0 0;
  /* Hidden until mountPreviewIframe measures the design canvas and
     applies an inline transform. Then opacity transitions in. */
  transform: scale(0.0001);
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* ── Lock-out overlay for other generation triggers ─────────────────
   While `body.ek-generating` is set, the right-panel buttons that
   would kick off another generation (Нейро-ассистент send button,
   genetic-variation cards) are visually muted and ignore clicks.
   Cancel + thumb clicks on the dock itself remain interactive — they
   live inside .ek-variants-dock which we never disable. */
body.ek-generating .ek-style-card,
body.ek-generating #ek-ai-send,
body.ek-generating #ek-ai-prompt {
  pointer-events: none;
  opacity: 0.5;
}

body.ek-generating .ek-style-card {
  cursor: default;
}

/* ====================================================================
   4. Editor widget styles (ported from editorh.css, used by editorh.js)
   The class names below match the runtime DOM editorh.js creates and
   populates. Keep them in sync if editorh.js renames anything — we
   don't load editorh.css in editork.html anymore.
   ==================================================================== */

/* ── Common helpers ────────────────────────────────────────────────── */
.mkt-tools-header {
  color: var(--editor-text-secondary) !important;
  font-size: 14px;
}
.mkt-tools_description {
  padding: 5px;
  text-align: left;
}
.mkt-tools_description_item {
  display: grid;
  align-content: center;
  margin-top: 6px;
  margin-bottom: 12px;
  width: 100%;
  height: 41px;
  color: var(--editor-text-secondary) !important;
}
.mkt-disable-selection {
  user-select: none;
}
.mkt-editblock-padding {
  margin-top: 0;
}

/* Right-click context menu (#mkt-maketcontextmenu) — editorh.js uses
   it for delete confirmations. */
#mkt-maketcontextmenu {
  display: none;
  position: absolute;
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  border: 1px solid var(--editor-border);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}
#mkt-maketcontextmenu button {
  width: 100%;
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  border: none;
  margin: 0;
  padding: 10px;
}
#mkt-maketcontextmenu button:hover {
  background: rgba(0, 173, 192, 0.22);
  color: #fff;
}

/* ── editork canvas context menu ─────────────────────────────────── */
.mkt-editork-context-menu {
  position: fixed;
  z-index: 10240;
  min-width: 252px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(24, 26, 32, 0.98);
  color: var(--editor-text-main);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.25);
  user-select: none;
  pointer-events: auto;
}
.mkt-editork-context-menu[hidden] {
  display: none;
}
.mkt-ek-context-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkt-ek-context-item {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--editor-text-main);
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.mkt-ek-context-item:hover,
.mkt-ek-context-item:focus-visible,
.mkt-ek-context-item.is-active {
  background: rgba(0, 173, 192, 0.18);
  color: #fff;
  outline: none;
}
.mkt-ek-context-item:disabled {
  color: rgba(232, 236, 243, 0.38);
  cursor: default;
}
.mkt-ek-context-item:disabled:hover {
  background: transparent;
}
.mkt-ek-context-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.92;
}
.mkt-ek-context-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.mkt-ek-context-item:disabled .mkt-ek-context-icon {
  opacity: 0.45;
}
.mkt-ek-context-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkt-ek-context-arrow {
  justify-self: end;
  color: var(--editor-text-muted);
  font-size: 20px;
  line-height: 1;
}
.mkt-ek-context-separator {
  height: 1px;
  margin: 5px 4px;
  background: rgba(255, 255, 255, 0.11);
}
.mkt-ek-context-label {
  padding: 6px 9px 3px;
  color: var(--editor-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mkt-ek-context-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  display: none;
  min-width: 232px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(24, 26, 32, 0.98);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.25);
}
.mkt-ek-context-submenu.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkt-editork-ai-rewrite-popover {
  position: fixed;
  z-index: 10245;
  width: min(286px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(24, 26, 32, 0.98);
  color: var(--editor-text-main);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.25);
}
.mkt-editork-ai-rewrite-popover[hidden] {
  display: none;
}
.mkt-ek-ai-rewrite-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.mkt-ek-ai-rewrite-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mkt-ek-ai-rewrite-chips button,
.mkt-ek-ai-rewrite-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--editor-text-main);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.mkt-ek-ai-rewrite-chips button {
  padding: 6px 9px;
}
.mkt-ek-ai-rewrite-chips button:hover,
.mkt-ek-ai-rewrite-actions button:hover {
  border-color: var(--ek-accent);
  background: rgba(0, 173, 192, 0.18);
  color: #fff;
}
.mkt-ek-ai-rewrite-input {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--editor-text-main);
  font-size: 13px;
  line-height: 1.35;
}
.mkt-ek-ai-rewrite-input:focus {
  border-color: var(--ek-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.18);
}
.mkt-ek-ai-rewrite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.mkt-ek-ai-rewrite-actions button {
  padding: 6px 10px;
}
.mkt-ek-ai-rewrite-actions button[data-action="submit"] {
  border-color: rgba(0, 173, 192, 0.5);
  background: rgba(0, 173, 192, 0.2);
  color: #fff;
}

/* Loading overlay shown by editorh.js during PDF/JPG export, and
   reused by the Art-Director pipeline (vibe cards + chat) — anything
   that flips body.ek-generating gets the same full-screen spinner
   automatically (see the body.ek-generating rule below). */
#mkt-waiting svg {
  position: absolute;
  width: 150px;
  height: 150px;
  pointer-events: none;
  left: calc(50% - 74px);
  top: calc(50% - 32px);
  z-index: 10001;
}
.mkt-backdrop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: opacity 0.267s ease 0s;
  z-index: 10000;
}

#mkt-hirezpreloadercontainer.mkt-operation-loader,
#mkt-spinner.ek-spinner.mkt-operation-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ekFlFadeIn 0.25s ease-out;
}

.mkt-operation-loader-card {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(460px, 100%);
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.03)
    ),
    rgba(18, 18, 24, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

#mkt-hirezpreloadercontainer.mkt-operation-loader #mkt-hirezpreloader,
#mkt-spinner.ek-spinner.mkt-operation-loader #mkt-hirezpreloader {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent2-color, #00d8a3);
  box-shadow: 0 0 28px rgba(0, 216, 163, 0.28);
  animation: ekFlSpin 1.1s linear infinite;
}

#mkt-hirezpreloadercontainer.mkt-operation-loader #mkt-hirezpreloader::before,
#mkt-hirezpreloadercontainer.mkt-operation-loader #mkt-hirezpreloader::after,
#mkt-spinner.ek-spinner.mkt-operation-loader #mkt-hirezpreloader::before,
#mkt-spinner.ek-spinner.mkt-operation-loader #mkt-hirezpreloader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

#mkt-hirezpreloadercontainer.mkt-operation-loader #mkt-hirezpreloader::before,
#mkt-spinner.ek-spinner.mkt-operation-loader #mkt-hirezpreloader::before {
  inset: 9px;
  border-right-color: rgba(255, 255, 255, 0.72);
  animation: ekFlSpin 1.8s linear infinite reverse;
}

#mkt-hirezpreloadercontainer.mkt-operation-loader #mkt-hirezpreloader::after,
#mkt-spinner.ek-spinner.mkt-operation-loader #mkt-hirezpreloader::after {
  inset: 20px;
  background: radial-gradient(
    circle,
    var(--accent2-color, #00d8a3),
    transparent 68%
  );
  opacity: 0.75;
}

.mkt-operation-loader-copy {
  min-width: 0;
}

.mkt-operation-loader-title {
  color: var(--ek-text-main, #f6f7fb);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.mkt-operation-loader-text {
  margin-top: 7px;
  color: var(--ek-text-muted, rgba(246, 247, 251, 0.68));
  font-size: 14px;
  line-height: 1.45;
}

.mkt-operation-loader-progress {
  margin-top: 14px;
}

.mkt-operation-loader-progress-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mkt-operation-loader-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00d8a3, #39f5ff);
  box-shadow: 0 0 18px rgba(0, 216, 163, 0.35);
  transition: width 0.18s ease-out;
}

.mkt-operation-loader-progress-text {
  margin-top: 7px;
  color: var(--ek-text-muted, rgba(246, 247, 251, 0.68));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Fullscreen generation loader ──────────────────────────────────
   Ported from src/index.tsx / src/index.css (`.fullscreen-loader`) so
   the visual language of editork matches the React landing page when
   an LLM generation is in flight (vibe card apply, chat apply, etc.).
   The stepped progress UI ("картинки и маски") of the initial
   3-design generation is intentionally omitted — for a single design
   round-trip we just need a polished "we're working" indicator.
   Toggled via `body.ek-generating` — no JS show/hide needed. */
.ek-fullscreen-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(9, 9, 11, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
}
body.ek-generating .ek-fullscreen-loader {
  display: flex;
  animation: ekFlFadeIn 0.3s ease-out;
}
@keyframes ekFlFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ek-fl-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  animation: ekFlSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ekFlSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ek-fl-spinner {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ek-fl-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.ek-fl-ring-1 {
  width: 100%;
  height: 100%;
  border-top-color: var(--accent2-color);
  border-right-color: var(--accent2-color);
  box-shadow: 0 0 20px rgba(0, 173, 192, 0.5);
  animation: ekFlSpin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ek-fl-ring-2 {
  width: 80%;
  height: 80%;
  border-top-color: rgba(255, 255, 255, 0.6);
  border-left-color: rgba(255, 255, 255, 0.6);
  animation: ekFlSpin 2s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}
.ek-fl-ring-3 {
  width: 140%;
  height: 140%;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  animation: ekFlSpin 8s linear infinite;
}
@keyframes ekFlSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ek-fl-icon {
  color: var(--accent2-color);
  filter: drop-shadow(0 0 15px rgba(0, 173, 192, 0.6));
  animation: ekFlIconPulse 2s ease-in-out infinite;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes ekFlIconPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.ek-fl-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  padding: 0 20px;
}
.ek-fl-text h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(
    110deg,
    #ffffff 30%,
    var(--accent2-color) 50%,
    #ffffff 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ekFlShimmer 3s linear infinite;
}
@keyframes ekFlShimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
.ek-fl-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--editor-text-secondary);
  opacity: 0.8;
  animation: ekFlTextFade 2s ease-in-out infinite;
}
@keyframes ekFlTextFade {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Fake-stage label rendered under the preloader text while the editor
   is waiting on txt2img / img2img calls (which can take 5–20 seconds
   each). The word swaps every 5 s with a cross-fade — see
   startStageRotation / showStageWord in editork.js. The element stays
   `hidden` until the rotator actually kicks in, so non-image edits
   don't show a stale label. */
.ek-fl-stage {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--editor-text-secondary, rgba(255, 255, 255, 0.7));
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  min-height: 1.2em;
}
.ek-fl-stage.is-visible {
  opacity: 0.85;
  transform: translateY(0);
}
.ek-fl-stage[hidden] {
  display: none;
}

/* ── Bootstrap widget skin overrides for the dark theme ─────────────── */
body.ek-body .btn-light-2,
body.ek-body .modal-content,
body.ek-body .form-control,
body.ek-body #mkt-comment_area,
body.ek-body .pickr .pcr-button {
  color: var(--editor-text-main) !important;
  background: var(--editor-bg-surface-strong) !important;
  border-color: var(--editor-border) !important;
}
body.ek-body .form-control::placeholder {
  color: var(--editor-text-secondary) !important;
}
body.ek-body #mkt-comment_area,
body.ek-body .form-control {
  box-shadow: none !important;
}
body.ek-body #mkt-comment_area:focus,
body.ek-body .form-control:focus {
  border-color: var(--ek-accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2) !important;
}
.pickr .pcr-button {
  border: 1px solid rgb(216, 216, 216);
  width: 53px !important;
}

/* Custom Bootstrap tooltip skin (editorh.js sets data-bs-custom-class). */
.mkt-custom-tooltip.tooltip > .tooltip-inner {
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}
.mkt-custom-tooltip.tooltip > .tooltip-arrow {
  margin-top: 10px;
}
.mkt-custom-tooltip.bs-tooltip-bottom > .tooltip-arrow::before,
.mkt-custom-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"]
  > .tooltip-arrow::before {
  border-bottom-color: var(--editor-bg-surface-strong) !important;
}

/* Save / JPG / PDF icon recolouring for dark theme. The icons ship as
   monochrome SVGs designed for a light background. */
.mkt-tools_add_icon,
.mkt-tools_save_icon,
.mkt-tools_undo_icon {
  opacity: 1 !important;
  filter: brightness(0) invert(0.9) contrast(1.1) !important;
}

/* Font family selector kept on a light background so font names remain
   readable. */
#mkt-font_family_selector2_label,
#mkt-font_family_selector2 {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #cfd3da !important;
}
#mkt-font_family_selector2 .dropdown-item {
  color: #111111 !important;
  background: #ffffff !important;
}
#mkt-font_family_selector2 .dropdown-item:hover,
#mkt-font_family_selector2 .dropdown-item:focus {
  background: #eef2f7 !important;
  color: #111111 !important;
}

/* Font size + stroke width dropdowns: force a min width so a single
   digit doesn't collapse the menu to nothing. */
#mkt-font_size_selector,
#mkt-font_stroke_selector {
  min-width: 67px;
}

/* ── Floating selection toolbar (editorh.js creates it at runtime) ─── */
.mkt-selection-toolbar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 28px;
  border: 1px solid #dddde2;
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  user-select: none;
  /* Must beat .moveable-control-box (z-index: 10000). */
  z-index: 10100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.mkt-selection-toolbar.is-visible {
  display: inline-flex;
}
.mkt-selection-toolbar-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--editor-text-main);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.mkt-selection-toolbar-btn:hover {
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2);
}
.mkt-selection-toolbar-btn svg {
  display: block;
  width: 22px;
  height: 22px;
}
.mkt-selection-toolbar-btn[aria-label="Дублировать"] svg,
.mkt-selection-toolbar-btn[aria-label="Удалить"] svg {
  width: 18px;
  height: 18px;
}
.mkt-selection-toolbar-text-edit-btn,
.mkt-selection-toolbar-text-edit-divider {
  display: none;
}
.mkt-selection-toolbar.has-text-selection .mkt-selection-toolbar-text-edit-btn,
.mkt-selection-toolbar.has-text-selection
  .mkt-selection-toolbar-text-edit-divider {
  display: inline-flex;
}
.mkt-selection-toolbar-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 22, 28, 0.95);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--editor-border-soft);
  white-space: normal;
  width: max-content;
  max-width: 170px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 10101;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mkt-selection-toolbar-btn[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}
.mkt-selection-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--editor-border);
  margin: 0 2px;
}
.mkt-selection-toolbar-layers-group {
  position: relative;
  display: inline-flex;
}
.mkt-selection-toolbar-submenu-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
  display: none;
  z-index: 10101;
  pointer-events: auto;
}
.mkt-selection-toolbar-submenu-wrap.is-fixed-positioned {
  position: fixed;
  top: var(--mkt-layers-submenu-top, 0px);
  left: var(--mkt-layers-submenu-left, 0px);
  transform: none;
  padding-top: 0;
  padding-bottom: 0;
}
.mkt-selection-toolbar-submenu-wrap.is-fixed-positioned[data-placement="below"] {
  padding-top: 10px;
}
.mkt-selection-toolbar-submenu-wrap.is-fixed-positioned[data-placement="above"] {
  padding-bottom: 10px;
}
.mkt-selection-toolbar-layers-group:hover .mkt-selection-toolbar-submenu-wrap,
.mkt-selection-toolbar.layers-submenu-open .mkt-selection-toolbar-submenu-wrap {
  display: block;
}
.mkt-selection-toolbar-submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--editor-border);
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.mkt-selection-toolbar-submenu-title {
  padding: 0 4px;
  color: var(--editor-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
.mkt-selection-toolbar-submenu-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mkt-selection-toolbar-layers-group:hover
  .mkt-selection-toolbar-btn[data-action="layersMenu"],
.mkt-selection-toolbar.layers-submenu-open
  .mkt-selection-toolbar-btn[data-action="layersMenu"] {
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2);
}
.mkt-selection-toolbar-layers-group:hover
  .mkt-selection-toolbar-btn[data-action="layersMenu"][data-tooltip]::after,
.mkt-selection-toolbar.layers-submenu-open
  .mkt-selection-toolbar-btn[data-action="layersMenu"][data-tooltip]::after {
  opacity: 0;
  visibility: hidden;
}

.mkt-mobile-text-edit-sheet {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--ek-mobile-tabbar-h, 58px) + 10px);
  z-index: 10200;
  display: none;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--ek-border-strong);
  border-radius: 16px;
  background: rgba(18, 18, 24, 0.97);
  color: var(--editor-text-main);
  box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mkt-mobile-text-edit-sheet.is-visible {
  display: flex;
}

.mkt-mobile-text-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mkt-mobile-text-edit-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--editor-text-main);
}

.mkt-mobile-text-edit-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--editor-text-main);
  font-size: 22px;
  line-height: 1;
}

.mkt-mobile-text-edit-input {
  width: 100%;
  min-height: 74px;
  max-height: min(28dvh, 180px);
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.35;
}

.mkt-mobile-text-edit-input:focus {
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.22);
}

.mkt-mobile-text-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mkt-mobile-text-edit-btn {
  height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--editor-text-main);
  font-size: 13px;
  font-weight: 800;
}

.mkt-mobile-text-edit-apply {
  border-color: rgba(0, 229, 160, 0.55);
  background: linear-gradient(180deg, #00e5a0, #00adc0);
  color: #061412;
}

/* ── Canvas zoom controls + hotkeys popover (in the top header) ─────── */
.mkt-editor-canvas-zoom-controls {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  user-select: none;
}
.mkt-editor-canvas-hotkeys-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mkt-editor-canvas-hotkeys-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mkt-editor-canvas-hotkeys-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--editor-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--editor-text-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.mkt-editor-canvas-hotkeys-toggle:hover,
.mkt-editor-canvas-hotkeys-toggle:focus-visible,
.mkt-editor-canvas-hotkeys-trigger.mkt-hotkeys-open
  .mkt-editor-canvas-hotkeys-toggle {
  border-color: var(--ek-accent);
  background: rgba(0, 173, 192, 0.15);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2);
  outline: none;
}
.mkt-editor-canvas-zoom-controls .mkt-editor-canvas-history-btn {
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--editor-text-main);
  line-height: 1;
  margin-left: 3px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.mkt-editor-canvas-zoom-controls
  .mkt-editor-canvas-history-btn
  .mkt-tools_undo_icon {
  width: 20px;
  height: 20px;
  margin-bottom: 0;
}
.mkt-editor-canvas-zoom-label {
  position: relative;
  font-size: 14px;
  color: var(--editor-text-secondary);
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 23px;
}
.mkt-editor-canvas-zoom-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--editor-border);
}
.mkt-editor-canvas-zoom-value {
  min-width: 54px;
  text-align: center;
  font-weight: 600;
  color: var(--editor-text-main);
}
.mkt-editor-canvas-zoom-btn,
.mkt-editor-canvas-zoom-fit,
.mkt-editor-canvas-zoom-reset {
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--editor-text-main);
  height: 30px;
  line-height: 1;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.mkt-editor-canvas-zoom-btn {
  width: 30px;
  font-size: 20px;
}
.mkt-editor-canvas-zoom-reset,
.mkt-editor-canvas-zoom-fit {
  padding: 0 10px;
  font-size: 14px;
}
.mkt-editor-canvas-zoom-fit {
  font-weight: 600;
}
.mkt-editor-canvas-zoom-btn:hover,
.mkt-editor-canvas-zoom-fit:hover,
.mkt-editor-canvas-zoom-reset:hover {
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2);
}
.mkt-editor-canvas-hotkeys-tooltip {
  position: fixed;
  left: 50vw;
  top: calc(var(--ek-header-h) + 8px);
  transform: translateX(-50%) translateY(-6px);
  min-width: 340px;
  max-width: 460px;
  max-height: calc(100dvh - var(--ek-header-h) - 20px);
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--editor-border);
  background: var(--editor-bg-surface-strong);
  color: #e9edf8;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10260;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}
.mkt-editor-canvas-hotkeys-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--editor-bg-surface-strong);
  border-left: 1px solid var(--editor-border);
  border-top: 1px solid var(--editor-border);
  transform: translateX(-50%) rotate(45deg);
}
.mkt-editor-canvas-hotkeys-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ek-accent);
}
.mkt-editor-canvas-hotkeys-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 16px;
}
.mkt-editor-canvas-hotkeys-row:last-child {
  margin-bottom: 0;
}
.mkt-editor-canvas-hotkeys-func {
  color: #c9d4eb;
}
.mkt-editor-canvas-hotkeys-keys {
  text-align: right;
  color: #ffffff;
  white-space: nowrap;
}
.mkt-editor-canvas-hotkeys-keys kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  margin: 0 1px;
  border-radius: 6px;
  border: 1px solid var(--editor-border-soft);
  background: var(--editor-border-soft);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}
.mkt-editor-canvas-hotkeys-trigger:hover .mkt-editor-canvas-hotkeys-tooltip,
.mkt-editor-canvas-hotkeys-trigger:focus-within
  .mkt-editor-canvas-hotkeys-tooltip,
.mkt-editor-canvas-hotkeys-trigger.mkt-hotkeys-open
  .mkt-editor-canvas-hotkeys-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body.canvas-pan-mode .mkt-editor-canvas-viewport {
  cursor: grab;
}
body.canvas-pan-active .mkt-editor-canvas-viewport {
  cursor: grabbing;
  user-select: none;
}

/* ── Moveable.js overrides (drag/resize/rotate handles) ─────────────── */
.moveable-control-box {
  z-index: 10000 !important;
}
.moveable-line {
  background: #0d6efd !important;
}
.moveable-control {
  background: #fff !important;
  border: var(--ek-moveable-handle-border) solid #0d6efd !important;
  border-radius: 2px !important;
  width: var(--ek-moveable-handle-size) !important;
  height: var(--ek-moveable-handle-size) !important;
  margin-left: calc(var(--ek-moveable-handle-size) / -2) !important;
  margin-top: calc(var(--ek-moveable-handle-size) / -2) !important;
}
.moveable-rotation .moveable-control {
  border-radius: 50% !important;
}
.moveable-rotation-line {
  background: #0d6efd !important;
}
.moveable-guideline {
  background: #f06 !important;
}
.moveable-dashed {
  border-top: 1px dashed #f06 !important;
}
.moveable-gap {
  background: rgba(255, 0, 102, 0.15) !important;
}
.mkt-text-width-handle {
  position: fixed;
  left: 0;
  top: 0;
  --mkt-text-width-handle-scale: 1;
  width: var(--ek-moveable-text-width-handle-size);
  height: var(--ek-moveable-text-width-handle-size);
  margin: 0;
  transform: translate(-50%, -50%) scale(var(--mkt-text-width-handle-scale));
  transform-origin: center;
  background: transparent;
  cursor: ew-resize;
  z-index: 10002;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.mkt-text-width-handle svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ek-moveable-text-width-handle-size);
  height: calc(var(--ek-moveable-text-width-handle-size) * 1.3);
  transform: translate(-50%, -50%);
  background: #fff;
  border: var(--ek-moveable-handle-border) solid #0d6efd;
  padding: 1px;
}
.mkt-text-width-handle svg line,
.mkt-text-width-handle svg polyline {
  fill: none;
  stroke: #0d6efd;
  stroke-width: 7;
  stroke-miterlimit: 10;
  stroke-linejoin: bevel;
}
.mkt-text-width-handle.dragging svg {
  background: #e6fbff;
  border-color: #00adc0;
}
.mkt-text-width-handle.dragging svg line,
.mkt-text-width-handle.dragging svg polyline {
  stroke: #00adc0;
}

@media (pointer: coarse) {
  :root {
    --ek-moveable-handle-size: var(--ek-moveable-handle-size-coarse);
    --ek-moveable-handle-border: var(--ek-moveable-handle-border-coarse);
    --ek-moveable-text-width-handle-size: var(
      --ek-moveable-text-width-handle-size-coarse
    );
  }
}

/* Marquee selection box (drag-rectangle on the canvas). */
.mkt-marquee-box {
  position: fixed;
  border: 1px solid #0d6efd;
  background: rgba(13, 110, 253, 0.12);
  pointer-events: none;
  z-index: 999999;
}
.mkt-hover-highlight {
  outline: none !important;
}
.mkt-hover-highlight-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  overflow: visible;
}
.mkt-hover-highlight-overlay polygon {
  fill: none;
  stroke: rgba(74, 158, 255, 0.7);
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
body.ek-canvas-moving .mkt-hover-highlight-overlay {
  display: none !important;
}

/* Layer-exploder visual layers (editorh.js wraps groups for shadow/bg). */
.design-canvas .layer-wrapper {
  position: relative;
}
.design-canvas .layer-shadow,
.design-canvas .layer-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.export-mode #mkt-selection-overlay {
  display: none !important;
}
.export-mode .draggable-item,
.export-mode .draggable-item:hover {
  outline: none !important;
  cursor: default !important;
}

/* Eyedropper button injected by editorh.js into Pickr's interaction row. */
.pcr-app .pcr-interaction .mkt-eyedropper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 9px 4px 0 0;
  padding: 0;
  background: rgba(0, 173, 192, 0.1);
  border: 1px solid #0d6efd !important;
  border-radius: 3px;
  color: #0d6efd;
  cursor: crosshair;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}
.pcr-app .pcr-interaction .mkt-eyedropper-btn:hover {
  background: rgba(0, 173, 192, 0.2);
  border-color: #00adc0;
}
.pcr-app .pcr-interaction .mkt-eyedropper-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ── Universal property block (collapsible sections in inspector) ───── */
#mkt-editblock_universal {
  margin-top: 12px;
  padding-right: 4px;
}
.mkt-section {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    0.05turn,
    rgba(139, 139, 139, 0),
    rgb(113, 111, 111),
    rgba(0, 0, 0, 0)
  );
  border-image-slice: 1;
  width: 100%;
}
.mkt-section[open] {
  padding-bottom: 10px;
}
.mkt-section-summary {
  list-style: none;
  cursor: pointer;
  padding: 2px 18px 5px 18px;
  font-size: 14px;
  color: var(--editor-text-secondary);
  font-weight: 600;
  position: relative;
  user-select: none;
}
.mkt-section-summary::-webkit-details-marker {
  display: none;
}
.mkt-section-summary::before {
  content: "▸";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 21px;
  color: var(--editor-text-secondary);
  transition: transform 0.4s;
}
.mkt-section[open] > .mkt-section-summary::before {
  transform: translateY(-50%) rotate(90deg);
}
.mkt-section[open] > .mkt-section-summary {
  color: var(--ek-accent);
}
.mkt-section-summary:hover {
  color: var(--editor-text-main);
}
.mkt-section-body {
  padding: 10px 4px 10px 18px;
}

/* Property rows used inside .mkt-section-body. */
.mkt-prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 28px;
}
.mkt-prop-row:first-child {
  margin-top: 4px;
}
.mkt-prop-label {
  flex: 0 0 64px;
  font-size: 14px;
  color: #999;
  text-align: right;
}
.mkt-prop-control {
  flex: 1;
  display: flex;
  align-items: center;
}
.mkt-prop-number,
.mkt-prop-select {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 2px 6px;
  font-size: 14px;
  border: 1px solid var(--editor-border);
  border-radius: 4px;
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
}
.mkt-prop-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bdf5fb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 7px;
}
.mkt-prop-select:hover {
  border-color: var(--ek-accent);
}
.mkt-prop-select:focus {
  outline: none;
  border-color: var(--ek-accent);
  box-shadow: 0 0 0 2px rgba(0, 173, 192, 0.2);
}
.mkt-prop-select option {
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
  height: 29px;
  line-height: 29px;
  min-height: 29px;
  padding: 6px 8px;
}
.mkt-prop-number {
  max-width: 70px;
}
.mkt-prop-num-label {
  min-width: 28px;
  text-align: right;
  font-size: 14px;
  color: #999;
}

/* Custom dropdown widget that replaces native <select.mkt-prop-select>
   at runtime (convertNativeSelects in editorh.js). */
.mkt-prop-dropdown {
  flex: 1;
  min-width: 0;
  position: relative;
}
.mkt-prop-dropdown-btn {
  width: 100%;
  height: 38px;
  font-size: 14px !important;
  text-align: right !important;
  border: none !important;
  background-color: transparent !important;
}
.mkt-prop-dropdown-menu {
  width: 133px !important;
  min-width: 133px !important;
  max-width: 133px !important;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 14px;
  padding: 4px 0;
}
.mkt-prop-dropdown-menu .dropdown-item {
  padding: 6px 12px;
  min-height: 29px;
  font-size: 14px;
}
.mkt-border-style-dropdown .mkt-prop-dropdown-btn,
.mkt-border-style-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-border-style-dropdown .mkt-prop-dropdown-btn {
  padding-right: 24px !important;
}
.mkt-border-style-menu {
  min-width: 126px !important;
  width: 126px !important;
  max-width: 126px !important;
}
.mkt-border-style-preview {
  display: block;
  width: 76px;
  height: 0;
  border-top: 3px solid currentColor;
  color: var(--ek-text);
}
.mkt-border-style-preview[data-style="dashed"] {
  border-top-style: dashed;
}
.mkt-border-style-preview[data-style="dotted"] {
  border-top-style: dotted;
  border-top-width: 4px;
}
.mkt-border-style-preview[data-style="double"] {
  border-top-style: double;
  border-top-width: 6px;
}
.mkt-border-mode-row {
  margin-bottom: 8px;
}
.mkt-border-unified-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ek-text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.mkt-border-unified-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--ek-accent);
}
.mkt-border-side-panel {
  margin: 0 0 10px;
}
.mkt-border-side-panel.is-hidden {
  display: none !important;
}
.mkt-border-side-title {
  margin: 0 0 6px;
  color: var(--ek-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mkt-border-side-row {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 6px;
  justify-content: start;
}
.mkt-border-side-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ek-border-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ek-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
}
.mkt-border-side-btn:hover,
.mkt-border-side-btn.is-active {
  border-color: rgba(0, 229, 160, 0.62);
  background: rgba(0, 229, 160, 0.11);
  color: var(--ek-text);
}
.mkt-border-side-icon {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  box-sizing: border-box;
}
.mkt-border-side-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}
.mkt-border-side-icon-top::after,
.mkt-border-side-icon-bottom::after {
  left: 2px;
  right: 2px;
  height: 3px;
}
.mkt-border-side-icon-top::after {
  top: 2px;
}
.mkt-border-side-icon-bottom::after {
  bottom: 2px;
}
.mkt-border-side-icon-left::after,
.mkt-border-side-icon-right::after {
  top: 2px;
  bottom: 2px;
  width: 3px;
}
.mkt-border-side-icon-left::after {
  left: 2px;
}
.mkt-border-side-icon-right::after {
  right: 2px;
}
#mkt-opacity-blend-mode .mkt-prop-dropdown-menu {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  left: auto !important;
  right: 0 !important;
  transform: translate(0, 38px) !important;
}
.mkt-section-body .dropdown-item:hover,
.mkt-section-body .dropdown-item:focus {
  background: rgba(0, 173, 192, 0.22) !important;
  color: #ffffff !important;
}

/* Box-shadow mini-editor: 4 small numeric cells in one row. */
.mkt-shadow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mkt-shadow-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 14px;
  color: #999;
  text-align: center;
}
.mkt-shadow-cell span {
  margin-bottom: 2px;
}
.mkt-shadow-cell input {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  font-size: 14px;
  text-align: center;
  border: 1px solid var(--editor-border);
  border-radius: 4px;
  background: var(--editor-bg-surface-strong);
  color: var(--editor-text-main);
}

/* Pickr inside section: compact one-button layout. */
.mkt-section-body .pickr {
  display: inline-block;
}

/* Two-column color grid for the multi-stop "Цвета" section. */
#mkt-bg-color-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
#mkt-bg-color-list .mkt-prop-row {
  margin-top: 6px;
  min-width: 0;
  gap: 4px;
}
#mkt-bg-color-list .mkt-prop-label {
  flex: 0 0 auto;
  font-size: 14px;
  text-align: left;
}
#mkt-bg-color-list .mkt-prop-control {
  flex: 1 1 0;
  min-width: 0;
}
#mkt-bg-color-list .pickr,
#mkt-bg-color-list .pcr-button {
  max-width: 100%;
}

/* "Add property" / "Remove property" / image-action buttons. */
.mkt-add-prop-btn,
.mkt-remove-prop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding: 0px 12px 3px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--editor-border);
  border-radius: 4px;
  color: var(--editor-text-main);
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.mkt-add-prop-btn {
  margin-top: 4px;
}
.mkt-remove-prop-btn {
  margin-top: 14px;
}
.mkt-add-prop-btn:hover,
.mkt-remove-prop-btn:hover {
  border-color: var(--ek-accent);
}

.mkt-tools_option_button {
  border-left: 1px solid var(--editor-border);
  border-top: 1px solid var(--editor-border);
  border-right: 1px solid var(--editor-border);
  background: var(--editor-bg-surface);
  border-radius: 4px;
  min-width: 170px;
  min-height: 35px;
  color: var(--editor-text-main);
  backdrop-filter: blur(10px);
}
.mkt-tools_option_button-main {
  border-bottom: 2px solid var(--ek-accent);
}
.mkt-tools_option_button-success {
  border-bottom: 2px solid var(--editor-accent-success);
}
.mkt-tools_option_button:hover {
  border-color: var(--ek-accent) !important;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 173, 192, 0.7);
}
#mkt-tools_replaceimage_button {
  border-bottom-color: var(--editor-accent-success) !important;
}

#mkt-section-img-common > .mkt-section-summary,
#mkt-section-img-common #mkt-tools_replaceimage_button {
  display: none !important;
}

/* Image action buttons (Заменить / Убрать фон). */
.mkt-img-action-btn {
  display: flex !important;
  align-items: center;
  position: relative;
  margin-left: auto;
  margin-top: 0 !important;
  margin-bottom: 6px;
  padding-left: 23px;
  padding-right: 5px;
  min-height: 36px;
  border-left: 1px solid transparent !important;
  border-top: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
}
.mkt-img-action-btn[style*="display: none"] {
  display: none !important;
}
.mkt-img-action-icon {
  position: absolute;
  left: 8px;
  flex-shrink: 0;
}
.mkt-img-action-text {
  flex: 1;
  text-align: center;
}

/* Text alignment buttons (.mkt-tools_button). */
.mkt-tools_button {
  border: 1px solid var(--editor-border);
  background: var(--editor-bg-surface);
  border-radius: 4px;
  margin: 5px;
}
.mkt-tools_button:hover {
  border-color: var(--ek-accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.mkt-tools_add_icon {
  width: 41px;
  height: 41px;
  padding: 0;
  pointer-events: none;
}
.mkt-tools_save_icon {
  width: 36px;
  height: 36px;
  padding: 0;
  pointer-events: none;
}
.mkt-tools_undo_icon {
  width: 35px;
  height: 35px;
  padding: 0;
  pointer-events: none;
}
.disable {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Image generation modal (Заменить → создать новое изображение) ─── */
.mkt-imggen-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  flex-direction: column;
  background: var(--editor-bg-main);
  border: 1px solid var(--editor-border-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 3px 11px 40px rgba(0, 170, 235, 0.18);
  width: 1100px;
  height: 850px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1100px), (max-height: 850px) {
  .mkt-imggen-modal {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
  }

  .ek-art-composer-input {
    min-height: 125px;
    max-height: 210px;
    padding: 10px 16px 46px 14px;
  }
}
.mkt-imggen-header {
  padding: 12px 56px 0 20px;
  font-size: 15px;
  font-weight: 600;
  background: var(--editor-bg-main);
  flex-shrink: 0;
  text-align: center;
  color: var(--editor-text-secondary-2);
  letter-spacing: 1px;
}
.mkt-imggen-topbar {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: var(--editor-bg-main);
  align-items: flex-start;
  flex-shrink: 0;
}
.mkt-imggen-input-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.mkt-imggen-upload-btn {
  align-self: flex-start;
  padding: 9px 18px;
  border: 1px solid rgba(0, 229, 160, 0.42);
  border-radius: 10px;
  background: rgba(0, 229, 160, 0.1);
  color: var(--ek-accent);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.mkt-imggen-upload-btn:hover {
  background: rgba(0, 229, 160, 0.16);
  border-color: rgba(0, 229, 160, 0.62);
}
.mkt-imggen-or {
  color: var(--editor-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.78;
}

/* ── Duplex add-side choice modal ─────────────────────────────────── */
.ek-duplex-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 99996;
  background: rgba(0, 0, 0, 0.68);
}

.ek-duplex-choice-overlay[hidden],
.ek-duplex-choice-modal[hidden] {
  display: none;
}

.ek-duplex-choice-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 99997;
  width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  border: 1px solid var(--editor-border-soft);
  border-radius: 14px;
  background: var(--editor-bg-main);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.54);
  overflow: hidden;
}

.ek-duplex-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--editor-border-soft);
}

.ek-duplex-choice-title {
  color: var(--editor-text-main);
  font-size: 15px;
  font-weight: 700;
}

.ek-duplex-choice-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--editor-text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ek-duplex-choice-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--editor-text-main);
  border-color: var(--editor-border-soft);
}

.ek-duplex-choice-actions {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ek-duplex-choice-action {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--editor-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--editor-text-main);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ek-duplex-choice-action:hover {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.42);
  color: #fff;
}

.ek-duplex-choice-action-title {
  font-size: 14px;
  font-weight: 700;
}

.mkt-imggen-prompt {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--editor-border);
  border-radius: 10px;
  background: var(--editor-bg-surface);
  color: var(--editor-text-main);
  font-size: 15px;
  outline: none;
  resize: none;
  line-height: 1.4;
  font-family: inherit;
}
.mkt-imggen-prompt:focus {
  border-color: var(--ek-accent);
}
.mkt-imggen-create-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 10px;
  background: var(--ek-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
  min-height: 86px;
  transition: background 0.15s;
}
.mkt-imggen-create-btn:hover {
  filter: brightness(1.15);
}
.mkt-imggen-create-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.mkt-imggen-close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--editor-text-secondary);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.mkt-imggen-close-btn:hover {
  color: var(--editor-text-main);
}
.mkt-imggen-previews {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
.mkt-imggen-cards {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
  align-items: stretch;
}
.mkt-imggen-card-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.mkt-imggen-card-slot:hover {
  border-color: var(--ek-accent);
}
.mkt-imggen-card-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.mkt-imggen-apply-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s;
  padding: 6px 16px;
  font-size: 14px;
  z-index: 2;
  pointer-events: auto;
}
.mkt-imggen-card-slot:hover .mkt-imggen-apply-btn {
  opacity: 1;
}
.mkt-imggen-single-preview .mkt-imggen-apply-btn {
  position: static;
  transform: none;
  opacity: 1;
  flex-shrink: 0;
  max-width: 230px;
  align-self: center;
}
.mkt-imggen-spinner {
  position: absolute;
  color: var(--editor-text-secondary);
  font-size: 16px;
  z-index: 2;
}
.mkt-imggen-empty-hint {
  position: absolute;
  color: var(--editor-text-secondary-2);
  font-size: 15px;
  letter-spacing: 2px;
  pointer-events: none;
}
.mkt-imggen-history {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: var(--editor-bg-main);
  height: 90px;
  gap: 0;
}
.mkt-imggen-history-list {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 8px 8px 0;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.mkt-imggen-history-list img {
  height: 68px;
  width: auto;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  display: block;
  flex-shrink: 0;
}
.mkt-imggen-history-list img:hover,
.mkt-imggen-history-list img.mkt-imggen-thumb-active {
  border-color: var(--ek-accent);
}
.mkt-imggen-history-empty {
  color: var(--editor-text-secondary-2);
  font-size: 14px;
  white-space: nowrap;
}

/* ====================================================================
   5. Inspector skin overrides for `.ek-right-panel`
   The widget rules above give every .mkt-section a default look. The
   rules below restyle them inside the new dark right panel so the
   accordion fits the Copilot look (cleaner divider, no border-image,
   chevron on the right).
   ==================================================================== */
.ek-right-panel .mkt-section {
  border: 0;
  border-bottom: 1px solid var(--ek-border);
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.ek-right-panel .mkt-section[open] {
  background: rgba(255, 255, 255, 0.015);
}

.ek-right-panel .mkt-section-summary {
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(244, 247, 255, 0.85);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ek-right-panel .mkt-section-summary::-webkit-details-marker {
  display: none;
}

.ek-right-panel .mkt-section-summary::after {
  content: "▾";
  color: var(--ek-text-dim);
  font-size: 14px;
  transition: transform 0.2s;
}

.ek-right-panel .mkt-section[open] > .mkt-section-summary::after {
  transform: rotate(180deg);
}

.ek-right-panel .mkt-section-body {
  padding: 4px 4px 14px;
}

/* Dark Bootstrap dropdown menus inside the right panel and the canvas
   left toolbar (font/size selectors, shape dropdown, etc.). */
body.ek-body .dropdown-menu {
  background: var(--ek-bg-panel-2) !important;
  border: 1px solid var(--ek-border-strong) !important;
  box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.85) !important;
  color: var(--ek-text) !important;
}

body.ek-body .dropdown-item {
  color: var(--ek-text) !important;
}

body.ek-body .dropdown-item:hover {
  background: var(--ek-accent-soft) !important;
  color: #fff !important;
}

/* Pickr nano theme tweaks for compact display in right panel. */
.ek-right-panel .mkt-color-picker .pcr-button,
.ek-right-panel .mkt-color-picker-contur .pcr-button,
.ek-right-panel .mkt-shape_color-picker .pcr-button,
.ek-right-panel .mkt-shape_color-picker-contur .pcr-button,
.ek-right-panel .mkt-shape-grad1-color-picker .pcr-button,
.ek-right-panel .mkt-shape-grad2-color-picker .pcr-button,
.ek-right-panel .mkt-bg-color-picker .pcr-button,
.ek-right-panel .mkt-bg-grad1-color-picker .pcr-button,
.ek-right-panel .mkt-bg-grad2-color-picker .pcr-button,
.ek-right-panel #mkt-text-fill-grad-color-list .pcr-button,
.ek-right-panel .mkt-border-color-picker .pcr-button,
.ek-right-panel .mkt-shadow-color-picker .pcr-button {
  border-radius: 4px;
}

/* The dropdown labels (font/size selectors) ship with hard-coded white
   bg + dark text inline-styles. Override them inside the new panel for
   dark theme consistency. */
.ek-right-panel .btn-light.btn-light-2.dropdown-toggle,
.ek-right-panel .mkt-prop-select,
.ek-right-panel .mkt-prop-number {
  background: var(--ek-bg-page) !important;
  color: var(--ek-text) !important;
  border: 1px solid var(--ek-border-strong) !important;
}

.ek-right-panel .btn-light.btn-light-2.dropdown-toggle:hover,
.ek-right-panel .mkt-prop-select:hover {
  border-color: var(--ek-accent) !important;
}

/* Custom scrollbar for the right panel. */
.ek-right-panel::-webkit-scrollbar,
.ek-right-panel ::-webkit-scrollbar {
  width: 6px;
}

.ek-right-panel::-webkit-scrollbar-track,
.ek-right-panel ::-webkit-scrollbar-track {
  background: transparent;
}

.ek-right-panel::-webkit-scrollbar-thumb,
.ek-right-panel ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.ek-right-panel::-webkit-scrollbar-thumb:hover,
.ek-right-panel ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ── Legacy editorh.html DOM nodes (hidden) ─────────────────────────
   editork.html doesn't include the old #mkt-col_maket_options or
   #mkt-col_tools_panel — these rules are kept defensively in case
   anything injects them at runtime. */
body.ek-body #mkt-col_maket_options,
body.ek-body #mkt-col_tools_panel {
  display: none !important;
}

/* Notes tool is always visible in the left toolbar. */
body.ek-body .ek-left-toolbar .mkt-notes-fab {
  display: inline-flex !important;
}

/* ── Top contextual property pill (Canva-style) ────────────────────────
   Sits at the top-centre of the canvas-area main, 5 px from the top.
   Different from the existing `.mkt-selection-toolbar` (which anchors
   over the selected element and carries layers/duplicate/delete) — this
   one is fixed-position over the canvas and hosts the inspector
   controls (font / size / colour / etc.). Shows only when something is
   selected. */
#ek-props-pill.ek-props-pill {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  /* Above Moveable's .moveable-control-box (z-index: 10000) so the pill
     is never visually clipped by a large selection rectangle. Matches
     the existing .mkt-selection-toolbar (z-index: 10100) — they never
     overlap geometrically (pill is at top-centre of canvas-area, the
     other toolbar tracks the selected element) so equal z is fine. */
  z-index: 10100;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #1a1a1f;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  color: #e6e6ec;
  font-size: 13px;
  pointer-events: auto;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: visible;
}
#ek-props-pill.is-visible {
  display: inline-flex;
}
.ek-props-pill .ek-pp-btn {
  position: relative;
}
.ek-props-pill button.ek-pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #e6e6ec;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.ek-props-pill button.ek-pp-btn:hover,
.ek-props-pill button.ek-pp-btn.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.ek-props-pill .ek-pp-btn.ek-pp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 39px;
  padding: 0;
}
.ek-props-pill .ek-pp-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ek-props-pill .ek-pp-btn.ek-pp-icon-btn svg {
  width: 22px;
  height: 22px;
}
.ek-props-pill .ek-pp-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 10160;
  transform: translateX(-50%);
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(17, 18, 24, 0.98);
  color: #f4f4f6;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.ek-props-pill .ek-pp-btn[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  z-index: 10161;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(17, 18, 24, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.ek-props-pill .ek-pp-btn[data-tooltip]:hover::after,
.ek-props-pill .ek-pp-btn[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}
.ek-props-pill .ek-pp-btn .ek-pp-caret {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  opacity: 0.6;
}
.ek-props-pill .ek-pp-divider {
  width: 1px;
  height: 22px;
  background: #2a2a32;
  flex-shrink: 0;
}
.ek-props-pill .ek-pp-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  vertical-align: middle;
  background: #fff;
}
.ek-props-pill .ek-pp-text-fill-swatch {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* Slot that hosts a Pickr swatch borrowed from the inspector host.
   The Pickr-rendered `.pcr-button` inside is a circular swatch; we
   constrain its size and let the pill's hover background read as a
   "button" wrapper while Pickr remains in charge of the colour
   display and dialog spawn. */
.ek-props-pill .ek-pp-pickr-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
}
.ek-props-pill .ek-pp-pickr-slot .pickr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.ek-props-pill .ek-pp-pickr-slot .pcr-button {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  margin: 0 !important;
}
.ek-props-pill .ek-pp-stroke-slot {
  position: relative;
  color: #e6e6ec;
}
.ek-props-pill .ek-pp-stroke-slot .pickr {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.ek-props-pill .ek-pp-stroke-icon {
  width: 25px;
  height: 25px;
  display: block;
}
.ek-props-pill .ek-pp-stroke-fill {
  fill: rgba(10, 10, 14, 0.94);
}
.ek-props-pill .ek-pp-stroke-square {
  fill: none;
  stroke: var(--ek-pp-stroke-color, currentColor);
  stroke-width: 4.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ek-props-pill .ek-pp-stroke-slash {
  stroke: #ff304f;
  stroke-width: 2.7;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255, 48, 79, 0.35));
}
.ek-props-pill .ek-pp-stroke-empty .ek-pp-stroke-fill {
  fill: rgba(10, 10, 14, 0.94);
}
.ek-props-pill .ek-pp-stroke-empty .ek-pp-stroke-square {
  stroke: #f5f5f7;
  opacity: 1;
}
.ek-props-pill .ek-pp-stroke-empty .ek-pp-stroke-slash {
  opacity: 1;
}
.ek-props-pill .ek-pp-align-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.ek-props-pill .ek-pp-align-group button {
  width: 28px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #b8b8c2;
  cursor: pointer;
}
.ek-props-pill .ek-pp-align-group button.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ek-props-pill .ek-pp-num {
  width: 52px;
  height: 26px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e6e6ec;
  font-size: 13px;
  text-align: center;
}

/* Container for direct controls borrowed from #mkt-props-host. Used so
   we can flex-wrap the borrowed elements (Bootstrap dropdowns / Pickr
   swatches) without each one looking out of place. */
.ek-props-pill .ek-pp-slot {
  display: inline-flex;
  align-items: center;
}

/* Popover anchored under a pill button. Rendered as a direct child of
   <body>; JS sets `left`/`top` after measuring the trigger. Section
   nodes are moved from #mkt-props-host into here on open and returned
   on close — Pickr/Bootstrap state survives because it's the same DOM
   node. */
.ek-props-popover {
  position: fixed;
  /* Sits above the pill (10100) and Moveable's frame (10000) so an open
     popover is never visually clipped by the selection rectangle. */
  z-index: 10110;
  background: #1a1a1f;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 260px;
  max-width: 360px;
  max-height: min(620px, calc(100vh - 96px));
  overflow: auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  color: #e6e6ec;
  display: none;
}
.ek-props-popover:has(.dropdown-menu.show) {
  overflow: visible;
}
.ek-props-popover.is-open {
  display: block;
}
.ek-props-popover.is-direct-dropdown-popover {
  padding: 0;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 24px));
  overflow: hidden;
}
.ek-props-popover.is-direct-dropdown-popover.is-font-size-dropdown {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}
.ek-props-popover.is-align-popover {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 24px);
  padding: 6px;
  overflow: visible;
}
.ek-text-align-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ek-text-align-menu-btn {
  width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #c9c9d2;
  cursor: pointer;
}
.ek-text-align-menu-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.ek-text-align-menu-btn svg {
  width: 22px;
  height: 22px;
}
.ek-text-align-menu-btn:hover,
.ek-text-align-menu-btn.is-active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.ek-props-popover .ek-direct-dropdown-menu {
  position: static !important;
  display: block !important;
  float: none;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  max-height: min(420px, calc(100vh - 150px)) !important;
  margin: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.ek-props-popover.is-font-size-dropdown .ek-direct-dropdown-menu {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  text-align: center;
}
.ek-props-popover .ek-direct-dropdown-menu .dropdown-item {
  background: transparent !important;
  color: var(--ek-text) !important;
}
.ek-props-popover .ek-direct-dropdown-menu .dropdown-item:hover,
.ek-props-popover .ek-direct-dropdown-menu .dropdown-item:focus,
.ek-props-popover .ek-direct-dropdown-menu .dropdown-item:active,
.ek-props-popover .ek-direct-dropdown-menu .dropdown-item.active {
  background: rgba(0, 229, 160, 0.13) !important;
  color: #ffffff !important;
}
.ek-props-popover.is-font-size-dropdown
  .ek-direct-dropdown-menu
  .dropdown-item {
  padding: 6px 0;
  text-align: center;
}
.ek-props-popover .ek-direct-dropdown-menu::-webkit-scrollbar {
  width: 7px;
}
.ek-props-popover .ek-direct-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}
.ek-props-popover .ek-direct-dropdown-menu::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  background-clip: padding-box;
}
.ek-props-popover .ek-direct-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
  background-clip: padding-box;
}
.ek-props-popover #mkt-font_family_selector2.ek-direct-dropdown-menu {
  background: var(--ek-bg-panel-2) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu
  .dropdown-item {
  background: transparent !important;
  color: #ffffff !important;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu
  .dropdown-item:hover,
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu
  .dropdown-item:focus,
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu
  .dropdown-item:active,
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu
  .dropdown-item.active {
  background: rgba(0, 229, 160, 0.13) !important;
  color: #ffffff !important;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu::-webkit-scrollbar {
  width: 7px;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  background-clip: padding-box;
}
.ek-props-popover
  #mkt-font_family_selector2.ek-direct-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
  background-clip: padding-box;
}
.ek-props-popover.is-effects-popover,
.ek-props-popover:has(#mkt-section-effects) {
  width: min(720px, calc(100vw - 36px));
  max-width: min(720px, calc(100vw - 36px));
  padding-top: 32px;
}
.ek-props-popover-close {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #e8e8ee;
  cursor: pointer;
}
.ek-props-popover-close svg {
  width: 17px;
  height: 17px;
}
.ek-props-popover-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.ek-props-popover.is-raster-effects-popover {
  width: 320px !important;
  max-width: min(320px, calc(100vw - 36px)) !important;
}
.ek-props-popover:has(#mkt-section-text-fill) {
  width: 292px;
  max-width: min(292px, calc(100vw - 24px));
  overflow: visible;
}
.ek-props-popover #mkt-section-text-fill .mkt-section-summary {
  padding-bottom: 12px;
}
.ek-props-popover #mkt-section-text-fill .mkt-section-body {
  display: grid;
  gap: 10px;
}
.ek-props-popover #mkt-section-text-fill .mkt-prop-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  min-height: 34px;
  margin: 0;
}
.ek-props-popover #mkt-section-text-fill .mkt-prop-label {
  flex: none;
  align-self: center;
  width: auto;
  color: var(--ek-text-muted);
  font-size: 13px;
  text-align: right;
}
.ek-props-popover #mkt-section-text-fill .mkt-prop-select,
.ek-props-popover #mkt-section-text-fill .mkt-prop-number {
  width: 100%;
  height: 34px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background-color: #121216;
  color: #f1f1f5;
  font-size: 13px;
}
.ek-props-popover #mkt-section-text-fill .mkt-prop-control {
  min-width: 0;
}
.ek-props-popover #mkt-text_fill_colorpicker .pickr,
.ek-props-popover #mkt-text_fill_colorpicker .pickr .pcr-button {
  width: 100%;
}
.ek-props-popover #mkt-text_fill_colorpicker .pickr .pcr-button {
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Pickr's color-picker dialog is appended to body and ships with its
   own modest z-index. Force it above everything in the editor — pill
   (10100), popover (10110) and Moveable (10000) — so the swatch
   dialog is always reachable when opened from inside a popover. */
body.ek-body .pcr-app,
body.ek-body .pcr-app.visible {
  z-index: 10200 !important;
}
body.ek-body .pcr-app {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  background: #1a1a1f;
  color: #e6e6ec;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.58);
}
body.ek-body .pcr-app.ek-text-fill-picker-app {
  max-width: calc(100vw - 24px) !important;
}
body.ek-body .pcr-app[data-theme="nano"] {
  width: 292px;
  max-width: calc(100vw - 24px);
}
body.ek-body .pcr-app[data-theme="nano"] .pcr-selection {
  height: 162px;
  grid-gap: 8px;
}
body.ek-body
  .pcr-app[data-theme="nano"]
  .pcr-selection
  .pcr-color-palette
  .pcr-palette {
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.ek-body .pcr-app[data-theme="nano"] .pcr-selection .pcr-color-preview {
  margin-left: 0;
}
body.ek-body
  .pcr-app[data-theme="nano"]
  .pcr-selection
  .pcr-color-preview
  .pcr-current-color {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.22),
    0 1px 8px rgba(0, 0, 0, 0.32);
}
body.ek-body .pcr-app[data-theme="nano"] .pcr-selection .pcr-color-chooser,
body.ek-body .pcr-app[data-theme="nano"] .pcr-selection .pcr-color-opacity {
  height: 8px;
  margin: 0;
}
body.ek-body
  .pcr-app[data-theme="nano"]
  .pcr-selection
  .pcr-color-chooser
  .pcr-slider,
body.ek-body
  .pcr-app[data-theme="nano"]
  .pcr-selection
  .pcr-color-opacity
  .pcr-slider {
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 6px rgba(0, 0, 0, 0.24);
}
body.ek-body .pcr-app .pcr-selection .pcr-picker {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
body.ek-body .pcr-app[data-theme="nano"] .pcr-interaction {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 0 0;
}
body.ek-body .pcr-app .pcr-interaction > * {
  margin: 0;
}
body.ek-body .pcr-app .pcr-interaction input,
body.ek-body .pcr-app .pcr-interaction .pcr-result {
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #111116;
  color: #e8e8ee;
  font-size: 12px;
  letter-spacing: 0;
}
body.ek-body .pcr-app .pcr-interaction .pcr-result {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  text-align: left;
}
body.ek-body .pcr-app .pcr-interaction .pcr-type {
  border-radius: 7px;
  color: var(--ek-text-muted);
  background: rgba(255, 255, 255, 0.05);
}
body.ek-body .pcr-app .pcr-interaction .pcr-type.active {
  color: #081412;
  background: var(--ek-accent);
}
body.ek-body .pcr-app .pcr-interaction input:focus,
body.ek-body .pcr-app .pcr-interaction input.pcr-active,
body.ek-body .pcr-app .pcr-interaction button:focus,
body.ek-body .pcr-app .pcr-interaction button.pcr-active {
  box-shadow:
    0 0 0 1px #1a1a1f,
    0 0 0 3px color-mix(in srgb, var(--ek-accent) 70%, transparent);
}
body.ek-body .pcr-app .pcr-interaction .mkt-eyedropper-btn {
  grid-column: 1;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  border-color: rgba(0, 229, 160, 0.55) !important;
  border-radius: 8px;
  background: rgba(0, 229, 160, 0.09);
  color: var(--ek-accent);
}
body.ek-body .pcr-app .pcr-interaction .mkt-eyedropper-btn:hover {
  background: rgba(0, 229, 160, 0.16);
  border-color: var(--ek-accent) !important;
}
body.ek-body .pcr-app .pcr-interaction .mkt-eyedropper-btn svg {
  width: 18px;
  height: 18px;
}
/* Inspector sections moved into the popover need to ignore the
   right-panel-specific bg/border so they render cleanly on the dark
   popover surface. */
.ek-props-popover .mkt-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.ek-props-popover .mkt-section-summary {
  color: var(--ek-text-muted);
  padding: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.ek-props-popover .mkt-section-summary::-webkit-details-marker {
  display: none;
}
.ek-props-popover .mkt-section-summary::before,
.ek-props-popover .mkt-section-summary::after {
  display: none;
}
.ek-props-popover .mkt-section[open] > .mkt-section-summary {
  color: var(--ek-text-muted);
}
.ek-props-popover .mkt-section-body {
  padding: 0;
}
.ek-props-popover #mkt-shape-fill-grad-angle-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 34px;
  align-items: center;
  column-gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.ek-props-popover #mkt-shape-fill-grad-angle-row .mkt-prop-label {
  flex: none;
  width: 64px;
}
.ek-props-popover #mkt-shape-fill-grad-angle {
  width: 100%;
  flex: none !important;
  min-width: 0;
  max-width: 100%;
  margin-right: 0 !important;
}
.ek-props-popover #mkt-shape-fill-grad-angle-val {
  flex: none;
  min-width: 34px;
  white-space: nowrap;
}
.ek-props-popover .dropdown-menu {
  z-index: 10220 !important;
}
.ek-props-popover #mkt-font_stroke_selector {
  max-height: min(260px, calc(100vh - 180px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.ek-props-popover #mkt-section-effects {
  width: 100%;
}
.ek-props-popover.is-raster-effects-popover
  #mkt-section-effects
  > .mkt-section-summary {
  display: none;
}
.ek-props-popover.is-raster-effects-popover .mkt-fx-preset-grid,
.ek-props-popover.is-raster-effects-popover .mkt-fx-controls {
  display: none;
}
.mkt-fx-preset-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.mkt-fx-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 7px 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #d9d9e2;
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.mkt-fx-preset:hover,
.mkt-fx-preset.is-active {
  background: rgba(0, 229, 160, 0.1);
  border-color: rgba(0, 229, 160, 0.55);
  color: #fff;
}
.mkt-fx-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 38px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ek-accent);
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}
.mkt-fx-preview-drop {
  text-shadow: 4px 5px 0 color-mix(in srgb, var(--ek-accent) 34%, transparent);
}
.mkt-fx-preview-glow {
  text-shadow:
    0 0 8px color-mix(in srgb, var(--ek-accent) 74%, white),
    0 0 18px var(--ek-accent);
}
.mkt-fx-preview-echo {
  text-shadow:
    4px 4px 0 color-mix(in srgb, var(--ek-accent) 44%, transparent),
    8px 8px 0 color-mix(in srgb, var(--ek-accent) 20%, transparent);
}
.mkt-fx-preview-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ek-accent);
}
.mkt-fx-preview-bg {
  background: color-mix(in srgb, var(--ek-accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--ek-accent) 32%, transparent);
}
.mkt-fx-preview-splice {
  color: transparent;
  -webkit-text-stroke: 1px var(--ek-accent);
  text-shadow: 5px 5px 0 color-mix(in srgb, var(--ek-accent) 50%, transparent);
}
.mkt-fx-preview-hollow {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ek-accent);
}
.mkt-fx-preview-neon {
  color: #fff;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--ek-accent) 72%, white),
    0 0 18px var(--ek-accent);
}
.mkt-fx-preview-glitch {
  color: #ff36c7;
  text-shadow:
    -2px 0 0 #00e5ff,
    2px 0 0 #ffe600;
}
.mkt-fx-preview-retro {
  color: #ffd05a;
  text-shadow:
    2px 2px 0 var(--ek-accent),
    4px 4px 0 #1a1a1f;
}
.mkt-fx-preview-neon-lights {
  color: color-mix(in srgb, var(--ek-accent) 58%, #ff6ee7);
  text-shadow:
    0 0 5px #fff,
    0 0 14px var(--ek-accent),
    0 0 26px color-mix(in srgb, var(--ek-accent) 60%, #ff37d0);
}
.mkt-fx-preview-tv-static {
  color: #f4f4f6;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.16) 0 1px,
      transparent 1px 4px
    ),
    rgba(255, 255, 255, 0.04);
  text-shadow:
    -2px 0 0 #00e5ff,
    2px 0 0 #ff2bbd,
    0 2px 0 rgba(255, 255, 255, 0.18);
}
.mkt-fx-preview-sci-fi {
  color: #dffcff;
  text-shadow:
    0 0 8px var(--ek-accent),
    3px 0 0 rgba(0, 229, 255, 0.55);
  letter-spacing: 0.04em;
}
.mkt-fx-preview-screenprint {
  color: #fff;
  -webkit-text-stroke: 1px #b71a65;
  text-shadow:
    2px 2px 0 #ff5fae,
    -2px -1px 0 color-mix(in srgb, var(--ek-accent) 70%, white);
}
.mkt-fx-preview-western {
  color: #f2b341;
  -webkit-text-stroke: 1px #7b310f;
  text-shadow:
    2px 2px 0 #7b310f,
    0 0 10px rgba(255, 208, 90, 0.35);
}
.mkt-fx-preview-graffiti {
  color: #ecfff8;
  -webkit-text-stroke: 1.2px #173d2f;
  text-shadow:
    2px 2px 0 var(--ek-accent),
    -2px 1px 0 #173d2f;
}
.mkt-fx-preview-bubble {
  color: color-mix(in srgb, var(--ek-accent) 48%, white);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ek-accent) 60%, #003b55);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.65),
    0 5px 0 rgba(0, 0, 0, 0.22);
}
.mkt-fx-preview-aerobics {
  color: #ffc2f4;
  text-shadow:
    4px -2px 0 color-mix(in srgb, var(--ek-accent) 70%, white),
    -4px 3px 0 #ff52d0,
    0 0 16px rgba(255, 82, 208, 0.5);
  transform: skew(-10deg);
}
.mkt-fx-preview-arcade {
  color: #7bff6d;
  text-shadow:
    3px 0 0 #00d0ff,
    -3px 0 0 #ff2bbd,
    0 3px 0 #14221d;
  image-rendering: pixelated;
}
.mkt-fx-preview-cosmic {
  color: #fff;
  text-shadow:
    0 0 8px #bdeaff,
    0 0 20px var(--ek-accent),
    3px 3px 0 rgba(130, 120, 255, 0.45);
}
.mkt-fx-preview-pixel {
  color: #f6f6ff;
  text-shadow:
    3px 0 0 var(--ek-accent),
    0 3px 0 #2231ff,
    3px 3px 0 #ff2bbd;
  font-family: monospace;
}
.mkt-fx-controls {
  margin-bottom: 10px;
}
.mkt-fx-color {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}
.mkt-fx-color-row.is-disabled {
  display: none;
}
@media (max-width: 1149px), (max-height: 699px) {
  .mkt-fx-preset-grid {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
  }
}

/* ====================================================================
   Mobile editor layout: Холст / Правки / AI
   ==================================================================== */
.ek-mobile-tabbar {
  display: none;
}

@media (max-width: 1149px), (max-height: 699px) {
  :root {
    --ek-header-h: 46px;
    --ek-mobile-tabbar-h: 58px;
    --ek-mobile-sheet-h: min(
      76dvh,
      calc(
        var(--ek-real-vh, 100dvh) - var(--ek-header-h) -
          var(--ek-mobile-tabbar-h)
      )
    );
  }

  body.ek-body {
    min-width: 0;
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--ek-real-vh, 100dvh);
    min-height: var(--ek-real-vh, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  .ek-header {
    height: var(--ek-header-h);
    padding: 0 4px;
    gap: 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .ek-header-left,
  .ek-header-right {
    gap: 5px;
    min-width: 0;
  }

  .ek-header-back {
    height: 36px;
    min-width: 36px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
  }

  .ek-brand {
    display: none !important;
  }

  .ek-header-center {
    position: absolute;
    left: 50%;
    top: var(--ek-header-h);
    z-index: 40;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .ek-header-center #mkt-editor-canvas-zoom-host {
    pointer-events: auto;
  }

  .ek-header-history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    justify-self: center;
  }

  .ek-header-history .mkt-editor-canvas-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: var(--editor-text-main);
  }

  .ek-header-history .mkt-editor-canvas-history-btn.disable {
    opacity: 0.35;
    pointer-events: none;
  }

  .ek-header-history .mkt-tools_undo_icon {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
  }

  .ek-header-right .ek-icon-btn {
    display: inline-flex;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
  }

  .ek-header-right .ek-icon-btn img {
    width: 26px;
    height: 26px;
  }

  .ek-header-right .ek-pdf-btn {
    height: 36px;
    min-width: 0;
    padding: 0 8px;
    border-radius: 9px;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .ek-header-right .ek-pdf-btn .ek-pdf-icon {
    width: 22px;
    height: 22px;
  }

  .ek-header-right {
    margin-left: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
    justify-self: end;
  }

  .mkt-editor-canvas-zoom-controls {
    min-height: 36px;
    padding: 4px 6px;
    gap: 5px;
    border: 1px solid var(--ek-border);
    border-radius: 10px;
    background: rgba(18, 18, 24, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.9);
  }

  .mkt-editor-canvas-zoom-label,
  .mkt-editor-canvas-hotkeys-trigger,
  .mkt-editor-canvas-zoom-fit,
  .mkt-editor-canvas-zoom-reset {
    display: none !important;
  }

  .mkt-editor-canvas-zoom-controls .mkt-editor-canvas-history-btn,
  .mkt-editor-canvas-zoom-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
  }

  .mkt-editor-canvas-zoom-controls .mkt-editor-canvas-history-btn {
    display: none !important;
  }

  .mkt-editor-canvas-zoom-controls
    .mkt-editor-canvas-history-btn
    .mkt-tools_undo_icon {
    width: 18px;
    height: 18px;
  }

  .mkt-editor-canvas-zoom-value {
    min-width: 44px;
    font-size: 12px;
  }

  body.ek-props-pill-visible #mkt-editor-canvas-zoom-controls {
    display: none !important;
  }

  #mkt-editor_workspace.ek-workspace {
    height: calc(
      var(--ek-real-vh, 100dvh) - var(--ek-header-h) - var(--ek-mobile-tabbar-h)
    );
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
  }

  #mkt-col_maketcontainer.ek-canvas-area {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
  }

  #mkt-editor-canvas-viewport.ek-canvas-viewport {
    padding: 54px 12px calc(var(--ek-mobile-tabbar-h) + 18px);
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  body.ek-mobile-pinching-canvas
    #mkt-editor-canvas-viewport.ek-canvas-viewport {
    touch-action: none;
  }

  .ek-left-toolbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ek-mobile-tabbar-h) + 10px);
    z-index: 10020;
    width: auto;
    height: 62px;
    min-height: 62px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ek-border-strong);
    border-radius: 16px;
    background: rgba(18, 18, 24, 0.94);
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s ease;
  }

  .ek-left-toolbar .ek-notes-fab.mkt-notes-fab {
    margin-top: 0;
  }

  body.ek-mobile-mode-edit:not(.ek-mobile-has-selection) .ek-left-toolbar {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ek-tool-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .ek-tool-icon {
    width: 22px;
    height: 22px;
  }

  .mkt-selection-toolbar.has-text-selection
    .mkt-selection-toolbar-text-edit-btn,
  .mkt-selection-toolbar.has-text-selection
    .mkt-selection-toolbar-text-edit-divider {
    display: inline-flex;
  }

  .ek-tool-dropdown .dropdown-menu {
    margin-left: 0;
    margin-bottom: 10px;
    background: var(--ek-bg-panel);
    border-color: var(--ek-border-strong);
    color: var(--ek-text);
  }

  .ek-right-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--ek-mobile-tabbar-h);
    z-index: 10015;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: var(--ek-mobile-sheet-h);
    min-height: 260px;
    max-height: var(--ek-mobile-sheet-h);
    box-sizing: border-box;
    overflow: hidden;
    border-left: 0;
    border-top: 1px solid var(--ek-border-strong);
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% + var(--ek-mobile-tabbar-h)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
  }

  .ek-right-panel.ek-right-panel-collapsed {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .ek-right-panel.ek-right-panel-collapsed
    > :not(.ek-right-panel-toggle):not(.ek-right-panel-collapsed-dock) {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  body.ek-mobile-mode-ai .ek-right-panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ek-right-panel-toggle,
  .ek-right-panel-collapsed-dock {
    display: none !important;
  }

  .ek-tabs {
    width: 100%;
    min-width: 0;
    padding-left: 0;
    min-height: 38px;
  }

  .ek-tab {
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ek-tab-pane {
    width: 100%;
    min-width: 0;
  }

  .ek-tab-pane-art {
    padding-top: 4px;
  }

  .ek-art-chat {
    gap: 10px;
    padding: 4px 10px 6px;
  }

  .ek-art-msg-ai {
    gap: 6px;
  }

  .ek-art-msg-avatar {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    font-size: 9px;
  }

  .ek-art-msg-body {
    gap: 5px;
  }

  .ek-art-msg-bubble {
    padding: 8px 10px;
    border-radius: 12px 12px 12px 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .ek-art-options {
    gap: 5px;
  }

  .ek-art-option {
    min-height: 42px;
    padding: 6px 8px;
    gap: 8px;
    border-radius: 9px;
    font-size: 11px;
  }

  .ek-art-option-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .ek-art-option-icon svg {
    width: 26px;
    height: 26px;
  }

  .ek-art-option-text {
    line-height: 1.2;
  }

  .ek-art-msg-user {
    padding-left: 26px;
  }

  .ek-art-msg-user-bubble {
    padding: 7px 9px;
    border-radius: 12px 12px 4px 12px;
    font-size: 12px;
    line-height: 1.3;
  }

  .ek-art-quick-chips {
    gap: 4px;
    padding: 6px 10px 4px;
  }

  .ek-art-quick-chips .ek-art-quick-label {
    display: none;
  }

  .ek-art-composer {
    padding: 6px 10px 8px;
  }

  .ek-art-composer-inner {
    border-radius: 10px;
  }

  .ek-art-composer-input {
    min-height: 42px;
    max-height: 78px;
    padding: 9px 48px 30px 10px;
    font-size: 12px;
    line-height: 1.3;
  }

  .ek-art-composer-hint {
    display: none;
  }

  .ek-art-composer-send {
    right: 7px;
    bottom: 7px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
  }

  .ek-tab-pane-vibe {
    padding: 8px 10px 10px;
    gap: 7px;
  }

  .ek-tab-pane-vibe .ek-vibe-intro {
    display: block;
    padding: 7px 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }

  .ek-tab-pane-vibe .ek-vibe-intro span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    font-weight: 500;
  }

  .ek-vibe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 188px);
    gap: 8px;
    min-height: 0;
  }

  .ek-vibe-card {
    min-height: 188px;
    border-radius: 10px;
  }

  .ek-vibe-wireframe {
    height: 112px;
    padding: 12px;
  }

  .ek-vibe-desc {
    padding: 10px;
    font-size: 11px;
    line-height: 1.35;
  }

  .ek-vibe-card-body {
    padding: 11px 10px 10px 12px;
    gap: 5px;
  }

  .ek-vibe-title {
    font-size: 16px;
    line-height: 1.1;
  }

  .ek-vibe-tags {
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.07em;
  }

  #ek-props-pill.ek-props-pill {
    top: 8px;
    left: 50%;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 20px);
    transform: translateX(-50%);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    overflow: visible;
    white-space: normal;
    padding: 5px 6px;
    box-sizing: border-box;
  }

  #ek-props-pill.is-visible {
    display: flex;
  }

  .ek-props-pill button.ek-pp-btn {
    flex: 0 0 auto;
    min-height: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .ek-props-pill .ek-pp-btn.ek-pp-icon-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  #ek-props-pill.ek-props-pill-kind-image {
    gap: 2px;
    padding-inline: 3px;
  }

  .ek-props-pill-kind-image button.ek-pp-btn {
    gap: 2px;
    padding-inline: 4px;
    font-size: 10.5px;
  }

  .ek-props-pill-kind-image .ek-pp-btn.ek-pp-icon-btn {
    width: 28px;
    min-width: 28px;
    padding-inline: 0;
  }

  .ek-props-pill-kind-image .ek-pp-divider {
    width: 1px;
    margin-inline: 0;
  }

  #ek-props-pill.ek-props-pill-kind-text {
    gap: 2px;
    padding-inline: 3px;
    max-width: calc(100vw - 8px);
    flex-wrap: nowrap;
  }

  .ek-props-pill-kind-text button.ek-pp-btn {
    gap: 2px;
    padding-inline: 4px;
    font-size: 10.5px;
  }

  .ek-props-pill-kind-text button.ek-pp-btn:first-child {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ek-props-pill-kind-text button.ek-pp-btn:nth-child(2) {
    max-width: 42px;
    padding-inline: 3px;
  }

  .ek-props-pill-kind-text .ek-pp-align-group {
    gap: 1px;
    padding-inline: 2px;
  }

  .ek-props-pill-kind-text .ek-pp-align-group button {
    width: 27px;
    min-width: 27px;
  }

  .ek-props-pill-kind-text .ek-pp-btn.ek-pp-icon-btn {
    width: 28px;
    min-width: 28px;
    padding-inline: 0;
  }

  .ek-props-pill-kind-text .ek-pp-divider {
    display: none;
  }

  .ek-props-popover {
    padding: 8px 9px;
    min-width: 0;
    max-width: calc(100vw - 20px);
    max-height: calc(
      100dvh - var(--ek-header-h) - var(--ek-mobile-tabbar-h) - 18px
    );
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.58);
  }

  .ek-props-popover.is-effects-popover,
  .ek-props-popover:has(#mkt-section-effects) {
    padding-top: 32px;
  }

  .ek-props-popover .mkt-section-summary {
    padding-bottom: 5px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .ek-props-popover .mkt-section-body {
    padding: 0;
  }

  .ek-props-popover .mkt-prop-row {
    gap: 6px;
    margin-top: 5px;
    min-height: 24px;
  }

  .ek-props-popover .mkt-prop-row:first-child {
    margin-top: 2px;
  }

  .ek-props-popover .mkt-prop-label {
    flex-basis: 54px;
    font-size: 11px;
  }

  .ek-props-popover .mkt-prop-control {
    min-width: 0;
  }

  .ek-props-popover .form-control,
  .ek-props-popover .form-select,
  .ek-props-popover .mkt-prop-select,
  .ek-props-popover .mkt-prop-number {
    min-height: 28px;
    height: 28px;
    padding: 3px 8px;
    font-size: 12px;
  }

  .ek-props-popover .pickr .pcr-button {
    width: 44px !important;
    height: 34px !important;
  }

  .ek-props-popover .ek-direct-dropdown-menu {
    max-height: min(260px, calc(100dvh - 170px)) !important;
    border-radius: 10px;
  }

  .ek-props-popover .ek-direct-dropdown-menu .dropdown-item {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .ek-mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10030;
    height: var(--ek-mobile-tabbar-h);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 10px max(6px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    border-top: 1px solid var(--ek-border-strong);
    background: rgba(13, 14, 18, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .ek-mobile-tab {
    min-width: 0;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ek-text-muted);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }

  .ek-mobile-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }

  .ek-mobile-tab.is-active {
    color: var(--ek-text);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .ek-mobile-tab.is-active .ek-mobile-tab-icon {
    color: var(--ek-accent);
  }

  .moveable-control,
  .moveable-line,
  .moveable-control-box {
    touch-action: none;
  }
}