@font-face {
    font-family: XbahisRoboto;
    src: url(roboto-regular.woff2) format('woff2');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: XbahisRoboto;
    src: url(roboto-medium.woff2) format('woff2');
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: XbahisRoboto;
    src: url(roboto-bold.woff2) format('woff2');
    font-weight: 700 900;
    font-display: swap
}

/* Measured against m.xbahis300.com at 390 × 844. Only loaded by this theme. */
.xb-theme {
    --bg-body: var(--xb-c-23232b, #23232b);
    --bg-sidebar: var(--xb-c-23232b, #23232b);
    --bg-card: var(--xb-c-2b2b37, #2b2b37);
    --border-color: var(--xb-c-3a3a44, #3a3a44);
    --text-primary: var(--xb-c-f3f3f5, #f3f3f5);
    --text-secondary: var(--xb-c-a7a7af, #a7a7af);
    --accent-green: var(--xb-c-ff6500, #ff6500);
    --accent-blue: var(--xb-c-ff6500, #ff6500);
    --accent-gold: var(--xb-c-ff6500, #ff6500);
    --accent-gold-light: var(--xb-c-ff8c33, #ff8c33);
    --palette-accent-rgb: 255, 101, 0;
    --palette-gold-rgb: 255, 101, 0;
    --xb-orange: linear-gradient(114deg, var(--xb-c-ff6500, #ff6500), var(--xb-c-ff8c33, #ff8c33));
    --xb-header-height: 50px;
    --xb-dock-height: 60px;
    margin: 0 !important;
    min-width: 280px;
    background: var(--xb-c-23232b, #23232b) var(--xb-background-image, url(background.png)) center top/cover fixed !important;
    color: var(--text-primary);
    font: 14px/1.4 XbahisRoboto, Roboto, Arial, sans-serif !important;
    padding: 50px 0 calc(70px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden
}

.xb-theme * {
    box-sizing: border-box
}

.xb-theme [hidden] {
    display: none !important
}

.xb-theme :where(button, input, select, textarea) {
    font: inherit
}

.xb-theme :is(h1, h2, h3, h4, h5, h6, p) {
    margin-top: 0
}

.xb-theme a {
    color: inherit;
    text-decoration: none
}

.xb-theme button {
    cursor: pointer
}

.xb-theme :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--xb-c-ff8c33, #ff8c33);
    outline-offset: 3px
}

.xb-theme :is(input, select, textarea) {
    color-scheme: dark
}

.xb-theme .xb-icon {
    font-size: 22px;
    flex-shrink: 0
}

.xb-theme .xb-skip {
    position: fixed;
    left: 8px;
    top: -80px;
    z-index: 30000;
    padding: 10px;
    background: var(--xb-c-ff6500, #ff6500);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-theme .xb-skip:focus {
    top: 5px
}

.xb-theme .xb-support {
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    width: 74px;
    height: 74px
}

.xb-support>img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.xb-theme .xb-close .xb-icon {
    font-size: 20px
}

.xb-theme .xb-icon-button {
    color: var(--xb-c-a7a7af, #a7a7af)
}

.xb-announcements:empty {
    display: none
}

.xb-theme .xb-announcements .announcement-marquee {
    background: var(--xb-c-2b2b35, #2b2b35) !important;
    color: var(--xb-c-babac4, #babac4) !important;
    min-height: 40px;
    border: 0 !important;
    font-size: 12px
}

.xb-auth-page .xb-logo img {
    width: 100px
}

.xb-auth-page .xb-header-actions {
    gap: 14px
}

.xb-theme .xb-logo img {
    width: 100px
}

.xb-theme .xb-user-summary {
    margin-bottom: 7px
}

.xb-theme .xb-account-menu {
    margin-bottom: 14px
}

.xb-theme .xb-account-menu>a,
.xb-theme .xb-account-menu>button {
    min-height: 47px
}

.xb-club>img {
    width: 26px;
    height: 26px;
    object-fit: contain
}

.xb-theme .xb-wallet-card:after {
    content: none
}

.xb-wallet-eye {
    position: absolute;
    right: 13px;
    top: 13px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 8.235%, transparent);
    color: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 60%, transparent)
}

.xb-wallet-eye>.xb-icon {
    font-size: 20px
}

.xb-theme .xb-product-row>.xb-product {
    aspect-ratio: .6;
    min-height: 0
}

.xb-theme .xb-product-grid:empty {
    display: none
}

.xb-theme .xb-product-row {
    justify-content: flex-start
}

.xb-theme .xb-product-row>.xb-product {
    flex: 0 0 calc(20% - 4px)
}

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

.xb-theme .xb-shortcut-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible
}

.xb-theme .xb-category-card,
.xb-theme .xb-shortcut-card {
    padding: 0;
    aspect-ratio: unset
}

.xb-theme .xb-category-card {
    height: auto;
    aspect-ratio: 1.76
}

.xb-theme .xb-shortcut-card {
    height: auto;
    aspect-ratio: .58
}

.xb-theme :is(.xb-page-deposit, .xb-page-withdraw) .xb-page-content {
    padding-top: 0
}

.xb-page-deposit .xb-page-content>.xb-hero:first-child,
.xb-page-withdraw .xb-page-content>.xb-hero:first-child {
    margin-top: 0;
    margin-bottom: 20px
}

.xb-page-deposit .mdep-section-label {
    display: none
}

.xb-page-deposit #deposit-history {
    display: none
}

.xb-page-withdraw #withdrawal-history,
.xb-page-withdraw .mwd-section-label {
    display: none
}

body:is(.xb-page-deposit, .xb-page-withdraw) .xb-hero {
    aspect-ratio: 2.17
}

.xb-page-deposit .xb-page-content:has(.xb-payment-grid)>.mdep-section-label {
    display: none
}

.xb-auth-page #phoneInput {
    padding-left: 100px !important
}

.xb-winner-period {
    border-radius: 14px;
    background: var(--xb-c-33333e, #33333e);
    color: var(--xb-c-babac1, #babac1);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700
}

.xb-winner-period.active {
    background: var(--xb-c-eeeeee, #eeeeee);
    color: var(--xb-c-44444c, #44444c)
}

.xb-product.has-image {
    padding: 0;
    border: 0;
    background: none
}

.xb-page-content>.xb-hero:first-child {
    margin-top: 10px
}

.xb-catalog-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    scrollbar-width: none;
    margin: 28px 0 10px
}

.xb-catalog-tabs>button {
    flex-shrink: 0;
    border-radius: 22px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 4.314%, transparent);
    color: var(--xb-c-c4c4cb, #c4c4cb);
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px
}

.xb-catalog-tabs>button[aria-selected=true] {
    border-color: var(--xb-c-ff6500, #ff6500);
    background: color-mix(in srgb, var(--xb-c-ff6500, #ff6500) 15.686%, transparent);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-catalog-tabs .xb-icon {
    font-size: 16px
}

.xb-catalog-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.xb-catalog-search,
.xb-catalog-tools>button {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 24px;
    background: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 4.314%, transparent);
    color: #9f9fab;
    padding: 0 15px;
    min-width: 0
}

.xb-catalog-search>input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--xb-c-dddddd, #dddddd);
    font-size: 14px
}

.xb-catalog-search:focus-within {
    box-shadow: inset 0 0 0 1px var(--xb-c-ff790f, #ff790f)
}

.xb-catalog-search>.xb-icon {
    font-size: 19px
}

.xb-catalog-tools>button>span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.xb-catalog-tools .xb-icon {
    font-size: 19px
}

.xb-random {
    height: 40px;
    width: 100%;
    border: 0;
    border-radius: 24px;
    background: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 4.314%, transparent);
    color: var(--xb-c-d5d5dc, #d5d5dc);
    margin: 10px 0 22px;
    font-size: 12px
}

.xb-catalog .xb-section-heading h1 {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    font-weight: 700
}

.xb-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px
}

.xb-catalog-card {
    border: 0;
    border-radius: 8px;
    padding: 0;
    background: var(--xb-c-33333e, #33333e);
    overflow: hidden;
    min-width: 0;
    color: var(--xb-c-ffffff, #ffffff);
    aspect-ratio: 1.45
}

.xb-catalog-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.xb-catalog-card>span {
    display: block;
    padding: 12px;
    font-size: 13px
}

.xb-catalog-grid[aria-busy=true] {
    opacity: .6
}

.xb-catalog-grid.is-lobby {
    display: flex;
    overflow: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity
}

.xb-catalog-grid.is-lobby>.xb-catalog-card {
    flex: 0 0 calc(44% - 5px);
    scroll-snap-align: start
}

.xb-lobby-providers {
    margin: 20px 0
}

.xb-lobby-providers>.xb-section-heading>button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--xb-c-aaaaaa, #aaaaaa)
}

.xb-lobby-providers>div:last-child {
    display: flex;
    gap: 8px;
    overflow: auto;
    scrollbar-width: none
}

.xb-lobby-providers>div:last-child>button {
    flex: 0 0 31%;
    border: 0;
    border-radius: 7px;
    background: var(--xb-c-33333d, #33333d);
    color: var(--xb-c-aaaaaa, #aaaaaa);
    min-height: 55px;
    font-size: 12px;
    padding: 10px
}

.xb-lobby-providers img {
    max-width: 100%;
    height: 30px;
    object-fit: contain
}

.xb-providers,
.xb-game-dialog {
    color: var(--xb-c-eeeeee, #eeeeee);
    background: var(--xb-c-23232b, #23232b);
    border: 1px solid #494955;
    padding: 16px;
    max-height: 85dvh;
    width: calc(100% - 16px);
    max-width: 550px;
    overflow: auto;
    border-radius: 18px
}

.xb-providers {
    margin: auto auto 0;
    border-radius: 20px 20px 0 0;
    width: 100%
}

.xb-theme dialog::backdrop {
    background: #0009
}

.xb-provider-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.xb-provider-heading h2 {
    font-size: 16px;
    margin: 0
}

.xb-provider-heading button {
    background: none;
    border: 0;
    color: var(--xb-c-999999, #999999)
}

.xb-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px
}

.xb-provider-grid>button {
    min-height: 75px;
    border: 1px solid #444450;
    background: #2d2d39;
    color: var(--xb-c-bbbbbb, #bbbbbb);
    border-radius: 8px;
    padding: 10px 5px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    overflow-wrap: anywhere
}

.xb-provider-grid>button[aria-pressed=true] {
    border-color: var(--xb-c-ff790f, #ff790f);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-provider-grid img {
    max-width: 100%;
    height: 32px;
    object-fit: contain
}

.xb-game-dialog {
    text-align: center;
    padding-top: 42px
}

.xb-game-dialog>.xb-icon-button {
    position: absolute;
    right: 10px;
    top: 5px
}

.xb-game-dialog>img {
    width: 100%;
    max-height: 230px;
    object-fit: contain;
    border-radius: 10px
}

.xb-game-dialog>h2 {
    font-size: 18px;
    margin: 15px 0 6px
}

.xb-game-dialog>p {
    font-size: 12px;
    color: var(--xb-c-999999, #999999)
}

.xb-page-history .xb-page-content>div:first-child>h4 {
    display: none
}

.xb-page-history #pills-tab {
    flex-wrap: nowrap;
    overflow: auto;
    scrollbar-width: none;
    gap: 6px !important
}

.xb-page-history #pills-tab .nav-link {
    white-space: nowrap;
    background: var(--xb-c-33333e, #33333e);
    border-radius: 5px;
    color: var(--xb-c-aaaaaa, #aaaaaa);
    font-size: 11px;
    padding: 10px
}

.xb-page-history #pills-tab .nav-link.active {
    background: var(--xb-c-ff790f, #ff790f);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-page-history .tab-pane>.text-center>i {
    display: none
}

.xb-page-history .tab-pane>.text-center {
    padding-top: 90px !important;
    color: var(--xb-c-bcbcc4, #bcbcc4) !important
}

.xb-theme .bcm-container {
    padding: 8px 0 25px;
    max-width: none
}

.xb-theme .bcm-hero {
    background: none;
    border: 0;
    padding: 8px 0;
    text-align: left;
    margin-bottom: 12px
}

.xb-theme .bcm-hero:after {
    display: none
}

.xb-theme .bcm-hero h1 {
    font-size: 16px;
    font-weight: 500
}

.xb-theme .bcm-hero p {
    font-size: 12px
}

.xb-theme .bcm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.xb-theme .bcm-card {
    border: 0;
    border-radius: 6px;
    background: var(--xb-c-2b2b37, #2b2b37);
    box-shadow: none;
    overflow: hidden
}

.xb-theme .bcm-card-img {
    height: auto;
    aspect-ratio: 1.63
}

.xb-theme .bcm-card-img img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.xb-theme .bcm-card:has(.bcm-card-img img) .bcm-card-body,
.xb-theme .bcm-card:has(.bcm-card-img img) .bcm-card-badge {
    display: none
}

.xb-theme :is(.bcm-wallet, .bcm-promo, .bcm-claim-box, .bcm-claim-trigger-btn, .bcm-selected-preview, .bcm-bonus-card, .bcm-sheet-stats) {
    background: var(--xb-c-2b2b37, #2b2b37);
    border-color: var(--xb-c-41414b, #41414b);
    box-shadow: none;
    border-radius: 10px
}

.xb-theme .bcm-sheet-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    margin: 18px 0;
}

.xb-theme .bcm-sheet-stats > div {
    min-width: 0;
    min-height: 76px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    background: var(--xb-c-2b2b37, #2b2b37);
    border: 1px solid var(--xb-c-41414b, #41414b);
    border-radius: 10px;
    text-align: left;
}

.xb-theme .bcm-sheet-stats .st-l {
    margin: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--text-secondary, #b1bad3);
}

.xb-theme .bcm-sheet-stats .st-v {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    color: var(--text-primary, #fff);
}

.xb-theme .bcm-sheet-stats > div:nth-child(-n+2) .st-v {
    color: var(--accent-green, #ff790f);
}

.xb-theme :is(.bcm-bs-panel, .bcm-sheet, .bcm-result-card) {
    background: var(--xb-c-23232b, #23232b);
    border-color: var(--xb-c-41414b, #41414b)
}

.xb-theme :is(.bcm-btn-claim, .bcm-sheet-btn, .bcm-result-ok, .bcm-promo button) {
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b);
    border: 0;
    box-shadow: none;
    border-radius: 9px
}

.xb-theme :is(.bcm-wl-value.green, .bcm-wl-value.gold, .bcm-h-amount, .bcm-box-title, .bcm-sp-change) {
    color: var(--xb-c-ff8c33, #ff8c33)
}

.xb-theme .bcm-bonus-card.selected {
    border-color: var(--xb-c-ff790f, #ff790f);
    background: color-mix(in srgb, var(--xb-c-ff790f, #ff790f) 8.235%, transparent)
}

.xb-theme :is(.bcm-section-title, .bcm-bs-title) {
    font-size: 14px
}

.xb-theme .bcm-promo input {
    background: var(--xb-c-2b2b37, #2b2b37);
    color: var(--xb-c-dddddd, #dddddd);
    border-color: var(--xb-c-41414b, #41414b)
}

.xb-bonus-filters {
    margin: 6px 0 12px
}

.xb-bonus-filters>button {
    flex-basis: calc(25% - 4px)
}

.xb-theme .providers-hero {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 16px 0;
    margin-bottom: 12px;
    text-align: left
}

.xb-theme .providers-hero:before {
    display: none
}

.xb-theme .providers-hero h1 {
    font-size: 18px !important
}

.xb-theme .provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
}

.xb-theme .provider-card {
    background: var(--xb-c-2b2b37, #2b2b37);
    border: 0;
    border-radius: 8px;
    min-height: 95px;
    padding: 12px 5px;
    box-shadow: none;
    transform: none
}

.xb-theme .provider-logo-container {
    height: 38px;
    width: 100%;
    margin-bottom: 6px;
    background: none
}

.xb-theme .provider-logo-container img {
    max-height: 38px
}

.xb-theme .provider-card h3 {
    font-size: 11px
}

.xb-history-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.xb-history-types {
    display: flex;
    gap: 8px;
    margin: 0 0 14px
}

.xb-history-types>a {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    background: var(--xb-c-33333e, #33333e);
    color: var(--xb-c-aaaaaa, #aaaaaa);
    font-size: 11px
}

.xb-history-types>a[aria-current=page] {
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b)
}

.xb-history-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 10px;
    border-bottom: 1px solid var(--xb-c-3a3a44, #3a3a44);
    background: color-mix(in srgb, var(--xb-c-2b2b37, #2b2b37) 20%, transparent)
}

.xb-history-row>div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0
}

.xb-history-row>div:last-child {
    text-align: right;
    flex-shrink: 0
}

.xb-history-row strong {
    font-size: 13px;
    font-weight: 500
}

.xb-history-row :is(time, span) {
    font-size: 11px;
    color: var(--xb-c-a7a7af, #a7a7af)
}

.xb-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    height: calc(50px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 15px 0 17px;
    background: var(--xb-c-23232b, #23232b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.xb-logo {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 42%;
    height: 42px;
    white-space: nowrap
}

.xb-logo img {
    display: block;
    object-fit: contain;
    max-width: 110px;
    max-height: 36px
}

.xb-logo strong {
    font-size: 25px;
    letter-spacing: -1px;
    font-weight: 700
}

.xb-logo-mark {
    font-size: 46px;
    line-height: 1;
    color: var(--xb-c-ff7909, #ff7909);
    font-style: italic;
    font-weight: 900;
    text-shadow: 2px 1px 0 #8d3500;
    margin-right: 3px
}

.xb-header-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.xb-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--xb-c-a7a7af, #a7a7af);
    padding: 0
}

.xb-more {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background: #35353f
}

.xb-more .xb-icon {
    font-size: 19px
}

.xb-user-button .xb-icon {
    font-size: 29px
}

.xb-close .xb-icon {
    font-size: 24px
}

.xb-header-balance {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

.xb-login-button,
.xb-register-button,
.xb-small-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 20px;
    white-space: nowrap
}

.xb-login-button {
    border: 1px solid var(--xb-c-ff6500, #ff6500)
}

.xb-register-button {
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b)
}

.xb-small-button {
    background: #2b2b34;
    padding: 0 10px
}

.xb-content {
    min-height: 55vh
}

.xb-page-content {
    padding: 8px;
    min-width: 0
}

.xb-page-index .xb-page-content {
    padding: 0 8px
}

.xb-loyalty-strip {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 16px;
    background: var(--xb-c-23232b, #23232b);
    font-size: 11px
}

.xb-loyalty-strip>a {
    color: #dfb565;
    display: flex;
    align-items: center;
    gap: 8px
}

.xb-loyalty-strip>div {
    display: flex;
    gap: 18px
}

.xb-loyalty-strip>div a {
    color: var(--xb-c-ff8c33, #ff8c33)
}

.xb-loyalty-strip .xb-icon {
    font-size: 18px
}

.xb-dock {
    position: fixed;
    z-index: 1050;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 5px 9px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--xb-c-ff7b20, #ff7b20);
    border-radius: 25px 25px 0 0;
    background: var(--xb-c-33333c, #33333c);
    box-shadow: 0 -3px 8px #0003;
    align-items: start
}

.xb-dock>a,
.xb-dock>button {
    border: 0;
    background: transparent;
    color: var(--xb-c-dddddd, #dddddd);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 5px 1px 0;
    font-size: 10px;
    font-weight: 500;
    height: 49px
}

.xb-dock>a>span,
.xb-dock>button>span:last-child {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
}

.xb-dock .xb-icon {
    font-size: 23px
}

.xb-dock>a[aria-current=page] {
    color: var(--xb-c-ff8c33, #ff8c33)
}

.xb-dock .xb-dock-menu {
    position: relative;
    padding-top: 28px
}

.xb-dock-circle {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    background: var(--xb-orange);
    border: 1px solid var(--xb-c-ffa763, #ffa763);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--xb-c-33333c, #33333c);
    color: var(--xb-button-text, #23232b)
}

.xb-dock-circle .xb-icon {
    font-size: 27px
}

.xb-dock-menu[aria-expanded=true] .xb-dock-circle {
    top: -19px
}

.xb-drawer-handle {
    width: 30px;
    height: 2px;
    background: var(--xb-c-73737a, #73737a);
    margin: 12px auto 14px
}

.xb-menu {
    position: fixed;
    inset: 50px 0 calc(60px + env(safe-area-inset-bottom));
    z-index: 1040;
    background: linear-gradient(180deg, var(--xb-c-313139, #313139), var(--xb-c-23232b, #23232b));
    overflow-y: auto;
    padding: 0 16px 24px;
    overscroll-behavior: contain
}

.xb-menu-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--xb-c-505057, #505057);
    border-radius: 7px;
    background: var(--xb-c-45454c, #45454c);
    height: 42px;
    margin-bottom: 15px;
    padding: 0 14px
}

.xb-menu-search input {
    background: none;
    border: 0;
    color: var(--xb-c-ffffff, #ffffff);
    min-width: 0;
    flex: 1;
    outline: 0
}

.xb-menu-search .xb-icon {
    font-size: 18px
}

.xb-menu-list {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.xb-menu-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--xb-c-2c2c35, #2c2c35), var(--xb-c-3a3a43, #3a3a43));
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 1.961%, transparent);
    overflow: hidden;
    touch-action: pan-y
}

.xb-menu-row>a {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px 0 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--xb-c-c1c1c6, #c1c1c6);
    transition: transform .2s;
    background: inherit;
    border-radius: 12px
}

.xb-menu-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px
}

.xb-menu-icon {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center
}

.xb-menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.xb-menu-row.show-pin>a,
.xb-menu-row:has(>button:focus-visible)>a {
    transform: translateX(-54px)
}

.xb-menu-row>a>.xb-icon {
    font-size: 15px;
    color: var(--xb-c-85858e, #85858e)
}

.xb-menu-row>button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 54px;
    border: 0;
    background: var(--xb-c-45454f, #45454f);
    color: var(--xb-c-8d8d96, #8d8d96);
    padding: 7px 12px
}

.xb-menu-row>button[aria-pressed=true] {
    color: var(--xb-c-ff8c33, #ff8c33)
}

.xb-quick {
    position: fixed;
    top: 50px;
    right: 8px;
    z-index: 1060;
    min-width: 230px;
    border: 1px solid #4b4b54;
    border-radius: 10px;
    background: var(--xb-c-2b2b35, #2b2b35);
    padding: 32px 16px 12px;
    box-shadow: 0 12px 35px #0008
}

.xb-quick>a,
.xb-language {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #414149;
    font-size: 13px
}

.xb-language {
    justify-content: space-between;
    border: 0
}

.xb-quick-close {
    position: absolute;
    right: 4px;
    top: 2px
}

.xb-support {
    position: fixed;
    bottom: 12px;
    right: 0;
    z-index: 1080;
    width: 74px;
    height: 74px;
    border: 2px solid var(--xb-c-ffffff, #ffffff);
    border-radius: 50%;
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b);
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--xb-c-ff6500, #ff6500), 0 2px 8px #0005;
    line-height: 12px
}

.xb-support>.xb-icon {
    font-size: 29px
}

.xb-support>span {
    font-size: 12px;
    font-weight: 900
}

.xb-theme:has(.xb-dock) .xb-support {
    bottom: calc(10px + env(safe-area-inset-bottom))
}

.xb-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    margin: 0 0 6px;
    aspect-ratio: 2.08;
    background: #292932
}

.xb-hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .3s ease;
    touch-action: pan-y
}

.xb-hero-slide {
    display: block;
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    overflow: hidden
}

.xb-hero-slide>img,
.xb-hero-slide>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.xb-hero-counter {
    position: absolute;
    right: 12px;
    top: 10px;
    padding: 2px 7px;
    border-radius: 2px;
    background: #1e1e28aa;
    color: var(--xb-c-dddddd, #dddddd);
    font-size: 12px;
    pointer-events: none
}

.xb-hero-arrow {
    position: absolute;
    bottom: 7px;
    width: 28px;
    height: 24px;
    background: color-mix(in srgb, var(--xb-c-23232b, #23232b) 60%, transparent);
    color: var(--xb-c-ffffff, #ffffff);
    border: 0;
    border-radius: 3px
}

.xb-hero-arrow.prev {
    right: 40px
}

.xb-hero-arrow.next {
    right: 8px
}

.xb-hero-arrow>.xb-icon {
    font-size: 15px
}

.xb-hero-copy {
    height: 100%;
    position: relative;
    background: linear-gradient(125deg, #22222c 15%, #773410 65%, var(--xb-c-ff7600, #ff7600));
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.xb-hero-copy:after {
    content: 'ϟ';
    position: absolute;
    right: 15px;
    bottom: -35px;
    font-size: 230px;
    font-style: italic;
    line-height: 1;
    color: #ff7b244d;
    transform: rotate(10deg)
}

.xb-hero-copy>span {
    font-size: 11px;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.xb-hero-copy>strong {
    font-size: clamp(22px, 6vw, 38px);
    line-height: 1.1;
    max-width: 75%;
    position: relative;
    z-index: 1
}

.xb-hero-copy>small {
    display: inline-block;
    border: 1px solid var(--xb-c-ff6500, #ff6500);
    border-radius: 20px;
    padding: 3px 10px;
    margin-top: 12px;
    font-size: 9px;
    position: relative;
    z-index: 1
}

.xb-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin: 4px 0 8px
}

.xb-section-heading h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    white-space: nowrap
}

.xb-section-heading>a {
    font-size: 13px;
    color: var(--xb-c-bbbbbb, #bbbbbb);
    display: flex;
    align-items: center;
    gap: 9px
}

.xb-section-heading .xb-icon {
    font-size: 16px
}

.xb-game-section {
    margin: 15px 0 8px
}

.xb-game-rail {
    display: flex;
    gap: 7px;
    overflow: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity
}

.xb-game-rail::-webkit-scrollbar {
    display: none
}

.xb-game-tile {
    flex: 0 0 calc(44% - 5px);
    overflow: hidden;
    border-radius: 8px;
    background: var(--xb-c-30303a, #30303a);
    aspect-ratio: 1.45;
    scroll-snap-align: start
}

.xb-game-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.xb-game-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    background: radial-gradient(ellipse at 30% 10%, #fc79003a, transparent), var(--xb-c-30303a, #30303a)
}

.xb-game-placeholder>.xb-icon {
    font-size: 35px;
    color: var(--xb-c-ff8c33, #ff8c33)
}

.xb-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 20px 0 6px
}

.xb-product {
    background: linear-gradient(145deg, #16161d, #72380f 70%, var(--xb-c-dc5900, #dc5900));
    border: 1px solid color-mix(in srgb, var(--xb-c-ff8c33, #ff8c33) 10.98%, transparent);
    border-radius: 6px;
    aspect-ratio: .78;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    padding: 10px 4px;
    gap: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden
}

.xb-product img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.xb-product .xb-icon {
    font-size: 48px;
    color: var(--xb-c-ffa151, #ffa151);
    filter: drop-shadow(0 5px 5px #0009)
}

.xb-product-row {
    display: flex;
    gap: 5px;
    overflow: auto;
    scrollbar-width: none
}

.xb-product-row>.xb-product {
    flex: 1 0 18%;
    min-height: 85px;
    font-size: 9px;
    gap: 8px;
    aspect-ratio: .8
}

.xb-product-row .xb-icon {
    font-size: 29px
}

.xb-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 20px 0 7px
}

.xb-product-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--xb-c-ff8c33, #ff8c33) 22%, transparent);
    border-radius: 6px;
    background: var(--xb-c-2b2b37, #2b2b37);
    box-shadow: 0 2px 5px #0005
}

.xb-category-card {
    position: relative;
    aspect-ratio: 1.76
}

.xb-category-card>img,
.xb-shortcut-card>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.xb-category-card>.xb-card-label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px 5px 5px;
    background: linear-gradient(transparent, #000b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    letter-spacing: .1px
}

.xb-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 16px
}

.xb-shortcut-card {
    aspect-ratio: .58;
    border-color: color-mix(in srgb, var(--xb-c-ff8c33, #ff8c33) 16%, transparent);
    box-shadow: 0 2px 5px #0006
}

.xb-card-disabled {
    cursor: default;
    user-select: none
}

.xb-winners {
    margin: 5px 0 24px
}

.xb-winner-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px
}

.xb-winner-tabs h2 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 auto 0 0
}

.xb-winner-tabs button {
    border: 0;
    border-radius: 14px;
    background: var(--xb-c-33333e, #33333e);
    color: var(--xb-c-babac1, #babac1);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700
}

.xb-winner-tabs button[aria-selected=true] {
    background: var(--xb-c-eeeeee, #eeeeee);
    color: var(--xb-c-44444c, #44444c)
}

.xb-theme .xb-winners .recent-winners {
    margin: 10px 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none
}

.xb-theme .xb-winners .recent-winner-card {
    border: 0;
    border-radius: 7px;
    background: var(--xb-c-38383f, #38383f);
    width: 195px;
    height: 64px;
    padding: 6px;
    gap: 7px;
    box-shadow: none
}

.xb-theme .xb-winners .recent-winner-card__art {
    width: 51px;
    height: 51px;
    flex: 0 0 51px;
    border: 0;
    border-radius: 4px
}

.xb-theme .xb-winners .recent-winner-card__art img {
    width: 51px;
    height: 51px;
    object-fit: cover
}

.xb-theme .xb-winners .recent-winner-card__content {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.xb-theme .xb-winners .recent-winner-card__user {
    font-size: 10px;
    color: var(--xb-c-a7a7af, #a7a7af)
}

.xb-theme .xb-winners .recent-winner-card__avatar {
    display: none
}

.xb-theme .xb-winners .recent-winner-card__game {
    order: 1;
    font-size: 11px;
    color: var(--xb-c-bcbcc4, #bcbcc4)
}

.xb-theme .xb-winners .recent-winner-card__content strong {
    order: 2;
    color: var(--xb-c-eeeeee, #eeeeee);
    font-size: 13px
}

.xb-section-title {
    height: 69px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(90deg, transparent, var(--xb-c-33333d, #33333d), transparent);
    border-bottom: 1px solid #ff6d0055
}

.xb-section-title h1 {
    font-size: 16px;
    font-weight: 500;
    margin: 0
}

.xb-section-title>a {
    display: flex;
    align-items: center
}

.xb-section-title .xb-icon {
    font-size: 21px
}

.xb-tabs {
    height: 40px;
    display: flex;
    align-items: stretch;
    overflow: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #ff6d0077;
    background: linear-gradient(90deg, var(--xb-c-2b2b35, #2b2b35), #393943, var(--xb-c-2b2b35, #2b2b35))
}

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

.xb-tabs>a {
    white-space: nowrap;
    flex: 1 0 auto;
    font-size: 10px;
    letter-spacing: .4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-bottom: 2px solid transparent
}

.xb-tabs>a.active {
    border-bottom-color: var(--xb-c-ff790f, #ff790f);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-account-page {
    background: var(--xb-c-23232b, #23232b) !important;
    padding-bottom: 24px !important
}

.xb-account-page .xb-page-content {
    padding: 16px 8px 70px
}

.xb-page-account .xb-page-content:has(.xb-account-home) {
    padding-top: 20px
}

.xb-wallet-rail {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 35px 9px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 35px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none
}

.xb-wallet-rail:focus-visible {
    outline: 2px solid var(--xb-c-ff8c33, #ff8c33);
    outline-offset: 2px;
    border-radius: 11px
}

.xb-wallet-rail.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto
}

.xb-wallet-card {
    flex: 0 0 300px;
    max-width: calc(100vw - 90px);
    border-radius: 10px;
    min-height: 120px;
    padding: 12px 15px;
    scroll-snap-align: center;
    background: linear-gradient(115deg, var(--xb-c-ff963e, #ff963e), var(--xb-c-ff6500, #ff6500));
    position: relative;
    overflow: hidden
}

.xb-wallet-card:after {
    content: '\e92c';
    font-family: XbahisIcons;
    position: absolute;
    right: -8px;
    top: -15px;
    font-size: 100px;
    color: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 7.059%, transparent);
    pointer-events: none
}

.xb-wallet-card>span {
    display: block;
    font-size: 14px;
    font-weight: 700
}

.xb-wallet-card>strong {
    display: block;
    font-size: 19px;
    line-height: 24px
}

.xb-wallet-card.secondary {
    background: var(--xb-c-44444f, #44444f)
}

.xb-wallet-card.secondary small {
    color: var(--xb-c-c6c6cc, #c6c6cc);
    display: block;
    margin-top: 8px
}

.xb-wallet-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px
}

.xb-wallet-actions>a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--xb-c-ffffff, #ffffff) 14.902%, transparent);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700
}

.xb-wallet-actions .xb-icon {
    font-size: 20px
}

.xb-club {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 48px;
    background: linear-gradient(90deg, #795710, #b08703);
    border: 1px solid #a27817;
    border-radius: 4px;
    margin: 2px 0 9px;
    padding: 0 18px
}

.xb-club .xb-icon {
    font-size: 23px;
    color: #edb766
}

.xb-user-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 14px;
    min-height: 36px
}

.xb-user-summary>a:last-child {
    margin-left: auto
}

.xb-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #505059;
    color: var(--xb-c-bbbbbb, #bbbbbb);
    font-size: 12px
}

.xb-user-summary p {
    margin: 0;
    font-size: 12px
}

.xb-user-summary small {
    font-size: 11px;
    color: #9696a1;
    display: flex;
    align-items: center;
    gap: 5px
}

.xb-copy {
    border: 0;
    background: none;
    padding: 0;
    color: var(--xb-c-a7a7af, #a7a7af)
}

.xb-copy .xb-icon {
    font-size: 13px
}

.xb-account-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px 14px 20px
}

.xb-account-menu>a,
.xb-account-menu>button {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-height: 48px;
    padding: 8px 17px;
    border: 0;
    background: none;
    color: #f1f1f3;
    text-align: left;
    font-size: 15px
}

.xb-account-menu :is(a, button)>.xb-icon:last-child {
    margin-left: auto;
    color: #95959f;
    font-size: 16px
}

.xb-account-menu>a>.xb-icon:first-child,
.xb-account-menu>button>.xb-icon:first-child {
    font-size: 22px;
    width: 23px;
    text-align: center
}

.xb-menu-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    margin: 22px 10px 10px
}

.xb-menu-subtitle>button {
    background: transparent;
    border: 0;
    color: var(--xb-c-999999, #999999)
}

.xb-promo {
    display: flex;
    gap: 10px;
    margin: 10px 0
}

.xb-promo input {
    flex: 1;
    min-width: 0;
    height: 52px;
    background: var(--xb-c-2b2b37, #2b2b37);
    border: 0;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 12px;
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-promo button {
    background: var(--xb-orange);
    border: 0;
    border-radius: 10px;
    padding: 0 30px;
    font-size: 12px;
    color: var(--xb-button-text, #23232b)
}

.xb-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    min-height: 42px;
    background: #17171f;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700
}

.xb-logout .xb-icon {
    font-size: 16px
}

.xb-field {
    position: relative;
    display: block;
    margin: 0 0 10px;
    border-radius: 10px;
    background: var(--xb-c-2b2b37, #2b2b37);
    min-height: 52px;
    color: #9999a5;
    overflow: hidden
}

.xb-field>span {
    position: absolute;
    left: 14px;
    top: 9px;
    z-index: 1;
    font-size: 12px;
    pointer-events: none
}

.xb-field>input,
.xb-field>select,
.xb-field>textarea {
    display: block;
    border: 0;
    border-radius: 10px;
    background: transparent;
    width: 100%;
    min-height: 52px;
    padding: 23px 14px 8px;
    outline: 0;
    color: var(--xb-c-dddddd, #dddddd);
    font-size: 14px;
    box-shadow: none
}

.xb-field>textarea {
    min-height: 110px
}

.xb-field:focus-within {
    box-shadow: inset 0 0 0 1px var(--xb-c-ff8c33, #ff8c33)
}

.xb-field>input:disabled {
    opacity: .75;
    -webkit-text-fill-color: var(--xb-c-dddddd, #dddddd)
}

.xb-field .xb-password-toggle {
    position: absolute;
    right: 7px;
    top: 10px;
    border: 0;
    background: transparent;
    color: #9898a4;
    width: 30px;
    height: 30px
}

.xb-field:has(.xb-password-toggle)>input {
    padding-right: 44px
}

.xb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 9px;
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b);
    font-size: 12px;
    font-weight: 500;
    text-align: center
}

.xb-button:disabled {
    opacity: .5;
    cursor: default
}

.xb-button.secondary {
    background: var(--xb-c-44444e, #44444e);
    color: var(--xb-c-ffffff, #ffffff)
}

.xb-form-note {
    color: var(--xb-c-a7a7af, #a7a7af);
    font-size: 12px;
    margin: 5px 0 26px
}

.xb-form-note strong {
    color: var(--xb-c-ff790f, #ff790f)
}

.xb-alert {
    background: #6a2c333d;
    border: 1px solid #af555955;
    color: #ffc3c3;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 14px;
    font-size: 13px
}

.xb-alert.success {
    background: #28573b55;
    border-color: #60c78255;
    color: #acdfbc
}

.xb-auth-page {
    background: var(--xb-c-23232b, #23232b) !important;
    border: 1px solid #ff6b00;
    border-radius: 35px;
    min-height: 100dvh;
    padding-bottom: 0 !important
}

.xb-auth-page .xb-header {
    border-radius: 35px 35px 0 0;
    border-bottom: 1px solid var(--xb-c-38383f, #38383f);
    padding-left: 18px;
    padding-right: 8px
}

.xb-auth-page .xb-page-content {
    padding: 0 7px
}

.xb-auth-form {
    min-height: calc(100dvh - 52px);
    display: flex;
    flex-direction: column;
    padding-top: clamp(90px, 29.5dvh, 270px)
}

.xb-auth-form h1 {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 14px
}

.xb-auth-form .xb-field {
    margin-bottom: 15px
}

.xb-remember {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: -3px 0 14px;
    color: var(--xb-c-c8c8ce, #c8c8ce);
    font-size: 14px
}

.xb-remember input {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--xb-c-494953, #494953);
    border: 0;
    border-radius: 4px
}

.xb-remember input:checked {
    background: var(--xb-c-ff790f, #ff790f);
    box-shadow: inset 0 0 0 3px var(--xb-c-494953, #494953)
}

.xb-auth-forgot {
    display: block;
    margin: auto auto 0;
    padding: clamp(40px, 16dvh, 165px) 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--xb-c-c9c9d0, #c9c9d0)
}

.xb-auth-support {
    display: block;
    margin: auto auto 0;
    padding: 60px 0 20px;
    text-align: center;
    text-decoration: underline !important;
    font-size: 13px;
    font-weight: 700;
    color: #9999a4 !important
}

.xb-auth-support .xb-icon {
    font-size: 16px;
    margin-right: 7px;
    vertical-align: middle
}

.xb-auth-page :is(.bg-pattern, .bg-orb, .register-hero, .forgot-hero, .auth-hero) {
    display: none !important
}

.xb-auth-page :is(.register-container, .forgot-container, .reset-container) {
    min-height: 0;
    padding: 28px 0 !important;
    width: 100%;
    max-width: none
}

.xb-auth-page .glass-card {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important
}

.xb-auth-page :is(.form-control-custom, .form-control, .form-select) {
    background: var(--xb-c-2b2b37, #2b2b37) !important;
    color: var(--xb-c-eeeeee, #eeeeee) !important;
    border: 0 !important;
    min-height: 52px;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 15px !important
}

.xb-auth-page :is(.btn-premium, .btn-primary) {
    background: var(--xb-orange) !important;
    color: var(--xb-button-text, #23232b) !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 9px !important;
    min-height: 38px
}

.xb-auth-page :is(.form-label-custom, .form-label) {
    font-size: 12px !important;
    color: var(--xb-c-aaaab6, #aaaab6) !important
}

.xb-auth-page :is(.name-fieldset, .registration-progress) {
    background: transparent !important;
    border: 0 !important
}

.xb-auth-page :is(.registration-progress-bar, #registrationProgressBar) {
    background: var(--xb-c-ff790f, #ff790f) !important
}

.xb-auth-page :is(.optional-tag, .name-fieldset-help) {
    color: #9595a2 !important
}

.xb-theme :is(.modal-content, .offcanvas) {
    background: var(--xb-c-23232b, #23232b) !important;
    color: var(--xb-c-eeeeee, #eeeeee);
    border: 1px solid #494954;
    border-radius: 12px
}

.xb-theme :is(.modal-header, .modal-footer) {
    border-color: var(--xb-c-44444e, #44444e)
}

.xb-theme :is(.btn-primary, .btn-success, .play-btn, .mobile-play-btn) {
    background: var(--xb-orange) !important;
    border-color: var(--xb-c-ff790f, #ff790f) !important;
    color: var(--xb-button-text, #23232b) !important;
    box-shadow: none !important
}

.xb-theme :is(.form-control, .form-select) {
    color: var(--xb-c-eeeeee, #eeeeee);
    background: var(--xb-c-2b2b37, #2b2b37);
    border-color: #41414c;
    box-shadow: none
}

.xb-theme :is(.form-control, .form-select):focus {
    border-color: var(--xb-c-ff790f, #ff790f)
}

.xb-theme .btn-close {
    filter: invert(1)
}

.xb-theme .text-primary {
    color: var(--xb-c-ff790f, #ff790f) !important
}

.xb-theme :is(.card, .history-card, .bonus-card, .vip-card) {
    background: #2c2c37;
    border-color: var(--xb-c-41414b, #41414b);
    box-shadow: none
}

.xb-theme .mfooter {
    background: transparent !important;
    border: 0 !important;
    margin-top: 25px
}

.xb-theme .mfooter h6 {
    color: var(--xb-c-aeaec0, #aeaec0) !important
}

.xb-theme .mfooter :is(.mfooter-social-link, .mfooter-socials a) {
    background: var(--xb-orange) !important;
    color: var(--xb-button-text, #23232b) !important;
    border-radius: 8px !important
}

.xb-theme .mfooter :is(img, .mfooter-payment-logo) {
    filter: none !important
}

.xb-theme .mfooter :is(.mfooter-spark-logo, .mfooter-logo) {
    filter: none !important
}

.xb-theme :is(.mdep-header, .mwd-header) {
    display: none !important
}

.xb-theme :is(.mdep-section-label, .mwd-section-label) {
    color: var(--xb-c-bcbcc6, #bcbcc6);
    margin: 8px 0 10px
}

.xb-payment-filters {
    display: flex;
    gap: 5px;
    overflow: auto;
    scrollbar-width: none;
    margin: 0 0 22px
}

.xb-payment-filters>button {
    flex: 0 0 82px;
    height: 61px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--xb-c-33333e, #33333e);
    border: 0;
    border-radius: 5px;
    color: var(--xb-c-a6a6b0, #a6a6b0);
    font-size: 9px
}

.xb-payment-filters>button>.xb-icon {
    font-size: 28px
}

.xb-payment-filters>button[aria-pressed=true] {
    background: var(--xb-orange);
    color: var(--xb-button-text, #23232b)
}

.xb-theme .xb-payment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important
}

.xb-theme :is(.mdep-method, .mwd-method) {
    background: #2c2c38 !important;
    border: 0 !important;
    border-radius: 12px !important;
    min-width: 0;
    padding: 12px !important;
    min-height: 80px;
    position: relative;
    box-shadow: none !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.xb-theme :is(.mdep-method, .mwd-method)>div:first-child {
    width: 100%;
    gap: 7px
}

.xb-theme :is(.mdep-method, .mwd-method) :is(h6, strong) {
    font-size: 10px !important;
    line-height: 1.35;
    margin: 0;
    color: var(--xb-c-dddddd, #dddddd)
}

.xb-theme :is(.mdep-method, .mwd-method) :is(.mdep-method-sub, .mwd-method-sub, small) {
    font-size: 8px !important;
    line-height: 1.4;
    color: var(--xb-c-b9b9c3, #b9b9c3)
}

.xb-theme :is(.mdep-method, .mwd-method) img {
    max-width: 100% !important;
    max-height: 48px !important;
    object-fit: contain;
    border-radius: 4px !important;
    filter: none !important
}

.xb-theme :is(.mdep-method, .mwd-method) :is(.mdep-method-right, .mwd-method-right, .mdep-chevron, .mwd-chevron, .fa-chevron-right) {
    display: none !important
}

.xb-theme :is(.mdep-method-icon, .mwd-method-icon) {
    width: 37px !important;
    height: 46px !important;
    flex: 0 0 37px !important;
    border-radius: 7px !important;
    color: var(--xb-button-text, #23232b) !important;
    background: var(--xb-orange) !important;
    margin: 0 5px 0 0 !important
}

.xb-theme :is(.mdep-method, .mwd-method).exp-method-card {
    flex-direction: column;
    gap: 4px
}

.xb-theme :is(.mdep-method, .mwd-method) .exp-method-logo {
    width: 100%;
    height: 35px
}

.xb-theme .xb-filter-disclosure {
    background: #43434c;
    border-radius: 4px;
    padding: 0;
    margin: 0 0 22px
}

.xb-filter-disclosure summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--xb-c-ffffff, #ffffff);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none
}

.xb-filter-disclosure summary::-webkit-details-marker {
    display: none
}

.xb-filter-disclosure summary>.xb-icon:last-child {
    margin-left: auto;
    font-size: 16px
}

.xb-filter-disclosure>div {
    padding: 10px
}

.xb-empty {
    color: var(--xb-c-bcbcc4, #bcbcc4);
    text-align: center;
    padding: 80px 10px 40px;
    font-size: 16px
}

.xb-notification {
    padding: 15px 10px;
    border-bottom: 1px solid #3e3e48;
    display: block;
    width: 100%;
    text-align: left;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: transparent;
    color: var(--xb-c-dddddd, #dddddd)
}

.xb-notification.unread {
    background: color-mix(in srgb, var(--xb-c-ff6500, #ff6500) 3.922%, transparent);
    border-left: 2px solid var(--xb-c-ff6500, #ff6500)
}

.xb-notification strong {
    font-size: 14px;
    display: block
}

.xb-notification p {
    font-size: 13px;
    margin: 8px 0;
    color: var(--xb-c-b5b5c0, #b5b5c0)
}

.xb-notification time {
    font-size: 11px;
    color: #8f8f9d
}

.xb-toast {
    position: fixed;
    z-index: 20000;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    padding: 12px 18px;
    border: 1px solid var(--xb-c-ff790f, #ff790f);
    border-radius: 10px;
    background: var(--xb-c-292933, #292933);
    color: var(--xb-c-ffffff, #ffffff);
    width: max-content;
    max-width: 90vw;
    box-shadow: 0 10px 25px #0005
}

.xb-game-loader {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    background: color-mix(in srgb, var(--xb-c-23232b, #23232b) 93.725%, transparent)
}

.xb-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid #53535e;
    border-top-color: var(--xb-c-ff790f, #ff790f);
    border-radius: 50%;
    animation: xb-spin .8s linear infinite
}

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

@media(min-width:600px) {
    .xb-hero {
        aspect-ratio: 2.65
    }

    .xb-game-tile {
        flex-basis: calc(25% - 6px)
    }

    .xb-product-grid {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto
    }

    .xb-wallet-card {
        flex-basis: 300px
    }

    .xb-wallet-rail {
        justify-content: center
    }

    .xb-auth-form {
        max-width: 500px;
        margin: auto
    }

    .xb-dock {
        padding-left: 12%;
        padding-right: 12%
    }
}

@media(max-width:350px) {
    .xb-header {
        padding-left: 10px;
        padding-right: 8px
    }

    .xb-header-actions {
        gap: 7px
    }

    .xb-login-button,
    .xb-register-button {
        padding: 0 13px
    }

    .xb-logo strong {
        font-size: 22px
    }

    .xb-dock {
        padding-left: 3px;
        padding-right: 3px
    }

    .xb-dock>a>span {
        font-size: 9px
    }

    .xb-account-menu {
        margin-left: 0;
        margin-right: 0
    }

    .xb-account-menu>a,
    .xb-account-menu>button {
        gap: 24px
    }

    .xb-winner-tabs button {
        padding: 4px 7px;
        font-size: 10px
    }

    .xb-wallet-rail {
        padding-left: 25px;
        padding-right: 25px
    }

    .xb-wallet-card {
        max-width: calc(100vw - 70px)
    }

    .xb-wallet-actions>a {
        font-size: 12px
    }

    .xb-tabs>a {
        font-size: 9px;
        padding: 0 9px
    }
}

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

    .xb-theme *,
    .xb-theme *:before,
    .xb-theme *:after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

.xb-registration {
    height: calc(100dvh - 52px);
    display: flex;
    flex-direction: column
}

.xb-registration-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 0 20px;
    scrollbar-width: none
}

.xb-registration h1,
.xb-recovery h1 {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 14px
}

.xb-registration .xb-field {
    margin: 0 0 15px
}

.xb-registration .xb-field>span,
.xb-recovery .xb-field>span {
    top: 17px;
    transition: top .15s, font-size .15s
}

.xb-registration .xb-field:focus-within>span,
.xb-registration .xb-field:has(input:not(:placeholder-shown))>span,
.xb-recovery .xb-field:focus-within>span,
.xb-recovery .xb-field:has(input:not(:placeholder-shown))>span {
    top: 7px;
    font-size: 10px
}

.xb-auth-page:not(.xb-page-login) .xb-small-button {
    background: none;
    text-decoration: underline;
    font-size: 14px;
    color: var(--xb-c-c0c0c8, #c0c0c8)
}

.xb-registration .xb-field>input {
    padding-top: 21px
}

.xb-registration-field .xb-field {
    margin-bottom: 0
}

.xb-registration-field {
    margin-bottom: 15px
}

.xb-field-error {
    display: block;
    color: #ff9999;
    font-size: 11px;
    padding: 0 5px
}

.xb-field-error:not(:empty) {
    padding-top: 5px
}

.xb-registration-phone {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px
}

.xb-registration-phone .xb-field {
    margin-bottom: 7px
}

.xb-registration .xb-form-note {
    font-size: 11px;
    margin-bottom: 15px
}

.xb-registration .xb-age {
    align-items: flex-start;
    font-size: 12px;
    padding: 8px 0;
    margin: 0
}

.xb-registration .xb-age input {
    flex: 0 0 16px;
    margin: 0
}

.xb-registration-actions {
    flex-shrink: 0;
    margin-top: auto;
    padding: 36px 0 0;
    background: var(--xb-c-23232b, #23232b)
}

.xb-registration-actions .xb-auth-support {
    margin: 19px -7px 0;
    padding: 28px 5px 22px;
    border-top: 1px solid var(--xb-c-38383f, #38383f)
}

.xb-auth-page:not(.xb-page-login) .xb-support {
    display: none
}

.xb-theme .live-support-status:not(:empty) {
    position: fixed;
    z-index: 20000;
    bottom: 95px;
    left: 5%;
    width: 90%;
    padding: 12px;
    background: var(--xb-c-292933, #292933);
    border: 1px solid var(--xb-c-ff790f, #ff790f);
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--xb-c-dddddd, #dddddd)
}

.xb-theme:not(.xb-support-requested) .live-support-status {
    display: none
}

.xb-auth-page:not(.xb-support-enabled) .xb-auth-support {
    display: none
}

.xb-recovery {
    padding-top: 14px;
    min-height: calc(100dvh - 52px)
}

.xb-recovery .xb-field {
    margin-bottom: 15px
}

.xb-recovery .xb-form-note {
    margin-top: 12px;
    line-height: 18px
}

.xb-recovery .xb-form-note .xb-icon {
    font-size: 12px
}

body:is(.xb-page-deposit, .xb-page-withdraw) .xb-page-content {
    padding-top: 0
}

/* Filtering must win over legacy payment-card display declarations. */
body.xb-theme [hidden] {
    display: none !important
}

.xb-vip {
    margin: -10px -8px 0;
    padding: 16px;
    background: linear-gradient(120deg, var(--xb-c-23232b, #23232b), #17171e);
    min-height: calc(100dvh - 150px)
}

.xb-vip-summary {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 18px;
    min-width: 0
}

.xb-vip-emblem {
    display: grid;
    place-items: center;
    width: 110px;
    height: 90px;
    flex-shrink: 0;
    border: 1px solid #45454d;
    border-radius: 18px;
    background: linear-gradient(135deg, #34343c, var(--xb-c-23232b, #23232b))
}

.xb-vip-emblem .xb-icon {
    font-size: 52px;
    color: var(--xb-c-df8848, #df8848)
}

.xb-vip-summary h1 {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere
}

.xb-vip-summary p {
    margin: 2px 0 0;
    color: var(--xb-c-aaaab2, #aaaab2);
    font-size: 13px
}

.xb-vip-caption {
    font-size: 12px;
    margin: 0 0 12px
}

.xb-vip-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--xb-c-a7a7af, #a7a7af)
}

.xb-vip-progress-labels strong {
    color: var(--xb-c-eeeeee, #eeeeee)
}

.xb-vip-progress {
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    border: 1px solid #606068;
    border-radius: 6px;
    background: var(--xb-c-3b3b45, #3b3b45);
    overflow: hidden;
    margin: 4px 0
}

.xb-vip-progress::-webkit-progress-bar {
    background: var(--xb-c-3b3b45, #3b3b45)
}

.xb-vip-progress::-webkit-progress-value {
    background: var(--xb-orange)
}

.xb-vip-progress::-moz-progress-bar {
    background: var(--xb-c-ff790f, #ff790f)
}

.xb-vip-next {
    text-align: right;
    color: var(--xb-c-cccccc, #cccccc);
    margin: 0 0 24px;
    font-size: 13px
}

.xb-vip-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
}

.xb-vip-heading h2,
.xb-vip-log-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0
}

.xb-vip-heading select {
    width: 100px;
    border: 1px solid #575761;
    border-radius: 10px;
    background: #343440;
    color: var(--xb-c-dddddd, #dddddd);
    padding: 5px 10px;
    font-size: 12px
}

.xb-vip-current {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    width: 85%;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--xb-c-565660, #565660);
    border-radius: 24px;
    background: var(--xb-c-2c2c35, #2c2c35);
    font-size: 12px
}

.xb-vip-current strong {
    color: #e7a05c;
    font-weight: 400
}

.xb-vip-claim {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 15px 0 20px
}

.xb-vip-claim>div {
    min-width: 95px
}

.xb-vip-claim strong {
    display: block;
    color: var(--xb-c-ff9d52, #ff9d52);
    font-size: 20px
}

.xb-vip-claim span {
    font-size: 11px;
    color: var(--xb-c-aaaaaa, #aaaaaa)
}

.xb-vip-levels {
    margin: 0 -16px
}

.xb-vip-level {
    background: var(--xb-c-2b2b35, #2b2b35);
    border-block: 1px solid #3c3c46;
    margin-bottom: 8px
}

.xb-vip-level summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 16px;
    cursor: pointer
}

.xb-vip-level summary::-webkit-details-marker {
    display: none
}

.xb-vip-level summary>.xb-icon {
    color: var(--xb-c-dc894d, #dc894d)
}

.xb-vip-level summary>strong {
    font-size: 15px;
    overflow-wrap: anywhere
}

.xb-vip-level summary>span {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    background: var(--xb-c-202028, #202028);
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--xb-c-d3d3da, #d3d3da)
}

.xb-vip-level[open] summary>span {
    color: var(--xb-c-ff9d52, #ff9d52)
}

.xb-vip-level dl {
    margin: 0 16px 16px
}

.xb-vip-level dl>div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--xb-c-41414b, #41414b);
    font-size: 12px
}

.xb-vip-level dt {
    color: var(--xb-c-aaaab4, #aaaab4);
    font-weight: 400
}

.xb-vip-level dd {
    margin: 0;
    text-align: right
}

.xb-vip-perk {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 16px 12px;
    font-size: 12px
}

.xb-vip-perk .xb-icon {
    font-size: 16px;
    color: var(--xb-c-ff9d52, #ff9d52)
}

.xb-vip-explanation {
    border-bottom: 1px solid var(--xb-c-42424c, #42424c);
    padding: 14px 0;
    font-size: 12px
}

.xb-vip-explanation summary {
    cursor: pointer
}

.xb-vip-explanation p {
    color: var(--xb-c-aaaab4, #aaaab4);
    margin: 12px 0 0;
    line-height: 1.7
}

.xb-vip-log-title {
    margin: 24px 0 12px
}

.xb-vip-log {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--xb-c-42424c, #42424c);
    font-size: 12px
}

.xb-vip-log p {
    margin: 4px 0;
    color: var(--xb-c-aaaab4, #aaaab4);
    overflow-wrap: anywhere
}

.xb-vip-log time {
    font-size: 10px;
    color: var(--xb-c-aaaab4, #aaaab4)
}

.xb-vip-log>span {
    flex-shrink: 0;
    color: var(--xb-c-ff9d52, #ff9d52)
}

.xb-verification {
    padding-top: 10px
}

.xb-verification .xb-field {
    margin-bottom: 15px
}

.xb-verification>.xb-form-note {
    margin-bottom: 20px
}

.xb-verification-status {
    text-align: center;
    padding: 55px 16px
}

.xb-verification-status>.xb-icon {
    display: block;
    color: var(--xb-c-ff9d52, #ff9d52);
    font-size: 46px;
    margin-bottom: 22px
}

.xb-verification-status.success>.xb-icon {
    color: #9acbac
}

.xb-verification-status h2 {
    font-size: 16px;
    margin: 0 0 12px
}

.xb-verification-status p {
    font-size: 13px;
    color: var(--xb-c-aaaab4, #aaaab4);
    line-height: 1.7
}

.xb-upload {
    display: block;
    background: var(--xb-c-2b2b37, #2b2b37);
    border: 1px dashed var(--xb-c-51515e, #51515e);
    border-radius: 10px;
    margin: 0 0 15px;
    padding: 14px
}

.xb-upload>span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px
}

.xb-upload strong {
    font-size: 12px;
    font-weight: 400
}

.xb-upload small {
    margin-left: auto;
    color: var(--xb-c-9898a6, #9898a6);
    font-size: 10px
}

.xb-upload .xb-icon {
    font-size: 20px;
    color: var(--xb-c-aaaab4, #aaaab4)
}

.xb-upload input {
    display: block;
    width: 100%;
    font-size: 12px
}

.xb-upload input::file-selector-button {
    border: 0;
    border-radius: 6px;
    padding: 8px 12px;
    background: var(--xb-c-454550, #454550);
    color: var(--xb-c-eeeeee, #eeeeee);
    font: inherit;
    margin-right: 10px
}

.xb-upload-note {
    display: block;
    margin-top: 9px;
    font-size: 11px;
    color: var(--xb-c-aaaab4, #aaaab4);
    overflow-wrap: anywhere
}

.xb-verification .xb-button {
    margin: 24px 0
}

@media(max-width:350px) {
    .xb-vip-summary {
        gap: 14px
    }

    .xb-vip-summary h1 {
        font-size: 24px
    }

    .xb-vip-emblem {
        width: 90px;
        height: 80px
    }

    .xb-vip-current {
        width: 100%
    }
}

.xb-verification-flow {
    padding-top: 36px
}

.xb-verification-symbol {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 24px;
    border: 1px solid var(--border-color);
    color: var(--accent-green)
}

.xb-verification-symbol .xb-icon {
    font-size: 30px
}

.xb-verification-destination {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-card);
    overflow-wrap: anywhere
}

.xb-verification-flow .xb-field {
    margin: 25px 0 10px
}

.xb-verification-flow #xb-verify-code {
    letter-spacing: 8px;
    font-size: 20px
}

.xb-verification-flow form {
    margin-bottom: 18px
}

.xb-verification-flow .xb-form-note {
    line-height: 1.7
}

.xb-verification-flow .xb-verification-back {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 30px 0;
    color: var(--text-secondary);
    font-size: 12px
}

.xb-providers-page {
    padding: 8px
}

.xb-providers-page .xb-section-title {
    margin: 0 -8px 24px
}

.xb-providers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px
}

.xb-providers-grid>a {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 12px;
    min-height: 130px
}

.xb-providers-grid img {
    width: 110px;
    max-width: 100%;
    height: 50px;
    object-fit: contain
}

.xb-providers-grid span {
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    text-align: center
}

.xb-verification-back>.xb-icon {
    font-size: 18px
}

.xb-auth-page {
    border-color: var(--accent-green)
}