/* Sports Surin V112 | homepage + shared public navigation only.
   No changes to competition data, registrations, certificate/ID printing, or login logic. */
:root {--v112-cream:#e8d9ff;--v112-ink:#101b26}
/* One and only topbar paint, shared across desktop / tablet / mobile.
   The left stays purple; green enters gradually on the right. */
html body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar,
html body.public-site.hybrid-navigation:not(.page-index) .topbar.public-premium-topbar,
html body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
  background-color:#453253 !important;
  background-image:linear-gradient(105deg,
    #50385f 0%,#493455 29%,#3b3855 47%,#2a5b58 68%,#176b56 100%) !important;
  border:1px solid rgba(171,172,192,.32) !important;
  box-shadow:0 13px 32px rgba(11,23,39,.16),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html body.public-site.hybrid-navigation .topbar.public-premium-topbar::before,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar::after,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar > .hybrid-brand::before,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar > .hybrid-brand::after{
  content:none !important;display:none !important;
}
/* Brand itself remains transparent; only one topbar surface owns the purple. */
html body.public-site.hybrid-navigation .topbar.public-premium-topbar > a.hybrid-brand{
  position:relative;
  isolation:auto;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Login control: white surface, black text across public desktop/tablet/mobile. */
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .hybrid-account > summary,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .topbar-login-desktop .topbar-button,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .mobile-login-trigger{
  background:linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%) !important;
  border:1px solid #e6ebf0 !important;
  color:#161d26 !important;-webkit-text-fill-color:#161d26 !important;
  text-shadow:none !important;
  box-shadow:0 7px 16px rgba(8,21,39,.16),inset 0 1px 0 #fff !important;
}
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .hybrid-account > summary > span,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .hybrid-account-avatar,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .topbar-login-desktop .topbar-button,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .mobile-login-trigger{
  color:#161d26 !important;-webkit-text-fill-color:#161d26 !important;
}
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .hybrid-account-avatar{
  background:#f0f2f6 !important;border:1px solid #e2e8ef !important;
}
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .hybrid-account > summary:hover,
html body.public-site.hybrid-navigation .topbar.public-premium-topbar .mobile-login-trigger:hover{
  background:linear-gradient(180deg,#ffffff,#f6f3ff) !important;
  transform:translateY(-1px);
}
/* V140 — bright single-surface homepage canvas. The old V139 navy colors
   are REPLACED here, not overlaid. Light blue / lilac / mint haze and very
   subtle curved ribbons + dots are painted on BODY only; no separate images,
   pseudo-elements, rectangular section backgrounds or diagonal stripes. */
html body.public-site.hybrid-navigation.page-index{
  background-color:#e9f4fc !important;
  background-image:
    /* Tiny, airy points, never stripes */
    radial-gradient(circle at 42px 41px,rgba(72,134,187,.14) 1.3px,transparent 2.3px),
    /* Soft curved decorative ribbons, feathered rather than sharp lines */
    radial-gradient(ellipse 510px 390px at -5% 10%,transparent 68%,rgba(91,158,205,.12) 68.5%,rgba(91,158,205,.15) 69.2%,transparent 71.1%),
    radial-gradient(ellipse 620px 500px at 104% 30%,transparent 72%,rgba(148,126,197,.12) 72.5%,rgba(148,126,197,.16) 73.1%,transparent 75.2%),
    radial-gradient(ellipse 520px 410px at -3% 69%,transparent 64%,rgba(65,167,169,.12) 64.6%,rgba(65,167,169,.17) 65.3%,transparent 67.4%),
    radial-gradient(ellipse 630px 460px at 102% 88%,transparent 67%,rgba(106,155,211,.10) 67.5%,rgba(106,155,211,.15) 68.2%,transparent 70.5%),
    /* Blurred colour blooms: no actual image or CSS blur layer to overlap */
    radial-gradient(ellipse 920px 760px at -8% 4%,rgba(101,193,245,.42) 0%,rgba(140,213,249,.22) 38%,transparent 78%),
    radial-gradient(ellipse 980px 760px at 105% 18%,rgba(196,162,244,.38) 0%,rgba(211,188,251,.20) 41%,transparent 80%),
    radial-gradient(ellipse 850px 690px at 28% 49%,rgba(170,226,240,.21) 0%,transparent 77%),
    radial-gradient(ellipse 950px 750px at -8% 75%,rgba(126,224,202,.33) 0%,rgba(176,237,224,.14) 43%,transparent 82%),
    radial-gradient(ellipse 960px 750px at 104% 89%,rgba(158,190,246,.32) 0%,rgba(211,202,253,.17) 43%,transparent 82%),
    linear-gradient(153deg,#e5f2fd 0%,#f5effe 31%,#e7f7f5 66%,#eaf0fd 100%) !important;
  background-size:108px 112px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% !important;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat !important;
  background-position:0 0,center,center,center,center,center,center,center,center,center,center !important;
  background-attachment:scroll !important;
}
html body.public-site.hybrid-navigation.page-index main.page-content{
  background:transparent !important;
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
html body.public-site.hybrid-navigation.page-index main.page-content::before,
html body.public-site.hybrid-navigation.page-index main.page-content::after{
  content:none !important;display:none !important;
}
/* V108 colored whole sections independently and hid the main gradient pattern.
   Let the single ambient canvas show through section wrappers, retaining individual cards. */
html body.public-site.hybrid-navigation.page-index main.page-content > :is(
  .sport-hub-section,.home-stat-section,.premium-home-dashboard,
  .home-discovery-section,.home-milestone-section,.home-useful-section,
  .home-venue-line-section,.home-youtube-section,.home-registration-guide-section,
  .home-mascot-section
),
html body.public-site.hybrid-navigation.page-index main.page-content > div > :is(
  .sport-hub-section,.home-stat-section,.premium-home-dashboard,
  .home-discovery-section,.home-milestone-section,.home-useful-section,
  .home-venue-line-section,.home-youtube-section,.home-registration-guide-section,
  .home-mascot-section
){
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
/* Important: V108 styled homepage sections separately, including mascot.
   Override exactly that hierarchy; only mascot gets no independent color/pattern. */
html body.public-site.hybrid-navigation.page-index main.page-content > section.home-mascot-section,
html body.public-site.hybrid-navigation.page-index main.page-content > div > section.home-mascot-section,
html body.public-site.hybrid-navigation.page-index main.page-content section.home-mascot-section,
html body.public-site.hybrid-navigation.page-index main.page-content .home-mascot-container,
html body.public-site.hybrid-navigation.page-index main.page-content .home-mascot-strip,
html body.public-site.hybrid-navigation.page-index main.page-content .home-mascot-figure{
  background:transparent !important;background-image:none !important;
  background-color:transparent !important;
  border:0 !important;box-shadow:none !important;filter:none !important;
}
html body.public-site.hybrid-navigation.page-index main.page-content section.home-mascot-section::before,
html body.public-site.hybrid-navigation.page-index main.page-content section.home-mascot-section::after,
html body.public-site.hybrid-navigation.page-index main.page-content .home-mascot-container::before,
html body.public-site.hybrid-navigation.page-index main.page-content .home-mascot-container::after{
  content:none !important;display:none !important;
}
html body.public-site.hybrid-navigation.page-index main.page-content section.home-mascot-section{
  padding:10px 0 22px !important;margin:0 !important;
  isolation:isolate;
}
/* Avoid accidental clipping of uploaded mascot images. */
html body.public-site.hybrid-navigation.page-index .home-mascot-strip,
html body.public-site.hybrid-navigation.page-index .home-mascot-image{
  overflow:visible !important;
}
@media(max-width:700px){
  html body.public-site.hybrid-navigation .topbar.public-premium-topbar .mobile-login-trigger{min-height:38px !important}
}