/* ==========================================================================
   SB — Sportsbook Design System  ·  "Daylight"
   Light, editorial, blue. Built around hairline rules and flat blocks rather
   than floating dark cards: white ground, deep-navy ink, one confident blue.

   Everything is namespaced `sb-*` so it never collides with the legacy
   template in css/styles.css. Loaded AFTER the legacy sheet.
   ========================================================================== */

:root {
    /* -- ground ------------------------------------------------------- */
    --sb-bg: #ffffff;
    --sb-bg-2: #f4f7fb;
    --sb-surface: #ffffff;
    --sb-surface-2: #f7f9fc;
    --sb-surface-3: #edf2f9;
    --sb-line: #d8e1ee;
    --sb-line-soft: #e8eef6;
    --sb-line-hard: #c3d0e2;

    /* -- ink ---------------------------------------------------------- */
    --sb-text: #0e1c33;
    --sb-text-2: #3d5070;
    --sb-muted: #6b7f9e;
    --sb-faint: #93a4bf;

    /* -- brand -------------------------------------------------------- */
    --sb-blue: #1257e0;
    --sb-blue-ink: #ffffff;
    --sb-blue-deep: #0b3fa8;
    --sb-blue-tint: #e8effd;
    --sb-blue-tint-2: #d3e0fb;
    --sb-navy: #0a1f47;

    /* Pages carry inline `var(--sb-accent)` for links and emphasised figures.
       In this palette the accent IS the blue — aliased rather than renamed at
       ~20 call sites. */
    --sb-accent: var(--sb-blue);

    /* -- state -------------------------------------------------------- */
    --sb-win: #0f8a4d;
    --sb-win-tint: #e4f5ec;
    --sb-live: #d92037;
    --sb-live-tint: #fdeaec;
    --sb-warn: #a86400;
    --sb-warn-tint: #fdf1de;
    --sb-danger: #cf1f34;
    --sb-danger-tint: #fdeaec;

    /* -- geometry ----------------------------------------------------- */
    --sb-r-xs: 3px;
    --sb-r-sm: 4px;
    --sb-r: 6px;
    --sb-r-lg: 8px;
    --sb-shadow: 0 10px 34px rgba(14, 28, 51, .13);
    --sb-shadow-sm: 0 1px 3px rgba(14, 28, 51, .07);
    --sb-ring: 0 0 0 3px rgba(18, 87, 224, .16);

    /* -- layout ------------------------------------------------------- */
    --sb-header-h: 60px;
    --sb-nav-h: 58px;
    --sb-slip-w: 344px;
    --sb-max: 1360px;

    --sb-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sb-num: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The ground is painted from <html> so nothing flashes before body lands. */
html.sb-html { background: var(--sb-bg-2); }
html.sb-html body { background: var(--sb-bg-2); color: var(--sb-text); }

/* ==========================================================================
   1. Shell
   ========================================================================== */

body.sb-app {
    background: var(--sb-bg-2) !important;
    color: var(--sb-text) !important;
    font-family: var(--sb-font);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

body.sb-app * { -webkit-tap-highlight-color: transparent; }

.sb-app a { color: inherit; text-decoration: none; }

.sb-app h1, .sb-app h2, .sb-app h3,
.sb-app h4, .sb-app h5, .sb-app h6 {
    color: var(--sb-text);
    font-weight: 700;
    margin: 0;
    letter-spacing: -.015em;
}

.sb-app p { margin: 0; }
.sb-app ul { list-style: none; margin: 0; padding: 0; }
.sb-app img { max-width: 100%; }
.sb-app hr { border: 0; border-top: 1px solid var(--sb-line-soft); margin: 16px 0; }

.sb-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Page frame -------------------------------------------------------------- */

.sb-shell {
    position: relative;
    max-width: var(--sb-max);
    margin: 0 auto;
    padding: 0 12px;
    padding-top: calc(var(--sb-header-h) + 14px);
    padding-bottom: calc(var(--sb-nav-h) + 26px);
}

.sb-layout { display: block; }
.sb-main { min-width: 0; }
.sb-aside { display: none; }

/* Section headings — a rule and a label, not a floating title -------------- */

.sb-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sb-navy);
}

.sb-section-head h2,
.sb-section-head h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
}

.sb-section-head .sb-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--sb-blue);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.sb-section-head .sb-link:hover { text-decoration: underline; }

.sb-eyebrow {
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sb-muted);
}

/* ==========================================================================
   2. Header — white bar, navy rule, blue active underline
   ========================================================================== */

.sb-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--sb-header-h);
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--sb-line);
    box-shadow: 0 1px 0 rgba(14, 28, 51, .03);
}

.sb-header-in {
    max-width: var(--sb-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Brand ------------------------------------------------------------------- */

.sb-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

/* The D88 mark is artwork on white — shown as-is, never boxed or tinted. */
.sb-brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.sb-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--sb-r-sm);
    display: grid;
    place-items: center;
    background: var(--sb-navy);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -.05em;
    flex-shrink: 0;
}

.sb-brand-name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--sb-navy);
}

.sb-brand-name small {
    display: block;
    font-size: 8px;
    letter-spacing: .17em;
    font-weight: 700;
    color: var(--sb-blue);
    margin-top: 3px;
    text-transform: uppercase;
}

/* Desktop nav — underline, not a pill ------------------------------------- */

.sb-nav { display: none; align-items: center; gap: 0; flex: 1; min-width: 0; height: 100%; }

.sb-nav a {
    padding: 0 14px;
    height: 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sb-text-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .14s, border-color .14s;
}

.sb-nav a:hover { color: var(--sb-blue); }

.sb-nav a.active {
    color: var(--sb-blue);
    font-weight: 700;
    border-bottom-color: var(--sb-blue);
}

.sb-nav a.is-live .sb-dot { background: var(--sb-live); }

/* Header right cluster ---------------------------------------------------- */

.sb-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.sb-iconbtn {
    width: 36px;
    height: 36px;
    border-radius: var(--sb-r-sm);
    border: 1px solid var(--sb-line);
    background: #fff;
    color: var(--sb-text-2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
    flex-shrink: 0;
    padding: 0;
}

.sb-iconbtn:hover { border-color: var(--sb-blue); color: var(--sb-blue); background: var(--sb-blue-tint); }
.sb-iconbtn svg { width: 17px; height: 17px; }
.sb-iconbtn.has-badge { position: relative; }

.sb-iconbtn .sb-badge-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--sb-live);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
}

/* Balance ----------------------------------------------------------------- */

.sb-balance {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border-radius: var(--sb-r-sm);
    border: 1px solid var(--sb-line);
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
}

.sb-balance-val {
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sb-navy);
    line-height: 1;
    white-space: nowrap;
}

.sb-balance-val small {
    font-size: 9px;
    color: var(--sb-muted);
    font-weight: 700;
    margin-left: 4px;
}

.sb-balance-add {
    width: 32px;
    display: grid;
    place-items: center;
    background: var(--sb-blue);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    border-left: 1px solid var(--sb-line);
}

.sb-balance-add:hover { background: var(--sb-blue-deep); }
.sb-balance.is-updating .sb-balance-val { animation: sb-flash .8s ease; }

@keyframes sb-flash {
    0%, 100% { color: var(--sb-navy); background: transparent; }
    30% { color: var(--sb-blue); background: var(--sb-blue-tint); }
}

/* Language switcher (GTranslate) -----------------------------------------
   The widget injects its own <select>; these rules make it match the header
   controls instead of shipping its default styling. */

.sb-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-sm);
    background: #fff;
    flex-shrink: 0;
    max-width: 148px;
}

.sb-lang:hover { border-color: var(--sb-blue); }
.sb-lang-ico { color: var(--sb-muted); display: grid; place-items: center; flex-shrink: 0; }
.sb-lang:hover .sb-lang-ico { color: var(--sb-blue); }
.sb-lang .gtranslate_wrapper { min-width: 0; display: flex; align-items: center; }

.sb-lang select,
.sb-lang .gt_selector {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--sb-font) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--sb-text-2) !important;
    cursor: pointer;
    max-width: 100px;
}

/* The widget renders a "powered by" link we do not want in the header. */
.sb-lang .gt_float_switcher-arrow,
.sb-lang a[href*="gtranslate"],
.sb-lang .gt-current-lang img + span small { display: none !important; }

/* Avatar ------------------------------------------------------------------ */

.sb-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--sb-r-sm);
    background: var(--sb-navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12.5px;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.sb-auth-btns { display: flex; gap: 8px; }

/* live pulse dot ---------------------------------------------------------- */

.sb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sb-live);
    display: inline-block;
    flex-shrink: 0;
    animation: sb-pulse 1.9s infinite;
}

@keyframes sb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 32, 55, .5); }
    70% { box-shadow: 0 0 0 7px rgba(217, 32, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 32, 55, 0); }
}

/* ==========================================================================
   3. Cards & panels — flat blocks with hairline rules
   ========================================================================== */

.sb-card {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
}

.sb-card + .sb-card { margin-top: 12px; }

.sb-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--sb-line-soft);
    background: var(--sb-surface-2);
}

.sb-card-head h3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
}

.sb-card-body { padding: 15px; }
.sb-card-body.tight { padding: 10px; }

.sb-panel {
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-line-soft);
    border-radius: var(--sb-r);
    padding: 13px;
}

/* ==========================================================================
   4. Buttons — squared, flat, blue-led
   ========================================================================== */

.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--sb-r-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: background .14s, border-color .14s, color .14s;
    background: var(--sb-surface-3);
    color: var(--sb-text);
    text-align: center;
}

.sb-btn:disabled, .sb-btn.is-loading { opacity: .5; cursor: not-allowed; }

.sb-btn-primary { background: var(--sb-blue); color: #fff; }
.sb-btn-primary:hover:not(:disabled) { background: var(--sb-blue-deep); }

.sb-btn-blue { background: var(--sb-navy); color: #fff; }
.sb-btn-danger { background: var(--sb-danger); color: #fff; }

.sb-btn-ghost {
    background: #fff;
    border-color: var(--sb-line-hard);
    color: var(--sb-text-2);
}

.sb-btn-ghost:hover:not(:disabled) { border-color: var(--sb-blue); color: var(--sb-blue); background: var(--sb-blue-tint); }

.sb-btn-soft { background: var(--sb-blue-tint); color: var(--sb-blue); border-color: var(--sb-blue-tint-2); }
.sb-btn-soft:hover:not(:disabled) { background: var(--sb-blue-tint-2); }

.sb-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.sb-btn-lg { height: 48px; font-size: 14.5px; }
.sb-btn-block { display: flex; width: 100%; }

.sb-btn .sb-spin { display: none; }
.sb-btn.is-loading .sb-btn-label { visibility: hidden; }
.sb-btn.is-loading .sb-spin { display: block; position: absolute; }

.sb-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: sb-rotate .62s linear infinite;
}

@keyframes sb-rotate { to { transform: rotate(360deg); } }

/* ==========================================================================
   5. Forms
   ========================================================================== */

.sb-field { margin-bottom: 15px; }

.sb-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--sb-text-2);
    margin-bottom: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sb-input,
.sb-select,
.sb-app textarea.sb-input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border-radius: var(--sb-r-sm);
    background: #fff;
    border: 1px solid var(--sb-line-hard);
    color: var(--sb-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
    -webkit-appearance: none;
    appearance: none;
}

.sb-app textarea.sb-input { height: auto; padding: 11px 13px; line-height: 1.5; }
.sb-input::placeholder { color: var(--sb-faint); font-weight: 500; }

.sb-input:focus,
.sb-select:focus { border-color: var(--sb-blue); box-shadow: var(--sb-ring); }

.sb-input.is-invalid { border-color: var(--sb-danger); }
.sb-input[readonly] { background: var(--sb-surface-2); color: var(--sb-muted); }

.sb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7f9e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
    cursor: pointer;
}

.sb-input-group { position: relative; }

.sb-input-group .sb-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sb-faint);
    pointer-events: none;
    display: grid;
    place-items: center;
}

.sb-input-group .sb-input-icon + .sb-input { padding-left: 40px; }

.sb-input-group .sb-input-suffix {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 800;
    color: var(--sb-muted);
    letter-spacing: .04em;
}

.sb-input-group .sb-input-action {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--sb-muted);
    cursor: pointer;
    padding: 6px;
    display: grid;
    place-items: center;
}

.sb-help { font-size: 11.5px; color: var(--sb-muted); margin-top: 6px; }
.sb-error-text { font-size: 11.5px; color: var(--sb-danger); margin-top: 6px; display: none; font-weight: 600; }
.sb-error-text.show { display: block; }

/* quick-amount chips ------------------------------------------------------ */

.sb-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.sb-chip {
    height: 32px;
    padding: 0 13px;
    border-radius: var(--sb-r-sm);
    background: #fff;
    border: 1px solid var(--sb-line-hard);
    color: var(--sb-text-2);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s;
    font-family: inherit;
}

.sb-chip:hover { border-color: var(--sb-blue); color: var(--sb-blue); }
.sb-chip.active { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; }

/* ==========================================================================
   6. Match list — flat rows under a competition header
   ========================================================================== */

.sb-league {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: var(--sb-navy);
    border-radius: var(--sb-r) var(--sb-r) 0 0;
    margin-top: 16px;
}

.sb-league-flag {
    width: 19px;
    height: 19px;
    border-radius: var(--sb-r-xs);
    background: rgba(255, 255, 255, .14);
    display: grid;
    place-items: center;
    font-size: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.sb-league-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-league-count { font-size: 11px; color: rgba(255, 255, 255, .6); font-weight: 700; }

.sb-league-group {
    border: 1px solid var(--sb-line);
    border-top: 0;
    border-radius: 0 0 var(--sb-r) var(--sb-r);
    overflow: hidden;
    background: #fff;
}

/* one match --------------------------------------------------------------- */

.sb-match {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: background .14s;
    position: relative;
}

.sb-match:hover { background: var(--sb-surface-2); }

.sb-league-group .sb-match {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.sb-league-group .sb-match + .sb-match { border-top: 1px solid var(--sb-line-soft); }

.sb-match-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 11px;
    color: var(--sb-muted);
    font-weight: 600;
}

.sb-match-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sb-blue);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sb-match-league {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-match-fav {
    background: none;
    border: 0;
    padding: 2px;
    color: var(--sb-faint);
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    transition: color .14s;
}

.sb-match-fav:hover { color: var(--sb-warn); }
.sb-match-fav.active { color: var(--sb-warn); }
.sb-match-fav.active svg { fill: currentColor; }

/* teams ------------------------------------------------------------------- */

.sb-teams { display: grid; gap: 7px; }

.sb-team {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sb-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.sb-team-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-team-score {
    font-size: 14px;
    font-weight: 800;
    color: var(--sb-blue);
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* status pills — squared tags -------------------------------------------- */

.sb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--sb-r-xs);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.sb-pill-live { background: var(--sb-live-tint); color: var(--sb-live); }
.sb-pill-soon { background: var(--sb-warn-tint); color: var(--sb-warn); }
.sb-pill-ok { background: var(--sb-win-tint); color: var(--sb-win); }
.sb-pill-info { background: var(--sb-blue-tint); color: var(--sb-blue); }
.sb-pill-muted { background: var(--sb-surface-3); color: var(--sb-muted); }
.sb-pill-danger { background: var(--sb-danger-tint); color: var(--sb-danger); }

/* match footer ------------------------------------------------------------ */

.sb-match-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--sb-line-soft);
}

.sb-market-count { font-size: 11.5px; color: var(--sb-muted); font-weight: 600; flex: 1; }
.sb-market-count b { color: var(--sb-blue); font-weight: 800; }

/* ==========================================================================
   7. Odds — VERTICAL. One market per full-width row.
   ========================================================================== */

.sb-oddslist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
    background: #fff;
}

/* One selection row: score · description · rate · Bet button.
   A container div, not a button, because it holds a real button. */
.sb-oddsrow {
    display: grid;
    grid-template-columns: minmax(58px, auto) 1fr auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    min-height: 54px;
    background: #fff;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background .13s, border-color .13s;
    position: relative;
}

.sb-oddsrow + .sb-oddsrow { border-top: 1px solid var(--sb-line-soft); }
.sb-oddsrow:hover { background: var(--sb-blue-tint); border-left-color: var(--sb-blue-tint-2); }

.sb-oddsrow-score {
    font-size: 17px;
    font-weight: 800;
    color: var(--sb-navy);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* The cell contents are <span>s so the whole row can stay a <button>;
   they must be forced to block or the two lines run together. */
.sb-oddsrow-meta { min-width: 0; display: block; }

.sb-oddsrow-label {
    display: block;
    font-size: 11.5px;
    color: var(--sb-text-2);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-oddsrow-min {
    display: block;
    font-size: 10.5px;
    color: var(--sb-faint);
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
}

.sb-oddsrow-score,
.sb-oddsrow-rate { display: block; }

/* the rate is the number that matters — give it weight */
.sb-oddsrow-rate {
    font-size: 16px;
    font-weight: 800;
    color: var(--sb-win);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

/* The Bet button opens the stake popup for this one selection. */
.sb-oddsrow-bet {
    height: 32px;
    padding: 0 16px;
    border-radius: var(--sb-r-sm);
    border: 1px solid var(--sb-blue);
    background: #fff;
    color: var(--sb-blue);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .03em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s, color .14s;
}

.sb-oddsrow:hover .sb-oddsrow-bet,
.sb-oddsrow-bet:hover { background: var(--sb-blue); color: #fff; }

/* selected --------------------------------------------------------------- */

.sb-oddsrow.active {
    background: var(--sb-blue-tint);
    border-left-color: var(--sb-blue);
}

.sb-oddsrow.active .sb-oddsrow-score { color: var(--sb-blue); }
.sb-oddsrow.active .sb-oddsrow-bet { background: var(--sb-blue); color: #fff; }

/* Company Protection Plan — the 4-4 market on every board.
   Marked in navy rather than blue so it reads as a house product, not just
   another selection. */

.sb-protect-tag {
    display: inline-block;
    padding: 2px 7px;
    margin-right: 7px;
    border-radius: var(--sb-r-xs);
    background: var(--sb-navy);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

.sb-protect-tag.lg {
    display: block;
    margin: 0 0 8px;
    padding: 4px 9px;
    font-size: 9.5px;
    align-self: flex-start;
    width: fit-content;
}

.sb-oddsrow.is-protection { background: #fbfcfe; }
.sb-oddsrow.is-protection .sb-oddsrow-score { color: var(--sb-navy); }

/* the label wraps onto two lines once the tag is in front of it */
.sb-oddsrow.is-protection .sb-oddsrow-label { white-space: normal; line-height: 1.5; }

/* popup selection summary ------------------------------------------------- */

.sb-betpick {
    background: var(--sb-blue-tint);
    border-left: 3px solid var(--sb-blue);
    border-radius: var(--sb-r-sm);
    padding: 12px 13px;
}

.sb-betpick.is-protection {
    background: var(--sb-surface-3);
    border-left-color: var(--sb-navy);
}

.sb-betpick .sb-sel-match { color: var(--sb-text-2); }

@keyframes sb-odd-flash {
    0% { background: var(--sb-blue-tint-2); }
    100% { background: var(--sb-blue-tint); }
}

.sb-oddsrow.flash { animation: sb-odd-flash .5s ease-out; }

/* group divider inside a list (low-entry vs standard) ---------------------- */

.sb-oddsgroup {
    padding: 8px 14px;
    background: var(--sb-surface-2);
    border-top: 1px solid var(--sb-line-soft);
    border-bottom: 1px solid var(--sb-line-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--sb-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-oddslist > .sb-oddsgroup:first-child { border-top: 0; }

/* ==========================================================================
   8. Reverse betting explainer
   ========================================================================== */

.sb-rev-hero {
    background: var(--sb-navy);
    border-radius: var(--sb-r);
    padding: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.sb-rev-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(18, 87, 224, .32);
}

.sb-rev-hero > * { position: relative; z-index: 1; }
.sb-rev-hero h2 { font-size: 20px; color: #fff; letter-spacing: -.025em; }
.sb-rev-hero p { font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 8px; line-height: 1.6; }
.sb-rev-hero b { color: #fff; }
.sb-rev-hero .sb-pill { background: rgba(255, 255, 255, .16); color: #fff; }

.sb-rev-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 18px;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--sb-r-sm);
    overflow: hidden;
}

.sb-rev-step { background: var(--sb-navy); padding: 13px 12px; }

.sb-rev-step .n {
    font-size: 22px;
    font-weight: 800;
    color: rgba(255, 255, 255, .28);
    line-height: 1;
    margin-bottom: 7px;
}

.sb-rev-step h4 { font-size: 12.5px; color: #fff; }
.sb-rev-step p { font-size: 11px; color: rgba(255, 255, 255, .62); margin-top: 4px; line-height: 1.45; }

/* ==========================================================================
   8b. Investment plans
   ========================================================================== */

.sb-plans { display: grid; gap: 12px; }

.sb-plan {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-top: 4px solid var(--sb-blue);
    border-radius: var(--sb-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sb-plan.featured { border-top-color: var(--sb-navy); box-shadow: var(--sb-shadow-sm); }

.sb-plan-head {
    padding: 15px 16px 13px;
    border-bottom: 1px solid var(--sb-line-soft);
    position: relative;
}

.sb-plan-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sb-navy);
}

.sb-plan-rate {
    font-size: 38px;
    font-weight: 800;
    color: var(--sb-blue);
    letter-spacing: -.04em;
    line-height: 1;
    margin-top: 9px;
    font-variant-numeric: tabular-nums;
}

.sb-plan-rate small { font-size: 14px; font-weight: 700; color: var(--sb-muted); letter-spacing: 0; }
.sb-plan-term { font-size: 12.5px; color: var(--sb-text-2); font-weight: 600; margin-top: 6px; }

.sb-plan-tag {
    position: absolute;
    top: 13px;
    right: 14px;
}

.sb-plan-body { padding: 14px 16px; flex: 1; }

.sb-plan-list { display: grid; gap: 9px; }

.sb-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sb-text-2);
    line-height: 1.45;
}

.sb-plan-list li svg { width: 14px; height: 14px; color: var(--sb-win); flex-shrink: 0; margin-top: 2px; }
.sb-plan-list li b { color: var(--sb-navy); font-weight: 700; }

.sb-plan-foot { padding: 0 16px 16px; }

/* an open contract ------------------------------------------------------- */

.sb-contract {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
    margin-bottom: 10px;
}

.sb-contract-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    background: var(--sb-surface-2);
    border-bottom: 1px solid var(--sb-line-soft);
}

.sb-contract-head h4 { font-size: 12.5px; font-weight: 800; flex: 1; min-width: 0; }
.sb-contract-body { padding: 13px 14px; }

.sb-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--sb-surface-3);
    overflow: hidden;
    margin: 11px 0 7px;
}

.sb-progress span {
    display: block;
    height: 100%;
    background: var(--sb-blue);
    border-radius: 3px;
    transition: width .4s ease;
}

.sb-contract-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding-top: 11px;
    border-top: 1px solid var(--sb-line-soft);
    margin-top: 11px;
}

.sb-contract-grid > div span {
    display: block;
    font-size: 9.5px;
    color: var(--sb-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sb-contract-grid > div b {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    margin-top: 4px;
    color: var(--sb-navy);
    font-variant-numeric: tabular-nums;
}

.sb-contract-grid > div b.ok { color: var(--sb-win); }

@media (min-width: 720px) {
    .sb-plans { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ==========================================================================
   9. Bet slip
   ========================================================================== */

.sb-slip {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sb-slip-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    background: var(--sb-navy);
    flex-shrink: 0;
}

.sb-slip-head h3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    flex: 1;
}

.sb-slip-count {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: var(--sb-r-xs);
    background: var(--sb-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    display: grid;
    place-items: center;
    transition: transform .2s;
}

.sb-slip-clear {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
}

.sb-slip-clear:hover { color: #fff; }

.sb-slip-tabs {
    display: flex;
    border-bottom: 1px solid var(--sb-line);
    flex-shrink: 0;
    background: var(--sb-surface-2);
}

.sb-slip-tab {
    flex: 1;
    height: 36px;
    border: 0;
    background: none;
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .14s, border-color .14s;
}

.sb-slip-tab.active { color: var(--sb-blue); border-bottom-color: var(--sb-blue); background: #fff; }
.sb-slip-tab:disabled { opacity: .4; cursor: not-allowed; }

.sb-slip-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
}

.sb-slip-foot {
    padding: 12px;
    border-top: 1px solid var(--sb-line);
    background: var(--sb-surface-2);
    flex-shrink: 0;
}

/* one selection ----------------------------------------------------------- */

.sb-sel {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-left: 3px solid var(--sb-blue);
    border-radius: var(--sb-r-sm);
    padding: 11px;
    margin-bottom: 9px;
    animation: sb-sel-in .24s ease;
}

@keyframes sb-sel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.sb-sel.removing { animation: sb-sel-out .18s ease forwards; }

@keyframes sb-sel-out {
    to { opacity: 0; transform: translateX(20px); height: 0; margin: 0; padding: 0; }
}

.sb-sel-top { display: flex; align-items: flex-start; gap: 8px; }

.sb-sel-market {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--sb-blue);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sb-sel-pick {
    font-size: 14px;
    font-weight: 800;
    color: var(--sb-navy);
    margin-top: 3px;
    line-height: 1.2;
}

.sb-sel-match { font-size: 11px; color: var(--sb-muted); margin-top: 4px; line-height: 1.35; }

.sb-sel-x {
    background: none;
    border: 0;
    color: var(--sb-faint);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
    flex-shrink: 0;
}

.sb-sel-x:hover { color: var(--sb-danger); }

.sb-sel-stake { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.sb-sel-stake .sb-input { height: 38px; font-size: 13.5px; }

.sb-sel-return {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--sb-line-soft);
    font-size: 11.5px;
    color: var(--sb-muted);
    font-weight: 600;
}

.sb-sel-return b { font-size: 14px; color: var(--sb-win); font-weight: 800; }

/* totals ------------------------------------------------------------------ */

.sb-slip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    color: var(--sb-text-2);
    font-weight: 600;
    margin-bottom: 7px;
}

.sb-slip-row b { color: var(--sb-navy); font-weight: 800; }

.sb-slip-row.total {
    font-size: 13px;
    padding-top: 9px;
    border-top: 1px solid var(--sb-line);
    margin-bottom: 10px;
}

.sb-slip-row.total b { font-size: 18px; color: var(--sb-win); }

/* desktop dock ------------------------------------------------------------ */

.sb-slip-dock {
    position: sticky;
    top: calc(var(--sb-header-h) + 14px);
    max-height: calc(100vh - var(--sb-header-h) - 28px);
}

.sb-slip-dock .sb-slip { max-height: inherit; }

/* mobile floating trigger ------------------------------------------------- */

.sb-slip-fab {
    position: fixed;
    right: 14px;
    bottom: calc(var(--sb-nav-h) + 14px);
    z-index: 1035;
    display: none;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 16px;
    border-radius: var(--sb-r-sm);
    border: 0;
    background: var(--sb-blue);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(18, 87, 224, .38);
    cursor: pointer;
}

.sb-slip-fab.show { display: flex; }
.sb-slip-fab.bump { animation: sb-bump .4s cubic-bezier(.3, 1.5, .5, 1); }

@keyframes sb-bump {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.09); }
}

.sb-slip-fab .n {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: var(--sb-r-xs);
    background: rgba(255, 255, 255, .24);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
}

/* mobile sheet ------------------------------------------------------------ */

.sb-sheet { position: fixed; inset: 0; z-index: 1090; display: none; }
.sb-sheet.open { display: block; }

.sb-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 71, .42);
    animation: sb-fade .2s ease;
}

@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }

.sb-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: #fff;
    border-radius: var(--sb-r-lg) var(--sb-r-lg) 0 0;
    display: flex;
    flex-direction: column;
    animation: sb-sheet-up .26s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: hidden;
}

@keyframes sb-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

.sb-sheet-grab {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--sb-line-hard);
    margin: 8px auto 2px;
    flex-shrink: 0;
}

.sb-sheet .sb-slip { border: 0; border-radius: 0; min-height: 0; }

/* ==========================================================================
   10. Bottom navigation
   ========================================================================== */

.sb-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--sb-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--sb-line);
    display: flex;
}

.sb-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--sb-muted);
    font-size: 10px;
    font-weight: 700;
    position: relative;
    transition: color .14s;
    min-width: 0;
}

.sb-bottomnav a svg { width: 20px; height: 20px; }
.sb-bottomnav a.active { color: var(--sb-blue); }

.sb-bottomnav a.active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 3px;
    background: var(--sb-blue);
}

.sb-bottomnav a .sb-nav-badge {
    position: absolute;
    top: 5px;
    right: 50%;
    margin-right: -19px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--sb-live);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* ==========================================================================
   11. Toasts
   ========================================================================== */

.sb-toasts {
    position: fixed;
    top: calc(var(--sb-header-h) + 10px);
    right: 12px;
    left: 12px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    align-items: flex-end;
}

.sb-toast {
    pointer-events: auto;
    width: 100%;
    max-width: 374px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border-radius: var(--sb-r-sm);
    background: #fff;
    border: 1px solid var(--sb-line);
    border-left: 4px solid var(--sb-muted);
    box-shadow: var(--sb-shadow);
    position: relative;
    overflow: hidden;
    animation: sb-toast-in .26s ease;
}

@keyframes sb-toast-in {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: none; }
}

.sb-toast.out { animation: sb-toast-out .2s ease forwards; }

@keyframes sb-toast-out {
    to { opacity: 0; transform: translateX(22px); }
}

.sb-toast-ico {
    width: 24px;
    height: 24px;
    border-radius: var(--sb-r-xs);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 900;
}

.sb-toast-body { flex: 1; min-width: 0; }
.sb-toast-title { font-size: 13px; font-weight: 800; color: var(--sb-navy); line-height: 1.3; }
.sb-toast-msg { font-size: 12px; color: var(--sb-text-2); margin-top: 3px; line-height: 1.45; word-break: break-word; }

.sb-toast-x {
    background: none;
    border: 0;
    color: var(--sb-faint);
    cursor: pointer;
    padding: 0 2px;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}

.sb-toast-x:hover { color: var(--sb-text); }

.sb-toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    opacity: .5;
}

.sb-toast.success { border-left-color: var(--sb-win); }
.sb-toast.success .sb-toast-bar { background: var(--sb-win); }
.sb-toast.success .sb-toast-ico { background: var(--sb-win-tint); color: var(--sb-win); }

.sb-toast.error { border-left-color: var(--sb-danger); }
.sb-toast.error .sb-toast-bar { background: var(--sb-danger); }
.sb-toast.error .sb-toast-ico { background: var(--sb-danger-tint); color: var(--sb-danger); }

.sb-toast.warning { border-left-color: var(--sb-warn); }
.sb-toast.warning .sb-toast-bar { background: var(--sb-warn); }
.sb-toast.warning .sb-toast-ico { background: var(--sb-warn-tint); color: var(--sb-warn); }

.sb-toast.info { border-left-color: var(--sb-blue); }
.sb-toast.info .sb-toast-bar { background: var(--sb-blue); }
.sb-toast.info .sb-toast-ico { background: var(--sb-blue-tint); color: var(--sb-blue); }

/* ==========================================================================
   12. Modal
   ========================================================================== */

.sb-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sb-modal.open { display: flex; }

.sb-modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 71, .45);
    animation: sb-fade .2s ease;
}

.sb-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--sb-r);
    box-shadow: var(--sb-shadow);
    animation: sb-modal-in .24s ease;
}

@keyframes sb-modal-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.sb-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--sb-line);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.sb-modal-head h3 { font-size: 15px; flex: 1; }
.sb-modal-body { padding: 17px; }
.sb-modal-foot { padding: 0 17px 17px; display: flex; gap: 9px; }
.sb-modal-foot .sb-btn { flex: 1; }

/* bet receipt ------------------------------------------------------------- */

.sb-receipt-hero {
    text-align: center;
    padding: 26px 17px 20px;
    background: var(--sb-navy);
    color: #fff;
}

.sb-receipt-check {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: var(--sb-win);
    color: #fff;
    display: grid;
    place-items: center;
    animation: sb-pop .42s cubic-bezier(.2, 1.5, .4, 1);
}

@keyframes sb-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.sb-receipt-check svg { width: 27px; height: 27px; }
.sb-receipt-hero h3 { font-size: 17px; color: #fff; }
.sb-receipt-hero p { font-size: 12.5px; color: rgba(255, 255, 255, .74); margin-top: 6px; }

.sb-receipt-rows {
    margin: 16px 17px;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-sm);
    overflow: hidden;
}

.sb-receipt-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 13px;
    font-size: 12.5px;
}

.sb-receipt-row + .sb-receipt-row { border-top: 1px solid var(--sb-line-soft); }
.sb-receipt-row:nth-child(odd) { background: var(--sb-surface-2); }
.sb-receipt-row span { color: var(--sb-muted); font-weight: 600; flex-shrink: 0; }

.sb-receipt-row b {
    color: var(--sb-navy);
    font-weight: 700;
    margin-left: auto;
    text-align: right;
    word-break: break-word;
}

.sb-receipt-row.hl b { color: var(--sb-win); font-size: 15px; font-weight: 800; }

/* ==========================================================================
   13. Skeletons, spinners, empty states
   ========================================================================== */

.sb-skel {
    background: linear-gradient(90deg, var(--sb-surface-3) 25%, #f9fbfe 37%, var(--sb-surface-3) 63%);
    background-size: 400% 100%;
    animation: sb-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--sb-r-xs);
}

@keyframes sb-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.sb-skel-line { height: 11px; margin-bottom: 8px; }
.sb-skel-card { height: 88px; border-radius: var(--sb-r); margin-bottom: 10px; }

.sb-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .74);
    display: grid;
    place-items: center;
    z-index: 20;
    border-radius: inherit;
}

.sb-loading-overlay .sb-spin { width: 24px; height: 24px; color: var(--sb-blue); border-width: 2.5px; }

.sb-empty { text-align: center; padding: 42px 20px; }

.sb-empty-ico {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: var(--sb-r);
    background: var(--sb-blue-tint);
    display: grid;
    place-items: center;
    color: var(--sb-blue);
}

.sb-empty-ico svg { width: 25px; height: 25px; }
.sb-empty h4 { font-size: 14.5px; }
.sb-empty p { font-size: 12.5px; color: var(--sb-muted); margin-top: 7px; max-width: 300px; margin-inline: auto; line-height: 1.55; }
.sb-empty .sb-btn { margin-top: 16px; }

/* ==========================================================================
   14. Tabs, filters, search
   ========================================================================== */

.sb-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow-x: auto;
    scrollbar-width: none;
}

.sb-tabs::-webkit-scrollbar { display: none; }

.sb-tab {
    flex: 1 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--sb-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .14s, border-color .14s, background .14s;
}

.sb-tab:hover { background: var(--sb-surface-2); }
.sb-tab.active { color: var(--sb-blue); border-bottom-color: var(--sb-blue); }

.sb-tab .sb-tab-n {
    display: inline-block;
    margin-left: 5px;
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: var(--sb-r-xs);
    background: var(--sb-surface-3);
    color: var(--sb-muted);
}

.sb-tab.active .sb-tab-n { background: var(--sb-blue-tint); color: var(--sb-blue); }

/* search ------------------------------------------------------------------ */

.sb-search-wrap { position: relative; flex: 1; max-width: 330px; display: none; }
.sb-search-wrap .sb-input { height: 36px; font-size: 13px; padding-left: 34px; background: var(--sb-surface-2); }
.sb-search-wrap .sb-input:focus { background: #fff; }
.sb-search-wrap .sb-input-icon { left: 11px; }

.sb-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    box-shadow: var(--sb-shadow);
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    z-index: 60;
}

.sb-search-results.open { display: block; }

.sb-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    cursor: pointer;
    transition: background .12s;
}

.sb-search-item:hover, .sb-search-item.sel { background: var(--sb-blue-tint); }
.sb-search-item + .sb-search-item { border-top: 1px solid var(--sb-line-soft); }
.sb-search-item .t { font-size: 13px; font-weight: 700; color: var(--sb-navy); }
.sb-search-item .s { font-size: 11px; color: var(--sb-muted); margin-top: 2px; }

.sb-search-group {
    padding: 8px 13px 5px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--sb-faint);
    background: var(--sb-surface-2);
}

.sb-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1120;
    background: #fff;
    display: none;
    flex-direction: column;
}

.sb-search-overlay.open { display: flex; }

.sb-search-overlay-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--sb-line);
    flex-shrink: 0;
}

.sb-search-overlay-body { flex: 1; overflow-y: auto; padding: 4px 0; }

/* ==========================================================================
   15. Stats / wallet
   ========================================================================== */

.sb-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--sb-line);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
}

.sb-stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }

.sb-stat { background: #fff; padding: 13px; }

.sb-stat-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--sb-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sb-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--sb-navy);
    margin-top: 7px;
    letter-spacing: -.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sb-stat-value small { font-size: 10.5px; color: var(--sb-muted); font-weight: 700; margin-left: 3px; }
.sb-stat-value.ok { color: var(--sb-win); }
.sb-stat-value.bad { color: var(--sb-danger); }
.sb-stat-value.warn { color: var(--sb-warn); }
.sb-stat-sub { font-size: 11px; color: var(--sb-faint); margin-top: 4px; }

/* wallet hero — navy block, blue rule ------------------------------------- */

.sb-wallet-hero {
    background: var(--sb-navy);
    border-radius: var(--sb-r);
    padding: 19px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.sb-wallet-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--sb-blue);
}

.sb-wallet-hero .lbl {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, .62);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sb-wallet-hero .amt {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.035em;
    margin-top: 8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sb-wallet-hero .amt small { font-size: 13px; color: rgba(255, 255, 255, .55); font-weight: 700; margin-left: 5px; }
.sb-wallet-hero .sub { font-size: 11.5px; color: rgba(255, 255, 255, .6); margin-top: 8px; }

.sb-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 17px;
    background: rgba(255, 255, 255, .14);
    border-radius: var(--sb-r-sm);
    overflow: hidden;
}

.sb-quick {
    background: var(--sb-navy);
    padding: 12px 6px;
    text-align: center;
    transition: background .14s;
    display: block;
}

.sb-quick:hover { background: #12294f; }
.sb-quick svg { width: 19px; height: 19px; color: #fff; }
.sb-quick span { display: block; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .78); margin-top: 6px; }

/* ==========================================================================
   16. List rows
   ========================================================================== */

.sb-list { background: #fff; border: 1px solid var(--sb-line); border-radius: var(--sb-r); overflow: hidden; }

.sb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    transition: background .13s;
}

.sb-row + .sb-row { border-top: 1px solid var(--sb-line-soft); }
a.sb-row:hover { background: var(--sb-blue-tint); }

.sb-row-ico {
    width: 34px;
    height: 34px;
    border-radius: var(--sb-r-sm);
    background: var(--sb-surface-3);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--sb-text-2);
}

.sb-row-ico svg { width: 16px; height: 16px; }
.sb-row-ico.ok { background: var(--sb-win-tint); color: var(--sb-win); }
.sb-row-ico.bad { background: var(--sb-danger-tint); color: var(--sb-danger); }
.sb-row-ico.warn { background: var(--sb-warn-tint); color: var(--sb-warn); }
.sb-row-ico.info { background: var(--sb-blue-tint); color: var(--sb-blue); }

.sb-row-main { flex: 1; min-width: 0; }
.sb-row-title { font-size: 13.5px; font-weight: 700; color: var(--sb-navy); }
.sb-row-sub { font-size: 11.5px; color: var(--sb-muted); margin-top: 3px; }
.sb-row-end { text-align: right; flex-shrink: 0; }
.sb-row-amt { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-row-amt.cr { color: var(--sb-win); }
.sb-row-amt.dr { color: var(--sb-danger); }
.sb-row-chev { color: var(--sb-faint); flex-shrink: 0; }

/* ==========================================================================
   17. Bet history cards
   ========================================================================== */

.sb-bet {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r);
    overflow: hidden;
    margin-bottom: 10px;
}

.sb-bet-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--sb-surface-2);
    border-bottom: 1px solid var(--sb-line-soft);
}

.sb-bet-id { font-size: 11px; font-weight: 700; color: var(--sb-muted); font-family: var(--sb-num); }
.sb-bet-date { font-size: 11px; color: var(--sb-faint); margin-left: auto; }
.sb-bet-body { padding: 13px 14px; }

.sb-bet-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sb-blue-tint);
    border-radius: var(--sb-r-sm);
    border-left: 3px solid var(--sb-blue);
    margin-bottom: 11px;
}

.sb-bet-pick-label { font-size: 9.5px; font-weight: 800; color: var(--sb-blue); letter-spacing: .07em; text-transform: uppercase; }
.sb-bet-pick-val { font-size: 15px; font-weight: 800; margin-top: 2px; color: var(--sb-navy); }

.sb-bet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding-top: 11px;
    border-top: 1px solid var(--sb-line-soft);
}

.sb-bet-grid > div span {
    display: block;
    font-size: 9.5px;
    color: var(--sb-muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sb-bet-grid > div b { font-size: 13.5px; font-weight: 800; display: block; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--sb-navy); }
.sb-bet-grid > div b.ok { color: var(--sb-win); }
.sb-bet-grid > div b.bad { color: var(--sb-danger); }

.sb-bet-foot { padding: 10px 14px; border-top: 1px solid var(--sb-line-soft); display: flex; gap: 8px; align-items: center; background: var(--sb-surface-2); }

/* ==========================================================================
   18. Live strip
   ========================================================================== */

.sb-live-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sb-live-scroll::-webkit-scrollbar { display: none; }

.sb-live-card {
    flex: 0 0 258px;
    background: #fff;
    border: 1px solid var(--sb-line);
    border-top: 3px solid var(--sb-live);
    border-radius: var(--sb-r);
    padding: 13px;
}

.sb-live-clock { font-size: 11px; font-weight: 800; color: var(--sb-live); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   19. Promo / ticker
   ========================================================================== */

.sb-promo {
    position: relative;
    border-radius: var(--sb-r);
    overflow: hidden;
    border: 1px solid var(--sb-line);
    background: #fff;
}

.sb-promo-track { display: flex; transition: transform .4s ease; }
.sb-promo-slide { flex: 0 0 100%; position: relative; }

.sb-promo-slide img {
    width: 100%;
    display: block;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.sb-promo-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.sb-promo-dots button {
    width: 20px;
    height: 3px;
    border-radius: 0;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background .22s;
}

.sb-promo-dots button.active { background: #fff; }

.sb-ticker {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid var(--sb-line);
    border-left: 3px solid var(--sb-blue);
    border-radius: var(--sb-r-sm);
    overflow: hidden;
    margin-top: 10px;
}

.sb-ticker-ico { color: var(--sb-blue); flex-shrink: 0; display: grid; place-items: center; }
.sb-ticker-track { flex: 1; overflow: hidden; white-space: nowrap; min-width: 0; }

.sb-ticker-track span {
    display: inline-block;
    padding-left: 100%;
    font-size: 11.5px;
    color: var(--sb-text-2);
    font-weight: 600;
    animation: sb-marquee 26s linear infinite;
}

@keyframes sb-marquee { to { transform: translateX(-100%); } }

/* ==========================================================================
   20. Auth
   ========================================================================== */

/* Two panels, not a floating card: a navy brand rail carrying the logo and the
   product promise, and a plain white form column beside it. On phones the rail
   collapses to a compact banner above the form. */

.sb-auth {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #fff;
}

/* -- brand rail ----------------------------------------------------------- */

.sb-auth-rail {
    background: var(--sb-navy);
    color: #fff;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sb-auth-rail::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(18, 87, 224, .38);
}

.sb-auth-rail > * { position: relative; z-index: 1; }

.sb-auth-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--sb-r);
    padding: 5px;
    flex-shrink: 0;
}

.sb-auth-rail h2 {
    color: #fff;
    font-size: 19px;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.sb-auth-rail p {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.5;
}

.sb-auth-points { display: none; }

/* -- form column ---------------------------------------------------------- */

.sb-auth-main {
    padding: 26px 18px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sb-auth-form { width: 100%; max-width: 400px; margin: 0 auto; }

.sb-auth-form h1 {
    font-size: 24px;
    letter-spacing: -.035em;
    color: var(--sb-navy);
}

.sb-auth-form > p.sub {
    font-size: 13px;
    color: var(--sb-muted);
    margin: 8px 0 26px;
    line-height: 1.5;
}

/* the heading sits above a short blue rule rather than being centred */
.sb-auth-form h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    background: var(--sb-blue);
    margin-top: 12px;
}

.sb-auth-foot { font-size: 13px; color: var(--sb-muted); margin-top: 22px; }
.sb-auth-foot a { color: var(--sb-blue); font-weight: 700; }

.sb-trust {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--sb-line-soft);
    flex-wrap: wrap;
}

.sb-trust div { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--sb-muted); font-weight: 600; }
.sb-trust svg { width: 13px; height: 13px; color: var(--sb-blue); }

@media (min-width: 900px) {
    .sb-auth {
        grid-template-rows: none;
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    }

    .sb-auth-rail {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 48px 44px;
    }

    .sb-auth-logo { width: 92px; height: 92px; padding: 8px; margin-bottom: 26px; }
    .sb-auth-rail h2 { font-size: 28px; }
    .sb-auth-rail p { font-size: 13.5px; margin-top: 12px; max-width: 300px; }

    .sb-auth-points {
        display: grid;
        gap: 14px;
        margin-top: 34px;
    }

    .sb-auth-points div {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        font-size: 13px;
        color: rgba(255, 255, 255, .82);
        line-height: 1.4;
    }

    .sb-auth-points svg { width: 17px; height: 17px; color: #fff; flex-shrink: 0; margin-top: 1px; }
    .sb-auth-points b { color: #fff; display: block; font-size: 13px; }
    .sb-auth-points span { font-size: 12px; color: rgba(255, 255, 255, .62); }

    .sb-auth-main { padding: 48px; }
}

/* ==========================================================================
   20b. Landing page (index.php)
   Public front door. Its own header and footer — no app chrome, no bottom nav.
   ========================================================================== */

.sb-land { background: #fff; }

/* header ------------------------------------------------------------------ */

.sb-land-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--sb-line);
}

.sb-land-header-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-land-header .sb-brand { margin-right: auto; }

/* hero -------------------------------------------------------------------- */

.sb-hero {
    background: var(--sb-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 46px 16px 52px;
    text-align: center;
}

.sb-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -180px;
    width: 520px;
    height: 520px;
    margin-left: -260px;
    border-radius: 50%;
    background: rgba(18, 87, 224, .34);
}

.sb-hero-in { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.sb-hero-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--sb-r-lg);
    padding: 8px;
    margin: 0 auto 22px;
    display: block;
}

.sb-hero h1 {
    color: #fff;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.sb-hero h1 em { font-style: normal; color: #7fb0ff; }

.sb-hero p.lede {
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 14px auto 0;
    max-width: 560px;
}

.sb-hero-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
    flex-wrap: wrap;
}

.sb-hero-cta .sb-btn { min-width: 168px; }

.sb-hero-cta .sb-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.sb-hero-cta .sb-btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.sb-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 34px;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--sb-r);
    overflow: hidden;
}

.sb-hero-stat { background: var(--sb-navy); padding: 14px 8px; }

.sb-hero-stat b {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.sb-hero-stat span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    margin-top: 5px;
}

/* content bands ----------------------------------------------------------- */

.sb-band { padding: 42px 16px; }
.sb-band.tint { background: var(--sb-bg-2); border-block: 1px solid var(--sb-line); }
.sb-band-in { max-width: 1000px; margin: 0 auto; }

.sb-band-head { text-align: center; margin-bottom: 26px; }

.sb-band-head h2 {
    font-size: 23px;
    letter-spacing: -.03em;
    color: var(--sb-navy);
}

.sb-band-head p {
    font-size: 13.5px;
    color: var(--sb-muted);
    margin: 9px auto 0;
    max-width: 540px;
    line-height: 1.6;
}

/* the two products -------------------------------------------------------- */

.sb-prod-grid { display: grid; gap: 14px; }

.sb-prod {
    background: #fff;
    border: 1px solid var(--sb-line);
    border-top: 4px solid var(--sb-blue);
    border-radius: var(--sb-r);
    padding: 22px 20px;
}

.sb-prod-ico {
    width: 44px;
    height: 44px;
    border-radius: var(--sb-r);
    background: var(--sb-blue-tint);
    color: var(--sb-blue);
    display: grid;
    place-items: center;
    margin-bottom: 15px;
}

.sb-prod-ico svg { width: 22px; height: 22px; }
.sb-prod h3 { font-size: 17px; letter-spacing: -.02em; color: var(--sb-navy); }
.sb-prod p { font-size: 13.5px; color: var(--sb-text-2); line-height: 1.65; margin-top: 9px; }

/* numbered steps ---------------------------------------------------------- */

.sb-steps { display: grid; gap: 14px; counter-reset: sbstep; }

.sb-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sb-step-n {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sb-navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.sb-step h4 { font-size: 14.5px; color: var(--sb-navy); }
.sb-step p { font-size: 13px; color: var(--sb-text-2); line-height: 1.6; margin-top: 4px; }

/* closing call to action -------------------------------------------------- */

.sb-cta-band {
    background: var(--sb-blue);
    color: #fff;
    text-align: center;
    padding: 40px 16px;
}

.sb-cta-band h2 { color: #fff; font-size: 23px; letter-spacing: -.03em; }
.sb-cta-band p { color: rgba(255, 255, 255, .84); font-size: 13.5px; margin-top: 10px; }

.sb-cta-band .sb-btn {
    background: #fff;
    color: var(--sb-blue);
    margin-top: 20px;
    min-width: 200px;
}

.sb-cta-band .sb-btn:hover { background: var(--sb-blue-tint); color: var(--sb-blue-deep); }

/* footer ------------------------------------------------------------------ */

.sb-land-footer {
    background: var(--sb-navy);
    color: rgba(255, 255, 255, .7);
    padding: 34px 16px 26px;
}

.sb-land-footer-in { max-width: 1000px; margin: 0 auto; }

.sb-land-footer .cols {
    display: grid;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.sb-land-footer h5 {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.sb-land-footer a { display: block; font-size: 13px; color: rgba(255, 255, 255, .68); padding: 5px 0; }
.sb-land-footer a:hover { color: #fff; }
.sb-land-footer .brandcol img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: var(--sb-r-sm); padding: 4px; }
.sb-land-footer .brandcol p { font-size: 12.5px; line-height: 1.6; margin-top: 12px; max-width: 280px; }

.sb-land-footer .base {
    padding-top: 18px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sb-age {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .45);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

@media (min-width: 720px) {
    .sb-hero { padding: 64px 16px 70px; }
    .sb-hero h1 { font-size: 42px; }
    .sb-hero p.lede { font-size: 16px; }
    .sb-hero-logo { width: 112px; height: 112px; }
    .sb-band { padding: 58px 16px; }
    .sb-band-head h2 { font-size: 28px; }
    .sb-prod-grid { grid-template-columns: 1fr 1fr; }
    .sb-steps { grid-template-columns: repeat(3, 1fr); }
    .sb-land-footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .sb-cta-band h2 { font-size: 28px; }
}

/* ==========================================================================
   21. Utilities
   ========================================================================== */

.sb-mt-0 { margin-top: 0 !important; }
.sb-mt-1 { margin-top: 8px; }
.sb-mt-2 { margin-top: 14px; }
.sb-mt-3 { margin-top: 20px; }
.sb-mb-2 { margin-bottom: 14px; }
.sb-flex { display: flex; }
.sb-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-center { display: flex; align-items: center; gap: 8px; }
.sb-grow { flex: 1; min-width: 0; }
.sb-gap { gap: 9px; }
.sb-muted { color: var(--sb-muted); }
.sb-faint { color: var(--sb-faint); }
.sb-ok { color: var(--sb-win); }
.sb-bad { color: var(--sb-danger); }
.sb-warn-c { color: var(--sb-warn); }
.sb-xs { font-size: 11px; }
.sb-sm { font-size: 12.5px; }
.sb-b { font-weight: 700; }
.sb-hide { display: none !important; }
.sb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-scroll-x { overflow-x: auto; scrollbar-width: none; }
.sb-scroll-x::-webkit-scrollbar { display: none; }

.sb-divider { height: 1px; background: var(--sb-line-soft); margin: 16px 0; }

.sb-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-r-sm);
    word-break: break-all;
}

.sb-copy code { flex: 1; font-size: 12px; color: var(--sb-navy); font-family: var(--sb-num); }

.sb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-blue);
    padding: 8px 0;
}

.sb-back:hover { text-decoration: underline; }

.sb-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.sb-app ::-webkit-scrollbar-track { background: var(--sb-surface-2); }
.sb-app ::-webkit-scrollbar-thumb { background: var(--sb-line-hard); border-radius: 5px; border: 2px solid var(--sb-surface-2); }
.sb-app ::-webkit-scrollbar-thumb:hover { background: var(--sb-muted); }

/* ==========================================================================
   22. Breakpoints
   ========================================================================== */

@media (min-width: 480px) {
    .sb-stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .sb-toasts { left: auto; width: 374px; }
}

@media (min-width: 768px) {
    .sb-shell { padding: 0 18px; padding-top: calc(var(--sb-header-h) + 18px); padding-bottom: 40px; }
    .sb-search-wrap { display: block; }
    .sb-rev-hero { padding: 26px; }
    .sb-rev-hero h2 { font-size: 24px; }
    .sb-oddsrow { min-height: 58px; padding: 0 16px; }
    .sb-oddsrow-score { font-size: 18px; }
    .sb-quick-grid { gap: 1px; }
}

@media (min-width: 1024px) {
    .sb-nav { display: flex; }
    .sb-bottomnav { display: none; }
    .sb-slip-fab { display: none !important; }

    .sb-shell { padding-bottom: 48px; }

    /* No align-items:start — the aside must stretch the full row height or the
       sticky slip has no track to travel along. */
    .sb-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--sb-slip-w);
        gap: 18px;
    }

    .sb-layout.no-slip { grid-template-columns: minmax(0, 1fr); }
    .sb-aside { display: block; }
    .sb-brand-name { font-size: 16px; }
    .sb-stat-grid { grid-template-columns: repeat(4, 1fr); }
    .sb-toasts { top: calc(var(--sb-header-h) + 14px); right: 18px; }
    .sb-match { padding: 13px 16px; }

    /* Two columns of vertical rows once there is room — still vertical lists,
       just side by side. */
    .sb-oddslist.split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
    }

    .sb-oddslist.split .sb-oddsgroup { grid-column: 1 / -1; }
    .sb-oddslist.split .sb-oddsrow:nth-child(even) { border-left-width: 3px; }
}

@media (min-width: 1280px) {
    :root { --sb-slip-w: 360px; }
}

@media (max-width: 359px) {
    .sb-shell { padding-left: 9px; padding-right: 9px; }
    .sb-brand-name { display: none; }
    .sb-balance-val { font-size: 12px; padding: 0 8px; }
    .sb-oddsrow { grid-template-columns: minmax(46px, auto) 1fr auto auto; gap: 8px; padding: 0 11px; }
    .sb-oddsrow-score { font-size: 15px; }
    .sb-oddsrow-rate { font-size: 14px; }
    .sb-oddsrow-label { display: none; }
    .sb-rev-steps { grid-template-columns: 1fr; }
    .sb-bet-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-bottomnav a { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-app *, .sb-app *::before, .sb-app *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   23. Legacy shell compatibility
   Pages not yet rebuilt still use the old template markup. These rules give
   them the light palette so the whole site reads as one product.
   ========================================================================== */

.sb-legacy .header.fixed-top {
    background: #fff !important;
    border-bottom: 1px solid var(--sb-line) !important;
    height: var(--sb-header-h);
    z-index: 1030;
}

.sb-legacy .header h5,
.sb-legacy .header h6,
.sb-legacy .header .text-dark { color: var(--sb-navy) !important; }
.sb-legacy .header .icon-back { color: var(--sb-blue) !important; }

.sb-legacy .app-content {
    background: transparent !important;
    padding-top: calc(var(--sb-header-h) + 14px);
    padding-bottom: calc(var(--sb-nav-h) + 30px);
}

.sb-legacy .tf-container { max-width: 880px; margin: 0 auto; padding: 0 12px; }

.sb-legacy .card,
.sb-legacy .card-header,
.sb-legacy .card-body,
.sb-legacy .list-group-item,
.sb-legacy .list-task-item,
.sb-legacy .list-view-item,
.sb-legacy .content-task,
.sb-legacy .box-task,
.sb-legacy .event-card,
.sb-legacy .match-card,
.sb-legacy .balance-card,
.sb-legacy .stats-card,
.sb-legacy .custom-card,
.sb-legacy .gradient-card,
.sb-legacy .item-check,
.sb-legacy .search-box,
.sb-legacy .box-ip,
.sb-legacy .accordion,
.sb-legacy .accordion-item,
.sb-legacy .accordion-button,
.sb-legacy .accordion-body,
.sb-legacy .modal-content,
.sb-legacy .offcanvas,
.sb-legacy .toast,
.sb-legacy .toast-header,
.sb-legacy .toast-body,
.sb-legacy .dropdown-menu,
.sb-legacy .modal-boxContent {
    background: #fff !important;
    background-image: none !important;
    border-color: var(--sb-line) !important;
    color: var(--sb-text) !important;
    box-shadow: none !important;
}

.sb-legacy .card,
.sb-legacy .list-task-item,
.sb-legacy .event-card,
.sb-legacy .match-card,
.sb-legacy .modal-content,
.sb-legacy .accordion-item {
    border: 1px solid var(--sb-line) !important;
    border-radius: var(--sb-r) !important;
}

.sb-legacy .list-task-item a,
.sb-legacy .list-task-item label { color: var(--sb-navy) !important; }
.sb-legacy .list-task-item { padding: 2px; }
.sb-legacy .content-task { padding: 14px 16px; display: block; }

.sb-legacy .bg-white { background: #fff !important; }
.sb-legacy .bg-dark { background: var(--sb-navy) !important; color: #fff !important; }
.sb-legacy .bg-dark .text-white { color: #fff !important; }

.sb-legacy .text-dark,
.sb-legacy .text-black,
.sb-legacy .text-black-2,
.sb-legacy .text-color-theme { color: var(--sb-navy) !important; }

.sb-legacy .text-black-4,
.sb-legacy .text-black-5,
.sb-legacy .text-mute { color: var(--sb-muted) !important; }

.sb-legacy .table { background: #fff !important; color: var(--sb-text); border-color: var(--sb-line); }
.sb-legacy .table th, .sb-legacy .table td { border-color: var(--sb-line-soft) !important; color: var(--sb-text); }
.sb-legacy .table tbody tr:nth-child(odd) { background: var(--sb-surface-2) !important; }
.sb-legacy .table-header, .sb-legacy .table thead { background: var(--sb-navy) !important; color: #fff !important; }
.sb-legacy .table-header th { color: #fff !important; }

.sb-legacy .form-control,
.sb-legacy select.form-control,
.sb-legacy input[type="text"],
.sb-legacy input[type="number"],
.sb-legacy input[type="password"] {
    background: #fff !important;
    border: 1px solid var(--sb-line-hard) !important;
    color: var(--sb-text) !important;
    border-radius: var(--sb-r-sm) !important;
    height: 46px;
}

.sb-legacy .form-control:focus { border-color: var(--sb-blue) !important; box-shadow: var(--sb-ring) !important; }
.sb-legacy .form-control::placeholder { color: var(--sb-faint) !important; }

.sb-legacy form > button:not(.btn),
.sb-legacy .tf-btn {
    background: var(--sb-blue) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--sb-r-sm) !important;
    height: 46px;
    width: 100%;
    font-weight: 700 !important;
    font-size: 14px;
}

.sb-legacy .tf-btn.danger, .sb-legacy .btn-danger { background: var(--sb-danger) !important; color: #fff !important; }
.sb-legacy .btn-success { background: var(--sb-win) !important; color: #fff !important; border: 0 !important; }

.sb-legacy .line-bt, .sb-legacy .border-bottom, .sb-legacy .border-top { border-color: var(--sb-line-soft) !important; }
.sb-legacy .bg-grey-2, .sb-legacy .bg-soft-grey { background: var(--sb-surface-2) !important; }
.sb-legacy .bg-mq-orange { background: #fff !important; border-radius: var(--sb-r-sm); border: 1px solid var(--sb-line); border-left: 3px solid var(--sb-blue); }
.sb-legacy marquee { color: var(--sb-text-2) !important; }
.sb-legacy .menubar-footer { display: none !important; }
.sb-legacy .preload-container { background: var(--sb-bg-2) !important; }

.sb-legacy .nav-tabs { border: 0; }

.sb-legacy .nav-tabs .nav-link {
    color: var(--sb-text-2) !important;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 700;
}

.sb-legacy .nav-tabs .nav-link.active {
    color: var(--sb-blue) !important;
    border-bottom-color: var(--sb-blue);
    background: transparent;
}

/* ==========================================================================
   24. Specificity guard

   css/styles.css styles bare `button` and `input[type=…]` elements — element
   selectors that outrank a single class. Everything below re-asserts the
   design system with a `.sb-app` prefix so components win without !important.
   Keep this block LAST.
   ========================================================================== */

.sb-app button.sb-btn,
.sb-app button.sb-chip,
.sb-app button.sb-tab,
.sb-app button.sb-oddsrow-bet,
.sb-app button.sb-iconbtn,
.sb-app button.sb-slip-tab,
.sb-app button.sb-slip-clear,
.sb-app button.sb-slip-fab,
.sb-app button.sb-sel-x,
.sb-app button.sb-toast-x,
.sb-app button.sb-match-fav,
.sb-app button.sb-input-action,
.sb-app .sb-promo-dots button {
    line-height: normal;
    font-family: inherit;
    transition: none;
}

/* -- buttons -------------------------------------------------------------- */

.sb-app .sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--sb-r-sm);
    border: 1px solid transparent;
    background: var(--sb-surface-3);
    color: var(--sb-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    transition: background .14s, border-color .14s, color .14s;
}

.sb-app .sb-btn-primary { background: var(--sb-blue); color: #fff; }
.sb-app .sb-btn-primary:hover:not(:disabled) { background: var(--sb-blue-deep); }
.sb-app .sb-btn-blue { background: var(--sb-navy); color: #fff; }
.sb-app .sb-btn-danger { background: var(--sb-danger); color: #fff; }
.sb-app .sb-btn-danger:hover:not(:disabled) { background: #b31a2c; }
.sb-app .sb-btn-ghost { background: #fff; border-color: var(--sb-line-hard); color: var(--sb-text-2); }
.sb-app .sb-btn-ghost:hover:not(:disabled) { background: var(--sb-blue-tint); border-color: var(--sb-blue); color: var(--sb-blue); }
.sb-app .sb-btn-soft { background: var(--sb-blue-tint); color: var(--sb-blue); border-color: var(--sb-blue-tint-2); }
.sb-app .sb-btn-soft:hover:not(:disabled) { background: var(--sb-blue-tint-2); }
.sb-app .sb-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.sb-app .sb-btn-lg { height: 48px; font-size: 14.5px; }

.sb-app button.sb-btn-block,
.sb-app a.sb-btn-block,
.sb-app .sb-btn-block { display: flex; width: 100%; }

/* -- links that carry their own colour -----------------------------------
   `.sb-app a { color: inherit }` (0,1,1) outranks a bare component class
   (0,1,0), so any <a> with its own colour has to be restated here. */

.sb-app a.sb-avatar { color: #fff; }
.sb-app a.sb-balance-add { color: #fff; }
.sb-app a.sb-back { color: var(--sb-blue); }
.sb-app a.sb-link { color: var(--sb-blue); }
.sb-app a.sb-quick { color: #fff; }
.sb-app a.sb-iconbtn { color: var(--sb-text-2); }
.sb-app a.sb-iconbtn:hover { color: var(--sb-blue); }

/* -- icon-only controls --------------------------------------------------- */

.sb-app .sb-iconbtn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--sb-r-sm);
    border: 1px solid var(--sb-line);
    background: #fff;
    color: var(--sb-text-2);
    display: inline-grid;
    place-items: center;
    font-size: inherit;
}

.sb-app .sb-iconbtn:hover { background: var(--sb-blue-tint); border-color: var(--sb-blue); color: var(--sb-blue); }

.sb-app .sb-input-action,
.sb-app .sb-sel-x,
.sb-app .sb-toast-x,
.sb-app .sb-match-fav,
.sb-app .sb-slip-clear {
    display: inline-grid;
    place-items: center;
    width: auto;
    padding: 6px;
    background: none;
    border: 0;
    border-radius: var(--sb-r-xs);
    color: var(--sb-faint);
    font-size: inherit;
    font-weight: 600;
}

.sb-app .sb-input-action:hover,
.sb-app .sb-sel-x:hover,
.sb-app .sb-toast-x:hover { background: none; color: var(--sb-text); }

.sb-app .sb-slip-clear { color: rgba(255, 255, 255, .62); font-size: 11px; font-weight: 700; padding: 4px 2px; }
.sb-app .sb-slip-clear:hover { background: none; color: #fff; }
.sb-app .sb-match-fav { padding: 2px; }
.sb-app .sb-match-fav:hover { background: none; color: var(--sb-warn); }
.sb-app .sb-match-fav.active { color: var(--sb-warn); }
.sb-app .sb-toast-x { font-size: 17px; line-height: 1; padding: 0 2px; }

/* -- chips, tabs ---------------------------------------------------------- */

.sb-app .sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    max-width: 190px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
    padding: 0 13px;
    border-radius: var(--sb-r-sm);
    background: #fff;
    border: 1px solid var(--sb-line-hard);
    color: var(--sb-text-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.sb-app .sb-chip:hover { background: var(--sb-blue-tint); border-color: var(--sb-blue); color: var(--sb-blue); }
.sb-app .sb-chip.active { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; }

.sb-app .sb-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    width: auto;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sb-text-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.sb-app .sb-tab:hover { background: var(--sb-surface-2); }
.sb-app .sb-tab.active { color: var(--sb-blue); border-bottom-color: var(--sb-blue); background: transparent; }

.sb-app .sb-slip-tab {
    display: block;
    flex: 1;
    width: auto;
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--sb-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.sb-app .sb-slip-tab:hover { background: none; }
.sb-app .sb-slip-tab.active { color: var(--sb-blue); border-bottom-color: var(--sb-blue); background: #fff; }

/* -- vertical odds rows --------------------------------------------------- */

.sb-app .sb-oddsrow + .sb-oddsrow { border-top: 1px solid var(--sb-line-soft); }
.sb-app .sb-oddsrow:hover { background: var(--sb-blue-tint); border-left-color: var(--sb-blue-tint-2); }
.sb-app .sb-oddsrow.active { background: var(--sb-blue-tint); border-left-color: var(--sb-blue); }

.sb-app button.sb-oddsrow-bet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--sb-blue);
    border-radius: var(--sb-r-sm);
    background: #fff;
    color: var(--sb-blue);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
}

.sb-app .sb-oddsrow:hover button.sb-oddsrow-bet,
.sb-app button.sb-oddsrow-bet:hover { background: var(--sb-blue); color: #fff; }
.sb-app .sb-oddsrow.active button.sb-oddsrow-bet { background: var(--sb-blue); color: #fff; }

.sb-app .sb-slip-fab {
    display: none;
    align-items: center;
    gap: 9px;
    width: auto;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--sb-r-sm);
    background: var(--sb-blue);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1;
}

.sb-app .sb-slip-fab.show { display: flex; }
.sb-app .sb-slip-fab:hover { background: var(--sb-blue-deep); }

.sb-app .sb-promo-dots button {
    display: block;
    width: 20px;
    height: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .5);
    line-height: 1;
}

.sb-app .sb-promo-dots button.active { background: #fff; }

/* -- fields --------------------------------------------------------------- */

.sb-app input.sb-input,
.sb-app select.sb-select,
.sb-app textarea.sb-input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border-radius: var(--sb-r-sm);
    background-color: #fff;
    border: 1px solid var(--sb-line-hard);
    color: var(--sb-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: normal;
}

.sb-app textarea.sb-input { height: auto; padding: 11px 13px; line-height: 1.5; }

.sb-app input.sb-input:focus,
.sb-app select.sb-select:focus,
.sb-app textarea.sb-input:focus {
    background-color: #fff;
    border-color: var(--sb-blue);
    box-shadow: var(--sb-ring);
}

.sb-app input.sb-input.is-invalid { border-color: var(--sb-danger); }
.sb-app input.sb-input[readonly] { background-color: var(--sb-surface-2); color: var(--sb-muted); }
.sb-app input.sb-input::placeholder,
.sb-app textarea.sb-input::placeholder { color: var(--sb-faint); font-weight: 500; }
.sb-app select.sb-select { padding-right: 34px; }

.sb-app .sb-input-group .sb-input-icon + input.sb-input,
.sb-app .sb-input-group .sb-input-icon + .sb-input { padding-left: 40px; }
.sb-app .sb-search-wrap input.sb-input { height: 36px; font-size: 13px; padding-left: 34px; background-color: var(--sb-surface-2); }
.sb-app .sb-search-wrap input.sb-input:focus { background-color: #fff; }
.sb-app .sb-sel-stake input.sb-input { height: 38px; font-size: 13.5px; }

.sb-app .sb-input-group { position: relative; display: block; }

.sb-app .sb-input-group .sb-input-action {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
}

.sb-app input.sb-input[type=number] { -moz-appearance: textfield; }
.sb-app input.sb-input[type=number]::-webkit-outer-spin-button,
.sb-app input.sb-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sb-app .sb-label { color: var(--sb-text-2); font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.sb-app form label.sb-label { color: var(--sb-text-2); margin-bottom: 6px; }