/* CTL V21 — Final Unified Visual System
   Presentation only. Loaded after legacy page styles to remove contrast drift
   and give every public/client surface the CTL Play visual language. */

:root{
  --ctl21-bg:#06111b;
  --ctl21-bg-deep:#040d14;
  --ctl21-surface:#0b1d2b;
  --ctl21-surface-2:#0e2634;
  --ctl21-surface-3:#102d39;
  --ctl21-border:#315b6d;
  --ctl21-border-soft:#213f4d;
  --ctl21-text:#f3f8fa;
  --ctl21-text-2:#b8cad2;
  --ctl21-text-3:#9fb5be;
  --ctl21-lime:#d8ff2f;
  --ctl21-cyan:#55dfff;
  --ctl21-cream:#f5f1e7;
  --ctl21-cream-2:#fffdf7;
  --ctl21-ink:#10242b;
  --ctl21-ink-2:#52666c;
  --ctl21-danger:#ff9aa3;
  --ctl21-warning:#ffd36c;
  --ctl21-radius:18px;
  --ctl21-radius-sm:11px;
  --ctl21-shadow:0 24px 60px rgba(0,0,0,.26);
  --ctl21-max:1280px;
}

/* ----- Foundation / contrast ----- */
html{background:var(--ctl21-bg-deep)!important}
body:not(.admin-shell){
  background:
    radial-gradient(circle at 8% 0%,rgba(85,223,255,.09),transparent 28%),
    radial-gradient(circle at 100% 12%,rgba(216,255,47,.055),transparent 24%),
    linear-gradient(180deg,#07151f,var(--ctl21-bg))!important;
  color:var(--ctl21-text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body:not(.admin-shell) main{color:var(--ctl21-text)!important}
body:not(.admin-shell) main h1,
body:not(.admin-shell) main h2,
body:not(.admin-shell) main h3,
body:not(.admin-shell) main h4{color:var(--ctl21-text)!important}
body:not(.admin-shell) main p,
body:not(.admin-shell) main li,
body:not(.admin-shell) main label,
body:not(.admin-shell) main small,
body:not(.admin-shell) main .sub{color:var(--ctl21-text-2)!important}
body:not(.admin-shell) main strong,
body:not(.admin-shell) main b{color:inherit}
body:not(.admin-shell) a{color:inherit}
body:not(.admin-shell) ::selection{background:var(--ctl21-lime);color:#07121b}

/* ----- One header system ----- */
.ctl-v3 .v3-nav,
.ctl-ranking-page>header,
.ctl-community-home>.community-header,
body[data-ctl-global] .play-topbar,
.ctl-player-v4 .topbar{
  max-width:var(--ctl21-max)!important;
  min-height:64px!important;
  margin:12px auto 0!important;
  border:1px solid var(--ctl21-border)!important;
  border-radius:18px!important;
  background:rgba(5,16,24,.93)!important;
  box-shadow:0 15px 40px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(16px)!important;
}
.ctl-v3 .v3-nav,
.ctl-ranking-page>header,
.ctl-community-home>.community-header{
  padding:0 18px!important;
}
.ctl-v3 .v3-nav nav a,
.ctl-ranking-page>header nav a,
.ctl-community-home>.community-header nav a{
  color:var(--ctl21-text-2)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
}
.ctl-v3 .v3-nav nav a:hover,
.ctl-ranking-page>header nav a:hover,
.ctl-community-home>.community-header nav a:hover{
  color:#fff!important;
}
.ctl-v3 .v3-login,
.ctl-community-home .community-login,
.ctl-ranking-page>header nav a[href*="player/index"]{
  background:#0b1d2b!important;
  color:#f4fbfd!important;
  border:1px solid #3c687c!important;
  border-radius:999px!important;
}

/* ----- Typography rhythm ----- */
.ctl-v3 .v4-page-hero h1,
.ctl-v3 .v3-hero h1,
.ctl-community-home .community-hero h1,
.ctl-ranking-commercial-intro strong,
.ctl-pricing .pricing-hero h1,
.ctl-organize-page h1,
.ctl-player-v4 .hero h1{
  color:var(--ctl21-text)!important;
  letter-spacing:-.05em!important;
  font-weight:1000!important;
}
.v3-kicker,.eyebrow,.rg-kicker,.og-kicker,
.ctl-ranking-commercial-intro small,
.ctl-pricing .pricing-eyebrow{
  color:var(--ctl21-cyan)!important;
}

/* ----- Hero / major dark panels ----- */
.ctl-v3 .v4-page-hero,
.ctl-v3 .v3-hero,
.ctl-ranking-page .ctl-ranking-commercial-intro,
.ctl-community-home .community-hero,
.ctl-pricing .pricing-hero,
.og-hero,
.rg-hero{
  border:1px solid var(--ctl21-border)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 88% 10%,rgba(85,223,255,.13),transparent 28%),
    linear-gradient(120deg,#0d2836,#081722)!important;
  color:var(--ctl21-text)!important;
  box-shadow:var(--ctl21-shadow)!important;
}
.ctl-v3 .v4-page-hero p,
.ctl-v3 .v3-hero p,
.ctl-ranking-commercial-intro p,
.ctl-community-home .community-hero p,
.ctl-pricing .pricing-hero p,
.og-hero p,.rg-hero p{
  color:var(--ctl21-text-2)!important;
}

/* ----- One card language ----- */
.ctl-v3 .tournament-premium-grid>*,
.ctl-v3 .v3-tournament-grid>*,
.ctl-v3 .public-draws-section article,
.ctl-v3 .masters-dynamic-view>*,
.ctl-v3 .masters-planner article,
.ctl-ranking-page main article,
.ctl-ranking-page main [class*="card"],
.ctl-ranking-page main [class*="panel"],
.ctl-community-home .feature-card,
.ctl-community-home .ranking-board-demo,
.ctl-community-home .opportunity-card,
.ctl-public-profile article,
.ctl-public-profile section[class*="card"],
.ctl-pricing .pricing-plan,
.ctl-pricing .pricing-card,
.og-card,.og-plan,.og-step,.og-split article,
.rg-card,.rg-rankbox,.rg-player,.rg-example-copy,.rg-race-card,
.ctl-player-v4 .card,
.ctl-player-v4 .kpi{
  background:linear-gradient(180deg,var(--ctl21-surface-2),var(--ctl21-surface))!important;
  color:var(--ctl21-text)!important;
  border:1px solid var(--ctl21-border)!important;
  border-radius:var(--ctl21-radius)!important;
  box-shadow:none!important;
}
.ctl-v3 .tournament-premium-grid>* p,
.ctl-v3 .v3-tournament-grid>* p,
.ctl-v3 .public-draws-section article p,
.ctl-v3 .masters-dynamic-view>* p,
.ctl-ranking-page main article p,
.ctl-community-home .feature-card p,
.ctl-community-home .ranking-board-demo p,
.ctl-community-home .opportunity-card p,
.ctl-public-profile article p,
.ctl-pricing .pricing-plan p,
.og-card p,.og-plan p,.og-step p,.og-split p,
.rg-card p,.rg-rankbox p,.rg-example-copy p,.rg-race-card p,
.ctl-player-v4 .card p,.ctl-player-v4 .card .sub{
  color:var(--ctl21-text-2)!important;
}

/* ----- Editorial cream bands: intentionally light, always dark text ----- */
.ctl-v3 .tournament-guide,
.ctl-v3 .trophy-story,
.ctl-v3 .v3-story,
.ctl-v3 .ctl-faq,
.ctl-community-home .match-freedom,
.ctl-pricing .pricing-subsidy{
  background:var(--ctl21-cream)!important;
  color:var(--ctl21-ink)!important;
  border:1px solid #d8d2c3!important;
  border-radius:20px!important;
}
.ctl-v3 .tournament-guide *,
.ctl-v3 .trophy-story *,
.ctl-v3 .v3-story *,
.ctl-v3 .ctl-faq *,
.ctl-community-home .match-freedom *,
.ctl-pricing .pricing-subsidy *{
  color:var(--ctl21-ink)!important;
}
.ctl-v3 .tournament-guide p,
.ctl-v3 .trophy-story p,
.ctl-v3 .v3-story p,
.ctl-v3 .ctl-faq p,
.ctl-community-home .match-freedom p,
.ctl-pricing .pricing-subsidy p{
  color:var(--ctl21-ink-2)!important;
}
.ctl-v3 .tournament-guide article,
.ctl-v3 .ctl-faq details,
.ctl-v3 .v3-story-points span{
  background:var(--ctl21-cream-2)!important;
  color:var(--ctl21-ink)!important;
  border-color:#d4dad5!important;
}

/* ----- Buttons / pills ----- */
.v3-btn.gold,.button-gold,.button.button-gold,
.ctl-btn-lime,.og-btn.primary,.rg-btn.primary,
.ctl-player-v4 .btn.gold,.ctl-player-v4 .btn.primary{
  background:linear-gradient(90deg,var(--ctl21-lime),#baff41)!important;
  color:#07121b!important;
  border:0!important;
  border-radius:9px!important;
  font-weight:950!important;
  box-shadow:0 10px 24px rgba(216,255,47,.12)!important;
}
.v3-btn:not(.gold),.og-btn.secondary,.rg-btn.secondary,
.tournament-view-switcher a,.v4-subnav a,
.ctl-player-v4 .btn:not(.gold):not(.primary){
  background:#0a1c29!important;
  color:var(--ctl21-text)!important;
  border:1px solid var(--ctl21-border)!important;
}
.registration-open-pill,.rg-active{
  background:#162a1b!important;
  border-color:#617b35!important;
  color:var(--ctl21-lime)!important;
}

/* ----- Forms: high contrast ----- */
body:not(.admin-shell) input,
body:not(.admin-shell) select,
body:not(.admin-shell) textarea{
  background:#071a25!important;
  color:var(--ctl21-text)!important;
  border:1px solid #3b6677!important;
  border-radius:9px!important;
}
body:not(.admin-shell) input::placeholder,
body:not(.admin-shell) textarea::placeholder{
  color:#8098a4!important;
  opacity:1!important;
}
body:not(.admin-shell) input:focus,
body:not(.admin-shell) select:focus,
body:not(.admin-shell) textarea:focus{
  outline:2px solid rgba(85,223,255,.42)!important;
  border-color:var(--ctl21-cyan)!important;
}

/* ----- Tables / lists / dynamic score content ----- */
body:not(.admin-shell) table{
  color:var(--ctl21-text)!important;
  background:var(--ctl21-surface)!important;
  border-color:var(--ctl21-border)!important;
}
body:not(.admin-shell) th{
  color:#dceaf0!important;
  background:#102a38!important;
}
body:not(.admin-shell) td{
  color:var(--ctl21-text-2)!important;
  border-color:var(--ctl21-border-soft)!important;
}
body:not(.admin-shell) .notice,
body:not(.admin-shell) [class*="notice"]{
  color:var(--ctl21-text-2)!important;
  border-color:var(--ctl21-border)!important;
}

/* ----- Player portal: same brand, not a separate visual universe ----- */
.ctl-player-v4{
  background:
    radial-gradient(circle at 8% 0,rgba(85,223,255,.08),transparent 28%),
    linear-gradient(180deg,#07151f,var(--ctl21-bg))!important;
  color:var(--ctl21-text)!important;
}
.ctl-player-v4 .topbar{
  background:rgba(5,16,24,.94)!important;
  color:var(--ctl21-text)!important;
}
.ctl-player-v4 .topbar .brand{
  color:#fff!important;
}
.ctl-player-v4 .topbar .brand small,
.ctl-player-v4 .hero p,
.ctl-player-v4 .sub{
  color:var(--ctl21-text-2)!important;
}
.ctl-player-v4 .hero{
  background:transparent!important;
}
.ctl-player-v4 .hero h1{color:#fff!important}
.ctl-player-v4 .player-quick-links a{
  background:#0a1c29!important;
  color:#dceaf0!important;
  border:1px solid var(--ctl21-border)!important;
}
.ctl-player-v4 .player-rating-pill{
  background:#102a38!important;
  color:#fff!important;
  border:1px solid var(--ctl21-border)!important;
}

/* ----- Organizer client: same palette as public site ----- */
body.admin-shell{
  --bg:#06111b!important;--panel:#0b1d2b!important;--line:#315b6d!important;
  background:
    radial-gradient(circle at 8% 0,rgba(85,223,255,.08),transparent 28%),
    linear-gradient(180deg,#07151f,#06111b)!important;
  color:var(--ctl21-text)!important;
}
.admin-shell .topbar,
.admin-shell .admin-navigation,
.admin-shell .admin-context-bar,
.admin-shell .card,
.admin-shell .kpi{
  background:linear-gradient(180deg,#0d2734,#091a25)!important;
  color:var(--ctl21-text)!important;
  border-color:var(--ctl21-border)!important;
}
.admin-shell p,.admin-shell small,.admin-shell .sub,.admin-shell label{
  color:var(--ctl21-text-2)!important;
}
.admin-shell h1,.admin-shell h2,.admin-shell h3,.admin-shell h4,.admin-shell b{
  color:var(--ctl21-text)!important;
}
.admin-shell input,.admin-shell select,.admin-shell textarea{
  background:#071a25!important;
  color:var(--ctl21-text)!important;
  border-color:#3b6677!important;
}
.admin-shell .btn.red,.admin-shell .btn.primary,.admin-shell .btn.gold{
  background:var(--ctl21-lime)!important;
  color:#07121b!important;
  border-color:var(--ctl21-lime)!important;
}
.admin-shell .admin-eyebrow,.admin-shell .admin-kicker{
  color:var(--ctl21-cyan)!important;
}

/* ----- Ranking Guide / Organize: remove local color drift ----- */
.rg-section,.og-section{
  background:linear-gradient(180deg,#0c2130,#081722)!important;
  border-color:var(--ctl21-border)!important;
}
.rg-section-head p,.og-section-head p,
.rg-card p,.og-card p,.og-step p,.og-split p{
  color:var(--ctl21-text-2)!important;
}
.rg-formula div,.rg-table,.rg-row,.rg-bonus,.rg-points div,
.og-console,.og-console-grid div{
  background:#091b27!important;
  border-color:var(--ctl21-border)!important;
}
.rg-row span,.rg-row small,.rg-bonus span,.rg-race-card span,
.og-console span,.og-plan span{
  color:var(--ctl21-text-3)!important;
}

/* ----- Pricing page normalization ----- */
.ctl-pricing{
  background:
    radial-gradient(circle at 8% 0,rgba(85,223,255,.09),transparent 28%),
    linear-gradient(180deg,#07151f,var(--ctl21-bg))!important;
  color:var(--ctl21-text)!important;
}
.ctl-pricing header{
  background:rgba(5,16,24,.93)!important;
  border-color:var(--ctl21-border)!important;
}
.ctl-pricing header a{color:var(--ctl21-text-2)!important}
.ctl-pricing header a:hover{color:#fff!important}
.ctl-pricing h1,.ctl-pricing h2,.ctl-pricing h3{color:var(--ctl21-text)!important}
.ctl-pricing p,.ctl-pricing li,.ctl-pricing small{color:var(--ctl21-text-2)!important}
.ctl-pricing .pricing-subsidy h1,
.ctl-pricing .pricing-subsidy h2,
.ctl-pricing .pricing-subsidy h3{color:var(--ctl21-ink)!important}

/* ----- Footer ----- */
.ctl-v3 .v3-footer,
.ctl-ranking-page>footer,
.ctl-community-home>.community-footer{
  color:var(--ctl21-text-2)!important;
  border-color:var(--ctl21-border-soft)!important;
}
.ctl-v3 .v3-footer a,
.ctl-ranking-page>footer a,
.ctl-community-home>.community-footer a{
  color:#cbdbe2!important;
}
.ctl-v3 .v3-footer a:hover,
.ctl-ranking-page>footer a:hover,
.ctl-community-home>.community-footer a:hover{
  color:var(--ctl21-lime)!important;
}

/* ----- Accessibility ----- */
body:not(.admin-shell) :focus-visible{
  outline:3px solid var(--ctl21-cyan)!important;
  outline-offset:3px!important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ----- Mobile consistency ----- */
@media(max-width:820px){
  .ctl-v3 .v3-nav,
  .ctl-ranking-page>header,
  .ctl-community-home>.community-header{
    margin:8px 10px 0!important;
    border-radius:14px!important;
  }
  .ctl-v3 .v3-nav nav,
  .ctl-ranking-page>header nav,
  .ctl-community-home>.community-header nav{
    overflow-x:auto!important;
    max-width:60vw!important;
    scrollbar-width:none!important;
  }
  .ctl-v3 .v3-nav nav::-webkit-scrollbar,
  .ctl-ranking-page>header nav::-webkit-scrollbar,
  .ctl-community-home>.community-header nav::-webkit-scrollbar{display:none}
}


/* Optional season finale / Masters — only appears when organizer enables it */
.season-finale-public{
  margin-top:22px;padding:24px;border:1px solid var(--ctl21-border)!important;border-radius:18px;
  background:linear-gradient(135deg,#0d2936,#081722)!important;color:var(--ctl21-text)!important
}
.season-finale-public-head{display:flex;justify-content:space-between;gap:18px;align-items:start}
.season-finale-public-head span{color:var(--ctl21-cyan)!important;font-size:8px;font-weight:950;letter-spacing:.15em}
.season-finale-public-head h3{font-size:27px;margin:7px 0;color:#fff!important}
.season-finale-public-head p{color:var(--ctl21-text-2)!important;max-width:690px;font-size:11px;line-height:1.6}
.season-finale-public-head>strong{border:1px solid #4a6f7d;border-radius:999px;padding:7px 9px;font-size:8px;color:var(--ctl21-lime)!important}
.season-finale-public-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:15px}
.season-finale-public-grid article{border:1px solid var(--ctl21-border)!important;border-radius:11px;background:#091b27!important;padding:13px}
.season-finale-public-grid b{display:block;font-size:21px;color:#fff!important}
.season-finale-public-grid span{display:block;font-size:8px;color:var(--ctl21-text-3)!important;margin-top:3px}
.season-finale-public-dates{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}
.season-finale-public-dates span{border:1px solid var(--ctl21-border-soft);border-radius:10px;padding:11px;color:var(--ctl21-text-2)!important;font-size:10px}
.season-finale-public-dates b{display:block;color:var(--ctl21-cyan)!important;font-size:8px;margin-bottom:4px}
.season-finale-public-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.season-finale-public-actions a{color:#07121b!important;background:var(--ctl21-lime)!important;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:8px;font-weight:950}
.season-finale-public-actions small{color:var(--ctl21-text-3)!important;font-size:9px}
@media(max-width:780px){
  .season-finale-public-head,.season-finale-public-actions{flex-direction:column}
  .season-finale-public-grid,.season-finale-public-dates{grid-template-columns:1fr 1fr}
}

/* Shared mobile contrast and player branding. */
.ctl-mobile-navigation{background:#071722!important;border-color:#315b6d!important}
.ctl-mobile-navigation a,.ctl-mobile-navigation a span{color:#c4d5dd!important}
.ctl-mobile-navigation a[aria-current],.ctl-mobile-navigation a[aria-current] span{color:#d8ff2f!important}
.ctl-mobile-navigation a[aria-current] svg{background:#183e4a!important;outline-color:#183e4a!important}
.ctl-player-v4 .topbar .brand{background-color:#f1f6f8!important;border-radius:8px;background-size:85% auto!important;min-height:44px}
@media(max-width:600px){.ctl-player-v4 .hero{padding-block:32px!important;min-height:0!important}.ctl-player-v4 .hero p{font-size:16px!important}}

/* CTL Play uses the same dark surfaces as Pricing. */
body[data-ctl-global] .play-brand img{background:#f1f6f8;border-radius:8px;padding:6px 9px;box-sizing:content-box}
body[data-ctl-global] .play-promise-card.primary :is(small,strong,p){color:#10242b!important}
body[data-ctl-global] .match-freedom-inner{background:#0e2634!important;border:1px solid #315b6d}
body[data-ctl-global] .freedom-choice{background:#071a25!important;border-color:#315b6d!important;color:#f3f8fa!important}
body[data-ctl-global] .freedom-choice small{color:#b8cad2!important}
body[data-ctl-global] .freedom-choice.featured{background:#183e4a!important;border-color:#55dfff!important}
body[data-ctl-global] .freedom-choice.featured b{color:#d8ff2f!important}
body[data-ctl-global] :is(input,select,textarea){font-size:16px!important;min-height:44px}
body[data-ctl-global] input[type=checkbox]{min-height:20px}