:root{
  --color-primary: #4B0082;
  --color-secondary: #800000;
  --color-accent: #FFD700;
  --color-bg: #fdfdff;
  --color-text: #1f2937;
}

body { 
  font-family: Arial, Helvetica, sans-serif; 
  background: var(--color-bg); 
  color: var(--color-text); 
  line-height: 1.6; 
}

#main-nav:not(.hidden) {
    animation: slideDown 0.2s ease-out forwards;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.header-bg{ background-color:var(--color-primary); }
.text-primary-color{ color:var(--color-primary); }
.bg-accent-color{ background-color:var(--color-accent); }
.border-primary-color{ border-color:var(--color-primary); }

.text-gold-accent{ color:var(--color-accent); }
.text-maroon{ color:var(--color-secondary); }
.bg-light-bg{ background:#fafafa; }
.border-color-accent{ border-color: var(--color-accent); }
.text-color-secondary{ color: var(--color-secondary); }

.modal-overlay{ 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.7); 
  display:none; 
  align-items:center; 
  justify-content:center; 
  z-index:50; 
  opacity:0; 
  transition:opacity .25s;
}
.modal-overlay.active{ display:flex; opacity:1; }

.modal-content{ 
  background:white; 
  padding:2rem; 
  border-radius: 24px; 
  width: min(680px,92%); 
  max-height:90vh; 
  overflow:auto; 
  transform:scale(.97); 
  transition:transform .2s;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-overlay.active .modal-content{ transform:scale(1); }

.close-btn{ position:absolute; top:15px; right:15px; cursor:pointer; color:var(--color-primary); font-size: 1.2rem; }
.close-btn:hover{ color:var(--color-secondary); }

.course-card{
  background:#fff;
  padding:1.75rem;
  border-radius: 20px; 
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  border-bottom:4px solid var(--color-accent);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  transition: transform 0.2s ease;
}
.course-card:hover {
  transform: translateY(-3px);
}

.course-card h4{ font-size:1.35rem; font-weight:700; color:var(--color-secondary); margin-bottom: 0.25rem; }
.course-card .meta{ font-size:.95rem; color:#555; }
.course-card button{
  margin-top:auto;
  background:var(--color-primary);
  color:white;
  padding:.75rem 1.5rem;
  border-radius: 50px; 
  font-weight:600;
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.courses-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 20px; 
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  width: 100%;
}
.courses-table thead {
  background: linear-gradient(
    135deg,
    #4b0082,
    #5b21b6
  );
}

.courses-table thead th {
  padding: 1.2rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.courses-table tbody td {
  padding: 1rem 1rem;
  font-size: 0.95rem; 
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  white-space: nowrap;
}

.courses-table tbody tr:last-child td {
  border-bottom: none;
}

.courses-table tbody tr:hover {
  background: #f9fafb;
}
.courses-table td:first-child {
  font-weight: 600;
  color: #111827;
}

.courses-table td:nth-child(6) {
  font-weight: 700;
  color: #4b0082;
}
.course-view-btn {
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
  border: 1px solid #5b21b6;
  color: #5b21b6;
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.course-view-btn:hover {
  background: #5b21b6;
  color: #ffffff;
}
@media (max-width: 640px) {
  .courses-table thead th,
  .courses-table tbody td {
    padding: 0.75rem;
  }
}

[lucide-icon]{ width:1.25rem; height:1.25rem; display:inline-block; vertical-align:middle; }