* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg: #0c0c10;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-3: rgba(255, 255, 255, 0.1);
    --border: rgba(255,255,255,0.06);
    --border-focus: rgba(139,92,246,0.5);
    --text: #fafafa;
    --text-2: #a1a1aa;
    --text-3: #71717a;
    --accent: #8b5cf6;
    --accent-2: #a78bfa;
    --gold: #f59e0b;
    --green: #10b981;
    --green-bright: #34d399;
    --red: #ef4444;
    --red-bright: #f87171;
    --radius: 14px;
    --radius-s: 10px;
    --radius-xs: 7px;
    --live-row-h: 32px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body {
    font-family: var(--font);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -25%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 90% 50% at 50% 105%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
}

body.is-loading .app {
    visibility: hidden;
}

/* ========== APP LOADER ========== */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.app-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-glow {
    display: none;
}

.loader-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(280px, 78vw);
    animation: loader-inner-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes loader-inner-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.loader-logo {
    display: flex;
    align-items: baseline;
    gap: 0.32em;
    margin-bottom: 28px;
    font-size: clamp(28px, 8vw, 36px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.loader-word {
    display: inline-block;
    animation: loader-word-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.loader-word-mine {
    color: #fff;
    animation-delay: 0.05s;
}

.loader-word-web3 {
    background: linear-gradient(
        105deg,
        #059669 0%,
        #34d399 25%,
        #ecfdf5 50%,
        #34d399 75%,
        #059669 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation-name: loader-word-in, brand-shine;
    animation-duration: 0.8s, 2.4s;
    animation-delay: 0.12s, 0.5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: backwards, none;
}

@keyframes loader-word-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loader-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 26px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.loader-cell {
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    background: var(--surface-2);
    border: 1px solid var(--border);
    animation: loader-cell-pulse 1.4s ease-in-out infinite;
    animation-delay: calc(var(--loader-i) * 0.06s);
}

@keyframes loader-cell-pulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
        background: var(--surface-2);
    }
    50% {
        opacity: 1;
        transform: scale(0.96);
        background: rgba(255, 255, 255, 0.09);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.loader-bar {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.loader-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--green-bright));
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.loader-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    animation: loader-status-pulse 1.4s ease-in-out infinite;
}

@keyframes loader-status-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; color: var(--text-2); }
}

@media (prefers-reduced-motion: reduce) {
    .loader-glow,
    .loader-word,
    .loader-cell,
    .loader-bar-fill,
    .loader-status,
    .loader-inner {
        animation: none !important;
    }

    .loader-inner {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .loader-bar-fill {
        width: 100% !important;
    }
}

/* ========== APP ========== */
.app {
    position: relative;
    z-index: 1;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 16px 16px;
}

/* ========== HEADER ========== */
.hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
}

.hdr-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.hdr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.brand-logo {
    margin: 0;
    font: inherit;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.32em;
    user-select: none;
    line-height: 1;
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 800;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.brand-word {
    display: inline-block;
    animation: brand-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.brand-word-mine {
    color: #ffffff;
    animation-delay: 0s;
    text-shadow: 0 2px 16px rgba(255, 255, 255, 0.08);
}

.brand-word-web3 {
    background: linear-gradient(
        105deg,
        #059669 0%,
        #34d399 25%,
        #ecfdf5 50%,
        #34d399 75%,
        #059669 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation-name: brand-in, brand-shine;
    animation-duration: 0.75s, 4s;
    animation-delay: 0.08s, 0.75s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: backwards, none;
    filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.35));
}

@keyframes brand-in {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes brand-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-word {
        animation: none;
    }

    .brand-word-web3 {
        background: #34d399;
        -webkit-background-clip: text;
        background-clip: text;
        filter: none;
    }
}

.hdr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
}

.bal-widget {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 100%;
}

.bal-currency-wrap {
    position: relative;
    z-index: 200;
    height: 40px;
    min-width: 0;
    max-width: 108px;
    flex-shrink: 1;
}

.bal-widget-main,
.bal-widget-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
    min-height: 40px;
    padding: 0 8px 0 10px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    user-select: none;
    font-family: var(--font);
    color: inherit;
    box-sizing: border-box;
}

.bal-widget-display {
    cursor: default;
    pointer-events: none;
}

.bal-widget-main {
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #14141c;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    max-width: 108px;
    min-width: 0;
}

.bal-widget-main.is-open {
    border-color: rgba(16, 185, 129, 0.35);
    background: #1c1c26;
}

.bal-coin-chevron {
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform 0.2s ease, color 0.15s ease;
}

.bal-widget-main.is-open .bal-coin-chevron {
    transform: rotate(180deg);
    color: var(--text-2);
}

.bal-currency-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    padding: 6px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 200;
}

.bal-currency-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bal-currency-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 148px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: #14141c;
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s ease;
}

.bal-currency-option:hover {
    background: #1c1c26;
}

.bal-currency-option.active {
    background: rgba(16, 185, 129, 0.16);
}

.bal-currency-option-amount {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.bal-currency-option-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.bal-widget-main:active {
    transform: scale(0.96);
    opacity: 0.9;
}

.wallet-withdraw-available {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.wallet-withdraw-available strong {
    color: var(--green-bright);
    font-weight: 800;
}

.wallet-withdraw-amount-field {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wallet-withdraw-amount-field.error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.wallet-withdraw-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.wallet-withdraw-input::-webkit-outer-spin-button,
.wallet-withdraw-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wallet-withdraw-input::placeholder {
    color: var(--text-3);
    font-weight: 600;
}

.wallet-withdraw-max {
    flex-shrink: 0;
    margin: 6px 6px 6px 0;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-xs);
    background: rgba(16, 185, 129, 0.12);
    color: var(--green-bright);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.wallet-withdraw-max:active {
    background: rgba(16, 185, 129, 0.22);
}

.withdraw-crypto-wrap {
    margin-bottom: 18px;
    z-index: 5;
}

.withdraw-crypto-wrap:has(.deposit-order-crypto.is-open) {
    z-index: 40;
}

.withdraw-crypto-wrap .deposit-crypto-dropdown {
    top: auto;
    bottom: calc(100% + 6px);
}

#withdrawModal .wallet-sheet:has(.withdraw-crypto-wrap .is-open) {
    overflow: visible;
}

.wallet-success-sheet {
    text-align: center;
    padding-top: 24px;
}

.wallet-success-amount {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
}

.wallet-success-datetime {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    line-height: 1.45;
}

.wallet-success-sheet .withdraw-success-icon {
    margin: 0 auto 16px;
}

.wallet-success-sheet .wallet-order-title {
    margin-bottom: 12px;
}

#withdrawCryptoTrigger.error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.bal-num {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
}

.bal-coin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bal-widget-wallet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #ffffff;
    color: #0c0c10;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bal-widget-deposit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #ffffff;
    color: #0c0c10;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bal-widget-deposit:active {
    transform: scale(0.92);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.bal-widget-wallet:active {
    transform: scale(0.92);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

/* ========== GAME FIELD ========== */
.field-wrap {
    position: relative;
    margin: 8px 0 16px;
}

/* ========== DEPOSIT PANEL (inline horizontal) ========== */
.deposit-panel {
    margin: 0 0 12px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.deposit-panel-modal {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    gap: 10px;
}

.deposit-panel-modal .deposit-panel-actions {
    margin-top: 2px;
}

.deposit-panel-modal .deposit-panel-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 10px;
}

/* ========== WALLET MODAL (game theme) ========== */
.wallet-modal.mines-modal.open {
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wallet-sheet {
    width: 100%;
    max-width: 380px;
    max-height: min(92vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 16px 16px;
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.wallet-sheet-compact {
    max-height: none;
}

.wallet-sheet::before {
    display: none;
}

.wallet-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.wallet-sheet-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.wallet-sheet-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-sheet-close:active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.14);
}

.wallet-banner {
    position: relative;
    height: 104px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #064e3b 0%, #047857 42%, #059669 100%);
    border: 1px solid rgba(52, 211, 153, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wallet-banner-pattern,
.wallet-banner-curtain {
    display: none;
}

.wallet-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: transparent;
}

.wallet-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wallet-banner-label {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
}

.wallet-banner-value {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #ecfdf5;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.wallet-banner-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.32));
}

.wallet-banner-icon svg {
    display: block;
}

.wallet-headline {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
}

.wallet-headline-accent {
    display: block;
    color: var(--text-2);
    font-weight: 800;
}

.wallet-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    font-weight: 500;
}

.wallet-crypto-select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wallet-crypto-select.has-value {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.1);
}

.wallet-crypto-select.has-value .wallet-crypto-select-text {
    color: var(--text);
    font-weight: 700;
}

.wallet-crypto-select.error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.wallet-crypto-select-arrow {
    flex-shrink: 0;
    color: var(--text-3);
}

.wallet-min-warning {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-3);
    font-weight: 500;
}

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

.wallet-btn {
    height: 44px;
    border: none;
    border-radius: var(--radius-s);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.wallet-btn:active {
    transform: scale(0.97);
}

.wallet-btn-deposit {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.28);
}

.wallet-btn-withdraw {
    background: #ffffff;
    color: #0c0c10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.wallet-btn-back,
.wallet-btn-single {
    width: 100%;
    margin-top: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
}

.wallet-btn-retry {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
    height: 46px;
    font-size: 15px;
    font-weight: 700;
}

.wallet-btn-retry:active {
    background: var(--surface-3);
}

.wallet-error-box {
    margin: 8px 0 16px;
    padding: 16px 18px;
    border-radius: var(--radius-s);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    text-align: center;
}

.wallet-error-text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--red-bright);
}

#depositErrorStep {
    padding-top: 6px;
}

#depositErrorStep .wallet-btn-single {
    margin-top: 0;
}

.wallet-order-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
}

.wallet-picker-sheet {
    background: #14141c;
    border-top: 1px solid var(--border);
}

.wallet-sheet.is-order-step {
    overflow-y: hidden;
    padding: 12px 14px 10px;
    background: #14141c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.wallet-sheet.is-order-step .wallet-order-header {
    margin-bottom: 8px;
}

.wallet-sheet.is-order-step .wallet-order-back {
    width: 32px;
    height: 32px;
}

.wallet-sheet.is-order-step .wallet-order-title-bar {
    font-size: 16px;
}

.wallet-sheet.is-order-step .deposit-order-bonus {
    margin-bottom: 10px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.3;
    background: #1c1c26;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-2);
    font-weight: 600;
}

.wallet-sheet.is-order-step .wallet-crypto-select.has-value,
.wallet-sheet.is-order-step .deposit-order-crypto.is-open {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.wallet-sheet.is-order-step .deposit-order-addr-text {
    color: var(--text);
}

.wallet-sheet.is-order-step .deposit-order-copy:active,
.wallet-sheet.is-order-step .deposit-order-copy.copied {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.wallet-sheet.is-order-step .deposit-order-note-warn {
    color: var(--text-3);
    font-weight: 500;
    opacity: 1;
}

.wallet-sheet.is-order-step .deposit-order-label {
    margin-bottom: 4px;
    font-size: 12px;
}

.wallet-sheet.is-order-step .deposit-crypto-wrap {
    margin-bottom: 10px;
}

.wallet-sheet.is-order-step .wallet-crypto-select {
    padding: 10px 12px;
    margin-bottom: 0;
    min-height: 42px;
}

.wallet-sheet.is-order-step .deposit-order-addr-field {
    margin-bottom: 8px;
}

.wallet-sheet.is-order-step .deposit-order-addr-text {
    padding: 10px 12px;
    font-size: 11px;
}

.wallet-sheet.is-order-step .deposit-order-copy {
    width: 42px;
}

.wallet-sheet.is-order-step .deposit-order-qr {
    margin-bottom: 6px;
}

.wallet-sheet.is-order-step .deposit-order-qr-image {
    width: 156px;
    height: 156px;
    padding: 6px;
}

.wallet-sheet.is-order-step .deposit-order-send-only {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.35;
}

.wallet-sheet.is-order-step .deposit-order-notes {
    padding: 0;
}

.wallet-sheet.is-order-step .deposit-order-note {
    font-size: 10px;
    line-height: 1.35;
}

.wallet-sheet.is-order-step .deposit-order-note + .deposit-order-note {
    margin-top: 3px;
}

.wallet-order-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.wallet-order-back {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wallet-order-back:active {
    color: var(--text);
    background: var(--surface-3);
}

.wallet-order-title-bar {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.deposit-order-bonus {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: var(--radius-s);
    background: #1c1c26;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}

.deposit-order-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.deposit-order-crypto {
    margin-bottom: 0;
}

.deposit-crypto-wrap {
    position: relative;
    margin-bottom: 16px;
    z-index: 5;
}

.deposit-crypto-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #14141c;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    padding: 4px;
}

.deposit-crypto-dropdown.hidden {
    display: none !important;
}

.deposit-order-crypto.is-open {
    border-color: rgba(255, 255, 255, 0.14);
}

.deposit-order-crypto.is-open .wallet-crypto-select-arrow {
    transform: rotate(180deg);
}

.wallet-crypto-select-arrow {
    transition: transform 0.2s ease;
}

#depositOrderStep.is-generating .deposit-order-addr-field,
#depositOrderStep.is-generating .deposit-order-qr {
    opacity: 0.45;
    pointer-events: none;
}

#depositOrderStep.is-generating .deposit-order-crypto {
    pointer-events: none;
    opacity: 0.7;
}

.deposit-order-crypto-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.deposit-coin-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.deposit-order-addr-field {
    display: flex;
    align-items: stretch;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xs);
    background: #1c1c26;
    overflow: hidden;
}

.deposit-order-addr-text {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
}

.deposit-order-copy {
    width: 46px;
    flex-shrink: 0;
    border: none;
    border-left: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.deposit-order-copy:active,
.deposit-order-copy.copied {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.deposit-order-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 12px;
}

.deposit-order-qr-image {
    width: 220px;
    height: 220px;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.deposit-order-send-only {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-align: center;
    line-height: 1.4;
}

.deposit-order-notes {
    margin: 0;
    padding: 0 2px 2px;
    text-align: center;
}

.deposit-order-note {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
}

.deposit-order-note + .deposit-order-note {
    margin-top: 5px;
}

.deposit-order-note-warn {
    color: var(--red-bright);
    font-weight: 600;
    opacity: 0.9;
}

.deposit-order-warn {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #f87171;
    text-align: center;
    line-height: 1.45;
}

.deposit-order-status {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.4;
}

#depositOrderStep .deposit-dest-tag {
    margin: -8px 0 12px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

#depositOrderStep .deposit-dest-tag strong {
    color: #e2e8f0;
}

/* ========== DEPOSIT FULLSCREEN MODAL (legacy) ========== */
.deposit-fullscreen.mines-modal {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.deposit-fullscreen.mines-modal.open {
    align-items: stretch;
    justify-content: stretch;
}

.modal-sheet-deposit-full {
    max-width: none;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    padding: max(env(safe-area-inset-top, 0px), 12px) 16px max(env(safe-area-inset-bottom, 0px), 24px);
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -25%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 90% 50% at 50% 105%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    box-shadow: none;
}

.modal-sheet-deposit-full::before {
    display: none;
}

.deposit-hero {
    text-align: center;
    margin-bottom: 18px;
    padding-top: 8px;
}

.deposit-full-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.deposit-min-note {
    color: var(--text-3) !important;
    font-weight: 500;
    font-size: 13px;
    margin: 0;
}

.deposit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 12px;
}

.deposit-card .fg-label {
    margin-bottom: 8px;
}

.deposit-panel-modal {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    gap: 10px;
}

.deposit-panel-modal .dep-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-weight: 600;
}

.deposit-panel-modal .dep-chip.picked {
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-2);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12);
}

.deposit-panel-modal .deposit-panel-custom {
    background: var(--surface-2);
    border-color: var(--border);
}

.deposit-panel-modal .deposit-input {
    color: var(--text);
}

.deposit-panel-modal .deposit-unit {
    color: var(--text-3);
    border-left-color: var(--border);
}

.deposit-crypto-trigger {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.deposit-crypto-trigger.has-value .deposit-crypto-trigger-text {
    color: var(--text);
    font-weight: 700;
}

.deposit-crypto-trigger.error {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.deposit-min-warning {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--radius-s);
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.12);
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
}

.deposit-min-warning-order {
    margin-top: 10px;
}

.deposit-submit-full {
    margin-top: 0;
}

.deposit-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.deposit-qr-image {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px;
    box-sizing: border-box;
}

.deposit-status-line {
    margin: 0 0 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.deposit-success-desc {
    margin-bottom: 18px;
    color: var(--text-2);
    font-weight: 600;
}

.deposit-crypto-picker {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.deposit-crypto-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.deposit-crypto-picker-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 20px);
    box-sizing: border-box;
    background: #12121a;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
}

.deposit-crypto-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.deposit-crypto-picker-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.deposit-picker-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.deposit-coin-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deposit-coin-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    background: transparent;
    border: none;
    color: #e2e8f0;
}

.deposit-coin-option:active {
    background: rgba(255, 255, 255, 0.06);
}

.deposit-coin-option.active {
    background: rgba(255, 255, 255, 0.06);
}

.deposit-coin-option .deposit-coin-icon {
    width: 22px;
    height: 22px;
}

.deposit-coin-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.deposit-coin-option .crypto-opt-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.deposit-coin-option .crypto-opt-net {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
}

.deposit-step.hidden {
    display: none !important;
}

.crypto-selected {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}

.crypto-selected .crypto-opt-name {
    color: var(--text);
}

.crypto-selected .crypto-opt-net {
    color: var(--text-3);
}

.deposit-sum-line {
    color: var(--text-2);
}

.deposit-sum-line strong {
    color: var(--text);
}

.deposit-addr-text {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--green-bright);
    font-size: 11px;
}

.deposit-copy-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
}

.deposit-copy-btn:active {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
}

.deposit-back-btn {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-2);
}

.deposit-back-btn:active {
    background: var(--surface-2);
}

.deposit-hint {
    color: var(--text-3);
}

.deposit-powered {
    color: var(--text-3);
    opacity: 0.75;
}

.deposit-loading {
    color: var(--text-3);
}

.deposit-loading-spin {
    border-color: var(--border);
    border-top-color: var(--accent);
}

.deposit-error-text {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
    color: var(--red-bright);
}

.deposit-panel-chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.deposit-panel .dep-chip {
    height: 34px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-panel-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.deposit-panel-custom {
    flex: 1;
    min-width: 0;
    height: 34px;
    margin-bottom: 0;
    align-items: center;
    border-radius: 9px;
}

.deposit-panel-custom .deposit-input {
    height: 100%;
    padding: 0 10px;
    font-size: 13px;
}

.deposit-panel-custom .deposit-unit {
    height: 100%;
    padding: 0 10px;
    font-size: 10px;
}

.deposit-panel-btn {
    flex-shrink: 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    border: none;
    border-radius: 9px;
    background: #fafafa;
    color: #0c0c10;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.deposit-panel-btn:active {
    transform: scale(0.96);
    opacity: 0.92;
}

.modal-sheet-deposit {
    max-width: 400px;
    padding-bottom: 28px;
}

.deposit-crypto-label,
.deposit-send-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #a1a1aa);
}

.crypto-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1px solid var(--border);
}

.deposit-hint {
    margin: 0 0 12px;
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    line-height: 1.45;
}

.deposit-back-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.deposit-back-btn:active {
    transform: scale(0.98);
    background: var(--surface-2);
}

.deposit-error-text {
    margin: 0 0 14px;
    padding: 12px;
    border-radius: var(--radius-s);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--red-bright);
    font-size: 13px;
    text-align: center;
    line-height: 1.45;
}

.deposit-powered {
    margin: 12px 0 0;
    font-size: 10px;
    color: var(--text-3);
    text-align: center;
    opacity: 0.75;
}

.crypto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.crypto-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, transform 0.15s;
}

.crypto-opt:active {
    transform: scale(0.98);
    border-color: rgba(139, 92, 246, 0.45);
}

.crypto-opt-name {
    font-size: 14px;
    font-weight: 700;
}

.crypto-opt-net {
    font-size: 10px;
    color: var(--text-3);
    font-weight: 600;
}

.deposit-min-note {
    color: var(--text-3) !important;
    font-weight: 500;
}

.deposit-sum-line {
    text-align: center;
    font-size: 14px;
    margin: 0 0 14px;
    color: var(--text-2);
}

.deposit-addr-box {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.deposit-addr-text {
    flex: 1;
    min-width: 0;
    padding: 10px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
    word-break: break-all;
    color: var(--green-bright);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.deposit-copy-btn {
    flex-shrink: 0;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.deposit-copy-btn:active {
    transform: scale(0.96);
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
}

.deposit-loading {
    text-align: center;
    padding: 24px 0;
    color: var(--text-3);
}

.deposit-loading-spin {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dep-spin 0.8s linear infinite;
}

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

.deposit-panel-custom.error {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.field {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

/* Cells */
.cell {
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.3s;
    overflow: hidden;
    user-select: none;
}

.cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
}

.field.active .cell:not(.open) {
    cursor: pointer;
    background: var(--surface-2);
}

.field.active .cell:not(.open):active {
    transform: scale(0.92);
    opacity: 0.7;
}

.field.active .cell:not(.open):hover {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255, 255, 255, 0.09);
}

/* Revealed cells — GEM */
.cell.open.gem {
    background: #0f1f1a;
    border-color: #1a3a2e;
    animation: cellReveal 0.3s ease;
}

.cell.open.gem::after {
    display: none;
}

/* Revealed cells — BOMB */
.cell.open.bomb {
    background: #1f0f0f;
    border-color: #3a1a1a;
    animation: cellReveal 0.3s ease;
}

.cell.open.bomb::after {
    display: none;
}

@keyframes cellReveal {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Cell inner content */
.cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    z-index: 2;
}

.cell-usdt-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.cell-bomb-svg {
    width: 30px;
    height: 30px;
}

.cell-mult {
    font-size: 9px;
    font-weight: 700;
    color: #5eead4;
    font-variant-numeric: tabular-nums;
}

.cell.open.bomb .cell-mult {
    color: #fca5a5;
}

/* Field dimmed after game over */
.field.ended .cell:not(.open) {
    opacity: 0.3;
    filter: grayscale(0.5);
}

/* ========== CASHOUT ========== */
.cashout {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    transition: transform 0.15s;
}

.cashout:active {
    transform: scale(0.97);
}

.cashout-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.cashout-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.9;
}

.cashout-val {
    font-size: 18px;
    font-weight: 800;
}

.cashout-shine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    animation: shine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

.cashout.hidden {
    display: none;
}

/* ========== PANEL ========== */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 16px;
}

.panel-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.flex-1 { flex: 1; }
.w-100 { width: 100px; }

.field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fg-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.fg-input {
    width: 100%;
    height: 41px;
    box-sizing: border-box;
    padding: 0 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
    appearance: textfield;
}

#betInput {
    padding-right: 72px;
}

.fg-input::-webkit-outer-spin-button,
.fg-input::-webkit-inner-spin-button,
.tog-input::-webkit-outer-spin-button,
.tog-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fg-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}

.fg-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.pick-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 41px;
    min-height: 41px;
    box-sizing: border-box;
    padding: 0 10px 0 12px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    gap: 6px;
}

.pick-trigger-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.pick-trigger-mines {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.pick-trigger-mult {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-3);
    letter-spacing: 0.01em;
}

.pick-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pick-arrow {
    color: var(--text-3);
    flex-shrink: 0;
}

.bomb-sheet {
    padding-bottom: 18px;
}

.bomb-sheet-desc {
    margin: -4px 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
}

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

.pick-option {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 11px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: #1c1c26;
    color: var(--text);
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pick-option-mines {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.pick-option-mult {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-3);
    letter-spacing: 0.02em;
}

.pick-option:active {
    background: rgba(255, 255, 255, 0.06);
}

.pick-option.active {
    border-color: rgba(255, 255, 255, 0.16);
    background: var(--surface-2);
}

.pick-option.active .pick-option-mines {
    color: var(--text);
}

.pick-option.active .pick-option-mult {
    color: var(--text-2);
}

.input-btns {
    position: absolute;
    right: 6px;
    display: flex;
    gap: 4px;
}

.inp-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
}

.inp-btn:active {
    transform: scale(0.9);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Buttons */
.btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-main {
    padding: 14px;
    border: none;
    border-radius: var(--radius-s);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.2s;
}

.btn-main:active {
    transform: scale(0.95);
}

.btn-main:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.btn-real {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.3);
}

.btn-demo {
    background: linear-gradient(135deg, var(--gold), #d97706);
    color: #000;
    box-shadow: 0 4px 24px rgba(245,158,11,0.25);
}

.btn-demo.stop {
    background: linear-gradient(135deg, var(--red), #dc2626);
    color: #fff;
    box-shadow: 0 4px 24px rgba(239,68,68,0.3);
}

/* ========== TABS ========== */
.tabs-section {
    margin-top: 8px;
}

.tab-bar {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 4px;
    gap: 4px;
    margin-bottom: 12px;
}

.tab {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tab.active {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content.switching {
    animation: fadeUp 0.25s ease;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Info card */
.info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-key {
    font-size: 13px;
    color: var(--text-2);
}

.info-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

/* Auto settings */
.auto-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.auto-status {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    line-height: 1.45;
}

.btn-auto {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-s);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3);
    transition: transform 0.15s ease;
}

.btn-auto:active {
    transform: scale(0.96);
}

.btn-auto.stop {
    background: linear-gradient(135deg, var(--red), #dc2626);
    box-shadow: 0 4px 24px rgba(239, 68, 68, 0.3);
}

.toggle-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tog {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.tog.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tog-input {
    width: 36px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Live feed */
.live-feed {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px 14px 12px;
}

.live-feed-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.live-feed-meta {
    display: flex;
    align-items: center;
}

.live-feed-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.live-tag-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
}

.live-feed-cols {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.7fr 1.1fr;
    padding: 0 10px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
}

.live-feed-cols span:last-child {
    text-align: right;
}

.live-feed-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: calc(var(--live-row-h) * 15 + 3px * 14);
    overflow: hidden;
}

.live-row {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.7fr 1.1fr;
    align-items: center;
    height: var(--live-row-h);
    flex-shrink: 0;
    padding: 0 10px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: 11px;
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s ease;
}

.live-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.live-row-new {
    opacity: 0;
    transform: translateY(-6px);
}

.live-user {
    color: var(--text-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.live-bet {
    font-weight: 600;
    color: var(--text);
}

.live-odds {
    color: var(--text-3);
    font-weight: 500;
}

.live-res {
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.live-res.win {
    color: var(--green-bright);
}

.live-res.lose {
    color: var(--red-bright);
}

/* ========== MODAL ========== */
.modal-overlay.mines-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 500;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.mines-modal.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-overlay.mines-modal.is-dismissed {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal-sheet {
    width: 100%;
    max-width: 400px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    padding: 20px 24px 36px;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow:
        0 -24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    position: relative;
    isolation: isolate;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.modal-close:active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text);
}

.modal-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    border-radius: 24px 24px 0 0;
}

.modal-overlay.mines-modal.open .modal-sheet {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}

.modal-sheet.wallet-sheet {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #14141c;
    padding: 18px 16px 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transition: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-sheet.wallet-sheet::before {
    display: none;
}

.modal-sheet.wallet-sheet.is-order-step {
    padding: 12px 14px 10px;
}

.modal-handle {
    width: 36px;
    height: 4px;
    background: var(--surface-3);
    border-radius: 4px;
    margin: 0 auto 20px;
}

.modal-icon {
    text-align: center;
    margin-bottom: 14px;
}

.modal-sheet-sm {
    max-width: 360px;
}

.account-sheet {
    padding-bottom: 16px;
}

.account-lang-label,
.profile-field-label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

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

.lang-opt {
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #1c1c26;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.lang-opt.active {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.12);
    color: var(--green-bright);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.lang-opt:active {
    opacity: 0.85;
}

.profile-sheet .lang-opt.active {
    border-color: rgba(255, 255, 255, 0.14);
    background: var(--surface-2);
    color: var(--text);
    box-shadow: none;
}

.profile-sheet .profile-lang-switch {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 4px;
    gap: 4px;
}

.profile-sheet .profile-lang-switch .lang-opt {
    flex: 1;
    height: auto;
    padding: 9px 12px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
}

.profile-sheet .profile-lang-switch .lang-opt.active {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.modal-desc {
    text-align: center;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 14px;
}

.deposit-block {
    margin-bottom: 16px;
}

.withdraw-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.address-field {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #1c1c26;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.address-field:focus-within {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.address-field.error {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.withdraw-address-input {
    font-size: 13px;
    letter-spacing: 0.02em;
}

.withdraw-success-sheet {
    text-align: center;
    padding-top: 28px;
}

.withdraw-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.12);
    color: var(--green-bright);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.withdraw-success-desc {
    margin-bottom: 18px;
    color: var(--text-2);
    font-weight: 600;
}

.amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #1c1c26;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.amount-field:focus-within {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.amount-field.error {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.amount-max {
    padding: 0 12px;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    color: var(--green-bright);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.amount-max:active {
    background: rgba(255, 255, 255, 0.08);
}

.deposit-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.dep-chip {
    padding: 9px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #1c1c26;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, color 0.15s;
}

.dep-chip:active {
    transform: scale(0.96);
}

.dep-chip.picked {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.12);
    color: var(--green-bright);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.deposit-custom {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #1c1c26;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.deposit-custom.active {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.deposit-custom.error {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.deposit-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.deposit-input::-webkit-outer-spin-button,
.deposit-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deposit-input::placeholder {
    color: var(--text-3);
    font-weight: 500;
}

.deposit-unit {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.4px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.modal-action {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-s);
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.15s;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.28);
}

.modal-action:active {
    transform: scale(0.97);
}

.modal-action-light {
    background: #ffffff;
    color: #0c0c10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.modal-action-light:active {
    transform: scale(0.97);
}

/* ========== UTILITIES ========== */
.hidden {
    display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }

/* Safe areas */
@supports (padding-top: env(safe-area-inset-top)) {
    .hdr { padding-top: calc(16px + env(safe-area-inset-top)); }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .app {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .modal-sheet { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
}

/* ========== AUTH & PROFILE ========== */
body.auth-locked .app {
    pointer-events: none;
    user-select: none;
    filter: blur(2px);
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.78);
}

.auth-modal.open {
    display: flex;
}

.auth-sheet {
    max-width: 380px;
    width: 100%;
    text-align: left;
    transform: none !important;
    -webkit-transform: none !important;
}

.auth-sheet-header {
    margin-bottom: 12px;
}

.auth-sheet-desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
}

.auth-sheet-note {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--text-3);
}

.auth-action-btn {
    width: 100%;
    margin-top: 4px;
}

.auth-sheet .wallet-btn-deposit {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.28);
}

.auth-sheet .wallet-btn-deposit:active {
    transform: scale(0.97);
    opacity: 0.92;
}

.auth-copy-btn {
    width: 100%;
    margin-bottom: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
}

.auth-sheet-warn {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-3);
}

.auth-sheet-error {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red-bright);
}

.access-key-box {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    word-break: break-all;
}

.access-key-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    outline: none;
}

.access-key-input:focus {
    border-color: rgba(255, 255, 255, 0.18);
}

.access-key-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}

.access-key-check input {
    accent-color: var(--green);
}

.auth-link-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: left;
}

.bal-widget-avatar {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

.bal-widget-avatar.has-avatar {
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
}

.bal-widget-avatar.has-avatar:active {
    opacity: 0.85;
    transform: scale(0.92);
    box-shadow: none;
}

.bal-widget-avatar .header-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.bal-widget-avatar.has-avatar .header-avatar:not(.hidden) {
    border-radius: 50%;
}

.bal-widget-avatar.has-avatar .header-avatar:not(.hidden) + .header-avatar-fallback {
    display: none;
}

.bal-widget-avatar.has-avatar .header-avatar:not(.hidden) {
    display: block;
}

.profile-sheet .profile-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 0 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c26;
}

.profile-avatar.hidden {
    display: none;
}

.profile-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-2);
    background: #1c1c26;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-avatar-fallback.hidden {
    display: none;
}

.profile-country-flag {
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #14141c;
}

.profile-user-meta {
    flex: 1;
    min-width: 0;
}

.profile-name {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-username {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-field {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-key-value {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    word-break: break-all;
}

.profile-copy-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #1c1c26;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.profile-copy-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.profile-support-link {
    width: 100%;
    margin-top: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    border: none;
    background: none;
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.profile-support-link:active {
    opacity: 0.7;
}

.profile-tg-logo {
    flex-shrink: 0;
    display: block;
}

.profile-support-text {
    color: var(--text-2);
}

.profile-support-handle {
    color: #2AABEE;
    font-weight: 600;
}

.profile-sheet .profile-head,
.profile-hero,
.profile-hero-text,
.profile-head-text {
    display: none;
}