.rich-editor-shell { overflow: hidden; border: 1px solid #cbd8ec; border-radius: 8px; background: #fff; }
.rich-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 9px; border-bottom: 1px solid #dbe5f2; background: #f4f8fc; }
.rich-editor-toolbar button, .rich-editor-toolbar select { min-width: 38px; min-height: 36px; margin: 0; padding: 7px 9px; border: 1px solid #c5d4e8; border-radius: 6px; background: #fff; color: #102b52; font: 700 14px/1 Arial, sans-serif; cursor: pointer; }
.rich-editor-toolbar select { width: auto; min-width: 130px; font-weight: 600; }
.rich-editor-toolbar button[data-rich-command="insertUnorderedList"], .rich-editor-toolbar button[data-rich-command="insertOrderedList"] { min-width: 68px; }
.rich-editor-toolbar button:hover, .rich-editor-toolbar button:focus-visible, .rich-editor-toolbar select:focus-visible { border-color: #26b9c4; box-shadow: 0 0 0 2px rgba(38,185,196,.16); outline: 0; }
.rich-editor-toolbar button[data-rich-command="formatPainter"].is-active { border-color: #168aa5; background: #dff8fa; color: #07506a; box-shadow: 0 0 0 2px rgba(38,185,196,.22); }
.rich-color-control { display: inline-flex !important; width: 44px; height: 36px; align-items: center; justify-content: center; position: relative; margin: 0 !important; border: 1px solid #c5d4e8; border-radius: 6px; background: #fff; color: #102b52; font: 800 15px/1 Arial, sans-serif; cursor: pointer; }
.rich-color-control input { position: absolute; inset: auto 6px 3px; width: 30px !important; height: 5px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: .9; cursor: pointer; }
.rich-editor-surface { min-height: 300px; padding: 18px; color: #1d2942; font: 16px/1.75 Arial, sans-serif; outline: 0; }
.rich-editor-surface:focus { box-shadow: inset 0 0 0 2px rgba(38,185,196,.24); }
.rich-editor-surface p { margin: 0 0 1em; }
.rich-editor-surface h2 { margin: 1.4em 0 .55em; color: #0b315d; font: 800 25px/1.3 Arial, sans-serif; }
.rich-editor-surface h3 { margin: 1.2em 0 .5em; color: #146a83; font: 800 20px/1.35 Arial, sans-serif; }
.rich-editor-surface :is(p, div) { text-align: justify; text-align-last: left; }
.rich-editor-surface :is(h2, h3) { text-align: left; }
.rich-editor-surface ul, .rich-editor-surface ol { margin: .8em 0 1.2em; padding-left: 28px; }
.rich-editor-surface li { margin: .35em 0; }
.rich-editor-surface figure { margin: 1.5em 0; }
.rich-editor-surface figure img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 6px; background: #edf4f8; }
.rich-editor-surface figcaption { margin-top: 8px; color: #60718a; font: 13px/1.5 Arial, sans-serif; }
.rich-editor-toolbar button[data-rich-command="insertImage"] { min-width: 82px; }
.rich-editor-source { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important; }
html[data-theme="dark"] .rich-editor-shell, html[data-theme="dark"] .rich-editor-surface { background: #0d2038; color: #f0f6ff; border-color: #2c4d70; }
html[data-theme="dark"] .rich-editor-toolbar { background: #132b48; border-color: #2c4d70; }
html[data-theme="dark"] .rich-editor-toolbar button, html[data-theme="dark"] .rich-editor-toolbar select, html[data-theme="dark"] .rich-color-control { background: #173556; border-color: #3b6085; color: #fff; }
html[data-theme="dark"] .rich-editor-surface h2, html[data-theme="dark"] .rich-editor-surface h3 { color: #8ddce4; }
html[data-theme="dark"] .rich-editor-surface figure img { background: #091a2e; }
html[data-theme="dark"] .rich-editor-surface figcaption { color: #b7c7d9; }
@media (max-width: 640px) { .rich-editor-toolbar { gap: 4px; padding: 7px; } .rich-editor-toolbar button { min-width: 34px; padding: 6px; } .rich-editor-toolbar select { flex: 1 1 130px; } .rich-editor-surface { min-height: 260px; padding: 14px; } }