/* Quikbench dark mode — loads after site.css so these overrides win.
   Built from the CSS custom properties referenced across the site.
   If any color looks off against the real site.css palette, the values
   below are the ones to adjust — they were reverse-engineered from a
   fallback :root block, not read from the live stylesheet directly. */

html[data-theme="dark"]{
  --ink:#E8E9EC; --steel-dark:#E8E9EC; --steel:#9AA0AB; --ink-soft:#9AA0AB;
  --text:#E8E9EC; --muted:#9AA0AB;
  --paper:#12151B; --bench:#171A21; --bg:#12151B;
  --card:#171A21; --panel:#171A21; --panel2:#1D2129;
  --amber:#d98a4a; --amber-dark:#c8722f; --accent:#d98a4a; --accent2:#c8722f;
  --good:#3ecf8e; --green:#3ecf8e;
  --warn:#e0a030; --yellow:#e0a030;
  --bad:#ff6b6b; --red:#ff6b6b;
  --line:#2a2e38; --border:#2a2e38;
  --brand-tint:#1D2129;
}

html[data-theme="dark"] body{ background:var(--paper,#12151B); color:var(--ink,#E8E9EC); }

html[data-theme="dark"] img:not(.mark):not([src*="social-preview"]){
  filter: brightness(0.92) contrast(1.02);
}

/* Components that site.css likely styles with hardcoded colors rather
   than CSS variables (confirmed for .tool-card on the homepage, where
   text correctly went light via var(--ink) but the background stayed
   hardcoded white). Forcing these explicitly since variable overrides
   alone don't reach them. */
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .faq-card,
html[data-theme="dark"] .comparison-card,
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .app-promo,
html[data-theme="dark"] .benchmark-card,
html[data-theme="dark"] .class-card,
html[data-theme="dark"] .compare-col,
html[data-theme="dark"] .controls-card,
html[data-theme="dark"] .disclaimer,
html[data-theme="dark"] .editor-shell,
html[data-theme="dark"] .file-row,
html[data-theme="dark"] .info-art figure,
html[data-theme="dark"] .milestone,
html[data-theme="dark"] .note-box,
html[data-theme="dark"] .output-card,
html[data-theme="dark"] .overall,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .page-thumb,
html[data-theme="dark"] .pptx-nav-btn,
html[data-theme="dark"] .preview-modal-body pre,
html[data-theme="dark"] .queue-row,
html[data-theme="dark"] .range-card,
html[data-theme="dark"] .redline-card,
html[data-theme="dark"] .result-rating,
html[data-theme="dark"] .result-stats .stat,
html[data-theme="dark"] .resultRow,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .scan-tool-box,
html[data-theme="dark"] .suggest-chip,
html[data-theme="dark"] .input-area{
  background: var(--card,#171A21) !important;
  border-color: var(--line,#2a2e38) !important;
}
html[data-theme="dark"] .adet-tier-count,
html[data-theme="dark"] #lang-suggestions,
html[data-theme="dark"] #output-url,
html[data-theme="dark"] .amount-edit,
html[data-theme="dark"] .field input[type=number],
html[data-theme="dark"] .field select,
html[data-theme="dark"] .fnr-row input,
html[data-theme="dark"] .threshold-row input[type=number],
html[data-theme="dark"] textarea#result-text{
  background: var(--card,#171A21) !important;
  border-color: var(--line,#2a2e38) !important;
  color: var(--ink,#E8E9EC) !important;
}
/* .share-btn has no local CSS rule on many pages (styled entirely by
   the external site.css), so it can't be caught by scanning for
   hardcoded backgrounds in local <style> blocks — force it explicitly. */
html[data-theme="dark"] .share-btn{
  background: var(--card,#171A21) !important;
  border-color: var(--line,#2a2e38) !important;
  color: var(--ink,#E8E9EC) !important;
}
html[data-theme="dark"] .cta-band{
  background: #0c0e12 !important;
}
/* Links inside .related-grid are styled entirely by the external
   site.css with no local rule to override via variables — force a
   safe, readable hover state regardless of what that stylesheet does. */
html[data-theme="dark"] .related-grid a:hover{
  background: var(--card,#171A21) !important;
  color: var(--ink,#E8E9EC) !important;
}
html[data-theme="dark"] .tool-card h3, html[data-theme="dark"] .tool-card h2,
html[data-theme="dark"] .guide-card h3, html[data-theme="dark"] .guide-card h2{
  color: var(--ink,#E8E9EC) !important;
}
html[data-theme="dark"] .tool-card p, html[data-theme="dark"] .guide-card p{
  color: var(--steel,#9AA0AB) !important;
}
/* Category filter pills — base uses a hardcoded #fff background, and the
   active state reuses --ink as a background color, which breaks once
   --ink is remapped to a light text color for dark mode. */
html[data-theme="dark"] .pill{
  background: var(--card,#171A21) !important;
  border-color: var(--line,#2a2e38) !important;
  color: var(--steel,#9AA0AB) !important;
}
html[data-theme="dark"] .pill.active{
  background: #fff !important;
  color: #151A21 !important;
  border-color: #fff !important;
}
/* Any element still carrying a literal white/near-white inline background */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: white"]{
  background: var(--card,#171A21) !important;
}

/* Theme toggle button */
.theme-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line,#E7E9ED); background:transparent;
  cursor:pointer; color:var(--ink,#151A21); margin:0 6px;
  transition:background 0.15s, border-color 0.15s;
}
.theme-toggle-btn:hover{ background:var(--bench,#F6F7F9); }
.theme-toggle-btn svg{ width:18px; height:18px; display:block; flex-shrink:0; }
.theme-toggle-btn .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon{ display:block; }
.theme-toggle-btn .toggle-label{ display:none !important; }

/* Two toggle instances: one inline in the desktop nav (unchanged
   position, between About and Browse tools), one placed directly in
   the header before the hamburger icon for mobile — so dark mode is
   reachable without opening the menu, and matches the icon-only style
   used on desktop instead of a text row inside the dropdown. */
.theme-toggle-mobile-only{ display:none; }

@media (max-width:860px){
  .theme-toggle-mobile-only{ display:inline-flex !important; margin:0 4px 0 auto; }
  .theme-toggle-desktop-only{ display:none !important; }
}