:root {
    --brand: #e8542b;
    --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
    --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
    --bg: #eaeef9;
    --scrim: #080a1073;
    --scrim-blur: blur(3px);
    --surface: #fff;
    --surface-2: #f7f9fc;
    --surface-3: #e2e8f8;
    --surface-4: #d3dcf0;
    --hover: #f3f6fc;
    --line: #e2e8f8;
    --odd-border: #e2e8f8;
    --text: #151923;
    --muted: #526789;
    --price: #3a7824;
    --live: #e63c12;
    --up: #1f9d55;
    --down: #d93636;
    --up-text: #16a34a;
    --down-text: #dc2626;
    --up-rgb: 22 163 74;
    --down-rgb: 220 38 38;
    --warn-text: #b45309;
    --info-text: #1d6fd1;
    --open-text: #0369a1;
    --open-bg: #e0f2fe;
    --error-bg: #fde8e8;
    --error-text: #b42318;
    --best: #3a7824;
    --focus: color-mix(in srgb, var(--brand) 80%, #000);
    --hl-bolts: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='480' fill='black'><path d='M-148 0 -77 0 -105 61 -87 61 -116 109 -188 109 -158 61 -177 61Z'/><path d='M-173 109 -101 109 -130 170 -111 170 -140 218 -212 218 -182 170 -201 170Z'/><path d='M-197 218 -125 218 -154 280 -135 280 -165 328 -236 328 -207 280 -225 280Z'/><path d='M-221 328 -150 328 -178 389 -159 389 -189 437 -260 437 -231 389 -249 389Z'/><path d='M-245 437 -174 437 -202 498 -184 498 -213 546 -284 546 -255 498 -274 498Z'/><path d='M-269 546 -198 546 -226 607 -208 607 -237 655 -309 655 -279 607 -298 607Z'/><path d='M20 0 91 0 63 61 81 61 52 109 -20 109 10 61 -9 61Z'/><path d='M-5 109 67 109 38 170 57 170 28 218 -44 218 -14 170 -33 170Z'/><path d='M-29 218 43 218 14 280 33 280 3 328 -68 328 -39 280 -57 280Z'/><path d='M-53 328 18 328 -10 389 9 389 -21 437 -92 437 -63 389 -81 389Z'/><path d='M-77 437 -6 437 -34 498 -16 498 -45 546 -116 546 -87 498 -106 498Z'/><path d='M-101 546 -30 546 -58 607 -40 607 -69 655 -141 655 -111 607 -130 607Z'/><path d='M188 0 259 0 231 61 249 61 220 109 148 109 178 61 159 61Z'/><path d='M163 109 235 109 206 170 225 170 196 218 124 218 154 170 135 170Z'/><path d='M139 218 211 218 182 280 201 280 171 328 100 328 129 280 111 280Z'/><path d='M115 328 186 328 158 389 177 389 147 437 76 437 105 389 87 389Z'/><path d='M91 437 162 437 134 498 152 498 123 546 52 546 81 498 62 498Z'/><path d='M67 546 138 546 110 607 128 607 99 655 27 655 57 607 38 607Z'/><path d='M356 0 427 0 399 61 417 61 388 109 316 109 346 61 327 61Z'/><path d='M331 109 403 109 374 170 393 170 364 218 292 218 322 170 303 170Z'/><path d='M307 218 379 218 350 280 369 280 339 328 268 328 297 280 279 280Z'/><path d='M283 328 354 328 326 389 345 389 315 437 244 437 273 389 255 389Z'/><path d='M259 437 330 437 302 498 320 498 291 546 220 546 249 498 230 498Z'/><path d='M235 546 306 546 278 607 296 607 267 655 195 655 225 607 206 607Z'/><path d='M524 0 595 0 567 61 585 61 556 109 484 109 514 61 495 61Z'/><path d='M499 109 571 109 542 170 561 170 532 218 460 218 490 170 471 170Z'/><path d='M475 218 547 218 518 280 537 280 507 328 436 328 465 280 447 280Z'/><path d='M451 328 522 328 494 389 513 389 483 437 412 437 441 389 423 389Z'/><path d='M427 437 498 437 470 498 488 498 459 546 388 546 417 498 398 498Z'/><path d='M403 546 474 546 446 607 464 607 435 655 363 655 393 607 374 607Z'/><path d='M692 0 763 0 735 61 753 61 724 109 652 109 682 61 663 61Z'/><path d='M667 109 739 109 710 170 729 170 700 218 628 218 658 170 639 170Z'/><path d='M643 218 715 218 686 280 705 280 675 328 604 328 633 280 615 280Z'/><path d='M619 328 690 328 662 389 681 389 651 437 580 437 609 389 591 389Z'/><path d='M595 437 666 437 638 498 656 498 627 546 556 546 585 498 566 498Z'/><path d='M571 546 642 546 614 607 632 607 603 655 531 655 561 607 542 607Z'/><path d='M860 0 931 0 903 61 921 61 892 109 820 109 850 61 831 61Z'/><path d='M835 109 907 109 878 170 897 170 868 218 796 218 826 170 807 170Z'/><path d='M811 218 883 218 854 280 873 280 843 328 772 328 801 280 783 280Z'/><path d='M787 328 858 328 830 389 849 389 819 437 748 437 777 389 759 389Z'/><path d='M763 437 834 437 806 498 824 498 795 546 724 546 753 498 734 498Z'/><path d='M739 546 810 546 782 607 800 607 771 655 699 655 729 607 710 607Z'/><path d='M1028 0 1099 0 1071 61 1089 61 1060 109 988 109 1018 61 999 61Z'/><path d='M1003 109 1075 109 1046 170 1065 170 1036 218 964 218 994 170 975 170Z'/><path d='M979 218 1051 218 1022 280 1041 280 1011 328 940 328 969 280 951 280Z'/><path d='M955 328 1026 328 998 389 1017 389 987 437 916 437 945 389 927 389Z'/><path d='M931 437 1002 437 974 498 992 498 963 546 892 546 921 498 902 498Z'/><path d='M907 546 978 546 950 607 968 607 939 655 867 655 897 607 878 607Z'/></svg>");
    --hl-bolt-split: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 360' preserveAspectRatio='none' fill='black'><path d='M185 0 345 0 251 202 312 202 215 360 55 360 152 202 91 202Z'/></svg>");
    --hl-bg: #f1f3f7;
    --hl-bolt: #1519230d;
    --hl-text: #151923;
    --hl-muted: #526789;
    --hl-border: #dde2ec;
    --hl-hover: #c5d0ea;
    --hl-cell: #fff;
    --hl-cell-hover: #e2e8f8;
    --hl-selected: var(--brand);
    --toast-bg: #fff;
    --shadow: #1519231f;
    --chosen: #fff;
    --chosen-shadow: 0 1px 3px #1519231a;
    --home-glow: var(--brand);
    --sb-field: #d6ddee;
    --sb-line: #fffffff2;
    --sb-glass: #efeffa99;
    --sb-badge: #fff;
    --sb-shadow: #232b361a;
    --sb-divider: #15192314;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light
}

:root[data-theme=dark] {
    --bg: #090915;
    --sb-field: #171c2e;
    --sb-line: #ffffff17;
    --sb-glass: #212536b3;
    --sb-badge: #2d374d;
    --sb-shadow: #0000004d;
    --sb-divider: #ffffff14;
    --surface: #212536;
    --surface-2: #2d374d;
    --surface-3: #3b4863;
    --surface-4: #475674;
    --chosen: #3b4863;
    --chosen-shadow: none;
    --hover: #282d40;
    --line: #2d374d;
    --odd-border: transparent;
    --text: #f5f7fa;
    --muted: #9aa7c4;
    --price: #a3d369;
    --live: #ff5a36;
    --up-text: #4ade80;
    --down-text: #f87171;
    --up-rgb: 74 222 128;
    --down-rgb: 248 113 113;
    --warn-text: #facc15;
    --info-text: #6cb4ff;
    --open-text: #7dd3fc;
    --open-bg: #38bdf829;
    --error-bg: #3a1717;
    --error-text: #fca5a5;
    --best: #a3d369;
    --focus: color-mix(in srgb, var(--brand) 55%, #fff);
    --hl-bg: #0f1222;
    --hl-bolt: #ffffff0b;
    --hl-text: #f8f4ef;
    --hl-muted: #f8f4efb8;
    --hl-border: #1d2236;
    --hl-hover: #3b4863;
    --hl-cell: #f8f4ef;
    --hl-cell-hover: #e9e2d8;
    --hl-selected: var(--brand);
    --toast-bg: #0f1420;
    --shadow: #00000073;
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

html,
body {
    background: var(--bg)
}

body {
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font: 400 14px/1.4 Geist, system-ui, -apple-system, Segoe UI, Roboto, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

code {
    background: var(--surface-2);
    border-radius: 4px;
    padding: 1px 6px;
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace
}

.muted {
    color: var(--muted)
}

.topbar {
    z-index: 20;
    background: var(--brand);
    align-items: center;
    gap: 32px;
    height: 60px;
    padding: 0 20px;
    display: flex;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 8px #00000040
}

.brand {
    color: #fff;
    align-items: baseline;
    gap: 4px;
    display: flex
}

.brand-mark {
    letter-spacing: -.5px;
    font: italic 700 26px/1 Barlow Condensed, sans-serif
}

.brand-text {
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 550
}

.brand-logo {
    object-fit: contain;
    max-width: 160px;
    height: 28px;
    display: block
}

.topnav {
    align-self: stretch;
    gap: 22px;
    display: flex
}

.topnav-link {
    color: #ffffffd9;
    text-transform: uppercase;
    border-bottom: 3px solid #0000;
    align-items: center;
    padding-top: 3px;
    font-size: 13px;
    font-weight: 450;
    display: flex
}

.topnav-link:hover {
    color: #fff
}

.topnav-active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 650
}

.topbar-actions {
    align-items: center;
    gap: 4px;
    margin-left: auto;
    display: flex
}

.topbar-icon {
    color: #fff;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 40px;
    height: 40px;
    display: grid
}

.topbar-icon:hover {
    background: #00000026
}

.search-pill {
    color: #fff;
    width: 240px;
    height: 38px;
    font: inherit;
    text-align: left;
    cursor: text;
    background: #ffffff2e;
    border: 0;
    border-radius: 19px;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    font-size: 13px;
    transition: width .3s cubic-bezier(.2, .8, .2, 1), background-color .2s;
    display: flex;
    overflow: hidden
}

.search-pill svg {
    flex: none
}

.search-pill:hover {
    background: #ffffff42
}

.search-pill-text {
    white-space: nowrap;
    opacity: .85;
    transition: opacity .2s 80ms
}

.search-pill.is-compact {
    cursor: pointer;
    width: 38px
}

.search-pill.is-compact .search-pill-text {
    opacity: 0;
    transition-delay: 0s
}

@media (width<=860px) {

    .search-pill,
    .search-pill.is-compact {
        cursor: pointer;
        width: 36px;
        height: 36px;
        padding: 0 8px;
        transition: none
    }

    .search-pill-text {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .search-pill,
    .search-pill-text {
        transition: none
    }
}

.content {
    padding: 16px 20px 48px
}

.list-page {
    max-width: 1240px;
    margin: 0 auto
}

.list-layout {
    grid-template-columns: 230px minmax(0, 1fr) 280px;
    grid-template-areas: "side main aside";
    align-items: start;
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
    display: grid
}

.list-layout .list-page {
    grid-area: main;
    min-width: 0;
    max-width: none;
    margin: 0
}

.page-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    display: flex
}

.page-title,
.side-title {
    text-transform: uppercase;
    letter-spacing: .2px;
    margin: 0;
    font: italic 700 28px/1.1 Barlow Condensed, sans-serif
}

.page-count {
    font-size: .85em
}

.updated {
    color: var(--muted);
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: inline-flex
}

.filters {
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: flex
}

.filters-right {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.filter-clear {
    background: var(--chosen);
    max-width: 100%;
    box-shadow: var(--chosen-shadow)
}

.filter-clear-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.filter-clear svg {
    color: var(--muted);
    flex: none
}

@media (width>=861px) {
    .filters {
        flex-wrap: nowrap
    }

    .filters>.chips {
        flex: 1;
        min-width: 0
    }

    .filters-right {
        flex: none;
        margin-left: auto
    }

    .filters .search {
        width: 240px
    }
}

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

.chips-scroll {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 12px calc(100% - 24px), #0000);
    mask-image: linear-gradient(90deg, #0000, #000 12px calc(100% - 24px), #0000)
}

.chips-scroll::-webkit-scrollbar {
    display: none
}

.chips-scroll .chip {
    white-space: nowrap;
    scroll-snap-align: start;
    flex: none
}

.chip {
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex
}

.chip:hover {
    background: var(--surface-2)
}

.chip-active,
.chip-active:hover {
    background: var(--chosen);
    box-shadow: var(--chosen-shadow);
    font-weight: 700
}

.chip-count {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400
}

.search,
.select {
    border: 1px solid var(--line);
    background: var(--surface);
    height: 36px;
    color: var(--text);
    font: inherit;
    border-radius: 8px;
    padding: 0 12px
}

.search {
    width: 260px;
    max-width: 100%
}

.search::placeholder {
    color: var(--muted)
}

.spinner {
    border: 2px solid var(--surface-3);
    border-top-color: var(--brand);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: .8s linear infinite spin;
    display: inline-block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.busy {
    vertical-align: middle;
    place-items: center;
    display: inline-grid
}

.busy>* {
    grid-area: 1/1
}

.busy-label {
    visibility: hidden
}

.busy-inline {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.busy-spinner {
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    animation: .7s linear infinite spin
}

@media (prefers-reduced-motion:reduce) {
    .busy-spinner {
        animation-duration: 1.6s
    }
}

.notice {
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px 14px
}

.notice-error {
    background: var(--error-bg);
    color: var(--error-text)
}

.notice-suspended {
    background: var(--surface);
    color: var(--muted);
    font-size: 13px
}

.empty {
    background: var(--surface);
    text-align: center;
    color: var(--muted);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 36px 16px
}

.empty p {
    margin: 4px 0
}

.empty a {
    color: var(--brand);
    font-weight: 550
}

.empty-state {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    display: flex
}

.empty-icon {
    background: var(--surface-2);
    width: 56px;
    height: 56px;
    color: var(--muted);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 6px;
    display: grid
}

.empty-state .empty-title {
    color: var(--text);
    margin: 0;
    font-size: 15px;
    font-weight: 600
}

.empty-state .empty-text {
    margin: 0;
    font-size: 13px
}

.empty-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.empty-actions:empty {
    display: none
}

.empty-state .empty-button {
    background: var(--brand);
    color: #fff;
    height: 38px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 550;
    display: inline-flex
}

.empty-state .empty-button:hover {
    background: var(--brand-hover)
}

.empty-state .empty-button.is-quiet {
    background: var(--surface-2);
    color: var(--text)
}

.empty-state .empty-button.is-quiet:hover {
    background: var(--surface-3)
}

.empty-actions.is-even {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    display: inline-grid
}

.empty-actions.is-even .empty-button {
    white-space: nowrap;
    justify-content: center
}

.empty-state .empty-link {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 550;
    display: inline-flex
}

.empty-state .empty-link:hover {
    text-decoration: underline
}

.empty-result {
    background: var(--surface-2);
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin: 8px 0 6px;
    padding: 12px 16px;
    display: flex
}

.empty-result-teams {
    color: var(--text);
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    display: flex
}

.empty-result-score {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600
}

.empty-button-count {
    opacity: .8;
    font-size: 11px;
    font-weight: 400
}

.empty-others {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    display: flex
}

.empty-others .chips {
    justify-content: center
}

.empty-state .chip {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 500
}

.empty-state .chip:hover {
    background: var(--surface-3)
}

.league {
    background: var(--surface);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden
}

.league-head {
    background: var(--surface-2);
    width: 100%;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    border: 0;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) 20px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 550;
    display: grid
}

.league-head[aria-expanded=true] {
    border-bottom: 1px solid var(--line)
}

.league-head:hover .league-name {
    color: var(--brand)
}

.league-title {
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex
}

.league-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.league-count {
    background: var(--surface);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    flex: none;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 450
}

.league-cols {
    text-align: center;
    color: var(--muted);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    font-size: 11px;
    font-weight: 450;
    display: grid
}

.league-cols.row-odds-2 {
    grid-template-columns: repeat(2, 1fr)
}

.league-head .league-chevron {
    grid-column: -2;
    justify-self: center
}

.flag {
    object-fit: cover;
    border-radius: 50%;
    flex: none;
    width: 16px;
    height: 16px
}

.flag-empty {
    background: var(--surface-3);
    display: inline-block
}

.chevron,
.league-chevron {
    color: var(--muted);
    flex: none;
    transition: transform .15s
}

.is-closed {
    transform: rotate(180deg)
}

.league-body {
    overflow: hidden
}

.match-row {
    border-top: 1px solid var(--line);
    grid-template-columns: 64px minmax(0, 1fr) minmax(360px, 520px) 20px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    display: grid
}

.match-row:first-child {
    border-top: 0
}

.match-row:hover {
    background: var(--hover)
}

.when {
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    display: flex
}

.when-top {
    white-space: nowrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 550;
    display: inline-flex
}

.clock-added {
    color: var(--up-text);
    margin-left: 3px;
    font-size: .85em
}

.scoreboard-period {
    font-weight: 450
}

.when-sub {
    color: var(--muted);
    font-size: 11px
}

.when-live .when-top,
.bolt {
    color: var(--live)
}

.teams {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    display: flex
}

.team {
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    display: flex
}

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

.team-score {
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 18px;
    font-weight: 700
}

.row-odds {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    display: grid
}

.row-more {
    color: var(--muted);
    justify-content: center;
    display: flex
}

.row-odds-2 {
    grid-template-columns: repeat(2, 1fr)
}

.row-odds>.row-odds-none {
    grid-column: 1/-1
}

.row-odds-none {
    min-height: 38px;
    color: var(--muted);
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    display: flex
}

.odd {
    background: var(--surface-2);
    border: 1px solid var(--odd-border);
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 38px;
    padding: 6px 12px;
    display: flex
}

.odd-label {
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
    display: flex
}

.odd-label-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.odd-price {
    color: var(--price);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 13px;
    font-weight: 700
}

.odd-empty .odd-price {
    color: var(--muted)
}

.odd-empty {
    opacity: .55
}

.odd-locked {
    opacity: .5
}

.odd-pickable.odd-locked {
    cursor: not-allowed
}

.odd-locked .odd-price {
    color: var(--muted)
}

.odd {
    transition: opacity .3s;
    position: relative;
    overflow: hidden
}

.odd-price {
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.odd-label,
.odd-price {
    position: relative
}

.odd-up {
    --move: var(--up-text);
    --move-rgb: var(--up-rgb)
}

.odd-down {
    --move: var(--down-text);
    --move-rgb: var(--down-rgb)
}

.odd-roll {
    display: inline-flex
}

.odd-sr {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.odd-digits {
    display: inline-flex
}

.odd-digit {
    display: inline-grid;
    overflow: hidden
}

.odd-digit>span {
    text-align: center;
    grid-area: 1/1
}

.odd-digit-changed>span {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    animation-delay: calc(var(--i) * 45ms)
}

.odd-up .odd-digit-changed .odd-digit-new {
    animation-name: roll-in-up;
    animation-fill-mode: both
}

.odd-up .odd-digit-changed .odd-digit-old {
    animation-name: roll-out-up;
    animation-fill-mode: forwards
}

.odd-down .odd-digit-changed .odd-digit-new {
    animation-name: roll-in-down;
    animation-fill-mode: both
}

.odd-down .odd-digit-changed .odd-digit-old {
    animation-name: roll-out-down;
    animation-fill-mode: forwards
}

@keyframes roll-in-up {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
}

@keyframes roll-out-up {
    to {
        opacity: 0;
        transform: translateY(-100%)
    }
}

@keyframes roll-in-down {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }
}

@keyframes roll-out-down {
    to {
        opacity: 0;
        transform: translateY(100%)
    }
}

.odd-wash {
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    inset: 0
}

.odd-up .odd-wash {
    background: linear-gradient(to top, rgb(var(--move-rgb) / .3), rgb(var(--move-rgb) / 0) 80%);
    animation: 3.5s ease-in-out forwards wave-up
}

.odd-down .odd-wash {
    background: linear-gradient(to bottom, rgb(var(--move-rgb) / .3), rgb(var(--move-rgb) / 0) 80%);
    animation: 3.5s ease-in-out forwards wave-down
}

.odd-selected .odd-wash {
    --move-rgb: 255 255 255
}

.odd-locked .odd-wash {
    display: none
}

@keyframes wave-up {
    0% {
        opacity: 0;
        transform: translateY(45%)
    }

    8% {
        opacity: 1;
        transform: none
    }

    22% {
        opacity: .35
    }

    34% {
        opacity: 1
    }

    48% {
        opacity: .35
    }

    60% {
        opacity: .9
    }

    to {
        opacity: 0
    }
}

@keyframes wave-down {
    0% {
        opacity: 0;
        transform: translateY(-45%)
    }

    8% {
        opacity: 1;
        transform: none
    }

    22% {
        opacity: .35
    }

    34% {
        opacity: 1
    }

    48% {
        opacity: .35
    }

    60% {
        opacity: .9
    }

    to {
        opacity: 0
    }
}

:is(.odd-up, .odd-down):not(.odd-locked) .odd-price {
    animation: 3.5s ease-in-out forwards price-pulse
}

@keyframes price-pulse {

    0%,
    8% {
        color: var(--move)
    }

    22% {
        color: var(--price)
    }

    34% {
        color: var(--move)
    }

    48% {
        color: var(--price)
    }

    60% {
        color: var(--move)
    }

    to {
        color: var(--price)
    }
}

.odd-open .odd-digits {
    animation: .4s ease-out fade-in
}

@keyframes fade-in {
    0% {
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {

    .odd-digit>span,
    .odd-wash,
    .odd-price,
    .odd-digits {
        animation: none !important
    }

    .odd-digit-old {
        display: none
    }

    :is(.odd-up, .odd-down):not(.odd-locked) .odd-price {
        color: var(--move)
    }
}

.match-layout {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    align-items: start;
    gap: 16px;
    margin: -16px -20px 0;
    display: grid
}

.side-list {
    border-right: 1px solid var(--line);
    flex-direction: column;
    height: calc(100vh - 60px);
    display: flex;
    position: sticky;
    top: 60px
}

.side-title {
    padding: 16px 14px 10px;
    font-size: 24px
}

.side-scroll {
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 16px;
    display: flex;
    overflow-y: auto
}

.side-group {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.side-league {
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 4px 0;
    font-size: 12px;
    display: flex;
    overflow: hidden
}

.side-league span {
    text-overflow: ellipsis;
    overflow: hidden
}

.match-card {
    background: var(--surface);
    border: 1px solid #0000;
    border-radius: 8px;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    display: flex
}

.match-card:hover {
    background: var(--hover)
}

.match-card-active {
    border-color: var(--brand)
}

.match-card .when {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px
}

.match-card .team {
    font-size: 14px
}

.match-card .row-odds {
    gap: 6px
}

.match-card .odd {
    min-height: 32px;
    padding: 4px 8px
}

.match-card .odd-price {
    font-size: 12px
}

.match-card .row-odds-none {
    min-height: 32px
}

.match-main {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 14px;
    display: flex
}

.breadcrumb {
    color: var(--muted);
    align-items: center;
    gap: 8px;
    font-size: 13px;
    display: flex
}

.scoreboard {
    isolation: isolate;
    background: var(--sb-field);
    color: var(--sb-line);
    border-radius: 12px;
    justify-content: center;
    padding: 12px 16px;
    display: flex;
    position: relative;
    overflow: hidden
}

.sb-field {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.sb-card {
    width: 100%;
    max-width: 640px;
    color: var(--text);
    box-shadow: 0 0 8px var(--sb-shadow);
    border-radius: 12px;
    overflow: hidden
}

.sb-top {
    background: var(--surface);
    justify-content: center;
    padding: 10px 16px 8px;
    font-size: 12px;
    display: flex
}

.sb-date {
    font-weight: 550
}

.sb-clock {
    background: color-mix(in srgb, var(--live) 14%, transparent);
    color: var(--live);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    font-weight: 650;
    display: inline-flex
}

.sb-body {
    background: var(--sb-glass);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 14px 16px
}

.sb-main {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    display: grid
}

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

.sb-team-row {
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    display: flex
}

.sb-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden
}

.sb-away .sb-team-row,
.scoreboard.is-live .sb-home .sb-team-row {
    flex-direction: row-reverse
}

.scoreboard.is-live .sb-away .sb-team-row {
    flex-direction: row
}

.scoreboard.is-live .sb-home {
    align-items: flex-end
}

.scoreboard.is-live .sb-away {
    align-items: flex-start
}

.sb-badge {
    background: var(--sb-badge);
    width: 38px;
    height: 38px;
    box-shadow: 0 2px 6px var(--sb-shadow);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.sb-badge .logo-fallback {
    background: 0 0
}

.sb-shirt {
    display: block
}

.sb-center {
    justify-content: center;
    min-width: 40px;
    display: flex
}

.sb-vs {
    color: var(--muted);
    font-size: 13px;
    font-weight: 550
}

.sb-score {
    font-variant-numeric: tabular-nums;
    gap: 8px;
    font-size: 28px;
    font-weight: 650;
    line-height: 1;
    display: inline-flex
}

.sb-dash {
    color: var(--muted);
    font-weight: 450
}

.sb-goals {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    display: inline-flex
}

.sb-body .periods {
    margin-top: 12px
}

.sb-body .score-summary {
    border-top-color: var(--sb-divider)
}

.market-bar {
    --strip-h: 48px;
    top: calc(max(var(--topbar-h, 60px), env(safe-area-inset-top)) + var(--strip-h));
    z-index: 5;
    background: var(--surface);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    display: flex;
    position: sticky
}

.market-bar:has(.match-strip.is-shown) {
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 12px -8px #0009
}

.match-strip {
    height: var(--strip-h);
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px 10px 0 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    transition: opacity .15s, transform .15s, visibility 0s .15s;
    display: grid;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    transform: translateY(6px)
}

.match-strip.is-shown {
    opacity: 1;
    visibility: visible;
    transition: opacity .15s, transform .15s;
    transform: none
}

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

.ms-home {
    justify-content: flex-end
}

.ms-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 13px;
    font-weight: 550;
    overflow: hidden
}

.ms-team .logo {
    flex: none
}

.ms-center {
    white-space: nowrap;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    display: flex
}

.ms-when {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 11px
}

.ms-main {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 650
}

.match-strip.is-live .ms-when {
    color: var(--live);
    font-weight: 550
}

@media (prefers-reduced-motion:reduce) {

    .match-strip,
    .match-strip.is-shown {
        transition: none;
        transform: none
    }
}

.market-tabs {
    flex: 1;
    gap: 4px;
    min-width: 0;
    padding: 6px;
    display: flex;
    overflow-x: auto
}

.market-tab {
    white-space: nowrap;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500
}

.market-tab:hover {
    background: var(--surface-2)
}

.market-tab-active {
    background: var(--surface-3);
    font-weight: 700
}

.market-tool {
    width: 36px;
    height: 36px;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    margin: 0 2px;
    padding: 0;
    display: grid
}

.market-tool-search {
    margin-left: 6px
}

.market-tool-fold {
    margin-right: 6px
}

.market-tool:hover {
    background: var(--surface-2)
}

.market-search {
    border: 1px solid var(--odd-border);
    background: var(--surface);
    min-width: 0;
    height: 36px;
    color: var(--text);
    font: inherit;
    border-radius: 8px;
    flex: 1;
    margin: 6px 0;
    padding: 0 12px;
    font-size: 14px
}

.market-search:focus {
    outline: 2px solid var(--focus);
    outline-offset: -1px
}

.breadcrumb-path {
    flex-wrap: wrap;
    gap: 0
}

.breadcrumb-path .flag {
    margin-right: 6px
}

.bc-link {
    color: inherit;
    text-decoration: none
}

.bc-link:hover {
    color: var(--text);
    text-decoration: underline
}

.bc-step {
    align-items: center;
    display: inline-flex
}

.bc-step:before {
    content: "/";
    opacity: .6;
    margin: 0 8px
}

.bc-current {
    color: var(--text);
    font-weight: 600
}

.info-tabs {
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    gap: 20px;
    padding: 0 4px;
    display: flex;
    overflow-x: auto
}

.info-tab {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-bottom: 2px solid #0000;
    flex: none;
    margin-bottom: -1px;
    padding: 8px 0 10px;
    font-size: 15px;
    font-weight: 500
}

.info-tab:hover {
    color: var(--text)
}

.info-tab-active {
    border-bottom-color: var(--text);
    color: var(--text);
    font-weight: 600
}

.info-panel.market {
    padding: 14px 0 4px
}

.info-panel .pitch-stats {
    padding: 0 14px 10px
}

.info-analysis .top-choices-track {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-flow: row;
    overflow: visible
}

.info-analysis .carousel-btn {
    display: none
}

.match-players {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    display: flex
}

.mp-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.mp-title {
    text-transform: uppercase;
    margin: 4px 0 0;
    font: italic 700 20px/1.1 Barlow Condensed, sans-serif
}

.mp-sides {
    background: var(--surface);
    border-radius: 999px;
    padding: 3px;
    display: flex
}

.mp-side {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500
}

.mp-side.is-active {
    background: var(--surface-3);
    color: var(--text);
    font-weight: 600
}

.multiples-track.mp-track {
    grid-auto-columns: calc(50% - 5px)
}

@media (width<=700px) {
    .multiples-track.mp-track {
        grid-auto-columns: calc(100% - 28px)
    }
}

.mp-card {
    scroll-snap-align: start;
    background: var(--surface);
    border-radius: 12px;
    flex-direction: column;
    min-width: 0;
    display: flex;
    overflow: hidden
}

.mp-top {
    color: #fff;
    background: radial-gradient(ellipse 60% 100% at 100% 0, #ffffff29, transparent 70%), linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #000));
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-areas: "position shirt" "name shirt" "team shirt";
    align-content: start;
    place-items: start;
    row-gap: 4px;
    height: 112px;
    padding: 12px 12px 12px 14px;
    display: grid;
    position: relative
}

.mp-position {
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid #ffffffd9;
    border-radius: 999px;
    grid-area: position;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700
}

.mp-name {
    text-transform: uppercase;
    flex-direction: column;
    grid-area: name;
    min-width: 0;
    max-width: 100%;
    font: italic 22px/1 Barlow Condensed, sans-serif;
    display: flex
}

.mp-first {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.mp-last {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    overflow: hidden
}

.mp-team {
    color: #ffffffd9;
    white-space: nowrap;
    text-overflow: ellipsis;
    grid-area: team;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 12px;
    display: inline-flex;
    overflow: hidden
}

.mp-top .pp-shirt {
    grid-area: shirt;
    align-self: center;
    width: 76px;
    height: 76px
}

.mp-top .pp-shirt :is(img, svg) {
    width: 76px;
    height: 76px
}

.mp-top .pp-shirt svg path {
    fill: #ffffff38
}

.mp-body {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    display: flex
}

.mp-pair {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid
}

.mp-pair.is-single {
    grid-template-columns: 1fr
}

.mp-cell {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.mp-label {
    color: var(--muted);
    text-align: center;
    font-size: 12px
}

.mp-cell .odd {
    justify-content: center;
    height: 34px
}

.mp-cell .odd-label:empty {
    display: none
}

.mp-cell .odd-label:has(.odd-label-text:empty) {
    display: none
}

.mp-lines {
    grid-template-columns: 28px repeat(2, minmax(0, 1fr)) 28px;
    align-items: center;
    gap: 6px;
    display: grid
}

.mp-lines .odd {
    justify-content: space-between
}

.mp-step {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 28px;
    height: 28px;
    color: var(--text);
    cursor: pointer;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    display: grid
}

.mp-step:disabled {
    opacity: .35;
    cursor: default
}

.mp-step:last-child {
    grid-column: 4
}

.market {
    background: var(--surface);
    border-radius: 10px;
    overflow: hidden
}

.market-head {
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 400;
    display: flex
}

.market-grid {
    gap: 8px;
    padding: 0 14px 14px;
    display: grid
}

.show-all {
    width: calc(100% - 28px);
    height: 34px;
    color: var(--text);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: -4px 14px 14px;
    font-size: 12px;
    font-weight: 450;
    display: flex
}

.show-all:hover {
    color: var(--muted)
}

.show-all .chevron {
    width: 10px
}

.market-grid .odd {
    height: 38px;
    padding-block: 0
}

.market-grid .odd-label-text {
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 15px;
    display: -webkit-box
}

.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.match-aside {
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 0 0;
    display: flex;
    position: sticky;
    top: 74px
}

.aside-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 14px
}

.aside-title {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 0 0 10px;
    font-size: 13px
}

.logo {
    object-fit: contain;
    border-radius: 50%;
    flex: none
}

.logo-fallback {
    background: var(--surface-3);
    color: var(--muted);
    justify-content: center;
    align-items: center;
    font-weight: 650;
    display: inline-flex
}

.score-summary {
    border-top: 1px solid var(--line);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    display: flex
}

.score-counts {
    font-variant-numeric: tabular-nums;
    gap: 22px;
    font-size: 13px;
    font-weight: 550;
    display: flex
}

.score-count {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.latest-play {
    background: var(--surface-2);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    display: inline-flex
}

.latest-play:hover {
    background: var(--surface-3)
}

.latest-minute {
    font-variant-numeric: tabular-nums;
    font-weight: 650
}

.latest-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.dialog-backdrop {
    z-index: 50;
    background: var(--scrim);
    -webkit-backdrop-filter: var(--scrim-blur);
    backdrop-filter: var(--scrim-blur);
    justify-content: center;
    align-items: center;
    padding: 16px;
    animation: .25s ease-out scrim-in;
    display: flex;
    position: fixed;
    inset: 0
}

@keyframes scrim-in {
    0% {
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .dialog-backdrop {
        animation: none
    }
}

.dialog {
    background: var(--surface);
    width: min(520px, 100%);
    max-height: min(80vh, 720px);
    box-shadow: 0 20px 50px var(--shadow);
    border-radius: 12px;
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.dialog-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 8px;
    display: flex
}

.dialog-title {
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
    font: italic 700 22px/1 Barlow Condensed, sans-serif
}

.dialog-teams {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    font-weight: 650;
    display: flex
}

.dialog-close {
    background: var(--surface-2);
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

.dialog-close:hover {
    background: var(--surface-3)
}

.dialog-filters {
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 10px;
    display: flex
}

.mini-chip {
    border: 1px solid var(--line);
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px
}

.mini-chip-active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
    font-weight: 650
}

.incidents {
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
    display: flex;
    overflow-y: auto
}

.incident {
    grid-template-columns: 1fr 48px 1fr;
    align-items: center;
    min-height: 48px;
    display: grid;
    position: relative
}

.incident:before {
    content: "";
    background: var(--line);
    width: 2px;
    margin-left: -1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%
}

.incident-mark {
    z-index: 1;
    flex-direction: column;
    grid-area: 1/2;
    align-items: center;
    gap: 2px;
    display: flex;
    position: relative
}

.incident-minute {
    font-variant-numeric: tabular-nums;
    background: var(--surface-3);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 650
}

.incident-text {
    flex-direction: column;
    grid-row: 1;
    gap: 1px;
    padding: 0 10px;
    font-size: 13px;
    display: flex
}

.incident-text span {
    color: var(--muted);
    font-size: 12px
}

.incident-home .incident-text {
    text-align: right;
    border-right: 3px solid #3b82f6;
    grid-column: 1
}

.incident-away .incident-text {
    border-left: 3px solid #93c5fd;
    grid-column: 3
}

.incident-start {
    text-align: center;
    background: var(--surface-3);
    border-radius: 8px;
    margin-top: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 550
}

.tracker-panel {
    padding: 0;
    overflow: hidden
}

.tracker-tabs {
    gap: 4px;
    padding: 8px;
    display: flex
}

.tracker-tab {
    min-width: 0;
    height: 36px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex
}

@media (hover:hover) {
    .tracker-tab:hover {
        background: var(--surface-2)
    }
}

.tracker-tab-active,
.tracker-tab-active:hover {
    background: var(--surface-3);
    font-weight: 600
}

.tracker-panel .pitch-wrap,
.tracker-panel .pitch-stats {
    padding: 0 12px 12px
}

.tracker-empty {
    margin: 0;
    padding: 8px 14px 14px;
    font-size: 13px
}

.match-info-bottom {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.pitch-licensed {
    position: relative;
    container-type: inline-size
}

.pitch-licensed iframe {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    background: var(--surface);
    opacity: 0;
    pointer-events: none;
    border: 0;
    width: calc(100% - 24px);
    max-width: 536px;
    height: calc(min(100cqi - 24px, 536px)/2 + 30px);
    position: absolute;
    top: 0;
    left: 12px
}

.pitch-licensed.is-loading,
.pitch-licensed.is-ready {
    max-width: 560px;
    margin-inline: auto;
    padding: 0 12px 12px
}

.pitch-licensed-wait {
    display: block
}

.pitch-licensed.is-ready iframe {
    opacity: 1;
    pointer-events: auto;
    border-radius: 8px;
    width: 100%;
    max-width: none;
    height: calc(50cqi + 30px);
    display: block;
    position: static
}

.pitch-wrap {
    max-width: 560px;
    margin-inline: auto
}

.pitch {
    perspective: 700px;
    perspective-origin: 50% 0;
    background: radial-gradient(60% 70% at 18% 0, #ffffff29, #0000 70%), radial-gradient(60% 70% at 82% 0, #ffffff29, #0000 70%), linear-gradient(#0d121b, #1a2230 45%, #173820 100%);
    border-radius: 8px;
    padding: 40px 4px 4px;
    transition: opacity .3s;
    position: relative;
    overflow: hidden
}

.pitch-stands {
    pointer-events: none;
    background: radial-gradient(circle, #ffffff2e .9px, #0000 1.4px) 0 0/6px 5px, radial-gradient(circle, #ffbe781f .9px, #0000 1.4px) 3px 2px/7px 6px;
    position: absolute;
    inset: 0 0 45%;
    -webkit-mask-image: linear-gradient(#000 20%, #0000);
    mask-image: linear-gradient(#000 20%, #0000)
}

.pitch-plane {
    transform-origin: 50% 100%;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transform: rotateX(34deg);
    box-shadow: 0 -10px 30px #00000073
}

.pitch svg {
    width: 100%;
    height: auto;
    display: block
}

.pitch-stale {
    opacity: .55
}

.pitch-stale-note {
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px #0009;
    font-size: 11px;
    position: absolute;
    inset: auto 0 8px
}

.pitch-zone {
    transform-origin: 0 0;
    transition: transform .7s cubic-bezier(.3, .7, .3, 1), opacity .4s;
    animation: .4s ease-out zone-in
}

@keyframes zone-in {
    0% {
        opacity: 0
    }
}

.pitch-zone-faded {
    opacity: .45
}

.pitch-zone-danger .pitch-front {
    animation: 1s ease-in-out infinite danger-pulse
}

@keyframes danger-pulse {
    50% {
        stroke: #fffffff2;
        stroke-width: 7px
    }
}

.pitch-arrow {
    opacity: .85
}

.pitch-ball {
    transition: transform 1.5s cubic-bezier(.45, .05, .35, 1)
}

.pitch-ball-quick {
    transition-duration: .6s
}

.pitch-pulse {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: 1.4s ease-out infinite pulse
}

@keyframes pulse {
    0% {
        opacity: .6;
        transform: scale(.6)
    }

    to {
        opacity: 0;
        transform: scale(1.6)
    }
}

.pitch-goal .pitch-plane {
    animation: 1.2s ease-out 2 goal-flash
}

@keyframes goal-flash {
    30% {
        filter: brightness(1.35)
    }
}

.pitch-caption {
    color: #fff;
    white-space: nowrap;
    background: #080c14c7;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    max-width: 94%;
    padding: 5px 12px;
    font-size: 13px;
    animation: .3s ease-out caption-in;
    display: flex;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 2px 8px #00000059
}

.pitch-caption strong {
    font-size: 13px
}

.pitch-caption-goal {
    background: var(--brand)
}

.pitch-caption-goal strong {
    letter-spacing: .05em;
    font-size: 17px
}

@keyframes caption-in {
    0% {
        opacity: 0;
        transform: translate(-50%, -4px)
    }
}

.pitch-team {
    text-overflow: ellipsis;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: inline-flex;
    overflow: hidden
}

.pitch-team i {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent);
    border-radius: 50%;
    flex: none
}

.pitch-legend {
    justify-content: space-between;
    gap: 8px;
    margin: 8px 2px 4px;
    font-size: 12px;
    font-weight: 550;
    display: flex
}

.pitch-legend .pitch-team:last-child {
    flex-direction: row-reverse
}

@media (prefers-reduced-motion:reduce) {

    .pitch-zone,
    .pitch-ball {
        transition: none;
        animation: none
    }

    .pitch-zone-danger .pitch-front,
    .pitch-pulse,
    .pitch-caption,
    .pitch-goal .pitch-plane {
        animation: none
    }
}

.pitch-stats {
    flex-direction: column;
    gap: 7px;
    display: flex
}

.stat-row {
    grid-template-columns: 32px 1fr 32px;
    align-items: baseline;
    font-size: 12px;
    display: grid
}

.stat-label {
    text-align: center;
    color: var(--muted)
}

.stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 650
}

.stat-row .stat-value:last-child {
    text-align: right
}

.stat-bar {
    gap: 2px;
    height: 4px;
    margin-top: 3px;
    display: flex
}

.stat-bar i {
    border-radius: 2px;
    min-width: 2px;
    height: 100%;
    display: block
}

.play-icon {
    width: 14px;
    height: 14px;
    display: inline-block
}

.sport-bar {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0 12px;
    scroll-padding-inline: 12px;
    display: flex;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 12px calc(100% - 24px), #0000);
    mask-image: linear-gradient(90deg, #0000, #000 12px calc(100% - 24px), #0000)
}

.sport-bar::-webkit-scrollbar {
    display: none
}

.sport-bar .sport-tab {
    white-space: nowrap;
    scroll-snap-align: start;
    flex: none
}

.sport-bar-small {
    margin-bottom: 0
}

.sport-tab {
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-weight: 500;
    display: inline-flex
}

.sport-tab:hover {
    background: var(--surface-2)
}

.sport-tab-active,
.sport-tab-active:hover {
    background: var(--chosen);
    box-shadow: var(--chosen-shadow);
    font-weight: 700
}

.sport-count {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400
}

.sport-bar-small .sport-tab {
    padding: 6px 12px;
    font-size: 12px
}

.sport-bar-small .sport-tab svg,
.sport-bar.sport-bar-small .sport-tab svg {
    width: 22px;
    height: 22px;
    margin: -2px 0
}

.periods {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    margin: 12px auto 0;
    font-size: 13px
}

.periods th,
.periods td {
    text-align: center;
    padding: 4px 10px
}

.periods thead th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 550
}

.periods tbody th {
    text-align: left;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    font-weight: 550;
    display: flex
}

.periods-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.periods td {
    color: var(--muted)
}

.periods .is-current {
    color: var(--text);
    font-weight: 650
}

.periods-points {
    font-weight: 650;
    color: var(--price) !important
}

.periods-total {
    border-left: 1px solid var(--line);
    font-weight: 750;
    color: var(--text) !important
}

.serve-dot {
    background: var(--price);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px
}

.home {
    grid-template-columns: 230px minmax(0, 1fr) 280px;
    grid-template-areas: "side top top" "side main aside";
    align-items: start;
    gap: 22px 18px;
    max-width: 1500px;
    margin: 0 auto;
    display: grid
}

.home-top {
    grid-area: top;
    min-width: 0
}

.home-side {
    flex-direction: column;
    grid-area: side;
    gap: 2px;
    max-height: calc(100vh - 92px);
    display: flex;
    position: sticky;
    top: 76px;
    overflow-y: auto
}

.home-side-title {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 14px 8px 6px;
    font-size: 12px
}

.side-link {
    border-radius: 8px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 450;
    display: flex
}

.side-link:hover {
    background: var(--surface)
}

.side-link-dot {
    background: var(--live);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px #ff5a3640
}

.side-link-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    font-size: 12px
}

.side-competition {
    align-items: flex-start
}

.side-competition .flag {
    margin-top: 2px
}

.side-competition-name {
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    display: flex
}

.side-competition-name small {
    color: var(--muted);
    font-size: 11px
}

.home-main {
    flex-direction: column;
    grid-area: main;
    gap: 22px;
    min-width: 0;
    display: flex
}

.home-section {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.home-section-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.home-title {
    text-transform: uppercase;
    margin: 0;
    font: italic 700 24px/1.1 Barlow Condensed, sans-serif
}

.home-hint {
    font-size: 12px
}

.more-link {
    text-align: center;
    background: var(--surface);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    font-weight: 650;
    display: block
}

.more-link:hover {
    background: var(--surface-2)
}

.highlights {
    position: relative
}

.highlights-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: 346px;
    grid-auto-flow: column;
    gap: 8px;
    padding-bottom: 2px;
    display: grid;
    overflow-x: auto
}

.highlights-track::-webkit-scrollbar {
    display: none
}

.highlight {
    scroll-snap-align: start;
    isolation: isolate;
    background: var(--hl-bg);
    border: 1px solid var(--hl-border);
    --text: var(--hl-text);
    --muted: var(--hl-muted);
    min-height: 200px;
    color: var(--text);
    border-radius: 12px;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    display: flex;
    position: relative
}

.highlight:before,
.multiples .multiple:before {
    content: "";
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: var(--hl-bolt);
    -webkit-mask: var(--hl-bolts) 0 0 / auto no-repeat;
    -webkit-mask: var(--hl-bolts) 0 0 / auto no-repeat;
    mask: var(--hl-bolts) 0 0 / auto no-repeat;
    position: absolute;
    inset: 0
}

.highlight:hover {
    border-color: var(--hl-hover)
}

.offer-banner {
    background: color-mix(in srgb, var(--brand) 14%, var(--hl-bg));
    border-color: var(--hl-border);
    --banner-lead: var(--brand);
    padding: 0;
    overflow: hidden
}

.offer-banner:before {
    display: none
}

:root[data-theme=dark] .offer-banner {
    --banner-lead: color-mix(in srgb, var(--brand) 55%, #fff)
}

.offer-banner:hover {
    border-color: var(--hl-hover)
}

.offer-banner-link {
    border-radius: inherit;
    color: var(--hl-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-direction: column;
    flex: 1;
    padding: 0;
    text-decoration: none;
    display: flex
}

.offer-banner-title {
    letter-spacing: -.05em;
    text-transform: uppercase;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px 22px;
    font: 800 30px/.92 Poppins, sans-serif;
    display: flex
}

.offer-banner-lead {
    color: var(--banner-lead)
}

.offer-banner-body {
    background: var(--surface);
    clip-path: polygon(0 16px, 34% 5px, 30% 16px, 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 11px 11px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    margin-top: -14px;
    padding: 22px 22px 14px;
    display: flex
}

.offer-banner-text {
    text-transform: uppercase;
    max-width: 34ch;
    color: var(--muted);
    font: 700 15px/1.1 Barlow Condensed, sans-serif
}

.offer-banner-more {
    background: var(--brand);
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 3px 12px 4px;
    font: 400 14px/1.1 Anton, sans-serif
}

.offer-banner-link:hover .offer-banner-more {
    background: var(--brand-hover)
}

.img-banner {
    background: var(--hl-border);
    padding: 0;
    overflow: hidden
}

.img-banner:before {
    display: none
}

.img-banner-link {
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: 1;
    padding: 0;
    display: flex
}

.img-banner-pic,
.img-banner>.img-banner-pic {
    object-fit: cover;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block
}

:root:not([data-theme=dark]) :is(.boost-highlight, .multiple-boosted) {
    --hl-bg: color-mix(in srgb, var(--brand) 6%, #fff);
    --hl-bolt: color-mix(in srgb, var(--brand) 11%, transparent)
}

:root:not([data-theme=dark]) .boost-highlight .boost-match {
    color: var(--brand)
}

:root:not([data-theme=dark]) .boost-highlight :is(.odd, .boost-add) {
    border-color: color-mix(in srgb, var(--brand) 25%, transparent)
}

.highlight :is(.odd, .boost-add) {
    --surface-2: var(--hl-cell);
    --surface-3: var(--hl-cell-hover);
    --odd-border: transparent;
    --text: #151923;
    --muted: #526789;
    --price: #3a7824;
    --up-text: #16a34a;
    --down-text: #dc2626;
    --up-rgb: 22 163 74;
    --down-rgb: 220 38 38;
    color: var(--text)
}

.highlight .odd-selected,
.highlight .odd-selected:hover:not([aria-disabled=true]),
.highlight .boost-add.is-added,
.highlight .boost-add.is-added:hover {
    background: var(--hl-selected);
    border-color: var(--hl-selected)
}

.highlight .boost-add.is-added strong {
    color: #fff
}

.highlight .boost-add.is-added s {
    color: #ffffffbf
}

.highlight-top {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    display: flex
}

.highlight-badge {
    color: var(--live);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 650;
    display: inline-flex
}

.highlight-when {
    color: var(--muted);
    white-space: nowrap;
    font-weight: 550
}

.highlight-league {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.highlight-teams {
    flex-direction: column;
    flex: 1;
    justify-content: center;
    gap: 8px;
    display: flex
}

.highlight-team {
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font: italic 700 20px/1.1 Barlow Condensed, sans-serif;
    display: flex
}

.highlight-team span {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.highlight-team strong {
    font-size: 22px
}

.highlight-odds {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    display: grid
}

.highlight-odds .odd {
    min-height: 32px;
    padding: 3px 8px
}

.highlight-odds-2 {
    grid-template-columns: repeat(2, 1fr)
}

.carousel-btn {
    color: #1a1f2b;
    cursor: pointer;
    background: #ffffffeb;
    border: 0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px #00000059
}

.carousel-prev {
    left: -12px
}

.carousel-next {
    right: -12px
}

.multiples-wrap {
    position: relative
}

.multiples-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: 320px;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 2px;
    display: grid;
    overflow-x: auto
}

.multiples-track::-webkit-scrollbar {
    display: none
}

.multiple {
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.multiple-head {
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 10px;
    display: flex
}

.multiple-name {
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: italic 700 18px/1.15 Barlow Condensed, sans-serif;
    overflow: hidden
}

.multiple-kind {
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .04em;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 650;
    display: flex
}

.multiple-bettors {
    color: var(--focus);
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 650;
    display: inline-flex
}

.multiple-legs {
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 4px 14px;
    list-style: none;
    display: flex
}

.multiple-leg {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 8px 0 8px 20px;
    font-size: 13px;
    display: flex;
    position: relative
}

.multiple-leg:before {
    content: "";
    border: 2px solid var(--brand);
    background: var(--surface);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 13px;
    left: 3px
}

.multiple-leg:not(:last-child):after {
    content: "";
    background: var(--line);
    width: 1px;
    position: absolute;
    top: 24px;
    bottom: -13px;
    left: 8px
}

.multiple-pick {
    justify-content: space-between;
    gap: 8px;
    font-weight: 650;
    display: flex
}

.multiple-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.multiple-price {
    color: var(--price);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums
}

.multiple-market {
    color: var(--muted);
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    display: flex
}

.multiple-match {
    flex-wrap: wrap;
    column-gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 550;
    display: flex
}

.multiple-match:hover {
    text-decoration: underline
}

.multiple-when {
    color: var(--muted);
    font-weight: 450
}

.multiple-match-one {
    padding: 0 14px 10px
}

.multiple-foot {
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    display: flex
}

.multiple-total {
    color: var(--muted);
    flex-direction: column;
    font-size: 11px;
    display: flex
}

.multiple-total strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-size: 17px
}

.multiple-total-odd {
    align-items: baseline;
    gap: 6px;
    display: flex
}

.multiple-total-odd s {
    font-variant-numeric: tabular-nums;
    font-size: 13px
}

.multiple-add {
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 650
}

.multiple-add:hover {
    background: var(--brand-hover)
}

.multiple-add.is-added {
    background: var(--up)
}

.multiples .carousel-btn {
    top: 50%
}

.multiples .multiple {
    isolation: isolate;
    background: var(--hl-bg);
    border-color: var(--hl-border);
    --text: var(--hl-text);
    --muted: var(--hl-muted);
    --line: var(--hl-border);
    color: var(--text);
    position: relative
}

.multiples .multiple:before {
    -webkit-mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat;
    -webkit-mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat;
    mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat
}

.multiples .multiple-leg:before {
    background: var(--hl-bg)
}

.multiples .multiple-foot {
    background: 0 0
}

:root:not([data-theme=dark]) .multiple-boosted .multiple-name {
    color: var(--brand)
}

.pp-wrap {
    position: relative
}

.pp-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: 260px;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 10px;
    padding: 30px 0 2px;
    display: grid;
    overflow-x: auto
}

.pp-track::-webkit-scrollbar {
    display: none
}

.pp-card {
    scroll-snap-align: start;
    isolation: isolate;
    background: color-mix(in srgb, var(--brand) 14%, var(--hl-bg));
    border: 1px solid var(--hl-border);
    --text: var(--hl-text);
    --muted: var(--hl-muted);
    color: var(--text);
    border-radius: 12px;
    flex-direction: column;
    display: flex;
    position: relative
}

.pp-card:before {
    content: "";
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: var(--hl-bolt);
    -webkit-mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat;
    -webkit-mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat;
    mask: var(--hl-bolt-split) 0 0 / 100% 100% no-repeat;
    position: absolute;
    inset: 0
}

.pp-top {
    color: inherit;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    margin-top: -30px;
    padding: 0 12px 8px;
    text-decoration: none;
    display: flex
}

.pp-top:hover .pp-name {
    text-decoration: underline
}

.pp-tag {
    color: var(--brand);
    background: #ffffffd9;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    position: absolute;
    top: 8px;
    left: 8px;
    box-shadow: 0 1px 2px #00000014
}

.pp-shirt {
    place-items: center;
    width: 60px;
    height: 60px;
    display: grid;
    position: relative
}

.pp-shirt img,
.pp-shirt svg {
    object-fit: contain;
    filter: drop-shadow(0 3px 6px #00000040);
    width: 60px;
    height: 60px
}

.pp-number {
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
    place-items: center;
    padding-top: 4px;
    font: italic 700 21px/1 Barlow Condensed, sans-serif;
    display: grid;
    position: absolute;
    inset: 0
}

.pp-crests {
    z-index: 1;
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    margin: -8px 0 2px;
    padding: 2px 6px;
    display: inline-flex;
    box-shadow: 0 1px 3px #00000026
}

.pp-crests img {
    object-fit: contain;
    width: 16px;
    height: 16px
}

.pp-crests-sep {
    background: #0003;
    width: 1px;
    height: 12px
}

.pp-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden
}

.pp-match {
    max-width: 100%;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.pp-body {
    background: var(--surface);
    clip-path: polygon(0 12px, 34% 3px, 30% 12px, 100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 11px 11px;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    margin-top: -10px;
    padding: 14px 12px 12px;
    display: flex
}

.pp-legs {
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.pp-leg {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding: 4px 0 4px 18px;
    font-size: 12.5px;
    position: relative;
    overflow: hidden
}

.pp-leg:before {
    content: "";
    border: 2px solid var(--brand);
    background: var(--surface);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 8px;
    left: 3px
}

.pp-leg:not(:last-child):after {
    content: "";
    background: var(--line);
    width: 1px;
    position: absolute;
    top: 19px;
    bottom: -8px;
    left: 8px
}

.pp-market {
    color: var(--muted)
}

.pp-pick {
    font-weight: 600
}

.pp-add {
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-weight: 600;
    display: flex
}

.pp-add:hover {
    background: var(--brand-hover)
}

.pp-add.is-added {
    background: var(--up)
}

.pp-odd {
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 6px;
    display: flex
}

.pp-odd strong {
    font-size: 16px;
    font-weight: 650
}

.pp-odd s {
    opacity: .8;
    font-size: 12px
}

.popular-players .carousel-btn {
    top: calc(50% + 15px)
}

.tip-icon {
    color: var(--brand);
    flex: none
}

.tip-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.4
}

.tip-market {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 450;
    overflow: hidden
}

.day-tip-bet .odd {
    height: 38px;
    padding-block: 0
}

.tip-tag {
    gap: 5px
}

.tip-tag .tip-icon {
    width: 13px;
    height: 13px
}

.tip-card {
    gap: 8px
}

.tip-card .tip-text {
    flex: 1
}

.tip-pick {
    color: var(--muted);
    margin: 0;
    font-size: 12.5px
}

.tip-pick strong {
    color: var(--text);
    font-weight: 550
}

.tip-card .boost-add {
    margin-top: 0
}

.tip-card .boost-add,
.top-choices .boost-add {
    height: 38px;
    padding-block: 0
}

.tip-card .boost-add strong,
.top-choices .boost-add strong {
    font-size: 13px
}

.day-tip {
    gap: 10px;
    padding: 12px 14px 14px
}

.day-tip-match {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    display: flex
}

.day-tip-match:hover .day-tip-teams {
    text-decoration: underline
}

.day-tip-teams {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 550;
    overflow: hidden
}

.day-tip-match .multiple-when {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.day-tip-text {
    flex: 1;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    display: flex
}

.day-tip-text .tip-icon {
    margin-top: 1px
}

.day-tip-bet {
    flex-direction: column;
    gap: 3px;
    display: flex
}

.boost-tag {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    background: linear-gradient(90deg, #6d28d9, #8b5cf6);
    border-radius: 4px;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    font: italic 700 13px/1.2 Barlow Condensed, sans-serif;
    display: inline-flex
}

.boost-tag-super {
    background: linear-gradient(90deg, #be185d, #9333ea)
}

.boost {
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px 14px;
    display: flex
}

.boost-head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

.boost-match {
    flex-wrap: wrap;
    column-gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 550;
    display: flex
}

.boost-match:hover {
    text-decoration: underline
}

.boost-legs {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    list-style: none;
    display: flex
}

.boost-legs li {
    padding-left: 16px;
    position: relative
}

.boost-legs li:before {
    content: "";
    opacity: .8;
    border: 2px solid;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 5px;
    left: 1px
}

.boost-legs strong {
    font-weight: 550
}

.boost-limit {
    color: var(--muted);
    margin: 0;
    font-size: 11px
}

.boost-add {
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface-2);
    width: 100%;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px;
    display: flex
}

.boost-add:hover {
    border-color: var(--price)
}

.boost-add s {
    color: var(--muted);
    font-size: 13px
}

.boost-add strong {
    color: var(--price);
    letter-spacing: -.02em;
    font-size: 15px;
    font-weight: 650
}

.boost-add.is-added {
    border-color: var(--up);
    background: color-mix(in srgb, var(--up) 12%, transparent)
}

.boost-added {
    color: var(--up-text);
    font-size: 12px;
    font-weight: 550
}

.top-choices {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.top-choices-title {
    text-transform: uppercase;
    margin: 4px 0 0;
    font: italic 700 20px/1.1 Barlow Condensed, sans-serif
}

.top-choices-track {
    grid-auto-columns: 346px;
    gap: 8px
}

.top-choices .boost-add {
    margin-top: auto
}

.choice-tag {
    background: var(--surface-3);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: 4px;
    align-items: center;
    padding: 3px 8px;
    font: italic 700 13px/1.2 Barlow Condensed, sans-serif;
    display: inline-flex
}

.boost-highlight {
    gap: 8px
}

.boost-highlight .boost-match {
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: italic 700 18px/1.15 Barlow Condensed, sans-serif;
    display: block;
    overflow: hidden
}

.boost-highlight .boost-legs {
    gap: 3px;
    font-size: 12.5px
}

.boost-highlight .boost-head {
    justify-content: flex-start;
    min-width: 0;
    font-size: 12px
}

.boost-highlight .boost-head .multiple-bettors {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.boost-highlight .boost-head .highlight-when {
    flex: none;
    margin-left: auto
}

.top-choices .boost {
    position: relative
}

:is(.boost-highlight, .top-choices .boost) .boost-head>:is(.boost-tag, .choice-tag) {
    border-radius: var(--tag-corner, 11px) 0 8px 0;
    letter-spacing: .02em;
    text-transform: uppercase;
    height: 14px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    position: absolute;
    top: 0;
    left: 0
}

:is(.boost-highlight, .top-choices .boost) .boost-head>:is(.boost-tag, .choice-tag) svg {
    display: none
}

:is(.boost-highlight, .top-choices .boost) .boost-head {
    min-height: 14px
}

.top-choices .boost .boost-head {
    margin-top: 6px
}

.boost-highlight .boost-legs li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.boost-highlight .boost-add {
    background: var(--hl-cell);
    min-height: 32px;
    margin-top: auto;
    padding: 3px 10px
}

.boost-tag-match {
    background: linear-gradient(90deg, #e11d48, #f97316)
}

.has-ca-boost {
    position: relative
}

.match-row.has-ca-boost,
.action-row.has-ca-boost {
    padding-top: 24px
}

.match-card.has-ca-boost {
    padding-top: 26px
}

.ca-boost-tag {
    border-radius: 0 0 6px;
    padding: 2px 7px 2px 5px;
    font-size: 11px;
    position: absolute;
    top: 0;
    left: 0
}

.action-row .ca-boost-tag {
    border-top-left-radius: 10px
}

.match-card .ca-boost-tag {
    border-top-left-radius: 8px
}

.boost-tag-odds {
    background: linear-gradient(90deg, #b45309, #d97706)
}

.so-market {
    border: 1px solid #d9770673
}

.so-head {
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    display: flex
}

.so-market-name {
    font-size: 14px;
    font-weight: 400
}

.so-price {
    gap: 6px
}

.so-price s {
    color: var(--muted);
    font-size: 12px;
    font-weight: 450
}

.odd-selected .so-price s {
    color: #ffffffbf
}

.so-rules {
    color: var(--muted);
    margin: -6px 14px 12px;
    font-size: 11px
}

.so-rules-link {
    color: var(--brand);
    margin-left: 6px;
    font-weight: 450
}

.so-rules-link:before {
    content: "· ";
    color: var(--muted)
}

.so-rules-link:hover {
    text-decoration: underline
}

.so-card-market {
    color: var(--muted);
    font-size: 12.5px
}

.so-card-grid {
    gap: 6px;
    margin-top: auto;
    display: grid
}

.so-odd-compact {
    background: var(--hl-cell);
    min-height: 32px;
    padding: 3px 8px
}

.ca-badge {
    flex: none;
    align-items: stretch;
    height: 20px;
    display: inline-flex
}

.ca-badge-icon {
    color: #fff;
    background: #e11d48;
    border-radius: 4px 0 0 4px;
    justify-content: center;
    align-items: center;
    width: 20px;
    display: inline-flex
}

.ca-badge-icon svg {
    width: 11px;
    height: 11px
}

.ca-badge-label {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    background: linear-gradient(88deg, #e11d48 0%, #f97316 100%);
    align-items: center;
    padding: 0 10px 0 5px;
    font-size: 11px;
    font-weight: 450;
    display: inline-flex
}

.highlight-divider {
    background: var(--hl-muted);
    opacity: .4;
    flex: none;
    width: 1px;
    height: 16px
}

.highlight-top .highlight-league {
    min-width: 0;
    margin-left: auto
}

.ca-boost-banner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    display: flex
}

.ca-boost-banner strong {
    font-weight: 550
}

.slip-boost {
    align-self: flex-start;
    margin: 4px 0 0 22px;
    font-size: 12px
}

.slip-price-base {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    font-size: 12px
}

.ticket-boost {
    align-self: flex-start;
    margin: 2px 0;
    padding: 2px 6px 2px 4px;
    font-size: 11px
}

.toggle {
    gap: 6px;
    display: inline-flex
}

.toggle button {
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background: var(--surface);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px;
    align-items: center;
    padding: 6px 10px;
    font-weight: 550;
    transition: background-color .25s, border-color .25s, padding .3s;
    display: inline-flex
}

.toggle button.active {
    background: var(--chosen);
    border-color: var(--brand);
    box-shadow: var(--chosen-shadow);
    padding: 6px 12px
}

.toggle-label {
    grid-template-columns: 0fr;
    transition: grid-template-columns .3s;
    display: grid
}

.toggle-label>span {
    opacity: 0;
    min-width: 0;
    padding-left: 0;
    transition: opacity .2s, padding-left .3s;
    overflow: hidden
}

.toggle button.active .toggle-label {
    grid-template-columns: 1fr
}

.toggle:not(:has(.active)) .toggle-label {
    grid-template-columns: 1fr
}

.toggle button.active .toggle-label>span {
    opacity: 1;
    padding-left: 6px
}

.toggle:not(:has(.active)) .toggle-label>span {
    opacity: 1;
    padding-left: 6px
}

.toggle-clock {
    flex: none;
    transition: color .25s
}

.toggle button.active .toggle-clock {
    color: var(--brand)
}

.toggle .bolt {
    color: inherit;
    flex: none;
    transition: color .25s
}

.toggle button.active .bolt {
    color: var(--live)
}

@media (prefers-reduced-motion:reduce) {

    .toggle button,
    .toggle-label,
    .toggle-label>span {
        transition: none
    }
}

.action-list {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.action-row {
    background: var(--surface);
    border-radius: 10px;
    grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 420px);
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    display: grid
}

.action-row:hover {
    background: var(--hover)
}

.action-when {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    display: flex
}

.action-when strong {
    color: var(--text);
    white-space: nowrap;
    font-size: 13px
}

.action-when.is-live strong {
    color: var(--live);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.action-when .bolt {
    display: none
}

.action-teams {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    display: flex
}

.action-teams .team {
    font-size: 14px
}

.action-league {
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    display: flex;
    overflow: hidden
}

.action-league .flag {
    width: 12px;
    height: 12px
}

.action-sport {
    color: var(--muted);
    flex: none;
    display: inline-flex
}

.odds-table {
    background: var(--surface);
    border-radius: 10px;
    overflow: hidden
}

.odds-table-head,
.odds-table-row {
    grid-template-columns: 56px minmax(0, 1fr) 190px 150px 150px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    display: grid
}

.odds-table-head {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    font-size: 11px
}

.odds-table-head span:first-child {
    grid-column: 1/3
}

.odds-table-head .c-1x2,
.odds-table-head .c-total,
.odds-table-head .c-btts {
    text-align: center
}

.odds-table-row {
    border-top: 1px solid var(--line)
}

.odds-table-row:first-of-type {
    border-top: 0
}

.odds-table-row:hover {
    background: var(--hover)
}

.t-when {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px
}

.t-when strong {
    color: var(--text)
}

.t-teams {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    display: flex
}

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

.t-team>span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.t-cells {
    gap: 4px;
    display: grid
}

.t-cells.c-1x2 {
    grid-template-columns: repeat(3, 1fr)
}

.t-cells.c-1x2.is-2 {
    grid-template-columns: repeat(2, 1fr)
}

.odds-table-2way .odds-table-head,
.odds-table-2way .odds-table-row {
    grid-template-columns: 56px minmax(0, 1fr) 130px 160px 170px
}

.t-cells.c-total,
.t-cells.c-btts {
    grid-template-columns: repeat(2, 1fr)
}

.t-cells .odd {
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 3px 6px
}

.t-cells .odd-label-text {
    color: var(--muted);
    font-size: 11px
}

.t-cells .odd-price {
    font-size: 12px
}

.home-aside {
    flex-direction: column;
    grid-area: aside;
    align-self: start;
    gap: 12px;
    display: flex
}

@media (width<=1280px) {
    .home {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas: "side top" "side main"
    }

    .list-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas: "side main"
    }

    .home-aside {
        display: none
    }
}

@media (width<=960px) {
    .home {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "main"
    }

    .list-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main"
    }

    .home-side {
        display: none
    }

    .highlights-track,
    .top-choices .top-choices-track {
        grid-auto-columns: calc(100% - 28px)
    }

    .highlight {
        min-height: 184px
    }

    .carousel-btn {
        display: none
    }

    .multiples-track {
        grid-auto-columns: calc(100% - 44px)
    }

    .action-row {
        grid-template-columns: 52px minmax(0, 1fr)
    }

    .action-row .row-odds {
        grid-column: 1/-1
    }

    .action-row.is-live {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px
    }

    .action-row.is-live .action-when {
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: -8px
    }

    .action-when .bolt {
        display: inline
    }

    .odds-table-head {
        display: none
    }

    .odds-table-row,
    .odds-table-2way .odds-table-row {
        grid-template-columns: 44px minmax(0, 1fr);
        row-gap: 6px
    }

    .t-cells {
        grid-column: 1/-1
    }

    .t-cells.c-total,
    .t-cells.c-btts {
        display: none
    }
}

@media (width<=1180px) {
    .match-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        margin: 0
    }

    .side-list {
        display: none
    }

    .match-aside {
        padding: 14px 0 0
    }
}

@media (width<=860px) {
    .topbar {
        flex-wrap: wrap;
        gap: 16px;
        height: auto;
        min-height: 56px;
        padding: 0 12px
    }

    .topnav {
        gap: 14px
    }

    .content {
        padding: 12px 12px 40px
    }

    .match-layout {
        grid-template-columns: 1fr
    }

    .score-counts {
        gap: 16px
    }

    .latest-play {
        font-size: 12px
    }

    .dialog-backdrop {
        align-items: flex-end;
        padding: 0
    }

    .dialog {
        border-radius: 14px 14px 0 0;
        width: 100%;
        max-height: 85vh
    }

    .match-row {
        grid-template-columns: 52px minmax(0, 1fr)
    }

    .match-row .row-odds {
        grid-column: 1/-1
    }

    .match-row.is-live {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px
    }

    .match-row.is-live .when {
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: -8px
    }

    .row-more {
        display: none
    }

    .league-head {
        grid-template-columns: minmax(0, 1fr) 20px
    }

    .league-cols {
        display: none
    }

    .search,
    .filters-right {
        width: 100%
    }

    .match-main {
        gap: 8px;
        padding-top: 2px
    }

    .breadcrumb {
        font-size: 12px
    }

    .scoreboard {
        padding: 8px
    }

    .sb-body {
        padding: 12px 10px
    }

    .sb-main {
        gap: 8px
    }

    .sb-team,
    .scoreboard.is-live .sb-home,
    .scoreboard.is-live .sb-away {
        align-items: center
    }

    .sb-team-row,
    .sb-away .sb-team-row,
    .scoreboard.is-live .sb-team-row,
    .scoreboard.is-live .sb-home .sb-team-row,
    .scoreboard.is-live .sb-away .sb-team-row {
        flex-direction: column;
        gap: 6px
    }

    .sb-name {
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 1.2
    }

    .sb-score {
        font-size: 24px
    }

    :is(.market-bar, .market-bar:has(.match-strip.is-shown)) {
        border-radius: 0;
        margin: 0 -12px;
        padding-right: 12px;
        box-shadow: 0 6px 12px -8px #0009
    }

    .match-strip {
        border-radius: 0
    }

    .market-tabs {
        scrollbar-width: none;
        padding: 6px 12px
    }

    .market-tabs::-webkit-scrollbar {
        display: none
    }

    .market-tab {
        padding: 7px 12px
    }

    .ca-switch {
        margin-right: 0
    }

    .market-head {
        padding: 11px 12px
    }

    .market-grid {
        gap: 6px;
        padding: 0 12px 12px
    }

    .show-all {
        width: calc(100% - 24px);
        margin: -4px 12px 12px
    }

    .market-grid.cols-3 .odd {
        gap: 4px;
        padding-inline: 8px
    }

    .page-title {
        font-size: 24px
    }
}

button.odd {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%
}

.odd-pickable:hover:not([aria-disabled=true]) {
    background: var(--surface-3)
}

.odd-pickable[aria-disabled=true],
.row-odds,
.highlight-odds,
.t-cells {
    cursor: default
}

.odd-selected,
.odd-selected:hover:not([aria-disabled=true]) {
    background: var(--brand);
    border-color: var(--brand)
}

.odd-selected .odd-label-text,
.odd-selected .odd-price {
    color: #fff !important
}

.odd-pickable:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px
}

.slip {
    z-index: 40;
    background: var(--surface);
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    box-shadow: 0 -6px 30px var(--shadow);
    border-radius: 14px 14px 0 0;
    flex-direction: column;
    animation: .25s ease-out slip-in;
    display: flex;
    position: fixed;
    bottom: 0;
    right: 16px;
    overflow: hidden
}

@keyframes slip-in {
    0% {
        transform: translateY(100%)
    }
}

.slip-bar {
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    font: inherit;
    text-align: left;
    border: 0;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    display: flex
}

.slip-icon {
    display: inline-flex;
    position: relative
}

.slip-count {
    color: #fff;
    background: #151a24;
    border-radius: 9px;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 650;
    display: grid;
    position: absolute;
    top: -7px;
    right: -8px
}

.slip-bar-odd {
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 750
}

.slip-bar-return {
    font-variant-numeric: tabular-nums;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 650;
    display: inline-flex
}

.slip-bar-at {
    opacity: .7;
    font-size: 13px;
    font-weight: 550
}

.count-up {
    border-radius: 5px;
    margin-inline: -4px;
    padding-inline: 4px;
    display: inline-block
}

.count-up-up {
    animation: 1.6s ease-out count-up-up
}

.count-up-down {
    animation: 1.6s ease-out count-up-down
}

@keyframes count-up-up {

    0%,
    50% {
        background: #4ade8059
    }
}

@keyframes count-up-down {

    0%,
    50% {
        background: #f8717166
    }
}

@media (prefers-reduced-motion:reduce) {

    .count-up-up,
    .count-up-down {
        animation: none
    }
}

.slip-chevron {
    margin-left: auto
}

.slip-body {
    overscroll-behavior: contain;
    flex-direction: column;
    min-height: 0;
    display: flex;
    overflow-y: auto
}

.slip-head {
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
    display: flex
}

.slip-head strong {
    font-size: 15px
}

.slip-badge {
    background: var(--surface-3);
    color: var(--muted);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 650
}

.slip-clear {
    border: 1px solid var(--line);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border-radius: 6px;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 9px;
    font-size: 12px;
    display: inline-flex
}

.slip-clear:hover {
    color: var(--text);
    border-color: var(--surface-3)
}

.slip-tabs {
    background: var(--surface-2);
    border-radius: 9px;
    gap: 4px;
    margin: 4px 14px 8px;
    padding: 3px;
    display: flex
}

.slip-tab {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 7px;
    flex: 1;
    padding: 6px;
    font-weight: 550
}

.slip-tab-active {
    background: var(--text);
    color: var(--surface)
}

.slip-tab:disabled {
    opacity: .45;
    cursor: not-allowed
}

.slip-list {
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0 10px;
    list-style: none;
    display: flex
}

.slip-pick {
    background: var(--surface-2);
    border: 1px solid #0000;
    border-radius: 10px;
    padding: 10px 10px 10px 12px;
    animation: .25s ease-out pick-in
}

@keyframes pick-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
}

.slip-pick-closed {
    border: 1px dashed var(--surface-3);
    background: 0 0
}

.slip-pick-closed .slip-pick-label {
    color: var(--muted);
    text-decoration: line-through;
    -webkit-text-decoration-color: var(--surface-3);
    text-decoration-color: var(--surface-3)
}

.slip-pick-closed .slip-pick-teams {
    color: var(--muted)
}

.slip-pick-suspended {
    border-color: color-mix(in srgb, var(--warn-text) 35%, transparent)
}

.slip-price.slip-price-closed {
    color: var(--muted);
    align-items: center;
    display: inline-flex
}

.slip-price.slip-price-suspended {
    color: var(--warn-text);
    background: color-mix(in srgb, var(--warn-text) 14%, transparent)
}

.slip-closed-why {
    color: var(--muted);
    margin: 6px 0 0 22px;
    font-size: 11px
}

.slip-wait {
    color: var(--muted);
    text-align: center;
    text-wrap: balance;
    margin: 0;
    font-size: 12px;
    line-height: 1.45
}

.slip-pick-conflict {
    border-color: #b7791f
}

.slip-pick-top {
    align-items: center;
    gap: 8px;
    display: flex
}

.slip-sport {
    color: var(--muted);
    display: inline-flex
}

.slip-pick-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow: hidden
}

.slip-price {
    background: var(--surface-3);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--price);
    border-radius: 5px;
    flex: none;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    overflow: hidden
}

.slip-price-num {
    position: relative
}

.slip-price:is(.odd-up, .odd-down) {
    animation: 3.5s ease-in-out forwards price-pulse
}

.slip-remove {
    width: 26px;
    height: 26px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    flex: none;
    place-items: center;
    display: grid
}

.slip-remove:hover {
    background: var(--surface-3);
    color: var(--text)
}

.slip-pick-market {
    color: var(--muted);
    margin: 2px 0 6px 22px;
    font-size: 12px
}

.slip-pick-match {
    color: var(--text);
    align-items: center;
    gap: 8px;
    margin-left: 22px;
    font-size: 12px;
    text-decoration: none;
    display: flex
}

.slip-pick-match:hover .slip-pick-teams {
    text-decoration: underline
}

.slip-pick-teams {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.slip-pick-teams span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.live-now {
    font-variant-numeric: tabular-nums;
    flex: none;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    display: flex
}

.live-now-clock {
    color: var(--live);
    white-space: nowrap;
    align-items: center;
    gap: 4px;
    font-weight: 550;
    display: inline-flex
}

.live-now-clock .bolt {
    color: var(--live)
}

.live-now-score {
    min-width: 10px;
    color: var(--info-text);
    flex-direction: column;
    align-items: center;
    font-weight: 550;
    line-height: 1.35;
    display: flex
}

.live-now-inline {
    color: var(--live);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 550;
    display: inline-flex
}

.slip-note {
    border-radius: 6px;
    margin: 8px 0 0;
    padding: 5px 8px;
    font-size: 12px
}

.slip-note-up {
    color: var(--up-text);
    background: #4ade801f
}

.slip-note-down {
    color: var(--down-text);
    background: #f871711f
}

.slip-note-warn {
    color: var(--warn-text);
    background: #eab3081f
}

.slip-body>.slip-note {
    margin: 0 14px 8px
}

.slip-single {
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    display: flex
}

.stake {
    gap: 6px;
    display: flex
}

.stake-field {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    flex: 1;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 0 8px;
    display: flex
}

.stake-field:focus-within {
    border-color: var(--focus)
}

.stake-currency {
    color: var(--muted);
    font-size: 13px
}

.stake-field input {
    min-width: 0;
    height: 34px;
    color: var(--text);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1;
    font-weight: 550
}

.stake-quick {
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    flex: none;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 650
}

.stake-quick:hover {
    background: var(--surface-4)
}

.slip-foot {
    background: var(--surface);
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    display: flex;
    position: sticky;
    bottom: 0
}

.slip-multi {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.slip-multi-line {
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 500;
    display: flex
}

.slip-multi-odd {
    color: var(--price);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 650
}

.slip-alert {
    color: var(--text);
    background: #eab3081f;
    border: 1px solid #eab30859;
    border-radius: 10px;
    gap: 10px;
    padding: 10px 12px;
    display: flex
}

.slip-alert-icon {
    color: var(--warn-text);
    flex: none;
    margin-top: 1px
}

.slip-alert-body {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
    display: flex
}

.slip-alert-title {
    color: var(--warn-text);
    font-size: 13px;
    font-weight: 600
}

.slip-alert-text {
    color: var(--text);
    margin: 0;
    font-size: 12px;
    line-height: 1.4
}

.slip-prefs {
    border: 1px solid var(--line);
    width: 30px;
    height: 28px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border-radius: 6px;
    place-items: center;
    display: grid
}

.slip-prefs:hover {
    color: var(--text);
    border-color: var(--surface-3)
}

.slip-share {
    margin-left: auto
}

.slip-share+.slip-clear {
    margin-left: 0
}

.prefs-dialog {
    width: min(420px, 100%)
}

.prefs-dialog>:not(.dialog-head) {
    margin-left: 16px;
    margin-right: 16px
}

.prefs-intro {
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45
}

.prefs-card {
    background: var(--surface-2);
    border-radius: 12px;
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.prefs-card-head {
    border-bottom: 1px solid var(--line);
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600
}

.pref-switch {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    display: flex
}

.pref-switch+.pref-switch {
    border-top: 1px solid var(--line)
}

.pref-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.pref-switch-track {
    background: color-mix(in srgb, var(--muted) 45%, var(--surface-3));
    border-radius: 11px;
    flex: none;
    width: 40px;
    height: 22px;
    transition: background .2s;
    position: relative
}

.pref-switch-track:after {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    transition: transform .2s;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px #0000004d
}

.pref-switch input:checked+.pref-switch-track {
    background: var(--brand)
}

.pref-switch input:checked+.pref-switch-track:after {
    transform: translate(18px)
}

.pref-switch input:focus-visible+.pref-switch-track {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.prefs-save {
    margin-top: 14px;
    margin-bottom: calc(16px + env(safe-area-inset-bottom))
}

@media (width<=860px) {
    .prefs-dialog {
        width: 100%
    }
}

.slip-place.prefs-save {
    background: var(--brand);
    color: #fff
}

.slip-place.prefs-save:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand) 85%, #000)
}

.slip-totals {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    display: flex
}

.slip-totals>div {
    color: var(--muted);
    justify-content: space-between;
    font-size: 13px;
    display: flex
}

.slip-totals dd {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 0;
    font-weight: 550
}

.slip-return {
    font-size: 15px !important
}

.slip-return dt {
    color: var(--text);
    font-weight: 550
}

.slip-return dd {
    letter-spacing: -.02em;
    font-size: 16px;
    color: var(--price) !important;
    font-weight: 750 !important
}

.slip-sim {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 11px
}

.slip-scrim {
    display: none
}

@media (width<=700px) {
    .slip {
        border-radius: 14px 14px 0 0;
        width: auto;
        max-width: none;
        max-height: 85vh;
        left: 0;
        right: 0
    }

    .slip:not(.slip-open) {
        bottom: var(--bottom-nav-h)
    }

    .slip:not(.slip-open) .slip-bar {
        padding: 12px 16px
    }

    .app:has(.slip) .content {
        padding-bottom: calc(var(--bottom-nav-h) + 72px)
    }

    .slip-scrim {
        z-index: 39;
        background: var(--scrim);
        -webkit-backdrop-filter: var(--scrim-blur);
        backdrop-filter: var(--scrim-blur);
        opacity: 0;
        visibility: hidden;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .25s ease-out, visibility 0s linear .25s;
        display: block;
        position: fixed;
        inset: 0
    }

    .slip-scrim-on {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease-out
    }
}

.bottom-nav {
    display: none
}

@media (width<=700px) {
    :root {
        --bottom-nav-h: calc(56px + env(safe-area-inset-bottom))
    }

    .topnav,
    .topbar-bets {
        display: none
    }

    .content {
        padding-bottom: calc(var(--bottom-nav-h) + 24px)
    }

    .bottom-nav {
        z-index: 35;
        height: var(--bottom-nav-h);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface);
        border-top: 1px solid var(--line);
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0
    }

    .bottom-nav-item {
        min-width: 0;
        color: var(--muted);
        -webkit-tap-highlight-color: transparent;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        display: flex
    }

    .bottom-nav-icon {
        border: 1px solid #0000;
        border-radius: 16px;
        place-items: center;
        width: 44px;
        height: 26px;
        display: grid;
        position: relative
    }

    .bottom-nav-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 12px
    }

    .bottom-nav-active {
        color: var(--brand)
    }

    .bottom-nav-active .bottom-nav-icon {
        background: color-mix(in srgb, var(--brand) 16%, transparent);
        border-color: color-mix(in srgb, var(--brand) 28%, transparent)
    }

    .bottom-nav-switch {
        background: color-mix(in srgb, var(--surface-2) 95%, #000);
        -webkit-tap-highlight-color: transparent;
        flex: 0 0 52px;
        place-items: center;
        display: grid
    }

    .bottom-nav-switch svg {
        width: 36px;
        height: 36px
    }

    .bottom-nav-switch-end {
        border-radius: 999px 0 0 999px;
        padding-left: 4px
    }

    .bottom-nav-switch-start {
        border-radius: 0 999px 999px 0;
        padding-right: 4px
    }

    .bottom-nav-badge {
        background: var(--brand);
        color: #fff;
        text-align: center;
        border-radius: 8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        position: absolute;
        top: -6px;
        right: 0
    }
}

@media (prefers-reduced-motion:reduce) {

    .slip,
    .slip-pick,
    .slip-price {
        animation: none
    }

    .slip-price:is(.odd-up, .odd-down) {
        color: var(--move)
    }

    .slip-scrim,
    .slip-scrim-on {
        transition: none
    }
}

.slip-bump {
    animation: .45s ease-out slip-bump
}

.slip-bump .slip-count {
    animation: .45s ease-out count-pop
}

@keyframes slip-bump {
    30% {
        filter: brightness(1.15);
        transform: translateY(-6px)
    }

    60% {
        transform: translateY(1px)
    }
}

@keyframes count-pop {
    40% {
        transform: scale(1.5)
    }
}

@media (prefers-reduced-motion:reduce) {

    .slip-bump,
    .slip-bump .slip-count {
        animation: none
    }
}

.ca-switch {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 2px 100%, 8px 54%, 4px 46%);
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0 8px 8px 0;
    flex: none;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    margin: 6px 6px 6px 0;
    padding: 0 8px 0 18px;
    transition: background .2s, color .2s;
    display: inline-flex
}

.ca-switch-on {
    background: var(--brand);
    color: #fff
}

.ca-switch-label {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 10px;
    font-style: italic;
    font-weight: 750;
    line-height: 1
}

.ca-switch input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.ca-switch-track {
    background: color-mix(in srgb, var(--muted) 45%, var(--surface-3));
    border-radius: 10px;
    width: 36px;
    height: 20px;
    transition: background .2s;
    position: relative
}

.ca-switch-track:after {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: transform .2s;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px #0000004d
}

.ca-switch input:checked+.ca-switch-track {
    background: color-mix(in srgb, var(--brand) 50%, #000)
}

.ca-switch input:checked+.ca-switch-track:after {
    transform: translate(16px)
}

.ca-switch input:focus-visible+.ca-switch-track {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.ca-badge {
    background: var(--brand);
    color: #fff;
    letter-spacing: .02em;
    border-radius: 4px 4px 4px 0;
    flex: none;
    margin-left: auto;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 750
}

.market {
    position: relative
}

.market-head .ca-badge {
    border-radius: 0 10px 0 8px;
    align-items: center;
    height: 12px;
    margin: 0;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    position: absolute;
    top: 0;
    right: 0
}

.ca-banner {
    background: var(--surface);
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 14px;
    font-size: 13px;
    display: flex
}

.ca-banner .ca-badge {
    margin-left: 0;
    padding: 2px 7px;
    font-size: 11px
}

.ca-help-btn {
    border: 1.5px solid var(--line);
    width: 22px;
    height: 22px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    margin-left: auto;
    padding: 0;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    display: grid
}

.ca-help-btn:hover {
    color: var(--brand);
    border-color: var(--brand)
}

.ca-help-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.ca-help-body {
    flex-direction: column;
    gap: 14px;
    padding: 4px 16px 16px;
    display: flex;
    overflow-y: auto
}

.ca-help-intro {
    color: var(--muted);
    margin: 0;
    font-size: 14px
}

.ca-help-example {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px 12px
}

.ca-help-example-head {
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 550;
    display: flex
}

.ca-help-example-head .ca-badge {
    margin-left: 0
}

.ca-help-steps {
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.ca-help-steps li {
    color: var(--muted);
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    display: flex
}

.ca-help-steps strong {
    color: var(--text);
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 550;
    display: block
}

.ca-help-num {
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    font-weight: 650;
    display: grid
}

.ca-help-notes {
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 10px;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 10px 12px 10px 28px;
    font-size: 12px;
    display: flex
}

.ca-help-ok {
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 550
}

.ca-help-ok:hover {
    filter: brightness(1.08)
}

.ca-toast {
    z-index: 60;
    background: var(--error-bg);
    width: min(560px, 100vw - 32px);
    color: var(--error-text);
    box-shadow: 0 6px 20px var(--shadow);
    border: 1px solid #b4231840;
    border-radius: 4px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    animation: .2s ease-out pick-in;
    display: flex;
    position: fixed;
    top: 74px;
    left: 50%;
    transform: translate(-50%)
}

.ca-toast span {
    flex: 1
}

.ca-toast button {
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 16px
}

.slip-ca-title {
    color: var(--brand);
    align-items: center;
    gap: 8px;
    display: flex
}

.slip-legs {
    flex-direction: column;
    margin: 6px 0 0;
    padding: 0 0 0 22px;
    list-style: none;
    display: flex
}

.slip-leg {
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    display: flex;
    position: relative
}

.slip-leg:not(:last-child):before {
    content: "";
    background: var(--brand);
    opacity: .5;
    width: 1.5px;
    position: absolute;
    top: 16px;
    bottom: -8px;
    left: 4px
}

.slip-leg-dot {
    border: 2px solid var(--brand);
    background: var(--surface-2);
    border-radius: 50%;
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    position: relative
}

.slip-leg-info {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    display: flex
}

.slip-leg-info span {
    color: var(--info-text);
    font-size: 12px
}

.slip-ca {
    font-variant-numeric: tabular-nums;
    background: #00000038;
    border-radius: 14px;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 750;
    display: inline-flex;
    position: relative
}

.slip-ca-count {
    color: #fff;
    background: #22c55e;
    border-radius: 8px;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    display: grid;
    position: absolute;
    top: -7px;
    right: -7px
}

.slip-ca+.slip-chevron {
    margin-left: 8px
}

@media (prefers-reduced-motion:reduce) {
    .ca-toast {
        animation: none
    }
}

.suggest-card {
    padding: 0;
    overflow: hidden
}

.suggest-head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 650;
    display: flex
}

.suggest-head svg {
    color: var(--brand)
}

.suggest-body {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    display: flex
}

.suggest-label {
    color: var(--muted);
    font-size: 12px
}

.suggest-stake {
    width: 120px
}

.suggest-stake input {
    height: 36px
}

.suggest-ranges {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    display: grid
}

.suggest-range {
    border: 1px solid var(--line);
    background: var(--surface-2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 550
}

.suggest-range:last-child {
    grid-column: 1/-1
}

.suggest-range:hover {
    background: var(--surface-3)
}

.suggest-range.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.suggest-go {
    color: #fff;
    cursor: pointer;
    background: #151a24;
    border: 0;
    border-radius: 8px;
    margin-top: 4px;
    padding: 10px;
    font-weight: 650
}

.suggest-go:hover:not(:disabled) {
    background: #0e1219
}

.suggest-go:disabled {
    opacity: .5;
    cursor: default
}

.suggest-dialog {
    width: min(620px, 100%)
}

.suggest-controls {
    border-bottom: 1px solid var(--line);
    align-items: flex-end;
    gap: 10px;
    padding: 4px 16px 14px;
    display: flex
}

.suggest-control {
    color: var(--muted);
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    display: flex
}

.suggest-control:nth-child(2) {
    flex: 1
}

.suggest-select {
    border: 1px solid var(--line);
    background: var(--surface-2);
    height: 36px;
    color: var(--text);
    font: inherit;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 550
}

.suggest-refresh {
    background: var(--surface-2);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    display: grid
}

.suggest-refresh:hover {
    background: var(--surface-3)
}

.suggest-list {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    display: flex;
    overflow-y: auto
}

.suggest-notice {
    background: #facc1514;
    border: 1px solid #b45309;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    display: flex
}

.suggest-notice-close {
    cursor: pointer;
    color: var(--muted);
    background: 0 0;
    border: 0;
    font-size: 20px;
    line-height: 1
}

.suggest-count {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.suggest-count strong {
    color: var(--text);
    margin-left: 4px
}

.suggest-legs {
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.suggest-leg {
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 8px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    display: grid;
    overflow: hidden
}

.suggest-when {
    border-right: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    display: flex
}

.suggest-when span:first-child {
    color: var(--text);
    font-weight: 550
}

.suggest-info {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
    display: flex
}

.suggest-pick {
    justify-content: space-between;
    gap: 8px;
    display: flex
}

.suggest-price {
    color: var(--price);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-weight: 700
}

.suggest-match {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    overflow: hidden
}

.suggest-match:hover {
    text-decoration: underline
}

.suggest-comp {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.suggest-market {
    color: var(--focus);
    font-size: 12px
}

.suggest-actions {
    border-left: 1px solid var(--line);
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    display: flex
}

.suggest-icon {
    background: var(--surface-3);
    width: 30px;
    height: 30px;
    color: var(--muted);
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    place-items: center;
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
    display: grid
}

.suggest-icon:hover:not(:disabled) {
    color: var(--text);
    background: var(--surface-4)
}

.suggest-icon:disabled {
    opacity: .4;
    cursor: default
}

.suggest-add {
    background: var(--brand);
    color: #fff
}

.suggest-add:hover:not(:disabled) {
    background: var(--brand-hover);
    color: #fff
}

.suggest-add.is-added {
    background: var(--up)
}

.suggest-foot {
    border-top: 1px solid var(--line);
    background: var(--surface);
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    display: flex
}

.suggest-total {
    color: var(--muted);
    flex-direction: column;
    font-size: 12px;
    display: flex
}

.suggest-total strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-size: 15px
}

.suggest-foot .suggest-go {
    background: var(--brand);
    margin: 0 0 0 auto;
    padding: 10px 14px
}

.suggest-foot .suggest-go:hover:not(:disabled) {
    background: var(--brand-hover)
}

.search-dialog {
    width: min(560px, 100%)
}

.search-box {
    border-bottom: 1px solid var(--line);
    padding: 4px 16px 12px
}

.search-input {
    width: 100%
}

.search-results {
    flex-direction: column;
    padding: 8px;
    display: flex;
    overflow-y: auto
}

.search-result {
    border-radius: 8px;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    display: grid
}

.search-result:hover,
.search-result:focus-visible {
    background: var(--surface-2)
}

.search-when {
    color: var(--muted);
    text-align: center;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    display: flex
}

.search-teams {
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    display: flex
}

.search-teams>* {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.search-teams .muted {
    align-items: center;
    gap: 4px;
    font-size: 12px;
    display: flex
}

@media (width<=860px) {
    .topbar-icon {
        width: 36px;
        height: 36px
    }

    .suggest-foot {
        flex-wrap: wrap
    }

    .suggest-foot .suggest-go {
        width: 100%
    }
}

@media (width<=560px) {
    .topbar {
        row-gap: 0;
        padding-top: 4px
    }

    .topnav {
        order: 3;
        gap: 18px;
        width: 100%;
        height: 40px
    }
}

@media (width<=700px) {
    .topbar {
        flex-wrap: nowrap;
        gap: 12px
    }

    .brand {
        flex: 0 auto;
        min-width: 0;
        overflow: hidden
    }

    .brand-logo {
        max-width: 100%
    }

    .brand-mark {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .topbar-actions {
        flex: none
    }
}

.topbar-bets {
    position: relative
}

.topbar-bets-text {
    display: none
}

.topbar-badge {
    min-width: 18px;
    height: 18px;
    color: var(--brand);
    text-align: center;
    background: #fff;
    border-radius: 9px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 750;
    line-height: 18px;
    animation: .35s ease-out count-pop;
    position: absolute;
    top: 3px;
    right: 1px
}

.slip-place {
    color: #0b1a10;
    font: inherit;
    cursor: pointer;
    background: #22c55e;
    border: 0;
    border-radius: 8px;
    padding: 12px;
    font-weight: 750
}

.slip-place:hover:not(:disabled) {
    background: #16a34a
}

.slip-place:disabled {
    background: var(--surface-3);
    color: var(--muted);
    cursor: default
}

.slip-place.slip-accept {
    background: var(--brand);
    color: #fff;
    animation: .25s ease-out accept-in
}

.slip-place.slip-remove-closed {
    background: var(--text);
    color: var(--surface);
    justify-content: center;
    align-items: center;
    gap: 8px;
    animation: .25s ease-out accept-in;
    display: flex
}

.slip-place.slip-remove-closed:hover {
    background: color-mix(in srgb, var(--text) 85%, var(--surface))
}

.slip-place.slip-accept:hover {
    background: var(--brand-hover)
}

@keyframes accept-in {
    0% {
        opacity: .6;
        transform: scale(.97)
    }
}

.slip-place.slip-arming {
    position: relative;
    overflow: hidden
}

.slip-place.slip-arming:after {
    content: "";
    transform-origin: 0;
    background: #22c55e;
    height: 3px;
    animation: 1s linear forwards arming;
    position: absolute;
    inset: auto 0 0
}

@keyframes arming {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.slip-place.slip-arming:disabled {
    background: color-mix(in srgb, #22c55e 30%, var(--surface-3));
    color: var(--text)
}

.accept-steps {
    color: var(--muted);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    list-style: none;
    display: flex
}

.accept-steps li {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.accept-steps .accept-steps-line {
    background: var(--line);
    flex: 1;
    height: 1px
}

.accept-step-dot {
    background: var(--surface-3);
    width: 18px;
    height: 18px;
    color: var(--muted);
    border-radius: 50%;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    transition: background .2s, color .2s;
    display: grid
}

.accept-step-on {
    color: var(--text);
    font-weight: 500
}

.accept-step-on .accept-step-dot {
    background: var(--brand);
    color: #fff
}

.accept-step-done .accept-step-dot {
    color: #0b1a10;
    background: #22c55e
}

@media (prefers-reduced-motion:reduce) {

    .slip-place.slip-accept,
    .slip-place.slip-remove-closed,
    .slip-place.slip-arming:after {
        animation: none
    }
}

.toast {
    z-index: 60;
    background: var(--toast-bg);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px var(--shadow);
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    animation: .25s ease-out toast-in;
    display: flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%)
}

.toast-check {
    color: #0b1a10;
    background: #22c55e;
    border-radius: 50%;
    place-items: center;
    width: 22px;
    height: 22px;
    font-weight: 750;
    display: grid
}

.toast-link {
    color: var(--focus);
    font-weight: 650
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translate(-50%, 12px)
    }
}

.bets-card {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.bets-card-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    font-size: 13px;
    font-weight: 650
}

.bets-tabs {
    background: var(--surface-2);
    border-radius: 999px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
    padding: 3px;
    display: grid
}

.bets-tab {
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 550;
    display: inline-flex
}

.bets-tab.is-active {
    background: var(--text);
    color: var(--bg)
}

.bets-tab-count {
    opacity: .75;
    font-size: 11px
}

.bets-empty {
    text-align: center;
    color: var(--muted);
    margin: 4px 0;
    font-size: 13px
}

.bets-list {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.bets-history {
    background: var(--surface-2);
    color: var(--text);
    text-align: center;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    display: block
}

.bets-history:hover {
    background: var(--surface-3)
}

.ticket {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px var(--shadow);
    --tone: var(--muted);
    --tone-bg: var(--surface-3);
    border-radius: 12px;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

.ticket-pre {
    --tone: var(--info-text);
    --tone-bg: #1d6fd11f
}

.ticket-open {
    --tone: var(--open-text);
    --tone-bg: var(--open-bg)
}

.ticket-won {
    --tone: #22c55e;
    --tone-bg: #22c55e26
}

.ticket-lost {
    --tone: var(--down);
    --tone-bg: #d9363621
}

.ticket-void {
    --tone: #eab308;
    --tone-bg: #eab30826
}

article.ticket-cashout {
    --tone: #22c55e;
    --tone-bg: #22c55e26
}

article.ticket-cashout .ticket-status {
    color: var(--up-text)
}

.ticket-expired,
.ticket-rejected,
.ticket-cancelled {
    --tone: var(--surface-4)
}

.ticket-head {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 10px;
    display: flex
}

.ticket-title {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ticket-title strong {
    font-size: 15px
}

.ticket-sub {
    color: var(--muted);
    font-size: 12px
}

.ticket-status {
    background: var(--tone-bg);
    color: var(--tone);
    border-radius: 999px;
    flex: none;
    align-items: center;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex
}

.ticket-won .ticket-status {
    color: var(--up-text)
}

.ticket-lost .ticket-status {
    color: var(--down-text)
}

.ticket-void .ticket-status {
    color: var(--warn-text)
}

.ticket-expired .ticket-status,
.ticket-rejected .ticket-status,
.ticket-cancelled .ticket-status {
    color: var(--muted)
}

.ticket-code {
    border: 1.5px dashed var(--info-text);
    background: #1d6fd10f;
    border-radius: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    margin: 0 14px 10px;
    padding: 10px 12px;
    display: grid
}

.ticket-code-main {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.ticket-code-label {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--info-text);
    font-size: 10px;
    font-weight: 650
}

.ticket-code-value {
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    font-size: 22px
}

.ticket-code-until {
    color: var(--muted);
    grid-column: 1/-1;
    font-size: 12px
}

.ticket-copy {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 650
}

.ticket-copy:hover {
    border-color: var(--info-text)
}

.ticket-groups {
    flex-direction: column;
    margin: 0;
    padding: 0 14px;
    list-style: none;
    display: flex
}

.ticket-group {
    border-top: 1px solid var(--line);
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    display: grid
}

.ticket-sel {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ticket-sel-top {
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    display: flex
}

.ticket-sel-top strong {
    overflow-wrap: anywhere;
    min-width: 0
}

.ticket-price {
    color: var(--price);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    flex: none;
    font-weight: 750
}

.ticket-market {
    color: var(--muted);
    font-size: 12px
}

.ticket-sel-name {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;
    display: inline-flex
}

.ticket-bet-live {
    background: color-mix(in srgb, var(--live) 14%, transparent);
    color: var(--live);
    border-radius: 4px;
    flex: none;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 550
}

.ticket-match {
    color: var(--muted);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 12px;
    display: flex
}

.ticket-teams {
    min-width: 0;
    color: var(--text);
    align-items: center;
    gap: 5px;
    text-decoration: none;
    display: inline-flex
}

.ticket-teams svg {
    flex: none
}

.ticket-teams span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

a.ticket-teams:hover {
    text-decoration: underline
}

.ticket-when {
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
    flex: none;
    padding: 1px 7px
}

.ticket-mark {
    border: 2px solid var(--surface-4);
    background: var(--surface);
    border-radius: 50%;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: grid
}

.ticket-mark svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 12px;
    height: 12px
}

.ticket-mark.is-won {
    color: #fff;
    background: #22c55e;
    border-color: #22c55e
}

.ticket-mark.is-lost {
    background: var(--down);
    border-color: var(--down);
    color: #fff
}

.ticket-mark.is-void {
    color: #fff;
    background: #eab308;
    border-color: #eab308
}

.ticket-mark.is-half_won {
    color: #fff;
    background: linear-gradient(135deg, #22c55e 50%, #eab308 50%);
    border-color: #22c55e
}

.ticket-mark.is-half_lost {
    background: linear-gradient(135deg, var(--down) 50%, #eab308 50%);
    border-color: var(--down);
    color: #fff
}

.ticket-mark-sm {
    border-width: 1.5px;
    width: 14px;
    height: 14px;
    margin-top: 2px
}

.ticket-mark-sm svg {
    width: 9px;
    height: 9px
}

.ticket-ca-title {
    color: var(--brand);
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.ticket-ca-count {
    background: var(--surface-3);
    color: var(--muted);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 650
}

.ticket-legs {
    flex-direction: column;
    margin: 4px 0 2px;
    padding: 0;
    list-style: none;
    display: flex
}

.ticket-leg {
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    display: flex;
    position: relative
}

.ticket-leg:not(:last-child):before {
    content: "";
    background: var(--brand);
    opacity: .4;
    width: 1.5px;
    position: absolute;
    top: 18px;
    bottom: -3px;
    left: 6.5px
}

.ticket-leg-info {
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    display: flex
}

.ticket-leg-info span {
    color: var(--muted);
    font-size: 12px
}

.ticket-foot {
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 16px;
    padding: 10px 14px 12px;
    display: grid
}

.ticket-figure {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    display: flex
}

.ticket-figure span {
    color: var(--muted);
    font-size: 11px
}

.ticket-figure strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 14px
}

.ticket-figure-main {
    text-align: right
}

.ticket-figure-main strong {
    font-size: 16px
}

.ticket-figure-main.is-won strong {
    color: var(--up-text)
}

.ticket-figure-main.is-lost strong {
    color: var(--muted);
    text-decoration: line-through
}

.ticket-figure-main.is-void strong {
    color: var(--warn-text)
}

.ticket-figure-main.is-nobet strong {
    color: var(--muted);
    font-weight: 550
}

.ticket-figure-main.is-open strong {
    color: var(--price)
}

.ticket-note {
    border-top: 1px solid var(--line);
    color: var(--info-text);
    background: #1d6fd10f;
    margin: 0;
    padding: 8px 14px;
    font-size: 12px
}

.ticket-note-closed {
    color: var(--muted);
    background: var(--surface-2)
}

.ticket-code-copy {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    display: inline-flex
}

.ticket-code-copy-btn {
    width: 22px;
    height: 22px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 5px;
    place-items: center;
    padding: 0;
    display: grid
}

.ticket-code-copy-btn:hover {
    background: var(--surface-3);
    color: var(--text)
}

.ticket-code-copy-btn.is-copied {
    color: var(--up-text)
}

.ticket-code-copy.is-bare {
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    gap: 0
}

.ticket-code-copy.is-bare .ticket-code-copy-btn {
    width: 20px;
    height: 20px
}

.ticket-actions {
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 12px;
    display: flex
}

.ticket-action {
    width: 100%;
    height: 38px;
    font: inherit;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 450
}

.ticket-action-cancel {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--down-text)
}

.ticket-action-cancel:hover {
    border-color: var(--down-text)
}

.ticket-action-co {
    background: var(--brand);
    color: #fff;
    border: 0
}

.ticket-action-co:hover {
    filter: brightness(1.06)
}

.ticket-action-co:disabled {
    opacity: .6;
    cursor: default
}

.ticket-action.is-off {
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    cursor: default
}

.ticket-actions-why {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 12px
}

.ticket-confirm {
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
    font-size: 13px;
    display: flex
}

.ticket-confirm p {
    margin: 0
}

.ticket-confirm-error {
    color: var(--error-text);
    font-size: 12px
}

.ticket-confirm-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid
}

.ticket-confirm-actions button {
    height: 36px;
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 450
}

.ticket-confirm-actions button:disabled {
    opacity: .6;
    cursor: default
}

.ticket-confirm-back {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text)
}

.ticket-confirm-back:hover {
    background: var(--surface-3)
}

.ticket-confirm-yes {
    background: var(--down-text);
    color: #fff;
    border: 0
}

.ticket-co-yes {
    background: var(--brand);
    color: #fff;
    height: 38px;
    font: inherit;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 450
}

.ticket-co-yes:hover {
    filter: brightness(1.06)
}

.ticket-co-yes:disabled {
    opacity: .6;
    cursor: default
}

.ticket-co-timer {
    position: relative;
    overflow: hidden
}

.ticket-co-timer>span {
    position: relative
}

.ticket-co-timer>i {
    background: #ffffffbf;
    height: 3px;
    transition: width .25s linear;
    position: absolute;
    bottom: 0;
    left: 0
}

@media (prefers-reduced-motion:reduce) {
    .ticket-co-timer>i {
        transition: none
    }
}

.ticket-co-chip {
    background: var(--brand-soft);
    width: calc(100% - 28px);
    color: var(--brand);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0 14px 12px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 500;
    display: flex
}

.ticket-co-confirm strong {
    font-variant-numeric: tabular-nums
}

.ticket-co-left {
    color: var(--muted);
    font-size: 12px
}

.ticket-co-confirm strong,
.ticket-confirm strong {
    font-weight: 600
}

.ticket-co-note {
    color: var(--warn-text);
    font-size: 12px
}

.ticket-co-done {
    color: var(--up-text)
}

.ticket-expired .ticket-groups,
.ticket-rejected .ticket-groups,
.ticket-cancelled .ticket-groups {
    opacity: .7
}

.ticket-compact .ticket-head {
    padding: 10px 12px 8px
}

.ticket-compact .ticket-code {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 12px 8px;
    padding: 8px 10px
}

.ticket-compact .ticket-code-value {
    font-size: 18px
}

.ticket-compact .ticket-groups {
    padding: 0 12px
}

.ticket-compact .ticket-foot {
    gap: 12px;
    padding: 8px 12px 10px
}

.ticket-compact .ticket-title strong {
    font-size: 13px
}

.ticket-compact .ticket-sub,
.ticket-compact .ticket-status {
    font-size: 11px
}

.ticket-compact .ticket-status {
    padding: 3px 8px
}

.ticket-compact .ticket-sel-top {
    font-size: 12.5px
}

.ticket-compact .ticket-market,
.ticket-compact .ticket-match {
    font-size: 11px
}

.ticket-compact .ticket-leg-info {
    font-size: 12px
}

.ticket-compact .ticket-group {
    padding: 8px 0
}

.ticket-compact .ticket-figure span {
    font-size: 10px
}

.ticket-compact .ticket-figure strong {
    font-size: 12.5px
}

.ticket-compact .ticket-figure-main strong {
    font-size: 14px
}

.ticket-compact .ticket-note {
    font-size: 11px
}

.preslip-dialog {
    width: min(440px, 100%)
}

.preslip-dialog>:not(.dialog-head) {
    margin-left: 16px;
    margin-right: 16px
}

.preslip-note {
    color: var(--muted);
    margin: 0 0 12px;
    font-size: 13px
}

.preslip-codes {
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: flex
}

.preslip-code {
    background: var(--surface-2);
    border: 1px dashed var(--brand);
    border-radius: 10px;
    padding: 12px 14px
}

.preslip-code-top {
    align-items: center;
    gap: 10px;
    display: flex
}

.preslip-code-value {
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    font-size: 26px
}

.preslip-code-top .slip-clear {
    margin-left: auto
}

.preslip-code-info {
    color: var(--muted);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    display: flex
}

.preslip-go {
    text-align: center;
    margin-bottom: 16px;
    text-decoration: none;
    display: block
}

@media (width<=860px) {
    .preslip-go {
        margin-bottom: calc(16px + env(safe-area-inset-bottom))
    }
}

.bets-page {
    max-width: 1100px
}

.bets-note {
    margin: -4px 0 12px;
    font-size: 13px
}

.bets-page-bar {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    display: flex
}

.bets-page-bar .bets-tabs {
    width: min(320px, 100%)
}

.bets-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
    gap: 12px;
    display: grid
}

@media (width<=860px) {
    .bets-page-bar .bets-tabs {
        width: 100%
    }
}

@media (width<=700px) {
    .bets-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .toast {
        bottom: calc(var(--bottom-nav-h) + 72px);
        width: calc(100% - 32px)
    }
}

.home-quick,
.leagues,
.home-bottom,
.t-cells.c-1x2 .odd-label {
    display: none
}

@media (width<=1280px) {
    .home-bottom {
        flex-direction: column;
        gap: 12px;
        max-width: 420px;
        display: flex
    }
}

@media (width<=960px) {
    .home-top {
        flex-direction: column;
        gap: 12px;
        display: flex
    }

    .home-quick {
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        gap: 6px;
        margin: 0 -12px;
        padding: 0 12px;
        display: flex;
        overflow-x: auto
    }

    .home-quick::-webkit-scrollbar {
        display: none
    }

    .leagues {
        display: block
    }

    .leagues-title {
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 700
    }

    .leagues-scroller {
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 0 -12px;
        padding: 0 12px 4px;
        display: flex;
        overflow-x: auto
    }

    .leagues-scroller::-webkit-scrollbar {
        display: none
    }

    .leagues-row {
        gap: 8px;
        display: flex
    }

    .leagues-row:after {
        content: "";
        flex: none;
        width: 4px
    }

    .pop-league {
        border: 1px solid var(--line);
        background: var(--surface);
        white-space: nowrap;
        border-radius: 8px;
        align-items: center;
        gap: 8px;
        padding: 6px 12px 6px 6px;
        display: inline-flex;
        position: relative
    }

    .pop-league:active {
        background: var(--surface-3)
    }

    .pop-league-logo {
        border: 1px solid var(--line);
        background: var(--surface-2);
        width: 32px;
        height: 32px;
        color: var(--muted);
        border-radius: 6px;
        flex: none;
        place-items: center;
        display: grid;
        position: relative
    }

    .pop-league-logo img {
        object-fit: cover;
        border-radius: 50%;
        width: 20px;
        height: 20px
    }

    .pop-league-sport {
        background: var(--surface-2);
        width: 14px;
        height: 14px;
        color: var(--text);
        border-radius: 50%;
        place-items: center;
        display: grid;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 45%)
    }

    .pop-league-name {
        font-size: 12px;
        font-weight: 700
    }

    .pop-league-count {
        display: none
    }

    .pop-league-live {
        background: var(--live);
        border-radius: 50%;
        width: 6px;
        height: 6px
    }

    .quick-link {
        background: var(--surface);
        white-space: nowrap;
        border-radius: 999px;
        flex: none;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 500;
        display: inline-flex
    }

    .quick-link:active {
        background: var(--surface-3)
    }

    .quick-count {
        color: var(--muted);
        font-size: 11px;
        font-weight: 400
    }

    .home-main {
        gap: 18px
    }

    .home-title {
        font-size: 22px
    }

    .toggle button {
        padding: 5px 8px;
        font-size: 12px;
        font-weight: 500
    }

    .toggle button.active {
        padding: 5px 10px
    }

    .home-bottom {
        max-width: none
    }

    .odds-table-row,
    .odds-table-2way .odds-table-row {
        row-gap: 6px;
        padding: 8px 12px
    }

    .t-cells.c-1x2 .odd-label {
        display: flex
    }

    .t-cells.c-1x2 .odd {
        justify-content: space-between;
        min-height: 34px;
        padding: 4px 10px
    }

    .t-cells.c-1x2 .odd-label-text {
        color: var(--muted);
        font-size: 12px
    }

    .t-cells.c-1x2 .odd-price {
        font-size: 13px
    }
}

@media (width<=860px) {
    .page-head {
        align-items: center
    }

    .page-head .page-title {
        white-space: nowrap;
        font-size: 22px
    }

    .updated-time {
        display: none
    }

    .filters {
        gap: 8px;
        margin-bottom: 10px
    }

    .filters>.chips {
        order: 2;
        width: calc(100% + 24px);
        margin: 0 -12px
    }

    .sport-bar {
        gap: 4px;
        margin: 0 -12px 12px
    }

    .sport-bar.sport-bar-small {
        margin-bottom: 0
    }

    .sport-bar .sport-tab {
        text-align: center;
        border-radius: 12px;
        flex-direction: column;
        flex: none;
        justify-content: center;
        gap: 3px;
        min-width: 64px;
        padding: 7px 8px;
        font-size: 12px;
        line-height: 1.2
    }

    .sport-bar .sport-tab svg,
    .sport-bar.sport-bar-small .sport-tab svg {
        width: 26px;
        height: 26px;
        margin: 0
    }

    .sport-bar .sport-count {
        display: none
    }
}

.to-top {
    z-index: 30;
    cursor: pointer;
    background: var(--surface);
    width: 44px;
    height: 44px;
    color: var(--text);
    box-shadow: 0 4px 14px var(--shadow), 0 0 0 1px var(--line);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    border: 0;
    border-radius: 50%;
    place-items: center;
    transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s, bottom .25s;
    display: grid;
    position: fixed;
    bottom: 24px;
    right: 20px;
    transform: translateY(12px)scale(.85)
}

.to-top-shown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
    transform: none
}

.to-top:hover {
    background: var(--surface-2)
}

.to-top:active {
    transform: scale(.92)
}

.to-top:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.app:has(.slip) .to-top {
    right: 392px
}

@media (width<=700px) {
    .to-top {
        right: 16px;
        bottom: calc(var(--bottom-nav-h) + 16px)
    }

    .app:has(.slip) .to-top {
        right: 16px;
        bottom: calc(var(--bottom-nav-h) + 64px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .to-top {
        transition: none
    }
}

.ticket-head-toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.ticket-head-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px
}

.ticket-chevron {
    color: var(--muted);
    flex: none;
    align-self: center;
    transition: transform .2s;
    transform: rotate(180deg)
}

.ticket-collapsed .ticket-chevron {
    transform: none
}

.ticket-collapsed .ticket-head {
    padding-bottom: 8px
}

.ticket-code-inline {
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    display: flex
}

.ticket-code-inline .ticket-code-value {
    font-size: 16px
}

.ticket-summary {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0 14px 10px;
    list-style: none;
    display: flex
}

.ticket-summary li {
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    display: flex
}

.ticket-summary .ticket-mark-sm {
    margin-top: 0
}

.ticket-summary strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: none;
    max-width: 55%;
    overflow: hidden
}

.ticket-summary li>span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden
}

.ticket-summary-more {
    color: var(--muted);
    padding-left: 21px;
    font-size: 12px !important
}

.ticket:not(.ticket-collapsed) .ticket-head-toggle+* {
    animation: .2s ticket-open
}

@keyframes ticket-open {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .ticket-chevron {
        transition: none
    }

    .ticket:not(.ticket-collapsed) .ticket-head-toggle+* {
        animation: none
    }
}

@media (width<=700px) {
    .topbar {
        box-shadow: none
    }

    .content-home {
        background: linear-gradient(to bottom, var(--home-glow), color-mix(in srgb, var(--home-glow) 97%, transparent) 40px, color-mix(in srgb, var(--home-glow) 90%, transparent) 80px, color-mix(in srgb, var(--home-glow) 78%, transparent) 120px, color-mix(in srgb, var(--home-glow) 65%, transparent) 160px, color-mix(in srgb, var(--home-glow) 50%, transparent) 200px, color-mix(in srgb, var(--home-glow) 35%, transparent) 240px, color-mix(in srgb, var(--home-glow) 22%, transparent) 280px, color-mix(in srgb, var(--home-glow) 10%, transparent) 320px, color-mix(in srgb, var(--home-glow) 3%, transparent) 360px, transparent 400px) no-repeat
    }
}

:root {
    --sk: var(--surface-4);
    --sk-hi: var(--surface-3)
}

:root[data-theme=dark] {
    --sk: var(--surface);
    --sk-hi: var(--surface-2)
}

.aside-card,
.league-body,
.scoreboard,
.market,
.market-bar,
.match-card,
.ticket,
.highlight {
    --sk: var(--surface-3);
    --sk-hi: var(--surface-2)
}

:root[data-theme=dark] :is(.aside-card, .league-body, .scoreboard, .market, .market-bar, .match-card, .ticket, .highlight) {
    --sk: var(--surface-2);
    --sk-hi: var(--surface-3)
}

:root[data-theme=dark] .highlight {
    --sk: #ffffff1f;
    --sk-hi: #ffffff38
}

.sk {
    background: linear-gradient(90deg, var(--sk) 30%, var(--sk-hi) 50%, var(--sk) 70%) 0 0 / 300% 100%;
    border-radius: 6px;
    flex: none;
    max-width: 100%;
    animation: 1.4s ease-in-out infinite sk-shimmer;
    display: block
}

@keyframes sk-shimmer {
    0% {
        background-position: 100% 0
    }

    to {
        background-position: 0 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .sk {
        animation: none
    }
}

.sk-row,
.sk-row:hover {
    background: 0 0
}

.sk-stack {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.sk-gap {
    gap: 12px
}

.sk-lines {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.sk-line {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.sk-line .sk-stack {
    flex: 1
}

.sk-side-title {
    margin: 16px 8px 8px
}

.sk-side-head {
    margin: 16px 14px 12px
}

.sk-highlight {
    justify-content: space-between
}

.sk-ticket {
    gap: 12px;
    padding: 14px
}

.sk-ticket-head,
.sk-ticket-foot {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.sk-ticket-body {
    flex-direction: column;
    gap: 12px;
    display: flex
}

@media (width<=860px) {
    .match-aside.sk-aside {
        display: none
    }
}

.bets-dialog {
    width: min(600px, 100%);
    max-height: min(88vh, 900px)
}

.bets-dialog-body {
    overscroll-behavior: contain;
    padding: 4px 16px 16px;
    overflow-y: auto
}

.rules-dialog {
    width: min(680px, 100%);
    max-height: min(88vh, 900px)
}

.rules-body {
    overscroll-behavior: contain;
    padding: 0 16px 20px;
    scroll-padding-top: 52px;
    overflow-y: auto
}

.rules-index {
    z-index: 1;
    scrollbar-width: none;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    gap: 6px;
    margin: 0 -16px;
    padding: 4px 16px 10px;
    display: flex;
    position: sticky;
    top: 0;
    overflow-x: auto
}

.rules-index::-webkit-scrollbar {
    display: none
}

.rules-index .mini-chip {
    white-space: nowrap;
    flex: none
}

.rules-index .mini-chip:hover {
    border-color: var(--text)
}

.rules-section {
    padding-top: 16px
}

.rules-section h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 550
}

.rules-section p,
.rules-section ul {
    color: var(--muted);
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5
}

.rules-section ul {
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    display: flex
}

.rules-section strong {
    color: var(--text);
    font-weight: 550
}

.rules-updated {
    color: var(--muted);
    margin: 16px 0 0;
    font-size: 12px
}

.rules-loading {
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    display: flex
}

.rules-retry {
    border: 1px solid var(--line);
    cursor: pointer;
    background: 0 0;
    border-radius: 8px;
    padding: 6px 14px
}

.rules-link {
    color: var(--brand);
    align-self: center;
    font-size: 13px;
    font-weight: 450
}

.rules-link:hover {
    text-decoration: underline
}

.site-footer {
    color: var(--muted);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 12px;
    display: flex
}

.site-footer-link {
    color: var(--text);
    font-weight: 450
}

.site-footer-link:hover {
    color: var(--brand)
}

.site-footer-button {
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 450
}

.site-footer-age {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 550
}

.side-footer {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding: 12px 10px 4px
}

.home-footer {
    justify-content: center;
    padding: 20px 0 8px;
    display: none
}

@media (width<=960px) {
    .home-footer {
        display: flex
    }
}

.bets-dialog .bets-note {
    margin: 0 0 12px
}

.bets-dialog .bets-grid {
    grid-template-columns: minmax(0, 1fr)
}

.bets-more {
    cursor: pointer;
    width: 100%;
    font: inherit;
    border: 0;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 650
}

.bets-more:disabled {
    opacity: .6;
    cursor: default
}

.track-page {
    max-width: 560px
}

.track-intro {
    margin: -4px 0 14px;
    font-size: 14px
}

.track-form {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.track-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 550
}

.track-row {
    gap: 8px;
    display: flex
}

.track-input {
    border: 1px solid var(--line);
    background: var(--surface);
    min-width: 0;
    height: 46px;
    color: var(--text);
    font: inherit;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 10px;
    flex: 1;
    padding: 0 14px;
    font-size: 18px;
    font-weight: 550
}

.track-input::placeholder {
    color: var(--muted);
    opacity: .6;
    font-weight: 450
}

.track-input:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px
}

.track-input[aria-invalid=true] {
    border-color: var(--down-text)
}

.track-button,
.track-retry {
    background: var(--brand);
    color: #fff;
    height: 46px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    padding: 0 18px;
    font-weight: 550
}

.track-button:hover,
.track-retry:hover {
    background: var(--brand-hover)
}

.track-retry {
    height: 38px;
    margin-top: 8px
}

.track-error {
    color: var(--error-text);
    margin: 0;
    font-size: 13px
}

.track-result {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.track-note {
    background: var(--surface-3);
    color: var(--text);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 14px
}

.track-note-won {
    background: color-mix(in srgb, var(--up-text) 14%, transparent);
    color: var(--up-text);
    font-weight: 550
}

.track-note-lost,
.track-note-rejected {
    background: color-mix(in srgb, var(--down-text) 10%, transparent)
}

.track-note-pre {
    background: #1d6fd11f
}

.track-updated {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 12px
}

.support-about-line {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 13px
}

.track-other {
    border-top: 1px solid var(--line);
    margin-top: 18px;
    padding-top: 14px
}

.track-other summary {
    cursor: pointer;
    color: var(--muted);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 550
}

.bets-track-link {
    color: var(--brand);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none
}

.bets-track-link:hover {
    text-decoration: underline
}

.ticket-share {
    width: 28px;
    height: 28px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    flex: none;
    place-items: center;
    margin-left: auto;
    padding: 0;
    display: grid
}

.ticket-share:hover {
    background: var(--surface-3);
    color: var(--text)
}

.ticket-share+.ticket-status {
    margin-left: 0
}

.share-link {
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 6px 6px 12px;
    display: flex
}

.share-link-url,
.share-link-error {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 550;
    overflow: hidden
}

.share-link[aria-busy=true] .share-link-url {
    color: var(--muted);
    font-weight: 450
}

.share-link-error {
    color: var(--error-text);
    white-space: normal;
    font-size: 13px;
    font-weight: 450
}

.share-link-copy {
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    flex: none;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600
}

.share-link-copy:disabled {
    opacity: .5;
    cursor: default
}

.share-dialog .prefs-save {
    width: calc(100% - 32px)
}

.share-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.share-head {
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    display: flex
}

.share-head strong {
    font-size: 16px
}

.share-total {
    background: var(--surface-3);
    border-radius: 999px;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 15px;
    font-weight: 700
}

.share-source {
    gap: 20px;
    margin: 0;
    padding: 0 16px 12px;
    display: flex
}

.share-source div {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.share-source dt {
    color: var(--muted);
    font-size: 12px
}

.share-source dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600
}

.share-source .is-won dd {
    color: var(--up-text)
}

.share-card>.track-note {
    margin: 0 16px 12px
}

.share-list {
    border-top: 1px solid var(--line);
    margin: 0;
    padding: 0;
    list-style: none
}

.share-row {
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    display: flex
}

.share-row.is-off {
    opacity: .55
}

.share-match {
    color: var(--muted);
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    display: flex
}

.share-teams {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.share-when {
    flex: none
}

.share-pick {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.share-label {
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex
}

.share-odd {
    flex: none;
    font-size: 15px
}

.share-row.is-off .share-odd {
    color: var(--muted);
    font-size: 13px;
    font-weight: 550
}

.share-market {
    color: var(--muted);
    font-size: 13px
}

.share-tag {
    background: var(--brand);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 650
}

.share-legs {
    border-left: 2px solid var(--line);
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 0;
    padding: 0 0 0 10px;
    font-size: 13px;
    list-style: none;
    display: flex
}

.share-legs strong {
    font-weight: 550
}

.share-legs span {
    color: var(--muted)
}

.share-foot {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    display: flex
}

.share-note {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.share-copy {
    text-align: center;
    width: 100%;
    text-decoration: none
}

.share-empty {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.share-empty p {
    margin: 0
}

.share-home {
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.share-ask-actions {
    margin-bottom: calc(16px + env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 8px;
    display: flex
}

.share-ask-join {
    border: 1px solid var(--line);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border-radius: 8px;
    padding: 12px;
    font-weight: 650
}

.share-ask-join:hover {
    background: var(--surface-2)
}

.social-page {
    max-width: 1100px
}

.social-avatar {
    background: var(--brand-soft);
    color: var(--brand);
    letter-spacing: .02em;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex
}

.social-bar {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    display: flex
}

.social-tabs {
    background: var(--surface-2);
    border-radius: 999px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 4px;
    width: min(480px, 100%);
    padding: 3px;
    display: grid
}

.social-tab {
    color: var(--muted);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 550;
    display: inline-flex
}

.social-tab:hover {
    color: var(--text)
}

.social-tab.is-active {
    background: var(--text);
    color: var(--bg)
}

.social-me-chip,
.social-pill {
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    display: inline-flex
}

.social-me-chip {
    padding: 3px 12px 3px 3px
}

.social-me-chip:hover,
.social-pill:hover {
    background: var(--surface-2)
}

.social-primary,
.social-ghost {
    height: 38px;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 10px;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    display: inline-flex
}

.social-primary {
    background: var(--brand);
    color: #fff;
    border: 0
}

.social-primary:hover {
    background: var(--brand-hover)
}

.social-ghost {
    background: var(--surface-2);
    color: var(--text);
    border: 0
}

.social-ghost:hover {
    background: var(--surface-3)
}

.social-primary:disabled,
.social-ghost:disabled {
    opacity: .6;
    cursor: default
}

.social-empty {
    text-align: center;
    margin: 32px 0
}

.social-back {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 14px;
    text-decoration: none
}

.social-back:hover {
    color: var(--text)
}

.social-sections {
    flex-direction: column;
    gap: 28px;
    display: flex
}

.social-section-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    display: flex
}

.social-section-page {
    margin-bottom: 6px
}

.social-section-title {
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: italic 700 24px/1.1 Barlow Condensed, sans-serif;
    display: inline-flex
}

.social-section-title svg {
    color: var(--brand)
}

.social-list-title {
    margin-bottom: 14px
}

.social-see-all {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600
}

.social-see-all:hover {
    text-decoration: underline
}

.social-rail-wrap {
    position: relative
}

.social-rail {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    grid-auto-columns: calc(33.3333% - 8px);
    grid-auto-flow: column;
    align-items: stretch;
    gap: 12px;
    display: grid;
    overflow-x: auto
}

.social-rail::-webkit-scrollbar {
    display: none
}

.social-rail>* {
    scroll-snap-align: start
}

.social-rail-nav {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.social-rail-arrow {
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background: var(--surface);
    width: 32px;
    height: 32px;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.social-rail-arrow:disabled {
    opacity: .4;
    cursor: default
}

.social-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    display: grid
}

.social-more {
    background: var(--surface);
    color: var(--text);
    font: inherit;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    grid-column: 1/-1;
    justify-self: center;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 650
}

.social-more:hover {
    background: var(--surface-2)
}

.social-card {
    background: var(--surface);
    border-radius: 10px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    display: flex
}

.social-card-user {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.social-author {
    min-width: 0;
    color: inherit;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    display: flex
}

.social-author-text {
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
    display: flex
}

.social-author-text strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden
}

.social-author-text span {
    color: var(--muted);
    white-space: nowrap;
    font-size: 11px
}

.social-follow-text {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600
}

@media (hover:hover) {
    .social-follow-text:hover {
        text-decoration: underline
    }
}

.social-follow-text.is-on {
    color: var(--muted)
}

.social-card-head {
    background: var(--surface-2);
    border-radius: 8px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    display: flex
}

.social-count {
    background: var(--brand);
    color: #fff;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    display: inline-flex
}

.social-card-when {
    font-size: 13px;
    font-weight: 600
}

.social-card-when.is-won {
    color: var(--up-text)
}

.social-card-when.is-lost {
    color: var(--down-text)
}

.social-card-when.is-void,
.social-card-when.is-live {
    color: var(--muted)
}

.social-card-odd {
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font: italic 700 19px/1 Barlow Condensed, sans-serif;
    display: inline-flex
}

.social-card-odd svg {
    color: var(--muted)
}

.social-picks {
    height: var(--social-picks-h, 90px);
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 12px;
    list-style: none;
    display: flex;
    position: relative;
    overflow: hidden
}

.social-picks.is-cut {
    -webkit-mask-image: linear-gradient(#000 70%, #0000);
    mask-image: linear-gradient(#000 70%, #0000)
}

.social-pick {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.social-pick-match {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex
}

.social-pick-match>span:first-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.social-pick-line {
    min-width: 0;
    color: var(--muted);
    align-items: center;
    gap: 4px;
    font-size: 12px;
    display: flex
}

.social-pick-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.social-pick-odd {
    color: var(--text);
    flex: none;
    font-weight: 600
}

.social-pick-live {
    color: var(--live, #057b42);
    flex: none;
    font-size: 11px;
    font-weight: 700
}

.social-builder {
    text-transform: uppercase;
    color: var(--text);
    font: italic 700 12px/1 Barlow Condensed, sans-serif
}

.social-legs {
    --social-timeline: var(--brand);
    color: var(--muted);
    flex-direction: column;
    margin: 2px 0 0;
    padding: 0;
    font-size: 12px;
    list-style: none;
    display: flex
}

.social-legs li {
    padding: 2px 0 2px 18px;
    position: relative
}

.social-legs li:before {
    content: "";
    box-sizing: border-box;
    border: 2px solid var(--social-timeline);
    background: var(--surface);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 5px;
    left: 0
}

.social-legs li:not(:last-child):after {
    content: "";
    background: var(--social-timeline);
    opacity: .5;
    width: 1.5px;
    position: absolute;
    top: 15px;
    bottom: -5px;
    left: 4.25px
}

.social-mark {
    background: var(--surface-3);
    width: 18px;
    height: 18px;
    color: var(--muted);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex
}

.social-mark.is-won {
    background: var(--up-text);
    color: #fff
}

.social-mark.is-lost {
    background: var(--down-text);
    color: #fff
}

.social-card-more {
    justify-content: center;
    display: flex;
    position: relative
}

.social-card-more:before {
    content: "";
    border-top: 1px dashed var(--line);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0
}

.social-card-more button {
    z-index: 1;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    position: relative
}

.social-card-more button:hover {
    color: var(--text)
}

.social-card-more.is-empty {
    visibility: hidden
}

.social-card-body {
    cursor: pointer;
    border-radius: 8px;
    flex-direction: column;
    gap: 10px;
    display: flex
}

.social-card-body:focus-visible {
    outline: 2px solid var(--focus, var(--brand));
    outline-offset: 2px
}

.social-post-dialog {
    width: min(460px, 100%)
}

.social-post-scroll {
    flex-direction: column;
    flex: 1;
    gap: 10px;
    min-height: 0;
    padding: 4px 16px 12px;
    display: flex;
    overflow-y: auto
}

.social-picks.is-all {
    height: auto;
    padding-bottom: 4px;
    overflow: visible
}

.social-post-dialog>.social-card-foot {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    margin-top: 0
}

.social-card-foot {
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    display: flex
}

.social-copy {
    background: var(--brand);
    color: #fff;
    width: 100%;
    height: 36px;
    font: inherit;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 650
}

.social-copy:hover:not(:disabled, .is-off) {
    background: var(--brand-hover)
}

.social-copy:disabled {
    opacity: .6;
    cursor: default
}

.social-card .social-copy.is-off {
    background: var(--surface-2);
    color: var(--muted);
    cursor: default;
    justify-content: center;
    align-items: center;
    display: flex
}

.social-card .social-copy.is-off.is-won {
    color: var(--up-text)
}

.social-card .social-copy.is-off.is-lost {
    color: var(--down-text)
}

.social-card-line {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.social-copies {
    color: var(--muted);
    font-size: 12px
}

.social-link {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 12px;
    text-decoration: underline
}

.social-home-title {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.social-home-title svg {
    color: var(--brand)
}

.social-home .social-rail-nav {
    margin-top: 8px
}

.social-rank-note {
    color: var(--muted);
    margin: -4px 0 10px;
    font-size: 12px
}

.social-rank,
.social-rank-empty {
    background: var(--surface);
    border-radius: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.social-rank-empty {
    padding: 18px 16px;
    font-size: 14px
}

.social-rank li+li {
    border-top: 1px solid var(--line)
}

.social-rank-row {
    color: inherit;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    display: flex
}

.social-rank-row:hover {
    background: var(--hover)
}

.social-rank-pos {
    text-align: center;
    width: 24px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 14px;
    font-weight: 700
}

.social-rank-row.is-top .social-rank-pos {
    color: #fff;
    border-radius: 50%;
    place-items: center;
    height: 24px;
    font-size: 12px;
    display: grid
}

.social-rank-row.is-top-1 .social-rank-pos {
    background: #d4a20c
}

.social-rank-row.is-top-2 .social-rank-pos {
    background: #8c97a3
}

.social-rank-row.is-top-3 .social-rank-pos {
    background: #b0703a
}

.social-rank-who {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
    display: flex
}

.social-rank-who strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden
}

.social-rank-who span {
    color: var(--muted);
    font-size: 12px
}

.social-rank-value {
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 15px;
    font-weight: 700
}

.social-rank-value.is-up,
.social-stats-grid dd.is-up {
    color: var(--up-text)
}

.social-rank-value.is-down,
.social-stats-grid dd.is-down {
    color: var(--down-text)
}

.social-stats {
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    display: flex
}

.social-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    display: grid
}

.social-stats-grid div {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.social-stats-grid dd {
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    order: -1;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2
}

.social-stats-grid dt {
    color: var(--muted);
    font-size: 13px
}

.social-stats-last {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    display: flex
}

.social-stats-dots {
    gap: 4px;
    display: inline-flex
}

.social-dot {
    background: var(--surface-3);
    width: 18px;
    height: 18px;
    color: var(--muted);
    border-radius: 50%;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    display: grid
}

.social-dot.is-won {
    background: color-mix(in srgb, var(--up-text) 18%, transparent);
    color: var(--up-text)
}

.social-dot.is-lost {
    background: color-mix(in srgb, var(--down-text) 18%, transparent);
    color: var(--down-text)
}

.social-stats-total {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    font-size: 12px
}

.social-stats-empty {
    border-top: 1px solid var(--line);
    color: var(--muted);
    margin: 0;
    padding-top: 14px;
    font-size: 13px
}

@media (width<=560px) {
    .social-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px
    }

    .social-stats-grid dd {
        font-size: 20px
    }

    .social-stats-total {
        flex-basis: 100%;
        margin-left: 0
    }
}

.social-avatar-img {
    object-fit: cover;
    background: var(--surface-3);
    display: block
}

.social-report-line {
    justify-content: flex-end;
    margin: -8px 0 12px;
    display: flex
}

.social-report-reasons {
    flex-direction: column;
    gap: 6px;
    margin: 12px 16px 0;
    display: flex
}

.social-report-reason {
    background: var(--surface-2);
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    font-size: 14px;
    display: flex
}

.social-report-reason input {
    accent-color: var(--brand);
    margin: 0
}

.social-report-reason.is-on {
    border-color: var(--brand)
}

.social-report-error {
    margin: 10px 16px 0
}

.social-photo-row {
    align-items: center;
    gap: 14px;
    display: flex
}

.social-photo-actions {
    align-items: center;
    gap: 12px;
    display: flex
}

.social-notice-art {
    background: var(--surface-2);
    border-radius: 12px;
    justify-content: center;
    margin: 4px 16px 10px;
    padding: 12px 0 4px;
    display: flex
}

.social-notice-art svg {
    max-width: 100%;
    height: auto
}

.social-notice-list {
    flex-direction: column;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
    display: flex
}

.social-notice-list li {
    padding-left: 26px;
    position: relative
}

.social-notice-list li:before {
    content: "✓";
    background: var(--brand-soft);
    width: 18px;
    height: 18px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    position: absolute;
    top: 0;
    left: 0
}

.social-notice-actions {
    margin: 18px 16px calc(16px + env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 6px;
    display: flex
}

.social-notice-later {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 8px;
    font-size: 14px;
    font-weight: 550
}

.social-notice-later:hover {
    color: var(--text)
}

.site-footer-telegram {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.site-footer-telegram svg {
    color: #2aabee;
    width: 14px;
    height: 14px
}

.social-profile {
    background: var(--surface);
    border-radius: 10px;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    display: flex
}

.social-profile-top {
    align-items: flex-start;
    gap: 14px;
    display: flex
}

.social-profile-text {
    flex: 1;
    min-width: 0
}

.social-profile h2 {
    overflow-wrap: anywhere;
    margin: 2px 0 4px;
    font-size: 19px;
    font-weight: 600
}

.social-bio {
    color: var(--muted);
    margin: 0 0 8px;
    font-size: 14px
}

.social-counts {
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    display: flex
}

.social-counts div {
    align-items: baseline;
    gap: 4px;
    display: flex
}

.social-counts dd {
    margin: 0;
    font-weight: 600
}

.social-counts dt {
    color: var(--muted);
    font-size: 13px
}

.social-bio-input {
    resize: vertical;
    min-height: 72px;
    font-family: inherit
}

.social-publish {
    flex-flow: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    display: flex
}

.social-publish-text {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.social-publish-text strong {
    font-weight: 600
}

.social-publish-text span {
    color: var(--muted);
    font-size: 13px
}

.social-publish-error {
    flex-basis: 100%
}

@media (width<=1100px) {
    .social-rail {
        grid-auto-columns: calc(50% - 6px)
    }

    .social-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width<=720px) {
    .social-bar .social-tabs {
        width: 100%
    }

    .social-rail {
        grid-auto-columns: 86%
    }

    .social-rail-nav {
        display: none
    }

    .social-list {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (width<=560px) {
    .social-profile-top {
        flex-wrap: wrap
    }

    .social-profile-top>.social-primary,
    .social-profile-top>.social-ghost {
        width: 100%
    }
}

.ep-tag {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    background: linear-gradient(90deg, #15803d, #16a34a);
    border-radius: 4px;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 5px;
    font: italic 700 12px/1.2 Barlow Condensed, sans-serif;
    display: inline-flex
}

.ep-tag-pending {
    background: #6b7280
}

.ep-button {
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    padding: 0;
    display: inline-flex
}

.ep-button:hover .ep-tag {
    filter: brightness(1.08)
}

.ep-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.slip-ep {
    align-self: flex-start;
    margin: 4px 0 0 22px
}

.slip-leg-info .slip-ep,
.ticket-leg-info .ticket-ep {
    color: #fff;
    align-self: flex-start;
    margin: 3px 0 0
}

.ticket-leg-info .ticket-ep {
    font-size: 11px
}

.ticket-ep {
    align-self: flex-start;
    margin: 2px 0;
    font-size: 11px
}

.account-actions {
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    display: flex
}

.account-signin,
.account-signup {
    height: 34px;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 17px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 550
}

.account-signin {
    color: #fff;
    background: 0 0;
    border: 1px solid #fff9
}

.account-signin:hover {
    background: #00000026
}

.account-signup {
    color: var(--brand);
    background: #fff;
    border: 0
}

.account-signup:hover {
    background: #ffffffe0
}

.account-me {
    color: #fff;
    height: 38px;
    font: inherit;
    cursor: pointer;
    background: #ffffff2e;
    border: 0;
    border-radius: 19px;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    padding: 0 12px 0 4px;
    font-size: 13px;
    font-weight: 450;
    display: flex
}

.account-me:hover {
    background: #ffffff42
}

.account-avatar {
    width: 30px;
    height: 30px;
    color: var(--brand);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    font-size: 14px;
    font-weight: 550;
    display: grid
}

.account-me-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden
}

@media (width<=560px) {

    .account-signin,
    .account-signup {
        height: 32px;
        padding: 0 11px;
        font-size: 12px
    }

    .account-me {
        padding: 0 4px
    }

    .account-me-name {
        display: none
    }
}

.account-dialog {
    width: min(460px, 100%)
}

.account-body {
    padding: 4px 16px 18px;
    overflow-y: auto
}

.account-form {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.account-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    display: grid
}

@media (width<=420px) {
    .account-row {
        grid-template-columns: 1fr
    }
}

.account-steps {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.account-steps-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    display: grid
}

.account-steps-bar span {
    background: var(--surface-3);
    border-radius: 2px;
    height: 4px;
    transition: background .2s
}

.account-steps-bar span.on {
    background: var(--brand)
}

.account-steps-text {
    color: var(--muted);
    margin: 0;
    font-size: 12px
}

.account-steps-text span {
    color: var(--text);
    font-weight: 450
}

.account-step-buttons {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.account-step-buttons>* {
    width: 100%
}

.account-back {
    height: 36px;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 13px;
    font-weight: 450
}

.account-back:hover:not(:disabled) {
    color: var(--text)
}

.account-back:disabled {
    opacity: .5;
    cursor: default
}

.account-back:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 8px
}

.datepicker {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.datepicker-control {
    position: relative
}

.datepicker-input {
    font-variant-numeric: tabular-nums;
    width: 100%;
    padding-right: 46px
}

.datepicker-toggle {
    width: 34px;
    height: 34px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    place-items: center;
    display: grid;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%)
}

.datepicker-toggle:hover,
.datepicker-toggle[aria-expanded=true] {
    background: var(--surface-3);
    color: var(--brand)
}

.datepicker-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px
}

.datepicker-panel {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 12px;
    animation: .14s ease-out datepicker-in
}

@keyframes datepicker-in {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }
}

.datepicker-head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 8px;
    display: flex
}

.datepicker-title {
    color: var(--text);
    gap: 2px;
    font-size: 15px;
    font-weight: 550;
    display: flex
}

.datepicker-title-only {
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-weight: 450
}

.datepicker-title button {
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 550
}

.datepicker-title button:hover {
    background: var(--surface-3);
    color: var(--brand)
}

.datepicker-nav {
    width: 34px;
    height: 34px;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    display: grid
}

.datepicker-nav:hover:not(:disabled) {
    background: var(--surface-3)
}

.datepicker-nav:disabled {
    opacity: .3;
    cursor: default
}

.datepicker-grid {
    gap: 4px;
    display: grid
}

.datepicker-grid button {
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    transition: background .12s, color .12s
}

.datepicker-grid button:hover:not(:disabled) {
    background: var(--surface-3)
}

.datepicker-grid button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px
}

.datepicker-grid button.on {
    background: var(--brand);
    color: #fff;
    font-weight: 550
}

.datepicker-grid button:disabled {
    color: var(--muted);
    opacity: .35;
    cursor: default
}

.datepicker-days {
    grid-template-columns: repeat(7, 1fr)
}

.datepicker-days button {
    aspect-ratio: 1;
    max-height: 40px
}

.datepicker-weekday {
    height: 26px;
    color: var(--muted);
    place-items: center;
    font-size: 12px;
    font-weight: 450;
    display: grid
}

.datepicker-months {
    grid-template-columns: repeat(3, 1fr)
}

.datepicker-months button {
    height: 44px
}

.datepicker-years {
    overscroll-behavior: contain;
    grid-template-columns: repeat(4, 1fr);
    max-height: 220px;
    padding-right: 2px;
    position: relative;
    overflow-y: auto
}

.datepicker-years button {
    height: 40px
}

.account-field {
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    display: flex
}

.account-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 450
}

.account-input,
.deposit-amount {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s
}

.account-input {
    width: 100%;
    height: 46px;
    color: var(--text);
    font: inherit;
    padding: 0 14px;
    font-size: 16px
}

.account-input::placeholder {
    color: var(--muted);
    opacity: .7;
    font-size: 14px
}

.account-input:hover,
.deposit-amount:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--line))
}

.account-input:focus,
.deposit-amount:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
    outline: none
}

.account-input[aria-invalid=true] {
    border-color: var(--down-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--down-text) 12%, transparent)
}

.deposit-amount:has(input[aria-invalid=true]) {
    border-color: var(--down-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--down-text) 12%, transparent)
}

.account-error {
    color: var(--error-text);
    margin: 0;
    font-size: 12px
}

.account-hint {
    color: var(--muted);
    margin: 0;
    font-size: 12px
}

.account-alert {
    background: var(--surface-3);
    color: var(--error-text);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 13px
}

.account-note {
    color: var(--text);
    margin: 0;
    font-size: 14px
}

.account-referral {
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 12px;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    display: flex
}

.account-referral-title {
    color: var(--text);
    margin: 0;
    font-size: 15px;
    font-weight: 550
}

.account-referral-text {
    color: var(--muted);
    margin: -4px 0 0;
    font-size: 13px;
    line-height: 1.45
}

.account-referral-ok {
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 14px
}

.account-referral-ok span {
    color: var(--text);
    font-weight: 450
}

.account-check {
    cursor: pointer;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    display: flex
}

.account-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    flex: none;
    margin: 1px 0 0
}

.account-submit,
.account-secondary,
.account-signout {
    min-height: var(--account-button-h, 40px);
    font: inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.2
}

.account-submit {
    background: var(--brand);
    color: #fff;
    border: 0
}

.account-submit:hover {
    background: var(--brand-hover)
}

.account-submit:disabled,
.account-secondary:disabled {
    background: var(--surface-3);
    color: var(--muted);
    cursor: default;
    border-color: #0000
}

.account-links {
    color: var(--muted);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    display: flex
}

.account-link {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 450
}

.account-link:hover {
    text-decoration: underline
}

.account-data {
    border: 1px solid var(--line);
    border-radius: 10px;
    flex-direction: column;
    margin: 0;
    display: flex
}

.account-data-row {
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    display: flex
}

.account-data-row+.account-data-row {
    border-top: 1px solid var(--line)
}

.account-data-row dt {
    color: var(--muted)
}

.account-data-row dd {
    text-align: right;
    overflow-wrap: anywhere;
    margin: 0
}

.account-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid
}

@media (width<=420px) {
    .account-buttons {
        grid-template-columns: 1fr
    }
}

.account-secondary {
    border: 1px solid var(--line);
    color: var(--text);
    background: 0 0
}

.account-secondary:hover:not(:disabled) {
    background: var(--surface-2)
}

.account-signout {
    border: 1px solid var(--line);
    color: var(--error-text);
    background: 0 0
}

.account-signout:hover {
    background: var(--surface-2)
}

@media (width<=400px) {
    .account-signup {
        display: none
    }
}

.wallet-bar {
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    display: flex
}

.wallet-balance {
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 550
}

.wallet-negative {
    color: #ffd5d0
}

.wallet-deposit {
    height: 34px;
    color: var(--brand);
    font: inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
    border: 0;
    border-radius: 17px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 550
}

.wallet-deposit:hover {
    background: #ffffffe0
}

.wallet-menu-wrap {
    position: relative
}

.wallet-avatar-button {
    cursor: pointer;
    background: #ffffff2e;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid
}

.wallet-avatar-button:hover,
.wallet-avatar-button[aria-expanded=true] {
    background: #ffffff4d
}

.wallet-menu {
    z-index: 40;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--surface);
    width: 300px;
    max-height: calc(100vh - 80px);
    color: var(--text);
    box-shadow: 0 12px 32px var(--shadow);
    border-radius: 12px;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    overflow-y: auto
}

.wallet-menu-user {
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 4px 10px;
    display: flex
}

.wallet-menu-initial {
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 15px;
    font-weight: 550;
    display: grid
}

.wallet-menu-who {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.wallet-menu-close,
.wallet-menu-backdrop {
    display: none
}

.wallet-menu-account,
.wallet-menu-help {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.wallet-menu-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden
}

.wallet-menu-cpf {
    color: var(--muted);
    font-size: 12px
}

.wallet-menu-money {
    background: var(--surface-2);
    border-radius: 10px;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    display: flex
}

.wallet-menu-balance-head {
    color: var(--muted);
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    display: flex
}

.wallet-menu-refresh {
    width: 28px;
    height: 28px;
    color: var(--brand);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    place-items: center;
    margin: -6px -8px -6px 0;
    padding: 0;
    display: grid
}

.wallet-menu-refresh:hover {
    background: var(--surface-3)
}

.wallet-menu-refresh:disabled {
    color: var(--muted);
    cursor: default
}

.wallet-menu-balance {
    font-variant-numeric: tabular-nums;
    margin-top: -4px;
    font-size: 22px;
    font-weight: 550
}

.wallet-menu-values {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    display: flex
}

.wallet-menu-row {
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    display: flex
}

.wallet-menu-row dt {
    color: var(--muted)
}

.wallet-menu-row dd {
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-weight: 450
}

.wallet-negative-text {
    color: var(--error-text)
}

.wallet-menu-note {
    color: var(--error-text);
    margin: 0;
    font-size: 12px
}

.wallet-spin {
    animation: .8s linear infinite wallet-spin
}

@keyframes wallet-spin {
    to {
        transform: rotate(360deg)
    }
}

.wallet-menu-cash {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
    display: grid
}

.wallet-menu-deposit,
.wallet-menu-withdraw {
    height: 40px;
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px
}

.wallet-menu-deposit {
    background: var(--brand);
    color: #fff;
    border: 0;
    font-weight: 550
}

.wallet-menu-deposit:hover {
    background: var(--brand-hover)
}

.wallet-menu-withdraw {
    border: 1px solid var(--surface-4);
    background: var(--surface);
    color: var(--text);
    font-weight: 450
}

.wallet-menu-withdraw:hover {
    background: var(--surface-3)
}

.wallet-menu-div {
    border: 0;
    border-top: 1px solid var(--line);
    width: 100%;
    margin: 6px 0
}

.wallet-menu-item {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    font-size: 14px;
    display: flex
}

.wallet-menu-item svg {
    color: var(--muted);
    flex: none
}

.wallet-menu-item:hover {
    background: var(--surface-2)
}

.wallet-menu-item:hover svg {
    color: var(--brand)
}

.wallet-menu-item:disabled {
    opacity: .6;
    cursor: default
}

.wallet-menu-group {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2px 10px;
    font-size: 11px
}

.wallet-menu-signout {
    color: var(--muted)
}

.wallet-menu-signout:hover,
.wallet-menu-signout:hover svg {
    color: var(--error-text)
}

@media (width<=560px) {
    .wallet-bar {
        gap: 6px
    }

    .wallet-balance {
        font-size: 13px
    }

    .wallet-deposit {
        height: 30px;
        padding: 0 10px;
        font-size: 11px
    }

    .wallet-avatar-button {
        width: 34px;
        height: 34px
    }

    .wallet-avatar-button .account-avatar {
        width: 26px;
        height: 26px;
        font-size: 13px
    }

    .wallet-menu {
        width: auto;
        max-height: calc(100dvh - 140px);
        padding: 10px;
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px
    }

    .wallet-menu-user {
        padding: 0 2px 8px
    }

    .wallet-menu-initial {
        width: 32px;
        height: 32px;
        font-size: 14px
    }

    .wallet-menu-money {
        gap: 4px;
        padding: 8px 10px 10px
    }

    .wallet-menu-balance {
        font-size: 20px
    }

    .wallet-menu-cash {
        margin-top: 4px
    }

    .wallet-menu-div {
        margin: 4px 0
    }

    .wallet-menu-item {
        gap: 10px;
        min-height: 44px;
        font-size: 14px
    }

    .wallet-menu-account {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 4px;
        display: grid
    }

    .wallet-menu-help {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        display: grid
    }

    .wallet-menu-help-title {
        display: none
    }

    .wallet-menu-close {
        width: 40px;
        height: 40px;
        color: var(--muted);
        cursor: pointer;
        background: 0 0;
        border: 0;
        border-radius: 8px;
        flex: none;
        place-items: center;
        margin: -4px -4px -4px 0;
        padding: 0;
        display: grid
    }

    .wallet-menu-close:hover {
        background: var(--surface-2);
        color: var(--text)
    }

    .wallet-menu-backdrop {
        inset: var(--topbar-h, 56px) 0 0 0;
        z-index: 39;
        background: #09091566;
        display: block;
        position: fixed
    }

    .wallet-menu-deposit,
    .wallet-menu-withdraw {
        height: 42px
    }
}

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

.statement-list {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.statement-row {
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    display: flex
}

.statement-row+.statement-row {
    border-top: 1px solid var(--line)
}

.statement-main {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.statement-label {
    font-size: 14px;
    font-weight: 450
}

.statement-meta {
    color: var(--muted);
    overflow-wrap: anywhere;
    font-size: 12px
}

.statement-values {
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    display: flex
}

.statement-in {
    color: var(--up-text);
    font-weight: 450
}

.statement-out {
    color: var(--down-text);
    font-weight: 450
}

.statement-after {
    color: var(--muted);
    font-size: 12px
}

.statement-pages {
    color: var(--muted);
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    display: flex
}

.statement-pages .account-link:disabled {
    color: var(--muted);
    cursor: default;
    text-decoration: none
}

.placed-dialog {
    position: relative
}

.placed-close {
    position: absolute;
    top: 12px;
    right: 12px
}

.placed-hero {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px 14px;
    display: flex
}

.placed-hero .dialog-title {
    margin-top: 4px
}

.placed-mark {
    width: 44px;
    height: 44px;
    color: var(--up-text);
    background: #22c55e26;
    border-radius: 50%;
    place-items: center;
    display: grid
}

.placed-mark-held {
    background: var(--surface-3);
    color: var(--muted)
}

.placed-sub {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
    font-size: 13px
}

.placed-list {
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    margin-bottom: 14px;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.placed-list>li {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.placed-list .ticket-code-copy {
    align-self: flex-end
}

.placed-actions {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    display: flex
}

.placed-actions .slip-place {
    width: 100%
}

.placed-link {
    color: var(--muted);
    text-underline-offset: 3px;
    padding: 4px;
    font-size: 13px;
    text-decoration: underline
}

.placed-link:hover {
    color: var(--text)
}

@media (width<=640px) {
    .placed-actions {
        margin-bottom: calc(16px + env(safe-area-inset-bottom))
    }
}

.preslip-code .preslip-note {
    margin: 6px 0 0
}

.slip-preslip {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 450
}

.slip-preslip:hover:not(:disabled) {
    text-decoration: underline
}

.slip-preslip:disabled {
    color: var(--muted);
    cursor: default
}

.app-account .topbar {
    display: none
}

.app-account .content {
    padding: 0
}

.acct {
    grid-template-columns: 272px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    display: grid
}

.acct-loading {
    min-height: 60vh
}

.acct-side {
    background: var(--surface);
    min-height: calc(100vh - 48px);
    box-shadow: 0 2px 10px var(--shadow);
    border-radius: 20px;
    flex-direction: column;
    gap: 20px;
    padding: 26px 14px 20px;
    display: flex;
    position: sticky;
    top: 24px
}

.acct-logo {
    justify-content: center;
    padding: 0 12px 6px;
    display: flex
}

.acct-logo img {
    object-fit: contain;
    max-width: 180px;
    height: 44px;
    display: block
}

.acct-logo-text {
    color: var(--brand);
    letter-spacing: -.5px;
    font: italic 700 34px/1 Barlow Condensed, sans-serif
}

.acct-nav {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.acct-nav-item {
    width: 100%;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 450;
    display: flex
}

.acct-nav-item svg {
    color: var(--brand);
    flex: none
}

.acct-nav-item:hover {
    background: var(--surface-2)
}

.acct-nav-item.is-active {
    background: var(--brand);
    color: #fff
}

.acct-nav-item.is-active svg {
    color: #fff
}

.acct-nav-item.is-current {
    color: var(--brand)
}

.acct-nav-label {
    flex: 1
}

.acct-nav-chevron {
    color: var(--muted);
    transition: transform .2s;
    display: grid
}

.acct-nav-chevron.is-open {
    transform: rotate(180deg)
}

.acct-subnav {
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px;
    padding: 0 0 0 48px;
    list-style: none;
    display: flex
}

.acct-subnav-item {
    color: var(--muted);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 14px;
    display: block
}

.acct-subnav-item:hover {
    background: var(--surface-2);
    color: var(--text)
}

.acct-subnav-item.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 450
}

.acct-side-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 0 16px;
    display: flex
}

.acct-side-link {
    color: var(--muted);
    font-size: 13px
}

.acct-help {
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-self: stretch;
    gap: 2px;
    margin: 0 -10px;
    padding-bottom: 10px;
    display: flex
}

.acct-help-title {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 10px 4px;
    font-size: 11px
}

.acct-help-item {
    min-height: 40px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    font-size: 14px;
    display: flex
}

.acct-help-item svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex: none
}

.acct-help-item:hover {
    background: var(--surface-2)
}

.acct-help-item:hover svg,
.acct-side-link:hover {
    color: var(--brand)
}

.acct-signout {
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 15px;
    display: inline-flex
}

.acct-signout:hover {
    color: var(--error-text)
}

.acct-signout:disabled {
    opacity: .6;
    cursor: default
}

.acct-main {
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    display: flex
}

.acct-head {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
    display: flex
}

.acct-title {
    margin: 0;
    font-size: 26px;
    font-weight: 550
}

.acct-who {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    display: flex
}

.acct-who-name {
    color: var(--muted);
    font-size: 13px
}

.acct-avatar {
    border: 2px solid var(--text);
    width: 42px;
    height: 42px;
    color: var(--text);
    border-radius: 50%;
    place-items: center;
    font-size: 16px;
    font-weight: 550;
    display: grid
}

.acct-avatar-sm {
    border-width: 1.5px;
    width: 34px;
    height: 34px;
    font-size: 14px
}

.acct-phone-head,
.acct-chips {
    display: none
}

.acct-overview {
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: start;
    gap: 24px;
    display: grid
}

.acct-overview-main {
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    display: flex
}

.acct-panel {
    background: var(--surface);
    box-shadow: 0 2px 10px var(--shadow);
    border-radius: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
    gap: 24px;
    padding: 28px;
    display: grid;
    position: relative;
    overflow: hidden
}

.acct-panel:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent) 1.6px, transparent 2.2px) 0 0 / 16px 16px, linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 14%, transparent) 40%, color-mix(in srgb, var(--brand) 32%, transparent));
    width: min(58%, 560px);
    position: absolute;
    inset: 0 0 0 auto;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 45%);
    mask-image: linear-gradient(90deg, #0000, #000 45%)
}

.acct-panel-left {
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    display: flex;
    position: relative
}

.acct-hello {
    color: var(--text);
    margin: 0;
    font-size: 26px
}

.acct-hello-name {
    font-weight: 550
}

.acct-refresh {
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    display: inline-flex
}

.acct-refresh:hover {
    color: var(--brand)
}

.acct-refresh:disabled {
    color: var(--muted);
    cursor: default
}

.acct-panel-right {
    flex-direction: column;
    gap: 16px;
    display: flex;
    position: relative
}

.acct-balance {
    background: var(--surface);
    box-shadow: 0 6px 24px var(--shadow);
    border-radius: 16px;
    flex-direction: column;
    gap: 4px;
    padding: 20px 22px;
    display: flex
}

.acct-balance-icon {
    background: var(--brand-soft);
    width: 46px;
    height: 46px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 10px;
    display: grid
}

.acct-balance-top {
    align-items: center;
    gap: 10px;
    display: flex
}

.acct-balance-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
    font-size: 30px;
    font-weight: 550
}

.acct-balance-value.is-negative {
    color: var(--error-text)
}

.acct-eye {
    width: 32px;
    height: 32px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    display: grid
}

.acct-eye:hover {
    background: var(--surface-2);
    color: var(--text)
}

.acct-balance-label {
    color: var(--muted);
    font-size: 14px
}

.acct-balance-lines {
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
    padding-top: 12px;
    display: flex
}

.acct-balance-lines div {
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    display: flex
}

.acct-balance-lines dt {
    color: var(--muted)
}

.acct-balance-lines dd {
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-weight: 450
}

.acct-balance-note {
    color: var(--error-text);
    margin: 8px 0 0;
    font-size: 12px
}

.acct-panel-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    display: grid
}

.acct-withdraw,
.acct-deposit {
    height: var(--account-button-h, 40px);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 550;
    text-decoration: none
}

.acct-withdraw {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text)
}

.acct-withdraw:hover {
    background: var(--surface-2)
}

.acct-deposit {
    background: var(--brand);
    color: #fff;
    border: 0
}

.acct-deposit:hover {
    background: var(--brand-hover)
}

.acct-cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    display: grid
}

.acct-card {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    display: flex
}

.acct-card-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    display: flex
}

.acct-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 550
}

.acct-card-link {
    color: var(--brand);
    font-size: 13px;
    font-weight: 450
}

.acct-card-link:hover {
    text-decoration: underline
}

.acct-card-body {
    background: var(--surface);
    min-height: 180px;
    box-shadow: 0 2px 10px var(--shadow);
    border-radius: 16px;
    align-items: center;
    gap: 20px;
    padding: 22px;
    display: flex
}

.acct-card-art {
    background: var(--brand-soft);
    width: 84px;
    height: 84px;
    color: var(--brand);
    border-radius: 24px;
    flex: none;
    place-items: center;
    display: grid;
    transform: rotate(-8deg)
}

.acct-card-art svg {
    transform: rotate(8deg)
}

.acct-empty {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.acct-empty-title {
    color: var(--text);
    margin: 0;
    font-size: 15px;
    font-weight: 550
}

.acct-empty-text {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.acct-mini-list {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.acct-mini-row {
    background: var(--surface-2);
    border-radius: 10px;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    display: flex
}

.acct-mini-link:hover {
    background: var(--surface-3)
}

.acct-mini-value {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 450
}

.acct-mini-meta {
    color: var(--muted);
    overflow-wrap: anywhere;
    font-size: 12px
}

.acct-shortcuts {
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
    display: flex
}

.acct-shortcut {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    display: flex
}

.acct-shortcut-icon {
    background: var(--surface);
    width: 52px;
    height: 52px;
    color: var(--brand);
    box-shadow: 0 2px 10px var(--shadow);
    border-radius: 50%;
    place-items: center;
    transition: transform .15s;
    display: grid
}

.acct-shortcut-icon svg {
    width: 22px;
    height: 22px
}

.acct-shortcut:hover .acct-shortcut-icon {
    transform: translateY(-2px)
}

.acct-shortcut-label {
    font-size: 12px;
    font-weight: 450
}

.acct-page-card {
    background: var(--surface);
    box-shadow: 0 2px 10px var(--shadow);
    border-radius: 16px;
    padding: 20px
}

.acct-narrow {
    max-width: 560px
}

.acct-pad {
    padding: 20px 4px
}

.acct-pad-bottom {
    margin-bottom: 4px
}

.acct-tabs {
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    display: flex;
    overflow-x: auto
}

.acct-tabs::-webkit-scrollbar {
    display: none
}

.acct-tab {
    border: 1px solid var(--line);
    height: 34px;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    flex: none;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 450
}

.acct-tab:hover {
    background: var(--surface-2)
}

.acct-tab.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

.statement-list.is-stale {
    opacity: .6
}

.statement-code {
    color: var(--brand)
}

.statement-code:hover {
    text-decoration: underline
}

.acct-history .bets-page-bar {
    margin-bottom: 12px
}

.acct-saved {
    background: color-mix(in srgb, var(--up) 12%, transparent);
    color: var(--up-text);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 13px
}

.acct-button-link {
    place-items: center;
    display: grid
}

.acct-invite {
    flex-direction: column;
    gap: 28px;
    display: flex
}

.invite-head {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.invite-eyebrow {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    font-weight: 500
}

.invite-amount {
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.05
}

.invite-title {
    letter-spacing: -.01em;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2
}

.invite-lead {
    max-width: 46ch;
    color: var(--muted);
    margin: 0;
    font-size: 15px;
    line-height: 1.5
}

.invite-share {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.invite-url-pick {
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    min-width: 0;
    display: flex
}

.invite-host {
    background: var(--brand-soft);
    min-width: 0;
    color: var(--brand);
    cursor: pointer;
    border-radius: 6px;
    flex: 0 auto;
    align-items: center;
    gap: 4px;
    margin-left: -6px;
    padding: 4px 8px;
    font-weight: 500;
    display: inline-flex;
    position: relative
}

:root[data-theme=dark] .invite-host {
    color: color-mix(in srgb, var(--brand) 55%, #fff)
}

.invite-host:hover {
    background: color-mix(in srgb, var(--brand) 18%, transparent)
}

.invite-host:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 1px
}

.invite-host-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.invite-host svg {
    flex: none
}

.invite-host select {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    position: absolute;
    inset: 0
}

.invite-url-rest {
    color: var(--muted);
    flex: none;
    padding-left: 2px
}

.invite-link {
    background: var(--surface-2);
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 6px 0 16px;
    display: flex
}

.invite-url {
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: all;
    user-select: all;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    overflow: hidden
}

.invite-copy {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 40px;
    height: 40px;
    color: var(--text);
    cursor: pointer;
    border-radius: 9px;
    flex: none;
    place-items: center;
    padding: 0;
    transition: color .15s, border-color .15s;
    display: grid
}

.invite-copy:hover {
    border-color: var(--surface-4)
}

.invite-copy.is-done {
    color: var(--up-text);
    border-color: color-mix(in srgb, var(--up-text) 35%, transparent)
}

.invite-code {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.invite-code-value {
    color: var(--text);
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    margin: 0 4px;
    font-weight: 500
}

.invite-code-copy {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 500
}

.invite-code-copy:hover {
    text-decoration: underline
}

.invite-results {
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
    display: flex
}

.invite-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 0;
    display: grid
}

.invite-stats.is-many {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.invite-stat {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.invite-stat-value {
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    order: -1;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2
}

.invite-stat-label {
    color: var(--muted);
    font-size: 13px
}

.invite-empty {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.invite-fine {
    color: var(--muted);
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    display: flex
}

.invite-fine p {
    margin: 0
}

.invite-rules {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-self: flex-start;
    padding: 0;
    font-weight: 500
}

.invite-rules:hover {
    text-decoration: underline
}

.ig {
    width: min(440px, 100%);
    overflow-y: auto
}

.ig-top {
    isolation: isolate;
    background: var(--brand);
    color: #fff;
    text-align: center;
    flex-direction: column;
    flex: none;
    align-items: center;
    padding: 26px 24px 40px;
    display: flex;
    position: relative
}

.ig-top:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    -webkit-mask: var(--hl-bolts) 0 0 / auto no-repeat;
    -webkit-mask: var(--hl-bolts) 0 0 / auto no-repeat;
    mask: var(--hl-bolts) 0 0 / auto no-repeat;
    background: #ffffff12;
    position: absolute;
    inset: 0
}

.ig-close {
    color: #fff;
    cursor: pointer;
    background: #ffffff29;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px
}

.ig-close:hover {
    background: #ffffff42
}

.ig-title {
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
    font: 600 15px/1 Poppins, sans-serif
}

.ig-amount {
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    margin: 10px 0 0;
    font: 800 76px/.9 Poppins, sans-serif
}

.ig-per {
    text-transform: uppercase;
    opacity: .9;
    margin: 6px 0 0;
    font: 500 16px/1.1 Poppins, sans-serif
}

.ig-body {
    background: var(--surface);
    clip-path: polygon(0 18px, 38% 6px, 33% 18px, 100% 0, 100% 100%, 0 100%);
    flex-direction: column;
    gap: 14px;
    margin-top: -16px;
    padding: 36px 22px 18px;
    display: flex
}

.ig-steps {
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.ig-steps li {
    text-transform: uppercase;
    align-items: center;
    gap: 12px;
    font: 700 17px/1.1 Barlow Condensed, sans-serif;
    display: flex
}

.ig-num {
    width: 22px;
    color: var(--brand);
    text-align: center;
    flex: none;
    font: 400 24px/1 Anton, sans-serif
}

:root[data-theme=dark] .ig-num {
    color: color-mix(in srgb, var(--brand) 55%, #fff)
}

.ig-link {
    border: 1px solid var(--line);
    border-radius: 6px;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 6px 0 14px;
    display: flex
}

.ig-url {
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: all;
    user-select: all;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow: hidden
}

.ig-copy {
    background: var(--surface-2);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    flex: none;
    padding: 7px 12px;
    font: 400 14px/1 Anton, sans-serif
}

.ig-copy:hover {
    background: var(--surface-3)
}

.ig-cta {
    background: var(--brand);
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    padding: 12px 16px 13px;
    font: 400 21px/1 Anton, sans-serif
}

.ig-cta:hover {
    background: var(--brand-hover)
}

.ig-links {
    justify-content: center;
    gap: 20px;
    display: flex
}

.ig-links :is(a, button) {
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 2px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none
}

.ig-links :is(a, button):hover {
    color: var(--text);
    text-decoration: underline
}

.ig-fine {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 12px;
    line-height: 1.45
}

@media (width<=700px) {
    .ig {
        width: 100%
    }

    .ig-amount {
        font-size: 68px
    }
}

.tg-badge {
    width: 56px;
    height: 56px;
    color: var(--brand);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    margin-bottom: 14px;
    display: grid
}

.tg-badge svg {
    margin-left: -3px
}

.tg-headline {
    letter-spacing: -.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    max-width: 340px;
    margin: 10px 0 0;
    font: 800 30px/1 Poppins, sans-serif
}

.tg-text {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 15px;
    line-height: 1.5
}

.tg-cta {
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex
}

.tg .ig-body {
    padding-bottom: calc(14px + env(safe-area-inset-bottom))
}

@media (width<=700px) {
    .tg-headline {
        font-size: 26px
    }
}

@media (width<=560px) {
    .acct-invite {
        gap: 24px
    }

    .invite-amount {
        font-size: 38px
    }

    .invite-stats {
        gap: 18px 12px
    }

    .invite-stat-value {
        font-size: 20px
    }
}

@media (width<=1180px) {
    .acct {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 18px;
        padding: 18px
    }

    .acct-overview {
        grid-template-columns: 1fr
    }

    .acct-shortcuts {
        flex-direction: row;
        order: -1;
        justify-content: flex-start;
        gap: 28px
    }

    .acct-panel {
        grid-template-columns: 1fr
    }

    .acct-panel:before {
        width: 100%
    }

    .acct-panel-left {
        flex-direction: row;
        align-items: center
    }
}

@media (width<=960px) {
    .acct-cards {
        grid-template-columns: 1fr
    }
}

.acct-dialog {
    background: var(--bg);
    border-radius: 18px;
    width: min(880px, 100%);
    height: min(600px, 100vh - 48px);
    max-height: none
}

.acct-dialog .acct {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 12px
}

.acct-dialog .acct-side {
    border-radius: 14px;
    gap: 14px;
    min-height: 0;
    padding: 14px 10px;
    position: static;
    overflow-y: auto
}

.acct-dialog .acct-nav-item {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 14px
}

.acct-dialog .acct-side-foot {
    padding: 0 10px
}

.acct-user {
    border-bottom: 1px solid var(--line);
    justify-content: center;
    padding: 4px 0 14px;
    display: flex
}

.acct-user .acct-avatar {
    flex: none;
    line-height: 1
}

.acct-dialog .acct-main {
    overscroll-behavior: contain;
    gap: 14px;
    padding: 0 4px 12px 0;
    overflow-y: auto
}

.acct-dialog .acct-head {
    z-index: 2;
    background: var(--bg);
    padding: 6px 0 4px;
    position: sticky;
    top: 0
}

.acct-dialog .acct-title {
    font-size: 20px
}

.acct-dialog .acct-who {
    display: none
}

.acct-dialog .acct-loading {
    height: 100%;
    min-height: 0
}

.acct-close {
    align-self: flex-start
}

.acct-dialog .acct-overview {
    grid-template-columns: 1fr
}

.acct-dialog .acct-overview-main {
    gap: 14px
}

.acct-dialog .acct-panel {
    border-radius: 16px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px
}

.acct-dialog .acct-panel:before {
    width: 100%
}

.acct-dialog .acct-panel-left {
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.acct-dialog .acct-hello {
    font-size: 18px
}

.acct-dialog .acct-panel-right {
    gap: 12px
}

.acct-dialog .acct-balance {
    padding: 14px 16px
}

.acct-dialog .acct-balance-value {
    font-size: 24px
}

.acct-dialog .acct-panel-buttons {
    gap: 10px
}

.acct-dialog .acct-cards {
    gap: 14px
}

.acct-dialog .acct-card-title {
    font-size: 15px
}

.acct-dialog .acct-card-body {
    border-radius: 14px;
    gap: 14px;
    min-height: 116px;
    padding: 14px
}

.acct-dialog .acct-card-art {
    border-radius: 16px;
    width: 52px;
    height: 52px
}

.acct-dialog .acct-card-art svg {
    width: 24px;
    height: 24px
}

.acct-dialog .acct-narrow {
    max-width: none
}

.acct-dialog .acct-page-card {
    border-radius: 14px;
    padding: 16px
}

.acct-profile-foot {
    display: contents
}

.acct-dialog .acct-profile .account-data {
    border: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    display: grid
}

.acct-dialog .acct-profile .account-data-row {
    background: var(--surface-2);
    border: 0;
    border-radius: 10px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 10px 12px
}

.acct-dialog .acct-profile .account-data-row dt {
    font-size: 12px
}

.acct-dialog .acct-profile .account-data-row dd {
    text-align: left;
    overflow-wrap: break-word;
    font-weight: 450
}

.acct-dialog .acct-profile-foot {
    border-top: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    padding-top: 14px;
    display: flex
}

.acct-dialog .acct-profile-foot .account-hint {
    max-width: 320px
}

.acct-dialog .acct-profile-foot .account-buttons {
    flex: none;
    display: flex
}

.acct-dialog .acct-profile-foot .account-secondary {
    min-height: 40px;
    padding: 0 18px
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field) {
    flex-flow: wrap;
    gap: 12px 14px
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field)>* {
    flex: 100%
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field)>.account-field {
    flex: calc(50% - 7px)
}

.acct-dialog .acct-password .account-form:has(>.account-field)>.account-field:first-child {
    flex-basis: 100%;
    padding-right: calc(50% + 7px)
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field)>:is(.account-links, .account-submit) {
    flex: none;
    margin-top: 4px
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field)>.account-links {
    order: 1;
    margin-left: auto
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field)>.account-submit {
    order: 2;
    min-height: 40px;
    margin-left: auto;
    padding: 0 22px
}

.acct-dialog :is(.acct-password, .acct-profile) .account-form:has(>.account-field):after {
    content: "";
    background: var(--line);
    flex: 100%;
    order: 0;
    height: 1px;
    margin-top: 4px
}

.acct-dialog :is(.acct-password, .acct-profile) .account-links .account-link {
    border: 1px solid var(--line);
    background: var(--surface-2);
    height: 40px;
    color: var(--text);
    border-radius: 10px;
    place-items: center;
    padding: 0 18px;
    font-size: 14px;
    display: grid
}

.acct-dialog :is(.acct-password, .acct-profile) .account-links .account-link:hover {
    background: var(--surface-3);
    text-decoration: none
}

@media (width<=700px) {
    .acct {
        padding: 0 0 76px;
        display: block
    }

    .acct-side,
    .acct-head {
        display: none
    }

    .acct-main {
        gap: 14px
    }

    .acct-phone-head {
        z-index: 15;
        background: var(--surface);
        height: 56px;
        box-shadow: 0 1px 0 var(--line);
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        display: flex;
        position: sticky;
        top: 0
    }

    .acct-back {
        width: 36px;
        height: 36px;
        color: var(--text);
        border-radius: 50%;
        place-items: center;
        display: grid
    }

    .acct-back:hover {
        background: var(--surface-2)
    }

    .acct-phone-title {
        flex: 1;
        margin: 0;
        font-size: 17px;
        font-weight: 550
    }

    .acct-chips {
        scrollbar-width: none;
        gap: 8px;
        padding: 0 12px;
        display: flex;
        overflow-x: auto
    }

    .acct-chips::-webkit-scrollbar {
        display: none
    }

    .acct-chip {
        background: var(--surface);
        height: 34px;
        color: var(--text);
        box-shadow: 0 1px 3px var(--shadow);
        border-radius: 999px;
        flex: none;
        place-items: center;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 450;
        display: grid
    }

    .acct-chip.is-active {
        background: var(--brand);
        color: #fff
    }

    .acct-overview,
    .acct-page-card,
    .acct-history {
        margin: 0 12px
    }

    .acct-overview,
    .acct-overview-main {
        gap: 16px
    }

    .acct-panel {
        border-radius: 18px;
        gap: 16px;
        padding: 18px
    }

    .acct-hello {
        font-size: 20px
    }

    .acct-balance {
        padding: 16px
    }

    .acct-balance-value {
        font-size: 26px
    }

    .acct-shortcuts {
        order: 1;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        display: grid
    }

    .acct-shortcut {
        background: var(--surface);
        box-shadow: 0 1px 3px var(--shadow);
        text-align: left;
        border-radius: 14px;
        flex-direction: row;
        gap: 12px;
        padding: 12px
    }

    .acct-shortcut-icon {
        width: 40px;
        height: 40px;
        box-shadow: none;
        background: var(--brand-soft)
    }

    .acct-shortcut-icon svg {
        width: 20px;
        height: 20px
    }

    .acct-card-body {
        gap: 14px;
        min-height: 0;
        padding: 16px
    }

    .acct-card-art {
        border-radius: 16px;
        width: 56px;
        height: 56px
    }

    .acct-card-art svg {
        width: 22px;
        height: 22px
    }

    .acct-card-title {
        font-size: 16px
    }

    .acct-narrow {
        max-width: none
    }
}

.deposit-amount {
    cursor: text;
    align-items: center;
    gap: 6px;
    height: 54px;
    padding: 0 16px;
    display: flex
}

.deposit-currency {
    color: var(--muted);
    font-size: 16px;
    font-weight: 450
}

.deposit-input {
    min-width: 0;
    height: 100%;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1;
    font-size: 22px;
    font-weight: 550
}

.deposit-input::placeholder {
    color: var(--muted);
    opacity: .4;
    font-weight: 450
}

.deposit-quick {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
    display: grid
}

.deposit-chip {
    border: 1px solid var(--line);
    white-space: nowrap;
    background: var(--surface-2);
    height: 38px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 450;
    transition: background-color .15s, border-color .15s, color .15s
}

.deposit-chip:hover {
    background: var(--surface-3)
}

.deposit-chip-on,
.deposit-chip-on:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft)
}

.deposit-resume {
    background: color-mix(in srgb, var(--warn-text) 10%, transparent);
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    display: flex
}

.deposit-resume-text {
    flex: 1;
    margin: 0;
    font-size: 13px;
    line-height: 1.4
}

.deposit-resume-link {
    flex: none
}

.deposit-resume-link:disabled {
    color: var(--muted);
    cursor: default
}

.deposit-pay {
    align-items: stretch;
    gap: 14px
}

.deposit-summary {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 2px;
    display: flex
}

.deposit-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
    font-size: 30px;
    font-weight: 550;
    line-height: 1.1
}

.deposit-status {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    display: inline-flex
}

.deposit-qr-wrap {
    justify-content: center;
    display: flex
}

.deposit-qr {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    width: 100%;
    max-width: 220px;
    image-rendering: pixelated;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    display: block
}

.deposit-qr svg {
    width: 100%;
    height: 100%;
    display: block
}

.deposit-qr-toggle {
    align-self: center;
    font-size: 13px
}

.deposit-code {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.deposit-code-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    -webkit-user-select: all;
    user-select: all;
    padding: 0 2px;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    display: block;
    overflow: hidden
}

.deposit-copy {
    height: var(--account-button-h, 40px);
    background: var(--brand);
    color: #fff;
    font: inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 550;
    transition: background-color .2s;
    display: flex
}

.deposit-copy:hover {
    background: var(--brand-hover)
}

.deposit-copy-done,
.deposit-copy-done:hover {
    background: var(--up-text)
}

.deposit-how {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-size: 12px;
    line-height: 1.45
}

.deposit-how-phone {
    display: none
}

.deposit-dot {
    background: var(--brand);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.4s ease-in-out infinite deposit-pulse
}

@keyframes deposit-pulse {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .35;
        transform: scale(.8)
    }
}

@media (prefers-reduced-motion:reduce) {
    .deposit-dot {
        animation: none
    }
}

.deposit-qr-toggle {
    display: none
}

@media (width<=700px) {
    .deposit-qr-wrap {
        order: 3
    }

    .deposit-qr-wrap:not(.is-open) {
        display: none
    }

    .deposit-qr-toggle {
        order: 2;
        display: block
    }

    .deposit-how {
        order: 4
    }

    .deposit-how-phone {
        display: inline
    }

    .deposit-how-desk {
        display: none
    }
}

.deposit-done {
    text-align: center;
    align-items: center
}

.deposit-done .account-submit {
    align-self: stretch
}

.deposit-done-icon {
    background: color-mix(in srgb, var(--up-text) 14%, transparent);
    width: 56px;
    height: 56px;
    color: var(--up-text);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.deposit-strong {
    font-weight: 550
}

.pix-unstable {
    text-align: center;
    align-items: center
}

.pix-unstable .account-submit,
.pix-unstable .account-secondary {
    align-self: stretch
}

.pix-unstable-icon {
    background: var(--brand-soft);
    width: 56px;
    height: 56px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.pix-unstable-title {
    color: var(--text);
    margin: 0;
    font-size: 17px;
    font-weight: 550
}

.pix-unstable-text {
    max-width: 360px;
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    line-height: 1.5
}

.pix-unstable-list {
    background: var(--surface-2);
    text-align: left;
    border-radius: 12px;
    flex-direction: column;
    align-self: stretch;
    gap: 10px;
    margin: 2px 0 4px;
    padding: 14px;
    list-style: none;
    display: flex
}

.pix-unstable-list li {
    color: var(--text);
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    display: flex
}

.pix-unstable-check {
    color: var(--up-text);
    flex: none;
    margin-top: 1px
}

.pix-unstable-help {
    color: var(--muted);
    margin: 2px 0 0;
    font-size: 12px
}

.pix-unstable-forecast {
    color: var(--text);
    margin: 0;
    font-size: 13px;
    font-weight: 500
}

.pix-unstable-help .account-link {
    font-size: 12px
}

@media (width<=420px) {
    .deposit-qr {
        max-width: 200px
    }
}

.withdraw-free {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px
}

.withdraw-all {
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: none;
    padding: 4px 0 4px 8px;
    font-size: 13px
}

.withdraw-all:hover,
.withdraw-all.is-on {
    color: var(--brand)
}

.withdraw-all:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px
}

.withdraw-night {
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 12px;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    display: flex
}

.withdraw-night-title {
    color: var(--text);
    margin: 0;
    font-size: 14px;
    font-weight: 550
}

.withdraw-night-left {
    color: var(--text);
    margin: 0;
    font-size: 14px
}

.withdraw-night-text {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.45
}

.withdraw-night-more {
    color: var(--muted);
    font-size: 12px
}

.withdraw-night-more summary {
    cursor: pointer;
    width: fit-content;
    color: var(--text)
}

.withdraw-night-more p {
    margin: 4px 0 0;
    line-height: 1.45
}

.withdraw-night-over {
    color: var(--text);
    margin: 0;
    font-size: 12px
}

.withdraw-night-use {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 500
}

.withdraw-night-use:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px
}

.withdraw-picks {
    flex-wrap: wrap;
    gap: 6px;
    display: flex
}

.withdraw-pick {
    border: 1px solid var(--line);
    height: 30px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 450
}

.withdraw-pick:hover {
    background: var(--surface-2)
}

.withdraw-pick.is-on,
.withdraw-pick.is-on:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand)
}

.withdraw-pick:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px
}

.withdraw-detected {
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    margin: 0;
    font-size: 13px
}

.withdraw-summary {
    border: 0;
    gap: 8px
}

.withdraw-summary .account-data-row {
    padding: 0
}

.withdraw-summary .account-data-row+.account-data-row {
    border-top: 0
}

.withdraw-key-value {
    word-break: break-all;
    text-align: right
}

.tx {
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    display: flex
}

.tx-filters {
    scrollbar-width: none;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
    display: flex;
    overflow-x: auto
}

.tx-filters::-webkit-scrollbar {
    display: none
}

.tx-filter {
    cursor: pointer;
    background: var(--surface);
    height: 36px;
    color: var(--text);
    font: inherit;
    box-shadow: 0 1px 3px var(--shadow);
    border: 0;
    border-radius: 999px;
    flex: none;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 450
}

.tx-filter:hover {
    background: var(--hover)
}

.tx-filter.is-active {
    background: var(--brand);
    color: #fff
}

.tx-card {
    background: var(--surface);
    box-shadow: 0 1px 3px var(--shadow);
    border-radius: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.tx-empty {
    text-align: center;
    padding: 32px 20px
}

.tx-days {
    flex-direction: column;
    gap: 18px;
    transition: opacity .15s;
    display: flex
}

.tx-days.is-stale {
    opacity: .6
}

.tx-day {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.tx-day-title {
    color: var(--muted);
    margin: 0 4px;
    font-size: 13px;
    font-weight: 450
}

.tx-list>li+li {
    border-top: 1px solid var(--line)
}

.tx-row {
    cursor: pointer;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    display: flex
}

.tx-row:hover {
    background: var(--hover)
}

.tx-row:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px
}

.tx-icon {
    background: var(--surface-2);
    width: 38px;
    height: 38px;
    color: var(--muted);
    border-radius: 12px;
    flex: none;
    place-items: center;
    display: grid
}

.tx-icon.is-in {
    background: color-mix(in srgb, var(--up-text) 12%, transparent);
    color: var(--up-text)
}

.tx-icon.is-wait {
    background: color-mix(in srgb, var(--warn-text) 12%, transparent);
    color: var(--warn-text)
}

.tx-icon.is-out {
    background: color-mix(in srgb, var(--down-text) 10%, transparent);
    color: var(--down-text)
}

.tx-main {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.tx-label {
    color: var(--text);
    font-size: 14px;
    font-weight: 450
}

.tx-meta {
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden
}

.tx-code {
    color: var(--brand)
}

.tx-code:hover {
    text-decoration: underline
}

.tx-side {
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    flex: none;
    align-items: flex-end;
    gap: 3px;
    display: flex
}

.tx-amount {
    font-size: 14px;
    font-weight: 450
}

.tx-amount.is-in {
    color: var(--up-text)
}

.tx-amount.is-out {
    color: var(--text)
}

.tx-after {
    color: var(--muted);
    font-size: 12px
}

.tx-status {
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 450
}

.tx-status.is-wait {
    background: color-mix(in srgb, var(--warn-text) 12%, transparent);
    color: var(--warn-text)
}

.tx-status.is-bad {
    background: var(--error-bg);
    color: var(--error-text)
}

.tx-status.is-ok {
    background: color-mix(in srgb, var(--up-text) 12%, transparent);
    color: var(--up-text)
}

.txd {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.txd-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 2px;
    display: flex
}

.txd-icon {
    border-radius: 16px;
    width: 48px;
    height: 48px
}

.txd-label {
    color: var(--muted);
    font-size: 14px
}

.txd-amount {
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 550
}

.txd-amount.is-in {
    color: var(--up-text)
}

.txd-amount.is-out {
    color: var(--text)
}

.txd-note {
    background: var(--surface-2);
    color: var(--text);
    border-radius: 10px;
    margin: 0;
    padding: 10px 12px;
    font-size: 13px
}

.txd-note.is-unstable {
    background: color-mix(in srgb, var(--warn-text) 12%, var(--surface-2))
}

.txd-mono {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px
}

.txd-slip {
    border: 1px solid var(--line);
    border-radius: 12px;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    display: flex
}

.txd-slip-head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

.txd-slip-title {
    font-size: 14px;
    font-weight: 450
}

.txd-slip-result {
    color: var(--muted);
    font-size: 12px
}

.txd-slip-line {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px
}

.txd-slip-link {
    justify-content: center;
    align-items: center;
    min-height: 40px;
    margin-top: 4px;
    display: flex
}

.tx-pages {
    color: var(--muted);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    display: flex
}

.tx-page {
    cursor: pointer;
    background: var(--surface);
    height: 36px;
    color: var(--text);
    font: inherit;
    box-shadow: 0 1px 3px var(--shadow);
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 450
}

.tx-page:disabled {
    opacity: .45;
    cursor: default
}

@media (width<=700px) {
    .tx {
        gap: 14px;
        margin: 0 12px
    }

    .tx-filters {
        margin: 0 -12px;
        padding: 2px 12px
    }

    .tx-row {
        gap: 10px;
        padding: 12px 14px
    }

    .tx-icon {
        border-radius: 11px;
        width: 36px;
        height: 36px
    }
}

.co-tag {
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #0d9488);
    border-radius: 4px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 20px;
    display: inline-flex
}

.co-tag svg {
    width: 17px;
    height: 17px
}

.market-head-row {
    position: relative
}

.market-head-co>span:first-child {
    padding-right: 34px
}

.market-head-ep>span:first-child {
    padding-right: 172px
}

.market-head-ep-co>span:first-child {
    padding-right: 200px
}

.market-head-tags {
    align-items: center;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%)
}

.co-button {
    cursor: pointer;
    border: 0;
    padding: 0
}

.co-button:hover {
    filter: brightness(1.08)
}

.co-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.co-help-example {
    color: var(--muted);
    margin: 8px 0 0;
    font-size: 13px
}

@media (width<=860px) {
    .market-head-tags {
        right: 36px
    }
}

.cas-section-title,
.cas-cat-title,
.cas-side-head-link,
.cas-note h2 {
    font-optical-sizing: auto;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif
}

.cas-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    max-width: 1560px;
    margin: 0 auto;
    display: grid
}

.cas-main {
    flex-direction: column;
    gap: 34px;
    min-width: 0;
    padding-top: 6px;
    display: flex
}

.cas-paused {
    color: var(--warn-text);
    background: #eab3081f;
    border-radius: 12px;
    margin: 0 0 -18px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4
}

.cas-side {
    scrollbar-width: thin;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100dvh - 92px);
    display: flex;
    position: sticky;
    top: 76px;
    overflow-y: auto
}

.cas-side-top {
    border-bottom: 1px solid var(--surface-3);
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding-bottom: 8px;
    display: flex
}

.cas-side-head {
    border-radius: 999px;
    align-items: center;
    display: flex
}

.cas-side-head-open,
.cas-side-head:hover {
    background: var(--surface-2)
}

.cas-side-head-link {
    min-width: 0;
    min-height: 48px;
    color: var(--text);
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 6px 16px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: flex
}

.cas-side-toggle {
    width: 44px;
    height: 44px;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    margin-right: 4px;
    display: grid
}

.cas-side-toggle:hover {
    background: var(--surface-3)
}

.cas-side-icon {
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

.cas-art {
    width: 100%;
    height: 100%;
    display: block
}

.cas-side-list {
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    display: flex
}

.cas-side-list-closed {
    display: none
}

.cas-side-link {
    width: 100%;
    min-height: 48px;
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 20px;
    font-size: 15px;
    text-decoration: none;
    display: flex
}

.cas-side-link:hover {
    background: var(--surface);
    color: var(--text)
}

.cas-side-active,
.cas-side-active:hover {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 500
}

.cas-side-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.cas-side-count {
    background: var(--surface-3);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    flex: none;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600
}

.cas-side-more .cas-side-icon {
    color: var(--text)
}

.cas-side-extra {
    display: none
}

.offers-dialog {
    width: min(480px, 100%)
}

.offers-list {
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 4px 16px 16px;
    list-style: none;
    display: flex;
    overflow-y: auto
}

div.offers-list {
    gap: 12px
}

.offer {
    border-top: 1px solid var(--line);
    gap: 14px;
    padding: 14px 0;
    display: flex
}

.offer:first-child {
    border-top: 0;
    padding-top: 6px
}

.offer-pic {
    --o-a: #3b2a7a;
    --o-b: #16112f;
    background: radial-gradient(120% 80% at 50% 0%, var(--o-a), var(--o-b));
    border-radius: 10px;
    flex: none;
    place-items: center;
    width: 72px;
    height: 96px;
    display: grid
}

.offer-pic .cas-art {
    width: 40px;
    height: 40px
}

.offer-medal .offer-pic {
    --o-a: #7a5a12;
    --o-b: #261a05
}

.offer-bolt .offer-pic {
    --o-a: #1f5a8a;
    --o-b: #0b1a2c
}

.offer-flame .offer-pic {
    --o-a: #8a2a14;
    --o-b: #2a0c06
}

.offer-trophy .offer-pic {
    --o-a: #2a6a3a;
    --o-b: #0a2212
}

.offer-cards .offer-pic {
    --o-a: #3b2a7a;
    --o-b: #16112f
}

.offer-stars .offer-pic {
    --o-a: #6a2a6a;
    --o-b: #220a22
}

.offer-bag .offer-pic {
    --o-a: #1f6a6a;
    --o-b: #082222
}

.offer-gift .offer-pic {
    --o-a: #8a1f4a;
    --o-b: #2a0816
}

.offer-body {
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    display: flex
}

.offer-group {
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600
}

.offer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25
}

.offer-text {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.4
}

.offer-more {
    border: 1px solid var(--line);
    background: var(--surface-2);
    height: 32px;
    color: var(--text);
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex
}

.offer-more:after {
    content: "";
    border: 2px solid;
    border-width: 2px 2px 0 0;
    width: 6px;
    height: 6px;
    margin-left: 2px;
    transform: rotate(45deg)
}

.offer-more:hover {
    background: var(--surface-3)
}

.offers-card {
    padding: 0;
    overflow: hidden
}

.offers-card .offers-list {
    padding: 4px 14px 6px
}

.offers-card .offer:first-child {
    padding-top: 12px
}

.offers-card .offer-pic {
    border-radius: 8px;
    width: 56px;
    height: 76px
}

.offers-card .offer-pic .cas-art {
    width: 32px;
    height: 32px
}

.offers-card .offer-title {
    font-size: 15px
}

.offers-card .offer-text {
    font-size: 12px
}

.offer-help-odds {
    align-items: baseline;
    gap: 6px;
    margin-left: 4px;
    display: inline-flex
}

.offer-help-odds s {
    color: var(--muted);
    font-size: 12px
}

.offer-help-odds b {
    color: var(--text);
    font-weight: 600
}

a.ca-help-ok {
    place-items: center;
    text-decoration: none;
    display: grid
}

.offers-empty {
    color: var(--muted);
    margin: 0;
    padding: 8px 16px 20px
}

.cas-search {
    border: 1px solid var(--surface-3);
    width: 100%;
    max-width: 420px;
    height: 42px;
    color: var(--muted);
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    display: flex
}

.cas-search:focus-within {
    border-color: var(--text);
    color: var(--text)
}

.cas-search input {
    min-width: 0;
    color: var(--text);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 15px
}

.cas-search input::placeholder {
    color: var(--muted)
}

.cas-section {
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    display: flex
}

.cas-section-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    display: flex
}

.cas-section-title {
    letter-spacing: -.6px;
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 24px
}

.cas-count {
    background: var(--surface-2);
    height: 34px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex
}

.cas-count-link {
    text-decoration: none
}

.cas-count-link:hover .cas-count {
    background: var(--surface-3)
}

.cas-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 17px;
    display: grid
}

.cas-grid-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px 16px
}

.cas-grid-rows-2>:nth-child(n+13),
.cas-grid-rows-4>:nth-child(n+25) {
    display: none
}

.cas-card {
    min-width: 0;
    color: var(--text);
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    display: flex
}

.cas-card-pic {
    aspect-ratio: 16/9;
    background: var(--surface);
    border-radius: 8px;
    display: block;
    position: relative;
    overflow: hidden
}

.cas-card-pic img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .2s;
    display: block
}

.cas-card-whole {
    --edge: calc((1 - var(--art, .42)) * 50%);
    --fade: calc(var(--art, .42) * 22%)
}

.cas-card-whole .cas-card-img {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent var(--edge), #000 calc(var(--edge) + var(--fade)), #000 calc(100% - var(--edge) - var(--fade)), transparent calc(100% - var(--edge)));
    -webkit-mask-image: linear-gradient(90deg, transparent var(--edge), #000 calc(var(--edge) + var(--fade)), #000 calc(100% - var(--edge) - var(--fade)), transparent calc(100% - var(--edge)));
    mask-image: linear-gradient(90deg, transparent var(--edge), #000 calc(var(--edge) + var(--fade)), #000 calc(100% - var(--edge) - var(--fade)), transparent calc(100% - var(--edge)));
    position: relative;
    transform: scaleX(1.3)
}

.cas-card-pic .cas-card-blur {
    object-fit: fill;
    filter: blur(10px)brightness(.8)saturate(1.2);
    position: absolute;
    inset: 0;
    transform: scale(1.2)
}

.cas-card-blank {
    color: var(--muted);
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    position: absolute;
    inset: 0
}

.cas-card-tag {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2px;
    background: #090915d1;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 8px 0 6px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    position: absolute;
    top: 6px;
    left: 6px
}

.cas-card-tag svg {
    color: #3ddc84
}

.cas-card:hover .cas-card-pic .cas-card-img {
    transform: scale(1.05)
}

.cas-card:hover .cas-card-whole .cas-card-img {
    transform: scale(1.365, 1.05)
}

.cas-card:focus-visible {
    outline: none
}

.cas-card:focus-visible .cas-card-pic {
    outline: 2px solid var(--text);
    outline-offset: 2px
}

.cas-card-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.cas-card-skeleton .cas-card-pic {
    animation: 1.2s ease-in-out infinite cas-pulse
}

.cas-card-skeleton .cas-card-name {
    background: var(--surface);
    color: #0000;
    border-radius: 4px;
    width: 60%
}

@keyframes cas-pulse {
    50% {
        opacity: .55
    }
}

.cas-providers {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    grid-auto-columns: 182px;
    grid-auto-flow: column;
    gap: 16px;
    display: grid;
    overflow-x: auto
}

.cas-providers::-webkit-scrollbar {
    display: none
}

.cas-provider {
    border: 1px solid var(--surface-2);
    background: var(--surface);
    height: 100px;
    color: var(--text);
    scroll-snap-align: start;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    text-decoration: none;
    display: flex
}

.cas-provider:hover {
    border-color: var(--surface-4)
}

.cas-provider-name {
    letter-spacing: .3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden
}

.cas-provider-logo {
    object-fit: contain;
    width: 128px;
    max-width: 100%;
    height: 48px
}

:root:not([data-theme=dark]) .cas-provider:has(.cas-provider-logo) {
    color: #fff;
    background: #14141f;
    border-color: #1c1c2a
}

.cas-provider-count {
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 600
}

.cas-rank {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    grid-auto-columns: calc(23.2558% - 14.8837px);
    grid-auto-flow: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    overflow-x: auto
}

.cas-rank::-webkit-scrollbar {
    display: none
}

.cas-fade {
    --l: 0px;
    --r: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--l), #000 calc(100% - var(--r)), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--l), #000 calc(100% - var(--r)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--l), #000 calc(100% - var(--r)), transparent)
}

.cas-fade-left {
    --l: 72px
}

.cas-fade-right {
    --r: 96px
}

.cas-rank-item {
    scroll-snap-align: start;
    min-width: 0;
    padding-left: 18%;
    position: relative;
    container-type: inline-size
}

.cas-rank-item .cas-card-name {
    font-size: 13px
}

.cas-rank-item:before {
    content: "";
    z-index: 1;
    pointer-events: none;
    filter: blur(8px);
    background: radial-gradient(60% 62% at 30% 58%, #000000e6, #0000008c 55%, #0000);
    width: 50%;
    position: absolute;
    top: 4px;
    bottom: 29px;
    left: 0
}

.cas-rank-item:nth-of-type(n+10) {
    width: 127%;
    padding-left: 45%
}

.cas-rank-item:nth-of-type(n+10) .cas-rank-place text {
    letter-spacing: -6px
}

.cas-rank-place {
    z-index: 2;
    pointer-events: none;
    height: 56.25cqw;
    position: absolute;
    bottom: 25px;
    left: 0;
    overflow: visible
}

.cas-rank-place text {
    stroke: color-mix(in srgb, var(--text) 85%, transparent);
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 138px;
    font-weight: 700
}

.cas-winners {
    color: #fff;
    background: #07070f;
    border-radius: 14px;
    flex-direction: column;
    gap: 22px;
    padding: 22px 20px 18px;
    display: flex;
    position: relative;
    overflow: hidden
}

.cas-winners-blur {
    object-fit: cover;
    filter: blur(30px)saturate(1.2);
    opacity: .85;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transform: scale(1.4)
}

.cas-winners:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#07070f26, #07070fb3 42%, #07070f 68%);
    position: absolute;
    inset: 0
}

.cas-winners>:not(.cas-winners-blur) {
    z-index: 1;
    position: relative
}

.cas-winner-link {
    z-index: 1;
    border-radius: 10px;
    position: absolute;
    inset: 0
}

.cas-winner-top {
    justify-content: center;
    align-items: center;
    gap: 28px;
    display: flex
}

.cas-winner-top-pic {
    z-index: 0;
    aspect-ratio: 16/9;
    background: var(--surface-2);
    border-radius: 10px;
    flex: none;
    width: 300px;
    position: relative;
    overflow: hidden
}

.cas-winner-top-pic img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.cas-winner-words {
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-right: 34px;
    display: flex;
    position: relative
}

.cas-winner-who,
.cas-winner-game {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    overflow: hidden
}

.cas-winner-prize {
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 600
}

.cas-winner-share {
    z-index: 2;
    width: 36px;
    height: 36px;
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: absolute;
    bottom: 2px;
    right: -6px
}

.cas-winner-share:hover {
    background: #ffffff24
}

.cas-winner-top .cas-winner-words {
    z-index: 1;
    text-shadow: 0 1px 6px #0009;
    gap: 2px;
    padding-right: 48px
}

.cas-winner-top .cas-winner-who,
.cas-winner-top .cas-winner-game {
    font-size: 16px
}

.cas-winner-top .cas-winner-prize {
    font-size: 32px;
    line-height: 1.25
}

.cas-winner-top .cas-winner-share {
    bottom: 50%;
    right: 0;
    transform: translateY(50%)
}

.cas-winners-rest {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    grid-auto-columns: calc(18.5185% - 14.8148px);
    grid-auto-flow: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    overflow-x: auto
}

.cas-winners-rest::-webkit-scrollbar {
    display: none
}

.cas-winner .cas-card-pic {
    background: #ffffff14
}

.cas-winner {
    scroll-snap-align: start;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex;
    position: relative
}

.cas-winner:hover .cas-card-img {
    transform: scale(1.05)
}

.cas-paid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 14px;
    display: grid
}

.cas-paid-card {
    background: var(--surface);
    border-radius: 10px;
    flex-direction: column;
    min-width: 0;
    padding: 0 16px 16px;
    display: flex
}

.cas-paid-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    display: flex;
    position: relative
}

.cas-paid-titles {
    z-index: 1;
    min-width: 0;
    position: relative
}

.cas-paid-titles .cas-section-title {
    align-items: center;
    gap: 4px;
    display: flex
}

.cas-paid-sub {
    color: var(--muted);
    margin: 4px 0 0;
    font-size: 13px
}

.cas-paid-info-button {
    width: 28px;
    height: 28px;
    color: var(--text);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid
}

.cas-paid-info-button:hover {
    background: var(--surface-2)
}

.cas-paid-art {
    pointer-events: none;
    width: 124px;
    height: 124px;
    position: absolute;
    bottom: 0;
    right: 84px
}

.cas-paid-all {
    z-index: 1;
    height: 34px;
    color: var(--text);
    border-radius: 999px;
    flex: none;
    align-items: center;
    gap: 9px;
    padding: 0 6px 0 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    position: relative
}

.cas-paid-all:hover {
    background: var(--surface-2)
}

.cas-paid-info {
    color: var(--muted);
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5
}

.cas-paid-list {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    position: relative
}

.cas-paid-row {
    background: var(--surface-2);
    color: var(--text);
    border-radius: 8px;
    align-items: center;
    gap: 14px;
    padding: 7px 14px;
    text-decoration: none;
    display: flex
}

.cas-paid-row:hover {
    background: var(--surface-3)
}

.cas-paid-pic {
    aspect-ratio: 16/9;
    background: var(--surface-3);
    border-radius: 6px;
    flex: none;
    width: 84px;
    overflow: hidden
}

.cas-paid-pic img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.cas-paid-game {
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    display: flex
}

.cas-paid-game b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden
}

.cas-paid-game small {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.cas-paid-pct {
    font-variant-numeric: tabular-nums;
    flex: none;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex
}

.cas-paid-most .cas-paid-pct {
    color: #ff9a4d
}

.cas-paid-least .cas-paid-pct {
    color: #7cc4ff
}

:root:not([data-theme=dark]) .cas-paid-most .cas-paid-pct {
    color: #c2560a
}

:root:not([data-theme=dark]) .cas-paid-least .cas-paid-pct {
    color: #1f6fd0
}

.cas-paid-page {
    max-width: 760px
}

.cas-paid-page .cas-paid-row {
    background: var(--surface)
}

.cas-paid-page .cas-paid-row:hover {
    background: var(--surface-2)
}

@media (width<=1180px) {
    .cas-paid-art {
        width: 104px;
        height: 104px;
        right: 70px
    }
}

.cas-crumbs {
    color: var(--text);
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

.cas-crumbs a {
    color: var(--muted);
    text-decoration: none
}

.cas-crumbs a:hover {
    color: var(--text)
}

.cas-crumbs svg {
    width: 5px;
    height: 9px;
    color: var(--muted)
}

.cas-cat-head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: -14px;
    display: flex
}

.cas-cat-title {
    letter-spacing: -.6px;
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 24px
}

.cas-cat-count {
    margin: 4px 0 0;
    font-size: 13px
}

.cas-filter-button {
    background: var(--surface-2);
    width: 40px;
    height: 40px;
    color: var(--text);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    display: grid;
    position: relative
}

.cas-filter-button:hover {
    background: var(--surface-3)
}

.cas-filter-on {
    background: var(--text);
    color: var(--bg)
}

.cas-filter-on:hover {
    background: var(--text)
}

.cas-filter-badge {
    background: var(--brand);
    color: #fff;
    text-align: center;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    position: absolute;
    top: -6px;
    right: -6px
}

.cas-applied {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -18px;
    display: flex
}

.cas-applied-chip {
    background: var(--surface-2);
    height: 30px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex
}

.cas-applied-chip:hover {
    background: var(--surface-3)
}

.cas-applied-chip span {
    color: var(--muted);
    font-size: 15px;
    line-height: 1
}

.cas-filter-dialog {
    flex-direction: column;
    width: min(440px, 100%);
    max-height: min(640px, 86dvh);
    display: flex
}

.cas-filter-title {
    margin: 0;
    padding: 6px 16px 10px;
    font-size: 14px;
    font-weight: 600
}

.cas-filter-list {
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    padding: 0 8px;
    overflow-y: auto
}

.cas-filter-row {
    cursor: pointer;
    border-radius: 10px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 8px;
    display: flex
}

.cas-filter-row:hover {
    background: var(--hover)
}

.cas-filter-row input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.cas-filter-check {
    border: 2px solid var(--surface-4);
    color: #0000;
    border-radius: 6px;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    display: grid
}

.cas-filter-row input:checked+.cas-filter-check {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

.cas-filter-row input:focus-visible+.cas-filter-check {
    outline: 2px solid var(--focus);
    outline-offset: 2px
}

.cas-filter-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    overflow: hidden
}

.cas-filter-count {
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    flex: none;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600
}

.cas-filter-actions {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    flex: none;
    gap: 10px;
    display: flex
}

.cas-filter-actions .cas-load-button {
    flex: none
}

.cas-filter-apply {
    background: var(--brand);
    color: #fff;
    height: 40px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    flex: 1;
    font-size: 14px;
    font-weight: 600
}

.cas-filter-apply:hover {
    background: var(--brand-hover)
}

.cas-wins {
    flex-direction: column;
    gap: 8px;
    max-width: 760px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cas-win {
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    text-decoration: none;
    display: flex
}

a.cas-win:hover {
    background: var(--surface-2)
}

.cas-win-rank {
    width: 22px;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex: none;
    font-size: 13px;
    font-weight: 600
}

.cas-win-pic {
    aspect-ratio: 16/9;
    background: var(--surface-2);
    border-radius: 6px;
    flex: none;
    width: 96px;
    overflow: hidden
}

.cas-win-pic img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.cas-win-game {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.cas-win-game b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden
}

.cas-win-game small {
    color: var(--muted);
    font-size: 12px
}

.cas-win-value {
    flex-direction: column;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    display: flex
}

.cas-win-value b {
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600
}

.cas-win-value small {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px
}

.cas-note {
    background: var(--surface);
    border-radius: 14px;
    max-width: 560px;
    padding: 28px 24px
}

.cas-note h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700
}

.cas-note p {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    line-height: 1.5
}

.cas-note .cas-load-button {
    margin-top: 16px
}

.cas-club {
    flex-direction: column;
    gap: 28px;
    max-width: 980px;
    display: flex
}

.cas-club-coin {
    flex: none
}

.cas-club-hero {
    background: color-mix(in srgb, var(--surface) 72%, #07070f);
    color: #fff;
    border: 1px solid #ffffff12;
    border-radius: 18px;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    display: flex;
    position: relative;
    overflow: hidden
}

.cas-club-hero-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    display: flex
}

.cas-club-hero h2 {
    margin: 0;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1
}

.cas-club-hero p {
    color: #ffffffad;
    max-width: 520px;
    margin: 0;
    font-size: 14px;
    line-height: 1.55
}

.cas-club-hero p b {
    color: #fff;
    font-weight: 600
}

.cas-club-level {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    display: flex
}

.cas-club-level-name {
    color: var(--lv-a);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600
}

.cas-club-level-meta {
    color: #ffffff8c;
    padding-left: 14px;
    font-size: 13px;
    position: relative
}

.cas-club-level-meta:before {
    content: "";
    background: #ffffff2e;
    width: 1px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.cas-club-coins {
    align-items: center;
    gap: 12px;
    display: flex
}

.cas-club-coins .cas-club-coin {
    filter: drop-shadow(0 6px 18px #f5b52e59)
}

.cas-club-coins b {
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1
}

.cas-club-coins span {
    color: #fff9;
    align-self: flex-end;
    padding-bottom: 8px;
    font-size: 14px
}

.cas-club-badge {
    background: color-mix(in srgb, var(--up-text) 14%, transparent);
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600
}

.cas-club-facts {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cas-club-facts li {
    background: #ffffff0a;
    border: 1px solid #ffffff14;
    border-radius: 12px;
    flex-direction: column;
    gap: 1px;
    padding: 10px 14px;
    display: flex
}

.cas-club-facts b {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600
}

.cas-club-facts span {
    color: #fff9;
    font-size: 12px
}

.cas-club-ring {
    flex: none;
    width: 168px;
    height: 168px;
    position: relative
}

.cas-club-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.cas-club-ring-track {
    fill: none;
    stroke: #ffffff14;
    stroke-width: 10px
}

.cas-club-ring-fill {
    fill: none;
    stroke: url(#cas-club-ring-g);
    stroke-width: 10px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lv-a) 60%, transparent));
    transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1)
}

.cas-club-ring-in {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    display: flex;
    position: absolute;
    inset: 0
}

.cas-club-ring-in small {
    color: #fff9;
    font-size: 11px
}

.cas-club-ring-in b {
    color: var(--lv-a);
    font-variant-numeric: tabular-nums;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1
}

.cas-club-hero-art {
    flex: none;
    align-items: center;
    width: 190px;
    height: 130px;
    display: flex;
    position: relative
}

.cas-club-hero-art svg {
    filter: drop-shadow(0 10px 24px #f5b52e59);
    position: absolute
}

.cas-club-hero-art svg:first-child {
    top: 48px;
    left: 0;
    transform: rotate(-14deg)
}

.cas-club-hero-art svg:nth-child(2) {
    top: 10px;
    left: 52px
}

.cas-club-hero-art svg:nth-child(3) {
    top: 64px;
    left: 132px;
    transform: rotate(12deg)
}

.cas-club-join {
    background: var(--brand);
    color: #fff;
    height: 44px;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex
}

.cas-club-join:hover:not(:disabled) {
    background: var(--brand-hover)
}

.cas-club-join:disabled {
    opacity: .6;
    cursor: default
}

.cas-club-error {
    color: var(--warn-text) !important
}

.cas-club-sub {
    color: var(--muted);
    margin: -6px 0 12px;
    font-size: 13px
}

.cas-club-title {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    display: flex
}

.cas-club-count {
    color: var(--muted);
    font-family: Geist, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400
}

.cas-club-track-silver {
    --lv-a: #e6ecf5;
    --lv-b: #8fa0bb;
    --lv-ink: #1b2333
}

.cas-club-track {
    scrollbar-width: thin;
    margin: 0 -4px;
    padding: 4px 4px 8px;
    overflow-x: auto
}

.cas-club-track-gold {
    --lv-a: #ffe08a;
    --lv-b: #e8940c;
    --lv-ink: #3a2500
}

.cas-club-track-in {
    min-width: calc(var(--cols) * 86px);
    position: relative
}

.cas-club-rail {
    top: 16px;
    left: calc(100% / var(--cols) / 2);
    right: calc(100% / var(--cols) / 2);
    background: var(--surface-3);
    border-radius: 999px;
    height: 4px;
    position: absolute
}

.cas-club-rail-fill {
    width: var(--fill);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lv-b), var(--lv-a));
    height: 100%;
    box-shadow: 0 0 12px color-mix(in srgb, var(--lv-a) 45%, transparent);
    transition: width .6s cubic-bezier(.2, .8, .2, 1);
    display: block
}

.cas-club-you {
    top: 50%;
    left: var(--fill);
    z-index: 1;
    background: var(--bg, #0b0d14);
    width: 26px;
    height: 26px;
    box-shadow: 0 0 0 2px var(--lv-a), 0 4px 14px #00000073;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: absolute;
    transform: translate(-50%, -50%)
}

.cas-club-nodes {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative
}

.cas-club-node {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    display: flex
}

.cas-club-dot {
    z-index: 2;
    background: var(--surface);
    width: 36px;
    height: 36px;
    box-shadow: inset 0 0 0 2px var(--surface-3);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    display: grid;
    position: relative
}

.cas-club-node-text {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    display: flex
}

.cas-club-node-text b {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600
}

.cas-club-node-text small {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    display: inline-flex
}

.cas-club-node-text em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal
}

.cas-club-node-start .cas-club-dot {
    background: var(--surface-2);
    box-shadow: none
}

.cas-club-node-start b {
    color: var(--muted);
    font-weight: 500
}

.cas-club-node-done .cas-club-dot {
    background: linear-gradient(135deg, var(--lv-a), var(--lv-b));
    box-shadow: none;
    color: var(--lv-ink)
}

.cas-club-node-ok {
    color: var(--up-text) !important
}

.cas-club-node-next .cas-club-dot {
    box-shadow: inset 0 0 0 2px var(--lv-a), 0 0 0 5px color-mix(in srgb, var(--lv-a) 18%, transparent);
    color: var(--text);
    animation: 2.4s ease-in-out infinite cas-club-pulse
}

.cas-club-node-next b {
    color: var(--lv-a)
}

.cas-club-node-next em {
    color: var(--text)
}

@keyframes cas-club-pulse {
    50% {
        box-shadow: inset 0 0 0 2px var(--lv-a), 0 0 0 9px color-mix(in srgb, var(--lv-a) 6%, transparent)
    }
}

.cas-club-paid {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 760px;
    display: flex
}

.cas-club-paid-head {
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    display: flex
}

.cas-club-paid-head .cas-club-title {
    margin: 0
}

.cas-club-paid-total {
    flex-direction: column;
    align-items: flex-end;
    display: flex
}

.cas-club-paid-total b {
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    font-family: Bricolage Grotesque, Geist, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1
}

.cas-club-paid-total span {
    color: var(--muted);
    font-size: 12px
}

.cas-club-paid-list {
    background: var(--surface);
    border-radius: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.cas-club-paid-row {
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    display: flex
}

.cas-club-paid-row+.cas-club-paid-row {
    border-top: 1px solid color-mix(in srgb, var(--surface-3) 60%, transparent)
}

.cas-club-medal {
    background: linear-gradient(135deg, var(--lv-a), var(--lv-b));
    width: 38px;
    height: 38px;
    color: var(--lv-ink);
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    display: grid;
    box-shadow: inset 0 0 0 3px #ffffff40
}

.cas-club-paid-what {
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}

.cas-club-paid-what b {
    font-size: 14px;
    font-weight: 500
}

.cas-club-paid-what small {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    display: flex
}

.cas-club-paid-value {
    flex-direction: column;
    flex: none;
    align-items: flex-end;
    gap: 3px;
    display: flex
}

.cas-club-paid-value b {
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 600
}

.cas-club-paid-value small {
    color: var(--muted);
    font-size: 11px
}

.cas-club-paid-more {
    align-self: center
}

.cas-club-paid-link {
    color: var(--muted);
    text-underline-offset: 3px;
    font-size: 13px;
    text-decoration: underline
}

.cas-club-paid-link:hover {
    color: var(--text)
}

@media (width<=640px) {
    .cas-club-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 18px
    }

    .cas-club-hero-main {
        display: contents
    }

    .cas-club-hero-main>* {
        align-self: flex-start
    }

    .cas-club-hero .cas-club-ring {
        background: #ffffff0a;
        border: 1px solid #ffffff14;
        border-radius: 14px;
        order: 1;
        align-items: center;
        gap: 14px;
        width: auto;
        height: auto;
        padding: 10px 14px 10px 10px;
        display: flex
    }

    .cas-club-hero .cas-club-ring svg {
        flex: none;
        width: 64px;
        height: 64px
    }

    .cas-club-hero .cas-club-ring-in {
        text-align: left;
        align-items: flex-start;
        position: static
    }

    .cas-club-hero .cas-club-ring-in b {
        font-size: 20px
    }

    .cas-club-hero .cas-club-join {
        order: 2;
        justify-content: center;
        align-self: stretch
    }

    .cas-club-hero .cas-club-error {
        order: 3
    }

    .cas-club-hero-art {
        display: none
    }

    .cas-club-hero h2 {
        font-size: 24px
    }

    .cas-club-coins b {
        font-size: 44px
    }
}

@media (width<=520px) {
    .cas-club-paid-row {
        gap: 12px;
        padding: 12px
    }

    .cas-club-medal {
        width: 34px;
        height: 34px;
        font-size: 13px
    }

    .cas-club-paid-value small {
        text-align: right;
        max-width: 92px
    }
}

.cas-club-toast {
    z-index: 70;
    background: color-mix(in srgb, var(--surface) 80%, #07070f);
    color: #fff;
    border: 1px solid #ffffff14;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    width: min(420px, 100vw - 32px);
    padding: 12px 12px 12px 14px;
    animation: .35s cubic-bezier(.2, .8, .2, 1) cas-club-toast-in;
    display: flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 14px 40px #00000080
}

.cas-club-toast-coin {
    background: #f5b52e24;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    display: grid
}

.cas-club-toast-text {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.cas-club-toast-text b {
    color: var(--up-text);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600
}

.cas-club-toast-text small {
    color: #ffffffa6;
    font-size: 12px
}

.cas-club-toast button {
    color: #fff9;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 20px
}

.cas-club-toast button:hover {
    color: #fff;
    background: #ffffff14
}

@keyframes cas-club-toast-in {
    0% {
        opacity: 0;
        transform: translate(-50%, 16px)
    }
}

.cas-club-chip {
    color: #fff;
    white-space: nowrap;
    background: #ffffff14;
    border-radius: 999px;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    display: inline-flex
}

.cas-club-chip b {
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.cas-club-chip small {
    color: var(--lv-a);
    font-size: 11px
}

.cas-club-chip-off {
    color: #ffffff8c;
    font-size: 12px
}

@media (width<=640px) {
    .cas-club-toast {
        bottom: calc(84px + env(safe-area-inset-bottom))
    }

    .cas-club-chip small,
    .cas-club-chip-off {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .cas-club-toast {
        animation: none
    }
}

.cas-club-rules {
    max-width: 720px
}

.cas-club-rules h2 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600
}

.cas-club-rules ul {
    color: var(--muted);
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    display: flex
}

@media (width<=640px) {
    .cas-club-track {
        margin: 0;
        padding: 0;
        overflow: visible
    }

    .cas-club-track-in {
        min-width: 0
    }

    .cas-club-rail {
        top: calc(100% / var(--cols) / 2);
        bottom: calc(100% / var(--cols) / 2);
        width: 4px;
        height: auto;
        left: 16px;
        right: auto
    }

    .cas-club-rail-fill {
        width: 100%;
        height: var(--fill);
        background: linear-gradient(180deg, var(--lv-b), var(--lv-a));
        transition-property: height
    }

    .cas-club-you {
        top: var(--fill);
        left: 50%
    }

    .cas-club-nodes {
        grid-template-columns: 1fr;
        grid-auto-rows: 60px
    }

    .cas-club-node {
        text-align: left;
        flex-direction: row;
        gap: 14px
    }

    .cas-club-node-text {
        flex-flow: wrap;
        flex: 1;
        align-items: baseline;
        gap: 0 10px
    }

    .cas-club-node-text em {
        margin-left: auto
    }
}

@media (prefers-reduced-motion:reduce) {

    .cas-club-rail-fill,
    .cas-club-ring-fill {
        transition: none
    }

    .cas-club-node-next .cas-club-dot {
        animation: none
    }
}

.cas-load {
    justify-content: center;
    margin-top: 4px;
    display: flex
}

.cas-load-button {
    border: 1px solid var(--surface-4);
    height: 40px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500
}

.cas-load-button:hover:not(:disabled) {
    background: var(--surface)
}

.cas-load-button:disabled {
    opacity: .6;
    cursor: default
}

@media (width<=1500px) {
    .cas-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .cas-grid-rows-2>:nth-child(n+11),
    .cas-grid-rows-4>:nth-child(n+21) {
        display: none
    }

    .cas-grid-wide {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (width<=1240px) {
    .cas-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 22px
    }

    .cas-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px 12px
    }

    .cas-grid-rows-2>:nth-child(n+9),
    .cas-grid-rows-4>:nth-child(n+17) {
        display: none
    }

    .cas-grid-wide {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.cas-grid.cas-grid-feature {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.cas-grid.cas-grid-feature>* {
    grid-column: span 2
}

.cas-grid.cas-grid-feature>:nth-child(-n+4) {
    grid-column: span 3
}

.cas-grid.cas-grid-feature>:nth-child(-n+10) {
    display: flex
}

.cas-grid.cas-grid-feature>:nth-child(n+11) {
    display: none
}

@media (width<=1240px) {
    .cas-grid.cas-grid-feature>* {
        grid-column: span 3
    }

    .cas-grid.cas-grid-feature>:nth-child(-n+3) {
        grid-column: span 4
    }

    .cas-grid.cas-grid-feature>:nth-child(n+8) {
        display: none
    }
}

@media (width<=900px) {
    .cas-grid.cas-grid-feature {
        grid-template-columns: none
    }

    .cas-grid.cas-grid-feature>:nth-child(n) {
        grid-column: auto;
        display: flex
    }

    .cas-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        display: flex
    }

    .cas-main {
        gap: 26px;
        padding-top: 0
    }

    .cas-side {
        top: var(--topbar-h, 56px);
        z-index: 15;
        scrollbar-width: none;
        background: var(--bg);
        flex-direction: row;
        align-items: center;
        gap: 8px;
        max-height: none;
        margin: -12px -12px -8px;
        padding: 12px 12px 8px;
        position: sticky;
        overflow-x: auto
    }

    .cas-side::-webkit-scrollbar {
        display: none
    }

    .cas-side.cas-fade {
        -webkit-mask-image: none;
        mask-image: none
    }

    .cas-side:before,
    .cas-side:after {
        content: "";
        z-index: 1;
        pointer-events: none;
        flex: none;
        align-self: stretch;
        width: 0;
        position: sticky
    }

    .cas-side.cas-fade-left:before {
        background: linear-gradient(90deg, var(--bg), transparent);
        width: 36px;
        margin-right: -44px;
        left: -12px
    }

    .cas-side.cas-fade-right:after {
        background: linear-gradient(90deg, transparent, var(--bg));
        width: 52px;
        margin-left: -60px;
        right: -12px
    }

    .cas-side-top {
        border: 0;
        flex-direction: row;
        gap: 8px;
        margin: 0;
        padding: 0
    }

    .cas-side-list,
    .cas-side-list-closed {
        flex-direction: row;
        gap: 8px;
        padding: 0;
        display: flex
    }

    .cas-side-head {
        background: 0 0;
        flex: none
    }

    .cas-side-head-link,
    .cas-side-link {
        --chip: color-mix(in srgb, var(--surface-3) 60%, var(--surface-2));
        border: 1px solid var(--chip);
        background: var(--chip);
        width: auto;
        height: 36px;
        min-height: 0;
        color: var(--text);
        border-radius: 999px;
        flex: none;
        gap: 6px;
        padding: 0 14px 0 10px;
        font-size: 13px;
        font-weight: 500
    }

    .cas-side-link:hover {
        border-color: var(--surface-3);
        background: var(--surface-3)
    }

    :root:not([data-theme=dark]) .cas-side-head-link,
    :root:not([data-theme=dark]) .cas-side-link {
        border-color: var(--surface);
        background: var(--surface)
    }

    .cas-side-icon {
        width: 22px;
        height: 22px
    }

    .cas-side-toggle,
    .cas-side-more {
        display: none
    }

    .cas-side-extra {
        display: flex
    }

    .cas-side-active,
    .cas-side-active:hover {
        border-color: var(--text);
        background: var(--chip)
    }

    :root:not([data-theme=dark]) .cas-side-active {
        border-color: var(--text)
    }

    .cas-side-count {
        display: none
    }

    .cas-search {
        max-width: none
    }

    .cas-section {
        gap: 12px
    }

    .cas-section-title,
    .cas-cat-title {
        font-size: 18px
    }

    .cas-grid-rows {
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: none;
        grid-auto-columns: 148px;
        grid-auto-flow: column;
        gap: 14px 10px;
        margin: 0 -12px;
        padding: 0 12px;
        scroll-padding-inline: 12px;
        overflow-x: auto
    }

    .cas-grid-rows::-webkit-scrollbar {
        display: none
    }

    .cas-grid-rows>.cas-card {
        scroll-snap-align: start
    }

    .cas-grid-rows-2>:nth-child(n),
    .cas-grid-rows-4>:nth-child(n) {
        display: flex
    }

    .cas-grid-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px
    }

    .cas-providers {
        grid-auto-columns: 132px;
        gap: 10px;
        margin: 0 -12px;
        padding: 0 12px;
        scroll-padding-inline: 12px
    }

    .cas-winners {
        gap: 18px;
        padding: 16px 12px 14px
    }

    .cas-winner-top {
        flex-direction: column;
        gap: 0
    }

    .cas-winner-top-pic {
        width: 100%;
        -webkit-mask-image: linear-gradient(#000 55%, #0000);
        mask-image: linear-gradient(#000 55%, #0000)
    }

    .cas-winner-top .cas-winner-words {
        text-align: center;
        align-items: center;
        max-width: 100%;
        margin-top: -34px;
        padding: 0 44px
    }

    .cas-winner-top .cas-winner-who,
    .cas-winner-top .cas-winner-game {
        max-width: 100%;
        font-size: 15px
    }

    .cas-winner-top .cas-winner-prize {
        font-size: 23px;
        line-height: 1.3
    }

    .cas-winners-rest {
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 172px;
        gap: 14px 10px;
        margin: 0 -12px;
        padding: 0 12px;
        scroll-padding-inline: 12px
    }

    .cas-fade-left {
        --l: 36px
    }

    .cas-fade-right {
        --r: 52px
    }

    .cas-rank {
        grid-auto-columns: 58%;
        gap: 10px;
        margin: 0 -12px;
        padding: 0 12px;
        scroll-padding-inline: 12px
    }

    .cas-paid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        margin-top: 10px
    }

    .cas-paid-card {
        padding: 0 10px 10px
    }

    .cas-paid-head {
        min-height: 84px
    }

    .cas-paid-art {
        width: 100px;
        height: 100px;
        right: 62px
    }

    .cas-paid-row {
        gap: 10px;
        padding: 6px 10px
    }

    .cas-paid-pic {
        width: 72px
    }

    .cas-paid-game b {
        font-size: 14px
    }

    .cas-provider {
        height: 84px
    }

    .cas-provider-name {
        font-size: 14px
    }

    .cas-provider-logo {
        height: 38px
    }

    .cas-cat-head {
        margin-top: -6px
    }

    .cas-applied {
        margin-top: -12px
    }
}

.app-game {
    flex-direction: column;
    height: 100dvh;
    display: flex
}

.app-game .topbar {
    height: auto;
    min-height: 0;
    max-height: 0;
    box-shadow: none;
    flex: none;
    padding-top: 0;
    padding-bottom: 0;
    animation: .28s both cas-topbar-up;
    overflow: hidden
}

@keyframes cas-topbar-up {
    0% {
        max-height: 120px
    }

    to {
        max-height: 0
    }
}

.app-game .content {
    flex: 1;
    max-width: none;
    min-height: 0;
    padding: 0
}

.app-game .bottom-nav,
.app-game .to-top {
    display: none
}

.cas-game {
    background: #000;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    display: flex
}

.cas-game-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex: none;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    display: flex
}

.cas-game-back {
    color: var(--muted);
    flex: none;
    font-weight: 500;
    text-decoration: none
}

.cas-game-back:hover {
    color: var(--text)
}

.cas-game-name {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden
}

.cas-game-name small {
    color: var(--muted);
    margin-left: 8px;
    font-weight: 400
}

.cas-game-balance {
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    flex: none;
    padding: 5px 12px;
    font-weight: 600
}

.cas-game-stage {
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    position: relative
}

.cas-game-stage .empty {
    color: #fff
}

.cas-game-frame {
    background: #000;
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.cas-game-wait {
    border: 3px solid #fff3;
    border-top-color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    animation: .8s linear infinite cas-spin
}

@keyframes cas-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (width<=720px) {
    .cas-game-name small {
        display: none
    }

    .cas-filter-dialog {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .cas-card-pic img {
        transition: none
    }

    .cas-card-skeleton .cas-card-pic,
    .cas-game-wait,
    .app-game .topbar {
        animation: none
    }
}

.stories {
    min-width: 0
}

.stories-phone {
    display: none
}

@media (width<=960px) {
    .stories-wide {
        display: none
    }

    .stories-phone {
        margin-top: 4px;
        display: block
    }
}

.stories-track {
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    gap: 12px;
    margin: -4px;
    padding: 4px;
    display: flex;
    overflow-x: auto
}

.stories-track::-webkit-scrollbar {
    display: none
}

.story-card {
    cursor: pointer;
    background: var(--surface-2);
    color: #fff;
    text-align: left;
    width: 82px;
    height: 120px;
    box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--brand);
    border: 0;
    border-radius: 10px;
    flex: none;
    padding: 0;
    transition: transform .15s, box-shadow .15s;
    position: relative;
    overflow: hidden
}

.story-card.story-seen {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--muted) 22%, transparent)
}

.story-card:hover {
    transform: translateY(-1px)
}

.story-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 5px
}

.story-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.story-card:after {
    content: "";
    background: linear-gradient(#0000 45%, #000000bf);
    position: absolute;
    inset: 0
}

.story-sk {
    border-radius: 10px;
    width: 82px;
    height: 120px
}

.story-card.story-loading {
    background: linear-gradient(90deg, var(--sk) 30%, var(--sk-hi) 50%, var(--sk) 70%) 0 0 / 300% 100%;
    animation: 1.4s ease-in-out infinite sk-shimmer
}

.story-card-title {
    z-index: 1;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    overflow: hidden
}

.story-backdrop {
    z-index: 60;
    background: #000000d1;
    justify-content: center;
    align-items: center;
    gap: 20px;
    animation: .2s ease-out scrim-in;
    display: flex;
    position: fixed;
    inset: 0
}

.story-viewer {
    aspect-ratio: 9/16;
    color: #fff;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    background: #111;
    border-radius: 14px;
    outline: none;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100vw;
    height: min(92vh, 860px);
    display: flex;
    position: relative;
    overflow: hidden
}

.story-image {
    object-fit: cover;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.story-top,
.story-bottom {
    z-index: 1;
    padding: 12px 14px;
    position: relative
}

.story-top {
    background: linear-gradient(#0000008c, #0000);
    padding-bottom: 28px
}

.story-bottom {
    background: linear-gradient(#0000, #0000008c);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 28px;
    display: flex
}

.story-bars {
    gap: 4px;
    display: flex
}

.story-bar {
    background: #ffffff59;
    border-radius: 2px;
    flex: 1;
    height: 3px;
    overflow: hidden
}

.story-bar-fill {
    transform-origin: 0;
    background: #fff;
    height: 100%;
    display: block
}

.story-head {
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    display: flex
}

.story-icon {
    background: var(--brand);
    border: 2px solid #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 700;
    display: grid;
    overflow: hidden
}

.story-icon img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.story-names {
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    display: flex
}

.story-names strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden
}

.story-names small {
    opacity: .85;
    font-size: 12px
}

.story-close {
    color: #fff;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    display: grid
}

.story-close:hover {
    background: #ffffff26
}

.story-text {
    overflow-wrap: anywhere;
    text-shadow: 0 1px 8px #00000059;
    margin: 18px 0 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15
}

.story-cta {
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    text-transform: uppercase;
    border: 0;
    border-radius: 8px;
    min-width: 140px;
    max-width: 100%;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600
}

.story-cta:hover {
    background: var(--brand-hover)
}

.story-cta.is-added {
    color: var(--brand);
    background: #fff
}

.story-cta:disabled {
    opacity: .6;
    cursor: default
}

.story-legal {
    opacity: .8;
    font-size: 11px
}

.story-nav {
    cursor: pointer;
    color: #111;
    background: #ffffffe6;
    border: 0;
    border-radius: 50%;
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1
}

.story-held .story-top,
.story-held .story-bottom {
    opacity: 0;
    transition: opacity .2s
}

@media (width<=860px) {

    .story-card,
    .story-sk {
        width: 72px;
        height: 104px
    }

    .story-card-title {
        font-size: 11px
    }

    .story-backdrop {
        background: #000;
        gap: 0
    }

    .story-viewer {
        border-radius: 0;
        width: min(100vw, 56.25dvh);
        height: auto
    }

    .story-top {
        padding-top: max(12px, env(safe-area-inset-top))
    }

    .story-bottom {
        padding-bottom: max(14px, env(safe-area-inset-bottom))
    }

    .story-nav {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .story-card,
    .story-backdrop {
        transition: none;
        animation: none
    }
}

.shortcuts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    display: grid
}

.shortcut {
    background: var(--surface);
    min-width: 0;
    height: 64px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    display: flex
}

.shortcut:hover {
    background: var(--hover)
}

.shortcut-pic {
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    display: grid
}

.shortcut-pic svg {
    width: 36px;
    height: 36px
}

.shortcut-live {
    color: var(--live)
}

.shortcut-live svg {
    width: 28px;
    height: 28px
}

.shortcut-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    font-size: 12px;
    font-weight: 500
}

.boosts-block {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 16px 12px 12px;
    position: relative
}

.boosts-block-head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 0 4px 12px;
    display: flex
}

.boosts-block-title {
    text-transform: uppercase;
    margin: 0;
    font: italic 700 30px/1 Barlow Condensed, sans-serif
}

.boosts-block-text {
    margin: 4px 0 0;
    font-size: 14px
}

.boosts-block-bolt svg {
    width: 40px;
    height: 50px
}

.boosts-block .highlights-track {
    grid-auto-columns: calc(50% - 4px)
}

.boosts-block-side {
    align-items: center;
    gap: 12px;
    display: flex
}

.row-arrows {
    gap: 6px;
    display: inline-flex
}

.row-arrow {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 32px;
    height: 32px;
    color: var(--text);
    cursor: pointer;
    border-radius: 50%;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    display: grid
}

.row-arrow:hover {
    background: var(--hover)
}

@media (width<=960px) {
    .row-arrows {
        display: none
    }

    .shortcuts {
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 12px;
        display: flex;
        overflow-x: auto
    }

    .shortcut {
        flex: none;
        height: 52px;
        font-size: 14px
    }

    .boosts-block .highlights-track {
        grid-auto-columns: calc(100% - 28px)
    }
}

.live-spot {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.live-spot-title {
    align-items: center;
    gap: 8px;
    display: flex
}

.live-spot-icon {
    color: var(--live);
    display: inline-grid
}

.live-spot-icon svg {
    width: 22px;
    height: 22px
}

.live-spot-more {
    color: var(--focus);
    font-size: 14px;
    font-weight: 600
}

.live-spot-more:hover {
    text-decoration: underline
}

.live-spot-sports {
    scrollbar-width: none;
    gap: 8px;
    display: flex;
    overflow-x: auto
}

.live-spot-sport {
    background: var(--surface-3);
    width: 40px;
    height: 40px;
    color: var(--text);
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid
}

.live-spot-sport:hover {
    background: var(--surface-4)
}

.live-spot-sport.is-active {
    background: var(--brand);
    color: #fff
}

.live-spot-cards {
    position: relative
}

.live-spot-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: calc(50% - 5px);
    grid-auto-flow: column;
    gap: 10px;
    display: grid;
    overflow-x: auto
}

.live-spot-track::-webkit-scrollbar {
    display: none
}

.live-spot-side {
    align-items: center;
    gap: 14px;
    display: flex
}

.live-card {
    scroll-snap-align: start;
    background: var(--surface);
    border-radius: 12px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    display: flex
}

.live-card-league {
    min-width: 0;
    color: var(--muted);
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: flex
}

.live-card-league span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.live-card-board {
    border: 1px solid var(--line);
    border-radius: 10px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "home center away";
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    display: grid
}

.live-card-board:hover {
    border-color: var(--surface-4)
}

.live-card-team {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex
}

.live-card-home {
    grid-area: home
}

.live-card-away {
    grid-area: away
}

.live-card-name {
    text-transform: uppercase;
    overflow-wrap: anywhere;
    font: 700 15px/1.1 Barlow Condensed, sans-serif
}

.live-card-center {
    flex-direction: column;
    grid-area: center;
    align-items: center;
    gap: 6px;
    display: flex
}

.live-card-clock {
    color: var(--live);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600
}

.live-card-score {
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border-radius: 8px;
    padding: 4px 10px;
    font: 700 26px/1 Barlow Condensed, sans-serif
}

.live-card-market {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.live-card-market-name {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600
}

.live-card-cells {
    gap: 6px;
    display: grid
}

@media (width<=960px) {
    .live-spot-track {
        grid-auto-columns: calc(100% - 28px)
    }
}

.top-games,
.league-tiles {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.top-games-title {
    align-items: center;
    gap: 8px;
    display: flex
}

.top-games-icon {
    color: var(--focus);
    display: inline-grid
}

.top-games-track,
.league-tiles-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: calc(50% - 5px);
    grid-auto-flow: column;
    gap: 10px;
    display: grid;
    overflow-x: auto
}

.top-games-track::-webkit-scrollbar {
    display: none
}

.league-tiles-track::-webkit-scrollbar {
    display: none
}

.game-card {
    scroll-snap-align: start;
    background: var(--surface);
    border-radius: 12px;
    flex-direction: column;
    min-width: 0;
    display: flex
}

.game-card-link {
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 10px;
    display: flex
}

.game-card-link:hover .game-card-team span {
    text-decoration: underline
}

.game-card-league {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    overflow: hidden
}

.game-card-when {
    color: var(--muted);
    font-size: 12px
}

.game-card-team {
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    display: flex
}

.game-card-team span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.game-card-odds {
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    display: flex
}

.game-card-cells {
    flex: 1;
    gap: 6px;
    display: grid
}

.game-card-more {
    color: var(--muted);
    flex: none;
    font-size: 11px;
    font-weight: 600
}

.game-card-more:hover {
    color: var(--text)
}

.league-tiles-track {
    grid-auto-columns: calc(25% - 7.5px)
}

.league-tile {
    scroll-snap-align: start;
    color: #fff;
    background: radial-gradient(circle at 115% 120%, #ffffff38 0 34%, transparent 35%), linear-gradient(110deg, var(--league), color-mix(in srgb, var(--league) 60%, #000));
    border-radius: 10px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    height: 96px;
    padding: 10px 12px;
    display: flex;
    position: relative;
    overflow: hidden
}

.league-tile:hover {
    filter: brightness(1.08)
}

.league-tile-flag {
    color: #101416;
    background: #fff;
    border-radius: 50%;
    place-items: center;
    width: 30px;
    height: 30px;
    display: grid;
    position: absolute;
    top: 10px;
    left: 12px;
    overflow: hidden
}

.league-tile-flag img {
    object-fit: cover;
    width: 30px;
    height: 30px
}

.league-tile-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden
}

.league-tile-count {
    opacity: .85;
    font-size: 11px
}

.league-tile-live {
    background: #0000004d;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: 12px;
    right: 10px
}

@media (width<=960px) {
    .top-games-track {
        grid-auto-columns: calc(100% - 28px)
    }

    .league-tiles-track {
        grid-auto-columns: 150px
    }
}

.slip-dock {
    flex-direction: column;
    display: flex
}

.slip-dock-slot:not(:empty)+.slip-dock-empty {
    display: none
}

.slip-dock-empty {
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 18px;
    font-size: 13px;
    display: flex
}

.slip-dock-empty svg {
    color: var(--surface-4);
    margin-bottom: 4px
}

.slip-dock-empty strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600
}

.slip.slip-docked {
    width: auto;
    max-width: none;
    max-height: calc(100vh - 140px);
    box-shadow: none;
    border-radius: 10px;
    animation: none;
    position: static
}

.slip-docked .slip-bar {
    cursor: default
}

.footer-cols {
    background: var(--surface-3);
    border-radius: 16px 16px 0 0;
    grid-column: 1/-1;
    margin-top: 12px;
    padding: 26px 24px 18px
}

.footer-cols-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
    display: grid
}

.footer-cols-title {
    border-bottom: 1px solid var(--surface-4);
    text-transform: uppercase;
    margin: 0 0 12px;
    padding-bottom: 10px;
    font: 700 19px/1 Barlow Condensed, sans-serif
}

.footer-cols-links {
    color: var(--muted);
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
    display: flex
}

.footer-cols-links a:hover,
.footer-cols-link:hover {
    color: var(--text)
}

.footer-cols-link {
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

.footer-cols-text {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    line-height: 1.45
}

.footer-cols-text strong {
    color: var(--text);
    font-weight: 600
}

.footer-cols-bottom {
    border-top: 1px solid var(--surface-4);
    color: var(--muted);
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 14px;
    font-size: 12px;
    display: flex
}

@media (width<=960px) {
    .footer-cols {
        margin: 8px -12px 0;
        padding: 22px 16px 16px
    }

    .footer-cols-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.guest-bar {
    display: none
}

@media (width<=700px) {
    .guest-bar {
        left: 0;
        right: 0;
        bottom: var(--bottom-nav-h);
        z-index: 34;
        background: var(--surface);
        border-top: 1px solid var(--line);
        gap: 8px;
        padding: 10px 12px;
        display: flex;
        position: fixed
    }

    .guest-bar button {
        height: 44px;
        font: inherit;
        cursor: pointer;
        border: 0;
        border-radius: 999px;
        flex: 1;
        font-size: 15px;
        font-weight: 600
    }

    .guest-bar-signup {
        background: var(--surface-3);
        color: var(--text)
    }

    .guest-bar-signin {
        background: var(--brand);
        color: #fff
    }

    .has-guest-bar .content {
        padding-bottom: calc(var(--bottom-nav-h) + 88px)
    }
}

.nav-live-count {
    display: none
}

.list-tabs {
    margin: -4px 0 14px
}

.list-tabs .info-tab {
    align-items: center;
    gap: 6px;
    text-decoration: none;
    display: inline-flex
}

.list-tab-count {
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600
}

.home-title-icon,
.carousel-dots {
    display: none
}

.support-layer {
    --support-soft: 0 3px 14px -6px color-mix(in srgb, var(--shadow) 55%, transparent);
    --support-lift: 0 8px 28px -10px color-mix(in srgb, var(--shadow) 70%, transparent);
    z-index: 45;
    pointer-events: none;
    position: fixed;
    inset: 0
}

.support-scrim {
    display: none
}

.support-panel {
    pointer-events: auto;
    background: var(--surface-2);
    width: 380px;
    height: min(600px, 100dvh - 96px);
    color: var(--text);
    box-shadow: 0 12px 40px var(--shadow), 0 0 0 1px var(--line);
    border-radius: 14px 14px 0 0;
    flex-direction: column;
    animation: .2s ease-out support-in;
    display: flex;
    position: fixed;
    bottom: 0;
    right: 24px;
    overflow: hidden
}

@keyframes support-in {
    0% {
        opacity: 0;
        transform: translateY(16px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .support-panel {
        animation: none
    }
}

.support-head {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    flex: none;
    gap: 6px;
    padding: 10px 6px 10px 14px;
    display: flex
}

.support-handle {
    background: var(--surface-4);
    border-radius: 2px;
    align-self: center;
    width: 36px;
    height: 4px;
    display: none
}

.support-head-row {
    align-items: center;
    gap: 10px;
    display: flex
}

.support-avatar {
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-weight: 600;
    display: grid
}

.support-head-text {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.support-head-text strong {
    font-size: 15px;
    font-weight: 600
}

.support-head-text span {
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden
}

.support-hours {
    color: var(--text);
    background: color-mix(in srgb, #f5a524 14%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, #f5a524 30%, var(--line));
    flex: none;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    font-size: 12.5px;
    line-height: 1.4;
    display: flex
}

.support-hours-icon {
    color: #c27c0e;
    flex: none;
    margin-top: 1px;
    display: flex
}

:root[data-theme=dark] .support-hours-icon {
    color: #f5b544
}

.support-close {
    width: 40px;
    height: 40px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    display: grid
}

.support-close:hover {
    background: var(--surface-2);
    color: var(--text)
}

.support-body {
    isolation: isolate;
    background: var(--surface-2);
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative
}

.support-body:before,
.support-body:after {
    content: "";
    z-index: -1;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.support-body:before {
    background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%)
}

.support-body:after {
    background: var(--support-pattern, color-mix(in srgb, var(--brand) 8%, transparent));
    -webkit-mask: var(--support-tile) 0 0 / 180px 180px repeat;
    -webkit-mask: var(--support-tile) 0 0 / 180px 180px repeat;
    mask: var(--support-tile) 0 0 / 180px 180px repeat
}

:root[data-theme=dark] .support-body {
    --support-pattern: #ffffff0b
}

:root {
    --support-tile: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(14 16) rotate(-12 12 12)'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.6A8 8 0 1 1 21 12Z'/></g><g transform='translate(98 8) rotate(10 12 12)'><circle cx='12' cy='12' r='9'/><path d='M12 7.5l4 2.9-1.5 4.6h-5L8 10.4z'/></g><g transform='translate(142 72) rotate(-8 12 12)'><path d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z'/></g><g transform='translate(54 80) rotate(14 12 12)'><path d='M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z'/></g><g transform='translate(16 128) rotate(-6 12 12)'><circle cx='12' cy='12' r='8'/><path d='M12 7.5v9M14.5 10c0-.9-1.1-1.4-2.5-1.4s-2.5.6-2.5 1.5 1 1.3 2.5 1.6 2.5.7 2.5 1.6-1.1 1.5-2.5 1.5-2.5-.5-2.5-1.4'/></g><g transform='translate(104 128) rotate(8 12 12)'><path d='M13 2 4 14h7l-1 8 9-12h-7z'/></g><circle cx='82' cy='52' r='1.6'/><circle cx='160' cy='30' r='1.6'/><circle cx='70' cy='160' r='1.6'/><circle cx='128' cy='104' r='1.6'/></svg>")
}

.support-list {
    overscroll-behavior: contain;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    min-height: 0;
    padding: 14px 12px;
    display: flex;
    overflow-y: auto
}

.support-list>* {
    flex-shrink: 0
}

.support-item {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.support-item.is-joined {
    margin-top: -9px
}

.support-day {
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--support-soft);
    border-radius: 999px;
    align-self: center;
    padding: 3px 12px;
    font-size: 12px
}

.support-row {
    align-items: flex-end;
    gap: 8px;
    display: flex
}

.support-row.is-mine {
    justify-content: flex-end
}

.support-team-avatar {
    background: color-mix(in srgb, var(--brand) 16%, var(--surface));
    width: 28px;
    height: 28px;
    color: var(--brand);
    border-radius: 50%;
    flex: none;
    place-items: center;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 600;
    display: grid
}

.support-team-avatar.is-blank {
    visibility: hidden;
    height: 0;
    margin-bottom: 0
}

.support-msg {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 78%;
    display: flex
}

.support-msg.is-mine {
    align-items: flex-end
}

.support-from {
    color: var(--muted);
    padding-left: 4px;
    font-size: 12px;
    font-weight: 500
}

.support-bubble {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: var(--support-soft);
    border-radius: 18px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 1.42
}

.is-mine .support-bubble {
    background: var(--brand-hover);
    color: #fff
}

.is-team .support-bubble {
    background: var(--surface);
    color: var(--text)
}

.support-msg.is-mine.is-last .support-bubble:last-of-type {
    border-bottom-right-radius: 6px
}

.support-msg.is-team.is-last .support-bubble:last-of-type {
    border-bottom-left-radius: 6px
}

.support-time {
    color: var(--muted);
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    font-size: 11px;
    display: inline-flex
}

.support-seen {
    color: var(--info-text);
    display: inline-flex
}

.support-image {
    background: var(--surface);
    box-shadow: var(--support-soft);
    border-radius: 14px;
    display: block;
    overflow: hidden
}

.support-image img {
    object-fit: cover;
    max-width: 220px;
    max-height: 260px;
    display: block
}

.support-file {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--support-soft);
    border-radius: 14px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    text-decoration: none;
    display: flex
}

.support-file.is-gone {
    color: var(--muted);
    font-style: italic
}

.support-file-kind {
    background: var(--error-bg);
    width: 32px;
    height: 38px;
    color: var(--error-text);
    border-radius: 6px;
    flex: none;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    display: grid
}

.support-file-text {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.support-file-text>span:first-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.support-file-size {
    color: var(--muted);
    font-size: 12px
}

.support-older {
    min-height: 20px;
    color: var(--muted);
    align-self: center;
    font-size: 12px
}

.support-resolved {
    text-align: center;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-radius: 999px;
    align-self: center;
    margin: 4px 0 0;
    padding: 4px 12px;
    font-size: 12px
}

.support-loading {
    flex: 1
}

.support-empty {
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    display: flex
}

.support-empty-icon {
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
    width: 56px;
    height: 56px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.support-empty-title {
    font-size: 15px;
    font-weight: 600
}

.support-empty-text {
    max-width: 280px;
    color: var(--muted);
    font-size: 13px
}

.support-empty-button {
    margin-top: 6px
}

.support-visitor {
    background: var(--surface);
    min-height: 0;
    box-shadow: var(--support-soft);
    border-radius: 16px;
    flex-direction: column;
    flex: 0 auto;
    align-self: stretch;
    gap: 14px;
    margin: 12px;
    padding: 16px;
    display: flex;
    overflow-y: auto
}

.support-visitor-head {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.support-visitor-title {
    font-size: 17px;
    font-weight: 600
}

.support-visitor-text,
.support-visitor-note {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.support-link {
    color: var(--brand);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 500
}

.support-composer {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    flex-direction: column;
    flex: none;
    gap: 8px;
    display: flex
}

.support-about {
    background: var(--surface-2);
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 8px 10px;
    display: flex
}

.support-about-icon {
    background: var(--open-bg);
    width: 30px;
    height: 30px;
    color: var(--open-text);
    border-radius: 8px;
    flex: none;
    place-items: center;
    display: grid
}

.support-about-text {
    min-width: 0;
    color: var(--muted);
    flex-direction: column;
    flex: 1;
    font-size: 12px;
    display: flex
}

.support-about-text strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden
}

.support-about-x,
.support-pending-x {
    width: 32px;
    height: 32px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex: none;
    place-items: center;
    display: grid
}

.support-about-x svg,
.support-pending-x svg {
    width: 16px;
    height: 16px
}

.support-pending {
    background: var(--surface-2);
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 8px;
    display: flex
}

.support-pending img {
    object-fit: cover;
    border-radius: 8px;
    flex: none;
    width: 44px;
    height: 44px
}

.support-pending-pdf {
    background: var(--error-bg);
    width: 36px;
    height: 44px;
    color: var(--error-text);
    border-radius: 6px;
    flex: none;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    display: grid
}

.support-pending-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden
}

.support-error {
    color: var(--error-text);
    margin: 0;
    padding: 0 6px;
    font-size: 12px
}

.support-box {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--support-lift);
    cursor: text;
    border-radius: 18px;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 4px 4px;
    transition: border-color .15s, box-shadow .15s;
    display: flex
}

.support-box:focus-within {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: var(--support-lift), 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent)
}

.support-field {
    min-width: 0;
    display: flex
}

.support-field textarea {
    resize: none;
    width: 100%;
    min-height: 44px;
    max-height: 140px;
    color: var(--text);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: none;
    padding: 11px 12px 4px;
    font-size: 16px;
    line-height: 1.35
}

.support-field textarea::placeholder {
    color: var(--muted);
    opacity: .8
}

.support-tools {
    cursor: default;
    align-items: center;
    gap: 2px;
    display: flex
}

.support-icon-button {
    width: 40px;
    height: 40px;
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 10px;
    flex: none;
    place-items: center;
    display: grid
}

.support-icon-button:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text)
}

.support-send {
    width: 40px;
    height: 40px;
    color: var(--brand);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 10px;
    flex: none;
    place-items: center;
    margin-left: auto;
    transition: color .15s, transform .15s;
    display: grid
}

.support-send:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand) 10%, transparent)
}

.support-send:active:not(:disabled) {
    transform: translate(2px)
}

.support-send:disabled {
    color: var(--surface-4);
    cursor: default
}

.support-sr {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.support-dot {
    background: var(--live);
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: auto;
    display: inline-block
}

.wallet-avatar-button {
    position: relative
}

.wallet-avatar-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 2px var(--brand);
    margin: 0;
    position: absolute;
    top: 0;
    right: 0
}

@media (width<=860px) {
    .support-scrim {
        pointer-events: auto;
        background: var(--scrim);
        -webkit-backdrop-filter: var(--scrim-blur);
        backdrop-filter: var(--scrim-blur);
        display: block;
        position: absolute;
        inset: 0
    }

    .support-panel {
        left: 0;
        right: 0;
        top: max(40px, env(safe-area-inset-top));
        width: auto;
        height: auto;
        box-shadow: none;
        border-radius: 16px 16px 0 0
    }

    .support-handle {
        display: block
    }

    .support-head {
        padding-top: 8px
    }
}

[data-layout=chapado] {
    --bar-start: var(--brand);
    --bar-end: color-mix(in srgb, var(--brand) 82%, #0e0e0e);
    --bar-text: #fff;
    --bar-accent: color-mix(in srgb, var(--brand) 55%, #fff);
    --radius-card: 8px;
    --radius-cell: 5px;
    --tag-corner: calc(var(--radius-card) - 1px);
    --home-glow: var(--bar-end);
    --accent: color-mix(in srgb, var(--brand) 80%, #000);
    --bg: #ececec;
    --surface: #fff;
    --surface-2: #f1f1f1;
    --surface-3: #e4e4e4;
    --surface-4: #d2d2d2;
    --hover: #f6f6f6;
    --line: #f1f1f1;
    --field-line: #e4e4e4;
    --odd-border: transparent;
    --text: #141414;
    --muted: #5c5c5c;
    --price: #3d6e55;
    --best: #3d6e55;
    --chosen: #fff;
    --chosen-shadow: none;
    --focus: var(--accent);
    --pill-bg: var(--surface-4);
    --pill-text: var(--text);
    --cell-selected: var(--brand);
    --cell-selected-text: #fff;
    --selected-wash-rgb: 255 255 255;
    --sb-field: #dcdcdc;
    --sb-glass: #f4f4f499;
    --sb-divider: #14141414;
    --sb-shadow: #1414141a;
    --hl-bg: #f4f4f4;
    --hl-bolt: #1414140a;
    --hl-text: #141414;
    --hl-muted: #5c5c5c;
    --hl-border: #dedede;
    --hl-hover: #c8c8c8;
    --hl-cell-hover: #e4e4e4;
    --shadow: #1414141f;
    --sport-basketball: #e86a12;
    --sport-basketball-2: #c24a00;
    --sport-tennis: #7fa800;
    --sport-tennis-2: #5f8500;
    --sport-volleyball: #d99a00;
    --sport-volleyball-2: #b57c00;
    --sport-ice-hockey: #2e9bff;
    --sport-ice-hockey-2: #0f6fd6;
    --sport-handball: #f06a2c;
    --sport-handball-2: #cf3f12;
    --sport-mma: #e8372c;
    --sport-mma-2: #bd1616
}

[data-layout=chapado][data-theme=dark] {
    --bar-end: color-mix(in srgb, var(--brand) 55%, #0e0e0e);
    --accent: color-mix(in srgb, var(--brand) 55%, #fff);
    --bg: #121415;
    --surface: #1f2224;
    --surface-2: #2c3033;
    --surface-3: #33383b;
    --surface-4: #444b4f;
    --hover: #272b2d;
    --line: #2a2e31;
    --field-line: #363b3f;
    --odd-border: transparent;
    --text: #fff;
    --muted: #aeb4b8;
    --price: #ffdf1b;
    --best: #ffdf1b;
    --chosen: #33383b;
    --chosen-shadow: none;
    --focus: var(--accent);
    --pill-bg: var(--text);
    --pill-text: var(--bg);
    --cell-selected: var(--pill-bg);
    --cell-selected-text: var(--pill-text);
    --selected-wash-rgb: 0 0 0;
    --sb-field: #181b1c;
    --sb-line: #ffffff14;
    --sb-glass: #1f2224bf;
    --sb-badge: #33383b;
    --sb-divider: #ffffff14;
    --hl-bg: #1f2224;
    --hl-bolt: #ffffff08;
    --hl-border: #2a2e31;
    --hl-hover: #444b4f;
    --toast-bg: #1f2224;
    --sport-basketball: #ff7a1f;
    --sport-basketball-2: #db5700;
    --sport-tennis: #d6f55f;
    --sport-tennis-2: #b4e600;
    --sport-volleyball: #ffd84a;
    --sport-volleyball-2: #f5b400;
    --sport-ice-hockey: #8fdcff;
    --sport-ice-hockey-2: #2e9bff;
    --sport-handball: #ff8a4c;
    --sport-handball-2: #e84a1a;
    --sport-mma: #ff5a4f;
    --sport-mma-2: #d81e1e
}

[data-layout=chapado] .topbar {
    background: linear-gradient(180deg, var(--bar-start), var(--bar-end));
    box-shadow: none
}

[data-layout=chapado] .brand {
    color: var(--bar-text)
}

[data-layout=chapado] .topnav-link {
    text-transform: none;
    color: var(--bar-text);
    border-bottom-width: 2px;
    font-size: 14px;
    font-weight: 600
}

[data-layout=chapado] .topnav-link:hover {
    color: var(--bar-accent)
}

[data-layout=chapado] .topnav-active {
    color: var(--bar-accent);
    border-bottom-color: var(--bar-accent)
}

[data-layout=chapado] :is(.home-title, .page-title, .side-title, .dialog-title, .top-choices-title) {
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25
}

[data-layout=chapado] :is(.highlight-team, .multiple-name) {
    text-transform: none;
    font-family: inherit;
    font-style: normal;
    font-weight: 600
}

[data-layout=chapado] .highlight-team {
    font-size: 15px
}

[data-layout=chapado] :is(.league, .market, .aside-card, .match-card, .action-row, .scoreboard, .highlight, .multiple, .bet-card, .tracker) {
    border-radius: var(--radius-card);
    box-shadow: none
}

[data-layout=chapado] :is(.chip, .sport-tab, .market-tab) {
    border-radius: 999px
}

@media (width<=860px) {
    [data-layout=chapado] .sport-bar .sport-tab {
        border-radius: var(--radius-card)
    }
}

[data-layout=chapado] :is(.chip-active, .sport-tab-active, .market-tab-active),
[data-layout=chapado] :is(.chip-active, .sport-tab-active, .market-tab-active):hover {
    background: var(--pill-bg);
    color: var(--pill-text);
    box-shadow: none;
    font-weight: 600
}

[data-layout=chapado] :is(.chip-active, .sport-tab-active) :is(.chip-count, svg) {
    color: inherit
}

[data-layout=chapado] :is(.chip-active, .sport-tab-active),
[data-layout=chapado] :is(.chip-active, .sport-tab-active):hover {
    background: var(--surface);
    color: var(--text)
}

[data-layout=chapado] .odd {
    border-radius: var(--radius-cell);
    border: 0;
    min-height: 44px
}

[data-layout=chapado] .odd-label-text {
    color: var(--muted)
}

[data-layout=chapado] .odd-price {
    font-size: 14px;
    font-weight: 600
}

[data-layout=chapado] .odd-selected,
[data-layout=chapado] .odd-selected:hover:not([aria-disabled=true]) {
    background: var(--cell-selected)
}

[data-layout=chapado] .odd-selected :is(.odd-label-text, .odd-price) {
    color: var(--cell-selected-text) !important
}

[data-layout=chapado] .odd-selected .odd-label-text {
    font-weight: 600
}

[data-layout=chapado] .odd-selected .so-price s {
    color: color-mix(in srgb, var(--cell-selected-text) 60%, transparent)
}

[data-layout=chapado] .odd-selected .odd-wash {
    --move-rgb: var(--selected-wash-rgb)
}

[data-layout=chapado] :is(.row-odds, .highlight-odds) {
    gap: 2px
}

[data-layout=chapado] .highlight :is(.highlight-odds .odd, .so-odd-compact) {
    min-height: 32px
}

[data-layout=chapado] .highlight {
    background: var(--surface);
    border-color: var(--line)
}

[data-layout=chapado] .highlight:before {
    display: none
}

[data-layout=chapado] .highlight:hover {
    border-color: var(--surface-4)
}

[data-layout=chapado] .boost-highlight {
    background: radial-gradient(ellipse 70% 90% at 0 0, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 8%, transparent) 45%, transparent), var(--surface)
}

[data-layout=chapado] .highlight :is(.odd, .boost-add, .so-odd-compact) {
    --surface-2: inherit;
    --surface-3: inherit;
    --odd-border: inherit;
    --text: inherit;
    --muted: inherit;
    --price: inherit;
    --up-text: inherit;
    --down-text: inherit;
    --up-rgb: inherit;
    --down-rgb: inherit;
    background: var(--surface-2)
}

[data-layout=chapado] .highlight :is(.odd, .boost-add, .so-odd-compact):hover:not([aria-disabled=true]) {
    background: var(--surface-3)
}

[data-layout=chapado] .highlight :is(.odd-selected, .odd-selected:hover:not([aria-disabled=true])) {
    background: var(--cell-selected)
}

[data-layout=chapado] .highlight-when {
    font-weight: 400
}

[data-layout=chapado] .highlight-badge {
    font-weight: 600
}

[data-layout=chapado] .highlight-team strong {
    font-size: 17px;
    font-weight: 600
}

[data-layout=chapado] .boost-tag {
    border-radius: var(--radius-cell);
    letter-spacing: 0;
    text-transform: none;
    background: #7c3aed;
    padding: 3px 7px 3px 5px;
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2
}

[data-layout=chapado] .boost-tag-super {
    background: #a21caf
}

[data-layout=chapado] .boost-tag-match {
    background: #e11d48
}

[data-layout=chapado] .boost-tag-odds {
    background: #c2410c
}

[data-layout=chapado] .choice-tag {
    border-radius: var(--radius-cell);
    letter-spacing: 0;
    text-transform: none;
    padding: 3px 7px;
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2
}

[data-layout=chapado] .highlight.boost-highlight .boost-match {
    text-transform: none;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25
}

[data-layout=chapado] .boost-legs li:before {
    border-color: var(--accent);
    opacity: 1
}

[data-layout=chapado] .boost-legs strong {
    font-weight: 500
}

[data-layout=chapado] .boost-highlight .boost-add {
    border-radius: var(--radius-cell);
    border: 0
}

[data-layout=chapado] .boost-add strong {
    letter-spacing: 0;
    font-weight: 600
}

[data-layout=chapado] .highlight .boost-add.is-added,
[data-layout=chapado] .highlight .boost-add.is-added:hover {
    background: var(--cell-selected)
}

[data-layout=chapado] .highlight .boost-add.is-added strong {
    color: var(--cell-selected-text)
}

[data-layout=chapado] .highlight .boost-add.is-added s {
    color: color-mix(in srgb, var(--cell-selected-text) 60%, transparent)
}

[data-layout=chapado] :is(.team, .action-teams .team, .match-card .team, .t-teams) {
    font-size: 13px
}

[data-layout=chapado] :is(.action-when strong, .when-top, .t-when strong) {
    font-size: 12px;
    font-weight: 500
}

[data-layout=chapado] :is(.action-when, .when-sub, .t-when),
[data-layout=chapado] .match-card :is(.when-top, .when-sub) {
    font-size: 11px
}

@media (width<=960px) {
    [data-layout=chapado] :is(.action-when strong, .when-top, .t-when strong) {
        font-size: 11px
    }
}

[data-layout=chapado] .match-card,
[data-layout=chapado] .match-card.has-ca-boost {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "teams odds" "when odds";
    align-items: center;
    gap: 4px 10px;
    display: grid
}

[data-layout=chapado] .match-card .when {
    grid-area: when
}

[data-layout=chapado] .match-card .teams {
    grid-area: teams
}

[data-layout=chapado] .match-card .row-odds {
    grid-area: odds;
    grid-template-columns: repeat(3, 44px);
    gap: 2px
}

[data-layout=chapado] .match-card .row-odds-2 {
    grid-template-columns: repeat(2, 67px)
}

[data-layout=chapado] .match-card .row-odds-none {
    width: 136px
}

[data-layout=chapado] .match-card .odd {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 48px;
    padding: 4px 2px
}

[data-layout=chapado] .match-card .odd-label {
    align-items: center
}

[data-layout=chapado] .match-card .odd-label-text {
    font-size: 10px
}

[data-layout=chapado] .action-row,
[data-layout=chapado] .action-row.is-live {
    grid-template-areas: "league league league" "when home odds" "when away odds";
    row-gap: 3px
}

[data-layout=chapado] .action-row .action-teams {
    display: contents
}

[data-layout=chapado] .action-row .action-league {
    grid-area: league;
    margin-bottom: 5px
}

[data-layout=chapado] .action-row .action-teams .team:first-child {
    grid-area: home;
    align-self: end
}

[data-layout=chapado] .action-row .action-teams .team:nth-child(2) {
    grid-area: away;
    align-self: start
}

[data-layout=chapado] .action-row .action-when {
    grid-area: when
}

[data-layout=chapado] .action-row .row-odds {
    grid-area: odds
}

@media (width<=960px) {

    [data-layout=chapado] .action-row,
    [data-layout=chapado] .action-row.is-live {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "league league" "home odds" "away odds" "when odds";
        gap: 3px 10px
    }

    [data-layout=chapado] .action-row .action-when,
    [data-layout=chapado] .action-row.is-live .action-when {
        flex-direction: row;
        grid-area: when;
        justify-content: flex-start;
        align-items: baseline;
        gap: 6px;
        margin: 0
    }

    [data-layout=chapado] .action-row .row-odds {
        grid-area: odds/auto;
        grid-template-columns: repeat(3, 54px)
    }

    [data-layout=chapado] .action-row .row-odds-2 {
        grid-template-columns: repeat(2, 82px)
    }

    [data-layout=chapado] .action-row .row-odds-none {
        width: 166px
    }

    [data-layout=chapado] .action-row .odd {
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-height: 52px;
        padding: 4px 2px
    }

    [data-layout=chapado] .action-row .odd-label {
        align-items: center
    }

    [data-layout=chapado] .action-row .odd-label-text {
        font-size: 10px
    }
}

[data-layout=chapado] .home-quick {
    display: none
}

@media (width<=960px) {
    [data-layout=chapado] .leagues-title {
        display: none
    }

    [data-layout=chapado] .leagues-scroller {
        flex-direction: row;
        align-items: stretch;
        gap: 6px;
        padding-bottom: 0
    }

    [data-layout=chapado] .leagues-scroller:after {
        content: "";
        flex: none;
        order: 99;
        width: 8px
    }

    [data-layout=chapado] .leagues-row {
        display: contents
    }

    [data-layout=chapado] .leagues-row:after {
        display: none
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:first-child {
        order: 1
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:first-child {
        order: 2
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:nth-child(2) {
        order: 3
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:nth-child(2) {
        order: 4
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:nth-child(3) {
        order: 5
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:nth-child(3) {
        order: 6
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:nth-child(4) {
        order: 7
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:nth-child(4) {
        order: 8
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:nth-child(5) {
        order: 9
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:nth-child(5) {
        order: 10
    }

    [data-layout=chapado] .leagues-row:first-child .pop-league:nth-child(6) {
        order: 11
    }

    [data-layout=chapado] .leagues-row:last-child .pop-league:nth-child(6) {
        order: 12
    }

    [data-layout=chapado] .pop-league {
        border-radius: var(--radius-card);
        background: var(--surface);
        white-space: nowrap;
        text-align: left;
        border: 0;
        flex: none;
        grid-template-columns: 30px auto;
        grid-template-areas: "logo name" "logo count";
        align-items: center;
        gap: 1px 9px;
        height: 46px;
        padding: 0 14px 0 8px;
        display: grid
    }

    [data-layout=chapado] .pop-league:active {
        background: var(--surface-3)
    }

    [data-layout=chapado] .pop-league-logo {
        background: var(--surface-3);
        width: 30px;
        height: 30px;
        color: var(--text);
        border: 0;
        border-radius: 50%;
        grid-area: logo;
        overflow: hidden
    }

    [data-layout=chapado] .pop-league-logo img {
        width: 30px;
        height: 30px
    }

    [data-layout=chapado] .pop-league-logo>svg {
        width: 18px;
        height: 18px
    }

    [data-layout=chapado] .pop-league-sport {
        display: none
    }

    [data-layout=chapado] .pop-league-name {
        grid-area: name;
        align-self: end;
        font-size: 13px;
        font-weight: 600;
        line-height: 16px
    }

    [data-layout=chapado] .pop-league-count {
        color: var(--muted);
        font-variant-numeric: tabular-nums;
        grid-area: count;
        align-self: start;
        font-size: 11px;
        line-height: 13px;
        display: block
    }

    [data-layout=chapado] .pop-league-live {
        box-shadow: 0 0 0 2px var(--surface);
        position: absolute;
        top: 7px;
        left: 30px
    }

    [data-layout=chapado] .odds-table-row,
    [data-layout=chapado] .odds-table-2way .odds-table-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "teams odds" "when odds";
        gap: 4px 10px;
        padding: 10px 14px
    }

    [data-layout=chapado] .odds-table-row .t-when {
        grid-area: when
    }

    [data-layout=chapado] .odds-table-row .t-teams {
        grid-area: teams;
        gap: 3px
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2 {
        grid-area: odds/auto;
        grid-template-columns: repeat(3, 54px);
        gap: 2px
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2.is-2 {
        grid-template-columns: repeat(2, 82px)
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2 .odd {
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-height: 52px;
        padding: 4px 2px
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2 .odd-label {
        align-items: center;
        display: flex
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2 .odd-label-text {
        font-size: 10px
    }

    [data-layout=chapado] .odds-table-row .t-cells.c-1x2 .odd-price {
        font-size: 14px
    }
}

@media (width<=860px) {

    [data-layout=chapado] .match-row,
    [data-layout=chapado] .match-row.is-live {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "teams odds" "when odds";
        gap: 4px 10px
    }

    [data-layout=chapado] .match-row .when,
    [data-layout=chapado] .match-row.is-live .when {
        flex-direction: row;
        grid-area: when;
        justify-content: flex-start;
        align-items: baseline;
        gap: 6px;
        margin: 0
    }

    [data-layout=chapado] .match-row .teams {
        grid-area: teams
    }

    [data-layout=chapado] .match-row .row-odds {
        grid-area: odds/auto;
        grid-template-columns: repeat(3, 54px)
    }

    [data-layout=chapado] .match-row .row-odds-2 {
        grid-template-columns: repeat(2, 82px)
    }

    [data-layout=chapado] .match-row .row-odds-none {
        width: 166px
    }

    [data-layout=chapado] .match-row .odd {
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-height: 52px;
        padding: 4px 2px
    }

    [data-layout=chapado] .match-row .odd-label {
        align-items: center
    }

    [data-layout=chapado] .match-row .odd-label-text {
        font-size: 10px
    }
}

[data-layout=chapado] .market-head {
    font-size: 15px;
    font-weight: 600
}

[data-layout=chapado] .market-grid {
    border-top: 1px solid var(--line);
    gap: 0;
    padding: 0
}

[data-layout=chapado] .market-grid .odd {
    height: 44px;
    box-shadow: 0 1px 0 var(--line), 1px 0 0 var(--line);
    background: 0 0;
    border-radius: 0;
    gap: 10px
}

[data-layout=chapado] .market-grid .odd-pickable:hover:not([aria-disabled=true]) {
    background: var(--hover)
}

[data-layout=chapado] .market-grid .odd-selected,
[data-layout=chapado] .market-grid .odd-selected:hover:not([aria-disabled=true]) {
    background: var(--cell-selected)
}

[data-layout=chapado] .show-all {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 0;
    width: 100%;
    height: 44px;
    margin: 0;
    font-size: 13px;
    font-weight: 600
}

[data-layout=chapado] .slip {
    border-radius: var(--radius-card) var(--radius-card) 0 0
}

[data-layout=chapado] .slip-bar {
    background: var(--surface-3);
    color: var(--text);
    padding-block: 11px
}

[data-layout=chapado] .slip-bar-odd {
    color: var(--price)
}

[data-layout=chapado] .slip-count {
    background: var(--cell-selected);
    color: var(--cell-selected-text)
}

[data-layout=chapado]:not([data-theme=dark]) .slip-bar {
    background: var(--brand);
    color: #fff
}

[data-layout=chapado]:not([data-theme=dark]) .slip-bar-odd {
    color: #fff
}

[data-layout=chapado]:not([data-theme=dark]) .slip-count {
    color: var(--brand);
    background: #fff
}

[data-layout=chapado] .slip-head {
    padding: 12px 14px 10px
}

[data-layout=chapado] :is(.slip-clear, .slip-prefs) {
    border-radius: var(--radius-cell)
}

[data-layout=chapado] .slip-tabs {
    border-radius: 999px;
    margin: 0 14px 12px;
    padding: 3px
}

[data-layout=chapado] .slip-tab {
    border-radius: 999px;
    font-weight: 600
}

[data-layout=chapado] .slip-tab-active {
    background: var(--pill-bg);
    color: var(--pill-text)
}

[data-layout=chapado]:not([data-theme=dark]) :is(.slip-tab-active, .suggest-range.is-active, .market-tab-active),
[data-layout=chapado]:not([data-theme=dark]) :is(.suggest-range.is-active, .market-tab-active):hover {
    background: var(--brand);
    color: #fff
}

[data-layout=chapado] .slip-list {
    gap: 0;
    padding: 0
}

[data-layout=chapado] .slip-pick {
    border: 0;
    border-top: 1px solid var(--line);
    background: 0 0;
    border-radius: 0;
    padding: 12px 12px 12px 14px
}

[data-layout=chapado] .slip-pick-closed {
    background: var(--bg);
    border: 0;
    border-top: 1px solid var(--line)
}

[data-layout=chapado] .slip-pick-suspended {
    box-shadow: inset 3px 0 0 var(--warn-text)
}

[data-layout=chapado] .slip-pick-conflict {
    box-shadow: inset 3px 0 #b7791f
}

[data-layout=chapado] .slip-pick-label {
    color: var(--accent);
    font-size: 15px;
    font-weight: 700
}

[data-layout=chapado] .slip-ca-title {
    color: var(--accent)
}

[data-layout=chapado] .slip-pick .slip-price {
    background: 0 0;
    padding: 0;
    font-size: 15px
}

[data-layout=chapado] .slip-pick .slip-price.slip-price-suspended {
    border-radius: var(--radius-cell);
    padding: 3px 6px
}

[data-layout=chapado] .slip-pick-market {
    color: var(--text);
    margin-top: 3px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600
}

[data-layout=chapado] .slip-pick-match {
    color: var(--muted)
}

[data-layout=chapado] .slip-pick .slip-leg-dot {
    background: var(--surface);
    border-color: var(--accent)
}

[data-layout=chapado] .slip-pick .slip-leg:not(:last-child):before {
    background: var(--accent)
}

[data-layout=chapado] :is(.slip-note, .slip-alert) {
    border-radius: var(--radius-cell)
}

[data-layout=chapado] .slip .stake-field {
    border-radius: var(--radius-cell);
    height: 40px
}

[data-layout=chapado] .slip .stake-quick {
    border-radius: var(--radius-cell)
}

[data-layout=chapado] .slip-foot {
    border-top: 1px solid var(--line);
    gap: 10px;
    margin-top: 0;
    padding: 12px 14px
}

[data-layout=chapado] .slip-foot>.slip-place {
    border-radius: var(--radius-cell);
    padding-block: 14px;
    font-size: 15px
}

[data-layout=chapado] .bets-card {
    gap: 0;
    padding: 0;
    overflow: hidden
}

[data-layout=chapado] .bets-card-title {
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 14px 10px;
    font-size: 15px;
    font-weight: 600
}

[data-layout=chapado] .bets-card .bets-tabs {
    border-bottom: 1px solid var(--line);
    background: 0 0;
    border-radius: 0;
    grid-auto-columns: max-content;
    justify-content: start;
    gap: 18px;
    margin: 0;
    padding: 0 14px
}

[data-layout=chapado] .bets-card .bets-tab {
    border-bottom: 2px solid #0000;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 8px 0 9px;
    font-weight: 600
}

[data-layout=chapado] .bets-card .bets-tab:hover {
    color: var(--text)
}

[data-layout=chapado] .bets-card .bets-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
    background: 0 0
}

[data-layout=chapado] .bets-card .bets-empty {
    margin: 0;
    padding: 26px 14px
}

[data-layout=chapado] .bets-card :is(.bets-list, .sk-lines) {
    padding: 12px 14px
}

[data-layout=chapado] .bets-card .ticket {
    border-radius: var(--radius-card);
    background: var(--surface-2);
    box-shadow: none;
    border: 0
}

[data-layout=chapado] .bets-card .bets-history {
    border-top: 1px solid var(--line);
    color: var(--accent);
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    background: 0 0;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

[data-layout=chapado] .bets-card .bets-history:after {
    content: "";
    border: 2px solid;
    border-width: 2px 2px 0 0;
    width: 7px;
    height: 7px;
    transform: rotate(45deg)
}

[data-layout=chapado] .bets-card .bets-history:hover {
    background: var(--hover)
}

[data-layout=chapado] .suggest-head {
    background: 0 0;
    padding: 14px 14px 12px;
    font-weight: 600
}

[data-layout=chapado] .suggest-head svg {
    color: var(--accent)
}

[data-layout=chapado] .suggest-body {
    gap: 8px;
    padding: 14px 14px 0
}

[data-layout=chapado] .suggest-card .suggest-stake {
    width: 100%
}

[data-layout=chapado] .suggest-card .stake-field {
    border-radius: var(--radius-cell)
}

[data-layout=chapado] .suggest-card .suggest-stake input {
    height: 40px
}

[data-layout=chapado] .suggest-card .suggest-label:not(:first-child) {
    margin-top: 6px
}

[data-layout=chapado] .suggest-ranges {
    gap: 4px
}

[data-layout=chapado] .suggest-range {
    border-radius: var(--radius-cell);
    border: 0;
    padding: 10px 4px;
    font-weight: 600
}

[data-layout=chapado] .suggest-range.is-active,
[data-layout=chapado] .suggest-range.is-active:hover {
    background: var(--pill-bg);
    color: var(--pill-text)
}

[data-layout=chapado] .suggest-card .suggest-go {
    border-top: 1px solid var(--line);
    color: var(--accent);
    text-align: left;
    background: 0 0;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    margin: 10px -14px 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    display: flex
}

[data-layout=chapado] .suggest-card .suggest-go:after {
    content: "";
    border: 2px solid;
    border-width: 2px 2px 0 0;
    width: 7px;
    height: 7px;
    transform: rotate(45deg)
}

[data-layout=chapado] .suggest-card .suggest-go:hover:not(:disabled) {
    background: var(--hover)
}

[data-layout=chapado] :is(.pp-card, .multiples .multiple, .day-tip) {
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-card)
}

[data-layout=chapado] :is(.pp-card, .multiples .multiple):before {
    display: none
}

[data-layout=chapado] :is(.pp-add, .multiple-add) {
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    height: 44px;
    color: var(--text);
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    display: flex
}

[data-layout=chapado] :is(.pp-add, .multiple-add):hover {
    background: var(--surface-3)
}

[data-layout=chapado] :is(.pp-add, .multiple-add).is-added {
    background: var(--cell-selected);
    color: var(--cell-selected-text);
    font-weight: 600
}

[data-layout=chapado] .pp-add.is-added .pp-odd strong {
    color: inherit
}

[data-layout=chapado] .pp-track {
    padding-top: 0
}

[data-layout=chapado] .popular-players .carousel-btn {
    top: 50%
}

[data-layout=chapado] .pp-top {
    text-align: left;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "shirt tag crests" "shirt name name" "shirt match match";
    align-items: center;
    gap: 1px 10px;
    margin: 0;
    padding: 12px 14px;
    display: grid
}

[data-layout=chapado] .pp-tag {
    box-shadow: none;
    color: var(--accent);
    background: 0 0;
    grid-area: tag;
    justify-self: start;
    padding: 0;
    font-weight: 500;
    position: static
}

[data-layout=chapado] .pp-shirt {
    grid-area: shirt;
    width: 46px;
    height: 46px
}

[data-layout=chapado] :is(.pp-shirt img, .pp-shirt svg) {
    filter: none;
    width: 46px;
    height: 46px
}

[data-layout=chapado] .pp-shirt svg path {
    fill: var(--surface-4)
}

[data-layout=chapado] .pp-number {
    padding-top: 3px;
    font-size: 16px
}

[data-layout=chapado] .pp-crests {
    box-shadow: none;
    background: 0 0;
    grid-area: crests;
    margin: 0;
    padding: 0
}

[data-layout=chapado] .pp-crests-sep {
    display: none
}

[data-layout=chapado] .pp-name {
    grid-area: name;
    font-size: 14px
}

[data-layout=chapado] .pp-match {
    grid-area: match;
    font-size: 11px
}

[data-layout=chapado] .pp-body {
    border-top: 1px solid var(--line);
    clip-path: none;
    background: 0 0;
    border-radius: 0;
    gap: 0;
    margin: 0;
    padding: 0 14px 14px
}

[data-layout=chapado] .pp-legs {
    margin-bottom: 12px;
    padding-top: 6px
}

[data-layout=chapado] .pp-leg {
    padding: 6px 0 6px 22px;
    font-size: 12px
}

[data-layout=chapado] .pp-leg:before {
    border-color: var(--accent);
    background: var(--surface);
    display: block;
    top: 10px
}

[data-layout=chapado] .pp-leg:after {
    display: none
}

[data-layout=chapado] .pp-leg {
    background: linear-gradient(var(--surface-4), var(--surface-4)) 8px 0 / 1px 100% no-repeat
}

[data-layout=chapado] .pp-leg:first-child {
    background-position: 8px 14px
}

[data-layout=chapado] .pp-leg:last-child {
    background-size: 1px 12px
}

[data-layout=chapado] .multiple-leg:before,
[data-layout=chapado] .multiple-leg:after {
    display: none
}

[data-layout=chapado] .pp-odd strong {
    color: var(--price);
    font-size: 15px;
    font-weight: 600
}

[data-layout=chapado] .multiple-name {
    font-size: 15px
}

[data-layout=chapado] .multiple-kind {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 400
}

[data-layout=chapado] .multiple-bettors {
    color: var(--accent);
    font-weight: 500
}

[data-layout=chapado] .multiple-legs {
    padding: 0 14px
}

[data-layout=chapado] .multiple-leg {
    gap: 2px;
    padding: 10px 0
}

[data-layout=chapado] .multiple-leg+.multiple-leg {
    border-top: 1px solid var(--line)
}

[data-layout=chapado] .multiple-pick {
    font-weight: 600
}

[data-layout=chapado] .multiple:has(.multiple-match-one) .multiple-legs {
    padding-block: 6px
}

[data-layout=chapado] .multiple:has(.multiple-match-one) .multiple-leg {
    border-top: 0;
    padding: 8px 0 8px 22px
}

[data-layout=chapado] .multiple:has(.multiple-match-one) .multiple-leg:before {
    border-color: var(--accent);
    background: var(--surface);
    display: block;
    top: 14px
}

[data-layout=chapado] .multiple:has(.multiple-match-one) .multiple-leg:not(:last-child):after {
    background: var(--surface-4);
    display: block;
    top: 25px;
    bottom: -10px
}

[data-layout=chapado] .multiple-match {
    color: var(--muted);
    font-weight: 400
}

[data-layout=chapado] .multiple-match-one {
    border-top: 1px solid var(--line);
    padding: 10px 14px
}

[data-layout=chapado] .multiple-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 14px
}

[data-layout=chapado] .multiple-total {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px
}

[data-layout=chapado] .multiple-total strong {
    color: var(--price);
    font-size: 16px;
    font-weight: 600
}

[data-layout=chapado] .multiple-add {
    justify-content: center
}

[data-layout=chapado] .tip-icon {
    color: var(--accent)
}

[data-layout=chapado] .day-tip {
    gap: 12px;
    padding: 12px 14px 14px
}

[data-layout=chapado] .day-tip-match {
    border-bottom: 1px solid var(--line);
    flex-direction: column-reverse;
    padding-bottom: 10px
}

[data-layout=chapado] .day-tip-teams {
    font-weight: 600
}

[data-layout=chapado] .day-tip-match .multiple-when {
    font-size: 11px
}

[data-layout=chapado] .day-tip-text {
    font-size: 14px
}

[data-layout=chapado] .offer-banner {
    border-color: var(--line);
    background: radial-gradient(ellipse 70% 90% at 0 0, color-mix(in srgb, var(--brand) 24%, transparent), color-mix(in srgb, var(--brand) 9%, transparent) 45%, transparent), var(--surface)
}

[data-layout=chapado] .offer-banner-title {
    letter-spacing: -.02em;
    text-transform: none;
    gap: 2px;
    padding: 18px 16px 0;
    font-family: inherit;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05
}

[data-layout=chapado] .offer-banner-lead {
    color: var(--accent)
}

[data-layout=chapado] .offer-banner-body {
    clip-path: none;
    background: 0 0;
    border-radius: 0;
    justify-content: flex-end;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 10px 16px 16px
}

[data-layout=chapado] .offer-banner-text {
    text-transform: none;
    max-width: 40ch;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4
}

[data-layout=chapado] .offer-banner-more {
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    height: 40px;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    display: flex
}

[data-layout=chapado] .offer-banner-more:after {
    content: "";
    border: solid var(--accent);
    border-width: 2px 2px 0 0;
    width: 7px;
    height: 7px;
    transform: rotate(45deg)
}

[data-layout=chapado] .offer-banner-link:hover .offer-banner-more {
    background: var(--surface-3)
}

[data-layout=chapado] .offer {
    gap: 12px;
    padding: 12px 0
}

[data-layout=chapado] .offer-pic,
[data-layout=chapado] .offers-card .offer-pic {
    border-radius: var(--radius-cell);
    background: color-mix(in srgb, var(--o-a) 75%, var(--o-b));
    width: 52px;
    height: 52px
}

[data-layout=chapado] :is(.offer-pic, .offers-card .offer-pic) .cas-art {
    width: 30px;
    height: 30px
}

[data-layout=chapado] .offer-group {
    color: var(--accent);
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    font-weight: 500
}

[data-layout=chapado] .offer-title,
[data-layout=chapado] .offers-card .offer-title {
    font-size: 15px
}

[data-layout=chapado] .offer-more {
    height: auto;
    color: var(--accent);
    background: 0 0;
    border: 0;
    border-radius: 0;
    margin-top: 2px;
    padding: 0;
    font-weight: 500
}

[data-layout=chapado] .offer-more:hover {
    background: 0 0;
    text-decoration: underline
}

[data-layout=chapado] .scoreboard {
    background: radial-gradient(ellipse 38% 95% at 0 0, color-mix(in srgb, var(--sb-home-glow) 30%, transparent), color-mix(in srgb, var(--sb-home-glow) 17%, transparent) 30%, color-mix(in srgb, var(--sb-home-glow) 6%, transparent) 62%, transparent), radial-gradient(ellipse 38% 95% at 100% 0, color-mix(in srgb, var(--sb-away-glow) 30%, transparent), color-mix(in srgb, var(--sb-away-glow) 17%, transparent) 30%, color-mix(in srgb, var(--sb-away-glow) 6%, transparent) 62%, transparent), var(--surface);
    --sb-home-glow: var(--sb-home, var(--bar-end));
    --sb-away-glow: var(--sb-away, var(--bar-end));
    padding: 16px 16px 18px
}

@supports (color:oklch(from red l c h)) {
    [data-layout=chapado]:not([data-theme=dark]) .scoreboard {
        --sb-home-glow: oklch(from var(--sb-home, var(--bar-end)) min(l, .78) c h);
        --sb-away-glow: oklch(from var(--sb-away, var(--bar-end)) min(l, .78) c h)
    }
}

[data-layout=chapado] .sb-field {
    display: none
}

[data-layout=chapado] .sb-card {
    max-width: 720px;
    box-shadow: none;
    border-radius: 0;
    overflow: visible
}

[data-layout=chapado] .sb-top {
    background: 0 0;
    padding: 0 0 14px
}

[data-layout=chapado] .sb-date {
    color: var(--muted);
    font-weight: 400
}

[data-layout=chapado] .sb-body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    padding: 0
}

[data-layout=chapado] .sb-main {
    align-items: start
}

[data-layout=chapado] .scoreboard.scoreboard .sb-team {
    align-items: center;
    gap: 6px
}

[data-layout=chapado] .scoreboard.scoreboard .sb-team .sb-team-row {
    flex-direction: column;
    gap: 8px
}

[data-layout=chapado] .sb-badge {
    width: 48px;
    height: 48px;
    box-shadow: none;
    background: 0 0;
    border-radius: 0
}

[data-layout=chapado] .sb-badge :is(.logo, .sb-shirt) {
    width: 46px;
    height: 46px
}

[data-layout=chapado] .sb-name {
    text-align: center;
    font-size: 15px;
    font-weight: 600
}

[data-layout=chapado] .sb-center {
    align-self: start;
    align-items: center;
    height: 48px
}

@media (width<=860px) {
    [data-layout=chapado] .scoreboard {
        padding: 14px 10px 16px
    }

    [data-layout=chapado] .sb-badge {
        width: 40px;
        height: 40px
    }

    [data-layout=chapado] .sb-badge :is(.logo, .sb-shirt) {
        width: 38px;
        height: 38px
    }

    [data-layout=chapado] .sb-center {
        height: 40px
    }

    [data-layout=chapado] .sb-name {
        font-size: 13px
    }
}

[data-layout=chapado] :is(.account-input, .deposit-amount, .stake-field):not(:hover, :focus, :focus-within, [aria-invalid=true], :has([aria-invalid=true])) {
    border-color: var(--field-line)
}

[data-layout=chapado] .dialog {
    border-radius: var(--radius-card)
}

[data-layout=chapado] .bottom-nav-active {
    color: var(--accent)
}

[data-layout=chapado] .ig {
    background: var(--surface)
}

[data-layout=chapado] .ig-top {
    color: var(--text);
    background: radial-gradient(ellipse 90% 100% at 50% 0, color-mix(in srgb, var(--brand) 30%, transparent), color-mix(in srgb, var(--brand) 10%, transparent) 55%, transparent);
    padding: 30px 24px 18px
}

[data-layout=chapado] .ig-top:before {
    display: none
}

[data-layout=chapado] .ig-close {
    background: var(--surface-2);
    color: var(--text)
}

[data-layout=chapado] .ig-close:hover {
    background: var(--surface-3)
}

[data-layout=chapado] .ig-title {
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600
}

[data-layout=chapado] .ig-amount {
    letter-spacing: -.03em;
    margin-top: 6px;
    font-family: inherit;
    font-size: 64px;
    font-weight: 600;
    line-height: 1
}

[data-layout=chapado] .ig-per {
    text-transform: none;
    color: var(--muted);
    opacity: 1;
    margin-top: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400
}

[data-layout=chapado] .ig-body {
    clip-path: none;
    gap: 14px;
    margin: 0;
    padding: 4px 20px 18px
}

[data-layout=chapado] .ig-steps {
    gap: 0
}

[data-layout=chapado] .ig-steps li {
    border-top: 1px solid var(--line);
    text-transform: none;
    gap: 12px;
    padding: 10px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3
}

[data-layout=chapado] .ig-steps li:last-child {
    border-bottom: 1px solid var(--line)
}

[data-layout=chapado] .ig .ig-num {
    background: var(--surface-2);
    width: 26px;
    height: 26px;
    color: var(--accent);
    border-radius: 50%;
    place-items: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    display: grid
}

[data-layout=chapado] .ig-link {
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    border: 0;
    min-height: 44px;
    padding: 0 5px 0 12px
}

[data-layout=chapado] .ig-url {
    font-size: 13px
}

[data-layout=chapado] .ig-copy {
    border-radius: var(--radius-cell);
    background: var(--surface-3);
    letter-spacing: 0;
    text-transform: none;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600
}

[data-layout=chapado] .ig-copy:hover {
    background: var(--surface-4)
}

[data-layout=chapado] .ig-cta {
    border-radius: var(--radius-cell);
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2
}

@media (width<=700px) {
    [data-layout=chapado] .ig-amount {
        font-size: 56px
    }
}

[data-layout=chapado] .tg-badge {
    background: var(--brand);
    color: #fff
}

[data-layout=chapado] .tg-headline {
    letter-spacing: -.01em;
    text-transform: none;
    margin-top: 6px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2
}

[data-layout=chapado] .tg-text {
    font-size: 14px
}

[data-layout=chapado] .social-tabs {
    background: 0 0;
    border-radius: 0;
    gap: 8px;
    width: auto;
    padding: 0;
    display: flex
}

[data-layout=chapado] .social-tab {
    background: var(--surface);
    color: var(--text);
    padding: 7px 14px;
    font-weight: 500
}

[data-layout=chapado] .social-tab:hover {
    background: var(--surface-2)
}

[data-layout=chapado] .social-tab.is-active,
[data-layout=chapado] .social-tab.is-active:hover {
    background: var(--pill-bg);
    color: var(--pill-text);
    font-weight: 600
}

[data-layout=chapado] :is(.social-me-chip, .social-pill) {
    background: var(--surface);
    border: 0;
    border-radius: 999px;
    font-weight: 500
}

[data-layout=chapado] :is(.social-me-chip, .social-pill):hover {
    background: var(--surface-2)
}

[data-layout=chapado] :is(.social-primary, .social-ghost) {
    border-radius: var(--radius-cell)
}

[data-layout=chapado] .social-section-title {
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 600
}

[data-layout=chapado] .social-section-title svg {
    color: var(--accent)
}

[data-layout=chapado] :is(.social-see-all, .social-follow-text) {
    color: var(--accent);
    font-weight: 500
}

[data-layout=chapado] .social-rail-arrow {
    border-radius: var(--radius-cell);
    background: var(--surface);
    border: 0
}

[data-layout=chapado] .social-more {
    border-radius: var(--radius-cell);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: 500
}

[data-layout=chapado] :is(.social-card, .social-profile, .social-rank, .social-rank-empty) {
    border-radius: var(--radius-card)
}

[data-layout=chapado] .social-card {
    gap: 0;
    padding: 0;
    overflow: hidden
}

[data-layout=chapado] .social-card-user {
    padding: 12px 14px 10px
}

[data-layout=chapado] .social-card-head {
    border-radius: var(--radius-cell);
    margin: 0 14px 4px;
    padding: 7px 10px
}

[data-layout=chapado] .social-count {
    background: var(--pill-bg);
    color: var(--pill-text);
    border-radius: 999px
}

[data-layout=chapado] .social-card-when {
    font-weight: 500
}

[data-layout=chapado] .social-card-odd {
    color: var(--price);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 600
}

[data-layout=chapado] .social-card-odd svg {
    display: none
}

[data-layout=chapado] .social-picks {
    --social-picks-h: 113px;
    gap: 0;
    padding: 0
}

[data-layout=chapado] .social-pick {
    gap: 3px;
    padding: 9px 14px
}

[data-layout=chapado] .social-pick+.social-pick {
    border-top: 1px solid var(--line)
}

[data-layout=chapado] .social-pick-match {
    color: var(--muted);
    font-weight: 400
}

[data-layout=chapado] .social-pick-line {
    color: var(--text);
    font-size: 13px;
    font-weight: 600
}

[data-layout=chapado] .social-pick-odd {
    color: var(--price);
    margin-left: auto
}

[data-layout=chapado] .social-builder {
    text-transform: none;
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 600
}

[data-layout=chapado] .social-legs {
    --social-timeline: var(--accent);
    color: var(--text)
}

[data-layout=chapado] .social-legs li:not(:last-child):after {
    opacity: 1;
    background: var(--surface-4)
}

[data-layout=chapado] .social-card-more {
    justify-content: flex-start;
    padding: 2px 14px 8px
}

[data-layout=chapado] .social-card-more:before {
    display: none
}

[data-layout=chapado] .social-card-more button {
    color: var(--accent);
    background: 0 0;
    padding: 0;
    font-weight: 500
}

[data-layout=chapado] .social-card-foot {
    border-top: 1px solid var(--line);
    padding: 12px 14px 14px
}

[data-layout=chapado] .social-card-body {
    border-radius: 0;
    gap: 0
}

[data-layout=chapado] .social-post-scroll {
    gap: 0;
    padding: 0 0 4px
}

[data-layout=chapado] .social-post-dialog>.social-card-foot {
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom))
}

[data-layout=chapado] .social-copy {
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    height: 44px;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: 500
}

[data-layout=chapado] .social-copy:hover:not(:disabled, .is-off) {
    background: var(--surface-3)
}

@media (width<=720px) {
    [data-layout=chapado] .social-tabs {
        scrollbar-width: none;
        overflow-x: auto
    }
}

[data-layout=superbet] {
    --radius-card: 10px;
    --radius-cell: 5px;
    --tag-corner: calc(var(--radius-card) - 1px);
    --cell-selected: var(--brand);
    --cell-selected-text: #fff;
    --selected-wash-rgb: 255 255 255;
    --home-glow: transparent;
    --accent: color-mix(in srgb, var(--brand) 92%, #000);
    --page-wash: color-mix(in srgb, var(--brand) 16%, var(--bg));
    --bg: #eff1f2;
    --surface: #fff;
    --surface-2: #eff1f2;
    --surface-3: #e6e8ea;
    --surface-4: #dfe2e5;
    --hover: #f5f6f7;
    --line: #e6e8ea;
    --odd-border: #e0e3e6;
    --text: #101416;
    --muted: #52636f;
    --price: #101416;
    --best: #057b42;
    --up-text: #057b42;
    --chosen: #fff;
    --chosen-shadow: none;
    --focus: var(--accent);
    --pill-bg: var(--brand);
    --pill-text: #fff;
    --sb-field: #e3e6e8;
    --sb-glass: #ffffffb3;
    --sb-badge: #fff;
    --sb-divider: #10141614;
    --sb-shadow: #10141614;
    --hl-bg: #fff;
    --hl-bolt: transparent;
    --hl-text: #101416;
    --hl-muted: #52636f;
    --hl-border: #fff;
    --hl-hover: #dfe2e5;
    --hl-cell: #eff1f2;
    --hl-cell-hover: #e6e8ea;
    --shadow: #1014161f
}

[data-layout=superbet][data-theme=dark] {
    --accent: color-mix(in srgb, var(--brand) 62%, #fff);
    --page-wash: color-mix(in srgb, var(--brand) 26%, #16181a);
    --bg: #16181a;
    --surface: #202325;
    --surface-2: #2a2d30;
    --surface-3: #313538;
    --surface-4: #3e4347;
    --hover: #26292c;
    --line: #2d3134;
    --odd-border: #363a3e;
    --text: #fff;
    --muted: #a6acb0;
    --price: #fff;
    --best: #5bbb84;
    --up-text: #5bbb84;
    --chosen: #202325;
    --chosen-shadow: none;
    --focus: var(--accent);
    --pill-bg: #fff;
    --pill-text: #101416;
    --sb-field: #26292c;
    --sb-line: #ffffff14;
    --sb-glass: #202325bf;
    --sb-badge: #2a2d30;
    --sb-divider: #ffffff14;
    --hl-bg: #202325;
    --hl-bolt: transparent;
    --hl-text: #fff;
    --hl-muted: #a6acb0;
    --hl-border: #202325;
    --hl-hover: #3e4347;
    --hl-cell: #2a2d30;
    --hl-cell-hover: #313538;
    --toast-bg: #202325;
    --shadow: #00000080
}

[data-layout=superbet] body {
    background: linear-gradient(180deg, var(--page-wash), var(--bg) 280px) no-repeat, var(--bg)
}

[data-layout=superbet] .topbar {
    box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--brand) 60%, transparent);
    border-radius: 16px;
    margin: 8px 16px 0;
    top: 8px
}

[data-layout=superbet] .topnav-link {
    text-transform: none;
    color: #ffffffd1;
    font-size: 15px;
    font-weight: 600
}

[data-layout=superbet] .topnav-active {
    color: #fff
}

[data-layout=superbet] :is(.account-signin, .account-signup) {
    border-radius: 999px
}

@media (width<=860px) {
    [data-layout=superbet] {
        --page-wash: color-mix(in srgb, var(--brand) 26%, var(--bg))
    }

    [data-layout=superbet] .topbar {
        box-shadow: none;
        background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 84%, var(--bg)));
        border-radius: 0;
        margin: 0;
        top: 0
    }

    [data-layout=superbet] body {
        background: linear-gradient(180deg, var(--page-wash), var(--bg) 200px) no-repeat, var(--bg)
    }
}

[data-layout=superbet] :is(.home-title, .page-title, .side-title, .dialog-title, .top-choices-title) {
    letter-spacing: 0;
    font-style: normal
}

[data-layout=superbet] .page-title {
    color: var(--accent);
    font-size: 32px
}

[data-layout=superbet][data-theme=dark] .page-title {
    color: var(--text)
}

[data-layout=superbet] .home-title {
    font-size: 22px
}

[data-layout=superbet] :is(.highlight-team, .multiple-name) {
    font-style: normal
}

[data-layout=superbet] :is(.league, .market, .aside-card, .match-card, .action-row, .scoreboard, .highlight, .multiple, .bet-card, .tracker) {
    border-radius: var(--radius-card);
    box-shadow: none
}

[data-layout=superbet] .dialog {
    border-radius: var(--radius-card)
}

[data-layout=superbet] .home-side-title {
    font-weight: 600
}

[data-layout=superbet] .side-link {
    font-weight: 500
}

[data-layout=superbet] :is(.chip, .sport-tab, .market-tab) {
    box-shadow: inset 0 0 0 1px var(--odd-border);
    background: var(--surface);
    border-radius: 999px;
    font-weight: 500
}

[data-layout=superbet] :is(.chip, .sport-tab, .market-tab):hover {
    background: var(--hover)
}

[data-layout=superbet] :is(.chip-active, .sport-tab-active, .market-tab-active),
[data-layout=superbet] :is(.chip-active, .sport-tab-active, .market-tab-active):hover {
    background: var(--pill-bg);
    color: var(--pill-text);
    box-shadow: none;
    font-weight: 600
}

[data-layout=superbet] :is(.chip-active, .sport-tab-active) :is(.chip-count, .sport-count, svg) {
    color: inherit
}

[data-layout=superbet] :is(.chip-active, .sport-tab-active) :is(.chip-count, .sport-count) {
    opacity: .8
}

@media (width<=860px) {
    [data-layout=superbet] .sport-bar .sport-tab {
        border-radius: var(--radius-card)
    }
}

[data-layout=superbet] .odd {
    border-radius: var(--radius-cell)
}

[data-layout=superbet] .odd-label-text {
    color: var(--muted)
}

[data-layout=superbet] .odd-price {
    font-weight: 600
}

[data-layout=superbet] .odd-pickable:hover:not([aria-disabled=true]) {
    background: var(--surface-3)
}

[data-layout=superbet] .odd-selected,
[data-layout=superbet] .odd-selected:hover:not([aria-disabled=true]) {
    background: var(--cell-selected);
    border-color: var(--cell-selected)
}

[data-layout=superbet] .odd-selected :is(.odd-label-text, .odd-price) {
    color: var(--cell-selected-text) !important
}

[data-layout=superbet] .odd-selected .odd-wash {
    --move-rgb: var(--selected-wash-rgb)
}

[data-layout=superbet] .market-head {
    font-weight: 600
}

[data-layout=superbet] .market-grid .odd {
    height: 32px
}

@media (width<=860px) {
    [data-layout=superbet] .market-grid .odd {
        height: 36px
    }
}

[data-layout=superbet] .show-all {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500
}

[data-layout=superbet] .slip {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--surface-2)
}

[data-layout=superbet] .slip-count {
    color: var(--brand);
    background: #fff
}

[data-layout=superbet] .slip-tabs {
    background: var(--surface-3);
    border-radius: 999px
}

[data-layout=superbet] .slip-tab {
    border-radius: 999px;
    font-weight: 600
}

[data-layout=superbet] .slip-tab-active {
    background: var(--surface);
    color: var(--text)
}

[data-layout=superbet] .slip-pick {
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-card)
}

[data-layout=superbet] .slip-pick-closed {
    background: 0 0
}

[data-layout=superbet] .slip-pick .slip-price {
    color: var(--text);
    background: 0 0;
    font-size: 15px;
    font-weight: 600
}

[data-layout=superbet] :is(.slip-clear, .slip-prefs, .slip .stake-quick),
[data-layout=superbet] .slip .stake-field {
    border-radius: var(--radius-cell);
    background: var(--surface)
}

[data-layout=superbet] .slip-foot {
    background: var(--surface);
    border-top: 1px solid var(--line)
}

[data-layout=superbet] .slip-place {
    background: var(--brand);
    color: #fff;
    border-radius: 999px
}

[data-layout=superbet] .slip-place:hover:not(:disabled) {
    background: var(--brand-hover)
}

[data-layout=superbet] .slip-place:disabled {
    background: var(--surface-3);
    color: var(--muted)
}

[data-layout=superbet] .bets-card .bets-tabs,
[data-layout=superbet] .bets-card .bets-tab {
    border-radius: 999px
}

[data-layout=superbet] .bets-card .bets-tab.is-active {
    background: var(--pill-bg);
    color: var(--pill-text)
}

[data-layout=superbet] .bets-card .bets-history {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    font-weight: 600
}

[data-layout=superbet] .suggest-range {
    border-radius: var(--radius-cell)
}

[data-layout=superbet] .suggest-range.is-active,
[data-layout=superbet] .suggest-range.is-active:hover {
    background: var(--pill-bg);
    color: var(--pill-text);
    border-color: var(--pill-bg)
}

[data-layout=superbet] .suggest-card .suggest-go {
    background: var(--brand);
    color: #fff;
    border-radius: 999px
}

[data-layout=superbet] .bottom-nav-active {
    color: var(--accent)
}

[data-layout=superbet] .bottom-nav-active .bottom-nav-icon {
    background: 0 0;
    border-color: #0000
}

[data-layout=superbet] .home-sb {
    grid-template-columns: 230px minmax(0, 1fr) 300px;
    grid-template-areas: "side main aside"
}

@media (width<=1280px) {
    [data-layout=superbet] .home-sb {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas: "side main"
    }
}

@media (width<=960px) {
    [data-layout=superbet] .home-sb {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main"
    }
}

[data-layout=superbet] .home-sb .home-main {
    gap: 24px
}

[data-layout=superbet] .home-sb-title {
    margin-bottom: -10px
}

[data-layout=superbet] .home-sb-code {
    padding: 14px
}

[data-layout=superbet] .home-sb-code .track-input {
    background: var(--surface-2);
    letter-spacing: 1px;
    border-color: #0000;
    border-radius: 999px;
    height: 40px;
    font-size: 15px
}

[data-layout=superbet] .home-sb-code .track-button {
    border-radius: 999px;
    height: 40px;
    padding: 0 14px;
    font-weight: 600
}

@media (width<=960px) {
    [data-layout=superbet] .home-sb .shortcuts {
        display: none
    }
}

[data-layout=superbet] .boosts-block {
    --lime: #e4fc00;
    background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 55%, #fff));
    color: #101416
}

[data-layout=superbet][data-theme=dark] .boosts-block {
    --lime: #d5ec00;
    background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 70%, var(--bg)))
}

[data-layout=superbet] .boosts-block-title {
    font-size: 34px;
    font-style: italic
}

[data-layout=superbet] .boosts-block-bolt {
    color: #101416;
    transform: rotate(12deg)
}

[data-layout=superbet] .boosts-block-bolt svg {
    width: 44px;
    height: 56px
}

[data-layout=superbet] .boosts-block .highlight {
    border-color: #0000
}

[data-layout=superbet] .boosts-block-bolt .bolt {
    color: inherit
}

[data-layout=superbet] .highlight.boost-highlight {
    --hl-bg: var(--surface);
    --hl-bolt: transparent;
    --hl-cell: var(--surface-2);
    --hl-cell-hover: var(--surface-3)
}

[data-layout=superbet] .boost-highlight:before {
    display: none
}

[data-layout=superbet] .highlight.boost-highlight .boost-match {
    text-transform: none;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 600
}

[data-layout=superbet] .highlight :is(.odd, .boost-add, .so-odd-compact) {
    --surface-2: inherit;
    --surface-3: inherit;
    --odd-border: inherit;
    --text: inherit;
    --muted: inherit;
    --price: inherit;
    --up-text: inherit;
    --down-text: inherit;
    --up-rgb: inherit;
    --down-rgb: inherit
}

[data-layout=superbet] .highlight.boost-highlight :is(.odd, .boost-add) {
    border-color: var(--odd-border)
}

[data-layout=superbet] .boost-highlight .boost-add {
    --text: inherit;
    --muted: inherit;
    --price: inherit;
    min-height: 36px
}

[data-layout=superbet] .boost-highlight .boost-add strong {
    color: var(--text)
}

[data-layout=superbet] .boost-highlight .boost-add strong:before {
    content: "";
    vertical-align: -1px;
    clip-path: polygon(60% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 57% 38%);
    background: #c6da0c;
    width: 10px;
    height: 13px;
    margin-right: 5px;
    display: inline-block
}

[data-layout=superbet] .boost-highlight .boost-legs li:before {
    border-color: var(--surface-4)
}

[data-layout=superbet] .live-spot-more {
    color: var(--accent)
}

[data-layout=superbet] .live-spot-sport {
    background: var(--surface-3)
}

[data-layout=superbet] .live-spot-sport.is-active {
    background: var(--brand);
    color: #fff
}

[data-layout=superbet] .live-card {
    border-radius: var(--radius-card)
}

[data-layout=superbet] .live-card-board {
    border-color: var(--odd-border);
    box-shadow: 0 1px 3px var(--sb-shadow)
}

[data-layout=superbet] .live-card-clock {
    background: var(--best);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px
}

[data-layout=superbet][data-theme=dark] .live-card-clock {
    color: #101416
}

[data-layout=superbet] .live-card-score {
    border-radius: var(--radius-cell)
}

[data-layout=superbet] :is(.game-card, .league-tile) {
    border-radius: var(--radius-card)
}

[data-layout=superbet] .top-games-icon {
    color: var(--accent)
}

[data-layout=superbet] :is(.home-aside, .match-aside):has(.slip-dock) {
    align-self: stretch;
    position: static
}

[data-layout=superbet] .slip-dock {
    position: sticky;
    top: 92px
}

[data-layout=superbet] .slip.slip-docked {
    border-radius: var(--radius-card);
    max-height: calc(100vh - 108px)
}

[data-layout=superbet] .slip-dock-empty {
    border-radius: var(--radius-card)
}

[data-layout=superbet] :is(.side-footer, .home-footer) {
    display: none
}

[data-layout=superbet] .content>.footer-cols {
    max-width: 1500px;
    margin: 24px auto 0
}

[data-layout=superbet] .footer-cols {
    background: var(--surface-3)
}

[data-layout=superbet] .guest-bar-signin {
    background: var(--brand)
}

@media (width<=700px) {
    [data-layout=superbet].has-guest-bar .topbar .account-actions {
        display: none
    }
}

[data-layout=superbet] .topnav-link .nav-live-count {
    min-width: 22px;
    height: 18px;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    background: #fff;
    border-radius: 999px;
    place-items: center;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-grid
}

[data-layout=superbet] .bottom-nav-icon .nav-live-count {
    background: var(--brand);
    color: #fff;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    display: block;
    position: absolute;
    top: -6px;
    right: -2px
}

[data-layout=superbet] .home-side .side-link-count {
    display: none
}

[data-layout=superbet] .home-side .side-link[aria-current=page] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, transparent), transparent 85%);
    color: var(--accent);
    font-weight: 600
}

@media (width>=961px) {
    [data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .highlights-track {
        grid-auto-columns: calc(33.3333% - 5.33333px)
    }
}

[data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .highlight {
    aspect-ratio: 1040/600;
    min-height: 0
}

[data-layout=superbet] .offer-banner {
    background: radial-gradient(ellipse 60% 90% at 100% 100%, #ffffff24, transparent 70%), linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #000));
    border: 0
}

[data-layout=superbet] .offer-banner-link {
    color: #fff;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px
}

[data-layout=superbet] .offer-banner-title {
    letter-spacing: 0;
    padding: 0;
    font: italic 800 28px/.95 Barlow Condensed, sans-serif
}

[data-layout=superbet] .offer-banner-lead {
    color: #e4fc00;
    font-size: 15px;
    line-height: 1.2
}

[data-layout=superbet] .offer-banner-body {
    clip-path: none;
    background: 0 0;
    flex: none;
    gap: 10px;
    margin: 0;
    padding: 0
}

[data-layout=superbet] .offer-banner-text {
    text-transform: none;
    color: #ffffffd9;
    max-width: 30ch;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3
}

[data-layout=superbet] .offer-banner-more {
    color: #101416;
    letter-spacing: .02em;
    background: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2
}

[data-layout=superbet] .offer-banner-link:hover .offer-banner-more {
    background: #ffffffe0
}

[data-layout=superbet] .multiples .multiple {
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 0
}

[data-layout=superbet] .multiples .multiple:before {
    display: none
}

[data-layout=superbet] .multiple-name {
    text-transform: none;
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 600
}

[data-layout=superbet]:not([data-theme=dark]) .multiple-boosted .multiple-name {
    color: var(--text)
}

[data-layout=superbet] .multiple-kind {
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500
}

[data-layout=superbet] .multiple-bettors {
    color: var(--muted);
    font-weight: 500
}

[data-layout=superbet] {
    --timeline: color-mix(in srgb, var(--muted) 45%, transparent)
}

[data-layout=superbet] :is(.multiples .multiple-leg, .multiple-leg):before {
    border-color: var(--timeline);
    background: var(--surface)
}

[data-layout=superbet] :is(.multiples .multiple-leg, .multiple-leg):not(:last-child):after {
    background: var(--timeline)
}

[data-layout=superbet] .multiple-price {
    color: var(--text)
}

[data-layout=superbet] .multiples .multiple-foot {
    background: 0 0
}

[data-layout=superbet] .multiple-total {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    font-size: 12px
}

[data-layout=superbet] .multiple-total strong {
    font-size: 15px
}

[data-layout=superbet] .multiple-total strong:before {
    content: "@ ";
    color: var(--muted);
    font-size: 12px;
    font-weight: 500
}

[data-layout=superbet] .multiple-add {
    border: 1px solid var(--odd-border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600
}

[data-layout=superbet] .multiple-add:hover {
    background: var(--hover)
}

[data-layout=superbet] .multiple-add.is-added {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

[data-layout=superbet] .pp-card {
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 0;
    overflow: hidden
}

[data-layout=superbet] .pp-card:before {
    display: none
}

[data-layout=superbet] .pp-track {
    padding-top: 0
}

[data-layout=superbet] .pp-top {
    text-align: left;
    color: #fff;
    background: radial-gradient(ellipse 60% 100% at 100% 0, #ffffff29, transparent 70%), linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #000));
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-areas: "tag shirt" "name shirt" "match shirt" "crests shirt";
    place-items: start;
    row-gap: 4px;
    margin: 0;
    padding: 12px 12px 12px 14px;
    display: grid
}

[data-layout=superbet] .pp-tag {
    box-shadow: none;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid #ffffffd9;
    border-radius: 999px;
    grid-area: tag;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    position: static
}

[data-layout=superbet] .pp-tag svg {
    display: none
}

[data-layout=superbet] .pp-shirt {
    grid-area: shirt;
    align-self: center;
    width: 76px;
    height: 76px
}

[data-layout=superbet] :is(.pp-shirt img, .pp-shirt svg) {
    width: 76px;
    height: 76px
}

[data-layout=superbet] .pp-shirt svg path {
    fill: #ffffff38
}

[data-layout=superbet] .pp-number {
    font-size: 30px
}

[data-layout=superbet] .pp-name {
    text-transform: uppercase;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    grid-area: name;
    max-width: 100%;
    font: italic 800 22px/1 Barlow Condensed, sans-serif;
    display: -webkit-box
}

[data-layout=superbet] .pp-match {
    color: #fffc;
    grid-area: match;
    font-size: 11px
}

[data-layout=superbet] .pp-crests {
    grid-area: crests;
    margin: 2px 0 0
}

[data-layout=superbet] .pp-body {
    clip-path: none;
    border-radius: 0;
    margin: 0;
    padding: 12px
}

[data-layout=superbet] .pp-leg:before {
    border-color: var(--timeline)
}

[data-layout=superbet] .pp-legs {
    position: relative
}

[data-layout=superbet] .pp-legs:before {
    content: "";
    background: var(--timeline);
    width: 1px;
    position: absolute;
    top: 13px;
    bottom: 12px;
    left: 8px
}

[data-layout=superbet] .pp-leg:after {
    display: none
}

[data-layout=superbet] .pp-add {
    border: 1px solid var(--odd-border);
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    color: var(--text)
}

[data-layout=superbet] .pp-add:hover {
    background: var(--surface-3)
}

[data-layout=superbet] .pp-add.is-added {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

@media (width>=961px) {
    [data-layout=superbet] .home-sb :is(.multiples-wrap, .pp-wrap) .carousel-btn {
        border: 1px solid var(--line);
        background: var(--surface);
        width: 32px;
        height: 32px;
        color: var(--text);
        box-shadow: none;
        place-items: center;
        font-size: 20px;
        display: grid;
        top: -44px;
        transform: none
    }

    [data-layout=superbet] .home-sb :is(.multiples-wrap, .pp-wrap) .carousel-prev {
        left: auto;
        right: 38px
    }

    [data-layout=superbet] .home-sb :is(.multiples-wrap, .pp-wrap) .carousel-next {
        right: 0
    }
}

[data-layout=superbet] .scoreboard {
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    padding: 14px 16px 18px
}

[data-layout=superbet] .sb-field {
    display: none
}

[data-layout=superbet] .sb-card {
    max-width: 720px;
    box-shadow: none;
    border-radius: 0;
    overflow: visible
}

[data-layout=superbet] .sb-top {
    background: 0 0;
    padding: 0 0 14px
}

[data-layout=superbet] .sb-date {
    color: var(--muted);
    font-weight: 400
}

[data-layout=superbet] .sb-clock {
    background: var(--best);
    color: #fff;
    padding: 2px 10px;
    font-size: 12px
}

[data-layout=superbet][data-theme=dark] .sb-clock {
    color: #101416
}

[data-layout=superbet] .sb-body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    padding: 0
}

[data-layout=superbet] .sb-main {
    align-items: start
}

[data-layout=superbet] .scoreboard.scoreboard :is(.sb-home, .sb-away) {
    align-items: center
}

[data-layout=superbet] .scoreboard.scoreboard :is(.sb-home, .sb-away) .sb-team-row {
    flex-direction: column;
    gap: 8px
}

[data-layout=superbet] .sb-badge {
    width: 52px;
    height: 52px;
    box-shadow: none;
    background: 0 0;
    border-radius: 0
}

[data-layout=superbet] .sb-badge :is(.logo, .sb-shirt) {
    width: 48px;
    height: 48px
}

[data-layout=superbet] .sb-name {
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    font: 700 18px/1.05 Barlow Condensed, sans-serif
}

[data-layout=superbet] .sb-center {
    align-self: start;
    align-items: center;
    height: 52px
}

[data-layout=superbet] .sb-vs {
    text-transform: uppercase;
    font: 700 16px/1 Barlow Condensed, sans-serif
}

[data-layout=superbet] .sb-score {
    border-radius: var(--radius-cell);
    background: var(--surface-2);
    gap: 6px;
    padding: 6px 12px;
    font: 700 34px/1 Barlow Condensed, sans-serif
}

@media (width<=860px) {
    [data-layout=superbet] .scoreboard {
        padding: 12px 10px 16px
    }

    [data-layout=superbet] .sb-badge {
        width: 42px;
        height: 42px
    }

    [data-layout=superbet] .sb-badge :is(.logo, .sb-shirt) {
        width: 38px;
        height: 38px
    }

    [data-layout=superbet] .sb-center {
        height: 42px
    }

    [data-layout=superbet] .sb-name {
        font-size: 15px
    }

    [data-layout=superbet] .sb-score {
        font-size: 28px
    }
}

[data-layout=superbet] .sb-clock .bolt {
    color: inherit
}

[data-layout=superbet] .match-layout {
    grid-template-columns: 230px minmax(0, 1fr) 300px
}

[data-layout=superbet] .match-layout>.home-side {
    grid-area: auto;
    padding: 14px 0 16px 16px
}

@media (width<=1180px) {
    [data-layout=superbet] .match-layout {
        grid-template-columns: minmax(0, 1fr) 280px
    }

    [data-layout=superbet] .match-layout>.home-side {
        display: none
    }
}

@media (width<=860px) {
    [data-layout=superbet] .match-layout {
        grid-template-columns: minmax(0, 1fr)
    }
}

[data-layout=superbet] .breadcrumb-path {
    font-size: 12px
}

[data-layout=superbet] .scoreboard:not(.is-live) {
    background: var(--surface);
    justify-content: flex-start;
    padding: 12px 14px
}

[data-layout=superbet][data-theme=dark] .scoreboard:not(.is-live) {
    background: var(--surface-2)
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-card {
    width: 100%;
    max-width: none
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-top {
    justify-content: flex-start;
    padding: 0 0 8px
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-date {
    font-size: 12px
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-main {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    display: flex
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-center {
    display: none
}

[data-layout=superbet] .scoreboard.scoreboard:not(.is-live) :is(.sb-home, .sb-away) {
    align-items: flex-start
}

[data-layout=superbet] .scoreboard.scoreboard:not(.is-live) :is(.sb-home, .sb-away) .sb-team-row {
    flex-direction: row;
    gap: 10px
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-badge {
    width: 22px;
    height: 22px
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-badge :is(.logo, .sb-shirt) {
    width: 20px;
    height: 20px
}

[data-layout=superbet] .scoreboard:not(.is-live) .sb-name {
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden
}

[data-layout=superbet] .market-tab {
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 14px
}

[data-layout=superbet] .market-tool {
    border-radius: 6px
}

[data-layout=superbet] .market-search {
    background: var(--surface-2);
    border: 0;
    border-radius: 6px
}

[data-layout=superbet] .market-head {
    padding: 14px;
    font-size: 15px
}

[data-layout=superbet] .market-head-row:has(>.market-head[aria-expanded=true]) {
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px
}

[data-layout=superbet] .market-head .ca-badge {
    height: auto;
    color: var(--accent);
    letter-spacing: .02em;
    background: 0 0;
    border-radius: 0;
    margin-left: auto;
    padding: 0;
    font: italic 800 16px/1 Barlow Condensed, sans-serif;
    position: static
}

[data-layout=superbet] .market-head-row .market-head>span:first-child {
    padding-right: 0
}

[data-layout=superbet] .market-head-row .market-head-co>span:first-child {
    padding-right: 34px
}

[data-layout=superbet] .market-head-tags {
    display: contents
}

[data-layout=superbet] .market-head-row:has(.ep-button) .market-head {
    padding-bottom: 44px
}

[data-layout=superbet] .market-head-row .ep-button {
    position: absolute;
    bottom: 14px;
    left: 14px
}

[data-layout=superbet] .market-head-row .co-button {
    position: absolute;
    top: 13px;
    right: 38px
}

[data-layout=superbet] .market-head-row:has(.ca-badge) .co-button {
    right: 66px
}

[data-layout=superbet] .co-tag {
    background: color-mix(in srgb, var(--best) 14%, transparent);
    width: 24px;
    height: 22px;
    color: var(--best);
    border-radius: 6px
}

[data-layout=superbet] .co-tag svg {
    width: 16px;
    height: 16px
}

[data-layout=superbet] .ep-tag {
    color: #101416;
    background: #e4fc00
}

[data-layout=superbet] .ep-tag-pending {
    background: var(--surface-3);
    color: var(--muted)
}

[data-layout=superbet] .match-main .boost-tag {
    color: #101416;
    background: #e4fc00
}

[data-layout=superbet] .so-market {
    border: 0
}

[data-layout=superbet] .so-head {
    border-bottom: 1px solid var(--line);
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 12px;
    padding: 14px
}

[data-layout=superbet] .so-market-name {
    font-size: 15px;
    font-weight: 600
}

[data-layout=superbet] .ca-boost-banner {
    border: 0
}

[data-layout=superbet] .match-main .top-choices-title {
    text-transform: none;
    font-family: inherit;
    font-size: 17px;
    font-style: normal;
    font-weight: 600
}

[data-layout=superbet] .match-main .top-choices .boost {
    border-radius: var(--radius-card);
    border: 0
}

[data-layout=superbet] .match-main .top-choices .boost-add {
    border-color: var(--odd-border);
    border-radius: var(--radius-cell)
}

[data-layout=superbet] .match-main .top-choices .carousel-btn {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: none
}

[data-layout=superbet] .filters {
    border-radius: var(--radius-card);
    background: var(--surface);
    border: 0;
    margin-bottom: 14px;
    padding: 6px
}

[data-layout=superbet] .filters .chip {
    box-shadow: none;
    border-radius: var(--radius-cell);
    background: 0 0;
    font-weight: 600
}

[data-layout=superbet] .filters .chip:hover {
    background: var(--hover)
}

[data-layout=superbet] .filters :is(.chip-active, .chip-active:hover) {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    color: var(--accent)
}

[data-layout=superbet][data-theme=dark] .filters :is(.chip-active, .chip-active:hover) {
    background: var(--surface-2);
    color: var(--text)
}

[data-layout=superbet] .filters .chip-active .chip-count {
    color: inherit
}

@media (width<=860px) {
    [data-layout=superbet] .filters {
        margin-inline: 0
    }
}

[data-layout=superbet] .filters .chips-scroll {
    padding-left: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), #0000);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), #0000)
}

[data-layout=superbet] .league-head {
    background: var(--surface);
    font-weight: 600
}

[data-layout=superbet] .league-head[aria-expanded=true] {
    border-bottom-color: var(--odd-border)
}

[data-layout=superbet] .league-count {
    background: var(--surface-2)
}

[data-layout=superbet] .mp-title {
    letter-spacing: 0;
    font-style: normal
}

[data-layout=superbet] .mp-sides {
    background: var(--surface-3)
}

[data-layout=superbet] .mp-side.is-active {
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--odd-border)
}

[data-layout=superbet] .mp-card {
    border-radius: var(--radius-card)
}

[data-layout=superbet] .mp-step {
    border-color: var(--odd-border)
}

[data-layout=superbet] .list-layout {
    grid-template-columns: 230px minmax(0, 1fr) 300px
}

@media (width<=1280px) {
    [data-layout=superbet] .list-layout {
        grid-template-columns: 200px minmax(0, 1fr)
    }
}

@media (width<=960px) {
    [data-layout=superbet] .list-layout {
        grid-template-columns: minmax(0, 1fr)
    }
}

[data-layout=superbet] .list-layout .updated-time {
    display: none
}

[data-layout=superbet] .list-tabs .info-tab-active {
    border-bottom-color: var(--accent)
}

@media (width>=961px) {
    [data-layout=superbet] .list-layout .sport-bar {
        display: none
    }
}

@media (width<=960px) {
    [data-layout=superbet] .list-tabs {
        display: none
    }

    [data-layout=superbet] .list-layout .sport-bar {
        border-bottom: 1px solid var(--line);
        gap: 20px;
        margin: 0 -12px 12px;
        -webkit-mask-image: none;
        mask-image: none
    }

    [data-layout=superbet] .list-layout .sport-bar .sport-tab,
    [data-layout=superbet] .list-layout .sport-bar .sport-tab:hover {
        min-width: 0;
        box-shadow: none;
        color: var(--muted);
        background: 0 0;
        border-bottom: 2px solid #0000;
        border-radius: 0;
        flex-direction: row;
        margin-bottom: -1px;
        padding: 8px 0 10px;
        font-size: 15px;
        font-weight: 500
    }

    [data-layout=superbet] .list-layout .sport-bar .sport-tab svg {
        display: none
    }

    [data-layout=superbet] .list-layout .sport-bar .sport-tab-active {
        border-bottom-color: var(--accent);
        color: var(--text);
        font-weight: 600
    }
}

[data-layout=superbet] {
    --slip-frame: color-mix(in srgb, var(--line) 40%, transparent)
}

[data-layout=superbet] .slip-docked .slip-bar {
    display: none
}

[data-layout=superbet] .slip-docked .slip-body {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto auto auto;
    align-content: start;
    column-gap: 4px;
    display: grid
}

[data-layout=superbet] .slip-docked .slip-body>* {
    grid-column: 1/-1
}

[data-layout=superbet] .slip-docked .slip-head {
    display: contents
}

[data-layout=superbet] .slip-docked .slip-head>strong {
    display: none
}

[data-layout=superbet] .slip-docked .slip-body>.slip-tabs {
    grid-area: 1/1;
    min-width: 0;
    margin: 12px 0 12px 12px;
    padding: 2px;
    overflow: hidden
}

[data-layout=superbet] .slip-docked .slip-tabs .slip-tab {
    white-space: nowrap;
    flex: none;
    padding: 4px 9px;
    font-size: 13px
}

[data-layout=superbet] .slip-docked .slip-head>.slip-badge {
    display: none
}

[data-layout=superbet] .slip-docked .slip-head>.slip-prefs {
    border: 0;
    border-radius: 999px;
    grid-area: 1/5;
    align-self: center;
    width: 32px;
    height: 32px
}

[data-layout=superbet] .slip-docked .slip-head>.slip-clear {
    border: 0;
    border-radius: 999px;
    grid-area: 1/6;
    justify-content: center;
    align-self: center;
    gap: 0;
    width: 32px;
    height: 32px;
    margin: 0 12px 0 0;
    padding: 0;
    font-size: 0
}

[data-layout=superbet] .slip-docked .slip-head>.slip-prefs.slip-share {
    grid-column: 4;
    margin: 0
}

[data-layout=superbet] .slip-docked .slip-head>:is(.slip-prefs, .slip-clear) {
    width: 28px;
    height: 28px
}

[data-layout=superbet] .slip-docked .slip-head>.slip-clear {
    margin-right: 10px
}

[data-layout=superbet] .slip-docked .slip-head>:is(.slip-prefs, .slip-clear) svg {
    width: 16px;
    height: 16px
}

[data-layout=superbet] .slip-docked .slip-head>:is(.slip-prefs, .slip-clear):hover {
    background: var(--hover);
    color: var(--text)
}

[data-layout=superbet] .slip-pick {
    border: 0;
    flex-direction: column;
    padding: 10px 12px 12px;
    display: flex
}

[data-layout=superbet] .slip-pick-match {
    order: -1;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600
}

[data-layout=superbet] .slip-pick-teams {
    flex-direction: row
}

[data-layout=superbet] .slip-pick-teams span+span:before {
    content: " - ";
    white-space: pre
}

[data-layout=superbet] .slip-sport {
    display: none
}

[data-layout=superbet] .slip-pick:not(:has(.slip-legs)) .slip-pick-top {
    border: 1px solid var(--slip-frame);
    border-radius: var(--radius-cell) var(--radius-cell) 0 0;
    border-bottom: 0;
    padding: 10px 6px 0 12px
}

[data-layout=superbet] .slip-pick:not(:has(.slip-legs)) .slip-pick-market {
    border: 1px solid var(--slip-frame);
    border-radius: 0 0 var(--radius-cell) var(--radius-cell);
    border-top: 0;
    margin: 0;
    padding: 0 12px 10px;
    font-size: 13px
}

[data-layout=superbet] .slip-pick-label {
    font-size: 15px;
    font-weight: 600
}

[data-layout=superbet] .slip-pick .slip-price {
    font-size: 16px
}

[data-layout=superbet] .slip-pick .slip-remove {
    color: var(--accent)
}

[data-layout=superbet] .slip-pick :is(.slip-closed-why, .slip-boost, .slip-pick-match) {
    margin-left: 0
}

[data-layout=superbet] .slip-multi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    display: grid
}

[data-layout=superbet] .slip-multi .stake {
    display: contents
}

[data-layout=superbet] .slip-multi .stake-field {
    grid-area: 1/1/auto/3
}

[data-layout=superbet] .slip-multi .slip-multi-line {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    flex-direction: column;
    grid-area: 1/3;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px
}

[data-layout=superbet] .slip-multi .slip-multi-odd {
    color: var(--text);
    font-size: 17px
}

[data-layout=superbet] .slip-multi .stake-quick {
    grid-row: 2;
    height: 30px
}

[data-layout=superbet] .slip .stake-field {
    border-color: var(--odd-border);
    padding: 14px 10px 0;
    position: relative
}

[data-layout=superbet] .slip .stake-field:before {
    content: "Valor";
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    font-weight: 500;
    position: absolute;
    top: 6px;
    left: 10px
}

[data-layout=superbet] .slip .stake-field input {
    height: 30px;
    font-size: 15px
}

[data-layout=superbet] .slip-return {
    align-items: baseline
}

[data-layout=superbet] .slip-return dt {
    text-transform: uppercase;
    font: 700 17px/1 Barlow Condensed, sans-serif
}

[data-layout=superbet] .slip-return dd {
    font-size: 18px;
    color: var(--text) !important
}

[data-layout=superbet] .slip-place {
    min-height: 46px;
    font-size: 15px;
    font-weight: 600
}

[data-layout=superbet] .slip .stake-quick {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--odd-border);
    border-radius: 999px
}

[data-layout=superbet] .slip .stake-quick:hover {
    background: var(--hover)
}

[data-layout=superbet] .slip .stake {
    align-items: center
}

[data-layout=superbet] .slip .stake-quick {
    height: 32px
}

[data-layout=superbet] .slip-legs {
    border: 1px solid var(--slip-frame);
    border-radius: var(--radius-cell);
    margin: 8px 0 0;
    padding: 4px 6px 4px 12px
}

[data-layout=superbet] .slip-pick .slip-leg-dot {
    border-color: var(--timeline);
    background: var(--surface)
}

[data-layout=superbet] .slip-pick .slip-leg:not(:last-child):before {
    background: var(--timeline);
    opacity: 1
}

[data-layout=superbet] .slip-leg-info strong {
    font-weight: 600
}

[data-layout=superbet] .slip-leg-info span,
[data-layout=superbet] .slip-leg .slip-remove {
    color: var(--muted)
}

[data-layout=superbet] .home-title-icon {
    display: inline-grid
}

[data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .carousel-dots {
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    display: flex
}

[data-layout=superbet] .carousel-dots span {
    background: var(--surface-4);
    border-radius: 999px;
    width: 6px;
    height: 6px;
    transition: width .2s
}

[data-layout=superbet] .carousel-dots .is-on {
    background: var(--muted);
    width: 16px
}

[data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
    top: calc(50% - 8px)
}

[data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .carousel-prev {
    left: 8px
}

[data-layout=superbet] .home-sb .highlights:not(.boosts-block-cards) .carousel-next {
    right: 8px
}

[data-layout=superbet] .home-sb .highlights.at-start:not(.boosts-block-cards) .carousel-prev,
[data-layout=superbet] .home-sb .highlights.at-end:not(.boosts-block-cards) .carousel-next {
    display: none
}

[data-layout=superbet] .list-page .live-spot,
[data-layout=superbet] .list-page .top-games {
    margin-bottom: 22px
}

@media (width>=861px) {

    [data-layout=superbet] .search-pill,
    [data-layout=superbet] .search-pill.is-compact {
        cursor: pointer;
        width: 38px;
        padding: 0 9px
    }

    [data-layout=superbet] .search-pill-text {
        display: none
    }

    [data-layout=superbet] .topbar-bets {
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        width: auto;
        height: 38px;
        margin: 0 4px;
        padding: 0 12px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex
    }

    [data-layout=superbet] .topbar-bets svg {
        display: none
    }

    [data-layout=superbet] .topbar-bets-text {
        display: inline
    }

    [data-layout=superbet] .topbar-bets .topbar-badge {
        animation: none;
        position: static
    }
}

@media (width<=700px) {
    [data-layout=superbet].has-guest-bar .topbar .brand {
        max-width: 55%;
        position: absolute;
        left: 50%;
        transform: translate(-50%)
    }
}

[data-layout=superbet] .social-page {
    max-width: 860px
}

[data-layout=superbet] .social-bar {
    border-bottom: 1px solid var(--line)
}

[data-layout=superbet] .social-tabs {
    scrollbar-width: none;
    background: 0 0;
    border-radius: 0;
    gap: 18px;
    width: auto;
    padding: 0;
    display: flex;
    overflow-x: auto
}

[data-layout=superbet] .social-tab {
    border-bottom: 2px solid #0000;
    border-radius: 0;
    flex: none;
    margin-bottom: -1px;
    padding: 10px 2px 11px;
    font-size: 14px;
    font-weight: 600
}

[data-layout=superbet] .social-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--brand);
    background: 0 0
}

[data-layout=superbet] :is(.social-me-chip, .social-pill) {
    box-shadow: inset 0 0 0 1px var(--line);
    border: 0;
    border-radius: 999px;
    font-weight: 600
}

[data-layout=superbet] :is(.social-primary, .social-ghost) {
    border-radius: 999px;
    height: auto;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600
}

[data-layout=superbet] .social-section-title {
    letter-spacing: .2px;
    font-size: 20px;
    font-style: normal
}

[data-layout=superbet] .social-rail {
    grid-auto-columns: calc(50% - 6px)
}

[data-layout=superbet] .social-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

[data-layout=superbet] .social-rail-arrow {
    box-shadow: inset 0 0 0 1px var(--line);
    border: 0;
    border-radius: 50%
}

[data-layout=superbet] .social-more {
    box-shadow: inset 0 0 0 1px var(--line);
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600
}

[data-layout=superbet] :is(.social-card, .social-profile, .social-rank, .social-rank-empty),
[data-layout=superbet] .social-card-head {
    border-radius: 16px
}

[data-layout=superbet] .social-count {
    border-radius: 999px;
    min-width: 26px;
    padding: 1px 7px
}

[data-layout=superbet] .social-card-odd {
    font-size: 17px;
    font-style: normal
}

[data-layout=superbet] .social-follow-text {
    color: var(--text);
    opacity: .8
}

@media (hover:hover) {
    [data-layout=superbet] .social-follow-text:hover {
        opacity: 1;
        text-decoration: none
    }
}

[data-layout=superbet] .social-legs {
    --social-timeline: var(--timeline)
}

[data-layout=superbet] .social-legs li:not(:last-child):after {
    opacity: 1
}

[data-layout=superbet] .social-card-more {
    margin: 0 -12px
}

[data-layout=superbet] .social-card-more:before {
    left: 20px;
    right: 20px
}

[data-layout=superbet] .social-card-more:after {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 0 50%, var(--bg) 7px, transparent 7.5px), radial-gradient(circle at 100% 50%, var(--bg) 7px, transparent 7.5px);
    height: 16px;
    margin-top: -8px;
    position: absolute;
    inset: 50% 0 auto
}

[data-layout=superbet] .social-copy {
    background: color-mix(in srgb, var(--muted) 18%, transparent);
    height: 32px;
    color: var(--text);
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600
}

[data-layout=superbet] .social-copy:hover:not(:disabled, .is-off) {
    background: color-mix(in srgb, var(--muted) 26%, transparent)
}

@media (width<=720px) {
    [data-layout=superbet] .social-bar {
        border-bottom: 0
    }

    [data-layout=superbet] .social-tabs {
        gap: 6px
    }

    [data-layout=superbet] .social-tab {
        border: 0;
        border-radius: 6px;
        margin: 0 0 6px;
        padding: 5px 12px
    }

    [data-layout=superbet] .social-tab.is-active {
        background: var(--brand-soft);
        color: var(--brand)
    }

    [data-layout=superbet] .social-rail {
        grid-auto-columns: 86%
    }

    [data-layout=superbet] .social-list {
        grid-template-columns: minmax(0, 1fr)
    }
}