*[contenteditable="true"]:focus,
*[contenteditable]:focus {
    outline: none !important; box-shadow: none !important;
}

/* Strip browser default focus rings everywhere in the editor (buttons, inputs,
   selects, links). */
.visualeditor :focus,
.visualeditor :focus-visible,
.content :focus,
.content :focus-visible {
    outline: none !important;
}


.visualeditor {
    position: relative;
    display: grid;
    gap: 10px;
}
.vetitleheading {
    min-height: 48px;
    margin: 0 0 4px;
    border-bottom: 2px solid var(--softw) !important;
}
.vetitleheading:focus,
.vecanvas:focus {
    outline: none;
}


.vetoolbar {
    display: flex; flex-wrap: wrap;
    flex-direction: column;
    gap: 0; padding: 8px;
    border-radius: 12px; background: rgba(0,0,0,0.2);
}
.vemainbuttons {
    display: flex; flex-wrap: wrap;
    gap: 5px; align-items: center;
}

.veiconbtn {
    border: 0;
    width: 64px; height: 64px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: none;
}
.veiconbtn:hover,
.veiconbtn.isactive {
    background: rgba(0,0,0,0.1);
}
.veiconbtn img {
    width: 64px; height: 64px;
    object-fit: contain;
}

.vecompound {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 64px; height: 64px;
    padding: 0;
    border-radius: 8px;
    background: none;
}
/* Wide variant: a single 8-button compound laid out 4 columns x 2 rows. */
.vecompound.vecompoundwide {
    grid-template-columns: repeat(4, 1fr);
    width: 128px;
}

/* Any button placed directly inside a .vecompound is shrunk to fit the
   grid cell, regardless of whether it carries .vesubbtn or .veiconbtn. */
.vecompound > button {
    width: 100%; height: 100%;
    border: 0; border-radius: 4px;
    background: none;
    display: inline-flex;
    align-items: center; justify-content: center;
}
.vecompound > button img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.vecompound > button:hover {
    background: rgba(0,0,0,0.1);
}
.vecompound > button.isactive {
    background: rgba(0,0,0,0.25);
}

/* Reset button is pinned to the bottom-right of the page's content area
   instead of the toolbar row, with .content providing the positioning
   context. main.js moves the button out of .visualeditor (which itself is
   position:relative for the link panel) into .content on enterMode. */
.content {
    position: relative;
}
.vetoolbarreset {
    position: absolute;
    right: 0; bottom: 0;
    margin-left: 0;
    width: auto; height: 35px;
    padding: 10px 26px;
    color: #fff;
    font: inherit;
    text-shadow: var(--stroke);
    border: 0;
    z-index: 50;
    background: url("../assets/images/buttons/mbutton.webp") no-repeat center / 100% 100%;
}
.vetoolbarreset:active {
    background-image: url("../assets/images/buttons/mbuttonactive.webp");
}

/* Code block language picker (lives at top-right inside each pre.codeblock). */
.visualeditor pre.codeblock {
    position: relative;
}
.vecodelangbar {
    position: absolute;
    top: 6px; right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8em;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}
.vecodelangselect {
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 3px 8px;
    font: inherit;
    cursor: url("../assets/static/cursors/active.cur"), default !important;
}
.vecodehint {
    opacity: 0.6;
    color: #fff;
}

.veiconbtn,
.vesubbtn,
.vewidgetbtn,
.verowactions,
.vetoolbarreset {
    cursor: url("../assets/static/cursors/active.cur"), default !important;
}

.velinkpanel {
    display: none;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 6px; padding: 8px;
    border-radius: 10px; background: rgba(0,0,0,0.3);
    position: absolute;
    inset: auto auto auto auto;
    z-index: 40;
}
.velinkpanel.open {
    display: grid;
}
.velinkpanel:not(.inline) {
    position: static;
}
.velinkpanel input {
    border: 0; border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    color: #fff;
    background: rgba(0,0,0,0.25);
    text-shadow: var(--stroke);
}
.velinkpanel input::placeholder {
    color: rgba(255,255,255,0.55);
}
.velinkpanel button {
    border: 0;
    padding: 10px 22px;
    font: inherit;
    color: #fff;
    text-shadow: var(--stroke);
    background: url("../assets/images/buttons/mbutton.webp") no-repeat center / 100% 100%;
}
.velinkpanel button:active {
    background-image: url("../assets/images/buttons/mbuttonactive.webp");
}

.veresetconfirm {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5);
    z-index: 60;
}
.veresetconfirm.open {
    display: inline-flex;
}
.veresetconfirm button {
    background: none;
    border: 0;
    padding: 0;
}
.veresetconfirm img {
    width: 24px;
    height: 24px;
}

.veeditorframe {
    position: relative;
    border-radius: 0;
    overflow: visible;
}
.vecanvas {
    width: 100%; min-height: 360px;
    border: 0; padding: 12px;
    color: #f7f7f7; background: transparent;
    font: inherit; line-height: 1.25;
    text-shadow: var(--stroke);
    overflow-wrap: anywhere;
}
.vecanvas p {
    margin: 0 0 10px;
}

.verawpanel {
    margin: 0;
    white-space: pre-wrap;
}

.vepreviewpanel,
.verawpanel {
    display: none;
}
.visualeditor.vemode-preview .vepreviewpanel {
    display: block;
}
.visualeditor.vemode-raw .verawpanel {
    display: block;
}
.visualeditor.vemode-preview .vetoolbar,
.visualeditor.vemode-preview .velinkpanel,
.visualeditor.vemode-preview .vecanvas,
.visualeditor.vemode-preview .vereset,
.visualeditor.vemode-preview .veresetconfirm,
.visualeditor.vemode-raw .vetoolbar,
.visualeditor.vemode-raw .velinkpanel,
.visualeditor.vemode-raw .vecanvas,
.visualeditor.vemode-raw .vereset,
.visualeditor.vemode-raw .veresetconfirm {
    display: none !important;
}

.visualeditor .vereset {
    position: absolute;
    right: 0;
    bottom: -36px;
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    color: #fff;
    background: rgba(0,0,0,0.45);
}

.visualeditor .vepreviewpanel .infobox th,
.visualeditor .vepreviewpanel .infobox td,
.visualeditor .vepreviewpanel .embed figcaption,
.visualeditor .vepreviewpanel .msg .msgtext {
    white-space: pre-wrap;
}

.tabs .tab.vemodetabtop {
    display: inline-flex;
}


.vewidget {
    position: relative; margin: 10px 0;
    padding: 0; border: 0;
    background: transparent;
}
.vewidgethead {
    position: absolute; top: 6px; right: 6px;
    z-index: 8;
    display: inline-flex; gap: 4px;
}
.vewidgetbtn {
    border: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: none;
    display: inline-flex;
    align-items: center; justify-content: center;
}
.vewidgetbtn img {
    width: 16px; height: 16px;
}

.visualeditor .vewidget .infobox,
.visualeditor .vewidget .embed,
.visualeditor .vewidget .msg,
.visualeditor .vewidget .card {
    position: relative;
}

.visualeditor .vewidget.vealignleft .infobox {
    float: left;
    margin: 0 14px 14px 0;
}

.visualeditor .vewidgetinfobox .infobox > h3,
.visualeditor .vewidgetmedia .embed > figcaption,
.visualeditor .vewidgetmsg .msglabel {
    padding-right: 78px;
}

.veiboxrows {
    margin-top: 6px;
}
.visualeditor .vewidgetinfobox .veiboxrows {
    display: table-row-group !important;
}
.visualeditor .vewidgetinfobox .veiboxrow {
    display: table-row !important;
}
.visualeditor .vewidgetinfobox .veiboxrow th,
.visualeditor .vewidgetinfobox .veiboxrow td {
    display: table-cell;
    vertical-align: top;
    padding: 8px 10px;
}
.visualeditor .vewidgetinfobox .veiboxrow .verowactions {
    width: 30px;
    padding: 6px 4px;
    text-align: center;
}
.veiboxrow .verowactions .vewidgetbtn {
    width: 20px;
    height: 20px;
}

.veimagewrap {
    position: relative;
    width: fit-content;
}
.vewidgetimagepreview,
.vewidgetmediapreview {
    width: 100%; max-width: 300px;
    max-height: 300px; object-fit: contain;
}
.visualeditor .veimagepathinput {
    position: absolute;
    left: 6px; bottom: 6px;
    width: 160px;
    max-width: calc(100% - 12px);
    border: 0; border-radius: 7px;
    padding: 3px 6px;
    font: inherit; font-size: 0.75em;
    color: #fff;
    background: rgba(0,0,0,0.25);
}

.vereferences {
    clear: both !important;
    display: flow-root;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 2px solid var(--softw) !important;
    overflow: hidden;
}
.vereferences .veciteentry {
    margin: 6px 0;
}
.veciteindex {
    opacity: 0.85;
}
.vecitedesc,
.vecitelink {
    border-radius: 6px;
    padding: 1px 4px;
    background: rgba(255,255,255,0.1);
}
.visualeditor .vereferences h2,
.visualeditor .vepreviewpanel .vereferences h2 {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}