:root{
  --skeleton-base:rgba(255,255,255,.055);
  --skeleton-shine:rgba(255,255,255,.12)
}
@keyframes cz-skeleton-shimmer{0%{background-position:180% 0}100%{background-position:-180% 0}}
.cz-skeleton,.match-skeleton-card,.account-skeleton-line,.security-skeleton-row,.faq-page.is-skeleton-loading .faq-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,var(--skeleton-base) 20%,var(--skeleton-shine) 38%,var(--skeleton-base) 56%);
  background-size:240% 100%;
  animation:cz-skeleton-shimmer 1.15s linear infinite
}
.matches-skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.match-skeleton-card{min-height:280px;border:1px solid rgba(255,255,255,.07);border-radius:22px}
.account-header-skeleton{width:132px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.security-skeleton{display:grid;gap:12px}.security-skeleton-row{min-height:92px;border:1px solid rgba(255,255,255,.08);border-radius:18px}
.faq-page.is-skeleton-loading .faq-card{min-height:68px}.faq-page.is-skeleton-loading .faq-card>*{visibility:hidden}
@media(max-width:980px){.matches-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.matches-skeleton-grid{grid-template-columns:1fr}.match-skeleton-card{min-height:230px}}
@media(prefers-reduced-motion:reduce){.cz-skeleton,.match-skeleton-card,.account-skeleton-line,.security-skeleton-row,.faq-page.is-skeleton-loading .faq-card{animation:none}}

/* Public UI scale. Admin pages do not load this file. */
html:not(.radio-document){font-size:110%}
html{
  min-height:100%;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  color-scheme:dark;
  background:#070910;
}
html.faq-document{
  background:
    radial-gradient(circle at 10% 0%,rgba(17,69,126,.14),transparent 32%),
    radial-gradient(circle at 88% 2%,rgba(215,20,26,.08),transparent 28%),
    #070910;
  background-attachment:fixed;
}
body:not(.radio-page){min-height:100dvh}
body:not(.radio-page) button,
body:not(.radio-page) input,
body:not(.radio-page) select,
body:not(.radio-page) textarea{font-size:inherit}
body:not(.radio-page) .cz-account-icon svg{width:1.1em!important;height:1.1em!important}

/* Hide the browser caret outside real text-entry controls. This also prevents
   caret-browsing cursors from appearing on the auth flag and password-eye button. */
html,body,body *{caret-color:transparent}
input,textarea,[contenteditable="true"],[contenteditable="plaintext-only"]{caret-color:auto}
.auth-flag-line,.auth-tabs,.auth-tab,.password-eye,.telegram-icon-link,.mobile-menu-btn{
  caret-color:transparent!important;
  user-select:none;
  -webkit-user-select:none;
}
.password-eye{touch-action:manipulation}
body.auth-page .auth-card,body.auth-page .auth-dialog-card{user-select:none;-webkit-user-select:none;caret-color:transparent}
body.auth-page input,body.auth-page textarea{user-select:text;-webkit-user-select:text;caret-color:auto}

/* Fixed square Telegram control: page-specific flex/grid rules cannot stretch it. */
body:not(.radio-page) .telegram-icon-link{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  padding:0!important;
  flex:0 0 48px!important;
  aspect-ratio:1/1!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:0!important;
  overflow:hidden!important;
}
body:not(.radio-page) .telegram-icon-link svg{
  display:block!important;
  width:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  aspect-ratio:1/1!important;
  flex:none!important;
  transform:none!important;
}
body:not(.radio-page) .mobile-menu-btn{min-width:48px;min-height:48px}

/* Reserve the scrollbar width so filters never move the header. The track is transparent. */
*{scrollbar-width:thin;scrollbar-color:rgba(184,205,226,.34) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{
  min-height:44px;
  border:3px solid transparent;
  border-radius:999px;
  background:rgba(184,205,226,.34);
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(215,229,244,.56);background-clip:padding-box}

@media(max-width:620px){
  html:not(.radio-document){font-size:110%}
  *::-webkit-scrollbar{width:7px;height:7px}
}


/* V33 stability and mobile performance */
.matches-skeleton-grid,.match-skeleton-card{display:none!important}
.account-header-skeleton{background:transparent!important;animation:none!important;box-shadow:none!important}
.faq-page.is-skeleton-loading .faq-card{background:inherit!important;animation:none!important}
html[data-cz-navigating],html[data-cz-navigating] *{animation:none!important}
a,button,[role="button"]{touch-action:manipulation}
.match-card,.faq-card,.legal-card,.radio-station-card{contain:layout paint style}
@media(max-width:780px){
  html{background-attachment:scroll!important}
  .site-header,.legal-header,.faq-sidebar,.legal-sidebar,.radio-library,.radio-player-square,.cz-account-menu{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .match-card,.faq-card,.legal-card,.radio-station-card{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* V33.3 viewport background and stable scrollbar gutter.
   Keep the gutter reserved so filters do not move the header, but paint the
   document root with the same background as each page so no black strip is visible. */
html,body{
  width:100%;
  max-width:100%;
  min-width:0;
}
html{
  overflow-y:scroll!important;
  scrollbar-gutter:stable!important;
  background-attachment:fixed!important;
}
html.matches-document{
  background:
    radial-gradient(circle at top left,rgba(17,69,126,.16),transparent 34%),
    radial-gradient(circle at top right,rgba(215,20,26,.10),transparent 30%),
    #080a0f!important;
}
html.faq-document{
  background:
    radial-gradient(circle at 10% 0%,rgba(17,69,126,.14),transparent 32%),
    radial-gradient(circle at 88% 2%,rgba(215,20,26,.08),transparent 28%),
    #070910!important;
}
html.radio-document{
  background:
    radial-gradient(circle at 10% 0%,rgba(17,69,126,.16),transparent 34%),
    radial-gradient(circle at 88% 2%,rgba(215,20,26,.10),transparent 30%),
    #070910!important;
}
html.security-document{
  background:
    radial-gradient(circle at 10% 0%,rgba(17,69,126,.14),transparent 32%),
    radial-gradient(circle at 88% 2%,rgba(215,20,26,.08),transparent 28%),
    #070910!important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:transparent!important;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:transparent!important;
}

/* V33.5: stable footer position when match filters return different item counts. */
body.fixed-matches-page{
  display:flex!important;
  flex-direction:column!important;
  min-height:100dvh!important;
}
body.fixed-matches-page>.matches-page-content{
  flex:1 0 auto!important;
  width:100%!important;
  min-height:calc(100dvh - 48px)!important;
}
body.fixed-matches-page>.legal-footer{
  flex:0 0 auto!important;
  margin-top:auto!important;
}
@media(max-width:700px){
  body.fixed-matches-page>.matches-page-content{min-height:calc(100dvh - 54px)!important}
}

/* V33.7: persistent mini radio is a fixed overlay and never participates in page layout. */
#czRadioMini,
.cz-radio-mini{
  position:fixed!important;
  inset:auto auto 16px 16px!important;
  left:16px!important;
  right:auto!important;
  top:auto!important;
  bottom:16px!important;
  width:min(286px,calc(100vw - 32px))!important;
  min-width:0!important;
  max-width:286px!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(210px,calc(100dvh - 32px))!important;
  margin:0!important;
  float:none!important;
  clear:none!important;
  transform:none!important;
  box-sizing:border-box!important;
  z-index:7000!important;
  contain:layout paint style!important;
  isolation:isolate!important;
  pointer-events:auto!important;
}
html.radio-shell-open,
body.radio-shell-open{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  scrollbar-gutter:stable!important;
  margin-right:0!important;
  padding-right:0!important;
}
html.radio-shell-open .radio-page-shell,
body.radio-shell-open .radio-page-shell{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
html.radio-shell-open .radio-page-shell iframe,
body.radio-shell-open .radio-page-shell iframe{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  transform:none!important;
}
@media(max-width:600px){
  #czRadioMini,.cz-radio-mini{
    inset:auto 10px 10px 10px!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(190px,calc(100dvh - 20px))!important;
  }
}



/* V33.9: one scrollbar owner while persistent radio is displaying another page.
   The outer radio document is hidden and the iframe page owns the only gutter,
   keeping header/footer coordinates identical to normal standalone navigation. */
html.radio-shell-open,
body.radio-shell-open{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  scrollbar-gutter:auto!important;
  margin:0!important;
  padding:0!important;
}
html.radio-shell-open .radio-page-shell,
body.radio-shell-open .radio-page-shell{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html.radio-shell-open .radio-page-shell iframe,
body.radio-shell-open .radio-page-shell iframe{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
}