/* =====================================================
   Visual Editor Pro — editor.css  v1.1
   ===================================================== */

/* =====================================================
   Isolamento visual da UI do plugin — não depende do tema
   -----------------------------------------------------
   A UI do editor (toolbar, sidebar, modais, popovers) é inserida
   diretamente no <body> da página, junto com o CSS do tema ativo.
   Sem isso, dois vazamentos comuns aconteciam dependendo do tema:

   1) box-sizing: nem todo tema aplica box-sizing:border-box global.
      Sem esse reset em TODOS os nossos containers (antes só existia
      em #vep-sidebar), campos com padding/borda ficavam maiores do
      que o previsto em temas que não normalizam isso, e do tamanho
      certo em temas que normalizam — dando a impressão de "formato
      muda conforme o tema".
   2) fonte/cor/sublinhado nativos: <button>, <input>, <select>,
      <textarea>, <label>, <option> e <a> sem classe própria ficam
      sujeitos ao reset global de formulário/link do tema. O bloco
      :where(...) abaixo tem especificidade zero — só preenche essas
      propriedades quando nenhuma classe .vep-* mais abaixo já define
      algo (o CSS deste arquivo sempre vence), então nunca sobrescreve
      o visual próprio do plugin, só fecha a brecha por onde o tema
      entrava.
   ===================================================== */
#vep-toolbar, #vep-toolbar *,
#vep-sidebar, #vep-sidebar *,
#vep-modebar, #vep-modebar *,
#vep-device-bar, #vep-device-bar *,
#vep-preview-overlay, #vep-preview-overlay *,
#vep-shortcuts, #vep-shortcuts *,
#vep-compare-overlay, #vep-compare-overlay *,
#vep-video-modal, #vep-video-modal *,
#vep-ai-writer, #vep-ai-writer *,
.vep-toolbar-popover, .vep-toolbar-popover *,
.vep-toast, .vep-toast * {
    box-sizing: border-box;
}
:where(
    #vep-toolbar, #vep-sidebar, #vep-modebar, #vep-device-bar,
    #vep-preview-overlay, #vep-shortcuts, #vep-compare-overlay,
    #vep-video-modal, #vep-ai-writer, .vep-toolbar-popover, .vep-toast
) :is(button, input, select, textarea, label, option, a) {
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

/* Alguns temas aplicam reset de formulário com !important (ex.: "input,
   textarea, select { background:#fff !important }") para o próprio conteúdo
   do site. Como esse seletor por elemento também bate nos campos da nossa UI,
   ele vencia o background escuro do popover de IA e deixava o campo de texto
   branco sobre texto claro — ilegível. Força aqui, com a mesma prioridade
   (!important) e cobrindo todos os popups do plugin, um fundo/cor fixos que
   não dependem do tema. Regras mais específicas abaixo (ex.: #vep-sidebar
   input) continuam podendo customizar por cima — mesma especificidade de
   !important, cascata decide por especificidade/ordem, e elas são mais
   específicas ou vêm depois.  */
:where(
    #vep-toolbar, #vep-sidebar, #vep-modebar, #vep-device-bar,
    #vep-preview-overlay, #vep-shortcuts, #vep-compare-overlay,
    #vep-video-modal, #vep-ai-writer, .vep-toolbar-popover
) input:not([type="range"]):not([type="color"]):not([type="checkbox"]),
:where(
    #vep-toolbar, #vep-sidebar, #vep-modebar, #vep-device-bar,
    #vep-preview-overlay, #vep-shortcuts, #vep-compare-overlay,
    #vep-video-modal, #vep-ai-writer, .vep-toolbar-popover
) select,
:where(
    #vep-toolbar, #vep-sidebar, #vep-modebar, #vep-device-bar,
    #vep-preview-overlay, #vep-shortcuts, #vep-compare-overlay,
    #vep-video-modal, #vep-ai-writer, .vep-toolbar-popover
) textarea {
    background-color: #080c13 !important;
    color: #eef1f6 !important;
    color-scheme: dark;
}

/* ── Admin bar ──────────────────────────────────── */
#wpadminbar #wp-admin-bar-vep-open .ab-item {
    font-weight: 700;
    letter-spacing: .2px;
}
#wpadminbar #wp-admin-bar-vep-open.vep-bar-on .ab-item {
    background: #4338ca !important;
    color: #fff !important;
}

/* ── Edit mode ──────────────────────────────────── */
/* Don't change cursor on our own UI */
body.vep-mode :not(#vep-toolbar):not(#vep-toolbar *):not(#vep-sidebar):not(#vep-sidebar *):not(#wpadminbar):not(#wpadminbar *):not(.media-modal):not(.media-modal *):not(.media-frame):not(.media-frame *):not(.media-modal-backdrop):not(.vep-toolbar-popover):not(.vep-toolbar-popover *):not(#vep-ai-writer):not(#vep-ai-writer *):not(#vep-video-modal):not(#vep-video-modal *):not(#vep-compare-overlay):not(#vep-compare-overlay *) {
    cursor: crosshair !important;
}
/* But editable text should show text cursor */
body.vep-mode [data-vep-ce],
body.vep-mode [data-vep-ce] * {
    cursor: text !important;
}

/* Iframes consume pointer events in their own document. During editing only,
   pass the click to their wrapper so editor.js can select the real player. */
body.vep-mode [data-vep-media-select] {
    pointer-events: none !important;
}

/* Hover outline */
[data-vep-h]:not([data-vep-sel]):not(#vep-toolbar *):not(#vep-sidebar *) {
    outline: 2px dashed rgba(99,102,241,.5) !important;
    outline-offset: 1px !important;
}
/* Selected outline */
[data-vep-sel] {
    outline: 2px solid #6366f1 !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 5px rgba(99,102,241,.14) !important;
}
[data-vep-ce] { caret-color: #6366f1; }

/* Body shift for sidebar */
body.vep-mode {
    margin-right: 290px !important;
    transition: margin-right .22s;
}

/* ====================================================
   TOOLBAR
   ==================================================== */
#vep-toolbar {
    position: absolute;
    z-index: 999999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 5px 7px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    pointer-events: all;
    max-width: calc(100vw - 310px);
}

.vep-tb-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.vep-tb-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

.vep-tb-sep {
    width: 1px; height: 18px;
    background: rgba(255,255,255,.11);
    margin: 0 2px; flex-shrink: 0;
}

.vep-tb-numwrap {
    display: inline-flex; align-items: center; gap: 2px;
    color: #94a3b8; font-size: 11.5px;
}
.vep-tb-num {
    width: 42px; height: 26px;
    padding: 0 4px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    color: #e2e8f0; font-size: 12px;
    text-align: center; outline: none;
    -moz-appearance: textfield;
}
.vep-tb-num::-webkit-inner-spin-button { display: none; }

.vep-tb-select {
    height: 27px; padding: 0 5px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: #e2e8f0; font-size: 12px;
    font-family: inherit; cursor: pointer; outline: none;
    max-width: 110px;
}
.vep-tb-select:focus { border-color: #6366f1; }

.vep-tb-cpick {
    display: inline-flex; align-items: center; gap: 3px;
    color: #94a3b8; font-size: 12px;
    cursor: pointer; padding: 0 4px;
    height: 28px; border-radius: 6px;
    transition: background .12s;
}
.vep-tb-cpick:hover { background: rgba(255,255,255,.08); }
.vep-tb-color {
    width: 24px; height: 24px;
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 5px; cursor: pointer;
    padding: 0; background: none;
}

/* ====================================================
   SIDEBAR
   ==================================================== */
#vep-sidebar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 290px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border-left: 1px solid rgba(255,255,255,.08);
    box-shadow: -5px 0 30px rgba(0,0,0,.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    color: #cbd5e1;
    overflow: hidden;
    box-sizing: border-box;
}
#vep-sidebar * { box-sizing: border-box; }

/* Header */
.vep-sb-hdr {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    background: linear-gradient(135deg,#1e1b4b,#1e293b);
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-weight: 700; font-size: 13.5px; color: #e0e7ff;
    flex-shrink: 0;
}
.vep-sb-save {
    height: 30px; padding: 0 14px;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff; border: none; border-radius: 7px;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(99,102,241,.4);
    transition: all .15s;
}
.vep-sb-save:hover { background: linear-gradient(135deg,#818cf8,#6366f1); transform: translateY(-1px); }
.vep-sb-save:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Dirty pulse */
#vep-sidebar.vep-dirty .vep-sb-save {
    animation: vpulse 2s ease-in-out infinite;
}
@keyframes vpulse {
    0%,100%{ box-shadow:0 2px 7px rgba(99,102,241,.4); }
    50%    { box-shadow:0 0 0 8px rgba(99,102,241,0);  }
}

/* Tabs */
.vep-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.vep-tab {
    flex: 1; height: 34px;
    background: transparent;
    border: none; border-bottom: 2px solid transparent;
    color: #64748b; font-family: inherit;
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.vep-tab:hover  { color: #94a3b8; }
.vep-tab--on    { color: #c7d2fe; border-bottom-color: #6366f1; }

/* Hint */
.vep-hint {
    padding: 22px 16px;
    color: rgba(148,163,184,.45);
    font-size: 12.5px; text-align: center; line-height: 1.7;
}
.vep-inline-note {
    margin: 0 0 8px;
    padding: 6px 10px;
    background: rgba(99,102,241,.1);
    border-left: 2px solid #6366f1;
    font-size: 11.5px; color: #a5b4fc;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* Props scroll area */
.vep-props {
    flex: 1; overflow-y: auto; padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.09) transparent;
}
.vep-props::-webkit-scrollbar { width: 4px; }
.vep-props::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 4px; }

/* Element badge */
.vep-el-badge {
    padding: 7px 14px;
    font-size: 11px; color: rgba(148,163,184,.5);
    border-bottom: 1px solid rgba(255,255,255,.05);
    display: flex; align-items: center; gap: 8px;
}
.vep-el-badge code {
    font-family: "SF Mono", Consolas, monospace;
    background: rgba(255,255,255,.06);
    padding: 1px 5px; border-radius: 4px;
    color: #7dd3fc;
}
.vep-el-badge span { color: rgba(148,163,184,.35); font-size: 10px; }

/* Section heading */
.vep-sec {
    padding: 10px 14px 5px;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
    color: rgba(148,163,184,.4);
    border-top: 1px solid rgba(255,255,255,.05);
    margin-top: 4px;
}
.vep-sec:first-child { border-top: none; margin-top: 0; }

/* Prop row */
.vep-prop-row {
    display: flex; align-items: center;
    gap: 7px; padding: 6px 14px;
    flex-wrap: nowrap;
}
.vep-prop-lbl {
    flex-shrink: 0; width: 88px;
    font-size: 11.5px; color: rgba(148,163,184,.65);
    font-weight: 500;
}

/* Range */
.vep-rng {
    flex: 1; min-width: 60px;
    accent-color: #6366f1; cursor: pointer; height: 4px;
}
.vep-prop-val {
    min-width: 40px; text-align: right;
    font-size: 11.5px;
    font-family: "SF Mono", Consolas, monospace;
    color: #94a3b8;
}

/* Select */
.vep-prop-sel {
    flex: 1; height: 26px; padding: 0 5px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px; color: #e2e8f0;
    font-size: 12px; font-family: inherit;
    cursor: pointer; outline: none;
}
.vep-prop-sel:focus { border-color: #6366f1; }

/* Color row */
.vep-clr-row { flex-wrap: nowrap; }
.vep-swatch {
    width: 24px; height: 24px;
    border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,.15);
    flex-shrink: 0; cursor: pointer;
    transition: border-color .12s;
}
.vep-swatch:hover { border-color: rgba(255,255,255,.35); }
.vep-nat {
    width: 26px; height: 26px;
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 5px; padding: 0;
    background: none; cursor: pointer; flex-shrink: 0;
}
.vep-hex {
    flex: 1; height: 26px; padding: 0 7px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px; color: #e2e8f0;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 12px; letter-spacing: .3px;
    text-transform: uppercase; outline: none;
}
.vep-hex:focus { border-color: #6366f1; }

/* Align buttons */
.vep-align-grp { display: flex; gap: 3px; flex: 1; }
.vep-align-btn {
    flex: 1; height: 26px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px; color: #94a3b8;
    font-size: 13px; cursor: pointer;
    transition: all .12s;
}
.vep-align-btn:hover, .vep-align-btn.on {
    background: rgba(99,102,241,.22);
    border-color: #6366f1; color: #c7d2fe;
}

/* Background preview */
.vep-bg-prev, .vep-img-prev {
    display: block; max-width: 100%;
    max-height: 60px; border-radius: 6px;
    object-fit: cover; margin: 4px 0;
}

/* Prop button */
.vep-prop-btn {
    height: 27px; padding: 0 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px; color: #94a3b8;
    font-size: 12px; font-family: inherit;
    cursor: pointer; transition: all .12s;
    white-space: nowrap;
}
.vep-prop-btn:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.vep-btn-danger { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.25) !important; color: #fca5a5 !important; margin-top: 4px; }
.vep-btn-danger:hover { background: rgba(239,68,68,.18) !important; border-color: rgba(239,68,68,.5) !important; }

/* Clear BG button */
.vep-clear-btn {
    display: block;
    margin: 2px 14px 0;
    width: calc(100% - 28px); height: 26px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.22);
    border-radius: 7px; color: #fca5a5;
    font-size: 11.5px; font-family: inherit;
    cursor: pointer; transition: all .12s;
}
.vep-clear-btn:hover { background: rgba(239,68,68,.16); }

/* ── Code panel ───────────────────────────────── */
.vep-code-panel {
    flex: 1; display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Bug real (não é o tema): esta classe define display:flex com a MESMA
   especificidade da regra nativa do navegador "[hidden]{display:none}" (as
   duas contam como um seletor de classe). Como esta regra do plugin vem
   depois no cascade, ela vencia — a aba "Código" (e o texto "Modo avançado")
   ficava visível junto da aba Propriedades mesmo com o atributo hidden
   ativo, alternado pelas abas em switchTab(). O !important abaixo resolve
   isso pra qualquer elemento oculto dentro da UI do plugin, não só este —
   escopado às nossas próprias raízes pra não interferir em nada do tema. */
#vep-toolbar [hidden], #vep-sidebar [hidden], #vep-modebar [hidden],
#vep-device-bar [hidden], #vep-preview-overlay [hidden], #vep-shortcuts [hidden],
#vep-compare-overlay [hidden], #vep-video-modal [hidden], #vep-ai-writer [hidden],
.vep-toolbar-popover [hidden] {
    display: none !important;
}
.vep-code-note {
    padding: 8px 14px; margin: 0;
    font-size: 11.5px; color: rgba(148,163,184,.5);
    line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,.06);
}
.vep-code-ta {
    flex: 1; width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,.3);
    border: none; resize: none;
    color: #94a3b8;
    font-family: "SF Mono", Consolas, Monaco, monospace;
    font-size: 12px; line-height: 1.6;
    outline: none; tab-size: 2;
}
.vep-code-apply {
    margin: 8px 14px;
    height: 30px; padding: 0 14px;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff; border: none; border-radius: 7px;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.vep-code-apply:hover { background: linear-gradient(135deg,#818cf8,#6366f1); }

/* ── Status ───────────────────────────────────── */
.vep-status {
    padding: 7px 14px;
    font-size: 11.5px; color: rgba(148,163,184,.55);
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(0,0,0,.12); flex-shrink: 0;
    min-height: 30px;
}
.vep-status--ok   { color: #6ee7b7; }
.vep-status--warn { color: #fcd34d; }
.vep-status--err  { color: #fca5a5; }

/* Restore */
.vep-restore-btn {
    margin: 0 14px 10px;
    width: calc(100% - 28px); height: 28px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px; color: #475569;
    font-size: 12px; font-family: inherit;
    cursor: pointer; transition: all .12s; flex-shrink: 0;
}
.vep-restore-btn:hover { color: #94a3b8; background: rgba(255,255,255,.07); }

/* ── Toast ────────────────────────────────────── */
.vep-toast {
    position: fixed; bottom: 22px; left: 50%;
    transform: translateX(-50%) translateY(14px);
    z-index: 1000001;
    padding: 9px 20px;
    background: rgba(15,23,42,.97);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 100px; color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .28s, transform .28s;
    white-space: nowrap; backdrop-filter: blur(8px);
}
.vep-toast.on     { opacity:1; transform:translateX(-50%) translateY(0); }
.vep-toast--err   { border-color:rgba(239,68,68,.35); color:#fca5a5; }

/* ── Responsive ───────────────────────────────── */
@media(max-width:900px){
    body.vep-mode { margin-right:0 !important; }
    #vep-sidebar {
        top:auto; left:0; width:100%; height:52vh;
        border-top:1px solid rgba(255,255,255,.1);
        border-left:none; border-radius:18px 18px 0 0;
        box-shadow:0 -5px 30px rgba(0,0,0,.5);
    }
    #vep-toolbar { max-width:calc(100vw - 16px); }
}

/* =====================================================
   Visual Editor Pro v1.4 — UX polish and safer layout
   ===================================================== */
body.vep-mode {
    margin-right: 360px !important;
}
#vep-sidebar {
    width: 360px;
    background: #0b1220;
    border-left: 1px solid rgba(148,163,184,.16);
    box-shadow: -20px 0 60px rgba(2,6,23,.55);
}
.vep-sb-hdr {
    padding: 16px 18px;
    background: linear-gradient(135deg,#111827,#1e1b4b 55%,#312e81);
    font-size: 14px;
}
.vep-sb-save {
    min-width: 104px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg,#8b5cf6,#4f46e5);
    font-size: 13px;
}
.vep-tabs { background: rgba(15,23,42,.96); }
.vep-tab { height: 44px; font-size: 13px; }
.vep-tab--on { color: #fff; border-bottom-color: #8b5cf6; }
.vep-hint {
    margin: 18px;
    padding: 18px;
    border: 1px dashed rgba(148,163,184,.25);
    border-radius: 18px;
    background: rgba(15,23,42,.65);
    color: #cbd5e1;
}
.vep-props { padding: 10px 12px 18px; }
.vep-sec {
    margin: 14px 0 8px;
    padding: 10px 12px;
    border-top: 0;
    border-radius: 12px;
    background: rgba(148,163,184,.08);
    color: #c4b5fd;
    font-size: 10px;
}
.vep-prop-row {
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 14px;
    background: rgba(15,23,42,.72);
}
.vep-prop-lbl {
    width: 116px;
    color: #cbd5e1;
    font-size: 12px;
}
.vep-prop-val { color: #a5b4fc; }
.vep-el-badge {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(125,211,252,.16);
    border-radius: 14px;
    background: rgba(14,165,233,.08);
}
.vep-inline-note {
    border-left: 0;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(99,102,241,.14);
}
.vep-rng { min-width: 112px; }
.vep-nat, .vep-hex, .vep-sel, .vep-code-ta, .vep-tb-num, .vep-tb-select {
    border-color: rgba(148,163,184,.22) !important;
    background: rgba(2,6,23,.55) !important;
    color: #e5e7eb !important;
    border-radius: 10px !important;
}
.vep-code-panel {
    padding: 14px;
    overflow: auto;
}
.vep-code-note {
    margin: 0 0 10px;
    color: #cbd5e1;
    line-height: 1.55;
}
.vep-code-ta {
    min-height: calc(100vh - 225px);
    width: 100%;
    padding: 14px;
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.vep-code-apply, .vep-restore-btn {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
}
#vep-toolbar {
    max-width: min(680px, calc(100vw - 380px));
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(15,23,42,.96);
    border-color: rgba(148,163,184,.24);
    box-shadow: 0 16px 48px rgba(2,6,23,.48);
}
.vep-tb-btn, .vep-tb-cpick {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
}
.vep-tb-numwrap, .vep-tb-select { height: 34px; }
[data-vep-h]:not([data-vep-sel]):not(#vep-toolbar *):not(#vep-sidebar *) {
    outline: 2px dashed rgba(139,92,246,.85) !important;
    outline-offset: 3px !important;
}
[data-vep-sel] {
    outline: 2px solid #8b5cf6 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(139,92,246,.20) !important;
}
.vep-status {
    min-height: 32px;
    padding: 8px 18px;
    color: #cbd5e1;
}
.vep-status.ok { color: #86efac; }
.vep-status.err { color: #fca5a5; }
.vep-status.warn { color: #fde68a; }
@media (max-width: 900px) {
    body.vep-mode { margin-right: 0 !important; padding-bottom: 44vh !important; }
    #vep-sidebar { top: auto; left: 0; width: 100%; height: 44vh; border-left: 0; border-top: 1px solid rgba(148,163,184,.16); }
    #vep-toolbar { max-width: calc(100vw - 16px); left: 8px !important; }
}


/* =====================================================
   Visual Editor Pro — UX refinements v1.5
   ===================================================== */
body.vep-mode {
    margin-right: 360px !important;
}
#vep-modebar {
    position: fixed;
    left: 50%;
    top: 42px;
    transform: translateX(-50%);
    z-index: 99997;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(760px, calc(100vw - 390px));
    padding: 10px 14px;
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 999px;
    background: rgba(15,23,42,.92);
    color: #e5e7eb;
    box-shadow: 0 14px 38px rgba(2,6,23,.32);
    backdrop-filter: blur(12px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    pointer-events: none;
}
#vep-modebar strong { color: #fff; white-space: nowrap; }
#vep-modebar span { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vep-modebar kbd {
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #c7d2fe;
    font-size: 11px;
    text-align: center;
}
#vep-sidebar {
    width: 360px;
    background: linear-gradient(180deg,#0b1120 0%,#111827 100%);
    border-left-color: rgba(148,163,184,.16);
}
.vep-sb-hdr {
    min-height: 68px;
    padding: 14px 16px;
    background: linear-gradient(135deg,#312e81 0%,#111827 70%);
}
.vep-brand { display: flex; flex-direction: column; gap: 3px; }
.vep-brand strong { font-size: 15px; line-height: 1; color: #fff; }
.vep-brand small { font-size: 11px; color: #a5b4fc; font-weight: 600; }
.vep-sb-actions { display: flex; align-items: center; gap: 8px; }
.vep-icon-btn {
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #e5e7eb;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.vep-icon-btn:hover { background: rgba(255,255,255,.14); }
.vep-sb-save {
    min-width: 142px;
    height: 38px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 8px 24px rgba(99,102,241,.32);
}
.vep-sb-save:disabled {
    opacity: .45;
    box-shadow: none;
}
.vep-intro {
    margin: 12px 12px 0;
    padding: 12px 14px;
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 16px;
    background: rgba(99,102,241,.08);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
}
.vep-intro strong { display: block; margin-bottom: 6px; color: #fff; }
.vep-intro ol { margin: 0; padding-left: 18px; }
.vep-intro li { margin: 2px 0; }
.vep-tabs { margin: 10px 12px 0; border: 1px solid rgba(148,163,184,.14); border-radius: 14px; overflow: hidden; }
.vep-tab { height: 42px; border-bottom: 0; background: rgba(15,23,42,.55); }
.vep-tab--on { background: rgba(99,102,241,.18); color: #fff; border-bottom: 0; }
.vep-hint {
    margin: 14px 12px;
    padding: 26px 18px;
    border: 1px dashed rgba(148,163,184,.22);
    border-radius: 18px;
    background: rgba(15,23,42,.55);
    color: #94a3b8;
}
.vep-props { padding: 12px; }
.vep-el-badge {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(125,211,252,.16);
    border-radius: 14px;
    background: rgba(14,165,233,.08);
    border-bottom: 1px solid rgba(125,211,252,.16);
}
.vep-context-card {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(34,197,94,.18);
    border-radius: 16px;
    background: rgba(34,197,94,.08);
}
.vep-context-card strong { display: block; color: #bbf7d0; font-size: 13px; margin-bottom: 4px; }
.vep-context-card span { display: block; color: #cbd5e1; font-size: 12px; line-height: 1.45; }
.vep-context-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vep-move-actions { display: flex; gap: 8px; width: 100%; }
.vep-move-btn { flex: 1 1 50%; background: rgba(99,102,241,.16) !important; border-color: rgba(165,180,252,.35) !important; }
.vep-move-btn:hover { background: rgba(99,102,241,.32) !important; }
.vep-mini-btn,
.vep-prop-btn,
.vep-clear-btn,
.vep-code-apply,
.vep-restore-btn {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    background: rgba(15,23,42,.72);
    color: #e5e7eb;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.vep-mini-btn:hover,
.vep-prop-btn:hover,
.vep-clear-btn:hover,
.vep-code-apply:hover,
.vep-restore-btn:hover { background: rgba(99,102,241,.22); border-color: rgba(165,180,252,.35); }
.vep-sec {
    margin: 16px 0 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(148,163,184,.08);
    color: #c4b5fd;
    font-size: 10px;
}
.vep-prop-row {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 14px;
    background: rgba(15,23,42,.72);
}
.vep-prop-lbl { width: auto; color: #d1d5db; font-size: 12px; }
.vep-prop-val { min-width: 44px; text-align: right; color: #a5b4fc; font-variant-numeric: tabular-nums; }
.vep-rng { width: 100%; min-width: 0; accent-color: #8b5cf6; }
.vep-prop-sel { width: 100%; min-width: 0; }
.vep-clr-row { grid-template-columns: 112px 32px 0 82px; }
.vep-nat { width: 0 !important; opacity: 0; pointer-events: none; }
.vep-swatch { width: 30px; height: 30px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); cursor: pointer; }
.vep-hex { width: 82px; height: 32px; padding: 0 8px; }
.vep-bg-prev, .vep-img-prev { border-radius: 12px; border: 1px solid rgba(148,163,184,.14); object-fit: cover; }
.vep-bg-prev { width: 48px; height: 34px; }
.vep-img-prev { width: calc(100% - 24px); max-height: 150px; margin: 8px 12px; }
#vep-toolbar {
    max-width: min(760px, calc(100vw - 380px));
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(15,23,42,.96);
    border-color: rgba(148,163,184,.24);
    box-shadow: 0 16px 48px rgba(2,6,23,.48);
}
.vep-tb-btn, .vep-tb-cpick { min-width: 36px; height: 36px; border-radius: 11px; }
.vep-tb-num { width: 64px; height: 34px; }
.vep-tb-select { height: 34px; max-width: 145px; }
.vep-status {
    margin: 8px 12px 12px;
    min-height: 38px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.65);
    color: #cbd5e1;
}
.vep-status--ok, .vep-status.ok { color: #86efac; background: rgba(34,197,94,.10); }
.vep-status--err, .vep-status.err { color: #fca5a5; background: rgba(239,68,68,.10); }
.vep-status--warn, .vep-status.warn { color: #fde68a; background: rgba(245,158,11,.10); }
.vep-code-panel { padding: 14px; overflow: auto; }
.vep-code-note { color: #cbd5e1; line-height: 1.55; }
.vep-code-note code { color: #93c5fd; }
.vep-code-ta {
    min-height: calc(100vh - 330px);
    width: 100%;
    padding: 14px;
    border-radius: 16px !important;
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.vep-code-apply, .vep-restore-btn { width: calc(100% - 24px); margin: 0 12px 12px; }
.vep-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    opacity: 0;
    z-index: 1000000;
    max-width: 520px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    transition: all .25s ease;
}
.vep-toast.on { transform: translate(-50%, 0); opacity: 1; }
.vep-toast--err { background: #7f1d1d; }
[data-vep-h]:not([data-vep-sel]):not(#vep-toolbar *):not(#vep-sidebar *) {
    outline: 2px dashed rgba(139,92,246,.85) !important;
    outline-offset: 4px !important;
}
[data-vep-sel] {
    outline: 2px solid #8b5cf6 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 7px rgba(139,92,246,.20) !important;
}
@media (max-width: 900px) {
    body.vep-mode { margin-right: 0 !important; padding-bottom: 48vh !important; }
    #vep-sidebar { top: auto; left: 0; width: 100%; height: 48vh; border-left: 0; border-top: 1px solid rgba(148,163,184,.16); }
    #vep-modebar { left: 10px; right: 10px; top: 42px; transform: none; max-width: none; border-radius: 18px; }
    #vep-modebar span { white-space: normal; }
    #vep-toolbar { max-width: calc(100vw - 16px); left: 8px !important; }
    .vep-intro { display: none; }
}
@media (max-width: 520px) {
    .vep-prop-row { grid-template-columns: 1fr; }
    .vep-clr-row { grid-template-columns: 1fr 36px 0 1fr; }
    .vep-sb-hdr { align-items: flex-start; flex-direction: column; gap: 10px; }
    .vep-sb-actions { width: 100%; }
    .vep-sb-save { flex: 1; }
}

/* =====================================================
   Visual Editor Pro — UX refinements v1.6
   - WordPress admin bar safe area
   - Toolbar below selection with safe gap
   - Media Library isolation
   ===================================================== */
:root { --vep-adminbar-h: 0px; }
body.admin-bar { --vep-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --vep-adminbar-h: 46px; } }

body.vep-mode {
    margin-right: 380px !important;
}

body.vep-mode :not(#vep-toolbar):not(#vep-toolbar *):not(#vep-sidebar):not(#vep-sidebar *):not(#vep-modebar):not(#vep-modebar *):not(#wpadminbar):not(#wpadminbar *):not(.media-modal):not(.media-modal *):not(.media-frame):not(.media-frame *):not(.media-modal-backdrop):not(.vep-toolbar-popover):not(.vep-toolbar-popover *):not(#vep-ai-writer):not(#vep-ai-writer *):not(#vep-video-modal):not(#vep-video-modal *):not(#vep-compare-overlay):not(#vep-compare-overlay *) {
    cursor: crosshair !important;
}

#vep-sidebar {
    top: var(--vep-adminbar-h) !important;
    height: calc(100vh - var(--vep-adminbar-h)) !important;
    bottom: auto !important;
    width: 380px !important;
    z-index: 99990 !important;
}

#vep-modebar {
    top: calc(var(--vep-adminbar-h) + 10px) !important;
    z-index: 99989 !important;
    max-width: min(760px, calc(100vw - 410px)) !important;
}

#vep-toolbar {
    position: fixed !important;
    z-index: 99991 !important;
    max-width: min(760px, calc(100vw - 410px)) !important;
    transform: none !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    gap: 7px !important;
}
#vep-toolbar::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
#vep-toolbar[data-placement="bottom"]::before {
    top: -8px;
    border-bottom: 8px solid rgba(15,23,42,.96);
}
#vep-toolbar[data-placement="top"]::before {
    bottom: -8px;
    border-top: 8px solid rgba(15,23,42,.96);
}
#vep-toolbar[aria-hidden="true"],
body.vep-media-open #vep-toolbar,
body.vep-media-open #vep-modebar {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.vep-media-open [data-vep-h],
body.vep-media-open [data-vep-sel],
.media-modal [data-vep-h],
.media-modal [data-vep-sel],
.media-frame [data-vep-h],
.media-frame [data-vep-sel] {
    outline: none !important;
    box-shadow: none !important;
}

.media-modal,
.media-frame,
.media-modal-backdrop {
    cursor: auto !important;
}
.media-modal *,
.media-frame * {
    cursor: auto !important;
}

.vep-sb-hdr {
    position: sticky;
    top: 0;
    z-index: 2;
}
.vep-sb-save {
    min-width: 154px !important;
}
.vep-intro {
    margin-top: 14px !important;
}

[data-vep-h]:not([data-vep-sel]):not(#vep-toolbar *):not(#vep-sidebar *):not(#vep-modebar *):not(.media-modal *):not(.media-frame *) {
    outline: 2px dashed rgba(139,92,246,.85) !important;
    outline-offset: 5px !important;
}
[data-vep-sel]:not(.media-modal *):not(.media-frame *) {
    outline: 2px solid #8b5cf6 !important;
    outline-offset: 6px !important;
    box-shadow: 0 0 0 7px rgba(139,92,246,.18) !important;
}

@media (max-width: 900px) {
    body.vep-mode {
        margin-right: 0 !important;
        padding-bottom: 48vh !important;
    }
    #vep-sidebar {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 48vh !important;
        z-index: 99990 !important;
    }
    #vep-modebar {
        top: calc(var(--vep-adminbar-h) + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
    }
    #vep-toolbar {
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
    }
}

/* v10 - Link editing inside HTML code tab */
.vep-link-box {
  margin: 12px 0 14px;
  padding: 14px;
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 14px;
  background: rgba(124, 58, 237, .10);
}
.vep-link-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #e8ddff;
}
.vep-link-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: #0b1224;
  color: #fff;
  padding: 8px 10px;
  outline: none;
}
.vep-link-input:focus {
  border-color: #d63384;
  box-shadow: 0 0 0 3px rgba(214, 51, 132, .22);
}
.vep-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

/* =====================================================
   Visual Editor Pro v1.16 — professional controls
   ===================================================== */
.vep-num-row {
    grid-template-columns: 112px minmax(90px,1fr) 92px !important;
}
.vep-num-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
    min-width: 88px;
}
.vep-num-step {
    width: 68px;
    height: 34px;
    padding: 0 4px 0 8px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 10px;
    background: rgba(2,6,23,.55);
    color: #e5e7eb;
    font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    outline: none;
    color-scheme: dark;
}
.vep-num-step:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.20);
}
.vep-num-unit {
    min-width: 18px;
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 700;
}
.vep-text-row {
    grid-template-columns: 112px minmax(0,1fr) !important;
}
.vep-text-input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 10px;
    background: rgba(2,6,23,.55);
    color: #e5e7eb;
    font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    outline: none;
}
.vep-text-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.20);
}
.vep-wide-btn {
    display: block !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px !important;
    text-align: center;
}
.vep-mini-btn-danger {
    border-color: rgba(239,68,68,.32) !important;
    color: #fecaca !important;
    background: rgba(127,29,29,.24) !important;
}
.vep-mini-btn-danger:hover {
    background: rgba(239,68,68,.25) !important;
    border-color: rgba(248,113,113,.55) !important;
}
@media (max-width: 520px) {
    .vep-num-row, .vep-text-row { grid-template-columns: 1fr !important; }
    .vep-num-wrap { justify-content: flex-start; }
}

/* v17: image size lock */
.vep-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 12px 12px;
    padding: 12px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 14px;
    background: rgba(15,23,42,.54);
    color: #e5e7eb;
    cursor: pointer;
}
.vep-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #8b5cf6;
    flex: 0 0 auto;
}
.vep-check-row span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    line-height: 1.25;
}
.vep-check-row small {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.35;
}

/* =====================================================
   Visual Editor Pro v1.19 — contrast, close btn, device preview
   ===================================================== */

/* Close (×) button — centered with flexbox */
.vep-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.07) !important;
    color: #f1f5f9 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.vep-icon-btn:hover {
    background: rgba(239,68,68,.18) !important;
    border-color: rgba(239,68,68,.45) !important;
    color: #fca5a5 !important;
}

/* Contrast improvements — prop rows, labels, inputs */
.vep-prop-row {
    background: rgba(11,18,36,.85) !important;
    border-color: rgba(148,163,184,.16) !important;
}
.vep-prop-lbl {
    color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.vep-prop-sel {
    background: rgba(11,18,36,.9) !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    color: #f1f5f9 !important;
    font-size: 12px !important;
}
.vep-prop-sel:focus { border-color: #8b5cf6 !important; }
.vep-prop-sel option { background-color: #0b1224 !important; color: #f1f5f9 !important; }
.vep-prop-sel option:checked,
.vep-prop-sel option:hover { background-color: #8b5cf6 !important; color: #fff !important; }
.vep-text-input {
    background: rgba(11,18,36,.9) !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    color: #f1f5f9 !important;
}
.vep-text-input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,.20) !important;
}
.vep-num-step {
    background: rgba(11,18,36,.9) !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    color: #f1f5f9 !important;
}
.vep-num-step:focus {
    border-color: #8b5cf6 !important;
}
.vep-sec {
    background: rgba(99,102,241,.14) !important;
    color: #c4b5fd !important;
    font-weight: 800 !important;
    letter-spacing: .6px !important;
}
.vep-mini-btn,
.vep-prop-btn,
.vep-clear-btn,
.vep-restore-btn {
    background: rgba(11,18,36,.9) !important;
    border-color: rgba(148,163,184,.25) !important;
    color: #f1f5f9 !important;
}
.vep-mini-btn:hover,
.vep-prop-btn:hover,
.vep-restore-btn:hover {
    background: rgba(99,102,241,.28) !important;
    border-color: rgba(165,180,252,.5) !important;
}
.vep-clear-btn {
    background: rgba(127,29,29,.25) !important;
    border-color: rgba(239,68,68,.30) !important;
    color: #fecaca !important;
}
.vep-clear-btn:hover {
    background: rgba(239,68,68,.28) !important;
    border-color: rgba(248,113,113,.6) !important;
}
.vep-mini-btn-danger {
    background: rgba(127,29,29,.32) !important;
    border-color: rgba(239,68,68,.40) !important;
    color: #fecaca !important;
}
.vep-mini-btn-danger:hover {
    background: rgba(239,68,68,.32) !important;
}
.vep-num-unit { color: #a5b4fc !important; font-weight: 700 !important; }
.vep-prop-val { color: #a5b4fc !important; }

/* ── Device preview footer bar ──────────────────── */
#vep-device-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(11,18,36,.95);
    border-top: 1px solid rgba(148,163,184,.14);
    flex-shrink: 0;
}
#vep-device-bar span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(148,163,184,.55);
    margin-right: 4px;
    white-space: nowrap;
}
.vep-device-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #94a3b8;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.vep-device-btn svg { flex-shrink: 0; }
.vep-device-btn:hover {
    background: rgba(99,102,241,.18);
    border-color: rgba(165,180,252,.40);
    color: #e0e7ff;
}
.vep-device-btn--on {
    background: rgba(99,102,241,.28) !important;
    border-color: #8b5cf6 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(139,92,246,.22);
}

/* ── Device preview iframe overlay ─────────────────────────── */
#vep-preview-overlay {
    position: fixed;
    top: var(--vep-adminbar-h, 0px);
    left: 0;
    right: 380px; /* sidebar width */
    bottom: 0;
    z-index: 99994;
    background: #070d1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    animation: vep-fade-in .18s ease;
}
@keyframes vep-fade-in { from { opacity:0; } to { opacity:1; } }

/* top info bar inside overlay */
.vep-preview-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: rgba(15,23,42,.92);
    border-bottom: 1px solid rgba(148,163,184,.12);
    flex-shrink: 0;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
}
.vep-preview-topbar strong { color: #fff; font-size: 13px; }
.vep-preview-topbar span {
    background: rgba(99,102,241,.22);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 100px;
    padding: 2px 9px;
    font-size: 11px;
    color: #c4b5fd;
    font-weight: 700;
}
.vep-preview-topbar em {
    font-style: normal;
    color: rgba(148,163,184,.55);
    font-size: 11px;
    margin-left: 4px;
}
.vep-preview-close {
    margin-left: auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
}
.vep-preview-close:hover {
    background: rgba(239,68,68,.18);
    border-color: rgba(239,68,68,.4);
    color: #fca5a5;
}

/* device chrome (the "phone/tablet frame") */
.vep-preview-chrome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 16px;
    overflow: hidden;
    width: 100%;
}
.vep-preview-chrome--tablet {
    padding-top: 16px;
}

/* notch for mobile */
.vep-preview-notch {
    width: 80px; height: 20px;
    background: #111827;
    border-radius: 0 0 16px 16px;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(148,163,184,.18);
    border-top: none;
    flex-shrink: 0;
}

/* screen wrapper — provides the rounded device look */
.vep-preview-screen {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(148,163,184,.20);
    box-shadow: 0 0 0 8px rgba(15,23,42,.8), 0 24px 60px rgba(0,0,0,.6);
    background: #fff;
    display: flex;
    flex-direction: column;
}
.vep-preview-chrome--mobile .vep-preview-screen {
    border-radius: 0 0 20px 20px;
    border-top: none;
}

/* the iframe itself — fills the screen */
.vep-preview-iframe {
    border: none;
    flex: 1;
    height: 100%;
    display: block;
    background: #fff;
}
/* tablet: fixed width, full height */
.vep-preview-chrome--tablet .vep-preview-screen {
    width: min(768px, calc(100% - 40px));
    height: 100%;
}
.vep-preview-chrome--tablet .vep-preview-iframe {
    width: 100%;
}
/* mobile: fixed width 390px, full height */
.vep-preview-chrome--mobile .vep-preview-screen {
    width: min(390px, calc(100% - 40px));
    height: 100%;
}
.vep-preview-chrome--mobile .vep-preview-iframe {
    width: 100%;
}

@media (max-width: 900px) {
    #vep-preview-overlay { right: 0; bottom: 48vh; }
}


/* =====================================================
   Visual Editor Pro v1.21.1 — Duplicate / Delete / Undo / Link editor
   ===================================================== */

/* Undo button — neutral hover (not red like the × close button) */
#vep-undo-btn:hover {
    background: rgba(99,102,241,.22) !important;
    border-color: rgba(165,180,252,.4) !important;
    color: #c7d2fe !important;
}
#vep-undo-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Toolbar: duplicate (⧉) and delete (🗑) buttons */
.vep-tb-btn[title*="Duplicar"] { color: #a5b4fc; }
.vep-tb-btn[title*="Duplicar"]:hover { background: rgba(99,102,241,.25) !important; color: #fff !important; }
.vep-tb-btn[title*="Remover este"] { color: #fca5a5 !important; }
.vep-tb-btn[title*="Remover este"]:hover { background: rgba(239,68,68,.22) !important; border-color: rgba(239,68,68,.4) !important; }

/* =====================================================
   Visual Editor Pro 2.0 — unified workspace design
   ===================================================== */
:root {
    --vep-sidebar-w: 420px;
    --vep-bg: #080b12;
    --vep-surface: #0e131d;
    --vep-surface-2: #141b27;
    --vep-surface-3: #1a2331;
    --vep-line: rgba(255,255,255,.09);
    --vep-line-strong: rgba(255,255,255,.15);
    --vep-text: #f7f8fb;
    --vep-muted: #8f9bad;
    --vep-accent: #7c5cff;
    --vep-accent-2: #26d0ce;
    --vep-danger: #ff6b7a;
    --vep-radius: 14px;
    --vep-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Native controls (select popups, number spinners, color/date pickers, checkboxes)
   default to the OS light theme unless told otherwise — that's the white box behind
   the font-size stepper arrows and the washed-out <select> dropdowns. Scoped to our
   own UI only, so the edited page's own form controls keep their original theme. */
#vep-sidebar, #vep-toolbar, #vep-modebar, #vep-device-bar,
.vep-toolbar-popover, #vep-ai-writer, #vep-video-modal,
#vep-compare-overlay, #vep-preview-overlay, #vep-shortcuts {
    color-scheme: dark;
}
#wpadminbar #wp-admin-bar-vep-open > .ab-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 4px 6px 0;
    height: 24px !important;
    padding: 0 11px !important;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(124,92,255,.24), rgba(38,208,206,.12)) !important;
    color: #f4f1ff !important;
    box-shadow: inset 0 0 0 1px rgba(151,129,255,.25);
}
#wpadminbar #wp-admin-bar-vep-open > .ab-item:hover { background: linear-gradient(135deg, #7656f2, #593cd2) !important; color: #fff !important; }

body.vep-mode {
    margin-right: var(--vep-sidebar-w) !important;
    transition: margin-right .2s ease !important;
}
body.vep-resizing,
body.vep-resizing * { cursor: col-resize !important; user-select: none !important; }

#vep-sidebar {
    width: var(--vep-sidebar-w) !important;
    background:
        radial-gradient(circle at 85% -10%, rgba(124,92,255,.20), transparent 30%),
        var(--vep-bg) !important;
    border-left: 1px solid var(--vep-line) !important;
    box-shadow: -24px 0 70px rgba(0,0,0,.44) !important;
    color: var(--vep-text) !important;
    font-family: var(--vep-font) !important;
}
#vep-sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-left: 1px solid rgba(124,92,255,.12);
}
.vep-resize-handle {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 10px;
    cursor: col-resize;
}
.vep-resize-handle::after {
    content: '';
    position: absolute;
    top: 46%;
    left: 4px;
    width: 2px;
    height: 48px;
    border-radius: 4px;
    background: transparent;
    transition: background .15s;
}
.vep-resize-handle:hover::after { background: var(--vep-accent); }

#vep-sidebar .vep-sb-hdr {
    min-height: 72px;
    padding: 14px 16px !important;
    gap: 12px;
    background: rgba(10,14,22,.88) !important;
    border-bottom: 1px solid var(--vep-line) !important;
    backdrop-filter: blur(18px);
}
.vep-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vep-brand > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.vep-brand strong { color: #fff; font-size: 13px; letter-spacing: -.15px; white-space: nowrap; }
.vep-brand small { color: var(--vep-muted); font-size: 10px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; }
.vep-brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--vep-accent), #5334d8 62%, #2a1d71);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(124,92,255,.32), inset 0 1px rgba(255,255,255,.28);
}
.vep-brand-mark img { display: block; width: 28px; height: 28px; object-fit: contain; }
.vep-sb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; }
#vep-sidebar .vep-icon-btn {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--vep-line) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    color: #c4ccda !important;
    font-size: 15px !important;
}
#vep-sidebar .vep-icon-btn:hover:not(:disabled) {
    background: var(--vep-surface-3) !important;
    border-color: rgba(124,92,255,.45) !important;
    color: #fff !important;
}
#vep-sidebar .vep-icon-btn:disabled { opacity: .28; }
#vep-sidebar .vep-sb-save {
    min-width: 94px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #886bff, #6545ef) !important;
    box-shadow: 0 8px 22px rgba(101,69,239,.28) !important;
    font-size: 11.5px !important;
    white-space: nowrap;
}

.vep-intro {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 12px 14px 8px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(38,208,206,.17) !important;
    border-radius: 13px !important;
    background: linear-gradient(120deg, rgba(38,208,206,.08), rgba(124,92,255,.07)) !important;
}
.vep-intro > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.vep-intro strong { color: #eafdfd; font-size: 11.5px; }
.vep-intro small { color: var(--vep-muted); font-size: 10.5px; line-height: 1.35; }
.vep-intro-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--vep-accent-2); box-shadow: 0 0 0 5px rgba(38,208,206,.10); }
.vep-intro button { border: 0; background: transparent; color: #718096; cursor: pointer; font-size: 17px; }

#vep-sidebar .vep-tabs {
    gap: 5px;
    margin: 4px 14px 0;
    padding: 4px;
    border: 1px solid var(--vep-line) !important;
    border-radius: 12px;
    background: rgba(255,255,255,.025) !important;
}
#vep-sidebar .vep-tab {
    height: 34px !important;
    border: 0 !important;
    border-radius: 8px;
    color: var(--vep-muted) !important;
    font-size: 11.5px !important;
}
#vep-sidebar .vep-tab:hover { color: #dce2eb !important; }
#vep-sidebar .vep-tab--on {
    background: var(--vep-surface-3) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 3px 10px rgba(0,0,0,.18);
}

.vep-control-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 0 11px;
    height: 38px;
    border: 1px solid var(--vep-line);
    border-radius: 11px;
    background: rgba(255,255,255,.03);
    color: #778397;
}
.vep-control-search:focus-within { border-color: rgba(124,92,255,.65); box-shadow: 0 0 0 3px rgba(124,92,255,.11); }
.vep-control-search input { width: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; color: #edf0f5 !important; font: 11.5px var(--vep-font) !important; box-shadow: none !important; }
.vep-control-search input::placeholder { color: #667286; }

#vep-sidebar .vep-hint {
    margin: 16px 14px !important;
    padding: 28px 18px !important;
    border: 1px dashed rgba(124,92,255,.28) !important;
    border-radius: 16px !important;
    background: rgba(124,92,255,.045) !important;
    color: var(--vep-muted) !important;
}
#vep-sidebar .vep-props { padding: 7px 14px 18px !important; }
#vep-sidebar .vep-sec {
    margin: 12px 0 7px !important;
    padding: 7px 3px !important;
    border: 0 !important;
    background: transparent !important;
    color: #9ba7b8 !important;
    font-size: 9.5px !important;
    letter-spacing: 1.1px !important;
}
#vep-sidebar .vep-prop-row,
#vep-sidebar .vep-check-row,
#vep-sidebar .vep-link-box {
    margin: 6px 0 !important;
    padding: 10px 11px !important;
    border: 1px solid var(--vep-line) !important;
    border-radius: 12px !important;
    background: var(--vep-surface) !important;
}
#vep-sidebar .vep-prop-row:hover { border-color: rgba(255,255,255,.15) !important; background: #111824 !important; }
#vep-sidebar .vep-prop-lbl { color: #c9d0dc !important; font-size: 11px !important; }
#vep-sidebar input:not([type="range"]):not([type="color"]),
#vep-sidebar select,
#vep-sidebar textarea {
    border-color: var(--vep-line-strong) !important;
    border-radius: 9px !important;
    background: #090d14 !important;
    color: #f1f4f8 !important;
}
#vep-sidebar input:focus,
#vep-sidebar select:focus,
#vep-sidebar textarea:focus { border-color: var(--vep-accent) !important; box-shadow: 0 0 0 3px rgba(124,92,255,.12) !important; }
#vep-sidebar input[type="range"] { accent-color: var(--vep-accent); }
#vep-sidebar .vep-prop-btn,
#vep-sidebar .vep-mini-btn,
#vep-sidebar .vep-restore-btn {
    min-height: 32px;
    border-color: var(--vep-line) !important;
    border-radius: 9px !important;
    background: var(--vep-surface-2) !important;
    color: #d6dce5 !important;
}

.vep-draft-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 14px 0;
    padding: 11px;
    border: 1px solid rgba(245,182,66,.26);
    border-radius: 13px;
    background: rgba(245,182,66,.075);
}
.vep-draft-banner > div:first-child { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.vep-draft-banner strong { color: #ffe6ad; font-size: 11.5px; }
.vep-draft-banner small { color: #a99b7c; font-size: 9.5px; }
.vep-draft-banner > div:last-child { display: flex; gap: 5px; }
.vep-draft-banner button { padding: 6px 8px; border: 1px solid var(--vep-line); border-radius: 8px; background: transparent; color: #aab3c0; font: 10px var(--vep-font); cursor: pointer; }
.vep-draft-banner .vep-draft-restore { border-color: rgba(245,182,66,.3); background: rgba(245,182,66,.12); color: #ffe0a0; }

.vep-history-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.vep-history-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vep-history-head strong { color: #f5f7fa; font-size: 13px; }
.vep-history-head small { color: var(--vep-muted); font-size: 10.5px; line-height: 1.45; }
.vep-history-list { display: flex; flex-direction: column; gap: 7px; }
.vep-history-item { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--vep-line); border-radius: 12px; background: var(--vep-surface); }
.vep-history-item > div { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.vep-history-item strong { color: #e9edf3; font-size: 11.5px; }
.vep-history-item small { overflow: hidden; color: var(--vep-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.vep-history-item button { padding: 7px 9px; border: 1px solid rgba(124,92,255,.28); border-radius: 8px; background: rgba(124,92,255,.10); color: #c7baff; font: 10px var(--vep-font); cursor: pointer; }
.vep-history-empty { display: flex; flex-direction: column; gap: 5px; padding: 28px 16px; border: 1px dashed var(--vep-line); border-radius: 14px; color: var(--vep-muted); font-size: 11px; text-align: center; }
.vep-history-empty small { color: #647084; }

#vep-sidebar .vep-code-panel { margin-top: 10px; }
#vep-sidebar .vep-code-note { margin: 0 14px !important; padding: 10px 12px !important; border: 1px solid var(--vep-line) !important; border-radius: 11px; background: var(--vep-surface); color: var(--vep-muted) !important; }
#vep-sidebar .vep-code-ta { margin: 9px 14px 0; width: calc(100% - 28px); border: 1px solid var(--vep-line) !important; border-radius: 12px !important; font-size: 11px; }
#vep-sidebar .vep-code-apply { min-height: 34px; border-radius: 10px; background: linear-gradient(135deg,#8062ff,#6141e6); }

#vep-device-bar { border-color: var(--vep-line) !important; background: rgba(9,13,20,.94) !important; }
#vep-sidebar .vep-device-btn { border-radius: 9px; }
#vep-sidebar .vep-device-btn--on { border-color: var(--vep-accent) !important; background: rgba(124,92,255,.17) !important; box-shadow: none !important; }
#vep-sidebar .vep-status { position: relative; padding: 9px 14px !important; border-color: var(--vep-line) !important; background: #090d14 !important; color: var(--vep-muted); }
#vep-sidebar .vep-status[data-draft]::after { content: ' · protegido'; color: var(--vep-accent-2); }

#vep-toolbar {
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 14px !important;
    background: rgba(10,14,22,.94) !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    font-family: var(--vep-font) !important;
    max-width: min(780px, calc(100vw - var(--vep-sidebar-w) - 28px)) !important;
}
#vep-modebar {
    top: calc(var(--vep-adminbar-h) + 12px) !important;
    max-width: min(700px, calc(100vw - var(--vep-sidebar-w) - 30px)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: rgba(10,14,22,.88) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.3) !important;
    backdrop-filter: blur(16px);
}
[data-vep-h]:not([data-vep-sel]):not(#vep-toolbar *):not(#vep-sidebar *):not(#vep-modebar *):not(.media-modal *):not(.media-frame *) { outline-color: rgba(38,208,206,.72) !important; }
[data-vep-sel]:not(.media-modal *):not(.media-frame *) { outline-color: var(--vep-accent) !important; box-shadow: 0 0 0 7px rgba(124,92,255,.15) !important; }

#vep-shortcuts { position: fixed; z-index: 1000002; inset: 0 var(--vep-sidebar-w) 0 0; display: grid; place-items: center; background: rgba(3,5,9,.56); backdrop-filter: blur(8px); font-family: var(--vep-font); }
.vep-shortcuts-card { width: min(390px, calc(100vw - 40px)); padding: 18px; border: 1px solid var(--vep-line-strong); border-radius: 18px; background: #0e131d; box-shadow: 0 28px 80px rgba(0,0,0,.55); color: #fff; }
.vep-shortcuts-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 750; }
.vep-shortcuts-title button { width: 30px; height: 30px; border: 1px solid var(--vep-line); border-radius: 9px; background: transparent; color: var(--vep-muted); cursor: pointer; }
.vep-shortcuts-card dl { margin: 0; }
.vep-shortcuts-card dl > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-top: 1px solid var(--vep-line); }
.vep-shortcuts-card dt { color: #bcc5d2; font-size: 11.5px; }
.vep-shortcuts-card dd { display: flex; gap: 4px; margin: 0; }
.vep-shortcuts-card kbd { padding: 3px 6px; border: 1px solid var(--vep-line-strong); border-radius: 6px; background: var(--vep-surface-3); color: #eef1f5; font-size: 9px; box-shadow: 0 2px rgba(0,0,0,.35); }

.vep-toast { border: 1px solid var(--vep-line-strong) !important; border-radius: 12px !important; background: rgba(10,14,22,.96) !important; font-family: var(--vep-font) !important; box-shadow: 0 18px 55px rgba(0,0,0,.45) !important; }
.vep-toast--err { border-color: rgba(255,107,122,.35) !important; background: rgba(43,14,20,.96) !important; }
#vep-preview-overlay { right: var(--vep-sidebar-w) !important; }

@media (max-width: 1180px) {
    :root { --vep-sidebar-w: 390px; }
    .vep-brand small, #vep-help-btn { display: none !important; }
}
@media (max-width: 900px) {
    :root { --vep-sidebar-w: 100%; }
    body.vep-mode { margin-right: 0 !important; padding-bottom: min(56vh, 520px) !important; }
    #vep-sidebar { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: min(56vh, 520px) !important; border-top: 1px solid var(--vep-line) !important; border-radius: 18px 18px 0 0; }
    .vep-resize-handle { display: none; }
    #vep-modebar { right: 10px !important; max-width: none !important; }
    #vep-toolbar { max-width: calc(100vw - 20px) !important; }
    #vep-preview-overlay { right: 0 !important; bottom: min(56vh, 520px) !important; }
    #vep-shortcuts { right: 0; bottom: min(56vh, 520px); }
}
@media (max-width: 520px) {
    #vep-sidebar .vep-sb-hdr { min-height: 62px; padding: 10px 12px !important; }
    .vep-brand strong { font-size: 11.5px; }
    .vep-brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
    #vep-sidebar .vep-icon-btn { width: 29px !important; height: 29px !important; }
    #vep-sidebar .vep-sb-save { min-width: 72px !important; padding: 0 9px !important; font-size: 10.5px !important; }
    .vep-intro { display: none !important; }
}

/* 3.1.2 — full brand header inside the visual editor */
#vep-sidebar .vep-sb-hdr {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
}
#vep-sidebar .vep-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}
#vep-sidebar .vep-brand-logo {
    display: block;
    width: min(285px, 82%);
    height: 50px;
    box-sizing: border-box;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    object-fit: contain;
    object-position: center;
    box-shadow: 0 7px 20px rgba(0,0,0,.22);
}
#vep-sidebar .vep-sb-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}
#vep-sidebar .vep-sb-actions .vep-sb-save { flex: 1; max-width: 150px; }
@media (max-width: 520px) {
    #vep-sidebar .vep-sb-hdr { min-height: 104px !important; padding: 9px 11px !important; gap: 8px !important; }
    #vep-sidebar .vep-brand-logo { width: min(220px,72%); height: 37px; }
}

/* Quick video workflow */
.vep-quick-actions { flex: 0 0 auto; padding: 0 14px 10px; }
.vep-quick-video { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 9px 11px; border: 1px solid rgba(124,92,255,.3); border-radius: 13px; background: linear-gradient(120deg,rgba(124,92,255,.13),rgba(38,208,206,.065)); color: #e9e6ff; font-family: var(--vep-font); text-align: left; cursor: pointer; transition: border-color .15s,background .15s,transform .15s; }
.vep-quick-video:hover { border-color: rgba(151,130,255,.62); background: linear-gradient(120deg,rgba(124,92,255,.21),rgba(38,208,206,.1)); transform: translateY(-1px); }
.vep-quick-video > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.vep-quick-video strong { font-size: 11px; }
.vep-quick-video small { color: #909caf; font-size: 9px; }
.vep-quick-video > b { color: #ae9eff; font-size: 17px; }
.vep-quick-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: linear-gradient(145deg,#8062ff,#5637d6); color: #fff; font-size: 10px; box-shadow: 0 6px 18px rgba(86,55,214,.25); }

/* Botão de fechar compartilhado por todos os popups (IA, vídeo, etc.) — um
   único lugar de verdade pro layout, pra nunca mais destoar entre popups. */
.vep-modal-close { width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: transparent; color: #aab3c0; font-size: 19px; line-height: 1; cursor: pointer; }
.vep-modal-close:hover { background: rgba(255,255,255,.06); color: #fff; }

#vep-video-modal { position: fixed; z-index: 1000010; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2,4,9,.7); backdrop-filter: blur(8px); font-family: var(--vep-font); }
.vep-video-card { overflow: hidden; width: min(520px,calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: #0e131d; color: #eef1f6; box-shadow: 0 30px 100px rgba(0,0,0,.68); }
.vep-video-head { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(120deg,rgba(124,67,232,.18),rgba(38,208,206,.08)); }
.vep-video-head-icon { display: grid; place-items: center; width: 42px; height: 34px; flex: 0 0 42px; border-radius: 10px; background: linear-gradient(135deg,#7c5cff,#26d0ce); color: #fff; font-size: 12px; }
.vep-video-head > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.vep-video-head strong { font-size: 13px; }.vep-video-head small { color: #929cad; font-size: 9px; }
.vep-video-body { display: flex; overflow-y: auto; max-height: calc(100vh - 190px); padding: 15px 16px 17px; flex-direction: column; gap: 12px; }
.vep-video-body label { display: flex; flex-direction: column; gap: 6px; }
.vep-video-body label > span { color: #cbd3df; font-size: 10.5px; font-weight: 700; }
.vep-video-body label > span b { color: #8a95a8; font-size: 8px; text-transform: uppercase; }.vep-video-body label > span small { color: #737f92; font-size: 9px; font-weight: 500; }
.vep-video-body input,.vep-video-body select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; outline: 0; background: #080c13; color: #eef1f6; font: 10.5px var(--vep-font); box-shadow: none; }
.vep-video-body input:focus,.vep-video-body select:focus { border-color: #7c43e8; box-shadow: 0 0 0 3px rgba(124,67,232,.16); }
.vep-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vep-video-poster { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.vep-video-poster label { min-width: 0; }
.vep-video-poster-pick { height: 39px; padding: 0 12px; border: 1px solid rgba(38,208,206,.35); border-radius: 9px; background: rgba(124,67,232,.12); color: #c9f3ef; font: 10px var(--vep-font); font-weight: 700; white-space: nowrap; cursor: pointer; }
.vep-video-tip { padding: 10px 11px; border: 1px solid rgba(38,208,206,.16); border-radius: 9px; background: rgba(38,208,206,.055); color: #88aaa9; font-size: 9.5px; line-height: 1.5; }
.vep-video-error { padding: 9px 10px; border: 1px solid rgba(255,107,122,.28); border-radius: 9px; background: rgba(255,107,122,.08); color: #ff939d; font-size: 10px; }
.vep-video-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 12px 16px 15px; border-top: 1px solid rgba(255,255,255,.08); }
.vep-video-foot button { height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: #151a24; color: #aab3c0; font: 10.5px var(--vep-font); font-weight: 700; cursor: pointer; }
.vep-video-foot .vep-video-apply { border: 0; background: linear-gradient(135deg,#7c5cff,#26d0ce); color: #fff; }
@media(max-width:560px){.vep-video-grid,.vep-video-poster{grid-template-columns:1fr}#vep-video-modal{padding:10px}.vep-video-body{max-height:calc(100vh - 170px)}}

/* Responsive cover controls */
.vep-responsive-box { margin: 6px 0 12px; padding: 11px; border: 1px solid rgba(124,92,255,.24); border-radius: 14px; background: linear-gradient(145deg,rgba(124,92,255,.075),rgba(12,18,28,.82)); }
.vep-responsive-device-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.vep-responsive-device-head strong { padding: 5px 8px; border: 1px solid rgba(124,92,255,.38); border-radius: 7px; background: rgba(124,92,255,.15); color: #dcd5ff; font-size: 9px; letter-spacing: .25px; text-transform: uppercase; }
.vep-responsive-device-head span { color: #7f8b9d; font-size: 8.5px; text-align: right; }
.vep-responsive-note { margin: 0 1px 9px; color: #98a4b6; font-size: 9.5px; line-height: 1.5; }
.vep-responsive-cover { display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 16/7; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: #080c13 center/cover no-repeat; color: #657185; font-size: 9.5px; }
.vep-responsive-cover.has-image { background-color: #080c13; }
.vep-responsive-image-state { margin: 0 1px 9px; color: #7f8b9d; font-size: 8.8px; }
.vep-responsive-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
#vep-sidebar .vep-responsive-actions .vep-prop-btn,
#vep-sidebar .vep-responsive-wide,
#vep-sidebar .vep-responsive-reset {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 0 !important;
    text-align: center; white-space: normal; line-height: 1.3;
}
#vep-sidebar .vep-responsive-primary { border-color: rgba(124,92,255,.48) !important; background: rgba(124,92,255,.18) !important; color: #dcd5ff !important; }
#vep-sidebar .vep-responsive-wide { margin-bottom: 8px !important; }
#vep-sidebar .vep-responsive-reset { margin-top: 8px !important; border-color: rgba(255,255,255,.07) !important; background: transparent !important; color: #8995a6 !important; }
.vep-responsive-box > .vep-prop-row { margin-right: 0 !important; margin-left: 0 !important; }
.vep-responsive-offset-note { margin-top: 10px; padding: 8px 9px; border-left: 2px solid rgba(38,208,206,.5); border-radius: 0 7px 7px 0; background: rgba(38,208,206,.05); color: #9cb9b8; }
.vep-responsive-advanced { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.vep-responsive-advanced > summary,
.vep-options-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 39px; padding: 0 3px; color: #c6ceda; font: 10.5px var(--vep-font); font-weight: 750; list-style: none; cursor: pointer; }
.vep-responsive-advanced > summary::-webkit-details-marker,
.vep-options-group > summary::-webkit-details-marker { display: none; }
.vep-responsive-advanced > summary::after,
.vep-options-group > summary::after { content: '+'; color: #8e7aff; font-size: 16px; font-weight: 500; }
.vep-responsive-advanced[open] > summary::after,
.vep-options-group[open] > summary::after { content: '−'; }
.vep-responsive-advanced > summary small,
.vep-options-group > summary small { flex: 1; color: #6f7b8e; font-size: 8.5px; font-weight: 500; text-align: right; }
.vep-responsive-advanced-body { padding-top: 2px; }

/* Progressive disclosure for less common controls */
.vep-options-group { margin: 10px 0 4px; border: 1px solid var(--vep-line); border-radius: 12px; background: rgba(255,255,255,.018); }
.vep-options-group > summary { padding: 0 11px; }
.vep-options-group-body { padding: 0 9px 9px; border-top: 1px solid rgba(255,255,255,.055); }
.vep-options-group-body .vep-sec:first-child { margin-top: 6px !important; }

.vep-context-more { flex: 1 1 100%; border-top: 1px solid rgba(255,255,255,.07); }
.vep-context-more > summary { padding: 7px 1px 1px; color: #91a0b2; font-size: 9.5px; font-weight: 700; list-style: none; cursor: pointer; }
.vep-context-more > summary::-webkit-details-marker { display: none; }
.vep-context-more > summary::after { content: ' +'; color: #9d8aff; }
.vep-context-more[open] > summary::after { content: ' −'; }
.vep-context-more-body { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 7px; }
.vep-context-more-body .vep-mini-btn { flex: 1 1 calc(50% - 3px); }

/* =====================================================
   Visual Editor Pro 3.3 — compact contextual workspace
   ===================================================== */
#vep-toolbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    max-width: min(900px, calc(100vw - var(--vep-sidebar-w) - 24px)) !important;
    min-height: 42px !important;
    padding: 5px 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 9px !important;
    background: rgba(20,21,27,.98) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.045) !important;
    scrollbar-width: thin;
}
#vep-toolbar::-webkit-scrollbar { height: 3px; }
#vep-toolbar::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(124,92,255,.6); }
#vep-toolbar::before { display: none !important; }
#vep-toolbar .vep-tb-btn,
#vep-toolbar .vep-tb-cpick {
    min-width: 30px !important;
    width: auto;
    height: 30px !important;
    padding: 0 7px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #d8dbe2 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
#vep-toolbar .vep-tb-btn:hover,
#vep-toolbar .vep-tb-cpick:hover { border-color: rgba(255,255,255,.09) !important; background: rgba(255,255,255,.075) !important; color: #fff !important; }
#vep-toolbar .vep-tb-btn b,
#vep-toolbar .vep-tb-btn i,
#vep-toolbar .vep-tb-btn u { font-size: 13px; }
#vep-toolbar .vep-tb-sep { width: 1px; height: 22px; margin: 0 2px; background: rgba(255,255,255,.11); }
#vep-toolbar .vep-tb-icon { width: 30px; padding: 0 !important; }
#vep-toolbar .vep-tb-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#vep-toolbar .vep-tb-stepper { display: inline-grid; grid-template-columns: 25px 38px 25px; align-items: center; height: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: rgba(255,255,255,.045); flex: 0 0 auto; }
#vep-toolbar .vep-tb-step { display: grid; place-items: center; height: 100%; padding: 0; border: 0; background: transparent; color: #aeb4bf; font: 15px var(--vep-font); cursor: pointer; }
#vep-toolbar .vep-tb-step:hover { background: rgba(124,92,255,.18); color: #fff; }
#vep-toolbar .vep-tb-num { width: 38px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.09) !important; border-left: 1px solid rgba(255,255,255,.09) !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; font: 11px var(--vep-font) !important; text-align: center; -moz-appearance: textfield; }
#vep-toolbar .vep-tb-num::-webkit-inner-spin-button { display: none; }
#vep-toolbar .vep-tb-select { width: 76px; height: 30px !important; padding: 0 6px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #d8dbe2 !important; font: 11px var(--vep-font) !important; }
#vep-toolbar .vep-tb-select option { background-color: #1a1d27 !important; color: #f3f4f6 !important; }
#vep-toolbar .vep-tb-select option:checked,
#vep-toolbar .vep-tb-select option:hover { background-color: #6366f1 !important; color: #fff !important; }
#vep-toolbar .vep-tb-cpick { position: relative; display: grid !important; place-items: center; width: 30px; padding: 0 !important; overflow: hidden; }
#vep-toolbar .vep-tb-cpick input[type="color"] { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vep-tb-letter { position: relative; display: inline-grid; place-items: center; width: 18px; height: 20px; color: #f3f4f6; font-weight: 800; }
.vep-tb-text-color .vep-tb-letter::after { content: ''; position: absolute; right: 2px; bottom: 0; left: 2px; height: 3px; border-radius: 2px; background: #ef5f68; }
.vep-tb-letter--highlight { border-radius: 3px; background: #f4db42; color: #161616; }
.vep-tb-gradient-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg,#7c5cff,#26d0ce,#f5d442); color: #fff; font-size: 10px; font-weight: 900; }
#vep-toolbar .vep-tb-ai { display: inline-flex; gap: 4px; min-width: 55px !important; padding: 0 10px !important; border-color: rgba(124,92,255,.48) !important; background: linear-gradient(135deg,#7c5cff,#26d0ce) !important; color: #fff !important; box-shadow: 0 4px 13px rgba(38,208,206,.28); }
.vep-tb-ai-spark { font-size: 12px; }
#vep-toolbar .vep-tb-danger { color: #ef8c93 !important; }
#vep-toolbar .vep-tb-danger:hover { background: rgba(239,68,68,.13) !important; color: #ffb1b7 !important; }
#vep-toolbar .vep-tb-drag-handle { cursor: grab; touch-action: none; }
#vep-toolbar .vep-tb-drag-handle:active { cursor: grabbing; }

.vep-toolbar-popover { position: fixed; z-index: 1000004; width: min(330px,calc(100vw - 24px)); padding: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #10141d; color: #eef1f6; box-shadow: 0 22px 70px rgba(0,0,0,.58); font-family: var(--vep-font); }
.vep-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vep-popover-head strong { font-size: 11.5px; }
.vep-popover-head button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.055); color: #aeb6c3; font-size: 17px; cursor: pointer; }
.vep-gradient-body { display: grid; grid-template-columns: 36px 36px 55px 12px 1fr auto; align-items: center; gap: 6px; }
.vep-gradient-body input[type="color"] { width: 36px; height: 32px; padding: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: #090d14; }
.vep-gradient-body input[type="number"] { width: 55px; height: 32px; padding: 0 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: #090d14; color: #fff; }
.vep-gradient-preview { height: 32px; min-width: 55px; border-radius: 7px; }
.vep-popover-input { box-sizing: border-box; width: 100%; height: 37px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; outline: 0; background: #080c13; color: #fff; font: 11px var(--vep-font); }
.vep-popover-textarea { height: auto; min-height: 78px; padding: 9px 10px; resize: vertical; line-height: 1.5; }

/* Drag-to-reorder: floating clone that follows the pointer + a thin bar that
   marks exactly where the element will land when the button is released. */
.vep-drag-ghost { position: fixed; z-index: 1000020; margin: 0 !important; pointer-events: none; opacity: .82; box-shadow: 0 22px 60px rgba(0,0,0,.5); border-radius: 6px; outline: 2px solid var(--vep-accent); }
.vep-drop-indicator { position: fixed; z-index: 1000021; display: none; background: var(--vep-accent); border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 3px rgba(124,92,255,.28); }
[data-vep-sel].vep-dragging-source { opacity: .35 !important; }
body.vep-drag-active, body.vep-drag-active * { cursor: grabbing !important; }

/* Close button for the hint pill ("O que você quer editar?") — the pill itself
   has pointer-events:none so it never blocks clicks on the page underneath;
   this button opts back in so it stays clickable. */
.vep-modebar-close { pointer-events: all; margin-left: auto; width: 22px; height: 22px; flex: 0 0 22px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.07); color: #cbd5e1; font-size: 15px; line-height: 1; cursor: pointer; }
.vep-modebar-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.vep-popover-input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.13); }
.vep-popover-check { display: flex; align-items: center; gap: 7px; margin: 9px 1px; color: #a5aebb; font-size: 10px; }
.vep-popover-check input { accent-color: #7c5cff; }
.vep-popover-actions { display: flex; justify-content: flex-end; gap: 6px; }
.vep-popover-apply,.vep-popover-remove { min-height: 32px; padding: 0 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: #1a2230; color: #dce1e8; font: 10px var(--vep-font); font-weight: 700; cursor: pointer; }
.vep-popover-apply { border-color: #7756ef; background: #6847df; color: #fff; }
.vep-popover-remove { margin-right: auto; color: #ff9ca5; }

#vep-ai-writer { position: fixed; z-index: 1000011; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,4,9,.7); backdrop-filter: blur(8px); font-family: var(--vep-font); }
.vep-ai-card { width: min(520px,calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: #0e131d; color: #eef1f6; box-shadow: 0 30px 100px rgba(0,0,0,.68); }
.vep-ai-head { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(120deg,rgba(124,67,232,.18),rgba(38,208,206,.08)); }
.vep-ai-badge { display: grid; place-items: center; width: 42px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,#7c5cff,#26d0ce); color: #fff; font-size: 11px; font-weight: 800; }
.vep-ai-head > div { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.vep-ai-head strong { font-size: 13px; }.vep-ai-head small { color: #929cad; font-size: 9px; }
.vep-ai-body { display: flex; overflow-y: auto; max-height: calc(100vh - 125px); padding: 15px 16px 17px; flex-direction: column; gap: 10px; }
.vep-ai-mode,.vep-ai-prompt,.vep-ai-result { box-sizing: border-box; width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; outline: 0; background: #080c13; color: #eef1f6; font: 11px/1.45 var(--vep-font); }
.vep-ai-mode:focus,.vep-ai-prompt:focus,.vep-ai-result:focus { border-color: #7c43e8; box-shadow: 0 0 0 3px rgba(124,67,232,.16); }
.vep-ai-mode { height: 38px; padding: 0 10px; }.vep-ai-prompt { min-height: 76px; padding: 10px; resize: vertical; }.vep-ai-result { min-height: 120px; padding: 10px; resize: vertical; }
.vep-ai-source { padding: 10px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.025); }
.vep-ai-source span { color: #7f8a9c; font-size: 8.5px; font-weight: 750; text-transform: uppercase; }.vep-ai-source p { max-height: 74px; overflow-y: auto; margin: 5px 0 0; color: #c7ced9; font-size: 10px; line-height: 1.45; }
.vep-ai-generate,.vep-ai-apply { min-height: 40px; border: 0; border-radius: 9px; background: linear-gradient(135deg,#7c5cff,#26d0ce); color: #fff; font: 11px var(--vep-font); font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; }
.vep-ai-generate:disabled { opacity: .55; cursor: wait; }
.vep-ai-apply { background: #178a63; border: 1px solid rgba(255,255,255,.12); }
.vep-ai-feedback { min-height: 15px; color: #b6bdca; font-size: 9.5px; }.vep-ai-feedback.is-error { color: #ffb3bb; }.vep-ai-feedback.is-ok { color: #93e7c4; }

body.vep-mode.vep-media-open,
body.vep-mode.vep-media-open .media-modal,
body.vep-mode.vep-media-open .media-modal *,
body.vep-mode.vep-media-open .media-frame,
body.vep-mode.vep-media-open .media-frame *,
body.vep-mode.vep-media-open .media-modal-backdrop { cursor: default !important; }
body.vep-mode.vep-media-open .media-modal button,
body.vep-mode.vep-media-open .media-modal a,
body.vep-mode.vep-media-open .media-frame button,
body.vep-mode.vep-media-open .media-frame a { cursor: pointer !important; }
body.vep-mode.vep-media-open .media-frame .attachment,
body.vep-mode.vep-media-open .media-frame .attachment-preview,
body.vep-mode.vep-media-open .media-frame .thumbnail { cursor: pointer !important; }
body.vep-mode.vep-media-open .media-modal input,
body.vep-mode.vep-media-open .media-modal textarea,
body.vep-mode.vep-media-open .media-frame input,
body.vep-mode.vep-media-open .media-frame textarea { cursor: text !important; }
body.vep-mode .vep-toolbar-popover,
body.vep-mode .vep-toolbar-popover *,
body.vep-mode #vep-ai-writer,
body.vep-mode #vep-ai-writer *,
body.vep-mode #vep-video-modal,
body.vep-mode #vep-video-modal *,
body.vep-mode #vep-compare-overlay,
body.vep-mode #vep-compare-overlay * { cursor: default !important; }
body.vep-mode .vep-toolbar-popover button,
body.vep-mode .vep-toolbar-popover label,
body.vep-mode #vep-ai-writer button,
body.vep-mode #vep-ai-writer select,
body.vep-mode #vep-video-modal button,
body.vep-mode #vep-video-modal select,
body.vep-mode #vep-video-modal label,
body.vep-mode #vep-compare-overlay button { cursor: pointer !important; }
body.vep-mode .vep-toolbar-popover input,
body.vep-mode #vep-ai-writer input,
body.vep-mode #vep-ai-writer textarea,
body.vep-mode #vep-video-modal input,
body.vep-mode #vep-video-modal textarea { cursor: text !important; }
body.vep-mode .vep-toolbar-popover input[type="color"],
body.vep-mode .vep-toolbar-popover input[type="checkbox"],
body.vep-mode #vep-video-modal input[type="color"],
body.vep-mode #vep-video-modal input[type="checkbox"] { cursor: pointer !important; }

#vep-sidebar .vep-prop-row { grid-template-columns: 128px minmax(0,1fr) auto !important; text-align: left; }
#vep-sidebar .vep-num-row { grid-template-columns: 128px minmax(70px,1fr) 88px !important; }
#vep-sidebar .vep-text-row { grid-template-columns: 128px minmax(0,1fr) !important; }
#vep-sidebar .vep-clr-row { grid-template-columns: 128px 30px 0 82px !important; }
#vep-sidebar .vep-prop-lbl { width: auto !important; line-height: 1.25; }
#vep-sidebar .vep-align-grp { align-items: center; }
#vep-sidebar .vep-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

/* Simple device preview and three-screen comparison */
#vep-device-bar { gap: 4px; padding-right: 9px; padding-left: 9px; }
.vep-device-compare { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(148,163,184,.20); border-radius: 9px; background: rgba(255,255,255,.04); color: #9ca7b8; cursor: pointer; }
.vep-device-compare:hover { border-color: rgba(124,92,255,.5); background: rgba(124,92,255,.14); color: #fff; }
.vep-device-compare span { display: none; }
#vep-preview-overlay { right: var(--vep-sidebar-w) !important; background: #24262b !important; }
.vep-preview-topbar { min-height: 38px; padding: 6px 12px; background: #191b20; }
.vep-preview-topbar em { margin-left: auto; }.vep-preview-topbar .vep-preview-close { margin-left: 5px; }
.vep-preview-chrome { padding: 12px !important; }
.vep-preview-notch { display: none !important; }
.vep-preview-screen,
.vep-preview-chrome--mobile .vep-preview-screen { overflow: hidden; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 5px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; }

#vep-compare-overlay { position: fixed; z-index: 1000007; top: var(--vep-adminbar-h,0); right: 0; bottom: 0; left: 0; display: flex; padding: 0; flex-direction: column; background: #24262b; color: #f4f5f7; font-family: var(--vep-font); }
.vep-compare-head { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px 0 18px; border-bottom: 1px solid rgba(255,255,255,.09); background: #191b20; }
.vep-compare-head > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }.vep-compare-head strong { font-size: 12px; }.vep-compare-head span { color: #858d9a; font-size: 9px; }
.vep-compare-head > button { width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: rgba(255,255,255,.04); color: #bbc1cb; font-size: 19px; cursor: pointer; }
.vep-compare-grid { display: grid; min-height: 0; padding: 10px; flex: 1; grid-template-columns: minmax(180px,.55fr) minmax(250px,1fr) minmax(390px,1.8fr); gap: 9px; overflow-x: auto; }
.vep-compare-card { display: flex; min-width: 0; min-height: 0; margin: 0; padding: 0; flex-direction: column; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: #fff; box-shadow: 0 7px 21px rgba(0,0,0,.2); }
.vep-compare-card > header { display: flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 8px; flex: 0 0 27px; background: #202228; color: #d6d9df; }
.vep-compare-card > header strong { font-size: 8px; }.vep-compare-card > header span { color: #747c89; font-size: 7px; }
.vep-compare-viewport { position: relative; overflow: hidden; min-height: 0; flex: 1; background: #fff; }
.vep-compare-viewport iframe { position: absolute; top: 0; left: 0; display: block; border: 0; background: #fff; transform-origin: left top; }
@media(max-width:900px){#vep-preview-overlay{right:0 !important;bottom:48vh}.vep-compare-grid{grid-template-columns:220px 340px 620px}}

/* ══════════════════════════════════════════════════════════════
   v5.0 — MODO DE EDIÇÃO POR DISPOSITIVO (Desktop / Tablet / Mobile)
   O canvas assume a largura real do aparelho e continua 100% editável.
   ══════════════════════════════════════════════════════════════ */
body.vep-mode.vep-device-mode {
    background: #1b1e26 !important;
}
body.vep-mode.vep-device-mode .vep-device-canvas {
    width: var(--vep-device-w, 768px) !important;
    max-width: var(--vep-device-w, 768px) !important;
    /* Transição fluida ao alternar Desktop/Tablet/Mobile, como no Elementor */
    transition: width .28s cubic-bezier(.4, 0, .2, 1), max-width .28s cubic-bezier(.4, 0, .2, 1), border-radius .28s ease;
    margin: 26px auto 70px !important;
    box-sizing: border-box;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1);
    overflow: hidden;
    overflow-y: visible;
    min-height: 60vh;
    background: #fff;
}
body.vep-mode.vep-device-mode--mobile .vep-device-canvas {
    border-radius: 22px;
}

@media (prefers-reduced-motion: reduce) {
    body.vep-mode.vep-device-mode .vep-device-canvas { transition: none; }
}

/* Contexto do dispositivo no rodapé da barra lateral */
#vep-device-hint {
    padding: 7px 14px 9px;
    background: rgba(9, 13, 20, .94);
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    color: #8995a6;
    font-size: 10.5px;
    line-height: 1.45;
}
#vep-device-hint.is-device {
    color: #c4b5fd;
    background: rgba(124, 92, 255, .12);
}

/* Aviso no painel de propriedades quando Tablet/Mobile está ativo */
#vep-sidebar .vep-device-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 14px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(124, 92, 255, .38) !important;
    border-radius: 11px;
    background: rgba(124, 92, 255, .1) !important;
}
#vep-sidebar .vep-device-notice strong {
    color: #d6ccff !important;
    font-size: 11.5px !important;
}
#vep-sidebar .vep-device-notice span {
    color: #9d96c4 !important;
    font-size: 10.5px !important;
    line-height: 1.45;
}
#vep-sidebar .vep-device-notice .vep-device-reset {
    margin-top: 6px !important;
    border-color: rgba(245, 158, 11, .4) !important;
    background: rgba(245, 158, 11, .1) !important;
    color: #fcd34d !important;
}

/* ── Busca de conteúdo (aba Código) ─────────────────────────────────── */
.vep-code-search {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.vep-code-search-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .7);
}
.vep-code-search-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #0b1224;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
}
.vep-code-search-input:focus {
    border-color: rgba(139, 92, 246, .65);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
}
.vep-code-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}
.vep-search-count {
    font-size: 11px;
    color: rgba(148, 163, 184, .65);
    padding: 2px 2px 0;
}
.vep-search-empty {
    font-size: 12px;
    color: rgba(148, 163, 184, .7);
    padding: 6px 2px;
}
.vep-search-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: #e2e8f0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.vep-search-item:hover,
.vep-search-item:focus-visible {
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .45);
}
.vep-search-item-tag {
    font: 700 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #93c5fd;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vep-search-item-hidden {
    font: italic 500 10px/1 system-ui, sans-serif;
    color: #fcd34d;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 99px;
    padding: 2px 7px;
}
.vep-search-item-snippet {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(203, 213, 225, .85);
    word-break: break-word;
}
.vep-search-item-snippet mark {
    background: rgba(139, 92, 246, .35);
    color: #fff;
    border-radius: 3px;
    padding: 0 2px;
}

/* Destaque temporário do elemento encontrado (nunca vai para o HTML salvo) */
.vep-search-flash {
    outline: 3px solid #8b5cf6 !important;
    outline-offset: 3px;
    animation: vepSearchPulse 1.8s ease forwards;
}
@keyframes vepSearchPulse {
    0%, 55% { outline-color: #8b5cf6; }
    100%    { outline-color: transparent; }
}

/* ── Blocos de shortcode (conteúdo re-renderizado pelo servidor) ─────── */
/* No front o wrapper usa display:contents (invisível no layout). Durante a
   edição ele precisa gerar caixa própria para o contorno de seleção e a
   barra de ferramentas funcionarem. */
body.vep-mode [data-vep-shortcode] {
    display: block !important;
}
body.vep-mode [data-vep-shortcode]:hover {
    outline: 2px dashed rgba(139, 92, 246, .55);
    outline-offset: 2px;
    cursor: pointer;
}
/* Conteúdo interno não é editável: evita foco/cursor de texto enganando */
body.vep-mode [data-vep-shortcode] * {
    cursor: pointer !important;
}

.vep-shortcode-card span {
    display: block;
    margin-top: 6px;
    line-height: 1.55;
}
.vep-shortcode-code {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0b1224;
    border: 1px solid rgba(139, 92, 246, .35);
    color: #c4b5fd;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
    user-select: all;
}
.vep-shortcode-swap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}
.vep-shortcode-swap .vep-text-input {
    width: 100%;
    box-sizing: border-box;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#vep-props > .vep-move-actions,
#vep-props > .vep-mini-btn-danger {
    margin: 0 14px 12px;
}
#vep-props > .vep-mini-btn-danger {
    display: block;
    width: calc(100% - 28px);
}

/* ══ ALÇAS DE ARRASTE — largura e espaço interno ═══════════════════════════
   Camada sobreposta: fica ABAIXO do painel (99990) e da barra (99991), e
   acima de todo o conteúdo da página. Nunca é injetada dentro do elemento
   editado, então não aparece no HTML salvo.                                */
#vep-handles {
    position: fixed !important;
    z-index: 99988 !important;
    inset: 0 !important;
    pointer-events: none !important;
    font-family: var(--vep-font) !important;
}
#vep-handles [hidden] { display: none !important; }

#vep-handles .vep-h {
    position: fixed !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    opacity: .75;
    transition: opacity .12s ease;
}
#vep-handles .vep-h::after {
    content: '';
    position: absolute;
    border-radius: 2px;
}
#vep-handles .vep-h:hover { opacity: 1; }

/* ── largura: barra sólida na borda externa ── */
#vep-handles .vep-h--w {
    width: 12px !important;
    margin-left: -6px !important;
    cursor: ew-resize !important;
}
#vep-handles .vep-h--w::after {
    inset: 0 4px;
    background: var(--vep-accent, #7c5cff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
#vep-handles .vep-h--w:hover::after { inset: 0 3px; }

/* ── espaço interno: linha tracejada no limite do conteúdo ── */
#vep-handles .vep-h--p-left,
#vep-handles .vep-h--p-right {
    width: 12px !important;
    margin-left: -6px !important;
    cursor: ew-resize !important;
}
#vep-handles .vep-h--p-top,
#vep-handles .vep-h--p-bottom {
    height: 12px !important;
    margin-top: -6px !important;
    cursor: ns-resize !important;
}
#vep-handles .vep-h--p-left::after,
#vep-handles .vep-h--p-right::after {
    inset: 0 5px;
    border-left: 1px dashed rgba(38, 208, 206, .95);
}
#vep-handles .vep-h--p-top::after,
#vep-handles .vep-h--p-bottom::after {
    inset: 5px 0;
    border-top: 1px dashed rgba(38, 208, 206, .95);
}
#vep-handles .vep-h--p:hover::after { border-color: rgba(38, 208, 206, 1); }
#vep-handles .vep-h--p-left:hover::after,
#vep-handles .vep-h--p-right:hover::after { border-left-width: 2px; }
#vep-handles .vep-h--p-top:hover::after,
#vep-handles .vep-h--p-bottom:hover::after { border-top-width: 2px; }

/* ── selo com o valor durante o arraste ── */
#vep-handles .vep-h-badge {
    position: fixed !important;
    z-index: 3 !important;
    padding: 5px 9px !important;
    border: 1px solid var(--vep-line-strong, rgba(255, 255, 255, .18)) !important;
    border-radius: 8px !important;
    background: rgba(10, 14, 22, .96) !important;
    color: #eef1f6 !important;
    font: 600 12px/1.2 var(--vep-font) !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45) !important;
}
#vep-handles .vep-h-badge.is-snapped {
    border-color: var(--vep-accent, #7c5cff) !important;
    color: #d3c8ff !important;
}

/* ── guia de encaixe (25/33/50/66/75/100%) ── */
#vep-handles .vep-h-guide {
    position: fixed !important;
    top: 0 !important;
    width: 0 !important;
    height: 100vh !important;
    border-left: 1px dashed var(--vep-accent, #7c5cff) !important;
    opacity: .85 !important;
    pointer-events: none !important;
}

body.vep-handle-dragging,
body.vep-handle-dragging * { user-select: none !important; }

/* A Biblioteca de Mídia e o arraste de reposicionar têm prioridade na tela. */
body.vep-media-open #vep-handles,
body.vep-drag-active #vep-handles { display: none !important; }

/* Alvos maiores para o dedo em tablet/celular. */
@media (max-width: 900px) {
    #vep-handles .vep-h--w,
    #vep-handles .vep-h--p-left,
    #vep-handles .vep-h--p-right { width: 24px !important; margin-left: -12px !important; }
    #vep-handles .vep-h--p-top,
    #vep-handles .vep-h--p-bottom { height: 24px !important; margin-top: -12px !important; }
    #vep-handles .vep-h--w::after { inset: 0 10px; }
    #vep-handles .vep-h--p-left::after,
    #vep-handles .vep-h--p-right::after { inset: 0 11px; }
    #vep-handles .vep-h--p-top::after,
    #vep-handles .vep-h--p-bottom::after { inset: 11px 0; }
}

@media (prefers-reduced-motion: reduce) {
    #vep-handles .vep-h { transition: none !important; }
}

/* Bloco explicativo do arraste dentro do modal de atalhos. */
.vep-shortcuts-tip {
    display: grid !important;
    gap: 6px !important;
    margin-top: 14px !important;
    padding: 12px !important;
    border: 1px solid var(--vep-line, rgba(255, 255, 255, .12)) !important;
    border-radius: 10px !important;
    background: rgba(124, 92, 255, .09) !important;
}
.vep-shortcuts-tip strong { font-size: 12.5px !important; }
.vep-shortcuts-tip span {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: rgba(226, 232, 240, .82) !important;
}
.vep-shortcuts-tip b { color: #d3c8ff !important; font-weight: 700 !important; }

/* Dica de descoberta das alças, no painel lateral. */
.vep-handles-hint {
    display: grid !important;
    gap: 3px !important;
    margin: 0 14px 12px !important;
    padding: 9px 11px !important;
    border: 1px dashed var(--vep-line-strong, rgba(255, 255, 255, .18)) !important;
    border-radius: 10px !important;
    background: rgba(38, 208, 206, .07) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    color: rgba(226, 232, 240, .8) !important;
}
.vep-handles-hint strong { font-size: 12px !important; color: #eef1f6 !important; }