*{box-sizing:border-box}

  :root{
    --index-box-bg:var(--palette-main-bg);
    --index-page-bg:#EEF0F1;
    --index-shadow-raised:0 5px 12px rgba(53, 63, 72, 0.22);
    --index-shadow-soft:0 3px 7px rgba(53, 63, 72, 0.18);
    --index-shadow-active:0 2px 5px rgba(53, 63, 72, 0.16);
    --index-shadow-recessed:inset 2px 2px 6px rgba(124, 132, 140, 0.54), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
    --index-divider-color:rgba(74, 74, 74, 0.12);
    --index-match-hover-bg:#E7E9EA;
    --index-button-hover-filter:brightness(.94);
    --index-switch-hover-bg:rgba(74, 74, 74, 0.08);
  }

  body{
    margin:0;
    background:var(--index-page-bg);
    color:var(--palette-main-text);
    font-family:var(--font-app);
    min-height:100vh;
  }

  .app-shell{
    display:flex;
    justify-content:center;
    padding:var(--app-page-padding-top) var(--app-page-padding-x) var(--app-page-padding-bottom);
  }

  .app{
    width:100%;
    max-width:var(--app-page-max-width);
  }

  .index-layout{
    display:grid;
    grid-template-columns:minmax(170px,200px) minmax(0,1fr) minmax(330px,400px);
    gap:var(--app-box-gap);
    align-items:start;
  }

  .matches-column{
    min-width:0;
  }

  .index-panel-menu{
    display:none;
  }

  .index-panel-close{
    display:none;
  }

  .index-side-panel{
    min-height:calc(100vh - 68px);
    background:var(--index-box-bg);
    border:none;
    border-radius:18px;
    box-shadow:var(--index-shadow-raised);
  }

  .league-filter-panel{
    padding:14px;
  }

  .best-bet-panel{
    padding:18px;
  }

  .best-pick-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }

  .best-pick-title{
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .best-pick-date{
    flex:0 0 auto;
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
  }

  .best-pick-body{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .best-pick-match{
    color:var(--palette-main-text);
    font-size:18px;
    font-weight:800;
    line-height:1.25;
  }

  .best-pick-league{
    margin-top:6px;
    color:var(--palette-dark-gray);
    font-size:12px;
    font-weight:600;
    line-height:1.35;
  }

  .best-pick-market{
    padding:16px 0;
    border-top:1px solid var(--index-divider-color);
    border-bottom:1px solid var(--index-divider-color);
  }

  .best-pick-label{
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .best-pick-option{
    margin-top:8px;
    color:var(--palette-orange);
    font-size:20px;
    font-weight:800;
    line-height:1.18;
  }

  .best-pick-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .best-pick-stat span{
    display:block;
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .best-pick-stat strong{
    display:block;
    margin-top:6px;
    color:var(--palette-main-text);
    font-size:22px;
    font-weight:800;
    line-height:1;
  }

  .best-pick-action{
    width:100%;
  }

  .best-pick-empty{
    padding:2px 0;
  }

  .best-pick-empty-title{
    color:var(--palette-main-text);
    font-size:16px;
    font-weight:800;
  }

  .best-pick-empty p{
    margin:8px 0 0;
    color:var(--palette-dark-gray);
    font-size:13px;
    line-height:1.5;
  }

  .league-filter-title{
    margin-bottom:12px;
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .league-filter-search{
    margin-bottom:12px;
  }

  .league-filter-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .league-filter-btn{
    width:100%;
    min-height:42px;
    border:0;
    border-radius:var(--radius-md);
    padding:8px 10px;
    background:var(--index-box-bg);
    color:var(--palette-charcoal);
    box-shadow:var(--index-shadow-soft);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font:600 12px/1.2 var(--font-app);
    text-align:left;
    transition:box-shadow .18s ease, color .18s ease, filter .22s ease;
  }

  .league-filter-btn:hover,
  .league-filter-btn:focus-visible{
    color:var(--palette-main-text);
    filter:var(--index-button-hover-filter);
    box-shadow:var(--index-shadow-raised);
  }

  .league-filter-btn.is-active{
    color:var(--palette-orange);
    box-shadow:var(--index-shadow-active);
  }

  .league-filter-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .league-filter-icons,
  .league-header-icons{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
  }

  .league-filter-icons{
    min-width:42px;
  }

  .league-country-flag{
    width:16px;
    height:16px;
    border-radius:var(--radius-pill);
    object-fit:cover;
  }

  .league-logo,
  .league-filter-all-dot{
    width:20px;
    height:20px;
    flex:0 0 auto;
  }

  .league-logo{
    object-fit:contain;
  }

  .league-filter-all-dot{
    border-radius:var(--radius-pill);
    background:var(--palette-orange);
    box-shadow:var(--index-shadow-soft);
  }

  .league-filter-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .league-filter-count{
    flex:0 0 auto;
    color:var(--palette-dark-gray);
    font-size:11px;
    font-weight:700;
  }

  .league-filter-muted{
    padding:8px 0;
  }

  .league-filter-search-loading .app-skeleton-pill{
    height:34px;
  }

  .league-filter-skeleton-btn{
    cursor:default;
    pointer-events:none;
  }

  .league-filter-skeleton-btn .app-skeleton-line{
    min-width:0;
  }

  .league-filter-skeleton-flag,
  .league-filter-skeleton-logo,
  .index-loading-flag,
  .index-loading-logo{
    width:18px;
    height:18px;
  }

  .index-panel-toggle{
    min-width:0;
    min-height:42px;
    border:0;
    border-radius:var(--radius-md);
    padding:0 14px;
    background:var(--index-box-bg);
    color:var(--palette-charcoal);
    box-shadow:var(--index-shadow-soft);
    cursor:pointer;
    font:800 11px/1 var(--font-app);
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:box-shadow .18s ease, color .18s ease, filter .22s ease;
  }

  .index-panel-toggle:hover,
  .index-panel-toggle:focus-visible{
    color:var(--palette-main-text);
    filter:var(--index-button-hover-filter);
    box-shadow:var(--index-shadow-raised);
  }

  .index-panel-toggle.is-active{
    color:var(--palette-orange);
    box-shadow:var(--index-shadow-active);
  }

  .page-header{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:var(--app-box-gap);
    margin-bottom:var(--app-header-box-gap);
    text-align:center;
  }

  .page-copy{
    width:100%;
  }

  .eyebrow,
  .match-list-heading{
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--palette-dark-gray);
  }

  .eyebrow{
    margin-bottom:10px;
    font-size:var(--app-page-heading-size);
    text-align:center;
  }

  h1{
    margin:0;
    font-size:30px;
    font-weight:700;
    line-height:1.05;
  }

  .page-subtitle{
    margin:10px auto 0;
    max-width:620px;
    color:var(--palette-dark-gray);
    font-size:var(--app-page-subheading-size);
    line-height:1.5;
  }

  .control-panel{
    display:grid;
    grid-template-columns:minmax(170px, 200px) minmax(260px, 1fr) minmax(210px, 240px);
    align-items:end;
    gap:var(--app-box-gap);
    padding:16px 18px;
    background:var(--index-box-bg);
    border:none;
    border-radius:18px;
    box-shadow:var(--index-shadow-raised);
    margin-bottom:0;
  }

  .control-group{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .control-search{
    min-width:0;
  }

  .control-group label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
  }

  .date-input{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    min-height:46px;
    border:none;
    background:var(--index-box-bg);
    color:var(--palette-main-text);
    border-radius:var(--radius-md);
    padding:11px 13px;
    font:600 13px/1.2 var(--font-app);
    outline:none;
    box-shadow:var(--index-shadow-recessed);
  }

  .date-input::-webkit-date-and-time-value{
    min-height:1.2em;
    text-align:left;
  }

  .date-input::-webkit-calendar-picker-indicator{
    opacity:.72;
  }

  .sport-switch-group{
    min-width:0;
  }

  .sport-switch{
    position:relative;
    width:100%;
    min-height:46px;
    padding:4px;
    border-radius:var(--radius-md);
    background:var(--index-box-bg);
    box-shadow:var(--index-shadow-recessed);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }

  .sport-switch::before{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    bottom:4px;
    width:calc((100% - 12px) / 2);
    border-radius:var(--radius-md);
    background:var(--index-box-bg);
    box-shadow:var(--index-shadow-soft);
    transition:transform .28s cubic-bezier(.2, .8, .2, 1);
  }

  .sport-switch[data-active-sport="tennis"]::before{
    transform:translateX(calc(100% + 4px));
  }

  .sport-switch-btn{
    position:relative;
    z-index:1;
    border:0;
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--palette-dark-gray);
    cursor:pointer;
    font:700 12px/1 var(--font-app);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transition:box-shadow .18s ease, color .18s ease, background-color .22s ease, filter .22s ease;
  }

  .sport-switch-btn:hover,
  .sport-switch-btn:focus-visible{
    background:var(--index-switch-hover-bg);
    color:var(--palette-main-text);
  }

  .sport-switch-btn.is-active{
    color:var(--palette-orange);
  }

  .sport-switch-icon{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .22s ease;
  }

  .sport-switch-btn.is-active .sport-switch-icon{
    transform:scale(1.08);
  }

  .btn{
    border:none;
    border-radius:var(--radius-md);
    padding:11px 14px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--index-shadow-soft);
    transition:box-shadow .18s ease, filter .22s ease, background-color .22s ease;
  }

  .btn:hover,
  .btn:focus-visible{
    filter:var(--index-button-hover-filter);
    box-shadow:var(--index-shadow-raised);
  }

  .btn:active{
    box-shadow:var(--index-shadow-active);
  }

  .btn-profile{
    background:var(--palette-orange);
    color:#ffffff;
  }

  .btn-ritz{
    background:var(--palette-charcoal);
    color:#ffffff;
    border:none;
  }

  .page-meta{
    margin:var(--app-header-box-gap) 0 var(--app-header-box-gap);
  }

  .match-list-heading{
    margin:0;
    font-size:var(--app-page-heading-size);
    text-align:center;
  }

  .content-state{
    color:var(--palette-dark-gray);
    font-size:14px;
  }

  .league{
    background:var(--index-box-bg);
    border:none;
    border-radius:18px;
    margin-bottom:var(--app-box-gap);
    box-shadow:var(--index-shadow-raised);
    overflow:hidden;
  }

  .league-header{
    padding:14px 18px;
    background:transparent;
    font-weight:700;
    display:flex;
    gap:10px;
    align-items:center;
    border:none;
    border-bottom:1px solid var(--index-divider-color);
  }

  .league-header-icons{
    gap:6px;
  }

  .match{
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr) 205px;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    cursor:default;
    transition:background-color .24s ease;
  }

  .index-match-loading .league-header .app-loading-spinner{
    margin-left:auto;
  }

  .index-match-skeleton-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr) 205px;
    align-items:center;
    gap:14px;
    padding:14px 18px;
  }

  .index-match-skeleton-row + .index-match-skeleton-row{
    border-top:1px solid var(--index-divider-color);
  }

  .index-match-skeleton-team{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .index-match-skeleton-team.right{
    justify-content:flex-end;
  }

  .index-match-skeleton-time{
    max-width:76px;
    justify-self:center;
  }

  .index-match-skeleton-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .best-pick-loading .app-skeleton-line{
    height:12px;
  }

  .best-pick-loading-gap,
  .best-pick-loading-option{
    margin-top:10px;
  }

  .match + .match{
    border-top:1px solid var(--index-divider-color);
  }

  .match:hover{
    background:var(--index-match-hover-bg);
    box-shadow:none;
  }

  .team{
    min-width:0;
    display:flex;
    gap:10px;
    align-items:center;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
    transition:color .18s ease;
  }

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

  .team span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .team img{
    width:28px;
    height:28px;
    object-fit:contain;
    flex:0 0 auto;
  }

  .center{
    text-align:center;
    color:var(--palette-blue);
    font-weight:700;
    font-size:13px;
    transition:color .18s ease;
  }

  .time{
    color:var(--palette-dark-gray);
    font-size:12px;
    font-weight:600;
    transition:color .18s ease;
  }

  .actions{
    display:flex;
    justify-content:flex-end;
  }

  .actions-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    justify-content:flex-end;
  }

  .btn{
    padding:10px 12px;
  }

  .match .btn{
    width:100%;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
    padding:9px 10px;
    font-size:11px;
    text-align:center;
    white-space:nowrap;
    transition:background-color .22s ease, color .22s ease, filter .22s ease;
  }

  .match .btn:hover,
  .match .btn:focus-visible,
  .match .btn:active{
    filter:var(--index-button-hover-filter);
    box-shadow:none;
  }

  .muted{
    color:var(--palette-dark-gray);
    padding:20px 4px;
  }

  @media (max-width:980px){
    body.is-index-panel-open{
      overflow:hidden;
    }

    .index-layout{
      grid-template-columns:1fr;
    }

    .index-panel-menu{
      order:1;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:var(--app-box-gap);
    }

    .index-panel-close{
      position:fixed;
      top:max(14px, env(safe-area-inset-top));
      left:var(--app-page-padding-x);
      z-index:70;
      width:42px;
      height:42px;
      border:0;
      border-radius:var(--radius-pill);
      background:var(--index-box-bg);
      color:var(--palette-charcoal);
      box-shadow:var(--index-shadow-raised);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      font:800 22px/1 var(--font-app);
      transition:filter .22s ease, color .18s ease;
    }

    .index-panel-close:hover,
    .index-panel-close:focus-visible{
      color:var(--palette-main-text);
      filter:var(--index-button-hover-filter);
    }

    body[data-index-responsive-panel="leagues"] .index-panel-close,
    body[data-index-responsive-panel="best-picks"] .index-panel-close{
      display:inline-flex;
    }

    .matches-column{
      order:3;
    }

    .index-side-panel{
      position:fixed;
      inset:0;
      z-index:60;
      display:block;
      min-height:0;
      max-height:none;
      overflow:auto;
      border-radius:0;
      padding:72px var(--app-page-padding-x) 28px;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:transform .28s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility .18s ease;
    }

    .league-filter-panel{
      transform:translateX(-100%);
    }

    .best-bet-panel{
      transform:translateX(100%);
    }

    .index-side-panel.is-responsive-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateX(0);
    }

    .league-filter-panel{
      min-height:0;
    }

    .league-filter-list{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    }

    .page-header{
      flex-direction:column;
      align-items:stretch;
    }

    .control-panel{
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      align-items:end;
    }

    .control-date{
      grid-column:1;
      grid-row:1;
    }

    .sport-switch-group{
      grid-column:2;
      grid-row:1;
    }

    .control-search{
      grid-column:1 / -1;
      grid-row:2;
    }

    .match{
      grid-template-columns:minmax(0, 1fr) minmax(58px, auto) minmax(0, 1fr);
      grid-template-areas:
        "home center away"
        "actions actions actions";
      gap:12px 10px;
      padding:13px 14px;
    }

    .index-match-skeleton-row{
      grid-template-columns:minmax(0, 1fr) minmax(58px, auto) minmax(0, 1fr);
      grid-template-areas:
        "home center away"
        "actions actions actions";
      gap:12px 10px;
      padding:13px 14px;
    }

    .index-match-skeleton-team:first-child{
      grid-area:home;
    }

    .index-match-skeleton-time{
      grid-area:center;
      max-width:none;
    }

    .index-match-skeleton-team.right{
      grid-area:away;
    }

    .index-match-skeleton-actions{
      grid-area:actions;
    }

    .match > .team:first-child{
      grid-area:home;
    }

    .match > .center{
      grid-area:center;
    }

    .match > .team.right{
      grid-area:away;
    }

    .match > .actions{
      grid-area:actions;
    }

    .center{
      text-align:center;
    }

    .actions,
    .actions-row{
      justify-content:center;
    }
  }

  @media (max-width:640px){
    h1{
      font-size:25px;
    }

    .eyebrow,
    .page-subtitle{
      line-height:1.45;
    }

    .eyebrow{
      margin-bottom:7px;
    }

    .page-subtitle{
      margin-top:7px;
    }

    .control-panel{
      grid-template-columns:minmax(118px, .9fr) minmax(0, 1.1fr);
      padding:14px;
      border-radius:var(--radius-lg);
    }

    .control-date,
    .sport-switch-group{
      grid-row:1;
    }

    .control-date{
      grid-column:1;
    }

    .sport-switch-group{
      grid-column:2;
    }

    .control-search{
      grid-column:1 / -1;
      grid-row:2;
    }

    .match{
      grid-template-columns:minmax(0, 1fr) 54px minmax(0, 1fr);
      gap:11px 8px;
      padding:12px;
    }

    .index-match-skeleton-row{
      grid-template-columns:minmax(0, 1fr) 54px minmax(0, 1fr);
      gap:11px 8px;
      padding:12px;
    }

    .index-match-skeleton-team{
      gap:7px;
    }

    .index-match-skeleton-team .app-skeleton-circle{
      width:24px;
      height:24px;
    }

    .league-header{
      padding:12px 14px;
      font-size:12px;
    }

    .team{
      gap:7px;
      font-size:12px;
    }

    .team img{
      width:24px;
      height:24px;
    }

    .center{
      font-size:12px;
    }

    .time{
      font-size:11px;
    }

    .match .actions-row{
      width:100%;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .match .btn{
      width:100%;
      padding:9px 10px;
    }
  }