@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    /* ===== EXACT VALUES FROM 1XBET :root CSS ===== */

    --primary-0-bg: 208, 62%, 40%;
    --primary-0-sep: 208, 43%, 49%;
    --primary-0-sep-alt: 210, 57%, 26%;
    --primary-5-bg: 208, 62%, 45%;
    --primary-10-bg: 208, 63%, 51%;
    --primary-15-bg: 209, 46%, 47%;
    --primary-25-bg: 208, 35%, 55%;
    --primary-30-bg: 208, 32%, 59%;
    --primary-75-bg: 208, 100%, 62%;
    --primary-80-bg: 208, 100%, 86%;

    --primary--20-bg: 209, 60%, 33%;

    --primary--30-bg: 210, 58%, 29%;

    --primary--40-bg: 210, 57%, 26%;

    --primary--40-clr: 0, 0%, 100%;
    --primary--40-clr-accent: 82, 56%, 50%;
    --primary--40-clr-bad: 359, 100%, 67%;
    --primary--40-clr-decent: 208, 37%, 73%;
    --primary--40-clr-good: 82, 56%, 50%;
    --primary--40-clr-primary: 208, 100%, 62%;
    --primary--40-clr-strong: 209, 31%, 87%;
    --primary--40-clr-strong-alt: 0, 0%, 100%;
    --primary--40-sep: 208, 43%, 63%;
    --primary--40-sep-alt: 210, 57%, 64%;

    --primary--20-clr: 0, 0%, 100%;
    --primary--20-clr-decent: 208, 37%, 73%;
    --primary--20-clr-strong: 209, 31%, 87%;

    --accent-0-bg: 82, 57%, 43%;
    --accent-15-bg: 82, 56%, 50%;

    /* ===== MAPPED SHORTCUTS ===== */
    --bg-page: hsl(var(--primary--40-bg));

    --bg-header-bottom: hsl(var(--primary--20-bg));

    --bg-card: hsl(var(--primary-0-bg));

    --bg-elevated: hsl(var(--primary-5-bg));

    --bg-active: hsl(var(--primary-10-bg));

    --bg-input: hsl(210, 57%, 20%);

    --bg-center-panel: hsl(210, 38%, 17%);
    --bg-sidebar: var(--bg-center-panel);
    --bg-darkest: hsl(210, 45%, 12%);
    --bg-main: hsl(210, 40%, 15%);
    --content-hero-radius: 12px;

    --top-events-card-bg: #215b90;

    --sb-surface-light: #ffffff;
    --sb-surface-light-soft: #f5f7fa;
    --sb-text-on-light: #1a2332;
    --sb-text-muted-on-light: #5c6b7f;
    --sb-border-light: #e2e8f0;

    --sb-primary-blue: #276aa5;
    --sb-accordion-bg: var(--sb-primary-blue);
    --sb-sports-active-bg: #e8f0fa;
    --sb-league-header-bg: #ffffff;

    --sb-ref-tab-live: #2a619c;
    --sb-ref-tab-line: #3d5e86;
    --sb-ref-subbar-bg: #f0f4f8;
    --sb-ref-row-text: #33557a;
    --sb-ref-border: #e0e6ed;
    --sb-ref-live-accent: #2a619c;
    --sb-ref-dot-live: #4ade80;

    --clr-white: hsl(var(--primary--40-clr));
    --clr-strong: hsl(var(--primary--40-clr-strong));
    --clr-text: hsl(208, 37%, 80%);
    --clr-decent: hsl(var(--primary--40-clr-decent));
    --clr-muted: hsl(var(--primary-0-sep));
    --clr-faint: hsl(208, 43%, 35%);
    --clr-link: hsl(var(--primary--40-clr-primary));
    --clr-accent: hsl(var(--accent-15-bg));
    --clr-accent-dark: hsl(var(--accent-0-bg));
    --clr-gold: hsl(40, 85%, 50%);
    --clr-red: hsl(var(--primary--40-clr-bad));
    --clr-yellow: hsl(40, 100%, 65%);

    --sep: hsla(var(--primary--40-clr), 0.06);
    --sep-light: hsla(var(--primary--40-clr), 0.10);

    --gutter: 0.5rem;
    --border-radius: 8px;
    --radius: var(--border-radius);
    --gap: 8px;

    --header-height: 100px;

    --sidebar-col-width: 254px;
    --content-center-width: 1388px;
    --layout-max-width: 1896px;

    --layout-col-pad-top: 0;

    --header-radius-btn: var(--border-radius);
    --header-radius-meta: var(--border-radius);
    --font-family: "Roboto", sans-serif;
    --font-family-condensed: "Roboto Condensed", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-family);
    background: var(--bg-page);
    color: var(--clr-white);
    font-size: 12px;
    line-height: 1.4;
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: var(--bg-darkest); }
::-webkit-scrollbar-thumb { background: var(--sep); border-radius:3px; }

/* ===== HEADER ===== */
.header {
    --hsl-bg: var(--primary--40-bg);
    --hsl-bg-bottom: var(--primary--20-bg);
    background-color: hsla(var(--hsl-bg), 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    width: 100%;
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 2px 8px 6px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 0 .625rem hsla(var(--hsl-bg), .5);
    box-sizing: border-box;
}

.header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    margin: 0 4px 0 0;
    padding: 4px;
}

.header__logo img {
    height: 24px;
    width: auto;
    display: block;
}

.header-nav {
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-width: 0;
    background: hsla(var(--hsl-bg-bottom), 1);
    border-radius: 6px;
    margin-top: 4px;
    min-height: 40px;
    height: 40px;
    padding: 0 4px 0 0;
    box-sizing: border-box;
}

.header-nav__list {
    flex: 1;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.header-nav__item {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 14px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.35px;
    white-space: nowrap;
    background: transparent;
    border: none;
    transition: background .15s, color .15s;
}

.header-nav__link > span {
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.header-nav__ico {
    font-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.header-nav__item:first-child .header-nav__link {
    border-radius: 4px 0 0 4px;
    padding-left: 12px;
    padding-right: 14px;
}
.header-nav__link:hover { color: #fff; background: hsla(0, 0%, 100%, 0.06); }
.header-nav__link--highlight {
    color: #fff;
}
.header-nav__link--highlight .header-nav__angle {
    opacity: 0.75;
}
.header-nav__angle {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    align-self: center;
    fill: currentColor;
    opacity: 0.4;
    margin-left: 2px;
    display: block;
}

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

.header-icon-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-icon-btn {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: #276aa5;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .15s;
}

.header-icon-btn i {
    font-size: 14px;
    line-height: 1;
    opacity: 0.95;
}

.header-icon-btn .fa-dollar-sign {
    color: var(--clr-accent);
}

.header-icon-btn:hover {
    background: #235a8f;
    color: #fff;
}

.header-icon-btn:active {
    box-shadow: none;
}

.header-icon-btn--badge {
    padding: 0;
}

.header-icon-btn__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--clr-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
    border: 2px solid hsl(var(--primary--40-bg));
    pointer-events: none;
}

.btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    min-width: 2rem;
    padding: 0.35rem 1.1rem;
    background: var(--clr-accent-dark);
    color: #fff;
    border: none;
    border-radius: var(--header-radius-btn);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .35px;
    line-height: 1.25;
    box-shadow: none;
    transition: background .15s, transform .05s;
}
.btn-register:hover { background: var(--clr-accent); }
.btn-register:active { transform: scale(0.98); }

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    min-width: 2rem;
    padding: 0.35rem 1.1rem;
    background: #276aa5;
    color: #fff;
    border: none;
    border-radius: var(--header-radius-btn);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .35px;
    line-height: 1.25;
    box-shadow: none;
    transition: background .15s, transform .05s;
}
.btn-login:hover {
    background: #235a8f;
}
.btn-login:active { transform: scale(0.98); }

/* ===== Выпадающая форма входа (кнопка «Вход») ===== */
.header-login-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 110;
}

.header-login-wrap .btn-login[aria-expanded="true"] {
    background: #235a8f;
}

.login-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    transform: translateX(calc(-100% + 27px));
    width: min(340px, calc(100vw - 24px));
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
    z-index: 120;
}

.login-dropdown[hidden] {
    display: none !important;
}

.login-dropdown:not([hidden]) {
    display: block;
}

.login-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 18px;
    left: auto;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.04));
}

.login-dropdown__inner {
    background: #ffffff;
    border-radius: 10px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) inset;
}

.login-dropdown__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-dropdown__field {
    position: relative;
    display: flex;
    align-items: stretch;
}

.login-dropdown__field--with-suffix .login-dropdown__input {
    padding-right: 88px;
    border: 1px solid #9ec5e8;
    border-radius: 8px;
    min-height: 42px;
    padding-left: 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1a2332;
    width: 100%;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-dropdown__field--with-suffix .login-dropdown__input::placeholder {
    color: #8aa4bd;
}

.login-dropdown__field--with-suffix .login-dropdown__input:focus {
    border-color: #276aa5;
    box-shadow: 0 0 0 2px rgba(39, 106, 165, 0.15);
}

.login-dropdown__suffix {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    gap: 0;
    padding-right: 8px;
    background: #fff;
    border-radius: 0 7px 7px 0;
    pointer-events: auto;
}

.login-dropdown__vsep {
    width: 1px;
    align-self: stretch;
    margin: 8px 3px 8px 0;
    background: #c5d8eb;
    flex-shrink: 0;
}

.login-dropdown__suffix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #276aa5;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.login-dropdown__suffix-btn:hover {
    background: rgba(39, 106, 165, 0.08);
}

.login-dropdown__suffix-btn .login-dropdown__mode-icon {
    font-size: 13px;
}

.login-dropdown__suffix-btn--eye .fa-eye,
.login-dropdown__suffix-btn--eye .fa-eye-slash {
    font-size: 13px;
}

.login-dropdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.login-dropdown__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #276aa5;
    cursor: pointer;
    user-select: none;
}

.login-dropdown__remember input {
    width: 15px;
    height: 15px;
    accent-color: #276aa5;
    cursor: pointer;
}

.login-dropdown__forgot {
    font-size: 13px;
    font-weight: 500;
    color: #276aa5;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.login-dropdown__forgot:hover {
    color: #1a5080;
}

.login-dropdown__submit {
    margin-top: 6px;
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: #88b035;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}

.login-dropdown__submit:hover {
    background: #7aa02e;
}

.login-dropdown__submit:active {
    transform: scale(0.99);
}

.header-meta {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-radius: var(--header-radius-meta);
    overflow: hidden;
    background: #276aa5;
    border: none;
    box-shadow: none;
}

.header-meta__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0.25rem 1rem;
    margin: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

.header-meta__segment:hover {
    background: rgba(255, 255, 255, 0.08);
}

a.header-meta__segment {
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.header-meta__segment .fa-gear {
    font-size: 14px;
    opacity: 0.95;
}

.header-meta__chev {
    font-size: 8px;
    opacity: 0.75;
}

.header-meta__divider {
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    background: #1d4268;
    margin: 0;
}

.header-meta__segment--lang {
    gap: 0.35rem;
}

.header-meta__flag {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fff 33%, #0039a6 33%, #0039a6 66%, #d52b1e 66%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.header-meta__lang-text {
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ===== CENTER COLUMN ===== */
.content-center {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: start;
    background: var(--bg-page);

    padding: var(--layout-col-pad-top) 2px 14px 2px;
}

.content-hero {
    background: transparent;
    margin-bottom: 4px;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* ===== PROMO SLIDER (тот же фон что у страницы, без отдельной «плашки») ===== */
.promo-slider {
    position: relative;
    background: transparent;
    overflow: hidden;
    border-radius: var(--content-hero-radius);
    margin-bottom: 6px;
}

.promo-slider__inner {
    display: flex;
    transition: transform .5s ease;
}

.promo-slide {
    flex: 0 0 100%;
    min-height: 200px;
    height: clamp(200px, 22vw, 240px);
    position: relative;
    overflow: hidden;
    background: #050810;
}

.promo-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #000 0%,
        #000 12%,
        rgba(5, 12, 28, 0.97) 26%,
        rgba(12, 28, 72, 0.82) 42%,
        rgba(22, 48, 120, 0.45) 58%,
        rgba(30, 60, 140, 0.12) 74%,
        transparent 90%
    );
}

.promo-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    object-position: 68% center;
    display: block;
    z-index: 0;
}

.promo-slide__overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: min(520px, 58%);
    padding: 20px 20px 24px 32px;
    box-sizing: border-box;
    pointer-events: none;
}

.promo-slide__overlay a {
    pointer-events: auto;
}

.promo-slide__title {
    margin: 0 0 8px 0;
    font-size: 35px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.18;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
}

.promo-slide__desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.45;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-slide__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 0;
}

.promo-slide__cta--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 6px;
    background: #8fd636;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s;
}

.promo-slide__cta--primary:hover {
    background: #7fc428;
}

.promo-slide__cta--primary:active {
    background: #72b322;
}

.promo-slide__cta--link {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.promo-slide__cta--link:hover {
    color: #fff;
}

.promo-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    z-index: 3;
}

.promo-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    cursor: pointer;
    border: none;
    transition: width .2s, border-radius .2s, background .2s;
}

.promo-dot.active {
    width: 24px;
    border-radius: 999px;
    background: #fff;
}

.promo-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.42);
    font-size: 15px;
    font-weight: 300;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.promo-slider__arrow--left { left: 10px; }
.promo-slider__arrow--right { right: 10px; }
.promo-slider__arrow:hover {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(0, 0, 0, 0.18);
}

/* ===== BANNER GAMES (подпись под превью, не на картинке) ===== */
.banner-section {
    background: transparent;
    padding: 0 0 2px;
}

.banner-games {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.15);
}

.banner-games::-webkit-scrollbar {
    height: 5px;
}

.banner-games::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.banner-games::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.banner-games::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
}

.banner-games::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.banner-game-card {
    flex: 0 0 176px;
    width: 176px;
    min-width: 176px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    background: hsl(var(--primary-0-bg));
}

.banner-game-card:hover {
    opacity: 0.95;
}

.banner-game-card__thumb {
    display: block;
    height: 102px;
    flex-shrink: 0;
    overflow: hidden;
    background: #0a1628;
}

.banner-game-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-game-card__caption {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(220, 228, 240, 0.88);
    text-align: center;
    line-height: 1.25;
    background: var(--top-events-card-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== MAIN LAYOUT (matches site's .layout grid) ===== */
.main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-col-width) 1fr var(--sidebar-col-width);
    align-items: start;
    column-gap: 0;
    min-height: calc(100vh - var(--header-height));
    width: 100%;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    transition: grid-template-columns 0.22s ease;
}

/* ----- «Скрыть блок»: сетка и состояния ----- */

.sb-hide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border: none;
    border-radius: 6px;
    background: #205583;
    color: hsl(208, 40%, 78%);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
}
.sb-hide-btn:hover {
    background: #2a6898;
    color: #fff;
}
.sb-hide-btn--right {
    justify-content: center;
    width: 100%;
    margin: 0 0 4px;
}
.sb-hide-btn__chevs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sb-hide-btn__chevs i {
    font-size: 13px;
    line-height: 1;
    opacity: 0.95;
}

.sb-icon-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
    width: 40px;
    box-sizing: border-box;
}
.sb-icon-strip__open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #205583;
    color: hsl(208, 42%, 78%);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.15s, color 0.15s;
}
.sb-icon-strip__open:hover {
    background: #2a6898;
    color: #fff;
}
.sb-icon-strip__open i {
    font-size: 13px;
    line-height: 1;
}
.sb-icon-strip__ico {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: hsl(208, 35%, 68%);
    line-height: 1;
    transition: color 0.12s;
}
.sb-icon-strip__ico--live {
    color: hsl(135, 65%, 55%);
}
.sb-icon-strip__ico:hover {
    color: #fff;
}
.sb-icon-strip__count {
    font-size: 9px;
    font-weight: 700;
    color: hsl(208, 35%, 65%);
    text-align: center;
    line-height: 1;
}

body.layout--hide-left .main-layout {
    grid-template-columns: 40px 1fr var(--sidebar-col-width);
}

/* ===== ПРАВЫЙ САЙДБАР: СВЁРНУТОЕ СОСТОЯНИЕ ===== */

.sb-right-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px;
    width: 40px;
    box-sizing: border-box;
}

.sb-right-strip__open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #205583;
    color: hsl(208, 42%, 78%);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background 0.15s, color 0.15s;
}
.sb-right-strip__open:hover {
    background: #2a6898;
    color: #fff;
}
.sb-right-strip__open i {
    font-size: 13px;
    line-height: 1;
}

.sb-right-strip__label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    white-space: nowrap;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    width: 32px;
    min-height: 90px;
    cursor: pointer;
    transition: opacity 0.15s;
    box-sizing: border-box;
}
.sb-right-strip__label:hover { opacity: 0.82; }
.sb-right-strip__label--reg {
    background: hsl(96, 40%, 42%);
}
.sb-right-strip__label--coupon {
    background: hsl(213, 58%, 36%);
}

body.auth-state-auth .sidebar-right .reg-block.reg-block--light {
    display: none !important;
}

body.auth-state-auth .sb-right-strip__label--reg {
    display: none !important;
}

body.auth-state-auth .coupon-register-btn {
    display: none !important;
}

.sidebar-right--collapsed .sidebar-right__inner {
    display: none !important;
}
.sidebar-right--collapsed .sb-right-strip {
    display: flex !important;
}

body.layout--hide-right .main-layout {
    grid-template-columns: var(--sidebar-col-width) 1fr 40px;
}
body.layout--hide-left.layout--hide-right .main-layout {
    grid-template-columns: 40px 1fr 40px;
}

.sb-hide-btn--panel {
    margin-top: 4px;
}
.sr-panel {
    margin-bottom: 6px;
}
.sr-panel:last-child {
    margin-bottom: 0;
}
.sr-panel--collapsed .sr-panel__body {
    display: none;
}
.sr-panel .reg-block--light {
    margin-top: 0;
}
.sr-panel .coupon-widget {
    margin-top: 0;
}

.sidebar-collapse-bar {
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px 3px;
    margin: 0 0 6px;
    background: hsl(210, 44%, 22%);
    border-radius: 4px;
    box-sizing: border-box;
}
.sidebar-collapse-bar--right {
    justify-content: flex-end;
}
.sidebar-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: hsl(208, 35%, 68%);
    cursor: pointer;
    transition: color 0.15s;
}
.sidebar-collapse-btn:hover { color: #fff; }
.sidebar-collapse-btn__chev { font-size: 11px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .main-layout { transition: none; }
}

/* ===== LEFT SIDEBAR ===== */
.sidebar-left {
    align-self: start;
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    min-width: 0;
    background: var(--bg-page);
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height));
    padding: var(--layout-col-pad-top) 0;
}
/* ===== ЛЕВЫЙ САЙДБАР: СВЁРНУТОЕ СОСТОЯНИЕ ===== */

.sidebar-left--collapsed .sb-hide-btn--left,
.sidebar-left--collapsed .sidebar-left__inner {
    display: none !important;
}
.sidebar-left--collapsed .sb-icon-strip {
    display: flex !important;
}

.sb-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.sb-item--accordion {
    background: var(--sb-accordion-bg);
    color: #fff;
    border-radius: 6px;
}

.sb-item--accordion:hover {
    background: #235d92;
    color: #fff;
}

.sb-item--accordion .sb-item__name,
.sb-item--accordion .sb-item__arrow {
    color: rgba(255, 255, 255, 0.95);
}

.sb-item--accordion i:not(.star):not(.green) {
    color: rgba(255, 255, 255, 0.85);
}

.sb-item--accordion i.star,
.sb-item--accordion i.green {
    color: #fff;
}

.sb-sports-panel {
    background: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0 0;
}

.sb-tabs {
    display: flex;
    width: 100%;
    border: none;
    gap: 0;
}

.sb-tab {
    flex: 1;
    margin: 0;
    padding: 10px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.82);
    background: var(--sb-ref-tab-line);
    transition: background 0.15s, color 0.15s;
}

.sb-tab:hover {
    color: #fff;
}

.sb-tab.active {
    color: #fff;
    background: var(--sb-ref-tab-live);
}

.sb-tab__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-ref-dot-live);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.sb-tab--live:not(.active) .sb-tab__dot {
    opacity: 0.45;
}

.sb-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sb-ref-subbar-bg);
    border-bottom: 1px solid var(--sb-ref-border);
    font-size: 12px;
}

.sb-subbar__left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}

.sb-subbar__all {
    font-weight: 700;
    color: var(--sb-ref-row-text);
}

.sb-subbar__all strong {
    font-weight: 700;
    color: var(--sb-ref-row-text);
}

.sb-subbar__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sb-ref-live-accent);
    font-weight: 600;
}

.sb-subbar__live i {
    font-size: 13px;
    opacity: 0.95;
}

.sb-subbar__globe {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sb-ref-live-accent);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s;
}

.sb-subbar__globe:hover {
    background: rgba(42, 97, 156, 0.1);
}

.sb-section-head {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-ref-row-text);
    background: var(--sb-ref-subbar-bg);
    border-bottom: 1px solid var(--sb-ref-border);
}

.sb-sports-panel .sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 12px 10px 14px;
    margin: 0;
    border-bottom: 1px solid var(--sb-ref-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--sb-ref-row-text);
    background: #fff;
}

.sb-sports-panel .sb-item:last-child {
    border-bottom: none;
}

.sb-sports-panel .sb-item:hover {
    background: #fafcfd;
}

.sb-sports-panel .sb-item.active {
    background: var(--sb-sports-active-bg);
    color: var(--sb-ref-row-text);
}

.sb-sports-panel .sb-item > i {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 14px;
    color: var(--sb-ref-row-text);
    opacity: 0.92;
}

.sb-sports-panel .sb-item.active > i {
    color: var(--sb-ref-row-text);
    opacity: 1;
}

.sb-sports-panel .sb-item__mid {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0;
}

.sb-sports-panel .sb-item--expand .sb-item__mid {
    align-items: center;
}

.sb-sports-panel .sb-item__name {
    flex: 0 1 auto;
    color: inherit;
}

.sb-sports-panel .sb-item__count {
    flex-shrink: 0;
    margin-left: 1px;
    font-size: inherit;
    font-weight: 500;
    color: var(--sb-ref-row-text);
    opacity: 0.92;
}

.sb-sports-panel .sb-item__arrow {
    flex-shrink: 0;
    margin-left: 6px;
    font-size: 10px;
    color: var(--sb-ref-row-text);
    opacity: 0.55;
}

.sb-sports-panel .sb-expand {
    border-bottom: 1px solid var(--sb-ref-border);
}

.sb-sports-panel .sb-expand:last-child {
    border-bottom: none;
}

.sb-sports-panel .sb-item--expand {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px 10px 14px;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: var(--sb-ref-row-text);
    background: #fff;
    box-sizing: border-box;
}

.sb-sports-panel .sb-item--expand:hover {
    background: #fafcfd;
}

.sb-sports-panel .sb-item--expand.active {
    background: var(--sb-sports-active-bg);
    color: var(--sb-ref-row-text);
}

.sb-sports-panel .sb-item--expand > i {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 14px;
    color: var(--sb-ref-row-text);
    opacity: 0.92;
}

.sb-sports-panel .sb-item--expand.active > i {
    opacity: 1;
}

.sb-sports-panel .sb-item__chev {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 100%;
    margin: -10px -12px -10px 0;
    padding: 0 10px;
    border-left: 1px solid var(--sb-ref-border);
    color: var(--sb-ref-row-text);
    opacity: 0.55;
    font-size: 10px;
}

.sb-sports-panel .sb-item--expand[aria-expanded="true"] .sb-item__chev i {
    transform: rotate(180deg);
}

.sb-sports-panel .sb-item__chev i {
    transition: transform 0.2s ease;
}

.sb-expand__panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px 10px;
    background: #eff3f6;
    border-top: 1px solid var(--sb-ref-border);
}

.sb-expand__panel[hidden] {
    display: none !important;
}

.sb-expand__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 9px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5b7d99;
    background: #dce6ee;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sb-expand__btn:hover {
    background: #d0dde8;
    color: #4a6a82;
}

.sb-sports-panel__footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 2px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--sb-ref-border);
}

.sb-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    gap: 7px;
    border-bottom: 1px solid rgba(26, 53, 80, 0.5);
    cursor: pointer;
    font-size: 11px;
    color: var(--clr-decent);
}
.sb-item:hover { background: rgba(255, 255, 255, 0.03); }
.sb-item.active { background: rgba(255, 255, 255, 0.05); color: var(--clr-white); }
.sb-item i { width: 16px; text-align: center; font-size: 12px; color: var(--clr-muted); flex-shrink: 0; }
.sb-item .star { color: var(--clr-gold); }
.sb-item .green { color: var(--clr-accent); }
.sb-item .red { color: var(--clr-red); }
.sb-item__name { flex: 1; }
.sb-item__count { color: var(--clr-muted); font-size: 10px; }
.sb-item__arrow { color: var(--clr-muted); font-size: 9px; margin-left: auto; }

.sb-item.sb-item--accordion {
    border: none;
    border-radius: 6px;
}

.sb-live-match { padding:5px 10px; border-bottom:1px solid var(--sep); font-size:10px; cursor:pointer; }
.sb-live-match:hover { background:rgba(255,255,255,.03); }
.sb-live-match__league { color:var(--clr-muted); font-size:9px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-live-match__row { display:flex; justify-content:space-between; color:var(--clr-decent); line-height:1.5; }
.sb-live-match__score { color:var(--clr-gold); font-weight:700; }

.sb-live-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--bg-darkest); border-bottom: 1px solid var(--sep); font-size: 10px; }
.sb-live-badge { background: var(--clr-red); color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 8px; font-weight: 700; }

/* ===== TOP-EVENTS: секция #205583; первая плашка того же цвета; карточки лиг #215b90; только скругления, без цветных рамок/теней ===== */
.top-events {
    --top-events-card-h: 64px;
    --top-events-card-w: min(44vw, 272px);
    --top-events-card-minw: 218px;
    --top-events-card-maxw: 272px;
    --top-events-section-bg: #205583;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    position: relative;
    padding: 2px 3px;
    margin-bottom: 10px;
    min-height: calc(var(--top-events-card-h) + 4px);
    background: var(--top-events-section-bg);
    border: none;
    border-radius: 10px;
    box-shadow: none;
}

.top-events__head {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    width: var(--top-events-card-w);
    min-width: var(--top-events-card-minw);
    max-width: var(--top-events-card-maxw);
    height: var(--top-events-card-h);
    min-height: var(--top-events-card-h);
    margin: 0;
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    border: none;
    box-shadow: none;

    background:
        radial-gradient(ellipse 130% 95% at 12% 42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 62%),
        radial-gradient(ellipse 110% 75% at 52% 108%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 58%),
        var(--top-events-section-bg);
}

.top-events__title {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: calc(100% - 58px);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    white-space: nowrap;
    text-align: left;
    text-shadow: none;
}

.top-events__nav {
    position: absolute;
    right: 5px;
    bottom: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
}

.top-events__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
}

.top-events__arrow:hover {
    background: transparent;
    color: #fff;
    opacity: 0.85;
}

.top-events-info-events-slider {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0 0 2px;
    background: transparent;
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
}

.top-events-info-events-slider .swiper-wrapper,
.top-events__track.swiper-wrapper {
    box-sizing: border-box;
    display: flex;
    height: auto;
    min-height: var(--top-events-card-h);
    align-items: center;
    align-self: center;
    gap: 2px;
    width: max-content;
    padding: 2px 2px 2px 0;
    will-change: transform;
    transition: transform 0.35s ease;
}

.top-events__card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--top-events-card-w);
    min-width: var(--top-events-card-minw);
    max-width: var(--top-events-card-maxw);
    height: var(--top-events-card-h);
    min-height: var(--top-events-card-h);
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: var(--top-events-card-bg);
    background-image: url(../img/img-3.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    box-shadow: none;
    transition: opacity 0.15s;
}

.top-events__card:hover {
    opacity: 0.95;
}

.top-events__card-art {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    z-index: 1;
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.top-events__card-art img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: right center;
    display: block;
    filter: none;
}

.top-events__card-name {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 42%;
    max-width: 42%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: left;
    text-shadow: none;
}

/* ===== МАТЧИ: верхняя панель (референс — тёмная полоса, поиск справа) ===== */
.ct-subtabs {
    display: flex;

    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding: 0 5px 0 12px;
    background: #276aa5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    border-radius: var(--radius) var(--radius) 0 0;
}
.ct-subtabs__icons-block {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 10px 0 0;

    border-right: 1px solid rgba(0, 0, 0, 0.42);
}
.ct-subtabs__icons {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-height: 0;
}
.ct-subtabs__ico {
    width: 31px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    box-sizing: border-box;
    background: transparent;
    color: hsl(208, 35%, 72%);
    font-size: 13px;
    cursor: pointer;
}
.ct-subtabs__ico:hover {
    background: hsla(0, 0%, 100%, 0.06);
    color: #fff;
}
.ct-subtabs__nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 0 4px;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}
.ct-subtab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 8px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;
    color: hsl(208, 32%, 78%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.ct-subtab:hover {
    color: #fff;
}
.ct-subtab.active {
    color: #fff;
    background: transparent;
}
.ct-subtab.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    border-radius: 1px 1px 0 0;
    background: hsl(var(--accent-15-bg));
}
.ct-subtabs__search.sf-search {
    margin-left: auto;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0;
}
.ct-subtabs__search.sf-search input {
    width: 200px;
    padding: 4px 28px 4px 8px;
    font-size: 11px;
    line-height: 1.35;
    border-radius: 6px;
    background: rgba(15, 45, 75, 0.35);
    border: 1px solid hsla(0, 0%, 100%, 0.14);
    color: #e8eef5;
}
.ct-subtabs__search.sf-search input::placeholder {
    color: hsl(208, 25%, 55%);
    text-align: left;
}
.ct-subtabs__search.sf-search i {
    left: auto;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: hsl(208, 25%, 55%);
}

/* ===== Виды спорта: #205583, раскладка по ширине; лишнее — в меню бургера (JS) ===== */
.sport-filters {
    --sf-bar-bg: #205583;
    --sf-gap: 8px;
    --sf-sep-dark: rgba(0, 0, 0, 0.38);
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px 16px;
    padding: 5px 14px 0;
    min-height: 38px;
    background: var(--sf-bar-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    position: relative;
    z-index: 4;
}
.sf-broadcast-wrap {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-right: 14px;
    border-right: 1px solid var(--sf-sep-dark);

    margin-top: -5px;
    padding-top: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.sf-broadcast {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.sf-broadcast input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.sf-broadcast__switch {
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.22);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.sf-broadcast__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}
.sf-broadcast input:checked + .sf-broadcast__switch {
    background: hsl(var(--accent-0-bg));
}
.sf-broadcast input:checked + .sf-broadcast__switch::after {
    transform: translateX(16px);
}
.sf-broadcast__text {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.sf-sports {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;

    justify-content: space-between;
    column-gap: var(--sf-gap);
    flex: 1 1 auto;
    min-width: 120px;
    overflow: hidden;
}

#sfSportsBar:has(> .sf-sport:only-child) {
    justify-content: stretch;
}
#sfSportsBar > .sf-sport:only-child {
    flex: 1 1 auto;
    justify-content: center;
}
.sf-sport {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 10px 8px;
    min-height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    flex-shrink: 0;
}
.sf-sport i {
    font-size: 14px;
    color: inherit;
    opacity: 1;
    flex-shrink: 0;
}
.sf-sport:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.sf-sport.active:hover {
    background: transparent;
    color: #fff;
}

.sf-sport.active {
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.sf-sport.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: hsl(var(--accent-15-bg));
}
.sf-sport.active i {
    color: #fff;
}
.sf-sports-extra {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: center;
}
.sf-overflow {
    position: relative;
    flex-shrink: 0;
}
.sf-burger {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 52px;
    height: 32px;
    padding: 0 11px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
}
.sf-burger__chev {
    font-size: 10px;
    opacity: 0.9;
    line-height: 1;
    transition: transform 0.2s ease;
}
.sf-burger:hover,
.sf-burger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.sf-burger[aria-expanded="true"] .sf-burger__chev {
    transform: rotate(180deg);
}
.sf-overflow-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: min(260px, calc(100vw - 24px));
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(420px, 70vh);
    overflow: hidden auto;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 50;
}
.sf-overflow-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sf-overflow-panel__inner .sf-sport {
    width: 100%;
    justify-content: flex-start;
    color: #1a3350;
    border-radius: 8px;
    box-sizing: border-box;
}
.sf-overflow-panel__inner .sf-sport:hover {
    background: #eef3f8;
    color: #1a3350;
}
.sf-overflow-panel__inner .sf-sport.active {
    position: relative;
    background: transparent;
    color: #1a3350;
}
.sf-overflow-panel__inner .sf-sport.active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: hsl(var(--accent-15-bg));
}
.sf-overflow-panel__inner .sf-sport.active i {
    color: #1a3350;
}
.sf-sport--esports {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.sf-sport--esports:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
.sf-sport--esports .sf-sport__chev {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.9;
}

.sf-search { margin-left:auto; position:relative; }
.sf-search input { background:var(--bg-input); border:1px solid var(--sep); border-radius:4px; padding:4px 8px 4px 26px; font-size:10px; color:var(--clr-decent); width:160px; outline:none; font-family:inherit; }
.sf-search input::placeholder { color:var(--clr-muted); }
.sf-search i { position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--clr-muted); font-size:10px; }

/* ===== МАТЧИ (референс: светлая шапка лиги, строки с пином и кнопками кф) ===== */
.matches-ref {
    position: relative;
    --ref-muted-text: #5a7892;

    --ref-match-row-pad-left: 8px;

    --rpl-mkt-col: 54px;
    --rpl-mkt-vsep: 8px;
    --rpl-mkt-gap: 6px;
    --rpl-mkt-tail: minmax(48px, 1fr);
    --rpl-mkt-pad-l: 10px;
    --rpl-mkt-pad-r: 12px;
    background: var(--sb-surface-light);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 var(--sb-border-light);
}

.access-lock-target:not(.matches-ref--locked) .matches-ref__lock-dim,
.access-lock-target:not(.matches-ref--locked) .matches-ref__lock-sticky-mount,
.access-lock-target:not(.matches-ref--locked) .matches-ref__lock-mobile-trios {
    display: none;
}

.matches-ref__lock-mobile-trios {
    display: none;
}

.access-lock-target.matches-ref--locked .matches-ref__pane {
    user-select: none;
    -webkit-user-select: none;
}

.access-lock-target.matches-ref--locked {
    position: relative;
}

.matches-ref__lock-dim {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: auto;
    box-sizing: border-box;
    background:
        radial-gradient(
            ellipse 95% 85% at 50% 42%,
            hsla(var(--primary-0-bg), 0.42) 0%,
            hsla(var(--primary--40-bg), 0.78) 68%,
            hsla(var(--primary--40-bg), 0.9) 100%
        );
    backdrop-filter: blur(4px) saturate(1.02);
    -webkit-backdrop-filter: blur(4px) saturate(1.02);
}

.matches-ref__lock-dim::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background: repeating-linear-gradient(
        -28deg,
        transparent,
        transparent 22px,
        hsla(var(--primary--40-clr), 0.035) 22px,
        hsla(var(--primary--40-clr), 0.035) 23px
    );
}

.matches-ref__lock-sticky-mount {
    position: absolute;
    inset: 0;
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 14px;
    pointer-events: none;
    font-family: var(--font-family);
}

.matches-ref__lock-overlay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.matches-ref__lock-overlay-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(300px, 100%);
    flex: 0 0 auto;
    pointer-events: auto;
}

.matches-ref__lock-card {
    margin: 0 auto;
    text-align: center;
    padding: 18px 20px 16px;
    border-radius: var(--content-hero-radius);
    border: 1px solid hsla(var(--primary--40-sep), 0.55);
    background: linear-gradient(
        165deg,
        hsla(var(--primary-5-bg), 0.98) 0%,
        hsla(var(--primary-0-bg), 0.99) 48%,
        hsla(var(--primary--40-bg), 0.96) 100%
    );
    box-shadow:
        0 0 0 1px hsla(0, 0%, 0%, 0.18),
        0 10px 32px hsla(var(--primary--40-bg), 0.45),
        inset 0 1px 0 hsla(var(--primary--40-clr-strong), 0.1);
}

.matches-ref__lock-card::before {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto 14px;
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        transparent,
        hsl(var(--primary-75-bg)),
        hsl(var(--accent-15-bg)),
        hsl(var(--primary-75-bg)),
        transparent
    );
    opacity: 0.95;
}

.matches-ref__lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: var(--content-hero-radius);
    font-size: 18px;
    color: var(--clr-accent);
    background: hsla(var(--accent-15-bg), 0.12);
    border: 1px solid hsla(var(--accent-15-bg), 0.32);
    box-shadow: inset 0 1px 0 hsla(var(--primary--40-clr), 0.06);
}

.matches-ref__lock-msg {
    margin: 0 0 8px;
    font-size: clamp(14px, 3.2vw, 17px);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--clr-white);
    line-height: 1.35;
    user-select: text;
    -webkit-user-select: text;
}

.matches-ref__lock-hint {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--clr-decent);
    letter-spacing: 0.02em;
    user-select: text;
    -webkit-user-select: text;
}

.ref-league-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px 10px 12px;
    background: #d4dee8;
    border-bottom: 1px solid #c5d4e0;
    border-top: 1px solid #c5d4e0;
    min-height: 50px;
}
.ref-league-head__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ref-league-head__sport {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c45c26;
    font-size: 14px;
}
.ref-league-head__sport--soccer {
    color: #1a5c2e;
}
.ref-flag {
    width: 22px;
    height: 15px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ref-flag--us {
    background: linear-gradient(180deg, #b22234 0%, #b22234 38%, #fff 38%, #fff 62%, #3c3b6e 62%);
}
.ref-flag--ru {
    background: linear-gradient(180deg, #fff 0%, #fff 33%, #0039a6 33%, #0039a6 66%, #d52b1e 66%);
}
.ref-league-head__name {
    font-size: 12px;
    font-weight: 700;
    color: var(--ref-muted-text);
    letter-spacing: 0.01em;
}
.ref-league-head__markets {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
}
.ref-mkt-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ref-mkt-group__title {
    font-size: 9px;
    font-weight: 700;
    color: var(--ref-muted-text);
    text-transform: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ref-mkt-group__hdr {
    display: grid;
    grid-template-columns: 48px 36px 48px;
    gap: 4px;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ref-muted-text);
}
.ref-mkt-group__hdr--3 {
    grid-template-columns: 44px 44px 44px;
}
.ref-mkt-group__hdr > span {
    text-align: center;
}
.ref-mkt-drop,
.ref-mkt-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 22px;
    padding: 0 4px;
    border: none;
    border-radius: 4px;
    background: hsl(210, 30%, 94%);
    color: #2c5282;
    font-size: 9px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ref-mkt-line {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ref-mkt-drop i,
.ref-mkt-line i {
    font-size: 8px;
    opacity: 0.75;
}
.ref-mkt-more-hdr {
    min-width: 36px;
    padding-bottom: 2px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ref-muted-text);
}

.ref-league-head.ref-league-head--rpl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
    min-height: 34px;
    padding: 3px 0 3px 8px;
    gap: 0;
    align-items: center;
}
.ref-league-head--rpl .ref-league-head__left {
    padding: 0 6px 0 0;
    align-self: center;
}
.ref-league-head--rpl .ref-league-head__sport {
    width: 24px;
    height: 24px;
    font-size: 13px;
}
.ref-league-head--rpl .ref-league-head__name {
    font-size: 11px;
    line-height: 1.25;
}
.ref-league-head--rpl .ref-league-head__markets--rpl {
    display: block;
    align-self: stretch;
    padding: 3px var(--rpl-mkt-pad-r) 3px var(--rpl-mkt-pad-l);
    border-left: 1px solid #e2e8ef;
    box-sizing: border-box;
}
.ref-rpl-hdr-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--rpl-mkt-col)) var(--rpl-mkt-vsep) repeat(3, var(--rpl-mkt-col)) var(--rpl-mkt-tail);
    column-gap: var(--rpl-mkt-gap);
    row-gap: 2px;

    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ref-rpl-hdr-cell {
    font-size: 10px;
    font-weight: 700;
    color: var(--ref-muted-text);
    line-height: 1.2;
}
.ref-rpl-hdr-grid > span.ref-rpl-hdr-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}

.ref-rpl-hdr-grid > .ref-rpl-hdr-drop {
    align-self: center;
}
.ref-rpl-hdr-grid > .ref-rpl-hdr-vsep {
    align-self: center;
    justify-self: center;
    width: 1px;
}
.ref-rpl-hdr-drop {
    box-sizing: border-box;
    min-height: 18px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 2px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ref-muted-text);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.ref-rpl-hdr-drop__lbl {
    line-height: 1.1;
}

.ref-rpl-hdr-drop__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 11px;
    border-radius: 999px;
    background: #7599b8;
    flex-shrink: 0;
}
.ref-rpl-hdr-drop__chev i {
    font-size: 7px;
    line-height: 1;
    color: #fff;
    opacity: 1;
}
.ref-rpl-hdr-drop:hover .ref-rpl-hdr-drop__chev {
    background: #678cad;
}
.ref-rpl-hdr-vsep {
    width: 1px;
    height: 14px;
    background: #b8c9d9;
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
}
.ref-rpl-hdr-more {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ref-muted-text);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ref-scores-dual {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ref-scores-dual__vsep {
    width: 1px;
    height: 26px;
    background: #b8c9d9;
    flex-shrink: 0;
}
.ref-scores-dual .ref-scores-total {
    padding-right: 0;
}

.ref-match-row__info--rpl {
    flex: 1;
    min-width: 0;
}
.ref-rpl-matrix {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) repeat(3, minmax(1.3em, auto));
    grid-template-rows: auto auto auto;
    column-gap: 7px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.ref-rpl-cell--act {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}
.ref-rpl-cell--logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.ref-rpl-cell--name {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}
.ref-rpl-cell--name .ref-team-name {
    display: block;
    color: var(--ref-muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ref-rpl-cell--num {
    text-align: center;
    padding: 1px 4px;
}

.ref-rpl-cell--num:nth-child(6n + 4) {
    border-right: 1px solid #b8c9d9;
    padding-right: 8px;
}
.ref-rpl-cell--meta {
    grid-column: 1 / 6;
    grid-row: 3;
    min-width: 0;
    padding-top: 4px;
    border-top: 1px solid #e2e8ef;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.ref-rpl-cell--meta .ref-match-row__meta-row--rpl-bar {
    width: 100%;
    min-width: 0;
}
.ref-rpl-cell--arrow {
    grid-column: 6;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    border-top: 1px solid #e2e8ef;
    align-self: stretch;
}

.ref-match-row--rpl {
    min-height: 58px;
}
.ref-match-row__info.ref-match-row__info--rpl {
    padding: 7px 9px 7px var(--ref-match-row-pad-left, 8px);
}
.ref-rpl-matrix .ref-team-logo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}
.ref-rpl-matrix .ref-pin-btn {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.ref-rpl-cell--name {
    font-size: 12px;
    line-height: 1.3;
}
.ref-rpl-matrix .ref-scores-matrix__n {
    font-size: 13px;
}
.ref-rpl-cell--num {
    padding: 1px 3px;
}
.ref-match-row__info--rpl .ref-match-row__meta-row--status-icons {
    margin-top: 0;
}
.ref-match-row__info--rpl .ref-match-row__meta-row--status-icons .ref-match-status {
    font-size: 11px;
    line-height: 18px;
}
.ref-match-row__info--rpl .ref-match-row__meta-row--status-icons .ref-match-icons button {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.ref-rpl-cell--arrow .ref-match-expand--rpl-matrix {
    width: 22px;
    height: 22px;
    min-height: 22px;
    font-size: 10px;
}

.ref-match-row--rpl .ref-match-row__odds--rpl {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 5px var(--rpl-mkt-pad-r) 5px var(--rpl-mkt-pad-l);
    align-content: center;
    align-items: center;
    row-gap: 4px;
}
.ref-match-row--rpl .ref-match-row__odds--rpl .ref-odd {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 30px;
    padding: 4px 9px;
    font-size: 11px;
    border-radius: 5px;
}
.ref-match-row--rpl .ref-match-row__odds--rpl .ref-odds-vsep {
    height: 28px;
}
.ref-match-row--rpl .ref-match-row__odds--rpl .ref-match-more {
    font-size: 11px;
    padding: 3px 5px;
}

.ref-rpl-score-aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    min-width: 72px;
}

table.ref-scores-matrix {
    border-collapse: collapse;
    border: none;
    table-layout: fixed;
    width: auto;
}
.ref-scores-matrix td,
.ref-scores-matrix th {
    border: none;
    padding: 1px 5px;
    text-align: center;
    vertical-align: middle;
    min-width: 1.25em;
}
.ref-scores-matrix tbody tr:nth-child(-n + 2) td:first-child {
    border-right: 1px solid #b8c9d9;
    padding-right: 8px;
}
.ref-scores-matrix__n {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ref-muted-text, #5a7892);
    line-height: 1.2;
}
.ref-scores-matrix__cell--empty {
    padding: 0;
    min-width: 0;
}
.ref-scores-matrix__cell--arrow {
    padding: 2px 4px 0;
    text-align: center;
    vertical-align: middle;
}
.ref-scores-matrix .ref-match-expand--rpl-matrix,
.ref-rpl-cell--arrow .ref-match-expand--rpl-matrix {
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 0 auto;
    padding: 0;
    font-size: 10px;
    color: #8a9fb5;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ref-scores-matrix .ref-match-expand--rpl-matrix:hover,
.ref-rpl-cell--arrow .ref-match-expand--rpl-matrix:hover {
    background: rgba(44, 109, 163, 0.08);
    color: #5a7fa0;
}

.ref-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
    gap: 0;
    align-items: stretch;
    min-height: 76px;
    position: relative;
    background: #ffffff;
    border-bottom: none;
}
.ref-match-row::after {
    content: "";
    position: absolute;
    left: var(--ref-match-row-pad-left, 8px);
    right: 0;
    bottom: 0;
    height: 1px;
    background: #e2e8ef;
    pointer-events: none;
}
.ref-match-row--alt {
    background: #ffffff;
}
.ref-match-row:hover {
    background: #f7f9fc;
}
.ref-match-row--alt:hover {
    background: #f7f9fc;
}

.ref-match-row__info {
    display: flex;
    gap: 8px;
    padding: 10px 10px 10px var(--ref-match-row-pad-left, 8px);
    min-width: 0;
    border-right: 1px solid #e2e8ef;
    background: #ffffff;
}
.ref-match-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 2px;
    flex-shrink: 0;
}
.ref-pin-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #8a9aad;
    font-size: 11px;
    cursor: pointer;
}
.ref-pin-btn:hover {
    background: #e8eef5;
    color: #4a6a8e;
}
.ref-match-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
}

.ref-match-row__teams-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    background: transparent;
    padding: 4px 0 2px;
    box-sizing: border-box;
}
.ref-match-row__teams-row .ref-team-line,
.ref-match-row__teams-row .ref-team-name,
.ref-match-row__teams-row .ref-score-big,
.ref-match-row__teams-row .ref-scores-parts,
.ref-match-row__teams-row .ref-scores-parts .ref-q-col span,
.ref-match-row__teams-row .ref-soccer-ico,
.ref-match-row__teams-row .ref-scores-tennis,
.ref-match-row__teams-row .ref-scores-tennis--prematch,
.ref-match-row__teams-row .ref-tennis-game,
.ref-match-row__teams-row .ref-prematch-time {
    color: var(--ref-muted-text);
}

.ref-match-row__teams-row > .ref-match-expand {
    margin-left: auto;
    align-self: center;
    color: var(--ref-muted-text);
}
.ref-match-row__teams-row > .ref-match-expand:hover {
    color: #4a6d86;
    background: rgba(44, 109, 163, 0.08);
}
.ref-teams-block {
    flex: 1;
    min-width: 0;
}
.ref-team-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text-on-light);
    line-height: 1.35;
    min-width: 0;
}
.ref-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ref-team-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 5px;
    background: linear-gradient(145deg, #eef3f8 0%, #e2e9f2 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.ref-team-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.ref-scores-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    padding-right: 4px;
}
.ref-score-big {
    font-size: 15px;
    font-weight: 800;
    color: #1a2332;
    min-width: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.ref-scores-parts {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #6b7c90;
    font-variant-numeric: tabular-nums;
}
.ref-q-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ref-scores-parts--soccer {
    align-items: center;
    padding-top: 4px;
}
.ref-soccer-ico {
    color: #5a7a9a;
    font-size: 12px;
}
.ref-scores-tennis {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #1a2332;
    font-variant-numeric: tabular-nums;
}
.ref-tennis-game {
    font-size: 11px;
    font-weight: 600;
    color: #5c6b7f;
}
.ref-scores-tennis--prematch {
    font-weight: 600;
    color: #3d5a7a;
    gap: 6px;
}
.ref-prematch-time {
    color: #5c6b7f;
    font-weight: 500;
}
.ref-match-row__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    min-width: 0;
}

.ref-match-row__meta-row--status-icons {
    margin-top: 4px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1px;
    align-items: center;
}
.ref-match-row__meta-row--status-icons .ref-match-status {
    font-size: 11px;
    line-height: 20px;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}
.ref-match-row__meta-row--status-icons .ref-match-icons {
    flex: 0 0 auto;
    gap: 1px;
}
.ref-match-row__meta-row--status-icons .ref-match-icons button {
    width: 20px;
    height: 20px;
    font-size: 10px;
    border-radius: 3px;
}
.ref-match-expand {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #2c6da3;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ref-match-expand:hover {
    background: #e3edf6;
    color: #1a5080;
}
.ref-match-status {
    font-size: 10px;
    color: var(--ref-muted-text, #5a7892);
    line-height: 1.35;
}
.ref-match-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-width: 0;
}
.ref-match-icons button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #4a7ab0;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.ref-match-icons button:hover {
    background: #e8f0f8;
    color: #205583;
}

.ref-match-row__odds {
    display: grid;
    grid-template-columns: 48px 36px 48px 48px 52px 48px 1fr;
    gap: 6px;
    align-items: center;
    padding: 10px 12px 10px 10px;
    background: #ffffff;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #c5d2e0 transparent;
    min-width: 0;
    align-self: stretch;
}
.ref-match-row__odds::-webkit-scrollbar {
    height: 5px;
}
.ref-match-row__odds::-webkit-scrollbar-thumb {
    background: #c5d2e0;
    border-radius: 3px;
}
.ref-match-row__odds--3 {
    grid-template-columns: repeat(3, 46px) 48px 52px 48px 1fr;
}
.ref-match-row__odds--rpl {
    grid-template-columns: repeat(3, var(--rpl-mkt-col, 54px)) var(--rpl-mkt-vsep, 8px) repeat(3, var(--rpl-mkt-col, 54px)) var(--rpl-mkt-tail, minmax(48px, 1fr));
    column-gap: var(--rpl-mkt-gap, 6px);
    row-gap: 6px;
    box-sizing: border-box;
}
.ref-match-row__odds--rpl .ref-odds-vsep {
    width: 1px;
    height: 32px;
    background: #dde4ec;
    justify-self: center;
    align-self: center;
}
.ref-match-row__odds--rpl .ref-odd {
    background: #e9eef2;
    border: none;
    box-shadow: none;
    color: #4a6578;
    font-weight: 600;
}
.ref-match-row__odds--rpl .ref-odd:hover:not(:disabled) {
    background: #dde5eb;
    border: none;
    box-shadow: none;
    color: #3d5668;
}
.ref-match-row__odds--rpl .ref-odd:focus-visible {
    outline: 2px solid #8aa8bc;
    outline-offset: 1px;
}
.ref-match-row__odds--rpl .ref-match-more {

    justify-self: center;
    align-self: center;
}
.ref-odd-spacer--wide {
    grid-column: span 1;
}
.ref-odd {
    min-height: 34px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid #dce4ed;
    background: linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    font-size: 11px;
    font-weight: 600;
    color: #1a3350;
    font-family: inherit;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ref-odd:hover:not(:disabled) {
    border-color: #9bb8d4;
    background: #fff;
}
.ref-odd--line {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #2c6da3;
}
.ref-odd--dash:disabled {
    opacity: 0.45;
    cursor: default;
    color: #9aa8b8;
}
.ref-odd-spacer {
    pointer-events: none;
}
.ref-match-more {
    justify-self: end;
    align-self: center;
    padding: 4px 2px;
    font-size: 11px;
    font-weight: 700;
    color: #2c6da3;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ref-match-more:hover {
    color: #1a5080;
}
.ref-match-more--muted {
    color: #6b8cb0;
}

.odds-header {
    display: grid;
    grid-template-columns: 1fr repeat(10, 50px) 40px;
    background: var(--sb-surface-light-soft);
    border-bottom: 1px solid var(--sb-border-light);
    border-top: none;
}
.odds-header>div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 2px;
    min-height: 36px;
    font-size: 9px;
    font-weight: 700;
    color: var(--sb-text-muted-on-light);
    border-left: 1px solid var(--sb-border-light);
    text-align: center;
}
.odds-header>div:first-child {
    border-left: none;
    padding-left: 12px;
    justify-content: flex-start;
}

.league-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--sb-league-header-bg);
    border-bottom: 1px solid var(--sb-border-light);
    border-top: 1px solid var(--sb-border-light);
    gap: 8px;
    font-size: 11px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.league-row__icon { font-size: 12px; color: hsl(0, 65%, 45%); }
.league-row__name { color: var(--sb-text-on-light); font-weight: 600; }

.match-row {
    display: grid;
    grid-template-columns: 1fr repeat(10, 50px) 40px;
    border-bottom: 1px solid var(--sep);
    min-height: 46px;
    align-items: stretch;
    background: hsla(0, 0%, 100%, 0.02);
}
.match-row:nth-child(even) {
    background: hsla(0, 0%, 100%, 0.035);
}
.match-row:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

.match-info { padding:4px 10px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.match-teams { display:flex; flex-direction:column; gap:1px; }
.match-team { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--clr-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-team__score { color:var(--clr-gold); font-weight:700; min-width:13px; text-align:center; font-size:11px; }
.match-team i { font-size:9px; color:var(--clr-muted); }
.match-time { font-size:9px; color:var(--clr-muted); margin-top:1px; }
.match-icons { display:flex; gap:3px; margin-top:1px; }
.match-icons i { font-size:10px; color:var(--clr-muted); cursor:pointer; }

.odd-cell { display:flex; align-items:center; justify-content:center; border-left:1px solid var(--sep); font-size:10px; font-weight:500; color:var(--clr-strong); cursor:pointer; padding:1px; text-align:center; }
.odd-cell:hover { background:var(--clr-accent-dark); color:#fff; }

.match-more { display:flex; align-items:center; justify-content:center; border-left:1px solid var(--sep); color:var(--clr-accent); font-weight:700; font-size:10px; cursor:pointer; }
.match-more:hover { background:rgba(82,180,50,.06); }

/* ===== Экспресс дня / Live экспресс дня (под таблицей матчей, референс) ===== */
.express-widgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    align-items: start;
    padding: 2px;
    background: transparent;
}

.express-card {
    --express-frame: #1a4a7a;
    --express-hdr: #276aa5;
    --express-body-bg: #e9eef2;
    --express-odd-bg: #e9eef2;
    --express-link-blue: #276aa5;
    --express-link-blue-soft: #276aa5;
    --express-team-text: #2c3e50;
    --express-odd-text: #2c3e50;
    --express-text-dark: #1e2937;
    --express-cta: #88b237;
    --express-cta-hover: #7aa32f;
    background: var(--express-body-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 40, 70, 0.2);
    border: 2px solid var(--express-frame);
}

.express-card__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 10px;
    background: var(--express-hdr);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.express-card__pager {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
}

.express-card__pager-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.express-card__pager-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.express-card__pager-ind {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    min-width: 2.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.express-card__title {
    margin: 0;
    justify-self: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.25;
    text-wrap: balance;
}

.express-card__close {
    justify-self: end;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.express-card__close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
}

.express-card__body {
    padding: 10px 10px 4px;
    background: var(--express-body-bg);
}

.express-card__match {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 10px 11px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(15, 40, 70, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.express-card__match:last-child {
    margin-bottom: 0;
}

.express-card__match-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 6px;
    align-items: start;
}

.express-card__match-head {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.express-card__odd {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--express-odd-text);
    background: var(--express-odd-bg);
    border-radius: 6px;
    line-height: 1.2;
}

.express-card__league-block {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 5px;
    row-gap: 2px;
    align-items: start;
    min-width: 0;
    padding-right: 4px;
}

.express-card__bet {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0;
    max-width: min(56%, 152px);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    color: var(--express-hdr);
}

.express-card__time-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 8px 0 0;
    border-right: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.express-card__date,
.express-card__clock {
    font-size: 10px;
    font-weight: 600;
    color: var(--express-hdr);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.express-card__time-block--live {
    justify-content: center;
    min-height: 36px;
    padding-right: 8px;
}

.express-card__live-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--express-hdr);
}

.express-card__teams {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
}

.express-card__team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.express-card__logo {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eef3f8 0%, #e2e9f2 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.express-card__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.express-card__team-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--express-team-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.express-card__league-ico {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 9px;
    line-height: 1;
    color: var(--express-hdr);
}

.express-card__league-line {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--express-hdr);
}

.express-card__league-line--main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.express-card__league-line--sub {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    justify-self: start;
    text-align: left;
}

.express-card__summary {
    padding: 4px 10px 10px;
    background: var(--express-body-bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.express-card__summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 11px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.express-card__summary-line--bonus span:first-child {
    font-weight: 600;
    color: #276aa5;
}

.express-card__summary-line--bonus .express-card__bonus-val {
    font-weight: 700;
    color: #276abc;
    font-variant-numeric: tabular-nums;
}

.express-card__summary-line--total span:first-child {
    font-weight: 600;
    color: #276aa5;
}

.express-card__total-val {
    font-size: 17px;
    font-weight: 800;
    color: #276abc;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.express-card__cta {
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 13px 14px;
    border: none;
    border-radius: 8px;
    background: var(--express-cta);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.express-card__cta:hover {
    background: var(--express-cta-hover);
}

@media (max-width: 1100px) {
    .express-widgets {
        grid-template-columns: 1fr;
    }
}

.bonus-row { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:hsla(0,0%,100%,0.04); border-bottom:1px solid var(--sep); font-size:11px; }
.bonus-row__label { color:var(--clr-decent); }
.bonus-row__val { color:var(--clr-gold); font-weight:700; }

.btn-add-coupon { display:block; width:calc(100% - 16px); margin:10px auto; background:var(--clr-accent-dark); color:#fff; border:none; padding:10px; border-radius:var(--radius); font-size:12px; font-weight:700; text-transform:uppercase; text-align:center; }
.btn-add-coupon:hover { background:var(--clr-accent); }

/* ===== RIGHT SIDEBAR ===== */
.sidebar-right {
    align-self: start;
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    min-width: 0;
    background: var(--bg-page);
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height));
    padding: var(--layout-col-pad-top) 0;
}

.sidebar-right__inner {
    padding: 0 8px 0 2px;
    box-sizing: border-box;
    min-width: 0;
}

.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.reg-block { padding:12px 10px; border-bottom:1px solid var(--sep); }
.reg-block__title { font-size:13px; font-weight:700; text-align:center; margin-bottom:8px; text-transform:uppercase; }
.reg-tabs { display:flex; border-radius:var(--radius); overflow:hidden; border:1px solid var(--sep); margin-bottom:8px; }
.reg-tab { flex:1; padding:6px 5px; text-align:center; font-size:10px; font-weight:500; background:var(--bg-darkest); color:var(--clr-muted); border:none; }
.reg-tab.active { background:hsl(var(--primary-0-bg)); color:#fff; }
.reg-hint { font-size:9px; color:var(--clr-muted); line-height:1.4; margin-bottom:8px; }
.reg-group { margin-bottom:6px; }
.reg-group label { display:block; font-size:9px; color:var(--clr-muted); margin-bottom:2px; }
.reg-group input,.reg-group select { width:100%; background:var(--bg-input); border:1px solid var(--sep); border-radius:var(--radius); padding:7px 8px; font-size:11px; color:var(--clr-strong); outline:none; font-family:inherit; appearance:none; }
.reg-group input:focus,.reg-group select:focus { border-color:var(--clr-link); }
.reg-group select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234e7a9b'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; padding-right:24px; }
.reg-phone-row { display:flex; gap:5px; }
.reg-phone-row input:first-child { width:60px; flex-shrink:0; text-align:center; }
.sms-tabs { display:flex; gap:3px; margin:6px 0; }
.sms-tab { flex:1; padding:4px; text-align:center; font-size:9px; background:var(--bg-darkest); border:1px solid var(--sep); border-radius:3px; color:var(--clr-muted); }
.sms-tab.active { background:hsl(var(--primary-0-bg)); color:#fff; border-color:hsl(var(--primary-0-bg)); }
.btn-sms { width:100%; background:var(--clr-accent-dark); color:#fff; border:none; padding:7px; border-radius:var(--radius); font-size:10px; font-weight:700; text-transform:uppercase; }
.btn-sms:hover { background:var(--clr-accent); }
.btn-register-big { width:100%; background:var(--clr-accent-dark); color:#fff; border:none; padding:10px; border-radius:var(--radius); font-size:12px; font-weight:700; text-transform:uppercase; margin-top:8px; }
.btn-register-big:hover { background:var(--clr-accent); }
.reg-disclaimer { font-size:8px; color:var(--clr-muted); line-height:1.4; margin-top:8px; }
.reg-disclaimer a { color:var(--clr-link); }
.reg-confirm-row { display:flex; align-items:center; gap:5px; }
.reg-confirm-row .check { color:var(--clr-accent); font-size:14px; }

.reg-block--light {
    --reg-blue: #2c6da3;
    --reg-blue-muted: #7899b9;
    --reg-green: #adc87d;
    --reg-bg: #ebf1f5;
    --reg-text: #4a76a8;
    --reg-input-border: #c5d4e0;
    background: var(--reg-bg);
    color: var(--reg-text);
    border-radius: 10px;
    margin: 0 0 10px;
    padding: 14px 12px 16px;
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(44, 109, 163, 0.08);
}
.reg-block--light .reg-block__title {
    color: var(--reg-blue);
    font-size: 16px;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}
.reg-block--light .reg-tabs {
    display: flex;
    gap: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.reg-block--light .reg-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    color: var(--reg-text);
    border: 1px solid var(--reg-input-border);
    border-radius: 0;
}
.reg-block--light .reg-tab:first-child {
    border-radius: 8px 0 0 8px;
    border-right-width: 0;
}
.reg-block--light .reg-tab:last-child {
    border-radius: 0 8px 8px 0;
}
.reg-block--light .reg-tab.active {
    background: var(--reg-blue);
    color: #fff;
    border-color: var(--reg-blue);
}
.reg-block--light .reg-tab i { font-size: 14px; }
.reg-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--reg-blue, #2c6da3);
    margin: 0 0 6px;
}
.reg-block--light .reg-section-title {
    color: var(--reg-blue);
    text-align: center;
}
.reg-block--light .reg-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--reg-text);
    margin-bottom: 10px;
    text-align: center;
}
.reg-phone-field {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--reg-input-border, #c5d4e0);
    border-radius: 8px;
    padding: 2px 4px 2px 2px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.reg-phone-field--combo {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    border: none;
}
.reg-phone-field__float-label {
    position: absolute;
    left: 10px;
    top: -8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    color: #4a76a8;
    background: var(--reg-bg, #ebf1f5);
    padding: 0 4px;
    line-height: 1.2;
    pointer-events: none;
}
.reg-phone-field--combo .reg-phone-field__inner {
    display: flex;
    align-items: stretch;
    min-height: 40px;
    border: 1px solid var(--reg-input-border, #c5d4e0);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reg-phone-field--combo .reg-phone-field__inner:focus-within {
    border-color: var(--reg-blue, #2c6da3);
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.2);
}
.reg-phone-field__country-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 1px 0 8px;
    border-right: none;
    flex-shrink: 0;
    min-width: auto;
}
.reg-country-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.reg-modal__country-trigger {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    flex-shrink: 0;
}
.reg-modal__country-trigger:focus {
    outline: none;
}
.reg-modal__country-trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(44, 109, 163, 0.45);
    border-radius: 4px;
}
.reg-modal__country-trigger .reg-modal__phone-chev,
.reg-modal__country-trigger .reg-phone-field__country-chev {
    transition: transform 0.15s ease;
}
.reg-modal__country-trigger[aria-expanded="true"] .reg-modal__phone-chev,
.reg-modal__country-trigger[aria-expanded="true"] .reg-phone-field__country-chev {
    transform: rotate(180deg);
}
.reg-phone-field__flag-img {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    flex-shrink: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.15);
}
.reg-phone-field__country-chev {
    position: relative;
    z-index: 2;
    pointer-events: none;
    font-size: 8px;
    color: var(--reg-text, #4a76a8);
    opacity: 0.85;
}
.reg-phone-field__flag { font-size: 18px; line-height: 1; }
.reg-phone-field--combo .reg-phone-field__prefix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 4px 0 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--reg-text, #4a76a8);
}
.reg-phone-field--combo .reg-phone-field__input--combo {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 8px 6px 8px 0;
    font-size: 12px;
    font-family: inherit;
    color: #2a4a6e;
    outline: none;
}
.reg-phone-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 8px 6px;
    font-size: 12px;
    font-family: inherit;
    color: #2a4a6e;
    outline: none;
}
.reg-phone-field__input::placeholder { color: #9eb5c9; }
.reg-block--light .reg-group--flush { margin-bottom: 8px; }
.reg-block--light .reg-select,
.reg-block--light .reg-input {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--reg-input-border, #c5d4e0);
    border-radius: 8px;
    padding: 9px 28px 9px 10px;
    font-size: 12px;
    color: #2a4a6e;
    outline: none;
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 1.5L6 7.5 12 1.5' fill='none' stroke='%234a76a8' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reg-block--light .reg-input {
    padding: 9px 10px;
    background-image: none;
}
.reg-block--light .reg-select:focus,
.reg-block--light .reg-select:focus-visible,
.reg-block--light .reg-input:focus,
.reg-block--light .reg-input:focus-visible {
    border-color: var(--reg-blue);
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.2);
}
.reg-block--light .btn-sms {
    width: 100%;
    background: var(--reg-blue-muted);
    color: #fff;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    margin-bottom: 12px;
}
.reg-block--light .btn-sms:hover { filter: brightness(1.05); }
.reg-divider {
    height: 0;
    border: none;
    border-top: 1px solid #b8cfe0;
    opacity: 0.85;
    margin: 0 0 12px;
}
.reg-confirm-field {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--reg-input-border, #c5d4e0);
    background: #fff;
}
.reg-confirm-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 9px 10px;
    font-size: 12px;
    font-family: inherit;
    color: #2a4a6e;
    outline: none;
    background: #fff;
}
.reg-confirm-field__input::placeholder { color: #9eb5c9; }
.btn-confirm-code {
    flex-shrink: 0;
    width: 44px;
    border: none;
    background: var(--reg-blue-muted, #7899b9);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}
.btn-confirm-code:hover { filter: brightness(1.06); }
.reg-block--light .btn-register-big {
    background: var(--reg-green);
    color: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    cursor: pointer;
    border: none;
}
.reg-block--light .btn-register-big:hover { filter: brightness(1.04); }
.reg-block--light .reg-disclaimer {
    font-size: 9px;
    line-height: 1.45;
    color: var(--reg-text);
    margin-top: 10px;
}
.reg-block--light .reg-disclaimer a {
    color: var(--reg-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.reg-marketing {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 9px;
    line-height: 1.4;
    color: var(--reg-text, #4a76a8);
    cursor: pointer;
}
.reg-block--light .reg-marketing { color: var(--reg-text); }
.reg-marketing input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    accent-color: var(--reg-blue, #2c6da3);
    cursor: pointer;
}

.coupon-widget {
    --coupon-blue: #2966a3;
    --coupon-blue-dark: #204e7b;
    --coupon-bg: #eef2f6;
    --coupon-green: #84b035;
    margin: 0 0 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--coupon-bg);
    border-left: 4px solid var(--coupon-blue-dark);
    box-shadow: 0 1px 0 rgba(32, 78, 123, 0.12);
    font-family: inherit;
}
.coupon-tabs {
    display: flex;
    gap: 0;
}
.coupon-tab {
    flex: 1;
    padding: 8px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--coupon-blue-dark);
    color: rgba(255, 255, 255, 0.88);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.coupon-tab:hover:not(.active) {
    color: #fff;
    background: #1a456f;
}
.coupon-tab.active {
    color: #fff;
    background: var(--coupon-blue);
}
.coupon-body {
    display: flex;
    flex-direction: column;
    min-height: 202px;
    padding: 13px 11px 12px;
}
.coupon-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.coupon-toolbar__title {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--coupon-blue);
}
.coupon-bets-filter {
    display: flex;
    gap: 6px;
    margin: 0 0 7px;
}
.coupon-bets-filter__btn {
    flex: 1;
    border: 1px solid #b8cde0;
    background: #e8f1f8;
    color: #2f74a8;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
}
.coupon-bets-filter__btn.active {
    background: #2f74a8;
    border-color: #2f74a8;
    color: #fff;
}
.coupon-settings {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: #d4e4f2;
    color: #4a6b88;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
}
.coupon-settings:hover {
    background: #c5d9ec;
    color: var(--coupon-blue-dark);
}
.coupon-hint-box {
    background: #fff;
    border-radius: 7px;
    padding: 13px 12px;
    margin-bottom: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(32, 78, 123, 0.06);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    min-height: 3.6em;
}
.coupon-hint-text {
    margin: 0;
    width: 100%;
    text-align: center;
    text-wrap: balance;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--coupon-blue);
}
.coupon-bets-list {
    width: 100%;
    display: grid;
    gap: 6px;
    text-align: left;
    color: #2996A3 !important;
    -webkit-text-fill-color: #2996A3 !important;
}
.coupon-bets-list * {
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
.coupon-bets-empty {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    color: #3c5f7d;
    text-align: center;
    padding: 6px 4px;
}
.coupon-bet-card {
    background: #ffffff;
    border: 1px solid #d3dfeb;
    border-radius: 10px;
    padding: 8px 9px;
}
.coupon-bet-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.coupon-bet-card__no {
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    color: #2996A3 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coupon-bet-card__status {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.coupon-bet-card__status--won {
    color: #28a745 !important;
}
.coupon-bet-card__status--lost {
    color: #ff4b4b !important;
}
.coupon-bet-card__status--cancelled,
.coupon-bet-card__status--pending {
    color: #7f93a6 !important;
}
.coupon-bet-card__meta {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #5c7a8f !important;
    line-height: 1.3;
}

.coupon-bet-card__money {
    margin-top: 8px;
    padding: 8px 9px 7px;
    border-radius: 9px;
    border: 1px solid rgba(22, 101, 52, 0.22);
    background: linear-gradient(150deg, #ecfdf5 0%, #f8fffc 55%, #fff 100%);
    box-shadow: 0 1px 5px rgba(22, 101, 52, 0.07);
}

.coupon-bet-card__money--win {
    border-color: rgba(21, 128, 61, 0.35);
    background: linear-gradient(150deg, #dcfce7 0%, #f0fdf4 50%, #fff 100%);
}

.coupon-bet-card__money--loss {
    border-color: rgba(185, 28, 28, 0.18);
    background: linear-gradient(150deg, #fef2f2 0%, #fff 55%, #fafafa 100%);
}

.coupon-bet-card__money-kicker {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #166534;
    margin-bottom: 6px;
}

.coupon-bet-card__money--loss .coupon-bet-card__money-kicker {
    color: #991b1b;
}

.coupon-bet-card__money-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    line-height: 1.35;
}

.coupon-bet-card__money-row span {
    color: #3f6212 !important;
    font-weight: 600;
}

.coupon-bet-card__money--loss .coupon-bet-card__money-row span {
    color: #64748b !important;
}

.coupon-bet-card__money-row strong {
    font-size: 12px;
    font-weight: 800;
    color: #1a2332 !important;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.coupon-bet-card__money-row--jackpot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(22, 101, 52, 0.28);
}

.coupon-bet-card__money--loss .coupon-bet-card__money-row--jackpot {
    border-top-color: rgba(185, 28, 28, 0.18);
}

.coupon-bet-card__money-row--jackpot span {
    font-size: 10px !important;
    line-height: 1.3;
}

.coupon-bet-card__money-row--jackpot strong {
    font-size: 14px !important;
    color: #15803d !important;
    line-height: 1.2;
}

.coupon-bet-card__money--loss .coupon-bet-card__money-row--jackpot strong {
    font-size: 12px !important;
    color: #64748b !important;
}

.coupon-bet-card__money-note {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
    color: #4d7c0f !important;
    opacity: 0.95;
}

.coupon-bet-card__money--loss .coupon-bet-card__money-note {
    color: #94a3b8 !important;
}

.coupon-bet-card__line {
    margin-top: 3px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.coupon-bet-card__line span {
    font-size: 11px;
    color: #2996A3 !important;
    line-height: 1.3;
}
.coupon-bet-card__line strong {
    font-size: 11px;
    font-weight: 700;
    color: #2996A3 !important;
    white-space: nowrap;
}
.coupon-bet-card__expand {
    margin-top: 4px;
    display: inline-block;
    font-size: 11px;
    color: #2996A3 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.coupon-bet-card__event {
    font-size: 11px;
    font-weight: 700;
    color: #2996A3 !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coupon-view-all-btn {
    display: block;
    width: 100%;
    border-radius: 9px;
    padding: 9px 8px;
    background: #2b6fa8;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.coupon-view-all-btn:hover {
    background: #245f90;
}
.coupon-register-btn {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: var(--coupon-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.coupon-register-btn:hover {
    filter: brightness(1.05);
}
.coupon-register-btn:active {
    transform: translateY(1px);
}
.coupon-widget-footer {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--coupon-blue);
    text-align: center;
    flex-shrink: 0;
}
.coupon-save-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--coupon-blue);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}
.coupon-save-link:hover {
    color: var(--coupon-blue-dark);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-page);
    border-top: 1px solid var(--sep);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 28px;
    margin: 10px 6px 12px;

    padding: 14px 28px 16px 10px;
    background: #205583;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 40, 70, 0.2);
}
.footer-col__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-family: "Roboto", sans-serif;
}
.footer-col a {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    padding: 2px 0;
    font-family: "Roboto", sans-serif;
}
.footer-col a:hover {
    color: rgba(255, 255, 255, 0.82);
}
.footer-col a.footer-app-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}
.footer-app-link i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    opacity: 0.95;
}
.footer-app-link .fab.fa-apple {
    font-size: 16px;
}

.footer-partners {
    margin: 0 6px 12px;
    padding: 12px 14px 10px;
    background: #205583;
    border-radius: 10px;
}
.footer-partners__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: "Roboto", sans-serif;
}
.footer-partners__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    padding: 4px 0 6px;
    background: transparent;
    cursor: grab;
    overscroll-behavior-x: contain;
}
.footer-partners__viewport.footer-partners__viewport--dragging {
    cursor: grabbing;
    user-select: none;
}
.footer-partners__viewport.footer-partners__viewport--dragging * {
    user-select: none;
}
.footer-partners__viewport::-webkit-scrollbar {
    display: none;
}
.footer-partners__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: max-content;
    min-height: 144px;
    cursor: grab;
}
.footer-partners__row .footer-partners__cell {
    cursor: pointer;
}
.footer-partners__cell {
    position: relative;
    flex: 0 0 auto;
    width: 144px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
    background: #224f7c;
    border: none;
    box-shadow: none;
    padding: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
a.footer-partners__cell:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}
.footer-partners__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.footer-partners__badge--esport {
    color: rgba(255, 255, 255, 0.62);
}
.footer-partners__logo {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    flex-shrink: 0;
}
.footer-partners__scrollbar {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 4px;
    background: transparent;
}
.footer-partners__track {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: transparent;
}
.footer-partners__thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    min-width: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    cursor: grab;
}
.footer-partners__thumb:active {
    cursor: grabbing;
}

.footer-bar {
    --fb-gap: 8px;

    --fb-h-main: 100px;
    --fb-h-tile: 56px;
    --fb-h-mobile: 36px;
    margin: 0 6px 12px;
    padding: 0;
}

.footer-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 2010.66fr) minmax(0, 397.34fr);
    gap: var(--fb-gap);
    align-items: stretch;
}

.footer-panel {
    background: #205583;
    border-radius: 9px;
    box-sizing: border-box;
}

.footer-panel.footer-panel--extras {
    background: transparent;
    border-radius: 0;
}

.footer-panel--info {
    min-width: 0;
    height: var(--fb-h-main);
    min-height: var(--fb-h-main);
    padding: 10px 16px 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.footer-panel__copyright {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 400;
    color: #b0c4de;
    line-height: 1.35;
}

.footer-panel__cookie {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #b0c4de;
}

.footer-panel__cookie a {
    color: #b0c4de;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-panel__cookie a:hover {
    opacity: 0.92;
}

.footer-panel--extras {
    --footer-extras-tile: #205583;
    display: flex;
    flex-direction: column;
    gap: var(--fb-gap);
    padding: 0;
    min-width: 0;
    height: var(--fb-h-main);
    min-height: var(--fb-h-main);
    box-sizing: border-box;
}

.footer-extras__top {
    display: grid;

    grid-template-columns: minmax(0, 298.94fr) minmax(0, 90.41fr);
    gap: var(--fb-gap);
    align-items: stretch;
    flex: 0 0 auto;
}

.footer-extras__socials-tile {
    background: var(--footer-extras-tile);
    border-radius: 8px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: var(--fb-h-tile);
    min-height: var(--fb-h-tile);
    box-sizing: border-box;
}

.footer-extras__age-tile {
    background: var(--footer-extras-tile);
    border-radius: 8px;
    width: 100%;
    min-width: 0;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    height: var(--fb-h-tile);
    min-height: var(--fb-h-tile);
}

.footer-soc {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e9eef2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.12s, background 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    line-height: 0;
}

.footer-soc__glyph {
    display: block;
    background-color: #276aa5;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.15s;
}

.footer-soc__glyph--ig {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("../icons/instagram.png");
    mask-image: url("../icons/instagram.png");
}

.footer-soc__glyph--tg {
    width: 28px;
    height: 28px;
    -webkit-mask-image: url("../icons/telegram.png");
    mask-image: url("../icons/telegram.png");
}

.footer-soc:hover .footer-soc__glyph {
    background-color: #1f5d94;
}

.footer-soc:hover {
    background: #dde5eb;
    transform: scale(1.03);
}

.footer-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--fb-h-mobile);
    min-height: var(--fb-h-mobile);
    padding: 0 12px;
    border-radius: 8px;
    background: #276aa5;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s;
    flex: 0 0 var(--fb-h-mobile);
}

.footer-mobile-btn:hover {
    background: #235a8f;
}

.footer-mobile-extra {
    display: none;
}

.footer-soc-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.footer-soc-wide {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 10px;
    background: #205583;
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.footer-soc-wide:hover {
    background: #1a4a73;
}

.footer-support-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #205583;
    color: #fff;
    text-decoration: none;
    box-sizing: border-box;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}

.footer-support-card__ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(39, 106, 165, 0.55);
    font-size: 22px;
}

.footer-support-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.footer-support-card__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: "Roboto", sans-serif;
}

.footer-support-card__sub {
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.35;
}

.header-back-btn {
    display: none;
}

/* ===== Адаптив: не привязка к 1920, масштабирование и узкие экраны ===== */
@media (max-width: 1200px) {
    .main-layout,
    .header {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    .header {
        padding-top: 2px;
        padding-bottom: 6px;
    }
}

@media (max-width: 992px) {
    .header-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .header-nav__list {
        flex: 1 0 auto;
        width: max-content;
        min-width: 100%;
    }
    .header-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 6px;
    }
}

@media (max-width: 768px) {

    .header {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        row-gap: 0;
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 12px;
        background-color: #1a5282;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    .header-nav {
        display: none !important;
    }

    .header__logo {
        margin: 0;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }

    .header__logo img {
        height: 22px;
    }

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

    .header .header-icon-group,
    #headerGuestIcons,
    .header-meta {
        display: none !important;
    }

    #headerGuestLoginWrap {
        order: 1;
    }

    #headerOpenRegModal {
        order: 2;
    }

    #headerAuthWidget {
        order: 3;
    }

    #headerAuthWidget .header-user-widget__segment--refresh,
    #headerAuthWidget .user-dropdown,
    .header .header-user-widget__segment--refresh,
    .header .user-dropdown {
        display: none !important;
    }

    #headerAuthWidget .header-user-widget__segment--user,
    .header .header-user-widget__segment--user {
        min-width: 36px;
        min-height: 34px;
        padding: 0 8px;
    }

    #headerAuthWidget .header-user-widget__segment--balance,
    .header .header-user-widget__segment--balance {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    .header .btn-register,
    .header .header-icon-group {
        display: none !important;
    }

    .header-back-btn {
        display: none !important;
    }

    #headerDepositBtn {
        display: none !important;
    }

    .header .btn-login,
    .header .btn-register {
        border-radius: 8px;
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
    }

    .header .btn-login {
        background: #2a6da5;
    }

    .header .btn-login:hover {
        background: #235a8f;
    }

    .header .btn-register {
        background: #82b02a;
    }

    .header .btn-register:hover {
        background: #739925;
    }

    .login-dropdown {
        left: auto;
        right: 0;
        transform: none;
        width: min(340px, calc(100vw - 24px));
    }

    .content-hero {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        max-width: none;
        box-sizing: border-box;
    }

    .promo-slider {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .promo-slide {
        min-height: clamp(176px, 48vw, 240px);
        height: clamp(176px, 48vw, 240px);
    }

    .promo-slide > img {

        object-position: 82% 50%;
    }

    .promo-slide::after {
        background:
            linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.28) 40%, transparent 66%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.28) 32%, rgba(10, 28, 80, 0.12) 48%, transparent 62%);
    }

    .promo-slide__overlay {
        max-width: 100%;
        width: 100%;
        padding: 12px 16px 42px;
        box-sizing: border-box;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .promo-slide__title {
        font-size: clamp(18px, 7vw, 35px);
    }

    .promo-slide__desc {
        font-size: clamp(12px, 3.2vw, 14px);
    }

    .promo-slide__cta--primary {
        padding: 10px 16px;
        font-size: 10px;
        border-radius: 6px;
    }

    .promo-slider__arrow {
        display: none;
    }

    .promo-slider__dots {
        bottom: 10px;
    }

    .banner-section {
        margin-bottom: 10px;
    }

    .banner-games {
        gap: 10px;
        padding: 0 10px 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .banner-game-card {
        flex: 0 0 132px;
        width: 132px;
        min-width: 132px;
        border-radius: 10px;
        scroll-snap-align: start;
    }

    .banner-game-card__thumb {
        height: 86px;
    }

    .banner-game-card--more {
        display: none !important;
    }

    .content-center > .top-events {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px;
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        max-width: none;
        box-sizing: border-box;
        border-radius: 10px;
        margin-bottom: 12px;
        --top-events-card-h: 56px;
        --top-events-card-w: min(62vw, 220px);
        --top-events-card-minw: 156px;
        --top-events-card-maxw: 220px;
    }

    .content-center > .top-events .top-events__head {
        position: relative;
        flex-shrink: 0;
        align-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 44px;
        min-height: 44px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 0 12px;
        box-sizing: border-box;
        border-radius: 8px;
    }

    .content-center > .top-events .top-events__title {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        max-width: none;
        font-size: 13px;
        padding: 0;
    }

    .content-center > .top-events .top-events__nav {
        position: static;
        right: auto;
        bottom: auto;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .content-center > .top-events .top-events-info-events-slider {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        mask-image: none;
        -webkit-mask-image: none;
        padding: 0 4px;
    }

    .content-center > .top-events .top-events__card-name {
        font-size: 10px;
        padding: 4px 8px 4px 10px;
    }

    .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    body.layout--hide-left .main-layout,
    body.layout--hide-right .main-layout,
    body.layout--hide-left.layout--hide-right .main-layout {
        grid-template-columns: 1fr;
    }
    .sb-hide-btn {
        display: none !important;
    }
    .content-center {
        order: -1;
    }

    .content-center > .ct-subtabs,
    .content-center > .sport-filters {
        display: none;
    }

    /* ===== МАТЧИ: карточный вид (референс 1xBet мобайл) ===== */
    .content-center > .matches-ref {
        background: #f0f2f5;
        border-radius: 0;
        box-shadow: none;
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        max-width: none;
        box-sizing: border-box;
        padding: 4px 6px 6px;
        overflow: visible;
    }

    .content-center .access-lock-target .matches-ref__lock-sticky-mount {
        display: none !important;
    }

    .content-center .access-lock-target .matches-ref__lock-mobile-trios {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 41;
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
    }

    .content-center .access-lock-target .matches-ref__lock-trio {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        pointer-events: none;
    }

    .content-center .access-lock-target .matches-ref__lock-trio--start {
        top: 0;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
    }

    .content-center .access-lock-target .matches-ref__lock-trio--mid {
        top: 50%;
        transform: translateY(-50%);
    }

    .content-center .access-lock-target .matches-ref__lock-trio--end {
        bottom: 0;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    }

    .content-center .access-lock-target .matches-ref__lock-trio .matches-ref__lock-card {
        pointer-events: auto;
        width: 100%;
        max-width: min(260px, 100%);
    }

    .content-center .access-lock-target .matches-ref__lock-card {
        padding: 8px 12px 8px;
        border-radius: 10px;
    }

    .content-center .access-lock-target .matches-ref__lock-card::before {
        margin-bottom: 6px;
    }

    .content-center .access-lock-target .matches-ref__lock-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 5px;
        border-radius: 8px;
        font-size: 13px;
    }

    .content-center .access-lock-target .matches-ref__lock-msg {
        margin-bottom: 3px;
        font-size: clamp(11px, 3.2vw, 14px);
    }

    .content-center .access-lock-target .matches-ref__lock-hint {
        font-size: 9px;
        line-height: 1.35;
    }

    .content-center > .matches-ref .ref-league-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 1px 2px;
        margin-bottom: 0;
        min-height: 0;
        gap: 2px;
    }

    .content-center > .matches-ref .ref-league-head__markets--rpl {
        display: none;
    }

    .content-center > .matches-ref .ref-league-head__left {
        gap: 3px;
    }

    .content-center > .matches-ref .ref-league-head__name {
        font-size: 9px;
        font-weight: 700;
        color: #5a7892;
    }

    .content-center > .matches-ref .ref-league-head__sport {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .content-center > .matches-ref .ref-match-row {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        min-height: 0;
        margin-bottom: 2px;
        border-radius: 4px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .content-center > .matches-ref .ref-match-row::after {
        display: none;
    }

    .content-center > .matches-ref .ref-match-row:hover,
    .content-center > .matches-ref .ref-match-row--alt:hover {
        background: #ffffff;
    }

    .content-center > .matches-ref .ref-match-row__info,
    .content-center > .matches-ref .ref-match-row__info--rpl {
        border-right: none;
        border-bottom: none;
        padding: 0;
        background: #fff;
        flex: none;
    }

    /* ---- Матрица: 3 колонки × 3 строки ----
       Строка 1: статус (время + иконки) — на всю ширину
       Строка 2: логотип | Команда 1 | Счёт 1
       Строка 3: логотип | Команда 2 | Счёт 2       */
    .content-center > .matches-ref .ref-rpl-matrix {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        column-gap: 2px;
        row-gap: 0;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .content-center > .matches-ref .ref-rpl-cell--act,
    .content-center > .matches-ref .ref-rpl-cell--arrow,
    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(5),
    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(6),
    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(11),
    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(12) {
        display: none !important;
    }

    .content-center > .matches-ref .ref-rpl-cell--meta {
        display: none !important;
    }

    .content-center > .matches-ref .ref-rpl-cell--meta .ref-match-row__meta-row--rpl-bar {
        border-top: none;
    }

    .content-center > .matches-ref .ref-match-row__meta-row--status-icons {
        justify-content: flex-start;
        margin-top: 0;
    }

    .content-center > .matches-ref .ref-match-icons--rpl {
        display: none !important;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        padding: 1px 0 0 4px;
        justify-content: center;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        padding: 1px 0 0;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(4) {
        grid-column: 3;
        grid-row: 2;
        padding: 1px 4px 0 0;
        text-align: right;
        border-right: none !important;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(8) {
        grid-column: 1;
        grid-row: 3;
        padding: 0 0 1px 4px;
        justify-content: center;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(9) {
        grid-column: 2;
        grid-row: 3;
        padding: 0 0 1px;
    }

    .content-center > .matches-ref .ref-rpl-matrix > :nth-child(10) {
        grid-column: 3;
        grid-row: 3;
        padding: 0 4px 1px 0;
        text-align: right;
        border-right: none !important;
    }

    .content-center > .matches-ref .ref-rpl-matrix .ref-team-logo {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .content-center > .matches-ref .ref-rpl-matrix .ref-rpl-cell--name .ref-team-name {
        font-size: 9px;
        font-weight: 600;
        color: #1a2332;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-center > .matches-ref .ref-scores-matrix__n {
        font-size: 10px;
        font-weight: 800;
        color: #1a2332;
        line-height: 1;
    }

    .content-center > .matches-ref .ref-match-status {
        font-size: 8px;
        font-weight: 600;
        color: #5a7892;
        line-height: 1.2;
    }

    .content-center > .matches-ref .ref-match-row__odds,
    .content-center > .matches-ref .ref-match-row__odds--rpl {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        padding: 2px 4px 3px;
        background: #ffffff;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: unset;
        row-gap: unset;
        column-gap: unset;
        scrollbar-width: none;
    }

    .content-center > .matches-ref .ref-match-row__odds::-webkit-scrollbar {
        height: 0;
    }

    .content-center > .matches-ref .ref-match-row__odds--rpl .ref-odds-vsep {
        flex-shrink: 0;
        width: 1px;
        min-height: 16px;
        height: auto;
        background: #dde4ec;
        align-self: stretch;
    }

    .content-center > .matches-ref .ref-odd {
        flex: 0 0 auto;
        min-width: 30px;
        min-height: 20px;
        padding: 1px 4px;
        border-radius: 3px;
        background: #f0f2f5;
        border: none;
        box-shadow: none;
        font-size: 9px;
        font-weight: 700;
        color: #1a2332;
    }

    .content-center > .matches-ref .ref-match-row__odds--rpl .ref-odd {
        background: #f0f2f5;
        color: #1a2332;
        border: none;
        box-shadow: none;
    }

    .content-center > .matches-ref .ref-odd:hover:not(:disabled) {
        background: #e2e6ea;
        border: none;
        box-shadow: none;
    }

    .content-center > .matches-ref .ref-match-row__odds--rpl .ref-odd:hover:not(:disabled) {
        background: #e2e6ea;
        color: #1a2332;
    }

    .content-center > .matches-ref .ref-match-more {
        flex-shrink: 0;
        align-self: center;
        white-space: nowrap;
        font-size: 8px;
        padding: 0;
    }

    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .express-widgets {
        display: none !important;
    }

    .footer {
        background: var(--bg-page);
        border-top: none;
    }

    .footer-links {
        display: none !important;
    }

    .footer-partners--desktop {
        display: none !important;
    }

    .footer-mobile-extra {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 10px 12px;
    }

    .footer-partners--strip {
        margin: 0;
        padding: 10px 12px 8px;
        background: #276aa5;
        border-radius: 10px;
    }

    .footer-partners--strip .footer-partners__title {
        font-size: 12px;
        margin-bottom: 8px;
        letter-spacing: 0.05em;
    }

    .footer-partners--strip .footer-partners__row {
        min-height: 100px;
    }

    .footer-partners--strip .footer-partners__cell {
        width: 100px;
        height: 100px;
    }

    .footer-partners--strip .footer-partners__logo {
        width: 72px;
        height: 72px;
    }

    .footer-partners--strip .footer-partners__viewport {
        padding-bottom: 4px;
    }

    .footer-partners--strip .footer-partners__track {
        background: rgba(255, 255, 255, 0.12);
        height: 3px;
    }

    .footer-partners--strip .footer-partners__thumb {
        background: rgba(255, 255, 255, 0.55);
    }

    .footer-mobile-extra .footer-soc-wide {
        background: #276aa5;
    }

    .footer-mobile-extra .footer-soc-wide:hover {
        background: #235a8f;
    }

    .footer-mobile-extra .footer-support-card {
        background: #276aa5;
    }

    .footer-mobile-extra .footer-support-card__ico {
        background: rgba(0, 0, 0, 0.16);
    }

    .footer-bar {
        margin-left: 10px;
        margin-right: 10px;
    }

    .footer-bar__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .footer-panel--info {
        height: auto;
        min-height: 0;
        padding: 14px 12px 12px;
        text-align: center;
        background: transparent;
    }

    .footer-panel__copyright {
        color: #fff;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .footer-panel__cookie {
        color: rgba(255, 255, 255, 0.88);
        font-size: 10px;
        line-height: 1.5;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-panel__cookie a {
        color: #7eb8e8;
    }

    .footer-panel--extras {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .header__logo {
        height: 44px;
        min-height: 44px;
    }
    .header-nav {
        min-height: 36px;
        height: 36px;
    }
    .header-nav__link {
        font-size: 11px;
        padding: 0 8px;
    }
}

.reg-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.reg-modal.reg-modal--open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 22, 38, 0.78);
    cursor: pointer;
}
.reg-modal__center {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: min(92vh, 720px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.reg-modal__center .reg-modal__dialog {
    pointer-events: auto;
}
.reg-modal__dialog {
    position: relative;
    width: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow-x: visible;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    cursor: default;
}
.reg-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: #5a6b7d;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.reg-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #2a3542;
}
.reg-modal__main {
    flex: 1;
    min-width: 0;
    padding: 40px 28px 24px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
}
.reg-modal__main--solo {
    gap: 12px;
}
.reg-modal__title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1e5a8e;
    text-transform: uppercase;
}
.reg-modal__hint {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.45;
    color: #4a6278;
    text-align: center;
}
.reg-modal__req {
    color: #e02020;
    font-weight: 700;
}
.reg-modal__phone-field {
    position: relative;
    width: 100%;
    margin-top: 8px;
}
.reg-modal__phone-float-label {
    position: absolute;
    left: 10px;
    top: -9px;
    z-index: 2;
    font-size: 12px;
    font-weight: 600;
    color: #4a76a8;
    background: #fff;
    padding: 0 5px;
    line-height: 1.2;
    pointer-events: none;
}
.reg-modal__phone-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 44px;
    border: 1px solid #c5d4e0;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    overflow: visible;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reg-modal__phone-inner:focus-within {
    border-color: #2c6da3;
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.2);
}
.reg-modal__phone-country {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 1px 0 10px;
    border-right: none;
    flex-shrink: 0;
    min-width: auto;
}
.reg-modal__phone-flag-img {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 20px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    flex-shrink: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.15);
}
.reg-modal__phone-chev {
    position: relative;
    z-index: 2;
    font-size: 9px;
    color: #2c6da3;
    opacity: 0.9;
    pointer-events: none;
}
.reg-modal__country-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    max-height: min(320px, 50vh);
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #c5d4e0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(26, 52, 78, 0.18);
    box-sizing: border-box;
}
.reg-modal__country-dropdown.reg-modal__country-dropdown--fixed {
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
}
.reg-modal__country-dropdown-arrow {
    position: absolute;
    top: -7px;
    left: 22px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #c5d4e0;
    border-top: 1px solid #c5d4e0;
    transform: rotate(45deg);
    z-index: 1;
}
.reg-modal__country-list {
    position: relative;
    z-index: 2;
    max-height: min(312px, calc(50vh - 8px));
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
}
.reg-modal__country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.25;
    color: #2a4a6e;
    border-bottom: 1px solid #e8eef4;
    transition: background 0.12s ease;
}
.reg-modal__country-item:last-child {
    border-bottom: none;
}
.reg-modal__country-item:hover,
.reg-modal__country-item:focus {
    background: #e8f2fa;
    outline: none;
}
.reg-modal__country-item[aria-selected="true"] {
    background: #e8f2fa;
}
.reg-modal__country-list-flag {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.12);
}
.reg-modal__country-list-label {
    flex: 1;
    min-width: 0;
}
.reg-modal__country-dropdown--sidebar {
    z-index: 70;
    font-size: 12px;
}
.reg-modal__country-dropdown--sidebar .reg-modal__country-item {
    font-size: 12px;
    padding: 7px 10px 7px 8px;
}
.reg-modal__country-dropdown--sidebar .reg-modal__country-list-flag {
    width: 14px;
    height: 14px;
}
.reg-modal__country-dropdown--sidebar .reg-modal__country-dropdown-arrow {
    left: 18px;
}
.reg-modal__phone-inner .reg-modal__phone-prefix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 5px 0 3px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #2c6da3;
}
.reg-modal__phone-num-input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 10px 12px 10px 0;
    font-size: 14px;
    font-family: inherit;
    color: #2a3542;
    outline: none;
    background: transparent;
}
.reg-modal__phone-num-input::placeholder {
    color: #9eb5c9;
}
.reg-modal__marketing {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    color: #4a6278;
    cursor: pointer;
}
.reg-modal__marketing input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    accent-color: #2c6da3;
    cursor: pointer;
}
.reg-modal__select,
.reg-modal__input {
    width: 100%;
    padding: 11px 10px;
    border: 1px solid #c5d4e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #2a3542;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reg-modal__input:focus,
.reg-modal__input:focus-visible,
.reg-modal__select:focus,
.reg-modal__select:focus-visible {
    border-color: #2c6da3;
    box-shadow: 0 0 0 1px rgba(44, 109, 163, 0.2);
}
.reg-modal__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 1.5L6 7.5 12 1.5' fill='none' stroke='%234a6278' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.reg-modal__select--full {
    width: 100%;
}
.reg-modal__submit {
    margin-top: 6px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 8px;
    background: #84b035;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
}
.reg-modal__submit:hover {
    filter: brightness(1.06);
}
.reg-modal__legal {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: #6a7d90;
    text-align: center;
}
.reg-modal__legal a {
    color: #2c6da3;
}
@media (max-width: 720px) {
    .reg-modal__main {
        padding: 28px 16px 20px;
    }
}

/* ===== МОДАЛКА АВТОРИЗАЦИИ (для гостей) ===== */
.auth-modal {
    display: none;
}

@media (max-width: 768px) {
    .auth-modal {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9800;
        pointer-events: none;
    }

    .auth-modal--open {
        pointer-events: auto;
    }

    .auth-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(10, 20, 38, 0.65);
        opacity: 0;
        transition: opacity 0.25s;
    }

    .auth-modal--open .auth-modal__backdrop {
        opacity: 1;
    }

    .auth-modal__box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        padding: 24px 24px 32px;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
    }

    .auth-modal--open .auth-modal__box {
        transform: translateY(0);
    }

    body.auth-modal-active {
        overflow: hidden;
    }

    .auth-modal__close {
        position: absolute;
        top: 14px;
        right: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #f0f2f5;
        border-radius: 50%;
        color: #5a6b7d;
        font-size: 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
    }

    .auth-modal__close:hover {
        background: #e2e6ea;
    }

    .auth-modal__icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #eef4fb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #276aa5;
        flex-shrink: 0;
        margin-top: 8px;
    }

    .auth-modal__title {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        color: #1a2332;
        text-align: center;
    }

    .auth-modal__text {
        margin: 0;
        font-size: 14px;
        color: #6a7d90;
        text-align: center;
        line-height: 1.5;
        max-width: 280px;
    }

    .auth-modal__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        font-family: inherit;
        transition: background 0.15s, filter 0.15s;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .auth-modal__btn--primary {
        background: #276aa5;
        color: #ffffff;
    }

    .auth-modal__btn--primary:hover {
        background: #1f5a8e;
    }

    .auth-modal__btn--secondary {
        background: #eef4fb;
        color: #276aa5;
        border: 1.5px solid #c8ddef;
    }

    .auth-modal__btn--secondary:hover {
        background: #ddeaf8;
    }

    .auth-modal__divider {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        color: #9aafbf;
        font-size: 12px;
        font-weight: 600;
    }

    .auth-modal__divider::before,
    .auth-modal__divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8ef;
    }

    .auth-modal__register-block {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .auth-modal__register-label {
        margin: 0;
        font-size: 13px;
        color: #6a7d90;
    }

    .mob-drawer__item-lock {
        flex-shrink: 0;
        font-size: 11px;
        color: #b0bfcc;
    }
}

/* ===== MOBILE DRAWER — полноэкранное меню ===== */
.mob-drawer {
    display: none;
}

@media (max-width: 768px) {
    .mob-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9500;
        pointer-events: none;
    }

    .mob-drawer--open {
        pointer-events: auto;
    }

    .mob-drawer__panel {
        position: absolute;
        inset: 0;
        width: 100%;
        background: #f0f2f5;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .mob-drawer--open .mob-drawer__panel {
        transform: translateX(0);
    }

    /* === Хедер страницы меню (как сайтовый header) === */
    .mob-drawer__topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        background: #1a5282;
        flex-shrink: 0;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    .mob-drawer__topbar-logo {
        display: flex;
        align-items: center;
        height: 40px;
    }

    .mob-drawer__topbar-logo img {
        display: block;
        height: 22px;
        width: auto;
    }

    .mob-drawer__topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mob-drawer__topbar-deposit {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 16px;
        background: #4caf50;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        border-radius: 6px;
        text-decoration: none;
    }

    .mob-drawer__topbar-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        border: none;
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* === Блок пользователя (белый) === */
    .mob-drawer__usercard {
        background: #fff;
        padding: 12px 14px;
        flex-shrink: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .mob-drawer__usercard-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .mob-drawer__usercard-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .mob-drawer__usercard-ico {
        font-size: 22px;
        color: #1a5282;
        flex-shrink: 0;
    }

    .mob-drawer__usercard-id {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #1a2332;
    }

    .mob-drawer__usercard-copy {
        background: none;
        border: none;
        color: #9aafbf;
        font-size: 13px;
        cursor: pointer;
        padding: 0;
    }

    .mob-drawer__usercard-balance {
        font-size: 14px;
        font-weight: 700;
        color: #1a2332;
        margin-top: 2px;
    }

    .mob-drawer__usercard-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mob-drawer__usercard-btn {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #f0f2f5;
        color: #5c6b7f;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mob-drawer__usercard-btn--close {
        background: #f0f2f5;
        color: #1a2332;
    }

    .mob-drawer__usercard-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #4caf50;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
    }

    /* === Кнопки «Мои ставки» / «Пополнить» === */
    .mob-drawer__actions {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        background: #fff;
        flex-shrink: 0;
    }

    .mob-drawer__action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: none;
        font-family: inherit;
    }

    .mob-drawer__action-btn--dark {
        background: hsl(208, 57%, 22%);
        color: #fff;
    }

    .mob-drawer__action-btn--green {
        background: #4caf50;
        color: #fff;
    }

    .mob-drawer__logout {
        border-top: 1px solid #e5e7eb;
        margin-top: 8px;
        padding-top: 4px;
    }

    .mob-drawer__logout-btn {
        color: #666;
    }

    body.mob-drawer-open {
        overflow: hidden;
    }

    .mob-drawer__nav {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 16px;
    }

    .mob-drawer__section-label {
        padding: 14px 16px 6px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: #9aafbf;
        text-transform: uppercase;
        user-select: none;
    }

    .mob-drawer__section-label:first-child {
        padding-top: 10px;
    }

    .mob-drawer__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 16px;
        text-decoration: none;
        color: #1a2332;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.12s;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        border: none;
        background: transparent;
        font-family: inherit;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .mob-drawer__item:hover {
        background: #f0f5fa;
    }

    .mob-drawer__item--active {
        color: #276aa5;
        background: #eef4fb;
        font-weight: 700;
    }

    .mob-drawer__item--active .mob-drawer__item-ico {
        color: #276aa5;
    }

    .mob-drawer__item-ico {
        width: 24px;
        text-align: center;
        font-size: 16px;
        color: #6a8aaa;
        flex-shrink: 0;
        line-height: 1;
    }

    .mob-drawer__item-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-drawer__item-badge {
        flex-shrink: 0;
        padding: 2px 7px;
        border-radius: 4px;
        background: #e05050;
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.05em;
    }

    .mob-drawer__section-label + .mob-drawer__item {
        border-top: none;
    }
}

/* ===== МОБИЛЬНОЕ НИЖНЕЕ МЕНЮ ===== */
.mob-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    .mob-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        background: #ffffff;
        align-items: stretch;
        box-shadow: 0 -1px 0 #e2e6ea, 0 -2px 12px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(56px + env(safe-area-inset-bottom, 0));
        box-sizing: content-box;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mob-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        background: transparent;
        border: none;
        color: #8a96a8;
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s;
        box-sizing: border-box;
    }

    .mob-nav__item:hover {
        color: #4a5568;
    }

    .mob-nav__item--active {
        color: #276aa5;
    }

    .mob-nav__ico {
        font-size: 19px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mob-nav__label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .mob-nav__item--coupon {
        color: #276aa5;
        padding-bottom: 8px;
    }

    .mob-nav__ico-wrap {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #276aa5;
        color: #ffffff;
        font-size: 20px;
        line-height: 1;
        box-shadow: 0 2px 10px rgba(39, 106, 165, 0.40);
        margin-top: -20px;
        flex-shrink: 0;
        border: 3px solid #ffffff;
    }

    .mob-nav__item--coupon .mob-nav__label {
        margin-top: 3px;
        color: #276aa5;
    }

    .mob-nav__item--active .mob-nav__ico,
    .mob-nav__item--active .mob-nav__label {
        color: #276aa5;
    }

    .mob-nav-toast {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 9050;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        background: #1a2332;
        color: #fff;
        padding: 14px 16px 16px;
        border-radius: 12px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
        font-size: 14px;
        line-height: 1.45;
        font-family: Roboto, Arial, sans-serif;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
        box-sizing: border-box;
    }

    .mob-nav-toast--visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mob-nav-toast__text {
        margin: 0;
        color: rgba(255, 255, 255, 0.92);
    }

    .mob-nav-toast__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .mob-nav-toast__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 14px;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        background: #276aa5;
        color: #fff;
        text-decoration: none;
        box-sizing: border-box;
    }

    .mob-nav-toast__btn:active {
        opacity: 0.9;
    }

    .mob-nav-toast__btn--link {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

[data-umnico-logo] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}