/* === General Styles & Reset === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body,
  #root {
    height: 100%;
  }
  
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Light grey background */
    color: #343a40; /* Dark grey text */
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  #root {
    display: flex;
    flex-direction: column;
    flex: 1; /* Ensure #root takes full height */
  }
  
  /* === App Container === */
  .app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative; /* Needed for absolute positioned mobile menu */
  }
  
  /* === Links === */
  a {
    color: #0056d2; /* Standard link blue */
    text-decoration: none;
    transition: color 0.2s ease;
  }
  a:hover {
    color: #003d99; /* Darker blue on hover */
    text-decoration: underline;
  }
  
  /* === Buttons === */
  button,
  .button-link {
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.4; /* Prevent text jump */
  }
  button:focus,
  .button-link:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring */
  }
  button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }
  
  .button-primary,
  .signin-button,
  .auth-submit-btn,
  .enroll-button {
    background-color: #0056d2;
    color: #ffffff;
    border-color: #0056d2;
  }
  .button-primary:hover:not(:disabled),
  .signin-button:hover:not(:disabled),
  .auth-submit-btn:hover:not(:disabled),
  .enroll-button:hover:not(:disabled) {
    background-color: #0041a3;
    border-color: #0041a3;
  }
  
  .button-secondary,
  .wishlist-button {
    background-color: #ffffff;
    color: #0056d2;
    border: 1px solid #dee2e6;
  }
  .button-secondary:hover:not(:disabled),
  .wishlist-button:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: #adb5bd;
  }
  
  .button-danger {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
  }
  .button-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #bd2130;
  }
  
  /* === Header & Navigation === */
  .app-header {
    flex-shrink: 0;
    background-color: #0056d2; /* Coursera-like blue */
    color: #ffffff;
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    position: sticky; /* Keep header visible */
    top: 0;
  }
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 0.5rem 1rem;
  }
  .logo a {
    font-size: 1.6rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }
  .logo a:hover {
    text-decoration: none;
    color: #ffffff;
  }
  
  /* Desktop Navigation */
  .app-nav-desktop ul {
    list-style: none;
    display: flex;
    gap: 0 1.8rem; /* Increased spacing */
  }
  .app-nav-desktop a {
    color: #ffffff;
    font-size: 1rem;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.2s ease;
    text-decoration: none;
  }
  .app-nav-desktop a:hover {
    color: #e0e0e0;
  }
  .app-nav-desktop a.active {
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
  }
  
  /* Auth Section (Sign In / User Menu) */
  .auth-section {
    display: flex;
    align-items: center;
  }
  .signin-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  /* Profile Menu */
  .profile-menu-container {
    position: relative; /* For dropdown positioning */
  }
  .profile-button {
    background: none;
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }
  .profile-button:hover,
  .profile-button:focus {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .default-avatar {
    color: #6c757d;
    font-size: 1.2rem;
  }
  .profile-username {
    font-weight: 500;
    font-size: 0.95rem;
  }
  .profile-chevron {
    font-size: 0.8rem;
    margin-left: 0.2rem;
  }
  
  /* Profile Dropdown */
  .profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem); /* Position below button */
    right: 0;
    background-color: #ffffff;
    color: #343a40;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1001;
    padding: 0.5rem 0;
    border: 1px solid #e0e0e0;
  }
  .dropdown-item {
    display: flex; /* Use flex for icon alignment */
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    color: #343a40;
    text-decoration: none;
    white-space: nowrap;
    background: none; /* Reset button styles */
    border: none; /* Reset button styles */
    width: 100%; /* Make button take full width */
    text-align: left; /* Align text left */
    cursor: pointer;
  }
  .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0056d2;
  }
  .dropdown-icon {
    width: 16px; /* Fixed width for icons */
    text-align: center;
    color: #6c757d;
  }
  .dropdown-item:hover .dropdown-icon {
    color: #0056d2;
  }
  
  /* Mobile Menu Toggle Button */
  .mobile-menu-toggle {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.6rem; /* Size of icon */
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1; /* Prevent extra space */
    z-index: 1002; /* Above mobile nav */
  }
  /* Hamburger Icon Styles */
  .mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
    border-radius: 1px;
  }
  /* Animate hamburger to 'X' when active */
  .app-container.mobile-menu-active .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .app-container.mobile-menu-active .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .app-container.mobile-menu-active .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  /* Mobile Navigation Menu */
  .app-nav-mobile {
    display: none; /* Hidden by default, shown via JS/class */
    position: absolute;
    top: 100%; /* Position below the header */
    left: 0;
    width: 100%;
    background-color: #004ca6; /* Slightly darker blue */
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #003d99;
    max-height: 0; /* Start hidden */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .app-container.mobile-menu-active .app-nav-mobile {
    display: block; /* Make it visible for transition */
    max-height: 500px; /* Allow it to expand */
  }
  .app-nav-mobile ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem 0;
  }
  .app-nav-mobile a,
  .app-nav-mobile button {
    color: #ffffff;
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
  }
  .app-nav-mobile a:hover,
  .app-nav-mobile button:hover {
    background-color: #0056d2;
  }
  .app-nav-mobile a.active {
    font-weight: bold;
  }
  .mobile-signout-btn {
      color: #ffdddd; /* Make signout slightly different */
  }
  .mobile-signout-btn:hover {
      background-color: #c82333; /* Red background on hover */
  }
  
  
  /* === Main Content Area === */
  .main-content {
    flex: 1 0 auto; /* Allow content to grow and shrink, basis auto */
    width: 100%;
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center content */
    padding: 2rem 1rem; /* Padding top/bottom and left/right */
  }
  .page-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #343a40;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.75rem;
    font-weight: 600;
  }
  .container { /* Helper class for consistent padding/max-width */
      width: 100%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
  }
  
  /* === Footer Styles === */
.app-footer {
    flex-shrink: 0; /* Prevent footer from shrinking */
    width: 100%;
    background-color: #343a40; /* Darker background */
    color: #adb5bd; /* Lighter text color */
    font-size: 0.85rem;
    padding: 1.5rem 0 0.8rem 0; /* More padding top */
    margin-top: auto; /* Crucial: Ensure it's pushed down by flex-grow on main */
  }
  .footer-content {
    display: flex;
    flex-wrap: wrap; /* Allow sections to wrap on smaller screens */
    justify-content: space-between; /* Distribute space */
    gap: 1.5rem; /* Space between sections */
    margin-bottom: 1.5rem; /* Space before bottom line */
    text-align: left; /* Align text left in sections */
    /* Uses the .container class for max-width and padding */
  }
  .footer-section {
    flex: 1; /* Allow sections to grow */
    min-width: 160px; /* Minimum width before wrapping */
  }
  .footer-section h4 {
    color: #ffffff; /* White heading */
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
    text-transform: uppercase; /* Optional: Uppercase headings */
    letter-spacing: 0.5px; /* Optional: Spacing */
  }
  .footer-section ul {
    list-style: none;
    padding: 0;
  }
  .footer-section li {
    margin-bottom: 0.4rem; /* Slightly more space between links */
  }
  .footer-section a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s ease; /* Smooth hover */
  }
  .footer-section a:hover {
    color: #ffffff; /* White on hover */
    text-decoration: underline;
  }
  .footer-section p {
    line-height: 1.6;
    color: #adb5bd; /* Match link color */
    font-size: 0.85rem;
  }
  .footer-section.social a {
    color: #adb5bd;
    font-size: 1.1rem;
    margin-right: 1rem;
    display: inline-block; /* Needed for margin */
    transition: color 0.2s ease;
  }
  .footer-section.social a:last-child {
      margin-right: 0; /* No margin on the last icon */
  }
  .footer-section.social a:hover {
    color: #ffffff;
  }
  .footer-bottom {
    border-top: 1px solid #495057; /* Separator line, slightly lighter */
    padding-top: 1rem;
    margin-top: 1rem; /* Space above the bottom line */
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d; /* Muted color for copyright */
  }
  
  /* === Controls Container (Search, Filter, Sort) === */
  .controls-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
  }
  .control-group {
    flex: 1 1 180px; /* Allow wrapping, base size */
    min-width: 150px;
  }
  .control-group label {
    /* Use sr-only for visual labels if needed */
  }
  .control-group input[type="search"],
  .control-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .control-group input[type="search"]:focus,
  .control-group select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  .sr-only { /* Screen reader only class */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  
  /* === Course List & Cards === */
  .course-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Spacing between cards */
  }
  .course-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%; /* Ensure link takes full card height */
    border-radius: 0.5rem; /* Match card radius */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  .course-card-link:hover,
  .course-card-link:focus {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }
  .course-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the link height */
    overflow: hidden; /* Clip image corners */
  }
  .course-item img {
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
    background-color: #eee; /* Placeholder color */
    border-bottom: 1px solid #e9ecef;
  }
  .course-item-content {
    padding: 1rem;
    flex-grow: 1; /* Allow content to fill space */
    display: flex;
    flex-direction: column;
  }
  .course-item h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    color: #0056d2;
    line-height: 1.3;
  }
  .course-category {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    display: inline-block;
    background-color: #e9ecef;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
  }
  .course-description {
    font-size: 0.9rem;
    color: #495057; /* Slightly darker than category */
    flex-grow: 1; /* Push meta down */
    margin-bottom: 0.75rem;
    /* Limit description lines */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .course-meta {
      margin-top: auto; /* Push to bottom */
      padding-top: 0.5rem;
      border-top: 1px solid #f1f1f1;
      font-size: 0.85rem;
      color: #6c757d;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .course-meta .rating {
      color: #ffc107; /* Gold color for stars */
  }
  .course-meta .enrollment {
      /* Styles if needed */
  }
  
  
  /* === Skeleton Loading Styles === */
  .skeleton-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  @keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
  }
  .skeleton-image,
  .skeleton-title,
  .skeleton-text,
  .skeleton-category {
    background-color: #e0e0e0;
    background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 0.25rem;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }
  .skeleton-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-bottom: 1px solid #e9ecef;
  }
  .skeleton-content {
    padding: 1rem;
  }
  .skeleton-title {
    height: 1.2rem;
    margin-bottom: 0.75rem;
    width: 70%;
  }
  .skeleton-category {
    height: 1rem; /* Match category height */
    width: 40%;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.5rem; /* Match category padding */
  }
  .skeleton-text {
    height: 0.9rem;
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .skeleton-text.short {
    width: 80%;
  }
  
  /* === Pagination Styles === */
  .pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem; /* More space above pagination */
    gap: 0.75rem;
  }
  .pagination-button {
    background-color: #ffffff;
    color: #0056d2;
    border: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9rem;
  }
  .pagination-button:hover:not(:disabled) {
    background-color: #e9ecef;
    border-color: #adb5bd;
  }
  .pagination-button:disabled {
    background-color: #e9ecef;
    color: #adb5bd;
    border-color: #dee2e6;
    cursor: not-allowed;
  }
  .pagination-info {
    font-size: 0.95rem;
    color: #495057;
    margin: 0 0.5rem;
  }
  
  /* === Course Detail Page === */
  /* Header Section */
  .course-detail-header-section {
      background-color: #f0f2f5; /* Light background for header */
      padding: 3rem 0;
      margin-bottom: 2rem;
  }
  .course-detail-header-content {
      display: flex;
      flex-wrap: wrap; /* Allow wrapping */
      gap: 2rem;
      align-items: flex-start; /* Align items at the top */
  }
  .course-detail-info {
      flex: 1; /* Take available space */
      min-width: 300px; /* Prevent getting too narrow */
  }
  .course-main-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      line-height: 1.3;
  }
  .course-short-description {
      font-size: 1.1rem;
      color: #495057;
      margin-bottom: 1rem;
  }
  .course-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem; /* Spacing between meta items */
      margin: 1rem 0 1.5rem 0;
      font-size: 0.9rem;
      color: #6c757d;
  }
  .course-detail-meta .rating,
  .course-detail-meta .enrollment,
  .course-detail-meta .level,
  .course-detail-meta .instructor-meta {
      display: flex;
      align-items: center;
      gap: 0.4rem;
  }
  .course-detail-meta .rating { color: #ffc107; }
  .course-detail-meta .instructor-meta a { color: #0056d2; font-weight: 500; }
  .course-detail-meta .instructor-meta a:hover { text-decoration: underline; }
  
  .course-actions {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
  }
  .enroll-button { font-size: 1rem; padding: 0.8rem 1.8rem; }
  .wishlist-button { font-size: 1rem; padding: 0.8rem 1.8rem; }
  
  .course-detail-image {
      flex-basis: 400px; /* Preferred width */
      flex-shrink: 0; /* Don't shrink */
      max-width: 100%; /* Ensure responsiveness */
  }
  .course-detail-image img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 0.5rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: #e0e0e0;
  }
  
  /* Tabs Section */
  .course-detail-content-section {
      margin-top: 2rem;
  }
  .course-tabs {
      display: flex;
      gap: 0.5rem; /* Small gap between tabs */
      margin-bottom: 2rem;
      border-bottom: 1px solid #dee2e6;
  }
  .tab-button {
      background: none;
      border: none;
      border-bottom: 3px solid transparent; /* Placeholder for active border */
      padding: 0.8rem 1.2rem;
      cursor: pointer;
      color: #6c757d;
      font-size: 1rem;
      font-weight: 500;
      transition: color 0.2s ease, border-color 0.2s ease;
      margin-bottom: -1px; /* Overlap border-bottom */
  }
  .tab-button:hover {
      color: #343a40;
  }
  .tab-button.active {
      color: #0056d2;
      border-bottom-color: #0056d2;
  }
  
  /* Tab Content Panes */
  .tab-content-container {
      padding-top: 1rem;
  }
  .tab-pane { /* Base styles for panes if needed */ }
  .tab-pane h2 { /* Styles for section titles within tabs */
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      font-weight: 600;
  }
  
  /* Overview Section */
  .overview-section ul {
      list-style: none;
      padding-left: 0;
      margin-bottom: 1.5rem;
  }
  .overview-section li {
      margin-bottom: 0.75rem;
      padding-left: 1.8rem;
      position: relative;
      line-height: 1.5;
  }
  .learning-objectives li::before {
      content: "\f00c"; /* Font Awesome check icon */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 2px;
      color: #28a745; /* Green check */
      font-size: 0.9em;
  }
  .requirements li::before {
      content: "\f111"; /* Font Awesome circle icon */
      font-family: "Font Awesome 6 Free";
      font-weight: 900; /* Solid */
      position: absolute;
      left: 0;
      top: 6px;
      color: #6c757d;
      font-size: 0.5em;
  }
  .detailed-description p {
      margin-bottom: 1rem;
      line-height: 1.7;
  }
  
  /* Curriculum Section */
  .modules-accordion .module-item {
      border: 1px solid #e9ecef;
      border-radius: 0.3rem;
      margin-bottom: 1rem;
      background-color: #fff;
  }
  .modules-accordion .module-item[open] {
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .modules-accordion summary.module-title {
      padding: 1rem 1.2rem;
      font-weight: 600;
      cursor: pointer;
      list-style: none; /* Remove default marker */
      position: relative;
      color: #343a40;
  }
  .modules-accordion summary.module-title::-webkit-details-marker { display: none; } /* Hide Chrome marker */
  .modules-accordion summary.module-title::after { /* Custom arrow */
      content: '\f078'; /* Font Awesome chevron-down */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      right: 1.2rem;
      top: 50%;
      transform: translateY(-50%);
      transition: transform 0.2s ease;
      font-size: 0.9em;
      color: #6c757d;
  }
  .modules-accordion .module-item[open] summary.module-title::after {
      transform: translateY(-50%) rotate(180deg);
  }
  .module-content {
      padding: 0 1.2rem 1rem 1.2rem;
      border-top: 1px solid #e9ecef;
  }
  .lessons-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  .lesson-item {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.95rem;
  }
  .lesson-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }
  .lesson-icon {
      color: #0056d2;
      width: 16px;
      text-align: center;
  }
  .lesson-title {
      flex-grow: 1;
      color: #343a40;
  }
  .lesson-duration {
      font-size: 0.85rem;
      color: #6c757d;
      white-space: nowrap;
  }
  
  /* Instructor Section */
  .instructor-profile {
      display: flex;
      flex-wrap: wrap; /* Allow wrapping */
      gap: 2rem;
      align-items: flex-start; /* Align top */
      background-color: #fff;
      padding: 1.5rem;
      border-radius: 0.5rem;
      border: 1px solid #e9ecef;
  }
  .instructor-avatar img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .instructor-details {
      flex: 1;
      min-width: 250px;
  }
  .instructor-details h3 {
      font-size: 1.4rem;
      margin-bottom: 0.25rem;
  }
  .instructor-title {
      font-size: 1rem;
      color: #6c757d;
      margin-bottom: 0.75rem;
  }
  .instructor-rating {
      margin-bottom: 1rem;
      color: #ffc107;
      font-size: 0.95rem;
  }
  .instructor-rating .rating-count {
      color: #6c757d;
      margin-left: 0.5rem;
  }
  .instructor-bio {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #495057;
  }
  
  /* Reviews Section */
  .reviews-list {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }
  .review-item {
      background-color: #fff;
      border: 1px solid #e9ecef;
      border-radius: 0.5rem;
      padding: 1.5rem;
  }
  .review-header {
      display: flex;
      gap: 1rem;
      align-items: flex-start; /* Align top */
      margin-bottom: 1rem;
  }
  .reviewer-avatar img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
  }
  .reviewer-info h4 {
      margin: 0 0 0.25rem 0;
      font-size: 1rem;
      font-weight: 600;
  }
  .review-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.85rem;
      color: #6c757d;
  }
  .review-rating { color: #ffc107; }
  .review-content {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #495057;
      padding-left: calc(50px + 1rem); /* Indent content */
  }
  
  /* Related Courses Section */
  .related-courses-section {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid #dee2e6;
  }
  .related-courses-section h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
  }
  .related-list .course-item h3 { font-size: 1.05rem; } /* Slightly smaller titles */
  
  
  /* === About Page === */
  .about-page section { margin-bottom: 2.5rem; }
  .about-page p { margin-bottom: 1rem; font-size: 1.05rem; color: #495057; line-height: 1.7; }
  .section-title { font-size: 1.5rem; margin-bottom: 1.5rem; font-weight: 600; }
  
  /* === Contact Form Styles === */
  .contact-form {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    max-width: 600px; /* Limit width */
    margin: 2rem auto; /* Center form */
  }
  .form-group {
    margin-bottom: 1.5rem;
  }
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
  }
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .form-group input[type="text"]:focus,
  .form-group input[type="email"]:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  .form-group textarea {
    min-height: 120px; /* Taller textarea */
    resize: vertical;
  }
  /* Input error styling */
  .form-group input.input-error,
  .form-group textarea.input-error {
    border-color: #dc3545; /* Red border for error */
  }
  .form-group input.input-error:focus,
  .form-group textarea.input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Red shadow */
  }
  .error-message {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.3rem;
  }
  .form-submit-btn {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
  .submission-status {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1.25rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
  }
  .submission-status.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  .submission-status.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }
  
  /* === Authentication Page Styles === */
  .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    flex-grow: 1; /* Take remaining vertical space */
  }
  .auth-box {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    width: 100%;
    max-width: 420px; /* Limit width */
  }
  .auth-box h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
  }
  .auth-box .form-group { margin-bottom: 1.2rem; }
  .auth-box .form-group label { font-size: 0.9rem; }
  .auth-box .form-group input { padding: 0.7rem; }
  .auth-submit-btn { width: 100%; font-size: 1rem; padding: 0.75rem; }
  .auth-message {
    margin-bottom: 1.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    text-align: center;
  }
  .auth-message.success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
  .auth-message.error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }
  .auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
  }
  .switch-button {
    background: none;
    border: none;
    color: #0056d2;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
  }
  .switch-button:hover { text-decoration: underline; }
  
  /* === Profile Page Styles === */
  .profile-container {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
  }
  .profile-box {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    width: 100%;
    max-width: 700px; /* Wider than auth box */
  }
  .profile-box h2 {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
  }
  .profile-visual-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 2rem;
  }
  .profile-picture-display {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 1rem;
      border: 3px solid #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .profile-picture-display img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .default-avatar-large {
      font-size: 4rem;
      color: #adb5bd;
  }
  .profile-visual-header h2 { margin-bottom: 0; }
  
  .profile-display .profile-field {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 1rem;
  }
  .profile-display .profile-field:last-of-type { border-bottom: none; }
  .profile-field .field-label { font-weight: 600; color: #495057; margin-right: 1rem; }
  .profile-field .field-value { color: #343a40; text-align: right; }
  .profile-field .picture-url { word-break: break-all; font-size: 0.9em; }
  
  .profile-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end; /* Align buttons right */
    gap: 1rem;
  }
  .profile-edit-form .form-group { margin-bottom: 1.2rem; }
  .profile-edit-form .form-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  .profile-message {
    margin-bottom: 1.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    text-align: center;
  }
  .profile-message.success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; }
  .profile-message.error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }
  
  
  /* === Loading/Error/Status Messages === */
  .status-message {
    text-align: center;
    font-size: 1.1rem;
    margin: 3rem auto;
    padding: 1.5rem;
    border-radius: 0.3125rem;
    max-width: 400px;
    background-color: #e9ecef;
    color: #495057;
  }
  .status-message.loading {
    /* Specific loading styles if needed */
  }
  .status-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
  }
  .status-message h2 { margin-bottom: 1rem; font-size: 1.3rem; }
  .status-message p { margin-bottom: 1rem; }
  .status-message .button-link { margin-top: 1rem; }
  
  .no-courses {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 3rem;
    color: #6c757d;
    padding: 2rem;
    background-color: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 0.5rem;
  }
  
  /* === Debug Data Viewer === */
  .debug-data-viewer {
    margin: 2rem 0;
    padding: 1rem;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
  }
  .debug-data-viewer h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #343a40;
  }
  .debug-data-viewer button {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
  .debug-data-viewer button:hover {
    background-color: #5a6268;
  }
  .debug-data-viewer button:disabled {
      background-color: #adb5bd;
  }
  .debug-data-viewer pre {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    max-height: 300px; /* Limit height */
    overflow: auto;
    white-space: pre-wrap; /* Wrap long lines */
    word-wrap: break-word;
    font-size: 0.85rem;
    border-radius: 0.25rem;
  }
  .debug-data-viewer .status-message.error { /* Style error within debug viewer */
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      margin-top: 0.5rem;
      text-align: left;
      max-width: none;
  }
  
  
  /* === Responsive Adjustments === */
  /* Target medium screens and down for mobile menu */
  @media (max-width: 900px) { /* Adjust breakpoint as needed */
    .app-nav-desktop {
      display: none; /* Hide desktop nav */
    }
    .mobile-menu-toggle {
      display: block; /* Show hamburger */
    }
    /* Mobile nav visibility is controlled by class on .app-container */
  
    .course-detail-header-content {
        flex-direction: column-reverse; /* Stack image above info */
        align-items: center; /* Center items when stacked */
    }
     .course-detail-image {
        flex-basis: auto; /* Reset basis */
        width: 100%; /* Full width */
        max-width: 500px; /* Limit max width */
     }
     .course-detail-info { text-align: center; }
     .course-detail-meta { justify-content: center; }
     .course-actions { justify-content: center; }
  }
  
  /* Smaller screen adjustments */
  @media (max-width: 600px) {
    .header-content {
      gap: 0.5rem; /* Reduce gap */
    }
    .logo a {
      font-size: 1.4rem;
    }
    .page-title {
      font-size: 1.6rem;
    }
    .controls-container {
      flex-direction: column; /* Stack controls vertically */
      align-items: stretch;
    }
    .control-group { flex-basis: auto; } /* Reset basis */
    .course-list { grid-template-columns: 1fr; } /* Single column */
    .auth-box, .profile-box, .contact-form { padding: 1.5rem; }
    .course-detail-header-section { padding: 2rem 0; }
    .course-main-title { font-size: 1.8rem; }
    .course-short-description { font-size: 1rem; }
    .instructor-profile { flex-direction: column; align-items: center; text-align: center; }
    .review-content { padding-left: 0; margin-top: 1rem; }
  }