/*
 SPORTS INTEL MOBILE APP UI V7 FINAL REBUILD
 Rebuilds mobile match cards and detail hero to match the approved mockup.
 Existing desktop markup remains untouched.
*/

@media (max-width:720px){

:root{
  --si7-bg:#020a11;
  --si7-panel:#07131e;
  --si7-panel2:#0a1926;
  --si7-line:#18364d;
  --si7-text:#f4f8fb;
  --si7-muted:#7d94a7;
  --si7-blue:#1688ff;
  --si7-cyan:#42a7ff;
  --si7-green:#37dd89;
  --si7-red:#ff414d;
  --si7-amber:#efba4f;
}

/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */
html{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  background:var(--si7-bg)!important;
}
body{
  min-height:100vh!important;
  height:auto!important;
  max-height:none!important;
  position:static!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y pinch-zoom!important;
  background:
    radial-gradient(circle at 50% -100px,rgba(19,104,167,.16),transparent 430px),
    var(--si7-bg)!important;
  color:var(--si7-text)!important;
  padding-bottom:82px!important;
}
*,*:before,*:after{box-sizing:border-box!important}

/* V7 owns the match-list presentation */
.match-row{display:none!important}

/* Remove V3 overlays/pull UI */
.si-v3-skeleton,.si-refresh-indicator{
  display:none!important;
  pointer-events:none!important;
}

/* ---------------------------------------------------------
   APP HEADER
   --------------------------------------------------------- */
.si-app-header{
  height:58px!important;
  padding:0 14px!important;
  background:rgba(2,10,17,.99)!important;
  border-bottom:1px solid #142d40!important;
  box-shadow:none!important;
}
.si-app-logo strong{
  color:#fff!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:-.6px!important;
}
.si-app-logo strong em{color:var(--si7-blue)!important}
.si-app-logo small,.si-app-head-center small{color:#70889b!important}
.si-app-head-center b{color:#f3f7fa!important;font-size:12px!important}
.si-app-head-action,.si-app-back{
  width:36px!important;height:36px!important;
  border-radius:11px!important;
  border:1px solid #1a374e!important;
  background:#071722!important;
  color:#eaf2f7!important;
}

/* ---------------------------------------------------------
   TOP CONTROLS — aligned, compact, app-like
   --------------------------------------------------------- */
.pro-toolbar{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:10px 12px 10px!important;
  padding:12px!important;
  border:1px solid var(--si7-line)!important;
  border-radius:16px!important;
  background:#06131e!important;
}
.toolbar-main{width:100%!important;max-width:none!important;display:block!important}
.pro-date{
  width:100%!important;
  height:44px!important;
  margin:0 0 10px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 38px!important;
  align-items:center!important;
  border:1px solid #173b55!important;
  border-radius:12px!important;
  background:#071722!important;
}
.pro-date>a{
  width:34px!important;height:34px!important;margin:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #183b55!important;border-radius:9px!important;
  color:#8dc8f5!important;text-decoration:none!important;
}
.pro-date>div{text-align:center!important;min-width:0!important}
.pro-date b{color:#fff!important;font-size:15px!important;font-weight:950!important}
.pro-date em{color:#8fa5b7!important;font-size:9px!important;font-style:normal!important}
.pro-date small{display:none!important}

.pro-sport-tabs{
  width:100%!important;
  display:flex!important;
  gap:7px!important;
  padding:0!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.pro-sport-tabs::-webkit-scrollbar{display:none!important}
.pro-sport-tabs a{
  flex:0 0 64px!important;
  min-width:64px!important;
  height:48px!important;
  padding:0 7px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #16344b!important;border-radius:12px!important;
  background:#071722!important;color:#839aac!important;
  font-size:11px!important;font-weight:850!important;white-space:nowrap!important;
}
.pro-sport-tabs a.active{
  border-color:var(--si7-blue)!important;
  background:linear-gradient(145deg,#0d3a64,#0a2946)!important;
  color:#fff!important;
}
/* mockup is intentionally cleaner */
.filter-trigger,.filter-console{display:none!important}

.si-mobile-status-tabs{
  width:calc(100% - 24px)!important;
  margin:0 12px 12px!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  border:1px solid var(--si7-line)!important;
  border-radius:13px!important;
  background:#06131e!important;
}
.si-mobile-status-tabs a{
  min-width:0!important;height:40px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;
  color:#86a0b3!important;font-size:11px!important;font-weight:900!important;
}
.si-mobile-status-tabs a.active{background:#0d2a43!important;color:#fff!important}
.si-mobile-status-tabs a.live.active{
  background:linear-gradient(145deg,#d82b36,#ff424d)!important;
}

/* remove desktop dashboard KPI clutter from the app feed */
.metric{display:none!important}

/* ---------------------------------------------------------
   SCHEDULE
   --------------------------------------------------------- */
.schedule-zone,.country-zone{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:0 12px 15px!important;
}
.zone-head.live,
.schedule-zone .zone-head.live{
  position:relative!important;top:auto!important;z-index:1!important;
  min-height:42px!important;
  margin:0 0 8px!important;
  padding:10px 12px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  border:1px solid #173a52!important;border-radius:12px!important;
  background:#05121c!important;
}
.zone-head.live span{
  color:#ff525e!important;font-size:12px!important;font-weight:950!important;
}
.zone-head.live span i{
  width:8px!important;height:8px!important;border-radius:50%!important;
  background:#31e18a!important;box-shadow:0 0 10px rgba(49,225,138,.55)!important;
}
.zone-head.live small{color:#71899c!important;font-size:8px!important}
.time-group,.live-time-group{display:block!important;width:100%!important;margin:0 0 10px!important}
.time-cell{
  width:100%!important;
  min-height:32px!important;
  padding:6px 2px!important;
  display:flex!important;align-items:center!important;gap:7px!important;
}
.time-cell strong{color:#eef5f9!important;font-size:11px!important}
.time-cell small{color:#6f889b!important;font-size:8px!important}

/* ---------------------------------------------------------
   V7 COMPACT MATCH CARD
   Target: ~130-145px per LIVE match.
   --------------------------------------------------------- */
.si7-match-card{
  position:relative;
  width:100%;
  min-height:132px;
  margin:0 0 9px;
  padding:10px 11px;
  display:block;
  overflow:hidden;
  border:1px solid #18384f;
  border-radius:14px;
  background:linear-gradient(145deg,#081925,#05121b);
  color:var(--si7-text);
  text-decoration:none;
  box-shadow:none;
}
.si7-match-card.live{border-color:#1d6c52}
.si7-match-card.live:before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--si7-red);
}
.si7-card-head{
  min-height:22px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:7px;
}
.si7-card-head .left{
  min-width:0;
  display:flex;align-items:center;gap:6px;
}
.si7-live-badge{
  padding:3px 6px;
  border-radius:5px;
  background:var(--si7-red);
  color:#fff;
  font-size:8px;font-weight:950;line-height:1;
}
.si7-sport{
  color:#9eb0be;
  font-size:8px;font-weight:850;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.si7-progress{
  flex:0 0 auto;
  color:#ff5f69;
  font-size:9px;font-weight:900;
}
.si7-kickoff{
  color:#9eb0be;
  font-size:9px;font-weight:850;
}

.si7-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);
  align-items:center;
  gap:5px;
}
.si7-team{
  min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
}
.si7-team img{
  width:34px;height:34px;object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.25));
}
.si7-team b{
  width:100%;
  color:#eef5f9;
  font-size:10px;line-height:1.12;font-weight:900;
  white-space:normal;overflow-wrap:anywhere;
}
.si7-score{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.si7-score strong{
  color:#fff;
  font-size:25px;line-height:1;font-weight:950;letter-spacing:-1px;
  white-space:nowrap;
}
.si7-score small{
  margin-top:4px;
  color:#738da1;
  font-size:7px;font-weight:850;
}
.si7-match-card.live .si7-score small{color:#ff626d}

.si7-card-foot{
  margin-top:8px;
  padding-top:7px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:7px;
  border-top:1px solid #163149;
}
.si7-probs{
  min-width:0;
  display:flex;align-items:center;gap:6px;
  color:#7891a4;
  font-size:8px;font-weight:850;
}
.si7-probs b.home{color:#42e099}
.si7-probs b.away{color:#61b6ff}
.si7-pick{
  min-width:54px;
  text-align:center;
}
.si7-pick small,.si7-conf small{
  display:block;
  color:#6f889a;
  font-size:6px;font-weight:850;
}
.si7-pick b{
  display:block;margin-top:2px;
  color:#48a9ff;
  font-size:10px;font-weight:950;
}
.si7-conf{
  min-width:42px;text-align:right;
}
.si7-conf b{
  color:#37dd89;
  font-size:11px;font-weight:950;
}

/* ---------------------------------------------------------
   V7 DETAIL HERO — exact visual structure
   --------------------------------------------------------- */
.match-hero2 .match-summary{display:none!important}
.si7-detail-hero{
  position:relative;
  width:100%;
  margin:4px 0 10px;
  padding:15px 12px 16px;
  overflow:hidden;
  border:1px solid #18384f;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 0,rgba(20,136,255,.13),transparent 48%),
    linear-gradient(145deg,#071722,#041019);
}
.si7-detail-crumb{
  margin-bottom:13px;
  text-align:center;
  color:#7f96a9;
  font-size:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.si7-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);
  align-items:center;
  gap:6px;
}
.si7-detail-team{
  min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;text-align:center;
}
.si7-detail-team img{
  width:62px;height:62px;object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.28));
}
.si7-detail-team b{
  width:100%;
  color:#f5f8fb;
  font-size:12px;line-height:1.15;font-weight:900;
  white-space:normal;overflow-wrap:anywhere;
}
.si7-detail-center{
  width:100px;min-width:100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.si7-detail-center strong{
  color:#fff;
  font-size:35px;line-height:1;font-weight:950;letter-spacing:-1.5px;
  white-space:nowrap;
}
.si7-detail-center em{
  margin-top:7px;
  padding:4px 7px;
  border-radius:6px;
  background:rgba(255,65,77,.12);
  color:#ff626d;
  font-size:8px;font-style:normal;font-weight:950;
}
.si7-detail-center small{
  margin-top:5px;
  color:#7f96a9;
  font-size:7px;
}

/* ---------------------------------------------------------
   DETAIL ANALYSIS COLORS
   --------------------------------------------------------- */
.detail-page{
  width:auto!important;max-width:none!important;margin:0!important;
  padding:0 12px 90px!important;
}
.probability-card,.sport-analysis-card,.detail-page .panel2{
  border:1px solid #18384f!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#081824,#06121b)!important;
  box-shadow:none!important;
}
.probability-card{margin-top:0!important;padding:15px!important}
.probability-card h3{color:#c7d5df!important;font-size:12px!important}
.probability-card h3 small{color:#6f8799!important}
.probability-triple{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
.probability-triple>div{
  min-width:0!important;padding:12px 5px!important;
  border:1px solid #17384f!important;border-radius:10px!important;
  background:#081824!important;
}
.probability-triple>div.si-prob-top{
  border-color:var(--si7-blue)!important;
  background:linear-gradient(145deg,#0d2f4e,#091c2d)!important;
}
.probability-triple span{color:#7f96a9!important;font-size:8px!important}
.probability-triple b{color:#eef5fa!important;font-size:21px!important}
.probability-triple>div:first-child b{color:#42e099!important}
.conf-line span{color:#7891a5!important}
.conf-line b{color:#91a7b9!important}

.si-match-tabs{
  position:sticky!important;
  top:calc(58px + env(safe-area-inset-top))!important;
  z-index:80!important;
  width:100%!important;
  margin:10px 0!important;padding:4px!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border:1px solid #18384f!important;border-radius:12px!important;
  background:rgba(3,11,18,.98)!important;
}
.si-match-tabs button{
  min-width:0!important;height:39px!important;border-radius:9px!important;
  color:#8199ab!important;font-size:10px!important;font-weight:900!important;
}
.si-match-tabs button.active{background:var(--si7-blue)!important;color:#fff!important}

.sport-analysis-card{margin-top:10px!important;padding:14px 12px!important}
.sport-analysis-head h2{color:#f3f7fa!important;font-size:17px!important}
.sport-analysis-head p{color:#6f8799!important;font-size:9px!important}
.sport-model-chip{color:#5ab3ff!important}
.sport-value-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  margin-top:12px!important;overflow:hidden!important;
  border:1px solid #18384f!important;border-radius:12px!important;
}
.sport-value-strip>div{
  min-width:0!important;padding:11px 4px!important;text-align:center!important;
  background:#071722!important;border-right:1px solid #18384f!important;
}
.sport-value-strip>div:nth-child(3){border-right:0!important}
.sport-value-strip>div:nth-child(n+4){display:none!important}
.sport-value-strip small{color:#738b9d!important;font-size:7px!important}
.sport-value-strip b{color:#f2f7fb!important;font-size:14px!important}
.sport-value-strip>div:first-child b{color:#48a9ff!important}
.sport-value-strip>div:nth-child(3) b{color:var(--si7-green)!important}

/* bottom nav */
.si-mobile-nav{
  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{color:#7c93a5!important}
.si-mobile-nav a.active,.si-mobile-nav a.active span{color:#32a1ff!important}

/* narrow phone lock */
@media(max-width:390px){
  .si7-main{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);gap:3px}
  .si7-score strong{font-size:22px}
  .si7-team img{width:30px;height:30px}
  .si7-team b{font-size:9px}
  .si7-detail-grid{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);gap:3px}
  .si7-detail-center{width:78px;min-width:78px}
  .si7-detail-center strong{font-size:29px}
  .si7-detail-team img{width:49px;height:49px}
  .si7-detail-team b{font-size:10px}
}

}

/* Desktop is intentionally untouched */
@media(min-width:721px){
  .si7-match-card,.si7-detail-hero{display:none!important}
}