fix(eink): make Custom Fonts panel readable in e-ink mode (#4454) (#4464)

The selected custom-font card used `bg-primary/50`, whose opacity suffix
dodges the e-ink `.bg-primary` normalizer — leaving a dark primary fill
under force-black `text-base-content` text, i.e. black-on-black (#4454).
Add `eink-bordered` so the selected card gets the same white-bg /
black-border / black-text treatment every other selected surface gets,
while staying distinct from the faint-bordered unselected cards.

The Import Font "+" badge had the same class of bug: e-ink's substring
matchers catch its `group-hover:bg-base-content` and `text-base-content/60`
utilities and paint a black glyph on a black circle. Pin the badge to an
intentional base-content circle with a base-100 glyph so the "+" stays
legible.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/readest-app/src/components/settings/CustomFonts.tsx

@@ -198,6 +198,8 @@ const CustomFonts: React.FC<CustomFontsProps> = ({ bookKey, onBack }) => {
         >
           <span
             className={clsx(
+              // eink-inverted keeps the "+" legible on its dark badge (#4454).
+              'eink-inverted',
               'flex h-5 w-5 items-center justify-center rounded-full',
               'bg-base-200 text-base-content/60',
               'transition-colors duration-150',
@@ -250,7 +252,9 @@ const CustomFonts: React.FC<CustomFontsProps> = ({ bookKey, onBack }) => {
             className={clsx(
               'card h-12 border shadow-sm',
               currentFontFamily === family.name
-                ? 'border-primary/50 bg-primary/50'
+                ? // eink-bordered: bg-primary/50 dodges the eink normalizer, so
+                  // without it the selected card is black-on-black (#4454).
+                  'border-primary/50 bg-primary/50 eink-bordered'
                 : `border-base-200 bg-base-100 ${isDeleteMode ? '' : 'cursor-pointer'}`,
             )}
             onClick={!isDeleteMode ? () => handleSelectFamily(family) : undefined}

apps/readest-app/src/styles/globals.css

@@ -530,6 +530,13 @@ input[type='range'].slider-input {
   background-color: theme('colors.base-content') !important;
 }
 
+/* Inverted chip for e-ink: base-content fill, base-100 content. Declared after
+   the substring matchers above so the content color wins the cascade. */
+[data-eink='true'] .eink-inverted {
+  background-color: theme('colors.base-content') !important;
+  color: theme('colors.base-100') !important;
+}
+
 [data-eink='true'] [class*='font-light'] {
   font-weight: normal !important;
 }