.compact-button.success {
        border-color: #3f8f5f;
        background: rgba(63, 143, 95, 0.18);
        color: var(--editor-panel-ink);
    }

    .compact-button.success:hover,
    .compact-button.success:focus-visible {
        background: #3f8f5f;
        color: #f4fff8;
    }

    .suggestion-list {
        display: grid;
        gap: 7px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .suggestion-item {
        display: grid;
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--editor-paper-edge);
        border-left: 6px solid var(--suggestion-color, var(--editor-accent));
        border-radius: 6px;
        background: var(--editor-panel-strong);
        color: var(--editor-panel-ink);
        font-size: 0.9rem;
    }

    .suggestion-item.is-focused {
        outline: 2px solid var(--suggestion-color, var(--editor-accent));
        outline-offset: 2px;
    }

    .suggestion-item p {
        margin: 0;
        white-space: pre-wrap;
    }

    .suggestion-marker-layer {
        position: absolute;
        inset: 0;
        z-index: 8;
        column-span: all;
        pointer-events: none;
    }

    .suggestion-marker-stack {
        position: absolute;
        display: grid;
        gap: 3px;
        pointer-events: auto;
    }

    .suggestion-marker {
        width: 10px;
        min-width: 10px;
        height: 18px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 2px;
        background: var(--suggestion-color, var(--editor-accent));
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        font-size: 0;
        padding: 0;
    }

    .suggestion-marker.is-overflow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        min-width: 14px;
        color: var(--editor-accent-ink);
        background: var(--editor-accent);
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .suggestion-marker:hover,
    .suggestion-marker:focus-visible {
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .suggestion-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: var(--editor-panel-muted);
        font-size: 0.78rem;
    }

    .suggestion-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .editor-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(20, 14, 8, 0.48);
    }

    .editor-modal-backdrop[hidden] {
        display: none;
    }

    .editor-modal {
        display: grid;
        gap: 12px;
        width: min(420px, 100%);
        border: 1px solid var(--editor-paper-edge);
        border-radius: 8px;
        background: var(--editor-modal-panel);
        color: var(--editor-panel-ink);
        box-shadow: 0 24px 60px var(--editor-shadow);
        padding: 16px;
    }

    .editor-modal h2,
    .editor-modal p {
        margin: 0;
    }

    .editor-modal h2 {
        font-size: 1rem;
        text-transform: uppercase;
    }

    .editor-modal p {
        color: var(--editor-panel-muted);
        line-height: 1.4;
    }

    .editor-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .suggestion-target-preview,
    .suggestion-target-quote {
        display: grid;
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--editor-paper-edge);
        border-radius: 6px;
        background: var(--editor-input);
        color: var(--editor-panel-ink);
        font-size: 0.86rem;
    }

    .suggestion-target-preview span,
    .suggestion-target-quote span {
        color: var(--editor-panel-muted);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .suggestion-target-preview blockquote,
    .suggestion-target-quote blockquote {
        margin: 0;
        border-left: 3px solid var(--editor-accent);
        padding-left: 8px;
        white-space: pre-wrap;
    }

    .suggestion-form-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: end;
    }

    .suggestion-color-grid {
        display: grid;
        grid-template-columns: minmax(0, 86px) auto;
        gap: 8px;
        align-items: end;
    }

    .suggestion-color-control input[type="color"] {
        width: 100%;
        min-height: 34px;
        padding: 2px;
        cursor: pointer;
    }

    .suggestion-tag-chip {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        border: 1px solid color-mix(in srgb, var(--suggestion-color, var(--editor-accent)) 72%, transparent);
        border-radius: 999px;
        padding: 3px 8px;
        color: var(--editor-panel-ink);
        background: color-mix(in srgb, var(--suggestion-color, var(--editor-accent)) 18%, transparent);
        font-size: 0.78rem;
        font-weight: 700;
    }

    .suggestion-preset-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .suggestion-preset-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
        border: 1px solid color-mix(in srgb, var(--suggestion-color, var(--editor-accent)) 72%, var(--editor-paper-edge));
        border-radius: 999px;
        background: color-mix(in srgb, var(--suggestion-color, var(--editor-accent)) 16%, var(--editor-input));
        color: var(--editor-panel-ink);
        cursor: pointer;
        font: inherit;
        padding: 5px 9px;
    }

    .suggestion-preset-button::before {
        content: "";
        width: 11px;
        height: 11px;
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 999px;
        background: var(--suggestion-color, var(--editor-accent));
    }

    .suggestion-preset-button:hover,
    .suggestion-preset-button:focus-visible {
        outline: 2px solid var(--editor-accent);
        outline-offset: 2px;
    }

    .suggestion-preset-button.is-selected {
        border-color: var(--editor-accent);
        box-shadow: 0 0 0 2px var(--editor-accent);
    }

    .suggestion-preset-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }