/* Zomato Design System: Red #cb202d, Mine Shaft #2d2d2d, Desert Storm #f4f4f2, Okra Typography */
:root {
    --ui-red: #cb202d;
    --ui-ink: #2d2d2d;
    --ui-muted: #686868;
    --ui-border: #e8e8e6;
    --ui-border-subtle: #e8e8e6;
    --ui-soft: #fff1f2;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}
body.premium-home {
    background: #ffffff;
    color: var(--ui-ink);
    font-family: Okra, Inter, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.premium-home .app-header { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ui-border-subtle); }
.premium-home .brand-title, .premium-home .header-icon-btn { color: var(--ui-ink); }
.premium-home .brand-title span { color: var(--ui-red); font-weight: 700; }
.premium-home .brand-tagline { color: var(--ui-muted); font-size: 9px; letter-spacing: 1.2px; }
.premium-home .header-icon-btn { border-color: var(--ui-border-subtle); border-radius: var(--radius-sm); transition: all 0.15s ease; color: var(--ui-ink); }
.premium-home .header-icon-btn:hover { background: #fcfcfb; border-color: #dcdcd8; color: var(--ui-red); }
.premium-home .live-ticker-wrap { background: #fcfcfb; border-color: var(--ui-border-subtle); }
.premium-home .btn-primary-pill, .premium-home .market-card .btn-play { background: var(--ui-red); color: #fff; border: 0; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; transition: all 0.15s ease; }
.premium-home .market-card .btn-play:hover { background: #b71c26; box-shadow: 0 4px 12px rgba(203, 32, 45, 0.25); }
.premium-home .market-card .btn-play:active { transform: scale(0.97); }
.premium-home .market-card, .premium-home .market-search-input { background: #fff; border-color: var(--ui-border-subtle); transition: all 0.18s ease; }
.premium-home .market-card:hover { border-color: #dcdcd8; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.06); }
.premium-home .filter-pill { border-color: var(--ui-border-subtle); color: #525252; background: #fff; border-radius: 9999px; transition: all 0.15s ease; font-size: 13px; font-weight: 500; }
.premium-home .filter-pill:active { transform: scale(0.96); }
.premium-home .filter-pill.active { color: var(--ui-red); background: var(--ui-soft); border-color: #f7bec2; font-weight: 600; }
.premium-home .market-result { color: var(--ui-red); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 1.5px; }
.premium-home .section-title-strip { border-color: var(--ui-border-subtle); }
.ui-eyebrow { font-size: 11px; color: var(--ui-muted); letter-spacing: 1.2px; font-weight: 600; margin: 0 0 8px; text-transform: uppercase; }
.account-dashboard { padding: 16px 0 8px; }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-heading h1 { margin: 0 0 7px; color: var(--ui-ink); font-size: clamp(22px, 4vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.account-phone { font-size: 13px; color: var(--ui-muted); }
.account-avatar { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #f7bec2; background: var(--ui-soft); color: var(--ui-red); flex-shrink: 0; font-size: 19px; cursor: pointer; transition: transform 0.15s ease; }
.account-avatar:hover { transform: scale(1.05); }
.account-avatar:active { transform: scale(0.96); }
.account-balance { padding: 16px; background: #fff; border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); }
.account-balance > div { display: grid; gap: 6px; min-width: 0; }
.account-balance > div > span { font-size: 13px; color: var(--ui-muted); font-weight: 500; }
.account-balance strong { color: var(--ui-ink); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ui-text-button { background: transparent; border: 0; color: var(--ui-red); font-size: 13px; font-weight: 600; min-height: 44px; padding: 8px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease; }
.ui-text-button:hover { opacity: 0.85; }
.account-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.account-shortcuts button { min-width: 0; border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-md); background: #fff; padding: 12px 6px; display: grid; justify-items: center; gap: 8px; cursor: pointer; color: var(--ui-ink); font-size: 12px; font-weight: 600; transition: all 0.15s ease; }
.account-shortcuts button:hover { border-color: #dcdcd8; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04); }
.account-shortcuts button:active { transform: scale(0.96); }
.account-shortcuts i { color: var(--ui-red); font-size: 19px; }
.account-toolbar { display: flex; justify-content: space-between; margin: 8px 0; }
.account-toolbar button { background: none; border: 0; color: var(--ui-muted); padding: 12px 0; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 500; transition: color 0.15s ease; }
.account-toolbar button:hover { color: var(--ui-ink); }
.account-toolbar button:last-child { color: var(--ui-red); font-weight: 600; }
.premium-home .modal-overlay, .admin-app .modal-overlay { background: #17171766; backdrop-filter: none; }
.premium-home .modal-container { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--ui-border-subtle); box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08); }
.premium-home .modal-header { border-color: var(--ui-border-subtle); }
.premium-home .modal-title { color: var(--ui-ink); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.premium-home .modal-close-btn { color: var(--ui-muted); background: #f4f4f2; border: 0; border-radius: 50%; width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; }
.premium-home .modal-close-btn:hover { background: #e8e8e6; color: var(--ui-ink); }
.premium-home .modal-close-btn:active { transform: scale(0.92); }
.premium-home .form-input { min-height: 48px; border: 1px solid #dcdcd8; border-radius: var(--radius-sm); font-size: 14px; font-weight: 400; background: #fff; color: var(--ui-ink); min-width: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.premium-home .form-btn { background: var(--ui-red); box-shadow: none; border: 0; border-radius: var(--radius-sm); min-height: 48px; color: #fff; font-weight: 600 !important; cursor: pointer; transition: all 0.15s ease; }
.premium-home .form-btn:active { transform: scale(0.98); }
.premium-home .form-input:focus { border-color: var(--ui-red); box-shadow: 0 0 0 3px rgba(203, 32, 45, 0.12); outline: none; }
#authModalOverlay .modal-header { margin-bottom: 8px; align-items: flex-start; }
#authModalOverlay .modal-title i, #authModalOverlay label i { display: none; }
#authModalOverlay label { font-size: 12px !important; font-weight: 600 !important; color: #444 !important; }
#authModalSubtitle { font-weight: 400 !important; line-height: 1.6; }
#authModalOverlay .auth-toggle-tabs { background: #f6f6f6 !important; padding: 4px !important; }
#authModalOverlay .auth-tab-btn { font-weight: 600 !important; min-height: 44px; box-shadow: none !important; }
#authModalOverlay .auth-tab-btn.active { background: #fff !important; color: var(--ui-red) !important; }
#authModalOverlay .auth-tab-btn i { display: none; }
#authModalOverlay button:focus-visible, #authModalOverlay a:focus-visible { outline: 2px solid var(--ui-red); outline-offset: 2px; }
#authAlertBox { background: #fff2f3 !important; border: 1px solid #f5c8ce !important; color: #a81e34 !important; font-weight: 400 !important; line-height: 1.5; }
#signupOtpStep[hidden], #forgotOtpStep[hidden] { display: none !important; }
#signupOtpStep .form-input, #forgotOtpStep .form-input { width: 100%; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.otp-resend, .auth-back { display: block; width: max-content; min-height: 44px; padding: 9px 2px; border: 0; background: transparent; color: var(--ui-red); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.otp-resend:disabled { color: var(--ui-muted); cursor: wait; }
.bids-load-error { display: grid; justify-items: center; gap: 12px; padding: 32px 16px; color: var(--ui-muted); font-size: 13px; text-align: center; }
.bids-load-error .form-btn { min-width: 112px; }
.toggle-password-btn { min-width: 44px; min-height: 44px; }
.logout-dialog { margin: auto; width: min(360px, calc(100vw - 32px)); border: 1px solid var(--ui-border); border-radius: 16px; padding: 20px; color: var(--ui-ink); background: #fff; }
.logout-dialog::backdrop { background: #17171766; }
.logout-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ui-red); background: var(--ui-soft); font-size: 24px; margin-bottom: 18px; }
.logout-dialog h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.5px; }
.logout-dialog p { color: var(--ui-muted); font-size: 13px; }
.logout-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.logout-actions button { min-height: 46px; border-radius: 10px; border: 1px solid var(--ui-border); background: #fff; color: #444; cursor: pointer; font-weight: 600; }
.logout-actions .logout-confirm { background: var(--ui-red); border-color: var(--ui-red); color: #fff; }
.admin-app { --admin-sidebar: #fff; --admin-red: #cb202d; --admin-bg: #fafafa; --admin-border: #f4f4f2; --admin-sidebar-hover: #1E293B; background: #fafafa; }
.admin-app .admin-sidebar { background: #fff; border-right: 1px solid var(--ui-border); color: var(--ui-ink); }
.admin-app .sidebar-brand { border-color: var(--ui-border); padding: 20px; }
.admin-app .sidebar-brand h2 { color: var(--ui-ink); }
.admin-app .sidebar-link { color: #626262; font-size: 12px; border-radius: 9px; min-height: 44px; margin: 2px 10px; padding: 11px 14px; transition: all 0.15s ease; }
.admin-app .sidebar-link.active { color: var(--ui-red); background: var(--ui-soft); border-left-color: transparent; font-weight: 700; }
.admin-app .sidebar-link:hover { background: #1E293B; color: #FFFFFF; }
.admin-app .sidebar-link:hover i { color: #F87171; }
.admin-app .admin-topbar { box-shadow: none; border-color: var(--ui-border); }
.admin-app .admin-topbar > div:last-child > span { display: none; }
.admin-app .admin-content { max-width: 1500px; width: 100%; padding: 20px; }
.admin-page-heading h1 { font-size: 28px; font-weight: 700; letter-spacing: -.8px; margin-bottom: 24px; }
.admin-app .metrics-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-app .metric-card { padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); border: 1px solid var(--ui-border); border-radius: 14px; min-width: 0; background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.admin-app .metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.06); }
.admin-app .metric-info h4 { font-size: 12px; color: var(--ui-muted); font-weight: 500; margin-bottom: 4px; }
.admin-app .admin-dashboard-hero { background: none; border: 0; box-shadow: none; padding: 0; gap: 12px; margin-bottom: 16px; }
.admin-app .hero-text-wrap { min-width: 0; }
.admin-app .hero-title { font-size: 24px; font-weight: 700; margin: 0; }
.admin-app .metric-card { font-family: inherit; text-align: left; cursor: pointer; color: var(--ui-ink); }
.admin-app .metric-val { font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.admin-section-label { margin-bottom: 14px; font-size: 16px; font-weight: 600; }
.admin-launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.admin-launcher button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; background: #fff; border: 1px solid var(--ui-border); border-radius: 12px; color: #1E293B; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.15s ease; }
.admin-launcher button:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.06); transform: translateY(-1px); }
.admin-launcher button:active { transform: scale(0.98); }
.admin-launcher .launcher-title { color: #1E293B !important; font-weight: 700; font-size: 13.5px; }
.admin-launcher .launcher-arrow { margin-left: auto; color: #CBD5E1; font-size: 13px; }
.admin-app .admin-card-section { background: #fff; border: 1px solid var(--ui-border); box-shadow: none; border-radius: 14px; }
.admin-app .section-heading { font-size: 18px; font-weight: 650; color: var(--ui-ink); }
.admin-app .btn-admin { border-radius: 9px; box-shadow: none; min-height: 44px; font-weight: 600; }
.admin-app .btn-admin.primary, .admin-app .btn-admin.success { background: var(--ui-red); color: #fff; border-color: var(--ui-red); }
.admin-app .form-input { border-color: #dedede; border-radius: 9px; font-weight: 400; }
.admin-app th { background: #fafafa; color: #737373; font-size: 11px; text-transform: none; letter-spacing: 0; }
.admin-app td { border-color: #f0f0f0; }
#adminLoginGateOverlay { background: #fafafa !important; overflow-y: auto; }
#adminLoginGateOverlay > div { background: #fff !important; border: 1px solid var(--ui-border) !important; box-shadow: 0 8px 40px #00000005 !important; padding: 28px !important; }
#adminLoginGateOverlay h2 { color: var(--ui-ink) !important; }
#adminLoginGateOverlay label { color: #555 !important; font-weight: 500 !important; }
#adminLoginGateOverlay input { color: var(--ui-ink) !important; background: #fff !important; border-color: #dedede !important; }
#adminLoginGateOverlay label i { display: none; }
:where(button, a, input:not(.digit-points-input):not(.bulk-pill-input), select, textarea):focus-visible { outline: 2px solid var(--ui-red); outline-offset: 3px; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.digit-points-input,
.bulk-pill-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.digit-points-input:focus,
.digit-points-input:focus-visible,
.bulk-pill-input:focus,
.bulk-pill-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 767px) {
    .premium-home .modal-overlay { padding: 12px; }
    #authModalOverlay { align-items: flex-end; padding: 0; }
    #authModalOverlay .modal-container { width: 100%; max-width: 100% !important; max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); margin: 0; }
    .admin-app .admin-content { padding: 14px 12px; }
    .admin-app .metrics-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
    .admin-app .metric-card { padding: 12px 14px; gap: 12px; }
    .admin-app .metric-info { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; min-width: 0; }
    .admin-app .metric-info h4 { margin: 0; }
    .admin-app .metric-icon-wrap { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
    .admin-app .metric-val { font-size: 22px; }
    .admin-launcher { grid-template-columns: 1fr; gap: 8px; }
    .admin-launcher button { padding: 12px 14px; gap: 12px; min-height: 48px; font-size: 13px; border-radius: 10px; }
    .admin-app .admin-card-section { padding: 16px 12px; border-radius: 12px; }
}
@media (max-width: 359px) { .account-shortcuts { gap: 6px; }.account-balance { padding: 16px; }.admin-launcher button { padding: 10px 12px; gap: 8px; } }
/* Replace legacy full-page auth overrides with a compact, scrollable sheet. */
#authModalOverlay { inset: 0 !important; height: 100dvh !important; background: #17171766 !important; align-items: center; }
.premium-home .wallet-pill { background: var(--ui-soft); border: 1px solid #f7bec2; box-shadow: none; }
.premium-home .wallet-amount, .premium-home .wallet-icon { color: var(--ui-red); }
.premium-home .mobile-bottom-nav { border-top: 1px solid var(--ui-border); box-shadow: none; }
.premium-home .mobile-tab { font-size: 10px; font-weight: 500; }
.premium-home .mobile-tab.active { color: var(--ui-red); }
.premium-home .mobile-tab.tab-play-prominent { flex: 1; justify-content: center; padding-bottom: 0; gap: 3px; }
.premium-home .prominent-play-btn { width: 22px; height: 22px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--ui-red); box-shadow: none; }
.premium-home .prominent-play-btn i { color: var(--ui-red) !important; font-size: 18px !important; margin: 0; }
.premium-home .mobile-tab.tab-play-prominent span { color: var(--ui-red); font-weight: 500; font-size: 10px; margin: 0; }
@media (max-width: 767px) {
    #authModalOverlay { padding: 0 !important; align-items: flex-end !important; }
    #authModalOverlay .modal-container { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) !important; border-radius: 22px 22px 0 0 !important; max-height: 94dvh; gap: 0; }
    .premium-home .header-brand { flex-shrink: 1; min-width: 0; }
    .premium-home .brand-title { font-size: 14px; }
    .premium-home .header-left { min-width: 0; gap: 8px; }
    .premium-home .header-right { gap: 6px; }
}