:root {
  --bg: #f5f8ff;
  --card: #ffffff;
  --text: #1c2942;
  --muted: #5f6b85;
  --accent: #4263eb;
  --border: #e2e8f5;
  /* Result surface tokens for readable output blocks in both themes */
  --surface: #ffffff;
  --surface-2: #f6f7fb;
}
* { box-sizing: border-box; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
/* Width tuning: use more desktop real estate while keeping comfortable padding on smaller screens. */
.container { width: min(1360px, 100%); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 20px; } }
@media (min-width: 1280px) { .container { width: min(1400px, 100%); padding: 0 24px; } }
.site-header { position: sticky; top: 0; background: var(--card); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); z-index: 10; width: 100%; }
.site-header, main, footer { width: 100%; max-width: 100%; }
.nav-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.main-nav { display: flex; gap: .8rem; flex-wrap: wrap; }
.main-nav a { text-decoration: none; color: var(--muted); font-weight: 600; }
.main-nav a.active { color: var(--accent); }
.hero { padding: 2rem 0 1.2rem; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.hero p { margin: 0; color: var(--muted); }
.grid { display: grid; gap: 1rem; }
.categories-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1rem; }
.tools-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.two-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; text-decoration: none; color: inherit; box-shadow: 0 8px 24px rgba(32, 56, 117, 0.06); }
.tool-card p, .category-card p { color: var(--muted); }
.search-bar { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-top: .8rem; }
.search-bar input, .search-bar select, .search-bar button, .tool-workspace input, .tool-workspace select, .tool-workspace textarea, .tool-workspace button, .contact-form input, .contact-form textarea, .contact-form button {
  width: 100%; margin-top: .35rem; padding: .65rem; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); font: inherit;
}
.search-bar button, .tool-workspace button, .btn-link, #shareBtn, #bookmarkBtn, .contact-form button { background: var(--accent); color: #fff; border: none; cursor: pointer; text-decoration: none; display: inline-block; }
.tool-filter-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: .4rem .8rem; cursor: pointer; }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); padding: 1.2rem 0; color: var(--muted); font-size: .95rem; }
.footer-wrap { display: flex; justify-content: space-between; gap: .8rem; align-items: center; flex-wrap: wrap; }
.footer-links { display: flex; gap: .8rem; }
.footer-links a { color: var(--muted); text-decoration: none; }
.social-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem auto 1rem; }
.social-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.content-with-sidebar { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.tool-layout { display: grid; gap: 1rem; }
.cta-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ad-slot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #edf2ff; }
.ad-slot img { width: 100%; height: 120px; object-fit: cover; display: block; }
.ad-side img { height: 320px; }
.output { margin-top: .7rem; padding: .7rem; border-radius: 10px; font-weight: 600; white-space: pre-wrap; word-break: break-word; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.contact-form { display: grid; gap: .7rem; }

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.55); z-index: 1000; padding: 12px; }
.modal.show { display: flex; }
.modal-card, .modal-content, .popup-content {
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.modal-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: inherit; z-index: 1; }
#closeModalBtn { border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; padding: .55rem .7rem; min-height: 44px; min-width: 44px; }
#modalResultBody {
  margin: 0;
  padding: 1rem;
  max-height: calc(100vh - 110px);
  overflow: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}


@media (min-width: 920px) {
  .tool-layout { grid-template-columns: 1fr; }
  .content-with-sidebar { grid-template-columns: 3fr 1.2fr; align-items: start; }
  .search-bar { grid-template-columns: 1.5fr 1fr auto; }
}

.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; background: #111827; color: #f9fafb; border-radius: 12px; padding: .9rem; z-index: 1100; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.cookie-banner a { color: #93c5fd; }
.cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.cookie-actions button { border: none; border-radius: 8px; padding: .55rem .8rem; cursor: pointer; font-weight: 600; }
#cookieAccept { background: #2563eb; color: #fff; }
#cookieReject, .btn-secondary { background: #374151; color: #fff; }

.muted { color: var(--muted); }
.faq-list { display: grid; gap: .8rem; }
.faq-list h3 { margin-bottom: .25rem; }

@media (max-width: 919px) {
  .cta-row button, .cta-row .btn-link, .search-bar button, #globalBackToTop { width: 100%; text-align: center; }
  .tool-layout { grid-template-columns: 1fr; }
}

.tool-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
#searchSuggest{position:absolute;top:105%;left:0;right:0;z-index:40;padding:.3rem;display:grid;gap:.2rem}
#searchSuggest a{display:block;padding:.45rem .6rem;border-radius:8px;text-decoration:none;color:var(--text)}
#searchSuggest a.active,#searchSuggest a:hover{background:#eef2ff}
.mobile-menu a{display:block;padding:.45rem .2rem;color:var(--text);text-decoration:none}
.site-header{position:sticky;top:0;z-index:20}
.card{box-shadow:var(--shadow)}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;background:#eef2ff;color:#2f4fcf;font-size:.75rem;margin-bottom:.3rem}
.btn-link:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9db4ff;outline-offset:2px}


/* Root-cause fix: previous mixed page grid + sidebar sizing caused content drift/empty middle columns on some widths.
   This unified tool grid uses minmax(0,1fr) + min-width:0 to prevent overflow pushing content right. */
.tool-page { padding-bottom: 1rem; }
.breadcrumbs { margin-top: 1rem; }
.tool-hero { display: grid; gap: 1rem; margin-bottom: 1rem; }
.tool-hero h1 { font-size: clamp(24px, 3vw, 40px); margin: 0 0 .35rem; }
.tool-subtitle { margin: 0; color: var(--muted); line-height: 1.6; font-size: 1rem; }
.tool-meta { margin-top: .45rem; }
.tool-grid { display: grid; gap: 16px; }
.tool-main, .tool-aside { min-width: 0; }
.tool-card--primary { margin-bottom: 0; }
.tool-sections .tool-tab-section { margin-top: .9rem; }
.tool-tabs { overflow-x: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
.tool-tabs .chip { flex: 0 0 auto; }
.tool-aside { display: grid; gap: 12px; }
.aside-card { margin: 0; }
img, video, iframe { max-width: 100%; height: auto; }
pre, code { overflow: auto; }

@media (min-width: 1024px) {
  .tool-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .tool-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .tool-aside { position: sticky; top: 88px; }
}
@media (min-width: 1440px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1023px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-aside { position: static; }
}
@media (max-width: 768px) {
  .tool-hero__actions .btn-link, .tool-hero__actions button, .cta-row .btn-link, .cta-row button { width: 100%; }
}

html[data-theme="dark"] {
  --surface: #111827;
  --surface-2: #1f2937;
  --text: #f9fafb;
  --border: #374151;
}


/* Dark-theme readability + mobile popup overflow fixes */
.result,
.output,
.tool-result,
textarea,
pre,
.modal-content,
.modal-card,
.popup-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

html[data-theme="dark"] .result,
html[data-theme="dark"] .output,
html[data-theme="dark"] .tool-result,
html[data-theme="dark"] textarea,
html[data-theme="dark"] pre,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .popup-content {
  background: var(--surface-2);
  color: var(--text);
}

.modal-content *, .modal-card * {
  max-width: 100%;
}

.modal-content pre,
.modal-content textarea,
.modal-card pre,
.modal-card textarea {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre, code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

img, iframe, video {
  max-width: 100%;
  height: auto;
}

textarea, input, pre {
  max-width: 100%;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}


/* Category intro collapse: keep full content in DOM for SEO; start with short preview for UX. */
.category-intro { display: grid; gap: .75rem; }
.category-intro-preview { margin: 0; color: var(--muted); }
.category-intro-full[hidden] { display: none; }
.intro-toggle { width: fit-content; }


.status {
  margin-top: .7rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 600;
}
.status.info { background: #eef2ff; color: #1e3a8a; }
.status.success { background: #ecfdf3; color: #166534; border-color: #86efac; }
.status.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.output-panel { margin-top: .8rem; }
.output-panel h3 { margin: 0 0 .45rem; }
#toolOutput {
  margin: 0;
  padding: .8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  max-height: 360px;
  overflow: auto;
}
html[data-theme="dark"] .status.info { background: #1e293b; color: #cbd5e1; border-color: #334155; }
html[data-theme="dark"] .status.success { background: #052e16; color: #bbf7d0; border-color: #166534; }
html[data-theme="dark"] .status.error { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }


/* Dark-theme nav visibility fixes */
html[data-theme="dark"] .brand { color: #eaf0ff; }
html[data-theme="dark"] .main-nav a { color: #c7d3ff; }
html[data-theme="dark"] .main-nav a.active { color: #9db4ff; }
html[data-theme="dark"] #headerSearch,
html[data-theme="dark"] #mobileMenu input {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}
html[data-theme="dark"] .btn-link { color: #dbeafe; }

img, video, canvas, svg { max-width: 100%; height: auto; }

.site-header .mobile-menu{width:100%;max-width:100%;left:0;right:0;margin:0;box-sizing:border-box;}


/* ===== Minimal Safe UI Animations for GeniusToolsHub ===== */

/* 1) Smooth hover lift for cards */
.card, .tool-card, .category-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card:hover, .tool-card:hover, .category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* 2) Button press feedback */
button, .btn {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
button:hover, .btn:hover {
  transform: translateY(-1px);
}
button:active, .btn:active {
  transform: scale(0.97);
}

/* 3) Smooth modal opening (supports existing .show and optional .open states) */
.modal, .popup {
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 0;
  transform: scale(0.98);
}
.modal.show, .modal.open, .popup.show, .popup.open {
  opacity: 1;
  transform: scale(1);
}

/* 4) Toast / status fade */
.toast, .status-message {
  transition: opacity 150ms ease, transform 150ms ease;
  opacity: 0;
  transform: translateY(6px);
}
.toast.show, .status-message.show {
  opacity: 1;
  transform: translateY(0);
}

/* 5) Respect accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.future-baby { display: grid; gap: 1rem; }
.future-baby-hero {
  background: linear-gradient(145deg, #eef2ff 0%, #f8f4ff 100%);
  border-radius: 20px;
}
html[data-theme="dark"] .future-baby-hero {
  background: linear-gradient(145deg, #1d2446 0%, #2a1f49 100%);
}
.future-baby-badge {
  display: inline-flex;
  margin: 0 0 .5rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(66, 99, 235, .12);
  color: var(--accent);
  font-weight: 600;
  font-size: .82rem;
}
.future-baby-disclaimer { color: var(--muted); font-size: .95rem; }
.future-baby-scroll { text-decoration: none; font-weight: 600; color: var(--accent); }

.future-upload-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .future-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.future-upload-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .85rem;
  background: var(--card);
}
.future-upload-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.future-upload-head h4 { margin: 0; }
.future-upload-head .tag {
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3345ad;
}
html[data-theme="dark"] .future-upload-head .tag {
  background: #1f2a56;
  color: #c7d2fe;
}
.future-dropzone {
  margin-top: .65rem;
  border: 1.5px dashed #a8b4ec;
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  gap: .35rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: rgba(236, 242, 255, .45);
}
.future-dropzone.dragover,
.future-dropzone:hover { border-color: var(--accent); background: rgba(66, 99, 235, .08); }
.future-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.future-dropzone span { font-weight: 600; }
.future-dropzone small { color: var(--muted); }
.future-helper { margin: .6rem 0 .2rem; color: var(--muted); font-size: .9rem; }

.future-preview-wrap { margin-top: .65rem; display: grid; gap: .5rem; }
.future-preview-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.future-preview-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.future-preview-actions button { flex: 1 1 120px; }

.future-validation { margin: .3rem 0 0; font-size: .92rem; color: var(--muted); }
.future-validation.checking { color: #1d4ed8; }
.future-validation.success { color: #15803d; }
.future-validation.error { color: #b91c1c; }

.future-generate, .future-result, .future-trust { border-radius: 18px; }
.future-generate h4, .future-trust h4 { margin-top: 0; }
.future-result img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: .35rem;
}
.future-result-label {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #eefcf1;
  color: #166534;
  font-size: .78rem;
  font-weight: 600;
}
html[data-theme="dark"] .future-result-label {
  background: #0f2d1a;
  color: #bbf7d0;
}
.future-trust ul { margin: .5rem 0 0 1rem; padding: 0; display: grid; gap: .45rem; }

.future-tips { padding-top: .85rem; padding-bottom: .85rem; }
.future-tips summary { cursor: pointer; font-weight: 700; }
.future-tips ul { margin: .7rem 0 0 1rem; padding: 0; display: grid; gap: .35rem; color: var(--muted); }

.future-upload-actions { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.future-upload-actions button { flex: 1 1 140px; }

.future-upload-actions button:first-child {
  box-shadow: 0 8px 18px rgba(72, 96, 214, 0.18);
}

.future-generate {
  border: 2px solid rgba(66, 99, 235, 0.35);
  background: linear-gradient(160deg, rgba(66, 99, 235, 0.08), rgba(124, 140, 255, 0.12));
  box-shadow: 0 16px 30px rgba(45, 69, 168, 0.15);
}
.future-generate h4 { font-size: 1.2rem; }
.future-generate-ready { margin: .2rem 0 .75rem; font-weight: 600; }
#generateFutureBaby {
  font-size: 1.05rem;
  font-weight: 700;
  min-height: 50px;
  border-radius: 12px;
}
#generateFutureBaby:disabled { opacity: .65; cursor: not-allowed; }

.future-validation.warning { color: #9a3412; }
html[data-theme="dark"] .future-validation.warning { color: #fdba74; }

.future-result h4 { margin: .1rem 0 .2rem; font-size: 1.28rem; }
.future-result-subtext { margin: 0 0 .55rem; color: var(--muted); font-weight: 600; }
.future-funny-line {
  margin: .35rem 0 .2rem;
  color: #4554a8;
  font-weight: 700;
}
html[data-theme="dark"] .future-funny-line {
  color: #b6c3ff;
}

@media (max-width: 768px) {
  .future-generate { position: sticky; bottom: 8px; z-index: 2; }
}


.future-result {
  background: linear-gradient(160deg, rgba(255, 227, 246, 0.45), rgba(223, 234, 255, 0.55));
  border: 1px solid rgba(151, 173, 255, 0.45);
  box-shadow: 0 18px 34px rgba(88, 106, 202, 0.18);
}
html[data-theme="dark"] .future-result {
  background: linear-gradient(160deg, rgba(65, 46, 93, 0.45), rgba(33, 47, 96, 0.55));
  border-color: rgba(143, 157, 232, 0.5);
}
.future-result .cta-row { margin-top: .7rem; }