<style>
    /* Desktop Styles (Default) */
    .sidebar { 
        width: 280px; 
        background: #1e3a8a; 
        color: white; 
        min-height: 100vh; 
        padding: 20px; 
        position: fixed; 
        top: 0;
        left: 0;
        z-index: 1000;
    }
    .main-content { 
        margin-left: 280px; 
        padding: 30px; 
        min-height: 100vh;
    }
    .nav-link { color: brown; padding: 12px 15px; border-radius: 8px; cursor: pointer; }
    .nav-link:hover, .nav-link.active { background: blue; }
    .subject-card { transition: all 0.3s; border: 1px solid #ddd; color: green; }
    .subject-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

    /* --- MOBILE RESPONSIVE CSS --- */
    @media (max-width: 768px) {
        .sidebar {
            width: 100%;
            min-height: auto;
            position: relative; /* Fixed se normal kar diya */
            padding: 15px;
            text-align: center;
        }

        .main-content {
            margin-left: 0; /* Sidebar ka gap khatam */
            padding: 15px;
            width: 100%;
            box-sizing: border-box; /* Padding ko width ke andar rakhne ke liye */
        }

        .nav {
            flex-direction: row !important; /* Menu items ko side-by-side dikhane ke liye */
            justify-content: center;
            flex-wrap: wrap;
            gap: 5px;
        }

        .nav-link {
            padding: 8px 12px;
            font-size: 0.9rem;
        }

        .user-info i {
            font-size: 3rem;
        }

        .user-info h4 {
            font-size: 1.2rem;
        }
    }
</style>