diff --git a/user.html b/user.html
new file mode 100644
index 0000000000..fb314d7ffa
--- /dev/null
+++ b/user.html
@@ -0,0 +1,911 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>TamilanTV - Movies & Series</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Material Icons for the Video Player -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        /* [CSS REMAINS EXACTLY THE SAME AS PROVIDED] */
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
+        :root { --red: #E50914; --red-dark: #B20710; --black: #000000; --black-light: #0A0A0A; --black-card: #141414; --white: #FFFFFF; --gray: #808080; --gray-light: #B3B3B3; --gray-dark: #1A1A1A; --green: #00C853; --orange: #FF9800; }
+        body.light-theme { --black: #FFFFFF; --black-light: #F5F5F5; --black-card: #EEEEEE; --white: #000000; --gray: #666666; --gray-light: #444444; --gray-dark: #E0E0E0; }
+        html, body { background: var(--black); color: var(--white); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
+        ::-webkit-scrollbar { width: 0; height: 0; }
+
+        .auth-page { position: fixed; inset: 0; background: var(--black); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
+        .auth-page.hidden { display: none; }
+        .auth-box { width: 100%; max-width: 360px; text-align: center; }
+        .auth-logo { width: 90px; height: 90px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 20px; box-shadow: 0 15px 50px rgba(229,9,20,0.5); color: white; }
+        .auth-title { font-size: 32px; font-weight: 900; margin-bottom: 6px; }
+        .auth-title span { color: var(--red); }
+        .auth-subtitle { font-size: 14px; color: var(--gray); margin-bottom: 30px; }
+        .auth-form { background: var(--black-card); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 28px 24px; }
+        .profile-upload { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
+        .profile-preview { width: 100px; height: 100px; border-radius: 50%; background: var(--gray-dark); border: 3px solid var(--red); object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--gray); overflow: hidden; }
+        .profile-preview img { width: 100%; height: 100%; object-fit: cover; }
+        .profile-upload-btn { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--red); border: 3px solid var(--black-card); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
+        .auth-input-group { margin-bottom: 16px; text-align: left; }
+        .auth-label { font-size: 12px; color: var(--gray-light); margin-bottom: 8px; display: block; font-weight: 500; }
+        .auth-input { width: 100%; height: 54px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 0 18px; color: var(--white); font-size: 16px; transition: all 0.2s; }
+        .auth-input:focus { outline: none; border-color: var(--red); background: rgba(229,9,20,0.05); }
+        .auth-input::placeholder { color: var(--gray); }
+        .auth-btn { width: 100%; height: 56px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border: none; border-radius: 16px; color: white; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 8px; box-shadow: 0 8px 30px rgba(229,9,20,0.4); transition: all 0.2s; }
+        .auth-btn:active { transform: scale(0.98); }
+        .auth-skip { width: 100%; height: 50px; background: transparent; border: 2px solid rgba(255,255,255,0.2); border-radius: 16px; color: var(--gray-light); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; }
+        .auth-switch { margin-top: 20px; font-size: 14px; color: var(--gray); }
+        .auth-switch a { color: var(--red); text-decoration: none; font-weight: 600; }
+        .auth-error { color: var(--red); font-size: 13px; margin-top: 12px; display: none; }
+        .auth-error.show { display: block; }
+        .app-container { display: none; padding-bottom: 80px; }
+        .app-container.show { display: block; }
+        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(180deg, transparent 0%, var(--black) 20%); padding: 10px 20px 20px; z-index: 100; }
+        .nav-bar { display: flex; justify-content: space-around; align-items: center; background: var(--black-card); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; height: 56px; padding: 0 10px; }
+        .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--gray); text-decoration: none; font-size: 10px; font-weight: 500; padding: 8px 20px; border-radius: 14px; transition: all 0.2s; cursor: pointer; }
+        .nav-item i { font-size: 20px; }
+        .nav-item.active { color: var(--red); background: rgba(229,9,20,0.1); }
+        .header { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 70%, transparent 100%); display: flex; align-items: center; justify-content: center; padding: 0 16px; z-index: 100; }
+        .logo { display: flex; align-items: center; gap: 10px; }
+        .logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 4px 20px rgba(229,9,20,0.5); color: white; }
+        .logo-text { font-size: 24px; font-weight: 900; letter-spacing: -1px; }
+        .logo-text span { color: var(--red); }
+        .header-btn { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
+        .header-btn.search { right: 16px; }
+        .header-btn:active { transform: scale(0.95); background: var(--red); }
+        .search-overlay { position: fixed; inset: 0; background: var(--black); z-index: 200; padding: 16px; transform: translateY(-100%); opacity: 0; transition: all 0.3s ease; }
+        .search-overlay.show { transform: translateY(0); opacity: 1; }
+        .search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
+        .search-input { flex: 1; height: 52px; background: var(--gray-dark); border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 0 20px; color: var(--white); font-size: 16px; }
+        .search-input:focus { outline: none; border-color: var(--red); }
+        .search-input::placeholder { color: var(--gray); }
+        .search-close { width: 52px; height: 52px; border-radius: 16px; background: var(--red); border: none; color: white; font-size: 20px; cursor: pointer; }
+        .search-results { height: calc(100vh - 100px); overflow-y: auto; }
+        .search-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--black-card); border-radius: 16px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.05); }
+        .search-item img { width: 55px; height: 82px; border-radius: 10px; object-fit: cover; background: var(--gray-dark); }
+        .search-item-info { flex: 1; }
+        .search-item-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
+        .search-item-meta { font-size: 13px; color: var(--gray); }
+        .search-item-badge { padding: 4px 10px; background: var(--red); border-radius: 6px; font-size: 11px; font-weight: 600; color: white; }
+        .page { display: none; padding-top: 56px; }
+        .page.active { display: block; }
+        .hero-slider { position: relative; width: 100%; height: 220px; overflow: hidden; }
+        .hero-slides { display: flex; transition: transform 0.5s ease; height: 100%; }
+        .hero-slide { min-width: 100%; height: 100%; position: relative; }
+        .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
+        .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 5%, transparent 50%, rgba(0,0,0,0.4) 100%); }
+        .hero-content { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 2; }
+        .hero-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: white; }
+        .hero-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gray-light); }
+        .hero-rating { color: #FFD700; }
+        .hero-rating i { margin-right: 4px; }
+        .hero-vip-badge { background: linear-gradient(135deg, var(--orange), #FF5722); padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; color: white; }
+        .slider-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
+        .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; cursor: pointer; }
+        .slider-dot.active { width: 24px; border-radius: 4px; background: var(--red); }
+        .category-section { padding: 20px 0 10px; }
+        .category-header { padding: 0 16px; margin-bottom: 14px; }
+        .category-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+        .category-title::before { content: ''; width: 4px; height: 20px; background: var(--red); border-radius: 2px; }
+        .movie-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 10px; scroll-snap-type: x mandatory; }
+        .movie-card { flex-shrink: 0; width: 115px; scroll-snap-align: start; cursor: pointer; position: relative; }
+        .movie-card:active { transform: scale(0.96); }
+        .movie-poster { position: relative; width: 100%; height: 170px; border-radius: 14px; overflow: hidden; background: var(--gray-dark); border: 1px solid rgba(255,255,255,0.05); }
+        .movie-poster img { width: 100%; height: 100%; object-fit: cover; }
+        .movie-poster::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70%; background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 100%); }
+        .movie-title-overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 2; font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: white; }
+        .movie-vip-tag { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, var(--orange), #FF5722); padding: 4px 8px; border-radius: 6px; font-size: 9px; font-weight: 700; z-index: 3; color: white; }
+        .movie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px; }
+        .movie-grid .movie-card { width: 100%; }
+        .movie-grid .movie-poster { height: 160px; }
+        .details-page { position: fixed; inset: 0; background: var(--black); z-index: 300; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
+        .details-page.show { transform: translateX(0); }
+        .details-backdrop { position: relative; width: 100%; height: 260px; }
+        .details-backdrop img { width: 100%; height: 100%; object-fit: cover; }
+        .details-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 60%, var(--black) 100%); }
+        .back-btn { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); color: white; font-size: 18px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
+        .movie-info-card { position: relative; margin: -80px 16px 0; display: flex; gap: 16px; z-index: 5; }
+        .detail-poster { width: 130px; height: 195px; border-radius: 16px; overflow: hidden; flex-shrink: 0; box-shadow: 0 15px 40px rgba(0,0,0,0.8); border: 2px solid rgba(255,255,255,0.1); }
+        .detail-poster img { width: 100%; height: 100%; object-fit: cover; }
+        .detail-info { flex: 1; padding-top: 50px; min-width: 0; }
+        .detail-logo { max-width: 100%; max-height: 45px; margin-bottom: 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
+        .detail-title { font-size: 18px; font-weight: 800; line-height: 1.2; margin-bottom: 10px; }
+        .detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+        .badge { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.1); }
+        .badge.lang { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: white; }
+        .badge.vip { background: linear-gradient(135deg, var(--orange), #FF5722); color: white; }
+        .badge.series { background: linear-gradient(135deg, #2196F3, #1976D2); color: white; }
+        .detail-rating { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
+        .detail-rating i { color: #FFD700; font-size: 14px; }
+        .details-content { padding: 24px 16px 40px; }
+        .action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
+        .action-btn { height: 54px; border-radius: 16px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s; color: white; }
+        .action-btn:active { transform: scale(0.97); }
+        .action-btn.trailer { background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 4px 20px rgba(229,9,20,0.3); }
+        .action-btn.download-btn { background: var(--gray-dark); border: 2px solid rgba(255,255,255,0.15); }
+        .floating-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 500; display: none; align-items: center; justify-content: center; padding: 16px; }
+        .floating-modal.show { display: flex; }
+        .floating-box { width: 100%; max-width: 380px; background: linear-gradient(180deg, var(--black-card) 0%, var(--black) 100%); border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); animation: floatIn 0.3s ease; box-shadow: 0 25px 60px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto; }
+        @keyframes floatIn { from { opacity: 0; transform: scale(0.9) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+        .floating-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: linear-gradient(135deg, var(--red), var(--red-dark)); position: sticky; top: 0; z-index: 10; }
+        .floating-title { font-size: 17px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 12px; color: white; }
+        .floating-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.3); border: none; color: white; font-size: 16px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+        .floating-content { padding: 20px; }
+        .floating-movie-info { display: flex; align-items: center; gap: 14px; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 16px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); }
+        .floating-movie-poster { width: 60px; height: 90px; border-radius: 10px; object-fit: cover; background: var(--gray-dark); }
+        .floating-movie-details { flex: 1; }
+        .floating-movie-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
+        .floating-movie-meta { font-size: 12px; color: var(--gray-light); }
+        .quality-section-title { font-size: 14px; font-weight: 600; color: var(--gray-light); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+        .quality-section-title i { color: var(--red); }
+        .quality-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; margin-bottom: 12px; }
+        .quality-badge-box { min-width: 65px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; text-align: center; color: white; }
+        .quality-badge-box.q1080 { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
+        .quality-badge-box.q720 { background: linear-gradient(135deg, #FF6B00, #FF8C00); }
+        .quality-badge-box.q480 { background: linear-gradient(135deg, #FFC107, #FF9800); color: black; }
+        .quality-info { flex: 1; }
+        .quality-label { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
+        .quality-desc { font-size: 11px; color: var(--gray); }
+        .quality-actions { display: flex; gap: 8px; }
+        .quality-action-btn { width: 44px; height: 44px; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all 0.2s; color: white; }
+        .quality-action-btn:active { transform: scale(0.9); }
+        .quality-action-btn.play-btn { background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 4px 15px rgba(229,9,20,0.4); }
+        .quality-action-btn.download-link-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
+        .no-links-message { text-align: center; padding: 30px 20px; color: var(--gray); }
+        .no-links-message i { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
+        
+        .season-tabs-container { margin-bottom: 16px; overflow-x: auto; padding-bottom: 5px; }
+        .season-tabs { display: flex; gap: 10px; }
+        .season-tab { padding: 8px 16px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--gray-light); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 0.2s; }
+        .season-tab.active { background: var(--red); color: white; border-color: var(--red); }
+        .episodes-list { display: flex; flex-direction: column; gap: 10px; }
+        .episode-card { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,0.05); }
+        .episode-info { display: flex; align-items: center; gap: 12px; }
+        .episode-number { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--white); }
+        .episode-title { font-size: 14px; font-weight: 600; color: var(--white); }
+        .episode-play-btn { width: 36px; height: 36px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 14px; cursor: pointer; }
+
+        .section-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
+        .section-title i { color: var(--red); font-size: 15px; }
+        .storyline-section { margin-bottom: 28px; }
+        .storyline-text { font-size: 14px; line-height: 1.8; color: var(--gray-light); }
+        .cast-section { margin-bottom: 28px; }
+        .cast-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; }
+        .cast-item { flex-shrink: 0; text-align: center; cursor: pointer; }
+        .cast-photo { width: 75px; height: 75px; border-radius: 16px; object-fit: cover; background: var(--gray-dark); border: 2px solid rgba(255,255,255,0.1); }
+        .cast-name { font-size: 12px; color: var(--gray-light); margin-top: 8px; max-width: 75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .similar-section { margin-bottom: 28px; }
+        .similar-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
+        .similar-card { flex-shrink: 0; width: 120px; cursor: pointer; }
+        .similar-poster { width: 100%; height: 170px; border-radius: 14px; object-fit: cover; background: var(--gray-dark); margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.05); }
+        .similar-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .similar-meta { font-size: 11px; color: var(--gray); margin-top: 3px; }
+        .comments-section { margin-bottom: 20px; }
+        .comment-input-box { display: flex; gap: 12px; margin-bottom: 18px; }
+        .comment-input { flex: 1; height: 50px; background: var(--gray-dark); border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 0 16px; color: var(--white); font-size: 14px; }
+        .comment-input:focus { outline: none; border-color: var(--red); }
+        .comment-input::placeholder { color: var(--gray); }
+        .comment-send { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border: none; color: white; font-size: 18px; cursor: pointer; }
+        .comments-list { max-height: 350px; overflow-y: auto; }
+        .comment-item { padding: 16px; background: rgba(255,255,255,0.03); border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.05); }
+        .comment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+        .comment-user { font-size: 14px; font-weight: 600; color: var(--red); }
+        .comment-time { font-size: 11px; color: var(--gray); }
+        .comment-text { font-size: 14px; color: var(--gray-light); line-height: 1.5; }
+        
+        .settings-header { padding: 20px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
+        .settings-title { font-size: 22px; font-weight: 700; }
+        .settings-section { padding: 16px; }
+        .settings-section-title { font-size: 13px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-left: 4px; }
+        .settings-card { background: var(--black-card); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
+        .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
+        .settings-item:last-child { border-bottom: none; }
+        .settings-item-left { display: flex; align-items: center; gap: 14px; }
+        .settings-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
+        .settings-icon.red { background: rgba(229,9,20,0.2); color: var(--red); }
+        .settings-icon.blue { background: rgba(33,150,243,0.2); color: #2196F3; }
+        .settings-icon.green { background: rgba(0,200,83,0.2); color: var(--green); }
+        .settings-icon.orange { background: rgba(255,152,0,0.2); color: var(--orange); }
+        .settings-icon.purple { background: rgba(156,39,176,0.2); color: #9C27B0; }
+        .settings-item-info { flex: 1; }
+        .settings-item-title { font-size: 15px; font-weight: 600; }
+        .settings-item-desc { font-size: 12px; color: var(--gray); margin-top: 2px; }
+        .toggle-switch { width: 52px; height: 28px; background: var(--gray-dark); border-radius: 14px; position: relative; cursor: pointer; transition: all 0.3s; }
+        .toggle-switch.active { background: var(--red); }
+        .toggle-switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: white; border-radius: 50%; top: 3px; left: 3px; transition: all 0.3s; }
+        .toggle-switch.active::after { left: 27px; }
+        .settings-arrow { color: var(--gray); font-size: 14px; }
+        .profile-header { padding: 30px 16px; text-align: center; background: linear-gradient(180deg, var(--black-card) 0%, var(--black) 100%); border-bottom: 1px solid rgba(255,255,255,0.05); }
+        .profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--gray-dark); margin: 0 auto 16px; overflow: hidden; border: 4px solid var(--red); box-shadow: 0 10px 30px rgba(229,9,20,0.3); }
+        .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
+        .profile-avatar i { font-size: 40px; color: var(--gray); line-height: 92px; }
+        .profile-name { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
+        .profile-email { font-size: 14px; color: var(--gray); margin-bottom: 16px; }
+        .profile-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: 600; }
+        .profile-badge.free { background: rgba(0,200,83,0.2); color: var(--green); }
+        .profile-badge.vip { background: linear-gradient(135deg, var(--orange), #FF5722); color: white; }
+        .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 16px; }
+        .profile-stat { background: var(--black-card); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 16px; text-align: center; }
+        .profile-stat-value { font-size: 24px; font-weight: 800; color: var(--red); }
+        .profile-stat-label { font-size: 12px; color: var(--gray); margin-top: 4px; }
+        .profile-section { padding: 0 16px 20px; }
+        .profile-card { background: var(--black-card); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px; overflow: hidden; }
+        .profile-item { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; }
+        .profile-item:last-child { border-bottom: none; }
+        .profile-item:active { background: rgba(255,255,255,0.05); }
+        .profile-item-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(229,9,20,0.2); color: var(--red); }
+        .profile-item-text { flex: 1; font-size: 15px; font-weight: 500; }
+        .profile-item-arrow { color: var(--gray); }
+        .upgrade-btn { width: 100%; height: 56px; background: linear-gradient(135deg, var(--orange), #FF5722); border: none; border-radius: 16px; color: white; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; box-shadow: 0 8px 30px rgba(255,152,0,0.3); }
+        .logout-profile-btn { width: 100%; height: 54px; background: rgba(229,9,20,0.1); border: 2px solid var(--red); border-radius: 16px; color: var(--red); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px; }
+        .payment-page { position: fixed; inset: 0; background: var(--black); z-index: 400; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s ease; }
+        .payment-page.show { transform: translateX(0); }
+        .payment-header { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--black-card); border-bottom: 1px solid rgba(255,255,255,0.05); }
+        .payment-back { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+        .payment-title { font-size: 18px; font-weight: 700; }
+        .payment-content { padding: 20px 16px; }
+        .plan-cards { margin-bottom: 24px; }
+        .plan-card { background: var(--black-card); border: 2px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 20px; margin-bottom: 16px; cursor: pointer; transition: all 0.2s; }
+        .plan-card.selected { border-color: var(--orange); background: rgba(255,152,0,0.1); }
+        .plan-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+        .plan-name { font-size: 18px; font-weight: 700; }
+        .plan-price { font-size: 24px; font-weight: 800; color: var(--orange); }
+        .plan-duration { font-size: 12px; color: var(--gray); }
+        .plan-features { margin-top: 12px; }
+        .plan-feature { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-light); margin-bottom: 8px; }
+        .plan-feature i { color: var(--green); font-size: 12px; }
+        .qr-section { background: var(--black-card); border-radius: 20px; padding: 20px; text-align: center; margin-bottom: 24px; }
+        .qr-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
+        .qr-image { width: 180px; height: 180px; background: white; border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+        .qr-image img { width: 100%; height: 100%; object-fit: contain; }
+        .qr-image i { font-size: 60px; color: var(--gray); }
+        .upi-info { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
+        .upi-label { font-size: 11px; color: var(--gray); margin-bottom: 4px; }
+        .upi-value { font-size: 15px; font-weight: 600; }
+        .payment-form { background: var(--black-card); border-radius: 20px; padding: 20px; margin-bottom: 24px; }
+        .payment-form-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
+        .payment-input-group { margin-bottom: 16px; }
+        .payment-label { font-size: 12px; color: var(--gray-light); margin-bottom: 8px; display: block; }
+        .payment-input { width: 100%; height: 52px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 0 16px; color: var(--white); font-size: 15px; }
+        .payment-input:focus { outline: none; border-color: var(--red); }
+        .screenshot-upload { width: 100%; border: 2px dashed rgba(255,255,255,0.2); border-radius: 16px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.2s; }
+        .screenshot-upload:hover { border-color: var(--red); }
+        .screenshot-upload i { font-size: 40px; color: var(--gray); margin-bottom: 12px; }
+        .screenshot-upload p { font-size: 14px; color: var(--gray-light); }
+        .screenshot-preview { width: 100%; max-height: 200px; object-fit: contain; border-radius: 12px; margin-top: 12px; display: none; }
+        .screenshot-preview.show { display: block; }
+        .submit-payment-btn { width: 100%; height: 56px; background: linear-gradient(135deg, var(--orange), #FF5722); border: none; border-radius: 16px; color: white; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
+        .contact-section { background: var(--black-card); border-radius: 20px; padding: 20px; }
+        .contact-title { font-size: 14px; color: var(--gray); margin-bottom: 16px; }
+        .contact-links { display: flex; gap: 12px; }
+        .contact-link { flex: 1; height: 50px; border-radius: 14px; border: none; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; color: white; }
+        .contact-link.whatsapp { background: #25D366; }
+        .contact-link.telegram { background: #0088CC; }
+        .policy-page { position: fixed; inset: 0; background: var(--black); z-index: 450; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s ease; }
+        .policy-page.show { transform: translateX(0); }
+        .policy-header { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--black-card); border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 10; }
+        .policy-content { padding: 20px 16px; }
+        .policy-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
+        .policy-section { margin-bottom: 24px; }
+        .policy-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--red); }
+        .policy-section p { font-size: 14px; color: var(--gray-light); line-height: 1.8; }
+        .app-lock-overlay { position: fixed; inset: 0; background: var(--black); z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
+        .app-lock-overlay.show { display: flex; }
+        .lock-icon { width: 100px; height: 100px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 24px; color: white; }
+        .lock-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
+        .lock-subtitle { font-size: 14px; color: var(--gray); margin-bottom: 30px; }
+        .pin-dots { display: flex; gap: 16px; margin-bottom: 30px; }
+        .pin-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.2s; }
+        .pin-dot.filled { background: var(--red); }
+        .pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 280px; }
+        .pin-key { width: 70px; height: 70px; border-radius: 50%; background: var(--black-card); border: 2px solid rgba(255,255,255,0.1); color: white; font-size: 28px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
+        .pin-key:active { background: var(--red); border-color: var(--red); }
+        .pin-key.empty { visibility: hidden; }
+        .pin-key.backspace { font-size: 22px; }
+        .toast { position: fixed; top: 70px; left: 16px; right: 16px; padding: 16px 20px; border-radius: 14px; font-size: 14px; font-weight: 500; text-align: center; z-index: 700; transform: translateY(-100px); opacity: 0; transition: all 0.3s; }
+        .toast.show { transform: translateY(0); opacity: 1; }
+        .toast.success { background: linear-gradient(135deg, #00C853, #00E676); color: black; }
+        .toast.error { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: white; }
+        .empty-state { text-align: center; padding: 40px 20px; color: var(--gray); }
+        .empty-state i { font-size: 50px; margin-bottom: 16px; opacity: 0.3; }
+        .loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+        .spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.1); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .vip-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 550; display: none; align-items: center; justify-content: center; padding: 20px; }
+        .vip-modal.show { display: flex; }
+        .vip-modal-box { width: 100%; max-width: 340px; background: var(--black-card); border-radius: 24px; padding: 30px 24px; text-align: center; animation: floatIn 0.3s ease; border: 1px solid rgba(255,255,255,0.1); }
+        .vip-modal-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--orange), #FF5722); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 20px; color: white; }
+        .vip-modal-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
+        .vip-modal-text { font-size: 14px; color: var(--gray-light); margin-bottom: 24px; line-height: 1.6; }
+        .vip-modal-btn { width: 100%; height: 54px; background: linear-gradient(135deg, var(--orange), #FF5722); border: none; border-radius: 16px; color: white; font-size: 16px; font-weight: 700; cursor: pointer; margin-bottom: 12px; }
+        .vip-modal-close { width: 100%; height: 50px; background: transparent; border: 2px solid rgba(255,255,255,0.2); border-radius: 16px; color: var(--gray-light); font-size: 15px; font-weight: 600; cursor: pointer; }
+        
+        .player-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 600; display: none; align-items: center; justify-content: center; padding: 16px; }
+        .player-modal.show { display: flex; }
+        .player-box { width: 100%; max-width: 450px; background: var(--black-card); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); animation: floatIn 0.3s ease; }
+        .player-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); }
+        .player-title { font-size: 15px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 12px; }
+        .player-close { width: 38px; height: 38px; border-radius: 50%; background: var(--red); border: none; color: white; font-size: 16px; cursor: pointer; }
+        .player-video { width: 100%; aspect-ratio: 16/9; background: var(--black); }
+        .player-video iframe { width: 100%; height: 100%; border: none; }
+        
+        .cast-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 400; display: none; align-items: center; justify-content: center; padding: 20px; }
+        .cast-modal.show { display: flex; }
+        .cast-modal-box { text-align: center; animation: floatIn 0.3s ease; }
+        .cast-modal-photo { width: 220px; height: 220px; border-radius: 24px; object-fit: cover; margin-bottom: 20px; border: 4px solid var(--red); box-shadow: 0 20px 50px rgba(229,9,20,0.3); }
+        .cast-modal-name { font-size: 22px; font-weight: 700; }
+        .cast-modal-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--red); border: none; color: white; font-size: 20px; cursor: pointer; }
+    
+        .pro-player-modal { position: fixed; inset: 0; background: #000; z-index: 10000; display: none; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
+        .pro-player-modal.show { display: flex; }
+        .video-container { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }
+        .video-container video { width: 100%; height: 100%; object-fit: contain; }
+        .spinner-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; display: none; pointer-events: none; }
+        .spinner-player { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top: 5px solid #ff0000; border-radius: 50%; animation: spinPlayer 1s linear infinite; }
+        @keyframes spinPlayer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .controls-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; justify-content: space-between; opacity: 1; transition: opacity 0.3s ease; z-index: 10; }
+        .controls-layer.hide { opacity: 0; pointer-events: none; }
+        .top-bar-player { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); }
+        .back-btn-player { font-size: 28px; cursor: pointer; color: white; }
+        .video-title-player { color: white; font-size: 14px; font-weight: 600; }
+        .center-controls-player { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 60px; }
+        .control-btn-player { color: white; background: rgba(0,0,0,0.3); border-radius: 50%; padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
+        .control-btn-player:active { transform: scale(0.9); background: rgba(255,255,255,0.2); }
+        .play-btn-player { width: 70px; height: 70px; background: rgba(0,0,0,0.5); }
+        .play-btn-player i { font-size: 40px; }
+        .skip-btn-player { width: 50px; height: 50px; position: relative; }
+        .skip-btn-player i { font-size: 28px; }
+        .skip-btn-player span { position: absolute; font-size: 10px; font-weight: bold; top: 22px; }
+        .left-controls-player { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 40px; }
+        .side-btn-player { color: white; display: flex; flex-direction: column; align-items: center; font-size: 10px; cursor: pointer; opacity: 0.9; }
+        .side-btn-player i { font-size: 24px; margin-bottom: 5px; }
+        .bottom-bar-player { padding: 20px 25px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; display: flex; flex-direction: column; gap: 5px; }
+        .time-row-player { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; padding: 0 5px; }
+        .progress-container-player { width: 100%; height: 20px; display: flex; align-items: center; cursor: pointer; position: relative; }
+        .progress-bg-player { height: 4px; width: 100%; background: rgba(255,255,255,0.3); border-radius: 2px; position: absolute; }
+        .progress-fill-player { height: 4px; background-color: #ff0000; width: 0%; border-radius: 2px; position: absolute; left: 0; z-index: 2; }
+        .progress-thumb-player { position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; background: #ff0000; border-radius: 50%; transform: scale(1); transition: transform 0.1s; box-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 3; }
+        .progress-container-player:active .progress-thumb-player { transform: scale(1.3); }
+        .gesture-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); color: white; padding: 15px 25px; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 18px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 20; }
+        .lock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; display: none; }
+        .lock-btn-float { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ff0000; cursor: pointer; }
+    </style>
+</head>
+<body>
+    <!-- [HTML STRUCTURE REMAINS EXACTLY AS PROVIDED IN USER.HTML] -->
+    <!-- ... (Auth Page, App Lock, App Container, Header, Search, Home, Settings, Profile, Details, Player Modals) ... -->
+    <!-- I will inject the script logic at the bottom to handle the Admin Panel's data structure -->
+
+    <div class="auth-page" id="authPage">
+        <div class="auth-box">
+            <div class="auth-logo"><i class="fas fa-play"></i></div>
+            <h1 class="auth-title">Tamilan <span>TV</span></h1>
+            <p class="auth-subtitle" id="authSubtitle">Create your account</p>
+            <div class="auth-form">
+                <div id="signupForm">
+                    <div class="profile-upload">
+                        <div class="profile-preview" id="profilePreview"><i class="fas fa-user"></i></div>
+                        <label class="profile-upload-btn" for="profileInput"><i class="fas fa-camera"></i></label>
+                        <input type="file" id="profileInput" accept="image/*" style="display:none" onchange="handleProfileUpload(event)">
+                    </div>
+                    <div class="auth-input-group"><label class="auth-label">Full Name</label><input type="text" class="auth-input" id="signupName" placeholder="Enter your name"></div>
+                    <div class="auth-input-group"><label class="auth-label">Email</label><input type="email" class="auth-input" id="signupEmail" placeholder="Enter your email"></div>
+                    <div class="auth-input-group"><label class="auth-label">Password</label><input type="password" class="auth-input" id="signupPassword" placeholder="Create password"></div>
+                    <button class="auth-btn" onclick="handleSignup()"><i class="fas fa-user-plus"></i> Sign Up</button>
+                    <button class="auth-skip" onclick="skipAuth()">Skip for now</button>
+                    <p class="auth-switch">Already have an account? <a href="#" onclick="showLogin()">Login</a></p>
+                </div>
+                <div id="loginForm" style="display:none">
+                    <div class="auth-input-group"><label class="auth-label">Email</label><input type="email" class="auth-input" id="loginEmail" placeholder="Enter your email"></div>
+                    <div class="auth-input-group"><label class="auth-label">Password</label><input type="password" class="auth-input" id="loginPassword" placeholder="Enter password"></div>
+                    <button class="auth-btn" onclick="handleLogin()"><i class="fas fa-sign-in-alt"></i> Login</button>
+                    <button class="auth-skip" onclick="skipAuth()">Skip for now</button>
+                    <p class="auth-switch">Don't have an account? <a href="#" onclick="showSignup()">Sign Up</a></p>
+                </div>
+                <p class="auth-error" id="authError">Error message</p>
+            </div>
+        </div>
+    </div>
+    <div class="app-lock-overlay" id="appLockOverlay">
+        <div class="lock-icon"><i class="fas fa-lock"></i></div>
+        <h2 class="lock-title">Enter PIN</h2>
+        <p class="lock-subtitle">Enter your 4-digit PIN to unlock</p>
+        <div class="pin-dots"><div class="pin-dot" id="pinDot1"></div><div class="pin-dot" id="pinDot2"></div><div class="pin-dot" id="pinDot3"></div><div class="pin-dot" id="pinDot4"></div></div>
+        <div class="pin-keypad">
+            <button class="pin-key" onclick="enterPin(1)">1</button><button class="pin-key" onclick="enterPin(2)">2</button><button class="pin-key" onclick="enterPin(3)">3</button>
+            <button class="pin-key" onclick="enterPin(4)">4</button><button class="pin-key" onclick="enterPin(5)">5</button><button class="pin-key" onclick="enterPin(6)">6</button>
+            <button class="pin-key" onclick="enterPin(7)">7</button><button class="pin-key" onclick="enterPin(8)">8</button><button class="pin-key" onclick="enterPin(9)">9</button>
+            <button class="pin-key empty"></button><button class="pin-key" onclick="enterPin(0)">0</button><button class="pin-key backspace" onclick="deletePin()"><i class="fas fa-backspace"></i></button>
+        </div>
+    </div>
+    <div class="app-container" id="appContainer">
+        <header class="header">
+            <div class="logo"><div class="logo-icon"><i class="fas fa-play"></i></div><div class="logo-text">Tamilan <span>TV</span></div></div>
+            <button class="header-btn search" onclick="openSearch()"><i class="fas fa-search"></i></button>
+        </header>
+        <div class="search-overlay" id="searchOverlay">
+            <div class="search-bar"><input type="text" class="search-input" id="searchInput" placeholder="Search movies..."><button class="search-close" onclick="closeSearch()"><i class="fas fa-times"></i></button></div>
+            <div class="search-results" id="searchResults"></div>
+        </div>
+        <div class="page active" id="homePage">
+            <div class="hero-slider" id="heroSlider"><div class="hero-slides" id="heroSlides"></div><div class="slider-dots" id="sliderDots"></div></div>
+            <section class="category-section" id="recentSection"><div class="category-header"><h2 class="category-title">Recent Uploads</h2></div><div class="movie-scroll" id="recentMovies"></div></section>
+            <section class="category-section" id="hollywoodSection" style="display:none"><div class="category-header"><h2 class="category-title">Hollywood</h2></div><div class="movie-scroll" id="hollywoodMovies"></div></section>
+            <section class="category-section" id="bollywoodSection" style="display:none"><div class="category-header"><h2 class="category-title">Bollywood</h2></div><div class="movie-scroll" id="bollywoodMovies"></div></section>
+            <section class="category-section" id="southSection" style="display:none"><div class="category-header"><h2 class="category-title">South Indian</h2></div><div class="movie-scroll" id="southMovies"></div></section>
+            <section class="category-section"><div class="category-header"><h2 class="category-title">All Content</h2></div><div class="movie-grid" id="allMovies"><div class="loading"><div class="spinner"></div></div></div></section>
+        </div>
+        <div class="page" id="settingsPage">
+            <div class="settings-header"><h1 class="settings-title">Settings</h1></div>
+            <div class="settings-section"><div class="settings-section-title">Appearance</div><div class="settings-card"><div class="settings-item"><div class="settings-item-left"><div class="settings-icon blue"><i class="fas fa-moon"></i></div><div class="settings-item-info"><div class="settings-item-title">Dark Theme</div><div class="settings-item-desc">Enable dark mode</div></div></div><div class="toggle-switch active" id="themeToggle" onclick="toggleTheme()"></div></div></div></div>
+            <div class="settings-section"><div class="settings-section-title">Security</div><div class="settings-card"><div class="settings-item"><div class="settings-item-left"><div class="settings-icon red"><i class="fas fa-lock"></i></div><div class="settings-item-info"><div class="settings-item-title">App Lock</div><div class="settings-item-desc">Protect app with PIN</div></div></div><div class="toggle-switch" id="appLockToggle" onclick="toggleAppLock()"></div></div></div></div>
+            <div class="settings-section"><div class="settings-section-title">About</div><div class="settings-card"><div class="settings-item" onclick="openPrivacyPolicy()"><div class="settings-item-left"><div class="settings-icon green"><i class="fas fa-shield-alt"></i></div><div class="settings-item-info"><div class="settings-item-title">Privacy Policy</div><div class="settings-item-desc">Read our privacy policy</div></div></div><i class="fas fa-chevron-right settings-arrow"></i></div><div class="settings-item"><div class="settings-item-left"><div class="settings-icon purple"><i class="fas fa-info-circle"></i></div><div class="settings-item-info"><div class="settings-item-title">Version</div><div class="settings-item-desc">1.0.0</div></div></div></div></div></div>
+            <div class="settings-section"><div class="settings-section-title">Developer</div><div class="settings-card"><div class="settings-item" id="developerItem" onclick="openDeveloperLink()"><div class="settings-item-left"><div class="settings-icon red"><i class="fas fa-code"></i></div><div class="settings-item-info"><div class="settings-item-title" id="devNameDisplay">Tamilcinemagorup</div><div class="settings-item-desc">App Developer</div></div></div><i class="fab fa-telegram settings-arrow" style="color: #0088CC; font-size: 20px;"></i></div></div></div>
+        </div>
+        <div class="page" id="profilePage">
+            <div class="profile-header"><div class="profile-avatar" id="profileAvatar"><i class="fas fa-user"></i></div><h2 class="profile-name" id="profileName">Guest User</h2><p class="profile-email" id="profileEmail">Not logged in</p><span class="profile-badge free" id="profileBadge"><i class="fas fa-user"></i> FREE</span></div>
+            <div class="profile-stats" id="vipStats" style="display:none"><div class="profile-stat"><div class="profile-stat-value" id="vipDaysLeft">0</div><div class="profile-stat-label">Days Left</div></div><div class="profile-stat"><div class="profile-stat-value" id="vipPlan">-</div><div class="profile-stat-label">Current Plan</div></div></div>
+            <div class="profile-section">
+                <div class="profile-card"><div class="profile-item" onclick="openPaymentPage()"><div class="profile-item-icon"><i class="fas fa-crown"></i></div><span class="profile-item-text">Upgrade to VIP</span><i class="fas fa-chevron-right profile-item-arrow"></i></div><div class="profile-item" id="editProfileBtn" style="display:none"><div class="profile-item-icon"><i class="fas fa-user-edit"></i></div><span class="profile-item-text">Edit Profile</span><i class="fas fa-chevron-right profile-item-arrow"></i></div></div>
+                <button class="logout-profile-btn" id="logoutBtn" style="display:none" onclick="handleLogout()"><i class="fas fa-sign-out-alt"></i> Logout</button>
+                <button class="auth-btn" id="loginBtn" style="margin-top:20px" onclick="showAuthPage()"><i class="fas fa-sign-in-alt"></i> Login / Sign Up</button>
+            </div>
+        </div>
+        <nav class="bottom-nav"><div class="nav-bar"><div class="nav-item active" onclick="switchPage('home')"><i class="fas fa-home"></i><span>Home</span></div><div class="nav-item" onclick="switchPage('settings')"><i class="fas fa-cog"></i><span>Settings</span></div><div class="nav-item" onclick="switchPage('profile')"><i class="fas fa-user"></i><span>Profile</span></div></div></nav>
+    </div>
+    <div class="details-page" id="detailsPage">
+        <div class="details-backdrop"><img src="" alt="" id="detailBackdrop"><button class="back-btn" onclick="closeDetails()"><i class="fas fa-arrow-left"></i></button></div>
+        <div class="movie-info-card"><div class="detail-poster"><img src="" alt="" id="detailPoster"></div><div class="detail-info"><img src="" alt="" class="detail-logo" id="detailLogo"><h1 class="detail-title" id="detailTitle"></h1><div class="detail-badges" id="detailBadges"></div><div class="detail-rating"><i class="fas fa-star"></i><span id="detailRating"></span></div></div></div>
+        <div class="details-content">
+            <div class="action-buttons" id="movieActions"><button class="action-btn trailer" onclick="playTrailer()"><i class="fas fa-play-circle"></i> Trailer</button><button class="action-btn download-btn" onclick="openFloatingModal()"><i class="fas fa-play"></i> Play/Download</button></div>
+            <div id="seriesSection" style="display:none; margin-bottom: 24px;"><div class="action-buttons"><button class="action-btn trailer" style="width:100%" onclick="playTrailer()"><i class="fas fa-play-circle"></i> Trailer</button></div><h3 class="section-title"><i class="fas fa-layer-group"></i> Episodes</h3><div class="season-tabs-container"><div class="season-tabs" id="seasonTabs"></div></div><div class="episodes-list" id="episodesList"></div></div>
+            <div class="storyline-section"><h3 class="section-title"><i class="fas fa-align-left"></i> Storyline</h3><p class="storyline-text" id="detailStoryline"></p></div>
+            <div class="cast-section"><h3 class="section-title"><i class="fas fa-users"></i> Top Billed Cast</h3><div class="cast-scroll" id="detailCast"></div></div>
+            <div class="similar-section"><h3 class="section-title"><i class="fas fa-film"></i> Similar Content</h3><div class="similar-scroll" id="detailSimilar"></div></div>
+            <div class="comments-section"><h3 class="section-title"><i class="fas fa-comments"></i> Comments</h3><div class="comment-input-box"><input type="text" class="comment-input" id="commentInput" placeholder="Write a comment..."><button class="comment-send" onclick="postComment()"><i class="fas fa-paper-plane"></i></button></div><div class="comments-list" id="commentsList"></div></div>
+        </div>
+    </div>
+    <div class="floating-modal" id="floatingModal" onclick="closeFloatingOnOverlay(event)"><div class="floating-box"><div class="floating-header"><span class="floating-title">Select Quality</span><button class="floating-close" onclick="closeFloatingModal()"><i class="fas fa-times"></i></button></div><div class="floating-content"><div class="floating-movie-info"><img src="" alt="" class="floating-movie-poster" id="floatingPoster"><div class="floating-movie-details"><div class="floating-movie-title" id="floatingMovieTitle"></div><div class="floating-movie-meta" id="floatingMovieMeta"></div></div></div><div class="quality-section-title"><i class="fas fa-cog"></i> Select Quality</div><div id="qualityOptions"></div></div></div></div>
+    <div class="player-modal" id="playerModal" onclick="closePlayerOnOverlay(event)"><div class="player-box"><div class="player-header"><span class="player-title" id="playerTitle">Trailer</span><button class="player-close" onclick="closePlayer()"><i class="fas fa-times"></i></button></div><div class="player-video" id="playerVideo"></div></div></div>
+    <div class="pro-player-modal" id="proPlayerModal"><div class="video-container" id="videoContainer"><video id="mainVideo" playsinline preload="auto"><source src="" type="video/mp4"></video><div class="spinner-container" id="loadingSpinner"><div class="spinner-player"></div></div><div class="controls-layer" id="controlsLayer"><div class="top-bar-player"><div class="top-left"><i class="material-icons back-btn-player" onclick="closeVideoPlayer()">arrow_back</i></div><div class="video-title-player" id="playerVideoTitle">Playing Video</div></div><div class="left-controls-player"><div class="side-btn-player" id="lockBtn"><i class="material-icons">lock_open</i><span>Lock</span></div><div class="side-btn-player" id="resizeBtn"><i class="material-icons">aspect_ratio</i><span>Fit</span></div></div><div class="center-controls-player"><div class="control-btn-player skip-btn-player" id="rewindBtn"><i class="material-icons">replay_10</i></div><div class="control-btn-player play-btn-player" id="playPauseBtn"><i class="material-icons">play_arrow</i></div><div class="control-btn-player skip-btn-player" id="forwardBtn"><i class="material-icons">forward_10</i></div></div><div class="bottom-bar-player"><div class="time-row-player"><span id="currentTime">00:00</span><span id="duration">00:00</span></div><div class="progress-container-player" id="progressBar"><div class="progress-bg-player"></div><div class="progress-fill-player" id="progressFill"><div class="progress-thumb-player"></div></div></div></div></div><div class="lock-overlay" id="lockOverlay"><div class="lock-btn-float" id="unlockBtn"><i class="material-icons">lock</i></div></div><div class="gesture-feedback" id="gestureFeedback"><i class="material-icons" id="gestureIcon">brightness_high</i><span id="gestureValue">50%</span></div></div></div>
+    <div class="cast-modal" id="castModal" onclick="closeCastOnOverlay(event)"><button class="cast-modal-close" onclick="closeCastModal()"><i class="fas fa-times"></i></button><div class="cast-modal-box"><img src="" alt="" class="cast-modal-photo" id="castModalPhoto"><div class="cast-modal-name" id="castModalName"></div></div></div>
+    <div class="vip-modal" id="vipModal"><div class="vip-modal-box"><div class="vip-modal-icon"><i class="fas fa-crown"></i></div><h3 class="vip-modal-title">VIP Content</h3><p class="vip-modal-text">This content is available for VIP members only. Upgrade now to enjoy unlimited access!</p><button class="vip-modal-btn" onclick="closeVipModal(); openPaymentPage();"><i class="fas fa-crown"></i> Upgrade to VIP</button><button class="vip-modal-close" onclick="closeVipModal()">Maybe Later</button></div></div>
+    <div class="payment-page" id="paymentPage">
+        <div class="payment-header"><button class="payment-back" onclick="closePaymentPage()"><i class="fas fa-arrow-left"></i></button><h1 class="payment-title">Upgrade to VIP</h1></div>
+        <div class="payment-content">
+            <div class="plan-cards" id="planCards"></div>
+            <div class="qr-section"><h3 class="qr-title">Scan QR Code to Pay</h3><div class="qr-image" id="qrImage"><i class="fas fa-qrcode"></i></div><div class="upi-info"><div class="upi-label">UPI ID</div><div class="upi-value" id="upiIdDisplay">Loading...</div></div><div class="upi-info"><div class="upi-label">Name</div><div class="upi-value" id="upiNameDisplay">Loading...</div></div></div>
+            <div class="payment-form"><h3 class="payment-form-title">Submit Payment Proof</h3><div class="payment-input-group"><label class="payment-label">UTR / Transaction Number</label><input type="text" class="payment-input" id="utrInput" placeholder="Enter UTR number"></div><div class="payment-input-group"><label class="payment-label">Payment Screenshot</label><div class="screenshot-upload" onclick="document.getElementById('screenshotInput').click()"><i class="fas fa-cloud-upload-alt"></i><p>Tap to upload screenshot</p></div><input type="file" id="screenshotInput" accept="image/*" style="display:none" onchange="handleScreenshotUpload(event)"><img src="" alt="" class="screenshot-preview" id="screenshotPreview"></div><button class="submit-payment-btn" onclick="submitPayment()"><i class="fas fa-paper-plane"></i> Submit for Approval</button></div>
+            <div class="contact-section"><div class="contact-title">Need help? Contact us</div><div class="contact-links"><a href="#" class="contact-link whatsapp" id="whatsappLink"><i class="fab fa-whatsapp"></i> WhatsApp</a><a href="#" class="contact-link telegram" id="telegramLink"><i class="fab fa-telegram"></i> Telegram</a></div></div>
+        </div>
+    </div>
+    <div class="policy-page" id="policyPage"><div class="policy-header"><button class="payment-back" onclick="closePrivacyPolicy()"><i class="fas fa-arrow-left"></i></button><h1 class="payment-title">Privacy Policy</h1></div><div class="policy-content"><h2 class="policy-title">Privacy Policy</h2><div class="policy-section"><h3>Information We Collect</h3><p>We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support.</p></div></div></div>
+    <div class="toast" id="toast"></div>
+
+    <!-- Firebase SDK -->
+    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>
+
+    <script>
+        // Firebase Config
+        
+
+        firebase.initializeApp(firebaseConfig);
+        const db = firebase.database();
+        const moviesRef = db.ref('movies');
+        const usersRef = db.ref('users');
+        const commentsRef = db.ref('comments');
+        const subscriptionsRef = db.ref('subscriptions');
+        const paymentRequestsRef = db.ref('paymentRequests');
+        const settingsRef = db.ref('settings');
+
+        // State & Variables
+        let allMovies = [];
+        let currentMovie = null;
+        let currentUser = null;
+        let currentSlide = 0;
+        let sliderInterval = null;
+        let selectedPlanId = null;
+        let uploadedProfileImage = null;
+        let uploadedScreenshot = null;
+        let enteredPin = '';
+        let appLockPin = null;
+        let videoSaveInterval = null;
+
+        // Pro Player Variables
+        const playerContainer = document.getElementById('videoContainer');
+        const video = document.getElementById('mainVideo');
+        const controls = document.getElementById('controlsLayer');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const progressFill = document.getElementById('progressFill');
+        const progressBar = document.getElementById('progressBar');
+        const currentTimeEl = document.getElementById('currentTime');
+        const durationEl = document.getElementById('duration');
+        const lockBtn = document.getElementById('lockBtn');
+        const unlockBtn = document.getElementById('unlockBtn');
+        const resizeBtn = document.getElementById('resizeBtn');
+        const rewindBtn = document.getElementById('rewindBtn');
+        const forwardBtn = document.getElementById('forwardBtn');
+        const lockOverlay = document.getElementById('lockOverlay');
+        let isPlaying = false;
+        let isLocked = false;
+        let isControlsVisible = true;
+        let hideControlsTimer;
+        let isDragging = false; 
+
+        // --- PRO PLAYER INITIALIZATION ---
+        playPauseBtn.addEventListener('click', (e) => { e.stopPropagation(); togglePlayerPlay(); });
+        rewindBtn.addEventListener('click', (e) => { e.stopPropagation(); video.currentTime -= 10; resetControlsTimer(); });
+        forwardBtn.addEventListener('click', (e) => { e.stopPropagation(); video.currentTime += 10; resetControlsTimer(); });
+        video.addEventListener('waiting', () => loadingSpinner.style.display = 'block');
+        video.addEventListener('playing', () => loadingSpinner.style.display = 'none');
+        video.addEventListener('canplay', () => loadingSpinner.style.display = 'none');
+        video.addEventListener('timeupdate', () => {
+            if (!isDragging) {
+                const percent = (video.currentTime / video.duration) * 100;
+                progressFill.style.width = `${percent}%`;
+                currentTimeEl.textContent = formatVideoTime(video.currentTime);
+            }
+        });
+        video.addEventListener('loadedmetadata', () => { durationEl.textContent = formatVideoTime(video.duration || 0); });
+
+        function getScrubPercent(e) {
+            const rect = progressBar.getBoundingClientRect();
+            let clientX = e.clientX;
+            if(e.touches && e.touches.length > 0) clientX = e.touches[0].clientX;
+            let percent = (clientX - rect.left) / rect.width;
+            return Math.max(0, Math.min(1, percent));
+        }
+
+        progressBar.addEventListener('touchstart', (e) => {
+            isDragging = true; resetControlsTimer();
+            const percent = getScrubPercent(e);
+            progressFill.style.width = `${percent * 100}%`;
+            currentTimeEl.textContent = formatVideoTime(percent * video.duration);
+        }, {passive: false});
+
+        progressBar.addEventListener('touchmove', (e) => {
+            if (isDragging) { e.preventDefault(); const percent = getScrubPercent(e); progressFill.style.width = `${percent * 100}%`; currentTimeEl.textContent = formatVideoTime(percent * video.duration); }
+        }, {passive: false});
+
+        progressBar.addEventListener('touchend', (e) => {
+            if (isDragging) { const percent = getScrubPercent(e.changedTouches[0] ? {clientX: e.changedTouches[0].clientX} : e); video.currentTime = percent * video.duration; isDragging = false; }
+        });
+
+        playerContainer.addEventListener('click', () => {
+            if (isLocked) { lockOverlay.style.display = 'block'; setTimeout(() => { if(isLocked) lockOverlay.style.display = 'none'; }, 2000); return; }
+            if (isControlsVisible) hideControls(); else showControls();
+        });
+
+        lockBtn.addEventListener('click', (e) => { e.stopPropagation(); isLocked = true; controls.classList.add('hide'); lockOverlay.style.display = 'block'; setTimeout(() => lockOverlay.style.display = 'none', 1000); });
+        unlockBtn.addEventListener('click', (e) => { e.stopPropagation(); isLocked = false; lockOverlay.style.display = 'none'; showControls(); });
+
+        let resizeIndex = 0;
+        const resizeModes = [ { mode: 'contain', icon: 'aspect_ratio', text: 'Best Fit' }, { mode: 'cover', icon: 'crop_free', text: 'Zoom' }, { mode: 'fill', icon: 'settings_overscan', text: 'Stretch' } ];
+        resizeBtn.addEventListener('click', (e) => {
+            e.stopPropagation(); resizeIndex = (resizeIndex + 1) % resizeModes.length;
+            const settings = resizeModes[resizeIndex];
+            video.style.objectFit = settings.mode;
+            resizeBtn.querySelector('i').innerText = settings.icon;
+            resizeBtn.querySelector('span').innerText = settings.text;
+            showFeedback(settings.icon, settings.text);
+            resetControlsTimer();
+        });
+
+        // Gestures
+        let touchStartY = 0; let touchStartX = 0; let isGestureActive = false; let gestureType = ''; let startVolume = 1; let currentBrightness = 100;
+        const feedbackEl = document.getElementById('gestureFeedback'); const feedbackIcon = document.getElementById('gestureIcon'); const feedbackVal = document.getElementById('gestureValue');
+
+        playerContainer.addEventListener('touchstart', (e) => {
+            if (isLocked || isDragging) return;
+            if (e.target.closest('.bottom-bar-player') || e.target.closest('.center-controls-player')) return;
+            touchStartY = e.touches[0].clientY; touchStartX = e.touches[0].clientX; startVolume = video.volume; isGestureActive = false;
+        }, {passive: false});
+
+        playerContainer.addEventListener('touchmove', (e) => {
+            if (isLocked || isDragging || !touchStartY) return;
+            const touchY = e.touches[0].clientY; const deltaY = touchStartY - touchY;
+            if (Math.abs(deltaY) > 10 && !isGestureActive) { isGestureActive = true; if (touchStartX > window.innerWidth / 2) gestureType = 'volume'; else gestureType = 'brightness'; }
+            if (isGestureActive) {
+                e.preventDefault(); const percentChange = deltaY / window.innerHeight;
+                if (gestureType === 'volume') {
+                    let newVol = startVolume + (percentChange * 2); newVol = Math.max(0, Math.min(1, newVol)); video.volume = newVol;
+                    showFeedback(newVol === 0 ? 'volume_off' : 'volume_up', Math.round(newVol * 100) + '%');
+                } else {
+                    currentBrightness = currentBrightness + (percentChange * 100); currentBrightness = Math.max(20, Math.min(100, currentBrightness));
+                    video.style.filter = `brightness(${currentBrightness}%)`;
+                    showFeedback('brightness_medium', Math.round(currentBrightness) + '%');
+                }
+            }
+        }, {passive: false});
+
+        playerContainer.addEventListener('touchend', () => { isGestureActive = false; touchStartY = 0; setTimeout(() => feedbackEl.style.opacity = '0', 300); });
+
+        function togglePlayerPlay() { if (video.paused) { video.play(); playPauseBtn.innerHTML = '<i class="material-icons">pause</i>'; isPlaying = true; } else { video.pause(); playPauseBtn.innerHTML = '<i class="material-icons">play_arrow</i>'; isPlaying = false; } resetControlsTimer(); }
+        function showControls() { controls.classList.remove('hide'); isControlsVisible = true; if(isPlaying) resetControlsTimer(); }
+        function hideControls() { if(!video.paused && !isDragging) { controls.classList.add('hide'); isControlsVisible = false; } }
+        function resetControlsTimer() { clearTimeout(hideControlsTimer); hideControlsTimer = setTimeout(hideControls, 3000); }
+        function formatVideoTime(seconds) { if (isNaN(seconds)) return "00:00"; const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60); return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`; }
+        function showFeedback(icon, text) { feedbackEl.style.opacity = '1'; feedbackIcon.innerText = icon; feedbackVal.innerText = text; }
+
+        // --- AUTH & APP LOGIC ---
+        function checkAuth() {
+            const userData = localStorage.getItem('nhbox_user'); const skipAuth = localStorage.getItem('nhbox_skip_auth');
+            if (userData) { currentUser = JSON.parse(userData); showApp(); loadUserData(); } else if (skipAuth) { showApp(); } else { document.getElementById('authPage').classList.remove('hidden'); }
+            checkAppLock();
+        }
+        function showApp() { document.getElementById('authPage').classList.add('hidden'); document.getElementById('appContainer').classList.add('show'); updateProfileUI(); }
+        function showLogin() { document.getElementById('signupForm').style.display = 'none'; document.getElementById('loginForm').style.display = 'block'; document.getElementById('authSubtitle').textContent = 'Welcome back!'; }
+        function showSignup() { document.getElementById('loginForm').style.display = 'none'; document.getElementById('signupForm').style.display = 'block'; document.getElementById('authSubtitle').textContent = 'Create your account'; }
+        function showAuthPage() { document.getElementById('authPage').classList.remove('hidden'); document.getElementById('appContainer').classList.remove('show'); }
+        async function handleSignup() {
+            const name = document.getElementById('signupName').value.trim(); const email = document.getElementById('signupEmail').value.trim(); const password = document.getElementById('signupPassword').value.trim();
+            if (!name || !email || !password) { showAuthError('Please fill all fields'); return; }
+            try { const userId = 'user_' + Date.now(); const userData = { id: userId, name: name, email: email, password: password, profileImage: uploadedProfileImage || '', isVip: false, createdAt: Date.now() }; await usersRef.child(userId).set(userData); currentUser = userData; localStorage.setItem('nhbox_user', JSON.stringify(userData)); showApp(); showToast('Account created successfully!', 'success'); } catch (err) { showAuthError('Failed to create account'); }
+        }
+        async function handleLogin() {
+            const email = document.getElementById('loginEmail').value.trim(); const password = document.getElementById('loginPassword').value.trim();
+            if (!email || !password) { showAuthError('Please fill all fields'); return; }
+            try { const snapshot = await usersRef.orderByChild('email').equalTo(email).once('value'); const users = snapshot.val(); if (users) { const userId = Object.keys(users)[0]; const user = users[userId]; if (user.password === password) { currentUser = { id: userId, ...user }; localStorage.setItem('nhbox_user', JSON.stringify(currentUser)); showApp(); showToast('Welcome back!', 'success'); } else { showAuthError('Invalid password'); } } else { showAuthError('User not found'); } } catch (err) { showAuthError('Login failed'); }
+        }
+        function skipAuth() { localStorage.setItem('nhbox_skip_auth', 'true'); showApp(); }
+        function handleLogout() { currentUser = null; localStorage.removeItem('nhbox_user'); localStorage.removeItem('nhbox_skip_auth'); updateProfileUI(); showToast('Logged out successfully', 'success'); }
+        function showAuthError(msg) { const el = document.getElementById('authError'); el.textContent = msg; el.classList.add('show'); setTimeout(() => el.classList.remove('show'), 3000); }
+        function handleProfileUpload(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const maxSize = 200; let width = img.width; let height = img.height; if (width > height) { if (width > maxSize) { height *= maxSize / width; width = maxSize; } } else { if (height > maxSize) { width *= maxSize / height; height = maxSize; } } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); uploadedProfileImage = canvas.toDataURL('image/jpeg', 0.7); document.getElementById('profilePreview').innerHTML = `<img src="${uploadedProfileImage}" alt="">`; }; img.src = e.target.result; }; reader.readAsDataURL(file); }
+        function loadUserData() { if (!currentUser) return; usersRef.child(currentUser.id).on('value', (snap) => { const data = snap.val(); if (data) { currentUser = { id: currentUser.id, ...data }; localStorage.setItem('nhbox_user', JSON.stringify(currentUser)); updateProfileUI(); } }); }
+        
+        function updateProfileUI() {
+            const avatarEl = document.getElementById('profileAvatar'); const nameEl = document.getElementById('profileName'); const emailEl = document.getElementById('profileEmail'); const badgeEl = document.getElementById('profileBadge'); const vipStatsEl = document.getElementById('vipStats'); const logoutBtn = document.getElementById('logoutBtn'); const loginBtn = document.getElementById('loginBtn'); const editBtn = document.getElementById('editProfileBtn');
+            if (currentUser) {
+                avatarEl.innerHTML = currentUser.profileImage ? `<img src="${currentUser.profileImage}" alt="">` : '<i class="fas fa-user"></i>';
+                nameEl.textContent = currentUser.name || 'User'; emailEl.textContent = currentUser.email || '';
+                if (currentUser.isVip && currentUser.vipExpiry > Date.now()) {
+                    badgeEl.className = 'profile-badge vip'; badgeEl.innerHTML = '<i class="fas fa-crown"></i> VIP'; vipStatsEl.style.display = 'grid';
+                    const daysLeft = Math.ceil((currentUser.vipExpiry - Date.now()) / (1000 * 60 * 60 * 24)); document.getElementById('vipDaysLeft').textContent = daysLeft; document.getElementById('vipPlan').textContent = currentUser.vipPlan || 'VIP';
+                } else { badgeEl.className = 'profile-badge free'; badgeEl.innerHTML = '<i class="fas fa-user"></i> FREE'; vipStatsEl.style.display = 'none'; }
+                logoutBtn.style.display = 'block'; loginBtn.style.display = 'none'; editBtn.style.display = 'flex';
+            } else {
+                avatarEl.innerHTML = '<i class="fas fa-user"></i>'; nameEl.textContent = 'Guest User'; emailEl.textContent = 'Not logged in'; badgeEl.className = 'profile-badge free'; badgeEl.innerHTML = '<i class="fas fa-user"></i> FREE'; vipStatsEl.style.display = 'none'; logoutBtn.style.display = 'none'; loginBtn.style.display = 'block'; editBtn.style.display = 'none';
+            }
+        }
+        
+        function checkAppLock() { appLockPin = localStorage.getItem('nhbox_app_lock'); if (appLockPin) { document.getElementById('appLockToggle').classList.add('active'); if (!sessionStorage.getItem('nhbox_unlocked')) { document.getElementById('appLockOverlay').classList.add('show'); } } }
+        function toggleAppLock() { const toggle = document.getElementById('appLockToggle'); if (appLockPin) { localStorage.removeItem('nhbox_app_lock'); appLockPin = null; toggle.classList.remove('active'); showToast('App lock disabled', 'success'); } else { const pin = prompt('Enter a 4-digit PIN:'); if (pin && pin.length === 4 && /^\d+$/.test(pin)) { localStorage.setItem('nhbox_app_lock', pin); appLockPin = pin; toggle.classList.add('active'); showToast('App lock enabled', 'success'); } else { showToast('Invalid PIN', 'error'); } } }
+        function enterPin(num) { if (enteredPin.length < 4) { enteredPin += num; updatePinDots(); if (enteredPin.length === 4) { setTimeout(checkPin, 200); } } }
+        function deletePin() { if (enteredPin.length > 0) { enteredPin = enteredPin.slice(0, -1); updatePinDots(); } }
+        function updatePinDots() { for (let i = 1; i <= 4; i++) { document.getElementById('pinDot' + i).classList.toggle('filled', i <= enteredPin.length); } }
+        function checkPin() { if (enteredPin === appLockPin) { sessionStorage.setItem('nhbox_unlocked', 'true'); document.getElementById('appLockOverlay').classList.remove('show'); enteredPin = ''; updatePinDots(); } else { showToast('Incorrect PIN', 'error'); enteredPin = ''; updatePinDots(); } }
+        function toggleTheme() { const toggle = document.getElementById('themeToggle'); const isDark = toggle.classList.contains('active'); if (isDark) { document.body.classList.add('light-theme'); toggle.classList.remove('active'); localStorage.setItem('nhbox_theme', 'light'); } else { document.body.classList.remove('light-theme'); toggle.classList.add('active'); localStorage.setItem('nhbox_theme', 'dark'); } }
+        function loadTheme() { const theme = localStorage.getItem('nhbox_theme'); if (theme === 'light') { document.body.classList.add('light-theme'); document.getElementById('themeToggle').classList.remove('active'); } }
+        function switchPage(page) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active')); document.getElementById(page + 'Page').classList.add('active'); event.currentTarget.classList.add('active'); }
+        function showToast(message, type = 'success') { const toast = document.getElementById('toast'); toast.textContent = message; toast.className = `toast ${type} show`; setTimeout(() => toast.classList.remove('show'), 3000); }
+
+        // --- MOVIES & SERIES LOGIC ---
+        function loadMovies() {
+            moviesRef.on('value', (snap) => {
+                const data = snap.val();
+                allMovies = data ? Object.entries(data).map(([id, m]) => ({ id, ...m })) : [];
+                allMovies.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+                renderHeroSlider(); renderCategories(); renderAllMovies();
+            });
+        }
+        
+        function renderHeroSlider() {
+            const featured = allMovies.filter(m => m.backdrop).slice(0, 5); const slidesEl = document.getElementById('heroSlides'); const dotsEl = document.getElementById('sliderDots');
+            if (featured.length === 0) { document.getElementById('heroSlider').style.display = 'none'; return; }
+            document.getElementById('heroSlider').style.display = 'block';
+            slidesEl.innerHTML = featured.map(m => `<div class="hero-slide" onclick="openDetails('${m.id}')"><img src="${m.backdrop}" alt="${m.title}"><div class="hero-content"><h2 class="hero-title">${m.title}</h2><div class="hero-meta"><span>${m.year || ''}</span><span class="hero-rating"><i class="fas fa-star"></i> ${m.rating || 'N/A'}</span>${m.type === 'series' ? '<span class="hero-vip-badge" style="background:var(--blue)">SERIES</span>' : ''}${m.access === 'vip' ? '<span class="hero-vip-badge">VIP</span>' : ''}</div></div></div>`).join('');
+            dotsEl.innerHTML = featured.map((_, i) => `<div class="slider-dot ${i === 0 ? 'active' : ''}" onclick="goToSlide(${i})"></div>`).join('');
+            startAutoSlide(featured.length);
+        }
+        
+        function startAutoSlide(count) { if (sliderInterval) clearInterval(sliderInterval); currentSlide = 0; sliderInterval = setInterval(() => { currentSlide = (currentSlide + 1) % count; updateSlider(); }, 4000); }
+        function goToSlide(index) { currentSlide = index; updateSlider(); }
+        function updateSlider() { document.getElementById('heroSlides').style.transform = `translateX(-${currentSlide * 100}%)`; document.querySelectorAll('.slider-dot').forEach((dot, i) => { dot.classList.toggle('active', i === currentSlide); }); }
+        
+        // ADAPTATION: Using toLowerCase() to match manual Admin categories
+        function renderCategories() {
+            const recent = allMovies.slice(0, 12); renderMovieRow('recentMovies', recent); document.getElementById('recentSection').style.display = recent.length ? 'block' : 'none';
+            const hollywood = allMovies.filter(m => m.category && m.category.toLowerCase().includes('hollywood')); renderMovieRow('hollywoodMovies', hollywood); document.getElementById('hollywoodSection').style.display = hollywood.length ? 'block' : 'none';
+            const bollywood = allMovies.filter(m => m.category && m.category.toLowerCase().includes('bollywood')); renderMovieRow('bollywoodMovies', bollywood); document.getElementById('bollywoodSection').style.display = bollywood.length ? 'block' : 'none';
+            const south = allMovies.filter(m => m.category && m.category.toLowerCase().includes('south indian')); renderMovieRow('southMovies', south); document.getElementById('southSection').style.display = south.length ? 'block' : 'none';
+        }
+        function renderMovieRow(containerId, movies) { document.getElementById(containerId).innerHTML = movies.map(m => createMovieCard(m)).join(''); }
+        function renderAllMovies() { const container = document.getElementById('allMovies'); if (allMovies.length === 0) { container.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-film"></i><p>No content available</p></div>'; return; } container.innerHTML = allMovies.map(m => createMovieCard(m)).join(''); }
+        function createMovieCard(m) { return `<div class="movie-card" onclick="openDetails('${m.id}')">${m.access === 'vip' ? '<div class="movie-vip-tag"><i class="fas fa-crown"></i> VIP</div>' : ''}${m.type === 'series' ? '<div class="movie-vip-tag" style="background:#2196F3; right:auto; left:8px;">SERIES</div>' : ''}<div class="movie-poster"><img src="${m.poster || ''}" alt="${m.title}" onerror="this.style.display='none'"><div class="movie-title-overlay">${m.title}</div></div></div>`; }
+        
+        function openSearch() { document.getElementById('searchOverlay').classList.add('show'); document.getElementById('searchInput').focus(); }
+        function closeSearch() { document.getElementById('searchOverlay').classList.remove('show'); document.getElementById('searchInput').value = ''; document.getElementById('searchResults').innerHTML = ''; }
+        document.getElementById('searchInput').addEventListener('input', function() {
+            const query = this.value.toLowerCase().trim(); const resultsEl = document.getElementById('searchResults');
+            if (!query) { resultsEl.innerHTML = ''; return; }
+            const filtered = allMovies.filter(m => (m.title && m.title.toLowerCase().includes(query)) || (m.category && m.category.toLowerCase().includes(query)));
+            if (filtered.length === 0) { resultsEl.innerHTML = '<div class="empty-state"><p>No results found</p></div>'; return; }
+            resultsEl.innerHTML = filtered.map(m => `<div class="search-item" onclick="openDetails('${m.id}'); closeSearch();"><img src="${m.poster || ''}" alt="${m.title}"><div class="search-item-info"><div class="search-item-title">${m.title}</div><div class="search-item-meta">${m.type === 'series' ? 'Series' : 'Movie'} • ${m.year || ''} • ${m.category || ''}</div></div><span class="search-item-badge">${m.rating || 'N/A'}</span></div>`).join('');
+        });
+        
+        // --- DETAILS & PLAYER LOGIC ---
+        function openDetails(id) {
+            currentMovie = allMovies.find(m => m.id === id); if (!currentMovie) return;
+            document.getElementById('detailBackdrop').src = currentMovie.backdrop || currentMovie.poster || ''; document.getElementById('detailPoster').src = currentMovie.poster || '';
+            const logoEl = document.getElementById('detailLogo'); const titleEl = document.getElementById('detailTitle');
+            if (currentMovie.logo) { logoEl.src = currentMovie.logo; logoEl.style.display = 'block'; titleEl.style.display = 'none'; } else { logoEl.style.display = 'none'; titleEl.style.display = 'block'; titleEl.textContent = currentMovie.title || ''; }
+            let badgesHtml = `<span class="badge lang">${currentMovie.language || 'N/A'}</span><span class="badge">${currentMovie.year || ''}</span>`;
+            if (currentMovie.access === 'vip') badgesHtml += '<span class="badge vip"><i class="fas fa-crown"></i> VIP</span>';
+            if (currentMovie.type === 'series') badgesHtml += '<span class="badge series">SERIES</span>';
+            document.getElementById('detailBadges').innerHTML = badgesHtml;
+            document.getElementById('detailRating').textContent = currentMovie.rating || 'N/A'; document.getElementById('detailStoryline').textContent = currentMovie.storyline || 'No storyline available.';
+            
+            // ADAPTATION: Handle Series vs Movie UI
+            if (currentMovie.type === 'series') {
+                document.getElementById('movieActions').style.display = 'none';
+                document.getElementById('seriesSection').style.display = 'block';
+                renderSeriesData(currentMovie.seasons || []);
+            } else {
+                document.getElementById('movieActions').style.display = 'grid';
+                document.getElementById('seriesSection').style.display = 'none';
+            }
+            renderCast(currentMovie.cast || []); renderSimilar(currentMovie.category, currentMovie.id); loadComments(id);
+            document.getElementById('detailsPage').classList.add('show'); document.body.style.overflow = 'hidden';
+        }
+        
+        function closeDetails() { document.getElementById('detailsPage').classList.remove('show'); document.body.style.overflow = ''; closeFloatingModal(); }
+        
+        function renderSeriesData(seasons) {
+            const tabsContainer = document.getElementById('seasonTabs'); const episodesContainer = document.getElementById('episodesList');
+            if (!seasons || seasons.length === 0) { tabsContainer.innerHTML = ''; episodesContainer.innerHTML = '<div style="color:var(--gray);text-align:center;">No episodes available</div>'; return; }
+            tabsContainer.innerHTML = seasons.map((s, index) => `<div class="season-tab ${index === 0 ? 'active' : ''}" onclick="switchSeason(${index}, this)">${s.name}</div>`).join('');
+            renderEpisodes(seasons[0]);
+        }
+
+        function switchSeason(index, element) {
+            document.querySelectorAll('.season-tab').forEach(tab => tab.classList.remove('active')); element.classList.add('active');
+            if (currentMovie && currentMovie.seasons && currentMovie.seasons[index]) { renderEpisodes(currentMovie.seasons[index]); }
+        }
+
+        function renderEpisodes(season) {
+            const container = document.getElementById('episodesList');
+            if (!season.episodes || season.episodes.length === 0) { container.innerHTML = '<div style="color:var(--gray);text-align:center;padding:10px;">No episodes in this season</div>'; return; }
+            container.innerHTML = season.episodes.map((ep, index) => `<div class="episode-card"><div class="episode-info"><div class="episode-number">${index + 1}</div><div class="episode-title">${ep.title || 'Episode ' + (index + 1)}</div></div><div class="episode-play-btn" onclick="openEpisodeQuality('${index}')"><i class="fas fa-play"></i></div></div>`).join('');
+            window.currentSeasonEpisodes = season.episodes;
+        }
+
+        // ADAPTATION: Map Admin Series Links to Player Expectation
+        function openEpisodeQuality(episodeIndex) {
+            const episode = window.currentSeasonEpisodes[episodeIndex];
+            if (!episode) return;
+            if (currentMovie.access === 'vip') {
+                if (!currentUser || !currentUser.isVip || (currentUser.vipExpiry && currentUser.vipExpiry <= Date.now())) {
+                    document.getElementById('vipModal').classList.add('show'); return;
+                }
+            }
+            document.getElementById('floatingPoster').src = currentMovie.poster || '';
+            document.getElementById('floatingMovieTitle').textContent = episode.title || `Episode ${parseInt(episodeIndex)+1}`;
+            document.getElementById('floatingMovieMeta').textContent = currentMovie.title;
+
+            // Admin saves series links as link1080/720/480, renderQualityOptions expects quality1080/720/480
+            const links = {
+                quality1080: episode.link1080,
+                quality720: episode.link720,
+                quality480: episode.link480
+            };
+            
+            renderQualityOptions(links);
+            document.getElementById('floatingModal').classList.add('show');
+        }
+
+        function renderCast(cast) {
+            const container = document.getElementById('detailCast');
+            if (!cast || cast.length === 0) { container.innerHTML = '<p style="color:var(--gray);font-size:13px;">No cast information</p>'; return; }
+            container.innerHTML = cast.map(c => `<div class="cast-item" onclick="openCastModal('${encodeURIComponent(c.photo || '')}', '${encodeURIComponent(c.name || '')}')"><img class="cast-photo" src="${c.photo || ''}" alt="${c.name}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 75 75%22><rect fill=%22%231a1a1a%22 width=%2275%22 height=%2275%22/></svg>'"><div class="cast-name">${c.name || 'Unknown'}</div></div>`).join('');
+        }
+        function openCastModal(photo, name) { const p = decodeURIComponent(photo); const n = decodeURIComponent(name); if (!p) return; document.getElementById('castModalPhoto').src = p; document.getElementById('castModalName').textContent = n; document.getElementById('castModal').classList.add('show'); }
+        function closeCastModal() { document.getElementById('castModal').classList.remove('show'); }
+        function closeCastOnOverlay(e) { if (e.target.id === 'castModal') closeCastModal(); }
+        
+        function renderSimilar(category, currentId) {
+            const container = document.getElementById('detailSimilar');
+            if(!category) { container.innerHTML = ''; return; }
+            const similar = allMovies.filter(m => m.category && m.category.toLowerCase() === category.toLowerCase() && m.id !== currentId).slice(0, 10);
+            if (similar.length === 0) { container.innerHTML = '<p style="color:var(--gray);font-size:13px;">No similar content</p>'; return; }
+            container.innerHTML = similar.map(m => `<div class="similar-card" onclick="openDetails('${m.id}')"><img class="similar-poster" src="${m.poster || ''}" alt="${m.title}"><div class="similar-title">${m.title}</div><div class="similar-meta">${m.year || ''}</div></div>`).join('');
+        }
+
+        function openFloatingModal() {
+            if (!currentMovie) return;
+            if (currentMovie.type === 'series') return; 
+            if (currentMovie.access === 'vip') {
+                if (!currentUser || !currentUser.isVip || (currentUser.vipExpiry && currentUser.vipExpiry <= Date.now())) {
+                    document.getElementById('vipModal').classList.add('show'); return;
+                }
+            }
+            document.getElementById('floatingPoster').src = currentMovie.poster || '';
+            document.getElementById('floatingMovieTitle').textContent = currentMovie.title || '';
+            document.getElementById('floatingMovieMeta').textContent = `${currentMovie.year || ''} • ${currentMovie.language || ''} • ⭐ ${currentMovie.rating || 'N/A'}`;
+            renderQualityOptions(currentMovie.links || {});
+            document.getElementById('floatingModal').classList.add('show');
+        }
+
+        function renderQualityOptions(links) {
+            const optionsEl = document.getElementById('qualityOptions'); let html = '';
+            if (links.quality1080) html += createQualityOption('1080', 'Full HD', '1080p • Best Quality', links.quality1080);
+            if (links.quality720) html += createQualityOption('720', 'HD', '720p • Good Quality', links.quality720);
+            if (links.quality480) html += createQualityOption('480', 'SD', '480p • Data Saver', links.quality480);
+            if (!html) { html = '<div class="no-links-message"><i class="fas fa-exclamation-circle"></i><p>No play links available</p></div>'; }
+            optionsEl.innerHTML = html;
+        }
+        function createQualityOption(quality, label, desc, url) { const qClass = quality === '1080' ? 'q1080' : (quality === '720' ? 'q720' : 'q480'); return `<div class="quality-option"><div class="quality-badge-box ${qClass}">${quality}p</div><div class="quality-info"><div class="quality-label">${label}</div><div class="quality-desc">${desc}</div></div><div class="quality-actions"><button class="quality-action-btn play-btn" onclick="playMovie('${url}')"><i class="fas fa-play"></i></button><button class="quality-action-btn download-link-btn" onclick="downloadMovie('${url}')"><i class="fas fa-download"></i></button></div></div>`; }
+        
+        async function playMovie(url) {
+            if (!url) { showToast('Link not available', 'error'); return; }
+            const videoElement = document.getElementById('mainVideo');
+            const handleMetadata = () => {
+                const savedTime = localStorage.getItem('resume_' + url);
+                if (savedTime) { const time = parseFloat(savedTime); if (!isNaN(time) && videoElement.duration && time < (videoElement.duration - 5)) { videoElement.currentTime = time; showToast('Resuming playback...', 'success'); } }
+                videoElement.removeEventListener('loadedmetadata', handleMetadata);
+            };
+            videoElement.addEventListener('loadedmetadata', handleMetadata);
+            videoElement.src = url;
+            if(currentMovie) { const episodeTitle = document.getElementById('floatingMovieTitle').textContent; document.getElementById('playerVideoTitle').textContent = episodeTitle || currentMovie.title; }
+            document.getElementById('proPlayerModal').classList.add('show');
+            if (videoSaveInterval) clearInterval(videoSaveInterval);
+            videoSaveInterval = setInterval(() => { if (!videoElement.paused && videoElement.currentTime > 5) { localStorage.setItem('resume_' + url, videoElement.currentTime); } }, 5000);
+            try {
+                await videoElement.play(); playPauseBtn.innerHTML = '<i class="material-icons">pause</i>'; isPlaying = true;
+                const container = document.getElementById('videoContainer');
+                if (container.requestFullscreen) await container.requestFullscreen(); else if (container.webkitRequestFullscreen) await container.webkitRequestFullscreen();
+                if (screen.orientation && screen.orientation.lock) { try { await screen.orientation.lock('landscape'); } catch (err) {} }
+            } catch (e) {}
+        }
+        
+        function closeVideoPlayer() {
+            const videoElement = document.getElementById('mainVideo');
+            if (videoElement.src && videoElement.currentTime > 5 && videoElement.duration && videoElement.currentTime < (videoElement.duration - 10)) { localStorage.setItem('resume_' + videoElement.src, videoElement.currentTime); } 
+            else if (videoElement.duration && videoElement.currentTime >= (videoElement.duration - 10)) { localStorage.removeItem('resume_' + videoElement.src); }
+            if (videoSaveInterval) { clearInterval(videoSaveInterval); videoSaveInterval = null; }
+            videoElement.pause(); videoElement.src = ""; document.getElementById('proPlayerModal').classList.remove('show'); isPlaying = false;
+            if (document.exitFullscreen) document.exitFullscreen().catch(e => {});
+            if (screen.orientation && screen.orientation.unlock) { screen.orientation.unlock(); }
+        }
+
+        function downloadMovie(url) { if (url) window.open(url, '_blank'); }
+        function closeFloatingModal() { document.getElementById('floatingModal').classList.remove('show'); }
+        function closeFloatingOnOverlay(e) { if (e.target.id === 'floatingModal') closeFloatingModal(); }
+        function closeVipModal() { document.getElementById('vipModal').classList.remove('show'); }
+        
+        function playTrailer() {
+            const trailer = currentMovie?.trailer;
+            if (!trailer) { showToast('Trailer not available', 'error'); return; }
+            let videoId = '';
+            if (trailer.includes('youtube.com/watch')) videoId = trailer.split('v=')[1]?.split('&')[0];
+            else if (trailer.includes('youtu.be/')) videoId = trailer.split('youtu.be/')[1]?.split('?')[0];
+            if (videoId) { document.getElementById('playerTitle').textContent = (currentMovie.title || 'Content') + ' - Trailer'; document.getElementById('playerVideo').innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`; document.getElementById('playerModal').classList.add('show'); } else { showToast('Invalid trailer URL', 'error'); }
+        }
+        function closePlayer() { document.getElementById('playerModal').classList.remove('show'); document.getElementById('playerVideo').innerHTML = ''; }
+        function closePlayerOnOverlay(e) { if (e.target.id === 'playerModal') closePlayer(); }
+
+        // --- EXTRAS ---
+        function loadComments(movieId) { commentsRef.child(movieId).on('value', (snap) => { const data = snap.val(); const comments = data ? Object.entries(data).map(([id, c]) => ({ id, ...c })) : []; comments.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0)); renderComments(comments); }); }
+        function renderComments(comments) { const container = document.getElementById('commentsList'); if (comments.length === 0) { container.innerHTML = '<p style="color:var(--gray);font-size:13px;text-align:center;padding:20px;">No comments yet</p>'; return; } container.innerHTML = comments.map(c => `<div class="comment-item"><div class="comment-header"><span class="comment-user">${c.user || 'Anonymous'}</span><span class="comment-time">${formatTime(c.timestamp)}</span></div><p class="comment-text">${escapeHtml(c.text)}</p></div>`).join(''); }
+        function postComment() { const input = document.getElementById('commentInput'); const text = input.value.trim(); if (!text || !currentMovie) return; const comment = { user: currentUser?.name || 'Guest', text: text, timestamp: Date.now() }; commentsRef.child(currentMovie.id).push(comment); input.value = ''; }
+        function formatTime(timestamp) { if (!timestamp) return ''; const diff = Date.now() - timestamp; const mins = Math.floor(diff / 60000); const hours = Math.floor(diff / 3600000); const days = Math.floor(diff / 86400000); if (mins < 1) return 'Just now'; if (mins < 60) return mins + 'm ago'; if (hours < 24) return hours + 'h ago'; return days + 'd ago'; }
+        function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }
+        function openPaymentPage() { loadSubscriptions(); loadPaymentSettings(); document.getElementById('paymentPage').classList.add('show'); }
+        function closePaymentPage() { document.getElementById('paymentPage').classList.remove('show'); }
+        function loadSubscriptions() { subscriptionsRef.once('value', (snap) => { const data = snap.val(); const plans = data ? Object.entries(data).map(([id, p]) => ({ id, ...p })) : []; const container = document.getElementById('planCards'); if (plans.length === 0) { container.innerHTML = '<p style="color:var(--gray);text-align:center;">No plans available</p>'; return; } container.innerHTML = plans.map((p, i) => `<div class="plan-card ${i === 0 ? 'selected' : ''}" onclick="selectPlan('${p.id}', this)"><div class="plan-header"><div><div class="plan-name">${p.name}</div><div class="plan-duration">${p.duration} Days</div></div><div class="plan-price">₹${p.price}</div></div><div class="plan-features">${(p.features || []).map(f => `<div class="plan-feature"><i class="fas fa-check"></i> ${f}</div>`).join('')}</div></div>`).join(''); if (plans.length > 0) selectedPlanId = plans[0].id; }); }
+        function selectPlan(planId, element) { selectedPlanId = planId; document.querySelectorAll('.plan-card').forEach(c => c.classList.remove('selected')); element.classList.add('selected'); }
+        function loadPaymentSettings() { settingsRef.child('payment').once('value', (snap) => { const data = snap.val(); if (data) { if (data.qrCode) { document.getElementById('qrImage').innerHTML = `<img src="${data.qrCode}" alt="QR">`; } document.getElementById('upiIdDisplay').textContent = data.upiId || 'N/A'; document.getElementById('upiNameDisplay').textContent = data.upiName || 'N/A'; if (data.whatsapp) { document.getElementById('whatsappLink').href = `https://wa.me/${data.whatsapp.replace(/\D/g, '')}`; } if (data.telegram) { document.getElementById('telegramLink').href = data.telegram; } } }); }
+        function handleScreenshotUpload(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const maxSize = 600; let width = img.width; let height = img.height; if (width > height) { if (width > maxSize) { height *= maxSize / width; width = maxSize; } } else { if (height > maxSize) { width *= maxSize / height; height = maxSize; } } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); uploadedScreenshot = canvas.toDataURL('image/jpeg', 0.7); const preview = document.getElementById('screenshotPreview'); preview.src = uploadedScreenshot; preview.classList.add('show'); }; img.src = e.target.result; }; reader.readAsDataURL(file); }
+        async function submitPayment() { if (!currentUser) { showToast('Please login first', 'error'); return; } if (!selectedPlanId) { showToast('Please select a plan', 'error'); return; } const utr = document.getElementById('utrInput').value.trim(); if (!utr) { showToast('Please enter UTR number', 'error'); return; } if (!uploadedScreenshot) { showToast('Please upload screenshot', 'error'); return; } try { await paymentRequestsRef.push({ userId: currentUser.id, subscriptionId: selectedPlanId, utrNumber: utr, screenshot: uploadedScreenshot, status: 'pending', createdAt: Date.now() }); showToast('Payment submitted for approval!', 'success'); closePaymentPage(); document.getElementById('utrInput').value = ''; document.getElementById('screenshotPreview').classList.remove('show'); uploadedScreenshot = null; } catch (err) { showToast('Failed to submit payment', 'error'); } }
+        function openPrivacyPolicy() { document.getElementById('policyPage').classList.add('show'); }
+        function closePrivacyPolicy() { document.getElementById('policyPage').classList.remove('show'); }
+        function openDeveloperLink() { window.open('https://t.me/htmlmovievg', '_blank'); }
+
+        loadTheme(); checkAuth(); loadMovies();
+        db.ref('.info/connected').on('value', (snap) => { if (snap.val() === true) { showToast('✓ Connected', 'success'); } });
+    </script>
+</body>
+</html>
\ No newline at end of file

No results found