:root {
    --accent: #2dd4bf;
    --accent2: #f87171;
    --accent3: #ffc53d;
    --black: #07040f;
    --medium: #150c2e;
    --dark: #0e0820;
    --light: #a79fc4;
    --white: #f5f2ff;
    --telegram: #229ed9;
    --violet: #8b5cf6;
    --violet-deep: #6d28d9;
    --border: #2a1b4d;
    --border-strong: #3b2a6b;
    --surface: #0e0820;
    --surface-raised: #150c2e;
    --shadow: 0 18px 55px rgba(4, 2, 11, 0.45);
    --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--telegram-runtime-safe-top, 0px));
    --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--telegram-runtime-safe-bottom, 0px));
    --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
    --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
}

* {
    box-sizing: border-box;
}

html,
body {
    background:
        radial-gradient(circle at 50% -10%, rgba(124, 58, 237, 0.18), transparent 34%),
        #07040f;
    color: var(--white);
}

body {
    min-height: var(--tg-viewport-stable-height, 100dvh);
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app_container {
    width: 100%;
    max-width: 500px;
    min-height: var(--tg-viewport-stable-height, 100dvh);
    position: relative;
    background: rgba(7, 4, 15, 0.96);
}

.app_body {
    height: var(--tg-viewport-stable-height, 100dvh);
}

.app_tab {
    height: var(--tg-viewport-stable-height, 100dvh);
    gap: 10px;
    padding: calc(var(--app-safe-top) + 58px) calc(var(--app-safe-right) + 14px) calc(112px + var(--app-safe-bottom)) calc(var(--app-safe-left) + 14px);
    scrollbar-width: none;
}

.global_balance_bar {
    position: fixed;
    z-index: 997;
    top: calc(var(--app-safe-top) + 7px);
    left: 50%;
    display: flex;
    width: min(calc(100% - 28px), 472px);
    min-height: 42px;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(14, 8, 32, .94);
    box-shadow: 0 9px 28px rgba(2, 1, 8, .32);
    backdrop-filter: blur(14px);
}

/* Telegram's iOS chat launcher can report no content-safe top inset while its
   floating Close/menu controls still occupy the top of the Mini App. */
body.telegram-overlay-fallback .global_balance_bar {
    top: calc(var(--app-safe-top) + 61px);
}

body.telegram-overlay-fallback .app_tab {
    padding-top: calc(var(--app-safe-top) + 112px);
}

body.telegram-overlay-fallback .bet_offer_tab_chart_container,
body.telegram-overlay-fallback .bet_details_tab_chart_container {
    height: clamp(176px, calc(38dvh - 54px), 286px);
    min-height: 176px;
}

.global_balance_item {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    margin: 3px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.global_balance_item.active.real {
    border-color: rgba(45, 212, 191, .42);
    background: rgba(45, 212, 191, .09);
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .04);
}

.global_balance_item.active.virtual {
    border-color: rgba(255, 197, 61, .42);
    background: rgba(255, 197, 61, .08);
}

.global_balance_item span {
    color: #756d92;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .09em;
}

.global_balance_item strong { font-size: 11px; }
.global_balance_item.real strong { color: var(--accent); }
.global_balance_item.virtual strong { color: #ffc53d; }
.global_balance_divider { width: 1px; height: 19px; background: var(--border); }

#bet_offer_tab {
    overflow: hidden;
}

.app_container_lg {
    gap: 12px;
    border-radius: 18px;
}

.app_container_lg:last-child {
    margin-bottom: 0;
}

.app_container_lg_inner,
.app_bet_details_container,
.ton_connect,
.credit-card,
.support_textarea {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.app_container_lg_inner {
    min-height: 72px;
    padding: 12px 13px;
    border-radius: 14px;
}

.app_container_lg_inner_chart {
    border-radius: 18px;
}

.app_section_title_wrapper_center {
    justify-content: flex-start;
    height: auto;
    padding: 2px 1px 0;
    background: transparent;
}

.app_section_title_wrapper_center div {
    font-size: clamp(16px, 4.25vw, 19px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-align: left;
}

.trade_heading {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 1px;
}

.trade_heading span,
.trade_heading strong {
    display: block;
}

.trade_heading span {
    color: #a78bfa;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}

.trade_heading strong {
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.18;
    letter-spacing: -.03em;
}

.game_help_button {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(21, 12, 46, .72);
    color: #8279aa;
}

.game_help_button ion-icon {
    font-size: 15px;
}

#bet_offer_tab .asset_logo {
    display: none;
}

#bet_offer_tab .app_container_lg_inner {
    min-height: 54px;
    padding-block: 8px;
}

#bet_offer_tab .asset_name { font-size: 11px; }
#bet_offer_current_price { font-size: 11px; }
#bet_offer_tab .asset_price_wrapper { font-size: 9px; }

.app_section_title_wrapper {
    gap: 10px;
    padding: 2px 0 6px;
}

.app_section_title_wrapper ion-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-raised);
    color: var(--accent);
}

.app_section_title_wrapper div {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.asset_logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffc53d, #fb923c);
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.16);
}

.asset_logo ion-icon {
    color: #150c2e;
    font-size: 27px;
}

.asset_name {
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.asset_start_price,
.asset_price_wrapper {
    color: var(--light);
    font-size: 12px;
}

#bet_offer_current_price {
    color: var(--white);
    font-size: 13px;
    font-weight: 650;
}

.asset_end_price_change_good,
.bet_reward_won,
.deposit_amount {
    color: var(--accent);
}

.asset_end_price_change_bad,
.bet_reward_lost {
    color: var(--accent2);
}

.bet_offer_tab_chart_container,
.bet_details_tab_chart_container {
    height: clamp(230px, 38dvh, 340px);
    min-height: 230px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.expand_chart_button {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(21, 12, 46, 0.9);
    color: var(--light);
    backdrop-filter: blur(8px);
}

.app_bet_details_container {
    min-height: 82px;
    padding: 12px 14px;
    border-radius: 15px;
}

.app_reward_title,
.app_reward_subtitle {
    color: var(--light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app_reward_wrapper_amount {
    color: var(--accent);
    font-size: 22px;
    font-weight: 750;
}

.number-input {
    gap: 7px;
}

.number-input button,
.number-input input {
    height: 38px;
    border: 1px solid var(--border-strong);
    background: var(--black);
    color: var(--white);
}

.number-input button {
    width: 38px;
    border-radius: 10px;
}

.number-input input {
    width: 54px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 750;
    text-align: center;
}

.bet_button_wrapper {
    gap: 10px;
}

.bet_button_lower,
.bet_button_higher {
    display: flex;
    width: 100%;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 750;
    box-shadow: none;
}

.bet_button_lower {
    background: linear-gradient(145deg, #be123c, #ef476f);
}

.bet_button_higher {
    background: linear-gradient(145deg, #047857, #10b981);
}

.button_undertext_lower,
.button_undertext_higher {
    margin-top: 2px;
    color: rgba(255,255,255,.82);
    font-size: 8px;
    font-weight: 700;
}

.button_undertext_lower {
    color: rgba(255,255,255,.82);
}

.button_undertext_higher {
    color: rgba(255,255,255,.82);
}

.app_nav {
    bottom: max(8px, var(--app-safe-bottom));
    width: min(calc(100% - 28px), 430px);
    min-height: 54px;
    justify-content: space-around;
    gap: 0;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(14, 8, 32, 0.94);
    box-shadow: 0 18px 48px rgba(2, 1, 8, 0.58);
    backdrop-filter: blur(18px);
}

.app_nav .nav_button {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 8px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8279aa;
    opacity: 1;
    cursor: pointer;
}

.app_nav .nav_button.active {
    background: #1f1145;
    color: #a78bfa !important;
}

.app_nav .nav_button svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.leaderboard_shell {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.leaderboard_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 2px;
}

.leaderboard_eyebrow {
    color: #a78bfa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.leaderboard_header h2 {
    margin: 3px 0 1px;
    font-size: 23px;
    letter-spacing: -.04em;
}

.leaderboard_header p {
    margin: 0;
    color: var(--light);
    font-size: 11px;
}

.leaderboard_trophy {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 197, 61, .32);
    border-radius: 14px;
    background: radial-gradient(circle at 35% 25%, #ffe79a, #ffc53d 45%, #b96809);
    color: #241105;
    box-shadow: 0 10px 26px rgba(255, 197, 61, .16);
    font-size: 19px;
}

.leaderboard_modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.leaderboard_mode {
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8279aa;
    font-size: 9px;
    font-weight: 750;
}

.leaderboard_mode i {
    margin-right: 5px;
}

.leaderboard_mode.active {
    background: #1f1145;
    color: #c4b5fd;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .16);
}

.leaderboard_periods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.leaderboard_period {
    min-height: 27px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(14, 8, 32, .72);
    color: #756d92;
    font-size: 8px;
    font-weight: 700;
}

.leaderboard_period.active {
    border-color: rgba(45, 212, 191, .34);
    background: rgba(45, 212, 191, .08);
    color: var(--accent);
}

.leaderboard_list {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    padding-right: 2px;
    overscroll-behavior: contain;
}

.leaderboard_row {
    display: grid;
    min-height: 52px;
    grid-template-columns: 24px 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.leaderboard_rank {
    color: #8279aa;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.leaderboard_avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #2a1857, #15102e);
    color: #bca8ff;
    font-size: 11px;
    font-weight: 800;
}

.leaderboard_wallet,
.leaderboard_profit {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.leaderboard_wallet strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard_wallet span,
.leaderboard_profit span {
    margin-top: 3px;
    color: var(--light);
    font-size: 8px;
}

.leaderboard_profit {
    align-items: flex-end;
}

.leaderboard_profit strong {
    color: var(--accent);
    font-size: 12px;
}

.leaderboard_row.is-first { border-color: rgba(255, 197, 61, .48); background: linear-gradient(90deg, rgba(255, 197, 61, .08), var(--surface) 44%); }
.leaderboard_row.is-first .leaderboard_rank { color: #ffc53d; }
.leaderboard_row.is-second .leaderboard_rank { color: #c8ceda; }
.leaderboard_row.is-third .leaderboard_rank { color: #d98c58; }
.leaderboard_row.is-you { border-color: rgba(45, 212, 191, .42); background: linear-gradient(90deg, rgba(45, 212, 191, .08), var(--surface)); }

.leaderboard_demo_note {
    flex: 0 0 auto;
    color: #756d92;
    font-size: 8px;
    text-align: center;
}

.activity_ticker {
    position: fixed;
    z-index: 998;
    left: 50%;
    bottom: calc(max(8px, var(--app-safe-bottom)) + 61px);
    display: flex;
    width: min(calc(100% - 44px), 400px);
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    transform: translateX(-50%);
    border: 1px solid rgba(42, 27, 77, .84);
    border-radius: 13px;
    background: linear-gradient(105deg, rgba(31, 17, 69, .94), rgba(14, 8, 32, .94));
    box-shadow: 0 10px 30px rgba(2, 1, 8, .38), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.activity_ticker.is-hidden { display: none; }

#wallet_transaction_button_wrapper {
    gap: 8px;
    margin: 0;
}

#wallet_transaction_button_wrapper .bet_button_lower,
#wallet_transaction_button_wrapper .bet_button_higher {
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 11px;
    font-size: 11px;
}

.wallet_support_button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(31, 17, 69, .65);
    color: #b7afd0;
    font-size: 10px;
    font-weight: 700;
}

.wallet_support_button ion-icon { color: #a78bfa; font-size: 15px; }

.wallet_support_top {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 1;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #8279aa;
    font-size: 10px;
}

.wallet_support_top span { white-space: nowrap; }

.activity_amount {
    font-weight: 850;
}

.activity_amount.positive { color: var(--accent); }
.activity_amount.negative { color: var(--accent2); }

.history_modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.history_mode {
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #8279aa;
    font-size: 9px;
    font-weight: 750;
}

.history_mode i { margin-right: 5px; }
.history_mode.active { background: #1f1145; color: #fff; }
.history_mode[data-history-mode="real"].active i { color: var(--accent); }
.history_mode[data-history-mode="virtual"].active i { color: #ffc53d; }

.history_currency_badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 3px 5px;
    border: 1px solid rgba(45, 212, 191, .24);
    border-radius: 6px;
    color: var(--accent);
    font-size: 6px;
    font-weight: 850;
    letter-spacing: .08em;
}

.history_currency_badge.virtual { border-color: rgba(255,197,61,.25); color: #ffc53d; }

.history_empty_state {
    padding: 24px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: #8279aa;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

#bet_details_thumbs {
    min-height: 250px;
    height: auto;
    z-index: 2;
}

.bet_details_header {
    display: grid;
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(31,17,69,.92), rgba(14,8,32,.96));
}

.bet_details_header.won { border-color: rgba(45,212,191,.35); background: linear-gradient(120deg, rgba(45,212,191,.1), rgba(14,8,32,.96) 56%); }
.bet_details_header.lost { border-color: rgba(248,113,113,.35); background: linear-gradient(120deg, rgba(248,113,113,.1), rgba(14,8,32,.96) 56%); }
.bet_details_header > button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 11px; background: #150c2e; color: #a78bfa; }
.bet_details_header > button ion-icon { font-size: 18px; }
.bet_details_header > div { min-width: 0; }
.bet_details_header > div span, .bet_details_header > div strong, .bet_details_header > div small { display: block; }
.bet_details_header > div span { color: #8279aa; font-size: 6px; font-weight: 850; letter-spacing: .13em; }
.bet_details_header > div strong { overflow: hidden; margin-top: 3px; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.bet_details_header.won > div strong { color: var(--accent); }
.bet_details_header.lost > div strong { color: var(--accent2); }
.bet_details_header > div small { margin-top: 2px; color: var(--light); font-size: 8px; }
.bet_details_header.pending > div strong { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.025em; }
.bet_details_header.pending > div small { margin-top: 5px; color: var(--accent); font-size: 23px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.bet_details_header.pending > div small::before { content: "⏱ "; color: var(--accent); font-size: 12px; }
.bet_details_mode_badge { padding: 5px 7px; border: 1px solid rgba(45,212,191,.25); border-radius: 8px; color: var(--accent); font-size: 6px; font-weight: 850; letter-spacing: .06em; }
.bet_details_mode_badge.virtual { border-color: rgba(255,197,61,.28); color: #ffc53d; }
.bet_details_mode_badge i { margin-right: 3px; }

#bet_details_tab > .app_container_lg > .app_container_lg_inner .asset_logo {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    opacity: .82;
}

#bet_details_tab > .app_container_lg > .app_container_lg_inner .asset_logo ion-icon { font-size: 18px; }
#bet_details_tab > .app_container_lg > .app_container_lg_inner .asset_name { color: #b7afd0; font-size: 9px; font-weight: 650; }
#bet_details_tab > .app_container_lg > .app_container_lg_inner .asset_price_wrapper { margin-top: 1px; color: #756d92; font-size: 8px; }

.bet_result_panel {
    display: flex;
    min-height: 250px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 18px;
    border: 1px solid rgba(45, 212, 191, .34);
    border-radius: 18px;
    background: radial-gradient(circle at 50% 15%, rgba(45,212,191,.16), transparent 42%), var(--surface);
    text-align: center;
}

.bet_result_panel.lost {
    border-color: rgba(251, 97, 130, .34);
    background: radial-gradient(circle at 50% 15%, rgba(251,97,130,.15), transparent 42%), var(--surface);
}

.bet_result_icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 16px;
    background: rgba(45,212,191,.13);
    color: var(--accent);
    font-size: 22px;
}

.bet_result_panel.lost .bet_result_icon { background: rgba(251,97,130,.13); color: var(--accent2); }
.bet_result_panel > span { color: #8279aa; font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.bet_result_panel h2 { margin: 5px 0 2px; color: var(--accent); font-size: 24px; }
.bet_result_panel.lost h2 { color: var(--accent2); }
.bet_result_panel > strong { color: #fff; font-size: 25px; }
.bet_result_panel p { max-width: 270px; margin: 7px 0 14px; color: var(--light); font-size: 9px; line-height: 1.4; }
.bet_result_panel button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 11px; background: linear-gradient(96deg,#6d28d9,#7c3aed 65%,#2dd4bf); color: #fff; font-size: 10px; font-weight: 800; }
.bet_result_pending { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 9px; color: #a78bfa; }
.bet_result_pending i { animation: spin 1s linear infinite; }

.activity_icon {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border-radius: 9px;
    background: rgba(45, 212, 191, .1);
    color: var(--accent);
    font-size: 11px;
}

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

.activity_status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    color: #8279aa;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
}

.activity_status i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 7px var(--accent);
}

.activity_message {
    overflow: hidden;
    color: #c9c2dd;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity .22s ease, transform .22s ease;
}

.support_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.support_back_button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: #a78bfa;
}

.support_back_button ion-icon { font-size: 18px; }
.support_header strong, .support_header span { display: block; }
.support_header strong { font-size: 15px; }
.support_header span { margin-top: 2px; color: var(--light); font-size: 9px; }

.invite_shell {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.invite_hero {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 86% 10%, rgba(45,212,191,.13), transparent 32%),
        linear-gradient(145deg, rgba(31,17,69,.92), rgba(14,8,32,.98));
}

.invite_icon {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #7c3aed, #2dd4bf);
    color: white;
    font-size: 15px;
}

.invite_hero > span {
    color: #a78bfa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.invite_hero h2 {
    margin: 5px 0 6px;
    font-size: 23px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.invite_hero p {
    margin: 0;
    color: var(--light);
    font-size: 10px;
    line-height: 1.45;
}

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

.invite_rewards > div {
    display: grid;
    min-height: 72px;
    grid-template-columns: 25px 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.invite_rewards i { grid-row: 1 / 3; align-self: center; color: #a78bfa; }
.invite_rewards span { color: var(--light); font-size: 8px; }
.invite_rewards strong { margin-top: 3px; color: var(--accent); font-size: 14px; }
.invite_rewards > div:last-child strong { color: #ffc53d; }

.invite_link_card {
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.invite_link_card > span { color: #756d92; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.invite_link_card > div { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.invite_link_card code { flex: 1; overflow: hidden; color: #c9c2dd; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.invite_link_card button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: #1f1145; color: #a78bfa; }

.invite_share_button {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(96deg, #6d28d9, #7c3aed 68%, #2dd4bf);
    color: white;
    font-size: 12px;
    font-weight: 800;
}

.invite_share_button i { margin-right: 7px; }
.invite_steps { display: flex; align-items: center; justify-content: space-between; color: #756d92; }
.invite_steps > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.invite_steps b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: #a78bfa; font-size: 8px; }
.invite_steps span { font-size: 7px; }
.invite_steps > i { font-size: 7px; }
.invite_preview_note { margin-top: auto; color: #756d92; font-size: 8px; text-align: center; }

.activity_message.is-changing {
    opacity: 0;
    transform: translateY(3px);
}

.nav_icon_wrapper {
    display: flex;
}

.nav_subtab_container {
    width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.nav_subtab_button {
    flex: 1;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    background: transparent;
    color: #8279aa;
    font-size: 12px;
    font-weight: 700;
}

.nav_subtab_button.active {
    background: #1f1145;
    color: #a78bfa;
}

.credit-card {
    min-height: 220px;
    padding: 20px;
    overflow: hidden;
    border-color: var(--border-strong);
    border-radius: 20px;
    background:
        radial-gradient(circle at 82% 16%, rgba(139, 92, 246, 0.17), transparent 32%),
        linear-gradient(135deg, #1f1145, #0e0820 62%, #07040f);
}

.credit-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -58px;
    bottom: -95px;
    border: 1px solid rgba(167, 139, 250, 0.16);
    border-radius: 42px;
    transform: rotate(-18deg);
}

.company-name {
    font-size: 16px;
    font-weight: 750;
}

.issued-date,
.card-footer > div:last-child {
    color: var(--light);
}

.chip {
    width: 40px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(145deg, #ffc53d, #f59e0b);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.18);
}

.balance {
    color: var(--accent);
}

.ton_connect {
    padding: 22px 18px;
    border-radius: 18px;
    gap: 15px;
}

.ton_connect_title2 {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.ton_connect_image2 {
    width: min(190px, 56vw);
    height: 170px;
    object-fit: contain;
}

.ton_connect_text2 {
    max-width: 340px;
    color: var(--light);
    font-size: 12px;
    line-height: 1.55;
}

#ton-connect-button div tc-root button {
    min-height: 48px;
    border-radius: 13px;
    background: linear-gradient(96deg, #6d28d9, #7c3aed 76%, #2dd4bf) !important;
}

.my_bets_list,
#transactions_list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.my_bets_list .app_container_lg_inner,
#transactions_list .app_container_lg_inner {
    border-radius: 15px;
}

.bet_status_icon_pending,
.bet_status_icon_bad,
.bet_status_icon_good,
.deposit_status_icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-raised);
}

.bet_status_icon_good,
.deposit_status_icon {
    color: var(--accent);
}

.bet_status_icon_bad {
    color: var(--accent2);
}

.my_bets_list .bet_history_card {
    min-height: 66px;
    padding: 9px 10px;
}

.my_bets_list .bet_status_icon_pending,
.my_bets_list .bet_status_icon_bad,
.my_bets_list .bet_status_icon_good {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 9px;
    font-size: 14px;
    opacity: .82;
}

.my_bets_list .asset_name {
    color: #8279aa;
    font-size: 8px;
    font-weight: 650;
}

.my_bets_list .history_currency_badge { font-size: 5px; }
.my_bets_list .asset_price_wrapper { margin-top: 4px; opacity: .78; }
.my_bets_list .pill_stake_wrapper,
.my_bets_list .bet_resolved_at_pill { font-size: 7px; }

.my_bets_list .bet_reward_wrapper {
    min-width: 92px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(21,12,46,.72);
}

.my_bets_list .bet_reward_title {
    color: #fff;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.my_bets_list .bet_reward_value_good,
.my_bets_list .bet_reward_value_bad {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 850;
}

.support_textarea {
    min-height: 300px;
    height: calc(100dvh - 270px);
    padding: 15px;
    border-radius: 15px;
    color: var(--white);
    line-height: 1.5;
    outline: none;
}

.support_textarea:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
}

.modal_overlay {
    align-items: center;
    padding: 12px;
    background: rgba(7, 4, 15, 0.82);
    backdrop-filter: blur(7px);
}

.modal_container {
    width: 100%;
    max-width: 460px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.23), transparent 34%),
        linear-gradient(180deg, #1f1145, #0e0820 22%, #07040f);
    box-shadow: 0 24px 70px rgba(3, 1, 10, 0.78);
}

.modal_overlay.is-open .modal_container {
    animation: corporateModalIn 260ms cubic-bezier(.2, .95, .25, 1) forwards;
}

@keyframes corporateModalIn {
    from { transform: translateY(18px) scale(.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal_header_title {
    margin: 0;
    color: #a78bfa;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.modal_close_button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-raised);
    color: var(--light);
}

.modal_body {
    gap: 13px;
}

.offer_visual_shell {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    filter: drop-shadow(0 16px 24px rgba(3, 1, 10, 0.6)) drop-shadow(0 0 20px rgba(139, 92, 246, 0.25));
}

.offer_visual_shell .modal_body_image {
    width: 172px;
    height: 172px;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

.modal_body > .modal_body_image {
    width: 178px;
    height: 178px;
    object-fit: contain;
}

.modal_body_image {
    animation: premiumFloat 5s ease-in-out infinite;
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}

.modal_body_text {
    color: var(--white);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.preconnect_title {
    font-size: 20px;
    letter-spacing: -0.025em;
}

.preconnect_subtitle {
    max-width: 340px;
    margin-top: 7px;
    color: var(--light);
    font-size: 12px;
    line-height: 1.5;
}

.tablo_main_wrapper {
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-raised);
}

.tablo_title {
    color: var(--light);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tablo_card {
    width: 34px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--accent3);
    font-size: 24px;
}

.tablo_seperator {
    color: var(--accent3);
    font-size: 25px;
}

.deposit_button_boosted,
.modal_button {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(96deg, #6d28d9, #7c3aed 76%, #2dd4bf);
    color: white;
    font-size: 14px;
    font-weight: 750;
    box-shadow: 0 12px 30px rgba(109, 40, 217, 0.25);
}

.default_deposit_button {
    color: var(--light);
    font-size: 11px;
}

#loading_screen {
    background: #07040f;
}

#bouncing-dots .dot {
    background: var(--violet);
}

@media (max-width: 380px) {
    .app_tab {
        padding-inline: 12px;
    }

    .bet_offer_tab_chart_container,
    .bet_details_tab_chart_container {
        height: clamp(220px, 35dvh, 280px);
        min-height: 220px;
    }

    .modal_container {
        padding: 15px;
    }

    .offer_visual_shell {
        width: 150px;
        height: 150px;
    }

    .offer_visual_shell .modal_body_image {
        width: 146px;
        height: 146px;
    }
}

@media (max-height: 700px) {
    .app_tab { gap: 8px; padding-top: 55px; }
    .app_container_lg { gap: 8px; }
    .app_container_lg_inner { min-height: 64px; padding-block: 9px; }
    .bet_offer_tab_chart_container { height: 31dvh; min-height: 190px; }
    .app_bet_details_container { min-height: 70px; padding-block: 8px; }
    .bet_button_lower, .bet_button_higher { min-height: 46px; }
    .leaderboard_row { min-height: 53px; padding-block: 6px; }
    .leaderboard_mode { min-height: 34px; }
}