:root {
    --vhd-border: #d8dde3;
    --vhd-muted: #6b7280;
    --vhd-surface: #ffffff;
    --vhd-soft: #f6f7f9;
    --vhd-accent: #2563eb;
    --vhd-danger: #b91c1c;
    --vhd-radius: 8px;
    --vhd-default-font-family: system-ui;
}

.vhd {
    box-sizing: border-box;
    width: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f2937;
}

.vhd *,
.vhd *::before,
.vhd *::after {
    box-sizing: inherit;
}

.vhd button,
.vhd input,
.vhd select {
    font: inherit;
}

.vhd-topbar {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.vhd-panel,
.vhd-actions,
.vhd-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.vhd-panel {
    padding: 8px;
    background: var(--vhd-soft);
    border: 1px solid var(--vhd-border);
    border-radius: var(--vhd-radius);
}

.vhd-panel > strong {
    margin-right: 4px;
}

.vhd-layout-button,
.vhd-action-button,
.vhd-add-block-button,
.vhd-secondary-button,
.vhd-toolbar-button,
.vhd-mini-button {
    appearance: none;
    border: 1px solid var(--vhd-border);
    background: var(--vhd-surface);
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
}

.vhd-layout-button:hover,
.vhd-action-button:hover,
.vhd-add-block-button:hover,
.vhd-secondary-button:hover,
.vhd-toolbar-button:hover,
.vhd-mini-button:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.vhd-layout-button {
    min-width: 74px;
    padding: 5px 8px;
}

.vhd-layout-button span,
.vhd-layout-button small {
    display: block;
}

.vhd-layout-button span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.vhd-layout-button small {
    margin-top: 2px;
    color: var(--vhd-muted);
}

.vhd-action-button {
    padding: 8px 12px;
}

.vhd-action-button:disabled {
    opacity: .45;
    cursor: default;
}

.vhd-text-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--vhd-border);
    border-radius: var(--vhd-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.vhd-text-toolbar[hidden] {
    display: none;
}

.vhd-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
}

.vhd-toolbar-button svg {
    width: 12px;
    height: 18px;
    fill: currentColor;
}

.vhd-toolbar-select,
.vhd-toolbar-color {
    height: 32px;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    background: #fff;
}

.vhd-toolbar-color {
    width: 38px;
    padding: 2px;
}

.vhd-canvas {
    min-height: 240px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.vhd-empty {
    padding: 70px 20px;
    text-align: center;
    color: var(--vhd-muted);
    background: #fff;
    border: 2px dashed var(--vhd-border);
    border-radius: var(--vhd-radius);
}

.vhd-row-editor {
    position: relative;
    padding: 10px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--vhd-border);
    border-radius: var(--vhd-radius);
}

.vhd-row-controls {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    min-height: 26px;
    margin-bottom: 6px;
}

.vhd-grid {
    display: grid;
    grid-template-columns: repeat(var(--vhd-grid-units), minmax(0, 1fr));
    gap: 12px;
}

.vhd-column {
    grid-column: span var(--vhd-span);
    min-width: 0;
    padding: 10px;
    background: #fafbfc;
    border: 1px dashed #c9cfd6;
    border-radius: 6px;
}

.vhd-block {
    position: relative;
    padding: 8px 12px 12px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
}

.vhd-block:hover,
.vhd-block:focus-within {
    border-color: var(--vhd-border);
}

.vhd-block-controls {
    display: none;
    justify-content: flex-end;
    gap: 3px;
    min-height: 26px;
    margin-bottom: 6px;
}

.vhd-block:hover .vhd-block-controls,
.vhd-block:focus-within .vhd-block-controls,
.vhd-block.vhd-selected .vhd-block-controls {
    display: flex;
}

.vhd-mini-button {
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
}

.vhd-block h1,
.vhd-block h2,
.vhd-block h3,
.vhd-block h4,
.vhd-block h5,
.vhd-block h6,
.vhd-editable-text {
    outline: none;
}

.vhd-block-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    color: var(--vhd-muted);
    font-size: .875rem;
}

.vhd-add-block-button,
.vhd-secondary-button {
    padding: 5px 8px;
    font-size: .875rem;
}

.vhd-image-editor {
    width: 100%;
}

.vhd-image-editor img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.vhd-image-editor.is-empty {
    min-height: 90px;
    border: 1px dashed var(--vhd-border);
    border-radius: 5px;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .025),
            rgba(37, 99, 235, .065)
        );
}

.vhd-button-editor {
    width: 100%;
}

.vhd-preview-button {
    display: inline-block;
    justify-self: start;
    padding: 8px 14px;
    text-decoration: none;
    color: #fff;
    background: var(--vhd-accent);
    border-radius: 5px;
}

.vhd-block-divider hr {
    border: 0;
    border-top: 1px solid #9ca3af;
}

/* HTML export helper classes */
.vhd-row {
    display: grid;
    grid-template-columns: repeat(var(--vhd-grid-units), minmax(0, 1fr));
    gap: 1rem;
}

.vhd-col {
    grid-column: span var(--vhd-span);
}

.vhd-image img {
    max-width: 100%;
    height: auto;
}

.vhd-button {
    display: inline-block;
    text-decoration: none;
}

.vhd-align-left { text-align: left; }
.vhd-align-center { text-align: center; }
.vhd-align-right { text-align: right; }

@media (max-width: 768px) {
    .vhd-topbar {
        display: block;
    }

    .vhd-actions {
        margin-top: 8px;
    }

    .vhd-grid,
    .vhd-row {
        grid-template-columns: 1fr;
    }

    .vhd-column,
    .vhd-col {
        grid-column: 1;
    }
}


.vhd-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vhd-row-chooser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 0;
    opacity: .62;
    transition: opacity .15s ease;
}

.vhd-row-chooser:hover,
.vhd-row-chooser:focus-within {
    opacity: 1;
}

.vhd-row-chooser-label {
    margin-right: 4px;
    color: var(--vhd-muted);
    font-size: .82rem;
}

.vhd-row-choice {
    appearance: none;
    min-width: 54px;
    padding: 4px 6px;
    border: 1px solid var(--vhd-border);
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: inherit;
}

.vhd-row-choice:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.vhd-row-choice span {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.vhd-row-choice small {
    display: none;
}

.vhd-row-editor {
    margin-bottom: 0;
}

.vhd-mini-button:disabled {
    opacity: .35;
    cursor: default;
}


.vhd-toolbar-dropdown {
    position: relative;
}

.vhd-toolbar-dropdown-trigger {
    width: 42px;
    gap: 1px;
}

.vhd-toolbar-caret {
    font-size: .65rem;
    line-height: 1;
}

.vhd-toolbar-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 210px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.vhd-toolbar-menu[hidden] {
    display: none;
}

.vhd-toolbar-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
}

.vhd-toolbar-menu-item:hover,
.vhd-toolbar-menu-item:focus {
    background: var(--vhd-soft);
    outline: none;
}

.vhd-toolbar-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex: 0 0 22px;
}

.vhd-toolbar-menu-icon svg {
    width: 12px;
    height: 18px;
    fill: currentColor;
}

.vhd-list-style-example {
    display: inline-flex;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.vhd-list-style-example.is-bullet {
    font-size: 18px;
    line-height: 1;
}

.vhd-toolbar-color-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 1px solid var(--vhd-border);
    background: var(--vhd-surface);
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}

.vhd-toolbar-color-control:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.vhd-toolbar-color-control svg {
    width: 12px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

.vhd-toolbar-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.vhd-toolbar-button.is-active,
.vhd-toolbar-dropdown-trigger.is-active {
    font-weight: 700;
    background: var(--vhd-soft);
    border-color: #9ca3af;
    box-shadow: inset 0 0 0 1px #9ca3af;
}

.vhd-output-dialog {
    width: min(900px, 90vw);
    max-height: 80%;
    padding: 16px;
    border: 1px solid var(--vhd-border);
    border-radius: 8px;
}

.vhd-output-dialog::backdrop {
    background: rgba(0, 0, 0, .35);
}

.vhd-output-pre {
    max-height: 65vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}


/* Compact add-block control */
.vhd-block-menu {
    display: none;
}

.vhd-block-add {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.vhd-add-trigger,
.vhd-mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--vhd-accent);
    color: #fff;
    cursor: pointer;
}

.vhd-add-trigger {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.vhd-mini-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
}

.vhd-add-trigger:hover,
.vhd-mini-button:hover {
    background: #1d4ed8;
    color: #fff;
}

.vhd-add-trigger:focus-visible,
.vhd-mini-button:focus-visible {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

.vhd-mini-button:disabled {
    opacity: .35;
    cursor: default;
    background: var(--vhd-accent);
    color: #fff;
}

.vhd-block-add-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 40;
    min-width: 150px;
    padding: 4px;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.vhd-block-add-menu[hidden] {
    display: none;
}

.vhd-block-add-item {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
}

.vhd-block-add-item:hover,
.vhd-block-add-item:focus {
    background: var(--vhd-soft);
    outline: none;
}

.vhd-row-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 34px;
    min-width: 52px;
    padding: 4px;
    border: 1px solid var(--vhd-border);
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.vhd-row-choice:hover,
.vhd-row-choice:focus-visible {
    border-color: var(--vhd-accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--vhd-accent);
}

.vhd-layout-preview {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.vhd-layout-preview-cell {
    min-width: 0;
    height: 100%;
    background: #e5e7eb;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
}

.vhd-row-choice:hover .vhd-layout-preview-cell,
.vhd-row-choice:focus-visible .vhd-layout-preview-cell {
    background: #dbeafe;
    border-color: var(--vhd-accent);
}


/* Layout thumbnails: force a single horizontal preview */
.vhd-row-choice > .vhd-layout-preview {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.vhd-row-choice > .vhd-layout-preview > .vhd-layout-preview-cell {
    display: block !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
}

.vhd-row-choice > .vhd-layout-preview > .vhd-layout-preview-cell + .vhd-layout-preview-cell {
    margin-top: 0 !important;
}


.vhd-preview-dialog {
    width: min(1100px, 94vw);
    max-height: 86%;
    padding: 16px;
    border: 1px solid var(--vhd-border);
    border-radius: 8px;
}

.vhd-preview-dialog::backdrop {
    background: rgba(0, 0, 0, .35);
}

.vhd-preview-content {
    margin-top: 12px;
    padding: 20px;
    background: #fff;
    overflow: auto;
}

.vhd-preview-content .vhd-row {
    margin-bottom: 1rem;
}


.vhd-toolbar-separator {
    align-self: stretch;
    width: 1px;
    min-height: 24px;
    margin: 3px 4px;
    background: var(--vhd-border);
    opacity: .75;
}

.vhd-font-size-select {
    width: 82px;
}


/* Default document text size */
.vhd-editable {
    font-size: 12pt;
}


/* Structural controls: compact rectangular buttons */
.vhd-add-trigger,
.vhd-mini-button {
    border-radius: 5px !important;
}

.vhd-add-trigger {
    width: 30px !important;
    height: 26px !important;
    font-size: 1rem !important;
}

.vhd-mini-button {
    width: 28px !important;
    height: 26px !important;
}


.vhd-inline-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

.vhd-inline-image.is-selected {
    outline: 2px solid var(--vhd-accent);
    outline-offset: 2px;
}

.vhd-inline-image-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    padding: 6px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
}

.vhd-inline-image-controls select {
    height: 30px;
    border: 1px solid var(--vhd-border);
    border-radius: 4px;
    background: #fff;
}

.vhd-inline-image-remove {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    background: var(--vhd-accent);
    color: #fff;
    cursor: pointer;
}


.vhd-inline-video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
}


.vhd-inline-video-embed {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}


.vhd-emoji-menu {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 3px;
    width: auto;
    max-width: none;
    padding: 6px;
}

.vhd-emoji-menu[hidden] {
    display: none;
}

.vhd-emoji-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.vhd-emoji-button:hover,
.vhd-emoji-button:focus-visible {
    background: var(--vhd-soft);
    outline: none;
}


.vhd-emoji-picker {
    width: 330px;
    max-width: min(330px, 90vw);
    padding: 6px;
}

.vhd-emoji-tabs {
    display: flex;
    gap: 2px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    overflow-x: auto;
    border-bottom: 1px solid var(--vhd-border);
}

.vhd-emoji-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.vhd-emoji-tab:hover,
.vhd-emoji-tab:focus-visible,
.vhd-emoji-tab.is-active {
    background: var(--vhd-soft);
    outline: none;
}

.vhd-emoji-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--vhd-accent);
}

.vhd-emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
}

.vhd-emoji-picker[hidden] {
    display: none;
}


.vhd-special-picker {
    width: 330px;
    max-width: min(330px, 90vw);
    padding: 6px;
}

.vhd-special-tabs {
    display: flex;
    gap: 2px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    overflow-x: auto;
    border-bottom: 1px solid var(--vhd-border);
}

.vhd-special-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.vhd-special-tab:hover,
.vhd-special-tab:focus-visible,
.vhd-special-tab.is-active {
    background: var(--vhd-soft);
    outline: none;
}

.vhd-special-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--vhd-accent);
}

.vhd-special-panel {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
}

.vhd-special-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.vhd-special-button:hover,
.vhd-special-button:focus-visible {
    background: var(--vhd-soft);
    outline: none;
}

.vhd-special-picker[hidden] {
    display: none;
}


.vhd-font-family-select {
    width: 132px;
}


.vhd-block-spacer {
    overflow: visible;
}

.vhd-spacer-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 92px;
}

.vhd-spacer-value {
    flex: 0 0 54px;
    min-width: 54px;
    font-variant-numeric: tabular-nums;
    color: var(--vhd-muted);
    text-align: left;
}

.vhd-spacer-range {
    flex: 1;
    min-width: 0;
}

.vhd-spacer-preview {
    width: 100%;
    min-height: 0;
    margin-top: 8px;
    border: 1px dashed var(--vhd-border);
    border-radius: 4px;
    background:
        linear-gradient(
            to bottom,
            rgba(37, 99, 235, .03),
            rgba(37, 99, 235, .06)
        );
    transition: height .05s linear;
}

.vhd-spacer-preview[style*="height: 0px"] {
    border-width: 0 0 1px;
    border-radius: 0;
}

.vhd-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 12px;
    align-items: start;
}

.vhd-properties {
    position: sticky;
    top: calc(var(--vhd-toolbar-sticky-offset, 0px) + 62px);
    padding: 12px;
    background: var(--vhd-surface);
    border: 1px solid var(--vhd-border);
    border-radius: var(--vhd-radius);
    max-height: calc(100vh - var(--vhd-toolbar-sticky-offset, 0px) - 74px);
    overflow-y: auto;
}

.vhd-properties h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.vhd-properties-empty {
    margin: 0;
    color: var(--vhd-muted);
    font-size: .875rem;
}

.vhd-property-field {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    color: var(--vhd-muted);
    font-size: .82rem;
}

.vhd-property-field input,
.vhd-property-field select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    color: #1f2937;
}

.vhd-property-field input[type="color"] {
    padding: 2px;
}

.vhd-selected {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .vhd-workspace {
        grid-template-columns: 1fr;
    }

    .vhd-properties {
        position: static;
        order: 2;
    }
}


/* Vanilla Email Designer-like add-block chooser */
.vhd-block-add {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.vhd-add-trigger {
    position: absolute;
    top: -13px;
    left: 50%;
    z-index: 42;
    width: 28px !important;
    height: 26px !important;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: 3px !important;
    background: var(--vhd-accent);
    color: #fff;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
}

.vhd-add-trigger:hover,
.vhd-add-trigger:focus-visible {
    background: #1d4ed8;
    color: #fff;
}

.vhd-block-add-menu {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 41;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 5px;
    width: 218px;
    padding: 8px;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--vhd-border);
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.vhd-block-add-menu[hidden] {
    display: none;
}

.vhd-block-add-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    color: inherit;
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
}

.vhd-block-add-item:hover,
.vhd-block-add-item:focus-visible {
    border-color: #b8c0cb;
    background: var(--vhd-soft);
    outline: none;
}

@media (max-width: 420px) {
    .vhd-block-add-menu {
        grid-template-columns: 1fr;
        width: min(218px, calc(100vw - 32px));
    }
}

/* Compact visual section chooser */
.vhd-row-chooser {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 30px;
    margin: 10px 0;
    border-top: 1px dashed var(--vhd-border);
}

.vhd-row-add-trigger {
    position: absolute;
    top: -14px;
    left: 50%;
    z-index: 31;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: 3px;
    background: var(--vhd-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,.12);
}

.vhd-row-add-trigger:hover,
.vhd-row-add-trigger:focus-visible {
    background: #1d4ed8;
    outline: none;
}

.vhd-row-add-menu {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 52px);
    gap: 5px;
    padding: 8px;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--vhd-border);
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.vhd-row-add-menu[hidden] {
    display: none;
}

.vhd-row-add-menu .vhd-row-choice {
    width: 52px;
    height: 38px;
    padding: 5px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.vhd-row-add-menu .vhd-row-choice:hover,
.vhd-row-add-menu .vhd-row-choice:focus-visible {
    border-color: #b8c0cb;
    background: var(--vhd-soft);
    outline: none;
}

.vhd-row-add-menu .vhd-layout-preview {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
}

.vhd-row-add-menu .vhd-layout-preview-cell {
    min-width: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    background: #eef2f7;
}

@media (max-width: 420px) {
    .vhd-row-add-menu {
        grid-template-columns: repeat(2, 52px);
    }
}


/* Stable block action row: controls never overlap the editable content */
.vhd-block {
    padding-top: 6px;
}

.vhd-block-controls {
    display: flex !important;
    justify-content: flex-end;
    gap: 3px;
    min-height: 26px;
    margin-bottom: 6px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vhd-block:hover .vhd-block-controls,
.vhd-block:focus-within .vhd-block-controls,
.vhd-block.vhd-selected .vhd-block-controls {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.vhd-block > .vhd-editable-text,
.vhd-block > h1,
.vhd-block > h2,
.vhd-block > h3,
.vhd-block > h4,
.vhd-block > h5,
.vhd-block > h6,
.vhd-block > .vhd-image-editor,
.vhd-block > .vhd-button-editor,
.vhd-block > hr,
.vhd-block > .vhd-spacer-editor {
    position: relative;
    z-index: 1;
}


/* 0.6 — simplified editing surface */
.vhd-row-editor {
    border-color: transparent;
    box-shadow: none;
    transition: border-color .15s ease;
}

.vhd-row-editor:hover,
.vhd-row-editor.vhd-selected,
.vhd-row-editor:focus-within {
    border-color: var(--vhd-border);
}

.vhd-column {
    border-color: transparent;
    background: transparent;
    transition: border-color .15s ease, background-color .15s ease;
}

.vhd-column:hover,
.vhd-column.vhd-selected,
.vhd-column:focus-within {
    border-color: #d5dbe3;
    background: #fafbfc;
}

.vhd-block {
    border-color: transparent;
    box-shadow: none;
}

.vhd-block:hover,
.vhd-block:focus-within,
.vhd-block.vhd-selected {
    border-color: #d8dde3;
}

.vhd-row-controls {
    opacity: .28;
    transition: opacity .15s ease;
}

.vhd-row-editor:hover > .vhd-row-controls,
.vhd-row-editor.vhd-selected > .vhd-row-controls,
.vhd-row-editor:focus-within > .vhd-row-controls {
    opacity: 1;
}

.vhd-content-add {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-color: transparent;
    transition: opacity .15s ease, max-height .15s ease, margin-top .15s ease, padding-top .15s ease;
}

.vhd-column:hover > .vhd-content-add,
.vhd-column:focus-within > .vhd-content-add,
.vhd-column.vhd-selected > .vhd-content-add {
    opacity: 1;
    max-height: 42px;
    margin-top: 10px;
    padding-top: 14px;
    border-top-color: #e5e7eb;
}

.vhd-row-chooser {
    opacity: .42;
}

.vhd-row-chooser:hover,
.vhd-row-chooser:focus-within {
    opacity: 1;
}

.vhd-editable-text.vhd-is-empty:not(:focus)::before {
    content: attr(data-placeholder);
    color: var(--vhd-muted);
    pointer-events: none;
}

@media (max-width: 900px) {
    .vhd-content-add {
        opacity: 1;
        max-height: 42px;
        margin-top: 10px;
        padding-top: 14px;
        border-top-color: #e5e7eb;
    }
}


.vhd-custom-actions-menu {
    min-width: 210px;
}

.vhd-custom-action-item {
    display: grid !important;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
}

.vhd-custom-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    font-size: 16px;
}

.vhd-custom-action-icon svg {
    width: 12px;
    height: 18px;
}

.vhd-custom-action-label {
    white-space: nowrap;
}


.vhd-image-gallery-dialog {
    padding: 0;
    border: 1px solid var(--vhd-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    width: 95vw;
    max-width: 95vw;
    height: 95vh;
    max-height: 95vh;
    margin: 2.5vh auto;
}

.vhd-image-gallery-dialog::backdrop {
    background: rgba(0, 0, 0, .42);
}

.vhd-image-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid var(--vhd-border);
    background: var(--vhd-soft);
}

.vhd-image-gallery-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 22px;
    cursor: pointer;
}

.vhd-image-gallery-close:hover,
.vhd-image-gallery-close:focus-visible {
    background: #e5e7eb;
    outline: none;
}

.vhd-image-gallery-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    min-height: 0;
}


/* Inline images use the main Properties panel */
.vhd-inline-image.is-selected {
    outline: 2px solid rgba(37, 99, 235, .55);
    outline-offset: 2px;
}

.vhd-inline-image-controls {
    display: none !important;
}


.vhd-remove-link-button {
    width: 100%;
    margin-top: 4px;
}


.vhd-version-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 7px;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    color: var(--vhd-muted);
    background: var(--vhd-surface);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    user-select: none;
}

.vhd-version-badge svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vhd-version-badge-text {
    font-weight: 700;
    letter-spacing: .03em;
}


.vhd-version-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 28px;
    padding: 2px 6px;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    color: var(--vhd-muted);
    background: var(--vhd-surface);
    cursor: pointer;
}

.vhd-version-badge:hover,
.vhd-version-badge:focus-visible {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, .18), 0 3px 10px rgba(255, 60, 172, .2);
    outline: none;
}

.vhd-version-badge .vhd-brand-logo {
    width: 31px;
    height: 21px;
    filter: drop-shadow(0 1px 2px rgba(17, 24, 39, .25));
}

.vhd-about-dialog {
    border: 0;
    border-radius: 12px;
    padding: 0;
    max-width: 390px;
    width: calc(100% - 32px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.vhd-about-dialog::backdrop {
    background: rgba(0, 0, 0, .35);
}

.vhd-about-content {
    padding: 26px 28px 24px;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vhd-about-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--vhd-accent, #2563eb);
}

.vhd-about-logo .vhd-brand-logo {
    width: 72px;
    height: 48px;
    filter: drop-shadow(0 5px 8px rgba(139, 92, 246, .28));
}

.vhd-about-content h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.vhd-about-content p {
    margin: 14px 0;
    line-height: 1.5;
}

.vhd-about-version {
    margin-top: 0 !important;
    color: var(--vhd-muted, #6b7280);
    font-size: .92rem;
}


/* 0.6.21 — first-zone add control uses the exact same geometry as row actions */
.vhd-row-chooser-inline {
    position: relative;
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 26px;
    padding: 0;
    margin: 0;
    opacity: 1;
    line-height: 1;
}

.vhd-row-chooser-inline .vhd-row-add-trigger {
    position: relative;
    top: -1px;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 26px !important;
    min-width: 28px;
    margin: 0;
    padding: 0;
    transform: none;
    line-height: 1;
    border-radius: 5px !important;
    box-shadow: none;
    vertical-align: top;
}

.vhd-row-chooser-inline .vhd-row-add-menu {
    top: 29px;
    right: 0;
    left: auto;
    transform: none;
}


/* 0.6.32 — blockquote presentation */
.vhd-editable-text blockquote,
.vhd-preview-content blockquote,
.vhd-content blockquote {
    position: relative;
    margin: 1.25em 0 1.25em 2em;
    padding: 1em 1.25em 1em 2.9em;
    border: 1px solid #d8dde5;
    border-left: 4px solid #9ca3af;
    border-radius: 6px;
    background: #f7f8fa;
    color: inherit;
}

.vhd-editable-text blockquote::before,
.vhd-preview-content blockquote::before,
.vhd-content blockquote::before {
    content: "❝";
    position: absolute;
    top: .25em;
    left: .45em;
    color: #9ca3af;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
    opacity: .9;
    pointer-events: none;
}

.vhd-editable-text blockquote::after,
.vhd-preview-content blockquote::after,
.vhd-content blockquote::after {
    content: "❞";
    position: absolute;
    right: .45em;
    bottom: .15em;
    color: #c2c7cf;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
    opacity: .65;
    pointer-events: none;
}

.vhd-editable-text blockquote[data-vhd-quote-marks="curly"]::before,
.vhd-preview-content blockquote[data-vhd-quote-marks="curly"]::before,
.vhd-content blockquote[data-vhd-quote-marks="curly"]::before { content: "“"; }
.vhd-editable-text blockquote[data-vhd-quote-marks="curly"]::after,
.vhd-preview-content blockquote[data-vhd-quote-marks="curly"]::after,
.vhd-content blockquote[data-vhd-quote-marks="curly"]::after { content: "”"; }
.vhd-editable-text blockquote[data-vhd-quote-marks="french"]::before,
.vhd-preview-content blockquote[data-vhd-quote-marks="french"]::before,
.vhd-content blockquote[data-vhd-quote-marks="french"]::before { content: "«"; }
.vhd-editable-text blockquote[data-vhd-quote-marks="french"]::after,
.vhd-preview-content blockquote[data-vhd-quote-marks="french"]::after,
.vhd-content blockquote[data-vhd-quote-marks="french"]::after { content: "»"; }
.vhd-editable-text blockquote[data-vhd-quote-marks="straight"]::before,
.vhd-preview-content blockquote[data-vhd-quote-marks="straight"]::before,
.vhd-content blockquote[data-vhd-quote-marks="straight"]::before,
.vhd-editable-text blockquote[data-vhd-quote-marks="straight"]::after,
.vhd-preview-content blockquote[data-vhd-quote-marks="straight"]::after,
.vhd-content blockquote[data-vhd-quote-marks="straight"]::after { content: '"'; }
.vhd-editable-text blockquote[data-vhd-quote-marks="none"]::before,
.vhd-preview-content blockquote[data-vhd-quote-marks="none"]::before,
.vhd-content blockquote[data-vhd-quote-marks="none"]::before,
.vhd-editable-text blockquote[data-vhd-quote-marks="none"]::after,
.vhd-preview-content blockquote[data-vhd-quote-marks="none"]::after,
.vhd-content blockquote[data-vhd-quote-marks="none"]::after { content: none; }

.vhd-editable-text blockquote > :first-child,
.vhd-preview-content blockquote > :first-child,
.vhd-content blockquote > :first-child {
    margin-top: 0;
}

.vhd-editable-text blockquote > :last-child,
.vhd-preview-content blockquote > :last-child,
.vhd-content blockquote > :last-child {
    margin-bottom: 0;
}


/* 0.6.34 — sticky toolbar for long documents */
.vhd.vhd-sticky-toolbar .vhd-text-toolbar {
    position: sticky;
    top: var(--vhd-toolbar-sticky-offset, 0px);
    z-index: 120;
    background: var(--vhd-surface, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.vhd.vhd-sticky-toolbar .vhd-text-toolbar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--vhd-border, #e5e7eb);
    pointer-events: none;
}


/* 0.6.41 — permanent document statistics */
.vhd-document-stats {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    padding: 10px 11px;
    border: 1px solid var(--vhd-border);
    border-radius: var(--vhd-radius);
    background: #f8fafc;
}

.vhd-document-stats-title {
    margin-bottom: 2px;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
}

.vhd-document-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
    color: var(--vhd-muted);
}

.vhd-document-stat strong {
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}


/* 0.6.45 — properties-driven media/content controls */
.vhd-property-action {
    margin-bottom: 10px;
}

.vhd-property-action .vhd-secondary-button {
    width: 100%;
}

.vhd-property-action .vhd-choose-image-button {
    border-color: var(--vhd-accent);
    background: var(--vhd-accent);
    color: #fff;
    font-weight: 600;
}

.vhd-property-action .vhd-choose-image-button:hover,
.vhd-property-action .vhd-choose-image-button:focus-visible {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}


/* 0.6.46 — fullscreen editor mode */
.vhd.vhd-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--vhd-surface);
    overflow: hidden;
}

.vhd.vhd-fullscreen .vhd-text-toolbar {
    position: sticky;
    top: 0;
    z-index: 2147483001;
}

.vhd.vhd-fullscreen .vhd-workspace {
    height: calc(100vh - 52px);
    overflow: hidden;
}

.vhd.vhd-fullscreen .vhd-canvas {
    height: 100%;
    overflow-y: auto;
}

.vhd.vhd-fullscreen .vhd-properties {
    top: 0;
    max-height: 100%;
    height: 100%;
}

.vhd [data-vhd-toolbar-key="fullscreen"].is-active {
    background: var(--vhd-accent-soft, rgba(37, 99, 235, .12));
    color: var(--vhd-accent);
}


/* 0.6.47 — public status area in Properties panel */
.vhd-status {
    margin: -2px 0 14px;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: .78rem;
    line-height: 1.35;
}

.vhd-status[hidden] {
    display: none;
}

.vhd-status-info {
    background: #f3f4f6;
    color: #4b5563;
}

.vhd-status-success {
    background: #ecfdf5;
    color: #047857;
}

.vhd-status-error {
    background: #fef2f2;
    color: #b91c1c;
}


/* 0.6.49 — compact borderless toolbar experiment */
.vhd-text-toolbar {
    gap: 3px;
    padding: 5px 6px;
    background: #f3f4f6;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.vhd-toolbar-button,
.vhd-toolbar-color-control {
    width: 30px;
    height: 28px;
    padding: 2px;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.vhd-toolbar-dropdown-trigger {
    width: 36px;
    gap: 0;
}

.vhd-toolbar-button:hover,
.vhd-toolbar-button:focus-visible,
.vhd-toolbar-color-control:hover,
.vhd-toolbar-color-control:focus-within,
.vhd-toolbar-dropdown-trigger:hover,
.vhd-toolbar-dropdown-trigger:focus-visible {
    border: 0;
    background: #e5e7eb;
    outline: none;
}

.vhd-toolbar-button.is-active,
.vhd-toolbar-dropdown-trigger.is-active {
    border: 0;
    background: #dbe3ee;
    box-shadow: none;
}

.vhd-toolbar-select,
.vhd-toolbar-color {
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: #e9ecef;
}

.vhd-toolbar-select {
    padding: 2px 4px;
}

.vhd-toolbar-color {
    width: 32px;
    padding: 1px;
}

.vhd-toolbar-separator {
    margin: 0 2px;
}

.vhd-toolbar-caret {
    margin-left: -1px;
}

.vhd-toolbar-button svg,
.vhd-toolbar-color-control svg {
    width: 17px;
    height: 17px;
}


/* 0.6.50 — Find / Replace */
.vhd-search-dialog {
    width: min(520px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--vhd-border);
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.vhd-search-dialog::backdrop {
    background: rgba(15, 23, 42, .28);
}

.vhd-search-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vhd-border);
    background: #f3f4f6;
}

.vhd-search-dialog-header .vhd-secondary-button {
    width: 28px;
    height: 28px;
    padding: 0;
}

.vhd-search-field {
    display: grid;
    gap: 4px;
    padding: 10px 12px 0;
    font-size: .82rem;
    color: var(--vhd-muted);
}

.vhd-search-field input {
    width: 100%;
    height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    color: #1f2937;
}

.vhd-search-options {
    display: flex;
    align-items: center;
    padding: 10px 12px 0;
}

.vhd-search-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--vhd-muted);
}

.vhd-search-status {
    min-height: 20px;
    padding: 8px 12px 0;
    font-size: .78rem;
    color: var(--vhd-muted);
}

.vhd-search-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px 12px;
}

.vhd-search-actions .vhd-secondary-button,
.vhd-search-actions .vhd-action-button {
    padding: 6px 9px;
}


/* 0.6.51 — superscript/subscript toolbar icons */
.vhd-toolbar-script-icon {
    display: inline-block;
    min-width: 12px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.vhd-toolbar-script-icon sup,
.vhd-toolbar-script-icon sub {
    font-size: .62em;
    line-height: 0;
}


/* 0.6.53 — grouped secondary character formatting */
.vhd-toolbar-more-format-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.vhd-toolbar-formatting-menu {
    min-width: 225px;
}

.vhd-toolbar-menu-color-item {
    cursor: default;
}

.vhd-toolbar-menu-color-item:hover {
    background: var(--vhd-soft);
}

.vhd-toolbar-menu-color-item > span:nth-child(2) {
    flex: 1;
}

.vhd-toolbar-color-control-menu {
    width: 28px;
    height: 24px;
    margin-left: auto;
    flex: 0 0 28px;
    border-radius: 4px;
    background: #f3f4f6;
}

.vhd-toolbar-color-control-menu:hover,
.vhd-toolbar-color-control-menu:focus-within {
    background: #e5e7eb;
}


/* 0.6.54 — visual image resizing */
.vhd-image-resize-frame {
    position: relative;
    max-width: 100%;
    user-select: none;
}

.vhd-image-resize-frame > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.vhd-image-resize-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: var(--vhd-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    cursor: ew-resize;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .12s ease;
    touch-action: none;
    z-index: 3;
}

.vhd-image-resize-handle-left {
    left: -6px;
}

.vhd-image-resize-handle-right {
    right: -6px;
}

.vhd-block-image:hover .vhd-image-resize-handle,
.vhd-block-image:focus-within .vhd-image-resize-handle,
.vhd-block-image.vhd-selected .vhd-image-resize-handle,
.vhd-image-resize-frame.is-resizing .vhd-image-resize-handle {
    opacity: 1;
}

.vhd-image-resize-frame.is-resizing {
    outline: 1px dashed var(--vhd-accent);
    outline-offset: 3px;
}

@media (pointer: coarse) {
    .vhd-image-resize-handle {
        width: 12px;
        height: 36px;
    }

    .vhd-image-resize-handle-left {
        left: -9px;
    }

    .vhd-image-resize-handle-right {
        right: -9px;
    }
}


/* 0.6.55 — block drag and drop */
.vhd-block-drag-handle {
    cursor: grab;
    font-size: .78rem;
    letter-spacing: -2px;
    touch-action: none;
}

.vhd-block-drag-handle:active {
    cursor: grabbing;
}

.vhd-block-drag-source {
    opacity: .35;
}

.vhd-block-drop-indicator {
    height: 3px;
    margin: 5px 2px;
    border-radius: 999px;
    background: var(--vhd-accent);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .12);
    pointer-events: none;
}

.vhd-block-drag-ghost {
    position: fixed;
    z-index: 2147483001;
    padding: 6px 10px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    color: #374151;
    font-size: .78rem;
    line-height: 1.2;
    opacity: .92;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

body.vhd-block-dragging {
    cursor: grabbing;
}

.vhd-column:has(> .vhd-block-drop-indicator) {
    outline: 1px solid rgba(37, 99, 235, .24);
    outline-offset: 2px;
}


/* 0.6.62 — vertical zone drag and drop */
.vhd-row-drag-handle {
    cursor: grab;
    font-size: .78rem;
    letter-spacing: -2px;
    touch-action: none;
}

.vhd-row-drag-handle:active {
    cursor: grabbing;
}

.vhd-row-drag-source {
    opacity: .35;
}

.vhd-row-drop-indicator {
    height: 4px;
    margin: 7px 2px;
    border-radius: 999px;
    background: var(--vhd-accent);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .12);
    pointer-events: none;
}

.vhd-row-drag-ghost {
    position: fixed;
    z-index: 2147483001;
    padding: 6px 10px;
    border: 1px solid var(--vhd-border);
    border-radius: 5px;
    background: #fff;
    color: #374151;
    font-size: .78rem;
    line-height: 1.2;
    opacity: .92;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

body.vhd-row-dragging {
    cursor: grabbing;
}


/* 0.6.65 — table block */
.vhd-table-editor {
    width: 100%;
    overflow-x: auto;
}

.vhd-table-editor .vhd-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.vhd-table-editor th,
.vhd-table-editor td {
    min-width: 70px;
    outline: none;
}

.vhd-table-editor th:focus,
.vhd-table-editor td:focus {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .35);
}


/* 0.6.66 — contextual table editing */
.vhd-table-editor .vhd-table-cell-selected {
    position: relative;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .45);
}

.vhd-table-editor .vhd-table-cell-selected::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px dashed rgba(37, 99, 235, .28);
    pointer-events: none;
}


/* 0.6.67 — table contextual structure menu */
.vhd-table-editor th,
.vhd-table-editor td {
    position: relative;
}

.vhd-table-cell-menu-trigger {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: #4b5563;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.vhd-table-cell-selected > .vhd-table-cell-menu-trigger,
.vhd-table-editor th:hover > .vhd-table-cell-menu-trigger,
.vhd-table-editor td:hover > .vhd-table-cell-menu-trigger {
    display: block;
}

.vhd-table-cell-menu-trigger:hover,
.vhd-table-cell-menu-trigger:focus {
    background: #e5e7eb;
}

.vhd-table-context-menu {
    position: fixed;
    z-index: 2147483002;
    min-width: 220px;
    padding: 5px;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.vhd-table-context-item {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1f2937;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.vhd-table-context-item:hover,
.vhd-table-context-item:focus {
    background: #f3f4f6;
    outline: none;
}

.vhd-table-context-item:disabled {
    color: #9ca3af;
    cursor: default;
    background: transparent;
}

.vhd-table-context-separator {
    height: 1px;
    margin: 5px 3px;
    background: #e5e7eb;
}


/* 0.6.68 — keep table editor controls outside saved cell content */
.vhd-table-cell-content {
    display: block;
    width: 100%;
    min-height: 1.4em;
    outline: none;
    cursor: text;
}

.vhd-table-cell-selected > .vhd-table-cell-content:focus {
    outline: none;
}


/* 0.6.69 — table column widths */
.vhd-table-context-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 9px;
    color: #374151;
    font-size: .875rem;
}

.vhd-table-context-width-input {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.vhd-table-context-width input {
    width: 62px;
    padding: 4px 5px;
    border: 1px solid var(--vhd-border);
    border-radius: 4px;
    font: inherit;
    text-align: right;
}

.vhd-table-context-width input:focus {
    outline: 2px solid rgba(37, 99, 235, .22);
    outline-offset: 1px;
}


/* 0.6.70 — one contextual toolbar per table */
.vhd-table-editor {
    position: relative;
    padding-top: 0;
}

.vhd-table-toolbar[hidden] {
    display: none;
}

.vhd-table-toolbar {
    position: absolute;
    top: -34px;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 3px;
    transform: translateX(-50%);
    max-width: calc(100% - 8px);
    padding: 4px 5px;
    border: 1px solid var(--vhd-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    white-space: nowrap;
}

.vhd-table-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 27px;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #374151;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.vhd-table-toolbar-button:hover,
.vhd-table-toolbar-button:focus {
    background: #e5e7eb;
    outline: none;
}

.vhd-table-toolbar-button:disabled {
    color: #9ca3af;
    cursor: default;
    background: transparent;
}

.vhd-table-toolbar-separator {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: #d1d5db;
}

.vhd-table-toolbar-width {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
    color: #4b5563;
    font-size: .78rem;
}

.vhd-table-toolbar-width-input {
    width: 56px;
    height: 27px;
    padding: 2px 4px;
    border: 1px solid var(--vhd-border);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    text-align: right;
}

.vhd-table-toolbar-width-input:focus {
    border-color: #9ca3af;
    outline: 2px solid rgba(37, 99, 235, .18);
    outline-offset: 0;
}

/* 0.6.67/0.6.69 per-cell popup controls are no longer used. */
.vhd-table-cell-menu-trigger,
.vhd-table-context-menu {
    display: none !important;
}

@media (max-width: 720px) {
    .vhd-table-editor {
        padding-top: 0;
    }

    .vhd-table-toolbar {
        top: -68px;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
}


/* 0.6.72 — table cells themselves are editable again */
.vhd-table-editor th[contenteditable="true"],
.vhd-table-editor td[contenteditable="true"] {
    cursor: text;
    outline: none;
}

.vhd-table-editor th[contenteditable="true"]:focus,
.vhd-table-editor td[contenteditable="true"]:focus {
    outline: none;
}

/*
 * The toolbar occupies the existing block-control line instead of reserving
 * an additional row above the table.
 */
.vhd-block-table.vhd-selected .vhd-table-toolbar,
.vhd-block-table:focus-within .vhd-table-toolbar {
    top: -34px;
}


/* 0.6.73 — keep contextual table toolbar visible above the table */
.vhd-table-editor {
    position: relative;
    padding-top: 0;
    overflow: visible;
}

.vhd-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.vhd-table-toolbar {
    top: -34px;
    overflow: visible;
}


/* 0.6.74 — rectangular multi-cell selection */
.vhd-table-editor .vhd-table-cell-selected {
    box-shadow:
        inset 0 0 0 2px rgba(37, 99, 235, .48),
        inset 0 0 0 9999px rgba(37, 99, 235, .055);
}



/* 0.6.77 — mouse cell selection and direct column resizing */
.vhd-table-scroll {
    position: relative;
}

.vhd-table-resize-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
}

.vhd-table-column-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    margin-left: -4.5px;
    pointer-events: auto;
    cursor: col-resize;
    touch-action: none;
}

.vhd-table-column-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: transparent;
}

.vhd-table-column-resize-handle:hover::after,
.vhd-table-column-resize-handle.is-resizing::after {
    background: rgba(37, 99, 235, .72);
}

.vhd-table-resizing-column,
.vhd-table-resizing-column * {
    cursor: col-resize !important;
}

.vhd-table-selecting-cells,
.vhd-table-selecting-cells th,
.vhd-table-selecting-cells td {
    user-select: none;
    cursor: cell;
}

.vhd-table-selecting-cells .vhd-table-cell-selected {
    box-shadow:
        inset 0 0 0 2px rgba(37, 99, 235, .58),
        inset 0 0 0 9999px rgba(37, 99, 235, .075);
}


/* 0.6.79 — compact property subsection titles */
.vhd-property-subtitle {
    margin: 10px 0 4px;
    color: var(--vhd-muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
}


/* 0.6.80 — merged table cells */
.vhd-table-editor th[rowspan],
.vhd-table-editor td[rowspan],
.vhd-table-editor th[colspan],
.vhd-table-editor td[colspan] {
    position: relative;
}

.vhd-table-editor th[rowspan].vhd-table-cell-selected,
.vhd-table-editor td[rowspan].vhd-table-cell-selected,
.vhd-table-editor th[colspan].vhd-table-cell-selected,
.vhd-table-editor td[colspan].vhd-table-cell-selected {
    box-shadow:
        inset 0 0 0 2px rgba(37, 99, 235, .58),
        inset 0 0 0 9999px rgba(37, 99, 235, .06);
}


/* 0.6.82 — keep empty table rows clearly visible in the editor */
.vhd-table-editor th,
.vhd-table-editor td {
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
}

/*
 * Empty editable cells must remain large enough to be obvious and clickable.
 * This is editor-only presentation and is not exported to public HTML.
 */
.vhd-table-editor th:empty::before,
.vhd-table-editor td:empty::before {
    content: "\00a0";
    display: inline-block;
    min-height: 1em;
}


/* 0.6.85 — quick table range selection */
.vhd-table-toolbar-button[aria-label="Sélectionner la ligne"],
.vhd-table-toolbar-button[aria-label="Sélectionner la colonne"],
.vhd-table-toolbar-button[aria-label="Sélectionner tout le tableau"],
.vhd-table-toolbar-button[aria-label="Select row"],
.vhd-table-toolbar-button[aria-label="Select column"],
.vhd-table-toolbar-button[aria-label="Select entire table"] {
    font-weight: 700;
}


/* 0.6.86 — table selection from row/column margins */
.vhd-table-selection-layer {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.vhd-table-selection-handle {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    pointer-events: auto;
    transition:
        opacity .12s ease,
        background-color .12s ease;
}

.vhd-table-selection-handle:hover,
.vhd-table-selection-handle:focus {
    opacity: 1;
    outline: none;
}

.vhd-table-column-selectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.vhd-table-column-selector {
    top: -14px;
    height: 12px;
    cursor: pointer;
    border-bottom: 2px solid rgba(37, 99, 235, .62);
}

.vhd-table-column-selector::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(37, 99, 235, .72);
}

.vhd-table-row-selectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vhd-table-row-selector {
    left: -14px;
    width: 12px;
    cursor: pointer;
    border-right: 2px solid rgba(37, 99, 235, .62);
}

.vhd-table-row-selector::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid rgba(37, 99, 235, .72);
}

.vhd-table-all-selector {
    top: -14px;
    left: -14px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border-right: 2px solid rgba(37, 99, 235, .62);
    border-bottom: 2px solid rgba(37, 99, 235, .62);
}

.vhd-table-all-selector::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(37, 99, 235, .72);
}

/*
 * Make the interaction discoverable without leaving permanent chrome:
 * entering the table editor reveals the very subtle selectors, while the
 * active selector becomes fully visible on hover/focus.
 */
.vhd-table-editor:hover .vhd-table-selection-handle {
    opacity: .18;
}

.vhd-table-editor:hover .vhd-table-selection-handle:hover,
.vhd-table-editor .vhd-table-selection-handle:focus {
    opacity: 1;
}

.vhd-table-selection-handle:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 1px;
}

/* Column-resize handles must remain above selection margins. */
.vhd-table-resize-layer {
    z-index: 4;
}


/* 0.6.87 — selectors live outside the scrolling table viewport */
.vhd-table-editor {
    overflow: visible;
}

.vhd-table-selection-layer {
    overflow: visible;
}

.vhd-table-row-selector,
.vhd-table-column-selector,
.vhd-table-all-selector {
    z-index: 6;
}

/*
 * Slightly increase the discoverable hit zone while keeping the visual marker
 * discreet. The visible arrow/line is still only revealed on hover.
 */
.vhd-table-column-selector {
    top: -18px;
    height: 16px;
}

.vhd-table-row-selector {
    left: -12px;
    width: 16px;
}

.vhd-table-all-selector {
    top: -18px;
    left: -12px;
    width: 16px;
    height: 16px;
}


/* 0.6.88 — reliable row selector geometry */
.vhd-table-row-selector {
    display: block;
    min-height: 12px;
}

.vhd-table-editor:hover .vhd-table-row-selector {
    opacity: .24;
}

.vhd-table-editor .vhd-table-row-selector:hover,
.vhd-table-editor .vhd-table-row-selector:focus {
    opacity: 1;
}


/* 0.6.89 — dedicated editor gutter for reliable row selectors */
.vhd-table-editor {
    padding-left: 12px;
    box-sizing: border-box;
}

/*
 * The table and selector layer are shifted together by the editor gutter.
 * Row selectors now occupy real editor space instead of relying on negative
 * overflow outside the block.
 */
.vhd-table-row-selector {
    left: -12px;
    width: 12px;
    opacity: 0;
}

.vhd-table-editor:hover .vhd-table-row-selector {
    opacity: .22;
}

.vhd-table-editor .vhd-table-row-selector:hover,
.vhd-table-editor .vhd-table-row-selector:focus {
    opacity: 1;
    background: rgba(37, 99, 235, .06);
}

/* Keep the visible indicator centered inside the gutter. */
.vhd-table-row-selector::after {
    right: 2px;
}

/*
 * The corner selector must follow the same gutter so selecting the whole
 * table remains visually aligned with row selectors.
 */
.vhd-table-all-selector {
    left: -12px;
    width: 12px;
}


/* 0.6.91 — compact row-selector gutter */
.vhd-table-editor {
    padding-left: 12px;
}

.vhd-table-row-selector {
    left: -12px;
    width: 12px;
}

.vhd-table-row-selector::after {
    right: 2px;
}

.vhd-table-all-selector {
    left: -12px;
    width: 12px;
}


/* 0.6.92 — compact blue SVG table toolbar */
.vhd-table-toolbar {
    gap: 2px;
    padding: 2px 3px;
    border-radius: 5px;
}

.vhd-table-toolbar-button {
    min-width: 25px;
    width: 25px;
    height: 25px;
    padding: 2px;
    background: #2563eb;
    color: #fff;
    border-radius: 4px;
}

.vhd-table-toolbar-button svg {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.vhd-table-toolbar-button:hover,
.vhd-table-toolbar-button:focus {
    background: #1d4ed8;
    color: #fff;
}

.vhd-table-toolbar-button:disabled {
    background: #93c5fd;
    color: rgba(255, 255, 255, .8);
    opacity: .7;
}

.vhd-table-toolbar-separator {
    height: 18px;
    margin: 0 1px;
}

.vhd-table-toolbar-width {
    gap: 3px;
    margin: 0 1px;
}

.vhd-table-toolbar-width-input {
    width: 48px;
    height: 25px;
    padding: 1px 3px;
}


/* 0.6.93 — top gutter below the contextual table toolbar */
.vhd-table-editor {
    padding-top: 8px;
}

/*
 * The toolbar stays on the existing control line while the table content is
 * moved slightly downward, creating a clear visual gap.
 */
.vhd-block-table.vhd-selected .vhd-table-toolbar,
.vhd-block-table:focus-within .vhd-table-toolbar,
.vhd-table-toolbar {
    top: -34px;
}


/* 0.6.94 — final table editor spacing */
.vhd-table-editor {
    padding-top: 12px;
}


/* 0.6.99 — independent table-cell border sides */
.vhd-property-caption {
    margin-top: 7px;
    margin-bottom: 3px;
    font-size: .76rem;
    font-weight: 600;
}

.vhd-table-border-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
    margin-bottom: 4px;
}

.vhd-table-border-sides .vhd-property-field-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.vhd-table-border-sides .vhd-property-field-checkbox input {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 auto;
}


/* 0.6.100 — mouse resizing for inline images, including table cells */
.vhd-inline-image-resize-overlay {
    position: absolute;
    z-index: 12;
    box-sizing: border-box;
    border: 1px dashed var(--vhd-accent);
    pointer-events: none;
}

.vhd-inline-image-resize-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: var(--vhd-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
    transform: translateY(-50%);
}

.vhd-inline-image-resize-handle-left {
    left: -6px;
}

.vhd-inline-image-resize-handle-right {
    right: -6px;
}

.vhd-inline-image-resize-overlay.is-resizing {
    border-style: solid;
}

@media (pointer: coarse) {
    .vhd-inline-image-resize-handle {
        width: 12px;
        height: 34px;
    }

    .vhd-inline-image-resize-handle-left {
        left: -8px;
    }

    .vhd-inline-image-resize-handle-right {
        right: -8px;
    }
}


/* 0.6.101 — viewport-fixed inline image resize overlay */
.vhd-inline-image-resize-overlay {
    position: fixed;
    z-index: 2147483003;
}


/* 0.6.107 — unified toolbar / editor presentation */
.vhd-text-toolbar {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow:
        0 5px 10px rgba(31, 41, 55, .08),
        0 2px 4px rgba(31, 41, 55, .06);
}

.vhd-workspace {
    position: relative;
    margin-top: -1px;
    padding: 10px;
    border: 1px solid var(--vhd-border);
    border-top-color: #cfd5dd;
    border-radius: 0 0 var(--vhd-radius) var(--vhd-radius);
    background: #fff;
}

/*
 * Keep the toolbar visually above the enclosing workspace border.
 * This makes the toolbar read as the header of the complete
 * editor + Properties assembly.
 */
.vhd-text-toolbar {
    position: sticky;
    z-index: 21;
}

/*
 * The Properties panel keeps its own light boundary because it remains
 * a distinct contextual panel inside the new common frame.
 */
.vhd-properties {
    margin: 0;
}

@media (max-width: 900px) {
    .vhd-workspace {
        padding: 8px;
    }
}


/* 0.6.108 — custom actions split-button style */
.vhd-custom-actions .vhd-toolbar-dropdown-trigger {
    width: auto;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 4px;
    background: #f8fafc;
    color: #374151;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
}

.vhd-custom-actions .vhd-toolbar-dropdown-trigger:hover,
.vhd-custom-actions .vhd-toolbar-dropdown-trigger:focus-visible {
    border: 1px solid #9ca3af;
    background: #eef2f7;
    outline: none;
}

.vhd-custom-actions .vhd-toolbar-dropdown-trigger.is-active {
    border: 1px solid #9ca3af;
    background: #e5ebf3;
    box-shadow: none;
}

.vhd-custom-actions-trigger-main,
.vhd-custom-actions-trigger-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1;
    user-select: none;
}

.vhd-custom-actions-trigger-main {
    min-width: 20px;
    padding: 0 4px;
    font-size: 16px;
}

.vhd-custom-actions-trigger-caret {
    min-width: 14px;
    padding: 0 3px;
    border-left: 1px solid #c4cbd4;
    font-size: 11px;
}


/* 0.6.110 — zone shadow replaces the zone border */
.vhd-row-editor {
    border-color: transparent;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .14);
}

.vhd-row-editor:hover,
.vhd-row-editor.vhd-selected,
.vhd-row-editor:focus-within {
    border-color: transparent;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .18);
}


/* 0.7.1 — plugin block registry */
.vhd-block-add-item:has(.vhd-block-add-item-icon) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vhd-block-add-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex: 0 0 20px;
}

.vhd-block-add-item-icon svg {
    width: 16px;
    height: 16px;
}

.vhd-plugin-block-content {
    min-width: 0;
}


/* 0.7.2 — declarative plugin properties */
.vhd-plugin-property-checkbox {
    display: flex;
    align-items: center;
    min-height: 32px;
}

.vhd-plugin-property-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}


/* 0.7.4 — richer and grouped plugin properties */
.vhd-plugin-property-group {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--vhd-border);
}

.vhd-plugin-property-group:first-of-type {
    margin-top: 4px;
}

.vhd-plugin-property-group-description {
    margin: -2px 0 8px;
    font-size: .78rem;
    line-height: 1.35;
    color: #6b7280;
}

.vhd-plugin-property-field textarea {
    width: 100%;
    min-height: 76px;
    resize: vertical;
}


/* 0.7.5 — code regions inside Text content */
.vhd-editable-text pre.vhd-code {
    box-sizing: border-box;
    margin: 1em 0;
    padding: 16px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #f6f5f3;
    color: #111827;
    font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: pre;
    tab-size: 4;
}

.vhd-editable-text pre.vhd-code > code {
    font: inherit;
    color: inherit;
    background: transparent;
}

.vhd-editable-text pre.vhd-code:focus-within {
    border-color: var(--vhd-accent);
    outline: 2px solid rgba(37, 99, 235, .12);
}


/* 0.7.6 — content insertion points at every block boundary */
.vhd-block-insert-point {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 12px;
    max-height: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: visible;
    transition:
        opacity .12s ease,
        min-height .12s ease,
        max-height .12s ease;
}

.vhd-column:hover > .vhd-block-insert-point,
.vhd-column:focus-within > .vhd-block-insert-point,
.vhd-column.vhd-selected > .vhd-block-insert-point,
.vhd-block-insert-point:focus-within {
    min-height: 28px;
    max-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
}

.vhd-block-insert-point .vhd-add-trigger {
    width: 26px !important;
    height: 22px !important;
    min-width: 26px;
    min-height: 22px;
    font-size: .95rem !important;
    line-height: 1;
}

.vhd-block-insert-point .vhd-block-add-menu {
    top: calc(50% + 15px);
}

/*
 * The generic legacy end-of-column add spacing is intentionally cancelled
 * for boundary insertion points.
 */
.vhd-column:hover > .vhd-block-insert-point,
.vhd-column:focus-within > .vhd-block-insert-point,
.vhd-column.vhd-selected > .vhd-block-insert-point {
    margin-top: 0;
    padding-top: 0;
    border-top-color: transparent;
}

@media (max-width: 900px) {
    .vhd-block-insert-point {
        min-height: 28px;
        max-height: 28px;
        opacity: 1;
        margin: 0;
        padding: 0;
        border: 0;
    }
}


/* 0.7.7 — insertion controls integrated into each content block */
.vhd-block-controls {
    align-items: center;
}

.vhd-block-controls > .vhd-block-insert-top {
    margin-right: auto;
}

.vhd-block-bottom-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 26px;
    margin-top: 6px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vhd-block:hover > .vhd-block-bottom-controls,
.vhd-block:focus-within > .vhd-block-bottom-controls,
.vhd-block.vhd-selected > .vhd-block-bottom-controls {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.vhd-block-controls > .vhd-block-insert-point,
.vhd-block-bottom-controls > .vhd-block-insert-point {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    max-height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    overflow: visible;
}

.vhd-block-controls > .vhd-block-insert-point .vhd-add-trigger,
.vhd-block-bottom-controls > .vhd-block-insert-point .vhd-add-trigger {
    width: 28px !important;
    height: 26px !important;
    min-width: 28px;
    min-height: 26px;
    font-size: 1rem !important;
}

.vhd-block-controls > .vhd-block-insert-point .vhd-block-add-menu {
    top: calc(100% + 5px);
    left: 0;
    transform: none;
}

.vhd-block-bottom-controls > .vhd-block-insert-point .vhd-block-add-menu {
    top: calc(100% + 5px);
    left: auto;
    right: 0;
    transform: none;
}

/*
 * The 0.7.6 boundary rules remain useful only for an empty column.
 * Integrated top/bottom controls explicitly override their expansion model.
 */
.vhd-block > .vhd-block-controls .vhd-content-add,
.vhd-block > .vhd-block-bottom-controls .vhd-content-add {
    opacity: 1;
    max-height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
}


/* 0.7.8 — top content + is a true action-row control */
.vhd-block-controls {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

.vhd-block-control-insert {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin-right: auto;
    padding: 0;
}

.vhd-block-control-insert-trigger {
    width: 28px !important;
    height: 26px !important;
    min-width: 28px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 5px !important;
    font-size: 1rem;
    line-height: 1;
}

.vhd-block-control-insert-menu {
    top: calc(100% + 5px);
    left: 0;
    transform: none;
}

/*
 * Cancel 0.7.7 top-insert layout rules now that the upper + no longer uses
 * the generic .vhd-content-add / .vhd-block-insert-point structure.
 */
.vhd-block-controls > .vhd-block-insert-top {
    margin-right: 0;
}


/* 0.7.9 — both content insertion controls align left */
.vhd-block-bottom-controls {
    justify-content: flex-start;
}

.vhd-block-bottom-controls > .vhd-block-insert-point .vhd-block-add-menu {
    left: 0;
    right: auto;
    transform: none;
}


/* 0.7.10 — bottom insertion control stays below content */
.vhd-block-bottom-controls {
    position: static !important;
    clear: both;
    width: 100%;
    min-height: 26px;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vhd-block-bottom-controls > .vhd-block-insert-point {
    position: relative !important;
    flex: 0 0 auto;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.vhd-block-bottom-controls .vhd-add-trigger {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}

.vhd-block-bottom-controls .vhd-block-add-menu {
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* Ensure floated/inline content above cannot pull the bottom control upward. */
.vhd-block-bottom-controls::before {
    content: "";
    display: block;
    clear: both;
}


/* 0.7.11 — one insertion control per content */
.vhd-block-bottom-controls {
    display: none !important;
}

/*
 * Each content keeps one insertion control in its upper action row.
 * A separate end-of-column control is restored in 0.7.25.
 */
.vhd-block-control-insert {
    margin-right: auto;
}


/* 0.7.12 — content + joins the right-side action group */
.vhd-block-control-insert {
    margin-right: 0;
}

.vhd-block-controls {
    justify-content: flex-end;
}


/* 0.7.25 — end-of-column content insertion */
.vhd-column > .vhd-block-insert-end {
    justify-content: flex-start;
}


/* 0.7.14 — contextual text-selection menu */
.vhd-selection-menu {
    position: fixed;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--vhd-border, #d1d5db);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
}

.vhd-selection-menu[hidden] {
    display: none;
}

.vhd-selection-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.vhd-selection-menu-button:hover,
.vhd-selection-menu-button:focus-visible {
    background: #eef2f7;
    outline: none;
}

.vhd-selection-menu-h2 {
    font-weight: 700;
}

.vhd-selection-menu-bold {
    font-weight: 700;
}

.vhd-selection-menu-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}


/* 0.7.15 — stronger contextual selection menu */
.vhd-selection-menu {
    gap: 5px;
    padding: 7px;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .26);
}

.vhd-selection-menu-button {
    min-width: 42px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
}

.vhd-selection-menu-button:hover,
.vhd-selection-menu-button:focus-visible {
    border-color: #cbd5e1;
    background: #e8edf4;
}

.vhd-selection-menu-code {
    min-width: 52px;
    font-size: 15px;
}

.vhd-selection-menu-link {
    font-size: 17px;
}


/* 0.7.18 — full-row activation for color menu entries */
.vhd-toolbar-menu-color-item {
    cursor: pointer;
}

.vhd-toolbar-menu-color-label {
    flex: 1 1 auto;
    cursor: pointer;
}

.vhd-toolbar-menu-color-item .vhd-toolbar-color-control-menu {
    flex: 0 0 auto;
}


/* 0.7.20 — selection typography in additional formatting */
.vhd-toolbar-formatting-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: default;
}

.vhd-toolbar-formatting-select-label {
    flex: 1 1 auto;
    min-width: 0;
}

.vhd-toolbar-formatting-select {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 4px 24px 4px 7px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    font: inherit;
}