/*
 * 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:#08091d;
  --chrome-panel:#10142c;
  --chrome-panel-2:#151a38;
  --chrome-line:rgba(158,170,224,.18);
  --chrome-text:#f5f7ff;
  --chrome-muted:#9da8c4;
  --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(8,9,29,.9)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.15)!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:#dce2f5!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:rgba(124,92,255,.1)!important;
  color:#fff!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:rgba(16,20,44,.98)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.35)!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:#cbd3e9!important;
  font-size:.82rem!important;
}
.topbar .nav-dropdown-menu a:hover{
  background:linear-gradient(100deg,rgba(124,92,255,.17),rgba(25,171,193,.09))!important;
  color:#fff!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:rgba(255,255,255,.045)!important;
  color:#f1f3ff!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:#fff!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:rgba(255,255,255,.045)!important;
  color:#fff!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:#fff!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:#fff!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:#fff!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}
}