/*
 SPORTS INTEL MOBILE APP UI V2
 App shell / sticky detail navigation / mobile interaction layer
 Desktop intentionally untouched.
*/

@media(max-width:720px){

:root{
 --app-bg:#030b12;
 --app-panel:#07131e;
 --app-panel2:#0a1824;
 --app-border:#172c3d;
 --app-text:#f4f8fc;
 --app-muted:#7990a4;
 --app-blue:#1688ff;
 --app-blue2:#0877e7;
 --app-red:#ff3d49;
 --app-green:#35dc88;
 --app-amber:#f0bc52;
}

/* ==========================================================
   APP HEADER
   ========================================================== */

body{
 padding-top:66px!important;
}

.si-app-header{
 position:fixed;
 left:0;
 right:0;
 top:0;
 height:58px;
 z-index:9997;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:
   max(7px,env(safe-area-inset-top))
   14px
   7px;
 background:rgba(3,11,18,.94);
 border-bottom:1px solid rgba(33,57,75,.82);
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}

.si-app-brand{
 min-width:0;
 display:flex;
 align-items:center;
 gap:9px;
 text-decoration:none;
 color:#fff;
}

.si-app-back{
 width:34px;
 height:34px;
 flex:0 0 34px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:10px;
 color:#fff;
 border:1px solid #1a3041;
 background:#071521;
 text-decoration:none;
 font-size:21px;
}

.si-app-logo{
 min-width:0;
}

.si-app-logo strong{
 display:block;
 font-size:17px;
 line-height:18px;
 font-weight:950;
 letter-spacing:-.4px;
 white-space:nowrap;
}

.si-app-logo strong em{
 color:var(--app-blue);
 font-style:normal;
}

.si-app-logo small{
 display:block;
 margin-top:2px;
 font-size:7px;
 letter-spacing:1px;
 font-weight:800;
 color:#7d93a5;
}

.si-app-head-center{
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 max-width:45%;
 text-align:center;
 pointer-events:none;
}

.si-app-head-center b{
 display:block;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 font-size:12px;
}

.si-app-head-center small{
 display:block;
 margin-top:2px;
 font-size:8px;
 color:#6e879a;
}

.si-app-head-actions{
 display:flex;
 align-items:center;
 gap:7px;
}

.si-app-head-action{
 width:35px;
 height:35px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:11px;
 border:1px solid #183044;
 background:#071521;
 color:#dfeaf2;
 text-decoration:none;
 font-size:15px;
}

/* hide old large page header on detail */
.detail-page>.page-head{
 display:none!important;
}

/* ==========================================================
   HOME STATUS QUICK TABS
   ========================================================== */

.si-mobile-status-tabs{
 margin:0 10px 10px;
 padding:3px;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 background:#07131e;
 border:1px solid #172c3d;
 border-radius:13px;
}

.si-mobile-status-tabs a{
 height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:5px;
 border-radius:10px;
 text-decoration:none;
 color:#8ca0b1;
 font-size:11px;
 font-weight:850;
}

.si-mobile-status-tabs a.active{
 color:#fff;
 background:#102638;
}

.si-mobile-status-tabs a.live.active{
 background:linear-gradient(135deg,#de2731,#ff414b);
}

.si-mobile-status-tabs b{
 font-size:10px;
}

/* ==========================================================
   MATCH CARD APP FEEL
   ========================================================== */

.match-row{
 transition:
 transform .12s ease,
 border-color .12s ease,
 background .12s ease;
}

.match-row:active{
 transform:scale(.986);
 background:#0b1c29!important;
}

.match-row.is-live{
 background:
 linear-gradient(145deg,#0a1926 0%,#07131d 70%)!important;
}

.match-row.is-live .mobile-live-score{
 color:#fff!important;
}

.match-row.is-live .mobile-live-state b{
 color:#ff6570!important;
}

.zone-head.live{
 position:sticky;
 top:59px;
 z-index:25;
 background:rgba(3,11,18,.94);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
}

/* ==========================================================
   DETAIL HERO
   ========================================================== */

.detail-page{
 max-width:none!important;
}

.match-hero2{
 margin-top:5px!important;
}

.match-summary{
 overflow:hidden;
}

.match-summary:before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
 radial-gradient(circle at 50% -20%,rgba(22,136,255,.13),transparent 43%);
}

.match-summary{
 position:relative;
}

.hero-center b{
 color:#fff!important;
}

body.si-is-live .hero-center b{
 font-size:34px!important;
}

body.si-is-live .hero-center small{
 color:#ff6570!important;
 font-weight:800;
}

/* ==========================================================
   MATCH QUICK NAV
   ========================================================== */

.si-match-tabs{
 position:sticky;
 top:58px;
 z-index:90;
 margin:10px 0;
 padding:4px;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 background:rgba(5,15,23,.97);
 border:1px solid #172c3d;
 border-radius:13px;
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}

.si-match-tabs button{
 height:40px;
 padding:0 4px;
 border:0;
 border-radius:10px;
 background:transparent;
 color:#8095a7;
 font-size:10px;
 font-weight:900;
 cursor:pointer;
}

.si-match-tabs button.active{
 color:#fff;
 background:linear-gradient(135deg,#0877e7,#178fff);
 box-shadow:0 4px 14px rgba(10,126,235,.20);
}

.si-mobile-target{
 scroll-margin-top:114px!important;
}

.si-mobile-target.si-target-flash{
 animation:siTargetFlash .7s ease;
}

@keyframes siTargetFlash{
 0%{box-shadow:0 0 0 1px rgba(22,136,255,.15)}
 45%{box-shadow:0 0 0 2px rgba(22,136,255,.65),0 0 24px rgba(22,136,255,.14)}
 100%{box-shadow:none}
}

/* ==========================================================
   AI KPI BAR
   ========================================================== */

.sport-value-strip{
 position:relative;
}

.sport-value-strip>div:first-child b{
 color:#40a1ff!important;
}

.sport-value-strip>div:nth-child(2) b{
 color:#fff!important;
}

.sport-value-strip>div:nth-child(3) b{
 color:var(--app-green)!important;
}

/* probability emphasis */

.probability-triple>div{
 position:relative;
 overflow:hidden;
}

.probability-triple>div b{
 position:relative;
 z-index:2;
}

.probability-triple>div.si-prob-top{
 border:1px solid rgba(22,136,255,.55)!important;
 background:
 linear-gradient(145deg,#0c2740,#091826)!important;
}

.probability-triple>div.si-prob-top:after{
 content:"AI PICK";
 position:absolute;
 right:5px;
 top:5px;
 font-size:6px;
 font-weight:900;
 letter-spacing:.5px;
 padding:2px 4px;
 border-radius:4px;
 color:#8cc8ff;
 background:rgba(22,136,255,.12);
}

/* ==========================================================
   DETAIL PANELS
   ========================================================== */

.detail-page .panel2,
.sport-analysis-card,
.probability-card,
.match-summary{
 transition:border-color .18s ease;
}

.detail-page .panel2 h2{
 display:flex;
 align-items:center;
 gap:7px;
}

.detail-page .panel2 h2:before{
 content:"";
 width:3px;
 height:13px;
 border-radius:2px;
 background:#1c85e8;
}

.sport-analysis-card{
 background:
 linear-gradient(145deg,#081722,#06121c)!important;
}

/* ==========================================================
   FLOATING TOP BUTTON
   ========================================================== */

.si-scroll-top{
 position:fixed;
 right:15px;
 bottom:88px;
 z-index:990;
 width:40px;
 height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid #1a354a;
 border-radius:13px;
 background:rgba(7,21,32,.94);
 color:#cbd9e3;
 font-size:17px;
 box-shadow:0 6px 18px rgba(0,0,0,.23);
 opacity:0;
 transform:translateY(10px);
 pointer-events:none;
 transition:.18s ease;
}

.si-scroll-top.show{
 opacity:1;
 transform:none;
 pointer-events:auto;
}

/* ==========================================================
   BOTTOM NAV V2
   ========================================================== */

.si-mobile-nav{
 height:70px!important;
}

.si-mobile-nav a{
 position:relative;
}

.si-mobile-nav i{
 width:28px;
 height:25px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.si-mobile-nav a.active:before{
 content:"";
 position:absolute;
 top:0;
 width:25px;
 height:2px;
 border-radius:2px;
 background:#1688ff;
}

.si-mobile-nav a.active span{
 color:#52aaff;
}

/* ==========================================================
   iPhone SAFE AREA
   ========================================================== */

@supports(padding:max(0px)){
 .si-app-header{
  height:calc(58px + env(safe-area-inset-top));
 }

 body{
  padding-top:calc(66px + env(safe-area-inset-top))!important;
 }

 .si-match-tabs,
 .zone-head.live{
  top:calc(58px + env(safe-area-inset-top));
 }
}

}

@media(min-width:721px){
 .si-app-header,
 .si-mobile-status-tabs,
 .si-match-tabs,
 .si-scroll-top{
  display:none!important;
 }
}