/* FBB-PREDICTION-VISUAL-THEME-BEGIN */

/*
 * Shared visual language derived from the production
 * prediction page. Layout and functional selectors remain
 * controlled by each individual page.
 */

body.fbb-prediction-visual-theme{
  --fbb-theme-bg:#121212;
  --fbb-theme-surface:#1e1e1e;
  --fbb-theme-surface-deep:#161616;
  --fbb-theme-surface-soft:#20252b;
  --fbb-theme-header:#1f1f1f;
  --fbb-theme-border:#2a2a2a;
  --fbb-theme-border-soft:rgba(255,255,255,.075);
  --fbb-theme-blue:#00b1ff;
  --fbb-theme-green:#00ff87;
  --fbb-theme-text:#ffffff;
  --fbb-theme-muted:#aab2bc;
  --fbb-theme-copy:#d7dde3;
  --fbb-theme-danger:#ff5a68;
  --fbb-theme-warning:#ffc857;
  --fbb-theme-radius-xl:24px;
  --fbb-theme-radius-lg:18px;
  --fbb-theme-radius-md:14px;
  --fbb-theme-shadow:
    0 16px 38px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,177,255,.025);
  --fbb-theme-shadow-hover:
    0 20px 46px rgba(0,0,0,.44),
    0 0 24px rgba(0,177,255,.09);

  color:var(--fbb-theme-text)!important;

  background:
    radial-gradient(
      circle at 12% -8%,
      rgba(0,177,255,.12),
      transparent 32rem
    ),
    radial-gradient(
      circle at 88% 0,
      rgba(0,255,135,.075),
      transparent 30rem
    ),
    var(--fbb-theme-bg)!important;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif!important;

  font-size:16px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.fbb-prediction-visual-theme button,
body.fbb-prediction-visual-theme input,
body.fbb-prediction-visual-theme select,
body.fbb-prediction-visual-theme textarea{
  font:inherit;
}

body.fbb-prediction-visual-theme h1,
body.fbb-prediction-visual-theme h2,
body.fbb-prediction-visual-theme h3,
body.fbb-prediction-visual-theme h4{
  color:var(--fbb-theme-text);
  font-family:inherit;
  font-weight:850;
  letter-spacing:-.025em;
  text-wrap:balance;
}

body.fbb-prediction-visual-theme h1{
  line-height:1.08;
}

body.fbb-prediction-visual-theme h2{
  line-height:1.15;
}

body.fbb-prediction-visual-theme h3,
body.fbb-prediction-visual-theme h4{
  line-height:1.25;
}

body.fbb-prediction-visual-theme p,
body.fbb-prediction-visual-theme li{
  line-height:1.58;
}

body.fbb-prediction-visual-theme :is(
  .muted,
  .subtitle,
  .lead,
  .description,
  .news-status,
  .section-head p,
  .stat-card span
){
  color:var(--fbb-theme-muted)!important;
}

body.fbb-prediction-visual-theme .accent{
  color:var(--fbb-theme-blue)!important;
}

body.fbb-prediction-visual-theme :is(
  .hero,
  .page-hero
){
  position:relative;
  overflow:hidden;

  border:
    1px solid
    rgba(0,177,255,.20)!important;

  border-radius:
    var(--fbb-theme-radius-xl)!important;

  background:
    radial-gradient(
      circle at top left,
      rgba(0,177,255,.17),
      transparent 42%
    ),
    radial-gradient(
      circle at top right,
      rgba(0,255,135,.11),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #1c2025 0%,
      #17191c 100%
    )!important;

  box-shadow:
    var(--fbb-theme-shadow)!important;
}

body.fbb-prediction-visual-theme :is(
  .hero-badge,
  .hero .tag
){
  border:
    1px solid
    rgba(0,177,255,.28)!important;

  border-radius:999px!important;

  background:
    rgba(0,177,255,.11)!important;

  color:
    var(--fbb-theme-blue)!important;

  font-weight:800!important;
  letter-spacing:.015em;
}

body.fbb-prediction-visual-theme :is(
  .card,
  .prediction-card,
  .news-card,
  .offer-card,
  .stat-card,
  .news-frame,
  .daily-picks-card,
  .fbb-daily-slot-section,
  .fbb-daily-pick,
  .fbb-ladder-fresh-card,
  .market,
  .signal
){
  border:
    1px solid
    rgba(255,255,255,.085)!important;

  border-radius:
    var(--fbb-theme-radius-lg)!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    ),
    var(--fbb-theme-surface)!important;

  box-shadow:
    var(--fbb-theme-shadow)!important;
}

body.fbb-prediction-visual-theme :is(
  .prediction-card,
  .news-card,
  .offer-card,
  .fbb-ladder-fresh-card
){
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease!important;
}

@media (hover:hover){
  body.fbb-prediction-visual-theme :is(
    .prediction-card,
    .news-card,
    .offer-card,
    .fbb-ladder-fresh-card
  ):hover{
    transform:translateY(-2px);

    border-color:
      rgba(0,177,255,.35)!important;

    box-shadow:
      var(--fbb-theme-shadow-hover)!important;
  }
}

body.fbb-prediction-visual-theme :is(
  .prediction-text,
  .offer-copy,
  .news-card p,
  .market p,
  .signal span,
  .fbb-ladder-fresh-kickoff
){
  color:var(--fbb-theme-copy)!important;
}

body.fbb-prediction-visual-theme :is(
  .prediction-card strong,
  .offer-card strong,
  .news-card h3,
  .fbb-ladder-fresh-pick strong
){
  color:var(--fbb-theme-text);
}

body.fbb-prediction-visual-theme :is(
  .filter-btn,
  .tracking-filter,
  .sport-tab,
  .btn,
  .cta-button,
  .daily-picks-mini-cta a
){
  border:
    1px solid
    rgba(0,177,255,.26)!important;

  border-radius:
    12px!important;

  background:
    rgba(0,177,255,.065)!important;

  color:
    #eefaff!important;

  font-weight:
    800!important;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.18);

  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease!important;
}

body.fbb-prediction-visual-theme :is(
  .filter-btn,
  .tracking-filter,
  .sport-tab,
  .btn,
  .cta-button,
  .daily-picks-mini-cta a
):hover{
  border-color:
    rgba(0,177,255,.65)!important;

  background:
    rgba(0,177,255,.13)!important;

  color:
    #ffffff!important;

  box-shadow:
    0 10px 24px
    rgba(0,177,255,.10);
}

body.fbb-prediction-visual-theme :is(
  .filter-btn,
  .tracking-filter,
  .sport-tab
).active{
  border-color:
    var(--fbb-theme-blue)!important;

  background:
    linear-gradient(
      135deg,
      rgba(0,177,255,.24),
      rgba(0,255,135,.10)
    )!important;

  color:
    #ffffff!important;

  box-shadow:
    0 0 18px
    rgba(0,177,255,.16)!important;
}

body.fbb-prediction-visual-theme :is(
  input,
  select,
  textarea,
  .league-select
){
  border:
    1px solid
    rgba(255,255,255,.12)!important;

  border-radius:
    12px!important;

  background:
    #17191c!important;

  color:
    var(--fbb-theme-text)!important;

  outline:none;
}

body.fbb-prediction-visual-theme :is(
  input,
  select,
  textarea,
  .league-select
):focus{
  border-color:
    var(--fbb-theme-blue)!important;

  box-shadow:
    0 0 0 3px
    rgba(0,177,255,.12)!important;
}

body.fbb-prediction-visual-theme a{
  text-underline-offset:3px;
}

body.fbb-prediction-visual-theme
  main
  a:not(
    .btn,
    .cta-button,
    .prediction-card,
    .news-card,
    .offer-card,
    .fbb-ladder-fresh-card,
    .nav-link,
    .fbb-nav-link,
    .bottom-nav a
  ){
  color:var(--fbb-theme-blue);
}

body.fbb-prediction-visual-theme :focus-visible{
  outline:
    3px solid
    rgba(0,177,255,.50);

  outline-offset:
    3px;
}

body.fbb-prediction-visual-theme ::selection{
  background:
    rgba(0,177,255,.32);

  color:#ffffff;
}

body.fbb-prediction-visual-theme ::-webkit-scrollbar{
  width:11px;
  height:11px;
}

body.fbb-prediction-visual-theme ::-webkit-scrollbar-track{
  background:#101214;
}

body.fbb-prediction-visual-theme ::-webkit-scrollbar-thumb{
  border:
    3px solid
    #101214;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      var(--fbb-theme-blue),
      var(--fbb-theme-green)
    );
}

/*
 * Preserve canonical result/status colors.
 */
body.fbb-prediction-visual-theme
  .fbb-ladder-fresh-status.won{
  color:#062d1f!important;
  background:#00ff87!important;
  border-color:#00ff87!important;
}

body.fbb-prediction-visual-theme
  .fbb-ladder-fresh-status.lost{
  color:#ffffff!important;
  background:#dc3545!important;
  border-color:#ff5a68!important;
}

body.fbb-prediction-visual-theme
  .fbb-ladder-fresh-status.void{
  color:#201700!important;
  background:#ffc857!important;
  border-color:#ffd978!important;
}

@media (max-width:640px){
  body.fbb-prediction-visual-theme{
    font-size:15px;
  }

  body.fbb-prediction-visual-theme :is(
    .hero,
    .page-hero
  ){
    border-radius:18px!important;
  }

  body.fbb-prediction-visual-theme :is(
    .card,
    .prediction-card,
    .news-card,
    .offer-card,
    .stat-card,
    .news-frame,
    .daily-picks-card,
    .fbb-daily-slot-section,
    .fbb-daily-pick,
    .fbb-ladder-fresh-card,
    .market,
    .signal
  ){
    border-radius:15px!important;
  }

  body.fbb-prediction-visual-theme h1{
    letter-spacing:-.03em;
  }
}

@media (prefers-reduced-motion:reduce){
  body.fbb-prediction-visual-theme *,
  body.fbb-prediction-visual-theme *::before,
  body.fbb-prediction-visual-theme *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* FBB-PREDICTION-VISUAL-THEME-END */