.stc-html-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 160px;
    border: 1px solid #c5c5c5;
    background: #fff;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    position: relative;
}

.stc-html-editor.stc-html-editor-inline {
    min-height: 72px;
}

.stc-html-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f4f4f4;
    border-bottom: 1px solid #c5c5c5;
    flex-shrink: 0;
}

.stc-html-editor-toolbar[hidden] {
    display: none !important;
}

.stc-html-editor-sep {
    width: 1px;
    height: 18px;
    background: #ccc;
    margin: 0 4px;
}

.stc-html-editor-toolbar-break {
    flex-basis: 100%;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

.stc-html-editor-toolbar-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

.stc-html-editor-menu-wrap {
    position: relative;
    display: inline-flex;
}

.stc-html-editor-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 112px;
    margin-top: 2px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stc-html-editor-menu[hidden] {
    display: none !important;
}

.stc-html-editor-toolbar .stc-html-editor-menu-item {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 600;
    justify-content: flex-start;
    text-align: left;
}

.stc-html-editor-toolbar .stc-html-editor-menu-item:hover {
    background: #e4e4e4;
    border-color: transparent;
}

.stc-html-editor-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #222;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.stc-html-editor-toolbar button:hover,
.stc-html-editor-toolbar button.stc-active {
    background: #e4e4e4;
    border-color: #c5c5c5;
}

.stc-html-editor-toolbar button:disabled {
    opacity: 0.4;
    cursor: default;
}

.stc-html-editor-toolbar select {
    height: 26px;
    max-width: 140px;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
}

.stc-html-editor-toolbar input[type="color"] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #c5c5c5;
    background: #fff;
    cursor: pointer;
}

.stc-html-editor-toolbar .stc-html-editor-source-btn {
    min-width: 58px;
    font-weight: 700;
    border-color: #c5c5c5;
    background: #fff;
}

.stc-html-editor-toolbar .stc-html-editor-source-btn.stc-active {
    background: #2f6fed;
    border-color: #2f6fed;
    color: #fff;
}

.stc-html-editor-surface {
    flex: 1 1 auto;
    min-height: 48px;
    overflow: auto;
    position: relative;
}

.stc-html-editor-body {
    min-height: 100%;
    padding: 8px 10px;
    outline: none;
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    box-sizing: border-box;
}

.stc-html-editor-body table {
    border-collapse: collapse;
}

.stc-html-editor-body table td,
.stc-html-editor-body table th {
    padding: 4px 8px;
    min-width: 1.5em;
    min-height: 1.4em;
    empty-cells: show;
    vertical-align: top;
    position: relative;
}

/* Editor-only cell guides (not saved). Spaced dots so a 0-border table is still visible. */
.stc-html-editor-body table td::after,
.stc-html-editor-body table th::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #7a7a7a 0 2px, transparent 2px 8px) 0 0 / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, #7a7a7a 0 2px, transparent 2px 8px) 0 100% / 100% 1px no-repeat,
        repeating-linear-gradient(0deg, #7a7a7a 0 2px, transparent 2px 8px) 0 0 / 1px 100% no-repeat,
        repeating-linear-gradient(0deg, #7a7a7a 0 2px, transparent 2px 8px) 100% 0 / 1px 100% no-repeat;
}

/* Temporary highlight while Cell / Row / Table properties are open (not saved). */
.stc-html-editor-body table td.stc-prop-target,
.stc-html-editor-body table th.stc-prop-target,
.stc-html-editor-body table tr.stc-prop-target > td,
.stc-html-editor-body table tr.stc-prop-target > th,
.stc-html-editor-body table.stc-prop-target td,
.stc-html-editor-body table.stc-prop-target th {
    background-color: #ffcccc !important;
}

.stc-html-editor-body img {
    max-width: 100%;
}

.stc-html-editor-body img.stc-prop-target {
    outline: 2px solid #e07070;
    outline-offset: 1px;
}

.stc-html-editor-source {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 120px;
    border: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    resize: none;
    outline: none;
}

.stc-html-editor.stc-source-mode .stc-html-editor-body {
    display: none;
}

.stc-html-editor.stc-source-mode .stc-html-editor-source {
    display: block;
}

.stc-html-editor-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.stc-html-editor-dialog-backdrop.stc-html-editor-dialog-see-through {
    background: transparent;
}

.stc-html-editor-dialog {
    background: #fff;
    border: 1px solid #888;
    border-radius: 4px;
    min-width: 280px;
    max-width: 92%;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stc-html-editor-dialog h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 700;
}

.stc-html-editor-dialog label {
    display: block;
    margin: 6px 0 2px;
    font-size: 12px;
}

.stc-html-editor-dialog input[type="text"],
.stc-html-editor-dialog input[type="number"],
.stc-html-editor-dialog select {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
}

.stc-html-editor-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

.stc-html-editor-dialog-actions button {
    min-width: 64px;
    height: 28px;
    border: 1px solid #c5c5c5;
    background: #f4f4f4;
    border-radius: 3px;
    cursor: pointer;
}

.stc-html-editor-emoji {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 280px;
    max-height: 180px;
    overflow: auto;
}

.stc-html-editor-emoji button {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
}

.stc-html-editor-emoji button:hover {
    background: #eee;
}

.stc-html-editor.is-disabled {
    pointer-events: none;
    opacity: 0.7;
}

.stc-html-editor-host {
    display: block;
    width: 100%;
}

.stc-html-editor-host .stc-html-editor {
    min-height: 0;
    height: 100%;
    border-color: var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    font-family: var(--bs-body-font-family, inherit);
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.stc-html-editor-host .stc-html-editor.stc-html-editor-inline {
    min-height: 160px;
}

.stc-html-editor-host .stc-html-editor-toolbar {
    background: var(--bs-tertiary-bg, var(--bs-secondary-bg, #f8f9fa));
    border-bottom-color: var(--bs-border-color, #dee2e6);
    gap: 4px;
    padding: 6px 8px;
}

.stc-html-editor-host .stc-html-editor-sep {
    background: var(--bs-border-color, #dee2e6);
}

.stc-html-editor-host .stc-html-editor-toolbar button {
    color: var(--bs-body-color, #212529);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.stc-html-editor-host .stc-html-editor-toolbar button:hover,
.stc-html-editor-host .stc-html-editor-toolbar button.stc-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white, #fff);
}

.stc-html-editor-host .stc-html-editor-toolbar select {
    border-color: var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
}

.stc-html-editor-host .stc-html-editor-toolbar input[type="color"] {
    border-color: var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.stc-html-editor-host .stc-html-editor-surface {
    min-height: 140px;
    background: var(--bs-body-bg, #fff);
}

.stc-html-editor-host .stc-html-editor-body {
    color: var(--bs-body-color, #000);
}