/* Basic Reset & App Container */
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: sans-serif; background: #000; }
.app-container, .swiper-container { width: 100%; height: 100%; }

/* Video Player */
.swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; background: #000; }
.swiper-slide video { width: 100%; height: 100%; object-fit: contain; }

/* Video Info & Actions */
.video-details { position: absolute; bottom: 80px; left: 15px; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.video-actions { position: absolute; bottom: 80px; right: 10px; display: flex; flex-direction: column; align-items: center; color: #fff; }
.action-btn { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; cursor: pointer; }
.action-btn span { font-size: 35px; }
.action-btn small { font-size: 14px; margin-top: 5px; }

/* Bottom Navigation */
.bottom-nav { position: fixed; bottom: 0; width: 100%; background: #111; display: flex; justify-content: space-around; padding: 15px 0; z-index: 1000; }
.bottom-nav a { color: #fff; text-decoration: none; font-size: 24px; }
.bottom-nav .upload-btn { font-size: 28px; background-color: #fe2c55; padding: 5px 15px; border-radius: 10px; }

/* Form Styles */
.form-container { max-width: 400px; margin: 50px auto; padding: 20px; background: #333; border-radius: 10px; color: #fff; }
.form-container input { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; }
.form-container button { width: 100%; padding: 10px; background: #fe2c55; border: none; color: #fff; border-radius: 5px; cursor: pointer; }
/* Profile Page Styles */
.profile-container {
    padding: 20px;
    padding-bottom: 80px; /* To avoid overlap with bottom nav */
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-bottom: 10px;
}

.profile-username {
    font-size: 22px;
    font-weight: bold;
}

.profile-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.action-btn.follow {
    background-color: #fe2c55;
    color: #fff;
}

.action-btn.unfollow {
    background-color: #555;
    color: #fff;
}

.action-btn.edit-profile {
    background-color: #444;
    color: #fff;
}
.action-btn.logout {
    background-color: #222;
    color: #fff;
    border: 1px solid #555;
}


.profile-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-bottom: 20px;
}

.stat strong {
    display: block;
    font-size: 18px;
}

.stat span {
    color: #aaa;
    font-size: 14px;
}

.profile-bio {
    text-align: center;
    margin-bottom: 25px;
    color: #eee;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.video-thumbnail img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-color: #222;
}
.no-videos {
    grid-column: 1 / 4;
    text-align: center;
    color: #888;
    padding: 40px 0;
}