/*
 SPORTS INTEL MOBILE APP V9
 Navigation architecture + mobile service completion.
*/
@media(max-width:720px){

:root{
 --si9-bg:#020a11;
 --si9-panel:#07141f;
 --si9-panel2:#0a1926;
 --si9-line:#18364d;
 --si9-text:#f4f8fb;
 --si9-muted:#7d94a7;
 --si9-blue:#1688ff;
 --si9-green:#37dd89;
 --si9-red:#ff414d;
 --si9-purple:#9471ff;
}

/* =========================================================
   BOTTOM NAV — final information architecture
   HOME = today's schedule
   LIVE = live-only
   AI PICKS = dedicated AI recommendation page
   SERVICES = full feature hub
   ========================================================= */
.si-mobile-nav{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  height:68px!important;
  background:rgba(2,10,17,.99)!important;
  border-top:1px solid #173149!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.28)!important;
}
.si-mobile-nav a{
  min-width:0!important;
  color:#7d94a7!important;
}
.si-mobile-nav a.active,
.si-mobile-nav a.active span{
  color:#32a1ff!important;
}
.si-mobile-nav i{
  font-size:18px!important;
}
.si-mobile-nav span{
  font-size:9px!important;
  font-weight:850!important;
}

/* =========================================================
   AI COMBO PAGE — make existing PC service usable on mobile
   ========================================================= */
body.si9-ai-page .page-head,
body.si9-performance-page .page-head,
body.si9-results-page .page-head{
  margin:8px 12px 10px!important;
  padding:13px!important;
  border:1px solid var(--si9-line)!important;
  border-radius:14px!important;
  background:#07141f!important;
}
body.si9-ai-page .page-head h1,
body.si9-performance-page .page-head h1,
body.si9-results-page .page-head h1{
  font-size:17px!important;
  color:#f4f8fb!important;
}
body.si9-ai-page .page-head p,
body.si9-performance-page .page-head p,
body.si9-results-page .page-head p{
  color:#7d94a7!important;
  font-size:9px!important;
}

/* generic PC cards/tables become mobile-safe */
body.si9-ai-page .card,
body.si9-performance-page .card,
body.si9-results-page .card,
body.si9-ai-page .panel2,
body.si9-performance-page .panel2,
body.si9-results-page .panel2{
  margin-left:12px!important;
  margin-right:12px!important;
  border:1px solid var(--si9-line)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#081824,#06121b)!important;
  box-shadow:none!important;
}
body.si9-ai-page table,
body.si9-performance-page table,
body.si9-results-page table{
  width:100%!important;
  min-width:0!important;
  table-layout:auto!important;
  font-size:9px!important;
}
body.si9-ai-page .table-wrap,
body.si9-performance-page .table-wrap,
body.si9-results-page .table-wrap{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* =========================================================
   SERVICES HUB
   ========================================================= */
.si9-services{
  width:100%;
  padding:10px 12px 92px;
}
.si9-services-head{
  padding:16px 14px;
  border:1px solid var(--si9-line);
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 0,rgba(22,136,255,.14),transparent 45%),
    #07141f;
}
.si9-services-head small{
  color:#46a8ff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.8px;
}
.si9-services-head h1{
  margin:5px 0 3px;
  color:#fff;
  font-size:22px;
  line-height:1.1;
}
.si9-services-head p{
  margin:0;
  color:#8096a8;
  font-size:10px;
  line-height:1.45;
}

.si9-service-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.si9-service-card{
  min-height:72px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  border:1px solid var(--si9-line);
  border-radius:14px;
  background:linear-gradient(145deg,#081824,#06121b);
  color:#f4f8fb;
  text-decoration:none;
}
.si9-service-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#0b2235;
  color:#49a9ff;
  font-size:18px;
  font-weight:950;
}
.si9-service-card.green .si9-service-icon{
  background:rgba(55,221,137,.09);
  color:#37dd89;
}
.si9-service-card.red .si9-service-icon{
  background:rgba(255,65,77,.09);
  color:#ff5964;
}
.si9-service-card.purple .si9-service-icon{
  background:rgba(148,113,255,.09);
  color:#a88cff;
}
.si9-service-card b{
  display:block;
  color:#f2f7fa;
  font-size:12px;
}
.si9-service-card small{
  display:block;
  margin-top:3px;
  color:#7890a3;
  font-size:8px;
  line-height:1.35;
}
.si9-service-card i{
  color:#7890a3;
  font-size:19px;
  font-style:normal;
  text-align:right;
}
.si9-service-note{
  margin-top:10px;
  padding:12px;
  border:1px solid #18364d;
  border-radius:13px;
  background:#06131e;
}
.si9-service-note b{
  color:#a9bbc8;
  font-size:10px;
}
.si9-service-note p{
  margin:5px 0 0;
  color:#71899c;
  font-size:8px;
  line-height:1.45;
}

/* =========================================================
   Page-specific empty states / buttons
   ========================================================= */
body.si9-ai-page button,
body.si9-ai-page .primary,
body.si9-ai-page .btn{
  min-height:38px!important;
  border-radius:10px!important;
}
body.si9-results-page select,
body.si9-performance-page select,
body.si9-ai-page select{
  max-width:100%!important;
  min-height:38px!important;
  border-radius:9px!important;
}

/* ensure no horizontal page overflow */
body.si9-ai-page,
body.si9-results-page,
body.si9-performance-page,
body.si9-services-page{
  overflow-x:hidden!important;
}

}
@media(min-width:721px){
 .si9-services{
   max-width:900px;
   margin:0 auto;
   padding:30px 20px;
 }
 .si9-service-grid{
   grid-template-columns:repeat(2,1fr);
 }
}