:root{
  --bg: #ffffff;
  --bg2: #f6f7fb;
  --text: #121826;
  --muted: #5b6475;
  --card: #ffffff;
  --border: rgba(18, 24, 38, 0.10);
  --shadow: 0 10px 25px rgba(18,24,38,.08);
  --brand: #2d6cdf;
  --brand2:#7c3aed;
}

html[data-theme="dark"]{
  --bg: #0b1020;
  --bg2:#0f1630;
  --text:#e8ecf7;
  --muted:#aab3c7;
  --card:#0f1733;
  --border: rgba(255,255,255,0.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --brand:#6ea8ff;
  --brand2:#a78bfa;
}

body{
  background: var(--bg);
  color: var(--text);
}

.text-muted{ color: var(--muted) !important; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--card); color: var(--text);
  padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; z-index:9999;
}
.skip-link:focus{ left:12px; top:12px; }

.navbar-gg{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .navbar-gg{
  background: rgba(11,16,32,.65);
}

.brand-mark{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
}

.btn-gg{
  border:0;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  padding: 10px 16px;
  border-radius: 12px;
}
.btn-gg:hover{ opacity:.95; color:#fff; }

.btn-gg-outline{
  border:1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
}
.btn-gg-outline:hover{ background: rgba(127,127,127,.10); }

.hero-gg{
  background: radial-gradient(1200px 500px at 20% 0%, rgba(45,108,223,.18), transparent 60%),
              radial-gradient(900px 420px at 90% 10%, rgba(124,58,237,.16), transparent 55%);
  border-bottom: 1px solid var(--border);
}

.text-grad{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-gg{
  display:inline-flex; align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(127,127,127,.08);
  font-size: .9rem;
}

.section-gg{ background: var(--bg); }
.section-gg-soft{ background: var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.card-gg{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.pill-gg{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(127,127,127,.10);
  font-size: .8rem;
}

.tool-row{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--border);
  background: rgba(127,127,127,.06);
  padding: 12px 14px;
  border-radius: 14px;
}
.tool-row i{ margin-top:2px; font-size: 18px; opacity:.9; }

.feature-gg{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
  box-shadow: var(--shadow);
}
.icon-gg{
  width:44px; height:44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(45,108,223,.14);
  border: 1px solid var(--border);
}

.footer-gg{
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.link-gg{ color: var(--muted); text-decoration:none; }
.link-gg:hover{ color: var(--text); text-decoration:underline; }


/* ===========================
   Dark-mode text/link fixes
   =========================== */

/* Ensure common text utilities follow theme variables */
html[data-theme="dark"] body,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-title {
  color: var(--text) !important;
}

/* Navbar links specifically */
html[data-theme="dark"] .navbar-gg .nav-link {
  color: var(--text) !important;
  opacity: 0.92;
}
html[data-theme="dark"] .navbar-gg .nav-link:hover,
html[data-theme="dark"] .navbar-gg .nav-link:focus {
  opacity: 1;
  text-decoration: none;
}

/* Brand text (logo text) */
html[data-theme="dark"] .navbar-gg .navbar-brand,
html[data-theme="dark"] .navbar-gg .navbar-brand span {
  color: var(--text) !important;
}

/* Make sure bootstrap text-muted doesn't become too dark */
html[data-theme="dark"] .text-muted {
  color: var(--muted) !important;
}

/* Optional: dropdown menu (future-proof) */
html[data-theme="dark"] .dropdown-menu {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .dropdown-item {
  color: var(--text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* Optional: navbar toggler icon visibility on dark */
html[data-theme="dark"] .navbar-toggler {
  border-color: var(--border);
}
html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

.border-gg{
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-text{
  color: var(--text) !important;
}
.form-control::placeholder{
  color: rgba(120,120,120,.9);
}
html[data-theme="dark"] .form-control::placeholder{
  color: rgba(200,200,200,.55);
}
.tool-filter.active{
  background: rgba(127,127,127,.14);
}

/* =========================
   Search input dark-mode fix
   ========================= */

/* Input + icon base */
.border-gg,
.border-gg:focus {
  border-color: var(--border) !important;
}

.input-group-text {
  color: var(--muted);
}

/* Placeholder colors */
.form-control::placeholder {
  color: rgba(120, 120, 120, 0.85);
}

html[data-theme="dark"] .form-control::placeholder {
  color: rgba(220, 225, 235, 0.55);
}

/* Dark mode input text */
html[data-theme="dark"] .form-control {
  color: var(--text) !important;
}

/* Search icon visibility */
html[data-theme="dark"] .input-group-text i {
  color: var(--muted) !important;
  opacity: 0.9;
}

/* Background consistency */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-text {
  background-color: transparent !important;
}

html[data-theme="dark"] .form-check-label { color: var(--text) !important; }
html[data-theme="dark"] .form-range { filter: brightness(1.1); }

html[data-theme="dark"] .form-check-label { color: var(--text) !important; }

html[data-theme="dark"] .form-check-label { color: var(--text) !important; }

html[data-theme="dark"] .accordion-button { color: var(--text) !important; }
html[data-theme="dark"] .accordion-body { color: var(--text) !important; }
html[data-theme="dark"] .accordion-item { background: transparent; }

html[data-theme="dark"] .accordion-button { color: var(--text) !important; }
html[data-theme="dark"] .accordion-body { color: var(--text) !important; }
html[data-theme="dark"] .accordion-item { background: transparent; }

/* =========================
   GeneGator Dark Mode: fix dropdown/select text
   Assumes your dark mode toggles via [data-theme="dark"] on <html> or <body>.
   If your selector differs (e.g. .dark-mode), replace it accordingly.
   ========================= */

[data-theme="dark"] select.form-select,
[data-theme="dark"] .form-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] input.form-control {
  background-color: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Options list (most browsers) */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
  background-color: var(--card);
  color: var(--text);
}

/* Placeholder-ish style for selects that use an empty option */
[data-theme="dark"] select option[value=""] {
  color: var(--muted);
}

/* Bootstrap dropdown menu (if you use .dropdown-menu anywhere) */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--card);
  border-color: var(--border);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255,255,255,0.08);
  color: var(--text);
}

[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--border);
}

/* Optional: remove bright native select glow in dark mode */
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-control:focus {
  border-color: var(--border);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,0.08);
}

/* Optional: fix disabled selects/inputs readability */
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control:disabled {
  opacity: 0.7;
  color: var(--muted);
}