@charset "utf-8";

/* ZCOOL XiaoWei subset for the two-glyph Xinglan wordmark (SIL OFL 1.1). */
@font-face {
    font-family: "Xinglan Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("data:font/woff2;base64,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") format("woff2");
    unicode-range: U+661F, U+6F9C;
}

/* Noto Sans SC semibold subset for the four-glyph hero wordmark (SIL OFL 1.1). */
@font-face {
    font-family: "Xinglan Hero";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("data:font/woff;base64,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") format("woff");
    unicode-range: U+4E50, U+5A31, U+661F, U+6F9C;
}

:root {
    --xl-bet-bg: #ececec;
    --xl-bet-panel: #f6f6f6;
    --xl-bet-panel-strong: #ffffff;
    --xl-bet-line: #d8dcde;
    --xl-bet-line-dark: #a9b2b8;
    --xl-bet-text: #56616a;
    --xl-bet-title: #3f494f;
    --xl-bet-muted: #92999e;
    --xl-bet-green: #4f9d83;
    --xl-bet-green-dark: #397d68;
    --xl-bet-teal: #48b6ba;
    --xl-bet-coral: #eb896d;
    --xl-bet-gold: #e7bc59;
}

body.xl-bet-page {
    margin: 0;
    min-width: 1180px;
    min-height: 100vh;
    overflow-x: auto;
    color: var(--xl-bet-text);
    background: var(--xl-bet-bg);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

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

.xl-bet-page *,
.xl-bet-page *::before,
.xl-bet-page *::after {
    box-sizing: border-box;
}

.xl-bet-page .context,
.xl-bet-page #dock3,
.xl-bet-page #jinhu_menu {
    display: none !important;
}

.xl-bet-page a {
    color: inherit;
    text-decoration: none;
}

/* Shared compact account header used by the production template. */
.xl-bet-page .header.xl-compact-header {
    min-height: 46px;
    color: #6f777c;
    background: #f4f5f5;
    border-bottom: 1px solid #d9ddde;
}

.xl-bet-page .xl-compact-header .xl-shell {
    width: 1180px;
    min-height: 46px;
}

.xl-bet-page .xl-brand-cn {
    color: #2f6555;
    font-size: 25px;
}

.xl-bet-page .xl-brand-en {
    color: var(--xl-bet-green);
}

.xl-bet-page .xl-compact-account,
.xl-bet-page .xl-compact-account strong {
    color: #697278;
}

.xl-bet-page .xl-compact-account .xl-account-money {
    color: var(--xl-bet-green-dark);
}

.xl-bet-page .xl-compact-actions a,
.xl-bet-page .xl-compact-actions a:first-child {
    padding: 6px 10px;
    color: #647078;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.xl-bet-page .xl-compact-actions a:hover,
.xl-bet-page .xl-compact-actions a:first-child:hover {
    color: #fff;
    background: var(--xl-bet-green);
}

/* Production betting page: preserve all original IDs and runtime generated nodes. */
.xl-bet-page.detail_bg > .tz_content {
    width: 100%;
    margin: 0;
    padding: 18px 0 0;
    overflow: visible;
}

.xl-bet-page .part_content {
    width: 1180px;
    margin: 0 auto;
}

.xl-bet-page .gameBet {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 808px) minmax(0, 310px);
    gap: 10px;
    align-items: start;
}

.xl-bet-page .xl-play-mode {
    padding-top: 126px;
}

.xl-bet-page .xl-play-mode a {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 8px 5px;
    border-radius: 6px;
    color: #66757a;
    background: #f9f9f9;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    writing-mode: vertical-rl;
}

.xl-bet-page .xl-play-mode a.is-active {
    color: var(--xl-bet-green-dark);
    border-left: 2px solid var(--xl-bet-green);
}

.xl-bet-page .gameBet .gameBet_left,
.xl-bet-page .part_right {
    width: auto;
    min-width: 0;
    float: none;
    overflow: visible;
}

.xl-bet-page .gameBet .gameBet_left {
    min-height: 760px;
}

.xl-bet-page .part_right {
    height: auto;
}

.xl-bet-page .gameBet .g_Time_Section {
    width: 100%;
    height: 108px;
    display: flex;
    align-items: center;
    overflow: visible;
    border-radius: 10px;
    background: rgba(255, 255, 255, .74);
}

.xl-bet-page .part_top_game {
    width: 285px;
    height: 92px;
    display: flex;
    align-items: center;
    padding-left: 14px;
}

.xl-bet-page .part_icon {
    width: 220px;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0;
}

.xl-bet-page .part_icon img {
    max-width: 220px;
    max-height: 76px;
    object-fit: contain;
}

.xl-bet-page .icon_more {
    width: 22px;
    height: 22px;
    margin-left: 10px;
    border: 1px solid var(--xl-bet-line);
    border-radius: 50%;
    background: #fff !important;
}

.xl-bet-page .part_game_tcc {
    top: 90px;
    left: 0;
    background: #fff;
    border: 1px solid var(--xl-bet-line);
    box-shadow: 0 16px 40px rgba(48, 64, 69, .14);
}

.xl-bet-page .part_game_tcc dl dd p,
.xl-bet-page .part_game_tcc dl dd li,
.xl-bet-page .part_game_tcc dl dd li a {
    color: #59666c;
    border-color: var(--xl-bet-line);
}

.xl-bet-page .part_l_detail {
    width: calc(100% - 285px);
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
}

.xl-bet-page .part_l_detail ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.xl-bet-page .part_l_detail ul li {
    float: none;
    margin: 0 8px;
}

.xl-bet-page .part_issue {
    order: 1;
    margin-left: 0;
    color: var(--xl-bet-green-dark);
    font-size: 13px;
}

.xl-bet-page .j_lottery_time {
    order: 2;
}

.xl-bet-page .part_time {
    display: block;
    color: var(--xl-bet-green);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

.xl-bet-page .part_tws {
    order: 3;
    opacity: .6;
}

.xl-bet-page .g_Play_Section,
.xl-bet-page .gameBet_left .g_Number_Section,
.xl-bet-page .g_Panel_Section {
    background: var(--xl-bet-panel);
}

.xl-bet-page .g_Play_Section {
    margin-top: 10px;
    padding: 0 12px;
    border-radius: 10px 10px 0 0;
}

.xl-bet-page .play_select {
    padding-top: 6px;
}

.xl-bet-page .gameBet_left .play_select_tit {
    min-height: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    border-bottom: 1px solid var(--xl-bet-line-dark);
}

.xl-bet-page .gameBet_left .play_select_tit li,
.xl-bet-page .gameBet_left .CzPlay_1000 .play_select_tit li {
    min-width: 80px;
    height: 34px;
    padding: 0 12px;
    line-height: 34px;
    text-align: center;
}

.xl-bet-page .gameBet_left .play_select_tit li:hover,
.xl-bet-page .gameBet_left .play_select_tit li.curr {
    color: var(--xl-bet-green-dark);
    background: transparent;
    border-bottom: 2px solid var(--xl-bet-green);
    border-radius: 0;
}

.xl-bet-page .gameBet_left .play_select_cont {
    margin-bottom: 0;
}

.xl-bet-page .gameBet_left .play_select_cont li.curr {
    padding: 8px 0 5px;
}

.xl-bet-page .gameBet_left .play_select_cont li dl {
    height: 31px;
    margin: 0;
}

.xl-bet-page .gameBet_left .play_select_cont li dl dt {
    width: 70px;
    height: 28px;
    padding: 0;
    color: #5f686e;
    border: 0;
    background: transparent;
    line-height: 28px;
}

.xl-bet-page .gameBet_left .play_select_cont li dl dd {
    min-width: 92px;
    margin-left: 6px;
    padding: 5px 10px;
    text-align: center;
}

.xl-bet-page .gameBet_left .play_select_cont li dl dd.curr,
.xl-bet-page .gameBet_left .play_select_cont li dl dd.curr:hover {
    color: #fff;
    background: var(--xl-bet-green);
    border-radius: 14px;
}

.xl-bet-page .gameBet_left .play_select_cont li dl dd:hover,
.xl-bet-page .gameBet_left .play_select_prompt .example_btn {
    color: var(--xl-bet-green-dark);
}

.xl-bet-page .gameBet_left .g_Number_Section {
    margin: 0;
    padding: 8px 12px 10px;
}

.xl-bet-page .gameBet_left .gn_main_cont {
    padding: 0;
}

.xl-bet-page .gameBet_left .gn_main_cont .ball_section .li_ball {
    min-height: 53px;
    display: flex;
    align-items: center;
    margin: 0;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_tit {
    width: 68px;
    flex: 0 0 68px;
    margin: 0 8px 0 0;
    padding: 0;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_tit strong {
    width: auto;
    height: 30px;
    color: #687177;
    background: transparent;
    font-size: 13px;
    line-height: 30px;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont > li {
    width: 36px;
    margin: 0 3px;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont > li > a {
    width: 34px;
    height: 34px;
    color: #3f484e;
    border: 0;
    background: #e0e2e3;
    font-size: 18px;
    font-weight: 700;
    line-height: 34px;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont > li:hover > a {
    width: 34px;
    height: 34px;
    color: #fff;
    background: #6db29b;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont > li > a.curr,
.xl-bet-page .gameBet_left .ball_section .li_ball .ball_cont > li > a.curr:hover {
    color: #fff;
    background: var(--xl-bet-coral);
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_control {
    flex: 0 0 210px;
    margin: 0;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_control .control_hidden {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_control .control_hidden a {
    width: 28px;
    height: 30px;
    margin: 0;
    color: #56636d;
    border: 1px solid #c7cccf;
    background: #fafafa;
    line-height: 28px;
}

.xl-bet-page .gameBet_left .ball_section .li_ball .ball_control .control_hidden a:hover {
    color: var(--xl-bet-green-dark);
    border-color: var(--xl-bet-green);
}

.xl-bet-page .g_Panel_Section {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--xl-bet-line);
    border-radius: 0 0 10px 10px;
}

.xl-bet-page .g_Panel_Section .choice_cound {
    margin: 0;
    line-height: 34px;
}

.xl-bet-page #choice_Multiple,
.xl-bet-page .g_Panel_Section .choice_cound select {
    height: 30px;
    border: 1px solid #b9c7d2;
    border-radius: 5px;
    box-shadow: none;
}

.xl-bet-page .g_Panel_Section .choice_comfire a {
    min-width: 122px;
    height: 52px;
    padding: 0 20px;
    border-radius: 0 0 10px 0;
    background: var(--xl-bet-green);
    font-size: 15px;
    line-height: 52px;
    text-align: center;
}

.xl-bet-page .c_open {
    min-height: 108px;
    margin: 0;
    padding: 10px 12px 8px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .74);
}

.xl-bet-page .part_r_top {
    color: #6d777d;
    font-size: 12px;
    text-align: center;
}

.xl-bet-page .part_r_top font {
    display: inline-block;
}

.xl-bet-page .part_r_top em {
    color: var(--xl-bet-green-dark);
    font-weight: 700;
}

.xl-bet-page .part_r_number {
    min-height: 58px;
}

.xl-bet-page .part_r_number ul,
.xl-bet-page #openNum_list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.xl-bet-page .part_r_number li,
.xl-bet-page .part_r_number li .li_wrap,
.xl-bet-page .part_r_number li .li_wrap span {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #dfe2e2;
    box-shadow: inset 0 -5px 0 #c9cdce;
    color: #334047;
    font-size: 20px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;
}

.xl-bet-page .part_r_number li:nth-child(-n+2),
.xl-bet-page .part_r_number li:nth-child(-n+2) .li_wrap,
.xl-bet-page .part_r_number li:nth-child(-n+2) .li_wrap span {
    color: #fff;
    background: var(--xl-bet-green);
    box-shadow: inset 0 -5px 0 var(--xl-bet-green-dark);
}

.xl-bet-page .part_r_number li:nth-child(n+3),
.xl-bet-page .part_r_number li:nth-child(n+3) .li_wrap,
.xl-bet-page .part_r_number li:nth-child(n+3) .li_wrap span {
    color: #fff;
    background: var(--xl-bet-coral);
    box-shadow: inset 0 -5px 0 #bd6c57;
}

.xl-bet-page .part_r_agn {
    display: block;
}

.xl-bet-page .part_r_con {
    height: 676px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--xl-bet-panel);
}

.xl-bet-page .part_r_list {
    height: 38px;
    margin: 0 0 8px;
    border: 0;
    border-bottom: 1px solid var(--xl-bet-line-dark);
    border-radius: 0;
    background: transparent;
}

.xl-bet-page .part_r_list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.xl-bet-page .part_r_list ul li,
.xl-bet-page .part_r_list ul li:last-child {
    width: auto;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 38px;
    font-size: 12px;
}

.xl-bet-page .part_r_list ul li.part_blue {
    color: var(--xl-bet-green-dark);
    background: transparent;
    border-bottom: 2px solid var(--xl-bet-green);
}

.xl-bet-page .tab_box {
    height: 360px;
    overflow-y: auto;
}

.xl-bet-page .part_r_tab {
    height: auto;
}

.xl-bet-page .part_r_tab table th {
    color: #8b9296;
    border-color: var(--xl-bet-line);
    font-size: 11px;
}

.xl-bet-page .part_r_tab table td {
    height: 43px;
    padding: 6px 4px;
    border-bottom: 1px solid #e4e5e6;
    font-size: 11px;
}

.xl-bet-page .part_r_tab tbody tr:hover {
    background: #e7efec;
}

.xl-bet-page .part_r_tab tbody tr:hover td,
.xl-bet-page .part_r_tab tbody tr:hover td a {
    color: #526069;
}

.xl-bet-page .part_r_tab .c_org {
    color: var(--xl-bet-coral) !important;
}

.xl-bet-page .part_today {
    height: 102px;
    margin-top: 8px;
    padding-top: 0;
}

.xl-bet-page .part_today_l {
    width: 100%;
    height: 100px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--xl-bet-line-dark);
    border-radius: 9px;
}

.xl-bet-page .part_Section {
    margin-top: 10px;
}

.xl-bet-page .part_today_c {
    height: 30px;
    margin: 4px 0;
    font-size: 12px;
    line-height: 30px;
}

.xl-bet-page .part_today_r,
.xl-bet-page .part_today_r ul {
    width: 150px;
}

.xl-bet-page .part_today_r ul li {
    width: 66px;
    margin-left: 7px;
    border: 1px solid #bfc6c9;
    background: #fff;
    font-size: 11px;
}

.xl-bet-page .part_r_fot {
    padding-top: 5px;
    font-size: 12px;
}

.xl-bet-page .part_btn_true a {
    min-width: 82px;
    display: inline-block;
    padding: 7px 12px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: var(--xl-bet-green);
    text-align: center;
}

.xl-bet-page .part_btn_true a.cancel {
    display: none;
}

.xl-bet-page .additional,
.xl-bet-page .chase_list_cont {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    transform: translate(-50%, -50%);
    z-index: 1200;
}

.xl-bet-page .additional {
    width: 518px;
    height: auto;
}

.xl-bet-page .chase_list_cont {
    width: 522px;
    min-height: 0;
}

.xl-bet-page .xl-record-panel {
    width: 1180px;
    min-height: 360px;
    margin: 20px auto 36px;
    padding: 0 16px;
    background: var(--xl-bet-panel);
}

.xl-bet-page .xl-record-tabs {
    min-height: 45px;
    display: grid;
    grid-template-columns: repeat(6, 112px) 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--xl-bet-line-dark);
}

.xl-bet-page .xl-record-tabs a {
    position: relative;
    padding: 14px 10px 12px;
    color: #68737a;
    font-size: 12px;
    text-align: center;
}

.xl-bet-page .xl-record-tabs a.is-active,
.xl-bet-page .xl-record-tabs a:hover {
    color: var(--xl-bet-green-dark);
}

.xl-bet-page .xl-record-tabs a.is-active::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: -1px;
    left: 24px;
    height: 2px;
    background: var(--xl-bet-green);
}

.xl-bet-page .xl-record-panel table {
    width: 100%;
    border-collapse: collapse;
}

.xl-bet-page .xl-record-panel th {
    height: 55px;
    color: #7c858a;
    border-bottom: 1px solid var(--xl-bet-line-dark);
    font-size: 12px;
    font-weight: 400;
}

.xl-bet-page .xl-record-panel td {
    height: 230px;
    color: #a2a7aa;
    text-align: center;
}

/* Standalone browser preview. */
.xl-bet-preview {
    min-width: min(320px, 100%) !important;
}

.xl-guest-landing[hidden],
.xl-game-experience[hidden] {
    display: none !important;
}

.xl-guest-landing {
    position: fixed;
    inset: 0;
    z-index: 1000;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    color: #f6f3e9;
    background: #071c1d;
    isolation: isolate;
}

.xl-guest-landing::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: rgba(4, 28, 28, .54);
}

.xl-guest-backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    opacity: .84;
    filter: sepia(.34) saturate(1.34) hue-rotate(108deg) contrast(1.08);
    transform: scale(1.01);
}

.xl-guest-header {
    position: relative;
    z-index: 2;
    width: min(1400px, calc(100% - 96px));
    height: 92px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(239, 216, 152, .2);
}

.xl-guest-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
}

.xl-guest-header-brand img {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
}

.xl-guest-header-brand span {
    display: grid;
    gap: 2px;
}

.xl-guest-header-brand strong {
    font-family: "Xinglan Display", "Songti SC", STSong, serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .16em;
    line-height: 1;
}

.xl-guest-header-brand small {
    color: #d9b75e;
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .32em;
    line-height: 1;
}

.xl-guest-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.xl-guest-header-actions button,
.xl-guest-login-button {
    border: 1px solid #d5af55;
    color: #142e2a;
    background: #e6c56e;
    font: inherit;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.xl-guest-header-actions button {
    min-width: 88px;
    height: 36px;
    border-radius: 18px;
    font-size: 12px;
}

.xl-guest-header-actions button.is-secondary,
.xl-guest-login-button.is-secondary {
    color: #f3e5bd;
    border-color: rgba(236, 211, 145, .58);
    background: rgba(9, 49, 43, .48);
    box-shadow: none;
}

.xl-guest-header-actions button.is-secondary:hover,
.xl-guest-login-button.is-secondary:hover {
    color: #142e2a;
    border-color: #f2d98f;
    background: #f2d98f;
}

.xl-guest-header-actions button:hover,
.xl-guest-login-button:hover {
    border-color: #f2d98f;
    background: #f2d98f;
    transform: translateY(-1px);
}

.xl-guest-header-actions button:focus-visible,
.xl-guest-login-button:focus-visible,
.xl-guest-header-brand:focus-visible {
    outline: 2px solid #fff0bb;
    outline-offset: 4px;
}

.xl-guest-header-actions button:disabled,
.xl-guest-login-button:disabled {
    opacity: .52;
    cursor: wait;
    transform: none;
}

.xl-guest-hero {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100% - 40px));
    text-align: center;
    transform: translate(-50%, -47%);
}

.xl-guest-lockup {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.xl-guest-lockup img {
    width: 92px;
    height: 92px;
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .38));
}

.xl-guest-lockup span {
    color: #ddbf6e;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .46em;
    text-indent: .46em;
}

.xl-guest-eyebrow {
    margin: 0 0 14px;
    color: rgba(235, 222, 178, .74);
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .36em;
    text-indent: .36em;
}

.xl-guest-hero h1 {
    margin: 0;
    color: #f4e5b8;
    font-family:
        "Xinglan Hero",
        "Noto Sans CJK SC",
        "Source Han Sans SC",
        "PingFang SC",
        "Microsoft YaHei UI",
        "Microsoft YaHei",
        sans-serif;
    font-size: clamp(44px, 4.2vw, 62px);
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.08;
    text-indent: .14em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .38);
    white-space: nowrap;
}

.xl-guest-login-button {
    width: 148px;
    height: 44px;
    border-radius: 22px;
    font-size: 13px;
}

.xl-guest-primary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.xl-guest-status {
    min-height: 20px;
    margin: 16px 0 0;
    color: rgba(224, 238, 233, .62);
    font-size: 11px;
    line-height: 1.6;
}

.xl-guest-status.is-error {
    color: #ffc1ae;
}

.xl-guest-footer {
    position: absolute;
    right: 0;
    bottom: 28px;
    left: 0;
    color: rgba(226, 236, 232, .42);
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-align: center;
}

body.is-auth-pending .xl-guest-header,
body.is-auth-pending .xl-guest-hero,
body.is-auth-pending .xl-guest-footer {
    visibility: hidden;
    opacity: 0;
}

body.is-guest {
    overflow: hidden;
}

body.is-authenticated {
    overflow: auto;
}

.xl-preview-header {
    height: 50px;
    border-bottom: 1px solid #d8dcdd;
    background: #f3f4f4;
}

.xl-preview-shell {
    width: min(1180px, calc(100% - 28px));
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.xl-preview-nav,
.xl-preview-account,
.xl-preview-gamebar,
.xl-game-selector,
.xl-draw-balls,
.xl-quick-buttons,
.xl-stake-row,
.xl-record-nav {
    display: flex;
    align-items: center;
}

.xl-preview-nav {
    gap: 24px;
}

.xl-preview-nav a,
.xl-preview-account a,
.xl-preview-account span {
    color: #6c7479;
    font-size: 13px;
}

.xl-preview-nav a.is-active,
.xl-preview-nav a:hover,
.xl-preview-account a:hover {
    color: var(--xl-bet-green-dark);
}

.xl-preview-logo {
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 112px;
    color: #1f6958;
    line-height: 1;
}

.xl-preview-logo .xl-brand-mark {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 5px rgba(21, 90, 75, .2));
}

.xl-brand-copy {
    display: grid;
    align-content: center;
    gap: 1px;
    min-width: 0;
}

.xl-brand-copy strong {
    color: #236e5c;
    font-family: "Xinglan Display", "Songti SC", STSong, serif;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: .92;
    white-space: nowrap;
}

.xl-brand-copy small {
    color: #bd8c2e;
    font-family: Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1;
    white-space: nowrap;
}

.xl-preview-logo:hover .xl-brand-copy strong {
    color: #154f43;
}

.xl-preview-logo:focus-visible {
    outline: 2px solid rgba(35, 110, 92, .55);
    outline-offset: 4px;
    border-radius: 8px;
}

.xl-preview-account {
    gap: 7px;
    flex-shrink: 0;
    white-space: nowrap;
}

.xl-account-identity {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.xl-preview-account button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    border: 0;
    color: #6c7479;
    background: transparent;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.xl-preview-account button:hover,
.xl-preview-account .xl-account-icon,
.xl-preview-account .xl-account-auth,
.xl-preview-account .xl-account-auth span {
    color: var(--xl-bet-green-dark);
}

.xl-preview-account button:focus-visible {
    outline: 2px solid var(--xl-bet-green-dark);
    outline-offset: 2px;
    border-radius: 3px;
}

.xl-preview-account svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xl-preview-account .xl-account-icon {
    width: 20px;
}

.xl-eye-slash { display: none; }
[aria-pressed="true"] .xl-eye-slash { display: block; }
#xl-balance-refresh:disabled { opacity: .45; cursor: wait; }

.xl-account-funds {
    display: flex;
    align-items: center;
}

.xl-account-funds button + button {
    margin-left: 9px;
    padding-left: 9px;
    background: linear-gradient(#d8dcdd, #d8dcdd) left center / 1px 12px no-repeat;
}

.xl-account-auth { gap: 4px; margin-left: 5px; }

.xl-finance-notice {
    width: min(360px, calc(100% - 40px));
    margin: auto;
    padding: 24px;
    border: 1px solid #d8dcdd;
    border-radius: 10px;
    color: #4d5954;
    background: #fff;
    box-shadow: 0 16px 48px #0003;
}

.xl-finance-notice::backdrop { background: #162e2966; }
.xl-finance-notice:not([open]) { display: none; }
.xl-finance-notice h2 { margin: 0 0 14px; font-size: 20px; }
.xl-finance-notice p { margin-bottom: 22px; }
.xl-finance-notice button {
    padding: 8px 18px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: var(--xl-bet-green-dark);
    font: inherit;
    cursor: pointer;
}

@media (min-width: 901px) and (max-width: 1100px) {
    .xl-preview-nav { gap: 14px; }
    .xl-preview-account .xl-account-identity { display: none; }
}

.xl-preview-account strong {
    color: var(--xl-bet-green-dark);
}

.xl-preview-gamebar {
    width: min(1180px, calc(100% - 28px));
    height: 44px;
    gap: 12px;
    margin: 0 auto;
}

.xl-game-selector {
    position: relative;
}

.xl-game-selector > button,
.xl-current-game-chip {
    height: 28px;
    border: 0;
    color: #fff;
    background: var(--xl-bet-green);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-game-selector > button {
    padding: 0 12px;
    color: var(--xl-bet-green-dark);
    background: transparent;
}

.xl-current-game-chip {
    min-width: 132px;
    padding: 0 18px;
    border-radius: 5px;
}

.xl-game-menu {
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 50;
    width: 410px;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    padding: 8px;
    border: 1px solid var(--xl-bet-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(42, 55, 60, .16);
}

.xl-game-selector.is-open .xl-game-menu {
    display: grid;
}

.xl-game-menu button {
    height: 34px;
    border: 0;
    color: #5e696f;
    background: #f3f4f4;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.xl-game-menu button:hover,
.xl-game-menu button.is-active {
    color: #fff;
    background: var(--xl-bet-green);
}

.xl-workbench {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
}

.xl-workbench[hidden],
.xl-preview-gamebar[hidden],
.xl-portal[hidden] {
    display: none;
}

.xl-portal {
    width: min(1180px, calc(100% - 28px));
    min-height: calc(100vh - 74px);
    margin: 24px auto 40px;
    padding: 24px;
    border: 1px solid #dce3e1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(42, 55, 60, .08);
}

.xl-portal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e9e7;
}

.xl-portal-head small {
    color: var(--xl-bet-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.xl-portal-head h1 {
    margin: 5px 0 4px;
    color: #385a50;
    font-size: 26px;
    font-weight: 600;
}

.xl-portal-head p,
.xl-lobby-card p,
.xl-help-card p {
    margin: 0;
    color: #7b8783;
    font-size: 13px;
    line-height: 1.7;
}

.xl-portal-head button,
.xl-portal-actions button,
.xl-lobby-card button {
    min-height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: var(--xl-bet-green);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-portal-head button:hover,
.xl-portal-actions button:hover,
.xl-lobby-card button:hover {
    background: var(--xl-bet-green-dark);
}

.xl-portal-content {
    padding-top: 22px;
}

.xl-portal-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.xl-portal-stat,
.xl-lobby-card,
.xl-help-card {
    border: 1px solid #dce5e2;
    border-radius: 12px;
    background: linear-gradient(145deg, #fbfdfc, #f2f7f5);
}

.xl-portal-stat {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
}

.xl-portal-stat span,
.xl-portal-stat small {
    color: #89938f;
    font-size: 11px;
}

.xl-portal-stat strong {
    overflow: hidden;
    color: #315e51;
    font-size: 22px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xl-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.xl-portal-actions button.is-subtle {
    color: #4f6f66;
    border: 1px solid #bed0ca;
    background: #fff;
}

.xl-portal-notice {
    margin: 0;
    padding: 28px;
    border: 1px dashed #cbd9d5;
    border-radius: 12px;
    color: #788681;
    background: #f8fbfa;
    font-size: 13px;
    text-align: center;
}

.xl-lobby-grid,
.xl-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.xl-lobby-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.xl-lobby-card-head {
    display: grid;
    gap: 4px;
}

.xl-lobby-card-head span {
    color: #9a7a38;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.xl-lobby-card-head strong {
    color: #3b5d53;
    font-size: 17px;
}

.xl-lobby-card button {
    justify-self: start;
}

.xl-portal-table-wrap {
    margin-top: 18px;
    overflow: auto;
    border: 1px solid #dce3e1;
    border-radius: 10px;
}

.xl-portal-table-wrap table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.xl-portal-table-wrap th,
.xl-portal-table-wrap td {
    height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #e6eae9;
    color: #65716d;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.xl-portal-table-wrap th {
    color: #3f6157;
    background: #f2f7f5;
    font-weight: 650;
}

.xl-finance {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #d7e2de;
    border-radius: 12px;
    background: #fbfdfc;
}

.xl-finance > .xl-portal-notice {
    border: 0;
    border-radius: 0;
}

.xl-finance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 17px;
    border-bottom: 1px solid #e0e8e5;
    background: linear-gradient(135deg, #f8fbfa 0%, #edf6f2 100%);
}

.xl-finance-head small {
    color: var(--xl-bet-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.xl-finance-head h2,
.xl-finance-operation h3,
.xl-finance-summary h3,
.xl-finance-history h3,
.xl-finance-history h4 {
    color: #385b51;
    font-weight: 650;
}

.xl-finance-head h2 {
    margin: 4px 0 3px;
    font-size: 20px;
}

.xl-finance-head p {
    margin: 0;
    color: #7c8985;
    font-size: 12px;
}

.xl-finance-mode-tabs,
.xl-finance-channel-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xl-finance-mode-tabs {
    padding: 4px;
    border: 1px solid #cfddd8;
    border-radius: 8px;
    background: #fff;
}

.xl-finance-mode-tabs button,
.xl-finance-channel-tabs button {
    border: 0;
    color: #60736d;
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-finance-mode-tabs button {
    min-width: 72px;
    height: 32px;
    border-radius: 6px;
}

.xl-finance-mode-tabs button.is-active {
    color: #fff;
    background: var(--xl-bet-green);
}

.xl-finance-channel-tabs {
    padding: 14px 22px 0;
}

.xl-finance-channel-tabs button {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #cbd9d4;
    border-radius: 5px;
    background: #fff;
}

.xl-finance-channel-tabs button.is-active {
    color: var(--xl-bet-green-dark);
    border-color: var(--xl-bet-green);
    background: #e8f4ef;
}

.xl-finance-channel-tabs button[data-enabled="false"]:not(.is-active) {
    color: #9ba5a1;
    background: #f4f6f5;
}

.xl-finance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr);
    gap: 16px;
    padding: 14px 22px 22px;
}

.xl-finance-operation,
.xl-finance-summary {
    min-width: 0;
    padding: 19px;
    border: 1px solid #dbe4e1;
    border-radius: 9px;
    background: #fff;
}

.xl-finance-operation h3,
.xl-finance-summary h3,
.xl-finance-history h3 {
    margin: 0 0 16px;
    font-size: 15px;
}

.xl-finance-wallet-form,
.xl-finance-withdraw-form {
    display: grid;
    gap: 8px;
}

.xl-finance-wallet-form label,
.xl-finance-withdraw-form label {
    color: #62736d;
    font-size: 11px;
    font-weight: 650;
}

.xl-finance-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.xl-finance input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c9d6d2;
    border-radius: 6px;
    outline: none;
    color: #41564f;
    background: #fff;
    font: inherit;
    font-size: 12px;
}

.xl-finance input:focus {
    border-color: var(--xl-bet-green);
    box-shadow: 0 0 0 3px rgba(72, 142, 119, .12);
}

.xl-finance-input-row button,
.xl-finance-address-card button,
.xl-finance-primary {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: var(--xl-bet-green);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.xl-finance button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.xl-finance-address-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #d8e4df;
    border-radius: 7px;
    background: #f3f8f6;
}

.xl-finance-address-card span {
    grid-column: 1 / -1;
    color: #7d8c87;
    font-size: 10px;
}

.xl-finance-address-card code,
.xl-finance-destination code {
    overflow-wrap: anywhere;
    color: #31584c;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;
}

.xl-finance-warning {
    margin: 12px 0 0;
    padding-left: 10px;
    border-left: 3px solid #d2a64d;
    color: #7b7160;
    font-size: 11px;
    line-height: 1.65;
}

.xl-finance-withdraw-form {
    margin-top: 17px;
}

.xl-finance-destination {
    display: grid;
    gap: 5px;
    margin: 4px 0;
    padding: 12px;
    border: 1px solid #e0e7e5;
    border-radius: 6px;
    background: #f7f9f8;
}

.xl-finance-destination span {
    color: #84908c;
    font-size: 10px;
}

.xl-finance-primary {
    justify-self: start;
    min-width: 150px;
}

.xl-finance-status {
    min-height: 18px;
    margin: 12px 0 0;
    color: #4f806f;
    font-size: 11px;
}

.xl-finance-status.is-error {
    color: #ba5d4b;
}

.xl-finance-summary {
    display: grid;
    align-content: start;
}

.xl-finance-summary > div {
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed #e1e7e5;
}

.xl-finance-summary > div:last-child {
    border-bottom: 0;
}

.xl-finance-summary span {
    color: #8a9692;
    font-size: 11px;
}

.xl-finance-summary strong {
    color: #47635a;
    font-size: 11px;
    font-weight: 650;
    text-align: right;
}

.xl-finance-history {
    padding: 19px 22px 22px;
    border-top: 1px solid #e0e8e5;
    background: #fff;
}

.xl-finance-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.xl-finance-history h4 {
    margin: 0 0 8px;
    font-size: 12px;
}

.xl-finance-history .xl-portal-table-wrap {
    margin-top: 0;
}

.xl-finance-history .xl-portal-table-wrap table {
    min-width: 520px;
}

.xl-finance-empty {
    margin: 0;
    padding: 22px;
    border: 1px dashed #d5dfdc;
    border-radius: 7px;
    color: #8a9692;
    background: #f8faf9;
    font-size: 11px;
    text-align: center;
}

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

.xl-help-card {
    min-height: 148px;
    padding: 22px;
}

.xl-help-card.is-focus {
    border-color: var(--xl-bet-green);
    box-shadow: inset 3px 0 0 var(--xl-bet-green);
}

.xl-help-card h2 {
    margin: 0 0 10px;
    color: #3b5d53;
    font-size: 16px;
}

.xl-game-head {
    min-height: 99px;
    display: grid;
    grid-template-columns: 327px 430px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.xl-game-brand,
.xl-countdown-card,
.xl-latest-card {
    min-width: 0;
}

.xl-game-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 38px;
}

.xl-game-brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.xl-game-brand h1 {
    margin: 0;
    color: #6d7477;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: .08em;
}

.xl-game-brand p {
    margin: 4px 0 0;
    color: var(--xl-bet-green);
    font-size: 11px;
}

.xl-countdown-card {
    position: relative;
    padding: 10px 20px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.62);
    text-align: center;
}

.xl-countdown-meta {
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 38px 0 20px;
}

.xl-countdown-meta p {
    white-space: nowrap;
}

.xl-voice-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #c6d7d2;
    border-radius: 50%;
    color: var(--xl-bet-green-dark);
    background: rgba(255,255,255,.76);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.xl-voice-toggle img {
    width: 18px;
    height: 18px;
    display: block;
}

.xl-voice-toggle:hover,
.xl-voice-toggle:focus-visible {
    border-color: var(--xl-bet-green);
    background: #e4efeb;
    outline: none;
}

.xl-voice-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(79,157,131,.22);
}

.xl-voice-toggle.is-active {
    border-color: var(--xl-bet-green);
    background: #e4efeb;
}

.xl-voice-toggle:active {
    transform: scale(.96);
}

.xl-voice-toggle:disabled {
    cursor: not-allowed;
    opacity: .64;
}

.xl-voice-status {
    display: block;
    margin-top: 4px;
    color: var(--xl-bet-green-dark);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.xl-round-note {
    display: block;
    max-width: 34ch;
    margin: 3px auto 0;
    color: #8b5b17;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.xl-round-note[hidden] { display: none; }

.xl-countdown-card p,
.xl-latest-card p {
    margin: 0 0 3px;
    color: #757d81;
    font-size: 12px;
}

.xl-countdown-card strong {
    color: var(--xl-bet-green);
    font-size: 39px;
    font-weight: 500;
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}

.xl-countdown-card em,
.xl-latest-card em {
    color: var(--xl-bet-green-dark);
    font-style: normal;
    font-weight: 700;
}

.xl-latest-card {
    text-align: center;
}

.xl-latest-heading {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.xl-latest-heading p {
    margin: 0;
}

.xl-latest-links {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.xl-latest-links a,
.xl-latest-links button {
    height: 22px;
    padding: 0 7px;
    border: 1px solid #b7d1c8;
    border-radius: 4px;
    color: var(--xl-bet-green-dark);
    background: #e4efeb;
    font: inherit;
    font-size: 11px;
    line-height: 20px;
    cursor: pointer;
}

.xl-latest-links a:hover,
.xl-latest-links button:hover {
    border-color: var(--xl-bet-green);
    background: #d5e8e1;
}

.xl-draw-balls {
    justify-content: center;
    gap: 9px;
    margin-top: 6px;
}

.xl-draw-ball {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--xl-bet-coral);
    box-shadow: inset 0 -6px 0 #be6a55;
    font-size: 20px;
    font-weight: 800;
}

.xl-draw-ball:nth-child(-n+2) {
    background: var(--xl-bet-green);
    box-shadow: inset 0 -6px 0 var(--xl-bet-green-dark);
}

.xl-bet-layout {
    display: grid;
    grid-template-columns: 32px minmax(0, 806px) minmax(0, 326px);
    gap: 8px;
    align-items: stretch;
}

.xl-preview-mode {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 25px;
}

.xl-preview-mode button {
    min-height: 80px;
    padding: 8px 3px;
    border: 0;
    border-radius: 6px;
    color: #687379;
    background: #f9f9f9;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    writing-mode: vertical-rl;
    cursor: pointer;
}

.xl-preview-mode button.is-active {
    color: var(--xl-bet-green-dark);
    border-left: 2px solid var(--xl-bet-green);
}

.xl-center-card,
.xl-history-card,
.xl-preview-records {
    border-radius: 10px;
    background: var(--xl-bet-panel);
}

.xl-center-card {
    min-width: 0;
    overflow: hidden;
}

.xl-family-navigation {
    min-width: 0;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 1px solid var(--xl-bet-line-dark);
    background: #fbfcfc;
}

.xl-family-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
    border-right: 1px solid #e0e7e4;
    color: var(--xl-bet-green-dark);
}

.xl-family-caption strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.xl-family-caption small {
    margin-top: 3px;
    color: #8b9794;
    font-size: 10px;
    line-height: 1.2;
}

.xl-family-tabs {
    height: 39px;
    display: flex;
    align-items: end;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #b9cac4 transparent;
}

.xl-family-tabs button {
    flex: 0 0 auto;
    min-width: 58px;
    height: 39px;
    padding: 0 10px;
    border: 0;
    color: #5d686f;
    background: transparent;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.xl-family-tabs button.is-active {
    color: var(--xl-bet-green-dark);
    border-bottom: 2px solid var(--xl-bet-green);
}

.xl-play-grid {
    display: grid;
    gap: 1px;
    padding: 8px 12px 6px;
}

.xl-play-group {
    min-height: 44px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

.xl-play-group > span {
    color: #626d73;
    font-size: 12px;
}

.xl-play-group > div {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(70px, 1fr));
    align-items: center;
    gap: 4px 8px;
}

.xl-play-grid button {
    min-height: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 16px;
    color: #777e82;
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-play-grid button.is-active,
.xl-play-grid button:hover {
    color: #fff;
    background: var(--xl-bet-green);
}

.xl-play-grid button[data-supported="true"]::after {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 8px;
    color: #276b57;
    background: #d9eee7;
    content: "可投注";
    font-size: 8px;
    line-height: 1.3;
    vertical-align: 1px;
}

html:lang(en) .xl-play-grid button[data-supported="true"]::after {
    content: "Open";
}

.xl-play-grid button[data-supported="true"].is-active::after,
.xl-play-grid button[data-supported="true"]:hover::after {
    color: #fff;
    background: rgba(255,255,255,.2);
}

.xl-play-grid button.is-pending {
    color: #92999c;
}

.xl-play-grid button.is-pending::after {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: #c5c9cb;
    content: "";
    vertical-align: 2px;
}

.xl-play-grid button.is-pending.is-active,
.xl-play-grid button.is-pending:hover {
    color: #fff;
    background: var(--xl-bet-green);
}

.xl-play-grid button.is-pending.is-active::after,
.xl-play-grid button.is-pending:hover::after {
    background: rgba(255,255,255,.72);
}

.xl-number-board.is-pending-play {
    position: relative;
    opacity: .48;
    filter: grayscale(.2);
}

.xl-number-board.is-pending-play::after {
    position: absolute;
    inset: 0;
    content: "";
    cursor: not-allowed;
}

.xl-help-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    color: #69747a;
    border-top: 1px solid #e4e6e7;
    font-size: 12px;
}

.xl-help-row a {
    color: var(--xl-bet-green-dark);
}

.xl-help-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.xl-help-tools button {
    min-width: 48px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid #c7ccce;
    border-radius: 11px;
    color: #7a8287;
    background: #eceeee;
    font: inherit;
    font-size: 11px;
}

.xl-center-card[data-bet-mode]:not([data-bet-mode="official"]) .xl-family-navigation,
.xl-center-card[data-bet-mode]:not([data-bet-mode="official"]) .xl-play-grid {
    display: none;
}

@media (max-width: 700px) {
    .xl-family-navigation {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .xl-family-caption {
        padding: 0 8px;
    }

    .xl-family-caption small {
        display: none;
    }

    .xl-play-group > div {
        grid-template-columns: repeat(2, minmax(74px, 1fr));
    }
}

.xl-mode-workspace {
    margin: 8px 12px 4px;
    overflow: hidden;
    border: 1px solid #cfddda;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fbfa 0%, #edf5f2 100%);
    box-shadow: inset 3px 0 0 var(--xl-bet-green);
}

.xl-mode-workspace[hidden] {
    display: none;
}

.xl-mode-workspace-head {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 13px;
    border-bottom: 1px solid #dbe5e1;
}

.xl-mode-workspace-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.xl-mode-workspace-head small {
    color: var(--xl-bet-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
}

.xl-mode-workspace-head strong {
    color: #3c5d53;
    font-size: 14px;
}

.xl-mode-workspace-head > span {
    padding: 4px 9px;
    border-radius: 11px;
    color: #477666;
    background: #deeee8;
    font-size: 10px;
    white-space: nowrap;
}

.xl-mode-options {
    padding: 8px 12px 10px;
}

.xl-mode-group {
    min-height: 43px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-bottom: 1px dashed #d7e1de;
}

.xl-mode-group:last-child {
    border-bottom: 0;
}

.xl-mode-group > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.xl-mode-group strong,
.xl-simple-intro strong {
    color: #465d56;
    font-size: 12px;
}

.xl-mode-group small,
.xl-simple-intro small {
    color: #8b9994;
    font-size: 9px;
}

.xl-mode-group > div:last-child,
.xl-mode-tool-row,
.xl-simple-intro > div:last-child,
.xl-streak-card > div:last-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.xl-mode-options button,
.xl-streak-rank button {
    min-width: 53px;
    height: 27px;
    padding: 0 11px;
    border: 1px solid #bfcfca;
    border-radius: 14px;
    color: #506b62;
    background: #fff;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.xl-mode-options button:hover,
.xl-streak-rank button:hover {
    color: #fff;
    border-color: var(--xl-bet-green);
    background: var(--xl-bet-green);
    transform: translateY(-1px);
}

.xl-mode-options button.is-primary {
    color: #fff;
    border-color: var(--xl-bet-green);
    background: var(--xl-bet-green);
}

.xl-mode-options button.is-subtle {
    color: #83918c;
    border-color: #d4ddda;
    background: #f7f9f8;
}

.xl-mode-options button.is-digit {
    min-width: 30px;
    width: 30px;
    padding: 0;
    border-radius: 50%;
    font-weight: 700;
}

.xl-mode-group-wide {
    grid-template-columns: 190px minmax(0, 1fr);
}

.xl-mode-tool-row {
    justify-content: flex-end;
    padding-top: 9px;
}

.xl-plan-importer {
    display: grid;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #d4e0dc;
    border-radius: 9px;
    background: rgba(255,255,255,.72);
}

.xl-plan-importer > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.xl-plan-importer strong {
    color: #3f5e54;
    font-size: 13px;
}

.xl-plan-importer small {
    color: #82918c;
    font-size: 10px;
}

.xl-plan-importer textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid #bdcec8;
    border-radius: 7px;
    outline: none;
    color: #334842;
    background: #fff;
    font: 13px/1.65 Consolas, "SFMono-Regular", monospace;
}

.xl-plan-importer textarea:focus {
    border-color: var(--xl-bet-green);
    box-shadow: 0 0 0 3px rgba(41, 132, 105, .12);
}

.xl-plan-status {
    min-height: 18px;
    margin: 0;
    color: #647b73;
    font-size: 10px;
    line-height: 1.55;
}

.xl-plan-status.is-error {
    color: #bd5944;
}

.xl-streak-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.xl-streak-card {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #d4e0dc;
    border-radius: 8px;
    background: rgba(255,255,255,.72);
}

.xl-streak-card > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.xl-streak-card small,
.xl-streak-rank small {
    color: #85938e;
    font-size: 9px;
}

.xl-streak-card strong,
.xl-streak-rank strong {
    color: #46645a;
    font-size: 11px;
}

.xl-streak-card em,
.xl-streak-rank em {
    color: var(--xl-bet-coral);
    font-style: normal;
}

.xl-streak-card button {
    flex: 1 1 72px;
}

.xl-simple-intro {
    min-height: 58px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.xl-simple-intro > div:first-child {
    display: grid;
    gap: 4px;
}

.xl-mode-empty {
    margin: 0;
    padding: 16px;
    color: #7d8b86;
    font-size: 11px;
    text-align: center;
}

.xl-number-board {
    padding: 4px 12px 8px;
}

.xl-number-row {
    min-height: 53px;
    display: grid;
    grid-template-columns: 70px 1fr 205px;
    align-items: center;
    gap: 8px;
}

.xl-number-row > span {
    color: #687278;
    font-size: 12px;
    text-align: center;
}

.xl-number-set {
    display: flex;
    align-items: center;
    gap: 7px;
}

.xl-number-set button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    color: #3e474c;
    background: #dfe1e2;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.xl-number-set button:hover {
    color: #fff;
    background: #6db29b;
}

.xl-number-set button.is-selected {
    color: #fff;
    background: var(--xl-bet-green);
    box-shadow: inset 0 -3px 0 var(--xl-bet-green-dark);
}

.xl-quick-buttons {
    justify-content: flex-end;
    gap: 5px;
}

.xl-quick-buttons button {
    width: 29px;
    height: 30px;
    border: 1px solid #c2c8cb;
    border-radius: 4px;
    color: #59666f;
    background: #fafafa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-quick-buttons button:hover {
    color: var(--xl-bet-green-dark);
    border-color: var(--xl-bet-green);
}

.xl-stake-panel {
    padding: 9px 12px 8px;
    border-top: 1px solid var(--xl-bet-line);
}

.xl-stake-row {
    min-height: 37px;
    gap: 8px;
    color: #71797e;
    font-size: 12px;
}

.xl-stake-row label {
    width: 34px;
}

.xl-stake-row select,
.xl-stake-row input {
    height: 26px;
    border: 1px solid #b9c7d2;
    border-radius: 5px;
    color: #647078;
    background: #f4f4f4;
    font: inherit;
    font-size: 12px;
}

.xl-stake-row select {
    width: 140px;
    padding: 0 10px;
}

#xl-bonus-label { width: auto; flex: 0 0 auto; }
.xl-prize-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px 0 8px;
    color: var(--xl-bet-text);
    font-size: 12px;
    line-height: 1.6;
}
.xl-prize-values {
    display: flex;
    flex: 1 1 160px;
    flex-wrap: wrap;
    min-width: 0;
    gap: 2px 12px;
    color: var(--xl-bet-green-dark);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.xl-amount-modes,
.xl-multiple-modes {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 27px;
    padding: 2px;
    border: 1px solid #9eb4c9;
    border-radius: 6px;
}

.xl-amount-modes button,
.xl-multiple-modes button {
    flex: 1 1 auto;
    min-width: 38px;
    height: 21px;
    border: 0;
    border-radius: 4px;
    color: #58636b;
    background: transparent;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.xl-bet-preview [aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.xl-bet-preview button[aria-disabled="true"]:hover,
.xl-bet-preview a[aria-disabled="true"]:hover {
    filter: none;
    transform: none;
}

.xl-amount-modes button.is-active,
.xl-multiple-modes button.is-active {
    color: #fff;
    background: var(--xl-bet-green);
}

.xl-stake-row input {
    width: 130px;
    padding: 0 12px;
}

.xl-bet-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 120px 120px;
    gap: 6px;
    align-items: center;
    padding-top: 5px;
    color: #747d82;
    font-size: 12px;
}

.xl-bet-actions strong {
    color: var(--xl-bet-coral);
}

.xl-bet-actions button,
.xl-order-summary button {
    height: 27px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--xl-bet-teal);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-bet-actions button:nth-of-type(2),
.xl-order-summary button:nth-child(2) {
    background: var(--xl-bet-green);
}

.xl-bet-actions button:last-child {
    background: var(--xl-bet-gold);
}

.xl-settlement-status { margin: 0 0 10px; padding: 9px 12px; border-radius: 6px; background: #edf5f1; color: #487364; font-size: 12px; line-height: 1.7; }
.xl-settlement-status[hidden] { display: none; }
.xl-bet-status { white-space: nowrap; }

.xl-balance-mode-row { flex-wrap: wrap; }
.xl-stake-label { flex: 0 0 34px; }
.xl-balance-modes { display: flex; gap: 4px; }
.xl-balance-modes button {
    min-width: 46px;
    height: 26px;
    border: 1px solid var(--xl-bet-line);
    border-radius: 5px;
    color: var(--xl-bet-green);
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.xl-balance-modes button:hover,
.xl-balance-modes button.is-active { color: #fff; background: var(--xl-bet-green); }
.xl-balance-modes button:focus-visible { outline: 2px solid var(--xl-bet-gold); outline-offset: 2px; }
.xl-balance-mode-hint { color: #818b8a; font-size: 11px; }
.xl-selection-summary { min-width: 0; line-height: 1.8; overflow-wrap: anywhere; }
.xl-profit-summary { display: inline-block; margin-left: 12px; }
.xl-center-card[data-bet-mode="double"] .xl-balance-mode-row,
.xl-center-card[data-bet-mode="simple"] .xl-balance-mode-row,
.xl-center-card[data-bet-mode="streak"] .xl-balance-mode-row,
.xl-center-card[data-bet-mode="double"] .xl-profit-summary,
.xl-center-card[data-bet-mode="simple"] .xl-profit-summary,
.xl-center-card[data-bet-mode="streak"] .xl-profit-summary { display: none; }
@media (max-width: 700px) {
    .xl-amount-modes, .xl-multiple-modes { height: auto; min-height: 27px; row-gap: 4px; }
    .xl-bet-actions { width: 100%; grid-template-columns: 1fr 1fr; }
    .xl-selection-summary { grid-column: 1 / -1; }
    .xl-balance-mode-hint { flex-basis: 100%; }
    .xl-profit-summary { margin-left: 8px; }
}

.xl-order-area {
    display: grid;
    grid-template-columns: 1fr 176px;
    gap: 12px;
    padding: 9px 10px 14px;
}

.xl-order-table-wrap {
    height: 150px;
    overflow: auto;
    border: 1px solid var(--xl-bet-line-dark);
    border-radius: 9px;
    background: #fafafa;
}

.xl-order-table {
    width: 100%;
    border-collapse: collapse;
}

.xl-order-table th,
.xl-order-table td {
    height: 30px;
    padding: 0 8px;
    border-bottom: 1px solid #d6dadd;
    color: #727b80;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
}

.xl-order-empty td {
    height: 112px;
    border: 0;
    color: #a0a4a7;
}

.xl-order-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    gap: 10px;
    color: #777f83;
    font-size: 12px;
}

.xl-order-summary strong {
    color: var(--xl-bet-coral);
}

.xl-order-summary > span,
.xl-order-summary .xl-inline-status {
    grid-column: 1 / -1;
}

.xl-order-summary button[data-action="submit"] {
    grid-column: 1 / -1;
    min-height: 32px;
    height: auto;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--xl-bet-coral);
}

#xl-submit-countdown {
    display: inline-block;
    line-height: inherit;
    white-space: nowrap;
}

.xl-history-card {
    min-width: 0;
    min-height: 570px;
    display: grid;
    grid-template-rows: 39px minmax(0, 1fr) 55px;
    padding: 10px 12px;
    overflow: hidden;
}

.xl-history-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--xl-bet-line-dark);
}

.xl-history-tabs button {
    height: 38px;
    border: 0;
    color: #6e777c;
    background: transparent;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.xl-history-tabs button.is-active {
    color: var(--xl-bet-title);
    border-bottom: 2px solid var(--xl-bet-green);
}

.xl-history-list {
    min-height: 0;
    overflow: auto;
}

.xl-history-item {
    padding: 8px 0;
    border-bottom: 1px solid #dfe1e2;
}

.xl-streak-rank {
    min-height: 62px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid #dfe1e2;
}

.xl-streak-rank-index {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--xl-bet-green);
    font-size: 10px;
    font-weight: 700;
}

.xl-streak-rank:nth-child(n+4) .xl-streak-rank-index {
    color: #6a7772;
    background: #dfe5e3;
}

.xl-streak-rank > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.xl-streak-rank button {
    min-width: 64px;
    padding-inline: 8px;
    font-size: 9px;
}

.xl-history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #8a9094;
    font-size: 11px;
}

.xl-history-meta strong {
    color: var(--xl-bet-green);
    font-weight: 700;
}

.xl-history-meta span:last-child {
    color: var(--xl-bet-coral);
}

.xl-history-numbers {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 7px;
}

.xl-history-numbers span {
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--xl-bet-coral);
    background: #e2e4e4;
    font-size: 15px;
}

.xl-history-numbers span:nth-child(-n+2) {
    color: var(--xl-bet-green);
}

.xl-history-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
}

.xl-history-footer a {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #899095;
    background: rgba(255,255,255,.62);
    font-size: 13px;
}

.xl-preview-records {
    min-height: 350px;
    margin: 20px 0 36px;
    padding: 0 16px;
}

.xl-record-nav {
    min-height: 45px;
    border-bottom: 1px solid var(--xl-bet-line-dark);
}

.xl-record-nav button {
    min-width: 116px;
    height: 45px;
    border: 0;
    color: #69747a;
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.xl-record-nav button.is-active {
    color: var(--xl-bet-green-dark);
    border-bottom: 2px solid var(--xl-bet-green);
}

.xl-record-nav a {
    margin-left: auto;
    color: var(--xl-bet-green-dark);
    font-size: 12px;
}

.xl-preview-records table {
    width: 100%;
    border-collapse: collapse;
}

.xl-preview-records th {
    height: 55px;
    padding: 0 6px;
    color: #7a848a;
    border-bottom: 1px solid var(--xl-bet-line-dark);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
}

.xl-preview-records td {
    height: 230px;
    color: #a1a6a9;
    text-align: center;
}

.xl-inline-status {
    min-height: 24px;
    padding-top: 4px;
    color: var(--xl-bet-green-dark);
    font-size: 11px;
    text-align: center;
}

.xl-bet-preview button:disabled,
.xl-bet-preview select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.xl-preview-records tbody tr:not(.xl-record-empty) td {
    height: 42px;
    padding: 7px 6px;
    border-bottom: 1px solid var(--xl-bet-line);
    color: #657178;
    font-size: 11px;
}

.xl-preview-records td.xl-record-positive {
    color: var(--xl-bet-green-dark);
}

.xl-preview-records td.xl-record-negative {
    color: var(--xl-bet-coral);
}

.xl-record-action {
    min-width: 62px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--xl-bet-green);
    border-radius: 14px;
    color: var(--xl-bet-green-dark);
    background: #fff;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.xl-record-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.xl-chase-dialog {
    width: min(720px, calc(100vw - 28px));
    max-width: none;
    max-height: min(760px, calc(100vh - 28px));
    inset: 0;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(35, 110, 92, .35);
    border-radius: 16px;
    color: #394b48;
    background: #f8faf9;
    box-shadow: 0 24px 70px rgba(10, 39, 34, .35);
}

.xl-chase-dialog:not([open]) {
    display: none;
}

.xl-chase-dialog::backdrop {
    background: rgba(12, 28, 26, .64);
    backdrop-filter: blur(3px);
}

.xl-chase-card {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.xl-chase-heading,
.xl-chase-options,
.xl-chase-summary,
.xl-chase-issue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xl-chase-heading h2 {
    margin: 2px 0 4px;
    color: var(--xl-bet-green-dark);
    font-size: 22px;
}

.xl-chase-heading small {
    color: var(--xl-bet-gold);
    font-weight: 700;
    letter-spacing: .18em;
}

.xl-chase-heading p,
.xl-chase-options span {
    margin: 0;
    color: #798682;
    font-size: 12px;
}

.xl-chase-heading > button {
    width: 32px;
    height: 32px;
    border: 1px solid #cbd5d1;
    border-radius: 50%;
    color: #64736e;
    background: #fff;
    font-size: 22px;
    cursor: pointer;
}

.xl-chase-options {
    padding: 10px 12px;
    border-radius: 8px;
    background: #edf4f1;
    font-size: 12px;
}

.xl-chase-issues {
    max-height: 390px;
    overflow: auto;
    border: 1px solid #d7dfdc;
    border-radius: 10px;
    background: #fff;
}

.xl-chase-issue {
    min-height: 48px;
    padding: 7px 12px;
    border-bottom: 1px solid #edf0ef;
    font-size: 12px;
}

.xl-chase-issue:last-child {
    border-bottom: 0;
}

.xl-chase-issue label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #52615d;
}

.xl-chase-issue time {
    margin-left: auto;
    color: #8a9591;
}

.xl-chase-issue input[type="number"] {
    width: 82px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #bdcbc6;
    border-radius: 6px;
    color: #44534f;
    background: #f7f9f8;
}

.xl-chase-summary {
    justify-content: flex-end;
    color: #6d7975;
    font-size: 13px;
}

.xl-chase-summary strong {
    color: var(--xl-bet-coral);
    font-size: 17px;
}

.xl-login-dialog {
    width: min(430px, calc(100vw - 32px));
    max-width: none;
    inset: 0;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(231, 188, 89, .72);
    border-radius: 16px;
    color: #e9f3ef;
    background: #10352f;
    box-shadow: 0 24px 70px rgba(10, 39, 34, .42);
}

.xl-login-dialog:not([open]) {
    display: none;
}

.xl-login-dialog::backdrop {
    background: rgba(12, 28, 26, .64);
    backdrop-filter: blur(3px);
}

.xl-login-card {
    display: grid;
    gap: 9px;
    padding: 25px;
    background: linear-gradient(145deg, #17483e, #0d2e29);
}

.xl-login-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.xl-login-brand-area {
    min-width: 0;
}

.xl-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.xl-login-brand .xl-brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    filter: drop-shadow(0 5px 10px rgba(3, 22, 19, .36));
}

.xl-login-brand .xl-brand-copy strong {
    color: #fff;
    font-size: 27px;
    text-shadow: 0 2px 7px rgba(2, 25, 20, .32);
}

.xl-login-brand .xl-brand-copy small {
    color: #f0ca70;
    font-size: 7.5px;
}

.xl-login-heading h2 {
    margin: 10px 0 0;
    color: #c7d9d3;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
}

.xl-login-heading button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: #dce9e5;
    background: rgba(255,255,255,.07);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.xl-login-card > p {
    margin: 0 0 4px;
    color: #b9cdc7;
    font-size: 12px;
    line-height: 1.6;
}

.xl-login-card code {
    color: #f0d387;
}

.xl-login-card label {
    color: #dceae6;
    font-size: 12px;
}

.xl-login-card input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    outline: none;
    color: #fff;
    background: rgba(255,255,255,.08);
    font: inherit;
}

.xl-login-card input:focus {
    border-color: var(--xl-bet-gold);
    box-shadow: 0 0 0 3px rgba(231, 188, 89, .14);
}

.xl-auth-hint {
    margin-top: -3px;
    color: #91ada4;
    font-size: 10px;
    line-height: 1.55;
}

.xl-login-status {
    min-height: 20px;
    color: #abc2bb;
    font-size: 11px;
    line-height: 1.5;
}

.xl-login-status.is-error {
    color: #ffb19d;
}

.xl-login-submit {
    height: 43px;
    border: 0;
    border-radius: 9px;
    color: #17352f;
    background: linear-gradient(90deg, #d9aa48, #f1d27c);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.xl-login-submit:disabled {
    opacity: .65;
}

.xl-auth-switch {
    min-height: 34px;
    border: 0;
    color: #d8c27f;
    background: transparent;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.xl-auth-switch:hover {
    color: #f3dc96;
    text-decoration: underline;
}

@media (max-width: 900px) {
    body.xl-bet-preview {
        min-width: min(320px, 100%) !important;
    }

    .xl-guest-header {
        width: min(100% - 40px, 720px);
        height: 76px;
    }

    .xl-guest-hero {
        transform: translate(-50%, -44%);
    }

    .xl-guest-lockup img {
        width: 82px;
        height: 82px;
    }

    .xl-preview-header {
        height: auto;
    }

    .xl-preview-shell {
        min-height: 54px;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
    }

    .xl-preview-nav {
        gap: 12px;
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .xl-preview-nav a { flex-shrink: 0; white-space: nowrap; }

    .xl-preview-logo {
        margin-left: 0;
    }

    .xl-preview-account .xl-account-identity {
        display: none;
    }

    .xl-preview-account { margin-left: auto; }

    .xl-preview-gamebar,
    .xl-workbench,
    .xl-portal {
        width: min(100% - 20px, 760px);
    }

    .xl-portal {
        min-height: calc(100vh - 112px);
        margin-top: 14px;
        padding: 18px;
    }

    .xl-portal-stats,
    .xl-lobby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl-finance-grid,
    .xl-finance-history-grid {
        grid-template-columns: 1fr;
    }

    .xl-game-head {
        grid-template-columns: 1fr;
        padding: 12px 0;
    }

    .xl-game-brand {
        justify-content: center;
    }

    .xl-bet-layout {
        grid-template-columns: 1fr;
    }

    .xl-preview-mode {
        flex-direction: row;
        gap: 6px;
        padding: 0;
        overflow-x: auto;
    }

    .xl-preview-mode button {
        min-width: 86px;
        min-height: 38px;
        writing-mode: horizontal-tb;
    }

    .xl-preview-mode button.is-active {
        border-left: 0;
        border-bottom: 2px solid var(--xl-bet-green);
    }

    .xl-history-card {
        height: auto;
    }

    .xl-history-list {
        height: 310px;
    }

    .xl-preview-records {
        margin-left: 0;
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    .xl-preview-account {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    .xl-guest-backdrop {
        object-position: 54% center;
        transform: scale(1.08);
    }

    .xl-guest-header {
        width: calc(100% - 28px);
        height: 68px;
    }

    .xl-guest-header-brand {
        gap: 8px;
    }

    .xl-guest-header-brand img {
        width: 33px;
        height: 33px;
    }

    .xl-guest-header-brand strong {
        font-size: 21px;
    }

    .xl-guest-header-actions button {
        min-width: 64px;
        height: 34px;
    }

    .xl-guest-hero {
        width: calc(100% - 32px);
        transform: translate(-50%, -43%);
    }

    .xl-guest-lockup {
        gap: 8px;
        margin-bottom: 20px;
    }

    .xl-guest-lockup img {
        width: 72px;
        height: 72px;
    }

    .xl-guest-hero h1 {
        font-size: clamp(38px, 11vw, 44px);
        letter-spacing: .1em;
        text-indent: .1em;
    }

    .xl-guest-primary-actions {
        gap: 9px;
        margin-top: 26px;
    }

    .xl-guest-login-button {
        width: 132px;
    }

    .xl-guest-footer {
        bottom: 20px;
    }

    .xl-game-menu {
        width: min(410px, calc(100vw - 20px));
    }

    .xl-portal-head {
        display: grid;
        gap: 14px;
    }

    .xl-portal-head button {
        justify-self: start;
    }

    .xl-portal-stats,
    .xl-lobby-grid,
    .xl-help-grid {
        grid-template-columns: 1fr;
    }

    .xl-portal-stat {
        min-height: 96px;
    }

    .xl-finance-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .xl-finance-mode-tabs {
        width: 100%;
    }

    .xl-finance-mode-tabs button {
        flex: 1 1 0;
    }

    .xl-finance-channel-tabs {
        overflow-x: auto;
        padding: 12px 14px 0;
    }

    .xl-finance-channel-tabs button {
        flex: 0 0 auto;
    }

    .xl-finance-grid,
    .xl-finance-history {
        padding-left: 14px;
        padding-right: 14px;
    }

    .xl-finance-input-row,
    .xl-finance-address-card {
        grid-template-columns: 1fr;
    }

    .xl-finance-address-card button,
    .xl-finance-primary {
        justify-self: stretch;
        width: 100%;
    }

    .xl-game-brand img {
        width: 58px;
        height: 58px;
    }

    .xl-game-brand h1 {
        font-size: 22px;
    }

    .xl-countdown-card strong {
        font-size: 33px;
    }

    .xl-center-card {
        overflow-x: auto;
    }

    .xl-center-card > * {
        min-width: 760px;
    }

    .xl-preview-records table {
        min-width: 760px;
    }
}
.xl-center-card[data-bet-mode="double"] #xl-number-board,
.xl-center-card[data-bet-mode="simple"] #xl-number-board,
.xl-center-card[data-bet-mode="streak"] #xl-number-board { display: none; }
.xl-mode-options { display: block; }
.xl-mode-tabs, .xl-maker-values { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.xl-market-card { margin: 14px 0; padding: 12px; border: 1px solid #e3e7ef; border-radius: 8px; background: #fff; }
.xl-market-card h3 { margin: 0 0 12px; font-size: 14px; color: #374151; }
.xl-market-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 8px; }
.xl-market-option { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 5px; }
.xl-market-option small { font-size: 11px; color: #c05a43; }
.xl-market-option input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #d8deea; border-radius: 4px; padding: 7px 3px; text-align: center; }
.xl-mode-options button.is-selected { background: #ed6e5e; color: white; border-color: #ed6e5e; }
.xl-mode-options button:disabled { cursor: not-allowed; opacity: .45; }
.xl-simple-row { display: grid; grid-template-columns: 20px repeat(14, minmax(28px,1fr)); gap: 4px; align-items: center; margin: 12px 0; }
.xl-simple-row .xl-market-option button { min-width: 26px; padding: 5px; }
.xl-family-tabs button[hidden] { display: none; }
.xl-simple-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e3e7ef; }
.xl-simple-summary button { min-width: 44px; padding: 8px 16px; border: 1px solid #e3e7ef; border-radius: 6px; }
.xl-simple-summary button:disabled { color: #9ca3af; background: #f3f4f6; cursor: not-allowed; }
.xl-maker-filter { padding: 12px 0; border-bottom: 1px solid #eee; }
.xl-maker-filter strong { font-size: 13px; }
.xl-maker-values button { min-width: 32px; }
.xl-single-label { display: block; width: 100%; font-size: 13px; }
.xl-single-label textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 12px; border: 1px solid #d8deea; padding: 12px; border-radius: 6px; resize: vertical; font: 14px/1.6 monospace; }
.xl-single-status { color: #777; font-size: 12px; }
.xl-position-choices { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 0; }
.xl-number-set { flex-wrap: wrap; }
.xl-number-set button { min-width: 34px; width: auto; padding: 0 7px; }
.xl-order-table td:nth-child(2) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
    .xl-center-card > * { min-width: 0; }
    .xl-center-card { overflow: visible; }
    .xl-play-group { grid-template-columns: 64px minmax(0,1fr); }
    .xl-play-group > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .xl-help-row { flex-wrap: wrap; white-space: normal; line-height: 1.6; }
    .xl-stake-row { flex-wrap: wrap; gap: 8px; }
    .xl-amount-modes, .xl-multiple-modes { flex-wrap: wrap; }
    .xl-order-area { grid-template-columns: 1fr; }
    .xl-order-table-wrap { overflow-x: auto; }
    .xl-order-table { min-width: 560px; }
    .xl-order-summary { padding: 12px; }
    .xl-preview-records { overflow-x: auto; }
    .xl-record-nav { min-width: 0; flex-wrap: wrap; }
    .xl-number-board { padding: 12px; }
    .xl-number-set { width: 100%; }
    .xl-mode-options { padding: 8px; }
    .xl-market-grid .xl-market-option button { min-width: 32px; }
    .xl-simple-row { grid-template-columns: 20px repeat(7, minmax(28px,1fr)); }
    .xl-simple-row > strong { grid-row: span 2; }
    .xl-number-row { display: flex; flex-wrap: wrap; gap: 10px; }
    .xl-number-row > span { width: 100%; }
    .xl-number-set { flex: 1 1 100%; gap: 6px; }
    .xl-market-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* Compact blockchain choices and readable betting records. */
.xl-blockchain-menu, .xl-game-menu { background: #4f987f; color: #fff; border: 0; border-radius: 10px; padding: 20px 22px; }
.xl-blockchain-menu h3, .xl-game-menu h3 { margin: 0 0 10px; color: #d4eadf; font-size: 15px; grid-column: 1 / -1; }
.xl-blockchain-choices { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px 18px; }
.xl-blockchain-choices button, .xl-game-menu button { min-height: 36px; height: auto; padding: 9px 4px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid #ffffff25; font: inherit; font-size: 13px; text-align: center; cursor: pointer; }
.xl-blockchain-choices button:hover, .xl-blockchain-choices button.is-active, .xl-game-menu button:hover, .xl-game-menu button.is-active { background: #ffffff22; border-radius: 4px; }
.xl-game-menu { width: min(1000px, calc(100vw - 56px)); grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px 12px; }
.xl-preview-records { overflow: visible; }
.xl-record-table-wrap { width: 100%; overflow-x: auto; }
.xl-record-table-wrap:focus-visible { outline: 2px solid var(--xl-bet-green); outline-offset: 2px; }
.xl-preview-records table[data-record-kind="bets"] { table-layout: fixed; min-width: 0; }
.xl-preview-records table[data-record-kind="bets"] th { white-space: normal; height: 42px; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(1) { width: 7%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(2) { width: 11%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(3) { width: 10%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(4) { width: auto; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(5), .xl-preview-records table[data-record-kind="bets"] th:nth-child(6) { width: 7%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(7) { width: 6%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(8) { width: 7%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(9) { width: 11%; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(10) { width: 124px; }
.xl-preview-records table[data-record-kind="bets"] th,
.xl-preview-records table[data-record-kind="bets"] tbody tr:not(.xl-record-empty) td { padding-left: 4px; padding-right: 4px; }
.xl-preview-records table[data-record-kind="bets"] th:nth-child(-n+4),
.xl-preview-records table[data-record-kind="bets"] tbody tr:not(.xl-record-empty) td:nth-child(-n+4) { text-align: left; }
.xl-preview-records table[data-record-kind="bets"] td:nth-child(n+5):nth-child(-n+7) { font-variant-numeric: tabular-nums; }
.xl-preview-records table[data-record-kind="bets"] th:last-child,
.xl-preview-records table[data-record-kind="bets"] td.xl-record-actions-cell { position: sticky; right: 0; background: var(--xl-bet-panel); box-shadow: -1px 0 var(--xl-bet-line); }
.xl-preview-records table[data-record-kind="bets"] th:last-child { z-index: 2; }
.xl-preview-records table[data-record-kind="bets"] td.xl-record-actions-cell { z-index: 1; white-space: nowrap; }
.xl-record-actions-group { display: flex; align-items: center; justify-content: center; gap: 4px; }
.xl-record-actions-group .xl-record-action { flex: 0 0 auto; min-width: 44px; padding: 0 8px; border: 0; color: #fff; background: var(--xl-bet-teal); }
.xl-record-actions-group .xl-record-action + .xl-record-action { color: #604509; background: var(--xl-bet-gold); }
.xl-record-actions-group .xl-record-action:focus-visible { outline: 2px solid var(--xl-bet-green-dark); outline-offset: 2px; }
@media (max-width: 760px) {
    .xl-preview-records table[data-record-kind="bets"] { min-width: 760px; }
}
.xl-preview-records td { overflow-wrap: break-word; }
.xl-record-selection .xl-selection-summary { display: block; max-height: 36px; overflow: hidden; line-height: 18px; text-align: left; }
.xl-record-selection .xl-record-action { max-width: 100%; min-height: 28px; height: auto; margin-top: 3px; padding: 3px 6px; line-height: 18px; white-space: normal; }
.xl-selection-detail { width: min(760px, calc(100vw - 48px)); max-height: 75vh; border: 0; border-radius: 12px; padding: 22px; color: #355e52; background: #fff; }
.xl-selection-detail::backdrop { background: #16382e66; }
.xl-selection-detail pre { max-height: 50vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 monospace; }
.xl-close-notice { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 160; box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 0 16px; color: #333; background: #fff; border: 1px solid #d7ddda; border-radius: 16px; box-shadow: 0 3px 18px #0005; }
.xl-close-notice[hidden] { display: none; }
.xl-close-notice-header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; border-bottom: 1px solid #d8d8d8; }
.xl-close-notice-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.xl-close-notice-header button { width: 36px; height: 40px; padding: 0; border: 0; color: #458574; background: transparent; font-size: 24px; font-weight: 300; cursor: pointer; }
.xl-close-notice-header button:focus-visible { outline: 2px solid #458574; outline-offset: -3px; border-radius: 6px; }
.xl-close-notice p { margin: 22px 0 30px; font-size: 13px; line-height: 1.9; text-align: center; overflow-wrap: anywhere; }
.xl-order-issue { display: block; margin-top: 4px; font-size: 11px; color: #737f79; }
tr[data-closed="true"] .xl-order-issue { color: #b14a38; }
.xl-prize-notice { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: min(340px, calc(100vw - 72px)); padding: 20px; border-radius: 12px; color: #fff; background: #327d64; box-shadow: 0 8px 35px #17372d40; }
.xl-prize-notice strong { font-size: 23px; color: #ffe5a0; }
.xl-prize-notice p { line-height: 1.7; }
.xl-deposit-exact-amount { display: block; font: 700 28px/1.5 monospace; color: #327d64; overflow-wrap: anywhere; }
.xl-deposit-hash { display: block; font-size: 12px; overflow-wrap: anywhere; }
.xl-deposit-order-panel h4 { margin: 20px 0 10px; }
.xl-deposit-order-panel table { min-width: 0; width: 100%; }
.xl-prize-notice button { border: 1px solid #ffffff60; background: transparent; border-radius: 5px; color: #fff; padding: 7px 18px; cursor: pointer; }
@media (max-width: 768px) {
 .xl-blockchain-choices, .xl-game-menu { grid-template-columns: repeat(3, minmax(0,1fr)); }
 .xl-blockchain-menu, .xl-game-menu { padding: 16px 12px; }
}

.xl-help-tools [data-draw-explanation] { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.xl-help-tools [data-draw-explanation]:hover { color: var(--xl-bet-green-dark); }
.xl-draw-explanation-dialog {
    box-sizing: border-box;
    width: min(760px, calc(100vw - 32px));
    max-height: 88vh;
    max-height: 88dvh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7e5df;
    border-radius: 16px;
    color: #3c554c;
    background: #fff;
    box-shadow: 0 24px 80px #17372d40;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
}
.xl-draw-explanation-dialog[open] { display: flex; flex-direction: column; }
.xl-draw-explanation-dialog:not([open]) { display: none; }
.xl-draw-explanation-dialog::backdrop { background: #16382e70; }
.xl-draw-explanation-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-shrink: 0; margin: 0; padding: 20px 26px;
    border-bottom: 1px solid #dce7e1;
    background: linear-gradient(115deg, #edf6f1, #faf8ef);
}
.xl-draw-explanation-heading h2 { margin: 0; color: #355e50; font-size: 20px; font-weight: 650; line-height: 1.5; }
.xl-draw-explanation-heading p { margin: 4px 0 0; color: #718278; font-size: 12px; line-height: 1.6; }
.xl-draw-explanation-heading button { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #d5e3dc; border-radius: 50%; color: #527666; background: #ffffffa6; font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.xl-draw-explanation-body { padding: 22px 26px 16px; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; line-height: 1.8; }
.xl-draw-explanation-intro { margin: 0 0 20px; color: #426653; }
.xl-draw-explanation-rules { margin: 0; padding-left: 22px; }
.xl-draw-explanation-rules li { margin: 0 0 14px; padding-left: 4px; list-style: decimal outside; }
.xl-draw-explanation-rules li::marker { color: #4f9d83; font-weight: 700; }
.xl-draw-explanation-rules h3 { display: inline; margin: 0; color: #385b51; font-size: 14px; font-weight: 650; }
.xl-draw-explanation-rules h3::after { content: "："; }
html:lang(en) .xl-draw-explanation-rules h3::after { content: ":"; }
.xl-draw-explanation-rules p { display: inline; margin: 0; }
.xl-draw-explanation-example { padding: 16px 18px; border: 1px solid #dce8e0; border-radius: 10px; background: #f3f8f5; }
.xl-draw-explanation-example > strong { display: block; color: #385b51; }
.xl-draw-explanation-example > code { display: block; margin: 5px 0; color: #4c7161; font: 14px/1.8 monospace; overflow-wrap: anywhere; }
.xl-draw-explanation-example > span { color: #78877e; font-size: 12px; }
.xl-draw-explanation-numbers { display: flex; gap: 9px; margin-top: 10px; }
.xl-draw-explanation-numbers span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d6ba72; border-radius: 50%; color: #765d29; background: #fff9e9; font-size: 17px; font-weight: 650; }
.xl-draw-explanation-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
.xl-draw-explanation-links a { color: #397d68; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.xl-draw-explanation-note { margin: 16px 0 0; color: #7b877f; font-size: 12px; }
.xl-draw-explanation-footer { flex-shrink: 0; margin: 0; padding: 14px 26px; border-top: 1px solid #e3ebe6; text-align: right; }
.xl-draw-explanation-footer button { min-height: 40px; padding: 8px 30px; border: 0; border-radius: 8px; color: #fff; background: #397d68; font: inherit; font-size: 13px; cursor: pointer; }
.xl-draw-explanation-footer button:hover { background: #306b59; }
.xl-draw-explanation-dialog button:focus-visible, .xl-draw-explanation-links a:focus-visible { outline: 2px solid #b69a5a; outline-offset: 3px; }
@media (max-width: 600px) {
    .xl-draw-explanation-heading { padding: 16px 18px; }
    .xl-draw-explanation-body { padding: 18px; font-size: 13px; }
    .xl-draw-explanation-footer { padding: 12px 18px; }
    .xl-draw-explanation-footer button { width: 100%; }
}

.xl-mfa-dialog { max-height: 92vh; overflow-y: auto; }
.xl-mfa-dialog canvas { display: block; max-width: 100%; margin: 12px auto; }
#xl-mfa-secret, #xl-mfa-recovery-codes { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; padding: 12px; background: #f1f5f4; color: #123f35; border-radius: 6px; font-size: 13px; }
#xl-login-otp-field input, #xl-mfa-credentials input { width: 100%; box-sizing: border-box; }
.xl-account-security {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "icon title action" "icon description action";
    align-items: center;
    gap: 7px 18px;
    margin: 18px 0;
    padding: 24px;
    border: 1px solid #d7e5df;
    border-radius: 12px;
    background: linear-gradient(115deg, #f0f7f3 0%, #fbfdfc 62%, #faf8f0 100%);
}

.xl-account-security::before {
    content: "";
    grid-area: icon;
    width: 52px;
    height: 56px;
    border: 1px solid #d3e4db;
    border-radius: 14px;
    background: #e4f0e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32' fill='none'%3E%3Cpath d='M14 2 25 6v9c0 7-6 12-11 15C9 27 3 22 3 15V6L14 2Z' stroke='%23397d68' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m9 15 3.5 3.5L20 11' stroke='%23a88742' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 32px no-repeat;
    box-sizing: border-box;
}

.xl-account-security > h3 {
    grid-area: title;
    align-self: end;
    margin: 0;
    color: #385b51;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.5;
}

.xl-account-security > p {
    grid-area: description;
    align-self: start;
    margin: 0;
    color: #657a71;
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.xl-account-security > button {
    grid-area: action;
    min-height: 44px;
    padding: 11px 20px;
    border: 1px solid #397d68;
    border-radius: 8px;
    color: #fff;
    background: var(--xl-bet-green-dark);
    box-shadow: 0 3px 8px #397d6814;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

.xl-account-security > button:hover {
    background: #306b59;
    box-shadow: 0 4px 12px #397d6826;
}

.xl-account-security > button:focus-visible {
    outline: 3px solid #b69a5a;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .xl-account-security {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas: "icon title" "description description" "action action";
        gap: 12px;
        padding: 20px;
    }
    .xl-account-security::before { width: 44px; height: 46px; border-radius: 12px; }
    .xl-account-security > h3 { align-self: center; }
    .xl-account-security > button { margin-top: 4px; width: 100%; white-space: normal; }
}

/* Email verification follows the current account theme and fits shorter viewports. */
#xl-register-dialog, #xl-email-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.xl-email-code-row { display: flex; gap: 10px; align-items: stretch; }
.xl-email-code-row input { min-width: 0; flex: 1; }
.xl-email-code-row button { flex: 0 0 auto; padding: 9px 14px; border: 1px solid #ad9152; border-radius: 8px; background: #e7c76c; color: #143b30; font: inherit; cursor: pointer; }
.xl-email-code-row button:disabled { opacity: .6; cursor: wait; }
#xl-email-fields { display: grid; gap: 9px; }
#xl-email-fields[hidden], #xl-email-confirm-field[hidden], #xl-email-mfa-field[hidden] { display: none; }
#xl-email-fields label { display: block; margin-top: 4px; }
#xl-email-fields input { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) { .xl-email-code-row { gap: 7px; } .xl-email-code-row button { padding: 9px 10px; font-size: 12px; } }


/* Agent member opening follows the account page theme. */
.xl-agent-members { margin: 18px 0; padding: 24px; border: 1px solid var(--xl-bet-line); border-radius: 12px; background: var(--xl-bet-panel-strong); }
.xl-agent-members h3, .xl-agent-members h4 { color: var(--xl-bet-title); }
.xl-agent-members p { line-height: 1.8; overflow-wrap: anywhere; }
.xl-agent-members .xl-portal-actions { flex-wrap: wrap; align-items: center; }
.xl-agent-members button { min-height: 42px; }
.xl-agent-members button:disabled { opacity: .5; cursor: not-allowed; }
.xl-agent-notice { color: var(--xl-bet-green-dark); }
.xl-agent-notice.is-error { color: #b44936; }
.xl-agent-create-form[hidden] { display: none; }
.xl-agent-create-form fieldset { min-width: 0; margin: 18px 0; padding: 20px; border: 1px solid var(--xl-bet-line); border-radius: 10px; background: var(--xl-bet-panel); }
.xl-agent-create-form legend { padding: 0 8px; color: var(--xl-bet-title); font-weight: 600; }
.xl-agent-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xl-agent-fields label { display: grid; gap: 8px; min-width: 0; font-size: 13px; }
.xl-agent-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--xl-bet-line); border-radius: 6px; background: var(--xl-bet-panel-strong); color: var(--xl-bet-title); font: inherit; }
.xl-agent-fields input:focus-visible { outline: 2px solid var(--xl-bet-green); outline-offset: 2px; }
.xl-agent-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--xl-bet-line); overflow-wrap: anywhere; }
.xl-agent-member time { grid-column: 1 / -1; color: var(--xl-bet-muted); font-size: 12px; }
@media (max-width: 768px) {
    .xl-agent-members { padding: 16px; }
    .xl-agent-create-form fieldset { padding: 14px; }
    .xl-agent-fields { grid-template-columns: minmax(0, 1fr); }
    .xl-agent-members .xl-portal-actions > button { flex: 1 1 auto; }
}

/* Bet details and configurable chase periods. */
.xl-bet-actions { min-width: 142px; white-space: nowrap; }
.xl-bet-actions .xl-record-action + .xl-record-action { margin-left: 5px; }
.xl-bet-detail { width: min(800px, calc(100vw - 28px)); max-height: 88dvh; padding: 22px; overflow: auto; border: 1px solid #c5d9d0; border-radius: 16px; color: var(--xl-bet-green-dark); background: #f8fbf9; }
.xl-bet-detail:not([open]) { display: none; }
.xl-bet-detail::backdrop { background: #16382e88; }
.xl-bet-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d7e3de; }
.xl-bet-detail h2 { margin: 0 0 14px; font-size: 21px; }
.xl-bet-detail h3 { font-size: 14px; }
.xl-bet-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 18px; }
.xl-bet-detail-grid > div { padding: 12px 0; border-bottom: 1px solid #dde6e1; min-width: 0; }
.xl-bet-detail-grid dt { font-size: 12px; color: #7a8781; }
.xl-bet-detail-grid dd { margin: 5px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.xl-bet-detail-selection { max-height: 210px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; padding: 14px; border: 1px solid #c9d8d0; border-radius: 8px; font: 12px/1.8 monospace; }
.xl-chase-dialog { max-height: calc(100dvh - 28px); overflow-y: auto; }
.xl-chase-heading { align-items: flex-start; }
.xl-chase-heading > div { min-width: 0; }
.xl-chase-heading > button { flex: 0 0 32px; }
#xl-chase-selection { max-height: 54px; overflow: hidden; overflow-wrap: anywhere; line-height: 1.5; }
.xl-chase-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 14px; background: #edf4f1; border-radius: 10px; }
.xl-chase-controls label { display: flex; align-items: center; gap: 6px; }
.xl-chase-controls input { width: 68px; height: 32px; border: 1px solid #bdcbc6; border-radius: 6px; padding: 0 6px; background: #fff; color: var(--xl-bet-green-dark); }
.xl-chase-presets { display: flex; gap: 4px; }
.xl-chase-presets button { min-height: 32px; padding: 0 10px; border: 1px solid #bfd2c9; border-radius: 6px; background: #fff; color: var(--xl-bet-green-dark); cursor: pointer; }
.xl-chase-presets button.is-active { background: var(--xl-bet-green); color: #fff; border-color: var(--xl-bet-green); }
.xl-chase-table-head, .xl-chase-issue { display: grid; grid-template-columns: minmax(155px,1.6fr) 72px minmax(75px,.8fr) minmax(125px,1.2fr); gap: 10px; align-items: center; }
.xl-chase-table-head { order: 1; padding: 0 12px; color: #7a8781; font-size: 12px; }
.xl-chase-controls { order: 0; }
.xl-chase-options { order: 3; flex-wrap: wrap; }
.xl-chase-issues { order: 2; max-height: 330px; }
.xl-chase-summary { order: 4; }
#xl-chase-status { order: 5; }
#xl-chase-submit { order: 6; }
.xl-chase-issue input[type="number"] { width: 72px; box-sizing: border-box; }
.xl-chase-issue time { margin: 0; font-size: 11px; }
.xl-chase-row-amount { color: var(--xl-bet-green-dark); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
 .xl-bet-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
 .xl-chase-card { padding: 14px; gap: 12px; }
 .xl-chase-table-head { display: none; }
 .xl-chase-issue { grid-template-columns: minmax(0,1fr) 66px 82px; gap: 8px; }
 .xl-chase-issue time { grid-column: 1 / -1; }
 .xl-chase-issue time::before { content: "截止时间："; }
 html:lang(en) .xl-chase-issue time::before { content: "Cutoff: "; }
 .xl-chase-issue input[type="number"] { width: 66px; }
 .xl-chase-presets button { padding: 0 8px; }
}

/* Personal withdrawal methods use the account theme and remain visible before withdrawal. */
.xl-withdrawal-methods { scroll-margin-top: 24px; padding: 22px; }
.xl-withdrawal-methods h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #244e3b; }
.xl-withdrawal-methods .xl-finance-empty { margin: 0; padding: 0; border: 0; background: none; text-align: left; min-height: 0; }
.xl-withdrawal-method-card [role="status"]:empty { display: none; }
.xl-finance-withdraw-form .is-subtle { align-self: flex-start; padding: 8px 12px; background: transparent; border: 1px solid #bfd2c9; border-radius: 7px; color: #34604a; cursor: pointer; }
.xl-withdrawal-method-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.xl-withdrawal-method-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border: 1px solid #d7e4de; border-radius: 12px; background: #f7faf8; }
.xl-withdrawal-method-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.xl-withdrawal-method-head h3 { margin: 0; font-size: 16px; }
.xl-withdrawal-method-head span { color: #537565; font-size: 12px; white-space: nowrap; }
.xl-withdrawal-method-card label { color: #5e7267; font-size: 13px; }
.xl-withdrawal-method-card input { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; border: 1px solid #bccfc4; border-radius: 7px; padding: 0 10px; background: #fff; color: #163c2b; font-size: 13px; }
.xl-withdrawal-method-card input:focus { outline: 2px solid #69a186; outline-offset: 2px; }
.xl-withdrawal-method-card button { align-self: flex-start; margin: 0; }
.xl-finance-quote { margin: 8px 0; padding: 10px 12px; border-radius: 7px; background: #eaf3ee; color: #24583d; line-height: 1.7; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .xl-withdrawal-method-grid { grid-template-columns: 1fr; } .xl-withdrawal-method-card { padding: 16px; } }

/* Account opening and password controls share the existing personal-center theme. */
.xl-agent-fields select, .xl-password-change input { width:100%;box-sizing:border-box;min-height:42px;border:1px solid #bdd2c6;border-radius:7px;padding:9px 10px;background:#fff;color:#234d3b;font-size:14px; }
.xl-password-change { padding:22px; }
.xl-password-change summary { cursor:pointer;font-size:16px;font-weight:600;color:#234d3b; }
.xl-password-change form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px; }
.xl-password-change label { display:flex;flex-direction:column;gap:7px;font-size:13px; }
.xl-password-change p { font-size:13px;line-height:1.7;color:#547060; }
#xl-transfer-dialog { box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);overflow-y:auto;padding:26px;border:0;border-radius:16px;color:#234d3b;background:#fff; }
#xl-transfer-dialog::backdrop { background:rgba(16,39,29,.48); }
#xl-transfer-title { margin:0 0 10px;font-size:21px;font-weight:600; }
#xl-transfer-description { font-size:13px;line-height:1.8;color:#62796c;margin:0 0 18px; }
#xl-transfer-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end; }
#xl-transfer-form label { display:flex;flex-direction:column;gap:7px;font-size:13px;min-width:0; }
#xl-transfer-form label:not(:first-child), #xl-transfer-recipient, #xl-transfer-submit { grid-column:1/-1; }
#xl-transfer-form input:not([type=checkbox]) { box-sizing:border-box;width:100%;min-height:42px;border:1px solid #c1d4c8;border-radius:7px;padding:10px;font-size:14px; }
#xl-transfer-form label:has(input[type=checkbox]) { flex-direction:row;align-items:flex-start;line-height:1.6; }
#xl-transfer-form button,#xl-transfer-dialog>form[method=dialog] button { min-height:42px;padding:10px 16px;background:#427d64;color:white;border:0;border-radius:7px;cursor:pointer; }
#xl-transfer-form button:disabled { opacity:.45;cursor:not-allowed; }
#xl-transfer-recipient { margin:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere; }
#xl-transfer-status { padding:12px;margin:16px 0;background:#eff5f1;border-radius:8px;line-height:1.8;font-size:13px;overflow-wrap:anywhere; }
#xl-transfer-history { max-height:150px;overflow:auto;font-size:12px;line-height:1.8;margin-bottom:14px; }
.xl-transfer-entry { padding: 8px 0; border-bottom: 1px solid var(--xl-bet-line); }
.xl-transfer-reference { display: block; overflow-wrap: anywhere; white-space: normal; line-height: 1.7; }
.xl-preview-records td.xl-ledger-detail { min-width: 230px; text-align: left; white-space: normal; }
@media(max-width:600px){.xl-password-change form{grid-template-columns:1fr;}#xl-transfer-dialog{padding:20px;}}

/* Agent-only reports: filters and full-team aggregates, no per-page totals. */
.xl-report-tabs { display:flex;gap:8px;margin:0 0 22px;border-bottom:1px solid #d7e5dc;padding-bottom:14px; }
.xl-report-tabs button,.xl-report-quick button { padding:10px 16px;border:1px solid #bfd2c7;border-radius:8px;background:#fff;color:#416b57;cursor:pointer;font-size:13px; }
.xl-report-tabs button.is-active { background:#477f68;color:#fff;border-color:#477f68; }
.xl-team-report-title { font-size:18px;font-weight:600;margin:0 0 10px;color:#2d5943; }
.xl-report-help { color:#687d71;font-size:12px;line-height:1.9;margin:0 0 20px;max-width:960px; }
.xl-report-filter { display:grid;grid-template-columns:1fr 1fr 1.4fr 1.3fr auto;align-items:end;gap:12px;background:#f4f8f5;border:1px solid #dfe9e2;border-radius:12px;padding:18px; }
.xl-report-filter label { display:flex;flex-direction:column;gap:8px;font-size:12px;color:#476751;min-width:0; }
.xl-report-filter input,.xl-report-filter select { box-sizing:border-box;min-width:0;width:100%;height:40px;padding:0 10px;border:1px solid #c5d7cb;border-radius:7px;background:#fff;color:#244c37;font-size:13px; }
.xl-report-filter button { margin:0;height:40px; }
.xl-report-quick { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0; }
.xl-report-quick button { padding:6px 12px; }
.xl-report-status { font-size:12px;color:#6c8074;line-height:1.8;min-height:22px; }
.xl-report-status.is-error { color:#ae463d; }
.xl-team-report-results .xl-portal-stats { margin:18px 0 22px; }
.xl-team-report-table table { width:100%;min-width:950px; }
.xl-team-report-table td { font-variant-numeric:tabular-nums;white-space:nowrap; }
.xl-team-report-table td:nth-child(n+4) { text-align:right; }
.xl-team-report-table .is-profit { color:#337a59;font-weight:600; }
.xl-team-report-table .is-loss { color:#b45242;font-weight:600; }
.xl-agent-members-table table { width:100%;min-width:1160px; }
.xl-agent-members-table td:nth-child(3),.xl-agent-members-table td:nth-child(4),.xl-agent-members-table td:nth-child(8) { text-align:right; font-variant-numeric:tabular-nums; }
.xl-agent-members-table td { white-space:nowrap; }
.xl-personal-report td:nth-child(4) { max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
@media(max-width:800px){.xl-report-filter{grid-template-columns:1fr 1fr;}.xl-report-filter button{grid-column:1/-1;}}

.xl-agent-opening-info { margin: 16px 0; padding: 18px; border: 1px solid #94c4a7; border-radius: 10px; background: #eff8f2; }
.xl-agent-opening-info h4 { margin: 0 0 6px; color: #24583d; font-size: 15px; }
.xl-agent-opening-info > p { margin: 0 0 12px; color: #557365; font-size: 12px; }
.xl-agent-opening-grid { display: grid; gap: 7px; margin-bottom: 14px; }
.xl-agent-opening-grid > div { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 8px; }
.xl-agent-opening-grid span { color: #607b6a; font-size: 12px; }
.xl-agent-opening-grid code { min-width: 0; overflow-wrap: anywhere; color: #1f5138; font-size: 13px; }
.xl-agent-opening-info button { margin: 0; }

/* Keep agent actions legible inside both the toolbar and member cards. */
.xl-agent-members > .xl-portal-actions button,
.xl-agent-opening-info > button,
.xl-agent-member > button,
.xl-agent-members-table td button {
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #28604e;
    border-radius: 8px;
    background: #28604e;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.xl-agent-members > .xl-portal-actions button:hover:not(:disabled),
.xl-agent-opening-info > button:hover:not(:disabled),
.xl-agent-member > button:hover:not(:disabled),
.xl-agent-members-table td button:hover:not(:disabled) {
    background: #1e493c;
    border-color: #1e493c;
}
.xl-agent-members > .xl-portal-actions button:focus-visible,
.xl-agent-opening-info > button:focus-visible,
.xl-agent-member > button:focus-visible,
.xl-agent-members-table td button:focus-visible {
    outline: 2px solid #28604e;
    outline-offset: 3px;
}