:root{
      --jackpot-gradient: linear-gradient(135deg, #00b894 0%, #00d2a0 100%);
      --jackpot-accent: #00b894;
      --jackpot-accent-light: #55efc4;

      --section-spacing: clamp(4rem, 8vw, 8rem);
      --content-max-width: 1200px;
    }

    /* HERO */
    .jackpot-hero{
      position: relative;
      padding: clamp(8rem, 15vw, 12rem) 0 clamp(5.5rem, 10vw, 7.5rem);
      background: var(--bg-primary);
      overflow: hidden;
    }
    .jackpot-hero::before{
      content:'';
      position:absolute;
      inset:0;
      background: radial-gradient(circle at 30% 20%, rgba(0, 184, 148, 0.12) 0%, transparent 50%);
    }
    .hero-content{
      position: relative;
      z-index: 2;
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: 0 var(--space-6);
      text-align: center;
    }
    .hero-badge{
      display:inline-flex;
      align-items:center;
      padding: var(--space-2) var(--space-4);
      background: rgba(0, 184, 148, 0.10);
      border: 1px solid rgba(0, 184, 148, 0.30);
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      font-weight: 800;
      color: var(--jackpot-accent);
      margin-bottom: var(--space-6);
      gap: .5rem;
    }
    .hero-title{
      font-family:'Syne', sans-serif;
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: var(--space-5);
      background: var(--jackpot-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-subtitle{
      font-size: clamp(1.125rem, 2.5vw, 1.5rem);
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 900px;
      margin: 0 auto var(--space-7);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap: var(--space-3);
      justify-content:center;
    }
    .hero-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-6);
      border-radius: var(--radius-xl);
      font-weight: 900;
      text-decoration:none;
      border: 1px solid rgba(0, 184, 148, 0.25);
      transition: all .25s ease;
    }
    .hero-btn.primary{ background: var(--jackpot-gradient); color:#fff; border:none; }
    .hero-btn.secondary{ background: rgba(0,184,148,.10); color: var(--jackpot-accent); }
    .hero-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 12px 34px -18px rgba(0, 184, 148, 0.55);
    }

    /* OVERVIEW */
    .overview{
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: calc(var(--section-spacing) - 2rem) var(--space-6) 0;
    }
    .overview-grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-5);
    }
    .overview-card{
      grid-column: span 4;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-2xl);
      padding: var(--space-6);
      position:relative;
      overflow:hidden;
    }
    .overview-card::before{
      content:'';
      position:absolute;
      inset:-40px;
      background: radial-gradient(circle at 20% 20%, rgba(0, 184, 148, 0.12) 0%, transparent 45%);
      pointer-events:none;
    }
    .overview-card > *{ position:relative; z-index:2; }
    .overview-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.35rem .6rem;
      border-radius:999px;
      background: rgba(0,184,148,.10);
      border: 1px solid rgba(0,184,148,.25);
      color: var(--jackpot-accent);
      font-weight: 900;
      font-size: .8rem;
      margin-bottom: .6rem;
    }
    .overview-kpi{
      font-family:"JetBrains Mono", monospace;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 900;
      color: var(--text-primary);
      margin-bottom: var(--space-2);
    }
    .overview-label{
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* PANELS */
    .content-wrap{
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: var(--section-spacing) var(--space-6);
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: var(--space-8);
      align-items:start;
    }
    .panel{
      background: var(--bg-secondary);
      border: 2px solid var(--border-subtle);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
    }
    .panel-title{
      font-family:'Syne',sans-serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 900;
      margin-bottom: var(--space-4);
      color: var(--text-primary);
    }
    .panel-text{
      color: var(--text-secondary);
      line-height: 1.8;
      font-size: var(--text-lg);
      margin-bottom: var(--space-5);
    }

    /* ✅ FEATURES LIST (NO OVERLAP) */
    .jackpot-features{ list-style:none; padding:0; margin:0; }
    .jackpot-features li{
      display:flex;
      align-items:flex-start;
      gap: var(--space-3, 0.75rem);
      padding-left: 0 !important;
      margin-bottom: var(--space-3, 0.75rem);
      font-size: var(--text-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .jackpot-features li::before{
      content:"✓";
      position: static !important;
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: var(--jackpot-gradient);
      color:#fff;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 900;
      margin-top: .15rem;
    }

    .note{
      font-size: .95rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin: 0;
      padding: .85rem 1rem;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(0,184,148,.22);
      background: rgba(0,184,148,.08);
    }

    /* PREDICTIONS */
    .predictions-section{
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: 0 var(--space-6) var(--section-spacing);
    }
    .predictions-head{
      display:flex;
      flex-wrap:wrap;
      gap: var(--space-4);
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom: var(--space-6);
    }
    .predictions-title{
      font-family:'Syne',sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 900;
      margin: 0;
      color: var(--text-primary);
    }
    .predictions-sub{
      margin: .5rem 0 0;
      color: var(--text-secondary);
      line-height: 1.7;
      max-width: 820px;
    }
    .updated-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.5rem .8rem;
      border-radius: 999px;
      background: rgba(0,184,148,.10);
      border: 1px solid rgba(0,184,148,.25);
      color: var(--jackpot-accent);
      font-weight: 900;
      white-space:nowrap;
    }

    /* ERROR MESSAGE */
    .error-message {
      background: rgba(255, 77, 77, 0.1);
      border: 1px solid rgba(255, 77, 77, 0.3);
      border-radius: var(--radius-xl);
      padding: 2rem;
      text-align: center;
      margin: 2rem 0;
      grid-column: 1 / -1;
    }
    
    .error-message h3 {
      color: #ff4d4d;
      margin-bottom: 0.5rem;
    }
    
    .error-message p {
      color: var(--text-secondary);
      margin: 0;
    }

    /* ===== ULTRA COMPACT PRO MATCH CARDS ===== */
    .matches-grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }

    .match-card{
      grid-column: span 6;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 18px;
      padding: 14px;
      position: relative;
      overflow: hidden;
      transition: all .25s ease;
    }

    .match-card::before{
      content:'';
      position:absolute;
      left:0; top:0;
      width:100%;
      height:3px;
      background: var(--jackpot-gradient);
      opacity:.9;
    }

    .match-card::after{
      content:'';
      position:absolute;
      inset:-70px;
      background: radial-gradient(circle at 20% 20%, rgba(0, 184, 148, 0.08) 0%, transparent 44%);
      pointer-events:none;
    }

    .match-card > *{ position:relative; z-index:2; }

    .match-card:hover{
      transform: translateY(-5px);
      border-color: rgba(0,184,148,.45);
      box-shadow: 0 16px 45px -22px rgba(0,184,148,.45);
    }

    .match-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .match-left{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap:wrap;
    }

    .match-no{
      font-family:"JetBrains Mono", monospace;
      font-weight: 900;
      color:#fff;
      background: var(--jackpot-gradient);
      border-radius: 999px;
      padding: .26rem .52rem;
      font-size: .72rem;
      letter-spacing:.01em;
      white-space: nowrap;
    }

    .match-league{
      color: var(--text-secondary);
      font-weight: 900;
      font-size: .76rem;
      white-space: nowrap;
    }

    /* ✅ TEAMS (SHOW FULL NAMES ON DESKTOP + MOBILE) */
    .match-teams{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items:center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .team{
      min-width:0;
      display:flex;
      align-items:center;
    }

    .team.team-home{
      justify-content:flex-end;
      text-align:right;
    }

    .team.team-away{
      justify-content:flex-start;
      text-align:left;
    }

    .team-name{
      font-family:'Syne',sans-serif;
      font-weight: 900;
      font-size: clamp(.92rem, 1.25vw, 1.12rem);
      line-height: 1.12;
      color: var(--text-primary);
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      word-break: normal;
      overflow-wrap: break-word;
      hyphens: none;
      max-width: 100%;
    }

    .vs{
      font-family:"JetBrains Mono", monospace;
      font-weight: 900;
      font-size: .64rem;
      letter-spacing: .06em;
      padding: .22rem .42rem;
      border-radius: 999px;
      color: var(--jackpot-accent);
      background: rgba(0,184,148,.10);
      border: 1px solid rgba(0,184,148,.18);
      white-space: nowrap;
    }

    .match-bottom{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 8px;
    }

    .pick-box, .conf-box{
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      padding: 10px;
    }

    .pick-label, .conf-label{
      font-weight: 900;
      color: var(--text-secondary);
      font-size: .66rem;
      letter-spacing:.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .pick-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 34px;
      border-radius: 12px;
      background: var(--jackpot-gradient);
      color:#fff;
      font-family:"JetBrains Mono", monospace;
      font-weight: 900;
      font-size: 1.02rem;
      box-shadow: 0 10px 22px -18px rgba(0,184,148,.75);
    }

    .conf-meter{
      width:100%;
      height: 8px;
      border-radius: 999px;
      background: rgba(0,184,148,.10);
      border: 1px solid rgba(0,184,148,.18);
      overflow:hidden;
    }

    .conf-meter span{
      display:block;
      height:100%;
      background: var(--jackpot-gradient);
      width: 50%;
      border-radius: 999px;
    }

    .match-card.is-low .conf-meter span{ width: 35%; }
    .match-card.is-medium .conf-meter span{ width: 60%; }
    .match-card.is-high .conf-meter span{ width: 85%; }

    .conf-text{
      margin-top: 6px;
      color: var(--text-secondary);
      font-weight: 900;
      font-size: .76rem;
    }

    .match-analysis{
      margin: 0;
      color: var(--text-secondary);
      font-size: .84rem;
      line-height: 1.55;
    }

    /* SCORE DISPLAY */
    .match-score {
      font-family: "JetBrains Mono", monospace;
      font-weight: 900;
      font-size: 0.8rem;
      color: var(--jackpot-accent);
      background: rgba(0, 184, 148, 0.1);
      padding: 0.2rem 0.5rem;
      border-radius: 6px;
      border: 1px solid rgba(0, 184, 148, 0.2);
    }

    @media (max-width: 980px){
      .match-card{ grid-column: span 12; }
      .content-wrap{ grid-template-columns: 1fr; }
      .overview-card{ grid-column: span 12; }
    }

    @media (max-width: 560px){
      .matches-grid{ gap: 12px; }

      .match-card{
        padding: 12px;
        border-radius: 16px;
      }

      .match-teams{
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 6px;
      }

      .vs{
        font-size: .60rem;
        padding: .2rem .36rem;
      }

      .team-name{
        font-size: .88rem;
        line-height: 1.12;
      }

      .match-bottom{
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 8px;
      }

      .pick-box, .conf-box{ padding: 10px; }
      .match-analysis{ font-size: .82rem; }
    }

    /* INFO */
    .info-section{
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: var(--section-spacing) var(--space-6);
      background: var(--bg-secondary);
      border-radius: var(--radius-2xl);
      border: 1px solid var(--border-subtle);
    }
    .info-content{ max-width: 900px; margin: 0 auto; }
    .info-title{
      font-family:'Syne', sans-serif;
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: var(--space-5);
      text-align: center;
    }
    .info-text{
      font-size: var(--text-lg);
      line-height: 1.8;
      color: var(--text-secondary);
      margin-bottom: var(--space-5);
    }
    .info-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-5);
      margin-top: var(--space-8);
    }
    .info-card{
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
    }
    .info-card-title{
      font-family:'Syne', sans-serif;
      font-size: var(--text-xl);
      font-weight: 900;
      margin-bottom: var(--space-3);
      color: var(--jackpot-accent);
    }
    .info-card-text{
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--text-secondary);
    }

    html { scroll-behavior: smooth; }
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-secondary); }
    ::-webkit-scrollbar-thumb { background: var(--jackpot-gradient); border-radius: 5px; }