/* ============================================================
   openTMS — DESIGN SYSTEM  (Basis: Richtung „Antwortbogen“)
   ------------------------------------------------------------
   Eine Token-Schicht (--otms-*), drei Paletten, je hell + dunkel:
     html[data-palette="antwortbogen"]  (Standard)  Papier · Graphit · Formularrosa · Himbeer
     html[data-palette="op-gruen"]                  Steril-Weiß · OP-Grün · Monitor-Amber
     html[data-palette="koenigsblau"]               Papier · Königsblau · Rotstift · Textmarker
   Dunkel = html.dark (bestehender Schalter).
   Alle Komponenten dieser Datei UND die Tailwind-Utility-Überschreibungen
   unten lesen ausschließlich Tokens — die Palette wechselt nur Werte.
   ============================================================ */
@import url('https://fonts.bunny.net/css?family=barlow-condensed:500,600,700|ibm-plex-sans:400,400i,500,600|ibm-plex-mono:400,500,600&display=swap');

:root, html[data-palette="antwortbogen"] {
    --otms-f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --otms-f-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --otms-f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --otms-r: 2px;
    --otms-pad: clamp(16px, 4vw, 40px);
    /* Hoehe der Generalprobe-Leiste; app.css und app-modules.css rechnen damit. */
    --otms-simbar-h: 52px;

    --otms-bg:        #FCFCFA;   /* Papier */
    --otms-bg-2:      #F4F4F1;   /* ruhige Fläche */
    --otms-surface:   #FFFFFF;
    --otms-tint:      #FDF0F3;   /* Formularrosa, stark verdünnt */
    --otms-ink:       #26262B;   /* Graphit */
    --otms-ink-soft:  #6F7078;   /* Bleistiftgrau */
    --otms-ink-faint: #A2A3AA;
    --otms-line:      #F2A7B5;   /* Formularrosa: Linien, Feldrahmen */
    --otms-line-strong:#D46C84;  /* bedienbare Ovale, 3:1 */
    --otms-accent:    #D81E5B;   /* Himbeer */
    --otms-accent-hover:#B5164A;
    --otms-on-accent: #FFFFFF;
    --otms-ok:        #1F8A5B;
    --otms-ok-text:   #17704A;
    --otms-ok-tint:   #E8F4EE;
    --otms-danger:    #D81E5B;
    --otms-danger-text:#B5164A;
    --otms-danger-tint:#FCE7ED;
    --otms-warn:      #B8860B;
    --otms-warn-tint: #FBF3DC;
    --otms-mark:      #141417;   /* Passermarken */
    --otms-pencil:    #2E2E34;
    --otms-focus:     #26262B;
    --otms-trace:     #D81E5B;   /* Puls-Linie im Countdown */
    --otms-shadow:    none;
    color-scheme: light;
}
html.dark, html.dark[data-palette="antwortbogen"] {
    --otms-bg: #1B1B1F; --otms-bg-2: #232329; --otms-surface: #202025; --otms-tint: #2A2227;
    --otms-ink: #ECECE8; --otms-ink-soft: #A4A5AE; --otms-ink-faint: #6E6F78;
    --otms-line: #8A4A5A; --otms-line-strong: #B8677C;
    --otms-accent: #FF5C8A; --otms-accent-hover: #FF83A6; --otms-on-accent: #1B1B1F;
    --otms-ok: #3DBE86; --otms-ok-text: #5AD19B; --otms-ok-tint: #1C2C25;
    --otms-danger: #FF5C8A; --otms-danger-text: #FF83A6; --otms-danger-tint: #35202A;
    --otms-warn: #E0B84A; --otms-warn-tint: #33301E;
    --otms-mark: #ECECE8; --otms-pencil: #D6D6D0; --otms-focus: #ECECE8; --otms-trace: #FF5C8A;
    color-scheme: dark;
}

html[data-palette="op-gruen"] {
    --otms-bg: #F4F8F6; --otms-bg-2: #E9F0ED; --otms-surface: #FFFFFF; --otms-tint: #E3EFEB;
    --otms-ink: #07332D; --otms-ink-soft: #55645F; --otms-ink-faint: #8A9995;
    --otms-line: #D6E1DD; --otms-line-strong: #B4C6C0;
    --otms-accent: #0B5D51; --otms-accent-hover: #094A41; --otms-on-accent: #F4F8F6;
    --otms-ok: #2BB673; --otms-ok-text: #136B43; --otms-ok-tint: #E4F5EC;
    --otms-danger: #E5484D; --otms-danger-text: #B4282D; --otms-danger-tint: #FCECEC;
    --otms-warn: #D48806; --otms-warn-tint: #FFF4DC;
    --otms-mark: #07332D; --otms-pencil: #0B5D51; --otms-focus: #0B5D51; --otms-trace: #D48806;
}
html.dark[data-palette="op-gruen"] {
    --otms-bg: #062621; --otms-bg-2: #0A3630; --otms-surface: #0A3630; --otms-tint: #0E443C;
    --otms-ink: #E6F2EE; --otms-ink-soft: #9DB8B1; --otms-ink-faint: #6B8A83;
    --otms-line: #15483F; --otms-line-strong: #246358;
    --otms-accent: #FFB224; --otms-accent-hover: #FFC14F; --otms-on-accent: #062621;
    --otms-ok: #3FAE9B; --otms-ok-text: #7FD6C7; --otms-ok-tint: #10382F;
    --otms-danger: #FF8C90; --otms-danger-text: #FF8C90; --otms-danger-tint: #3A1E22;
    --otms-warn: #FFB224; --otms-warn-tint: #3A2F12;
    --otms-mark: #E6F2EE; --otms-pencil: #FFB224; --otms-focus: #FFB224; --otms-trace: #FFB224;
}

html[data-palette="koenigsblau"] {
    --otms-bg: #FFFFFF; --otms-bg-2: #F6F8FC; --otms-surface: #FFFFFF; --otms-tint: #EDF1FC;
    --otms-ink: #111A3A; --otms-ink-soft: #4B5579; --otms-ink-faint: #8A93B5;
    --otms-line: #D9DFEE; --otms-line-strong: #AEB8D6;
    --otms-accent: #1E3A9F; --otms-accent-hover: #152B7C; --otms-on-accent: #FFFFFF;
    --otms-ok: #1D7F4E; --otms-ok-text: #1D7F4E; --otms-ok-tint: #E9F5EE;
    --otms-danger: #D42A3C; --otms-danger-text: #B3202F; --otms-danger-tint: #FCEEF0;
    --otms-warn: #9A7A00; --otms-warn-tint: #FFF6C4;
    --otms-mark: #111A3A; --otms-pencil: #1E3A9F; --otms-focus: #111A3A; --otms-trace: #1E3A9F;
}
html.dark[data-palette="koenigsblau"] {
    --otms-bg: #0C1230; --otms-bg-2: #10173A; --otms-surface: #141C44; --otms-tint: #1B2660;
    --otms-ink: #E9ECF8; --otms-ink-soft: #A7B0CF; --otms-ink-faint: #6C769C;
    --otms-line: #1F2A55; --otms-line-strong: #2E3C78;
    --otms-accent: #8FA6FF; --otms-accent-hover: #ABBCFF; --otms-on-accent: #0C1230;
    --otms-ok: #4CC17F; --otms-ok-text: #7FD8A4; --otms-ok-tint: #14301F;
    --otms-danger: #FF7B88; --otms-danger-text: #FF9AA4; --otms-danger-tint: #3A1E26;
    --otms-warn: #E0B84A; --otms-warn-tint: #33301E;
    --otms-mark: #E9ECF8; --otms-pencil: #8FA6FF; --otms-focus: #E9ECF8; --otms-trace: #8FA6FF;
}

/* ============================================================
   BASIS
   ============================================================ */
html { background: var(--otms-bg); }
body {
    font-family: var(--otms-f-body) !important;
    background: var(--otms-bg) !important;
    color: var(--otms-ink) !important;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv05";
}
:focus-visible { outline: 2px solid var(--otms-focus); outline-offset: 3px; }
::selection { background: var(--otms-tint); }
h1, h2, h3, .otms-display { font-family: var(--otms-f-display); letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-weight: 700; } h2, h3 { font-weight: 600; }
.otms-label { font: 600 12px/1.2 var(--otms-f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--otms-ink-soft); }
.otms-mono, .font-mono { font-family: var(--otms-f-mono) !important; font-variant-numeric: tabular-nums; }
.otms-muted { color: var(--otms-ink-soft); }
.otms-num { font-family: var(--otms-f-mono); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Formularfeld: die Grundzelle der Richtung — Rahmen in Formularrosa, kleines Label */
.otms-field { border: 1px solid var(--otms-line); border-radius: var(--otms-r); background: var(--otms-surface); padding: 10px 14px 12px; }
.otms-field > .otms-label { display: block; margin-bottom: 4px; }
.otms-field--strong { border-color: var(--otms-line-strong); }
.otms-rule { border: 0; border-top: 1px solid var(--otms-line); margin: 0; }
/* Passermarken (schwarze Ecken) für Hauptabschnitte */
.otms-marks { position: relative; }
.otms-marks::before, .otms-marks::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--otms-mark); }
.otms-marks::before { top: -1px; left: -1px; } .otms-marks::after { top: -1px; right: -1px; }

/* Buttons */
.otms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 1.5px solid var(--otms-ink); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink);
    font: 600 16px/1 var(--otms-f-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none;
    transition: background .12s, color .12s, border-color .12s, transform .08s; }
.otms-btn:hover { background: var(--otms-bg-2); }
.otms-btn:active { transform: translateY(1px); }
.otms-btn--primary { background: var(--otms-accent); border-color: var(--otms-accent); color: var(--otms-on-accent); }
.otms-btn--primary:hover { background: var(--otms-accent-hover); border-color: var(--otms-accent-hover); }
.otms-btn--ink { background: var(--otms-ink); border-color: var(--otms-ink); color: var(--otms-bg); }
.otms-btn--ink:hover { background: var(--otms-pencil); border-color: var(--otms-pencil); }
.otms-btn--quiet { border-color: transparent; background: transparent; text-transform: none; letter-spacing: 0; font: 500 15px/1 var(--otms-f-body); text-decoration: underline; text-decoration-color: var(--otms-line-strong); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.otms-btn[disabled], .otms-btn[aria-disabled="true"] { background: var(--otms-bg-2); color: var(--otms-ink-soft); border-color: transparent; cursor: not-allowed; transform: none; }
kbd.otms-kbd { display: inline-block; min-width: 24px; padding: 3px 6px; border: 1px solid var(--otms-line-strong); border-bottom-width: 2px; border-radius: var(--otms-r); font: 500 12px/1 var(--otms-f-mono); text-align: center; color: var(--otms-ink-soft); }

/* Eingaben */
.otms-input, .auth-input { border: 1px solid var(--otms-line-strong) !important; border-radius: var(--otms-r) !important; background: var(--otms-surface) !important; color: var(--otms-ink) !important; font: 400 16px/1.3 var(--otms-f-body) !important; min-height: 44px; padding: 10px 12px !important; }
.otms-input:focus, .auth-input:focus { outline: 2px solid var(--otms-focus); outline-offset: 2px; box-shadow: none !important; }

/* Antwortoptionen (Aufgabenscreens): Buchstabenkasten links, keine Ovale außerhalb der Generalprobe */
.otms-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 10px; border-top: 1px solid var(--otms-line); cursor: pointer; text-align: left; font: inherit; color: inherit; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; }
.otms-opt:last-child { border-bottom: 1px solid var(--otms-line); }
.otms-opt:hover { background: var(--otms-tint); }
.otms-opt__letter { width: 32px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--otms-line-strong); border-radius: var(--otms-r); font: 600 15px/1 var(--otms-f-display); color: var(--otms-ink); background: var(--otms-surface); }
.otms-opt.is-sel .otms-opt__letter { background: var(--otms-ink); border-color: var(--otms-ink); color: var(--otms-bg); }
.otms-opt.is-correct { background: var(--otms-ok-tint); }
.otms-opt.is-correct .otms-opt__letter { background: var(--otms-ok); border-color: var(--otms-ok); color: #fff; }
.otms-opt.is-wrong { background: var(--otms-danger-tint); }
.otms-opt.is-wrong .otms-opt__letter { background: var(--otms-danger); border-color: var(--otms-danger); color: #fff; }
.otms-opt.is-wrong .otms-opt__text { text-decoration: line-through; text-decoration-color: var(--otms-danger); text-decoration-thickness: 2px; }
.otms-opt__tag { font: 600 11px/1 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink-soft); align-self: center; }
.otms-opt.is-correct .otms-opt__tag { color: var(--otms-ok-text); } .otms-opt.is-wrong .otms-opt__tag { color: var(--otms-danger-text); }

/* OMR-Ovale — NUR Landingpage und Generalprobe-Antwortbogen */
.otms-oval { display: inline-grid; place-items: center; width: 30px; height: 20px; border: 1.5px solid var(--otms-line-strong); border-radius: 50%; background: var(--otms-surface); font: 600 11px/1 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-oval.is-filled { background: var(--otms-pencil); border-color: var(--otms-pencil); color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 .5px var(--otms-pencil); }
.otms-oval.is-filled--ok { background: var(--otms-ok); border-color: var(--otms-ok); }
.otms-oval.is-filled--bad { background: var(--otms-danger); border-color: var(--otms-danger); }
.otms-sheet { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: 16px; font-family: var(--otms-f-mono); font-size: 13px; }
.otms-sheet__row { display: grid; grid-template-columns: 30px repeat(5, 34px) 20px; align-items: center; gap: 4px; padding: 3px 0; }
.otms-sheet__row.is-current { outline: 1.5px solid var(--otms-ink); outline-offset: 1px; }
.otms-sheet__n { color: var(--otms-ink-soft); }

/* Korrekturrand (aus Richtung 3): Erklärung neben der Aufgabe, auf kariertem Rand */
.otms-task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 34%); border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-task__body { padding: clamp(18px, 3vw, 32px); min-width: 0; }
.otms-task__stem { font-size: 17px; line-height: 1.6; max-width: 66ch; }
.otms-margin { border-left: 1px solid var(--otms-line-strong); padding: 20px 18px 24px; position: relative; min-width: 0;
    background-color: var(--otms-surface);
    background-image: linear-gradient(var(--otms-line) 1px, transparent 1px), linear-gradient(90deg, var(--otms-line) 1px, transparent 1px);
    background-size: 20px 20px; background-position: -1px -1px; }
html.dark .otms-margin { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); }
.otms-margin__label { font: 500 12px/1 var(--otms-f-mono); color: var(--otms-ink-soft); margin-bottom: 14px; }
.otms-margin__verdict { font: 700 22px/1.15 var(--otms-f-display); margin: 0 0 12px; }
.otms-margin__verdict.is-ok { color: var(--otms-ok-text); } .otms-margin__verdict.is-bad { color: var(--otms-danger-text); }
.otms-margin__text { font-size: 15px; line-height: 20px; }   /* 20px = Karo-Raster, Zeilen sitzen auf den Linien */
.otms-margin__text p { margin: 0 0 20px; }
.otms-margin__opt { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 6px; font-size: 14px; line-height: 20px; margin-bottom: 10px; }
.otms-margin__opt b { font-family: var(--otms-f-display); }
.otms-margin__opt.is-ok { color: var(--otms-ok-text); } .otms-margin__opt.is-bad { color: var(--otms-danger-text); }
@media (max-width: 900px) { .otms-task { grid-template-columns: minmax(0, 1fr); } .otms-margin { border-left: 0; border-top: 1px solid var(--otms-line-strong); } }

/* Puls (aus Richtung 2) — kleine EKG-Linie neben dem Countdown, Canvas-Rendering in js/ui.js */
.otms-pulse { display: block; width: 100%; height: 34px; }
.otms-pulse__wrap { --otms-pulse-color: var(--otms-trace); position: relative; }

/* Untertest-Tabelle (Dashboard) */
.otms-table { width: 100%; border-collapse: collapse; }
.otms-table th { text-align: left; font: 600 12px/1.2 var(--otms-f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--otms-ink-soft); padding: 10px 8px; border-bottom: 1px solid var(--otms-line-strong); }
.otms-table td { padding: 12px 8px; border-bottom: 1px solid var(--otms-line); vertical-align: middle; }
.otms-table tr:hover td { background: var(--otms-tint); }
.otms-table__group td { padding: 22px 8px 6px; border-bottom: 1px solid var(--otms-line-strong); }
.otms-table__group td:first-child { font: 600 12px/1.2 var(--otms-f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--otms-ink-soft); }
.otms-bar { height: 8px; background: var(--otms-bg-2); border: 1px solid var(--otms-line); position: relative; min-width: 90px; }
.otms-bar > i { display: block; height: 100%; background: var(--otms-pencil); }
.otms-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--otms-line-strong); }
.otms-icon { width: 20px; height: 20px; color: var(--otms-ink); flex: 0 0 auto; }

/* ============================================================
   TAILWIND-UTILITY-ÜBERSCHREIBUNGEN
   Die Views sind voller hart kodierter Tailwind-Farben. Statt 10 000 Zeilen
   Markup neu zu schreiben, werden die Muster hier auf Tokens gezogen:
   Karten → Formularfelder, Blau/Indigo → Akzent, Schatten weg, Radius 2px.
   ============================================================ */
.rounded-3xl, .rounded-2xl, .rounded-xl, .rounded-lg, .rounded-md { border-radius: var(--otms-r) !important; }
.shadow-2xl, .shadow-xl, .shadow-lg, .shadow-md, .shadow-sm, .shadow { box-shadow: none !important; }
.bg-white, .dark .dark\:bg-gray-800, .dark .dark\:bg-gray-900, .bg-slate-50, .dark .dark\:bg-gray-700, .bg-slate-100 { background-color: var(--otms-surface) !important; }
.bg-slate-50, .dark .dark\:bg-gray-700, .bg-slate-100, .bg-gray-50 { background-color: var(--otms-bg-2) !important; }
.border-slate-200, .border-slate-100, .border-slate-300, .dark .dark\:border-gray-700, .dark .dark\:border-gray-600, .border-gray-200 { border-color: var(--otms-line) !important; }
.text-slate-900, .text-slate-800, .text-slate-700, .dark .dark\:text-slate-100, .dark .dark\:text-slate-200, .dark .dark\:text-white, .text-gray-900, .text-gray-800 { color: var(--otms-ink) !important; }
.text-slate-600, .text-slate-500, .text-slate-400, .dark .dark\:text-slate-400, .dark .dark\:text-slate-300, .text-gray-600, .text-gray-500, .text-gray-400 { color: var(--otms-ink-soft) !important; }
/* Akzentfarben: alle Blau/Indigo/Purple-Utilities → ein Akzent */
[class*="bg-blue-6"], [class*="bg-indigo-6"], [class*="bg-blue-5"], [class*="bg-indigo-5"], [class*="bg-purple-6"], .bg-slate-900, .hover\:bg-black:hover, .bg-black { background-color: var(--otms-accent) !important; color: var(--otms-on-accent) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-blue-600:hover { background-color: var(--otms-accent-hover) !important; }
[class*="text-blue-"], [class*="text-indigo-"], [class*="text-purple-"], [class*="text-violet-"], [class*="text-cyan-"], [class*="text-teal-"] { color: var(--otms-accent) !important; }
[class*="bg-blue-1"], [class*="bg-indigo-1"], [class*="bg-blue-50"], [class*="bg-indigo-50"], [class*="bg-purple-1"], .dark [class*="dark:bg-blue-9"], .dark [class*="dark:bg-indigo-9"] { background-color: var(--otms-tint) !important; }
[class*="border-blue-"], [class*="border-indigo-"], .hover\:border-blue-500:hover { border-color: var(--otms-line-strong) !important; }
.focus\:ring-blue-400:focus, .focus\:ring-2:focus { --tw-ring-color: var(--otms-focus) !important; }
/* Grün/Rot bleiben semantisch, aber aus der Palette */
[class*="text-emerald-"], [class*="text-green-"] { color: var(--otms-ok-text) !important; }
[class*="bg-emerald-"], [class*="bg-green-"] { background-color: var(--otms-ok) !important; color: #fff; }
[class*="bg-emerald-50"], [class*="bg-green-50"], [class*="bg-emerald-1"], [class*="bg-green-1"] { background-color: var(--otms-ok-tint) !important; color: inherit; }
[class*="border-emerald-"], [class*="border-green-"] { border-color: var(--otms-ok) !important; }
[class*="text-red-"], [class*="text-rose-"] { color: var(--otms-danger-text) !important; }
[class*="bg-red-6"], [class*="bg-red-5"] { background-color: var(--otms-danger) !important; color: #fff; }
[class*="bg-red-50"], [class*="bg-red-1"], .dark [class*="dark:bg-red-9"] { background-color: var(--otms-danger-tint) !important; }
[class*="border-red-"] { border-color: var(--otms-danger) !important; }
[class*="text-amber-"], [class*="text-orange-"], [class*="text-yellow-"] { color: var(--otms-warn) !important; }
[class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-yellow-"] { background-color: var(--otms-warn-tint) !important; }
/* Verläufe (der lila Banner & Co.) → ruhige Flächen */
[class*="bg-gradient-to"] { background-image: none !important; background-color: var(--otms-bg-2) !important; color: var(--otms-ink) !important; }
[class*="bg-gradient-to"] .text-white, [class*="bg-gradient-to"] .opacity-80, [class*="bg-gradient-to"] .opacity-90 { color: var(--otms-ink) !important; opacity: 1 !important; }
[class*="bg-gradient-to"] .bg-white\/20 { background-color: var(--otms-line) !important; } [class*="bg-gradient-to"] .bg-white { background-color: var(--otms-pencil) !important; }
.backdrop-blur-sm { backdrop-filter: none !important; }
.bg-black\/50 { background-color: rgba(8, 8, 12, .55) !important; }
.animate-pulse { animation: none !important; }
.group-hover\:scale-110, .hover\:scale-105, .hover\:scale-110 { transform: none !important; }
.font-extrabold, .font-bold { font-weight: 600; } h1.font-extrabold { font-weight: 700; }
.font-extrabold, .font-bold, .text-4xl, .text-3xl, .text-2xl, .text-xl { font-family: var(--otms-f-display); }
.uppercase.tracking-wider, .tracking-wide, .tracking-wider { font-family: var(--otms-f-display); letter-spacing: .12em !important; }
.text-white { color: var(--otms-on-accent); }
.progress-animate { transition: width .4s ease; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--otms-line-strong) !important; }