:root {
            --bg-color: #000;
            --helostar-pink: #d3159d;
            --glass-white: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.15);
            --blur: blur(25px);
        }

        body { font-family: 'Inter', sans-serif; background: var(--bg-color); color: #fff; margin: 0; overflow-x: hidden; }
        header { background: rgba(0,0,0,0.8); backdrop-filter: var(--blur); padding: 12px 20px; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--glass-border); }
        .header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }
        .logo { font-size: 1.5rem; font-weight: 900; color: var(--helostar-pink); transition: opacity 0.3s; }

        .search-wrapper { display: flex; align-items: center; flex-grow: 1; justify-content: flex-end; margin-right: 15px; }
        .search-container { position: relative; display: flex; align-items: center; transition: all 0.4s ease; width: 40px; }
        .search-container.expanded { width: 100%; }
        .search-bar { width: 0; opacity: 0; background: var(--glass-white); border: 1px solid var(--glass-border); border-radius: 20px; padding: 8px 10px; color: white; outline: none; transition: all 0.4s ease; pointer-events: none; }
        .search-container.expanded .search-bar { width: 100%; opacity: 1; padding-left: 35px; pointer-events: auto; }
        .search-icon-btn { cursor: pointer; font-size: 1.2rem; color: #fff; position: absolute; left: 10px; z-index: 5; }

        .menu-wrapper { position: relative; }
        .menu-trigger { font-size: 1.5rem; cursor: pointer; color: white; padding-left: 10px; }
        .dropdown-content { 
            position: absolute; right: 0; top: 45px; background: #111; border: 1px solid var(--glass-border); 
            border-radius: 15px; min-width: 200px; display: none; flex-direction: column; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }
        .dropdown-content.show { display: flex; }
        .user-header { padding: 15px; background: #1a1a1a; border-bottom: 1px solid #333; font-size: 0.85rem; color: var(--helostar-pink); font-weight: bold; display: flex; align-items: center; gap: 8px; }
        .dropdown-item { padding: 12px 15px; font-size: 0.9rem; border-bottom: 1px solid #222; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px; }
        .dropdown-item:hover { background: var(--glass-white); }
        .dropdown-item i { width: 20px; color: #888; }
        .logout-item { background: #1a1a1a; color: #ff4d4d; justify-content: center; border-bottom: none; font-size: 1.2rem; padding: 15px; }

        .nav-tabs { display: flex; background: #000; }
        .tab-btn { flex: 1; padding: 15px; background: none; border: none; color: #555; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab-btn.active { color: #fff; border-bottom-color: var(--helostar-pink); }
        
        .container { width: 100%; max-width: 500px; margin: 0 auto; padding-bottom: 120px; }
        .card { width: 100%; margin-bottom: 30px; border-bottom: 1px solid #111; }
        .v-wrap { width: 100%; background: #000; position: relative; overflow: hidden; display: flex; align-items: center; }
        .v-full { height: 400px; }
        .v-short { aspect-ratio: 9/16; }
        .v-short.fullscreen-short { position: fixed; inset: 0; aspect-ratio: auto; z-index: 999; width: 100vw; height: 100vh; }
        .v-short.fullscreen-short video { width: 100vw; height: 100vh; object-fit: cover; }
        video { width: 100%; height: 100%; object-fit: contain; }
        
        .action-row { display: flex; gap: 10px; padding: 15px; }
        /* For vertical shorts hide the horizontal action row (we use side actions) */
        .v-short + .action-row, .v-short .action-row { display: none; }

        /* Right-side vertical action buttons for shorts - positioned at bottom, fully transparent */
        .side-actions { position: absolute; right: 14px; bottom: 20px; display: flex; flex-direction: column; gap: 16px; z-index: 7; }
        .side-actions .action-btn { background: transparent; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; flex-direction: column; font-size: 1.15rem; transition: all 180ms ease; }
        .side-actions .action-btn .small-count { font-size: 0.7rem; margin-top: 4px; color: #fff; font-weight: 600; }
        .side-actions .action-btn:hover { transform: scale(1.12); }

        /* Like interactive style: transparent by default, dark red filled button when liked */
        .side-actions .action-btn.liked { background: transparent; border: none; }
        .side-actions .action-btn.liked i.fas.fa-heart { color: #8b0000; filter: drop-shadow(0 4px 12px rgba(139,0,0,0.4)); transform: scale(1.2); }
        .action-btn.liked, .btn-act.liked { color: var(--helostar-pink) !important; }
        .action-btn.liked i.fas.fa-heart, .btn-act.liked i.fas.fa-heart { color: #8b0000; transition: transform 180ms ease, filter 180ms ease; }
        .like-pop { animation: pop .32s cubic-bezier(.2,.8,.2,1); }
        @keyframes pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
        .btn-act { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 25px; background: var(--glass-white); border: 1px solid var(--glass-border); font-size: 0.8rem; color: white; border: none; }
        .btn-act:active { transform: scale(0.95); }
        .liked { color: var(--helostar-pink) !important; }
        
        .comm-panel { padding: 15px; display: none; background: rgba(255,255,255,0.05); margin: 0 15px 15px 15px; border-radius: 10px; }
        
        /* Comments UI */
        .comm-panel { display: none; padding: 15px; background: #111; border-top: 1px solid #222; }
        .comm-list { max-height: 150px; overflow-y: auto; margin-bottom: 10px; font-size: 0.85rem; }
        .comm-item { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #222; }
        .comm-input-wrap { display: flex; gap: 10px; }
        .comm-input { flex: 1; background: #222; border: 1px solid #444; color: white; padding: 8px; border-radius: 5px; outline: none; }
        .comm-post-btn { background: var(--helostar-pink); border: none; color: white; padding: 0 15px; border-radius: 5px; cursor: pointer; }
        .fab { position: fixed; bottom: 30px; left: 25px; background: none; border: none; display: none; align-items: center; justify-content: center; color: var(--helostar-pink); font-size: 2rem; z-index: 1001; cursor: pointer; }
        .hidden { display: none !important; }
        #authOverlay { 
            position: fixed; inset: 0; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #16213e 100%); 
            z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center;
            backdrop-filter: blur(10px);
        }
        #authOverlay::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(211, 21, 157, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(211, 21, 157, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }
     @keyframes fadeInDown {
                from {
                    opacity: 0;
                    transform: translateY(-30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            #authOverlay .btn-act:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 32px rgba(211, 21, 157, 0.3) !important;
            }
            #authOverlay .btn-act:active {
                transform: translateY(-1px);
            }

            /* Profile and Follow Button */
.card-header { display: flex; align-items: center; padding: 10px 15px; gap: 10px; }
.user-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--helostar-pink); background: #333; flex-shrink: 0; transition: transform 0.2s; }
.user-avatar[style*="cursor: pointer"]:hover { transform: scale(1.1); }
.btn-follow { 
    background: var(--helostar-pink); border: none; color: white; padding: 6px 16px; 
    border-radius: 18px; font-size: 0.8rem; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-follow.following { background: #333; color: #ccc; }

/* Video Menu */
.video-menu-wrapper { position: relative; margin-left: auto; }
.video-menu-btn { background: none; border: none; color: #999; cursor: pointer; font-size: 1.2rem; padding: 5px; transition: 0.2s; }
.video-menu-btn:hover { color: var(--helostar-pink); }
.video-menu-dropdown { position: absolute; right: 0; top: 30px; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 100; }
.video-menu-item { padding: 12px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #fff; border-bottom: 1px solid #222; transition: 0.2s; }
.video-menu-item:last-child { border-bottom: none; }
.video-menu-item:hover { background: rgba(211, 21, 157, 0.2); }
.video-menu-item.delete-item:hover { background: rgba(255, 77, 77, 0.2); color: #ff4d4d; }
.video-menu-item i { width: 16px; }

/* Thumbnail preview for upload */
.thumb-input-label { 
    display: block; margin-top: 10px; color: var(--helostar-pink); 
    font-size: 0.8rem; cursor: pointer; text-decoration: underline; 
}

/* Instagram Reels Style Shorts */
.reels-feedback {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 3rem;
    z-index: 10000;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    animation: reelsFade 0.6s ease-out forwards;
}

@keyframes reelsFade {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.8);
    }
}

@keyframes heartPopUp {
    0% {
        transform: scale(0) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(-60px);
        opacity: 0;
    }
}

/* Fullscreen mode for reels */
.reels-fs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    transition: all 0.3s ease !important;
}

.reels-fs video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.reels-fs-card {
    position: static !important;
}