body { background: #000; color: white; overflow: hidden; }
.feed-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-snap-stop: always; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; padding-top: 60px; }
.top-nav-tabs { position: fixed; top: 15px; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 160; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.tab-item { color: rgba(255,255,255,0.6); font-size: 16px; cursor: pointer; transition: 0.3s; position: relative; }
.tab-item.active { color: #fff; font-size: 17px; }
.tab-item.active::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: #fff; border-radius: 2px; }
.feed-container::-webkit-scrollbar { display: none; }
.video-card { height: 100vh; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; will-change: transform, scroll-position; }
video { max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
.side-bar { position: absolute; right: 15px; bottom: 70px; display: flex; flex-direction: column; gap: 7px; align-items: center; z-index: 50; }
.nav-bottom { position: fixed; bottom: 0; width: 100%; background: #000; display: flex; justify-content: space-around; padding: 12px 0; border-top: 0.5px solid #333; z-index: 100; }
#start-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
#comment-popup, #share-popup { position: fixed; bottom: -100%; left: 0; width: 100%; height: 65%; background: #121212; border-radius: 20px 20px 0 0; transition: 0.4s ease; z-index: 150; padding: 20px; }
#comment-popup.active, #share-popup.active { bottom: 0; }
.share-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.share-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; }
#profile-overlay { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: #000; z-index: 200; transition: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); overflow-y: auto; }
#profile-overlay.active { right: 0; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.video-item { aspect-ratio: 3/4; background: #111; position: relative; overflow: hidden; }
.video-item video { width: 100%; height: 100%; object-fit: cover; }
.nav-tab { width: 33.33%; text-align: center; padding-bottom: 10px; color: #555; border-bottom: 2px solid transparent; }
.nav-tab.active { border-color: white; color: white; }
.tab-btn { cursor: pointer; position: relative; padding: 4px 2px; }
.tab-btn.active { color: #ffffff !important; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background-color: #ffffff; border-radius: 2px; }
@keyframes savePop { 0% { transform: scale(1); } 50% { transform: scale(1.4) rotate(-10deg); filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.8)); } 100% { transform: scale(1); } }
.animate-save-pop { animation: savePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes slimPress { 0%, 42%, 58%, 100% { transform: translateY(0); box-shadow: 0 5px 0 rgb(130,0,30), 0 10px 20px rgba(254,44,85,0.3); } 50% { transform: translateY(4px); box-shadow: 0 1px 0 rgb(130,0,30), 0 5px 10px rgba(254,44,85,0.2); } }
@keyframes handClickAction { 0%, 100% { transform: translate(15px, 15px) scale(1.1); opacity: 0; } 35% { transform: translate(0, 0) scale(1); opacity: 1; } 50% { transform: scale(0.85); } 65% { transform: translate(0, 0) scale(1); opacity: 1; } 90% { transform: translate(15px, 15px) scale(1.1); opacity: 0; } }
@keyframes subtleRipple { 0%, 48% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } 75% { opacity: 0; transform: scale(1.2); } }
.premium-3d-btn { animation: slimPress 3.5s infinite ease-in-out; }
.auto-hand { animation: handClickAction 3.5s infinite ease-in-out; }
.subtle-ripple { animation: subtleRipple 3.5s infinite ease-in-out; }
.premium-3d-btn:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 rgb(130,0,30) !important; }