.ck-editor__editable_inline {
    min-height: 300px;
}

.ck-editor__editable h1 {
    font-size: 20px;
    font-weight: 700;
}

.ck-editor__editable a.cta {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffd101;
    color: #222222;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
}

/* ── Dark mode ── */
html.dark .ck.ck-editor__main>.ck-editor__editable,
html.dark .ck.ck-toolbar,
html.dark .ck.ck-toolbar__separator,
html.dark .ck.ck-button,
html.dark .ck.ck-dropdown__panel,
html.dark .ck.ck-list,
html.dark .ck.ck-balloon-panel,
html.dark .ck.ck-input {
    --ck-color-base-background:            var(--color-gray-900);
    --ck-color-base-foreground:            var(--color-gray-800);
    --ck-color-base-border:                var(--color-gray-700);
    --ck-color-base-text:                  var(--color-gray-100);
    --ck-color-base-active:                var(--color-blue-600);
    --ck-color-base-active-focus:          var(--color-blue-700);

    --ck-color-toolbar-background:         var(--color-gray-800);
    --ck-color-toolbar-border-color:       var(--color-gray-700);

    --ck-color-button-default-background:  transparent;
    --ck-color-button-default-hover-background: var(--color-gray-700);
    --ck-color-button-default-active-background: var(--color-gray-700);
    --ck-color-button-on-background:       var(--color-gray-700);
    --ck-color-button-on-hover-background: var(--color-gray-600);
    --ck-color-button-on-active-background: var(--color-gray-600);
    --ck-color-button-on-color:            var(--color-gray-100);
    --ck-color-button-action-background:   var(--color-blue-600);
    --ck-color-button-action-hover-background: var(--color-blue-700);

    --ck-color-panel-background:           var(--color-gray-800);
    --ck-color-panel-border:               var(--color-gray-700);

    --ck-color-list-background:            var(--color-gray-800);
    ma: var(--color-gray-700);
    --ck-color-list-button-on-background:  var(--color-gray-700);
    --ck-color-list-button-on-background-focus: var(--color-gray-600);

    --ck-color-input-background:           var(--color-gray-900);
    --ck-color-input-border:               var(--color-gray-600);
    --ck-color-input-text:                 var(--color-gray-100);
    --ck-color-input-disabled-background:  var(--color-gray-800);
    --ck-color-input-disabled-border:      var(--color-gray-700);
    --ck-color-input-disabled-text:        var(--color-gray-500);

    --ck-color-labeled-field-label-background: var(--color-gray-900);

    --ck-color-focus-border:               var(--color-blue-500);
    --ck-color-focus-outer-shadow:         color-mix(in srgb, var(--color-blue-500) 30%, transparent);

    --ck-color-text:                       var(--color-gray-100);
    --ck-color-shadow-drop:                color-mix(in srgb, black 40%, transparent);
    --ck-color-shadow-inner:               color-mix(in srgb, black 30%, transparent);
}

html.dark .ck.ck-editor__main>.ck-editor__editable {
    background: var(--color-gray-900);
    color: var(--color-gray-100);
    border-color: var(--color-gray-700);
}

html.dark .ck.ck-editor__main>.ck-editor__editable.ck-focused {
    border-color: var(--color-blue-500);
}