/**
 * Zero WYSIWYG Editor — Stylesheet
 * 
 * Component-scoped CSS variables for easy theming.
 * Include a theme file (dark.css or light.css) or override these variables.
 *
 * @license MIT
 * @see https://github.com/KaTXi/zero-wysiwyg
 */

/* === Default Theme Variables (Light) === */
:root {
    --zw-bg: #ffffff;
    --zw-bg-toolbar: #f5f5f5;
    --zw-bg-input: #ffffff;
    --zw-bg-dialog: #ffffff;
    --zw-bg-hover: rgba(0,0,0,0.04);
    --zw-bg-source: #1e1e2e;
    --zw-text: #333333;
    --zw-text-heading: #111111;
    --zw-text-secondary: #666666;
    --zw-text-muted: #999999;
    --zw-text-source: #7fdbca;
    --zw-accent: #2563eb;
    --zw-accent-hover: #1d4ed8;
    --zw-accent-light: rgba(37,99,235,0.10);
    --zw-border: #dddddd;
    --zw-radius: 6px;
    --zw-radius-lg: 10px;
    --zw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --zw-font-mono: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
}

/* === Wrapper === */
.zw-wysiwyg-wrapper {
    border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius);
    overflow: hidden;
    background: var(--zw-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.zw-wysiwyg-wrapper:focus-within {
    border-color: var(--zw-accent);
    box-shadow: 0 0 0 3px var(--zw-accent-light);
}

/* === Toolbar === */
.zw-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: var(--zw-bg-toolbar);
    border-bottom: 1px solid var(--zw-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.zw-toolbar-group {
    display: flex;
    gap: 1px;
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid var(--zw-border);
}
.zw-toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
.zw-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--zw-text-secondary);
    cursor: pointer;
    font-family: var(--zw-font);
    font-size: 13px;
    line-height: 1;
    transition: all 0.15s;
    user-select: none;
}
.zw-toolbar-btn:hover {
    background: var(--zw-bg-hover);
    border-color: var(--zw-border);
    color: var(--zw-text);
}
.zw-toolbar-btn.active {
    background: var(--zw-accent-light);
    border-color: var(--zw-accent);
    color: var(--zw-accent);
}
.zw-toolbar-btn b { font-weight: 700; }
.zw-toolbar-btn i { font-style: italic; }
.zw-toolbar-btn u { text-decoration: underline; }
.zw-toolbar-btn s { text-decoration: line-through; }

/* === Editor Area === */
.zw-wysiwyg-editor {
    padding: 16px 20px;
    color: var(--zw-text);
    font-family: var(--zw-font);
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    overflow-y: auto;
    max-height: 70vh;
    word-wrap: break-word;
}
.zw-wysiwyg-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--zw-text-muted);
    pointer-events: none;
}

/* === Content Styles Inside Editor === */
.zw-wysiwyg-editor h2 { font-size: 20px; font-weight: 700; color: var(--zw-text-heading); margin: 16px 0 8px; }
.zw-wysiwyg-editor h3 { font-size: 17px; font-weight: 600; color: var(--zw-text-heading); margin: 14px 0 6px; }
.zw-wysiwyg-editor h4 { font-size: 15px; font-weight: 600; color: var(--zw-text-heading); margin: 12px 0 4px; }
.zw-wysiwyg-editor p { margin: 0 0 10px; }
.zw-wysiwyg-editor a { color: var(--zw-accent); text-decoration: underline; }
.zw-wysiwyg-editor ul,
.zw-wysiwyg-editor ol { margin: 8px 0; padding-left: 24px; }
.zw-wysiwyg-editor li { margin-bottom: 4px; }
.zw-wysiwyg-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
.zw-wysiwyg-editor hr { border: none; border-top: 1px solid var(--zw-border); margin: 16px 0; }
.zw-wysiwyg-editor blockquote {
    border-left: 3px solid var(--zw-accent);
    margin: 12px 0; padding: 8px 16px;
    background: var(--zw-accent-light);
    color: var(--zw-text-secondary);
}
.zw-wysiwyg-editor table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.zw-wysiwyg-editor td,
.zw-wysiwyg-editor th { border: 1px solid var(--zw-border); padding: 6px 10px; }

/* === Iframe / YouTube Placeholders === */
.zw-iframe-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 120px; margin: 12px 0; padding: 20px;
    background: var(--zw-bg-hover); border: 2px dashed var(--zw-border);
    border-radius: 8px; cursor: default; user-select: all; position: relative;
}
.zw-iframe-placeholder:hover { border-color: var(--zw-accent); }
.zw-iframe-placeholder::after {
    content: attr(data-delete-hint);
    position: absolute; top: 4px; right: 8px;
    font-size: 10px; color: var(--zw-text-muted); opacity: 0; transition: opacity 0.2s;
}
.zw-iframe-placeholder:hover::after { opacity: 1; }
.zw-placeholder-icon { font-size: 28px; opacity: 0.4; margin-bottom: 6px; }
.zw-placeholder-label {
    font-size: 12px; color: var(--zw-text-secondary); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.zw-placeholder-url {
    font-size: 11px; color: var(--zw-text-muted); margin-top: 4px;
    word-break: break-all; max-width: 400px; text-align: center;
}

/* YouTube Placeholder with Thumbnail */
.zw-youtube-placeholder {
    min-height: 180px; max-width: 560px; aspect-ratio: 16 / 9;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-color: rgba(255,0,0,0.25); border-style: solid; position: relative;
}
.zw-youtube-placeholder .zw-placeholder-label {
    position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
    background: rgba(0,0,0,0.75); color: #fff; padding: 4px 12px;
    font-size: 11px; border-radius: 0 0 6px 6px;
}
.zw-yt-play {
    width: 60px; height: 42px; background: rgba(255,0,0,0.85); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; pointer-events: none;
}
.zw-youtube-placeholder:hover .zw-yt-play { background: rgba(255,0,0,1); }

/* === Source View === */
.zw-wysiwyg-source {
    width: 100%; padding: 16px 20px;
    background: var(--zw-bg-source); color: var(--zw-text-source);
    font-family: var(--zw-font-mono); font-size: 13px; line-height: 1.5;
    border: none; outline: none; resize: vertical; box-sizing: border-box;
}

/* === Fullscreen Mode === */
.zw-wysiwyg-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999; border-radius: 0; border: none;
    display: flex; flex-direction: column;
}
.zw-wysiwyg-fullscreen .zw-wysiwyg-toolbar { flex-shrink: 0; }
.zw-wysiwyg-fullscreen .zw-wysiwyg-editor { flex: 1; max-height: none; }
.zw-wysiwyg-fullscreen .zw-wysiwyg-source { flex: 1; }
body.wysiwyg-fullscreen-active { overflow: hidden; }

/* === Image Resize Handles === */
.zw-img-resize-wrapper {
    position: relative; display: inline-block; line-height: 0;
    outline: 2px solid var(--zw-accent); outline-offset: 2px; border-radius: 2px;
}
.zw-img-resize-handle {
    position: absolute; width: 12px; height: 12px;
    background: var(--zw-accent); border: 2px solid #fff;
    border-radius: 2px; z-index: 10;
}
.zw-img-resize-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.zw-img-resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.zw-img-resize-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.zw-img-resize-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.zw-img-size-badge {
    position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #ccc; font-size: 11px;
    font-family: var(--zw-font-mono); padding: 2px 8px; border-radius: 4px;
    white-space: nowrap; pointer-events: none; z-index: 10;
}

/* === Video Resize & Alignment === */
.zw-video-selected { outline: 2px solid var(--zw-accent) !important; outline-offset: 2px; }
.zw-video-resize-handle {
    position: absolute; width: 14px; height: 14px;
    background: var(--zw-accent); border: 2px solid #fff;
    border-radius: 2px; z-index: 12;
}
.zw-video-resize-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.zw-video-resize-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.zw-video-resize-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.zw-video-resize-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.zw-video-size-badge {
    position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #ccc; font-size: 11px;
    font-family: var(--zw-font-mono); padding: 2px 10px; border-radius: 4px;
    white-space: nowrap; pointer-events: none; z-index: 12;
}
.zw-video-align-bar {
    position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 2px;
    background: var(--zw-bg-dialog); border: 1px solid var(--zw-border);
    border-radius: 6px; padding: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 12;
}
.zw-video-align-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px; background: transparent;
    border: 1px solid transparent; border-radius: 4px;
    color: var(--zw-text-secondary); cursor: pointer; font-size: 14px;
    transition: all 0.15s;
}
.zw-video-align-btn:hover { background: var(--zw-bg-hover); color: var(--zw-text); }
.zw-video-align-btn.active {
    background: var(--zw-accent-light); border-color: var(--zw-accent);
    color: var(--zw-accent);
}

/* === Dialog Overlay === */
.zw-link-dialog-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: flex;
    align-items: center; justify-content: center; z-index: 10000;
}
.zw-link-dialog {
    background: var(--zw-bg-dialog); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius-lg); padding: 24px;
    min-width: 400px; max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.zw-link-dialog-title {
    font-size: 16px; font-weight: 600; color: var(--zw-text-heading);
    margin-bottom: 20px;
}
.zw-link-dialog-field { margin-bottom: 16px; }
.zw-link-dialog-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--zw-text-secondary); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.zw-link-dialog-field input[type="url"],
.zw-link-dialog-field input[type="text"],
.zw-link-dialog-field input[type="number"] {
    width: 100%; padding: 9px 12px;
    background: var(--zw-bg-input); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); color: var(--zw-text);
    font-size: 14px; font-family: var(--zw-font);
    transition: border-color 0.2s; box-sizing: border-box;
}
.zw-link-dialog-field input:focus {
    outline: none; border-color: var(--zw-accent);
    box-shadow: 0 0 0 3px var(--zw-accent-light);
}
.zw-link-dialog-checkbox label {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-size: 14px;
    font-weight: 500; color: var(--zw-text);
}
.zw-link-dialog-checkbox input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--zw-accent);
}
.zw-link-dialog-actions {
    display: flex; gap: 10px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--zw-border);
}

/* Image Dimensions Row */
.zw-img-dim-row { display: flex; align-items: center; gap: 8px; }
.zw-img-dim-row input[type="number"] { width: 100px; }
.zw-img-dim-x { color: var(--zw-text-muted); font-size: 14px; }
.zw-img-dim-hint { font-size: 11px; color: var(--zw-text-muted); margin-left: 8px; }

/* === Self-contained Dialog Buttons === */
.zw-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: 1px solid transparent;
    border-radius: var(--zw-radius); font-size: 13px; font-weight: 500;
    font-family: var(--zw-font); cursor: pointer;
    transition: all 0.2s; text-decoration: none; white-space: nowrap;
}
.zw-btn-primary {
    background: var(--zw-accent); color: #fff; border-color: var(--zw-accent);
}
.zw-btn-primary:hover {
    background: var(--zw-accent-hover); border-color: var(--zw-accent-hover); color: #fff;
}
.zw-btn-ghost {
    background: transparent; color: var(--zw-text-secondary); border-color: transparent;
}
.zw-btn-ghost:hover {
    color: var(--zw-text); background: var(--zw-bg-hover);
}
.zw-btn-danger-ghost {
    background: transparent; color: #e74c3c; border-color: transparent; margin-left: auto;
}
.zw-btn-danger-ghost:hover {
    background: rgba(231,76,60,0.08);
}

/* === Status Bar (word/char count) === */
.zw-status-bar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 4px 12px; background: var(--zw-bg-toolbar);
    border-top: 1px solid var(--zw-border); font-size: 11px;
    color: var(--zw-text-muted);
}
.zw-word-count { font-family: var(--zw-font-mono); }

/* === Disabled State === */
.zw-disabled { opacity: 0.6; pointer-events: none; }
.zw-disabled .zw-wysiwyg-editor { background: var(--zw-bg-hover); }
.zw-disabled .zw-toolbar-btn { opacity: 0.4; cursor: not-allowed; }

/* === Table Grid Picker === */
.zw-table-grid-wrapper { margin-bottom: 8px; }
.zw-table-grid-label {
    font-size: 13px; font-weight: 600; color: var(--zw-text-secondary);
    margin-bottom: 8px; text-align: center;
}
.zw-table-grid {
    display: grid; grid-template-columns: repeat(10, 1fr);
    gap: 3px; padding: 4px;
    background: var(--zw-bg-hover); border-radius: var(--zw-radius);
    max-width: 280px; margin: 0 auto;
}
.zw-table-grid-cell {
    aspect-ratio: 1; border: 1px solid var(--zw-border);
    border-radius: 2px; background: var(--zw-bg);
    cursor: pointer; transition: all 0.1s; min-width: 22px;
}
.zw-table-grid-cell:hover { border-color: var(--zw-accent); }
.zw-table-grid-cell.zw-table-grid-active {
    background: var(--zw-accent-light); border-color: var(--zw-accent);
}

/* === Color Picker === */
.zw-color-picker-dialog { min-width: 360px; }
.zw-color-icon { font-weight: 700; font-size: 14px; line-height: 1; }
.zw-color-icon-bg {
    background: linear-gradient(135deg, #ff0 25%, #f90 50%, #f00 75%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.zw-color-swatches {
    display: grid; grid-template-columns: repeat(10, 1fr);
    gap: 4px; margin-bottom: 16px;
}
.zw-color-swatch {
    width: 28px; height: 28px; border: 2px solid var(--zw-border);
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
    padding: 0;
}
.zw-color-swatch:hover {
    border-color: var(--zw-accent); transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1;
}
.zw-color-custom-row {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--zw-border);
}
.zw-color-input {
    width: 36px; height: 36px; border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); cursor: pointer;
    padding: 2px; background: var(--zw-bg);
}
.zw-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.zw-color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
.zw-color-hex {
    width: 90px; padding: 8px 10px;
    background: var(--zw-bg-input); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); color: var(--zw-text);
    font-family: var(--zw-font-mono); font-size: 13px;
    box-sizing: border-box;
}
.zw-color-hex:focus {
    outline: none; border-color: var(--zw-accent);
    box-shadow: 0 0 0 3px var(--zw-accent-light);
}

/* === Table Content Styles (inside editor) === */
.zw-wysiwyg-editor th {
    background: var(--zw-bg-toolbar); font-weight: 600;
    text-align: left;
}

/* === Emoji Picker === */
.zw-emoji-picker-dialog { min-width: 420px; max-width: 480px; }
.zw-emoji-search-row { margin-bottom: 12px; }
.zw-emoji-search {
    width: 100%; padding: 8px 12px;
    background: var(--zw-bg-input); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); color: var(--zw-text);
    font-size: 13px; font-family: var(--zw-font);
    box-sizing: border-box;
}
.zw-emoji-search:focus {
    outline: none; border-color: var(--zw-accent);
    box-shadow: 0 0 0 3px var(--zw-accent-light);
}
.zw-emoji-tabs {
    display: flex; gap: 2px; margin-bottom: 8px;
    padding-bottom: 8px; border-bottom: 1px solid var(--zw-border);
}
.zw-emoji-tab {
    flex: 1; padding: 6px 0; background: transparent;
    border: 1px solid transparent; border-radius: 4px;
    font-size: 18px; cursor: pointer; text-align: center;
    transition: all 0.15s;
}
.zw-emoji-tab:hover { background: var(--zw-bg-hover); }
.zw-emoji-tab.active {
    background: var(--zw-accent-light); border-color: var(--zw-accent);
}
.zw-emoji-grid {
    display: none; /* shown when .active */
    flex-wrap: wrap; gap: 2px;
    max-height: 220px; overflow-y: auto; padding: 4px 0;
}
.zw-emoji-grid.active { display: flex; }
.zw-emoji-item {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; font-size: 22px;
    background: transparent; border: 1px solid transparent;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
    padding: 0;
}
.zw-emoji-item:hover {
    background: var(--zw-bg-hover); border-color: var(--zw-border);
    transform: scale(1.2);
}

/* === SVG Toolbar Icons === */
.zw-toolbar-btn svg {
    display: block; width: 18px; height: 18px;
    pointer-events: none;
}

/* === Task List (Checkboxes) — 6.3 === */
.zw-wysiwyg-editor .zw-task-list {
    list-style: none; padding-left: 4px; margin: 8px 0;
}
.zw-wysiwyg-editor .zw-task-item {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 4px; padding: 2px 0;
}
.zw-wysiwyg-editor .zw-task-item input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--zw-accent); cursor: pointer; flex-shrink: 0;
}
.zw-wysiwyg-editor .zw-task-done {
    text-decoration: line-through; color: var(--zw-text-muted);
}

/* === Balloon / Inline Toolbar — 6.2 === */
.zw-balloon-toolbar {
    position: absolute; display: flex; gap: 2px;
    padding: 4px 6px; background: var(--zw-bg-dialog);
    border: 1px solid var(--zw-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 10001;
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.zw-balloon-toolbar.zw-balloon-visible { opacity: 1; pointer-events: auto; }
.zw-balloon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 28px; padding: 0 6px;
    background: transparent; border: 1px solid transparent;
    border-radius: 4px; color: var(--zw-text-secondary);
    cursor: pointer; transition: all 0.15s;
}
.zw-balloon-btn:hover {
    background: var(--zw-bg-hover); color: var(--zw-text);
    border-color: var(--zw-border);
}
.zw-balloon-btn svg { display: block; width: 16px; height: 16px; pointer-events: none; }

/* === Slash Commands Menu — 6.4 === */
.zw-slash-menu {
    position: absolute; z-index: 10001;
    background: var(--zw-bg-dialog); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius-lg); padding: 6px 0;
    min-width: 220px; max-width: 300px; max-height: 320px;
    overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.zw-slash-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; cursor: pointer; transition: background 0.1s;
}
.zw-slash-item:hover, .zw-slash-active { background: var(--zw-accent-light); }
.zw-slash-active { color: var(--zw-accent); }
.zw-slash-icon { display: flex; align-items: center; color: var(--zw-text-secondary); }
.zw-slash-icon svg { width: 18px; height: 18px; }
.zw-slash-label { font-size: 13px; font-family: var(--zw-font); }

/* === Find & Replace Bar — 6.5 === */
.zw-find-bar {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 12px; background: var(--zw-bg-toolbar);
    border-bottom: 1px solid var(--zw-border);
}
.zw-find-row, .zw-replace-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zw-find-input, .zw-replace-input {
    flex: 1; min-width: 150px; padding: 6px 10px;
    background: var(--zw-bg-input); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); color: var(--zw-text);
    font-size: 13px; font-family: var(--zw-font); box-sizing: border-box;
}
.zw-find-input:focus, .zw-replace-input:focus {
    outline: none; border-color: var(--zw-accent);
    box-shadow: 0 0 0 3px var(--zw-accent-light);
}
.zw-find-count {
    font-size: 12px; color: var(--zw-text-muted);
    font-family: var(--zw-font-mono); min-width: 60px; text-align: center;
}
.zw-find-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: transparent;
    border: 1px solid var(--zw-border); border-radius: 4px;
    color: var(--zw-text-secondary); cursor: pointer; font-size: 10px;
    transition: all 0.15s;
}
.zw-find-nav:hover { background: var(--zw-bg-hover); color: var(--zw-text); }
.zw-find-case-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--zw-text-secondary);
    cursor: pointer; white-space: nowrap;
}
.zw-find-case-label input { width: 14px; height: 14px; accent-color: var(--zw-accent); }
.zw-find-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: transparent;
    border: none; border-radius: 4px; color: var(--zw-text-muted);
    cursor: pointer; font-size: 18px; line-height: 1; transition: all 0.15s;
}
.zw-find-close:hover { background: var(--zw-bg-hover); color: var(--zw-text); }
.zw-search-match { background: rgba(255, 235, 59, 0.4); border-radius: 2px; }
.zw-search-match-active {
    background: rgba(255, 152, 0, 0.6); outline: 2px solid var(--zw-accent); border-radius: 2px;
}

/* === Code Block — 7.2 === */
.zw-wysiwyg-editor .zw-code-block {
    background: var(--zw-bg-source); color: var(--zw-text-source);
    font-family: var(--zw-font-mono); font-size: 13px; line-height: 1.5;
    padding: 16px 20px; border-radius: var(--zw-radius);
    margin: 12px 0; overflow-x: auto; white-space: pre;
}
.zw-wysiwyg-editor .zw-code-block code { background: none; font-size: inherit; }

/* === Table Context Menu — 7.3 === */
.zw-table-context-menu {
    position: absolute; z-index: 10002;
    background: var(--zw-bg-dialog); border: 1px solid var(--zw-border);
    border-radius: var(--zw-radius); padding: 4px 0;
    min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.zw-table-ctx-item {
    padding: 7px 16px; cursor: pointer; font-size: 13px;
    font-family: var(--zw-font); color: var(--zw-text);
    transition: background 0.1s;
}
.zw-table-ctx-item:hover { background: var(--zw-accent-light); color: var(--zw-accent); }
.zw-table-ctx-sep { height: 1px; background: var(--zw-border); margin: 4px 0; }

/* === Legacy toolbar (hidden when WYSIWYG active) === */
.wysiwyg-toolbar { display: none; }