diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx
index 726a970..2e1ccd1 100644
--- a/src/admin/AdminApp.tsx
+++ b/src/admin/AdminApp.tsx
@@ -12,7 +12,6 @@ import { LoadingState } from "./ui";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import "./variables.css";
-import "./offers.css";
 
 const Users = lazy(() => import("./pages/Users"));
 const Attendance = lazy(() => import("./pages/Attendance"));
diff --git a/src/admin/components/RichEditor.tsx b/src/admin/components/RichEditor.tsx
index 41fbf86..72f1d5a 100644
--- a/src/admin/components/RichEditor.tsx
+++ b/src/admin/components/RichEditor.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useRef, useCallback, useLayoutEffect } from "react";
 import ReactQuill from "react-quill-new";
 import "react-quill-new/dist/quill.snow.css";
+import { RichEditorRoot } from "../ui/RichText";
 
 const COLORS = [
   "#000000",
@@ -104,8 +105,7 @@ export default function RichEditor({
   }, []);
 
   return (
-    <div
-      className="admin-rich-editor"
+    <RichEditorRoot
       style={{ "--re-min-height": minHeight } as React.CSSProperties}
     >
       <ReactQuill
@@ -118,6 +118,6 @@ export default function RichEditor({
         placeholder={placeholder}
         readOnly={readOnly}
       />
-    </div>
+    </RichEditorRoot>
   );
 }
diff --git a/src/admin/offers.css b/src/admin/offers.css
deleted file mode 100644
index 86d2a51..0000000
--- a/src/admin/offers.css
+++ /dev/null
@@ -1,417 +0,0 @@
-/* ============================================
-   Offers Module
-   ============================================ */
-
-/* RichEditor (Quill) */
-.admin-rich-editor {
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  overflow: visible;
-}
-
-.admin-rich-editor .quill {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Toolbar */
-.admin-rich-editor .ql-toolbar.ql-snow {
-  background: var(--bg-secondary);
-  border: none;
-  border-bottom: 1px solid var(--border-color);
-  border-radius: 0.5rem 0.5rem 0 0;
-  padding: 0.5rem;
-  flex-wrap: wrap;
-  gap: 2px;
-}
-
-.admin-rich-editor .ql-toolbar .ql-formats {
-  margin-right: 8px;
-}
-
-/* Toolbar buttons */
-.admin-rich-editor .ql-snow .ql-stroke {
-  stroke: var(--text-secondary);
-}
-.admin-rich-editor .ql-snow .ql-fill {
-  fill: var(--text-secondary);
-}
-.admin-rich-editor .ql-snow .ql-picker-label {
-  color: var(--text-secondary);
-  border-color: var(--border-color);
-}
-
-.admin-rich-editor .ql-snow button:hover .ql-stroke,
-.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-stroke {
-  stroke: var(--text-primary);
-}
-.admin-rich-editor .ql-snow button:hover .ql-fill,
-.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-fill {
-  fill: var(--text-primary);
-}
-.admin-rich-editor .ql-snow button:hover,
-.admin-rich-editor .ql-snow .ql-picker-label:hover {
-  color: var(--text-primary);
-}
-
-/* Active state */
-.admin-rich-editor .ql-snow button.ql-active {
-  color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
-  border-radius: 4px;
-}
-.admin-rich-editor .ql-snow button.ql-active .ql-stroke {
-  stroke: var(--accent-color);
-}
-.admin-rich-editor .ql-snow button.ql-active .ql-fill,
-.admin-rich-editor .ql-snow button.ql-active .ql-stroke.ql-fill {
-  fill: var(--accent-color);
-}
-.admin-rich-editor .ql-snow .ql-picker-item.ql-selected {
-  color: var(--accent-color);
-}
-.admin-rich-editor .ql-snow .ql-picker-label.ql-active {
-  color: var(--accent-color);
-}
-.admin-rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke {
-  stroke: var(--accent-color);
-}
-
-/* Dropdowns (font, size, color, align) */
-.admin-rich-editor .ql-snow .ql-picker-options {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  padding: 0.25rem;
-}
-
-.admin-rich-editor .ql-snow .ql-picker-item {
-  color: var(--text-secondary);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-.admin-rich-editor .ql-snow .ql-picker-item:hover {
-  color: var(--text-primary);
-  background: var(--bg-secondary);
-}
-
-/* Font picker */
-.admin-rich-editor .ql-snow .ql-font .ql-picker-options {
-  min-width: 11rem;
-  max-height: 200px;
-  overflow-y: auto;
-}
-.admin-rich-editor .ql-snow .ql-size .ql-picker-options {
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-/* Font labels - vysoka specificita kvuli quill.snow.css */
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before {
-  content: "Arial" !important;
-  font-family: Arial, sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before {
-  content: "Tahoma" !important;
-  font-family: Tahoma, sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before {
-  content: "Verdana" !important;
-  font-family: Verdana, sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before {
-  content: "Georgia" !important;
-  font-family: Georgia, serif;
-}
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-label[data-value="times-new-roman"]::before,
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-item[data-value="times-new-roman"]::before {
-  content: "Times New Roman" !important;
-  font-family: "Times New Roman", serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before {
-  content: "Courier New" !important;
-  font-family: "Courier New", monospace;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before {
-  content: "Trebuchet MS" !important;
-  font-family: "Trebuchet MS", sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="impact"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="impact"]::before {
-  content: "Impact" !important;
-  font-family: Impact, sans-serif;
-}
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-label[data-value="comic-sans-ms"]::before,
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-item[data-value="comic-sans-ms"]::before {
-  content: "Comic Sans MS" !important;
-  font-family: "Comic Sans MS", cursive;
-}
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-label[data-value="lucida-console"]::before,
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-item[data-value="lucida-console"]::before {
-  content: "Lucida Console" !important;
-  font-family: "Lucida Console", monospace;
-}
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-label[data-value="palatino-linotype"]::before,
-.ql-snow
-  .ql-picker.ql-font
-  .ql-picker-item[data-value="palatino-linotype"]::before {
-  content: "Palatino Linotype" !important;
-  font-family: "Palatino Linotype", serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before {
-  content: "Garamond" !important;
-  font-family: Garamond, serif;
-}
-
-/* Font classes */
-.ql-font-arial {
-  font-family: Arial, sans-serif;
-}
-.ql-font-tahoma {
-  font-family: Tahoma, sans-serif;
-}
-.ql-font-verdana {
-  font-family: Verdana, sans-serif;
-}
-.ql-font-georgia {
-  font-family: Georgia, serif;
-}
-.ql-font-times-new-roman {
-  font-family: "Times New Roman", serif;
-}
-.ql-font-courier-new {
-  font-family: "Courier New", monospace;
-}
-.ql-font-trebuchet-ms {
-  font-family: "Trebuchet MS", sans-serif;
-}
-.ql-font-impact {
-  font-family: Impact, sans-serif;
-}
-.ql-font-comic-sans-ms {
-  font-family: "Comic Sans MS", cursive;
-}
-.ql-font-lucida-console {
-  font-family: "Lucida Console", monospace;
-}
-.ql-font-palatino-linotype {
-  font-family: "Palatino Linotype", serif;
-}
-.ql-font-garamond {
-  font-family: Garamond, serif;
-}
-
-/* Size picker */
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
-  content: "8px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before {
-  content: "9px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
-  content: "10px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before {
-  content: "11px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
-  content: "12px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
-  content: "14px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
-  content: "16px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
-  content: "18px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
-  content: "20px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
-  content: "24px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
-  content: "28px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
-  content: "32px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
-  content: "36px" !important;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
-  content: "48px" !important;
-}
-
-/* Editor area */
-.admin-rich-editor .ql-container.ql-snow {
-  border: none;
-  border-radius: 0 0 0.5rem 0.5rem;
-  font-family: Tahoma, sans-serif;
-  font-size: 14px;
-}
-
-.admin-rich-editor .ql-editor {
-  min-height: var(--re-min-height, 120px);
-  padding: 0.75rem;
-  color: var(--text-primary);
-  line-height: 1.6;
-  font-family: Tahoma, sans-serif;
-  font-size: 14px;
-  background: var(--input-bg);
-}
-
-.admin-rich-editor .ql-editor.ql-blank::before {
-  color: var(--text-tertiary);
-  font-style: normal;
-}
-
-/* Lists inside editor */
-.admin-rich-editor .ql-editor ul,
-.admin-rich-editor .ql-editor ol {
-  padding-left: 1.5rem;
-}
-
-/* Color picker */
-.admin-rich-editor
-  .ql-snow
-  .ql-color-picker
-  .ql-picker-options[aria-hidden="false"] {
-  width: 176px;
-  padding: 0.375rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-}
-
-.admin-rich-editor .ql-snow .ql-color-picker .ql-picker-item {
-  width: 18px;
-  height: 18px;
-  border-radius: 2px;
-  margin: 0;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-/* Tooltip (link editor) */
-.admin-rich-editor .ql-snow .ql-tooltip {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.375rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  color: var(--text-primary);
-}
-
-.admin-rich-editor .ql-snow .ql-tooltip input[type="text"] {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  color: var(--text-primary);
-  padding: 0.25rem 0.5rem;
-}
-
-.admin-rich-editor .ql-snow .ql-tooltip a {
-  color: var(--accent-color);
-}
-
-/* Read-only rendered rich text (Quill HTML output) */
-.admin-rich-text-view {
-  color: var(--text-secondary);
-  line-height: 1.6;
-  font-size: 0.875rem;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  min-width: 0;
-}
-
-.admin-rich-text-view ul,
-.admin-rich-text-view ol {
-  padding-left: 1.5rem;
-  margin: 0.25rem 0 0.75rem;
-}
-
-.admin-rich-text-view li {
-  margin-bottom: 0.15rem;
-}
-
-.admin-rich-text-view a {
-  color: var(--accent-color);
-}
-
-.admin-rich-text-view strong,
-.admin-rich-text-view b {
-  font-weight: 600;
-  color: var(--text-primary);
-  display: inline-block;
-  margin-top: 0.5rem;
-}
-
-.admin-rich-text-view br + b,
-.admin-rich-text-view br + strong {
-  margin-top: 0.75rem;
-}
-
-.admin-rich-text-view > br:first-child,
-.admin-rich-text-view ul + br,
-.admin-rich-text-view ol + br {
-  display: none;
-}
-
-/* Keep Quill picker dropdowns on-screen on narrow phones.
-   The font picker hard-codes min-width: 11rem and the color picker a fixed
-   176px width — both overflow a ~360px viewport. */
-@media (max-width: 480px) {
-  .admin-rich-editor .ql-snow .ql-picker-options,
-  .admin-rich-editor .ql-snow .ql-font .ql-picker-options,
-  .admin-rich-editor .ql-snow .ql-size .ql-picker-options {
-    min-width: 0;
-    max-width: calc(100vw - 32px);
-  }
-
-  .admin-rich-editor
-    .ql-snow
-    .ql-color-picker
-    .ql-picker-options[aria-hidden="false"] {
-    width: auto;
-    max-width: calc(100vw - 32px);
-  }
-}
diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index 10f960c..a767590 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -63,6 +63,7 @@ import {
   EmptyState,
   LoadingState,
   PageEnter,
+  RichTextView,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -1559,8 +1560,7 @@ export default function InvoiceDetail() {
             Veřejné poznámky na faktuře
           </Typography>
           {notes && notes.trim() && notes !== "<p><br></p>" ? (
-            <Box
-              className="admin-rich-text-view"
+            <RichTextView
               dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notes) }}
             />
           ) : (
diff --git a/src/admin/pages/OrderDetail.tsx b/src/admin/pages/OrderDetail.tsx
index e950cf6..9e3545c 100644
--- a/src/admin/pages/OrderDetail.tsx
+++ b/src/admin/pages/OrderDetail.tsx
@@ -31,6 +31,7 @@ import {
   EmptyState,
   LoadingState,
   PageEnter,
+  RichTextView,
   type DataColumn,
 } from "../ui";
 
@@ -759,8 +760,7 @@ export default function OrderDetail() {
                   </Typography>
                 </Box>
                 {section.content && (
-                  <Box
-                    className="admin-rich-text-view"
+                  <RichTextView
                     sx={{ p: 2 }}
                     dangerouslySetInnerHTML={{
                       __html: DOMPurify.sanitize(section.content),
diff --git a/src/admin/ui/RichText.tsx b/src/admin/ui/RichText.tsx
new file mode 100644
index 0000000..664edc5
--- /dev/null
+++ b/src/admin/ui/RichText.tsx
@@ -0,0 +1,207 @@
+import { styled } from "@mui/material/styles";
+
+/**
+ * Theme-aware styling for the Quill rich-text editor and its read-only
+ * rendered output. Replaces the former `offers.css` — the overrides now layer
+ * on top of `react-quill-new/dist/quill.snow.css` via scoped `styled()`
+ * wrappers, resolving against `theme.vars` for light/dark.
+ *
+ * The font/size picker rules from the old stylesheet were dropped: the editor
+ * toolbar (see RichEditor.tsx) exposes neither picker. The `.ql-font-*`
+ * content classes are kept so legacy stored HTML still renders with its font.
+ */
+
+// Font classes applied to content spans (legacy HTML). Shared by editor + view.
+const QL_FONT_CLASSES = {
+  "& .ql-font-arial": { fontFamily: "Arial, sans-serif" },
+  "& .ql-font-tahoma": { fontFamily: "Tahoma, sans-serif" },
+  "& .ql-font-verdana": { fontFamily: "Verdana, sans-serif" },
+  "& .ql-font-georgia": { fontFamily: "Georgia, serif" },
+  "& .ql-font-times-new-roman": { fontFamily: '"Times New Roman", serif' },
+  "& .ql-font-courier-new": { fontFamily: '"Courier New", monospace' },
+  "& .ql-font-trebuchet-ms": { fontFamily: '"Trebuchet MS", sans-serif' },
+  "& .ql-font-impact": { fontFamily: "Impact, sans-serif" },
+  "& .ql-font-comic-sans-ms": { fontFamily: '"Comic Sans MS", cursive' },
+  "& .ql-font-lucida-console": { fontFamily: '"Lucida Console", monospace' },
+  "& .ql-font-palatino-linotype": { fontFamily: '"Palatino Linotype", serif' },
+  "& .ql-font-garamond": { fontFamily: "Garamond, serif" },
+} as const;
+
+/** Wrapper around <ReactQuill> — was `.admin-rich-editor`. */
+export const RichEditorRoot = styled("div")(({ theme }) => ({
+  border: `1px solid ${theme.vars!.palette.divider}`,
+  borderRadius: "0.5rem",
+  overflow: "visible",
+
+  "& .quill": { display: "flex", flexDirection: "column" },
+
+  // Toolbar
+  "& .ql-toolbar.ql-snow": {
+    background: theme.vars!.palette.background.paper,
+    border: "none",
+    borderBottom: `1px solid ${theme.vars!.palette.divider}`,
+    borderRadius: "0.5rem 0.5rem 0 0",
+    padding: "0.5rem",
+    flexWrap: "wrap",
+    gap: "2px",
+  },
+  "& .ql-toolbar .ql-formats": { marginRight: "8px" },
+
+  // Toolbar icons (idle)
+  "& .ql-snow .ql-stroke": { stroke: theme.vars!.palette.text.secondary },
+  "& .ql-snow .ql-fill": { fill: theme.vars!.palette.text.secondary },
+  "& .ql-snow .ql-picker-label": {
+    color: theme.vars!.palette.text.secondary,
+    borderColor: theme.vars!.palette.divider,
+  },
+
+  // Toolbar icons (hover)
+  "& .ql-snow button:hover .ql-stroke, & .ql-snow .ql-picker-label:hover .ql-stroke":
+    { stroke: theme.vars!.palette.text.primary },
+  "& .ql-snow button:hover .ql-fill, & .ql-snow .ql-picker-label:hover .ql-fill":
+    { fill: theme.vars!.palette.text.primary },
+  "& .ql-snow button:hover, & .ql-snow .ql-picker-label:hover": {
+    color: theme.vars!.palette.text.primary,
+  },
+
+  // Active state
+  "& .ql-snow button.ql-active": {
+    color: theme.vars!.palette.primary.main,
+    background: `rgba(${theme.vars!.palette.primary.mainChannel} / 0.15)`,
+    borderRadius: "4px",
+  },
+  "& .ql-snow button.ql-active .ql-stroke": {
+    stroke: theme.vars!.palette.primary.main,
+  },
+  "& .ql-snow button.ql-active .ql-fill, & .ql-snow button.ql-active .ql-stroke.ql-fill":
+    { fill: theme.vars!.palette.primary.main },
+  "& .ql-snow .ql-picker-item.ql-selected": {
+    color: theme.vars!.palette.primary.main,
+  },
+  "& .ql-snow .ql-picker-label.ql-active": {
+    color: theme.vars!.palette.primary.main,
+  },
+  "& .ql-snow .ql-picker-label.ql-active .ql-stroke": {
+    stroke: theme.vars!.palette.primary.main,
+  },
+
+  // Dropdowns (color / background / align pickers)
+  "& .ql-snow .ql-picker-options": {
+    background: theme.vars!.palette.background.default,
+    border: `1px solid ${theme.vars!.palette.divider}`,
+    borderRadius: "0.375rem",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+    zIndex: 1000,
+    padding: "0.25rem",
+    ...theme.applyStyles("dark", {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
+    }),
+  },
+  "& .ql-snow .ql-picker-item": {
+    color: theme.vars!.palette.text.secondary,
+    padding: "0.25rem 0.5rem",
+    borderRadius: "0.25rem",
+  },
+  "& .ql-snow .ql-picker-item:hover": {
+    color: theme.vars!.palette.text.primary,
+    background: theme.vars!.palette.background.paper,
+  },
+
+  // Editor area
+  "& .ql-container.ql-snow": {
+    border: "none",
+    borderRadius: "0 0 0.5rem 0.5rem",
+    fontFamily: "Tahoma, sans-serif",
+    fontSize: "14px",
+  },
+  "& .ql-editor": {
+    minHeight: "var(--re-min-height, 120px)",
+    padding: "0.75rem",
+    color: theme.vars!.palette.text.primary,
+    lineHeight: 1.6,
+    fontFamily: "Tahoma, sans-serif",
+    fontSize: "14px",
+    background: theme.vars!.palette.background.paper,
+  },
+  "& .ql-editor.ql-blank::before": {
+    color: theme.vars!.palette.text.disabled,
+    fontStyle: "normal",
+  },
+  "& .ql-editor ul, & .ql-editor ol": { paddingLeft: "1.5rem" },
+
+  // Color picker
+  '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': {
+    width: "176px",
+    padding: "0.375rem",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "2px",
+  },
+  "& .ql-snow .ql-color-picker .ql-picker-item": {
+    width: "18px",
+    height: "18px",
+    borderRadius: "2px",
+    margin: 0,
+    padding: 0,
+    flexShrink: 0,
+  },
+
+  // Tooltip (link editor)
+  "& .ql-snow .ql-tooltip": {
+    background: theme.vars!.palette.background.default,
+    border: `1px solid ${theme.vars!.palette.divider}`,
+    borderRadius: "0.375rem",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+    color: theme.vars!.palette.text.primary,
+    ...theme.applyStyles("dark", {
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
+    }),
+  },
+  '& .ql-snow .ql-tooltip input[type="text"]': {
+    background: theme.vars!.palette.background.paper,
+    border: `1px solid ${theme.vars!.palette.divider}`,
+    borderRadius: "0.25rem",
+    color: theme.vars!.palette.text.primary,
+    padding: "0.25rem 0.5rem",
+  },
+  "& .ql-snow .ql-tooltip a": { color: theme.vars!.palette.primary.main },
+
+  ...QL_FONT_CLASSES,
+
+  // Keep picker dropdowns on-screen on narrow phones (the color picker is a
+  // fixed 176px which overflows a ~360px viewport).
+  "@media (max-width:480px)": {
+    "& .ql-snow .ql-picker-options": {
+      minWidth: 0,
+      maxWidth: "calc(100vw - 32px)",
+    },
+    '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': {
+      width: "auto",
+      maxWidth: "calc(100vw - 32px)",
+    },
+  },
+}));
+
+/** Read-only rendered Quill HTML output — was `.admin-rich-text-view`. */
+export const RichTextView = styled("div")(({ theme }) => ({
+  color: theme.vars!.palette.text.secondary,
+  lineHeight: 1.6,
+  fontSize: "0.875rem",
+  overflowWrap: "break-word",
+  wordBreak: "break-word",
+  minWidth: 0,
+
+  "& ul, & ol": { paddingLeft: "1.5rem", margin: "0.25rem 0 0.75rem" },
+  "& li": { marginBottom: "0.15rem" },
+  "& a": { color: theme.vars!.palette.primary.main },
+  "& strong, & b": {
+    fontWeight: 600,
+    color: theme.vars!.palette.text.primary,
+    display: "inline-block",
+    marginTop: "0.5rem",
+  },
+  "& br + b, & br + strong": { marginTop: "0.75rem" },
+  "& > br:first-child, & ul + br, & ol + br": { display: "none" },
+
+  ...QL_FONT_CLASSES,
+}));
diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts
index 8418222..98fd371 100644
--- a/src/admin/ui/index.ts
+++ b/src/admin/ui/index.ts
@@ -29,3 +29,4 @@ export { default as ProgressBar } from "./ProgressBar";
 export type { ProgressColor } from "./ProgressBar";
 export { default as ThemeToggle } from "./ThemeToggle";
 export { default as PageEnter } from "./PageEnter";
+export { RichEditorRoot, RichTextView } from "./RichText";