:root {
   --primary: #fbbf24;
   --primary-dark: #d97706;
   --bg-dark: #111827;
   --bg-panel: #1f2937;
   --text-main: #f3f4f6;
   --text-muted: #9ca3af;
   --success: #22c55e;
   --error: #ef4444;
   --accent: #3b82f6;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Outfit', sans-serif;
}

body {
   background-color: var(--bg-dark);
   color: var(--text-main);
   height: 100vh;
   overflow: hidden;
}

/* Menu Container */
.menu-container {
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 20px;
}

.menu-header h1 {
   font-size: 3rem;
   margin-bottom: 10px;
   color: var(--primary);
}

.course-grid {
   display: flex;
   gap: 30px;
   margin-top: 50px;
   flex-wrap: wrap;
   justify-content: center;
}

.course-card {
   background: var(--bg-panel);
   width: 350px;
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.course-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
   border-color: var(--primary);
}

.course-thumb {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.course-info {
   padding: 20px;
}

.course-title {
   font-size: 1.5rem;
   color: var(--primary);
   margin-bottom: 10px;
}

.course-desc {
   color: var(--text-muted);
   font-size: 0.9rem;
   line-height: 1.5;
}

/* App Container */
#app-container {
   display: flex;
   height: 100vh;
}

#sidebar {
   width: 320px;
   background-color: var(--bg-panel);
   display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(255, 255, 255, 0.05);
   padding: 20px;
   z-index: 10;
}

.logo-area {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 30px;
}

.logo-icon {
   font-size: 2rem;
   cursor: pointer;
   line-height: 1;
   display: none;
   /* Hide on desktop */
}

.logo-icon-lg {
   width: 150px;
   height: auto;
   animation: float 3s ease-in-out infinite;
   margin-bottom: 20px;
}

@keyframes float {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-5px);
   }

   100% {
      transform: translateY(0px);
   }
}

/* Progress Gauge */
.progress-container {
   background: rgba(0, 0, 0, 0.2);
   padding: 15px;
   border-radius: 15px;
   margin-bottom: 30px;
   text-align: center;
}

.progress-label {
   color: var(--text-muted);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 10px;
}

.gauge-wrapper {
   position: relative;
   width: 100px;
   height: 100px;
   margin: 0 auto;
}

.gauge {
   transform: rotate(-90deg);
   width: 100%;
   height: 100%;
}

.gauge-bg {
   fill: none;
   stroke: rgba(255, 255, 255, 0.1);
   stroke-width: 8;
}

.gauge-progress {
   fill: none;
   stroke: var(--primary);
   stroke-width: 8;
   stroke-dasharray: 283;
   stroke-dashoffset: 283;
   /* Full circle initially */
   transition: stroke-dashoffset 1s ease-out;
}

.gauge-text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   line-height: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

#score-display {
   font-size: 1.8rem;
   font-weight: 800;
   color: var(--text-main);
}

.gauge-label {
   display: block;
   font-size: 0.7rem;
   color: var(--text-muted);
}


/* Module List */
.module-nav {
   flex: 1;
   overflow-y: auto;
   /* Hide Scrollbar */
   -ms-overflow-style: none;
   /* IE and Edge */
   scrollbar-width: none;
   /* Firefox */
}

.module-nav::-webkit-scrollbar {
   display: none;

}

.module-item {
   padding: 15px;
   margin-bottom: 10px;
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s;
   border: 1px solid transparent;
   color: var(--text-muted);
}

.module-item:hover {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-main);
}

.module-item.active {
   background: rgba(251, 191, 36, 0.1);
   border-color: var(--primary);
   color: var(--primary);
   font-weight: 600;
}


/* Main Content */
#main-content {
   flex: 1;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 40px;
   background: radial-gradient(circle at center, rgba(30, 41, 59, 0.8) 0%, var(--bg-dark) 100%);
}

.slide-container {
   width: 100%;
   max-width: 1200px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.slide-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center;
}

.slide-text {
   animation: slideInLeft 0.5s ease-out;
}

.slide-image img {
   width: 100%;
   border-radius: 20px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
   animation: zoomIn 0.8s ease-out;
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-50px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes zoomIn {
   from {
      opacity: 0;
      transform: scale(0.9);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.slide-title {
   font-size: 2.5rem;
   font-weight: 800;
   margin-bottom: 20px;
   line-height: 1.2;
   background: -webkit-linear-gradient(45deg, var(--text-main), var(--text-muted));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.slide-content {
   font-size: 1.1rem;
   line-height: 1.6;
   color: var(--text-muted);
}

.slide-content ul {
   list-style: none;
}

.slide-content li {
   margin-bottom: 10px;
   padding-left: 20px;
   position: relative;
}

.slide-content li::before {
   content: '•';
   color: var(--primary);
   position: absolute;
   left: 0;
}

/* Controls */
#controls {
   position: fixed;
   bottom: 0;
   left: 320px;
   /* Sidebar width */
   right: 0;
   height: 80px;
   background: var(--bg-panel);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-btn {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: var(--text-main);
   padding: 10px 30px;
   border-radius: 30px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.nav-btn:hover:not(:disabled) {
   background: var(--primary);
   border-color: var(--primary);
   color: black;
}

.nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}

#current-position {
   font-size: 0.9rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 2px;
}

/* Quiz Styles */
.quiz-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   height: 100%;
   align-items: center;
}

.quiz-left-col {
   display: flex;
   flex-direction: column;
   justify-content: Center;
}

.quiz-title-sm {
   font-size: 2rem;
   margin-bottom: 30px;
   font-weight: 700;
}

.quiz-image {
   width: 100%;
   border-radius: 15px;
   margin-top: 20px;
   max-height: 300px;
   object-fit: cover;
}

.quiz-container {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.quiz-option {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 20px;
   border-radius: 10px;
   text-align: left;
   color: var(--text-main);
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.2s;
}

.quiz-option:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.1);
   border-color: var(--primary);
}

.quiz-option.correct {
   background: rgba(34, 197, 94, 0.2);
   border-color: var(--success);
   color: var(--success);
}

.quiz-option.wrong {
   background: rgba(239, 68, 68, 0.2);
   border-color: var(--error);
   color: var(--error);
}

.quiz-option.disabled-opt {
   opacity: 0.5;
   cursor: default;
}

/* Responsive */
@media (max-width: 1024px) {
   body {
      overflow-y: auto;
      /* Allow natural body scroll on mobile */
      height: auto;
   }

   #app-container {
      flex-direction: column;
      height: auto;
      overflow: visible;
   }

   #sidebar {
      width: 100%;
      height: 80px;
      /* Fixed height header */
      flex-shrink: 0;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: sticky;
      /* Keep header visible */
      top: 0;
      z-index: 100;
      padding: 10px 20px;
      background: var(--bg-panel);
   }

   .logo-area {
      margin-bottom: 0;
      /* Adjust for horizontal layout */
      flex: 1;
      margin-left: 15px;
      margin-right: 60px;
      /* Ensure space for gauge */
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
   }

   .logo-icon {
      font-size: 1.5rem;
      display: block;
      /* Show on mobile */

      /* Button Styling */
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--text-main);
      padding: 8px 15px;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s;
   }

   .logo-icon:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: black;
   }

   .logo-area h1 {
      font-size: 1rem;
      line-height: 1.2;
      white-space: normal;
      text-align: left;
      color: #eab308;
      /* Yellow title */
   }

   .menu-container {
      height: 100vh;
      overflow-y: auto;
      padding: 50px 20px;
      display: block;
   }

   #main-content {
      overflow-y: auto;
      /* Internal scroll */
      height: 100%;
      padding-bottom: 120px;
      /* More space for controls */
      justify-content: flex-start;
      /* Align top for long content */
      background: radial-gradient(circle at top, rgba(30, 41, 59, 0.8) 0%, var(--bg-dark) 100%);
   }

   #controls {
      left: 0;
      z-index: 50;
      /* Ensure on top */
   }

   #current-position {
      display: none;
   }

   .slide-grid {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .slide-title {
      font-size: 2rem;
   }

   .slide-image img {
      margin-top: 20px;
   }

   .quiz-layout {
      grid-template-columns: 1fr;
   }

   /* Progress Gauge in Header */
   .progress-container {
      display: flex;
      /* Show container */
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
   }

   .gauge-wrapper {
      display: block;
      /* Show gauge */
      width: 40px;
      /* Smaller size */
      height: 40px;
   }

   .gauge-bg,
   .gauge-fill {
      stroke-width: 6;
      /* Thinner stroke */
   }

   .progress-label {
      display: none;
      /* Hide text label to save space */
   }

   /* Mobile Gauge Text */
   .gauge-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
   }

   .gauge-label-text {
      display: none;
   }

   .gauge-value-text {
      font-size: 0.9rem !important;
      /* Force small size */
      font-weight: 800;
      line-height: 1;
      color: var(--text-main);
   }

   .logo-area {
      margin-bottom: 0;
      flex: 1;
      margin-left: 15px;
      margin-right: 60px;
      /* Space for gauge */
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
   }

   /* Mobile Menu State */
   #module-list {
      display: none;
      position: fixed;
      top: 80px;
      left: 0;
      right: 0;
      background: var(--bg-panel);
      padding: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      max-height: 70vh;
      overflow-y: auto;
      z-index: 90;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   }

   #module-list.show-mobile-menu {
      display: block !important;
      animation: slideDown 0.3s ease-out;
   }
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}