/* Accessibility + localization controls, added 2026-09-29 */
:root{--ui-bg:#f7faff;--ui-card:#fff;--ui-text:#172344;--ui-muted:#5d708c;--ui-border:#dbe5f0;--ui-accent:#18a995;--ui-accent-2:#4f6fe8;--ui-hero:#eef8ff;--ui-hero2:#f7fffc;}
html[data-theme="light"] body{background:linear-gradient(180deg,#f7fbff 0,#f8fbff 42%,#fff 100%);color:var(--ui-text)}
html[data-theme="light"] .topbar,html[data-theme="light"] .tool-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--ui-border);box-shadow:0 5px 18px rgba(29,55,90,.05)}
html[data-theme="light"] .intro{background:linear-gradient(120deg,var(--ui-hero),var(--ui-hero2));color:#122244}
html[data-theme="light"] .intro:after{border-color:#18a99533;box-shadow:0 0 0 80px #18a99508,0 0 0 160px #4f6fe806}
html[data-theme="light"] .intro p:last-child{color:#536985}
html[data-theme="light"] .eyebrow{color:#0b8b79}
html[data-theme="light"] .nav a,html[data-theme="light"] .tool-header a{color:#304866}
html[data-theme="light"] .nav a:hover,html[data-theme="light"] .tool-header a:hover{color:#0d7668}
html[data-theme="light"] .mobile-nav summary{color:#304866}
html[data-theme="light"] .mobile-nav[open]{background:white}
html[data-theme="light"] .panel,html[data-theme="light"] .tool-panel,html[data-theme="light"] .step,html[data-theme="light"] .guide-card,html[data-theme="light"] .hosting-info{box-shadow:0 14px 38px rgba(31,62,99,.08)}
.site-controls{display:flex;align-items:center;gap:9px;margin-left:auto;padding-left:12px}
.site-control{height:38px;border:1px solid #d7e2ee;border-radius:10px;background:#fff;color:#253b59;padding:0 11px;font:600 .82rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 4px 12px rgba(31,62,99,.06)}
.site-control:hover{border-color:#88b9c8;background:#f8fcff}.site-control:focus-visible{outline:3px solid #90d9cf;outline-offset:2px}
select.site-control{padding-right:30px;max-width:132px}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
html[data-theme="dark"]{color-scheme:dark;--ui-card:#17223d;--ui-text:#edf4ff;--ui-muted:#aab9cd;--ui-border:#344663}
html[data-theme="dark"] body{background:#0e1628;color:#edf4ff}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .tool-header{background:#101a31;border-bottom:1px solid #273a5a}
html[data-theme="dark"] .intro{background:linear-gradient(120deg,#14213d,#102737);color:#fff}
html[data-theme="dark"] .intro p:last-child{color:#bdcae0}
html[data-theme="dark"] .panel,html[data-theme="dark"] .tool-panel,html[data-theme="dark"] .step,html[data-theme="dark"] .guide-card,html[data-theme="dark"] .hosting-info,html[data-theme="dark"] .tool-faq details{background:#17223d;border-color:#2d4160;color:#edf4ff}
html[data-theme="dark"] .panel h2,html[data-theme="dark"] .tool-page h1,html[data-theme="dark"] .tool-page h2,html[data-theme="dark"] .section-title,html[data-theme="dark"] .step h3,html[data-theme="dark"] .guide-card h3,html[data-theme="dark"] .seo-guide h3,html[data-theme="dark"] .tool-faq summary,html[data-theme="dark"] .detail-age strong{color:#edf4ff}
html[data-theme="dark"] .section-lead,html[data-theme="dark"] .tool-intro,html[data-theme="dark"] .tool-muted,html[data-theme="dark"] .step p,html[data-theme="dark"] .guide-card p,html[data-theme="dark"] .seo-guide>p,html[data-theme="dark"] .tool-faq p,html[data-theme="dark"] .hint,html[data-theme="dark"] .privacy{color:#aab9cd}
html[data-theme="dark"] .field input,html[data-theme="dark"] .tool-field input{background:#101a31;border-color:#385071;color:#eef5ff;color-scheme:dark}
html[data-theme="dark"] .metric,html[data-theme="dark"] .result-metric,html[data-theme="dark"] .formula-box{background:#101a31;color:#eef5ff}
html[data-theme="dark"] .metric b,html[data-theme="dark"] .result-metric b,html[data-theme="dark"] .big-age{color:#f3f8ff}
html[data-theme="dark"] .site-control{background:#17223d;border-color:#3a4c69;color:#eef5ff}
html[data-theme="dark"] a{color:#83b7ff}
html[data-theme="dark"] .footer,html[data-theme="dark"] .tool-footer{border-color:#2e405c;color:#aab9cd}
.language-note{position:fixed;right:18px;bottom:18px;z-index:9999;max-width:310px;background:#fff;color:#243954;border:1px solid #d9e5ef;border-radius:12px;padding:12px 14px;box-shadow:0 14px 40px rgba(22,47,78,.17);font:500 .82rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;display:none}
.language-note.show{display:block}.language-note b{color:#0a7f70}
@media(max-width:920px){.primary-links{display:none!important}.site-controls{padding-left:0}.nav{gap:10px}.brand{min-width:0}.brand-logo{max-width:180px!important}}
@media(max-width:600px){.site-controls{gap:6px}.site-control{height:36px;padding:0 8px;font-size:.76rem}select.site-control{max-width:103px}.theme-toggle .theme-word{display:none}.language-note{left:12px;right:12px;bottom:12px;max-width:none}}


/* 2026-09-29 user-requested UI tweaks */
.site-controls{display:flex;align-items:center;gap:9px;margin-left:auto;padding-left:12px}
.site-control{height:38px;border:1px solid #d7e2ee;border-radius:10px;background:#fff;color:#253b59;padding:0 12px;font:600 .82rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 4px 12px rgba(31,62,99,.06)}
.site-control:hover{border-color:#88b9c8;background:#f8fcff}
.site-control:focus-visible{outline:3px solid #90d9cf;outline-offset:2px}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.language-note,.language-select{display:none !important}
html[data-theme="light"] .brand-logo{filter:none}
html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:240px;max-width:min(62vw,240px);height:auto}
html[data-theme="light"] .brand img{width:240px;max-width:min(62vw,240px);height:auto}
html[data-theme="light"] .tool-header .tool-shell{justify-content:flex-start}
html[data-theme="light"] .tool-header .tool-shell > a + a{margin-left:18px;font-weight:700;color:#304866}
html[data-theme="light"] .tool-header .tool-shell .site-controls{margin-left:auto}
html[data-theme="light"] .tool-header a:hover{color:#0d7668}
@media(max-width:920px){html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:206px;max-width:55vw}}
@media(max-width:700px){html[data-theme="light"] .tool-header .tool-shell{justify-content:flex-start}html[data-theme="light"] .tool-header .tool-shell > a + a{margin-left:12px}html[data-theme="light"] .tool-header .tool-shell .site-controls{margin-left:auto}}
@media(max-width:600px){.theme-toggle .theme-word{display:inline}html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:188px;max-width:54vw}.site-controls{padding-left:8px}.site-control{height:36px;padding:0 10px;font-size:.78rem}}
@media(max-width:420px){html[data-theme="light"] .tool-header .tool-shell > a + a{font-size:.9rem}html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:174px;max-width:52vw}}


/* 2026-09-30 header alignment refinements */
/* Homepage: keep brand on the left; move page links + Light control toward the right. */
.topbar .nav{justify-content:flex-start;gap:24px}
.topbar .primary-links{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:30px}
.topbar .site-controls{margin-left:12px;padding-left:0}

/* Calculator pages: brand left, All calculators and Light control grouped on the right. */
.tool-header .tool-shell{justify-content:flex-start!important;gap:14px}
.tool-header .tool-shell>a:first-child{margin-right:auto}
.tool-header .tool-shell>a[href="/"]:not(:first-child){margin-left:0!important;font-weight:700}
.tool-header .site-controls{margin-left:4px!important;padding-left:0}

@media(max-width:920px){
  .topbar .nav{gap:12px}
  .topbar .primary-links{gap:18px}
}
@media(max-width:800px){
  .topbar .primary-links{display:none!important}
  .topbar .site-controls{margin-left:auto}
  .tool-header .tool-shell>a:first-child{margin-right:auto}
}
@media(max-width:700px){
  .tool-header .tool-shell{flex-wrap:nowrap!important;gap:8px}
  .tool-header .tool-shell>a[href="/"]:not(:first-child){font-size:.83rem;white-space:nowrap}
  .tool-header .site-controls{margin-left:2px!important}
}
@media(max-width:470px){
  .tool-header .tool-shell>a[href="/"]:not(:first-child){font-size:.78rem}
  .site-control{padding-inline:8px}
}
\n\n/* FINAL 2026-09-30 header positioning + mobile performance/responsiveness */
.topbar .nav,.tool-header .tool-shell{display:flex;align-items:center;justify-content:space-between!important;gap:16px;flex-wrap:nowrap}
.topbar .brand,.tool-header .tool-brand{flex:0 0 auto;min-width:0}
.header-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.header-actions .primary-links{margin-left:0!important;display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.35vw,25px);flex-wrap:nowrap}
.header-actions .primary-links a{white-space:nowrap}
.header-actions .site-controls{margin-left:6px!important;padding-left:0!important;flex:0 0 auto}
.tool-header-actions{gap:12px}
.tool-header-actions .all-calculators-link{margin:0!important;white-space:nowrap;font-weight:700;color:#304866}
.tool-header-actions .site-controls{margin-left:4px!important}

/* Keep the long SEO H1 readable without making the header heavier. */
.intro h1{max-width:980px;text-wrap:balance}

/* Tablet: hide full nav and use compact Menu next to Light. */
@media(max-width:1050px){
  .header-actions .primary-links{gap:14px;font-size:.93rem}
}
@media(max-width:900px){
  .topbar .primary-links{display:none!important}
  .topbar .mobile-nav{display:block!important}
  .topbar .header-actions{gap:8px}
  .topbar .site-controls{margin-left:0!important}
  .tool-header-actions{gap:8px}
}

/* Phone: no wrapping; compact controls; logo remains readable. */
@media(max-width:600px){
  .topbar .nav,.tool-header .tool-shell{min-height:62px;height:auto;padding-top:8px;padding-bottom:8px;gap:8px}
  html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:174px!important;max-width:49vw!important;height:auto}
  .header-actions{gap:6px}
  .site-control{height:36px;padding:0 8px;font-size:.76rem;box-shadow:none}
  .theme-toggle .theme-word{display:none!important}
  .mobile-nav summary{padding:8px 10px!important;font-size:.82rem!important;min-height:36px!important}
  .tool-header-actions .all-calculators-link{font-size:.78rem!important;line-height:1.15;text-align:right}
  .intro{padding-top:22px!important}
  .intro h1{font-size:clamp(1.72rem,7.2vw,2.16rem)!important;line-height:1.12!important;letter-spacing:-.035em!important;text-wrap:pretty}
  .intro p:last-child{font-size:.96rem!important;line-height:1.48!important}
}
@media(max-width:420px){
  html[data-theme="light"] .nav img,html[data-theme="light"] .tool-header img{width:158px!important;max-width:47vw!important}
  .tool-header-actions .all-calculators-link{font-size:.73rem!important}
  .site-control{padding:0 7px}
}

/* Reduce hover/motion work on touch devices for snappier mobile interaction. */
@media(hover:none),(pointer:coarse){
  .panel,.step,.guide-card,.calculator-links a,.tool-button,.action{transition:none!important}
  .panel:hover,.step:hover,.guide-card:hover,.calculator-links a:hover,.tool-button:hover,.action:hover{transform:none!important}
}


/* 2026-09-30 dark-theme contrast fix */
html[data-theme="dark"] body,
html[data-theme="dark"] .tool-page{color:#f4f7ff;background:#0e1628}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .tool-header{background:#101a31;border-color:#30425f}
html[data-theme="dark"] .nav a,
html[data-theme="dark"] .tool-header a,
html[data-theme="dark"] .header-actions a,
html[data-theme="dark"] .tool-header .tool-shell > a + a{color:#f4f7ff !important}
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .tool-header a:hover,
html[data-theme="dark"] .header-actions a:hover{color:#7cebd9 !important}
html[data-theme="dark"] .intro,
html[data-theme="dark"] .intro h1,
html[data-theme="dark"] .intro h2{color:#ffffff}
html[data-theme="dark"] .intro p,
html[data-theme="dark"] .intro p:last-child{color:#d2def0}
html[data-theme="dark"] .eyebrow{color:#71ead8}
html[data-theme="dark"] .tool-page h1,
html[data-theme="dark"] .tool-page h2,
html[data-theme="dark"] .tool-page h3,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .step h3,
html[data-theme="dark"] .guide-card h3,
html[data-theme="dark"] .seo-guide h3,
html[data-theme="dark"] .related-calculators h2,
html[data-theme="dark"] .hosting-info h2,
html[data-theme="dark"] .hosting-info h3,
html[data-theme="dark"] .tool-faq summary,
html[data-theme="dark"] .faq summary{color:#ffffff !important}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .tool-intro,
html[data-theme="dark"] .tool-muted,
html[data-theme="dark"] .section-lead,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .seo-guide>p,
html[data-theme="dark"] .seo-guide li,
html[data-theme="dark"] .hosting-info p,
html[data-theme="dark"] .hosting-info li,
html[data-theme="dark"] .tool-faq p,
html[data-theme="dark"] .faq p,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .privacy,
html[data-theme="dark"] .result-note,
html[data-theme="dark"] .detail-age,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .calculator-links span,
html[data-theme="dark"] .seo-note{color:#c7d4e8 !important}
html[data-theme="dark"] .field label,
html[data-theme="dark"] .tool-field label{color:#f0f5ff}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .tool-panel,
html[data-theme="dark"] .step,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .hosting-info,
html[data-theme="dark"] .tool-faq details,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .calculator-links a{background:#17223d;border-color:#334866;color:#edf4ff}
html[data-theme="dark"] .calculator-links strong{color:#8ebcff}
html[data-theme="dark"] .metric,
html[data-theme="dark"] .result-metric,
html[data-theme="dark"] .formula-box{background:#101a31;color:#eef5ff}
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .result-metric span{color:#b9c8dc}
html[data-theme="dark"] .metric b,
html[data-theme="dark"] .result-metric b,
html[data-theme="dark"] .big-age,
html[data-theme="dark"] .detail-age strong,
html[data-theme="dark"] .example-result{color:#ffffff !important}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .tool-field input{background:#101a31;border-color:#46617f;color:#ffffff;color-scheme:dark}
html[data-theme="dark"] .site-control{background:#17223d;border-color:#79cfc3;color:#ffffff}
html[data-theme="dark"] .footer,
html[data-theme="dark"] .tool-footer{border-color:#30425f;color:#b6c6da}
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .tool-footer a{color:#c8d9f0}
html[data-theme="dark"] .chrono-badge{background:#12332f;border-color:#28766d;color:#8ef0df}

/* Static information pages: dark-mode readability fix, 2026-09-30 */
html[data-theme="dark"] body:not(.tool-page){background:#0e1628 !important;color:#edf4ff !important}
html[data-theme="dark"] body:not(.tool-page) .topbar,
html[data-theme="dark"] body:not(.tool-page) .hero{background:#101a31 !important;color:#ffffff !important;border-color:#273a5a !important}
html[data-theme="dark"] body:not(.tool-page) .hero h1,
html[data-theme="dark"] body:not(.tool-page) .main h1,
html[data-theme="dark"] body:not(.tool-page) .content h1,
html[data-theme="dark"] body:not(.tool-page) .content h2,
html[data-theme="dark"] body:not(.tool-page) .content h3,
html[data-theme="dark"] body:not(.tool-page) .field label{color:#ffffff !important}
html[data-theme="dark"] body:not(.tool-page) .content,
html[data-theme="dark"] body:not(.tool-page) .main{color:#edf4ff !important}
html[data-theme="dark"] body:not(.tool-page) .content{background:#17223d !important;border-color:#2d4160 !important;box-shadow:0 18px 45px rgba(0,0,0,.18) !important}
html[data-theme="dark"] body:not(.tool-page) .content p,
html[data-theme="dark"] body:not(.tool-page) .content li,
html[data-theme="dark"] body:not(.tool-page) .content ul,
html[data-theme="dark"] body:not(.tool-page) .content ol,
html[data-theme="dark"] body:not(.tool-page) .intro,
html[data-theme="dark"] body:not(.tool-page) .email-note,
html[data-theme="dark"] body:not(.tool-page) .updated{color:#c7d4e8 !important}
html[data-theme="dark"] body:not(.tool-page) .content strong,
html[data-theme="dark"] body:not(.tool-page) .content b{color:#f6f9ff !important}
html[data-theme="dark"] body:not(.tool-page) .content a,
html[data-theme="dark"] body:not(.tool-page) .main a,
html[data-theme="dark"] body:not(.tool-page) .email-note a{color:#8fc0ff !important}
html[data-theme="dark"] body:not(.tool-page) .content a:hover,
html[data-theme="dark"] body:not(.tool-page) .main a:hover{color:#b8d8ff !important}
html[data-theme="dark"] body:not(.tool-page) .field input,
html[data-theme="dark"] body:not(.tool-page) .field select,
html[data-theme="dark"] body:not(.tool-page) .field textarea{background:#101a31 !important;border-color:#385071 !important;color:#f4f8ff !important;color-scheme:dark}
html[data-theme="dark"] body:not(.tool-page) .field input::placeholder,
html[data-theme="dark"] body:not(.tool-page) .field textarea::placeholder{color:#91a4be !important}
html[data-theme="dark"] body:not(.tool-page) .footer{border-color:#2e405c !important;color:#aebed2 !important}
html[data-theme="dark"] body:not(.tool-page) .footer a{color:#9ec5ff !important}


/* Final dark-mode UI fixes: brighter calculator tabs + static header logo text */
html[data-theme="dark"] .hero-tools a{color:#ffffff !important;text-shadow:0 1px 1px rgba(0,0,0,.16);font-weight:850}
html[data-theme="dark"] .hero-tools a:nth-child(1){background:#18a995 !important;border-color:#78f1df !important}
html[data-theme="dark"] .hero-tools a:nth-child(2){background:#477be3 !important;border-color:#9bbdff !important}
html[data-theme="dark"] .hero-tools a:nth-child(3){background:#dc7b12 !important;border-color:#ffc56d !important}
html[data-theme="dark"] .hero-tools a:nth-child(4){background:#8754d2 !important;border-color:#c6a4ff !important}
html[data-theme="dark"] .hero-tools a:hover,
html[data-theme="dark"] .hero-tools a:focus-visible{filter:brightness(1.12);color:#ffffff !important}
html[data-theme="dark"] .hero-tools a[aria-current="page"]{box-shadow:0 0 0 3px #ffffff,0 10px 24px rgba(0,0,0,.35)}
html[data-theme="dark"] body:not(.tool-page) .topbar img{width:290px;max-width:min(64vw,290px);height:auto;display:block}
@media(max-width:600px){html[data-theme="dark"] body:not(.tool-page) .topbar img{width:205px;max-width:58vw}}

/* New calculators: hero link colours and reference tables */
html[data-theme="dark"] .hero-tools a:nth-child(5){background:#cf4a86 !important;border-color:#ffa3c9 !important}
html[data-theme="dark"] .hero-tools a:nth-child(6){background:#0e8fb0 !important;border-color:#8ae3f7 !important}
html[data-theme="dark"] .hero-tools a:nth-child(7){background:#5d9a18 !important;border-color:#bfe97f !important}
html[data-theme="dark"] .hero-tools a:nth-child(8){background:#c9443d !important;border-color:#ffb1ab !important}
html[data-theme="dark"] .guide-table{background:#17223d;border-color:#334866}
html[data-theme="dark"] .guide-table th{background:#101a31;color:#edf4ff;border-color:#334866}
html[data-theme="dark"] .guide-table td{color:#c5d3e6;border-color:#334866}

/* Language links (footer) and language select (header) */
.lang-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.lang-links a[aria-current="true"]{font-weight:800;text-decoration:none}
select.lang-select{max-width:118px;padding-right:26px;cursor:pointer}
@media(max-width:600px){select.lang-select{max-width:none;min-width:62px;padding-right:20px}}
/* Small phones: keep the logo, menu, language and theme controls on one line */
@media(max-width:480px){
  .topbar .brand-logo,.tool-header .brand-logo{width:min(170px,34vw)!important;max-width:none!important;height:auto!important}
  html[data-theme] .topbar .brand img,html[data-theme] .tool-header img{width:min(170px,34vw)!important;max-width:none!important}
}
/* Info pages (About, Contact, Privacy, Terms): header must fit logo + back link + language + theme controls */
.topbar .nav{justify-content:flex-start}
.topbar .nav>a:first-child{margin-right:auto}
.topbar .nav .site-controls{margin-left:0}
@media(max-width:480px){
  .topbar .nav{gap:10px}
  .topbar .nav>a:first-child img{width:min(124px,32vw)!important}
  .topbar .nav>a:not(:first-child){font-size:.82rem!important;line-height:1.25}
}

/* Celebrity age-difference pages */
.breadcrumb{font-size:.9rem;color:#586b86;margin:4px 0 14px}
.breadcrumb a{color:inherit}
.source-note{font-size:.9rem;color:#586b86}
.guide-table td a{font-weight:700}
.seo-guide .result-note{margin:0 0 4px}
html[data-theme="dark"] .breadcrumb,html[data-theme="dark"] .source-note{color:#c5d3e6}