:root,
:root[data-theme="dark"] {
    --premium-bg: #0b0f17;
    --premium-bg-soft: #111827;
    --premium-surface: rgba(20, 28, 42, 0.94);
    --premium-surface-2: rgba(31, 41, 58, 0.96);
    --premium-border: rgba(148, 163, 184, 0.22);
    --premium-text: #f8fafc;
    --premium-muted: #9ca3af;
    --premium-accent: #22d3ee;
    --premium-accent-2: #facc15;
    --premium-green: #05b861;
    --premium-red: #ef233c;
    --premium-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
    --premium-footer: rgba(5, 10, 18, 0.98);
    --premium-footer-active: rgba(34, 211, 238, 0.14);
    --premium-footer-muted: #94a3b8;
    --premium-footer-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(5, 10, 18, 0.99));
    --premium-footer-border: rgba(34, 211, 238, 0.18);
    --premium-footer-item: rgba(148, 163, 184, 0.035);
    --premium-footer-active-bg: linear-gradient(180deg, rgba(34, 211, 238, 0.20), rgba(34, 211, 238, 0.10));
    --premium-footer-active-border: rgba(34, 211, 238, 0.14);
    --premium-footer-active-shadow: 0 10px 24px rgba(34, 211, 238, 0.08);
    --premium-footer-shadow: 0 -18px 42px rgba(0, 0, 0, 0.46);
    --premium-back-bg: linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(34, 211, 238, 0.05)), rgba(5, 10, 18, 0.72);
    --premium-back-border: rgba(34, 211, 238, 0.24);
    --premium-back-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

:root[data-theme="light"] {
    --premium-bg: #f4f7fb;
    --premium-bg-soft: #e9eef6;
    --premium-surface: rgba(255, 255, 255, 0.96);
    --premium-surface-2: rgba(248, 250, 252, 0.98);
    --premium-border: rgba(15, 23, 42, 0.12);
    --premium-text: #111827;
    --premium-muted: #64748b;
    --premium-accent: #0477ff;
    --premium-accent-2: #c58b00;
    --premium-green: #079455;
    --premium-red: #e11d48;
    --premium-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    --premium-footer: rgba(255, 255, 255, 0.95);
    --premium-footer-active: rgba(4, 119, 255, 0.12);
    --premium-footer-muted: #64748b;
    --premium-footer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
    --premium-footer-border: rgba(15, 23, 42, 0.10);
    --premium-footer-item: rgba(15, 23, 42, 0.025);
    --premium-footer-active-bg: linear-gradient(180deg, rgba(4, 119, 255, 0.15), rgba(4, 119, 255, 0.07));
    --premium-footer-active-border: rgba(4, 119, 255, 0.16);
    --premium-footer-active-shadow: 0 10px 22px rgba(4, 119, 255, 0.10);
    --premium-footer-shadow: 0 -18px 38px rgba(15, 23, 42, 0.12);
    --premium-back-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96));
    --premium-back-border: rgba(4, 119, 255, 0.16);
    --premium-back-shadow: 0 10px 24px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.70);
}

html,
body {
    background: var(--premium-bg) !important;
    color: var(--premium-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

#app-body,
#content,
.home_page_main_div {
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.12), transparent 32%),
        radial-gradient(circle at 94% 18%, rgba(250, 204, 21, 0.10), transparent 28%),
        var(--premium-bg) !important;
    color: var(--premium-text) !important;
}

.app-body-out-up {
    transform: translateY(-100%);
    opacity: 0;
}

.app-body-out-down {
    transform: translateY(100%);
    opacity: 0;
}

.app-body-pre-up {
    transform: translateY(-100%);
    opacity: 0;
}

.app-body-pre-down {
    transform: translateY(100%);
    opacity: 0;
}

/* Slide up/down transition for contact-us overlay */
#content.slide-up {
    animation: slideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#content.slide-down {
    animation: slideDown 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contact-us-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--premium-bg, #0b0f17);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
}

.contact-us-content {
    height: 100%;
    overflow: hidden;
}

.contact-us-overlay.slide-up {
    animation: slideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.contact-us-overlay.slide-down {
    animation: slideDown 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.gameBody {
    min-height: calc(100vh - 82px);
    height: auto !important;
    padding: 18px 14px 96px !important;
    background:
        radial-gradient(circle at 20% 8%, rgba(34, 211, 238, 0.12), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(250, 204, 21, 0.10), transparent 28%),
        linear-gradient(180deg, var(--premium-bg), var(--premium-bg-soft)) !important;
    color: var(--premium-text) !important;
}

.game-top-header {
    padding: 12px 12px;
    border: 1px solid var(--premium-border);
    border-radius: 16px;
    background: var(--premium-surface);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(14px);
}

.game-user-block,
.game-wallet-block {
    color: var(--premium-text);
    font-size: 14px;
    letter-spacing: 0;
}

.game-user-block .game-avatar {
    width: 26px;
    max-width: 26px !important;
    height: 26px;
    margin-right: 8px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.menu-button {
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.14);
    color: var(--premium-accent);
    font-size: 18px;
    line-height: 1;
}

.context-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 1px solid var(--premium-back-border);
    border-radius: 999px;
    background: var(--premium-back-bg) !important;
    color: var(--premium-accent) !important;
    box-shadow: var(--premium-back-shadow);
    text-decoration: none;
    backdrop-filter: blur(12px);
}

.context-back-button span {
    color: var(--premium-accent) !important;
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 0.72;
    transform: translateY(-1px);
}

.game-wallet-block {
    color: var(--premium-accent-2);
}

#mySidenav #theme_mode a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--premium-accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.header .left {
    width: 100%;
    padding: 14px 0 6px;
    gap: 10px !important;
}

.header .left > span {
    color: var(--premium-text);
    font-size: 15px;
}

#symbol,
#duration,
#amount,
input,
select {
    min-height: 48px;
    border: 1px solid var(--premium-border) !important;
    border-radius: 12px !important;
    background: var(--premium-surface-2) !important;
    color: var(--premium-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    outline: none;
}

#symbol:focus,
#duration:focus,
#amount:focus,
input:focus,
select:focus {
    border-color: var(--premium-accent) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

.chart-wrapper {
    min-height: 300px;
    margin: 14px 0 12px;
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--premium-surface);
    box-shadow: var(--premium-shadow);
    overflow: hidden;
}

canvas {
    border: 0 !important;
    background: transparent !important;
}

#chart-loader {
    padding: 10px;
    border-radius: 14px;
    background: var(--premium-surface-2);
}

.gameSettings {
    gap: 12px;
    margin-top: 12px;
}

.gameSettings label {
    padding: 0 !important;
    background: transparent !important;
    color: var(--premium-text) !important;
    font-size: 14px;
    letter-spacing: 0;
    display: flex !important;
    flex-direction: column;
}

.gameSettings label select,
.gameSettings label input[type="number"] {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    box-sizing: border-box;
    margin-top: 8px;
    line-height: 1.2;
}

.controls {
    gap: 12px !important;
    margin-top: 16px !important;
}

.upButton,
.downButton,
.signup_btn {
    min-height: 50px;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.upButton {
    background: linear-gradient(135deg, #07c96d, #048b47) !important;
}

.downButton {
    background: linear-gradient(135deg, #ff304f, #c1112f) !important;
}

.upButton .bet-arrow,
.downButton .bet-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: #fff !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.upButton:active,
.downButton:active,
.signup_btn:active {
    transform: translateY(1px);
    filter: brightness(0.96);
}

#flashMessage:empty {
    display: none !important;
}

#flashMessage.flashMessage {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5000 !important;
    width: auto !important;
    min-width: min(320px, calc(100vw - 80px));
    max-width: calc(100vw - 48px);
    margin: 0 !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35;
    text-align: center !important;
    box-shadow: 0 22px 46px rgba(193, 17, 47, 0.34), 0 10px 22px rgba(0, 0, 0, 0.18);
}

#flashMessage.flashMessage.red_back {
    background: linear-gradient(135deg, #ff304f, #c1112f) !important;
}

#flashMessage.flashMessage.green_back {
    background: linear-gradient(135deg, #07c96d, #048b47) !important;
    box-shadow: 0 22px 46px rgba(4, 139, 71, 0.3), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.bets {
    margin-top: 16px !important;
}

.bets h4 {
    margin: 8px 0 10px;
    color: var(--premium-text);
    font-size: 19px;
    font-weight: 900;
    text-align: left;
}

.bets table {
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--premium-border);
    border-radius: 14px;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow);
}

.bets th {
    border: 0 !important;
    background: linear-gradient(135deg, var(--premium-accent), #2563eb) !important;
    color: #fff !important;
    font-weight: 900;
    height: 40px;
}

.bets td {
    border: 0 !important;
    border-top: 1px solid var(--premium-border) !important;
    background: var(--premium-surface) !important;
    color: var(--premium-text) !important;
}

.empty-bets-row td {
    padding: 0 !important;
    background: var(--premium-surface) !important;
}

.empty-bets-state {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    border: 1px dashed var(--premium-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12), transparent 42%),
        var(--premium-surface-2);
    color: var(--premium-accent);
    text-align: center;
}

.empty-bets-image {
    width: 112px;
    height: 84px;
    color: var(--premium-accent);
}

.empty-bets-image,
.empty-bets-image * {
    background: transparent !important;
}

.empty-bets-image rect,
.empty-bets-image circle {
    fill: none !important;
    stroke: var(--premium-accent) !important;
}

.empty-bets-image path {
    fill: none !important;
    stroke: var(--premium-accent) !important;
}

.empty-bets-state strong {
    background: transparent !important;
    color: var(--premium-text);
    font-size: 17px;
    font-weight: 900;
}

.empty-bets-state span {
    background: transparent !important;
    max-width: 230px;
    color: var(--premium-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

#bets_list_wrapper {
    height: calc(100vh - 218px) !important;
    margin: 8px 12px 96px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid var(--premium-border);
    border-radius: 16px;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow);
}

#bets_list_wrapper table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: transparent !important;
}

#bets_list_wrapper th {
    height: 42px;
    padding: 10px 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--premium-accent), #2563eb) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    white-space: normal;
}

#bets_list_wrapper th:nth-child(1),
#bets_list_wrapper td:nth-child(1) {
    width: 24%;
}

#bets_list_wrapper th:nth-child(2),
#bets_list_wrapper td:nth-child(2) {
    width: 40%;
}

#bets_list_wrapper th:nth-child(3),
#bets_list_wrapper td:nth-child(3) {
    width: 18%;
}

#bets_list_wrapper th:nth-child(4),
#bets_list_wrapper td:nth-child(4) {
    width: 18%;
}

#bets_list_wrapper td {
    padding: 12px !important;
    border: 0 !important;
    border-top: 1px solid var(--premium-border) !important;
    background: var(--premium-surface) !important;
    color: var(--premium-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

#bets_list_wrapper td:nth-child(4) {
    font-weight: 900;
}

#bets_list_wrapper tr[style*="green"] td:nth-child(4) {
    color: var(--premium-green) !important;
}

#bets_list_wrapper tr[style*="red"] td:nth-child(4) {
    color: var(--premium-red) !important;
}

#bets_list_wrapper .empty-bets-row td,
.bets .empty-bets-row td {
    padding: 14px !important;
    background: var(--premium-surface) !important;
}

#bets_list_wrapper .empty-bets-state,
.bets .empty-bets-state {
    margin: 0;
}

.top_header {
    padding: 22px 14px 10px !important;
    background: transparent !important;
    color: var(--premium-text) !important;
}

.top_header h2 {
    color: var(--premium-text) !important;
    font-size: 24px;
    font-weight: 900;
}

.my_account_cntnt {
    padding: 0 14px 96px;
}

.account_list .info_txt {
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--premium-border);
    border-radius: 14px;
    background: var(--premium-surface);
    color: var(--premium-accent-2) !important;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: left !important;
    text-transform: uppercase;
}

.account_list ul {
    overflow: hidden;
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background: var(--premium-surface);
    box-shadow: var(--premium-shadow);
}

.account_list li,
.account_list li a {
    background: transparent !important;
}

.account_list li a {
    min-height: 58px;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--premium-border) !important;
    color: var(--premium-text) !important;
    font-size: 15px;
    font-weight: 750;
}

.account_list li:last-child a {
    border-bottom: 0 !important;
}

.account_list li a span,
.account_list li a span i {
    color: var(--premium-text) !important;
}

.account_list li a .icn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--premium-accent) !important;
}

.account_list li a .icn i {
    color: var(--premium-accent) !important;
}

.account_list li a .icn,
.account_list li a .icn i,
.account_list li a .icn svg,
.account_list li a .icn span {
    color: var(--premium-accent) !important;
}

.native-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: currentColor !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    font-weight: 900;
    line-height: 1;
}

.account_list li a .icn .native-icon {
    color: var(--premium-accent) !important;
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.account-svg-icon {
    display: block;
    width: 21px;
    height: 21px;
    color: var(--premium-accent) !important;
    fill: none !important;
    stroke: var(--premium-accent) !important;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: transparent !important;
}

.account-svg-icon * {
    fill: none !important;
    color: var(--premium-accent) !important;
    stroke: var(--premium-accent) !important;
}

#notifications {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#notifications li {
    list-style: none;
}

#notifications .notification-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px !important;
    border: 1px solid var(--premium-border);
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
        var(--premium-surface) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

#notifications .notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(34, 211, 238, 0.14);
    color: var(--premium-accent);
    font-size: 19px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.24);
}

#notifications .notification-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#notifications .notification-title {
    color: var(--premium-text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

#notifications .notification-time {
    color: var(--premium-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#notifications .notification-message {
    margin: 2px 0 0 !important;
    color: var(--premium-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#notifications .notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    gap: 10px;
    padding: 28px 18px !important;
    border: 1px dashed var(--premium-border);
    border-radius: 18px !important;
    background: var(--premium-surface) !important;
    color: var(--premium-muted);
    font-weight: 800;
    text-align: center;
}

#notifications .notifications-empty span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--premium-accent);
    font-size: 22px;
    font-weight: 900;
}

#notifications p,
#notifications .txt,
#notifications .icn {
    margin: 0 !important;
    width: auto !important;
}

.grocery_footer_menu {
    height: auto !important;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--premium-footer-border);
    background:
        var(--premium-footer-bg),
        var(--premium-footer) !important;
    box-shadow: var(--premium-footer-shadow);
    backdrop-filter: blur(18px);
}

.grocery_footer_menu ul {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background: transparent !important;
}

.grocery_footer_menu li,
.grocery_footer_menu li.bottom-icon {
    background: transparent !important;
    border: 0 !important;
}

.grocery_footer_menu li a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 1px solid transparent !important;
    border-radius: 14px;
    background: var(--premium-footer-item) !important;
    color: var(--premium-footer-muted) !important;
    box-shadow: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.grocery_footer_menu li a span.icon_footer,
.grocery_footer_menu li a span.cntnt_menu {
    color: var(--premium-footer-muted) !important;
}

.grocery_footer_menu li a span.icon_footer {
    min-height: 20px;
}

.grocery_footer_menu li a span.icon_footer i {
    color: var(--premium-footer-muted) !important;
}

.grocery_footer_menu li a span.icon_footer .native-icon {
    color: var(--premium-footer-muted) !important;
    font-size: 21px;
}

.footer-game-icon {
    display: block;
    width: 23px;
    height: 23px;
    color: var(--premium-footer-muted) !important;
    background: transparent !important;
    fill: none !important;
    stroke: currentColor !important;
}

.grocery_footer_menu li a span.icon_footer .footer-game-icon {
    color: var(--premium-footer-muted) !important;
}

.grocery_footer_menu li a span.icon_footer .footer-game-icon path {
    fill: none !important;
    stroke: currentColor !important;
}

.grocery_footer_menu li a span.icon_footer .footer-game-icon rect {
    fill: none !important;
    stroke: none !important;
}

.grocery_footer_menu li a span.icon_footer .footer-game-icon * {
    background: transparent !important;
}

.grocery_footer_menu li a span.cntnt_menu {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.grocery_footer_menu li.active2 a {
    border-color: var(--premium-footer-active-border) !important;
    background:
        var(--premium-footer-active-bg),
        var(--premium-footer-active) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), var(--premium-footer-active-shadow) !important;
}

.grocery_footer_menu li.active2 a span.icon_footer,
.grocery_footer_menu li.active2 a span.icon_footer i,
.grocery_footer_menu li.active2 a span.icon_footer .native-icon,
.grocery_footer_menu li.active2 a span.icon_footer .footer-game-icon,
.grocery_footer_menu li.active2 a span.cntnt_menu {
    color: var(--premium-accent) !important;
}

.form_input_box input[type="text"],
.form_input_box input[type="number"],
.form_input_box input[type="password"],
.form_input_box input[type="email"],
.form_input_box textarea {
    border: 1px solid var(--premium-border) !important;
    border-radius: 12px;
    background: var(--premium-surface-2) !important;
    color: var(--premium-text) !important;
    padding: 12px 14px !important;
}

.form_group_cntnt {
    margin: 8px 14px 96px !important;
    padding: 14px !important;
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow);
}

.form_group_cntnt form,
.form_group_cntnt ul,
.form_group_cntnt li {
    background: transparent !important;
}

.form_group_cntnt form {
    padding: 0 !important;
}

.form_group_cntnt li {
    margin-top: 12px !important;
}

.form_group_cntnt li:first-child {
    margin-top: 0 !important;
}

.form_group_cntnt li label {
    margin-bottom: 8px;
    padding: 0 !important;
    background: transparent !important;
    color: var(--premium-text) !important;
    font-size: 14px;
    font-weight: 800;
}

.form_group_cntnt li input,
.form_group_cntnt li select,
.wf_select {
    width: 100% !important;
    min-height: 52px;
    border: 1px solid var(--premium-border) !important;
    border-radius: 14px !important;
    background: var(--premium-surface-2) !important;
    color: var(--premium-text) !important;
    padding: 12px 14px !important;
    font-weight: 750;
    outline: none !important;
}

.form_group_cntnt li input::placeholder {
    color: var(--premium-text) !important;
    opacity: 0.9;
}

.form_group_cntnt li input[type="file"] {
    display: flex;
    align-items: center;
}

#bank_details,
#bank_details h2,
#bank_details p,
#upload_msg,
#wf_msg {
    background: transparent !important;
    color: var(--premium-text) !important;
}

#bank_details h2 {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--premium-border);
    border-radius: 12px;
    color: var(--premium-accent-2) !important;
    font-size: 13px !important;
}

.signup_main {
    position: relative !important;
    min-height: 100vh;
    padding: 52px 14px 110px !important;
    margin: 0 !important;
    background:
        radial-gradient(circle at 18% 4%, rgba(34, 211, 238, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(250, 204, 21, 0.10), transparent 30%),
        var(--premium-bg) !important;
}

.login_top {
    margin-bottom: 12px;
    background: transparent !important;
    text-align: center;
}

.login_top .logo_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    margin: 0 auto 14px !important;
    overflow: hidden;
    border: 1px solid var(--premium-border);
    border-radius: 999px;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow);
}

.login_top .logo_logo img {
    display: block;
    width: 74px !important;
    height: 74px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
}

.login_top h1 {
    margin: 0 0 10px !important;
    color: var(--premium-text) !important;
    font-size: 23px !important;
    font-weight: 900 !important;
}

.signup_form {
    margin: 0 !important;
    padding: 16px 16px 18px !important;
    border: 1px solid var(--premium-border);
    border-radius: 18px !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow);
}

.signup_form form,
.signup_form ul,
.signup_form li,
.signup_form2,
.form_group {
    background: transparent !important;
}

.signup_form2 li {
    margin-top: 14px !important;
}

.signup_form2 li:first-child {
    margin-top: 0 !important;
}

.signup_form .form_input_box input {
    min-height: 54px;
    opacity: 1 !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 14px !important;
    background: var(--premium-surface-2) !important;
    color: var(--premium-text) !important;
    padding: 12px 14px !important;
    font-weight: 750;
}

.signup_form .form_input_box input::placeholder {
    color: var(--premium-muted) !important;
}

.signup_form .signup_btn,
.signup_form input.signup_btn {
    width: 100%;
    min-height: 54px;
    opacity: 1 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--premium-accent), #2563eb) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 18px 34px rgba(4, 119, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.login_screen,
.login_screen a {
    color: var(--premium-text) !important;
    background: transparent !important;
}

.login_screen a {
    color: var(--premium-accent) !important;
    font-weight: 800;
}

.auth-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--premium-border) !important;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--premium-accent), #2563eb) !important;
    color: #fff !important;
    font-weight: 850;
}

.geo-block-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 18% 4%, rgba(34, 211, 238, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(250, 204, 21, 0.10), transparent 30%),
        var(--premium-bg) !important;
}

.geo-block-card {
    width: 100%;
    max-width: 420px;
    padding: 28px;
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background: var(--premium-surface) !important;
    color: var(--premium-text) !important;
    text-align: center;
    box-shadow: var(--premium-shadow);
}

.geo-block-card h2 {
    display: block;
    margin: 0 0 12px;
    background: transparent !important;
    color: var(--premium-text) !important;
    font-size: 24px;
    font-weight: 900;
}

.geo-block-card p {
    margin: 0;
    background: transparent !important;
    color: var(--premium-muted) !important;
    font-size: 16px;
    line-height: 1.5;
}

#success_modal.success_msg_modal {
    background: rgba(5, 10, 18, 0.48) !important;
    backdrop-filter: blur(4px);
}

#success_modal .success_msg_cntnt {
    width: min(86vw, 360px);
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    border-radius: 18px;
    background: #141c2a !important;
    color: var(--premium-text) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 24px 60px rgba(0, 0, 0, 0.48);
}

:root[data-theme="light"] #success_modal.success_msg_modal {
    background: rgba(15, 23, 42, 0.28) !important;
}

:root[data-theme="light"] #success_modal .success_msg_cntnt {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.72),
        0 24px 54px rgba(15, 23, 42, 0.22);
}

#success_modal .success_msg_cntnt span,
#success_modal .success_msg_cntnt h3,
#success_modal .success_msg_cntnt p {
    background: transparent !important;
}

#success_modal .success_msg_cntnt img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: transparent !important;
}

#success_modal .success_msg_cntnt .title {
    margin: 12px 0 0;
    color: var(--premium-text) !important;
    font-size: 22px;
    font-weight: 900;
}

#success_modal .success_msg_cntnt .para {
    margin: 8px 0 0;
    color: var(--premium-muted) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

#success_modal .success_msg_cntnt .ok_btn {
    min-width: 116px;
    min-height: 44px;
    margin-top: 18px;
    padding: 11px 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--premium-accent), #2563eb) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 16px 30px rgba(4, 119, 255, 0.24);
}