/* ===================================================================
 * 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 */
  --z-toast: 3000;        /* toast notifications */
  --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;
}
.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 */
.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;
}

/* 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 {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 12px; padding: 26px 28px; border-radius: 14px; color: #fff;
  background: radial-gradient(900px 260px at 0% 0%, rgba(255,184,12,.22), transparent 60%), linear-gradient(120deg,#1b2330 0%,#11161d 62%,#0c0f14 100%);
  border: 1px solid #2a3340;
}
.hl-hero-title { font-size: 30px; font-weight: 900; letter-spacing: -.5px; line-height: 1; }
.hl-hero-title span { color: var(--brand-yellow, var(--brand-yellow)); }
.hl-hero-sub { margin-top: 8px; font-size: 13.5px; color: #aeb6c2; }
.hl-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.hl-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18);
}
.hl-btn:hover { background: rgba(255,255,255,.18); }
.hl-btn.primary { background: var(--brand-yellow, var(--brand-yellow)); color: #1a1a1a; border-color: var(--brand-yellow, var(--brand-yellow)); }
.hl-btn.primary:hover { filter: brightness(1.05); }
.hl-stats { display: flex; gap: 12px; }
.hl-stat { min-width: 92px; text-align: center; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hl-stat b { display: block; font-size: 24px; font-weight: 900; color: var(--brand-yellow, var(--brand-yellow)); font-family: monospace; }
.hl-stat span { font-size: 11px; color: #aeb6c2; text-transform: uppercase; letter-spacing: .4px; }
/* 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} }

/* ── 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; }
.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;
}
.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; }
.score-badge .sc-set.cur { color: var(--brand-yellow); font-weight: 700; }
.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; }
/* 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; }
/* 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; }
.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;
}
.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; }
.runner-pl.pl-pos { color: var(--green); }
.runner-pl.pl-neg { color: var(--red); }

/* 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: 1fr 130px;
  align-items: center; padding: 4px 10px;
  border-bottom: 1px solid var(--border-light); gap: 6px;
}
.cm-row:last-child { border-bottom: none; }
.cm-name { font-size: 12px; font-weight: 600; color: var(--text-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-market .lm-body .cm-price-cell { flex: 0 0 140px; width: 140px; 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; }
.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); }

/* ── 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; }
.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; }

.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; }
.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; }

/* 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 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 */
.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;
  background: var(--hdr-bg); color: #fff; padding: 9px 14px;
}
.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: 10px 14px; border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 2px;
}
.mb-summary > div:last-child { border-right: none; }
.mb-summary span { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.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); }
.mb-pill.on { background: var(--brand-green); color: #fff; }
/* 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; }
.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; }
.mb-table th.num { text-align: right; }   /* 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; }
.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-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); }
.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); }

/* Mobile My Bets */
@media (max-width: 860px) {
  .mb-summary > div { padding: 8px 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; }
  .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) 72px 72px 72px 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) 72px 72px 72px 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; }
  .sub-group-hd.two-way { grid-template-columns: minmax(0,1fr) 72px 0 72px 22px; }

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

  /* Collapse no-runner columns (X for 2-runner sports like tennis) */
  .event-row .price-cell.no-runner { width: 0 !important; min-width: 0 !important; padding: 0 !important; border: none !important; overflow: hidden; }
  /* When X is hidden, keep the remaining 2 cells the SAME width as a 3-way row's cells (not wider)
     so 2-leg sports don't render oversized boxes — they just sit at the 1 and 2 positions. */
  .event-row:has(.price-cell.no-runner) {
    grid-template-columns: minmax(0,1fr) 72px 0 72px 22px;
  }
  .market-table-hd:has(+ * .price-cell.no-runner) {
    grid-template-columns: minmax(0,1fr) 72px 0 72px 22px;
  }

  /* 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 (Foxfire/Betfair-style): each outcome shows ONE clean, prominent BACK price; back & lay
     are full-width SCROLL-SNAP pages inside the cell, so swipe/scroll right reveals the lay price.
     Both stay in the DOM (no display:none) so the swipe works; a scroll on any cell is mirrored to
     every cell (the capture-phase scroll sync in app.js) so one gesture flips the whole list. */
  .price-cell:not(.more) {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  /* soft lay-coloured glow on the inner right edge = "swipe right for lay" (painted on the box,
     not the scrolling content, so it stays put and doesn't desync the cells). Only on cells that
     actually HAVE a lay page — never on an empty "—" cell, where it would imply a hidden price. */
  .price-cell:not(.more):not(.empty) { box-shadow: inset -8px 0 7px -5px rgba(247,168,184,.8); }
  .price-cell:not(.more)::-webkit-scrollbar { display: none; }
  .price-cell .back, .price-cell .lay {
    flex: 0 0 100%; scroll-snap-align: start;
    padding: 3px 2px; border-right: none;
  }
  .price-cell .price {
    font-size: 13.5px; font-weight: 800;
    color: #000; white-space: nowrap;
  }
  .price-cell .size {
    font-size: 8.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) 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) 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) 60px 60px 60px 20px; }
  /* single-side cells (see ≤860) still fit a readable price even at 60px */
  .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); }
  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; }
  .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's 54px so 1/X/2 still fit */
  .market-table-hd, .event-row, .sub-group-hd { grid-template-columns: minmax(0,1fr) 50px 50px 50px 20px; }
  /* 2-leg rows: cells match the 3-way width (50px), header in sync */
  .sub-group-hd.two-way,
  .event-row:has(.price-cell.no-runner),
  .market-table-hd:has(+ * .price-cell.no-runner) { grid-template-columns: minmax(0,1fr) 50px 0 50px 20px; }
  .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;
  }

  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,
  body[data-layout="matchbook"] .search-clear {
    color: #fff;
  }

  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;
}

/* 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
   Inspired by public OrbitXCH screenshots: dark graphite shell, lime sidebar,
   turquoise market headers, white trading canvas, compact right bet desk.
   Not a brand clone: 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;
  }
}

/* ORBITXCH REAL-CAPTURE ALIGNMENT
   Final visual pass from the local browser capture of /customer/inplay/highlights. */
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-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;
}

.event-detail-header .ev-name,
.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;
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker) {
  position: relative !important;
  min-height: 260px !important;
  background:
    linear-gradient(180deg, rgba(9,14,22,.10), rgba(9,14,22,.92)),
    linear-gradient(135deg, rgba(145,215,0,.72) 0%, rgba(145,215,0,.28) 28%, rgba(17,24,32,.04) 56%),
    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: 18px;
  left: 18px;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 36px);
  height: 26px;
  padding: 0 10px;
  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: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .11em;
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
  pointer-events: none;
}

body[data-layout="matchbook"] .pitch-area:not(.has-tracker)::after {
  content: "Mercati live, quote e momentum\\Asempre sotto controllo.\\A\\A• Tracker evento quando disponibile\\A• Aggiornamento quote in tempo reale\\A• Betting desk compatto e professionale\\A\\AApri un evento live per visualizzare il match tracker.";
  white-space: pre-line;
  position: absolute;
  left: 18px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--mb-red, #91d700);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(13,19,29,.90), rgba(13,19,29,.68));
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-primary, Inter, Arial, sans-serif);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 650;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

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: 680px !important;
  padding: 14px 18px !important;
}

.event-detail-header .tennis-scorebar .sb-row {
  display: grid !important;
  grid-template-columns: 16px minmax(240px, 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 - 170px)) !important;
  }

  .event-detail-header .tennis-scorebar .sb-row {
    grid-template-columns: 14px minmax(160px, 1fr) auto 46px !important;
    gap: 10px !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;
  }

  body[data-layout="matchbook"] .betslip {
    flex: 0 0 318px !important;
    height: 318px !important;
    min-height: 318px !important;
    max-height: 318px !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;
  }

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

  body[data-layout="matchbook"] .live-stream-box {
    flex: 0 0 224px !important;
    min-height: 224px !important;
    max-height: 224px !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: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}

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

/* MATCHBOOK TRACKER FILL
   Use the full remaining right-rail height instead of leaving a dead grey block below. */
@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 1 auto !important;
    min-height: 260px !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;
}

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"] .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 84px !important;
  width: 84px !important;
  max-width: 84px !important;
  min-height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  grid-template-columns: 39px 45px !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;
  max-width: 16px !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;
}

/* MATCHBOOK BRAND LOGO OVERRIDE
   Keep the existing Matchbook background colours; replace only the drawn "M" 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: clamp(250px, 82%, 320px) !important;
  height: 118px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body[data-layout="matchbook"] .brand-logo {
  display: block !important;
  content: url("/assets/betxchange-full-white-green.svg") !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 104px !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"] .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"] .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"] .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;
  }
}

@media (max-width: 760px) {
  body[data-layout="matchbook"] .brand-plate {
    width: 46px !important;
    height: 46px !important;
  }

  body[data-layout="matchbook"] .brand-logo {
    content: url("/assets/betxchange-icon-white-green.svg") !important;
    width: 40px !important;
    max-width: 40px !important;
    max-height: 40px !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"] .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"] .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;
  }
}