/* HOOPROVE Dashboard v3.39 — based on supplied dashboard.html */
.hp-page-index .hp-content{padding:28px 38px 0!important;max-width:1650px!important;margin:auto!important}
.hp-page-index .hp-copyright{margin-top:24px;padding:18px 20px 22px;border-top:1px solid #e5e6e8;background:#f5f6f7}
.dash-title-row{display:flex;align-items:center;gap:25px;margin-bottom:18px}
.dash-title-row h1{font-size:22px;margin:0}
.dash-title-row select,.dash-panel-head select{border:1px solid #ddd;background:#fff;border-radius:6px;padding:10px 14px;margin:0!important;min-height:auto!important;width:auto!important}
.dash-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.dash-card,.dash-panel,.dash-action{background:#fff;border:1px solid #e6e7e9;border-radius:10px;box-shadow:0 2px 10px #00000008}
.dash-card{padding:18px;text-align:center}
.dash-card span{font-size:12px}
.dash-card strong{display:block;font-size:34px;margin:5px 0}
.dash-card em{font-size:11px;color:#198c44;font-style:normal;font-weight:700}
.dash-card em.negative{color:#f54}
.dash-ad{height:84px;margin:16px 0;background:#fff;border:1px solid #e6e7e9;border-radius:10px;display:grid;place-items:center;text-align:center;color:#777}
.dash-ad b{color:#444}
.dash-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.dash-panel{padding:18px}
.dash-panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:12px}
.dash-panel-head h2{font-size:17px;margin:0}
.dash-panel-head a,.dash-panel-head button{border:1px solid #999;background:#fff;padding:5px 8px;font-size:11px;font-weight:800}
.dash-game{display:grid;grid-template-columns:1.1fr 1fr .55fr 1fr .4fr;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid #eee;font-size:12px}
.dash-game strong{font-size:20px}
.dash-game .win{color:#ff5708;font-weight:900}.dash-game .lose{color:#1672d2;font-weight:900}.dash-game .draw{color:#777;font-weight:900}
.dash-empty{padding:35px 10px;text-align:center;color:#888;font-size:11px}
.dash-bars>div{display:grid;grid-template-columns:90px 1fr 55px;gap:10px;align-items:center;font-size:12px;margin:13px 0}
.dash-bar{height:10px;background:#eee;position:relative}
.dash-bar i{position:absolute;inset:0 auto 0 0;background:#ff5708}
.dash-bar.gray i{background:#999}
.dash-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.dash-action{min-height:150px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-action img{width:38px;height:38px}
.dash-action strong{margin:10px 0;font-size:17px}
.dash-action small{line-height:1.7;color:#555}
.dash-action.primary{background:#fffaf6;border-color:#ffd2b8}
.dash-action.primary strong{color:#ff5708}
.dash-mobile-only{display:none}

/* top user */
.hp-top-notice{position:relative;display:inline-flex}
.hp-top-notice img{width:27px;height:27px}
.hp-top-notice b{position:absolute;right:-7px;top:-8px;background:red;color:#fff;width:18px;height:18px;border-radius:50%;font-size:10px;display:grid;place-items:center}
.hp-top-user-name{font-weight:800;line-height:1.25}.hp-top-user-name small{display:block;color:#555;font-size:10px;margin-top:2px}
.hp-top-chevron{font-size:16px}

/* reveal animation */
.reveal-stats .dash-card,.reveal-cards>* ,.dash-mobile-ad{opacity:0;transform:translateY(18px)}
.anim-visible .dash-card,.reveal-cards.anim-visible>* ,.dash-mobile-ad.anim-visible{animation:dashFadeUp .55s cubic-bezier(.2,.75,.3,1) forwards}
.anim-visible .dash-card:nth-child(2),.reveal-cards.anim-visible>*:nth-child(2){animation-delay:.07s}
.anim-visible .dash-card:nth-child(3),.reveal-cards.anim-visible>*:nth-child(3){animation-delay:.14s}
.anim-visible .dash-card:nth-child(4),.reveal-cards.anim-visible>*:nth-child(4){animation-delay:.21s}
.anim-visible .dash-card:nth-child(5){animation-delay:.28s}
@keyframes dashFadeUp{to{opacity:1;transform:translateY(0)}}
.animated-bars .dash-bar i{width:0!important;transition:width .95s cubic-bezier(.2,.75,.3,1)}
.animated-bars.anim-visible .dash-bar i{width:var(--bar-width)!important}
.reveal-stats .dash-card strong{opacity:0;transform:scale(.92)}
.reveal-stats.anim-visible .dash-card strong{animation:numberPop .45s ease forwards}
@keyframes numberPop{to{opacity:1;transform:scale(1)}}

@media(max-width:800px){
 .hp-page-index .hp-content{padding:20px 14px 0!important}
 .dash-title-row{display:none}
 .dash-cards{background:linear-gradient(145deg,#090c10,#15191e);border-radius:9px;color:#fff;grid-template-columns:repeat(3,1fr);gap:0;padding:10px}
 .dash-card{background:none;border:0;box-shadow:none;border-right:1px solid #333;padding:10px 4px}
 .dash-card:nth-child(3){border-right:0}.dash-card:nth-child(n+4){border-top:1px solid #333;margin-top:6px}
 .dash-card strong{font-size:28px}.dash-card em{display:none}
 .dash-ad{display:none}
 .dash-grid{grid-template-columns:1fr}.dash-grid .dash-panel:nth-child(2){display:none}
 .dash-game{grid-template-columns:1fr auto auto}.dash-game span{display:none}
 .dash-actions{grid-template-columns:repeat(3,1fr);gap:8px}
 .dash-action{min-height:96px;padding:10px 5px}.dash-action img{width:30px}.dash-action small{display:none}.dash-action strong{font-size:11px;margin:6px 0}
 .dash-action.primary{grid-column:1/-1;background:linear-gradient(90deg,#ff6900,#ff4b00);color:#fff;min-height:54px;flex-direction:row;gap:10px}
 .dash-action.primary img{filter:invert(1)}.dash-action.primary strong{color:#fff;font-size:15px}
 .dash-mobile-only{display:flex}
 .dash-mobile-ad{min-height:96px;margin:14px 0;border:1px solid #e3e4e6;border-radius:10px;background:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:14px 16px}
 .dash-mobile-ad-secondary{background:linear-gradient(180deg,#fff,#fffaf6);border-color:#f0ddd0}
 .dash-mobile-ad .ad-label{color:#a6a8ab;font-size:8px;letter-spacing:.22em;margin-bottom:5px}.dash-mobile-ad strong{font-size:13px;color:#444}.dash-mobile-ad span{margin-top:4px;font-size:10px;color:#999}
 .hp-page-index .hp-copyright{margin:20px -14px 0;padding:20px 16px 88px;background:#fff}
}
@media(prefers-reduced-motion:reduce){
 .reveal-stats .dash-card,.reveal-cards>* ,.dash-mobile-ad,.reveal-stats .dash-card strong{opacity:1!important;transform:none!important;animation:none!important}
 .animated-bars .dash-bar i{transition:none!important}
}

/* v3.40 dashboard reliability */
.dash-content{display:block!important;visibility:visible!important;opacity:1!important;min-height:500px}
.dash-data-warning{margin:0 0 14px;padding:10px 13px;border:1px solid #f1dccb;border-radius:8px;background:#fffaf6;color:#765f50;font-size:10px;line-height:1.7}
/* Do not hide content if dashboard.js is blocked or cached incorrectly. */
.reveal-stats .dash-card,.reveal-cards>*{opacity:1;transform:none}
.anim-visible .dash-card,.reveal-cards.anim-visible>*{animation:dashFadeUp .55s cubic-bezier(.2,.75,.3,1) forwards}


/* v3.41 emergency stability fix:
   Dashboard content must always render even if JS or IntersectionObserver does not run. */
.hp-page-index .dash-content,
.hp-page-index .dash-title-row,
.hp-page-index .dash-cards,
.hp-page-index .dash-card,
.hp-page-index .dash-grid,
.hp-page-index .dash-panel,
.hp-page-index .dash-actions,
.hp-page-index .dash-action,
.hp-page-index .dash-ad,
.hp-page-index .dash-mobile-ad {
  display: revert;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.hp-page-index .dash-content{display:block!important}
.hp-page-index .dash-cards{display:grid!important}
.hp-page-index .dash-grid{display:grid!important}
.hp-page-index .dash-actions{display:grid!important}
.hp-page-index .dash-panel{display:block!important}

.hp-page-index .dash-card strong{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
@media(max-width:800px){
  .hp-page-index .dash-title-row{display:none!important}
  .hp-page-index .dash-grid .dash-panel:nth-child(2){display:none!important}
  .hp-page-index .dash-mobile-only{display:flex!important}
}


/* ============================================================
   v3.42 DASHBOARD LAYOUT FIX
   - Restore reference dashboard layout
   - Hide mobile-only ads on desktop
   - Recent game links stay black; row hover = light gray
   - Restore four quick-action cards as vertical flex cards
   ============================================================ */

/* Desktop: mobile advertisement blocks must never appear */
.hp-page-index .dash-mobile-only,
.hp-page-index .dash-mobile-ad,
.hp-page-index .dash-mobile-ad-secondary{
  display:none !important;
}

/* Advertisement area */
.hp-page-index .dash-ad{
  display:grid !important;
  place-items:center !important;
  height:84px !important;
  min-height:84px !important;
  margin:16px 0 !important;
  padding:0 !important;
  background:#fff !important;
  border:1px solid #e6e7e9 !important;
  border-radius:10px !important;
  text-align:center !important;
  color:#777 !important;
  overflow:hidden !important;
}
.hp-page-index .dash-ad > div{
  display:block !important;
  line-height:1.35 !important;
}
.hp-page-index .dash-ad small{
  display:block !important;
  margin:0 0 2px !important;
  color:#888 !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.hp-page-index .dash-ad b{
  display:block !important;
  margin:0 !important;
  color:#444 !important;
  font-size:16px !important;
  line-height:1.2 !important;
}

/* Recent games: prevent browser default link colors */
.hp-page-index .dash-game{
  color:#111 !important;
  text-decoration:none !important;
  transition:background-color .15s ease !important;
  margin:0 -18px !important;
  padding:14px 18px !important;
}
.hp-page-index .dash-game:visited,
.hp-page-index .dash-game:active{
  color:#111 !important;
}
.hp-page-index .dash-game:hover{
  color:#111 !important;
  background:#f5f5f5 !important;
}
.hp-page-index .dash-game > b:not(.win):not(.lose):not(.draw),
.hp-page-index .dash-game > span,
.hp-page-index .dash-game > strong{
  color:#111 !important;
}
.hp-page-index .dash-game .win{color:#ff5708 !important;}
.hp-page-index .dash-game .lose{color:#1672d2 !important;}
.hp-page-index .dash-game .draw{color:#777 !important;}

/* Quick actions: restore exact 4-card layout */
.hp-page-index .dash-actions{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:16px !important;
}
.hp-page-index .dash-action{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:150px !important;
  padding:22px 24px !important;
  text-align:center !important;
  color:#111 !important;
  text-decoration:none !important;
  background:#fff !important;
  border:1px solid #e6e7e9 !important;
  border-radius:10px !important;
  box-shadow:0 2px 10px #00000008 !important;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease !important;
}
.hp-page-index .dash-action:visited{color:#111 !important;}
.hp-page-index .dash-action:hover{
  color:#111 !important;
  background:#f7f7f7 !important;
  transform:translateY(-1px) !important;
}
.hp-page-index .dash-action img{
  display:block !important;
  flex:0 0 auto !important;
  width:38px !important;
  height:38px !important;
  margin:0 auto !important;
}
.hp-page-index .dash-action strong{
  display:block !important;
  width:100% !important;
  margin:10px 0 7px !important;
  color:#111 !important;
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  text-align:center !important;
}
.hp-page-index .dash-action small{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#555 !important;
  font-size:11px !important;
  line-height:1.75 !important;
  text-align:center !important;
}
.hp-page-index .dash-action.primary{
  background:#fffaf6 !important;
  border-color:#ffc8a6 !important;
}
.hp-page-index .dash-action.primary:hover{
  background:#fff5ed !important;
}
.hp-page-index .dash-action.primary strong{
  color:#ff5708 !important;
}

/* Mobile: enable only the intended mobile advertisement blocks */
@media(max-width:800px){
  .hp-page-index .dash-mobile-only,
  .hp-page-index .dash-mobile-ad,
  .hp-page-index .dash-mobile-ad-secondary{
    display:flex !important;
  }

  .hp-page-index .dash-actions{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .hp-page-index .dash-action{
    min-height:96px !important;
    padding:10px 5px !important;
  }
  .hp-page-index .dash-action img{
    width:30px !important;
    height:30px !important;
  }
  .hp-page-index .dash-action strong{
    margin:6px 0 !important;
    font-size:11px !important;
  }
  .hp-page-index .dash-action small{
    display:none !important;
  }
  .hp-page-index .dash-action.primary{
    grid-column:1/-1 !important;
    min-height:54px !important;
    flex-direction:row !important;
    gap:10px !important;
    background:linear-gradient(90deg,#ff6900,#ff4b00) !important;
    color:#fff !important;
  }
  .hp-page-index .dash-action.primary img{
    filter:invert(1) !important;
  }
  .hp-page-index .dash-action.primary strong{
    width:auto !important;
    color:#fff !important;
    font-size:15px !important;
  }

  .hp-page-index .dash-game{
    margin:0 -18px !important;
    padding:13px 18px !important;
  }
}


/* ============================================================
   v3.43 TEAM STATS BAR FIX
   Render width directly and animate without JavaScript.
   ============================================================ */
.hp-page-index .dash-bar{
  display:block !important;
  position:relative !important;
  height:10px !important;
  min-height:10px !important;
  overflow:hidden !important;
  background:#ececec !important;
}
.hp-page-index .dash-bar i{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  height:100% !important;
  min-width:0 !important;
  background:#ff5708 !important;
  transform-origin:left center !important;
  animation:hpDashBarGrow .85s cubic-bezier(.2,.75,.3,1) both !important;
}
.hp-page-index .dash-bar.gray i{
  background:#9b9b9b !important;
}
@keyframes hpDashBarGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .hp-page-index .dash-bar i{animation:none !important;transform:none !important}
}

/* v3.44 team stats */
.hp-page-index .dash-period-form{display:block!important;margin:0!important;padding:0!important}
.hp-page-index .dash-period-form select{min-width:145px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0 38px 0 14px!important;border:1px solid #d7dadd!important;border-radius:7px!important;background:#fff!important;color:#111!important;font-size:11px!important;font-weight:700!important}
.hp-page-index .dash-bar{display:block!important;position:relative!important;width:100%!important;height:10px!important;min-height:10px!important;overflow:hidden!important;background:#ececec!important}
.hp-page-index .dash-bar .dash-bar-fill{display:block!important;position:absolute!important;z-index:5!important;left:0!important;top:0!important;bottom:0!important;height:10px!important;min-height:10px!important;background:#ff5708!important;opacity:1!important;visibility:visible!important;transform-origin:left center!important;animation:hpStatsGrow .75s ease-out both!important}
.hp-page-index .dash-bar.gray .dash-bar-fill{background:#9c9c9c!important}
@keyframes hpStatsGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hp-page-index .dash-period-caption{margin-top:10px!important;color:#999!important;font-size:9px!important;text-align:right!important}
@media(prefers-reduced-motion:reduce){.hp-page-index .dash-bar .dash-bar-fill{animation:none!important;transform:none!important}}


/* ============================================================
   v3.45 TEAM STATS / CSP SAFE FIX
   Current CSP blocks inline style="" and inline onchange.
   Therefore bar widths are class-based and the selector uses
   an external same-origin JS file.
   ============================================================ */
.hp-page-index .dash-bar{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:10px !important;
  min-height:10px !important;
  overflow:hidden !important;
  background:#ececec !important;
}

.hp-page-index .dash-bar .dash-bar-fill{
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  height:10px !important;
  min-height:10px !important;
  opacity:1 !important;
  visibility:visible !important;
  background:#ff5708 !important;
  transform:none !important;
}

.hp-page-index .dash-bar.gray .dash-bar-fill{
  background:#9c9c9c !important;
}

/* The bar is already visible without JS. JS only adds the grow animation. */
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill{
  transform-origin:left center !important;
  animation:hpStatsGrow345 .7s ease-out both !important;
}

@keyframes hpStatsGrow345{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@media(prefers-reduced-motion:reduce){
  .hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill{
    animation:none !important;
    transform:none !important;
  }
}

.hp-page-index .dash-bar-fill.dash-w-0{width:0% !important;}
.hp-page-index .dash-bar-fill.dash-w-1{width:1% !important;}
.hp-page-index .dash-bar-fill.dash-w-2{width:2% !important;}
.hp-page-index .dash-bar-fill.dash-w-3{width:3% !important;}
.hp-page-index .dash-bar-fill.dash-w-4{width:4% !important;}
.hp-page-index .dash-bar-fill.dash-w-5{width:5% !important;}
.hp-page-index .dash-bar-fill.dash-w-6{width:6% !important;}
.hp-page-index .dash-bar-fill.dash-w-7{width:7% !important;}
.hp-page-index .dash-bar-fill.dash-w-8{width:8% !important;}
.hp-page-index .dash-bar-fill.dash-w-9{width:9% !important;}
.hp-page-index .dash-bar-fill.dash-w-10{width:10% !important;}
.hp-page-index .dash-bar-fill.dash-w-11{width:11% !important;}
.hp-page-index .dash-bar-fill.dash-w-12{width:12% !important;}
.hp-page-index .dash-bar-fill.dash-w-13{width:13% !important;}
.hp-page-index .dash-bar-fill.dash-w-14{width:14% !important;}
.hp-page-index .dash-bar-fill.dash-w-15{width:15% !important;}
.hp-page-index .dash-bar-fill.dash-w-16{width:16% !important;}
.hp-page-index .dash-bar-fill.dash-w-17{width:17% !important;}
.hp-page-index .dash-bar-fill.dash-w-18{width:18% !important;}
.hp-page-index .dash-bar-fill.dash-w-19{width:19% !important;}
.hp-page-index .dash-bar-fill.dash-w-20{width:20% !important;}
.hp-page-index .dash-bar-fill.dash-w-21{width:21% !important;}
.hp-page-index .dash-bar-fill.dash-w-22{width:22% !important;}
.hp-page-index .dash-bar-fill.dash-w-23{width:23% !important;}
.hp-page-index .dash-bar-fill.dash-w-24{width:24% !important;}
.hp-page-index .dash-bar-fill.dash-w-25{width:25% !important;}
.hp-page-index .dash-bar-fill.dash-w-26{width:26% !important;}
.hp-page-index .dash-bar-fill.dash-w-27{width:27% !important;}
.hp-page-index .dash-bar-fill.dash-w-28{width:28% !important;}
.hp-page-index .dash-bar-fill.dash-w-29{width:29% !important;}
.hp-page-index .dash-bar-fill.dash-w-30{width:30% !important;}
.hp-page-index .dash-bar-fill.dash-w-31{width:31% !important;}
.hp-page-index .dash-bar-fill.dash-w-32{width:32% !important;}
.hp-page-index .dash-bar-fill.dash-w-33{width:33% !important;}
.hp-page-index .dash-bar-fill.dash-w-34{width:34% !important;}
.hp-page-index .dash-bar-fill.dash-w-35{width:35% !important;}
.hp-page-index .dash-bar-fill.dash-w-36{width:36% !important;}
.hp-page-index .dash-bar-fill.dash-w-37{width:37% !important;}
.hp-page-index .dash-bar-fill.dash-w-38{width:38% !important;}
.hp-page-index .dash-bar-fill.dash-w-39{width:39% !important;}
.hp-page-index .dash-bar-fill.dash-w-40{width:40% !important;}
.hp-page-index .dash-bar-fill.dash-w-41{width:41% !important;}
.hp-page-index .dash-bar-fill.dash-w-42{width:42% !important;}
.hp-page-index .dash-bar-fill.dash-w-43{width:43% !important;}
.hp-page-index .dash-bar-fill.dash-w-44{width:44% !important;}
.hp-page-index .dash-bar-fill.dash-w-45{width:45% !important;}
.hp-page-index .dash-bar-fill.dash-w-46{width:46% !important;}
.hp-page-index .dash-bar-fill.dash-w-47{width:47% !important;}
.hp-page-index .dash-bar-fill.dash-w-48{width:48% !important;}
.hp-page-index .dash-bar-fill.dash-w-49{width:49% !important;}
.hp-page-index .dash-bar-fill.dash-w-50{width:50% !important;}
.hp-page-index .dash-bar-fill.dash-w-51{width:51% !important;}
.hp-page-index .dash-bar-fill.dash-w-52{width:52% !important;}
.hp-page-index .dash-bar-fill.dash-w-53{width:53% !important;}
.hp-page-index .dash-bar-fill.dash-w-54{width:54% !important;}
.hp-page-index .dash-bar-fill.dash-w-55{width:55% !important;}
.hp-page-index .dash-bar-fill.dash-w-56{width:56% !important;}
.hp-page-index .dash-bar-fill.dash-w-57{width:57% !important;}
.hp-page-index .dash-bar-fill.dash-w-58{width:58% !important;}
.hp-page-index .dash-bar-fill.dash-w-59{width:59% !important;}
.hp-page-index .dash-bar-fill.dash-w-60{width:60% !important;}
.hp-page-index .dash-bar-fill.dash-w-61{width:61% !important;}
.hp-page-index .dash-bar-fill.dash-w-62{width:62% !important;}
.hp-page-index .dash-bar-fill.dash-w-63{width:63% !important;}
.hp-page-index .dash-bar-fill.dash-w-64{width:64% !important;}
.hp-page-index .dash-bar-fill.dash-w-65{width:65% !important;}
.hp-page-index .dash-bar-fill.dash-w-66{width:66% !important;}
.hp-page-index .dash-bar-fill.dash-w-67{width:67% !important;}
.hp-page-index .dash-bar-fill.dash-w-68{width:68% !important;}
.hp-page-index .dash-bar-fill.dash-w-69{width:69% !important;}
.hp-page-index .dash-bar-fill.dash-w-70{width:70% !important;}
.hp-page-index .dash-bar-fill.dash-w-71{width:71% !important;}
.hp-page-index .dash-bar-fill.dash-w-72{width:72% !important;}
.hp-page-index .dash-bar-fill.dash-w-73{width:73% !important;}
.hp-page-index .dash-bar-fill.dash-w-74{width:74% !important;}
.hp-page-index .dash-bar-fill.dash-w-75{width:75% !important;}
.hp-page-index .dash-bar-fill.dash-w-76{width:76% !important;}
.hp-page-index .dash-bar-fill.dash-w-77{width:77% !important;}
.hp-page-index .dash-bar-fill.dash-w-78{width:78% !important;}
.hp-page-index .dash-bar-fill.dash-w-79{width:79% !important;}
.hp-page-index .dash-bar-fill.dash-w-80{width:80% !important;}
.hp-page-index .dash-bar-fill.dash-w-81{width:81% !important;}
.hp-page-index .dash-bar-fill.dash-w-82{width:82% !important;}
.hp-page-index .dash-bar-fill.dash-w-83{width:83% !important;}
.hp-page-index .dash-bar-fill.dash-w-84{width:84% !important;}
.hp-page-index .dash-bar-fill.dash-w-85{width:85% !important;}
.hp-page-index .dash-bar-fill.dash-w-86{width:86% !important;}
.hp-page-index .dash-bar-fill.dash-w-87{width:87% !important;}
.hp-page-index .dash-bar-fill.dash-w-88{width:88% !important;}
.hp-page-index .dash-bar-fill.dash-w-89{width:89% !important;}
.hp-page-index .dash-bar-fill.dash-w-90{width:90% !important;}
.hp-page-index .dash-bar-fill.dash-w-91{width:91% !important;}
.hp-page-index .dash-bar-fill.dash-w-92{width:92% !important;}
.hp-page-index .dash-bar-fill.dash-w-93{width:93% !important;}
.hp-page-index .dash-bar-fill.dash-w-94{width:94% !important;}
.hp-page-index .dash-bar-fill.dash-w-95{width:95% !important;}
.hp-page-index .dash-bar-fill.dash-w-96{width:96% !important;}
.hp-page-index .dash-bar-fill.dash-w-97{width:97% !important;}
.hp-page-index .dash-bar-fill.dash-w-98{width:98% !important;}
.hp-page-index .dash-bar-fill.dash-w-99{width:99% !important;}
.hp-page-index .dash-bar-fill.dash-w-100{width:100% !important;}


/* ============================================================
   v3.46 TEAM STATS PERIOD SWITCH ANIMATION
   ============================================================ */
.hp-page-index .dash-bars .dash-bar-fill{
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  will-change:transform,opacity !important;
}

.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill{
  animation:none !important;
  transform:scaleX(1) !important;
  transition:transform .78s cubic-bezier(.2,.78,.3,1) !important;
}

/* Slight stagger by row so the selected period feels freshly rendered */
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(1) .dash-bar-fill{transition-delay:.02s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(2) .dash-bar-fill{transition-delay:.06s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(3) .dash-bar-fill{transition-delay:.10s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(4) .dash-bar-fill{transition-delay:.14s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(5) .dash-bar-fill{transition-delay:.18s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(6) .dash-bar-fill{transition-delay:.22s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(7) .dash-bar-fill{transition-delay:.26s !important}

/* When the period is changed, retract the current bars before submit */
.hp-page-index .dash-bars.dash-stats-switching .dash-bar-fill{
  transform:scaleX(0) !important;
  opacity:.35 !important;
  transition:transform .16s ease-in,opacity .16s ease-in !important;
}

.hp-page-index .dash-bars.dash-stats-switching > div > b{
  opacity:.45 !important;
  transition:opacity .16s ease-in !important;
}

@media(prefers-reduced-motion:reduce){
  .hp-page-index .dash-bars .dash-bar-fill,
  .hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill,
  .hp-page-index .dash-bars.dash-stats-switching .dash-bar-fill{
    transform:scaleX(1) !important;
    opacity:1 !important;
    transition:none !important;
  }
}


/* ============================================================
   v3.47 TEAM STATS
   Reliable left-to-right WIDTH animation + threshold colors
   ============================================================ */

/* Base track */
.hp-page-index .dash-bars .dash-bar{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:10px !important;
  min-height:10px !important;
  overflow:hidden !important;
  background:#ececec !important;
  border-radius:0 !important;
}

/* IMPORTANT: start every bar at width:0.
   Width is animated, not transform, so growth is visibly left -> right. */
.hp-page-index .dash-bars .dash-bar-fill,
.hp-page-index .dash-bars .dash-bar-fill[class*="dash-w-"]{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0 !important;
  height:10px !important;
  min-height:10px !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
  transition:
    width .92s cubic-bezier(.16,.84,.30,1),
    opacity .2s ease !important;
  will-change:width !important;
  z-index:5 !important;
}

/* Color thresholds based on the displayed graph length:
   <= 25% gray / 26-49% blue / >= 50% red */
.hp-page-index .dash-bars .dash-bar-fill.dash-tone-low{
  background:#9d9d9d !important;
}
.hp-page-index .dash-bars .dash-bar-fill.dash-tone-mid{
  background:#3478d4 !important;
}
.hp-page-index .dash-bars .dash-bar-fill.dash-tone-high{
  background:#e54848 !important;
}

/* A small stagger makes the growth easier to perceive. */
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(1) .dash-bar-fill{transition-delay:.00s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(2) .dash-bar-fill{transition-delay:.05s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(3) .dash-bar-fill{transition-delay:.10s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(4) .dash-bar-fill{transition-delay:.15s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(5) .dash-bar-fill{transition-delay:.20s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(6) .dash-bar-fill{transition-delay:.25s !important}
.hp-page-index .dash-bars.dash-stats-ready > div:nth-child(7) .dash-bar-fill{transition-delay:.30s !important}

/* Period switch: shrink current bars leftward, then page reloads. */
.hp-page-index .dash-bars.dash-stats-switching .dash-bar-fill{
  width:0 !important;
  opacity:.25 !important;
  transition:
    width .26s ease-in,
    opacity .20s ease-in !important;
  transition-delay:0s !important;
}

@media(prefers-reduced-motion:reduce){
  .hp-page-index .dash-bars .dash-bar-fill{
    transition:none !important;
  }
}

.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-0{width:0% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-1{width:1% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-2{width:2% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-3{width:3% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-4{width:4% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-5{width:5% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-6{width:6% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-7{width:7% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-8{width:8% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-9{width:9% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-10{width:10% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-11{width:11% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-12{width:12% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-13{width:13% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-14{width:14% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-15{width:15% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-16{width:16% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-17{width:17% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-18{width:18% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-19{width:19% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-20{width:20% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-21{width:21% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-22{width:22% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-23{width:23% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-24{width:24% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-25{width:25% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-26{width:26% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-27{width:27% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-28{width:28% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-29{width:29% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-30{width:30% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-31{width:31% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-32{width:32% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-33{width:33% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-34{width:34% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-35{width:35% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-36{width:36% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-37{width:37% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-38{width:38% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-39{width:39% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-40{width:40% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-41{width:41% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-42{width:42% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-43{width:43% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-44{width:44% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-45{width:45% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-46{width:46% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-47{width:47% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-48{width:48% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-49{width:49% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-50{width:50% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-51{width:51% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-52{width:52% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-53{width:53% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-54{width:54% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-55{width:55% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-56{width:56% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-57{width:57% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-58{width:58% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-59{width:59% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-60{width:60% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-61{width:61% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-62{width:62% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-63{width:63% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-64{width:64% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-65{width:65% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-66{width:66% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-67{width:67% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-68{width:68% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-69{width:69% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-70{width:70% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-71{width:71% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-72{width:72% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-73{width:73% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-74{width:74% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-75{width:75% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-76{width:76% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-77{width:77% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-78{width:78% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-79{width:79% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-80{width:80% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-81{width:81% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-82{width:82% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-83{width:83% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-84{width:84% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-85{width:85% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-86{width:86% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-87{width:87% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-88{width:88% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-89{width:89% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-90{width:90% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-91{width:91% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-92{width:92% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-93{width:93% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-94{width:94% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-95{width:95% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-96{width:96% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-97{width:97% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-98{width:98% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-99{width:99% !important;}
.hp-page-index .dash-bars.dash-stats-ready .dash-bar-fill.dash-w-100{width:100% !important;}


/* ============================================================
   v3.48 MOBILE AD PLACEMENT
   SP: upper 1 + lower 1 = exactly 2 ad slots
   ============================================================ */
@media (max-width: 767px){
  .hp-page-index .dash-ad{
    display:none !important;
  }

  .hp-page-index .dash-mobile-ad.dash-mobile-only{
    display:flex !important;
  }
}


/* ============================================================
   v3.50 MOBILE PRIMARY ACTION BUTTON
   Fix icon/text separation caused by inherited margin:auto.
   ============================================================ */
@media (max-width: 800px){
  .hp-page-index .dash-action.primary{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:58px !important;
    padding:12px 18px !important;
    gap:12px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  .hp-page-index .dash-action.primary img{
    display:block !important;
    flex:0 0 32px !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    margin:0 !important;
    filter:invert(1) !important;
  }

  .hp-page-index .dash-action.primary strong{
    display:block !important;
    flex:0 1 auto !important;
    width:auto !important;
    max-width:calc(100% - 44px) !important;
    margin:0 !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .hp-page-index .dash-action.primary small{
    display:none !important;
  }
}

@media (max-width: 380px){
  .hp-page-index .dash-action.primary{
    gap:9px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .hp-page-index .dash-action.primary img{
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
  }
  .hp-page-index .dash-action.primary strong{
    max-width:calc(100% - 37px) !important;
    font-size:15px !important;
  }
}