/* VTI mobile app shell: mobile only; existing authentication and scanner logic untouched. */
@media(max-width:760px){
html,body{max-width:100%;overflow-x:clip}
.shell{width:100%;max-width:100%;padding:8px 12px calc(95px + env(safe-area-inset-bottom));box-sizing:border-box}
header{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;padding:8px 2px!important;margin:0 0 10px!important;min-height:52px!important;border:0!important;border-radius:0!important;background:transparent!important}
.brand{display:flex!important;flex:1 1 auto!important;min-width:0!important;align-items:center!important;gap:8px!important}
.vti-brand-logo{width:38px!important;height:38px!important;object-fit:contain;flex-shrink:0}
.brand>div:last-child{min-width:0!important}.brand>div:last-child b{font-size:12px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand>div:last-child span{display:none!important}
.header-actions{display:flex!important;flex:0 0 auto!important;max-width:none!important;align-items:center!important;gap:5px!important}
.header-actions .theme-toggle{width:36px!important;height:36px!important;min-height:36px!important;padding:5px!important}
.header-actions .language-select{width:44px!important;max-width:44px!important;height:36px!important;min-height:36px!important;padding:4px!important;font-size:0!important}
.header-actions .language-select option{font-size:14px}
.header-actions #logout{font-size:0!important;width:35px!important;height:36px!important;min-height:36px!important;padding:4px!important;display:grid;place-items:center}
.header-actions #logout::before{content:"↪";font-size:23px;line-height:1}
.header-actions #logout[hidden],.header-actions #roleBadge[hidden]{display:none!important}
.header-actions #roleBadge{display:none!important}
#appContent nav{position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;z-index:100!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:0!important;margin:0!important;padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;overflow:visible!important;background:#171e22!important;border-top:1px solid #38434a!important;border-bottom:0!important;box-shadow:0 -8px 26px #0005!important}
#appContent nav .tab{min-width:0!important;width:100%!important;min-height:52px!important;padding:26px 2px 3px!important;position:relative;font-size:10px!important;line-height:1.15!important;white-space:normal!important;overflow:hidden;text-overflow:ellipsis;border:0!important;border-radius:10px!important;background:transparent!important;color:#aebac0!important;box-shadow:none!important}
#appContent nav .tab.active{color:#f1c45b!important;background:#293034!important;box-shadow:none!important}
#appContent nav .tab[data-view="intro"],#appContent nav .tab[data-view="backtest"],#appContent nav .tab[data-view="admin"]{display:none!important}
#appContent nav .tab[data-view="dashboard"]{grid-column:1}
#appContent nav .tab[data-view="scanner"]{grid-column:2}
#appContent nav .tab[data-view="parlay"]{grid-column:3}

#appContent nav .tab[data-view="dashboard"]::before{content:"⌂"}
#appContent nav .tab[data-view="scanner"]::before{content:"⚽"}
#appContent nav .tab[data-view="parlay"]::before{content:"▤"}
#appContent nav .tab::before{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:20px;line-height:22px}

#scanner .scanner-head{display:block!important;margin:0!important;padding:10px 0 8px!important;background:transparent!important;border:0!important}
#scanner .scanner-head .eyebrow{font-size:10px!important}
#scanner .scanner-head h2{font-size:24px!important;line-height:1.2!important;margin:4px 0!important}
#scanner .scanner-head p{display:none!important}
#scanner .scanner-head .badge{display:inline-flex;margin-top:7px}
#scanner .board-counts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0!important}
#scanner .board-counts span{min-height:78px!important;padding:11px!important;border-radius:12px!important;background:#222b30!important;font-size:11px!important;letter-spacing:0!important}
#scanner .board-counts b{font-size:27px!important;margin-bottom:4px}
#scanner .scanner-refresh-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
#scanner .scanner-refresh-bar .gold{width:auto!important;min-height:42px!important;font-size:12px!important}
#scanner #manualRefreshStatus{width:auto!important;text-align:right!important}
#scanner .scanner-range,#scanner .board-filter{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
#scanner .panel:has(#scannerRows){padding:12px!important}
#dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
#dashboard .stats article{min-height:80px;padding:13px!important}
#dashboard .stats strong{font-size:19px!important}
#dashboard .panel{padding:14px!important}
#parlay .panel{padding:14px!important}
#parlay .parlay-grid{grid-template-columns:minmax(0,1fr)!important}
#parlay .choice{padding:12px!important;border-radius:12px!important}
#parlay .ticket{position:static!important;max-width:100%!important}
#scanner,#dashboard,#parlay{min-width:0;max-width:100%}
body[data-theme="day"] #appContent nav{background:#fff!important;border-color:#d8dfe3!important}
body[data-theme="day"] #appContent nav .tab.active{background:#fff0c8!important;color:#70500c!important}
body[data-theme="day"] #scanner .board-counts span{background:#fff!important;border-color:#d8dfe3!important}
}

/* 2026-09-24: restore accessible mobile destinations and fix cramped controls. */
@media(max-width:760px){
 #appContent nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:2px!important;padding:6px 5px calc(7px + env(safe-area-inset-bottom))!important}
 #appContent nav .tab{grid-column:auto!important;min-height:55px!important;padding:28px 1px 4px!important;font-size:9px!important;overflow-wrap:anywhere!important}
 #appContent nav .tab[data-view="backtest"]{display:block!important}
 #appContent nav .tab[data-view="admin"]:not([hidden]){display:block!important}
 #appContent nav .tab[data-view="admin"][hidden]{display:none!important}
 #appContent nav:has(.tab[data-view="admin"]:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))!important}
 #appContent nav .tab[data-view="backtest"]::before{content:"◷"}
 #appContent nav .tab[data-view="admin"]::before{content:"⚙"}
 .header-actions .language-select{font-size:13px!important;width:38px!important;max-width:38px!important;padding:3px 1px!important;color:#f1c45b!important}
 .header-actions .theme-toggle{flex:0 0 36px}
 #scanner .scanner-range,#scanner .board-filter{display:flex!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important;gap:7px!important}
 #scanner .scanner-range::-webkit-scrollbar,#scanner .board-filter::-webkit-scrollbar{display:none}
 #scanner .scanner-range button,#scanner .board-filter button{flex:0 0 auto!important;white-space:nowrap!important;font-size:11px!important;padding:10px 12px!important}
 #scanner .board-counts span{min-width:0!important;overflow-wrap:anywhere}
 #scanner .board-status{min-width:0}
 #scanner .panel{min-width:0}
}


/* VTI selected controls: clearly highlight the currently selected item in gold. */
#appContent nav .tab.active,
#scanner .scanner-range-btn.active,
#scanner .board-filter-btn.active,
#parlay .parlay-mode-btn.active,
#parlay .parlay-market-btn.active {
  background:#f1c45b!important;
  color:#171b1e!important;
  border-color:#f1c45b!important;
  box-shadow:0 0 0 1px rgba(241,196,91,.28)!important;
  font-weight:900!important;
}
#appContent nav .tab.active::before { color:#171b1e!important; }
#appContent nav .tab:focus-visible,
#scanner .scanner-range-btn:focus-visible,
#scanner .board-filter-btn:focus-visible,
#parlay .parlay-mode-btn:focus-visible,
#parlay .parlay-market-btn:focus-visible {
  outline:2px solid #f1c45b;
  outline-offset:2px;
}
body[data-theme="day"] #appContent nav .tab.active,
body[data-theme="day"] #scanner .scanner-range-btn.active,
body[data-theme="day"] #scanner .board-filter-btn.active,
body[data-theme="day"] #parlay .parlay-mode-btn.active,
body[data-theme="day"] #parlay .parlay-market-btn.active {
  background:#f1c45b!important;
  color:#171b1e!important;
  border-color:#d6a637!important;
}


/* 2026-09-24: tidy the soccer scanner toolbar on phones. */
@media(max-width:760px){
 #scanner .scanner-refresh-bar{
   display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   gap:7px!important;
   margin:12px 0 10px!important;
   align-items:stretch!important;
 }
 #scanner .scanner-refresh-bar #refreshVtiBoard{
   display:flex!important;
   align-items:center!important;
   justify-content:center!important;
   width:100%!important;
   min-height:46px!important;
   padding:11px 14px!important;
   font-size:13px!important;
   border-radius:12px!important;
 }
 #scanner .scanner-refresh-bar #manualRefreshStatus{
   display:block!important;
   width:100%!important;
   text-align:center!important;
   font-size:11px!important;
   line-height:1.3!important;
   min-height:15px!important;
 }
 #scanner .scanner-range{
   display:grid!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   width:100%!important;
   max-width:100%!important;
   gap:8px!important;
   overflow:visible!important;
   margin:8px 0 12px!important;
 }
 #scanner .scanner-range .scanner-range-btn{
   min-width:0!important;
   width:100%!important;
   min-height:44px!important;
   padding:10px 5px!important;
   border-radius:12px!important;
   font-size:clamp(10px,2.7vw,12px)!important;
   letter-spacing:0!important;
   white-space:normal!important;
   line-height:1.2!important;
   text-align:center!important;
 }
 /* Equal-width FotMob-inspired mobile market filter grid */
 #scanner .board-filter{
   display:grid!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   align-items:stretch!important;
   overflow:visible!important;
   width:100%!important;
   max-width:100%!important;
   gap:8px!important;
   padding:12px 0 2px!important;
   margin:0 0 14px!important;
   border-top:1px solid #384147!important;
 }
 #scanner .board-filter .board-filter-btn{
   box-sizing:border-box!important;
   flex:none!important;
   width:100%!important;
   min-width:0!important;
   min-height:48px!important;
   margin:0!important;
   padding:10px 6px!important;
   display:flex!important;
   align-items:center!important;
   justify-content:center!important;
   white-space:normal!important;
   text-align:center!important;
   line-height:1.25!important;
   font-size:clamp(10px,2.7vw,12px)!important;
   letter-spacing:0!important;
   border-radius:12px!important;
 }
 #scanner .board-filter .board-filter-btn.active{
   background:#f4c65d!important;
   border-color:#f4c65d!important;
   color:#171b1e!important;
   box-shadow:0 0 0 2px rgba(244,198,93,.15)!important;
 }
}

/* Restore How VTI Works in mobile navigation; keep every member destination reachable. */
@media(max-width:760px){
 .shell{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
 #appContent nav,
 #appContent nav:has(.tab[data-view="admin"]:not([hidden])){
   grid-template-columns:repeat(3,minmax(0,1fr))!important;
   gap:3px!important;
 }
 #appContent nav .tab[data-view="intro"]{
   display:block!important;
   grid-column:auto!important;
 }
 #appContent nav .tab[data-view="intro"]::before{content:"ⓘ"}
 #appContent nav .tab{min-height:51px!important;padding:26px 2px 3px!important;font-size:10px!important}
 #appContent nav .tab[data-view="admin"][hidden]{display:none!important}
}

/* Keep the legal/help footer visible and scrollable above the fixed mobile tabs. */
@media(max-width:760px){
 .shell{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
 .site-footer{
   display:block!important;
   position:relative!important;
   visibility:visible!important;
   width:100%!important;
   max-width:100%!important;
   margin:22px 0 calc(132px + env(safe-area-inset-bottom))!important;
   padding:20px 10px 18px!important;
   background:#171e22!important;
   border:1px solid #38434a!important;
   border-radius:14px!important;
   box-sizing:border-box!important;
   clear:both!important;
 }
 .site-footer .footer-links{
   display:grid!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:6px!important;
 }
 .site-footer .footer-links button{
   min-width:0!important;
   min-height:40px!important;
   padding:8px 4px!important;
   white-space:normal!important;
   overflow-wrap:anywhere!important;
   color:#f1c45b!important;
   text-decoration:none!important;
   background:#252f34!important;
   border:1px solid #3b474e!important;
   border-radius:9px!important;
 }
 body[data-theme="day"] .site-footer{background:#fff!important;border-color:#d8dfe3!important}
 body[data-theme="day"] .site-footer .footer-links button{background:#f2f4f5!important;color:#73510c!important;border-color:#d8dfe3!important}
}

.mobile-menu-toggle,.mobile-nav-heading,.mobile-nav-backdrop{display:none}
@media(max-width:760px){
.shell{padding-bottom:24px!important}
.mobile-menu-toggle:not([hidden]){display:grid!important;place-items:center;width:40px;height:40px;min-height:40px;padding:0!important;border:1px solid #465158;border-radius:10px;background:#252e33;color:#f1c45b;font-size:23px}
#appContent #vtiMainNav{position:fixed!important;top:0!important;left:auto!important;right:0!important;bottom:0!important;z-index:302!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:min(82vw,320px)!important;height:100dvh!important;overflow-y:auto!important;gap:8px!important;margin:0!important;padding:calc(20px + env(safe-area-inset-top)) 16px 24px!important;background:#171e22!important;border-left:1px solid #414a4f!important;box-shadow:-16px 0 42px #0008!important;transform:translateX(105%);visibility:hidden;pointer-events:none;transition:transform .2s}
#appContent #vtiMainNav.mobile-nav-open{transform:translateX(0);visibility:visible;pointer-events:auto}
#appContent #vtiMainNav .mobile-nav-heading{display:flex!important;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #38434a;color:#f1c45b}
#mobileMenuClose{width:40px;height:40px;min-height:40px;background:#283137;color:#f1c45b;font-size:26px}
#appContent #vtiMainNav .tab,#appContent #vtiMainNav .tab[data-view="intro"],#appContent #vtiMainNav .tab[data-view="backtest"],#appContent #vtiMainNav .tab[data-view="admin"]:not([hidden]){display:flex!important;align-items:center!important;justify-content:flex-start!important;grid-column:auto!important;width:100%!important;min-height:52px!important;padding:12px!important;text-align:left!important;font-size:14px!important;border:1px solid #354147!important;border-radius:12px!important;background:#222b30!important;color:#e3e8ea!important}
#appContent #vtiMainNav .tab[hidden]{display:none!important}
#appContent #vtiMainNav .tab::before{position:static!important;flex:0 0 28px!important;margin-right:10px!important;text-align:center!important;font-size:20px!important;color:inherit!important}
#appContent #vtiMainNav .tab.active{background:#f1c45b!important;color:#171b1e!important}
.mobile-nav-backdrop:not([hidden]){display:block!important;position:fixed;inset:0;z-index:301;background:#000a}
body.vti-menu-open{overflow:hidden}
.site-footer{margin:24px 0 0!important;padding:16px 8px!important;background:transparent!important;border:0!important;border-top:1px solid #38434a!important;border-radius:0!important}
.site-footer .footer-links{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:4px 12px!important}
.site-footer .footer-links button{width:auto!important;min-height:34px!important;padding:5px 2px!important;background:transparent!important;border:0!important;border-radius:0!important;font-size:11px!important;text-decoration:underline!important}
}

/* Restore original header. Navigation sits under it, never fixed at screen bottom. */
@media(max-width:760px){
#appContent #vtiMainNav,#appContent #vtiMainNav.mobile-nav-open{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:auto!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;gap:7px!important;margin:0 0 16px!important;padding:5px 0 9px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;visibility:visible!important;pointer-events:auto!important;scrollbar-width:none!important}
#appContent #vtiMainNav::-webkit-scrollbar{display:none}
#appContent #vtiMainNav .mobile-nav-heading{display:none!important}
#appContent #vtiMainNav .tab,#appContent #vtiMainNav .tab[data-view="intro"],#appContent #vtiMainNav .tab[data-view="backtest"],#appContent #vtiMainNav .tab[data-view="admin"]:not([hidden]){display:inline-flex!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:42px!important;padding:10px 13px!important;font-size:12px!important;white-space:nowrap!important;text-align:center!important;justify-content:center!important;border-radius:22px!important}
#appContent #vtiMainNav .tab[hidden]{display:none!important}
#appContent #vtiMainNav .tab::before{display:none!important}
.shell{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
}


/* VTI classic reference header: logo/title, compact controls, horizontal navigation. */
@media(max-width:760px){
 .shell>header{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;padding:12px 10px 9px!important;margin-bottom:0!important;background:#141416!important;border-bottom:1px solid #27272b!important;border-radius:0!important}
 .shell>header .brand{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;min-width:0!important;width:100%!important}
 .shell>header .vti-brand-logo{display:block!important;width:56px!important;height:45px!important;object-fit:contain!important;flex:0 0 56px!important;border:1px solid #554323!important;border-radius:9px!important}
 .shell>header .brand>div{display:flex!important;flex-direction:column!important;min-width:0!important;gap:2px!important}
 .shell>header .brand b{font-size:14px!important;font-weight:800!important;letter-spacing:.45px!important;color:#f0c66c!important;white-space:nowrap!important}
 .shell>header .brand span{display:none!important}
 .shell>header .header-actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;margin:0!important}
 .shell>header .header-actions #themeToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;min-width:44px!important;height:43px!important;min-height:43px!important;padding:0!important;border:1px solid #38383e!important;border-radius:11px!important;background:#222226!important}
 .shell>header .theme-toggle-label{display:none!important}
 .shell>header #languageSelect{width:auto!important;max-width:165px!important;min-height:43px!important;padding:0 12px!important;border:1px solid #624a29!important;border-radius:12px!important;background:#222226!important;color:#f3d49a!important;font-size:12px!important;font-weight:700!important}
 .shell>header #logout{width:auto!important;min-width:0!important;min-height:43px!important;padding:0 12px!important;border:1px solid #494038!important;border-radius:11px!important;background:#302b26!important;color:#d7d0c6!important;font-size:12px!important}
 .shell>header .mobile-menu-toggle{display:none!important}
 #appContent #vtiMainNav,#appContent #vtiMainNav.mobile-nav-open{display:flex!important;position:relative!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;width:100%!important;max-width:100%!important;height:auto!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;scroll-snap-type:x proximity!important;margin:0 0 12px!important;padding:7px 8px 9px!important;background:#141416!important;border-bottom:1px solid #28282c!important;border-radius:0!important;box-shadow:none!important;transform:none!important;visibility:visible!important;pointer-events:auto!important}
 #appContent #vtiMainNav .tab,#appContent #vtiMainNav .tab[data-view="intro"],#appContent #vtiMainNav .tab[data-view="backtest"],#appContent #vtiMainNav .tab[data-view="admin"]:not([hidden]){flex:0 0 auto!important;width:auto!important;min-height:41px!important;padding:10px 12px!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:#b5b5be!important;font-size:12px!important;font-weight:700!important;white-space:nowrap!important;scroll-snap-align:start!important}
 #appContent #vtiMainNav .tab.active{background:#242429!important;border-color:#36302a!important;border-bottom:2px solid #d7ab4d!important;color:#f0c66c!important}
 #appContent #vtiMainNav .tab::before{display:none!important}
 #appContent #vtiMainNav .tab[hidden]{display:none!important}
 .mobile-nav-backdrop{display:none!important}
 body.vti-menu-open{overflow:auto!important}
}

/* 2026-09-24: compact, app-like VTI mobile header. Overrides earlier experiments. */
@media(max-width:760px){
 body{background:#0d1012!important}
 .shell{padding:0 12px calc(28px + env(safe-area-inset-bottom))!important}
 .shell>header{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;gap:8px!important;
  padding:12px 0 10px!important;margin:0!important;
  background:#0d1012!important;border:0!important;border-bottom:1px solid #293136!important;
  min-height:66px!important
 }
 .shell>header .brand{width:auto!important;min-width:0!important;gap:9px!important}
 .shell>header .vti-brand-logo{
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  object-fit:cover!important;border:0!important;border-radius:10px!important;
  box-shadow:0 0 0 1px #5a4728!important
 }
 .shell>header .brand>div{min-width:0!important}
 .shell>header .brand b{
  display:block!important;max-width:100%!important;
  font-size:clamp(12px,3.2vw,15px)!important;line-height:1.2!important;
  letter-spacing:.02em!important;white-space:normal!important;color:#f1c45b!important
 }
 .shell>header .header-actions{
  width:auto!important;min-width:0!important;display:flex!important;
  flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;
  gap:5px!important
 }
 .shell>header .header-actions #themeToggle,
 .shell>header #languageSelect,
 .shell>header #logout{
  box-sizing:border-box!important;width:34px!important;min-width:34px!important;
  max-width:34px!important;height:36px!important;min-height:36px!important;
  padding:0!important;border-radius:10px!important;
  background:#1d2428!important;border:1px solid #354046!important;
  color:#f1c45b!important;box-shadow:none!important
 }
 .shell>header .header-actions #themeToggle{font-size:17px!important}
 .shell>header #languageSelect{
  font-size:13px!important;appearance:none!important;-webkit-appearance:none!important;
  text-align:center!important;text-align-last:center!important;cursor:pointer!important
 }
 .shell>header #languageSelect option{font-size:14px!important}
 .shell>header #logout{
  font-size:0!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;overflow:hidden!important
 }
 .shell>header #logout::before{content:"↪"!important;font-size:22px!important;line-height:1!important}
 .shell>header #logout[hidden]{display:none!important}
 .shell>header .mobile-menu-toggle{display:none!important}
 #appContent #vtiMainNav,#appContent #vtiMainNav.mobile-nav-open{
  background:#0d1012!important;padding:9px 0 11px!important;margin:0 0 12px!important;
  gap:6px!important;border:0!important;border-bottom:1px solid #293136!important;
  overflow-x:auto!important;scrollbar-width:none!important
 }
 #appContent #vtiMainNav .tab,#appContent #vtiMainNav .tab[data-view="intro"],
 #appContent #vtiMainNav .tab[data-view="backtest"],
 #appContent #vtiMainNav .tab[data-view="admin"]:not([hidden]){
  min-height:36px!important;padding:8px 11px!important;font-size:12px!important;
  background:transparent!important;border:1px solid transparent!important;
  border-radius:9px!important;color:#b5bec3!important
 }
 #appContent #vtiMainNav .tab.active{
  background:#f1c45b!important;border-color:#f1c45b!important;
  color:#171b1e!important;box-shadow:none!important
 }
 #dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #dashboard .stats article{min-height:90px!important;border-radius:12px!important}
 #dashboard .stats article:last-child{grid-column:1/-1}
 #dashboard .panel{margin-top:12px!important;border-radius:13px!important}
 .site-footer{margin-top:22px!important}
}
@media(max-width:380px){
 .shell>header{gap:5px!important}
 .shell>header .vti-brand-logo{width:38px!important;height:38px!important;flex-basis:38px!important}
 .shell>header .brand b{font-size:11px!important}
 .shell>header .header-actions{gap:4px!important}
 .shell>header .header-actions #themeToggle,.shell>header #languageSelect,.shell>header #logout{width:31px!important;min-width:31px!important;max-width:31px!important}
}


/* Compact horizontal pill filters for VTI Soccer Scanner and Parlay Builder. */
@media (max-width:760px){
 #scanner .board-filter,
 #parlay .parlay-market-filter{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:6px!important;
  max-width:100%!important;min-width:0!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch;
  scrollbar-width:none!important;
  margin:8px 0 12px!important;padding:3px 0 7px!important;
  scroll-snap-type:x proximity;
 }
 #scanner .board-filter::-webkit-scrollbar,
 #parlay .parlay-market-filter::-webkit-scrollbar{display:none!important}
 #scanner .board-filter .board-filter-btn,
 #parlay .parlay-market-filter .parlay-market-btn{
  box-sizing:border-box!important;display:inline-flex!important;
  flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:0!important;min-height:32px!important;
  padding:7px 12px!important;margin:0!important;
  border:1px solid #414b50!important;border-radius:999px!important;
  background:#263136!important;color:#adb6c0!important;
  font-size:10px!important;font-weight:800!important;line-height:1.2!important;
  letter-spacing:.055em!important;white-space:nowrap!important;
  box-shadow:none!important;scroll-snap-align:start;
 }
 #scanner .board-filter .board-filter-btn.active,
 #parlay .parlay-market-filter .parlay-market-btn.active{
  background:#f5c760!important;border-color:#d5aa4c!important;
  color:#17191c!important;
 }
 #scanner .board-filter .board-filter-btn:focus-visible,
 #parlay .parlay-market-filter .parlay-market-btn:focus-visible{
  outline:2px solid #f5c760!important;outline-offset:2px!important;
 }
 body[data-theme="day"] #scanner .board-filter .board-filter-btn:not(.active),
 body[data-theme="day"] #parlay .parlay-market-filter .parlay-market-btn:not(.active){
  background:#edf0f1!important;color:#536069!important;border-color:#c8d0d4!important;
 }
}


/* 2026-09-25: only change active header menu highlight from yellow to charcoal. */
@media(max-width:760px){
 #appContent #vtiMainNav .tab.active{
   background:#1b1f25!important;
   color:#f1c45b!important;
   border-color:#36302a!important;
   box-shadow:none!important;
 }
 #appContent #vtiMainNav .tab.active::before{color:#f1c45b!important}
}


/* 2026-09-25: exact sampled charcoal from reference active Dashboard tab. */
@media(max-width:760px){
 #appContent #vtiMainNav .tab.active{
   background:rgb(25,28,33)!important;
   color:#f1c45b!important;
 }
}


/* 2026-09-25: restore compact, readable parlay pick rows on phones.
   Scoped to the builder: do not change the classic Soccer Scanner cards. */
@media(max-width:760px){
 #parlayChoices{display:grid!important;gap:8px!important}
 #parlayChoices .choice{
   display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;
   align-items:center!important;gap:10px!important;
   min-height:0!important;padding:11px 12px!important;margin:0!important;
   background:#222b30!important;border:1px solid #3b484e!important;
   border-radius:12px!important;box-shadow:none!important;
 }
 #parlayChoices .choice input[type="checkbox"]{
   width:20px!important;height:20px!important;min-height:20px!important;
   margin:0!important;align-self:center!important;accent-color:#b99247!important;
 }
 #parlayChoices .choice>span{display:block!important;min-width:0!important;width:100%!important}
 #parlayChoices .vti-fixture{
   display:grid!important;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;
   flex-direction:row!important;align-items:center!important;gap:5px!important;
   width:100%!important;
 }
 #parlayChoices .vti-fixture>.vti-team,
 #parlayChoices .vti-fixture>.vti-team:last-child{
   display:flex!important;align-items:center!important;justify-content:flex-start!important;
   min-width:0!important;gap:5px!important;
 }
 #parlayChoices .vti-fixture .vti-vs{
   align-self:center!important;margin:0!important;text-align:center!important;
   font-size:10px!important;text-transform:uppercase!important;
 }
 #parlayChoices .vti-fixture .vti-team-crest{
   flex:0 0 23px!important;width:23px!important;height:23px!important;
   font-size:9px!important;
 }
 #parlayChoices .vti-fixture .vti-team-name{
   font-size:clamp(10px,2.8vw,13px)!important;line-height:1.25!important;
   text-align:left!important;white-space:normal!important;overflow-wrap:break-word!important;
 }
 #parlayChoices .choice b{font-size:12px!important;line-height:1.3!important}
 #parlayChoices .choice small{
   display:block!important;margin-top:5px!important;font-size:11px!important;
   line-height:1.35!important;color:#aeb9be!important;
 }
 #parlayChoices .choice:has(input:checked){
   border-color:#b99247!important;background:#2d3333!important;
   box-shadow:inset 3px 0 #b99247!important;
 }
}

/* Compact scanner only; desktop and Parlay Builder retain their existing layouts. */
@media(max-width:760px){
 #scannerRows{display:grid!important;gap:9px!important}
 #scannerRows .pick-card.vti-mobile-compact{
  position:relative;box-sizing:border-box;width:100%;min-width:0;min-height:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px 10px!important;align-items:center!important;text-align:left!important;
  padding:12px 13px!important;margin:0!important;
  background:#1e2023!important;border:1px solid #45464a!important;
  border-left:4px solid #d6aa48!important;border-radius:13px!important;
  box-shadow:none!important;color:#f4f4f5!important
 }
 #scannerRows .pick-card.vti-mobile-compact[hidden]{display:none!important}
 #scannerRows .vti-mobile-compact .pick-match{
  grid-column:1/-1!important;min-width:0!important;margin:0!important;
  padding:0!important;border:0!important
 }
 #scannerRows .vti-mobile-compact .pick-match>b{font-size:clamp(14px,3.9vw,18px)!important;line-height:1.35!important}
 #scannerRows .vti-mobile-compact .pick-match small{display:none!important}
 #scannerRows .vti-mobile-compact .pick-match small:first-of-type{
  display:block!important;margin-top:4px!important;font-size:11px!important;
  line-height:1.35!important;color:#aeb5bd!important
 }
 #scannerRows .vti-mobile-compact .vti-fixture{
  display:flex!important;flex-wrap:wrap!important;flex-direction:row!important;
  align-items:center!important;gap:4px 7px!important;width:100%!important
 }
 #scannerRows .vti-mobile-compact .vti-fixture .vti-team-name{font-size:clamp(14px,3.8vw,18px)!important}
 #scannerRows .vti-mobile-compact .vti-fixture .vti-team-crest{width:23px!important;height:23px!important;flex-basis:23px!important}
 #scannerRows .vti-mobile-compact .pick-market{
  grid-column:1!important;grid-row:auto!important;min-width:0!important;
  padding:0!important;margin:0!important;border:0!important;
  font-size:13px!important;line-height:1.4!important;font-weight:800!important
 }
 #scannerRows .vti-mobile-compact .pick-market .verified{display:block!important;width:max-content;max-width:100%;margin:4px 0 0!important;font-size:9px!important}
 #scannerRows .vti-mobile-compact .pick-odds{
  grid-column:2!important;align-self:center!important;justify-self:end!important;
  font-size:21px!important;font-weight:900!important;color:#eac05f!important;
  white-space:nowrap!important;padding:0!important;margin:0!important
 }
 #scannerRows .vti-mobile-compact>div:nth-child(4){
  grid-column:1/-1!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;padding:0!important;margin:0!important
 }
 #scannerRows .vti-mobile-compact>div:nth-child(4) .vti-score{font-size:12px!important;padding:5px 9px!important}
 #scannerRows .vti-mobile-compact>div:nth-child(4) small{font-size:11px!important}
 #scannerRows .vti-mobile-compact .alert-metrics,
 #scannerRows .vti-mobile-compact .alert-details,
 #scannerRows .vti-mobile-compact .refresh-diff,
 #scannerRows .vti-mobile-compact .pick-match small:not(:first-of-type){display:none!important}
 #scannerRows .vti-mobile-compact.vti-mobile-expanded .alert-metrics{display:flex!important;grid-column:1/-1!important;gap:6px!important;margin:4px 0!important}
 #scannerRows .vti-mobile-compact.vti-mobile-expanded .alert-metrics span{flex:1 1 80px!important;min-width:0!important}
 #scannerRows .vti-mobile-compact.vti-mobile-expanded .alert-details{display:block!important;grid-column:1/-1!important;margin:0!important}
 #scannerRows .vti-mobile-compact.vti-mobile-expanded .pick-match small{display:block!important}
 #scannerRows .vti-mobile-compact .vti-mobile-expand{
  grid-column:1/-1!important;display:block!important;text-align:right!important;
  padding-top:5px!important;border-top:1px solid #383b40!important;
  color:#e2b85b!important;font-size:11px!important;font-weight:800!important
 }
 #scannerRows .vti-mobile-load-more{
  display:block;width:100%;min-height:44px;padding:12px;margin:4px 0 12px;
  border:1px solid #ae8a3d;border-radius:11px;background:#262a2d;
  color:#e9bd5a;font-size:13px;font-weight:800
 }
}
@media(min-width:761px){#scannerRows .vti-mobile-expand{display:none!important}#scannerRows .vti-mobile-load-more{display:none!important}}


/* VTI charcoal selection theme: replace yellow-filled scanner controls only.
   Preserve gold lettering, gold accents and existing card layout. */
@media (max-width:760px){
  #scanner .scanner-range .scanner-range-btn.active,
  #scanner .board-filter .board-filter-btn.active{
    background:#191c21!important;
    color:#f1c45b!important;
    border-color:#57472e!important;
    box-shadow:none!important;
  }
  /* Keep Refresh Board gold-highlighted while other active controls stay charcoal. */
  #scanner .scanner-refresh-bar #refreshVtiBoard.gold{
    background:#f1c45b!important;
    color:#17191c!important;
    border:1px solid #f1c45b!important;
    box-shadow:none!important;
  }
}


/* Basketball scanner refresh: wide primary action on mobile. */
@media (max-width:760px){
  .basketball-scanner .scanner-refresh-bar button,
  #basketballScanner .scanner-refresh-bar button{
    width:72%!important;
    min-width:280px!important;
    min-height:56px!important;
    padding:14px 22px!important;
  }
}