/* DarkFull addon - make DARK mode apply consistently across the whole site
   Marker: DARKFULL01
   Notes: Works on top of site-theme.v3.css; only active when body[data-site-theme="dark"].
*/
body[data-site-theme="dark"]{ color-scheme: dark; }

/* Bridge legacy page-level CSS vars (e.g. pages-modern.css) to site theme vars.
   This fixes pages like Hướng dẫn (modern-doc) where text was using light-mode vars
   and became unreadable on dark background.
*/
body[data-site-theme="dark"]{
  --text: var(--site-text);
  --muted: var(--site-muted);
  --border: var(--site-border);
  --surface: var(--site-surface);
  --surface-2: var(--site-surface-2);
}

/* Global text/background defaults */
body[data-site-theme="dark"]{
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] ::selection{ background: rgba(122,162,255,.35); color: var(--site-text); }

/* Make borders unify */
body[data-site-theme="dark"] *,
body[data-site-theme="dark"] *::before,
body[data-site-theme="dark"] *::after{
  border-color: var(--site-border);
}

/* Page surfaces */
body[data-site-theme="dark"] #wrapper,
body[data-site-theme="dark"] #page-wrapper,
body[data-site-theme="dark"] .container-fluid{
  background: transparent !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .page-header{
  border-bottom-color: var(--site-border) !important;
}

/* Headings */
body[data-site-theme="dark"] h1,
body[data-site-theme="dark"] h2,
body[data-site-theme="dark"] h3,
body[data-site-theme="dark"] h4,
body[data-site-theme="dark"] h5,
body[data-site-theme="dark"] h6{
  color: var(--site-text) !important;
}

/* Links */
body[data-site-theme="dark"] a{ color: var(--site-link) !important; }
body[data-site-theme="dark"] a:hover,
body[data-site-theme="dark"] a:focus{ color: var(--site-link-hover) !important; }

/* Panels / cards */
body[data-site-theme="dark"] .panel,
body[data-site-theme="dark"] .panel-default,
body[data-site-theme="dark"] .well{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
  box-shadow: none !important;
}
body[data-site-theme="dark"] .panel-heading{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .panel-footer{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .panel-title,
body[data-site-theme="dark"] .panel-title a{ color: var(--site-text) !important; }

/* Hướng dẫn / doc-like blocks */
body[data-site-theme="dark"] .modern-doc,
body[data-site-theme="dark"] .modern-doc p,
body[data-site-theme="dark"] .modern-doc li,
body[data-site-theme="dark"] .modern-doc small,
body[data-site-theme="dark"] .modern-doc h1,
body[data-site-theme="dark"] .modern-doc h2,
body[data-site-theme="dark"] .modern-doc h3{
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .modern-doc h2{ border-bottom-color: var(--site-border) !important; }
body[data-site-theme="dark"] .modern-doc pre{
  background: var(--site-surface-2) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .modern-doc code{ color: var(--site-text) !important; }
body[data-site-theme="dark"] .call-to-action{
  background: linear-gradient(180deg, var(--site-surface), var(--site-surface-2)) !important;
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
}

/* Make legacy <font color> readable on dark (keep intent, increase contrast) */
body[data-site-theme="dark"] .modern-doc font[color="red"],
body[data-site-theme="dark"] .modern-doc font[color="#ff0000"],
body[data-site-theme="dark"] .modern-doc font[color="#FF0000"]{
  color: #fb7185 !important;
}
body[data-site-theme="dark"] .modern-doc font[color="blue"],
body[data-site-theme="dark"] .modern-doc font[color="#0000ff"],
body[data-site-theme="dark"] .modern-doc font[color="#0000FF"]{
  color: #93c5fd !important;
}

/* Tables */
body[data-site-theme="dark"] .table{
  background: transparent !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .table>thead>tr>th{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-bottom-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .table>tbody>tr>td,
body[data-site-theme="dark"] .table>tbody>tr>th{
  color: var(--site-text) !important;
  border-top-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .table-bordered,
body[data-site-theme="dark"] .table-bordered>thead>tr>th,
body[data-site-theme="dark"] .table-bordered>tbody>tr>td{
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd){
  background: rgba(255,255,255,.03) !important;
}
body[data-site-theme="dark"] .table-hover>tbody>tr:hover{
  background: rgba(255,255,255,.06) !important;
}
body[data-site-theme="dark"] .table-responsive{
  border-color: var(--site-border) !important;
}

/* Forms */
body[data-site-theme="dark"] .form-control,
body[data-site-theme="dark"] input[type="text"],
body[data-site-theme="dark"] input[type="email"],
body[data-site-theme="dark"] input[type="password"],
body[data-site-theme="dark"] input[type="number"],
body[data-site-theme="dark"] textarea,
body[data-site-theme="dark"] select{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .form-control:focus{
  border-color: rgba(122,162,255,.65) !important;
  box-shadow: 0 0 0 3px var(--site-focus) !important;
}
body[data-site-theme="dark"] .input-group-addon{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .help-block{ color: var(--site-muted) !important; }

/* Buttons */
body[data-site-theme="dark"] .btn{
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .btn-default{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .btn-default:hover{
  background: rgba(255,255,255,.10) !important;
}
body[data-site-theme="dark"] .btn-link{ color: var(--site-link) !important; }
body[data-site-theme="dark"] .btn-link:hover{ color: var(--site-link-hover) !important; }

/* Dropdown / nav */
body[data-site-theme="dark"] .dropdown-menu{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .dropdown-menu>li>a{
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .dropdown-menu>li>a:hover,
body[data-site-theme="dark"] .dropdown-menu>li>a:focus{
  background: rgba(255,255,255,.08) !important;
}
body[data-site-theme="dark"] .nav>li>a{ color: var(--site-text) !important; }
body[data-site-theme="dark"] .nav>li>a:hover,
body[data-site-theme="dark"] .nav>li>a:focus{ background: rgba(255,255,255,.06) !important; }

body[data-site-theme="dark"] .nav-tabs{
  border-bottom-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .nav-tabs>li>a{
  background: transparent !important;
  border-color: transparent !important;
}
body[data-site-theme="dark"] .nav-tabs>li.active>a,
body[data-site-theme="dark"] .nav-tabs>li.active>a:hover,
body[data-site-theme="dark"] .nav-tabs>li.active>a:focus{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}

/* Pagination */
body[data-site-theme="dark"] .pagination>li>a,
body[data-site-theme="dark"] .pagination>li>span{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .pagination>li>a:hover{
  background: rgba(255,255,255,.08) !important;
}
body[data-site-theme="dark"] .pagination>.active>a,
body[data-site-theme="dark"] .pagination>.active>span{
  background: rgba(122,162,255,.22) !important;
  border-color: rgba(122,162,255,.35) !important;
  color: var(--site-text) !important;
}

/* Alerts */
body[data-site-theme="dark"] .alert{
  border-color: var(--site-border) !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .alert-info{ background: rgba(59,130,246,.10) !important; }
body[data-site-theme="dark"] .alert-success{ background: rgba(34,197,94,.10) !important; }
body[data-site-theme="dark"] .alert-warning{ background: rgba(245,158,11,.10) !important; }
body[data-site-theme="dark"] .alert-danger{ background: rgba(239,68,68,.10) !important; }

/* Labels / badges */
body[data-site-theme="dark"] .label,
body[data-site-theme="dark"] .badge{
  border: 1px solid var(--site-border);
}
body[data-site-theme="dark"] .label-default{ background: rgba(255,255,255,.10) !important; color: var(--site-text) !important; }

/* Fix: badges from modern components use var(--ui-text) which stays dark.
   In dark theme, force badges to use site text color so timestamps (e.g. history) are readable. */
body[data-site-theme="dark"] .badge{
  color: var(--site-text) !important;
  background: rgba(255,255,255,.10) !important;
}
body[data-site-theme="dark"] .badge .fa,
body[data-site-theme="dark"] .badge font{
  color: inherit !important;
}

/* Fix: legacy <font color="black"> used widely (e.g. History title) becomes unreadable on dark.
   Force it to inherit theme text color, but keep code/log blocks intact. */
body[data-site-theme="dark"] font[color="black"],
body[data-site-theme="dark"] font[color="#000"],
body[data-site-theme="dark"] font[color="#000000"],
body[data-site-theme="dark"] font[color="BLACK"]{
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] pre font[color="black"],
body[data-site-theme="dark"] pre font[color="#000"],
body[data-site-theme="dark"] pre font[color="#000000"],
body[data-site-theme="dark"] code font[color="black"],
body[data-site-theme="dark"] code font[color="#000"],
body[data-site-theme="dark"] code font[color="#000000"],
body[data-site-theme="dark"] pre.prettyprint font{
  color: inherit !important;
}

/* Fix: Loại bài filter pills (.cb-inline) keep white background in dark mode
   while text turns light -> unreadable. */
body[data-site-theme="dark"] .cb-inline{
  background: var(--site-surface) !important;
  border-color: var(--site-border) !important;
  box-shadow: none !important;
  color: var(--site-text) !important;
}
body[data-site-theme="dark"] .cb-inline:hover{
  background: rgba(255,255,255,.06) !important;
}
body[data-site-theme="dark"] .cb-inline label{ color: inherit !important; }
body[data-site-theme="dark"] .cb-inline:has(input[type="checkbox"]:checked){
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: none !important;
  color: var(--site-text) !important;
}


/* Modal */
body[data-site-theme="dark"] .modal-content{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .modal-header,
body[data-site-theme="dark"] .modal-footer{
  border-color: var(--site-border) !important;
  background: var(--site-surface-2) !important;
}
body[data-site-theme="dark"] .close{ color: var(--site-text) !important; opacity: .85 !important; }

/* Pre/Code blocks */
body[data-site-theme="dark"] pre,
body[data-site-theme="dark"] code,
body[data-site-theme="dark"] kbd,
body[data-site-theme="dark"] samp{
  background: var(--site-code-bg) !important;
  color: var(--site-code-text) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body[data-site-theme="dark"] pre{ box-shadow: none !important; }

/* SB Admin sidebar + top nav stay readable */
body[data-site-theme="dark"] .navbar-inverse,
body[data-site-theme="dark"] .navbar{
  /* keep as-is; ensure text readable */
  color: var(--site-navbar-text) !important;
}
body[data-site-theme="dark"] .navbar a{ color: var(--site-navbar-text) !important; }
body[data-site-theme="dark"] .navbar a:hover{ color: #fff !important; }

/* Utility */
body[data-site-theme="dark"] .text-muted{ color: var(--site-muted) !important; }
body[data-site-theme="dark"] hr{ border-top-color: var(--site-border) !important; }

/* --- DarkFull v2: cover non-standard table markup (thead td, missing tbody, etc.) --- */
body[data-site-theme="dark"] .table-responsive{
  background: transparent !important;
}
body[data-site-theme="dark"] .table>thead>tr>td{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-bottom-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .table>thead>tr>td,
body[data-site-theme="dark"] .table>tbody>tr>td,
body[data-site-theme="dark"] .table>tbody>tr>th,
body[data-site-theme="dark"] .table>tr>td,
body[data-site-theme="dark"] .table>tr>th{
  color: var(--site-text) !important;
  background: transparent !important;
}
body[data-site-theme="dark"] .table-bordered>thead>tr>td,
body[data-site-theme="dark"] .table-bordered>tr>td,
body[data-site-theme="dark"] .table-bordered>tr>th{
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .table-striped>tr:nth-of-type(odd),
body[data-site-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd){
  background: rgba(255,255,255,.03) !important;
}
body[data-site-theme="dark"] .table-hover>tr:hover,
body[data-site-theme="dark"] .table-hover>tbody>tr:hover{
  background: rgba(122,162,255,.08) !important;
}


/* ------------------------------
   Extra table coverage (Autorank + legacy markup)
   - Some pages render <thead> with <td> directly (no <tr>)
   - Some tables render rows directly under <table> (no <tbody>)
   Marker: DARKFULL02
---------------------------------*/
body[data-site-theme="dark"] .table{
  background: var(--site-surface) !important;
}

/* Header cells even when markup is non-standard */
body[data-site-theme="dark"] .table>thead,
body[data-site-theme="dark"] .table>thead>td,
body[data-site-theme="dark"] .table>thead>th,
body[data-site-theme="dark"] .table>thead td,
body[data-site-theme="dark"] .table>thead th{
  background: var(--site-surface-2) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}

/* Rows without <tbody> */
body[data-site-theme="dark"] .table>tr>td,
body[data-site-theme="dark"] .table>tr>th{
  background: transparent !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}

/* Stripes / hover without <tbody> */
body[data-site-theme="dark"] .table-striped>tr:nth-of-type(odd),
body[data-site-theme="dark"] .table-striped>tr:nth-of-type(odd)>td,
body[data-site-theme="dark"] .table-striped>tr:nth-of-type(odd)>th{
  background: rgba(255,255,255,.03) !important;
}
body[data-site-theme="dark"] .table-hover>tr:hover,
body[data-site-theme="dark"] .table-hover>tr:hover>td,
body[data-site-theme="dark"] .table-hover>tr:hover>th{
  background: rgba(255,255,255,.06) !important;
}

/* Borders without <tbody>/<tr> */
body[data-site-theme="dark"] .table-bordered>thead>td,
body[data-site-theme="dark"] .table-bordered>thead>th,
body[data-site-theme="dark"] .table-bordered>tr>td,
body[data-site-theme="dark"] .table-bordered>tr>th,
body[data-site-theme="dark"] .table-bordered>thead td,
body[data-site-theme="dark"] .table-bordered>thead th{
  border-color: var(--site-border) !important;
}

/* List-group items used inside rank tables */
body[data-site-theme="dark"] .list-group-item{
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
}
body[data-site-theme="dark"] .list-group-item:hover,
body[data-site-theme="dark"] .list-group-item:focus{
  background: rgba(255,255,255,.08) !important;
}

/* ------------------------------------------------------------------
   Code / Log blocks (prettyprint, pre, code) - ensure readability
   Many legacy pages set inline black text; force high contrast in dark.
-------------------------------------------------------------------*/
body[data-site-theme="dark"] pre,
body[data-site-theme="dark"] code,
body[data-site-theme="dark"] kbd,
body[data-site-theme="dark"] samp{
  color: var(--site-text) !important;
}

body[data-site-theme="dark"] pre.prettyprint,
body[data-site-theme="dark"] pre#log-box,
body[data-site-theme="dark"] pre.me-log,
body[data-site-theme="dark"] .prettyprint{
  background: #0b1220 !important;
  color: #e5e7eb !important;
  border: 1px solid #22304a !important;
  border-radius: 10px;
}

/* Some pages wrap code in <font> tags or inline spans */
body[data-site-theme="dark"] pre.prettyprint font,
body[data-site-theme="dark"] pre#log-box font{
  color: inherit !important;
}

/* Links inside code/log */
body[data-site-theme="dark"] pre.prettyprint a,
body[data-site-theme="dark"] pre#log-box a{
  color: #93c5fd !important;
}

/* Google Prettify token colors in dark mode */
body[data-site-theme="dark"] pre.prettyprint .pln{ color:#e5e7eb !important; }
body[data-site-theme="dark"] pre.prettyprint .com{ color:#94a3b8 !important; }
body[data-site-theme="dark"] pre.prettyprint .lit{ color:#fbbf24 !important; }
body[data-site-theme="dark"] pre.prettyprint .pun{ color:#e2e8f0 !important; }
body[data-site-theme="dark"] pre.prettyprint .opn{ color:#e2e8f0 !important; }
body[data-site-theme="dark"] pre.prettyprint .clo{ color:#e2e8f0 !important; }
body[data-site-theme="dark"] pre.prettyprint .fun{ color:#60a5fa !important; }
body[data-site-theme="dark"] pre.prettyprint .str{ color:#34d399 !important; }
body[data-site-theme="dark"] pre.prettyprint .kwd{ color:#93c5fd !important; }
body[data-site-theme="dark"] pre.prettyprint .typ{ color:#c4b5fd !important; }
body[data-site-theme="dark"] pre.prettyprint .tag{ color:#fca5a5 !important; }
body[data-site-theme="dark"] pre.prettyprint .atn{ color:#fcd34d !important; }
body[data-site-theme="dark"] pre.prettyprint .atv{ color:#34d399 !important; }
body[data-site-theme="dark"] pre.prettyprint .dec{ color:#fbbf24 !important; }
body[data-site-theme="dark"] pre.prettyprint .var{ color:#e5e7eb !important; }

/* Controls/toolbar on code pages (if present) */
body[data-site-theme="dark"] .controls,
body[data-site-theme="dark"] .me-log-toolbar,
body[data-site-theme="dark"] .me-code-toolbar{
  color: #e5e7eb !important;
}
body[data-site-theme="dark"] .controls button,
body[data-site-theme="dark"] .me-log-toolbar .me-btn,
body[data-site-theme="dark"] .me-code-toolbar .me-btn{
  background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border-color: #22304a !important;
}
body[data-site-theme="dark"] .controls button:hover,
body[data-site-theme="dark"] .me-log-toolbar .me-btn:hover,
body[data-site-theme="dark"] .me-code-toolbar .me-btn:hover{
  background: rgba(255,255,255,.12) !important;
}


/* Darkfull: Breadcrumb */
body[data-site-theme="dark"] .breadcrumb{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--site-text, #e5e7eb) !important;
}
body[data-site-theme="dark"] .breadcrumb > li,
body[data-site-theme="dark"] .breadcrumb > li.active{
  color: var(--site-text, #e5e7eb) !important;
}
body[data-site-theme="dark"] .breadcrumb a{
  color: var(--site-link, #93c5fd) !important;
  text-decoration: none;
}
body[data-site-theme="dark"] .breadcrumb a:hover{
  color: var(--site-link-hover, #bfdbfe) !important;
  text-decoration: underline;
}
body[data-site-theme="dark"] .breadcrumb > li + li:before{
  color: rgba(255,255,255,0.45) !important;
}

/* =========================
   CodeMirror selection visibility (dark mode)
   Marker: CMSEL01
   Fix: On some pages/addons (e.g. styleSelectedText), selection may render via
        span.CodeMirror-selectedtext and look like it "disappears" in dark mode.
   ========================= */
body[data-site-theme="dark"] .CodeMirror-selected,
body[data-site-theme="dark"] .CodeMirror-focused .CodeMirror-selected{
  background: rgba(122,162,255,.30) !important;
}
body[data-site-theme="dark"] span.CodeMirror-selectedtext{
  background: rgba(122,162,255,.32) !important;
  color: inherit !important;
}
/* Native selection (some CodeMirror builds rely on ::selection). */
body[data-site-theme="dark"] .CodeMirror ::selection{
  background: rgba(122,162,255,.38) !important;
}
body[data-site-theme="dark"] .CodeMirror ::-moz-selection{
  background: rgba(122,162,255,.38) !important;
}
/* Keep CodeMirror selection stable: don't force user-select:text on all internal layers.
   Allow selection on content only (lines/pre), keep gutters non-selectable. */
body[data-site-theme="dark"] .CodeMirror pre,
body[data-site-theme="dark"] .CodeMirror-line,
body[data-site-theme="dark"] .CodeMirror-line *,
body[data-site-theme="dark"] .CodeMirror-code,
body[data-site-theme="dark"] .CodeMirror-code *{
  -webkit-user-select: text;
  user-select: text;
}
body[data-site-theme="dark"] .CodeMirror-gutters,
body[data-site-theme="dark"] .CodeMirror-gutter{
  -webkit-user-select: none;
  user-select: none;
}

/* =========================
   CodeMirror selection visibility - stronger (system dark)
   Marker: CMSEL02
   Notes:
   - Some markText highlights (search/match) can visually "mask" selection, especially in dark mode.
   - Force a higher-contrast selection color under system dark, and degrade match-highlights to underline.
   ========================= */
body[data-site-theme="dark"] .CodeMirror .CodeMirror-selected,
body[data-site-theme="dark"] .CodeMirror-focused .CodeMirror-selected,
body[data-site-theme="dark"] .CodeMirror span.CodeMirror-selectedtext{
  background: rgba(59,130,246,.58) !important;
  mix-blend-mode: normal !important;
}
body[data-site-theme="dark"] .CodeMirror-focused .CodeMirror-selected,
body[data-site-theme="dark"] .CodeMirror-focused span.CodeMirror-selectedtext{
  background: rgba(59,130,246,.68) !important;
}

/* Match highlights when selecting a word (same-word glow) in system Dark.
   NOTE: Our JS already skips matches that overlap the current selection, so we can safely
   use a faint background fill here (it won't cover the selection layer).
   Also override inline/injected styles that force underline-only in body.editor-dark. */
body[data-site-theme="dark"] .CodeMirror .cm-selectionWordMatch,
body[data-site-theme="dark"] .CodeMirror .cm-selectionMatch,
body[data-site-theme="dark"] .CodeMirror .cm-matchhighlight,
body[data-site-theme="dark"] .CodeMirror span.cm-searching{
  background: rgba(0, 255, 180, .14) !important;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 255, 180, .52),
    0 0 14px rgba(0, 255, 180, .22) !important;
}

/* Stronger glow on focus for better visibility */
body[data-site-theme="dark"] .CodeMirror-focused .cm-selectionWordMatch,
body[data-site-theme="dark"] .CodeMirror-focused .cm-selectionMatch,
body[data-site-theme="dark"] .CodeMirror-focused .cm-matchhighlight,
body[data-site-theme="dark"] .CodeMirror-focused span.cm-searching{
  background: rgba(0, 255, 180, .20) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 180, .68),
    0 0 18px rgba(0, 255, 180, .28) !important;
}

/* Highest-specificity override when both system dark + editor-dark are present (most pages).
   This beats the injected style from submitdht.js: body.editor-dark .cm-selectionWordMatch{ background:transparent!important; ... } */
body[data-site-theme="dark"].editor-dark .CodeMirror .cm-selectionWordMatch,
body[data-site-theme="dark"].editor-dark .CodeMirror .cm-selectionMatch,
body[data-site-theme="dark"].editor-dark .CodeMirror .cm-matchhighlight,
body[data-site-theme="dark"].editor-dark .CodeMirror span.cm-searching{
  background: rgba(0, 255, 180, .18) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 180, .70),
    0 0 22px rgba(0, 255, 180, .30) !important;
}

/* In case the build uses native selection inside CodeMirror (contenteditable). */
body[data-site-theme="dark"] .CodeMirror ::selection{
  background: rgba(59,130,246,.55) !important;
  color: inherit !important;
}
body[data-site-theme="dark"] .CodeMirror ::-moz-selection{
  background: rgba(59,130,246,.55) !important;
  color: inherit !important;
}


/* =========================
   CodeMirror selection visibility - FIX ROOT CAUSE (system dark)
   Marker: CMSEL03
   Root cause:
   - In Dark mode we style all <pre> blocks with a dark background for readability.
   - CodeMirror renders each line as a <pre>. That global rule paints over the selection layer,
     making selection look like it "doesn't exist".
   Fix:
   - Neutralize <pre>/<code> styling *inside CodeMirror* so the selection layer remains visible.
   - Use a high-contrast selection color (green) and invert selected text when styleSelectedText is present.
   ========================= */
body[data-site-theme="dark"] .CodeMirror pre,
body[data-site-theme="dark"] .CodeMirror code,
body[data-site-theme="dark"] .CodeMirror kbd,
body[data-site-theme="dark"] .CodeMirror samp{
  background: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* High-contrast selection (green) */
body[data-site-theme="dark"] .CodeMirror .CodeMirror-selected,
body[data-site-theme="dark"] .CodeMirror-focused .CodeMirror-selected{
  background: rgba(0, 255, 140, .45) !important;
}
body[data-site-theme="dark"] .CodeMirror-focused .CodeMirror-selected{
  background: rgba(0, 255, 140, .60) !important;
}

/* If styleSelectedText addon is active, selected text is wrapped with this span. */
body[data-site-theme="dark"] .CodeMirror span.CodeMirror-selectedtext{
  background: rgba(0, 255, 140, .55) !important;
  color: #00110a !important;
}

/* Native selection fallback (some builds rely on ::selection). */
body[data-site-theme="dark"] .CodeMirror ::selection{
  background: rgba(0, 255, 140, .55) !important;
  color: #00110a !important;
}
body[data-site-theme="dark"] .CodeMirror ::-moz-selection{
  background: rgba(0, 255, 140, .55) !important;
  color: #00110a !important;
}