/* Shared look for every tool page (loaded after tools.css). Styling only. */
:root {
  --ink: #1b3a2f;
  --ink2: #2e5c4c;
  --mint: #d8e9df;
  --mint2: #edf6f3;
  --accent: #00b88c;
  --line: #dfe6e2;
}

body {
  background: #f6f8f7 !important;
  color: #14231d;
}

/* Page title becomes a branded banner */
main > div.text-center:first-child {
  background: var(--ink);
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 20px !important;
  background-image: radial-gradient(circle at 85% 0%, rgba(0, 184, 140, 0.22), transparent 55%);
}
main > div.text-center:first-child h1 {
  font-family: "Source Serif 4", Georgia, serif;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px;
}
main > div.text-center:first-child p {
  color: #c3d6cc !important;
  font-size: 15.5px !important;
}

/* Tabs become a pill switcher */
#tab-nav {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 4px !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  margin: 0 !important;
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
#tab-nav::-webkit-scrollbar { display: none; }
#tab-nav ~ *, #tab-nav { position: relative; }
#tab-nav .tab-btn {
  border: none !important;
  border-radius: 999px;
  padding: 8px 16px !important;
  color: #46544e !important;
  font-weight: 600 !important;
  transition: background 0.15s, color 0.15s;
}
#tab-nav .tab-btn:hover { background: var(--mint2); color: var(--ink) !important; }
#tab-nav .tab-btn.active { background: var(--ink); color: #fff !important; }
div:has(> #tab-nav) { border-bottom: none !important; }

/* Main tool panels */
.tab-content > .bg-white,
main > .bg-white,
main .bg-white.rounded-xl.shadow-md {
  border: 1px solid var(--line);
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(20, 35, 29, 0.04) !important;
}
.tab-content h3 { font-family: "Source Serif 4", Georgia, serif; letter-spacing: -0.2px; }

/* Form fields: visible, comfortable boxes */
main input[type="number"],
main input[type="text"],
main input[type="date"],
main input:not([type]),
main select,
main textarea {
  border: 1px solid #cfd9d4 !important;
  border-radius: 8px !important;
  background: #fbfcfc !important;
  padding: 9px 12px !important;
  font-size: 15px !important;
  color: #14231d;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}
main input:hover, main select:hover, main textarea:hover { border-color: #a9bdb3 !important; }
main input:focus, main select:focus, main textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 140, 0.18) !important;
}
main label { color: #3c4a44 !important; font-weight: 600 !important; font-size: 13px !important; }
main input[type="range"] { accent-color: var(--ink); padding: 0 !important; border: none !important; background: transparent !important; }
main input[type="checkbox"], main input[type="radio"] { width: auto; accent-color: var(--ink); }

/* Results */
.result-item:hover { background: var(--mint2) !important; }
.result-item span:last-child, .result-item strong { font-variant-numeric: tabular-nums; }

/* Buttons inside tools */
main button.bg-\[\#1b3a2f\], main button[class*="bg-green"] {
  border-radius: 8px !important;
}

/* About + FAQ block under each tool */
#seo-faq {
  max-width: 860px !important;
  margin: 0 auto;
  padding: 48px 20px 64px !important;
  box-sizing: border-box;
  width: 100%;
}
#seo-faq h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #14231d !important;
  letter-spacing: -0.3px;
  margin-bottom: 12px !important;
}
#seo-faq > p {
  color: #46544e !important;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 36px !important;
}
#seo-faq > div:not(.mt-12) {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 22px;
}
#seo-faq details { border-bottom: 1px solid #edf1ef !important; padding: 0 !important; }
#seo-faq details:last-child { border-bottom: none !important; }
#seo-faq summary { padding: 16px 0; list-style: none; gap: 16px; }
#seo-faq summary::-webkit-details-marker { display: none; }
#seo-faq summary h3 { font-size: 15px !important; font-weight: 600; margin: 0; color: #14231d; }
#seo-faq summary span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mint2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px !important;
  flex-shrink: 0;
  margin-left: 0 !important;
}
#seo-faq details[open] summary span { transform: rotate(45deg); }
#seo-faq details p { margin: 0 0 16px !important; color: #5c6b64 !important; font-size: 14.5px; line-height: 1.6; }
#seo-faq a { color: var(--ink); font-weight: 600; }
#seo-faq .mt-12 { margin-top: 48px !important; }
#seo-faq .mt-12 h2 { font-size: 20px !important; }
#seo-faq .mt-12 .grid > a {
  position: relative;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 16px 40px 16px 16px !important;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
#seo-faq .mt-12 .grid > a::after { content: "92"; position: absolute; right: 16px; top: 16px; color: #9aa8a2; }
#seo-faq .mt-12 .grid > a:hover { border-color: var(--ink) !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,35,29,.08) !important; }

@media (max-width: 640px) {
  main > div.text-center:first-child { padding: 24px 18px; border-radius: 14px; }
  #tab-nav { width: 100%; }
}