/* 🌐 GLOBAL RESET */
body {
    margin:0;
    font-family:Arial, sans-serif;
    transition:0.3s;
}

/* =========================
   ☀️ LIGHT MODE (DEFAULT)
========================= */
body.light {
    background:#f5f5f5;
    color:#000;
}

body.light a { color:#000; }
body.light a:hover { color:#ff3b3b; }
body.light a:visited { color:#555; }

body.light .top-navbar { background:#fff; }
body.light .logo a,
body.light .top-menu a { color:#000; }

body.light .video-card,
body.light .dashboard-card { background:#fff; }

body.light .stat-box { background:#eaeaea; }

/* =========================
   🌙 DARK MODE
========================= */
body.dark {
    background:#0f0f0f;
    color:#fff;
}

body.dark a { color:#fff; }
body.dark a:hover { color:#ff3b3b; }
body.dark a:visited { color:#ccc; }

body.dark .top-navbar { background:#000; }

body.dark .video-card,
body.dark .dashboard-card { background:#1c1c1c; }

body.dark .stat-box { background:#222; }

/* =========================
   🔝 NAVBAR (FINAL FIX)
========================= */
.top-navbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 15px;
    position:sticky;
    top:0;
    z-index:1000;
}

/* LEFT */
.logo {
    flex:1;
}

.logo a {
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
}

/* CENTER MENU */
.top-menu {
    flex:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.top-menu a {
    text-decoration:none;
    font-size:14px;
    white-space:nowrap;
}

/* RIGHT SIDE */
.top-right {
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

/* 🌙 BUTTON */
.theme-btn {
    background:#222;
    color:#fff;
    border:none;
    padding:5px 10px;
    border-radius:5px;
    cursor:pointer;
}

/* ☰ MOBILE */
.menu-toggle {
    display:none;
    font-size:22px;
    cursor:pointer;
}

/* =========================
   🔽 DROPDOWN
========================= */
.dropdown {
    position:relative;
}

.dropbtn {
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
}

.dropdown-content {
    display:none;
    position:absolute;
    background:#222;
    min-width:160px;
    border-radius:5px;
    top:30px;
    overflow:hidden;
    z-index:999;
}

.dropdown-content a {
    display:block;
    padding:10px;
}

.dropdown:hover .dropdown-content {
    display:block;
}

/* =========================
   🎬 VIDEO PLAYER
========================= */
.video-player {
    position: relative;
    margin-bottom: 15px;
    background:#000;
    padding:10px;
    border-radius:10px;
}

video {
    width:100%;
    border-radius:8px;
}

/* =========================
   📢 ADS
========================= */
.player-ad {
    position:absolute;
    bottom:10px;
    left:10px;
    right:10px;
    z-index:10;
}

.banner-ad {
    margin:15px 0;
    text-align:center;
}

/* =========================
   🎬 GRID
========================= */
.video-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap:15px;
    padding:10px;
}

.video-card {
    padding:10px;
    border-radius:10px;
    transition:0.3s;
}

.video-card:hover {
    transform:translateY(-5px);
    box-shadow:0 0 15px rgba(255,0,0,0.4);
}

.video-card img {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:6px;
}

/* =========================
   📊 DASHBOARD
========================= */
.dashboard-card {
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

.stat-box {
    padding:10px;
    border-radius:8px;
    text-align:center;
}

/* status */
.approved { color:#00ff88; font-weight:bold; }
.pending { color:orange; font-weight:bold; }

/* =========================
   👤 PROFILE
========================= */
.profile-card img {
    border-radius:50%;
    border:2px solid #333;
}

.profile-card a {
    color:#00c3ff;
}
.profile-card a:hover {
    color:#ff3b3b;
}

/* =========================
   🔘 BUTTON
========================= */
button, .btn {
    background:red;
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:5px;
    cursor:pointer;
}

button:hover, .btn:hover {
    background:#ff3b3b;
}

/* =========================
   📱 MOBILE RESPONSIVE
========================= */
@media(max-width:768px){

    .top-navbar {
        flex-wrap:wrap;
    }

    .menu-toggle {
        display:block;
    }

    .top-menu {
        position:absolute;
        top:60px;
        right:0;
        width:100%;
        background:#111;
        flex-direction:column;
        align-items:flex-start;
        padding:15px;
        display:none;
    }

    .top-menu.active {
        display:flex;
    }

    .top-menu a {
        padding:10px 0;
        width:100%;
    }

    .dropdown-content {
        position:static;
        width:100%;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    }

    .video-card img {
        height:120px;
    }
}