:root{
  --bg:#FFFFFF;
  --paper:#FAFAF8;
  --ink:#14171A;
  --dim:#6B7280;
  --navy:#1D3557;
  --win:#1F7A4C;
  --loss:#B23A32;
  --line:#E3E3DE;
}
html[data-theme="dark"]{
  --bg:#12151A;
  --paper:#1A1E24;
  --ink:#EDEAE2;
  --dim:#8B9099;
  --navy:#7BA0CC;
  --win:#5FA772;
  --loss:#D06860;
  --line:#33383F;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .15s, color .15s;
}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; border-bottom:2px solid var(--ink);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:14px;
}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-name{font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:0.03em;}
.brand-name, .brand-mark { text-decoration:none; }
header a.brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
nav{display:flex; align-items:center; gap:26px;}
nav a{color:var(--dim); text-decoration:none; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;}
nav a.active{color:var(--ink); border-bottom:2px solid var(--navy); padding-bottom:2px;}
.theme-toggle{
  display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--ink);
  border-radius:20px;
  color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.05em; padding:6px 12px; cursor:pointer;
}
.theme-toggle:hover{background:var(--paper);}

.hero{padding:52px 0 0;}
.hero h1{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:38px;
  letter-spacing:-0.01em; margin-bottom:10px; text-transform:uppercase;
}
.hero p.sub{color:var(--dim); font-size:16px; margin-bottom:28px;}

.strip-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--dim); margin-bottom:10px;
}
.strip-row{display:flex; gap:3px; flex-wrap:wrap;}
.day{width:13px; height:13px;}
.day.w{background:var(--win);}
.day.l{background:var(--loss);}
.day.p{background:var(--dim); opacity:0.3;}
.day.n{background:var(--paper); border:1px solid var(--line);}

.stat-line{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-top:22px;
}
.stat-line > div{
  font-family:'IBM Plex Mono',monospace; padding:16px 18px;
  border-right:1px solid var(--line);
}
.stat-line > div:last-child{border-right:none;}
.stat-num{display:block; font-size:24px; font-weight:500;}
.stat-num.pos{color:var(--win);}
.stat-num.neg{color:var(--loss);}
.stat-cap{display:block; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;}

section{padding:40px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;}
h2{font-family:'Archivo',sans-serif; font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;}
.see-all{font-size:13px; color:#7BA0CC; text-decoration:none; font-weight:500;}
.empty-state{color:var(--dim); font-size:14px;}
.disclaimer{color:var(--dim); font-size:12px; margin-top:14px;}

.pagination{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.page-link{color:var(--navy); text-decoration:none; font-weight:500;}
.page-link.disabled{color:var(--line); pointer-events:none;}
.page-status{color:var(--dim);}

.filter-bar{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:20px 0;
}
.filter-bar + .filter-bar{
  border-top:none; padding-top:0;
}
.filter-pill{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--dim); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:6px 12px; transition:border-color .15s, color .15s;
}
.filter-pill:hover{border-color:var(--ink); color:var(--ink);}
.filter-pill.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}

.picks{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px;}
.ticket{
  background:var(--bg); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .15s;
}
.ticket:hover{border-color:var(--navy);}
.ticket-img{
  width:100%; height:260px; background:var(--paper);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dim);
  padding:8px;
}
.ticket-img img{width:100%; height:100%; object-fit:contain;}
.ticket-body{padding:16px;}
.ticket-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.book-tag{
  font-size:10px; font-weight:500; color:var(--bg); background:var(--navy);
  padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em;
}
.ticket-time{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--dim);}
.ticket-title{font-size:14px; font-weight:500; margin-bottom:12px; line-height:1.4;}
.ticket-stats{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--dim);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;
}
.ticket-stats b{color:var(--ink); font-weight:500;}
.ticket-stats .ev b{color:var(--win);}

.badge{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:20px; border:1px solid var(--line);
}
.badge-pending{color:var(--dim);}
.badge-win{background:var(--win); color:var(--bg); border-color:var(--win);}
.badge-loss{background:var(--loss); color:var(--bg); border-color:var(--loss);}
.badge-push, .badge-void{color:var(--dim);}

.results-table{width:100%; border-collapse:separate; border-spacing:0 12px; font-size:14px;}
.results-table th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--dim); text-transform:uppercase; letter-spacing:0.06em;
  padding-bottom:10px; font-weight:500; border-bottom:1px solid var(--ink);
}
.results-table td{padding:14px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:border-color .15s;}
.results-table td:first-child{border-left:1px solid var(--line); border-top-left-radius:14px; border-bottom-left-radius:14px;}
.results-table td:last-child{border-right:1px solid var(--line); border-top-right-radius:14px; border-bottom-right-radius:14px;}
.results-table tr:hover td{border-color:var(--navy);}
.month-name{font-family:'Archivo',sans-serif; font-weight:600; font-size:14px; text-transform:uppercase;}
.mono{font-family:'IBM Plex Mono',monospace;}
.pos{color:var(--win);}
.neg{color:var(--loss);}
.graph-thumb{
  width:110px; height:60px; background:var(--paper); border:1px solid var(--line);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--dim); font-family:'IBM Plex Mono',monospace;
}
.graph-thumb-img{
  width:110px; height:60px; object-fit:cover; border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer; transition:transform .15s, border-color .15s;
}
.graph-thumb-img:hover{ transform:scale(1.05); border-color:var(--navy); }

.lightbox{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.82);
  align-items:center; justify-content:center; z-index:1000; cursor:zoom-out;
  padding:32px;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:100%; max-height:100%; border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}

.links-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px;}
.link-card{
  background:var(--bg); border:1px solid var(--line); border-radius:14px; transition:border-color .15s;
  padding:16px; display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
}
.link-card:hover{border-color:var(--navy);}
.link-icon{
  width:32px; height:32px; background:var(--ink); color:var(--bg); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  font-family:'Archivo',sans-serif; font-weight:800; flex-shrink:0;
}
.link-name{font-size:14px; font-weight:500;}
.link-sub{font-size:12px; color:var(--dim); margin-top:1px;}

footer.site-footer{padding:24px 0 40px; display:flex; justify-content:space-between; align-items:center; color:var(--dim); font-size:13px;}
footer.site-footer a{color:var(--dim);}

@media (max-width:600px){
  header{flex-wrap:wrap; gap:14px; padding:16px 0;}
  .brand-name{font-size:14px;}
  nav{width:100%; justify-content:space-between; gap:12px;}
  .hero h1{font-size:28px;}
  nav{gap:14px;}
  .stat-line{grid-template-columns:repeat(2,1fr);}
  footer.site-footer{flex-direction:column; gap:8px; align-items:flex-start;}

  .results-table thead{display:none;}
  .results-table, .results-table tbody, .results-table tr, .results-table td{display:block; width:100%;}
  .results-table{border:none;}
  .results-table tr{
    border:1px solid var(--line); border-radius:14px; margin-bottom:12px; padding:12px 14px;
  }
  .results-table td{
    border:none; padding:6px 0; display:flex; align-items:center; justify-content:space-between; gap:12px;
    border-radius:0;
  }
  .results-table td::before{
    content:attr(data-label); font-family:'IBM Plex Mono',monospace; font-size:11px;
    color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; flex-shrink:0;
  }
  .results-table .month-name{font-size:16px;}
}

.odds-grid-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:18px;
}
.odds-grid{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  white-space:nowrap;
}
.odds-grid th{
  text-align:left;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--dim); text-transform:uppercase; letter-spacing:0.05em;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--paper);
}
.odds-grid td{
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.odds-grid tr.game-header td{
  background:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--dim);
  padding:8px 12px;
}
.odds-grid td.team-cell, .odds-grid th.team-col{
  position:sticky; left:0;
  background:var(--bg);
  font-weight:500;
  min-width:150px;
}
.odds-grid tr.game-header td.team-cell{ background:var(--paper); }
.odds-chip{
  display:inline-block; min-width:56px; text-align:center;
  border:1px solid var(--line); border-radius:6px;
  padding:5px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
}
.odds-chip.empty{ border-style:dashed; color:var(--dim); }
.odds-point{ color:var(--dim); font-size:11px; margin-left:4px; }

.odds-scroll-top{
  overflow-x:auto;
  overflow-y:hidden;
  height:16px;
  margin-bottom:2px;
}
.odds-scroll-top-inner{
  height:1px;
}

.odds-chip.best{
  background:var(--win);
  border-color:var(--win);
  color:#fff;
  font-weight:500;
}

/* Keeps the book-name header row pinned to the top of the screen while
   scrolling down through many games - so you never lose track of which
   column is which book, especially useful on mobile. */
.odds-grid thead th{
  position:sticky;
  top:0;
  z-index:2;
}
/* The top-left "Matchup" header cell is sticky in BOTH directions (pinned
   row + pinned column), so it needs to sit above both when they overlap. */
.odds-grid thead th.team-col{
  z-index:3;
}

/* Fixes the spread/total point label being unreadable gray-on-green when
   a price is highlighted as the best available. */
.odds-chip.best .odds-point{
  color:#fff;
  opacity:0.85;
}

/* ============================================================
   ADD THIS BLOCK too. Also REMOVE the style-ADDITION-5.css block if you
   already added it - that approach (bounded height/inner scroll) is being
   replaced by this one (floating header clone, normal page scroll).
   ============================================================ */

.odds-float-header{
  position:fixed;
  top:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  z-index:50;
}
.odds-float-header table{
  border-collapse:collapse;
}
.odds-float-header th{
  position:static !important; /* undo the regular sticky-th rule on the clone */
}

/* ============================================================
   ADD THIS BLOCK too. Styles the horizontal scrollbars on the screener
   grid (top phantom bar, main grid, floating header clone) so they use
   the site's existing theme colors instead of the browser/OS default -
   which otherwise looks like a plain light-gray bar even in dark mode.
   ============================================================ */
 
.odds-scroll-top,
.odds-grid-wrap,
.odds-float-header{
  scrollbar-width:thin;                 /* Firefox */
  scrollbar-color:var(--dim) var(--paper); /* Firefox: thumb, track */
}
.odds-scroll-top::-webkit-scrollbar,
.odds-grid-wrap::-webkit-scrollbar,
.odds-float-header::-webkit-scrollbar{
  height:10px;
  width:10px;
}
.odds-scroll-top::-webkit-scrollbar-track,
.odds-grid-wrap::-webkit-scrollbar-track,
.odds-float-header::-webkit-scrollbar-track{
  background:var(--paper);
}
.odds-scroll-top::-webkit-scrollbar-thumb,
.odds-grid-wrap::-webkit-scrollbar-thumb,
.odds-float-header::-webkit-scrollbar-thumb{
  background:var(--dim);
  border-radius:20px;
  border:2px solid var(--paper);
}
.odds-scroll-top::-webkit-scrollbar-thumb:hover,
.odds-grid-wrap::-webkit-scrollbar-thumb:hover,
.odds-float-header::-webkit-scrollbar-thumb:hover{
  background:var(--ink);
}