/* CampeonBet /sports clone — tokens lifted verbatim from the live build:
   --c-* = campeonbet shell (index-BxmbkqBN.css), --p-* = Altenar widget theme blob. */
:root{
  /* shell palette */
  --c-a:#000000; --c-b:#ffffff; --c-c:#1d1d1e; --c-d:#0f4cff; --c-e:#bbbcc3;
  --c-f:#2a2a2c; --c-g:#343437; --c-h:#5f87ff; --c-k:#ececec; --c-l:#bbfa01;
  --c-m:#dadada; --c-q:#48484c; --c-x:#31c48d; --c-y:#e3a008; --c-z:#f05252;
  /* page chrome — measured off the live page (body #1d1d1e, header bar #2a2a2c) */
  --page:#1d1d1e; --hdr-bg:#2a2a2c;
  /* widget palette */
  --p-bg:#1d1d1e; --p-panel:#0a1c29; --p-raise:#1c3143; --p-raise2:#243b52;
  --p-live:#fb3333; --p-sel:#acbdca; --p-line:rgba(255,255,255,.08);
  --p-mut:rgba(255,255,255,.54); --p-injury:#4cb04f; --p-gold:#d4b138;
  --r:10px; --r-sm:6px; --hdr-h:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* the shell is Work Sans, the sportsbook widget is Inter — both, as upstream */
body{
  margin:0;background:var(--page);color:var(--c-b);
  font:400 14px/1.4 "Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.layout{font-family:Inter,"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#979797;border-radius:12px}

/* ───────────── header ───────────── */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg)}
.hdr-in{display:flex;align-items:center;gap:24px;max-width:1920px;margin:0 auto;padding:8px 16px}
.logo img{height:22px;width:auto}
.logo{display:flex;align-items:center}
/* burger + compact logo (mobile header) */
.burger{display:none;align-items:center;padding:6px;color:var(--c-e)}
.burger img{width:22px;height:22px}
.logo-mini{display:none;height:22px;width:auto}

.nav{display:flex;align-items:center;gap:20px;flex:1;min-width:0;overflow:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-a{
  color:var(--c-b);text-decoration:none;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  padding:11px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-a:hover{color:var(--c-l)}
.nav-a.is-active{color:var(--c-l);border-bottom-color:var(--c-l)}
.hdr-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  display:flex;align-items:center;gap:2px;color:var(--c-e);background:var(--c-g);
  border-radius:12px;padding:8px;transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--c-q);color:var(--c-b)}
.icon-btn svg{width:20px;height:20px}
.lang{padding:8px 10px;font-weight:700;text-transform:uppercase;font-size:13px}
.lang .caret{width:10px;height:10px;margin-left:2px}
/* campeonbet's buttons, measured: Work Sans 700 14/20, 6px 16px, r12 -> 32px tall */
.btn{border-radius:12px;padding:6px 16px;font-weight:700;font-size:14px;line-height:20px;white-space:nowrap;transition:filter .15s}
.btn:hover{filter:brightness(1.12)}
.btn-login{background:var(--c-g);color:var(--c-b)}
.btn-register{background:var(--c-d);color:var(--c-b)}

/* ───────────── layout ───────────── */
.layout{
  display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:12px;
  max-width:1920px;margin:0 auto;padding:12px 16px 64px;align-items:start;
}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
.col-l,.col-r{position:sticky;top:calc(var(--hdr-h) + 12px)}
/* a panel the operator's desktop layout leaves out (app.js compose()) */
@media(min-width:600px){[data-off-d]{display:none!important}}
/* ...and a side column a page's layout leaves empty (live: no left one) */
@media(min-width:600px){
  .layout.no-start{grid-template-columns:minmax(0,1fr) 280px}
  .layout.no-end{grid-template-columns:280px minmax(0,1fr)}
  .layout.no-start.no-end{grid-template-columns:minmax(0,1fr)}
  .no-start>.col-l,.no-end>.col-r{display:none}
}

/* ───────────── panels ───────────── */
.panel{background:var(--p-panel);border-radius:var(--r);overflow:hidden}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px}
.panel-t{font-weight:600;font-size:14px}
.panel-bd{padding:0 0 6px}
.panel-bd.empty{padding:16px 12px;color:var(--p-mut);font-size:13px}
.collapse{color:var(--p-mut);display:flex;padding:2px}
.collapse svg{width:16px;height:16px}
.collapse:hover{color:var(--c-b)}
.tabs-hd{padding-bottom:6px}
.tabs{display:flex;gap:12px;min-width:0}
.tab{
  font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--p-mut);
  padding:2px 0 6px;border-bottom:2px solid transparent;white-space:nowrap;text-transform:uppercase;
}
.tab.is-on{color:var(--c-b);border-bottom-color:var(--c-b)}
.cnt{
  display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
  margin-left:3px;border-radius:8px;background:var(--p-raise);font-size:10px;
}

/* league + sport rows */
.row{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  font-size:13px;font-weight:600;text-align:left;transition:background .12s;
}
.row:hover{background:var(--p-raise)}
.row .ico{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center}
.row .ico img{width:100%;height:100%;object-fit:contain}
.row .flag img{border-radius:3px;height:16px;object-fit:cover}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .chev{width:14px;height:14px;color:var(--p-mut);flex:0 0 14px}
.badge-live{
  background:var(--p-live);color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em;
  padding:2px 5px;border-radius:4px;flex:0 0 auto;text-transform:uppercase;
}

/* ───────────── top events ───────────── */
/* the operator's carousel: fixed-width slides (their layout's slideWidth), scrolled */
.featured{position:relative;min-width:0}
.top-events{
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--slide-w,300px);gap:12px;min-width:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
}
.top-events::-webkit-scrollbar{display:none}
.top-events .te{scroll-snap-align:start}
.te{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--p-panel);
  min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px;text-align:left;isolation:isolate;
}
.te-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.te::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,28,41,.05) 0%,rgba(10,28,41,.55) 52%,rgba(10,28,41,.93) 100%)}
.te-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.te-when{font-size:16px;font-weight:700;line-height:1.15}
/* measured (live card): LIVE 12-28, clock 36, league 57, names 78/97 - 8px apart */
.te-date{font-size:12px;line-height:13px;color:var(--p-mut);font-weight:500}
.te-champ{font-size:12px;line-height:13px;color:var(--p-mut);margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-jerseys{display:flex;flex:0 0 auto}
/* each team image in a 54px ring, the second overlapping the first (measured) */
.te-j{width:54px;height:54px;border-radius:50%;background:var(--p-panel);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:0 0 54px}
.te-j+.te-j{margin-left:-8px}
.te-j img{width:28px;height:28px;object-fit:contain}
.te-names{margin:8px 0 10px;font-size:14px;font-weight:600;line-height:15px;display:flex;flex-direction:column;gap:4px}
.te-name{display:flex;align-items:center;gap:8px;min-width:0}
.te-name .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-sc{display:flex;gap:8px;flex:0 0 auto;font-weight:500}
.te-sc i{font-style:normal;color:var(--c-h)}  /* current set / games, blue as on the live card */
.te-live{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.te-live .badge-live{font-size:12px;line-height:12px;font-weight:500;padding:2px 4px;border-radius:4px;letter-spacing:0}
.te-odds{display:flex;gap:4px}
.odd{
  position:relative;z-index:1;overflow:hidden;
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--p-raise);border:1px solid transparent;border-radius:var(--r-sm);
  padding:7px 4px;transition:background .12s;
}
/* price moved on the last update: drifted out = green top-right, shortened = red bottom-left */
.odd.up::after,.odd.dn::after{content:"";position:absolute;width:0;height:0;border:6px solid transparent}
.odd.up::after{top:0;right:0;border-top-color:var(--c-x);border-right-color:var(--c-x)}
.odd.dn::after{bottom:0;left:0;border-bottom-color:var(--c-z);border-left-color:var(--c-z)}
.odd:hover{background:var(--p-sel);color:var(--c-a)}
.odd .l{font-size:10px;color:var(--p-mut);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:2}
.odd .v{order:1}
.odd:hover .l{color:rgba(0,0,0,.6)}
/* OddBox: 500 14/16 (the operator's theme) */
.odd .v{font-size:14px;line-height:16px;font-weight:500}
.odd.is-off{cursor:default;opacity:.65}
.odd.is-off:hover{background:var(--p-raise);color:inherit}
.odd .lock{width:13px;height:13px;opacity:.7}
.te-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:0}
/* the names column runs up to the pills, so scores sit at its right edge (measured) */
.te-mid .te-names{min-width:0;flex:1}
.te-pills{display:flex;gap:4px;flex:0 0 auto;margin-bottom:10px}
/* BB / 0% pill: 500 12/12, 2px pad, r2, uppercase (measured) */
.pill{background:#0f4dff;border:1px solid #0f4dff;color:#fff;font-size:12px;line-height:12px;font-weight:500;padding:2px;border-radius:2px;text-transform:uppercase}
/* the featured card's price label is white, as big as the price (OddBoxLabel) */
.te .odd{padding:4px;gap:0}   /* 42px: 4px pad around price + label (measured) */
.te .odd .l{font-size:14px;line-height:16px;font-weight:400;color:var(--c-b)}
.te .odd .v{font-size:14px;line-height:16px;font-weight:500}

/* ───────────── boosted odds ───────────── */
/* upstream: the blue bar is the HEADER only — the cards sit below it on the
   page background, each with a gold left edge. */
.boosted{display:flex;flex-direction:column;gap:8px;min-width:0}
.boosted-hd{
  display:flex;align-items:center;gap:8px;background:#0f4dff;height:40px;
  border-radius:var(--r-sm);padding:12px;font-size:14px;line-height:15px;font-weight:600;
}
.bo-ico{width:16px;height:16px}
.boosted-rail{position:relative;min-width:0}
/* 262px cards on both devices, as theirs (measured) */
.boosted-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:262px;gap:10px;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;min-width:0;
}
/* the operator's imageType 0 on a device: no team images in that widget's cards and rows */
@media(min-width:600px){[data-noimg-d] .bo-title img,[data-noimg-d] .ev-j{display:none}}
@media(max-width:599px){[data-noimg-m] .bo-title img,[data-noimg-m] .ev-j{display:none}}
.boosted-track::-webkit-scrollbar{display:none}
/* measured: r10, a 2px gold LEFT edge only, #1c1c1c under the operator's card art
   (their layout's betCardBackgroundURL, set by app.js as --bo-bg) */
.bo{
  position:relative;background:rgb(28,28,28) var(--bo-bg,none) center/cover no-repeat;border-left:2px solid var(--p-gold);
  border-radius:var(--r);min-height:186px;padding:6px 12px 12px;
  display:flex;flex-direction:column;text-align:left;min-width:0;
}
/* rows at 6 / 37 / 58 / 80 / 101 and the price at the foot (measured) */
.bo-tag{display:flex;align-items:center;gap:8px;min-height:18px}
.bo-meta{margin-top:13px}
.bo-title{margin-top:5px}
.bo-tag .gold{background:var(--p-gold);color:#fff;font-size:12px;line-height:12px;font-weight:500;padding:2px 4px;border-radius:2px;text-transform:uppercase}
.bo-meta{display:flex;align-items:center;gap:8px;font-size:12px;line-height:13px;font-weight:500;color:var(--p-mut);min-width:0;height:16px}
.bo-meta img{width:16px;height:16px;flex:0 0 16px}
.bo-meta .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bo-meta .d{margin-left:auto;flex:0 0 auto;color:var(--c-b)}
.bo-title{display:flex;align-items:center;gap:4px;font-size:12px;line-height:13px;font-weight:500;min-width:0}
.bo-title img{width:16px;height:16px;flex:0 0 16px}
.bo-title span{white-space:nowrap}
/* the combo's legs as a dotted timeline: "Pick -" white, the market grey */
.bo-legs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.bo-legs li{position:relative;padding-left:14px;font-size:12px;line-height:17px;color:var(--p-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-legs li b{color:var(--c-b);font-weight:400}
.bo-legs li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:#0f4dff}
.bo-legs li+li::after{content:"";position:absolute;left:3px;top:-10px;height:14px;width:1px;background:#0f4dff}
.bo-price{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;height:34px;margin-top:auto;background:var(--p-raise);border-radius:var(--r-sm);transition:background .12s}
.bo-price:hover{background:var(--p-sel);color:var(--c-a)}
.bo-price .was{color:var(--p-mut);text-decoration:line-through;font-size:14px;line-height:16px;font-weight:500}
.bo-price:hover .was{color:rgba(0,0,0,.55)}
.bo-price .arr{width:16px;height:16px;color:var(--p-gold)}
.bo-price .now{font-weight:500;font-size:14px;line-height:16px}
.rail-nav{
  position:absolute;top:50%;right:-6px;transform:translateY(-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;background:rgba(36,59,82,.95);
  display:grid;place-items:center;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.rail-nav svg{width:15px;height:15px}
.rail-nav:hover{background:var(--p-raise2)}

/* ───────────── live now ───────────── */
/* upstream row: [BB · clock · star] sits ABOVE the two teams in one left block;
   the championship line sits above the ODDS on the right. */
.live{border-radius:var(--r);display:flex;flex-direction:column;gap:8px}
/* measured: title 500 18/20 in a 28px row; the operator's showHeaderIcon puts the
   picked sport's icon (24px) at the right end (app.js renderTabs) */
.live-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0}  /* 28px; 32 with the icon */
.live-t{margin:0;font-size:18px;line-height:20px;font-weight:500;flex:1}
.live-ico{display:none;width:24px;height:24px;flex:0 0 24px}
.live-ico img{width:24px;height:24px}
@media(min-width:600px){[data-icon-d] .live-ico{display:block}}
.feed-status{font-size:12px;font-weight:600;color:var(--c-y);background:rgba(227,160,8,.12);border-radius:var(--r-sm);padding:3px 8px}
.live-tabs{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none}
.live-tabs::-webkit-scrollbar{display:none}
/* SportTab: 700 14/16, 6px 0; picked = white with a 2px white underline */
.lt{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:6px 0;font-size:14px;line-height:16px;
  font-weight:700;color:var(--p-mut);border-bottom:2px solid transparent;white-space:nowrap;
}
.lt img{width:16px;height:16px;flex:0 0 16px;opacity:.54}
.lt.is-on{color:var(--c-b);border-bottom-color:var(--c-b)}
.lt.is-on img{opacity:1}

/* HeaderMarkets: its own panel, 8px pad, r10 */
.mkt-hd{display:flex;gap:10px;background:var(--p-panel);border-radius:var(--r);padding:8px;padding-right:44px}
.mkt-spacer{flex:0 1 348px;min-width:150px}
.mkt-sel{flex:1 1 280px;min-width:126px}
.mkt-sel+.mkt-sel{margin-left:44px}
.mkt-sel select{
  width:100%;background:var(--p-raise);border:0;border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23ffffff8a'%3E%3Cpath d='M9.84.87A.7.7 0 0 0 10 .44.7.7 0 0 0 9.84 0H.16A.7.7 0 0 0 0 .44c0 .16.06.32.16.43l4.45 4.95a.55.55 0 0 0 .78 0L9.84.87Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px;
}

/* EventList.rowSpacing 4 · EventBox r10, its own background */
.events{display:flex;flex-direction:column;gap:4px}
.ev{position:relative;display:flex;align-items:center;gap:10px;background:var(--p-panel);border-radius:var(--r);padding:10px 12px}
.ev-left{flex:0 1 348px;min-width:150px;display:flex;flex-direction:column;gap:6px}
.ev-head{display:flex;align-items:center;gap:8px;min-height:18px}
/* measured off the live rows: BB 500 12/12 2px r2 · clock grey, a pre-match date
   white · added time in the theme's EventInjuredTime green · star 16px blue */
.ev-bb{background:#0f4dff;border:1px solid #0f4dff;color:#fff;font-size:12px;line-height:12px;font-weight:500;padding:2px;border-radius:2px;text-transform:uppercase}
.ev-time{font-size:12px;line-height:13px;color:var(--p-mut);font-weight:500}
.ev-time.pm{color:var(--c-b)}
.ev-time .inj{color:var(--p-injury)}
.ev-hr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ev-star{color:#0f4dff;width:16px;height:16px;flex:0 0 16px;pointer-events:none}
.ev-star:hover{color:var(--c-h)}
.ev-teams{display:flex;flex-direction:column;gap:4px}
.ev-team{display:flex;align-items:center;gap:4px;font-size:14px;line-height:15px;font-weight:600;min-width:0}
/* team image in a 26px circle; no image at all when the widget would show none */
.ev-j{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center}
.ev-j img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.ev-team .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-team .sc{font-size:14px;line-height:15px;font-weight:500;flex:0 0 auto;color:var(--c-b)}
.ev-team .cs{font-size:14px;line-height:15px;font-weight:500;flex:0 0 auto;color:var(--c-h)}  /* current set / games */
.ev-right{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.ev-champ{display:flex;align-items:center;gap:8px;font-size:12px;line-height:13px;color:var(--p-mut);min-width:0}
.ev-champ img{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
.ev-champ span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pre-match: booked for live coverage (event.isBooked), statistics (event.hasStats) */
.ev-booked{margin-left:auto;flex:0 0 auto;font-size:12px;line-height:12px;font-weight:500;color:#fff;padding:2px 4px;border:1px solid var(--p-mut);border-radius:2px;text-transform:uppercase}
.ev-stats{width:16px;height:16px;flex:0 0 16px;color:#fff}
.ev-champ span+.ev-stats{margin-left:auto}
/* the column's market when it is not the header's own ("Third goal" under 1x2) */
.ev-cap{font-size:12px;line-height:13px;font-weight:500;text-align:center}
/* teams without images sit 2px closer (measured: 152px cards against 176) */
.ev-teams:not(:has(.ev-j)){gap:2px}
/* the zero-margin pill: 2px 4px, no border (the BB pill has one) */
.pill.zero{padding:2px 4px;border:0}
/* their showMoreButton, closing each section: 34px, blue 1px edge, r10, 600 14/16 */
.view-all{display:grid;place-items:center;width:100%;height:34px;padding:8px 12px;background:var(--p-panel);border:1px solid #0f4dff;border-radius:var(--r);font-size:14px;line-height:16px;font-weight:600;color:var(--c-b)}
.view-all:hover{background:var(--p-raise)}
.ev-mkts{display:flex;align-items:center;gap:10px}
.ev-odds{flex:1 1 280px;min-width:126px;display:flex;gap:4px}
.ev-tot{flex:0 0 34px;display:grid;place-items:center;font-size:12px;color:var(--p-mut)}
.ev-more{position:relative;z-index:1;flex:0 0 26px;padding:0;display:grid;place-items:center;color:var(--p-mut)}
.ev-more svg{width:14px;height:14px}
.ev-more:hover{color:var(--c-b)}

/* ───────────── right column ───────────── */
.qnav{background:var(--p-panel);border-radius:var(--r);overflow:hidden}
.quick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:6px}
/* a button the operator's nav leaves out on this device (their tablet: no Results) */
@media(min-width:600px){.q[data-nolink-d]{display:none}}
@media(max-width:599px){.q[data-nolink-m]{display:none!important}}
.quick .only-m{display:none}
.q{display:grid;place-items:center;padding:8px 4px;border-radius:var(--r-sm);transition:background .12s}
.q:hover{background:var(--p-raise)}
.q.is-on{background:var(--p-raise)}
.q img{width:18px;height:18px;opacity:.85}
/* LiveIndicator: 500 12/12, 2px 4px, r4, uppercase */
.live-pill{background:var(--p-live);color:#fff;font-size:12px;line-height:12px;font-weight:500;padding:2px 4px;border-radius:4px;text-transform:uppercase}
/* ContentNavigation: links out of this page, so none is current - all white, 700 14/16.
   Desktop/tablet: a scroller, two links in view and an arrow for the rest (as theirs);
   a phone shows them all side by side (the mobile block) */
.seg{display:flex;align-items:center;padding:2px;border-top:1px solid var(--p-line)}
.seg-in{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.seg-in::-webkit-scrollbar{display:none}
.seg-b{flex:0 0 auto;min-width:calc(50% - 1px);padding:8px 12px;font-size:14px;line-height:16px;font-weight:700;color:var(--c-b);border-radius:4px;white-space:nowrap}
.seg-b:hover{background:var(--p-raise)}
.seg-next{flex:0 0 24px;height:32px;display:grid;place-items:center;color:var(--c-b)}
.seg-next[hidden]{display:none}
.seg-next svg{width:16px;height:16px}
/* Bet Mentor shows a chevron instead of the "—" while the operator's layout starts it collapsed */
.panel-mentor .expand{display:none;width:16px;height:16px;color:var(--c-b);flex:0 0 16px}
@media(min-width:600px){
  .panel-mentor[data-collapsed-d] .panel-bd,.panel-mentor[data-collapsed-d] .collapse{display:none}
  .panel-mentor[data-collapsed-d] .expand{display:block}
}
.srch{display:flex;align-items:center;gap:8px;background:var(--p-panel);border-radius:var(--r);padding:10px 12px}
.srch img{width:16px;height:16px;opacity:.6;flex:0 0 16px}
.srch input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:12px;color:var(--c-b)}
.srch input::placeholder{color:var(--p-mut)}
.betslip{padding:12px}
.bs-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px}
.bs-empty img{width:52px;height:52px;opacity:.55}
.bs-empty p{margin:0;font-size:12px;color:var(--p-mut);text-align:center}
.bs-code{border:1px solid var(--p-raise2);border-radius:var(--r-sm);padding:8px 14px;font-size:12px;font-weight:600;transition:background .12s}
.bs-code:hover{background:var(--p-raise)}
.bm{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.bm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--p-raise);border-radius:var(--r-sm);padding:10px 12px;font-size:12px;line-height:1.3}
.bm-in{width:44px;background:none;border:0;outline:0;text-align:right;font-size:13px;font-weight:600}
.bm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.bm-chip{grid-column:span 2;border:1px solid var(--c-d);border-radius:var(--r-sm);padding:9px 4px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .12s}
.bm-chip:hover{background:var(--c-d)}
.bm-chip:nth-child(4),.bm-chip:nth-child(5){grid-column:span 3}
.pb{position:relative;display:block;width:100%;text-align:left;padding:10px 12px;border-top:1px solid var(--p-line)}
.pb:first-child{border-top:0}
.pb-top{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--p-mut);margin-bottom:4px}
.pb-top img{width:14px;height:14px}
.pb-top .ep{background:var(--p-raise);border-radius:3px;padding:1px 4px;font-size:9px;font-weight:700;color:var(--c-b)}
.pb-ev{font-size:12px;font-weight:600;margin-bottom:2px}
.pb-mkt{font-size:11px;color:var(--p-mut);margin-bottom:6px}
.pb-top .pb-ev{margin:0;color:var(--c-b)}  /* no EP pill: the name sits beside the icon */
.pb-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:var(--p-raise);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;font-weight:600;transition:background .12s}
.pb-row:hover{background:var(--p-sel);color:var(--c-a)}

/* WBetSearch (measured): r8 panel, "Search bets" 600 16/18, a type picker and the
   code field side by side at 138:199, both 42px, r10 */
.bsearch{border-radius:8px}
.bsearch .panel-hd{padding:12px}
.bsearch .panel-t{font-size:16px;line-height:18px;font-weight:600}
.bsearch-row{display:grid;grid-template-columns:138fr 199fr;gap:8px;padding:0 12px 18px}
.bsearch-type{display:flex;align-items:center;justify-content:space-between;height:42px;padding:12px 10px;background:var(--p-raise);border-radius:var(--r);font-size:14px;line-height:16px;font-weight:500}
.bsearch-type svg{width:16px;height:16px;flex:0 0 16px}
.bsearch-in{height:42px;min-width:0;padding:12px 10px;background:var(--p-raise);border:1px solid var(--p-raise);border-radius:var(--r);font-size:14px;line-height:16px;color:var(--c-b);outline:0}
.bsearch-in::placeholder{color:var(--p-mut)}

/* ───────────── footer: campeonbet's own ─────────────
   Links, payment and game-provider logos, licence and responsible-gaming text,
   regulator badges, copyright - measured off their mobile page. Logos:
   extract_assets.py fetch_footer(). */
.ftr{background:var(--c-f);font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ftr-in{max-width:1180px;margin:0 auto;padding:24px 12px}
.ftr-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.ftr-links a{padding:8px 4px;font-size:12px;line-height:16px;font-weight:500;color:#fff;text-decoration:none;border-radius:6px}
.ftr-links a:hover{color:var(--c-l)}
.ftr-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ftr-logos>*{width:96px;height:56px;padding:10px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.ftr-logos img{max-width:76px;max-height:43px;object-fit:contain}
.ftr-pay{margin-top:16px;border-top:1px solid var(--c-g);padding-top:24px}
.ftr-prov{margin-top:32px;border-top:1px solid var(--c-g);padding:28px 0 24px;text-align:center}
.ftr-prov .ftr-logos{row-gap:10px;max-height:188px;overflow:hidden}  /* three rows, then "Show all" */
.ftr-all{margin-top:32px;background:var(--c-g);color:#fff;text-transform:uppercase}
.ftr-prov.is-open .ftr-logos{max-height:none}
.ftr-legal{margin-top:16px;border-top:1px solid var(--c-g);padding-top:24px;text-align:center;color:var(--c-e)}
.ftr-legal p{margin:0 0 24px;font-size:12px;line-height:16px}
.ftr-legal .ftr-att{font-size:14px;line-height:20px}
.ftr-att a{color:inherit;text-decoration:none}
.ftr-reg{gap:16px}
.ftr-copy{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;background:var(--page);font-family:"Work Sans",system-ui,sans-serif;font-size:12px;line-height:16px;color:var(--c-e)}
@media(min-width:901px){
  .ftr-links{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ftr-legal p{max-width:760px;margin-left:auto;margin-right:auto}
}

/* ───────────── the other pages ─────────────
   A sport, a league/country, a coupon, an event, live and A-Z (app.js "pages"),
   drawn after Altenar's own widget on those routes (harness screenshots,
   2026-09-28). A card or row opens its event through a link stretched over it;
   its prices (z-index 1) sit on top and are the calls to action. */
.stretch{position:absolute;inset:0;z-index:0;border-radius:inherit}
p.empty{margin:0;padding:16px 12px;background:var(--p-panel);border-radius:var(--r);color:var(--p-mut);font-size:13px}
.cnt-n{flex:0 0 auto;font-size:12px;color:var(--p-mut);font-weight:500}

/* WTopSportBar (tablet): a scrolling row of round sport icons over their names */
.topbar{display:flex;gap:4px;padding:8px 4px;background:var(--p-panel);border-radius:var(--r);overflow-x:auto;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}
.tsb{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;padding:4px 8px;border-radius:var(--r-sm);font-size:14px;line-height:16px;font-weight:600;white-space:nowrap}
.tsb:hover{background:var(--p-raise)}
.tsb img{width:36px;height:36px}

/* WBreadcrumbs: pills, the page you are on blue */
.crumbs{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.bc,.bc-back{flex:0 0 auto;display:grid;place-items:center;height:32px;padding:0 12px;background:var(--p-panel);border-radius:var(--r);font-size:14px;line-height:16px;font-weight:500;white-space:nowrap}
.bc-back{padding:0 10px}
.bc-back svg{width:16px;height:16px}
a.bc:hover,.bc-back:hover{background:var(--p-raise)}
.bc.is-on{background:#0f4dff}

/* WCoupons: icon, count, name */
.coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
.cp{display:grid;grid-template-columns:16px 1fr;gap:14px 8px;align-items:center;padding:10px 12px;background:var(--p-panel);border-radius:var(--r)}
.cp:hover{background:var(--p-raise)}
.cp img{width:16px;height:16px}
.cp-n{justify-self:end;font-size:10px;line-height:12px;color:var(--p-mut)}
.cp-t{grid-column:1/-1;font-size:13px;line-height:15px;font-weight:600}

/* menu folds (the left menu, the sport page's countries, A-Z) */
.fold>summary{list-style:none;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold[open]>summary>.chev{transform:rotate(180deg)}
.fold .fold>summary{padding-left:22px}
.row.lg{padding-left:56px;font-weight:500}
.fold .nm{color:inherit}
a.nm:hover{text-decoration:underline}

/* WSportOverview */
.sov{display:flex;flex-direction:column;gap:8px}
.sov-comp{padding:4px 0}
.sov-sport{font-size:14px}

/* WOverview / WMatchOdds / WLiveOverview: league headers over their rows */
.olist,.lo,.sov-now{display:flex;flex-direction:column;gap:8px;min-width:0}
.ol-t{margin:0;font-size:18px;line-height:20px;font-weight:500}
.grp{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 12px;background:var(--p-raise);border-radius:var(--r);font-size:14px;line-height:16px;font-weight:600;text-align:left}
.grp .ico{width:20px;height:20px;flex:0 0 20px}
.grp .ico img{width:100%;height:100%;object-fit:contain}
.grp .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-evs{display:flex;flex-direction:column;gap:4px}
.tog{display:grid;place-items:center;flex:0 0 16px;color:var(--p-mut)}
.tog svg{width:16px;height:16px}
.tog .chev{width:12px;height:12px}
.tog .minus,.is-open>.tog .chev,.is-open>.mk-hd .tog .chev{display:none}
.is-open>.tog .minus,.is-open>.mk-hd .tog .minus{display:block}
.ev-champ.ev-marks{justify-content:flex-end;min-height:16px}
/* a league's own offers on its header: EP / Bore Draw outlined, BB filled */
.pill.ol{background:none;border-color:var(--p-mut);text-transform:none;flex:0 0 auto}
.grp .pill{flex:0 0 auto}

/* WScoreboard */
.sb{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--p-panel);border-radius:var(--r)}
.sb-hd{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:16px;font-weight:500}
.sb-hd img{width:20px;height:14px;object-fit:cover;border-radius:2px}
.sb-ban{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:78px;padding:10px 16px;border-radius:var(--r);background:var(--p-raise) center/cover no-repeat;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sb-t{font-size:14px;line-height:16px;font-weight:600;text-align:center;min-width:0}
.sb-c{display:flex;flex-direction:column;align-items:center;gap:2px}
.sb-c small{font-size:14px;line-height:16px;font-weight:500}
.sb-c b{font-size:22px;line-height:24px;font-weight:600}

/* WEventDetailsMarkets: group tabs, then one box per market */
.mks{display:flex;flex-direction:column;gap:8px}
.mk-tabs{display:flex;align-items:center;gap:12px;padding:6px 8px;background:var(--p-panel);border-radius:var(--r);overflow-x:auto;scrollbar-width:none}
.mk-tabs::-webkit-scrollbar{display:none}
.mk-find{flex:0 0 28px;height:28px;display:grid;place-items:center;background:#0f4dff;border-radius:6px}
.mk-find img{width:16px;height:16px}
.mk-q{flex:0 1 180px;min-width:0;height:28px;padding:0 8px;background:var(--p-raise);border:0;border-radius:6px;outline:0;font-size:13px}
.mk{background:var(--p-panel);border-radius:var(--r)}
.mk-hd{display:flex;align-items:center;gap:8px;width:100%;padding:12px;font-size:14px;line-height:16px;font-weight:600;text-align:left}
.mk-hd .nm{flex:1;min-width:0}
.mk-odds{display:none;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;padding:0 8px 8px}
.mk.is-open .mk-odds{display:grid}
.odd.mo{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;height:40px;padding:10px 8px}
.odd.mo .n{order:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:16px;text-align:left}
.odd.mo .v{flex:0 0 auto}

/* WSportMenu (A-Z) */
.smenu .sm-tabs{padding:0 12px 8px}
.smenu .fold>summary{padding-top:12px;padding-bottom:12px}

/* WOddsFormat (measured off their widget at 1440): title 600 16/18, the picker a 40px
   r10 raised box inset 12px */
.oddsfmt .panel-t{font-size:16px;line-height:18px}
.oddsfmt-sel{display:block;padding:0 12px 12px}
.oddsfmt-sel select{
  width:100%;height:40px;padding:0 32px 0 10px;background:var(--p-raise);border:0;border-radius:var(--r);
  font-size:14px;line-height:16px;font-weight:500;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}

/* ───────────── narrow lists ─────────────
   A list's rows follow the list's OWN width, not the window's: stacked as the
   phone widget stacks them whenever the list is narrow - on a phone, in a narrow
   tablet's main column, in the live event page's side column - and the third
   market column goes first when room runs out. */
.live,.olist,.lo,.sov-now{container-type:inline-size}
@container (max-width:719px){.ev-mkts>div:nth-of-type(n+4),.mkt-hd>label:nth-of-type(n+3){display:none}}
@container (max-width:599px){
  /* ONE market column - one full-width selector (40px, r10, centred) in its 8/12px
     panel, three prices and a chevron box (measured at 393px) */
  .mkt-hd{padding:8px 12px;gap:0}
  .mkt-hd .mkt-spacer,.mkt-sel+.mkt-sel{display:none}
  .mkt-sel{flex:1 1 auto;min-width:0}
  .mkt-sel select{
    height:40px;border-radius:var(--r);padding:12px 30px 12px 10px;font-size:14px;line-height:16px;font-weight:500;
    text-align:center;text-align-last:center;background-position:right 10px center;background-size:12px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  }
  /* the row as the phone widget stacks it: BB·clock·star / league / teams / prices */
  .ev{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .ev-left,.ev-right{display:contents}
  .ev-head{order:1}
  .ev-champ{order:2;min-height:20px}
  .ev-teams{order:3}
  .ev-cap{order:4}
  .ev-mkts{order:5;gap:4px}
  .ev-mkts>.ev-tot,.ev-mkts>.ev-tot+.ev-odds{display:none}
  .ev-odds{flex:1 1 auto;min-width:0;gap:4px}
  .ev-odds .odd{height:34px;padding:8px 4px;justify-content:center}
  .ev-more{flex:0 0 40px;height:34px;background:var(--p-raise);border-radius:var(--r-sm);color:var(--c-b)}
  .ev-more svg{width:16px;height:16px}
  /* a league or coupon list's row: the date line, then the teams beside the prices */
  .olist .ev{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head marks" "teams mkts";align-items:center;gap:8px}
  .olist .ev-head{grid-area:head}
  .olist .ev-champ{grid-area:marks;min-height:0;justify-content:flex-end}
  .olist .ev-teams{grid-area:teams}
  .olist .ev-cap{display:none}
  .olist .ev-mkts{grid-area:mkts;min-width:190px}
}

/* ───────────── tablet ─────────────
   Altenar's widget picks its layout by WINDOW width (measured on their own widget,
   2026-09-28 - a 1200px container in a 1440px window still gets desktop): phone
   below 600px, tablet 600-1279 - a left column and one main column, no right
   one - desktop from 1280. app.js compose() places the operator's tablet lists. */
@media(min-width:600px) and (max-width:1279px){
  .layout{grid-template-columns:280px minmax(0,1fr)}
  .col-r{display:none}
  .layout.no-start{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .icon-btn{display:none}
  .rail-nav{display:none}
}
/* the shell's header (campeonbet's, not the widget's): 56px and NOT sticky on a
   narrow screen - the widget's icon bar sticks instead */
@media(max-width:900px){
  .hdr{position:static}
  .hdr-in{gap:0;padding:8px 12px;min-height:56px}
  .burger{display:flex;padding:0;margin:0 12px 0 -4px}
  .burger svg{width:24px;height:24px}
  .logo-full,.nav,.icon-btn{display:none}
  .logo-mini{display:block;width:38px;height:37px}
  .hdr-r{margin-left:auto;gap:8px}
}
/* ───────────── mobile ─────────────
   Upstream is one column in the operator's mobile order - app.js compose() applies
   their list through --m-order; `display:contents` dissolves the three columns so
   each panel can take its place. Every size below was measured off
   campeonbet.ee/sports at 393px (iPhone 16), 2026-09-25. */
@media(max-width:599px){
  .only-d{display:none}
  .layout{grid-template-columns:minmax(0,1fr);padding:16px 12px 96px;gap:14px}
  .col{display:contents}
  .panel-menu,.srch{display:none}

  /* NavigationMenu: sticky at the top, 4px pad, r6; buttons share the free space */
  .qnav{display:contents}
  .quick{order:1;position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:4px;background:var(--p-panel);border-radius:var(--r-sm)}
  .quick .only-m{display:grid}
  .q{flex:1 1 auto;height:40px;padding:12px;border-radius:4px}
  .q img{width:16px;height:16px;opacity:1}
  .seg{order:2;background:var(--p-panel);border-radius:var(--r-sm);border-top:0}
  .seg-in{display:grid;grid-template-columns:repeat(var(--seg-n,3),minmax(0,1fr))}
  .seg-b{min-width:0}
  .seg-next{display:none}
  .featured{order:3}
  .panel-leagues{order:4}
  .boosted{order:5}
  .live{order:6}
  .betslip{order:7}
  .panel-mentor{order:8}
  .panel-popular{order:9}
  /* the order above is the offline stand-in: once the operator's layout is read
     (app.js compose()), its mobile list decides what shows and in what order */
  .composed [data-widget]{order:var(--m-order)}
  [data-off-m]{display:none!important}
  [data-icon-m] .live-ico{display:block}

  /* the featured carousel: the operator's slide width, 8px apart */
  .top-events{grid-auto-columns:var(--slide-w,300px);gap:8px}
  .te{min-height:176px}

  /* TOP LEAGUES: header 12px pad, TOP white / MY 30% white, no underline; the
     rail below is one card per league, its 28px icon riding over the top edge */
  .panel-leagues{border-radius:8px}
  .panel-leagues .tabs-hd{padding:12px}
  .panel-leagues .collapse{display:none}
  .tabs{gap:16px}
  .tab{display:inline-flex;align-items:center;font-size:14px;line-height:15px;letter-spacing:0;padding:0;border-bottom:0;color:rgba(255,255,255,.3)}
  .tab.is-on{color:var(--c-b)}
  .cnt{min-width:18px;height:18px;margin-left:6px;border-radius:100px;background:rgba(255,255,255,.3);color:var(--p-panel);font-size:10px}
  #topLeagues{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;padding:0 8px 8px}
  #topLeagues::-webkit-scrollbar{display:none}
  #topLeagues .row{
    position:relative;flex:0 0 auto;width:auto;display:block;margin-top:16px;
    padding:28px 12px 12px;border-radius:4px;background:var(--p-panel);text-align:center;
  }
  #topLeagues .row .ico{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;border:2px solid var(--p-panel);overflow:hidden;background:var(--p-panel)}
  #topLeagues .row .ico img,#topLeagues .row .flag img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  #topLeagues .row .nm{display:block;font-size:14px;line-height:15px;font-weight:600;white-space:nowrap;overflow:visible}
  #topLeagues .badge-live{display:none}

  /* the sport tabs sit 4px under the title and 12px above the markets (measured);
     the rows below stack by the list's own width (narrow lists, above) */
  .live-tabs{margin:-4px 0 4px}

  /* Bet Mentor: collapsed on a phone (the operator's layout) - a 42px bar */
  .panel-mentor{border-radius:8px}
  .panel-mentor .panel-hd{padding:12px}
  .panel-mentor .panel-t{font-size:16px;line-height:18px;font-weight:600}
  .panel-mentor[data-collapsed-m] .panel-bd,.panel-mentor[data-collapsed-m] .collapse{display:none}
  .panel-mentor[data-collapsed-m] .expand{display:block}
}