
:root{
  --cz-layout-width:1180px;
  --cz-header-height:78px;
  --cz-footer-height:48px;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;overflow-x:hidden}
body{overflow-x:clip}
img,svg,canvas,video{max-width:100%}
input,select,textarea,button{max-width:100%}

/* One exact header geometry for Matches, FAQ and Radio */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  height:var(--cz-header-height)!important;
  min-height:var(--cz-header-height)!important;
  max-height:var(--cz-header-height)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:rgba(8,10,15,.96)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.site-header .header-container{
  width:min(var(--cz-layout-width),calc(100% - 32px))!important;
  max-width:var(--cz-layout-width)!important;
  height:var(--cz-header-height)!important;
  min-height:var(--cz-header-height)!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:230px minmax(300px,1fr) 170px 42px 0!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:0!important;
}
.site-header .site-logo{
  grid-column:1!important;
  width:230px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:30px!important;
  font-weight:900!important;
  line-height:44px!important;
  letter-spacing:.35px!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.site-header .main-nav{
  grid-column:2!important;
  justify-self:stretch!important;
  width:100%!important;
  height:44px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.site-header .nav-list{
  width:auto!important;
  height:44px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
.site-header .nav-item a{
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:13px!important;
  font-size:15px!important;
  font-weight:760!important;
  line-height:42px!important;
  white-space:nowrap!important;
}
.site-header .header-account-slot{
  grid-column:3!important;
  width:170px!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
.site-header .header-login-link,
.site-header .cz-account-widget,
.site-header .cz-account-button{
  width:170px!important;
  min-width:170px!important;
  max-width:170px!important;
  height:42px!important;
}
.site-header .cz-account-button{
  padding:0 14px!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border-radius:13px!important;
  overflow:hidden!important;
  font-size:15px!important;
  font-weight:800!important;
}
.site-header .cz-account-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:15px!important;
  font-weight:800!important;
}
.site-header .telegram-icon-link{
  grid-column:4!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  margin:0!important;
}
.site-header .mobile-menu-btn{
  grid-column:5!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:42px!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* One exact footer on every public page */
body .legal-footer,
body footer.legal-footer,
body .radio-footer{
  position:relative!important;
  z-index:4!important;
  width:min(var(--cz-layout-width),calc(100% - 28px))!important;
  max-width:var(--cz-layout-width)!important;
  min-height:var(--cz-footer-height)!important;
  height:var(--cz-footer-height)!important;
  margin:0 auto!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  gap:8px 16px!important;
  flex-wrap:wrap!important;
  border-top:1px solid rgba(255,255,255,.085)!important;
  background:transparent!important;
  color:rgba(238,243,251,.55)!important;
  text-align:center!important;
  font:600 12px/1.35 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body .legal-footer>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}
body .legal-footer .legal-footer-links{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px 14px!important;flex-wrap:wrap!important}
body .legal-footer a{padding:0!important;margin:0!important;color:rgba(238,243,251,.72)!important;font-size:12px!important;line-height:1.35!important;text-decoration:none!important}
body .legal-footer a:hover,body .legal-footer a:focus-visible{color:#fff!important;text-decoration:underline!important}

/* Same logo visual on legal pages */
.legal-brand.site-logo{
  display:inline-flex!important;
  align-items:center!important;
  min-height:44px!important;
  font-size:30px!important;
  font-weight:900!important;
  line-height:44px!important;
  letter-spacing:.35px!important;
  text-transform:uppercase!important;
}

/* Generic small-screen hardening */
@media(max-width:900px){
  :root{--cz-header-height:70px}
  .site-header{height:auto!important;min-height:70px!important;max-height:none!important}
  .site-header .header-container{
    width:min(100% - 24px,var(--cz-layout-width))!important;
    height:auto!important;
    min-height:70px!important;
    padding:10px 0!important;
    grid-template-columns:minmax(0,1fr) 44px 42px 42px!important;
    grid-template-rows:50px auto!important;
    column-gap:8px!important;
    row-gap:8px!important;
  }
  .site-header .site-logo{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    font-size:clamp(1.1rem,4.4vw,1.45rem)!important;
    line-height:42px!important;
    overflow:hidden!important;
  }
  .site-header .header-account-slot{grid-column:2!important;grid-row:1!important;width:44px!important;height:42px!important}
  .site-header .header-login-link,
  .site-header .cz-account-widget,
  .site-header .cz-account-button{width:44px!important;min-width:44px!important;max-width:44px!important;height:42px!important;padding:0!important;justify-content:center!important}
  .site-header .cz-account-name{display:none!important}
  .site-header .cz-account-icon{margin:0!important}
  .site-header .telegram-icon-link{grid-column:3!important;grid-row:1!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important}
  .site-header .mobile-menu-btn{grid-column:4!important;grid-row:1!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;padding:0!important;opacity:1!important;pointer-events:auto!important;overflow:visible!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;background:#111a28!important;color:#fff!important}
  .site-header .main-nav{
    grid-column:1/5!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    display:none!important;
    margin:0!important;
    padding:8px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:16px!important;
    background:#090e17!important;
    box-shadow:0 18px 48px rgba(0,0,0,.46)!important;
  }
  .site-header .main-nav.active{display:flex!important}
  .site-header .nav-list{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .site-header .nav-item a{width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;padding:0 8px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;background:#111a28!important;color:#f7f9fc!important;font-size:.84rem!important;line-height:40px!important}
  .site-header .nav-item a.active,.site-header .nav-item a[aria-current="page"]{background:#1a2638!important;border-color:rgba(92,184,255,.28)!important}
  .cz-account-menu{position:fixed!important;top:64px!important;right:9px!important;left:auto!important;width:min(300px,calc(100vw - 18px))!important;max-height:calc(100dvh - 76px)!important;overflow:auto!important}
}
@media(max-width:680px){
  body .legal-footer,body footer.legal-footer,body .radio-footer{height:auto!important;min-height:48px!important;padding:7px 8px!important;gap:5px 10px!important}
  body .legal-footer>span{flex:0 0 100%!important;font-size:11px!important}
  body .legal-footer .legal-footer-links{gap:7px 11px!important}
  body .legal-footer a{font-size:11px!important}
  .modal,.edit-modal,.cz-account-dialog,.cz-purchases-panel{width:min(100%,calc(100vw - 18px))!important;max-height:calc(100dvh - 18px)!important;overflow:auto!important}
}
@media(max-width:420px){
  .site-header .header-container{width:calc(100% - 16px)!important;grid-template-columns:minmax(0,1fr) 40px 38px 38px!important;column-gap:6px!important}
  .site-header .site-logo{font-size:clamp(.94rem,4.65vw,1.14rem)!important}
  .site-header .header-account-slot,.site-header .header-login-link,.site-header .cz-account-widget,.site-header .cz-account-button{width:40px!important;min-width:40px!important;max-width:40px!important}
  .site-header .telegram-icon-link{width:38px!important;min-width:38px!important;max-width:38px!important}
  .site-header .mobile-menu-btn{width:38px!important;min-width:38px!important;max-width:38px!important}
  .site-header .main-nav{grid-column:1/5!important;padding:6px!important}
  .site-header .nav-item a{font-size:.76rem!important;padding:0 4px!important}
}


/* V20 account button follows username length while the header grid stays fixed */
.site-header .header-account-slot{width:170px!important;min-width:170px!important;max-width:170px!important}
.site-header .cz-account-widget{width:auto!important;min-width:0!important;max-width:152px!important;height:42px!important;display:inline-flex!important;justify-content:flex-end!important}
.site-header .cz-account-button{width:98px!important;min-width:78px!important;max-width:152px!important;height:42px!important;padding:0 12px!important;gap:8px!important;justify-content:flex-start!important}
.site-header .cz-account-name{font-size:15px!important;font-weight:850!important;text-overflow:clip!important}
.site-header .cz-account-widget.name-length-1 .cz-account-button{width:78px!important}
.site-header .cz-account-widget.name-length-2 .cz-account-button{width:86px!important}
.site-header .cz-account-widget.name-length-3 .cz-account-button{width:96px!important}
.site-header .cz-account-widget.name-length-4 .cz-account-button{width:106px!important}
.site-header .cz-account-widget.name-length-5 .cz-account-button{width:116px!important}
.site-header .cz-account-widget.name-length-6 .cz-account-button{width:126px!important}
.site-header .cz-account-widget.name-length-7 .cz-account-button{width:136px!important}
.site-header .cz-account-widget.name-length-8 .cz-account-button{width:146px!important}
.site-header .cz-account-widget.is-long-name .cz-account-name{letter-spacing:-.025em!important}
.site-header .cz-account-widget.name-size-9 .cz-account-name{font-size:13.5px!important}
.site-header .cz-account-widget.name-size-10 .cz-account-name{font-size:12.4px!important}
.site-header .cz-account-widget.name-size-11 .cz-account-name{font-size:11.5px!important}
@media(max-width:900px){.site-header .header-account-slot{width:44px!important;min-width:44px!important;max-width:44px!important}.site-header .cz-account-widget,.site-header .cz-account-button{width:44px!important;min-width:44px!important;max-width:44px!important;padding:0!important;justify-content:center!important}.site-header .cz-account-name{display:none!important}}
@media(max-width:420px){.site-header .header-account-slot,.site-header .cz-account-widget,.site-header .cz-account-button{width:40px!important;min-width:40px!important;max-width:40px!important}}


/* V22 final alignment and polish */
@media(min-width:901px){
  html{overflow-y:scroll!important;scrollbar-gutter:stable!important}
  .site-header .header-container{
    position:relative!important;
    display:block!important;
    width:min(var(--cz-layout-width),calc(100% - 32px))!important;
    height:var(--cz-header-height)!important;
  }
  .site-header .site-logo{
    position:absolute!important;left:0!important;top:17px!important;
    grid-column:auto!important;transform:none!important;
  }
  .site-header .main-nav{
    position:absolute!important;left:50%!important;top:17px!important;
    width:auto!important;min-width:310px!important;height:44px!important;
    transform:translateX(-50%)!important;grid-column:auto!important;
  }
  .site-header .header-account-slot{
    position:absolute!important;right:54px!important;top:17px!important;
    width:170px!important;min-width:170px!important;max-width:170px!important;
    grid-column:auto!important;display:flex!important;justify-content:flex-end!important;
  }
  .site-header .telegram-icon-link{
    position:absolute!important;right:0!important;top:18px!important;
    grid-column:auto!important;transform:none!important;
  }
  .site-header .mobile-menu-btn{position:absolute!important;right:0!important;top:18px!important}
}
body .legal-footer,body footer.legal-footer,body .radio-footer{
  box-sizing:border-box!important;
  width:min(var(--cz-layout-width),calc(100% - 28px))!important;
  max-width:var(--cz-layout-width)!important;
  min-height:48px!important;height:48px!important;
  margin:0 auto!important;padding:0 12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:8px 16px!important;flex-wrap:wrap!important;
  border-top:1px solid rgba(255,255,255,.085)!important;
  text-align:center!important;
}
body .legal-footer>span{flex:0 0 auto!important}
body .legal-footer .legal-footer-links{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px 14px!important}
@media(max-width:680px){
  body .legal-footer,body footer.legal-footer,body .radio-footer{height:auto!important;min-height:54px!important;padding:8px!important}
  body .legal-footer>span{flex:0 0 100%!important}
}


/* V24 immutable shared header geometry */
@media(min-width:901px){
 body .site-header .header-container{width:min(1180px,calc(100% - 32px))!important;left:auto!important;right:auto!important}
 body .site-header .site-logo{left:0!important;top:17px!important}
 body .site-header .main-nav{left:50%!important;top:17px!important;transform:translateX(-50%)!important}
 body .site-header .header-account-slot{right:54px!important;top:17px!important}
 body .site-header .telegram-icon-link{right:0!important;top:18px!important}
}
@media(max-width:900px){
 .site-header .header-container{position:relative!important;grid-template-rows:50px!important}
 .site-header .main-nav{position:absolute!important;left:0!important;right:0!important;top:60px!important;z-index:1100!important;grid-column:auto!important;grid-row:auto!important}
}


/* V24 reserve identical desktop scrollbar geometry without visible tracks */
@media(min-width:901px){
 html.radio-document,html.faq-document,html.matches-active-document{overflow-y:scroll!important;scrollbar-color:transparent transparent!important}
 html.radio-document::-webkit-scrollbar,html.faq-document::-webkit-scrollbar,html.matches-active-document::-webkit-scrollbar{width:17px!important}
 html.radio-document::-webkit-scrollbar-track,html.faq-document::-webkit-scrollbar-track,html.matches-active-document::-webkit-scrollbar-track,html.radio-document::-webkit-scrollbar-thumb,html.faq-document::-webkit-scrollbar-thumb,html.matches-active-document::-webkit-scrollbar-thumb{background:transparent!important}
}

/* V27 exact viewport-anchored header geometry across Matches, FAQ and Radio */
@media(min-width:901px){
 body .site-header{position:sticky!important;left:0!important;right:0!important;width:100vw!important;max-width:100vw!important}
 body .site-header .header-container{position:absolute!important;left:50vw!important;right:auto!important;top:0!important;transform:translateX(-50%)!important;width:min(1180px,calc(100vw - 50px))!important;max-width:1180px!important;height:78px!important;margin:0!important;padding:0!important}
 html.radio-document,html.faq-document{scrollbar-gutter:auto!important}
}
