/* ═══════════════════════════════════════════════════════════════
   Smart Con UI — Edit Mode v3 CSS
   Activated by URL param ?em=1
   ═══════════════════════════════════════════════════════════════ */

/* ── Body offset ─────────────────────────────────────────────── */
body.em-active { padding-top: 88px !important; }
body.em-active .topbar { top: 88px !important; }
/* Sidebar: shift down by edit-bar height so it doesn't get hidden behind the bar */
body.em-active .sidebar {
  top: calc(88px + var(--topbar-height, 64px)) !important;
  max-height: calc(100vh - 88px - var(--topbar-height, 64px)) !important;
}

/* ── Properties panel — content width = viewport − panel ──────────────────
   Use explicit width (not margin-right) so the content box actually shrinks.
   width:calc() is the only reliable method when page-wrapper has overflow:hidden */
body.em-active.em-panel-open .page-wrapper {
  width:     calc(100vw - var(--em-panel-w, 300px)) !important;
  max-width: calc(100vw - var(--em-panel-w, 300px)) !important;
  margin-right: 0 !important;
  overflow-x: hidden;
}
/* Children must not exceed the wrapper width */
body.em-active.em-panel-open .page-body,
body.em-active.em-panel-open .page-content,
body.em-active.em-panel-open main {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* ── Sidebar — always pushes page-content to the right in edit mode ─────── */
/* Overrides shared.css responsive rules that set margin-left:0             */
body.em-active .page-with-sidebar {
  margin-left: var(--sidebar-width, 248px) !important;
}
body.em-active .sidebar {
  transform: none !important;  /* prevent mobile slide-out */
}
/* padding-right is intentionally NOT used — panel width is handled via
   --em-panel-w CSS variable and width:calc() on .page-wrapper (see below) */
body.em-dragging * { user-select: none !important; }

/* ═══════════════════════════════════════════════════════════════
   TOP BAR — 2 rows
═══════════════════════════════════════════════════════════════ */
#em-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: auto;
  background: #1e293b;
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 99999;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

/* Row 1: Navigation / Viewport */
.em-bar-r1 {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
/* Row 2: Editing Tools */
.em-bar-r2 {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
}

/* Badge */
#em-bar .em-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Separator + spacer */
#em-bar .em-sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
#em-bar .em-spacer { flex: 1; min-width: 8px; }

/* Draft count */
#em-bar .em-draft-count {
  font-size: 12px;
  color: #fbbf24;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Bar buttons (.em-bar-btn) ─────────────────────────────── */
.em-bar-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
.em-bar-btn:hover { opacity: .85; }
.em-bar-btn--blue  { background: #3b82f6; color: #fff; border-color: transparent; }
.em-bar-btn--green { background: #22c55e; color: #fff; border-color: transparent; }
.em-bar-btn--ghost { background: rgba(255,255,255,.08); color: #cbd5e1; border-color: rgba(255,255,255,.2); }
.em-bar-btn--on    { background: #f59e0b !important; color: #1e293b !important; border-color: transparent !important; }

/* ── Element info (centre of bar) ─────────────────────────── */
#em-bar .em-el-info,
#em-el-info {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  font-family: 'Courier New', monospace;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 3px 10px;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s, background .2s;
  flex-shrink: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT SELECTION HIGHLIGHTS
═══════════════════════════════════════════════════════════════ */
body.em-active [data-em-id]:hover {
  outline: 2px dashed rgba(59,130,246,.6) !important;
  outline-offset: 2px;
  cursor: pointer !important;
}
body.em-active [data-em-id].em-selected {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px;
}
body.em-active [data-em-id].em-has-draft {
  outline: 2px solid #f59e0b !important;
}
body.em-active [data-em-id].em-selected.em-has-draft {
  outline: 2px solid #f59e0b !important;
}

/* Contenteditable active state */
[data-em-id].em-editing {
  outline: 2px solid #22c55e !important;
  outline-offset: 2px;
  /* Prevent browser from overriding button/link colours during contenteditable edit */
  background-color: inherit;
  color: inherit;
  background: rgba(34,197,94,.05) !important;
  cursor: text !important;
  min-height: 1em;
}
[data-em-id].em-editing:focus { outline: 2px solid #16a34a !important; }

/* ═══════════════════════════════════════════════════════════════
   RESIZE HANDLES
═══════════════════════════════════════════════════════════════ */
.em-handle {
  position: fixed;
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 99998;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.em-handle[data-dir="n"]  { cursor: n-resize; }
.em-handle[data-dir="s"]  { cursor: s-resize; }
.em-handle[data-dir="e"]  { cursor: e-resize; }
.em-handle[data-dir="w"]  { cursor: w-resize; }
.em-handle[data-dir="ne"] { cursor: ne-resize; }
.em-handle[data-dir="nw"] { cursor: nw-resize; }
.em-handle[data-dir="se"] { cursor: se-resize; }
.em-handle[data-dir="sw"] { cursor: sw-resize; }

/* ═══════════════════════════════════════════════════════════════
   DRAG HANDLE (⠿ Move)
═══════════════════════════════════════════════════════════════ */
#em-drag-handle {
  position: fixed;
  z-index: 99997;
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px 4px 0 0;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  display: none;
  align-items: center;
  gap: 4px;
  box-shadow: 0 -2px 8px rgba(59,130,246,.4);
}
#em-drag-handle:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════════════════
   FLOAT TOOLBAR (#em-toolbar)
═══════════════════════════════════════════════════════════════ */
#em-toolbar {
  position: fixed;
  z-index: 99995;
  display: none;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  min-width: 320px;
  max-width: calc(100vw - 8px);
  pointer-events: all;
  font-family: 'Inter', sans-serif;
}

/* Toolbar header — 2-row layout */
.em-tb-hdr {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 4px;
  background: #1e293b;
  flex-shrink: 0;
  gap: 0;
}
/* Top row: badge + spacer + pin + close */
.em-tb-hdr-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}
.em-tb-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  padding: 0 4px;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
/* Bottom row: tabs (wrap if still needed) */
.em-tb-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.em-tb-tab {
  padding: 4px 8px;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  color: #94a3b8;
  transition: all .1s;
  font-family: inherit;
  white-space: nowrap;
}
.em-tb-tab:hover { background: rgba(255,255,255,.15); color: #e2e8f0; }
.em-tb-tab--on   { background: #3b82f6 !important; color: #fff !important; }
.em-tb-sp  { flex: 1; }
.em-tb-close {
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  color: #94a3b8;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
}
.em-tb-close:hover { background: #ef4444; color: #fff; }
/* Minimize button: different hover colour */
.em-tb-min:hover { background: #0ea5e9 !important; color: #fff !important; }

/* ── Minimized toolbar ─ only show the header ── */
#em-toolbar.em-tb--min .em-tb-tabs,
#em-toolbar.em-tb--min .em-tb-body,
#em-toolbar.em-tb--min .em-tree { display: none !important; }
#em-toolbar.em-tb--min { min-width: 160px; }

/* Toolbar body */
.em-tb-body {
  padding: 10px 12px;
  overflow-y: auto;
  max-height: 340px;
}

/* Row inside toolbar */
.em-tb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Select inside toolbar */
.em-tb-sel {
  height: 28px;
  flex: 1;
  min-width: 90px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  padding: 0 6px;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  outline: none;
}
.em-tb-sel:focus { border-color: #3b82f6; }

/* Number input inside toolbar */
.em-tb-body input[type="number"] {
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  font-family: monospace;
  color: #1e293b;
  text-align: center;
  background: #fff;
  outline: none;
}
.em-tb-body input[type="number"]:focus { border-color: #3b82f6; }
.em-tb-body input[type="color"] {
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
}

/* Category label */
.em-cat {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 0 4px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}
.em-cat:first-child { padding-top: 0; }

/* Style toggle buttons (B/I/U/S/align) */
.em-style-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-family: inherit;
  transition: all .1s;
  flex-shrink: 0;
}
.em-style-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #3b82f6; }
.em-style-btn.on    { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* Wide action button in text tab */
.em-wide-btn {
  width: 100%;
  padding: 7px 12px;
  border: 1px dashed #93c5fd;
  border-radius: 6px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .1s;
}
.em-wide-btn:hover { background: #dbeafe; border-color: #3b82f6; }

/* Add buttons grid */
.em-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  min-width: 56px;
  font-family: inherit;
  transition: all .1s;
}
.em-add-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.em-add-btn span { font-size: 16px; line-height: 1.2; }
.em-add-btn small { font-size: 10px; color: #475569; font-weight: 600; white-space: nowrap; }

/* Color swatches */
.em-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  flex-shrink: 0;
  padding: 0;
}
.em-swatch:hover { transform: scale(1.3); box-shadow: 0 0 0 2px #3b82f6; }

/* Labeled number widget (Style tab: W/H/T/R/B/L) */
.em-lb-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.em-lb-num span {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.em-lb-num input {
  width: 44px !important;
  height: 26px !important;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

/* ═══════════════════════════════════════════════════════════════
   ADD ELEMENT DROPDOWN MENU
═══════════════════════════════════════════════════════════════ */
#em-add-menu {
  position: fixed;
  top: 88px;
  left: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 99999;
  overflow: hidden;
  display: none;
  flex-direction: column;
  min-width: 160px;
  font-family: 'Inter', sans-serif;
}
#em-add-menu.open { display: flex; }
#em-add-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #1e293b;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  text-align: left;
  font-family: inherit;
  transition: background .1s;
}
#em-add-menu button:last-child { border-bottom: none; }
#em-add-menu button:hover { background: #eff6ff; }

/* ═══════════════════════════════════════════════════════════════
   PROPERTY PANEL (right side)
═══════════════════════════════════════════════════════════════ */
#em-panel {
  position: fixed;
  top: 88px;
  right: 0;
  width: 300px;
  height: calc(100vh - 52px);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 20px rgba(0,0,0,.1);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .2s ease;
}
#em-panel.open { transform: translateX(0); }

/* Panel header — JS creates #em-panel-hdr */
#em-panel-hdr {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
#em-panel-hdr h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px;
}
#em-panel-hdr small {
  font-size: 11px;
  color: #94a3b8;
  font-family: monospace;
}

/* Also keep old name for backward compat */
#em-panel-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

#em-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}
#em-panel-body input[type="text"],
#em-panel-body input[type="number"],
#em-panel-body select {
  width: 100%;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  outline: none;
}
#em-panel-body input:focus,
#em-panel-body select:focus { border-color: #3b82f6; }
#em-panel-body textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 12px;
  font-family: inherit;
  color: #1e293b;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
#em-panel-body textarea:focus { border-color: #3b82f6; }

/* Panel rows — JS uses .em-panel-row / .em-panel-lbl / .em-panel-ctrl */
.em-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.em-panel-lbl {
  width: 72px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  padding-top: 6px;
}
.em-panel-ctrl {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
}
.em-panel-empty {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 24px 0;
}

/* Panel actions — JS uses #em-panel-acts */
#em-panel-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
/* Also old name */
#em-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

/* Action buttons — JS uses .em-act-btn + .em-act-green/amber/red */
.em-act-btn {
  flex: 1;
  min-width: 56px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: #fff;
  color: #475569;
  transition: all .15s;
  white-space: nowrap;
}
.em-act-btn:hover   { background: #f1f5f9; }
.em-act-green       { background: #22c55e !important; color: #fff !important; border-color: transparent !important; }
.em-act-amber       { background: #f59e0b !important; color: #fff !important; border-color: transparent !important; }
.em-act-red         { background: #ef4444 !important; color: #fff !important; border-color: transparent !important; }

/* Old names for compat */
.em-act-apply  { background: #22c55e; color: #fff; border-color: transparent; }
.em-act-draft  { background: #f59e0b; color: #fff; border-color: transparent; }
.em-act-back   { background: #3b82f6; color: #fff; border-color: transparent; }
.em-act-delete { background: #ef4444; color: #fff; border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════
   EXIT DIALOG — JS uses #em-exit-dlg + .em-exit-dlg
═══════════════════════════════════════════════════════════════ */
#em-exit-dlg,
#em-exit-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
}
#em-exit-dlg.open,
#em-exit-dialog.open { display: flex; }

.em-exit-box {
  background: #fff;
  border-radius: 12px;
  width: 400px;
  max-width: 96vw;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.em-exit-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}
.em-exit-box p {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 18px;
}

/* Exit buttons — JS uses .em-exit-btns */
.em-exit-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.em-exit-btns button {
  flex: 1;
  min-width: 100px;
  height: 36px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
#em-exit-apply   { background: #22c55e; color: #fff; }
#em-exit-discard { background: #ef4444; color: #fff; }
#em-exit-stay    { background: #f1f5f9; color: #475569; }
.em-exit-footer { display: flex; gap: 8px; padding: 12px 0 0; }
.em-exit-apply-all { background: #22c55e; color: #fff; }
.em-exit-discard   { background: #ef4444; color: #fff; }
.em-exit-stay      { background: #f1f5f9; color: #475569; }

/* ═══════════════════════════════════════════════════════════════
   SHOW IDs MODE
═══════════════════════════════════════════════════════════════ */
body.em-show-ids [data-ctrl-id] {
  outline: 2px dashed #f59e0b !important;
  outline-offset: 2px;
}
body.em-show-ids [data-em-id] {
  outline: 1px dashed rgba(99,102,241,.35) !important;
  outline-offset: 1px;
}

/* JS injects .em-id-lbl and .em-id-lbl--ctrl */
.em-id-lbl,
.em-id-label {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  font-size: 9px;
  font-weight: 700;
  background: rgba(99,102,241,.88);
  color: #fff;
  padding: 1px 5px;
  border-radius: 0 0 3px 0;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  line-height: 15px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  letter-spacing: .02em;
}
.em-id-lbl--ctrl,
.em-id-label--ctrl {
  background: rgba(245,158,11,.92);
  color: #1e293b;
  font-size: 10px;
  line-height: 16px;
  z-index: 99999;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE OVERLAY
═══════════════════════════════════════════════════════════════ */
.em-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  border-radius: inherit;
  transition: opacity .15s;
  z-index: 5;
  flex-wrap: wrap;
  padding: 4px;
}
body.em-active [data-em-id]:hover .em-img-overlay { opacity: 1; }
.em-img-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  background: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #1e293b;
}
.em-img-btn:hover { background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   TOAST (injected by JS directly via style attr — no class needed)
═══════════════════════════════════════════════════════════════ */
@keyframes em-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   VIEWPORT SELECTOR  (bar buttons)
═══════════════════════════════════════════════════════════════ */
.em-vp-group {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.em-vp-btn {
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  padding: 0;
  font-family: inherit;
}
.em-vp-btn:hover    { background: rgba(255,255,255,.12); color: #e2e8f0; }
.em-vp-btn--on      { background: #3b82f6 !important; color: #fff !important; }

/* ── Viewport frame simulation (var-driven, supports custom sizes) ──────── */
/* The real page content AND the real .topbar both shrink to --em-vp-w so the
   header the user actually sees follows the simulated tablet/phone width.    */
body.em-vp-sim .page-body {
  max-width: var(--em-vp-w, 100%);
  margin: 0 auto;
  border-left: 2px solid #3b82f6;
  border-right: 2px solid #3b82f6;
  transition: max-width .2s ease;
  min-height: var(--em-vp-h, auto);
}
/* Real topbar: centre it and constrain to the simulated width */
body.em-vp-sim .topbar {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: var(--em-vp-w, 100%) !important;
  max-width: var(--em-vp-w, 100%) !important;
  transition: width .2s ease;
}
/* Sidebar collapse is handled by the injected @media rules (em-vp-inject).  */

/* Active-size label pill */
body.em-vp-sim::after {
  content: attr(data-vp-label);
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  z-index: 99990;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════════
   PANEL RESIZE HANDLE
═══════════════════════════════════════════════════════════════ */
#em-panel-resizer {
  position: absolute;
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  transition: background .15s;
}
#em-panel-resizer:hover,
#em-panel-resizer:active {
  background: rgba(59,130,246,.3);
}

/* ═══════════════════════════════════════════════════════════════
   PANEL CONTENT EDITOR  (Page / Div scope)
═══════════════════════════════════════════════════════════════ */
.em-scope-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.em-scope-btn {
  flex: 1;
  height: 28px;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.em-scope-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.em-scope-btn.on    { background: #3b82f6; border-color: #3b82f6; color: #fff; }

.em-scope-warn {
  font-size: 10px;
  color: #ef4444;
  margin-top: -4px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.em-content-ta {
  width: 100%;
  min-height: 160px;
  max-height: 420px;
  padding: 8px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #1e293b;
  background: #fafafa;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
  tab-size: 2;
}
.em-content-ta:focus { border-color: #3b82f6; background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR DRAG  (cursor cue on header)
═══════════════════════════════════════════════════════════════ */
.em-tb-hdr { cursor: grab; }
.em-tb-hdr:active { cursor: grabbing; }
.em-tb-hdr-top { cursor: grab; }
.em-tb-hdr-top:active { cursor: grabbing; }
/* Keep pointer on tabs row & buttons */
.em-tb-tabs,
.em-tb-close,
.em-tb-pin { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   ALL / SPLIT MODE TOGGLE
═══════════════════════════════════════════════════════════════ */
.em-mode-group {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.em-mode-btn {
  padding: 0 10px;
  height: 28px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.em-mode-btn:hover    { background: rgba(255,255,255,.12); color: #e2e8f0; }
.em-mode-btn--on      { background: #f59e0b !important; color: #1e293b !important; }

/* Active viewport label shown in Split mode */
.em-split-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Highlight viewport buttons more prominently in Split mode */
body.em-split .em-vp-btn--on {
  background: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.4);
}

/* ═══════════════════════════════════════════════════════════════
   UNDO / REDO BUTTON STATES
═══════════════════════════════════════════════════════════════ */
#em-btn-undo:disabled,
#em-btn-redo:disabled { cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   MULTI-SELECT HIGHLIGHT
═══════════════════════════════════════════════════════════════ */
body.em-active [data-em-id].em-multi-sel {
  outline: 2px solid #7c3aed !important;
  outline-offset: 2px;
  background: rgba(124,58,237,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-SELECT ALIGNMENT BAR  (bottom strip)
═══════════════════════════════════════════════════════════════ */
#em-multi-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #5b21b6;
  color: #fff;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  z-index: 99998;
  box-shadow: 0 -3px 16px rgba(91,33,182,.5);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  flex-shrink: 0;
}
#em-multi-bar.open { display: flex; }

.em-multi-count {
  font-weight: 700;
  font-size: 11px;
  background: rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.em-mb-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
  margin: 0 2px;
}
.em-mb-lbl {
  font-size: 10px;
  font-weight: 700;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.em-mb-flex { flex: 1; }
.em-mb-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .12s;
  flex-shrink: 0;
}
.em-mb-btn:hover { background: rgba(255,255,255,.22); }
.em-mb-close { background: rgba(239,68,68,.5) !important; }
.em-mb-close:hover { background: #ef4444 !important; }

/* ═══════════════════════════════════════════════════════════════
   D-PAD MOVE CONTROL
═══════════════════════════════════════════════════════════════ */
.em-dpad {
  display: grid;
  grid-template-areas: ". n ." "w . e" ". s .";
  grid-template-columns: 28px 28px 28px;
  grid-template-rows: 28px 28px 28px;
  gap: 2px;
  flex-shrink: 0;
}
.em-dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
  font-size: 13px;
  cursor: pointer;
  color: #475569;
  font-family: inherit;
  padding: 0;
  transition: background .1s, border-color .1s;
  user-select: none;
}
.em-dpad-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #3b82f6; }
.em-dpad-btn:active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.em-dpad-btn[data-dir="n"] { grid-area: n; }
.em-dpad-btn[data-dir="w"] { grid-area: w; }
.em-dpad-btn[data-dir="e"] { grid-area: e; }
.em-dpad-btn[data-dir="s"] { grid-area: s; }

/* ═══════════════════════════════════════════════════════════════
   MOVE MODE TOGGLE (wide-btn variant)
═══════════════════════════════════════════════════════════════ */
.em-wide-btn--on {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR BODY MAX HEIGHT — allow more content with 5 tabs
═══════════════════════════════════════════════════════════════ */
.em-tb-body {
  max-height: 400px;
}

/* ═══════════════════════════════════════════════════════════════
   DETAILS/SUMMARY elements in Add tab
═══════════════════════════════════════════════════════════════ */
.em-tb-body details summary::-webkit-details-marker { display: none; }
.em-tb-body details[open] summary { border-bottom: 1px solid rgba(0,0,0,.08); }

/* ═══════════════════════════════════════════════════════════════
   POSITION DISPLAY (tx/ty readout in style tab)
═══════════════════════════════════════════════════════════════ */
#em-pos-disp {
  font-size: 10px;
  color: #64748b;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
  white-space: pre;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 3px 6px;
}

/* ═══════════════════════════════════════════════════════════════
   MARQUEE (rubber-band) SELECTION
═══════════════════════════════════════════════════════════════ */
#em-marquee {
  position: fixed;
  border: 1.5px solid #3b82f6;
  background: rgba(59, 130, 246, .1);
  pointer-events: none;
  z-index: 99997;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ELEMENT TREE  (breadcrumb + children navigator)
═══════════════════════════════════════════════════════════════ */
.em-tree {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 6px 0 4px;
  flex-shrink: 0;
}

/* Breadcrumb row */
.em-tree-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 10px;
  font-size: 10px;
  color: #94a3b8;
}
.em-tree-sep { color: #475569; }
.em-tree-anc {
  padding: 1px 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: #94a3b8;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  white-space: nowrap;
}
.em-tree-anc:hover { background: rgba(255,255,255,.18); color: #e2e8f0; }
.em-tree-anc--self {
  color: #fbbf24;
  font-weight: 700;
  background: none;
  border: none;
  cursor: default;
  padding: 1px 4px;
}

/* Children header */
.em-tree-hdr {
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #475569;
}

/* Children list */
.em-tree-list {
  max-height: 140px;
  overflow-y: auto;
  padding: 2px 0;
}
.em-tree-list::-webkit-scrollbar { width: 4px; }
.em-tree-list::-webkit-scrollbar-track { background: transparent; }
.em-tree-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.em-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background .1s;
  min-width: 0;
}
.em-tree-row:hover { background: rgba(255,255,255,.08); }
.em-tree-row--sel  { background: rgba(59,130,246,.18) !important; }

.em-tree-ind {
  width: 14px;
  font-size: 10px;
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
  text-align: center;
}
.em-tree-lbl {
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #93c5fd;
  white-space: nowrap;
  flex-shrink: 0;
}
.em-tree-txt {
  font-size: 10px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL VISIBILITY DIALOG
═══════════════════════════════════════════════════════════════ */
#em-vis-dlg {
  display: none;
  position: fixed;
  top: 88px;
  right: 0;
  width: 360px;
  max-height: calc(100vh - 52px);
  background: #1e293b;
  color: #e2e8f0;
  z-index: 99995;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.4);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
#em-vis-dlg.open { display: flex; }

/* Header */
.em-vis-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #0f172a;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.em-vis-hdr-btn {
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.em-vis-hdr-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.em-vis-hdr-close { border-color: rgba(239,68,68,.4); }
.em-vis-hdr-close:hover { background: #ef4444 !important; color: #fff !important; }

/* Body: scrollable */
.em-vis-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.em-vis-body::-webkit-scrollbar { width: 4px; }
.em-vis-body::-webkit-scrollbar-track { background: transparent; }
.em-vis-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* Section card */
.em-vis-sec {
  margin: 4px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
}
.em-vis-sub {
  margin-left: 24px;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

/* Section header */
.em-vis-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 6px;
}
.em-vis-sec-name {
  font-weight: 700;
  font-size: 12px;
  color: #fbbf24;
  font-family: 'Courier New', monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.em-vis-sec-tag {
  font-size: 10px;
  color: #475569;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 1px 5px;
  transition: background .1s;
}
.em-vis-sec-tag:hover { background: rgba(255,255,255,.12); color: #93c5fd; }

/* Controls area */
.em-vis-ctrl {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.em-vis-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.em-vis-roles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE 1 — PAUSE / RESUME EDIT MODE
═══════════════════════════════════════════════════════════════ */
.em-bar-btn--pause-off {
  background: #64748b !important;
  color: #e2e8f0 !important;
  border-color: transparent !important;
}
/* When paused: dim the edit handles / multi-select but keep bar visible */
body.em-paused [data-em-id]:not(#em-bar):not(#em-bar *) {
  outline: none !important;
  cursor: default !important;
}
body.em-paused .em-sel-handle { display: none !important; }
body.em-paused #em-multi-bar  { display: none !important; }

/* ── Recall button ──────────────────────────────────────────── */
.em-bar-btn--recall {
  background: rgba(139,92,246,.15) !important;
  color: #a78bfa !important;
  border-color: rgba(139,92,246,.3) !important;
}
.em-bar-btn--recall:hover { background: rgba(139,92,246,.28) !important; }

/* ── Language switcher ──────────────────────────────────────── */
.em-lang-group {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: 2px;
}
.em-lang-btn {
  height: 26px;
  padding: 0 9px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.em-lang-btn:hover   { background: rgba(255,255,255,.1); color: #e2e8f0; }
.em-lang-btn--on     { background: #0ea5e9 !important; color: #fff !important; }

/* ── Visibility logic note ──────────────────────────────────── */
.em-vis-logic-note {
  font-size: 10px;
  color: #64748b;
  background: rgba(255,255,255,.04);
  border-left: 2px solid #6366f1;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 6px;
  line-height: 1.5;
}
.em-vis-logic-note b { color: #a78bfa; }

/* ── Directory button ───────────────────────────────────────── */
.em-bar-btn--dir {
  background: transparent !important;
  color: #a78bfa !important;
  border-color: rgba(167,139,250,.35) !important;
  font-size: 11px !important;
  padding: 0 8px !important;
}
.em-bar-btn--dir:hover { background: rgba(167,139,250,.15) !important; }

/* ── Page URL + Live button ─────────────────────────────────── */
.em-page-url-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  max-width: 260px;
}
.em-page-url {
  height: 26px;
  flex: 1;
  min-width: 80px;
  max-width: 240px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #94a3b8;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px;
  padding: 0 8px;
  outline: none;
  transition: border-color .15s, background .15s, color .15s;
}
.em-page-url:hover { border-color: rgba(255,255,255,.3); color: #e2e8f0; }
.em-page-url:focus {
  border-color: #38bdf8;
  background: rgba(56,189,248,.1);
  color: #fff;
}
.em-page-url::placeholder { color: rgba(255,255,255,.25); }
.em-bar-btn--live {
  background: transparent !important;
  color: #38bdf8 !important;
  border-color: rgba(56,189,248,.35) !important;
  font-size: 11px !important;
  padding: 0 8px !important;
}
.em-bar-btn--live:hover { background: rgba(56,189,248,.15) !important; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 2 — SHARED TEMPLATE INPUT
═══════════════════════════════════════════════════════════════ */
.em-tpl-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.em-tpl-lbl {
  font-size: 14px;
  opacity: .75;
  flex-shrink: 0;
}
.em-tpl-inp {
  height: 26px;
  width: 110px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  padding: 0 7px;
  outline: none;
  transition: border-color .15s;
}
.em-tpl-inp::placeholder { color: rgba(255,255,255,.3); }
.em-tpl-inp:focus { border-color: #8b5cf6; background: rgba(139,92,246,.15); }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 3 — PREVIEW AS ROLE/LEVEL
═══════════════════════════════════════════════════════════════ */
#em-prev-dlg {
  position: fixed;
  top: 88px;
  right: 280px;
  width: 240px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 99996;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
#em-prev-dlg.open { display: flex; }

.em-prev-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 14px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.em-prev-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.em-prev-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-prev-lbl {
  font-size: 11px;
  color: #94a3b8;
  width: 40px;
  flex-shrink: 0;
}
.em-prev-sel {
  flex: 1;
  height: 28px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
  font-size: 12px;
  font-family: inherit;
  padding: 0 6px;
  cursor: pointer;
  outline: none;
}
.em-prev-sel option { background: #1e293b; color: #e2e8f0; }
.em-prev-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.em-prev-btn {
  height: 30px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
.em-prev-btn:hover { filter: brightness(.9); }
.em-prev-btn--go  { background: #8b5cf6; color: #fff; }
.em-prev-btn--off { background: #475569; color: #e2e8f0; }
.em-prev-showall {
  width: 100%;
  margin: 4px 0 8px;
  height: 30px;
  background: rgba(34,197,94,.15);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.35);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.em-prev-showall:hover { background: rgba(34,197,94,.28); }
.em-prev-info {
  font-size: 11px;
  color: #a78bfa;
  text-align: center;
  background: rgba(139,92,246,.15);
  border-radius: 5px;
  padding: 5px 8px;
}

.em-prev-hint {
  font-size: 10px;
  color: #475569;
  line-height: 1.5;
  text-align: center;
  padding: 4px 0 0;
}
.em-prev-hint code {
  font-family: 'Courier New', monospace;
  color: #64748b;
  font-size: 10px;
}

/* Preview banner (bottom of screen) */
#em-prev-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #7c3aed;
  color: #fff;
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  z-index: 999998;
  box-shadow: 0 4px 20px rgba(124,58,237,.5);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
#em-prev-banner button {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
#em-prev-banner button:hover { background: rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 4 — HTML / CSS CODE EDITOR
═══════════════════════════════════════════════════════════════ */
#em-code-dlg {
  position: fixed;
  inset: 88px 0 0 0;
  background: #0f172a;
  z-index: 99995;
  display: none;
  flex-direction: column;
  font-family: 'Courier New', monospace;
}
#em-code-dlg.open { display: flex; }

.em-code-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 46px;
  background: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,.1);
  gap: 10px;
  flex-shrink: 0;
}
.em-code-tabs {
  display: flex;
  gap: 4px;
}
.em-code-tab {
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.em-code-tab--on {
  background: #3b82f6;
  color: #fff;
  border-color: transparent;
}
.em-code-tab:hover:not(.em-code-tab--on) { background: rgba(255,255,255,.12); color: #e2e8f0; }
.em-code-tpl-badge {
  font-size: 11px;
  color: #a78bfa;
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: 'Courier New', monospace;
}
.em-code-act {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: filter .15s;
}
.em-code-act:hover { filter: brightness(.9); }
.em-code-act--apply   { background: #22c55e; color: #fff; }
.em-code-act--refresh { background: rgba(255,255,255,.08); color: #94a3b8; border: 1px solid rgba(255,255,255,.15); }
.em-code-act--refresh:hover { background: rgba(255,255,255,.15) !important; color: #e2e8f0; }
.em-code-act--close   { background: rgba(255,255,255,.1); color: #e2e8f0; border: 1px solid rgba(255,255,255,.2); }

.em-code-sub {
  padding: 6px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #64748b;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.em-code-pane {
  flex: 1;
  display: flex;
  min-height: 0;
}
.em-code-ta {
  width: 100%;
  height: 100%;
  background: #0f172a;
  color: #e2e8f0;
  border: none;
  padding: 16px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
  resize: none;
  outline: none;
  tab-size: 2;
}
.em-code-ta:focus { outline: none; }
.em-code-ta::selection { background: #3b82f6; color: #fff; }

/* ── Help button ────────────────────────────────────────────── */
.em-bar-btn--help {
  background: rgba(56,189,248,.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56,189,248,.3) !important;
}
.em-bar-btn--help:hover { background: rgba(56,189,248,.22) !important; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 5 — HELP / TUTORIAL PANEL
═══════════════════════════════════════════════════════════════ */
#em-readme-dlg {
  position: fixed;
  top: 88px;
  right: 0;
  width: 460px;
  max-height: calc(100vh - 88px);
  background: #1e293b;
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: -6px 0 30px rgba(0,0,0,.5);
  z-index: 99994;
  display: none;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #e2e8f0;
  overflow: hidden;
}
#em-readme-dlg.open { display: flex; }

.em-rm-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
  gap: 8px;
}
.em-rm-hdr-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .12s;
}
.em-rm-hdr-btn:hover { background: rgba(255,255,255,.18); }

/* Intro text */
.em-rm-intro {
  padding: 12px 16px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Video section */
.em-rm-video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}
.em-rm-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.em-rm-video-ph {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.em-rm-video-ph-icon {
  width: 42px; height: 42px;
  background: rgba(239,68,68,.15);
  border: 2px solid rgba(239,68,68,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #ef4444;
  flex-shrink: 0;
}
.em-rm-video-ph b   { color: #e2e8f0; font-size: 12px; display: block; margin-bottom: 3px; }
.em-rm-video-ph small { font-size: 10px; color: #4b5563; line-height: 1.5; }
.em-rm-video-ph code { font-family: 'Courier New', monospace; font-size: 9.5px; color: #7dd3fc; }

/* Accordion */
.em-rm-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.em-rm-sec { border-bottom: 1px solid rgba(255,255,255,.06); }
.em-rm-sum {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: background .12s, color .12s;
}
.em-rm-sum::-webkit-details-marker { display: none; }
.em-rm-sum::before { content: '▶'; font-size: 9px; color: #475569; flex-shrink: 0; transition: transform .15s; }
details[open] > .em-rm-sum::before { transform: rotate(90deg); color: #38bdf8; }
.em-rm-sum:hover { background: rgba(255,255,255,.05); color: #fff; }
details[open] > .em-rm-sum { color: #38bdf8; background: rgba(56,189,248,.06); }

/* Body */
.em-rm-body {
  padding: 6px 14px 14px 14px;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.6;
}
.em-rm-body b    { color: #e2e8f0; font-weight: 600; }
.em-rm-body code {
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  padding: 1px 5px;
  color: #7dd3fc;
}

/* Numbered steps */
.em-rm-step {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  align-items: flex-start;
}
.em-rm-stepn {
  min-width: 20px; height: 20px;
  background: rgba(56,189,248,.15);
  border: 1px solid rgba(56,189,248,.3);
  border-radius: 50%;
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Tip box */
.em-rm-tip {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(251,191,36,.08);
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: #fcd34d;
  line-height: 1.55;
}

/* Screenshot */
.em-rm-img-wrap { margin-top: 10px; }
.em-rm-img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  display: block;
}
.em-rm-img-ph {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  color: #4b5563;
  box-sizing: border-box;
  margin-top: 10px;
}
.em-rm-img-ph span { display: block; font-weight: 600; color: #64748b; margin-bottom: 4px; }
.em-rm-img-ph small { font-family: 'Courier New', monospace; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 6 — DIRECTORY PANEL
═══════════════════════════════════════════════════════════════ */
#em-dir-dlg {
  position: fixed;
  top: 88px;
  left: 0;
  width: 320px;
  max-height: calc(100vh - 88px);
  background: #0f172a;
  border-right: 1px solid rgba(255,255,255,.1);
  box-shadow: 6px 0 30px rgba(0,0,0,.55);
  z-index: 99993;
  display: none;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #e2e8f0;
  overflow: hidden;
}
#em-dir-dlg.open { display: flex; }

.em-dir-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,.05);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  gap: 8px;
}
.em-dir-search {
  height: 26px;
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px;
  color: #e2e8f0;
  font-size: 11px;
  font-family: inherit;
  padding: 0 8px;
  outline: none;
  transition: border-color .15s;
}
.em-dir-search:focus { border-color: #a78bfa; background: rgba(167,139,250,.12); }
.em-dir-search::placeholder { color: rgba(255,255,255,.3); }

.em-dir-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* Platform section */
.em-dir-sec { border-bottom: 1px solid rgba(255,255,255,.05); }
.em-dir-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .12s;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}
.em-dir-sum::-webkit-details-marker { display: none; }
.em-dir-sum::before { content:'▶'; font-size:9px; color:#4b5563; flex-shrink:0; transition:transform .15s; }
details[open] > .em-dir-sum::before { transform:rotate(90deg); }
.em-dir-sum:hover { background: rgba(255,255,255,.05); color: #fff; }
details[open] > .em-dir-sum { color: #fff; }

.em-dir-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.em-dir-icon { font-size:14px; flex-shrink:0; }
.em-dir-plabel { flex: 1; }
.em-dir-count {
  font-size: 10px;
  font-weight: 700;
  color: #4b5563;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 1px 6px;
}

/* Page groups */
.em-dir-grp { padding: 2px 0; }
.em-dir-grp--mng { border-top: 1px solid rgba(255,255,255,.05); margin-top: 2px; }
.em-dir-grp-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4b5563;
  padding: 4px 12px 2px 28px;
}

/* Individual page row */
.em-dir-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 28px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 11.5px;
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
}
.em-dir-row:hover { background: rgba(255,255,255,.07); color: #e2e8f0; }
.em-dir-row--cur  { color: #38bdf8 !important; font-weight: 600; background: rgba(56,189,248,.08) !important; }
.em-dir-row--manage { padding-left: 36px; }
.em-dir-row-icon  { font-size: 11px; flex-shrink: 0; opacity: .6; }
.em-dir-row-path  {
  margin-left: auto;
  font-size: 10px;
  color: #374151;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}
.em-dir-row:hover .em-dir-row-path { color: #6b7280; }

.em-dir-empty {
  padding: 24px;
  text-align: center;
  color: #4b5563;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   STEPS PANEL — bottom sheet
═══════════════════════════════════════════════════════════════ */
.em-bar-btn--steps {
  background: rgba(6,182,212,.12) !important;
  color: #22d3ee !important;
  border-color: rgba(6,182,212,.3) !important;
}
.em-bar-btn--steps:hover { background: rgba(6,182,212,.24) !important; }

#em-steps-dlg {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 48vh;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -6px 30px rgba(0,0,0,.6);
  z-index: 99992;
  display: none;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #e2e8f0;
  overflow: hidden;
}
#em-steps-dlg.open { display: flex; }

.em-steps-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
  font-size: 13px; font-weight: 700; gap: 8px;
}
.em-steps-count { font-size: 11px; color: #64748b; font-weight: 400; }

/* Branches bar */
.em-steps-branches {
  padding: 8px 12px; background: rgba(139,92,246,.08);
  border-bottom: 1px solid rgba(139,92,246,.2); flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.em-branch-title { font-size: 11px; font-weight: 700; color: #a78bfa; width: 100%; }
.em-branch-row   { display: flex; align-items: center; gap: 6px; }
.em-branch-lbl   { font-size: 11px; color: #94a3b8; }

/* Steps list */
.em-steps-body {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.em-steps-empty {
  padding: 24px; text-align: center; color: #374151; font-size: 12px;
}
.em-steps-row {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.em-steps-row:hover { background: rgba(255,255,255,.03); }
.em-steps-row--cur  { background: rgba(56,189,248,.06) !important; }
.em-steps-row--future { opacity: .45; }

.em-steps-main {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; cursor: pointer; flex-wrap: wrap;
}
.em-steps-num {
  min-width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #64748b;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.em-steps-row--cur .em-steps-num { background: #38bdf8; color: #0f172a; }
.em-steps-el   { font-family: 'Courier New',monospace; font-size: 11px; color: #7dd3fc; flex-shrink: 0; }
.em-steps-now  { font-size: 10px; font-weight: 700; color: #38bdf8; }
.em-steps-chip {
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 10px; flex-shrink: 0;
}
.em-steps-chip--style  { background: rgba(99,102,241,.25); color: #a5b4fc; }
.em-steps-chip--text   { background: rgba(34,197,94,.2);   color: #86efac; }
.em-steps-chip--html   { background: rgba(245,158,11,.2);  color: #fcd34d; }
.em-steps-chip--move   { background: rgba(236,72,153,.2);  color: #f9a8d4; }
.em-steps-chip--other  { background: rgba(255,255,255,.08);color: #94a3b8; }

.em-steps-acts { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.em-steps-btn  {
  height: 24px; padding: 0 8px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
  background: rgba(255,255,255,.07); color: #94a3b8;
  font-size: 10px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .12s; white-space: nowrap;
}
.em-steps-btn:hover         { background: rgba(255,255,255,.15); color: #e2e8f0; }
.em-steps-btn--cb           { background: rgba(139,92,246,.2) !important; color: #a78bfa !important; border-color: rgba(139,92,246,.4) !important; }
.em-steps-btn--cb:hover     { background: rgba(139,92,246,.35) !important; }
.em-steps-btn--cp           { background: rgba(34,197,94,.18) !important; color: #86efac !important; border-color: rgba(34,197,94,.35) !important; }
.em-steps-btn--cp:hover     { background: rgba(34,197,94,.3) !important; }

/* Before/After diff */
.em-steps-diff { padding: 0 14px 10px; }
.em-diff-wrap  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.em-diff-col   { display: flex; flex-direction: column; gap: 3px; }
.em-diff-lbl   { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.em-diff-lbl--b { background: rgba(239,68,68,.2); color: #fca5a5; }
.em-diff-lbl--a { background: rgba(34,197,94,.2); color: #86efac; }
.em-diff-code  {
  margin: 0; padding: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  font-size: 10.5px; font-family: 'Courier New',monospace;
  color: #cbd5e1; overflow-x: auto; white-space: pre-wrap;
  max-height: 120px; overflow-y: auto;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════
   CURSOR PANEL
═══════════════════════════════════════════════════════════════ */
.em-bar-btn--cursor {
  background: rgba(14,165,233,.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(14,165,233,.3) !important;
}
.em-bar-btn--cursor:hover { background: rgba(14,165,233,.24) !important; }

#em-cursor-dlg {
  position: fixed;
  top: 88px;
  left: 280px;  /* next to directory panel if open */
  width: 300px;
  max-height: calc(100vh - 88px);
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 99993;
  display: none;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #e2e8f0;
  overflow: hidden;
}
#em-cursor-dlg.open { display: flex; }

.em-curs-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(255,255,255,.06);
  font-size: 13px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.em-curs-body {
  overflow-y: auto; flex: 1; padding: 10px 12px;
  scrollbar-width: thin;
}
.em-curs-sec-title {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px;
}
.em-curs-presets {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
.em-curs-preset {
  padding: 3px 8px; font-size: 10px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  color: #94a3b8; cursor: pointer; font-family: inherit;
  transition: all .12s; white-space: nowrap;
}
.em-curs-preset:hover { background: rgba(56,189,248,.18); color: #38bdf8; border-color: rgba(56,189,248,.4); }
.em-curs-scope {
  flex: 1; height: 28px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px; background: rgba(255,255,255,.07);
  color: #94a3b8; font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.em-curs-scope--on { background: #0ea5e9 !important; color: #fff !important; border-color: transparent !important; }
.em-curs-upload-btn {
  width: 100%; height: 28px; background: #22c55e; color: #fff;
  border: none; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.em-curs-upload-btn:hover { filter: brightness(.9); }
.em-curs-preview {
  margin-top: 8px; padding: 6px 8px;
  background: rgba(255,255,255,.05); border-radius: 5px;
  display: flex; align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   DISPLAY SIZE PICKER
═══════════════════════════════════════════════════════════════ */
#em-size-dlg {
  position: fixed;
  top: 88px;
  right: 12px;
  width: 280px;
  max-height: calc(100vh - 100px);
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  z-index: 99993;
  display: none;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
  overflow: hidden;
}
#em-size-dlg.open { display: flex; }
.em-size-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(255,255,255,.06);
  font-size: 13px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.em-size-body { overflow-y: auto; flex: 1; padding: 10px 12px; }
.em-size-cat {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 10px 0 5px;
}
.em-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.em-size-preset {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 6px 9px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  color: #cbd5e1; cursor: pointer; font-family: inherit; text-align: left;
  transition: all .12s;
}
.em-size-preset:hover { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.4); }
.em-size-preset--on   { background: #3b82f6 !important; border-color: transparent !important; color: #fff !important; }
.em-size-preset--full { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
.em-size-name { font-size: 11px; font-weight: 600; }
.em-size-dim  { font-size: 9.5px; color: #64748b; font-family: 'Courier New', monospace; }
.em-size-preset:hover .em-size-dim, .em-size-preset--on .em-size-dim { color: inherit; opacity: .8; }
.em-size-custom { display: flex; align-items: center; gap: 5px; }
.em-size-custom input {
  width: 100%; min-width: 0; height: 28px; padding: 0 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px; color: #e2e8f0; font-size: 11px; font-family: inherit; outline: none;
}
.em-size-custom input:focus { border-color: #3b82f6; }
.em-size-custom span { color: #64748b; font-size: 12px; }
.em-size-apply {
  height: 28px; padding: 0 12px; background: #3b82f6; color: #fff;
  border: none; border-radius: 5px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.em-size-apply:hover { filter: brightness(.9); }
.em-size-hint { font-size: 10px; color: #475569; margin-top: 8px; text-align: center; }

/* ── DB schema tool (header 🗄️ DB button + modal) ─────────── */
.em-bar-btn--db { background:#8b5cf6; color:#fff; border-color:transparent; }
.em-bar-btn--build { background:#0ea5e9; color:#fff; border-color:transparent; }
.em-modal-ov { position:fixed; inset:0; z-index:2147483600; background:rgba(15,23,42,.55);
  display:flex; align-items:flex-start; justify-content:center; padding:60px 16px; }
.em-modal { background:#fff; color:#0f172a; border-radius:14px; width:640px; max-width:96vw;
  box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; font:13px/1.5 system-ui,sans-serif; }
.em-modal-hd { display:flex; align-items:center; gap:6px; padding:14px 16px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; }
.em-modal-hd b { font-size:15px; }
.em-modal-x { margin-left:auto; border:none; background:none; font-size:16px; cursor:pointer; color:#64748b; }
.em-modal-bd { padding:16px; max-height:72vh; overflow:auto; }
.em-db-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.em-db-row label { width:80px; font-weight:700; color:#475569; }
.em-db-row select { flex:1; padding:7px 9px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; }
.em-db-cols { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; }
.em-db-cols-lbl { width:100%; font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; }
.em-db-col { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:3px 8px; font-size:12px; }
.em-db-col i { color:#8b5cf6; font-style:normal; }
.em-db-tabs { display:flex; gap:6px; border-bottom:1px solid #e2e8f0; margin-bottom:14px; }
.em-db-tab { border:none; background:none; padding:8px 14px; cursor:pointer; font-weight:700; color:#64748b; border-bottom:2px solid transparent; }
.em-db-tab--on { color:#8b5cf6; border-bottom-color:#8b5cf6; }
.em-db-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.em-db-grid label { display:flex; flex-direction:column; gap:4px; font-weight:700; color:#475569; font-size:12px; }
.em-db-grid input, .em-db-grid select { padding:7px 9px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; font-weight:400; }
.em-db-chk { flex-direction:row !important; align-items:center; }
.em-db-chk input { width:auto; }
.em-db-msg { margin-top:12px; font-size:12px; font-family:ui-monospace,monospace; word-break:break-all; color:#64748b; }
.em-db-msg--ok { color:#059669; }
.em-db-msg--err { color:#dc2626; }