/* ---------- General Styles ---------- */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
body { background:#f8f9fa; color:#333; scroll-behavior:smooth; line-height:1.6; }
a { text-decoration:none; }

/* ---------- Navigation ---------- */
nav { background:rgba(255,255,255,0.95); box-shadow:0 2px 6px rgba(0,0,0,0.1); position:sticky; top:0; z-index:1000; padding:0 20px; }
.nav-container { display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; padding:12px 0; }
.logo { font-weight:700; font-size:1.2rem; color:#111; display:flex; align-items:center; }
.logo i { margin-right:8px; color:#f4a261; }
.nav-links { display:flex; list-style:none; gap:25px; }
.nav-links a { text-decoration:none; font-weight:600; color:#111; transition:color 0.3s; padding:8px 0; position:relative; }
.nav-links a.active, .nav-links a:hover { color:#f4a261; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:#f4a261; transition:width 0.3s; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.menu-toggle { display:none; flex-direction:column; justify-content:center; width:30px; height:25px; cursor:pointer; }
.menu-toggle span { height:3px; width:100%; background-color:#111; margin:2px 0; border-radius:5px; transition:all 0.3s; }
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px);}

@media (max-width:768px){
    .menu-toggle{display:flex;} 
    .nav-links{position:absolute;top:100%;left:0;width:100%;background:#fff;flex-direction:column;gap:0;padding:0 20px;box-shadow:0 5px 10px rgba(0,0,0,0.1);max-height:0;overflow:hidden;transition:max-height 0.4s ease;} 
    .nav-links.show{max-height:500px;} 
    .nav-links li{width:100%; border-bottom:1px solid #f0f0f0;} 
    .nav-links a{display:block; padding:15px 0;} 
    .nav-links a::after{display:none;} 
}

/* ---------- CMS Dashboard Styles ---------- */
.dashboard { max-width:1400px; margin:40px auto; padding:0 20px; }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.dashboard-title { font-size:2rem; font-weight:700; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin-bottom:40px; }
.stat-card { background:#fff; padding:25px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.05); }
.stat-card h3 { font-size:1rem; color:#666; margin-bottom:10px; }
.stat-card .value { font-size:2.2rem; font-weight:700; color:#f4a261; }
.stat-card .change { font-size:0.9rem; color:#4caf50; margin-top:5px; }

.tabs { display:flex; border-bottom:2px solid #eee; margin-bottom:20px; }
.tab { padding:12px 25px; cursor:pointer; font-weight:600; color:#777; transition:all 0.3s; }
.tab.active { color:#f4a261; border-bottom:3px solid #f4a261; }

.content-section { background:#fff; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.05); padding:25px; margin-bottom:30px; }
.content-section h2 { font-size:1.4rem; margin-bottom:20px; }

table { width:100%; border-collapse:collapse; }
table th, table td { padding:15px; text-align:left; border-bottom:1px solid #eee; }
table th { font-weight:600; color:#666; }
table tr:hover { background:#f9f9f9; }

.progress-bar { height:8px; background:#eee; border-radius:4px; overflow:hidden; margin-bottom:10px; }
.progress-fill { height:100%; background:#f4a261; border-radius:4px; }

.btn { display:inline-block; padding:10px 20px; background:#f4a261; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; transition:background 0.3s; }
.btn:hover { background:#e76f51; }
.btn-outline { background:transparent; border:2px solid #f4a261; color:#f4a261; }
.btn-outline:hover { background:#f4a261; color:#fff; }
.btn-sm { padding:6px 12px; font-size:0.85rem; }

.filters { display:flex; gap:15px; margin-bottom:20px; flex-wrap:wrap; }
.filter-select { padding:10px 15px; border:1px solid #ddd; border-radius:6px; background:#fff; }

.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; justify-content:center; align-items:center; }
.modal-content { background:#fff; padding:30px; border-radius:10px; width:90%; max-width:600px; max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.close-modal { font-size:1.5rem; cursor:pointer; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; font-weight:600; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:6px; }

/* Status indicators */
.status-active { color: #4caf50; font-weight: 600; }
.status-inactive { color: #f44336; font-weight: 600; }
.status-completed { color: #2196f3; font-weight: 600; }
.status-pending { color: #ff9800; font-weight: 600; }
.status-paid { color: #4caf50; font-weight: 600; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; }

/* Progress stats */
.progress-stats { display: flex; justify-content: space-around; margin-top: 20px; }
.stat { text-align: center; }
.stat-value { font-size: 2rem; font-weight: 700; color: #f4a261; display: block; }
.stat-label { font-size: 0.9rem; color: #666; }

/* Lesson list */
.lesson-list { margin-top: 15px; }
.lesson-item { display:flex; justify-content:space-between; padding:15px; border-bottom:1px solid #eee; align-items: center; }
.lesson-item:last-child { border-bottom:none; }

/* Module grid */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.module-card { background:#f9f9f9; padding:20px; border-radius:10px; transition:transform 0.3s; }
.module-card:hover { transform:translateY(-5px); }
.module-card h3 { margin-bottom:10px; }

/* Welcome banner */
.welcome-banner { background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%); color:white; padding:30px; border-radius:10px; margin-bottom:40px; }
.welcome-banner h1 { margin-bottom:10px; }

/* Notification system */
.notification { padding:15px 20px; background:#4caf50; color:white; border-radius:6px; margin-bottom:20px; }
.notification.error { background:#f44336; }

/* Two-column layout */
.columns-2 { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media (max-width: 992px) {
    .columns-2 { grid-template-columns:1fr; }
}

/* Lesson specific styles */
.lesson-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.module-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.video-container {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.lesson-content {
    line-height: 1.8;
    margin-bottom: 30px;
}

.lesson-content p {
    margin-bottom: 15px;
}

.completion-form {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.completion-message {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 15px;
    border-radius: 6px;
    margin-top: 30px;
}

.next-lesson {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Message styles */
.message-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-item {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid #ddd;
}

.message-item.received {
    border-left-color: #f4a261;
}

.message-item.sent {
    border-left-color: #4caf50;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.message-subject {
    font-weight: 600;
    color: #333;
    margin-top: 5px;
}

.message-time {
    color: #666;
    font-size: 0.9rem;
    text-align: right;
}

.unread-badge {
    background: #f44336;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-left: 10px;
}

.message-content {
    line-height: 1.6;
    margin-bottom: 15px;
}

.message-actions {
    margin-top: 15px;
}

/* Module and lesson list styles */
.module-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.module-item {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.lesson-count {
    background: #e3f2fd;
    color: #1976d2;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.module-description {
    color: #666;
    margin-bottom: 20px;
}

.lesson-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
}

.lesson-info {
    flex: 1;
}

.lesson-info h4 {
    margin-bottom: 5px;
}

.lesson-excerpt {
    color: #666;
    font-size: 0.9rem;
}

.lesson-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Resource grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.resource-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
}

.resource-card:hover {
    transform: translateY(-5px);
}

.resource-icon {
    font-size: 2.5rem;
    color: #f4a261;
    margin-bottom: 15px;
}

.resource-card h3 {
    margin-bottom: 10px;
}

.resource-card p {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .dashboard {
        margin: 20px auto;
        padding: 0 10px;
    }
    
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .filter-select {
        width: 100%;
    }
    
    table {
        display: block;
        overflow-x: auto;
    }
    
    .module-grid,
    .resource-grid {
        grid-template-columns: 1fr;
    }
    
    .lesson-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .lesson-actions {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .content-section {
        padding: 15px;
    }
    
    .tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .tab {
        padding: 10px 15px;
    }
    
    /* Form improvements */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Button improvements */
    .btn {
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 8px 0;
    }
    
    .logo {
        font-size: 1rem;
    }
    
    .dashboard-title {
        font-size: 1.5rem;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-card .value {
        font-size: 1.8rem;
    }
}

/* Resource Grid Styles */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.resource-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

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

.resource-icon {
    font-size: 2.5rem;
    color: #f4a261;
    margin-bottom: 15px;
}

.resource-card h3 {
    margin-bottom: 10px;
    color: #333;
}

.resource-card p {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Message Styles */
.message-container {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 30px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
}

.message {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    max-width: 80%;
}

.message.sent {
    background: #e3f2fd;
    margin-left: auto;
    border-left: 4px solid #2196f3;
}

.message.received {
    background: #f5f5f5;
    margin-right: auto;
    border-left: 4px solid #f4a261;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.message-time {
    color: #666;
    font-size: 0.8rem;
}

.message-content {
    line-height: 1.6;
}

.no-messages {
    text-align: center;
    padding: 40px;
    color: #666;
}

.message-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Login Page Styles */
.login-container {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    margin: 40px auto;
}

.logo {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 1.5rem;
    color: #111;
}

.logo i {
    color: #f4a261;
    margin-right: 8px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.btn {
    display: inline-block;
    padding: 12px 20px;
    background: #f4a261;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.btn:hover {
    background: #e76f51;
}

.error {
    color: #f44336;
    margin-top: 10px;
    text-align: center;
}

.login-links {
    text-align: center;
    margin-top: 20px;
}

.login-links a {
    color: #f4a261;
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

/* Resource Categories */
.resource-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
}

.category-item:hover {
    transform: translateY(-5px);
}

.category-icon {
    font-size: 2.5rem;
    color: #f4a261;
    margin-bottom: 15px;
}

.category-item h3 {
    margin-bottom: 10px;
    color: #333;
}

.category-item p {
    color: #666;
    font-size: 0.9rem;
}

/* Global */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f6f8;
    color: #333;
    padding: 20px;
}

/* Page header */
.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 28px;
    color: #222;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px 0;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* Form styles */
form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    max-width: 600px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

input[type="text"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}

textarea {
    resize: vertical;
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.resource-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.resource-card:hover {
    transform: translateY(-5px);
}

.resource-icon {
    font-size: 2.5rem;
    color: #f4a261;
    margin-bottom: 15px;
}

.resource-card h3 {
    margin-bottom: 10px;
    color: #333;
}

.resource-card p {
    color: #666;
    font-size: 0.9rem;
}

/* Tables for admin list page */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

th {
    background: #f0f0f0;
    font-weight: 600;
}

tr:hover {
    background-color: #f9f9f9;
}

/* Responsive */
@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    table, th, td {
        display: block;
    }

    th {
        background: transparent;
        padding-top: 10px;
        font-weight: 600;
    }

    td {
        padding: 10px 0;
        border-bottom: none;
    }
}

.text-muted {
    color: #6c757d !important;
}

.fas, .fab {
    margin-right: 5px;
}

.current-file {
    margin-top: 10px;
    padding: 10px;
    background: #e8f5e9;
    border-radius: 6px;
    border: 1px solid #c8e6c9;
}

.current-file a {
    color: #4caf50;
    text-decoration: none;
}

.current-file a:hover {
    text-decoration: underline;
}

.delete-checkbox {
    margin-top: 8px;
}

.file-info {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.file-info small {
    color: #6c757d;
}
///////

<style>
        .progress-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .progress-card {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .progress-card .value {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .progress-card.completion .value {
            color: #f4a261;
        }
        
        .progress-card.days .value {
            color: #2196f3;
        }
        
        .progress-card.lessons .value {
            color: #4caf50;
        }
        
        .progress-card.remaining .value {
            color: #ff9800;
        }
        
        .progress-card .label {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .progress-card .subtext {
            font-size: 0.8rem;
            color: #999;
        }
        
        .progress-card .progress-ring {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 60px;
            height: 60px;
            opacity: 0.1;
        }
        
        .main-progress {
            background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .main-progress::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="2" stroke-dasharray="5,5" opacity="0.1"/></svg>');
            background-size: cover;
        }
        
        .main-progress h2 {
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }
        
        .main-progress p {
            opacity: 0.9;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .program-progress-bar {
            height: 12px;
            background: rgba(255,255,255,0.3);
            border-radius: 6px;
            overflow: hidden;
            margin: 20px 0;
            position: relative;
            z-index: 1;
        }
        
        .program-progress-fill {
            height: 100%;
            background: #fff;
            border-radius: 6px;
            transition: width 0.5s ease;
            position: relative;
        }
        
        .program-progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
            animation: shimmer 2s infinite;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .program-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            position: relative;
            z-index: 1;
        }
        
        .program-detail {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            background: rgba(255,255,255,0.2);
            border-radius: 8px;
        }
        
        .program-detail .value {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .program-detail .label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 1024px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .modules-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .module-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .module-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .module-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            cursor: pointer;
        }
        
        .module-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .module-toggle {
            transition: transform 0.3s;
        }
        
        .module-card.expanded .module-toggle {
            transform: rotate(180deg);
        }
        
        .module-progress {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .module-progress-bar {
            width: 150px;
            height: 8px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .module-progress-fill {
            height: 100%;
            background: #f4a261;
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        
        .module-progress-text {
            font-size: 0.9rem;
            color: #666;
            min-width: 70px;
            text-align: right;
        }
        
        .module-content {
            padding: 20px;
            display: none;
        }
        
        .module-card.expanded .module-content {
            display: block;
        }
        
        .lessons-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .lesson-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: #f9f9f9;
            border-radius: 8px;
            transition: background 0.3s;
        }
        
        .lesson-item:hover {
            background: #f0f0f0;
        }
        
        .lesson-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-grow: 1;
        }
        
        .lesson-status {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            flex-shrink: 0;
        }
        
        .status-completed {
            background: #e8f5e9;
            color: #4caf50;
        }
        
        .status-inprogress {
            background: #fff8e1;
            color: #ffc107;
        }
        
        .status-notstarted {
            background: #f5f5f5;
            color: #9e9e9e;
        }
        
        .lesson-title {
            font-weight: 600;
            color: #333;
            flex-grow: 1;
        }
        
        .lesson-duration {
            font-size: 0.8rem;
            color: #999;
            margin-left: 10px;
        }
        
        .lesson-actions {
            display: flex;
            gap: 8px;
        }
        
        .sidebar-section {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .sidebar-section h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .activity-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .activity-item {
            display: flex;
            gap: 12px;
            padding: 10px;
            border-radius: 6px;
            background: #f9f9f9;
        }
        
        .activity-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #f4a261;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex-grow: 1;
        }
        
        .activity-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }
        
        .activity-details {
            font-size: 0.8rem;
            color: #666;
        }
        
        .activity-time {
            font-size: 0.7rem;
            color: #999;
        }
        
        .upcoming-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .upcoming-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 6px;
            background: #f9f9f9;
        }
        
        .upcoming-icon {
            color: #f4a261;
            flex-shrink: 0;
        }
        
        .upcoming-content {
            flex-grow: 1;
        }
        
        .upcoming-title {
            font-weight: 600;
            color: #333;
            font-size: 0.9rem;
        }
        
        .upcoming-module {
            font-size: 0.8rem;
            color: #666;
        }
        
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }
        
        .achievement-item {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .achievement-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #f4a261;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.2rem;
        }
        
        .achievement-item.locked .achievement-icon {
            background: #ddd;
            color: #999;
        }
        
        .achievement-title {
            font-weight: 600;
            font-size: 0.8rem;
            color: #333;
            margin-bottom: 5px;
        }
        
        .achievement-desc {
            font-size: 0.7rem;
            color: #666;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        .empty-state h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #666;
        }
        
        .motivational-quote {
            font-style: italic;
            color: #666;
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #f4a261;
        }
        
        @media (max-width: 768px) {
            .progress-stats {
                grid-template-columns: 1fr;
            }
            
            .program-details {
                grid-template-columns: 1fr;
            }
            
            .module-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .module-progress {
                width: 100%;
                justify-content: space-between;
            }
            
            .lesson-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .lesson-actions {
                width: 100%;
                justify-content: flex-end;
            }
            
            .content-grid {
                grid-template-columns: 1fr;
            }
        }

        
    </style>