/* JV Inline Editor styles — scoped under .jv-* so they never clash with a page. */

/* ── Back to Control Center ──────────────────────────────────────────────── */
.jv-home-btn {
  position: fixed; right: 16px; bottom: 66px; z-index: 2147483000;
  background: #111; color: #fff; border: 1px solid #333; border-radius: 999px;
  font: 700 13px/1 system-ui, -apple-system, sans-serif; text-decoration: none;
  padding: 11px 16px; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.jv-home-btn:hover { background: #1c1c1c; border-color: #05aa00; color: #7fe08a; }
.jv-toolbar .jv-tb-home {
  color: #9fc6ff; text-decoration: none; font: 700 12px/1 system-ui, sans-serif;
  border: 1px solid #2a3a52; background: #16233a; border-radius: 7px; padding: 7px 11px; white-space: nowrap;
}
.jv-toolbar .jv-tb-home:hover { background: #1d2f4d; color: #cfe3ff; }

/* ── Grouped toolbar (clean bar + expandable popover menus) ──────────────── */
.jv-toolbar .jv-tb-brand { font-weight: 800; color: #fff; margin-right: 4px; letter-spacing: .2px; }
.jv-grp { position: relative; display: inline-flex; }
.jv-grp-btn {
  background: #232323; color: #e9e9e9; border: 1px solid #3a3a3a; border-radius: 8px;
  padding: 8px 13px; font: 600 12.5px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.jv-grp-btn:hover { background: #2e2e2e; }
.jv-grp-btn.active { background: #05aa00; color: #fff; border-color: #05aa00; }
.jv-pop {
  position: absolute; bottom: calc(100% + 9px); left: 0; z-index: 2147483005;
  display: none; flex-direction: column; gap: 9px; min-width: 244px; max-width: 92vw;
  background: #1b1b1b; border: 1px solid #353535; border-radius: 11px; padding: 13px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
.jv-pop.open { display: flex; }
.jv-pop-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jv-pop-lbl { color: #8a8a8a; font: 600 11px/1 system-ui, -apple-system, sans-serif; min-width: 54px; }
.jv-pop-sep { border-top: 1px solid #333; height: 0; margin: 1px 0; }
.jv-pop .jv-font, .jv-pop .jv-scope, .jv-pop .jv-variant { flex: 1; min-width: 120px; }
.jv-pop .jv-danger { background: #3a1b1b; color: #ff9b9b; border-color: #5a2a2a; }
.jv-pop .jv-danger:hover { background: #e53935; color: #fff; border-color: #e53935; }
/* Primary action stands out */
.jv-toolbar .jv-primary { background: #05aa00; color: #fff; border-color: #05aa00; font-weight: 800; }
.jv-toolbar .jv-primary:hover { background: #06c400; }

/* Device view toggle (segmented) */
.jv-view { display: inline-flex; background: #232323; border: 1px solid #3a3a3a; border-radius: 8px; overflow: hidden; }
.jv-view-btn { background: transparent; color: #cfcfcf; border: 0; padding: 7px 11px; font-size: 14px; cursor: pointer; line-height: 1; }
.jv-view-btn:hover { background: #2e2e2e; }
.jv-view-btn.active { background: #05aa00; color: #fff; }

/* Editable mobile canvas (full editor at phone width, scaled up to work in) */
.jv-preview-overlay {
  position: fixed; inset: 0; z-index: 2147483010;
  background: rgba(0,0,0,.86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
}
.jv-preview-topbar {
  flex: none; height: 48px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px;
  background: #141414; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font: 600 13px Inter, system-ui, sans-serif;
}
.jv-me-title b { color: #4CAF50; }
.jv-preview-zoom { display: inline-flex; gap: 4px; }
.jv-preview-zoom button {
  width: 30px; height: 30px; border: 1px solid #3a3a3a; background: #232323; color: #fff;
  border-radius: 7px; font-size: 16px; line-height: 1; cursor: pointer;
}
.jv-preview-zoom button:hover { background: #2e2e2e; }
.jv-preview-close {
  background: #05aa00; color: #fff; border: 0; border-radius: 7px;
  padding: 9px 14px; font: 700 12.5px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.jv-preview-close:hover { background: #06c400; }
/* Middle stage holds the centered phone canvas */
.jv-preview-stage { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.jv-preview-phone {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1); transform-origin: center center;
  width: 390px; height: min(70vh, 700px);
  background: #000; border: 11px solid #0a0a0a; border-radius: 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7); overflow: hidden;
}
.jv-preview-frame { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #000; display: block; }

/* Big-screen control panel — drives the phone canvas via window.__jvME */
.jv-me-panel {
  flex: none; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px;
  padding: 10px 14px; background: #141414; border-top: 1px solid rgba(255,255,255,.12);
  color: #e8e8e8; font: 600 12.5px Inter, system-ui, sans-serif;
}
.jv-me-panel.jv-me-loading { opacity: .45; pointer-events: none; }
.jv-me-grp { display: inline-flex; align-items: center; gap: 5px; padding-right: 9px; border-right: 1px solid rgba(255,255,255,.09); }
.jv-me-lbl { color: #9aa19a; font-size: 11px; margin-left: 5px; }
.jv-me-spacer { flex: 1; min-width: 8px; }
.jv-me-scope-wrap { display: inline-flex; align-items: center; gap: 6px; color: #9aa19a; }
.jv-me-sel { color: #9aa19a; min-width: 116px; }
.jv-me-sel.on { color: #fff; }
.jv-me-btn {
  height: 32px; min-width: 32px; padding: 0 9px; border: 1px solid #3a3a3a; background: #232323; color: #fff;
  border-radius: 8px; font: 600 13px Inter, system-ui, sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.jv-me-btn:hover { background: #2e2e2e; }
.jv-me-btn.on { background: #05aa00; border-color: #05aa00; color: #04140a; }
.jv-me-danger:hover { background: #7a2a2a; border-color: #a44; }
.jv-me-primary { background: #05aa00; border-color: #05aa00; color: #04140a; font-weight: 800; }
.jv-me-primary:hover { background: #06c400; }
.jv-me-font, .jv-me-scope { height: 32px; background: #232323; color: #fff; border: 1px solid #3a3a3a; border-radius: 8px; padding: 0 7px; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; }
.jv-me-swatches { display: inline-flex; gap: 4px; }
.jv-me-sw { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.28); cursor: pointer; padding: 0; }
.jv-me-sw:hover { transform: scale(1.12); }
.jv-me-ins-wrap { position: relative; }
.jv-me-insmenu {
  position: absolute; bottom: 40px; left: 0; min-width: 152px; display: none; flex-direction: column; gap: 3px;
  background: #1c1c1c; border: 1px solid #333; border-radius: 10px; padding: 6px; z-index: 6; box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.jv-me-ins-wrap.open .jv-me-insmenu { display: flex; }
.jv-me-insmenu button { text-align: left; background: none; border: 0; color: #e8e8e8; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: 600 13px Inter, system-ui, sans-serif; }
.jv-me-insmenu button:hover { background: #2a2a2a; }

/* Inside the phone canvas, the editor's own chrome is hidden — controls live on the big screen */
body.jv-mecanvas .jv-toolbar,
body.jv-mecanvas .jv-launcher,
body.jv-mecanvas .jv-home-btn { display: none !important; }

.jv-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
  background: #111; color: #fff; border: none; border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  padding: 11px 16px; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.jv-launcher:hover { background: #000; }

.jv-toolbar {
  position: fixed; bottom: 0; top: auto; left: 0; right: 0; z-index: 2147483001;
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #141414; color: #e5e5e5; padding: 8px 12px;
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 -2px 14px rgba(0,0,0,.35);
}
body.jv-editing .jv-toolbar { display: flex; }
/* Toolbar lives at the BOTTOM so the site's own top nav stays visible & usable. */
body.jv-editing { padding-bottom: 120px; }

.jv-toolbar .jv-tb-brand {
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  font-size: 10px; color: #05aa00; padding-right: 4px;
}
.jv-toolbar select.jv-font {
  background: #262626; color: #fff; border: 1px solid #3a3a3a; border-radius: 6px;
  padding: 6px 8px; font: 500 12px system-ui, sans-serif; max-width: 150px;
}
/* Inline "Add a question" button shown under the FAQ list while editing. */
.jv-faq-adder {
  display: block; width: 100%; margin: 18px 0 6px; padding: 14px;
  background: rgba(76,175,80,.10); border: 1.5px dashed rgba(76,175,80,.65);
  color: #4CAF50; border-radius: 10px; cursor: pointer;
  font: 800 13px/1 'Montserrat', system-ui, sans-serif; letter-spacing:.4px;
}
.jv-faq-adder:hover { background: rgba(76,175,80,.2); border-color:#4CAF50; }
/* Per-FAQ Duplicate / Delete controls (edit mode only). */
.jv-faq-tools { display:flex; gap:8px; margin:4px 0 16px; }
.jv-faq-tools button {
  background: rgba(76,175,80,.12); border: 1px solid rgba(76,175,80,.5); color:#4CAF50;
  border-radius:7px; padding:6px 13px; cursor:pointer;
  font: 700 12px/1 'Montserrat', system-ui, sans-serif; letter-spacing:.3px;
}
.jv-faq-tools button:hover { background: rgba(76,175,80,.22); }
.jv-faq-tools .jv-faq-del { background: rgba(229,57,53,.10); border-color: rgba(229,57,53,.5); color:#e57373; }
.jv-faq-tools .jv-faq-del:hover { background: rgba(229,57,53,.2); }
.jv-toolbar select.jv-variant {
  background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 6px;
  padding: 6px 8px; font: 800 12px system-ui, sans-serif; cursor: pointer;
}
/* Editing Variant B → a clear blue cue across the toolbar so you never confuse versions. */
.jv-toolbar.jv-variant-b { box-shadow: inset 0 3px 0 0 #3b82f6; }
.jv-toolbar.jv-variant-b select.jv-variant { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.jv-toolbar.jv-variant-b.jv-scoped { box-shadow: inset 0 3px 0 0 #3b82f6, inset 0 6px 0 0 #f59e0b; }
.jv-toolbar select.jv-scope {
  background: #1f2937; color: #fff; border: 1px solid #374151; border-radius: 6px;
  padding: 6px 8px; font: 700 12px system-ui, sans-serif; cursor: pointer;
}
/* When an edit scope other than "All" is active, tint the toolbar so it's obvious
   that new edits are device-specific. */
.jv-toolbar.jv-scoped { box-shadow: inset 0 3px 0 0 #f59e0b; }
.jv-toolbar.jv-scoped select.jv-scope { background: #f59e0b; color: #111; border-color: #f59e0b; }
.jv-size-wrap { display: inline-flex; align-items: center; background: #262626; border: 1px solid #3a3a3a; border-radius: 6px; overflow: hidden; }
.jv-size-wrap .jv-step { background: transparent; color: #cfcfcf; border: none; width: 26px; height: 30px; font-size: 16px; cursor: pointer; }
.jv-size-wrap .jv-step:hover { background: #333; }
.jv-input-size { width: 44px; height: 30px; background: transparent; color: #fff; border: none; border-left: 1px solid #3a3a3a; border-right: 1px solid #3a3a3a; text-align: center; font: 500 12px system-ui, sans-serif; }
.jv-input-size::-webkit-outer-spin-button, .jv-input-size::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.jv-toolbar .jv-btn {
  background: #262626; color: #e5e5e5; border: 1px solid #3a3a3a; border-radius: 6px;
  padding: 7px 10px; cursor: pointer; font: 600 12px system-ui, sans-serif; min-height: 30px;
}
.jv-toolbar .jv-btn:hover { background: #333; }
.jv-toolbar .jv-btn.on { background: #05aa00; color: #000; border-color: #05aa00; }

.jv-color-wrap { display: inline-flex; align-items: center; gap: 6px; }
.jv-color { width: 30px; height: 30px; padding: 0; border: 1px solid #3a3a3a; border-radius: 6px; background: #262626; cursor: pointer; }
.jv-swatches { display: inline-flex; gap: 3px; }
.jv-sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.jv-sw:hover { transform: scale(1.12); }

.jv-aligns { display: inline-flex; gap: 3px; }
.jv-spacer { flex: 1 1 auto; }
.jv-status { font-size: 11px; color: #9ca3af; min-width: 10px; transition: opacity .2s; opacity: 0; }
.jv-status.show { opacity: 1; color: #05aa00; }

.jv-toolbar .jv-publish { background: #05aa00; color: #000; border-color: #05aa00; font-weight: 800; }
.jv-toolbar .jv-publish:hover { background: #049200; }
.jv-toolbar .jv-done { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.jv-toolbar .jv-discard { color: #f4a3a3; border-color: #5a2a2a; background: #2a1818; }

/* Editable highlighting (edit mode only) — dashed outline marks editable TEXT;
   the solid outline marks whatever is currently selected (text OR a container). */
body.jv-editing [data-etext] { outline: 1px dashed rgba(5,170,0,.4); outline-offset: 2px; border-radius: 2px; cursor: text; transition: outline-color .12s; }
body.jv-editing [data-etext]:hover { outline-color: rgba(5,170,0,.85); }
body.jv-editing .jv-active { outline: 2px solid #05aa00 !important; outline-offset: 2px; background: rgba(5,170,0,.06); }
body.jv-editing [data-etext]:focus { outline: 2px solid #05aa00; }

/* Select-parent + Remove controls */
.jv-toolbar .jv-sep { width: 1px; height: 24px; background: #3a3a3a; margin: 0 4px; }
.jv-toolbar .jv-selinfo { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9ca3af; min-width: 46px; text-align: center; }
.jv-toolbar .jv-parent { background: #1c2333; color: #9fc0ff; border-color: #2c3a55; }
.jv-toolbar .jv-parent:hover { background: #243150; }
.jv-toolbar .jv-remove { background: #2a1818; color: #f4a3a3; border-color: #5a2a2a; }
.jv-toolbar .jv-remove:hover { background: #3a1f1f; color: #ffbcbc; }

/* Block-builder controls */
.jv-toolbar .jv-add { background: #05aa00; color: #fff; border-color: #05aa00; font-weight: 800; }
.jv-toolbar .jv-add:hover { background: #049200; }
.jv-toolbar .jv-dup { background: #1c2333; color: #9fc0ff; border-color: #2c3a55; }
.jv-toolbar .jv-dup:hover { background: #243150; }
.jv-toolbar .jv-moveup, .jv-toolbar .jv-movedown { min-width: 30px; font-size: 14px; line-height: 1; }
.jv-toolbar .jv-spacegrp { display: inline-flex; align-items: center; gap: 3px; }
.jv-toolbar .jv-splabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; padding: 0 2px; }
.jv-toolbar .jv-spacegrp .jv-btn { min-width: 26px; padding: 7px 8px; }

.jv-addmenu { position: fixed; z-index: 2147483002; display: none; flex-direction: column; min-width: 168px;
  background: #1b1b1b; border: 1px solid #333; border-radius: 10px; padding: 6px; box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.jv-addmenu.open { display: flex; }
.jv-addmenu button { text-align: left; background: transparent; color: #e5e5e5; border: none; border-radius: 6px;
  padding: 9px 12px; font: 600 13px/1 system-ui, -apple-system, sans-serif; cursor: pointer; }
.jv-addmenu button:hover { background: #05aa00; color: #fff; }

/* Inserted / duplicated blocks get a blue dashed outline so they're easy to spot */
body.jv-editing [data-ins] { outline: 1px dashed rgba(37,99,235,.55) !important; outline-offset: 2px; }
body.jv-editing [data-ins].jv-active { outline: 2px solid #2563eb !important; }

/* Reload-from-live (recover from a stuck draft) */
.jv-toolbar .jv-synclive { background: #0e2a14; color: #7fe08a; border-color: #1f5a2e; font-weight: 700; }
.jv-toolbar .jv-synclive:hover { background: #143a1c; }

/* Undo / redo */
.jv-toolbar .jv-undo, .jv-toolbar .jv-redo { background: #222; color: #cfe3ff; border-color: #3a3a3a; font-weight: 700; }
.jv-toolbar .jv-undo:hover:not(:disabled), .jv-toolbar .jv-redo:hover:not(:disabled) { background: #2c2c2c; }
.jv-toolbar .jv-btn:disabled { opacity: .38; cursor: default; }

/* Reveal normally-hidden sections so their text can be edited */
.jv-force-show { display: block !important; }

/* Prominent publish result banner */
.jv-result {
  position: fixed; left: 50%; transform: translateX(-50%); top: 64px; z-index: 2147483002;
  display: flex; align-items: center; gap: 14px;
  font: 600 14px/1.4 system-ui, -apple-system, sans-serif;
  padding: 14px 18px; border-radius: 12px; max-width: 92vw;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); animation: jvpop .2s ease;
}
.jv-result.ok { background: #05aa00; color: #fff; }
.jv-result.err { background: #b91c1c; color: #fff; }
.jv-result .jv-result-x {
  background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 6px;
  width: 24px; height: 24px; font-size: 16px; cursor: pointer; line-height: 1; flex: none;
}
.jv-result .jv-result-x:hover { background: rgba(255,255,255,.35); }
@keyframes jvpop { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── In-place hover tools (quick delete / duplicate / move per block) ─────── */
.jv-hover-tools {
  position: fixed; z-index: 2147483600; display: none; gap: 4px;
  transform: translateX(-100%);
  background: rgba(15,15,15,.94); border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.jv-hover-tools.show { display: flex; }
.jv-hover-tools .jv-ht {
  width: 30px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.09); color: #fff; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
}
.jv-hover-tools .jv-ht:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.jv-hover-tools .jv-ht-del { background: rgba(229,57,53,.24); }
.jv-hover-tools .jv-ht-del:hover { background: #e53935; }
/* outline the block the icons will act on */
body.jv-editing .jv-hovered { outline: 2px dashed rgba(76,175,80,.75); outline-offset: 2px; }
body.jv-editing .transform-img.jv-hovered { outline: 2px solid rgba(229,57,53,.85); outline-offset: -2px; }

/* ── Drag-and-drop reorder (images + sections) ───────────────────────────── */
.transforms-grid .jv-draggable { cursor: grab; }
.transforms-grid .jv-draggable:active { cursor: grabbing; }
.jv-hover-tools .jv-ht-drag { cursor: grab; }
.jv-hover-tools .jv-ht-drag:active { cursor: grabbing; }
body.jv-editing .jv-dragging { opacity: .4; outline: 2px solid #05aa00; outline-offset: -2px; }
body.jv-editing .jv-drop-before { box-shadow: 0 -6px 0 -2px #05aa00; }
body.jv-editing .jv-drop-after  { box-shadow: 0 6px 0 -2px #05aa00; }
body.jv-editing .jv-swap-target { outline: 3px solid #05aa00; outline-offset: -3px; box-shadow: 0 0 0 4px rgba(5,170,0,.35); }

/* ── Section outlines + per-section toolbar ──────────────────────────────── */
body.jv-editing section { position: relative; outline: 2px dashed rgba(76,175,80,.5); outline-offset: -2px; }
.jv-section-tools {
  position: absolute; top: 8px; left: 8px; z-index: 60;
  display: flex; align-items: center; gap: 5px; max-width: calc(100% - 16px);
  background: rgba(5,170,0,.96); color: #fff;
  font: 600 12px/1 Inter, Montserrat, sans-serif;
  padding: 5px 6px; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.jv-section-tools .jv-sec-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px; opacity: .95; padding: 0 2px;
}
.jv-section-tools .jv-sec-btn {
  border: 0; border-radius: 5px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.18); padding: 4px 8px; font: inherit; line-height: 1; flex: none;
}
.jv-section-tools .jv-sec-btn:hover { background: rgba(255,255,255,.34); }
.jv-section-tools .jv-sec-drag { cursor: grab; }
.jv-section-tools .jv-sec-drag:active { cursor: grabbing; }
.jv-section-tools .jv-sec-del:hover { background: #e53935; }

/* ── Section navigator panel (drag little blocks to reorder big sections) ── */
.jv-outline-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 2147483600; display: none;
  background: #05aa00; color: #fff; border: 0; border-radius: 8px;
  font: 700 13px Inter, sans-serif; padding: 11px 15px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.jv-outline-toggle:hover { background: #06c400; }
body.jv-editing .jv-outline-toggle { display: block; }
.jv-outline {
  position: fixed; top: 0; right: 0; height: 100vh; width: 310px; max-width: 86vw;
  background: #141414; border-left: 1px solid rgba(255,255,255,.12);
  z-index: 2147483601; transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.5);
}
.jv-outline.open { transform: translateX(0); }
.jv-outline-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font: 700 13px Inter, sans-serif; flex: none;
}
.jv-outline-x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.jv-outline-list { overflow-y: auto; padding: 10px; flex: 1; }
.jv-outline-item {
  display: flex; align-items: center; gap: 8px; padding: 11px 10px; margin-bottom: 6px;
  background: #1f1f1f; border: 1px solid rgba(255,255,255,.08); border-radius: 7px;
  color: #eee; font: 600 12.5px Inter, sans-serif; cursor: grab; user-select: none;
}
.jv-outline-item:hover { background: #262626; }
.jv-outline-item:active { cursor: grabbing; }
.jv-oi-grip { color: #05aa00; flex: none; cursor: grab; font-size: 14px; }
.jv-oi-num { color: #777; flex: none; min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.jv-oi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.jv-oi-dragging { opacity: .45; }
.jv-oi-before { box-shadow: 0 -3px 0 -1px #05aa00; }
.jv-oi-after { box-shadow: 0 3px 0 -1px #05aa00; }