* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    background-color: #0d0d0d;
    color: #ffffff;
}
header {
    text-align: center;
    padding: 30px 20px 20px 20px;
    background: #121212;
    border-bottom: 2px solid #00ffcc;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}
header h1 {
    font-size: 2.5rem;
    color: #00ffcc;
    text-shadow: 0 0 10px #00ffcc;
    letter-spacing: 2px;
}
header p {
    color: #aaaaaa;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* Social Buttons */
.social-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.tele-btn { background: linear-gradient(45deg, #0088cc, #005580); box-shadow: 0 0 10px #0088cc; }
.yt-btn { background: linear-gradient(45deg, #ff0000, #990000); box-shadow: 0 0 10px #ff0000; }
.tele-btn:hover { box-shadow: 0 0 20px #0088cc; }
.yt-btn:hover { box-shadow: 0 0 20px #ff0000; }

/* Main Layout */
.main-container { display: flex; max-width: 1200px; margin: 30px auto; padding: 0 20px; gap: 25px; }

/* Sidebar */
.chapter-sidebar { width: 30%; background: #161616; padding: 20px; border-radius: 12px; border: 1px solid #262626; height: fit-content; }
.chapter-sidebar h3 { color: #00ffcc; margin-bottom: 15px; }
.chap-btn {
    width: 100%; padding: 12px 15px; background: #1f1f1f; color: #ffffff;
    border: 1px solid #333; border-radius: 8px; margin-bottom: 10px;
    text-align: left; cursor: pointer; font-size: 1rem; transition: 0.3s;
}
.chap-btn:hover, .chap-btn.active {
    background: #00ffcc; color: #000000; font-weight: bold;
    box-shadow: 0 0 15px #00ffcc; border-color: #00ffcc;
}

/* Daily Special Button */
.daily-btn { background: linear-gradient(45deg, #2b001a, #1a0033); border-color: #ff0077; color: #ff99cc; }
.daily-btn:hover, .daily-btn.active {
    background: linear-gradient(45deg, #ff0077, #aa00ff) !important; color: #ffffff !important;
    box-shadow: 0 0 20px #ff0077 !important; border-color: #ffffff !important;
}

/* Content Area */
.content-area { width: 70%; }
.chapter-content { display: none; }
.chapter-content.active-content { display: block; }
.chapter-content h2 { font-size: 1.8rem; margin-bottom: 20px; color: #0066ff; text-shadow: 0 0 5px rgba(0, 102, 255, 0.5); }

/* Cards */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: #161616; border: 1px solid #262626; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.video-card { grid-column: span 2; }
.video-controls { margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap;}
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; border: 1px solid #333; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* General Buttons */
.glow-btn {
    text-decoration: none; color: #fff; background: linear-gradient(45deg, #00ffcc, #0066ff);
    padding: 10px 20px; font-size: 1rem; font-weight: bold; border-radius: 25px;
    display: inline-block; transition: 0.3s; box-shadow: 0 0 10px #0066ff; border: none; cursor: pointer;
}
.glow-btn:hover { box-shadow: 0 0 20px #00ffcc; transform: scale(1.03); }
.small-btn { padding: 8px 15px; font-size: 0.9rem; }

.quiz-box { background: #222; padding: 15px; border-radius: 8px; margin-top: 10px; border: 1px solid #444; }

/* Mobile View */
@media (max-width: 768px) {
    .main-container { flex-direction: column; }
    .chapter-sidebar, .content-area { width: 100%; }
    .card-grid { grid-template-columns: 1fr; }
    .video-card { grid-column: span 1; }
}