@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body { font-family: 'Inter', sans-serif; overflow: hidden; }

.sidebar-blur { background-color: rgba(249, 250, 251, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.app-card { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); cursor: pointer; border: 1px solid rgba(0,0,0,0.03); }
.app-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.app-card:active { transform: scale(0.95); }

#app-detail-view { 
    display: none; 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    background: white; 
    z-index: 50; 
    overflow-y: auto;
}
#app-detail-view.active { display: block; animation: fadeIn 0.4s ease; }

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

.back-btn i { transition: transform 0.3s ease; }
.back-btn:hover i { transform: translateX(-5px); }

.screenshot-wrapper { position: relative; width: 100%; }
.screenshot-scroll {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px;
    scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;
}
.screenshot-scroll::-webkit-scrollbar { display: none; }
.screenshot-item {
    flex: 0 0 auto; width: 280px; height: 160px; border-radius: 14px;
    background-color: #f3f4f6; object-fit: cover; scroll-snap-align: start; border: 1px solid #eee;
}

.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer; z-index: 10; border: 1px solid rgba(0,0,0,0.05);
}
.nav-prev { left: -5px; } .nav-next { right: -5px; }

.mobile-tab-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    height: 65px; background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px); border-top: 1px solid #e5e7eb; z-index: 100;
}

.section-divider { border-bottom: 1px solid #f3f4f6; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 10px; }