* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

body {
    background: #f5f7fb;
}

/* Header */
.header {
    height: 70px;
    background: #0d47a1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}
.logo { font-size: 26px; font-weight: bold; }
.header-right { display: flex; align-items: center; gap: 15px; }
#darkBtn { background: #ffffff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 18px; }
#logoutBtn { background: #e53935; color: white; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; }

/* Login Box */
.login-box { width: 420px; background: #fff; margin: 40px auto; padding: 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.login-box h2 { text-align: center; margin-bottom: 20px; color: #0d47a1; font-weight: 700; }
.login-box input { width: 100%; padding: 12px; font-size: 18px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; }
.login-box button { width: 100%; padding: 12px; font-size: 18px; background: #0d47a1; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: .3s; }
.login-box button:hover { background: #1565c0; }

/* Student Information */
.student-info { display: none; background: #fff; margin: 20px; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.12); }
.student-info h4 { margin-bottom: 8px; }

/* Dashboard */
.dashboard { display: none; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 20px; }
.card-box { background: #fff; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,.1); }
.card-box h2 { font-size: 34px; color: #0d47a1; margin-bottom: 10px; }
.card-box p { margin: 0; font-size: 17px; }

/* Main Layout */
.main { display: none; grid-template-columns: 65% 35%; gap: 20px; padding: 20px; align-items: start; }

/* Left Panel */
.left-panel { background: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,.12); }

#courseFilter { width: 250px; padding: 10px; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; margin-bottom: 15px; }

.practice-btn { display: inline-block; margin-left: 10px; margin-bottom: 15px; padding: 10px 18px; background: #2e7d32; color: #fff; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; transition: .3s; }
.practice-btn:hover { background: #388e3c; }
.dark .practice-btn { background: #2e7d32; }

#player { width: 100%; height: 550px; border: none; border-radius: 10px; background: #000; }

.controls { margin-top: 15px; display: flex; justify-content: space-between; }
.controls button { padding: 10px 25px; background: #0d47a1; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; }
.controls button:hover { background: #1565c0; }

.progress { height: 8px; margin-top: 15px; background: #ddd; border-radius: 20px; overflow: hidden; }
#progressBar { width: 0%; height: 100%; background: #4CAF50; }

/* Right Playlist */
.right-panel { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,.12); height: 700px; overflow-y: auto; display: flex; flex-direction: column; }

#searchVideo { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 15px; outline: none; }
#searchVideo:focus { border: 1px solid #0d47a1; box-shadow: 0 0 5px rgba(13,71,161,.3); }

#playlistContainer { flex: 1; overflow-y: auto; }

.video-card { display: flex; gap: 12px; padding: 10px; margin-bottom: 12px; border-radius: 10px; background: #ffffff; cursor: pointer; transition: .3s; border: 1px solid #eee; }
.video-card:hover { background: #f5f8ff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,.12); }

.video-thumb { width: 140px; height: 80px; border-radius: 8px; object-fit: cover; background: #ddd; }

.video-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.video-title { font-size: 16px; font-weight: 600; color: #222; line-height: 1.3; }
.video-course { font-size: 13px; color: #666; margin-top: 4px; }

.video-actions { display: flex; gap: 8px; margin-top: 8px; }
.video-actions button { padding: 6px 10px; font-size: 12px; border: none; border-radius: 5px; cursor: pointer; }
.btn-note { background: #2196F3; color: white; }
.btn-fav { background: #ff9800; color: white; }
.btn-play { background: #0d47a1; color: white; }

.completed { display: inline-block; margin-top: 8px; padding: 4px 10px; background: #28a745; color: #fff; font-size: 12px; border-radius: 20px; font-weight: 600; }

/* Announcement Bar */
.notice { background: #fff3cd; color: #856404; padding: 12px 20px; font-size: 16px; font-weight: 600; border-bottom: 1px solid #ffeeba; }

/* Loading Screen */
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; color: #0d47a1; z-index: 9999; }

/* Dark Mode */
.dark { background: #121212; color: white; }
.dark .login-box, .dark .student-info, .dark .left-panel, .dark .right-panel, .dark .card-box { background: #1e1e1e; color: white; }
.dark .video-card { background: #2b2b2b; border: 1px solid #444; }
.dark .video-card:hover { background: #333; }
.dark input, .dark select { background: #2a2a2a; color: white; border: 1px solid #555; }
.dark .notice { background: #3b3200; color: #ffd54f; }

/* Subscribe */
.subscribe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: #FF0000; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; transition: .3s; }
.subscribe-btn:hover { background: #cc0000; color: white; transform: scale(1.05); }
.subscribe-box { margin-top: 25px; padding: 20px; text-align: center; border-top: 1px solid #ddd; }
.subscribe-box h4 { margin-bottom: 10px; font-weight: 700; color: #0d47a1; }
.subscribe-box p { font-size: 14px; color: #666; margin-bottom: 15px; }
.subscribe-big { display: block; width: 100%; padding: 14px; background: #FF0000; color: white; font-size: 20px; font-weight: bold; text-decoration: none; border-radius: 8px; transition: .3s; }
.subscribe-big:hover { background: #cc0000; color: white; transform: scale(1.02); }

/* Responsive */
@media (max-width: 992px) {
    .main { grid-template-columns: 1fr; }
    .right-panel { height: 400px; }
    .dashboard { grid-template-columns: repeat(2,1fr); }
    #player { height: 350px; }
}
@media (max-width: 768px) {
    .login-box { width: 95%; }
    .dashboard { grid-template-columns: 1fr; }
    .header { flex-direction: column; height: auto; padding: 15px; gap: 10px; }
    .logo { font-size: 22px; }
    #player { height: 240px; }
    .controls { flex-direction: column; gap: 10px; }
    .controls button { width: 100%; }
    .video-card { flex-direction: column; }
    .video-thumb { width: 100%; height: 180px; }
}