/* Shared contrast + theme fixes. Loaded after page styles so !important wins. */
html, body, button, input, select, textarea {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Light mode only. Dark cards use the rule below, or gray-600 on navy fails. */
html:not([data-theme="dark"]) .card-foot span,
html:not([data-theme="dark"]) .card-foot .open {
  color: #4b5563 !important;
}
[data-theme="dark"] .card-foot span,
[data-theme="dark"] .card-foot .open {
  color: #94a3b8 !important;
}
.hero-search span {
  color: #4b5563 !important;
}
.post .meta,
.meta {
  color: #4b5563 !important;
}
html:not([data-theme="dark"]) .breadcrumb a {
  color: #1d4ed8 !important;
}
a[style*="color:#3b82f6"],
.tool-body a[style*="color:#3b82f6"] {
  color: #1d4ed8 !important;
}
.auth-tab {
  color: #374151 !important;
}
.auth-tab.active {
  color: #111827 !important;
}
/* Copyright sat at #6b7280 on #111827 (3.67:1). */
footer .copy,
footer .copy span {
  color: #d1d5db !important;
}
footer a {
  color: #d1d5db;
}
footer a:hover {
  color: #ffffff;
}

/* Dark mode: inline near-black text on surfaces the theme already darkened. */
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color:#374151"] {
  color: #f8fafc !important;
}
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color:#475569"] {
  color: #cbd5e1 !important;
}
/* Anchors only. Light chips (indigo / slate pills) keep their own text color. */
[data-theme="dark"] a[style*="color:#334155"] {
  color: #cbd5e1 !important;
}
[data-theme="dark"] a[style*="color:#4f46e5"] {
  color: #a5b4fc !important;
}
[data-theme="dark"] button[onclick="signOut()"] {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
/* Color emoji do not inherit CSS color. Light chip beats the page rule that paints .icon on #1e293b. */
[data-theme="dark"] .icon,
[data-theme="dark"] .card .icon,
[data-theme="dark"] .tool-head .icon,
[data-theme="dark"] .icon-blue,
[data-theme="dark"] .icon-green,
[data-theme="dark"] .icon-amber,
[data-theme="dark"] .icon-violet,
[data-theme="dark"] .card .icon-amber,
[data-theme="dark"] .card .icon-blue,
[data-theme="dark"] .card .icon-green,
[data-theme="dark"] .card .icon-violet {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  filter: none !important;
}
[data-theme="dark"] .badge-new {
  background: #064e3b !important;
  color: #bbf7d0 !important;
  border-color: #065f46 !important;
}
[data-theme="dark"] .quick,
[data-theme="dark"] .quick span,
[data-theme="dark"] .kpi b,
[data-theme="dark"] .tool-hero p,
[data-theme="dark"] .brand small,
[data-theme="dark"] .section-head p {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .auth-field label,
[data-theme="dark"] .field label,
[data-theme="dark"] form label {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] a[style*="color:#3b82f6"],
[data-theme="dark"] .tool-body a[style*="color:#3b82f6"] {
  color: #93c5fd !important;
}
[data-theme="dark"] .auth-tab {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .auth-tab.active {
  color: #f8fafc !important;
}
[data-theme="dark"] footer,
[data-theme="dark"] footer .copy,
[data-theme="dark"] footer .copy span,
[data-theme="dark"] footer a {
  color: #d1d5db !important;
}
[data-theme="dark"] footer a:hover {
  color: #ffffff !important;
}
/* Cookie banner stays a light card in dark mode. Do not lighten its dark text. */
[data-theme="dark"] #cookieBanner [style*="color:#111827"],
[data-theme="dark"] #cookieBanner button[style*="color:#111827"] {
  color: #111827 !important;
}

/* Light chips and inline light surfaces become dark panels. Cookie accept button stays light. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#fcfcfd"] {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] #cookieBanner [style*="background:#f8fafc"],
[data-theme="dark"] #cookieBanner [style*="background:white"],
[data-theme="dark"] #cookieBanner [style*="background:#ffffff"] {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}
[data-theme="dark"] .card {
  background: #11162f;
  color: #f8fafc;
  border-color: #1e293b;
}

/* Fixed banner with left+right was widening the page by a few pixels. */
#cookieBanner {
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: min(480px, calc(100vw - 16px)) !important;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .stats-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 8px 10px !important;
    max-width: 100%;
    white-space: normal;
    border-radius: 16px !important;
  }
  .stats {
    grid-template-columns: 1fr !important;
  }
  .tool-head {
    flex-wrap: wrap;
  }
  .tool-head h2 {
    min-width: 0;
    flex-wrap: wrap;
  }
  article#guide,
  #guide {
    overflow-wrap: anywhere;
  }
}