/* Mobile container and screen-fade animations */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.mobile-container {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    background: #F9FAFB;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
.btn-scale:active { transform: scale(0.95); }
.sticky-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    background: white;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    z-index: 50;
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 10px; }
/* Tailwind custom color mappings for JS helper classes used in screens */
.bg-status-created { background-color: #9CA3AF; }
.text-status-created { color: #9CA3AF; }
.bg-status-active { background-color: #4F46E5; }
.text-status-active { color: #4F46E5; }
.bg-status-pending { background-color: #FBBF24; }
.text-status-pending { color: #FBBF24; }
.bg-status-completed { background-color: #10B981; }
.text-status-completed { color: #10B981; }

/* Discovery UI */
.discovery-card { min-width: 280px; scroll-snap-align: start; }
.category-pill { min-width: 100px; flex-shrink: 0; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); }