/* ===================================================================
 * BetExchange — Template fedele al layout Betfair Exchange
 * =================================================================== */

:root {
  /* ─── REAL Betfair palette — extracted live from betfair.ro/exchange/plus ─── */
  /* Brand */
  --brand-dark:   #1e1e1e;   /* Betfair near-black */
  --brand-green:  #ffb80c;   /* Betfair signature yellow */
  --brand-yellow: #ffb80c;

  /* Header — the famous yellow top bar (#ffb80c), dark text on it */
  --hdr-bg: #ffb80c;
  --hdr-border: #e0a300;
  --hdr-text: #1e1e1e;
  --hdr-text-active: #000000;
  --tab-active-bg: #1e1e1e;

  /* Sport nav — black menu bar (#1e1e1e), off-white text */
  --nav-bg: #1e1e1e;
  --nav-text: #f6f6f6;
  --nav-active: #ffffff;
  --nav-border: #303030;

  /* Page — Betfair light-grey content area */
  --page-bg: #dfe5e5;
  --white: #ffffff;
  --border: #cccccc;
  --border-light: #e5e5e5;
  --bg-light: #f5f5f5;
  --bg-light2: #ececec;

  /* Text */
  --text-0: #1e1e1e;
  --text-1: #303030;
  --text-2: #666666;
  --text-3: #999999;
  --link: #167ac6;          /* Betfair link blue */

  /* Back (blue) — back-1 #a6d8ff extracted live; 2/3 are standard Betfair shades */
  --back-1: #7cc1fb;      /* best — closest to mid (deeper, more marked) */
  --back-2: #a2d3ff;
  --back-3: #c0e2ff;
  --back-4: #d8edff;
  --back-5: #eaf5ff;
  --back-hover: #5aaef7;
  --back-all: #2789ce;

  /* Lay (pink) — lay-1 #fac9d1 extracted live */
  --lay-1:  #f7a8b8;      /* best — deeper, more marked */
  --lay-2:  #fbc4ce;
  --lay-3:  #fcd9df;
  --lay-4:  #fde8ec;
  --lay-5:  #fdf2f4;
  --lay-hover: #f493a4;
  --lay-all: #d47a8c;

  /* Status */
  --red:    #d0021b;
  --green:  #20a052;        /* Betfair in-play green */
  --orange: #ffb80c;

  /* Sidebar */
  --sb-bg: #ffffff;
  --sb-width: 240px;

  /* Betslip */
  --bsp-width: 340px;

  --shadow: 0 1px 3px rgba(0,0,0,.15);
  --shadow-md: 0 4px 12px rgba(0,0,0,.18);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.28);

  /* ── Design tokens ─────────────────────────────────────────
     Spacing / radius / motion scales — use these for NEW rules;
     existing rules migrate opportunistically (values unchanged). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px;
  --t-fast: .12s; --t-med: .18s; --t-slow: .3s;

  /* Z-index scale — single source of truth for stacking order.
     Values mirror the pre-token numbers exactly (no visual change). */
  --z-nav: 99;            /* sport nav bar */
  --z-topbar: 100;        /* yellow top bar */
  --z-flyout: 120;        /* collapsed-sidebar flyout */
  --z-mob-backdrop: 240;  /* mobile overlay backdrop */
  --z-mob-drawer: 250;    /* mobile sports drawer */
  --z-mob-sheet: 260;     /* mobile betslip bottom sheet */
  --z-mob-nav: 270;       /* mobile bottom navigation */
  --z-ladder: 2500;       /* ladder modal */
  /* I toast stanno SOPRA TUTTO, mascherina di login compresa (100000). Erano a 3000, cioè
     sotto il modal di accesso (4000), la tendina del conto (5000), il dialog di conferma
     (9000), la notifica di abbinamento (9999) e il gate: un errore sollevato mentre uno di
     questi era aperto veniva coperto e il cliente non vedeva NULLA. È così che il 28/07 un
     blocco per troppi tentativi su `luigibet1` è sembrato un guasto del sito. Un avviso che
     non si vede non è un avviso: questo valore deve restare il più alto della scala. */
  --z-toast: 100010;      /* toast notifications — sempre in cima */
  --z-modal: 4000;        /* auth modal */
  --z-dropdown-bd: 4999;  /* account dropdown backdrop */
  --z-dropdown: 5000;     /* account dropdown panel */
  --z-confirm: 9000;      /* confirmation dialog */
  --z-notif: 9999;        /* bet-matched notification */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* Keyboard-only focus ring — invisible for mouse/touch, WCAG 2.4.7 for keyboard users */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--link); outline-offset: 1px;
}

body {
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  background: var(--page-bg);
  color: var(--text-0);
  -webkit-font-smoothing: antialiased;
}

/* ── TOP BAR ────────────────────────────────────────────── */
.topbar {
  height: 76px;
  background: var(--hdr-bg);
  display: flex; align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--hdr-border);
  position: relative; z-index: var(--z-topbar);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.topbar-left { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Brand logo sits directly on the yellow bar (no plate) — part of the header */
.brand { display: flex; align-items: center; padding-right: 18px; }
.brand-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 4px 2px;
  border-radius: 0;
  transition: transform .05s, opacity .12s;
}
.brand:hover .brand-plate { opacity: .85; }
.brand:active .brand-plate { transform: translateY(1px); }
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

/* Product tabs (Exchange / Sportsbook / Vegas / Live Casino) */
.product-nav { display: flex; align-items: stretch; height: 48px; }
.product-nav a {
  display: flex; align-items: center;
  padding: 0 14px;
  font-size: 13px; font-weight: 600;
  color: var(--hdr-text);
  cursor: pointer; text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .12s;
}
.product-nav a:hover { color: var(--hdr-text-active); }
.product-nav a.active {
  color: #ffffff;                 /* white text on the dark active tab */
  background: var(--tab-active-bg);
  border-bottom-color: var(--brand-green);
}

/* Auth area */
.btn-mobile {
  display: flex; align-items: center; gap: 5px;
  background: #000; color: #fff;
  border: 1px solid #555; border-radius: 3px;
  padding: 5px 9px; font-size: 11px; cursor: pointer;
}
.btn-mobile i { font-size: 13px; }
.auth-fields { display: flex; gap: 4px; }
.auth-fields input {
  height: 30px; padding: 0 10px;
  border: 1px solid rgba(0,0,0,.25); border-radius: 3px;
  background: #fff; color: var(--brand-dark); font-size: 12px;
  width: 130px; outline: none;
}
.pw-inline { position: relative; display: inline-flex; align-items: center; }
.pw-inline > input { padding-right: 34px !important; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 5px;
  background: transparent; color: #64748b; display: grid; place-items: center;
  cursor: pointer; z-index: 2;
}
.pw-eye:hover { background: rgba(15,23,42,.08); color: #111827; }
.auth-fields .pw-inline input { width: 130px; }
.auth-fields input::placeholder { color: #999; }
.auth-fields input:focus { border-color: var(--brand-dark); background: #fff; }
.remember {
  color: var(--hdr-text); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.forgot { font-size: 10px; color: var(--hdr-text); white-space: nowrap; }
.forgot strong { color: var(--brand-dark); }
/* Betfair: dark grey buttons sitting on the yellow header bar */
.btn-login {
  height: 30px; padding: 0 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.3); border-radius: 3px;
  color: var(--brand-dark); font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.btn-login:hover { background: #f0f0f0; border-color: var(--brand-dark); }
.btn-join {
  height: 30px; padding: 0 18px;
  background: #303030; border: none; border-radius: 3px;
  color: #fff; font-size: 12px; font-weight: 800; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.btn-join:hover { background: var(--brand-dark); }
.lang-flag { font-size: 18px; cursor: pointer; }

/* ── SPORT NAV ──────────────────────────────────────────── */
.sportnav {
  height: 32px;
  background: var(--nav-bg);
  display: flex; align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--nav-border);
  overflow: hidden;
  position: relative; z-index: var(--z-nav);
}
.sportnav a {
  display: flex; align-items: center;
  padding: 0 12px;
  font-size: 13px; font-weight: 600;
  color: var(--nav-text);
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.sportnav a:hover { color: var(--nav-active); background: rgba(255,255,255,.07); }
.sportnav a.active { color: var(--nav-active); border-bottom-color: var(--brand-green); }
.nav-spacer { flex: 1; }
/* Left side (tabs + injected sports) takes the space and CLIPS overflow; the right cluster
   (connection badge + Settings) is pinned and never squished/overlapped. */
.nav-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; overflow: hidden; }
.conn-badge, .nav-settings { flex: 0 0 auto; white-space: nowrap; }
.nav-settings {
  display: flex; align-items: center;
  padding: 0 12px;
  color: var(--nav-text); font-size: 12px;
  cursor: pointer;
}
.nav-settings:hover { color: var(--nav-active); }

/* ── PRODUCT SWITCHER (Exchange | Sportsbook) ───────────────
   Betfair-style yellow bar sitting above the sport nav. The active product
   reads as a raised dark tab; the yellow stays constant across light/dark. */
.product-switcher {
  height: 34px;
  background: var(--brand-green);
  display: flex; align-items: flex-end;
  gap: 2px;
  padding: 0 8px;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.product-switcher .ps-tab {
  display: flex; align-items: center;
  height: 30px;
  padding: 0 20px;
  font-size: 13px; font-weight: 800;
  color: var(--brand-dark);
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  border-radius: 4px 4px 0 0;
}
.product-switcher .ps-tab:hover { background: rgba(0,0,0,.08); }
.product-switcher .ps-tab.active {
  background: var(--brand-dark);
  color: var(--nav-active);
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sb-width) 1fr var(--bsp-width);
  min-height: calc(100vh - 80px);
  background: var(--page-bg);
}
/* Collapsed sidebar → a thin icon-only rail (sport icons), like Betfair, instead of an empty 22px gap */
/* == �Le mie scommesse� a TUTTO SCHERMO (31/07) ================================
   Stesso comportamento di Betfair: la lista occupa la finestra intera. Si spegne la griglia
   a tre colonne invece di nascondere i pannelli uno per uno, cosi tornare alla vista normale
   e togliere una classe e nessun pannello puo restare orfano.

   ATTENZIONE: la seconda regola NON e ridondante. La skin matchbook ridefinisce la griglia
   con body[data-layout="matchbook"] .layout, che ha specificita MAGGIORE di .layout.mb-full:
   senza ripetere il selettore sotto quel prefisso, su BetXchange il pannello destro sarebbe
   rimasto e la modifica avrebbe funzionato su una skin sola. Si azzerano anche margine e
   larghezza che quella skin imposta, altrimenti la pagina resta rientrata. */
.layout.mb-full { grid-template-columns: 1fr; }
body[data-layout="matchbook"] .layout.mb-full {
  grid-template-columns: 1fr;
  margin-left: 0;
  width: 100%;
}
.layout.mb-full > .sidebar-left,
.layout.mb-full > .sidebar-right { display: none; }
.layout.mb-full > .main { max-width: none; }

/* Contenuto CENTRATO, non incollato ai bordi (31/07). A tutto schermo la tabella si stirava
   da un lato all
'
altro dello schermo: piu spazio non vuol dire piu leggibile, perche l
'
occhio
   deve rifare tutta la riga per collegare la data al P&L. Betfair tiene la scheda al centro
   con i margini ai lati, e ha ragione: la larghezza si limita, lo sfondo respira.
   Il valore e una variabile cosi si cambia in un punto solo. */
:root { --mb-page-max: 1320px; }
/* Grigio dei lati: piu scuro, cosi la scheda bianca stacca invece di sfumarci dentro.
   ATTENZIONE: non un colore fisso. Il sito ha TRE temi (chiaro, body.dark, skin matchbook)
   e ognuno ridefinisce --bg-light2; scrivere un #hex qui avrebbe reso la pagina illeggibile
   sul tema scuro. Una variabile per tema, e il valore si cambia in un punto solo. */
/* Il grigio va NEUTRO, non bluastro: il #c7ced7 aveva una dominante fredda che litigava col
   giallo del marchio. Betfair usa un grigio caldo e appena percettibile: il contrasto lo fa
   la scheda bianca, non lo sfondo. Piu scuro non vuol dire piu professionale. */
:root                            { --mb-page-bg: #e8e8e8; }
body.dark                        { --mb-page-bg: #0e1014; }
body[data-layout="matchbook"]    { --mb-page-bg: #ccd4de; }
.layout.mb-full > .main { background: var(--mb-page-bg); }
.layout.mb-full #myBetsView,
.layout.mb-full #statementView {
  max-width: var(--mb-page-max);
  margin: 14px auto 28px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
/* Sotto la soglia i margini mangerebbero spazio utile invece di darne: si torna a pieno. */
@media (max-width: 1100px) {
  .layout.mb-full #myBetsView,
  .layout.mb-full #statementView { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
}


.layout.sidebar-hidden {
  grid-template-columns: 48px 1fr var(--bsp-width);
}
.layout.sidebar-hidden .sidebar-section-label,
.layout.sidebar-hidden .sport-submenu,
.layout.sidebar-hidden #eventSidebar,
.layout.sidebar-hidden .sports-list li span,
.layout.sidebar-hidden .my-markets span,
.layout.sidebar-hidden .my-markets .fa-chevron-down,
.layout.sidebar-hidden .sport-caret,
.layout.sidebar-hidden .badge-live { display: none !important; }
.layout.sidebar-hidden .sidebar-toggle { justify-content: center; font-size: 0; padding: 9px 0; }
.layout.sidebar-hidden .sidebar-toggle .toggle-arrow { font-size: 15px; margin: 0; }
.layout.sidebar-hidden .my-markets,
.layout.sidebar-hidden .sports-list > li,
.layout.sidebar-hidden .sport-item-row { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.layout.sidebar-hidden .sports-list i,
.layout.sidebar-hidden .my-markets i { font-size: 17px; width: auto; }
.layout.sidebar-hidden .my-star { color: var(--brand-yellow); }

/* ── LEFT SIDEBAR ────────────────────────────────────────── */
.sidebar-left {
  background: var(--sb-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  font-size: 12px;
}
.sidebar-toggle {
  background: var(--bg-light2);
  padding: 5px 8px;
  font-size: 11px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 4px;
  user-select: none;
}
.sidebar-toggle:hover { background: #e0e0e0; color: var(--text-0); }
.toggle-arrow { margin-left: auto; font-size: 14px; font-weight: 700; }

.my-markets {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  font-size: 12px; font-weight: 700;
  color: var(--text-0);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  background: var(--white);
}
.my-markets:hover { background: var(--bg-light); }
.my-star { color: var(--brand-yellow); font-size: 11px; }

/* "Added …" confirmation flash + saved-markets list under the My Markets header */
.my-markets-toast {
  padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--brand-yellow);
  background: var(--bg-light); border-bottom: 1px solid var(--border-light);
}
.my-markets-list { list-style: none; margin: 0; padding: 0; }
.my-markets-list .mm-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12px; color: var(--text-1);
  cursor: pointer; border-bottom: 1px solid var(--border-light);
}
.my-markets-list .mm-item:hover { background: var(--bg-light); }
.my-markets-list .mm-star { color: var(--brand-yellow); font-size: 10px; flex: none; }
.my-markets-list .mm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-markets-list .mm-del { color: var(--text-3); font-size: 11px; flex: none; opacity: 0; transition: opacity .12s; }
.my-markets-list .mm-item:hover .mm-del { opacity: 1; }
.my-markets-list .mm-del:hover { color: var(--red); }

.sidebar-section-label {
  padding: 5px 10px;
  font-size: 11px; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}

/* ── Sports list — "Compact dense" layout (flat, tight rows, monospace counts) ───────── */
.sports-list { list-style: none; font-size: 12px; }
.sports-list > li {
  padding: 6px 10px; cursor: pointer; color: var(--link); font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--border-light); transition: background .08s;
}
.sports-list > li:hover { background: var(--bg-light); }
.sports-list li.loading { color: var(--text-3); cursor: default; }
.sports-list li i, .sports-list .sport-ic-svg { width: 14px; text-align: center; font-size: 11px; color: var(--text-2); flex: none; }
.sports-list .badge-live {
  background: var(--green); color: #fff;
  padding: 1px 5px; border-radius: 2px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px;
  flex-shrink: 0;
}

/* Sport accordion wrapper — transparent; rows are flat & dense */
.sports-list li.sport-acc-li { display: block; padding: 0; border: none; cursor: default; background: none; }
.sports-list li.sport-acc-li:hover { background: none; }
.sport-item-row {
  padding: 6px 10px; cursor: pointer; color: var(--link); font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--border-light); transition: background .08s;
}
.sport-item-row:hover { background: var(--bg-light); }
.sport-item-row > i, .sport-item-row .sport-ic-svg { width: 14px; text-align: center; font-size: 11px; color: var(--text-2); flex: none; }
.sport-caret { margin-left: auto; font-size: 8px; color: var(--text-3); transition: transform .18s; flex-shrink: 0; }
.sport-item-row.open { background: var(--bg-light2); font-weight: 700; }
.sport-item-row.open .sport-caret { transform: rotate(90deg); }

/* Competition sub-list — subtle inset, dense rows */
.sport-submenu { list-style: none; display: none; background: var(--bg-light); }
.sport-submenu.open { display: block; }
.submenu-loading { padding: 5px 10px 5px 18px; color: var(--text-3); font-size: 11px; }
.sport-comp-item {
  padding: 5px 10px 5px 18px; cursor: pointer; color: var(--text-1);
  display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  border-bottom: 1px solid var(--border-light); transition: background .1s, color .1s;
}
.sport-comp-item:hover { background: var(--bg-light2); }
.sport-comp-item.open { background: var(--bg-light2); color: var(--text-0); font-weight: 700; }
.comp-flag,
.comp-league-dot {
  width: 18px;
  height: 15px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.comp-flag-real {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.14);
}
.comp-flag-code,
.comp-league-dot {
  background: #eef3f8;
  border: 1px solid #d2dbe6;
  color: var(--text-2);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.comp-flag-globe,
.comp-flag-generic {
  color: var(--link);
  font-size: 12px;
}
.comp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-count { font-size: 10px; color: var(--text-2); font-family: monospace; flex-shrink: 0; }
.comp-caret { font-size: 8px; color: var(--text-3); transition: transform .18s; flex-shrink: 0; }
.sport-comp-item.open .comp-caret { transform: rotate(90deg); }

/* Event sub-list — dense indented rows */

/* Country level for sidebars: sport -> country -> competition -> event. */
.sport-country-item {
  min-height: 29px;
  padding: 5px 10px 5px 18px;
  cursor: pointer;
  color: var(--text-1);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  transition: background .1s, color .1s;
}
.sport-country-item:hover,
.sport-country-item.open {
  background: var(--bg-light2);
  color: var(--text-0);
}
.sport-country-item.open {
  box-shadow: inset 3px 0 0 var(--brand-yellow);
  font-weight: 700;
}
.country-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-count {
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8edf3;
  color: var(--text-2);
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
}
.country-caret {
  font-size: 8px;
  color: var(--text-3);
  transition: transform .18s;
}
.sport-country-item.open .country-caret { transform: rotate(90deg); }
.country-submenu {
  list-style: none;
  display: none;
  margin: 0;
  padding: 0;
  background: var(--bg-light);
}
.country-submenu.open { display: block; }
.country-submenu .sport-comp-item.sport-comp-child {
  padding-left: 30px;
  background: #fff;
}
.country-submenu .comp-submenu .event-sub-item {
  padding-left: 44px;
}
.comp-submenu { list-style: none; display: none; }
.comp-submenu.open { display: block; }
.event-sub-item {
  padding: 4px 10px 4px 34px; cursor: pointer; color: var(--link);
  display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px;
  border-bottom: 1px solid var(--border-light); transition: background .1s;
}
.event-sub-item:hover { background: var(--bg-light); }
/* Show full match names: wrap instead of truncating with an ellipsis. */
.event-sub-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.sub-live {
  background: var(--green); color: #fff;
  font-size: 8px; padding: 1px 4px; border-radius: 3px;
  font-weight: 700; letter-spacing: .2px; flex-shrink: 0;
}
/* Riga di una CORSA nella lista: non ha 1/X/2 (sarebbero i primi tre corridori sotto
   etichette che dicono un'altra cosa — vedi `_raceCta`). Al loro posto una sola cella che
   occupa le tre colonne della griglia e porta alla scheda della corsa. */
.race-cta {
  grid-column: span 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 12px; cursor: pointer; color: var(--text-2); font-size: 12px;
}
.race-cta:hover .race-open { text-decoration: underline; }
.race-runners { color: var(--text-3); }
.race-open { color: var(--link); font-weight: 600; white-space: nowrap; }

/* Orario del via nelle corse (cavalli/levrieri): il tabellone si legge per orario,
   quindi il chip sta PRIMA del nome ed e' tabulare per allineare la colonna. */
.race-time {
  color: var(--link); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 34px;
}

/* CORSE — striscia delle corse della riunione nel dettaglio (stile Betfair): un
   bottone per corsa con l'orario del via, la corsa aperta evidenziata in giallo
   Betfair, puntino verde su quella in corsa, gia' corse smorzate. Scorre in
   orizzontale sul mobile senza spezzare la riga. */
.race-nav {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 12px; background: var(--white); border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.race-pill {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-light); color: var(--text-1); cursor: pointer; font: inherit;
  line-height: 1.25;
}
.race-pill:hover { border-color: var(--brand-yellow); background: var(--white); }
.race-pill .rp-time { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.race-pill .rp-num { font-size: 9px; font-weight: 700; color: var(--text-3); letter-spacing: .3px; }
.race-pill.active { background: var(--brand-yellow); border-color: var(--hdr-border); color: #1e1e1e; }
.race-pill.active .rp-num { color: #1e1e1e; }
/* Skin matchbook: --brand-yellow diventa il rosso #cf111f — il testo scuro sopra non
   si legge (e --hdr-text resta un grigio-azzurro da 3.5:1). Bianco esplicito. */
body[data-layout="matchbook"] .race-pill.active,
body[data-layout="matchbook"] .race-pill.active .rp-num { color: #ffffff; }
/* Niente stato «live» sulle pill: le corse sono solo prematch — una corsa partita
   e' semplicemente smorzata (.past), come una gia' corsa. */
.race-pill.past { opacity: .5; }

/* Breadcrumb tree (event view) */
.breadcrumb-tree { list-style: none; }
.breadcrumb-tree li {
  padding: 4px 10px 4px 10px;
  color: var(--link);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  display: flex; align-items: center; gap: 5px;
}
.breadcrumb-tree li:hover { background: #eef4fc; }
.breadcrumb-tree li.current {
  font-weight: 700; color: var(--text-0); cursor: default;
  background: var(--bg-light);
}
.breadcrumb-tree li.indent-1 { padding-left: 18px; }
.breadcrumb-tree li.indent-2 { padding-left: 26px; }
.breadcrumb-tree li.indent-3 { padding-left: 34px; }
.breadcrumb-tree li.indent-4 { padding-left: 42px; }

/* Market check list (event view) */
.market-check-list { list-style: none; border-top: 1px solid var(--border); }
.market-check-list li {
  padding: 5px 10px;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-0); font-size: 12px;
}
.market-check-list li:hover { background: #eef4fc; }
.market-check-list li.active { font-weight: 700; }
.market-check-list input[type=checkbox] { cursor: pointer; flex-shrink: 0; }
.market-check-list .mkt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── MAIN CONTENT ────────────────────────────────────────── */
.main {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  background: var(--page-bg);
}

/* List view header */
.list-header {
  background: var(--hdr-bg);
  color: #fff;
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.list-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
  color: #1a1a1a;
}
/* accent bar to make the heading pop on the orange bar */
.list-title::before {
  content: ''; width: 4px; height: 18px; border-radius: 2px;
  background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.list-count {
  background: #1a1a1a; color: var(--brand-yellow, var(--brand-yellow));
  padding: 2px 10px; border-radius: 11px;
  font-size: 11px; font-weight: 800; font-family: monospace; letter-spacing: .3px;
}
.list-tabs { display: flex; gap: 4px; }
/* Dark pills on the orange bar read far better than translucent-white-on-orange. */
.tab {
  background: rgba(0,0,0,.18);
  border: none; padding: 4px 11px;
  color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; border-radius: 4px; font-family: inherit;
  transition: background .12s;
}
.tab:hover { background: rgba(0,0,0,.32); }
.tab.active { background: #fff; color: var(--text-0); box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* In-Play view — LAYOUT 3: dark header row (title + Foxfire filters) + light 2nd row of sport
   icon-tabs with live-count badges and a yellow underline on the active sport. */
.list-header.inplay-view { background: #2b2b2b; }
/* On the dark in-play header the title must be white (the base .list-title is black for the
   orange home bar). Accent bar → live yellow, count → light chip. */
.list-header.inplay-view .list-title { color: #fff; }
.list-header.inplay-view .list-title::before { background: var(--brand-yellow, var(--brand-yellow)); box-shadow: none; }
.list-header.inplay-view .list-count { background: rgba(255,255,255,.16); color: #fff; }
.ipl-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ipl-viewby { display: inline-flex; align-items: center; gap: 6px; color: #e8edf4; font-size: 12px; font-weight: 700; }
/* Custom-styled select (kill the inconsistent native OS dropdown) — clean white pill + our chevron,
   matching the site's controls (same radius/border/weight as the filter tabs). */
.ipl-filters .ipl-sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  height: 30px; padding: 0 28px 0 11px; border-radius: 4px;
  border: 1px solid var(--border); background-color: #fff; color: var(--text-0); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 9px 6px;
  transition: border-color .12s, box-shadow .12s;
}
.ipl-filters .ipl-sel:hover { border-color: #aeb7c4; }
.ipl-filters .ipl-sel:focus { outline: none; border-color: var(--brand-yellow, var(--brand-yellow)); box-shadow: 0 0 0 2px rgba(255,184,12,.25); }
.ipl-row2 {
  display: flex; align-items: center; gap: 4px;
  background: #f4f5f7; padding: 6px 12px; border-bottom: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.ipl-row2::-webkit-scrollbar { display: none; }
.ipl-row2 .ipl-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: #5a6472; padding: 6px 16px 5px; border-bottom: 3px solid transparent; flex: 0 0 auto;
}
.ipl-row2 .ipl-ic { position: relative; display: inline-flex; font-size: 19px; color: #33405a; }
.ipl-row2 .ipl-ct {
  position: absolute; top: -7px; right: -11px; background: #2ecc71; color: #fff;
  font-size: 9.5px; font-weight: 800; border-radius: 7px; padding: 1px 5px; min-width: 15px; text-align: center; line-height: 1.4;
}
.ipl-row2 .ipl-nm { font-size: 12px; font-weight: 600; }
.ipl-row2 .ipl-tab:hover { color: #1b2330; }
.ipl-row2 .ipl-tab.active { color: #1b2330; border-bottom-color: var(--brand-yellow); }
.ipl-row2 .ipl-tab.active .ipl-ic { color: #111; }
body.dark .ipl-row2 { background: #15171c; border-color: #23262d; }
body.dark .ipl-row2 .ipl-tab { color: #aeb6c2; }
body.dark .ipl-row2 .ipl-ic { color: #cdd6e3; }
body.dark .ipl-row2 .ipl-tab.active, body.dark .ipl-row2 .ipl-tab.active .ipl-ic { color: #fff; }

/* Search bar */
.search-bar {
  background: var(--white);
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.search-bar:focus-within { background: #fafcff; }
.search-bar i { color: var(--text-3); font-size: 12px; }
.search-bar input {
  flex: 1; border: none; outline: none;
  font: 12px Arial, sans-serif; color: var(--text-0);
  background: transparent;
}
.search-bar input::placeholder { color: var(--text-3); }
.search-clear {
  background: var(--bg-light2); border: none; cursor: pointer;
  color: var(--text-2); width: 20px; height: 20px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.search-clear:hover { background: var(--red); color: #fff; }

/* Global search living in the top header bar — centered, always visible */
.topbar-search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0 16px; }
.topbar-search .search-bar {
  width: 100%; max-width: 460px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  padding: 5px 10px;
}
.topbar-search .search-bar:focus-within { box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
@media (max-width: 720px) {
  .topbar-search { padding: 0 6px; }
  .topbar-search .search-bar { max-width: none; }
}

/* Market table header */
.market-table-hd {
  display: grid;
  grid-template-columns: 1fr 72px 108px 108px 108px 28px;
  gap: 2px;                       /* match .event-row so the 1/X/2 labels sit over their columns */
  background: var(--bg-light2);
  padding: 6px 10px;
  font-size: 11px; font-weight: 800;
  color: var(--text-1);
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  letter-spacing: .4px;
}
.col-event { text-align: left; }
.col-matched, .col-runner, .col-more { text-align: center; }
/* In-Play repeats column labels on each sub-group header → drop the single top header. */
#eventListView.inplay-mode > .market-table-hd { display: none; }

/* ── HOME LANDING (professional bookmaker home) ───────────────────────────── */
#eventListView.home-landing > .market-table-hd { display: none; }
.hl-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 12px; padding: 34px 32px; border-radius: 16px; color: #fff; min-height: 224px;
  background:
    linear-gradient(90deg, rgba(8,11,17,.97) 0%, rgba(8,11,17,.88) 32%, rgba(8,11,17,.42) 60%, rgba(8,11,17,.10) 100%),
    url("/assets/exfair-stadium-hero.webp") right center / cover no-repeat,
    #0c0f14;
  border: 1px solid #2a3340;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.6);
}
/* thin gold accent line along the bottom edge */
.hl-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-yellow, #ffb80c), rgba(255,184,12,.25) 55%, transparent);
}
.hl-hero-main { position: relative; z-index: 1; max-width: 560px; }
.hl-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--brand-yellow, #ffb80c);
}
.hl-kicker::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: var(--brand-yellow, #ffb80c); }
.hl-hero-title { font-size: 34px; font-weight: 900; letter-spacing: -.5px; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hl-hero-title span { color: var(--brand-yellow, #ffb80c); }
.hl-hero-sub { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #c9d1de; max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hl-cta { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.hl-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  padding: 11px 20px; border-radius: 9px; font-size: 14px; font-weight: 800;
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.hl-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.hl-btn.primary {
  background: linear-gradient(180deg, #ffc63d, var(--brand-yellow, #ffb80c));
  color: #17181a; border-color: transparent;
  box-shadow: 0 8px 22px -8px rgba(255,184,12,.65);
}
.hl-btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -8px rgba(255,184,12,.8); }
.hl-stats { position: relative; z-index: 1; display: flex; gap: 12px; }
.hl-stat {
  min-width: 100px; text-align: center; padding: 14px 16px; border-radius: 12px;
  background: rgba(10,13,19,.55); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hl-stat b { display: block; font-size: 26px; font-weight: 900; color: var(--brand-yellow, #ffb80c); font-family: monospace; text-shadow: 0 0 18px rgba(255,184,12,.35); }
.hl-stat span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #c3cbd8; text-transform: uppercase; letter-spacing: .6px; }
.hl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.7); animation: hlLivePulse 1.8s ease-out infinite; }
@keyframes hlLivePulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.6); } 70% { box-shadow: 0 0 0 6px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
/* live ticker */
.hl-ticker { margin: 0 12px 12px; overflow: hidden; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; }
.hl-ticker-track { display: inline-flex; white-space: nowrap; gap: 28px; padding: 8px 14px; animation: hlMarquee 38s linear infinite; }
.hl-ticker:hover .hl-ticker-track { animation-play-state: paused; }
.hl-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-1); cursor: pointer; }
.hl-tick:hover { color: var(--link); }
.hl-tick b { color: var(--green); font-family: monospace; }
.hl-tick .hl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
@keyframes hlMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hl-section-title { margin: 14px 12px 8px; font-size: 13px; font-weight: 800; color: var(--text-1); display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .4px; }
.hl-section-title i { color: var(--brand-green, #20a052); }
/* sport tiles */
.hl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 12px 10px; }
.hl-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  padding: 16px 10px; border-radius: 10px; position: relative;
  background: var(--white); border: 1px solid var(--border); color: var(--text-0);
  transition: transform .1s, border-color .12s, box-shadow .12s;
}
.hl-tile:hover { transform: translateY(-2px); border-color: var(--brand-green, #20a052); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.hl-tile-ic { font-size: 22px; color: var(--text-1); line-height: 1; }
.hl-tile-nm { font-size: 12.5px; font-weight: 700; text-align: center; }
.hl-tile-live { position: absolute; top: 6px; right: 6px; background: var(--green); color: #fff; font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 7px; letter-spacing: .3px; }
.hl-featured, .hl-board { margin: 0 12px 14px; }

/* In-Play "View by" sub-group header (competition name, or In-Play / Coming up). Grid mirrors
   the row so the "Abbinato" label lines up over the Matched column. */
.sub-group-hd {
  display: grid;
  grid-template-columns: 1fr 72px 108px 108px 108px 28px;
  gap: 2px;                       /* match .event-row so the 1/X/2 labels sit over their columns */
  align-items: center;
  background: #d8dbe1;   /* defined medium grey like Betfair (was too light) */
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
body.dark .sub-group-hd { background: #2b2f37; }
/* 1/X/2 header labels placed by class (was inline grid-column hard-wired to the 6-track DESKTOP
   grid, which left them one column off on the 5-track mobile grid). Desktop: name(1) matched(2)
   1(3) X(4) 2(5) more(6) — 2-way skips the X column so "2" stays at 5. */
.sub-group-hd .sgh-1 { grid-column: 3; }
.sub-group-hd .sgh-x { grid-column: 4; }
.sub-group-hd .sgh-2 { grid-column: 5; }
.sgh-name {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; font-weight: 700; color: var(--text-0);
  text-transform: uppercase; letter-spacing: .7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.sgh-matched { grid-column: 2; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-0); }
.sgh-col { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-0); }
.sgh-col small { font-size: 9px; font-weight: 600; opacity: .6; margin-left: 3px; }

/* Group card */
.group-card { margin-bottom: 2px; background: var(--white); }
.group-card-hd {
  background: #303030;
  padding: 5px 10px;
  padding-left: 8px;
  display: flex; align-items: center;
  font-size: 11px; font-weight: 700;
  color: #f6f6f6;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--brand-green);
  text-transform: uppercase; letter-spacing: .2px;
  gap: 6px;
}
.group-card-hd .g-count { color: #b8b8b8; font-weight: 500; text-transform: none; font-size: 10px; }
.group-card-hd .g-see-all {
  margin-left: auto; color: var(--link);
  cursor: pointer; font-size: 11px; font-weight: 600;
  text-transform: none;
}
.group-card-hd .g-see-all:hover { text-decoration: underline; }

/* Event row */
.event-row {
  display: grid;
  grid-template-columns: 1fr 72px 108px 108px 108px 28px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--white);
  gap: 2px;
  transition: background .06s;
  position: relative;            /* containing block for the .row-lock banner */
}
.event-row:hover { background: #f0f5fc; }
.event-row:last-child { border-bottom: 1px solid var(--border); }

.event-info { min-width: 0; }
.event-name {
  font-size: 12px; font-weight: 600; color: var(--text-0);
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.event-name:hover { color: var(--link); text-decoration: underline; }
.event-name mark { background: #fff3a0; color: var(--brand-dark); padding: 0 2px; border-radius: 2px; font-weight: 700; }
/* Team names: explicit theme-aware colours so they stay readable in dark mode (home strong,
   away slightly dimmer but never washed out). */
.team-home, .team-away { color: var(--text-0); font-weight: 600; }
.event-name:hover .team-home, .event-name:hover .team-away { color: var(--link); }
.event-meta {
  margin-top: 2px; display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-3);
}
.event-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 4px; border-radius: 2px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
}
.event-tag.live { background: var(--green); color: #fff; }
.event-tag.live::before { content: ''; display: inline-block; width: 4px; height: 4px; background: #fff; border-radius: 50%; }
.event-tag.live.et { background: #6b21a8; }   /* extra time / penalties — distinct from regular live */
.event-tag.upcoming { background: #888; color: #fff; }
.event-tag.starting { background: var(--orange); color: #fff; animation: pulseSoon 1.6s infinite; }
@keyframes pulseSoon { 0%,100%{opacity:1} 50%{opacity:.7} }
/* Betfair-style solid green "In-Play" box on the LEFT of a live event row (spans both name lines). */
.ev-live-box {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--green); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1.1;
  padding: 4px 8px; border-radius: 3px; min-width: 60px;
}

/* ── Live score in event list (Betfair-style: minute box + stacked home/away beside names) ── */
.event-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.event-info-main { flex: 1; min-width: 0; }
.event-namewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Right-edge actions on an event row: favourites star + "you have N bets" badge. Kept in one
   flex block pushed to the right so they never reflow the team name. */
.ev-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ev-star {
  background: none; border: none; cursor: pointer; padding: 3px; line-height: 1;
  color: var(--text-3); font-size: 14px; opacity: .5;
  transition: color .12s, opacity .12s, transform .1s;
}
.ev-star:hover { opacity: 1; }
.ev-star:active { transform: scale(.85); }
.ev-star.active { color: var(--brand-yellow); opacity: 1; }
/* "You have N bets on this event" badge — GREEN (Betfair-style). */
.ev-betcount {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green, #1f9d57); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: 4px; font-family: monospace;
}
.event-namewrap .event-name { min-width: 0; }
/* When the row shows a live score, the IN-PLAY tag + start-time are redundant → hide the meta line. */
.event-row.has-score .event-meta { display: none; }
.event-row.has-score .ev-live-box { display: none; }
.score-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  background: var(--brand-dark); color: #fff; border-radius: 4px; padding: 2px 5px;
}
.score-badge .sc-min {
  background: var(--green); color: #fff; font-weight: 700; font-size: 9.5px;
  padding: 1px 4px; border-radius: 3px; min-width: 22px; text-align: center;
  font-family: monospace; align-self: stretch; display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.score-badge .sc-rows { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.score-badge .sc-r { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.score-badge .sc-set { min-width: 9px; text-align: center; color: #aeb6c2; font-size: 11px; font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-badge .sc-set.cur { color: var(--brand-yellow); font-weight: 700; }
/* white-space:nowrap is load-bearing: cricket/generic scores ("166/5", "285/10") are longer
   than the football/tennis digits this badge was sized for and would otherwise wrap onto a
   second line that .score-badge's overflow:hidden then clips (e.g. "166/5" showing as "166/"). */
.score-badge .sc-p { min-width: 13px; text-align: center; color: #2ecc71; font-size: 11px; font-weight: 700; font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tennis: pallino del servizio a fianco del punteggio, sullo stesso rigo del giocatore alla
   battuta (stesso verde della scorebar nel dettaglio). Tiene il suo spazio anche da spento,
   altrimenti le due righe del punteggio si disallineerebbero a ogni cambio di servizio. */
.score-badge .sc-serve {
  flex: 0 0 auto; width: 6px; height: 6px; margin-left: 4px;
  border-radius: 999px; background: transparent;
}
.score-badge .sc-serve.is-serving { background: #7fdc2f; }
/* Detail view score (larger) */
.ev-score { margin-top: 6px; }

/* Scoreboard BAR (Betfair-style): names on the LEFT, set columns + points pushed to the RIGHT,
   full width so there's no empty gap. Header row shows the set numbers + "Punti". */
.scorebar {
  display: inline-flex; flex-direction: column; gap: 5px;
  background: #21262e; border: 1px solid #333c48; color: #fff; border-radius: 10px;
  padding: 13px 20px; line-height: 1.3;
}
.scorebar .sb-row { display: flex; align-items: center; gap: 16px; }
.scorebar .sb-serve { width: 11px; flex: 0 0 11px; color: #2ecc71; font-size: 12px; text-align: center; }
.scorebar .sb-name { flex: 0 0 165px; max-width: 165px; font-weight: 700; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorebar .sb-cells { display: flex; gap: 12px; }
.scorebar .sb-set { min-width: 24px; text-align: center; font-size: 16.5px; color: #c2cad6; font-family: monospace; font-variant-numeric: tabular-nums; padding: 1px 0; }
.scorebar .sb-set.cur { color: var(--brand-yellow); font-weight: 800; background: rgba(255,184,12,.16); border-radius: 5px; }
.scorebar .sb-pts { min-width: 46px; text-align: center; font-size: 20px; font-weight: 800; color: #2ecc71; font-family: monospace; font-variant-numeric: tabular-nums; background: rgba(46,204,113,.13); border-radius: 7px; padding: 1px 0; }
.scorebar .sb-hdr { opacity: .7; margin-bottom: 1px; }
.scorebar .sb-hdr .sb-set, .scorebar .sb-hdr .sb-pts { color: #8a93a3; font-size: 11px; font-weight: 600; background: none; }
.scorebar .sb-meta { font-size: 11px; color: #8a93a3; text-transform: uppercase; letter-spacing: .8px; margin-top: 5px; }

/* Cricket board: name · runs/wickets · overs, one row per side; bat marker (reuses .sb-serve dot)
   on the side batting. Name column is minmax(0,…) so the score/overs never clip when narrow. */
.event-detail-header .cricket-sb { width: min(560px, calc(100vw - 520px)); max-width: 100%; box-sizing: border-box; }
.cricket-sb .sb-row { display: grid !important; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.cricket-sb .sb-name { flex: none; min-width: 0; max-width: none; }
.cricket-sb .sb-ck-score { font-size: 20px; font-weight: 800; color: #2ecc71; font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cricket-sb .sb-ck-ov { min-width: 60px; text-align: right; font-size: 12px; color: #8a93a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1180px) { .event-detail-header .cricket-sb { width: min(560px, calc(100vw - 32px)); } }
@media (max-width: 560px) {
  .event-detail-header .cricket-sb { width: 100%; }
  .cricket-sb .sb-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; }
  .cricket-sb .sb-ck-ov { min-width: 44px; }
}
/* BetXchange (matchbook) mobile: the board sits beside the back button, so give short cricket
   names room to WRAP (two lines) instead of clipping to "I… W", and slim the overs column. */
body[data-layout="matchbook"] .cricket-sb .sb-name {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  line-height: 1.15 !important; font-size: 13px !important; font-weight: 800 !important;
}
body[data-layout="matchbook"] .cricket-sb .sb-ck-score { font-size: 17px !important; }
body[data-layout="matchbook"] .cricket-sb .sb-ck-ov { min-width: 40px !important; font-size: 11px !important; }
body[data-layout="matchbook"] .cricket-sb .sb-row { gap: 8px !important; }

/* When the scoreboard (which carries the player names) is shown, drop the big repeated title. */
.event-detail-header .ev-info.has-score .ev-name { display: none; }
.event-detail-header .ev-info.has-score .ev-date { font-size: 10px; margin: 0 0 5px; }
.event-detail-header .ev-info.has-score .ev-score { margin-top: 0; }

/* Football match-timeline bar — professional bookmaker style: team names flank a big score,
   a pulsing LIVE minute, a two-segment gradient progress bar with minute gridlines + HT divider,
   a pulsing current-play dot, and goal/card markers (home above the bar, away below). */
.scorebar.soccer-tl {
  display: block; width: 100%; background: transparent; border: none; border-radius: 0;
  padding: 4px 16px 28px; gap: 0; font-family: Arial, Helvetica, sans-serif;
}
.soccer-tl .bf-tl-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.soccer-tl .bf-tl-team { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #fff; }
.soccer-tl .bf-tl-team.home { text-align: right; }
.soccer-tl .bf-tl-team.away { text-align: left; }
.soccer-tl .bf-tl-score {
  flex: none; font-size: 20px; font-weight: 800; color: #fff; font-family: monospace;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 2px 12px; letter-spacing: 1px;
}
.soccer-tl .bf-tl-dash { color: #7e8a99; margin: 0 3px; }
.soccer-tl .bf-tl-min { text-align: center; font-size: 12px; margin: 7px 0 22px; color: #8a93a3; }
.soccer-tl .bf-tl-minv { color: #cfd6e2; font-weight: 700; }
.soccer-tl .bf-tl-minv.live { color: #46e08a; display: inline-flex; align-items: center; gap: 5px; }
.soccer-tl .bf-tl-livedot { width: 7px; height: 7px; border-radius: 50%; background: #46e08a; box-shadow: 0 0 0 0 rgba(70,224,138,.6); animation: tlPulse 1.6s infinite; }
@keyframes tlPulse { 0% { box-shadow: 0 0 0 0 rgba(70,224,138,.55); } 70% { box-shadow: 0 0 0 6px rgba(70,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(70,224,138,0); } }
.soccer-tl .bf-tl-ht { color: #7e8a99; }
.soccer-tl .bf-tl-bar { position: relative; height: 8px; margin: 0 6px; }
.soccer-tl .bf-tl-seg { position: absolute; top: 0; height: 8px; background: #3a4150; border-radius: 4px; overflow: hidden; }
.soccer-tl .bf-tl-seg i { display: block; height: 100%; background: linear-gradient(90deg, #2f9e2a, #46e08a); }
.soccer-tl .bf-tl-grid { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.12); transform: translateX(-50%); }
.soccer-tl .bf-tl-divider { position: absolute; top: -5px; bottom: -5px; width: 2px; background: rgba(255,255,255,.55); transform: translateX(-50%); border-radius: 1px; z-index: 2; }
.soccer-tl .bf-tl-ht-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: #8a93a3; letter-spacing: .5px; white-space: nowrap; }
.soccer-tl .bf-tl-now {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); z-index: 4;
  box-shadow: 0 0 0 2px rgba(70,224,138,.9), 0 0 9px 2px rgba(70,224,138,.5);
  animation: tlPulse 1.6s infinite;
}
.soccer-tl .bf-tl-mk { position: absolute; transform: translateX(-50%); cursor: default; z-index: 3; }
.soccer-tl .bf-tl-mk.goal.home { top: -19px; }
.soccer-tl .bf-tl-mk.goal.away { top: 15px; }
.soccer-tl .bf-tl-mk.card.home { top: -13px; }
.soccer-tl .bf-tl-mk.card.away { top: 9px; }
.soccer-tl .bf-tl-ball { display: block; color: #fff; font-size: 13px; line-height: 1; }
.soccer-tl .bf-tl-tick { display: block; width: 4px; height: 12px; border-radius: 1px; }
.soccer-tl .bf-tl-tick.yc { background: #ffcf33; }
.soccer-tl .bf-tl-tick.rc { background: #e2001a; }
.soccer-tl .bf-tl-tip {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0c0f14; color: #fff; border: 1px solid #333c48; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 8;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.soccer-tl .bf-tl-mk.away .bf-tl-tip { bottom: auto; top: calc(100% + 8px); }
.soccer-tl .bf-tl-mk:hover { z-index: 9; }
.soccer-tl .bf-tl-mk:hover .bf-tl-tip { display: block; }

/* Generic-sport board (basket / cricket / baseball / …): borrows the soccer-tl header but has no
   timeline bar, so drop the bottom gap the football layout reserves for it. */
.generic-sb .bf-tl-min { margin-bottom: 4px; }
.score-detail {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.score-detail .score-goals {
  font-size: 24px; font-weight: 900; color: #2ecc71; font-family: monospace;
  text-shadow: 0 0 8px rgba(46,204,113,.5); letter-spacing: 2px;
}
.score-detail .score-time {
  font-size: 12px; font-weight: 600; color: #90ee90;
  background: #1a3a1a; border: 1px solid #2ecc71;
  padding: 2px 6px; border-radius: 10px; font-family: monospace;
}
/* Tennis score styles */
.score-tennis { align-items: center; gap: 10px; }
.score-tennis .score-sets {
  font-size: 18px; font-weight: 800; color: #2ecc71; font-family: monospace;
  letter-spacing: 2px; text-shadow: 0 0 6px rgba(46,204,113,.4);
}
.score-tennis .score-game {
  font-size: 14px; font-weight: 700; color: #90ee90; font-family: monospace;
  background: #1a3a1a; border: 1px solid #2ecc71;
  padding: 2px 8px; border-radius: 10px; letter-spacing: 1px;
}

.event-matched {
  text-align: center; font-size: 10px; color: var(--text-2);
  font-family: monospace; line-height: 1.2;
}

/* Price cell in LIST view (best back + best lay side by side) */
.price-cell {
  height: 46px;
  display: flex; flex-direction: row;
  overflow: hidden; cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin: 0 3px;                 /* slight gap between the 1 / X / 2 market blocks (grid tracks stay fixed → headers stay aligned) */
  transition: none;
}
.price-cell.empty { cursor: default; }
.price-cell.no-runner { border: none; background: transparent; pointer-events: none; }
.price-cell.no-runner .back, .price-cell.no-runner .lay { visibility: hidden; background: transparent; }

.price-cell .back,
.price-cell .lay {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.1; padding: 2px 3px; min-width: 0;
}
.price-cell .back { background: var(--back-1); border-right: 2px solid var(--white); }
.price-cell .lay  { background: var(--lay-1); }
.price-cell.empty .back, .price-cell.empty .lay { background: #e8e8e8; }
.price-cell:not(.empty):hover .back { background: var(--back-hover); }
.price-cell:not(.empty):hover .lay  { background: var(--lay-hover); }
.price-cell .price { font-size: 13px; font-weight: 700; color: #111; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-cell .size  { font-size: 10px; color: rgba(0,0,0,.62); margin-top: 0; white-space: nowrap; }
.price-cell.empty .price::after { content: '\2014'; color: #aaa; }
.price-cell.empty .size { visibility: hidden; }

.price-cell.more {
  border: none; background: transparent; color: var(--text-2);
  align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  cursor: pointer;
}
.price-cell.more:hover { color: var(--link); }

/* Flash animations */
@keyframes flashUp   { from { box-shadow: inset 0 0 0 9999px rgba(46,204,113,.45); } to { box-shadow: none; } }
@keyframes flashDown { from { box-shadow: inset 0 0 0 9999px rgba(208,2,27,.35); }  to { box-shadow: none; } }
.flash-up   .back { animation: flashUp .55s ease-out; }
.flash-down .back { animation: flashDown .55s ease-out; }
.flash-up-lay   .lay { animation: flashUp .55s ease-out; }
.flash-down-lay .lay { animation: flashDown .55s ease-out; }

/* Skeleton loader */
.skeleton-card { padding: 12px 10px; background: var(--white); border-bottom: 1px solid var(--border-light); }
.skeleton-line {
  height: 10px; border-radius: 2px;
  background: linear-gradient(90deg, #e8e8e8, #f5f5f5, #e8e8e8);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  margin-bottom: 7px;
}
.skeleton-line.short { width: 40%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── EVENT DETAIL VIEW (inline) ──────────────────────────── */
.event-detail-header {
  background: #2c2c2c;
  color: #fff;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #000;
}
/* Real live tracker (AlphaSports widget, proxied same-origin). Flush with the header
   above it; a thin divider separates it from the Match Odds below. */
.live-tracker {
  width: 100%; background: #000;
  border-bottom: 1px solid var(--border, #000);
  overflow: hidden;
}
.live-tracker iframe { display: block; width: 100%; border: 0; }
.event-detail-header .star-btn {
  flex: none; margin-left: 4px; color: #fff; font-size: 18px; cursor: pointer;
  opacity: .85; transition: color .15s, opacity .15s, transform .1s;
}
.event-detail-header .star-btn:hover { opacity: 1; transform: scale(1.1); }
.event-detail-header .star-btn.active { color: var(--brand-yellow); opacity: 1; }
.event-detail-header .ev-info { flex: 1; min-width: 0; }
.event-detail-header .ev-name {
  font-size: 18px; font-weight: 700; color: #fff;
  line-height: 1.1;
}
/* 28/08 — Skin exfair24 (layout «betfair»): il nome dell'incontro stava schiacciato a sinistra,
   attaccato al bottone «Indietro», e pesava troppo. Centrato fra i due comandi che lo affiancano
   e portato a 16px: la riga sopra le quote deve annunciare l'incontro, non gridarlo.
   Volutamente scoped alla sola skin predefinita — matchbook e orbit hanno le loro misure, dette
   con !important, e non le tocco perché non le ho sotto gli occhi.
   Il centraggio è ottico, non geometrico: «Indietro» è più largo della stella, quindi il testo
   cade una trentina di pixel a destra del centro esatto. Correggerlo vorrebbe dire due spaziatori
   di pari larghezza, cioè markup nuovo per un difetto che nessuno vede. */
body[data-layout="betfair"] .event-detail-header .ev-info { text-align: center; }
/* 28/08, secondo giro — il titolare lo voleva «almeno della metà». Metà di 18px sono 9px, che
   sarebbero PIÙ PICCOLI della riga della data qui sotto: il titolo finirebbe sotto al suo
   sottotitolo e la gerarchia si rovescerebbe. Sceso a 13px e portata la data a 10px: il blocco
   pesa quasi la metà di prima e l'ordine di lettura resta quello giusto.
   ⚠️ Da tenere a mente se qualcuno lo rivede: 16px erano GIÀ applicati quando è arrivata la
   richiesta di rimpicciolire. Se sullo schermo sembra ancora grande, è lo zoom del browser —
   negli screenshot la barra laterale e il pannello destro erano tagliati fuori. */
body[data-layout="betfair"] .event-detail-header .ev-name { font-size: 20px; line-height: 1.25; }
body[data-layout="betfair"] .event-detail-header .ev-date { font-size: 10px; }
@media (max-width: 860px) {
  /* Sul telefono la regola generica scendeva a 15px: la mia, più specifica, la vincerebbe.
     Ripetuta qui perché sul piccolo il titolo non deve scendere sotto i 12. */
  body[data-layout="betfair"] .event-detail-header .ev-name { font-size: 16px; line-height: 1.3; }
}
.event-detail-header .ev-date { font-size: 11px; color: #aaa; margin-top: 3px; }
.event-detail-header .ev-score { margin-top: 6px; }
.event-detail-header .ev-actions { display: flex; gap: 6px; }
.ev-btn {
  padding: 5px 10px;
  background: #444; border: 1px solid #666;
  color: #fff; font-size: 11px; font-weight: 600; cursor: pointer;
  border-radius: 2px;
}
.ev-btn:hover { background: #555; }
.back-to-list {
  padding: 5px 10px;
  background: transparent; border: 1px solid #555;
  color: #aaa; font-size: 11px; cursor: pointer;
  border-radius: 2px; margin-right: 10px;
}
.back-to-list:hover { color: #fff; border-color: #888; }

/* Match Odds card */
.market-card {
  background: var(--white);
  border-bottom: 3px solid var(--border);
  margin-bottom: 0;
}
.market-card-hd {
  padding: 8px 12px;
  font-size: 13px; font-weight: 700;
  color: var(--text-0);
  background: var(--bg-light2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--brand-green);
}
/* Sport icons rendered as an emoji (e.g. tennis 🎾 — no Font Awesome free icon exists) so
   they size and align like the surrounding <i class="fas …"> glyphs. */
.sport-emoji { font-style: normal; line-height: 1; display: inline-block; }
/* Monochrome tennis-ball SVG — inherits the icon colour (currentColor) and aligns like FA glyphs. */
.sport-ic-svg { display: inline-block; vertical-align: -0.125em; }

/* Feature bar (Going In-Play / Cash Out / Rules / Matched / Refresh) */
.feature-bar {
  background: var(--bg-light);
  padding: 5px 12px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; flex-wrap: wrap;
}
.feature-bar label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--text-1); }
.feature-bar input[type=checkbox] { cursor: pointer; }
/* informational flag (e.g. Going In-Play) — indicator only, not a control */
.feature-bar .feat-flag { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-1); }
.feature-bar .feat-flag i { color: var(--green); font-size: 10px; }
.feature-bar .cash-out-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); display: inline-block;
}
.feature-bar .rules-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 7px; border: 1px solid var(--border);
  background: var(--white); font-size: 11px; cursor: pointer; border-radius: 2px;
}
.feature-bar .matched-info {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--text-1);
}
.refresh-btn {
  padding: 3px 9px;
  background: var(--bg-light2); border: 1px solid var(--border);
  font-size: 11px; cursor: pointer; border-radius: 2px;
}
.refresh-btn:hover { background: #ddd; }

/* Selections count + overround + Back all / Lay all header row
   Grid mirrors .runner-row: 1fr 64 64 72 | 72 64 64          */
.col-header-row {
  display: grid;
  grid-template-columns: 1fr 64px 64px 72px 72px 64px 64px;
  align-items: center;
  padding: 5px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  min-height: 32px;
  gap: 2px;
}
.sel-count { font-weight: 600; color: var(--text-1); }
/* overround-back spans the first 2 back cols (64+64) */
.overround-back {
  grid-column: span 2;
  text-align: center;
  font-size: 11px; color: var(--text-2); font-weight: 600;
}
/* Back all button sits over the 3rd back col (72px best back) — light tint + BLACK text (Betfair) */
.back-all-btn {
  text-align: center;
  background: var(--back-1); color: #1a1a1a;
  font-size: 11px; font-weight: 700; padding: 4px 0;
  border-radius: 2px; cursor: pointer;
}
/* Lay all button sits over the 1st lay col (72px best lay) — light tint + BLACK text (Betfair) */
.lay-all-btn {
  text-align: center;
  background: var(--lay-1); color: #1a1a1a;
  font-size: 11px; font-weight: 700; padding: 4px 0;
  border-radius: 2px; cursor: pointer;
}
/* overround-lay spans the last 2 lay cols (64+64) */
.overround-lay {
  grid-column: span 2;
  text-align: center;
  font-size: 11px; color: var(--text-2); font-weight: 600;
}

/* Runner rows in event detail — 3 back + 3 lay */
.runner-row {
  display: grid;
  grid-template-columns: 1fr 64px 64px 72px 72px 64px 64px;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  min-height: 44px;
  padding: 0 12px;
  gap: 2px;
}
.runner-row:last-child { border-bottom: none; }
.runner-name-cell {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-0);
  min-width: 0;
}
.runner-name-cell .runner-icon {
  width: 20px; height: 20px;
  background: var(--bg-light2); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-3); flex-shrink: 0;
}
.runner-name-cell .runner-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Depth cells (3x back/lay) */
.depth-cell {
  height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; line-height: 1.1;
  padding: 2px; font-variant-numeric: tabular-nums;
  border: none;
}
.depth-cell.back-5 { background: var(--back-5); }
.depth-cell.back-4 { background: var(--back-4); }
.depth-cell.back-3 { background: var(--back-3); }
.depth-cell.back-2 { background: var(--back-2); }
.depth-cell.back-1 { background: var(--back-1); }
.depth-cell.lay-1  { background: var(--lay-1); }
.depth-cell.lay-2  { background: var(--lay-2); }
.depth-cell.lay-3  { background: var(--lay-3); }
.depth-cell.lay-4  { background: var(--lay-4); }
.depth-cell.lay-5  { background: var(--lay-5); }
/* Depth cells 4 and 5 are hidden by default — appear only when server sends real liquidity */
.depth-cell.back-4, .depth-cell.back-5,
.depth-cell.lay-4,  .depth-cell.lay-5  { display: none; }
/* Empty header placeholders for depth 4/5 columns */
.depth-hd { display: none; }

/* ── Dynamic depth expansion (mirrors Betfair behaviour) ───── */
/* depth-4: 9-column grid — shows cells back-4 and lay-4 */
.market-card.has-depth-4 .col-header-row,
.market-card.has-depth-4 .runner-row {
  grid-template-columns: 1fr 54px 64px 64px 72px 72px 64px 64px 54px;
}
.market-card.has-depth-4 .depth-hd-back-4,
.market-card.has-depth-4 .depth-hd-lay-4  { display: block; }
.market-card.has-depth-4 .depth-cell.back-4,
.market-card.has-depth-4 .depth-cell.lay-4  { display: flex; }
/* depth-5: 11-column grid — shows cells back-4/5 and lay-4/5 */
.market-card.has-depth-5 .col-header-row,
.market-card.has-depth-5 .runner-row {
  grid-template-columns: 1fr 48px 54px 64px 64px 72px 72px 64px 64px 54px 48px;
}
.market-card.has-depth-5 .depth-hd-back-4,
.market-card.has-depth-5 .depth-hd-back-5,
.market-card.has-depth-5 .depth-hd-lay-4,
.market-card.has-depth-5 .depth-hd-lay-5  { display: block; }
.market-card.has-depth-5 .depth-cell.back-4,
.market-card.has-depth-5 .depth-cell.back-5,
.market-card.has-depth-5 .depth-cell.lay-4,
.market-card.has-depth-5 .depth-cell.lay-5  { display: flex; }

.depth-cell:not(.empty):hover,
.depth-cell.empty.manual-price:hover { filter: brightness(0.93); }
.depth-cell.empty  { background: #eeeeee; cursor: default; }
.depth-cell.empty:not(.manual-price):hover { background: #d9d9d9; }
.depth-cell.empty.manual-price { cursor: pointer; }
.depth-cell.empty.manual-price.back-1:hover { background: var(--back-hover); }
.depth-cell.empty.manual-price.lay-1:hover  { background: var(--lay-hover); }
.depth-cell .d-price { font-size: 13px; font-weight: 700; color: #111; }
.depth-cell .d-size  { font-size: 9.5px; color: rgba(0,0,0,.62); margin-top: 0; }
.depth-cell.empty .d-price::after { content: '\2014'; color: #aaa; font-size: 11px; }
.depth-cell.empty .d-size { visibility: hidden; }
/* User's own unmatched offer in the ladder */
.depth-cell.my-offer { outline: 2px solid #2789ce; outline-offset: -2px; }
.depth-cell.my-offer .d-price::after { content: ' \2605'; color: #2789ce; font-size: 8px; }
/* Runner P&L indicator (>> ±X.XX) */
.runner-pl { font-size: 11px; font-family: monospace; margin-left: 6px; white-space: nowrap; font-weight: 600; }
/* win/loss must stay red/green: beats the later typography rules that force .runner-pl grey via !important */
.runner-pl.pl-pos { color: var(--green) !important; font-weight: 700 !important; font-size: 13px !important; }
.runner-pl.pl-neg { color: var(--red) !important; font-weight: 700 !important; font-size: 13px !important; }

/* Other Markets section */
.other-markets-hd {
  background: #1a1a1a;
  color: #fff;
  padding: 8px 14px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.other-markets-hd .om-close {
  background: transparent; border: 1px solid #555;
  color: #aaa; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 2px; font-size: 12px;
}
.other-markets-hd .om-close:hover { color: #fff; border-color: #888; }

.other-tabs {
  background: var(--bg-light);
  display: flex; align-items: stretch;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
}
.ot-tab {
  padding: 9px 16px;
  background: transparent; border: none;
  color: var(--text-1); font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.ot-tab:hover { background: var(--white); color: var(--text-0); }
.ot-tab.active { color: var(--text-0); background: var(--white); border-bottom-color: var(--brand-green); }

/* Two INDEPENDENT columns (CSS multi-column) on a light tray, each market a self-contained white
   CARD with a gutter between columns and a gap between stacked cards — Betfair-style, not a dense
   run of boxes glued together. */
.other-content {
  background: var(--bg-light);
  column-count: 2; column-gap: 10px;
  padding: 10px;
}
.other-content .market-condensed {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;                 /* clip the header's rounded top corners */
  margin: 0 0 10px;                 /* vertical gap between stacked cards */
  break-inside: avoid; -webkit-column-break-inside: avoid;
}

.market-condensed {
  background: var(--white);
}
.market-condensed-hd {
  background: var(--bg-light2);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-1);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--brand-green);
}
.market-condensed-hd .mc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text-0); }
.market-condensed-hd .mc-icons { display: flex; gap: 4px; flex-shrink: 0; }
.mc-icon-btn {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light2); border: 1px solid var(--border);
  border-radius: 2px; font-size: 9px; cursor: pointer; color: var(--text-2);
}
.mc-icon-btn:hover { background: #ddd; }
.market-condensed-hd .mc-stat { font-size: 10px; color: var(--text-3); font-weight: 600; }

/* Condensed runner row (in Other Markets) */
.cm-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(88px,130px);
  align-items: center; padding: 4px 10px;
  border-bottom: 1px solid var(--border-light); gap: 6px;
}
.cm-row:last-child { border-bottom: none; }
/* Il troncamento passa dall'etichetta al solo NOME: il P&L accanto al segno non deve
   sparire nei puntini quando il nome del partecipante e' lungo (28/08). */
.cm-name { font-size: 12px; font-weight: 600; color: var(--text-0); display: flex; align-items: center; gap: 2px; min-width: 0; }
.cm-name .cm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-name .runner-pl { flex: 0 0 auto; }

/* Line markets (Over/Under, Handicap): Betfair-style compact widget — 3-line centered selector
   + Back/Lay sub-header + the two rows of the chosen line. Prices reuse .cm-price-cell. */
.line-market .lm-hd { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; background: var(--bg-light2); border-bottom: 1px solid var(--border); border-left: 3px solid var(--brand-green); }
.line-market .lm-hd .mc-title { font-size: 13px; font-weight: 700; color: var(--text-0); }
.lm-feat { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 11px; }
.lm-feat input { margin: 0; }
.lm-feat .lm-co { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-yellow); display: inline-block; }
.lm-feat .lm-rules { border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; background: var(--white); white-space: nowrap; cursor: pointer; }
.lm-feat .lm-rules:hover { background: var(--bg-light); color: var(--text-0); }
.lm-feat > .fa-bolt { color: var(--green); font-size: 10px; }
.lm-nav { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border-light); }
.lm-arrow { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--border); background: var(--white); color: var(--text-2); border-radius: 5px; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lm-arrow:hover:not([disabled]) { background: var(--bg-light); color: var(--text-0); }
.lm-arrow[disabled] { opacity: .3; cursor: default; }
.lm-lines { flex: 1 1 auto; display: flex; justify-content: space-around; align-items: center; overflow: hidden; }
.lm-line { padding: 3px 10px; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-line:hover:not(.active) { background: var(--bg-light); color: var(--text-0); }
.lm-line.active { color: #1f6fd0; font-weight: 800; background: #eaf3fd; }
/* Line-market widgets flow into the SAME 2 columns as the other condensed markets (compact,
   Betfair-style left/right). break-inside:avoid (also inherited from .market-condensed) keeps
   each widget intact in one column — no diagonal "staircase". */
.other-content .line-market { width: 100%; float: none; break-inside: avoid; -webkit-column-break-inside: avoid; }
/* Flex (not grid) with a fixed-basis price block → the two rows + the Back/Lay header are always
   pinned to the SAME right-hand column, immune to any inherited .cm-row grid rules. */
.lm-subhd { display: flex; align-items: center; padding: 4px 13px; border-bottom: 1px solid var(--border-light); }
.lm-subhd .lm-matched { flex: 1 1 auto; font-size: 11px; color: var(--text-3); }
.lm-subhd .lm-bls { flex: 0 0 140px; display: flex; }
.lm-subhd .lm-bls span { flex: 1 1 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-2); }
.line-market .lm-body .cm-row { display: flex; align-items: center; gap: 8px; padding: 2px 14px; }
.line-market .lm-body .cm-name { flex: 1 1 auto; min-width: 0; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.line-market .lm-body .cm-name .cm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 14/09 - Il numero verde del profitto spariva stringendo la finestra: non cancellato,
   COPERTO. Misurato su una colonna da 380px ne era nascosto il 100%.
   La causa non era il nome contro il numero: questa cella era un flex RIGIDO
   (0 0 140px). Quando il riquadro e' piu' stretto di 140 + nome, alla colonna del nome
   resta spazio NEGATIVO: va a zero e il suo contenuto trabocca a destra, dove questa
   cella - che viene dopo nel DOM e ha lo sfondo pieno - ci si dipinge sopra.
   Non lo prendeva una media query: la finestra puo' essere larga 1070 mentre la colonna
   centrale sta in 420 (menu a sinistra, schedina a destra). Ora la cella CEDE spazio
   fino a 96px invece di pretenderne 140. Sopra quella larghezza nulla cambia. */
.line-market .lm-body .cm-price-cell { flex: 0 1 140px; width: auto; min-width: 96px; height: 34px; border: none; border-radius: 5px; }
body.dark .lm-line.active { color: #7fb6ff; background: rgba(127,182,255,.14); }
body.dark .lm-feat .lm-rules { background: #1a1d23; }
.cm-price-cell {
  height: 36px;
  display: flex; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer;
}
.cm-price-cell .cm-back, .cm-price-cell .cm-lay {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.1; padding: 2px 3px; font-variant-numeric: tabular-nums;
}
.cm-price-cell .cm-back { background: var(--back-1); border-right: 2px solid var(--white); }
.cm-price-cell .cm-lay  { background: var(--lay-1); }
.cm-price-cell.empty .cm-back, .cm-price-cell.empty .cm-lay { background: #e8e8e8; }
.cm-price-cell .cm-back, .cm-price-cell .cm-lay { cursor: pointer; }
.cm-price-cell .cm-back:hover { background: var(--back-hover); }
.cm-price-cell .cm-lay:hover  { background: var(--lay-hover); }
.cm-price-cell .price { font-size: 12px; font-weight: 700; color: #111; }
.cm-price-cell .size  { font-size: 9.5px; color: rgba(0,0,0,.62); margin-top: 0; }
.cm-price-cell.empty .price::after { content: '\2014'; color: #aaa; }
.cm-price-cell.empty .size { visibility: hidden; }
.cm-price-cell .cm-back.my-offer,
.cm-price-cell .cm-lay.my-offer { outline: 2px solid #2789ce; outline-offset: -2px; }
.cm-price-cell .cm-back.my-offer .price::after,
.cm-price-cell .cm-lay.my-offer .price::after { content: ' \2605'; color: #2789ce; font-size: 8px; }

/* View full market link — bottom-right of the card, Betfair-style */
.view-full-link {
  padding: 7px 13px;
  font-size: 11px; color: var(--link);
  cursor: pointer; display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  border-top: 1px solid var(--border-light);
}
.view-full-link:hover { text-decoration: underline; }

/* Condensed-market sub-header: matched on the left, Back/Lay column labels aligned over the cell. */
.cm-subhd {
  display: grid; grid-template-columns: 1fr 130px; gap: 6px;
  align-items: center; padding: 4px 10px;
  border-bottom: 1px solid var(--border-light);
}
.cm-subhd .mc-stat { font-size: 10px; color: var(--text-3); font-weight: 600; }
.cm-subhd .cm-bls { display: flex; }
.cm-subhd .cm-bls span { flex: 1 1 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-2); }

/* Promoted full market (clicked via "Vedi mercato completo") shown at the top */
.promoted-market:empty { display: none; }
.promoted-market { margin-bottom: 8px; scroll-margin-top: 8px; }
.promoted-bar {
  background: var(--link, #1f6fbf); color: #fff;
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.promoted-bar .promoted-close {
  background: transparent; border: 1px solid rgba(255,255,255,.5);
  color: #fff; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 2px; font-size: 12px;
}
.promoted-bar .promoted-close:hover { background: rgba(255,255,255,.15); }

/* ── RIGHT SIDEBAR ────────────────────────────────────────── */
.sidebar-right {
  background: var(--white);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.betslip { display: flex; flex-direction: column; }
.betslip-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.bet-tab {
  flex: 1; padding: 8px 6px;
  background: var(--bg-light);
  border: none; border-bottom: 2px solid transparent;
  color: var(--text-1); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.bet-tab:hover { background: var(--bg-light2); }
.bet-tab.active { background: var(--white); border-bottom-color: #1a1a1a; color: var(--text-0); }
.bet-count {
  display: inline-flex; background: var(--text-3); color: #fff;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 8px; font-size: 10px;
  align-items: center; justify-content: center; font-weight: 700;
}
.bet-tab.active .bet-count { background: var(--text-0); }

.betslip-market-name {
  padding: 7px 10px;
  font-size: 12px; font-weight: 700; color: var(--text-0);
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
}
.betslip-body { flex: 1; overflow-y: auto; min-height: 80px; }
.betslip-empty {
  padding: 14px 12px;
  font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.6;
}
.betslip-empty p { margin-bottom: 6px; }
.btn-multiples {
  display: block; width: 100%; margin-top: 10px;
  padding: 8px 6px;
  background: var(--brand-yellow); border: none; border-radius: 2px;
  color: #000; font-size: 11px; font-weight: 700; cursor: pointer;
  line-height: 1.3;
}
.btn-multiples:hover { background: #e09018; }

/* Betslip selection card */
.selection {
  background: #f9f9f9; border: 1px solid var(--border);
  border-radius: 2px; padding: 7px 8px; margin: 6px;
}
.selection.back { border-left: 4px solid var(--back-1); }
.selection.lay  { border-left: 4px solid var(--lay-1); }
.selection-hd { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 5px; }
.selection-info { flex: 1; min-width: 0; }
.selection-name { font-size: 12px; font-weight: 700; }
.selection-meta { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.sel-side { padding: 1px 5px; border-radius: 2px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.selection.back .sel-side { background: var(--back-1); }
.selection.lay  .sel-side { background: var(--lay-1); }
.sel-x { color: var(--text-3); cursor: pointer; padding: 0 4px; }
.sel-x:hover { color: var(--red); }
.selection-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; }
.sel-field { background: #fff; border: 1px solid var(--border); border-radius: 2px; padding: 3px 6px; }
.sel-field-label { font-size: 9px; color: var(--text-3); text-transform: uppercase; font-weight: 700; }
.sel-field input {
  width: 100%; border: none; outline: none; background: transparent;
  font: 700 12px monospace; color: var(--text-0); padding: 1px 0;
}

.betslip-footer {
  padding: 0;
  background: var(--bg-light);
}
.betslip-footer .betslip-options {
  padding: 8px 10px;
}
.footer-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-1); margin-bottom: 4px;
}
.profit-val { color: var(--green); font-weight: 700; }
.btn-place {
  width: 100%; padding: 8px;
  background: var(--brand-green); border: none; border-radius: 2px;
  color: #000; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-transform: uppercase;
}
.btn-place:hover { background: #35b044; }

.liability-row { color: var(--text-1); }
.liability-val { color: var(--red); font-weight: 700; }

.betslip-options {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 4px;
}
.bs-opt {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-2); cursor: pointer;
}
.bs-opt input { cursor: pointer; }

/* Selection card — pro */
.selection-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px;
}
.odds-stepper {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 2px;
  overflow: hidden; background: #fff;
}
.odds-stepper input {
  flex: 1; min-width: 0; border: none; outline: none; text-align: center;
  font: 700 13px monospace; color: var(--text-0); background: transparent;
}
.step-btn {
  width: 26px; border: none; cursor: pointer;
  background: var(--bg-light2); color: var(--text-1);
  font-size: 16px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.step-btn:hover { background: #d8d8d8; }
.step-btn:active { background: #c8c8c8; }
.stake-input {
  width: 100%; border: 1px solid var(--border); border-radius: 2px;
  padding: 5px 7px; font: 700 13px monospace; color: var(--text-0);
  outline: none; background: #fff;
}
.stake-input:focus, .odds-stepper:focus-within { border-color: var(--brand-yellow); }

.quick-stakes {
  display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap;
}
.quick-stakes button {
  flex: 1; min-width: 0; padding: 4px 0;
  background: #eef2f7; border: 1px solid var(--border);
  border-radius: 2px; font-size: 10px; font-weight: 700;
  color: var(--text-1); cursor: pointer;
}
.quick-stakes button:hover { background: #dce6f2; color: var(--link); }
.quick-stakes .qs-clear { flex: 0 0 28px; color: var(--text-3); }
.quick-stakes .qs-clear:hover { background: #fde0e6; color: var(--red); }

.sel-pl {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-top: 6px;
  padding-top: 5px; border-top: 1px dashed var(--border-light);
  color: var(--text-2);
}
.sel-pl .pl-profit { color: var(--green); font-weight: 700; }
.sel-pl.liability { border-top: none; padding-top: 2px; margin-top: 2px; }
.sel-pl .pl-liability { color: var(--red); font-weight: 700; }

/* Betfair-style betslip selection — light back-blue / lay-pink, dark text */
.bf-selection { border-bottom: 1px solid var(--border); }
.bf-sel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px;
  background: #d7dce2; color: var(--brand-dark);
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
/* Back header → Betfair light blue; Lay header → Betfair light pink (same hues as the price cells) */
.bf-selection.back .bf-sel-hd { background: var(--back-1); color: var(--brand-dark); border-bottom: 1px solid var(--back-hover); }
.bf-selection.lay .bf-sel-hd  { background: var(--lay-1);  color: var(--brand-dark); border-bottom: 1px solid var(--lay-hover); }
.bf-sel-x {
  cursor: pointer; font-size: 16px; font-weight: 700;
  opacity: .65; line-height: 1; padding: 0 2px; color: inherit;
}
.bf-sel-x:hover { opacity: 1; color: var(--red); }
.bf-sel-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: #e9f3fc;
}
.bf-selection.lay .bf-sel-row { background: #fdeef2; }
.bf-sel-name { flex: 1; font-size: 12px; font-weight: 700; color: var(--text-0); min-width: 0; }
/* Legacy — kept for any reference outside betslip */
.bf-sel-odds {
  flex-shrink: 0; width: 72px; padding: 4px 4px;
  border: 1px solid var(--border); font: 700 13px monospace;
  color: #000; text-align: center; outline: none; background: #fff;
}
.bf-sel-odds:focus { border-color: var(--orange); }

/* Custom Betfair-style tick stepper (replaces native number spinner) */
.bf-odds-wrap {
  display: flex; align-items: stretch;
  flex-shrink: 0; width: 80px; height: 30px;
  border: 1px solid var(--border); background: #fff; overflow: hidden;
}
.bf-odds-wrap:focus-within { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.bf-odds-inp {
  flex: 1; min-width: 0;
  padding: 0 2px; border: none; outline: none;
  font: 700 13px monospace; color: #000; text-align: center;
  background: transparent;
}
/* Remove browser-native number spinners from the text fallback */
.bf-odds-inp::-webkit-inner-spin-button,
.bf-odds-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
.bf-step-btn {
  flex-shrink: 0; width: 20px;
  border: none; border-left: 1px solid var(--border); outline: none;
  cursor: pointer; padding: 0;
  background: #dde8f5; color: #446;
  font-size: 8px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  user-select: none; touch-action: none; -webkit-user-select: none;
}
.bf-step-btn.bf-step-dn { border-left: none; border-right: 1px solid var(--border); }
.bf-step-btn:hover { background: #b8cfec; color: #000; }
.bf-step-btn:active { background: #9abce0; }
.bf-selection.lay .bf-step-btn { background: #f0d5dc; color: #644; }
.bf-selection.lay .bf-step-btn:hover { background: #e0b5c0; }
.bf-sel-stake {
  flex-shrink: 0; width: 86px; padding: 4px 6px;
  border: 1px solid var(--border); font: 700 13px monospace;
  color: #000; outline: none; background: #fff;
  -moz-appearance: textfield;
}
.bf-sel-stake:focus { border-color: var(--orange); }
.bf-sel-stake::-webkit-outer-spin-button,
.bf-sel-stake::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bf-sel-profit-col {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; min-width: 68px;
}
.bf-profit-label { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.bf-profit-val { font-size: 12px; font-weight: 700; color: var(--green); }
.bf-sel-meta {
  padding: 3px 10px 6px; font-size: 11px;
  color: var(--text-2); background: #fff; border-top: 1px solid var(--border-light);
}
.bf-sel-meta .pl-liability { font-weight: 700; color: var(--red); }

/* Betfair-style footer */
.bf-footer-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border); background: var(--bg-light);
}
.bf-cancel-all {
  flex-shrink: 0; padding: 7px 10px; border: 1px solid #bbb;
  border-radius: 3px; background: #d4d4d4; color: #333;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.bf-cancel-all:hover { background: #bbb; }
#btnPlace { flex: 1; }

/* ── BetEx-style tabular betslip ─────────────────────────────── */
.bx-bs { font-size: 12px; }
.bx-hd, .bx-line {
  display: grid;
  grid-template-columns: minmax(62px,1.2fr) 80px 1fr 1fr;
  align-items: center; gap: 4px; padding: 6px 8px;
}
.bx-hd {
  background: #f3c6d2; color: #333; font-weight: 600; font-size: 10.5px;
  border-bottom: 1px solid var(--lay-hover);
}
.bx-hd.back { background: #bcd9f5; border-bottom-color: #8fbceb; }  /* blue header for the Back section */
.bx-hd.lay  { background: #f3c6d2; }                               /* pink header for the Lay section */
.bx-grp + .bx-grp { margin-top: 8px; }                             /* gap between Back and Lay sections */
.bx-hd-out.plain { display: block; text-align: right; font-weight: 600; }
.bx-hd-side { font-weight: 700; }
.bx-hd-side.back { color: #1e4d80; }
.bx-hd-side.lay  { color: #9c2b46; }
.bx-hd-odds, .bx-hd-stake { text-align: center; }
.bx-hd-out { display: flex; flex-direction: column; gap: 1px; font-size: 10px; }
.bx-hd-out label { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.bx-hd-out input[type=radio] { margin: 0; width: 12px; height: 12px; }

.bx-sel { border-bottom: 1px solid var(--border); }
.bx-sel.lay  { background: #fdeef2; }
.bx-sel.back { background: #eef4fd; }
/* Selezione rifiutata dal server: bordo rosso finch\u00e9 il giocatore non corregge lo stake */
.bx-sel.bx-err { box-shadow: inset 0 0 0 2px #d9342b; }

/* Rifiuto piazzamento mostrato dentro la schedina, sopra il bottone Piazza */
.slip-error {
  margin: 8px 10px 2px;
  padding: 8px 10px;
  background: #fdecea;
  border: 1px solid #e8918c;
  border-left: 4px solid #d9342b;
  border-radius: 5px;
  color: #a8231b;
  font-size: 12.5px;
  font-weight: 700;
  animation: slipErrIn .18s ease-out;
}
@keyframes slipErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Stessa cosa per la barra quick-bet inline sulle quote (flex-wrap \u2192 riga intera) */
.iqb-error {
  flex-basis: 100%;
  padding: 6px 10px;
  background: #fdecea;
  border: 1px solid #e8918c;
  border-left: 4px solid #d9342b;
  border-radius: 5px;
  color: #a8231b;
  font-size: 12px;
  font-weight: 700;
  animation: slipErrIn .18s ease-out;
}
.bx-c-side { display: flex; align-items: center; gap: 5px; font-weight: 400; min-width: 0; color: var(--text-0); }
.bx-c-side .bx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-x { cursor: pointer; color: #999; font-weight: 700; flex-shrink: 0; }
.bx-x:hover { color: var(--red); }
.bx-c-odds { display: flex; align-items: stretch; justify-content: center; }
.bx-c-odds .bf-odds-inp {
  width: 48px; text-align: center; cursor: text;
  border: 1px solid var(--border); border-radius: 3px 0 0 3px;
  background: #fff;
}
.bx-c-odds .bf-odds-inp:hover { border-color: #999; }
.bx-c-odds .bf-odds-inp:focus { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.bx-odds-steps { display: flex; flex-direction: column; }
.bx-odds-steps button {
  width: 16px; height: 11px; line-height: 9px; padding: 0; font-size: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer; color: #555;
}
.bx-odds-steps button:hover { background: #eee; }
.bx-c-stake { display: flex; justify-content: center; }
.bx-c-stake .bf-sel-stake { width: 100%; text-align: center; }
.bx-c-out { text-align: right; font-weight: 700; color: var(--text-0); padding-right: 2px; }
.bx-quick { display: flex; gap: 6px; padding: 0 8px 8px; }
.bx-quick button {
  flex: 1; padding: 5px 0; background: #fff; border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; font-size: 11px; color: #444;
}
.bx-quick button:hover { background: #f0f0f0; border-color: #999; }
.bx-liab-total { text-align: right; padding: 8px 10px; font-size: 12px; color: var(--text-1); }
.bx-liab-total b { font-size: 13px; color: var(--text-0); }

/* ── «Al live» (At In-Play) ───────────────────────────────────────────────────
   La barra scura della ricevuta Betfair: cosa fare della parte NON abbinata quando
   la partita comincia. Stesso grigio della testata «Scommesse non abbinate» delle
   scommesse aperte (.obx-sec-hd), cosi' le due schermate si riconoscono come la
   stessa cosa detta in due momenti diversi. */
.bx-atip { background: #2b2b2b; color: #fff; padding: 7px 10px; margin-top: 8px; }
.bx-atip-hd { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.bx-atip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bx-atip-lbl { font-size: 11px; color: #cfcfcf; }
.bx-atip-opt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.bx-atip-opt input { margin: 0; cursor: pointer; accent-color: #f6c344; }

/* ── BetEx-style Open Bets (Unmatched / Matched tables) ──────── */
.obx-wrap { font-size: 12px; padding-bottom: 8px; }
.obx-sec-hd {
  background: #2b2b2b; color: #fff; font-weight: 700; font-size: 11.5px;
  padding: 7px 10px; margin-top: 10px;
}
.obx-wrap > .obx-sec-hd:first-child { margin-top: 0; }
.obx-none { text-align: center; color: var(--text-1); padding: 16px 8px; font-size: 12px; }

.obx-tbl { border: 1px solid var(--border); border-top: none; }
.obx-hd, .obx-row {
  display: grid; grid-template-columns: minmax(0,1.45fr) 76px 1fr 1fr;
  align-items: center; gap: 4px; padding: 5px 8px;
}
.obx-hd { font-size: 10px; font-weight: 700; }
.obx-back .obx-hd { background: #cfe0f5; color: #1e4d80; }
.obx-lay  .obx-hd { background: #f3c6d2; color: #9c2b46; }
.obx-hd-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obx-hd-c { text-align: center; }
.obx-back .obx-row { background: #eef4fd; }
.obx-lay  .obx-row { background: #fdeef2; }
.obx-sel {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-weight: 700; color: var(--text-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obx-x { cursor: pointer; color: #b33; font-weight: 700; flex-shrink: 0; }
.obx-x:hover { color: var(--red); }
.obx-num { text-align: center; font-weight: 600; color: var(--text-0); }
.obx-odds-cell { display: flex; align-items: stretch; justify-content: center; }
.obx-odds-cell .obx-inp { width: 46px; text-align: center; }
.obx-spin { display: flex; flex-direction: column; }
.obx-spin button {
  width: 16px; height: 11px; line-height: 9px; padding: 0; font-size: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer; color: #555;
}
.obx-spin button:hover { background: #eee; }
.obx-stake-cell { display: flex; justify-content: center; }
.obx-stake-cell .obx-inp { width: 100%; max-width: 70px; text-align: center; }
.obx-inp { border: 1px solid var(--border); border-radius: 3px; padding: 3px 2px; font-size: 11px; font-family: inherit; }
.obx-sub { padding: 3px 8px 6px; font-size: 10px; color: var(--text-2); background: #fff; }
.obx-evlink { color: var(--accent, #1f6fd6); font-weight: 600; cursor: pointer; }
.obx-evlink:hover { text-decoration: underline; }
/* «Al live» per singola giocata non abbinata: piu' sobrio della barra della schedina —
   qui e' un dettaglio della riga, non la decisione principale della schermata. */
.obx-atip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 8px 5px; background: #fff; border-top: 1px dashed var(--border);
  font-size: 10.5px; color: var(--text-2);
}
.obx-atip-lbl { font-weight: 700; }
.obx-atip-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.obx-atip-opt input { margin: 0; cursor: pointer; }
.obx-co { padding: 0 8px 8px; background: #fff; }
.obx-co .ob-cashout-btn { width: 100%; }

.obx-actions { display: flex; gap: 6px; padding: 8px; }
.obx-btn {
  flex: 1; padding: 7px 0; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer; font-size: 11px; font-weight: 700; font-family: inherit;
}
.obx-cancel-all { background: var(--red); color: #fff; border-color: var(--red); }
.obx-cancel-all:hover { filter: brightness(.94); }
.obx-btn:disabled { opacity: .5; cursor: default; filter: none; }
.obx-reset { background: #e9e9e9; color: #444; }
.obx-reset:hover { background: #ddd; }
.obx-update { background: var(--orange, #f7a700); color: #1a1a1a; border-color: var(--orange, #f7a700); }
.obx-update:hover { filter: brightness(.96); }

/* Book % display in market header — shown only when "Show % Book" is on */
.book-pct { font-weight: 700; color: var(--text-1); }
body:not(.show-book) .book-pct { visibility: hidden; }

/* Live Stream section */
.live-stream-box {
  border-top: 3px solid var(--border);
  flex-shrink: 0;
}
.live-stream-hd {
  background: #1a1a1a;
  color: #fff;
  padding: 6px 10px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700;
}
.pop-out-btn {
  background: transparent; border: 1px solid #555;
  color: #aaa; font-size: 10px; cursor: pointer;
  padding: 2px 6px; border-radius: 2px;
}
.pop-out-btn:hover { color: #fff; }
.pitch-area { background: #3a7d44; overflow: hidden; }
.pitch-svg { width: 100%; }
.pitch-svg svg { display: block; width: 100%; height: auto; }
/* When the real tracker is mounted, the iframe replaces the pitch SVG in this panel. */
.pitch-area.has-tracker { background: #000; min-height: 220px; }
.pitch-area iframe { display: block; width: 100%; border: 0; }
/* Tracker / Streaming (26/09): interruttore nella testata scura, video a 16:9 al posto del campo. */
.ls-switch { display: inline-flex; gap: 2px; margin-left: auto; margin-right: 6px; }
.ls-switch[hidden], .ls-switch button[hidden] { display: none; }
.ls-switch button { background: transparent; border: 1px solid #555; color: #bbb; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; cursor: pointer; }
.ls-switch button.is-on { background: var(--brand-yellow, #ffb80c); border-color: transparent; color: #111; }
.pitch-area.has-stream, .live-tracker[data-kind="stream"] { background: #000; }
.ls-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.ls-msg { padding: 18px 12px; color: #ddd; font-size: 12px; text-align: center; line-height: 1.4; }
.ls-msg a { color: var(--brand-yellow, #ffb80c); font-weight: 700; }

/* Idle tracker banner (no live tracker mounted yet — prematch, or an unsupported sport):
   a small branded card instead of the flat green pitch rectangle. CSS-only (::before/::after),
   so it needs no markup changes and no image asset — skins with their own treatment (matchbook)
   override it further down the cascade. */
.pitch-area:not(.has-tracker) {
  position: relative;
  min-height: 190px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,184,12,.18), transparent 55%),
    linear-gradient(160deg, #1c2028 0%, #14171d 100%);
  overflow: hidden;
}
.pitch-area:not(.has-tracker) .pitch-svg { display: none; }
/* Pulsing dot instead of an icon-font glyph — no font/codepoint dependency, so it can never
   render as a missing-glyph box if the icon font fails to load or the codepoint is wrong. */
.pitch-area:not(.has-tracker)::before {
  content: "";
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-yellow);
  box-shadow: 0 0 0 0 rgba(255,184,12,.55);
  animation: ptIdlePulse 1.8s infinite;
}
@keyframes ptIdlePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,12,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,184,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,184,12,0); }
}
.pitch-area:not(.has-tracker)::after {
  content: "Match Center";
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  text-align: center; color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; opacity: .85;
}

.play-games-bar {
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  background: var(--bg-light);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--text-1);
}
.play-games-bar:hover { background: var(--bg-light2); }

/* ── MATCH NOTIFICATION POPUP ───────────────────────────── */
.match-notif {
  position: fixed; top: 80px; right: 14px; z-index: var(--z-notif);
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; color: #1a1a1a;
  border: 1px solid #ccc; border-left: 5px solid var(--green);
  border-radius: 10px; padding: 14px 16px;
  min-width: 260px; max-width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  transform: translateX(130%); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.match-notif.mn-visible { transform: translateX(0); }
.mn-icon { color: var(--green); font-size: 24px; margin-top: 2px; flex-shrink: 0; }
.mn-body { flex: 1; min-width: 0; }
.mn-title { font-size: 14px; font-weight: 800; color: #1a1a1a; }
.mn-detail { font-size: 13px; margin-top: 3px; color: #333; }
.mn-detail b { color: var(--green); font-size: 15px; }
.mn-sub { font-size: 11px; color: #888; margin-top: 3px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Partial-fill line: how much of the stake is still resting unmatched. Amber to read as "pending". */
.mn-sub.mn-queue { color: #b26a00; font-weight: 700; margin-top: 4px; }
.mn-sub.mn-queue i { margin-right: 4px; opacity: .8; }
.mn-close {
  background: transparent; border: none; cursor: pointer;
  color: #aaa; font-size: 14px; padding: 0 2px; flex-shrink: 0; line-height: 1;
}
.mn-close:hover { color: #333; }

/* ── IN-PLAY DELAY ───────────────────────────────────────── */
.bs-inplay-badge {
  display: inline-flex; align-items: center;
  background: var(--red); color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
  vertical-align: middle; text-transform: uppercase;
  animation: pulse-red 1.2s infinite;
}
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Countdown ring inside the Place bet button */
.cd-ring {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 14px; right: 14px;
  background: var(--text-0); color: #fff;
  border-radius: 3px; padding: 9px 13px;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  z-index: var(--z-toast); display: flex; align-items: center; gap: 7px;
  animation: toastIn .18s;
}
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
.toast i { font-size: 13px; }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ── SUSPENDED / CLOSED MARKET — event-detail view ───────── */
.market-card.mkt-suspended, .market-card.mkt-closed { position: relative; }
.market-card.mkt-suspended .depth-cell,
.market-card.mkt-closed .depth-cell { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.market-card.mkt-suspended .col-header-row::after {
  content: 'SUSPENDED';
  margin-left: auto; margin-right: 12px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 2px;
}
.market-card.mkt-closed .col-header-row::after {
  content: 'CLOSED';
  margin-left: auto; margin-right: 12px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 2px;
}
/* Same lock applied to the condensed (secondary) market boxes — Betfair suspends every
   market on an event together, so these grey out and become unclickable in lock-step. */
.market-condensed.mkt-suspended .cm-price-cell,
.market-condensed.mkt-closed   .cm-price-cell { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.market-condensed.mkt-suspended .market-condensed-hd::after,
.market-condensed.mkt-closed   .market-condensed-hd::after {
  margin-left: auto;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 2px;
}
.market-condensed.mkt-suspended .market-condensed-hd .mc-stat,
.market-condensed.mkt-closed   .market-condensed-hd .mc-stat { display: none; }
.market-condensed.mkt-suspended .market-condensed-hd::after { content: 'SUSPENDED'; }
.market-condensed.mkt-closed   .market-condensed-hd::after { content: 'CLOSED'; }

/* ── MARKET LOCK BANNER — event-list view (Betfair "Closed") ─────────────
   Absolutely-positioned grid item: grid-column uses NEGATIVE line numbers so it
   always covers the 3 price columns immediately before the "›" column, on every
   breakpoint (where the matched column is hidden and line numbers shift). */
/* Transparent overlay: the label reads clearly but the odds/sizes underneath stay visible
   (dimmed, not hidden) — the player can still see the last price while betting is locked. */
.row-lock {
  display: none;
  position: absolute;
  grid-column: -5 / -2;          /* the 3 price cells, never the trailing › cell */
  grid-row: 1;
  top: 4px; bottom: 4px; left: 0; right: 0;
  align-items: center; justify-content: center;
  z-index: 4;
  background: rgba(208,2,27,.32);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(208,2,27,.55);
  border-radius: 2px;
  cursor: not-allowed;
}
.row-lock.show { display: flex; }
.row-lock span {
  color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.4);
  background: rgba(208,2,27,.75);
  padding: 2px 8px;
  border-radius: 2px;
}
/* SUSPENDED in the list/home — same transparent treatment (CLOSED and SUSPENDED both use the
   red overlay now; only the label text differs). */
.row-lock.is-suspended { background: rgba(208,2,27,.32); border-color: rgba(208,2,27,.55); }
/* ENDED — the match is over: neutral grey, not an alarming red (nothing is "wrong",
   the market is simply finished). */
.row-lock.is-ended { background: rgba(90,96,110,.32); border-color: rgba(90,96,110,.6); }
.row-lock.is-ended span { background: rgba(70,76,90,.85); }
/* belt-and-suspenders: cells under the banner are not interactive */
.event-row.row-locked .price-cell:not(.more) { pointer-events: none; }

/* ── LADDER BUTTON + MODAL ───────────────────────────────── */
.ladder-btn {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--bg-light2); border: 1px solid var(--border);
  border-radius: 2px; color: var(--text-2); cursor: pointer; font-size: 10px;
}
.ladder-btn:hover { background: #d8d8d8; color: var(--link); }

.ladder-modal {
  position: fixed; inset: 0; z-index: var(--z-ladder);
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ladder-box {
  background: var(--white); width: 320px; max-height: 80vh;
  border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.ladder-hd {
  background: #1a1a1a; color: #fff;
  padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
}
.ladder-runner { font-size: 14px; font-weight: 700; }
.ladder-sub { font-size: 10px; color: #aaa; margin-top: 2px; }
.ladder-close {
  background: transparent; border: 1px solid #555; color: #aaa;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px;
}
.ladder-close:hover { color: #fff; }
.ladder-cols {
  display: grid; grid-template-columns: 1fr 70px 1fr;
  background: var(--bg-light2); padding: 4px 0;
  font-size: 10px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; text-align: center;
}
.ladder-body { overflow-y: auto; }
.ladder-row {
  display: grid; grid-template-columns: 1fr 70px 1fr;
  border-bottom: 1px solid var(--border-light); min-height: 30px;
}
.ladder-back, .ladder-lay {
  display: flex; align-items: center; justify-content: center;
  font: 700 12px monospace; color: var(--text-1);
}
.ladder-back.has { background: var(--back-3); cursor: pointer; }
.ladder-back.has.best { background: var(--back-1); }
.ladder-lay.has  { background: var(--lay-3); cursor: pointer; }
.ladder-lay.has.best { background: var(--lay-1); }
.ladder-back.has:hover { background: var(--back-hover); }
.ladder-lay.has:hover { background: var(--lay-hover); }
.ladder-price {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light); font: 700 12px monospace; color: var(--text-0);
  border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
}
.ladder-price.pb { box-shadow: inset 3px 0 0 var(--back-1); }
.ladder-price.pl { box-shadow: inset -3px 0 0 var(--lay-1); }
.ladder-empty { padding: 30px; text-align: center; color: var(--text-3); font-size: 12px; }

/* ── THEME TOGGLE + CONN BADGE ───────────────────────────── */
.theme-toggle {
  width: 32px; height: 30px;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.25); border-radius: 3px;
  color: #303030; cursor: pointer; font-size: 13px;
}
.theme-toggle:hover { background: rgba(0,0,0,.12); color: #000; }

.conn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; font-size: 11px; font-weight: 600;
  color: var(--nav-text);
}
.conn-badge .conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 5px currentColor;
}
.conn-badge.connecting  .conn-dot { background: var(--orange); animation: pulse 1.5s infinite; }
.conn-badge.connected   .conn-dot { background: #38d96a; color: #38d96a; }
.conn-badge.connected   .conn-label { color: #8ee7a6; }
.conn-badge.disconnected .conn-dot { background: var(--red); color: var(--red); animation: pulse 1s infinite; }
.conn-badge.disconnected .conn-label { color: #ff8a8a; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.oc-warn { color: var(--orange); font-weight: 800; font-size: 10px; margin-left: 2px; }

/* ── AUTH UI ─────────────────────────────────────────────── */
.auth-group { display: flex; align-items: center; gap: 8px; }
.user-chip {
  display: flex; align-items: center; gap: 6px;
  color: var(--brand-dark); font-size: 12px; font-weight: 700;
}
.user-chip i { color: #303030; font-size: 16px; }
.wallet-chip {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  padding: 3px 10px; background: var(--brand-dark); border: 1px solid #000; border-radius: 3px;
}
.wallet-bal { color: #38d96a; font-weight: 800; font-size: 14px; font-family: monospace; }
.wallet-exp { color: #ff8a8a; font-size: 12px; font-weight: 700; font-family: monospace; }
/* Riga "etichetta … valore" (Main / Liability, stile Matchbook). min-width tiene la
   spaziatura anche dentro il chip, che è un flex column con align-items:flex-end. */
.wallet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 156px; }
.wallet-lbl { color: #cfd8e3; font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Account trigger (clickable chip → opens account menu) */
.account-trigger {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 3px 8px 3px 4px; border-radius: 6px;
  transition: background .12s;
}
.account-trigger:hover { background: rgba(0,0,0,.10); }
.acct-caret { color: rgba(0,0,0,.55); font-size: 10px; }

/* ── Betfair-style dropdown menus ─────────────────────────── */
.bf-dropdown {
  position: fixed; z-index: var(--z-dropdown);
  background: #fff; color: var(--text-0);
  border: 1px solid #c9c9c9; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
  min-width: 244px; overflow: hidden;
  animation: bfDrop .14s ease;
}
@keyframes bfDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobile / hidden-anchor: open the dropdown as a CENTERED modal card with a dim backdrop, instead of
   pinning it to the top edge. Fixes account/settings menus rendering at the top after login on phones
   (their topbar anchors are display:none on mobile → zero rect → old top:58px fallback). */
body.bf-modal-open::before {
  content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: var(--z-dropdown-bd);
}
.bf-dropdown.bf-dropdown-mobile {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(340px, 92vw); max-width: 92vw; max-height: 84vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: bfDropMob .16s ease;
}
@keyframes bfDropMob { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Account header */
.bf-acct-hd {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; background: var(--brand-dark); color: #fff;
}
.bf-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-green); color: #06251a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; flex-shrink: 0;
}
.bf-acct-name { font-weight: 800; font-size: 14px; }
.bf-acct-role { font-size: 11px; color: var(--brand-yellow); margin-top: 1px; }
.bf-acct-bal { padding: 10px 16px; border-bottom: 1px solid #eee; }
.bf-acct-bal > div { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 3px 0; }
.bf-acct-bal span { color: var(--text-2); }
.bf-acct-bal b { font-family: monospace; font-size: 14px; }
.bf-acct-bal b.pos { color: var(--green); }
.bf-acct-bal b.amb { color: #c98a00; }

/* Menu items */
.bf-menu { padding: 6px; }
.bf-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 6px;
  font-size: 13px; color: var(--text-0); cursor: pointer; text-decoration: none;
}
.bf-menu a i { width: 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.bf-menu a:hover { background: #f0f4f8; }
.bf-menu a.bf-danger { color: var(--red); }
.bf-menu a.bf-danger i { color: var(--red); }
.bf-menu a.bf-danger:hover { background: #fdeaea; }
.bf-sep { height: 1px; background: #eee; margin: 5px 0; }

/* Settings dropdown */
.bf-set-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-weight: 800; font-size: 13px;
  background: var(--bg-light); border-bottom: 1px solid #eee;
}
.bf-set-hd i { color: var(--brand-green); }
.bf-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f2f2f2;
}
.bf-toggle:hover { background: #fafcff; }
.bf-toggle input { width: 18px; height: 18px; accent-color: var(--brand-green); cursor: pointer; }
.bf-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; font-size: 13px; border-bottom: 1px solid #f2f2f2;
}
.bf-stake {
  width: 80px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 5px;
  font: 700 13px monospace; text-align: right; color: var(--text-0); outline: none;
}
.bf-stake:focus { border-color: var(--brand-green); }
/* Quick-stake presets: 4 small € inputs (professional), right-aligned on one row */
.bf-qs-grid { display: flex; gap: 5px; flex: 0 0 auto; }
.bf-qs-cell { position: relative; display: flex; align-items: center; width: 50px; }
.bf-qs-cur { position: absolute; left: 6px; font-size: 10px; color: var(--text-3); pointer-events: none; }
.bf-qs-in {
  width: 100%; padding: 5px 5px 5px 14px; border: 1px solid var(--border); border-radius: 5px;
  font: 700 12px monospace; text-align: right; color: var(--text-0); background: var(--white); outline: none;
  -moz-appearance: textfield;
}
.bf-qs-in::-webkit-outer-spin-button, .bf-qs-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bf-qs-in:focus { border-color: var(--brand-green); }
body.dark .bf-qs-in { background: #11141a; border-color: #333; }
.bf-lang { display: flex; gap: 4px; }
.bf-lang button {
  width: 34px; padding: 5px 0; border: 1px solid #ccc; border-radius: 5px;
  background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text-2);
}
.bf-lang button.on { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
/* Settings polish: section captions + per-toggle descriptions */
.bf-set-sec { padding: 10px 16px 4px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.bf-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.bf-toggle small { font-size: 11px; font-weight: 400; color: var(--text-3); line-height: 1.25; }

/* ── In-app confirmation modal (professional replacement for native confirm()) ── */
.ui-confirm-ov {
  position: fixed; inset: 0; z-index: var(--z-confirm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); animation: uiFadeIn .12s ease;
}
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ui-confirm {
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--white); color: var(--text-0);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden;
  animation: uiPop .14s ease;
}
@keyframes uiPop { from { transform: translateY(8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
.ui-confirm-hd { padding: 16px 18px 4px; font-size: 16px; font-weight: 800; }
.ui-confirm-msg { padding: 2px 18px 0; font-size: 13px; color: var(--text-2); }
/* Market-rules modal body */
.ui-confirm-msg.mr-body { text-align: left; }
.ui-confirm-msg.mr-body > b { color: var(--text-0); }
.mr-list { margin: 8px 0 0 16px; padding: 0; }
.mr-list li { margin: 5px 0; line-height: 1.45; }
.ui-confirm-form { padding: 12px 18px 2px; display: flex; flex-direction: column; gap: 9px; }
.ui-field { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text-0); font-size: 14px; font-family: inherit; outline: none; }
.ui-field:focus { border-color: var(--link, #2566c4); }
.ui-confirm-err { color: var(--red); font-size: 12px; font-weight: 600; }
.ui-confirm-lines { margin: 12px 18px 2px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ui-confirm-lines .ucl { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--border-light); }
.ui-confirm-lines .ucl:last-child { border-bottom: none; }
.ui-confirm-lines .ucl span { color: var(--text-2); }
.ui-confirm-lines .ucl b { font-family: monospace; }
.ui-confirm-actions { display: flex; gap: 10px; padding: 14px 18px 16px; }
.ui-cbtn { flex: 1; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid transparent; }
.ui-cbtn.ghost { background: transparent; border-color: var(--border); color: var(--text-1); }
.ui-cbtn.ghost:hover { background: var(--bg-light); }
.ui-cbtn.primary { background: var(--brand-green, #20a052); color: #fff; }
.ui-cbtn.primary:hover { filter: brightness(1.06); }
.ui-cbtn.danger { background: var(--red); color: #fff; }

/* Statement modal body */
.stmt-box { width: 560px; max-width: 96vw; }
.stmt-body { max-height: 65vh; overflow-y: auto; padding: 0; }
.stmt-list { }
.stmt-loading { padding: 24px; text-align: center; color: var(--text-3); }
.stmt-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #f0f0f0;
}
.stmt-row:last-child { border-bottom: none; }
.stmt-row-left { flex: 1; min-width: 0; }
.stmt-row-right { text-align: right; white-space: nowrap; flex-shrink: 0; }
.stmt-type-label { font-size: 13px; font-weight: 700; color: var(--text-0); }
.stmt-ev-match { font-size: 12px; font-weight: 600; color: var(--text-0); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.stmt-ev { font-size: 11px; color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.stmt-ev b { color: var(--text-0); }
.stmt-date { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.stmt-amt { font-family: monospace; font-weight: 800; font-size: 14px; }
.stmt-amt.pos { color: var(--green); }
.stmt-amt.neg { color: var(--red); }
.stmt-after { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.stmt-side { display: inline-block; padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; vertical-align: middle; }
.stmt-side.back { background: #dbeafe; color: #1d4ed8; }
.stmt-side.lay  { background: #fce7f3; color: #be185d; }

/* Account statement (full-page table) — reuses .mb-table; these are the extra bits */
.stmt-desc { font-weight: 600; color: var(--text-0); }
.stmt-desc-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.stmt-ref { font-family: monospace; font-size: 11.5px; }
.stmt-io { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 11px; font-weight: 700; }
.stmt-io.in  { background: #d8f5e3; color: #1c7a45; }
.stmt-io.out { background: #fbe0e0; color: #b0322f; }
body.dark .stmt-io.in  { background: #16361f; color: #4ad07e; }
body.dark .stmt-io.out { background: #3a1a1a; color: #f08a8a; }
/* Make the statement rows easier to read: bigger text, more padding, zebra striping +
   clearer separators and hover (scoped so My Bets is unaffected). */
#statementView .mb-table { font-size: 13.5px; }
#statementView .mb-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
#statementView .mb-table tbody tr:nth-child(even) td { background: var(--bg-light); }
#statementView .mb-table tbody tr:hover td { background: #eaf2fb; }
#statementView .stmt-desc { font-size: 13.5px; }
#statementView .stmt-io { font-size: 12px; padding: 3px 12px; }
/* DATA + RIF more prominent (override the muted grey) */
#statementView .mb-date { color: var(--text-0); font-weight: 600; font-size: 12px; }
#statementView .stmt-ref { color: var(--text-1); font-weight: 700; }
body.dark #statementView .mb-table tbody tr:nth-child(even) td { background: #1b1e24; }
body.dark #statementView .mb-table tbody tr:hover td { background: #20242c; }

/* Dark mode for dropdowns */
body.dark .bf-dropdown { background: #1c1f26; border-color: #333; color: #e2e8f0; }
body.dark .bf-menu a { color: #e2e8f0; }
body.dark .bf-menu a:hover { background: #262a33; }
body.dark .bf-toggle, body.dark .bf-row { border-color: #2a2d34; }
body.dark .bf-toggle:hover { background: #23262d; }
body.dark .bf-set-hd { background: #16181c; border-color: #2a2d34; }
body.dark .bf-sep, body.dark .bf-acct-bal { border-color: #2a2d34; }
body.dark .bf-stake, body.dark .bf-lang button { background: #11141a; color: #e2e8f0; border-color: #333; }
body.dark .stmt-row { border-color: #23262d; }
body.dark .stmt-side.back { background: #1e3a5f; color: #93c5fd; }
body.dark .stmt-side.lay  { background: #4a1030; color: #f9a8d4; }

.auth-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s;
}
.auth-box { background: var(--white); width: 360px; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 50px rgba(0,0,0,.4); }
.auth-box-hd {
  background: #1a1a1a; color: #fff; padding: 14px 16px;
  font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between;
}
.auth-x { background: transparent; border: none; color: #aaa; cursor: pointer; font-size: 15px; }
.auth-x:hover { color: #fff; }
.auth-box-body { padding: 16px; display: flex; flex-direction: column; }
.auth-box-body label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; margin: 8px 0 3px; }
.auth-box-body input {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 3px;
  font-size: 13px; outline: none; background: var(--white); color: var(--text-0);
}
.auth-box-body .pw-inline { display: flex; width: 100%; }
.auth-box-body .pw-inline input { width: 100%; }
.ui-confirm-form .pw-inline { display: flex; width: 100%; }
.ui-confirm-form .pw-inline input { width: 100%; }
.auth-box-body input:focus { border-color: var(--brand-yellow); }
.auth-submit {
  margin-top: 14px; padding: 11px; background: var(--brand-yellow); border: none; border-radius: 3px;
  color: #000; font-size: 13px; font-weight: 700; cursor: pointer;
}
.auth-submit:hover { background: #e09018; }
.auth-switch { margin-top: 10px; font-size: 11px; color: var(--text-2); text-align: center; }
.auth-switch a { color: var(--link); cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Open bets cards ─────────────────────────────────────── */
.ob-card {
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 6px; margin: 6px 6px 2px; padding: 9px 10px;
  transition: box-shadow .12s;
}
.ob-card.ob-unmatched { border-left: 3px solid var(--orange); }
.ob-header { display: flex; align-items: flex-start; gap: 6px; }
.ob-info { flex: 1; min-width: 0; }
.ob-name { font-size: 12px; font-weight: 700; }
.ob-sub { font-size: 10px; color: var(--text-2); margin-top: 1px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-details {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px;
  font-size: 11px; color: var(--text-1);
}
.ob-liab { color: var(--red); font-weight: 700; }
.ob-profit { color: var(--green); font-weight: 700; }

/* Unmatched badge bar */
.ob-unmatched-bar {
  margin-top: 7px; padding: 5px 8px;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
  border-radius: 5px; display: flex; align-items: center;
}
.ob-badge-unmatched {
  font-size: 10px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .3px;
  animation: pulseSoon 1.4s infinite;
}

/* Edit row (quota + importo + azioni) */
.ob-edit-row {
  margin-top: 8px; display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap;
}
.ob-edit-field { display: flex; flex-direction: column; flex: 1; min-width: 80px; }
.ob-edit-field label {
  font-size: 9px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}
.ob-edit-field input {
  width: 100%; padding: 6px 7px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--white); font: 700 12px monospace; color: var(--text-0);
  outline: none;
}
.ob-edit-field input:focus { border-color: var(--orange); }

/* Stepper inline quota */
.ob-stepper { display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.ob-stepper button {
  width: 24px; border: none; background: var(--bg-light2);
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-1);
}
.ob-stepper button:hover { background: #d8d8d8; }
.ob-stepper input {
  flex: 1; min-width: 0; border: none; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); text-align: center;
  padding: 6px 3px; font: 700 12px monospace; color: var(--text-0);
  background: var(--white); outline: none;
}

/* Save / Cancel action buttons */
.ob-edit-actions { display: flex; gap: 5px; align-self: flex-end; }
.ob-btn-save {
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: var(--green); color: #fff; cursor: pointer; font-size: 13px;
}
.ob-btn-save:hover { filter: brightness(1.12); }
.ob-btn-cancel {
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: var(--red-bg); border: 1px solid var(--red); color: var(--red);
  cursor: pointer; font-size: 13px;
}
.ob-btn-cancel:hover { background: var(--red); color: #fff; }

/* Matched bar */
.ob-matched-bar {
  margin-top: 7px; display: flex; align-items: center; justify-content: space-between;
}
.ob-badge-matched {
  font-size: 10px; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: .3px;
}
.ob-btn-cancel-small {
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-2); border-radius: 4px; padding: 2px 6px;
  font-size: 10px; cursor: pointer;
}
.ob-btn-cancel-small:hover { border-color: var(--red); color: var(--red); }

/* Partial bet: two-section layout (matched ↑ / queued ↓) */
.ob-card.ob-partial { border-left: 3px solid var(--orange); }
.ob-section-matched {
  margin-top: 7px; padding: 6px 8px;
  background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.25);
  border-radius: 5px 5px 0 0;
}
.ob-section-queue {
  padding: 6px 8px;
  background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25);
  border-top: none; border-radius: 0 0 5px 5px;
}
.ob-section-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.ob-section-amt { font-size: 12px; font-weight: 700; color: var(--text-0); }
.ob-section-matched .ob-matched-bar { margin-top: 5px; }
.ob-section-queue .ob-edit-row { margin-top: 5px; }

/* Compact single-line edit row for the queued portion of partial bets */
.ob-edit-compact { flex-wrap: nowrap; gap: 5px; align-items: center; }
.ob-stepper-grow { flex: 1 1 0; min-width: 90px; }
.ob-compact-amount {
  flex: 0 0 68px; min-width: 0;
  padding: 6px 5px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--white); font: 700 12px monospace; color: var(--text-0);
  outline: none; -moz-appearance: textfield; text-align: right;
}
.ob-compact-amount::-webkit-outer-spin-button,
.ob-compact-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-compact-amount:focus { border-color: var(--orange); }

/* Cash Out button */
.ob-cashout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 5px; cursor: pointer;
  padding: 7px 12px; font: 700 12px inherit; color: #fff;
  background: var(--brand-green); transition: filter .12s, background .12s;
}
.ob-cashout-btn i { font-size: 12px; }
.ob-cashout-btn:hover:not(:disabled) { filter: brightness(1.08); }
.ob-cashout-btn.co-pos { background: var(--green); }
.ob-cashout-btn.co-neg { background: #c98a00; }     /* amber when cashing out at a loss */
/* Cash-out a due righe: valore + Profitto/Perdita (verde in utile, rosso in perdita). */
.ob-cashout-btn { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; line-height: 1.22; }
.ob-cashout-btn .co-main { display: inline-flex; align-items: center; gap: 6px; }
/* Pillola chiara cos\u00ec il verde/rosso resta leggibile su qualunque colore di bottone (anche oro) */
.co-profit {
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 8px;
  background: rgba(255,255,255,.88);
}
.co-pos .co-profit { color: #0a7d33; }   /* profitto positivo \u2192 verde */
.co-neg .co-profit { color: #c62828; }   /* perdita \u2192 rosso */
.ob-cashout-btn.co-na, .ob-cashout-btn:disabled {
  background: var(--bg-light2); color: var(--text-3); cursor: default;
}


/* ── Inline quick-bet row (appears below clicked event) ──── */
.inline-qb-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px;
  background: #e8f3fb; border-bottom: 2px solid #9ec8e8;
  font-size: 12px;
}
.inline-qb-row.lay { background: #fce8ee; border-bottom-color: #e8a0b4; }
.event-row.qb-active { background: #d5eaf8 !important; }
.iqb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.iqb-label { font-size: 10px; font-weight: 700; color: #1a5fa8; text-transform: uppercase; letter-spacing: .3px; }
.inline-qb-row.lay .iqb-label { color: #a83060; }
.iqb-name { font-size: 12px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iqb-cancel {
  padding: 6px 14px; border: 1px solid #bbb; border-radius: 3px;
  background: #d4d4d4; color: #333; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.iqb-cancel:hover { background: #c0c0c0; }
.iqb-stepper { display: flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.iqb-stepper button {
  width: 26px; border: none; background: #e0e0e0;
  cursor: pointer; font-size: 15px; font-weight: 700; color: #333; padding: 0;
}
.iqb-stepper button:hover { background: #c8c8c8; }
.iqb-stepper input {
  width: 62px; border: none;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; padding: 6px 2px; font: 700 13px monospace; color: #000;
  background: var(--back-1); outline: none; -moz-appearance: textfield;
}
.iqb-stepper input.lay-odds { background: var(--lay-1); }
.iqb-stepper input::-webkit-outer-spin-button,
.iqb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.iqb-stake {
  width: 80px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px;
  background: #fff; font: 700 13px monospace; color: #000; outline: none;
  -moz-appearance: textfield; flex-shrink: 0;
}
.iqb-stake:focus { border-color: var(--orange); }
.iqb-stake::-webkit-outer-spin-button,
.iqb-stake::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.iqb-place {
  flex-shrink: 0; padding: 6px 18px; border: none; border-radius: 3px;
  background: var(--brand-yellow); color: var(--brand-dark); font: 700 13px inherit; cursor: pointer;
}
.iqb-place:hover:not(:disabled) { filter: brightness(1.08); }
.iqb-place:disabled { opacity: .5; cursor: default; }

/* ── MY BETS view ─────────────────────────────────────────── */
#myBetsView { background: var(--white); min-height: 100%; }
.mb-loading { padding: 40px; text-align: center; color: var(--text-3); }
.view-error i { color: var(--orange); margin-right: 5px; }
.retry-btn { margin-top: 12px; padding: 7px 18px; border: 1px solid var(--border); border-radius: 5px; background: var(--white); color: var(--text-0); font-weight: 700; cursor: pointer; }
.retry-btn:hover { background: var(--bg-light); }
.mb-head {
  display: flex; align-items: center; justify-content: space-between;
  /* Intestazione SCURA, non gialla (31/07). Sul tema chiaro --hdr-bg e #ffb80c: testo bianco
     su giallo acceso e il contrasto piu basso di tutta la pagina, e infatti il titolo e il
     pulsante Torna sparivano. --brand-dark e gia in tavolozza (il quasi-nero di Betfair, che
     usa proprio quello per le sue barre) ed e definito da OGNI tema, quindi resta corretto
     anche su matchbook e sul tema scuro.
     ATTENZIONE: non si tocca --hdr-bg, che ha altri 4 usi in giro per il sito: si cambia
     SOLO questa intestazione, con una variabile propria. */
  background: var(--mb-head-bg, var(--brand-dark)); color: #fff; padding: 9px 14px;
}
/* Il pulsante Torna: su fondo scuro serve piu stacco di un velo al 12%. */
.mb-head .mb-back { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); font-weight: 600; }
.mb-head .mb-back:hover { background: rgba(255,255,255,.24); }
.mb-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mb-back {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 5px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.mb-back:hover { background: rgba(255,255,255,.22); }
.mb-summary {
  display: flex; gap: 0; background: var(--bg-light); border-bottom: 1px solid var(--border);
}
.mb-summary > div {
  flex: 1; padding: 15px 14px; border-right: 1px solid var(--border-light);
  /* Centrate nella cella (31/07): erano incollate a sinistra di riquadri larghi, e con
     cinque riquadri di larghezza uguale i numeri finivano sparsi invece che allineati
     al proprio titolo. */
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
}
.mb-summary > div:last-child { border-right: none; }
.mb-summary span { font-size: 11px; color: var(--text-1); font-weight: 700; text-transform: uppercase; letter-spacing: .55px; }
.mb-summary b { font-size: 16px; font-family: monospace; }
.mb-summary b.pos { color: var(--green); }
.mb-summary b.neg { color: var(--red); }

.mb-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--white);
}
.mb-fgroup { display: flex; gap: 2px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
.mb-pill {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--text-2);
}
.mb-pill:hover { color: var(--text-0); }
/* Pillola selezionata: testo SCURO sul giallo. Bianco su #ffb80c e il contrasto piu basso
   della barra dei filtri, e infatti Unmatched/Tutti/Sempre si leggevano peggio delle voci
   NON selezionate: esattamente il contrario di cio che deve fare un evidenziato.
   ATTENZIONE: --brand-green cambia per skin. Su default e giallo (testo scuro), su matchbook
   e blu #2d6cdf (testo bianco, altrimenti illeggibile). Sono le due skin attive su prod;
   una variabile per skin invece di un colore fisso, cosi aggiungerne una e una riga. */
:root                         { --mb-pill-on-fg: #1e1e1e; }
body[data-layout="matchbook"] { --mb-pill-on-fg: #fff; }
.mb-pill.on { background: var(--brand-green); color: var(--mb-pill-on-fg); }
/* 31/08 - Date personalizzate nel periodo di Le mie scommesse. Stessa veste dei
   campi data dell estratto conto (.stmt-date): sono lo stesso oggetto, vestito uguale.
   Vivono DENTRO .mb-fgroup accanto alle pillole; il margine li stacca dall ultima.
   NB: patch fatta in BYTE - il file contiene byte non-UTF-8 (0xab e simili), decodificarlo
   e riscriverlo li tronca: vedi memoria latin1-write-truncates-unicode. */
.mb-date {
  font-size: 12px; padding: 4px 7px; border-radius: 5px; margin-left: 4px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-0);
  font-family: inherit; cursor: pointer;
}
.mb-date-sep { color: var(--text-3); font-size: 11px; align-self: center; margin-left: 2px; }
body.dark .mb-date { background: #11141a; border-color: #2a2d34; }
/* 31/08 sera - il cambio pagina della lista (25/50/100 per pagina). I pulsanti sono
   .mb-pill, la tendina .stmt-sel: si riusa la grammatica che la pagina gia parla. */
.mb-pager { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-light); }
.mb-pager .mb-pill { border: 1px solid var(--border); background: var(--white); }
.mb-pager .mb-pill:disabled { opacity: .4; cursor: default; }
.mb-pager-info { font-size: 12px; color: var(--text-2); font-weight: 600; }
body.dark .mb-pager { background: #1a1d23; }
body.dark .mb-pager .mb-pill { background: #11141a; border-color: #2a2d34; }
/* Statement extra filters: movement-type select + date range */
.stmt-sel, .stmt-date {
  font-size: 12px; padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-0);
  font-family: inherit; cursor: pointer;
}
.stmt-daterange { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stmt-daterange label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); font-weight: 600; }
/* Cerca: la casella `date` scritta a mano non emette `change` finche' la data non e'
   completa, e senza un pulsante non c'era nulla da premere. Colore pieno perche' e'
   l'azione della barra, non un filtro fra i tanti. */
.stmt-go { background: var(--brand-green); color: #fff; padding: 6px 13px; }
.stmt-go:hover { color: #fff; filter: brightness(1.07); }
.stmt-clear { border: 1px solid var(--border); }
/* Piede della tabella: "carica altri" + il conto di quanto resta dello storico. */
.stmt-foot { padding: 12px 14px; text-align: center; border-top: 1px solid var(--border); background: var(--white); }
.stmt-more {
  border: 1px solid var(--border); background: var(--bg-light); cursor: pointer;
  padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--text-0);
  font-family: inherit;
}
.stmt-more:hover { background: #eaf2fb; }
.stmt-more .muted { font-weight: 400; font-size: 12px; }
.stmt-foot-msg { font-size: 12px; color: var(--text-3); }
.mb-search {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 160px;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px;
}
.mb-search i { color: var(--text-3); font-size: 12px; }
.mb-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--text-0); }

.mb-tablewrap { overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.mb-table th {
  text-align: left; padding: 9px 12px; background: var(--bg-light2);
  font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
}
.mb-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); white-space: nowrap; vertical-align: top; }
.mb-table td.num { text-align: right; font-family: monospace; }
/* INTESTAZIONI = DATI (31/07). Centrarle sembrava piu ordinato ed era il contrario: i valori
   non sono centrati (testi e badge a sinistra, importi a destra), quindi ogni etichetta
   galleggiava lontano dalla sua colonna. La regola che chiude il problema invece di
   spostarlo e una sola: ogni intestazione sta dove stanno i suoi dati. */
/* Riga che spiega perche in "In Diretta" ci sono eventi non ancora iniziati. Senza, il
   giocatore vede una lista di partite che non sono live sotto un titolo che dice IN-PLAY:
   piu confondente del vuoto che sostituisce. */
.inplay-empty-note {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 4px; padding: 9px 12px;
  background: var(--bg-light2); border-left: 3px solid var(--brand-green);
  border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-1);
}
.mb-table th.num { text-align: right; }
/* I tre numeri che si leggono per primi. Tassa e P&L restano normali: hanno gia il colore a
   distinguerli, e se fosse tutto in grassetto non lo sarebbe niente. */
.mb-table td.col-odds, .mb-table td.col-stake-v, .mb-table td.mb-liab { font-weight: 700; }
/* La sotto-riga abb./coda resta leggera: e una nota, non un importo da confrontare. */
.mb-table td.col-stake-v .mb-mkt { font-weight: 400; }
/* Le due colonne il cui contenuto si discosta dal centro: l etichetta segue i suoi dati.
   Descrizione e testo a sinistra, Puntata sono numeri a destra. Le altre restano centrate
   perche i valori sono brevi e l etichetta ci cade sopra comunque.
   I VALORI non si toccano: gli importi si confrontano incolonnati a destra. */
/* Open/Settled e il taglio PRIMARIO: si distingue dai sotto-filtri, altrimenti sono sette
   pillole uguali su due file e non si capisce quale comanda. Scuro come su Betfair. */
.mb-fmain { margin-right: 4px; }
.mb-fmain .mb-pill.on { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.mb-fmain .mb-pill { font-weight: 700; min-width: 74px; justify-content: center; }
/* col-desc e col-stake non servono piu: la regola generale li copre. Le classi restano nel
   markup, innocue, per non toccare app.js solo per togliere due nomi. */   /* 31/07: centrate TUTTE, numeriche comprese */   /* header allineato ai valori numerici (Quota/Puntata/Tassa/P&L) */
.mb-table tr:hover td { background: #f7fafd; }
.mb-ticket { font-family: monospace; font-weight: 800; color: var(--brand-green); font-size: 12px; letter-spacing: .2px; }
.mb-date { font-size: 11px; }
.mb-ev { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.mb-mkt { font-size: 10px; color: var(--text-3); margin-top: 1px; }
/* ── «Le mie scommesse» in stile Betfair (31/07) ────────────────────────────────
   Due accorpamenti chiesti dal titolare: data+ticket in «Piazzata», evento+selezione in
   «Descrizione». Undici colonne diventano nove — e le due che spariscono sono quelle
   strette, quindi il tavolo respira anche su telefono, dove questa lista aveva gia' dato
   problemi di larghezza (fix del 20/07). La gerarchia e' la stessa di Betfair: il dato
   forte in alto, il riferimento sotto, in piccolo e smorzato. */
.mb-placed { white-space: nowrap; line-height: 1.3; }
.mb-pl-d { font-size: 12px; font-weight: 700; color: var(--text-0); }
.mb-pl-t { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* � Il ticket era 10px verde su bianco e non si leggeva (segnalato dal titolare col
   ritaglio). Il codice serve per cercare la bolletta e leggerlo ad alta voce: deve essere il
   piu' leggibile della cella, non il piu' timido. Pillola chiara + testo scuro + spaziatura. */
.mb-tk   { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
           font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
           color: var(--text-0); background: rgba(0,0,0,.06);
           border: 1px solid rgba(0,0,0,.10); border-radius: 5px;
           padding: 1px 6px; margin-top: 3px; user-select: all; }
.mb-matched { font-size: 10px; color: var(--text-3); margin-top: 2px; white-space: nowrap;
              font-variant-numeric: tabular-nums; }
.mb-desc { max-width: 300px; line-height: 1.3; }
.mb-desc .obx-evlink, .mb-desc-ev { display: block; font-weight: 600; font-size: 12px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-desc-sel { font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-desc-sel .mb-mkt { display: inline; margin-top: 0; }
/* Sport della bolletta (18/09): prima del mercato, stessa taglia della sottoriga. L'icona
   è quella della sidebar, in currentColor, così non introduce un secondo linguaggio. */
.mb-sport { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.mb-sport .sport-ic-svg, .mb-sport i { opacity: .8; }
@media (max-width: 640px) {
  .mb-desc { max-width: 190px; }
  .mb-pl-t { font-size: 10px; }
}

.mb-side { padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 800; }
.mb-side.back { background: var(--back-1); color: #053; }
.mb-side.lay  { background: var(--lay-1); color: #503; }
.mb-status { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.mb-status.s-matched   { background: #d6ecff; color: #1a6cc4; }
.mb-status.s-unmatched { background: #fff0cc; color: #aa7700; }
.mb-status.s-won       { background: #d6f5e0; color: #1d8a44; }
.mb-status.s-lost      { background: #fde0e0; color: #c0271b; }
.mb-status.s-void, .mb-status.s-cancelled { background: #eaeaea; color: #777; }
.mb-status.s-cashed_out { background: #e6e0ff; color: #6a3fd0; }
.mb-table .pos { color: var(--green); font-weight: 700; }
.mb-table .neg { color: var(--red); font-weight: 700; }
.mb-table .muted { color: var(--text-3); }
.mb-co {
  border: none; background: var(--brand-green); color: #fff; cursor: pointer;
  border-radius: 5px; padding: 6px 10px; font-size: 11px; font-weight: 700; min-width: 92px;
}
.mb-co:hover:not(:disabled) { filter: brightness(1.08); }
.mb-co.co-neg { background: #c98a00; }
.mb-co:disabled { background: var(--bg-light2); color: var(--text-3); cursor: default; }
/* --- mb: cashout impilato (31/07) ---------------------------------------------
   Valore sopra, profitto sotto. Affiancati il pulsante diventava largo e in colonna
   Azione le righe non si allineavano piu fra loro; impilati la larghezza si stabilizza
   e il numero che conta sta in cima, dove cade l occhio. */
.mb-co {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; line-height: 1.2; min-width: 132px;
}
.mb-co .co-main { display: block; font-size: 11.5px; }
.mb-co .co-profit { display: block; }
.mb-cancel {
  border: 1px solid var(--border); background: var(--white); color: var(--text-2);
  border-radius: 5px; padding: 6px 10px; font-size: 11px; cursor: pointer;
}
.mb-cancel:hover { border-color: var(--red); color: var(--red); }
/* «Al live» nella tabella «Le mie scommesse»: due pulsanti invece dei radio — in una
   cella di tabella stretta i radio con etichetta vanno a capo e si leggono peggio. */
.mb-atip { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 9.5px; color: var(--text-3); }
.mb-atip-b {
  border: 1px solid var(--border); background: var(--white); color: var(--text-2);
  border-radius: 4px; padding: 3px 6px; font-size: 9.5px; cursor: pointer;
}
.mb-atip-b.on { background: var(--text-0, #22252b); border-color: var(--text-0, #22252b); color: #fff; font-weight: 700; }
.mb-empty { padding: 40px; text-align: center; color: var(--text-3); }

/* Dark mode */
body.dark #myBetsView { background: #15171c; }
body.dark .mb-summary, body.dark .mb-filters, body.dark .mb-table th { background: #1a1d23; }
body.dark .mb-table td { border-color: #23262d; }
body.dark .mb-table tr:hover td { background: #1e2128; }
body.dark .mb-fgroup, body.dark .mb-search { background: #11141a; border-color: #2a2d34; }
body.dark .stmt-sel, body.dark .stmt-date { background: #11141a; border-color: #2a2d34; color: var(--text-0); }
body.dark .stmt-foot { background: #1a1d23; border-color: #23262d; }
body.dark .stmt-more { background: #11141a; border-color: #2a2d34; color: var(--text-0); }
body.dark .stmt-more:hover { background: #20242c; }

/* Mobile My Bets */
@media (max-width: 860px) {
  .mb-summary > div { padding: 11px 10px; }
  .mb-summary b { font-size: 14px; }
  .mb-filters { padding: 8px 10px; gap: 8px; }
  .mb-pill { padding: 6px 10px; }
  .mb-search input { font-size: 16px; }
}

/* ── DARK MODE ───────────────────────────────────────────── */
body.dark {
  --page-bg: #14161a;
  --white: #1e2127;
  --border: #33373f;
  --border-light: #2a2d34;
  --bg-light: #23262d;
  --bg-light2: #2b2f37;
  --text-0: #e8e8ea;
  --text-1: #c2c5cc;
  --text-2: #9498a1;
  --text-3: #8b8f98;   /* was #6b6f78 — bumped for WCAG-AA: 4.6:1 on --bg-light, 5.6:1 on --page-bg (small muted text: timestamps/sublabels) */
  --link: #5aa9ee;     /* 7.2:1 on --page-bg — passes AA/AAA, unchanged */
  /* slightly muted back/lay so they're not glaring on dark */
  --back-1: #4a86c5; --back-2: #3b6a9c; --back-3: #2f5985;
  --lay-1: #c56e87; --lay-2: #9c5468; --lay-3: #854a5b;
  --back-hover: #5a96d5; --lay-hover: #d57e97;
}
body.dark { background: var(--page-bg); color: var(--text-0); color-scheme: dark; }
body.dark .price-cell .price,
body.dark .depth-cell .d-price,
body.dark .cm-price-cell .price { color: #fff; }
body.dark .price-cell .size,
body.dark .depth-cell .d-size,
body.dark .cm-price-cell .size { color: rgba(255,255,255,.7); }
body.dark .price-cell.empty .back, body.dark .price-cell.empty .lay,
body.dark .depth-cell.empty, body.dark .cm-price-cell.empty .cm-back, body.dark .cm-price-cell.empty .cm-lay { background: #2a2d34; }
body.dark .event-detail-header { background: #16181c; }
body.dark .other-markets-hd, body.dark .list-header { background: #16181c; }
body.dark .back-all-btn, body.dark .lay-all-btn { color: #fff; }
body.dark .selection { background: #23262d; }
body.dark .sel-field, body.dark .stake-input, body.dark .odds-stepper input,
body.dark .odds-stepper, body.dark .market-condensed-hd, body.dark .feature-bar { background: var(--white); }
body.dark .auth-fields input { background: #0e1013; }
body.dark .toast { background: #2b2f37; }
body.dark .quick-stakes button { background: #2b2f37; color: var(--text-1); }
body.dark .step-btn { background: #2b2f37; color: var(--text-1); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --sb-width: 210px; --bsp-width: 300px; }
}

/* Mobile-only elements hidden on desktop by default */
.mob-backdrop, .mob-bottomnav, .mob-sheet-hd, .mob-hamburger, .mob-search-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE  (≤ 860px) — phones & small tablets
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Layout → single column, room for bottom nav ── */
  .layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .main {
    max-height: none;
    padding-bottom: 64px;           /* clear the bottom nav */
  }

  /* ── Top bar ── */
  .topbar { height: 46px; padding: 0 8px; }
  .brand { padding-right: 0; }
  .brand-plate { padding: 4px 9px; border-radius: 8px; }
  .brand-logo { height: 22px; }

  /* topbar-right (login / account panel) becomes a CENTERED modal card with a dim backdrop —
     not pinned to the top-right corner (where it looked decentred and crowded the header). */
  .topbar-right {
    display: none;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    flex-direction: column; align-items: stretch; gap: 10px;
    background: var(--hdr-bg);
    border: 1px solid var(--hdr-border); border-radius: 14px;
    padding: 18px; width: min(340px, 92vw);
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    z-index: calc(var(--z-dropdown) + 1);
  }
  body.mob-account-open .topbar-right { display: flex; }
  body.mob-account-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: var(--z-dropdown); }
  /* .topbar-right is nested in .topbar (z-index:--z-topbar, a stacking context), so its own raised z-index
     can't escape it — the whole topbar would sit UNDER the z-5000 backdrop, which then covers the
     login card and swallows every tap (can't type). Lift the topbar above the backdrop while the
     panel is open so the card is on top and interactive. */
  body.mob-account-open .topbar { z-index: calc(var(--z-dropdown) + 2); }
  .topbar-right .auth-group { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .auth-fields { flex-direction: column; gap: 8px; }
  .auth-fields input { width: 100%; height: 40px; font-size: 15px; }
  .auth-fields .pw-inline { width: 100%; }
  .auth-fields .pw-inline input { width: 100%; }
  .btn-login, .btn-join { width: 100%; height: 42px; justify-content: center; font-size: 14px; }
  .user-chip, .wallet-chip { width: 100%; justify-content: center; padding: 8px; }
  .lang-switcher { justify-content: center; gap: 16px; }
  .lang-btn { font-size: 24px !important; }
  .theme-toggle { align-self: center; }

  /* ── Sport nav → horizontal scroll ── */
  .sportnav {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 40px;
    scrollbar-width: none;
  }
  .sportnav::-webkit-scrollbar { display: none; }
  .sportnav a { padding: 0 14px; font-size: 13px; flex: 0 0 auto; }
  /* Let the nav links scroll horizontally: nav-left's children become direct flex items. */
  .nav-left { display: contents; }
  .nav-spacer, .nav-settings, .conn-badge { display: none; }

  /* ── LEFT SIDEBAR → off-canvas drawer ── */
  .sidebar-left {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 84vw;
    background: var(--sb-bg);
    z-index: var(--z-mob-drawer);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    padding-top: 8px;
  }
  body.mob-menu-open .sidebar-left { transform: translateX(0); }
  .sidebar-left .sidebar-toggle { display: none; }   /* desktop collapse bar irrelevant */
  /* bigger touch targets in drawer */
  .sports-list li, .sports-list a { min-height: 42px; }

  /* ── RIGHT SIDEBAR (betslip) → bottom sheet ── */
  .sidebar-right {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 82vh;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: var(--z-mob-sheet);
    transform: translateY(105%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -8px 36px rgba(0,0,0,.32);
  }
  body.mob-betslip-open .sidebar-right { transform: translateY(0); }
  /* Hide the bottom tab bar while the betslip sheet is up so its sticky "Place bets" footer (sheet
     z-index 260) is never covered by the nav (z-index 270). The sheet has its own ×/grab to close. */
  body.mob-betslip-open .mob-bottomnav { display: none; }
  /* Sheet scrolls its body while the footer (Place bets) stays put — must live in the WHOLE mobile
     range (matches isMobile()=860), not only ≤640, otherwise on 641–860px (phablet/landscape) the
     sheet opens but its content can't scroll → unusable. min-height:0 lets the flex body shrink. */
  body.mob-scroll-lock { overflow: hidden; }
  .betslip { flex: 1; min-height: 0; overflow: hidden; }
  .betslip-body { max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .betslip-footer { position: sticky; bottom: 0; background: var(--bg-light); z-index: 2;
    padding-bottom: env(safe-area-inset-bottom, 0); }
  .mob-sheet-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; position: relative;
    border-bottom: 1px solid var(--border);
    background: var(--bg-light);
    border-radius: 16px 16px 0 0;
  }
  .mob-sheet-grab {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: #ccc;
  }
  .mob-sheet-title { font-size: 14px; font-weight: 800; color: var(--text-0); margin-top: 4px; }
  .mob-sheet-close {
    margin-left: auto; margin-top: 4px;
    width: 30px; height: 30px; border: none; background: var(--bg-light2);
    border-radius: 50%; cursor: pointer; color: var(--text-1); font-size: 14px;
  }
  /* hide live-stream + games in the sheet — declutter on mobile */
  .live-stream-box, .play-games-bar { display: none; }
  /* touch-friendly betslip controls */
  .betslip-tabs .bet-tab { padding: 12px 6px; font-size: 13px; }
  .stake-input, .odds-stepper input { height: 38px; font-size: 16px; }  /* 16px prevents iOS zoom */
  .step-btn { width: 38px; height: 38px; font-size: 18px; }
  .quick-stakes button { padding: 9px 4px; font-size: 13px; min-height: 44px; }  /* ≥44px touch target */
  .btn-place { padding: 14px; font-size: 15px; }
  .lm-arrow { width: 40px; height: 40px; }               /* line-market arrows tappable */
  .ladder-btn { min-width: 40px; min-height: 40px; }     /* ladder opener tappable */

  /* ── Event list / odds grid ─────────────────────────────────
     Mobile layout: BACK + LAY entrambi visibili, celle più larghe.
     Colonna X nascosta per mercati 2-runner (tennis, baseball…).
     Grid: event-name | cell1 | cellX | cell2 | ›
     Ogni cella 72px → back(36) + lay(36) leggibili fino a "99.9"
  ── */

  /* Header row */
  .market-table-hd {
    grid-template-columns: minmax(0,1fr) 58px 58px 58px 22px;
    padding: 5px 8px; gap: 3px;
  }
  .col-matched { display: none; }
  .col-runner  { font-size: 10px; font-weight: 800; text-align: center; }
  .sub-group-hd { grid-template-columns: minmax(0,1fr) 58px 58px 58px 22px; padding: 5px 8px; gap: 3px; }
  .sgh-matched { display: none; }
  /* mobile 5-track grid (matched hidden): name(1) 1(2) X(3) 2(4) more(5) — shift the labels left one
     column so they sit over the price cells. 2-way collapses its X column like the event-row does. */
  .sub-group-hd .sgh-1 { grid-column: 2; }
  .sub-group-hd .sgh-x { grid-column: 3; }
  .sub-group-hd .sgh-2 { grid-column: 4; }
  /* 2-way group header: same 5 tracks as everyone else — .sgh-1 sits on track 2 and .sgh-2 on
     track 4, exactly over the two price cells (see the no-runner note below). */

  /* Event row */
  .event-row {
    grid-template-columns: minmax(0,1fr) 58px 58px 58px 22px;
    padding: 7px 8px; gap: 3px; min-height: 60px; align-items: center;
  }
  .event-row .ev-matched, .event-row [id$="-matched"] { display: none; }

  /* 2-runner sports (tennis): the X cell stays in the DOM as an invisible placeholder and the row
     keeps the SAME track sizes as every other row. Collapsing the X track to 0 used to hand those
     px to the elastic name column, which slid both odds one column to the right — in a mixed list
     (calcio + tennis under one header) the first price ended up under the "X" label. Same grid for
     every row and every header = 1 and 2 always line up, whatever the sport mix. */
  .event-row .price-cell.no-runner { border: none !important; background: transparent !important; pointer-events: none; }
  /* matchbook invece COLLASSA ancora la X (griglia propria a `… 60px 0 60px …`, tutta !important):
     lì la cella deve azzerarsi davvero, altrimenti trabocca dalla traccia da 0px. */
  body[data-layout="matchbook"] .event-row .price-cell.no-runner {
    width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden;
  }

  /* Event info: allow 2-line wrap */
  /* Row: score+name fill the left (event-info-main flex:1 → left-aligned, no shrink-wrap/centering),
     the star + bet-count badge sit on the right and never push the name. (A previous column layout
     stacked the badge UNDER the name, shifting the row whenever a bet was open.) */
  .event-info { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
  .event-info-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .event-name {
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .event-meta { flex-wrap: wrap; gap: 3px; }
  .event-tag  { font-size: 10px; padding: 1px 5px; }

  /* Price cell — 44px matches the ≤640 min-height tap-target rule (a bare 40px is silently bumped
     back up to 44 there, so keep them equal to avoid a misleading value). */
  .price-cell {
    height: 44px;
    border-radius: 4px; overflow: hidden;
    border: 1px solid var(--border);
    margin: 0;                   /* no inter-cell margin on phones — every px goes to the odds */
  }
  /* Phones — coupon lists only (Home / In Diretta / sport): the two sides are STACKED, back on top
     and lay underneath, same size, both visible at once. No swipe, no hidden price: the columns are
     narrower (58px) and taller (52px = two 26px halves) and the event name gets the width back.
     Scoped to .event-row so the event detail (.cm-price-cell) is untouched, and to the non-matchbook
     skins so the BetXchange V3 layer keeps its horizontal swipe mechanic. */
  body:not([data-layout="matchbook"]) .event-row .price-cell:not(.more) {
    height: 52px;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;            /* no "swipe right for lay" glow — nothing is hidden any more */
  }
  body:not([data-layout="matchbook"]) .event-row .price-cell .back,
  body:not([data-layout="matchbook"]) .event-row .price-cell .lay {
    flex: 1 1 50%;               /* identical halves: back and lay weigh the same */
    width: 100%; min-height: 0;
    padding: 1px 2px; border-right: none;
    /* line-height stays var(--leading-tight)=1.12 (forced !important by the typography layer):
       12.5px price + 7.5px size ≈ 24px, inside the 26px half. */
  }
  body:not([data-layout="matchbook"]) .event-row .price-cell .back {
    border-bottom: 1px solid rgba(255,255,255,.85);   /* hairline split between the two sides */
  }

  /* Preferiti: la stella accanto a ogni partita è tolta su mobile (scelta dell'utente, 27/07) —
     mangiava larghezza al nome. Il badge "N scommesse" in .ev-actions resta. */
  .event-row .ev-star { display: none; }

  /* Tennis, stile Betfair: DUE blocchi verdi a sinistra del nome — set vinti e game del set in
     corso, una riga per giocatore. Il markup usa le stesse classi di prima (.sc-set/.sc-p) così le
     altre skin continuano a stilarle; qui diventano celle affiancate senza spazi, cioè due colonne
     piene. Solo tennis: `:has(.sc-set)` non matcha calcio/basket/cricket, che tengono il loro badge. */
  /* Il badge qui è solo un contenitore di layout: niente sfondo, niente cornice e soprattutto
     niente `box-shadow`/`border-radius` (li mette il layer "Green block" a fine file, e con lo
     sfondo trasparente disegnavano una scheda bianca ombreggiata attorno ai blocchi e al pallino
     del servizio). Restano due rettangoli pieni e il pallino libero sulla riga. */
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) {
    background: transparent; padding: 0; gap: 0;
    border-radius: 0; overflow: visible; box-shadow: none;
  }
  /* gap 0 fra le due righe = ogni colonna è UN blocco pieno (due parti, non quattro celle);
     l'1px resta solo fra le due colonne. .sc-rows eredita 2px 8px dal layer di spaziatura. */
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-rows { gap: 0; padding: 0; }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-r { gap: 1px; padding: 0; }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-set,
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-p {
    min-width: 17px; padding: 2px 3px;
    font-size: 11px; font-weight: 700; color: #fff; text-align: center;
  }
  /* set vinti = blocco nero, come il corpo del badge del calcio; game = blocco verde */
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-set { background: var(--brand-dark); }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-p   { background: var(--green); }
  /* Angoli tondi da 6px come il badge del calcio. Vanno sulle quattro celle d'angolo, NON sul
     badge: quello contiene anche il pallino del servizio, che verrebbe ritagliato via. */
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-r:first-child .sc-set { border-top-left-radius: 6px; }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-r:last-child  .sc-set { border-bottom-left-radius: 6px; }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-r:first-child .sc-p   { border-top-right-radius: 6px; }
  body:not([data-layout="matchbook"]) .event-row .score-badge:has(.sc-set) .sc-r:last-child  .sc-p   { border-bottom-right-radius: 6px; }

  /* skin matchbook: keeps the older back|lay scroll-snap pages (swipe right → lay); the V3 layer
     further down themes it and the app.js scroll-sync mirrors the gesture across the whole list. */
  body[data-layout="matchbook"] .price-cell:not(.more) {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body[data-layout="matchbook"] .price-cell:not(.more):not(.empty) { box-shadow: inset -8px 0 7px -5px rgba(247,168,184,.8); }
  body[data-layout="matchbook"] .price-cell:not(.more)::-webkit-scrollbar { display: none; }
  body[data-layout="matchbook"] .price-cell .back,
  body[data-layout="matchbook"] .price-cell .lay {
    flex: 0 0 100%; scroll-snap-align: start;
    padding: 3px 2px; border-right: none;
  }
  .price-cell .price {
    font-size: 12.5px; font-weight: 800;
    color: #000; white-space: nowrap;
  }
  .price-cell .size {
    font-size: 7.5px; color: rgba(0,0,0,.5); margin-top: 0;
    white-space: nowrap;
  }
  .price-cell.empty { background: #eee; }
  .price-cell.empty .back, .price-cell.empty .lay { background: #e8e8e8; }

  /* ›  more button */
  .price-cell.more { font-size: 14px; color: var(--text-2); }

  /* Group card header — cleaner */
  .group-card-hd {
    padding: 6px 8px; font-size: 11px; gap: 6px;
    border-radius: 0;
  }

  /* List header + filters */
  .list-header { flex-wrap: wrap; gap: 4px; padding: 5px 8px; }
  .list-title   { font-size: 13px; }
  .list-tabs    { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; }
  .list-tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 6px 11px; font-size: 11px; flex: 0 0 auto; border-radius: 4px; }

  /* Search bar */
  .search-bar { padding: 6px 8px; }
  .search-bar input { font-size: 16px; } /* prevent iOS zoom */

  /* ── Event DETAIL view ─────────────────────────────────────
     Show name + best BACK + best LAY (3 columns).
     Level 2-3 depths removed — clean professional view.
  ── */
  .col-header-row, .runner-row {
    grid-template-columns: minmax(0,1fr) 1fr 1fr;
    padding: 0 10px;
  }
  .depth-cell.back-3, .depth-cell.back-2, .depth-cell.lay-2, .depth-cell.lay-3 { display: none; }
  .overround-back, .overround-lay, .ladder-btn { display: none; }
  /* Keep depth-4/5 hidden on mobile regardless of has-depth class */
  .depth-cell.back-4, .depth-cell.back-5,
  .depth-cell.lay-4,  .depth-cell.lay-5,
  .depth-hd { display: none !important; }

  /* Back/Lay tiles in detail */
  .depth-cell {
    height: 52px; border-radius: 6px; margin: 2px 2px;
  }
  .depth-cell .d-price { font-size: 15px; font-weight: 800; }
  .depth-cell .d-size  { font-size: 9px; margin-top: 1px; }

  /* Runner row */
  .runner-row {
    min-height: 56px; padding: 4px 10px;
    border-bottom: 1px solid var(--border-light);
  }
  .runner-name-cell {
    font-size: 12px; font-weight: 700;
    padding-right: 8px;
  }
  .runner-name-cell .runner-label { flex: 1; white-space: normal; line-height: 1.2; }

  /* Col headers (Back/Lay) */
  .col-header-row { padding: 6px 10px; background: var(--bg-light); }
  .back-all-btn, .lay-all-btn { border-radius: 4px; font-size: 12px; padding: 5px 0; }

  /* Event detail header */
  .event-detail-header {
    padding: 10px 10px 8px;
    flex-wrap: wrap; gap: 8px;
  }
  .event-detail-header .ev-name { font-size: 15px; line-height: 1.3; }
  .event-detail-header .ev-meta { flex-wrap: wrap; gap: 5px; font-size: 11px; }
  .back-to-list { font-size: 12px; padding: 5px 10px; }
  .live-badge   { font-size: 10px; padding: 2px 7px; }

  /* Other markets — full width stacked (single column), cards keep a small side margin */
  .other-content { padding: 8px; column-count: 1; column-rule: none; }
  .other-content .market-condensed { width: 100% !important; }
  .cm-row {
    grid-template-columns: minmax(0,1fr) minmax(88px,110px);
    padding: 8px 10px; min-height: 44px; align-items: center;
  }
  /* Keep the Back/Lay column labels aligned over the 110px price cell on phones (.cm-row shrinks
     from 130→110px here; .cm-subhd must follow or the labels sit ~20px off their cells). */
  .cm-subhd { grid-template-columns: minmax(0,1fr) minmax(88px,110px); }
  .cm-name { font-size: 12px; }
  .cm-price-cell { height: 44px; border-radius: 5px; overflow: hidden; }
  .cm-price-cell .cm-back, .cm-price-cell .cm-lay { padding: 2px 4px; }

  /* Market header */
  .market-condensed-hd { padding: 8px 10px; }
  .mc-title { font-size: 12px; }
  .mc-stat  { font-size: 10px; }
  .market-card-hd { padding: 8px 10px 6px; }
  .event-detail-mkt-name { font-size: 13px; }

  /* Feature bar */
  .feature-bar { padding: 6px 10px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .feature-bar::-webkit-scrollbar { display: none; }
  .fb-item { flex: 0 0 auto; font-size: 11px; }

  /* ── Backdrop ── */
  .mob-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: var(--z-mob-backdrop);
    opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  body.mob-menu-open .mob-backdrop,
  body.mob-betslip-open .mob-backdrop { opacity: 1; pointer-events: auto; }

  /* ── Bottom navigation bar ── */
  /* Self-contained DARK tab bar — must NOT inherit the page theme: on the yellow home-landing
     --hdr-bg and --brand-green both resolve to yellow, which made the ACTIVE item (e.g. Home)
     yellow-on-yellow → invisible. A fixed dark bar with a yellow active accent is always legible. */
  .mob-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: 56px; background: #14181f;
    border-top: 1px solid rgba(255,255,255,.09);
    z-index: var(--z-mob-nav);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mob-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.62); font-size: 9.5px; font-weight: 600; position: relative;
    font-family: inherit;
  }
  .mob-nav-btn i { font-size: 18px; }
  .mob-nav-btn.active { color: var(--brand-yellow); }
  .mob-nav-btn:active { background: rgba(255,255,255,.08); }
  .mob-bet-badge {
    position: absolute; top: 4px; right: calc(50% - 22px);
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--brand-yellow); color: #1a1a1a;
    border-radius: 8px; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
}

/* Extra-small phones (≤360px) — keep the odds columns wide enough to read (the team name
   truncates anyway; in a coupon the prices matter more than the full club name). */
@media (max-width: 360px) {
  .market-table-hd, .event-row, .sub-group-hd { grid-template-columns: minmax(0,1fr) 52px 52px 52px 20px; }
  /* stacked back/lay cells (see ≤860) still fit a readable price even at 52px */
  .price-cell .price { font-size: 12px; }
  .price-cell .size  { font-size: 8px; }
  .mob-nav-btn span:not(.mob-bet-badge) { font-size: 9px; }
  .event-name { font-size: 12px; }
}

/* Dark mode: mobile price cells */
@media (max-width: 860px) {
  body.dark .event-row .price-cell .back { background: #1a3a5e; }
  body.dark .event-row .price-cell:not(.empty):hover .back { background: #1e4470; }
  body.dark .price-cell .price { color: #9ecfff; }
  body.dark .price-cell .size  { color: rgba(158,207,255,.6); }
  /* lay half (now always visible in the coupon): its own muted rose, readable text */
  body.dark .event-row .price-cell .lay { background: #4d2233; }
  body.dark .event-row .price-cell:not(.empty):hover .lay { background: #5c2a3d; }
  body.dark .event-row .price-cell .lay .price { color: #ffc2d3; }
  body.dark .event-row .price-cell .lay .size  { color: rgba(255,194,211,.6); }
  body.dark:not([data-layout="matchbook"]) .event-row .price-cell .back { border-bottom-color: rgba(255,255,255,.14); }
  body.dark .price-cell.empty  { background: #1e2128; }
  body.dark .group-card-hd     { background: #1a1d24; }
  body.dark .event-row         { background: #13151a; }
  body.dark .event-row:hover   { background: #1a1d24; }
  body.dark .runner-row        { border-color: #23262d; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TIERS (additive refinements layered on top of the
   ≤860px collapse block above — which stays the primary mobile
   layout, matching isMobile() in app.js).
     • tablet  ≤980px  — narrow the 3 columns before they collapse
     • phone   ≤640px  — topbar hamburger/search-toggle, overflow
                          backstop, sticky betslip footer, tap targets
     • small   ≤400px  — final shrink for ~360–400px devices
   DESKTOP (>980px) is untouched: every rule below is inside a query.
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET 861–980px — narrow the side columns so the main keeps room ──
   MUST be min-width:861px: the 7-track grid below has higher specificity
   (.market-card .runner-row) than the ≤860 phone collapse (.runner-row), so a
   bare max-width:980px query would win on phones too and make the depth cells
   overflow/overlap. Bounding it to ≥861px lets the phone 3-column rule apply. */
@media (min-width: 861px) and (max-width: 980px) {
  :root { --sb-width: 188px; --bsp-width: 280px; }
  /* Event-detail depth: drop the 3rd back/lay level early to avoid a cramped grid */
  .market-card .col-header-row,
  .market-card .runner-row { grid-template-columns: 1fr 56px 56px 64px 64px 56px 56px; }
}

/* ── COLLAPSED LAYOUT ≤860px — topbar hamburger + collapsible search ──
   Triggers at the same width the 3-column layout collapses (matches
   isMobile() in app.js), so the hamburger is always present whenever the
   left sidebar has become the off-canvas drawer. ── */
@media (max-width: 860px) {

  /* Horizontal-overflow backstop. Root causes are fixed elsewhere; this
     catches any stray wide child (long team names, embedded SVGs, etc.). */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, video, iframe { max-width: 100%; height: auto; }
  .layout, .main, .topbar, .sportnav { max-width: 100%; }

  /* Topbar: hamburger (opens sports drawer) + compact search toggle */
  .mob-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 2px; flex: 0 0 auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--hdr-text); font-size: 20px; border-radius: 8px;
  }
  .mob-hamburger:active { background: rgba(0,0,0,.10); }
  .mob-search-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: auto; flex: 0 0 auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--hdr-text); font-size: 17px; border-radius: 8px;
  }
  .mob-search-toggle:active { background: rgba(0,0,0,.10); }

  /* Collapse the global search to nothing until the toggle expands it; then it
     drops below the topbar full-width so it never squeezes the brand row. */
  .topbar-search {
    position: absolute; top: 46px; left: 0; right: 0;
    padding: 8px; background: var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-border);
    display: none; z-index: var(--z-flyout); box-shadow: 0 6px 16px rgba(0,0,0,.3);
  }
  body.mob-search-open .topbar-search { display: flex; }
  /* Same nesting trap as the account panel above: .topbar-search is absolutely positioned
     INSIDE .topbar (a z-index stacking context), so when it drops BELOW the bar it lands in
     the region the skin-tab / sport-nav own — and those, being later siblings at an equal-or-
     higher z-index, paint on top and swallow the field (it opens but you can't see or tap it).
     Lift the whole topbar above them while the search is open so the input is visible + typeable. */
  body.mob-search-open .topbar { z-index: calc(var(--z-dropdown) + 2); }
  .topbar-search .search-bar { width: 100%; max-width: none; }
  .topbar-search .search-bar input { font-size: 16px; }   /* no iOS zoom */

}

/* ── PHONE ≤640px — betslip bottom-sheet polish + tap targets ──
   (Sheet scroll/scroll-lock now live in the ≤860 block so they cover the whole mobile range.) */
@media (max-width: 640px) {
  .bf-footer-actions { padding: 10px; }
  .btn-place, #btnPlace { min-height: 48px; font-size: 16px; }
  .bf-cancel-all { min-height: 44px; }

  /* Tap targets ≥44px across interactive chrome */
  .tab, .bet-tab, .ot-tab, .mb-pill, .ipl-row2 .ipl-tab,
  .hl-btn, .ev-btn, .refresh-btn, .mc-icon-btn { min-height: 44px; }
  .mc-icon-btn { min-width: 32px; min-height: 32px; }   /* small icon controls */
  .price-cell, .cm-price-cell, .depth-cell { min-height: 44px; }
  .sportnav a { min-height: 40px; }

  /* All text inputs at 16px to stop iOS auto-zoom */
  input[type="text"], input[type="number"], input[type="password"],
  input[type="search"], input[type="email"], select, textarea { font-size: 16px; }

  /* Other Markets single column (mirrors the ≤860 rule; keep explicit here) */
  .other-content { column-count: 1; column-rule: none; }

  /* Modals fit the viewport: width capped, scrollable */
  .ui-confirm, .auth-box, .stmt-box, .ladder-box {
    width: auto; max-width: 92vw; max-height: 90vh; overflow-y: auto;
  }
  .ladder-box, .stmt-box { display: flex; flex-direction: column; }
  .match-notif { left: 8px; right: 8px; max-width: none; min-width: 0; }

  /* Score / timeline bars scale down so they don't force overflow */
  .scorebar { padding: 10px 12px; }
  .scorebar .sb-name { flex-basis: 110px; max-width: 110px; font-size: 14px; }
  .scorebar .sb-set { min-width: 18px; font-size: 14px; }
  .scorebar .sb-pts { min-width: 36px; font-size: 16px; }
  .scorebar .sb-cells { gap: 8px; }
  .scorebar .sb-row { gap: 10px; }
  .soccer-tl .bf-tl-team { font-size: 13px; }
  .soccer-tl .bf-tl-score { font-size: 16px; padding: 2px 8px; }

  /* Hero / landing tiles tighten up */
  .hl-hero { padding: 18px 16px; gap: 14px; }
  .hl-hero-title { font-size: 22px; }
  .hl-stats { width: 100%; }
  .hl-stat { flex: 1; min-width: 0; }
  .hl-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── SMALL ≤400px — final shrink for ~360–400px devices ── */
@media (max-width: 400px) {
  .price-cell .price, .cm-price-cell .price { font-size: 11.5px; }
  .price-cell .size,  .cm-price-cell .size  { font-size: 8px; }
  .event-name { font-size: 11.5px; }
  .list-title { font-size: 12px; }
  .tab { padding: 6px 9px; font-size: 11px; }
  .mob-nav-btn span:not(.mob-bet-badge) { font-size: 8.5px; }
  .mob-nav-btn i { font-size: 17px; }
  /* event/header grids slimmer than the ≤360 rule so 1/X/2 still fit */
  .market-table-hd, .event-row, .sub-group-hd { grid-template-columns: minmax(0,1fr) 48px 48px 48px 20px; }
  /* niente eccezione per le righe a 2 esiti: stessa griglia per tutti = 1 e 2 sempre allineati */
  .hl-hero-title { font-size: 19px; }
  .brand-logo { height: 20px; }
}

/* ── BETFAIR-STYLE UTILITY CLASSES ───────────────────────── */

/* Betfair-style live count badge in nav */
.live-count {
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 3px;
  vertical-align: middle;
}

/* Betfair betslip column header */
.betslip-col-hd {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 2px 10px 4px;
  border-bottom: 1px solid var(--border-light);
}
.betslip-col-hd span {
  font-size: 10px;
  color: var(--text-3);
  text-align: right;
  min-width: 60px;
}

/* Header Exchange tagline */
.hdr-tagline {
  font-size: 9px;
  color: #6b5410;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: -2px;
}

/* Quick-stake buttons */
.bf-quick-stakes {
  display: flex;
  gap: 4px;
  padding: 4px 10px 6px;
  flex-wrap: wrap;
  background: #fafafa;
  border-top: 1px solid var(--border-light);
}
.bfqs {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  font: 600 11px inherit;
  cursor: pointer;
  color: var(--text-1);
  transition: background .1s;
}
.bfqs:hover { background: #f0f0f0; border-color: #999; }

/* ═══════════════════════════════════════════════════════════════════
 * MATCHBOOK LAYOUT — selectable per-skin theme (skin.layout = 'matchbook')
 * Activated by <body data-layout="matchbook"> (set in applySkinBranding
 * from /api/config). Same DOM as the Betfair layout — only the palette
 * changes, so every button / menu / betslip keeps working untouched.
 * Palette: navy header #1b2330, blue accent #2d6cdf, red CTA #e2001a,
 * soft-grey page #eef1f5 (Betfair back-blue / lay-pink kept by convention).
 * ═══════════════════════════════════════════════════════════════════ */
body[data-layout="matchbook"] {
  /* Brand — accent drives active-tab underline, sidebar links, multiples btn */
  --brand-dark:   #1b2330;
  --brand-green:  #2d6cdf;
  --brand-yellow: #2d6cdf;

  /* Header — navy bar with light text (replaces the yellow Betfair bar) */
  --hdr-bg:          #1b2330;
  --hdr-border:      #2a3445;
  --hdr-text:        #c4cedd;
  --hdr-text-active: #ffffff;
  --tab-active-bg:   #2d6cdf;

  /* Sport nav — slightly lighter navy strip, light text */
  --nav-bg:     #232c3a;
  --nav-text:   #c4cedd;
  --nav-active: #ffffff;
  --nav-border: #2a3445;

  /* Page surfaces — matchbook soft grey + cooler borders */
  --page-bg:      #eef1f5;
  --bg-light:     #f5f6f8;
  --bg-light2:    #e9edf3;
  --border:       #d9dee6;
  --border-light: #e6eaf0;

  /* Links / generic accent */
  --link:   #2d6cdf;
  --accent: #2d6cdf;
}

/* Header controls: recolor the few hardcoded-dark bits so they read on navy */
body[data-layout="matchbook"] .user-chip,
body[data-layout="matchbook"] .theme-toggle,
body[data-layout="matchbook"] .acct-caret,
body[data-layout="matchbook"] .hdr-tagline { color: var(--hdr-text); }
body[data-layout="matchbook"] .user-chip i { color: #fff; }
body[data-layout="matchbook"] .theme-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Join Now → matchbook red CTA; Log In keeps the white/ghost button */
body[data-layout="matchbook"] .btn-join { background: #e2001a; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body[data-layout="matchbook"] .btn-join:hover { background: #c1001a; }

/* Active product tab → solid blue pill */
body[data-layout="matchbook"] .product-nav a.active {
  background: var(--tab-active-bg); color: #fff; border-bottom-color: #fff;
}

/* Accent fixes for the remaining hardcoded yellow (#ffb80c) touches */
body[data-layout="matchbook"] .my-star { color: var(--brand-green); }
body[data-layout="matchbook"] .btn-multiples { background: var(--brand-green); color: #fff; }
body[data-layout="matchbook"] .btn-multiples:hover { background: #245bc0; }
body[data-layout="matchbook"] .stake-input:focus,
body[data-layout="matchbook"] .odds-stepper:focus-within { border-color: var(--brand-green); }
body[data-layout="matchbook"] .mob-bet-badge { color: #fff; }

/* Exfair Pro event page: clearer exchange structure, without changing betting logic. */
body[data-layout="matchbook"] .layout {
  background: #eef1f5;
}

/* ========================================================================
   MATCHBOOK WHITE-LABEL PRODUCTION POLISH
   Isolated visual layer: betting logic, API calls and DOM actions stay shared.
   ======================================================================== */
body[data-layout="matchbook"] {
  --mb-red: #cf111f;
  --mb-red-2: #a80f1b;
  --mb-ink: #111820;
  --mb-ink-2: #1b232d;
  --mb-panel: #252d38;
  --mb-line: #3a4452;
  --mb-text: #f7fafc;
  --mb-muted: #aab5c3;
  --mb-cyan: #12b8f0;
  --mb-back: #7ec7f8;
  --mb-lay: #f4a2b7;
  --mb-page: #f0f2f5;
  --mb-card: #ffffff;
  --mb-card-border: #cdd5df;
  --brand-dark: var(--mb-ink);
  --brand-green: var(--mb-red);
  --brand-yellow: var(--mb-red);
  --hdr-bg: var(--mb-ink);
  --nav-bg: var(--mb-ink-2);
  --page-bg: var(--mb-page);
  --link: var(--mb-red);
  --accent: var(--mb-red);
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
}

body[data-layout="matchbook"] .brand-logo {
  display: none !important;
}

body[data-layout="matchbook"] .brand-plate {
  position: relative;
  filter: none !important;
  background: none;
}

body[data-layout="matchbook"] .brand-plate::before {
  content: "M";
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 6px;
  background: var(--mb-red);
  color: #fff;
  font-size: 54px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

body[data-layout="matchbook"] .wallet-chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
}

body[data-layout="matchbook"] .wallet-bal {
  color: #31d47d;
}

body[data-layout="matchbook"] .wallet-exp {
  color: #ffb1bd;
}

body[data-layout="matchbook"] .btn-login,
body[data-layout="matchbook"] .btn-join {
  letter-spacing: .02em;
}

body[data-layout="matchbook"] .btn-login {
  background: var(--mb-cyan);
  color: #fff;
}

body[data-layout="matchbook"] .btn-join {
  background: var(--mb-red);
  color: #fff;
}

body[data-layout="matchbook"] .depth-cell.back-1,
body[data-layout="matchbook"] .depth-cell.back-2,
body[data-layout="matchbook"] .depth-cell.back-3,
body[data-layout="matchbook"] .back-all-btn {
  background: var(--mb-back);
}

body[data-layout="matchbook"] .depth-cell.lay-1,
body[data-layout="matchbook"] .depth-cell.lay-2,
body[data-layout="matchbook"] .depth-cell.lay-3,
body[data-layout="matchbook"] .lay-all-btn {
  background: var(--mb-lay);
}

body[data-layout="matchbook"] .depth-cell.empty {
  background: #eef1f4;
}

body[data-layout="matchbook"] .depth-cell.empty.manual-price.back-1:hover {
  background: #d1ecff;
}

body[data-layout="matchbook"] .depth-cell.empty.manual-price.lay-1:hover {
  background: #ffd8e2;
}

body[data-layout="matchbook"] .depth-cell.my-offer {
  outline-color: var(--mb-red);
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-left: 236px;
    --mb-top: 116px;
    --mb-right-rail: 0px;
    --bsp-width: clamp(340px, 26vw, 410px);
  }

  body[data-layout="matchbook"]::after {
    display: none;
    content: none;
  }

  body[data-layout="matchbook"] .product-switcher {
    display: none;
  }

  body[data-layout="matchbook"] .topbar {
    height: 72px;
    margin-left: var(--mb-left);
    width: calc(100% - var(--mb-left));
    padding: 0 18px;
    background: linear-gradient(90deg, #121922 0%, #18212c 58%, #1f2732 100%);
    border-bottom: 1px solid #313b49;
  }

  body[data-layout="matchbook"] .brand {
    width: var(--mb-left);
    height: var(--mb-top);
    background:
      linear-gradient(145deg, rgba(207,17,31,.98) 0 38%, rgba(23,30,39,.98) 38% 100%);
    border-right: 1px solid rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(0,0,0,.35);
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK\A EXCHANGE";
    white-space: pre-line;
    bottom: 19px;
    color: #fff;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .13em;
  }

  body[data-layout="matchbook"] .brand-plate {
    width: 74px;
    height: 74px;
    transform: translateY(-9px);
  }

  body[data-layout="matchbook"] .topbar-search {
    left: 22px;
    top: 13px;
    width: min(520px, calc(100% - 520px));
    height: 46px;
  }

  body[data-layout="matchbook"] .topbar-search .search-bar {
    max-width: 520px;
    height: 46px;
    border-radius: 4px;
    background: #eef2f7;
    border: 1px solid #768393;
    color: #17202c;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }

  body[data-layout="matchbook"] .topbar-search .search-bar input {
    color: #17202c;
    font-size: 14px;
    font-weight: 800;
  }

  body[data-layout="matchbook"] .topbar-search .search-bar input::placeholder,
  body[data-layout="matchbook"] .topbar-search .search-bar i,
  body[data-layout="matchbook"] .search-clear {
    color: #566171;
  }

  body[data-layout="matchbook"] .topbar-right {
    margin-left: auto;
    gap: 10px;
  }

  body[data-layout="matchbook"] .account-trigger {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 5px;
    padding: 6px 9px;
  }

  body[data-layout="matchbook"] .btn-login,
  body[data-layout="matchbook"] .btn-join {
    height: 44px;
    padding: 0 28px;
    border-radius: 4px;
  }

  body[data-layout="matchbook"] .sportnav {
    height: 44px;
    margin-left: var(--mb-left);
    width: calc(100% - var(--mb-left));
    background: #252d38;
    border-bottom: 1px solid #151b23;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    padding-left: 0;
    overflow-x: auto;
  }

  body[data-layout="matchbook"] .sportnav a {
    min-width: auto;
    padding: 0 17px;
    border-bottom-width: 3px;
    font-size: 13px;
    color: #eff4fb;
    text-transform: none;
  }

  body[data-layout="matchbook"] .sportnav a.active {
    border-bottom-color: var(--mb-red);
    background: rgba(255,255,255,.04);
  }

  body[data-layout="matchbook"] .layout,
  body[data-layout="matchbook"] .layout.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr) var(--bsp-width);
    margin-left: var(--mb-left);
    width: calc(100% - var(--mb-left));
    min-height: calc(100vh - var(--mb-top));
    background: var(--mb-page);
  }

  body[data-layout="matchbook"] .sidebar-left {
    top: var(--mb-top);
    width: var(--mb-left);
    background: #202832;
    border-right: 1px solid #151b23;
  }

  body[data-layout="matchbook"] .my-markets,
  body[data-layout="matchbook"] .sidebar-section-label {
    padding-left: 18px;
    padding-right: 18px;
  }

  body[data-layout="matchbook"] .my-markets {
    color: #fff;
    background: #252e3a;
    min-height: 44px;
  }

  body[data-layout="matchbook"] .my-markets .my-star {
    color: var(--mb-red);
  }

  body[data-layout="matchbook"] .sidebar-section-label {
    color: #ff4050;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
  }

  body[data-layout="matchbook"] .sport-item-row {
    min-height: 42px;
    padding: 8px 14px 8px 18px;
    border-bottom-color: #303946;
    font-size: 13px;
  }

  body[data-layout="matchbook"] .sport-comp-item {
    min-height: 30px;
    color: #e7edf5;
  }

  body[data-layout="matchbook"] .main {
    background:
      linear-gradient(180deg, #e8ebef 0, #f5f6f8 170px, #f2f3f5 100%);
  }

  body[data-layout="matchbook"] .sidebar-right {
    max-height: calc(100vh - var(--mb-top));
    background: #3b3f47;
    border-left: 1px solid #2b3038;
  }

  body[data-layout="matchbook"] .betslip {
    background: #3b3f47;
  }

  body[data-layout="matchbook"] .betslip-tabs {
    height: 54px;
    background: #3b3f47;
    border-bottom: 1px solid #272c33;
  }

  body[data-layout="matchbook"] .betslip-tabs::before {
    content: "Place Bets";
    flex-basis: 110px;
    color: #d8dde5;
    font-size: 14px;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"]::before {
    content: "Exchange";
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"]::before {
    content: "My Bets";
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
    border-bottom-color: var(--mb-red);
  }

  body[data-layout="matchbook"] .betslip-market-name {
    background: #f5f6f8;
    color: #111820;
    padding: 11px 16px;
    font-weight: 950;
    border-bottom: 1px solid #d5dbe4;
  }

  body[data-layout="matchbook"] .betslip-body {
    min-height: calc(100vh - 230px);
    background: #fff;
  }

  body[data-layout="matchbook"] .betslip-footer {
    background: #f5f6f8;
    border-top: 1px solid #d5dbe4;
  }

  body[data-layout="matchbook"] .bx-bs {
    padding: 10px;
  }

  body[data-layout="matchbook"] .bx-grp {
    border: 1px solid #d7dde7;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  body[data-layout="matchbook"] .bx-hd {
    min-height: 34px;
    background: #2f3744;
    color: #fff;
    border: 0;
  }

  body[data-layout="matchbook"] .bx-hd.back {
    background: #365a74;
  }

  body[data-layout="matchbook"] .bx-hd.lay {
    background: #74414e;
  }

  /* "BACK"/"LAY" labels: the base skin sets .bx-hd-side.back/.lay to dark
     navy/maroon text for its LIGHT header backgrounds (#bcd9f5/#f3c6d2).
     Matchbook's headers above are medium-dark instead, so that dark text
     went almost invisible (dark-on-dark). Force light text here. */
  body[data-layout="matchbook"] .bx-hd-side.back,
  body[data-layout="matchbook"] .bx-hd-side.lay {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  }

  body[data-layout="matchbook"] .bx-sel {
    border-top: 1px solid #d7dde7;
  }

  body[data-layout="matchbook"] .bx-sel.back {
    background: #e6f5ff;
  }

  body[data-layout="matchbook"] .bx-sel.lay {
    background: #fff0f4;
  }

  body[data-layout="matchbook"] .btn-place {
    background: var(--mb-red);
    border-radius: 4px;
    min-height: 42px;
  }

  body[data-layout="matchbook"] .bf-cancel-all {
    border-radius: 4px;
    min-height: 42px;
  }

  body[data-layout="matchbook"] .market-card {
    margin: 12px 14px 0;
    border-radius: 5px;
    border-color: var(--mb-card-border);
    box-shadow: 0 3px 10px rgba(20,27,37,.08);
  }

  body[data-layout="matchbook"] .market-card-hd {
    min-height: 42px;
    display: flex;
    align-items: center;
    background: #fff;
    color: #111820;
    font-size: 15px;
    font-weight: 950;
  }

  body[data-layout="matchbook"] .feature-bar {
    background: #f4f6f9;
    color: #313b49;
  }

  body[data-layout="matchbook"] .col-header-row,
  body[data-layout="matchbook"] .runner-row {
    grid-template-columns: minmax(180px,1fr) 56px 56px 66px 74px 74px 66px 56px 56px;
  }

  body[data-layout="matchbook"] .col-header-row {
    padding: 5px 10px;
    background: #eef2f6;
  }

  body[data-layout="matchbook"] .runner-row {
    min-height: 46px;
    padding: 0 10px;
    background: #fff;
  }

  body[data-layout="matchbook"] .runner-name-cell {
    font-size: 13px;
    font-weight: 900;
  }

  body[data-layout="matchbook"] .depth-cell {
    height: 42px;
    border-color: #fff;
  }

  body[data-layout="matchbook"] .depth-cell .d-price {
    font-size: 14px;
    font-weight: 950;
  }

  body[data-layout="matchbook"] .depth-cell .d-size {
    font-size: 10px;
    font-weight: 700;
  }

  body[data-layout="matchbook"] .xp-hub {
    margin: 0;
    background: #111820;
  }

  body[data-layout="matchbook"] .xp-hub-head {
    padding: 18px 18px 14px;
  }

  body[data-layout="matchbook"] .xp-title {
    font-size: 32px;
    letter-spacing: -.02em;
  }

  body[data-layout="matchbook"] .xp-kicker {
    color: #ff4050;
  }

  body[data-layout="matchbook"] .xp-actions {
    gap: 7px;
  }

  body[data-layout="matchbook"] .xp-action {
    border-radius: 4px;
  }

  body[data-layout="matchbook"] .xp-pulse {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  body[data-layout="matchbook"] .xp-sports {
    padding: 8px;
    gap: 8px;
    background: #111820;
  }

  body[data-layout="matchbook"] .xp-sport {
    flex-basis: 118px;
    border-radius: 6px;
    background: #252d38;
    border: 1px solid #333e4c;
  }
}

@media (min-width: 981px) and (max-width: 1480px) {
  body[data-layout="matchbook"] {
    --mb-left: 214px;
    --bsp-width: 352px;
  }

  body[data-layout="matchbook"] .topbar-search {
    width: min(430px, calc(100% - 430px));
  }

  body[data-layout="matchbook"] .topbar-search .search-bar {
    max-width: 430px;
  }

  body[data-layout="matchbook"] .sportnav a {
    padding: 0 13px;
    font-size: 12.5px;
  }

  body[data-layout="matchbook"] .col-header-row,
  body[data-layout="matchbook"] .runner-row {
    grid-template-columns: minmax(160px,1fr) 50px 50px 60px 68px 68px 60px 50px 50px;
  }

  body[data-layout="matchbook"] .depth-cell .d-price {
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  body[data-layout="matchbook"] {
    --hdr-bg: #111820;
    --nav-bg: #252d38;
    background: var(--mb-page);
  }

  body[data-layout="matchbook"] .topbar {
    background: #111820;
    border-bottom: 1px solid #303946;
  }

  body[data-layout="matchbook"] .brand {
    gap: 8px;
  }

  body[data-layout="matchbook"] .brand-plate::before {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    font-size: 25px;
    letter-spacing: -2px;
    box-shadow: none;
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK";
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
  }

  body[data-layout="matchbook"] .product-switcher {
    display: none;
  }

  body[data-layout="matchbook"] .sportnav {
    background: #252d38;
  }

  body[data-layout="matchbook"] .sportnav a {
    color: #fff;
    border-bottom-color: transparent;
  }

  body[data-layout="matchbook"] .sportnav a.active {
    border-bottom-color: var(--mb-red);
  }

  body[data-layout="matchbook"] .sidebar-left {
    background: #202832;
    color: #fff;
  }

  body[data-layout="matchbook"] .my-markets,
  body[data-layout="matchbook"] .sidebar-section-label,
  body[data-layout="matchbook"] .sport-item-row,
  body[data-layout="matchbook"] .sport-comp-item {
    background: transparent;
    color: #fff;
    border-bottom-color: #303946;
  }

  body[data-layout="matchbook"] .sidebar-section-label,
  body[data-layout="matchbook"] .my-star {
    color: var(--mb-red);
  }

  body[data-layout="matchbook"] .market-card {
    margin: 8px 8px 0;
    border-radius: 5px;
  }

  body[data-layout="matchbook"] .market-card-hd,
  body[data-layout="matchbook"] .feature-bar {
    padding-left: 10px;
    padding-right: 10px;
  }

  body[data-layout="matchbook"] .runner-row {
    min-height: 50px;
  }

  body[data-layout="matchbook"] .depth-cell {
    min-height: 46px;
  }

  body[data-layout="matchbook"] .sidebar-right {
    background: #3b3f47;
  }

  body[data-layout="matchbook"] .betslip,
  body[data-layout="matchbook"] .betslip-tabs {
    background: #3b3f47;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
    border-bottom-color: var(--mb-red);
  }

  body[data-layout="matchbook"] .betslip-market-name,
  body[data-layout="matchbook"] .betslip-body,
  body[data-layout="matchbook"] .betslip-footer {
    background: #fff;
    color: #111820;
  }

  body[data-layout="matchbook"] .xp-hub {
    background: #111820;
  }

  body[data-layout="matchbook"] .xp-title {
    font-size: 28px;
  }

  body[data-layout="matchbook"] .xp-sports {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 8px;
    gap: 8px;
    background: #111820;
  }

  body[data-layout="matchbook"] .xp-sport {
    flex: none;
    min-height: 70px;
    border-radius: 6px;
    background: #252d38;
  }
}
body[data-layout="matchbook"] .sidebar-left,
body[data-layout="matchbook"] .betslip {
  border-color: #cfd7e3;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-layout="matchbook"] .event-detail-header {
  background: #ffffff;
  color: #1a2433;
  border: 1px solid #cfd7e3;
  border-left: 0;
  border-right: 0;
  padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}
body[data-layout="matchbook"] .event-detail-header .ev-name {
  color: #111827;
  font-size: 20px;
  letter-spacing: 0;
}
body[data-layout="matchbook"] .event-detail-header .ev-date {
  color: #5b6778;
}
body[data-layout="matchbook"] .event-detail-header .star-btn {
  color: #7b8798;
}
body[data-layout="matchbook"] .event-detail-header .star-btn.active {
  color: var(--brand-green);
}
body[data-layout="matchbook"] .back-to-list {
  color: #2d6cdf;
  border-color: #c3cde0;
  background: #f8fafc;
  border-radius: 6px;
  font-weight: 700;
}
body[data-layout="matchbook"] .back-to-list:hover {
  color: #174ea6;
  border-color: #9eb2d6;
  background: #eef5ff;
}
.ev-matched-line {
  display: none;
}
body[data-layout="matchbook"] .ev-matched-line {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}
body[data-layout="matchbook"] .ev-matched-line strong {
  color: #1a2433;
  font-weight: 800;
}
body[data-layout="matchbook"] .market-card {
  margin: 12px 12px 0;
  border: 1px solid #cfd7e3;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .07);
}
body[data-layout="matchbook"] .market-card-hd {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #d9e1ee;
  border-left: 0;
  padding: 10px 14px;
  color: #111827;
  font-size: 14px;
}
body[data-layout="matchbook"] .feature-bar {
  background: #f7f9fc;
  border-bottom: 1px solid #d9e1ee;
  padding: 8px 14px;
}
body[data-layout="matchbook"] .feature-bar .matched-info {
  color: #1a2433;
}
body[data-layout="matchbook"] .col-header-row {
  background: #f2f5f9;
  border-bottom: 1px solid #bfcadc;
  min-height: 36px;
  padding: 6px 12px;
  gap: 1px;
}
body[data-layout="matchbook"] .sel-count {
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .02em;
}
body[data-layout="matchbook"] .book-pct {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
body[data-layout="matchbook"] .back-all-btn,
body[data-layout="matchbook"] .lay-all-btn {
  color: #0f172a;
  border-radius: 0;
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
body[data-layout="matchbook"] .back-all-btn {
  background: #8fc9f7;
}
body[data-layout="matchbook"] .lay-all-btn {
  background: #f4a6b8;
}
body[data-layout="matchbook"] .runner-row {
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid #dce3ee;
  gap: 1px;
}
body[data-layout="matchbook"] .runner-row:hover {
  background: #f8fbff;
}
body[data-layout="matchbook"] .runner-name-cell {
  font-size: 13px;
  color: #111827;
}
body[data-layout="matchbook"] .runner-name-cell .runner-icon {
  background: #edf2f7;
  border: 1px solid #d6dfec;
  color: #607087;
  border-radius: 4px;
}
body[data-layout="matchbook"] .depth-cell {
  height: 44px;
  border: 1px solid rgba(255,255,255,.75);
  transition: background .12s, box-shadow .12s, transform .05s;
}
body[data-layout="matchbook"] .depth-cell .d-price {
  font-size: 14px;
  font-weight: 800;
  color: #06101f;
}
body[data-layout="matchbook"] .depth-cell .d-size {
  font-size: 10px;
  color: rgba(6, 16, 31, .62);
}
body[data-layout="matchbook"] .depth-cell:not(.empty):hover {
  filter: none;
  box-shadow: inset 0 0 0 2px rgba(17, 24, 39, .18);
}
body[data-layout="matchbook"] .depth-cell:not(.empty):active {
  transform: translateY(1px);
}
body[data-layout="matchbook"] .depth-cell.empty {
  background: #f1f3f6;
  border-color: #ffffff;
}
body[data-layout="matchbook"] .depth-cell.empty:not(.manual-price):hover {
  background: #e1e6ee;
}
body[data-layout="matchbook"] .depth-cell.empty.manual-price:hover {
  box-shadow: inset 0 0 0 2px rgba(45, 108, 223, .25);
}
body[data-layout="matchbook"] .other-markets-hd {
  margin: 12px 12px 0;
  background: #182231;
  border-radius: 4px 4px 0 0;
}
body[data-layout="matchbook"] .other-tabs {
  margin: 0 12px;
  border-left: 1px solid #cfd7e3;
  border-right: 1px solid #cfd7e3;
}
body[data-layout="matchbook"] .other-content {
  margin: 0 12px 12px;
  border: 1px solid #cfd7e3;
  border-top: 0;
  background: #eef1f5;
}
body[data-layout="matchbook"] .market-condensed {
  box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
}
body[data-layout="matchbook"] .market-condensed-hd {
  border-left: 0;
  background: #ffffff;
}

/* Exfair Pro shell on desktop: left brand rail, dark top navigation, wide bet panel. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-red: #e31e24;
    --mb-red-dark: #151b24;
    --mb-ink: #161d27;
    --mb-ink-2: #242b36;
    --mb-rail: #1f2630;
    --mb-border: #4a4d53;
    --mb-blue: #13aeea;
    --mb-right-rail: 68px;
    --bsp-width: 384px;
    overflow-x: hidden;
  }

  body[data-layout="matchbook"]::after {
    content: "Ticket\A\A Multipla\A\A Preferiti\A\A Settings\A\A Guida\A\A Chat";
    white-space: pre-line;
    position: fixed;
    top: 98px;
    right: 0;
    bottom: 0;
    z-index: 510;
    width: var(--mb-right-rail);
    background: #252a31;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    padding-top: 18px;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.06);
    pointer-events: none;
  }

  body[data-layout="matchbook"] .topbar {
    height: 98px;
    margin-left: 213px;
    width: calc(100% - 213px - var(--mb-right-rail));
    padding: 0 44px 0 14px;
    background: var(--mb-ink);
    border-bottom: 1px solid #1d2026;
    box-shadow: none;
  }

  body[data-layout="matchbook"] .topbar::before {
    content: none;
    display: none;
  }

  body[data-layout="matchbook"] .topbar-left {
    flex: 0 0 0;
    width: 0;
  }

  body[data-layout="matchbook"] .brand {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 520;
    width: 164px;
    height: 162px;
    padding: 0;
    background: linear-gradient(135deg, #111923 0 58%, var(--mb-red) 58% 100%);
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  body[data-layout="matchbook"] .brand-plate {
    width: 84px;
    height: 84px;
    padding: 0;
    border-radius: 0;
    filter: brightness(0) invert(1);
  }

  body[data-layout="matchbook"] .brand-logo {
    width: 84px;
    height: auto;
    max-height: 84px;
    object-fit: contain;
  }

  body[data-layout="matchbook"] .product-switcher {
    position: fixed;
    top: 0;
    left: 164px;
    z-index: 520;
    width: 49px;
    height: 162px;
    padding: 0;
    gap: 0;
    background: #0f141c;
    align-items: stretch;
    justify-content: stretch;
    border-right: 1px solid rgba(0,0,0,.26);
  }

  body[data-layout="matchbook"] .product-switcher .ps-tab {
    display: none;
  }

  body[data-layout="matchbook"] .product-switcher .ps-tab.active {
    display: flex;
    width: 49px;
    height: 162px;
    padding: 0;
    border-radius: 0;
    background: #0f141c;
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-content: center;
    align-items: center;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body[data-layout="matchbook"] .topbar-search {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 2;
    justify-content: flex-start;
    padding: 0;
    width: min(460px, calc(100% - 430px));
    height: 46px;
    flex: none;
  }

  body[data-layout="matchbook"] .topbar-search .search-bar {
    max-width: 460px;
    height: 46px;
    border-radius: 2px;
    border: 1px solid #59606b;
    background: #3f444d;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.24);
  }

  body[data-layout="matchbook"] .topbar-search .search-bar input {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }

  body[data-layout="matchbook"] .topbar-search .search-bar input::placeholder {
    color: #c6cbd3;
  }

  body[data-layout="matchbook"] .topbar-search .search-bar > i {
    color: #fff;
  }

  /* Clear-search chip: dark glyph on a light circle — white-on-grey was unreadable
     over the dark matchbook search bar. The glyph needs its own rule because the
     generic ".search-bar i" colour above would otherwise paint it white-on-white.
     Hover keeps the base red/white treatment. */
  body[data-layout="matchbook"] .search-clear {
    background: rgba(255, 255, 255, .92);
    color: #1c242e;
  }
  body[data-layout="matchbook"] .search-clear i {
    color: inherit;
  }

  body[data-layout="matchbook"] .auth-group {
    gap: 10px;
  }

  body[data-layout="matchbook"] .topbar-right {
    position: relative;
    z-index: 3;
  }

  body[data-layout="matchbook"] .auth-fields {
    display: none;
  }

  body[data-layout="matchbook"] .btn-login,
  body[data-layout="matchbook"] .btn-join {
    height: 46px;
    border-radius: 0;
    border: 0;
    padding: 0 38px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: none;
  }

  body[data-layout="matchbook"] .btn-login {
    background: var(--mb-blue);
  }

  body[data-layout="matchbook"] .btn-join {
    background: var(--mb-red);
  }

  body[data-layout="matchbook"] .lang-switcher,
  body[data-layout="matchbook"] .theme-toggle {
    display: none;
  }

  body[data-layout="matchbook"] .sportnav {
    height: 49px;
    margin-left: 213px;
    width: calc(100% - 213px - var(--mb-right-rail));
    background: var(--mb-ink-2);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
    padding-left: 0;
  }

  body[data-layout="matchbook"] .sportnav a {
    padding: 0 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    border-bottom: 4px solid transparent;
  }

  body[data-layout="matchbook"] .sportnav a:hover {
    background: #32363d;
  }

  body[data-layout="matchbook"] .sportnav a.active {
    color: #fff;
    border-bottom-color: var(--mb-red);
    background: transparent;
  }

  body[data-layout="matchbook"] .conn-badge,
  body[data-layout="matchbook"] .nav-settings {
    display: none;
  }

  body[data-layout="matchbook"] .layout,
  body[data-layout="matchbook"] .layout.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr) var(--bsp-width);
    margin-left: 213px;
    width: calc(100% - 213px - var(--mb-right-rail));
    min-height: calc(100vh - 147px);
    background: #f2f2f2;
  }

  body[data-layout="matchbook"] .sidebar-left {
    position: fixed;
    z-index: 500;
    top: 162px;
    left: 0;
    bottom: 0;
    width: 213px;
    max-height: none;
    background: var(--mb-rail);
    border-right: 1px solid #1b1f25;
    color: #fff;
  }

  body[data-layout="matchbook"] .sidebar-toggle,
  body[data-layout="matchbook"] .my-markets,
  body[data-layout="matchbook"] .sidebar-section-label,
  body[data-layout="matchbook"] .sports-list > li,
  body[data-layout="matchbook"] .sport-item-row,
  body[data-layout="matchbook"] .sport-submenu,
  body[data-layout="matchbook"] .sport-comp-item {
    background: transparent;
    border-bottom: 1px solid #3a3f47;
    color: #fff;
  }

  body[data-layout="matchbook"] .sidebar-toggle {
    display: none;
  }

  body[data-layout="matchbook"] .my-markets {
    padding: 20px 22px 14px;
    color: var(--mb-red);
    font-size: 13px;
    text-transform: none;
  }

  body[data-layout="matchbook"] .sidebar-section-label {
    padding: 14px 22px 8px;
    color: var(--mb-red);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
  }

  body[data-layout="matchbook"] .sports-list > li,
  body[data-layout="matchbook"] .sport-item-row {
    padding: 11px 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
  }

  body[data-layout="matchbook"] .sports-list > li:hover,
  body[data-layout="matchbook"] .sport-item-row:hover,
  body[data-layout="matchbook"] .sport-item-row.open {
    background: #20252c;
  }

  body[data-layout="matchbook"] .sports-list li i,
  body[data-layout="matchbook"] .sport-item-row > i,
  body[data-layout="matchbook"] .sports-list .sport-ic-svg,
  body[data-layout="matchbook"] .sport-item-row .sport-ic-svg {
    color: #fff;
    width: 20px;
    font-size: 15px;
  }

  body[data-layout="matchbook"] .sport-submenu {
    background: #20252c;
  }

  body[data-layout="matchbook"] .sport-comp-item {
    padding: 9px 22px 9px 46px;
    color: #d9dde4;
  }

  body[data-layout="matchbook"] .sport-item-row {
    min-height: 46px;
    padding: 9px 14px 9px 18px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 14px;
    gap: 8px;
    align-items: center;
  }

  body[data-layout="matchbook"] .sport-item-row > i,
  body[data-layout="matchbook"] .sport-item-row .sport-ic-svg {
    grid-column: 1;
    width: 22px;
    justify-self: center;
  }

  body[data-layout="matchbook"] .sport-item-row > span:not(.badge-live):not(.sport-caret) {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  body[data-layout="matchbook"] .sport-item-row .badge-live {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 9px;
  }

  body[data-layout="matchbook"] .sport-item-row .sport-caret {
    grid-column: 4;
    justify-self: end;
    color: #fff;
    font-size: 12px;
  }

  body[data-layout="matchbook"] .sport-submenu {
    padding: 2px 10px 8px 26px;
    background: #1f2630;
  }

  body[data-layout="matchbook"] .sport-comp-item {
    min-height: 31px;
    padding: 6px 8px 6px 14px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 26px 12px;
    gap: 6px;
    align-items: center;
    border-bottom: 1px solid #343d4a;
    color: #dfe7f1;
    font-size: 11px;
    font-weight: 750;
  }

  body[data-layout="matchbook"] .sport-comp-item::before {
    content: "\f091";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    grid-column: 1;
    color: #9aa7b8;
    font-size: 9px;
    text-align: center;
  }

  body[data-layout="matchbook"] .sport-comp-item .comp-name {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  body[data-layout="matchbook"] .sport-comp-item .comp-count {
    grid-column: 3;
    justify-self: end;
    color: #aeb8c7;
    font-size: 10px;
    min-width: 18px;
    text-align: right;
  }

  body[data-layout="matchbook"] .sport-comp-item .comp-caret {
    grid-column: 4;
    justify-self: end;
    color: #fff;
    font-size: 11px;
  }

  body[data-layout="matchbook"] .comp-submenu {
    padding: 2px 0 4px 14px;
    background: #1a2029;
  }

  body[data-layout="matchbook"] .event-sub-item {
    min-height: 30px;
    padding: 6px 8px 6px 10px;
    color: #f3f6fa;
    border-bottom: 1px solid #303946;
    font-size: 11px;
    line-height: 1.22;
  }

  body[data-layout="matchbook"] .event-sub-item:hover {
    background: #26303d;
  }

  body[data-layout="matchbook"] .event-sub-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-layout="matchbook"] #eventSidebar {
    background: #1f2630;
  }

  body[data-layout="matchbook"] .breadcrumb-tree,
  body[data-layout="matchbook"] .market-check-list {
    border-color: #3d4654;
  }

  body[data-layout="matchbook"] .breadcrumb-tree li {
    min-height: 28px;
    padding: 7px 12px;
    background: #202936;
    border-bottom: 1px solid #3d4654;
    color: #dbe4f0;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-layout="matchbook"] .breadcrumb-tree li:hover {
    background: #2b3543;
    color: #fff;
  }

  body[data-layout="matchbook"] .breadcrumb-tree li.current {
    background: #f4f7fb;
    color: #111827;
    border-bottom-color: #cfd7e3;
  }

  body[data-layout="matchbook"] .breadcrumb-tree li.indent-1 { padding-left: 24px; }
  body[data-layout="matchbook"] .breadcrumb-tree li.indent-2 { padding-left: 34px; }
  body[data-layout="matchbook"] .breadcrumb-tree li.indent-3 { padding-left: 44px; }
  body[data-layout="matchbook"] .breadcrumb-tree li.indent-4 { padding-left: 54px; }

  body[data-layout="matchbook"] .market-check-list li {
    min-height: 28px;
    padding: 6px 10px;
    background: #202936;
    border-bottom: 1px solid #3d4654;
    color: #dbe4f0;
    font-size: 12px;
    font-weight: 750;
  }

  body[data-layout="matchbook"] .market-check-list li:hover {
    background: #2b3543;
    color: #fff;
  }

  body[data-layout="matchbook"] .market-check-list li.active {
    background: #eef3fa;
    color: #111827;
  }

  body[data-layout="matchbook"] .market-check-list .mkt-label {
    color: inherit;
  }

  body[data-layout="matchbook"] .market-check-list input[type=checkbox] {
    accent-color: var(--mb-red);
    width: 14px;
    height: 14px;
  }

  body[data-layout="matchbook"] .main {
    grid-column: 2;
    border-left: 0;
    min-width: 0;
    background: #f2f2f2;
  }

  body[data-layout="matchbook"] .sidebar-right {
    grid-column: 3;
    background: var(--mb-ink-2);
    border-left: 0;
    max-height: calc(100vh - 147px);
    color: #fff;
  }

  body[data-layout="matchbook"] .betslip {
    background: var(--mb-ink-2);
    color: #fff;
    border: 0;
    box-shadow: none;
  }

  body[data-layout="matchbook"] .betslip-tabs {
    height: 60px;
    background: var(--mb-ink-2);
    border-bottom: 0;
    padding: 0;
    gap: 0;
  }

  body[data-layout="matchbook"] .betslip-tabs::before {
    content: "Bet Desk";
    flex: 0 0 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5c8cf;
    font-size: 15px;
    font-weight: 900;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab {
    color: #fff;
    background: transparent;
    border-bottom: 4px solid transparent;
    font-size: 15px;
    font-weight: 900;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"],
  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"] {
    font-size: 0;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"]::before {
    content: "Exchange";
    font-size: 15px;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"]::before {
    content: "Builder";
    font-size: 15px;
  }

  body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
    color: #fff;
    border-bottom-color: var(--mb-red);
  }

  body[data-layout="matchbook"] .betslip-market-name {
    background: #fff;
    color: #111827;
    border: 0;
    padding: 14px 20px;
    font-size: 13px;
  }

  body[data-layout="matchbook"] .betslip-body {
    background: #fff;
    color: #111827;
    min-height: 520px;
  }

  body[data-layout="matchbook"] .betslip-empty {
    min-height: 180px;
    color: #111827;
  }

  body[data-layout="matchbook"] .live-stream-box,
  body[data-layout="matchbook"] .play-games-bar {
    display: none;
  }

  body[data-layout="matchbook"] .list-header {
    background: #fff;
    border-bottom: 1px solid #d7d7d7;
  }

  body[data-layout="matchbook"] .hl-hero {
    display: none;
  }

  body[data-layout="matchbook"] .hl-ticker,
  body[data-layout="matchbook"] .hl-section-title,
  body[data-layout="matchbook"] .sport-tiles {
    margin-left: 0;
    margin-right: 0;
  }

  body[data-layout="matchbook"] #eventListView.home-landing > .list-header {
    display: none;
  }

  body[data-layout="matchbook"] #eventListView.home-landing > .market-table-hd {
    display: none;
  }

  body[data-layout="matchbook"] .xp-hub {
    background: #151d28;
    border-bottom: 1px solid #343b46;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
  }

  body[data-layout="matchbook"] .xp-hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #2b3340;
  }

  body[data-layout="matchbook"] .xp-kicker {
    color: #8d98aa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body[data-layout="matchbook"] .xp-title {
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
    margin-top: 4px;
  }

  body[data-layout="matchbook"] .xp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  body[data-layout="matchbook"] .xp-action {
    height: 30px;
    padding: 0 13px;
    border: 1px solid #3a4453;
    background: #242c38;
    color: #fff;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
  }

  body[data-layout="matchbook"] .xp-action.live {
    background: var(--mb-red);
    border-color: var(--mb-red);
  }

  body[data-layout="matchbook"] .xp-pulse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    padding: 1px;
    background: #303946;
  }

  body[data-layout="matchbook"] .xp-pulse-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 0;
    background: #f6f7f9;
    color: #17202c;
    text-align: left;
    cursor: pointer;
    padding: 7px 11px;
    font-family: inherit;
  }

  body[data-layout="matchbook"] .xp-pulse-item:hover {
    background: #ffffff;
  }

  body[data-layout="matchbook"] .xp-pulse-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 2px;
    background: #e9edf3;
    color: #1f2937;
    font-size: 11px;
    font-weight: 950;
    font-family: monospace;
  }

  body[data-layout="matchbook"] .xp-pulse-state.live {
    background: #08a85a;
    color: #fff;
  }

  body[data-layout="matchbook"] .xp-pulse-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 850;
  }

  body[data-layout="matchbook"] .xp-empty {
    padding: 14px 16px;
    color: #c5ccd7;
    font-size: 12px;
  }

  body[data-layout="matchbook"] .xp-sports {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    padding: 1px;
    background: #303946;
    scrollbar-width: thin;
  }

  body[data-layout="matchbook"] .xp-sport {
    position: relative;
    flex: 0 0 104px;
    min-height: 72px;
    border: 0;
    background: #222a35;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  body[data-layout="matchbook"] .xp-sport:hover {
    background: #2c3542;
  }

  body[data-layout="matchbook"] .xp-sport-ic {
    font-size: 19px;
    line-height: 1;
    color: #fff;
  }

  body[data-layout="matchbook"] .xp-sport-name {
    font-size: 11.5px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
  }

  body[data-layout="matchbook"] .xp-sport-live {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 19px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: #08a85a;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    line-height: 17px;
  }
}

/* MATCHBOOK FINAL OVERRIDE
   Keeps the skin visually independent while reusing the exchange engine. */
body[data-layout="matchbook"] {
  --mb-red: #cf111f;
  --mb-red-dark: #99101a;
  --mb-ink: #121922;
  --mb-ink-2: #202833;
  --mb-line: #394453;
  --mb-page: #f0f2f5;
  --mb-card: #ffffff;
  --mb-back: #8bd0fb;
  --mb-lay: #f5a7ba;
  --mb-green: #00a86b;
  background: var(--mb-page);
  color: #111820;
}

body[data-layout="matchbook"] .brand-logo,
body[data-layout="matchbook"] .product-switcher,
body[data-layout="matchbook"]::after {
  display: none !important;
}

body[data-layout="matchbook"] .brand-plate {
  filter: none !important;
}

body[data-layout="matchbook"] .brand-plate::before {
  content: "M";
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  background: #d11420;
  color: #fff;
  font-size: 44px;
  font-weight: 950;
  line-height: 1;
  border-radius: 0;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18);
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-left: 226px;
    --bsp-width: clamp(340px, 25vw, 408px);
  }

  body[data-layout="matchbook"] .topbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 505;
    height: 78px;
    margin-left: var(--mb-left) !important;
    width: calc(100% - var(--mb-left)) !important;
    padding: 0 24px !important;
    background: var(--mb-ink) !important;
    border-bottom: 1px solid #26313f !important;
    box-shadow: none !important;
  }

  body[data-layout="matchbook"] .topbar-left {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body[data-layout="matchbook"] .top-search-wrap,
  body[data-layout="matchbook"] .search-wrap {
    width: min(520px, 45vw) !important;
    margin: 0 !important;
  }

  body[data-layout="matchbook"] #searchInput {
    height: 42px !important;
    border-radius: 2px !important;
    background: #f4f6f9 !important;
    border: 1px solid #6b7380 !important;
    color: #17202b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body[data-layout="matchbook"] .brand {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 530 !important;
    width: var(--mb-left) !important;
    height: 122px !important;
    padding: 18px 0 0 !important;
    background: linear-gradient(135deg, #d11420 0 72%, #a60d18 72% 100%) !important;
    border: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK\A EXCHANGE" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;
    color: #fff !important;
    white-space: pre !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .09em !important;
  }

  body[data-layout="matchbook"] .sportnav {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    z-index: 504 !important;
    height: 44px !important;
    margin-left: var(--mb-left) !important;
    width: calc(100% - var(--mb-left)) !important;
    padding: 0 18px !important;
    background: #343a45 !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06) !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn {
    height: 44px !important;
    padding: 0 18px !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-weight: 950 !important;
    border-bottom: 4px solid transparent !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn.active {
    color: #fff !important;
    background: transparent !important;
    border-bottom-color: var(--mb-red) !important;
  }

  body[data-layout="matchbook"] .layout {
    margin-left: var(--mb-left) !important;
    margin-top: 122px !important;
    width: calc(100% - var(--mb-left)) !important;
    min-height: calc(100vh - 122px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--bsp-width) !important;
    gap: 0 !important;
  }

  body[data-layout="matchbook"] .sidebar-left {
    position: fixed !important;
    top: 122px !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 500 !important;
    width: var(--mb-left) !important;
    background: #252c35 !important;
    color: #fff !important;
    border-right: 1px solid #111820 !important;
    overflow-y: auto !important;
  }

  body[data-layout="matchbook"] .main {
    grid-column: 1 !important;
    min-width: 0 !important;
    background: #eceff3 !important;
    border-left: 0 !important;
  }

  body[data-layout="matchbook"] .right-sidebar {
    grid-column: 2 !important;
    position: sticky !important;
    top: 122px !important;
    align-self: start !important;
    height: calc(100vh - 122px) !important;
    width: auto !important;
    min-width: 0 !important;
    background: #3b414c !important;
    border-left: 1px solid #202833 !important;
    overflow: hidden auto !important;
  }
}

body[data-layout="matchbook"] .side-section-title {
  color: #ff3848 !important;
  background: #202833 !important;
  border-top: 1px solid #3a4452 !important;
  border-bottom: 1px solid #3a4452 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .side-link,
body[data-layout="matchbook"] .side-event,
body[data-layout="matchbook"] .side-market {
  min-height: 34px !important;
  padding: 7px 10px !important;
  color: #f7fafc !important;
  background: #252c35 !important;
  border-bottom: 1px solid #3a4452 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-layout="matchbook"] .side-link:hover,
body[data-layout="matchbook"] .side-event:hover,
body[data-layout="matchbook"] .side-market:hover,
body[data-layout="matchbook"] .side-link.active,
body[data-layout="matchbook"] .side-event.active,
body[data-layout="matchbook"] .side-market.active {
  color: #111820 !important;
  background: #fff !important;
}

body[data-layout="matchbook"] .side-count,
body[data-layout="matchbook"] .live-pill {
  background: #08a85a !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-weight: 950 !important;
}

/* MatchBook sidebar tree: left-aligned, readable and dense. */
body[data-layout="matchbook"] .sidebar-left {
  background: #202833 !important;
  color: #f8fafc !important;
}

body[data-layout="matchbook"] .sidebar-toggle {
  background: #f4f6f8 !important;
  color: #111820 !important;
  border-bottom: 1px solid #cfd7e3 !important;
  text-align: left !important;
}

body[data-layout="matchbook"] .my-markets {
  justify-content: flex-start !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  color: #ff3848 !important;
  background: #202833 !important;
  border-bottom: 1px solid #3a4452 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .my-markets-list .mm-item {
  justify-content: flex-start !important;
  padding: 8px 14px !important;
  color: #e7edf5 !important;
  background: #202833 !important;
  border-bottom: 1px solid #3a4452 !important;
}

body[data-layout="matchbook"] .my-markets-list .mm-name {
  color: #e7edf5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-layout="matchbook"] .sidebar-section-label {
  padding: 12px 14px 8px !important;
  color: #ff3848 !important;
  background: #202833 !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

body[data-layout="matchbook"] .sports-list,
body[data-layout="matchbook"] .sport-submenu,
body[data-layout="matchbook"] .comp-submenu,
body[data-layout="matchbook"] .breadcrumb-tree,
body[data-layout="matchbook"] .market-check-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #202833 !important;
}

body[data-layout="matchbook"] .sports-list > li,
body[data-layout="matchbook"] .sport-item-row,
body[data-layout="matchbook"] .sport-comp-item,
body[data-layout="matchbook"] .event-sub-item,
body[data-layout="matchbook"] .breadcrumb-tree li,
body[data-layout="matchbook"] .market-check-list li {
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  gap: 8px !important;
  color: #f8fafc !important;
  background: #202833 !important;
  border-bottom: 1px solid #3a4452 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body[data-layout="matchbook"] .sports-list li.sport-acc-li {
  padding: 0 !important;
  background: #202833 !important;
  border: 0 !important;
}

body[data-layout="matchbook"] .sports-list > li:hover,
body[data-layout="matchbook"] .sport-item-row:hover,
body[data-layout="matchbook"] .sport-comp-item:hover,
body[data-layout="matchbook"] .event-sub-item:hover,
body[data-layout="matchbook"] .breadcrumb-tree li:hover,
body[data-layout="matchbook"] .market-check-list li:hover {
  background: #2c3644 !important;
  color: #fff !important;
}

body[data-layout="matchbook"] .sport-item-row.open,
body[data-layout="matchbook"] .sport-comp-item.open,
body[data-layout="matchbook"] .breadcrumb-tree li.current,
body[data-layout="matchbook"] .market-check-list li.active {
  background: #eef3fa !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .sports-list li i,
body[data-layout="matchbook"] .sport-item-row > i,
body[data-layout="matchbook"] .sport-comp-item > i,
body[data-layout="matchbook"] .event-sub-item > i,
body[data-layout="matchbook"] .breadcrumb-tree li i,
body[data-layout="matchbook"] .sports-list .sport-ic-svg {
  width: 18px !important;
  min-width: 18px !important;
  color: currentColor !important;
  text-align: center !important;
  opacity: .95 !important;
}

body[data-layout="matchbook"] .sport-item-row > span:not(.badge-live):not(.sport-caret),
body[data-layout="matchbook"] .comp-name,
body[data-layout="matchbook"] .event-sub-name,
body[data-layout="matchbook"] .mkt-label,
body[data-layout="matchbook"] .breadcrumb-tree li {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .sport-submenu .sport-comp-item {
  padding-left: 30px !important;
}

body[data-layout="matchbook"] .comp-submenu .event-sub-item {
  padding-left: 46px !important;
  align-items: center !important;
}

body[data-layout="matchbook"] .breadcrumb-tree li.indent-1 { padding-left: 26px !important; }
body[data-layout="matchbook"] .breadcrumb-tree li.indent-2 { padding-left: 38px !important; }
body[data-layout="matchbook"] .breadcrumb-tree li.indent-3 { padding-left: 50px !important; }
body[data-layout="matchbook"] .breadcrumb-tree li.indent-4 { padding-left: 62px !important; }

body[data-layout="matchbook"] .sport-caret,
body[data-layout="matchbook"] .comp-caret,
body[data-layout="matchbook"] .my-markets .fa-chevron-down {
  margin-left: auto !important;
  color: currentColor !important;
  opacity: .95 !important;
}

body[data-layout="matchbook"] .badge-live,
body[data-layout="matchbook"] .sub-live,
body[data-layout="matchbook"] .comp-count {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  background: #08a85a !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .market-check-list input[type=checkbox] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: #cf111f !important;
  flex: 0 0 auto !important;
}

body[data-layout="matchbook"] .betslip-tabs {
  height: 58px !important;
  background: #3b414c !important;
  border-bottom: 1px solid #1c232d !important;
}

body[data-layout="matchbook"] .betslip-tabs::before {
  content: "Place Bets" !important;
  flex: 0 0 118px !important;
  display: grid !important;
  place-items: center !important;
  color: #d6dbe3 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab {
  color: #fff !important;
  background: transparent !important;
  border-bottom: 4px solid transparent !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"]::before {
  content: "Exchange";
  font-size: 14px;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"]::before {
  content: "My Bets";
  font-size: 14px;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
  border-bottom-color: var(--mb-red) !important;
}

body[data-layout="matchbook"] .betslip-body,
body[data-layout="matchbook"] .betslip-market-name {
  background: #fff !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .xp-hub {
  background: #141b24 !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 #303946 !important;
}

body[data-layout="matchbook"] .xp-hub-head {
  min-height: 86px !important;
  padding: 18px 20px !important;
  background: linear-gradient(90deg, #cf111f 0 56%, #9b101a 56% 100%) !important;
  border-bottom: 8px solid #3b414c !important;
}

body[data-layout="matchbook"] .xp-title {
  color: #fff !important;
  font-size: 38px !important;
  letter-spacing: .01em !important;
}

body[data-layout="matchbook"] .xp-kicker {
  color: #fff !important;
  opacity: .88 !important;
}

body[data-layout="matchbook"] .xp-action {
  background: #fff !important;
  color: #cf111f !important;
  border-color: #fff !important;
  border-radius: 2px !important;
}

body[data-layout="matchbook"] .xp-action.live {
  background: #111820 !important;
  color: #fff !important;
  border-color: #111820 !important;
}

body[data-layout="matchbook"] .xp-pulse {
  background: #3b414c !important;
}

body[data-layout="matchbook"] .xp-pulse-item {
  min-height: 46px !important;
  background: #fff !important;
  border-right: 1px solid #d9dee6 !important;
}

body[data-layout="matchbook"] .xp-sports {
  padding: 0 !important;
  background: #fff !important;
  border-top: 1px solid #d3dae4 !important;
  border-bottom: 1px solid #d3dae4 !important;
}

body[data-layout="matchbook"] .xp-sport {
  flex: 0 0 126px !important;
  min-height: 82px !important;
  background: #fff !important;
  color: #111820 !important;
  border-right: 1px solid #d3dae4 !important;
}

body[data-layout="matchbook"] .xp-sport:hover {
  background: #f1f4f8 !important;
}

body[data-layout="matchbook"] .xp-sport-ic,
body[data-layout="matchbook"] .xp-sport-name {
  color: #111820 !important;
}

body[data-layout="matchbook"] .market-title-bar,
body[data-layout="matchbook"] .market-title {
  background: #202833 !important;
  color: #fff !important;
  border-color: #202833 !important;
}

body[data-layout="matchbook"] .runner-row {
  background: #fff !important;
}

body[data-layout="matchbook"] .runner-name-cell {
  background: #fff !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .price-cell.back,
body[data-layout="matchbook"] .cell.back {
  background: var(--mb-back) !important;
  color: #06131f !important;
}

body[data-layout="matchbook"] .price-cell.lay,
body[data-layout="matchbook"] .cell.lay {
  background: var(--mb-lay) !important;
  color: #111820 !important;
}

@media (min-width: 981px) and (max-width: 1420px) {
  body[data-layout="matchbook"] {
    --mb-left: 206px;
    --bsp-width: 342px;
  }

  body[data-layout="matchbook"] .top-search-wrap,
  body[data-layout="matchbook"] .search-wrap {
    width: min(430px, 38vw) !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn {
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 980px) {
  body[data-layout="matchbook"] .topbar {
    background: var(--mb-ink) !important;
    border-bottom: 1px solid #303946 !important;
  }

  body[data-layout="matchbook"] .brand {
    background: #cf111f !important;
    min-width: 132px !important;
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK" !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
  }

  body[data-layout="matchbook"] .sportnav,
  body[data-layout="matchbook"] .sidebar-left {
    background: #252c35 !important;
  }

  body[data-layout="matchbook"] .xp-hub-head {
    background: linear-gradient(135deg, #cf111f, #99101a) !important;
  }

  body[data-layout="matchbook"] .xp-title {
    font-size: 28px !important;
  }

  body[data-layout="matchbook"] .xp-sports {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-layout="matchbook"] .xp-sport {
    flex-basis: auto !important;
  }
}

/* MatchBook sidebar submenu repair */
@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-left: 286px;
  }
}

@media (min-width: 981px) and (max-width: 1420px) {
  body[data-layout="matchbook"] {
    --mb-left: 264px;
  }
}

body[data-layout="matchbook"] .sport-submenu {
  padding: 0 !important;
  background: #1b222c !important;
  border-top: 1px solid #3a4452 !important;
}

body[data-layout="matchbook"] .sport-comp-item {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 10px 7px 22px !important;
  gap: 8px !important;
  background: #1b222c !important;
  color: #eaf0f7 !important;
  border-bottom: 1px solid #35404e !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-layout="matchbook"] .sport-comp-item::before {
  content: none !important;
}

body[data-layout="matchbook"] .sport-comp-item > i {
  width: 14px !important;
  min-width: 14px !important;
  color: #aeb8c7 !important;
  font-size: 10px !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-count {
  flex: 0 0 auto !important;
  min-width: 22px !important;
  height: 18px !important;
  margin-left: 4px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e8edf4 !important;
  color: #1f2937 !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-caret {
  flex: 0 0 auto !important;
  margin-left: 2px !important;
  color: #fff !important;
  font-size: 10px !important;
}

body[data-layout="matchbook"] .sport-comp-item.open {
  background: #eef3fa !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .sport-comp-item.open > i,
body[data-layout="matchbook"] .sport-comp-item.open .comp-caret {
  color: #111820 !important;
}

body[data-layout="matchbook"] .comp-submenu {
  padding: 0 !important;
  background: #202833 !important;
  border-left: 3px solid #cf111f !important;
  margin-left: 22px !important;
}

body[data-layout="matchbook"] .event-sub-item {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 6px 10px 6px 14px !important;
  gap: 7px !important;
  background: #202833 !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #35404e !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body[data-layout="matchbook"] .event-sub-item:hover {
  background: #2c3644 !important;
}

body[data-layout="matchbook"] .event-sub-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-layout="matchbook"] .event-sub-item .sub-live {
  order: 2 !important;
  margin-left: auto !important;
  height: 17px !important;
  padding: 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #08a85a !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-size: 9px !important;
  font-weight: 950 !important;
}

/* MatchBook bet desk compact fix: the cart must not crush the market. */
body[data-layout="matchbook"] {
  --mb-betdesk: 430px;
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] .layout {
    grid-template-columns: minmax(0, 1fr) var(--mb-betdesk) !important;
  }

  body[data-layout="matchbook"] .sidebar-right {
    grid-column: 2 !important;
    width: var(--mb-betdesk) !important;
    min-width: var(--mb-betdesk) !important;
    max-width: var(--mb-betdesk) !important;
    position: sticky !important;
    top: calc(var(--mb-head, 74px) + var(--mb-nav, 48px)) !important;
    height: calc(100vh - var(--mb-head, 74px) - var(--mb-nav, 48px)) !important;
    align-self: start !important;
    overflow: hidden !important;
    background: #41464f !important;
    border-left: 6px solid #2b3038 !important;
  }

  body[data-layout="matchbook"] .betslip {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

body[data-layout="matchbook"] .betslip-tabs {
  height: 50px !important;
  min-height: 50px !important;
}

body[data-layout="matchbook"] .betslip-tabs::before {
  flex: 0 0 94px !important;
  font-size: 13px !important;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab {
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: 0 !important;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"]::before,
body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"]::before {
  font-size: 13px !important;
}

body[data-layout="matchbook"] .betslip-market-name {
  min-height: 38px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  border-bottom: 1px solid #d7dde6 !important;
}

body[data-layout="matchbook"] .betslip-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fff !important;
}

body[data-layout="matchbook"] .bx-bs {
  font-size: 11px !important;
}

body[data-layout="matchbook"] .bx-hd,
body[data-layout="matchbook"] .bx-line {
  grid-template-columns: minmax(0, 1fr) 60px 76px 54px !important;
  gap: 4px !important;
  padding: 6px 8px !important;
}

body[data-layout="matchbook"] .bx-hd {
  min-height: 32px !important;
  font-size: 9.5px !important;
}

body[data-layout="matchbook"] .bx-hd-out {
  align-items: flex-end !important;
  gap: 0 !important;
}

body[data-layout="matchbook"] .bx-hd-out label {
  font-size: 9px !important;
}

body[data-layout="matchbook"] .bx-sel {
  border-bottom: 1px solid #d4dbe5 !important;
}

body[data-layout="matchbook"] .bx-c-side {
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-layout="matchbook"] .bx-x {
  flex: 0 0 12px !important;
  font-size: 12px !important;
}

body[data-layout="matchbook"] .bx-c-odds .bf-odds-inp {
  width: 42px !important;
  height: 24px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .bx-odds-steps button {
  width: 14px !important;
  height: 12px !important;
  font-size: 7px !important;
}

body[data-layout="matchbook"] .bx-c-stake .bf-sel-stake {
  height: 24px !important;
  width: 72px !important;
  max-width: 72px !important;
  font-size: 11px !important;
}

body[data-layout="matchbook"] .bx-c-out {
  min-width: 0 !important;
  font-size: 11px !important;
  padding-right: 0 !important;
}

body[data-layout="matchbook"] .bx-quick {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 0 8px 8px !important;
}

body[data-layout="matchbook"] .bx-quick button {
  height: 24px !important;
  padding: 0 !important;
  border-radius: 2px !important;
  font-size: 10px !important;
}

body[data-layout="matchbook"] .bx-liab-total {
  padding: 8px 10px !important;
  font-size: 11px !important;
  border-top: 1px solid #d7dde6 !important;
}

body[data-layout="matchbook"] .betslip-footer {
  flex: 0 0 auto !important;
  padding: 8px 10px !important;
  background: #f5f6f8 !important;
  border-top: 1px solid #d4dbe5 !important;
}

body[data-layout="matchbook"] .bf-footer-actions {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-layout="matchbook"] .bf-cancel-all,
body[data-layout="matchbook"] #btnPlace {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .betslip-options {
  margin-top: 7px !important;
  font-size: 10px !important;
}

@media (min-width: 981px) and (max-width: 1420px) {
  body[data-layout="matchbook"] {
    --mb-betdesk: 340px;
  }

  body[data-layout="matchbook"] .bx-hd,
  body[data-layout="matchbook"] .bx-line {
    grid-template-columns: minmax(0, 1fr) 56px 68px 48px !important;
  }

  body[data-layout="matchbook"] .bx-c-stake .bf-sel-stake {
    width: 64px !important;
    max-width: 64px !important;
  }
}

/* MATCHBOOK TRACKER FINAL POSITION
   This must stay at the end: the right desk should reveal the tracker immediately. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] .sidebar-right {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }

  body[data-layout="matchbook"] .betslip {
    flex: 0 0 326px !important;
    height: 326px !important;
    min-height: 326px !important;
    max-height: 326px !important;
  }

  body[data-layout="matchbook"] .betslip-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 238px !important;
  }

  body[data-layout="matchbook"] .live-stream-box {
    display: block !important;
    flex: 0 0 254px !important;
    min-height: 254px !important;
    max-height: 254px !important;
    margin-top: 0 !important;
    order: 5 !important;
  }

  body[data-layout="matchbook"] .pitch-area,
  body[data-layout="matchbook"] .pitch-area.has-tracker,
  body[data-layout="matchbook"] .pitch-area iframe,
  body[data-layout="matchbook"] #ltFrame,
  body[data-layout="matchbook"] .pitch-svg,
  body[data-layout="matchbook"] .pitch-svg svg {
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
  }
}

/* MATCHBOOK MAIN MARKET PROFESSIONAL TYPOGRAPHY
   Final override: keep the primary market readable without the heavy Exfair-style bold. */
body[data-layout="matchbook"] .event-detail-header .ev-name {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  color: #18202b !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .market-card-hd {
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  color: #121923 !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .runner-name-cell {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #263241 !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .runner-name-cell .runner-label,
body[data-layout="matchbook"] .market-card[data-main-market="1"] .runner-name-cell b,
body[data-layout="matchbook"] .market-card[data-main-market="1"] .runner-name-cell strong {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #263241 !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .runner-name-cell .runner-icon {
  opacity: .42 !important;
  transform: scale(.9) !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .depth-cell .d-price {
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

/* MATCHBOOK EVENT SCORE HEADER VISIBILITY
   The generic live scoreboard was tuned for dark headers; Matchbook event detail uses a light
   panel, so team names and score metadata must be explicitly dark and visible. */
body[data-layout="matchbook"] .event-detail-header .ev-info.has-score .ev-name {
  display: block !important;
  margin: 0 0 8px !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body[data-layout="matchbook"] .event-detail-header .scorebar.soccer-tl {
  padding-top: 0 !important;
}

body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-team,
body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-score {
  color: #111827 !important;
  text-shadow: none !important;
}

body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-score {
  background: #f3f6fa !important;
  border-color: #cfd8e3 !important;
}

body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-min,
body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-ht,
body[data-layout="matchbook"] .event-detail-header .soccer-tl .bf-tl-ht-label {
  color: #64748b !important;
}

/* MATCHBOOK EVENT HEADER VARIANTS
   Preview with ?skin=matchbook&matchHeader=1..5 */
body[data-layout="matchbook"][data-match-header] .event-detail-header {
  border-radius: 0 !important;
  border: 1px solid #d6dde6 !important;
  box-shadow: none !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .ev-info.has-score {
  width: min(860px, calc(100% - 190px)) !important;
  margin: 0 auto !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .ev-info.has-score .ev-name {
  display: none !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .ev-matched-line {
  position: absolute !important;
  left: 126px !important;
  top: 22px !important;
  margin: 0 !important;
  color: #536274 !important;
  font-size: 12px !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .ev-date {
  position: absolute !important;
  left: 126px !important;
  top: 42px !important;
  margin: 0 !important;
  color: #536274 !important;
  font-size: 11px !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .scorebar.soccer-tl {
  padding: 8px 20px 30px !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .soccer-tl .bf-tl-team {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .soccer-tl .bf-tl-score {
  min-width: 66px !important;
  text-align: center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 5px 14px !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .soccer-tl .bf-tl-min {
  margin: 9px 0 24px !important;
}

body[data-layout="matchbook"][data-match-header] .event-detail-header .soccer-tl .bf-tl-bar {
  height: 8px !important;
  margin: 0 22px !important;
}

/* 1. Betfair clean light */
body[data-layout="matchbook"][data-match-header="1"] .event-detail-header {
  background: #fff !important;
}

body[data-layout="matchbook"][data-match-header="1"] .event-detail-header .soccer-tl .bf-tl-team {
  color: #172033 !important;
}

body[data-layout="matchbook"][data-match-header="1"] .event-detail-header .soccer-tl .bf-tl-score {
  color: #172033 !important;
  background: #f2f5f8 !important;
  border: 1px solid #cfd8e3 !important;
}

/* 2. Betfair dark live strip */
body[data-layout="matchbook"][data-match-header="2"] .event-detail-header {
  background: #2c2c2c !important;
  border-color: #2c2c2c !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .back-to-list {
  border-color: rgba(255,255,255,.24) !important;
  color: #dfe6ee !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .ev-matched-line,
body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .ev-date {
  color: #cbd2dc !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .soccer-tl .bf-tl-team,
body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .soccer-tl .bf-tl-score {
  color: #fff !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .soccer-tl .bf-tl-score {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .soccer-tl .bf-tl-seg {
  background: #465061 !important;
}

/* 3. Compact exchange ticket */
body[data-layout="matchbook"][data-match-header="3"] .event-detail-header {
  min-height: 118px !important;
  background: #f8fafc !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .scorebar.soccer-tl {
  padding-bottom: 20px !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .soccer-tl .bf-tl-head {
  gap: 10px !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .soccer-tl .bf-tl-team {
  font-size: 16px !important;
  font-weight: 650 !important;
  color: #1e293b !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .soccer-tl .bf-tl-score {
  font-size: 16px !important;
  padding: 4px 12px !important;
  color: #0f172a !important;
  background: #fff !important;
  border-color: #d4dce7 !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .soccer-tl .bf-tl-bar {
  height: 6px !important;
}

body[data-layout="matchbook"][data-match-header="3"] .event-detail-header .soccer-tl .bf-tl-seg {
  height: 6px !important;
}

/* 4. Event title + live score under it */
body[data-layout="matchbook"][data-match-header="4"] .event-detail-header {
  background: #fff !important;
}

body[data-layout="matchbook"][data-match-header="4"] .event-detail-header .ev-info.has-score .ev-name {
  display: block !important;
  margin: 0 0 10px !important;
  color: #101827 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body[data-layout="matchbook"][data-match-header="4"] .event-detail-header .scorebar.soccer-tl {
  padding-top: 0 !important;
}

body[data-layout="matchbook"][data-match-header="4"] .event-detail-header .soccer-tl .bf-tl-team {
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #2c3848 !important;
}

body[data-layout="matchbook"][data-match-header="4"] .event-detail-header .soccer-tl .bf-tl-score {
  color: #172033 !important;
  background: #eef2f7 !important;
  border-color: #d1d9e4 !important;
}

/* 5. Minimal broadcast bar */
body[data-layout="matchbook"][data-match-header="5"] .event-detail-header {
  min-height: 132px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%) !important;
}

body[data-layout="matchbook"][data-match-header="5"] .event-detail-header .soccer-tl .bf-tl-head {
  max-width: 640px !important;
  margin: 0 auto !important;
  background: #121922 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 -2px 0 #82d900 !important;
}

body[data-layout="matchbook"][data-match-header="5"] .event-detail-header .soccer-tl .bf-tl-team {
  color: #fff !important;
  font-size: 16px !important;
}

body[data-layout="matchbook"][data-match-header="5"] .event-detail-header .soccer-tl .bf-tl-score {
  color: #111827 !important;
  background: #82d900 !important;
  border-color: #82d900 !important;
}

body[data-layout="matchbook"] .market-card[data-main-market="1"] .depth-cell.best .d-price::after {
  font-weight: 500 !important;
}

/* MATCHBOOK TRACKER VISIBILITY LOCK
   Keep the live tracker fully visible without forcing the user to scroll upward. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] .sidebar-right {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
  }

  body[data-layout="matchbook"] .betslip {
    flex: 0 0 334px !important;
    height: 334px !important;
    min-height: 334px !important;
    max-height: 334px !important;
  }

  body[data-layout="matchbook"] .betslip-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 246px !important;
  }

  body[data-layout="matchbook"] .live-stream-box {
    flex: 0 0 252px !important;
    min-height: 252px !important;
    max-height: 252px !important;
    margin-top: 0 !important;
  }

  body[data-layout="matchbook"] .pitch-area,
  body[data-layout="matchbook"] .pitch-area.has-tracker,
  body[data-layout="matchbook"] .pitch-area iframe,
  body[data-layout="matchbook"] #ltFrame,
  body[data-layout="matchbook"] .pitch-svg,
  body[data-layout="matchbook"] .pitch-svg svg {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}

/* MATCHBOOK SCORE TICKER
   Replaces the Exfair-like green set badge with a distinct trading strip. */
body[data-layout="matchbook"] .score-badge {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: 30px auto !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 34px !important;
  background: #2b3038 !important;
  color: #f7fafc !important;
  border-radius: 0 !important;
  border: 1px solid #454d59 !important;
  box-shadow: inset 4px 0 0 #d1121f !important;
  overflow: hidden !important;
}

body[data-layout="matchbook"] .score-badge .sc-min {
  grid-column: 1 !important;
  min-width: 30px !important;
  padding: 0 !important;
  background: #d1121f !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  align-self: stretch !important;
}

body[data-layout="matchbook"] .score-badge .sc-rows {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0 !important;
  min-width: 78px !important;
  padding: 3px 6px !important;
  background: linear-gradient(180deg, #252b35 0 50%, #1d232c 50% 100%) !important;
}

body[data-layout="matchbook"] .score-badge .sc-r {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-height: 14px !important;
}

body[data-layout="matchbook"] .score-badge .sc-set {
  min-width: 10px !important;
  color: #dce4ee !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

body[data-layout="matchbook"] .score-badge .sc-set.cur {
  color: #ff3344 !important;
  background: transparent !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .score-badge .sc-p {
  min-width: 12px !important;
  color: #20d3ff !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

/* MATCHBOOK SCORE TICKER V2: softer, compact horizontal card */
body[data-layout="matchbook"] .event-namewrap {
  gap: 10px !important;
}

body[data-layout="matchbook"] .score-badge {
  display: grid !important;
  grid-template-columns: 38px minmax(68px, auto) !important;
  min-height: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #f8fafc !important;
  color: #111820 !important;
  border: 1px solid #c8d0dc !important;
  border-left: 3px solid #d1121f !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-layout="matchbook"] .score-badge .sc-min {
  grid-column: 1 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  min-width: 38px !important;
  padding: 0 !important;
  background: #eef2f7 !important;
  color: #d1121f !important;
  border-right: 1px solid #d6dde7 !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  align-self: stretch !important;
}

body[data-layout="matchbook"] .score-badge .sc-rows {
  grid-column: 2 !important;
  min-width: 70px !important;
  padding: 3px 7px !important;
  background: #fff !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
}

body[data-layout="matchbook"] .score-badge .sc-r {
  min-height: 13px !important;
  gap: 5px !important;
  justify-content: flex-end !important;
}

body[data-layout="matchbook"] .score-badge .sc-set {
  min-width: 10px !important;
  color: #475569 !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}

body[data-layout="matchbook"] .score-badge .sc-set.cur {
  color: #d1121f !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .score-badge .sc-p {
  min-width: 14px !important;
  color: #0284c7 !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

/* MATCHBOOK SCOREBOARD FINAL
   A separate score language: broadcast strip, not Exfair/Betfair-style block. */
body[data-layout="matchbook"] .score-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 3px 7px !important;
  background: #ffffff !important;
  color: #101820 !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 999px !important;
  border-left: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06) !important;
}

body[data-layout="matchbook"] .score-badge::before {
  content: "LIVE";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #111820;
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
}

body[data-layout="matchbook"] .score-badge .sc-min {
  min-width: auto !important;
  height: 18px !important;
  padding: 0 6px !important;
  background: #f1f5f9 !important;
  color: #d1121f !important;
  border: 0 !important;
  border-radius: 999px !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-layout="matchbook"] .score-badge .sc-rows {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 1px !important;
  min-width: 56px !important;
  padding: 0 !important;
  background: transparent !important;
}

body[data-layout="matchbook"] .score-badge .sc-r {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 12px !important;
  line-height: 1 !important;
}

body[data-layout="matchbook"] .score-badge .sc-set {
  min-width: 9px !important;
  color: #334155 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-layout="matchbook"] .score-badge .sc-set.cur {
  color: #d1121f !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .score-badge .sc-p {
  min-width: 12px !important;
  color: #0369a1 !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* MATCHBOOK RUNNER TYPOGRAPHY */
body[data-layout="matchbook"] .runner-name-cell {
  color: #1f2937 !important;
}

body[data-layout="matchbook"] .runner-name-cell .runner-label {
  font-weight: 650 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: #18212d !important;
}

body[data-layout="matchbook"] .runner-name-cell .runner-icon {
  opacity: .55 !important;
}

body[data-layout="matchbook"] .runner-pl {
  margin-left: 8px !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: #111827 !important;
}

body[data-layout="matchbook"] .runner-pl.pl-pos {
  color: #059669 !important;
}

body[data-layout="matchbook"] .runner-pl.pl-neg {
  color: #d1121f !important;
}

/* MATCHBOOK TRACKER DOCK
   Keep the real tracker in the lower-right desk instead of the main market page. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] .sidebar-right {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-layout="matchbook"] .betslip {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-layout="matchbook"] .live-stream-box {
    display: block !important;
    flex: 0 0 226px !important;
    min-height: 226px !important;
    max-height: 226px !important;
    order: 5 !important;
    overflow: hidden !important;
    border-top: 6px solid #2b3038 !important;
    background: #111820 !important;
  }

  body[data-layout="matchbook"] .live-stream-hd {
    height: 32px !important;
    padding: 0 10px !important;
    background: #d1121f !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
  }

  body[data-layout="matchbook"] .pop-out-btn {
    display: none !important;
  }

  body[data-layout="matchbook"] .pitch-area {
    height: 194px !important;
    min-height: 194px !important;
    background: #0d1117 !important;
    overflow: hidden !important;
  }

  body[data-layout="matchbook"] .pitch-area.has-tracker {
    min-height: 194px !important;
    height: 194px !important;
  }

  body[data-layout="matchbook"] .pitch-area iframe,
  body[data-layout="matchbook"] #ltFrame {
    width: 100% !important;
    height: 194px !important;
    min-height: 194px !important;
    border: 0 !important;
  }

  body[data-layout="matchbook"] .pitch-svg,
  body[data-layout="matchbook"] .pitch-svg svg {
    height: 194px !important;
    object-fit: cover !important;
  }

  body[data-layout="matchbook"] .play-games-bar {
    display: none !important;
  }

  body[data-layout="matchbook"] #liveTracker {
    display: none !important;
  }
}

/* MATCHBOOK DISTINCT V2
   A separate product silhouette: trading desk, not a recolored Exfair shell. */
body[data-layout="matchbook"] {
  --mb-left: 318px;
  --mb-head: 74px;
  --mb-nav: 48px;
  --mb-red: #d1121f;
  --mb-red-deep: #960b15;
  --mb-charcoal: #272d36;
  --mb-charcoal-2: #353b46;
  --mb-charcoal-3: #171d25;
  --mb-paper: #f4f5f7;
  --mb-rule: #d2d8e1;
  --mb-blue: #8dd2fb;
  --mb-pink: #f3a1b5;
  background: var(--mb-paper) !important;
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] .brand {
    width: var(--mb-left) !important;
    height: calc(var(--mb-head) + var(--mb-nav)) !important;
    background:
      linear-gradient(135deg, var(--mb-red) 0 64%, var(--mb-red-deep) 64% 100%) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 0 0 28px !important;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.24) !important;
  }

  body[data-layout="matchbook"] .brand-plate::before {
    width: 68px !important;
    height: 68px !important;
    background: #fff !important;
    color: var(--mb-red) !important;
    font-size: 46px !important;
    box-shadow: none !important;
  }

  body[data-layout="matchbook"] .brand::after {
    content: "MATCHBOOK\A TRADING DESK" !important;
    left: 112px !important;
    right: auto !important;
    bottom: 31px !important;
    width: 168px !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    letter-spacing: .08em !important;
  }

  body[data-layout="matchbook"] .topbar {
    height: var(--mb-head) !important;
    margin-left: var(--mb-left) !important;
    width: calc(100% - var(--mb-left)) !important;
    padding: 0 26px !important;
    background: var(--mb-charcoal) !important;
    border-bottom: 1px solid #151a21 !important;
  }

  body[data-layout="matchbook"] .topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body[data-layout="matchbook"] .topbar-right {
    gap: 10px !important;
  }

  body[data-layout="matchbook"] .top-search-wrap,
  body[data-layout="matchbook"] .search-wrap {
    width: min(450px, 40vw) !important;
  }

  body[data-layout="matchbook"] #searchInput {
    height: 38px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #454b56 !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 var(--mb-red) !important;
  }

  body[data-layout="matchbook"] #searchInput::placeholder {
    color: #cbd3df !important;
  }

  body[data-layout="matchbook"] .auth-fields input,
  body[data-layout="matchbook"] .btn-login,
  body[data-layout="matchbook"] .btn-join {
    height: 38px !important;
    border-radius: 0 !important;
    font-weight: 950 !important;
  }

  body[data-layout="matchbook"] .btn-login {
    background: #1bb7ee !important;
    color: #fff !important;
    border: 0 !important;
  }

  body[data-layout="matchbook"] .btn-join {
    background: var(--mb-red) !important;
    color: #fff !important;
    border: 0 !important;
  }

  body[data-layout="matchbook"] .sportnav {
    top: var(--mb-head) !important;
    height: var(--mb-nav) !important;
    margin-left: var(--mb-left) !important;
    width: calc(100% - var(--mb-left)) !important;
    padding: 0 18px !important;
    background: #111820 !important;
    border-bottom: 4px solid var(--mb-red) !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-left {
    height: 100% !important;
    gap: 2px !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn,
  body[data-layout="matchbook"] .sportnav a {
    height: 44px !important;
    min-width: 76px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    text-transform: none !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn.active,
  body[data-layout="matchbook"] .sportnav a.active {
    background: var(--mb-red) !important;
    color: #fff !important;
  }

  body[data-layout="matchbook"] .layout {
    margin-left: var(--mb-left) !important;
    margin-top: calc(var(--mb-head) + var(--mb-nav)) !important;
    width: calc(100% - var(--mb-left)) !important;
    min-height: calc(100vh - var(--mb-head) - var(--mb-nav)) !important;
    grid-template-columns: minmax(0, 1fr) clamp(350px, 25vw, 430px) !important;
    background: var(--mb-paper) !important;
  }

  body[data-layout="matchbook"] .sidebar-left {
    top: calc(var(--mb-head) + var(--mb-nav)) !important;
    width: var(--mb-left) !important;
    background: #1f2630 !important;
    border-right: 4px solid var(--mb-red) !important;
    box-shadow: inset -1px 0 0 #111820 !important;
  }

  body[data-layout="matchbook"] .main {
    background: #eeeeef !important;
    padding: 10px 12px 24px !important;
  }

  body[data-layout="matchbook"] .right-sidebar {
    top: calc(var(--mb-head) + var(--mb-nav)) !important;
    height: calc(100vh - var(--mb-head) - var(--mb-nav)) !important;
    background: #41464f !important;
    border-left: 8px solid #2b3038 !important;
  }
}

body[data-layout="matchbook"] .my-markets,
body[data-layout="matchbook"] .sidebar-section-label {
  background: #1f2630 !important;
  border-bottom: 1px solid #3b4451 !important;
}

body[data-layout="matchbook"] .my-markets {
  min-height: 50px !important;
  padding: 0 18px !important;
  color: #fff !important;
  box-shadow: inset 5px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .my-markets .my-star {
  color: var(--mb-red) !important;
}

body[data-layout="matchbook"] .sidebar-section-label {
  padding: 16px 18px 10px !important;
  color: #ff4250 !important;
  text-transform: uppercase !important;
}

body[data-layout="matchbook"] .sports-list > li,
body[data-layout="matchbook"] .sport-item-row {
  min-height: 46px !important;
  padding: 0 18px !important;
  background: #252c36 !important;
  border-bottom: 1px solid #3b4451 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-layout="matchbook"] .sport-item-row.open,
body[data-layout="matchbook"] .sports-list > li:hover,
body[data-layout="matchbook"] .sport-item-row:hover {
  background: #323a46 !important;
  color: #fff !important;
  box-shadow: inset 5px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .sport-submenu {
  background: #171d25 !important;
  border-top: 0 !important;
}

body[data-layout="matchbook"] .sport-comp-item {
  min-height: 38px !important;
  padding-left: 34px !important;
  background: #171d25 !important;
  color: #f2f5f8 !important;
  border-bottom: 1px solid #303946 !important;
}

body[data-layout="matchbook"] .sport-comp-item.open {
  background: #fff !important;
  color: #111820 !important;
  box-shadow: inset 5px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .comp-submenu {
  margin-left: 0 !important;
  border-left: 0 !important;
  background: #202833 !important;
}

body[data-layout="matchbook"] .event-sub-item {
  min-height: 34px !important;
  padding-left: 58px !important;
  background: #202833 !important;
  color: #fff !important;
}

body[data-layout="matchbook"] .event-sub-item::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: -22px;
  border-radius: 50%;
  background: #7f8998;
  flex: 0 0 auto;
}

body[data-layout="matchbook"] .event-sub-item:hover {
  background: #2d3644 !important;
  box-shadow: inset 5px 0 0 #1bb7ee !important;
}

body[data-layout="matchbook"] .xp-hub {
  margin: 0 0 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-layout="matchbook"] .xp-hub-head {
  min-height: 178px !important;
  padding: 28px 30px !important;
  align-items: flex-end !important;
  background:
    linear-gradient(110deg, rgba(209,18,31,.96) 0 58%, rgba(39,45,54,.96) 58% 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 14px) !important;
  border: 0 !important;
}

body[data-layout="matchbook"] .xp-title {
  font-size: 48px !important;
  text-transform: uppercase !important;
}

body[data-layout="matchbook"] .xp-kicker {
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

body[data-layout="matchbook"] .xp-actions {
  align-self: flex-start !important;
}

body[data-layout="matchbook"] .xp-action {
  height: 34px !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}

body[data-layout="matchbook"] .xp-pulse {
  margin-top: 0 !important;
  background: #3f4650 !important;
  border: 1px solid #cbd2dc !important;
}

body[data-layout="matchbook"] .xp-sports {
  margin-top: 10px !important;
  border: 1px solid #cbd2dc !important;
}

body[data-layout="matchbook"] .xp-sport {
  min-height: 96px !important;
  background: #fff !important;
  border-right: 1px solid #d8dde5 !important;
}

body[data-layout="matchbook"] .list-header,
body[data-layout="matchbook"] .market-card,
body[data-layout="matchbook"] .market-condensed,
body[data-layout="matchbook"] .event-row {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-layout="matchbook"] .market-title-bar,
body[data-layout="matchbook"] .market-title {
  background: #2b3038 !important;
  color: #fff !important;
  border-left: 5px solid var(--mb-red) !important;
}

body[data-layout="matchbook"] .betslip-tabs {
  height: 64px !important;
  background: #41464f !important;
  border-bottom: 1px solid #252a31 !important;
}

body[data-layout="matchbook"] .betslip-tabs::before {
  content: "Bet Desk" !important;
  flex: 0 0 110px !important;
  color: #fff !important;
  background: var(--mb-red) !important;
}

body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
  background: #2f3540 !important;
  border-bottom-color: #1bb7ee !important;
}

body[data-layout="matchbook"] .betslip-body {
  background: #fff !important;
}

@media (min-width: 981px) and (max-width: 1420px) {
  body[data-layout="matchbook"] {
    --mb-left: 292px;
  }
}

@media (max-width: 980px) {
  body[data-layout="matchbook"] .brand {
    background: var(--mb-red) !important;
  }

  body[data-layout="matchbook"] .xp-hub-head {
    min-height: 150px !important;
    background: linear-gradient(135deg, var(--mb-red), #2b3038) !important;
  }

  body[data-layout="matchbook"] .xp-title {
    font-size: 32px !important;
  }
}

/* MATCHBOOK BET DESK FINAL LOCK */
body[data-layout="matchbook"] {
  --mb-betdesk: 430px;
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] .layout {
    grid-template-columns: minmax(0, 1fr) var(--mb-betdesk) !important;
  }

  body[data-layout="matchbook"] .sidebar-right {
    grid-column: 2 !important;
    width: var(--mb-betdesk) !important;
    min-width: var(--mb-betdesk) !important;
    max-width: var(--mb-betdesk) !important;
    position: sticky !important;
    top: calc(var(--mb-head, 74px) + var(--mb-nav, 48px)) !important;
    height: calc(100vh - var(--mb-head, 74px) - var(--mb-nav, 48px)) !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    background: #41464f !important;
    border-left: 6px solid #2b3038 !important;
  }

  body[data-layout="matchbook"] .betslip {
    width: 100% !important;
    height: 372px !important;
    min-height: 372px !important;
    max-height: 372px !important;
    flex: 0 0 372px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
  }
}

body[data-layout="matchbook"] .betslip-tabs {
  height: 42px !important;
  min-height: 42px !important;
}

body[data-layout="matchbook"] .betslip-tabs::before {
  flex: 0 0 94px !important;
  font-size: 13px !important;
}

body[data-layout="matchbook"] .betslip-market-name {
  min-height: 30px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-bottom: 1px solid #d7dde6 !important;
}

body[data-layout="matchbook"] .betslip-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body[data-layout="matchbook"] .bx-hd,
body[data-layout="matchbook"] .bx-line {
  grid-template-columns: minmax(0, 1fr) 50px 64px 48px !important;
  gap: 3px !important;
  padding: 4px 7px !important;
}

body[data-layout="matchbook"] .bx-hd {
  min-height: 25px !important;
  font-size: 9.5px !important;
}

body[data-layout="matchbook"] .bx-c-side {
  min-width: 0 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-layout="matchbook"] .bx-c-side .bx-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .bx-c-odds .bf-odds-inp {
  width: 40px !important;
  height: 22px !important;
  font-size: 11px !important;
}

body[data-layout="matchbook"] .bx-odds-steps button {
  width: 13px !important;
  height: 11px !important;
}

body[data-layout="matchbook"] .bx-c-stake .bf-sel-stake {
  width: 62px !important;
  max-width: 62px !important;
  height: 22px !important;
  font-size: 11px !important;
}

body[data-layout="matchbook"] .bx-c-out {
  min-width: 0 !important;
  font-size: 11px !important;
  padding-right: 0 !important;
}

body[data-layout="matchbook"] .bx-quick {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  padding: 0 7px 5px !important;
}

body[data-layout="matchbook"] .bx-quick button {
  height: 20px !important;
  padding: 0 !important;
  font-size: 9.5px !important;
}

body[data-layout="matchbook"] .betslip-footer {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  background: #f5f6f8 !important;
  border-top: 1px solid #d4dbe5 !important;
}

body[data-layout="matchbook"] .betslip-footer .betslip-options,
body[data-layout="matchbook"] .betslip-options {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin-top: 5px !important;
  padding: 5px 0 0 !important;
  border-top: 1px solid #d9dee6 !important;
}

body[data-layout="matchbook"] .bs-opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .bs-opt input {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
}

body[data-layout="matchbook"] .bf-footer-actions {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 6px !important;
}

body[data-layout="matchbook"] .bf-cancel-all,
body[data-layout="matchbook"] #btnPlace {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] .live-stream-box {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 282px !important;
    max-height: none !important;
    height: calc(100vh - var(--mb-head, 74px) - var(--mb-nav, 48px) - 372px) !important;
    margin-top: 0 !important;
    order: 5 !important;
    overflow: hidden !important;
  }

  body[data-layout="matchbook"] .pitch-area,
  body[data-layout="matchbook"] .pitch-area.has-tracker,
  body[data-layout="matchbook"] .pitch-area iframe,
  body[data-layout="matchbook"] #ltFrame,
  body[data-layout="matchbook"] .pitch-svg,
  body[data-layout="matchbook"] .pitch-svg svg {
    height: calc(100% - 32px) !important;
    min-height: 250px !important;
    max-height: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1420px) {
  body[data-layout="matchbook"] {
    --mb-betdesk: 400px;
  }

  body[data-layout="matchbook"] .bx-hd,
  body[data-layout="matchbook"] .bx-line {
    grid-template-columns: minmax(0, 1fr) 56px 68px 48px !important;
  }

  body[data-layout="matchbook"] .bx-c-stake .bf-sel-stake {
    width: 64px !important;
    max-width: 64px !important;
  }
}

/* ========================================================================
   ORBIT TRADING SKIN
   Third white-label layout: hybrid sport/trading product, visually separate
   from Betfair and MatchBook while reusing the existing exchange logic.
   ======================================================================== */
body[data-layout="orbit"] {
  --orb-bg: #08111f;
  --orb-surface: #0f1b2c;
  --orb-surface-2: #142238;
  --orb-panel: #101a2a;
  --orb-panel-soft: #17263c;
  --orb-line: #26384f;
  --orb-line-2: #324861;
  --orb-text: #e7eef8;
  --orb-muted: #8ea0b8;
  --orb-accent: #00d4ff;
  --orb-accent-2: #7c3cff;
  --orb-green: #00c781;
  --orb-amber: #ffb020;
  --orb-red: #ff4868;
  --orb-back: #10b8ff;
  --orb-back-soft: #113b5a;
  --orb-lay: #ff4f86;
  --orb-lay-soft: #512239;
  --brand-dark: #070d18;
  --brand-green: var(--orb-accent);
  --brand-yellow: var(--orb-amber);
  --hdr-bg: #070d18;
  --nav-bg: #0d1726;
  --page-bg: var(--orb-bg);
  --link: var(--orb-accent);
  --accent: var(--orb-accent);
  background:
    radial-gradient(circle at 12% 0%, rgba(0,212,255,.13), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(124,60,255,.16), transparent 34%),
    var(--orb-bg) !important;
  color: var(--orb-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

body[data-layout="orbit"] .brand-logo {
  display: none !important;
}

body[data-layout="orbit"] .brand-plate {
  position: relative;
  width: 150px;
  height: 44px;
  filter: none !important;
}

body[data-layout="orbit"] .brand-plate::before {
  content: "ORBIT";
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: #06101d;
  background: linear-gradient(135deg, var(--orb-accent), #8df6ff);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 0 28px rgba(0,212,255,.26);
}

body[data-layout="orbit"] .brand::after {
  content: "SPORT TRADING";
  color: var(--orb-muted);
  font-size: 9px;
  letter-spacing: .28em;
  font-weight: 850;
}

@media (min-width: 981px) {
  body[data-layout="orbit"] {
    --orb-left: 86px;
    --orb-desk: 390px;
    --orb-top: 74px;
    --orb-nav: 56px;
  }

  body[data-layout="orbit"] .brand {
    width: var(--orb-left) !important;
    height: var(--orb-top) !important;
    padding: 0 !important;
    justify-content: center !important;
    background: #070d18 !important;
    border-right: 1px solid var(--orb-line) !important;
    border-bottom: 1px solid var(--orb-line) !important;
  }

  body[data-layout="orbit"] .brand-plate {
    width: 46px !important;
    height: 46px !important;
  }

  body[data-layout="orbit"] .brand-plate::before {
    content: "O";
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 22px !important;
    letter-spacing: 0 !important;
  }

  body[data-layout="orbit"] .brand::after {
    display: none !important;
  }

  body[data-layout="orbit"] .topbar {
    height: var(--orb-top) !important;
    margin-left: var(--orb-left) !important;
    width: calc(100% - var(--orb-left)) !important;
    padding: 0 18px !important;
    background: rgba(7,13,24,.92) !important;
    border-bottom: 1px solid var(--orb-line) !important;
    backdrop-filter: blur(14px);
  }

  body[data-layout="orbit"] .topbar-search {
    width: min(520px, 42vw) !important;
  }

  body[data-layout="orbit"] .search-bar,
  body[data-layout="orbit"] #searchInput {
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid var(--orb-line-2) !important;
    background: #101b2d !important;
    color: var(--orb-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  body[data-layout="orbit"] .search-bar input,
  body[data-layout="orbit"] #searchInput {
    color: var(--orb-text) !important;
    font-weight: 650 !important;
  }

  body[data-layout="orbit"] .search-bar input::placeholder,
  body[data-layout="orbit"] #searchInput::placeholder,
  body[data-layout="orbit"] .search-bar i {
    color: var(--orb-muted) !important;
  }

  body[data-layout="orbit"] .wallet-chip,
  body[data-layout="orbit"] .account-trigger,
  body[data-layout="orbit"] .btn-login,
  body[data-layout="orbit"] .btn-join {
    border-radius: 12px !important;
    border: 1px solid var(--orb-line) !important;
    background: #101b2d !important;
    color: var(--orb-text) !important;
  }

  body[data-layout="orbit"] .wallet-bal {
    color: var(--orb-green) !important;
  }

  body[data-layout="orbit"] .wallet-exp {
    color: var(--orb-red) !important;
  }

  body[data-layout="orbit"] .btn-login {
    background: linear-gradient(135deg, var(--orb-accent), #36f4ff) !important;
    color: #06101d !important;
    border: 0 !important;
  }

  body[data-layout="orbit"] .btn-join {
    background: linear-gradient(135deg, var(--orb-accent-2), #b86cff) !important;
    color: #fff !important;
    border: 0 !important;
  }

  body[data-layout="orbit"] .sportnav {
    top: var(--orb-top) !important;
    height: var(--orb-nav) !important;
    margin-left: var(--orb-left) !important;
    width: calc(100% - var(--orb-left)) !important;
    padding: 8px 16px !important;
    background: rgba(10,18,31,.92) !important;
    border-bottom: 1px solid var(--orb-line) !important;
    overflow-x: auto !important;
  }

  body[data-layout="orbit"] .sportnav a,
  body[data-layout="orbit"] .sportnav .nav-btn {
    min-width: auto !important;
    height: 38px !important;
    padding: 0 15px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: var(--orb-muted) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  body[data-layout="orbit"] .sportnav a.active,
  body[data-layout="orbit"] .sportnav .nav-btn.active {
    color: #06101d !important;
    background: var(--orb-accent) !important;
    border-color: var(--orb-accent) !important;
    box-shadow: 0 0 22px rgba(0,212,255,.22) !important;
  }

  body[data-layout="orbit"] .layout {
    margin-left: var(--orb-left) !important;
    margin-top: calc(var(--orb-top) + var(--orb-nav)) !important;
    width: calc(100% - var(--orb-left)) !important;
    min-height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    grid-template-columns: 250px minmax(0, 1fr) var(--orb-desk) !important;
    background: transparent !important;
  }

  body[data-layout="orbit"] .sidebar-left {
    position: sticky !important;
    top: calc(var(--orb-top) + var(--orb-nav)) !important;
    height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    width: 250px !important;
    background: rgba(10,18,31,.82) !important;
    border-right: 1px solid var(--orb-line) !important;
    overflow-y: auto !important;
  }

  body[data-layout="orbit"] .main {
    background: transparent !important;
    padding: 14px !important;
  }

  body[data-layout="orbit"] .sidebar-right {
    width: var(--orb-desk) !important;
    min-width: var(--orb-desk) !important;
    max-width: var(--orb-desk) !important;
    position: sticky !important;
    top: calc(var(--orb-top) + var(--orb-nav)) !important;
    height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    background: rgba(9,15,26,.92) !important;
    border-left: 1px solid var(--orb-line) !important;
    overflow: hidden !important;
  }
}

body[data-layout="orbit"] .my-markets,
body[data-layout="orbit"] .sidebar-section-label,
body[data-layout="orbit"] .sport-item-row,
body[data-layout="orbit"] .sport-comp-item,
body[data-layout="orbit"] .event-sub-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(38,56,79,.72) !important;
  color: var(--orb-text) !important;
}

body[data-layout="orbit"] .my-markets {
  min-height: 50px !important;
  padding: 0 14px !important;
  color: var(--orb-accent) !important;
  font-weight: 900 !important;
}

body[data-layout="orbit"] .sidebar-section-label {
  padding: 14px 14px 8px !important;
  color: var(--orb-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: 10px !important;
}

body[data-layout="orbit"] .sport-item-row {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  margin: 3px 8px !important;
  border-bottom: 0 !important;
  font-weight: 850 !important;
}

body[data-layout="orbit"] .sport-item-row:hover,
body[data-layout="orbit"] .sport-item-row.open {
  background: rgba(0,212,255,.1) !important;
  color: #fff !important;
}

body[data-layout="orbit"] .sport-comp-item,
body[data-layout="orbit"] .event-sub-item {
  min-height: 34px !important;
  padding-left: 30px !important;
  font-size: 12px !important;
  color: #cdd8e7 !important;
}

body[data-layout="orbit"] .xp-hub,
body[data-layout="orbit"] .event-detail-header,
body[data-layout="orbit"] .market-card,
body[data-layout="orbit"] .market-condensed,
body[data-layout="orbit"] .list-header,
body[data-layout="orbit"] .event-row {
  border: 1px solid var(--orb-line) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(20,34,56,.94), rgba(12,21,35,.94)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.24) !important;
  color: var(--orb-text) !important;
}

body[data-layout="orbit"] .xp-hub-head {
  min-height: 210px !important;
  padding: 28px !important;
  background:
    linear-gradient(110deg, rgba(0,212,255,.18), transparent 46%),
    radial-gradient(circle at 78% 20%, rgba(124,60,255,.24), transparent 30%),
    #0d1726 !important;
  border-radius: 18px !important;
}

body[data-layout="orbit"] .xp-kicker {
  color: var(--orb-accent) !important;
  letter-spacing: .16em !important;
}

body[data-layout="orbit"] .xp-title {
  color: #fff !important;
  font-size: 42px !important;
  letter-spacing: -.03em !important;
}

body[data-layout="orbit"] .xp-sub {
  color: #bdc9da !important;
}

body[data-layout="orbit"] .xp-action,
body[data-layout="orbit"] .filter-chip,
body[data-layout="orbit"] .btn,
body[data-layout="orbit"] button {
  border-radius: 11px;
}

body[data-layout="orbit"] .market-card {
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

body[data-layout="orbit"] .market-card-hd,
body[data-layout="orbit"] .market-title-bar,
body[data-layout="orbit"] .market-title {
  min-height: 44px !important;
  background: rgba(7,13,24,.72) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--orb-line) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
}

body[data-layout="orbit"] .feature-bar,
body[data-layout="orbit"] .col-header-row {
  background: rgba(15,27,44,.92) !important;
  color: var(--orb-muted) !important;
  border-bottom: 1px solid var(--orb-line) !important;
}

body[data-layout="orbit"] .runner-row {
  min-height: 48px !important;
  background: rgba(12,21,35,.78) !important;
  border-bottom: 1px solid rgba(38,56,79,.76) !important;
}

body[data-layout="orbit"] .runner-row:hover {
  background: rgba(20,34,56,.96) !important;
}

body[data-layout="orbit"] .runner-name-cell {
  color: var(--orb-text) !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .runner-icon {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--orb-line) !important;
  color: var(--orb-accent) !important;
  border-radius: 8px !important;
}

body[data-layout="orbit"] .depth-cell {
  height: 42px !important;
  margin: 1px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease !important;
}

body[data-layout="orbit"] .depth-cell:not(.empty):hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
}

body[data-layout="orbit"] .depth-cell.back-1,
body[data-layout="orbit"] .depth-cell.back-2,
body[data-layout="orbit"] .depth-cell.back-3,
body[data-layout="orbit"] .back-all-btn {
  background: linear-gradient(180deg, #1cc4ff, #0e91d8) !important;
  color: #06101d !important;
}

body[data-layout="orbit"] .depth-cell.lay-1,
body[data-layout="orbit"] .depth-cell.lay-2,
body[data-layout="orbit"] .depth-cell.lay-3,
body[data-layout="orbit"] .lay-all-btn {
  background: linear-gradient(180deg, #ff6b9a, #e33a72) !important;
  color: #210914 !important;
}

body[data-layout="orbit"] .depth-cell.empty {
  background: rgba(255,255,255,.055) !important;
  color: rgba(231,238,248,.42) !important;
}

body[data-layout="orbit"] .depth-cell .d-price {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-layout="orbit"] .depth-cell .d-size {
  color: rgba(6,16,29,.74) !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .depth-cell.empty .d-size {
  color: rgba(231,238,248,.22) !important;
}

body[data-layout="orbit"] .betslip {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  color: var(--orb-text) !important;
}

body[data-layout="orbit"] .betslip-tabs {
  height: 54px !important;
  background: #070d18 !important;
  border-bottom: 1px solid var(--orb-line) !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab {
  color: var(--orb-muted) !important;
  border-bottom: 2px solid transparent !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab.active {
  color: #fff !important;
  border-bottom-color: var(--orb-accent) !important;
  background: rgba(0,212,255,.08) !important;
}

body[data-layout="orbit"] .betslip-market-name {
  background: rgba(15,27,44,.94) !important;
  border-bottom: 1px solid var(--orb-line) !important;
  color: #fff !important;
  padding: 12px 14px !important;
}

body[data-layout="orbit"] .betslip-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: #0b1422 !important;
}

body[data-layout="orbit"] .bx-hd,
body[data-layout="orbit"] .bx-line {
  grid-template-columns: minmax(0,1fr) 58px 78px 56px !important;
  gap: 5px !important;
  padding: 7px 10px !important;
}

body[data-layout="orbit"] .bx-hd {
  background: #122034 !important;
  color: var(--orb-muted) !important;
  border-bottom: 1px solid var(--orb-line) !important;
}

body[data-layout="orbit"] .bx-sel.back,
body[data-layout="orbit"] .bx-line.back {
  background: rgba(16,184,255,.1) !important;
}

body[data-layout="orbit"] .bx-sel.lay,
body[data-layout="orbit"] .bx-line.lay {
  background: rgba(255,79,134,.1) !important;
}

body[data-layout="orbit"] .bf-odds-inp,
body[data-layout="orbit"] .bf-sel-stake,
body[data-layout="orbit"] .stake-input {
  background: #07101d !important;
  color: #fff !important;
  border: 1px solid var(--orb-line-2) !important;
  border-radius: 9px !important;
}

body[data-layout="orbit"] .betslip-footer {
  background: #070d18 !important;
  border-top: 1px solid var(--orb-line) !important;
  padding: 12px !important;
}

body[data-layout="orbit"] .bf-footer-actions {
  display: grid !important;
  grid-template-columns: 118px minmax(0,1fr) !important;
  gap: 8px !important;
}

body[data-layout="orbit"] .bf-cancel-all {
  background: #17263c !important;
  color: var(--orb-text) !important;
  border: 1px solid var(--orb-line-2) !important;
}

body[data-layout="orbit"] #btnPlace,
body[data-layout="orbit"] .btn-place {
  background: linear-gradient(135deg, var(--orb-accent), #33f1ff) !important;
  color: #06101d !important;
  border: 0 !important;
  font-weight: 950 !important;
}

body[data-layout="orbit"] .live-stream-box,
body[data-layout="orbit"] .play-games-bar {
  border-radius: 16px !important;
  border: 1px solid var(--orb-line) !important;
  overflow: hidden !important;
  background: #0b1422 !important;
  margin: 10px !important;
}

body[data-layout="orbit"] .live-stream-hd {
  background: #101b2d !important;
  color: var(--orb-accent) !important;
  border-bottom: 1px solid var(--orb-line) !important;
}

body[data-layout="orbit"] .suspended,
body[data-layout="orbit"] .market-suspended {
  background: rgba(255,72,104,.18) !important;
  color: #ff9aaf !important;
}

body[data-layout="orbit"] .live-badge,
body[data-layout="orbit"] .badge-live {
  background: rgba(0,199,129,.16) !important;
  color: #4dffc0 !important;
  border: 1px solid rgba(0,199,129,.28) !important;
}

@media (max-width: 980px) {
  body[data-layout="orbit"] {
    background: #08111f !important;
  }

  body[data-layout="orbit"] .topbar,
  body[data-layout="orbit"] .sportnav {
    background: #070d18 !important;
    border-bottom: 1px solid var(--orb-line) !important;
  }

  body[data-layout="orbit"] .brand-plate::before {
    content: "ORBIT";
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 12px;
  }

  body[data-layout="orbit"] .layout,
  body[data-layout="orbit"] .main {
    background: #08111f !important;
  }

  body[data-layout="orbit"] .sidebar-left {
    background: #0b1422 !important;
  }

  body[data-layout="orbit"] .market-card,
  body[data-layout="orbit"] .event-detail-header,
  body[data-layout="orbit"] .xp-hub {
    border-radius: 14px !important;
  }

  body[data-layout="orbit"] .depth-cell {
    border-radius: 8px !important;
  }

  body[data-layout="orbit"] .betslip {
    background: #07101d !important;
  }
}

/* ========================================================================
   ORBIT CLASSIC EXCHANGE OVERRIDE
   Dark graphite shell, lime sidebar,
   turquoise market headers, white trading canvas, compact right bet desk.
   Colours, spacing and naming stay white-label safe.
   ======================================================================== */
body[data-layout="orbit"] {
  --orbx-dark: #3b3b3b;
  --orbx-dark-2: #2f2f2f;
  --orbx-black: #202020;
  --orbx-lime: #8dc900;
  --orbx-lime-2: #74b300;
  --orbx-cyan: #13b8c7;
  --orbx-cyan-dark: #0aa4b2;
  --orbx-page: #e9edf1;
  --orbx-panel: #ffffff;
  --orbx-line: #c9d1d8;
  --orbx-text: #1b2733;
  --orbx-muted: #6f7d89;
  --orbx-back: #b7ddf7;
  --orbx-back-strong: #8ccbf4;
  --orbx-lay: #f5b5c8;
  --orbx-lay-strong: #ee8fac;
  --brand-green: var(--orbx-lime);
  --brand-yellow: var(--orbx-lime);
  --hdr-bg: var(--orbx-dark);
  --nav-bg: var(--orbx-dark-2);
  --page-bg: var(--orbx-page);
  --link: #057da4;
  --accent: var(--orbx-cyan);
  background: var(--orbx-page) !important;
  color: var(--orbx-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body[data-layout="orbit"] .brand-logo {
  display: none !important;
}

body[data-layout="orbit"] .brand-plate {
  width: 150px !important;
  height: 46px !important;
}

body[data-layout="orbit"] .brand-plate::before {
  content: "ORBIT X" !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

body[data-layout="orbit"] .brand-plate::after {
  content: "EXCHANGE";
  position: absolute;
  left: 2px;
  bottom: -2px;
  color: #dce2e8;
  font-size: 8px;
  letter-spacing: .38em;
  font-weight: 700;
}

body[data-layout="orbit"] .brand::after {
  display: none !important;
}

@media (min-width: 981px) {
  body[data-layout="orbit"] {
    --orb-left: 254px;
    --orb-desk: 372px;
    --orb-top: 86px;
    --orb-nav: 38px;
  }

  body[data-layout="orbit"] .brand {
    width: var(--orb-left) !important;
    height: var(--orb-top) !important;
    padding: 13px 16px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: var(--orbx-dark) !important;
    border-right: 1px solid #232323 !important;
    border-bottom: 0 !important;
  }

  body[data-layout="orbit"] .topbar {
    height: var(--orb-top) !important;
    margin-left: var(--orb-left) !important;
    width: calc(100% - var(--orb-left)) !important;
    padding: 14px 18px !important;
    background: var(--orbx-dark) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .topbar-search {
    width: min(520px, 42vw) !important;
    align-self: flex-end !important;
  }

  body[data-layout="orbit"] .search-bar,
  body[data-layout="orbit"] #searchInput {
    height: 34px !important;
    border-radius: 2px !important;
    border: 1px solid #9aa3aa !important;
    background: #f7f9fb !important;
    color: #1a2734 !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .search-bar input,
  body[data-layout="orbit"] #searchInput {
    color: #1a2734 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  body[data-layout="orbit"] .search-bar i,
  body[data-layout="orbit"] .search-bar input::placeholder,
  body[data-layout="orbit"] #searchInput::placeholder {
    color: #7b8792 !important;
  }

  body[data-layout="orbit"] .topbar-right {
    align-self: flex-start !important;
    gap: 8px !important;
  }

  body[data-layout="orbit"] .wallet-chip,
  body[data-layout="orbit"] .account-trigger {
    height: 34px !important;
    border-radius: 2px !important;
    border: 1px solid #4d4d4d !important;
    background: #303030 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .btn-login,
  body[data-layout="orbit"] .btn-join {
    height: 34px !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  body[data-layout="orbit"] .btn-login {
    background: #f5f7fa !important;
    color: #222 !important;
    border: 1px solid #d7dde4 !important;
  }

  body[data-layout="orbit"] .btn-join {
    background: var(--orbx-lime) !important;
    color: #122000 !important;
    border: 1px solid var(--orbx-lime-2) !important;
  }

  body[data-layout="orbit"] .sportnav {
    top: var(--orb-top) !important;
    height: var(--orb-nav) !important;
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 10px 0 var(--orb-left) !important;
    background: var(--orbx-dark-2) !important;
    border-top: 1px solid #4c4c4c !important;
    border-bottom: 1px solid #1f1f1f !important;
    overflow-x: auto !important;
  }

  body[data-layout="orbit"] .sportnav a,
  body[data-layout="orbit"] .sportnav .nav-btn {
    height: 37px !important;
    min-width: auto !important;
    padding: 0 14px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body[data-layout="orbit"] .sportnav a.active,
  body[data-layout="orbit"] .sportnav .nav-btn.active {
    background: var(--orbx-lime) !important;
    color: #132000 !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .layout {
    margin-left: 0 !important;
    margin-top: calc(var(--orb-top) + var(--orb-nav)) !important;
    width: 100% !important;
    min-height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    grid-template-columns: var(--orb-left) minmax(0, 1fr) var(--orb-desk) !important;
    background: var(--orbx-page) !important;
  }

  body[data-layout="orbit"] .sidebar-left {
    position: sticky !important;
    top: calc(var(--orb-top) + var(--orb-nav)) !important;
    height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    width: var(--orb-left) !important;
    background: #f4f7f9 !important;
    border-right: 1px solid #b6c0c8 !important;
    overflow-y: auto !important;
  }

  body[data-layout="orbit"] .main {
    background: var(--orbx-page) !important;
    padding: 8px !important;
  }

  body[data-layout="orbit"] .sidebar-right {
    width: var(--orb-desk) !important;
    min-width: var(--orb-desk) !important;
    max-width: var(--orb-desk) !important;
    position: sticky !important;
    top: calc(var(--orb-top) + var(--orb-nav)) !important;
    height: calc(100vh - var(--orb-top) - var(--orb-nav)) !important;
    background: #efefef !important;
    border-left: 1px solid #aeb8c2 !important;
    overflow-y: auto !important;
  }
}

body[data-layout="orbit"] .my-markets {
  min-height: 32px !important;
  padding: 0 10px !important;
  background: var(--orbx-lime) !important;
  color: #1b2a00 !important;
  border-bottom: 1px solid #6fa400 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-layout="orbit"] .my-markets .my-star {
  color: #fff !important;
}

body[data-layout="orbit"] .sidebar-section-label {
  padding: 8px 11px !important;
  background: #dfe6ec !important;
  color: #384652 !important;
  border-bottom: 1px solid #c5cdd5 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

body[data-layout="orbit"] .sport-item-row {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  color: #26323d !important;
  border-bottom: 1px solid #d5dde4 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .sport-item-row.open,
body[data-layout="orbit"] .sport-item-row:hover {
  background: var(--orbx-lime) !important;
  color: #152300 !important;
}

body[data-layout="orbit"] .sport-comp-item,
body[data-layout="orbit"] .event-sub-item {
  min-height: 28px !important;
  padding-left: 18px !important;
  background: #fff !important;
  color: #2b3743 !important;
  border-bottom: 1px solid #e2e7ec !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

body[data-layout="orbit"] .sport-comp-item.open,
body[data-layout="orbit"] .event-sub-item.active,
body[data-layout="orbit"] .event-sub-item:hover {
  background: #e7f5be !important;
  color: #172600 !important;
}

body[data-layout="orbit"] .xp-hub,
body[data-layout="orbit"] .event-detail-header,
body[data-layout="orbit"] .market-card,
body[data-layout="orbit"] .market-condensed,
body[data-layout="orbit"] .list-header,
body[data-layout="orbit"] .event-row {
  border: 1px solid var(--orbx-line) !important;
  border-radius: 0 !important;
  background: var(--orbx-panel) !important;
  box-shadow: none !important;
  color: var(--orbx-text) !important;
}

body[data-layout="orbit"] .event-detail-header,
body[data-layout="orbit"] .xp-hub-head {
  min-height: 92px !important;
  padding: 14px 16px !important;
  background: linear-gradient(180deg, #1cc6d2, var(--orbx-cyan-dark)) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 0 !important;
}

body[data-layout="orbit"] .event-detail-header .ev-name,
body[data-layout="orbit"] .xp-title {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body[data-layout="orbit"] .event-detail-header .ev-date,
body[data-layout="orbit"] .xp-sub,
body[data-layout="orbit"] .xp-kicker {
  color: rgba(255,255,255,.88) !important;
}

body[data-layout="orbit"] .xp-hub {
  margin-bottom: 8px !important;
}

body[data-layout="orbit"] .xp-hub-head {
  min-height: 148px !important;
}

body[data-layout="orbit"] .xp-title {
  font-size: 32px !important;
}

body[data-layout="orbit"] .xp-action {
  height: 32px !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: #26323d !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}

body[data-layout="orbit"] .market-card {
  margin: 8px 0 !important;
  overflow: hidden !important;
}

body[data-layout="orbit"] .market-card-hd,
body[data-layout="orbit"] .market-title-bar,
body[data-layout="orbit"] .market-title {
  min-height: 32px !important;
  padding: 0 9px !important;
  background: var(--orbx-cyan) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--orbx-cyan-dark) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body[data-layout="orbit"] .feature-bar {
  min-height: 32px !important;
  padding: 0 9px !important;
  background: #f8fafb !important;
  color: #283643 !important;
  border-bottom: 1px solid #d7dee5 !important;
  font-size: 11px !important;
}

body[data-layout="orbit"] .col-header-row {
  background: #f2f5f7 !important;
  color: #52606d !important;
  border-bottom: 1px solid #d6dde4 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .runner-row {
  min-height: 38px !important;
  background: #fff !important;
  border-bottom: 1px solid #e0e5ea !important;
}

body[data-layout="orbit"] .runner-row:hover {
  background: #f8fbfc !important;
}

body[data-layout="orbit"] .runner-name-cell {
  color: #222 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .runner-icon {
  width: 18px !important;
  height: 18px !important;
  background: #e8edf1 !important;
  border: 1px solid #d0d8df !important;
  color: #86929d !important;
  border-radius: 2px !important;
}

body[data-layout="orbit"] .depth-cell {
  height: 36px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 1px solid #fff !important;
  transition: filter .12s ease !important;
}

body[data-layout="orbit"] .depth-cell:not(.empty):hover {
  transform: none !important;
  filter: brightness(.94) !important;
  box-shadow: none !important;
}

body[data-layout="orbit"] .depth-cell.back-1,
body[data-layout="orbit"] .depth-cell.back-2,
body[data-layout="orbit"] .depth-cell.back-3,
body[data-layout="orbit"] .back-all-btn {
  background: var(--orbx-back) !important;
  color: #111 !important;
}

body[data-layout="orbit"] .depth-cell.back-1 {
  background: var(--orbx-back-strong) !important;
}

body[data-layout="orbit"] .depth-cell.lay-1,
body[data-layout="orbit"] .depth-cell.lay-2,
body[data-layout="orbit"] .depth-cell.lay-3,
body[data-layout="orbit"] .lay-all-btn {
  background: var(--orbx-lay) !important;
  color: #111 !important;
}

body[data-layout="orbit"] .depth-cell.lay-1 {
  background: var(--orbx-lay-strong) !important;
}

body[data-layout="orbit"] .depth-cell.empty {
  background: #f0f2f4 !important;
  color: #9ba6b0 !important;
}

body[data-layout="orbit"] .depth-cell .d-price {
  color: #111 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .depth-cell .d-size {
  color: rgba(0,0,0,.62) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
}

body[data-layout="orbit"] .betslip {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  background: #fff !important;
  color: #222 !important;
  border: 1px solid #bfc8d0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-layout="orbit"] .betslip-tabs {
  height: 36px !important;
  background: var(--orbx-lime) !important;
  border-bottom: 1px solid #72a900 !important;
}

body[data-layout="orbit"] .betslip-tabs::before {
  content: "Exchange Balance" !important;
  flex: 1 1 auto !important;
  color: #fff !important;
  justify-content: flex-start !important;
  padding-left: 10px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab {
  flex: 0 0 86px !important;
  color: #324400 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab.active {
  background: #fff !important;
  color: #222 !important;
  border-bottom: 0 !important;
}

body[data-layout="orbit"] .betslip-market-name {
  background: #f3f5f7 !important;
  border-bottom: 1px solid #d1d8df !important;
  color: #222 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

body[data-layout="orbit"] .betslip-body {
  background: #fff !important;
  color: #222 !important;
  min-height: 100px !important;
  max-height: 52vh !important;
  overflow-y: auto !important;
}

body[data-layout="orbit"] .bx-hd,
body[data-layout="orbit"] .bx-line {
  grid-template-columns: minmax(0,1fr) 58px 78px 58px !important;
  gap: 5px !important;
  padding: 6px 8px !important;
}

body[data-layout="orbit"] .bx-hd {
  background: #eef2f5 !important;
  color: #42515f !important;
  border-bottom: 1px solid #d2dae2 !important;
  font-size: 10px !important;
}

body[data-layout="orbit"] .bx-line.back,
body[data-layout="orbit"] .bx-sel.back {
  background: #e9f6ff !important;
}

body[data-layout="orbit"] .bx-line.lay,
body[data-layout="orbit"] .bx-sel.lay {
  background: #fff0f5 !important;
}

body[data-layout="orbit"] .bf-odds-inp,
body[data-layout="orbit"] .bf-sel-stake,
body[data-layout="orbit"] .stake-input {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #b8c3cc !important;
  border-radius: 2px !important;
}

body[data-layout="orbit"] .betslip-footer {
  background: #f4f5f6 !important;
  border-top: 1px solid #d1d8df !important;
  padding: 9px !important;
}

body[data-layout="orbit"] .bf-footer-actions {
  display: grid !important;
  grid-template-columns: 128px minmax(0,1fr) !important;
  gap: 8px !important;
}

body[data-layout="orbit"] .bf-cancel-all {
  height: 32px !important;
  background: #dedede !important;
  color: #333 !important;
  border: 1px solid #b9c1c8 !important;
  border-radius: 2px !important;
  font-size: 11px !important;
}

body[data-layout="orbit"] #btnPlace,
body[data-layout="orbit"] .btn-place {
  height: 32px !important;
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  border: 1px solid #6fa400 !important;
  border-radius: 2px !important;
  font-weight: 850 !important;
}

body[data-layout="orbit"] .betslip-options {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  color: #46525e !important;
  font-size: 10.5px !important;
}

body[data-layout="orbit"] .live-stream-box,
body[data-layout="orbit"] .play-games-bar {
  margin: 8px 0 0 !important;
  border: 1px solid #bfc8d0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body[data-layout="orbit"] .live-stream-hd {
  height: 30px !important;
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  border-bottom: 1px solid #6fa400 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body[data-layout="orbit"] .live-badge,
body[data-layout="orbit"] .badge-live {
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  border: 0 !important;
}

body[data-layout="orbit"] .suspended,
body[data-layout="orbit"] .market-suspended {
  background: #5f5f5f !important;
  color: #fff !important;
}

@media (max-width: 980px) {
  body[data-layout="orbit"] {
    background: var(--orbx-page) !important;
  }

  body[data-layout="orbit"] .topbar,
  body[data-layout="orbit"] .sportnav {
    background: var(--orbx-dark) !important;
  }

  body[data-layout="orbit"] .brand-plate::before {
    content: "ORBIT X" !important;
    font-size: 18px !important;
    color: #fff !important;
    background: transparent !important;
  }

  body[data-layout="orbit"] .layout,
  body[data-layout="orbit"] .main {
    background: var(--orbx-page) !important;
  }

body[data-layout="orbit"] .sidebar-left {
    background: #f4f7f9 !important;
  }
}

/* ORBIT SKIN FINAL ALIGNMENT
   Final visual pass on the in-play highlights layout. */
body[data-layout="orbit"] {
  --orbx-alert: 51px;
  --orbx-head: 92px;
  --orbx-prod: 30px;
  --orbx-nav: 32px;
  --orbx-left: 216px;
  --orbx-right: 320px;
  --orbx-lime: #91d700;
  --orbx-cyan: #09becd;
  --orbx-dark: #3b3b3b;
  --orbx-navdark: #282828;
  --orbx-page: #e8eef3;
  --orbx-border: #cbd3da;
  background: var(--orbx-page) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body[data-layout="orbit"]::before {
  content: "OPEN AN ACCOUNT NOW only with our PREFERRED partners BET-FOOTBALL, ASIANCONNECT and DRINBET. Protect your account. Login only using this site URL to avoid phishing scams.";
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--orbx-alert);
  padding: 0 28px;
  background: var(--orbx-lime);
  color: #ff0000;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 981px) {
  body[data-layout="orbit"] .topbar {
    height: var(--orbx-head) !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 12px 22px !important;
    align-items: flex-start !important;
    background: var(--orbx-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .topbar-left {
    align-items: flex-start !important;
    width: 250px !important;
    flex: 0 0 250px !important;
  }

  body[data-layout="orbit"] .brand {
    width: 220px !important;
    height: 64px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    justify-content: flex-start !important;
  }

  body[data-layout="orbit"] .brand-plate {
    width: 184px !important;
    height: 62px !important;
    justify-content: flex-start !important;
  }

  body[data-layout="orbit"] .brand-plate::before {
    content: "ORBITX" !important;
    color: #fff !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 38px !important;
    line-height: .9 !important;
    font-weight: 900 !important;
    letter-spacing: -.075em !important;
  }

  body[data-layout="orbit"] .brand-plate::after {
    content: "ORBIT EXCHANGE" !important;
    left: 1px !important;
    bottom: 0 !important;
    color: #fff !important;
    opacity: .92 !important;
    font-size: 13px !important;
    letter-spacing: .32em !important;
    font-weight: 500 !important;
  }

  body[data-layout="orbit"] .brand-plate::first-letter {
    letter-spacing: -.08em;
  }

  body[data-layout="orbit"] .topbar-search {
    align-self: flex-start !important;
    width: min(460px, 38vw) !important;
    margin-top: 34px !important;
    padding: 0 !important;
  }

  body[data-layout="orbit"] .search-bar,
  body[data-layout="orbit"] #searchInput {
    height: 34px !important;
    max-width: 460px !important;
    border-radius: 0 !important;
    border: 1px solid #aab3ba !important;
    background: #f8fafb !important;
    color: #1b2733 !important;
    box-shadow: none !important;
  }

  body[data-layout="orbit"] .topbar-right {
    margin-left: auto !important;
    margin-top: 8px !important;
  }

  body[data-layout="orbit"] .product-switcher {
    height: var(--orbx-prod) !important;
    padding: 0 0 0 9px !important;
    gap: 0 !important;
    align-items: flex-end !important;
    background: var(--orbx-dark) !important;
    border: 0 !important;
  }

  body[data-layout="orbit"] .product-switcher .ps-tab {
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 800 !important;
  }

  body[data-layout="orbit"] .product-switcher .ps-tab.active {
    background: #fff !important;
    color: #222 !important;
  }

  body[data-layout="orbit"] #productSwitcher .ps-tab[data-product="exchange"]::before {
    content: "Sports";
    font-size: 12px;
  }

  body[data-layout="orbit"] #productSwitcher .ps-tab[data-product="sportsbook"]::before {
    content: "Games";
    font-size: 12px;
  }

  body[data-layout="orbit"] .product-switcher::after {
    content: "Trading View";
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  body[data-layout="orbit"] .sportnav {
    top: auto !important;
    height: var(--orbx-nav) !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    background: var(--orbx-navdark) !important;
    border-top: 0 !important;
    border-bottom: 1px solid #1f1f1f !important;
  }

  body[data-layout="orbit"] .sportnav a,
  body[data-layout="orbit"] .sportnav .nav-btn {
    height: var(--orbx-nav) !important;
    min-width: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body[data-layout="orbit"] .sportnav a.active,
  body[data-layout="orbit"] .sportnav .nav-btn.active {
    background: #e9ecef !important;
    color: #222 !important;
  }

  body[data-layout="orbit"] .sportnav a[data-view="inplay"].active {
    background: #e9ecef !important;
    color: #222 !important;
  }

  body[data-layout="orbit"] .sportnav .live-count {
    background: var(--orbx-lime) !important;
    color: #142100 !important;
    border-radius: 999px !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
  }

  body[data-layout="orbit"] .layout {
    margin: 0 !important;
    width: 100% !important;
    min-height: calc(100vh - var(--orbx-alert) - var(--orbx-head) - var(--orbx-prod) - var(--orbx-nav)) !important;
    grid-template-columns: var(--orbx-left) minmax(0, 1fr) var(--orbx-right) !important;
    background: var(--orbx-page) !important;
  }

  body[data-layout="orbit"] .sidebar-left {
    position: sticky !important;
    top: 0 !important;
    width: var(--orbx-left) !important;
    height: calc(100vh - var(--orbx-alert) - var(--orbx-head) - var(--orbx-prod) - var(--orbx-nav)) !important;
    background: #f4f4f4 !important;
    border-right: 1px solid #bfc7ce !important;
  }

  body[data-layout="orbit"] .main {
    padding: 0 !important;
    background: var(--orbx-page) !important;
    min-width: 0 !important;
  }

  body[data-layout="orbit"] .sidebar-right {
    position: sticky !important;
    top: 0 !important;
    width: var(--orbx-right) !important;
    min-width: var(--orbx-right) !important;
    max-width: var(--orbx-right) !important;
    height: calc(100vh - var(--orbx-alert) - var(--orbx-head) - var(--orbx-prod) - var(--orbx-nav)) !important;
    background: #efefef !important;
    border-left: 1px solid #aeb8c2 !important;
    overflow-y: auto !important;
  }
}

body[data-layout="orbit"] .sidebar-toggle {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 9px !important;
  background: #e2e5e8 !important;
  color: #4c5964 !important;
  border-bottom: 1px solid #c5cdd5 !important;
  font-size: 11px !important;
}

body[data-layout="orbit"] .my-markets {
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 10px !important;
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  border-bottom: 1px solid #74a900 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .my-markets-list {
  background: #fff !important;
}

body[data-layout="orbit"] .my-markets-list li,
body[data-layout="orbit"] .sport-comp-item,
body[data-layout="orbit"] .event-sub-item {
  min-height: 21px !important;
  padding: 0 9px !important;
  background: #fff !important;
  color: #222 !important;
  border-bottom: 1px solid #dedede !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body[data-layout="orbit"] .sidebar-section-label {
  min-height: 26px !important;
  padding: 6px 10px !important;
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  border-bottom: 1px solid #74a900 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body[data-layout="orbit"] .sport-item-row {
  min-height: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #dedede !important;
  background: #f7f7f7 !important;
  color: #222 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body[data-layout="orbit"] .sport-item-row.open,
body[data-layout="orbit"] .sport-item-row:hover {
  background: #e9f6c7 !important;
  color: #111 !important;
}

body[data-layout="orbit"] .list-header.inplay-view,
body[data-layout="orbit"] .list-header {
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #d2d9df !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

body[data-layout="orbit"] .list-title {
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  padding: 0 10px !important;
  background: var(--orbx-cyan) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

body[data-layout="orbit"] .list-title::before,
body[data-layout="orbit"] .list-count {
  display: none !important;
}

body[data-layout="orbit"] .list-title span:first-child,
body[data-layout="orbit"] #listTitleText {
  color: #fff !important;
}

body[data-layout="orbit"] .list-tabs {
  position: absolute !important;
  right: 76px !important;
  top: 9px !important;
  gap: 8px !important;
}

body[data-layout="orbit"] .tab {
  min-width: 58px !important;
  height: 32px !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: #222 !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .tab.active {
  background: var(--orbx-lime) !important;
  color: #142000 !important;
  box-shadow: none !important;
}

body[data-layout="orbit"] .ipl-filters {
  padding: 10px !important;
  background: #fff !important;
  border-bottom: 1px solid #d4dbe2 !important;
}

body[data-layout="orbit"] .ipl-viewby {
  color: #222 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .ipl-filters .ipl-sel {
  height: 30px !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1px solid #c3ccd4 !important;
  color: #222 !important;
}

body[data-layout="orbit"] .ipl-row2 {
  display: none !important;
}

body[data-layout="orbit"] .market-groups,
body[data-layout="orbit"] #marketGroups {
  background: #fff !important;
  border-left: 1px solid #d2d9df !important;
  border-right: 1px solid #d2d9df !important;
}

body[data-layout="orbit"] .group-card {
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

body[data-layout="orbit"] .group-card-hd {
  height: 26px !important;
  padding: 0 10px !important;
  background: var(--orbx-cyan) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .market-table-hd {
  grid-template-columns: minmax(260px, 1fr) 72px 168px 168px 168px 24px !important;
  height: 22px !important;
  padding: 0 8px !important;
  background: #f1f3f5 !important;
  color: #111 !important;
  border-bottom: 1px solid #d5dce3 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[data-layout="orbit"] .event-row {
  grid-template-columns: minmax(260px, 1fr) 72px 168px 168px 168px 24px !important;
  min-height: 42px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #d7dde3 !important;
  background: #fff !important;
  gap: 1px !important;
}

body[data-layout="orbit"] .event-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.15 !important;
}

body[data-layout="orbit"] .event-meta {
  font-size: 10px !important;
  margin-top: 0 !important;
  color: #66727e !important;
}

body[data-layout="orbit"] .price-cell {
  height: 42px !important;
  gap: 1px !important;
}

body[data-layout="orbit"] .price-cell .back,
body[data-layout="orbit"] .price-cell .lay {
  min-height: 42px !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .price-cell .back {
  background: #9fd2f4 !important;
  color: #111 !important;
}

body[data-layout="orbit"] .price-cell .lay {
  background: #f5b7c9 !important;
  color: #111 !important;
}

body[data-layout="orbit"] .price-cell .sz,
body[data-layout="orbit"] .price-cell small {
  color: rgba(0,0,0,.65) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body[data-layout="orbit"] .betslip {
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

body[data-layout="orbit"] .betslip-tabs {
  height: 34px !important;
  background: var(--orbx-lime) !important;
  border-bottom: 1px solid #73a900 !important;
}

body[data-layout="orbit"] .betslip-tabs::before {
  content: "Betslip" !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab {
  height: 34px !important;
  flex: 0 0 86px !important;
  background: transparent !important;
  color: #223000 !important;
  font-size: 11px !important;
}

body[data-layout="orbit"] .betslip-tabs .bet-tab.active {
  background: #fff !important;
  color: #222 !important;
}

body[data-layout="orbit"] .betslip-market-name {
  min-height: 30px !important;
  padding: 8px 10px !important;
  background: #fff !important;
  color: #222 !important;
  border-bottom: 1px solid #d7dde3 !important;
  font-weight: 700 !important;
}

body[data-layout="orbit"] .betslip-footer {
  background: #f4f4f4 !important;
}

/* MATCHBOOK GREEN ACCENT + NAV FIT
   Keep the Matchbook layout, but make the sport rail robust on narrow widths
   and switch the aggressive red accent to the Orbit-style green requested. */
body[data-layout="matchbook"] {
  --mb-red: #91d700;
  --mb-red-deep: #5f9f00;
}

@media (min-width: 981px) {
  body[data-layout="matchbook"] .sportnav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
  }

  body[data-layout="matchbook"] .sportnav::-webkit-scrollbar {
    height: 6px !important;
  }

  body[data-layout="matchbook"] .sportnav::-webkit-scrollbar-track {
    background: #111820 !important;
  }

  body[data-layout="matchbook"] .sportnav::-webkit-scrollbar-thumb {
    background: rgba(145,215,0,.72) !important;
    border-radius: 999px !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-left {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
    overflow: visible !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn,
  body[data-layout="matchbook"] .sportnav a {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: 150px !important;
    height: 44px !important;
    padding: 0 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 44px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }

  body[data-layout="matchbook"] .sportnav a[data-topsport] {
    min-width: 64px !important;
  }

  body[data-layout="matchbook"] .sportnav a[data-topsport][data-view="sport-4339"] {
    min-width: 118px !important;
    max-width: 132px !important;
  }

  body[data-layout="matchbook"] .sportnav .nav-btn.active,
  body[data-layout="matchbook"] .sportnav a.active {
    color: #111820 !important;
  }

  body[data-layout="matchbook"] .sportnav .live-count {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111820 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
}

body[data-layout="matchbook"] .btn-join,
body[data-layout="matchbook"] #btnPlace,
body[data-layout="matchbook"] .betslip-tabs::before,
body[data-layout="matchbook"] .live-stream-hd {
  color: #111820 !important;
}

body[data-layout="matchbook"] .brand-plate::before {
  color: #111820 !important;
}

body[data-layout="matchbook"] .sidebar-section-label,
body[data-layout="matchbook"] .my-markets .my-star {
  color: var(--mb-red) !important;
}

/* Matchbook left submenu polish: cleaner type, competition flags and tighter rows. */
body[data-layout="matchbook"] .sport-submenu {
  background: #18202a !important;
}

body[data-layout="matchbook"] .sport-comp-item {
  min-height: 34px !important;
  padding: 0 10px 0 24px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto 14px !important;
  align-items: center !important;
  gap: 7px !important;
  background: #f7f9fb !important;
  color: #15202c !important;
  border-bottom: 1px solid #d8dee5 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body[data-layout="matchbook"] .sport-comp-item:hover {
  background: #eef8d2 !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .sport-comp-item.open {
  background: #ffffff !important;
  color: #111820 !important;
  box-shadow: inset 4px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #edf1f5 !important;
  border: 1px solid #cfd7e1 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-count {
  min-width: 24px !important;
  height: 18px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #e4ebf3 !important;
  color: #324050 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-caret {
  color: #45515f !important;
  font-size: 10px !important;
}

body[data-layout="matchbook"] .comp-submenu {
  background: #18202a !important;
}

body[data-layout="matchbook"] .event-sub-item {
  min-height: 31px !important;
  padding: 0 10px 0 45px !important;
  background: #202936 !important;
  color: #dce5ef !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body[data-layout="matchbook"] .event-sub-item::before {
  width: 5px !important;
  height: 5px !important;
  margin-left: -18px !important;
  background: #8b97a6 !important;
}

body[data-layout="matchbook"] .event-sub-item .event-sub-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .event-sub-item:hover {
  background: #2b3543 !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .sport-comp-item {
  grid-template-columns: 24px minmax(0, 1fr) auto 14px !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag {
  width: 24px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 1px rgba(15,23,42,.10) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag-real {
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag-code {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #eef3f8 !important;
  color: #334155 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag-globe {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2dd4bf, #2563eb) !important;
  border-color: rgba(15,23,42,.18) !important;
  color: #fff !important;
  font-size: 13px !important;
}

body[data-layout="matchbook"] .sport-comp-item .comp-flag-generic {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #eef3f8 !important;
  color: #64748b !important;
  font-size: 11px !important;
}

/* Matchbook typography pass: remove the heavy condensed feel from event lists. */
body[data-layout="matchbook"],
body[data-layout="matchbook"] button,
body[data-layout="matchbook"] input,
body[data-layout="matchbook"] select {
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  font-synthesis-weight: none;
}

body[data-layout="matchbook"] .sportnav .nav-btn,
body[data-layout="matchbook"] .sportnav a,
body[data-layout="matchbook"] .sport-item-row,
body[data-layout="matchbook"] .sport-comp-item,
body[data-layout="matchbook"] .event-sub-item,
body[data-layout="matchbook"] .event-name,
body[data-layout="matchbook"] .event-sub-name,
body[data-layout="matchbook"] .xp-pulse-name,
body[data-layout="matchbook"] .xp-sport-name,
body[data-layout="matchbook"] .market-title,
body[data-layout="matchbook"] .market-title-bar {
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body[data-layout="matchbook"] .event-name,
body[data-layout="matchbook"] .xp-pulse-name {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  color: #101827 !important;
}

body[data-layout="matchbook"] .xp-pulse-state,
body[data-layout="matchbook"] .sub-live {
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
}

body[data-layout="matchbook"] .sport-item-row {
  font-weight: 720 !important;
}

body[data-layout="matchbook"] .sport-comp-item {
  font-weight: 620 !important;
}

body[data-layout="matchbook"] .event-sub-item {
  font-weight: 500 !important;
}

body[data-layout="matchbook"] .xp-pulse-item {
  font-weight: 500 !important;
}

/* Matchbook tracker header must follow the Orbit-style green accent, never legacy red. */
body[data-layout="matchbook"] .live-stream-hd {
  background: var(--mb-red) !important;
  color: #111820 !important;
  border-bottom: 1px solid var(--mb-red-deep) !important;
}

body[data-layout="matchbook"] .live-stream-box {
  border-top-color: var(--mb-red) !important;
}

/* Matchbook hero: real sports photography instead of flat geometric banner. */
body[data-layout="matchbook"] .xp-hub-head {
  position: relative !important;
  min-height: 178px !important;
  padding: 30px 32px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(8,13,20,.92) 0%, rgba(8,13,20,.72) 34%, rgba(8,13,20,.28) 62%, rgba(8,13,20,.10) 100%),
    linear-gradient(135deg, rgba(145,215,0,.30) 0%, transparent 42%),
    url("/assets/matchbook-stadium-hero.png") center center / cover no-repeat !important;
  border: 1px solid rgba(145,215,0,.45) !important;
}

body[data-layout="matchbook"] .xp-hub-head::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 30% 52%, rgba(145,215,0,.22), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%) !important;
}

body[data-layout="matchbook"] .xp-copy,
body[data-layout="matchbook"] .xp-actions {
  position: relative !important;
  z-index: 1 !important;
}

body[data-layout="matchbook"] .xp-kicker {
  color: #bdf35a !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}

body[data-layout="matchbook"] .xp-title {
  color: #fff !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.60) !important;
}

body[data-layout="matchbook"] .xp-action {
  background: rgba(17,24,32,.78) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
}

body[data-layout="matchbook"] .xp-action.live {
  background: var(--mb-red) !important;
  border-color: var(--mb-red) !important;
  color: #111820 !important;
}

/* Matchbook sidebar hierarchy: sport -> country -> competition -> event. */
body[data-layout="matchbook"] .sport-country-item {
  min-height: 38px !important;
  padding: 0 10px 0 24px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto 14px !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f3f6fa !important;
  color: #101827 !important;
  border-bottom: 1px solid #d8dee5 !important;
  cursor: pointer !important;
  font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

body[data-layout="matchbook"] .sport-country-item:hover {
  background: #eef8d2 !important;
}

body[data-layout="matchbook"] .sport-country-item.open {
  background: #eef8d2 !important;
  box-shadow: inset 4px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .sport-country-item .comp-flag {
  width: 24px !important;
  height: 18px !important;
  border-radius: 3px !important;
}

body[data-layout="matchbook"] .sport-country-item .country-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .sport-country-item .country-count {
  min-width: 28px !important;
  height: 20px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #dfe7f0 !important;
  color: #4b5969 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

body[data-layout="matchbook"] .sport-country-item .country-caret {
  color: #64748b !important;
  font-size: 10px !important;
  transition: transform .14s ease !important;
}

body[data-layout="matchbook"] .sport-country-item.open .country-caret {
  transform: rotate(90deg) !important;
}

body[data-layout="matchbook"] .country-submenu {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #e9eef4 !important;
}

body[data-layout="matchbook"] .country-submenu.open {
  display: block !important;
}

body[data-layout="matchbook"] .sport-comp-item.sport-comp-child {
  min-height: 32px !important;
  padding-left: 42px !important;
  background: #ffffff !important;
  grid-template-columns: 18px minmax(0, 1fr) auto 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-layout="matchbook"] .sport-comp-item.sport-comp-child:hover,
body[data-layout="matchbook"] .sport-comp-item.sport-comp-child.open {
  background: #f7ffe9 !important;
}

body[data-layout="matchbook"] .comp-league-dot {
  width: 22px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #eef3f8 !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

body[data-layout="matchbook"] .comp-league-atp {
  background: #101820 !important;
  border-color: #101820 !important;
  color: #bdf35a !important;
}

body[data-layout="matchbook"] .comp-league-wta {
  background: linear-gradient(135deg, #6d28d9, #ec4899) !important;
  border-color: rgba(236,72,153,.55) !important;
  color: #fff !important;
}

body[data-layout="matchbook"] .comp-league-itf {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

body[data-layout="matchbook"] .comp-league-ch {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #047857 !important;
}

body[data-layout="matchbook"] .country-submenu .comp-submenu.open {
  background: #202936 !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-item {
  padding-left: 60px !important;
}

/* Matchbook tree depth: opened competition event lists must feel lighter, not like a heavy wall. */
body[data-layout="matchbook"] .country-submenu .comp-submenu.open,
body[data-layout="matchbook"] .sport-submenu > .comp-submenu.open {
  background: #f7fafc !important;
  border-left: 4px solid rgba(145,215,0,.50) !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-item,
body[data-layout="matchbook"] .sport-submenu > .comp-submenu .event-sub-item {
  min-height: 29px !important;
  padding: 0 10px 0 58px !important;
  background: #f8fafc !important;
  color: #243244 !important;
  border-bottom: 1px solid #e5ebf2 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-item::before,
body[data-layout="matchbook"] .sport-submenu > .comp-submenu .event-sub-item::before {
  width: 4px !important;
  height: 4px !important;
  margin-left: -17px !important;
  background: #94a3b8 !important;
  opacity: .75 !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-item:nth-child(even),
body[data-layout="matchbook"] .sport-submenu > .comp-submenu .event-sub-item:nth-child(even) {
  background: #ffffff !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-item:hover,
body[data-layout="matchbook"] .sport-submenu > .comp-submenu .event-sub-item:hover {
  background: #eef8d2 !important;
  color: #111820 !important;
  box-shadow: inset 3px 0 0 var(--mb-red) !important;
}

body[data-layout="matchbook"] .country-submenu .event-sub-name,
body[data-layout="matchbook"] .sport-submenu > .comp-submenu .event-sub-name {
  color: inherit !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Matchbook sport tile previews.
   Open with ?skin=matchbook&sportTiles=1..5, then promote the chosen one. */
body[data-layout="matchbook"][data-sport-tiles] .xp-sports {
  overflow-x: auto !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 0 !important;
}

body[data-layout="matchbook"][data-sport-tiles] .xp-sport {
  position: relative !important;
  flex: 0 0 132px !important;
  min-height: 90px !important;
  border: 0 !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

body[data-layout="matchbook"][data-sport-tiles] .xp-sport:hover {
  transform: translateY(-2px) !important;
}

body[data-layout="matchbook"][data-sport-tiles] .xp-sport-ic {
  font-size: 22px !important;
}

body[data-layout="matchbook"][data-sport-tiles] .xp-sport-name {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

body[data-layout="matchbook"][data-sport-tiles] .xp-sport-live {
  top: 9px !important;
  right: 9px !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  background: var(--mb-red) !important;
  color: #111820 !important;
}

/* Variant 1: clean exchange cards */
body[data-layout="matchbook"][data-sport-tiles="1"] .xp-sports {
  background: #eef2f6 !important;
}

body[data-layout="matchbook"][data-sport-tiles="1"] .xp-sport {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #f4f7fb) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.08), 0 8px 22px rgba(15,23,42,.08) !important;
  color: #111827 !important;
}

body[data-layout="matchbook"][data-sport-tiles="1"] .xp-sport::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--mb-red) !important;
}

/* Variant 2: dark glass trading tiles */
body[data-layout="matchbook"][data-sport-tiles="2"] .xp-sports {
  background: #141b24 !important;
}

body[data-layout="matchbook"][data-sport-tiles="2"] .xp-sport {
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(50,61,76,.92), rgba(19,26,36,.96)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22) !important;
  color: #f8fafc !important;
}

body[data-layout="matchbook"][data-sport-tiles="2"] .xp-sport-ic,
body[data-layout="matchbook"][data-sport-tiles="2"] .xp-sport-name {
  color: #fff !important;
}

body[data-layout="matchbook"][data-sport-tiles="2"] .xp-sport::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 15%, rgba(145,215,0,.28), transparent 34%) !important;
  pointer-events: none !important;
}

/* Matchbook selected sport-card style: Variant 2 becomes the default. */
body[data-layout="matchbook"] .xp-sports {
  overflow-x: auto !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 0 !important;
  background: #141b24 !important;
}

body[data-layout="matchbook"] .xp-sport {
  position: relative !important;
  flex: 0 0 132px !important;
  min-height: 90px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(50,61,76,.92), rgba(19,26,36,.96)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22) !important;
  color: #f8fafc !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

body[data-layout="matchbook"] .xp-sport:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(145deg, rgba(57,69,86,.96), rgba(20,28,39,.98)) !important;
}

body[data-layout="matchbook"] .xp-sport::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 15%, rgba(145,215,0,.28), transparent 34%) !important;
  pointer-events: none !important;
}

body[data-layout="matchbook"] .xp-sport-ic,
body[data-layout="matchbook"] .xp-sport-name {
  position: relative !important;
  z-index: 1 !important;
  color: #fff !important;
}

body[data-layout="matchbook"] .xp-sport-ic {
  font-size: 22px !important;
}

body[data-layout="matchbook"] .xp-sport-name {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

body[data-layout="matchbook"] .xp-sport-live {
  position: absolute !important;
  z-index: 2 !important;
  top: 9px !important;
  right: 9px !important;
  min-width: 20px !important;
  height: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  background: var(--mb-red) !important;
  color: #111820 !important;
}

body[data-layout="matchbook"] .xp-sport-live[style*="display:none"],
body[data-layout="matchbook"] .xp-sport-live[style*="display: none"],
body[data-layout="matchbook"][data-sport-tiles] .xp-sport-live[style*="display:none"],
body[data-layout="matchbook"][data-sport-tiles] .xp-sport-live[style*="display: none"] {
  display: none !important;
}

body[data-layout="matchbook"] .xp-sport-live:not([style*="display:none"]):not([style*="display: none"]) {
  display: inline-flex !important;
}

/* Wallet/balance preview styles.
   Open with ?skin=matchbook&walletStyle=1..10. */
body[data-layout="matchbook"][data-wallet-style] .account-trigger {
  border-radius: 10px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: #111820 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
}

body[data-layout="matchbook"][data-wallet-style] .user-chip,
body[data-layout="matchbook"][data-wallet-style] .wallet-chip {
  min-height: 42px !important;
}

body[data-layout="matchbook"][data-wallet-style] .user-chip {
  padding: 0 10px !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body[data-layout="matchbook"][data-wallet-style] .user-chip i {
  color: #dbe7f3 !important;
}

body[data-layout="matchbook"][data-wallet-style] .wallet-chip {
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  min-width: 104px !important;
}

body[data-layout="matchbook"][data-wallet-style] .wallet-bal,
body[data-layout="matchbook"][data-wallet-style] .wallet-exp {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

body[data-layout="matchbook"][data-wallet-style] .acct-caret {
  margin: 0 8px !important;
  color: rgba(255,255,255,.66) !important;
}

/* 1 Compact trading dark */
body[data-layout="matchbook"][data-wallet-style="1"] .account-trigger {
  background: #111820 !important;
}
body[data-layout="matchbook"][data-wallet-style="1"] .wallet-chip {
  background: #1b2430 !important;
}
body[data-layout="matchbook"][data-wallet-style="1"] .wallet-bal { color: #9df35a !important; }
body[data-layout="matchbook"][data-wallet-style="1"] .wallet-exp { color: #ff8fa3 !important; }

/* 2 Lime market pill */
body[data-layout="matchbook"][data-wallet-style="2"] .account-trigger {
  background: linear-gradient(135deg, #91d700, #5f9f00) !important;
  border-color: rgba(17,24,32,.22) !important;
}
body[data-layout="matchbook"][data-wallet-style="2"] .user-chip,
body[data-layout="matchbook"][data-wallet-style="2"] .user-chip i,
body[data-layout="matchbook"][data-wallet-style="2"] .acct-caret { color: #111820 !important; }
body[data-layout="matchbook"][data-wallet-style="2"] .wallet-chip { background: rgba(17,24,32,.88) !important; }
body[data-layout="matchbook"][data-wallet-style="2"] .wallet-bal { color: #cfff70 !important; }
body[data-layout="matchbook"][data-wallet-style="2"] .wallet-exp { color: #ffb3c0 !important; }

/* Matchbook selected wallet style: Variant 2 as default. */
body[data-layout="matchbook"] .account-trigger {
  border-radius: 10px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #91d700, #5f9f00) !important;
  border: 1px solid rgba(17,24,32,.22) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
}

body[data-layout="matchbook"] .user-chip,
body[data-layout="matchbook"] .wallet-chip {
  min-height: 42px !important;
}

body[data-layout="matchbook"] .user-chip {
  padding: 0 10px !important;
  color: #111820 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body[data-layout="matchbook"] .user-chip i,
body[data-layout="matchbook"] .acct-caret {
  color: #111820 !important;
}

body[data-layout="matchbook"] .wallet-chip {
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  min-width: 104px !important;
  background: rgba(17,24,32,.88) !important;
}

body[data-layout="matchbook"] .wallet-bal {
  color: #cfff70 !important;
}

body[data-layout="matchbook"] .wallet-exp {
  color: #ffb3c0 !important;
}

body[data-layout="matchbook"] .acct-caret {
  margin: 0 8px !important;
}

/* 3 Split fintech card */
body[data-layout="matchbook"][data-wallet-style="3"] .account-trigger {
  background: #f8fafc !important;
  border-color: #dbe3ec !important;
}
body[data-layout="matchbook"][data-wallet-style="3"] .user-chip,
body[data-layout="matchbook"][data-wallet-style="3"] .user-chip i,
body[data-layout="matchbook"][data-wallet-style="3"] .acct-caret { color: #111827 !important; }
body[data-layout="matchbook"][data-wallet-style="3"] .wallet-chip { background: #fff !important; border-left-color: #dbe3ec !important; }
body[data-layout="matchbook"][data-wallet-style="3"] .wallet-lbl { color: #64748b !important; }
body[data-layout="matchbook"][data-wallet-style="3"] .wallet-bal { color: #047857 !important; }
body[data-layout="matchbook"][data-wallet-style="3"] .wallet-exp { color: #be123c !important; }

/* 4 Glass broker */
body[data-layout="matchbook"][data-wallet-style="4"] .account-trigger {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px) !important;
}
body[data-layout="matchbook"][data-wallet-style="4"] .wallet-chip {
  background: rgba(255,255,255,.06) !important;
}
body[data-layout="matchbook"][data-wallet-style="4"] .wallet-bal { color: #86efac !important; }
body[data-layout="matchbook"][data-wallet-style="4"] .wallet-exp { color: #fca5a5 !important; }

/* 5 Neon terminal */
body[data-layout="matchbook"][data-wallet-style="5"] .account-trigger {
  background: #06110c !important;
  border-color: rgba(145,215,0,.55) !important;
  box-shadow: 0 0 0 1px rgba(145,215,0,.18), 0 0 24px rgba(145,215,0,.16) !important;
}
body[data-layout="matchbook"][data-wallet-style="5"] .wallet-chip { background: #07170e !important; }
body[data-layout="matchbook"][data-wallet-style="5"] .wallet-bal { color: #b8ff4d !important; text-shadow: 0 0 10px rgba(184,255,77,.30) !important; }
body[data-layout="matchbook"][data-wallet-style="5"] .wallet-exp { color: #ff6b85 !important; }

/* 6 Broker outline */
body[data-layout="matchbook"][data-wallet-style="6"] .account-trigger {
  background: transparent !important;
  border-color: #4b5563 !important;
}
body[data-layout="matchbook"][data-wallet-style="6"] .wallet-chip {
  background: transparent !important;
  border-left-color: #4b5563 !important;
}
body[data-layout="matchbook"][data-wallet-style="6"] .wallet-bal { color: #9df35a !important; }
body[data-layout="matchbook"][data-wallet-style="6"] .wallet-exp { color: #fda4af !important; }

/* 7 Premium navy */
body[data-layout="matchbook"][data-wallet-style="7"] .account-trigger {
  background: linear-gradient(135deg, #172033, #0f172a) !important;
  border-color: rgba(148,163,184,.24) !important;
}
body[data-layout="matchbook"][data-wallet-style="7"] .wallet-chip { background: rgba(15,23,42,.82) !important; }
body[data-layout="matchbook"][data-wallet-style="7"] .wallet-bal { color: #34d399 !important; }
body[data-layout="matchbook"][data-wallet-style="7"] .wallet-exp { color: #fb7185 !important; }

/* 8 Mini dashboard tiles */
body[data-layout="matchbook"][data-wallet-style="8"] .account-trigger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 6px !important;
  overflow: visible !important;
}
body[data-layout="matchbook"][data-wallet-style="8"] .user-chip,
body[data-layout="matchbook"][data-wallet-style="8"] .wallet-chip {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: #111820 !important;
}
body[data-layout="matchbook"][data-wallet-style="8"] .wallet-chip { border-left: 1px solid rgba(255,255,255,.14) !important; }
body[data-layout="matchbook"][data-wallet-style="8"] .wallet-bal { color: #86efac !important; }
body[data-layout="matchbook"][data-wallet-style="8"] .wallet-exp { color: #fda4af !important; }

/* 9 Exchange status strip */
body[data-layout="matchbook"][data-wallet-style="9"] .account-trigger {
  background: #111820 !important;
  border-left: 4px solid var(--mb-red) !important;
}
body[data-layout="matchbook"][data-wallet-style="9"] .wallet-chip { background: #182231 !important; }
body[data-layout="matchbook"][data-wallet-style="9"] .wallet-bal { color: #bbf45c !important; }
body[data-layout="matchbook"][data-wallet-style="9"] .wallet-exp { color: #ff9bad !important; }

/* 10 Compact pro stack */
body[data-layout="matchbook"][data-wallet-style="10"] .account-trigger {
  background: #202833 !important;
  border-color: rgba(145,215,0,.34) !important;
  border-radius: 6px !important;
}
body[data-layout="matchbook"][data-wallet-style="10"] .user-chip {
  min-height: 36px !important;
}
body[data-layout="matchbook"][data-wallet-style="10"] .wallet-chip {
  min-height: 36px !important;
  padding: 3px 10px !important;
  background: #151d27 !important;
}
body[data-layout="matchbook"][data-wallet-style="10"] .wallet-bal { color: #9df35a !important; font-size: 12px !important; }
body[data-layout="matchbook"][data-wallet-style="10"] .wallet-exp { color: #fb7185 !important; font-size: 10px !important; }

/* Variant 3: image-backed compact sport cards */
body[data-layout="matchbook"][data-sport-tiles="3"] .xp-sports {
  background: #101820 !important;
}

body[data-layout="matchbook"][data-sport-tiles="3"] .xp-sport {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 14px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(9,14,22,.18), rgba(9,14,22,.84)),
    url("/assets/matchbook-stadium-hero.png") center / cover no-repeat !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

body[data-layout="matchbook"][data-sport-tiles="3"] .xp-sport-ic,
body[data-layout="matchbook"][data-sport-tiles="3"] .xp-sport-name {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
}

/* Variant 4: horizontal compact chips */
body[data-layout="matchbook"][data-sport-tiles="4"] .xp-sports {
  background: #f5f7fa !important;
}

body[data-layout="matchbook"][data-sport-tiles="4"] .xp-sport {
  flex: 0 0 178px !important;
  min-height: 58px !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #dbe3ec !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.07) !important;
}

body[data-layout="matchbook"][data-sport-tiles="4"] .xp-sport-ic {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #eaffbd !important;
}

/* Variant 5: premium green neon panels */
body[data-layout="matchbook"][data-sport-tiles="5"] .xp-sports {
  background: linear-gradient(90deg, #0f1720, #1a222d) !important;
}

body[data-layout="matchbook"][data-sport-tiles="5"] .xp-sport {
  border-radius: 16px !important;
  background: linear-gradient(150deg, #111820, #222b36 58%, rgba(145,215,0,.18)) !important;
  border: 1px solid rgba(145,215,0,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(145,215,0,.06), 0 12px 26px rgba(0,0,0,.30) !important;
}

body[data-layout="matchbook"][data-sport-tiles="5"] .xp-sport:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(145,215,0,.55), 0 16px 34px rgba(0,0,0,.35) !important;
}

body[data-layout="matchbook"][data-sport-tiles="5"] .xp-sport-ic {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: rgba(145,215,0,.16) !important;
  color: #cfff70 !important;
}

body[data-layout="matchbook"][data-sport-tiles="5"] .xp-sport-name {
  color: #f8fafc !important;
}

/* ===================================================================
 * TYPOGRAPHY SYSTEM V1
 * Betting exchange / trading-grade typographic normalization.
 * No logic changes: this layer only standardizes font family, scale,
 * weights, line-height, numeric rendering and component hierarchy.
 * =================================================================== */
:root {
  --font-primary: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;

  --text-2xs: 9px;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 20px;
  --text-3xl: 26px;

  --leading-tight: 1.12;
  --leading-snug: 1.22;
  --leading-normal: 1.38;
  --leading-relaxed: 1.55;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-label: 0.055em;

  --type-primary: #111827;
  --type-secondary: #475569;
  --type-muted: #64748b;
  --type-faint: #94a3b8;
}

html {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-normal);
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

::placeholder {
  color: var(--type-muted) !important;
  opacity: 1 !important;
  font-weight: var(--font-regular) !important;
}

/* Headings and section hierarchy */
.list-title,
.group-card-hd,
.market-title,
.market-title-bar,
.betslip-market-name,
.event-detail-header .ev-name,
.xp-title,
.hl-hero-title {
  font-family: var(--font-primary) !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-bold) !important;
}

.list-title {
  font-size: var(--text-lg) !important;
}

.group-card-hd,
.market-title,
.market-title-bar,
.betslip-market-name {
  font-size: var(--text-md) !important;
}

/* 28/08 — QUI stava il titolo «enorme» del prematch, e per tre giri non l'avevo visto.
   `clamp(22px, 2.4vw, 34px) !important` e' la misura giusta per un TITOLONE di sezione
   (`.xp-title`, `.hl-hero-title`): su uno schermo largo arriva a 34px. Ma il nome
   dell'incontro non e' un titolone, e' l'etichetta di una riga sopra le quote — e con
   `!important` questa regola batteva qualunque misura scritta piu' su, per specificita' o
   per ordine. Tolto `.ev-name` di qui: la sua misura torna a valere (13px in `betfair`,
   riga ~1221), le altre due restano come sono.
   📌 Lezione: se una regola non fa effetto, non cercare la spiegazione fuori dal CSS (avevo
   incolpato lo zoom del browser). Confrontare due testi nella STESSA schermata lo diceva:
   il titolo era 2,5 volte il nome del giocatore, un rapporto che lo zoom non produce. */
.xp-title,
.hl-hero-title {
  font-size: clamp(22px, 2.4vw, 34px) !important;
  font-weight: var(--font-bold) !important;
}

.xp-kicker,
.hl-section-title,
.sidebar-section-label,
.market-table-hd,
.sub-group-hd,
.bx-hd,
.betslip-col-hd,
.feature-bar .feat-flag,
.ui-label,
label {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-semibold) !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase;
}

/* Navigation, sidebar and menus */
.product-nav a,
.product-switcher .ps-tab,
.sportnav a,
.nav-settings,
.sports-list > li,
.sport-item-row,
.sport-comp-item,
.sport-country-item,
.event-sub-item,
.my-markets,
.breadcrumb-tree li,
.market-check-list li {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-semibold) !important;
  letter-spacing: var(--tracking-normal) !important;
}

.sport-comp-item,
.sport-country-item,
.event-sub-item,
.event-sub-name,
.comp-name,
.country-name {
  font-weight: var(--font-medium) !important;
}

.event-sub-item,
.event-sub-name {
  font-size: var(--text-base) !important;
}

/* Event rows and market tables */
.event-row,
.runner-row,
.market-row,
.mb-table td,
.stmt-table td,
.statement-row {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-regular) !important;
  letter-spacing: var(--tracking-normal) !important;
}

.event-name,
.runner-label,
.runner-name-cell .runner-label,
.team-home,
.team-away {
  font-family: var(--font-primary) !important;
  font-size: var(--text-md) !important;
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-semibold) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--type-primary) !important;
}

.event-meta,
.market-meta,
.runner-pl,
.matched-vol,
.lm-feat,
.muted,
.help,
.caption,
.small {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-regular) !important;
  color: var(--type-secondary) !important;
}

.market-table-hd,
.sub-group-hd,
.mb-table th,
.stmt-table th {
  color: #334155 !important;
  background-clip: padding-box;
}

/* Odds cells: fast scanning, strong but not oversized */
.depth-cell,
.price-cell .back,
.price-cell .lay,
.price-cell .empty,
.back-all-btn,
.lay-all-btn {
  font-family: var(--font-primary) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-normal) !important;
}

.depth-cell .d-price,
.price-cell .odds,
.price-cell b,
.back .odds,
.lay .odds,
.bf-odds-inp,
.obx-inp,
.odds-val {
  font-family: var(--font-mono) !important;
  font-size: var(--text-lg) !important;
  line-height: 1 !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.depth-cell .d-size,
.price-cell small,
.price-cell .sz,
.runner-pl,
.liquidity,
.amount-small {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-medium) !important;
  color: rgba(15,23,42,.74) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.depth-cell.empty,
.price-cell.empty,
.depth-cell.disabled,
.price-cell.disabled,
.market-suspended,
.suspended {
  color: #64748b !important;
  font-weight: var(--font-medium) !important;
}

/* Betslip: stronger hierarchy for decision-critical data */
.betslip,
.betslip-body,
.betslip-footer,
.bx-line,
.bf-sel,
.obx-sel {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
}

.betslip-tabs,
.betslip-tabs .bet-tab,
.betslip-tabs::before {
  font-family: var(--font-primary) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: var(--tracking-normal) !important;
}

.bx-c-side,
.bx-name,
.bf-sel-name,
.obx-sel-name {
  font-size: var(--text-md) !important;
  line-height: var(--leading-snug) !important;
  font-weight: var(--font-semibold) !important;
}

.bx-c-odds,
.bx-c-stake,
.bx-c-out,
.bf-sel-stake,
.stake-input,
.liability-val,
.profit-val,
.bf-profit,
.bf-liability {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.bf-footer-actions button,
#btnPlace,
.btn-place,
.bf-cancel-all,
.quick-stakes button,
.ui-cbtn,
.hl-btn,
.xp-action,
.refresh-btn,
.tab {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-semibold) !important;
  letter-spacing: var(--tracking-normal) !important;
  text-align: center;
}

/* Wallet, balances, P/L and technical values */
.wallet-bal,
.wallet-exp,
.acct-bal,
.bf-acct-bal b,
.stmt-amt,
.stmt-ref,
.mb-ticket,
.mb-summary b,
.score-badge,
.scorebar,
.sc-set,
.sc-p,
.sb-set,
.sb-pts,
.ev-bet-badge,
.live-count,
.badge-live,
.comp-count,
.country-count,
.xp-sport-live,
.hl-tile-live {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.wallet-bal,
.acct-bal,
.stmt-amt,
.mb-summary b {
  font-size: var(--text-md) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: -0.015em !important;
}

.badge-live,
.live-count,
.event-tag,
.sub-live,
.mb-status,
.bs-inplay-badge {
  font-size: var(--text-2xs) !important;
  line-height: 1 !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase;
}

/* Forms, search and filters */
.search-bar input,
.auth-fields input,
.bf-odds-inp,
.bf-sel-stake,
.stake-input,
.ui-field,
.ipl-sel,
select,
input {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-medium) !important;
}

.bf-odds-inp,
.bf-sel-stake,
.stake-input,
.obx-inp {
  font-family: var(--font-mono) !important;
}

/* Toasts, modals, empty states */
.toast,
.modal,
.auth-modal,
.empty-state,
.skeleton-card,
.ui-confirm,
.notif {
  font-family: var(--font-primary) !important;
}

.toast,
.ui-confirm,
.notif {
  font-size: var(--text-md) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-semibold) !important;
}

/* Matchbook and Orbit inherit system without their earlier heavy typography. */
body[data-layout="matchbook"] .sportnav .nav-btn,
body[data-layout="matchbook"] .sportnav a,
body[data-layout="matchbook"] .sport-item-row,
body[data-layout="matchbook"] .sport-comp-item,
body[data-layout="matchbook"] .event-sub-item,
body[data-layout="matchbook"] .event-name,
body[data-layout="matchbook"] .xp-pulse-name,
body[data-layout="matchbook"] .xp-sport-name,
body[data-layout="orbit"] .sportnav .nav-btn,
body[data-layout="orbit"] .sportnav a,
body[data-layout="orbit"] .sport-item-row,
body[data-layout="orbit"] .sport-comp-item,
body[data-layout="orbit"] .event-sub-item,
body[data-layout="orbit"] .event-name {
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold) !important;
  letter-spacing: var(--tracking-normal) !important;
  text-shadow: none !important;
}

body[data-layout="matchbook"] .xp-title,
body[data-layout="orbit"] .xp-title {
  font-weight: var(--font-bold) !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* Responsive scale: keep mobile readable, not microscopic. */
@media (max-width: 980px) {
  :root {
    --text-2xs: 9px;
    --text-xs: 10.5px;
    --text-sm: 11.5px;
    --text-base: 12.5px;
    --text-md: 13.5px;
    --text-lg: 15px;
    --text-xl: 17px;
    --text-2xl: 21px;
  }

  .event-name,
  .runner-label,
  .runner-name-cell .runner-label {
    font-size: var(--text-md) !important;
    line-height: var(--leading-snug) !important;
  }

  .depth-cell .d-price,
  .price-cell .odds,
  .price-cell b {
    font-size: var(--text-lg) !important;
  }

  .depth-cell .d-size,
  .price-cell small,
  .price-cell .sz {
    font-size: var(--text-xs) !important;
  }

  .mob-nav-btn span:not(.mob-bet-badge),
  .mobile-bottom-nav,
  .mob-nav-btn {
    font-family: var(--font-primary) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: var(--tracking-normal) !important;
  }

  .betslip,
  .betslip-body,
  .bx-line {
    font-size: var(--text-base) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --text-base: 12px;
    --text-md: 13px;
    --text-lg: 14px;
  }

  .event-meta,
  .market-meta,
  .muted {
    font-size: var(--text-sm) !important;
  }
}

/* Matchbook My Bets: ticket and event are primary data, keep them readable. */
body[data-layout="matchbook"] #myBetsView .mb-ticket {
  color: #0f5f7a !important;
  font-weight: 850 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
}

body[data-layout="matchbook"] #myBetsView .mb-ev,
body[data-layout="matchbook"] #myBetsView .obx-evlink {
  color: #172033 !important;
  font-weight: 650 !important;
}

body[data-layout="matchbook"] #myBetsView .obx-evlink {
  cursor: pointer !important;
  text-decoration: none !important;
}

body[data-layout="matchbook"] #myBetsView .obx-evlink:hover {
  color: #3f7f00 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body[data-layout="matchbook"] #myBetsView .mb-table th {
  color: #253244 !important;
}

/* Matchbook right rail: replace the idle pitch placeholder with a real banner.
   The banner is shown only before a tracker is mounted; .has-tracker keeps the iframe untouched. */
body[data-layout="matchbook"] .live-stream-hd span {
  font-size: 0 !important;
}

body[data-layout="matchbook"] .live-stream-hd span::before {
  content: "MATCH CENTER";
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

/* Compact banner — the tracker box is now a fixed ~144px secondary panel (see MATCHBOOK
   TRACKER above), so this card is a slim strip: badge pill + one short line, no bullet list. */
body[data-layout="matchbook"] .pitch-area:not(.has-tracker) {
  position: relative !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(9,14,22,.20), rgba(9,14,22,.88)),
    linear-gradient(135deg, rgba(145,215,0,.55) 0%, rgba(145,215,0,.18) 30%, rgba(17,24,32,.04) 58%),
    url("/assets/matchbook-stadium-hero.png") center / cover no-repeat !important;
  overflow: hidden !important;
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker)::before {
  content: "EXCHANGE LIVE CENTER";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 20px);
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(145,215,0,.96), rgba(191,255,80,.92));
  color: #101820;
  font-family: var(--font-primary, Inter, Arial, sans-serif);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .1em;
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
  pointer-events: none;
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker)::after {
  content: "Apri un evento live per il match tracker";
  position: relative;
  z-index: 1;
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(13,19,29,.82), rgba(13,19,29,.58));
  backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
  font-family: var(--font-primary, Inter, Arial, sans-serif);
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: .01em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker) .pitch-svg {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker) .pitch-svg svg {
  display: none !important;
}

/* Tennis detail scoreboard: wider, readable names and clean serve indicator. */
.event-detail-header .tennis-scorebar {
  width: min(680px, calc(100vw - 520px)) !important;
  max-width: 100% !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
}

.event-detail-header .tennis-scorebar .sb-row {
  display: grid !important;
  /* Name column is minmax(0,…) so it YIELDS to the set/points columns when the window shrinks —
     otherwise a fixed min width overflows the box and the scores get clipped off the right edge. */
  grid-template-columns: 16px minmax(0, 1fr) auto 54px !important;
  gap: 16px !important;
  align-items: center !important;
}

.event-detail-header .tennis-scorebar .sb-serve {
  width: 14px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  font-size: 0 !important;
}

.event-detail-header .tennis-scorebar .sb-serve.is-serving::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #7fdc2f !important;
  box-shadow: 0 0 0 3px rgba(127,220,47,.16), 0 0 10px rgba(127,220,47,.58) !important;
}

.event-detail-header .tennis-scorebar .sb-name {
  flex: none !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.event-detail-header .tennis-scorebar .sb-cells {
  justify-content: end !important;
}

.event-detail-header .tennis-scorebar .sb-pts {
  min-width: 54px !important;
}

@media (max-width: 1180px) {
  .event-detail-header .tennis-scorebar {
    width: min(560px, calc(100vw - 32px)) !important;
  }

  .event-detail-header .tennis-scorebar .sb-row {
    grid-template-columns: 14px minmax(0, 1fr) auto 46px !important;
    gap: 10px !important;
  }
}

/* Very narrow (shrunk BetXchange window / phones): keep the set + points columns visible and let
   the name ellipsize. Without this the earlier fixed name width pushed the score off-screen. */
@media (max-width: 560px) {
  .event-detail-header .tennis-scorebar {
    width: 100% !important;
    padding: 12px 12px !important;
  }
  .event-detail-header .tennis-scorebar .sb-row {
    grid-template-columns: 12px minmax(0, 1fr) auto 40px !important;
    gap: 8px !important;
  }
  .event-detail-header .tennis-scorebar .sb-cells { gap: 6px !important; }
  .event-detail-header .tennis-scorebar .sb-set { min-width: 16px !important; }
}

/* Exfair/Betfair right rail: keep the betslip professional and readable. */
@media (min-width: 981px) {
  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) {
    --bsp-width: clamp(360px, 27vw, 460px);
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .sidebar-right {
    overflow-x: hidden;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .betslip-tabs .bet-tab {
    min-height: 43px;
    font-size: 13px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .betslip-market-name {
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-bs {
    font-size: 12px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-grp {
    border-bottom: 1px solid #d7dde5;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-hd,
  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-line {
    grid-template-columns: minmax(130px, 1fr) 78px 84px 62px;
    gap: 6px;
    padding: 6px 8px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-hd {
    min-height: 38px;
    font-size: 12px;
    line-height: 1.05;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-c-side {
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-c-side .bx-name {
    min-width: 0;
    max-width: none;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-x {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: rgba(0,0,0,.06);
    color: #4d5968;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-c-odds .bf-odds-inp {
    width: 54px;
    height: 28px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-odds-steps button {
    height: 14px;
    width: 18px;
    font-size: 7px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-c-stake .bf-sel-stake {
    height: 28px;
    min-width: 78px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-c-out {
    font-size: 12px;
    white-space: nowrap;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 10px 10px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-quick button {
    min-height: 28px;
    font-size: 12px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-liab-total {
    padding: 10px 12px;
    font-size: 14px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bf-footer-actions {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bf-cancel-all,
  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) #btnPlace {
    min-height: 36px;
    white-space: nowrap;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .betslip-options {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-top: 0;
    padding: 8px 12px 10px;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) {
    --bsp-width: 340px;
  }

  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-hd,
  body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bx-line {
    grid-template-columns: minmax(110px, 1fr) 66px 74px 52px;
  }

body:not([data-layout="matchbook"]):not([data-layout="orbit"]) .bf-footer-actions {
    grid-template-columns: 124px minmax(0, 1fr);
  }
}

/* MATCHBOOK DESK WIDTH BALANCE
   The right desk must support the betslip + tracker without swallowing the main market. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-betdesk: clamp(350px, 23vw, 390px) !important;
  }

  body[data-layout="matchbook"] .layout {
    grid-template-columns: minmax(0, 1fr) var(--mb-betdesk) !important;
  }

  body[data-layout="matchbook"] .sidebar-right {
    width: var(--mb-betdesk) !important;
    min-width: var(--mb-betdesk) !important;
    max-width: var(--mb-betdesk) !important;
  }

  /* Betslip is the primary, variable-content panel (0 to many selections) — it sizes to ITS
     OWN content (flex-grow:0) instead of always stretching to fill the sidebar; a fixed 318px
     used to cap it regardless of content (cramped it with a few selections queued), and an
     earlier flex-grow:1 pass over-corrected the other way (an empty/small betslip stretched
     to fill all spare height, pushing the tracker below the fold — needing a scroll to see it
     with only 1-2 selections). flex-shrink:1 still lets it yield space to the fixed tracker
     box below when there ARE enough selections to need it (betslip-body scrolls internally). */
  body[data-layout="matchbook"] .betslip {
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 160px !important;
    max-height: none !important;
  }

  body[data-layout="matchbook"] .betslip-tabs {
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-layout="matchbook"] .betslip-market-name {
    min-height: 34px !important;
    padding: 8px 10px !important;
  }

  /* flex-basis MUST be auto (content-sized), not 0 — .betslip itself now uses flex:0 1 auto
     (sizes to content, see above), so an ancestor computing .betslip's auto height needs
     betslip-body to report its real content size. A flex-basis:0 child contributes ZERO to
     that computation, which collapsed the whole betslip to just its tabs+footer (selections
     rendered in the DOM but at 0 height, invisible) the moment betslip stopped force-growing. */
  body[data-layout="matchbook"] .betslip-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  body[data-layout="matchbook"] {
    --mb-betdesk: 350px !important;
  }
}

/* MATCHBOOK TRACKER — FILLS LEFTOVER SPACE, NEVER SQUEEZES THE BETSLIP
   Used to flex-grow and fill all remaining right-rail height with a fixed-size .betslip, which
   meant the tracker/pitch could end up TALLER than the betslip even with several selections
   queued (the betlist got squeezed into whatever was left over). Then pinning the tracker to a
   fixed 176px (while .betslip became content-sized, see above) fixed THAT but flipped to the
   opposite problem: an empty/small betslip left a dead grey gap below the now-short tracker.
   Since .betslip now only ever claims the space its OWN content needs (flex:0 1 auto, shrinks
   under pressure — see the .betslip rule above), it's safe to let the tracker grow into
   whatever is left: flex-grow:1 fills the gap, flex-shrink:0 guarantees it never drops below
   its 176px floor even when the betslip has many selections (the betslip absorbs the squeeze
   via its own internal scroll, not the tracker). */
@media (min-width: 981px) {
  body[data-layout="matchbook"] .sidebar-right {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-layout="matchbook"] .live-stream-box {
    flex: 1 0 176px !important;
    min-height: 176px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-layout="matchbook"] .live-stream-hd {
    flex: 0 0 32px !important;
  }

  body[data-layout="matchbook"] .pitch-area,
  body[data-layout="matchbook"] .pitch-area.has-tracker {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-layout="matchbook"] .pitch-area iframe,
  body[data-layout="matchbook"] #ltFrame,
  body[data-layout="matchbook"] .pitch-svg,
  body[data-layout="matchbook"] .pitch-svg svg {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }
}

/* MATCHBOOK EVENT LIST DENSITY FINAL
   Compact score badges and odds cells so event/team names are not crushed. */
body[data-layout="matchbook"] .sub-group-hd.three-way {
  grid-template-columns: minmax(335px, 1fr) 70px repeat(3, 114px) 28px !important;
}

/* .market-table-hd (MATCHED/1/X/2 top header) must ALWAYS share the event-row template,
   in this rule and in every responsive override below, or the labels drift off-column. */
body[data-layout="matchbook"] .market-table-hd,
body[data-layout="matchbook"] .event-row {
  grid-template-columns: minmax(335px, 1fr) 70px repeat(3, 114px) 28px !important;
}

body[data-layout="matchbook"] .event-namewrap {
  gap: 12px !important;
  min-width: 0 !important;
}

body[data-layout="matchbook"] .event-namewrap .score-badge {
  flex: 0 0 116px !important;
  width: 116px !important;
  max-width: 116px !important;
  min-height: 30px !important;
  padding: 3px 6px !important;
  gap: 5px !important;
}

body[data-layout="matchbook"] .score-badge::before {
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 7.5px !important;
}

body[data-layout="matchbook"] .score-badge .sc-min {
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}

body[data-layout="matchbook"] .score-badge .sc-rows {
  flex: 1 1 auto !important;
  min-width: 44px !important;
  max-width: 52px !important;
  overflow: hidden !important;
}

body[data-layout="matchbook"] .score-badge .sc-r {
  gap: 3px !important;
  min-height: 12px !important;
}

body[data-layout="matchbook"] .score-badge .sc-set,
body[data-layout="matchbook"] .score-badge .sc-p {
  min-width: 8px !important;
  font-size: 10px !important;
}

body[data-layout="matchbook"] .event-name {
  font-size: 15.5px !important;
  line-height: 1.24 !important;
  max-width: none !important;
}

body[data-layout="matchbook"] .event-name .team-home,
body[data-layout="matchbook"] .event-name .team-away {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-layout="matchbook"] .event-matched {
  font-size: 11px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body[data-layout="matchbook"] .price-cell {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 42px !important;
}

body[data-layout="matchbook"] .price-cell .back,
body[data-layout="matchbook"] .price-cell .lay {
  min-width: 57px !important;
  height: 42px !important;
  padding: 4px 3px !important;
  border-radius: 3px !important;
}

body[data-layout="matchbook"] .price-cell .price {
  font-size: 14px !important;
  line-height: 1 !important;
}

body[data-layout="matchbook"] .price-cell .size {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

@media (max-width: 1280px) {
  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .market-table-hd,
  body[data-layout="matchbook"] .event-row {
    grid-template-columns: minmax(270px, 1fr) 64px repeat(3, 104px) 24px !important;
  }

  body[data-layout="matchbook"] .event-namewrap .score-badge {
    flex-basis: 102px !important;
    width: 102px !important;
    max-width: 102px !important;
  }

  body[data-layout="matchbook"] .price-cell {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }

  body[data-layout="matchbook"] .price-cell .back,
  body[data-layout="matchbook"] .price-cell .lay {
    min-width: 50px !important;
  }
}

/* MATCHBOOK SCORE BADGE VARIANTS
   Preview with ?skin=matchbook&scoreStyle=1..5 */
body[data-layout="matchbook"][data-score-style] .event-namewrap {
  gap: 14px !important;
}

body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body[data-layout="matchbook"][data-score-style] .score-badge .sc-rows {
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
}

body[data-layout="matchbook"][data-score-style] .score-badge .sc-r {
  line-height: 1 !important;
}

/* 1. Compact block, closest to Matchbook readable table */
body[data-layout="matchbook"][data-score-style="1"] .event-namewrap .score-badge {
  flex: 0 0 93px !important;
  width: 93px !important;
  max-width: 93px !important;
  min-height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  /* Score column widened 45px→54px: cricket/generic scores ("285/10") need ~40px of content
     room, more than football/tennis' 1-2 digits ever did. */
  grid-template-columns: 39px 54px !important;
  border-radius: 3px !important;
  border: 1px solid #1f2933 !important;
  background: #111820 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body[data-layout="matchbook"][data-score-style="1"] .score-badge::before { content: none !important; }
body[data-layout="matchbook"][data-score-style="1"] .score-badge .sc-min {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 2px 0 0 2px !important;
  background: #08a34a !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
body[data-layout="matchbook"][data-score-style="1"] .score-badge .sc-rows {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 3px 5px !important;
  background: #111820 !important;
  overflow: hidden !important;
}
body[data-layout="matchbook"][data-score-style="1"] .score-badge .sc-r {
  justify-content: space-between !important;
  gap: 2px !important;
  min-height: 14px !important;
  overflow: hidden !important;
}
body[data-layout="matchbook"][data-score-style="1"] .score-badge .sc-set,
body[data-layout="matchbook"][data-score-style="1"] .score-badge .sc-p {
  color: #fff !important;
  font-size: 10px !important;
  min-width: 8px !important;
  /* 16px only fit football/tennis' 1-2 digits — cricket/generic scores ("285/10") are longer
     and got hard-clipped mid-string (e.g. showing "166,"). 44px matches the widened 54px grid
     column (minus its own 5px×2 padding) so the longest realistic score ("285/10") fits. */
  max-width: 44px !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* 2. White broadcast pill, light and clean */
body[data-layout="matchbook"][data-score-style="2"] .event-namewrap .score-badge {
  flex: 0 0 96px !important;
  width: 96px !important;
  max-width: 96px !important;
  min-height: 32px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.02) !important;
}
body[data-layout="matchbook"][data-score-style="2"] .score-badge::before {
  content: "LIVE" !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #111820 !important;
  color: #fff !important;
  font-size: 7.5px !important;
}
body[data-layout="matchbook"][data-score-style="2"] .score-badge .sc-min {
  color: #e11d48 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
body[data-layout="matchbook"][data-score-style="2"] .score-badge .sc-rows {
  min-width: 34px !important;
  max-width: 34px !important;
}

/* 3. Thin vertical live rail */
body[data-layout="matchbook"][data-score-style="3"] .event-namewrap .score-badge {
  flex: 0 0 86px !important;
  width: 86px !important;
  max-width: 86px !important;
  min-height: 36px !important;
  padding: 3px 7px 3px 10px !important;
  border-radius: 5px !important;
  border: 1px solid #d3dbe7 !important;
  border-left: 4px solid #84cc16 !important;
  background: #f8fafc !important;
}
body[data-layout="matchbook"][data-score-style="3"] .score-badge::before { content: none !important; }
body[data-layout="matchbook"][data-score-style="3"] .score-badge .sc-min {
  color: #059669 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 10px !important;
}
body[data-layout="matchbook"][data-score-style="3"] .score-badge .sc-rows {
  min-width: 34px !important;
  max-width: 38px !important;
}

/* 4. Score-first dark capsule */
body[data-layout="matchbook"][data-score-style="4"] .event-namewrap .score-badge {
  flex: 0 0 82px !important;
  width: 82px !important;
  max-width: 82px !important;
  min-height: 34px !important;
  padding: 4px 7px !important;
  border-radius: 7px !important;
  border: 0 !important;
  background: #121922 !important;
  box-shadow: inset 0 -2px 0 #84cc16 !important;
}
body[data-layout="matchbook"][data-score-style="4"] .score-badge::before { content: none !important; }
body[data-layout="matchbook"][data-score-style="4"] .score-badge .sc-min {
  color: #84cc16 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
body[data-layout="matchbook"][data-score-style="4"] .score-badge .sc-set,
body[data-layout="matchbook"][data-score-style="4"] .score-badge .sc-p {
  color: #fff !important;
}

/* 5. Minimal text strip */
body[data-layout="matchbook"][data-score-style="5"] .event-namewrap .score-badge {
  flex: 0 0 64px !important;
  width: 64px !important;
  max-width: 64px !important;
  min-height: 30px !important;
  padding: 0 0 0 7px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 3px solid #84cc16 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-layout="matchbook"][data-score-style="5"] .score-badge::before { content: none !important; }
body[data-layout="matchbook"][data-score-style="5"] .score-badge .sc-min {
  color: #059669 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 10px !important;
}
body[data-layout="matchbook"][data-score-style="5"] .score-badge .sc-rows {
  min-width: 28px !important;
  max-width: 30px !important;
}

/* BETXCHANGE BRAND LOGO
   Keep the Matchbook/BetXchange header colours and replace only the mark. */
body[data-layout="matchbook"] .brand::after,
body[data-layout="matchbook"] .brand-plate::before {
  content: none !important;
  display: none !important;
}

body[data-layout="matchbook"] .brand-plate {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Brand column: same tonal family as the rail, but with material depth —
   a diagonal slate gradient, a faint lime aura behind the mark, a light
   catch on the top edge, a soft cast shadow on the seam and a muted lime
   baseline that hands over to the sport nav. Depth without neon. */
body[data-layout="matchbook"] .brand {
  background:
    radial-gradient(120% 95% at 20% 28%, rgba(137, 230, 0, .10), transparent 58%),
    linear-gradient(160deg, #28313d 0%, #1f2731 55%, #171e27 100%) !important;
  border: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, .4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -2px 0 rgba(137, 230, 0, .38),
    6px 0 16px -8px rgba(0, 0, 0, .55) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body[data-layout="matchbook"] .brand .brand-logo {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45)) !important;
}

body[data-layout="matchbook"] .brand-logo {
  display: block !important;
  content: url("/assets/betxchange-neon-desk.svg") !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* MATCHBOOK SCORE VISIBILITY
   Do not reserve the dark score badge when an event has no real live score yet. */
body[data-layout="matchbook"] .event-row.is-upcoming .score-badge,
body[data-layout="matchbook"] .event-row:not(.has-score) .score-badge,
body[data-layout="matchbook"] .score-badge:empty {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body[data-layout="matchbook"] .event-row.is-upcoming .score-badge::before,
body[data-layout="matchbook"] .event-row:not(.has-score) .score-badge::before,
body[data-layout="matchbook"] .score-badge:empty::before {
  content: none !important;
  display: none !important;
}

body[data-layout="matchbook"] .event-row:not(.has-score) .event-meta {
  display: flex !important;
}

/* BETXCHANGE CENTER ODDS RESPONSIVE FIX
   On laptop/narrow browser widths the left rail + bet desk can leave too little room
   for the central in-play table. Keep all odds visible by compressing the table
   instead of letting the third price column drift outside the viewport. */
@media (max-width: 1380px) and (min-width: 861px) {
  body[data-layout="matchbook"] .main {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body[data-layout="matchbook"] #eventListView {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .market-table-hd,
  body[data-layout="matchbook"] .event-row {
    grid-template-columns: minmax(250px, 1fr) 58px repeat(3, minmax(82px, 92px)) 22px !important;
  }

  body[data-layout="matchbook"] .event-namewrap {
    gap: 8px !important;
  }

  body[data-layout="matchbook"] .event-namewrap .score-badge {
    flex-basis: 84px !important;
    width: 84px !important;
    max-width: 84px !important;
  }

  body[data-layout="matchbook"] .event-name {
    font-size: 14px !important;
  }

  body[data-layout="matchbook"] .event-matched {
    font-size: 10px !important;
  }

  body[data-layout="matchbook"] .price-cell {
    width: auto !important;
    min-width: 82px !important;
    max-width: 92px !important;
    height: 38px !important;
  }

  body[data-layout="matchbook"] .price-cell .back,
  body[data-layout="matchbook"] .price-cell .lay {
    min-width: 40px !important;
    height: 38px !important;
    padding: 3px 2px !important;
  }

  body[data-layout="matchbook"] .price-cell .price {
    font-size: 12.5px !important;
  }

  body[data-layout="matchbook"] .price-cell .size {
    font-size: 8px !important;
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  body[data-layout="matchbook"] {
    --mb-left: 260px !important;
  }

  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .market-table-hd,
  body[data-layout="matchbook"] .event-row {
    grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(76px, 86px)) 20px !important;
  }

  body[data-layout="matchbook"] .event-matched,
  body[data-layout="matchbook"] .col-matched,
  body[data-layout="matchbook"] .sgh-matched {
    display: none !important;
  }

  body[data-layout="matchbook"] .event-namewrap .score-badge {
    flex-basis: 76px !important;
    width: 76px !important;
    max-width: 76px !important;
  }

  body[data-layout="matchbook"] .price-cell {
    min-width: 76px !important;
    max-width: 86px !important;
  }

  body[data-layout="matchbook"] .price-cell .back,
  body[data-layout="matchbook"] .price-cell .lay {
    min-width: 37px !important;
  }
}

@media (max-width: 1040px) and (min-width: 861px) {
  body[data-layout="matchbook"] {
    --mb-left: 230px !important;
  }

  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .market-table-hd,
  body[data-layout="matchbook"] .event-row {
    grid-template-columns: minmax(205px, 1fr) repeat(3, 76px) 18px !important;
  }

  body[data-layout="matchbook"] .event-namewrap .score-badge {
    display: none !important;
  }

  body[data-layout="matchbook"] .price-cell {
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* BETXCHANGE EVENT HEADER READABILITY
   Matchbook dark live header needs a light event title even when there is no score widget. */
body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .ev-name {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35) !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .star-btn {
  color: #dbe4ef !important;
  opacity: .95 !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .ev-info:not(.has-score) {
  min-width: 0 !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .back-to-list {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  color: #18202b !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}

body[data-layout="matchbook"][data-match-header="2"] .event-detail-header .back-to-list:hover {
  background: #84cc16 !important;
  border-color: #84cc16 !important;
  color: #111820 !important;
}

/* BETXCHANGE EVENT LIST ODDS GROUPING
   Separate the 1 / X / 2 price groups so Back/Lay pairs do not read as one continuous strip. */
body[data-layout="matchbook"] .sub-group-hd.three-way,
body[data-layout="matchbook"] .market-table-hd,
body[data-layout="matchbook"] .event-row {
  column-gap: 10px !important;
}

body[data-layout="matchbook"] .price-cell:not(.more) {
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) !important;
}

body[data-layout="matchbook"] .price-cell .back {
  border-right: 1px solid rgba(255, 255, 255, .85) !important;
}

body[data-layout="matchbook"] .sub-group-hd .sgh-1,
body[data-layout="matchbook"] .sub-group-hd .sgh-x,
body[data-layout="matchbook"] .sub-group-hd .sgh-2 {
  text-align: center !important;
}

@media (max-width: 1280px) and (min-width: 861px) {
  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .market-table-hd,
  body[data-layout="matchbook"] .event-row {
    column-gap: 8px !important;
  }

  body[data-layout="matchbook"] .price-cell {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
  }

  body[data-layout="matchbook"] .price-cell .back,
  body[data-layout="matchbook"] .price-cell .lay {
    min-width: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BETXCHANGE MOBILE V3  (replaces the V2 / V2.1 / NAV / RHYTHM layers)

   Scope: body[data-layout="matchbook"] inside the ≤860px mobile range —
   the same breakpoint as isMobile() in app.js. The default skin's ≤860
   collapse block remains the STRUCTURAL base (drawer, bottom sheet,
   bottom nav, single column); this layer applies the BetXchange app
   identity on top and redesigns the touch surfaces:

     1. tokens                 6. event detail
     2. header + search        7. betslip bottom sheet
     3. sport nav + filters    8. account panel / drawer
     4. home hub               9. modals + quick bet
     5. event list / coupon   10. states + breakpoints

   Design tokens (--bx3-*) are the single source for the skin's mobile
   colours; nothing below hard-codes a brand colour outside this block.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  body[data-layout="matchbook"] {
    /* ── 1. tokens ─────────────────────────────────────────────── */
    --bx3-lime: #89e600;          /* brand accent */
    --bx3-lime-ink: #0a1400;      /* text on lime */
    --bx3-ink: #0f151d;           /* darkest chrome */
    --bx3-ink-2: #161e28;         /* chrome surface */
    --bx3-ink-3: #202a36;         /* raised chrome */
    --bx3-paper: #eef1f5;         /* page background */
    --bx3-card: #ffffff;          /* content cards */
    --bx3-line: #dbe2ea;          /* light borders */
    --bx3-text: #101820;          /* text on light */
    --bx3-text-2: #5b6875;        /* muted on light */
    --bx3-back: #79bdf2;          /* BACK cells */
    --bx3-back-strong: #4da3e8;   /* BACK selected/pressed */
    --bx3-lay: #f5a3b8;           /* LAY cells */
    --bx3-lay-strong: #ee7f9d;    /* LAY selected/pressed */
    --bx3-live: #16a34a;          /* live green */
    --bx3-danger: #e11d48;        /* errors / badge */
    --bx3-cell-h: 52px;           /* odds touch target */
    background: var(--bx3-paper) !important;
    color: var(--bx3-text) !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Immediate, consistent touch feedback everywhere */
  body[data-layout="matchbook"] button,
  body[data-layout="matchbook"] .price-cell,
  body[data-layout="matchbook"] .depth-cell,
  body[data-layout="matchbook"] .cm-price-cell,
  body[data-layout="matchbook"] .event-row,
  body[data-layout="matchbook"] .tab,
  body[data-layout="matchbook"] .sportnav a {
    touch-action: manipulation;
  }

  /* ── 2. header ─────────────────────────────────────────────── */
  body[data-layout="matchbook"] .topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--bx3-ink-2) !important;
    border-bottom: 1px solid rgba(137, 230, 0, .35) !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
    flex: 0 1 auto !important;
  }
  body[data-layout="matchbook"] .mob-hamburger,
  body[data-layout="matchbook"] .mob-search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 19px !important;
  }
  body[data-layout="matchbook"] .mob-hamburger:active,
  body[data-layout="matchbook"] .mob-search-toggle:active {
    background: rgba(255, 255, 255, .10) !important;
  }
  body[data-layout="matchbook"] .mob-search-toggle { margin-left: auto !important; }
  /* Compact brand plate: neutralise the desktop hero treatment */
  body[data-layout="matchbook"] .brand {
    position: static !important;
    width: auto !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }
  /* v2 flat logo carries its own BX tile — no plate, no glow */
  body[data-layout="matchbook"] .brand-plate {
    width: auto !important;
    max-width: 170px !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .brand-logo {
    width: auto !important;
    max-width: 165px !important;
    height: 30px !important;
    max-height: 30px !important;
    filter: none !important;
  }
  /* Collapsible search drops below the dark topbar */
  body[data-layout="matchbook"] .topbar-search {
    top: 52px !important;
    background: var(--bx3-ink-2) !important;
    border-bottom: 1px solid rgba(137, 230, 0, .3) !important;
  }
  body[data-layout="matchbook"] .search-bar {
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: var(--bx3-ink-3) !important;
    color: #fff !important;
  }
  body[data-layout="matchbook"] .search-bar i { color: rgba(255, 255, 255, .6) !important; }
  body[data-layout="matchbook"] .search-bar input {
    font-size: 16px !important;
    color: #fff !important;
    background: transparent !important;
  }
  body[data-layout="matchbook"] .search-bar input::placeholder { color: rgba(255, 255, 255, .45); }
  body[data-layout="matchbook"] .product-switcher { display: none !important; }

  /* ── 3. sport nav + list header + filter tabs ──────────────── */
  body[data-layout="matchbook"] .sportnav {
    height: 44px !important;
    background: var(--bx3-ink) !important;
    border-bottom: 2px solid var(--bx3-lime) !important;
    padding: 0 2px !important;
  }
  body[data-layout="matchbook"] .sportnav a {
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, .85) !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .sportnav a.active {
    color: var(--bx3-lime-ink) !important;
    background: var(--bx3-lime) !important;
  }
  body[data-layout="matchbook"] .main {
    padding: 0 0 68px !important;
    background: var(--bx3-paper) !important;
  }
  /* List header: readable title chip + horizontally scrolling pills */
  body[data-layout="matchbook"] .list-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 10px 8px !important;
    background: var(--bx3-paper) !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .list-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    color: var(--bx3-text) !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .list-title::before { display: none !important; }
  body[data-layout="matchbook"] .list-count {
    background: var(--bx3-ink-2) !important;
    color: var(--bx3-lime) !important;
    border-radius: 999px !important;
    padding: 2px 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .list-tabs {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 2px 0 !important;
  }
  body[data-layout="matchbook"] .list-tabs::-webkit-scrollbar { display: none !important; }
  body[data-layout="matchbook"] .tab {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    border: 1px solid var(--bx3-line) !important;
    background: var(--bx3-card) !important;
    color: var(--bx3-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  body[data-layout="matchbook"] .tab.active {
    background: var(--bx3-ink-2) !important;
    border-color: var(--bx3-ink-2) !important;
    color: var(--bx3-lime) !important;
  }
  /* In-play filter row: same pill language, one scrolling line */
  body[data-layout="matchbook"] .ipl-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    align-items: center !important;
    padding: 2px 0 !important;
  }
  body[data-layout="matchbook"] .ipl-filters::-webkit-scrollbar { display: none !important; }
  body[data-layout="matchbook"] .ipl-filters select {
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: var(--bx3-card) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  body[data-layout="matchbook"] .ipl-row2 {
    background: var(--bx3-paper) !important;
    padding: 0 6px 6px !important;
  }

  /* ── 4. home hub (xp-hub) ──────────────────────────────────── */
  body[data-layout="matchbook"] .xp-hub {
    margin: 8px 8px 10px !important;
    padding: 14px 12px 12px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(160deg, rgba(137, 230, 0, .12), transparent 45%),
      linear-gradient(180deg, #131b25, #0f151d) !important;
    border: 1px solid rgba(137, 230, 0, .22) !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .xp-hub-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .xp-kicker {
    font-size: 10.5px !important;
    letter-spacing: .16em !important;
    color: var(--bx3-lime) !important;
  }
  body[data-layout="matchbook"] .xp-title {
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    color: #fff !important;
  }
  body[data-layout="matchbook"] .xp-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body[data-layout="matchbook"] .xp-action {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .xp-action.live {
    background: var(--bx3-lime) !important;
    border-color: var(--bx3-lime) !important;
    color: var(--bx3-lime-ink) !important;
  }
  /* Live pulse: ONE horizontally swipeable row (was a broken vertical stack) */
  body[data-layout="matchbook"] .xp-pulse {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    mask-image: linear-gradient(90deg, #000 92%, transparent) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent) !important;
  }
  body[data-layout="matchbook"] .xp-pulse::-webkit-scrollbar { display: none !important; }
  body[data-layout="matchbook"] .xp-pulse-item {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 240px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #e8eef4 !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body[data-layout="matchbook"] .xp-pulse-state {
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #cbd5df !important;
  }
  body[data-layout="matchbook"] .xp-pulse-state.live {
    background: var(--bx3-live) !important;
    color: #fff !important;
  }
  body[data-layout="matchbook"] .xp-pulse-name {
    min-width: 0 !important;
    max-width: 175px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }
  /* Sport shortcuts: compact 3-across grid instead of giant tiles */
  body[data-layout="matchbook"] .xp-sports {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
  }
  body[data-layout="matchbook"] .xp-sport {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 72px !important;
    padding: 8px 4px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body[data-layout="matchbook"] .xp-sport:active { background: rgba(137, 230, 0, .15) !important; }
  body[data-layout="matchbook"] .xp-sport-ic { font-size: 20px !important; color: var(--bx3-lime) !important; }
  body[data-layout="matchbook"] .xp-sport-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .xp-sport-live {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--bx3-live) !important;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .xp-sport { position: relative !important; }

  /* ── 5. event list / coupon ────────────────────────────────────
     App-style coupon rows: the event name owns a full line, odds sit
     below as three Back|Lay pairs (blue|pink), every button ≥44px.
     The 1/X/2 strip is dropped — order + colour carry the meaning,
     exactly like the leading exchange apps. */
  body[data-layout="matchbook"] .market-table-hd { display: none !important; }
  body[data-layout="matchbook"] .market-groups { padding: 0 8px 8px !important; }
  body[data-layout="matchbook"] .group-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: var(--bx3-card) !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .group-card-hd {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: var(--bx3-ink-2) !important;
    color: #fff !important;
    border: 0 !important;
    border-left: 3px solid var(--bx3-lime) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
  }
  body[data-layout="matchbook"] .group-card-hd .ghd-count { color: rgba(255, 255, 255, .55) !important; }
  body[data-layout="matchbook"] .group-card-hd .g-see-all { color: var(--bx3-lime) !important; }
  /* Competition header: exfair structure — name in the 1fr column, 1/X/2
     labels over the odds columns. Templates and gaps are re-asserted to the
     BASE values because desktop-matchbook rules (global !important) would
     otherwise bleed wider gaps/templates into the phone layout. */
  body[data-layout="matchbook"] .sub-group-hd,
  body[data-layout="matchbook"] .sub-group-hd.three-way {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 60px 60px 60px 18px !important;
    column-gap: 3px !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 6px !important;
    background: #2a343f !important;
    color: #fff !important;
    border-left: 3px solid var(--bx3-lime) !important;
  }
  body[data-layout="matchbook"] .sub-group-hd.two-way {
    grid-template-columns: minmax(0, 1fr) 60px 0 60px 18px !important;
  }
  body[data-layout="matchbook"] .sub-group-hd .sgh-name {
    grid-column: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    color: #fff !important;
    text-align: left !important;
  }
  body[data-layout="matchbook"] .ipl-viewby {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--bx3-text-2) !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .sub-group-hd .sgh-matched { display: none !important; }
  body[data-layout="matchbook"] .sub-group-hd .sgh-1,
  body[data-layout="matchbook"] .sub-group-hd .sgh-x,
  body[data-layout="matchbook"] .sub-group-hd .sgh-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .6) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  body[data-layout="matchbook"] .sub-group-hd .sgh-1 { grid-column: 2 !important; }
  body[data-layout="matchbook"] .sub-group-hd.three-way .sgh-x { grid-column: 3 !important; }
  body[data-layout="matchbook"] .sub-group-hd.three-way .sgh-2 { grid-column: 4 !important; }
  body[data-layout="matchbook"] .sub-group-hd.two-way .sgh-2 { grid-column: 4 !important; }
  /* Label row injected once per competition group in sport/search lists (variante 18):
     same template as the event rows, labels sit over the odds columns. */
  body[data-layout="matchbook"] .mkt-lbl-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 60px 60px 60px 18px !important;
    column-gap: 3px !important;
    padding: 5px 6px 4px !important;
    background: #f4f7fa !important;
    border-bottom: 1px solid var(--bx3-line) !important;
  }
  body[data-layout="matchbook"] .mkt-lbl-row.two-way {
    grid-template-columns: minmax(0, 1fr) 60px 0 60px 18px !important;
  }
  body[data-layout="matchbook"] .mkt-lbl-row span {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: #66727f !important;
    text-align: center !important;
  }
  body[data-layout="matchbook"] .mkt-lbl-row span:nth-child(1) { grid-column: 2; }
  body[data-layout="matchbook"] .mkt-lbl-row:not(.two-way) span:nth-child(2) { grid-column: 3; }
  body[data-layout="matchbook"] .mkt-lbl-row:not(.two-way) span:nth-child(3) { grid-column: 4; }
  body[data-layout="matchbook"] .mkt-lbl-row.two-way span:nth-child(2) { grid-column: 4; }

  /* Row: exfair structure 1:1 — the BASE ≤860 grid stays in charge
     (name+badge column on the left, odds columns on the right, 2-way
     collapse handled by the base :has(.no-runner) rules). This layer
     only themes colours and text. */
  body[data-layout="matchbook"] .event-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 60px 60px 60px 18px !important;
    column-gap: 3px !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 8px 6px !important;
    background: var(--bx3-card) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bx3-line) !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .event-row:has(.price-cell.no-runner) {
    grid-template-columns: minmax(0, 1fr) 60px 0 60px 18px !important;
  }
  body[data-layout="matchbook"] .event-row:active { background: #f2f8ec !important; }
  /* Never truncate team names: each team line WRAPS instead of ellipsising
     (the base 2-line clamp would eat the away team as soon as the home name
     wraps). The row just grows a few px when a long name needs two lines. */
  body[data-layout="matchbook"] .event-name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--bx3-text) !important;
    text-shadow: none !important;
  }
  body[data-layout="matchbook"] .event-name .team-home,
  body[data-layout="matchbook"] .event-name .team-away {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* wrap at spaces; mid-word break ONLY as last resort for words wider than
       the column (never clip). The min-width guard prevents the letter-soup
       failure mode where the column collapses to a few px. */
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  body[data-layout="matchbook"] .event-namewrap .event-name { min-width: 56px !important; }
  body[data-layout="matchbook"] .event-namewrap { gap: 5px !important; }
  body[data-layout="matchbook"] .event-info { gap: 3px !important; padding: 0 !important; }
  body[data-layout="matchbook"] .event-info-main { padding: 0 !important; margin: 0 !important; }
  body[data-layout="matchbook"] .event-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--bx3-text-2) !important;
  }
  body[data-layout="matchbook"] .event-tag {
    font-size: 9.5px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
  }
  body[data-layout="matchbook"] .event-tag.live {
    background: var(--bx3-live) !important;
    color: #fff !important;
  }
  /* Live rows: the IN-PLAY pill lives right beside the score badge (no meta line) */
  body[data-layout="matchbook"] .event-namewrap .event-tag {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  body[data-layout="matchbook"] .ev-actions { flex: 0 0 auto !important; }
  body[data-layout="matchbook"] .ev-star {
    width: 22px !important;
    height: 38px !important;
    min-width: 22px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #c2cad3 !important;
    font-size: 14px !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .event-matched { display: none !important; }

  /* ── Live score badge (exfair-style) ───────────────────────────
     Compact two-part chip beside the names: green minute cell +
     dark score cell (one row per team; tennis shows sets, current
     set in lime). Overrides the desktop matchbook "score ticker"
     card, which is light with a red accent. */
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 112px !important;   /* room for 3-digit basket scores */
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
  }
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-min {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    padding: 0 4px !important;
    background: var(--bx3-live) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-rows {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 20px !important;
    padding: 4px 5px !important;
    background: var(--bx3-ink) !important;
    grid-template-rows: none !important;
  }
  /* Default row (football): goals centred in the dark box */
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-r {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 15px !important;
    line-height: 1 !important;
    background: transparent !important;
  }
  /* Tennis row: fixed two-column mini scoreboard — [current set | game points].
     Fixed tracks + tabular digits = the two lines always line up. */
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-r:has(.sc-set) {
    display: grid !important;
    grid-template-columns: 12px 25px !important;
    column-gap: 4px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-p {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant-numeric: tabular-nums !important;
    min-width: 14px !important;
    text-align: center !important;
  }
  /* Game points get their own subtle chip so they read as one column */
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-r:has(.sc-set) .sc-p {
    background: rgba(255, 255, 255, .12) !important;
    border-radius: 4px !important;
    padding: 2px 1px !important;
    min-width: 0 !important;
  }
  /* Tennis on phones: only the CURRENT set + game points fit cleanly in the
     compact badge — past sets are noise here (full sets stay in event detail). */
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-set:not(.cur) {
    display: none !important;
  }
  body[data-layout="matchbook"] .event-row .event-namewrap .score-badge .sc-set.cur {
    color: var(--bx3-lime) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  /* With a visible score the badge already says "live" — drop the pill */
  body[data-layout="matchbook"] .event-row.has-score .event-namewrap .event-tag {
    display: none !important;
  }

  /* Odds line: exfair-style single price per outcome. Back and lay are full-width
     scroll-snap PAGES inside the cell — one swipe flips the whole list Back↔Lay
     (base mechanic + app.js scroll-sync stay in charge; this layer only themes it,
     so no overflow/scroll-snap overrides here). */
  body[data-layout="matchbook"] .event-row .price-cell:not(.more):not(.no-runner) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #e9eef4 !important;
    /* Swipe mechanic re-asserted: the desktop "odds grouping" layer forces
       overflow:hidden !important globally, which kills the finger-swipe to the
       lay page (programmatic scroll still worked — that's why it slipped by). */
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell:not(.more):not(.no-runner)::-webkit-scrollbar {
    display: none !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell.more {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Swipe hint: soft lay-pink glow on the inner right edge (only when a lay exists) */
  body[data-layout="matchbook"] .event-row .price-cell:not(.more):not(.empty) {
    box-shadow: inset -8px 0 7px -5px rgba(238, 127, 157, .75) !important;
  }
  /* .no-runner (2-way X column) stays in the DOM at width 0: the base
     :has() grid templates account for it — do NOT display:none it. */
  body[data-layout="matchbook"] .event-row .price-cell .back,
  body[data-layout="matchbook"] .event-row .price-cell .lay {
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell .back {
    background: var(--bx3-back) !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell .lay {
    background: var(--bx3-lay) !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell .back:active,
  body[data-layout="matchbook"] .price-cell .back.selected {
    background: var(--bx3-back-strong) !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell .lay:active,
  body[data-layout="matchbook"] .price-cell .lay.selected {
    background: var(--bx3-lay-strong) !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell.empty .back,
  body[data-layout="matchbook"] .event-row .price-cell.empty .lay,
  body[data-layout="matchbook"] .event-row .price-cell .back:has(> .price:empty),
  body[data-layout="matchbook"] .event-row .price-cell .lay:has(> .price:empty) {
    background: #e9eef4 !important;
    color: #97a2ae !important;
  }
  body[data-layout="matchbook"] .price-cell .price {
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #08111a !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .price-cell .size {
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: rgba(8, 17, 26, .55) !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .event-row .price-cell.more {
    height: 46px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #eef2f6 !important;
    color: #4b5563 !important;
    font-size: 17px !important;
  }
  /* Suspended / closed: solid overlay chip — odds must not bleed through */
  body[data-layout="matchbook"] .row-lock {
    position: absolute !important;
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(1.5px);
    z-index: 3 !important;
    border-radius: 0 !important;
  }
  body[data-layout="matchbook"] .row-lock.show { display: flex !important; }
  body[data-layout="matchbook"] .row-lock .lock-text,
  body[data-layout="matchbook"] .row-lock span {
    background: var(--bx3-ink-2) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
  }

  /* ── 6. event detail ───────────────────────────────────────── */
  body[data-layout="matchbook"] #eventDetailView { padding: 8px !important; }
  body[data-layout="matchbook"] .event-detail-header {
    padding: 12px !important;
    border-radius: 12px !important;
    margin: 0 0 8px !important;
    background: var(--bx3-ink-2) !important;
    color: #fff !important;
    border: 1px solid rgba(137, 230, 0, .22) !important;
  }
  body[data-layout="matchbook"] .event-detail-header .ev-name {
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    color: #fff !important;
  }
  body[data-layout="matchbook"] .event-detail-header .ev-matched-line,
  body[data-layout="matchbook"] .event-detail-header .ev-date { color: rgba(255, 255, 255, .65) !important; }
  body[data-layout="matchbook"] .back-to-list {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  /* Live scoreboard header: full team names, never "N..." vs "O..." */
  body[data-layout="matchbook"] .soccer-tl .bf-tl-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body[data-layout="matchbook"] .soccer-tl .bf-tl-team {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body[data-layout="matchbook"] .soccer-tl .bf-tl-team.home { text-align: right !important; }
  body[data-layout="matchbook"] .soccer-tl .bf-tl-team.away { text-align: left !important; }
  body[data-layout="matchbook"] .soccer-tl .bf-tl-score {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }
  body[data-layout="matchbook"] .scorebar .sb-name {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  body[data-layout="matchbook"] .market-card,
  body[data-layout="matchbook"] .market-condensed {
    border-radius: 12px !important;
    border: 1px solid var(--bx3-line) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    background: var(--bx3-card) !important;
    box-shadow: none !important;
  }
  body[data-layout="matchbook"] .market-card-hd,
  body[data-layout="matchbook"] .market-condensed-hd {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    background: var(--bx3-card) !important;
    color: var(--bx3-text) !important;
  }
  body[data-layout="matchbook"] .feature-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: #f6f8fa !important;
    border-bottom: 1px solid var(--bx3-line) !important;
  }
  body[data-layout="matchbook"] .feature-bar::-webkit-scrollbar { display: none !important; }
  body[data-layout="matchbook"] .feature-bar .fb-item,
  body[data-layout="matchbook"] .feature-bar button { flex: 0 0 auto !important; }
  body[data-layout="matchbook"] .col-header-row {
    background: #f6f8fa !important;
    border-bottom: 1px solid var(--bx3-line) !important;
  }
  body[data-layout="matchbook"] .back-all-btn {
    background: var(--bx3-back) !important;
    color: #08111a !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
  }
  body[data-layout="matchbook"] .lay-all-btn {
    background: var(--bx3-lay) !important;
    color: #08111a !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
  }
  body[data-layout="matchbook"] .runner-row {
    min-height: 58px !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #edf1f5 !important;
  }
  body[data-layout="matchbook"] .runner-name-cell .runner-label {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  body[data-layout="matchbook"] .runner-pl { font-size: 11px !important; }
  body[data-layout="matchbook"] .depth-cell {
    min-height: 50px !important;
    height: 50px !important;
    border-radius: 9px !important;
    margin: 2px 2px !important;
  }
  body[data-layout="matchbook"] .depth-cell.back-1 { background: var(--bx3-back) !important; }
  body[data-layout="matchbook"] .depth-cell.lay-1 { background: var(--bx3-lay) !important; }
  body[data-layout="matchbook"] .depth-cell.back-1:active { background: var(--bx3-back-strong) !important; }
  body[data-layout="matchbook"] .depth-cell.lay-1:active { background: var(--bx3-lay-strong) !important; }
  body[data-layout="matchbook"] .depth-cell .d-price { font-size: 15px !important; font-weight: 900 !important; }
  body[data-layout="matchbook"] .depth-cell .d-size { font-size: 9.5px !important; }
  body[data-layout="matchbook"] .cm-price-cell { height: 48px !important; border-radius: 8px !important; }
  body[data-layout="matchbook"] .cm-price-cell .cm-back { background: var(--bx3-back) !important; }
  body[data-layout="matchbook"] .cm-price-cell .cm-lay { background: var(--bx3-lay) !important; }
  body[data-layout="matchbook"] .cm-row { min-height: 52px !important; }
  body[data-layout="matchbook"] .cm-name { font-size: 13px !important; font-weight: 700 !important; }
  body[data-layout="matchbook"] .other-tabs {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    background: var(--bx3-paper) !important;
  }
  body[data-layout="matchbook"] .other-tabs::-webkit-scrollbar { display: none !important; }
  body[data-layout="matchbook"] .ot-tab {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bx3-line) !important;
    background: var(--bx3-card) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  body[data-layout="matchbook"] .ot-tab.active {
    background: var(--bx3-ink-2) !important;
    color: var(--bx3-lime) !important;
    border-color: var(--bx3-ink-2) !important;
  }
  body[data-layout="matchbook"] .mkt-suspended::after,
  body[data-layout="matchbook"] .suspended-overlay {
    background: rgba(255, 255, 255, .88) !important;
    color: var(--bx3-ink) !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
  }

  /* ── 7. betslip bottom sheet ───────────────────────────────── */
  body[data-layout="matchbook"] .sidebar-right {
    height: auto !important;
    max-height: min(88dvh, 760px) !important;
    border-radius: 18px 18px 0 0 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .35) !important;
    overflow: hidden !important;
  }
  body[data-layout="matchbook"] .mob-sheet-hd {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 14px 14px 10px !important;
    background: var(--bx3-ink-2) !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }
  body[data-layout="matchbook"] .mob-sheet-grab {
    top: 6px !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, .35) !important;
  }
  body[data-layout="matchbook"] .mob-sheet-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-top: 4px !important;
  }
  body[data-layout="matchbook"] .mob-sheet-close {
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    font-size: 16px !important;
  }
  body[data-layout="matchbook"] .betslip { background: #fff !important; }
  /* Two honest tabs. The desktop skin fakes a third "Bet Desk/Place Bets" tab
     with ::before and swaps labels via font-size:0 — undo all of that here. */
  body[data-layout="matchbook"] .betslip-tabs {
    display: flex !important;
    height: 48px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--bx3-line) !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  body[data-layout="matchbook"] .betslip-tabs::before {
    content: none !important;
    display: none !important;
  }
  body[data-layout="matchbook"] .betslip-tabs .bet-tab {
    flex: 1 1 0 !important;
    min-height: 48px !important;
    padding: 0 6px !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    color: var(--bx3-text-2) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
  }
  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="betslip"]::before,
  body[data-layout="matchbook"] .betslip-tabs .bet-tab[data-tab="openBets"]::before {
    content: none !important;
    display: none !important;
  }
  body[data-layout="matchbook"] .betslip-tabs .bet-tab.active {
    color: var(--bx3-text) !important;
    border-bottom-color: var(--bx3-lime) !important;
    background: #fff !important;
  }
  body[data-layout="matchbook"] .betslip-col-hd { display: none !important; }
  body[data-layout="matchbook"] .betslip-market-name {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    background: #fff !important;
    color: var(--bx3-text) !important;
    border-bottom: 1px solid #eef1f5 !important;
  }
  body[data-layout="matchbook"] .betslip-body { background: #fff !important; padding: 4px 0 8px !important; }
  body[data-layout="matchbook"] .betslip-empty {
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 20px !important;
    text-align: center !important;
    color: var(--bx3-text-2) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  /* Back/Lay groups keep the exchange colour code. Column labels don't match
     the stacked mobile card layout, so only the side label survives. */
  body[data-layout="matchbook"] .bx-hd {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }
  body[data-layout="matchbook"] .bx-hd .bx-hd-odds,
  body[data-layout="matchbook"] .bx-hd .bx-hd-stake,
  body[data-layout="matchbook"] .bx-hd .bx-hd-out { display: none !important; }
  body[data-layout="matchbook"] .bx-hd.back { background: #e3f1fc !important; color: #0b5394 !important; }
  body[data-layout="matchbook"] .bx-hd.lay { background: #fdeaef !important; color: #a92c50 !important; }
  body[data-layout="matchbook"] .bx-sel {
    margin: 8px 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fbfcfd !important;
  }
  body[data-layout="matchbook"] .bx-sel.back { border-left: 4px solid var(--bx3-back-strong) !important; }
  body[data-layout="matchbook"] .bx-sel.lay { border-left: 4px solid var(--bx3-lay-strong) !important; }
  /* Selection card: line 1 = remove + selection name; line 2 = odds (with
     hold-to-repeat steppers) | stake | payout. Everything ≥44px effective. */
  body[data-layout="matchbook"] .bx-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(56px, auto) !important;
    gap: 8px !important;
    align-items: center !important;
  }
  body[data-layout="matchbook"] .bx-c-side {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  body[data-layout="matchbook"] .bx-name {
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bx3-text) !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  body[data-layout="matchbook"] .bx-x {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    color: var(--bx3-text-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
  /* Odds + stake + output on one comfortable control line */
  body[data-layout="matchbook"] .bx-c-odds,
  body[data-layout="matchbook"] .bx-c-stake,
  body[data-layout="matchbook"] .bx-c-out {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  body[data-layout="matchbook"] .bx-c-out { justify-content: flex-end !important; }
  body[data-layout="matchbook"] .bf-odds-inp,
  body[data-layout="matchbook"] .bf-sel-stake {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--bx3-line) !important;
    background: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: var(--bx3-text) !important;
    padding: 0 4px !important;
  }
  body[data-layout="matchbook"] .bf-sel-stake:focus,
  body[data-layout="matchbook"] .bf-odds-inp:focus {
    border-color: var(--bx3-lime) !important;
    outline: none !important;
  }
  /* Odds steppers: slim vertical pair flanking the input, hold-to-repeat */
  body[data-layout="matchbook"] .bx-odds-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
  }
  body[data-layout="matchbook"] .bx-odds-steps button {
    width: 36px !important;
    height: 23px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #f2f5f8 !important;
    color: var(--bx3-text) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body[data-layout="matchbook"] .step-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #f2f5f8 !important;
    color: var(--bx3-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .bx-out-val {
    font-size: 15px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .bx-quick,
  body[data-layout="matchbook"] .quick-stakes {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  body[data-layout="matchbook"] .bx-quick button,
  body[data-layout="matchbook"] .quick-stakes button,
  body[data-layout="matchbook"] button.bfqs {
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bx3-text) !important;
  }
  body[data-layout="matchbook"] .bx-quick button:active,
  body[data-layout="matchbook"] button.bfqs:active {
    background: rgba(137, 230, 0, .18) !important;
    border-color: var(--bx3-lime) !important;
  }
  body[data-layout="matchbook"] .bx-liab-total {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .betslip-footer {
    background: #f6f8fa !important;
    border-top: 1px solid var(--bx3-line) !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-layout="matchbook"] .bf-footer-actions {
    display: grid !important;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr) !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .bf-cancel-all {
    min-height: 50px !important;
    border-radius: 12px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    color: var(--bx3-text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: normal !important;
  }
  body[data-layout="matchbook"] .btn-place,
  body[data-layout="matchbook"] #btnPlace {
    min-height: 50px !important;
    border-radius: 12px !important;
    background: var(--bx3-lime) !important;
    color: var(--bx3-lime-ink) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .btn-place:disabled,
  body[data-layout="matchbook"] #btnPlace:disabled {
    background: #cdd6de !important;
    color: #7a8794 !important;
  }
  body[data-layout="matchbook"] .betslip-options { gap: 10px !important; padding-top: 8px !important; }
  body[data-layout="matchbook"] .bs-opt { font-size: 12px !important; color: var(--bx3-text-2) !important; }
  body[data-layout="matchbook"] .bs-opt input { width: 18px; height: 18px; accent-color: var(--bx3-lime); }

  /* Inline quick-bet bar (odds tapped from a list view) */
  body[data-layout="matchbook"] .inline-qb-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, 118px) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: #f4f8ee !important;
    border: 1px solid rgba(137, 230, 0, .5) !important;
  }
  body[data-layout="matchbook"] .iqb-info {
    grid-column: 1 / 2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  body[data-layout="matchbook"] .iqb-label {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }
  body[data-layout="matchbook"] .iqb-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--bx3-text-2) !important;
  }
  body[data-layout="matchbook"] .iqb-cancel {
    grid-column: 2 / 3 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .iqb-stepper {
    grid-column: 1 / 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  body[data-layout="matchbook"] .iqb-stepper button {
    width: 44px !important;
    height: 46px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .iqb-stake { grid-column: 2 / 3 !important; }
  body[data-layout="matchbook"] .inline-qb-row input {
    width: 100% !important;
    min-width: 74px !important;
    height: 46px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--bx3-line) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    background: #fff !important;
  }
  body[data-layout="matchbook"] .iqb-quick-stakes {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .iqb-quick-stakes button {
    min-height: 40px !important;
    border-radius: 9px !important;
    border: 1px solid var(--bx3-line) !important;
    background: #fff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 0 2px !important;
  }
  body[data-layout="matchbook"] .iqb-place {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    background: var(--bx3-lime) !important;
    color: var(--bx3-lime-ink) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 0 !important;
  }

  /* ── 8. account panel + drawer + bottom nav ────────────────── */
  body[data-layout="matchbook"] .topbar-right {
    background: var(--bx3-ink-2) !important;
    border: 1px solid rgba(137, 230, 0, .3) !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    color: #fff !important;
    /* spread-shadow dim: guarantees the scrim regardless of stacking contexts */
    box-shadow: 0 0 0 100vmax rgba(5, 10, 16, .6), 0 18px 50px rgba(0, 0, 0, .5) !important;
  }
  body[data-layout="matchbook"] .auth-fields input {
    height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: var(--bx3-ink-3) !important;
    color: #fff !important;
    font-size: 16px !important;
    padding: 0 12px !important;
  }
  body[data-layout="matchbook"] .auth-fields input::placeholder { color: rgba(255, 255, 255, .4); }
  body[data-layout="matchbook"] .pw-eye { color: rgba(255, 255, 255, .6) !important; }
  body[data-layout="matchbook"] .topbar-right .btn-login {
    height: 48px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .topbar-right .btn-join {
    height: 48px !important;
    border-radius: 10px !important;
    background: var(--bx3-lime) !important;
    color: var(--bx3-lime-ink) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 0 !important;
  }
  body[data-layout="matchbook"] .user-chip,
  body[data-layout="matchbook"] .wallet-chip {
    background: rgba(255, 255, 255, .07) !important;
    border-radius: 10px !important;
    color: #fff !important;
    min-height: 44px !important;
  }
  body[data-layout="matchbook"] .wallet-bal { color: var(--bx3-lime) !important; font-weight: 900 !important; }
  body[data-layout="matchbook"] .wallet-exp { color: #f3b7c6 !important; }
  body[data-layout="matchbook"] .lang-switcher { gap: 14px !important; }
  body[data-layout="matchbook"] .lang-btn { opacity: 1 !important; }
  body[data-layout="matchbook"] .theme-toggle { color: #fff !important; }

  /* Drawer open/close via display toggle: the transform/left transition path
     showed style-invalidation flip-flops with this very large stylesheet
     (drawer reported open but painted closed). A display toggle always forces
     a full layout+paint, so it can't desync; the backdrop still fades. */
  body[data-layout="matchbook"] .sidebar-left {
    transform: none !important;
    transition: none !important;
    left: 0 !important;
    display: none !important;
  }
  body[data-layout="matchbook"].mob-menu-open .sidebar-left { display: block !important; }
  body[data-layout="matchbook"].mob-betslip-open .sidebar-right { transform: translateY(0) !important; }

  /* Sports drawer: one coherent dark tree (no white sub-panels) */
  body[data-layout="matchbook"] .sidebar-left {
    width: min(86vw, 320px) !important;
    background: #141c26 !important;
    color: #e8eef4 !important;
    border-right: 3px solid var(--bx3-lime) !important;
    padding: 10px 0 90px !important;
  }
  body[data-layout="matchbook"] .sidebar-section-label {
    padding: 10px 14px 6px !important;
    color: var(--bx3-lime) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
  }
  body[data-layout="matchbook"] .my-markets {
    min-height: 48px !important;
    padding: 0 14px !important;
    background: transparent !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    font-weight: 800 !important;
  }
  body[data-layout="matchbook"] .my-markets .my-star { color: var(--bx3-lime) !important; }
  body[data-layout="matchbook"] .sports-list li,
  body[data-layout="matchbook"] .sport-item-row {
    min-height: 48px !important;
    color: #e8eef4 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  body[data-layout="matchbook"] .sport-item-row { padding: 0 14px !important; }
  body[data-layout="matchbook"] .sport-item-row:active { background: rgba(137, 230, 0, .12) !important; }
  body[data-layout="matchbook"] .badge-live {
    background: var(--bx3-live) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
  }
  body[data-layout="matchbook"] .sport-submenu,
  body[data-layout="matchbook"] .sport-submenu li,
  body[data-layout="matchbook"] .sport-submenu a,
  body[data-layout="matchbook"] .sport-comp-item {
    background: #10161e !important;
    color: #cfd9e3 !important;
    border-color: rgba(255, 255, 255, .05) !important;
  }
  body[data-layout="matchbook"] .sport-submenu .sport-comp-item,
  body[data-layout="matchbook"] .sport-submenu li {
    min-height: 46px !important;
    font-size: 13.5px !important;
  }
  body[data-layout="matchbook"] .sport-submenu li:active { background: rgba(137, 230, 0, .1) !important; }
  body[data-layout="matchbook"] .breadcrumb-tree,
  body[data-layout="matchbook"] .breadcrumb-tree li {
    background: transparent !important;
    color: #e8eef4 !important;
  }
  body[data-layout="matchbook"] .market-check-list li {
    min-height: 46px !important;
    background: transparent !important;
    color: #dbe4ec !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    font-size: 13.5px !important;
  }
  body[data-layout="matchbook"] .market-check-list input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--bx3-lime) !important;
  }

  /* Bottom navigation: dark bar, lime active, red betslip badge */
  body[data-layout="matchbook"] .mob-bottomnav {
    height: 58px !important;
    background: rgba(15, 21, 29, .98) !important;
    border-top: 1px solid rgba(255, 255, 255, .09) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  body[data-layout="matchbook"] .mob-nav-btn {
    color: rgba(255, 255, 255, .6) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    gap: 4px !important;
  }
  body[data-layout="matchbook"] .mob-nav-btn i { font-size: 19px !important; }
  body[data-layout="matchbook"] .mob-nav-btn.active { color: var(--bx3-lime) !important; background: transparent !important; }
  body[data-layout="matchbook"] .mob-nav-btn:active { background: rgba(255, 255, 255, .07) !important; }
  body[data-layout="matchbook"] .mob-bet-badge {
    background: var(--bx3-danger) !important;
    color: #fff !important;
    border: 2px solid #0f151d !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
  }

  /* ── 9. modals ─────────────────────────────────────────────── */
  body[data-layout="matchbook"] .auth-box,
  body[data-layout="matchbook"] .ui-confirm,
  body[data-layout="matchbook"] .ladder-box,
  body[data-layout="matchbook"] .stmt-box,
  body[data-layout="matchbook"] .bf-dropdown-mobile {
    max-width: min(440px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body[data-layout="matchbook"] .auth-box input {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  body[data-layout="matchbook"] .auth-submit {
    min-height: 50px !important;
    border-radius: 10px !important;
    background: var(--bx3-lime) !important;
    color: var(--bx3-lime-ink) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }
  body[data-layout="matchbook"] .ui-confirm .ui-confirm-actions button { min-height: 48px !important; border-radius: 10px !important; }
  body[data-layout="matchbook"] .ladder-row { min-height: 44px !important; }
  body[data-layout="matchbook"] input,
  body[data-layout="matchbook"] select,
  body[data-layout="matchbook"] textarea { font-size: 16px; }

  /* ── 10. states ────────────────────────────────────────────── */
  body[data-layout="matchbook"] .skeleton-card {
    border-radius: 12px !important;
    margin: 8px !important;
    background: var(--bx3-card) !important;
    border: 1px solid var(--bx3-line) !important;
  }
  body[data-layout="matchbook"] .empty-state,
  body[data-layout="matchbook"] .no-events {
    padding: 28px 16px !important;
    text-align: center !important;
    color: var(--bx3-text-2) !important;
    font-size: 14px !important;
  }
  body[data-layout="matchbook"] .match-notif {
    left: 8px !important;
    right: 8px !important;
    max-width: none !important;
    border-radius: 12px !important;
  }
}

/* ── Small phones (≤430px): tighten the odds line ── */
@media (max-width: 430px) {
  body[data-layout="matchbook"] { --bx3-cell-h: 50px; }
  body[data-layout="matchbook"] .price-cell .price { font-size: 14px !important; }
  body[data-layout="matchbook"] .xp-title { font-size: 22px !important; }
  body[data-layout="matchbook"] .brand-plate { max-width: 150px !important; }
  body[data-layout="matchbook"] .brand-logo { max-width: 145px !important; height: 27px !important; max-height: 27px !important; }
}

/* ── Small phones (≤400px): mirror the base 50px odds columns (the ≤860
   re-assertions above are !important, so the base shrink needs restating) ── */
@media (max-width: 400px) {
  body[data-layout="matchbook"] .event-row,
  body[data-layout="matchbook"] .sub-group-hd,
  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .mkt-lbl-row {
    grid-template-columns: minmax(0, 1fr) 50px 50px 50px 20px !important;
  }
  body[data-layout="matchbook"] .event-row:has(.price-cell.no-runner),
  body[data-layout="matchbook"] .sub-group-hd.two-way,
  body[data-layout="matchbook"] .mkt-lbl-row.two-way {
    grid-template-columns: minmax(0, 1fr) 50px 0 50px 20px !important;
  }
  body[data-layout="matchbook"] .price-cell .price { font-size: 12.5px !important; }
  body[data-layout="matchbook"] .price-cell .size { font-size: 8.5px !important; }
}

/* ── Extra small (≤360px): icon logo, 2 selections per line stay readable ── */
@media (max-width: 360px) {
  body[data-layout="matchbook"] .event-row,
  body[data-layout="matchbook"] .sub-group-hd,
  body[data-layout="matchbook"] .sub-group-hd.three-way,
  body[data-layout="matchbook"] .mkt-lbl-row {
    grid-template-columns: minmax(0, 1fr) 46px 46px 46px 18px !important;
  }
  body[data-layout="matchbook"] .event-row:has(.price-cell.no-runner),
  body[data-layout="matchbook"] .sub-group-hd.two-way,
  body[data-layout="matchbook"] .mkt-lbl-row.two-way {
    grid-template-columns: minmax(0, 1fr) 46px 0 46px 18px !important;
  }
  body[data-layout="matchbook"] { --bx3-cell-h: 48px; }
  body[data-layout="matchbook"] .brand-plate {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body[data-layout="matchbook"] .brand-logo {
    content: url("/assets/betxchange-icon-white-green.svg") !important;
    width: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
  body[data-layout="matchbook"] .price-cell .price { font-size: 12.5px !important; }
  body[data-layout="matchbook"] .price-cell .size { font-size: 8.5px !important; }
  body[data-layout="matchbook"] .event-name { font-size: 13px !important; }
  body[data-layout="matchbook"] .xp-sports { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body[data-layout="matchbook"] .bf-footer-actions { grid-template-columns: 1fr !important; }
}

/* ── Tablet portrait (561–860px): breathe, cap coupon width ── */
@media (min-width: 561px) and (max-width: 860px) {
  body[data-layout="matchbook"] .market-groups,
  body[data-layout="matchbook"] #eventDetailView,
  body[data-layout="matchbook"] .list-header {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-layout="matchbook"] .xp-hub {
    max-width: 704px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-layout="matchbook"] .xp-sports { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* ── DESKTOP fix: the list score badge clipped its content (max-width 84px +
   overflow hidden → tennis game points cut to half digits). Let the badge size
   to its content and keep the digits spaced. Scoped to the desktop range so the
   mobile compact badge above is untouched. ── */
@media (min-width: 861px) {
  body[data-layout="matchbook"] .event-namewrap .score-badge,
  body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body[data-layout="matchbook"] .event-namewrap .score-badge .sc-rows,
  body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge .sc-rows {
    min-width: 0 !important;
    max-width: none !important;
  }
  body[data-layout="matchbook"] .event-namewrap .score-badge .sc-r,
  body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge .sc-r {
    gap: 4px !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  body[data-layout="matchbook"] .event-namewrap .score-badge .sc-set,
  body[data-layout="matchbook"] .event-namewrap .score-badge .sc-p,
  body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge .sc-set,
  body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge .sc-p {
    min-width: 9px !important;
    text-align: center !important;
    overflow: visible !important;
  }
}

/* == Antepost / Outrights ================================================== */
.outright-menu-item { border-bottom: 1px solid var(--border); }
.outright-menu-item .outright-dot { color: var(--brand-green); }
.outright-group { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.outright-group-hd {
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  color: var(--text-1); background: var(--bg-light2);
  border-bottom: 1px solid var(--border);
}
.outright-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--white);
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.outright-row:last-child { border-bottom: none; }
.outright-row:hover { background: var(--bg-light); }
.outright-trophy { color: var(--brand-green); font-size: 14px; flex: 0 0 auto; }
.outright-info { flex: 1; min-width: 0; }
.outright-name { font-size: 13px; font-weight: 600; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outright-sub { font-size: 11px; color: var(--text-3); }
.outright-matched { font-size: 11px; font-weight: 600; color: var(--text-2); flex: 0 0 auto; }
.outright-caret { color: var(--text-3); font-size: 11px; flex: 0 0 auto; }

/* ── Matchbook live-score badge: never clip the result ───────────────────────
   All 5 data-score-style variants pinned the badge to a fixed width with a
   capped .sc-rows + overflow:hidden, sized for football/short scores. A tennis
   score deep in a 3rd set (per-set columns + current game points) overflowed and
   the rightmost cell — the live game points — got clipped ("...3 30" → "...3").
   Let the badge and its score column size to CONTENT instead. `html …` raises
   specificity above every per-style / per-breakpoint rule so this wins at all
   viewports without chasing each media query. */
html body[data-layout="matchbook"][data-score-style] .event-namewrap .score-badge {
  width: auto !important; max-width: none !important; flex: 0 0 auto !important; overflow: visible !important;
}
html body[data-layout="matchbook"][data-score-style] .score-badge .sc-rows {
  min-width: 0 !important; max-width: none !important; overflow: visible !important;
}
html body[data-layout="matchbook"][data-score-style="1"] .event-namewrap .score-badge {
  grid-template-columns: 39px auto !important;   /* style 1 is a grid — let the score column grow */
}

/* ── HOME HERO v2 (image banner) — final overrides ─────────────────────────
   Placed at EOF so they win over the Typography System layer (which forces
   .hl-hero-title to font-weight:700). The hero headline wants the heavier cut. */
.hl-hero .hl-hero-title { font-weight: 900 !important; }
/* On phones the hero stacks vertically: strengthen the dark scrim so the text
   stays readable over the bright (right) side of the stadium image. */
@media (max-width: 640px) {
  .hl-hero {
    min-height: 0;
    padding: 22px 18px 24px;
    background:
      linear-gradient(180deg, rgba(8,11,17,.93) 0%, rgba(8,11,17,.78) 55%, rgba(8,11,17,.55) 100%),
      url("/assets/exfair-stadium-hero.webp") 72% center / cover no-repeat,
      #0c0f14;
  }
  .hl-hero-main { max-width: none; }
}

/* ── EXFAIR24 (layout betfair) — VARIANTI BADGE PUNTEGGIO LIVE 1–5 ────────────
   Anteprima con ?scoreStyle=N (app.js stampa data-score-style sul <body>, default
   "1"). Scoped :not([data-layout="matchbook"]) così le varianti della skin
   matchbook restano intatte. Il markup è condiviso: .sc-min (minuto/label) +
   .sc-rows (2 righe punteggio allineate ai nomi impilati). */

/* V1 — "Classic Pro": l'attuale rifinita (chip scuro, pill minuto verde) */
body:not([data-layout="matchbook"])[data-score-style="1"] .score-badge {
  background: #171c24; border: 1px solid #2c3542; border-radius: 6px;
  padding: 3px 7px 3px 3px; gap: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
body:not([data-layout="matchbook"])[data-score-style="1"] .score-badge .sc-min {
  background: linear-gradient(180deg, #26b365, #1f9d57); border-radius: 4px;
  font-size: 10px; min-width: 26px; padding: 2px 5px;
}
body:not([data-layout="matchbook"])[data-score-style="1"] .score-badge .sc-p { color: #35d97e; }
body:not([data-layout="matchbook"])[data-score-style="1"] .score-badge .sc-set { color: #9aa3b1; }

/* V2 — "Gold Brand": accento oro exfair24 (pill minuto gialla, bordo oro) */
body:not([data-layout="matchbook"])[data-score-style="2"] .score-badge {
  background: #12161d; border: 1px solid #2c3542; border-left: 3px solid var(--brand-yellow, #ffb80c);
  border-radius: 5px; padding: 3px 8px 3px 5px; gap: 7px;
}
body:not([data-layout="matchbook"])[data-score-style="2"] .score-badge .sc-min {
  background: var(--brand-yellow, #ffb80c); color: #15181c; font-weight: 800;
  border-radius: 3px; font-size: 10px; min-width: 26px;
}
body:not([data-layout="matchbook"])[data-score-style="2"] .score-badge .sc-p { color: #fff; }
body:not([data-layout="matchbook"])[data-score-style="2"] .score-badge .sc-set { color: #9aa3b1; }
body:not([data-layout="matchbook"])[data-score-style="2"] .score-badge .sc-set.cur { color: var(--brand-yellow, #ffb80c); }

/* V3 — "Ghost": minimale trasparente, si adatta al tema (chiaro/scuro) */
body:not([data-layout="matchbook"])[data-score-style="3"] .score-badge {
  background: transparent; border: 1px solid var(--border, #d7dbe0); border-radius: 6px;
  padding: 2px 8px 2px 0; gap: 7px;
}
body:not([data-layout="matchbook"])[data-score-style="3"] .score-badge .sc-min {
  background: transparent; color: var(--green, #1f9d57); font-weight: 800; font-size: 10.5px;
  border-radius: 0; border-right: 1px solid var(--border, #d7dbe0); padding: 1px 7px; min-width: 26px;
}
body:not([data-layout="matchbook"])[data-score-style="3"] .score-badge .sc-p { color: var(--green, #1f9d57); }
body:not([data-layout="matchbook"])[data-score-style="3"] .score-badge .sc-set { color: var(--text-3, #8a93a3); }
body:not([data-layout="matchbook"])[data-score-style="3"] .score-badge .sc-set.cur { color: var(--text-0, #1a1a1a); font-weight: 800; }

/* V4 — "Capsule": pillola bianca due-toni stile biglietto (minuto verde pieno) */
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge {
  background: #fff; border: 1px solid #cfd6de; border-radius: 999px; overflow: hidden;
  padding: 0; gap: 0; box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge .sc-min {
  background: linear-gradient(180deg, #26b365, #1f9d57); color: #fff; border-radius: 0;
  padding: 3px 9px; min-width: 30px; font-size: 10px;
}
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge .sc-rows { padding: 2px 10px 2px 8px; }
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge .sc-p { color: #0f7a41; }
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge .sc-set { color: #7c8695; }
body:not([data-layout="matchbook"])[data-score-style="4"] .score-badge .sc-set.cur { color: #c98d00; font-weight: 800; }

/* V5 — "LED": tabellone luminoso (cifre verde-LED, minuto ambra con glow) */
body:not([data-layout="matchbook"])[data-score-style="5"] .score-badge {
  background: #0a0e0c; border: 1px solid #21301f; border-radius: 5px;
  padding: 3px 8px; gap: 8px; box-shadow: inset 0 0 10px rgba(0,255,120,.07);
}
body:not([data-layout="matchbook"])[data-score-style="5"] .score-badge .sc-min {
  background: transparent; color: var(--brand-yellow, #ffb80c);
  border: 1px solid rgba(255,184,12,.45); border-radius: 3px; padding: 1px 5px; min-width: 26px;
  font-size: 10px; text-shadow: 0 0 6px rgba(255,184,12,.55);
}
body:not([data-layout="matchbook"])[data-score-style="5"] .score-badge .sc-p { color: #39ff8e; text-shadow: 0 0 7px rgba(57,255,142,.55); }
body:not([data-layout="matchbook"])[data-score-style="5"] .score-badge .sc-set { color: #5b8570; }
body:not([data-layout="matchbook"])[data-score-style="5"] .score-badge .sc-set.cur { color: #aef7cd; font-weight: 800; }

/* ── Hero home: statistiche SEMPRE sotto la CTA (colonna a sinistra), mai a
   destra sopra la foto — su schermi larghi il flex-row le portava al centro
   dell'immagine. Solo layout betfair; matchbook ha il suo hero. */
body:not([data-layout="matchbook"]) .hl-hero {
  flex-direction: column; align-items: flex-start; justify-content: center;
}
body:not([data-layout="matchbook"]) .hl-hero .hl-stats { margin-top: 2px; }
/* Hero home piu' alto (richiesta 17/07): da 224px a ~320px di presenza. */
body:not([data-layout="matchbook"]) .hl-hero { min-height: 320px; padding: 44px 36px; }

/* ================================================================== */
/* HOME HERO — 5 varianti selezionabili via ?heroStyle=1..5           */
/* (data-hero-style sul body; "1" = variante attuale, nessun override) */
/* ================================================================== */

/* V2 — "Cinematica": immagine full-bleed centrata, testo e CTA al centro */
body[data-hero-style="2"] .hl-hero {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 300px; padding: 42px 32px;
  background:
    linear-gradient(180deg, rgba(8,11,17,.50) 0%, rgba(8,11,17,.68) 55%, rgba(8,11,17,.94) 100%),
    url("/assets/exfair-stadium-hero.webp") center 32% / cover no-repeat,
    #0c0f14;
}
body[data-hero-style="2"] .hl-hero-main { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
body[data-hero-style="2"] .hl-hero-title { font-size: 42px; }
body[data-hero-style="2"] .hl-hero-sub { max-width: 62ch; }
body[data-hero-style="2"] .hl-cta { justify-content: center; }
body[data-hero-style="2"] .hl-stats { margin-top: 4px; }

/* V3 — "Split netto": pannello scuro pieno a sinistra, foto solo a destra
   con taglio diagonale; barra oro verticale sul bordo sinistro */
body[data-hero-style="3"] .hl-hero {
  background:
    linear-gradient(102deg,
      #0b0e14 0%, #0b0e14 46%,
      var(--brand-yellow, #ffb80c) 46%, var(--brand-yellow, #ffb80c) calc(46% + 4px),
      rgba(11,14,20,.28) calc(46% + 4px), rgba(11,14,20,.05) 70%),
    url("/assets/exfair-stadium-hero.webp") right 40% / cover no-repeat,
    #0b0e14;
  border-radius: 12px;
}
body[data-hero-style="3"] .hl-hero::after {
  left: 0; top: 0; bottom: 0; right: auto; width: 4px; height: auto;
  background: linear-gradient(180deg, var(--brand-yellow, #ffb80c), rgba(255,184,12,.15));
}
body[data-hero-style="3"] .hl-hero-main { padding-left: 8px; }

/* V4 — "Duotone oro": foto in bianco/nero virata oro brand, molto premium */
body[data-hero-style="4"] .hl-hero { background: #0d0a04; }
body[data-hero-style="4"] .hl-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,10,4,.94) 0%, rgba(13,10,4,.55) 50%, rgba(13,10,4,.28) 100%),
    url("/assets/exfair-stadium-hero.webp") right center / cover no-repeat;
  filter: grayscale(1) contrast(1.06) brightness(.82) sepia(.95) saturate(2.4) hue-rotate(-10deg);
}
body[data-hero-style="4"] .hl-hero::after {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-yellow, #ffb80c), rgba(255,184,12,.35) 60%, transparent);
  z-index: 1;
}

/* V5 — "Strip compatta": banner basso, foto come texture scura di fondo,
   filo oro sul bordo superiore — massimo spazio alle quote sotto */
body[data-hero-style="5"] .hl-hero {
  min-height: 0; padding: 18px 26px;
  background:
    linear-gradient(90deg, rgba(8,11,17,.96) 0%, rgba(8,11,17,.86) 55%, rgba(8,11,17,.68) 100%),
    url("/assets/exfair-stadium-hero.webp") center 28% / cover no-repeat,
    #0c0f14;
}
body[data-hero-style="5"] .hl-hero::after {
  top: 0; bottom: auto; height: 2px;
  background: linear-gradient(90deg, var(--brand-yellow, #ffb80c), rgba(255,184,12,.25) 55%, transparent);
}
body[data-hero-style="5"] .hl-kicker { margin-bottom: 6px; }
body[data-hero-style="5"] .hl-hero-title { font-size: 24px; }
body[data-hero-style="5"] .hl-hero-sub { margin-top: 5px; font-size: 12.5px; }
body[data-hero-style="5"] .hl-cta { margin-top: 12px; }
body[data-hero-style="5"] .hl-btn { padding: 8px 15px; font-size: 12.5px; border-radius: 8px; }
body[data-hero-style="5"] .hl-stat { min-width: 84px; padding: 9px 12px; border-radius: 10px; }
body[data-hero-style="5"] .hl-stat b { font-size: 20px; }

/* ── EXFAIR24 (layout betfair) — BADGE PUNTEGGIO LIVE DEFINITIVO: "Green block"
   (variante V14 scelta dall'utente 2026-07-17, resa in verde): blocco verde pieno,
   linguetta scura per minuto/set, cifre bianche. Override EOF: vince sulle varianti
   ?scoreStyle 1-5 sopra (doppio selettore con/senza [data-score-style] perche' le
   regole variante hanno specificita' (0,4,1) e il body porta sempre l'attributo). */
html body:not([data-layout="matchbook"]) .score-badge,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge {
  background: var(--green, #1f9d57); border: none; border-radius: 6px;
  overflow: hidden; padding: 0; gap: 0; box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
html body:not([data-layout="matchbook"]) .score-badge .sc-min,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge .sc-min {
  background: #15181c; color: #35d97e; font-weight: 800;
  border-radius: 0; border: none; padding: 2px 7px; min-width: 26px; font-size: 10px;
  text-shadow: none;
}
html body:not([data-layout="matchbook"]) .score-badge .sc-rows,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge .sc-rows {
  padding: 2px 8px; gap: 1px;
}
html body:not([data-layout="matchbook"]) .score-badge .sc-p,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge .sc-p {
  color: #fff; text-shadow: none;
}
html body:not([data-layout="matchbook"]) .score-badge .sc-set,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge .sc-set {
  color: rgba(255,255,255,.6);
}
html body:not([data-layout="matchbook"]) .score-badge .sc-set.cur,
html body:not([data-layout="matchbook"])[data-score-style] .score-badge .sc-set.cur {
  color: #fff; font-weight: 800;
}

/* ── EXFAIR24: tag IN-PLAY a sinistra dei nomi quando manca il punteggio live ──
   (2026-07-17) Il tag occupa lo slot del badge punteggio cosi' le righe live senza
   score restano allineate a quelle con score; sparisce appena arriva il punteggio
   (applyEventScore toggla .has-score sulla riga). Solo layout betfair. */
body:not([data-layout="matchbook"]) .event-namewrap .live-left { flex: 0 0 auto; display: inline-flex; }
body:not([data-layout="matchbook"]) .event-row.has-score .live-left { display: none; }

/* (ritocco 2026-07-17) IN-PLAY a sinistra piu' alto: stessa altezza del badge
   punteggio a due righe, cosi' i due slot si equivalgono visivamente. */
body:not([data-layout="matchbook"]) .event-namewrap .live-left .event-tag {
  min-height: 34px; padding: 0 7px; border-radius: 6px; box-sizing: border-box;
}

/* ─── RESTORED 2026-07-19: hero + sport-bg + mb-ticket ─── */
.mb-ticket { font-family: monospace; font-weight: 900 !important; color: #1e293b; font-size: 12px; letter-spacing: .2px; }
body.dark .mb-ticket { color: var(--brand-green); }
/* Hero home: statistiche sotto la CTA, banner 320px (solo betfair) */
body:not([data-layout="matchbook"]) .hl-hero {
  flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 320px; padding: 44px 36px;
}
body:not([data-layout="matchbook"]) .hl-hero .hl-stats { margin-top: 2px; }
/* SPORT-BG: sfondo header per-sport (data-sport = Betfair eventTypeId) */
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="1"] {
  background:
    linear-gradient(180deg, rgba(10,13,18,.80) 0%, rgba(10,13,18,.70) 45%, rgba(10,13,18,.88) 100%),
    url("/assets/evbg-soccer.webp") center 30% / cover no-repeat,
    #16181c;
}
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="2"] {
  background:
    linear-gradient(180deg, rgba(10,13,18,.68) 0%, rgba(10,13,18,.52) 45%, rgba(10,13,18,.80) 100%),
    url("/assets/evbg-tennis.webp") center 45% / cover no-repeat,
    #16181c;
}
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="7522"] {
  background:
    linear-gradient(180deg, rgba(10,13,18,.68) 0%, rgba(10,13,18,.52) 45%, rgba(10,13,18,.80) 100%),
    url("/assets/evbg-basket.webp") center 40% / cover no-repeat,
    #16181c;
}
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="1"] .scorebar,
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="2"] .scorebar,
body:not([data-layout="matchbook"]) .event-detail-header[data-sport="7522"] .scorebar {
  background: transparent; border: none; box-shadow: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
body:not([data-layout="matchbook"]) #myBetsView td.mb-ticket {
  color: #1e293b !important; font-weight: 900 !important;
  font-family: ui-monospace, "Consolas", "Menlo", "Courier New", monospace !important;
}
body.dark:not([data-layout="matchbook"]) #myBetsView td.mb-ticket { color: #ffb80c !important; }

/* ═══════════ LOGIN GATE — mascherina a schermo intero (il sito non appare da sloggati) ═══════════ */
body.gate-open{overflow:hidden}
#loginGate{position:fixed;inset:0;z-index:100000;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:32px 18px;
  background:linear-gradient(180deg,rgba(6,16,12,.42) 0%,rgba(6,16,12,.62) 60%,rgba(5,13,10,.82) 100%),
             url('/assets/exfair-stadium-hero.webp') center/cover no-repeat #0a1f16}
#loginGate.lg-off{display:none}
/* Il banner stadio sostituisce il finto book sfocato */
.lg-behind{display:none}
.lg-scrim{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(7,26,18,0) 0%,rgba(7,26,18,.55) 100%)}
.lg-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:410px;
  animation:lgRise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes lgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lg-stack{animation:none}}
.lg-card{width:100%;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.04)}
.lg-hd{background:linear-gradient(180deg,#ffc22e,#ffb80c);border-bottom:1px solid #e0a300;
  padding:22px 26px;display:flex;align-items:center;justify-content:center}
.lg-logo{display:block;width:210px;max-width:78%;height:auto}
.lg-bd{padding:26px 30px;text-align:center}
.lg-lock{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:#fff7e6;border:1px solid #f5e2b8;color:#e0a300;margin-bottom:12px;font-size:17px}
.lg-title{font-size:20px;font-weight:800;letter-spacing:-.2px;color:#16211c;margin:0}
.lg-sub{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#5a6a63}
#gateForm{margin-top:22px;display:flex;flex-direction:column;gap:15px;text-align:left}
.lg-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:#8a978f;margin-bottom:7px}
.lg-inp{position:relative}
.lg-inp>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#aeb8b2;pointer-events:none;font-size:14px}
.lg-inp input{width:100%;height:46px;border:1.5px solid #dbe3de;background:#f4f7f5;border-radius:10px;
  padding:0 42px;font-size:15px;color:#16211c;outline:none;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s,background .15s}
.lg-inp input::placeholder{color:#b3bdb7}
.lg-inp input:focus{border-color:#ffb80c;background:#fff;box-shadow:0 0 0 3px rgba(255,184,12,.18)}
.lg-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;
  background:transparent;color:#9aa49e;cursor:pointer;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.lg-eye:hover{color:#5a6a63;background:#eef2f0}
.lg-btn{height:48px;margin-top:3px;border:0;border-radius:10px;background:linear-gradient(180deg,#ffc22e,#ffb80c);
  color:#26210a;font-size:15.5px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:filter .15s,transform .05s;box-shadow:0 8px 20px -8px rgba(255,184,12,.7)}
.lg-btn:hover{filter:brightness(1.04)}
.lg-btn:active{transform:translateY(1px)}
.lg-foot{margin-top:20px;padding-top:16px;border-top:1px solid #e7ece9;text-align:center;
  font-size:12.5px;color:#5a6a63;line-height:1.5}
.lg-foot b{color:#16211c;font-weight:700}
.lg-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.3px}
.lg-dot{width:6px;height:6px;border-radius:50%;background:#41c950;box-shadow:0 0 8px #41c950}
/* Errore di accesso DENTRO la mascherina. Prima l'unico canale era il toast, che vive in
   fondo alla pagina a z-index 3000 — cioè SOTTO il gate (100000), a schermo intero e opaco:
   ogni messaggio ("password errata", "troppi tentativi") era invisibile e il giocatore vedeva
   il pulsante non fare nulla. Il 28/07 è costato a `luigibet1` un blocco che sembrava un guasto. */
.lg-err{display:none;margin-top:-3px;padding:10px 12px;border-radius:9px;text-align:left;
  border:1px solid #f3c2c2;background:#fdf0f0;color:#b3261e;font-size:13px;font-weight:700;line-height:1.4}
.lg-err.show{display:block}
.lg-err i{margin-right:7px}

/* ═══════════ MY BETS / ESTRATTO CONTO — mobile friendly ═══════════
   Su phone .mb-summary (flex con celle flex:1 non comprimibili) e il gruppo pillole
   Stato sfondavano il viewport allargando l'INTERA pagina (header compreso).
   Le card riepilogo diventano una griglia che va a capo, le pillole wrappano,
   e la tabella scorre solo dentro il suo wrapper. */
#myBetsView, #statementView { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .mb-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
  .mb-summary > div { border-bottom: 1px solid var(--border-light); padding: 11px 10px; }
  .mb-summary b { font-size: 13.5px; }
  .mb-fgroup { flex-wrap: wrap; }
  .mb-filters { padding: 8px 10px; gap: 8px; }
  .mb-table { font-size: 12px; }
  .mb-table td, .mb-table th { padding: 8px 9px; }
}

/* Anti-flash: con hint di sessione locale il gate parte nascosto (poi decide /api/auth/me) */
html.gate-skip #loginGate{display:none}
html.gate-skip body.gate-open{overflow:auto}

/* ── «Le mie scommesse» / «Estratto conto» a tutto schermo ANCHE su BetXchange (01/08) ──
   Il fix del 31/07 (riga ~298) era giusto ma DISARMATO: la skin matchbook fissa griglia,
   margin-left e larghezza della .layout con !important (tre blocchi diversi, dentro media
   query), e un override senza !important perde a prescindere dall'ordine. Qui si ripete
   l'override CON !important e specificita' maggiore, in coda al file: vince su tutti e tre.
   Senza di questo su BetXchange restavano il Bet Desk a destra e una striscia vuota a
   sinistra (il margin-left della skin, il cui menu fisso era gia' nascosto da mb-full). */
body[data-layout="matchbook"] .layout.mb-full {
  grid-template-columns: 1fr !important;
  margin-left: 0 !important;
  width: 100% !important;
}
body[data-layout="matchbook"] .layout.mb-full > .sidebar-left,
body[data-layout="matchbook"] .layout.mb-full > .sidebar-right { display: none !important; }

/* ── Pillole filtro «Le mie scommesse»: testo SCURO sul lime BetXchange (01/08) ──
   La riga ~2831 fisso' il testo BIANCO quando --brand-green della skin matchbook era il
   ROSSO #cf111f. Poi la skin e' diventata BetXchange e --mb-red e' stato ridefinito LIME
   #91d700 (riga ~9418): bianco su lime non si legge. Qui si torna all'inchiostro scuro —
   stessa logica della skin default (testo scuro sul giallo Betfair). */
body[data-layout="matchbook"] { --mb-pill-on-fg: #0a1400; }

/* ── Lista eventi COMPATTA su desktop (01/08, richiesta del titolare: «troppo alta») ──
   Vale per exfair E BetXchange, solo da 981px in su: sotto quella soglia valgono i target
   touch da 44px del blocco mobile, che NON vanno ridotti. L'altezza della riga era dominata
   dalla colonna nomi (2 righe squadra + meta a interlinea larga) e dalle celle prezzo a
   46px: ~70px a riga. Con celle a 38px e interlinea stretta si scende verso ~50px — un
   terzo di eventi in piu' nella stessa finestra. !important perche' i blocchi delle skin
   fissano gia' cosi' le loro misure, e una regola gentile perderebbe (lezione mb-full). */
@media (min-width: 981px) {
  .event-row { padding: 2px 8px !important; }
  .event-row .price-cell { height: 38px !important; }
  .event-row .price-cell .price { font-size: 12.5px !important; }
  .event-row .price-cell .size  { font-size: 9.5px  !important; }
  .event-row .team-home, .event-row .team-away { line-height: 1.25 !important; }
  .event-row .event-meta { margin-top: 0 !important; }
  .event-row .score-badge { padding: 1px 4px !important; }
}

/* ── Intestazioni di gruppo COMPATTE su desktop (01/08, seconda passata: «stringere anche
   dove mettiamo i nomi delle competizioni»). Due barre per ogni gruppo — sport (scura,
   .group-card-hd) e competizione+colonne (chiara, .sub-group-hd) — a ~35px l'una: insieme
   costavano quanto una riga evento e mezza. Il font lo gonfia il layer tipografico a
   ~10550 (var(--text-md) !important): stessa specificita', vince chi sta dopo — cioe' qui.
   Solo desktop, come il blocco qui sopra: sotto i 981px comandano i layout mobile. */
@media (min-width: 981px) {
  .group-card-hd { padding-top: 3px !important; padding-bottom: 3px !important; font-size: 11px !important; }
  .group-card-hd .ghd-count { font-size: 9.5px !important; }
  .sub-group-hd { padding-top: 2px !important; padding-bottom: 2px !important; }
  .sub-group-hd .sgh-name { font-size: 11px !important; }
}

/* ── Bet Desk BetXchange PIU' LARGO su desktop (01/08, richiesta del titolare: «come
   exfair24»). La skin lo teneva a clamp(350px, 23vw, 390px) (riga ~11296, !important)
   mentre exfair sta a clamp(340px, 26vw, 410px): stessa proporzione qui, tetto un po' piu'
   alto perche' il Bet Desk porta anche il Match Center. Tre blocchi della skin fissano
   larghezza e griglia con !important (righe ~6136/7415/11296) piu' uno con la clamp scritta
   NELLA griglia (riga ~7183): si vince stando in coda al file, e sulla griglia serve
   ribadire la colonna. `:not(.mb-full)` perche' nelle viste a tutto schermo (lista
   scommesse, estratto conto) la colonna NON deve risorgere. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] {
    --mb-betdesk: clamp(360px, 26vw, 450px) !important;
  }
  body[data-layout="matchbook"] .layout:not(.mb-full) {
    grid-template-columns: minmax(0, 1fr) var(--mb-betdesk) !important;
  }
  body[data-layout="matchbook"] .sidebar-right {
    width: var(--mb-betdesk) !important;
    min-width: var(--mb-betdesk) !important;
    max-width: var(--mb-betdesk) !important;
  }
}

/* ── Colonna sport a SINISTRA piu' stretta su exfair (01/08, richiesta del titolare: «come
   BetXchange»). Base storica 240px (riga ~65); BetXchange sta sui 206-236px. 215px: si
   recupera spazio per il coupon senza troncare i nomi — sotto i 981px valgono gia' i
   valori ridotti dei blocchi mobile (210/188px), che non si toccano. */
@media (min-width: 981px) {
  :root { --sb-width: 215px; }
}

/* ── Colonna sport SINISTRA di BetXchange: 232px + RIENTRI STRETTI (01/08, seconda passata).
   I 215px puri della prima passata troncavano («Internazion…», «Antepost / Speci…»): questa
   skin spende in rientri e colonne fisse molto piu' di exfair (34px di indent, badge conta,
   caret, bandiera). Qui si recupera lo spazio DA LI': a 232px con indent 20/14 e colonne
   più strette lo spazio per il TESTO torna esattamente quello dei 260px originali
   (misurato: competizione 132px, nazione 136px — identici a prima — eventi 192px).
   La barra resta 28px piu' snella di com'era, senza tagli in piu'. */
@media (min-width: 981px) {
  body[data-layout="matchbook"] { --mb-left: 232px !important; }
  body[data-layout="matchbook"] .sport-item-row { padding: 0 12px !important; font-size: 13px !important; min-height: 42px !important; }
  body[data-layout="matchbook"] .sport-comp-item { padding-left: 20px !important; min-height: 34px !important; }
  body[data-layout="matchbook"] .sport-country-item { padding: 0 8px 0 14px !important; gap: 6px !important; grid-template-columns: 20px minmax(0,1fr) auto 12px !important; }
  body[data-layout="matchbook"] .event-sub-item { padding: 6px 10px 6px 22px !important; min-height: 32px !important; }
  body[data-layout="matchbook"] .sport-country-item .country-count,
  body[data-layout="matchbook"] .sport-comp-item .comp-count { min-width: 24px !important; font-size: 10px !important; }
}

/* ── BETXCHANGE: CARD DEL RISULTATO IDENTICA A EXFAIR24 (02/08) ───────────────
   Richiesta del titolare: «la card dei risultati su betxchange falle uguali a quelle
   di exfair24». Le regole "Green block" di exfair sono scritte con
   :not([data-layout="matchbook"]), quindi non sono riusabili: qui sono RIDICHIARATE
   per la skin matchbook con le stesse identiche misure, misurate nel browser sul
   markup vero del builder (calcio, tennis, cricket, basket) a 1440px e a 390px.

   ⚠️ COLORI E FONT ESPLICITI, MAI EREDITATI. La skin ridefinisce le variabili
   (misurato: linguetta verde #16a34a/#08a34a su BX contro nera #15181c su exfair) e
   il suo layer tipografico impone monospace/900 dove exfair ha JetBrains Mono/700.
   Ereditare avrebbe dato di nuovo due badge diversi: è il difetto da togliere.

   ⚠️ SPECIFICITÀ: le regole della skin arrivano fino a
   `body[data-layout] .event-row .event-namewrap .score-badge .sc-p` (0,5,1). Il primo
   giro di questo blocco fermava a (0,5,2) senza `.event-row .event-namewrap` e
   perdeva su min-width, line-height, font-weight e altezza: badge 29px invece di
   34,5px e cifre a 9px invece di 13px. La lista B qui sotto sale a (0,6,2) e vince.
   La lista A (più corta) copre i badge fuori dalle righe di lista. */

/* ── il badge ─────────────────────────────────────────────────────────────── */
html body[data-layout="matchbook"] .score-badge,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge {
  display: inline-flex !important; align-items: center !important;
  flex: 0 0 auto !important; width: auto !important; max-width: none !important;
  min-width: 0 !important; min-height: 0 !important; height: auto !important;
  grid-template-columns: none !important; grid-template-rows: none !important;
  padding: 0 !important; gap: 0 !important;
  background: #20a052 !important; border: 0 !important; border-radius: 6px !important;
  overflow: hidden !important; box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  box-sizing: border-box !important;
  font-family: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", SFMono-Regular, Consolas, monospace !important;
}

/* la scritta "LIVE" che la skin appiccica dentro ogni badge: exfair non ce l'ha */
html body[data-layout="matchbook"] .score-badge::before,
html body[data-layout="matchbook"] .score-badge::after,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge::before,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge::after {
  content: none !important; display: none !important;
}

/* ── linguetta scura: minuto (calcio), overs (cricket), periodo (basket) ──── */
html body[data-layout="matchbook"] .score-badge .sc-min,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-min {
  grid-column: auto !important; grid-row: auto !important;
  background: #15181c !important; color: #35d97e !important;
  font-family: monospace !important; font-size: 10px !important; font-weight: 800 !important;
  line-height: 13.8px !important; text-shadow: none !important;
  padding: 2px 7px !important; min-width: 26px !important; width: auto !important;
  max-width: none !important; height: auto !important; align-self: stretch !important;
  border: 0 !important; border-radius: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  white-space: nowrap !important; overflow: visible !important; text-align: center !important;
}

/* ── colonna del punteggio ────────────────────────────────────────────────── */
html body[data-layout="matchbook"] .score-badge .sc-rows,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-rows {
  grid-column: auto !important;
  display: flex !important; flex-direction: column !important;
  gap: 1px !important; padding: 2px 8px !important;
  font-size: 12px !important; line-height: 15px !important;
  background: transparent !important; min-width: 0 !important; max-width: none !important;
  overflow: visible !important; flex: 0 1 auto !important;
}
html body[data-layout="matchbook"] .score-badge .sc-r,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-r {
  display: flex !important; align-items: center !important;
  justify-content: flex-end !important; gap: 4px !important;
  min-height: 0 !important; font-size: 12px !important; line-height: 15px !important;
  padding: 0 !important; background: transparent !important; overflow: visible !important;
}
html body[data-layout="matchbook"] .score-badge .sc-p,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-p {
  background: transparent !important; color: #fff !important;
  font-family: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", SFMono-Regular, Consolas, monospace !important;
  font-size: 11px !important; font-weight: 700 !important; line-height: 13.75px !important;
  font-variant-numeric: tabular-nums !important; white-space: nowrap !important;
  min-width: 13px !important; max-width: none !important; width: auto !important;
  padding: 0 !important; text-align: center !important; overflow: visible !important;
  text-shadow: none !important; border-radius: 0 !important;
}
html body[data-layout="matchbook"] .score-badge .sc-set,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-set {
  background: transparent !important; color: rgba(255,255,255,.6) !important;
  font-family: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", SFMono-Regular, Consolas, monospace !important;
  font-size: 11px !important; font-weight: 400 !important; line-height: 13.75px !important;
  font-variant-numeric: tabular-nums !important; white-space: nowrap !important;
  min-width: 9px !important; max-width: none !important; width: auto !important;
  padding: 0 !important; text-align: center !important; overflow: visible !important;
  border-radius: 0 !important;
}
html body[data-layout="matchbook"] .score-badge .sc-set.cur,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-set.cur {
  color: #fff !important; font-weight: 800 !important;
}

/* pallino del servizio (tennis): tiene il suo spazio anche da spento, o le due
   righe si disallineano a ogni cambio di battuta */
html body[data-layout="matchbook"] .score-badge .sc-serve,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-serve {
  flex: 0 0 auto !important; align-self: center !important;
  width: 6px !important; height: 6px !important; margin: 0 0 0 4px !important;
  border-radius: 999px !important; background: transparent !important; color: #fff !important;
}
html body[data-layout="matchbook"] .score-badge .sc-serve.is-serving,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge .sc-serve.is-serving {
  background: #7fdc2f !important;
}

/* distanza badge → nomi: exfair 8px, la skin la teneva a 12/14px */
html body[data-layout="matchbook"] .event-row .event-namewrap,
html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap {
  gap: 8px !important;
}

/* Da 981px in su exfair stringe il badge insieme alla lista compatta del 01/08
   (`.event-row .score-badge{padding:1px 4px}`), che non è scoped a una skin. */
@media (min-width: 981px) {
  html body[data-layout="matchbook"] .event-row .score-badge,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge {
    padding: 1px 4px !important;
  }
}

/* Sotto gli 861px exfair rende il TENNIS come due colonne piene (set su nero, game
   su verde) e il badge torna un contenitore trasparente. Stesse regole qui — sulla
   skin i set erano larghi 0px, cioè invisibili. */
@media (max-width: 860px) {
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set),
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) {
    background: transparent !important; padding: 0 !important; gap: 0 !important;
    border-radius: 0 !important; overflow: visible !important; box-shadow: none !important;
  }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-rows,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-rows {
    gap: 0 !important; padding: 0 !important;
  }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-r,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-r {
    gap: 1px !important; padding: 0 !important;
  }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-set,
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-p,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-set,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-p {
    /* `display` è load-bearing: sotto gli 861px la skin NASCONDE i set del tennis
       (display:none, misurato — larghezza 0). exfair li mostra come blocco pieno. */
    display: block !important;
    min-width: 17px !important; width: auto !important; max-width: none !important;
    padding: 2px 3px !important; font-size: 11px !important; font-weight: 700 !important;
    line-height: 13.75px !important; color: #fff !important; text-align: center !important;
    overflow: visible !important;
  }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-set,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-set {
    background: #1e1e1e !important;
  }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-p,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-p {
    background: #20a052 !important;
  }
  /* angoli tondi sulle quattro celle d'angolo, non sul badge: dentro c'è anche il
     pallino del servizio, che verrebbe ritagliato via */
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-r:first-child .sc-set,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-r:first-child .sc-set { border-top-left-radius: 6px !important; }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-r:last-child .sc-set,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-r:last-child .sc-set { border-bottom-left-radius: 6px !important; }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-r:first-child .sc-p,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-r:first-child .sc-p { border-top-right-radius: 6px !important; }
  html body[data-layout="matchbook"] .event-row .score-badge:has(.sc-set) .sc-r:last-child .sc-p,
  html body[data-layout="matchbook"][data-score-style] .event-row .event-namewrap .score-badge:has(.sc-set) .sc-r:last-child .sc-p { border-bottom-right-radius: 6px !important; }
}


/* =========== SCHEDA EVENTO SU TELEFONO: RISULTATO **oppure** TRACKER ===========
   Da mobile la scheda di un evento live apriva insieme la barra del punteggio e il
   widget del tracker: due riquadri alti uno sull'altro, con la prima quota spinta
   fuori schermo. Ora si apre col solo risultato; l'interruttore scambia i due, che
   occupano lo stesso posto (il tracker sotto la testata, dov'era il punteggio).
   Il pulsante lo mostra il JS (`mountLiveTracker`) e solo quando per quell'evento
   un tracker esiste davvero: qui si stila soltanto, non si decide se mostrarlo. */
.ev-view-switch { display: none; }

@media (max-width: 980px) {
  .ev-view-switch {
    display: flex; gap: 6px;
    padding: 6px 10px;
    background: #16181c;
    border-bottom: 1px solid var(--border, #000);
  }
  .ev-view-switch .evs-btn {
    flex: 1 1 0; min-width: 0; min-height: 34px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: #cfd3d8; background: #1f2226;
    border: 1px solid #2c3037; border-radius: 6px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ev-view-switch .evs-btn i { font-size: 11px; opacity: .9; }
  /* --brand-yellow segue la skin (giallo su Exfair, rosso su BetXchange): un colore
     fisso qui avrebbe messo il giallo Exfair dentro il backoffice rosso. */
  .ev-view-switch .evs-btn.is-on {
    color: #111; background: var(--brand-yellow, #ffb80c); border-color: var(--brand-yellow, #ffb80c);
  }

  /* Col tracker in vista sparisce il punteggio - e torna il nome dell'evento, che la
     testata nasconde apposta quando c'e' la barra (i nomi li porta la barra). Senza
     questa seconda riga la testata resterebbe muta proprio mentre il punteggio non c'e'. */
  body[data-ev-view="tracker"] .event-detail-header .ev-score { display: none !important; }
  body[data-ev-view="tracker"] .event-detail-header .ev-info.has-score .ev-name { display: block !important; }
}