/* DailyPaisa — Mobile App Shell (all devices show phone layout) */ :root { --dp-app-width: 430px; --dp-bottom-nav-h: 4.25rem; --dp-safe-bottom: env(safe-area-inset-bottom, 0px); --dp-safe-top: env(safe-area-inset-top, 0px); } /* App shell — structural selectors (no JS flash) */ .min-h-screen.flex:has(> aside) { -webkit-tap-highlight-color: transparent; } html.dp-mobile-app body, .min-h-screen.flex:has(> aside) { overflow-x: hidden; } body:has(.min-h-screen.flex > aside) { background: #050508; } /* Phone frame — same on iPhone, Android, Samsung, desktop */ html.dp-mobile-app .relative.z-10 > .min-h-screen.flex, html.dp-mobile-app .min-h-screen.flex, .min-h-screen.flex:has(> aside) { max-width: var(--dp-app-width); margin-left: auto; margin-right: auto; min-height: 100dvh; min-height: 100vh; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 25px 80px rgba(0, 0, 0, 0.55); position: relative; background: #09090f; } @media (min-width: 480px) { html.dp-mobile-app body { background: radial-gradient(ellipse at 50% 0%, #1a1030 0%, #050508 55%); } } /* Kill sidebar — bottom nav replaces it */ html.dp-mobile-app .min-h-screen.flex > aside, html.dp-mobile-app aside, .min-h-screen.flex:has(> aside) > aside { display: none !important; } /* Nav host on — outside React body tree */ #dp-nav-host { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } #dp-nav-host #dp-bottom-nav { pointer-events: auto; z-index: 9999; } /* Compact app topbar */ .min-h-screen.flex:has(> aside) header.sticky, html.dp-mobile-app header.sticky { padding-top: calc(0.5rem + var(--dp-safe-top)) !important; } .min-h-screen.flex:has(> aside) header .hidden.md\\:flex, html.dp-mobile-app header .hidden.md\\:flex { display: none !important; } .min-h-screen.flex:has(> aside) header button.lg\\:hidden, html.dp-mobile-app header button.lg\\:hidden, html.dp-mobile-app header .lg\\:hidden.h-9.w-9.rounded-lg { display: none !important; } .min-h-screen.flex:has(> aside) header .ml-auto a[href="/profile/"] .hidden.sm\\:block, html.dp-mobile-app header .ml-auto a[href="/profile/"] .hidden.sm\\:block { display: none !important; } .min-h-screen.flex:has(> aside) header .btn-ghost-glass, html.dp-mobile-app header .btn-ghost-glass { font-size: 0.7rem !important; padding: 0 0.5rem !important; } /* Main content clearance for bottom nav */ .min-h-screen.flex:has(> aside) main.flex-1, html.dp-mobile-app main.flex-1 { padding-bottom: calc(var(--dp-bottom-nav-h) + var(--dp-safe-bottom) + 1.25rem) !important; } /* Mobile-friendly grids */ .min-h-screen.flex:has(> aside) .grid.lg\\:grid-cols-4, .min-h-screen.flex:has(> aside) .grid.lg\\:grid-cols-3, .min-h-screen.flex:has(> aside) .grid.lg\\:grid-cols-2, html.dp-mobile-app .grid.lg\\:grid-cols-4, html.dp-mobile-app .grid.lg\\:grid-cols-3, html.dp-mobile-app .grid.lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .min-h-screen.flex:has(> aside) .grid.lg\\:grid-cols-3 > .lg\\:col-span-2, html.dp-mobile-app .grid.lg\\:grid-cols-3 > .lg\\:col-span-2 { grid-column: span 2 / span 2 !important; } .min-h-screen.flex:has(> aside) .flex-col.sm\\:flex-row, html.dp-mobile-app .flex-col.sm\\:flex-row { flex-direction: column !important; align-items: flex-start !important; } /* Bottom navigation bar */ #dp-bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--dp-app-width); z-index: 9999; padding-bottom: var(--dp-safe-bottom); background: rgba(9, 9, 15, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35); } #dp-bottom-nav .dp-nav-inner { display: flex; align-items: flex-end; justify-content: space-around; height: var(--dp-bottom-nav-h); padding: 0 0.25rem; } #dp-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-decoration: none; color: rgba(255, 255, 255, 0.45); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.35rem 0; transition: color 0.2s, transform 0.15s; -webkit-user-select: none; user-select: none; } #dp-bottom-nav a:active { transform: scale(0.92); } #dp-bottom-nav a.dp-active { color: #a78bfa; } #dp-bottom-nav a.dp-active .dp-nav-icon { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; } #dp-bottom-nav .dp-nav-icon { width: 1.65rem; height: 1.65rem; display: flex; align-items: center; justify-content: center; border-radius: 0.65rem; transition: background 0.2s; } #dp-bottom-nav a.dp-nav-earn { margin-top: -1.1rem; } #dp-bottom-nav a.dp-nav-earn .dp-nav-icon-earn { width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, #fbbf24, #f97316); color: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(251, 191, 36, 0.45); border: 2px solid rgba(255, 255, 255, 0.15); } #dp-bottom-nav a.dp-nav-earn.dp-active .dp-nav-icon-earn { box-shadow: 0 8px 28px rgba(251, 191, 36, 0.65); } #dp-bottom-nav a.dp-nav-earn span:last-child { color: #fbbf24; font-weight: 700; } #dp-bottom-nav a.dp-hidden-nav { display: none !important; } /* Check-in button above bottom nav */ html.dp-mobile-app #dp-checkin-btn { bottom: calc(var(--dp-bottom-nav-h) + var(--dp-safe-bottom) + 0.75rem) !important; right: 0.75rem !important; } /* Review mode */ html.dp-mobile-app.dp-review-mode [data-dp-financial], html.dp-review-mode #dp-bottom-nav a[data-dp-financial] { display: none !important; } /* Contain aurora to phone shell */ html.dp-mobile-app .aurora-bg, body:has(.min-h-screen.flex > aside) .aurora-bg { max-width: var(--dp-app-width); left: 50%; transform: translateX(-50%); right: auto; width: 100%; }