/*
 * Shared 2026 header and footer presentation.
 * Loaded after page styles so every public/account/tool page gets one
 * consistent shell without changing its PHP, navigation or auth logic.
 */
:root{
  --chrome-bg:#f6f8fc;
  --chrome-panel:#ffffff;
  --chrome-panel-2:#f7f8fc;
  --chrome-line:#d9e0ea;
  --chrome-text:#111827;
  --chrome-muted:#667085;
  --chrome-violet:#7c5cff;
  --chrome-pink:#ec3a9b;
  --chrome-cyan:#19abc1;
}

.topbar{
  position:sticky!important;
  z-index:1000!important;
  top:0;
  border-bottom:1px solid var(--chrome-line)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 4px 18px rgba(16,24,40,.05)!important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.topbar::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,58,155,.45),rgba(124,92,255,.58),rgba(25,171,193,.42),transparent);
  pointer-events:none;
}
.topbar .nav{
  width:min(1320px,calc(100% - 36px))!important;
  min-height:72px!important;
  margin:0 auto!important;
  padding:8px 0!important;
  gap:24px!important;
}
.topbar .brand{
  min-width:180px!important;
  color:var(--chrome-text)!important;
  transition:opacity .18s ease,transform .18s ease;
}
.topbar .brand:hover{opacity:.94;transform:translateY(-1px)}
.topbar .brand .site-logo-img{
  width:188px!important;
  max-width:188px!important;
  max-height:51px!important;
  object-fit:contain!important;
  object-position:left center;
}
.topbar .brand .logo{
  background:linear-gradient(135deg,var(--chrome-pink),var(--chrome-violet) 55%,var(--chrome-cyan))!important;
  box-shadow:0 9px 24px rgba(124,92,255,.28);
}
.topbar .navlinks{
  gap:7px!important;
  color:var(--chrome-text)!important;
}
.topbar .navlinks>a,
.topbar .nav-dropbtn{
  min-height:38px;
  padding:0 11px!important;
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:11px;
  color:#111827!important;
  font-size:.88rem!important;
  font-weight:780!important;
  line-height:1;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
.topbar .navlinks>a:hover,
.topbar .nav-dropbtn:hover,
.topbar .navlinks>a:focus-visible,
.topbar .nav-dropbtn:focus-visible{
  border-color:rgba(124,92,255,.2);
  background:#f2f0ff!important;
  color:#5b4fd4!important;
  transform:translateY(-1px);
}
.topbar a:focus-visible,
.topbar button:focus-visible,
.site-footer a:focus-visible{
  outline:3px solid rgba(86,208,225,.35)!important;
  outline-offset:3px!important;
}
.topbar .nav-dropdown-menu{
  top:calc(100% + 10px)!important;
  min-width:280px!important;
  padding:10px!important;
  border:1px solid var(--chrome-line)!important;
  border-radius:17px!important;
  background:#ffffff!important;
  box-shadow:0 18px 45px rgba(16,24,40,.14)!important;
  backdrop-filter:blur(18px);
}
@media(min-width:981px){
  .topbar .nav-dropdown::after{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    height:12px;
    content:"";
    pointer-events:auto;
  }
  .topbar .nav-dropdown-menu{z-index:1001!important}
}
.topbar .nav-dropdown-menu.mega-use-menu{
  width:min(650px,calc(100vw - 32px))!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px 8px!important;
}
.topbar .nav-dropdown-menu a{
  padding:10px 12px!important;
  border-radius:10px!important;
  color:#344054!important;
  font-size:.82rem!important;
}
.topbar .nav-dropdown-menu a:hover{
  background:#f6f5ff!important;
  color:#5b4fd4!important;
}
.topbar .nav-cta{gap:9px!important}
.topbar .nav-cta .btn{
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  font-size:.84rem!important;
  font-weight:900!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.topbar .nav-cta .btn.secondary{
  border-color:var(--chrome-line)!important;
  background:#fff!important;
  color:#111827!important;
}
.topbar .nav-cta .btn.primary{
  border-color:transparent!important;
  background:linear-gradient(110deg,var(--chrome-pink),var(--chrome-violet) 55%,var(--chrome-cyan))!important;
  color:#5b4fd4!important;
  box-shadow:0 11px 27px rgba(110,79,228,.27)!important;
}
.topbar .nav-cta .btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.topbar .menu-btn{
  min-width:42px;
  min-height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--chrome-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#5b4fd4!important;
}

.google-mini-login{
  border-bottom:1px solid #ececf4;
  background:#fff;
}

.site-footer{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--chrome-line)!important;
  background:
    radial-gradient(circle at 12% 15%,rgba(124,92,255,.12),transparent 30rem),
    radial-gradient(circle at 90% 12%,rgba(25,171,193,.08),transparent 25rem),
    var(--chrome-bg)!important;
  color:var(--chrome-muted)!important;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--chrome-pink),var(--chrome-violet),var(--chrome-cyan),transparent);
  opacity:.8;
}
.site-footer .footer-wrap{
  width:min(1240px,calc(100% - 40px))!important;
  margin:0 auto!important;
  padding:64px 0 45px!important;
}
.site-footer .footer-grid{
  grid-template-columns:minmax(250px,1.25fr) minmax(145px,.65fr) minmax(290px,1.18fr) minmax(150px,.68fr) minmax(130px,.58fr)!important;
  gap:36px!important;
}
.site-footer .footer-about{max-width:350px}
.site-footer .footer-brand{
  display:inline-flex!important;
  color:#5b4fd4!important;
}
.site-footer .footer-brand .site-logo-img{
  width:195px!important;
  max-width:195px!important;
  max-height:56px!important;
  object-position:left center;
}
.site-footer .footer-note{
  max-width:330px!important;
  margin:18px 0 0!important;
  color:var(--chrome-muted)!important;
  font-size:.88rem;
  line-height:1.7;
}
.site-footer .footer-col h3{
  margin:0 0 17px!important;
  color:#5b4fd4!important;
  font-size:.76rem!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
}
.site-footer .footer-col a{
  width:max-content;
  max-width:100%;
  padding:4px 0!important;
  color:#9fa9c4!important;
  font-size:.82rem!important;
  line-height:1.45!important;
  transition:color .18s ease,transform .18s ease;
}
.site-footer .footer-col a:hover{
  color:#5b4fd4!important;
  transform:translateX(3px);
}
.site-footer .footer-use-cases{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  column-gap:22px;
}
.site-footer .footer-use-cases h3{grid-column:1/-1}
.site-footer .playstore-official-badge{
  width:max-content;
  max-width:100%;
  display:block;
  margin-top:19px;
  border-radius:9px;
  line-height:0;
  transition:transform .18s ease,filter .18s ease;
}
.site-footer .playstore-official-badge img{
  width:190px;
  max-width:100%;
  height:auto;
  display:block;
  margin:-11px;
}
.site-footer .playstore-official-badge:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
}
.site-footer .footer-bottom{
  width:min(1240px,calc(100% - 40px))!important;
  margin:0 auto!important;
  padding:20px 0 24px!important;
  border-top:1px solid var(--chrome-line)!important;
  color:#727e9d!important;
  font-size:.76rem!important;
}
.site-footer .footer-credit{margin-left:4px}
.site-footer .footer-credit a{color:#a99cff!important;font-weight:850}
.site-footer .footer-credit a:hover{color:#f0a6cf!important}

@media(max-width:1120px){
  .topbar .nav{gap:14px!important}
  .topbar .navlinks>a,.topbar .nav-dropbtn{padding:0 7px!important;font-size:.82rem!important}
  .site-footer .footer-grid{grid-template-columns:1.15fr .7fr 1.15fr!important}
  .site-footer .footer-company,
  .site-footer .footer-legal{margin-top:8px}
}
@media(max-width:980px){
  .topbar .navlinks{
    top:calc(100% + 9px)!important;
    right:18px!important;
    left:18px!important;
    max-height:calc(100vh - 105px);
    overflow:auto;
    padding:12px!important;
    border:1px solid var(--chrome-line)!important;
    border-radius:18px!important;
    background:rgba(16,20,44,.99)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
  }
  .topbar .navlinks>a,.topbar .nav-dropbtn{width:100%;justify-content:flex-start;padding:0 12px!important}
  .topbar .nav-dropdown{width:100%;display:block}
  .topbar .nav-dropdown-menu,
  .topbar .nav-dropdown-menu.mega-use-menu{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin-top:5px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    box-shadow:none!important;
  }
  .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .site-footer .footer-about{max-width:none}
}
@media(max-width:700px){
  .topbar .nav{width:calc(100% - 26px)!important;min-height:64px!important}
  .topbar .brand{min-width:145px!important}
  .topbar .brand .site-logo-img{width:150px!important;max-width:150px!important;max-height:44px!important}
  .topbar .nav-cta .btn.primary{display:none}
  .topbar .nav-cta .btn.secondary{display:inline-flex!important;width:42px;padding:0!important;font-size:0!important}
  .topbar .nav-cta .btn.secondary::before{content:"◉";font-size:16px}
  .site-footer .footer-wrap{width:min(100% - 28px,1240px)!important;padding:48px 0 34px!important}
  .site-footer .footer-grid{grid-template-columns:1fr!important;gap:30px!important}
  .site-footer .footer-use-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .footer-bottom{
    width:min(100% - 28px,1240px)!important;
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:7px!important;
  }
}
@media(max-width:430px){
  .topbar .nav-dropdown-menu.mega-use-menu{grid-template-columns:1fr!important}
  .site-footer .footer-use-cases{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .topbar *,.site-footer *{scroll-behavior:auto!important;transition:none!important}
}

/* Lightweight footer refresh */
.site-footer{
  background:#0b1020!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.site-footer .footer-grid-light{
  grid-template-columns:minmax(280px,1.5fr) repeat(3,minmax(130px,.65fr))!important;
  gap:42px!important;
  padding-top:46px!important;
  padding-bottom:34px!important;
}
.site-footer .footer-note{
  margin-top:12px!important;
  max-width:360px!important;
  font-size:.86rem!important;
  line-height:1.6!important;
}
.site-footer .footer-app-card{
  width:min(360px,100%);
  margin-top:20px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  text-decoration:none;
  box-shadow:none;
}
.site-footer .footer-app-card:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  transform:none;
}
.site-footer .footer-app-icon{
  width:48px;
  height:48px;
  display:block;
  border-radius:11px;
  object-fit:cover;
}
.site-footer .footer-app-copy{min-width:0;display:block}
.site-footer .footer-app-copy small,
.site-footer .footer-app-copy strong,
.site-footer .footer-app-copy em{display:block;font-style:normal}
.site-footer .footer-app-copy small{color:#8f9ab4;font-size:.66rem;line-height:1.2}
.site-footer .footer-app-copy strong{margin-top:2px;color:#fff;font-size:.88rem;line-height:1.25}
.site-footer .footer-app-copy em{margin-top:2px;color:#aab4ca;font-size:.68rem;line-height:1.2}
.site-footer .footer-app-arrow{color:#cbd3e6;font-size:1rem}
.site-footer .footer-col h3{margin-bottom:12px!important}
.site-footer .footer-col a{padding:3px 0!important;font-size:.8rem!important}
.site-footer .footer-bottom-light{
  padding-top:17px!important;
  padding-bottom:19px!important;
}
@media(max-width:980px){
  .site-footer .footer-grid-light{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .site-footer .footer-grid-light{grid-template-columns:1fr!important;gap:26px!important;padding-top:36px!important}
  .site-footer .footer-app-card{width:100%}
}
.footer-col h3 a{color:inherit;text-decoration:none}.footer-col h3 a:hover{text-decoration:underline}


/* 2026 lightweight navigation visibility fix */
.topbar .nav-dropdown-menu,
.topbar .nav-dropdown-menu.mega-use-menu{
  background:#fff!important;
  border-color:#d9e0ea!important;
}
.topbar .nav-dropdown-menu a,
.topbar .nav-dropdown-menu.mega-use-menu a{
  color:#344054!important;
  opacity:1!important;
  -webkit-text-fill-color:#344054!important;
}
.topbar .nav-dropdown-menu a:hover,
.topbar .nav-dropdown-menu a:focus-visible{
  color:#5b4fd4!important;
  background:#f6f5ff!important;
  -webkit-text-fill-color:#5b4fd4!important;
}
.topbar .nav-dropbtn{color:#111827!important;}
.topbar .nav-dropbtn:hover,
.topbar .nav-dropbtn:focus-visible{color:#5b4fd4!important;}

/* ---------------------------------------------------------
   Unified dark site chrome — header + footer on every page
   --------------------------------------------------------- */
:root{
  --chrome-dark:#090a1f;
  --chrome-dark-2:#11142f;
  --chrome-dark-3:#171a38;
  --chrome-dark-line:#2b3154;
  --chrome-dark-text:#f7f8ff;
  --chrome-dark-muted:#aeb6d5;
}

.topbar{
  background:rgba(9,10,31,.97)!important;
  border-bottom:1px solid var(--chrome-dark-line)!important;
  box-shadow:0 8px 26px rgba(3,5,20,.22)!important;
}
.topbar .brand{color:var(--chrome-dark-text)!important}
.topbar .navlinks{color:var(--chrome-dark-text)!important}
.topbar .navlinks>a,
.topbar .nav-dropbtn{
  color:#f7f8ff!important;
  background:transparent!important;
}
.topbar .navlinks>a:hover,
.topbar .nav-dropbtn:hover,
.topbar .navlinks>a:focus-visible,
.topbar .nav-dropbtn:focus-visible{
  color:#fff!important;
  background:#181b3a!important;
  border-color:#343a67!important;
}
.topbar .nav-dropdown-menu{
  background:#11142f!important;
  border-color:#30365e!important;
  box-shadow:0 24px 60px rgba(0,0,0,.38)!important;
}
.topbar .nav-dropdown-menu a{color:#dfe4fa!important}
.topbar .nav-dropdown-menu a:hover{
  color:#fff!important;
  background:#1a1e42!important;
}
.topbar .nav-cta .btn.secondary{
  background:#11142f!important;
  color:#fff!important;
  border-color:#343a67!important;
}
.topbar .nav-cta .btn.primary{
  color:#fff!important;
  border-color:transparent!important;
}
.topbar .menu-btn{
  background:#11142f!important;
  color:#fff!important;
  border-color:#343a67!important;
}
.google-mini-login{
  background:#090a1f!important;
  border-bottom-color:#2b3154!important;
}

.site-footer{
  background:
    radial-gradient(circle at 12% 15%,rgba(124,92,255,.14),transparent 30rem),
    radial-gradient(circle at 90% 12%,rgba(25,171,193,.08),transparent 25rem),
    #090a1f!important;
  color:var(--chrome-dark-muted)!important;
  border-top:1px solid var(--chrome-dark-line)!important;
}
.site-footer .footer-brand{color:#fff!important}
.site-footer .footer-note{color:#aeb6d5!important}
.site-footer .footer-col h3,
.site-footer .footer-col h3 a{color:#f7f8ff!important}
.site-footer .footer-col a{color:#aeb6d5!important}
.site-footer .footer-col a:hover{color:#fff!important}
.site-footer .footer-bottom{
  border-top-color:#2b3154!important;
  color:#8f99bb!important;
}
.site-footer .footer-credit a{color:#c4b9ff!important}
.site-footer .footer-credit a:hover{color:#fff!important}
.site-footer .footer-app-card{
  background:#11142f!important;
  border-color:#30365e!important;
  color:#fff!important;
  box-shadow:none!important;
}
.site-footer .footer-app-card:hover{
  background:#171a38!important;
  border-color:#4a5284!important;
}
.site-footer .footer-app-copy small,
.site-footer .footer-app-copy em{color:#aeb6d5!important}
.site-footer .footer-app-copy strong{color:#fff!important}
.site-footer .footer-app-arrow{color:#fff!important}

@media(max-width:980px){
  .topbar .navlinks{
    background:#11142f!important;
    border-color:#30365e!important;
  }
  .topbar .nav-dropdown-menu,
  .topbar .nav-dropdown-menu.mega-use-menu{
    background:#171a38!important;
    border-color:#30365e!important;
  }
}

/* ---------------------------------------------------------
   Final header + footer polish — visual only
   --------------------------------------------------------- */
.topbar{
  background:rgba(9,10,31,.94)!important;
  box-shadow:0 10px 34px rgba(3,5,20,.24)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
}
.topbar .nav{
  width:min(1240px,calc(100% - 36px))!important;
  min-height:68px!important;
  padding:7px 0!important;
}
.topbar .brand .site-logo-img{
  width:184px!important;
  max-width:184px!important;
  max-height:48px!important;
}
.topbar .navlinks>a,
.topbar .nav-dropbtn{
  min-height:36px!important;
  border-radius:10px!important;
  font-size:.84rem!important;
  letter-spacing:.005em;
}
.topbar .navlinks>a.is-current{
  color:#fff!important;
  border-color:#3b4272!important;
  background:#171a38!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.topbar .navlinks>a.is-current::after{
  content:"";
  position:absolute;
  right:11px;
  bottom:3px;
  left:11px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#ec3a9b,#7c5cff,#19abc1);
}
.topbar .navlinks>a{position:relative}
.topbar .nav-dropdown-menu{
  padding:9px!important;
  border-radius:15px!important;
}
.topbar .nav-dropdown-menu a{
  min-height:38px;
  display:flex!important;
  align-items:center;
  padding:9px 11px!important;
  border-radius:9px!important;
  font-size:.8rem!important;
}
.topbar .nav-cta .btn{
  min-height:40px!important;
  padding:0 15px!important;
  border-radius:11px!important;
}
.topbar .nav-cta .btn.primary{
  background:linear-gradient(115deg,#6b5cff,#5b7cff 55%,#24a9c6)!important;
  box-shadow:0 9px 24px rgba(92,91,255,.28)!important;
}
.topbar .nav-cta .btn.secondary:hover{
  border-color:#4a5284!important;
  background:#171a38!important;
}

.site-footer::before{height:1px!important;opacity:.72!important}
.site-footer .footer-wrap{
  width:min(1180px,calc(100% - 40px))!important;
  padding-top:48px!important;
  padding-bottom:34px!important;
}
.site-footer .footer-grid-light{
  grid-template-columns:minmax(300px,1.45fr) repeat(3,minmax(130px,.62fr))!important;
  gap:46px!important;
}
.site-footer .footer-brand .site-logo-img{
  width:188px!important;
  max-width:188px!important;
  max-height:52px!important;
}
.site-footer .footer-note{
  max-width:390px!important;
  margin-top:13px!important;
  color:#aeb6d5!important;
  font-size:.82rem!important;
  line-height:1.65!important;
}
.site-footer .footer-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.site-footer .footer-benefits span{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border:1px solid #2d345c;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#aeb6d5;
  font-size:.66rem;
  font-weight:750;
  white-space:nowrap;
}
.site-footer .footer-app-card{
  width:min(380px,100%)!important;
  margin-top:17px!important;
  padding:11px 13px!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#11142f,#0f1229)!important;
}
.site-footer .footer-app-card:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(145deg,#171a38,#121631)!important;
}
.site-footer .footer-app-icon{
  width:46px!important;
  height:46px!important;
  border-radius:10px!important;
}
.site-footer .footer-col h3{
  margin-bottom:11px!important;
  color:#f7f8ff!important;
  font-size:.7rem!important;
  letter-spacing:.11em!important;
}
.site-footer .footer-col a{
  display:block!important;
  width:fit-content!important;
  padding:4px 0!important;
  color:#aeb6d5!important;
  font-size:.78rem!important;
  line-height:1.4!important;
}
.site-footer .footer-col a:hover{transform:translateX(2px)!important}
.site-footer .footer-bottom{
  width:min(1180px,calc(100% - 40px))!important;
  padding-top:16px!important;
  padding-bottom:18px!important;
  font-size:.72rem!important;
}

@media(max-width:980px){
  .topbar .navlinks{
    top:calc(100% + 7px)!important;
    padding:10px!important;
    border-radius:15px!important;
  }
  .topbar .navlinks>a,.topbar .nav-dropbtn{min-height:42px!important}
  .site-footer .footer-grid-light{
    grid-template-columns:minmax(280px,1.2fr) repeat(2,minmax(140px,.8fr))!important;
    gap:34px!important;
  }
  .site-footer .footer-col:last-child{grid-column:2/3}
}
@media(max-width:700px){
  .topbar .nav{width:calc(100% - 24px)!important;min-height:62px!important}
  .topbar .brand{min-width:0!important;flex:1}
  .topbar .brand .site-logo-img{width:148px!important;max-width:148px!important;max-height:42px!important}
  .topbar .menu-btn{min-width:40px!important;min-height:40px!important;border-radius:10px!important}
  .topbar .nav-cta .btn.secondary{min-width:40px!important;height:40px!important}
  .site-footer .footer-wrap{width:min(100% - 28px,1180px)!important;padding-top:38px!important}
  .site-footer .footer-grid-light{grid-template-columns:1fr!important;gap:27px!important}
  .site-footer .footer-col:last-child{grid-column:auto}
  .site-footer .footer-benefits{gap:6px}
  .site-footer .footer-app-card{width:100%!important}
  .site-footer .footer-bottom{width:min(100% - 28px,1180px)!important}
}