/* Mobile product surfaces. No animations or external assets. */
.premium-home { font-family: Okra, Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.premium-home button, .premium-home input, .premium-home select { font-family: inherit; }
.premium-home .spotlight-hero { background: linear-gradient(135deg, #a8131e 0%, #cb202d 55%, #e03546 100%); border: 0; min-height: 220px; border-radius: 14px; box-shadow: 0 10px 28px -6px rgba(203, 32, 45, 0.26); }
.premium-home .spotlight-copy { padding: 22px 20px 20px 24px; }
.premium-home .spotlight-eyebrow { color: #ffe2e7; letter-spacing: 1.4px; }
.premium-home .spotlight-eyebrow > span { background: #fff; }
.premium-home .spotlight-copy h1 { color: #ffef9d; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.01em; margin: 10px 0 6px; font-weight: 700; line-height: 1.15; }
.premium-home .spotlight-copy h1 em { font-family: inherit; font-style: normal; font-weight: 700; color: #ffffff; }
.premium-home .spotlight-copy p { color: #ffe6eb; font-size: 13px; line-height: 1.5; }
.premium-home .spotlight-primary { background: #fff; border: 0; color: #cb202d; border-radius: 7px; font-weight: 600; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.15s ease; min-height: 44px; padding: 0 16px; }
.premium-home .spotlight-primary:active { transform: scale(0.97); }
.premium-home .spotlight-secondary { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: 7px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; min-height: 44px; padding: 0 16px; }
.premium-home .spotlight-secondary:active { transform: scale(0.97); }
.premium-home .tile-front { background: #ffffff; border-color: #fff; color: #cb202d; box-shadow: 8px 20px 35px rgba(203, 32, 45, 0.18); }
.premium-home .tile-back { background: #8f0f18; color: #f5aabb; border-color: #cb202d; }
.premium-home .number-orbit { border-color: #ffffff26; }
.premium-home .art-caption, .premium-home .spotlight-edition, .premium-home .art-cross { display: none; }
.premium-home .market-card {
    border-radius: 12px;
    padding: 10px 12px 0 12px;
    gap: 4px;
    border: 1px solid #e8e8e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color .16s ease, box-shadow .16s ease;
    background: #ffffff;
    overflow: hidden;
}
.premium-home .market-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.premium-home .market-card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.premium-home .market-name {
    margin: 0;
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}
.premium-home .badge-status { letter-spacing: .2px; font-size: 9.5px; line-height: 16px; font-weight: 700; border-radius: 4px; padding: 1px 6px; border: none; display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; flex-shrink: 0; }
.premium-home .badge-status.running { background: #dcfce7; color: #15803d; }
.premium-home .badge-status.closed { background: #fee2e2; color: #b91c1c; }
.premium-home .badge-status.only-close { background: #fef3c7; color: #b45309; }
.premium-home .market-card-mid-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; margin: 0; border: 0; background: none; }
.market-result-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.market-result-wrap { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1; }
.premium-home .market-result { font-variant-numeric: tabular-nums; letter-spacing: 1px; font-weight: 800; font-size: 19px; line-height: 1.1; color: #cb202d; overflow-wrap: anywhere; min-width: 0; }
.premium-home .market-schedule { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; }
.premium-home .market-schedule > div { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.premium-home .market-schedule > div + div { border-left: 1px solid #e2e8f0; padding-left: 8px; }
.premium-home .market-schedule span { color: #64748b; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2px; }
.premium-home .market-schedule strong { color: #1e293b; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.premium-home .market-card-bottom { margin: 3px -12px 0 -12px; padding-top: 0; border-top: 1px solid #f1f5f9; }
.premium-home .market-card-bottom .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; }
.premium-home .market-card .btn-chart { box-shadow: none; color: #475569; border: 0; background: transparent; min-height: 44px; border-radius: 0; font-weight: 600; font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; transition: background .15s ease, color .15s ease; }
.premium-home .market-card .btn-chart + .btn-chart { border-left: 1px solid #f1f5f9; }
.premium-home .market-card .btn-chart:hover:not(:disabled) { background: #f8fafc; color: #cb202d; }
.premium-home .market-card .btn-chart:disabled { color: #94a3b8; background: transparent; cursor: not-allowed; }
.premium-home .market-card .btn-play { min-height: 44px; min-width: 82px; padding: 0 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; background: #cb202d; color: #fff; border: 0; box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; transition: background .15s ease; }
.premium-home .market-card .btn-play:hover:not(:disabled) { background: #b71c26; }
.premium-home .market-card .btn-play:disabled { opacity: 1; background: #f1f5f9; color: #64748b; box-shadow: none; cursor: not-allowed; }
.premium-home .market-card button:focus-visible { outline: 2px solid #cb202d; outline-offset: 3px; }
.premium-home .market-card button:active:not(:disabled) { transform: translateY(1px); }
.premium-home .market-search-input { border-radius: 8px; height: 38px; min-height: 38px; border-color: #e2e8f0; font-size: 12.5px; }
.premium-home .search-clear-btn { right: 4px; min-width: 30px; min-height: 30px; width: 30px; height: 30px; align-items: center; justify-content: center; font-size: 12px; }
.premium-home .markets-empty { grid-column: 1 / -1; margin: 0; padding: 32px 16px; text-align: center; font-size: 14px; color: #686868; }
.premium-home .account-balance { background: #ffffff; border: 1px solid #e8e8e6; padding: 16px; border-radius: 12px; }
.premium-home .account-balance > div > span { color: #828282; font-size: 11px; }
.premium-home .account-balance strong { color: #cb202d; font-variant-numeric: tabular-nums; font-size: 24px; }
.premium-home .account-balance .ui-text-button { color: #cb202d; background: #fff1f2; padding: 8px 12px; border-radius: 8px; font-weight: 700; border: 1px solid #fecdd3; }
.premium-home .account-shortcuts button { border: 0; background: transparent; padding: 6px 2px; gap: 6px; }
.premium-home .account-shortcuts i { background: #fff; border: 1px solid #e8e8e6; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: #2d2d2d; }
.premium-home .modal-container { padding: 24px; overscroll-behavior: contain; scrollbar-width: thin; }
.premium-home .modal-header { gap: 12px; margin-bottom: 18px; padding-bottom: 14px; align-items: center; }
.premium-home .modal-title { font-size: 20px; line-height: 1.3; }
.premium-home .modal-title > i { display: none; }
.premium-home .modal-close-btn { border: 0; background: #f5f5f5; border-radius: 50%; flex-shrink: 0; }
.premium-home .form-group label { color: #555; font-size: 12px; font-weight: 600; }
.premium-home .form-btn { letter-spacing: 0; }
.premium-home .form-btn.outline { background: #fff; color: #000000; border: 1px solid #f7bec2; }
.premium-home .wallet-balance-box { background: #f6f5f6; border: 1px solid #eceaec; border-radius: 16px; padding: 24px; text-align: left; box-shadow: none; }
.premium-home .wallet-balance-box .bal-label { color: #6c686d; letter-spacing: .6px; font-size: 11px; }
.premium-home .wallet-balance-box .bal-amount { font-size: 36px; color: #272329; letter-spacing: -1.2px; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
#walletModalOverlay .wallet-action-row { padding: 0; border: 0; box-shadow: none; background: none; }
#walletModalOverlay .btn-wallet { min-height: 48px; font-size: 13px; font-weight: 600 !important; box-shadow: none !important; background: var(--ui-red) !important; }
#walletModalOverlay .btn-wallet.withdraw { background: #fff !important; border: 1px solid #ddd !important; color: #333 !important; }
.premium-home .wallet-menu-links { margin-top: 20px; }
.premium-home .w-link { display: flex; align-items: center; text-align: left; gap: 14px; width: 100%; padding: 16px 2px; min-height: 56px; background: #fff; border: 0; border-bottom: 1px solid #eee; font-size: 13px; color: #393539; cursor: pointer; }
.premium-home .w-link > i:first-child { color: #797279; width: 22px; text-align: center; }
.premium-home .w-link .arrow { margin-left: auto; color: #aaa; font-size: 11px; }
.premium-home .deposit-qr-card { background: #fafafa !important; border-color: #eaeaea !important; box-shadow: none; }
.premium-home .deposit-payee-info > div { flex-wrap: wrap; }
#depositUpiIdDisplay { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.premium-home .btn-copy-upi { min-height: 44px; background: var(--ui-red) !important; border-radius: 8px; cursor: pointer; transition: opacity 0.15s ease; }
.premium-home .btn-copy-upi:active { transform: scale(0.97); }
.premium-home .amount-chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.premium-home .amount-chip { min-height: 44px; padding: 8px 12px; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: none; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.15s ease; }
.premium-home .amount-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.premium-home .amount-chip:active { transform: scale(0.96); }
.premium-home .amount-chip.active { background: var(--ui-soft); color: #cb202d; border-color: #f7bec2; }
.premium-home .history-filter-btn { min-height: 44px; border-radius: 9px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.premium-home .history-filter-btn:active { transform: scale(0.97); }
#chartTypeModalBtns button { min-height: 52px; box-shadow: none; border-radius: 12px; }
.premium-home .fschart-header {
    background: #0F172A;
    color: #F1F5F9;
    border-bottom: 1px solid #1E293B;
    box-shadow: none;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 8px;
    gap: 6px;
    flex-wrap: nowrap !important;
}
.premium-home .fschart-title { color: #FFFFFF; }
.premium-home .fschart-tool-btn,
.premium-home .fschart-close-btn,
.premium-home .fschart-back-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    background: #1E293B;
    color: #F1F5F9;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0;
}
.premium-home .fschart-body { background: #0F172A; height: calc(100vh - 48px); height: calc(100dvh - 48px); }
.premium-home .sidebar { background: #fff; }
.premium-home .menu-item-row { min-height: 48px; font-size: 13px; }
@media (max-width: 767px) {
    .premium-home .spotlight-hero { min-height: 0; margin: 10px 0 16px; border-radius: 14px; position: relative; overflow: hidden; max-width: 100%; box-sizing: border-box; }
    .premium-home .spotlight-copy { padding: 18px 16px 16px; max-width: 100%; overflow: hidden; box-sizing: border-box; }
    .premium-home .spotlight-copy h1 { font-size: clamp(22px, 6.5vw, 28px); line-height: 1.15; letter-spacing: -0.5px; margin: 8px 0 6px; }
    .premium-home .spotlight-art { opacity: .5; right: 0; top: 12px; pointer-events: none; overflow: hidden; }
    .premium-home .spotlight-actions { margin-top: 12px; gap: 8px; }
    .premium-home .spotlight-actions button { padding-inline: 14px; gap: 8px; min-height: 44px; font-size: 11.5px; }
    .premium-home .modal-overlay { padding: 0 !important; align-items: flex-end; }
    .premium-home .modal-container { width: 100%; max-width: 100% !important; max-height: 94dvh !important; border: 0; border-radius: 22px 22px 0 0; margin: 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
    .premium-home .modal-container::before { content: ''; display: block; width: 32px; height: 4px; background: #ddd; border-radius: 4px; margin: -8px auto 16px; }
    .premium-home .modal-header { margin-bottom: 16px; }
    .premium-home .modal-title { font-size: 19px; }
    #chartModalOverlay .modal-header { flex-wrap: wrap; }
    .premium-home .account-dashboard { padding-top: 16px; }
    .premium-home .account-heading { margin-bottom: 12px; }
    .premium-home .account-heading h1 { font-size: 26px; }
    .premium-home .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
    .premium-home .main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .premium-home *, .premium-home *::before, .premium-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.premium-home .strip-left > i, .premium-home .strip-icon { background: #fff1f2; color: #cb202d; }
.premium-home .filter-pill { min-height: 44px; }
.premium-home .filter-pill.active { border-color: #cb202d; }
.premium-home .btn-primary-pill { box-shadow: none; min-height: 44px; }
.chart-market-link { display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 12px; min-height: 56px; padding: 14px 16px; border: 1px solid #eaeaea; border-radius: 12px; background: #fff; color: #333; font-size: 13px; font-weight: 600; cursor: pointer; }
.chart-market-link > span:last-child { color: #999; font-size: 24px; font-weight: 400; }
#utrInput { letter-spacing: 0 !important; font-family: inherit !important; font-weight: 400 !important; }
@media (max-width: 767px) {
    .premium-home .modal-overlay { top: 0 !important; height: 100dvh !important; background: rgba(15, 23, 42, 0.65) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .premium-home .modal-container, .premium-home #chartModalOverlay .modal-container { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)) !important; border-radius: 22px 22px 0 0 !important; border: 0 !important; gap: 0 !important; box-shadow: none !important; }
    .premium-home .market-games-modal-container,
    .premium-home .bidding-modal-container {
        padding: 12px 14px calc(18px + env(safe-area-inset-bottom)) 14px !important;
        max-height: 94dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 22px 22px 0 0 !important;
    }
    .premium-home .market-games-modal-container .modal-header,
    .premium-home .bidding-modal-container .modal-header {
        flex-shrink: 0 !important;
        padding-bottom: 10px !important;
        margin-bottom: 2px !important;
    }
    .premium-home .market-games-modal-container .game-category-tabs {
        flex-shrink: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        overflow-x: auto !important;
    }
    .premium-home .market-games-modal-container .games-grid-cards {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .premium-home .bidding-modal-container .bidding-scroll-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .premium-home .market-games-modal-container .market-games-bottom-wrapper,
    .premium-home .bidding-modal-container .bidding-footer {
        flex-shrink: 0 !important;
    }
    .premium-home .deposit-qr-card { padding: 12px !important; margin-top: 0 !important; }
    .premium-home .deposit-qr-card > div:first-of-type { width: 148px !important; height: 148px !important; box-shadow: none !important; }
    .premium-home .amount-chip { flex: 0 1 auto; }
}

/* Closed sheets do not need descendant layout or painting. */
.premium-home .modal-overlay:not(.active) { visibility: hidden; content-visibility: hidden; }
@media (max-width: 767px), (max-height: 520px) and (pointer: coarse) {
    .premium-home .modal-overlay input,
    .premium-home .modal-overlay textarea,
    .premium-home .modal-overlay select { font-size: 16px !important; scroll-margin-block: 16px; }
    .premium-home .modal-overlay.input-sheet,
    .premium-home #authModalOverlay.input-sheet,
    .premium-home #bidModalOverlay.input-sheet,
    .premium-home #marketGamesModalOverlay.input-sheet {
        top: var(--input-viewport-top, 0px) !important;
        bottom: auto !important;
        height: var(--input-viewport-height, 100dvh) !important;
        overflow: hidden;
    }
    .premium-home .modal-overlay.input-sheet .modal-container {
        max-height: calc(var(--input-viewport-height, 100dvh) - 8px) !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        scroll-padding-block: 16px;
        transition: none !important;
    }
    .premium-home .modal-overlay.input-sheet .modal-container > * { flex-shrink: 0; }
    .premium-home .modal-overlay.input-sheet .modal-header { position: static !important; }
    .premium-home .modal-overlay.input-sheet .bidding-scroll-body {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
}

/* Mobile touch responsiveness and tap highlight optimization */
html, body {
    -webkit-tap-highlight-color: transparent;
}
button, a, input, select, textarea, .amount-chip, .digit-pill-box, .bulk-pill-input-box, .w-link, .menu-item-row, .market-card, .btn-play, .btn-chart {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}